/* Studio OS - the SAM design language: paper is for reading, ink is for what is live.
   Tokens mirror agency/clients/seventh-acre-media/brand/sam-tokens.css (Figma: SAM / Core).
   Source Sans 3 only; weight does the work. Sharp corners, no shadows, ruled not carded. */
:root{
  --canvas:#E9E7DE; --surface:#FFFFFF; --ink:#2E2C2B; --ink-soft:#6E6A66; --ink-faint:#95908A;
  --line:#D6D2C6; --fill:#E2E0D5; --fill-hover:#DBD7CA;
  --accent:#8A6524; --accent-ink:#F4F2EB; --wash:#EFE3C8;
  --gold:#EBBF7E; --gold-ink:#262424;
  --ink-panel:#262424; --cream:#E9E7DE; --cream-dim:rgba(233,231,222,.55); --cream-line:rgba(233,231,222,.18);
  --good:#3F6B52; --good-bg:#DCE5DA; --warn:#7A5A1E; --warn-bg:#EBE2CB; --bad:#9C4438; --bad-bg:#EADAD5;
  --radius:0; --r-btn:0; --r-pill:0;
  --shadow:none;
  --font-display:'Source Sans 3',system-ui,sans-serif;
  --font-read:'Source Sans 3',system-ui,sans-serif;
  --font:'Source Sans 3',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{margin:0;font-family:var(--font-display);letter-spacing:-.02em;font-weight:900}
.muted{color:var(--ink-soft)}
.error{color:var(--bad)}
button{font:inherit;cursor:pointer;color:inherit}
a{color:var(--accent)}

/* Login: the ink threshold. Paper card on the dark room. */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--ink-panel)}
.login-card{background:var(--canvas);border:0;border-radius:0;
  padding:44px 40px;width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px}
.login-card h1{font-size:30px}
.login-brand{align-self:flex-start;margin-bottom:2px}
.login-brand img{display:block;width:150px;height:auto}
.login-kicker{font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.login-card input{padding:12px 13px;border:1px solid var(--ink);border-radius:0;font:inherit;font-size:16px;color:var(--ink);background:var(--surface)}
.login-card input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.login-card button[type=submit]{background:var(--gold);color:var(--gold-ink);border:0;
  padding:14px;border-radius:0;font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-top:6px}

/* App shell: ink sidebar, paper sheet. */
.app{display:grid;grid-template-columns:252px 1fr;gap:0;padding:0;min-height:100vh;background:var(--canvas)}
.sidebar{background:var(--ink-panel);border:0;border-radius:0;color:var(--cream);
  display:flex;flex-direction:column;gap:6px;padding:22px 16px 16px;
  position:sticky;top:0;height:100vh}
.side-top{display:flex;align-items:center}
.nav-toggle{display:none;background:transparent;border:0;color:var(--cream);padding:6px;
  border-radius:0;cursor:pointer;line-height:0}
.nav-toggle:hover{background:rgba(233,231,222,.08)}
.brand{background:transparent;border:0;border-radius:0;padding:8px 12px 18px;margin-bottom:6px;
  display:flex;align-items:center;justify-content:flex-start;cursor:pointer;width:100%}
.brand-logo{width:100%;max-width:118px;height:auto;display:block}
.brand-tile{width:34px;height:34px;border-radius:0;background:var(--cream);color:var(--ink-panel);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:900;font-size:17px}
#nav{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-height:0;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cream-line) transparent}
#nav::-webkit-scrollbar{width:6px}
#nav::-webkit-scrollbar-thumb{background:var(--cream-line);border-radius:3px}
#nav button{text-align:left;background:transparent;border:0;padding:10px 12px;border-radius:0;
  color:var(--cream-dim);font-weight:500;font-size:14px}
#nav button:hover{background:rgba(233,231,222,.07);color:var(--cream)}
#nav button.active{background:rgba(233,231,222,.08);font-weight:700;color:var(--cream);
  box-shadow:inset 3px 0 0 var(--gold)}
.nav-sep{height:1px;background:var(--cream-line);margin:7px 10px}
/* Collapsible groups */
.nav-group{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;
  background:transparent;border:0;padding:10px 12px;border-radius:0;font:inherit;font-size:14px;
  font-weight:600;color:var(--cream-dim);cursor:pointer}
.nav-group:hover{background:rgba(233,231,222,.07);color:var(--cream)}
.nav-group.active{background:rgba(233,231,222,.08);color:var(--cream);box-shadow:inset 3px 0 0 var(--gold)}
.nav-group .caret{width:7px;height:7px;border:solid var(--cream-dim);border-width:0 1.5px 1.5px 0;
  transform:rotate(-45deg);transition:transform .15s;flex:0 0 auto;margin-left:8px}
.nav-group.open .caret{transform:rotate(45deg)}
.nav-children{display:none;flex-direction:column;gap:3px;margin:2px 0 4px 12px;padding-left:8px;
  border-left:1px solid var(--cream-line)}
