/* Dopellowen fitting queue. Dark venue, near-black ground, cream ink, gold accent.
   Jost carries the latin and the numerals; Korean falls through to Pretendard. */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

:root {
  --bg:    #0a0a0a;
  --panel: #151515;
  --line:  rgba(242, 237, 228, 0.14);
  --ink:   #f2ede4;
  --dim:   rgba(242, 237, 228, 0.52);
  --gold:  #c8a86b;
  --amber: #e0a33c;
  --green: #86b06b;
  --red:   #b4645a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Jost", "Pretendard Variable", "Pretendard", sans-serif;
  font-weight: 300;
  line-height: 1.6;
}

.wrap { max-width: 560px; margin: 0 auto; padding: 28px 22px 64px; }

.brand {
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 400; text-align: center; margin-bottom: 34px;
}

.label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); font-weight: 400; display: block; margin-bottom: 10px;
}

.ticket { font-size: 92px; line-height: 1; font-weight: 200; letter-spacing: 0.02em; text-align: center; }
.ticket-sub { text-align: center; color: var(--dim); font-size: 13px; letter-spacing: 0.1em; margin-top: 8px; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  padding: 26px 22px; margin-bottom: 18px;
}
.card.amber { border-color: rgba(224, 163, 60, 0.55); }
.card.green { border-color: rgba(134, 176, 107, 0.55); }

.headline { font-size: 21px; font-weight: 300; text-align: center; margin: 0 0 6px; }
.sub { font-size: 14px; color: var(--dim); text-align: center; margin: 0; }
.fine { font-size: 12px; color: var(--dim); line-height: 1.7; margin-top: 16px; }

.clock {
  font-size: 46px; font-weight: 200; text-align: center;
  letter-spacing: 0.04em; margin: 14px 0 4px; font-variant-numeric: tabular-nums;
}
.clock.amber { color: var(--amber); }
.clock.green { color: var(--green); }

button, .btn {
  display: block; width: 100%; min-height: 52px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 0;
  font-family: inherit; font-size: 15px; font-weight: 400;
  letter-spacing: 0.06em; padding: 14px 16px; margin-top: 10px; cursor: pointer;
}
button:active { background: rgba(242, 237, 228, 0.07); }
button.primary { border-color: var(--gold); color: var(--gold); }
button.go      { border-color: var(--green); color: var(--green); }
button.quiet   { color: var(--dim); font-size: 13px; min-height: 52px; }
button:disabled { opacity: 0.32; }

input[type="text"], input[type="tel"], input[type="password"], textarea, select {
  width: 100%; min-height: 52px; background: #0f0f0f; color: var(--ink);
  border: 1px solid var(--line); border-radius: 0; padding: 12px 14px;
  font-family: inherit; font-size: 16px; font-weight: 300;
}
textarea { min-height: 74px; resize: vertical; }
input::placeholder, textarea::placeholder { color: rgba(242, 237, 228, 0.28); }

.field { margin-bottom: 22px; }

.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  min-height: 48px; min-width: 48px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 300; cursor: pointer;
  margin: 0; padding: 0 12px; width: auto;
}
.chip.on { border-color: var(--gold); color: var(--gold); background: rgba(200, 168, 107, 0.09); }

.check { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--dim); cursor: pointer; }
.check input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--gold); }

.privacy {
  font-size: 11.5px; color: var(--dim); line-height: 1.75;
  border-top: 1px solid var(--line); padding-top: 16px; margin-top: 20px;
}

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 7px; }
.dot.off { background: var(--red); }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: #232323; color: var(--ink); border: 1px solid var(--line);
  padding: 13px 20px; font-size: 14px; max-width: 88vw; text-align: center; z-index: 50;
}

.err { color: var(--red); font-size: 13px; margin-top: 10px; text-align: center; }

/* ---------- board.html : wide, read at arm's length, in the dark ---------- */
.board { max-width: none; padding: 20px 26px; }
.cols { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 20px; align-items: start; }
.col { border: 1px solid var(--line); background: var(--panel); padding: 18px 16px; min-height: 220px; min-width: 0; }
.big { font-size: 86px; line-height: 1; font-weight: 200; text-align: center; font-variant-numeric: tabular-nums; }
.big.dim { color: rgba(242, 237, 228, 0.22); }
.meta { text-align: center; color: var(--dim); font-size: 15px; margin-top: 10px; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.soon { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 8px; }
/* The stand is aimed OUTWARD: these numbers are the only ambient signal a passing
   guest gets in a no-push model, so they are sized to be read from a few steps away. */
.soon span { font-size: 62px; font-weight: 200; font-variant-numeric: tabular-nums; }
.soon i { color: rgba(242, 237, 228, 0.25); font-style: normal; font-size: 28px; }

.ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.ops button { margin-top: 0; min-height: 76px; font-size: 18px; }
.ops button.wide { grid-column: span 3; }

.retired-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.retired-row .chip { min-height: 54px; font-size: 20px; font-variant-numeric: tabular-nums; }

.elapsed { display: inline-block; border: 1px solid var(--line); padding: 4px 12px; font-size: 13px; color: var(--dim); }
.elapsed.warn { border-color: var(--amber); color: var(--amber); }

.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 13px; color: var(--dim); letter-spacing: 0.08em; }

