/* Track My Live — shared look (colors, menu, cards). Every page that has
   moved to the new design loads this plus /assets/shell.js.
   Light by default; dark follows the phone/computer setting. */

:root{
  color-scheme:light dark;
  --bg:#f4f4f0; --surface:#ffffff; --surface-2:#f0f0eb; --line:rgba(20,20,15,.09); --line-2:rgba(20,20,15,.16);
  --ink:#1a1a18; --ink-2:#55554f; --ink-3:#83837c;
  --accent:#1D9E75; --accent-ink:#13805d; --accent-soft:rgba(29,158,117,.12);
  --warn:#a86500; --warn-soft:rgba(214,138,20,.14); --crit:#c63b32; --crit-soft:rgba(198,59,50,.11);
  --bar:#1D9E75; --bar-dim:rgba(29,158,117,.35);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 1px 0 rgba(0,0,0,.02);
  --side-w:236px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e0e0c; --surface:#181816; --surface-2:#22221f; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --ink:#f3f2ee; --ink-2:#b4b3ad; --ink-3:#85847e;
  --accent:#22b385; --accent-ink:#3ccb9b; --accent-soft:rgba(34,179,133,.16);
  --warn:#e8a542; --warn-soft:rgba(232,165,66,.14); --crit:#ef6a5f; --crit-soft:rgba(239,106,95,.14);
  --bar:#22b385; --bar-dim:rgba(34,179,133,.35); --shadow:none;
}}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{font-family:'DM Sans',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--accent-ink)}
.hidden{display:none!important}
button{font-family:inherit}

/* ───────── Menu (drawn by shell.js) ───────── */
.tml-side{position:fixed;top:0;left:0;bottom:0;width:var(--side-w);background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 12px 14px;overflow-y:auto;z-index:30}
.tml-logo{display:flex;align-items:center;gap:10px;padding:2px 8px 16px;text-decoration:none;color:var(--ink)}
.tml-mark{width:32px;height:32px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:#fff;font-weight:800;font-size:12.5px;letter-spacing:-.5px;flex:none}
.tml-logo b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.2px}
.tml-logo small{display:block;font-size:11px;color:var(--ink-3);font-weight:500}
.tml-grp{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:14px 10px 6px}
.tml-nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--ink-2);font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tml-nav:hover{background:var(--surface-2);color:var(--ink)}
.tml-nav.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
.tml-nav svg{width:18px;height:18px;flex:none}
.tml-nav .tml-badge{margin-left:auto}
.tml-badge{background:var(--crit);color:#fff;font-size:10.5px;font-weight:700;border-radius:20px;padding:0 7px;line-height:17px;min-width:18px;text-align:center}
.tml-foot{margin-top:auto;padding:14px 8px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}
.tml-who{min-width:0;flex:1}
.tml-who b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tml-who span{display:block;color:var(--ink-3);font-size:11.5px}
.tml-avatar{width:30px;height:30px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-weight:700;font-size:12px;color:var(--ink-2);flex:none}
.tml-out{border:1px solid var(--line);background:none;color:var(--ink-2);border-radius:8px;padding:6px 10px;font-size:12px;cursor:pointer}
.tml-top{display:none}
.tml-tabs{display:none}
.tml-sheet-bg{display:none}
body.tml-shelled .tml-main{margin-left:var(--side-w)}
.tml-content{padding:28px 32px 48px;max-width:1180px;margin:0 auto}
body.tml-wide .tml-content{max-width:none}
.tml-focus-btn{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:none;color:var(--ink-2);border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer}
.tml-focus-btn svg{width:15px;height:15px}
.tml-focus-btn.side{margin:12px 8px 0;justify-content:center}
.tml-exit-focus{display:none;position:fixed;top:max(10px,env(safe-area-inset-top));right:12px;z-index:50;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);border-radius:20px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;box-shadow:var(--shadow)}
.tml-exit-focus svg{width:14px;height:14px}
body.tml-focus .tml-side,body.tml-focus .tml-top,body.tml-focus .tml-tabs{display:none}
body.tml-focus.tml-shelled .tml-main{margin-left:0}
body.tml-focus .tml-exit-focus{display:flex}

