/* Layout styles for the Receipt design: the home page list, the hall page's summary strip and bottom tabs,
 * the bottom sheet and the thanks panel. Colours, radii and fonts come from the tokens in receipt.css.
 */

.button-small {
  min-height: 44px;
  padding: 0.35rem 1rem;
  font-size: 0.95rem;
}

/* =============================================================================
   HOME: list
   ========================================================================== */

.home-group + .home-group {
  margin-top: calc(1.5rem + var(--edge-h, 0px) * 2);
}

.group-empty {
  margin: 0 0 1rem;
}

.group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem 0.25rem;
  font-size: 1.1rem;
}

.group-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--count-bg, var(--neutral-soft));
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
}

.row-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: var(--list-overflow, hidden);
}

.home-group .row-list {
  margin-bottom: 0;
}

.hall-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name rating"
    "status rating"
    "foot foot";
  column-gap: 1rem;
  align-items: start;
  padding: 0.85rem 1rem 0.85rem 1.25rem;
}

.hall-row + .hall-row {
  border-top: var(--bw) var(--border-style) var(--divider);
}

.hall-row.is-open {
  box-shadow: inset var(--open-stripe, 5px) 0 0 var(--good);
}

@media (hover: hover) {
  .hall-row:hover {
    background: var(--row-hover, var(--accent-soft));
  }
}

.hall-row-name {
  grid-area: name;
  margin: 0;
  font-size: 1.25rem;
}

.hall-row-name a {
  color: var(--text);
  text-decoration: none;
}

/* The whole row is the link. */
.hall-row-name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hall-row-name a:focus-visible {
  outline: none;
}

.hall-row-name a:focus-visible::after {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

.hall-row-status {
  grid-area: status;
}

.hall-row-status .status-line {
  margin: 0.15rem 0 0.1rem;
}

.hall-row-rating {
  grid-area: rating;
  justify-self: end;
  text-align: right;
}

.hall-row-rating .rating {
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}

.hall-row-rating .stars {
  font-size: 1rem;
}

/* Before voting opens the score is the next meal's lifetime average, marked under the count. */
.hall-row-rating .rating-note {
  color: var(--muted);
  font-size: 0.8rem;
}

.hall-row-rating .rating-empty {
  max-width: 8rem;
  font-size: 0.9rem;
}

/* A row without tags has no foot: its Rate button sits under the score instead. */
.hall-row-rating .button {
  position: relative; /* above the row-wide link */
  z-index: 1;
  margin-top: 0.6rem;
}

.hall-row-foot {
  grid-area: foot;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  min-width: 0;
  margin-top: 0.5rem;
}

/* Top tags: as many as fit on one line beside Rate; the rest wrap onto a hidden second line. */
.hall-row-foot .tag-list {
  flex: 1 1 0;
  min-width: 0;
  height: calc(0.92rem * 1.5 + 0.5rem); /* one .tag: its line plus its padding */
  overflow: hidden;
  align-content: flex-start;
}

.hall-row-foot .tag {
  max-width: 100%;
  white-space: nowrap;
}

/* A first tag wider than the space left (very narrow phones) ends in "…" instead of being cut. */
.hall-row-foot .tag > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hall-row-foot .tag-count {
  display: none;
}

.hall-row-foot .button {
  position: relative; /* above the row-wide link */
  z-index: 1;
  flex: none;
  margin-left: auto;
}

/* =============================================================================
   HALL: tabs
   ========================================================================== */

.tabs {
  position: sticky;
  top: env(safe-area-inset-top);
  z-index: 5;
  display: flex;
  gap: 0.35rem;
  margin: 0 0 calc(1rem + var(--edge-h, 0px));
  padding: 0.5rem 0;
  background: var(--bg);
}

.tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  padding: 0.4rem 0.5rem;
  border: var(--tab-bw, var(--bw-strong)) var(--border-style) transparent;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.tab:hover {
  color: var(--text);
}

.tab[aria-selected="true"]:hover {
  color: var(--tab-on-fg, var(--text));
}

.tab[aria-selected="true"] {
  background: var(--tab-on-bg, var(--surface));
  border-color: var(--border);
  color: var(--tab-on-fg, var(--text));
  box-shadow: inset 0 -3px 0 var(--tab-on-line, var(--accent)), var(--shadow);
}

/* =============================================================================
   HALL: Ratings tab, printed like receipt line items
   ========================================================================== */

/* Top tags: "Tasty ........ 118" (see itemizedTags in hall.js). */
.item-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
}

.item-label {
  flex: none;
  max-width: 70%;
}

/* The leader is a run of full stops, clipped to whatever room is left, like a printed price line. */
.item-leader {
  flex: 1;
  min-width: 1.5rem;
  overflow: hidden;
  white-space: nowrap;
  color: var(--muted);
}

.item-leader::before {
  content: "................................................................................................................................";
}

