/* HVS Crew — update 14 design system: "quiet craft". Three surfaces (page / card / sunk) with one crisp edge, one type
   scale (Jost only for titles and numbers), five radii, Lucide icons at 1.75, cedar for action, oxblood only for
   "needs you", olive for done. Dark ("evening") swaps the base tokens on body.night, so every screen follows.
   Source of truth: design-review-u14/build-spec.md + mockups/hvs14.css (approved by Chavie, Nov 6). */
@font-face { font-family: 'Jost'; font-weight: 300; font-display: swap; src: url(/fonts/jost-latin-300-normal.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 400; font-display: swap; src: url(/fonts/jost-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-display: swap; src: url(/fonts/jost-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-weight: 400; font-display: swap; src: url(/fonts/nunito-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-weight: 600; font-display: swap; src: url(/fonts/nunito-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-weight: 700; font-display: swap; src: url(/fonts/nunito-sans-latin-700-normal.woff2) format('woff2'); }

:root {
  /* brand (HVS v2 website): ivory #F2F1ED, cream #EAE4D9, stone, taupe, charcoal #202320, olive #726E46 (update 17), cedar #4B3520,
     oxblood #6A2C2A. No other hues. Every text pairing is AA on every surface, light and dark (test/dark-tokens.test.js). */
  /* surfaces: 3 steps */
  /* update 17 (Chavie, Nov 8: the cream page felt "slightly depressing"): the page is her brand ivory. ONE token. Chavie
     chose #F2F1ED (Nov 8); her softer beige #EBE7E0 was looked at and rejected. Cards are a lighter ivory with the round 2 edge + shadow. */
  --bg: #F2F1ED; --card: #FCFBF8; --sunk: #E8E3DA;
  /* ink: 2 text levels + 1 non-text (chevrons, disabled marks) */
  --ink: #202320; --ink-2: #5C5F57; --ink-3: #A39D93;
  --line: rgba(32,35,32,.08); --line-strong: rgba(32,35,32,.14);
  /* accents with meaning: cedar = action / selection, olive = done, oxblood = needs you; -t = their soft tiles */
  --cedar: #4B3520; --cedar-t: #E6D9C6; --on-cedar: #F2F1ED;
  /* update 17 (Chavie, Nov 7): olive is her #726E46, a warm muted khaki-olive (was the cooler #646A5E) */
  --olive: #5E5A38; --olive-ring: #726E46; --olive-t: #DED9C4;
  --ox: #6A2C2A; --ox-t: #EBDCCD;
  --track: rgba(32,35,32,.08);
  /* update 17 (round 2 v2): five earthy icon-tile families by category (tile / icon), and urgent = solid oxblood */
  --k-wood-t: #DCC2A0;  --k-wood: #4B3520;
  --k-olive-t: #D3CFB6; --k-olive: #4A4729;
  --k-earth-t: #CCB29B; --k-earth: #5A2E1C;
  --k-stone-t: #D6D3CC; --k-stone: #2C2F2B;
  --k-sand-t: #D9D0B2;  --k-sand: #544526;
  --urgent-bg: #6A2C2A; --urgent-fg: #F2F1ED;
  /* the hero card behind the rings, the rings' groove, glow and gradient arcs, the active tab */
  --hero-bg: radial-gradient(130% 110% at 50% -20%, #FFFDF9 0%, #F7F2EA 50%, #EFE6D9 100%);
  --hero-edge: 0 0 0 1px rgba(75,53,32,.07), 0 2px 4px rgba(75,53,32,.05), 0 18px 40px -18px rgba(75,53,32,.30);
  --hero-hi: rgba(255,255,255,.9);
  --ring-track: rgba(75,53,32,.10);
  --ring-glow: radial-gradient(circle, rgba(233,217,194,.75) 0%, rgba(233,217,194,0) 68%);
  --ring-glow-ox: radial-gradient(circle, rgba(222,200,176,.7) 0%, rgba(222,200,176,0) 68%);
  --arc-ced-a: #4B3520; --arc-ced-b: #8C6A48;
  --arc-ox-a: #6A2C2A;  --arc-ox-b: #8A4636;
  --arc-ol-a: #5E5A38;  --arc-ol-b: #8F8A62;
  --tab-on: #4B3520; --tab-on-t: #E6D9C6;
  /* update 17: loading skeletons (a soft sweep) and the pipeline's column well */
  --skel: rgba(75,53,32,.07); --skel-hi: rgba(255,255,255,.55);
  --well: #DDD5C7;
  /* update 17 fixes: a control outline (the to-do ring, 3.2:1 on card) and the stuck stage bar's glass */
  --ctl: rgba(92,95,87,.72); --glass: rgba(242,241,237,.92);
  --bar-bg: rgba(252,251,248,.94);
  --scrim: rgba(32,35,32,.38);
  --white: #FFFFFF; --mk-bg: #2A2C2A; /* the drawing / signature paper, the markup editor's surround */
  /* update 18 (Marketing & PR): the phone frame's overlays on a photo / video, and the "committed" hatch */
  --mkt-ov: rgba(24,24,22,.46); --mkt-ov-hi: rgba(255,255,255,.22); --mkt-hatch: rgba(75,53,32,.30);
  /* elevation: a crisp hairline + a short contact shadow (never a fuzzy blur alone) */
  --e1: 0 0 0 1px rgba(75,53,32,.08), 0 1px 3px rgba(75,53,32,.08), 0 6px 16px -10px rgba(75,53,32,.18); /* update 17: cards stand out a step more */
  --e2: 0 0 0 1px rgba(75,53,32,.06), 0 2px 4px rgba(75,53,32,.05), 0 12px 32px -12px rgba(75,53,32,.22);
  --e3: 0 -1px 0 rgba(75,53,32,.06), 0 -20px 48px -16px rgba(32,35,32,.28);
  --wash: radial-gradient(90% 70% at 20% 0%, #F3EEE5 0%, rgba(243,238,229,0) 70%);
  /* radii: 5 values (chips, avatars and pills are full) */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 26px;
  /* spacing: 4-pt grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --ease: cubic-bezier(.2,.8,.2,1); --ease-sheet: cubic-bezier(.32,.72,0,1);
  /* update 13 names, kept one release as aliases (update 14) */
  --ivory: var(--bg); --paper: var(--card); --charcoal: var(--ink); --oxblood: var(--ox); --cream: var(--sunk); --wood-t: var(--cedar-t);
  --shadow: var(--e1); --line-2: var(--line-strong); --taupe: var(--ink-3); --stone: var(--sunk);
  --rule: 1px solid var(--line);
  --head: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad: 20px;
  --nav-h: max(64px, calc(50px + var(--safe-b))); /* the tab bar, safe area included (84 on a notched iPhone) */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}
body.night {
  /* Chavie (Nov 6): keep the near-black, make the text brighter. Accents are the lightened brand cedar / olive / oxblood. */
  --bg: #1A1B18; --card: #24251F; --sunk: #2E2F29;
  --ink: #F5F0E8; --ink-2: #C4BEB1; --ink-3: #6F6B62;
  --line: rgba(245,240,232,.08); --line-strong: rgba(245,240,232,.18);
  --cedar: #DCC6A6; --cedar-t: #3A2F23; --on-cedar: #1A1B18;
  --olive: #B8B38C; --olive-ring: #A8A37A; --olive-t: #33321F;
  --ox: #D9A184; --ox-t: #3A2B24; /* update 17: rust, not pink (was #E8ACA3 / #3A2725). 6.9:1 on card */
  --track: rgba(245,240,232,.08);
  --k-wood-t: #4A3826;  --k-wood: #E8CDA6;
  --k-olive-t: #3A3826; --k-olive: #D2CDA6;
  --k-earth-t: #4B3328; --k-earth: #D9AF93;
  --k-stone-t: #3A3A35; --k-stone: #E6E2DA;
  --k-sand-t: #433E2C;  --k-sand: #DDD3AE;
  --urgent-bg: #6A2C2A; --urgent-fg: #F5F0E8;
  --hero-bg: radial-gradient(130% 110% at 50% -20%, #34312A 0%, #282821 50%, #20211C 100%);
  --hero-edge: 0 0 0 1px rgba(245,240,232,.07), 0 20px 44px -20px rgba(0,0,0,.8);
  --hero-hi: rgba(245,240,232,.10);
  --ring-track: rgba(245,240,232,.09);
  --ring-glow: radial-gradient(circle, rgba(220,198,166,.14) 0%, rgba(220,198,166,0) 68%);
  --ring-glow-ox: radial-gradient(circle, rgba(217,161,132,.14) 0%, rgba(217,161,132,0) 68%);
  --arc-ced-a: #DCC6A6; --arc-ced-b: #A88663;
  --arc-ox-a: #D9A184;  --arc-ox-b: #A86F55;
  --arc-ol-a: #C2BD96;  --arc-ol-b: #8F8A62;
  --tab-on: #DCC6A6; --tab-on-t: #3A2F23;
  --skel: rgba(245,240,232,.07); --skel-hi: rgba(245,240,232,.06);
  --well: #141512;
  --ctl: rgba(196,190,177,.62); --glass: rgba(26,27,24,.90);
  --bar-bg: rgba(36,37,31,.94);
  --scrim: rgba(0,0,0,.55);
  --white: #FFFFFF; --mk-bg: #2A2C2A;
  --mkt-ov: rgba(10,10,9,.52); --mkt-ov-hi: rgba(255,255,255,.18); --mkt-hatch: rgba(220,198,166,.34);
  --e1: 0 0 0 1px rgba(245,240,232,.07), 0 2px 8px -2px rgba(0,0,0,.55); /* update 17: a real shadow in dark, so cards lift */
  --e2: 0 0 0 1px rgba(245,240,232,.06), 0 16px 40px -16px rgba(0,0,0,.7);
  --e3: 0 -1px 0 rgba(245,240,232,.06), 0 -20px 48px -16px rgba(0,0,0,.6);
  --wash: radial-gradient(90% 70% at 20% 0%, rgba(220,198,166,.05) 0%, rgba(220,198,166,0) 70%);
  /* QA M1: an alias resolves where it's declared, so each one is declared again here (test/dark-tokens.test.js) */
  --ivory: var(--bg); --paper: var(--card); --charcoal: var(--ink); --oxblood: var(--ox); --cream: var(--sunk); --wood-t: var(--cedar-t);
  --shadow: var(--e1); --line-2: var(--line-strong); --taupe: var(--ink-3); --stone: var(--sunk);
  --rule: 1px solid var(--line);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 15px/22px var(--body); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
#app { min-height: 100vh; min-height: 100dvh; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-xs); }
.tn, time { font-variant-numeric: tabular-nums; }

/* ── Type: 7 styles. Jost only for titles and numbers; no italics (there are no italic font files). ── */
.t-display { font: 300 40px/44px var(--head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.t-title, .title, .h1 { font: 400 28px/34px var(--head); letter-spacing: -.012em; margin: 4px 0; }
.hello { font: 300 30px/36px var(--head); letter-spacing: -.015em; margin: 10px 0 0; }
.hello-sub { font: 400 15px/22px var(--body); color: var(--ink-2); margin: 4px 0 0; }
.t-h2, .h2, .h3 { font: 500 18px/24px var(--head); letter-spacing: -.005em; margin: 0; }
.t-body-s { font: 600 15px/20px var(--body); }
.t-body { font: 400 15px/22px var(--body); }
.t-meta, .meta, .sub, .small { font: 400 13px/18px var(--body); color: var(--ink-2); }
.sub { margin: 0; }
.t-cap, .label, .eyebrow { font: 600 12px/16px var(--body); color: var(--ink-2); margin: 0; }
.label.dark { color: var(--ink); }
.muted { color: var(--ink-2); }
.ox { color: var(--ox); }
.num { display: none; }
.section-head, .sec { display: flex; align-items: baseline; gap: 10px; margin: 28px 2px 10px; min-height: 24px; }
.section-head .label, .sec .h2 { flex: 1; font: 500 18px/24px var(--head); color: var(--ink); letter-spacing: -.005em; }
.section-head .count { font: 600 13px/18px var(--body); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.section-head.ox-head .label { color: var(--ox); }
.sec .see, .see { font: 600 13px/18px var(--body); color: var(--ink-2); display: inline-flex; align-items: center; gap: 2px; text-decoration: none; min-height: 44px; margin: -10px 0;
  font-variant-numeric: tabular-nums; background: none; border: 0; padding: 0; cursor: pointer; }
.see svg { width: 15px; height: 15px; color: var(--ink-3); }

/* ── Layout ── */
main.page { padding: 4px var(--pad) calc(var(--nav-h) + 32px); max-width: 720px; margin: 0 auto; animation: enter .16s var(--ease); position: relative; }
body.no-top main.page { padding-top: max(10px, var(--safe-t)); }
@keyframes enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* one faint warm glow behind the Home greeting only */
.wash { position: absolute; inset: 0 0 auto 0; height: 360px; pointer-events: none; z-index: -1; background: var(--wash); }
.rule { border: 0; border-top: var(--rule); margin: 22px 0; }
.stack > * + * { margin-top: 10px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.grid2 > *, .grid3 > * { min-width: 0; }
.grid2 > .field { display: flex; flex-direction: column; justify-content: flex-end; }
.cream { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--e1); padding: 16px; margin: 10px 0; }

/* ── Top bar (tab roots): logo 28 · date · bell (capsule only with a count) · avatar 32 ── */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 6px; height: calc(52px + var(--safe-t)); padding: var(--safe-t) var(--pad) 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); max-width: 720px; margin: 0 auto; }
.topbar .logo { width: 28px; height: 28px; flex: none; border-radius: 50%; }
body.night .topbar .logo, body.night .side-brand img { filter: invert(1) sepia(.3) brightness(1.1); opacity: .9; }
.topbar .date { flex: 1; font: 600 13px/18px var(--body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 4px; }
.top-search { display: none; }
/* the bell: 36px capsule (card + edge) with the count; with nothing new, the bell alone. 44px tap box either way. */
.bellp { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 16px 0 14px; border: 4px solid transparent; background-clip: padding-box;
  border-radius: 999px; background-color: var(--card); box-shadow: inset 0 0 0 1px rgba(75,53,32,.06); font: 700 13px/1 var(--body); color: var(--ink); text-decoration: none; position: relative;
  font-variant-numeric: tabular-nums; }
.bellp svg { width: 18px; height: 18px; flex: none; }
.bellp.quiet { background-color: transparent; box-shadow: none; padding: 0; }
.bellp.quiet svg { width: 22px; height: 22px; }
body.night .bellp { box-shadow: inset 0 0 0 1px rgba(245,240,232,.06); }
body.night .bellp.quiet { box-shadow: none; }

/* ── Avatars: monochrome. Everyone sunk with charcoal initials; you are cedar. Sizes 24 / 32 / 40. ── */
.av { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font: 500 13px/1 var(--head); letter-spacing: .02em; background: var(--sunk); color: var(--ink);
  flex: none; text-decoration: none; border: 0; padding: 0; position: relative; }
.av.me { background: var(--cedar); color: var(--on-cedar); }
.av.s, .av.sm { width: 24px; height: 24px; font-size: 11px; }
.av.xs { width: 24px; height: 24px; font-size: 11px; }
.av.l40 { width: 40px; height: 40px; font-size: 15px; }
.av.bd, .stack-av .av { box-shadow: 0 0 0 2px var(--card); }
.stack-av { display: inline-flex; } .stack-av .av + .av { margin-left: -8px; }
.av.open { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink-3); }
.av.open svg { width: 14px; height: 14px; }
button.av, a.av { cursor: pointer; }
/* a 44px tap box around a smaller avatar (QA L2): transparent border + padding-box background */
a.av:not(.s):not(.xs):not(.sm), button.av:not(.s):not(.xs):not(.sm) { width: 44px; height: 44px; border: 6px solid transparent; background-clip: padding-box; }
.iconbtn { width: 44px; height: 44px; display: inline-grid; place-items: center; background: none; border: 0; position: relative; cursor: pointer; padding: 0; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; flex: none; }
.iconbtn svg { width: 22px; height: 22px; }

/* ── Tab bar (phone): 4 tabs + an inline cedar "+". No pill; a new-activity marker is a solid 7px cedar dot. ── */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 8px var(--safe-b); height: var(--nav-h);
  background: var(--bar-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 -1px 0 var(--line);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink-2); font: 600 11px/14px var(--body); letter-spacing: .01em; padding-top: 4px; min-height: 52px;
  position: relative; text-decoration: none; white-space: nowrap; }
.tab .pill { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 15px; margin: -3px 0 -1px; transition: background .2s var(--ease); }
.tab svg { width: 24px; height: 24px; stroke-width: 1.6; }
.tab.on { color: var(--tab-on); }
.tab.on .pill { background: var(--tab-on-t); }
.tab.on svg { stroke-width: 2; }
.tab .tick { position: absolute; top: 0; left: calc(50% + 12px); width: 7px; height: 7px; border-radius: 50%; background: var(--cedar); box-shadow: 0 0 0 2px var(--card); }
.plus { justify-self: center; width: 52px; height: 40px; margin-top: 4px; border-radius: var(--r-md); background: var(--cedar); color: var(--on-cedar); display: grid; place-items: center; border: 0; cursor: pointer;
  padding: 0; position: relative; transition: background .18s var(--ease); }
.plus::after { content: ''; position: absolute; inset: -4px -6px; }
.plus svg { width: 22px; height: 22px; stroke-width: 2.1; }
.plus .ic-x { display: none; }
.plus[aria-expanded="true"] { background: var(--ink); color: var(--bg); }
.plus[aria-expanded="true"] .ic-plus { display: none; }
.plus[aria-expanded="true"] .ic-x { display: block; }
.tabbar.raised { z-index: 56; }

/* ── Cards ── */
.card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--e1); padding: 16px; position: relative; }
.card + .card { margin-top: 10px; }
/* QA u17 S1: inside a grid the gap spaces the cards; a sibling margin would push the second column down */
.grid2 > .card + .card, .grid3 > .card + .card, .ord-kpis > .card + .card { margin-top: 0; }
.card.flush { padding: 0; }
.card.tint-attn, .card.tint-ox { background: var(--card); }
.card .top { display: flex; gap: 12px; align-items: flex-start; }
.card a.cover { text-decoration: none; color: inherit; display: block; }
.card .meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.card .meta span + span::before { content: '·'; margin: 0 6px; }
.card .desc { margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); font: 400 13px/18px var(--body); }
.card .btn { margin-top: 12px; }
.card.boxed, .card.feature { padding: 16px; }
.ready-ok { color: var(--olive); }
.ready-no { color: var(--ox); }
a.insight-card { text-decoration: none; color: inherit; }
.insight-card { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--sunk); display: flex; gap: 10px; align-items: center; }
.insight-card .ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--cedar); flex: none; }
.insight-card .ic svg { width: 16px; height: 16px; }
.insight-card p { margin: 0; font: 400 13px/18px var(--body); color: var(--ink-2); }
.insight-card p b { color: var(--ink); font-weight: 600; }

/* ── The list row (the core component): tile 36 · title (the thing) · meta (who · where) · end (age | avatar | button) ── */
.rw { display: flex; align-items: center; gap: 12px; padding: 0 16px; position: relative; min-height: 64px; text-decoration: none; color: inherit; width: 100%;
  background: none; border: 0; text-align: left; font: inherit; cursor: pointer; }
.rw + .rw::before { content: ''; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--line); }
.rw.nolead + .rw::before, .rw + .rw.nolead::before, .noic > .rw + .rw::before { left: 16px; }
.ck-list > .rw + .rw::before { left: 52px; }
.rw:active, .card.press:active, .q:active, .btn:active { transform: scale(.98); }
.rw, .q, .btn { transition: transform 90ms var(--ease), background .15s ease; }
.tile { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--sunk); display: grid; place-items: center; flex: none; color: var(--ink); }
.tile svg { width: 20px; height: 20px; }
.tile.attn { background: var(--sunk); color: var(--ink); }
/* update 17 (round 2 v2): tiles by category, five earthy families; urgent is the only oxblood tile (solid, ivory icon) */
.tile.k-wood, .ad.k-wood { background: var(--k-wood-t); color: var(--k-wood); }
.tile.k-olive, .ad.k-olive { background: var(--k-olive-t); color: var(--k-olive); }
.tile.k-earth, .ad.k-earth { background: var(--k-earth-t); color: var(--k-earth); }
.tile.k-stone, .ad.k-stone { background: var(--k-stone-t); color: var(--k-stone); }
.tile.k-sand, .ad.k-sand { background: var(--k-sand-t); color: var(--k-sand); }
.tile.ox, .tile.urgent { background: var(--urgent-bg); color: var(--urgent-fg); }
.tile.green, .tile.ol { background: var(--k-olive-t); color: var(--k-olive); }
.tile.ced, .tile.wood { background: var(--k-wood-t); color: var(--k-wood); }
.rw .t { flex: 1; min-width: 0; padding: 12px 0; }
.rw .t .a { font: 600 15px/20px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw .t .b { font: 400 13px/18px var(--body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.rw .end { flex: none; display: flex; align-items: center; gap: 8px; font: 600 13px/18px var(--body); color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.rw .end svg, .chev-ic { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.rw .end .btn svg { color: currentColor; }
/* urgency is ONE signal: an oxblood tile + an oxblood age. No left bar, no wash. */
.age-ox { color: var(--ox) !important; } .age-attn { color: var(--ink-2) !important; }
.ox-txt { color: var(--ox); }

/* project progress: a 56px mini bar with the % above it (120px with the phase name on a desktop) */
.pc { flex: none; width: 56px; text-align: right; font: 600 13px/18px var(--body); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pc .lab { display: flex; justify-content: flex-end; gap: 8px; }
.pc .lab .ph { display: none; }
.mbar { display: block; height: 4px; border-radius: 999px; background: var(--track); overflow: hidden; margin-top: 6px; }
.mbar i { display: block; height: 100%; border-radius: 999px; background: var(--cedar); }
.mbar.ox i { background: var(--ox); }

/* ── Chips, the one segmented control ── */
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--sunk); border: 0;
  font: 600 12px/1 var(--body); color: var(--ink); white-space: nowrap; flex: none; text-decoration: none; }
.chip svg { width: 14px; height: 14px; stroke-width: 2; }
.chip.ox { background: var(--ox-t); color: var(--ox); }
.chip.attn, .chip.line { background: var(--sunk); color: var(--ink-2); }
.chip.green, .chip.ol { background: var(--olive-t); color: var(--olive); } .chip.wood, .chip.ced { background: var(--cedar-t); color: var(--cedar); }
.chip.dark, .chip.on { background: var(--cedar); color: var(--on-cedar); }
button.chip, a.chip { height: 32px; padding: 0 12px; font-size: 13px; cursor: pointer; position: relative; }
button.chip::after, a.chip::after { content: ''; position: absolute; inset: -6px -2px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--pad)); padding: 6px var(--pad); scrollbar-width: none; }
.chips.scroll::-webkit-scrollbar { display: none; }
.seg { display: flex; background: var(--sunk); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
/* segment: 32px tall, radius 8 (concentric with the 10px track and its 3px padding) */
.seg > * { flex: 1; text-align: center; padding: 0 8px; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: 8px; border: 0; background: none;
  font: 600 13px/1 var(--body); color: var(--ink-2); white-space: nowrap; cursor: pointer; text-decoration: none; position: relative; min-width: 0; }
.seg > *::after { content: ''; position: absolute; inset: -6px 0; }
.seg > .on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(75,53,32,.12), 0 0 0 1px rgba(75,53,32,.04); }
body.night .seg > .on { box-shadow: 0 0 0 1px rgba(245,240,232,.06); }
.seg i { font-style: normal; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.seg .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cedar); flex: none; }

/* ── Buttons: 48 / 14 (primary charcoal, cedar for brand actions, outline, soft); .sm 36 / 10; icon-only 44 ── */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 18px;
  border: 0; border-radius: var(--r-md); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink);
  font: 600 15px/20px var(--body); text-align: center; text-decoration: none; cursor: pointer; position: relative; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.pri { background: var(--ink); color: var(--bg); box-shadow: none; }
.btn.solid, .btn.ced { background: var(--cedar); color: var(--on-cedar); box-shadow: none; }
.btn.soft { background: var(--sunk); box-shadow: none; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.out { background: var(--card); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn.ox { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ox) 45%, transparent); color: var(--ox); }
.btn.ox.solid { background: var(--ox); color: var(--on-cedar); box-shadow: none; }
.btn.big { min-height: 48px; }
.btn.small, .btn.sm { min-height: 36px; width: auto; font-size: 14px; border-radius: var(--r-sm); padding: 0 14px; flex: none; }
.btn.small::after, .btn.sm::after { content: ''; position: absolute; inset: -4px 0; }
.btn.inline { width: auto; }
.btn[disabled], .btn.disabled { opacity: .4; pointer-events: none; }
.btn .hint { display: block; font: 400 13px/18px var(--body); opacity: .8; margin-top: 3px; }
.btn.col { flex-direction: column; gap: 0; padding: 10px 18px; }
.btn kbd, .kbd { font: 600 11px/1 var(--body); opacity: .6; margin-left: 2px; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; } /* final QA SF3: a row of small buttons wraps instead of widening the page (Spanish) */
.btns > .btn { flex: 1; width: auto; min-width: 0; }
.btns > .btn.sm { flex: none; white-space: nowrap; }
/* text links became small outlined buttons */
.link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-sm); border: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 600 13px/18px var(--body); color: var(--ink); text-decoration: none; cursor: pointer; position: relative; }
.link svg { width: 16px; height: 16px; }
.link::after { content: ''; position: absolute; inset: -4px 0; }
.textlink { background: none; border: 0; padding: 10px 0; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; font: 400 13px/18px var(--body); cursor: pointer; }

/* ── Rings: one neutral track, state colour, a number with an optional denominator, no units ── */
.hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 18px 0 0; padding: 20px 6px 18px; border-radius: 22px; background: var(--hero-bg); box-shadow: var(--hero-edge);
  position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--hero-hi), transparent); pointer-events: none; }
.hero .ring .g { width: 92px; height: 92px; }
.hero .ring .v b { font-size: 34px; }
.hero .ring .l { margin-top: 10px; }
.ring .g::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--ring-glow); }
.ring[data-tone="ox"] .g::before { background: var(--ring-glow-ox); }
/* update 17: the daily line, quiet, across the top of the hero card */
.hero .quote { grid-column: 1 / -1; margin: -6px 16px 14px; max-width: none; text-align: center; font: 400 13px/18px var(--body); color: var(--ink-2); min-height: 36px; text-wrap: balance; }
.hero .quote::before, .hero .quote::after { color: var(--ink-3); }
.hero .quote::before { content: '“'; } .hero .quote::after { content: '”'; }
.hero .quote:empty::before, .hero .quote:empty::after { content: none; }
.ring { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; min-width: 0; }
.ring .g { position: relative; width: 92px; height: 92px; }
.ring svg.arc { width: 100%; height: 100%; transform: rotate(-90deg); display: block; position: relative; }
.ring svg.arc .val { transition: stroke-dasharray .9s var(--ease); }
.ring .v { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ring .v b { font: 300 32px/1 var(--head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ring .v small { font: 400 15px/1 var(--head); color: var(--ink-2); margin: 8px 0 0 1px; letter-spacing: 0; align-self: center; }
.ring .l { font: 600 13px/18px var(--body); margin-top: 8px; }
.ring .s { font: 400 12px/16px var(--body); color: var(--ink-2); min-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ring .s.ox { color: var(--ox); } .ring .s.green, .ring .s.attn { color: var(--ink-2); }
.ring.small .g { width: 56px; height: 56px; }
.ring.small .v b { font-size: 22px; }
.ring.small .v small { font-size: 12px; margin-top: 4px; }
.ring.mid .g { width: 72px; height: 72px; }
.ring.mid .v b { font-size: 28px; }

/* contributors: thin bars + one word (sheets behind the rings) */
.contrib { padding: 4px 16px 8px; }
.cb { padding: 10px 0; display: block; text-decoration: none; color: inherit; }
.cb + .cb { border-top: 1px solid var(--line); }
.cb .top2 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cb .k { font: 600 15px/20px var(--body); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb .w { font: 600 12px/16px var(--body); color: var(--ink-2); flex: none; }
.cb .w.ox, .cb .w.attn.ox { color: var(--ox); } .cb .w.green { color: var(--olive); }
.bar { height: 4px; border-radius: 999px; background: var(--track); margin-top: 8px; overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--cedar); }
.bar i.green, .bar .done { background: var(--olive-ring); } .bar i.attn { background: var(--ink-3); } .bar i.ox, .bar .blk { background: var(--ox); } .bar i.taupe, .bar .open { background: var(--ink-3); }
.bar .prog { background: var(--cedar); }
.bar.stack i, .bar .done, .bar .prog, .bar .blk, .bar .open { border-radius: 0; }
.bar.stack i + i { margin-left: 2px; }

/* acceptance avatar states: waiting (ring + clock) · accepted (check) · can't (oxblood + ×) */
.acc { position: relative; flex: none; display: inline-block; }
.acc .av { width: 24px; height: 24px; font-size: 11px; }
.acc.wait .av { box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px var(--ink-3); }
.acc.no .av { background: var(--ox-t); color: var(--ox); }
.acc.none .av { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink-3); }
.acc .m { position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--card); }
.acc .m svg { width: 9px; height: 9px; stroke-width: 3; }
.acc.ok .m { background: var(--olive); color: var(--card); } .acc.no .m { background: var(--ox); color: var(--card); } .acc.wait .m { background: var(--ink-2); color: var(--card); }
/* Nov 8 fix #3 (Chaim: the names in "On the floor" were cut off): each person is as wide as their name (at least 64px), the
   row wraps onto more lines with many people, nothing clips — the ring around the avatar had its top cut by
   overflow: hidden, and names longer than 56px were cut mid-name. A name wider than the whole card wraps at its spaces. */
.crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); grid-auto-flow: row dense; gap: 14px 4px; padding-top: 4px; }
/* QA N7 + Follow-ups (Nov 8) #10: even columns; a name with a word too wide for one column (measured; ~11+ letters) takes two, never cut mid-word */
.crew .p { display: flex; flex-direction: column; align-items: center; gap: 7px; font: 600 12px/16px var(--body); color: var(--ink-2); min-width: 0; text-align: center; padding: 0 2px; }
.crew .p.wide { grid-column: span 2; }
/* Follow-ups QA N3: invisible (but laid out) until FloorGrid has measured the names with the real font: no two-column flash */
.crew:not([data-floor-fit]) { visibility: hidden; }
.crew .p .nm { display: block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }
.crew .p .av { width: 40px; height: 40px; font-size: 15px; box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--olive-ring); }
.crew .p.idle .av { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--ox); }
.crew .p.wait .av { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--ink-3); }
/* QA u13 F3: off the floor = muted: the sunk fill with secondary ink (AA, light and dark), even for your own cedar avatar */
.crew .p.off .av { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--sunk); background: var(--sunk); color: var(--ink-2); }
.miss { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 11px/1 var(--body); color: var(--ox); box-shadow: inset 0 0 0 1.5px var(--ox); }
.siteline { display: flex; align-items: center; gap: 6px; font: 400 15px/22px var(--body); color: var(--ink-2); margin: 4px 0 0; text-decoration: none; min-height: 44px; }
.siteline svg { width: 16px; height: 16px; color: var(--ink); flex: none; }
.siteline b { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.siteline .chip { flex: none; margin-left: auto; }

/* ── Choice buttons (big tap targets) ── */
.choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 14px; text-align: left; border: 0; border-radius: var(--r-md);
  background: var(--card); box-shadow: var(--e1); cursor: pointer; font: 400 15px/1.3 var(--body); color: var(--ink); }
.choice + .choice { margin-top: 8px; }
.grid2 .choice + .choice, .grid3 .choice + .choice { margin-top: 0; }
.choice .tick { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); flex: none; display: grid; place-items: center; }
.choice.on { background: var(--cedar); color: var(--on-cedar); }
.choice.on .tick { box-shadow: inset 0 0 0 1.5px var(--on-cedar); }
.choice.on .tick::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); }
.choice.center { justify-content: center; text-align: center; }
.choice .small.muted { color: inherit; opacity: .75; }

/* ── Badges → quiet chips (no stacked caps badges) ── */
.badge { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-xs); background: var(--sunk); color: var(--ink);
  font: 600 12px/1 var(--body); white-space: nowrap; vertical-align: middle; border: 0; }
