/* Verve Planning Share — follows verve-design.md (Signal / Sales Radar language):
   white, flat, calm. No shadows, square-with-radius, Acid Grotesk + JetBrains Mono meta. */

@font-face {
  font-family: "Acid Grotesk";
  src: url("/assets/fonts/FFF-AcidGrotesk-Regular.woff2") format("woff2"),
       url("/assets/fonts/FFF-AcidGrotesk-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Acid Grotesk";
  src: url("/assets/fonts/FFF-AcidGrotesk-Medium.woff2") format("woff2"),
       url("/assets/fonts/FFF-AcidGrotesk-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --bg: #ffffff;
  --surface-alt: #f4f4f5;
  --surface-alt-strong: #ececee;
  --border: #e4e4e7;
  --text: #09090b;
  --text-muted: #52525b;
  --text-dim: #a1a1aa;
  --score-high: #46B770;
  --score-mid: #FEF254;
  --score-low: #FF316B;
  --font-body: "Acid Grotesk", Inter, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 6px;
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text);
       font-size: 14px; line-height: 1.5; }
/* Each selection gets one brand colour (partials/selection.ejs cycles them) */
::selection { background: var(--selection-bg, #8191ad); color: var(--selection-fg, #fff); }
.mono { font-family: var(--font-mono); }
.dim { color: var(--text-dim); }
.hidden { display: none !important; }
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* ── Top bar ── */
.topbar { border-bottom: 1px solid var(--border); }
.topbar-in { display: flex; align-items: center; gap: 12px; height: 56px; }
.product { font-weight: 500; font-size: 15px; color: var(--text-muted); letter-spacing: -0.01em; }
.brand { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; }
.brand .vlogo { height: 13px; width: auto; display: block; }
.topbar .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.topbar .actions form { display: inline; }
.syncwrap { display: inline-flex; align-items: center; gap: 8px; }
.synced { font-size: 10px; letter-spacing: 0.04em; }
@media (max-width: 1330px) { .pname { max-width: 300px; } }

@media (max-width: 720px) { .synced { display: none; } }

/* ── Page head ── */
.pagehead { padding: 32px 0 20px; }
.pagehead h1 { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
/* Client page title, verveagency.com card pattern: "Miro," dark, rest muted —
   sized like the site's statement headings */
.pagehead.pagehead-lg { padding: 52px 0 36px; }
.pagehead h1.ptitle { font-size: 38px; line-height: 1.15; letter-spacing: -0.02em;
                      max-width: 22ch; text-wrap: balance; }
.pagehead-lg .meta { margin-top: 12px; }
/* Stakeholder intro under the client-page title */
.intro { margin-top: 20px; max-width: 62ch; font-size: 16px; line-height: 1.65;
         color: var(--text-muted); white-space: pre-line; text-wrap: pretty; }
.ptitle .tclient { color: var(--text); }
.ptitle .tproj { color: #85858d; }
.pagehead .meta { font-size: 12.5px; color: var(--text-dim); margin-top: 6px;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.syncline { display: inline-flex; }
.syncbtn { font: inherit; font-size: 12.5px; color: var(--text-dim); background: none;
  border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  transition: color .15s ease; }
.syncbtn:hover { color: var(--text); }
.syncbtn svg { flex: none; }

/* ── Buttons ── */
.btn { font-family: var(--font-body); font-size: 13px; font-weight: 500; padding: 7px 14px;
       border: none; border-radius: var(--radius); cursor: pointer; text-decoration: none;
       display: inline-block; transition: background .15s ease; }
.btn.primary { background: var(--text); color: #fff; }
.btn.primary:hover { background: #27272a; }
.btn.small { padding: 5px 12px; font-size: 12.5px; }
.btn.ghost { background: var(--surface-alt); color: var(--text); }
.btn.ghost:hover { background: var(--surface-alt-strong); }
.btn.ghost.danger { color: #c02653; }

/* ── Panels & tables ── */
.panel { background: var(--surface-alt); border-radius: var(--radius); padding: 6px; overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
.list th, .timeline th { font-weight: 400; font-size: 12px; color: var(--text-dim);
     text-align: left; padding: 10px 12px; }
/* The panel's 6px frame sits above the header row: trim the th's own top
   padding so the space above the labels equals the 10px below them */
.panel .list th { padding-top: 4px; }
.list td, .timeline td { background: var(--bg); padding: 10px 12px; font-size: 13.5px;
     border-bottom: 1px solid var(--surface-alt); vertical-align: middle; }
.list tbody tr:first-child td:first-child, .timeline tbody tr:first-child td:first-child { border-top-left-radius: var(--radius); }
.list tbody tr:first-child td:last-child, .timeline tbody tr:first-child td:last-child { border-top-right-radius: var(--radius); }
.list tbody tr:last-child td:first-child, .timeline tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
.list tbody tr:last-child td:last-child, .timeline tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }
.list tbody tr:last-child td, .timeline tbody tr:last-child td { border-bottom: none; }
.colnum { width: 64px; font-size: 12px; white-space: nowrap; }
/* Forecast project colour as a small ball before the number */
.pdot { width: 7px; height: 7px; border-radius: 50%; display: inline-block;
        margin-right: 7px; vertical-align: middle; background: transparent; }
.pdot.green { background: var(--score-high); }
.pdot.blue { background: #4A90E2; }
.pdot.purple { background: #8E6BD0; }
.pdot.magenta { background: #D64D9A; }
.pdot.orange { background: #F0883A; }
.pdot.aqua { background: #3FC2C8; }
.pdot.red { background: var(--score-low); }
.pdot.gray { background: var(--text-dim); }
.colclient { width: 160px; max-width: 160px; }
.colclient .fade { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden;
  vertical-align: middle; }
/* Only names that actually overflow the column fade out, over the last 32px
   before the column edge (the is-cut class is set by a small overflow check) */
.colclient .fade.is-cut {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.colstatus { width: 168px; }
.colviews { width: 56px; text-align: right; font-size: 12px; }
/* width 1% + nowrap: the column shrinks to exactly the cluster's width */
.colactions { width: 1%; text-align: right; white-space: nowrap; }
.linkcell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.dot-sq { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex: none; }
/* User avatars are the one allowed circle (verve-design.md) */
.avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none;
          vertical-align: middle; }
.avatar.init { display: inline-flex; align-items: center; justify-content: center;
               background: var(--surface-alt-strong); color: var(--text-muted);
               font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; }
.namecell { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.dot-sq.on { background: var(--score-high); }
.dot-sq.off { background: var(--border); }
.dot-sq.exp { background: var(--score-low); }
.warntext { color: #c02653; }
.linkbtn { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text-muted);
  background: none; border: none; padding: 0; cursor: pointer; text-decoration: none;
  transition: color .15s ease; }
.linkbtn:hover { color: var(--text); }
/* Row actions: one cluster in its own dedicated column at the right,
   revealed on row hover (Todoist-style). The column always reserves the
   cluster's width, so the buttons never sit on top of other data. */
.hoveracts { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
             visibility: hidden; opacity: 0; transition: opacity .12s ease; }
.hoveracts form { display: inline-flex; }
.btn.mini { padding: 3px 8px; font-size: 12px; font-weight: 400;
            background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); }
.btn.mini:hover { background: var(--surface-alt); color: var(--text); }
.btn.mini.danger { color: #c02653; }
.btn.mini.danger:hover { background: #fdf0f4; color: #c02653; }
.btn.mini.primary { background: var(--text); border-color: var(--text); color: #fff; }
.btn.mini.primary:hover { background: #27272a; color: #fff; }
tr:hover .hoveracts, .hoveracts:focus-within { visibility: visible; opacity: 1; }
/* Touch devices have no hover: the actions are simply always visible */
@media (hover: none) { .hoveracts { visibility: visible; opacity: 1; } }
.pname { display: inline-block; max-width: 380px; overflow: hidden; text-overflow: ellipsis;
         white-space: nowrap; vertical-align: middle; }
.rowactions { text-align: right; white-space: nowrap; width: 110px; }
.rowactions form { display: inline; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.sortable[data-dir="asc"]::after { content: " ↑"; }
th.sortable[data-dir="desc"]::after { content: " ↓"; }

/* ── Tags ── */
.tag { display: inline-block; font-size: 11px; font-weight: 500; border-radius: 2px;
       padding: 2px 8px; color: #1a1a18; vertical-align: middle; }
.tag.on { background: var(--score-high); }
.tag.off { background: var(--score-low); }
.tag.off-muted { background: var(--surface-alt); color: var(--text-dim); }

/* ── Toolbar / search ── */
.toolbar { margin: 0 0 12px; display: flex; gap: 8px; align-items: center; }
.searchwrap { position: relative; flex: 1; display: flex; }
.clearq { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: none; background: none; color: var(--text-dim); font-size: 17px;
  line-height: 1; padding: 6px; cursor: pointer; transition: color .15s ease; }
.clearq:hover { color: var(--text); }
.toolbar input[type="search"] { flex: 1; font-family: var(--font-body); font-size: 14px;
  height: 42px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); outline: none; transition: border-color .15s ease; }
.toolbar input[type="search"]:focus { border-color: var(--text-dim); }
/* the platform's blue clear-x doesn't fit; Esc or backspace clears */
.toolbar input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Spinning counter: 0-9 reels at the meta line's own size; each column is
   exactly as wide as its active digit (set from JS), so nothing looks spaced */
/* overflow-hidden inline-blocks baseline on their bottom edge; pin the
   whole reel to the line box instead so digits sit on the text baseline */
.odo { display: inline-flex; vertical-align: top; }
.odo-col { display: inline-block; height: 1.5em; overflow: hidden; vertical-align: top;
  transition: width .6s cubic-bezier(0.2, 0, 0, 1); }
.odo-reel { display: block; transition: transform .6s cubic-bezier(0.2, 0, 0, 1); will-change: transform; }
.odo-reel span { display: block; height: 1.5em; line-height: 1.5; text-align: center; }
@media (prefers-reduced-motion: reduce) { .odo-reel, .odo-col { transition: none; } }
.btn.toggle { white-space: nowrap; height: 42px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; }
.btn.toggle.act { background: var(--text); color: #fff; }
.btn.toggle.act .dim { color: #a1a1aa; }

/* ── Avatar-group filter: who shared what (transitions.dev avatar-group-hover:
     distance-falloff lift on hover, bouncy return on leave) ── */
.avgroup { display: flex; align-items: center; padding: 0 6px; }
.avbtn { border: none; background: none; padding: 0; cursor: pointer; border-radius: 50%;
         margin-left: -7px; position: relative; }
.avbtn:first-child { margin-left: 0; }
.avbtn:focus-visible { z-index: 3; }
.avbtn .avatar { width: 28px; height: 28px; display: block; border: 2px solid var(--bg);
                 box-sizing: content-box; }
.avbtn .avatar.init { display: inline-flex; font-size: 10px; }
/* selection: dark ring on the chosen person, the rest steps back behind an
   opaque scrim (no opacity — see-through avatars break the stacking) */
.avbtn.sel .avatar { outline: 1.5px solid var(--text); outline-offset: 0; }
.avbtn::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
                background: var(--bg); opacity: 0; pointer-events: none;
                transition: opacity .2s ease; }
.avgroup.has-sel .avbtn:not(.sel)::after { opacity: .65; }
/* the transition itself: transform only, exactly as the recipe ships it;
   translateY before scale so scale doesn't amplify the lift offset */
.t-avatar { transform-origin: center;
            transform: translateY(var(--shift, 0px)) scale(var(--scale-active, 1));
            transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
            will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .t-avatar { transition: none !important; transform: none !important; }
}

/* The date input hides under the Expiry button; only its picker ever shows */
.expiry { position: relative; display: inline-flex; }
.expiry .expinput { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; border: 0; padding: 0; }

/* ── Banner ── */
.banner { background: #f5fbe1; border: 1px solid #d4ee9e; border-radius: var(--radius);
          padding: 14px 16px; margin: 0 0 16px; font-size: 13.5px; }
.copyrow { display: flex; gap: 8px; margin-top: 10px; }
.copyrow input { flex: 1; font-size: 12px; padding: 8px 10px; border: 1px solid #d4ee9e;
                 border-radius: var(--radius); background: var(--bg); }

/* ── Phase cards (client view) ── */
.cards { display: flex; flex-direction: column; gap: 28px; }
.pcard { background: var(--surface-alt); border-radius: 8px; padding: 22px 24px; }
.pcard .rowswrap { background: var(--bg); border-radius: var(--radius); overflow: hidden; margin-top: 18px; }
.pcard.closed .rowswrap { display: none; }
.pcard .phasein { padding: 2px; min-height: 22px; }
.pcard .timeline td { border-bottom: 1px solid var(--surface-alt); padding: 15px 18px; }
.pcard .timeline tbody tr:last-child td { border-bottom: none; }
.introtoggle { font-weight: 500; }

/* ── Phase headers ── */
.timeline tr.phase td { background: var(--bg); padding: 0; border-bottom: 1px solid var(--surface-alt); }
.timeline tr.phase:not(:first-child) td { border-top: 1px solid var(--border); }
.phasein { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plabel { font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.phase.up .plabel { color: var(--text-muted); }
.pmeta { margin-left: auto; font-size: 12px; color: var(--text-dim);
         display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ptoggle { font-family: var(--font-body); font-size: 12px;
           color: var(--text-dim); background: none; border: none; padding: 0; cursor: pointer;
           transition: color .15s ease; }
.ptoggle:hover { color: var(--text); }
.phasein.clickable { cursor: pointer; }
.phasein.clickable:hover .ptoggle { color: var(--text); }
/* only a COLLAPSED card is one big click target: the whole card responds */
.pcard { transition: background .15s ease; }
.pcard.closed { cursor: pointer; }
.pcard.closed:hover { background: var(--surface-alt-strong); }
/* separate rules: a browser without :has() must not drop the ones above */
.pcard:has(> .rowswrap.hidden) { cursor: pointer; }
.pcard:has(> .rowswrap.hidden):hover { background: var(--surface-alt-strong); }
.dot-sq.done { background: var(--score-high); }
.dot-sq.cur { background: var(--text); }
.dot-sq.up { background: var(--border); }

/* ── Horizontal timeline strip (phase bars + milestone dots) ── */
.tlcard { overflow: hidden; margin-bottom: 28px; }
.tl { margin-top: 16px; }
.tl-axis { position: relative; height: 20px; margin: 0 2px; }
.tl-ticklabel { position: absolute; transform: translateX(-50%); top: 0;
  font-size: 10px; color: var(--text-dim); }
/* bars live on a white panel, like the milestone blocks in the phase cards */
.tl-plot { position: relative; background: var(--bg); border-radius: var(--radius);
  padding: 18px 0; margin: 0 2px; overflow: hidden; }
.tl-grid { position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dotted var(--border); }
.tl-today { position: absolute; top: 28px; bottom: 0; width: 0;
  border-left: 1px dashed rgba(9, 9, 11, 0.35); z-index: 2; }
.tl-today i { position: absolute; top: -22px; left: 0; transform: translateX(-50%);
  font-style: normal; font-size: 10px; font-weight: 500; letter-spacing: 0.01em;
  background: var(--text); color: #fff; border-radius: 4px; padding: 2px 8px;
  white-space: nowrap; }
.tl-lane { position: relative; height: 36px; margin: 6px 0; }
.tl-bar { position: absolute; top: 0; height: 36px; border-radius: var(--radius);
  display: flex; align-items: center; padding: 0 12px; z-index: 1; overflow: hidden;
  /* the bar's width IS the duration — labels truncate, never stretch it */ }
.tl-bar.done { background: var(--surface-alt-strong); color: var(--text-dim); }
.tl-bar.cur { background: var(--text); color: #fff; }
.tl-bar.up { background: var(--surface-alt); border: 1px solid var(--border); color: var(--text); }
.tl-label { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
/* ── Client timeline ── */
.timeline .w { width: 60px; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.timeline .d { width: 120px; white-space: nowrap; color: var(--text-muted); font-size: 13px; }
.timeline .m { font-weight: 500; }
.timeline tr.past td { color: var(--text-dim); }
.timeline tr.past .m { font-weight: 400; }
.timeline tr.past.collapsed { display: none; }
.check { color: var(--score-high); margin-right: 6px; }
.phcheck { margin-right: 0; width: 9px; text-align: center; }
/* The current milestone is marked by the "Next" chip alone — no row tint,
   no heavy weight (ExtraBold is not part of this tool's typography) */
.timeline tr.current .m { font-weight: 500; }
.next-tag { display: inline-block; background: var(--text); color: #fff;
            font-size: 10px; font-weight: 500; border-radius: 3px;
            padding: 2px 7px; margin-right: 8px; vertical-align: 1.5px; }

.timeline tr.today td { padding: 0; background: var(--bg); }
.timeline tr.today span { display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); color: var(--score-low); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; }
.timeline tr.today span::before, .timeline tr.today span::after {
  content: ''; flex: 1; height: 1px; background: #ffd2df; }
.timeline tr.today.done span { color: var(--score-high); }
.timeline tr.today.done span::before, .timeline tr.today.done span::after { background: #c9e9d5; }

.collapse-toggle td { padding: 0; }
.collapse-toggle button { width: 100%; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.03em; color: var(--text-muted); background: var(--bg); border: none;
  padding: 9px 12px; cursor: pointer; text-align: left; transition: background .15s ease; }
.collapse-toggle button:hover { background: var(--surface-alt); }

/* ── Misc ── */
.empty { padding: 40px 24px; text-align: center; color: var(--text-muted); background: var(--bg);
         border-radius: var(--radius); font-size: 13.5px; line-height: 1.7; }
.foot { margin: 28px 0 56px; color: var(--text-dim); font-size: 12px; text-align: center; }
.foot-ext { margin-top: -44px; }
.foot a { color: var(--text-muted); text-underline-offset: 3px; }
.foot a:hover { color: var(--text); }
.error { color: var(--score-low); margin-top: 14px; font-size: 13.5px; }

/* ── Centered pages (login / pending / 404) ── */
.center { text-align: center; padding-top: 14vh; max-width: 440px; margin: 0 auto; }
.center .brand { justify-content: center; }
.center .brand .vlogo { height: 18px; }
.center h1 { margin: 22px 0 8px; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.center p { color: var(--text-muted); }
.center .btn { margin-top: 18px; }
.center form { margin-top: 18px; }

/* ── Intro dialog ── */
dialog { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
         width: min(560px, calc(100vw - 48px)); margin: auto; }
dialog::backdrop { background: rgba(9, 9, 11, 0.35); }
dialog h2 { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.dlg-hint { color: var(--text-dim); font-size: 12.5px; margin: 6px 0 14px; }
dialog textarea { width: 100%; font-family: var(--font-body); font-size: 14px; line-height: 1.55;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); resize: vertical; outline: none; }
dialog textarea:focus { border-color: var(--text-dim); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ── 404 easter egg: the bobbing wordmark you can flick away ── */
.egg-dot { display: block; width: max-content; margin: 0 auto 26px; color: var(--text);
  cursor: pointer; touch-action: none; user-select: none;
  animation: bob 2.8s ease-in-out infinite; }
.egg-dot .vlogo { height: 15px; width: auto; display: block; pointer-events: none; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .egg-dot { animation: none; } }

/* ── Toast ── */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: #fff; font-size: 13px; font-weight: 500;
  padding: 10px 18px; border-radius: var(--radius); z-index: 100;
  animation: toastIn .2s cubic-bezier(0.2, 0, 0, 1.1) both; }
.toast.gone { opacity: 0; transition: opacity .35s ease; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Motion & polish ── */
.fade-in { animation: pageIn .25s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.slide-in { animation: slideIn .25s cubic-bezier(0.2, 0, 0, 1.1) both; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, input:focus-visible, a:focus-visible, th.sortable:focus-visible {
  outline: 2px solid var(--text); outline-offset: 1px; }
.btn.busy { opacity: .7; pointer-events: none; }
.btn.busy::after { content: ''; display: inline-block; width: 1.1em; text-align: left;
  animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.list tbody tr { transition: background .15s ease; }
.list tbody tr:hover td { background: #fafafa; }
.timeline tr.past:not(.collapsed) { animation: rowIn .18s ease both; }
@keyframes rowIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Motion ── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── Kiosk (office screen): big type, day navigation.
     Base = mono (calm black & white); body.kio-color adds the day's
     ton-sur-ton colour plane, everything in tints of one hue. ── */
body.kio { padding: 0 48px 40px; background: var(--bg); }
.kio-top { display: flex; align-items: center; gap: 18px; padding: 30px 0 6px; }
.kio-top .brand .vlogo { height: 16px; }
.kio-weekchip { font-size: 12px; font-weight: 500; background: var(--text); color: #fff;
  border-radius: 4px; padding: 3px 10px; }
.kio-day { font-size: 16px; color: var(--text-muted); }
.kio-nav { margin-left: auto; display: flex; gap: 6px; }
.kio-nav .btn.act { background: var(--text); color: #fff; }
.kio-clock { font-size: 15px; color: var(--text-dim); min-width: 52px; text-align: right; }
.kio-h1 { font-size: 42px; font-weight: 500; letter-spacing: -0.02em; padding: 14px 0 24px; }
.kio-n { color: #85858d; }
/* cockpit: one shared card — pulse chips on top, the two stat columns
   below a divider, instead of the chips floating loose above two more
   cards of their own (kio-right's flex gap handles spacing to siblings) */
.kio-pulse { display: flex; gap: 32px; padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border); }
.kio-chip { display: flex; flex-direction: column; }
.kio-chipnum { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); }
.kio-chip.now .kio-chipnum { color: var(--score-high); }
.kio-chiplbl { font-size: 10px; font-weight: 500; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.kio-color .kio-pulse { border-color: color-mix(in srgb, var(--dayfg) 22%, transparent); }
.kio-color .kio-chipnum { color: var(--dayfg); }
.kio-color .kio-chip.now .kio-chipnum { color: var(--dayfg); }
.kio-color .kio-chiplbl { color: var(--dayfg); opacity: .75; }
/* minmax(0,…): 1fr alone won't shrink below the widest bar row, and the
   second column then slides off the edge of the screen */
.kio-statrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; min-width: 0; }
.kio-statrow > .kio-stat { min-width: 0; }
.kio-statrow > .kio-stat:last-child { border-left: 1px solid var(--border); padding-left: 28px; }
.kio-color .kio-statrow > .kio-stat:last-child { border-color: color-mix(in srgb, var(--dayfg) 22%, transparent); }
@media (max-width: 1100px) {
  .kio-statrow { grid-template-columns: minmax(0, 1fr); }
  .kio-statrow > .kio-stat:last-child { border-left: none; padding-left: 0;
    border-top: 1px solid var(--border); padding-top: 18px; margin-top: 4px; }
}
.kio-stathero { display: flex; align-items: baseline; gap: 12px; }
.kio-statpct { font-size: 34px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.kio-statpct small { font-size: 20px; color: var(--text-muted); font-weight: 400; }
.kio-statsub { font-size: 13.5px; color: var(--text-dim); }
.kio-statsub b { font-weight: 500; color: var(--text-muted); }
.kio-bars { margin-top: 12px; }
.kio-barrow { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.kio-barname { flex: none; width: 40%; min-width: 0; display: flex; flex-direction: column; }
.kio-barproj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; line-height: 1.35; color: var(--text-muted); }
.kio-barwho { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10.5px; line-height: 1.3; color: var(--text-dim); }
.kio-bartrack { flex: 1; height: 9px; border-radius: 2px; background: var(--bg); overflow: hidden; }
.kio-barfill { display: block; height: 100%; border-radius: 2px; background: var(--text); }
.kio-barfill.green { background: var(--score-high); }
.kio-barfill.blue { background: #4A90E2; }
.kio-barfill.purple { background: #8E6BD0; }
.kio-barfill.magenta { background: #D64D9A; }
.kio-barfill.orange { background: #F0883A; }
.kio-barfill.aqua { background: #3FC2C8; }
.kio-barfill.red { background: var(--score-low); }
.kio-barfill.gray { background: var(--text-dim); }
.kio-barh { flex: none; width: 44px; text-align: right; font-family: var(--font-mono);
  font-size: 11px; color: var(--text-dim); }
.kio-barmore { font-size: 12px; color: var(--text-dim); padding-top: 4px; }
.kio-color .kio-statpct, .kio-color .kio-statsub b { color: var(--dayfg); }
.kio-color .kio-statpct small, .kio-color .kio-statsub, .kio-color .kio-barproj,
.kio-color .kio-barwho, .kio-color .kio-barh, .kio-color .kio-barmore { color: var(--dayfg); opacity: .75; }
.kio-color .kio-bartrack { background: color-mix(in srgb, var(--daybg) 72%, var(--dayfg) 28%); }
.kio-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .kio-cols { grid-template-columns: 1fr; } body.kio { padding: 0 20px 30px; } }
.kio-card { background: var(--surface-alt); border-radius: 8px; padding: 22px 24px; }
.kio-card h2 { font-size: 14px; font-weight: 500; color: var(--text-muted); margin-bottom: 14px; }
.kio-empty { background: var(--bg); border-radius: var(--radius); padding: 26px;
  text-align: center; color: var(--text-dim); font-size: 15px; }
.kio-item { background: var(--bg); border-radius: var(--radius); padding: 16px 18px;
  display: flex; align-items: center; gap: 14px; }
.kio-item + .kio-item { margin-top: 8px; }
.kio-item .dot-sq { width: 10px; height: 10px; background: var(--text); }
.kio-item.done .dot-sq { background: var(--score-high); }
.kio-main { min-width: 0; }
.kio-title { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.kio-sub { font-size: 13.5px; color: var(--text-dim); margin-top: 1px; }
.kio-sub b { color: var(--text-muted); font-weight: 400; }
.kio-names { margin-left: auto; flex: none; font-size: 13px; color: var(--text-dim);
  text-align: right; max-width: 220px; }
.kio-key { flex: none; font-size: 10.5px; font-weight: 500; background: var(--text);
  color: #fff; border-radius: 3px; padding: 2px 8px; letter-spacing: 0.01em; }
.kio-item.key .kio-title { font-size: 22px; }
.kio-int { font-size: 11px; font-weight: 500; background: var(--surface-alt-strong);
  color: var(--text-dim); border-radius: 3px; padding: 2px 8px; flex: none; }
.kio-wkday { font-size: 10.5px; color: var(--text-dim); margin: 14px 0 6px; }
.kio-wkday:first-of-type { margin-top: 0; }
.kio-wkitem { background: var(--bg); border-radius: var(--radius); padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.kio-wkitem + .kio-wkitem { margin-top: 6px; }
.kio-wkitem .dot-sq { width: 8px; height: 8px; }
.kio-wkname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kio-wkclient { color: var(--text-dim); flex: none; max-width: 40%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kio-who { margin-left: auto; font-size: 12px; color: var(--text-dim); flex: none; padding-left: 10px; }
.kio-right { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* ── period layout (default): today | week / month ── */
/* Today takes the wide left column; week and month stack on the right
   (their own flex column, so a short week never pushes the month down) */
.kio-periods { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start;
  grid-template-areas: "today side" "detail detail"; margin-top: 34px; }
.kio-col-today { grid-area: today; }
.kio-side { grid-area: side; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.kio-col-detail { grid-area: detail; }
@media (max-width: 1200px) { .kio-periods { grid-template-columns: 1fr; grid-template-areas: "today" "side" "detail"; } }
/* 't': focus on today — week and month gone, Today takes the full width,
   and the type scales up by --zoom (set by a script until the page fits) */
.kio-focus .kio-periods { grid-template-columns: 1fr; grid-template-areas: "today" "detail"; }
.kio-focus .kio-side { display: none; }
.kio-focus { --zoom: 1; }
.kio-focus .foot { display: none; } /* the footer line costs type size on a TV */
.kio-focus.kio .kio-card.kio-col-today .kio-phead h2 { font-size: calc(34px * var(--zoom)); }
.kio-focus .kio-col-today .kio-pcount { font-size: calc(12px * var(--zoom)); }
.kio-focus .kio-col-today .kio-ppct { font-size: calc(20px * var(--zoom)); }
.kio-focus .kio-col-today .kio-ppct small { font-size: calc(10px * var(--zoom)); }
.kio-focus .kio-title { font-size: calc(20px * var(--zoom)); }
.kio-focus .kio-item.key .kio-title { font-size: calc(22px * var(--zoom)); }
.kio-focus .kio-sub { font-size: calc(13.5px * var(--zoom)); }
.kio-focus .kio-names { font-size: calc(13px * var(--zoom)); }
.kio-focus .kio-key { font-size: calc(10.5px * var(--zoom)); }
.kio-focus .kio-item { padding: calc(16px * var(--zoom)) calc(18px * var(--zoom)); }
.kio-focus .kio-wkname, .kio-focus .kio-wkclient { font-size: calc(14px * var(--zoom)); }
.kio-focus .kio-who { font-size: calc(12px * var(--zoom)); }
.kio-focus .kio-outchip { font-size: calc(12.5px * var(--zoom)); }
/* all names, always: let them wrap instead of truncating to "+2" */
.kio-per .kio-names { white-space: normal; text-align: right; flex: 0 1 auto; max-width: 42%; line-height: 1.35; }
.kio-per .kio-who { white-space: normal; text-align: right; flex: 0 1 auto; max-width: 45%; line-height: 1.3; }

/* '?': keyboard help */
.kio-help { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  background: rgba(9, 9, 11, .45); cursor: pointer; }
.kio-help[hidden] { display: none; }
.kio-helpcard { background: #fff; color: #09090b; border-radius: 8px; padding: 26px 32px 22px; width: 560px; max-width: 90vw;
  cursor: default; font-size: 13.5px; line-height: 1.5; }
.kio-helpcard h3 { font-size: 11px; font-weight: 500; color: #a1a1aa; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; }
.kio-helpcard h3 + dl + h3 { margin-top: 22px; }
.kio-helpcard dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 16px; margin: 0; align-items: baseline; }
.kio-helpcard dt { font-weight: 500; white-space: nowrap; }
.kio-helpcard dd { margin: 0; color: #52525b; }
.kio-helpcard kbd { display: inline-block; min-width: 22px; text-align: center; font-family: var(--font-mono); font-size: 11px;
  padding: 1px 6px; border-radius: 4px; background: #f4f4f5; border: 1px solid #e4e4e7; color: #09090b; }
.kio-helpcard .kio-tgt { color: #a1a1aa; font-weight: 400; }
.kio-col { min-width: 0; }
.kio-per .kio-col-detail .kio-statrow { margin-top: 0; padding-top: 0; border-top: none; gap: 40px; }
.kio-per .kio-col-detail .kio-statrow > .kio-stat:last-child { padding-left: 40px; border-left: none; }
.kio-bandlbl { font-size: 10px; font-weight: 500; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 16px; }
.kio-color .kio-bandlbl { color: var(--dayfg); opacity: .75; }
/* out of office sits right under the Today header, as one line — no hairlines */
.kio-per .kio-phead { border-bottom: none; padding-bottom: 0; margin-bottom: 18px; }
.kio-outrow.top { margin: -4px 0 18px; padding: 0; border: none;
  display: flex; align-items: flex-start; gap: 14px; white-space: normal; }
.kio-outrow.top .kio-lbl { margin: 0; flex: none; padding-top: 5px; }
.kio-outchips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.kio-outchip { display: inline-flex; align-items: baseline; gap: 7px; background: var(--bg); border-radius: 4px;
  padding: 3px 9px; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.kio-outchip b { font-weight: 500; color: var(--text); }
.kio-outchip.more { background: transparent; padding-left: 2px; }
.kio-color .kio-outchip { background: color-mix(in srgb, var(--daybg) 80%, var(--dayfg) 20%); color: var(--dayfg); }
.kio-color .kio-outchip b { color: var(--dayfg); }
.kio-card .kio-phead h2 { white-space: nowrap; }
/* Today is what the board is about — its title outweighs week and month */
.kio-card.kio-col-today .kio-phead h2 { font-size: 34px; letter-spacing: -0.02em; line-height: 1.05; }
.kio-ppct { color: var(--text); }
.kio-ppct.int { margin-left: 14px; }
/* "62/73%": the base target rides along in lighter grey */
.kio-tgt { color: var(--text-dim); font-weight: 400; }
.kio-color .kio-ppct, .kio-color .kio-ppct.int { color: var(--dayfg); }
.kio-color .kio-tgt { color: var(--dayfg); opacity: .55; }
.kio-phead { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border); }
.kio-card .kio-phead h2 { font-size: 20px; font-weight: 500; color: var(--text); margin: 0; letter-spacing: -0.01em; }
.kio-pcount { font-size: 12px; color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kio-ppct { margin-left: auto; flex: none; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.kio-ppct small { font-size: 10px; font-weight: 500; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin-left: 6px; }
.kio-per .kio-statrow { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.kio-stathead { font-size: 12.5px; color: var(--text-dim); margin-bottom: 2px; }
.kio-stathead b { color: var(--text); font-weight: 500; }
.kio-outrow { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); white-space: pre; }
.kio-outrow .kio-lbl { font-size: 10px; font-weight: 500; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; white-space: normal; }
.kio-wkmore { font-size: 12px; color: var(--text-dim); padding: 4px 0 6px 22px; }
.kio-color .kio-wkmore { color: var(--dayfg); opacity: .75; }
.kio-wkitem .kio-mkey { flex: none; margin-left: 4px; }
.kio-mitem { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; min-width: 0; }
.kio-mday { flex: none; width: 28px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); }
.kio-mkey { flex: none; font-size: 10px; font-weight: 500; background: var(--text); color: #fff; border-radius: 3px; padding: 1px 6px; }
.kio-mname { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kio-mclient { color: var(--text-dim); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kio-color .kio-phead, .kio-color .kio-per .kio-statrow, .kio-color .kio-outrow { border-color: color-mix(in srgb, var(--dayfg) 22%, transparent); }
.kio-color .kio-card .kio-phead h2, .kio-color .kio-ppct, .kio-color .kio-col-today .kio-ppct,
.kio-color .kio-stathead b, .kio-color .kio-mname { color: var(--dayfg); }
.kio-color .kio-pcount, .kio-color .kio-ppct small, .kio-color .kio-stathead, .kio-color .kio-outrow,
.kio-color .kio-mday, .kio-color .kio-mclient { color: var(--dayfg); opacity: .75; }
.kio-color .kio-mkey { background: var(--dayfg); color: var(--daybg); }
.kio-unstaffed { flex: none; font-size: 10.5px; font-weight: 500;
  background: var(--score-low); color: #fff; border-radius: 3px; padding: 2px 8px; }
body.kio .foot { margin: 22px 0 10px; }

/* colour mode: the whole page in tints of the day's colour */
body.kio-color { background: var(--daybg); color: var(--dayfg); }
/* the previous day's colour plane, dissolving over the new page */
.kio-veil { position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: 1; transition: opacity .9s ease; }
.kio-veil.gone { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .kio-veil { display: none; } }
.kio-color .brand, .kio-color .kio-h1 { color: var(--dayfg); }
.kio-color .kio-day { color: var(--dayfg); opacity: .8; }
.kio-color .kio-clock { color: var(--dayfg); opacity: .7; }
.kio-color .kio-n { color: var(--dayfg); opacity: .55; }
.kio-color .foot { color: var(--dayfg); opacity: .6; }
.kio-color .kio-weekchip { background: var(--dayfg); color: var(--daybg); }
.kio-color .kio-nav .btn { background: color-mix(in srgb, var(--daybg) 88%, var(--dayfg) 12%);
  color: var(--dayfg); }
.kio-color .kio-nav .btn:hover { background: color-mix(in srgb, var(--daybg) 80%, var(--dayfg) 20%); }
.kio-color .kio-nav .btn.act { background: var(--dayfg); color: var(--daybg); }
.kio-color .kio-card { background: color-mix(in srgb, var(--daybg) 90%, var(--dayfg) 10%);
  color: var(--dayfg); }
.kio-color .kio-card h2 { color: var(--dayfg); opacity: .75; }
.kio-color .kio-item, .kio-color .kio-wkitem, .kio-color .kio-empty {
  background: color-mix(in srgb, var(--daybg) 80%, var(--dayfg) 20%); }
.kio-color .kio-sub, .kio-color .kio-names, .kio-color .kio-wkday, .kio-color .kio-wkclient,
.kio-color .kio-who, .kio-color .kio-empty { color: var(--dayfg); opacity: .95; }
.kio-color .kio-sub, .kio-color .kio-names, .kio-color .kio-who { opacity: .72; }
.kio-color .kio-wkday, .kio-color .kio-wkclient { opacity: .6; }
/* the warning must never blend into a same-hue plane: outlined in the fg */
.kio-color .kio-unstaffed { background: none; color: var(--dayfg);
  border: 1.5px solid var(--dayfg); padding: 1px 7px; }
.kio-color .kio-sub b { color: var(--dayfg); opacity: .95; }
.kio-color .kio-item .dot-sq, .kio-color .kio-wkitem .dot-sq { background: var(--dayfg); }
.kio-color .kio-item.done .dot-sq { background: var(--dayfg); opacity: .45; }
.kio-color .kio-key { background: var(--dayfg); color: var(--daybg); }
.kio-color .kio-int { background: color-mix(in srgb, var(--daybg) 65%, var(--dayfg) 35%);
  color: var(--daybg); }


/* ── Print (Download PDF): keep the Verve look, tuned for A4 ── */
@page { size: A4; margin: 12mm 11mm 14mm; }
@media print {
  /* backgrounds and colors survive without the browser checkbox */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #fff; }
  body { font-size: 11.5px; }
  .topbar .actions, .noprint { display: none !important; }
  .topbar-in { height: 44px; }
  .wrap { max-width: none; padding: 0; }
  .pagehead.pagehead-lg { padding: 22px 0 16px; }
  .pagehead h1.ptitle { font-size: 25px; max-width: none; }
  .pagehead-lg .meta { margin-top: 6px; }
  .intro { font-size: 12px; line-height: 1.55; margin-top: 10px; }
  /* cards keep their gray panels; never break one across pages */
  .tlcard { margin-bottom: 14px; break-inside: avoid; }
  .cards { gap: 12px; }
  .pcard { padding: 14px 16px; break-inside: avoid; }
  /* a PDF always shows everything: force every collapsed state open,
     independent of the beforeprint JS */
  .pcard.closed .rowswrap, .rowswrap.hidden { display: block !important; }
  .timeline tr.past.collapsed { display: table-row !important; }
  .pcard .rowswrap { margin-top: 10px; }
  .pcard .timeline td { padding: 8px 12px; }
  .plabel { font-size: 12px; }
  .pmeta, .ptoggle { font-size: 10.5px; }
  .timeline .d { font-size: 11px; width: 100px; }
  .timeline .m { font-size: 11.5px; }
  .foot { display: none !important; }
  .fade-in { animation: none; }
}

/* ── Mobile ── */
@media (max-width: 1330px) { .pname { max-width: 300px; } }

@media (max-width: 720px) {
  .wrap, .wrap-narrow { padding: 0 16px; }
  .topbar-in { height: 52px; gap: 8px; }
  .topbar .chip { display: none; }
  .topbar .actions { gap: 6px; }
  .btn { padding: 7px 11px; font-size: 12.5px; }
  .pagehead { padding: 22px 0 14px; }
  .pagehead h1 { font-size: 20px; }
  .pagehead h1.ptitle { font-size: 26px; }

  /* Admin toolbar stacks; table drops secondary columns */
  .toolbar { flex-direction: column; align-items: stretch; }
  .btn.toggle { text-align: left; }
  .list .colnum, .list .colviews, th.colnum, th.colviews { display: none; }
  .pname { max-width: 34vw; }
  .colclient { width: 120px; max-width: 120px; }
  .colactions { width: auto; }
  .linkcell { gap: 6px; }
  .copyrow { flex-direction: column; }
  .copyrow .btn { align-self: flex-start; }

  /* Client timeline: date + milestone only, tighter cells */
  .timeline .w { display: none; }
  .timeline .d { width: 92px; font-size: 12px; }
  .timeline td { padding: 10px 10px; }
  .timeline .m { font-size: 13px; }
  .foot { font-size: 9px; padding: 0 8px; }
}