.item-value {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Lifetime ratings as plain lines too: no rules between them. */
.lifetime-item + .lifetime-item {
  border-top: 0;
}

.lifetime-item {
  padding-block: 0.3rem;
}

/* The meal coming up (or taking votes), highlighted like today in the hours table. */
.lifetime-item.is-upcoming {
  margin-inline: -0.5rem;
  padding: 0.45rem 0.5rem;
  background: var(--accent-soft);
}

/* Voting closed: the card goes grey and just says when it opens. */
.card-vote.is-closed {
  --vote-bg: var(--closed-soft);
  --vote-border: var(--divider);
}

.card-vote.is-closed .closed-message {
  margin: 0;
  padding: 0;
  background: none;
}

/* Menu tab: today's hours in one small slip above the (long) menu. */
.card-compact {
  padding-block: 0.8rem;
}

.card-compact h2 {
  margin-bottom: 0.35rem;
  font-size: 1rem;
}

.today-hours .item {
  padding-block: 0.15rem;
}

/* The meal the menu below is for, highlighted across the whole line like today in the hours table. */
.today-hours .item.is-menu {
  margin-inline: -0.5rem;
  padding-inline: 0.5rem;
  background: var(--accent-soft);
}

/* =============================================================================
   VOTE: the thanks panel
   ========================================================================== */

/* A small receipt stub: dashed tear lines top and bottom, centred, printed in the body font. */
.vote-done {
  padding: 0.9rem 1rem;
  border-block: 1px dashed var(--border);
  background: var(--surface);
  text-align: center;
}

.vote-done:focus {
  outline: none; /* it only takes focus from script, so screen readers announce it */
}

.vote-done:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.vote-done-title {
  margin: 0 0 0.4rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.vote-stub-stars {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
}

.vote-stub-stars .stars {
  font-size: 1.3rem;
}

.vote-stub-meal {
  margin: 0.2rem 0 0;
  color: var(--muted);
}

.vote-stub-number {
  margin: 0.5rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--divider);
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.vote-done .link-button {
  margin-top: 0.35rem;
}

/* =============================================================================
   VOTE: sheet (tappable stars, then a bottom sheet)
   ========================================================================== */

.quick-rate {
  --qs: 2.2rem; /* star size */
  margin: 0;
}

.card-vote .quick-rate {
  --qs: 2.8rem;
}

.quick-rate-label {
  margin: 0 0 0.15rem;
  font-weight: 700;
}

.quick-stars {
  display: flex;
  gap: 0.25rem;
}

.quick-star {
  flex: 1 1 0;
  min-width: 0;
  max-width: 4rem;
  height: calc(var(--qs) * 1.4);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: var(--qs);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--star-line);
  cursor: pointer;
}

@media (hover: hover) {
  .quick-stars .quick-star:hover,
  .quick-stars .quick-star:has(~ .quick-star:hover) {
    color: var(--star);
    -webkit-text-stroke-color: var(--star-edge);
  }
}

.quick-rate.is-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
}

.quick-rate.is-done .stars {
  font-size: 1.2rem;
}

.quick-rate-text {
  font-weight: 600;
}

html:has(dialog.sheet[open]) {
  overflow: hidden;
}

.sheet {
  width: 100%;
  max-width: 36rem;
  max-height: 92vh;
  max-height: 92dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
}

.sheet::backdrop {
  background: var(--overlay);
}

.sheet[open]::backdrop {
  animation: backdrop-in 0.2s ease-out;
}

.sheet-panel {
  --sticky-bg: var(--surface);
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  max-height: 92dvh;
  background: var(--surface);
  position: relative;
  border: var(--sheet-bw, var(--bw-strong)) var(--border-style) var(--vote-border);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--lift);
  filter: var(--card-filter, none);
  animation: sheet-up 0.22s ease-out;
  --edge-fill: var(--surface);
}

.sheet-grab {
  flex: none;
  width: 2.5rem;
  height: 0.3rem;
  margin: 0.6rem auto 0;
  border-radius: 999px;
  background: var(--star-line);
  opacity: 0.5;
}

.sheet-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.1rem 0.5rem;
}

.sheet-title {
  margin: 0;
  font-size: 1.4rem;
}

.sheet-title:focus {
  outline: none; /* it only takes focus when the sheet opens; the stars and tags have their own rings for keyboard use */
}

.sheet-sub {
  margin: 0.1rem 0 0;
  color: var(--muted);
}

.sheet-close {
  flex: none;
  width: 44px;
  height: 44px;
  border: var(--ctl-bw, var(--bw)) var(--border-style) var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 1.1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet-body > :last-child:not(.vote-form) {
  margin-bottom: max(1.1rem, env(safe-area-inset-bottom));
}

/* The submit button stays in view even when the tag groups make the form tall. */
.sheet .vote-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -1.1rem;
  padding: 0.6rem 1.1rem max(0.75rem, env(safe-area-inset-bottom));
  background: var(--sticky-bg);
  border-top: var(--bw) var(--border-style) var(--divider);
}

.sheet .vote-actions .vote-message {
  margin: 0 0 0.5rem;
}

.sheet .vote-actions .button-block {
  margin-top: 0;
}

.sheet .vote-form fieldset:last-of-type {
  margin-bottom: 1rem;
}

.sheet .star-glyph {
  height: 3.6rem;
  font-size: 2.9rem;
}

