/* ============================================================
   track.itzgee.com — page styles
   Tokens + base lifted verbatim from itzgee.com global.css (2026-08-23).
   Control-panel idiom (.term/.metric/.kv) matches the satellites.
   New track UI is trk- prefixed. Shared header/footer come from
   https://itzgee.com/embed/* (header.css is <link>ed separately).
   ============================================================ */
:root{
  --bg:#0A0A0B; --surface:#131316; --surface-2:#1A1A1F; --border:#333333; --border-hi:#4A4A52;
  --text:#E8E8EA; --text-dim:#A0A0A0; --text-faint:#81818C;
  --ok:#3DDC84; --ok-dim:#1E5C3C; --warn:#E5A742; --down:#E5484D;
  --font-mono:'JetBrains Mono', ui-monospace,'Cascadia Code',Menlo,monospace;
  --font-sans:'IBM Plex Sans', system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fs-xs:.75rem; --fs-sm:.85rem; --fs-base:.95rem; --fs-md:1.05rem; --fs-lg:1.2rem; --fs-xl:1.6rem; --fs-2xl:2.1rem;
  --track-tight:-.01em; --track-wide:.12em; --track-wider:.18em;
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2.5rem; --space-5:4rem;
  --radius:4px; --max-w:1280px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
img,svg,video,canvas,table{max-width:100%}
html{background:var(--bg);color-scheme:dark;scroll-behavior:smooth;font-size:clamp(16px,0.9vw,19px)}
body{font-family:var(--font-mono);font-size:var(--fs-base);font-weight:400;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--border-hi);transition:border-color .15s,color .15s}
@media(hover:hover){a:hover{color:var(--ok);border-bottom-color:var(--ok-dim)}}
a:focus-visible,button:focus-visible{outline:2px solid var(--ok);outline-offset:2px;border-radius:2px}
::selection{background:var(--ok-dim);color:var(--text)}
h1,h2,h3{font-weight:700;line-height:1.3;letter-spacing:var(--track-tight)}
.wrap{max-width:var(--max-w);margin-inline:auto;padding-inline:var(--space-3)}
.eyebrow{font-size:var(--fs-xs);font-weight:400;text-transform:uppercase;letter-spacing:var(--track-wider);color:var(--text-faint)}
.eyebrow::before{content:'// ';color:var(--ok-dim)}
.led{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--text-faint);flex-shrink:0}
.led--ok{background:var(--ok);box-shadow:0 0 6px rgba(61,220,132,.6);animation:pulse 2.4s ease-in-out infinite}
.led--warn{background:var(--warn);box-shadow:0 0 6px rgba(229,167,66,.5)}
.led--down{background:var(--down);box-shadow:0 0 6px rgba(229,72,77,.5)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
/* canonical buttons (mirror of /embed/header.css .igb, kept local so a page works before header.css loads) */
.igb{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:inherit;font-size:var(--fs-sm);line-height:1.2;text-align:center;text-decoration:none;border-bottom:none;cursor:pointer;background:transparent;border:1px solid var(--ok-dim);border-radius:var(--radius);color:var(--ok);padding:.6rem 1.2rem;transition:color .15s,border-color .15s,background .15s}
@media(hover:hover){.igb:hover{background:color-mix(in srgb,var(--ok) 8%,transparent);border-color:var(--ok)}}
.igb--primary{background:var(--ok);border-color:var(--ok);color:var(--bg);font-weight:700}
@media(hover:hover){.igb--primary:hover{filter:brightness(1.08)}}
.igb--quiet{color:var(--text-dim);border-color:var(--border)}
@media(hover:hover){.igb--quiet:hover{color:var(--ok);border-color:var(--ok-dim);background:transparent}}
.igb--danger{color:var(--text-dim);border-color:var(--border)}
@media(hover:hover){.igb--danger:hover{color:var(--down);border-color:var(--down);background:none}}
.igb--sm{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;padding:.4rem .9rem}
.igb--block{width:100%}
.igb[disabled],.igb:disabled{opacity:.5;cursor:not-allowed}

/* ---- layout ---- */
.trk{padding-block:var(--space-3) var(--space-5)}
.trk-intro{padding-block:var(--space-2) var(--space-1)}
.trk-title{font-size:var(--fs-xl);margin-top:var(--space-1)}
.trk-lead{color:var(--text-dim);font-size:var(--fs-sm);margin-top:var(--space-1);max-width:62ch}
.section{margin-top:var(--space-3)}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-2)}
.sec-head .eyebrow{margin:0}