@media (max-width:899px){
  .tml-side{display:none}
  body.tml-shelled .tml-main{margin-left:0}
  .tml-top{display:flex;align-items:center;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) 16px 10px;position:sticky;top:0;background:var(--bg);z-index:20}
  .tml-top .tml-logo{padding:0}
  .tml-content{padding:6px 16px calc(96px + env(safe-area-inset-bottom))}
  body.tml-focus .tml-content{padding-bottom:24px}
  /* no top bar (signed out, pages without the menu, Focus mode): keep clear of the iPhone status bar */
  body:not(.tml-shelled) .tml-content,body.tml-focus .tml-content{padding-top:max(16px,env(safe-area-inset-top))}
  .tml-tabs{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:7px max(4px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));z-index:30}
  .tml-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--ink-3);text-decoration:none;background:none;border:0;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;min-width:0}
  .tml-tab span.l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tml-tab svg{width:22px;height:22px}
  .tml-tab.on{color:var(--accent-ink)}
  .tml-tab .tml-badge{position:absolute;top:-3px;left:calc(50% + 5px);font-size:9.5px;padding:0 5px;line-height:15px;min-width:15px}
  .tml-sheet-bg.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:40}
  .tml-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-radius:20px 20px 0 0;padding:10px 14px calc(24px + env(safe-area-inset-bottom));max-height:82%;overflow-y:auto}
  .tml-grab{width:40px;height:5px;border-radius:5px;background:var(--line-2);margin:0 auto 4px}
}

/* ───────── Shared pieces ───────── */
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.hello h1{font-size:26px;font-weight:800;letter-spacing:-.5px}
.hello p{color:var(--ink-3);font-size:13.5px;margin-top:2px}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow);min-width:0}
.card h3{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card h3 a{font-size:12px;letter-spacing:0;text-transform:none;color:var(--accent-ink);text-decoration:none;font-weight:600;white-space:nowrap}
.btn{border:0;background:var(--accent);color:#fff;font-weight:700;font-size:13px;border-radius:30px;padding:8px 16px;cursor:pointer;text-decoration:none;display:inline-block}
.btn.lg{padding:12px 22px;font-size:14px;white-space:nowrap;flex:none}
.btn.out{background:var(--warn-soft);color:var(--warn)}
.btn.ghost{background:var(--surface-2);color:var(--ink)}
.btn:disabled{opacity:.55;cursor:default}
.chip{font-size:11px;font-weight:700;border-radius:20px;padding:3px 9px;white-space:nowrap;display:inline-block}
.chip.g{background:var(--accent-soft);color:var(--accent-ink)}
.chip.w{background:var(--warn-soft);color:var(--warn)}
.chip.c{background:var(--crit-soft);color:var(--crit)}
.chip.n{background:var(--surface-2);color:var(--ink-2)}
.row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0;padding-top:2px}
.row .grow{flex:1;min-width:0}
.row .t{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .s{font-size:12px;color:var(--ink-3)}
.n{font-weight:700;font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.empty{font-size:13px;color:var(--ink-3);padding:6px 0}
.fail{font-size:13px;color:var(--crit);padding:6px 0;cursor:pointer}
.sw{width:40px;height:23px;border-radius:23px;background:var(--surface-2);border:1px solid var(--line-2);position:relative;cursor:pointer;display:inline-block;flex:none;transition:background .15s;padding:0}
.sw.on{background:var(--accent);border-color:var(--accent)}
.sw i{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.sw.on i{left:19px}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;animation:tmlspin .7s linear infinite;vertical-align:middle}
@keyframes tmlspin{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:calc(90px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:30px;font-size:14px;font-weight:600;z-index:99;max-width:88vw;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.toast.r{background:var(--crit);color:#fff}
.vstamp{text-align:center;font-size:10.5px;color:var(--ink-3);margin-top:26px;opacity:.75}

@media (max-width:899px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid>*{grid-column:span 2}
  .grid>.half{grid-column:span 1}
  .hello{margin-bottom:14px}
  .hello h1{font-size:22px}
  .card{padding:15px 16px;border-radius:14px}
}

/* While a saved login is being checked, don't flash the sign-in box (shell.js adds and removes this) */
body.tml-booting .login-wrap{visibility:hidden}

/* Smooth page changes: the menu stays put and the page content cross-fades (Safari 18.2+, Chrome 126+) */
@view-transition{navigation:auto}
.tml-side{view-transition-name:tml-side}
.tml-top{view-transition-name:tml-top}
.tml-tabs{view-transition-name:tml-tabs}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}