@media (min-width: 40rem) {
  .sheet {
    margin: auto;
    max-height: 85vh;
    max-height: 85dvh;
  }

  .sheet-panel {
    max-height: 85vh;
    max-height: 85dvh;
    border-bottom: var(--sheet-bw, var(--bw-strong)) var(--border-style) var(--vote-border);
    border-radius: var(--radius);
    animation-name: sheet-pop;
  }

  .sheet-grab {
    display: none;
  }
}

/* Torn edges on the sheet, for themes that use them. */
.sheet-panel::before,
.sheet-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--edge-h, 0px);
  color: var(--edge-fill, var(--surface));
  background-repeat: repeat-x;
  background-position: 50% 0;
  background-size: var(--edge-w, calc(var(--edge-h, 0px) * 2)) 100%;
  pointer-events: none;
}

.sheet-panel::before {
  bottom: calc(100% - 0.5px);
  background-image: var(--edge-top, conic-gradient(from -45deg at 50% 100%, transparent 90deg, currentColor 0));
}

.sheet-panel::after {
  display: none;
}

@media (min-width: 40rem) {
  .sheet-panel::after {
    display: block;
    top: calc(100% - 0.5px);
    background-image: var(--edge-bottom, conic-gradient(from 135deg at 50% 0, transparent 90deg, currentColor 0));
  }
}

@keyframes sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}

@keyframes sheet-pop {
  from {
    transform: translateY(1rem) scale(0.98);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* =============================================================================
   HALL: summary (tabs, with the current rating always in view)
   ========================================================================== */

/* label  | Rate
   score  | Rate
   small print, full width (so it stays on one line on most phones) */
.summary-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label action"
    "score action"
    "meta meta";
  align-items: center;
  column-gap: 1rem;
  margin-bottom: calc(0.75rem + var(--edge-h, 0px) * 2);
  padding: 0.8rem 1rem;
}

.summary-rating {
  display: contents;
}

.summary-label {
  grid-area: label;
  margin: 0 0 0.15rem;
}

.summary-stars {
  grid-area: score;
}

.summary-strip > .button {
  grid-area: action;
}

.summary-lifetime {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* The count is in the small print instead (see updateSummary), so the score line stays on one line. */
.summary-stars .rating {
  flex-wrap: nowrap;
}

.summary-stars .rating-detail {
  display: none;
}

.summary-lifetime:empty {
  display: none;
}

.summary-stars .rating-avg {
  font-size: 2rem;
}

.summary-stars .stars {
  font-size: 1.2rem;
}

/* =============================================================================
   HALL: tabs docked at the bottom of the screen
   ========================================================================== */

:root {
  --dock-h: calc(4.25rem + env(safe-area-inset-bottom));
  scroll-padding-bottom: var(--dock-h);
}

:root main.container {
  padding-bottom: calc(var(--dock-h) + 1.5rem);
}

:root .tabs {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  justify-content: center;
  margin: 0;
  padding: 0.5rem var(--gr) calc(0.5rem + env(safe-area-inset-bottom)) var(--gl);
  background: var(--surface);
  /* Paper themes tear the bar's top edge instead of ruling a line (--dock-bw: 0px). */
  border-top: var(--dock-bw, var(--bw)) var(--border-style) var(--border);
  filter: var(--dock-filter, var(--card-filter, none));
  --edge-fill: var(--surface);
}

/* The bar's torn top edge, the same sawtooth the cards use. Draws nothing when --edge-h is 0px. */
:root .tabs::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 0.5px);
  height: var(--edge-h, 0px);
  color: var(--edge-fill);
  background-image: var(--edge-top, conic-gradient(from -45deg at 50% 100%, transparent 90deg, currentColor 0));
  background-repeat: repeat-x;
  background-position: 50% 0;
  background-size: var(--edge-w, calc(var(--edge-h, 0px) * 2)) 100%;
  pointer-events: none;
}

/* Size tabs to their labels first, so "Menu & hours" stays on one line on a phone (shorter bar, more page).
   If they still don't fit (very narrow screens, big text), they shrink and wrap as before. */
:root .tab {
  flex: 1 1 auto;
  max-width: 14rem;
  padding-inline: 0.75rem;
}

@media (max-width: 22.5rem) {
  :root .tab {
    padding-inline: 0.5rem;
    font-size: 0.88rem;
  }
}

/* =============================================================================
   HALL: summary details
   ========================================================================== */

/* The summary strip already shows the current meal's score, so the Ratings tab doesn't repeat it. */
:root .ratings-current {
  display: none;
}

:root .ratings-current + .ratings-block {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* After you've rated, the summary's button says so and steps back. */
.summary-strip .button-secondary {
  border-color: var(--border);
}

/* =============================================================================
   VOTE: sheet entry on the hall page (star row first, small hint underneath)
   ========================================================================== */

.quick-rate-hint {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.card-vote .quick-rate-hint {
  text-align: center;
}

#sec-vote:has(.quick-rate) {
  padding-block: 0.9rem 0.8rem;
}

#sec-vote:has(.quick-rate) h2 {
  margin-bottom: 0.25rem;
}

#sec-vote:has(.quick-rate) .quick-stars {
  justify-content: space-between;
}