/* app.css: the V2 staff app. V1's layout (the two-row bar, the board, .kcard tiles, the 980 px card, the two-pane
   Send dialog) in the "Daylight" palette Krystian picked on 12 Oct, with a quiet premium pass: one type scale, an
   8 px rhythm, one radius family, soft depth, designed states.

   COLOUR RULE: every colour comes from the tokens in :root. Components never write a hex or rgb value; washes and
   tints are mixed from the base tokens with color-mix(), so a new palette is one block. The only colours outside
   this file are the customers' emails themselves (content, rendered in a sandboxed frame). tools/shoot.py fails if a
   colour literal appears outside :root.
   NEVER pair the action yellow with a dark or navy surface (Krystian). There is no dark bar anywhere. */

/* ============================================================================================ TOKENS */
:root{
  /* --- Daylight: the base palette (change these to restyle the app) --- */
  --bg:#f7f6f1;            /* the page, warm off-white */
  --surface:#ffffff;       /* cards, dialogs, the top bar */
  --surface-2:#fbfaf6;     /* pinned footers */
  --surface-3:#f3f1ea;     /* thumbnail wells, inputs at rest */
  --preview-bg:#f1efe8;    /* behind the email preview */
  --col:#efede6;           /* a board column */
  --col-win:#e8f4eb;       /* the Won column */
  --line:#ece8dc;          /* hairlines */
  --line-strong:#e0dbcc;   /* a hairline that needs to be seen */
  --ink:#2a2f36;           /* text */
  --ink-2:#6b7280;         /* dim text */
  --ink-3:#9ca3af;         /* muted text, never for anything you must read */
  --grey:#8a8f98;          /* the neutral wells and quiet chips are mixed from */
  --shadow:#2a2f36;        /* shadows are tinted from the ink, never black */
  --accent:#ffc23d;        /* sunshine: the one action, your move, the next-step rail */
  --accent-hover:#f2b12a;
  --accent-press:#e3a21c;
  --on-accent:#3b2a00;     /* text on sunshine */
  --accent-wash:#fff3c4;   /* pills, washes, the active tab */
  --accent-ink:#5a4300;    /* text on the wash */
  --accent-text:#8a6400;   /* sunshine-family text on white (brand, small accents) */
  --win:#3a9b62;           /* wins: rails, done ticks */
  --win-wash:#ddf3e4;
  --win-ink:#1e6b3c;
  --them:#7a9fe0;          /* their move: a soft blue */
  --them-wash:#e9f0fc;
  --them-ink:#2f528f;
  --red:#e5484d;           /* a reply waiting, overdue, lost */
  --red-wash:#fdeceb;
  --red-ink:#a8262b;
  --link:#2f6fd6;          /* links */
  --draft:#5b5fc7;         /* drafts and three-phase */
  --draft-wash:#eeeefb;
  --teal:#2a9d8f;          /* a photo pack in */
  --teal-wash:#e2f3f0;
  --teal-ink:#1d6b62;
  --scrim:#2a2f36;         /* behind dialogs (at 24%) */
  --chart:#4a74c9;         /* one-series bars and meters (validated: contrast and CVD, on white and on --bg) */
  --spark-1:#ffc23d; --spark-2:#ffd978; --spark-3:#ffe9a8; --spark-4:#7fd19b; --spark-5:#ddf3e4;
  /* the email designs' own colours, for the Design thumbnails only (they draw the emails, not the app) */
  --mail-navy:#16263c; --mail-paper:#fffdf8; --mail-line:#9a9590; --mail-frame:#e8e2d4; --mail-sky:#e9edf3;
  --mail-soft:#f2f2f5; --mail-band:#1d3557; --mail-band-sub:#9fb1cf; --mail-band-kicker:#ffc94d; --mail-cta:#0a84ff;
  --mail-c-frame:#e3e8ef; --mail-c-foot:#f6f8fb; --mail-rule:#c7c7cc; --mail-gold:#f0a500; --mail-amber:#d4920a; --mail-white:#ffffff;

  /* --- derived: mixed from the base, never edited by hand --- */
  --well:color-mix(in srgb,var(--grey) 8%,transparent);
  --well-2:color-mix(in srgb,var(--grey) 13%,transparent);
  --hover:color-mix(in srgb,var(--grey) 10%,transparent);
  --press:color-mix(in srgb,var(--grey) 18%,transparent);
  --ring:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent),0 0 0 1px var(--accent-hover);
  --ring-link:0 0 0 3px color-mix(in srgb,var(--link) 28%,transparent);
  --sh-1:0 1px 1px color-mix(in srgb,var(--shadow) 4%,transparent),0 2px 6px color-mix(in srgb,var(--shadow) 4%,transparent);
  --sh-2:0 1px 2px color-mix(in srgb,var(--shadow) 5%,transparent),0 8px 20px color-mix(in srgb,var(--shadow) 8%,transparent);
  --sh-3:0 4px 12px color-mix(in srgb,var(--shadow) 8%,transparent),0 24px 56px color-mix(in srgb,var(--shadow) 16%,transparent);
  --sh-btn:0 1px 2px color-mix(in srgb,var(--accent-press) 40%,transparent);

  /* --- type: one scale, two weights --- */
  --fs-1:12px; --fs-2:13px; --fs-3:14px; --fs-4:16px; --fs-5:20px; --fs-6:24px;
  --fw-1:400; --fw-2:600;
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'SF Mono',ui-monospace,Menlo,monospace;
  /* --- space (8 px rhythm, 4 px half steps), radius, motion --- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --r-card:14px; --r-ctl:10px; --r-dialog:20px; --r-pill:999px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --t-1:150ms; --t-2:220ms;
  --topbar-row1-h:56px; --topbar-h:104px;
}

/* ============================================================================================ BASE */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--fs-3);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:var(--fw-1);font-size:var(--fs-3);line-height:1.5;min-height:100vh;overflow-x:hidden}
/* the morning glow: very subtle */
body::before{content:'';position:fixed;inset:0 0 auto 0;height:360px;pointer-events:none;z-index:0;
  background:radial-gradient(900px 300px at 16% -90px,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%)}
button,input,select,textarea{font:inherit;color:inherit}
b,strong{font-weight:var(--fw-2)}
h1,h2,h3{font-weight:var(--fw-2);letter-spacing:-.015em;line-height:1.25}
.mono{font-family:var(--mono)}
[hidden]{display:none!important}
:focus{outline:none}
:focus-visible{box-shadow:var(--ring);border-radius:var(--r-ctl)}
.ic{width:16px;height:16px;flex:0 0 auto;display:inline-block;vertical-align:-3px}
.ic.sm{width:14px;height:14px;vertical-align:-2px}
.ic.lg{width:20px;height:20px}
.lbl-caps{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.muted{color:var(--ink-3)}
.dim{color:var(--ink-2)}
/* skeletons: the shape of what is coming, while it comes */
.skel{background:var(--well-2);border-radius:var(--r-ctl);animation:skel 1.2s ease-in-out infinite}
.skel.line{height:12px;margin:8px 0}
.skel.line.w60{width:60%}.skel.line.w40{width:40%}.skel.line.w80{width:80%}
.skel.tile{height:112px;border-radius:var(--r-card);margin-bottom:var(--s-2)}
.skel.block{height:220px;border-radius:var(--r-card)}
@keyframes skel{0%,100%{opacity:1}50%{opacity:.45}}

/* ============================================================================================ TOP BAR (white, two rows) */
.top-bar{position:sticky;top:0;z-index:50;display:flex;flex-direction:column;height:var(--topbar-h);
  background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid var(--line)}
.top-row{display:flex;align-items:center;gap:var(--s-3);flex-wrap:nowrap;min-width:0;padding:0 var(--s-5)}
#top-bar-main{flex:0 0 var(--topbar-row1-h)}
#top-bar-utility{flex:1 1 auto;gap:var(--s-2);border-top:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-4);font-weight:var(--fw-2);letter-spacing:-.02em;color:var(--ink);white-space:nowrap;flex:0 0 auto;text-decoration:none}
.brand .txt span{color:var(--accent-text)}
.brand .v{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--on-accent);background:var(--accent);border-radius:var(--r-pill);padding:0 7px;line-height:18px}
.sun{color:var(--accent)}
.brand .sun{width:22px;height:22px;flex:0 0 auto;transition:transform 600ms var(--ease)}
.brand:hover .sun{transform:rotate(90deg)}
.nav{display:flex;gap:2px;background:var(--well);border-radius:12px;padding:4px;margin-left:var(--s-2);flex-wrap:nowrap;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav button{background:none;border:0;color:var(--ink-2);font-size:var(--fs-3);font-weight:var(--fw-2);letter-spacing:-.01em;padding:6px 14px;border-radius:var(--r-ctl);cursor:pointer;transition:color var(--t-1) var(--ease),background var(--t-1) var(--ease);flex:0 0 auto;white-space:nowrap;position:relative;display:inline-flex;align-items:center;gap:6px}
.nav button:hover{color:var(--ink);background:var(--hover)}
.nav button:active{background:var(--press)}
.nav button.active{color:var(--accent-ink);background:var(--accent-wash)}
.b{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-size:var(--fs-1);font-weight:var(--fw-2);line-height:1}
.soon{font-size:var(--fs-1);font-weight:var(--fw-1);color:var(--ink-3)}
/* phones: the tabs collapse into one menu (the current tab, then a sheet with every tab) */
.nav-menu{display:none;align-items:center;gap:var(--s-2);background:var(--accent-wash);color:var(--accent-ink);border:0;border-radius:var(--r-ctl);padding:8px 12px;font-size:var(--fs-3);font-weight:var(--fw-2);cursor:pointer;min-width:0}
.nav-menu .cur{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-menu .ic{transition:transform var(--t-2) var(--ease)}
.nav-menu[aria-expanded="true"] .ic{transform:rotate(180deg)}
.nav-sheet{position:fixed;left:var(--s-2);right:var(--s-2);top:calc(var(--topbar-row1-h) - 4px);z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-3);padding:var(--s-1);animation:pop var(--t-2) var(--ease);transform-origin:top left}
.nav-sheet button{display:flex;align-items:center;gap:var(--s-3);width:100%;border:0;background:none;padding:12px 16px;border-radius:var(--r-ctl);font-size:var(--fs-4);font-weight:var(--fw-2);color:var(--ink);text-align:left;cursor:pointer}
.nav-sheet button:hover{background:var(--hover)}
.nav-sheet button.active{background:var(--accent-wash);color:var(--accent-ink)}
.nav-sheet button .b,.nav-sheet button .soon{margin-left:auto}
.bar-right{margin-left:auto;display:flex;align-items:center;gap:var(--s-2);flex:0 0 auto;white-space:nowrap}
/* the bell and the install button (notify.js) */
.bell{position:relative;width:36px;height:36px;border-radius:50%;border:0;background:none;color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--t-1),color var(--t-1)}
.bell:hover{background:var(--hover);color:var(--ink)}
.bell[aria-expanded="true"]{background:var(--press);color:var(--ink)}
.bell .b{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:var(--fw-2);display:flex;align-items:center;justify-content:center;border:2px solid var(--surface)}
.bell.urgent .b{background:var(--red);color:var(--surface)}
.bell.urgent{color:var(--red-ink)}
.install-btn{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:var(--fs-1);font-weight:var(--fw-2);padding:4px 12px;border-radius:var(--r-pill);cursor:pointer}
.install-btn:hover{background:var(--surface-2)}
.ntf{position:fixed;top:calc(var(--topbar-row1-h) - 2px);right:var(--s-4);z-index:90;width:400px;max-width:calc(100vw - 2 * var(--s-4));max-height:min(640px,calc(100vh - 120px));display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-3);animation:pop var(--t-2) var(--ease);transform-origin:top right;overflow:hidden}
.ntf[hidden]{display:none}
.ntf-h{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-3) var(--s-2) var(--s-4);border-bottom:1px solid var(--line)}
.ntf-h b{font-size:var(--fs-4);margin-right:auto}
.ntf-h .close{border:0;background:none;color:var(--ink-2);width:30px;height:30px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ntf-h .close:hover{background:var(--hover)}
.ntf-push{display:flex;align-items:center;gap:var(--s-2);margin:var(--s-2) var(--s-3) 0;padding:var(--s-2) var(--s-3);border-radius:var(--r-ctl);background:var(--surface-3);font-size:var(--fs-2);color:var(--ink-2)}
.ntf-push span{flex:1;min-width:0}
.ntf-push.on{background:var(--win-wash);color:var(--win-ink)}
.ntf-list{overflow-y:auto;padding:var(--s-2) var(--s-2) var(--s-3)}
.ntf-k{font-size:var(--fs-1);font-weight:var(--fw-2);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);padding:var(--s-2) var(--s-2) 4px}
.ntf-k.urgent{color:var(--red-ink)}
.ntf-k span{background:var(--red-wash);border-radius:var(--r-pill);padding:0 6px;margin-left:4px}
.ntf-i{display:flex;gap:var(--s-2);align-items:flex-start;width:100%;text-align:left;border:0;background:none;padding:var(--s-2);border-radius:var(--r-ctl);cursor:pointer;color:var(--ink);font:inherit}
.ntf-i:hover{background:var(--hover)}
.ntf-i .ic-w{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--well);color:var(--ink-2)}
.ntf-i .t{flex:1;min-width:0;font-size:var(--fs-2);line-height:1.4}
.ntf-i .t b{display:block;font-size:var(--fs-3)}
.ntf-i .t small{display:block;color:var(--ink-2);font-size:var(--fs-2)}
.ntf-i .t small.m{font-size:var(--fs-1);margin-top:2px}
.ntf-i .u{display:inline-block;font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--red-ink);background:var(--surface);border-radius:var(--r-pill);padding:0 8px;margin-bottom:2px}
.ntf-i.urgent{background:var(--red-wash);box-shadow:inset 3px 0 0 var(--red);margin-bottom:4px}
.ntf-i.urgent .ic-w{background:var(--surface);color:var(--red-ink)}
.ntf-i.read{opacity:.7}
.ntf-i .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-hover);flex:none;margin-top:8px}
.ntf-i.urgent .dot{background:var(--red)}
@media (max-width:720px){
  .ntf{left:0;right:0;top:var(--topbar-row1-h);width:auto;max-width:none;max-height:calc(100vh - var(--topbar-row1-h));border-radius:0 0 var(--r-card) var(--r-card)}
  .install-btn{display:none}
}
.demo-pill{display:inline-flex;align-items:center;gap:6px;background:var(--accent-wash);color:var(--accent-ink);font-size:var(--fs-1);font-weight:var(--fw-2);padding:4px 12px;border-radius:var(--r-pill);border:0;cursor:pointer;transition:background var(--t-1) var(--ease)}
.demo-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent-hover)}
.demo-pill:hover{background:color-mix(in srgb,var(--accent) 40%,var(--surface))}
.demo-pill[aria-expanded="true"]{background:var(--accent);color:var(--on-accent)}
.bar-user{margin-left:auto;display:flex;align-items:center;gap:var(--s-3);flex:0 0 auto;white-space:nowrap}
.user-chip{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--ink-2);font-size:var(--fs-2)}
.user-chip .role{font-size:var(--fs-1);color:var(--accent-text);font-weight:var(--fw-2)}
.logout-link{background:none;border:0;color:var(--ink-2);font-size:var(--fs-2);cursor:pointer}
.logout-link:hover{color:var(--ink)}
/* Find anyone */
.gfind{position:relative;flex:1 1 340px;min-width:0;max-width:460px}
.gfind .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.gfind input{border:1px solid var(--line);background:var(--surface-3);color:var(--ink);border-radius:var(--r-ctl);padding:6px 12px 6px 34px;font-size:var(--fs-2);width:100%;transition:background var(--t-1),border-color var(--t-1),box-shadow var(--t-1)}
.gfind input:focus{background:var(--surface);border-color:var(--accent-hover);box-shadow:var(--ring)}
.gfind input::placeholder{color:var(--ink-3)}
.gfind-drop{position:absolute;top:calc(100% + 6px);left:0;width:360px;max-width:92vw;max-height:400px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-3);z-index:60;padding:var(--s-1)}
.gf-row{display:block;width:100%;text-align:left;border:0;border-radius:var(--r-ctl);background:var(--surface);padding:8px 12px;cursor:pointer;font-size:var(--fs-3);color:var(--ink)}
.gf-row:hover,.gf-row:focus-visible{background:var(--accent-wash);box-shadow:none}
.gf-row small{display:block;color:var(--ink-2);font-size:var(--fs-1)}
.gf-none{padding:12px;font-size:var(--fs-2);color:var(--ink-2)}
/* the streak (shown when the brain sends one) */
.streak{display:inline-flex;align-items:center;gap:6px;background:var(--accent-wash);color:var(--accent-ink);border-radius:var(--r-pill);padding:4px 12px 4px 8px;font-size:var(--fs-1);font-weight:var(--fw-2);white-space:nowrap}
.streak .ic{color:var(--accent-text)}
.streak.bump{animation:bump 400ms var(--ease)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ============================================================================================ PAGES */
main{position:relative;z-index:1}
.wrap{max-width:1480px;margin:0 auto;padding:var(--s-5) var(--s-5) 88px}
.page{display:none}
.page.active{display:block;animation:fadein var(--t-2) var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-end;gap:var(--s-4);flex-wrap:wrap;margin:0 0 var(--s-5)}
.page-head h1{font-size:var(--fs-6);letter-spacing:-.025em}
.page-head .sub{font-size:var(--fs-3);color:var(--ink-2);margin-top:2px}
.page-head .right{margin-left:auto;display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}

/* the program switcher: V1's builder tabs, at page level */
.progs{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-4);flex-wrap:wrap}
.seg{position:relative;display:inline-flex;background:var(--well);border-radius:12px;padding:4px;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg .ind{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:var(--r-ctl);background:var(--surface);box-shadow:var(--sh-1);transition:left var(--t-2) var(--ease),width var(--t-2) var(--ease);pointer-events:none}
.seg .ind.still{transition:none}
.seg button{position:relative;z-index:1;border:0;background:none;color:var(--ink-2);font-size:var(--fs-3);font-weight:var(--fw-2);padding:6px 14px;border-radius:var(--r-ctl);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:color var(--t-1) var(--ease)}
.seg button:hover,.seg button.on{color:var(--ink)}
.seg button .tag{font-size:var(--fs-1);font-weight:var(--fw-1);color:var(--ink-3)}
.seg.small button{font-size:var(--fs-2);padding:4px 12px}
.progs .prog-note{font-size:var(--fs-2);color:var(--ink-2)}

/* the stat strip (V1) */
.strip{display:flex;gap:var(--s-5);align-items:baseline;padding:0 0 var(--s-4);flex-wrap:wrap}
.strip .kpi{font-size:var(--fs-2);color:var(--ink-2)}
.strip .kpi b{font-size:var(--fs-6);letter-spacing:-.03em;margin-right:6px;display:inline-block;color:var(--ink)}
.legend-lite{margin-left:auto;display:flex;gap:var(--s-4);font-size:var(--fs-1);color:var(--ink-2);align-self:center;flex-wrap:wrap}
.legend-lite i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--line-strong)}
.legend-lite .lg-you i{background:var(--accent)}.legend-lite .lg-red i{background:var(--red)}.legend-lite .lg-them i{background:var(--them)}.legend-lite .lg-won i{background:var(--win)}

