/* =====================================================================
   Concierge AI — design system v4 ("Key rack", 2026-09-29)
   Mobile-first. The chosen direction: prototypes-3/keyrack/ (README.md),
   the Departures board re-coloured as the concierge's key board.

   The rules:
   • Colour is function. Brass is live data on the board and the ONE action
     per screen; the done green marks a confirmed fact; the signal red means
     something is wrong; baize and ink are everything else. No decorative
     colour, no shadows, no gradients.
   • One family, Archivo, with its width axis: narrow + heavy for headlines
     and figures, normal width for text. Sentence case, never italic, no
     tracking.
   • Pictograms, not emoji: one filled set on a 20 px grid ({% icon %},
     apps/core/icons.py), only where they carry meaning.
   • Full-bleed bands and rules instead of floating cards; tight corners.
   • The board is the only loud thing; nothing else moves or glows.
   Every colour lives in :root — the older role names (coral, teal, …) stay,
   re-pointed, so the rules that read them follow.
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * 1. Tokens                                                          *
 * ------------------------------------------------------------------ */
:root{
  /* palette: the key rack (config/tests/test_departures_look.py pins it) */
  --stone:#ECEEE8; --baize:#173A2F; --brass:#C9A15B; --rule:#CDD3CB; --done:#2E6B4F; --signal:#B0392A;
  --tile:#0E2A21; --tile-top:#13342A; --ink:#14261F; --ink-2:#4D5C55; --on-board:#A9BDB3; --white:#FFFFFF;
  /* roles */
  --bg:var(--stone); --surface:var(--white); --surface-2:var(--stone); --surface-3:rgba(23,58,47,.05);
  --line:var(--rule); --line-2:rgba(205,211,203,.6);
  --soft:var(--ink-2); --faint:rgba(20,38,31,.68);   /* .68: AA on stone and white */
  --coral:var(--signal); --coral-deep:var(--ink); --coral-soft:rgba(176,57,42,.1);   /* alert: red marks, ink words */
  --teal:var(--done); --teal-deep:var(--ink); --teal-soft:rgba(46,107,79,.12);       /* done: green marks, ink words */
  --amber:var(--brass); --gold:var(--ink); --track:var(--rule);
  /* shape: flat bands, tight corners */
  --r-xl:6px; --r-lg:4px; --r:4px; --r-sm:4px; --pill:4px;
  --shadow:none; --shadow-md:none; --shadow-lg:none;
  --ring-teal:0 0 0 2px var(--baize);   /* focus on stone; on the board it is brass */
  --t:.2s; --ease:cubic-bezier(.16,.84,.3,1);
  /* type: Archivo (wdth 62–125); headlines narrow + heavy via font-stretch */
  --display:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
/* pictograms ({% icon %}, apps/core/icons.py): filled, one 20 px grid, the colour of the words they introduce */
.ic{width:1.15em; height:1.15em; flex:0 0 auto; fill:currentColor; vertical-align:-.2em}
html,body{height:100%}
body{
  font-family:var(--body); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:16px;
  min-height:100%; display:flex; justify-content:center; align-items:flex-start;
  padding:clamp(0px,4vw,40px);
}

/* ------------------------------------------------------------------ *
 * 2. Shell                                                            *
 * ------------------------------------------------------------------ */
.shell{
  position:relative; width:min(440px,100%); background:var(--surface);
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  border:1px solid var(--line); overflow-y:auto; overflow-x:hidden;
  max-height:calc(100dvh - clamp(0px,8vw,80px));
}
.shell--wide{ width:min(760px,100%); }
.shell--xwide{ width:min(1080px,100%); }

/* ------------------------------------------------------------------ *
 * 3. Flow rail — persistent orientation                               *
 * ------------------------------------------------------------------ */
.flow{display:flex; align-items:center; gap:4px; padding:15px 20px 0; font-size:12px; color:var(--faint)}
.flow .seg{display:flex; align-items:center; gap:7px; white-space:nowrap; z-index:1; background:var(--surface); padding-right:2px}
.flow .seg .n{width:19px;height:19px;border-radius:50%; background:var(--track); color:var(--soft);
  display:grid; place-items:center; font-size:12px; font-weight:700; transition:all var(--t)}
.flow .seg .l{font-weight:500; letter-spacing:.005em}
.flow .seg.done .n{ background:none; color:var(--done); box-shadow:none}
.flow .seg .n .ic{ width:19px; height:19px }   /* green mark, blue word (white on green is AA only from 19px bold) */
.flow .seg.now .n{ background:var(--baize); color:#fff}
.flow .seg.now .l{ color:var(--ink); font-weight:600}
.flow .seg.upcoming .l{ color:var(--faint)}
.flow .bar{flex:1 1 auto; height:2px; background:var(--line); min-width:10px; border-radius:2px; margin:0 -2px}
.flow .bar.done{ background:var(--teal-soft)}

/* ------------------------------------------------------------------ *
 * 4. Masthead — the transit-blue band                                *
 * ------------------------------------------------------------------ */
.mast{position:relative; padding:24px 24px 22px; overflow:hidden; background:var(--baize); color:#fff}
.eyebrow{position:relative; font-size:14px; font-weight:600; color:var(--soft); display:flex; gap:8px; align-items:center}
.eyebrow--sea{color:var(--soft)}
.mast .eyebrow{color:var(--on-board)}
.mast h1{
  position:relative; font-family:var(--display); font-weight:800; font-stretch:72%; font-size:40px; line-height:1;
  letter-spacing:-.01em; margin-top:10px; color:#fff;
}
.mast h1 em{font-style:normal; color:inherit}
.host{position:relative; margin-top:14px; display:flex; align-items:center; gap:10px; font-size:14px; color:var(--soft)}
.mast .host{color:var(--on-board)}
.crest{width:32px;height:32px;border-radius:var(--r-sm);flex:0 0 auto; background:var(--brass); color:var(--ink);
  display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:16px}
.host b{font-weight:600; color:var(--ink)}
.mast .host b{color:#fff}
/* everything that sits on the band: pale-green text, white links, white buttons, the brass focus ring */
.mast .prose, .mast .lead, .mast p{color:var(--on-board)}
.mast .prose b, .mast p b{color:#fff}
.mast a:not(.btn){color:#fff}
.mast .btn--primary, .mast .btn--sea{background:#fff; color:var(--baize)}
.mast .btn--primary:hover, .mast .btn--sea:hover{background:var(--stone)}
.mast .btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
.mast :focus-visible{outline:2px solid var(--brass); outline-offset:2px}

/* ------------------------------------------------------------------ *
 * 5. Request strip / chips / section titles                           *
 * ------------------------------------------------------------------ */
.request{padding:14px 24px; display:flex; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); background:var(--surface-2)}
.chip{font-size:12.5px; color:var(--soft); display:flex; align-items:center; gap:6px}
.chip b{color:var(--ink); font-weight:600}
.chip .ic{opacity:.55}

.section-title{padding:22px 24px 4px; display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.section-title h2{font-weight:600; font-size:15px; letter-spacing:-.005em}
.section-title .aside{font-size:12px; color:var(--faint)}
.prose{padding:6px 24px 8px; font-size:14px; color:var(--soft); line-height:1.55}
.prose b{color:var(--ink); font-weight:600}

/* ------------------------------------------------------------------ *
 * 6. Tide / live progress — a calm hero panel                         *
 * ------------------------------------------------------------------ */
.tide-wrap{padding:20px 24px 8px}
.tide-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px}
.tide-top .label{font-size:13px; color:var(--soft)}
.tide-top .label b{color:var(--ink); font-weight:600}
.tide-top .count{font-size:13px; color:var(--teal-deep); font-weight:700; font-feature-settings:"tnum";
  background:var(--teal-soft); padding:4px 10px; border-radius:var(--pill)}
.tide{position:relative; height:8px; border-radius:var(--pill); overflow:hidden; background:var(--track)}
.tide__water{position:absolute; inset:0; transform-origin:left; background:var(--done);
  border-radius:var(--pill); transition:transform .9s linear}
.note{padding:10px 24px 16px; font-size:12px; color:var(--faint); display:flex; align-items:center; gap:7px}
.note .dot{width:7px;height:7px;border-radius:50%; background:var(--done)}

/* ------------------------------------------------------------------ *
 * 7. Cards — flat, ruled                                               *
 * ------------------------------------------------------------------ */
.card{position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); transition:box-shadow var(--t), transform var(--t)}
.card--rail{border-color:var(--line)}
.card--rail-teal{border-color:var(--teal)}
.card--rail::before, .card--rail-teal::before{content:none}
.rise{ animation:rise .6s var(--ease) both }
@keyframes rise{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
.released{opacity:.42; filter:grayscale(.45); transition:opacity .5s, filter .5s}
.chosen{box-shadow:0 0 0 2px var(--done); border-color:var(--done)}

/* offer / provider head */
.o-head{display:flex; gap:13px; align-items:flex-start; padding:16px 16px 0}
.avatar{width:46px;height:46px;border-radius:13px;flex:0 0 auto; display:grid; place-items:center;
  background:var(--a,var(--ink)); color:#fff;
  font-family:var(--display); font-weight:800; font-size:17px}
.who{flex:1 1 auto; min-width:0}
.who h3{font-weight:600; font-size:16.5px; line-height:1.2; letter-spacing:-.005em}
.who .trade{font-size:12.5px; color:var(--soft); margin-top:2px}
.badges{display:flex; gap:6px; flex-wrap:wrap; margin-top:9px}
.badge{font-size:12px; font-weight:600; letter-spacing:.01em; padding:3px 8px; border-radius:var(--pill);
  display:inline-flex; align-items:center; gap:4px}
.badge--verified{background:var(--teal-soft); color:var(--teal-deep)}
.badge--fast{background:var(--coral-soft); color:var(--coral-deep)}
.badge--top{background:var(--coral-soft); color:var(--coral-deep)}
.badge--new{background:var(--surface-3); color:var(--soft)}
.badge--good{background:var(--teal-soft); color:var(--teal-deep)}

.rating{text-align:right; flex:0 0 auto}
.rating .stars{font-size:13px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:2px; justify-content:flex-end}
.rating .stars .s{color:var(--gold)}
.rating .count{font-size:12px; color:var(--faint)}
.rating .since{display:block; font-size:12px; color:var(--faint); margin-top:2px}

.o-activity{font-size:14px; color:var(--ink); margin:14px 16px 11px; line-height:1.5}
.extras{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0 16px 14px}
.extras li{font-size:12px; color:var(--teal-deep); background:var(--teal-soft);
  padding:4px 9px; border-radius:8px; display:flex; gap:5px; align-items:center}
.extras li::before{content:"✓"; font-size:12px; font-weight:700}

/* the foot: price (left, tabular) + meta (right), scarcity full-width, CTA row */
.o-foot{border-top:1px solid var(--line-2); padding:14px 16px 15px; display:grid;
  grid-template-columns:1fr auto; align-items:center; gap:8px 12px}
.price{display:flex; align-items:baseline; gap:8px; font-feature-settings:"tnum"}
.price .was{font-size:13px; color:var(--faint); text-decoration:line-through}
.price .now{font-family:var(--display); font-size:28px; font-weight:700; font-stretch:85%; color:var(--ink); line-height:1}
.price .off{font-size:12px; font-weight:700; color:#fff; background:var(--baize); padding:3px 8px; border-radius:var(--r-sm)}
.o-meta{font-size:12px; color:var(--soft); text-align:right; line-height:1.5}
.o-meta .when{color:var(--ink); font-weight:600}
.o-meta a{color:var(--teal-deep); text-decoration:none}
.o-meta a:hover{ text-decoration:underline}
.scarcity{grid-column:1/-1; font-size:12px; color:var(--coral-deep); font-weight:600; display:flex; align-items:center; gap:6px}
.scarcity::before{content:"⌛"; font-size:12px}
.hold{font-size:12px; color:var(--faint); font-feature-settings:"tnum"}
.hold b{color:var(--soft); font-weight:600}
.o-cta{grid-column:1/-1; display:flex; align-items:center; gap:12px; margin-top:2px}
.o-cta .hold{flex:1 1 auto}

.ghost{height:108px; border-radius:var(--r-lg); border:1px solid var(--line-2); background:var(--surface-2)}

/* ------------------------------------------------------------------ *
 * 8. Buttons — flat baize; brass only where it books                *
 * ------------------------------------------------------------------ */
.btn{font-family:var(--body); font-weight:700; font-stretch:85%; font-size:15px; border:none;
  height:48px; padding:0 20px; border-radius:var(--r-sm); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform var(--t), border-color var(--t), background var(--t);
  white-space:nowrap; letter-spacing:-.003em}
a.btn{text-decoration:none}   /* a link styled as a button is a flat button, not underlined text */
.btn:active{transform:translateY(1px)}
.btn--primary{color:#fff; background:var(--baize)}
.btn--primary:hover{background:var(--tile)}
.btn--sea{color:#fff; background:var(--baize)}
.btn--sea:hover{background:var(--tile)}
.btn:focus-visible, .choose:focus-visible, .commit:focus-visible{outline:2px solid var(--baize); outline-offset:2px}
.btn--go{color:var(--ink); background:var(--brass); font-size:19px}   /* go: booking an offer — the one brass action (ink on brass 6.6:1) */
.btn--go:hover{background:#B38C47}
.btn--ghost{color:var(--ink); background:var(--surface); border:1px solid var(--line)}
.btn--ghost:hover{background:var(--surface-2); border-color:var(--faint)}
.btn--full{width:100%}
.btn--lg{height:54px; font-size:17px; border-radius:var(--r-sm)}
.btn[disabled]{opacity:.4; pointer-events:none; box-shadow:none}
.choose{font-family:var(--body); font-weight:700; font-stretch:85%; font-size:15px; color:#fff; background:var(--baize);
  border:none; height:48px; padding:0 20px; border-radius:var(--r-sm); cursor:pointer;
  transition:background var(--t); white-space:nowrap}
.choose:hover{background:var(--tile)}

/* ------------------------------------------------------------------ *
 * 9. Forms                                                            *
 * ------------------------------------------------------------------ */
.field{padding:6px 24px 8px}
.field > label{display:block; font-size:12px; color:var(--soft); margin-bottom:9px; font-weight:600}
.choice-row{display:flex; gap:8px; flex-wrap:wrap}
.choice{font-family:var(--body); font-size:13.5px; font-weight:500; color:var(--soft);
  background:var(--surface); border:1px solid var(--line); min-height:46px; padding:10px 15px;
  border-radius:var(--r-sm); cursor:pointer; transition:all var(--t);
  display:inline-flex; align-items:center; gap:7px}
.choice:hover{border-color:var(--faint)}
.choice.on, .choice[aria-pressed="true"]{background:var(--baize); border-color:var(--baize); color:#fff; font-weight:600}
.choice .tick{opacity:0; transition:opacity var(--t)} .choice.on .tick{opacity:1}

.stepper{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-sm);
  overflow:hidden; background:var(--surface)}
.stepper button{width:46px; height:46px; border:none; background:transparent; cursor:pointer;
  font-size:20px; color:var(--baize); font-weight:600; line-height:1; transition:background var(--t)}
.stepper button:hover{background:var(--surface-3)}
.stepper .val{min-width:48px; text-align:center; font-size:19px; font-weight:600; color:var(--ink); font-feature-settings:"tnum"}
.stepper-row{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--line-2)}
.stepper-row:last-child{border-bottom:none}
.stepper-row .lbl{font-size:14px; color:var(--ink); font-weight:500}
.stepper-row .sub{font-size:12px; color:var(--faint); margin-top:2px}

/* Bare <input>/<select> controls — styled to the system (qualify capture, provider submit). Merged from the guests'
   former copy of this sheet (departures-reskin Stage 1): every page now loads this one sheet. */
.field > span{display:block; font-size:14px; color:var(--soft); margin-bottom:9px; font-weight:600}
.field input:not([type=radio]):not([type=checkbox]), .field select, .ages input, select.control, input.control{
  width:100%; font-family:var(--body); font-size:16px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px 13px; outline:none; transition:border-color var(--t), box-shadow var(--t);
  -webkit-appearance:none; appearance:none}
.field select, select.control{padding-right:36px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2316235C' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center}
.field input:focus, .field select:focus, .ages input:focus, .control:focus{border-color:var(--baize); box-shadow:var(--ring-teal)}
.field input::placeholder, .ages input::placeholder{color:var(--faint)}
.ages{display:flex; gap:8px}
.ages input{text-align:center}
.qualify{display:flex; flex-direction:column; gap:2px; padding-bottom:12px}
.qualify .field{padding:8px 24px}

/* ------------------------------------------------------------------ *
 * 10. Star input                                                      *
 * ------------------------------------------------------------------ */
.stars-input{display:flex; gap:8px; justify-content:center; padding:8px 0}
.stars-input button{background:none; border:none; cursor:pointer; font-size:42px; line-height:1;
  color:rgba(23,58,47,.55); transition:transform .12s, color .12s}   /* an empty star: 3:1+ (a 42px glyph) */
.stars-input button:hover{transform:scale(1.12)}
.stars-input button.lit{color:var(--gold)}

/* ------------------------------------------------------------------ *
 * 11. Stat tiles + ledger                                             *
 * ------------------------------------------------------------------ */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; padding:16px 24px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px}
.stat .k{font-size:14px; color:var(--soft); font-weight:600}
.stat .v{font-family:var(--display); font-weight:800; font-stretch:72%; font-size:32px; color:var(--ink); line-height:1.1; margin-top:6px; font-feature-settings:"tnum"}
.stat .v.sea{color:var(--teal-deep)} .stat .v.terra{color:var(--coral-deep)}
.stat .d{font-size:12px; color:var(--soft); margin-top:5px}
.stat--hero{grid-column:1/-1; background:var(--surface-2)}
.stat--hero .v{font-size:46px}

.ledger{padding:6px 16px 18px; display:flex; flex-direction:column}
.lrow{display:flex; align-items:center; gap:13px; padding:13px 8px; border-bottom:1px solid var(--line-2)}
.lrow:last-child{border-bottom:none}
.lrow .lr-main{flex:1 1 auto; min-width:0}
.lrow .lr-title{font-size:14px; color:var(--ink); font-weight:600}
.lrow .lr-sub{font-size:12px; color:var(--soft); margin-top:2px}
.lrow .lr-amt{font-size:17px; font-weight:600; color:var(--ink); font-feature-settings:"tnum"; text-align:right; white-space:nowrap}
.lrow .lr-amt.sea{color:var(--teal-deep)} .lrow .lr-amt.faint{color:var(--faint)}
.pill{font-size:12px; font-weight:600; padding:3px 8px; border-radius:var(--pill); white-space:nowrap}
.pill--ok{background:var(--teal-soft); color:var(--teal-deep)}
.pill--wait{background:var(--coral-soft); color:var(--coral-deep)}
.pill--off{background:var(--surface-3); color:var(--soft)}

/* ------------------------------------------------------------------ *
 * 12. Sticky action bar                                               *
 * ------------------------------------------------------------------ */
.actionbar{
  position:sticky; bottom:0; z-index:6; padding:14px 20px calc(18px + env(safe-area-inset-bottom));
  background:var(--surface);
  border-top:1px solid var(--line-2); display:flex; align-items:center; gap:12px}
.actionbar--plain{ background:transparent; border-top:none}
.actionbar .hint{font-size:12.5px; color:var(--soft); flex:1 1 auto; line-height:1.4}
.actionbar .hint b{color:var(--ink); font-weight:600}
.iconbtn{width:42px;height:42px;border-radius:var(--r-sm); border:1px solid var(--line);
  background:rgba(255,255,255,.6); cursor:pointer; font-size:16px; display:grid; place-items:center; transition:all var(--t); flex:0 0 auto}
.iconbtn:hover{background:var(--surface); border-color:var(--faint)}

/* ------------------------------------------------------------------ *
 * 13. Sheet (bottom sheet / booking ticket)                           *
 * ------------------------------------------------------------------ */
.sheet-scrim{position:fixed; inset:0; z-index:50; background:rgba(23,58,47,.55);
  opacity:0; pointer-events:none; transition:opacity .4s}
.sheet-scrim.on{opacity:1; pointer-events:auto}
.sheet{position:absolute; left:0; right:0; bottom:0; background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0; padding:10px 24px calc(30px + env(safe-area-inset-bottom));
  transform:translateY(102%); transition:transform .5s var(--ease);
  border-top:3px solid var(--baize); max-height:92vh; overflow-y:auto}
.sheet.on{transform:none}
.sheet .grab{width:42px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 16px}
.sheet .seal{font-size:14px; color:var(--soft); font-weight:600; text-align:center}
.sheet h2{font-family:var(--display); font-weight:800; font-stretch:72%; font-size:30px; text-align:center; margin-top:6px; line-height:1.1}
.sheet h2 em{font-style:normal; color:inherit}
.ticket{margin:18px 0 16px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg);
  display:flex; gap:16px; padding:16px; align-items:center; position:relative}
.ticket::before,.ticket::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:var(--bg);top:50%;transform:translateY(-50%);border:1px solid var(--line)}
.ticket::before{left:-10px}.ticket::after{right:-10px}
.qr{width:82px;height:82px;flex:0 0 auto;border-radius:11px;padding:7px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.qr svg{display:block;width:100%;height:100%}
.tk-info{flex:1 1 auto}
.tk-info .lbl{font-size:14px;color:var(--soft);font-weight:600}
.tk-info .code{font-family:var(--display);font-weight:800;font-stretch:85%;font-size:31px;letter-spacing:.04em;font-feature-settings:"tnum";color:var(--ink);line-height:1.1}
.tk-info .meta{font-size:12px;color:var(--soft);margin-top:4px;line-height:1.5}
.tk-info .meta b{color:var(--ink)}
.commit{width:100%; font-family:var(--body); font-weight:700; font-stretch:85%; font-size:19px; color:var(--ink); background:var(--brass);
  border:none; height:54px; border-radius:var(--r-sm); cursor:pointer; transition:background var(--t);
  display:flex; align-items:center; justify-content:center; gap:9px}   /* go green; white on green is AA from 19px bold */
.commit.done{background:var(--baize); pointer-events:none}   /* booked: the ink, so the done state reads different from "go" */
.reminder{font-size:12px;color:var(--faint);text-align:center;margin-top:12px;line-height:1.5}

/* ------------------------------------------------------------------ *
 * 14. Misc                                                            *
 * ------------------------------------------------------------------ */
.divider{height:1px; background:var(--line); margin:8px 24px}
.gift{margin:0 24px 12px; padding:16px; border-radius:var(--r-lg); background:var(--surface);
  border:1px solid var(--line); position:relative; overflow:hidden}
.gift::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--baize)}
.gift.gift--sea::before{ background:var(--done)}
.gift.gift--ink::before{ background:var(--faint)}
.gift .gift-k{font-size:14px; color:var(--soft); font-weight:700}
.gift.gift--sea .gift-k{color:var(--teal-deep)}
.gift.gift--ink .gift-k{color:var(--soft)}
.gift .gift-t{font-size:16px; color:var(--ink); margin-top:6px; line-height:1.3; font-weight:500; letter-spacing:-.005em}
.gift .gift-d{font-size:12.5px; color:var(--soft); margin-top:6px; line-height:1.55}
.gift .gift-d b{color:var(--ink); font-weight:600}

/* the accounts pages' card (accounts/auth_base.html: `.shell.auth`) — the headline and the text links */
.auth h1{font-family:var(--display); font-weight:800; font-stretch:72%; font-size:34px; line-height:1.05; color:var(--ink); margin:8px 0 18px}
.auth p{margin-top:16px; font-size:15px; color:var(--soft); line-height:1.5}
.auth a:not(.btn){color:var(--ink); font-weight:600}

@media(max-width:480px){
  body{padding:0}
  .shell{width:100%;border-radius:0;height:100dvh;max-height:100dvh; box-shadow:none; border:none}
  .sheet,.sheet-scrim{position:fixed}
}
/* ------------------------------------------------------------------ *
 * Phone: every table stacks into "label  value" rows (2026-09-28)     *
 * Each body cell names its column in data-label (test_page_shells pins *
 * that); the headings row hides. Keyed on body cells, not on a class, *
 * so every table kind stacks — an empty list's lone colspan row too.  *
 * A cell holding a form or a long value wraps below its label.        *
 * `:not([data-no-stack])` is the opt-out, and it lifts the rule above *
 * `table.tbl` / `.bookings td` (a bare `table:has(td)` loses to them). *
 * ------------------------------------------------------------------ */
@media(max-width:480px){
  table:has(td):not([data-no-stack]){ display:block; width:100%; min-width:0 }
  table:has(td):not([data-no-stack]) thead{ display:none }
  table:has(td):not([data-no-stack]) tbody, table:has(td):not([data-no-stack]) tr, table:has(td):not([data-no-stack]) td{ display:block }
  table:has(td):not([data-no-stack]) tr{ padding:10px 16px; border-top:1px solid var(--line) }
  table:has(td):not([data-no-stack]) tbody tr:first-child{ border-top:none }
  table:has(td):not([data-no-stack]) td{ padding:3px 0; border:none; text-align:left; white-space:normal; overflow-wrap:anywhere }
  table:has(td):not([data-no-stack]) td:not([data-label=""])[data-label]::before{ content:attr(data-label); display:inline-block;
    min-width:38%; padding-right:10px; font-size:12px; font-weight:600; color:var(--soft); vertical-align:top }
  table:has(td):not([data-no-stack]) td[colspan]{ padding:6px 0 }
}

/* Legal documents (plan legal-gdpr Stage 2): the links at the foot of every page — INSIDE the page's <main>, because
   the body is a flex row holding the card, so a sibling after <main> would sit beside it as a column — and the document
   page itself. */
.legal-footer{ margin-top:16px; padding:12px 24px 20px; border-top:1px solid var(--line); }
.legal-footer nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 22px; }
.legal-footer a{ display:inline-flex; align-items:center; min-height:44px; font-size:13px; color:var(--soft);
  text-decoration:underline; text-underline-offset:3px; }
.legal-doc{ padding:24px 22px 0; }
.legal-doc h1{ font-size:28px; line-height:1.15; margin:0 0 6px; }
.legal-meta{ color:var(--soft); font-size:14px; margin:0 0 16px; }
.legal-banner{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px;
  font-size:14px; margin:0 0 8px; }
.legal-section h2{ font-size:19px; margin:28px 0 8px; }
.legal-section p, .legal-section li{ line-height:1.55; margin:0 0 10px; }
.legal-section ul, .legal-section ol{ padding-left:22px; margin:0 0 10px; }
.legal-section ul{ list-style:disc; }
.legal-section ol{ list-style:decimal; }
.legal-section blockquote{ margin:0 0 10px; padding:8px 12px; border-left:3px solid var(--line); color:var(--soft); }
.legal-section table{ display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; margin:12px 0; }
.legal-section th, .legal-section td{ border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top;
  font-size:14px; min-width:110px; }
/* legal-gdpr Stage 3: the terms tick box, on the login page and on the phone sheet above "Find me offers". A 44 px row
   so the box is an easy tap; the links underlined so they read as links inside the label. */
.terms-check{ display:flex; align-items:flex-start; gap:10px; min-height:44px; padding:8px 0; font-size:14px;
  line-height:1.4; cursor:pointer; }
.terms-check input{ flex:none; width:22px; height:22px; margin:1px 0 0; accent-color:var(--baize); }
.terms-check a, .terms-note a{ color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.terms-note{ font-size:12px; color:var(--soft); margin:0; padding:0 0 4px 32px; }