/* page-dining.css: #dining, laid out to spec/SCREEN-dining.md rev 2 (DD33, DD32, DD133, UE56, UE226; SG 0045, DD 0017, UE 0054, UE 0067). Tokens from dibs.css section 1 only. Every rule sits under .dn (page root), #drawer-content > .dn-sheet (item drawer) or #dn-pop.dn-popdlg (the page's one popover / bottom sheet, which dining.js appends to body), since every stylesheet loads on every route. */ /* ---------- page head (SCREEN 5.2) ---------- */ .dn { max-width: var(--w-list); } .dn .dn-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2) var(--s-6); margin-bottom: var(--s-6); } .dn .dn-head h1 { margin: 0; } .dn .dn-today { margin: var(--s-1) 0 0; font: var(--t-meta); color: var(--muted); } .dn .dn-status { margin: 0; font: var(--t-meta); color: var(--muted); text-align: right; } .dn .dn-stale, .dn .dn-lrnote { display: flex; align-items: center; gap: var(--s-2); min-height: 36px; margin: 0 0 var(--s-4); padding: var(--s-2) var(--s-3); border-radius: var(--r-control); background: var(--warning-subtle); font: var(--t-meta); color: var(--ink); } .dn .dn-stale .icon, .dn .dn-lrnote .icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--warning); } .dn .dn-src { margin: var(--s-8) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); } .dn .dn-src:focus:not(:focus-visible) { outline: none; } /* takes focus only when the NutriHall card above it closes */ @media (min-width: 600px) { .dn.is-find .dn-src { display: none; } } /* the head says it there; under 600 the head line hides instead */ /* ---------- frame at 1024 and up (SCREEN 5.1): rail 300 (260 under 1280), pane beside it ---------- */ .dn.is-split .dn-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-8); align-items: start; } /* the rail is never its own scroll box (owner 23 Oct: the wheel over it must move the page). It sits in the page flow and scrolls with it; dining.js adds .is-stick only while the whole rail fits the viewport with 16 px above and below, so a sticky rail never needs a scrollbar and the wheel over it always reaches the page */ .dn.is-split .dn-rail.is-stick { position: sticky; top: var(--s-4); } .dn.is-split .dn-panecol { min-width: 0; } /* 1024 to 1279: a 272 px rail with 12 px row sides fits the longest state line on one line ("Closes soon, breakfast ends 10 AM" needs 233 px); the 24 px column gap gives the pane back 8 of the 12 px the rail takes */ @media (max-width: 1279px) { .dn.is-split .dn-grid { grid-template-columns: 272px minmax(0, 1fr); gap: var(--s-6); } .dn.is-split .dn-row { padding-left: var(--s-3); padding-right: var(--s-3); } .dn.is-split .dn-row + .dn-row::before { left: var(--s-3); } } /* ---------- hall rail and list (SCREEN 5.3, 6.1; DD133) ---------- */ .dn .dn-rail { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: clip; } /* clip, not hidden: hidden would make it a scroll container */ .dn .dn-row { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: var(--s-3) var(--s-4); color: var(--ink); text-decoration: none; } .dn:not(.is-split) .dn-row { min-height: 72px; gap: 0; padding-top: var(--s-2); padding-bottom: var(--s-2); } .dn .dn-row + .dn-row::before { content: ''; position: absolute; top: 0; left: var(--s-4); right: 0; height: 1px; background: var(--line); } .dn a.dn-row:hover { background: var(--bg); text-decoration: none; } .dn .dn-row.is-sel, .dn a.dn-row.is-sel:hover { background: var(--accent-subtle); } .dn .dn-row.is-sel::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); } .dn .dn-row.is-sel + .dn-row::before { left: 0; } .dn .dn-row:focus-visible { outline-offset: -2px; } .dn .dn-rname { font: var(--t-item); color: var(--ink); } .dn .dn-state { display: block; font: var(--t-meta); color: var(--muted); } .dn .dn-state > [aria-hidden] { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; } .dn .dn-state .icon { width: 14px; height: 14px; color: var(--muted); } .dn .dn-state b { font-weight: 600; } .dn .dn-sep { display: inline-block; flex-shrink: 0; width: 3px; height: 3px; border-radius: var(--r-pill); background: var(--muted); } .dn .is-pos { color: var(--positive); } .dn .is-warn { color: var(--warning); } .dn .is-ink2 { color: var(--ink-2); } .dn .is-danger { color: var(--danger); } .dn .is-muted { color: var(--muted); } .dn .dn-rplace { font: var(--t-label); font-weight: 400; color: var(--muted); } .dn.is-split .dn-rplace { display: none; } .dn .dn-railnote { margin: 0; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); font: var(--t-meta); color: var(--muted); } .dn .dn-railnote + .dn-row::before { display: none; } /* credit card marker (owner 24 Oct: "too much text, should be a card icon"; DD 0133 meta-line glyphs, DD 0015 DashPass glyph with no words): a 14 px Lucide credit-card glyph at the end of the time line, after the same 3 px dot, in the clock glyph's muted ink and size. It wraps with the fact as one unit, so no line starts with a dot and no row grows. Only on the halls that take credit cards; its words are in the row's screen reader text and a hover title. */ .dn .dn-factg, .dn .dn-rcard { display: inline-flex; align-items: center; column-gap: 6px; white-space: nowrap; } /* ---------- pane header and facts box (SCREEN 5.4; UE 0054) ---------- */ .dn .dn-pane { min-width: 0; } .dn .dn-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-bottom: var(--s-1); } .dn .dn-back .icon { width: 16px; height: 16px; } .dn .dn-phead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); } .dn .dn-hname { margin: 0; font: var(--t-title); color: var(--ink); } .dn .dn-hname:focus { outline: none; } .dn .dn-hlink { font: var(--t-control); } .dn .dn-hmeta, .dn .dn-hread { margin: var(--s-1) 0 0; font: var(--t-meta); color: var(--muted); } .dn .dn-hread { margin-top: 0; } .dn .dn-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--s-4) 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); } .dn .dn-facts.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dn .dn-facts.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Pay with, 600 px and up: its own full-width row under the time facts (UE 0302 "Payment options" row), one line; the time facts share the row above. Phones keep the 2 by 2 grid below. */ @media (min-width: 600px) { .dn .dn-facts.has-pay.c4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dn .dn-facts.has-pay.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dn .dn-facts.has-pay.c2 { grid-template-columns: minmax(0, 1fr); } .dn .dn-facts.has-pay .dn-fact-c.is-wide { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); } } .dn .dn-fact-c { min-width: 0; padding: var(--s-3) var(--s-4); } .dn .dn-fact-c + .dn-fact-c { border-left: 1px solid var(--line); } .dn .dn-facts dt { display: flex; align-items: center; gap: 2px; font: var(--t-label); color: var(--muted); } .dn .dn-facts dt .dn-i { margin: -5px 0; } .dn .dn-facts dt .dn-i:focus-visible { outline-offset: -2px; } /* the ring stays inside the button, clear of the label (diningpaychk n2) */ .dn .dn-facts dd { display: flex; align-items: center; gap: var(--s-1); margin: 2px 0 0; font: var(--t-item); color: var(--ink); } .dn .dn-facts dd.is-pos { color: var(--positive); } .dn .dn-facts dd.is-muted { color: var(--muted); } .dn .dn-facts.is-skel .dn-fact-c { display: flex; flex-direction: column; } .dn .dn-i { flex-shrink: 0; width: 28px; height: 28px; min-height: 28px; margin: -4px 0; color: var(--muted); vertical-align: middle; } /* ---------- closed hall (SCREEN 7; DD 0017) ---------- */ .dn .dn-closed { margin-top: var(--s-4); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); } .dn .dn-closedt { margin: 0; font: var(--t-item); color: var(--ink); } .dn .dn-closedw { margin: 2px 0 0; font: var(--t-meta); color: var(--ink-2); } .dn .dn-alt { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); margin-top: var(--s-3); font: var(--t-meta); } .dn .dn-altl { color: var(--muted); } .dn .dn-alt ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .dn .dn-alt li > span { color: var(--muted); } .dn .dn-alt a { font-weight: 500; } /* ---------- period, day and diet controls (SCREEN 5.5; UE 0054 track, UE56 chips) ---------- */ .dn .dn-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-6); } .dn .dn-seg { display: inline-flex; gap: var(--s-1); height: 36px; padding: var(--s-1); border: 0; border-radius: var(--r-control); background: var(--surface-2); } .dn .dn-seg > button { position: relative; flex: 1 1 auto; height: 28px; min-height: 28px; padding: 0 var(--s-3); border: 1px solid transparent; border-radius: var(--r-control); background: transparent; color: var(--ink-2); font: var(--t-control); white-space: nowrap; } .dn .dn-seg > button:hover { background: transparent; color: var(--ink); } .dn .dn-seg > button[aria-pressed="true"] { background: var(--surface); border-color: var(--line); color: var(--ink); font-weight: 600; } .dn .dn-day { min-width: 200px; } .dn .dn-day > button { flex: 1 1 0; } .dn .dn-day > button.is-off, .dn .dn-day > button.is-off:hover { color: var(--muted); cursor: not-allowed; } .dn .dn-nowdot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; margin-right: 6px; border-radius: var(--r-pill); background: var(--positive); } .dn .dn-offtip { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 6; padding: 6px var(--s-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-overlay); font: var(--t-label); color: var(--ink); white-space: nowrap; pointer-events: none; } .dn .dn-day > button.is-off:hover .dn-offtip, .dn .dn-day > button.is-off:focus .dn-offtip { display: block; } .dn .dn-filters { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); } .dn .dn-chips { display: flex; align-items: center; gap: var(--s-2); min-width: 0; } .dn .dn-chipscroll { display: flex; align-items: center; gap: var(--s-2); min-width: 0; } .dn .dn-chipset { display: flex; gap: var(--s-2); } .dn .dn-chip { flex-shrink: 0; gap: 6px; height: 32px; min-height: 32px; padding: 0 var(--s-3); border: 1px solid transparent; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); font: var(--t-control); white-space: nowrap; } .dn .dn-chip:hover { background: var(--line); } .dn .dn-chip .icon { width: 16px; height: 16px; } .dn .dn-chip[aria-checked="true"], .dn .dn-chip[aria-pressed="true"], .dn .dn-chip.is-on, .dn .dn-chip[aria-checked="true"]:hover, .dn .dn-chip[aria-pressed="true"]:hover, .dn .dn-chip.is-on:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .dn .dn-chipsep { flex-shrink: 0; width: 1px; height: 20px; background: var(--line-strong); } .dn .dn-count { font: var(--t-meta); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } /* ---------- station bar (SCREEN 5.6; DD33) ---------- */ .dn .dn-sbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--s-1); height: 48px; margin-top: var(--s-4); background: var(--bg); border-bottom: 1px solid var(--line); } .dn .dn-sbtn { flex-shrink: 0; width: 36px; height: 36px; min-height: 36px; color: var(--ink-2); } .dn .dn-sbtn:disabled { color: var(--muted); } /* each tab carries half the 24 px gap as its own padding, so the whole strip is tab (no dead gaps) and the shortest label (Base, 28 px) is still 52 px wide; the -4 px margin keeps the first label where the 8 px gap put it */ .dn .dn-stabs { display: flex; flex: 1; gap: 0; min-width: 0; height: 100%; margin-left: calc(var(--s-2) - var(--s-3)); overflow-x: auto; scrollbar-width: none; } .dn .dn-stabs::-webkit-scrollbar { display: none; } .dn .dn-stabs.is-clipped { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); } .dn .dn-stabs > button { position: relative; flex-shrink: 0; min-width: 44px; height: 100%; min-height: 0; padding: 0 var(--s-3); border: 0; border-radius: 0; background: none; color: var(--muted); font: var(--t-control); white-space: nowrap; } .dn .dn-stabs > button:hover { background: none; color: var(--ink); } .dn .dn-stabs > button:focus-visible { outline-offset: -2px; } .dn .dn-stabs > button[aria-current="true"] { color: var(--ink); font-weight: 600; } .dn .dn-stabs > button[aria-current="true"]::after { content: ''; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 0; height: 2px; background: var(--ink); } .dn .dn-search { flex: 1; min-width: 0; max-width: none; height: 36px; margin-left: var(--s-1); } .dn .dn-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; } /* the bar's own close button clears and closes */ html:has(.dn .dn-sbar) { scroll-padding-top: 64px; } /* ---------- menu body (SCREEN 5.7; DD33 cards, UE56 meta and caveat) ---------- */ .dn .dn-body { container: dnbody / inline-size; margin-top: var(--s-4); } .dn .dn-sec + .dn-sec { margin-top: var(--s-8); } .dn .dn-stitle { margin: 0 0 var(--s-3); font: var(--t-h2); color: var(--ink); } .dn .dn-stitle:focus { outline: none; } .dn .dn-n { margin-left: var(--s-1); font: var(--t-meta); color: var(--muted); font-variant-numeric: tabular-nums; } .dn .dn-ssub { font-weight: 400; color: var(--ink-2); } .dn .is-theme .dn-stitle { margin: 0; } .dn .is-theme + .dn-sec { margin-top: var(--s-4); } .dn .dn-caveat { margin: calc(-1 * var(--s-1)) 0 var(--s-3); font: var(--t-meta); color: var(--muted); } .dn .dn-caveat .dn-i { display: inline-flex; margin: -6px 0 -4px 2px; } /* columns from the body width (owner 26 Oct, dining-cards-fit; SCREEN-dining.md "Card columns"): one column under 472, two from 472, three from 912, so a card is never wider than 471 px (the old rule kept one column up to 719, a 648 px bar at 768) and never narrower than 230. A lone card keeps its column's width. In one column a card keeps its own height (check M1); in two or three, the cards of a row share the row's height, as the cells of every two-column menu grid do (DD 0022, DD 0263, UE 0058) */ .dn .dn-cards { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--s-2); } @container dnbody (min-width: 472px) { .dn .dn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--s-3); } } @container dnbody (min-width: 912px) { .dn .dn-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* two narrow columns (cards 230 to 314): the 12 px side padding keeps a two-line name from wrapping to a third line */ @container dnbody (min-width: 472px) and (max-width: 639px) { .dn .dn-cards > .dn-card:not(.is-art), .dn .dn-cards .dn-ctext { padding-left: var(--s-3); padding-right: var(--s-3); } } .dn .dn-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; width: 100%; min-height: 64px; margin: 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); color: var(--ink); font: var(--t-body); text-align: left; } .dn .dn-card:has(> .dn-cname:only-child) { min-height: 48px; } .dn .dn-card:hover { border-color: var(--line-strong); background: var(--bg); } .dn .dn-card.is-skel { min-height: 64px; } .dn .dn-cname { font: var(--t-item); color: var(--ink); overflow-wrap: anywhere; } .dn .dn-cmeta { font: var(--t-meta); color: var(--muted); } .dn .dn-cmeta .dn-sep { margin: 0 6px; vertical-align: middle; } /* search cards: station, dot, calories (the time line dot) */ /* check dncf M1: "N cal" never splits from its unit. A search card's line is station, dot, calories, and the dot leads the calories piece, so a narrow card breaks the line at the dot: the line is pulled 15 px left (the dot and its two 6 px margins) and those 15 px are clipped, which hides the dot only when the calories start a line; the station gets the same 15 px back */ .dn .dn-ccal { white-space: nowrap; } .dn .dn-cmeta.is-st { display: flex; flex-wrap: wrap; align-items: baseline; margin-left: -15px; clip-path: inset(0 0 0 15px); } .dn .dn-cmeta.is-st > .dn-cst { min-width: 0; padding-left: 15px; } .dn .dn-named { margin-top: var(--s-2); } /* drawer: the ingredient words that name gluten or wheat (M1) */ .dn .dn-tags, #drawer-content > .dn-sheet .dn-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); } .dn .dn-tags { margin-top: 2px; } /* illustrated card, reference-first 26 Oct (SCREEN-dining.md "Dish pictures, reference-first"): DD 0033 anatomy, the picture flush at the card's right edge for the card's full height, clipped by the card's own corners, no frame, no inset and no marker on it (DD 0033, UE 0199 and DD 0263 put nothing over an item picture). The text keeps the text card's padding and is centred in the card, as DD 0033 centres its text block. Fix round 1 (check m1): 144 px wide at 600 and up (22 percent of a one-column hall card, 30 percent of a two-column Search card; it was 112, 17 percent), 96 under 600. Card columns (26 Oct): the width is 35 percent of the card, between 80 and 144 px, as DD 0033 gives its picture 37 percent of the card (134 of 358 pt), so a narrow card in two columns gets a narrow picture and its text keeps at least 148 px; a 358 px phone card gets 125 px. */ .dn .dn-card.is-art { container: dncard / inline-size; flex-direction: row; align-items: stretch; justify-content: space-between; gap: 0; min-height: 94px; padding: 0; overflow: hidden; } .dn .dn-ctext { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-width: 0; padding: var(--s-3) var(--s-4); } .dn .dn-cfig { position: relative; flex: none; display: block; width: clamp(80px, 35%, 144px); line-height: 0; overflow: hidden; background: var(--surface-2); } /* check dncf M1: in the two narrow columns (body 472 to 639, cards 230 to 314) the picture is 28 percent, 72 to 88 px, so the text keeps 150 px or more: at 540 Search's longest name takes 3 lines, not 5, and names of 3 lines fall from 31 to 17 of 672 */ @container dnbody (min-width: 472px) and (max-width: 639px) { .dn .dn-cfig { width: clamp(72px, 28%, 144px); } } /* check m2: the pictures frame the plate at 70 to 80 percent of a 4:3 field, so in the card box the field took much of the area; a fixed zoom on the card picture only crops the food tight to the box, as DD 0033 and UE 0199 do (the drawer keeps the whole frame) */ .dn .dn-cimg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); } /* check M1 (fix round 1): one height for pictured cards only (94 px: 12 + 22 + 2 + 20 + 4 + 20 + 12 + 2 border, a card with name, calories and tags). Text cards keep their own 48 or 64 px beside them: no reference pads a text-only row to a pictured one, and the padding was what the owner named. A list with pictures has two heights, 94 and the text card's own. */ /* a picture box under 112 px is nearer square, so cover already crops the 4:3 field's sides: the lighter zoom (was the 96 box under 600). dncard is the pictured card itself (declared on .dn-card.is-art; check dncf m1 found the name declared nowhere) */ @container dncard (max-width: 319px) { .dn .dn-cimg { transform: scale(1.1); } } @media (max-width: 599px) { /* rollout 25 Oct (6.2 amendment), narrowed in fix round 1 (check M1): only the first card of the screen, when pictured, has its text at the card top, so its dish name, tags and calories are on the first screen at 390 by 844 and only the picture runs past */ .dn .dn-cards.is-lead > .dn-card.is-art:first-child .dn-ctext { align-self: flex-start; justify-content: flex-start; } } /* owner 22 Oct and 26 Oct: the page says once that the pictures are illustrations (UE 0056 says "Filters use AI and may be inaccurate" once, under the first grid it covers); it sits under the cards of the first station or hall group with a picture */ .dn .dn-artline { margin: var(--s-2) 0 0; font: var(--t-meta); color: var(--muted); } .dn .dn-tag, #drawer-content > .dn-sheet .dn-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--s-2); border-radius: var(--r-pill); font: var(--t-small); } .dn .dn-tag.is-veg, #drawer-content > .dn-sheet .dn-tag.is-veg { background: var(--positive-subtle); color: var(--positive); } .dn .dn-tag.is-halal, #drawer-content > .dn-sheet .dn-tag.is-halal { background: var(--accent-subtle); color: var(--accent); } .dn .dn-more { justify-content: center; width: 100%; min-height: 40px; margin: var(--s-2) 0 0; text-align: center; } .dn .dn-hidden { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-top: var(--s-6); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); font: var(--t-meta); color: var(--muted); } .dn .dn-hidden b { font-weight: 600; color: var(--ink); } .dn .dn-hidden .text-btn { margin: 0; } .dn .dn-box { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); margin-top: var(--s-4); padding: var(--s-6) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); font: var(--t-meta); color: var(--ink-2); } .dn .dn-box.is-center { align-items: center; text-align: center; } .dn .dn-box p { margin: 0; max-width: 480px; } .dn .dn-box .text-btn { margin: 0; } .dn .dn-boxt { font: var(--t-item); color: var(--ink); } .dn .dn-box .dn-boxsub { margin-top: calc(-1 * var(--s-2)); color: var(--muted); } .dn .dn-body > .dn-lrnote { margin: 0 0 var(--s-4); } /* ---------- NutriHall card after the menu (owner 23 Oct; SCREEN "NutriHall card"; UE 0162, SG 0039) ---------- Tinted --surface-2 fill and no border, so it never reads as one more dish card (those are --surface with a --line border). */ .dn .dn-promo { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-6); padding: var(--s-4) var(--s-1) var(--s-1) var(--s-4); border: 0; border-radius: var(--r-panel); background: var(--surface-2); } .dn .dn-promob { flex: 1 1 auto; min-width: 0; } .dn .dn-promot { margin: 0; font: var(--t-item); color: var(--ink); } .dn .dn-promod { margin: var(--s-1) 0 0; max-width: 640px; font: var(--t-meta); color: var(--ink-2); } .dn .dn-promol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-4); margin: 0; } .dn .dn-promol .d-ext { min-height: 44px; font: var(--t-control); font-weight: 500; } .dn .dn-promon { font: var(--t-meta); color: var(--muted); } .dn .dn-promox { flex-shrink: 0; width: 44px; height: 44px; min-height: 44px; margin-top: calc(-1 * var(--s-3)); } .dn .dn-promox:hover { background: var(--line); } /* ---------- search all halls (owner 24 Oct; SCREEN "Search all halls"; UE 0249, DD 0028, DD 0097, UE 0315, UE 0308) ---------- */ /* the way in: a secondary button after the freshness line in the page head (DD 0117: search opens its own screen) */ .dn .dn-status + .dn-findbtn { flex-shrink: 0; } @media (min-width: 1024px) { .dn .dn-head:has(> .dn-findbtn) .dn-status { margin-left: auto; } } .dn .dn-findbtn .icon { width: 16px; height: 16px; color: var(--ink-2); } .dn.is-find .dn-back { margin-bottom: var(--s-1); } .dn .dn-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); } .dn .dn-fq { flex: 1 1 320px; max-width: none; } .dn .dn-fq input::-webkit-search-cancel-button { cursor: pointer; } .dn .dn-fwhen { display: flex; flex-wrap: wrap; gap: var(--s-2); } .dn .dn-fsel { position: relative; display: flex; align-items: center; margin: 0; font-weight: 400; } /* n2: flex, no line box under the select */ .dn .dn-fsel > .icon { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .dn .dn-fsel :is(select, :where(.csel)) { height: 36px; min-width: 0; max-width: 100%; margin: 0; /* n2: the form label rule's 6 px top margin put the selects 3 px under the field */ padding-left: 36px; font: var(--t-control); color: var(--ink); text-overflow: ellipsis; } /* the search's chips (findChips): allergen pair, a divider, Diet, a divider, Halal; one line at 1024 and up */ .dn.is-find .dn-ffil { display: block; margin-top: var(--s-4); } .dn.is-find .dn-ffil .dn-chipscroll { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; } .dn.is-find .dn-ffil .dn-chipscroll.is-clipped { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); } @media (max-width: 1023px) { /* the first divider becomes the line break after Avoid; the negative margin takes back the empty row's gap */ .dn.is-find .dn-ffil .dn-fbreak { display: block; flex-basis: 100%; width: auto; height: 0; margin-top: calc(-1 * var(--s-2)); background: none; } } .dn .dn-fnote { margin: var(--s-3) 0 0; } .dn .dn-fhint { margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-control); background: var(--surface-2); font: var(--t-meta); color: var(--ink); } .dn .dn-fsum { margin: var(--s-4) 0 0; font: var(--t-meta); color: var(--ink-2); } .dn .dn-fcount { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .dn.is-find .dn-body { margin-top: var(--s-4); } .dn .dn-fghead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-4); margin-bottom: var(--s-3); } .dn .dn-fghead .dn-stitle { margin: 0; } .dn .dn-fghead .dn-stitle a { color: var(--ink); text-decoration: none; } .dn .dn-fghead .dn-stitle a:hover { color: var(--accent); text-decoration: underline; } .dn .dn-fgmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); } /* Search all halls cards take the hall menu's column rule (three from 912; it was three from 1040, a 481 px card at 1280) */ .dn .dn-fstate { margin-top: 0; } .dn .dn-fopen { color: var(--ink-2); } .dn .dn-flate { display: grid; gap: 2px; margin: calc(-1 * var(--s-2)) 0 0; padding: 0; list-style: none; } .dn .dn-flate a { font-weight: 500; } .dn .dn-flate span { color: var(--muted); } .dn .dn-falso { margin: var(--s-6) 0 0; font: var(--t-meta); color: var(--muted); } .dn .dn-falso a { font-weight: 500; } @media (max-width: 599px) { .dn .dn-fbar { display: grid; grid-template-columns: minmax(0, 1fr); } .dn .dn-fwhen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dn .dn-fsel :is(select, :where(.csel)) { width: 100%; } } @media (max-width: 599px) { /* m2: the first result inside the first screen (390x844, 375x667; at 320x568 the result line and the first hall) */ .dn.is-find .dn-head { margin-bottom: var(--s-3); } .dn.is-find .dn-head .dn-status { display: none; } /* said once, at the page foot (sourceLine) */ .dn.is-find .dn-ffil { margin-top: var(--s-2); } .dn .dn-fnote { margin-top: var(--s-2); } .dn .dn-fsum { margin-top: var(--s-2); } .dn.is-find .dn-body { margin-top: var(--s-3); } .dn .dn-fghead { margin-bottom: var(--s-2); } } @media (max-width: 359px) { /* 320: Day and Time stay side by side without their glyphs (the labels stay whole: "Thu, Oct 22", "Late night"), and the chips are one row that scrolls sideways, the next chip cut at the edge (DD 0127) */ .dn.is-find .dn-today { display: none; } /* the Day select and the result line say the day */ .dn.is-find .dn-head { margin-bottom: var(--s-2); } .dn .dn-fbar { gap: var(--s-2); } .dn .dn-fsel > .icon { display: none; } .dn .dn-fsel :is(select, :where(.csel)) { padding-left: var(--s-3); } .dn.is-find .dn-ffil .dn-chipscroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .dn.is-find .dn-ffil .dn-chipscroll::-webkit-scrollbar { display: none; } .dn.is-find .dn-ffil .dn-fbreak { display: none; } } @media (pointer: coarse), (max-width: 599px) { .dn .dn-fsel :is(select, :where(.csel)) { height: 44px; min-height: 44px; } .dn .dn-findbtn { min-height: 44px; } .dn .dn-flate a, .dn .dn-falso a { display: inline-block; padding: 12px 0; } /* 20 px line + 24 = 44 */ /* the hall name keeps its 24 px line; a 44 px hit area sits over it (dn-hlink's way), so the head does not grow */ .dn .dn-fghead .dn-stitle a { position: relative; display: inline-block; } .dn .dn-fghead .dn-stitle a::before { content: ''; position: absolute; inset: -10px -4px; } } /* ---------- phones and tablets ---------- */ @media (max-width: 1023px) { .dn .dn-head { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: var(--s-4); } .dn .dn-status { margin-top: 2px; text-align: left; } .dn .dn-findbtn { margin-top: var(--s-3); } } @media (max-width: 767px) { .dn .dn-sbar { top: 48px; } /* under the phone bar */ html:has(.dn .dn-sbar) { scroll-padding-top: 112px; } } @media (max-width: 599px) { .dn .dn-facts, .dn .dn-facts.c3, .dn .dn-facts.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dn .dn-fact-c + .dn-fact-c { border-left: 0; } .dn .dn-fact-c:nth-child(even) { border-left: 1px solid var(--line); } .dn .dn-fact-c:nth-child(n + 3) { border-top: 1px solid var(--line); } .dn .dn-facts.c3 .dn-fact-c:nth-child(3) { grid-column: 1 / -1; } .dn .dn-ctl { flex-direction: column; align-items: stretch; gap: var(--s-2); } .dn .dn-seg { display: flex; width: 100%; } .dn .dn-seg > button { flex: 1 1 0; padding: 0 var(--s-2); } /* Two rows, nothing scrolls sideways (fix round 1: with a glyph on each diet chip the one scrolling row pushed Halal off screen at 360 to 430). Row 1 is the Diet choice (All, Vegetarian, Vegan); row 2 is the two toggles, Halal and Avoid, with the dish count at its end. The order is the desktop row's, broken where its divider sits (UE 0039: a choose-one chip row above a row of toggle chips, each chip with its glyph; UE 0052: the result count on its own line). The two wrapper divs have no role, so they step aside (display: contents); the radiogroup keeps its box. Fits at 320: row 1 is 240 px, row 2 about 230. */ .dn .dn-filters { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--s-2); } .dn .dn-chips, .dn .dn-chipscroll { display: contents; } .dn .dn-chipset { grid-column: 1 / -1; } .dn .dn-chipsep { display: none; } .dn .dn-count { justify-self: end; } .dn .dn-chip { padding: 0 var(--s-2); } .dn .dn-box { padding: var(--s-4); } /* SCREEN 6.2 target: De Neve lunch shows its first dish inside the first 844 px. The second chip row (Avoid menu, +24 px) and the two-line Pay with value (dining-payment, +23 px) each fit alone but together put the card's bottom 7 px under the fold (851 at 390 by 844). cardicon fix (24 Oct): the facts box sits 12 px under the meta line, the period/day controls 12 px under the facts, and the two chip rows 8 px under the controls, the 8 px step the chip rows already keep between themselves (UE 0039: chip rows stacked at one step). Nothing is hidden or cut. */ .dn .dn-fact-c { padding: var(--s-2) var(--s-3); } .dn .dn-facts { margin-top: var(--s-3); } .dn .dn-ctl { margin-top: var(--s-3); } .dn .dn-filters { margin-top: var(--s-2); } .dn .dn-sbar { margin-top: var(--s-2); } .dn .dn-back { margin-bottom: 0; } .dn .dn-body { margin-top: var(--s-3); } .dn .is-theme + .dn-sec { margin-top: var(--s-3); } } @media (pointer: coarse), (max-width: 599px) { .dn .dn-seg { height: 44px; padding: 0; gap: 0; } .dn .dn-seg > button { height: 44px; min-height: 44px; } .dn .dn-chip { justify-content: center; min-width: 44px; height: 44px; min-height: 44px; } .dn .dn-sbar { height: 52px; } .dn .dn-sbtn { width: 44px; height: 44px; min-height: 44px; } /* the (i) keeps its 28 px glyph box in the facts cell and the caveat line; a 44 px hit area sits over it */ .dn .dn-i { position: relative; z-index: 1; width: 28px; height: 28px; min-height: 28px; } .dn .dn-i::before { content: ''; position: absolute; inset: -10px; } /* 48 px, so rounding never leaves it under 44 */ .dn .dn-more, .dn .dn-hidden .text-btn, .dn .dn-box .text-btn { min-height: 44px; } .dn .dn-alt a { display: inline-block; padding: 12px 0; } .dn .dn-alt { align-items: center; } .dn .dn-hlink { position: relative; } .dn .dn-hlink::before { content: ''; position: absolute; inset: -14px -6px; } /* 48 px hit area without growing the name row */ .dn .dn-back { position: relative; z-index: 1; min-width: 44px; } /* the hall name's line box below must not cover its last pixels */ } /* ---------- popover / bottom sheet (station index DD32, Avoid SG 0045, pay UE 0054, allergen UE 0067) ---------- */ #dn-pop.dn-popdlg { inset: auto; z-index: 40; width: 320px; max-width: calc(100vw - 32px); max-height: 480px; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-overlay); } #dn-pop.dn-popdlg.is-sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 70dvh; border-width: 1px 0 0; border-radius: var(--r-panel) var(--r-panel) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } #dn-pop.dn-popdlg::backdrop { background: var(--scrim); } #dn-pop.dn-popdlg .dn-pophead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); padding: var(--s-4) var(--s-2) var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); } #dn-pop.dn-popdlg .dn-pophead h2 { margin: 0; font: var(--t-h2); color: var(--ink); } #dn-pop.dn-popdlg .dn-pophead p { margin: 2px 0 0; font: var(--t-meta); color: var(--muted); } #dn-pop.dn-popdlg .dn-popx { margin-top: -4px; } #dn-pop.dn-popdlg .dn-idx { margin: 0; padding: var(--s-1) 0; list-style: none; } #dn-pop.dn-popdlg .dn-idx button { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: 40px; padding: 0 var(--s-4); border: 0; border-radius: 0; background: none; color: var(--ink); font: var(--t-body); text-align: left; } #dn-pop.dn-popdlg .dn-idx button:hover { background: var(--surface-2); } #dn-pop.dn-popdlg .dn-idx button:focus-visible { outline-offset: -2px; } #dn-pop.dn-popdlg .dn-idx button[aria-current="true"] { font-weight: 600; } #dn-pop.dn-popdlg .dn-idx button[aria-current="true"]::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--accent); } #dn-pop.dn-popdlg .dn-n { font: var(--t-meta); color: var(--muted); font-variant-numeric: tabular-nums; } /* ---------- Avoid menu (owner 23 Oct, round 3: "Should be a menu no bs"; Linear 0180 and 0058, UE 0239) ---------- Never capped and never a scroll box: all 11 rows show at once. At 600 and up it is a plain menu sized to its rows: one muted line ("Hide dishes UCLA Dining lists with"; the title "Avoid" names the dialog but is visually hidden, the chip already says it), then checkbox rows in two columns (6 rows, about 300 px tall, so it fits above or below the chip in a 720 px tall window), then the note. Under 600 it is a bottom sheet with the title, close button and one column of 48 px rows (UE 0239); on a short phone (under 700 px tall) the rows go two to a line so the sheet still needs no scrolling. A row: checkbox, the 24 px allergen glyph (accepted 23 Oct, unchanged), the word. Ticks apply at once (no Clear, no Show button). */ #dn-pop.dn-popdlg[data-kind="avoid"] { width: auto; max-height: none; overflow: visible; } #dn-pop.dn-popdlg[data-kind="avoid"]:not(.is-sheet) .dn-pophead { padding: var(--s-3) var(--s-3) var(--s-1); border-bottom: 0; } #dn-pop.dn-popdlg[data-kind="avoid"]:not(.is-sheet) .dn-pophead h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #dn-pop.dn-popdlg[data-kind="avoid"]:not(.is-sheet) .dn-pophead p { margin: 0; font: var(--t-label); color: var(--muted); } #dn-pop.dn-popdlg[data-kind="avoid"]:not(.is-sheet) .dn-popx { display: none; } #dn-pop.dn-popdlg .dn-alist { display: grid; grid-template-columns: repeat(2, max-content); column-gap: var(--s-1); padding: 0 var(--s-1); } #dn-pop.dn-popdlg .dn-al { display: flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 var(--s-3) 0 var(--s-2); border-radius: var(--r-control); color: var(--ink); font: var(--t-control); white-space: nowrap; cursor: pointer; } #dn-pop.dn-popdlg .dn-al:hover { background: var(--surface-2); } #dn-pop.dn-popdlg .dn-al:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; } #dn-pop.dn-popdlg .dn-al .icon { flex-shrink: 0; width: 24px; height: 24px; } #dn-pop.dn-popdlg .dn-al span { min-width: 0; } /* the checkbox is drawn from tokens so both themes keep a 3:1 box edge and a filled checked state */ #dn-pop.dn-popdlg .dn-al input { -webkit-appearance: none; appearance: none; display: grid; place-content: center; flex-shrink: 0; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--muted); border-radius: 4px; background: var(--surface); cursor: pointer; } #dn-pop.dn-popdlg .dn-al input::before { content: ''; width: 10px; height: 10px; background: var(--on-accent); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); } #dn-pop.dn-popdlg .dn-al input:checked { border-color: var(--accent); background: var(--accent); } #dn-pop.dn-popdlg .dn-al input:checked::before { transform: scale(1); } #dn-pop.dn-popdlg .dn-al input:focus-visible { outline: none; } #dn-pop.dn-popdlg .dn-popnote { margin: var(--s-3) var(--s-4) 0; font: var(--t-label); font-weight: 400; color: var(--muted); } /* the note never widens the menu: it wraps to the rows' width */ #dn-pop.dn-popdlg[data-kind="avoid"] .dn-popnote { contain: inline-size; margin: var(--s-2) var(--s-3) var(--s-3); } #dn-pop.dn-popdlg.is-sheet[data-kind="avoid"] { max-height: calc(100dvh - var(--s-4)); overflow-y: auto; } #dn-pop.dn-popdlg.is-sheet .dn-alist { grid-template-columns: minmax(0, 1fr); padding: var(--s-1) var(--s-2) 0; } #dn-pop.dn-popdlg.is-sheet .dn-al { min-height: 48px; padding: 0 var(--s-2); white-space: normal; } #dn-pop.dn-popdlg.is-sheet[data-kind="avoid"] .dn-popnote { margin: var(--s-2) var(--s-4) var(--s-4); } /* the sheet covers the page's dish count, so it shows its own live copy under the rows (fix round 1); the menu at 600 and up leaves the page count in view beside the chips and hides this line */ #dn-pop.dn-popdlg .dn-alcount { margin: var(--s-2) var(--s-4) 0; font: var(--t-meta); color: var(--ink-2); font-variant-numeric: tabular-nums; } #dn-pop.dn-popdlg:not(.is-sheet) .dn-alcount { display: none; } @media (max-height: 699px) { #dn-pop.dn-popdlg.is-sheet .dn-alist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-1); } } #dn-pop.dn-popdlg .dn-popfoot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); background: var(--surface); } #dn-pop.dn-popdlg .dn-popfoot.is-one { justify-content: flex-end; } #dn-pop.dn-popdlg .dn-popfoot .text-btn { margin-left: calc(-1 * var(--s-2)); } #dn-pop.dn-popdlg .dn-poptext { margin: var(--s-3) var(--s-4) 0; font: var(--t-meta); color: var(--ink-2); } #dn-pop.dn-popdlg .dn-pophead + .dn-poptext + .d-ext { margin: var(--s-3) var(--s-4) var(--s-4); } #dn-pop.dn-popdlg .d-ext { font: var(--t-control); } #dn-pop.dn-popdlg .dn-popsrc { margin: var(--s-3) var(--s-4) 0; font: var(--t-label); font-weight: 400; color: var(--muted); } /* Pay with: read-only info rows (UE 0302 "Payment options", UE 0060 store info): a 20 px leading glyph, a medium title, the details as plain secondary text; hairlines start at the text, as in UE 0060; no chevrons, nothing to press */ #dn-pop.dn-popdlg .dn-paylist { margin: var(--s-1) 0 0; padding: 0 0 0 var(--s-4); list-style: none; } #dn-pop.dn-popdlg .dn-paylist li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-3) 0; } #dn-pop.dn-popdlg .dn-paylist li + li::before { content: ''; position: absolute; top: 0; left: calc(20px + var(--s-3)); right: 0; height: 1px; background: var(--line); } #dn-pop.dn-popdlg .dn-paylist .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--ink-2); } #dn-pop.dn-popdlg .dn-payk { margin: 0; font: var(--t-body); font-weight: 500; color: var(--ink); } #dn-pop.dn-popdlg .dn-payn { margin: 2px 0 0; font: var(--t-meta); color: var(--ink-2); } #dn-pop.dn-popdlg .dn-payprices { margin: var(--s-3) var(--s-4) 0; padding: var(--s-3); border-radius: var(--r-control); background: var(--surface-2); } #dn-pop.dn-popdlg .dn-paypl { margin: 0 0 var(--s-1); font: var(--t-label); color: var(--ink-2); } #dn-pop.dn-popdlg .dn-payprices dl { display: grid; gap: var(--s-1); margin: 0; } #dn-pop.dn-popdlg .dn-payprices dl > div { display: flex; justify-content: space-between; gap: var(--s-2); font: var(--t-meta); } #dn-pop.dn-popdlg .dn-payprices dt { color: var(--ink-2); } #dn-pop.dn-popdlg .dn-payprices dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } #dn-pop.dn-popdlg .dn-payprices .dn-popnote { margin: var(--s-2) 0 0; color: var(--ink-2); } #dn-pop.dn-popdlg .dn-paysrc { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); margin: var(--s-1) var(--s-4) var(--s-4); } #dn-pop.dn-popdlg .dn-paysrc .d-ext { display: inline-flex; align-items: center; min-height: 32px; } @media (pointer: coarse), (max-width: 599px) { #dn-pop.dn-popdlg .dn-idx button { min-height: 48px; } #dn-pop.dn-popdlg .dn-al { min-height: 44px; } #dn-pop.dn-popdlg .dn-pophead + .dn-poptext + .d-ext { min-height: 44px; } #dn-pop.dn-popdlg .dn-paysrc .d-ext { min-height: 44px; } } /* ---------- item drawer (SCREEN 5.8; UE226, UE 0229) ---------- */ #drawer-content > .dn-sheet .dh { justify-content: flex-end; border-bottom: 0; } #drawer-content > .dn-sheet .db { padding-top: 0; } #drawer-content > .dn-sheet .db > * + * { margin-top: 0; } /* check m3 (fix round 1): with a picture, the sheet starts with it (DD 0034, SG 0057); the header strip folds to no height and stays sticky, so the close button floats over the picture's corner and stays in reach when the sheet scrolls. The button gets the sheet's own surface as a round backing so it reads on any picture in both themes. W44 (owner 4 Nov 2026, phone screenshot, "picture sloppily covered by ui on mobile"): from 600 up only. Under 600 the floating strip covered the plate, so there the sheet keeps the plain header row every dish sheet without a picture has (dibs.css .dh: sticky, the sheet's surface, 44 px ghost icon buttons), and the picture starts under it. */ @media (min-width: 600px) { #drawer-content > .dn-sheet:has(.dn-art) .dh { height: 0; min-height: 0; padding: 0; overflow: visible; background: transparent; } #drawer-content > .dn-sheet:has(.dn-art) .dh-nav { position: absolute; top: var(--s-3); right: var(--s-3); } #drawer-content > .dn-sheet:has(.dn-art) .dh .close { width: 32px; height: 32px; min-height: 32px; margin: 0; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); } #drawer-content > .dn-sheet:has(.dn-art) .dh .close:hover { background: var(--surface-2); } } @media (min-width: 600px) and (pointer: coarse) { #drawer-content > .dn-sheet:has(.dn-art) .dh .close { width: 44px; height: 44px; min-height: 44px; } } /* the 44 px touch target of every icon button */ /* W28 (owner 3 Nov 2026): Previous and Next dish sit before the close button, the class drawer's count and arrows (dibs.css .dh-count, .dh-nav). Over a picture each gets the close button's round backing, and the count its own pill, so all three read on any picture in both themes. W44: from 600 up only, as above. */ @media (min-width: 600px) { #drawer-content > .dn-sheet:has(.dn-art) .dh-nav { gap: var(--s-1); } #drawer-content > .dn-sheet:has(.dn-art) .dh-nav .close { margin-left: 0; } #drawer-content > .dn-sheet:has(.dn-art) .dh [data-dn-step] { width: 32px; height: 32px; min-height: 32px; margin: 0; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); } #drawer-content > .dn-sheet:has(.dn-art) .dh [data-dn-step]:hover:not(:disabled) { background: var(--surface-2); } #drawer-content > .dn-sheet:has(.dn-art) .dh [data-dn-step]:disabled { color: var(--muted); } #drawer-content > .dn-sheet:has(.dn-art) .dh-count { margin-right: 0; padding: 0 var(--s-2); line-height: 30px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); } } @media (min-width: 600px) and (pointer: coarse) { #drawer-content > .dn-sheet:has(.dn-art) .dh [data-dn-step] { width: 44px; height: 44px; min-height: 44px; } #drawer-content > .dn-sheet:has(.dn-art) .dh-count { line-height: 42px; } } /* W28: the close button takes the sheet away where it stands, on the dismiss fade (opacity on --dm-dismiss, the dialog rule in dibs.css), with no slide. A click outside, Escape and Back leave without this mark and slide back out to the edge the sheet came in from, on sheetOut, with no fade (the shared drawer rule). dining.js fadeClose sets the mark (an attribute: the drawer's className is emptied on close) and drops it once the fade is over. */ #drawer[data-dn-out="fade"]:not([open]) { opacity: 0; translate: 0 0; } /* drawer picture, reference-first 26 Oct: the item sheet hero runs edge to edge with square corners (DD 0034, UE 0100, SG 0057), the name under it; the one line under the picture is this screen's statement that it is an illustration */ #drawer-content > .dn-sheet .dn-art { margin: 0 calc(-1 * var(--s-6)) var(--s-4); } #drawer-content > .dn-sheet .dn-artimg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); } #drawer-content > .dn-sheet .dn-art figcaption { margin: var(--s-2) var(--s-6) 0; font: var(--t-meta); color: var(--muted); } /* phones: the body padding is 16 there. W44 (owner 4 Nov 2026): the picture shows the whole dish at the image's own ratio (the width and height the img carries), no longer cut to a short strip; on a short screen (a phone on its side) it stops at half the height and shows the whole dish inside that box, on the sheet's own surface. */ @media (max-width: 599px) { #drawer-content > .dn-sheet .dn-art { margin: 0 calc(-1 * var(--s-4)) var(--s-4); } #drawer-content > .dn-sheet .dn-artimg { aspect-ratio: auto; height: auto; max-height: 50dvh; object-fit: contain; background: var(--surface); } #drawer-content > .dn-sheet .dn-art figcaption { margin: var(--s-2) var(--s-4) 0; } } #drawer-content > .dn-sheet .dn-iname { margin: 0; font: var(--t-title); color: var(--ink); overflow-wrap: anywhere; } #drawer-content > .dn-sheet .dn-iname:focus { outline: none; } /* focused only as the reading start of a deep-linked dish */ #drawer-content > .dn-sheet .dn-key { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin: var(--s-1) 0 0; font: var(--t-meta); color: var(--muted); } #drawer-content > .dn-sheet .dn-key b { font: var(--t-item); color: var(--ink); } #drawer-content > .dn-sheet .dn-where { margin: var(--s-1) 0 0; font: var(--t-meta); color: var(--muted); } #drawer-content > .dn-sheet .db > .dn-tags { margin-top: var(--s-3); } #drawer-content > .dn-sheet .db > .dn-discs { margin-top: var(--s-6); border-top: 1px solid var(--line); } #drawer-content > .dn-sheet .dn-disc { border-bottom: 1px solid var(--line); } #drawer-content > .dn-sheet .dn-disc > summary { justify-content: space-between; min-height: 52px; padding: 0; font: var(--t-item); color: var(--ink); } #drawer-content > .dn-sheet .dn-disc > summary::before { display: none; } #drawer-content > .dn-sheet .dn-disc > summary:focus-visible { outline-offset: -2px; } #drawer-content > .dn-sheet .dn-pm { display: inline-flex; } #drawer-content > .dn-sheet .dn-pm .icon { width: 20px; height: 20px; color: var(--muted); } #drawer-content > .dn-sheet .dn-disc[open] .dn-pm .icon:first-child, #drawer-content > .dn-sheet .dn-disc:not([open]) .dn-pm .icon:last-child { display: none; } #drawer-content > .dn-sheet .dn-discb { padding: 0 0 var(--s-4); } #drawer-content > .dn-sheet .dn-discb > p { margin: 0; font: var(--t-body); color: var(--ink-2); } #drawer-content > .dn-sheet .dn-discb > .dn-discnote { font: var(--t-meta); color: var(--muted); } /* Contains (owner 27 Oct): the Avoid menu's rows without the box, its 24 px ink glyph beside the same name */ #drawer-content > .dn-sheet .dn-contains { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); column-gap: var(--s-4); margin: 0; padding: 0; list-style: none; } #drawer-content > .dn-sheet .dn-contains li { display: flex; align-items: center; gap: var(--s-2); min-height: 36px; font: var(--t-control); color: var(--ink); } #drawer-content > .dn-sheet .dn-contains .icon { flex-shrink: 0; width: 24px; height: 24px; } #drawer-content > .dn-sheet .dn-contains li span { min-width: 0; } #drawer-content > .dn-sheet .dn-nuthead { display: flex; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-1); font: var(--t-label); color: var(--muted); } #drawer-content > .dn-sheet .dn-nut { margin: 0; padding: 0; list-style: none; } #drawer-content > .dn-sheet .dn-nut li { display: grid; grid-template-columns: minmax(0, 1fr) auto 48px; align-items: baseline; gap: var(--s-3); min-height: 36px; padding: var(--s-2) 0; font: var(--t-meta); color: var(--ink-2); } #drawer-content > .dn-sheet .dn-nut li + li { border-top: 1px solid var(--line); } #drawer-content > .dn-sheet .dn-nut li.is-sub > span:first-child { padding-left: var(--s-4); } #drawer-content > .dn-sheet .dn-nut li.is-cal { color: var(--ink); } #drawer-content > .dn-sheet .dn-nut li.is-cal .dn-amt { font-weight: 600; } #drawer-content > .dn-sheet .dn-amt { color: var(--ink); text-align: right; white-space: nowrap; } #drawer-content > .dn-sheet .dn-dv { color: var(--muted); text-align: right; } #drawer-content > .dn-sheet .dn-ing { overflow-wrap: anywhere; } #drawer-content > .dn-sheet .dn-choices { margin: var(--s-2) 0 0; padding-left: 20px; columns: 2; column-gap: var(--s-6); font: var(--t-meta); color: var(--ink-2); } #drawer-content > .dn-sheet .db > .dn-fine { margin-top: var(--s-6); } #drawer-content > .dn-sheet .dn-fine p { margin: 0; font: var(--t-meta); color: var(--muted); } #drawer-content > .dn-sheet .dn-fine p + p { margin-top: var(--s-2); } #drawer-content > .dn-sheet .db > .dn-sfoot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin: var(--s-4) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); font: var(--t-meta); } #drawer-content > .dn-sheet .dn-sfoot .d-ext { font: var(--t-control); } #drawer-content > .dn-sheet .dn-sfoot > span { color: var(--muted); } #drawer-content > .dn-sheet .db > .dn-nopage { margin: var(--s-6) 0 0; font: var(--t-meta); color: var(--muted); } #drawer-content > .dn-sheet .db > .dn-sbtnfull { margin-top: var(--s-3); } @media (max-width: 599px) { #drawer-content > .dn-sheet .dn-choices { columns: 1; } #drawer-content > .dn-sheet .db > .dn-sbtnfull { display: flex; width: 100%; } } @media (pointer: coarse), (max-width: 599px) { #drawer-content > .dn-sheet .dn-sfoot .d-ext { display: inline-flex; align-items: center; min-height: 44px; } } /* ================= serving history (owner 26 Oct; spec/SCREEN-dining.md "Dish history") ================= Dish sheet: UE 0060's info rows (a bold fact over one muted line, hairlines between), one row per hall, three shown. Search: UE 0307 rows (a name over one muted meta line), UE 0310's "available at" fact in that meta line. Tokens only. */ #drawer-content > .dn-sheet .dn-hist { margin-top: var(--s-6); } #drawer-content > .dn-sheet .dn-histt { display: flex; align-items: center; gap: var(--s-2); margin: 0; font: var(--t-item); color: var(--ink); } #drawer-content > .dn-sheet .dn-histt .icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--muted); } #drawer-content > .dn-sheet .dn-hrows { margin: var(--s-2) 0 0; padding: 0; list-style: none; } #drawer-content > .dn-sheet .dn-hrows > li { padding: var(--s-3) 0 var(--s-3) 28px; } #drawer-content > .dn-sheet .dn-hrows > li + li { border-top: 1px solid var(--line); } #drawer-content > .dn-sheet .dn-hrows > li:focus { outline: none; } #drawer-content > .dn-sheet .dn-hrows > li:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* owner 27 Oct: per hall at most two lines, "De Neve . Dinner today" over "Usually Tue and Thu, dinner"; no note */ #drawer-content > .dn-sheet .dn-hhall { display: flex; flex-wrap: wrap; align-items: center; margin: 0; font: var(--t-body); color: var(--ink); } #drawer-content > .dn-sheet .dn-hhall b { font-weight: 600; } #drawer-content > .dn-sheet .dn-hhall > span { color: var(--ink-2); } #drawer-content > .dn-sheet .dn-hhall .dn-sep { display: inline-block; flex-shrink: 0; width: 3px; height: 3px; margin: 0 var(--s-2); border-radius: var(--r-pill); background: var(--muted); } #drawer-content > .dn-sheet .dn-hline { margin: 2px 0 0; font: var(--t-meta); color: var(--muted); } #drawer-content > .dn-sheet .dn-hmore { min-height: 44px; margin: 0 0 0 28px; padding: 0; } .dn .dn-hfind { margin-top: var(--s-8); } .dn .dn-hfind > .dn-hnote { margin: var(--s-1) 0 0; font: var(--t-meta); color: var(--muted); max-width: 72ch; } .dn .dn-hflist { margin: var(--s-3) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .dn .dn-hflist > li { border-bottom: 1px solid var(--line); } .dn .dn-hfrow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; margin: 0; padding: var(--s-3) var(--s-2); border: 0; border-radius: 0; background: none; color: var(--ink); font: var(--t-body); text-align: left; cursor: pointer; } .dn .dn-hfrow:hover { background: var(--surface); } .dn .dn-hfrow:focus-visible { outline-offset: -2px; } .dn .dn-hfmeta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0; row-gap: 2px; font: var(--t-meta); color: var(--muted); } .dn .dn-hfmeta .dn-sep { margin: 0 6px; } .dn .dn-hfnone, .dn .dn-hfhid { margin: var(--s-3) 0 0; font: var(--t-meta); color: var(--ink-2); }