/* ---------- staff.html : dense list ---------- */
.row {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center;
  border-bottom: 1px solid var(--line); padding: 12px 0; font-size: 14px;
}
.row > div { min-width: 0; }
.row .no { font-size: 22px; font-weight: 200; font-variant-numeric: tabular-nums; }
.row .st { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); overflow-wrap: anywhere; }
.row button { width: auto; min-height: 48px; margin: 0; padding: 8px 14px; font-size: 13px; }
.row .tap { cursor: pointer; }
.warnbar { border: 1px solid var(--amber); color: var(--amber); padding: 12px 14px; font-size: 13px; margin-bottom: 16px; }

/* Tap a guest, act on that guest. */
.col.tappable { cursor: pointer; }
.col.tappable:active { border-color: var(--gold); }
.tapnum { cursor: pointer; }
.sheet { border: 1px solid var(--gold); background: var(--panel); padding: 16px; margin-top: 18px; }
.sheet-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.sheet-no { font-size: 34px; font-variant-numeric: tabular-nums; color: var(--gold); }
.sheet-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.sheet-acts button { margin-top: 0; min-height: 62px; font-size: 17px; }
.offline { font-size: 12px; color: var(--gold); border: 1px solid var(--line);
  padding: 8px 10px; margin: 10px 0 0; text-align: center; }

/* ---------- look photos: board sheet and staff popup share these ---------- */
/* image_url is NULL for every look today. A tile is the number, large, plus the name if
   there is one; when a URL lands the photo fills the tile and the number moves to a corner. */
.looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.look { position: relative; aspect-ratio: 3 / 4; border: 1px solid var(--line); background: #0f0f0f; overflow: hidden; }
.look img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.look .lno {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 56px; font-weight: 200; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--ink); pointer-events: none;
}
.look.pic .lno {
  inset: auto; left: 10px; top: 6px; font-size: 40px; display: block;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
.look .lname {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; font-size: 13px;
  line-height: 1.4; color: var(--ink); text-align: center; overflow-wrap: anywhere;
  background: linear-gradient(rgba(10, 10, 10, 0), rgba(10, 10, 10, 0.85));
}
.look .lsize { display: block; color: var(--dim); font-size: 11px; letter-spacing: 0.06em; }
/* The size the GUEST asked for, as distinct from .lsize, which is 소율's sizing note on the
   look itself. Top right so it never collides with .lno, which moves to the top LEFT the
   moment a photo lands. 시우 reads this off the tile while pulling the garment. */
.look .lsz {
  position: absolute; right: 8px; top: 6px; z-index: 1;
  border: 1px solid var(--gold); color: var(--gold); background: rgba(10, 10, 10, 0.72);
  font-size: 13px; line-height: 1; padding: 4px 7px; letter-spacing: 0.04em;
}

/* staff.html popup. Lives OUTSIDE #app so list repaints never touch it, and it is fixed so
   the list behind keeps its scroll position and 시우's search term. Any tap closes it. */
.lookov {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); padding: 24px 16px 40px;
}
.lookov .sheet-head { margin-bottom: 4px; }
.lookov .looks { margin-top: 16px; }
.lookov button.quiet { margin-top: 22px; }

/* ---------- phone (crew phones, 360 to 430 wide) ----------
   Three boxes cannot share 390px: 1fr tracks grow to the 86px number's min-content, the grid
   overflows the viewport and 곧 is clipped on the right. Pair 지금 and 다음, give 곧 the full row. */