/* ---- terminal console (real itzgee .term idiom) ---- */
.term{border:1px solid var(--border);border-radius:var(--radius);background:#070708;overflow:hidden}
.term-bar{display:flex;align-items:center;gap:.4rem;padding:.5rem var(--space-2);background:var(--surface);border-bottom:1px solid var(--border)}
.term-bar .td{width:9px;height:9px;border-radius:50%;background:var(--border-hi)}
.term-bar .td--live{background:var(--ok);box-shadow:0 0 6px rgba(61,220,132,.6);animation:pulse 2.4s ease-in-out infinite}
.term-title{margin-left:var(--space-1);font-size:var(--fs-xs);color:var(--text-faint)}
.term-body{padding:var(--space-2) var(--space-3) var(--space-3);font-size:var(--fs-sm)}
.term-body .kv{display:grid;grid-template-columns:9.5rem 1fr;gap:.6rem;font-size:var(--fs-sm);padding:.18rem 0}
.term-body .kv .kk{color:var(--text-faint)}
.term-body .kv .kk::before{content:'· '}
.term-body .kv .kd{color:var(--text);word-break:break-word;font-variant-numeric:tabular-nums}
.term-body .kv .kd.on{color:var(--ok)}
.term-body .kv .kd.off{color:var(--warn)}
@media(max-width:560px){.term-body .kv{grid-template-columns:1fr;gap:.05rem}.term-body .kv .kk::before{content:''}}

/* ---- metric tiles ---- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
@media(max-width:640px){.metrics{grid-template-columns:repeat(2,1fr)}}
.metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-2) var(--space-3)}
.metric .k{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-xs);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-faint);margin-bottom:.4rem}
.metric .k .dot{width:5px;height:5px;border-radius:50%;background:var(--ok)}
.metric .v{font-size:var(--fs-xl);color:var(--text);line-height:1.1;font-variant-numeric:tabular-nums}
.metric .u{font-size:var(--fs-xs);color:var(--text-faint);margin-left:.2rem}

/* ---- start / stop controls ---- */
.trk-start{width:100%;min-height:132px;border:1px solid var(--ok);
  background:radial-gradient(ellipse 80% 140% at 50% 0%,rgba(61,220,132,.09),transparent 70%),var(--surface);
  color:var(--ok);border-radius:var(--radius);cursor:pointer;font:inherit;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;transition:background .15s}
.trk-start::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ok)}
@media(hover:hover){.trk-start:hover{background:radial-gradient(ellipse 80% 140% at 50% 0%,rgba(61,220,132,.15),transparent 70%),var(--surface-2)}}
.trk-start .big{font-size:var(--fs-2xl);font-weight:700;letter-spacing:var(--track-wide)}
.trk-start .sub{font-size:var(--fs-xs);color:var(--text-dim);text-transform:uppercase;letter-spacing:var(--track-wider)}
.trk-start[disabled]{border-color:var(--border);color:var(--text-faint);cursor:not-allowed;background:var(--surface)}
.trk-start[disabled]::before{background:var(--border)}
.trk-stop{position:relative;width:100%;min-height:64px;border:1px solid var(--down);color:var(--down);
  background:color-mix(in srgb,var(--down) 8%,transparent);border-radius:var(--radius);cursor:pointer;font:inherit;
  font-size:var(--fs-md);font-weight:700;letter-spacing:var(--track-wide);text-transform:uppercase;overflow:hidden;-webkit-user-select:none;user-select:none}
.trk-stop .fill{position:absolute;inset:0;background:color-mix(in srgb,var(--down) 32%,transparent);width:0}
.trk-stop .lbl{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:100%;gap:.5rem}
.trk-actions{display:grid;grid-template-columns:1fr auto;gap:.7rem;margin-top:var(--space-2)}

/* ---- active head ---- */
.trk-ahead{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.trk-ahead .nm{font-size:var(--fs-lg);font-weight:700}
.trk-ahead .edit{color:var(--text-faint);cursor:pointer;border:none;background:none;font:inherit}
.trk-timerrow{display:flex;align-items:baseline;gap:.6rem;margin-top:.2rem}
.trk-timer{font-size:var(--fs-2xl);font-weight:700;font-variant-numeric:tabular-nums}
.trk-since{color:var(--text-faint);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--track-wide)}