/* the tool row: find or add (V1 .sc-intake), then the board's own filter and sort */
.toolrow{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-5);flex-wrap:wrap}
.sc-intake{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;background:var(--surface);flex:1 1 560px;border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);box-shadow:var(--sh-1)}
.sc-intake label{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.input,.sc-intake input{border:1px solid var(--line);border-radius:var(--r-ctl);padding:7px 12px;font-size:var(--fs-3);background:var(--surface);color:var(--ink);flex:1 1 220px;min-width:0;transition:border-color var(--t-1),box-shadow var(--t-1)}
.input:focus,.sc-intake input:focus{border-color:var(--accent-hover);box-shadow:var(--ring)}
.filters{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.chip-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:var(--r-pill);font-size:var(--fs-2);font-weight:var(--fw-2);padding:5px 12px;cursor:pointer;white-space:nowrap;transition:background var(--t-1) var(--ease),color var(--t-1) var(--ease),border-color var(--t-1) var(--ease)}
.chip-btn:hover{background:var(--hover);color:var(--ink)}
.chip-btn:active{background:var(--press)}
.chip-btn.on{background:var(--accent-wash);border-color:transparent;color:var(--accent-ink)}
.chip-btn.ghost{border-style:dashed;color:var(--ink-2)}
select.chip-btn{padding-right:28px;appearance:none;-webkit-appearance:none;background-image:none}
.select-wrap{position:relative;display:inline-flex}
.select-wrap .ic{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink-3)}
.offboard{margin:0 0 var(--s-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-1) var(--s-4);box-shadow:var(--sh-1);animation:fadein var(--t-2) var(--ease)}
.offboard-row{display:flex;align-items:center;gap:var(--s-3);padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--fs-3)}
.offboard-row:last-child{border-bottom:0}
.offboard-row b{flex:1}
.offboard-row .n{font-size:var(--fs-1);font-weight:var(--fw-2);background:var(--well-2);border-radius:var(--r-pill);padding:1px 10px}
.offboard-row .soon{font-size:var(--fs-2);color:var(--ink-2)}

/* ============================================================================================ BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:var(--r-ctl);font-size:var(--fs-3);font-weight:var(--fw-2);padding:7px 14px;cursor:pointer;background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);transition:background var(--t-1) var(--ease),border-color var(--t-1) var(--ease),transform var(--t-1) var(--ease),box-shadow var(--t-1) var(--ease);white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--surface-3)}
.btn:active{transform:scale(.98);background:var(--well-2)}
.btn.primary{background:var(--accent);border-color:transparent;color:var(--on-accent);box-shadow:var(--sh-btn)}
.btn.primary:hover{background:var(--accent-hover)}
.btn.primary:active{background:var(--accent-press)}
.btn.win{background:var(--win-wash);border-color:transparent;color:var(--win-ink);box-shadow:none}
.btn.danger{background:var(--red-wash);border-color:transparent;color:var(--red-ink);box-shadow:none}
.btn.quiet{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)}
.btn.quiet:hover{background:var(--hover);color:var(--ink)}
.btn.small{font-size:var(--fs-2);padding:4px 10px}
.btn[disabled],.btn.is-off{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn[disabled]:active{transform:none}
.btn-s{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:var(--on-accent);border:0;border-radius:var(--r-ctl);font-size:var(--fs-2);font-weight:var(--fw-2);padding:4px 12px;cursor:pointer;box-shadow:var(--sh-btn);transition:background var(--t-1) var(--ease),transform var(--t-1) var(--ease)}
.btn-s:hover{background:var(--accent-hover)}
.btn-s:active{transform:scale(.97);background:var(--accent-press)}
.btn-s.ghost{background:var(--well-2);color:var(--ink);box-shadow:none}
.btn-s[disabled]{opacity:.45;cursor:not-allowed}
.btn-link{background:none;border:0;color:var(--link);font-size:var(--fs-2);cursor:pointer;padding:0;text-decoration:none;font-weight:var(--fw-2)}
.btn-link:hover{text-decoration:underline;text-underline-offset:2px}

/* ============================================================================================ THE BOARD */
.board{--cols:5;display:grid;grid-template-columns:repeat(var(--cols),minmax(188px,1fr));gap:var(--s-3);align-items:start}
.col{background:var(--col);border-radius:var(--r-card);padding:0 var(--s-2) var(--s-2);min-height:280px;min-width:0}
.col.win{background:var(--col-win)}
.col-head{position:sticky;top:var(--topbar-h);z-index:5;display:flex;align-items:center;gap:var(--s-2);margin:0 calc(-1 * var(--s-2)) var(--s-1);padding:var(--s-3) var(--s-3) var(--s-2);background:var(--col);border-radius:var(--r-card) var(--r-card) 0 0}
.col.win .col-head{background:var(--col-win)}
.col-head h3{font-size:var(--fs-3);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.col-head .cnt{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-2);margin-left:auto;transition:transform var(--t-2) var(--ease)}
.col-head .cnt.bump{transform:scale(1.4)}
.sc-n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--surface);color:var(--ink-2);font-size:var(--fs-1);font-weight:var(--fw-2);flex:0 0 auto;box-shadow:var(--sh-1)}
.col.win .sc-n{color:var(--win-ink)}
.col.win .col-head h3{color:var(--win-ink)}
.col-head .trophy{color:var(--win);display:inline-flex;transform-origin:50% 90%}
.col-head .trophy.hop{animation:hop 520ms var(--ease)}
@keyframes hop{0%{transform:none}35%{transform:translateY(-4px) rotate(-8deg) scale(1.15)}100%{transform:none}}
.col-sub{font-size:var(--fs-1);color:var(--ink-2);margin:0 var(--s-1) var(--s-2)}
.sc-empty{border:1px dashed var(--line-strong);border-radius:var(--r-card);padding:var(--s-4) var(--s-3);margin:var(--s-1) 0 var(--s-2);font-size:var(--fs-2);line-height:1.45;color:var(--ink-2);text-align:center}
.sc-empty .btn-link{display:block;margin:6px auto 0}
.sc-add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;background:none;border:1px dashed var(--line-strong);border-radius:var(--r-ctl);padding:8px;font-size:var(--fs-2);color:var(--ink-2);font-weight:var(--fw-2);cursor:pointer;margin-bottom:var(--s-2);transition:background var(--t-1),color var(--t-1)}
.sc-add:hover{background:var(--surface);color:var(--ink)}

/* the tile (V1 .kcard): name + whose move, one line of why, the suburb and phase in words, one button + age */
.kcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);margin-bottom:var(--s-2);cursor:pointer;box-shadow:var(--sh-1);
  transition:box-shadow var(--t-2) var(--ease),transform var(--t-2) var(--ease)}
.kcard:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.kcard:active{transform:translateY(0) scale(.995)}
.kcard:focus-visible{box-shadow:var(--ring)}
.kcard::before{content:'';position:absolute;left:6px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--line-strong)}
.kcard.mv-you::before,.kcard.mv-red::before{background:var(--accent)}
.kcard.mv-them::before{background:var(--them)}
.kcard.mv-gold::before{background:var(--win)}
.kc-top{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px var(--s-2)}
.kc-top .mv-pill{margin-left:auto}
.kcard .nm{font-weight:var(--fw-2);font-size:var(--fs-3);letter-spacing:-.01em;line-height:1.3;flex:1 1 96px;min-width:0;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mv-pill{flex-shrink:0;font-size:var(--fs-1);font-weight:var(--fw-2);border-radius:var(--r-pill);padding:1px 8px;white-space:nowrap;background:var(--well);color:var(--ink-2)}
.kcard.mv-you .mv-pill{background:var(--accent-wash);color:var(--accent-ink)}
.kcard.mv-them .mv-pill{background:var(--them-wash);color:var(--them-ink)}
.kcard.mv-red .mv-pill{background:var(--red-wash);color:var(--red-ink)}
.kcard.mv-gold .mv-pill{background:var(--win-wash);color:var(--win-ink)}
.kcard .why{font-size:var(--fs-2);color:var(--ink);margin-top:var(--s-1);line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kcard .addr{font-size:var(--fs-1);color:var(--ink-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcard .addr .ph-unknown{color:var(--accent-text);font-weight:var(--fw-2)}
.kcard .ttl{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-top:var(--s-3);min-height:26px}
.kcard .ttl .btn-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.timer{font-size:var(--fs-1);color:var(--ink-3);margin-left:auto;flex:0 0 auto}
.own{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--well-2);color:var(--ink-2);font-size:var(--fs-1);font-weight:var(--fw-2);flex:0 0 auto}
.own.me{background:var(--accent-wash);color:var(--accent-ink)}
.own.other{background:var(--them-wash);color:var(--them-ink)}
/* tiles arrive in a short cascade */
.kcard.enter{animation:tile-in var(--t-2) var(--ease) both;animation-delay:calc(var(--i,0) * 18ms)}
@keyframes tile-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.kcard.landed{animation:landed 1.1s var(--ease)}
@keyframes landed{0%{box-shadow:var(--sh-1)}20%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 45%,transparent)}100%{box-shadow:var(--sh-1)}}
.kcard.dim{opacity:.35}

/* ============================================================================================ OVERLAY AND DIALOGS */
.overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--scrim) 24%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:48px var(--s-4);overflow-y:auto;animation:fade var(--t-2) var(--ease)}
.overlay.top{z-index:110}
@keyframes fade{from{opacity:0}to{opacity:1}}
.overlay.closing{animation:fade var(--t-1) var(--ease) reverse forwards}
.modal{position:relative;background:var(--surface);border-radius:var(--r-dialog);box-shadow:var(--sh-3);max-width:640px;width:100%;overflow:visible;animation:pop var(--t-2) var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
.overlay.closing .modal{animation:pop var(--t-1) var(--ease) reverse forwards}
.m-head{padding:var(--s-5) var(--s-5) var(--s-2);display:flex;align-items:flex-start;gap:var(--s-3)}
.m-head > .hd{flex:1;min-width:0}
.m-head h2{font-size:var(--fs-5);letter-spacing:-.025em}
.m-head .sub{font-size:var(--fs-2);color:var(--ink-2);margin-top:2px}
.close{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--ink-2);width:32px;height:32px;border-radius:var(--r-ctl);cursor:pointer;transition:background var(--t-1) var(--ease),color var(--t-1) var(--ease);flex-shrink:0}
.close:hover{background:var(--hover);color:var(--ink)}
.close:active{background:var(--press)}
.m-chips{display:flex;gap:var(--s-2);padding:var(--s-3) var(--s-5) var(--s-4);flex-wrap:wrap;border-bottom:1px solid var(--line);font-size:var(--fs-2);color:var(--ink-2);align-items:center}
.m-chips .dotsep{color:var(--line-strong)}
.mchip{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-2);background:var(--well);border-radius:var(--r-pill);padding:2px 10px}
.mchip.ph-unknown{background:var(--accent-wash);color:var(--accent-ink)}
.mchip.warn{background:var(--red-wash);color:var(--red-ink)}
.m-alert{padding:var(--s-2) var(--s-5);font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--accent-ink);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--accent-wash) 55%,var(--surface))}
.m-alert.hold{display:flex;align-items:center;gap:var(--s-2);color:var(--them-ink);background:var(--them-wash)}
.m-alert.hold span{flex:1}
.m-alert.sugg{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;color:var(--draft);background:var(--draft-wash)}
.m-alert.sugg span{flex:1;min-width:200px}
.m-alert.sugg small{display:block;font-weight:var(--fw-1);color:var(--ink-2)}
.m-body{padding:var(--s-1) var(--s-5) var(--s-5)}
.m-foot{display:flex;gap:var(--s-2);justify-content:flex-end;align-items:center;padding:var(--s-3) var(--s-5);border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--r-dialog) var(--r-dialog)}
.m-foot .sum{margin-right:auto;font-size:var(--fs-2);color:var(--ink-2);min-width:0}
.modal.small{max-width:520px}
.modal.medium{max-width:760px}
.modal.wide{max-width:1040px}