.nav-children.open{display:flex}
.nav-children button{font-size:13.5px}
/* Assets & links list (compact, left aligned) */
.linklist{display:flex;flex-direction:column}
.linkrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.linkrow:last-child{border-bottom:0}
.linkrow a{font-weight:500}
.linkrow .linkval{margin-left:auto;color:var(--ink-soft)}
.linkrow .btn.sm{margin-left:auto}
.linkadd{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.linkadd .mini{flex:1;min-width:150px}
.linkadd .lk-cat{flex:0 0 130px;min-width:0}
.btn.sm{padding:6px 13px;font-size:13px}
.linkrow.linkedit{gap:8px;flex-wrap:wrap}
.linkedit .mini{flex:1;min-width:120px}
.linkedit .lk-cat{flex:0 0 120px;min-width:0}
.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding:10px 8px 2px;
  border-top:1px solid var(--cream-line)}
.sidebar .muted{color:var(--cream-dim)}
.link{background:none;border:0;color:var(--accent);text-align:left;padding:2px;font-size:13px;font-weight:600}
.sidebar .link{color:var(--gold)}

/* Content + always-on quick actions */
.main-col{min-width:0;display:flex;flex-direction:column;padding:0 44px}
@media (max-width:820px){.main-col{padding:0 16px}}
.quickbar{display:flex;gap:10px;justify-content:flex-end;align-items:center;
  padding:14px 8px 8px;margin-bottom:2px;position:sticky;top:0;z-index:15;background:var(--canvas)}
.quickbar .qa{display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow)}
.quickbar .qa svg{width:16px;height:16px}
.quickbar .qa.ghost{background:var(--surface)}
@media (max-width:820px){
  .quickbar{position:static;justify-content:stretch;padding:4px 2px 0;margin-bottom:6px}
  .quickbar .qa{flex:1;justify-content:center;padding:11px 10px}
}
.content{padding:8px 8px 60px;min-width:0}
.loading{color:var(--ink-soft)}
.view-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;
  border-bottom:2px solid var(--ink);padding-bottom:14px}
.view-head h2{font-size:34px}
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.stat{display:flex;flex-direction:column;gap:4px}
.stat .n{font-family:var(--font);font-variant-numeric:tabular-nums;font-size:32px;font-weight:900;line-height:1.05;letter-spacing:-.02em}
.stat .l{font-size:13px;color:var(--ink-soft)}

/* Tables */
table{width:100%;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px}
th{color:var(--ink-soft);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;background:var(--fill)}
tr:last-child td{border-bottom:0}

/* Pills */
.pill{display:inline-block;padding:4px 10px;border-radius:0;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em}
.pill.pending{background:var(--warn-bg);color:var(--warn)}
.pill.approved,.pill.logged,.pill.done{background:var(--good-bg);color:var(--good)}
.pill.declined,.pill.cancelled,.pill.blocked{background:var(--bad-bg);color:var(--bad)}
.pill.todo,.pill.in_progress{background:var(--fill);color:var(--ink-soft)}
.pill.neutral{background:var(--fill);color:var(--ink-soft)}
.pill.solid{background:var(--ink);color:#fff}
.pill.stage-sales{background:var(--fill);color:var(--ink-soft)}
.pill.stage-signed{background:var(--warn-bg);color:var(--warn)}
.pill.stage-tech_audit{background:var(--wash);color:var(--accent)}
.pill.stage-handover_ready{background:var(--wash);color:var(--accent)}
.pill.stage-live{background:var(--good-bg);color:var(--good)}
.pill.acc-yes{background:var(--good-bg);color:var(--good)}
.pill.acc-no{background:var(--bad-bg);color:var(--bad)}
.pill.acc-na{background:var(--fill);color:var(--ink-soft)}
.pill.sev-high{background:var(--bad-bg);color:var(--bad)}
.pill.sev-medium{background:var(--warn-bg);color:var(--warn)}
.pill.sev-low{background:var(--fill);color:var(--ink-soft)}

/* Forms + buttons */
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.field{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-soft)}
.field input,.field select{padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-btn);font:inherit;font-size:14px;color:var(--ink);background:var(--surface)}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.btn{background:var(--gold);color:var(--gold-ink);border:0;padding:11px 18px;border-radius:0;
  font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.15em}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.small{padding:7px 12px;font-size:10.5px}
.empty{color:var(--ink-soft);padding:28px;text-align:center;background:var(--surface);
  border:1px dashed var(--line);border-radius:var(--radius)}
.note{background:var(--wash);border:1px solid var(--line);border-radius:0;padding:11px 14px;
  font-size:13px;color:var(--ink-soft);margin-bottom:18px}
/* Segmented filter (e.g. leave requests: Awaiting / Resolved / All) */
.seg{display:inline-flex;background:var(--fill);border-radius:var(--r-pill);padding:3px;gap:2px}
.seg-btn{background:transparent;border:0;padding:6px 14px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;white-space:nowrap}
.seg-btn.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(20,20,20,.08)}
.req-head{align-items:center}

