/* ==========================================================================
   COMPASS — shared design system
   Instrument palette: cool neutrals, teal needle, brass north.
   System sans for reading; system mono as the "instrument" voice.
   Used by hub.html, today.html (and, as they're migrated, tasks/calendar/schedule).
   ========================================================================== */

:root{
  --bg:#eaeef2; --surface:#ffffff; --surface-2:#f4f7f9; --raise:#ffffff;
  --ink:#131a22; --muted:#525d6c; --faint:#7c8796;
  --border:#d9e0e7; --border-2:#e8edf1;
  --accent:#0d7d88; --accent-ink:#0a5b64; --accent-soft:#dceef0;
  --brass:#a9772a; --brass-soft:#f1e6d2;
  --good:#2f7d54; --warn:#a86a24; --crit:#b93b31;
  --rich:#5b6bd6; --rich-soft:#e7e9fa;
  --kayo:#0e8f84; --kayo-soft:#d8efec;
  --mia:#2f6fb0;  --mia-soft:#dde9f5;
  --emi:#c05777;  --emi-soft:#f7e2e9;
  --shadow:0 1px 2px rgba(19,26,34,.05), 0 10px 30px rgba(19,26,34,.06);
  --shadow-sm:0 1px 2px rgba(19,26,34,.06);
  --r:14px; --r-sm:10px;
  --mono:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e131a; --surface:#161d26; --surface-2:#1b232e; --raise:#1e2732;
    --ink:#e9eef4; --muted:#a3afbd; --faint:#7b8896;
    --border:#28323e; --border-2:#222b35;
    --accent:#3fb4c0; --accent-ink:#8bd6de; --accent-soft:#14313a;
    --brass:#d3a251; --brass-soft:#2e2717;
    --good:#4fae7c; --warn:#d09a4e; --crit:#e0685e;
    --rich:#8791ea; --rich-soft:#232742;
    --kayo:#3fb7ab; --kayo-soft:#123430;
    --mia:#5f9bd8;  --mia-soft:#16293c;
    --emi:#e087a3;  --emi-soft:#3a2029;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.4);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0e131a; --surface:#161d26; --surface-2:#1b232e; --raise:#1e2732;
  --ink:#e9eef4; --muted:#a3afbd; --faint:#7b8896;
  --border:#28323e; --border-2:#222b35;
  --accent:#3fb4c0; --accent-ink:#8bd6de; --accent-soft:#14313a;
  --brass:#d3a251; --brass-soft:#2e2717;
  --good:#4fae7c; --warn:#d09a4e; --crit:#e0685e;
  --rich:#8791ea; --rich-soft:#232742;
  --kayo:#3fb7ab; --kayo-soft:#123430;
  --mia:#5f9bd8;  --mia-soft:#16293c;
  --emi:#e087a3;  --emi-soft:#3a2029;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:var(--sans); background:var(--bg); color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1140px; margin:0 auto; padding:20px 22px 64px; }
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:600; }
.num{ font-variant-numeric:tabular-nums; font-family:var(--mono); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- top nav ---------- */
.nav{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(1.1) blur(8px); border-bottom:1px solid var(--border); }
.nav-in{ max-width:1140px; margin:0 auto; padding:11px 22px; display:flex; align-items:center; gap:18px; }
.brand{ display:flex; align-items:center; gap:10px; }
.rose{ width:26px; height:26px; color:var(--accent); flex:none; }
.rose .north{ fill:var(--brass); }
.brand .name{ font-size:16px; font-weight:680; letter-spacing:-.02em; }
.nav-links{ display:flex; align-items:center; gap:3px; margin-left:6px; flex-wrap:wrap; }
.nav-links a{ font-size:13.5px; font-weight:560; color:var(--muted); padding:7px 12px; border-radius:999px; }
.nav-links a:hover{ color:var(--ink); background:var(--surface-2); }
.nav-links a.active{ color:var(--ink); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border); }
.nav-spacer{ flex:1; }
.icon-btn{ font:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:7px; background:var(--surface);
  color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:7px 12px; font-size:13px; font-weight:560; }
.icon-btn:hover{ color:var(--ink); border-color:var(--faint); }
.icon-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.icon-btn svg{ width:15px; height:15px; }

/* ---------- page header ---------- */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:6px 2px 4px; }
.page-head h1{ margin:0; font-size:26px; font-weight:700; letter-spacing:-.02em; text-wrap:balance; }
.page-head .greet{ font-size:14px; color:var(--muted); margin-top:4px; }
.page-head .greet b{ color:var(--ink); font-weight:640; }
.page-head .datecoord{ text-align:right; }

