/* ═══ EliteTrip — the shared parts every staff app uses the same way ═══════════
   One stylesheet, one prefix (.et-), so nothing here can reach the client
   documents Proposals Studio draws in the same page. Decided with Ahmad on
   26 Sep 2026 from the Platform Blueprint: navy #002140, gold, ivory, Hanken
   Grotesk (self-hosted at /fonts/elitetrip-fonts.css), light ground, status
   as word + colour, a number that is never 0 while unknown.

   Load it AFTER the app's own <style>, with a version:  <link rel="stylesheet"
   href="et-ui.css?v=1">  Bump v when this file changes (nginx caches it).

   Parts (§):  1 tokens · 2 figure (four honest states) · 3 status chip ·
   4 save state · 5 buttons · 6 panel + to-do rows · 7 week strip ·
   8 empty / failed · 9 band · 10 table that becomes cards · 11 phone.
   tools/ui-ratchet-check.js keeps every app's own colour / emoji / inline
   style / text-size counts from ever rising again. */

/* ── 1 · tokens ──────────────────────────────────────────────────────────── */
:root{
  --et-ff:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --et-mono:ui-monospace,Menlo,'Courier New',monospace;
  --et-bg:#FDFAF4; --et-card:#FFFFFF; --et-line:#ECE4D2; --et-line-2:#F3EEE3;
  --et-ink:#0B1A2B; --et-ink-2:#55606E; --et-ink-3:#8A93A0;
  --et-navy:#002140; --et-navy-2:#0E3A63; --et-navy-3:#00162D;
  --et-gold:#C9972B; --et-gold-2:#F0B54F; --et-gold-soft:#F6EBD2; --et-gold-ink:#7A5712;
  /* status: a word AND a colour, never the colour alone. Separate from the brand gold. */
  --et-ok:#1E7A4B; --et-ok-bg:#E4F3EA;
  --et-warn:#A5620A; --et-warn-bg:#FBEFD9;
  --et-bad:#A12E2E; --et-bad-bg:#F8E3E1;
  --et-info:#2A5A8A; --et-info-bg:#E3EDF7;
  --et-neutral:#5B6573; --et-neutral-bg:#EEF0F2;
  /* one type scale */
  --et-t-xs:11px; --et-t-sm:12.5px; --et-t-md:14px; --et-t-lg:16px; --et-t-xl:19px; --et-t-fig:27px;
  /* three corners */
  --et-r-sm:6px; --et-r:12px; --et-r-pill:999px;
  --et-focus:#2F5E8C;
}
.et-tnum{font-variant-numeric:tabular-nums}
.et-ico{width:18px;height:18px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
:where(.et-btn,.et-fig a,.et-panel a,.et-row a):focus-visible{outline:3px solid var(--et-focus);outline-offset:2px;border-radius:var(--et-r-sm)}

/* ── 2 · the number — value / loading / unknown / zero ────────────────────── */
.et-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.et-fig{background:var(--et-card);border:1px solid var(--et-line);border-radius:var(--et-r);padding:12px 14px;display:grid;gap:2px;position:relative;font-family:var(--et-ff);color:var(--et-ink);font-variant-numeric:tabular-nums;min-width:0}
.et-fig .k{font-size:var(--et-t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--et-ink-2)}
.et-fig .v{font-size:var(--et-t-fig);font-weight:800;letter-spacing:-.03em;line-height:1.15;overflow-wrap:anywhere}
.et-fig .v small{font-size:13px;font-weight:700;color:var(--et-ink-2);margin-inline-end:3px;letter-spacing:0}
.et-fig .s{font-size:12px;color:var(--et-ink-3);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.et-fig a.drill{font-size:12px;font-weight:700;color:var(--et-navy);text-decoration:none}
.et-fig a.drill:hover{text-decoration:underline}
/* unknown: a dash and the reason, never a zero that looks like an answer */
.et-fig.is-unknown .v{color:var(--et-ink-3)}
.et-fig.is-unknown .s{color:var(--et-bad)}
.et-fig.is-unknown a.drill{color:var(--et-bad)}
/* loading: the shape of a number, not a number */
.et-fig.is-loading .v,.et-fig.is-loading .s{color:transparent;border-radius:var(--et-r-sm);background:linear-gradient(90deg,#EFE9DC 0%,#F7F2E7 50%,#EFE9DC 100%);background-size:200% 100%;animation:et-shim 1.4s linear infinite}
.et-fig.is-loading .v{height:30px;width:70%}
.et-fig.is-loading .s{height:12px;width:50%}
.et-fig.is-loading a{visibility:hidden}
@keyframes et-shim{to{background-position:-200% 0}}
/* zero is a real answer: it says so */
.et-fig.is-zero .v{color:var(--et-ink-2)}

/* ── 3 · status chip — one vocabulary ─────────────────────────────────────── */
.et-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--et-ff);font-size:12px;font-weight:700;padding:3px 9px 3px 8px;border-radius:var(--et-r-pill);white-space:nowrap;line-height:1.3;color:var(--et-neutral);background:var(--et-neutral-bg)}
.et-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.et-chip.ok{color:var(--et-ok);background:var(--et-ok-bg)}
.et-chip.warn{color:var(--et-warn);background:var(--et-warn-bg)}
.et-chip.bad{color:var(--et-bad);background:var(--et-bad-bg)}
.et-chip.info{color:var(--et-info);background:var(--et-info-bg)}
.et-chip.neutral{color:var(--et-neutral);background:var(--et-neutral-bg)}
.et-chip.gold{color:var(--et-gold-ink);background:var(--et-gold-soft)}

/* ── 4 · saving says what happened ────────────────────────────────────────── */
.et-save{display:inline-flex;align-items:center;gap:8px;font-family:var(--et-ff);font-size:13px;font-weight:700;padding:6px 10px;border-radius:var(--et-r-sm);color:var(--et-ink-2);background:#F2EEE4}
.et-save.ok{color:var(--et-ok);background:var(--et-ok-bg)}
.et-save.bad{color:var(--et-bad);background:var(--et-bad-bg)}
.et-save .et-btn{margin-inline-start:auto;padding:4px 9px;min-height:0}

/* ── 5 · buttons ──────────────────────────────────────────────────────────── */
.et-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--et-ff);font-size:var(--et-t-sm);font-weight:700;border-radius:9px;padding:7px 12px;border:1px solid var(--et-line);background:var(--et-card);color:var(--et-ink);cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1.2;transition:background .15s,border-color .15s}
.et-btn:hover{border-color:var(--et-gold);background:#FFFDF8}
.et-btn.primary{background:var(--et-navy);border-color:var(--et-navy);color:#fff}
.et-btn.primary:hover{background:var(--et-navy-2);border-color:var(--et-navy-2)}
.et-btn.gold{background:var(--et-gold);border-color:var(--et-gold);color:#1E1403}
.et-btn.gold:hover{background:var(--et-gold-2);border-color:var(--et-gold-2)}
.et-btn[disabled]{opacity:.5;cursor:not-allowed}

/* ── 6 · panel, and the rows of work inside it ────────────────────────────── */
.et-panel{background:var(--et-card);border:1px solid var(--et-line);border-radius:var(--et-r);overflow:hidden;font-family:var(--et-ff);color:var(--et-ink);min-width:0}
.et-panel-h{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--et-line)}
.et-panel-h h4{margin:0;font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--et-ink)}
.et-panel-h .count{font-size:12px;font-weight:700;color:var(--et-ink-2)}
.et-panel-h .more{margin-inline-start:auto;font-size:var(--et-t-sm);font-weight:700;color:var(--et-navy);text-decoration:none}
.et-panel-h .more:hover{text-decoration:underline}
.et-todo{display:grid}
.et-row{display:grid;grid-template-columns:4px 30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 14px 11px 0;border-bottom:1px solid var(--et-line);text-decoration:none;color:inherit}
.et-row:last-child{border-bottom:0}
.et-row .stripe{align-self:stretch;border-radius:0 3px 3px 0;background:var(--et-neutral)}
.et-row.bad .stripe{background:var(--et-bad)} .et-row.warn .stripe{background:var(--et-warn)} .et-row.info .stripe{background:var(--et-info)} .et-row.ok .stripe{background:var(--et-ok)}
.et-row .i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--et-neutral-bg);color:var(--et-neutral)}
.et-row.bad .i{background:var(--et-bad-bg);color:var(--et-bad)} .et-row.warn .i{background:var(--et-warn-bg);color:var(--et-warn)} .et-row.info .i{background:var(--et-info-bg);color:var(--et-info)} .et-row.ok .i{background:var(--et-ok-bg);color:var(--et-ok)}
.et-row .t{font-weight:700;font-size:var(--et-t-md);display:block}
.et-row .d{font-size:var(--et-t-sm);color:var(--et-ink-2);display:block}
.et-row .ref{font-family:var(--et-mono);font-size:11.5px;color:var(--et-ink-3)}
.et-row .et-btn{justify-self:end}