/* the card (V1 .sc-modal) */
.modal.card-m{max-width:980px}
.sc-contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.3fr) minmax(0,1.7fr);margin-top:var(--s-3);border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);overflow:hidden}
.sc-ci{padding:var(--s-2) var(--s-3);min-width:0;border-left:1px solid var(--line)}
.sc-ci:first-child{border-left:0}
.sc-ci-k{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.sc-ci-v{font-size:var(--fs-3);font-weight:var(--fw-2);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-ci-v.miss{color:var(--red-ink)}
.sc-ci.addr .sc-ci-v{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sc-ci-a{display:flex;gap:var(--s-3);margin-top:2px}
.sc-next{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line);position:relative;background:color-mix(in srgb,var(--accent-wash) 55%,var(--surface))}
.sc-next::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:var(--accent)}
.sc-next.mv-them{background:color-mix(in srgb,var(--them-wash) 60%,var(--surface))}
.sc-next.mv-them::before{background:var(--them)}
.sc-next.mv-red{background:color-mix(in srgb,var(--red-wash) 70%,var(--surface))}
.sc-next.mv-red::before{background:var(--red)}
.sc-next.mv-gold{background:color-mix(in srgb,var(--win-wash) 70%,var(--surface))}
.sc-next.mv-gold::before{background:var(--win)}
.sc-next.mv-none{background:var(--surface)}
.sc-next.mv-none::before{background:var(--line-strong)}
.sc-next.mv-you::before,.sc-next.mv-red::before{animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.5}}
.sc-next.changed .sc-next-txt{animation:tile-in var(--t-2) var(--ease)}
.sc-next-txt{flex:1;min-width:0}
.sc-next-k{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:2px}
.sc-next-t{font-size:var(--fs-4);font-weight:var(--fw-2);letter-spacing:-.015em;color:var(--ink);line-height:1.35}
.sc-next-s{font-size:var(--fs-2);color:var(--ink-2);margin-top:2px;line-height:1.45}
.sc-next-b{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto;max-width:56%}
.sc-inline{display:flex;gap:var(--s-2);margin-top:var(--s-2);flex-wrap:wrap;align-items:center}
.follow{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-2);font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--them-ink);background:var(--them-wash);border-radius:var(--r-pill);padding:2px 10px}
.sc-tabs{display:flex;gap:var(--s-1);padding:var(--s-2) var(--s-5) 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.sc-tabs::-webkit-scrollbar{display:none}
.sc-tab{border:0;background:none;font-size:var(--fs-3);font-weight:var(--fw-2);color:var(--ink-2);padding:var(--s-2) var(--s-3) 10px;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;margin-bottom:-1px;transition:color var(--t-1)}
.sc-tab:hover{color:var(--ink)}
.sc-tab.on{color:var(--ink);border-bottom-color:var(--accent)}
.sc-tab .n{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3)}
.sc-pane{padding:var(--s-5);min-height:260px;animation:fadein var(--t-2) var(--ease)}
.sc-ov{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s-6);align-items:start}
.sc-h{font-size:var(--fs-3);font-weight:var(--fw-2);color:var(--ink);display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-2);padding-bottom:var(--s-2);border-bottom:1px solid var(--line)}
.sc-h .sub{font-size:var(--fs-1);font-weight:var(--fw-1);color:var(--ink-2);margin-left:auto}
table.sc-facts{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
table.sc-facts th{text-align:left;font-weight:var(--fw-2);color:var(--ink-2);padding:var(--s-2) var(--s-3) var(--s-2) 0;white-space:nowrap;vertical-align:top;width:1%}
table.sc-facts td{padding:var(--s-2) var(--s-2) var(--s-2) 0;vertical-align:top}
table.sc-facts tr+tr th,table.sc-facts tr+tr td{border-top:1px solid var(--line)}
.sc-need{display:inline-block;font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--accent-ink);background:var(--accent-wash);border-radius:var(--r-pill);padding:0 6px;margin-left:6px}
.sc-src{color:var(--ink-2);font-size:var(--fs-1);margin-top:1px}
.val-miss{color:var(--ink-3)}
.conf{display:inline-block;font-size:var(--fs-1);font-weight:var(--fw-2);border-radius:var(--r-pill);padding:0 8px;white-space:nowrap}
.conf.known{background:var(--win-wash);color:var(--win-ink)}
.conf.unsure{background:var(--accent-wash);color:var(--accent-ink)}
.conf.missing{background:var(--well);color:var(--ink-2)}
.sc-fix{text-align:right;white-space:nowrap;width:1%}
table.sc-facts tr.known .sc-fix .btn-link{opacity:0;transition:opacity var(--t-1) var(--ease)}
table.sc-facts tr.known:hover .sc-fix .btn-link,table.sc-facts tr.known .sc-fix .btn-link:focus-visible{opacity:1}
.facts-more{margin-top:var(--s-2)}
.fact-in{flex:1;min-width:120px;border:1px solid var(--line);border-radius:var(--r-ctl);padding:5px 10px;font-size:var(--fs-2);background:var(--surface)}
.fact-in:focus{border-color:var(--accent-hover);box-shadow:var(--ring)}
/* the progress rail (V1 .sc-rail) */
.sc-step{display:flex;gap:var(--s-3);position:relative;padding:0 0 var(--s-4)}
.sc-step::before{content:'';position:absolute;left:11px;top:26px;bottom:2px;width:1.5px;background:var(--line-strong)}
.sc-step.done::before{background:var(--win)}
.sc-step:last-child::before{display:none}
.sc-step:last-child{padding-bottom:0}
.sc-dot{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:var(--fs-1);font-weight:var(--fw-2);background:var(--surface);border:1.5px solid var(--line-strong);color:var(--ink-3);position:relative;z-index:1}
.sc-dot .ic{width:12px;height:12px}
.sc-step.done .sc-dot{background:var(--win);border-color:var(--win);color:var(--surface)}
.sc-step.now .sc-dot{border-color:var(--accent-hover);color:var(--accent-ink);background:var(--accent-wash)}
.sc-step.now.mv-them .sc-dot{border-color:var(--them);color:var(--them-ink);background:var(--them-wash)}
.sc-step.now.mv-gold .sc-dot{border-color:var(--win);color:var(--win-ink);background:var(--win-wash)}
.sc-step.now.mv-red .sc-dot{border-color:var(--red);color:var(--red-ink);background:var(--red-wash)}
.sc-step.now.mv-none .sc-dot{border-color:var(--ink-3);color:var(--ink-2);background:var(--well)}
.sc-step.now .sc-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:ring 2.6s var(--ease) infinite}
@keyframes ring{0%{opacity:.45;transform:scale(.85)}80%,100%{opacity:0;transform:scale(1.5)}}
.sc-step.next{opacity:.6}
.sc-step.skip{opacity:.5}
.sc-step.skip .sc-dot{border-style:dashed}
.sc-step.skip .sc-step-t{text-decoration:line-through;text-decoration-color:var(--ink-3)}
.sc-step-b{flex:1;min-width:0}
.sc-step-t{font-size:var(--fs-3);font-weight:var(--fw-2);display:flex;align-items:baseline;gap:var(--s-2)}
.sc-step-s{font-size:var(--fs-2);color:var(--ink-2);line-height:1.45}
.offers-mini{margin-top:var(--s-5)}
.ofr{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-2);padding:var(--s-2) 0;border-top:1px solid var(--line)}
.ofr:first-of-type{border-top:0}
.ofr b{flex:1;min-width:0}
.ofr .sc-src{margin:0 var(--s-1) 0 auto;white-space:nowrap}
.sc-st{font-size:var(--fs-1);font-weight:var(--fw-2);border-radius:var(--r-pill);padding:1px 8px;white-space:nowrap;background:var(--well);color:var(--ink-2)}
.sc-st.ok{background:var(--win-wash);color:var(--win-ink)}
.sc-st.them{background:var(--them-wash);color:var(--them-ink)}
.sc-st.gold{background:var(--accent-wash);color:var(--accent-ink)}
.sc-st.bad{background:var(--red-wash);color:var(--red-ink)}
.sc-st.draft{background:var(--draft-wash);color:var(--draft)}
/* photos */
.sc-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--s-3)}
.sc-ph{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--surface);margin:0;box-shadow:var(--sh-1)}
.sc-ph .pic{aspect-ratio:4/3;background:var(--surface-3);display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-size:var(--fs-2);position:relative;overflow:hidden}
.sc-ph .pic img{width:100%;height:100%;object-fit:cover;display:block}
.sc-ph.flag{box-shadow:0 0 0 2px var(--accent)}
.sc-ph .ok{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--surface);background:var(--win)}
.sc-ph.flag .ok{background:var(--accent);color:var(--on-accent)}
.sc-ph figcaption{padding:var(--s-2) var(--s-3);font-size:var(--fs-2)}
.sc-ph figcaption small{display:block;color:var(--ink-2);font-size:var(--fs-1)}
/* quote (read-only view) */
.sc-q{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-4);margin-bottom:var(--s-3);background:var(--surface);box-shadow:var(--sh-1)}
.sc-q.signed{background:color-mix(in srgb,var(--win-wash) 45%,var(--surface))}
.sc-q-h{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-2)}
.sc-q-h .sc-st{margin-left:auto}
table.sc-lines{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
table.sc-lines td{padding:var(--s-2) 0;border-top:1px solid var(--line);vertical-align:top}
table.sc-lines tr:first-child td{border-top:0}
table.sc-lines .r{text-align:right;white-space:nowrap}
table.sc-lines small{display:block;color:var(--ink-2);font-size:var(--fs-1)}
table.sc-lines tr.tot td{font-weight:var(--fw-2);border-top:1px solid var(--line-strong);font-size:var(--fs-4)}
.empty-note{font-size:var(--fs-3);color:var(--ink-2);background:var(--surface-3);border-radius:var(--r-card);padding:var(--s-4) var(--s-5);line-height:1.5;display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.empty-note b{color:var(--ink)}
.empty-note .btn{margin-left:auto}
/* the timeline */
.day-head{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin:var(--s-4) 0 var(--s-1);padding-left:40px}
.day-head:first-child{margin-top:0}
.ev{display:flex;gap:var(--s-3);position:relative;padding:var(--s-2) 0}
.ev::before{content:'';position:absolute;left:13px;top:38px;bottom:-8px;width:1.5px;background:var(--line)}
.ev.last::before{display:none}
.disc{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;background:var(--well);color:var(--ink-2)}
.disc svg{width:14px;height:14px}
.disc.email{background:var(--them-wash);color:var(--them-ink)}
.disc.sms{background:var(--win-wash);color:var(--win-ink)}
.disc.in{box-shadow:inset 0 0 0 1.5px currentColor}
.disc.note,.disc.call,.disc.quote{background:var(--accent-wash);color:var(--accent-ink)}
.disc.signed{background:var(--win-wash);color:var(--win-ink)}
.disc.pack{background:var(--teal-wash);color:var(--teal-ink)}
.disc.task{background:var(--draft-wash);color:var(--draft)}
.ev .body{flex:1;min-width:0}
.ev .t1{font-size:var(--fs-3);font-weight:var(--fw-2);display:flex;align-items:baseline;gap:var(--s-3);color:var(--ink)}
.ev .t1 .when{margin-left:auto;font-size:var(--fs-1);color:var(--ink-3);font-weight:var(--fw-1);white-space:nowrap}
.ev .meta{font-size:var(--fs-1);color:var(--ink-2);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ev .quote{margin-top:6px;font-size:var(--fs-2);color:var(--ink-2);background:var(--surface-3);border-radius:var(--r-ctl);padding:var(--s-2) var(--s-3);line-height:1.45;white-space:pre-wrap}
.ev.fresh{animation:tile-in var(--t-2) var(--ease)}
.pill{display:inline-block;font-size:var(--fs-1);font-weight:var(--fw-2);border-radius:var(--r-pill);padding:0 8px;background:var(--well);color:var(--ink-2);white-space:nowrap}
.pill.sim{background:var(--accent-wash);color:var(--accent-ink)}
.pill.draft{background:var(--draft-wash);color:var(--draft)}
.pill.ok{background:var(--win-wash);color:var(--win-ink)}
.pill.bad{background:var(--red-wash);color:var(--red-ink)}
.pill.them{background:var(--them-wash);color:var(--them-ink)}
.sc-files{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.sc-file{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:2px 8px;max-width:100%;text-decoration:none;transition:border-color var(--t-1),color var(--t-1)}
a.sc-file:hover{border-color:var(--link);color:var(--link)}
.sc-file .ic{width:12px;height:12px;color:var(--red-ink)}
.sc-file span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the card's footer */
.m-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2);padding:var(--s-3) var(--s-5);border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:0 0 var(--r-dialog) var(--r-dialog);position:sticky;bottom:0;z-index:4}
.m-actions .sep{width:1px;height:20px;background:var(--line-strong);margin:0 var(--s-1)}
.sc-more{position:relative;margin-left:auto}
.sc-menu{position:absolute;right:0;bottom:calc(100% + 8px);width:264px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-3);padding:var(--s-1);z-index:5;animation:pop var(--t-2) var(--ease);transform-origin:bottom right}
.sc-menu.down{bottom:auto;top:calc(100% + 8px);transform-origin:top right}
.sc-menu button{display:flex;align-items:center;gap:var(--s-2);width:100%;text-align:left;border:0;background:none;font-size:var(--fs-3);color:var(--ink);padding:8px 12px;border-radius:var(--r-ctl);cursor:pointer}
.sc-menu button .ic{color:var(--ink-2)}
.sc-menu button:hover{background:var(--hover)}
.sc-menu button[disabled]{opacity:.45;cursor:not-allowed}
.sc-menu hr{border:0;border-top:1px solid var(--line);margin:var(--s-1) var(--s-1)}
.sc-menu .danger,.sc-menu .danger .ic{color:var(--red-ink)}
.sc-menu .k{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);padding:var(--s-2) var(--s-3) 2px}
.inbox-box{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-3);margin:0 0 var(--s-3);background:var(--surface);box-shadow:var(--sh-1);animation:fadein var(--t-2) var(--ease)}
.inbox-box textarea{width:100%;min-height:72px;border:0;resize:vertical;font-size:var(--fs-3);line-height:1.5;background:transparent}
.inbox-box textarea:focus{box-shadow:none}
.inbox-box .row{display:flex;gap:var(--s-2);justify-content:flex-end;align-items:center;margin-top:var(--s-2)}
.inbox-box .row .hint{margin-right:auto;font-size:var(--fs-1);color:var(--ink-2)}
/* small dialogs */
.reasons{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-2)}
.reason{display:flex;gap:var(--s-3);align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-ctl);padding:10px var(--s-3);cursor:pointer;font-size:var(--fs-3);transition:border-color var(--t-1),box-shadow var(--t-1),background var(--t-1)}
.reason:hover{background:var(--surface-3)}
.reason.on{border-color:var(--accent-hover);box-shadow:var(--ring);background:var(--surface)}
.reason input{accent-color:var(--accent-hover);margin-top:4px}
.reason small{display:block;color:var(--ink-2);font-size:var(--fs-1)}
.field{display:flex;flex-direction:column;gap:6px;margin-top:var(--s-3);font-size:var(--fs-2);color:var(--ink-2);font-weight:var(--fw-2)}
.field input,.field textarea,.field select{border:1px solid var(--line);border-radius:var(--r-ctl);padding:8px 12px;font-size:var(--fs-3);font-weight:var(--fw-1);color:var(--ink);background:var(--surface);transition:border-color var(--t-1),box-shadow var(--t-1)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent-hover);box-shadow:var(--ring)}
.field small{font-weight:var(--fw-1);color:var(--ink-2);font-size:var(--fs-1)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-4)}
.fields .wide{grid-column:1 / -1}
.teamup-line{display:flex;align-items:center;gap:var(--s-3);background:var(--surface-3);border-radius:var(--r-ctl);padding:var(--s-3);margin-top:var(--s-2);font-size:var(--fs-2);color:var(--ink-2)}
.quick{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-2)}