/* ---------- section label ---------- */
.sec{ display:flex; align-items:baseline; gap:12px; margin:26px 2px 12px; }
.sec .line{ flex:1; height:1px; background:var(--border); }
.sec .count{ font-family:var(--mono); font-size:11px; color:var(--faint); font-weight:600; }

/* ---------- hub stations ---------- */
.stations{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.station{ position:relative; display:flex; flex-direction:column; gap:6px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r); padding:16px 16px 15px; box-shadow:var(--shadow-sm);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; min-height:120px; }
.station:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow); }
.station:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.station .kick{ display:flex; align-items:center; gap:8px; }
.dotmark{ width:9px; height:9px; border-radius:2px; background:var(--accent); flex:none; transform:rotate(45deg); }
.station h3{ margin:2px 0 0; font-size:16.5px; font-weight:640; letter-spacing:-.01em; }
.station p{ margin:0; color:var(--muted); font-size:13px; }
.station .go{ margin-top:auto; padding-top:8px; font-family:var(--mono); font-size:11px; color:var(--accent-ink);
  font-weight:600; letter-spacing:.05em; display:flex; align-items:center; gap:5px; }
.station .go .arr{ transition:transform .16s ease; }
.station:hover .go .arr{ transform:translateX(3px); }
.station.d-crm .dotmark{ background:var(--kayo);} .station.d-quote .dotmark{ background:var(--accent);}
.station.d-jf .dotmark{ background:var(--brass);} .station.d-pipe .dotmark{ background:var(--mia);}
.station.d-vps .dotmark{ background:var(--good);} .station.d-fam .dotmark{ background:var(--emi);}
.station.d-fin .dotmark{ background:var(--rich);} .station.d-school .dotmark{ background:var(--warn);}

/* ---------- today: summary strip ---------- */
.strip{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:16px 20px; box-shadow:var(--shadow-sm); }
.strip .today-date{ display:flex; flex-direction:column; gap:2px; }
.strip .today-date .d1{ font-size:22px; font-weight:680; letter-spacing:-.02em; }
.strip .stat{ display:flex; flex-direction:column; gap:1px; padding-left:20px; border-left:1px solid var(--border); }
.strip .stat .v{ font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.strip .stat .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:600; }
.strip .stat.brass .v{ color:var(--brass); }

/* ---------- today: modules ---------- */
.modules{ display:grid; grid-template-columns:1.15fr 1fr; gap:14px; margin-top:14px; align-items:start; }
.mod{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:4px 18px 14px; }
.mod-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 10px; border-bottom:1px solid var(--border-2); margin-bottom:4px; }
.mod-head h3{ margin:0; font-size:15px; font-weight:640; letter-spacing:-.01em; }
.mod-head a{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; }
.mod-head a:hover{ text-decoration:underline; }
.span-2{ grid-column:1 / -1; }

/* schedule timeline */
.tl{ display:flex; flex-direction:column; }
.tl-row{ display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--border-2); }
.tl-row:last-child{ border-bottom:none; }
.tl-time{ font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap; padding-top:1px; font-variant-numeric:tabular-nums; min-width:104px; }
.tl-time .to{ color:var(--faint); }
.tl-body .t{ font-weight:600; font-size:14.5px; }
.tl-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:12.5px; margin-top:3px; }

/* who chips */
.who{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:2px 9px 2px 7px; border-radius:999px; white-space:nowrap; }
.who .dot{ width:7px; height:7px; border-radius:50%; }
.who.rich{ background:var(--rich-soft); color:var(--rich);} .who.rich .dot{ background:var(--rich);}
.who.kayo{ background:var(--kayo-soft); color:var(--kayo);} .who.kayo .dot{ background:var(--kayo);}
.who.mia{ background:var(--mia-soft); color:var(--mia);}   .who.mia .dot{ background:var(--mia);}
.who.emi{ background:var(--emi-soft); color:var(--emi);}   .who.emi .dot{ background:var(--emi);}
.who.all{ background:var(--surface-2); color:var(--muted);} .who.all .dot{ background:var(--faint);}

