/* ECRworlds — components shared by the public site and both dashboards.
   Loaded after style.css and built entirely on its tokens, so the marigold
   accent, the milestone shapes and the mono eyebrows carry straight through. */

/* ── extra tokens ─────────────────────────────────────────────────────────── */
:root{
  --ok:#2F7A54; --ok-soft:rgba(47,122,84,.12);
  --warn:#B46A11; --warn-soft:rgba(226,154,44,.16);
  --bad:#B4341B; --bad-soft:rgba(180,52,27,.12);
  --live:#1E6F8C; --live-soft:rgba(30,111,140,.12);
  --r-sm:7px; --r-lg:14px;
  --nav-h:62px; --tabbar-h:60px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ok:#5FB98A; --ok-soft:rgba(95,185,138,.15);
  --warn:#F0AC45; --warn-soft:rgba(240,172,69,.16);
  --bad:#E8745A; --bad-soft:rgba(232,116,90,.15);
  --live:#63B6D4; --live-soft:rgba(99,182,212,.15);
}}
:root[data-theme="dark"]{
  --ok:#5FB98A; --ok-soft:rgba(95,185,138,.15);
  --warn:#F0AC45; --warn-soft:rgba(240,172,69,.16);
  --bad:#E8745A; --bad-soft:rgba(232,116,90,.15);
  --live:#63B6D4; --live-soft:rgba(99,182,212,.15);
}

/* ── typography ───────────────────────────────────────────────────────────────
   Gloock is a display face: one weight, very high stroke contrast, tight
   apertures. It is handsome at 26px and up and turns spindly below that, and
   because it has no bold, a small heading in it reads weaker than the body
   text underneath. So it keeps the display moments — hero, page titles, big
   numerals — and everything smaller uses Hanken Grotesk at 600, which was
   drawn for exactly that size.
   ──────────────────────────────────────────────────────────────────────────── */

/* Never let a browser fake a bold Gloock; there is no bold to fake. */
h1, h2, h3, .brand, .tile-v, .milestone .kmv, .tt-km b, .big-score b,
.bb-price b, .done .ref b, .rv-km b, .empty-t, .legend-val {
  font-synthesis-weight: none;
}

h1 { letter-spacing: -.018em; line-height: 1.08; }
h2 { letter-spacing: -.012em; line-height: 1.15; font-size: clamp(23px, 2.6vw, 28px); }

/* Small headings move to the text face. */
h3 {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -.003em;
}

/* …except these, which are big enough to carry the display face properly. */
.card-top h3,
.str h3,
.summary h3,
.dlg-sheet h3,
.h-title h1,
.done h2 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.card-top h3 { font-size: 21px; }
.str h3 { font-size: 20px; }
.summary h3 { font-size: 21px; }
.dlg-sheet h3 { font-size: 20px; }

/* The places where a small heading sits in a dense row, and legibility beats
   personality: listings, rooms, trips, panels, inbox. */
.tt-name h3 { font-size: 18px; font-weight: 650; }
.room h3 { font-size: 17px; }
.trip-b h3 { font-size: 17px; }
.help-card h3 { font-size: 17px; }
.panel-h h2 { font-family: var(--f-body); font-weight: 650; font-size: 16.5px; letter-spacing: -.003em; }
.panel-h h3 { font-size: 16px; }
.empty-t { font-family: var(--f-display); font-weight: 400; font-size: 20px; }

/* Numerals in the display face want tabular spacing wherever they line up. */
.tile-v, .tt-km b, .milestone .kmv, .big-score b, .bb-price b, .rv-km b {
  font-variant-numeric: tabular-nums lining;
}