/* ---- map ---- */
.trk-map{position:relative;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#0c0c10}
.trk-map--sm{height:240px}
#map{width:100%;height:100%}
.maplibregl-ctrl-attrib{font-size:9px!important}

/* ---- recent trips table ---- */
.trk-trips{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.trk-row{display:grid;grid-template-columns:1fr auto;gap:.4rem var(--space-2);align-items:center;padding:.85rem var(--space-3);border-bottom:1px solid var(--border);color:var(--text);text-decoration:none}
.trk-row:last-child{border-bottom:none}
.trk-row:hover{background:var(--surface-2);border-bottom-color:var(--border)}
.trk-row .nm{font-weight:500}
.trk-row .dt{font-size:var(--fs-xs);color:var(--text-faint)}
.trk-row .st{text-align:right;font-variant-numeric:tabular-nums}
.trk-row .st b{color:var(--text)}
.trk-row .st span{display:block;font-size:var(--fs-xs);color:var(--text-faint)}
.trk-empty{padding:var(--space-3);text-align:center;color:var(--text-faint);font-size:var(--fs-sm);border:1px dashed var(--border);border-radius:var(--radius)}

/* ---- share sheet ---- */
.trk-sheet{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-3)}
.trk-field{display:flex;flex-direction:column;gap:.4rem}
.trk-field>label{font-size:var(--fs-xs);color:var(--text-faint);text-transform:uppercase;letter-spacing:var(--track-wide)}
.trk-hint{font-size:var(--fs-xs);color:var(--text-faint)}
.trk-input{font:inherit;font-size:var(--fs-sm);color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:.6rem .7rem}
.trk-input:focus{outline:2px solid var(--ok);outline-offset:1px;border-color:var(--ok-dim)}
.trk-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.trk-cchip{font:inherit;font-size:var(--fs-sm);color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:.45rem .8rem;cursor:pointer}
.trk-cchip.on{color:var(--ok);border-color:var(--ok-dim);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.trk-toggle{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-sm);color:var(--text-dim)}
.trk-sw{width:38px;height:22px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);position:relative;cursor:pointer;flex:none}
.trk-sw.on{background:color-mix(in srgb,var(--ok) 25%,transparent);border-color:var(--ok-dim)}
.trk-sw::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text-faint);transition:transform .15s,background .15s}
.trk-sw.on::after{transform:translateX(16px);background:var(--ok)}
.trk-linkrow{display:flex;gap:.5rem}
.trk-linkrow .trk-input{flex:1;color:var(--ok)}
.trk-qr{display:flex;gap:var(--space-2);align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-2)}
.trk-qr canvas,.trk-qr svg,.trk-qr img{width:104px;height:104px;flex:none;background:#fff;border-radius:2px;padding:6px}
.trk-expire{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);color:var(--text-dim);flex-wrap:wrap}
.trk-expire b{color:var(--text)}

/* ---- states ---- */
[data-view]{display:none}
[data-view].on{display:block}
.trk-note{font-size:var(--fs-xs);color:var(--text-faint);margin-top:var(--space-1)}

/* ============================================================
   friend live-share view (s.html) + graceful landing
   ============================================================ */
[data-fview]{display:none}
[data-fview].on{display:block}
.trk-friend{padding-block:var(--space-2) var(--space-4)}

/* top status bar */
.trk-fbar{display:flex;align-items:center;gap:.7rem;padding:.7rem var(--space-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;border-bottom:none}
.trk-fbar .trk-fbar-main{display:flex;flex-direction:column;min-width:0;flex:1}
.trk-fbar .nm{font-weight:700;font-size:var(--fs-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk-fbar .trk-fsub{font-size:var(--fs-xs);color:var(--text-faint);text-transform:uppercase;letter-spacing:var(--track-wide)}
.trk-fage{font-size:var(--fs-xs);color:var(--text-faint);font-variant-numeric:tabular-nums;white-space:nowrap}

/* the map fills the view on the friend page */
.trk-map--full{height:58vh;min-height:320px;border-radius:0}

/* live ETA bar */
.trk-eta{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);overflow:hidden}
.trk-eta-cell{background:var(--surface);padding:var(--space-2) var(--space-2);display:flex;flex-direction:column;gap:.2rem;align-items:center;text-align:center}
.trk-eta-cell .k{font-size:var(--fs-xs);color:var(--text-faint);text-transform:uppercase;letter-spacing:var(--track-wide)}
.trk-eta-cell .v{font-size:var(--fs-lg);font-weight:700;color:var(--ok);font-variant-numeric:tabular-nums;line-height:1.1}
@media(max-width:520px){.trk-eta-cell .v{font-size:var(--fs-md)}}
.trk-fnote{font-size:var(--fs-xs);color:var(--text-faint);margin-top:var(--space-2);max-width:62ch}

/* graceful landing / link-ended panel (also track.itzgee.com/ for a non-owner) */
.trk-land{border:1px solid var(--border);border-radius:var(--radius);background:radial-gradient(ellipse 90% 120% at 50% 0%,rgba(61,220,132,.05),transparent 70%),var(--surface);padding:var(--space-4) var(--space-3);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-top:var(--space-3)}
.trk-land .trk-title{font-size:var(--fs-xl)}
.trk-land .trk-lead{margin-inline:auto}
.trk-land .igb{margin-top:var(--space-1)}