/* ============================================================================================ SEND (V1 .sc-offer) */
.modal.send-m{max-width:1140px}
.sc-of{display:grid;grid-template-columns:minmax(0,1fr) 420px;min-height:560px}
.sc-of-form{padding:var(--s-1) var(--s-5) var(--s-5);border-right:1px solid var(--line);min-width:0}
.sc-of-prev{background:var(--preview-bg);padding:var(--s-5);min-width:0}
.modes{display:inline-flex;background:var(--well);border-radius:12px;padding:4px;gap:2px;margin:var(--s-3) 0 var(--s-1)}
.modes button{border:0;background:none;font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--ink-2);padding:6px 14px;border-radius:var(--r-ctl);cursor:pointer;transition:color var(--t-1),background var(--t-1)}
.modes button:hover{color:var(--ink)}
.modes button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.sc-ready{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;padding:var(--s-3) 0 var(--s-1);font-size:var(--fs-2);color:var(--ink-2)}
.sc-sec{padding-top:var(--s-5)}
.sc-sec-h{display:flex;align-items:baseline;gap:var(--s-2);margin-bottom:var(--s-3)}
.sc-sec-h .num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--accent-wash);color:var(--accent-ink);font-size:var(--fs-1);font-weight:var(--fw-2);flex:0 0 auto;transform:translateY(-1px)}
.sc-sec-h b{font-size:var(--fs-3)}
.sc-sec-h .hint{font-size:var(--fs-1);color:var(--ink-2);margin-left:auto;text-align:right}
.sc-tpls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.sc-tpl{position:relative;border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-2);cursor:pointer;background:var(--surface);box-shadow:var(--sh-1);transition:box-shadow var(--t-1) var(--ease),transform var(--t-1) var(--ease);text-align:left}
.sc-tpl:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.sc-tpl.on{border-color:var(--accent-hover);box-shadow:var(--ring)}
.sc-tpl .th{background:var(--surface-3);border-radius:var(--r-ctl);height:96px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sc-tpl .th svg{height:84px;width:auto;display:block}
.sc-tpl .nm{display:flex;align-items:center;gap:6px;margin-top:var(--s-2);font-size:var(--fs-2);font-weight:var(--fw-2)}
.sc-tpl .def{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--accent-ink);background:var(--accent-wash);border-radius:var(--r-pill);padding:0 8px}
/* the email-design thumbnails: shapes named by what they draw, coloured by the --mail-* tokens */
.th .m-paper{fill:var(--mail-paper)} .th .m-white{fill:var(--mail-white)} .th .m-navy{fill:var(--mail-navy)} .th .m-gold{fill:var(--mail-gold)}
.th .m-amber{fill:var(--mail-amber)} .th .m-rule{fill:var(--mail-rule)} .th .m-sky{fill:var(--mail-sky)} .th .m-soft{fill:var(--mail-soft)}
.th .m-line{fill:var(--mail-line)} .th .m-band{fill:var(--mail-band)} .th .m-band-sub{fill:var(--mail-band-sub)} .th .m-kicker{fill:var(--mail-band-kicker)}
.th .m-cta{fill:var(--mail-cta)} .th .m-foot{fill:var(--mail-c-foot)} .th .m-frame{stroke:var(--mail-frame)} .th .m-c-frame{stroke:var(--mail-c-frame)} .th .m-stroke{stroke:var(--mail-rule)}
.sc-bopts{display:flex;flex-direction:column;gap:var(--s-2)}
.sc-bopt{display:flex;align-items:center;gap:var(--s-3);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-2) var(--s-3) var(--s-2) var(--s-2);cursor:pointer;background:var(--surface);transition:box-shadow var(--t-1) var(--ease),border-color var(--t-1) var(--ease),background var(--t-1)}
.sc-bopt:hover{background:var(--surface-2)}
.sc-bopt.on{border-color:var(--accent-hover);box-shadow:var(--ring);background:var(--surface)}
.sc-bopt input{accent-color:var(--accent-hover);margin:0 0 0 var(--s-1);flex:0 0 auto}
.sc-bopt .img{width:48px;height:52px;border-radius:var(--r-ctl);background:var(--surface-3);display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden;color:var(--accent-text)}
.sc-bopt .img img{height:52px;width:auto}
.sc-bopt .img img ~ .ic,.lt-row .img img ~ .ic{display:none}     /* the sun shows only when there is no picture (or it failed) */
.sc-bopt .txt{flex:1;min-width:0}
.sc-bopt .t{font-size:var(--fs-3);font-weight:var(--fw-2);letter-spacing:-.01em}
.sc-bopt .s{display:block;font-size:var(--fs-1);color:var(--ink-2)}
.sc-bopt .pr{text-align:right;font-size:var(--fs-3);font-weight:var(--fw-2);white-space:nowrap}
.sc-bopt .pr small{display:block;font-size:var(--fs-1);font-weight:var(--fw-1);color:var(--ink-2)}
.sc-bopt .match{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--win-ink);background:var(--win-wash);border-radius:var(--r-pill);padding:0 8px;margin-left:var(--s-2);white-space:nowrap}
.angle-h{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin:var(--s-2) var(--s-1) 0}
.angle-h:first-child{margin-top:0}
.sc-more-opts{font-size:var(--fs-2);color:var(--link);font-weight:var(--fw-2);background:none;border:0;cursor:pointer;padding:var(--s-2);display:block;margin:var(--s-1) auto 0;border-radius:var(--r-ctl)}
.sc-switch{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-3);font-weight:var(--fw-2);cursor:pointer;user-select:none;position:relative}
.sc-switch input{position:absolute;opacity:0;width:0;height:0}
.sc-switch .sw{position:relative;width:34px;height:20px;border-radius:var(--r-pill);background:var(--well-2);transition:background var(--t-1) var(--ease);flex-shrink:0}
.sc-switch .sw::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:var(--sh-1);transition:transform var(--t-2) var(--ease)}
.sc-switch input:checked+.sw{background:var(--win)}
.sc-switch input:checked+.sw::after{transform:translateX(14px)}
.sc-switch input:focus-visible+.sw{box-shadow:var(--ring)}
.sc-atts{display:flex;flex-direction:column;gap:var(--s-2)}
.sc-att{display:flex;align-items:flex-start;gap:var(--s-3);border:1px solid var(--line);border-radius:var(--r-ctl);padding:10px var(--s-3);background:var(--surface)}
.sc-att.locked{background:var(--surface-3);border-color:transparent}
label.sc-att{cursor:pointer}
label.sc-att input{margin-top:3px;accent-color:var(--accent-press)}
.sc-att .ic{color:var(--red-ink);margin-top:2px}
.sc-att .txt{flex:1;min-width:0;font-size:var(--fs-2)}
.sc-att .txt small{display:block;font-size:var(--fs-1);color:var(--ink-2)}
.sc-lock{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-2);background:var(--well);border-radius:var(--r-pill);padding:0 8px;white-space:nowrap}
.recips{display:flex;flex-direction:column;gap:var(--s-2)}
.recip{display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-3);border:1px solid var(--line);border-radius:var(--r-ctl);padding:var(--s-2) var(--s-3)}
.chan{display:flex;gap:var(--s-5);flex-wrap:wrap}
.chan .num-of{color:var(--ink-2);font-weight:var(--fw-1)}
.sc-of-foot{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-5);border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:0 0 var(--r-dialog) var(--r-dialog);position:sticky;bottom:0;z-index:4}
.sc-of-foot .sum{margin-right:auto;font-size:var(--fs-2);color:var(--ink-2);line-height:1.45;min-width:0}
.sc-of-foot .sum b{color:var(--ink)}
.sc-problems{margin:var(--s-3) 0 0;padding:var(--s-2) var(--s-3);border-radius:var(--r-ctl);background:var(--red-wash);color:var(--red-ink);font-size:var(--fs-2);line-height:1.45}
.sc-warn{margin:var(--s-3) 0 0;padding:var(--s-2) var(--s-3);border-radius:var(--r-ctl);background:var(--draft-wash);color:var(--draft);font-size:var(--fs-2);line-height:1.45}
/* the preview: the email as it will arrive, scaled into the pane */
.sc-prev-cap{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s-2);flex-wrap:wrap}
.sc-prev-cap .tv{margin-left:auto;letter-spacing:0;text-transform:none;font-weight:var(--fw-1)}
.sc-subj{font-size:var(--fs-2);color:var(--ink-2);margin-bottom:var(--s-2);line-height:1.45}
.sc-subj b{color:var(--ink)}
.mailframe{position:relative;max-width:600px;background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sh-2);overflow:hidden;transition:height var(--t-2) var(--ease)}
.mailframe iframe{border:0;display:block;transform-origin:0 0;background:var(--surface)}
.mailframe.swap iframe{animation:swap var(--t-2) var(--ease)}
@keyframes swap{from{opacity:.3}to{opacity:1}}
.prev-files{margin-top:var(--s-3)}
.sc-sms{margin-top:var(--s-4)}
.sc-sms-cap{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.sc-bubble{background:var(--surface);color:var(--ink);border-radius:16px 16px 16px 4px;padding:10px 14px;font-size:var(--fs-3);line-height:1.45;max-width:380px;white-space:pre-wrap;word-wrap:break-word;box-shadow:var(--sh-1)}
.sc-bubble.out{background:var(--accent-wash);color:var(--accent-ink);border-radius:16px 16px 4px 16px;margin-left:auto}
.sc-sms-meta{font-size:var(--fs-1);color:var(--ink-2);margin-top:6px}
.btn.sending{pointer-events:none}
.plane{position:fixed;z-index:960;pointer-events:none;width:26px;height:26px;color:var(--accent-hover)}

/* ============================================================================================ TOASTS AND MOMENTS */
.toasts{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:970;display:flex;flex-direction:column;gap:var(--s-2);align-items:center;pointer-events:none;width:max-content;max-width:92vw}
.toast{background:var(--surface);color:var(--ink);border:1px solid var(--line);font-size:var(--fs-3);font-weight:var(--fw-2);border-radius:var(--r-card);padding:10px var(--s-4);box-shadow:var(--sh-3);display:flex;align-items:center;gap:var(--s-2);animation:toast-in var(--t-2) var(--ease)}
.toast .k{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--accent-ink);background:var(--accent-wash);border-radius:var(--r-pill);padding:1px 8px}
.toast.out{animation:toast-in var(--t-1) var(--ease) reverse forwards}
.toast.has-undo{pointer-events:auto;padding-right:6px}
.toast .undo{border:0;background:var(--accent-wash);color:var(--accent-ink);font-weight:var(--fw-2);font-size:var(--fs-2);border-radius:var(--r-ctl);padding:6px 12px;cursor:pointer}
.toast .undo:hover{background:var(--accent)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mo-overlay{position:fixed;inset:0;pointer-events:none;z-index:950;overflow:hidden}
/* the win stamp: green and sunny */
.mo-stamp{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);text-align:center}
.mo-stamp::before{content:'';position:absolute;left:50%;top:50%;width:520px;height:340px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--surface) 92%,transparent),transparent);z-index:-1;animation:fadein var(--t-2) both}
.mo-stamp .ink{display:inline-block;border:4px solid var(--win);color:var(--win-ink);border-radius:var(--r-card);padding:12px 28px 10px;font-size:40px;font-weight:var(--fw-2);letter-spacing:.12em;text-transform:uppercase;line-height:1;
  background:var(--win-wash);box-shadow:var(--sh-3);animation:stamp .5s cubic-bezier(.3,1.5,.4,1) both;transform:rotate(-6deg)}
.mo-stamp .ink small{display:block;font-size:var(--fs-1);letter-spacing:.2em;margin-top:var(--s-2);font-weight:var(--fw-2)}
.mo-stamp .who{margin-top:var(--s-4);font-size:var(--fs-3);font-weight:var(--fw-2);color:var(--accent-ink);background:var(--accent-wash);border-radius:var(--r-pill);padding:6px var(--s-4);display:inline-block;box-shadow:var(--sh-2);animation:fadein var(--t-2) .3s both}
@keyframes stamp{0%{opacity:0;transform:rotate(-6deg) scale(2)}60%{opacity:1;transform:rotate(-6deg) scale(.95)}100%{opacity:1;transform:rotate(-6deg) scale(1)}}
.mo-part{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--spark-1);animation:mo-fly 1.1s ease-out forwards}
.mo-part:nth-child(5n+2){background:var(--spark-2)}.mo-part:nth-child(5n+3){background:var(--spark-3)}.mo-part:nth-child(5n+4){background:var(--spark-4)}.mo-part:nth-child(5n){background:var(--spark-5)}
@keyframes mo-fly{to{transform:translate(var(--dx,0),var(--dy,0)) scale(.2);opacity:0}}
/* the team-up */
.mo-team{position:absolute;left:50%;top:24%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--s-3)}
.mo-team .pair{display:flex;align-items:center}
.mo-team .av{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:var(--fw-2);font-size:var(--fs-4);border:3px solid var(--surface);box-shadow:var(--sh-2)}
.mo-team .av.a{background:var(--accent);color:var(--on-accent);animation:slide-l 400ms var(--ease) both}
.mo-team .av.b{background:var(--them-wash);color:var(--them-ink);margin-left:-12px;animation:slide-r 400ms var(--ease) both}
.mo-team .spark{color:var(--accent-hover);margin:0 -4px;z-index:2;animation:fadein var(--t-2) .3s both}
@keyframes slide-l{from{transform:translateX(-48px);opacity:0}to{transform:none;opacity:1}}
@keyframes slide-r{from{transform:translateX(48px);opacity:0}to{transform:none;opacity:1}}
.mo-txt{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-card);padding:10px var(--s-5);box-shadow:var(--sh-3);text-align:center;animation:fadein var(--t-2) .3s both}
.mo-k{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.04em;text-transform:uppercase;color:var(--accent-text)}
.mo-t{font-size:var(--fs-4);font-weight:var(--fw-2)}
.mo-s{font-size:var(--fs-2);color:var(--ink-2)}

/* ============================================================================================ THE DEMO BAR (bottom, light) */
.demo-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:center;gap:var(--s-3);padding:var(--s-2) var(--s-4);
  background:color-mix(in srgb,var(--accent-wash) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--accent-ink);font-size:var(--fs-2);border-top:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.demo-bar b{font-weight:var(--fw-2)}
.demo-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-hover)}
.demo-bar .backend{font-size:var(--fs-1);color:var(--accent-text)}
.demo-bar .open-drawer{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:var(--on-accent);border:0;border-radius:var(--r-ctl);font-size:var(--fs-2);font-weight:var(--fw-2);padding:4px 12px;cursor:pointer;box-shadow:var(--sh-btn)}
.demo-bar .open-drawer:hover{background:var(--accent-hover)}

/* ============================================================================================ SIGN-IN */
body.signed-out #top-bar-utility .gfind,body.signed-out #top-bar-utility .bar-user,body.signed-out .nav,body.signed-out .nav-menu,body.signed-out .demo-pill{visibility:hidden}
/* "Demo on Supabase": a band above the top bar, and the sign-in steps */
.sb-banner{display:flex;align-items:center;justify-content:center;gap:var(--s-2);flex-wrap:wrap;padding:6px var(--s-4);background:var(--them-wash);color:var(--them-ink);font-size:var(--fs-2);border-bottom:1px solid var(--line);position:relative;z-index:51}
.sb-banner[hidden]{display:none}
.sb-banner b{font-weight:var(--fw-2)}
.sb-banner a{color:var(--link);font-weight:var(--fw-2);margin-left:var(--s-2)}
.signin-card h1 .v{font-size:var(--fs-1);background:var(--accent);color:var(--on-accent);border-radius:var(--r-pill);padding:1px 8px;vertical-align:middle}
.signin-steps{text-align:left;margin:var(--s-3) 0 var(--s-2);padding-left:var(--s-5);font-size:var(--fs-2);color:var(--ink-2);line-height:1.6}
.signin-steps b{color:var(--ink)}
.signin-foot{font-size:var(--fs-1) !important;margin-top:var(--s-4) !important}
.signin-foot a{color:var(--link)}
.signin{min-height:calc(100vh - 240px);display:flex;align-items:center;justify-content:center;padding:var(--s-5) 0}
.signin-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-dialog);box-shadow:var(--sh-2);padding:var(--s-6) var(--s-6) var(--s-5);text-align:center;animation:pop var(--t-2) var(--ease)}
.signin-sun{width:44px;height:44px;margin:0 auto var(--s-2);display:block;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.signin-card h1{font-size:var(--fs-5)}
.signin-card h1 span{color:var(--accent-text)}
.signin-card p{font-size:var(--fs-3);color:var(--ink-2);margin:var(--s-2) 0 var(--s-1);line-height:1.5}
.signin-card form{text-align:left}
.signin-card .btn{width:100%;margin-top:var(--s-4);padding:10px var(--s-4)}
.signin-msg{margin-top:var(--s-3);font-size:var(--fs-2);min-height:1.2em}
.signin-msg.ok{color:var(--win-ink)}
.signin-msg.bad{color:var(--red-ink)}

/* ============================================================================================ PLACEHOLDER TABS */
.later{max-width:620px;margin:64px auto;text-align:center;color:var(--ink-2)}
.later .ic.lg{width:32px;height:32px;color:var(--accent-text);margin-bottom:var(--s-3)}
.later h2{font-size:var(--fs-5);color:var(--ink);margin-bottom:var(--s-2)}
.later p{font-size:var(--fs-3);line-height:1.6}
.badge-soon{display:inline-block;margin-bottom:var(--s-3);font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--accent-ink);background:var(--accent-wash);border-radius:var(--r-pill);padding:2px 10px}

/* NEW SCREENS: appended below, one section each (drawer, intake, quote, journey, library, dashboard, settings, service) */