/* Onboarding record additions */
.sect{margin-bottom:16px}
.sect h3{margin-bottom:14px;font-size:22px}
.clickrow{cursor:pointer}
.clickrow:hover{background:var(--canvas)}
.badge{display:inline-block;padding:2px 9px;border-radius:7px;font-size:12px;font-weight:600}
.badge.good{background:var(--good-bg);color:var(--good)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.chip{display:inline-block;padding:4px 11px;border-radius:var(--r-pill);background:var(--canvas);
  border:1px solid var(--line);font-size:13px;margin:0 2px 4px 0}
.chip.sm{padding:2px 8px;font-size:11px}
.kvgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.kv{display:flex;flex-direction:column;gap:2px;padding:9px 0;border-bottom:1px solid var(--line)}
.kv .k{font-size:12px;color:var(--ink-soft)}
.kv .v{font-size:14px;word-break:break-word}
.kv .v a{color:var(--accent)}
select.mini{padding:4px 7px;border:1px solid var(--line);border-radius:7px;font-size:12px;color:var(--ink);background:var(--surface)}

/* Knowledge base */
.kb-search{width:100%;max-width:380px;padding:10px 14px;border:1px solid var(--line);
  border-radius:var(--r-pill);font:inherit;font-size:14px;margin-bottom:18px;color:var(--ink);background:var(--surface)}
.kb-search:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.kb-group{margin-bottom:22px}
.kb-group h3{margin-bottom:12px;font-size:22px}
.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.kb-card{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;cursor:pointer}
.kb-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.kb-card.static{cursor:default}
.kb-card.static:hover{border-color:var(--line);box-shadow:none}
.kb-title{font-weight:600;font-size:15px}
.kb-snip{font-size:13px;color:var(--ink-soft);line-height:1.4}
.sop-body{line-height:1.65;font-family:var(--font-read);font-size:16px}
.sop-body p{margin:0 0 10px}
.sop-body ul{margin:0 0 10px;padding-left:20px}
.sop-body li{margin:4px 0}

/* Leave: insight layer */
.insight{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:20px}
.insight-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow)}
.insight-lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-soft);font-weight:600;margin-bottom:10px}
.off-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.off-list li{display:flex;flex-direction:column;gap:1px}
.off-name{font-weight:600;font-size:14px}
.off-dates{font-size:12px;color:var(--ink-soft)}

/* Leave: balance cards (label on top, number, sub, name pill at bottom) */
.balcard{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;cursor:pointer}
.balcard:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.balcard-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:600}
.balcard-num{font-family:var(--font);font-variant-numeric:tabular-nums;font-size:38px;font-weight:900;line-height:1;letter-spacing:-.02em}
.balcard-sub{font-size:14px;color:var(--ink-soft)}
.name-pill{margin-top:10px;background:var(--wash);color:var(--accent)}
td.reason{color:var(--ink-soft);font-size:13px;max-width:220px}

/* Sales: deal cards + activity history */
.deal{margin-bottom:16px}
.deal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.deal-head h3{font-size:22px}
.deal-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.deal-quote{font-family:var(--font);font-variant-numeric:tabular-nums;font-size:19px;font-weight:700}
.pill.stage-deal{background:var(--wash);color:var(--accent)}
.deal-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin:12px 0;font-size:13px;align-items:center}
.deal-next{background:var(--fill);color:var(--ink);border-radius:var(--r-pill);padding:3px 12px;font-size:12px;font-weight:600}
.deal-next.overdue{background:var(--bad-bg);color:var(--bad)}
.acts{list-style:none;margin:12px 0 0;padding:14px 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px}
.act{display:grid;grid-template-columns:130px 1fr;gap:12px;font-size:13px}
.act-date{color:var(--ink-faint);font-size:12px;white-space:nowrap}
.act-body{color:var(--ink)}
.act-body strong{font-weight:600}