/* tasks by person */
.person{ padding:11px 0; border-bottom:1px solid var(--border-2); }
.person:last-child{ border-bottom:none; }
.person-top{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.person-top .ct{ font-family:var(--mono); font-size:11px; color:var(--faint); margin-left:auto; }
.task{ display:flex; align-items:flex-start; gap:9px; padding:4px 0; color:var(--muted); font-size:13.5px; }
.task .box{ width:15px; height:15px; border:1.6px solid var(--border); border-radius:50%; margin-top:1px; flex:none; }
.task .due{ font-family:var(--mono); font-size:11px; color:var(--warn); margin-left:auto; white-space:nowrap; padding-left:8px; }
.task .due.over{ color:var(--crit); }

/* coming up */
.up-row{ display:flex; align-items:center; gap:13px; padding:11px 0; border-bottom:1px solid var(--border-2); }
.up-row:last-child{ border-bottom:none; }
.up-when{ font-family:var(--mono); font-size:11.5px; color:var(--muted); min-width:100px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.up-body{ flex:1; }
.up-body .t{ font-weight:600; font-size:14px; }
.up-span{ display:inline-block; margin-top:5px; height:5px; border-radius:3px; background:var(--brass); opacity:.85; }
.tag-multi{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; color:var(--brass); text-transform:uppercase; font-weight:700; }

/* status + empty */
.status-note{ font-size:12.5px; margin:12px 2px 0; color:var(--faint); }
.status-note.synced{ color:var(--good); font-weight:600; }
.empty{ color:var(--muted); font-size:13.5px; padding:14px 0; }

.foot{ margin-top:34px; text-align:center; color:var(--faint); font-size:12px; }
.foot .mono{ font-family:var(--mono); }

[hidden]{ display:none !important; }
html.auth-pending body{ visibility:hidden; }   /* hidden briefly while the auth gate checks your session */
@keyframes rise{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
.rise{ animation:rise .28s ease both; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

@media (max-width:720px){
  .wrap{ padding:14px 13px 48px; }
  .nav-in{ padding:10px 13px; gap:10px; }
  .modules{ grid-template-columns:1fr; }
  .page-head h1{ font-size:22px; }
  .page-head .datecoord{ text-align:left; }
  .strip .stat{ padding-left:14px; }
  .tl-time{ min-width:92px; }
}

/* ============================================================= LEGACY BRIDGE
   Lets styles.css + the tasks / calendar / schedule component CSS adopt the
   Compass palette and dark mode without a rewrite: old token names map onto the
   new ones (var() keeps them theme-aware), plus dark fixes for a few hard-coded
   per-person text colours. Loaded AFTER styles.css so these win. */
:root{
  --sans:system-ui,-apple-system,"Segoe UI","Hiragino Sans","Yu Gothic UI","Meiryo",Roboto,Helvetica,Arial,sans-serif;
  --surface-alt:var(--surface-2);
  --text:var(--ink); --text-muted:var(--muted); --text-soft:var(--faint);
  --accent-fin:var(--accent); --accent-fin-soft:var(--accent-soft);
  --accent-emi:var(--emi); --accent-emi-soft:var(--emi-soft);
  --accent-mia:var(--mia); --accent-mia-soft:var(--mia-soft);
  --accent-edu:var(--rich); --accent-edu-soft:var(--rich-soft);
  --bad:var(--crit); --bad-soft:var(--crit-soft);
  --radius:var(--r); --radius-sm:var(--r-sm); --maxw:1140px;
  --good-soft:#dceee3; --warn-soft:#f4e8d5; --crit-soft:#f7e1df;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --good-soft:#173226; --warn-soft:#332a19; --crit-soft:#3b2320; } }
:root[data-theme="dark"]{ --good-soft:#173226; --warn-soft:#332a19; --crit-soft:#3b2320; }

body{ font-size:15px; }   /* Compass sets the family; keep the pages' comfortable size */

/* dark-mode legibility for hard-coded per-person chip text in migrated pages */
[data-theme="dark"] .who.emi,[data-theme="dark"] .event.emi,[data-theme="dark"] .ev-pill.emi,[data-theme="dark"] .who-pill.emi.on,[data-theme="dark"] .chip.emi{ color:var(--emi)!important; }
[data-theme="dark"] .who.mia,[data-theme="dark"] .event.mia,[data-theme="dark"] .ev-pill.mia,[data-theme="dark"] .who-pill.mia.on,[data-theme="dark"] .chip.mia{ color:var(--mia)!important; }
[data-theme="dark"] .who.richard,[data-theme="dark"] .who.rich,[data-theme="dark"] .event.rich,[data-theme="dark"] .ev-pill.rich,[data-theme="dark"] .who-pill.rich.on{ color:var(--rich)!important; }
[data-theme="dark"] .ev-pill.multi,[data-theme="dark"] .event.multi,[data-theme="dark"] .event.shared,[data-theme="dark"] .chip.locked{ background:var(--surface-2)!important; color:var(--muted)!important; }
[data-theme="dark"] .caveat,[data-theme="dark"] .callout{ background:var(--surface-2); color:var(--ink); border-color:var(--border); }
[data-theme="dark"] .caveat{ border-left-color:var(--warn); }