/* ============================================================================================ THE DEMO DRAWER */
.drawer{position:fixed;top:0;right:0;bottom:0;width:380px;z-index:130;background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--sh-3);display:flex;flex-direction:column;animation:slide-in var(--t-2) var(--ease)}
@keyframes slide-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
body.drawer-open .wrap,body.drawer-open .top-bar,body.drawer-open .demo-bar,body.drawer-open .overlay{margin-right:380px}
body.drawer-open .overlay{right:0;width:auto}
body.drawer-open .nav button{padding:6px 10px}
body.drawer-open .nav .soon{display:none}
.dr-head{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-5) var(--s-5) var(--s-3);border-bottom:1px solid var(--line)}
.dr-head h2{font-size:var(--fs-5)}
.dr-body{flex:1;overflow-y:auto;padding:var(--s-2) var(--s-5) var(--s-6);overscroll-behavior:contain}
.dr-sec{padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.dr-sec:last-child{border-bottom:0}
.dr-h{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3);font-size:var(--fs-3)}
.dr-h .ic{color:var(--accent-text)}
.dr-h .muted,.dr-h .btn-link{margin-left:auto;font-size:var(--fs-2)}
.dr-date{font-size:var(--fs-6);font-weight:var(--fw-2);letter-spacing:-.02em;margin-bottom:var(--s-3)}
.dr-row{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s-2)}
.dr-row .input{flex:1 1 120px;padding:5px 10px;font-size:var(--fs-2)}
.dr-auto{font-size:var(--fs-2);font-weight:var(--fw-1);color:var(--ink-2);margin-top:var(--s-1)}
.dr-result,.dr-note{margin-top:var(--s-3);background:var(--surface-3);border-radius:var(--r-ctl);padding:var(--s-2) var(--s-3);font-size:var(--fs-2)}
.dr-note.ok{background:var(--win-wash);color:var(--win-ink)}
.dr-note.bad{background:var(--red-wash);color:var(--red-ink)}
.dr-li{display:flex;justify-content:space-between;gap:var(--s-2);padding:2px 0;font-size:var(--fs-2)}
.dr-empty{font-size:var(--fs-2);color:var(--ink-2);background:var(--surface-3);border-radius:var(--r-ctl);padding:var(--s-3)}
.dr-moves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
.dr-move{display:flex;align-items:center;gap:var(--s-2);text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-ctl);padding:8px 10px;font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--ink);cursor:pointer;box-shadow:var(--sh-1);transition:background var(--t-1),transform var(--t-1)}
.dr-move .ic{color:var(--ink-2)}
.dr-move:hover{background:var(--accent-wash)}
.dr-move:hover .ic{color:var(--accent-ink)}
.dr-move:active{transform:scale(.98)}
.dr-reply{margin-top:var(--s-3);display:flex;flex-direction:column;gap:var(--s-2);background:var(--surface-3);border-radius:var(--r-ctl);padding:var(--s-3)}
.dr-reply .seg{flex-wrap:wrap}
.dr-reply textarea{resize:vertical;font-size:var(--fs-2)}
.dr-search{width:100%;margin-bottom:var(--s-2);font-size:var(--fs-2)}
.dr-group{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin:var(--s-3) 0 var(--s-1)}
.dr-scen{display:flex;align-items:center;gap:var(--s-3);width:100%;text-align:left;border:0;background:none;border-radius:var(--r-ctl);padding:8px;cursor:pointer;color:var(--ink)}
.dr-scen:hover{background:var(--accent-wash)}
.dr-scen .no{flex:0 0 26px;height:26px;border-radius:50%;background:var(--surface-3);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-2)}
.dr-scen .t{flex:1;min-width:0}
.dr-scen .t b{display:block;font-size:var(--fs-2)}
.dr-scen .t small{display:block;font-size:var(--fs-1);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-scen .ic{color:var(--ink-3)}
.dr-run{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-3);margin-bottom:var(--s-3);box-shadow:var(--sh-1)}
.dr-steps{list-style:none;margin:var(--s-2) 0;max-height:280px;overflow-y:auto;font-size:var(--fs-2)}
.dr-steps li{display:flex;gap:var(--s-2);padding:3px 0;border-top:1px solid var(--line)}
.dr-steps li:first-child{border-top:0}
.dr-steps .mk{flex:0 0 18px;height:18px;border-radius:50%;background:var(--surface-3);display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.dr-steps li.ok .mk{background:var(--win-wash);color:var(--win-ink)}
.dr-steps li.bad .mk{background:var(--red-wash);color:var(--red-ink)}
.dr-steps small{display:block;color:var(--red-ink)}
.dr-reset{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;font-size:var(--fs-2);color:var(--ink-2)}
@media (max-width:1100px){
  body.drawer-open .wrap,body.drawer-open .top-bar,body.drawer-open .demo-bar,body.drawer-open .overlay{margin-right:0}
}
@media (max-width:720px){
  .drawer{top:auto;left:0;width:auto;max-height:72vh;border-left:0;border-top:1px solid var(--line);border-radius:var(--r-dialog) var(--r-dialog) 0 0;animation:sheet-up var(--t-2) var(--ease)}
  @keyframes sheet-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
  .dr-head{padding:var(--s-4) var(--s-4) var(--s-2)}
  .dr-body{padding:var(--s-1) var(--s-4) var(--s-5)}
}


/* ============================================================================================ INTAKE: add and import */
.imp-list{display:flex;flex-direction:column;gap:var(--s-2)}
.imp-row{display:flex;align-items:center;gap:var(--s-3);border:1px solid var(--line);border-radius:var(--r-ctl);padding:10px var(--s-3);background:var(--surface);cursor:pointer;transition:background var(--t-1),border-color var(--t-1)}
.imp-row:hover{background:var(--surface-2)}
.imp-row.on{border-color:var(--accent-hover);background:color-mix(in srgb,var(--accent-wash) 40%,var(--surface))}
.imp-row.bad{border-color:color-mix(in srgb,var(--red) 40%,transparent);background:color-mix(in srgb,var(--red-wash) 50%,var(--surface))}
.imp-row input{accent-color:var(--accent-hover)}
.imp-row .t{flex:1;min-width:0}
.imp-row .t b{display:block;font-size:var(--fs-3)}
.imp-row .t small,.imp-row .r small{display:block;font-size:var(--fs-1);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imp-row .r{text-align:right;flex:0 0 auto;max-width:40%}
.imp-row .r .mono{font-size:var(--fs-2)}
textarea.mono{font-family:var(--mono);font-size:var(--fs-2)}

/* ============================================================================================ QUOTE BUILDER AND THE JOB */
.qb-deals{display:flex;flex-direction:column;gap:var(--s-3)}
.qb-deals .muted{font-weight:var(--fw-1)}
.qb-extras{display:flex;flex-direction:column;gap:var(--s-2)}
.qb-extra{display:flex;align-items:center;gap:var(--s-3);border:1px solid var(--line);border-radius:var(--r-ctl);padding:8px var(--s-3);background:var(--surface);cursor:pointer;font-size:var(--fs-2);transition:background var(--t-1),border-color var(--t-1)}
.qb-extra:hover{background:var(--surface-2)}
.qb-extra.on{border-color:var(--accent-hover);background:color-mix(in srgb,var(--accent-wash) 40%,var(--surface))}
.qb-extra input{accent-color:var(--accent-hover)}
.qb-extra .t{flex:1;min-width:0;font-weight:var(--fw-2)}
.qb-extra .t small{display:block;font-weight:var(--fw-1);color:var(--ink-2);font-size:var(--fs-1)}
.qb-extra .pr{font-weight:var(--fw-2);white-space:nowrap}
.qb-extra .qty{display:inline-flex;align-items:center;gap:6px;background:var(--surface-3);border-radius:var(--r-pill);padding:2px}
.qb-extra .qty button{border:0;background:var(--surface);width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);box-shadow:var(--sh-1)}
.qb-extra .qty b{min-width:16px;text-align:center;font-size:var(--fs-2)}
.qb-override{margin-top:var(--s-2)}
.qb-ov{display:flex;gap:var(--s-3);align-items:flex-end;flex-wrap:wrap;background:var(--surface-3);border-radius:var(--r-ctl);padding:var(--s-3)}
.qb-ov .field{flex:1 1 140px}
.qb-paper{box-shadow:var(--sh-2)}
/* quotes, step 5: changed prices, the discount, the Battery STCs, the payments, the customer view */
table.sc-lines tr.flag td:first-child{box-shadow:inset 3px 0 0 var(--accent-hover);padding-left:var(--s-2)}
table.sc-lines small.chg{display:flex;align-items:center;gap:4px;color:var(--accent-text);font-weight:var(--fw-2)}
table.sc-lines .btn-link.small,.qb-tot .btn-link.small{font-size:var(--fs-1);margin-top:2px}
table.sc-lines .qb-ov{margin-top:var(--s-2)}
.qb-disc{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.qb-disc .input{flex:0 1 110px}
.qb-disc .input.grow{flex:1 1 200px}
.qb-tot{display:grid;grid-template-columns:1fr auto;gap:4px var(--s-3);margin:var(--s-3) 0 0;padding-top:var(--s-2);border-top:1px solid var(--line-strong);font-size:var(--fs-2)}
.qb-tot dt{color:var(--ink-2)}
.qb-tot dt small{display:block;font-size:var(--fs-1);color:var(--ink-3)}
.qb-tot dd{margin:0;text-align:right;white-space:nowrap}
.qb-tot .big{font-size:var(--fs-4);font-weight:var(--fw-2);color:var(--ink)}
.qb-pay{margin-top:var(--s-3);background:var(--surface-3);border-radius:var(--r-ctl);padding:var(--s-2) var(--s-3);font-size:var(--fs-2)}
.qb-pay-h{font-size:var(--fs-1);font-weight:var(--fw-2);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);margin-bottom:4px}
.qb-pay-r{display:flex;justify-content:space-between;gap:var(--s-3);padding:2px 0}
.pill.gold{background:var(--accent-wash);color:var(--accent-ink)}
/* the interest-free plan: how it starts, how many months, and the schedule under them (fixed heights: no jump) */
.qb-plan{margin-top:var(--s-3);display:flex;flex-direction:column;gap:6px}
.qb-plan-k{font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--ink-2);margin-top:var(--s-1)}
.qb-seg{display:grid;gap:4px;background:var(--well);border-radius:12px;padding:4px}
.qb-seg.two{grid-template-columns:1fr 1fr}
.qb-seg.months{grid-template-columns:repeat(5,1fr);max-width:320px}
.qb-seg button{border:0;background:none;font:inherit;font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--ink-2);padding:8px 10px;min-height:44px;border-radius:var(--r-ctl);cursor:pointer;line-height:1.25;transition:color var(--t-1),background var(--t-1)}
.qb-seg button:hover{color:var(--ink)}
.qb-seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.qb-seg button:focus-visible{box-shadow:var(--ring);outline:0}
.qb-owner{margin-top:var(--s-2);font-size:var(--fs-2)}
.qb-sched{min-height:58px;margin-top:var(--s-1);padding:var(--s-2) var(--s-3);border-radius:var(--r-ctl);background:color-mix(in srgb,var(--win-wash) 50%,var(--surface));font-size:var(--fs-2);line-height:1.45;display:flex;flex-direction:column;gap:2px}
.qb-sched b{color:var(--ink)}
.qb-sched span,.qb-pay-f{display:flex;align-items:center;gap:4px;font-size:var(--fs-1);font-weight:var(--fw-2)}
.qb-sched .ok,.qb-pay-f.ok{color:var(--win-ink)}
.qb-sched .bad,.qb-pay-f.bad{color:var(--red-ink)}
.qb-pay-w{font-weight:var(--fw-2);color:var(--ink);margin-bottom:4px;line-height:1.4}
.qb-pay-f{margin-top:4px;padding-top:4px;border-top:1px solid var(--line)}
.qdoc-wrap{background:var(--preview-bg)}
.qdoc{background:var(--mail-paper);border:1px solid var(--mail-frame);border-radius:var(--r-card);padding:var(--s-5);max-width:640px;margin:0 auto;font-size:var(--fs-3);color:var(--ink);box-shadow:var(--sh-1)}
.qd-head{display:flex;justify-content:space-between;gap:var(--s-4);align-items:flex-start;border-bottom:2px solid var(--mail-navy);padding-bottom:var(--s-3);margin-bottom:var(--s-3)}
.qd-head h3{margin:2px 0;font-size:var(--fs-5)}
.qd-s{color:var(--ink-2);font-size:var(--fs-2)}
.qd-logo{font-weight:var(--fw-2);color:var(--mail-navy);white-space:nowrap}
.qd-k{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin-top:var(--s-4)}
.qd-head .qd-k{margin-top:0}
.qdoc table{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
.qdoc th{text-align:left;font-size:var(--fs-1);color:var(--ink-2);font-weight:var(--fw-2);padding:4px 0;border-bottom:1px solid var(--mail-rule)}
.qdoc td{padding:6px 0;border-bottom:1px solid var(--line);vertical-align:top}
.qdoc td small{display:block;color:var(--ink-2);font-size:var(--fs-1)}
.qdoc .r{text-align:right;white-space:nowrap;padding-left:var(--s-3)}
.qdoc tr.disc td{color:var(--win-ink)}
.qd-tot{display:grid;grid-template-columns:1fr auto;gap:4px var(--s-3);margin:var(--s-3) 0 0}
.qd-tot dd{margin:0;text-align:right;white-space:nowrap}
.qd-tot .big{font-weight:var(--fw-2);font-size:var(--fs-4);padding-top:var(--s-2);border-top:2px solid var(--mail-navy)}
.qd-deals{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-3)}
.qd-deals span{background:var(--win-wash);color:var(--win-ink);border-radius:var(--r-pill);padding:2px 10px;font-size:var(--fs-1);font-weight:var(--fw-2)}
.qd-notes{margin:4px 0 0;font-size:var(--fs-2)}
.qd-foot{margin:var(--s-4) 0 0;font-size:var(--fs-1);color:var(--ink-2)}
/* the card's Quote tab: ours and Pylon's, each with its history */
.qt-sec{margin-bottom:var(--s-4)}
.qt-sec .sc-h .sub{margin-left:0;background:var(--well);border-radius:var(--r-pill);padding:0 8px}
.sc-st.deciding{margin-left:auto;display:inline-flex;align-items:center;gap:4px}
.sc-st.deciding + .sc-st{margin-left:0}
.qt-fold{margin:0 0 var(--s-3)}
.qt-fold summary{cursor:pointer;font-size:var(--fs-2);color:var(--ink-2);font-weight:var(--fw-2);padding:var(--s-1) 0}
.qt-fold .sc-q{opacity:.75}
.py-steps{list-style:none;margin:var(--s-2) 0;padding:0;display:flex;gap:var(--s-1);flex-wrap:wrap}
.py-steps li{display:flex;align-items:center;gap:6px;font-size:var(--fs-2);color:var(--ink-3);background:var(--well);border-radius:var(--r-pill);padding:3px 10px 3px 4px}
.py-steps li span{width:18px;height:18px;border-radius:50%;border:1.5px dashed var(--ink-3);display:inline-flex;align-items:center;justify-content:center}
.py-steps li small{color:var(--ink-2);font-size:var(--fs-1)}
.py-steps li.done{color:var(--win-ink);background:var(--win-wash)}
.py-steps li.done span{border:0;background:var(--win);color:var(--surface)}
.sc-q .qt-bar{margin-top:var(--s-2)}
/* the job summary to approve or edit */
.job-coup{margin-bottom:var(--s-4)}
.job-coup .sc-h .sub{margin-left:0;color:var(--red-ink)}
.coup-opts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.coup-opts.one{grid-template-columns:1fr}
.ask-yn{margin-top:6px}
.py-flags{display:flex;gap:var(--s-4);margin-top:var(--s-3);font-size:var(--fs-2)}
.ask-yn button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.sc-src.credit{display:flex;align-items:center;gap:4px;color:var(--win-ink)}
.coup{display:flex;gap:var(--s-2);align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-ctl);padding:var(--s-2) var(--s-3);cursor:pointer;background:var(--surface);font-size:var(--fs-2)}
.coup.on{border-color:var(--accent-hover);background:color-mix(in srgb,var(--accent-wash) 45%,var(--surface))}
.coup input{accent-color:var(--accent-hover);margin-top:3px}
.coup > span:not(.pill){flex:1}
.coup .pill{flex:none}
.job-root .m-foot{position:sticky;bottom:0;z-index:2;border-radius:0 0 var(--r-dialog) var(--r-dialog)}
.coup small{display:block;color:var(--ink-2);font-size:var(--fs-1)}
.job-fields{display:flex;flex-direction:column;gap:var(--s-2)}
.jf{display:flex;flex-direction:column;gap:4px;padding:var(--s-2);border-radius:var(--r-ctl)}
.jf label{font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--ink-2);display:flex;align-items:center;gap:var(--s-2)}
.jf.changed{background:color-mix(in srgb,var(--accent-wash) 55%,var(--surface));box-shadow:inset 3px 0 0 var(--accent-hover)}
.chg-tag{font-size:var(--fs-1);color:var(--accent-ink);background:var(--accent-wash);border-radius:var(--r-pill);padding:0 8px}
.jf .input{flex:none;width:100%;font-family:inherit}
.jf .input.reason{border-color:var(--accent-hover)}
.jf .btn-link{align-self:flex-start;font-size:var(--fs-1)}
@media (max-width:600px){.coup-opts{grid-template-columns:1fr}.qdoc{padding:var(--s-4)}}
.qt-bar{display:flex;justify-content:flex-end;margin-bottom:var(--s-3)}
.qt-foot{margin-top:var(--s-2)}
.job-sheet{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-4);background:var(--surface-2)}
.job-row{display:flex;gap:var(--s-3);padding:6px 0;border-bottom:1px solid var(--line);font-size:var(--fs-3)}
.job-row .k{flex:0 0 88px;color:var(--ink-2);font-size:var(--fs-2)}
.job-sheet .sc-lines{margin-top:var(--s-2)}
.ph-head{font-size:var(--fs-2);color:var(--ink-2);margin-bottom:var(--s-3)}
.ph-head b{color:var(--ink)}
.sc-ph figcaption .btn{margin-top:6px}

/* ============================================================================================ MESSAGES: one stream */
.stream{margin-top:var(--s-3);max-height:280px;overflow-y:auto;background:var(--surface-3);border-radius:var(--r-card);padding:var(--s-3);display:flex;flex-direction:column;gap:var(--s-2)}
.st-day{text-align:center;font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin:var(--s-1) 0}
.st-msg{display:flex;flex-direction:column;max-width:82%}
.st-msg.in{align-self:flex-start}
.st-msg.out{align-self:flex-end;align-items:flex-end}
.st-bubble{background:var(--surface);border-radius:14px 14px 14px 4px;padding:8px 12px;font-size:var(--fs-2);line-height:1.45;box-shadow:var(--sh-1);white-space:pre-wrap;word-wrap:break-word}
.st-msg.out .st-bubble{background:var(--accent-wash);color:var(--accent-ink);border-radius:14px 14px 4px 14px}
.st-bubble b{display:block;font-size:var(--fs-2)}
.st-meta{display:flex;align-items:center;gap:4px;font-size:var(--fs-1);color:var(--ink-3);margin-top:2px}
.st-open{color:var(--red-ink)}
.cp-meta{display:flex;gap:var(--s-3);font-size:var(--fs-1);color:var(--ink-2);margin-top:6px}
.cp-meta .bad{color:var(--red-ink);font-weight:var(--fw-2)}

/* ============================================================================================ CUSTOMER JOURNEY */
.jn-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:var(--s-2)}
.jn-ph{position:relative;padding:0;border:2px solid transparent;border-radius:var(--r-ctl);overflow:hidden;cursor:pointer;background:var(--surface-3);aspect-ratio:4/3;transition:border-color var(--t-1),transform var(--t-1)}
.jn-ph img{width:100%;height:100%;object-fit:cover;display:block;opacity:.75;transition:opacity var(--t-1)}
.jn-ph:hover img{opacity:1}
.jn-ph.on{border-color:var(--win)}
.jn-ph.on img{opacity:1}
.jn-ph .tick{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:var(--win);color:var(--surface);display:flex;align-items:center;justify-content:center}
.jn-ph:active{transform:scale(.97)}
.jn-count{font-size:var(--fs-1);color:var(--ink-2);margin-top:6px}