/* Client: scope, priorities, deliverables, traffic light */
.sect-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sect-head h3{margin-bottom:0}
.badge.lock,.badge{white-space:nowrap}
.scope-text{margin:0 0 8px;font-size:15px}
.scope-hint{font-size:12px;margin:0}
.prio{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.prio li{font-size:14px}
.kv.wide{margin-top:10px}
.warnbar{background:var(--bad-bg);color:var(--bad);border-radius:0;padding:11px 14px;
  font-size:13px;font-weight:600;margin-bottom:14px}
.light{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600}
.light .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.light.good{color:var(--good)}.light.good .dot{background:var(--good)}
.light.warn{color:var(--warn)}.light.warn .dot{background:var(--warn)}
.light.bad{color:var(--bad)}.light.bad .dot{background:var(--bad)}
.light.neutral{color:var(--ink-soft)}.light.neutral .dot{background:var(--ink-faint)}

/* Pods: compact card grid, ~4 across on a wide screen */
.pods-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;align-items:start}
.pod-card{padding:18px;display:flex;flex-direction:column}
.pod-card-head{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.pod-card-head h3{font-size:20px}
.pod-members{list-style:none;margin:0 0 12px;padding:0 0 12px;display:flex;flex-direction:column;gap:6px;
  border-bottom:1px solid var(--line)}
.pod-members li{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pm-name{font-weight:600;font-size:13px}
.pm-role{font-size:10px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
.pod-clients{display:flex;flex-direction:column;gap:4px}
.pc-row{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  background:transparent;border:0;padding:7px 8px;border-radius:10px;cursor:pointer;width:100%}
.pc-row:hover{background:var(--canvas)}
.pc-name{font-weight:600;font-size:13px}
.pc-meta{display:flex;align-items:center;gap:8px;font-size:12px}
.pill.tiny{padding:2px 8px;font-size:10px}

/* Calendar */
.cal-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.cal-nav{display:flex;align-items:center;gap:8px}
.cal-title{font-size:24px;margin-left:6px}
.cal-legend{display:flex;gap:14px;flex-wrap:wrap}
.cal-legend .lg{font-size:11px;color:var(--ink-soft);display:flex;align-items:center;gap:6px}
.cal-legend .lg::before{content:"";width:11px;height:11px;border-radius:3px;background:var(--k-bg);display:inline-block}
/* kind colour tokens, shared by calendar chips + legend swatches */
/* Calendar kinds are data coding: seasonal accents are sanctioned here (data-viz rule). */
.kind-leave{--k-bg:#D8E2DB;--k-fg:#3F6B52}
.kind-kickoff{--k-bg:var(--ink-panel);--k-fg:var(--cream)}
.kind-deliverable{--k-bg:var(--wash);--k-fg:var(--accent)}
.kind-event{--k-bg:var(--fill);--k-fg:var(--ink-soft)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cal-wd{background:var(--canvas);padding:8px 10px;font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint);font-weight:600}
.cal-cell{background:var(--surface);min-height:104px;padding:6px 7px;display:flex;flex-direction:column;gap:3px}
.cal-cell.out{background:var(--canvas)}
.cal-cell.today{background:var(--wash)}
.cal-dn{font-size:12px;color:var(--ink-soft);font-weight:600}
.cal-cell.today .cal-dn{color:var(--accent)}
.cal-evs{display:flex;flex-direction:column;gap:3px;min-width:0}
.cal-ev{background:var(--k-bg);color:var(--k-fg);border-radius:0;padding:2px 6px;font-size:11px;
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cal-more{font-size:10px;color:var(--ink-faint);padding:0 4px}
.cal-panels{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.cal-cell.clickable{cursor:pointer}
.cal-cell.clickable:hover{background:var(--wash)}
.cal-cell.sel{outline:2px solid var(--accent);outline-offset:-2px;background:var(--wash)}
.cal-modes{margin-left:auto}
/* Day + week detail rows */
.cal-day,.cal-week{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:6px 18px;box-shadow:var(--shadow)}
.cal-ev-row{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.cal-ev-row:last-child{border-bottom:0}
.ce-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex-shrink:0;background:var(--ink-faint)}
.cal-ev-row.kind-leave .ce-dot{background:#3F6B52}
.cal-ev-row.kind-kickoff .ce-dot{background:var(--ink)}
.cal-ev-row.kind-deliverable .ce-dot{background:var(--warn)}
.cal-ev-row.kind-event .ce-dot{background:var(--ink-faint)}
.ce-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.ce-title{font-weight:600;font-size:14px}
.ce-meta{font-size:12px;color:var(--ink-soft)}
.cal-week .cal-wk-day{padding:10px 0;border-bottom:1px solid var(--line)}
.cal-week .cal-wk-day:last-child{border-bottom:0}
.cal-wk-head{font-weight:600;font-size:13px;margin-bottom:4px}
.cal-wk-day.today .cal-wk-head{color:var(--accent)}
.cal-wk-empty{font-size:13px}
.cal-wk-day .cal-ev-row{border-bottom:0;padding:5px 0}

/* Toast (write failures + confirmations) */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);
  color:#fff;padding:11px 18px;border-radius:var(--r-pill);font-size:13px;font-weight:600;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:50;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--bad)}

/* Visible keyboard focus on interactive rows/cards */
.clickrow:focus-visible,.balcard:focus-visible,.pc-row:focus-visible,.kb-card:focus-visible{
  outline:2px solid var(--accent);outline-offset:-2px}
#nav button.active{position:relative}

/* System Map: node canvas + guided walkthrough */
.sm-wrap{margin-top:10px}
.sm-viewport{position:relative;height:calc(100vh - 250px);min-height:520px;overflow:hidden;
  background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius);cursor:grab}
.sm-viewport.grabbing{cursor:grabbing}
.sm-canvas{position:absolute;top:0;left:0;transform-origin:0 0}
.sm-edges{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.sm-edge{fill:none;stroke:var(--line);stroke-width:2}
.sm-edge.internal{stroke:var(--accent);opacity:.45}
.sm-edge.dashed{stroke-dasharray:6 6;opacity:.65}
.sm-edge.active{stroke:var(--accent);stroke-width:3;opacity:1}
.sm-elabel{position:absolute;transform:translate(-50%,-50%);background:var(--canvas);
  padding:1px 6px;font:600 11px var(--font);color:var(--ink-soft);white-space:nowrap;border-radius:6px;pointer-events:none}
.sm-elabel.active{color:var(--accent);background:var(--wash)}
.sm-node{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:0;
  padding:13px 15px;box-shadow:var(--shadow);box-sizing:border-box;transition:box-shadow .25s,opacity .25s}
.sm-node .k{font:700 10.5px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.sm-node .t{font:600 21px/1.05 var(--font-display);color:var(--ink);margin-top:5px}
.sm-node .b{font:400 12.5px/1.35 var(--font);color:var(--ink-soft);margin-top:5px}
.sm-node.handover{border-color:var(--accent)}
.sm-node.warm{border:1.5px dashed var(--accent)}
.sm-node.core{border:2px solid var(--accent);background:var(--wash)}
.sm-node.core .t{font-size:24px}
.sm-node.dim{opacity:.3}
.sm-node.active{box-shadow:0 0 0 3px var(--accent),var(--shadow)}
.sm-ctrl{position:absolute;top:14px;right:14px;display:flex;gap:8px;align-items:center;z-index:5}
.sm-btn{width:34px;height:34px;border:1px solid var(--line);background:var(--surface);border-radius:9px;
  cursor:pointer;font-size:16px;color:var(--ink);box-shadow:var(--shadow)}
.sm-btn:hover{background:var(--wash)}
#sm-fit{width:auto;padding:0 12px;font-size:13px}
.sm-tourbar{position:absolute;left:16px;right:16px;bottom:16px;background:var(--surface);border:1px solid var(--line);
  border-radius:0;box-shadow:var(--shadow);padding:14px 18px;display:flex;align-items:center;gap:16px;z-index:6}
.sm-step{flex:1;font:400 15px/1.45 var(--font);color:var(--ink)}
.sm-tnav{display:flex;align-items:center;gap:8px}
.sm-prog{font:600 12px var(--font);color:var(--ink-soft);margin-right:4px}
@media (max-width:640px){
  .sm-tourbar{flex-direction:column;align-items:stretch;gap:10px;text-align:center}
  .sm-step{text-align:center}
  .sm-tnav{justify-content:center;flex-wrap:wrap;gap:8px}
  .sm-prog{width:100%;text-align:center;margin:0 0 2px}
}

/* Client Pulse: per-client operational overview (sample data) */
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px;margin-top:16px}
.cp-card{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:16px 18px;box-shadow:var(--shadow);cursor:pointer;transition:box-shadow .2s,border-color .2s,transform .08s}
.cp-card:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(0,0,0,.09)}
.cp-card:active{transform:translateY(1px)}
.cp-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cp-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cp-name{font:800 21px var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.cp-metrics{margin-top:14px;display:flex;flex-direction:column;gap:13px}
.cp-lab{font:700 10.5px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.cp-due{display:flex;align-items:baseline;gap:9px;margin-top:2px}
.cp-due .n{font-family:var(--font);font-variant-numeric:tabular-nums;font-size:30px;font-weight:700;line-height:1;color:var(--ink)}
.cp-due .n.warn{color:var(--warn)}
.cp-due .l{font-size:12px;color:var(--ink-soft)}
.cp-bar{height:8px;border-radius:0;background:var(--fill);border:1px solid var(--line);overflow:hidden;margin-top:6px}
.cp-bar>i{display:block;height:100%;background:var(--gold);border-radius:0}
.cp-bar.behind>i{background:var(--warn)}
.cp-scopeline{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-soft);margin-top:5px}
.cp-foot{display:flex;gap:20px;margin-top:2px}
.cp-foot .s{font-size:12.5px;color:var(--ink-soft)}
.cp-foot .s b{color:var(--ink);font-weight:700}
.cp-open{margin-left:auto;color:var(--accent);font-weight:600;font-size:12.5px;white-space:nowrap}

@media (max-width:820px){
  .cal-panels{grid-template-columns:1fr}
  .cal-cell{min-height:72px}
  .pods-grid{grid-template-columns:1fr 1fr}
  .app{grid-template-columns:1fr;padding:0;gap:0}
  /* Collapsed top bar: logo + hamburger, sticky; the menu drops down on tap. */
  .sidebar{position:sticky;top:0;height:auto;flex-direction:column;gap:0;padding:10px 14px;z-index:30}
  .side-top{width:100%;justify-content:space-between}
  .brand{margin:0;padding:9px 12px;width:auto}
  .brand-logo{max-width:116px}
  .nav-toggle{display:flex}
  #nav{display:none}
  .sidebar.open #nav{display:flex;flex-direction:column;gap:2px;width:100%;margin-top:10px}
  .sidebar.open #nav button{padding:12px;font-size:15px}
  .sidebar-foot{display:none}
  .sidebar.open .sidebar-foot{display:flex;flex-direction:row;justify-content:space-between;
    align-items:center;width:100%;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
  .content{padding:2px 2px 48px}
  /* Stack the view header so the title never gets squeezed into a wrap */
  .view-head{flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:16px}
  .view-head h2{font-size:24px}
  .sect h3,.kb-group h3,.deal-head h3{font-size:19px}
  .stat .n{font-size:28px}
  .balcard-num{font-size:32px}
  .card{padding:18px}
  /* 16px form controls stop iOS from auto-zooming (and never zooming back) on focus */
  input,select,textarea,.field input,.field select,.login-card input,.kb-search,select.mini{font-size:16px}
}

/* Phones: the 7-column month grid cannot fit, so fall back to the agenda lists
   ("On leave" + "Milestones") that already render below it; wide tables scroll. */
@media (max-width:640px){
  .pods-grid{grid-template-columns:1fr}
  /* Compact visual month grid: single-letter weekdays, events as colour dots. */
  .cal-title{font-size:20px;margin-left:0}
  .cal-wd{font-size:0;padding:6px 0;text-align:center}
  .cal-wd::first-letter{font-size:11px}
  .cal-cell{min-height:52px;padding:4px 3px;gap:2px}
  .cal-dn{font-size:11px}
  .cal-evs{flex-direction:row;flex-wrap:wrap;gap:3px;align-content:flex-start}
  .cal-ev{width:7px;height:7px;min-width:7px;max-width:7px;padding:0;border-radius:50%;
    font-size:0;line-height:0;overflow:hidden}
  .cal-ev.kind-leave{background:#3F6B52}
  .cal-ev.kind-kickoff{background:var(--ink)}
  .cal-ev.kind-deliverable{background:var(--warn)}
  .cal-ev.kind-event{background:var(--ink-faint)}
  .cal-more{font-size:9px;width:100%;color:var(--ink-faint)}
  .cal-legend{gap:12px;font-size:10px;width:100%}
  /* Plain tables (no .rtable) scroll horizontally instead of overflowing. */
  table:not(.rtable){display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  /* Responsive tables reflow to stacked cards, no sideways scrolling. */
  .rtable{display:block;white-space:normal;overflow:visible;border:0;box-shadow:none;background:transparent}
  .rtable thead{display:none}
  .rtable tbody{display:block}
  .rtable tr{display:block;background:var(--surface);border:1px solid var(--line);border-radius:0;
    padding:12px 15px;margin-bottom:10px;box-shadow:var(--shadow)}
  .rtable td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    padding:5px 0;border:0;white-space:normal;font-size:14px}
  .rtable td::before{content:attr(data-label);color:var(--ink-soft);font-weight:600;font-size:11px;
    text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}
  .rtable td[data-label]{text-align:right}
  .rtable td.reason:empty,.rtable td:empty{display:none}
  .rtable td.row-actions{justify-content:flex-start;gap:8px;margin-top:6px;padding-top:8px;
    border-top:1px solid var(--line)}
  .rtable td.row-actions::before{display:none}
}

/* ===========================================================================
   Training booking + Tickets & ideas (features added 17AUG). All use existing
   tokens, symmetric padding, gap for spacing.
   =========================================================================== */

/* Calendar: training as a distinct muted-slate kind (leave keeps sage). */
.kind-training{--k-bg:#DEE2E9;--k-fg:#4E5D70}
.cal-ev-row.kind-training .ce-dot{background:#8B9DAF}
@media (max-width:640px){ .cal-ev.kind-training{background:#8B9DAF} }

/* Step headers (booking wizard) */
.step{display:flex;align-items:center;gap:9px;margin:0 0 14px}
.step-n{width:23px;height:23px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0}
.step h3{font-size:21px}

/* Trainer picker */
.tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tr-card{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;cursor:pointer}
.tr-card:hover{border-color:var(--accent)}
.tr-card.sel{border-color:var(--accent);background:var(--wash);box-shadow:var(--shadow)}
.tr-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tr-name{font-weight:600;font-size:15px}
.tr-role{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
.tr-topics{font-size:13px;color:var(--ink-soft);line-height:1.4}

/* Day strip + slot grid */
.daystrip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.day{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 14px;
  border:1px solid var(--line);border-radius:var(--r-btn);cursor:pointer;background:var(--surface);min-width:64px}
.day:hover{border-color:var(--accent)}
.day.sel{background:var(--wash);border-color:var(--accent)}
.day.off{opacity:.5;cursor:not-allowed;background:var(--canvas)}
.day .dow{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
.day .dnum{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.day .dtag{font-size:10px;color:var(--accent);font-weight:600}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;max-width:560px}
.slot{padding:11px 8px;border:1px solid var(--line);border-radius:var(--r-btn);text-align:center;
  font-size:14px;font-weight:600;background:var(--surface);cursor:pointer;font-variant-numeric:tabular-nums}
.slot:hover{border-color:var(--accent)}
.slot.sel{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.slot.booked{background:var(--canvas);color:var(--ink-faint);text-decoration:line-through;
  cursor:not-allowed;border-style:dashed}

/* Availability toggle */
.toggle{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;cursor:pointer}
.toggle .sw{width:34px;height:20px;border-radius:999px;background:var(--fill);position:relative;flex-shrink:0}
.toggle.on .sw{background:var(--accent)}
.toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:left .15s}
.toggle.on .sw::after{left:16px}
.toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* Tickets: type / priority / status pills */
.pill.type-bug{background:var(--bad-bg);color:var(--bad)}
.pill.type-idea{background:var(--wash);color:var(--accent)}
.pill.type-task{background:var(--fill);color:var(--ink-soft)}
.pill.prio-high{background:var(--bad-bg);color:var(--bad)}
.pill.prio-medium{background:var(--warn-bg);color:var(--warn)}
.pill.prio-low{background:var(--fill);color:var(--ink-soft)}
.pill.st-open{background:var(--fill);color:var(--ink-soft)}
.pill.st-triaged{background:var(--warn-bg);color:var(--warn)}
.pill.st-in_progress{background:var(--wash);color:var(--accent)}
.pill.st-done{background:var(--good-bg);color:var(--good)}
.pill.st-parked{background:var(--fill);color:var(--ink-soft)}

/* Upvote control */
.vote{display:inline-flex;flex-direction:column;align-items:center;gap:0;border:1px solid var(--line);
  border-radius:10px;padding:4px 10px;background:var(--surface);font-weight:700;font-size:14px;
  line-height:1.05;font-variant-numeric:tabular-nums;cursor:pointer}
.vote:hover{border-color:var(--accent)}
.vote.sel{border-color:var(--accent);background:var(--wash)}
.vote .arw{font-size:10px;color:var(--accent);font-weight:700}
.vote .vlbl{font-size:9px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.tk-title{font-weight:600}
.tk-cell{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Ticket detail two-column */
.detail-grid{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.commentbox{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-btn);
  font:inherit;font-size:14px;color:var(--ink);background:var(--surface);min-height:70px;resize:vertical}
.commentbox:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
@media (max-width:820px){ .detail-grid{grid-template-columns:1fr} }
@media (max-width:640px){ input[type=time]{font-size:16px} }

/* Modal (raise a ticket, and future dialogs) */
.modal-backdrop{position:fixed;inset:0;background:rgba(20,20,20,.4);display:grid;place-items:center;
  z-index:100;padding:20px}
.modal{width:100%;max-width:520px;max-height:88vh;overflow:auto}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.modal-head h3{font-size:24px}
.modal-close{background:none;border:0;font-size:26px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:0 4px}
.modal-close:hover{color:var(--ink)}

/* ===========================================================================
   Swipe: the content bank (v1 layout, sample data until the pull engine).
   Same grammar: white working surfaces on paper, square chips, gold flags.
   =========================================================================== */
.sw-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.fchip{padding:7px 14px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--ink-soft);background:transparent;cursor:pointer;font-family:inherit}
.fchip.on{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.sw-sep{width:1px;height:20px;background:var(--line)}
.sw-split{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.sw-card{background:var(--surface);border:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column}
.sw-card:hover{border-color:var(--accent)}
.sw-card.sel{outline:2px solid var(--accent);outline-offset:-2px}
.sw-thumb{position:relative;height:140px;display:flex;align-items:center;justify-content:center}
.sw-play{width:38px;height:38px;border-radius:50%;background:rgba(38,36,36,.75);color:var(--cream);
  display:flex;align-items:center;justify-content:center;font-size:13px}
.sw-play.big{width:48px;height:48px;background:rgba(233,231,222,.2);font-size:16px}
.sw-tag{position:absolute;top:8px;left:8px;font-size:9px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;background:rgba(38,36,36,.8);color:var(--cream);padding:3px 8px}
.sw-fw{position:absolute;top:8px;right:8px;font-size:9px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;background:var(--gold);color:var(--gold-ink);padding:3px 8px}
.sw-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.sw-row1{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sw-handle{font-weight:700;font-size:13.5px}
.sw-brand{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;flex-shrink:0}
.sw-b-tpf{background:#F8D254;color:#2D2E2E}
.sw-b-bambinos{background:#D8E2DB;color:#3F6B52}
.sw-b-sam{background:var(--fill);color:var(--ink-soft)}
.sw-stats{display:flex;gap:12px;font-size:12px;color:var(--ink-soft);flex-wrap:wrap}
.sw-stats b{font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.sw-meta{font-size:11.5px;color:var(--ink-faint)}
.sw-drawer{background:var(--surface);border:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:12px;
  position:sticky;top:60px}
.sw-video{background:var(--ink-panel);height:160px;display:flex;align-items:center;justify-content:center}
.sw-dhead{display:flex;align-items:center;justify-content:space-between}
.sw-dhandle{font-weight:800;font-size:16px}
.sw-dstats{display:flex;border-top:1px solid var(--ink);padding-top:10px}
.sw-dstats>div{flex:1;display:flex;flex-direction:column;gap:1px}
.sw-dstats>div+div{border-left:1px solid var(--hair, rgba(46,44,43,.16));padding-left:12px}
.sw-dstats b{font-weight:900;font-size:19px;font-variant-numeric:tabular-nums}
.sw-dstats i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.sw-cap{font-size:13px;line-height:1.5;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:10px}
.sw-trans{font-size:12.5px;line-height:1.5;color:var(--ink-soft);background:var(--canvas);padding:10px 12px;border:1px solid var(--line)}
.sw-tags{display:flex;gap:6px;flex-wrap:wrap}
.sw-dtag{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);
  padding:3px 9px;color:var(--ink-soft)}
.sw-dtag.gold{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.sw-actions{display:flex;flex-direction:column;gap:8px;margin-top:2px}
@media (max-width:1100px){.sw-split{grid-template-columns:1fr}.sw-drawer{position:static}}
@media (max-width:640px){.sw-grid{grid-template-columns:1fr 1fr}.sw-thumb{height:110px}}

/* ===========================================================================
   Maps: per-project canvas in the locked Studio Paper direction (Recall #625).
   Eggshell dot grid, white sharp nodes, dashed ink wires, ink toolbar.
   =========================================================================== */
.mp-tabs{display:flex;gap:8px;margin-bottom:14px}
.mp-viewport{position:relative;height:calc(100vh - 320px);min-height:480px;overflow:hidden;cursor:grab;touch-action:none;
  background:var(--canvas) radial-gradient(#D3CEC0 1.1px, transparent 1.1px);background-size:24px 24px;
  border:1px solid var(--line)}
.mp-viewport.grabbing{cursor:grabbing}
.mp-canvas{position:absolute;top:0;left:0;transform-origin:0 0}
.mp-wires{position:absolute;inset:0;pointer-events:none}
.mp-wires path{fill:none;stroke:var(--ink);opacity:.4;stroke-width:1.6;stroke-dasharray:5 6;stroke-linecap:round}
.mp-node{position:absolute;background:var(--surface);border:1px solid var(--line);padding:14px 16px;cursor:pointer}
.mp-node.sel{border:1.5px solid var(--ink);outline:2px solid var(--gold);outline-offset:1px}
.mp-kicker{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:7px;display:flex;align-items:center;gap:7px}
.mp-kdot{width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block}
.mp-title{font-size:15px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.mp-body{font-size:12px;color:var(--ink-soft);margin-top:5px;line-height:1.45}
.mp-chips{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.mp-chip{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;
  background:var(--gold);color:var(--gold-ink)}
.mp-chip.o{background:transparent;border:1px solid var(--ink-soft);color:var(--ink-soft)}
.mp-line{display:flex;gap:8px;margin-top:6px;align-items:baseline}
.mp-line span{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);width:44px;flex:none}
.mp-line i{font-style:normal;font-size:11px;color:var(--ink);opacity:.85}
.mp-thumb{height:88px;margin-bottom:10px;position:relative;background:linear-gradient(135deg,#4E5D70 0%,#262424 70%)}
.mp-play{position:absolute;right:10px;bottom:8px;width:26px;height:26px;border-radius:50%;background:var(--gold)}
.mp-play:after{content:'';position:absolute;left:10px;top:7px;border-left:8px solid var(--ink-panel);
  border-top:6px solid transparent;border-bottom:6px solid transparent}
.mp-wave{display:flex;gap:2.5px;align-items:center;height:18px;margin-top:4px}
.mp-wave i{width:2.5px;background:var(--accent);display:block}
.mp-toolbar{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;
  background:var(--ink-panel);color:var(--cream);padding:13px 24px;font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase}
.mp-toolbar span{cursor:pointer}
.mp-toolbar b{width:1px;height:14px;background:rgba(233,231,222,.25)}
.mp-zoom{position:absolute;right:20px;bottom:20px;display:flex;gap:10px;align-items:center;background:var(--surface);
  border:1px solid var(--line);padding:8px 14px;font-size:11px;font-weight:800;letter-spacing:.1em}
.mp-zoom button{border:0;background:transparent;font:inherit;cursor:pointer;padding:2px 6px}
@media (max-width:820px){.mp-viewport{height:60vh;min-height:380px}}
@media (max-width:640px){
  .mp-toolbar{bottom:72px;gap:10px;padding:10px 14px;font-size:9.5px}
  .mp-zoom{right:12px;bottom:16px}
}

/* Maps: list cards + node edit panel (the real editor) */
.mp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.mp-newcard{background:transparent;border:1.5px dashed var(--ink-soft);padding:22px 18px;text-align:left;
  cursor:pointer;display:flex;flex-direction:column;gap:4px;font-family:inherit;color:var(--ink)}
.mp-newcard:hover{border-color:var(--ink)}
.mp-newcard b{font-size:15px;font-weight:800}
.mp-newcard span{font-size:12.5px;color:var(--ink-soft)}
.mp-mapcard{position:relative;background:var(--surface);border:1px solid var(--line);padding:18px;cursor:pointer}
.mp-mapcard:hover{border-color:var(--accent)}
.mp-mc-title{font-weight:800;font-size:16px;letter-spacing:-.01em;padding-right:22px}
.mp-mc-meta{font-size:12px;color:var(--ink-soft);margin-top:4px}
.mp-mc-del{position:absolute;top:10px;right:10px}
.mp-edit{position:fixed;right:24px;top:120px;width:280px;background:var(--surface);border:1px solid var(--ink);
  padding:16px;display:flex;flex-direction:column;gap:10px;z-index:40}
.mp-edit-head{display:flex;align-items:center;justify-content:space-between}
.mp-f{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
.mp-f select,.mp-f textarea{font-family:inherit;font-size:16px;padding:8px 10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);letter-spacing:normal;text-transform:none;resize:vertical}
#mp-title[contenteditable]{outline:none;border-bottom:2px dashed transparent}
#mp-title[contenteditable]:focus{border-bottom-color:var(--gold)}
@media (max-width:820px){
  .mp-edit{left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:45vh;overflow:auto}
}