/* Today's specials and diners' ratings on a restaurant's site: the strip of specials before the menu's sections, the
   marks on a dish's row and its page, and "How was it?" on an order's page (templates/public/_specials.twig,
   _dish_marks.twig, _dish_extras.twig, _rate_order.twig). Colours come from the look; the stars are the one colour of
   their own, a warm amber that reads as a rating in any look. Logical properties only (CssLogicalPropertiesTest). */
:root { --star: #e39a00; --star-edge: #c98500; }
.dark { --star: #f5b940; --star-edge: #f5b940; }

/* The strip: one row of cards, sideways on a phone with the next one peeking in so it is plain there are more; on a wider
   screen as many as fit share the row, and more scroll on. A day's single special lies across the page instead, its
   photo beside its words. The whole card opens the dish; its Add button sits on the photo's lower corner, above that,
   as the list's button sits on its square - so every card is its photo, its words and its price, and they line up. */
.specials { padding-block: 1.4rem 0.2rem; }
.specials-title { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.75rem; font-size: clamp(1.15rem, 2.8vw, 1.4rem); }
.specials-title svg { flex: none; inline-size: 1.05em; block-size: 1.05em; fill: var(--brand); }
.specials-list {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(13.5rem, 70%); gap: 0.75rem; margin: 0; padding: 0 0 0.6rem; list-style: none;
  overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: thin;
}
.special {
  position: relative; scroll-snap-align: start; display: flex; flex-direction: column; min-inline-size: 0;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line)); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 10px 24px -20px rgb(0 0 0 / 0.5);
}
.special-media { position: relative; }
.special-photo { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.special-letter {
  display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 13%, var(--surface));
  color: var(--brand-text); font-family: var(--font-heading); font-size: 3.2rem; font-weight: 700; line-height: 1;
}
.special .dish-add { position: absolute; z-index: 1; inset-block-end: 0.6rem; inset-inline-end: 0.6rem; margin: 0; }
.special .dish-add .btn, .special .btn.dish-add { min-inline-size: 4.5rem; box-shadow: 0 4px 14px rgb(0 0 0 / 0.22); }
.special .btn-quiet.dish-add { background: var(--surface); border-color: var(--surface); color: var(--ink); }
.special-body { flex: 1; display: flex; flex-direction: column; padding-block: 0.7rem 0.8rem; padding-inline: 0.85rem; min-inline-size: 0; }
.special-name { margin: 0; font-size: 1.03rem; line-height: 1.25; overflow-wrap: anywhere; }
.special-name a { color: inherit; text-decoration: none; }
.special-name a::after { content: ''; position: absolute; inset: 0; }
.special:hover .special-name a { text-decoration: underline; text-underline-offset: 0.2em; }
.special:has(.special-name a:focus-visible) { outline: 3px solid var(--focus, var(--brand)); outline-offset: 2px; }
.special-note { margin-block: 0.2rem 0; color: var(--brand-text); font-size: 0.88rem; font-weight: 650; line-height: 1.35; }
/* Until when a special for some hours runs ("Until 18:00"): quieter than the note - a fact to know, not the pitch. */
.special-until { margin-block: 0.2rem 0; color: var(--muted); font-size: 0.82rem; font-weight: 650; line-height: 1.35; }
.special-off { margin-block: 0.3rem 0; color: var(--danger); font-size: 0.85rem; font-weight: 700; }
/* The price at the foot of the words, level across the row whatever the length of the notes above it. */
.special-price { margin: 0; margin-block-start: auto; padding-block-start: 0.5rem; }
.special-price .price { font-size: 1.05rem; }
/* The pounds under the dollars, on the reading side. The line is left to right (.num), so text-align would read "start"
   as left on an Arabic page too; a box as wide as its words (table) is placed by the page's direction instead. */
.special-price .price-alt { display: table; }
.special-was { margin-inline-start: 0.2rem; color: var(--muted); font-size: 0.86rem; font-weight: 500; text-decoration-thickness: 1.5px; }
.special-unit { color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.special.is-off :is(.special-photo, .special-name, .special-price) { opacity: 0.55; }
.specials-list:has(> .special:only-child) { grid-auto-columns: 100%; }
.special:only-child { flex-direction: row; }
.special:only-child .special-media { flex: 0 0 min(40%, 15rem); }
.special:only-child .special-photo { block-size: 100%; min-block-size: 8rem; aspect-ratio: auto; }
@media (min-width: 40rem) {
  .specials-list { grid-auto-columns: minmax(10rem, 1fr); }
  .special-photo { max-block-size: 10rem; }
  .special:only-child .special-photo { max-block-size: none; }
}

/* A dish's row: "Special" among its tags, in the look's own colour, and its score by a star. In the list the tags are
   words between dots; the score takes its dot like any of them. */
.tag-special { color: var(--brand-text); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.menu-list .tag-special { background: none; font-weight: 700; }
.dish-score { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.dish-score svg { flex: none; inline-size: 1em; block-size: 1em; fill: var(--star); }
.menu-list .dish-score:not(:first-child)::before { content: '·'; margin-inline-end: 0.15rem; color: var(--muted); font-weight: 600; }

/* A dish's page: that it is today's special, what it usually costs, the restaurant's note, until when, and its score. */
.dish-extras { margin-block: -0.1rem 0.85rem; }
.special-flag { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin: 0; color: var(--brand-text); }
.special-flag svg { flex: none; inline-size: 1.1rem; block-size: 1.1rem; fill: var(--brand); }
.dish-extras .special-note { margin-block: 0.2rem 0; font-size: 0.95rem; }
.dish-extras .special-until { font-size: 0.88rem; }
.dish-extras .dish-score { margin-block: 0.45rem 0; font-size: 0.92rem; }

/* "How was it?": five stars to choose from, outlined until chosen - the shape says which is chosen, not only the colour -
   then a comment. The chosen star lights those before it; so does the one under the pointer, until it moves away. */
.rate { margin-block: 1.5rem; padding-block: 1.1rem 1.25rem; padding-inline: 1.15rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.rate h2 { margin-block-end: 0.25rem; font-size: 1.25rem; }
.rate-lead { color: var(--muted); margin-block-end: 0.6rem; }
.rate-stars { display: flex; flex-wrap: wrap; gap: 0.1rem; margin-block: 0 0.9rem; }
.rate-stars label { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; cursor: pointer; }
.rate-stars svg { inline-size: 2.2rem; block-size: 2.2rem; fill: transparent; stroke: var(--muted); stroke-width: 1.4; stroke-linejoin: round; transition: transform 0.12s ease; }
.rate-stars input:checked + label svg, .rate-stars label:has(~ input:checked) svg { fill: var(--star); stroke: var(--star-edge); }
@media (hover: hover) {
  .rate-stars:has(label:hover) label svg { fill: transparent; stroke: var(--muted); }
  .rate-stars:has(label:hover) label:hover svg, .rate-stars:has(label:hover) label:has(~ label:hover) svg { fill: var(--star); stroke: var(--star-edge); }
  .rate-stars label:hover svg { transform: scale(1.1); }
}
.rate-stars input:focus-visible + label { outline: 3px solid var(--focus, var(--brand)); outline-offset: 0; }
.rate textarea { min-block-size: 4.5rem; }
.rate .field { margin-block-end: 0.9rem; }
.rate-done .star-row { display: inline-flex; gap: 0.15rem; }
.rate-done .star-row svg { inline-size: 1.7rem; block-size: 1.7rem; }
.rate-comment { margin-block: 0.6rem 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .rate-stars svg { transition: none; } }