/* ============================================================================================ LIBRARY */
.lib{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:var(--s-5);align-items:start}
.lib-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:var(--s-3);position:sticky;top:calc(var(--topbar-h) + 16px);max-height:calc(100vh - var(--topbar-h) - 120px);overflow-y:auto}
.lib-filters{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-2)}
.lib-filters .seg{flex-wrap:wrap}
.lib-filters .input{flex:0 0 auto;width:100%}
#lib-frame{max-width:520px;margin:0 auto}
.lib-prev .sc-subj{max-width:520px;margin:0 auto var(--s-2)}
.lib-group{margin-top:var(--s-3)}
.lib-gh{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);padding:0 var(--s-2) var(--s-1)}
.lib-row{display:flex;align-items:center;gap:var(--s-2);width:100%;text-align:left;border:0;background:none;border-radius:var(--r-ctl);padding:8px;cursor:pointer;color:var(--ink)}
.lib-row .ic{color:var(--ink-3)}
.lib-row:hover{background:var(--hover)}
.lib-row.on{background:var(--accent-wash)}
.lib-row.off{opacity:.55}
.lib-row .t{flex:1;min-width:0}
.lib-row .t b{display:block;font-size:var(--fs-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-row .t small{display:block;font-size:var(--fs-1);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-row .pill{display:inline-flex;align-items:center;gap:2px}
.lib-detail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:var(--s-5);min-width:0}
.lib-dh{display:flex;align-items:flex-start;gap:var(--s-4)}
.lib-dh .hd{flex:1;min-width:0}
.lib-dh h2{font-size:var(--fs-5)}
.lib-dh .sub{font-size:var(--fs-1);color:var(--ink-3)}
.lib-versions{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin:var(--s-3) 0}
.lib-versions .ver{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:3px 4px 3px 10px;font-size:var(--fs-2);font-weight:var(--fw-2);cursor:pointer}
.lib-versions .ver.on{border-color:var(--accent-hover);box-shadow:var(--ring)}
.lib-who{font-size:var(--fs-2);color:var(--ink-2);margin-left:auto}
.lib-actions{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-4)}
.lib-prev-head{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-4) 0 var(--s-2)}
.lib-prev-head .select-wrap{margin-left:auto}
.lib-why{font-size:var(--fs-2);margin-top:var(--s-2)}
.lib-prev{position:relative;background:var(--preview-bg);border-radius:var(--r-card);padding:var(--s-4)}
.lib-phone{max-width:380px;position:relative;min-height:120px}
.dots-layer{position:absolute;inset:0;pointer-events:none}
.lib-prev.dotting .dots-layer{pointer-events:auto;cursor:crosshair;background:color-mix(in srgb,var(--accent) 6%,transparent);border-radius:var(--r-card);box-shadow:inset 0 0 0 2px var(--accent)}
.cdot{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:var(--fs-1);font-weight:var(--fw-2);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--surface),var(--sh-2);pointer-events:auto}
.cdot.done{background:var(--win-wash);color:var(--win-ink)}
.dot-pop{position:absolute;transform:translate(-12px,-12px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-3);padding:var(--s-3) var(--s-3) var(--s-2) 40px;width:280px;z-index:2}
.dot-pop .cdot{left:20px;top:22px;transform:none}
.dot-pop textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-ctl);padding:6px 8px;font-size:var(--fs-2);resize:vertical}
.dot-pop .row{display:flex;gap:var(--s-2);justify-content:flex-end;margin-top:var(--s-2)}
.lib-comments{margin-top:var(--s-5)}
.lib-c{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-2) 0;border-top:1px solid var(--line);font-size:var(--fs-2)}
.lib-c:first-of-type{border-top:0}
.lib-c > div{flex:1}
.lib-c.done{opacity:.6}
.dot-n{flex:0 0 22px;height:22px;border-radius:50%;background:var(--accent-wash);color:var(--accent-ink);font-size:var(--fs-1);font-weight:var(--fw-2);display:inline-flex;align-items:center;justify-content:center}
.lib-notes{margin-top:var(--s-4);font-size:var(--fs-2);color:var(--ink-2)}
.lib-table{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:var(--s-4) var(--s-5);margin-bottom:var(--s-4)}
.lt-row{display:flex;align-items:center;gap:var(--s-3);padding:10px 0;border-top:1px solid var(--line)}
.lt-row:first-of-type{border-top:0}
.lt-row .img{width:44px;height:44px;border-radius:var(--r-ctl);background:var(--surface-3);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;color:var(--accent-text)}
.lt-row .img img{height:44px}
.lt-row .t{flex:1;min-width:0}
.lt-row .t b{display:block;font-size:var(--fs-3)}
.lt-row .t small{display:block;font-size:var(--fs-1);color:var(--ink-2)}
.lt-row .r{font-weight:var(--fw-2);white-space:nowrap}
.lib-banner{display:flex;align-items:center;gap:var(--s-2);background:var(--accent-wash);color:var(--accent-ink);border-radius:var(--r-ctl);padding:var(--s-2) var(--s-3);margin-bottom:var(--s-4);font-size:var(--fs-2)}
.lib-banner.soon{background:var(--them-wash);color:var(--them-ink)}
.lt-row.off{opacity:.65}
.lib-banner.arch{background:var(--well-2);color:var(--ink-2)}
.lt-row{flex-wrap:wrap}
.lt-next{flex:1 0 100%;display:flex;align-items:center;gap:var(--s-2);margin:2px 0 0 0;padding:var(--s-2) var(--s-3);border-radius:var(--r-ctl);background:color-mix(in srgb,var(--them-wash) 60%,var(--surface));font-size:var(--fs-2);color:var(--ink)}
.lt-next > span:not(.sc-st){flex:1;min-width:0}
.lt-next small{display:block;color:var(--ink-2);font-size:var(--fs-1)}
.lt-next .ic{color:var(--them-ink)}
#lib-arch{margin-left:var(--s-2)}
/* quick edit: the box, the word diff, and the way out */
.qe{border:1px solid var(--accent-hover);border-radius:var(--r-card);padding:var(--s-3);margin:var(--s-3) 0;background:color-mix(in srgb,var(--accent-wash) 30%,var(--surface));display:flex;flex-direction:column;gap:var(--s-2)}
.qe-h{display:flex;gap:var(--s-2);align-items:baseline;flex-wrap:wrap;font-size:var(--fs-3)}
.qe-h .muted{font-size:var(--fs-1)}
.qe .input{flex:none;width:100%;font-family:inherit;line-height:1.45}
.qe-diff{min-height:44px;font-size:var(--fs-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-ctl);padding:var(--s-2) var(--s-3);line-height:1.6}
.qe-k{display:block;font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-2);margin-bottom:2px}
.qe-words{white-space:pre-wrap}
.qe-words ins{background:var(--win-wash);color:var(--win-ink);text-decoration:none;border-radius:3px;padding:0 2px}
.qe-words del{background:var(--red-wash);color:var(--red-ink);border-radius:3px;padding:0 2px}
.qe .row{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.qe .row .hint{margin-right:auto;font-size:var(--fs-1);color:var(--ink-2)}
/* "also update?" and the effective date */
.also{margin-top:var(--s-3);border:1px solid var(--line);border-radius:var(--r-ctl);padding:var(--s-2) var(--s-3)}
.also-h{font-size:var(--fs-2);font-weight:var(--fw-2);display:flex;flex-direction:column;gap:2px;margin-bottom:var(--s-1)}
.also-h .muted{font-weight:var(--fw-1);font-size:var(--fs-1)}
.also-r{display:flex;gap:var(--s-2);align-items:flex-start;padding:6px 0;border-top:1px solid var(--line);font-size:var(--fs-2);cursor:pointer}
.also-r:first-of-type{border-top:0}
.also-r input{accent-color:var(--accent-hover);margin-top:3px}
.also-r .k{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-2);background:var(--well);border-radius:var(--r-pill);padding:0 8px;flex:none}
.also-r .t{flex:1;min-width:0}
.also-r small{display:block;color:var(--ink-2);font-size:var(--fs-1)}
.eff-note{margin:4px 0 0;font-size:var(--fs-2);color:var(--them-ink);font-weight:var(--fw-2)}

/* ============================================================================================ DASHBOARD */
.db-sec-h{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin:var(--s-5) 0 var(--s-2)}
.db-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-3)}
.db-attn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
.db-tile,.db-at{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:var(--s-4)}
.db-l{font-size:var(--fs-2);color:var(--ink-2)}
.db-v{font-size:var(--fs-6);font-weight:var(--fw-2);letter-spacing:-.02em;line-height:1.2;margin:2px 0}
.db-tile .db-v{font-size:32px}
.db-h{font-size:var(--fs-1);color:var(--ink-3)}
.db-at .st{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-1);font-weight:var(--fw-2);border-radius:var(--r-pill);padding:1px 8px;background:var(--well);color:var(--ink-2)}
.db-at.critical .st{background:var(--red-wash);color:var(--red-ink)}
.db-at.warning .st{background:var(--accent-wash);color:var(--accent-ink)}
.db-at.good .st{background:var(--win-wash);color:var(--win-ink)}
.db-at.info .st{background:var(--them-wash);color:var(--them-ink)}
.db-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s-3);margin-top:var(--s-5)}
.db-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--s-3);margin-top:var(--s-3)}
.db-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:var(--s-4) var(--s-5);min-width:0}
.db-people{margin-top:var(--s-3)}
.db-ch{display:flex;align-items:baseline;gap:var(--s-2);margin-bottom:var(--s-3)}
.db-ch h3{font-size:var(--fs-4)}
.db-ch .muted{margin-left:auto;font-size:var(--fs-2)}
.db-bars{display:flex;flex-direction:column;gap:6px}
.db-bar,.db-meter{display:grid;grid-template-columns:minmax(90px,140px) 1fr minmax(32px,auto);align-items:center;gap:var(--s-2);font-size:var(--fs-2)}
.db-bar .lbl,.db-meter .lbl{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-bar .track{height:12px;border-radius:0 4px 4px 0;position:relative}
.db-bar .track i{display:block;height:100%;background:var(--chart);border-radius:0 4px 4px 0;transition:width var(--t-2) var(--ease)}
.db-bar .track i.win{background:var(--win)}
.db-bar .n,.db-meter .n{text-align:right;font-weight:var(--fw-2)}
.db-meters{display:flex;flex-direction:column;gap:6px;margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line)}
.db-meter .track{height:8px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--chart) 16%,var(--surface));overflow:hidden}
.db-meter .track i{display:block;height:100%;background:var(--chart);border-radius:var(--r-pill)}
.db-meter.none .n{color:var(--ink-3);font-weight:var(--fw-1);white-space:nowrap}
.db-mini{display:flex;gap:var(--s-4);flex-wrap:wrap;font-size:var(--fs-2);color:var(--ink-2);margin-top:var(--s-3)}
.db-mini b{color:var(--ink)}
.db-off{font-size:var(--fs-1);color:var(--ink-3);margin-top:var(--s-2)}
.db-table{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
.db-table th{text-align:left;font-weight:var(--fw-2);color:var(--ink-2);font-size:var(--fs-1);padding:6px 8px 6px 0;border-bottom:1px solid var(--line)}
.db-table td{padding:8px 8px 8px 0;border-top:1px solid var(--line);vertical-align:top}
.db-table tr:first-child td{border-top:0}
.db-table td small{display:block;color:var(--ink-3);font-size:var(--fs-1)}
.db-table .r{text-align:right;white-space:nowrap}
.db-table tr[data-open]{cursor:pointer}
.db-table tr[data-open]:hover td{background:var(--surface-2)}
.db-tip{position:fixed;z-index:980;transform:translate(-50%,-100%);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:var(--fs-2);font-weight:var(--fw-2);box-shadow:var(--sh-2);pointer-events:none;white-space:nowrap}

/* ============================================================================================ SETTINGS */
.set-path{display:flex;gap:var(--s-3);align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:var(--s-4) var(--s-5);margin-bottom:var(--s-4);font-size:var(--fs-3)}
.set-path > .ic{width:20px;height:20px;margin-top:2px}
.set-path.ok > .ic{color:var(--win)}
.set-path.warn > .ic{color:var(--accent-text)}
.set-path.bad > .ic{color:var(--red)}
.set-path ul{margin:var(--s-1) 0 0 18px;font-size:var(--fs-2);color:var(--ink-2)}
.set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.set-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:var(--s-4) var(--s-5);min-width:0}
.set-wide{grid-column:1 / -1}
.set-h{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-2)}
.set-h h3{font-size:var(--fs-4);display:flex;align-items:center;gap:var(--s-2)}
.set-h h3 .ic{color:var(--accent-text)}
.set-h > :last-child:not(h3){margin-left:auto}
.set-p{font-size:var(--fs-2);color:var(--ink-2);margin:var(--s-1) 0 var(--s-3)}
.set-row{display:flex;align-items:center;gap:var(--s-3);padding:10px 0;border-top:1px solid var(--line)}
/* the admin's To check list (Settings) and its chip (Dashboard) */
.db-ov{margin-top:var(--s-4)}
.db-rw{margin-top:var(--s-4)}
.set-rw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-3);align-items:end}
.set-rw .sc-switch{grid-column:1/-1;margin-top:var(--s-2)}
.set-rw .field:last-child{grid-column:1/-1}
.rw-progs{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin-top:4px;font-weight:var(--fw-1);color:var(--ink)}
.rw-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-3)}
.rw-c{display:flex;flex-direction:column;gap:2px;padding:var(--s-2) var(--s-3);border-radius:var(--r-ctl);background:var(--surface-3)}
.rw-c b{font-size:var(--fs-5)}
.rw-c span{font-size:var(--fs-2);color:var(--ink-2)}
.rw-c small{font-size:var(--fs-1);color:var(--win-ink)}
@media (max-width:720px){.rw-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.partners .set-h{display:flex;align-items:center;gap:var(--s-2)}
.partners .set-h .btn{margin-left:auto}
.partners .n{font-size:var(--fs-1);background:var(--well);border-radius:var(--r-pill);padding:0 8px}
.pt-table td small{display:block;color:var(--ink-2);font-size:var(--fs-1)}
.pt-table tr.off{opacity:.6}
@media (max-width:720px){.pt-table th:nth-child(n+3):nth-child(-n+5),.pt-table td:nth-child(n+3):nth-child(-n+5){display:none}.pt-table{table-layout:fixed;width:100%}.pt-table td,.pt-table th{overflow-wrap:anywhere}.pt-table .pill{white-space:normal}.pt-table th:last-child,.pt-table td:last-child{width:44px}}
.pt-note{font-size:var(--fs-1);margin-top:var(--s-2)}
.pt-com{margin-top:var(--s-3);padding-top:var(--s-2)}
.tocheck{margin-bottom:var(--s-4);border-color:color-mix(in srgb,var(--draft) 35%,var(--line));background:color-mix(in srgb,var(--draft-wash) 45%,var(--surface))}
.tocheck .set-h h3 .ic{color:var(--draft)}
.tocheck .n{font-size:var(--fs-1);background:var(--draft-wash);color:var(--draft);border-radius:var(--r-pill);padding:0 8px}
.tc-row{display:flex;align-items:center;gap:var(--s-2);padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.tc-row .t{flex:1;min-width:220px}
.tc-row .t b{display:block;font-size:var(--fs-3)}
.tc-row .t small{display:block;color:var(--ink-2);font-size:var(--fs-2)}
.set-row small.chk{display:flex;align-items:center;gap:4px;color:var(--draft);font-weight:var(--fw-2);margin-top:2px}
.set-row.check{box-shadow:inset 3px 0 0 var(--draft);padding-left:var(--s-2)}
.set-row.flash{animation:flash 1.1s var(--ease)}
.chk-chip{display:inline-flex;align-items:center;gap:4px;margin-left:var(--s-2);font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--draft);background:var(--draft-wash);border-radius:var(--r-pill);padding:1px 10px;text-decoration:none;vertical-align:middle}
.chk-chip:hover{text-decoration:underline}
.set-row:first-of-type{border-top:0}
.set-row .t{flex:1;min-width:0}
.set-row .t b{display:block;font-size:var(--fs-3)}
.set-row .t small{display:block;font-size:var(--fs-1);color:var(--ink-2)}
.set-row .v{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;justify-content:flex-end;flex:0 1 auto;min-width:0;max-width:100%}
.set-row .v .input{width:120px;flex:0 0 auto;padding:5px 10px}
.set-val{font-weight:var(--fw-2);min-width:0;overflow-wrap:anywhere}
.set-draft{display:flex;align-items:center;gap:var(--s-2);background:var(--accent-wash);color:var(--accent-ink);border-radius:var(--r-ctl);padding:var(--s-2) var(--s-3);font-size:var(--fs-2);margin:var(--s-1) 0 var(--s-2)}
.set-draft span{flex:1;min-width:0;overflow-wrap:anywhere}
.set-list{margin:0 0 var(--s-3) 20px;font-size:var(--fs-3);display:flex;flex-direction:column;gap:4px}
.set-lost{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-3)}
.set-lr{display:flex;gap:var(--s-2);align-items:center}
.set-lr .input{padding:5px 10px;font-size:var(--fs-2)}
.set-steps td small{display:block}
.set-wait{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.set-wait .input{width:64px;padding:4px 8px;flex:0 0 auto;text-align:right}
.set-wait .muted{font-size:var(--fs-1)}
.set-stages{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-2)}
.set-stage{border:1px solid var(--line);border-radius:var(--r-ctl);padding:var(--s-2) var(--s-3);font-size:var(--fs-2)}
.set-stage small{display:block;color:var(--ink-3);font-size:var(--fs-1)}
.set-stage.off{background:var(--surface-3)}

/* ============================================================================================ SERVICE (not live) */
.sv-flow{display:flex;align-items:stretch;gap:var(--s-2);overflow-x:auto;padding-bottom:var(--s-2);margin-bottom:var(--s-4)}
.sv-step{flex:1 0 150px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:var(--s-3);font-size:var(--fs-2)}
.sv-step b{display:block;margin:6px 0 2px;font-size:var(--fs-3)}
.sv-step small{display:block;color:var(--ink-2);font-size:var(--fs-1);line-height:1.45}
.sv-ic{display:inline-flex;width:32px;height:32px;border-radius:50%;background:var(--them-wash);color:var(--them-ink);align-items:center;justify-content:center}
.sv-arrow{align-self:center;color:var(--ink-3);flex:0 0 auto}
.sv-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s-3)}
.sv-row{display:flex;align-items:flex-start;gap:var(--s-3);padding:10px 0;border-top:1px solid var(--line);cursor:pointer}
.sv-row:first-of-type{border-top:0}
.sv-row .t{flex:1;min-width:0}
.sv-row .t b{display:block;font-size:var(--fs-3)}
.sv-row .t small{display:block;font-size:var(--fs-2);color:var(--ink-2)}
.sv-row .t small.muted{font-size:var(--fs-1);color:var(--ink-3)}
.sv-clock{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-1);font-weight:var(--fw-2);border-radius:var(--r-pill);padding:2px 8px;background:var(--accent-wash);color:var(--accent-ink);white-space:nowrap}
.sv-clock.late{background:var(--red-wash);color:var(--red-ink)}
.sv-clock.paused{background:var(--well);color:var(--ink-2)}
.sv-later{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-4);font-size:var(--fs-2);color:var(--ink-2)}