/* ── buttons: extra variants ──────────────────────────────────────────────── */
.btn{font-family:var(--f-body)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.btn-danger{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn-danger:hover{filter:brightness(1.08)}
.btn-quiet{background:var(--paper-2);color:var(--ink);border-color:transparent}
.btn-quiet:hover{border-color:var(--line)}
.btn-xs{padding:6px 10px;font-size:12px;border-radius:6px}
.btn-icon{padding:9px;width:36px;height:36px}
.btn-loading{position:relative;color:transparent!important;pointer-events:none}
.btn-loading::after{content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;color:var(--on-accent)}
.btn-ghost.btn-loading::after,.btn-quiet.btn-loading::after{color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── status pills ─────────────────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:5px;font:600 11px/1 var(--f-mono);letter-spacing:.04em;padding:5px 8px;border-radius:5px;white-space:nowrap;text-transform:uppercase}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.pill-ok{background:var(--ok-soft);color:var(--ok)}
.pill-warn{background:var(--warn-soft);color:var(--warn)}
.pill-bad{background:var(--bad-soft);color:var(--bad)}
.pill-live{background:var(--live-soft);color:var(--live)}
.pill-mute{background:var(--paper-2);color:var(--ink-3)}
.pill-off{background:var(--paper-2);color:var(--ink-3);text-decoration:line-through}

/* ── form controls ────────────────────────────────────────────────────────── */
.inp,.sel2,textarea.inp{width:100%;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-sm);padding:10px 12px;font:500 14px/1.4 var(--f-body);min-width:0}
textarea.inp{min-height:92px;resize:vertical;line-height:1.55}
.inp:focus,.sel2:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.inp:disabled{background:var(--paper-2);color:var(--ink-3)}
.inp::placeholder{color:var(--ink-3)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.lbl{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.field-hint{font-size:12px;color:var(--ink-3)}
.field-err{font-size:12.5px;color:var(--bad);font-weight:500}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:560px){.row2,.row3{grid-template-columns:1fr}}
.switch{display:flex;align-items:center;gap:11px;cursor:pointer;font-size:14px;padding:4px 0}
.switch input{appearance:none;width:38px;height:22px;border-radius:11px;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background .18s;margin:0}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--card);transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{transform:translateX(16px)}
.switch input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg{display:inline-flex;background:var(--paper-2);border-radius:var(--r-sm);padding:3px;gap:2px;flex-wrap:wrap}
.seg button{all:unset;cursor:pointer;padding:7px 13px;border-radius:5px;font:600 12.5px/1 var(--f-body);color:var(--ink-2);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(16,35,42,.12)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ── cards and panels ─────────────────────────────────────────────────────── */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-h h2,.panel-h h3{font-size:18px}
.panel-b{padding:18px}
.panel-b.tight{padding:0}
.panel-f{padding:13px 18px;border-top:1px solid var(--line);background:var(--paper-2);font-size:13px;color:var(--ink-2)}

/* ── metric tiles ─────────────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:17px 18px;display:flex;flex-direction:column;gap:7px;min-width:0}
.tile-k{font:500 10px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.tile-v{font:400 30px/1 var(--f-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tile-sub{font-size:12.5px;color:var(--ink-3)}
.tile-d{font:600 11.5px/1 var(--f-mono);display:inline-flex;align-items:center;gap:3px}
.tile-d.up{color:var(--ok)}
.tile-d.down{color:var(--bad)}
.tile-accent{border-top:3px solid var(--accent)}

/* ── tables ───────────────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font:500 10px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:11px 14px;border-bottom:1px solid var(--ink);white-space:nowrap;background:var(--card);position:sticky;top:0;z-index:1}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:hover{background:var(--paper-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums}
.tbl .num{font-family:var(--f-mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.tbl a{text-decoration:none;font-weight:600}
.tbl a:hover{color:var(--accent)}
.tbl tr[data-href]{cursor:pointer}
.t-main{font-weight:600;font-size:14px}
.t-sub{color:var(--ink-3);font-size:12px;margin-top:2px}
.tbl-empty td{padding:36px 14px;text-align:center;color:var(--ink-3)}

/* Stacked cards instead of a squeezed table on a phone. */
@media (max-width:760px){
  .tbl.stack thead{display:none}
  .tbl.stack,.tbl.stack tbody,.tbl.stack tr,.tbl.stack td{display:block;width:100%}
  .tbl.stack tr{border-bottom:1px solid var(--line);padding:13px 2px}
  .tbl.stack td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
  .tbl.stack td::before{content:attr(data-l);font:500 10px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);flex:none}
  .tbl.stack td.r{text-align:right}
  .tbl.stack td[data-l=""]{display:block}
  .tbl.stack td[data-l=""]::before{display:none}
}

/* ── mobile navigation ────────────────────────────────────────────────────── */
.burger{display:none;all:unset;cursor:pointer;width:40px;height:40px;place-items:center;border-radius:8px;color:var(--ink)}
.burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.burger i{display:block;width:19px;height:1.8px;background:currentColor;border-radius:2px;position:relative;transition:transform .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:19px;height:1.8px;background:currentColor;border-radius:2px;transition:transform .2s,top .2s}
.burger i::before{top:-6px}
.burger i::after{top:6px}
.burger[aria-expanded="true"] i{transform:rotate(45deg)}
.burger[aria-expanded="true"] i::before{top:0;transform:rotate(-90deg)}
.burger[aria-expanded="true"] i::after{top:0;opacity:0}

.drawer{position:fixed;inset:var(--nav-h) 0 0;z-index:38;background:var(--paper);display:none;flex-direction:column;overflow-y:auto;padding:12px 20px calc(28px + env(safe-area-inset-bottom,0px));animation:drawerIn .2s ease}
.drawer.open{display:flex}
@keyframes drawerIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.drawer a,.drawer button.dlink{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 2px;border-bottom:1px solid var(--line);text-decoration:none;font:400 20px/1.2 var(--f-display);color:var(--ink);background:none;border-left:0;border-right:0;border-top:0;width:100%;cursor:pointer;text-align:left}
.drawer a small{font:500 11px/1 var(--f-mono);color:var(--ink-3);letter-spacing:.06em}
.drawer .drawer-cta{margin-top:20px;display:grid;gap:10px}
.drawer-sec{font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:22px 0 2px}
body.drawer-open{overflow:hidden}
@media (max-width:860px){
  .burger{display:grid}
  .top .btn-accent{display:none}
  .top-in{gap:12px}
}
@media (min-width:861px){.drawer{display:none!important}}

/* Bottom tab bar for the signed-in app on a phone. */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:36;background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar ul{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 8px;text-decoration:none;color:var(--ink-3);font:600 10px/1.2 var(--f-body);letter-spacing:.02em}
.tabbar a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabbar a[aria-current]{color:var(--accent)}
.tabbar .badge{position:absolute;transform:translate(13px,-5px);min-width:16px;height:16px;border-radius:8px;background:var(--bad);color:#fff;font:600 10px/16px var(--f-mono);text-align:center;padding:0 4px}
@media (max-width:860px){
  body.has-tabbar .tabbar{display:block}
  body.has-tabbar{padding-bottom:var(--tabbar-h)}
  body.has-tabbar .foot{margin-bottom:var(--tabbar-h)}
}

/* ── toasts and dialogs ───────────────────────────────────────────────────── */
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:90;display:grid;gap:9px;width:min(440px,calc(100vw - 32px));pointer-events:none}
body.has-tabbar .toasts{bottom:calc(var(--tabbar-h) + 18px)}
.toast{background:var(--deep);color:var(--on-deep);border-radius:9px;padding:13px 17px;font-size:14px;font-weight:500;box-shadow:0 14px 34px -14px rgba(0,0,0,.6);opacity:0;transform:translateY(10px);transition:opacity .22s,transform .22s;display:flex;gap:10px;align-items:center}
.toast.in{opacity:1;transform:none}
.toast::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:var(--accent)}
.toast-ok::before{background:#5FB98A}
.toast-err::before{background:#E8745A}

.dlg-back{position:fixed;inset:0;z-index:95;background:rgba(5,12,15,.6);display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .2s;backdrop-filter:blur(3px)}
.dlg-back.in{opacity:1}
.dlg-sheet{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;width:min(440px,100%);box-shadow:var(--shadow);display:grid;gap:14px;transform:scale(.97);transition:transform .2s}
.dlg-back.in .dlg-sheet{transform:none}
.dlg-sheet h3{font-size:21px}
.dlg-body{color:var(--ink-2);font-size:14.5px;line-height:1.55}
.dlg-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}

/* ── loading, empty, error ────────────────────────────────────────────────── */
.skel-wrap{display:grid;gap:10px}
.skel{background:linear-gradient(90deg,var(--paper-2) 25%,color-mix(in srgb,var(--paper-2) 60%,var(--card)) 50%,var(--paper-2) 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:9px}
@keyframes shimmer{to{background-position:-200% 0}}
.empty{padding:42px 24px;border:1px dashed var(--line);border-radius:var(--r-lg);text-align:center;display:grid;gap:9px;justify-items:center}
.empty-t{font:400 20px/1.2 var(--f-display);color:var(--ink)}
.empty-b{color:var(--ink-2);font-size:14px;max-width:42ch}
.empty-err{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:var(--bad-soft)}

/* ── bars and sparklines ──────────────────────────────────────────────────── */
.spark{display:flex;align-items:flex-end;gap:2px;height:46px}
.spark i{flex:1;min-width:2px;background:var(--accent);border-radius:2px 2px 0 0;opacity:.75;transition:opacity .15s}
.spark i:hover{opacity:1}
.spark i.zero{background:var(--line);opacity:1;min-height:2px}
.hbars{display:grid;gap:9px}
.hbar{display:grid;grid-template-columns:minmax(88px,26%) 1fr auto;gap:12px;align-items:center;font-size:13px}
.hbar i{display:block;height:7px;border-radius:4px;background:var(--paper-2);overflow:hidden}
.hbar i em{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .4s}
.hbar b{font:500 12.5px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.hbar span:first-child{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── misc ─────────────────────────────────────────────────────────────────── */
.stack-v{display:grid;gap:18px}
.stack-sm{display:grid;gap:10px}
.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inline-end{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.spread{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.muted{color:var(--ink-3)}
.dim{color:var(--ink-2)}
.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.divider{height:1px;background:var(--line);margin:4px 0}
.kv{display:grid;gap:11px;margin:0}
.kv>div{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.kv dt{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);flex:none}
.kv dd{margin:0;font-size:14px;font-weight:500;text-align:right;min-width:0}
.note{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:9px;padding:12px 15px;font-size:13.5px;color:var(--ink-2)}
.note b{color:var(--ink)}
.note-ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.note-bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font:500 12px/1 var(--f-body);border:1px solid var(--line);border-radius:999px;padding:6px 11px;color:var(--ink-2);background:var(--card);cursor:pointer;white-space:nowrap}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
code{font:500 12.5px/1.4 var(--f-mono);background:var(--paper-2);padding:2px 5px;border-radius:4px}
.copy{all:unset;cursor:pointer;font:500 12px/1 var(--f-mono);color:var(--ink-3);padding:3px 5px;border-radius:4px}
.copy:hover{color:var(--accent);background:var(--accent-soft)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font:600 12.5px/1 var(--f-mono);flex:none;text-transform:uppercase}
.avatar-lg{width:48px;height:48px;font-size:16px}

/* ── print ────────────────────────────────────────────────────────────────── */
@media print{
  .top,.foot,.tabbar,.drawer,.toasts,.no-print,.chat-fab{display:none!important}
  body{background:#fff}
  .panel{border-color:#ccc;break-inside:avoid}
}