/* ── 7 · the week — seven days, departures and returns ────────────────────── */
.et-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:12px 14px}
.et-day{display:grid;gap:6px;align-content:start;min-width:0}
.et-day .dn{font-size:var(--et-t-xs);font-weight:700;letter-spacing:.08em;color:var(--et-ink-3);text-transform:uppercase}
.et-day .dd{font-size:18px;font-weight:800;line-height:1}
.et-day.today .dd{color:var(--et-gold)}
.et-ev{font-size:11.5px;line-height:1.3;padding:4px 7px;background:#FBF3E0;border-radius:var(--et-r-sm);display:flex;gap:5px;align-items:baseline;text-decoration:none;color:var(--et-ink);overflow:hidden}
.et-ev::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--et-gold);transform:translateY(-1px)}
.et-ev.ret{background:#EEF3F9} .et-ev.ret::before{background:var(--et-info)}
.et-ev.pay{background:var(--et-warn-bg)} .et-ev.pay::before{background:var(--et-warn)}
.et-ev span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.et-ev.more{background:transparent;color:var(--et-ink-3);font-weight:700} .et-ev.more::before{display:none}

/* ── 8 · empty, and failed — both say what to do next ─────────────────────── */
.et-empty{border:1.5px dashed var(--et-line);border-radius:var(--et-r);padding:16px;display:grid;gap:8px;justify-items:start;font-family:var(--et-ff);font-size:13px;color:var(--et-ink-2)}
.et-empty b{color:var(--et-ink);font-size:var(--et-t-md)}
.et-err{border:1px solid #EFC9C4;background:var(--et-bad-bg);border-radius:var(--et-r);padding:12px 14px;display:grid;gap:6px;justify-items:start;font-family:var(--et-ff);font-size:13px;color:#6E2020}
.et-err b{color:var(--et-bad)}

/* ── 9 · the band — the only dark surface: figures over navy ──────────────── */
.et-band{background:radial-gradient(120% 140% at 90% 0%,var(--et-navy-2) 0%,var(--et-navy) 55%,var(--et-navy-3) 100%);color:#fff;padding:18px 20px 20px;display:grid;gap:14px;border-radius:var(--et-r);font-family:var(--et-ff)}
.et-band .title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.et-band .title b{font-size:var(--et-t-xl);font-weight:800;letter-spacing:-.02em}
.et-band .title span{font-size:13px;color:rgba(255,255,255,.62)}
.et-band .title .et-save{margin-inline-start:auto;background:rgba(255,255,255,.08);color:#8FD4AE}
.et-band .title .et-save.bad{color:#FFB4AE}
.et-band .et-fig{background:rgba(255,255,255,.06);border-color:rgba(240,181,79,.22);color:#fff}
.et-band .et-fig .k{color:rgba(255,255,255,.66)}
.et-band .et-fig .v{color:#fff}
.et-band .et-fig .v small{color:var(--et-gold-2)}
.et-band .et-fig .s{color:rgba(255,255,255,.55)}
.et-band .et-fig a.drill{color:var(--et-gold-2)}
.et-band .et-fig.is-unknown .v{color:rgba(255,255,255,.45)}
.et-band .et-fig.is-unknown .s,.et-band .et-fig.is-unknown a.drill{color:#FFB4AE}
.et-band .et-fig.is-loading .v,.et-band .et-fig.is-loading .s{background:linear-gradient(90deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.08) 100%);background-size:200% 100%}

/* ── 10 · a table whose rows become cards on the phone ────────────────────── */
.et-table{width:100%;border-collapse:collapse;font-family:var(--et-ff);font-size:13px;color:var(--et-ink);font-variant-numeric:tabular-nums}
.et-table th{text-align:start;font-size:var(--et-t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--et-ink-3);padding:10px 12px;border-bottom:1px solid var(--et-line);background:#FBF8F0}
.et-table td{padding:10px 12px;border-bottom:1px solid var(--et-line);vertical-align:middle}
.et-table tr:last-child td{border-bottom:0}
.et-table tbody tr:hover td{background:#FCF9F2}
.et-table .num{text-align:end;font-weight:700}
.et-table .who b{display:block;font-weight:800}
.et-table .who span{font-size:12px;color:var(--et-ink-3);font-family:var(--et-mono)}
.et-table .next{font-weight:700;color:var(--et-navy)}
.et-pay{height:6px;border-radius:var(--et-r-pill);background:#EEE7D7;overflow:hidden;width:90px}
.et-pay i{display:block;height:100%;background:var(--et-ok)}
.et-tripcard{background:var(--et-card);border:1px solid var(--et-line);border-radius:var(--et-r);padding:12px;display:grid;gap:8px;font-family:var(--et-ff)}
.et-tripcard .kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:var(--et-t-sm)}
.et-tripcard .kv span{color:var(--et-ink-3)} .et-tripcard .kv b{text-align:end}

/* two-column split used by the Hub: work on the left, the week on the right */
.et-split{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start}

/* ── 11 · the phone ───────────────────────────────────────────────────────── */
@media (max-width:720px){
  .et-figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .et-fig .v{font-size:21px}
  .et-split{grid-template-columns:1fr}
  .et-band{padding:14px 14px 16px;border-radius:0;margin-inline:-14px}
  .et-row{grid-template-columns:4px minmax(0,1fr);padding:10px 12px 10px 0}
  .et-row .i{display:none}
  .et-row .et-btn{grid-column:2;justify-self:start;min-height:44px}
  .et-btn{min-height:44px}
  .et-week{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:10px}
  .et-ev span{display:none}                       /* the dot stays; the name is in the list below */
  .et-table thead{display:none}
  .et-table,.et-table tbody,.et-table tr,.et-table td{display:block;width:100%}
  .et-table tr{border:1px solid var(--et-line);border-radius:var(--et-r);margin-bottom:10px;background:var(--et-card);padding:6px 0}
  .et-table td{border:0;padding:5px 12px;display:flex;justify-content:space-between;gap:12px}
  .et-table td::before{content:attr(data-label);font-size:var(--et-t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--et-ink-3);flex:none}
  .et-table td.who{display:block} .et-table td.who::before{display:none}
  .et-table .num{text-align:end}
}
/* A one-column grid with no template gets an AUTO track, and an auto track is as wide as its widest
   child — so a long name or a six-figure amount pushed the tile's text out of the tile and the whole
   page sideways on a phone (7 Oct 2026). minmax(0,1fr) lets the track shrink and the text wrap. */
.et-fig,.et-todo,.et-band,.et-tripcard,.et-empty,.et-err{grid-template-columns:minmax(0,1fr)}
/* right-to-left pages: the same parts, mirrored */
[dir=rtl] .et-row .stripe{border-radius:3px 0 0 3px}
[dir=rtl] .et-table th,[dir=rtl] .et-table td{text-align:start}
@media (prefers-reduced-motion:reduce){
  .et-fig.is-loading .v,.et-fig.is-loading .s{animation:none}
  .et-btn{transition:none}
}