@media (max-width:980px){
  .lib{grid-template-columns:1fr}
  .lib-list{position:static;max-height:none}
  .db-kpis,.db-attn{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-two,.set-grid,.sv-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .db-people{overflow-x:auto}
  .db-tile .db-v{font-size:var(--fs-6)}
  .lib-detail,.lib-table,.db-card,.set-card{padding:var(--s-3) var(--s-4)}
  .lib-dh{flex-wrap:wrap}
  .lib-who{margin-left:0;flex-basis:100%}
  .set-row{flex-wrap:wrap}
  .set-row .v{justify-content:flex-start}
  .sv-flow{flex-wrap:nowrap}
}

/* ============================================================================================ DESKTOP FRAMES */
/* On a desktop the card and the Send dialog are a fixed frame: the head, the next step and the footer stay put and the
   panes scroll inside, so the email preview stays in view while you pick. */
@media (min-width:721px){
  .modal.card-m,.modal.send-m,.modal.frame{display:flex;flex-direction:column;max-height:calc(100vh - 96px)}
  .modal.send-m,.modal.frame{overflow:hidden}
  .card-root,.send-root,.frame-root{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  .card-root > .sc-pane,.frame-root > .frame-body{flex:1 1 auto;min-height:120px;overflow-y:auto;overscroll-behavior:contain}
  .send-root > .sc-of{flex:1 1 auto;min-height:0}
  .sc-of-form,.sc-of-prev{overflow-y:auto;overscroll-behavior:contain;min-height:0}
  .card-root > :not(.sc-pane),.send-root > :not(.sc-of),.frame-root > :not(.frame-body){flex:0 0 auto}
}

/* ============================================================================================ NARROWER SCREENS */
@media (max-width:1180px){
  .sc-of{grid-template-columns:minmax(0,1fr) 360px}
  .streak .lbl{display:none}
}
@media (max-width:980px){
  .board{grid-template-columns:repeat(var(--cols),264px);overflow-x:auto;padding-bottom:var(--s-2);scroll-snap-type:x mandatory}
  .board .col{scroll-snap-align:start}
  .col-head{position:static}
  .legend-lite{display:none}
}
/* phones: the tabs collapse into one menu, the board is one column at a time (swipe), the card and the dialogs fill
   the screen */
@media (max-width:720px){
  :root{--topbar-h:108px}
  .top-row{padding:0 var(--s-3);gap:var(--s-2)}
  .brand .txt,.brand .v{display:none}
  .nav{display:none}
  .nav-menu{display:inline-flex;flex:1 1 auto;justify-content:space-between}
  .bar-user .user-chip{display:none}
  .wrap{padding:var(--s-4) var(--s-3) 88px}
  .strip{gap:var(--s-3) var(--s-4)}
  .strip .kpi b{font-size:var(--fs-5)}
  .progs .prog-note{display:none}
  .seg button{padding:6px 12px}
  .page-head .seg,.set-h .seg{flex-wrap:wrap}               /* section switches wrap on a phone; the program tabs scroll */
  .sc-intake{flex-basis:100%;padding:var(--s-2)}
  .sc-intake label{display:none}
  .board{grid-template-columns:repeat(var(--cols),86vw);gap:var(--s-3);margin:0 calc(-1 * var(--s-3));padding:0 var(--s-3) var(--s-2);scroll-padding:0 var(--s-3)}
  .overlay{padding:0}
  .modal.card-m,.modal.send-m,.modal.small,.modal.medium,.modal.wide,.modal.frame{border-radius:0;min-height:100vh;max-width:none}
  .m-actions,.sc-of-foot,.m-foot{border-radius:0}
  .m-foot{position:sticky;bottom:0}
  .m-head{padding:var(--s-4) var(--s-4) var(--s-1)}
  .m-chips{padding:var(--s-2) var(--s-4) var(--s-3)}
  .m-alert{padding:var(--s-2) var(--s-4)}
  .m-body{padding:var(--s-1) var(--s-4) var(--s-4)}
  .fields{grid-template-columns:1fr}
  .sc-contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sc-ci:nth-child(3){border-left:0}
  .sc-ci:nth-child(n+3){border-top:1px solid var(--line)}
  .sc-next{flex-direction:column;align-items:stretch;gap:var(--s-3);padding:var(--s-3) var(--s-4)}
  .sc-next-b{max-width:none;justify-content:stretch}
  .sc-next-b .btn{flex:1 1 auto}
  .sc-tabs{padding:var(--s-1) var(--s-3) 0}
  .sc-pane{padding:var(--s-4)}
  .sc-ov{grid-template-columns:1fr;gap:var(--s-5)}
  .sc-ov .rail-wrap{order:-1}
  .m-actions{padding:var(--s-2) var(--s-3)}
  .m-actions .sep{display:none}
  .sc-of{grid-template-columns:1fr}
  .sc-of-form{border-right:0;padding:var(--s-1) var(--s-4) var(--s-4)}
  .sc-of-prev{padding:var(--s-4)}
  .sc-tpls{gap:var(--s-2)}
  .sc-tpl .def{display:none}
  .sc-of-foot{padding:var(--s-2) var(--s-3)}
  .sc-of-foot .sum{display:none}
  .sc-bopt .s{display:none}
  .demo-bar{gap:var(--s-2);padding:6px var(--s-3)}
  .demo-bar .backend,.demo-bar .long{display:none}
  .toasts{bottom:52px}
}
@media (hover:none){table.sc-facts tr.known .sc-fix .btn-link{opacity:1}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* contract v2 additions: the pathway's errors, a step that is off, a draft's reason */
.set-path li.bad{color:var(--red-ink)}
.set-steps tr.off td{opacity:.55}
.set-draft small{display:block;color:var(--ink-2);font-weight:var(--fw-1)}
.set-list small{display:block}

/* ============================================================================================ TODAY
   The approved prototype (sales-app-v2-today/design/today), ported onto the app's tokens. Desktop: the situations on
   the left, the chosen one's people in the middle, the person on the right. Narrower: the overview is home; a
   situation shows its people; the person opens as a bottom sheet. */
.td-main{display:grid;grid-template-columns:300px minmax(0,440px) minmax(0,1fr);gap:var(--s-5);align-items:start}
.td-nav,.td-list{min-width:0}
.td-pane{position:sticky;top:calc(var(--topbar-h) + var(--s-5));height:calc(100vh - var(--topbar-h) - 96px);min-height:480px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);overflow:hidden;display:flex;flex-direction:column}
.td-pane .pane-empty{margin:auto;text-align:center;color:var(--ink-3);font-size:var(--fs-2);max-width:260px}
.td-pane .pane-empty .ic{color:var(--line-strong);margin-bottom:var(--s-2)}
#page-today.all-clear .td-main{grid-template-columns:minmax(0,640px);justify-content:center}
#page-today.all-clear .td-list,#page-today.all-clear .td-pane{display:none}
#page-today .back{display:none}
#page-today .hello{padding:var(--s-2) 0 var(--s-4)}
#page-today .hello h1{font-size:var(--fs-6);line-height:1.2;letter-spacing:-.02em}
#page-today .hello p{margin-top:4px;color:var(--ink-2);font-size:var(--fs-2)}
#page-today .hello p b{color:var(--ink);font-weight:var(--fw-2)}
#page-today .hello p .late{color:var(--red-ink);font-weight:var(--fw-2)}
.td-scope{margin-bottom:var(--s-3);flex-wrap:wrap}
#page-today .start{width:100%;margin-bottom:var(--s-4);justify-content:center}
#page-today .start .ic{color:var(--accent-text)}
#page-today .start.on{border-color:var(--accent-hover);background:var(--accent-wash)}
.sits{display:flex;flex-direction:column;gap:var(--s-2)}
.sit{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;padding:var(--s-3) var(--s-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-ctl);box-shadow:var(--sh-1);cursor:pointer;color:var(--ink);font:inherit;transition:border-color var(--t-1) var(--ease),box-shadow var(--t-1) var(--ease)}
.sit:hover{border-color:var(--line-strong)}
.sit.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.sit-top{display:flex;align-items:center;gap:var(--s-2)}
.sit-name{font-size:var(--fs-3);font-weight:var(--fw-2);letter-spacing:-.01em}
.sit-n{margin-left:auto;min-width:24px;height:24px;padding:0 8px;border-radius:var(--r-pill);background:var(--surface-3);font-size:var(--fs-1);font-weight:var(--fw-2);display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.sit-n.late{background:var(--red-wash);color:var(--red-ink)}
.sit-chev{color:var(--ink-3)}
.sit-says{font-size:var(--fs-1);color:var(--ink-3)}
.sit-hot{display:flex;align-items:center;gap:var(--s-2);margin-top:4px;min-width:0}
.sit-hot-t{font-size:var(--fs-1);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sit-hot-t b{color:var(--ink);font-weight:var(--fw-2)}
.sit.clear{box-shadow:none;background:transparent;border-style:dashed}
.sit.clear .sit-name{color:var(--ink-2)}
.sit-ok{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--win-ink)}
#page-today .av,#td-sheet .av{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-3);color:var(--ink);font-size:var(--fs-1);font-weight:var(--fw-2);flex:none}
#page-today .av.sm,#td-sheet .av.sm{width:24px;height:24px;font-size:10px}
#page-today .av.unknown,#td-sheet .av.unknown{background:var(--accent-wash);color:var(--accent-ink)}
.g-top{padding:var(--s-2) 0 var(--s-4)}
.g-top h1{font-size:var(--fs-6);line-height:1.2;letter-spacing:-.02em;display:flex;align-items:center;gap:var(--s-2)}
.g-top p{margin-top:4px;color:var(--ink-2);font-size:var(--fs-2)}
.g-n{font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--ink-3)}
.g-clear{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r-ctl);background:var(--win-wash);color:var(--win-ink)}
.g-clear b{font-size:var(--fs-2)}
.g-clear p{font-size:var(--fs-1)}
.g-clear .btn{margin-left:auto}
.tr-rows{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);overflow:hidden}
.tr-row{position:relative;overflow:hidden;border-top:1px solid var(--line);background:var(--surface);touch-action:pan-y}
.tr-row:first-child{border-top:0}
.sw-under{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 var(--s-5);font-size:var(--fs-2);font-weight:var(--fw-2)}
.sw-under .r{color:var(--win-ink);display:flex;align-items:center;gap:var(--s-2)}
.sw-under .l{color:var(--accent-ink);display:flex;align-items:center;gap:var(--s-2);margin-left:auto}
.tr-row.sw-right .sw-under{background:var(--win-wash)}
.tr-row.sw-left .sw-under{background:var(--accent-wash)}
.tr-row.sw-right .sw-under .l,.tr-row.sw-left .sw-under .r{visibility:hidden}
.sw-top{position:relative;background:var(--surface);display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:0 var(--s-3);align-items:start;padding:var(--s-4);transition:transform var(--t-2) var(--ease),background var(--t-1) var(--ease)}
.tr-row.dragging .sw-top{transition:none}
.tr-row.sel .sw-top{background:var(--surface-3);box-shadow:inset 3px 0 0 var(--ink)}
.tr-row:hover .sw-top{background:var(--surface-2)}
.tr-row.sel:hover .sw-top{background:var(--surface-3)}
.r-open{position:absolute;inset:0;z-index:0;width:100%;border:0;background:none;cursor:pointer;padding:0}
.r-open:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
#page-today .r-av{grid-column:1;grid-row:1 / span 3;width:40px;height:40px;font-size:var(--fs-2)}
.r-l1{grid-column:2;grid-row:1;display:flex;align-items:baseline;gap:var(--s-2);min-width:0}
.r-name{font-size:var(--fs-3);font-weight:var(--fw-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.r-badge{font-size:10px;font-weight:var(--fw-2);letter-spacing:.03em;text-transform:uppercase;color:var(--them-ink);background:var(--them-wash);border-radius:var(--r-pill);padding:1px 6px;flex:none}
#page-today .clock{grid-column:3;grid-row:1;justify-self:end;font-size:var(--fs-1);color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
#page-today .clock.late{color:var(--red-ink);font-weight:var(--fw-2)}
.r-t{grid-column:2;grid-row:2;margin-top:2px;font-size:var(--fs-2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.r-go{grid-column:3;grid-row:2;align-self:center;justify-self:end;position:relative;z-index:1}
.r-why{grid-column:2 / span 2;grid-row:3;margin-top:4px;display:flex;align-items:flex-start;gap:var(--s-2);min-width:0;font-size:var(--fs-1);color:var(--ink-3);line-height:1.4}
.r-why .why{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.trail{display:inline-flex;align-items:center;gap:2px;flex:none;color:var(--ink-3);height:17px}
.trail .tr{display:inline-flex;align-items:center}
.trail .tr .ic{width:14px;height:14px}
.trail .tr i{font-style:normal;font-size:10px;font-weight:var(--fw-2);margin-left:1px}
.trail .tr.now{color:var(--ink-2)}
.trail .sep{width:10px;height:10px;opacity:.55}
.td-folds{margin-top:var(--s-4)}
.td-foot{margin-top:var(--s-2)}
#page-today .fold{border-top:1px solid var(--line)}
#page-today .fold:last-child{border-bottom:1px solid var(--line)}
#page-today .fold summary{list-style:none;display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) 4px;cursor:pointer;font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--ink-2);flex-wrap:wrap}
#page-today .fold summary small{flex-basis:100%;order:3;font-weight:var(--fw-1);color:var(--ink-3);font-size:var(--fs-1)}
#page-today .fold summary::-webkit-details-marker{display:none}
#page-today .fold summary .chev{margin-left:auto;transition:transform var(--t-2) var(--ease);color:var(--ink-3)}
#page-today .fold[open] summary .chev{transform:rotate(90deg)}
#page-today .fold summary .ok-n{color:var(--win-ink);background:var(--win-wash);border-radius:var(--r-pill);padding:0 8px;font-size:var(--fs-1)}
#page-today .fold ul{list-style:none;margin:0;padding:0 4px var(--s-3)}
#page-today .fold li{display:flex;align-items:center;gap:var(--s-3);padding:6px 0;font-size:var(--fs-2);color:var(--ink-2)}
#page-today .fold li b{color:var(--ink);font-weight:var(--fw-2)}
#page-today .fold li .t{margin-left:auto;color:var(--ink-3);font-size:var(--fs-1);white-space:nowrap}
#page-today .fold li .tick{width:20px;height:20px;border-radius:50%;background:var(--win-wash);color:var(--win-ink);display:flex;align-items:center;justify-content:center;flex:none}
#page-today .fold li .tick.win{background:var(--accent-wash);color:var(--accent-ink)}
#page-today .fold li .tick.auto{background:var(--them-wash);color:var(--them-ink)}
.fold-row{display:flex;align-items:center;gap:var(--s-3);width:100%;text-align:left;border:0;background:none;padding:4px 0;cursor:pointer;color:var(--ink-2);font:inherit;font-size:var(--fs-2)}
.fold-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fold-row:hover b{text-decoration:underline}
.td-clear{text-align:center;padding:48px var(--s-4) 32px}
.td-clear .sunbig{width:120px;height:120px;margin:0 auto var(--s-5);display:block;fill:none}
.td-clear .sunbig .core{fill:var(--accent)}
.td-clear .sunbig .halo{fill:var(--accent-wash)}
.td-clear .sunbig .rays{stroke:var(--accent-text);stroke-width:2.2;stroke-linecap:round;transform-origin:60px 60px;animation:rays-turn 1.2s var(--ease) both}
@keyframes rays-turn{from{transform:rotate(-35deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
.td-clear h1{font-size:28px;letter-spacing:-.025em}
.td-clear p{margin-top:var(--s-2);color:var(--ink-2)}
.td-clear .streak{display:inline-flex;align-items:center;gap:var(--s-2);margin-top:var(--s-4);padding:var(--s-2) var(--s-4);border-radius:var(--r-pill);background:var(--win-wash);color:var(--win-ink);font-size:var(--fs-2);font-weight:var(--fw-2)}
.td-clear .next{margin-top:var(--s-5);font-size:var(--fs-2);color:var(--ink-3)}
/* the person */
.p-head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line);flex:none}
.p-head .av{width:40px!important;height:40px!important;font-size:var(--fs-2)!important}
.p-why{flex:none;display:flex;align-items:flex-start;gap:var(--s-2);padding:var(--s-2) var(--s-5);background:var(--bg);border-bottom:1px solid var(--line);font-size:var(--fs-1);color:var(--ink-2);line-height:1.45}
.p-id{min-width:0;flex:1;text-align:left;border:0;background:none;padding:0;color:var(--ink);font:inherit;cursor:pointer}
div.p-id{cursor:default}
button.p-id:hover h2{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.p-id h2{font-size:var(--fs-5);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-id h2 .p-chev{width:16px;height:16px;color:var(--ink-3);vertical-align:-2px;margin-left:4px}
.p-id p{font-size:var(--fs-1);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-id .chip{display:inline-block;margin-left:4px;padding:0 8px;border-radius:var(--r-pill);background:var(--surface-3);font-weight:var(--fw-2)}
.ic-btn{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);background:var(--surface-3);border:0;flex:none;cursor:pointer}
.ic-btn:hover{background:var(--hover)}
.p-close{display:none}
.p-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--s-4) var(--s-5) var(--s-5)}
.p-more{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line)}
.todo{list-style:none;margin:0 0 var(--s-5);padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.todo-k,.thread-k{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-2)}
.thread-k{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-4)}
.thread-k::after{content:'';flex:1;height:1px;background:var(--line)}
.td{border:1px solid var(--line);border-radius:var(--r-ctl);padding:var(--s-3) var(--s-4);background:var(--surface);box-shadow:var(--sh-1)}
.td.late{border-color:color-mix(in srgb,var(--red) 30%,var(--surface));background:linear-gradient(180deg,var(--red-wash),var(--surface) 70%)}
.td.fix{border-color:color-mix(in srgb,var(--accent) 45%,var(--surface));background:linear-gradient(180deg,var(--accent-wash),var(--surface) 80%)}
.td-l1{display:flex;align-items:flex-start;gap:var(--s-3)}
.td-l1 .ti{color:var(--ink-2);margin-top:1px}
.td.late .ti{color:var(--red-ink)}
.td-t{flex:1;font-size:var(--fs-2);font-weight:var(--fw-2);line-height:1.4}
.td-t small{display:block;font-weight:var(--fw-1);color:var(--ink-2);margin-top:2px}
.td-reply{padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4)}
.td-reply .td-l1{align-items:center}
.td-acts{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3);padding-left:32px}
.td-field{margin-top:var(--s-3);padding-left:32px;display:flex;flex-direction:column;gap:6px}
.td-field label{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-2)}
.td-field input{height:44px;border:1px solid var(--line-strong);border-radius:var(--r-ctl);padding:0 12px;font-size:16px;background:var(--surface);color:var(--ink)}
.td-field input:focus{outline:none;border-color:var(--ink);box-shadow:var(--ring)}
.who-list{margin-top:var(--s-3);padding-left:32px;display:flex;flex-direction:column;gap:var(--s-2)}
.who-btn{display:flex;align-items:center;gap:var(--s-3);width:100%;text-align:left;padding:var(--s-3);border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--surface);cursor:pointer;color:var(--ink);font:inherit}
.who-btn:hover{background:var(--hover)}
.who-btn b{display:block;font-size:var(--fs-2)}
.who-btn small{display:block;font-size:var(--fs-1);color:var(--ink-2)}
.who-btn .go-t{margin-left:auto;font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--accent-ink);background:var(--accent-wash);border-radius:var(--r-pill);padding:4px 12px;white-space:nowrap}
.cleared{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r-ctl);background:var(--win-wash);color:var(--win-ink);font-weight:var(--fw-2);font-size:var(--fs-2);margin-bottom:var(--s-5)}
.cleared .btn{margin-left:auto}
.thread{display:flex;flex-direction:column;gap:var(--s-4)}
.msg{max-width:86%;display:flex;flex-direction:column;gap:4px}
.msg.in{align-self:flex-start}
.msg.out{align-self:flex-end;align-items:flex-end}
.msg.event{align-self:center;max-width:100%;flex-direction:row;align-items:center;gap:6px;font-size:var(--fs-1);color:var(--ink-2);padding:2px 4px}
.msg.event .ic{color:var(--ink-3)}
.msg.event .t{color:var(--ink-3)}
.msg.event .t::before{content:'\00B7';margin-right:6px}
.bub{padding:var(--s-3) var(--s-4);font-size:var(--fs-2);line-height:1.45;border-radius:18px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.in .bub{background:var(--surface);border:1px solid var(--line-strong);border-bottom-left-radius:6px}
.msg.out .bub{background:var(--surface-3);border-bottom-right-radius:6px}
.msg.in.open .bub{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.msg.in.open.late .bub{border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash)}
.bub .subj{display:block;font-weight:var(--fw-2);margin-bottom:4px}
.msg .meta{font-size:var(--fs-1);color:var(--ink-3);display:flex;align-items:center;gap:4px;padding:0 4px}
.compose{flex:none;border-top:1px solid var(--line);background:var(--surface);padding:var(--s-3) var(--s-5) var(--s-4)}
.c-top{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2)}
.compose .ch{display:inline-flex;background:var(--surface-3);border-radius:var(--r-pill);padding:2px}
.compose .ch button{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 12px;border-radius:var(--r-pill);font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-2);border:0;background:none;cursor:pointer}
.compose .ch button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.compose .ch button:disabled{opacity:.4;cursor:default}
.c-to{font-size:var(--fs-1);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.c-subj{width:100%;margin-bottom:var(--s-2)}
.c-row{display:flex;align-items:flex-end;gap:var(--s-2)}
.c-row textarea{flex:1;min-height:44px;max-height:160px;resize:none;border:1px solid var(--line-strong);border-radius:22px;padding:11px 16px;font:inherit;font-size:16px;line-height:1.35;background:var(--surface);color:var(--ink)}
.c-row textarea:focus{outline:none;border-color:var(--ink);box-shadow:var(--ring)}
.c-row .btn{height:44px}
.c-foot{margin-top:var(--s-2);font-size:var(--fs-1);color:var(--ink-3)}
/* the sheet (narrower screens) */
#td-sheet .scrim{position:fixed;inset:0;z-index:150;background:color-mix(in srgb,var(--scrim) 28%,transparent);animation:fade var(--t-2) var(--ease) both}
#td-sheet .sheet{position:fixed;z-index:151;left:0;right:0;bottom:0;height:94svh;background:var(--surface);border-radius:20px 20px 0 0;box-shadow:var(--sh-3);display:flex;flex-direction:column;overflow:hidden;animation:sheet-in var(--t-2) var(--ease) both}
#td-sheet .sheet.closing{animation:sheet-in var(--t-1) var(--ease) reverse forwards}
#td-sheet .sheet::before{content:'';position:absolute;top:8px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--line-strong)}
#td-sheet .p-head{padding:var(--s-5) var(--s-4) var(--s-3)}
#td-sheet .p-close{display:inline-flex}
#td-sheet .p-body{padding:var(--s-4)}
#td-sheet .p-why{padding:var(--s-2) var(--s-4)}
#td-sheet .compose{padding:var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom))}
#td-sheet .c-foot{display:none}
@keyframes sheet-in{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* the call sheet */
.call-num{font-size:var(--fs-6);font-weight:var(--fw-2);text-align:center;margin:var(--s-2) 0 var(--s-4);font-variant-numeric:tabular-nums}
.btn.block{display:flex;width:100%;justify-content:center}
.call-k{font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--ink-2);margin:var(--s-5) 0 var(--s-2)}
.call-outs{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.call-out{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-2);font-weight:var(--fw-2);border-radius:var(--r-pill);padding:8px 14px;cursor:pointer}
.call-out:hover{background:var(--hover)}
.call-out.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:var(--accent-wash)}
.menu-stack{display:flex;flex-direction:column;gap:var(--s-2)}
.menu-stack.row{flex-direction:row;flex-wrap:wrap;margin:var(--s-2) 0}
.menu-item{display:flex;align-items:center;gap:var(--s-3);width:100%;height:48px;padding:0 var(--s-4);border:0;background:none;border-radius:var(--r-ctl);text-align:left;font:inherit;font-size:var(--fs-3);font-weight:var(--fw-2);color:var(--ink);cursor:pointer}
.menu-item:hover{background:var(--hover)}
.nav button .b.late,.nav-sheet button .b.late{background:var(--red);color:var(--surface)}
@media (max-width:1099px){
  .td-main{display:block}
  #page-today.view-sit .td-nav,#page-today.view-home .td-list{display:none}
  #page-today.all-clear .td-nav{display:block!important}
  .td-pane{display:none!important}
  #page-today .back{display:inline-flex;align-items:center;gap:4px;height:36px;margin:-8px 0 8px -8px;padding:0 8px;border:0;background:none;border-radius:var(--r-ctl);font:inherit;font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--ink-2);cursor:pointer}
  .sw-top{padding:var(--s-4) var(--s-3) var(--s-4) var(--s-4)}
}
.m-alert.landing{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;color:var(--red-ink);background:var(--red-wash)}
.m-alert.landing .ld-t{flex:1 1 220px;min-width:0}
.m-alert.landing .ld-t small{display:block;font-weight:var(--fw-1);color:var(--ink-2)}
.m-alert.landing .input{flex:0 1 240px;height:34px}
.mchip.warn{background:var(--red-wash);color:var(--red-ink)}