@media (max-width: 640px) {
  .board { padding: 16px 14px 48px; }
  .cols { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cols .col:nth-child(3) { grid-column: span 2; }
  .col { padding: 16px 12px; }
  .soon { gap: 8px; }
  .ops { gap: 8px; }
  .ops button { font-size: 16px; padding: 10px 8px; }
}

/* held guests stay visible on the board, marked rather than hidden */
.heldnum { opacity: .45; text-decoration: underline dotted; }
.ops.one { grid-template-columns: 1fr; }
.meta.hint { color: var(--gold); margin-top: 6px; line-height: 1.45; }
.meta.ok { color: var(--gold); }
.sheet.buy { border-width: 2px; background: #141414; }
.chip { flex-direction: column; }
.chip i { display: block; font-style: normal; font-size: 11px; opacity: .7; margin-top: 2px; }
.chip.done-buying { border-color: var(--gold); }
.chip.done-unset { opacity: .55; }
.tag { display: inline-block; border: 1px solid var(--gold); color: var(--gold);
  font-size: 11px; padding: 1px 6px; margin-right: 6px; }
.tag.off { border-color: var(--line); color: var(--dim); }

/* ---------- board.html action panels: a dialogue ON TOP, never inside #app ----------
   z-index sits UNDER .toast (50) on purpose: an action can fail while its panel is still
   up, and the sentence saying why has to be the thing 은솔 can read. */
.ovl {
  position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.74);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow-y: auto; overscroll-behavior: contain;
}
.ovl .sheet {
  margin-top: 0; width: 100%; max-width: 620px;
  max-height: calc(100vh - 32px); overflow-y: auto;
}

/* purchase picker: the same tile as everywhere else, so a look photo has room to be read.
   The number moves to the top left edge on every tile, photo or not, and the middle is
   left to the garment. */
.look.pick { cursor: pointer; }
.look.pick .lno {
  inset: auto; left: 10px; top: 4px; font-size: 38px; display: block;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
.look.sel { border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.look .mark {
  position: absolute; right: 8px; bottom: 8px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  border: 1px solid var(--line); background: rgba(10, 10, 10, 0.62); color: transparent;
}
.look.sel .mark { border-color: var(--gold); color: var(--gold); background: rgba(10, 10, 10, 0.82); }

/* staff.html popup: what 시우 has to pull off the rail, marked on the garment itself */
.look.buying { border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.look .buy {
  position: absolute; right: 0; top: 0; z-index: 2; background: var(--gold); color: #0a0a0a;
  font-size: 11px; letter-spacing: 0.1em; padding: 3px 8px;
}

/* ---------- staff.html : the corner control, the state it hides, and status colour ----- */
.topbtn {
  position: fixed; right: 12px; top: 12px; z-index: 30; width: auto; margin: 0;
  min-height: 48px; font-size: 12px; letter-spacing: 0.04em; padding: 8px 12px;
  background: var(--panel); border-color: var(--gold); color: var(--gold);
}
/* 마감 and 일시정지 are states the whole room is waiting on. Hiding the buttons must not
   hide the state, so it gets its own line and turns amber when it is not the normal one. */
.statebar {
  border: 1px solid var(--line); color: var(--dim); padding: 9px 12px; font-size: 13px;
  letter-spacing: 0.08em; text-align: center; margin-bottom: 10px;
}
.statebar.hot { border-color: var(--amber); color: var(--amber); }

.pill {
  display: inline-block; border: 1px solid currentColor; border-radius: 0;
  font-size: 10px; letter-spacing: 0.1em; padding: 1px 6px; margin-right: 6px;
  text-transform: none;
}
.pill.stw { color: var(--dim); }                 /* 대기 중 */
.pill.sto { color: var(--amber); }               /* 안내 보냄 */
.pill.stc { color: var(--amber); font-weight: 400; }  /* 오는 중 */
.pill.sti { color: var(--green); }               /* 피팅룸 */
.pill.str { color: var(--red); }                 /* 넘어감 */
.pill.std { color: var(--gold); }                /* 완료 */
.pill.stx { color: rgba(242, 237, 228, 0.3); }   /* 취소됨 */

/* 계산 대기: the register queue, ordered by when each guest asked */
.card.checkout { border-color: var(--green); }
.card.checkout .row { grid-template-columns: 34px 1fr auto; }
.card.checkout .no { color: var(--green); font-size: 18px; }
.card.checkout .row:last-child { border-bottom: 0; padding-bottom: 0; }

/* the one English line on the guest page, and the last thing they read */
.signoff {
  text-align: center; color: var(--gold); font-size: 15px; font-weight: 300;
  letter-spacing: 0.14em; margin: 18px 0 0;
}
.tag.paid { border-color: var(--green); color: var(--green); }

/* --------------------------------------------------------------------------
   GUEST SURFACE - Dopellowen brand pass (DESIGN_BRIEF_JAE_QUEUE_APP.md)
   Scoped entirely under body.guest. board/staff/log are untouched by
   construction: nothing above this line is edited except the three fixes
   noted in the commit.
   The brief is a WHITE page: Arial, pure greyscale, four type sizes
   (8/10/11/12), hairlines instead of panels, outline buttons, no colour.
   Everything here is CSS only. No markup, no JS, so no gate anchor moves.
   -------------------------------------------------------------------------- */

/* The whole palette is 9 tokens read 67 times. Redefining them here is the
   entire theme swap, and it has no specificity surface to get wrong. */
body.guest {
  --bg:    #ffffff;
  --panel: #ffffff;
  --line:  #cccccc;
  --ink:   #000000;
  --dim:   #767676;   /* brief says #888888; raised one step to clear the 4.5:1
                         AA floor (3.54 -> 4.54). .fine carries the 5-minute
                         warning and this is read in a dark room. Revert to
                         #888888 if Soyul prefers the exact brand grey. */
  --gold:  #000000;   /* accents collapse to ink: the brief allows no colour */
  --amber: #000000;
  --green: #000000;
  --red:   #c0392b;
  font-family: Arial, "Apple SD Gothic Neo", sans-serif;
  font-size: 11px;   /* brief: 11px is "the default". Without this, containers
                        inherit the UA 16px and any stray text lands off-scale. */
  font-weight: 400;
  line-height: 1.5;
  word-break: keep-all;        /* Korean wraps at spaces only, never mid-word */
  overflow-wrap: break-word;
}

/* Six rules hardcode a colour instead of reading a token, so the swap above
   cannot reach them. These are exactly those six. */
.guest input[type="text"], .guest input[type="tel"], .guest textarea { background: transparent; }
.guest input::placeholder, .guest textarea::placeholder { color: #bbbbbb; }
.guest .toast    { background: transparent; }
.guest .chip.on  { background: #000000; color: #ffffff; border-color: #000000; }
.guest button:active { background: rgba(0, 0, 0, 0.06); }

/* Layout: 325px column plus 24px gutters, and the 110px top dial-in. */
.guest .wrap { max-width: 373px; padding: 110px 24px 64px; }

/* Wordmark. Swapped in as a background so the markup and shell() stay
   untouched and a 404 leaves a gap rather than a broken-image icon.
   Relative to app.css, so it resolves to /Archive/... once staged into the
   storefront. It does NOT resolve when serving public/ directly. */
.guest .brand {
  font-size: 0; height: 24px; margin-bottom: 60px;
  background: url(../Archive/logo/footer-wordmark.png) center / 105px auto no-repeat;
}

/* No caps, no tracking anywhere. Soyul's explicit call, 2026-08-08. */
.guest .brand, .guest .label, .guest button, .guest .chip, .guest .ticket,
.guest .ticket-sub, .guest .clock, .guest .signoff {
  letter-spacing: normal; text-transform: none;
}

/* Four sizes: 8 footer, 10 subordinate, 11 body, 12 emphasis. Nothing else,
   except the ticket at the brief's 20px ceiling. */
.guest .label      { font-size: 10px; color: var(--dim); margin: 0 0 8px; }
.guest .headline   { font-size: 12px; font-weight: 400; text-align: left; margin: 0 0 4px; }
.guest .sub        { font-size: 11px; color: var(--ink); text-align: left; }
.guest .fine       { font-size: 10px; color: var(--dim); line-height: 1.7; margin-top: 16px; }
.guest .privacy    { font-size: 10px; color: var(--dim); line-height: 1.7; padding-top: 16px; margin-top: 24px; }
.guest .check      { font-size: 10px; color: #666666; }
.guest .offline    { font-size: 10px; color: var(--dim); border: 0; padding: 8px 0; text-align: left; }
.guest b           { font-weight: 400; }   /* brief allows no bold on this page */

/* The queue number. 20px is the brief's ceiling and it is deliberate:
   prominence comes from the whitespace around it, not from size. */
.guest .ticket     { font-size: 20px; font-weight: 400; text-align: left; line-height: 1.4; }
.guest .ticket-sub { font-size: 10px; color: var(--dim); text-align: left; margin-top: 4px; }
.guest .clock      { font-size: 12px; font-weight: 400; text-align: left; margin: 12px 0 4px; }

/* The last line a guest reads. Already in the brief's English register;
   only its size, tracking and gold needed correcting. */
.guest .signoff    { font-size: 12px; font-weight: 400; color: var(--ink); margin-top: 16px; }

/* Panels become a hairline and air. This is the single biggest visual change:
   brief section 5's "section label + hairline block", applied to every state. */
.guest .card {
  background: transparent; border: 0; border-top: 1px solid #e5e5e5;
  padding: 16px 0 0; margin-bottom: 0;
}

/* The accent-action classes carry NO colour on this surface. Two separate accidents
   already neutralise them (the tokens above collapse to ink, and .guest button wins on
   source order at equal specificity), and neither is a thing to rely on: a later rule
   that raises specificity or moves in the file would leak green and gold back onto a
   page whose brief forbids colour outright. Said once, explicitly, instead. */
.guest button.go, .guest button.primary { border-color: var(--ink); color: var(--ink); }

/* Buttons: 1px outline, transparent, never filled, never rounded.
   48px min-height is kept deliberately - the brief's 8px padding is a floor,
   not a ceiling, and this is a phone in a dark room. */
.guest button, .guest .btn {
  min-height: 48px; font-size: 11px; font-weight: 400;
  border: 1px solid var(--ink); color: var(--ink);
  padding: 8px 16px; margin-top: 12px;
}
.guest button.quiet {
  border: 0; text-decoration: underline; color: var(--ink); font-size: 11px;
}
.guest button:disabled { opacity: 0.4; }

/* Segmented-toggle treatment from brief section 5, reused for look numbers
   and sizes. Selected inverts to solid ink. 48px target preserved. */
.guest .chip {
  min-height: 48px; min-width: 48px; font-size: 12px; font-weight: 400;
  border: 1px solid var(--ink); color: var(--ink); background: transparent;
}
.guest .grid, .guest .chips { gap: 8px; }
.guest .field { margin-bottom: 24px; }

/* Inputs: bottom rule only, no box. */
.guest input[type="text"], .guest input[type="tel"], .guest textarea {
  min-height: 44px; border: 0; border-bottom: 1px solid var(--ink);
  padding: 8px 0; font-size: 11px; font-weight: 400;
}
.guest textarea { min-height: 74px; }

/* Toast carries every refusal remedy, so it stays - a knowing deviation from
   the brief's "no toasts". Restyled to a hairline strip, not a floating box.
   11px not 10px: it is the only channel for an error the guest must act on. */
.guest .toast {
  border: 0; border-top: 1px solid var(--ink);
  color: var(--red); font-size: 11px; padding: 12px 0 0; text-align: left;
  max-width: 325px; width: 88vw;
}

/* Brief section 6: every structural label is an EN line with its KR line
   directly beneath. Live Korean sentences stay Korean and are not paired. */
.guest .kr { display: block; }

/* Brief section 12: the section label sits above a black hairline, and the
   content below it opens with 40px of air. That air is what makes a 20px
   queue number read as large without exceeding the type scale. */
.guest .gbody { border-top: 1px solid var(--ink); padding-top: 40px; }

/* Footer: hairline, then the wordmark as text at 8px. */
/* When .gbody opens with a card (form, done, ended) the card's own light rule
   would sit 40px under the black section rule and read as a rendering fault. */
.guest .gbody > .card:first-child { border-top: 0; padding-top: 0; }
/* A destructive, irreversible control does not sit tight against body text. */
.guest button.quiet { margin-top: 24px; }

.guest .foot   { margin-top: 70px; border-top: 1px solid var(--line); padding-top: 8px; }
.guest .foot p { font-size: 8px; color: #666666; line-height: 1.7; margin: 0; }

/* The guest's own basket. Hairline blocks like every other section, chips reuse the
   segmented-toggle treatment from brief section 5, so this adds no new visual language. */
.guest .card.basket { border-top: 1px solid #e5e5e5; padding-top: 16px; margin-bottom: 0; }
.guest .card.basket + .card.basket { margin-top: 8px; }
.guest .card.basket .sub { margin-bottom: 10px; }
.guest .card.basket .chips { gap: 8px; }

/* The per-look size sheet. It reuses .ovl / .sheet so index.html carries no new markup
   vocabulary, but the board's dark scrim and gold rule have no place on a white page:
   the brief is greyscale hairlines, so the ground goes white and the panel becomes a
   bordered block that happens to be centred. */
.guest .ovl { background: rgba(255, 255, 255, 0.94); padding: 24px; }
.guest .ovl .sheet {
  border: 1px solid var(--ink); background: var(--bg);
  padding: 24px; max-width: 325px;
}
.guest .ovl .sheet .headline { margin-bottom: 16px; }
.guest .ovl .sheet .chips { display: flex; flex-wrap: wrap; }
.guest .ovl .sheet button.quiet { margin-top: 16px; display: block; width: 100%; }