.badge.solid { background: var(--cedar); color: var(--on-cedar); }
.badge.soft { background: var(--sunk); color: var(--ink-2); }
.badge.ox, .badge.blocking { background: var(--ox-t); color: var(--ox); }
.badge.wait, .badge.approval, .badge.draft { background: var(--sunk); color: var(--ink-2); }
.badge.ok, .badge.partly { background: var(--olive-t); color: var(--olive); }
.badge.demo, .badge.skipped { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); }
.badge.office { background: var(--sunk); color: var(--cedar); }
.badge.count { background: transparent; box-shadow: inset 0 0 0 1.25px var(--line-strong); border-radius: var(--r-sm); min-width: 22px; justify-content: center; }
.badge.at { background: var(--sunk); color: var(--cedar); margin-right: 6px; }
.badges { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 46%; }

/* ── Grouped rows (old .list-row): one card surface, hairlines between ── */
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 64px; text-decoration: none; color: inherit; background: var(--card);
  border-radius: var(--r-lg); position: relative; margin: 0; box-shadow: var(--e1); }
.list-row + .list-row { border-top-left-radius: 0; border-top-right-radius: 0; }
.list-row + .list-row::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); }
.list-row:has(+ .list-row) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.list-row .chev { color: var(--ink-3); width: 16px; height: 16px; flex: none; }
.list-row .h3 { font: 600 15px/20px var(--body); }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; margin: 14px 0; font: 400 15px/22px var(--body); }
.kv dt { font: 600 13px/22px var(--body); color: var(--ink-2); }
.kv dd { margin: 0; }

/* ── Alerts and status boxes: plain cards. "Needs you" shows in the words (oxblood title), never as a bar or a wash. ── */
.alert, .status-box, .push-card, .visit-card, .ap-card, .ann-box, .sop-box, .gc-box, .mt-card, .call-card, .remind-box, .hold-banner, .note-box, .pb-pick, .trust-suggest, .tpl-suggest, .announcement, .my-log, .draft-view, .push-help, .hold-edit {
  background: var(--card); border: 0; border-radius: var(--r-lg); box-shadow: var(--e1); padding: 16px; position: relative; margin-left: 0; margin-right: 0; }
.alert .who { font: 500 18px/24px var(--head); margin: 0; color: var(--ox); }
.alert .wait { font: 600 13px/18px var(--body); color: var(--ox); }
.alert .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.alert .actions .btn { min-height: 48px; padding: 0 8px; }
.banner { position: fixed; left: 10px; right: 10px; top: calc(10px + var(--safe-t)); z-index: 60; background: var(--card); color: var(--ink); padding: 12px 8px 12px 16px; border-radius: var(--r-lg);
  box-shadow: var(--e2); display: flex; gap: 12px; align-items: center; animation: pop .28s var(--ease-sheet); cursor: pointer; max-width: 700px; margin: 0 auto; }
.banner::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cedar); flex: none; }
.banner.ox::before { background: var(--ox); }
.banner p { margin: 0; flex: 1; font: 600 15px/20px var(--body); }
.banner p .small { font-weight: 400; }
.banner button { background: none; border: 0; color: var(--ink-2); min-width: 44px; min-height: 44px; cursor: pointer; display: grid; place-items: center; }
.banner button svg { width: 18px; height: 18px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 14px); z-index: 60; background: var(--ink); color: var(--bg);
  padding: 12px 18px; border-radius: var(--r-md); font: 600 15px/20px var(--body); max-width: 92vw; animation: fade .2s ease; box-shadow: var(--e2); }
.toast.err { background: var(--ox); color: var(--on-cedar); }
body.night .toast.err { color: var(--bg); }
.toast.has-act { display: flex; align-items: center; gap: 14px; padding: 4px 6px 4px 18px; }
.toast-act { background: color-mix(in srgb, currentColor 14%, transparent); border: 0; color: inherit; font: 700 15px/1 var(--body); min-height: 44px; padding: 0 14px; cursor: pointer; border-radius: var(--r-sm); }

/* ── Forms ── */
.field { display: block; margin: 14px 0; }
.field > span { display: block; font: 600 13px/18px var(--body); color: var(--ink-2); margin-bottom: 6px; }
.field .opt { font: 400 13px/18px var(--body); margin-left: 6px; }
/* inputs stay 16px: below that the iPhone zooms the page on focus */
input[type=text], input[type=number], input[type=date], input[type=time], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=search], select, textarea {
  width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border: 0; border-radius: var(--r-md); background: var(--sunk); color: var(--ink); font: 400 16px/22px var(--body);
  -webkit-appearance: none; appearance: none; box-shadow: inset 0 0 0 1px transparent; }
select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
textarea { min-height: 88px; resize: none; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
::placeholder { color: var(--ink-2); opacity: 1; }
.toggle { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 0; cursor: pointer; }
.toggle input { width: 24px; height: 24px; accent-color: var(--cedar); flex: none; }
.stepper { display: flex; align-items: stretch; border-radius: var(--r-md); background: var(--sunk); overflow: hidden; }
.stepper button { width: 60px; border: 0; background: transparent; font: 300 28px/1 var(--head); cursor: pointer; }
.stepper input { text-align: center; min-height: 48px; background: transparent; font-variant-numeric: tabular-nums; }
.err-text { color: var(--ox); font: 400 15px/22px var(--body); margin: 8px 0 0; }

/* ── Sheets: 280ms iOS sheet curve, the scrim fades in 200ms ── */
.sheet-bg, .scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 50; animation: fade .2s ease; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; background: var(--card); border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92vh; max-height: min(92vh, calc(100dvh - var(--safe-t) - 12px)); overflow: auto;
  padding: 8px var(--pad) calc(24px + var(--safe-b)); animation: rise .28s var(--ease-sheet); max-width: 720px; margin: 0 auto; box-shadow: var(--e3); }
.sheet::before { content: ''; display: block; width: 36px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 16%, transparent); margin: 0 auto 12px; }
.sheet .sheet-head { display: flex; align-items: center; margin-bottom: 6px; gap: 8px; }
.sheet .sheet-head .label { flex: 1; font: 500 18px/24px var(--head); color: var(--ink); }
/* the "+" sheet: floats above the bar, inset 8px; 4 big tiles, then a list with hints */
.sheet.add { left: 8px; right: 8px; bottom: calc(var(--nav-h) + 8px); border-radius: var(--r-xl); padding: 8px 16px 8px; max-width: 520px; animation: pop .28s var(--ease-sheet); }
.sheet.add .add-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 4px 12px; }
.sheet.add .add-h .t-h2 { flex: none; }
.addgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ad { height: 88px; border-radius: var(--r-md); background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font: 600 13px/16px var(--body); color: var(--ink); text-align: center; text-decoration: none; border: 0; padding: 0 4px; cursor: pointer; position: relative; overflow: hidden; }
.ad svg { width: 24px; height: 24px; }
.ad > span { color: var(--ink); } .ad svg { color: inherit; }
.ad.pri, .ad.pri.k-wood, .ad.pri.k-olive, .ad.pri.k-earth, .ad.pri.k-stone, .ad.pri.k-sand { background: var(--cedar); color: var(--on-cedar); } .ad.pri > span { color: var(--on-cedar); }
.ad input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.addlist { margin-top: 6px; }
.al { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 4px; background: none; border: 0; text-align: left; color: var(--ink); cursor: pointer;
  position: relative; text-decoration: none; font: 600 15px/20px var(--body); }
.al + .al::before { content: ''; position: absolute; top: 0; left: 46px; right: 0; height: 1px; background: var(--line); }
.al .tile { width: 32px; height: 32px; border-radius: 9px; }
.al .tile svg { width: 18px; height: 18px; margin: 0; }
.al > svg { width: 20px; height: 20px; flex: none; margin: 0 4px; }
.al .grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al .hint { font: 400 13px/18px var(--body); color: var(--ink-2); flex: none; max-width: 48%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.again { margin: 8px 0 4px; background: var(--sunk); border-radius: var(--r-md); }
/* Nov 8 fix #4 (Chavie's recording: the "+" sheet ran under the status bar / Dynamic Island, its tiles cut off): the sheet
   never gets taller than the room between the safe-area top and the tab bar. The handle, the title and the four tiles stay
   put; the list scrolls inside the sheet (a soft fade at its bottom edge says there's more). */
.sheet.add { display: flex; flex-direction: column; overflow: hidden;
  max-height: calc(100vh - var(--nav-h) - 16px - var(--safe-t));
  max-height: calc(100dvh - var(--nav-h) - 16px - var(--safe-t)); }
.sheet.add::before, .sheet.add .add-h, .sheet.add .addgrid, .sheet.add .again { flex: none; }
.sheet.add .addlist { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sheet.add .addlist.more { -webkit-mask-image: linear-gradient(180deg, var(--ink) calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, var(--ink) calc(100% - 28px), transparent); }
.reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rs { height: 52px; border-radius: var(--r-md); background: var(--card); box-shadow: var(--e1); display: flex; align-items: center; gap: 10px; padding: 0 14px; font: 600 15px/20px var(--body);
  border: 0; color: var(--ink); cursor: pointer; text-align: left; }
.rs svg { width: 20px; height: 20px; color: var(--ink-2); flex: none; }
.rs.on { background: var(--cedar); color: var(--on-cedar); } .rs.on svg { color: var(--on-cedar); }
.note-in { margin-top: 12px; display: flex; align-items: center; gap: 6px; border-radius: var(--r-md); background: var(--sunk); padding: 0 6px 0 0; }
.note-in input { background: transparent; flex: 1; }
.note-in input:focus { box-shadow: none; }

/* photos */
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.photos img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--sunk); cursor: zoom-in; border-radius: var(--r-sm); }
.photo-full { position: fixed; inset: 0; background: rgba(20,21,19,.94); z-index: 70; display: grid; place-items: center; padding: 16px; }
.photo-full img { max-height: 90vh; border-radius: var(--r-sm); }
.photo-btn { position: relative; overflow: hidden; }
.photo-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }

/* login */
.login { min-height: 100vh; min-height: 100dvh; padding: 36px var(--pad) 40px; max-width: 520px; margin: 0 auto; animation: fade .5s ease; }
.login .logo { width: 96px; height: 96px; margin: 0 auto 14px; }
body.night .login .logo { filter: invert(1) sepia(.3) brightness(1.1); }
.login .center { text-align: center; }
.names { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
.names button { min-height: 58px; border: 0; border-radius: var(--r-md); background: var(--card); box-shadow: var(--e1); font: 400 18px var(--head); cursor: pointer; color: var(--ink); }
.pin-dots { display: flex; justify-content: center; gap: 16px; margin: 22px 0; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); }
.pin-dots i.on { background: var(--cedar); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keypad button { min-height: 64px; border: 0; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1); font: 300 28px var(--head); cursor: pointer; color: var(--ink); }
.keypad button:active { background: var(--sunk); }
.lang-switch { display: flex; justify-content: center; gap: 4px; margin-top: 26px; }
.lang-switch button { background: none; border: 0; min-height: 44px; padding: 10px 14px; font: 600 13px var(--body); color: var(--ink-2); cursor: pointer; border-radius: var(--r-sm); }
.lang-switch button.on { color: var(--ink); background: var(--sunk); }

.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 12px 0; }
.steps button { min-height: 58px; border: 0; border-radius: var(--r-sm); background: var(--sunk); font: 600 12px/1.2 var(--body); overflow-wrap: anywhere; padding: 4px; cursor: pointer; color: var(--ink-2); }
.steps button.past { background: var(--olive-t); color: var(--olive); }
.steps button.on { background: var(--cedar); color: var(--on-cedar); }
.check { display: flex; gap: 14px; align-items: center; min-height: 52px; border-top: var(--rule); cursor: pointer; }
.check input { width: 24px; height: 24px; accent-color: var(--olive); flex: none; }
.check.done span { text-decoration: line-through; color: var(--ink-2); }
.empty { padding: 22px 4px; color: var(--ink-2); margin: 0; }
.demo-note { border-radius: var(--r-md); background: var(--sunk); padding: 10px 14px; color: var(--ink-2); font-size: 15px; margin-bottom: 14px; }
.history { font-size: 15px; color: var(--ink-2); }
.history li { padding: 6px 0; border-top: var(--rule); list-style: none; }
.history ul { padding: 0; margin: 0; }
details summary { cursor: pointer; list-style: none; padding: 14px 0; min-height: 44px; }
details summary::-webkit-details-marker { display: none; }
table.simple { width: 100%; border-collapse: collapse; font-size: 15px; }
table.simple td, table.simple th { text-align: left; padding: 8px 6px 8px 0; border-top: var(--rule); vertical-align: top; }
table.simple th { font: 600 13px var(--body); color: var(--ink-2); }

/* ── Back bar: the top row of a detail screen (‹ Back · title once scrolled · actions) ── */
.backbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 10px; min-height: calc(52px + var(--safe-t));
  margin: calc(-1 * max(10px, var(--safe-t))) calc(-1 * var(--pad)) 4px; padding: var(--safe-t) var(--pad) 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: box-shadow .2s; }
.backbar.scrolled { box-shadow: 0 1px 0 var(--line); }
.back { display: inline-flex; align-items: center; gap: 2px; color: var(--cedar); font: 600 18px/1 var(--body); background: none; border: 0; padding: 0 10px 0 0; margin-left: -6px;
  min-height: 44px; min-width: 44px; cursor: pointer; text-decoration: none; border-radius: var(--r-sm); }
.back svg { width: 26px; height: 26px; stroke-width: 2; flex: none; }
.back:active { background: var(--cedar-t); }
.backbar-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 500 15px var(--head); opacity: 0; transition: opacity .2s; }
.backbar.scrolled .backbar-title { opacity: 1; }
.backbar-right { margin-left: auto; flex: none; display: flex; gap: 4px; align-items: center; }
.sheet .backbar { position: static; margin: 0; padding: 0; min-height: 0; background: none; }
.pagehead { margin: 0 0 14px; }

/* ── Avatar menu (was "More") ── */
.menu-me { display: flex; align-items: center; gap: 14px; margin: 6px 0 16px; }
.menu-me .av { width: 52px; height: 52px; font-size: 18px; }

/* ── Schedule: one card, row hairlines only, assignments as bars that span days, today as a soft band ── */
.sch-head { justify-content: space-between; margin: 8px 0 14px; }
.daysw { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 4px; border-radius: 999px; background: var(--card); box-shadow: var(--e1); font: 600 15px/1 var(--body); }
.daysw button { width: 32px; height: 32px; border: 0; background: none; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; position: relative; border-radius: 50%; }
.daysw button::after { content: ''; position: absolute; inset: -6px -2px; }
.daysw svg { width: 18px; height: 18px; }
.daysw .tn { padding: 0 6px; }
.wk { margin-top: 12px; padding: 6px 0 4px; overflow-x: auto; position: relative; }
.wh, .wr, .wband { display: grid; grid-template-columns: 76px repeat(var(--days, 6), minmax(36px, 1fr)); align-items: center; padding: 0 10px 0 12px; }
.wband { position: absolute; inset: 6px 0; pointer-events: none; }
.wband i { height: 100%; }
.wband i.on { background: rgba(75,53,32,.045); border-radius: 12px; }
body.night .wband i.on { background: rgba(220,198,166,.06); }
.wh { height: 52px; position: relative; }
.wh span { text-align: center; font: 600 11px/14px var(--body); color: var(--ink-2); position: relative; }
.wh span b { display: block; margin: 2px auto 0; font: 400 17px/22px var(--head); color: var(--ink); font-variant-numeric: tabular-nums; width: 28px; height: 28px; line-height: 28px; border-radius: 50%; }
.wh span.today b { background: var(--ink); color: var(--bg); }
.wh span .pd { position: absolute; top: 0; right: calc(50% - 16px); width: 5px; height: 5px; border-radius: 50%; background: var(--cedar); }
.wr { min-height: 52px; position: relative; }
.wr::before { content: ''; position: absolute; left: 12px; right: 10px; top: 0; height: 1px; background: var(--line); }
.nm { display: flex; align-items: center; gap: 8px; font: 600 13px/16px var(--body); min-width: 0; }
.nm .nm-t, .nm-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nm .av { flex: none; }
.sbar { height: 34px; margin: 0 2px; border-radius: var(--r-sm); position: relative; display: flex; align-items: center; padding: 0 8px; min-width: 0;
  font: 600 11.5px/14px var(--body); white-space: nowrap; overflow: hidden; }
.sbar .sl { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.sbar.set { background: var(--cedar-t); color: var(--cedar); }
.sbar.wait { background: transparent; color: var(--cedar); box-shadow: inset 0 0 0 1.5px transparent; border: 1.5px dashed rgba(75,53,32,.45); padding: 0 6.5px; }
body.night .sbar.wait { border-color: rgba(220,198,166,.5); }
.sbar.cf { background: var(--ox-t); color: var(--ox); box-shadow: inset 0 0 0 1.5px var(--ox); }
.sbar.off { background: repeating-linear-gradient(135deg, var(--track) 0 4px, transparent 4px 8px); color: var(--ink-2); }
.sbar.shop { background: var(--sunk); color: var(--ink); }
.sbar.e { background: transparent; }
.sbar .hits { position: absolute; inset: 0; display: flex; }
.sbar .hit { flex: 1; border: 0; background: transparent; padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--ink-2); border-radius: var(--r-sm); min-height: 44px; margin: -5px 0; }
.sbar .hit.sel { box-shadow: inset 0 0 0 1.5px var(--ink); }
.sbar .hit svg { width: 16px; height: 16px; }
@media (hover: hover) { .sbar.e .hit:hover { background: var(--track); } }
.sbar small.ld { position: relative; z-index: 1; margin-left: auto; padding-left: 4px; font: 600 11px/1 var(--body); color: var(--ink-2); pointer-events: none; }
.sbar small.ld.full { color: var(--olive); }
.week-mini .sbar { height: 28px; }
.week-mini .wr { min-height: 44px; }
.week-mini .wh { height: 34px; }
.week-mini .wh span b { display: inline; margin: 0 0 0 4px; width: auto; height: auto; line-height: inherit; background: none; color: inherit; font: inherit; }
.week-mini .wh span.today { color: var(--ink); }
/* the Sites view keeps one cell per day: people as stacked avatars */
.sc { height: 34px; margin: 0 2px; border-radius: var(--r-sm); display: grid; place-items: center; font: 600 11.5px/14px var(--body); text-align: center; position: relative; padding: 0 2px;
  background: transparent; color: var(--cedar); border: 0; cursor: pointer; min-width: 0; white-space: nowrap; }
.sc::after { content: ''; position: absolute; inset: -5px 0; }
.sc.set { background: var(--cedar-t); }
.sc.wait { border: 1.5px dashed rgba(75,53,32,.45); }
.sc.cf { background: var(--ox-t); color: var(--ox); box-shadow: inset 0 0 0 1.5px var(--ox); }
.sc.sel { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.sc svg { width: 16px; height: 16px; }
@media (hover: hover) { .sc.e:hover { background: var(--track); } }
.sc small.ld, .legend small.ld { display: block; font: 700 11px/1 var(--body); color: var(--ink-2); letter-spacing: .01em; }
.sc small.ld.full { color: var(--olive); }
.legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font: 600 12px/16px var(--body); color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.lk { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.lk.set { background: var(--cedar-t); } .lk.wait { border: 1.5px dashed rgba(75,53,32,.45); } .lk.cf { background: var(--ox-t); box-shadow: inset 0 0 0 1.5px var(--ox); }
.sch-foot { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 16px; }
.pick { position: fixed; left: 8px; right: 8px; bottom: calc(var(--nav-h) + 8px); z-index: 52; background: var(--card); border-radius: var(--r-xl); padding: 14px 16px;
  box-shadow: var(--e2); max-width: 560px; margin: 0 auto; animation: pop .28s var(--ease-sheet); }
.pick .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 0; }
.map { height: 72px; position: relative; display: block;
  background: linear-gradient(90deg, transparent 47%, color-mix(in srgb, var(--ink-3) 45%, transparent) 47% 53%, transparent 53%),
    linear-gradient(0deg, transparent 58%, color-mix(in srgb, var(--ink-3) 45%, transparent) 58% 63%, transparent 63%),
    linear-gradient(28deg, transparent 30%, color-mix(in srgb, var(--ink-3) 30%, transparent) 30% 33%, transparent 33%), var(--sunk); }
.pinb { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-60%); width: 36px; height: 36px; border-radius: 50%; background: var(--cedar); color: var(--on-cedar); display: grid; place-items: center; box-shadow: var(--e2); }
.pinb svg { width: 18px; height: 18px; }
.dayb { width: 40px; flex: none; text-align: center; font: 600 11px/14px var(--body); color: var(--ink-2); }
.dayb b { display: block; font: 400 18px/22px var(--head); color: var(--ink); margin-top: 2px; font-variant-numeric: tabular-nums; }
.big-time { font: 300 26px/30px var(--head); font-variant-numeric: tabular-nums; }
.okdot { width: 22px; height: 22px; border-radius: 50%; background: var(--olive); color: var(--card); display: grid; place-items: center; }
.okdot svg { width: 14px; height: 14px; stroke-width: 2.6; }