/* ============================================================================================ BOARD: chips, stacks, homes */
.kc-chips{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 2px}
.sub-chip{font-size:11px;font-weight:var(--fw-2);color:var(--ink-2);background:var(--surface-3);border-radius:var(--r-pill);padding:1px 8px;white-space:nowrap}
.sub-chip.warn{color:var(--red-ink);background:var(--red-wash)}
.sub-chip.credit{color:var(--win-ink);background:var(--win-wash)}
.sub-chip.quiet{background:none;border:1px solid var(--line-strong)}
.home-l{display:flex;align-items:center;gap:4px;font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-2);margin-top:2px}
.home-l .ic{color:var(--accent-text)}
.hb{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);font:inherit;font-size:11px;font-weight:var(--fw-2);border-radius:var(--r-pill);padding:1px 8px;cursor:pointer;margin-left:auto;position:relative;z-index:1;white-space:nowrap;flex:none}
.home-l span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb:hover{background:var(--hover);color:var(--ink)}
.hb.on{background:var(--accent-wash);border-color:var(--accent-hover);color:var(--accent-ink)}
.hb + .timer{margin-left:6px}
.btn-s .for{font-weight:var(--fw-1);opacity:.8}
.kstack{position:relative;margin-bottom:var(--s-2)}
.kstack:not(.open)::before,.kstack:not(.open)::after{content:'';position:absolute;left:8px;right:8px;height:100%;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
.kstack:not(.open)::before{bottom:-6px;left:6px;right:6px}
.kstack:not(.open)::after{bottom:-11px;left:12px;right:12px;z-index:-1}
.kstack:not(.open)::before{z-index:0}
.kstack .kcard{position:relative;z-index:1;margin-bottom:0}
.kstack:not(.open){margin-bottom:calc(var(--s-2) + 12px)}
.stack-edge{position:absolute;right:-6px;bottom:-14px;z-index:2;border:1px solid var(--line-strong);background:var(--accent-wash);color:var(--accent-ink);font:inherit;font-size:var(--fs-1);font-weight:var(--fw-2);border-radius:var(--r-pill);padding:2px 9px;cursor:pointer;box-shadow:var(--sh-1)}
.stack-edge:hover{background:var(--accent)}
.kstack.open{border:1px dashed var(--line-strong);border-radius:var(--r-card);padding:6px;background:color-mix(in srgb,var(--accent-wash) 35%,transparent)}
.kstack.open .kcard{margin-bottom:6px}
.kstack-h{display:flex;align-items:center;gap:6px;font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-2);padding:2px 4px 6px}
.kstack-h .btn-link{margin-left:auto;font-size:var(--fs-1)}
.col.lighting .kcard:not(.lit){opacity:.42}
.kcard.lit{box-shadow:0 0 0 2px var(--accent),var(--sh-2)}
.kcard.flash{animation:flash 1.1s var(--ease)}
@keyframes flash{0%,100%{box-shadow:var(--sh-1)}30%{box-shadow:0 0 0 4px var(--accent)}}
.col.extra{background:color-mix(in srgb,var(--col) 60%,transparent);border:1px dashed var(--line-strong)}
.hstrip{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:var(--s-3) var(--s-4);margin:0 0 var(--s-4)}
.hs-top{display:flex;align-items:center;gap:var(--s-2)}
.hs-t{font-weight:var(--fw-2)}
.hs-t span{color:var(--ink-3);font-weight:var(--fw-1)}
.hs-top .close{margin-left:auto}
.hs-chips,.pp-homes{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-2) 0}
.hchip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-ctl);padding:8px 12px;cursor:pointer;font:inherit;color:var(--ink);max-width:280px}
.hchip:hover{background:var(--hover)}
.hchip.here{border-color:var(--accent-hover);background:color-mix(in srgb,var(--accent-wash) 50%,var(--surface))}
.hchip .l{display:flex;align-items:center;gap:6px;font-weight:var(--fw-2);font-size:var(--fs-2)}
.hchip .s{font-size:var(--fs-1);color:var(--ink-2)}
.hchip .o{font-size:11px;color:var(--ink-3)}
.hchip .go{color:var(--link);font-weight:var(--fw-2)}
.hdot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);display:inline-block}
.hdot.you{background:var(--accent)}
.hdot.them{background:var(--them)}
.hdot.done{background:var(--win)}
.hs-foot{display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-1);color:var(--ink-2)}
.hs-foot .btn{margin-left:auto}
.mchip.reward{display:inline-flex;align-items:center;gap:4px;background:var(--win-wash);color:var(--win-ink)}
.mchip.reward.done{background:var(--well);color:var(--win-ink)}
.mchip.reward.off{background:var(--well);color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--ink-3)}
table.sc-lines tr.credit td{color:var(--win-ink)}
.qb-credit.off{background:var(--well);color:var(--ink-2)}
.qb-credit{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-2);font-size:var(--fs-2);color:var(--win-ink);background:var(--win-wash);border-radius:var(--r-ctl);padding:var(--s-2) var(--s-3)}
.party-from{display:flex;align-items:center;gap:4px;font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--draft);margin:0 0 3px}
.msg.party .bub,.st-msg.party .st-bubble{background:var(--draft-wash);border-color:color-mix(in srgb,var(--draft) 25%,transparent)}
.mchip.referred{display:inline-flex;align-items:center;gap:4px;background:var(--draft-wash);color:var(--draft);border:0;cursor:pointer}
.mchip.homes{border:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;background:var(--accent-wash);color:var(--accent-ink)}
.pp-k{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin:var(--s-4) 0 var(--s-2)}
.pp-k:first-child{margin-top:0}
.pp-k span{color:var(--ink-2)}
.pp-who{display:flex;flex-direction:column;gap:var(--s-2)}
.pp-c{border:1px solid var(--line);border-radius:var(--r-ctl);padding:var(--s-2) var(--s-3)}
.pp-cn{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}
.pp-cn small{flex-basis:100%;color:var(--ink-2);font-size:var(--fs-1)}
.pp-c ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.pp-c li{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-2);color:var(--ink-2)}
.pp-c li .btn-link{margin-left:auto;font-size:var(--fs-1)}
.btn-link.danger{color:var(--red-ink)}
.pp-sugg{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;border:1px dashed var(--accent-hover);background:color-mix(in srgb,var(--accent-wash) 45%,var(--surface));border-radius:var(--r-ctl);padding:var(--s-2) var(--s-3)}
.pp-sugg div{flex:1 1 200px}
.pp-sugg small{display:block;color:var(--ink-2);font-size:var(--fs-1)}
.person-sheet .thread{margin-top:var(--s-2)}
.home-tag{margin-left:6px;font-size:10px;font-weight:var(--fw-2);color:var(--accent-ink);background:var(--accent-wash);border-radius:var(--r-pill);padding:0 6px}
.inc-homes{display:flex;flex-direction:column;gap:6px}
.inc-h{display:flex;align-items:center;gap:var(--s-3);border:1px solid var(--line);border-radius:var(--r-ctl);padding:8px 12px;background:var(--surface);cursor:pointer}
.inc-h.on{border-color:var(--accent-hover);background:color-mix(in srgb,var(--accent-wash) 45%,var(--surface))}
.inc-h.off{opacity:.65;cursor:default}
.inc-h input{accent-color:var(--accent-press)}
.inc-h .t{display:flex;flex-direction:column}
.inc-h small{color:var(--ink-2);font-size:var(--fs-1)}
.inc-says{margin-top:var(--s-2);font-size:var(--fs-2);color:var(--ink-2);background:var(--surface-3);border-radius:var(--r-ctl);padding:8px 12px}
.r-homes{grid-column:2 / span 2;grid-row:4;margin-top:4px;display:flex;align-items:center;gap:4px;font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--accent-ink)}
.td-homes{border:1px solid var(--line);border-radius:var(--r-ctl);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4)}
.td-homes-h{display:flex;align-items:center;gap:6px;font-size:var(--fs-2)}
.td-homes ul{list-style:none;margin:var(--s-2) 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.td-homes li{display:flex;align-items:center;gap:var(--s-3)}
.td-homes li .t{flex:1;display:flex;flex-direction:column;font-size:var(--fs-2)}
.td-homes li small{color:var(--ink-2);font-size:var(--fs-1)}
.td.which{margin-bottom:var(--s-4);border-color:color-mix(in srgb,var(--accent) 45%,var(--surface));background:linear-gradient(180deg,var(--accent-wash),var(--surface) 80%)}
.which-list{display:flex;flex-direction:column;gap:6px;margin-top:var(--s-3);padding-left:32px}
.p-people{margin-top:var(--s-4)}