/* ── Crew Home: the "Now" card (cedar) and the three-stat strip ── */
.now { margin-top: 18px; background: linear-gradient(160deg, #523A24 0%, #3F2C1A 100%); color: #F2F1ED; border-radius: var(--r-lg); padding: 18px 18px 16px; box-shadow: var(--e2); }
body.night .now { box-shadow: 0 0 0 1px rgba(245,240,232,.08), 0 16px 40px -16px rgba(0,0,0,.7); }
.now .k { font: 600 12px/16px var(--body); color: #D9C7AE; display: flex; align-items: center; gap: 6px; min-width: 0; }
.now .k svg, .now .w svg { width: 16px; height: 16px; flex: none; }
.now h2 { font: 400 24px/30px var(--head); letter-spacing: -.01em; margin: 6px 0 4px; }
.now .w { font: 400 13px/18px var(--body); color: #E3D6C3; display: flex; align-items: center; gap: 6px; }
.now .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.now .bring { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(242,241,237,.14); font: 400 13px/18px var(--body); color: #E3D6C3; }
.now .bring b { color: #F2F1ED; font-weight: 600; }
.btn.on-dark { background: #F2F1ED; color: #202320; box-shadow: none; }
.btn.ghost-dark { background: rgba(242,241,237,.1); color: #F2F1ED; box-shadow: inset 0 0 0 1px rgba(242,241,237,.18); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; padding: 0; }
.stats .st { padding: 14px 0 14px 16px; position: relative; text-decoration: none; color: inherit; min-width: 0; }
.stats .st + .st::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
.stats .v { font: 300 26px/30px var(--head); letter-spacing: -.015em; }
.stats .v small { font: 400 15px/1 var(--head); color: var(--ink-2); margin-left: 1px; }
.stats .l { font: 600 12px/16px var(--body); color: var(--ink-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Daily log entry card ── */
.lg { display: flex; gap: 12px; margin-top: 12px; align-items: flex-start; }
.lgk { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; }
.lgk svg { width: 16px; height: 16px; stroke-width: 2; }
.lgk.green { background: var(--olive-t); color: var(--olive); } .lgk.ox { background: var(--ox-t); color: var(--ox); } .lgk.attn { background: var(--sunk); color: var(--ink-2); }
.lg ul { margin: 0; padding: 0; list-style: none; flex: 1; min-width: 0; }
.lg li { font: 400 15px/22px var(--body); padding: 3px 0; overflow-wrap: anywhere; }
.lg li + li { border-top: 1px solid var(--line); }
.meas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.meas div { background: var(--sunk); border-radius: var(--r-sm); padding: 8px 10px; min-width: 0; }
.meas small { display: block; font: 600 11px/14px var(--body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meas b { display: block; font: 400 18px/22px var(--head); margin-top: 4px; font-variant-numeric: tabular-nums; }
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.strip img, .strip span { width: 100%; height: 58px; object-fit: cover; border-radius: var(--r-sm); background: var(--sunk); }
.strip span { display: grid; place-items: center; font: 600 13px/18px var(--body); color: var(--ink); }

/* ── Project page: title, the phase bar, 4 quick tiles ── */
.ph-head .t { font: 400 28px/34px var(--head); letter-spacing: -.012em; margin: 6px 0 0; }
.ph-head .m { font: 400 15px/22px var(--body); color: var(--ink-2); margin-top: 2px; }
.ph-head .acts { display: none; }
.stage { margin-top: 16px; padding: 14px 16px 16px; }
.stage .row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.stage .row1 b { font: 600 15px/20px var(--body); }
.stage .row1 .ox-txt { font: 600 13px/18px var(--body); }
.phases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 12px; }
.phases .p { font: 600 11px/14px var(--body); color: var(--ink-2); min-width: 0; }
.phases .p i { height: 6px; border-radius: 3px; background: var(--track); display: block; position: relative; overflow: hidden; margin-bottom: 6px; }
.phases .p.d i { background: var(--cedar); }
.phases .p i b { position: absolute; inset: 0 auto 0 0; background: var(--cedar); border-radius: 3px; }
.phases .p.c { color: var(--ink); }
.phases .p.c.ox i b { background: var(--ox); }
.phases .p span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phases .p small { display: none; font: 400 12px/16px var(--body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 8px; margin-top: 10px; }
.q { height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font: 600 12px/16px var(--body); text-decoration: none; color: var(--ink);
  background: var(--card); box-shadow: var(--e1); border-radius: var(--r-md); border: 0; padding: 0; cursor: pointer; position: relative; }
.q svg { width: 20px; height: 20px; }
.q .tile { width: 36px; height: 36px; border-radius: 11px; }
.q .tile svg { width: 20px; height: 20px; }
.q .dot { position: absolute; top: 8px; right: calc(50% - 22px); width: 7px; height: 7px; border-radius: 50%; background: var(--cedar); box-shadow: 0 0 0 2px var(--card); }
.menu-pop { position: absolute; right: 0; top: 46px; z-index: 30; background: var(--card); border-radius: var(--r-md); box-shadow: var(--e2); min-width: 220px; padding: 4px 0; overflow: hidden; }
.menu-pop a, .menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 16px; min-height: 48px; text-decoration: none; color: var(--ink); background: none; border: 0; font: 400 15px/22px var(--body); text-align: left; cursor: pointer; }
.menu-pop a + a, .menu-pop * + button, .menu-pop button + a { border-top: 1px solid var(--line); }
.menu-pop svg { width: 18px; height: 18px; color: var(--ink-2); }
.task-tbl .tag, .task-tbl .when2 { display: none; }
.ck { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); flex: none; margin: 0 7px; display: grid; place-items: center; }
.ck.ox { box-shadow: inset 0 0 0 1.5px var(--ox); }
.ck.done { background: var(--olive); box-shadow: none; color: var(--card); }
.ck.done svg { width: 14px; height: 14px; stroke-width: 2.6; }
.ck.wait { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.rw.done .t .a { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.rail h5 { font: 500 18px/24px var(--head); margin: 0 0 10px; }
.rail .card + .card { margin-top: 12px; }
.matbar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; gap: 2px; margin: 4px 0 12px; background: var(--track); }
.matbar i { display: block; height: 100%; }
.kvr { display: flex; justify-content: space-between; font: 400 15px/22px var(--body); padding: 6px 0; }
.kvr + .kvr { border-top: 1px solid var(--line); }
.kvr span:first-child { color: var(--ink-2); }
.kvr b { font-weight: 600; font-variant-numeric: tabular-nums; }

@media (min-width: 760px) and (max-width: 1023px) {
  :root { --pad: 32px; }
}
@media (hover: hover) {
  .names button:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
}

/* one-time setup page + printable PIN sheet */
.setup code { font: 400 15px ui-monospace, Menlo, monospace; background: var(--sunk); padding: 1px 5px; border-radius: var(--r-xs); }
.print-only { display: none; }
@media print {
  .no-print, .tabbar, .topbar, .toast, .banner { display: none !important; }
  .print-only { display: block; margin: 0 0 8px; }
  body { background: var(--white); color: black; }
  .login { padding: 0; max-width: none; }
  table.simple td, table.simple th { border-top: 1px solid gray; padding: 8px 10px 8px 0; font-size: 13px; }
}

/* ── Phone notifications (update 2) ───────────────────────────── */
.push-status { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font: 400 18px/1.35 var(--head); }
.push-status .sq { width: 10px; height: 10px; flex: none; border: 1px solid var(--ink-2); background: transparent; }
.push-status.on .sq { background: var(--cedar); border-color: var(--cedar); }
.push-status.blocked { color: var(--ox); }
.push-status.blocked .sq, .push-status.install .sq { background: var(--ox); border-color: var(--ox); }
.push-help { margin: 10px 0 0; padding: 12px 14px; border-left: 3px solid var(--ox); background: var(--sunk); font-size: 15px; }
.push-settings .toggle { margin-top: 8px; border-top: var(--rule); padding-top: 12px; }
.push-card { border: 0; padding: 18px; margin: 18px 0 4px; background: var(--bg); }
.push-card-text { margin: 8px 0 14px; }
.push-card .link { display: inline-flex; }

/* manager's own daily log on Today */
.my-log { background: var(--sunk); padding: 18px var(--pad); margin: 24px calc(-1 * var(--pad)) 22px; }
.my-log-status { margin: 6px 0 14px; font: 400 18px/1.35 var(--head); }
.my-log:not(.sent) .my-log-status { color: var(--ox); }
.my-log .grid2 .btn { }

/* off-site job (site visits) */
.visit-card { border: 0; padding: 18px; margin: 0; background: var(--bg); }
.visit-card.on { border-color: var(--ink-2); border-left: 3px solid var(--ink-2); background: var(--sunk); }
.visit-where { margin: 6px 0 14px; font: 400 18px/1.35 var(--head); }
.onsite-bar { display: flex; align-items: center; gap: 10px; padding: 10px var(--pad); background: var(--ink-2); color: var(--on-cedar); text-decoration: none; font-size: 15px; }
.onsite-bar .onsite-cta { font: 600 13px var(--body); white-space: nowrap; }
.visit-row .photos { grid-template-columns: repeat(4, 1fr); }
.daylog { border-top: var(--rule); }
.daylog-visits .visit-row { border-top: 0; padding: 8px 0 0; }

/* ── Chat (update 14): bubbles that group, a calm header, a composer with "+", a pill field and a cedar Send ── */
.chat { display: flex; flex-direction: column; min-height: calc(100dvh - var(--nav-h) - max(10px, var(--safe-t))); }
body:not(.no-top) .chat { min-height: calc(100dvh - var(--nav-h) - 52px - var(--safe-t) - 58px); }
main.page:has(> .chat) { padding-bottom: var(--nav-h); }
.chat-seg { margin: 4px 0 8px; }
.th-bar { display: flex; align-items: center; gap: 10px; min-height: 56px; margin: 0 calc(-1 * var(--pad)); padding: var(--safe-t) var(--pad) 0 calc(var(--pad) - 12px); box-shadow: 0 1px 0 var(--line);
  position: sticky; top: 0; z-index: 15; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.has-tabs:not(.no-top) .th-bar { top: calc(52px + var(--safe-t)); padding-top: 0; }
.th-bar .back { font-size: 0; gap: 0; padding: 0; min-width: 40px; margin: 0; color: var(--ink); }
.th-bar .back svg { width: 24px; height: 24px; }
.th-bar .tile { width: 36px; height: 36px; }
.th-bar .tile svg { width: 18px; height: 18px; }
.th-title b { display: block; font: 600 16px/20px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-title small { display: block; font: 400 12px/16px var(--body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list { flex: 1; padding: 8px 0 16px; }
.chat-day { text-align: center; font: 600 12px/16px var(--body); color: var(--ink-2); margin: 14px 0 6px; }
.g { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.g > .av { margin-bottom: 21px; }
.g .col { display: flex; flex-direction: column; gap: 3px; max-width: min(84%, 520px); min-width: 0; }
.g .who { font: 600 12px/16px var(--body); color: var(--ink-2); margin: 0 0 2px 12px; }
.g.me { justify-content: flex-end; }
.g.me .col { align-items: flex-end; }
.ts { font: 400 11px/14px var(--body); color: var(--ink-2); margin: 3px 12px 0; }
.msg { position: relative; padding: 9px 13px; background: var(--card); box-shadow: var(--e1); border-radius: 18px; align-self: flex-start; max-width: 100%;
  font: 400 15px/21px var(--body); color: var(--ink); text-align: left; transition: background .3s; -webkit-touch-callout: none; touch-action: pan-y; }
.g .msg:not(:last-of-type) { border-bottom-left-radius: 6px; }
.g .msg + .msg { border-top-left-radius: 6px; }
.g.me .msg { background: var(--cedar); color: var(--on-cedar); box-shadow: none; align-self: flex-end; border-radius: 18px; }
.g.me .msg:not(:last-of-type) { border-bottom-right-radius: 6px; }
.g.me .msg + .msg { border-top-right-radius: 6px; }
.msg.bare { padding: 4px; }
.msg.for-me { box-shadow: var(--e1), inset 0 0 0 1.5px var(--cedar); }
.msg.flash { background: var(--cedar-t); }
.g.me .msg.flash { background: var(--ink); }
.msg-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-photo { width: 220px; max-width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--sunk); cursor: zoom-in; border-radius: 14px; }
.msg-photo + .msg-body, .voice + .msg-body, .vclip + .msg-body { margin-top: 6px; }
.msg-quote { display: block; width: 100%; text-align: left; border: 0; border-radius: var(--r-sm); background: var(--sunk); padding: 6px 10px; margin: 0 0 6px; font: 400 13px/18px var(--body);
  color: var(--ink-2); cursor: pointer; box-shadow: inset 2px 0 0 var(--cedar); }
.g.me .msg-quote { background: rgba(242,241,237,.14); color: var(--on-cedar); box-shadow: inset 2px 0 0 rgba(242,241,237,.5); }
body.night .g.me .msg-quote { background: rgba(26,27,24,.12); box-shadow: inset 2px 0 0 rgba(26,27,24,.4); }
.msg-quote b { display: block; font-weight: 600; color: inherit; }
.msg-quote span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.msg-quote.missing { cursor: default; color: var(--ink-2); }
.mention { font-weight: 700; }
.g:not(.me) .mention { color: var(--cedar); }
.mention.me { background: var(--cedar-t); color: var(--cedar); border-radius: var(--r-xs); padding: 0 2px; }
/* Reply / Copy: long-press (phone) or hover (desktop) */
.msg-acts { display: none; position: absolute; top: -40px; z-index: 4; gap: 2px; padding: 2px; border-radius: 999px; background: var(--card); box-shadow: var(--e2); left: 0; }
.g.me .msg-acts { left: auto; right: 0; }
.msg.act .msg-acts { display: flex; animation: fade .15s ease; }
.msg-acts button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; background: none; border-radius: 999px; font: 600 13px/1 var(--body); color: var(--ink); cursor: pointer; position: relative; }
.msg-acts button::after { content: ''; position: absolute; inset: -4px 0; }
.msg-acts svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .msg:hover .msg-acts { display: flex; } .msg-acts { top: auto; bottom: calc(100% - 6px); } }
.composer-dock { position: sticky; bottom: var(--nav-h); background: var(--bar-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 -1px 0 var(--line);
  margin: 10px calc(-1 * var(--pad)) 0; padding: 0 12px; z-index: 2; }
.composer { display: flex; gap: 8px; align-items: flex-end; padding: 8px 0; position: relative; }
.cbtn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; position: relative; padding: 0; }
.cbtn::after { content: ''; position: absolute; inset: -2px; }
.cbtn svg { width: 22px; height: 22px; }
.cbtn.on { background: var(--cedar-t); color: var(--cedar); }
.add-wrap { position: relative; flex: none; }
.add-pop { display: none; position: absolute; bottom: 48px; left: 0; z-index: 6; background: var(--card); border-radius: var(--r-md); box-shadow: var(--e2); padding: 4px 8px; min-width: 210px; }
.add-wrap.open .add-pop { display: block; animation: pop .2s var(--ease-sheet); }
.add-pop .al { min-height: 48px; }
.add-pop .al svg { width: 20px; height: 20px; }
.add-pop .al span { font: 600 15px/20px var(--body); }
.composer-photo input, .video-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.video-btn { position: relative; overflow: hidden; }
.video-btn.busy { opacity: .5; }
.field-pill { flex: 1; min-width: 0; display: flex; align-items: flex-end; border-radius: 20px; background: var(--bg); padding: 0 4px 0 0; position: relative; }
.field-pill textarea { flex: 1; min-height: 40px; max-height: 140px; padding: 9px 4px 9px 16px; border-radius: 20px; background: transparent; font: 400 16px/22px var(--body); resize: none; }
.field-pill textarea:focus { box-shadow: none; }
.field-pill:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
.composer-mic { width: 32px; height: 32px; margin: 4px 0; border-radius: 50%; background: transparent; color: var(--ink-2); display: grid; place-items: center; flex: none; padding: 0; }
.composer-mic svg { width: 20px; height: 20px; }
.btn.send { width: 40px; height: 40px; min-height: 40px; border-radius: 50%; padding: 0; flex: none; }
.btn.send svg { width: 22px; height: 22px; }
.mic-btn { flex: none; border: 0; z-index: 3; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.mic-btn svg { width: 20px; height: 20px; }
.mic-btn.on { background: var(--ox); color: var(--on-cedar); }
.mention-list { max-height: 40vh; overflow-y: auto; }
.mention-list button { display: block; width: 100%; text-align: left; border: 0; box-shadow: 0 1px 0 var(--line); background: none; padding: 12px 4px; min-height: 48px; cursor: pointer; font: 400 15px/22px var(--body); color: var(--ink); }
.mention-list button b { font-weight: 600; }
.mention-none { padding: 12px 4px; margin: 0; }
.reply-bar { display: flex; align-items: center; gap: 8px; padding: 8px 0 0; }
.reply-bar p { flex: 1; min-width: 0; margin: 0; box-shadow: inset 2px 0 0 var(--cedar); padding-left: 10px; }
.reply-bar .reply-snip { display: block; font: 400 13px/18px var(--body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-preview { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
/* the chat list: 64px rows */
.cr { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 16px; text-decoration: none; color: inherit; position: relative; }
.chat-rows .cr + .cr::before { content: ''; position: absolute; top: 0; left: 68px; right: 0; height: 1px; background: var(--line); }
.cr .grow b { display: block; font: 600 15px/20px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr .grow small { display: block; font: 400 13px/18px var(--body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cr.unread .grow b { font-weight: 700; color: var(--ink); }
.cr-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.cr-end time { font: 600 12px/16px var(--body); color: var(--ink-2); }
.cr.unread .cr-end time { color: var(--cedar); }
.udot { width: 7px; height: 7px; border-radius: 50%; background: var(--cedar); }
.cr-at { font: 700 12px/1 var(--body); color: var(--cedar); }
.tile.t40 { width: 40px; height: 40px; border-radius: var(--r-sm); }
.tile.t40 svg { width: 20px; height: 20px; }
.dm-actions { display: flex; gap: 8px; margin: 4px 0 12px; }
.dm-pick .av { margin-right: 0; }
.dm-search { margin-bottom: 10px; }
.dm-members { max-height: 46vh; overflow-y: auto; margin-bottom: 14px; }
.dm-members .toggle { margin: 0; padding: 10px 0; box-shadow: 0 -1px 0 var(--line); }
.dm-member-list { list-style: none; padding: 0; margin: 0 0 12px; columns: 2; }
.dm-member-list li { padding: 4px 0; }

/* notify team */
.announcement { border-left: 3px solid var(--ink); background: var(--sunk); padding: 14px 16px; }
.announcement p { margin: 0; white-space: pre-wrap; font-size: 18px; }
.ann-box { border: 0; padding: 16px 18px; margin: 18px 0 4px; }
.ann-box .ann + .ann { border-top: var(--rule); margin-top: 12px; padding-top: 12px; }
.ann-box .ann:first-of-type { margin-top: 10px; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notify-pick .choice { min-height: 48px; }

/* task dependencies (update 4): "waiting" is cedar, not oxblood — it's an order, not a problem */
.dep-list { margin: 8px 0 0; padding: 0; list-style: none; }
.dep-list li { padding: 6px 0; border-top: var(--rule); }
.dep-list li:first-child { border-top: 0; }
.dep-list .done { color: var(--ink-2); text-decoration: line-through; }
.dep-pick { max-height: 340px; overflow: auto; border: var(--rule); padding: 8px; margin-top: 6px; }
.dep-pick .choice { min-height: 48px; }
.dep-chain { margin: 6px 0 4px; }

/* order of work (Gantt-lite) */
.ow-total { margin: 0 0 10px; font: 400 18px/1.35 var(--head); }
.ow-step { position: relative; padding: 4px 0 10px 22px; border-left: 1px solid var(--ink-3); margin-left: 6px; }
.ow-step:last-child { border-left-color: transparent; }
.ow-step::before { content: ''; position: absolute; left: -6px; top: 8px; width: 11px; height: 11px; background: var(--bg); border: 0; }
.ow-step.done::before { background: var(--ink-2); border-color: var(--ink-2); }
.ow-head { display: flex; align-items: baseline; gap: 10px; }
.ow-head .label { flex: 1; color: var(--ink); }
.ow-head .cum { font: 400 13px var(--head); color: var(--ink-2); }
.ow-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0 8px 10px; margin-top: 6px; border-left: 3px solid var(--ink-3); text-decoration: none; color: inherit; background: var(--bg); }
.ow-row .grow small { display: block; color: var(--ink-2); font-size: 13px; }
.ow-row.st-completed { border-left-color: var(--ink-2); color: var(--ink-2); }
.ow-row.st-completed .t { text-decoration: line-through; }
.ow-row.st-in_progress { border-left-color: var(--ink); }
.ow-row.st-ready { border-left-color: var(--ink); border-left-style: double; }
.ow-row.st-waiting { border-left-color: var(--cedar); border-left-style: dashed; }
.ow-row.st-blocked, .ow-row.st-needs_review { border-left-color: var(--ox); }
.ow-row .min { font: 400 13px var(--head); color: var(--ink-2); white-space: nowrap; }

/* work orders (update 4) */
.wo-row .label.dark { }
.wo-unbilled { display: block; text-decoration: none; margin-bottom: 10px; font: 400 16px var(--head); }
.wo-mine { margin-top: 8px; }
.sigpad canvas { width: 100%; height: 160px; border: 0; background: var(--white); touch-action: none; display: block; }
.print-only { display: none; }
@media print {
  .topbar, .tabbar, .onsite-bar, .no-print, .toast, .banner, .push-card { display: none !important; }
  .print-only { display: block; }
  .print-head { display: flex; gap: 14px; align-items: center; border-bottom: 1px solid black; padding-bottom: 10px; margin-bottom: 14px; font: 600 13px var(--body); }
  .print-head img { width: 56px; height: 56px; }
  body { background: var(--white); }
  main.page { padding: 0; max-width: none; animation: none; }
  .photos { grid-template-columns: repeat(4, 1fr); }
  a { text-decoration: none; color: black; }
}

/* office vs field (update 4): office work gets its own quiet marker so it's easy to scan */

/* motivational line under the greeting (update 6) */
.quote { font: 400 13px/18px var(--body); color: var(--ink-2); margin: 2px 0 18px; } /* update 17: the daily line is back (styles: .hero .quote, .quote.desk) */

/* ── Update 7: approvals ("Waiting on Chavie") ── cedar = waiting on a person's decision (not a problem) */
.ap-block { margin-bottom: 6px; }
.ap-block .section-head { margin-top: 18px; }
.ap-what { display: block; margin: 8px 0 0; font: 400 18px/1.4 var(--body); text-decoration: none; white-space: pre-wrap; }
.ap-age { font: 600 13px var(--body); color: var(--cedar); }
.ap-answer { margin: 10px 0 0; padding-left: 12px; border-left: 1px solid var(--ink-3); white-space: pre-wrap; }
.ap-actions { margin-top: 12px; display: grid; gap: 8px; }
.ap-actions .grid2 .btn { width: 100%; }
.ap-card .photos { margin-top: 10px; }
.ap-ask-card { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px 0; border-top: var(--rule); border-bottom: var(--rule); }
.ap-form .grid3 { margin-bottom: 6px; }

/* ── Update 7: drawings viewer (full screen over the app) ── */
html.pdfv-open, html.pdfv-open body { overflow: hidden; }
.pdfv { position: fixed; inset: 0; z-index: 60; background: var(--sunk); display: flex; flex-direction: column; }
.pdfv-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 12px; padding-top: max(6px, env(safe-area-inset-top)); background: var(--bg); border-bottom: var(--rule); }
.pdfv-bar .back { flex: none; }
.pdfv-title { flex: 1; min-width: 0; text-align: center; }
.pdfv-title .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdfv-pageno { margin: 2px 0 0; font: 400 13px var(--head); color: var(--ink-2); }
.pdfv-scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior: contain; position: relative; }
.pdfv-pages { padding: 10px; transform-origin: 0 0; will-change: transform; }
.pdfv-page { position: relative; margin: 0 auto 10px; background: var(--white); box-shadow: 0 0 0 0.75px var(--ink-3); }
.pdfv-page canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pdfv-num { position: absolute; top: 50%; left: 0; right: 0; text-align: center; font: 300 24px var(--head); color: var(--ink-3); }
.pdfv-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; }
.pdfv-foot { text-align: center; margin: 4px 0 calc(90px + var(--safe-b)); color: var(--ink-2); }
.pdfv-zoom { position: fixed; right: 14px; bottom: calc(16px + var(--safe-b)); display: flex; background: var(--bg); border: 0; z-index: 61; }
.pdfv-zoom button { min-width: 52px; height: 52px; background: none; border: 0; font: 300 26px var(--head); cursor: pointer; }
.pdfv-zoom button.fit { min-width: 70px; font: 600 13px var(--body); border-left: var(--rule); border-right: var(--rule); }
.pdfv-zoom button:disabled { color: var(--ink-3); }
.ap-ref { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); }
.ap-ref a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; }

/* update 8: project templates */
.note-box { border-left: 2px solid var(--cedar); background: var(--sunk); padding: 8px 12px; margin: 12px 0; }
.tpl-links { gap: 0 22px; margin: 14px 0 0; flex-wrap: wrap; }
.tpl-steps { list-style: none; padding: 0; margin: 0; border-top: var(--rule); }
.tpl-steps li { display: flex; gap: 8px; align-items: flex-start; border-bottom: var(--rule); padding: 12px 0; }
.tpl-steps li.locked { color: var(--ink-2); }
.tpl-step-main { flex: 1; min-width: 0; }
.tpl-step-main p { margin: 0; }
.tpl-step-title { font-weight: 600; overflow-wrap: anywhere; }
.tpl-step-title .tpl-num { font: 600 13px var(--body); color: var(--ink-2); margin-right: 8px; }
.tpl-after { color: var(--cedar); margin-top: 2px !important; }
.tpl-step-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.tpl-step-tools > div { display: flex; }
.tpl-step-tools .iconbtn { width: 40px; height: 36px; font-size: 18px; border: var(--rule); }
.tpl-step-tools .iconbtn:disabled { opacity: .3; }
.tpl-acts { display: flex; gap: 14px; margin-top: 4px; }
.tpl-acts button { background: none; border: 0; padding: 8px 0; font: 600 13px var(--body); color: var(--ink); border-bottom: var(--rule); cursor: pointer; }

/* update 9: SOP process map */
.pmap { list-style: none; padding: 0; margin: 0; }
.pmap-phase { border-top: var(--rule); }
.pmap-phase:last-child { border-bottom: var(--rule); }
.pmap-head { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 14px 0; text-align: left; cursor: pointer; }
.pmap-head.edit { cursor: default; padding-bottom: 6px; }
.pmap-head.edit input { min-width: 0; font-weight: 600; }
.pmap-num { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 0; font: 600 13px var(--body); }
.pmap-phase.open .pmap-num { background: var(--cedar); color: var(--on-cedar); }
.pmap-name { display: block; font: 400 18px/1.3 var(--head); }
.pmap-chev { font: 300 24px var(--head); color: var(--ink-2); width: 20px; text-align: center; }
.pmap-steps { padding: 0 0 16px 46px; display: flex; flex-direction: column; gap: 8px; }
.pmap-steps.seq { border-left: 1.5px dashed var(--ink-3); margin-left: 17px; padding-left: 28px; }
.pmap.edit .pmap-steps { padding-left: 0; }
.ph-toggles { padding: 0 0 6px 46px; }
.ph-toggles .toggle { margin: 2px 0; font-size: 15px; }
.ph-del { margin: 0 0 12px; }
.step-card { border: var(--rule); background: var(--card); display: flex; align-items: stretch; }
.step-card.held { border-left: 3px solid var(--ox); }
.step-main { flex: 1; min-width: 0; display: flex; gap: 10px; background: none; border: 0; padding: 10px 12px; text-align: left; cursor: pointer; }
.step-n { flex: none; font: 600 13px var(--body); color: var(--ink-2); padding-top: 3px; min-width: 24px; }
.step-title { display: block; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.step-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip-tag { font: 600 13px/1 var(--body); padding: 4px 6px; border: 1px solid var(--ink-3); color: var(--ink-2); white-space: nowrap; }
.chip-tag.office { border-color: var(--ink-2); color: var(--ink); }
.chip-tag.who { background: var(--sunk); color: var(--ink); border-color: var(--sunk); text-transform: none; font-size: 12px; }
.chip-tag.hold { border-color: var(--ox); color: var(--ox); }
.step-tools { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; border-left: var(--rule); flex: none; width: 92px; }
.step-tools .step-move { width: 84px; font-size: 12px; padding: 4px; min-height: 30px; }
.iconbtn.sm { width: 36px; height: 32px; font-size: 16px; border: var(--rule); }
.iconbtn.sm:disabled { opacity: .3; }
.step-tools > .iconbtn.sm { display: inline-grid; }
.step-x { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--ink-2); cursor: pointer; padding: 4px 8px; }
.sop-text { white-space: pre-wrap; margin: 0; line-height: 1.6; }
.sop-check { margin: 0; padding-left: 20px; }
.sop-check li { margin: 4px 0; }
.req-tag { display: inline-block; margin-left: 8px; font: 600 13px/1 var(--body); color: var(--ox); border: 1px solid var(--ox); padding: 3px 5px; vertical-align: 2px; }
.chk-edit { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.chk-edit input[type=text] { flex: 1; min-width: 0; }
.chk-req { display: flex; gap: 4px; align-items: center; font-size: 13px; white-space: nowrap; }
.hold-edit { border-left: 3px solid var(--ox); padding: 10px 12px; background: var(--sunk); margin: 10px 0; }
.hold-edit .chips, .sheet .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 6px; }
.ref-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ref-photos span { position: relative; }
.ref-photos img { width: 72px; height: 72px; object-fit: cover; }
.ref-photos .step-x { position: absolute; top: -6px; right: -6px; background: var(--bg); border: var(--rule); padding: 0 6px; font-size: 16px; }

/* update 9: task page */
.hold-banner { border-left: 4px solid var(--ox); background: var(--ox-t); color: var(--ink); padding: 12px 14px; margin: 14px 0; }
.hold-banner.big { padding: 16px; }
.hold-banner .hold-title, .hold-banner.small { font: 600 15px/1.35 var(--head); color: var(--ox); margin: 0; }
.ok-line { color: var(--ink-2); margin: 8px 0; }
.sop-box { border: var(--rule); padding: 14px 16px; margin: 20px 0 6px; background: var(--card); }
.sop-box .label { margin-bottom: 8px; }
.sop-box .photos { margin-top: 10px; }
.task-check { list-style: none; padding: 0; margin: 0; }
.task-check li { display: flex; align-items: center; border-bottom: var(--rule); }
.task-check label { flex: 1; display: flex; gap: 12px; align-items: center; padding: 12px 0; min-height: 48px; cursor: pointer; }
.task-check input[type=checkbox] { width: 22px; height: 22px; flex: none; accent-color: var(--ink); }
.task-check li.done .grow { color: var(--ink-2); text-decoration: line-through; }
.req-hint { color: var(--ox); margin: 0; }

/* update 9: project phase board */
.phase-board { list-style: none; padding: 0; margin: 0; }
.phase-board > li { border-bottom: var(--rule); }
.phase-board > li.current { background: var(--sunk); margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); }
.pb-row { display: flex; align-items: center; gap: 6px; }
.pb-head { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center; background: none; border: 0; padding: 12px 0; text-align: left; cursor: pointer; }
.pb-num { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ink-3); font: 600 13px var(--body); }
.current .pb-num { border-color: var(--cedar); background: var(--cedar); color: var(--on-cedar); }
.done .pb-num { border-color: var(--ink-2); color: var(--ink-2); }
.pb-name { display: block; font-weight: 600; }
.pb-now { margin-left: 8px; font: 600 13px var(--body); color: var(--cedar); }
.pb-bar { display: block; height: 4px; background: var(--sunk); margin-top: 6px; }
.pb-bar span { display: block; height: 100%; background: var(--cedar); }
.done .pb-bar span { background: var(--ink-2); }
.pb-count { font: 400 13px var(--head); color: var(--ink-2); flex: none; }
.pb-tools { display: flex; gap: 4px; }
.pb-tasks { padding: 0 0 12px 42px; }
.pb-task { display: flex; gap: 8px; align-items: center; padding: 6px 0; flex-wrap: wrap; }
.pb-task a { text-decoration: none; min-width: 0; flex: 1 1 150px; }
.pb-task-tools { flex: 1 1 100%; display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.pb-task a.done { color: var(--ink-2); text-decoration: line-through; }
.pb-task .step-move { width: auto; flex: 0 1 170px; font-size: 13px; padding: 4px 8px; min-height: 34px; }

/* update 9: material orders */
.ord-search { width: 100%; margin: 4px 0 10px; }
.ord-row { align-items: flex-start; }
.ord-title { display: block; font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ord-meta { display: block; margin-top: 2px; }
.ord-late { color: var(--ox); font-weight: 600; }
.ord-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.ord-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ord-quick { padding: 12px 14px; margin: 0 0 12px; }
.ord-quick-row { display: flex; gap: 8px; margin-top: 8px; }
.ord-quick-row > :first-child { flex: 1; min-width: 0; }
.ord-qty { width: 92px; flex: none; }
.ord-line { position: relative; border: var(--rule); padding: 10px 34px 10px 10px; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.ord-line-top { display: flex; gap: 8px; align-items: center; }
.ord-line-top > input:first-child { flex: 1; min-width: 0; }
.ord-line-top input[type=number] { flex: 1; min-width: 0; }
.ord-line-total { flex: none; }
.ord-x { position: absolute; top: 4px; right: 2px; background: none; border: 0; font-size: 24px; color: var(--ink-2); cursor: pointer; padding: 4px 8px; }
.ord-dates { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 14px 0 0; font-size: 15px; }
.ord-dates dt { color: var(--ink-2); }
.ord-dates dd { margin: 0; overflow-wrap: anywhere; }
.ord-lines { list-style: none; padding: 0; margin: 0; }
.ord-lines li { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: var(--rule); }
.ord-link { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; overflow-wrap: anywhere; }
.ord-totals { margin: 10px 0; }
.ord-totals p { display: flex; justify-content: space-between; margin: 4px 0; }
.ord-totals b { font-variant-numeric: tabular-nums; }
.ord-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.ord-kpis > div { border: var(--rule); padding: 10px 12px; }
.ord-kpis b { display: block; font: 400 18px var(--head); margin-top: 4px; font-variant-numeric: tabular-nums; }
.ord-kpis b.neg { color: var(--ox); }
.ord-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ord-table th { text-align: right; font: 600 13px var(--body); color: var(--ink-2); padding: 6px 0; }
.ord-table td { padding: 8px 0; border-bottom: var(--rule); text-align: right; font-variant-numeric: tabular-nums; }
.ord-table td:first-child { text-align: left; }
.ord-today { margin: 6px 0 10px; }

/* update 9: check-out reminders */
.remind-box { border-left: 4px solid var(--ox); background: var(--sunk); padding: 12px 14px; margin: 18px 0; }
.remind-item { padding: 10px 0; border-top: var(--rule); }
.remind-item:first-of-type { border-top: 0; }
.remind-q { font-weight: 600; margin: 0; }

/* update 9: approvals — drafts read large, edits, diff, trust, playbook */
.draft-view { border: var(--rule); background: var(--card); padding: 14px 16px; margin: 10px 0; }
.draft-view.final { border-color: var(--ink-2); }
.draft-subject { font: 600 18px/1.4 var(--body); margin: 0 0 8px; }
.draft-text { font-size: 18px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.draft-area { font-size: 16px; line-height: 1.55; min-height: 220px; }
.diff ins { background: var(--olive-t); text-decoration: none; }
.diff del, .diff-box del { background: var(--ox-t); color: var(--ox); }
.diff-box ins { background: var(--olive-t); text-decoration: none; }
.diff-box { margin-top: 10px; }
.diff-box summary { cursor: pointer; color: var(--ink-2); }
.pb-pick { border-left: 3px solid var(--cedar); padding: 8px 12px; margin: 8px 0 14px; background: var(--sunk); }
.trust-suggest { border-left: 3px solid var(--ink-2); background: var(--sunk); padding: 12px 14px; margin: 12px 0; }
.pb-topic { margin-top: 22px; }
.pb-topic-name { font: 400 18px var(--head); margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline; }
.pb-topic-name .count { font-size: 13px; color: var(--ink-2); }
.pb-lessons { list-style: none; padding: 0; margin: 0; border-top: var(--rule); }
.pb-lessons li { padding: 10px 0; border-bottom: var(--rule); }
.pb-lesson { margin: 0; font-size: 16px; }

/* update 9: desktop (the office on laptops): side navigation, wider centered column, dialogs instead of bottom sheets */
@media (min-width: 1100px) {
  :root { --side: 228px; }
  .composer-dock { bottom: 0; }
  .toast { bottom: 24px; }
  .cream { margin: 0; }
  .phase-board > li.current { margin: 0; padding: 0 12px; }
  .ord-table { font-size: 15px; }
  .ord-table td, .ord-table th { padding: 10px 8px; }
  .ord-kpis { grid-template-columns: repeat(4, 1fr); }
  .grid3.wide-4 { grid-template-columns: repeat(4, 1fr); }
  .draft-text { font-size: 18px; }
  /* Today: the order blocks (to approve / ready to purchase / arriving / funds) side by side */
  .ord-today { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
  .ord-today > div:only-child { grid-column: 1 / -1; }
  .hold-edit .chips, .sheet .chips { flex-wrap: wrap; }
}

/* update 9: design calls, calendar, quiet hours */
.call-day { margin: 16px 0 0; }
.call-chips, .call-grid, .call-days { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.call-grid .chip { min-width: 92px; min-height: 44px; }
.call-grid .chip.booked { border-style: dashed; opacity: .7; }
.call-quick { margin-top: 14px; padding: 12px 16px; }
.call-row { width: 100%; text-align: left; background: none; border: 0; border-bottom: var(--rule); cursor: pointer; font: inherit; color: inherit; }
.call-time { font: 500 13px var(--head); min-width: 76px; }
.call-time.big { font-size: 18px; padding-top: 2px; }
.call-card { border: var(--rule); padding: 12px 14px; margin: 8px 0; background: var(--card); }
.call-main { background: none; border: 0; text-align: left; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.call-notes { display: block; margin-top: 6px; white-space: pre-wrap; }
.cal-box input[type=text] { width: 100%; font-size: 13px; }
.cal-steps { padding-left: 20px; color: var(--ink-2); }
/* order lines: item takes the room, qty stays narrow (beats the generic full-width inputs) */
.ord-line .ord-line-top > input, .ord-quick-row > input, .ord-quick-row > select { width: auto; flex: 1 1 0; min-width: 0; }
.ord-line .ord-line-top > input.ord-qty, .ord-quick-row > input.ord-qty { flex: 0 0 92px; width: 92px; }
.ord-quick-row > .btn { flex: none; }
.diff del, .diff-box del { margin-right: 3px; padding: 0 1px; }
.diff ins, .diff-box ins { padding: 0 1px; }
.ord-table td + td, .ord-table th + th { padding-left: 12px; }

/* ───── update 10: Quick Ask ───── */
.ask-icon { width: auto; padding: 0 6px; gap: 4px; display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.ask-icon-label { font: 600 13px var(--body); }
.ask-big { justify-content: flex-start; gap: 14px; text-align: left; min-height: 72px; }
.ask-big > span { display: flex; flex-direction: column; }
.ask-about { margin-top: 10px; gap: 8px; }
.ask { display: flex; flex-direction: column; gap: 10px; }
.ask-top { display: flex; align-items: center; gap: 10px; }
.ask-to { min-height: 40px; text-transform: none; font: 500 13px var(--head); }
.ask-to-pick { flex-wrap: wrap; }
.ask-kinds { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.ask-kinds::-webkit-scrollbar { display: none; }
.ask-kinds .chip { min-height: 36px; font-size: 11px; }
.ask-kinds .chip .auto { font-style: normal; opacity: .7; text-transform: none; letter-spacing: 0; }
.ask-text { width: 100%; min-height: 180px; font-size: 18px; line-height: 1.5; padding: 14px; border: 0; background: var(--card); resize: vertical; }
.ask-text:focus { outline: none; border-color: var(--cedar); box-shadow: inset 0 0 0 1px var(--cedar); }
.ask-proj { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; color: var(--cedar); }
.ask-proj button { background: none; border: 0; cursor: pointer; color: var(--ink-2); font-size: 15px; padding: 4px 8px; }
.ask-block { min-height: 44px; font-size: 15px; }
.ask-more summary { cursor: pointer; color: var(--ink-2); font: 600 13px var(--body); padding: 10px 0; }
.ask-send { margin-top: 4px; }
.att-tray { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 4px; }
.att { position: relative; flex: none; width: 104px; border-radius: var(--r-sm); overflow: hidden; background: var(--card); box-shadow: var(--e1); }
.att img { width: 104px; height: 104px; object-fit: cover; }
.att.marked { border: 1.5px solid var(--ox); }
.att-pdf { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 104px; height: 104px; padding: 6px; text-align: center; font-size: 11px; overflow: hidden; word-break: break-word; background: var(--sunk); }
.att-pdf b { font: 500 16px var(--head); color: var(--ox); }
.att-cap { display: block; font-size: 11px; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-acts { display: flex; border-top: 1px solid var(--ink-3); }
.att-acts button { flex: 1; min-height: 36px; background: none; border: 0; font: 600 13px var(--body); cursor: pointer; }
.att-acts button + button { border-left: 1px solid var(--ink-3); flex: 0 0 36px; }
.nudged-line { color: var(--ox); margin: 4px 0 0; }
.inbox-sub { margin: -6px 0 8px; }
.inbox .chips { margin-bottom: 10px; flex-wrap: wrap; }
.ask-settings select { width: 100%; }
.outbox { background: var(--sunk); border-bottom: var(--rule); }
.outbox-row { display: flex; align-items: center; gap: 10px; padding: 8px var(--pad); font-size: 15px; max-width: 720px; margin: 0 auto; }
.outbox-row.failed b { color: var(--ox); }
.outbox-row .btn { flex: none; }

/* ── Approvals detail (update 14, d3): caption + type chip, the title, the amount large, a four-fact strip, the
   conversation, and ONE action bar (a note field with attach / camera / video / mic inside, then the buttons) ── */
.ap-hd .k { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 13px/18px var(--body); color: var(--ink-2); margin: 4px 0 0; }
.ap-title { font: 400 28px/34px var(--head); letter-spacing: -.015em; margin: 8px 0 6px; }
.ap-hd .amt { margin-top: 18px; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 16px; padding: 0; }
.facts > div { padding: 12px 16px; min-width: 0; }
.facts > div:nth-child(even) { box-shadow: inset 1px 0 0 var(--line); }
.facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.facts small { font: 600 12px/16px var(--body); color: var(--ink-2); display: block; }
.facts b { font: 600 15px/20px var(--body); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-ref { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 600 15px/20px var(--body); }
.ap-ref svg { width: 16px; height: 16px; color: var(--ink-2); }
.ap-ref a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.ap-age { font-weight: 600; color: var(--ink); }
.thread { list-style: none; margin: 20px 0 0; padding: 0; }
.tm { display: flex; gap: 12px; padding: 12px 0; }
.tm + .tm { border-top: 1px solid var(--line); }
.tm > .av { margin-top: 2px; }
.tm-bx { flex: 1; min-width: 0; }
.tm-head { margin: 0; font: 600 15px/20px var(--body); display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
.tm-time { font: 400 13px/18px var(--body); color: var(--ink-2); }
.tm-kind { font: 600 12px/16px var(--body); color: var(--cedar); background: var(--cedar-t); border-radius: 999px; padding: 2px 8px; }
.tm-kind.k-sent_back, .tm-kind.k-nudge { color: var(--ox); background: var(--ox-t); }
.tm-kind.k-approved, .tm-kind.k-done { color: var(--olive); background: var(--olive-t); }
.tm-what, .tm-body { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 15px/23px var(--body); }
.tm .draft-view { margin-top: 6px; }
.tm-photos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.tm-photos figure { margin: 0; width: 132px; }
.tm-photos figure.marked img { box-shadow: 0 0 0 1.5px var(--ox); }
.tm-photos img { width: 132px; height: 132px; object-fit: cover; cursor: zoom-in; background: var(--sunk); border-radius: var(--r-sm); }
.tm-photos figcaption { font: 400 13px/18px var(--body); color: var(--ink-2); margin-top: 3px; }
.tm-file { display: grid; grid-template-columns: 40px 1fr; gap: 8px 12px; align-items: center; margin-top: 10px; padding: 10px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1); max-width: 360px; }
.tm-file-name { min-width: 0; overflow-wrap: anywhere; font: 600 15px/20px var(--body); }
.tm-file-acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.tm-file-acts .btn { width: 100%; min-height: 36px; font-size: 14px; border-radius: var(--r-sm); }
.tm-file .att-pdf { width: 40px; height: 40px; padding: 0; border-radius: var(--r-sm); background: var(--cedar-t); color: var(--cedar); }
.tm-file .att-pdf b { font: 600 11px/14px var(--body); color: var(--cedar); }
.pdf-pick { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px calc(8px + var(--safe-b)); background: var(--card); box-shadow: 0 -1px 0 var(--line); }
.pdf-pick .chips { overflow-x: auto; flex-wrap: nowrap; }
.pdf-pick .chip { min-width: 44px; min-height: 40px; justify-content: center; }
.photo-full-mk { position: fixed; bottom: calc(20px + var(--safe-b)); left: 50%; transform: translateX(-50%); width: auto; z-index: 71; }
.th-asker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.nudge .btn { gap: 8px; }
.actbar { margin: 20px calc(-1 * var(--pad)) 0; padding: 14px var(--pad) 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 -1px 0 var(--line); display: flex; flex-direction: column; gap: 10px; }
.actbar .note { display: flex; align-items: flex-end; gap: 2px; border-radius: var(--r-md); background: var(--card); box-shadow: var(--e1); padding: 0 6px 0 0; }
.actbar .note:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
.actbar .note textarea { flex: 1; min-height: 44px; max-height: 160px; padding: 11px 4px 11px 14px; background: transparent; resize: none; }
.actbar .note textarea:focus { box-shadow: none; }
.att-btns.icons { display: flex; gap: 0; padding: 4px 0; flex: none; }
.att-btns.icons .iconbtn, .att-btns.icons .mic-btn { width: 36px; height: 36px; color: var(--ink-2); background: none; border-radius: 50%; }
.att-btns.icons svg { width: 18px; height: 18px; }
.att-btns.icons .rec-bar { position: fixed; left: 8px; right: 8px; bottom: calc(var(--nav-h) + 8px); top: auto; padding: 8px 12px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); z-index: 60; }
.actbar .acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actbar .acts .hint { margin-left: auto; font: 400 12px/16px var(--body); color: var(--ink-2); }
.btn.icon-only { padding: 0; width: 36px; justify-content: center; }
.menu-pop.up { top: auto; bottom: 44px; }

/* ───── update 10: markup editor ───── */
.mk { position: fixed; inset: 0; z-index: 80; background: var(--mk-bg); display: flex; flex-direction: column; user-select: none; -webkit-user-select: none; }
.mk-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 12px; padding-top: max(6px, env(safe-area-inset-top)); background: var(--bg); border-bottom: var(--rule); }
.mk-title { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-stage { flex: 1; position: relative; overflow: hidden; touch-action: none; overscroll-behavior: none; cursor: crosshair; }
.mk-stage[data-tool=text] { cursor: text; }
.mk-wrap { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.mk-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mk-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-cedar); margin: 0; }
.mk-tools { flex: none; background: var(--bg); border-top: var(--rule); padding: 6px 10px calc(8px + var(--safe-b)); }
.mk-row { display: flex; align-items: center; gap: 4px; overflow-x: auto; }
.mk-row + .mk-row { margin-top: 4px; }
.mk-tool { flex: none; min-width: 52px; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: 1px solid transparent;
  font: 600 13px var(--body); cursor: pointer; color: var(--ink); padding: 2px 6px; }
.mk-tool.on { border-color: var(--ink); background: var(--sunk); }
.mk-tool:disabled { color: var(--ink-3); cursor: default; }
.mk-color { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid transparent; cursor: pointer; }
.mk-color i { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px var(--ink-3); }
.mk-color.on { border-color: var(--ink); }
.mk-caption { width: 100%; margin-top: 6px; font-size: 15px; padding: 8px 10px; border: var(--rule); background: var(--card); }
.mk-textbox { position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; display: flex; gap: 8px; padding: 12px; padding-bottom: calc(12px + var(--safe-b)); background: var(--bg); border-top: 1px solid var(--ink); }
.mk-textbox input { flex: 1; min-width: 0; font-size: 16px; padding: 10px; }
.ask-pdf { z-index: 75; }
.sheet .att-tray { margin: 8px 0; }

/* ───── update 10: team activity ───── */
.act-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: var(--rule); }
.act-flags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 48%; }
.act-now { color: var(--ink-2); font-weight: 700; }
.act-stale { color: var(--ox); }
.not-opened { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: var(--rule); padding: 10px 0; font: inherit; font-size: 15px; color: var(--cedar); cursor: pointer; margin: 6px 0 4px; }
/* update 10: project type */
.ptype { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 2px; }
.ptype .badge { padding: 2px 6px; font-size: 11px; }
.pt-filter { margin-top: 14px; }
.pt-filter .chips { flex-wrap: wrap; }
.tpl-suggest { display: flex; align-items: center; gap: 12px; border-left: 3px solid var(--ink-2); background: var(--sunk); padding: 10px 12px; margin: 0 0 14px; }
.tpl-suggest p { flex: 1; }

@media (min-width: 900px) {
  .mk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 6px 18px 10px; }
  .mk-row + .mk-row { margin-top: 0; }
  .mk-row .grow { flex: 0 0 12px; }
  .mk-caption { flex: 1 1 260px; margin-top: 0; }
}

/* Badges: one quiet language (QA round). Counts are a thin ring, never a filled red square. */
.qty-unknown { color: var(--ox); font-weight: 600; }
.note-box.ord-flag { border-left: 2.5px solid var(--ox); }
.fw-after { margin-top: 8px; }
.boot-offline .btn { margin-top: 18px; }
/* field fix: one tap to site measurements */
.onsite-bar a { color: inherit; text-decoration: none; }
.onsite-bar .onsite-measure { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.measure-btn { display: inline-flex; margin: 10px 0 14px; }
.home-projects { margin-top: 18px; }
.ask-measure-note { margin: 6px 0 10px; }
/* owner request: Edit at the top of a task, and a ⋯ menu on task cards for managers */
.backbar-right { margin-left: auto; flex: none; }
.edit-btn { display: inline-flex; align-items: center; gap: 6px; }
.task-edit-top { margin-top: 10px; }
.card.has-menu { position: relative; }
.card.has-menu > a.cover > .top { padding-right: 44px; }
.tc-menu { position: absolute; top: 8px; right: 8px; z-index: 3; }
.tc-more { width: 36px; height: 32px; border: 1px solid var(--ink-3); background: var(--bg); font: 500 18px/1 var(--head); color: var(--ink); cursor: pointer; }
.tc-pop { position: absolute; right: 0; top: 36px; background: var(--bg); border: var(--rule); min-width: 170px; display: flex; flex-direction: column; }
.tc-pop a { display: flex; align-items: center; gap: 8px; padding: 12px 14px; text-decoration: none; border-bottom: var(--rule); font-size: 15px; }
.tc-pop a:last-child { border-bottom: 0; }
.onsite-bar.has-measure { flex-wrap: wrap; row-gap: 6px; }
.onsite-bar.has-measure .onsite-where { flex: 1 1 calc(100% - 30px); }
.onsite-bar.has-measure .onsite-measure { margin-left: 26px; }
.onsite-bar.has-measure .onsite-cta:last-child { margin-left: auto; }

/* ───── Voice notes + video clips (update 11; update 14 look) ───── */
.att-btns { position: relative; }
.att-mic { width: auto; min-width: 44px; height: auto; min-height: 40px; padding: 0 12px; }
.note-media { margin: 10px 0 4px; }
.rec-bar { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 0 60px 0 0; background: var(--card); border-radius: 20px; }
.composer .rec-bar { inset: 4px 48px 4px 0; padding: 0 8px; }
.rec-cancel { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--sunk); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; font: 600 15px/1 var(--body); }
.rec-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ox); animation: rec-blink 1.2s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: .25; } }
.rec-time { flex: none; font: 400 15px/1 var(--head); font-variant-numeric: tabular-nums; min-width: 38px; }
.rec-wave { flex: 1; height: 26px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.rec-wave i { flex: 0 0 3px; background: var(--ink-2); min-height: 2px; border-radius: 999px; }
.rec-hint { display: none; }
@media (min-width: 420px) { .rec-hint { display: inline; } }
.voice { margin: 2px 0; width: 240px; max-width: 100%; }
.voice-row { display: flex; align-items: center; gap: 10px; }
.voice-play { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--cedar); color: var(--on-cedar); cursor: pointer; padding: 0; }
.g.me .voice-play { background: var(--on-cedar); color: var(--cedar); }
.voice-line { flex: 1; height: 18px; position: relative; cursor: pointer; }
.voice-line::before, .voice-line i { content: ''; position: absolute; left: 0; top: 8px; height: 2px; border-radius: 999px; }
.voice-line::before { right: 0; background: var(--line-strong); }
.voice-line i { background: currentColor; }
.voice-time { flex: none; font: 400 13px/1 var(--body); opacity: .8; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.voice-speed { flex: none; border: 0; border-radius: 999px; background: rgba(128,128,128,.14); font: 600 12px/1 var(--body); padding: 6px 8px; color: inherit; cursor: pointer; min-width: 36px; }
.voice-err { margin: 4px 0 0; }
.transcript { margin: 6px 0 0; text-align: left; }
.transcript-text { margin: 0; font: 400 13px/18px var(--body); white-space: pre-wrap; box-shadow: inset 2px 0 0 var(--line-strong); padding-left: 10px; }
.transcript.pending { font: 400 13px/18px var(--body); opacity: .8; }
.transcript-flip { background: none; border: 0; padding: 4px 0 0 11px; font: 400 13px/18px var(--body); color: inherit; opacity: .8; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.transcript-auto { font: 400 12px/16px var(--body); opacity: .7; margin-left: 8px; }
.vclip { position: relative; display: block; width: 220px; max-width: 100%; aspect-ratio: 4 / 3; margin: 0; padding: 0; border: 0; background: var(--sunk); cursor: pointer; overflow: hidden; border-radius: 14px; }
.vclip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vclip-blank { position: absolute; inset: 0; background: var(--sunk); }
.vclip-play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: grid; place-items: center; background: rgba(32,35,32,.72); color: #F2F1ED; border-radius: 50%; }
.vclip-dur { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; background: rgba(32,35,32,.72); color: #F2F1ED; font: 600 12px/16px var(--body); border-radius: var(--r-xs); }
.vclip.on { aspect-ratio: auto; width: 100%; max-width: 420px; background: var(--mk-bg); cursor: default; }
.vclip.on video { display: block; width: 100%; max-height: 70vh; }
.pending-media { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 44px 8px 10px; margin: 8px 0; border: 0; border-radius: var(--r-md); background: var(--sunk); }
.pending-media .voice { margin: 0; flex: 1; max-width: none; }
.pending-video { position: relative; width: 96px; height: 72px; background: var(--sunk); overflow: hidden; border-radius: var(--r-sm); }
.pending-video img { width: 100%; height: 100%; object-fit: cover; }
.pending-x { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; color: var(--ink-2); cursor: pointer; }
.composer-clip { padding-top: 8px; }
.att-btns:not(.icons) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.att-btns.has-media:not(.icons) { grid-template-columns: repeat(4, 1fr); }
.att-btns:not(.icons) .btn { gap: 6px; min-height: 44px; width: 100%; padding: 0 8px; }
.att-btns:not(.icons) .att-mic { width: 100%; height: auto; display: inline-flex; gap: 8px; }
.att-btns .rec-bar { padding-right: calc(25% + 6px); }
.note-media.att-btns { grid-template-columns: 1fr 1fr; }
.note-media .rec-bar { padding-right: calc(50% + 6px); }
.video-btn span { white-space: nowrap; }

/* ───── Update 11: partly done, reopened ───── */
.pct-ring { display: inline-block; min-width: 38px; padding: 3px 5px; margin: 0 6px; border: 0; border-radius: var(--r-sm); font: 600 13px/1.2 var(--body); text-align: center; vertical-align: 1px; }
.partly-row .pct-ring { margin: 0; flex: none; }
.pbar { display: block; height: 3px; background: var(--sunk); margin: 10px 0 8px; }
.pbar i { display: block; height: 100%; background: var(--cedar); }
.partly-line { margin: 4px 0 0; }
.partly-meta { color: var(--ink-2); }
.partly-btn { margin-top: 0; }
.note-kind { color: var(--ink); }

/* ───── Update 11: My tasks (office) ───── */
.mt-card { margin: 18px 0 6px; padding: 14px 16px 12px; border: 1px solid var(--ink-3); background: var(--bg); }
.mt-card .list-row { min-height: 48px; padding: 10px 0; }
.mt-card .list-row:last-of-type { border-bottom: 0; }
.mt-row { align-items: flex-start; }
.mt-state { flex: none; width: 22px; height: 22px; margin-top: 2px; border: 1px solid var(--ink-2); border-radius: 50%; background: none; padding: 0; cursor: pointer; position: relative; }
.mt-state.in_progress { border-color: var(--ink); background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.mt-state.completed { border-color: var(--ink-2); background: var(--ink-2); }
.mt-state.completed::after { content: ''; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--on-cedar); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.mt-row.completed .mt-title { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.mt-add { display: flex; gap: 8px; margin-top: 10px; }
.mt-add input { flex: 1; min-height: 44px; }
.mt-add .btn { min-height: 44px; }

/* ───── Update 11: Orders entry points ───── */
.order-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
.order-btns .btn { gap: 8px; min-height: 44px; }

/* ───── Update 11: Google Calendar ───── */
.gc-box { padding: 14px 16px; border: 1px solid var(--ink-3); background: var(--bg); }
.gc-box .btn { margin-top: 6px; }
.gc-ok { color: var(--ink-2); }
.gc-note { margin: 8px 0; }
.chip.busy { border-style: dashed; color: var(--ink-3); background: none; text-decoration: line-through; text-decoration-color: var(--ink-3); }
.is-hidden { display: none !important; }
/* ── AI assistant connections (Me → Connections, Team → All connections) ── */
.conn-row { align-items: flex-start; }
.conn-row .tile svg { width: 17px; height: 17px; }
.conn-row.off { opacity: .75; }
.conn-row > .grow { flex: 1; min-width: 0; }
.conn-name { margin: 0; overflow-wrap: anywhere; font: 600 15px/1.25 var(--body); }
.conn-meta { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 0 10px; line-height: 1.5; font-size: 13px; color: var(--ink-2); }
.conn-help { margin-top: 14px; }
.conn-copy { display: flex; gap: 8px; align-items: center; }
.conn-copy input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; min-height: 44px; }
.conn-code { margin: 0; padding: 10px 12px; background: var(--sunk); border-radius: var(--r-sm); font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; color: var(--ink); }
.conn-warn { border-radius: var(--r-md); padding: 10px 14px; background: var(--ox-t); color: var(--ox); margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.conn-recent { list-style: none; padding: 6px 16px; margin: 0; font-size: 15px; }
.conn-recent li { padding: 8px 0; }
.conn-recent li + li { border-top: 1px solid var(--line); }
.conn-recent li.bad { color: var(--ox); }
.conn-recent code { font-size: 13px; background: var(--sunk); border-radius: var(--r-xs); padding: 1px 5px; }
.via { color: var(--ink-2); font-weight: 400; font-size: .92em; }

/* ───────────── Older feature styles on the update-14 system: cards with one crisp edge, no left bars, no washes ───────────── */
.push-card, .ann-box, .mt-card, .my-log, .sop-box { margin: 12px 0; }
.tpl-suggest { display: flex; }
.note-box, .pb-pick, .push-help { box-shadow: none; background: var(--sunk); border-radius: var(--r-md); padding: 10px 14px; }
.draft-view { box-shadow: inset 0 0 0 1px var(--line); }
.hold-banner { background: var(--ox-t); box-shadow: none; }
.hold-banner .hold-title, .hold-banner.small { font: 600 15px/20px var(--body); color: var(--ox); }
.status-box .label, .alert .label { font: 600 13px/18px var(--body); }
.status-box.ok .label { color: var(--olive); }
.my-log-status { font: 600 15px/20px var(--body); margin: 6px 0 14px; }
.visit-card.on { background: var(--olive-t); box-shadow: none; }
.visit-where { font: 600 15px/20px var(--body); margin: 6px 0 14px; }
.onsite-bar { background: var(--olive-t); color: var(--olive); font: 600 13px/18px var(--body); max-width: 720px; margin: 0 auto; border-radius: 0 0 var(--r-md) var(--r-md); }
.onsite-bar .onsite-cta { font: 600 13px/18px var(--body); }
.push-status { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font: 600 15px/20px var(--body); }
.push-status .sq { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--ink-3); }
.push-status.on .sq { background: var(--olive); }
.push-status.blocked { color: var(--ox); }
.push-status.blocked .sq, .push-status.install .sq { background: var(--ox); }
.rec-cancel, .composer-photo, .tc-more, .iconbtn.sm, .tpl-step-tools .iconbtn, .att-acts button, .mk-tool, .mk-color, .pdfv-zoom { border-radius: var(--r-sm); }
.pmap-num, .pb-num { border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.pdfv-zoom { overflow: hidden; border: 0; box-shadow: var(--e2); background: var(--card); }
.ref-photos img, .att img { border-radius: var(--r-sm); }
.att-pdf { border-radius: var(--r-sm); }
.tc-more { border: 0; background: transparent; width: 44px; height: 44px; }
.tc-pop { border: 0; border-radius: var(--r-md); box-shadow: var(--e2); background: var(--card); overflow: hidden; }
.pct-ring { border: 0; background: var(--olive-t); color: var(--olive); border-radius: 999px; }
.pbar { display: block; height: 4px; margin: 10px 0 8px; border-radius: 999px; overflow: hidden; background: var(--track); }
.pbar i { display: block; height: 100%; background: var(--cedar); border-radius: 999px; }
.mt-state { border-color: var(--line-strong); }
.mt-state.completed { background: var(--olive); border-color: var(--olive); }
.mt-state.in_progress { border-color: var(--ink); }
.chip.busy { box-shadow: none; text-decoration: line-through; color: var(--ink-2); background: transparent; }
.ask-text { border: 0; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1); font: 400 16px/24px var(--body); }
.ask-text:focus { box-shadow: inset 0 0 0 1.5px var(--ink); }
.dep-pick { border: 0; border-radius: var(--r-md); background: var(--sunk); }
.ord-line { border: 0; border-radius: var(--r-md); background: var(--card); box-shadow: var(--e1); }
.ord-kpis > div { border: 0; border-radius: var(--r-md); background: var(--card); box-shadow: var(--e1); }
.step-card { border: 0; border-radius: var(--r-md); background: var(--card); box-shadow: var(--e1); overflow: hidden; }
.step-card.held .step-title { color: var(--ox); }
.step-tools { border-left: 1px solid var(--line); }
.chip-tag { border: 0; border-radius: 999px; background: var(--sunk); color: var(--ink-2); font: 600 12px/1 var(--body); padding: 5px 8px; }
.chip-tag.hold, .req-tag { background: var(--ox-t); color: var(--ox); border: 0; border-radius: 999px; }
.chip-tag.office { background: var(--cedar-t); color: var(--cedar); }
.ow-row { border-radius: var(--r-sm); background: var(--card); border-left: 0 !important; box-shadow: var(--e1); }
.ow-row.st-completed { color: var(--ink-2); }
.ow-row.st-blocked .grow, .ow-row.st-needs_review .grow { color: var(--ox); }
.ow-step { border-left-color: var(--line-strong); }
.ow-step::before { border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--card); }
.ow-step.done::before { background: var(--olive); box-shadow: none; }
.phase-board > li.current { background: var(--sunk); border-radius: var(--r-md); margin: 0; padding: 0 12px; }
.pb-bar { display: block; height: 4px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: var(--track); }
.pb-bar span { display: block; height: 100%; background: var(--cedar); border-radius: 999px; }
.done .pb-bar span { background: var(--olive-ring); }
.pb-now { color: var(--cedar); font-weight: 700; }
.current .pb-num { background: var(--cedar); color: var(--on-cedar); box-shadow: none; }
.done .pb-num { box-shadow: inset 0 0 0 1.5px var(--olive); color: var(--olive); }
.ord-table th { font: 600 12px/16px var(--body); }
.ord-today { margin: 6px 0 10px; }
.pdfv-bar, .mk-bar, .mk-tools, .mk-textbox { border: 0; box-shadow: 0 1px 0 var(--line); }
.mk-tool.on { border-color: transparent; background: var(--sunk); }
.wo-unbilled { font: 600 15px/20px var(--body); }
.history li, .dep-list li, .tpl-steps li, .pb-lessons li, .ord-lines li, .task-check li, .act-row, .remind-item, .call-row { border-color: var(--line); }
.task-check input[type=checkbox] { accent-color: var(--olive); }
.pdfv { background: var(--sunk); }
.sigpad canvas { border: 0; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line-strong); }
.outbox { background: var(--sunk); border-bottom: 0; }

/* task rows (TaskCard) */
.trow { padding: 0 8px 0 16px; gap: 10px; }
.trow-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-height: 64px; }
.trow .t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.trow .t .a { font: 600 15px/20px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .t .b { font: 400 13px/18px var(--body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.tc-menu { position: relative; flex: none; }
.tc-more { display: grid; place-items: center; color: var(--ink-2); }
.tc-more svg { width: 20px; height: 20px; }
.tc-pop { right: 0; top: 44px; z-index: 5; min-width: 180px; }
.tc-pop a { display: flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 48px; text-decoration: none; font: 400 15px/22px var(--body); }
.tc-pop a + a { border-top: 1px solid var(--line); }
html:has(body.night) { background: var(--bg); color-scheme: dark; }
.row > .btn, .row.wrap > .btn { width: auto; flex: 1 1 auto; }
.row > .btn.small, .row > .btn.sm { flex: none; }
.log-card + .log-card, .log-card + .card, .card + .log-card { margin-top: 10px; }
button.list-row { border: 0; background: var(--card); width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }

/* the site day's loading checklist */
.load .check { min-height: 48px; }
.load .meta.ok { color: var(--olive); font-weight: 600; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 24px; position: relative; }
.load a.chip { position: relative; }
.load a.chip::after, .linkbtn::after { content: ''; position: absolute; inset: -12px -4px; }

/* answered asks live under History (closed by default) */
.ap-history { margin-top: 22px; }
.ap-history > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; padding: 0 2px; }
.ap-history > summary::-webkit-details-marker { display: none; }
.ap-history > summary .h2 { flex: 1; }
.ap-history > summary .count { font: 600 13px/18px var(--body); color: var(--ink-2); }
.ap-history > summary svg { width: 18px; height: 18px; color: var(--ink-3); transition: transform .2s; }
.ap-history[open] > summary svg { transform: rotate(90deg); }
.cl-head { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.cl-head .t-title { flex: 1; font-size: 24px; line-height: 30px; margin: 0; }
.cl-label { font: 600 12px/16px var(--body); color: var(--ink-2); margin: 16px 12px 6px; }

/* ══ Phones and narrow windows (< 1024 px): the bottom bar; one column. Desktop (≥ 1024 px, update 14, d1–d3): a 240px
   sidebar (logo, "New", nav, Office, who's signed in), a 64px top bar with Search and the bell, content padding 40,
   the same type sizes as the phone (desktop never shrinks text). ══ */
.side-brand, .side-me, .side-sep, .tab.side-only, .plus-label, .plus .kbd, .desk-only, .tn-count { display: none; }
.dash { display: flex; flex-direction: column; }
.dash-main, .dash-side, .dash-hero { display: contents; }
.hero-text { order: 0; }
.o1 { order: 1; } .o2 { order: 2; } .o3 { order: 3; } .o4 { order: 4; } .o5 { order: 5; } .o6 { order: 6; } .o7 { order: 7; } .o8 { order: 8; }
.o9 { order: 9; } .o10 { order: 10; } .o11 { order: 11; } .o12 { order: 12; } .o13 { order: 13; }
.proj-grid { display: flex; flex-direction: column; }
.pg-main, .pg-side { display: contents; }
.split-list { display: none; }
.tbar { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
@media (min-width: 1024px) {
  :root { --side: 240px; --gut: 40px; --nav-h: 0px; }
  .phone-only { display: none !important; }
  .desk-only { display: revert; }
  span.desk-only, kbd.desk-only, .btn.desk-only { display: inline-flex; }
  .tabbar > * { flex: none; }
  .tabbar .tab { align-self: stretch; width: auto; }
  /* the top bar is on every desktop screen; a detail's Back bar sticks under it */
  body.has-tabs .backbar { top: 64px; }
  .push-card { display: none; } /* phone-only prompts never show on a desktop */
  /* sidebar */
  .tabbar { top: 0; bottom: 0; right: auto; width: var(--side); height: auto; padding: 20px 14px 14px; display: flex; flex-direction: column; gap: 2px; background: var(--bg);
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 1px 0 0 var(--line); transform: none; }
  .side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; text-decoration: none; color: var(--ink); order: -3; border-radius: var(--r-sm); }
  .side-brand img { width: 30px; height: 30px; border-radius: 50%; }
  .side-brand b { display: block; font: 500 15px/18px var(--head); letter-spacing: .01em; }
  .side-brand small { display: block; font: 400 12px/16px var(--body); color: var(--ink-2); }
  .tabbar .plus { order: -2; width: 100%; height: 38px; margin: 0 0 14px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 12px;
    font: 600 14px/1 var(--body); }
  .tabbar .plus svg { width: 18px; height: 18px; }
  .plus-label { display: inline; }
  .plus .kbd { display: inline; margin-left: auto; color: inherit; }
  .plus[aria-expanded="true"] .plus-label { display: inline; }
  .tab { flex-direction: row; align-items: center; gap: 10px; height: 36px; min-height: 36px; padding: 0 10px; font: 600 14px/1 var(--body); letter-spacing: 0; border-radius: var(--r-sm); color: var(--ink-2); }
  .tab svg { width: 18px; height: 18px; stroke-width: 1.75; }
  .tab.on { background: var(--card); color: var(--ink); box-shadow: var(--e1); }
  .tab.on svg { stroke-width: 1.75; }
  .tab .tl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .tab .tick { position: static; width: 6px; height: 6px; box-shadow: none; margin-left: auto; }
  .tab .tick.has-n { display: none; }
  .tn-count { display: inline; margin-left: auto; font: 600 12px/1 var(--body); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .tab.side-only { display: flex; }
  .side-sep { display: block; font: 600 12px/16px var(--body); color: var(--ink-2); padding: 18px 10px 6px; }
  .side-me { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 8px 4px; box-shadow: 0 -1px 0 var(--line); text-decoration: none; color: var(--ink); }
  .side-me .av { width: 32px; height: 32px; }
  .side-me b { display: block; font: 600 14px/18px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-me small { display: block; font: 400 12px/16px var(--body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-me > svg { width: 18px; height: 18px; color: var(--ink-2); flex: none; }
  /* the top bar: Search (⌘K) · the bell */
  body.has-tabs .topbar { margin: 0 0 0 var(--side); max-width: none; height: 64px; padding: 0 40px; box-shadow: 0 1px 0 var(--line); gap: 12px; background: color-mix(in srgb, var(--bg) 94%, transparent); }
  body.has-tabs .topbar .logo, body.has-tabs .topbar > .av, body.has-tabs .topbar .date { display: none; }
  .topbar .bellp { margin-left: auto; }
  .top-search { display: flex; align-items: center; gap: 8px; flex: 0 0 320px; height: 36px; border-radius: var(--r-sm); background: var(--card); box-shadow: var(--e1); padding: 0 6px 0 12px; position: relative; color: var(--ink-2); }
  .top-search > svg { width: 18px; height: 18px; flex: none; }
  .top-search input { flex: 1; min-height: 0; height: 34px; padding: 0; background: transparent; font: 400 14px/1 var(--body); box-shadow: none !important; }
  .top-search .kbd-key { font: 600 11px/1 var(--body); color: var(--ink-2); background: var(--sunk); border-radius: 5px; padding: 4px 6px; }
  .search-pop { position: absolute; top: 42px; left: 0; right: -80px; z-index: 40; background: var(--card); border-radius: var(--r-md); box-shadow: var(--e2); padding: 4px 8px; }
  .search-pop .al { min-height: 44px; font-size: 14px; }
  .search-pop .al.on { background: var(--sunk); border-radius: var(--r-sm); }
  .search-pop .al + .al::before { display: none; }
  /* the content */
  body.has-tabs main.page { margin: 0 0 0 calc(var(--side) + max(var(--gut), (100vw - var(--side) - 760px) / 2)); max-width: 760px; padding: 28px 0 64px; }
  body.has-tabs main.page.wide { margin-left: var(--side); max-width: 1280px; padding: 28px 40px 64px; }
  body.has-tabs .onsite-bar, body.has-tabs .outbox { margin-left: var(--side); max-width: none; }
  body.has-tabs .backbar { margin: -28px 0 8px; padding: 0; min-height: 52px; }
  body.has-tabs main.page.wide .backbar { margin-left: -40px; margin-right: -40px; padding: 0 40px; }
  /* update 16 (Chavie: "Pipeline settings" cut off under "‹ Pipeline" at 1440): the title always clears the Back row, and at
     the very top the row has no backdrop, so nothing can sit over the title's letters; it gets one once the page scrolls */
  body.has-tabs .backbar + .pagehead { padding-top: 8px; }
  body.has-tabs .backbar:not(.lifted) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sheet.add { bottom: auto; top: 76px; left: calc(var(--side) - 220px); right: auto; width: 440px; margin: 0; z-index: 60; max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); }
  .pick { bottom: 24px; left: calc(var(--side) + 40px); right: auto; width: 520px; margin: 0; }
  .sheet { top: 8vh; bottom: auto; max-height: 84vh; border-radius: var(--r-xl); max-width: 640px; }
  .toast { bottom: 24px; }
  .composer-dock { bottom: 0; }
  main.page .btn:not(.sm):not(.small):not(.send) { width: auto; display: inline-flex; padding: 0 22px; }
  main.page .btns { justify-content: flex-start; flex-wrap: wrap; }
  main.page .btns > .btn { flex: 0 0 auto; }
  main.page .row > .btn, main.page .row.wrap > .btn { flex: 0 0 auto; }
  .now .acts .btn, .sch-foot .btn, .alert .actions .btn, .stats .btn { width: 100%; }
  .sch-foot { max-width: 520px; }
  .card > .btn { margin-top: 12px; }
  /* Home (d1): hero row (date · greeting | 3 KPI tiles), then 7fr / 5fr */
  .dash { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 24px; align-items: start; max-width: 1200px; }
  .dash > * { order: 0; }
  .dash-hero { order: -1; display: flex; grid-column: 1 / -1; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .dash-hero .hello { font-size: 34px; line-height: 40px; margin: 4px 0 0; }
  .hero-date { font-weight: 600; margin: 0; }
  .dash-main, .dash-side { display: block; min-width: 0; }
  .dash-main .sec, .dash-side .sec { margin-top: 26px; }
  .hero.kpis { display: flex; gap: 12px; margin: 0; }
  .kpi { background: var(--card); box-shadow: var(--e1); border-radius: var(--r-lg); padding: 12px 18px 12px 12px; }
  .kpi .ring { display: grid; grid-template-columns: 56px auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; }
  .kpi .ring .g { grid-row: 1 / 3; }
  .kpi .ring .l { margin: 0; align-self: end; font: 600 14px/18px var(--body); }
  .kpi .ring .s { align-self: start; font: 400 13px/18px var(--body); }
  .kpi .ring .v small { margin-top: 4px; }
  .rw .end .btn { font-size: 14px; }
  .pc { width: 120px; }
  .pc .lab { justify-content: space-between; font: 600 12px/16px var(--body); }
  .pc .lab .ph { display: inline; }
  .card.flush .rw { min-height: 64px; }
  /* two panes: Chat and Approvals (list · the open one) */
  .split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0 28px; align-items: start; }
  .split-list { display: block; position: sticky; top: 88px; max-height: calc(100dvh - 112px); overflow-y: auto; padding: 2px 2px 12px; }
  .split-main { min-width: 0; }
  .split main.page { margin: 0 !important; max-width: none !important; padding: 0 !important; animation: none; }
  .split .split-main .backbar { display: none; }
  .split-empty { margin-top: 80px; text-align: center; color: var(--ink-2); }
  .chat-split .split-list .cr { border-radius: var(--r-md); min-height: 60px; padding: 0 12px; }
  .chat-split .split-list .cr.on { background: var(--card); box-shadow: var(--e1); }
  .chat-split .split-main > main.page { min-height: calc(100dvh - 156px); display: flex; flex-direction: column; }
  .chat-split .split-main .chat-list { flex: 1; }
  .chat-split .th-bar { top: 64px; margin: -28px 0 0; padding: 0; }
  .chat-split .th-bar .back { display: none; }
  .chat-split .composer-dock { margin: 10px 0 0; padding: 0 4px; }
  /* Approvals (d3): a 380px list pane, the detail with a sticky action bar */
  main.page.wide:has(> .ap-split) { padding: 0 0 0; max-width: none; }
  .ap-split { grid-template-columns: 380px minmax(0, 1fr); gap: 0; min-height: calc(100dvh - 64px); align-items: stretch; }
  .ap-split .split-list { position: sticky; top: 64px; max-height: calc(100dvh - 64px); padding: 24px 16px 24px 24px; box-shadow: 1px 0 0 var(--line); }
  .ap-split .ai { border-radius: var(--r-md); min-height: 56px; padding: 0 12px; }
  .ap-split .ai.on { background: var(--card); box-shadow: var(--e1); }
  .ap-split .ai + .ai::before { display: none; }
  .ap-split .split-main { display: flex; flex-direction: column; }
  .ap-split .split-main > main.page { padding: 28px 48px 0 !important; max-width: 868px !important; flex: 1; display: flex; flex-direction: column; }
  .ap-split .split-main > main.page > .ap-detail { flex: 1; }
  .ap-split .split-empty { margin: 120px 48px; }
  .ap-title { font-size: 30px; line-height: 36px; }
  .ap-hd .amt { font-size: 44px; line-height: 48px; }
  .facts { grid-template-columns: repeat(4, 1fr); }
  .facts > div + div { box-shadow: inset 1px 0 0 var(--line); }
  .facts > div:nth-child(n+3) { border-top: 0; }
  .actbar { position: sticky; bottom: 0; margin: 24px -48px 0; padding: 16px 48px 20px; z-index: 5; }
  main.page:not(.wide) .actbar, .split-main main.page .actbar { margin-left: -48px; margin-right: -48px; }
  body.has-tabs main.page:not(.wide) > .actbar { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .actbar .note, .actbar .acts { max-width: 772px; }
  /* project (d2): breadcrumb + Jost 32 title with the actions in the same row, the phase card, then 1fr | 340px */
  .ph-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .ph-head .t { font-size: 32px; line-height: 38px; }
  .ph-head .acts { display: flex; gap: 8px; flex: none; }
  .stage { margin-top: 20px; padding: 16px 20px 18px; }
  .stage .row1 { display: none; }
  .phases { gap: 6px; margin-top: 0; }
  .phases .p { font: 600 12px/16px var(--body); }
  .phases .p i { margin-bottom: 8px; }
  .phases .p small { display: block; }
  .proj-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 24px; align-items: start; margin-top: 4px; }
  .pg-main, .pg-side { display: block; min-width: 0; }
  .pg-side .sec:first-child { margin-top: 22px; }
  .task-tbl .rw { min-height: 56px; }
  .task-tbl .rw .t { padding: 8px 0; }
  .task-tbl .rw .t .b { display: none; }
  .task-tbl .tag { display: block; width: 70px; font: 600 12px/16px var(--body); color: var(--ink-2); flex: none; }
  .task-tbl .when2 { display: block; width: 80px; text-align: right; font: 600 13px/18px var(--body); color: var(--ink-2); flex: none; font-variant-numeric: tabular-nums; }
  .crew-card { display: flex; align-items: center; gap: 10px; }
  .pgrid { max-width: 920px; }
  /* schedule: room for whole place names */
  .wh, .wr, .wband { grid-template-columns: 140px repeat(var(--days, 6), minmax(90px, 1fr)); }
  .week-mini .wh, .week-mini .wr, .week-mini .wband { grid-template-columns: 120px repeat(var(--days, 6), minmax(0, 1fr)); }
  .sbar { font-size: 12px; }
  .wk { max-width: 1100px; }
  .rc-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (hover: hover) and (min-width: 1024px) {
  .rw:hover, a.list-row:hover, button.list-row:hover, .cb:hover, .cr:hover:not(.on), .al:hover { background-color: color-mix(in srgb, var(--sunk) 45%, transparent); }
  .tab:hover:not(.on) { background: color-mix(in srgb, var(--sunk) 70%, transparent); color: var(--ink); }
  .side-me:hover, .side-brand:hover { background: color-mix(in srgb, var(--sunk) 70%, transparent); }
  .btn:hover { filter: brightness(0.97); }
  .btn.pri:hover, .btn.solid:hover, .btn.ced:hover, .plus:hover { filter: brightness(1.12); }
  .chip:is(a, button):hover, .link:hover { filter: brightness(0.97); }
}
.chip.on, .chip.dark { box-shadow: none; }

/* ══ Update 13 (Chavie on her iPhone: "sometimes the icons aren't fixed"): the shell never moves. ══
   - the tab bar is fixed to the bottom on its own compositing layer (safe area respected); the page itself doesn't
     rubber-band in the home-screen app (overscroll-behavior), so the shell can't be dragged with it;
   - while the keyboard is up (a text field has focus on a touch phone) the tab bar steps aside and the composer sits on
     the keyboard; it comes back when the field loses focus (main.jsx sets body.kb-open);
   - every tab screen has the sticky top bar (date · bell · avatar), every detail screen the sticky Back bar, both on a
     translucent cream backdrop. Heights use dynamic viewport units (dvh), not 100vh. */
html, body { overscroll-behavior-y: none; }
.tabbar { transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; }
.topbar, .backbar { will-change: transform; }
@media (pointer: coarse) and (max-width: 1023px) {
  body.kb-open .tabbar { display: none; }
  body.kb-open .composer-dock { bottom: 0; }
  body.kb-open main.page { padding-bottom: 24px; }
}

/* ── Update 13: the Materials panel (office + finance) ── */
.mat-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.mat-head .btns { flex-wrap: wrap; }
.mat-head .btn.small { width: auto; }
.mat-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-top: 14px; }
.mat-totals .mt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mat-totals .mt b { font: 300 26px/1.1 var(--head); color: var(--ink); }
.mat-totals .mt b.ox { color: var(--ox); }
.mat-totals .mt small { font: 400 12px/1.2 var(--body); color: var(--ink-2); }
.mat-totals .ring-cell { flex-direction: row; align-items: center; gap: 10px; grid-column: 1 / -1; }
.mat-list { overflow: hidden; }
.mat-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "pk mi mc" "pk ms ms"; gap: 2px 10px; align-items: center; padding: 10px 14px 10px 10px; position: relative; }
.mat-row + .mat-row::before { content: ''; position: absolute; top: 0; left: 46px; right: 14px; border-top: 1px solid var(--line); }
.mat-row .pk { grid-area: pk; align-self: start; padding-top: 3px; }
.mat-row .pk input { width: 20px; height: 20px; accent-color: var(--cedar); }
.mat-row .mi { grid-area: mi; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; min-width: 0; min-height: 36px; }
.mat-row .mi b { display: block; font: 600 15px/1.25 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mat-row .mi small { display: block; font: 400 13px/1.3 var(--body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mat-row .mv { display: none; grid-area: mv; font: 400 13px/1.3 var(--body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mat-row .mv a { color: var(--cedar); }
.mat-row .mc { grid-area: mc; font: 600 15px/1 var(--body); text-align: right; }
.mat-row .ms { grid-area: ms; display: flex; gap: 6px; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin-top: 4px; }
.mat-th + .mat-row::before { display: none; }
.mat-head .grow { flex: 1 0 100%; }
.mat-head .btns { flex: 1 0 100%; }
.mat-row .ms .link { min-height: 30px; padding: 0 10px; font-size: 13px; }
.mat-row.u-ox .mi b { color: var(--ox); }
.mat-th { display: none; }
.mat-pickbar { position: sticky; bottom: calc(var(--nav-h) + 10px); z-index: 5; display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px 10px 16px;
  background: var(--card); border-radius: var(--r-md); box-shadow: 0 10px 30px -12px rgba(75,53,32,.45); font: 600 15px/1 var(--body); }
.mat-pickbar span { flex: 1; }
.mat-pickbar .btn { width: auto; }
.rc-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.rc { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "img meta" "img chip"; gap: 4px 12px; align-items: center; background: var(--card); border-radius: var(--r-md); box-shadow: var(--e1); padding: 10px; }
.rc img { grid-area: img; width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); background: var(--sunk); }
.rc > a { grid-area: img; }
.rc-meta { grid-area: meta; min-width: 0; }
.rc-meta b { display: block; font: 600 15px/1.2 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-meta small { display: block; font: 400 12px/1.3 var(--body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc .chip { grid-area: chip; justify-self: start; }
.drive-banner { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--sunk); color: var(--ink); flex-wrap: wrap; }
.drive-banner svg { width: 20px; height: 20px; color: var(--ink-2); flex: none; }
.drive-banner p { margin: 0; flex: 1 1 200px; font-size: 15px; }
.drive-banner .btn { width: auto; }
@media (min-width: 760px) {
  .mat-totals { grid-template-columns: repeat(4, 1fr); }
  .mat-totals .ring-cell { grid-column: auto; }
}
@media (min-width: 1024px) {
  .mat-th { display: grid; font: 600 12px/1 var(--body); color: var(--ink-2); padding-top: 14px; padding-bottom: 8px; }
  .mat-row { grid-template-columns: 26px minmax(0, 2.4fr) minmax(0, 1.2fr) 110px minmax(0, 1.6fr); grid-template-areas: "pk mi mv mc ms"; padding: 10px 18px 10px 14px; min-height: 58px; }
  .mat-row .mc, .mat-th .amt { text-align: right; }
  .mat-row .mv { display: block; } .mat-row .phone-only { display: none; }
  .mat-row .ms { justify-content: flex-end; margin-top: 0; }
  .mat-th + .mat-row::before { display: block; }
  .mat-head .grow { flex: 1 1 auto; } .mat-head .btns { flex: 0 0 auto; }
  .mat-pickbar { bottom: 18px; max-width: 560px; }
  .rc-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
/* update 13: the Schedule's Sites view — every active project, people as chips */
.site-nm { white-space: normal !important; align-items: flex-start; }
.site-nm > span { display: flex; flex-direction: column; min-width: 0; }
.site-nm small { font: 400 11px/1.2 var(--body); color: var(--ink-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-avs { display: inline-flex; align-items: center; justify-content: center; }
.sc-avs .av.xs { width: 20px; height: 20px; font-size: 11px; margin-left: -4px; box-shadow: 0 0 0 1.5px var(--card); }
.sc-avs .av.xs:first-child { margin-left: 0; }
.sc-avs em { font: 600 11px/1 var(--body); font-style: normal; margin-left: 2px; }
.sites-more { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 0 2px; }
.sch-empty { text-align: center; margin: 12px 0 0; }
.people-chips .chip { gap: 6px; padding-left: 4px; }
.people-chips .chip .av.xs { width: 22px; height: 22px; font-size: 11px; }
.people-chips .chip small { font-weight: 400; opacity: .85; }
.people-chips .chip.cfl:not(.dark) { box-shadow: inset 0 0 0 1.25px var(--ox); color: var(--ox); background: var(--ox-t); }
.tile.wood { background: var(--cedar-t); color: var(--cedar); }
/* the task filter: an icon beside the segments on a phone, "Open" with the icon on a desktop */
.tbar .filt { width: 44px; height: 38px; min-height: 38px; padding: 0; justify-content: center; }
@media (min-width: 1024px) { .tbar .filt { width: auto; padding: 0 14px; height: 36px; min-height: 36px; } }
.head-act { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.head-act .pagehead { flex: 1; min-width: 0; }
.head-act > .btn { margin-bottom: 14px; }

/* ───── Update 14, QA fixes (qa-report-update14.md) ───── */
/* F1: the ⋯ menu lines up with whichever edge keeps it on screen (on a phone the button wraps to the left) */
.more-wrap { position: relative; display: inline-flex; }
.menu-pop.at-left { right: auto; left: 0; }
/* F2: a long-press on a bubble opens Reply / Copy, not text selection or the iPhone callout */
@media (hover: none) { .msg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
/* F3: 44px targets everywhere; gloves. The visual stays where it was, the hit area grows. */
.composer-mic { width: 52px; height: 40px; margin: 0 -6px 0 -4px; border-radius: 20px; position: relative; }
.composer-mic::after { content: ''; position: absolute; inset: -2px 0; }
.daysw button { width: 40px; height: 36px; border-radius: 18px; }
.daysw button::after { inset: -4px -2px; }
.voice-play, .voice-speed { position: relative; }
.voice-play::after { content: ''; position: absolute; inset: -4px; }
.voice-speed::after { content: ''; position: absolute; inset: -10px -4px; }
.btn.icon-only::after { inset: -4px; }
.att-mic::after { content: ''; position: absolute; inset: -2px 0; }
.see { min-width: 44px; justify-content: flex-end; }
button.chip, a.chip { min-width: 44px; justify-content: center; }
.seg + .chips { margin-top: 6px; }
.ap-ref a, a.ap-ref { display: inline-flex; align-items: center; min-height: 44px; }
.sbar { overflow: visible; }
.sbar .sl { min-width: 0; }
.sbar .hits { inset: 0 -2px; }
.sbar .hit { position: relative; margin: 0; min-height: 0; }
.sbar .hit::after { content: ''; position: absolute; inset: -5px 0; }
/* F6: a title cuts its words, never its $ amount */
.tt { display: flex; min-width: 0; max-width: 100%; }
.tt-l { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-a { flex: none; white-space: pre; }
/* six 44px day columns beside the 76px names on a 390 phone: the row's side padding gives up 12px */
@media (max-width: 1023px) {
  .wk .wh, .wk .wr, .wk .wband { padding: 0 3px 0 7px; }
  .wk .wr::before { left: 7px; right: 3px; }
}
/* chips that wrap: 12px between rows so each row's 44px hit area doesn't overlap the next */
.chips:not(.scroll), .inbox .chips, .sheet .chips, .hold-edit .chips, .pt-filter .chips { row-gap: 12px; }
/* the ask's text on an approval card is a link: 44px tall for one line, same place on the card */
.ap-what { min-height: 44px; padding: 9px 0; margin: 0 0 -4px; }
/* the task page's project caption is a link: a 44px hit area around the 16px line */
a.eb-link { display: block; text-decoration: none; position: relative; z-index: 1; }
a.eb-link::after { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -24px; }
.chk-req { min-height: 44px; }
.sbar.wait .hits { inset: -1.5px -3.5px; } /* the dashed border would shrink the cells */
.mt-state::before { content: ''; position: absolute; inset: -12px; }
.mt-card > .row { padding-bottom: 4px; }
.tap-line { display: inline-flex; align-items: center; min-height: 44px; }
.accept-title { display: block; margin: 0; padding: 10px 0; text-decoration: none; color: inherit; }

/* ══ Update 15: the lead pipeline. Brand palette only: Hot = oxblood, Warm = olive, Cold = taupe (a sunk chip with a taupe
   edge; the text stays --ink-2 so it's AA). "Quiet · 9 days" is oxblood tone, never a dot. The one "new" mark is a
   solid 7px cedar dot (update 14). Every control has a 44px hit area. ══ */
.tchip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font: 600 12px/1 var(--body); white-space: nowrap; flex: none; }
.tchip.sm { height: 22px; padding: 0 8px; font-size: 11px; }
.tchip.hot { background: var(--ox); color: var(--on-cedar); } /* Chavie (Nov 7): Hot is a solid oxblood pill (ivory text; dark: light oxblood, dark text) */
.tchip.warm { background: var(--olive-t); color: var(--olive); }
.tchip.cold { background: var(--sunk); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-3); }
.quiet-chip { height: 22px; padding: 0 8px; font-size: 11px; }
.new-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cedar); flex: none; margin-right: 6px; vertical-align: 2px; }
.lead-tray { text-decoration: none; color: inherit; min-height: 52px; }
.lead-tray .chev-ic { margin-left: 4px; }
.pl-bar { margin-top: 14px; }
.pl-filters { margin-top: 6px; }
.pl-filters .chip .cnt, .chip .cnt { font-style: normal; font-weight: 600; color: inherit; opacity: .72; margin-left: 4px; font-variant-numeric: tabular-nums; }
.pl-hint { margin: 8px 2px 0; }
.empty-card { margin-top: 16px; }
/* board: one column per stage; scrolls sideways on a phone, fills the width on a desktop */
.board { display: flex; gap: 12px; overflow-x: auto; margin: 12px calc(-1 * var(--pad)) 0; padding: 4px var(--pad) 16px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.bcol { flex: 0 0 272px; scroll-snap-align: start; background: var(--sunk); border-radius: var(--r-lg); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; transition: box-shadow .15s ease; }
.bcol.over { box-shadow: inset 0 0 0 2px var(--cedar); }
.bcol header { display: flex; align-items: baseline; gap: 8px; padding: 2px 4px 4px; }
.bcol header b { font: 600 13px/18px var(--body); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcol header span { font: 600 12px/16px var(--body); color: var(--ink-2); }
.bcards { display: flex; flex-direction: column; gap: 8px; }
.lcard { position: relative; background: var(--card); border-radius: var(--r-md); box-shadow: var(--e1); }
.lcard[draggable=true] { cursor: grab; }
.lcard[draggable=true]:active { cursor: grabbing; }
.lc-main { display: flex; flex-direction: column; gap: 4px; padding: 12px 44px 12px 12px; text-decoration: none; color: inherit; min-height: 64px; }
.lc-name { font: 600 15px/20px var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-meta { font: 400 13px/18px var(--body); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.lc-fu { font: 400 12px/16px var(--body); color: var(--ink-2); }
.lc-move { position: absolute; top: 4px; right: 0; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--ink-2); cursor: pointer; border-radius: var(--r-sm); }
.lc-move svg { width: 20px; height: 20px; }
/* list */
.pl-list-filters { margin-top: 12px; }
.pl-list-filters input[type=search] { width: 100%; }
.pl-list-filters .field { margin: 10px 0 0; }
.pl-list-filters select { width: 100%; }
.pl-closed { align-self: end; min-height: 44px; }
.pl-list-filters + .card, .pl-list-filters + .empty { margin-top: 14px; }
.lrow.on { background: var(--sunk); }
/* summary */
.sm-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 32px 64px; gap: 10px; align-items: center; min-height: 32px; }
.sm-row .sm-l { font: 600 13px/18px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-row .mbar { margin: 0; height: 6px; }
.sm-row .sm-n { font: 600 13px/18px var(--body); text-align: right; }
.sm-row .sm-v { font: 400 12px/16px var(--body); color: var(--ink-2); text-align: right; }
.sm-grid { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
.sm-kv { display: flex; align-items: center; justify-content: space-between; min-height: 36px; font: 400 15px/22px var(--body); }
.sm-kv b { font: 400 22px/1 var(--head); font-variant-numeric: tabular-nums; }
/* trays */
.bulk-bar { margin-top: 14px; }
.field.inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.field.inline select { min-height: 36px; }
.tray-row { flex-wrap: wrap; padding-top: 6px; padding-bottom: 10px; }
.tray-row .t { min-width: 0; }
.tray-check { width: 44px; height: 44px; display: grid; place-items: center; flex: none; margin-left: -6px; }
.tray-check input { width: 20px; height: 20px; accent-color: var(--cedar); }
.tray-acts { display: flex; gap: 8px; width: 100%; padding-left: 48px; }
/* the lead */
.pane-head { margin: 4px 0 8px; }
.pane-head .t-title { margin: 0; }
.lead-chips { gap: 8px; margin: 10px 0 0; align-items: center; }
.review-card { margin-top: 14px; }
.stage-bar { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 18px 0 8px; }
.stage-bar .sb { height: 6px; border-radius: 3px; background: var(--track); }
.stage-bar .sb.done { background: var(--olive-ring); }
.stage-bar .sb.on { background: var(--cedar); }
.stage-line { margin-bottom: 4px; }
.stage-line .grow { font: 400 15px/22px var(--body); }
.next-card { margin-top: 14px; }
.lc-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.lc-btns .btn { width: 100%; padding: 0 6px; }
.stage-card { margin-top: 14px; }
.check-row { cursor: pointer; }
.check-row input { width: 22px; height: 22px; accent-color: var(--cedar); flex: none; margin: 0 4px 0 0; }
.check-row.locked { cursor: default; }
.lead-facts .rw { min-height: 56px; }
.lead-facts .rw .t .a { font-weight: 400; }
.file-acts { gap: 8px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.note-composer textarea { width: 100%; }
.timeline { list-style: none; margin: 14px 0 0; padding: 0 0 0 4px; }
.timeline .ev { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.timeline .ev::before { content: ''; position: absolute; left: 4px; top: 14px; bottom: 0; width: 1px; background: var(--line-strong); }
.timeline .ev:last-child::before { display: none; }
.timeline .ev-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); margin-top: 6px; flex: none; }
.timeline .k-stage .ev-dot { background: var(--cedar); }
.timeline .k-contact .ev-dot { background: var(--olive-ring); }
.timeline .ev-b { flex: 1; min-width: 0; }
.timeline .ev-t { margin: 0; font: 400 13px/18px var(--body); }
.timeline .ev-t b { font-weight: 600; color: var(--ink); }
.timeline .ev-x { margin: 4px 0 0; font: 400 15px/22px var(--body); white-space: pre-wrap; overflow-wrap: anywhere; }
.from-lead { margin-top: 8px; }
.tpl-card .field:first-child { margin-top: 0; }
.mail-settings .toggle { min-height: 44px; }
@media (min-width: 1024px) {
  .board { margin: 16px 0 0; padding: 4px 0 16px; }
  .bcol { flex: 1 0 220px; }
  .sm-grid { grid-template-columns: 1fr 1fr; }
  .pl-split .split-list { width: 380px; padding: 24px 16px 24px 24px; top: 64px; max-height: calc(100dvh - 64px); box-shadow: 1px 0 0 var(--line); }
  .pl-split { grid-template-columns: 380px minmax(0, 1fr); }
  .pl-split .split-list .page-head, .pl-split .split-list .ph { margin-top: 0; }
  .pl-split .split-list .grid2 { grid-template-columns: 1fr; }
  .pl-split .split-main > main.page { padding: 28px 48px 40px !important; max-width: 868px !important; }
  .lead-facts { display: grid; grid-template-columns: 1fr 1fr; }
  .lead-facts .rw + .rw::before { left: 16px; }
}
.pl-head { display: flex; align-items: center; gap: 4px; margin: 6px 0 0; flex-wrap: wrap; }
.pl-head .title { margin: 0; min-width: 0; flex: 1 1 140px; overflow-wrap: anywhere; }
.pl-head .btn { margin-left: 6px; }
.pl-bar { margin: 14px 0 12px; }
.pl-sort { width: auto; max-width: 46%; flex: none; }
.pl-more { margin-top: 8px; }
.pl-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 13px/18px var(--body); color: var(--ink-2); cursor: pointer; }
.pl-more > summary::-webkit-details-marker { display: none; }
.pl-more > summary svg { width: 16px; height: 16px; }
.pl-more[open] > summary .chev-ic { transform: rotate(180deg); }
.board { align-items: flex-start; }
.bcol { flex-basis: min(272px, 78vw); }
.lc-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lc-due { height: 22px; padding: 0 8px; font-size: 11px; }
.lc-due svg { width: 12px; height: 12px; }
@media (min-width: 1024px) { .lc-btns { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .bcol { flex: 0 0 216px; }
  .pl-bar .seg { max-width: 420px; }
  .pl-split .pl-bar .seg { max-width: none; }
}
.bcol { flex-basis: 248px; }
.bcol.empty { flex-basis: 136px; min-height: 0; }
.bcol.empty .bcards { display: none; }
@media (min-width: 1024px) { .bcol, .bcol.empty { flex: 0 0 216px; min-height: 120px; } }
/* update 15: Chavie's availability (busy / free only) */
.av-card { display: block; text-decoration: none; color: inherit; }
.av-now { margin: 0 0 12px; }
.av-now.busy, .av-now.morning { color: var(--ink-2); }
.av-bar { position: relative; height: 12px; border-radius: 6px; background: var(--olive-t); overflow: hidden; margin-top: 8px; }
.av-bar i { position: absolute; top: 0; bottom: 0; }
.av-bar .av-busy { background: var(--cedar); }
.av-bar .av-morning { background: repeating-linear-gradient(135deg, var(--sunk) 0 4px, var(--track) 4px 8px); }
.av-scale { display: flex; justify-content: space-between; margin-top: 4px; }
.av-legend { display: flex; gap: 16px; margin: 12px 2px; }
.av-legend span { display: inline-flex; align-items: center; gap: 6px; }
.av-legend i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.av-legend .av-busy { background: var(--cedar); }
.av-legend .av-morning { background: repeating-linear-gradient(135deg, var(--sunk) 0 4px, var(--track) 4px 8px); }
.av-legend .av-free { background: var(--olive-t); }
.av-day .t { padding: 12px 0 14px; }

/* ── Update 15: partial deliveries — the receive sheet, line states, PDF receipts ── */
.badge.part { background: var(--cedar-t); color: var(--cedar); }
.ord-part { display: block; margin-top: 2px; color: var(--cedar); font-weight: 600; }
.section-head .ord-part { margin: 0 0 0 auto; }
.ord-recv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.ord-lines li .grow { min-width: 0; }
.rcv-sub { margin: 0 0 12px; color: var(--ink-2); font: 400 13px/18px var(--body); }
.rcv-allbtn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: var(--r-md);
  background: var(--sunk); color: var(--ink); font: 600 15px/20px var(--body); cursor: pointer; text-align: left; }
.rcv-allbtn .tick { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-2); display: grid; place-items: center; flex: none; }
.rcv-allbtn.on .tick { background: var(--cedar); box-shadow: none; color: var(--on-cedar); }
.rcv-allbtn .tick svg { width: 14px; height: 14px; stroke-width: 2.5; }
.rcv-lines { margin-top: 6px; }
.rcv-line { padding: 14px 0; border-top: 1px solid var(--line); }
.rcv-line:first-child { border-top: 0; }
.rcv-top { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; min-width: 0; }
.rcv-top b { font: 600 15px/20px var(--body); overflow-wrap: anywhere; }
.rcv-top small { font: 400 13px/18px var(--body); color: var(--ink-2); }
.rcv-qty { display: grid; grid-template-columns: auto minmax(0, 180px) auto; align-items: center; gap: 10px; margin-top: 12px; }
.rcv-qlabel, .rcv-of { font: 600 13px/18px var(--body); color: var(--ink-2); }
.rcv-note { margin-top: 10px; }
.rcv-here { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0; }
.rcv-here svg { flex: none; margin-top: 3px; color: var(--olive); }
.rcv-photo { margin-top: 18px; }
.rcv-photo .label { margin: 0 0 8px; }
.rcv-photo .opt { font: 400 13px/18px var(--body); margin-left: 6px; color: var(--ink-2); }
.rcv-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rcv-files > .btn:not(.small) { flex: 1; }
.rcv-file { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); background: var(--sunk); flex: none; }
.rcv-file.pdf { width: auto; max-width: 180px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--ink); font: 600 13px/18px var(--body); }
.rcv-file.pdf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcv-file.pdf svg { width: 18px; height: 18px; flex: none; color: var(--cedar); }
.rcv .chips { margin-top: 14px; }
.rcv-save { margin-top: 16px; }
.rcv-why { text-align: center; margin: 8px 0 0; }
.rcv-hist { list-style: none; padding: 0; margin: 0; }
.rcv-hist li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.rcv-hist p { margin: 0; }
.rcv-hist p + p { margin-top: 2px; font: 400 15px/22px var(--body); overflow-wrap: anywhere; }
/* receipts: a photo opens full screen, a PDF opens in the viewer (the same as drawings and asks) */
.rc-tiles button { border: 0; padding: 0; background: none; cursor: pointer; display: block; min-height: 44px; }
.rc-doc { width: 100%; aspect-ratio: 1; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px !important;
  border-radius: var(--r-sm); background: var(--sunk) !important; color: var(--ink); font: 600 12px/16px var(--body); min-width: 0; }
.rc-doc svg { width: 26px; height: 26px; color: var(--cedar); }
.rc-doc span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-doc i { font: 600 11px/1 var(--body); font-style: normal; color: var(--ink-2); letter-spacing: .04em; }
.rc .rc-doc.sm { grid-area: img; width: 64px; height: 64px; border: 0; cursor: pointer; }
.rcv-qty .stepper button { flex: none; width: 52px; }
.rcv-qty .stepper input { flex: 1; width: 0; padding: 12px 4px; }
.ord-part-sum { margin: -4px 0 4px; }
/* update 15: the project's Deliveries block (everyone who sees the project) */
.pd-events { list-style: none; padding: 0; margin: 8px 4px 0; }
.pd-events li { font: 400 13px/18px var(--body); color: var(--ink-2); padding: 4px 0; overflow-wrap: anywhere; }
.pd-events li b { color: var(--ink); font-weight: 600; }
.pd-events li span { display: block; }
/* ───── update 16: personal to-dos + Remind me ───── */
.mt-row .rm-bell { margin: -10px -8px -10px 4px; color: var(--ink-2); width: auto; min-width: 44px; padding: 0 8px; gap: 4px; display: inline-flex; align-items: center; justify-content: center; }
.rm-bell svg { width: 18px; height: 18px; }
.rm-bell.on { color: var(--cedar); }
.rm-when { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-add .rm-bell { border-radius: var(--r-sm); background: var(--sunk); color: var(--ink-2); }
.mt-add .rm-bell.on { background: var(--cedar-t); color: var(--cedar); }
.rm-chosen { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--cedar); }
.rm-chosen .link { min-height: 44px; }
.rm-lock { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); margin-right: 10px; }
.rm-picks { display: grid; gap: 8px; }
.rm-pick { justify-content: flex-start; gap: 10px; min-height: 50px; width: 100%; }
.rm-pick .grow { text-align: left; }
.rm-pick .meta { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.rm-custom { gap: 8px; }
.rm-custom input { flex: 1; min-height: 44px; font-size: 16px; }
.rm-field { width: 100%; justify-content: flex-start; gap: 10px; min-height: 48px; }
/* update 16: drawing questions */
.pdfv-bar .dq-btn { flex: none; min-height: 44px; margin-right: 4px; }
.dq-note { margin: 4px 2px 8px; }

/* update 16: the 12-hour time picker (TimePick) — hour : minutes AM/PM, brand tokens only */
.tpick { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; flex: 1; min-width: 0; width: 100%; }
.tpick > select { flex: 1 1 0 !important; width: 0 !important; min-width: 64px; margin: 0; }
.grid2:has(.tpick) { grid-template-columns: 1fr; }
.tpick select { flex: 1 1 0; min-width: 64px; min-height: 44px; font-size: 16px; padding: 0 26px 0 12px; }
.rm-custom { flex-wrap: wrap; }
.rm-custom .tpick { flex: 1 1 100%; }
.tpick-colon { color: var(--ink-2); font-weight: 600; flex: none; }

/* final QA N5: Drew's need thread on a desktop is a page of its own (not the split pane): its answer bar stays inside it */
@media (min-width: 1024px) {
  body.has-tabs .solo-thread .actbar { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}

/* ══ Update 17: the design update, round 2 (design-review-u14/round2/spec.md, v2 + Chavie's Nov 7 additions) ══ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tile { background: var(--k-stone-t); color: var(--k-stone); } /* an unknown icon falls back to stone */
.stats.hero { padding: 6px 0; } .stats.hero .st + .st::before { background: var(--line); }
.hero.hero-crew { padding: 18px 4px 16px; }
.hero.hero-crew .ring .l { margin-top: 8px; }
.hero.hero-crew .ring .v b { font-size: 28px; }
.hero.hero-crew .ring .v small { font-size: 13px; margin-top: 6px; }
/* the quote beside the greeting on a desktop (no hero card there: the KPI tiles are) */
.quote.desk { font: 400 15px/22px var(--body); color: var(--ink-2); margin: 6px 0 0; max-width: 56ch; min-height: 22px; }

/* loading: skeleton cards in the round 2 shapes, a soft sweep (none under reduce-motion) */
@keyframes sk-sweep { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.sk { display: block; height: 12px; border-radius: 999px; background: var(--skel) linear-gradient(90deg, transparent 0%, var(--skel-hi) 50%, transparent 100%) no-repeat;
  background-size: 50% 100%; animation: sk-sweep 1.4s ease-in-out infinite; }
.sk.sm { height: 10px; margin-top: 8px; }
.sk.pill { width: 44px; height: 20px; margin-top: 10px; }
.skel { padding-top: 4px; }
.skel .tile { opacity: .55; }
.sk-hello { width: 58%; height: 28px; margin: 14px 0 0; border-radius: var(--r-sm); }
.sk-sub { width: 72%; height: 14px; margin-top: 12px; }
.sk-sec { width: 30%; height: 16px; margin: 30px 2px 14px; }
.sk-hero { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 0 0; padding: 20px 6px 18px; border-radius: 22px; background: var(--hero-bg); box-shadow: var(--hero-edge); justify-items: center; }
.sk-quote { grid-column: 1 / -1; width: 70%; margin: -2px 0 18px; }
.sk-rg { display: flex; flex-direction: column; align-items: center; width: 100%; }
.sk-rg .sk { width: 52%; }
.sk-ring { width: 84px; height: 84px; border-radius: 50%; box-shadow: inset 0 0 0 7px var(--ring-track); background: var(--ring-glow); }
.sk-now { height: 150px; margin-top: 18px; border-radius: var(--r-lg); background: var(--skel); }
.sk-card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--e2); overflow: hidden; margin-top: 10px; }
.sk-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 16px; position: relative; }
.sk-row + .sk-row::before { content: ''; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--line); }
.sk-t { flex: 1; min-width: 0; }
.sk-stage { padding: 16px; margin-top: 16px; }
.sk-phases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 14px; }
.sk-phases .sk { height: 6px; }
.sk-qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.sk-q { height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--card); box-shadow: var(--e1); border-radius: var(--r-md); }
.sk-q .tile { width: 36px; height: 36px; border-radius: 11px; }
.sk-q .sk { width: 50%; }
.sk-seg { height: 38px; margin: 18px 0 0; border-radius: var(--r-sm); }
.sk-board { display: flex; gap: 12px; overflow: hidden; margin-top: 12px; }
.sk-col { flex: 0 0 248px; background: var(--well); border-radius: var(--r-lg); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.sk-colh { display: flex; align-items: center; gap: 8px; padding: 2px 2px 4px; }
.sk-colh .tile, .bcol header .tile { width: 28px; height: 28px; border-radius: 8px; }
.sk-colh .sk { flex: none; }
.sk-lcard { display: block; background: var(--card); border-radius: var(--r-md); box-shadow: var(--e2); padding: 12px; }
.skel-bar { height: 4px; border-radius: 999px; background: var(--track); overflow: hidden; margin: 18px auto; max-width: 240px; }
.skel-bar i { display: block; height: 100%; width: 40%; border-radius: 999px; background: var(--cedar); opacity: .5; animation: sk-bar 1.2s ease-in-out infinite; }
@keyframes sk-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
/* Couldn't load / Taking longer / No connection: a proper card (icon tile, one line, cedar Retry) */
.load-card { display: flex; align-items: center; gap: 12px; margin-top: 16px; box-shadow: var(--e2); }
.load-card p { margin: 0; font: 600 15px/20px var(--body); }

/* the pipeline (Chavie, Nov 7): coloured stage tiles, a darker column well so the cards lift, earthy pills */
.bcol { background: var(--well); }
.bcol header { align-items: center; padding: 2px 2px 6px; }
.bcol header .tile svg { width: 16px; height: 16px; }
.lcard { box-shadow: var(--e2); }
.lc-meta.lc-sub { color: var(--ink-2); }
.lc-mail { font: 400 12px/16px var(--body); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchip.hot { background: var(--urgent-bg); color: var(--urgent-fg); }
.tchip.warm { background: var(--k-wood-t); color: var(--k-wood); }
.tchip.cold { background: var(--k-stone-t); color: var(--k-stone); box-shadow: none; }
.chip.quiet-chip { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-3); }
.pl-filters .chip[data-temp=hot].on { background: var(--urgent-bg); color: var(--urgent-fg); }
.pl-filters .chip[data-temp=warm].on { background: var(--k-wood-t); color: var(--k-wood); box-shadow: inset 0 0 0 1.5px var(--k-wood); }
.pl-filters .chip[data-temp=cold].on { background: var(--k-stone-t); color: var(--k-stone); box-shadow: inset 0 0 0 1.5px var(--k-stone); }
.pl-filters .chip[data-act=due].on { background: var(--k-wood-t); color: var(--k-wood); box-shadow: inset 0 0 0 1.5px var(--k-wood); }
.pl-filters .chip[data-act=quiet].on { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.sm-row .mbar i { background: var(--k-wood); }
.sm-row[data-stage] .sm-l { display: flex; align-items: center; gap: 8px; }
.sm-row .sm-l .tile { width: 24px; height: 24px; border-radius: 7px; }
.sm-row .sm-l .tile svg { width: 14px; height: 14px; }
.sm-row { min-height: 36px; }

@media (min-width: 1024px) {
  .hero.kpis { background: none; box-shadow: none; padding: 0; border-radius: 0; overflow: visible; }
  .hero.kpis::after { display: none; }
  .kpi { background: var(--hero-bg); box-shadow: var(--hero-edge); }
  .kpi .ring .g::before { inset: 6px; }
  .tab .pill { width: 24px; height: 24px; margin: 0; background: none !important; display: contents; }
  .tab.on { color: var(--ink); }
  .tab.on svg { color: var(--tab-on); }
  .sk-board { gap: 12px; }
  .sk-col { flex: 0 0 216px; }
  .skel-home .sk-hero { max-width: 640px; }
  .bcol header .tile { width: 26px; height: 26px; }
}
.tile.ced-solid { background: var(--cedar); color: var(--on-cedar); }
.bcol header .tile { box-shadow: inset 0 0 0 1px var(--line-strong); }
/* the stage tile takes room on a phone: the label column gets more, the bar less (no "Proposal sen…") */
.sm-row[data-stage] { grid-template-columns: minmax(0, 1.9fr) minmax(0, .8fr) 24px 60px; gap: 8px; }
@media (min-width: 1024px) { .sm-row[data-stage] { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 32px 64px; gap: 10px; } }

/* ══ Update 17 fixes (design-review-u17-fixes/spec.md): the "My to-dos" card (Part A) ══ */
.td-sec .sec { align-items: center; gap: 8px; margin: 26px 2px 10px; }
.td-sec .sec .h2 { flex: none; }
.td-sec .sec .see { margin-left: auto; }
.priv { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 7px; border-radius: 999px; background: var(--sunk); font: 600 11px/1 var(--body); color: var(--ink-2); letter-spacing: .01em; }
.priv svg { width: 13px; height: 13px; stroke-width: 2.1; }
.td-card { padding: 0; overflow: hidden; border: 0; transition: box-shadow .12s var(--ease); }
.td-card.focus { box-shadow: var(--e2), 0 0 0 2px color-mix(in srgb, var(--cedar) 35%, transparent); }
.td-row { display: grid; grid-template-columns: 48px 1fr auto; align-items: start; min-height: 56px; position: relative; }
.td-row + .td-row::before, .td-add + .td-row::before, .td-row + .td-add::before, .td-picks + .td-row::before { content: ''; position: absolute; top: 0; left: 48px; right: 0; height: 1px; background: var(--line); }
.td-ring { width: 48px; height: 52px; display: grid; place-items: center; padding: 2px 0 0; background: none; border: 0; cursor: pointer; transition: transform .12s var(--ease); }
.td-ring:active { transform: scale(.92); }
.td-ring i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ctl); display: block; position: relative; }
.td-row.in_progress .td-ring i { box-shadow: inset 0 0 0 1.5px var(--cedar); background: linear-gradient(90deg, var(--cedar) 50%, transparent 50%); }
.td-row.completed .td-ring i, .td-row.leaving .td-ring i { background: var(--olive-ring); box-shadow: none; transition: background .16s var(--ease); }
.td-row.completed .td-ring i::after, .td-row.leaving .td-ring i::after { content: ''; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid var(--on-cedar); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.td-row.completed .td-t { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.td-row.leaving { animation: td-out .2s var(--ease) .16s forwards; overflow: hidden; }
@keyframes td-out { to { opacity: 0; min-height: 0; max-height: 0; } }
.td-row.fresh { animation: td-in .18s var(--ease); }
@keyframes td-in { from { opacity: 0; transform: translateY(-6px); } }
.td-body { padding: 15px 0 14px; min-width: 0; }
.td-t { font: 600 15px/21px var(--body); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.td-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 7px; font: 400 13px/18px var(--body); color: var(--ink-2); }
.td-prog { font: 600 12px/18px var(--body); color: var(--cedar); }
.td-where { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.td-where.late { color: var(--ox); }
.td-notes { display: block; margin-top: 4px; font: 400 13px/18px var(--body); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-end { padding: 6px 6px 0 4px; }
.td-end .iconbtn { width: 44px; height: 44px; color: var(--ink-2); }
.td-end .iconbtn svg { width: 20px; height: 20px; }
.rm { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; border: 0; background: var(--k-sand-t); color: var(--k-sand);
  font: 600 12px/1 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.rm::after { content: ''; position: absolute; inset: -9px 0; }
.rm svg { width: 14px; height: 14px; stroke-width: 2.1; flex: none; }
.rm.due { background: var(--ox-t); color: var(--ox); }
.td-add { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; min-height: 52px; position: relative; margin: 0; }
.td-add:first-child::before { display: none; }
.td-plus { width: 48px; display: grid; place-items: center; color: var(--ink-2); }
.td-plus i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); }
.td-plus svg { width: 14px; height: 14px; stroke-width: 2.2; }
.td-add input { border: 0; background: transparent; box-shadow: none; padding: 15px 0; min-height: 0; font: 400 15px/21px var(--body); color: var(--ink); outline: none; width: 100%; min-width: 0; border-radius: 0; }
.td-add input::placeholder { color: var(--ink-3); }
@media (pointer: coarse) { .td-add input { font-size: max(16px, 1em); } }
.td-go { margin-right: 10px; height: 32px; min-height: 32px; padding: 0 14px; border-radius: 10px; font: 600 14px/1 var(--body); animation: td-pop .14s var(--ease); width: auto; }
@keyframes td-pop { from { opacity: 0; transform: scale(.96); } }
.td-go .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: td-spin .7s linear infinite; }
@keyframes td-spin { to { transform: rotate(360deg); } }
.td-picks { display: flex; align-items: center; gap: 6px; padding: 0 0 14px 14px; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, var(--ink) calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, var(--ink) calc(100% - 28px), transparent); animation: fade .12s ease; }
.td-picks::-webkit-scrollbar { display: none; }
.pk-ic { width: 20px; display: grid; place-items: center; color: var(--ink-2); flex: none; margin-right: 2px; }
.pk-ic svg { width: 16px; height: 16px; }
.rm.qp { flex: none; height: 32px; padding: 0 12px; background: var(--sunk); color: var(--ink); font-size: 13px; gap: 6px; }
.rm.qp.on { background: var(--cedar); color: var(--on-cedar); }
.rm .x { width: 14px; height: 14px; margin-left: 2px; opacity: .8; }
/* the Remind me sheet (A3) and the Due sheet (A4) */
.rm-sheet .sheet-head .label, .due-sheet .sheet-head .label { font: 500 20px/26px var(--head); }
.due-sheet .sheet-head .label { visibility: hidden; }
.rm-sheet .sheet-head .iconbtn, .due-sheet .sheet-head .iconbtn, .flt-sheet .sheet-head .iconbtn { width: 36px; height: 36px; border-radius: 50%; background: var(--sunk); color: var(--ink-2); }
.rm-sheet .sheet-head .iconbtn svg, .due-sheet .sheet-head .iconbtn svg, .flt-sheet .sheet-head .iconbtn svg { width: 18px; height: 18px; stroke-width: 2.2; }
.sheet-sub { margin: -4px 0 0; font: 400 14px/20px var(--body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.rq { height: 64px; border-radius: var(--r-md); background: var(--sunk); padding: 11px 12px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; border: 0; color: var(--ink); text-align: left; cursor: pointer; }
.rq b { font: 600 15px/20px var(--body); }
.rq span { font: 400 13px/18px var(--body); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rm-lab { font: 600 12px/16px var(--body); color: var(--ink-2); letter-spacing: .02em; text-transform: uppercase; margin: 18px 0 8px; }
.rd-strip { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); }
.rd-strip::-webkit-scrollbar { display: none; }
.rd { flex: none; height: 52px; min-width: 52px; padding: 0 10px; border-radius: 12px; background: var(--sunk); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 0; color: var(--ink); cursor: pointer; position: relative; }
.rd span { font: 600 11px/14px var(--body); color: var(--ink-2); letter-spacing: .02em; }
.rd b { font: 600 15px/18px var(--body); font-variant-numeric: tabular-nums; }
.rd.on { background: var(--cedar); color: var(--on-cedar); } .rd.on span { color: var(--on-cedar); opacity: .8; }
.rd-cal svg { width: 20px; height: 20px; color: var(--ink-2); }
.rd-cal input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.rt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.rt { height: 40px; padding: 0 6px; border-radius: 10px; background: var(--sunk); display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; border: 0; color: var(--ink);
  font: 600 14px/1 var(--body); font-variant-numeric: tabular-nums; cursor: pointer; }
.rt svg { width: 16px; height: 16px; }
.rt.wide { grid-column: span 2; color: var(--ink-2); }
.rt.on { background: var(--cedar); color: var(--on-cedar); }
.rt.gone { opacity: .4; cursor: default; }
.rt-other { margin-top: 8px; }
.rm-go { margin-top: 18px; gap: 8px; }
.rm-go.dim { opacity: .4; }
.rm-why { margin: 8px 0 0; text-align: center; font: 600 13px/18px var(--body); color: var(--ox); }
.rm-off { display: block; width: 100%; min-height: 44px; margin-top: 6px; background: none; border: 0; font: 600 14px/20px var(--body); color: var(--ink-2); cursor: pointer; }
.rm-note { display: flex; gap: 6px; align-items: center; justify-content: center; font: 400 12px/16px var(--body); color: var(--ink-2); margin: 12px 0 0; }
.rm-note svg { width: 13px; height: 13px; }
.due-top { cursor: default; }
.due-top::after { display: none; }
.due-title { font: 500 20px/26px var(--head); color: var(--ink); margin: 10px 40px 0 0; }
.due-sheet .sheet-head { margin-bottom: -30px; }
.due-sheet .btn.big { margin-top: 18px; gap: 8px; }
.snz { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.snz button { height: 60px; border-radius: var(--r-md); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-strong); border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; }
.snz b { font: 600 15px/20px var(--body); } .snz span { font: 400 12px/16px var(--body); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ══ Update 17 fixes: the Pipeline on a phone (Part B) ══ */
/* B1: nothing on the page ever scrolls sideways (clip, not hidden, so position: sticky keeps working) */
html, body { overflow-x: clip; }
body { overscroll-behavior-x: none; }
main.page { overflow-x: clip; }
.pl-head { flex-wrap: nowrap; height: 56px; margin-top: 2px; gap: 2px; }
.pl-head .title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.pl-head .iconbtn { width: 40px; height: 40px; flex: none; position: relative; }
.pl-head .iconbtn::after { content: ''; position: absolute; inset: -2px 0 -2px -4px; } /* 44px to tap, never over the next button */
.pl-head .iconbtn + .iconbtn::after { inset: -2px -4px -2px 0; }
.pl-head .iconbtn svg { width: 22px; height: 22px; stroke-width: 1.7; }
.pl-new { flex: none; height: 36px; min-height: 36px; border-radius: 10px; padding: 0 12px 0 10px; margin-left: 6px; gap: 6px; width: auto; }
.pl-new svg { width: 17px; height: 17px; stroke-width: 2; }
@media (max-width: 340px) { .pl-new span { display: none; } .pl-new { width: 36px; padding: 0; justify-content: center; } }
.tray-card { display: flex; align-items: center; gap: 12px; min-height: 60px; margin-top: 8px; padding: 0 6px 0 12px; text-decoration: none; color: var(--ink); }
.tray-card .tile { width: 36px; height: 36px; border-radius: 11px; }
.tray-card .tile svg { width: 18px; height: 18px; }
.tray-card .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tray-card .tx b { font: 600 15px/20px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray-card .tx span { font: 400 12px/16px var(--body); color: var(--ink-2); margin-top: 1px; } /* QA u17 S2: wraps rather than cut off (ES at 390) */
.tray-card { padding-block: 8px; }
.tray-card.wraps .tx b { white-space: normal; } /* QA u17 nit 4: the Reconnect Google banner's longer title */
.tray-card .go { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px 0 10px; font: 600 14px/1 var(--body); color: var(--cedar); flex: none; }
.tray-card .go svg { width: 16px; height: 16px; stroke-width: 2.2; }
.flt { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: nowrap; }
.fc { position: relative; height: 32px; padding: 0 clamp(8px, 2.3vw, 12px); border-radius: 999px; border: 0; background: var(--sunk); display: inline-flex; align-items: center; gap: 5px; font: 600 13px/1 var(--body); color: var(--ink); white-space: nowrap; cursor: pointer; flex: none; min-width: 44px; justify-content: center; }
.fc::after, .sc::after { content: ''; position: absolute; inset: -6px 0; }
.fc i { font-style: normal; opacity: .62; }
.fc.zero { color: var(--ink-2); }
.fc.on { background: var(--cedar); color: var(--on-cedar); } .fc.on i { opacity: .8; }
.fc.hot.on { background: var(--urgent-bg); color: var(--urgent-fg); }
.fc.warm.on { background: var(--k-wood-t); color: var(--k-wood); box-shadow: inset 0 0 0 1.5px var(--k-wood); }
.fc.cold.on { background: var(--k-stone-t); color: var(--k-stone); box-shadow: inset 0 0 0 1.5px var(--k-stone); }
.flt-btn { position: relative; margin-left: auto; height: 32px; min-width: 36px; padding: 0 9px; border-radius: 10px; border: 0; background: var(--sunk); display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--ink); font: 600 13px/1 var(--body); cursor: pointer; flex: none; }
.flt-btn::after { content: ''; position: absolute; inset: -6px 0 -6px -8px; }
.flt-btn svg { width: 17px; height: 17px; stroke-width: 2; }
.flt-btn.on { background: var(--cedar-t); color: var(--cedar); }
@media (max-width: 374px) { .fc { padding: 0 10px; } .flt { gap: 4px; } }
.stages-sentinel { height: 1px; margin-top: 9px; }
.stages { position: sticky; top: calc(52px + var(--safe-t)); z-index: 19; margin: 0 calc(-1 * var(--pad)); padding: 8px var(--pad); display: flex; gap: 6px; overflow-x: auto; scroll-padding-inline: var(--pad);
  overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none; background: transparent; transition: background .12s var(--ease), box-shadow .12s var(--ease);
  -webkit-mask-image: linear-gradient(90deg, var(--ink) calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, var(--ink) calc(100% - 32px), transparent); }
.stages::-webkit-scrollbar { display: none; }
.stages.stuck { background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); -webkit-mask-image: none; mask-image: none; }
.sc { position: relative; flex: none; height: 36px; padding: 0 13px; border-radius: 999px; border: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-strong); display: inline-flex; align-items: center; gap: 6px;
  font: 600 14px/1 var(--body); color: var(--ink); white-space: nowrap; cursor: pointer; transition: background .16s var(--ease), color .16s var(--ease); }
.sc i { font-style: normal; font-size: 13px; color: var(--ink-2); }
.sc.zero { color: var(--ink-2); } .sc.zero i { color: var(--ink-3); }
.sc.on { background: var(--cedar); color: var(--on-cedar); box-shadow: none; } .sc.on i { color: var(--on-cedar); opacity: .78; }
.stage-head { display: flex; align-items: center; gap: 12px; margin: 12px 0 10px; }
.stage-head .tile { width: 36px; height: 36px; border-radius: 11px; }
.stage-head .tile svg { width: 18px; height: 18px; }
.stage-head .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stage-head .tx b { font: 500 20px/24px var(--head); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-head .tx span { font: 400 13px/18px var(--body); color: var(--ink-2); margin-top: 1px; }
.nav2 { display: flex; gap: 6px; flex: none; }
.nav2 .iconbtn { width: 36px; height: 36px; border-radius: 10px; background: var(--sunk); color: var(--ink); position: relative; }
.nav2 .iconbtn::after { content: ''; position: absolute; inset: -4px 0 -4px -8px; }
.nav2 .iconbtn + .iconbtn::after { inset: -4px -8px -4px 0; }
.nav2 .iconbtn svg { width: 18px; height: 18px; stroke-width: 2.1; }
.nav2 .iconbtn.off { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); cursor: default; }
/* B3: the pager clips its neighbour: it is never part of the page width */
.stage-pager { position: relative; overflow: hidden; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) calc(var(--nav-h) + 24px); touch-action: pan-y; }
.stage-pager .pane.nb { position: absolute; top: 0; left: var(--pad); right: var(--pad); }
.stage-pager.fading .pane.cur { animation: fade .12s ease; }
.pl-card { position: relative; padding: 14px 48px 14px 16px; margin-bottom: 10px; border-radius: var(--r-md); box-shadow: var(--e1); transition: transform .12s var(--ease), box-shadow .12s var(--ease), opacity .2s var(--ease); -webkit-touch-callout: none; user-select: none; }
.pl-card.lift { transform: scale(1.02); box-shadow: var(--e2); }
.pl-card.gone { opacity: 0; transform: scaleY(.6); }
.pl-card .lc-main { display: flex; flex-direction: column; gap: 0; padding: 0; min-height: 0; text-decoration: none; color: var(--ink); }
.pl-card .n { font: 600 16px/22px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-card .s, .pl-card .e { font: 400 13px/18px var(--body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-card .s { margin-top: 2px; }
.pl-card .tg { display: flex; gap: 6px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.pl-card .mv { position: absolute; top: 4px; right: 2px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink-2); background: none; border: 0; }
.pill { height: 24px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; font: 600 12px/1 var(--body); white-space: nowrap; }
.pill.hot { background: var(--urgent-bg); color: var(--urgent-fg); }
.pill.warm { background: var(--k-wood-t); color: var(--k-wood); }
.pill.cold { background: var(--k-stone-t); color: var(--k-stone); }
.pill.quiet { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-3); }
.pill.fu { background: transparent; color: var(--ink-2); padding: 0 2px; }
.pill.fu.due { color: var(--ox); }
.pill svg { width: 13px; height: 13px; stroke-width: 2.1; }
.next-stage { display: flex; align-items: center; gap: 10px; width: 100%; height: 52px; padding: 0 12px 0 14px; border-radius: var(--r-md); border: 0; background: none; box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink-2); font: 600 14px/1 var(--body); margin-top: 4px; cursor: pointer; text-align: left; }
.next-stage b { color: var(--ink); font-weight: 600; }
.next-stage i { font-style: normal; }
.next-stage svg { width: 18px; height: 18px; flex: none; }
.stage-empty { padding: 26px 20px 22px; border-radius: var(--r-lg); background: var(--well); text-align: center; margin-bottom: 10px; }
.stage-empty .tile { margin: 0 auto 12px; width: 44px; height: 44px; border-radius: 13px; display: grid; }
.stage-empty .tile svg { width: 22px; height: 22px; }
.stage-empty b { display: block; font: 500 18px/24px var(--head); color: var(--ink); }
.stage-empty p { font: 400 14px/20px var(--body); color: var(--ink-2); margin: 4px auto 14px; max-width: 260px; }
.stage-empty .btn { width: auto; display: inline-flex; gap: 6px; }
.st-clear { margin-top: 8px; min-height: 44px; background: none; border: 0; color: var(--cedar); font: 600 14px/20px var(--body); cursor: pointer; }
@media (min-width: 640px) and (max-width: 1023px) { .pl-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pl-cards .pl-card { margin-bottom: 0; } .pl-cards > .card + .card { margin-top: 0; } .pl-cards + .next-stage { margin-top: 14px; } }
@media (min-width: 1024px) { .board { scroll-padding-inline: var(--pad); } }
/* the Filters sheet (B6) */
.flt-group { margin-top: 16px; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.frow { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 14px; position: relative; }
.frow + .frow::before { content: ''; position: absolute; top: 0; left: 62px; right: 0; height: 1px; background: var(--line); }
.frow .tile { width: 36px; height: 36px; border-radius: 11px; }
.frow .tile svg { width: 18px; height: 18px; }
.frow .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.frow .tx b { font: 600 15px/20px var(--body); } .frow .tx span { font: 400 13px/18px var(--body); color: var(--ink-2); }
.frow .cnt { font: 600 13px/1 var(--body); font-style: normal; color: var(--ink-2); }
.sw { width: 51px; height: 31px; border-radius: 999px; border: 0; background: var(--well); position: relative; flex: none; cursor: pointer; padding: 0; }
.sw i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--card); box-shadow: var(--e1); transition: left .16s var(--ease); }
.sw.on { background: var(--cedar); } .sw.on i { left: 22px; background: var(--on-cedar); }
/* B7: the phone pipeline skeleton */
.sk-stages { display: flex; gap: 6px; margin-top: 18px; }
.sk-stages .sk-pill { width: 92px; height: 36px; border-radius: 999px; flex: none; }
.sk-sthead { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; }
.sk-sthead .tile { width: 36px; height: 36px; border-radius: 11px; opacity: .55; }
.sk-lcard.sk-full { margin-top: 10px; padding: 14px 16px; }

/* ───────────── update 18 (part 1): Marketing & PR — tokens only; oxblood only for what needs Chavie (overdue, confidential) ───────────── */
.tile.mk-ptile { width: 22px; height: 22px; border-radius: var(--r-xs); }
.tile.mk-ptile svg { width: 13px; height: 13px; }
.mk-card { display: block; text-decoration: none; color: inherit; margin-top: 12px; }
.mk-card-top { display: flex; align-items: center; gap: 12px; }
.mk-card-top .tile { width: 40px; height: 40px; }
.mk-card-t { display: block; font: 500 18px/24px var(--head); }
.mk-card-s { display: block; font: 400 13px/18px var(--body); color: var(--ink-2); }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mk-chip { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 9px; border-radius: var(--r-sm); background: var(--sunk); font: 600 13px/1 var(--body); color: var(--ink); }
.mk-chip svg { width: 14px; height: 14px; }
.mk-chip.ox { background: var(--urgent-bg); color: var(--urgent-fg); }
.mk-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--cedar); color: var(--on-cedar); display: inline-grid; place-items: center; font: 700 12px/1 var(--body); }
.mk-menu { margin-bottom: 12px; }
.mk-menu .rw { background: var(--sunk); border-radius: var(--r-lg); }
.mk-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 2px 0 6px; }
.mk-head .title { margin: 0; }
.mk-head-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-head-acts .seg { min-width: 200px; }
.mk-hero { grid-template-columns: repeat(4, 1fr); padding: 18px 2px 16px; }
.mk-hero .ring .l { font-size: 13px; }
.mk-rl { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mk-hero .ring .s { font-size: 12px; }
.mk-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 0; }
.mk-q { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 84px; padding: 10px 6px; border-radius: var(--r-md); background: var(--card); box-shadow: var(--e1); text-decoration: none; color: var(--ink); font: 600 13px/16px var(--body); min-width: 0; text-align: center; }
.mk-q .tile { width: 36px; height: 36px; border-radius: 11px; }
.mk-q-l { max-width: 100%; overflow-wrap: anywhere; }
.rw .t > span.a, .rw .t > span.b { display: block; }
.mk-cgrid > *, .mk-rv > *, .mk-home > *, .mk-ideas > *, .mk-editor > * { min-width: 0; }
.mk-parkrow { display: flex; justify-content: flex-end; }
.mk-parkrow .see svg { width: 15px; height: 15px; margin-right: 4px; }
.mk-next { display: block; text-decoration: none; color: inherit; margin-top: 12px; }
.mk-next-top { display: flex; align-items: flex-start; gap: 12px; }
.mk-next-top b { display: block; font: 500 18px/24px var(--head); }
.mk-next-top .meta { display: block; }
.mk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 6px; }
.mk-steps i { height: 4px; border-radius: 999px; background: var(--track); }
.mk-steps i.done { background: var(--olive-ring); } .mk-steps i.on { background: var(--cedar); }
.mk-steps-l { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font: 400 12px/16px var(--body); color: var(--ink-2); }
.mk-steps-l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-cardh { display: flex; align-items: center; gap: 10px; font: 500 18px/24px var(--head); padding: 14px 16px 6px; }
.card:not(.flush) > .mk-cardh { padding: 0 0 10px; }
.mk-ideas-link { display: block; padding: 0; margin-top: 12px; text-decoration: none; }
.mk-last { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mk-last-c { display: flex; gap: 10px; align-items: flex-start; padding: 12px; margin: 0 !important; min-width: 0; }
.mk-last-c b { display: block; font: 600 13px/18px var(--body); }
.mk-last-c .meta { display: block; }
.mk-last-c .grow { min-width: 0; }
.mk-day { display: flex; align-items: center; gap: 10px; font: 600 13px/18px var(--body); color: var(--ink-2); margin: 20px 4px 8px; }
.mk-day::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.mk-day.ox { color: var(--ox); }
.mk-thumb { display: block; width: 100%; border-radius: var(--r-sm); overflow: hidden; background: var(--sunk); position: relative; flex: none; color: var(--ink-3); }
.mk-thumb > svg { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; }
.mk-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mk-thumb.sm { width: 48px; }
.mk-thumb.xs { width: 40px; }
.mk-thumb.xs .mk-film, .mk-thumb.sm .mk-film { right: 3px; bottom: 3px; }
.mk-thumb.xs .mk-film svg, .mk-thumb.sm .mk-film svg { width: 12px; height: 12px; }
.mk-kit-copy { display: grid; gap: inherit; }
.mk-cap.in-sheet .mk-cap-h > .h2 { display: none; }
.mk-cap.in-sheet .mk-cap-h .seg { flex: 1; }
.mk-film { position: absolute; right: 6px; bottom: 6px; color: var(--white); filter: drop-shadow(0 1px 2px var(--mkt-ov)); }
.mk-film svg { width: 16px; height: 16px; }
.mk-meta { display: flex !important; align-items: center; gap: 6px; min-width: 0; }
.mk-ell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.mk-conf { background: var(--urgent-bg); color: var(--urgent-fg); }
.chip.mk-out { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); color: var(--ink); }
.chip.mk-hidden { background: var(--k-stone-t); color: var(--k-stone); }
.chip.mk-flag { background: var(--k-sand-t); color: var(--k-sand); }
.chip.k-earth-chip { background: var(--k-earth-t); color: var(--k-earth); }
.chip.sel { box-shadow: inset 0 0 0 1.5px var(--cedar); background: var(--card); color: var(--ink); }
.row2 { display: flex; gap: 10px; margin-top: 12px; }
.row2 > .btn { flex: 1; }
/* Approve the week */
.mk-brow { cursor: pointer; }
.mk-brow.off .t .a { color: var(--ink-2); }
.mk-cb { width: 24px; height: 24px; accent-color: var(--cedar); flex: none; margin: 0; }
.mk-batchbar { position: sticky; bottom: calc(var(--nav-h) + 8px); margin-top: 18px; background: var(--card); border-radius: var(--r-xl); box-shadow: var(--e3); padding: 14px 16px; z-index: 5; }
.mk-bb-t { font: 500 18px/24px var(--head); margin: 0; }
.mk-batchbar .meta { margin: 2px 0 0; }
/* the grid */
.mk-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.mk-note { display: flex; gap: 10px; align-items: flex-start; font: 400 13px/18px var(--body); color: var(--ink-2); margin: 0 0 12px; }
.mk-gridwrap { display: grid; gap: 16px; }
.mk-profile { padding: 14px 10px; user-select: none; -webkit-user-select: none; }
.mk-prof-h { display: flex; align-items: center; gap: 12px; padding: 0 6px 10px; }
.mk-prof-h img { width: 44px; height: 44px; border-radius: 50%; }
.mk-prof-h b { display: block; font: 600 15px/20px var(--body); }
.mk-gweek-h { display: flex; align-items: center; gap: 8px; font: 600 13px/18px var(--body); color: var(--ink-2); margin: 12px 6px 6px; }
.mk-gweek-h::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.mk-gempty { margin: 6px; }
.mk-tile { position: relative; overflow: hidden; background: var(--sunk); cursor: grab; touch-action: pan-y; }
.mk-tile img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mk-tile.s-check, .mk-tile.s-owner, .mk-tile.s-draft, .mk-tile.s-changes { box-shadow: inset 0 0 0 3px var(--k-stone-t); }
.mk-tile.s-approved { box-shadow: inset 0 0 0 2px var(--ink-2); }
.mk-tile.moved { box-shadow: inset 0 0 0 3px var(--k-wood-t); }
.mk-tile.sel { box-shadow: inset 0 0 0 3px var(--cedar); }
.mk-tile.over { outline: 3px dashed var(--cedar); outline-offset: -6px; }
.mk-tile.lifted { opacity: .5; }
.mk-tile.s-posted { cursor: default; }
.mk-tile-title { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; font: 400 15px/20px var(--head); color: var(--ink); }
.mk-tag { position: absolute; left: 6px; top: 6px; display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 7px; border-radius: var(--r-xs); background: var(--card); color: var(--ink); font: 600 12px/1 var(--body); }
.mk-tag svg { width: 13px; height: 13px; }
.mk-tag.posted { background: var(--olive-t); color: var(--olive); }
.mk-tag.moved, .chip.mk-movedc { background: var(--k-wood-t); color: var(--k-wood); }
.mk-handle { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: var(--r-xs); background: var(--card); display: grid; place-items: center; color: var(--ink-2); }
.mk-handle svg { width: 14px; height: 14px; transform: rotate(90deg); }
.mk-lock { position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: var(--r-xs); background: var(--urgent-bg); color: var(--urgent-fg); display: grid; place-items: center; }
.mk-lock svg { width: 13px; height: 13px; }
.mk-dragtoast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 14px); z-index: 60; background: var(--ink); color: var(--bg); border-radius: var(--r-md); padding: 10px 16px; font: 600 13px/18px var(--body); }
.mk-dragcard, .mk-lockcard { display: flex; gap: 12px; align-items: flex-start; }
.mk-dragcard b { display: block; } .mk-dragcard .meta { display: block; }
.mk-sel { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; }
.mk-sel b { display: block; font: 600 15px/20px var(--body); }
.mk-sel .meta { display: block; }
/* queue + post kit */
.mk-qrow { gap: 10px; }
.mk-qhit { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; min-width: 0; }
.mk-qrow > .mk-qhit:first-child { flex: none; }
.mk-qrow.done .t .a { color: var(--ink-2); }
.mk-kit-prev { width: 120px; margin: 4px auto 14px; }
.mk-kit-acts { display: grid; gap: 10px; }
.mk-prog { display: block; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.mk-prog i { display: block; height: 100%; background: var(--cedar); transition: width .2s ease; }
.mk-recorded { display: flex; gap: 10px; align-items: center; background: var(--sunk); border-radius: var(--r-md); padding: 12px 14px; }
.mk-recorded b { display: block; font: 600 15px/20px var(--body); }
.mk-recorded .meta { display: block; }
/* ideas */
.mk-ideas, .mk-home, .mk-editor { display: grid; gap: 16px; margin-top: 12px; }
.mk-col { min-width: 0; }
.mk-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.mk-side .card + .card { margin-top: 0; }
.mk-idea { margin-top: 10px; }
.mk-idea-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-idea-h b { font: 600 15px/20px var(--body); }
.mk-idea-t { margin: 8px 0 0; font: 400 15px/22px var(--body); }
.mk-who { position: relative; display: inline-grid; flex: none; }
.mk-av { width: 32px; height: 32px; border-radius: 50%; background: var(--k-sand-t); color: var(--k-sand); display: grid; place-items: center; font: 600 13px/1 var(--body); }
.mk-who.agent .mk-av { background: var(--k-stone-t); color: var(--k-stone); }
.mk-who.small .mk-av { width: 24px; height: 24px; font-size: 12px; }
.mk-bot { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1px var(--line-strong); display: grid; place-items: center; color: var(--ink-2); }
.mk-bot svg { width: 11px; height: 11px; }
.mk-sortcard { display: flex; gap: 12px; align-items: center; }
.mk-sortcard b { display: block; font: 500 18px/24px var(--head); } .mk-sortcard .meta { display: block; }
.mk-foot { display: flex; gap: 6px; align-items: flex-start; margin-top: 14px; }
.mk-foot svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.mk-overlay { position: fixed; inset: 0; z-index: 55; background: var(--bg); overflow: auto; padding: max(14px, var(--safe-t)) var(--pad) 24px; }
.mk-deck-h { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.mk-deck-h b { font: 600 15px/20px var(--body); text-align: center; }
.mk-segbar { display: flex; gap: 4px; margin: 8px 0 14px; }
.mk-segbar i { flex: 1; height: 4px; border-radius: 999px; background: var(--track); }
.mk-segbar i.done { background: var(--olive-ring); } .mk-segbar i.on { background: var(--cedar); }
.mk-deck-card { padding: 20px; }
.mk-deck-t { font: 300 28px/34px var(--head); margin: 14px 0 10px; letter-spacing: -.012em; }
.mk-sortgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.mk-sortb { display: grid; gap: 6px; text-align: left; align-content: start; padding: 16px; min-height: 120px; border: 0; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1); color: var(--ink); cursor: pointer; position: relative; }
.mk-sortb .tile { width: 40px; height: 40px; }
.mk-sortb b { font: 500 18px/24px var(--head); }
.mk-sortb .kbd { position: absolute; right: 12px; top: 12px; }
.mk-park { display: grid; gap: 10px; margin-top: 14px; }
.mk-voice-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.mk-tags { margin: 6px 0 4px; }
/* campaigns */
.mk-crow { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin-top: 8px !important; }
.mk-crow b { display: block; font: 600 15px/20px var(--body); }
.mk-crow .meta { display: block; }
.mk-crow.sel { box-shadow: var(--e1), inset 0 0 0 1.5px var(--cedar); }
.mk-chead .mk-chips { margin: 4px 0 6px; }
.mk-chead .title { margin: 4px 0; }
.mk-wholine { margin: 6px 0 0; }
.mk-stages { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 16px 0 6px; }
.mk-cstage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--ink-2); font: 400 12px/16px var(--body); min-width: 0; }
.mk-cstage i { height: 6px; border-radius: 999px; background: var(--track); }
.mk-cstage span { white-space: nowrap; visibility: hidden; }
.mk-cstage.key span { visibility: visible; }
.mk-cstage:last-child { text-align: right; }
.mk-cstage:last-child span { direction: rtl; }
.mk-cstage.done i { background: var(--olive-ring); }
.mk-cstage.on i { background: var(--cedar); } .mk-cstage.on { color: var(--ink); font-weight: 600; }
.mk-cgrid { display: grid; gap: 14px; margin-top: 14px; }
.mk-tasks { padding: 14px 0 6px; }
.card.mk-tasks > .mk-cardh { padding: 0 16px 8px; }
.mk-phases { padding: 4px 16px 10px; display: grid; gap: 8px; }
.mk-ph { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 10px; align-items: center; font: 400 13px/18px var(--body); }
.mk-pbar { display: block; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.mk-pbar i { display: block; height: 100%; background: var(--cedar); }
.mk-task .tile { border: 0; cursor: pointer; }
.mk-money { margin: 4px 0 8px; font: 400 15px/22px var(--body); color: var(--ink-2); }
.mk-money b { font: 300 40px/44px var(--head); color: var(--ink); }
.mk-budgetbar { position: relative; height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; display: flex; }
.mk-budgetbar i { display: block; height: 100%; }
.mk-budgetbar .spent { background: var(--cedar); }
.mk-budgetbar .comm { background: repeating-linear-gradient(135deg, var(--mkt-hatch) 0 6px, transparent 6px 11px); }
.mk-cost { display: flex; gap: 10px; padding: 8px 0; font: 400 13px/18px var(--body); color: var(--ink); text-decoration: none; box-shadow: 0 -1px 0 var(--line); }
.mk-ws { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; font: 400 13px/18px var(--body); color: var(--ink-2); }
.mk-ws svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
/* editor */
.mk-plats .chip svg, .mk-counts .chip svg { width: 14px; height: 14px; }
.mk-plats .chip, .chips .chip { cursor: pointer; border: 0; }
.mk-mediae { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.mk-mthumb { position: relative; aspect-ratio: 4/5; border-radius: var(--r-sm); overflow: hidden; background: var(--sunk); display: grid; place-items: center; border: 0; color: var(--ink-2); }
.mk-mthumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.mk-mthumb.add { cursor: pointer; align-content: center; gap: 4px; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.mk-mthumb.add svg { width: 24px; height: 24px; }
.mk-mthumb.up { align-content: center; gap: 6px; padding: 10px; }
.mk-mthumb.up .mk-prog { width: 100%; }
.mk-x { position: absolute; right: 4px; top: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--card); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.mk-x svg { width: 15px; height: 15px; }
.mk-capedit { min-height: 160px; }
.mk-counts { display: flex; gap: 6px; margin: 6px 0; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.mk-counts::-webkit-scrollbar { display: none; }
.mk-counts .chip { flex: none; }
.mk-cnt { font-weight: 400; color: var(--ink-2); }
.mk-counts .chip { cursor: pointer; font-variant-numeric: tabular-nums; }
.mk-savebar { position: sticky; bottom: calc(var(--nav-h) + 8px); }
/* review */
.mk-rvp-h { display: flex; align-items: flex-start; gap: 10px; }
.mk-rv-title { font: 400 28px/34px var(--head); letter-spacing: -.012em; margin: 0; }
.mk-you.quiet { background: var(--sunk); color: var(--ink-2); }
.mk-vb { display: inline-block; padding: 0 5px; border-radius: var(--r-xs); background: var(--sunk); font-weight: 600; color: var(--ink); }
.mk-you { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--cedar); color: var(--on-cedar); font: 600 13px/1 var(--body); max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-ptabs { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.mk-ptabs.scroll { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); padding: 2px var(--pad); scrollbar-width: none; }
.mk-ptabs.scroll::-webkit-scrollbar { display: none; }
.mk-ptab { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 8px; border-radius: var(--r-md); border: 0; background: var(--card); box-shadow: var(--e1); color: var(--ink); font: 600 14px/1 var(--body); cursor: pointer; }
.mk-ptab.on { box-shadow: inset 0 0 0 2px var(--cedar); }
.mk-deckp { position: relative; display: flex; justify-content: center; overflow: hidden; margin: 0 calc(-1 * var(--pad)); padding: 0 52px; touch-action: pan-y; }
.mk-deck-c { width: 100%; max-width: 300px; transition: transform .2s var(--ease); position: relative; }
.mk-peek { position: absolute; top: 24px; width: 120px; opacity: .8; }
.mk-peek .mk-thumb { border-radius: var(--r-lg); }
.mk-peek.l { left: -84px; } .mk-peek.r { right: -84px; }
.mk-conf-ov { position: absolute; z-index: 3; left: 10px; top: -10px; }
.mk-phone { border-radius: var(--r-xl); background: var(--mk-bg); padding: 6px; box-shadow: var(--e2); }
.mk-phone.big { padding: 10px; width: 300px; flex: none; }
.mk-screen { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--sunk); }
.mk-screen > img, .mk-screen > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); }
.mk-ov-top, .mk-ov-bot, .mk-ov-chips { position: absolute; left: 12px; right: 12px; color: var(--white); z-index: 2; }
.mk-ov-top { top: 12px; display: flex; justify-content: space-between; align-items: center; font: 600 18px/24px var(--body); text-shadow: 0 1px 3px var(--mkt-ov); }
.mk-ov-top svg { width: 20px; height: 20px; }
.mk-ov-chips { top: 46px; display: grid; justify-items: start; gap: 8px; }
.mk-ov-chips .btnish { justify-self: end; }
.mk-ov-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-xs); background: var(--mkt-ov); color: var(--white); font: 600 11px/1 var(--body); letter-spacing: .02em; border: 0; }
.mk-ov-chip.btnish { height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; cursor: pointer; }
.mk-snd { position: absolute; right: 10px; bottom: 10px; z-index: 2; }
.mk-ov-bot { bottom: 16px; display: grid; gap: 6px; text-shadow: 0 1px 3px var(--mkt-ov); }
.mk-handle-row { display: flex; align-items: center; gap: 8px; font: 600 13px/18px var(--body); min-width: 0; }
.mk-handle-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* QA N3: "Follow" stays whole */
.mk-handle-row img, .mk-follow { flex: none; }
.mk-handle-row img { width: 24px; height: 24px; border-radius: 50%; background: var(--white); }
.mk-follow { border: 1px solid var(--mkt-ov-hi); border-radius: var(--r-xs); padding: 0 6px; font: 600 12px/20px var(--body); }
.mk-ov-cap { font: 400 13px/18px var(--body); }
.mk-more { opacity: .75; }
.mk-ov-audio { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/16px var(--body); }
.mk-ov-audio svg { width: 13px; height: 13px; }
.mk-vprog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--mkt-ov-hi); z-index: 2; }
.mk-vprog i { display: block; height: 100%; background: var(--white); }
.mk-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.mk-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--mkt-ov-hi); cursor: pointer; }
.mk-dots button.on { background: var(--white); }
.mk-phone.feed { background: var(--card); padding: 0; overflow: hidden; }
.mk-feed-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font: 600 13px/18px var(--body); }
.mk-feed-h img { width: 28px; height: 28px; border-radius: 50%; }
.mk-feed-h svg { margin-left: auto; width: 18px; height: 18px; color: var(--ink-2); flex: none; }
.mk-feed-h b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-feed-h img { flex: none; }
.mk-phone.feed .mk-screen { border-radius: 0; }
.mk-feed-cap { padding: 10px 12px 14px; font: 400 13px/18px var(--body); }
.mk-strip-w { margin: 12px 0 0; }
.mk-strip { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; border-radius: var(--r-sm); overflow: hidden; }
.mk-fr { position: relative; aspect-ratio: 3/4; border: 0; padding: 0; background: var(--sunk); cursor: pointer; overflow: hidden; }
.mk-fr img { width: 100%; height: 100%; object-fit: cover; }
.mk-fr-sk { position: absolute; inset: 0; background: var(--skel); }
.mk-fr.cover { box-shadow: inset 0 0 0 2px var(--cedar); }
.mk-cover-t { position: absolute; left: 50%; top: 3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--cedar); box-shadow: 0 0 0 1.5px var(--card); }
.mk-strip-l { display: flex; gap: 10px; align-items: center; margin-top: 6px; font: 400 12px/16px var(--body); color: var(--ink-2); }
.mk-strip-l .grow { text-align: center; }
.mk-crops { display: flex; gap: 10px; align-items: flex-end; overflow-x: auto; padding-bottom: 4px; }
.mk-crop { flex: 1 0 72px; max-width: 110px; display: grid; gap: 6px; }
.mk-crop-i { position: relative; display: block; border-radius: var(--r-xs); overflow: hidden; background: var(--sunk); }
.mk-crop-i img { width: 100%; height: 100%; object-fit: cover; }
.mk-safe { position: absolute; inset: 9%; border: 1px dashed var(--white); border-radius: 3px; opacity: .8; }
.mk-crop-l { display: flex; align-items: center; gap: 4px; font: 600 12px/16px var(--body); white-space: nowrap; }
.mk-crop-l svg { width: 13px; height: 13px; }
.mk-checks { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.mk-cap-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk-cap-h .seg { flex: 0 1 auto; }
.mk-cap-h .seg svg { width: 14px; height: 14px; }
.mk-captext { border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line-strong); padding: 12px 14px 10px; background: var(--card); }
.mk-captext textarea { min-height: 140px; margin-bottom: 8px; }
.mk-plain, .mk-diff { margin: 0 0 10px; white-space: pre-wrap; font: 400 15px/22px var(--body); }
.mk-del { background: var(--sunk); color: var(--ink-2); text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
.mk-add { background: var(--k-wood-t); color: var(--k-wood); border-radius: 3px; padding: 0 2px; box-shadow: inset 0 -1.5px 0 var(--cedar); }
.mk-limit { height: 4px; border-radius: 999px; background: var(--track); overflow: hidden; }
.mk-limit i { display: block; height: 100%; background: var(--cedar); } .mk-limit i.ox { background: var(--ox); }
.mk-limit-l { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.mk-legend2 { margin: 8px 0; font: 400 13px/18px var(--body); color: var(--ink-2); }
.mk-capby { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0; font: 600 13px/18px var(--body); color: var(--ink-2); }
.mk-box { background: var(--sunk); border-radius: var(--r-md); padding: 10px 12px; margin-top: 10px; }
.mk-box-h { display: flex; align-items: center; gap: 6px; font: 600 13px/18px var(--body); color: var(--ink-2); }
.mk-box-h svg { width: 15px; height: 15px; }
.mk-tagchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mk-tagc { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--card); font: 600 13px/1 var(--body); }
.mk-alt { margin: 6px 0 0; font: 400 13px/18px var(--body); }
.mk-hist { background: var(--sunk); border-radius: var(--r-md); padding: 6px 12px; margin-top: 10px; display: grid; }
.mk-h { display: flex; gap: 10px; padding: 8px 0; font: 400 13px/18px var(--body); }
.mk-h + .mk-h { box-shadow: 0 -1px 0 var(--line); }
.mk-h b { font-weight: 600; } .mk-h .meta { display: block; }
/* QA S2 / S7: review-field and Posted changes, old → new, under the entry */
.mk-hmeta { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; align-items: center; }
.mk-hmeta .chip { font-size: 12px; min-height: 24px; padding: 2px 8px; }
.mk-hmeta .meta { display: inline; }
.mk-decide { margin-top: 14px; }
.mk-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-btns .btn { width: auto; flex: 0 0 auto; padding: 0 12px; gap: 6px; min-width: 0; white-space: nowrap; }
.mk-btns .btn.solid { flex: 1 1 100px; order: 3; }
.mk-btns .btn .mk-who .mk-av { width: 22px; height: 22px; font-size: 11px; background: var(--card); }
.mk-btns .btn .mk-bot { display: none; }
.mk-decide > .meta { margin: 10px 0 0; text-wrap: balance; }
.mk-capbar { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; text-align: left; cursor: pointer; margin-top: 12px; color: var(--ink); }
.mk-capbar b { display: block; font: 600 15px/20px var(--body); } .mk-capbar .meta { display: block; }
.mk-capbar .grow { min-width: 0; }
.mk-capbar svg { width: 18px; height: 18px; transform: rotate(-90deg); color: var(--ink-2); }
.mk-capbar .tile svg { transform: none; color: inherit; }
.mk-cmp { font: 600 15px/20px var(--body); }
.mk-next3 { background: var(--sunk); border-radius: var(--r-md); padding: 6px 14px; margin: 10px 0; }
.mk-next3 p { display: flex; gap: 10px; margin: 8px 0; font: 400 13px/18px var(--body); }
.mk-next3 svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
.mk-notesheet textarea { min-height: 110px; }
.mk-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mk-flow > svg { width: 14px; height: 14px; color: var(--ink-3); }
.mk-fs { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; font: 600 13px/1 var(--body); background: var(--sunk); color: var(--ink-2); }
.mk-fs.done { background: var(--k-olive-t); color: var(--k-olive); }
.mk-fs.on { background: var(--cedar); color: var(--on-cedar); }
.mk-fs.todo { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.tab.sub .pill svg { width: 16px; height: 16px; }
@media (max-width: 1023px) {
  /* update 18 review on the phone: the card, the strip, the caption bar and the decision fit on one screen (mockup 2) */
  .mk-rvp-h .mk-rv-title { font-size: 24px; line-height: 30px; }
  .mk-rvp-h .meta { margin: 2px 0 0; }
  /* QA N1: a smaller card, so the caption bar and the first chip (Moved) sit above the sticky decision row */
  .mk-deckp .mk-deck-c { max-width: clamp(176px, calc((100dvh - 580px) * .5625 + 12px), 300px); }
  .mk-deckp .mk-handle-row { gap: 6px; font-size: 12px; } .mk-deckp .mk-handle-row img { width: 20px; height: 20px; }
  .mk-deckp .mk-follow { padding: 0 5px; font-size: 11px; line-height: 18px; }
  .mk-deckp .mk-peek { width: 96px; top: 32px; }
  .mk-deckp .mk-peek.l { left: -60px; } .mk-deckp .mk-peek.r { right: -60px; }
  .mk-rvp-foot { position: sticky; bottom: var(--nav-h); z-index: 4; margin: 10px calc(-1 * var(--pad)) 0; padding: 10px var(--pad) 8px; background: var(--bar-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 -1px 0 var(--line); }
  .mk-rvp-foot .mk-decide { margin: 0; }
  .mk-rvp-foot .mk-btns { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 6px; }
  .mk-rvp-foot .mk-btns .btn { padding: 0 10px; overflow: hidden; } /* QA N3: never past the edge at 390 */
  .mk-rvp-foot .mk-decide > .meta { margin-top: 6px; font-size: 12px; line-height: 16px; }
  .mk-home .mk-side, .mk-rv-mid { display: none; }
  .mk-film-strip { display: none; }
  .mk-batchbar .row2 .btn { padding: 0 10px; }
}
@media (min-width: 1024px) {
  .tab.on.ph-on { background: transparent; box-shadow: none; color: var(--ink-2); }
  .tab.sub { padding-left: 14px; }
  .tab.sub .pill { opacity: .8; }
  .mk-home { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .mk-hero { padding: 16px 8px 14px; margin-top: 8px; }
  .mk-plan { margin-top: 16px; }
  .mk-plan-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .mk-plan-g { display: grid; grid-template-columns: 120px repeat(var(--cols), 1fr); gap: 0; }
  .mk-plan-d { text-align: center; font: 600 13px/18px var(--body); color: var(--ink-2); padding: 6px 0; }
  .mk-plan-d.today { color: var(--ink); }
  .mk-plan-p { display: flex; align-items: center; gap: 8px; font: 600 13px/18px var(--body); padding: 10px 0; box-shadow: 0 -1px 0 var(--line); }
  .mk-plan-c { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-content: center; padding: 8px 2px; min-height: 72px; box-shadow: 0 -1px 0 var(--line); }
  .mk-plan-c.today { background: var(--sunk); }
  .mk-plan-t { position: relative; width: 40px; display: block; }
  .mk-plan-t.late .mk-thumb { box-shadow: 0 0 0 2px var(--ox); }
  .mk-mark { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--olive-t); color: var(--olive); display: grid; place-items: center; }
  .mk-mark.ox { background: var(--urgent-bg); color: var(--urgent-fg); }
  .mk-mark svg { width: 11px; height: 11px; }
  .mk-last { grid-template-columns: repeat(4, 1fr); }
  .mk-gridwrap { grid-template-columns: minmax(0, 480px) minmax(0, 520px); align-items: start; }
  .mk-ideas { grid-template-columns: minmax(0, 1fr) 520px; align-items: start; }
  .mk-editor { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .mk-csplit { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 12px; }
  .mk-cgrid { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .mk-batchbar { bottom: 16px; }
  .mk-savebar { bottom: 16px; }
  .mk-quick { display: none; }
  .mk-rv-top { display: flex; align-items: center; gap: 12px; margin: -12px 0 12px; flex-wrap: wrap; }
  .mk-rv-top .mk-rv-week { margin: 0 0 0 -4px; white-space: nowrap; }
  .mk-rv { display: grid; grid-template-columns: minmax(0, 1fr) clamp(400px, 33vw, 480px); gap: 20px; align-items: start; }
  .mk-cstage span { visibility: visible; overflow: hidden; text-overflow: ellipsis; }
  .mk-cstage:last-child span { direction: ltr; }
  .mk-rv-titlerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .mk-post-t { font: 400 24px/30px var(--head); margin: 0; }
  .mk-rv-cols { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
  .mk-phone.big { width: 240px; }
  .mk-rv-mid .card { overflow: hidden; }
  .mk-rv-mid { display: grid; gap: 12px; min-width: 0; }
  .mk-rv-mid .card + .card { margin-top: 0; }
  .mk-rv-panel .mk-decide { position: sticky; bottom: -16px; background: var(--card); margin: 14px -16px -16px; padding: 12px 16px 14px; box-shadow: 0 -1px 0 var(--line); }
  .mk-rv-panel { position: sticky; top: 76px; max-height: calc(100vh - 262px); overflow: auto; overscroll-behavior: contain; }
  .mk-film-strip { position: sticky; bottom: 0; margin: 18px -40px -64px; padding: 12px 40px; background: var(--bar-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 -1px 0 var(--line); display: flex; align-items: center; gap: 18px; z-index: 6; }
  .mk-fs-l b { display: block; font: 500 18px/24px var(--head); } .mk-fs-l .meta { display: block; }
  .mk-fs-items { display: flex; gap: 8px; overflow-x: auto; flex: 1; min-width: 0; }
  .mk-fs-i { position: relative; width: 52px; flex: none; border: 0; padding: 0; background: none; cursor: pointer; display: grid; gap: 4px; text-align: center; }
  .mk-fs-i.on .mk-thumb { box-shadow: 0 0 0 2px var(--cedar); }
  .mk-fs-t { position: relative; display: block; }
  .mk-fs-p { position: absolute; left: 3px; top: 3px; }
  .mk-fs-t .mk-lock { right: auto; left: 3px; bottom: 3px; width: 18px; height: 18px; }
  .mk-fs-t .mk-lock svg { width: 11px; height: 11px; }
  .mk-fs-t .mk-film { right: 3px; bottom: 3px; }
  .mk-fs-t .mk-film svg { width: 13px; height: 13px; }
  .mk-mv { position: absolute; right: 3px; top: 3px; width: 18px; height: 18px; border-radius: var(--r-xs); background: var(--k-wood-t); color: var(--k-wood); display: grid; place-items: center; }
  .mk-mv svg { width: 11px; height: 11px; }
  .mk-keys { flex: none; display: flex; align-items: center; gap: 4px; }
  .mk-keys .kbd-key { font: 600 11px/1 var(--body); color: var(--ink-2); background: var(--sunk); border-radius: 5px; padding: 4px 6px; }
  .mk-overlay { display: none; }
}
.mk-general { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin: 14px 0 4px; }
.mk-general b { display: block; font: 600 15px/20px var(--body); } .mk-general .meta { display: block; }
.mk-general .grow { min-width: 0; }

/* ───── Update 18 (part 2): the creative studio ───── */
/* agents: Claude is an olive asterisk ("C" is Chavie); Theo keeps the stone "T" with the bot badge */
.mk-who.claude .mk-av { background: var(--k-olive-t); color: var(--k-olive); }
.mk-who .mk-av svg { width: 60%; height: 60%; stroke-width: 2.4; }
.mk-readby { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/20px var(--body); color: var(--ink-2); min-width: 0; }
.mk-pair { display: inline-flex; flex: none; }
.mk-pair > .mk-who + .mk-who { margin-left: -6px; }
.mk-pair .mk-av { box-shadow: 0 0 0 2px var(--bg); }
.chip.mk-claudechip { background: var(--k-olive-t); color: var(--k-olive); }
.chip.mk-claudechip svg { stroke-width: 2.4; }
.chip.wood { background: var(--k-wood-t); color: var(--k-wood); }
/* the VIDEO · real HVS footage chip stays on one line (QA, part 1) */
.mk-ov-chip { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* ideas + research */
.mk-fromrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 2px; }
.mk-fromrow .chip { cursor: pointer; }
.mk-right { text-align: right; }
.mk-idea.claude { box-shadow: var(--e1); }
.mk-idea-title { margin: 10px 0 0; font: 500 18px/24px var(--head); }
.mk-idea-t.sub { margin-top: 4px; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-why { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font: 400 13px/18px var(--body); color: var(--ink-2); }
.mk-why svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--k-olive); }
.mk-built { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 8px 12px; border: 0; border-radius: var(--r-sm); background: var(--sunk); color: var(--ink);
  font: 600 13px/18px var(--body); text-align: left; cursor: pointer; min-height: 40px; }
.mk-built svg { width: 15px; height: 15px; flex: none; color: var(--ink-2); }
.mk-built .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-deck-title { display: block; margin-top: 10px; font: 500 18px/24px var(--head); }
.mk-rslist .mk-rsline { display: block; width: 100%; padding: 6px 0; border: 0; background: none; color: var(--ink); font: 400 14px/20px var(--body); text-align: left; cursor: pointer; }
.mk-rsnote .mk-rs-h { display: flex; gap: 12px; align-items: center; }
.mk-rsnote .mk-rs-h b { display: block; font: 500 20px/26px var(--head); }
.mk-rsnote .mk-rs-h .meta { display: block; margin: 0; }
.mk-rsnote .mk-readby { margin: 10px 0 0; font-size: 13px; }
.mk-rs-body { margin: 12px 0 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--sunk); font: 400 15px/22px var(--body); }
.mk-rs-src { display: grid; gap: 2px; margin-top: 12px; font: 400 14px/20px var(--body); }
.mk-rs-src .meta { display: inline-flex; gap: 6px; align-items: center; margin: 0; } .mk-rs-src svg { width: 14px; height: 14px; }
.mk-rs-used { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.mk-rs-used .meta { margin: 0; }
.mk-usedrow { display: flex; gap: 8px; align-items: center; font: 400 14px/20px var(--body); }
.mk-why.claude svg { color: var(--k-olive); }
.mk-rsrows .mk-rsrow { border: 0; background: none; text-align: left; cursor: pointer; font: inherit; }
.mk-rsrow .t .b.dark { color: var(--ink); }
.mk-rsrow.sel { background: var(--sunk); }
/* Ask Claude + its answers */
.mk-askbtn { gap: 6px; margin: 0; }
.mk-askbtn svg, .see svg { width: 15px; height: 15px; }
.mk-askhead { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.mk-askhead .meta { margin: 0; }
.mk-asks .mk-ask + .mk-ask { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.mk-asks .mk-cardh { font-size: 16px; }
.mk-answer { margin: 6px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--k-olive-t); color: var(--ink); font: 400 14px/20px var(--body); white-space: pre-wrap; }
.mk-waiting { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font: 600 13px/18px var(--body); color: var(--ink-2); }
.mk-waiting svg { width: 15px; height: 15px; }
.mk-rv-panel .mk-asks { margin-top: 12px; box-shadow: none; background: var(--sunk); }
/* Marketing settings: the agents */
.mk-agent { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.mk-agent .grow { min-width: 180px; }
.mk-agent b { display: block; font: 600 15px/20px var(--body); }
.mk-agent .meta { display: block; margin: 2px 0 0; }
.mk-agent-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.mk-agent-acts .btn { margin: 0; }
.btn.ox-t { color: var(--ox); }
.mk-copyrow { display: flex; gap: 8px; align-items: center; }
.mk-copyrow code { flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sunk); font: 500 13px/18px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; user-select: all; }
.mk-copyrow .btn { margin: 0; }
.mk-agent-acts .see { align-self: center; }
.mk-olist { margin: 12px 0 8px; padding-left: 20px; font: 400 14px/20px var(--body); color: var(--ink); }
.mk-olist li + li { margin-top: 6px; }
.mk-sugg .row2 { margin-top: 10px; }
/* review: one note box → everyone involved, the split, the rule */
.mk-towho { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; }
.mk-towho .meta { margin: 0; }
.mk-reasons { margin: 6px 0 12px; }
.mk-split { margin-top: 12px; padding: 12px; border-radius: var(--r-md); background: var(--sunk); display: grid; gap: 8px; }
.mk-split > .meta { margin: 2px 0 0; }
.mk-splitl { display: flex; gap: 10px; align-items: flex-start; font: 400 14px/20px var(--body); }
.mk-splitl .grow { min-width: 0; }
.mk-splitt { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: text; text-decoration: underline dotted var(--line-strong); text-underline-offset: 3px; }
.mk-splitin { display: block; width: 100%; min-height: 60px; margin-top: 4px; }
.mk-rulebox { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.mk-rulebox.on { box-shadow: inset 0 0 0 1.5px var(--cedar); }
.mk-rule-top { display: flex; gap: 12px; align-items: center; }
.mk-rule-top b { display: block; font: 600 15px/20px var(--body); }
.mk-rule-top .meta { display: block; margin: 2px 0 0; }
.mk-rule-edit { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); background: var(--card); }
.mk-rule-eh { display: flex; gap: 8px; align-items: center; font: 400 13px/18px var(--body); color: var(--ink-2); }
.mk-rule-eh svg { width: 15px; height: 15px; }
.mk-rule-eh select { width: auto; min-height: 32px; padding: 0 8px; border: 0; background: transparent; font: 600 13px/18px var(--body); color: var(--ink-2); }
.mk-rule-edit textarea { border: 0; padding: 6px 0 0; min-height: 56px; background: transparent; box-shadow: none; font: 400 15px/22px var(--body); }
.mk-rulebox > .meta { margin: 10px 0 0; }
.mk-ruleflags { display: grid; gap: 8px; margin: 12px 0 0; }
.mk-rv-panel .mk-ruleflags { margin: 0 0 12px; }
.mk-ruleflag { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--k-sand-t); color: var(--ink); font: 400 14px/20px var(--body); }
.mk-ruleflag > svg { width: 20px; height: 20px; flex: none; color: var(--k-sand); margin-top: 1px; }
.mk-ruleflag b { color: var(--k-sand); font-weight: 600; }
.mk-ruleflag .meta { display: block; margin: 4px 0 0; }
.mk-rf-acts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.mk-rf-acts a, .mk-rf-acts button { padding: 0; border: 0; background: none; color: var(--ink); font: 600 13px/24px var(--body); text-decoration: none; cursor: pointer; }
.mk-capwait { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.mk-capwait b { display: block; font: 600 15px/20px var(--body); } .mk-capwait .meta { display: block; margin: 2px 0 0; }
.mk-whybox { background: var(--sunk); }
.mk-credits { flex-wrap: wrap; font-weight: 400; }
.mk-credits .mk-dot { margin: 0 2px; }
.mk-notebox { margin-top: 12px; }
.mk-notebox textarea { min-height: 48px; resize: vertical; }
.mk-hsplit { display: grid; gap: 2px; margin: 4px 0 0; font: 400 13px/18px var(--body); color: var(--ink-2); }
/* Studio: the pitch board */
.mk-pitchrow { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.mk-pitchrow b { display: block; font: 600 15px/20px var(--body); } .mk-pitchrow .meta { display: block; margin: 2px 0 0; }
.mk-pitchrow .grow { min-width: 0; }
.mk-pitchrow > svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.mk-askbar { display: flex; gap: 12px; align-items: center; margin: 12px 0; font: 400 15px/22px var(--body); }
.mk-askbar .grow { min-width: 0; }
.mk-askbar .chip { flex: none; }
.mk-pitches { display: grid; gap: 16px; }
.mk-pitch { padding: 18px; margin-top: 12px; }
.mk-pitches .mk-pitch { margin-top: 0; }
.mk-pitch-h { display: flex; gap: 12px; align-items: center; }
.mk-pitch-h .grow { min-width: 0; }
.mk-pitch-h b { display: block; font: 600 16px/22px var(--body); } .mk-pitch-h .meta { display: block; margin: 2px 0 0; }
.mk-pitch-h .btn { margin: 0; }
.mk-pitch-tt { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 14px 0 8px; }
.mk-pitch-title { margin: 0; font: 300 30px/36px var(--head); letter-spacing: -.01em; }
.chip.mk-blind { background: var(--k-olive-t); color: var(--k-olive); height: auto; min-height: 26px; white-space: normal; }
.mk-pitch-idea { margin: 0 0 12px; font: 400 15px/23px var(--body); }
.mk-pitch .label { margin: 14px 0 4px; letter-spacing: .08em; }
.mk-pitch-cols { display: grid; gap: 4px 18px; }
.mk-risk { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; font: 400 14px/20px var(--body); }
.mk-risk svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ink-2); }
.mk-refs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.mk-ref { position: relative; aspect-ratio: 16/10; border-radius: var(--r-md); overflow: hidden; display: flex; align-items: flex-end; padding: 8px;
  background: linear-gradient(160deg, var(--k-sand-t), var(--k-wood-t)); }
.mk-ref.k-wood { background: linear-gradient(160deg, var(--k-wood-t), var(--k-wood)); } .mk-ref.k-sand { background: linear-gradient(160deg, var(--k-sand-t), var(--k-sand)); }
.mk-ref.k-stone { background: linear-gradient(160deg, var(--k-stone-t), var(--k-stone)); } .mk-ref.k-earth { background: linear-gradient(160deg, var(--k-earth-t), var(--k-earth)); }
.mk-ref.k-olive { background: linear-gradient(160deg, var(--k-olive-t), var(--k-olive)); }
.mk-ref-l { padding: 3px 8px; border-radius: var(--r-xs); background: var(--mkt-ov); color: var(--white); font: 600 12px/16px var(--body); max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mk-sample { margin: 6px 0 0; padding: 12px 16px; border-left: 3px solid var(--cedar); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--sunk); font: 400 15px/22px var(--body); }
.mk-crit { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--sunk); }
.mk-crit-h { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; font: 600 15px/20px var(--body); }
.mk-crit-r { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 4px 0; font: 400 14px/20px var(--body); }
.mk-crit-r .meta { margin: 0; font-weight: 600; }
.mk-pitch.waiting { text-align: left; }
.mk-pitch.waiting .mk-waiting { margin: 18px 0 6px; font-size: 15px; }
.mk-roundlist { margin-top: 18px; }
.mk-pad { padding: 14px 16px 6px; }
.mk-roundb { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.mk-roundb b { display: block; font: 600 15px/20px var(--body); }
.mk-roundb .meta { display: block; margin: 2px 0 0; }
.mk-roundb .grow { min-width: 0; }
.mk-roundb.on { background: var(--sunk); }
.mk-rnote { font-style: normal; }
.mk-studio-foot { position: sticky; bottom: calc(var(--nav-h) + var(--safe-b) + 8px); margin-top: 16px; padding: 12px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--e2); z-index: 5; }
.mk-studio-foot .row2 { margin: 0; }
.mk-another { display: flex; margin: 10px auto 0; gap: 6px; align-items: center; justify-content: center; }
.mk-segwho { display: inline-flex; gap: 8px; align-items: center; }
.mk-segwho .mk-who.small .mk-av { width: 22px; height: 22px; }
.mk-decision { margin: 12px 0; }
.mk-credits-box { display: grid; gap: 10px; margin: 12px 0; padding: 14px 16px; border-radius: var(--r-lg); background: var(--sunk); }
.mk-credits-box p, .mk-credits-box label { display: flex; gap: 10px; align-items: center; margin: 0; font: 400 14px/20px var(--body); flex-wrap: wrap; }
.mk-credits-box label input { flex: 1 1 160px; min-width: 0; }
.mk-credits-box > p > svg, .mk-credits-box > label > svg { width: 18px; height: 18px; }
.mk-combine .mk-brief-title { font: 300 24px/30px var(--head); border: 0; padding: 4px 0; background: transparent; box-shadow: none; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
/* Brand library */
.mk-libhero { margin-top: 14px; background: var(--hero-bg); box-shadow: var(--hero-edge); padding: 18px; }
.mk-libhero .label { margin: 0 0 6px; letter-spacing: .08em; }
.mk-libhero-t { margin: 0; font: 300 26px/32px var(--head); }
.mk-libhero .meta { display: block; margin: 8px 0 0; font-size: 14px; line-height: 20px; }
.mk-secs { margin-top: 16px; }
.mk-secrow { border: 0; background: none; text-align: left; cursor: pointer; font: inherit; }
.mk-secrow .t .a { font: 400 17px/22px var(--body); }
.mk-secrow .t .b { white-space: normal; }
.mk-secrow > svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.mk-secbody { margin-top: 10px; }
.mk-sech { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.mk-sech .h2 { margin: 0; font: 500 22px/28px var(--head); }
.mk-sech .meta { margin: 4px 0 0; }
.mk-sech .btn { margin: 0; flex: none; }
.mk-entries .mk-entry, .mk-entries .mk-rule { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; }
.mk-entries > * + * { border-top: 1px solid var(--line); }
.mk-entry .grow, .mk-rule .grow { min-width: 0; }
.mk-entry b, .mk-rule-t { display: block; font: 500 16px/22px var(--body); }
.mk-entry-b { display: block; margin-top: 4px; font: 400 14px/20px var(--body); color: var(--ink-2); white-space: pre-wrap; }
.mk-entry-b.q { color: var(--ink); }
.mk-entry .meta, .mk-rule .meta { display: block; margin: 4px 0 0; }
.mk-entry .meta a, .mk-rule .meta a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mk-entry-img { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.mk-entry-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mk-entry-acts .btn { margin: 0; min-height: 34px; gap: 6px; }
.mk-entry-acts .btn svg { width: 15px; height: 15px; }
.mk-rule.new { background: var(--sunk); }
.mk-newtoday { height: 22px; margin-right: 6px; font-size: 12px; }
.mk-entries.sug { box-shadow: inset 0 0 0 1.5px var(--k-sand-t), var(--e1); margin-bottom: 14px; }
.mk-charter { padding: 18px 20px; }
.mk-md-h1 { margin: 0 0 6px; font: 400 22px/28px var(--head); }
.mk-md-h2 { margin: 16px 0 4px; font: 600 15px/20px var(--body); }
.mk-md-p, .mk-md-li { margin: 4px 0; font: 400 15px/22px var(--body); }
.mk-md-li { padding-left: 16px; position: relative; } .mk-md-li::before { content: '–'; position: absolute; left: 2px; color: var(--ink-3); }
.mk-md-li.sub { padding-left: 32px; } .mk-md-li.sub::before { left: 18px; }
.mk-charter-ed { min-height: 420px; font: 400 14px/21px ui-monospace, SFMono-Regular, Menlo, monospace; }
.mk-latest .mk-work { display: flex; gap: 12px; align-items: flex-start; }
.mk-work img { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.mk-work b { display: block; font: 600 15px/20px var(--body); } .mk-work .meta { display: block; margin: 4px 0 0; }
.mk-rulechecks .t-body { margin: 0; }
@media (min-width: 1024px) {
  .mk-pitches { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; margin-top: 4px; }
  .mk-pitch-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .mk-pitch-cols .label { margin-top: 10px; }
  .mk-studio-bot { display: flex; gap: 16px; align-items: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
  .mk-rounds { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-width: 0; }
  .mk-rounds .mk-roundb { width: 260px; border: 0; border-radius: var(--r-md); background: var(--card); box-shadow: var(--e1); }
  .mk-rounds .mk-roundb.on { box-shadow: inset 0 0 0 1.5px var(--cedar), var(--e1); background: var(--card); }
  .mk-rounds .mk-roundb .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mk-studio-acts { display: flex; gap: 10px; flex: none; }
  .mk-studio-acts .btn { margin: 0; width: auto; gap: 8px; }
  /* the pitch board fits 1440×900 like mockup 8 (QA): a one-row header, tighter type and tiles, critiques and the
     Rounds / Combine bar above the fold (the bar stays pinned at the bottom while the cards scroll) */
  .mk-studio-top { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin: -12px 0 10px; }
  .mk-studio-top .mk-rv-title { margin: 0; font-size: 24px; line-height: 30px; }
  .mk-studio-top .chip { margin: 0; }
  .mk-pitches + .mk-studio-bot, .mk-decision + .mk-studio-bot { margin-top: 12px; }
  .mk-askbar { margin: 0 0 12px; padding: 10px 16px; font-size: 14px; line-height: 20px; align-items: center; }
  .mk-askbar .grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line; the whole ask is its title */
  .mk-askbar .meta { display: inline; font-size: 13px; }
  .mk-pitch-h .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mk-pitch { padding: 14px 18px 16px; }
  .mk-pitch-h b { font-size: 15px; line-height: 20px; }
  .mk-pitch-h .meta { font-size: 12px; line-height: 16px; margin-top: 1px; }
  .mk-pitch-tt { margin: 8px 0 6px; }
  .mk-pitch-title { font-size: 24px; line-height: 30px; }
  .mk-pitch-idea { margin-bottom: 4px; font-size: 14px; line-height: 20px; }
  .mk-pitch .label { margin: 8px 0 2px; font-size: 11px; line-height: 14px; }
  .mk-pitch .t-body { margin: 0; font-size: 13px; line-height: 18px; }
  .mk-pitch-cols .label { margin-top: 8px; }
  .mk-risk { margin: 2px 0; font-size: 13px; line-height: 18px; }
  .mk-risk svg { width: 14px; height: 14px; }
  .mk-refs { margin-top: 6px; gap: 6px; }
  .mk-ref { aspect-ratio: auto; height: 56px; padding: 6px; }
  .mk-ref-l { font-size: 11px; line-height: 14px; -webkit-line-clamp: 1; }
  .mk-sample { margin-top: 4px; padding: 8px 12px; font-size: 13px; line-height: 19px; }
  .mk-crit { margin-top: 10px; padding: 10px 14px; }
  .mk-crit-h { margin-bottom: 4px; font-size: 14px; line-height: 18px; }
  .mk-crit-r { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 2px 0; font-size: 13px; line-height: 18px; }
  .mk-crit-r .meta { font-size: 12px; }
  .mk-studio-bot { position: sticky; bottom: 0; z-index: 4; align-items: center; margin: 12px calc(-1 * var(--pad, 24px)) 0; padding: 8px var(--pad, 24px);
    background: var(--bar-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .mk-rounds .mk-roundb { width: 240px; padding: 6px 12px; }
  .mk-rounds .mk-roundb b { font-size: 13px; line-height: 18px; }
  .mk-rounds .mk-roundb .meta { font-size: 12px; line-height: 16px; margin: 0; }
  .mk-libtop { display: flex; align-items: center; gap: 14px; margin: -12px 0 14px; flex-wrap: wrap; }
  .mk-search { display: flex; align-items: center; gap: 8px; width: 260px; padding: 0 12px; min-height: 40px; border-radius: var(--r-md); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .mk-search svg { width: 16px; height: 16px; color: var(--ink-3); }
  .mk-search input { border: 0; background: transparent; box-shadow: none; min-height: 38px; padding: 0; }
  .mk-lib { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
  .mk-libnav { display: grid; gap: 2px; position: sticky; top: 16px; }
  .mk-libnav-i { display: flex; gap: 10px; align-items: center; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-md); background: none; color: var(--ink); font: 400 15px/20px var(--body); text-align: left; cursor: pointer; }
  .mk-libnav-i svg { width: 18px; height: 18px; color: var(--ink-2); }
  .mk-libnav-i.on { background: var(--card); box-shadow: var(--e1); font-weight: 600; }
  .mk-libnav > .meta { margin: 14px 12px 0; }
  .mk-libmain .mk-secbody { margin-top: 0; }
  .mk-lib .mk-side .mk-libhero { margin-top: 0; }
  .mk-lib .mk-side .mk-libhero-t { font-size: 22px; line-height: 28px; }
}
.mk-pair .mk-bot, .mk-segwho .mk-bot { display: none; }
.mk-pitch .label, .mk-libhero .label { text-transform: uppercase; font: 600 12px/16px var(--body); letter-spacing: .08em; color: var(--ink-2); }
.mk-askbar { align-items: flex-start; }
.mk-askbar .mk-who { margin-top: 2px; }
.mk-studio-foot { padding: 10px 10px 6px; border-radius: var(--r-lg); }
.mk-studio-foot .btn { min-height: 48px; white-space: nowrap; padding: 0 12px; gap: 6px; }
.mk-another { margin-top: 4px; min-height: 36px; }
.mk-rsd { color: var(--ink-3); }
.mk-voice-row .mic-btn { width: auto; min-width: 44px; padding: 0 14px 0 10px; gap: 6px; display: inline-flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; font: 600 14px/20px var(--body); }
.mk-notesheet .label.dark { margin: 10px 0 6px; }
.mk-notesheet .row2 > .btn:first-child { flex: 0 1 34%; }
.mk-notesheet .row2 > .btn:last-child { flex: 1 1 66%; white-space: nowrap; gap: 6px; }
.mk-cap-h.two .seg { flex: 1 0 100%; order: 3; }
.mk-built .grow { white-space: normal; overflow: visible; }
.mk-scope { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font: 400 13px/18px var(--body); color: var(--ink-2); }
.mk-scope svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.mk-rsrow .t .a, .mk-rsrow .t .b { white-space: normal; }
/* ───────────── update 18 (part 3): Instagram, read-only (mockup 12) — tokens only; one quiet bar per number with a tick for "typical"; no platform colours ───────────── */
.chip.ig-ro { background: var(--sunk); color: var(--ink-2); font-weight: 600; }
.chip.ig-ro svg { width: 14px; height: 14px; }
.ig-claude { width: 36px; height: 36px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; background: var(--k-olive-t); color: var(--k-olive); font: 400 18px/1 var(--head); }
.ig-head .mk-head-acts .seg { min-width: 220px; }
.ig-head .sub { margin: 2px 0 0; }
.ig-head > .grow { flex: 1 0 auto; } /* QA B3: the title keeps its width; the actions wrap under it */
@media (max-width: 1023px) { .ig-head .mk-head-acts { flex-basis: 100%; } }
.ig-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 12px; }
.ig-grid > * { min-width: 0; }
.ig-main, .ig-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.ig-main > .card, .ig-side > .card { margin: 0; }
@media (min-width: 1024px) { .ig-grid { grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); align-items: start; } }
.ig-err { color: var(--ink-2); margin: 6px 0 0; }
/* What's working */
.ig-work { background: var(--card); }
.ig-work-h { display: flex; gap: 12px; align-items: flex-start; }
.ig-work-h .grow { min-width: 0; }
.ig-work-h b, .ig-best-h b, .ig-set-h b { display: block; }
.ig-work .h2, .ig-best .h2, .ig-set .h2, .ig-empty .h2, .ig-post-panel .h2, .ig-best-off b { font: 500 18px/24px var(--head); color: var(--ink); }
.ig-work-h .meta, .ig-best-h .meta, .ig-set-h .meta { display: block; }
.ig-stats { display: grid; gap: 0 24px; margin-top: 10px; }
@media (min-width: 720px) { .ig-stats { grid-template-columns: 1fr 1fr; } }
.ig-stat { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--rule); }
.ig-stat b { display: block; font: 600 15px/20px var(--body); color: var(--ink); }
.ig-stat .meta { display: block; }
.ig-r { font: 300 28px/32px var(--head); color: var(--ink); }
.ig-slot { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
.ig-slot .ig-claude { width: 28px; height: 28px; font-size: 15px; }
.ig-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px; border-radius: var(--r-md); background: var(--sunk); font: 400 13px/18px var(--body); color: var(--ink); }
.ig-note .ig-claude { width: 28px; height: 28px; font-size: 15px; }
/* the bar: fill to the ratio (3.5× = full), a tick at typical */
.ig-bar { position: relative; display: block; height: 6px; border-radius: 999px; background: var(--track); margin: 8px 0 6px; }
.ig-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--ink); }
.ig-bar b { position: absolute; top: -4px; width: 2px; height: 14px; margin-left: -1px; background: var(--ink); border-radius: var(--r-xs); }
.ig-tick { display: inline-block; width: 2px; height: 12px; margin-right: 8px; vertical-align: -1px; background: var(--ink); }
.ig-tick-note { margin: 10px 2px 0; }
/* How it did */
.ig-how { display: block; }
.ig-how-ro { margin-bottom: 10px; }
.ig-how-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ig-how-h b { font: 500 18px/24px var(--head); }
.ig-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ig-tile { padding: 12px; border-radius: var(--r-md); background: var(--sunk); min-width: 0; }
.ig-tile .meta { display: block; }
.ig-num { display: block; font: 300 30px/36px var(--head); color: var(--ink); }
.ig-x { display: block; font: 400 13px/18px var(--body); color: var(--ink); }
.ig-x .meta { display: inline; }
.ig-foot { margin: 12px 2px 0; }
.ig-foot .see svg { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
/* the posts table (desktop) and list (phone) */
.ig-tr { display: grid; grid-template-columns: 52px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 64px 76px; gap: 12px; align-items: center; width: 100%; padding: 10px 14px; border: 0; border-top: 1px solid var(--rule); background: none; color: var(--ink); text-align: left; font: 400 15px/20px var(--body); cursor: pointer; }
.ig-tr.on { background: var(--sunk); }
.ig-th { cursor: default; border-top: 0; font: 400 13px/18px var(--body); color: var(--ink-2); }
.ig-pt { min-width: 0; }
.ig-pt b { display: block; font: 500 15px/20px var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-pt .meta { display: block; }
.ig-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ig-mini { flex: 1; min-width: 0; max-width: 72px; }
.ig-mini .ig-bar { margin: 0 0 2px; height: 4px; }
.ig-mini .ig-bar b { height: 10px; top: -3px; }
.ig-mini .meta { display: block; font-size: 11px; }
.ig-thumb { width: 52px; height: 52px; aspect-ratio: auto; border-radius: var(--r-sm); }
.ig-thumb.xs { width: 44px; height: 52px; }
.ig-table .ig-tick-note { padding: 4px 14px 14px; }
.ig-lrow { width: 100%; border: 0; background: none; text-align: left; color: inherit; font: inherit; }
.ig-lrow .t { min-width: 0; }
.ig-lrow .b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-post-panel .ig-pp-h { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--rule); }
.ig-post-panel .ig-pp-h .ig-thumb { width: 64px; height: 72px; }
.ig-post-panel .ig-pp-h b, .ig-post-panel .ig-pp-h .meta { display: block; }
.ig-sheet .ig-how { margin-bottom: 14px; }
/* best times */
.ig-best { display: block; }
.ig-best-h { display: flex; gap: 12px; align-items: flex-start; }
.ig-best-h .grow { min-width: 0; }
.ig-best-off { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.ig-best-off .grow { min-width: 0; } .ig-best-off b, .ig-best-off .meta { display: block; }
.ig-slots { list-style: none; margin: 12px 0 0; padding: 0; }
.ig-slot-r { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); }
.ig-when b { display: block; font: 600 15px/20px var(--body); color: var(--ink); }
.ig-when span { display: block; font: 500 18px/24px var(--head); color: var(--ink); white-space: nowrap; }
.ig-best-ro { margin-top: 10px; }
.mk-home .ig-best, .mk-side .ig-best { margin-top: 12px; }
.ig-suggest { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font: 600 12px/16px var(--body); color: var(--ink-2); min-width: 0; }
.ig-suggest svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.ig-suggest .mk-ell { white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* QA S5: the why is the point: it wraps */
/* comments, empty state, settings */
.ig-cm { display: grid; gap: 2px; margin: 0; padding: 10px 16px; border-top: 1px solid var(--rule); font: 400 13px/18px var(--body); color: var(--ink); }
.ig-cm .chip { justify-self: start; }
.ig-comments > .meta { padding: 0 16px 14px; }
.ig-empty { display: grid; justify-items: start; gap: 10px; margin-top: 16px; }
.ig-empty .h2 { display: block; }
.ig-set { display: grid; gap: 10px; }
.ig-set-h { display: flex; gap: 12px; align-items: flex-start; }
.ig-set .row2 { margin-top: 4px; }
.ig-set .chip.ig-ro { justify-self: start; }
.mk-quick > .mk-q[data-q="/marketing/new"]:nth-child(7):last-child { grid-column: 1 / -1; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; } /* part 3: 7 tiles → "New post" takes the last row */

/* ───── Chavie's answers (Nov 8): Not posted yet, the agent renewal reminder, "Ask Claude to review" — tokens only ───── */
.mk-notposted { display: grid; gap: 2px; }
.mk-notposted.in-card { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
.mk-np-card { margin-top: 12px; }
.mk-np-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 4px; }
/* Follow-ups (Nov 8) #2: "Not posted yet" is Gracyn's to do, not Chavie's, so it's cedar (oxblood = needs Chavie) */
.mk-np-h svg { width: 16px; height: 16px; color: var(--cedar); flex: none; }
.mk-np-h b { font: 600 15px/20px var(--body); color: var(--cedar); }
.mk-np-h .meta { margin: 0; }
.mk-np-r { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 0; color: var(--ink); text-decoration: none; font: 400 15px/20px var(--body); min-width: 0; }
.mk-np-r + .mk-np-r { border-top: 1px solid var(--rule); }
.mk-np-late { flex: none; font: 600 13px/18px var(--body); color: var(--cedar); background: var(--cedar-t); border-radius: 999px; padding: 2px 10px; }
.mk-renew { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.mk-renew .grow { flex: 1 1 200px; }
.mk-renew .grow { min-width: 0; } .mk-renew b, .mk-renew .meta { display: block; }
.mk-renew b { font: 600 15px/20px var(--body); } .mk-renew .meta { margin: 2px 0 0; }
.mk-renew .btn { margin: 0; flex: none; }
.mk-review .mk-askbtn { margin-top: 4px; }
.mk-review > .meta { margin: 8px 0 0; }

/* ── Nov 8 fixes ── */
/* #1 "I need from you": the confirmation after sending (stays on the form's screen) */
.need-sent-card { margin-top: 18px; padding: 22px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.need-sent-card .tile { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 6px; }
.need-sent-card .tile svg { width: 24px; height: 24px; }
.need-sent-card .t-meta { overflow-wrap: anywhere; }
.need-sent-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.need-sent-acts .btn { width: 100%; justify-content: center; }
/* #2 the stage set by hand: a footer on the stage card, and the sheet (five stages + Automatic, a note, the history) */
.stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); min-height: 44px; }
.stage-foot .t-meta { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.stage-foot .t-meta svg { width: 14px; height: 14px; flex: none; color: var(--cedar); }
.stage-foot .btn { flex: none; }
.stage-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stage-pick { min-height: 56px; border: 0; border-radius: var(--r-md); background: var(--sunk); color: var(--ink); text-align: left; padding: 9px 12px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 2px; font: inherit; }
.stage-pick b { font: 600 15px/20px var(--body); display: inline-flex; align-items: center; gap: 8px; }
.stage-pick .n { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 11px/1 var(--body); background: var(--card); color: var(--ink-2); flex: none; }
.stage-pick small { font: 400 12px/16px var(--body); color: var(--ink-2); }
.stage-pick[data-stage=auto] { grid-column: 1 / -1; }
.stage-pick.on { background: var(--cedar); color: var(--on-cedar); }
.stage-pick.on small { color: var(--on-cedar); opacity: .85; }
.stage-pick.on .n { background: color-mix(in srgb, var(--on-cedar) 22%, transparent); color: var(--on-cedar); }
.stage-log { list-style: none; margin: 0; padding: 0; }
.stage-log li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.stage-log li:first-child { border-top: 0; }
.stage-log b { font: 600 14px/20px var(--body); }
.stage-log .stage-note { font: 400 14px/20px var(--body); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
/* #5 Schedule (Chavie's recording): the page behind an open panel never scrolls */
html.scroll-lock, html.scroll-lock body { overflow: hidden; overscroll-behavior: none; }
/* the assign panel fits between the safe-area top and the tab bar; only its site list scrolls (inside the panel) */
.pick { display: flex; flex-direction: column; overscroll-behavior: contain;
  max-height: calc(100vh - var(--nav-h) - 16px - var(--safe-t)); max-height: calc(100dvh - var(--nav-h) - 16px - var(--safe-t)); overflow-y: auto; }
.pick > * { flex: none; }
.pick .site-find { margin-top: 12px; }
.pick .chips.site-picks { flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; margin-top: 10px; padding: 4px 2px;
  max-height: min(34dvh, 260px); flex: 0 1 auto; min-height: 100px; }
.pick .chips.site-picks .chip { max-width: 100%; height: auto; min-height: 36px; white-space: normal; text-align: left; line-height: 17px; padding-top: 7px; padding-bottom: 7px; overflow-wrap: anywhere; }
/* #5 the week grid on a phone: day columns wide enough for a short name (wrapping to two lines, never "Sh…"), names on
   up to two lines, the week scrolls sideways when it doesn't fit, with the names column kept in view and a fade on the
   side that has more */
.wk { overscroll-behavior-x: contain; }
.wk .wh, .wk .wr, .wk .wband { grid-template-columns: 88px repeat(var(--days, 6), minmax(66px, 1fr)); min-width: calc(88px + var(--days, 6) * 66px + 10px); }
.wk .wr > .nm { position: sticky; left: 0; z-index: 3; background: var(--card); align-self: stretch; padding-right: 4px; }
.wk .wh > span:first-child { position: sticky; left: 0; z-index: 3; background: var(--card); align-self: stretch; }
.nm .nm-t { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 15px; }
.wk .sbar { height: auto; min-height: 34px; white-space: normal; padding: 3px 4px; line-height: 13px; }
.wk .sbar .sl { overflow: visible; text-overflow: clip; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; text-align: center; flex: 1; min-width: 0; }
.wk .sbar.wait { padding: 1.5px 3.5px; }
.wk.more-r { -webkit-mask-image: linear-gradient(90deg, var(--ink) calc(100% - 28px), color-mix(in srgb, var(--ink) 25%, transparent)); mask-image: linear-gradient(90deg, var(--ink) calc(100% - 28px), color-mix(in srgb, var(--ink) 25%, transparent)); }
@media (max-width: 1023px) { .wk .wh, .wk .wr, .wk .wband { padding: 0 3px 0 0; } .wk .wr::before { left: 0; } }
/* Chavie's answer (Nov 8): Done / reopening is Chavie and Lindsay's; for anyone else the option shows, disabled */
.stage-pick:disabled, .choice:disabled { opacity: .45; cursor: not-allowed; }
/* ── Update 21: the Claude sales agent (lead page card, Review all sheet). Verdict chips: olive (follow up), cedar
   (maybe later), stone (let it go) — never green or red. Oxblood is not used: nothing here needs Chavie. ── */
.sa-card { margin-top: 0; }
.sa-result { margin-bottom: 14px; }
.sa-top { gap: 8px; }
.sa-reason { margin: 10px 0 0; }
.sa-line { display: flex; gap: 8px; align-items: baseline; margin: 10px 0 0; font: 400 15px/21px var(--body); color: var(--ink); }
.sa-line .label { flex: none; margin: 0; }
.sa-sum { margin: 8px 0 0; }
.sa-open { margin-top: 12px; }
.sa-draftmsg { margin: 12px 0 0; }
.sa-who { margin: 10px 0 0; }
.sa-never { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; }
.sa-never svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--ink-3); }
.card .sa-never, .sa-foot .sa-never { flex-wrap: nowrap; align-items: flex-start; gap: 0 8px; } /* QA N8: the lock doesn't touch the text */
.sa-hrow .t { min-width: 0; }
.sa-hreason { margin-top: 4px; color: var(--ink-2); font-size: 13px; }
.sa-hacts { gap: 14px; margin-top: 6px; }
.sa-hacts .link svg, .sa-item .link svg { width: 14px; height: 14px; }
.sa-key { margin-top: 0; }
button.sa-all { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; background: var(--card); box-shadow: var(--e1); }
.sa-sheet .sa-runhead { padding: 4px 0 0; }
.sa-bar { height: 6px; margin-top: 10px; border-radius: 999px; background: var(--track); overflow: hidden; }
.sa-bar span { display: block; height: 100%; border-radius: 999px; background: var(--olive-ring); transition: width .3s var(--ease); }
.sa-list { display: flex; flex-direction: column; border-radius: var(--r-md); background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.sa-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; box-shadow: 0 -1px 0 var(--line); cursor: pointer; }
.sa-item:first-child { box-shadow: none; }
.sa-item input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--cedar); flex: none; }
.sa-item.wait { opacity: .62; cursor: default; }
.sa-item .grow { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sa-ihead { gap: 8px; align-items: center; }
.sa-ihead b { font: 600 15px/20px var(--body); }
.sa-ireason { font: 400 13px/18px var(--body); color: var(--ink); }
.sa-inext { font-size: 12px; }
.sheet.sa-sheet { padding-bottom: 0; } /* QA N8: the sticky footer sits flush at the bottom: nothing shows under it */
.sa-foot { position: sticky; bottom: 0; z-index: 1; margin: 12px -4px 0; padding: 12px 4px calc(16px + var(--safe-b)); background: var(--card); box-shadow: 0 -1px 0 var(--line); }
.sa-ilink { align-self: flex-start; }
.sa-v { white-space: nowrap; }
.chip.line.sa-v { background: var(--k-stone-t); color: var(--k-stone); }
.toggle.off { cursor: default; color: var(--ink-3); }
/* ───── update 18 (part 4): Google Drive links, read privately (the editor's field, the reason, the settings note) ───── */
.mk-drive { margin: 10px 0 4px; }
.mk-drive-l { display: flex; align-items: center; gap: 6px; font: 600 13px/18px var(--body); color: var(--ink-2); margin-bottom: 6px; }
.mk-drive-l svg, .mk-drive-note > .meta svg { width: 16px; height: 16px; flex: none; color: var(--olive-ring); }
.mk-drive-row { display: flex; gap: 8px; align-items: center; }
.mk-drive-row input { flex: 1 1 auto; min-width: 0; margin: 0; }
.mk-drive-row .btn { margin: 0; flex: none; }
.mk-drive-why { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sunk); color: var(--ink); }
.mk-drive-why > svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--cedar); }
.mk-drive-why .grow { flex: 1 1 180px; min-width: 0; }
.mk-drive-why b { display: block; font: 600 14px/19px var(--body); }
.mk-drive-why .meta { display: block; margin: 2px 0 0; }
.mk-drive-why .btn { margin: 0; flex: none; align-self: center; }
.mk-drive-note > .meta { display: flex; flex-wrap: nowrap; gap: 8px; align-items: flex-start; }
.mk-drive-note > .meta > span { flex: 1 1 auto; min-width: 0; }
.mk-drive-note > .meta > span::before { content: none; }
.mk-drive-note > .meta svg { margin-top: 2px; }
.mk-fromdrive { position: absolute; left: 6px; bottom: 6px; color: var(--white); filter: drop-shadow(0 1px 2px var(--mkt-ov)); }
.mk-fromdrive svg { width: 15px; height: 15px; }
/* QA B1: Theo's Drive folders (Marketing settings) */
.mk-drive-folders { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.mk-drive-ft { display: block; font: 600 15px/20px var(--body); }
.mk-drive-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.mk-drive-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--sunk); }
.mk-drive-list li > svg { width: 18px; height: 18px; flex: none; color: var(--olive-ring); }
.mk-drive-list .grow { flex: 1 1 auto; min-width: 0; }
.mk-drive-list b { display: block; font: 600 14px/19px var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-drive-list .meta { display: block; margin: 0; }
.mk-drive-list .btn { margin: 0; flex: none; }
.mk-drive-folders .mk-drive-row { margin-top: 8px; }
/* QA R6: a whole drive listed as Theo's folder: a gentle note, not an alarm */
.mk-drive-list .mk-drive-wide { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; white-space: normal; }
.mk-drive-list .mk-drive-wide svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--cedar); }