/* The Hub's one stylesheet: the tokens, the frame and every component.

   The look is Clinton's reference of 26 September 2026
   (hub/docs/design-reference/home.png; design.md, "The version 3 look"). Every
   colour and size in :root was read off that image with a script at 1.246
   image pixels to the CSS pixel (hub/docs/ledgers/redesign.md). Nothing below
   :root names a colour: a component uses a token or it is wrong, and
   test/design-tokens.test.ts reads this file to keep it that way.

   Served from a hashed URL and cached for good. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
}

:root {
  /* The canvas and what sits on it. */
  --canvas: #f5f4ef;
  --canvas-glass: rgba(245, 244, 239, 0.88);
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --hover: rgba(21, 23, 28, 0.04);
  --press: rgba(21, 23, 28, 0.07);
  --line: #e8e6df;
  --line-bar: #e9e7dc;
  --line-soft: #f0eee8;

  /* Ink. The reference's placeholder grey (#96948b) is too light to read at
     14 px, so placeholders use the secondary grey and #96948b is kept for icons. */
  --ink-900: #15171c;
  --ink-700: #2c2d31;
  --ink-500: #6c6d6e;
  --ink-400: #96948b;
  --on-dark: #ffffff;

  /* The Hub sidebar. Group labels are a step lighter than the reference's
     #606069, which reads at 3.1:1 on the sidebar; #808189 reads at 4.6:1. */
  --side: #15161a;
  --side-tile: #1d1f26;
  --side-ink: #b9b9c0;
  --side-icon: #989ba3;
  --side-label: #808189;
  --side-rule: #202027;
  --side-hover: rgba(255, 255, 255, 0.04);
  --side-active: #1e2a25;
  --side-active-bar: #6ca68a;
  --side-active-tile: #4f896a;

  /* Charts (20 October 2026): four series hues from BMS's own indigo and green, with an amber and a rose, stepped
     until the palette validator passed every check on the light surface (CVD separation 10.4, normal vision 15.5,
     all at least 3:1). Fixed order, never cycled. --viz-low is the one warning tone, for running low or overdue. */
  --viz-1: #4654a3; --viz-2: #2f9e74; --viz-3: #c9741a; --viz-4: #c2547f; --viz-low: #c9741a; --viz-track: #f1efe9;

  /* The one action colour (BMS's indigo) and BMS's green for live, done, paid. */
  --accent: #4654a3;
  /* BMS's own green, from their website and their mark: the way in's glow and its ticks. */
  --brand-green: #378c67;
  --accent-hover: #3b4790;
  --accent-soft: rgba(70, 84, 163, 0.08);
  --accent-ring: 0 0 0 3px rgba(70, 84, 163, 0.26);
  --live: #378c67;

  /* Tones: the line under a stat, Needs attention's rows. */
  --tone-up: #467a5e;
  --tone-due: #a16030;
  --tone-quiet: #6c6d6e;
  --row-risk: #f8eadd;
  --row-risk-ink: #a16030;
  --row-soon: #f1edea;
  --row-reason: #736b69;
  --danger: #b42318;
  --danger-soft: #fbedeb;
  --bell-dot: #a75f2c;

  /* The four families of tint, one per group of apps, and the Hub's own. */
  --green-bg: #e5f0e9;  --green-fg: #4b8266;
  --indigo-bg: #e7e9f3; --indigo-fg: #4d538f;
  --sand-bg: #f3eee1;   --sand-fg: #7f6a3a;
  --rose-bg: #f3e6e9;   --rose-fg: #7a4450;
  --plain-bg: #f0eee8;  --plain-fg: #5f6064;

  /* The ten app tints: each app's tile, card and stat icon, and nowhere else. */
  --tint-crm-bg: var(--green-bg);         --tint-crm-fg: var(--green-fg);
  --tint-sales-bg: var(--green-bg);       --tint-sales-fg: var(--green-fg);
  --tint-portal-bg: var(--green-bg);      --tint-portal-fg: var(--green-fg);
  --tint-projects-bg: var(--indigo-bg);   --tint-projects-fg: var(--indigo-fg);
  --tint-timesheets-bg: var(--indigo-bg); --tint-timesheets-fg: var(--indigo-fg);
  --tint-documents-bg: var(--indigo-bg);  --tint-documents-fg: var(--indigo-fg);
  --tint-finance-bg: var(--sand-bg);      --tint-finance-fg: var(--sand-fg);
  --tint-mail-bg: var(--sand-bg);         --tint-mail-fg: var(--sand-fg);
  --tint-quarantine-bg: var(--rose-bg);   --tint-quarantine-fg: var(--rose-fg);
  --tint-compliance-bg: var(--rose-bg);   --tint-compliance-fg: var(--rose-fg);

  /* Type. Inter, 400 500 600 and 700 for the two display sizes. */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-ui: 14px; --t-ui-lh: 20px;
  --t-body: 14px; --t-body-lh: 22px;
  --t-cap: 12px; --t-cap-lh: 16px;
  --t-small: 13px;
  --t-h: 17px;
  --t-title: 22px;
  --t-greet: 28px;
  --t-stat: 36px;
  --t-label: 12px;
  --t-group: 11px;

  /* Shape. */
  --r-control: 8px;
  --r-row: 12px;
  --r-card: 16px;
  --r-sheet: 16px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(21, 23, 28, 0.04), 0 6px 16px -8px rgba(21, 23, 28, 0.08);
  --shadow-hair: 0 1px 2px rgba(21, 23, 28, 0.03);
  --shadow-seg: 0 1px 2px rgba(21, 23, 28, 0.08);
  --scrim: rgba(21, 23, 28, 0.22);
  --shadow-float: 0 12px 32px rgba(21, 23, 28, 0.14), 0 2px 6px rgba(21, 23, 28, 0.06);

  /* Space. */
  --hub-w: 248px;
  --rail-w: 64px;
  --app-w: 240px;
  --top: 64px;
  --gutter: 32px;
  --gap: 16px;
  --row: 40px;
  --row-2: 56px;
  --ctl: 34px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --rail-ms: 160ms;
  --tabs: 0px;
  /* Finance's charts: four categorical hues in a fixed order, checked with the
     dataviz validator on 27 September 2026 (lightness, chroma, colour-blind and
     normal-vision separation all pass; the fourth is under 3:1 on white, so every
     chart carries its table). */
  --chart-1: #4654a3; --chart-2: #d9703a; --chart-3: #1f9a78; --chart-4: #c98a00;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink-900);
  font-family: var(--font); font-size: var(--t-ui); line-height: var(--t-ui-lh);
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
p a, .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
button, input, textarea { font: inherit; color: inherit; }
svg { stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Icons are outlines; words in a drawing are not. Without this a ring's or a chart's number took the
   icons' 1.7 px outline and read as heavy black (QA-32, Compliance's rings). */
svg text { stroke: none; }
.num, td.num, .tabular { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--surface); padding: 6px 10px; border-radius: var(--r-control); }
.skip:focus { top: 8px; box-shadow: var(--shadow-float); }
:focus-visible { outline: none; box-shadow: var(--accent-ring); }
[hidden] { display: none !important; }

/* =============================================================== the frame === */

/* The Hub sidebar: dark, full height, the ten apps in four groups. Inside an
   app it is the rail: the same element at 64 px, icons in the same places. */
.hub-side {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: var(--hub-w);
  display: flex; flex-direction: column; padding: 20px 12px 12px; background: var(--side); color: var(--side-ink);
  overflow-x: hidden; overflow-y: auto; scrollbar-width: none; transition: width var(--rail-ms) var(--ease), box-shadow var(--rail-ms) var(--ease);
}
.hub-side::-webkit-scrollbar { display: none; }
.hub-ws { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 6px; margin-bottom: 20px; text-decoration: none; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; width: 100%; flex: none; }
.hub-ws svg { flex: none; }
.hub-ws-name { display: flex; flex-direction: column; min-width: 0; line-height: 18px; }
.hub-ws-name b { color: var(--on-dark); font-weight: 700; font-size: 15px; letter-spacing: -0.005em; }
.hub-ws-name span { color: var(--side-label); font-size: var(--t-cap); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-nav { display: flex; flex-direction: column; gap: 4px; }
.hub-group { height: 32px; display: flex; align-items: flex-end; padding: 0 6px 7px; margin-top: 10px; color: var(--side-label);
  font-size: var(--t-group); line-height: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.hub-item {
  position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 6px; border-radius: 10px;
  color: var(--side-ink); text-decoration: none; font-weight: 500; white-space: nowrap; flex: none;
}
a.hub-item:hover { background: var(--side-hover); color: var(--on-dark); }
.hub-tile { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--side-tile); color: var(--side-icon); }
.hub-tile svg { width: 15px; height: 15px; }
.hub-item[aria-current="page"] { background: var(--side-active); color: var(--on-dark); font-weight: 600; box-shadow: inset 3px 0 0 var(--side-active-bar); }
.hub-item[aria-current="page"] .hub-tile { background: var(--side-active-tile); color: var(--on-dark); }
.hub-item.off { color: var(--side-label); cursor: default; }
.hub-item.off .hub-tile { opacity: 0.55; }
.hub-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity var(--rail-ms) var(--ease); }
.hub-item .hub-state { margin-left: auto; font-size: 11px; color: var(--side-label); font-weight: 500; opacity: 0; transition: opacity 120ms var(--ease); }
.hub-item.off:hover .hub-state { opacity: 1; }
/* The state's words take room only while they show, so a closed app's name is never cut short beside empty space. */
.hub-item.off:not(:hover):not(:focus-visible) .hub-state { display: none; }
.hub-count { margin-left: auto; font-size: var(--t-cap); color: var(--side-ink); font-variant-numeric: tabular-nums; }
.hub-person { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--side-rule); display: flex; align-items: center; gap: 6px; flex: none; }
.hub-me { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; height: 48px; padding: 0 6px; border-radius: 10px; text-decoration: none; color: inherit; }
.hub-me:hover { background: var(--side-hover); }
.hub-me .avatar { width: 32px; height: 32px; font-size: 12px; background: var(--side-active-tile); border: 0; color: var(--on-dark); }
.hub-me-text { display: flex; flex-direction: column; min-width: 0; line-height: 17px; }
.hub-me-text b { color: var(--on-dark); font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-me-text span { color: var(--side-label); font-size: var(--t-cap); white-space: nowrap; }
.hub-gear { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--side-icon); text-decoration: none; }
.hub-gear:hover, .hub-gear[aria-current="page"] { background: var(--side-hover); color: var(--on-dark); }
.hub-gear svg { width: 17px; height: 17px; }

/* The rail, inside an app. Labels fade rather than reflow, so the icons never
   move when it opens; a label shows beside its icon on hover. */
body.in-app { --hub-w: var(--rail-w); }
body.in-app .hub-side:not(.open) { overflow: visible; }
body.in-app .hub-side:not(.open) .hub-label,
body.in-app .hub-side:not(.open) .hub-ws-name,
body.in-app .hub-side:not(.open) .hub-me-text,
body.in-app .hub-side:not(.open) .hub-count,
body.in-app .hub-side:not(.open) .hub-state,
body.in-app .hub-side:not(.open) .hub-group span { opacity: 0; pointer-events: none; }
body.in-app .hub-side:not(.open) .hub-group::after { content: ""; display: block; width: 20px; height: 1px; margin: 0 auto 2px 6px; background: var(--side-rule); }
body.in-app .hub-side:not(.open) .hub-group { position: relative; }
body.in-app .hub-side:not(.open) .hub-group span { position: absolute; }
body.in-app .hub-side:not(.open) .hub-gear { display: none; }
body.in-app .hub-side:not(.open) .hub-item:hover .hub-label,
body.in-app .hub-side:not(.open) .hub-item:focus-visible .hub-label {
  opacity: 1; position: absolute; left: 50px; top: 50%; transform: translateY(-50%); z-index: 2; padding: 5px 10px; border-radius: 8px;
  background: var(--side); color: var(--on-dark); font-size: var(--t-small); box-shadow: var(--shadow-float); overflow: visible;
}
body.in-app .hub-side.open { width: var(--hub-w-open, 248px); box-shadow: var(--shadow-float); }
/* The rail always fits the window, its person at the foot (Clinton, 21 October 2026: a laptop's window cut it off once
   Assist joined the rail). The spacing is the full one on a tall window; a shorter one first narrows the gaps between
   groups, then the items; only a very short one scrolls, where the hover labels give way. */
@media (max-height: 900px) {
  body.in-app .hub-side:not(.open) .hub-group:not(.hub-group-assist) { height: 24px; margin-top: 6px; padding-bottom: 5px; }
}
@media (max-height: 800px) {
  body.in-app .hub-side:not(.open) { padding-top: 14px; }
  body.in-app .hub-side:not(.open) .hub-ws { margin-bottom: 12px; }
  body.in-app .hub-side:not(.open) .hub-group:not(.hub-group-assist) { height: 14px; margin-top: 4px; padding-bottom: 3px; }
  body.in-app .hub-side:not(.open) .hub-item { height: 38px; }
}
@media (max-height: 760px) {
  body.in-app .hub-side:not(.open) .hub-nav { gap: 2px; }
  body.in-app .hub-side:not(.open) .hub-item { height: 34px; }
}
@media (max-height: 700px) {
  body.in-app .hub-side:not(.open) { overflow-y: auto; }
}
.rail-scrim { position: fixed; inset: 0; z-index: 39; background: transparent; }

/* The page beside it. */
.frame { padding-left: var(--hub-w); min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
body.in-app .frame { grid-template-columns: var(--app-w) minmax(0, 1fr); }
.main { min-width: 0; display: flex; flex-direction: column; }

/* An app's own sidebar: white on the canvas, its name and tint at the top. */
.app-side { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--surface);
  border-right: 1px solid var(--line); overflow-y: auto; padding: 0 12px 12px; }
.app-head { height: var(--top); display: flex; align-items: center; gap: 10px; padding: 0 4px; margin-bottom: 8px; text-decoration: none; flex: none; border-bottom: 1px solid var(--line-soft); }
.app-head b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.app-group { padding: 14px 8px 6px; color: var(--ink-500); font-size: var(--t-cap); font-weight: 600; }
.app-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; border-radius: var(--r-control); color: var(--ink-700);
  text-decoration: none; font-weight: 500; }
.app-item svg { width: 16px; height: 16px; color: var(--ink-500); flex: none; }
.app-item:hover { background: var(--hover); color: var(--ink-900); }
.app-item[aria-current="page"] { background: var(--canvas); color: var(--ink-900); font-weight: 600; }
.app-item[aria-current="page"] svg { color: var(--ink-900); }
.app-item .count { margin-left: auto; color: var(--ink-500); font-size: var(--t-cap); font-variant-numeric: tabular-nums; font-weight: 500; }
.app-item[aria-current="page"] .count { color: var(--ink-900); font-weight: 600; }
.app-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px; }
/* The sidebar as a map (Pass 10): the open place with its contents one level down, and Pinned. Nothing folds. */
.app-kids { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 18px; padding-left: 8px; border-left: 1px solid var(--line-soft); }
.nav-group .app-kids { margin-left: 0; padding-left: 0; border-left: 0; }
.app-kid { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 8px; border-radius: var(--r-control); color: var(--ink-600); text-decoration: none; font-size: var(--t-small); }
.app-kid > span:first-of-type, .app-kid > span:only-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-kid svg { width: 14px; height: 14px; color: var(--ink-400); flex: none; }
.app-kid:hover { background: var(--hover); color: var(--ink-900); }
.app-kid[aria-current="page"] { background: var(--canvas); color: var(--ink-900); font-weight: 600; }
.app-kid .count { margin-left: auto; color: var(--ink-500); font-size: var(--t-cap); font-variant-numeric: tabular-nums; }
.app-more summary { list-style: none; cursor: pointer; padding: 4px 8px; color: var(--ink-500); font-size: var(--t-cap); }
.app-more summary::-webkit-details-marker { display: none; }
.page-pin { color: var(--ink-400); margin-left: 4px; }
.page-pin[aria-pressed="true"] { color: var(--tone-due); }
.page-pin[aria-pressed="true"] svg { fill: currentColor; }
.sheet-group { padding: 12px 16px 4px; color: var(--ink-500); font-size: var(--t-cap); font-weight: 600; list-style: none; }
.sheet-kid .row { padding-left: 36px; min-height: 40px; }
.sheet-kid .row-title { font-weight: 400; }
/* A place's contents have no icon or arrow: the text sits indented past the place's own. */
.sheet-kid .row > .row-main:first-child { margin-left: 26px; }

/* A tint tile: an app's icon on its pastel. */
.tile { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--plain-bg); color: var(--plain-fg); }
.tile svg { width: 16px; height: 16px; }
.tile.lg { width: 36px; height: 36px; border-radius: 10px; }
.tile.lg svg { width: 18px; height: 18px; }
.tile.sm { width: 28px; height: 28px; border-radius: 8px; }
.tile.sm svg { width: 15px; height: 15px; }
.tile-green { background: var(--green-bg); color: var(--green-fg); }
.tile-indigo { background: var(--indigo-bg); color: var(--indigo-fg); }
.tile-sand { background: var(--sand-bg); color: var(--sand-fg); }
.tile-rose { background: var(--rose-bg); color: var(--rose-fg); }
.tile-hub { background: var(--green-bg); color: var(--green-fg); }
.tile-plain { background: var(--plain-bg); color: var(--plain-fg); }
.tile-crm { background: var(--tint-crm-bg); color: var(--tint-crm-fg); }
.tile-sales { background: var(--tint-sales-bg); color: var(--tint-sales-fg); }
.tile-portal { background: var(--tint-portal-bg); color: var(--tint-portal-fg); }
.tile-projects { background: var(--tint-projects-bg); color: var(--tint-projects-fg); }
.tile-timesheets { background: var(--tint-timesheets-bg); color: var(--tint-timesheets-fg); }
.tile-documents { background: var(--tint-documents-bg); color: var(--tint-documents-fg); }
.tile-finance { background: var(--tint-finance-bg); color: var(--tint-finance-fg); }
.tile-mail { background: var(--tint-mail-bg); color: var(--tint-mail-fg); }
.tile-quarantine { background: var(--tint-quarantine-bg); color: var(--tint-quarantine-fg); }
.tile-compliance { background: var(--tint-compliance-bg); color: var(--tint-compliance-fg); }

/* The top bar, on the canvas. */
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--top); display: flex; align-items: center; gap: 12px; padding: 0 var(--gutter);
  background: var(--canvas-glass); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line-bar);
}
.top-search { position: relative; flex: 0 1 460px; min-width: 200px; }
.top-search > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-400); pointer-events: none; }
.top-search input {
  width: 100%; height: 38px; padding: 0 56px 0 40px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface);
  outline: none; font-size: var(--t-ui); box-shadow: var(--shadow-hair); transition: border-color 120ms var(--ease);
}
.top-search input::placeholder { color: var(--ink-500); }
.top-search input:focus { border-color: var(--accent); box-shadow: var(--accent-ring); }
.top-search kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.top-search.open input { border-radius: 19px 19px 0 0; border-bottom-color: var(--line-soft); box-shadow: var(--shadow-float); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.top-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-900); font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; }
.top-btn:hover { background: var(--surface-2); }
.top-btn svg { width: 16px; height: 16px; color: var(--ink-500); }
.top-btn[aria-current="page"] { border-color: var(--ink-900); }
.top-btn .pill { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ink-900); color: var(--on-dark); font-size: 11px; line-height: 20px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.top-bell { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center;
  color: var(--ink-700); cursor: pointer; box-shadow: var(--shadow-hair); padding: 0; }
.top-bell:hover { background: var(--surface-2); }
.top-bell svg { width: 17px; height: 17px; }
.bell-dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--bell-dot); border: 2px solid var(--surface); box-sizing: content-box; transform: translate(2px, -2px); }
.phone-mark, .phone-search, .bar-title { display: none; }

/* The page itself. */
.content { padding: 28px var(--gutter) 48px; min-width: 0; }
.content.flush { padding: 0; display: flex; flex-direction: column; min-height: calc(100dvh - var(--top) - var(--bar, 0px)); }
.page-head { display: flex; align-items: center; gap: 12px; min-height: 40px; margin-bottom: 20px; }
.content.flush .page-head { padding: 20px var(--gutter) 0; margin-bottom: 16px; }
.page-title { margin: 0; font-size: var(--t-title); line-height: 28px; font-weight: 700; letter-spacing: -0.015em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-title .count { color: var(--ink-500); font-weight: 500; margin-left: 6px; font-variant-numeric: tabular-nums; }
.crumb { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-500); font-size: var(--t-title); line-height: 28px; font-weight: 600; letter-spacing: -0.015em; }
.crumb a { color: var(--ink-500); text-decoration: none; white-space: nowrap; }
.crumb a:hover { color: var(--ink-900); }
.crumb .page-title { color: var(--ink-900); }
.page-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.tabs { display: none; }
.page-head .phone-back { display: none; }
/* Inside an app its own sidebar says where you are; the breadcrumb is the phone's way back. */
body.in-app .crumb > a, body.in-app .crumb > .sep { display: none; }

/* =========================================================== the phone ==== */

@media (max-width: 767px) {
  :root { --gutter: 16px; --t-ui: 15px; --t-ui-lh: 22px; --t-body: 16px; --t-body-lh: 24px; --ctl: 44px; --row: 56px; --row-2: 60px; --tabs: 64px; --top: 52px; }
  body, body.in-app { --hub-w: 0px; }
  .hub-side { display: none; }
  body.in-app .frame, .frame { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .app-side { display: none; }
  .topbar { padding: 0 8px 0 var(--gutter); gap: 4px; }
  .top-search, .top-btn { display: none; }
  .phone-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: -4px; border: 0; border-radius: 10px; background: var(--side); cursor: pointer; flex: none; padding: 0; }
  .phone-search { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; border-radius: 50%; color: var(--ink-700); cursor: pointer; }
  .phone-search svg { width: 20px; height: 20px; }
  .bar-title { display: block; min-width: 0; margin-left: 8px; font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 150ms var(--ease); }
  .topbar.scrolled .bar-title, body.pane-open .bar-title { opacity: 1; }
  .top-actions { gap: 0; }
  .top-bell { border: 0; background: none; box-shadow: none; width: 44px; height: 44px; }
  .bell-dot { top: 11px; right: 12px; }
  .content { padding: 12px var(--gutter) calc(var(--tabs) + 24px + env(safe-area-inset-bottom)); }
  .content.flush { padding-bottom: calc(var(--tabs) + env(safe-area-inset-bottom)); min-height: 0; }
  .content.flush .page-head { padding: 12px var(--gutter) 0; }
  .page-head { flex-wrap: wrap; margin-bottom: 16px; }
  /* A page's buttons never run past the phone's edge: they wrap to a second row (Quarantine's Activity, 5 October). */
  .page-actions { flex: 0 1 auto; flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .page-title, .crumb { font-size: 28px; line-height: 34px; }
  .crumb > a, .crumb > .sep { display: none; }
  .page-head .phone-back { display: inline-flex; margin-left: -8px; }
  body.pane-open .page-head { display: none; }
  .tabs {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: calc(var(--tabs) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--canvas-glass); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-top: 1px solid var(--line-bar);
  }
  .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px; min-width: 0;
    text-decoration: none; color: var(--ink-500); font-size: 11px; line-height: 13px; font-weight: 500; border: 0; background: none; position: relative; cursor: pointer; }
  .tab span:not(.badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  .tab svg { width: 22px; height: 22px; }
  .tab[aria-current="page"] { color: var(--ink-900); font-weight: 600; }
  .tab .badge { position: absolute; top: 6px; left: calc(50% + 6px); }
  kbd { display: none; }
}

/* A tablet: the Hub sidebar folds to the rail on every page, to leave room. */
@media (min-width: 768px) and (max-width: 1023px) {
  body { --hub-w: var(--rail-w); }
  .hub-side:not(.open) { overflow: visible; }
  .hub-side:not(.open) .hub-label, .hub-side:not(.open) .hub-ws-name, .hub-side:not(.open) .hub-me-text, .hub-side:not(.open) .hub-count,
  .hub-side:not(.open) .hub-state, .hub-side:not(.open) .hub-group span { opacity: 0; pointer-events: none; }
  .hub-side:not(.open) .hub-group span { position: absolute; }
  .hub-side:not(.open) .hub-gear { display: none; }
  .hub-side.open { width: 248px; box-shadow: var(--shadow-float); }
  body.in-app { --app-w: 212px; }
  .top-search { flex-basis: 320px; }
  .top-btn .label { display: none; }
}

/* ============================================================ controls ==== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ctl); padding: 0 14px;
  border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); color: var(--ink-900);
  font-size: var(--t-ui); font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}
.btn:hover { background: var(--surface-2); border-color: var(--line); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-dark); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-quiet { border-color: transparent; background: none; color: var(--ink-700); }
.btn-quiet:hover { background: var(--hover); color: var(--ink-900); border-color: transparent; }
.btn-danger { color: var(--danger); }
.btn-icon { width: var(--ctl); padding: 0; }
.btn svg { width: 16px; height: 16px; }
.btn[aria-busy="true"] { pointer-events: none; opacity: 0.7; }
kbd { font-family: var(--font); font-size: 11px; line-height: 18px; min-width: 20px; padding: 0 5px; text-align: center;
  color: var(--ink-500); border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); }

.input, .textarea {
  width: 100%; height: var(--ctl); padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); outline: none; font-size: var(--t-ui);
}
.textarea { height: auto; min-height: 120px; padding: 10px 12px; line-height: var(--t-body-lh); font-size: var(--t-body); resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-500); }
.input:focus, .textarea:focus { border-color: var(--accent); box-shadow: var(--accent-ring); }
@media (max-width: 767px) { .input, .textarea { font-size: 16px; } }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field > label, .field-label { font-weight: 500; }
.field-help { color: var(--ink-500); font-size: var(--t-cap); line-height: var(--t-cap-lh); }
.field-error { color: var(--danger); font-size: var(--t-cap); }
.search { position: relative; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-400); }
.search .input { padding-left: 34px; }

/* Segmented control: the view. */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--canvas); border: 1px solid var(--line); }
.seg a, .seg button { height: 28px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 7px;
  text-decoration: none; color: var(--ink-500); font-weight: 500; border: 0; background: none; cursor: pointer; white-space: nowrap; }
.seg [aria-current="true"], .seg [aria-current="page"], .seg [aria-pressed="true"] { background: var(--surface); color: var(--ink-900); box-shadow: var(--shadow-seg); }
.seg .count { color: var(--ink-500); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .seg a, .seg button { height: 36px; }
  /* A row of tabs wider than the phone scrolls sideways rather than being cut at the edge (Timesheets' Reports, 2 October 2026). */
}
/* A row of tabs wider than its box scrolls sideways rather than being cut at the edge, on a phone or in a narrow card. */
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg a, .seg button { flex: none; }

.filters { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filter { height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill);
  color: var(--ink-500); text-decoration: none; white-space: nowrap; font-weight: 500; }
.filter:hover { background: var(--hover); color: var(--ink-900); }
.filter[aria-current="true"] { color: var(--ink-900); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.filter .count { color: var(--ink-500); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .filter { height: 36px; } }

.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .grow { flex: 1; min-width: 160px; }
.toolbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ============================================================= content ==== */

/* A card: the unit on the canvas. */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); min-width: 0; }
.card-pad { padding: 24px; }
/* Cards stacked straight on the page, or in a form on it, keep the page's gap: two cards
   touching read as one broken card (QA-33, CRM settings' Association labels, Email logging
   and Record layout). Margins between blocks collapse, so a page that already spaces its
   cards keeps its own spacing. */
.content > .card + .card, .content > form > .card + .card, .content > .card + form, .content > form + .card { margin-top: var(--gap); }
.card-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.card-head h2 { margin: 0; font-size: var(--t-h); line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.card-head .meta { margin-left: auto; color: var(--ink-500); font-size: var(--t-cap); white-space: nowrap; }
.card .list { border-top: 0; }
.card > .list:first-child .row:first-child, .card > .table-wrap:first-child { border-top-left-radius: var(--r-card); border-top-right-radius: var(--r-card); }
.card-list { overflow: hidden; }
.card-list .list .row:last-child, .card-list .list li:last-child > .row { border-bottom: 0; }

/*
 * A card's inner edge, one rule for every app (QA 11 to 19, 2 October 2026).
 * A card either pads itself (.card-pad) or lets its rows run edge to edge with
 * their own padding. Whatever else sits in an edge-to-edge card or panel (an
 * empty state above all) keeps the card's inset, so no text touches a border.
 * A padded card adds no space of its own above its first line or below its
 * last; a button under a list or table stands clear of the last divider; a
 * table inside a card is part of that card, never a second card drawn in it.
 * scripts/layout-check.ts measures every page against these.
 */
:root { --card-x: 24px; }
:is(.card:not(.card-pad), .split-list, .split-detail, .list.boxed, .table-scroll, .panel:not(.panel-pad)) .empty:not(:is(.card-pad, .panel-pad, .split-detail-inner, .sheet-body, .dialog) .empty) { padding-inline: var(--card-x); }
.card-pad > :first-child, .panel-pad > :first-child { margin-top: 0; }
.card-pad > :last-child, .panel-pad > :last-child { margin-bottom: 0; }
.card-pad > .list:last-child > :last-child > .row, .card-pad > .list:last-child > .row:last-child { border-bottom: 0; }
/* A plain row in a padded card lines up with the card's heading; a row that is a link keeps its inset for its hover. */
.card-pad > .list > li.row { padding-left: 0; padding-right: 0; }
/* A boxed list inside a card is part of the card, not a second card. */
.card .list.boxed { border: 0; border-radius: 0; box-shadow: none; background: none; border-top: 1px solid var(--line-soft); }
:is(.list, .table-wrap, .table-scroll, .kv) + :is(.btn, .card-actions, .btn-row) { margin-top: 16px; }
.card .table-scroll, .split .table-scroll { border: 0; border-radius: 0; box-shadow: none; background: none; }
/* A table directly in a card that does not pad itself keeps the card's inset, as an empty state does. */
.card:not(.card-pad) > .table-scroll { padding-inline: var(--card-x); }
/* The split view fills the screen under the page's head and scrolls inside itself; Chrome would otherwise size it to everything in it. */
@media (min-width: 768px) {
  .content.flush:has(> .split, > * > .split) { height: calc(100dvh - var(--top) - var(--bar, 0px)); min-height: 0; }
  .content.flush > .split, .content.flush > * > .split { flex: 1 1 0; height: auto; min-height: 0; }
  .split > .split-list, .split > .split-detail { min-height: 0; }
}

h2.section { margin: 32px 0 10px; font-size: var(--t-h); line-height: 24px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 8px; }
h2.section:first-child { margin-top: 0; }
h2.section a { margin-left: auto; font-size: var(--t-ui); font-weight: 500; color: var(--ink-500); text-decoration: none; }
h2.section a:hover { color: var(--ink-900); }
h2.section .count { color: var(--ink-500); font-weight: 500; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-500); }
.cap { font-size: var(--t-cap); line-height: var(--t-cap-lh); color: var(--ink-500); }
/* A small icon leading a caption, such as a priced or locked figure's padlock. */
.cap > svg, .docs-figures figcaption > svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; flex: none; }
.prose { font-size: var(--t-body); line-height: var(--t-body-lh); max-width: 68ch; }
.prose p { margin: 0 0 10px; }
.panel { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.panel-pad { padding: 20px 24px; }
.narrow { max-width: 760px; }

/* Lists: edge to edge in their card, hairlines between rows. */
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.list.boxed { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card); }
.row {
  display: flex; align-items: center; gap: 12px; min-height: var(--row); padding: 0 16px; border-bottom: 1px solid var(--line-soft);
  text-decoration: none; color: inherit; position: relative; background: var(--surface);
}
.list.boxed > .row:last-child, .list.boxed > li:last-child > .row, .list.boxed > form:last-child > .row { border-bottom: 0; }
.row.two { min-height: var(--row-2); padding-top: 8px; padding-bottom: 8px; }
a.row:hover, button.row:hover, .row[data-href]:hover { background: var(--surface-2); cursor: pointer; }
.row[aria-selected="true"], .row.kbd-focus { background: var(--accent-soft); }
.row[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.row-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.row-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row-title b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-title .unread { font-weight: 600; }
.row-sub { color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-small); }
.row-meta { flex: none; color: var(--ink-500); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: var(--t-small); }
.row-action { flex: none; }

/* Status: a dot and a word, in ink. */
.state { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-700); white-space: nowrap; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-400); flex: none; display: inline-block; }
.dot.live { background: var(--live); }
.dot.accent { background: var(--accent); }
.dot.warn { background: var(--tone-due); }
.dot.danger { background: var(--danger); }
.flag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: var(--t-cap); font-weight: 500; }
.flag.warn { background: var(--row-risk); color: var(--tone-due); }
.flag.danger { background: var(--danger-soft); color: var(--danger); }
.badge { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ink-900); color: var(--on-dark); font-size: 10px; line-height: 16px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

/* Attribute rows: a record's facts. */
.kv { display: grid; grid-template-columns: 200px minmax(0, 1fr); margin: 0; }
.kv > dt, .kv > dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line-soft); min-height: var(--row); }
.kv > dt:last-of-type, .kv > dd:last-of-type { border-bottom: 0; }
.kv > dt { color: var(--ink-500); padding-right: 16px; }
@media (max-width: 767px) { .kv { grid-template-columns: 1fr; } .kv > dt { border-bottom: 0; padding-bottom: 0; min-height: 0; } .kv > dt:last-of-type { border-bottom: 0; } }

.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--canvas); border: 1px solid var(--line); color: var(--ink-700);
  display: inline-grid; place-items: center; font-size: 10px; font-weight: 600; flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 64px; height: 64px; font-size: 22px; }

/* Empty, error, loading. */
.empty { padding: 28px 0; color: var(--ink-500); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.empty p { margin: 0; }
.notice { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-row); background: var(--row-soon); margin-bottom: 16px; }
.notice.error { background: var(--danger-soft); }
.notice.warn { background: var(--row-risk); }
.notice .btn { margin-left: auto; flex: none; }
.notice p { margin: 0; }
.skel { background: linear-gradient(90deg, var(--line-soft) 25%, var(--canvas) 37%, var(--line-soft) 63%); background-size: 400% 100%; border-radius: 4px; height: 12px; animation: skel 1.4s ease infinite; }
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Split view: the list and the detail beside it, as one card under the page head. */
.split { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); margin: 0 var(--gutter) 24px; flex: 1;
  height: calc(100vh - var(--top) - var(--bar, 0px) - 100px); height: calc(100dvh - var(--top) - var(--bar, 0px) - 100px); min-height: 420px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.split-list { border-right: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; min-width: 0; }
.split-list .list { border-top: 0; }
.split-head { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); display: grid; gap: 10px; position: sticky; top: 0; background: var(--surface); z-index: 2; }
.split-detail { overflow-y: auto; min-width: 0; }
.split-detail-inner { padding: 24px 32px 48px; max-width: 880px; }
.split-empty { height: 100%; display: grid; place-items: center; color: var(--ink-500); padding: 24px; text-align: center; }
@media (max-width: 1023px) and (min-width: 768px) { .split { grid-template-columns: 280px minmax(0, 1fr); margin: 0 16px 16px; } .split-detail-inner { padding: 20px 20px 40px; } }
@media (max-width: 767px) {
  .split { display: block; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; }
  .split-list { border: 0; overflow: visible; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .split-head { position: static; padding: 12px var(--gutter); background: var(--canvas); border-bottom: 1px solid var(--line); }
  .split[data-open="detail"] .split-list { display: none; }
  .split:not([data-open="detail"]) .split-detail { display: none; }
  .split-detail { background: var(--surface); min-height: calc(100dvh - var(--top) - var(--bar, 0px) - var(--tabs)); }
  .split-detail-inner { padding: 12px var(--gutter) 24px; }
  .split-list .list .row { margin: 0; padding: 0 var(--gutter); }
}

/* Sheets, dialogs, the palette, toasts: the only things that float. */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 60; animation: fade 140ms var(--ease); }
.scrim-clear { background: transparent; }
.sheet {
  position: fixed; z-index: 61; background: var(--surface); box-shadow: var(--shadow-float); display: flex; flex-direction: column;
  top: 12px; right: 12px; bottom: 12px; width: min(460px, calc(100vw - 24px)); border-radius: var(--r-sheet); border: 1px solid var(--line);
  animation: rise 160ms var(--ease); overflow: hidden;
}
.sheet-head { height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line-soft); flex: none; }
.sheet-head h2 { margin: 0 auto 0 0; font-size: var(--t-h); font-weight: 600; }
.sheet-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.sheet-foot { border-top: 1px solid var(--line-soft); padding: 12px 20px; flex: none; display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 767px) {
  .sheet { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 92dvh; border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding-bottom: env(safe-area-inset-bottom); border: 0; }
  .sheet::before { content: ""; width: 36px; height: 5px; border-radius: 3px; background: var(--line); position: absolute; top: 6px; left: 50%; transform: translateX(-50%); }
}
.dialog { position: fixed; z-index: 70; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px));
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-float); border: 1px solid var(--line); padding: 24px; animation: fade 140ms var(--ease); }
.dialog h2 { margin: 0 0 6px; font-size: var(--t-h); font-weight: 600; }
.dialog p { margin: 0 0 12px; color: var(--ink-500); font-size: var(--t-body); line-height: var(--t-body-lh); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* The palette. On a laptop its list drops from the top bar's field; on a phone it is a sheet from the top. */
.palette { position: fixed; z-index: 70; background: var(--surface); box-shadow: var(--shadow-float); border: 1px solid var(--line); overflow: hidden; animation: fade 120ms var(--ease); }
.palette.drop { border-radius: 0 0 19px 19px; border-top: 0; }
.palette.float { top: 10px; left: 50%; transform: translateX(-50%); width: min(620px, calc(100vw - 16px)); border-radius: var(--r-card); }
.palette input { width: 100%; height: 52px; border: 0; border-bottom: 1px solid var(--line-soft); padding: 0 16px; font-size: 16px; outline: none; box-shadow: none; background: none; }
.palette-list { max-height: min(60vh, 460px); overflow-y: auto; padding: 6px; margin: 0; list-style: none; }
.palette-group { padding: 10px 10px 4px; color: var(--ink-500); font-size: var(--t-cap); font-weight: 600; }
.palette-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--r-control); cursor: pointer; text-decoration: none; }
.palette-item[aria-selected="true"] { background: var(--canvas); }
.palette-item .hint { margin-left: auto; color: var(--ink-500); font-size: var(--t-cap); }
.palette-item .slot { color: var(--ink-500); }
.palette-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line-soft); color: var(--ink-500); font-size: var(--t-cap); }
@media (max-width: 767px) { .palette-item { height: 44px; } .palette-foot { display: none; } }

/* The notifications. */
.notices { position: fixed; z-index: 70; width: min(400px, calc(100vw - 16px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-float); overflow: hidden; animation: fade 120ms var(--ease); }
.notices-head { display: flex; align-items: center; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line-soft); }
.notices-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.notices-list { list-style: none; margin: 0; padding: 6px; max-height: min(60vh, 440px); overflow-y: auto; }
.notice-item { display: flex; gap: 10px; padding: 10px; border-radius: var(--r-control); text-decoration: none; color: inherit; }
.notice-item:hover { background: var(--canvas); }
.notice-item .avatar { margin-top: 1px; }
.notice-item p { margin: 0; line-height: 20px; }
.notice-item .when { display: block; color: var(--ink-500); font-size: var(--t-cap); }
.notice-item.new p b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--bell-dot); margin-left: 6px; vertical-align: middle; }
.notices-empty { padding: 20px 16px; color: var(--ink-500); margin: 0; }

/* A toast never takes a tap meant for what is under it; only its own action does. */
.toasts { position: fixed; z-index: 80; bottom: 24px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.toast { background: var(--ink-900); color: var(--on-dark); border-radius: var(--r-row); padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-float); animation: rise 160ms var(--ease); }
.toast.error { background: var(--danger); }
.toast button, .toast a { margin-left: auto; background: none; border: 0; color: var(--on-dark); font-weight: 600; cursor: pointer; text-decoration: underline; pointer-events: auto; }
@media (max-width: 767px) { .toasts { bottom: calc(var(--tabs) + 16px + env(safe-area-inset-bottom)); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.palette.float, .dialog { animation-name: fade; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ============================================================ the pages ==== */

/* Sign-in and the pages outside the frame: the mark on its dark tile, one white card. */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: 24px; padding: 32px 16px; background: var(--canvas); }
.auth-mark { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.auth-tile { width: 56px; height: 56px; border-radius: 16px; background: var(--side); display: grid; place-items: center; box-shadow: var(--shadow-card); }
.auth-mark b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.auth-mark span { color: var(--ink-500); font-size: var(--t-small); }
.auth-card { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 28px; }
.auth-card h1 { margin: 0 0 18px; font-size: var(--t-title); line-height: 28px; font-weight: 700; letter-spacing: -0.015em; }
.auth-card .btn-primary { width: 100%; height: 40px; }
/* Microsoft's sign-in button: white, a grey border, its four squares, its words (its branding guidance). */
.auth-card .btn-microsoft { width: 100%; height: 40px; gap: 10px; justify-content: center; font-weight: 600; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-500); font-size: var(--t-cap); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
/* Settings, Integrations: what the last Check connection found, step by step. */
.conn-steps { margin: 0; padding-left: 18px; }
.conn-steps li { margin: 2px 0; }
.auth-preview { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.auth-preview h2 { margin: 0 0 4px; font-size: var(--t-ui); font-weight: 600; }
.auth-preview .list.boxed { box-shadow: none; }
.auth-preview button.row { width: 100%; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: pointer; font: inherit; }
@media (max-width: 767px) { .auth-card { padding: 22px; } .auth-card .btn-primary, .auth-card .btn-microsoft { height: 44px; } }

/* The way in (Clinton, 21 October 2026: "the form ... on the right, simple and clean, while the left can be the logo";
   then the sister product's sign-in, "like that but for BMS"). The left is the company on the rail's dark, warming into
   BMS's green and indigo (from their website) towards the corner; its mark and name, its own headline, its registered
   name. The right is the form alone on white, in pills. On a phone the company is a band above the form. Scoped to
   .auth-split: the portal's guest sign-in and Sales' booking page keep the single card above. */
.auth:has(> .auth-split) { display: block; padding: 0; }
.auth-split { width: 100%; justify-self: stretch; align-self: stretch; min-height: 100vh; min-height: 100dvh; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--surface); }
.auth-brand-side { display: flex; flex-direction: column; padding: 56px 56px 44px; color: var(--on-dark); min-width: 0;
  background:
    radial-gradient(90% 75% at 95% 108%, color-mix(in srgb, var(--brand-green) 92%, transparent), transparent 74%),
    radial-gradient(60% 55% at 55% 95%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%),
    linear-gradient(160deg, var(--side) 0%, color-mix(in srgb, var(--side) 82%, var(--accent)) 100%); }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand .auth-tile { width: 40px; height: 40px; border-radius: 10px; background: var(--surface); box-shadow: none; }
.auth-brand b { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.auth-split .auth-brand svg path { stroke: none; }
.auth-hero-name { margin: auto 0; max-width: 13ch; font-size: clamp(40px, 4.2vw, 60px); line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; color: var(--on-dark); }
.auth-legal { margin: 0; color: color-mix(in srgb, var(--on-dark) 60%, transparent); font-size: var(--t-small); }
.auth-right { display: flex; align-items: center; padding: 48px; min-width: 0; }
.auth-split .auth-card { width: min(420px, 100%); margin: 0 auto; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.auth-split .auth-card h1 { margin: 0; font-size: 40px; line-height: 46px; font-weight: 700; letter-spacing: -0.03em; }
.auth-sub { margin: 14px 0 32px; color: var(--ink-500); font-size: 17px; line-height: 1.5; }
.auth-split .auth-card .field { margin-bottom: 18px; }
.auth-split .auth-card .field label { font-weight: 600; color: var(--ink-900); margin-bottom: 8px; }
.auth-split .auth-card .input { height: 52px; border-radius: 999px; padding: 0 22px; font-size: var(--t-body); }
.auth-split .auth-card .btn-primary, .auth-split .auth-card .btn-microsoft { width: 100%; height: 54px; font-size: 17px; font-weight: 600; border-radius: 999px; }
.auth-split .auth-card .btn-primary { background: var(--brand-green); border-color: var(--brand-green); }
.auth-split .auth-card .btn-primary:hover { background: color-mix(in srgb, var(--brand-green) 86%, var(--ink-900)); }
.auth-split .auth-card form > .btn-primary { margin-top: 10px; }
/* Microsoft's dark button (its sign-in branding allows the dark theme): its four squares and its words, on ink. */
.auth-split .auth-card .btn-microsoft { gap: 12px; justify-content: center; background: var(--ink-900); color: var(--on-dark); border: 0; box-shadow: none; }
.auth-split .auth-card .btn-microsoft:hover { background: var(--ink-700); color: var(--on-dark); }
.auth-split .auth-card .btn-microsoft[aria-busy] { opacity: 0.7; }
.auth-split .auth-card .notice { margin: 0 0 20px; border-radius: 14px; }
.auth-split .auth-or { margin: 24px 0; }
.auth-pw { position: relative; }
.auth-pw .input { padding-right: 76px; }
.auth-reveal { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); height: 34px; padding: 0 14px; border: 0; border-radius: 999px;
  background: none; color: var(--ink-500); font: inherit; font-size: var(--t-small); font-weight: 500; cursor: pointer; }
.auth-reveal:hover { background: var(--canvas); color: var(--ink-900); }
.auth-caps { color: var(--tone-due); padding-left: 22px; }
.auth-split .auth-card .field-help { padding-left: 22px; }
.auth-rules { list-style: none; margin: -4px 0 18px; padding: 0 0 0 22px; display: grid; gap: 4px; font-size: var(--t-small); color: var(--ink-500); }
.auth-rules li { display: flex; align-items: center; gap: 8px; }
.auth-rules li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; display: grid; place-items: center; font-size: 10px; line-height: 1; font-weight: 700; color: var(--surface); }
.auth-rules li.met { color: var(--ink-900); }
.auth-rules li.met::before { content: "✓"; border-color: var(--brand-green); background: var(--brand-green); }
.auth-cancel { width: 100%; margin-top: 12px; justify-content: center; border-radius: 999px; }
.auth-help { margin: 22px 0 0; color: var(--ink-500); font-size: var(--t-body); }
.auth-split .auth-preview { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.auth-split .auth-preview summary { cursor: pointer; color: var(--ink-500); font-size: var(--t-small); list-style: none; }
.auth-split .auth-preview summary::-webkit-details-marker { display: none; }
.auth-split .auth-preview[open] summary { margin-bottom: 12px; }
.auth-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.auth-person { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  text-align: left; font: inherit; cursor: pointer; min-width: 0; }
.auth-person:hover { border-color: var(--brand-green); }
.auth-person .avatar { width: 28px; height: 28px; font-size: 11px; flex: none; }
.auth-person b { display: block; font-size: var(--t-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-person span span { display: block; color: var(--ink-500); font-size: var(--t-cap); }
@media (max-width: 959px) {
  .auth-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .auth-brand-side { padding: 20px 16px 26px; }
  .auth-hero-name { margin: 40px 0 0; font-size: 32px; max-width: 16ch; }
  .auth-legal { display: none; }
  .auth-right { align-items: flex-start; padding: 32px 16px 28px; }
  .auth-split .auth-card h1 { font-size: 32px; line-height: 38px; }
  .auth-sub { margin-bottom: 24px; font-size: var(--t-body); }
}

/* Home. */
.greet { margin: 0 0 24px; }
.greet h1 { margin: 0; font-size: var(--t-greet); line-height: 34px; font-weight: 700; letter-spacing: -0.02em; }
.greet p { margin: 4px 0 0; color: var(--ink-500); font-size: 15px; line-height: 22px; }
.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.stat-card { display: block; padding: 22px 24px 20px; text-decoration: none; color: inherit; position: relative; transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease); }
a.stat-card:hover { border-color: var(--ink-400); }
.stat-card .tile { position: absolute; top: 20px; right: 20px; width: 28px; height: 28px; border-radius: 8px; }
.stat-card .tile svg { width: 15px; height: 15px; }
/* A label is never cut: it wraps, and on the phone every label keeps two lines of room so the numbers line up. */
.stat-label { display: block; padding-right: 36px; color: var(--ink-500); font-size: var(--t-label); line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; overflow-wrap: break-word; }
.stat-value { display: block; margin: 16px 0 8px; font-size: var(--t-stat); line-height: 40px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat-line { display: flex; align-items: center; gap: 4px; font-size: var(--t-small); line-height: 18px; font-weight: 500; }
.stat-line svg { width: 13px; height: 13px; stroke-width: 2; }
.tone-up { color: var(--tone-up); }
.tone-due { color: var(--tone-due); }
.tone-quiet { color: var(--tone-quiet); font-weight: 400; }
.home-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); margin-bottom: 32px; align-items: start; }
.home-row .card { height: 100%; }
.home-row.one { grid-template-columns: minmax(0, 1fr); }
.week { list-style: none; margin: 0; padding: 0; }
.week li { position: relative; padding: 0 0 0 20px; margin: 0 0 12px; font-size: var(--t-body); line-height: 24px; color: var(--ink-700); }
.week li:last-child { margin-bottom: 0; }
.week li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--green-fg); }
.week li b { font-weight: 600; color: var(--ink-900); }
.week li a { text-decoration: none; color: inherit; }
.week li a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-400); }
.meta-pill { margin-left: auto; padding: 3px 10px; border-radius: var(--r-pill); background: var(--canvas); color: var(--ink-500); font-size: var(--t-cap); line-height: 18px; white-space: nowrap; }
.attn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.attn a { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-row); text-decoration: none; color: inherit; transition: filter 120ms var(--ease); }
.attn a:hover { filter: brightness(0.98); }
.attn .risk { background: var(--row-risk); }
.attn .soon { background: var(--row-soon); }
.attn svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
/* A row with its one fix beside it: the row's tint holds both, the button at the end. */
.attn li.attn-acts { display: flex; align-items: center; gap: 8px; border-radius: var(--r-row); padding-right: 12px; }
.attn li.attn-acts > a { flex: 1; min-width: 0; background: none; }
.attn li.attn-acts.risk { background: var(--row-risk); }
.attn li.attn-acts.soon { background: var(--row-soon); }
.attn .attn-act { flex: none; }
.attn .risk svg { color: var(--row-risk-ink); }
.attn .soon svg { color: var(--ink-500); }
.attn b { display: block; font-weight: 600; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attn span { display: block; color: var(--row-reason); font-size: var(--t-small); line-height: 18px; }
.attn-text { min-width: 0; }
.attn-empty { margin: 0; color: var(--ink-500); }
.attn-all { display: block; margin-top: 10px; padding: 8px 16px; border-radius: var(--r-row); color: var(--ink-500); font-size: var(--t-small); font-weight: 500; text-decoration: none; }
.attn-all:hover { color: inherit; background: var(--row-soon); }
.attn-page { display: grid; gap: 16px; max-width: 760px; }
.home-h { margin: 0 0 14px; font-size: var(--t-h); line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.apps-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.app-card { display: flex; flex-direction: column; gap: 4px; padding: 20px; min-height: 128px; text-decoration: none; color: inherit; transition: border-color 120ms var(--ease); }
a.app-card:hover { border-color: var(--ink-400); }
.app-card .tile { margin-bottom: 12px; }
.app-card b { font-size: 15px; line-height: 20px; font-weight: 600; }
.app-card span { color: var(--ink-500); font-size: var(--t-small); line-height: 18px; }
.app-card.off { box-shadow: none; background: var(--surface-2); }
.app-card.off b { color: var(--ink-500); }
.app-card.off .tile { filter: grayscale(1); opacity: 0.6; }
.app-card .app-state { margin-top: auto; padding-top: 8px; color: var(--ink-500); font-size: var(--t-cap); font-weight: 500; }
.home-quiet { margin: 0 0 32px; color: var(--ink-500); }
/* A Home panel (registry.ts HomePanel): Your time this month, its steps in a row of four, each holding the next. */
.home-panel { margin-bottom: var(--gap); }
.home-panel .card-head .meta { margin-left: auto; color: var(--ink-500); font-size: var(--t-small); font-weight: 500; text-decoration: none; }
.home-panel .card-head .meta:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.home-panel-line { margin: 0 0 16px; font-size: var(--t-body); line-height: 22px; }
.home-panel-line .state { white-space: normal; align-items: baseline; }
.home-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); counter-reset: step; }
.home-steps li { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--r-row); background: var(--canvas); min-width: 0; }
.home-step-label { color: var(--ink-500); font-size: var(--t-label); line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.home-step-value { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.home-step-sub { color: var(--ink-500); font-size: var(--t-small); line-height: 18px; }
@media (max-width: 767px) { .home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .home-steps li { padding: 12px; } }
@media (max-width: 1180px) { .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .apps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .home-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .greet h1 { font-size: 28px; }
  .greet { margin-bottom: 16px; }
  .stats-row { gap: 10px; }
  .stat-card { padding: 16px; }
  .stat-card .tile { top: 14px; right: 14px; }
  .stat-label { font-size: 11px; line-height: 15px; padding-right: 30px; min-height: 30px; }
  .stat-value { font-size: 30px; line-height: 34px; margin: 12px 0 6px; }
  .home-row { gap: 12px; margin-bottom: 24px; }
  .card-pad { padding: 18px; }
  .apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .app-card { padding: 16px; min-height: 0; }
}

/* Mail: the reading pane. */
.thread-head { display: grid; gap: 10px; margin-bottom: 16px; }
.thread-head h2 { margin: 0; font-size: var(--t-title); line-height: 28px; font-weight: 700; letter-spacing: -0.015em; }
.thread-facts { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; color: var(--ink-500); }
/* One row on a laptop: Done and Snooze are icons, named on hover and to a screen reader. */
.thread-actions { display: flex; gap: 6px; flex-wrap: nowrap; }
.thread-actions .btn { padding: 0 12px; }
@media (min-width: 768px) {
  .thread-actions .act-label { display: none; }
  .thread-actions .btn:has(.act-label) { width: var(--ctl); padding: 0; }
}
.msg { border-bottom: 1px solid var(--line-soft); padding: 16px 0; }
.msg-head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.msg-head b { font-weight: 600; }
.msg-head .when { margin-left: auto; color: var(--ink-500); white-space: nowrap; font-variant-numeric: tabular-nums; font-size: var(--t-small); }
.msg-head .muted { font-size: var(--t-cap); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.msg-to { color: var(--ink-500); font-size: var(--t-cap); margin: 2px 0 0 36px; }
.msg-body { margin: 10px 0 0 36px; font-size: var(--t-body); line-height: var(--t-body-lh); overflow-wrap: anywhere; }
.msg-body p { margin: 0 0 10px; }
.msg-body .fold { color: var(--ink-500); }
.msg-files { margin: 8px 0 0 36px; display: flex; gap: 8px; flex-wrap: wrap; }
.msg.folded .msg-body { display: none; }
.msg.folded .msg-snippet { display: block; }
.msg-snippet { display: none; margin: 4px 0 0 36px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) { .msg-body, .msg-files, .msg-to, .msg-snippet { margin-left: 0; } .msg-head .muted { display: none; } }
.draft { border: 1px solid var(--line); border-radius: var(--r-row); margin: 16px 0; overflow: hidden; background: var(--surface); }
.draft-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); flex-wrap: wrap; }
.draft-body { padding: 14px 16px; font-size: var(--t-body); line-height: var(--t-body-lh); white-space: pre-wrap; overflow-wrap: anywhere; }
.draft-checks { border-top: 1px solid var(--line-soft); padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.check { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-500); font-size: var(--t-cap); }
.check.fail { color: var(--danger); font-weight: 500; }
.check svg { width: 12px; height: 12px; stroke-width: 2; }
.draft-foot { border-top: 1px solid var(--line-soft); padding: 10px 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.draft-foot .cap { flex: 1 1 100%; margin: 0 0 2px; }
.draft-foot .draft-score { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.draft-foot .draft-score .cap { flex: 0 0 auto; margin: 0; }
.comments { margin-top: 24px; }
.comment { display: flex; gap: 10px; padding: 8px 0; }
.comment-body { background: var(--canvas); border-radius: var(--r-row); padding: 10px 14px; font-size: var(--t-body); line-height: var(--t-body-lh); flex: 1; }
.composer { border: 1px solid var(--line); border-radius: var(--r-row); margin-top: 16px; overflow: hidden; background: var(--surface); }
.composer-line { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-bottom: 1px solid var(--line-soft); }
.composer-line label { color: var(--ink-500); width: 56px; flex: none; }
.composer-line input { flex: 1; border: 0; outline: none; height: 40px; background: none; min-width: 0; }
.composer textarea { border: 0; border-radius: 0; min-height: 200px; }
.composer textarea:focus { box-shadow: none; }
.composer-steer { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line-soft); background: var(--surface-2); align-items: center; flex-wrap: wrap; }
.composer-steer .input { flex: 1; min-width: 180px; }
.composer-status { color: var(--ink-500); font-size: var(--t-cap); padding: 6px 14px; border-top: 1px solid var(--line-soft); }
.composer-foot { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line-soft); align-items: center; flex-wrap: wrap; }
.composer-foot .grow { flex: 1; }
.coach { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 14px; border-top: 1px solid var(--line-soft); }
.em p { margin: 0 0 10px; }
.em ul, .em ol { margin: 0 0 10px; padding-left: 20px; }
.em blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 2px solid var(--line); color: var(--ink-500); }
.em table { border-collapse: collapse; margin: 0 0 10px; }
.em td, .em th { border: 1px solid var(--line); padding: 4px 8px; }
.em-signoff { color: var(--ink-900); }
.em-fold { margin: 6px 0; }
.em-fold > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; color: var(--ink-500); font-size: var(--t-cap); }
.em-fold > summary::-webkit-details-marker { display: none; }
.em-foldlbl { font-weight: 500; white-space: nowrap; }
.em-foldpeek { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-foldbody { padding: 6px 0 0 12px; border-left: 2px solid var(--line); margin-top: 6px; color: var(--ink-500); }
.em-raw { white-space: pre-wrap; font: inherit; margin: 0; }
.row-title > .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
.row-title > b { flex-shrink: 0; max-width: 62%; }
/* Alone in its row, a title takes the row: the cap above leaves room for what sits beside it. */
.row-title > b:only-child { flex-shrink: 1; min-width: 0; max-width: 100%; }
@media (min-width: 768px) { body:has([data-split]) { overflow: hidden; } }
@media (max-width: 767px) {
  .thread-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .thread-actions .btn { flex-direction: column; height: 54px; padding: 4px 0; gap: 3px; font-size: 12px; line-height: 14px; min-width: 0; }
  .thread-actions .btn svg { width: 18px; height: 18px; }
  [data-split="mail"] .row-meta svg, [data-split="mail"] .row-meta .avatar { display: none; }
  .thread-facts { gap: 0 6px; }
  .thread-facts .sep { display: none; }
}
[data-split="approvals"] .row-title b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: none; min-width: 0; flex: 1 1 auto; }
[data-split="approvals"] .row { align-items: flex-start; }
[data-split="approvals"] .row-meta { padding-top: 1px; }
/* Approvals, made clear (21 October 2026): the rows under the app each comes from, the From menu beside the views, and
   each review's first line its app and the way to its own page there. */
.ap-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ap-from-filter { display: contents; }
.ap-group { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; font-size: var(--t-cap); font-weight: 600; color: var(--ink-500); letter-spacing: 0.01em; }
.ap-group .tile { width: 20px; height: 20px; border-radius: 6px; }
.ap-group .tile svg { width: 12px; height: 12px; }
.ap-group .count { margin-left: auto; font-weight: 500; color: var(--ink-400); }
.ap-group:not(:first-child) { border-top: 1px solid var(--line-soft); margin-top: 6px; }
.ap-from { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 8px 10px 8px 8px; border-radius: 10px; background: var(--surface-2); color: var(--ink-700); font-size: var(--t-small); }
.ap-from .tile { width: 24px; height: 24px; border-radius: 7px; }
.ap-from .tile svg { width: 14px; height: 14px; }
.ap-from .btn { margin-left: auto; height: 30px; }
.ap-from .btn svg { width: 14px; height: 14px; margin: 0 0 0 4px; }

/* Assist (pages/assistant.ts, ask.js; complete.md Pass 11). The panel floats beside the page and is never modal: no
   scrim, the page stays live under and beside it. The full page at /assist is laid out as Claude's app is: the
   conversations on the left, a reading column in the middle, the composer at its foot. */
.ask-panel {
  position: fixed; z-index: 55; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw;
  display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-float); animation: ask-in 160ms var(--ease);
}
.ask-panel[hidden] { display: none; }
/* Beside the page, never over it (complete.md Pass 9): on a laptop the page narrows by the panel's width while it is
   open, so a record's details stay in view; on a phone the panel is the screen. */
@media (min-width: 1100px) {
  .frame { transition: padding-right 160ms var(--ease); }
  body.ask-open .frame { padding-right: 420px; }
  body.ask-open .ask-panel { box-shadow: none; }
}
/* Below 1600 wide, the page gets the app sidebar's width back while the panel is open, so a record keeps its layout. */
@media (min-width: 1100px) and (max-width: 1599px) {
  body.in-app.ask-open .frame { grid-template-columns: minmax(0, 1fr); }
  body.in-app.ask-open .app-side { display: none; }
}
@keyframes ask-in { from { transform: translateX(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.ask-head { display: flex; align-items: center; gap: 4px; padding: 10px 8px 10px 20px; border-bottom: 1px solid var(--line-soft); flex: none; }
.ask-title { flex: 1; min-width: 0; }
.ask-title h2 { margin: 0; font-size: var(--t-h); font-weight: 600; }
.ask-about { margin: 2px 0 0; font-size: var(--t-cap); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-log { flex: 1; overflow-y: auto; padding: 8px 20px 12px; overscroll-behavior: contain; }
.ask-empty p { margin: 16px 0 12px; color: var(--ink-500); }
.ask-starter { height: auto; min-height: 32px; white-space: normal; text-align: left; padding: 6px 12px; }
.ask-foot { padding: 8px 12px 12px; flex: none; }

/* The composer: one rounded box holding the files, the words and its tools, as Claude's and ChatGPT's are. */
.ask { display: grid; gap: 8px; min-width: 0; }
.ask > * { min-width: 0; }
.ask-box { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 10px 10px 8px 14px;
  box-shadow: var(--shadow-hair); transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease); }
.ask-box:focus-within { border-color: var(--ink-400); box-shadow: var(--shadow-card); }
.ask-text { border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--ink-900);
  min-height: 24px; max-height: 220px; padding: 2px 0; width: 100%; }
.ask-text::placeholder { color: var(--ink-500); }
.ask-text:focus, .ask-text:focus-visible { outline: 0; box-shadow: none; }
.ask-tools { display: flex; align-items: center; gap: 4px; margin-left: -6px; }
.ask-tools-gap { flex: 1; }
.ask-tools .btn-icon { width: 32px; height: 32px; }
.ask-send.btn-icon { width: 32px; height: 32px; border-radius: 999px; }
.ask-send[disabled] { opacity: 0.45; cursor: default; }
.ask-about-menu .menu-btn { max-width: 260px; font-size: var(--t-small); color: var(--ink-600, var(--ink-700)); }
.ask-files { display: flex; flex-wrap: wrap; gap: 6px; max-height: 168px; overflow-y: auto; padding-bottom: 2px; }
.ask-files[hidden] { display: none; }
.ask-file { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; min-height: 40px; padding: 4px 6px 4px 8px;
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); font-size: var(--t-cap); line-height: 16px; }
.ask-file > svg { width: 16px; height: 16px; flex: none; color: var(--ink-500); }
.ask-file-text { display: grid; min-width: 0; }
.ask-file-text b { font-weight: 500; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-file-text span { color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-file[data-state="held"], .ask-file[data-state="unread"] { background: var(--row-risk); border-color: transparent; }
.ask-file[data-state="held"] > svg, .ask-file[data-state="unread"] > svg, .ask-file[data-state="held"] .ask-file-text span, .ask-file[data-state="unread"] .ask-file-text span { color: var(--row-risk-ink); }
.ask-file[data-state="checking"] > svg { animation: ask-pulse 1.2s ease-in-out infinite; }
@keyframes ask-pulse { 50% { opacity: 0.35; } }
.ask-file-x { border: 0; background: transparent; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--ink-500); cursor: pointer; flex: none; }
.ask-file-x:hover { background: var(--hover); color: var(--ink-900); }
.ask-file-x svg { width: 14px; height: 14px; }
.ask-dropping .ask-box, .ask-box.ask-dropping { border-color: var(--accent); box-shadow: var(--accent-ring); }
.ask-modes, .ask .seg.ask-fields { justify-self: start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ask-modes::-webkit-scrollbar, .ask .seg.ask-fields::-webkit-scrollbar { display: none; }
.ask-modes { display: flex; gap: 6px; flex-wrap: wrap; }
.ask-modes .chip { height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-700); font: inherit; font-size: var(--t-small); cursor: pointer; }
.ask-modes .chip:hover { border-color: var(--ink-400); color: var(--ink-900); }
.ask-modes .chip[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: var(--on-dark); }
.ask .seg [role="radio"][aria-checked="true"] { background: var(--surface); color: var(--ink-900); box-shadow: var(--shadow-seg); }
.ask-fields:not(.seg) { display: grid; gap: 6px; }
.ask-fields[hidden] { display: none; }
.ask-list { list-style: none; margin: 0; padding: 0; max-height: 216px; overflow-y: auto; }
.ask-list[hidden], .ask-list .ask-item[hidden] { display: none; }
.ask-item { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; border-radius: var(--r-control); cursor: pointer; }
.ask-item[aria-selected="true"], .ask-item:hover { background: var(--hover); }
.ask-item .slot { color: var(--ink-500); }
.ask-item svg { width: 14px; height: 14px; color: var(--ink-500); }

/* The conversation. The person's words sit on the right in a soft bubble; an answer reads as a page. */
.turns { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; }
.turn { padding: 10px 0; }
.turn-mine { display: grid; justify-items: end; gap: 6px; padding: 16px 0 4px; }
.turn-mine .turn-q { max-width: 85%; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 16px 16px 4px 16px; padding: 8px 14px;
  font-weight: 400; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.turn-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 85%; }
.turn-q { font-weight: 600; margin-bottom: 6px; }
.turn-a { font-size: var(--t-body); line-height: var(--t-body-lh); overflow-wrap: anywhere; }
.turn-a:empty { display: none; }
.turn-a p { margin: 0 0 10px; }
.turn-a h4 { margin: 12px 0 6px; font-size: var(--t-ui); font-weight: 600; }
.turn-a ul, .turn-a ol { margin: 0 0 10px; padding-left: 20px; }
.turn-a code { font-size: 12px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: 0 4px; }
.turn-a table { border-collapse: collapse; margin: 0 0 10px; font-size: var(--t-ui); display: block; overflow-x: auto; }
.turn-a td, .turn-a th { border-bottom: 1px solid var(--line-soft); padding: 4px 10px 4px 0; text-align: left; font-variant-numeric: tabular-nums; }
.turn-steps { margin: 0 0 8px; font-size: var(--t-small); color: var(--ink-500); }
.turn-steps[hidden] { display: none; }
.turn-steps summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; min-height: 24px; border-radius: 6px; padding: 0 6px 0 2px; }
.turn-steps summary::-webkit-details-marker { display: none; }
.turn-steps summary:hover { color: var(--ink-900); background: var(--hover); }
.turn-steps summary svg { width: 14px; height: 14px; flex: none; }
.turn-steps[open] summary svg { animation: ask-pulse 1.2s ease-in-out infinite; }
.turn-steps:not([open]) summary svg { animation: none; color: var(--live); }
.turn-steps ol { margin: 4px 0 0 8px; padding-left: 14px; border-left: 1px solid var(--line); list-style: none; }
.turn-steps li { padding: 2px 0 2px 6px; }
.turn-read { margin: 0 0 8px; font-size: var(--t-cap); color: var(--ink-500); }
.turn-sources { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; font-size: var(--t-cap); }
.turn-sources a { color: var(--accent); }
.turn-file { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-500); }
.turn-file svg { width: 12px; height: 12px; }
.turn-actions { display: flex; gap: 2px; margin: 6px 0 0 -8px; }
.turn-actions .btn { height: 28px; padding: 0 8px; font-size: var(--t-small); color: var(--ink-500); gap: 6px; }
.turn-actions .btn:hover { color: var(--ink-900); }
.turn-actions svg { width: 14px; height: 14px; }
.turn-status { color: var(--ink-500); font-size: var(--t-cap); padding: 4px 0; }
.turn-status:empty { display: none; }
.ask-hint { margin: 0 0 12px; color: var(--ink-500); }
.ask-card { margin: 4px 0 8px; border: 1px solid var(--line); border-radius: var(--r-row); padding: 12px 14px; background: var(--surface); }
.ask-card h3 { margin: 0 0 8px; font-size: var(--t-ui); font-weight: 600; }
.ask-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: var(--t-ui); }
.ask-card dt { color: var(--ink-500); }
.ask-card dd { margin: 0; overflow-wrap: anywhere; }
.ask-card-actions { display: flex; gap: 8px; }
.ask-card-result { margin: 0; font-size: var(--t-ui); }
.ask-card-result.error { color: var(--danger); }
.ask-card[data-state="done"] { border-color: var(--line-soft); }
.ask-note { display: flex; align-items: center; gap: 8px; font-size: var(--t-cap); color: var(--ink-500); }

/* Assist's page. */
.content.flush:has(> .assist) { height: calc(100dvh - var(--top) - var(--bar, 0px)); min-height: 0; }
.assist { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); border-top: 1px solid var(--line-soft); }
/* A page with a sidebar of its own beside the Hub's rail (Assist): one column, the page draws the rest. */
body.own-side .frame { grid-template-columns: minmax(0, 1fr); }
.assist.side-closed { grid-template-columns: minmax(0, 1fr); }
.assist.side-closed .assist-side { display: none; }
.assist-reopen { display: none; gap: 2px; margin-right: 6px; }
.assist.side-closed .assist-reopen { display: inline-flex; }
.assist.side-closed .assist-head-empty { border-bottom-color: transparent; }
.assist-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line-soft); background: var(--surface-2); padding: 14px 10px 10px; gap: 8px; }
.assist-side-head { display: flex; gap: 6px; }
.assist-new { flex: 1; justify-content: center; }
.assist-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); }
.assist-search svg { width: 14px; height: 14px; color: var(--ink-500); flex: none; }
.assist-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--t-small); min-width: 0; flex: 1; }
.assist-search:focus-within { border-color: var(--ink-400); }
.assist-search input:focus, .assist-search input:focus-visible { outline: 0; box-shadow: none; }
.assist-filter .menu-btn { font-size: var(--t-small); }
.assist-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.assist-group h3 { margin: 12px 8px 4px; font-size: var(--t-group); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-400); }
.assist-group ul { list-style: none; margin: 0; padding: 0; }
.assist-row { position: relative; display: flex; align-items: center; border-radius: var(--r-control); }
.assist-row:hover, .assist-row:focus-within { background: var(--hover); }
.assist-row a { flex: 1; min-width: 0; display: grid; padding: 7px 8px; color: var(--ink-900); text-decoration: none; border-radius: var(--r-control); }
.assist-row a[aria-current="page"] { background: var(--press); font-weight: 600; }
.assist-row-title { font-size: var(--t-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assist-row-about { font-size: var(--t-cap); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.assist-row .menu-btn { position: absolute; right: 2px; opacity: 0; width: 28px; height: 28px; }
.assist-row:hover .menu-btn, .assist-row:focus-within .menu-btn, .assist-row .menu-btn[aria-expanded="true"] { opacity: 1; }
.assist-row:hover a, .assist-row:focus-within a { padding-right: 32px; }
.assist-none { margin: 16px 8px; color: var(--ink-500); font-size: var(--t-small); }
.assist-deleted { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--r-control); font-size: var(--t-small); color: var(--ink-500); text-decoration: none; }
.assist-deleted:hover { background: var(--hover); color: var(--ink-900); }
.assist-deleted svg { width: 14px; height: 14px; }
.assist-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface); position: relative; }
.assist-head { display: flex; align-items: center; gap: 4px; padding: 10px 16px 10px 24px; min-height: 52px; border-bottom: 1px solid var(--line-soft); flex: none; }
.assist-head-empty { border-bottom-color: transparent; }
.assist-title { flex: 1; min-width: 0; margin: 0; font-size: var(--t-ui); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assist-head [data-assist-pin][aria-pressed="true"] { color: var(--ink-900); }
.assist-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.assist-col { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px; }
.assist-scroll .assist-col { padding-top: 16px; padding-bottom: 24px; }
.assist-empty { padding: 14vh 0 24px; text-align: center; }
.assist-empty h2 { margin: 0 0 8px; font-size: var(--t-greet); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.assist-empty p { margin: 0 auto; max-width: 460px; color: var(--ink-500); }
.assist-empty[hidden] { display: none; }
.assist-foot { flex: none; padding: 8px 0 14px; background: linear-gradient(to bottom, transparent, var(--surface) 12px); }
.assist-chat.ask-dropping .ask-box { border-color: var(--accent); box-shadow: var(--accent-ring); }
.hub-group-assist { height: 1px; margin: 14px 6px 8px; padding: 0; background: var(--side-rule); }

@media (max-width: 767px) {
  /* On a phone the panel is a sheet that rises over the tab bar. */
  .ask-panel { top: auto; left: 0; width: 100%; height: 88dvh; border-left: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0; z-index: 65;
    padding-bottom: env(safe-area-inset-bottom); animation: rise 160ms var(--ease); }
  .ask-head { padding-top: 16px; }
  .ask-head::before { content: ""; width: 36px; height: 5px; border-radius: 3px; background: var(--line); position: absolute; top: 6px; left: 50%; transform: translateX(-50%); }
  .ask-text { font-size: 16px; }
  .ask .seg button { padding: 0 10px; }
  /* Assist's page is the conversation; the list is a sheet over it, from the button at the top left. */
  .content.flush:has(> .assist) { height: calc(100dvh - var(--top) - var(--bar, 0px) - var(--tabs) - env(safe-area-inset-bottom)); padding-bottom: 0; }
  .assist { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .assist-side { position: fixed; z-index: 66; inset: 0 0 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); display: none; background: var(--surface); }
  .assist.list-open .assist-side { display: flex; }
  .assist-head { padding: 6px 8px 6px 8px; min-height: 44px; }
  /* The conversation's name is in Assist's own head, with its Pin and menu; the top bar doesn't repeat it. */
  body:has(.assist) .bar-title { visibility: hidden; }
  .assist-col { padding: 0 16px; }
  .assist-empty { padding-top: 8vh; }
  .assist-empty h2 { font-size: 24px; }
  .assist-row .menu-btn { opacity: 1; }
  .assist-row a { padding-right: 32px; }
  .ask-file { max-width: 100%; }
}
@media (min-width: 768px) { .assist .phone-only { display: none; } }
@media (max-width: 767px) {
  .assist .laptop-only { display: none !important; }
  /* On a phone the list is always a sheet, whatever the laptop remembered. */
  .assist.side-closed { grid-template-columns: minmax(0, 1fr); }
  .assist.side-closed.list-open .assist-side { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .ask-panel { animation: none; } .ask-file[data-state="checking"] > svg, .turn-steps[open] summary svg { animation: none; } }

/* Tables. */
table.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-weight: 500; color: var(--ink-500); height: var(--row); border-bottom: 1px solid var(--line-soft); padding: 0 12px 0 0; white-space: nowrap; font-size: var(--t-small); }
.table td { height: var(--row); border-bottom: 1px solid var(--line-soft); padding: 8px 12px 8px 0; vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table tr[data-href]:hover td { background: var(--surface-2); cursor: pointer; }
.table-wrap { overflow-x: auto; }
.table .avatar { width: 30px; height: 30px; }
.table .menu-quiet { margin-left: -8px; }
tr.muted td, .muted b { color: var(--ink-500); }
@media (max-width: 767px) {
  .table.stack thead { display: none; }
  .table.stack tr { display: grid; padding: 12px 0; border-bottom: 1px solid var(--line-soft); gap: 4px; }
  .table.stack tr:last-child { border-bottom: 0; }
  .table.stack td { height: auto; border: 0; padding: 0; }
  .table.stack td.num { text-align: left; }
}
.bars { display: flex; align-items: flex-end; gap: 3px; height: 36px; }
.bars span { flex: 1; background: var(--live); border-radius: 2px 2px 0 0; min-height: 2px; }
.bars span.down { background: var(--danger); }
.bars span.warn { background: var(--tone-due); }
.bars span.none { background: var(--line); }
.bars span.spend { background: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.stat { display: grid; gap: 4px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.stat b { font-size: 26px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.diff { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; white-space: pre-wrap; background: var(--canvas); border-radius: var(--r-control); padding: 10px 12px; overflow-x: auto; }

/* Settings and every page inside its frame. */
.pane { max-width: 920px; }
.pane > .card + .card, .pane > .card + h2.section, .pane > h2.section + .card, .pane > form > .card + .card, .pane > .notice + form, .pane > .card + p { margin-top: var(--gap); }
.pane > h2.section { margin-top: 32px; }
.pane > h2.section:first-child { margin-top: 0; }
.settings-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); }
.settings-index a { display: flex; flex-direction: column; gap: 4px; padding: 20px; text-decoration: none; color: inherit; }
.settings-index a:hover { border-color: var(--ink-400); }
.settings-index .tile { margin-bottom: 10px; }
.settings-index a > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.settings-index b { font-size: 15px; font-weight: 600; }
.settings-index span { color: var(--ink-500); font-size: var(--t-small); line-height: 18px; }
@media (max-width: 767px) { .settings-index { grid-template-columns: minmax(0, 1fr); gap: 10px; } .settings-index a { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; } .settings-index .tile { margin: 0; } .settings-index a > div { display: flex; flex-direction: column; min-width: 0; } }

/* The menu: the one choosing control (src/web/menu.ts). */
.menu-btn { display: inline-flex; align-items: center; gap: 4px; height: var(--ctl); padding: 0 8px; border-radius: var(--r-control);
  border: 1px solid transparent; background: none; color: var(--ink-900); font-weight: 500; cursor: pointer; max-width: 100%; min-width: 0; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: var(--hover); }
.menu-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.menu-prefix { color: var(--ink-500); font-weight: 400; white-space: nowrap; }
.menu-chevron { width: 14px; height: 14px; flex: none; color: var(--ink-500); stroke-width: 2; }
.menu-field { border-color: var(--line); background: var(--surface); justify-content: space-between; padding: 0 12px; font-weight: 400; width: 100%; }
.toolbar .menu-field { width: auto; }
.menu-icon { width: var(--ctl); padding: 0; justify-content: center; color: var(--ink-500); }
.menu-icon svg { width: 16px; height: 16px; }
.menu-pop { position: fixed; z-index: 75; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-row);
  box-shadow: var(--shadow-float); max-width: 320px; animation: fade 120ms var(--ease); overflow: hidden; }
.menu-pop .menu-list { max-height: 300px; }
.menu-filter { width: 100%; height: 40px; border: 0; border-bottom: 1px solid var(--line-soft); padding: 0 14px; outline: none; box-shadow: none; background: none; font-size: var(--t-ui); }
.menu-list:focus { outline: none; box-shadow: none; }
.menu-tick { width: 14px; flex: none; display: inline-flex; }
.menu-tick svg { width: 14px; height: 14px; color: var(--accent); stroke-width: 2; }
.menu-danger { color: var(--danger); }
.menu-sheet .menu-list { max-height: 60vh; overflow-y: auto; padding: 6px; }
.menu-sheet .menu-filter { height: 44px; padding: 0 16px; font-size: 16px; }
.thread-facts .menu-btn { margin-left: -8px; }
.thread-facts .sep { color: var(--ink-400); }
@media (max-width: 767px) { .thread-facts .menu-btn { height: 34px; } }

/* =========================================================== odds and ends === */

.phone-only { display: none; }
@media (max-width: 767px) { .phone-only { display: inline-flex; } .filters.phone-only { display: flex; } .laptop-only { display: none !important; } }
button.row { width: 100%; border: 0; border-bottom: 1px solid var(--line-soft); background: var(--surface); text-align: left; font: inherit; color: inherit; cursor: pointer; }
label.row { cursor: pointer; }
.row svg { width: 16px; height: 16px; flex: none; color: var(--ink-500); }
.row-meta svg { width: 14px; height: 14px; }
[aria-busy="true"] { cursor: progress; }
.split-detail[aria-busy="true"] > * { opacity: 0.55; transition: opacity 120ms var(--ease); }
.kv > dd .input { max-width: 360px; }
.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ the kit ---
   Pass 0, the frame (hub-complete-a, 10 October 2026): the one form, Delete's
   confirm and Recently deleted. Every app uses these; none restyles them. */

.btn-primary.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-dark); }
.btn-primary.btn-danger:hover { background: var(--danger); border-color: var(--danger); filter: brightness(0.94); }

/* The form: sections, labels above, two columns, Edit then Save (Elvis's page 3). */
.kit-form { padding: 0; }
.kit-head { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 10px 16px 10px 24px; border-bottom: 1px solid var(--line-soft); }
.kit-head h2 { margin: 0 auto 0 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.kit-state { color: var(--ink-500); font-size: var(--t-cap); line-height: var(--t-cap-lh); }
.kit-state.ok { color: var(--tone-up); }
.kit-state.ok::before { content: "✓ "; }
.kit-state.warn { color: var(--danger); }
.kit-edit-actions { display: none; gap: 8px; }
.kit-form.editing .kit-edit-actions { display: inline-flex; }
.kit-form.editing .kit-read-actions { display: none; }
.kit-section { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 0 24px; padding: 20px 24px; border-top: 1px solid var(--line-soft); }
.kit-head + .kit-section { border-top: 0; }
.kit-section-title { margin: 2px 0 0; font-size: var(--t-ui); line-height: var(--t-ui-lh); font-weight: 600; color: var(--ink-900); }
.kit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.kit-field { min-width: 0; display: flex; flex-direction: column; }
.kit-field.wide { grid-column: 1 / -1; }
.kit-label { color: var(--ink-500); font-size: var(--t-cap); line-height: var(--t-cap-lh); margin-bottom: 4px; }
.kit-req { color: var(--ink-400); }
.kit-val { display: block; width: 100%; min-height: 32px; padding: 6px 0; text-align: left; font: inherit; color: var(--ink-900);
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; cursor: text; overflow-wrap: anywhere; }
.kit-val:hover { border-bottom-color: var(--ink-400); }
.kit-val:focus-visible { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.kit-val-fixed { cursor: default; color: var(--ink-700); }
.kit-val-fixed:hover { border-bottom-color: var(--line); }
.kit-prompt { color: var(--ink-500); }
/* A record's Details rail opens the form on the value clicked. */
.rail-edit { color: inherit; text-decoration: none; display: block; border-radius: 4px; }
.rail-edit:hover { text-decoration: underline; text-underline-offset: 3px; }
.rec-form-page { display: grid; gap: 16px; }
/* The form inside a sheet: no card, the sheet's own padding, the actions at its foot. */
.kit-sheet .kit-section { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 0 16px; border-top: 0; }
.kit-sheet .kit-grid { grid-template-columns: minmax(0, 1fr); }
.kit-sheet .kit-section:only-of-type .kit-section-title { display: none; }
.kit-sheet .kit-section + .kit-section { padding-top: 16px; border-top: 1px solid var(--line-soft); }
.kit-sheet-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.kit-sheet-foot .kit-state { margin-right: auto; }
.kit-msg-act { display: inline-flex; gap: 8px; margin-left: 8px; vertical-align: baseline; }
.kit-msg-act a, .kit-msg-act button { font: inherit; color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; }
.fill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kit-ctl { display: none; }
.kit-form.editing .kit-field:not(.fixed) .kit-val { display: none; }
.kit-form.editing .kit-ctl { display: block; }
.kit-input { display: block; width: 100%; min-height: 32px; padding: 6px 0; font: inherit; color: var(--ink-900); background: transparent;
  border: 0; border-bottom: 1px solid var(--ink-400); border-radius: 0; outline: none; resize: vertical; }
.kit-input::placeholder { color: var(--ink-500); }
.kit-input:focus { border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.kit-ctl .menu-field { min-height: 32px; border: 0; border-bottom: 1px solid var(--ink-400); border-radius: 0; padding: 0; background: transparent; }
.kit-check { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.kit-msg { margin: 4px 0 0; font-size: var(--t-cap); line-height: var(--t-cap-lh); color: var(--danger); }
.kit-msg:empty { display: none; }
.kit-ctl > .field-help { margin: 4px 0 0; }
.kit-field.invalid .kit-input, .kit-field.invalid .menu-field { background: var(--danger-soft); border-bottom-color: var(--danger); padding-left: 8px; padding-right: 8px; }
.kit-field.invalid .kit-msg::before { content: "! "; font-weight: 600; }

/* History: each Save, who and when, then each change in the screen's words. */
.kit-history { list-style: none; margin: 0; padding: 0; }
.kit-history > li { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.kit-history > li:first-child { border-top: 0; padding-top: 0; }
.kit-history-head { margin: 0 0 6px; }
.kit-history-head .when, .kit-history-head time { color: var(--ink-500); font-size: var(--t-cap); margin-left: 6px; }
.kit-history dl { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.kit-history dt { color: var(--ink-500); font-size: var(--t-cap); line-height: 20px; }
.kit-history dd { margin: 0; overflow-wrap: anywhere; }
.kit-from { color: var(--ink-500); text-decoration: line-through; text-decoration-color: var(--ink-400); }

/* Recently deleted. */
.kit-deleted > li { display: flex; align-items: center; gap: 12px; padding-right: 16px; border-bottom: 1px solid var(--line-soft); }
.kit-deleted > li:last-child { border-bottom: 0; }
.kit-deleted .row { flex: 1; min-width: 0; padding-left: 20px; border-bottom: 0; }
.kit-deleted-actions { display: inline-flex; gap: 8px; flex: none; }
.kit-foot { color: var(--ink-500); font-size: var(--t-cap); line-height: var(--t-cap-lh); margin: 10px 2px 0; max-width: 72ch; }

@media (max-width: 767px) {
  .kit-head { padding: 10px 12px 10px 16px; }
  .kit-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kit-state { white-space: nowrap; }
  /* A long form on a phone keeps Save and Cancel in reach while it is being edited (the walk of 10 October 2026). */
  .editing > .kit-head { position: sticky; top: var(--top); z-index: 3; background: var(--surface); }
  .kit-section { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
  .kit-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kit-val, .kit-input, .kit-ctl .menu-field { min-height: 44px; font-size: 16px; }
  .kit-deleted > li { flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 12px; }
  .kit-deleted .row { padding-left: 16px; }
  .kit-deleted .row-title, .kit-deleted .row-sub { white-space: normal; overflow: visible; text-overflow: clip; }
  .kit-deleted-actions { padding: 0 16px; }
}
.design-page { display: grid; gap: 16px; max-width: 1040px; }
.design-h { margin: 16px 0 0; font-size: 15px; font-weight: 600; }
/* Days left's second half under the figure on a record's header (Pass 0, one figure). */
.rec-fact-note { display: block; color: var(--ink-500); font-size: var(--t-cap); line-height: var(--t-cap-lh); }
/* Days logged but not yet approved: the same bar, lighter, after the approved days (Pass 0, one figure). */
.fin-bar > span.fin-bar-pending { background: var(--live); opacity: 0.35; border-radius: 0 3px 3px 0; }
.fin-over { color: var(--danger); }
/* The thin bar on any copy but production, naming what isn't connected (Pass 0, honest connections).
   One line, its height in --bar, which every page sized to the screen takes off. */
.copy-bar { margin: 0; height: 28px; padding: 0 var(--gutter); display: flex; align-items: center; gap: 12px; background: var(--sand-bg); color: var(--sand-fg);
  font-size: var(--t-cap); line-height: var(--t-cap-lh); border-bottom: 1px solid var(--line); white-space: nowrap; }
.copy-bar-long, .copy-bar-short { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.copy-bar-short { display: none; }
.copy-bar-more { flex: none; margin-left: auto; padding: 0 2px; height: 28px; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
@media (max-width: 767px) { .copy-bar-long { display: none; } .copy-bar-short { display: inline; } .copy-bar-more { min-width: 44px; } }
body.has-copy-bar { --bar: 28px; }

/* CRM's Overview strip (Pass 1): each live statement of work in one row, its days as a bar and the one sentence. */
.sow-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sow-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 16px; align-items: center; }
.sow-row .sow-about { grid-column: 1 / -1; color: var(--ink-500); margin-top: -2px; }
.sow-name { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.sow-name > b, .sow-name > a { flex: none; }
.sow-name .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sow-days { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sow-bar { flex: 0 0 96px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.sow-bar > i { display: block; height: 100%; background: var(--live); }
.sow-days .rec-fact-note { flex-basis: 100%; }
.sow-due { display: flex; gap: 8px; align-items: center; color: var(--ink-700); font-size: var(--t-small); padding-top: 6px; border-top: 1px solid var(--line-soft); }
.sow-due svg { width: 14px; height: 14px; flex: none; }
/* The summary a person wrote, and one drafted beside it to Use or Dismiss (Pass 1). */
.summary-written p { margin: 0 0 8px; }
.summary-offer { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-row); background: var(--surface-2); border: 1px solid var(--line-soft); }
.summary-edit { margin-top: 10px; }
.summary-edit > summary { display: inline-flex; list-style: none; cursor: pointer; }
.summary-edit > summary::-webkit-details-marker { display: none; }
.summary-edit[open] > summary { display: none; }
.rec-all { margin: 0; padding: 0 4px; font-size: var(--t-small); }
.rec-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 16px; align-items: start; }
@media (max-width: 767px) { .sow-row { grid-template-columns: minmax(0, 1fr); } }

/* ======================================================= a record's surfaces === */
/* A record's surfaces, shared by CRM's client and contact and Sales' lead (moved here from CRM's section on
   20 October 2026, class names unchanged, so neither app edits the other's): the quiet line under the name, the
   figures, the sheets and their sections, and the rows they hold. */

/* A client's record, rebuilt (Clinton, 20 October 2026): one quiet line under the name, then three surfaces only:
   the figures in one panel divided by hairlines, the story in one sheet and the related things in another, each
   section parted by space and a hairline. One line per item, or a clean wrap; nothing cut mid-word that matters. */
.cr-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin: -10px 0 20px; color: var(--ink-500); font-size: var(--t-ui); }
.cr-sub-item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-700); }
.cr-sub-item.muted { color: var(--ink-500); }
a.cr-sub-item { text-decoration: none; }
a.cr-sub-item:hover { color: var(--accent); text-decoration: underline; }
.cr-sub > .marker { margin: 0; }
.cr-sub .rec-stage .menu-btn { padding-left: 0; }

.cr-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.cr-fig { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 22px 20px; color: inherit; text-decoration: none;
  border-left: 1px solid var(--line-soft); transition: background 120ms var(--ease); }
.cr-fig:first-child { border-left: 0; }
a.cr-fig:hover { background: var(--surface-2); }
a.cr-fig:focus-visible { outline: none; box-shadow: inset var(--accent-ring); }
.cr-fig-label { font-size: var(--t-cap); line-height: var(--t-cap-lh); font-weight: 500; color: var(--ink-500); }
.cr-fig-value { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.025em; color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-fig-sub { font-size: var(--t-small); line-height: 18px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 18px; }
.cr-fig.late .cr-fig-value { color: var(--tone-due); }
/* "6 of 12": the figure large, its "of 12" quiet. */
.cr-fig-value small { font-size: 15px; font-weight: 500; color: var(--ink-500); letter-spacing: 0; }

.cr-summary { margin-bottom: 12px; }
.cr-summary .summary-lines { margin: 0; }
.cr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap); align-items: start; }
.cr-sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); min-width: 0; }
.cr-sec { padding: 20px 24px 22px; min-width: 0; }
.cr-sec + .cr-sec { border-top: 1px solid var(--line-soft); }
.cr-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cr-sec-head h2 { font-size: 15px; line-height: 20px; font-weight: 600; margin: 0; letter-spacing: -0.005em; }
.cr-sec-head h2 .count { color: var(--ink-400); font-weight: 500; margin-left: 2px; }
.cr-sec-head .meta { font-size: var(--t-small); color: var(--ink-500); text-decoration: none; white-space: nowrap; }
.cr-sec-head .meta:hover { color: var(--accent); }
.cr-sec > .muted { margin: 0; }
.cr-empty { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.cr-empty .summary-edit[open] { flex-basis: 100%; }
.cr-empty .summary-edit > summary.btn { height: auto; padding: 0; border: 0; background: none; box-shadow: none; color: var(--accent); font-weight: 500; }
.cr-empty .summary-edit > summary.btn:hover { text-decoration: underline; }
.cr-sec .card-actions { margin-top: 12px; }

.cr-sows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cr-sow { min-width: 0; }
.cr-sow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cr-sow-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-500); }
.cr-sow-name b { color: var(--ink-900); font-weight: 600; margin-right: 6px; }
.cr-sow-name a { color: inherit; text-decoration: none; }
.cr-sow-days { flex: none; font-weight: 600; white-space: nowrap; color: var(--ink-900); }
.cr-bar { display: block; height: 4px; border-radius: 2px; background: var(--line-soft); margin: 8px 0 6px; overflow: hidden; }
.cr-bar i { display: block; height: 100%; border-radius: 2px; background: var(--live); }
.cr-bar.low i { background: var(--tone-due); }
.cr-sow-sub { display: block; font-size: var(--t-cap); line-height: var(--t-cap-lh); color: var(--ink-500); }

.cr-tasks, .cr-sugs, .cr-acts, .cr-links, .cr-docs, .cr-people { list-style: none; margin: 0; padding: 0; }
.cr-task { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.cr-task:first-child { border-top: 0; padding-top: 0; }
.cr-task .task-check { margin: 0; }
.cr-task-icon { display: grid; place-items: center; color: var(--ink-500); }
.cr-task-icon svg { width: 16px; height: 16px; }
.cr-task-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-900); text-decoration: none; }
.cr-task-title:hover { color: var(--accent); }
.cr-task-meta { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-small); color: var(--ink-500); white-space: nowrap; }
.cr-task-meta .prio { font-size: var(--t-cap); }

.cr-sug { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.cr-sug:first-child { border-top: 0; padding-top: 0; }
.cr-sug-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cr-sug-title { color: var(--ink-900); }
.cr-sug-quote { font-size: var(--t-small); color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-sug-quote a { color: inherit; }
.cr-sug-actions { display: inline-flex; gap: 6px; flex: none; }

.cr-act { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.cr-act:first-child { border-top: 0; padding-top: 0; }
.cr-act-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--tint-crm-bg); color: var(--tint-crm-fg); }
.cr-act[data-kind="email"] .cr-act-icon { background: var(--tint-mail-bg); color: var(--tint-mail-fg); }
.cr-act-icon svg { width: 14px; height: 14px; }
.cr-act-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-700); text-decoration: none; }
.cr-act-main b { font-weight: 600; color: var(--ink-900); }
.cr-act-main:hover b { color: var(--accent); }
.cr-act-title { color: var(--ink-500); margin-left: 6px; }
.cr-act-pin svg { width: 13px; height: 13px; color: var(--ink-400); }
.cr-act-when { font-size: var(--t-cap); color: var(--ink-500); white-space: nowrap; }

.cr-docs li a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.cr-docs li:first-child a { border-top: 0; padding-top: 0; }
.cr-doc-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--tint-documents-bg); color: var(--tint-documents-fg); }
.cr-doc-icon svg { width: 14px; height: 14px; }
.cr-doc-text { display: grid; gap: 2px; min-width: 0; }
.cr-doc-title { color: var(--ink-900); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cr-docs li a:hover .cr-doc-title { color: var(--accent); }
.cr-doc-meta { font-size: var(--t-cap); color: var(--ink-500); }

.cr-person { position: relative; display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--line-soft); }
.cr-person:first-child { border-top: 0; }
.cr-person > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 9px 0; color: inherit; text-decoration: none; }
.cr-person:first-child > a { padding-top: 0; }
.cr-person-text { display: grid; gap: 2px; min-width: 0; }
.cr-person-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; color: var(--ink-900); font-weight: 500; }
.cr-person > a:hover .cr-person-name { color: var(--accent); }
.cr-person-main { font-size: var(--t-cap); font-weight: 500; color: var(--live); }
.cr-person-warn { font-size: var(--t-cap); font-weight: 500; color: var(--tone-due); }
.cr-person-sub { font-size: var(--t-small); color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-person .row-menu { flex: none; }
@media (hover: hover) { .cr-person:not(:hover):not(:focus-within) .row-menu { opacity: 0; } }

.cr-links li a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.cr-links li:first-child a { border-top: 0; padding-top: 0; }
.cr-links li a:hover .cr-link-title { color: var(--accent); }
.cr-link-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-900); }
.cr-link-meta { font-size: var(--t-small); color: var(--ink-500); white-space: nowrap; flex: none; }
.cr-kv { margin: 0; }
.cr-kv dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================================ Help ==== */
/* Help as a user guide (21 October 2026): the contents on the left, one topic a screen, search over every topic. */
.hp { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 32px; align-items: start; }
.hp-toc { position: sticky; top: 16px; max-height: calc(100vh - 120px); overflow: auto; font-size: var(--t-small); }
.hp-toc-phone { display: none; }
.hp-ch { border-bottom: 1px solid var(--line-soft); padding: 4px 0; }
.hp-ch summary { cursor: pointer; list-style: none; padding: 6px 8px; font-weight: 600; color: var(--ink-900); border-radius: 6px; }
.hp-ch summary::-webkit-details-marker { display: none; }
.hp-ch summary:hover { background: var(--surface-2); }
.hp-ch a { display: block; padding: 5px 8px 5px 16px; color: var(--ink-500); text-decoration: none; border-radius: 6px; }
.hp-ch a:hover { color: var(--ink-900); background: var(--surface-2); }
.hp-ch a[aria-current="page"] { color: var(--accent); font-weight: 600; background: var(--accent-soft); }
.hp-main { min-width: 0; max-width: 760px; }
.hp-welcome .hp-main { max-width: none; }
.hp-hero { display: grid; gap: 10px; margin-bottom: 24px; }
.hp-most { margin: 0; color: var(--ink-500); font-size: var(--t-small); }
.hp-most a { color: var(--accent); }
.hp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.hp-card { padding: 18px 20px; }
.hp-card-head { display: flex; align-items: baseline; gap: 8px; }
.hp-card-head h2 { margin: 0; font-size: var(--t-h3, 16px); }
.hp-card-head .count { color: var(--ink-500); font-size: var(--t-small); }
.hp-blurb { margin: 4px 0 10px; color: var(--ink-500); font-size: var(--t-small); }
.hp-rows { list-style: none; margin: 0; padding: 0; }
.hp-rows a { display: grid; gap: 1px; padding: 8px 0; border-top: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.hp-rows a:hover b { color: var(--accent); }
.hp-rows b { font-weight: 550; }
.hp-rows span { color: var(--ink-500); font-size: var(--t-small); }
.hp-search { position: relative; max-width: 520px; width: 100%; }
.hp-search input { width: 100%; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: inherit; color: var(--ink-900); }
.hp-search input:focus { outline: none; border-color: var(--accent); box-shadow: var(--accent-ring); }
.hp-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: min(60vh, 480px); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-float); padding: 6px; z-index: 30; }
.hp-hit { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; }
.hp-hit:hover, .hp-hit.on { background: var(--surface-2); }
.hp-hit i { font-style: normal; color: var(--ink-500); font-size: var(--t-cap); }
.hp-hit span { color: var(--ink-500); font-size: var(--t-small); }
.hp-none { margin: 8px 10px; color: var(--ink-500); }
.hp-topic-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.hp-topic-top .hp-search { max-width: 300px; }
.hp-chapter { color: var(--ink-500); font-size: var(--t-small); text-decoration: none; }
.hp-chapter:hover { color: var(--accent); }
.hp-topic { font-size: 15px; line-height: 1.6; }
.hp-lede { font-size: 17px; color: var(--ink-900); margin: 0 0 16px; }
.hp-topic p { margin: 0 0 12px; max-width: 68ch; }
.hp-steps { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; max-width: 68ch; }
.hp-topic b.ui { font-weight: 600; }
.hp-topic kbd, .hp-keys kbd { display: inline-block; font: 500 12px var(--font-mono, ui-monospace, monospace); padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); }
.hp-keys { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 8px 0 0; }
.hp-keys dd { margin: 0; }
.hp-see { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: var(--t-small); }
.hp-see a { color: var(--accent); }
.hp-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.hp-pn a { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; color: inherit; text-decoration: none; background: var(--surface); }
.hp-pn a:hover { border-color: var(--accent); }
.hp-pn a.next { text-align: right; }
.hp-pn span { color: var(--ink-500); font-size: var(--t-cap); }
@media (max-width: 860px) {
  .hp { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hp-toc { position: static; max-height: none; }
  .hp-toc-wide { display: none; }
  .hp-toc-phone { display: block; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
  .hp-toc-phone > summary { padding: 10px 14px; font-weight: 600; cursor: pointer; }
  .hp-toc-phone .hp-ch { padding: 0 6px; }
  .hp-welcome .hp-toc { display: none; }
  .hp-cards { grid-template-columns: minmax(0, 1fr); }
  .hp-topic-top .hp-search { max-width: none; }
}

/* ================================================================ CRM ===== */
/* HubSpot's CRM in Attio's shape (design.md): the table is the product, a
   record is a quiet header, tabs as text and attributes as rows. Tokens only. */

/* The index: view tabs, the tools, the table. */
.view-tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--line); margin: -4px 0 14px; overflow-x: auto; scrollbar-width: none; }
.view-tabs::-webkit-scrollbar { display: none; }
.view-tab { position: relative; display: inline-flex; align-items: center; height: 38px; padding: 0 12px; color: var(--ink-500); text-decoration: none; font-weight: 500; white-space: nowrap; }
.view-tab:hover { color: var(--ink-900); }
.view-tab[aria-current="page"] { color: var(--ink-900); font-weight: 600; }
.view-tab[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink-900); }
.view-tabs .menu-btn { color: var(--ink-500); height: 38px; }
.index-tools { margin-bottom: 12px; }
.index-tools .btn .count { color: var(--ink-500); font-weight: 600; }
.filter-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.filter-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-small); color: var(--ink-700); }
.filter-summary .and, .filter-summary .or { color: var(--ink-500); font-size: var(--t-cap); padding: 0 2px; }
.filter-summary .or { font-weight: 600; }
.table-count { color: var(--ink-500); font-size: var(--t-cap); margin: 0 0 6px 2px; }
.table-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.table-scroll.card { padding: 0; }
.crm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-ui); }
.crm-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); height: 38px; padding: 0 12px; text-align: left; font-weight: 500; color: var(--ink-500);
  font-size: var(--t-small); white-space: nowrap; border-bottom: 1px solid var(--line); }
.crm-table thead th:first-child { border-top-left-radius: var(--r-card); }
.crm-table thead th:last-child { border-top-right-radius: var(--r-card); }
.crm-table thead th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.crm-table thead th a:hover { color: var(--ink-900); }
.crm-table thead th a[aria-sort="ascending"], .crm-table thead th a[aria-sort="descending"] { color: var(--ink-900); }
.sort-arrow { font-size: 11px; }
.crm-table tbody th, .crm-table tbody td { height: var(--row); padding: 0 12px; border-bottom: 1px solid var(--line-soft); text-align: left; font-weight: 400; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.crm-table tbody tr:last-child th, .crm-table tbody tr:last-child td { border-bottom: 0; }
.crm-table tbody tr { cursor: default; }
.crm-table tbody tr[data-record-preview], .crm-table tbody tr[data-href] { cursor: pointer; }
.crm-table tbody tr:hover > * { background: var(--surface-2); }
.crm-table tbody tr.picked > *, .crm-table tbody tr.previewing > * { background: var(--accent-soft); }
.crm-table tbody tr.kbd-focus > * { background: var(--accent-soft); }
.crm-table tbody tr.kbd-focus > :first-child { box-shadow: inset 3px 0 0 var(--accent); }
.crm-table th.name { min-width: 200px; }
.crm-table tbody th.name { max-width: 420px; }
/* The Clients and Contacts lists (Clinton, 18 October 2026; docs/crm-finish.md, pages 1 and 3) are the Azure copy's
   table: natural widths, scrolling sideways when the columns outgrow the screen. */
.crm-table .cell-who { color: var(--ink-500); }
.crm-table .crm-low, .crm-late { color: var(--tone-due); font-weight: 500; }
.new-client-memory { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-soft); }
@media (max-width: 767px) {
  /* A client's card shows all six answers, two to a line: stage and owner, days left and unpaid, last contacted and
     next follow-up. */
  .crm-table[data-object="client"] tbody td:not(.sel):nth-of-type(-n+7) { display: block; }
}
.crm-overdue { color: var(--danger); }
.crm-table td.num, .crm-table th.num { text-align: right; }
.crm-table .sel { width: 40px; padding: 0 0 0 14px; }
.crm-table .sel input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.crm-table .row-sub { display: block; color: var(--ink-500); font-size: var(--t-cap); line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-table.table-plain tbody th { padding-top: 8px; padding-bottom: 8px; height: auto; }
.rec-link { color: var(--ink-900); font-weight: 600; text-decoration: none; }
.rec-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-400); }
.marker { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-left: 6px; border-radius: 6px; background: var(--canvas); color: var(--ink-700);
  font-size: 11px; font-weight: 500; white-space: nowrap; vertical-align: middle; box-shadow: inset 0 0 0 1px var(--line); }
.marker.warn { background: var(--row-risk); color: var(--tone-due); box-shadow: none; }
.who { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.who .avatar { width: 22px; height: 22px; font-size: 9px; }
.plain-link { color: inherit; text-decoration: none; }
.plain-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.table-more { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.kind-cell { width: 44px; }
.tl-icon.sm { width: 26px; height: 26px; }

/* A value that edits in place. */
.val { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.val.editable { border: 0; background: none; padding: 3px 6px; margin: -3px -6px; border-radius: 6px; font: inherit; color: inherit; cursor: text; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100% + 12px); }
.val.editable:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); }
.val.editable[aria-busy="true"] { opacity: 0.6; }
.edit-box { height: 30px; min-width: 160px; }
textarea.edit-box { height: auto; }
.kv > dd .edit-box { max-width: 420px; }

/* The bulk bar: floats over the page like the toasts, dark, while rows are ticked. */
.bulk-bar { position: fixed; z-index: 50; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px;
  background: var(--ink-900); color: var(--on-dark); border-radius: 14px; box-shadow: var(--shadow-float); max-width: calc(100vw - 32px); animation: rise 160ms var(--ease); }
.bulk-bar [data-bulk-count] { white-space: nowrap; }
.bulk-bar [data-bulk-actions] { display: flex; gap: 6px; flex-wrap: wrap; }
.bulk-bar .btn { height: 30px; background: transparent; color: var(--on-dark); border-color: transparent; }
.bulk-bar .btn:hover { background: var(--side-hover); }
.bulk-bar .grow { flex: 1; }

/* A record. */
.rec-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin: -8px 0 16px; }
.rec-fact { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; }
.rec-fact.wide { flex-basis: 100%; }
.rec-fact-label { color: var(--ink-500); font-size: var(--t-cap); line-height: 16px; }
.rec-fact .val, .rec-fact .menu-btn, .rec-fact .state { font-weight: 500; }
.rec-fact .menu-btn { height: 26px; margin-left: -8px; max-width: none; }
.rec-fact .menu-label { overflow: visible; }
.rec-overview { display: grid; gap: var(--gap); }
.rec-facts > .marker { margin-left: 0; align-self: center; }
.rec-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.rec-tabs::-webkit-scrollbar { display: none; }
.rec-tabs a { position: relative; height: 40px; display: inline-flex; align-items: center; padding: 0 12px; color: var(--ink-500); text-decoration: none; font-weight: 500; white-space: nowrap; }
.rec-tabs a:hover { color: var(--ink-900); }
.rec-tabs a[aria-current="page"] { color: var(--ink-900); font-weight: 600; }
.rec-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink-900); }
.rec-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
.rec-grid.with-rail { grid-template-columns: minmax(0, 1fr) 340px; }
.rec-main { display: grid; gap: var(--gap); min-width: 0; }
.rec-main > .card + .card { margin-top: 0; }
.rec-rail { display: grid; gap: 12px; position: sticky; top: calc(var(--top) + 16px); }
.rail-card { padding: 16px 18px 8px; }
.rail-card .card-head { margin-bottom: 8px; }
.rail-card .card-head h2 { font-size: 15px; }
.rail-card .list .row { padding: 0; background: transparent; }
.rail-card .list .row.two { min-height: 50px; }
/* A rail row never runs past its card: its words shorten with an ellipsis (the layout sweep, pass 2). */
.rail-card .list li { min-width: 0; }
.rail-card .row-btn { min-width: 0; max-width: 100%; }
.rail-card .row-btn .row-main { min-width: 0; overflow: hidden; }
.rail-card .row-btn .row-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; white-space: normal; }
/* A linked activity sits in its card as the card's own list, not a second card. */
.card.linked-activity > .timeline { border: 0; border-radius: 0; box-shadow: none; }
/* The last column of a CRM table keeps the card's inset. */
.crm-table th:last-child, .crm-table td:last-child { padding-right: 16px; }
/* A report's column labels keep the card's inset at either end. */
.card.report .cols { padding-inline: 16px; }
.rail-card .list li:last-child .row, .rail-card .list > .row:last-child { border-bottom: 0; }
.card-head .count { color: var(--ink-500); font-weight: 500; }
.card-head .meta a, a.meta { color: var(--ink-500); text-decoration: none; }
a.meta:hover { color: var(--ink-900); }
.kv-rail { grid-template-columns: 116px minmax(0, 1fr); }
.kv-rail > dt, .kv-rail > dd { padding: 10px 0; min-height: 0; }
.kv-rail > dt { font-size: var(--t-small); }
.pad { padding: 4px 0 12px; margin: 0; }
.hist { width: 26px; height: 26px; opacity: 0; margin-left: 4px; }
.kv > dd:hover .hist, .hist:focus-visible { opacity: 1; }
.kv > dd { display: flex; align-items: center; gap: 4px; }
.card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.prop-card .kv > dt:last-of-type, .prop-card .kv > dd:last-of-type { border-bottom: 0; }

/* The summary: five lines, each with its source. */
.summary-lines { margin: 0; padding: 0 0 0 20px; display: grid; gap: 6px; font-size: var(--t-body); line-height: var(--t-body-lh); }
.summary-lines li::marker { color: var(--ink-400); }
.summary-lines .src { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; margin-left: 2px; border-radius: 9px; background: var(--canvas);
  color: var(--ink-500); font-size: 10px; font-weight: 600; text-decoration: none; vertical-align: 2px; box-shadow: inset 0 0 0 1px var(--line); }
.summary-lines .src:hover { color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-400); }

/* The note box, the timeline and its tools. */
.note-box { padding: 12px 14px; }
.note-box .textarea { border: 0; padding: 4px 2px; min-height: 44px; box-shadow: none; resize: none; }
.note-box .textarea:focus { box-shadow: none; }
.note-foot { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.note-foot .cap { flex: 1; }
.tl-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-tools-right { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tl-tools .search .input { width: 200px; }
.timeline { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.timeline.compact { border: 0; box-shadow: none; border-radius: 0; }
.tl-month { padding: 14px 18px 6px; color: var(--ink-500); font-size: var(--t-cap); font-weight: 600; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
.timeline.compact .tl-month { background: none; padding: 10px 0 4px; }
.tl-item { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.timeline.compact .tl-item { padding: 10px 0; }
.tl-item:last-child { border-bottom: 0; }
.tl-item.pinned { background: var(--surface-2); }
.tl-icon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--canvas); color: var(--ink-500); box-shadow: inset 0 0 0 1px var(--line-soft); }
.tl-icon svg { width: 15px; height: 15px; }
.tl-item[data-kind="email"] .tl-icon { background: var(--tint-mail-bg); color: var(--tint-mail-fg); box-shadow: none; }
.tl-item[data-kind="note"] .tl-icon, .tl-item[data-kind="call"] .tl-icon, .tl-item[data-kind="meeting"] .tl-icon { background: var(--tint-crm-bg); color: var(--tint-crm-fg); box-shadow: none; }
.tl-main { flex: 1; min-width: 0; }
.tl-head { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.tl-who { flex: 1; min-width: 0; line-height: 20px; }
.tl-who b { font-weight: 600; }
.tl-title { color: var(--ink-900); }
.tl-when { color: var(--ink-500); font-size: var(--t-small); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-pin { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-500); font-size: var(--t-cap); }
.tl-pin svg { width: 12px; height: 12px; }
.tl-menu .menu-btn { width: 28px; height: 28px; }
.tl-body { margin-top: 4px; color: var(--ink-700); font-size: var(--t-body); line-height: var(--t-body-lh); white-space: pre-line; overflow-wrap: anywhere; }
.tl-held { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; color: var(--tone-due); font-size: var(--t-small); }
.tl-held svg { width: 14px; height: 14px; }
/* A meeting's notes from its transcript (pass 2): the summary, the actions with their owners, the tasks it suggested. */
.crm-notes { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.crm-notes-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crm-notes h3 { margin: 0; font-size: var(--t-small); font-weight: 600; }
.crm-notes h4 { margin: 10px 0 4px; font-size: var(--t-cap); font-weight: 600; color: var(--ink-600); }
.crm-notes ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: var(--t-body); overflow-wrap: anywhere; }
.crm-notes-tasks { display: inline-block; margin-top: 10px; font-size: var(--t-small); }
.crm-notes-make { margin-top: 8px; }
.tl-foot { display: flex; gap: 4px; margin-top: 6px; margin-left: -10px; }
.tl-foot .btn { height: 28px; font-size: var(--t-small); color: var(--ink-500); }
.tl-comments { margin-top: 8px; }

/* Tasks. */
.tasks { list-style: none; margin: 0; padding: 0; }
.tasks.card { padding: 4px 18px; }
.task { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.task:last-child { border-bottom: 0; }
.task-check { width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--ink-400); background: var(--surface); display: grid; place-items: center; cursor: pointer; padding: 0; color: transparent; }
.task-check:hover { border-color: var(--live); color: var(--live); }
.task-check svg { width: 12px; height: 12px; stroke-width: 2.6; }
.task-check.done { background: var(--live); border-color: var(--live); color: var(--on-dark); }
.task-check.static { border: 0; background: var(--canvas); color: var(--ink-500); border-radius: 6px; cursor: default; }
.task-main { flex: 1; min-width: 0; }
.task-title { color: var(--ink-900); font-weight: 500; text-decoration: none; }
a.task-title:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-400); }
.task.done .task-title { color: var(--ink-500); text-decoration: line-through; }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 3px; font-size: var(--t-small); }
.task-meta svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 3px; }
.task-meta a { text-decoration: none; }
.prio { font-size: var(--t-cap); font-weight: 600; color: var(--ink-500); }
.prio-high { color: var(--danger); }
.prio-medium { color: var(--tone-due); }
.due-over { color: var(--danger); font-weight: 500; }
.task.suggested { background: transparent; }
.suggest { margin-top: 8px; padding: 10px 12px; border-radius: var(--r-row); background: var(--canvas); }
.suggest .quote { margin: 0 0 8px; color: var(--ink-700); font-size: var(--t-small); line-height: 19px; }
.suggest-actions { display: flex; justify-content: flex-end; gap: 6px; }
.task-quick { display: flex; gap: 8px; padding: 10px; }
.task-quick .input { border: 0; box-shadow: none; }
.done-tasks summary { cursor: pointer; color: var(--ink-500); font-weight: 600; margin: 16px 0 10px; list-style: none; }
.done-tasks summary::-webkit-details-marker { display: none; }
.task-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; border: 1.5px solid var(--ink-400); }
.task-dot.done { background: var(--live); border-color: var(--live); }
.task-dot.over { border-color: var(--danger); }
.task-filters { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 -8px; }
.task-filters .menu-btn { height: 30px; font-size: var(--t-small); }
.task-pane .kv { margin-bottom: 8px; }
.task-pane .inline-date { max-width: 240px; height: 30px; }
.task-pane-actions { display: flex; gap: 8px; margin: 12px 0; }
.queue-mode { max-width: 640px; }
.queue-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }

/* Sheets' forms. */
.sheet-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.form-foot .grow { flex: 1; }
.form-warn { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-row); background: var(--row-risk); }
.form-warn p { margin: 0; color: var(--tone-due); }
.form-warn .form-foot { justify-content: flex-start; margin-top: 8px; }
.field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 12px; }
/* A field beside a taller one (it has help beneath) keeps its control level with its neighbour's. */
.field-pair > .field { align-content: start; }
/* A date and time field is wider than half a phone's sheet by its own nature; it shrinks to its column rather than run off the edge. */
.field-pair > .field { min-width: 0; }
.field-pair .input { min-width: 0; max-width: 100%; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.check-line { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 28px; }
.check-line input { width: 15px; height: 15px; accent-color: var(--accent); }
.mode-switch { margin-bottom: 16px; }
.follow-up, .condition { margin-top: 8px; }
.follow-up summary, .condition summary { cursor: pointer; color: var(--ink-700); font-weight: 500; margin-bottom: 8px; }
.words-row { display: flex; gap: 8px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.inline-form .input { flex: 1; min-width: 160px; }
.inline-form .narrow-input { flex: 0 0 90px; min-width: 0; }
.file-input { padding: 4px 8px; }
.rules { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-700); }
.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 16px; }
.settings-seg { margin-bottom: 18px; }
.prop-groups { display: grid; gap: var(--gap); }
.prop-group { padding: 16px 20px 6px; }
.prop-group .list .row { padding: 0; }
.prop-group .list li:last-child .row { border-bottom: 0; }
.row-actions { padding: 0 0 10px; }
.merge-table td, .merge-table th { vertical-align: top; }
/* The Merge sheet's table fits the sheet: a long email wraps in its cell, so Cancel and Merge
   are never scrolled to (QA-26). */
.merge-table { width: 100%; table-layout: fixed; }
.merge-table thead th:first-child, .merge-table tbody th { width: 96px; }
.merge-table td { overflow-wrap: anywhere; }
.merge-table .check-line { display: flex; align-items: flex-start; }
.merge-table .check-line input { flex: none; margin-top: 3px; }
.merge-table .plain-link { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.map-table td { min-width: 180px; }

/* The filter builder and the column picker. */
.fb-groups { display: grid; gap: 10px; margin-bottom: 12px; }
.fb-group { border: 1px solid var(--line); border-radius: var(--r-row); padding: 10px; background: var(--surface-2); display: grid; gap: 8px; justify-items: start; }
.fb-rows { display: grid; gap: 8px; width: 100%; }
.fb-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 6px; align-items: start; background: var(--surface); padding: 8px; border-radius: var(--r-control); box-shadow: inset 0 0 0 1px var(--line-soft); }
.fb-row .fb-value { grid-column: 1 / 3; display: flex; gap: 6px; flex-wrap: wrap; }
.fb-row .fb-value:empty { display: none; }
.fb-row [data-fb-remove] { grid-column: 3; grid-row: 1; }
.fb-choices { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.fb-or { color: var(--ink-500); font-weight: 600; font-size: var(--t-cap); text-transform: none; padding-left: 6px; }
.col-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }
.col-list li { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 4px 0 10px; border-radius: var(--r-control); }
ol.col-list li { background: var(--surface-2); }
.col-list li span { flex: 1; }
[data-col-find] { margin-bottom: 8px; }
/* A segment row's Archive or Restore, at the row's end. */
.crm-table th.row-menu, .crm-table td.row-menu { width: 44px; padding-left: 0; padding-right: 6px; text-align: right; }
@media (max-width: 767px) {
  /* On a phone the row is a card: its menu sits at the card's top right, beside the name. */
  .crm-table tbody tr:has(> td.row-menu) { position: relative; }
  .crm-table tbody tr:has(> td.row-menu) > th { padding-right: 40px; }
  .crm-table tbody tr > td.row-menu { display: block; position: absolute; top: 6px; right: 6px; width: auto; padding: 0; }
}

/* The record's name column: always shown, first, with nothing to move or remove (QA-35). */
ol.col-list li.col-fixed { color: var(--ink-700); }
.col-name-note { margin: -6px 0 14px; }
.col-foot { flex-wrap: wrap; align-items: center; }
.col-whose { flex: 1 1 100%; display: grid; gap: 6px; }
.col-whose:empty { display: none; }
.col-whose .cap { margin: 0; }
.col-whose-choice { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.col-whose-choice legend { padding: 0; margin-right: 4px; float: left; }

/* The preview beside the index. */
.preview { display: grid; gap: 14px; }
.preview-head { display: flex; align-items: center; gap: 12px; }
.preview-head h2 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; }
.preview-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.preview-h { margin: 6px 0 0; color: var(--ink-500); font-size: var(--t-cap); font-weight: 600; }
.preview .list .row { padding: 0; }
.preview-open { justify-self: start; }

/* Duplicates, quality, import. */
.pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pair { padding: 18px 20px; }
.pair-recs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pair-rec { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.pair-rec b { font-weight: 600; }
.pair-and { color: var(--ink-400); }
.pair-and svg { width: 16px; height: 16px; }
.pair-why { margin: 10px 0 4px; padding-left: 18px; color: var(--ink-700); }
.pair-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--gap); }
.fill { display: inline-block; width: 80px; height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; vertical-align: middle; }
.fill span { display: block; height: 100%; background: var(--live); }
.stat-word { font-size: 17px !important; line-height: 32px !important; }
.import-start { max-width: 760px; }
.import-map { max-width: 960px; }

@media (max-width: 1100px) { .rec-grid.with-rail { grid-template-columns: minmax(0, 1fr); } .rec-rail.laptop-only { display: none; } .rail-phone { display: grid !important; gap: 12px; } }
@media (max-width: 767px) {
  .view-tabs { margin: 0 calc(-1 * var(--gutter)) 12px; padding: 0 8px; }
  .index-tools { gap: 8px; }
  .index-tools .search { flex-basis: 100%; }
  .table-scroll { border-radius: var(--r-row); }
  .crm-table thead { display: none; }
  .crm-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
  .crm-table tbody tr:last-child { border-bottom: 0; }
  .crm-table tbody th, .crm-table tbody td { height: auto; padding: 0; border: 0; max-width: none; font-size: var(--t-small); }
  .crm-table tbody th { grid-column: 1 / -1; font-size: var(--t-ui); white-space: normal; }
  .crm-table tbody td.num { text-align: left; }
  .crm-table .sel { display: none; }
  .crm-table .kind-cell { display: none; }
  .crm-table tbody td:nth-of-type(n+6) { display: none; }
  .rec-facts { gap: 8px 16px; margin-top: 0; }
  .tl-tools-right { margin-left: 0; width: 100%; }
  .tl-tools .search { flex: 1; }
  .tl-tools .search .input { width: 100%; }
  .tl-item { padding: 12px 16px 12px 14px; }
  .tl-head { flex-wrap: wrap; row-gap: 0; }
  .tl-who { flex-basis: 100%; }
  .bulk-bar { bottom: calc(var(--tabs) + 16px + env(safe-area-inset-bottom)); }
  .fb-row { grid-template-columns: minmax(0, 1fr) auto; }
  .fb-row .fb-op { grid-column: 1 / 2; }
  .fb-row .fb-value { grid-column: 1 / -1; }
  .kv-rail { grid-template-columns: 1fr; }
  .insights { grid-template-columns: minmax(0, 1fr); }
  /* On a phone a table's values and a task's title keep the gutter: no pull into it, and a long value shortens (pass 2). */
  .crm-table tbody td .val.editable { margin: 0; padding: 0; max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
  .crm-table tbody td .val.editable * { white-space: normal; overflow-wrap: anywhere; }
  .task-pane .task-title-input { margin-left: 0; margin-right: 0; }
  .note-foot .cap { display: none; }
}
/* Wide enough for all six views in one row at 1280: Suggested was cut off at 480 (18 October). */
[data-split="tasks"] { grid-template-columns: minmax(360px, 500px) minmax(0, 1fr); }
[data-split="tasks"] .split-head > * { min-width: 0; }
/* Tasks' one row under the views: Search takes the room, then Assigned to and Filter; chips for filters in use. */
.task-bar { display: flex; align-items: center; gap: 8px; }
.task-bar .search { flex: 1; min-width: 0; }
.task-bar [data-nav-menu] { flex: none; }
.task-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.task-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px 0 10px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); font-size: var(--t-small); font-weight: 500; text-decoration: none; }
.task-chip svg { width: 13px; height: 13px; }
.task-chip:hover { background: var(--press); }
[data-split="tasks"] .split-head .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
[data-split="tasks"] .split-head .seg::-webkit-scrollbar { display: none; }
[data-split="tasks"] .row-title > b { max-width: none; flex-shrink: 1; min-width: 0; }
.task-link { gap: 12px; }
@media (max-width: 767px) { [data-split="tasks"] .split-head .seg { width: 100%; } }
.tl-tools > .filters { min-width: 0; max-width: 100%; }
@media (max-width: 767px) {
  .tl-tools > .filters { width: 100%; }
  .tl-tools-right .search { flex: 1 1 100%; min-width: 0; order: -1; }
}
/* A segmented control inside a page never makes the page wider than the screen. */
.content .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.content .seg::-webkit-scrollbar { display: none; }
.content .toolbar > .seg { flex-shrink: 1; min-width: 0; }
.rec .kv > dd, .preview .kv > dd, .task-pane .kv > dd { min-width: 0; }
@media (max-width: 767px) { .rec .kv, .preview .kv, .task-pane .kv, .kv-rail { grid-template-columns: minmax(0, 1fr); } }
.rec-main, .rec-overview, .rec-rail { grid-template-columns: minmax(0, 1fr); }
.plain-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-card a.row-main, .rec-fact a.val, .pair-rec, .rail-card a.row { text-decoration: none; color: inherit; }
.rec-fact a.val:hover, .rail-card a.row-main:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-400); }
.rail-card .row-title { flex-wrap: wrap; row-gap: 2px; }
.rail-card .row-title .marker { margin-left: 0; }
.task-pane .kv { grid-template-columns: 120px minmax(0, 1fr); }
.task-pane .inline-date { max-width: 100%; width: 230px; }
.task-facts { gap: 4px 2px; }
.task-pane .kv dd .menu-btn { margin-left: -8px; }
.task-pane .kv a { color: var(--ink-900); text-decoration: none; }
.task-pane .kv a:hover { text-decoration: underline; }
[data-split="tasks"] .seg { display: flex; max-width: 100%; }
[data-split="tasks"] .seg a { padding: 0 7px; flex: 0 0 auto; }

/* ---- CRM: the library (Templates, Snippets, Playbooks), Reports, Data model ---- */
.lib-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.lib-toolbar .search { margin-left: auto; min-width: 220px; flex: 0 1 280px; }
.lib-table th[scope="row"] { min-width: 260px; }
.lib-table .row-sub { display: block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink-900); cursor: pointer; text-align: left; }
.link-btn:hover:not([disabled]) { text-decoration: underline; }
.link-btn[disabled] { cursor: default; }
.lib-foot { color: var(--ink-500); font-size: var(--t-cap); line-height: var(--t-cap-lh); margin: 10px 2px 0; max-width: 72ch; }
code.shortcut { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-cap); color: var(--ink-700); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 5px; padding: 1px 6px; }
.input-prefix { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding-left: 10px; }
.input-prefix span { color: var(--ink-400); font-weight: 600; }
.input-prefix .input { border: 0; box-shadow: none; padding-left: 4px; background: transparent; }
.input-prefix:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field-head .menu-btn { height: 26px; font-size: var(--t-cap); margin-right: -8px; }
.field-head-actions { display: flex; justify-content: flex-end; align-items: center; margin: -4px -8px -2px 0; }

/* The # picker, floating under the box being typed in. */
.snip-pop { position: fixed; z-index: 90; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-float); padding: 4px; display: grid; gap: 2px; }
.snip-pop button { display: grid; gap: 2px; text-align: left; background: none; border: 0; border-radius: 7px; padding: 7px 10px; cursor: pointer; font: inherit; color: var(--ink-900); }
.snip-pop button[aria-selected="true"], .snip-pop button:hover { background: var(--hover); }
.snip-pop .snip-top { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.snip-pop .snip-top b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-cap); font-weight: 600; color: var(--accent); }
.snip-pop .snip-top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snip-pop small { color: var(--ink-500); font-size: var(--t-cap); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Playbooks: the editor, and the playbook opened on a record. */
.pb-layout { align-items: start; }
.pb-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pb-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* A card is a group, not a fieldset: Safari draws a fieldset's legend into its border and will not
   let it shrink below its contents, which pushed the cards past the editor's edge (QA-27). */
.pb-card { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-hair); padding: 14px 16px 16px; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.pb-card-kind { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin: -6px 96px -4px 0; font-size: var(--t-label); font-weight: 600; color: var(--ink-500); }
.pb-card-kind svg { width: 14px; height: 14px; }
.pb-card-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; }
.pb-card-tools .btn-icon { width: 28px; height: 28px; }
.pb-card-tools .pb-down svg { transform: rotate(180deg); }
.pb-card:first-child .pb-card-tools [data-card-move="-1"], .pb-card:last-child .pb-card-tools [data-card-move="1"] { visibility: hidden; }
.pb-prompt { font-weight: 600; }
.pb-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.pb-row .menu-btn { max-width: 100%; }
.pb-prop { min-width: 0; flex: 1 1 220px; }
.pb-prop .menu-btn { width: 100%; }
.pb-options { display: grid; gap: 6px; }
.pb-add { display: flex; gap: 8px; }
.pb-empty { margin: 4px 2px; }
.pb-read { display: grid; gap: 12px; }
.pb-text { color: var(--ink-700); line-height: var(--t-body-lh); background: var(--surface-2); border-radius: 10px; padding: 12px 14px; }
.pb-q { display: grid; gap: 2px; padding: 4px 2px; }
.pb-stats { display: flex; gap: 20px; margin: 2px 0 10px; color: var(--ink-500); }
.pb-stats b { color: var(--ink-900); font-size: var(--t-h); font-variant-numeric: tabular-nums; margin-right: 4px; }
.spark { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; align-items: end; height: 48px; margin-bottom: 12px; }
.spark span { display: block; height: max(2px, var(--h)); background: var(--tint-crm-fg); opacity: 0.7; border-radius: 3px 3px 0 0; }
.kv-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.kv-list li { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-small); }
.row-btn { width: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.row-btn:hover { background: var(--hover); }
.row-btn svg { width: 16px; height: 16px; color: var(--tint-crm-fg); flex: none; }
.pb-run { display: grid; gap: 16px; }
.pb-ask { display: grid; gap: 8px; }
.pb-ask-q { display: flex; gap: 10px; align-items: baseline; font-weight: 600; color: var(--ink-900); }
.pb-n { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--tint-crm-bg); color: var(--tint-crm-fg); font-size: var(--t-cap); font-weight: 600; font-variant-numeric: tabular-nums; }
.pb-ask .req { margin-left: auto; color: var(--ink-500); font-weight: 400; font-size: var(--t-cap); }
.pb-ask .checks { padding-left: 30px; }
.pb-ask .textarea, .pb-ask .field-help { margin-left: 30px; width: calc(100% - 30px); }
.pb-saved { margin-right: auto; font-size: var(--t-cap); }

/* Reports: a grid of cards, each a number and a chart whose bars open their records. */
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.report { padding: 18px 20px 20px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.report header h2 { font-size: var(--t-h); margin: 0 0 2px; }
.report header p { margin: 0; font-size: var(--t-small); }
.report-total b { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.report-empty { margin: 8px 0; }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hbar { display: grid; grid-template-columns: minmax(92px, 34%) minmax(0, 1fr) 40px; align-items: center; gap: 10px; padding: 5px 6px; margin: 0 -6px; border-radius: 7px; color: var(--ink-900); text-decoration: none; }
a.hbar:hover { background: var(--hover); }
.hbar-label { font-size: var(--t-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 8px; background: var(--viz-track); border-radius: 4px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; width: var(--w); background: var(--viz-1); border-radius: 4px; }
.hbar-fill.low { background: var(--viz-low); }
.hbar-val { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--t-small); color: var(--ink-700); }
.cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; align-items: end; height: 168px; padding-top: 6px; }
.col { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; min-width: 0; }
.col-stack { display: flex; flex-direction: column-reverse; justify-content: flex-start; height: 100%; gap: 2px; width: 100%; max-width: 28px; justify-self: center; box-shadow: 0 1px 0 var(--line); }
.col-part { display: block; height: var(--h); min-height: 0; border-radius: 2px; }
.col-stack > .col-part:last-child { border-radius: 4px 4px 2px 2px; }
.col-label { font-size: 11px; color: var(--ink-500); text-align: center; white-space: nowrap; overflow: visible; justify-self: center; }
/* Many weeks: every other label, each whole, never cut to "22 J". */
.cols.dense .col:nth-child(even) .col-label { visibility: hidden; }
.cols.dense .col-label { font-size: 10.5px; }
.pb-rail .field-pair { grid-template-columns: minmax(0, 1fr); }
.k-0 { background: var(--viz-1); }
.k-1 { background: var(--viz-2); }
.k-2 { background: var(--viz-3); }
.k-3 { background: var(--viz-4); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--t-cap); color: var(--ink-500); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }

/* Data model: the objects, their counts, and what joins them. */
.dm { display: grid; gap: 14px; margin-bottom: 16px; }
.dm-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: center; gap: 0; }
.dm-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dm-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dm-node { display: grid; gap: 2px; padding: 16px 18px; color: var(--ink-900); text-decoration: none; transition: border-color 120ms var(--ease); }
.dm-node:hover { border-color: var(--ink-400); }
.dm-node b { font-size: var(--t-h); }
.dm-node .muted { font-size: var(--t-small); }
.dm-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--tint-crm-bg); color: var(--tint-crm-fg); margin-bottom: 6px; }
.dm-icon svg { width: 17px; height: 17px; }
.dm-edge { position: relative; height: 2px; background: var(--line); margin: 0 -1px; }
.dm-edge span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--canvas); color: var(--ink-500); font-size: var(--t-cap); padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.dm-assoc { padding: 18px 20px 8px; }
.dm-assoc h2 { font-size: var(--t-h); margin: 0 0 6px; }
.dm-assoc .row-meta { max-width: 40%; text-align: right; white-space: normal; }

@media (max-width: 1023px) { .report-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .lib-toolbar .search { margin-left: 0; flex: 1 1 100%; }
  .lib-table th[scope="row"] { min-width: 200px; }
  .dm-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dm-edge { display: none; }
  .dm-row-3, .dm-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dm-assoc .row-meta { max-width: 100%; text-align: left; }
  .dm-assoc .row.two { flex-wrap: wrap; }
  .hbar { grid-template-columns: minmax(80px, 38%) minmax(0, 1fr) 32px; }
  .pb-ask .checks, .pb-ask .textarea, .pb-ask .field-help { margin-left: 0; padding-left: 0; width: 100%; }
}
.pb-ask .textarea { min-height: 64px; }
.crm-table td.lib-phone { display: none; }
@media (max-width: 767px) {
  .crm-table.lib-table tbody tr { grid-template-columns: minmax(0, 1fr) auto; }
  .crm-table.lib-table tbody th { grid-column: 1; }
  .crm-table.lib-table tbody td { display: none; }
  .crm-table.lib-table tbody td.lib-act { display: block; grid-column: 2; grid-row: 1; align-self: start; margin: -6px -8px 0 0; }
  .crm-table.lib-table tbody td.lib-phone { display: block; grid-column: 1 / -1; color: var(--ink-500); white-space: normal; }
  .lib-table .row-sub { white-space: normal; }
}
/* CRM's own part of a record: Activities' filter row keeps its width. */
.cr-body .tl-tools .seg { flex: none; }

/* Details' lower half: one sheet, its parts side by side and parted by hairlines. */
.cr-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: 16px; overflow: hidden; }
/* Each part draws its own right and bottom hairline; the sheet's edge hides the outer ones, and an empty cell stays white. */
.cr-more > .cr-sec { border-top: 0; box-shadow: 1px 0 0 var(--line-soft), 0 1px 0 var(--line-soft); }
.cr-more .list .row { padding-left: 0; padding-right: 0; }
.kit-head .kit-head-link { color: var(--ink-500); font-weight: 500; }

/* Activities: the note box is one line until it is used; the story is one sheet, its months quiet labels. */
.cr-activities .note-box { padding: 10px 14px; margin-bottom: 12px; }
.cr-activities .note-box:not(:focus-within):has(textarea:placeholder-shown) .note-foot { display: none; }
.cr-activities .note-box .textarea { border: 0; box-shadow: none; padding: 6px 0; background: none; }
.cr-activities .tl-tools { margin-bottom: 12px; }
.cr-activities .timeline .tl-month { background: none; border-bottom: 0; padding: 18px 24px 4px; }
.cr-activities .timeline .tl-item { padding: 14px 24px; }
.cr-activities .timeline .tl-month + .tl-item { border-top: 0; }

/* A contact's record: the note box is the main sheet's first line, opening when used. */
.cr-compose { padding-top: 14px; padding-bottom: 14px; }
.cr-compose .note-box { padding: 0; border: 0; box-shadow: none; background: none; }
.cr-compose .note-box:not(:focus-within):has(textarea:placeholder-shown) .note-foot { display: none; }
.cr-compose .textarea { border: 0; box-shadow: none; padding: 6px 0; background: none; }
.cr-seg { margin-bottom: 10px; }
.cr-sec .timeline.compact .tl-item:first-child { padding-top: 4px; }

/* Finance on a client: each statement of work in three lines, the closed ones folded away. */
.fin-sows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.fin-sow { min-width: 0; }
.fin-sow.closed { opacity: 0.72; }
.fin-sow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fin-sow-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-500); }
.fin-sow-name b { color: var(--ink-900); font-weight: 600; margin-right: 6px; }
.fin-sow-name a { color: inherit; text-decoration: none; }
.fin-sow-name a:hover b { color: var(--accent); }
.fin-sow-days { flex: none; font-weight: 600; color: var(--ink-900); white-space: nowrap; }
.fin-sow-sub { display: flex; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; font-size: var(--t-small); color: var(--ink-500); }
.fin-closed > summary { cursor: pointer; font-weight: 600; list-style: none; }
.fin-closed > summary::-webkit-details-marker { display: none; }
.fin-closed > summary .count { color: var(--ink-400); font-weight: 500; }
.fin-closed[open] > summary { margin-bottom: 14px; }
.note-box .textarea[rows="1"] { min-height: 40px; }
.tl-head .tl-comment { width: 28px; height: 28px; color: var(--ink-400); }
.tl-head .tl-comment svg { width: 14px; height: 14px; }
@media (max-width: 1100px) { .cr-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .cr-sub { margin-top: 0; gap: 6px 14px; }
  .cr-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-fig { padding: 14px 16px; }
  .cr-fig:nth-child(odd) { border-left: 0; }
  .cr-fig:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
  .cr-fig-value { font-size: 22px; line-height: 28px; }
  /* An odd last figure takes the whole row, so a client's name reads in full. */
  .cr-fig:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cr-sec { padding: 18px 16px; }
  .cr-sow-top { flex-wrap: wrap; row-gap: 2px; }
  .cr-sow-name { white-space: normal; }
  .cr-sug { flex-wrap: wrap; }
  /* About stays two columns on a phone: a label over each value doubled its length. */
  .rec .cr-kv.kv-rail { grid-template-columns: 104px minmax(0, 1fr); }
  .rec .cr-kv.kv-rail > dt, .rec .cr-kv.kv-rail > dd { padding: 8px 0; }
  /* A task's who and when go under its title on a phone, so the title is read in full. */
  .cr-task { grid-template-columns: 22px minmax(0, 1fr); row-gap: 2px; }
  .cr-task-title { white-space: normal; }
  .cr-task-meta { grid-column: 2; }
}

/* Reports, rebuilt (20 October 2026): the record's figures and sheets; at risk as one line per client with its reasons. */
.rp-tools { margin-bottom: 16px; }
/* In the narrow column a bar's label reads in full ("Contract agreed", "In the last 7 days"). */
.cr-side .hbar { grid-template-columns: 128px minmax(0, 1fr) 28px; }
.rp-risk { list-style: none; margin: 0; padding: 0; }
.rp-risk li { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line-soft); }
.rp-risk li:first-child { border-top: 0; }
.rp-risk li > a { flex: 1; min-width: 0; display: grid; gap: 4px; padding: 10px 0; color: inherit; text-decoration: none; }
.rp-risk li:first-child > a { padding-top: 0; }
.rp-risk-name { font-weight: 600; color: var(--ink-900); }
.rp-risk li > a:hover .rp-risk-name { color: var(--accent); }
.rp-risk-why { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-small); color: var(--tone-due); }
.rp-risk-who { flex: none; }
.rp-total { font-size: 15px; font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.rp-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 16px; overflow: hidden; }
.rp-pair > .cr-sec { border-top: 0; box-shadow: 1px 0 0 var(--line-soft), 0 1px 0 var(--line-soft); }
.rp-team { width: 100%; border-collapse: collapse; }
.rp-late { color: var(--tone-due); font-weight: 600; }
.rp-builder { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.rp-word { color: var(--ink-500); }
.rp-result { margin-left: auto; color: var(--ink-500); font-size: var(--t-small); }
.rp-result b { font-size: 15px; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.rp-group th { white-space: nowrap; padding-right: 16px; }
.rp-group td.rp-bar { width: 40%; padding-right: 16px; }
@media (max-width: 767px) {
  .rp-team .num { width: 54px; font-size: var(--t-small); }
  .rp-team thead th { font-size: 11px; }
  .rp-group td.rp-bar { width: 28%; }
}
.rp-group td.rp-bar .hbar-track { display: block; }
.rp-group th a { color: var(--ink-900); text-decoration: none; }
.rp-group th a:hover { color: var(--accent); }
.rp-days .hbar { grid-template-columns: minmax(110px, 38%) minmax(0, 1fr) 70px; }
.rp-team th, .rp-team td { padding: 8px 0; border-top: 1px solid var(--line-soft); text-align: left; font-weight: 400; }
.rp-team thead th { border-top: 0; padding-top: 0; font-size: var(--t-cap); color: var(--ink-500); font-weight: 500; }
.rp-team .num { text-align: right; font-variant-numeric: tabular-nums; width: 90px; }
.rp-team tbody th .who { font-weight: 500; color: var(--ink-900); }

/* ========================================================== Quarantine ==== */
/* Quarantine, rebuilt (21 October 2026): Waiting opens on its four figures above the list, Activity on its figures,
   the twelve weeks and the inspections in one sheet. */
.q-top { padding: 0 var(--gutter); }
.q-tabs-top .rec-tabs { margin-bottom: 16px; }
.q-place-tabs { margin-bottom: 16px; }
.q-figs { margin-bottom: 16px; }
.q-evidence { margin: 12px 0 0; }
.q-activity-sheet .cr-sec + .cr-sec { border-top: 1px solid var(--line-soft); }
.q-place-tabs .count { margin-left: 6px; color: var(--ink-500); font-weight: 400; font-variant-numeric: tabular-nums; }

/* The list's narrowing: Client and Route as quiet menus under the Kind filter. */
.q-narrow { display: flex; align-items: center; gap: 2px; margin: -4px 0 0 -8px; flex-wrap: wrap; }
.q-narrow .menu-btn { color: var(--ink-500); font-size: var(--t-small); }
.q-narrow .btn-quiet { height: 30px; padding: 0 8px; color: var(--ink-500); font-size: var(--t-small); }
/* The item's decisions: one primary, Delete in the danger tone, never a second primary. */
.q-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.q-danger-text { color: var(--danger); }
.q-danger-text svg { color: var(--danger); }
.btn-primary.q-danger { background: var(--danger); border-color: var(--danger); }
.btn-primary.q-danger:hover { background: var(--danger); border-color: var(--danger); filter: brightness(0.94); }
.q-decided { margin: 0 0 20px; padding: 14px 16px; border-radius: var(--r-row); background: var(--surface-2); border: 1px solid var(--line-soft); }
.q-decided p { margin: 0; line-height: var(--t-body-lh); }
.q-decided p + p { margin-top: 4px; }
.q-who { margin: 16px 0 20px; }
.q-who p { color: var(--ink-700); }
/* A tick in a dialog: the box, the words beside it, the help under them. */
.q-tick { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-row); cursor: pointer; margin: 4px 0 0; }
.q-tick input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.q-tick > span { display: grid; gap: 2px; }
.q-tick b { font-weight: 600; }
.q-choice .row { gap: 10px; cursor: pointer; min-height: var(--row-2); }
.q-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
/* Preview: pressed, then shown masked. */
.q-preview { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.q-preview .q-shown { flex: 1 1 100%; }
.q-preview-note { margin: 20px 0 0; }
/* ICO reports on a phone: the status goes under the item, in full, instead of pushing it off the card. */
@media (max-width: 767px) {
  .q-ico-list .row { flex-wrap: wrap; row-gap: 6px; }
  .q-ico-list .row-main { flex: 1 1 100%; }
  .q-ico-list .row-meta { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; }
  .q-ico-list .row-meta .state { white-space: normal; align-items: baseline; }
}
.q-shown { display: grid; gap: 10px; }
.q-shown .btn-quiet { justify-self: start; }
.q-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-body); line-height: var(--t-body-lh); max-height: 520px; overflow-y: auto; padding: 12px 14px; border-radius: var(--r-row); background: var(--surface-2); border: 1px solid var(--line-soft); }
.q-table th { position: sticky; top: 0; background: var(--surface); }
.q-table td.q-masked { color: var(--tone-due); font-weight: 500; }
.q-media { display: block; max-width: 100%; max-height: 520px; border-radius: var(--r-row); border: 1px solid var(--line-soft); background: var(--surface-2); }
/* A file held for its pictures: each picture at a size that can be read, two across on a laptop, one on a phone. */
.q-pictures { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.q-picture { margin: 0; display: grid; gap: 6px; align-content: start; }
.q-picture .q-media { width: 100%; height: auto; max-height: 360px; object-fit: contain; }
.q-picture figcaption { font-size: var(--t-small); color: var(--ink-500); }
.q-picture-none p { margin: 0; padding: 24px 14px; border-radius: var(--r-row); background: var(--surface-2); border: 1px dashed var(--line); font-size: var(--t-small); }
@media (max-width: 767px) { .q-pictures { grid-template-columns: 1fr; } }
/* Activity's four numbers: each opens the inspections it counts. */
a.q-stat { text-decoration: none; color: inherit; transition: border-color 120ms var(--ease); }
a.q-stat:hover, a.q-stat[aria-current="true"] { border-color: var(--ink-400); }
[data-split="quarantine"] .row-title b { max-width: none; flex: 1 1 auto; min-width: 0; }
[data-split="quarantine"] .row { align-items: flex-start; }
[data-split="quarantine"] .row-meta { padding-top: 1px; }
@media (max-width: 767px) {
  .q-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .q-actions .btn { height: 44px; }
  .q-narrow { margin-left: -8px; }
}
/* The Kind filter is one row: it fits a 400 px list, and scrolls sideways on the phone. */
[data-split="quarantine"] .filters { flex-wrap: nowrap; overflow-x: auto; }

/* Quarantine: Overview's chart. The three series are the Hub's own tokens,
   checked with the dataviz validator (CVD and normal-vision separation pass). */
.q-chart { display: block; width: 100%; height: auto; margin-top: 4px; }
/* The Hub's icons are stroked line drawings; a chart's marks are fills with no outline. */
.q-chart, .q-chart * { stroke: none; }
.q-chart text { font-family: var(--font); font-weight: 400; }
.q-chart .q-bar-held, .q-swatch.q-bar-held { fill: var(--tone-due); background: var(--tone-due); }
.q-chart .q-bar-excluded, .q-swatch.q-bar-excluded { fill: var(--accent); background: var(--accent); }
.q-chart .q-bar-admitted, .q-swatch.q-bar-admitted { fill: var(--live); background: var(--live); }
.q-chart .q-grid { stroke: var(--line); stroke-width: 1; }
.q-chart .q-axis { fill: var(--ink-500); font-size: 11px; font-variant-numeric: tabular-nums; }
.q-chart .q-hit { fill: transparent; }
.q-chart .q-day:hover .q-hit { fill: var(--hover); }
.q-legend { list-style: none; margin: 0 0 6px; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--t-small); color: var(--ink-700); }
.q-legend li { display: inline-flex; align-items: center; gap: 6px; }
.q-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.q-table-view { margin-top: 8px; }
.q-table-view summary { cursor: pointer; }
.q-row-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.q-nowrap { white-space: nowrap; }
@media (max-width: 900px) { .q-row-even { grid-template-columns: minmax(0, 1fr); } }
/* Quarantine: Detectors, Policies, Test. */
.q-lede { margin: 0 0 16px; color: var(--ink-700); font-size: var(--t-body); line-height: var(--t-body-lh); max-width: 72ch; }
.q-wrap { white-space: normal; }
.q-detectors { list-style: none; margin: 0; padding: 0; }
.q-detector { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.q-detector:last-child { border-bottom: 0; }
.q-detector-head { display: flex; align-items: center; gap: 10px; }
.q-detector-head b { font-weight: 600; }
.q-detector-head .state { margin-left: auto; }
.q-detector p { margin: 4px 0 0; max-width: 80ch; }
.q-facts { display: flex; gap: 24px; flex-wrap: wrap; margin: 10px 0 0; }
.q-facts div { display: grid; gap: 1px; }
.q-facts dt { color: var(--ink-500); font-size: var(--t-cap); }
.q-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.q-test-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.q-test-row .grow { flex: 1; }
.q-inline-tick { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-700); cursor: pointer; }
.q-inline-tick input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.q-test-result { margin-top: var(--gap); }
.q-verdict-head { display: flex; align-items: center; gap: 8px; font-size: var(--t-h); }
.q-verdict-head b { font-weight: 600; }
.q-reasons { margin: 10px 0 0; padding-left: 20px; }
.q-reasons li { margin: 2px 0; }
.q-sub { margin: 16px 0 8px; font-size: var(--t-ui); font-weight: 600; }
@media (max-width: 767px) {
  /* The chart's viewBox is drawn for a laptop; its labels keep a readable size when it shrinks. */
  .q-chart .q-axis { font-size: 22px; }
  .q-row-even .row-meta { font-size: var(--t-cap); }
  .q-test-row .btn-primary { width: 100%; }
  .q-facts { gap: 16px; }
  .q-detector { padding: 14px 16px; }
}
/* A title with room to spare takes the width and wraps to two lines before it is cut. */
.q-two-line .row { align-items: flex-start; }
.q-two-line .row-title b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: none; flex: 1 1 auto; min-width: 0; }
.q-two-line .row-meta { padding-top: 1px; }
@media (max-width: 767px) {
  /* A card on the phone names each value, and reads as one thing to tap. */
  .crm-table tbody td[data-label]::before { content: attr(data-label); display: block; color: var(--ink-500); font-size: 11px; line-height: 14px; }
  .crm-table tbody td [data-edit] { pointer-events: none; background: none; border-color: transparent; padding-left: 0; }
  .crm-table tbody tr[data-record-preview] { cursor: pointer; }
}
.dropzone { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 28px 16px; margin: 4px 0 12px; border: 1.5px dashed var(--line); border-radius: 12px;
  background: var(--surface-2); cursor: pointer; transition: border-color 120ms var(--ease), background 120ms var(--ease); }
.dropzone svg { width: 22px; height: 22px; color: var(--ink-500); }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.has-file { border-style: solid; border-color: var(--accent); }
.dropzone:focus-within { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.dz-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.map-table th, .map-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; }
.map-table thead th { color: var(--ink-500); font-weight: 500; font-size: var(--t-small); }
.map-table tbody tr:last-child th, .map-table tbody tr:last-child td { border-bottom: 0; }
.import-map .table-scroll { margin: 0 -4px 16px; }
.queue-client { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; }
.queue-client svg { width: 15px; height: 15px; color: var(--ink-500); }
.queue-notes { margin: 10px 0 0; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; color: var(--ink-700); line-height: var(--t-body-lh); }
.cols.denser .col-label { visibility: hidden; }
.cols.denser .col:nth-child(4n+1) .col-label { visibility: visible; }
.cols.denser { gap: 2px; }
/* The bulk bar takes the width its actions need (left: 50% would otherwise cap it at half the screen and wrap it),
   and steps aside while a sheet or dialog is open over the list. */
.bulk-bar { width: max-content; }
.bulk-bar [data-bulk-actions] { flex-wrap: nowrap; }
body:has(.scrim) .bulk-bar { visibility: hidden; }
@media (max-width: 767px) { .bulk-bar { width: auto; left: 12px; right: 12px; transform: none; } .bulk-bar [data-bulk-actions] { flex-wrap: wrap; } }
.linked-activity { padding: 0; overflow: hidden; margin-bottom: 16px; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.linked-activity .timeline { margin: 0; }
/* The linked activity is shown on its own, so a pinned one does not take the pinned list's grey,
   which is also the row's hover colour and read as stuck on hover (QA-28). */
.linked-activity .tl-item.pinned { background: none; }
.task-li { position: relative; }
.task-select { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; accent-color: var(--accent); z-index: 1; opacity: 0; transition: opacity 120ms var(--ease); }
.task-li:hover .task-select, .task-select:checked, .task-select:focus-visible, [data-split=tasks]:has(.task-select:checked) .task-select { opacity: 1; }
.task-li:hover .task-dot, .task-li:has(.task-select:checked) .task-dot, [data-split=tasks]:has(.task-select:checked) .task-dot { visibility: hidden; }
.task-title-input { font-size: var(--t-title); font-weight: 650; letter-spacing: -0.01em; border-color: transparent; background: transparent; padding: 4px 6px; margin: 0 -6px 8px; height: auto; box-shadow: none; }
.task-title-input:hover { border-color: var(--line); }
textarea.task-title-input { resize: none; overflow: hidden; line-height: 1.25; width: 100%; field-sizing: content; }
.task-pane .task-notes { margin: 4px 0 8px; }
.task-links { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.task-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 500; }
.task-links a svg { width: 16px; height: 16px; flex: none; }
.task-title-input:focus { border-color: var(--accent); background: var(--surface); }
.task-client { display: flex; align-items: center; gap: 4px; }
.task-client .menu-btn { margin-left: -8px; }
.open-link { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: var(--ink-500); }
.open-link:hover { background: var(--hover); color: var(--ink-900); }
.open-link svg { width: 14px; height: 14px; }
@media (max-width: 767px) { .task-select { opacity: 1; } .task-li .task-dot { visibility: hidden; } }
.row-with-menu { display: flex; align-items: center; gap: 2px; }
.row-with-menu > .row { flex: 1; min-width: 0; }
.row-with-menu .row-menu { opacity: 0; transition: opacity 120ms var(--ease); }
.row-with-menu:hover .row-menu, .row-with-menu:focus-within .row-menu { opacity: 1; }
@media (max-width: 767px) { .row-with-menu .row-menu { opacity: 1; } }
.quick-filters { display: flex; flex-wrap: wrap; gap: 0 2px; align-items: center; }
.quick-filters .menu-btn { height: 32px; font-size: var(--t-small); }
@media (max-width: 767px) { .quick-filters { order: 3; width: 100%; margin: 0 -8px; } }
.snip-pop .snip-top b.mention-at { color: var(--accent); font-family: var(--font); }
.tl-body .mention { color: var(--accent); font-weight: 600; background: var(--accent-soft); border-radius: 4px; padding: 0 3px; }
.fill-btn { height: 26px; font-size: var(--t-cap); color: var(--accent); padding: 0 8px; }
.notice-prefs { max-width: 720px; }
.pref-row { align-items: center; }
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { width: 36px; height: 20px; border-radius: 999px; background: var(--line); position: relative; transition: background 140ms var(--ease); }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-hair); transition: transform 140ms var(--ease); }
.switch input:checked + .sr + .switch-track { background: var(--accent); }
.switch input:checked + .sr + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .sr + .switch-track { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.rec-pager { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.rec-pager .muted { margin-right: 4px; }
.rec-pager [aria-disabled="true"] { opacity: 0.35; pointer-events: none; }
@media (max-width: 767px) { .rec-pager .muted { display: none; } }
/* A table wider than its card says so: a soft shadow at whichever edge has more to scroll to. */
.crm-index .table-scroll, .lib-table-wrap {
  background:
    linear-gradient(to right, var(--surface) 40%, transparent) left center / 48px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 40%, transparent) right center / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--line), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--line), transparent) right center / 12px 100% no-repeat scroll,
    var(--surface);
}
.crm-index .crm-table tbody tr > * { background: transparent; }
.crm-index .crm-table tbody th.name { min-width: 200px; max-width: 320px; }

/* Quarantine, after the review of 26 September 2026 (docs/ledgers/quarantine.md). */
/* CRM's property cards lay a value out as a row of parts; Quarantine's facts read as sentences. */
.q-kv > dd { display: block; }
.q-kv > dd .cap { display: block; margin-top: 2px; }
/* One finding: what and how many, then where and how sure, beneath. */
.q-find { display: grid; gap: 2px; }
.q-find + .q-find { margin-top: 10px; }
.q-find b { font-weight: 600; }
.q-test-range { color: var(--ink-700); }
.q-row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
/* A row's wait: plain words, amber once it is two days old. A filled flag is saved for what is overdue. */
.q-wait { color: var(--ink-500); font-size: var(--t-small); white-space: nowrap; }
.q-wait.late { color: var(--tone-due); font-weight: 500; }
.q-row-meta { flex-direction: column; align-items: flex-end; gap: 2px; }
[data-split="quarantine"] .row-title b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* The request, at the top of the item in Opt-in requests. */
.q-request { margin: 0 0 16px; }
.q-request p + p { margin-top: 4px; color: var(--ink-700); }
/* The decision bar: after the evidence; on the phone it stays at the foot of the screen. */
.q-actions { align-items: center; margin: 20px 0; }
.q-actions .grow { flex: 1; }
.q-actions-side { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.q-actions-quiet { margin: 12px 0 0; }
.q-decided .q-kv { margin-top: 8px; }
.q-notes .row { align-items: flex-start; }
.q-note-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-700); line-height: var(--t-body-lh); margin-top: 2px; }
.q-notes .row-main { display: grid; gap: 2px; }
.q-section-links { margin-left: auto; display: inline-flex; gap: 16px; font-weight: 400; font-size: var(--t-small); }
h2.section:has(.q-section-links) { display: flex; align-items: baseline; }
.q-more { padding: 12px 16px; }
.q-more .muted { margin-left: 6px; }
/* A card head's link: a quiet word, never an underlined link inside a pill. */
.q-head-link { color: var(--ink-500); font-size: var(--t-small); text-decoration: none; }
.q-head-link:hover { color: var(--ink-900); }
.q-how { margin: 6px 0 0; }
.q-how summary { cursor: pointer; }
.q-route-name { font-weight: 600; }
.q-table th.q-sheet { background: var(--surface-2); text-align: left; }
.q-count { margin: 4px 0 8px; }
.q-activity .row-title { gap: 8px; align-items: center; }
.q-activity .row-title .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.q-activity a.row { text-decoration: none; color: inherit; }
@media (max-width: 767px) {
  [data-quarantine-item] .q-actions:not(.q-actions-quiet) {
    position: sticky; bottom: 0; z-index: 5; margin: 16px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr;
  }
  [data-quarantine-item] .q-actions .q-actions-side { grid-column: 1 / -1; justify-content: flex-start; order: 2; }
  [data-quarantine-item] .q-actions .grow { display: none; }
  .q-section-links { gap: 12px; }
}
@media print {
  .app-side, .rail, [data-topbar], .page-actions, .q-actions { display: none !important; }
  .q-record { border: 0; box-shadow: none; }
}
/* A choice in a dialog: its name, then what it means beneath. */
.q-choice .row > span { display: grid; gap: 2px; padding: 10px 0; }
.q-choice .row b { font-weight: 600; }
/* The Kind filter fits the list at 1280 with its full words. */
[data-split="quarantine"] .q-kinds { gap: 2px; }
[data-split="quarantine"] .q-kinds .filter { padding: 0 9px; font-size: var(--t-small); }
@media (max-width: 767px) {
  /* Above the tab bar, so the decision is in reach of a thumb and never behind the tabs. */
  [data-quarantine-item] .q-actions:not(.q-actions-quiet) { bottom: calc(var(--tabs) + env(safe-area-inset-bottom)); padding-bottom: 10px; }
  [data-quarantine-item] .q-actions-quiet { display: flex; }
}
@media (max-width: 767px) {
  /* The page scrolls on a phone, not the pane: so the decision bar sticks to the screen. */
  [data-split="quarantine"] .split-detail { overflow: visible; }
}

/* ------------------------------------------------------------- Finance ---
   Finance's own pieces (src/finance/web), every one under a fin- class, built
   from the kit's tokens: the days bar, the stacked invoice bar, the charts,
   the reconciliation table and the stage editor. */
/* The Xero line as a record's line of facts (21 October 2026): quiet, under the title, Refresh at its end. */
.fin-sync { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; color: var(--ink-500); font-size: var(--t-ui); margin: -10px 0 20px; }
.fin-sync .state { font-size: var(--t-ui); color: var(--ink-700); white-space: normal; min-width: 0; overflow-wrap: anywhere; }
.fin-sync .btn-quiet { height: 28px; padding: 0 8px; margin-left: -8px; }
/* The figures' quiet line takes the figure's tone: overdue late, ready to invoice due, paid this month up. */
.fin-figs .cr-fig.late .cr-fig-sub, .fin-figs .cr-fig.due .cr-fig-sub { color: var(--tone-due); }
.fin-figs .cr-fig.up .cr-fig-sub { color: var(--live); }
.fin-rec-sheet { padding: 8px 20px; }
/* Two sheets side by side under a full-width one (Payroll's Readiness and History). */
.fin-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); align-items: start; }
@media (max-width: 900px) { .fin-pair { grid-template-columns: minmax(0, 1fr); } }
/* Month end: the month's six steps in order, each its number (a tick once done), what the records say, its state and
   its one action. */
.fin-steps { list-style: none; margin: 0; padding: 4px 0; }
/* Fixed columns, so every step's state and button sit on the same lines down the sheet. */
.fin-step { display: grid; grid-template-columns: 32px minmax(0, 1fr) 120px 140px; gap: 16px; align-items: center; padding: 16px 24px; }
.fin-step + .fin-step { border-top: 1px solid var(--line-soft); }
.fin-step-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--ink-500); font-size: var(--t-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-step-done .fin-step-n { border-color: var(--live); background: var(--live); color: var(--on-dark); }
.fin-step-done .fin-step-n svg { width: 15px; height: 15px; stroke-width: 2.5; }
.fin-step-todo .fin-step-n { border-color: var(--tone-due); color: var(--tone-due); }
.fin-step-main { display: grid; gap: 3px; min-width: 0; }
.fin-step-main b { font-weight: 600; color: var(--ink-900); }
.fin-step-main span { font-size: var(--t-small); color: var(--ink-500); overflow-wrap: anywhere; }
.fin-step-done .fin-step-main b { color: var(--ink-700); }
.fin-step-act { display: flex; justify-content: flex-end; }
@media (max-width: 767px) {
  .fin-step { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "n main main" ". state act"; padding: 14px 16px; row-gap: 8px; }
  .fin-step-n { grid-area: n; } .fin-step-main { grid-area: main; } .fin-step-state { grid-area: state; } .fin-step-act { grid-area: act; }
}
/* Finance settings (21 October 2026): the sections one gap apart, the contracts one row a person that opens to edit. */
.fin-settings { display: grid; gap: var(--gap); }
.fin-contracts { display: grid; border-top: 1px solid var(--line-soft); }
.fin-contract { border-bottom: 1px solid var(--line-soft); }
.fin-contract > summary { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; cursor: pointer; list-style: none; }
.fin-contract > summary::-webkit-details-marker { display: none; }
.fin-contract-name { font-weight: 500; color: var(--ink-900); }
.fin-contract-what { color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-contract-open { color: var(--accent); font-size: var(--t-small); font-weight: 500; }
.fin-contract[open] > summary .fin-contract-open { color: var(--ink-500); }
.fin-contract > :not(summary) { margin: 0 0 14px; }
@media (max-width: 767px) { .fin-contract > summary { grid-template-columns: minmax(0, 1fr) auto; } .fin-contract-what { grid-column: 1; grid-row: 2; white-space: normal; } .fin-contract-open { grid-row: 1 / span 2; grid-column: 2; } }
/* The top-up, when the days run out before the end date: one line at the head of the sheet, its way out beside it. */
.fin-callout-sec { padding-top: 14px; padding-bottom: 14px; background: var(--row-risk); border-radius: var(--r-card) var(--r-card) 0 0; }
.fin-callout { display: flex; align-items: center; gap: 16px; }
.fin-callout p { margin: 0; color: var(--ink-700); font-size: var(--t-small); line-height: 20px; }
.fin-callout .fin-actions { flex: none; }
@media (max-width: 767px) { .fin-callout { flex-direction: column; align-items: flex-start; gap: 10px; } }
/* A list page's one sheet: the table on the sheet's own edges, a quiet foot under a hairline. */
.fin-sheet > .cr-sec { padding-top: 8px; padding-bottom: 8px; }
.fin-sheet-foot { margin: 0; padding: 12px 24px 14px; border-top: 1px solid var(--line-soft); color: var(--ink-500); font-size: var(--t-small); }
/* A side sheet's short lists: a title and its line, the figure at the end. */
.fin-items { list-style: none; margin: 0; padding: 0; }
.fin-items li + li { border-top: 1px solid var(--line-soft); }
.fin-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; color: inherit; text-decoration: none; }
.fin-items li:first-child .fin-item { padding-top: 2px; }
a.fin-item:hover b { color: var(--accent); }
.fin-item-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 0; }
.fin-item-main span { overflow-wrap: anywhere; }
/* A record's facts with an icon: the icon the size of the words. */
.fin-fact svg { width: 15px; height: 15px; flex: none; color: var(--ink-400); }
/* Days and Money beside the stages: a label and its figure on one line, on a phone too. */
.kv.fin-kv { grid-template-columns: minmax(0, 1fr) auto; }
.kv.fin-kv > dd { text-align: right; }
@media (max-width: 767px) { .kv.fin-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; } .kv.fin-kv > dt, .kv.fin-kv > dd { padding: 8px 0; min-height: 0; } .kv.fin-kv > dt { border-bottom: 1px solid var(--line-soft); } }
.fin-item-main b { font-weight: 500; color: var(--ink-900); overflow-wrap: anywhere; }
.fin-item-main span { font-size: var(--t-small); color: var(--ink-500); }
.fin-item-meta { display: grid; justify-items: end; gap: 2px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.fin-item-meta > span { font-size: var(--t-cap); color: var(--ink-500); }
.fin-item-meta .fin-late { color: var(--tone-due); }
/* A table in a sheet's section sits on the section's own edges. */
.cr-sec .table-wrap { margin: 0 -4px; }
.cr-sec .fin-table th:first-child, .cr-sec .fin-table td:first-child { padding-left: 4px; }
.cr-sec .fin-table th:last-child, .cr-sec .fin-table td:last-child { padding-right: 4px; }
.fin-sync > * { min-width: 0; }
.fin-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); align-items: start; margin-bottom: var(--gap); }
.fin-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); align-items: start; }
.fin-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.fin-stack { display: grid; gap: var(--gap); min-width: 0; }
/* A statement of work's cards stand one gap apart, whatever margin a card carries elsewhere. */
.fin-page { display: grid; gap: var(--gap); min-width: 0; }
.fin-page > *, .fin-page .fin-two, .fin-page .fin-grid { margin: 0; }
.fin-two.even { align-items: stretch; }
.card-head > .btn-quiet.meta[data-fin-sheet] { padding: 0; height: auto; }
.fin-listcard .note-box { padding: 0 0 12px; }
.fin-listcard .note-box .textarea { border: 1px solid var(--line); border-radius: var(--r-control); padding: 10px 12px; }
.fin-listcard .note-foot { border-top: 0; justify-content: flex-end; }
.fin-editor-row[data-fin-locked] .input, .fin-editor-row[data-fin-locked] .menu-btn { background: var(--surface-2); color: var(--ink-500); }
.fin-more-link { margin: 8px 0 0 -14px; }
.fin-big { display: block; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fin-big-label { color: var(--ink-500); font-size: var(--t-small); }
.fin-bar { position: relative; height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; margin: 8px 0 4px; }
.fin-bar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--live); }
.fin-bar.over > span { background: var(--danger); }
.fin-bar.closed > span { background: var(--ink-400); }
.fin-days { min-width: 170px; }
.fin-table .fin-days { min-width: 250px; }
.fin-days-line { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.fin-days-line b { font-weight: 600; }
.fin-sub { display: block; color: var(--ink-500); font-size: var(--t-small); line-height: 18px; }
.fin-sub.warn { color: var(--tone-due); }
.fin-stacked { display: flex; height: 10px; gap: 2px; margin: 10px 0 8px; }
.fin-stacked > span { display: block; height: 100%; min-width: 2px; }
.fin-stacked > span:first-child { border-radius: 4px 0 0 4px; }
.fin-stacked > span:last-child { border-radius: 0 4px 4px 0; }
.fin-stacked > span:only-child { border-radius: 4px; }
.fin-s-paid { background: var(--live); }
.fin-s-invoiced { background: var(--accent); }
.fin-s-due { background: var(--tone-due); }
.fin-s-notyet { background: var(--line); }
.fin-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--t-small); color: var(--ink-700); }
.fin-key li { display: inline-flex; align-items: center; gap: 6px; }
.fin-key i, .fin-key-cell i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.fin-key-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.fin-c1 { background: var(--chart-1); fill: var(--chart-1); }
.fin-c2 { background: var(--chart-2); fill: var(--chart-2); }
.fin-c3 { background: var(--chart-3); fill: var(--chart-3); }
.fin-c4 { background: var(--chart-4); fill: var(--chart-4); }
.fin-chart { display: block; width: 100%; height: auto; }
.fin-chart-narrow { display: none; }
@media (max-width: 767px) { .fin-chart-wide { display: none; } .fin-chart-narrow { display: block; } }
.fin-chart path, .fin-chart rect, .fin-chart text { stroke: none; }
.fin-chart text { font-family: var(--font); fill: var(--ink-500); font-size: 11px; font-variant-numeric: tabular-nums; }
.fin-chart .fin-grid-line { stroke: var(--line); stroke-width: 1; }
.fin-chart .fin-hit { fill: transparent; }
.fin-chart g:hover .fin-hit { fill: var(--hover); }
.fin-stages { list-style: none; margin: 0; padding: 0; }
.fin-stages li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.fin-stages li:first-child { border-top: 0; }
.fin-stages .n { color: var(--ink-500); font-variant-numeric: tabular-nums; }
.fin-stages .amt { font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.fin-ref { font-family: var(--font); font-weight: 500; font-size: var(--t-small); background: var(--canvas); border-radius: 6px; padding: 1px 6px; color: var(--ink-700); white-space: nowrap; }
.fin-copy { border: 0; background: none; padding: 0 4px; color: var(--accent); cursor: pointer; font-size: var(--t-small); }
/* Ready to invoice's fields: a long value wraps inside its column and Copy stays beside it, at 1280 and at 390. */
.kv.fin-fields { grid-template-columns: 132px minmax(0, 1fr); }
.kv.fin-fields > dd { flex-wrap: wrap; align-items: baseline; min-width: 0; }
.kv.fin-fields > dd > .fin-ref { white-space: normal; overflow-wrap: anywhere; min-width: 0; max-width: calc(100% - 52px); }
.kv.fin-fields > dd > .fin-copy { flex: none; }
.kv.fin-fields > dd > .fin-sub { flex: 1 1 100%; }
@media (max-width: 767px) { .kv.fin-fields { grid-template-columns: 1fr; } }
/* A statement of work's More: a menu of actions (role=menu), opened by finance.js under its button. */
.fin-menu { position: relative; display: inline-flex; }
.fin-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 232px; display: grid; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.fin-menu-list[hidden] { display: none; }
.fin-menu-item { display: flex; align-items: center; min-height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--ink-900);
  font: inherit; font-size: var(--t-ui); text-align: left; cursor: pointer; white-space: nowrap; }
.fin-menu-item:hover, .fin-menu-item:focus-visible { background: var(--hover); outline: none; }
.fin-menu-item.menu-danger { color: var(--danger); }
@media (max-width: 767px) { .fin-menu-list { position: fixed; left: var(--gutter); right: var(--gutter); top: auto; bottom: calc(var(--tabs) + 12px); min-width: 0; }
  .fin-menu-item { min-height: 44px; } }
/* Finance's phone tab carries the sidebar's own words, "Statements of work", on two lines rather than cut off. */
@media (max-width: 767px) { .tabs .tab[href="/finance/sows"] span:not(.badge) { white-space: normal; text-align: center; line-height: 12px; } }
.fin-table td.num, .fin-table th.num { text-align: right; white-space: nowrap; }
.fin-table tr.fin-total td { font-weight: 600; border-top: 1px solid var(--line); }
.fin-table tr.fin-group td { font-size: var(--t-cap); font-weight: 600; color: var(--ink-500); padding-top: 18px; height: auto; }
.fin-table tbody tr.fin-group:first-child td { padding-top: 4px; }
.fin-table .row-link { color: inherit; text-decoration: none; font-weight: 500; }
.fin-table .row-link:hover { color: var(--accent); }
.fin-table-pad { padding: 4px 20px; }
@media (min-width: 768px) { .fin-table td:not(.w) { white-space: nowrap; } .fin-table td.w { min-width: 160px; } }
.fin-rec input.input { width: 84px; text-align: right; font-variant-numeric: tabular-nums; height: 30px; }
.fin-rec input.fin-why { width: 100%; min-width: 150px; text-align: left; }
.fin-table tr.fin-head-group th { height: 24px; border-bottom: 0; color: var(--ink-700); font-weight: 600; }
.fin-rec td { white-space: nowrap; }
.fin-rec td:first-child { white-space: normal; min-width: 180px; }
.fin-rec input:disabled { background: var(--surface-2); color: var(--ink-400); }
/* The explanation is asked for only on a row whose figures differ. */
.fin-rec input.fin-why:disabled { display: none; }
@media (max-width: 767px) { .fin-rec td:has(> .fin-why:disabled) { display: none; } }
.fin-rec .saved { color: var(--ink-500); font-size: var(--t-cap); min-width: 44px; display: inline-block; }
.fin-rec .saved.bad { color: var(--danger); }
.fin-rec th.grp { text-align: center; border-bottom: 1px solid var(--line-soft); }
.fin-rec td[data-fin-hub="remaining"] { padding-right: 24px; }
@media (max-width: 767px) {
  .fin-rec td[data-label^="Yours"] { flex: 1 1 calc(50% - 8px); }
  .fin-rec td[data-label^="Yours"]::before { display: block; margin: 0 0 4px; }
}
.fin-foot { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); margin-top: var(--gap); }
.fin-foot .btn-primary { margin-left: auto; }
/* The Finance tab on a CRM record: a statement of work's name and figures wrap rather than cut off. */
.fin-tab .row-title b, .fin-tab .row-title .plain-link, .fin-tab .row-sub { white-space: normal; max-width: none; flex-shrink: 1; }
.fin-tab .list .row.two { padding: 12px 0; }
.fin-tab .fin-bar { margin: 6px 0 4px; }
.fin-editor { display: grid; gap: 10px; }
.fin-editor-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 110px minmax(0, 1fr) 32px; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); }
.fin-editor-row.lines { grid-template-columns: 110px minmax(0, 1fr) 32px; grid-template-areas: "name name x" "days owner ."; }
.fin-editor-row.lines .a-name { grid-area: name; } .fin-editor-row.lines .a-x { grid-area: x; }
.fin-editor-row.lines .a-days { grid-area: days; } .fin-editor-row.lines .a-owner { grid-area: owner; }
.fin-editor-row > div > .field { margin: 0; }
/* A date field's own minimum width would push past a phone's gutter in a pair. */
form[data-fin-form] .input { min-width: 0; width: 100%; }
.fin-editor-row .field { margin: 0; }
.fin-editor-row.stages { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.7fr) 32px; grid-template-areas: "desc desc desc x" "trig basis amt ."; }
.fin-editor-row.stages[data-fin-ondate] { grid-template-areas: "desc desc desc x" "trig basis amt ." "date date . ."; }
.fin-editor-row.stages .a-desc { grid-area: desc; } .fin-editor-row.stages .a-x { grid-area: x; }
.fin-editor-row.stages .a-trig { grid-area: trig; } .fin-editor-row.stages .a-basis { grid-area: basis; }
.fin-editor-row.stages .a-amt { grid-area: amt; } .fin-editor-row.stages .a-date { grid-area: date; }
.fin-editor-row.stages > div > .field { margin: 0; }
.fin-editor-row.stages:not([data-fin-ondate]) .a-date { display: none; }
.fin-editor-row .locked { grid-column: 1 / -1; color: var(--ink-500); font-size: var(--t-cap); }
.fin-sum { font-size: var(--t-small); color: var(--ink-500); }
.fin-sum.bad { color: var(--danger); }
.fin-month { display: inline-flex; align-items: center; gap: 2px; }
.fin-month b { min-width: 124px; text-align: center; font-weight: 500; }
.fin-story { list-style: none; margin: 0; padding: 0; }
.fin-story li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-small); }
.fin-story li:first-child { border-top: 0; }
.fin-story time { color: var(--ink-500); font-variant-numeric: tabular-nums; }
.fin-story.narrow li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
/* On a phone an open invoice is the whole screen: the list's own line and filters step aside, and the way back lines up with the title. */
@media (max-width: 767px) {
  body:has([data-split][data-open="detail"]) .fin-split-top { display: none; }
  [data-split] .split-detail-inner > .btn-quiet.phone-only:first-child { margin-left: -14px; }
}
/* A list inside a padded card lines up with the card's heading, and its titles wrap rather than cut off. */
.fin-listcard .list { border-top: 0; }
.fin-listcard .list .row { padding-left: 0; padding-right: 0; background: transparent; }
.fin-listcard .list li:last-child .row { border-bottom: 0; }
.fin-listcard .row-title b, .fin-listcard .row-main > b { white-space: normal; max-width: none; flex-shrink: 1; }
.fin-three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fin-story.wide li { grid-template-columns: 170px minmax(0, 1fr); }
.fin-story.wide time { white-space: nowrap; }
.fin-exports .row-title b, .fin-exports .row-sub { white-space: normal; }
.fin-exports .row-action { display: flex; gap: 8px; flex: none; }
.nw { white-space: nowrap; }
.fin-table td.w .plain-link { white-space: normal; overflow: visible; }
[data-split="invoices"] .q-actions { flex-wrap: wrap; }
@media (max-width: 767px) {
  [data-split="invoices"] .q-actions { display: flex; flex-direction: column; align-items: stretch; }
  [data-split="invoices"] .q-actions .btn { width: 100%; white-space: normal; }
  body:has(.app-head .tile-finance) .fin-table.stack td:has(> .fin-days) { flex: 1 1 100%; }
}
.fin-rec td[data-label="Explanation"] { white-space: normal; min-width: 200px; max-width: 300px; }
.fin-rec + .notice, .fin-rec + .fin-foot { margin-top: var(--gap); }
.split-detail-inner .kv .plain-link { white-space: normal; overflow: visible; }
.fin-table.stack tr.fin-total td { border-top: 0; }
@media (max-width: 767px) {
  .fin-exports .row { flex-wrap: wrap; row-gap: 10px; }
  .fin-exports .row-action { width: 100%; }
  .fin-exports .row-action .btn { flex: 1; }
  .fin-table.stack tr.fin-total { border-top: 1px solid var(--line); }
  .rec-tabs { -webkit-mask-image: linear-gradient(to right, transparent, var(--ink-900) 16px, var(--ink-900) calc(100% - 16px), transparent); mask-image: linear-gradient(to right, transparent, var(--ink-900) 16px, var(--ink-900) calc(100% - 16px), transparent); }
}
.fin-line { display: block; white-space: nowrap; }
.fin-table .menu-field[data-fin-choose] { min-width: 150px; justify-content: space-between; }
.fin-table input[data-fin-note] { width: 100%; min-width: 200px; }
.fin-line b { font-weight: 500; }
.fin-listcard .row-sub { white-space: normal; }
.fin-balance { color: var(--ink-900); font-weight: 600; font-size: var(--t-ui); }
@media (max-width: 767px) { .fin-table.stack td { white-space: normal; min-width: 0; } }
.fin-choices { border: 0; margin: 4px 0 14px; padding: 0; display: grid; gap: 6px; }
.fin-choices .check-line { display: flex; min-height: 32px; }
.fin-filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
[data-split="invoices"] .row-title > b { max-width: none; flex-shrink: 1; min-width: 0; }
@media (max-width: 767px) {
  .fin-filterbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter);
    -webkit-mask-image: linear-gradient(to right, var(--ink-900) calc(100% - 32px), transparent); mask-image: linear-gradient(to right, var(--ink-900) calc(100% - 32px), transparent); }
  .fin-filterbar::-webkit-scrollbar { display: none; }
}
.fin-chips .filter-chip { flex: none; white-space: nowrap; text-decoration: none; gap: 6px; }
.fin-chips .filter-chip .count { color: var(--ink-500); font-variant-numeric: tabular-nums; }
.fin-chips .filter-chip[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.fin-sentence { color: var(--ink-700); margin: 0 0 16px; }
.fin-joins { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: -4px 0 16px; font-size: var(--t-body); }
.fin-joins .sep { color: var(--ink-400); }
.fin-lede { color: var(--ink-500); margin: -4px 0 16px; font-size: var(--t-small); }
@media (max-width: 1100px) { .fin-three { grid-template-columns: 1fr; } .fin-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .fin-two { grid-template-columns: 1fr; } }
.fin-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* A statement of work's name is long: on a phone Finance's title wraps rather than cutting it off. */
@media (max-width: 767px) { body:has(.app-head .tile-finance) .page-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } }
@media (max-width: 767px) {
  .page-actions:has(> .fin-actions) { flex: 1 1 100%; margin-left: 0; min-width: 0; }
  .fin-actions { justify-content: flex-start; width: 100%; }
  .fin-actions > .btn-quiet { display: none; }
  .fin-table.stack tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
  .fin-table.stack td { flex: 0 0 auto; max-width: 100%; }
  .fin-table.stack td:first-child, .fin-table.stack td.w { flex: 1 1 100%; }
  .fin-table.stack td:not(:first-child)[data-label]:not([data-label=""])::before { content: attr(data-label); color: var(--ink-500); font-size: var(--t-small); margin-right: 6px; font-weight: 400; }
  .fin-table.stack td:has(> .state)::before, .fin-table.stack td:has(> .fin-key-cell)::before { content: none !important; }
  .fin-table.stack tr.fin-total td:empty, .fin-table.stack td:empty { display: none; }
  .fin-table:not(.stack) th, .fin-table:not(.stack) td { padding-left: 6px; padding-right: 6px; }
  .fin-table:not(.stack) th:first-child, .fin-table:not(.stack) td:first-child { padding-left: 0; }
  .fin-table:not(.stack) th:last-child, .fin-table:not(.stack) td:last-child { padding-right: 0; }
}
@media (max-width: 767px) {
  .fin-editor-row.lines { grid-template-columns: 96px minmax(0, 1fr) 32px; grid-template-areas: "name name x" "days owner owner"; }
  .fin-editor-row.stages { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; grid-template-areas: "desc desc x" "trig trig trig" "basis amt amt"; }
  .fin-editor-row.stages[data-fin-ondate] { grid-template-areas: "desc desc x" "trig trig trig" "basis amt amt" "date date date"; }
  .fin-rec input.input { width: 100%; height: 44px; }
  .fin-foot { bottom: calc(var(--tabs) + 8px); }
  .fin-story:not(.narrow):not(.wide) li { grid-template-columns: 76px minmax(0, 1fr); }
  .fin-story.wide li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fin-days, .fin-table .fin-days { min-width: 0; }
}

/* ============================================================ Pass 11 ==== */
/* Pass 11 (session B), each app perfected: the fixes the 14 October walk found that cross an app's own block. */
/* Pass 11 (session B), CRM perfected. A person's or a document's name in a rail card reads whole, on as many
   lines as it needs ("Tomasz Lewando..." on 14 October), and a statement of work's service is never cut. */
.rail-card .row-title { flex-wrap: wrap; row-gap: 2px; }
.rail-card .row-title b { white-space: normal; overflow-wrap: normal; }
.sow-name { flex-wrap: wrap; }
.sow-name .muted { white-space: normal; }
.summary-edit > summary { display: inline-flex; margin-top: 4px; list-style: none; }
.summary-edit > summary::-webkit-details-marker { display: none; }
.summary-edit[open] > summary { display: none; }
.crm-table .cell-sub { display: block; color: var(--ink-500); font-size: var(--t-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) {
  /* A record's title and its actions on two calm rows: the next and previous arrows are a laptop's way through a
     list, the phone goes back to the list, and the actions sit together on one row instead of three. */
  .rec-pager { display: none; }
  /* The star pins to the laptop's sidebar; on a phone it pushed New client onto a row of its own. */
  .page-head .page-pin { display: none; }
}
/* A week's bar is its column's width: the label under it ("13 Jul") had set the column's own track, so a bar grew
   to the label's width and lay over its neighbours (CRM's Activity by week, 14 October). */
.col { grid-template-columns: minmax(0, 1fr); }
.col-stack { min-width: 0; }
/* Created and completed are two counts, not two shares of one: their bars stand side by side, each from the floor. */
.cols.grouped .col-stack { flex-direction: row; align-items: flex-end; justify-content: center; gap: 2px; }
.cols.grouped .col-part { flex: 1 1 0; max-width: 14px; }
.sheet-extra { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: var(--t-small); }
.sheet-extra a { display: inline-flex; align-items: center; gap: 6px; }
.sheet-extra svg { width: 14px; height: 14px; }
/* A sheet's Save and Cancel stay in view however long the form is (New client's were below the fold at 1280 x 900,
   14 October): the form's own footer sticks to the foot of the sheet. */
.sheet-body > form > .form-foot:last-child {
  position: sticky; bottom: -16px; z-index: 2; margin: 16px -20px -16px; padding: 12px 20px 16px;
  background: var(--surface); border-top: 1px solid var(--line-soft);
}
@media (max-width: 767px) {
  /* A notice's words take the phone's width and its button sits under them (a statement of work's top-up was one
     word a line beside its button, 14 October). */
  .notice:has(> p + :is(.btn, span, form, a)) { flex-wrap: wrap; }
  .notice:has(> p + :is(.btn, span, form, a)) > p { flex: 1 1 100%; }
  .notice:has(> p + :is(.btn, span, form, a)) > :not(p) { margin-left: 0 !important; }
}
/* Timesheets, the day's entry line as Harvest lays it out: the statement of work on its own line, read whole, then
   the days, what you did and Save beneath (14 October: "Harbour Digital · S..." and a narrow note at 1280). */
@media (min-width: 1101px) {
  form.ts-oneline { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .ts-oneline > .ts-oneline-sow, .ts-oneline > :has(> .ts-oneline-sow) { grid-column: 1 / -1; }
}
/* Timesheets' reports on a phone: the timeframe, grouping, client and status; Then by, the statement of work and
   Active only stay on the laptop, so a consultant's own month starts on the first screen (C2). */
@media (max-width: 767px) { .ts-filters .ts-wide-only { display: none; } }
/* Documents, a document's page: one star. Its own Star puts it in Starred, one click from the sidebar; the frame's
   pin star beside the title was a second star meaning nearly the same (14 October). */
.page-head:has(.page-actions [data-docs-star]) .page-pin { display: none; }
/* Documents' Home, Actions required: a draft's title reads whole, on two lines if it needs them, and its row is as
   tall as that ("Report, September..." on 14 October). The time the draft was made is a column of its own only on
   a wide screen. */
.docs-table-card .docs-name { align-items: flex-start; }
.docs-table-card .docs-name .rec-link { white-space: normal; overflow-wrap: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@media (min-width: 768px) { .docs-table-card .crm-table tbody th, .docs-table-card .crm-table tbody td { height: auto; padding-top: 10px; padding-bottom: 10px; } }
.docs-table-card .crm-table tbody th.name { white-space: normal; max-width: none; }
@media (max-width: 1400px) { .docs-table-card .crm-table tbody td.num:not(.lib-act) { display: none; } }
.docs-table-card .crm-table tbody th.name .row-sub { white-space: normal; }
@media (min-width: 768px) { .docs-table-card .crm-table tbody td { width: 1%; white-space: nowrap; } }

/* A link that is a button reads as a link: "See Checks" on a draft was a grey browser button (14 October). */
button.plain-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
/* A draft under review on a laptop: the draft and its checks side by side, its sources beneath, so the draft's own
   tables are read whole; three columns only from 1440 (the draft was 390 pixels wide at 1280 and its table cut). */
@media (max-width: 1439px) and (min-width: 1101px) {
  main .docs-review-grid { grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr); }
  main .docs-review-grid > .docs-sources { grid-column: 1 / -1; position: static; max-height: none; order: 3; }
}

/* Projects, a project's page: one star, the project's own Favourite; the frame's pin star beside the title meant
   nearly the same (14 October). */
.page-head:has(.page-actions .pj-fav) .page-pin { display: none; }

/* Projects' list: a health word and Update due share the cell, and Update due takes a second line rather than run
   into the lead's column ("No update yet Update d..." on 14 October). */
.pj-prow .pj-health, .pj-prows .pj-health { flex-wrap: wrap; row-gap: 2px; white-space: normal; }

/* Sales' leads on a phone: the list starts on the first screen. Edit columns, Save view and the spreadsheet are a
   laptop's (a phone's list is cards, with no columns), and took three rows above the first lead (14 October). */
@media (max-width: 767px) { .sl-tools { display: none; } }

/* ============================================================== Portal ==== */
/* The guest's portal (src/portal/guest/pages.ts): the Hub's app frame in the
   client's own space. A light sidebar with the client's name or logo, their
   four pages and their contact; the page on the warm canvas in white cards.
   The client's one colour, set on the body as --gp-accent only when it reads
   at 4.5:1, carries the primary button and the links; --gp-underline marks
   the page you are on. Every rule is .gp-*. */

body.gp { --gp-a: var(--gp-accent, var(--accent)); --gp-u: var(--gp-underline, var(--live)); min-height: 100vh; min-height: 100dvh; background: var(--canvas); }
.gp-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.gp-side { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 20px; padding: 20px 16px; background: var(--surface); border-right: 1px solid var(--line); }
.gp-brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: var(--ink-900); padding: 4px 6px; }
.gp-client-tile, .gp-logo-tile { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--tint-portal-bg); color: var(--tint-portal-fg); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; box-shadow: inset 0 0 0 2px var(--gp-u); }
.gp-logo-tile { background: var(--surface); overflow: hidden; }
.gp-logo-tile img { max-width: 32px; max-height: 28px; object-fit: contain; }
.gp-brand-text { display: grid; min-width: 0; }
.gp-brand-text b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-brand-text span { font-size: var(--t-cap); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-nav { display: grid; gap: 2px; }
.gp-navlink { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: var(--ink-700); font-weight: 500; position: relative; transition: background 120ms var(--ease); }
.gp-navlink svg { width: 18px; height: 18px; color: var(--ink-500); }
.gp-navlink:hover { background: var(--hover); }
.gp-navlink[aria-current="page"] { background: var(--canvas); color: var(--ink-900); font-weight: 600; }
.gp-navlink[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--gp-u); }
.gp-navlink[aria-current="page"] svg { color: var(--ink-900); }
.gp-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--canvas); color: var(--ink-700); font-size: 12px; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.gp-navlink[aria-current="page"] .gp-count { background: var(--surface); }
.gp-side-foot { margin-top: auto; display: grid; gap: 12px; }
.gp-contact { padding: 14px; border-radius: 14px; background: var(--canvas); }
.gp-contact-label { display: block; font-size: var(--t-cap); font-weight: 500; color: var(--ink-500); margin-bottom: 8px; }
.gp-contact-row { display: flex; gap: 10px; align-items: center; min-width: 0; }
.gp-contact-row > span:last-child { display: grid; min-width: 0; }
.gp-contact-row b { font-weight: 600; font-size: var(--t-small); }
.gp-contact-row a { font-size: var(--t-cap); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.gp-contact-row a:hover { color: var(--ink-900); text-decoration: underline; }
.gp-me { display: flex; align-items: center; gap: 10px; padding: 8px 4px 0 6px; border-top: 1px solid var(--line-soft); }
.gp-me-text { display: grid; min-width: 0; flex: 1; }
.gp-me-text b { font-size: var(--t-small); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-me-text span { font-size: var(--t-cap); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-body { min-width: 0; }
.gp-bar { display: none; }
.gp-main { max-width: 1040px; margin: 0 auto; padding: 40px 40px 56px; display: grid; gap: 20px; align-content: start; }
.gp-main > * { min-width: 0; }
.gp-title { margin: 0; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; }
.gp-page-head { display: grid; gap: 6px; }
.gp-page-head .muted, .gp-hero p { margin: 0; font-size: 15px; line-height: 22px; max-width: 64ch; }
.gp-h2 { margin: 8px 0 -8px; font-size: var(--t-h); font-weight: 600; }
.gp .btn-primary.gp-primary, .gp .auth-card .btn-primary { background: var(--gp-a); border-color: var(--gp-a); }
.gp .btn-primary.gp-primary svg { width: 16px; height: 16px; }
.gp .gp-main p a, .gp .gp-foot a { color: var(--gp-a); }
.gp-back { display: inline-flex; align-items: center; gap: 4px; margin: -16px 0 -8px -4px; color: var(--ink-500); text-decoration: none; font-weight: 500; width: max-content; }
.gp-back svg { width: 16px; height: 16px; }
.gp-back:hover { color: var(--ink-900); }

/* Cards: the unit on the canvas, as on the Hub's Home. */
.gp-card { padding: 24px; }
.gp-card h2 { margin: 0; font-size: var(--t-h); font-weight: 600; letter-spacing: -0.01em; }
.gp-card-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.gp-card-head a, .gp-card-meta { margin-left: auto; font-size: var(--t-small); color: var(--ink-500); text-decoration: none; font-variant-numeric: tabular-nums; }
.gp-card-head a:hover { color: var(--ink-900); }
.gp-empty p { margin: 0; color: var(--ink-500); }
.gp-empty b { color: var(--ink-900); }
.gp-two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }

/* Home: the greeting and progress, the next step, a card per task. */
.gp-hero { display: flex; align-items: center; gap: 32px; }
.gp-hero-text { flex: 1; display: grid; gap: 6px; min-width: 0; }
.gp-hero h1 { margin: 0; font-size: var(--t-greet); line-height: 34px; font-weight: 700; letter-spacing: -0.02em; }
.gp-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.gp-hero-progress { display: flex; align-items: center; gap: 14px; flex: none; padding: 14px 20px 14px 14px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); font-size: var(--t-small); color: var(--ink-500); line-height: 20px; }
.gp-hero-progress b { color: var(--ink-900); font-weight: 600; }
.gp-ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--live) calc(var(--p) * 1%), var(--line-soft) 0); position: relative; }
.gp-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); }
.gp-ring span { position: relative; font-size: 14px; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.gp-ring.sm { width: 40px; height: 40px; }
.gp-ring.sm::before { inset: 5px; }
.gp-ring.sm span { font-size: 11px; }
.gp-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label btn" "title btn" "sub btn"; column-gap: 24px; row-gap: 4px; align-items: center; padding: 24px 28px;
  border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: border-color 120ms var(--ease); }
.gp-next::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gp-u); }
.gp-next:is(a):hover { border-color: var(--ink-400); }
/* The client's Home and Files in the record's language (20 October 2026): sentence-case labels, one figures panel,
   what is still to send by name, and a quiet menu for the answers that aren't an upload. */
.gp-figs { margin: 16px 0; }
.gp-still-list { list-style: none; margin: 0; padding: 0; }
.gp-still-list li { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.gp-still-list li:first-child { border-top: 0; padding-top: 0; }
.gp-other { position: relative; display: inline-block; }
.gp-asked-request { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 15px; font-weight: 600; color: var(--ink-900); }
.gp-asked-request:first-of-type { margin-top: 8px; padding-top: 0; border-top: 0; }
.gp-other > summary { list-style: none; }
.gp-other > summary::-webkit-details-marker { display: none; }
.gp-other > summary svg { width: 18px; height: 18px; }
.gp-other-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: grid; gap: 2px; min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-float); }
.gp-other-menu .btn { justify-content: flex-start; width: 100%; }
.gp-next-label { grid-area: label; font-size: var(--t-cap); font-weight: 500; color: var(--ink-500); }
.gp-next-title { grid-area: title; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.gp-next-sub { grid-area: sub; color: var(--ink-500); font-size: var(--t-body); }
.gp-next .btn { grid-area: btn; height: 42px; padding: 0 18px; }
.gp-next.done::before { background: var(--live); }
.gp-tasks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gp-task { display: grid; gap: 6px; align-content: start; padding: 20px 22px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; transition: border-color 120ms var(--ease); }
.gp-task:hover { border-color: var(--ink-400); }
.gp-task-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.gp-task-head b { font-weight: 600; }
.gp-task-head > svg { width: 16px; height: 16px; margin-left: auto; color: var(--ink-400); }
.gp-task .tile { width: 28px; height: 28px; border-radius: 8px; }
.gp-task-figure { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gp-task-figure small { font-size: 15px; font-weight: 500; color: var(--ink-500); letter-spacing: 0; }
.gp-task-sub { color: var(--ink-500); font-size: var(--t-small); }
.gp-task .gp-bar-track { margin-top: 6px; }
.gp-task-list { display: grid; gap: 4px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: var(--t-small); }
.gp-task-list span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-doclist { list-style: none; margin: 0 -24px -24px; padding: 0; border-top: 1px solid var(--line-soft); }
.gp-doclist li { border-bottom: 1px solid var(--line-soft); }
.gp-doclist li:last-child { border-bottom: 0; }
.gp-doclist a, .gp-doclist-row { display: flex; align-items: center; gap: 14px; padding: 14px 24px; text-decoration: none; color: inherit; min-width: 0; }
.gp-doclist a:hover { background: var(--surface-2); }
.gp-doclist li:last-child a, .gp-doclist li:last-child .gp-doclist-row { border-radius: 0 0 var(--r-card) var(--r-card); }
.gp-doclist a > svg:last-child { width: 16px; height: 16px; color: var(--ink-400); flex: none; }
.gp-doc-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--canvas); display: grid; place-items: center; flex: none; }
.gp-doc-icon svg { width: 18px; height: 18px; color: var(--ink-500); }
.gp-doc-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.gp-doc-text b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-doc-text span { font-size: var(--t-small); color: var(--ink-500); }
.gp-foot { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--t-small); display: grid; gap: 6px; }
.gp-foot p { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.gp-foot svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--ink-500); }
.gp-foot-contact { display: none !important; }
.gp-tabs { display: none; }

/* Progress: a bar and the count, never a chip. */
.gp-progress { display: grid; gap: 6px; }
.gp-bar-track { display: block; height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.gp-bar-track span { display: block; height: 100%; background: var(--live); border-radius: 3px; transition: width 180ms var(--ease); }
.gp-progress .cap b { color: var(--ink-900); font-weight: 600; }
.gp-before h2 { margin-bottom: 12px; }
.gp-before ul, .gp-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: var(--t-body); line-height: var(--t-body-lh); }
.gp-before li { display: flex; gap: 12px; align-items: flex-start; }
.gp-before li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--live); }
.gp-list { padding-left: 18px; list-style: disc; gap: 6px; }

/* Onboarding: the request's progress, its sections as cards. */
.gp-hero-request { align-items: flex-start; }
.gp-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gp-section { display: grid; gap: 10px; padding: 20px 22px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; position: relative; transition: border-color 120ms var(--ease); }
.gp-section:hover { border-color: var(--ink-400); }
.gp-section-num { width: 26px; height: 26px; border-radius: 8px; background: var(--canvas); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ink-700); }
.gp-section-head { display: flex; align-items: baseline; gap: 10px; }
.gp-section-head b { font-weight: 600; font-size: 15px; flex: 1; min-width: 0; }
.gp-section-sub { font-size: var(--t-small); color: var(--ink-500); }
.gp-callout { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: var(--surface); border: 1px dashed var(--line); text-decoration: none; color: var(--ink-700); }
.gp-callout svg { width: 18px; height: 18px; color: var(--ink-500); flex: none; }
.gp-callout-go { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--gp-a); white-space: nowrap; }
.gp-callout-go svg { color: var(--gp-a); width: 14px; height: 14px; }
/* The client's project (21 October 2026, as the engagement portal BMS liked: where the work stands, step by step). */
.gp-project { display: grid; gap: 6px; padding: 22px 26px; color: inherit; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.gp-project:hover { border-color: var(--ink-400); }
.gp-project .gp-next-label, .gp-project .gp-next-title { grid-area: auto; }
.gp-project-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gp-project-bar { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.gp-project-bar i { display: block; height: 100%; background: var(--gp-a, var(--live)); border-radius: 2px; }
.gp-project-line { font-size: var(--t-small); color: var(--ink-500); }
.gp-project-update { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: var(--t-small); color: var(--ink-700); }
.gp-proj { padding: 0; }
.gp-proj + .gp-proj { margin-top: 20px; }
.gp-proj-head { display: grid; gap: 6px; padding: 22px 26px; border-bottom: 1px solid var(--line-soft); }
.gp-proj-head h2 { margin: 0; font-size: var(--t-h); font-weight: 600; }
.gp-proj-head p { margin: 4px 0 0; color: var(--ink-700); }
.gp-steps { position: relative; list-style: none; margin: 0; padding: 18px 26px; display: grid; gap: 0; border-bottom: 1px solid var(--line-soft); }
.gp-step { position: relative; display: flex; gap: 14px; padding: 10px 0; }
.gp-step + .gp-step::before { content: ""; position: absolute; left: 12px; top: -10px; height: 20px; width: 2px; background: var(--line); }
.gp-step.done + .gp-step::before { background: var(--live); }
.gp-step-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: var(--surface); }
.gp-step.done .gp-step-dot { border-color: var(--live); background: var(--live); color: var(--surface); }
.gp-step.done .gp-step-dot svg { width: 14px; height: 14px; }
.gp-step.now .gp-step-dot { border-color: var(--gp-a, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gp-a, var(--accent)) 16%, transparent); }
.gp-step-text { display: grid; gap: 2px; min-width: 0; padding-top: 2px; }
.gp-step-text b { font-weight: 600; color: var(--ink-900); }
.gp-step:not(.done):not(.now) .gp-step-text b { color: var(--ink-700); font-weight: 500; }
.gp-step-text span { font-size: var(--t-small); color: var(--ink-500); }
.gp-proj-updates { padding: 18px 26px 22px; }
.gp-proj-updates h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.gp-proj-updates ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.gp-proj-updates p { margin: 2px 0 0; white-space: pre-wrap; color: var(--ink-900); }
@media (max-width: 640px) { .gp-project, .gp-proj-head, .gp-steps, .gp-proj-updates { padding-left: 18px; padding-right: 18px; } }
/* Requests and a request (21 October 2026, the record's language): one sheet of rows parted by hairlines, each its
   name and one line under it, a thin bar and its state; the request's head is its title, one line of facts, the one
   button, and its progress beside them. */
.gp-sheet { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.gp-sheet > li + li { border-top: 1px solid var(--line-soft); }
.gp-row, .gp-sec-link { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 16px 20px; color: inherit; text-decoration: none; transition: background 120ms var(--ease); }
.gp-row:hover, .gp-sec-link:hover { background: var(--surface-2); }
.gp-row > svg { width: 16px; height: 16px; color: var(--ink-400); flex: none; }
.gp-row .gp-row-text, .gp-sec-link .gp-row-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.gp-row .gp-row-text b, .gp-sec-link .gp-row-text b { font-weight: 600; font-size: 15px; color: var(--ink-900); overflow-wrap: anywhere; }
.gp-row-sub { font-size: var(--t-small); color: var(--ink-500); }
.gp-row-bar { flex: none; width: 120px; height: 4px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.gp-row-bar i { display: block; height: 100%; background: var(--live); border-radius: 2px; }
.gp-row .state, .gp-sec-link .state { flex: none; width: 104px; }
.gp-sec { display: flex; flex-wrap: wrap; align-items: center; }
.gp-sec-link { flex: 1; min-width: 0; }
.gp-sec-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--canvas); color: var(--ink-700); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gp-sec-tools { flex: none; padding-right: 12px; }
.gp-sec-tools .gp-section-assign[open] { flex-basis: auto; }
.gp-sec:has(.gp-section-assign[open]) .gp-sec-tools { flex-basis: 100%; padding: 0 20px 16px 62px; }
.gp-req-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.gp-req-text { display: grid; gap: 6px; min-width: 0; }
.gp-req-text h1 { margin: 0; font-size: var(--t-greet); line-height: 34px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.gp-req-meta { margin: 0; color: var(--ink-500); }
.gp-req-text .gp-hero-actions { margin-top: 12px; }
.gp-req-progress { display: flex; align-items: center; gap: 12px; flex: none; font-size: var(--t-small); color: var(--ink-500); line-height: 18px; }
.gp-req-progress b { color: var(--ink-900); font-weight: 600; }
.gp-tips { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; font-size: var(--t-small); color: var(--ink-700); }
.gp-tips li { display: inline-flex; align-items: center; gap: 6px; }
.gp-tips svg { width: 15px; height: 15px; color: var(--live); }
@media (max-width: 640px) {
  .gp-req-head { flex-direction: column-reverse; gap: 12px; }
  .gp-row, .gp-sec-link { flex-wrap: wrap; gap: 8px 12px; padding: 14px 16px; }
  .gp-row .gp-row-text { flex-basis: calc(100% - 40px); }
  .gp-row-bar { flex: 1; width: auto; }
  .gp-row .state, .gp-sec-link .state { width: auto; }
  .gp-sec { position: relative; }
  .gp-sec-link { flex-basis: 100%; padding-right: 60px; }
  .gp-sec-link .gp-row-text { flex-basis: calc(100% - 38px); }
  .gp-sec-link .gp-row-bar { margin-left: 38px; }
  .gp-sec-tools { position: absolute; top: 10px; right: 8px; padding: 0; }
  .gp-sec-tools summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gp-sec:has(.gp-section-assign[open]) .gp-sec-tools { position: static; flex-basis: 100%; padding: 0 16px 14px; }
  .gp-sec:has(.gp-section-assign[open]) .gp-sec-tools summary span { position: static; width: auto; height: auto; clip: auto; }
  .gp-tips { display: grid; gap: 8px; }
  .gp-upload-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* One question: a focused card; All questions beside it. */
.gp-question { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.gp-q-main { padding: 32px 36px 28px; min-width: 0; }
.gp-q-where { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-500); }
.gp-q-main .gp-progress { margin-bottom: 26px; }
.gp-q { margin: 0 0 8px; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.015em; }
.gp-q-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.gp-q-form legend { padding: 0; }
.gp-hint { margin: 0 0 18px; font-size: 15px; }
.gp-q-form .input { height: 46px; font-size: var(--t-body); border-radius: 10px; }
.gp-q-form .textarea { font-size: var(--t-body); border-radius: 10px; }
.gp-long { min-height: 170px; }
.gp-date { max-width: 240px; }
.gp-radios { display: grid; grid-template-columns: repeat(2, minmax(0, 180px)); gap: 10px; margin-bottom: 14px; }
.gp-radio { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; font-weight: 500; transition: border-color 120ms var(--ease); }
.gp-radio:hover { border-color: var(--ink-400); }
.gp-radio:has(input:checked) { border-color: var(--gp-a, var(--accent)); box-shadow: inset 0 0 0 1px var(--gp-a, var(--accent)); }
.gp-radio input, .gp-check input { accent-color: var(--gp-a, var(--accent)); width: 18px; height: 18px; margin: 0; flex: none; }
.gp-check { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 14px; line-height: 20px; cursor: pointer; }
.gp-check input { margin-top: 1px; }
.gp-tick { padding: 14px 16px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 500; }
.gp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gp-actions-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.gp-actions-row .btn { height: 42px; padding: 0 18px; }
.gp-actions-row .cap { margin-left: auto; }
.gp-help { margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--row-soon); color: var(--ink-700); }
.gp-with { padding: 18px 20px; border-radius: 12px; background: var(--canvas); }
.gp-with p { margin: 0 0 4px; font-size: var(--t-body); }
.gp-assign { margin-top: 22px; }
.gp-assign summary { cursor: pointer; font-weight: 500; color: var(--ink-700); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.gp-assign summary::-webkit-details-marker { display: none; }
.gp-assign summary::before { content: "+"; width: 22px; height: 22px; border-radius: 6px; background: var(--canvas); display: inline-grid; place-items: center; color: var(--ink-500); }
.gp-assign[open] summary::before { content: "\2212"; }
.gp-assign-form { margin-top: 14px; display: grid; gap: 10px; max-width: 460px; padding: 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.gp-assign-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.gp-assign-form .cap { margin: 0; }
.gp-assign-form .btn-quiet { justify-self: start; margin-left: -8px; }
.gp-q-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; }
.gp-q-nav a { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-500); text-decoration: none; font-weight: 500; }
.gp-q-nav svg { width: 16px; height: 16px; }
.gp-file { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.gp-file svg { width: 16px; height: 16px; color: var(--ink-500); }
.gp-checklist { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 18px; }
.gp-checklist h2 { margin: 0 0 6px; font-size: var(--t-h); }
.gp-checklist h3 { margin: 16px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.gp-checklist ul { list-style: none; margin: 0; padding: 0; }
.gp-checklist a { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; text-decoration: none; color: var(--ink-700); font-size: var(--t-small); line-height: 18px; }
.gp-checklist a:hover { background: var(--hover); }
.gp-checklist a[aria-current="step"] { background: var(--canvas); color: var(--ink-900); font-weight: 600; }
.gp-checklist a svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--live); }
.gp-checklist a svg[aria-label^="With"] { color: var(--ink-500); }
.gp-circle { width: 12px; height: 12px; margin: 3px 1px 0; border-radius: 50%; border: 1.5px solid var(--ink-400); flex: none; }
.gp-checklist .btn { width: 100%; margin-top: 16px; }

/* Review and submit. */
.gp-review h2 { margin-bottom: 4px; }
.gp-review .kv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.gp-review dd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gp-review dd a { flex: none; font-weight: 500; color: var(--gp-a); text-decoration: none; }
.gp-submit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gp-submit p { margin: 0; flex: 1; min-width: 240px; }
.gp-submit .btn { height: 42px; }

/* Files: send beside the checklist, then what was sent. */
.gp-files-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.gp-card-line { margin: -8px 0 6px; font-size: var(--t-small); }
.gp-group { margin: 16px 0 6px; font-size: var(--t-small); font-weight: 600; color: var(--ink-700); }
.gp-checklist-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gp-checklist-rows li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-soft); }
.gp-checklist-rows li.sent { background: var(--surface-2); }
.gp-tickmark { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink-400); display: grid; place-items: center; flex: none; }
.gp-checklist-rows li.sent .gp-tickmark { background: var(--live); border-color: var(--live); }
.gp-tickmark svg { width: 12px; height: 12px; color: var(--on-dark); stroke-width: 2.4; }
.gp-row-text { display: grid; min-width: 0; flex: 1; }
.gp-row-text b { font-weight: 500; }
.gp-row-text span { font-size: var(--t-cap); color: var(--ink-500); }
.gp-small { height: 30px; padding: 0 12px; }
/* Not applicable on an asked-for document (Pass 6): the row's own action, a reason, Undo. */
.gp-checklist-rows li { flex-wrap: wrap; }
.gp-checklist-rows li.na { background: var(--surface-2); }
.gp-checklist-rows li.na .gp-tickmark svg { color: var(--ink-500); }
.gp-row-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.gp-na { flex-basis: 100%; }
.gp-na summary { cursor: pointer; color: var(--ink-500); font-size: var(--t-small); width: max-content; margin-left: auto; }
.gp-na form { display: grid; gap: 8px; margin-top: 8px; }
.gp-na .btn { justify-self: start; }
.gp-row-act .gp-na { flex-basis: auto; }
/* How to answer: one question at a time, or a section on one page. */
.gp-h2-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 -8px; }
.gp-h2-row .gp-h2 { margin: 0; }
.gp-modes { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--surface); }
.gp-modes a { padding: 5px 12px; border-radius: 999px; font-size: var(--t-small); color: var(--ink-600); text-decoration: none; }
.gp-modes a[aria-current] { background: var(--gp-a, var(--accent)); color: var(--on-dark); }
.gp-section-form { display: grid; gap: 14px; margin-top: 16px; }
.gp-qblock fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
/* A section on one page (21 October 2026, as the questionnaire BMS liked): one sheet, each question parted by a
   hairline and room, the question in bold over its hint and its answer. */
.gp-qsheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.gp-qblock { display: grid; gap: 10px; padding: 24px 28px; min-width: 0; }
.gp-qblock + .gp-qblock { border-top: 1px solid var(--line-soft); }
.gp-qblock .gp-hint { margin: -4px 0 0; font-style: italic; }
.gp-qblock .gp-block-saved:empty { display: none; }
.gp-thanks { display: grid; justify-items: center; gap: 10px; padding: 40px 24px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.gp-thanks > svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--live); color: var(--surface); }
.gp-thanks h1 { margin: 6px 0 0; font-size: var(--t-greet); line-height: 34px; font-weight: 700; letter-spacing: -0.02em; }
.gp-thanks p { margin: 0 0 8px; max-width: 520px; color: var(--ink-700); }
@media (max-width: 640px) { .gp-qblock { padding: 20px 18px; } }
.gp-qblock legend { padding: 0; }
.gp-q.gp-q-small { font-size: var(--t-body); line-height: 22px; font-weight: 600; margin: 0 0 8px; }
.gp-radios.gp-radios-list { grid-template-columns: 1fr; }
.gp-auth-foot { display: flex; gap: 8px; align-items: flex-start; width: min(400px, 100%); margin: 16px auto 0; font-size: var(--t-cap); }
.gp-auth-foot svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.gp-drop { position: relative; padding: 32px 16px; border-radius: 14px; }
.gp-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.gp-drop label { display: grid; justify-items: center; gap: 6px; cursor: pointer; }
.gp-drop-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; }
.gp-drop-icon svg { width: 20px; height: 20px; color: var(--ink-700); }
.gp-chosen { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-small); font-weight: 500; }
.gp-chosen:empty { display: none; }
.gp-wide { width: 100%; height: 44px; }
.gp-center { text-align: center; display: flex; gap: 6px; justify-content: center; align-items: center; margin: 10px 0 0; }
.gp-center svg { width: 14px; height: 14px; }

/* Documents: the PDF and the decision beside it. */
.gp-doc-head { display: grid; gap: 6px; }
.gp-doc-head .muted { margin: 0; }
.gp-doc { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.gp-frame { overflow: hidden; }
.gp-frame-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--line-soft); }
.gp-frame iframe { display: block; width: 100%; height: min(78vh, 1100px); border: 0; background: var(--surface-2); }
.gp-decision { position: sticky; top: 24px; }
.gp-decision h2 { margin-bottom: 14px; }
.gp-decision blockquote { margin: 8px 0; padding: 10px 14px; border-left: 3px solid var(--line); background: var(--surface-2); border-radius: 0 8px 8px 0; color: var(--ink-700); }
.gp-decision p { margin: 0 0 8px; }
.gp-decision .gp-actions-row { border-top: 0; padding-top: 0; margin-top: 12px; }
.gp-missing { max-width: 560px; }
.gp-missing p { margin: 6px 0 16px; }
.gp-again { display: flex; justify-content: space-between; margin-top: 12px; }
.gp-code { font-size: 24px; letter-spacing: 0.35em; font-variant-numeric: tabular-nums; text-align: center; height: 52px; }
.gp-menu { position: absolute; right: 12px; top: 52px; width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-row); box-shadow: var(--shadow-float); padding: 12px; z-index: 30; }
.gp-menu p { margin: 0 0 10px; display: grid; gap: 2px; }
.gp-menu p span { color: var(--ink-500); font-size: var(--t-small); }
.gp-menu .btn { width: 100%; }

@media (max-width: 1100px) { .gp-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gp-files-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1023px) { .gp-question { grid-template-columns: minmax(0, 1fr); } .gp-checklist { display: none; } .gp-checklist.open { display: block; } .gp-doc { grid-template-columns: minmax(0, 1fr); } .gp-decision { position: static; } }
@media (max-width: 860px) {
  .gp-shell { grid-template-columns: minmax(0, 1fr); }
  .gp-side { display: none; }
  .gp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 20; height: 60px; padding: 0 8px 0 12px;
    background: var(--canvas-glass); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line-bar); }
  .gp-bar .gp-brand { padding: 0; }
  .gp-bar .gp-client-tile, .gp-bar .gp-logo-tile { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
  .gp-foot-contact { display: block !important; }
  .gp-main { padding: 20px 16px calc(var(--tabs, 64px) + 28px + env(safe-area-inset-bottom)); gap: 16px; }
  .gp-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--canvas-glass); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-top: 1px solid var(--line-bar); }
  .gp-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--ink-500); font-size: 11px; line-height: 13px; font-weight: 500; position: relative; }
  .gp-tab svg { width: 22px; height: 22px; }
  .gp-tab[aria-current="page"] { color: var(--ink-900); font-weight: 600; }
  .gp-tab .gp-count { position: absolute; top: 6px; left: calc(50% + 6px); margin: 0; background: var(--ink-900); color: var(--on-dark); min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; padding: 0 4px; }
}
@media (max-width: 767px) {
  .gp-title, .gp-hero h1 { font-size: 26px; line-height: 32px; }
  .gp-hero { flex-direction: column; align-items: stretch; gap: 16px; }
  .gp-hero-progress { padding: 12px 16px 12px 12px; }
  .gp-hero-actions .btn { flex: 1; height: 44px; }
  .gp-card { padding: 18px; }
  .gp-doclist { margin: 0 -18px -18px; }
  .gp-doclist a, .gp-doclist-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; padding: 12px 18px; }
  .gp-doclist .state { grid-column: 2; }
  .gp-doclist a > svg:last-child { display: none; }
  .gp-next { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "title" "sub" "btn"; padding: 20px; row-gap: 6px; }
  .gp-next .btn { margin-top: 8px; width: 100%; height: 44px; }
  .gp-tasks, .gp-sections { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .gp-task { padding: 16px 18px; }
  .gp-q-main { padding: 20px 18px; }
  .gp-q { font-size: 21px; line-height: 28px; }
  .gp-two, .gp-radios { grid-template-columns: 1fr; }
  .gp-sticky { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); background: var(--surface); padding: 12px 0; margin: 16px 0 0; z-index: 5; }
  .gp-sticky .btn { height: 46px; flex: 1; }
  .gp-actions-row .cap { flex-basis: 100%; margin-left: 0; }
  .gp-checklist.open { position: fixed; inset: auto 0 0 0; top: auto; max-height: 80dvh; border-radius: var(--r-sheet) var(--r-sheet) 0 0; z-index: 61; padding-bottom: calc(16px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-float); }
  .gp-review .kv { grid-template-columns: 1fr; }
  .gp-review dd { padding-top: 2px; }
  .gp-frame iframe { height: 70vh; }
  .gp-submit .btn { width: 100%; }
  .gp-callout { flex-wrap: wrap; }
  .gp-callout-go { margin-left: 30px; }
}

/* Portal, the firm's side (src/portal/web/*): Portals, a portal's page, Requests,
   Files, Documents, Forms. The kit's table, record and sheet, and these few. Every rule is .pt-*. */
.pt-table td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; }
.pt-table.table th:first-child, .pt-table.table td:first-child { padding-left: 20px; }
.pt-table.table th:last-child, .pt-table.table td:last-child { padding-right: 20px; }
.pt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.pt-stat { display: grid; gap: 4px; padding: 18px 22px; text-decoration: none; color: inherit; position: relative; transition: border-color 120ms var(--ease); }
.pt-stat:hover { border-color: var(--ink-400); }
.pt-stat.on { border-color: var(--ink-700); }
.pt-stat.on::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink-900); }
.pt-stat-label { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.pt-stat-value { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pt-stat-line { font-size: var(--t-small); color: var(--tone-quiet); }
.pt-stat-line.due { color: var(--tone-due); }
.pt-client { display: flex; gap: 12px; align-items: flex-start; }
.pt-client > div { min-width: 0; }
.pt-tile { width: 32px; height: 32px; border-radius: 9px; background: var(--tint-portal-bg); color: var(--tint-portal-fg); display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.pt-tile.lg { width: 48px; height: 48px; border-radius: 14px; font-size: 16px; }
.pt-tile.logo { background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.pt-tile.logo img { max-width: 80%; max-height: 70%; object-fit: contain; }
.pt-faces { display: inline-flex; align-items: center; }
.pt-faces .avatar { width: 28px; height: 28px; margin-right: -6px; border: 2px solid var(--surface); background: var(--tint-portal-bg); color: var(--tint-portal-fg); font-size: 10px; }
.pt-faces .avatar.invited { background: var(--canvas); color: var(--ink-500); border-style: dashed; border-color: var(--ink-400); }
.pt-table td.num:not(.pt-actions) { white-space: nowrap; }
.pt-lead { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.pt-lead-text { min-width: 0; }
.pt-ficon { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--canvas); color: var(--ink-500); }
.pt-ficon svg { width: 16px; height: 16px; }
.pt-face { flex: none; width: 32px; height: 32px; font-size: 11px; background: var(--tint-portal-bg); color: var(--tint-portal-fg); }
.pt-face.invited { background: var(--canvas); color: var(--ink-500); border: 1px dashed var(--ink-400); }
.pt-cl { display: inline-flex; gap: 10px; align-items: center; color: var(--ink-900); text-decoration: none; }
.pt-cl:hover span:last-child { text-decoration: underline; }
.pt-faces-more { margin-left: 10px; font-size: var(--t-cap); color: var(--ink-500); }
.pt-rec-top { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.pt-rec-top .rec-facts { margin: 0; }
.pt-dash { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap); align-items: start; }
.pt-dash-main, .pt-dash-rail { display: grid; gap: var(--gap); min-width: 0; }
.pt-onb { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; }
.pt-onb-text p { margin: 0; }
.pt-onb-title { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px !important; }
.pt-ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--live) calc(var(--p) * 1%), var(--line-soft) 0); position: relative; }
.pt-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); }
.pt-ring span { position: relative; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pt-secbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pt-secbars li { display: grid; grid-template-columns: minmax(0, 1fr) 160px 64px; gap: 12px; align-items: center; font-size: var(--t-small); }
.pt-secbars .pt-bar { width: 100%; }
.pt-secbars .tabular { text-align: right; color: var(--ink-500); }
.pt-waitcard.us { box-shadow: inset 3px 0 0 var(--tone-due), var(--shadow-card); }
.pt-rec .rec-tabs a { gap: 6px; }
/* The client page's stacked cards keep room between them. */
.pt-rec > .card + .card { margin-top: 16px; }
/* A request's Summary: the words, then its buttons in a row of their own, clear of the line above (QA-21). */
.pt-summary .summary-lines + .cap { margin-top: 8px; }
.pt-summary > p { margin: 0; }
.pt-summary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pt-rec .rec-tabs .count { color: var(--ink-500); font-weight: 500; font-variant-numeric: tabular-nums; }
.pt-table td .cap { margin-top: 2px; }
.pt-wait { display: block; margin-top: 4px; color: var(--ink-500); font-size: var(--t-cap); line-height: 16px; }
.pt-wait.us, .pt-warn { color: var(--tone-due); }
.pt-line { max-width: 200px; margin-left: auto; white-space: normal; text-align: left; word-break: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-progress { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-small); white-space: nowrap; }
.pt-bar { width: 80px; height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; flex: none; }
.pt-bar span { display: block; height: 100%; background: var(--live); border-radius: 3px; }
.pt-progress:not(.compact) .pt-bar { width: 120px; }
.pt-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.pt-overview > section { min-width: 0; }
.pt-pad-h { padding: 18px 24px 0; }
.pt-rec .card-head a.meta, .pt-overview .card-head a.meta { text-decoration: none; }
.pt-waitlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.pt-waitlist li { padding: 8px 0; border-top: 1px solid var(--line-soft); color: var(--ink-700); }
.pt-waitlist li:first-child { border-top: 0; padding-top: 0; }
.pt-waitlist li.us { color: var(--ink-900); }
.pt-wait-who { margin: 0 0 4px; font-size: var(--t-cap); font-weight: 500; color: var(--ink-500); }
.pt-wait-who.us { color: var(--tone-due); }
.pt-waitlist + .pt-wait-who { margin-top: 12px; }
/* A portal's sections, as a client's record draws them (20 October 2026): rows flush to the sheet, the figure in use marked. */
.pt-plain .row { padding-left: 0; padding-right: 0; }
.pt-fig.on { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--accent); }
.pt-actions { white-space: nowrap; }
.pt-actions .btn { margin-left: 4px; }
.pt-tick { margin-top: 4px; font-size: var(--t-cap); color: var(--ink-500); }
.pt-tick summary { cursor: pointer; width: max-content; }
.pt-tick p { margin: 4px 0 0; }
.pt-quote { margin: 6px 0 0; padding: 4px 10px; border-left: 3px solid var(--line); color: var(--ink-700); font-size: var(--t-small); }
.pt-logo { min-height: 32px; display: flex; align-items: center; margin-bottom: 8px; }
.pt-logo img { height: 24px; width: auto; }
.pt-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pt-choice { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; }
.pt-choice legend { margin-bottom: 6px; }
.pt-checks { list-style: none; margin: 8px 0 12px; padding: 12px 14px; border-radius: var(--r-control); background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 6px; }
.pt-checks li { display: flex; gap: 8px; align-items: baseline; }
.pt-pass::before { content: "\2713"; color: var(--live); font-weight: 600; }
.pt-fail { color: var(--danger); }
.pt-fail::before { content: "\2715"; font-weight: 600; }
.pt-preview { pointer-events: none; }
.pt-foot { flex-wrap: wrap; align-items: center; }
.pt-assist .card-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.pt-assist .card-head h2 svg { width: 16px; height: 16px; color: var(--accent); }
.pt-assist-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.pt-assist-foot .grow { flex: 1; }
.pt-assist-client { min-width: 220px; }
.pt-foot .grow { flex: 1; }
.pt-keep { margin: 0; }
@media (max-width: 640px) { .pt-keep { flex: 1 0 100%; } .pt-foot .grow { display: none; } }
/* New request (21 October 2026): Blank, then each template, as cards to choose from; then the request. */
.pt-start-lead { margin: -4px 0 16px; color: var(--ink-500); }
.pt-start { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pt-start-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 20px 20px; color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  transition: border-color 120ms var(--ease), background 120ms var(--ease); }
.pt-start-card:hover { border-color: var(--ink-400); background: var(--surface-2); }
.pt-start-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pt-start-icon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; margin-bottom: 8px;
  border-radius: 8px; background: var(--surface-2); color: var(--ink-700); }
.pt-start-card.blank .pt-start-icon { background: var(--accent); color: var(--surface); }
.pt-start-icon svg { width: 18px; height: 18px; }
.pt-start-name { font-weight: 600; color: var(--ink-900); overflow-wrap: anywhere; }
.pt-start-sub { color: var(--ink-500); font-size: var(--t-cap); line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-start-meta { margin-top: auto; padding-top: 8px; color: var(--ink-500); font-size: var(--t-cap); font-variant-numeric: tabular-nums; }
.pt-start-foot { margin-top: 16px; }
.pt-from { display: flex; align-items: center; gap: 8px; min-height: 34px; margin: 0; }
.pt-from a { font-size: var(--t-cap); }
.pt-new + .pt-editor { margin-top: var(--gap); }
/* Preview: the client's own portal under one bar of the Hub's, saying what it is and where each part starts. */
.pt-pv-bar { position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px;
  background: var(--ink-900); color: var(--surface); font-size: var(--t-cap); }
.pt-pv-bar-text { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; min-width: 0; }
.pt-pv-bar-text span { color: color-mix(in srgb, var(--surface) 72%, transparent); }
.pt-pv-nav { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pt-pv-nav a { flex: none; padding: 4px 10px; border-radius: 999px; color: color-mix(in srgb, var(--surface) 85%, transparent); text-decoration: none; white-space: nowrap; }
.pt-pv-nav a[aria-current] { background: color-mix(in srgb, var(--surface) 18%, transparent); color: var(--surface); }
.pt-pv-nav a:hover { background: color-mix(in srgb, var(--surface) 12%, transparent); color: var(--surface); }
.pt-pv-part { scroll-margin-top: 64px; }
@media (max-width: 640px) {
  .pt-pv-bar { flex-wrap: nowrap; gap: 8px; padding: 8px 12px; }
  .pt-pv-bar-text span { display: none; }
  .pt-pv-bar .btn { padding: 4px 10px; min-height: 0; }
}
.pt-pv-part + .pt-pv-part { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.pt-group { margin: 14px 0 4px; font-size: var(--t-cap); color: var(--ink-500); font-weight: 600; }
.pt-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: var(--gap); }
.pt-kv > dt { width: auto; }
.pt-answers .kv { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.pt-answers .kv > dd { display: block; }
.pt-answer { white-space: pre-wrap; }
/* A request's answers for the firm (21 October 2026): one sheet, a section to a part, each question small over its
   answer; what is still open quieter, with Enter an answer you already know under it. */
.pt-req-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px 24px; border-bottom: 1px solid var(--line-soft); }
.pt-req-jump { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pt-req-jump a { flex: none; padding: 4px 10px; border-radius: 999px; font-size: var(--t-small); color: var(--ink-500); text-decoration: none; white-space: nowrap; }
.pt-req-jump a:hover { background: var(--surface-2); color: var(--ink-900); }
.pt-answers-sheet .cr-sec { scroll-margin-top: 80px; }
.pt-qa { list-style: none; margin: 0; padding: 0; display: grid; }
.pt-qa-row { display: grid; gap: 4px; padding: 14px 0; min-width: 0; }
.pt-qa-row + .pt-qa-row { border-top: 1px solid var(--line-soft); }
.pt-qa-row:first-child { padding-top: 0; }
.pt-qa-q { margin: 0; font-size: var(--t-small); color: var(--ink-500); }
.pt-qa-row .pt-answer { color: var(--ink-900); overflow-wrap: anywhere; }
.pt-qa-row.open .pt-qa-q { color: var(--ink-700); }
.pt-req-star { color: var(--tone-due); }
@media (max-width: 640px) { .pt-req-bar { padding: 14px 16px; } }
.pt-evidence { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pt-evidence li { display: flex; justify-content: space-between; gap: 12px; }
.pt-evidence a { text-decoration: none; }
.pt-ev-group { margin: 14px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.pt-ev-group:first-of-type { margin-top: 0; }
.pt-evidence li { display: grid; gap: 2px; }
.pt-ev-name { display: grid; min-width: 0; }
.pt-ev-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pt-na summary { cursor: pointer; color: var(--ink-500); font-size: var(--t-small); }
.pt-na form { display: flex; gap: 6px; margin-top: 6px; }
.pt-small { height: 28px; padding: 0 10px; font-size: var(--t-small); }
.pt-brief-counts { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.pt-brief-counts li { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-small); }
.pt-brief-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.pt-prefill { margin-top: 6px; }
.pt-prefill summary { cursor: pointer; color: var(--ink-500); font-size: var(--t-small); width: max-content; }
.pt-prefill form { display: grid; gap: 8px; margin-top: 8px; }
.pt-prefill .btn { justify-self: start; }
.pt-search { max-width: 320px; }
.pt-head-actions .menu-field { width: auto; flex: 0 0 auto; }
.pt-section { margin-bottom: var(--gap); }
.pt-section .card-head { align-items: flex-end; }
.pt-qs, .pt-es { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.pt-q, .pt-e { border: 1px solid var(--line); border-radius: var(--r-row); padding: 12px 14px 4px; background: var(--surface-2); }
.pt-q-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr); gap: 12px; }
.pt-e-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) auto; gap: 12px; align-items: end; }
.pt-e-grid .btn { margin-bottom: 16px; }
.pt-q-tools { display: flex; gap: 4px; justify-content: flex-end; margin: -8px 0 8px; }
.pt-head-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.pt-table .phone-line { display: none; }
@media (max-width: 1023px) { .pt-overview, .pt-dash { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .pt-two, .pt-q-grid, .pt-e-grid, .pt-answers .kv { grid-template-columns: minmax(0, 1fr); }
  .pt-line { margin-left: 0; max-width: none; }
  .pt-actions { white-space: normal; }
  .pt-actions .btn { margin: 4px 4px 0 0; }
  .pt-search { max-width: none; }
  .page-actions:has(> .pt-head-actions) { flex: 1 1 100%; margin-left: 0; min-width: 0; }
  .pt-head-actions { width: 100%; justify-content: flex-start; }
  .pt-head-actions .btn-primary { order: -1; flex: 1 1 100%; justify-content: center; }
  .pt-table [data-wide] { display: none; }
  .pt-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pt-stat { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 14px 18px; }
  .pt-stat-value { grid-row: 1 / 3; grid-column: 2; font-size: 26px; }
  .pt-secbars li { grid-template-columns: minmax(0, 1fr) 90px 48px; }
  .pt-rec-top { align-items: flex-start; }
  .pt-table .phone-line { display: block; color: var(--ink-700); }
  .pt-table.table td:first-child { padding-left: 16px; padding-right: 16px; }
  .pt-table.table tr:has(.pt-lead) td:not(:first-child) { padding-left: 60px; }
}

/* Portal: Copy invitation link (Clinton, 14 October 2026), the link and its Copy button on one line. */
.pt-copy-row { display: flex; gap: 8px; align-items: center; }
.pt-copy-row .input { flex: 1; min-width: 0; }
@media (max-width: 767px) { .pt-copy-row { flex-direction: column; align-items: stretch; } }

/* Portal onboarding, Pass 12 (Tom, 14 October 2026): the stars, who a section is with, who else is here, the evidence
   list's three answers. */
.gp-star { color: var(--tone-due); font-weight: 600; }
.gp-req { margin: 2px 0 6px; font-size: var(--t-small); color: var(--ink-600, var(--ink-700)); }
.gp-section { padding: 0; gap: 0; grid-template-rows: auto 1fr; }
.gp-section:hover { border-color: var(--line); }
.gp-section-link { display: grid; gap: 10px; padding: 20px 22px 14px; text-decoration: none; color: inherit; border-radius: var(--r-card) var(--r-card) 0 0; }
.gp-section-link:hover .gp-section-head b { text-decoration: underline; text-underline-offset: 3px; }
.gp-section-foot { display: flex; align-items: center; align-self: end; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 0 16px 12px 22px; min-height: 8px; }
.gp-section-who { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-small); color: var(--ink-700); margin: 0; }
.gp-section-who svg { width: 14px; height: 14px; color: var(--ink-500); }
.gp-section-assign { margin-left: auto; }
.gp-section-assign > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.gp-section-assign > summary::-webkit-details-marker { display: none; }
.gp-section-assign[open] { flex-basis: 100%; }
.gp-section-assign[open] > summary { margin-left: auto; }
.gp-section-assign form { display: grid; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.gp-present { margin: 6px 0 0; font-size: var(--t-small); color: var(--live); }
.gp-present[hidden] { display: none; }
.gp-block-saved { margin: 4px 0 0; min-height: 16px; color: var(--ink-500); }
.gp-required { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 6px; }
.gp-required a { color: var(--ink-900); }
.gp-checklist-rows li.promised { background: var(--surface-2); }
.gp-checklist-rows li.promised .gp-tickmark svg { color: var(--accent); }
.gp-na > summary.btn { list-style: none; color: var(--ink-700); margin-left: 0; }
.gp-na > summary.btn::-webkit-details-marker { display: none; }
.gp-wide { justify-content: center; }
.gp-wide + .field { margin-top: 14px; }

/* ------------------------------------------------------------ Documents --- */
/* Every rule here is Documents' own (.docs-*), so nothing it sets reaches another app. */
/* Home, rebuilt (21 October 2026): search first, the documents drafted most in one row, what waits and your drafts,
   then Recent as a list whose rows open in the viewer. */
.docs-section-more { margin-top: -6px; }
/* Ask for a change, on Draft review: one line to say it, then the change beside what it replaces. */
.docs-ask { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 6px 6px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); }
.docs-ask:focus-within { border-color: var(--accent); }
.docs-ask-icon { display: grid; place-items: center; color: var(--accent); flex: none; }
.docs-ask-icon svg { width: 18px; height: 18px; }
.docs-ask-input { flex: 1; min-width: 0; height: 36px; border: 0; background: transparent; font: inherit; font-size: var(--t-body); color: var(--ink-900); outline: none; }
.docs-ask-input::placeholder { color: var(--ink-500); }
.docs-describe { margin-bottom: 22px; }
.docs-ask-result { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.docs-ask-wait { margin: 0; color: var(--ink-500); }
.docs-ask-sec + .docs-ask-sec { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.docs-ask-sec h4 { margin: 0 0 8px; font-size: var(--t-small); }
.docs-ask-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.docs-ask-label { display: block; margin-bottom: 4px; font-size: var(--t-cap); color: var(--ink-500); }
.docs-ask-was { color: var(--ink-500); text-decoration: line-through; text-decoration-color: var(--line); }
.docs-ask-new { color: var(--ink-900); }
.docs-ask-was, .docs-ask-new { margin: 0 0 8px; }
.docs-ask-cites { display: block; margin-top: 2px; font-size: var(--t-cap); color: var(--ink-500); text-decoration: none; }
.docs-ask-left { margin: 10px 0 0; }
.docs-ask-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
@media (max-width: 720px) { .docs-ask-cols { grid-template-columns: minmax(0, 1fr); } .docs-ask .menu-btn { display: none; } }
/* A document's rail: its last versions and activity as quiet lines. */
.docs-rail-lines { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.docs-rail-lines li { display: grid; gap: 2px; min-width: 0; }
.docs-rail-what { font-size: var(--t-small); color: var(--ink-900); overflow-wrap: anywhere; }
.docs-rail-sub { font-size: var(--t-cap); color: var(--ink-500); }
/* New draft's composer: every kind in a rail beside the chosen kind's form (21 October 2026). */
.docs-compose { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 28px; align-items: start; }
.docs-compose-rail { position: sticky; top: 16px; padding-top: 2px; }
.docs-compose-rail h3 { margin: 16px 10px 4px; font-size: var(--t-cap); font-weight: 500; color: var(--ink-500); }
.docs-compose-rail h3:first-child { margin-top: 0; }
.docs-compose-rail ul { list-style: none; margin: 0; padding: 0; }
.docs-compose-rail a { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: var(--r-row); color: var(--ink-700); font-size: var(--t-small); text-decoration: none; }
.docs-compose-rail a svg { width: 16px; height: 16px; flex: none; color: var(--ink-400); }
.docs-compose-rail a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-compose-rail a:hover { background: var(--surface-2); color: var(--ink-900); }
.docs-compose-rail a[aria-current] { background: var(--surface); color: var(--ink-900); font-weight: 600; box-shadow: var(--shadow-card); }
.docs-compose-rail a[aria-current] svg { color: var(--accent); }
.docs-compose-main { min-width: 0; }
@media (max-width: 960px) { .docs-compose { grid-template-columns: minmax(0, 1fr); } .docs-compose-rail { display: none; } }
.docs-home-search { position: relative; display: flex; align-items: center; margin-bottom: 4px; }
.docs-home-search svg { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--ink-500); pointer-events: none; }
.docs-home-search input { width: 100%; height: 48px; padding: 0 16px 0 46px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font: inherit; font-size: 15px; box-shadow: var(--shadow-card); }
.docs-home-search input:focus { outline: none; border-color: var(--accent); box-shadow: var(--accent-ring); }
.docs-quick-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.docs-home-stack { display: grid; gap: var(--gap); align-content: start; min-width: 0; }
.docs-quick { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); color: inherit; text-decoration: none; box-shadow: var(--shadow-card); transition: border-color 120ms var(--ease), background 120ms var(--ease); }
.docs-quick:hover { border-color: var(--ink-400); background: var(--surface-2); }
.docs-quick-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.docs-quick-icon svg { width: 17px; height: 17px; }
.docs-quick-text { display: grid; min-width: 0; }
.docs-quick-text b { font-size: var(--t-small); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-quick-text span { font-size: var(--t-cap); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* On a phone two cards share a line: the name wraps whole and the line under it waits for a wider screen. */
@media (max-width: 560px) { .docs-quick-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .docs-quick { padding: 12px; gap: 10px; } .docs-quick-text b { white-space: normal; } .docs-quick-text span { display: none; } }
.docs-home-files { list-style: none; margin: 0; padding: 0; }
.docs-home-files li + li { border-top: 1px solid var(--line-soft); }
.docs-home-file { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 18px; color: inherit; text-decoration: none; }
.docs-home-file:hover { background: var(--surface-2); }
.docs-home-file-text { display: grid; flex: 1; min-width: 0; }
.docs-home-file-text b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-home-file-text span { font-size: var(--t-cap); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-home-file-why { flex: none; font-size: var(--t-cap); color: var(--ink-500); }
.docs-home-links { display: inline-flex; gap: 14px; }
.docs-details-sheet { width: min(1040px, 94vw); max-width: none; }
.docs-details .docs-viewer { margin: 4px 0 8px; }
.docs-details .docs-dv-stage { max-height: calc(100vh - 230px); }
.docs-pane-more { padding: 12px 0 0; border-top: 1px solid var(--line-soft); }
.docs-pane-more > summary { cursor: pointer; font-size: var(--t-small); color: var(--ink-500); list-style: none; padding: 6px 0; }
.docs-pane-more > summary::-webkit-details-marker { display: none; }
.docs-pane-more > summary:hover { color: var(--ink-900); }
/* The viewer (21 October 2026): the file as it looks, its pages on a grey table, sharp at any zoom; a bar with its
   name, what it is, the page count and zoom. A picture shows as itself. */
.docs-viewer { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.docs-dv-bar { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.docs-dv-name { font-weight: 600; font-size: var(--t-small); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-dv-facts { flex: 1; min-width: 0; font-size: var(--t-cap); color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-dv-tools { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: var(--t-cap); color: var(--ink-500); font-variant-numeric: tabular-nums; }
.docs-dv-count { margin-right: 8px; }
.docs-dv-zoom { min-width: 42px; text-align: center; }
.docs-dv-tools .btn-icon { width: 28px; height: 28px; }
.docs-dv-stage { display: grid; justify-items: center; gap: 16px; padding: 20px 12px 28px; background: color-mix(in srgb, var(--ink-400) 14%, var(--surface-2)); overflow: auto; min-height: 320px; }
.docs-dv-page { background: var(--surface); box-shadow: 0 1px 3px color-mix(in srgb, var(--ink-900) 18%, transparent), 0 6px 18px color-mix(in srgb, var(--ink-900) 8%, transparent); max-width: 100%; }
.docs-dv-page canvas { display: block; max-width: 100%; height: auto; }
.docs-dv-loading { align-self: center; margin: 80px 0; color: var(--ink-500); font-size: var(--t-small); }
.docs-dv-why { justify-self: stretch; margin: 0 0 4px; padding: 0 8px; font-size: var(--t-small); color: var(--ink-500); }
.docs-viewer.docs-dv-text .docs-dv-stage { display: block; background: var(--surface-2); }
.docs-dv-image { padding: 16px; }
.docs-dv-image img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 6px; }
/* A testimonial's permission, on top of its sheet, one column wide: the sheet is narrow. */
.docs-permission { margin-bottom: 16px; }
.docs-permission .kit-section { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
.docs-permission .kit-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.docs-permission .kit-section-title { display: none; }
/* A page's actions wrap on a phone rather than run off its edge (pages/documents.ts). */
.docs-head-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; max-width: calc(100vw - 2 * var(--gutter, 16px)); }

.docs-row-meta { flex-direction: column; align-items: flex-end; gap: 2px; }
.docs-narrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.docs-folders { border-bottom: 1px solid var(--line); }
.docs-folders .row-title svg { width: 15px; height: 15px; color: var(--tint-documents-fg); margin-right: 8px; vertical-align: -2px; }
.docs-empty { padding: 24px 16px; }
.docs-more { padding: 12px 16px; }
.docs-list-foot { display: flex; flex-wrap: wrap; gap: 16px; padding: 14px 16px; margin-top: auto; border-top: 1px solid var(--line-soft); font-size: var(--t-small); }
.docs-list-foot svg { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.docs-watch-line { padding: 8px 16px 0; }
.docs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.docs-checks, .docs-checklist { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; }
.docs-checks .check { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 8px; font-size: var(--t-small); color: var(--ink-700); }
.docs-checks .check svg, .docs-checklist .check svg { width: 16px; height: 16px; margin-top: 2px; color: var(--live); }
.docs-checks .check.fail svg, .docs-checklist .check.fail svg { color: var(--danger); }
.docs-checklist .check { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; font-size: var(--t-small); color: var(--ink-700); font-weight: 400; }
.docs-checklist .check > span { display: grid; gap: 2px; }
.docs-checklist .check b { color: var(--ink-900); font-weight: 600; }
.docs-checklist .check.fail b { color: var(--danger); }
.docs-checklist .check.info svg { color: var(--ink-400); }
.docs-checklist .link-btn { justify-self: start; font-size: var(--t-cap); }
.docs-doc { display: grid; gap: 16px; }
.docs-doc .rec-tabs { margin-top: 4px; }
.docs-two { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.docs-side { display: grid; gap: 16px; align-content: start; }
.docs-reading { padding: 28px 32px; }
.doc-read { font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--ink-900); max-width: 72ch; }
.doc-read h2 { font-size: var(--t-title); margin: 0 0 12px; letter-spacing: -0.01em; }
.doc-read h3 { font-size: var(--t-h); margin: 22px 0 8px; }
.doc-read h4 { font-size: var(--t-body); margin: 18px 0 6px; }
.doc-read p { margin: 0 0 10px; }
.doc-read ul { margin: 0 0 12px; padding-left: 20px; }
.doc-read .table-scroll { margin: 8px 0 16px; }
.docs-version .row-meta { gap: 8px; }
.docs-approvals { display: grid; gap: 14px; }
.docs-narrowed { margin: 0; }
.docs-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 24px; }
.docs-choice { display: grid; gap: 6px; padding: 18px; color: var(--ink-900); text-decoration: none; transition: border-color 120ms var(--ease); }
.docs-choice:hover { border-color: var(--ink-400); }
.docs-choice span:last-child { color: var(--ink-500); font-size: var(--t-small); }
.docs-sows, .docs-item-edit { border: 1px solid var(--line); border-radius: var(--r-control); padding: 12px 14px; margin: 0 0 12px; }
.docs-sows legend, .docs-item-edit legend { padding: 0 6px; font-weight: 600; font-size: var(--t-small); }
.docs-sow { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.docs-sow > span { display: grid; gap: 2px; }
.docs-svc-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 36px; gap: 8px; margin-bottom: 8px; align-items: center; }
.docs-svc-row .menu-btn { width: 100%; }
.docs-fill { background: var(--tint-documents-fg); }
.docs-report-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.docs-steps { margin: 8px 0 16px; padding-left: 20px; color: var(--ink-700); font-size: var(--t-small); display: grid; gap: 4px; }
.docs-note { border-bottom: 1px solid var(--line-soft); padding: 10px 0; }
.docs-note:last-child { border-bottom: 0; }
.docs-note summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.docs-note summary::-webkit-details-marker { display: none; }
.docs-note[open] summary { margin-bottom: 10px; }
.docs-money { font-size: var(--t-cap); color: var(--ink-500); }
.docs-examples { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.docs-examples li p { margin: 0 0 4px; }
.docs-examples li.dropped p { color: var(--ink-400); }
.docs-blind { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.docs-preview-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.docs-preview { border-top: 1px solid var(--line-soft); padding-top: 16px; margin-top: 8px; }
.docs-quote { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--line); color: var(--ink-700); }
.docs-override h2 { margin: 0 0 4px; }

/* Draft review: the sources, the draft and the checks, side by side. */
.docs-review { padding: 0 var(--gutter) 32px; display: grid; gap: 12px; }
.docs-review-head { padding-top: 4px; }
.docs-review-tabs { display: none; }
.docs-review-grid { display: grid; grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2.1fr) minmax(250px, 1fr); gap: 16px; align-items: start; }
.docs-sources, .docs-checks-pane { position: sticky; top: calc(var(--top) + 12px); max-height: calc(100vh - var(--top) - 32px); overflow-y: auto; }
.docs-sources .section, .docs-checks-pane .section { margin-top: 0; }
.docs-source-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.docs-source-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 8px; border-radius: var(--r-control); font-size: var(--t-small); transition: background 160ms var(--ease); }
.docs-source-list li.lit { background: var(--accent-soft); }
.docs-source-list li b { display: block; font-weight: 600; }
.docs-source-list li p { margin: 2px 0 0; color: var(--ink-700); }
.docs-src-n { width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: var(--t-cap); color: var(--ink-500); font-variant-numeric: tabular-nums; }
.docs-forecast { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.docs-forecast h4 { margin: 0 0 6px; font-size: var(--t-small); }
/* The review's left column is narrow: a row is the name and its state on one line, Remind and Write it on the next. */
.docs-forecast h4 + .list, .docs-forecast .cap + .list { margin-bottom: 10px; }
.docs-forecast h4:not(:first-child) { margin-top: 16px; }
.docs-forecast .list .row { flex-wrap: wrap; gap: 4px 12px; min-height: 0; padding: 8px 0; background: transparent; }
.docs-forecast .list .row-main span { overflow-wrap: anywhere; }
.docs-forecast .row-actions { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.docs-forecast > .btn { margin: 4px 0 6px; }
/* A quiet button's words line up with the words above it. */
.docs-forecast .btn-quiet { margin-left: -10px; }
.docs-draft { padding: 24px 28px; }
.docs-editbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.docs-editbar .cap { margin-right: auto; }
.docs-figures { margin: 0 0 20px; display: grid; gap: 8px; }
.docs-figures figcaption { font-size: var(--t-cap); color: var(--ink-500); display: flex; gap: 6px; align-items: center; }
.docs-figures figcaption svg { width: 13px; height: 13px; }
.docs-section { margin-bottom: 18px; }
.docs-section h3 { font-size: var(--t-h); margin: 0 0 8px; }
.docs-para { position: relative; padding: 4px 8px; margin: 0 -8px 6px; border-radius: var(--r-control); transition: background 160ms var(--ease); }
.docs-para p { margin: 0; display: inline; }
.docs-para.failing { background: var(--row-risk); }
.docs-para.lit, .docs-para.docs-now { background: var(--accent-soft); }
.docs-para.docs-was p { color: var(--ink-500); }
.docs-cites { margin-left: 4px; white-space: nowrap; }
.docs-cite { border: 0; background: none; padding: 0 2px; color: var(--accent); font: inherit; font-size: var(--t-cap); cursor: pointer; }
.docs-cite:hover { text-decoration: underline; }
.docs-by { display: block; font-size: var(--t-cap); color: var(--ink-500); margin-top: 2px; }
.docs-confirm { background: var(--row-risk); color: var(--row-risk-ink); border-radius: 4px; padding: 0 4px; font-weight: 500; }
.docs-para-edit { width: 100%; display: block; resize: vertical; }
.docs-para-remove { position: absolute; top: 4px; right: -34px; }
.docs-item { margin-bottom: 12px; }
.docs-item p { margin: 4px 0; }
.docs-decision { margin-top: 16px; }
.docs-decide { display: grid; gap: 10px; }
.docs-score { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.docs-score legend { font-weight: 600; font-size: var(--t-small); margin-bottom: 6px; padding: 0; }
.docs-score label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-control); cursor: pointer; font-size: var(--t-small); }
.docs-score label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.docs-decide-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* The decision at the top of a draft (PandaDoc's Approve bar): one row on a laptop, the score as a segmented choice,
   the actions at its end; wrapping on a phone. */
.docs-decision-top { margin-top: 12px; }
.docs-decision-top .docs-decide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.docs-decision-top .docs-score { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.docs-decision-top .docs-score legend { float: left; margin: 0 6px 0 0; }
.docs-decision-top .docs-score label { padding: 5px 10px; }
.docs-score-after { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.docs-score-after .cap { margin: 0 4px 0 0; }
.docs-decision-top .check-line { font-size: var(--t-small); }
.docs-decision-top .docs-decide-actions { margin-left: auto; }
.docs-decision-top .docs-decide > .cap { flex-basis: 100%; margin: 0; }
.docs-about { display: grid; gap: 2px; margin: 0 0 8px; }
.docs-why { color: var(--danger); margin: 0; }
.docs-waiting { display: flex; gap: 8px; align-items: center; margin: 0; }
.docs-record { display: grid; gap: 8px; }
.docs-record p { margin: 0; }
.docs-record .cap svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }
.docs-more-row { margin-top: 16px; }
.docs-pane-words { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.docs-pane-words h3 { font-size: var(--t-body); margin: 14px 0 6px; }
.docs-group { padding: 12px 16px 4px; font-size: var(--t-cap); color: var(--ink-500); }

@media (max-width: 1100px) and (min-width: 768px) {
  .docs-review-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, 0.8fr); }
  .docs-sources { grid-column: 1 / -1; position: static; max-height: none; order: 3; }
  .docs-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .docs-two { grid-template-columns: minmax(0, 1fr); }
  .docs-reading { padding: 18px; }
  .docs-draft { padding: 18px 16px; }
  .docs-review { padding: 0 0 24px; }
  .docs-review-head { padding: 0 16px; }
  .docs-review-tabs { display: flex; margin: 0 16px; }
  .docs-review-grid { grid-template-columns: minmax(0, 1fr); }
  .docs-sources, .docs-checks-pane { position: static; max-height: none; overflow: visible; padding: 0 16px; }
  .docs-review-grid[data-docs-show="draft"] > .docs-sources, .docs-review-grid[data-docs-show="draft"] > .docs-checks-pane,
  .docs-review-grid[data-docs-show="sources"] > .docs-draft, .docs-review-grid[data-docs-show="sources"] > .docs-checks-pane,
  .docs-review-grid[data-docs-show="checks"] > .docs-draft, .docs-review-grid[data-docs-show="checks"] > .docs-sources { display: none; }
  /* The decision sits above the tab bar, in reach of a thumb. */
  .docs-decide { position: sticky; bottom: calc(var(--tabs) + env(safe-area-inset-bottom)); background: var(--surface); padding: 12px 16px; margin: 0 -16px; border-top: 1px solid var(--line); }
  .docs-para-remove { position: static; margin-top: 4px; }
  .docs-blind { grid-template-columns: minmax(0, 1fr); }
  .docs-svc-row { grid-template-columns: minmax(0, 1fr) 72px 36px; }
}
.docs-row-sub { display: flex; align-items: center; gap: 8px; min-width: 0; }
.docs-row-sub > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.docs-row-sub .state { flex: none; }
/* A draft or a document is named in full: its title wraps rather than being cut. */
.content:has(.docs-page) .page-title { white-space: normal; overflow: visible; text-overflow: clip; }
/* A document's title has its row: two lines at most, never cut to a few words. */
.docs-page .row-title b, [data-split="approvals"] [data-pane^="doc-"] .row-title b { max-width: none; flex: 1 1 auto; min-width: 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.docs-page .rec-tabs .count { margin-left: 6px; color: var(--ink-500); font-weight: 400; }
.docs-side .kv { grid-template-columns: 96px minmax(0, 1fr); }
.docs-side .kv > dd { overflow-wrap: anywhere; }
/* The narrow File properties card: a label column that leaves the value room, and a value that wraps rather than run into the edge (QA 13). */
.docs-props .kv { grid-template-columns: 104px minmax(0, 1fr); }
.docs-props .kv > dd { overflow-wrap: anywhere; }
.docs-imports .row[aria-current="true"] { background: var(--surface-2); }
/* A DCB draft's tables in Draft review: the reference stays narrow and the words get the room. */
.docs-rows table { table-layout: fixed; width: 100%; }
.docs-rows th:first-child, .docs-rows td:first-child { width: 44px; }
.docs-rows td { vertical-align: top; overflow-wrap: anywhere; }
/* A page of stacked cards keeps room between them (Templates, Writing profiles; Portal's client page). */
.docs-template { display: grid; gap: 16px; }
.docs-page > .card + .card { margin-top: 16px; }
/* A file row draws one divider, the list item's, never the row's as well. */
.docs-file > .row { border-bottom: 0; }
.docs-catalogue td:first-child { white-space: nowrap; }
.docs-kind-examples .docs-example-add { padding: 12px 20px 18px; }
.docs-kind-examples > .list { border-top: 0; }
.docs-page { display: contents; }
.docs-page .card > .card-head { padding: 18px 20px 0; }
.docs-page .card > .table-scroll, .docs-page .card > .table-wrap > .table-scroll { padding: 0 20px 6px; }
.docs-page .card > .cap.pad { padding: 8px 20px 14px; }
.docs-page .card.table-wrap { padding: 4px 0; }

/* Documents as a file workspace (27 September): Home, All files, the details
   beside a list, Grid, the bulk bar, drop to upload, Compare and Write. Every
   rule is Documents' own (.docs-*) and uses the tokens above only. */

.docs-new .menu-btn { height: var(--ctl); padding: 0 14px; border-radius: var(--r-control); background: var(--accent); color: var(--on-dark); font-weight: 600; gap: 6px; }
.docs-new .menu-btn:hover { background: var(--accent-hover); }
.docs-new .menu-btn .menu-chevron { color: var(--on-dark); opacity: 0.8; }
.docs-h { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 10px; font-size: var(--t-small); font-weight: 600; color: var(--ink-700); letter-spacing: 0; }
.docs-h:first-child { margin-top: 4px; }
.docs-h-link { margin-left: auto; font-weight: 500; color: var(--ink-500); font-size: var(--t-cap); }
.docs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 14px; font-size: var(--t-small); color: var(--ink-500); }
.docs-crumbs a { color: var(--ink-500); text-decoration: none; }
.docs-crumbs a:hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; }
.docs-crumbs > span:last-child { color: var(--ink-900); font-weight: 500; }
.docs-crumbs .sep { color: var(--ink-400); }

/* The toolbar over a list: search, Type, Modified, the view. */
.docs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.docs-toolbar .grow { flex: 1; }
.docs-search { flex: 1 1 240px; max-width: 420px; }
.docs-view { padding: 2px; }
.docs-view .btn-icon { width: 30px; height: 26px; }
.docs-view svg { width: 15px; height: 15px; }

/* Folders as tiles, files as rows. */
.docs-page .split-list .docs-h { padding: 0 16px; }
.docs-folders-grid { list-style: none; margin: 0; padding: 0 16px 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.docs-folder { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-row); background: var(--surface); color: var(--ink-900); text-decoration: none; min-width: 0; transition: border-color 120ms var(--ease), background 120ms var(--ease); }
.docs-folder:hover { border-color: var(--ink-400); background: var(--surface-2); }
.docs-folder-text { display: grid; min-width: 0; }
.docs-folder-text b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-folder-text span { font-size: var(--t-cap); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-table { min-width: 0; }
.docs-files { list-style: none; margin: 0; padding: 0; }
.docs-cols, .docs-frow { display: grid; grid-template-columns: 34px minmax(0, 1fr) 128px 104px 124px 64px; align-items: center; column-gap: 12px; }
.docs-cols { grid-template-columns: 32px 34px minmax(0, 1fr) 128px 104px 124px 64px 32px; padding: 0 12px 0 4px; height: 34px; border-bottom: 1px solid var(--line-soft); font-size: var(--t-cap); color: var(--ink-500); }
.docs-cols .docs-col-name { grid-column: 2 / span 2; }
.docs-cols a { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; }
.docs-cols a:hover, .docs-cols a[aria-sort] { color: var(--ink-900); }
.docs-file { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; padding: 0 12px 0 4px; border-bottom: 1px solid var(--line-soft); }
.docs-file:last-child { border-bottom: 0; }
.docs-file:hover { background: var(--surface-2); }
.docs-file.picked, .docs-file:has(> a[aria-selected="true"]) { background: var(--accent-soft); }
.docs-page .docs-frow { min-height: 52px; padding: 6px 0; color: var(--ink-900); text-decoration: none; border-radius: 0; background: none; }
.docs-page .docs-frow.kbd-focus { box-shadow: inset 3px 0 0 var(--accent); }
.docs-pick { display: grid; place-items: center; width: 32px; height: 32px; }
.docs-pick input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.docs-fname { display: grid; min-width: 0; }
.docs-fname b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-fsub { font-size: var(--t-cap); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-fstatus, .docs-fwhen, .docs-fby, .docs-fsize { font-size: var(--t-small); color: var(--ink-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-fsize { text-align: right; font-variant-numeric: tabular-nums; }
.docs-fwhen { font-variant-numeric: tabular-nums; }
.docs-star, .docs-star-gap { width: 32px; height: 32px; }
.docs-star svg { width: 15px; height: 15px; color: var(--ink-400); }
.docs-star.on svg { color: var(--tone-due); fill: currentColor; }
.docs-file .docs-star { opacity: 0; }
.docs-file:hover .docs-star, .docs-file .docs-star.on, .docs-file .docs-star:focus-visible { opacity: 1; }
.docs-ftile .docs-fmark { font-size: 9px; font-weight: 700; letter-spacing: 0.02em; }
.docs-bin .docs-fsize .btn { height: 28px; }
/* The recycle bin's rows end in Restore: the last column is as wide as the button, never a size column it overflows (QA 17). */
.docs-bin .docs-file { grid-template-columns: 32px minmax(0, 1fr); padding-right: 16px; }
.docs-bin .docs-frow { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 200px) 72px auto; }
.docs-bin .docs-fby { display: none; }

/* Grid: the same files as tiles. */
.docs-cards { list-style: none; margin: 0; padding: 12px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; }
.docs-home .docs-cards { padding: 0; }
.docs-card { position: relative; display: grid; gap: 4px; align-content: start; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-row); box-shadow: var(--shadow-card); min-width: 0; transition: border-color 120ms var(--ease); }
.docs-card:hover { border-color: var(--ink-400); }
.docs-card-link { position: absolute; inset: 0; border-radius: inherit; }
.docs-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.docs-card-top .docs-star { position: relative; z-index: 1; margin: -6px -6px 0 0; }
.docs-card-title { font-weight: 600; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.docs-card-sub { font-size: var(--t-cap); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Drop anywhere on a folder that takes uploads. */
.docs-split.docs-dropping { position: relative; }
.docs-split.docs-dropping::after { content: attr(data-docs-drop-label); position: absolute; inset: 8px; z-index: 5; display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: var(--r-card);
  background: var(--accent-soft); color: var(--accent); font-weight: 600; pointer-events: none; }

/* The details beside a list, Box's sidebar. */
/* One column no wider than the pane, so a long line wraps inside its padding; the phone's back link keeps its own width. */
.docs-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: start; }
.docs-details > .phone-only { justify-self: start; }
.docs-details section { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.docs-details .section { margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; }
.docs-dhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.docs-dtitle h2 { margin: 0 0 4px; font-size: var(--t-h); line-height: 22px; overflow-wrap: anywhere; }
.docs-dtitle .thread-facts { flex-wrap: wrap; }
.docs-kv { grid-template-columns: 88px minmax(0, 1fr); }
.docs-kv > dd { overflow-wrap: anywhere; }
.docs-activity { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--t-small); }
.docs-activity li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.docs-activity .muted { white-space: nowrap; font-size: var(--t-cap); }
.docs-catchup { margin: 4px 0; }
.docs-summary .btn svg { width: 15px; height: 15px; }
.docs-summary-lines { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 6px; font-size: var(--t-small); color: var(--ink-900); }
.docs-side .docs-summary { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.docs-side section .section { margin-top: 0; }

/* Home. */
.docs-home { display: grid; gap: 4px; }
.docs-starts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.docs-start { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-row); box-shadow: var(--shadow-card); color: var(--ink-900); text-decoration: none; transition: border-color 120ms var(--ease); }
.docs-start:hover { border-color: var(--ink-400); }
.docs-start-text { display: grid; gap: 2px; min-width: 0; }
.docs-start-text b { font-weight: 600; }
.docs-start-text span { font-size: var(--t-cap); line-height: var(--t-cap-lh); color: var(--ink-500); }
.docs-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.docs-home-grid.one { grid-template-columns: minmax(0, 1fr); }
.docs-home-main > section > .docs-files { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.docs-home .docs-frow { grid-template-columns: 34px minmax(0, 1fr) 128px 104px 124px 72px; }
.docs-home .docs-fsize .btn { height: 28px; }
.docs-suggests { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.docs-suggest { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: var(--r-row); background: var(--row-soon); color: var(--ink-900); text-decoration: none; }
.docs-suggest.risk { background: var(--row-risk); }
.docs-suggest svg { width: 16px; height: 16px; margin-top: 2px; color: var(--ink-500); }
.docs-suggest.risk svg { color: var(--tone-due); }
.docs-suggest > span { display: grid; gap: 2px; }
.docs-suggest b { font-weight: 600; }
.docs-suggest span span { font-size: var(--t-cap); color: var(--row-reason); }

/* Write with the Assistant. */
.docs-write { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; max-width: 1040px; }
.docs-dcb-kinds { margin-bottom: 16px; }
.docs-write .seg-opt { position: relative; }
.docs-write .seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.docs-write .seg-opt span { height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 7px; color: var(--ink-500); cursor: pointer; font-weight: 500; }
.docs-write .seg-opt input:checked + span { background: var(--surface); color: var(--ink-900); box-shadow: var(--shadow-seg); }
.docs-write .seg-opt input:focus-visible + span { box-shadow: 0 0 0 2px var(--accent-ring); }
.docs-write fieldset.field { border: 0; padding: 0; margin: 0 0 16px; }
.docs-write fieldset.field legend { font-weight: 500; font-size: var(--t-small); margin-bottom: 6px; padding: 0; }
.docs-write-side .section { display: flex; gap: 8px; align-items: center; margin-top: 0; }
.docs-write-side .section svg { width: 16px; height: 16px; color: var(--indigo-fg); }
/* A drafting run that takes minutes (the clinical risk file): the latest step, then the drafts it made. */
.docs-run { max-width: 720px; display: grid; gap: 8px; }
.docs-run-line { font-size: var(--t-body); margin: 0; }
.docs-run[aria-busy="true"] .docs-run-line { color: var(--ink-700); }
.docs-run-drafts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.docs-run-list { margin: 4px 0 0; padding-left: 20px; color: var(--ink-700); font-size: var(--t-small); display: grid; gap: 2px; }
.docs-pick-files { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 2px; max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-control); }
.docs-pick-files .check-line { display: grid; grid-template-columns: 18px 28px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; cursor: pointer; }
.docs-pick-files .check-line:hover { background: var(--surface-2); }
.docs-pick-files .check-line > span { display: grid; min-width: 0; }
.docs-pick-files b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-para-rewrite { position: absolute; top: 4px; right: -112px; height: 28px; font-size: var(--t-cap); }

/* Compare versions. */
.docs-compare { display: grid; gap: 16px; max-width: 900px; }
.docs-compare-head { display: flex; gap: 12px; align-items: center; }
.docs-compare-head p { margin: 2px 0 0; }
.docs-compare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.docs-diff { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-body); line-height: var(--t-body-lh); }
.docs-diff li { padding: 6px 10px; border-radius: var(--r-control); border-left: 3px solid transparent; }
.docs-diff .docs-diff-same { color: var(--ink-500); }
.docs-diff .docs-diff-add { background: var(--green-bg); border-left-color: var(--live); }
.docs-diff .docs-diff-del { background: var(--danger-soft); border-left-color: var(--danger); text-decoration: line-through; text-decoration-color: var(--danger); color: var(--ink-700); }
.docs-diff .docs-diff-change { border-left-color: var(--accent); background: var(--surface-2); }
.docs-diff ins { background: var(--green-bg); text-decoration: none; border-radius: 3px; }
.docs-diff del { background: var(--danger-soft); text-decoration-color: var(--danger); border-radius: 3px; color: var(--ink-700); }
.docs-diff .docs-diff-fold { color: var(--ink-400); font-size: var(--t-cap); text-align: center; border: 1px dashed var(--line); }

@media (max-width: 1100px) {
  .docs-home-grid, .docs-write { grid-template-columns: minmax(0, 1fr); }
}
/* The columns answer to the list's own width, not the screen's: a list beside
   the details, or in Home's main column, drops Modified by, then Size, then
   becomes two lines, and the name always keeps its room. */
.docs-table, .docs-files { container-type: inline-size; }
@container (max-width: 840px) {
  .docs-frow, .docs-home .docs-frow { grid-template-columns: 34px minmax(0, 1fr) 120px 96px 64px; }
  .docs-cols { grid-template-columns: 32px 34px minmax(0, 1fr) 120px 96px 64px 32px; }
  .docs-fby { display: none; }
}
@container (max-width: 620px) {
  .docs-frow, .docs-home .docs-frow { grid-template-columns: 34px minmax(0, 1fr) 116px 88px; }
  .docs-cols { grid-template-columns: 32px 34px minmax(0, 1fr) 116px 88px 32px; }
  .docs-fsize:not(:has(.btn)) { display: none; }
  .docs-home .docs-frow:has(.btn) { grid-template-columns: 34px minmax(0, 1fr) 116px 88px 72px; }
}
@container (max-width: 480px) {
  .docs-cols { display: none; }
  .docs-frow, .docs-home .docs-frow, .docs-home .docs-frow:has(.btn) { grid-template-columns: 34px minmax(0, 1fr) auto; row-gap: 2px; }
  .docs-frow .docs-fstatus { grid-column: 2; grid-row: 2; }
  .docs-frow .docs-fwhen { grid-column: 3; grid-row: 1; text-align: right; font-size: var(--t-cap); }
  .docs-frow .docs-fsize { grid-column: 3; grid-row: 2; font-size: var(--t-cap); }
  .docs-frow > .docs-ftile { grid-row: 1 / span 2; }
  .docs-fname b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media (max-width: 767px) {
  .docs-toolbar { padding: 10px 0; }
  .docs-search { flex-basis: 100%; max-width: none; }
  .docs-crumbs { margin: 0 0 10px; }
  .docs-folders-grid { padding: 0 0 4px; grid-template-columns: minmax(0, 1fr); }
  .docs-page .split-list .docs-h { padding: 0; }
  .docs-file { grid-template-columns: 28px minmax(0, 1fr) 32px; padding: 0; }
  /* In a card (Home's lists) the star keeps clear of the card's edge. */
  .card .docs-file, .docs-home-main .docs-file { padding-right: 6px; }
  .docs-file .docs-star { opacity: 1; }
  .docs-cards { padding: 12px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs-starts { grid-template-columns: minmax(0, 1fr); }
  .docs-para-rewrite { position: static; margin-top: 4px; }
  .docs-diff { font-size: var(--t-ui); }
}
/* A file browser is the list; the details open beside it only when a file is chosen (Box, OneDrive). */
@media (min-width: 768px) {
  .docs-split { grid-template-columns: minmax(0, 1fr); }
  .docs-split[data-open="detail"] { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); }
  .docs-split:not([data-open="detail"]) > .split-detail { display: none; }
  .docs-split:not([data-open="detail"]) > .split-list { border-right: 0; }
  .docs-split .split-detail-inner { padding: 20px 22px 40px; }
}
.docs-watch-line { display: flex; align-items: center; gap: 6px; }
.docs-watch-line svg { width: 14px; height: 14px; flex: none; color: var(--ink-400); }
.docs-toolbar .docs-view .btn svg { width: 16px; height: 16px; }
.docs-close { margin: -4px -8px 0 0; }
.docs-list-crumbs { padding: 14px 16px 0; margin: 0; }
.docs-dhead-actions { display: flex; align-items: center; gap: 2px; }
.docs-start-text span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Home's rows carry no Modified by, and Waiting on you ends in its Review button. */
.docs-home .docs-fby { display: none; }
.docs-home .docs-frow { grid-template-columns: 34px minmax(0, 1fr) 128px 88px 64px; }
.docs-home .docs-frow:has(.btn) { grid-template-columns: 34px minmax(0, 1fr) 128px 88px auto; }
.docs-toolbar .docs-search { flex: 1 1 200px; max-width: 360px; }
@container (max-width: 620px) {
  .docs-home .docs-frow { grid-template-columns: 34px minmax(0, 1fr) 88px; }
  .docs-home .docs-frow:has(.btn) { grid-template-columns: 34px minmax(0, 1fr) 88px auto; }
  .docs-home .docs-fstatus { display: none; }
}
@container (max-width: 480px) {
  .docs-home .docs-frow, .docs-home .docs-frow:has(.btn) { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .docs-home .docs-fstatus { display: block; }
}
@media (max-width: 767px) {
  /* On a phone Start is a compact grid of two, and what the records suggest comes before the lists. */
  .docs-starts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .docs-start { padding: 12px; gap: 10px; align-items: center; }
  .docs-start-text span { display: none; }
  .docs-home-side { order: -1; }
  .docs-home-grid { gap: 8px; }
}
.docs-toolbar .docs-view .btn-icon { width: 32px; padding: 0; justify-content: center; }
.docs-toolbar .docs-view .btn svg { flex: none; }
@media (max-width: 767px) {
  /* The phone's list is edge to edge; its contents keep the page's gutter. */
  .docs-page .docs-list-crumbs, .docs-page .docs-toolbar, .docs-page .docs-folders-grid, .docs-page .split-list .docs-h, .docs-page .docs-watch-line, .docs-page .split-list .docs-cards, .docs-page .docs-list-foot { padding-left: var(--gutter); padding-right: var(--gutter); }
  .docs-page .split-list .docs-file { padding: 0 calc(var(--gutter) - 8px) 0 calc(var(--gutter) - 10px); }
}
@media (max-width: 767px) { .docs-page .docs-toolbar .docs-search { flex-basis: 100%; max-width: none; } }

/* The recycle bin in a narrow list: name and where it was on the left, when and Restore on the right. */
@container (max-width: 620px) {
  .docs-bin .docs-frow { grid-template-columns: 34px minmax(0, 1fr) auto; row-gap: 2px; }
  .docs-bin .docs-frow .docs-fstatus { grid-column: 2; grid-row: 3; font-size: var(--t-cap); color: var(--ink-500); }
  .docs-bin .docs-frow .docs-fwhen { grid-column: 3; grid-row: 1; text-align: right; font-size: var(--t-cap); }
  .docs-bin .docs-frow .docs-fsize { grid-column: 3; grid-row: 2 / span 2; display: block; }
  .docs-bin .docs-frow > .docs-ftile { grid-row: 1 / span 3; }
}

/* Documents, as CRM. */
/* hub-fix-documents-look, 2 October 2026: Documents' index pages use CRM's own toolbar and table
   (lib-toolbar, table-scroll, crm-table, lib-table, rec-link). These rules only place what CRM's table
   has no column for: a file's small kind tile, the star that shows on hover, Recent's day rows, the view
   toggle at the toolbar's end, and the details sheet. */
.docs-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; vertical-align: middle; }
.docs-name .tile { width: 24px; height: 24px; border-radius: 7px; }
.docs-name .tile svg { width: 13px; height: 13px; }
.docs-name .docs-fmark { font-size: 8px; }
.docs-name .rec-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-index tbody th.name { max-width: 460px; }
@media (min-width: 768px) { .docs-index .lib-act { width: 1%; white-space: nowrap; } }
.docs-index .lib-act .docs-star { opacity: 0; }
.docs-index tbody tr:hover .docs-star, .docs-index .docs-star.on, .docs-index .docs-star:focus-visible { opacity: 1; }
.docs-index tbody tr.picked > * { background: var(--accent-soft); }
.crm-table tbody tr[data-docs-href], .crm-table tbody tr[data-docs-row] { cursor: pointer; }
.docs-index tbody tr.docs-group > th { height: 32px; padding: 0 12px; background: var(--surface); color: var(--ink-500); font-size: var(--t-cap); font-weight: 600; text-align: left; border-bottom: 1px solid var(--line-soft); }
.docs-index tbody tr.docs-group:hover > * { background: var(--surface); }
.docs-index-tools .docs-index-end { display: inline-flex; align-items: center; gap: 6px; }
.docs-index-tools .docs-view { padding: 2px; }
.docs-index-tools .docs-view .btn-icon { width: 30px; height: 28px; padding: 0; justify-content: center; }
.docs-index-tools .docs-view .btn svg { width: 16px; height: 16px; flex: none; }
.docs-index-page .docs-crumbs { margin: -4px 0 10px; padding: 0; }
.docs-index-page .docs-watch-line { margin: -4px 0 10px; }
.docs-index-page .table-more { margin-top: 12px; }
.docs-grid-card .docs-folders-grid, .docs-grid-card .docs-cards { padding-left: 0; padding-right: 0; }
.docs-grid-card .docs-h:first-child { margin-top: 0; }
/* The details in CRM's Preview sheet: the sheet carries the title and Close, so the pane's own go. */
.docs-sheet-body .docs-details { padding: 0; max-width: none; }
.docs-sheet-body .docs-close, .docs-sheet-body .docs-details > .phone-only { display: none; }
/* A card holding a CRM table keeps CRM's card head and lets the table run to the card's edges. */
.docs-table-card { overflow: hidden; }
.docs-page .docs-table-card > .card-head { padding: 24px 24px 0; margin-bottom: 12px; }
.docs-page .rail-card > .card-head, .docs-page .card-pad > .card-head { padding: 0; }
/* A document's page, as a CRM record: the rail's cards hold the summary, the checks and the file. */
.docs-page .docs-doc.rec { display: block; }
.docs-page .docs-doc.rec > .notice { margin: 0 0 16px; }
/* A document shown as a page, the way Drive and OneDrive preview one: a bar with the file, then a sheet
   of paper on the canvas, with the file's own headings, lists and tables. */
.docs-fileview { overflow: hidden; }
.docs-fileview-bar { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.docs-fileview-bar .tile { width: 24px; height: 24px; border-radius: 7px; }
.docs-fileview-bar .docs-fmark { font-size: 8px; }
.docs-fileview-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-fileview-facts { margin-left: auto; color: var(--ink-500); font-size: var(--t-small); white-space: nowrap; }
.docs-paper-stage { background: var(--canvas); padding: 32px; }
.docs-paper { max-width: 760px; min-height: 640px; margin: 0 auto; padding: 64px 72px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow-card); }
.docs-paper .doc-read { max-width: none; font-size: 15px; line-height: 1.65; }
.docs-paper .doc-read h2 { font-size: 26px; line-height: 32px; margin: 0 0 18px; letter-spacing: -0.015em; }
.docs-paper .doc-read h3 { font-size: 18px; line-height: 24px; margin: 28px 0 10px; }
.docs-paper .doc-read h4 { font-size: 15px; margin: 22px 0 8px; }
.docs-paper .doc-read p { margin: 0 0 12px; }
.docs-paper .doc-read ul, .docs-paper .doc-read ol { margin: 0 0 14px; padding-left: 22px; }
.docs-paper .doc-read li { margin-bottom: 4px; }
.docs-paper .doc-read .table-scroll { margin: 12px 0 20px; border-radius: 6px; box-shadow: none; }
.docs-paper .doc-read .table th { background: var(--surface-2); font-weight: 600; }
.docs-paper.plain .doc-read p { margin-bottom: 8px; }
@media (max-width: 767px) {
  .docs-fileview-bar { flex-wrap: wrap; padding: 10px 14px; }
  .docs-fileview-facts { margin-left: 0; width: 100%; white-space: normal; }
  .docs-paper-stage { padding: 12px; }
  .docs-paper { min-height: 0; padding: 24px 20px; }
  .docs-paper .doc-read h2 { font-size: 22px; line-height: 28px; }
}
.docs-page .rec-main > .docs-compare-bar { margin: 0; justify-content: flex-start; }
.docs-rail .docs-checks { margin: 0 0 12px; }
.docs-rail .docs-summary > .cap, .docs-rail .docs-summary > .btn, .docs-rail .docs-summary-lines { margin: 0 0 12px; }
.docs-rail .docs-summary > .btn { display: inline-flex; }
.docs-rail .kv-rail > dd { overflow-wrap: anywhere; }
.docs-index th .marker { margin-left: 8px; }
/* Draft review: Sources and Checks are cards beside the draft, as a record's rail cards are. */
.docs-page .docs-sources.card, .docs-page .docs-checks-pane.card { padding: 16px 18px; }
.docs-page .docs-sources.card > .card-head, .docs-page .docs-checks-pane.card > .card-head { padding: 0; margin-bottom: 10px; }
.docs-page .docs-sources.card > .card-head h2, .docs-page .docs-checks-pane.card > .card-head h2 { font-size: 15px; }
.docs-page .docs-checks-pane.card .docs-portal .btn { width: 100%; height: auto; min-height: var(--ctl); padding-top: 6px; padding-bottom: 6px; white-space: normal; text-align: center; }
/* Publish to portal on approval: a switch that shows on or off, its sentence under it saying the same (walk fault 4). */
.docs-switch { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--ctl); padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.docs-switch-track { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--line); transition: background 120ms var(--ease); }
.docs-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-seg); transition: transform 120ms var(--ease); }
.docs-switch[aria-checked="true"] .docs-switch-track { background: var(--accent); }
.docs-switch[aria-checked="true"] .docs-switch-knob { transform: translateX(14px); }
.docs-switch:focus-visible .docs-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Write with the Assistant and the clinical safety drafts: CRM's main card and rail card. */
.docs-page .docs-write { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap); max-width: none; }
.docs-write-side .rail-card { padding-bottom: 14px; }
.docs-write-side .rail-card .docs-steps { margin: 0; }
/* New document: each section's cards in even rows. */
.docs-page .docs-choices { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--gap); }
.docs-page .docs-choice { align-content: start; }
/* Settings: one card per section in the Hub's settings pane, its heading and its action inside. */
.docs-page .docs-settings > .card > .card-head .btn { margin-left: auto; }
/* Compare: the full width of the page, like every other card. */
.docs-page .docs-compare { max-width: none; }
.docs-page .prop-card .docs-props-line { margin: -6px 0 8px; }
.docs-table-card .crm-table tbody tr:first-child { border-top: 1px solid var(--line-soft); }
@media (min-width: 768px) {
  .docs-table-card .crm-table tbody tr:first-child > * { border-top: 1px solid var(--line-soft); }
  .docs-table-card .crm-table tbody tr > th:first-child { padding-left: 24px; }
  .docs-table-card .crm-table tbody td.lib-act { padding-right: 16px; }
}
/* The name takes what the other columns leave, so a table fits a 1280 laptop before it scrolls. */
@media (min-width: 768px) {
  .docs-table-card .crm-table tbody th.name, .docs-index tbody th[scope="row"] { width: 100%; max-width: 0; min-width: 200px; }
  .docs-index tbody td { max-width: 220px; }
}
/* Home, from the Hub Home's pieces: Start as even cards, the 7 to 5 row of cards, Recent as tiles. */
.docs-page .docs-home { display: grid; gap: var(--gap); }
.docs-home .home-row { margin-bottom: 0; }
.docs-home .home-row .card { height: auto; }
.docs-start-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--gap); }
.docs-start-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; min-height: 92px; color: inherit; text-decoration: none; transition: border-color 120ms var(--ease); }
.docs-start-card:hover { border-color: var(--ink-400); }
.docs-start-words { display: grid; gap: 3px; min-width: 0; }
.docs-start-words b { font-size: 15px; line-height: 20px; font-weight: 600; }
.docs-start-words span { color: var(--ink-500); font-size: var(--t-small); line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.docs-home-section { display: grid; gap: 12px; }
.docs-home-h { display: flex; align-items: baseline; gap: 10px; }
.docs-home-h h2 { margin: 0; font-size: var(--t-h); line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.docs-home-h .meta { margin-left: auto; color: var(--ink-500); font-size: var(--t-cap); text-decoration: none; }
.docs-file-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.docs-file-card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 18px 20px; min-height: 156px; transition: border-color 120ms var(--ease); }
.docs-file-card:hover { border-color: var(--ink-400); }
.docs-file-card-link { position: absolute; inset: 0; border-radius: inherit; }
.docs-file-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.docs-file-card .docs-star { position: relative; z-index: 1; margin: -6px -8px 0 0; }
.docs-file-card-title { font-size: 15px; line-height: 20px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.docs-file-card-sub, .docs-file-card-when { color: var(--ink-500); font-size: var(--t-small); line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-file-card-when { margin-top: auto; padding-top: 6px; font-size: var(--t-cap); }
.docs-home .docs-review { height: 30px; padding: 0 12px; }
.docs-starred-card .list .row { gap: 12px; padding-left: 0; padding-right: 0; }
.docs-starred-card .list li:last-child .row { border-bottom: 0; }
@media (max-width: 1100px) {
  .docs-page .docs-choices { grid-template-columns: repeat(min(var(--cols, 4), 2), minmax(0, 1fr)); }
  .docs-start-grid { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); }
  .docs-file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .docs-page .docs-sources.card, .docs-page .docs-checks-pane.card { padding: 14px 16px; }
  .docs-page .docs-write { grid-template-columns: minmax(0, 1fr); }
  .docs-page .docs-choices { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .docs-start-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .docs-start-card { min-height: 0; padding: 14px 16px; }
  .docs-file-grid { gap: 10px; }
  .docs-file-card { min-height: 0; padding: 14px; }
}
@media (max-width: 767px) {
  .crm-table.docs-index tbody tr.docs-group { display: block; padding: 8px 14px 4px; }
  .crm-table.docs-index tbody tr.docs-group > th { display: block; height: auto; padding: 0; border: 0; }
  .docs-index-tools .docs-index-end { order: 2; }
  .docs-page .docs-table-card > .card-head { padding: 16px 16px 0; }
}

/* Review of 10 October 2026. A folder is one line on a phone, its name and its count, 56 px as design.md has rows. */
@media (max-width: 767px) {
  .crm-table.lib-table tbody tr.docs-folder-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
  .crm-table.lib-table tbody tr.docs-folder-row td.lib-act { display: none; }
  .crm-table.lib-table tbody tr.docs-folder-row td.lib-phone { grid-column: 2; grid-row: 1; white-space: nowrap; }
}
/* A page with two buttons at its head gives them a row of their own on a phone, side by side, rather than one under the title and one wrapped below it. */
@media (max-width: 767px) {
  .page-actions:has(> .docs-head-actions > a.btn + a.btn) { flex: 1 1 100%; margin-left: 0; min-width: 0; }
  .docs-head-actions:has(> a.btn + a.btn) { flex: 1 1 100%; max-width: none; flex-wrap: nowrap; justify-content: stretch; }
  .docs-head-actions:has(> a.btn + a.btn) > a.btn { flex: 1 1 0; justify-content: center; white-space: nowrap; min-width: 0; }
}
/* A template's Variables: closed until opened, each tag on its own line with what fills it and its marks, nothing cut off. */
.docs-variables > summary { display: flex; align-items: baseline; gap: 10px; padding: 16px 20px; cursor: pointer; list-style: none; }
.docs-variables > summary::-webkit-details-marker { display: none; }
.docs-variables > summary h2 { margin: 0; font-size: var(--t-h); line-height: 24px; font-weight: 600; }
.docs-variables > summary .meta { margin-left: auto; color: var(--ink-500); font-size: var(--t-cap); }
.docs-variables-body { padding: 0 20px 16px; display: grid; gap: 8px; justify-items: start; }
.docs-vars { list-style: none; margin: 0; padding: 0; width: 100%; }
.docs-var { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.docs-var code { overflow-wrap: anywhere; }
.docs-var-means { color: var(--ink-700); }
.docs-var-marks { display: inline-flex; gap: 6px; }
@media (max-width: 767px) {
  .docs-var { grid-template-columns: minmax(0, 1fr) auto; }
  .docs-var-means { grid-column: 1 / -1; grid-row: 2; }
}
/* What a template's preview was filled with wraps rather than being cut. */
.docs-page .docs-previewed { white-space: normal; overflow-wrap: anywhere; }
/* A content block's placeholder is shown whole: it is what a person types into a template. */
.docs-index tbody td.docs-placeholder { max-width: 260px; white-space: normal; overflow: visible; }
.docs-index tbody td.docs-placeholder code { white-space: normal; overflow-wrap: anywhere; }
/* ----------------------------------------------------------- Quick look --- */
/* A document seen without opening it (Pass 10): a pane at the right on a desk, a sheet on a phone. It sits over the
   list, not beside it, so no list is narrowed; sheets, dialogs and menus stay above it. */
.ql { position: fixed; z-index: 56; top: 0; right: 0; bottom: 0; width: min(760px, 52vw); display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-float); overflow-y: auto; overscroll-behavior: contain;
  animation: fade 120ms var(--ease); }
.ql[hidden] { display: none; }
.ql-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 12px 20px; position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.ql-title { display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex: 1; }
.ql-title h2 { margin: 0; font-size: var(--t-h3, 17px); line-height: 1.3; overflow-wrap: anywhere; }
.ql-title h2 a { color: inherit; text-decoration: none; }
.ql-title h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ql-facts { margin: 2px 0 0; color: var(--ink-500); font-size: var(--t-cap); line-height: var(--t-cap-lh); }
.ql-close { margin-left: auto; flex: none; }
.ql-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--line-soft); }
.ql-page { padding: 0; flex: 1; }
.ql-page .docs-fileview { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.ql-page .docs-paper-stage { padding: 20px; }
.ql-page .docs-paper { padding: 40px 44px; min-height: 480px; }
.ql-held { margin: 20px; display: grid; gap: 12px; justify-items: start; }
.ql-empty { padding: 32px 20px; color: var(--ink-500); }
.doc-list-row { display: flex; align-items: center; gap: 12px; }
.doc-list-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.doc-list .tile { flex: none; }
[data-ql] { cursor: default; }
[data-ql].ql-on, tr[data-ql].ql-on > td { background: var(--accent-soft, var(--surface-2)); }
@media (max-width: 767px) {
  .ql { left: 0; width: 100%; top: 0; z-index: 65; border-left: 0; box-shadow: none; }
  .ql-page .docs-paper-stage { padding: 12px; }
  .ql-page .docs-paper { padding: 24px 20px; min-height: 0; }
}

/* ----------------------------------------------------------- Timesheets --- */
/* Every rule here is Timesheets' own (.ts-*), so nothing it sets reaches another app.
   The look is Home's: white cards on the warm canvas, radius 16, one accent, tints only on tiles. */
/* The line suggested under What you did (timesheets/web/ui.ts); the person uses it or not. */
.ts-suggest { margin-top: 8px; padding: 8px 12px; border-radius: var(--r-control); background: var(--surface-2); border: 1px solid var(--line-soft); }
.ts-suggest-line { margin: 0 0 6px; }

.ts-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ts-actions .menu-btn { width: auto; }
.ts-page { display: grid; gap: var(--gap); min-width: 0; }
.ts-page > * { margin: 0; }
.ts-lede { color: var(--ink-500); font-size: var(--t-small); margin: 0; max-width: 72ch; }
/* Your time this month (J9): where you stand, in one line above the four figures. */
.ts-standing { margin: 0; font-size: var(--t-body); font-weight: 500; }
.ts-standing .state { white-space: normal; align-items: baseline; }
.ts-month-stats { margin-bottom: 0; }
.ts-hint { color: var(--ink-500); font-size: var(--t-cap); line-height: 16px; display: inline-flex; align-items: center; gap: 4px; }
.ts-hint svg { width: 12px; height: 12px; }
.ts-sub { display: block; color: var(--ink-500); font-size: var(--t-small); line-height: 18px; font-weight: 400; }
.ts-sub.warn { color: var(--tone-due); }
.ts-sublabel { display: block; color: var(--ink-500); font-size: var(--t-small); margin-bottom: 6px; }
.ts-big { display: block; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ts-over { color: var(--danger); font-variant-numeric: tabular-nums; }
.ts-short { display: none; }
.ts-nav { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.ts-nav b { font-weight: 600; padding: 0 6px; font-variant-numeric: tabular-nums; }
.ts-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ts-toolbar .ts-export { margin-left: auto; }
.ts-export { display: inline-flex; align-items: center; gap: 4px; }
.ts-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px 4px; flex-wrap: wrap; }
.ts-card-head h2 { margin: 0; font-size: var(--t-h); font-weight: 600; }
.ts-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.ts-changed { display: inline-block; font-size: var(--t-cap); color: var(--tone-due); margin-top: 2px; }
.ts-missing { display: inline-flex; align-items: center; gap: 6px; color: var(--tone-due); font-size: var(--t-small); }
.ts-missing svg { width: 14px; height: 14px; }

/* A client's tile: initials on a quiet tint, the same for the same client everywhere. */
.ts-ctile { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.ts-ctile svg { width: 16px; height: 16px; }
.ts-t0 { background: var(--green-bg); color: var(--green-fg); }
.ts-t1 { background: var(--indigo-bg); color: var(--indigo-fg); }
.ts-t2 { background: var(--sand-bg); color: var(--sand-fg); }
.ts-t3 { background: var(--rose-bg); color: var(--rose-fg); }
.ts-tq { background: var(--row-risk); color: var(--row-risk-ink); }

/* Banners: a teammate's timesheet, a week sent back. */
.ts-teammate, .ts-returned { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: var(--r-card); flex-wrap: wrap; }
.ts-teammate { background: var(--indigo-bg); color: var(--ink-900); align-items: center; }
.ts-teammate svg { width: 18px; height: 18px; color: var(--indigo-fg); flex: none; }
.ts-teammate p { margin: 0; flex: 1 1 280px; }
.ts-returned { background: var(--row-risk); }
.ts-returned svg { width: 18px; height: 18px; color: var(--row-risk-ink); flex: none; margin-top: 2px; }
.ts-returned p { margin: 2px 0 4px; }
.ts-returned .muted { font-size: var(--t-small); }

/* The week card: the ring, the state, the action, and the rail. */
.ts-weekcard { padding: 22px 24px 18px; display: grid; gap: 18px; }
.ts-weekcard-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px; }
.ts-weekfig { display: flex; align-items: center; gap: 14px; }
.ts-ring { width: 56px; height: 56px; flex: none; }
.ts-ring circle { fill: none; stroke-width: 7; }
.ts-ring-track { stroke: var(--line-soft); }
.ts-ring-fill { stroke: var(--live); stroke-linecap: round; transition: stroke-dasharray 180ms var(--ease); }
.ts-weekfig-n { display: flex; align-items: baseline; gap: 6px; }
.ts-weekfig-n b { font-size: 30px; line-height: 34px; font-weight: 700; letter-spacing: -0.03em; }
.ts-weekfig-n span { color: var(--ink-500); font-size: var(--t-body); }
.ts-weekfig-sub { display: block; color: var(--ink-500); font-size: var(--t-small); margin-top: 2px; }
.ts-weekstate { display: grid; gap: 4px; min-width: 0; }
.ts-weekstate .state { font-weight: 500; }
.ts-weekstate-extra { color: var(--ink-500); font-size: var(--t-small); }
.ts-weekcard-action { display: grid; justify-items: end; gap: 6px; max-width: 280px; text-align: right; }
.ts-rail { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.ts-rail-day { display: grid; justify-items: center; gap: 4px; padding: 8px 4px 10px; border-radius: 12px; text-decoration: none; color: var(--ink-700); transition: background 120ms var(--ease); }
.ts-rail-day:hover { background: var(--hover); }
.ts-rail-day.on { background: var(--accent-soft); color: var(--ink-900); }
.ts-rail-day.future, .ts-rail-day.off .ts-rail-date { color: var(--ink-400); }
.ts-rail-name { font-size: var(--t-cap); color: var(--ink-500); }
.ts-rail-date { font-size: 17px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ts-rail-day.today .ts-rail-date { color: var(--accent); }
.ts-rail-day.on .ts-rail-name { color: var(--accent); }
.ts-rail-bar { display: block; width: 100%; max-width: 64px; height: 4px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.ts-rail-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--live); }
.ts-rail-bar.over > span { background: var(--tone-due); }
.ts-rail-e { font-size: var(--t-small); font-variant-numeric: tabular-nums; color: var(--ink-700); min-height: 18px; display: inline-flex; align-items: center; }

/* The day: its card and, beside it, the week by statement of work. */
.ts-daygrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--gap); align-items: start; }
.ts-daycard { padding: 0; overflow: hidden; }
.ts-daycard-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 20px 24px 14px; }
.ts-daycard-head h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
.ts-daycard-head .muted { font-size: var(--t-small); }
.ts-daycard-total { color: var(--ink-500); font-size: var(--t-small); }
.ts-daycard-total b { color: var(--ink-900); font-size: 20px; font-weight: 600; margin-right: 2px; }
.ts-daycard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 10px 12px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.ts-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px 18px; color: var(--ink-500); flex-wrap: wrap; }
.ts-empty p { margin: 0; }

/* The one-line entry on the Day: Enter saves. */
.ts-oneline { display: grid; grid-template-columns: minmax(180px, 1.2fr) 76px minmax(0, 2fr) auto; gap: 8px; padding: 0 24px 16px; }
.ts-oneline .menu-btn { width: 100%; }
.ts-oneline-days { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }

/* An entry: tile, what and the line, days and state. */
.ts-elist { list-style: none; margin: 0; padding: 0; }
.ts-elist > li + li { border-top: 1px solid var(--line-soft); }
.ts-erow { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 14px 24px; background: none; border: 0; font: inherit; color: inherit; text-align: left; }
.ts-erow.open { cursor: pointer; transition: background 120ms var(--ease); }
.ts-erow.open:hover { background: var(--surface-2); }
.ts-erow-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ts-erow-title { display: block; line-height: 22px; }
.ts-erow-title > * { margin-right: 8px; }
.ts-erow-title > :last-child { margin-right: 0; }
.ts-erow-title b { font-weight: 600; }
.ts-erow-title > span:not(.muted) { color: var(--ink-700); }
.ts-erow-title .muted { font-size: var(--t-small); }
.ts-erow-day { font-size: var(--t-small); color: var(--ink-500); min-width: 52px; }
.ts-erow-line { color: var(--ink-700); font-size: var(--t-body); line-height: 21px; overflow-wrap: anywhere; }
.ts-erow-days { display: grid; justify-items: end; gap: 3px; flex: none; }
.ts-erow-days > b { font-size: 17px; line-height: 22px; font-weight: 600; }
.ts-erow-days .state { font-size: var(--t-cap); color: var(--ink-500); }
.ts-typed { font-size: var(--t-cap); color: var(--ink-400); }
.ts-held .ts-erow-line { color: var(--ink-500); }
.ts-queue-foot { padding: 10px 24px; }
.ts-row-days { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }

.ts-side { padding: 20px 22px; }
.ts-side h2 { margin: 0 0 12px; font-size: var(--t-h); font-weight: 600; }
.ts-side p { margin: 0; font-size: var(--t-small); line-height: 20px; }
.ts-sowlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ts-sowlist li { display: flex; align-items: center; gap: 12px; }
.ts-sowlist .ts-ctile { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
.ts-sow-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ts-sow-title { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.ts-sow-title .muted { font-size: var(--t-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-sow-left { font-size: var(--t-cap); color: var(--ink-500); }
.ts-sow-left.over { color: var(--danger); }
.ts-sow-e { font-size: 15px; }
.ts-bar { display: block; position: relative; height: 4px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.ts-bar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--live); }
.ts-bar.over > span { background: var(--danger); }
/* Days left as a bar (ui.ts leftBar): approved filled, logged and not yet approved lighter beside it; the warning tone past the running-low line. */
.ts-bar > .ts-bar-pending { opacity: .35; border-radius: 0 2px 2px 0; }
.ts-bar.low > span { background: var(--tone-due); }
.ts-sow-title .marker, .ts-pick-title .marker, .ts-gsow-main .marker { margin-left: 0; flex: none; }
.ts-gsow-main { display: grid; gap: 4px; min-width: 0; }
.ts-gsow-main b { overflow: hidden; text-overflow: ellipsis; }
.ts-gsow-left { display: grid; gap: 3px; max-width: 260px; }
.ts-gsow-left .ts-bar { height: 3px; }
/* A statement of work's pin sits beside its row in the picker; pressed is pinned. */
.ts-picks > li.ts-pick-item { display: flex; align-items: flex-start; gap: 2px; }
.ts-pick-item > .ts-pick { flex: 1; min-width: 0; }
.ts-pick-pin { flex: none; margin-top: 8px; color: var(--ink-400); }
.ts-pick-pin[aria-pressed="true"] { color: var(--accent); }
.ts-pinned { display: inline-flex; }
.ts-month-link { white-space: nowrap; }
.ts-fab { display: none; }

/* The Week grid. */
.ts-weekgrid { padding: 0; overflow: hidden; }
.ts-grid-wrap { overflow-x: auto; }
.ts-grid { width: 100%; border-collapse: collapse; }
.ts-grid th, .ts-grid td { padding: 0; border-bottom: 1px solid var(--line-soft); }
.ts-grid thead th { padding: 16px 4px 12px; border-bottom: 1px solid var(--line); font-weight: 500; }
.ts-grid .ts-gh { text-align: left; padding-left: 24px; color: var(--ink-500); font-size: var(--t-small); font-weight: 500; }
.ts-dh { text-align: center; width: 76px; }
.ts-dh-name { display: block; font-size: var(--t-cap); color: var(--ink-500); }
.ts-dh-date { display: block; font-size: 17px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-900); }
.ts-dh.today .ts-dh-date, .ts-dh.today .ts-dh-name { color: var(--accent); }
.ts-dh.off .ts-dh-date { color: var(--ink-400); }
.ts-dh.missing .ts-dh-name::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--tone-due); margin-left: 4px; vertical-align: 1px; }
.ts-dh-hol { display: block; font-size: 10px; color: var(--ink-500); }
.ts-grid tbody th { text-align: left; padding: 12px 8px 12px 24px; font-weight: 400; width: 34%; }
.ts-gsow { display: flex; align-items: center; gap: 12px; min-width: 280px; }
.ts-gsow .ts-ctile { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
.ts-gsow b { font-weight: 600; }
.ts-gsow-client { display: block; color: var(--ink-500); font-size: var(--t-small); }
.ts-grid td { text-align: center; padding: 6px 4px; }
.ts-cell { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 38px; border-radius: 10px; border: 0; background: transparent; font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-900); text-decoration: none; cursor: pointer; transition: background 120ms var(--ease), box-shadow 120ms var(--ease); }
.ts-cell.in { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.ts-cell.draft { background: var(--row-soon); }
.ts-cell:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.ts-cell.empty { color: var(--ink-400); font-weight: 400; }
.ts-cell.empty svg { width: 15px; height: 15px; opacity: 0; transition: opacity 120ms var(--ease); }
.ts-grid tr:hover .ts-cell.empty svg, .ts-cell.empty:focus-visible svg { opacity: 1; }
.ts-cell.none { cursor: default; }
.ts-cell.none:hover { box-shadow: none; }
.ts-gtotal { font-size: 15px; width: 72px; }
.ts-gx { width: 44px; }
.ts-grid tfoot th, .ts-grid tfoot td { border-bottom: 0; padding-top: 12px; padding-bottom: 14px; }
.ts-grid tfoot th { text-align: left; padding-left: 24px; color: var(--ink-500); font-weight: 500; }
.ts-gday { display: grid; justify-items: center; gap: 6px; }
.ts-gday .ts-rail-bar { max-width: 44px; }
.ts-grid-key { margin: 0; padding: 12px 24px 16px; color: var(--ink-500); font-size: var(--t-small); display: flex; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--line-soft); }
.ts-grid-key > span { display: inline-flex; align-items: center; gap: 6px; }
.ts-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 4px; flex: none; }
.ts-swatch.draft { background: var(--row-soon); }
.ts-swatch.in { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.ts-week-phone { display: none; }
.ts-phone-day h3 { display: flex; justify-content: space-between; font-size: var(--t-body); margin: 18px 0 6px; padding: 0 16px; }
.ts-phone-day h3 a { color: inherit; text-decoration: none; }
.ts-phone-day p { margin: 0 0 8px; padding: 0 16px; font-size: var(--t-small); }
.ts-rowpick { list-style: none; margin: 8px 0 0; padding: 0; max-height: 50vh; overflow: auto; border: 1px solid var(--line-soft); border-radius: 12px; }
.ts-rowpick li + li { border-top: 1px solid var(--line-soft); }
.ts-rowpick .ts-erow { padding: 10px 14px; }

/* New time entry. */
.ts-new-page { max-width: 680px; padding: 24px; }
.ts-entry { display: grid; gap: 20px; }
.ts-region { border: 0; margin: 0; padding: 0; min-width: 0; }
.ts-region legend { font-size: var(--t-small); font-weight: 600; color: var(--ink-900); margin-bottom: 10px; padding: 0; }
.ts-filter { margin-bottom: 8px; }
.ts-picks { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.ts-entry-page .ts-picks { max-height: none; }
.ts-picks > li { min-width: 0; }
.ts-pick-label { font-size: var(--t-cap); color: var(--ink-500); padding: 8px 10px 2px; }
.ts-pick { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border-radius: 10px; cursor: pointer; min-height: 52px; transition: background 120ms var(--ease); }
.ts-pick:hover { background: var(--surface-2); }
.ts-pick:has(input:checked) { background: var(--accent-soft); }
.ts-pick input { margin-top: 3px; accent-color: var(--accent); }
.ts-pick-main { min-width: 0; display: grid; gap: 2px; }
.ts-pick-title { display: flex; justify-content: space-between; gap: 10px; min-width: 0; }
.ts-pick-title b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Days left has its own line, so the statement of work's name keeps the width (the walk of 10 October 2026). */
.ts-pick-left { font-size: var(--t-small); color: var(--ink-500); }
.ts-pick-left.over { color: var(--danger); }
.ts-pick-sub { font-size: var(--t-small); color: var(--ink-500); }
.ts-pick .ts-bar { margin-top: 6px; height: 3px; }
.ts-lines { margin-top: 12px; }
.ts-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-chip { position: relative; display: inline-flex; }
.ts-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ts-chip > span, button.ts-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: var(--t-small); color: var(--ink-700); cursor: pointer; transition: background 120ms var(--ease), color 120ms var(--ease); }
button.ts-chip:hover, .ts-chip > span:hover { background: var(--surface-2); }
.ts-chip input:checked + span { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ts-chip input:focus-visible + span, button.ts-chip:focus-visible { box-shadow: var(--accent-ring); }
.ts-other-day { margin-top: 10px; max-width: 220px; }
.ts-days { display: flex; align-items: center; gap: 6px; }
.ts-days-input { width: 96px; text-align: center; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ts-step { font-size: 18px; width: 36px; }
.ts-clock { font-size: var(--t-small); margin-left: 6px; }
.ts-quick-chips, .ts-days + .ts-chips { margin-top: 10px; }
.ts-line-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.ts-line-foot .field-help.warn { color: var(--tone-due); }
.ts-entry-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 4px; }
/* The statement of work the entry goes to, read beside Save before it is pressed. */
.ts-entry-to { margin: 0; font-size: var(--t-small); font-weight: 500; color: var(--ink-700); overflow-wrap: anywhere; }
.ts-entry-to.none { font-weight: 400; color: var(--ink-500); }
.ts-entry-foot [data-ts-delete] { margin-left: auto; }
.ts-entry .field-error:empty { display: none; }

/* Approvals. */
.ts-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ts-filters .menu-btn { width: auto; min-width: 0; }
.split-list > .ts-filters, .split-list > .ts-lock-banner { margin: 16px 16px 0; }
.ts-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-small); color: var(--ink-700); cursor: pointer; }
.ts-check input { accent-color: var(--accent); }
.ts-custom { display: inline-flex; align-items: center; gap: 6px; }
.ts-custom[hidden] { display: none; }
.ts-custom .input { width: 150px; }
.ts-appr-row { display: flex; align-items: center; }
.ts-appr-row > .row { flex: 1; min-width: 0; }
.ts-appr-row .avatar { width: 34px; height: 34px; font-size: 12px; flex: none; }
.ts-row-action { flex: none; padding-right: 12px; }
.ts-list-group { font-size: var(--t-cap); font-weight: 600; color: var(--ink-500); padding: 16px 16px 6px; list-style: none; }
.ts-lock-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--row-soon); font-size: var(--t-small); flex-wrap: wrap; }
.ts-lock-banner span { display: inline-flex; align-items: center; gap: 8px; }
.ts-lock-banner svg { width: 14px; height: 14px; }
.ts-pane { padding: 22px 24px; display: grid; gap: 16px; }
.ts-pane-head { display: flex; align-items: center; gap: 12px; }
.ts-pane-head .avatar { width: 44px; height: 44px; font-size: 15px; flex: none; }
.ts-pane-head h2 { margin: 0; font-size: 18px; }
.ts-pane-head p { margin: 2px 0 0; font-size: var(--t-small); }
.ts-pane-back { display: none; }
.ts-pane-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ts-pane-list { margin: 0 -24px; border-top: 1px solid var(--line-soft); }
/* The pane's groups: Pending approval, Approved, and Unsubmitted apart, each with its days. */
.ts-pane-list > .ts-list-group { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 24px 6px; background: var(--surface-2); }
.ts-pane-list > .ts-list-group b { color: var(--ink-700); }
.ts-pane-list > .ts-pane-note { padding: 0 24px 8px; font-size: var(--t-small); background: var(--surface-2); border-top: 0; }
.ts-pane .ts-rail { border-top: 0; padding-top: 0; }
.ts-pane .ts-rail-day { cursor: default; }
.ts-mail { white-space: pre-wrap; font-family: var(--font); font-size: var(--t-small); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 16px; max-height: 260px; overflow: auto; margin: 0; }
.ts-chase-list { max-height: 220px; overflow: auto; }
.ts-check-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; cursor: pointer; }
.ts-check-row input { margin-top: 3px; accent-color: var(--accent); }

.ts-pane-summary { display: grid; justify-items: center; gap: 4px; }
.ts-pane-summary .tile { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 8px; }
.ts-pane-summary .tile svg { width: 20px; height: 20px; }
.ts-pane-summary .ts-big { font-size: 40px; line-height: 44px; color: var(--ink-900); }
.ts-pane-summary p { margin: 0; }
.ts-pane-summary .ts-pane-hint { margin-top: 10px; font-size: var(--t-small); }
.ts-appr-row .row { gap: 12px; }
.ts-appr-row:has(> .row[aria-selected="true"]) { background: var(--accent-soft); }
.ts-weekline { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.ts-pane-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 0; border-top: 1px solid var(--line); font-weight: 600; }
.ts-pane .ts-erow { padding: 12px 24px; }
.ts-months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ts-month { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface); }
.ts-month.locked { background: var(--surface-2); }
.ts-month-head { display: flex; align-items: center; gap: 6px; }
.ts-month-head svg { width: 13px; height: 13px; color: var(--ink-500); }
.ts-month-head b { font-weight: 600; }
.ts-month .state { font-size: var(--t-small); white-space: normal; }
.ts-month-action:empty { display: none; }
.ts-month-action { margin-top: 4px; }
.ts-month-action .btn { height: 30px; max-width: 100%; }

/* Team, capacity, a person. */
.ts-table td.num, .ts-table th.num { text-align: right; white-space: nowrap; }
.ts-table tr.ts-total td { font-weight: 600; border-top: 1px solid var(--line); }
.ts-table tr.ts-group td { font-size: var(--t-cap); font-weight: 600; color: var(--ink-500); padding-top: 18px; }
.ts-table tr.ts-childrow td { color: var(--ink-700); }
.ts-table .ts-child { padding-left: 16px; display: inline-block; }
.ts-table .row-link { color: inherit; text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; }
.ts-table .row-link:hover { color: var(--accent); }
.ts-table .row-link svg { width: 13px; height: 13px; color: var(--ink-500); }
.ts-person { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
a.ts-person:hover b { color: var(--accent); }
.ts-person .avatar { width: 34px; height: 34px; font-size: 12px; flex: none; }
.ts-person-main { display: grid; min-width: 0; }
.ts-person-main b { font-weight: 500; }
.card > .table-wrap, .card > .ts-card-head + .table-wrap { padding: 4px 24px 8px; }
@media (min-width: 768px) { .ts-table td:not(.w) { white-space: nowrap; } .ts-table td.w { min-width: 180px; } }
/* Team's status wraps rather than push the table past the page beside Assist's panel ("2 weeks outstanding"). */
@media (min-width: 768px) { .ts-team .ts-table td:nth-child(3) { white-space: normal; min-width: 96px; } .ts-team .ts-table td:nth-child(3) .state { white-space: normal; align-items: baseline; } }
.ts-stacked { display: flex; height: 8px; gap: 2px; min-width: 160px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.ts-stacked > span { display: block; height: 100%; }
.ts-c1 { background: var(--chart-1); fill: var(--chart-1); }
.ts-c2 { background: var(--chart-2); fill: var(--chart-2); }
.ts-c3 { background: var(--chart-3); fill: var(--chart-3); }
.ts-c4 { background: var(--chart-4); fill: var(--chart-4); }
.ts-s-approved { background: var(--live); fill: var(--live); }
.ts-s-pending { background: var(--accent); fill: var(--accent); }
.ts-s-unsub { background: var(--tone-due); fill: var(--tone-due); opacity: 0.75; }
.ts-table .row-link .ts-ctile { width: 28px; height: 28px; border-radius: 8px; font-size: 10px; }
.ts-key { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--t-small); color: var(--ink-700); }
.ts-key li { display: inline-flex; align-items: center; gap: 6px; }
.ts-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ts-bydays { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ts-bydays li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: var(--t-small); }
.ts-bydays b { text-align: right; }
.ts-daybar { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.ts-daybar > span { display: block; height: 100%; background: var(--live); border-radius: 4px; }
.ts-stats { margin-bottom: 0; }

/* Reports. */
.ts-summary { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-end; }
.ts-summary > div { display: grid; gap: 2px; }
.ts-summary b { font-size: 22px; line-height: 28px; font-weight: 600; }
.ts-chart { display: block; width: 100%; height: auto; margin-top: 8px; }
.ts-chart rect, .ts-chart text, .ts-chart line { stroke: none; }
.ts-chart text { font-family: var(--font); fill: var(--ink-500); font-size: 11px; font-variant-numeric: tabular-nums; }
.ts-chart .ts-grid-line { stroke: var(--line); stroke-width: 1; }
@media print {
  body:has(.ts-print) .hub-side, body:has(.ts-print) .app-side, body:has(.ts-print) .topbar, body:has(.ts-print) .ts-filters, body:has(.ts-print) .ts-export, body:has(.ts-print) .page-actions, body:has(.ts-print) .tabs { display: none !important; }
}

.tm-entries td.ts-wrap { white-space: normal; max-width: 460px; }
.tm-entries .row-sub { display: block; color: var(--ink-500); font-size: var(--t-small); white-space: normal; }
.tm-entries tbody td { height: auto; padding-top: 10px; padding-bottom: 10px; vertical-align: top; line-height: 20px; }
.tm-entries b { font-weight: 500; }
/* The Timesheet, as Upwork's: a header card, the figures, the Work diary (a calendar beside the week), approved time. */
.up-page { display: grid; gap: var(--gap); }
/* The page's gap does the spacing, as on every other Timesheets page; nothing in it adds its own. */
.up-page > * { margin-top: 0; margin-bottom: 0; }
.up-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.up-head { position: relative; padding: 24px 28px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.up-crumb { display: inline-flex; align-items: center; gap: 4px; margin: -8px 0 10px -4px; color: var(--ink-500); font-size: var(--t-small); text-decoration: none; }
.up-crumb svg { width: 14px; height: 14px; }
.up-crumb:hover { color: var(--ink-900); }
.up-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.up-title { margin: 0; font-size: 26px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-900); }
.up-head-actions { display: flex; gap: 8px; }
.up-who { display: flex; align-items: center; gap: 12px; margin: 16px 0 18px; }
.up-who .avatar { width: 44px; height: 44px; font-size: 15px; }
.up-who b { display: block; font-size: var(--t-ui); font-weight: 600; color: var(--ink-900); }
.up-who span { font-size: var(--t-small); color: var(--ink-500); }
.up-tabs { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.up-tabs::-webkit-scrollbar { display: none; }
.up-tab { white-space: nowrap; flex: none; }
.up-tab { position: relative; padding: 0 0 12px; font-size: var(--t-body, 14px); font-weight: 500; color: var(--ink-600, var(--ink-500)); text-decoration: none; }
.up-tab:hover { color: var(--ink-900); }
.up-tab[aria-current="page"] { color: var(--ink-900); }
.up-tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--live); }
.up-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 20px 28px; gap: 16px; }
.up-figs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.up-fig { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: inherit; text-decoration: none; border-radius: 8px; }
a.up-fig:hover .up-fig-value { color: var(--accent); }
.up-fig-label { font-size: var(--t-ui); font-weight: 500; color: var(--ink-900); }
.up-fig-value { font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-900); white-space: nowrap; }
.up-fig-sub { font-size: var(--t-small); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-h2 { margin: 8px 0 0; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-900); }
.up-diary { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px; align-items: start; }
.up-cal { padding: 18px 16px 14px; }
.up-cal-head { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 10px; }
.up-cal-head b { font-size: var(--t-body, 14px); font-weight: 600; color: var(--ink-900); }
.up-cal-step { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 14px; color: var(--ink-500); }
.up-cal-step:hover { background: var(--surface-2); color: var(--ink-900); }
.up-cal-step svg { width: 16px; height: 16px; }
.up-cal-grid { width: 100%; border-collapse: separate; border-spacing: 0 6px; table-layout: fixed; }
.up-cal-grid th { font-size: var(--t-cap); font-weight: 600; color: var(--ink-900); text-align: center; padding-bottom: 2px; }
.up-cal-grid td { padding: 0; text-align: center; }
.up-cal-grid tr.on td { background: var(--surface-2); }
.up-cal-grid tr.on td:first-child { border-radius: 18px 0 0 18px; }
.up-cal-grid tr.on td:last-child { border-radius: 0 18px 18px 0; }
.up-day { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 18px; color: var(--ink-900); text-decoration: none; font-size: var(--t-small); }
.up-day:hover { background: color-mix(in srgb, var(--ink-900) 6%, transparent); }
.up-day:focus-visible { outline: none; box-shadow: var(--accent-ring); }
.up-cal-grid tr.on td:first-child .up-day, .up-cal-grid tr.on td:last-child .up-day { background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-seg); }
.up-day.out, .up-day.future { color: var(--ink-400); }
.up-day.today > span { font-weight: 700; color: var(--accent); }
.up-day .up-mark { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); }
.up-mark { display: inline-block; width: 6px; height: 6px; flex: none; }
.up-mark.big { width: 10px; height: 10px; }
.up-mark.logged { border-radius: 50%; background: var(--live); }
.up-mark.imported { width: 8px; height: 7px; background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.up-mark.imported.big { width: 12px; height: 10px; }
.up-mark.missing { border-radius: 1px; background: var(--tone-due); }
.up-mark.over { border-radius: 1px; background: var(--danger); }
.up-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 6px 0 0; font-size: var(--t-cap); font-weight: 500; color: var(--ink-600, var(--ink-500)); }
.up-key > span { display: inline-flex; align-items: center; gap: 6px; }
.up-week-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 40px; margin-bottom: 12px; }
.up-week-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--t-small); }
.up-week-title h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-900); }
.up-week-actions { display: flex; gap: 8px; }
.up-add { border-radius: 999px; padding: 0 16px; height: 36px; }
.up-wdays { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.up-wdays > li { border-bottom: 1px solid var(--line); }
.up-wday { display: grid; grid-template-columns: 150px minmax(0, 1fr) 80px; align-items: center; gap: 24px; height: 52px; padding: 0 10px; color: var(--ink-900); text-decoration: none; border-radius: 8px; }
.up-wday:hover { background: var(--surface-2); }
.up-wday:focus-visible { outline: none; box-shadow: inset var(--accent-ring); }
.up-wday-name { display: flex; align-items: baseline; gap: 6px; font-size: var(--t-ui); min-width: 0; }
.up-wday-name b { font-weight: 500; }
.up-wday.today .up-wday-name { font-weight: 600; }
.up-wday.today .up-wday-name b { font-weight: 600; }
.up-wday.quiet .up-wday-name, .up-wday.quiet .up-wday-e { color: var(--ink-500); }
.up-wday-note { margin-left: 4px; font-size: var(--t-cap); color: var(--ink-500); white-space: nowrap; }
.up-wday.missing .up-wday-note { color: var(--tone-due); }
.up-bar { display: block; height: 8px; border-radius: 4px; background: var(--viz-track); overflow: hidden; }
.up-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--live); }
.up-bar.over > span { background: var(--danger); }
.up-wday-e { text-align: right; font-size: var(--t-ui); white-space: nowrap; }
.up-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(170px, 1.3fr); gap: 16px; align-items: center; margin-top: 20px; }
.up-stat { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: center; }
.up-stat-label { font-size: var(--t-ui); font-weight: 500; color: var(--ink-900); }
.up-stat b { grid-column: 2; white-space: nowrap; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink-900); }
.up-stat.quiet b { color: var(--ink-400); }
.up-total { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 12px; background: var(--surface-2); }
.up-total b { white-space: nowrap; font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-900); }
.up-total-sub { font-size: var(--t-small); color: var(--ink-500); }
.up-head.no-tabs { padding-bottom: 6px; }
/* The same card on every other Timesheets page: its title and its actions, the page below. */
.up-head.up-head-page { padding: 24px 28px; margin-bottom: var(--gap); }
.up-head-page .up-head-top { align-items: center; flex-wrap: wrap; }
.up-head-page .up-title { font-size: 26px; line-height: 34px; }
.up-head-page .up-head-actions { flex-wrap: wrap; align-items: center; }
.up-head-sub { margin-top: 8px; }
.up-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--t-ui); color: var(--ink-500); }
.up-fig.late .up-fig-value { color: var(--tone-due); }
.up-head-page .up-title { overflow-wrap: anywhere; }
.up-count { margin-left: 10px; font-size: 18px; font-weight: 500; color: var(--ink-400); }
.up-figs .up-fig-sub.due { color: var(--tone-due); }
.ts-page > .up-figs, .ts-page > .up-head { margin-bottom: 0; }
@media (max-width: 767px) { .up-tabs { gap: 20px; } .up-head.up-head-page { padding: 18px 16px; } .up-head-page .up-title { font-size: 22px; line-height: 28px; } .up-head-page .up-head-actions { width: 100%; } }
.up-month { display: grid; gap: var(--gap); }
.up-month > * { margin: 0 !important; }
.up-standing { font-size: var(--t-ui); }
.up-standing .state { white-space: normal; align-items: baseline; }
.up-fig-sub.due { color: var(--tone-due); }
.up-table { border-radius: 16px; }
.up-table .crm-table tbody th { white-space: normal; }
.up-table .row-sub { display: block; color: var(--ink-500); font-size: var(--t-small); }
.up-entries > summary + * { margin-top: 0; }
.up-entries > summary { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--gap); font-size: var(--t-ui); font-weight: 500; color: var(--ink-900); cursor: pointer; list-style: none; }
.up-entries > summary::-webkit-details-marker { display: none; }
.up-entries > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 150ms var(--ease); }
.up-entries[open] > summary::before { transform: rotate(45deg); }
/* Add time, as Upwork's Add manual time: one dialog, two columns of fields, Cancel and Save. */
.dialog.tsa-dialog { width: min(640px, calc(100vw - 32px)); padding: 28px 28px 22px; border-radius: 16px; }
.tsa-top { display: flex; align-items: center; justify-content: space-between; margin: -4px -8px 14px 0; }
.tsa-top h2 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.015em; }
.tsa-sow { margin-bottom: 14px !important; }
.tsa-sow .menu-btn .menu-label { white-space: normal; text-align: left; line-height: 18px; }
.tsa-sow .menu-btn { height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.tsa-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: end; }
.tsa .field { margin: 0; }
.tsa .field > label, .tsa .ts-sublabel { display: block; margin-bottom: 6px; font-size: var(--t-ui); font-weight: 600; color: var(--ink-900); }
.tsa .input, .tsa .menu-btn { width: 100%; height: 40px; }
.tsa-days { margin-top: 14px !important; }
.tsa-days-row { display: flex; align-items: center; gap: 12px; }
.tsa-days-row .input { width: 120px; flex: none; }
.tsa-days-row .muted { font-size: var(--t-small); }
.tsa .textarea { width: 100%; min-height: 104px; resize: vertical; }
.tsa .field + .field { margin-top: 14px; }
.tsa-count { display: block; margin-top: 6px; text-align: right; font-size: var(--t-cap); color: var(--ink-500); }
.tsa-note { margin: 10px 0 0; font-size: var(--t-small); color: var(--ink-500); }
.tsa-error { margin: 10px 0 0; font-size: var(--t-small); color: var(--tone-due); }
.tsa .dialog-actions { margin-top: 20px; }
.tsa-day { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.tsa-day-head { margin: 0 0 6px; font-size: var(--t-cap); font-weight: 600; color: var(--ink-500); }
.tsa-day ul { list-style: none; margin: 0; padding: 0; }
.tsa-e { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; padding: 6px 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; }
button.tsa-e { cursor: pointer; }
button.tsa-e:hover .tsa-e-edit { text-decoration: underline; }
.tsa-day li + li .tsa-e { border-top: 1px solid var(--line-soft); }
.tsa-e-main { display: flex; flex-direction: column; min-width: 0; }
.tsa-e-main b { font-size: var(--t-small); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsa-e-main span { font-size: var(--t-cap); color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsa-e-days { font-size: var(--t-small); font-weight: 600; }
.tsa-e-edit { font-size: var(--t-cap); color: var(--accent); }
.up-wday { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
div.up-wday { cursor: default; }
div.up-wday:hover { background: none; }
@media (max-width: 767px) {
  /* On a phone, a sheet from the bottom that scrolls in itself, as the Hub's other sheets do. */
  .dialog.tsa-dialog { top: auto; bottom: 0; left: 0; transform: none; width: 100%; max-height: calc(100dvh - 24px); overflow-y: auto;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; animation-name: rise; }
  .tsa .input { min-width: 0; }
  .tsa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tsa-grid .field:first-child { grid-column: 1 / -1; }
  .tsa-days-row { flex-wrap: wrap; }
}
@media (max-width: 1100px) { .up-diary { grid-template-columns: minmax(0, 1fr); gap: 24px; } .up-cal { max-width: 420px; } }
@media (max-width: 767px) {
  .up-head { padding: 18px 16px 0; border-radius: 14px; }
  .up-title { font-size: 22px; line-height: 28px; }
  .up-who { margin: 14px 0 16px; }
  .up-who .avatar { width: 44px; height: 44px; }
  .up-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 16px; row-gap: 20px; border-radius: 14px; }
  .up-figs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .up-fig-value { font-size: 18px; line-height: 26px; }
  .up-figs.three .up-fig-value { font-size: 17px; }
  .up-h2 { font-size: 17px; }
  .up-cal { max-width: none; }
  .up-day { width: 34px; height: 34px; }
  .up-wday { grid-template-columns: 116px minmax(0, 1fr) auto; gap: 12px; height: 56px; padding: 0 4px; }
  .up-week-actions .up-add { display: none; }
  .up-wday-note { display: none; }
  .up-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .up-total { grid-column: 1 / -1; }
  .up-stat { grid-template-columns: auto 1fr; }
  .up-stat b { font-size: 17px; }
}

/* Reports, as a report: the header card carries the range and the tabs; filters on one line; one summary card (the
   total, its state as one bar, the parts, the weeks); then where the days went, each line with its share. */
.up-head-tabs { margin-top: 18px; }
.up-head-page:has(.up-head-tabs) { padding-bottom: 0; }
.rp-page .ts-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent); mask-image: linear-gradient(to right, black calc(100% - 40px), transparent); padding-right: 40px; }
.rp-page .ts-filters::-webkit-scrollbar { display: none; }
.rp-page .ts-filters > * { flex: none; }
.rp-summary { padding: 24px 28px; display: grid; gap: 16px; }
.rp-total { display: flex; flex-direction: column; gap: 2px; }
.rp-total-label { font-size: var(--t-ui); font-weight: 500; color: var(--ink-500); }
.rp-total-value { font-size: var(--t-body, 14px); color: var(--ink-500); }
.rp-total-value b { font-size: 34px; line-height: 42px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-900); }
.rp-total-sub { font-size: var(--t-small); color: var(--ink-500); }
.rp-bar { display: flex; gap: 2px; height: 10px; border-radius: 5px; background: var(--viz-track); overflow: hidden; }
.rp-bar > span { display: block; height: 100%; }
.rp-bar .approved, .rp-part i.approved { background: var(--live); }
.rp-bar .pending, .rp-part i.pending { background: var(--accent); }
.rp-bar .unsub, .rp-part i.unsub { background: var(--tone-due); }
.rp-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rp-part { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; margin: -8px -10px; border-radius: 10px; color: inherit; text-decoration: none; }
.rp-part:hover { background: var(--surface-2); }
.rp-part i { width: 10px; height: 10px; border-radius: 3px; }
.rp-part-label { font-size: var(--t-small); color: var(--ink-500); }
.rp-part b { grid-column: 2; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink-900); }
.rp-part-pc { grid-column: 2; font-size: var(--t-cap); color: var(--ink-500); }
.rp-chart { padding-top: 14px; border-top: 1px solid var(--line-soft); }
.rp-chart h3 { margin: 0 0 6px; font-size: var(--t-small); font-weight: 500; color: var(--ink-500); }
.rp-chart .ts-chart { max-height: 200px; }
.rp-chart .ts-chart text { font-size: 11px; fill: var(--ink-500); }
.rp-section { display: grid; gap: 12px; }
.rp-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rp-section-head .ts-export { display: flex; align-items: center; gap: 2px; }
.rp-table tbody th { white-space: normal; font-weight: 400; }
.rp-row-link { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.rp-name { display: flex; flex-direction: column; min-width: 0; }
.rp-name b { font-weight: 500; }
.rp-sub { font-size: var(--t-small); color: var(--ink-500); }
.rp-table td.rp-share { width: 32%; min-width: 140px; }
.rp-table td.rp-share .rp-bar { height: 8px; }
.rp-pc { color: var(--ink-500); font-size: var(--t-cap); }
.rp-table tr.rp-child th { padding-left: 34px; }
.rp-table tr.rp-child .rp-name b { font-weight: 400; }
.rp-table tfoot th, .rp-table tfoot td { height: 44px; padding: 0 12px; border-top: 1px solid var(--line); font-weight: 600; }
.rp-table tfoot th { text-align: left; }
@media (max-width: 767px) {
  .rp-summary { padding: 18px 16px; }
  .rp-total-value b { font-size: 28px; line-height: 34px; }
  .rp-parts { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rp-part { grid-template-columns: auto 1fr auto auto; column-gap: 10px; margin: 0 -10px; }
  .rp-part b, .rp-part-pc { grid-column: auto; }
  .rp-table td.rp-share { display: none; }
  .rp-table tfoot { display: none; }
}

/* Import, settings, Profile. */
.ts-import { display: grid; gap: 16px; }
/* Import, the file first: a dropzone that is the page's one action, then Past imports as CRM's table. */
.ts-drop { padding: 44px 20px; margin: 0 0 8px; background: var(--surface); }
.ts-drop[aria-busy="true"] { opacity: .6; pointer-events: none; }
.ts-drop .cap { color: var(--ink-500); }
/* A batch: its rows grouped To settle, Blocked, Ready, Skipped; words wrap, dates and days don't. */
.ts-batch-group { margin-bottom: 0; }
.ts-batch-group .card-head { padding: 16px 20px 4px; gap: 8px; justify-content: flex-start; }
.ts-batch-rows tbody td { height: auto; padding-top: 11px; padding-bottom: 11px; line-height: 20px; vertical-align: top; }
.ts-batch-rows { table-layout: fixed; min-width: 760px; }
.ts-batch-rows .ts-c-row { width: 56px; } .ts-batch-rows .ts-c-date { width: 112px; } .ts-batch-rows .ts-c-days { width: 72px; }
.ts-batch-rows .ts-c-sow { width: 230px; } .ts-batch-rows .ts-c-settle { width: 140px; }
.ts-batch-rows td.ts-settle .menu-btn { width: auto; min-width: 0; max-width: none; }
.ts-batch-rows td.ts-wrap { white-space: normal; max-width: none; }
.ts-batch-rows .ts-nowrap { white-space: nowrap; }
.ts-batch-rows td.ts-settle { white-space: nowrap; vertical-align: top; padding-top: 5px; padding-bottom: 5px; text-align: right; overflow: visible; }
.ts-batch-rows .row-sub { display: block; color: var(--ink-500); font-size: var(--t-small); line-height: 18px; }
.ts-batch-rows .ts-why { display: block; margin-top: 2px; color: var(--tone-due); font-size: var(--t-small); line-height: 18px; }
.ts-warn-word { color: var(--tone-due); }
@media (max-width: 767px) {
  /* A batch row on a phone, as one card: the day and its days, what was done and why, the statement of work, then Settle. */
  .ts-drop { padding: 32px 16px; }
  .ts-batch-group .card-head { padding: 14px 16px 2px; }
  .ts-batch-rows { table-layout: auto; min-width: 0; }
  .ts-batch-rows colgroup { display: none; }
  .ts-batch-rows tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date days" "what what" "sow sow" "settle settle"; gap: 4px 12px; padding: 14px 0; }
  .ts-batch-rows tbody td { display: block; padding: 0; line-height: 20px; }
  .ts-batch-rows tbody td:nth-child(1) { display: none; }
  .ts-batch-rows tbody td:nth-child(2) { grid-area: date; font-weight: 500; color: var(--ink-900); }
  .ts-batch-rows tbody td:nth-child(3) { grid-area: what; font-size: var(--t-ui); }
  .ts-batch-rows tbody td:nth-child(4) { grid-area: days; text-align: right; }
  .ts-batch-rows tbody td:nth-child(5) { grid-area: sow; color: var(--ink-500); }
  .ts-batch-rows tbody td.ts-settle { display: block; grid-area: settle; text-align: left; padding: 6px 0 0; }
  .ts-batch-rows tbody td.ts-settle:empty { display: none; }
}
.ts-two-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ts-subhead { margin-top: 12px; }
.ts-settings .field { display: grid; grid-template-columns: minmax(0, 1fr) 220px; grid-template-areas: "label control" "help control"; column-gap: 40px; row-gap: 2px; align-items: center; padding: 16px 0; margin: 0; border-top: 1px solid var(--line-soft); }
.ts-settings .field > label { grid-area: label; margin: 0; }
.ts-settings .field > .input, .ts-settings .field > .menu-btn { grid-area: control; width: 100%; }
.ts-settings .field > .field-help { grid-area: help; margin: 0; max-width: 62ch; }
.ts-settings .card-head + .field { border-top: 0; }
.ts-settings .ts-subhead { margin-top: 20px; }
.ts-weekdays { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ts-wd { position: relative; display: inline-flex; }
.ts-wd input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ts-wd span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 30px; border-radius: 8px; border: 1px solid var(--line); font-size: var(--t-small); color: var(--ink-500); cursor: pointer; }
.ts-wd input:checked + span { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ts-wd input:focus-visible + span { box-shadow: var(--accent-ring); }
.ts-prefs { display: grid; gap: 14px; }
.ts-pref { display: flex; gap: 12px; align-items: flex-start; }
.ts-pref b { font-weight: 500; }
.ts-pref-hour { display: flex; align-items: center; gap: 8px; padding-left: 48px; }
.ts-pref-hour[hidden] { display: none; }
.ts-pref-hour .input { width: 80px; }

@media (max-width: 1100px) { .ts-daygrid { grid-template-columns: minmax(0, 1fr); } .ts-oneline { grid-template-columns: minmax(0, 1fr) 76px; } .ts-oneline-line { grid-column: 1 / -1; } .ts-oneline .btn { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .page-actions:has(> .ts-actions) { flex: 1 1 100%; margin-left: 0; min-width: 0; }
  .ts-actions { justify-content: space-between; width: 100%; }
  .ts-actions .ts-return, .ts-hide-phone { display: none !important; }
  .ts-long { display: none; }
  .ts-short { display: inline; }
  .ts-two, .ts-two-fields { grid-template-columns: minmax(0, 1fr); }
  .ts-settings .field { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "control" "help"; row-gap: 6px; }
  .ts-weekcard { padding: 16px; gap: 14px; }
  .ts-weekcard-top { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ts-weekcard-action { max-width: none; text-align: center; }
  .ts-weekcard-action { margin-left: 0; width: 100%; justify-items: stretch; }
  .ts-weekcard-action .btn { height: 44px; justify-content: center; }
  .ts-weekcard-action .ts-hint { justify-content: center; }
  .ts-rail { gap: 2px; padding-top: 10px; }
  .ts-rail-day { padding: 6px 0 8px; }
  .ts-rail-date { font-size: 15px; }
  .ts-daycard-head { padding: 16px 16px 10px; }
  .ts-erow { padding: 12px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: start; }
  .ts-erow > .ts-ctile { grid-row: 1 / span 2; }
  .ts-erow-main { grid-column: 2; grid-row: 1; }
  .ts-erow-days { display: contents; }
  .ts-erow-days > :first-child { grid-column: 3; grid-row: 1; justify-self: end; }
  .ts-erow-days > .ts-typed { grid-column: 3; grid-row: 2; justify-self: end; }
  .ts-erow-days > .state { grid-column: 2; grid-row: 2; font-size: var(--t-cap); color: var(--ink-500); }
  .ts-pane-actions .btn { flex: 1 1 auto; justify-content: center; }
  .ts-ctile { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
  .ts-empty { padding: 18px 16px; }
  .ts-side { padding: 16px; }
  .ts-fab { display: flex; position: sticky; bottom: calc(var(--tabs, 64px) + 10px); z-index: 3; height: 48px; justify-content: center; border-radius: 14px; box-shadow: var(--shadow-float); }
  .ts-grid-wrap, .ts-grid-key { display: none; }
  .ts-week-phone { display: block; padding: 0 0 12px; }
  .ts-new-page { padding: 16px; border-radius: 0; border-left: 0; border-right: 0; margin: 0 calc(-1 * var(--gutter)); }
  .ts-days-input { font-size: 20px; height: 44px; width: 110px; }
  .ts-step { width: 44px; height: 44px; }
  .ts-chip > span, button.ts-chip { height: 40px; padding: 0 14px; }
  .ts-entry textarea { font-size: 16px; }
  .ts-picks { max-height: none; }
  .ts-pick-title { flex-wrap: wrap; row-gap: 2px; }
  .ts-pick-title b { white-space: normal; }
  /* Save entry ends the form, after What you did, the last thing filled in. It is not sticky: a sticky bar sat over the Days chips
     while they were on screen (the walk of 10 October), and a tap meant for 0.5 pressed the bar. */
  .ts-entry-page .ts-entry-foot { padding: 8px 0 4px; }
  .ts-entry-page .ts-entry-foot .btn-primary { flex: 1; height: 44px; justify-content: center; }
  .ts-pane { padding: 16px; }
  .ts-pane-back { display: inline-flex; }
  .ts-pane-list { margin: 0 -16px; }
  .ts-pane-list > .ts-list-group, .ts-pane-list > .ts-pane-note { padding-left: 16px; padding-right: 16px; }
  .ts-row-action { display: none; }
  .ts-months { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ts-month { padding: 12px; min-width: 0; }
  .ts-month-action .btn { width: 100%; justify-content: center; padding: 0 8px; }
  .ts-table.stack tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
  .ts-table.stack td { flex: 0 0 auto; max-width: 100%; white-space: normal; }
  .ts-table.stack td:first-child, .ts-table.stack td.w { flex: 1 1 100%; }
  .ts-table.stack td:not(:first-child)[data-label]:not([data-label=""])::before { content: attr(data-label); color: var(--ink-500); font-size: var(--t-small); margin-right: 6px; }
  .ts-table.stack td:has(> .state)::before, .ts-table.stack td:has(> .ts-stacked)::before { content: none !important; }
  .ts-table.stack td:empty { display: none; }
  .ts-stacked { min-width: 0; flex: 1 1 100%; }
  .ts-summary { gap: 16px; }
  .ts-toolbar .ts-export { margin-left: 0; }
  .ts-custom .input { width: 130px; }
}

/* ---------------------------------------------------------------- Mail --- */
/* Mail's own (src/mail/web): the reference Mail's screens in BMS's tokens
   (docs/ledgers/mail.md). Every rule is under an ml- class, so nothing here
   reaches another app's page. One app bar, then the list and the reading
   pane; the rail is Mail's sidebar in the frame. */
[data-mail]{ height: calc(100dvh - var(--top) - var(--bar, 0px)); display: flex; flex-direction: column; background: var(--surface); color: var(--ink-900); min-width: 0; }
[data-mail] svg, .ml-menu svg, .ml-bulk svg, #ml-undo svg, .ml-cp svg, .ml-newwin svg, .ml-fpick svg, .ml-people svg{ width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-mail] summary{ list-style: none; }
[data-mail] summary::-webkit-details-marker{ display: none; }
.ml-grow{ flex: 1 1 auto; min-width: 0; }
.ml-quiet{ color: var(--ink-500); font-size: var(--t-cap); }
[data-mail] kbd.ml-k{ margin-left: 6px; }

/* buttons: one family, three weights */
.ml-btn{ display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-900); font: inherit; font-size: var(--t-small); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease); }
.ml-btn:hover{ background: var(--surface-2); border-color: var(--ink-400); }
.ml-btn.primary{ background: var(--accent); border-color: var(--accent); color: var(--on-dark); }
.ml-btn.primary:hover{ background: var(--accent-hover); border-color: var(--accent-hover); }
.ml-btn.ghost{ border-color: transparent; background: transparent; color: var(--ink-700); }
.ml-btn.ghost:hover{ background: var(--hover); color: var(--ink-900); }
.ml-btn.sm{ height: 28px; padding: 0 10px; }
.ml-btn[disabled]{ opacity: .5; cursor: not-allowed; }
.ml-btn kbd{ margin-left: 2px; }
.ml-btn.primary kbd{ background: transparent; border-color: var(--on-dark); color: var(--on-dark); opacity: .8; }
.ml-iconbtn{ display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-control); border: 1px solid transparent; background: transparent;
  color: var(--ink-700); cursor: pointer; padding: 0; transition: background 120ms var(--ease), color 120ms var(--ease); }
.ml-iconbtn:hover{ background: var(--hover); color: var(--ink-900); }
.ml-iconbtn.sm{ width: 28px; height: 28px; }

/* menus and popovers: one look */
.ml-menuwrap{ position: relative; display: inline-flex; }
.ml-menu{ position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 190px; max-width: calc(100vw - 16px); padding: 4px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-control); box-shadow: var(--shadow-float); display: flex; flex-direction: column; }
.ml-menu[hidden]{ display: none; }
.ml-menu.up{ top: auto; bottom: calc(100% + 4px); max-height: 50vh; overflow: auto; }
.ml-menuwrap.r .ml-menu{ left: auto; right: 0; }
.ml-menu a, .ml-menu button.mi{ display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; border-radius: 6px; font: inherit; font-size: var(--t-small);
  color: var(--ink-700); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; white-space: nowrap; width: 100%; }
.ml-menu a:hover, .ml-menu button.mi:hover{ background: var(--hover); color: var(--ink-900); }
.ml-menu a.on{ color: var(--accent); font-weight: 600; }
.ml-menu a em, .ml-menu button.mi em{ margin-left: auto; font-style: normal; color: var(--ink-400); font-size: 11px; }
.ml-menu .sep{ height: 1px; background: var(--line-soft); margin: 4px 6px; }
.ml-menu .mh{ font-size: 11px; font-weight: 600; color: var(--ink-400); padding: 6px 10px 2px; }
.ml-menu label.pick{ display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; font-size: 11px; color: var(--ink-500); }
.ml-menu label.pick input{ font: inherit; font-size: var(--t-small); padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-900); background: var(--surface); }
.ml-menu .mi .mix{ margin-left: 6px; opacity: 0; color: var(--ink-400); display: inline-grid; place-items: center; }
.ml-menu .mi:hover .mix{ opacity: 1; }
.ml-menu .mi .mix:hover{ color: var(--danger); }
.ml-menuempty{ padding: 10px; color: var(--ink-500); font-size: 11px; text-align: center; }
.ml-ctx{ position: fixed; z-index: 70; }

/* the app bar: one line, three groups on one axis; the search takes the middle and gives way first */
.ml-bar{ display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line-soft); flex: none; background: var(--surface); }
.ml-barl{ display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
.ml-barr{ display: flex; align-items: center; gap: 6px; flex: none; }
.ml-h1{ margin: 0; font-size: var(--t-h); font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-fresh{ display: none; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-500); white-space: nowrap; }
.ml-fresh.on{ display: inline-flex; }
.ml-fresh::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.ml-fresh.stale{ color: var(--tone-due); }
.ml-fresh.stale::before{ background: var(--tone-due); }
.ml-searchform{ flex: 1 1 auto; min-width: 0; max-width: 620px; margin: 0 auto; }
.ml-search{ position: relative; display: flex; align-items: center; width: 100%; }
.ml-search > svg{ position: absolute; left: 12px; color: var(--ink-400); pointer-events: none; }
.ml-search input{ width: 100%; height: 36px; padding: 0 56px 0 34px; border: 1px solid var(--line); border-radius: var(--r-pill); font: inherit; font-size: var(--t-small);
  background: var(--surface-2); color: var(--ink-900); outline: none; transition: background 120ms var(--ease), border-color 120ms var(--ease); }
.ml-search input:hover{ background: var(--surface); }
.ml-search input:focus{ background: var(--surface); border-color: var(--accent); box-shadow: var(--accent-ring); }
.ml-search input::placeholder{ color: var(--ink-500); }
.ml-search kbd.ml-k{ position: absolute; right: 10px; margin: 0; pointer-events: none; }
.ml-search input:focus ~ kbd.ml-k, .ml-search input:not(:placeholder-shown) ~ kbd.ml-k{ display: none; }
.ml-searchx{ position: absolute; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--ink-500); cursor: pointer; }
.ml-searchx:hover{ background: var(--hover); color: var(--ink-900); }
.ml-searchx[hidden]{ display: none; }
.ml-list.busy, .ml-pane.busy{ opacity: .55; transition: opacity 120ms var(--ease); }
.ml-notice{ display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: var(--t-small); color: var(--ink-700); background: var(--row-soon); border-bottom: 1px solid var(--line-soft); flex: none; }

/* the two panes beside the rail */
.ml-panes{ flex: 1; min-height: 0; display: grid; grid-template-columns: 384px minmax(0, 1fr); }
.ml-list{ overflow-y: auto; border-right: 1px solid var(--line-soft); background: var(--surface); min-width: 0; }
.ml-pane{ position: relative; overflow: hidden; background: var(--canvas); display: flex; flex-direction: column; min-width: 0; }

/* the rail, in the frame: Needs review is the one loud number, and a row can be dropped on a client */
body:has([data-mail]) .app-side a.app-item[href="/mail?view=review"] .count{ background: var(--accent); color: var(--on-dark); font-weight: 700; border-radius: var(--r-pill); padding: 0 7px; line-height: 18px; }
body:has([data-mail]) .app-side a.app-item.ml-over{ background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
/* The Hub's layers over Mail's own (the rules at 85, the palette at 90): the scrim, then the dialog or sheet on it, then a menu opened from either */
body:has([data-mail]) .scrim { z-index: 94 !important; }
body:has([data-mail]) .dialog, body:has([data-mail]) .sheet { z-index: 95 !important; }
body:has([data-mail]) .menu-pop { z-index: 96 !important; }

/* the list */
.ml-listhead{ position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 10px; border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.ml-filter{ position: relative; }
.ml-filter > summary{ display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: 6px; font-size: var(--t-small); font-weight: 600; color: var(--ink-900); cursor: pointer; }
.ml-filter > summary:hover{ background: var(--hover); }
.ml-filter > summary svg{ color: var(--ink-400); }
.ml-filter .ml-menu{ top: calc(100% + 4px); }
.ml-menu button.mi.danger{ color: var(--danger); }
.ml-menu button.mi.danger .ml-quiet{ color: var(--ink-400); font-weight: 400; }
.ml-notedel{ margin-left: 6px; border: 0; background: none; padding: 2px; border-radius: 4px; color: var(--ink-400); cursor: pointer; vertical-align: middle; }
.ml-notedel:hover{ background: var(--hover); color: var(--danger); }
.ml-notedel svg{ width: 13px; height: 13px; }
.ml-menuh{ display: block; padding: 8px 10px 4px; font-size: 11px; font-weight: 600; color: var(--ink-400); border-top: 1px solid var(--line-soft); margin-top: 4px; }
.ml-menu-long{ max-height: min(60vh, 420px); overflow: auto; }
.ml-fw{ max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-count{ font-size: var(--t-small); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ml-crumb{ display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: var(--t-small); color: var(--ink-700); border-bottom: 1px solid var(--line-soft); background: var(--surface-2); flex-wrap: wrap; }
.ml-crumb svg{ color: var(--ink-400); }
.ml-crumb b{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ml-crumb a{ color: var(--accent); text-decoration: none; margin-left: auto; white-space: nowrap; }
.ml-crumb a + a{ margin-left: 12px; }
.ml-chips{ display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.ml-chip{ display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; color: var(--ink-700);
  background: var(--plain-bg); text-decoration: none; white-space: nowrap; max-width: 100%; border: 0; font-family: inherit; }
.ml-chip svg{ width: 12px; height: 12px; color: var(--ink-400); }
a.ml-chip:hover, button.ml-chip:hover{ background: var(--accent-soft); color: var(--accent); cursor: pointer; }
.ml-chip i{ width: 6px; height: 6px; border-radius: 50%; background: var(--ink-400); flex: none; }
.ml-chip i.work{ background: var(--accent); }
.ml-chip .lbl{ overflow: hidden; text-overflow: ellipsis; }
.ml-chip.folder{ background: var(--tint-mail-bg); color: var(--tint-mail-fg); }
.ml-chip.folder svg{ color: var(--tint-mail-fg); }
.ml-chip.done{ background: var(--green-bg); color: var(--live); }
.ml-chip.later{ background: var(--indigo-bg); color: var(--indigo-fg); }
.ml-chip.due{ background: var(--row-risk); color: var(--row-risk-ink); }
.ml-chip.nhs{ background: var(--rose-bg); color: var(--rose-fg); }
.ml-chip.act{ cursor: pointer; }
.ml-bucket{ position: sticky; top: 40px; z-index: 2; display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; font-size: 11px; font-weight: 600; color: var(--ink-500); background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.ml-bucket.pin{ color: var(--accent); }
.ml-bucket svg{ width: 12px; height: 12px; }
.ml-empty{ padding: 40px 24px; text-align: center; color: var(--ink-500); font-size: var(--t-small); line-height: 1.6; }
.ml-empty b{ display: block; color: var(--ink-900); font-size: var(--t-ui); margin-bottom: 4px; }
.ml-empty a{ color: var(--accent); }
.ml-zero{ padding: 56px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ml-zero svg{ width: 30px; height: 30px; color: var(--live); margin-bottom: 4px; }
.ml-zero b{ font-size: var(--t-h); font-weight: 650; }
.ml-zero span{ color: var(--ink-500); font-size: var(--t-small); max-width: 36ch; line-height: 1.55; }
.ml-pickempty{ display: grid; place-items: center; height: 100%; padding: 40px 24px; }

/* the row: the dot, the face, three lines, the time at the right edge; the selected row carries the only coloured edge */
.ml-row{ position: relative; display: flex; gap: 10px; padding: 10px 12px 10px 8px; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--ink-900); transition: background 120ms var(--ease); }
.ml-row:hover{ background: var(--surface-2); }
.ml-row.on{ background: var(--canvas); }
.ml-row.on::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.ml-row.kbd{ box-shadow: inset 0 0 0 2px var(--accent-soft); }
.ml-row.sel{ background: var(--accent-soft); }
.ml-row[hidden]{ display: none; }
.ml-rgut{ width: 8px; flex: none; display: flex; align-items: flex-start; padding-top: 12px; }
.ml-udot{ width: 7px; height: 7px; border-radius: 50%; background: var(--accent); visibility: hidden; }
.ml-row.unread .ml-udot{ visibility: visible; }
.ml-avcol{ position: relative; flex: none; width: 30px; height: 30px; }
.ml-avcol .avatar{ width: 30px; height: 30px; font-size: 11px; }
.ml-selbox{ position: absolute; inset: 0; display: none; place-items: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); z-index: 2; cursor: pointer; }
.ml-selbox::before{ content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--ink-400); background: var(--surface); }
.ml-row.sel .ml-selbox::before{ background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
.ml-row:hover .ml-selbox, body.ml-selecting .ml-selbox, .ml-row.sel .ml-selbox{ display: grid; }
.ml-rbody{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ml-r1, .ml-r2, .ml-r3{ display: flex; align-items: center; gap: 8px; min-width: 0; }
.ml-from{ font-size: var(--t-ui); font-weight: 500; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.ml-row.unread .ml-from{ font-weight: 700; }
.ml-msgn{ color: var(--ink-500); font-weight: 400; font-size: var(--t-small); margin-left: 3px; }
.ml-r1r{ display: flex; align-items: center; gap: 6px; flex: none; }
.ml-rowpin{ color: var(--accent); display: inline-flex; }
.ml-rowpin svg{ width: 12px; height: 12px; }
.ml-when{ font-size: 11px; color: var(--ink-500); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ml-subj{ font-size: var(--t-small); color: var(--ink-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.ml-row.unread .ml-subj{ font-weight: 600; color: var(--ink-900); }
.ml-r2r{ display: flex; align-items: center; gap: 6px; flex: none; }
.ml-rprev{ font-size: var(--t-cap); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: flex; align-items: center; gap: 6px; }
.ml-rprev span{ overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ml-clip{ color: var(--ink-400); flex: none; display: inline-flex; }
.ml-clip svg{ width: 12px; height: 12px; }
.ml-r3{ display: none; margin-top: 2px; }
.ml-row.on .ml-r3, .ml-row.kbd .ml-r3{ display: flex; }
.ml-r3::after{ display: none; font-size: 11px; color: var(--accent); font-weight: 600; }
.ml-row.kbd:not(.on) .ml-r3::after{ content: "Enter to open"; display: inline; }
.ml-waitb{ display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-dark); font-size: 11px; font-weight: 700; }
.ml-waitb svg{ width: 11px; height: 11px; }
.ml-own{ display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px 0 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--own) 12%, var(--surface));
  color: var(--own); border: 1px solid color-mix(in srgb, var(--own) 28%, var(--surface)); font-size: 11px; font-weight: 650; white-space: nowrap; flex: none; }
.ml-own::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--own); flex: none; }
.ml-owndot{ width: 8px; height: 8px; border-radius: 50%; background: var(--own, var(--ink-400)); flex: none; display: inline-block; }
.ml-held{ display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: var(--r-pill); background: var(--row-risk); color: var(--row-risk-ink); font-size: 11px; font-weight: 650; white-space: nowrap; flex: none; }
.ml-held svg{ width: 11px; height: 11px; }
.ml-held.mine{ background: var(--plain-bg); color: var(--ink-500); }
.ml-waited, .ml-sentb{ display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: var(--r-pill); background: var(--plain-bg); color: var(--ink-500); font-size: 11px; font-weight: 600; white-space: nowrap; flex: none; }
.ml-waited svg, .ml-sentb svg{ width: 11px; height: 11px; }
.ml-waited.long{ background: var(--row-risk); color: var(--row-risk-ink); }
.ml-hact{ position: absolute; right: 8px; top: 8px; display: none; gap: 2px; padding: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control); box-shadow: var(--shadow-hair); z-index: 2; }
.ml-hact button{ display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--ink-700); cursor: pointer; padding: 0; }
.ml-hact button:hover{ background: var(--hover); color: var(--ink-900); }
.ml-hact button[data-mlwf="done"]:hover{ color: var(--live); }
.ml-row:hover .ml-hact{ display: flex; }
.ml-row:hover .ml-r1r{ visibility: hidden; }
body.ml-selecting .ml-hact{ display: none !important; }
body.ml-selecting .ml-row:hover .ml-r1r{ visibility: visible; }

/* the bulk bar and the Undo */
.ml-bulk, #ml-undo{ position: fixed; bottom: 20px; z-index: 60; display: flex; gap: 8px; align-items: center; min-height: 42px; padding: 0 8px 0 14px; background: var(--ink-900);
  color: var(--on-dark); border-radius: var(--r-control); font-size: var(--t-small); box-shadow: var(--shadow-float); animation: mlup .15s var(--ease); }
.ml-bulk{ left: 50%; transform: translateX(-50%); animation-name: mlupc; flex-wrap: wrap; max-width: calc(100vw - 24px); }
#ml-undo{ left: calc(var(--hub-w) + var(--app-w) + 20px); }
body.in-app #ml-undo{ left: calc(var(--rail-w) + var(--app-w) + 20px); }
#ml-undo.out{ opacity: 0; transition: opacity .2s var(--ease); }
.ml-bulk button, #ml-undo button{ height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--on-dark) 14%, transparent); color: var(--on-dark);
  font: inherit; font-size: var(--t-small); font-weight: 700; cursor: pointer; }
.ml-bulk button:hover, #ml-undo button:hover{ background: color-mix(in srgb, var(--on-dark) 24%, transparent); }
.ml-bulk kbd, #ml-undo kbd{ background: transparent; border-color: var(--on-dark); color: var(--on-dark); opacity: .7; margin-left: 6px; }
@keyframes mlup { from { transform: translateY(8px); opacity: 0; } to { opacity: 1; } }
@keyframes mlupc { from { transform: translate(-50%, 8px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* the client picker and the small ask box */
.ml-fpick{ position: fixed; z-index: 75; width: 360px; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control);
  box-shadow: var(--shadow-float); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.ml-fpick[hidden], .ml-namepop[hidden], .ml-rules[hidden], .ml-cmdk[hidden]{ display: none; }
.ml-fpick input, .ml-namepop input{ width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: var(--t-small); color: var(--ink-900); background: var(--surface); }
.ml-fpicklist{ max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; }
.ml-fpicklist button{ display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 8px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: var(--t-small); color: var(--ink-700); cursor: pointer; text-align: left; width: 100%; }
.ml-fpicklist button:hover, .ml-fpicklist button.on{ background: var(--surface-2); color: var(--ink-900); }
.ml-fpicklist button svg{ color: var(--ink-400); }
.ml-fpicklist button .p{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.ml-fpicklist button .q{ font-size: 11px; color: var(--rose-fg); flex: none; }
.ml-fpicklist .none{ padding: 10px 8px; color: var(--ink-500); font-size: var(--t-small); }
.ml-fpickfoot{ display: flex; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line-soft); font-size: 11px; color: var(--ink-500); }
.ml-fpickfoot button{ margin-left: auto; }
.ml-namepop{ position: fixed; z-index: 76; width: 320px; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control); box-shadow: var(--shadow-float); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ml-namepop label{ font-size: 11px; color: var(--ink-500); }
.ml-namepop label b{ display: block; color: var(--ink-900); font-size: var(--t-small); margin-bottom: 2px; }
.ml-namepop .row{ display: flex; gap: 6px; justify-content: flex-end; }

/* the reading pane */
.ml-story{ flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.ml-storyin{ width: 100%; max-width: 880px; margin: 0 auto; padding: 0 24px; }
.ml-storyhead{ position: sticky; top: 0; z-index: 6; background: var(--surface); border-bottom: 1px solid var(--line-soft); padding: 14px 0 12px; }
.ml-storybody{ padding-top: 16px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 14px; }
.ml-back{ display: none; align-items: center; gap: 4px; margin: 0 0 6px -6px; padding: 4px 6px; border-radius: 6px; color: var(--ink-500); font-size: var(--t-small); text-decoration: none; }
.ml-subject{ margin: 0; font-size: var(--t-h); font-weight: 650; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-headwho{ display: flex; align-items: center; gap: 7px; font-size: var(--t-small); color: var(--ink-500); min-width: 0; flex-wrap: wrap; margin-top: 4px; }
.ml-people-line{ color: var(--ink-700); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
.ml-headchips{ display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ml-dotsep{ width: 3px; height: 3px; border-radius: 50%; background: var(--ink-400); flex: none; }
.ml-headacts{ display: flex; align-items: center; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
.ml-tb{ display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ml-tbb{ display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); color: var(--ink-700);
  font: inherit; font-size: var(--t-small); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease); }
.ml-tbb:hover{ background: var(--surface-2); border-color: var(--ink-400); color: var(--ink-900); }
.ml-tbb.primary{ background: var(--accent); border-color: var(--accent); color: var(--on-dark); }
.ml-tbb.primary:hover{ background: var(--accent-hover); border-color: var(--accent-hover); }
.ml-tbb.icon{ width: 32px; padding: 0; justify-content: center; }
.ml-tbb.claimed{ border-color: color-mix(in srgb, var(--live) 40%, var(--line)); color: var(--live); }
.ml-tbb.held{ border-color: color-mix(in srgb, var(--tone-due) 40%, var(--line)); color: var(--row-risk-ink); background: var(--row-risk); }
.ml-tbb.owned{ border-color: color-mix(in srgb, var(--own) 36%, var(--line)); color: var(--own); }
.ml-split{ display: inline-flex; position: relative; }
.ml-split > .ml-tbb:first-child, .ml-split > .ml-btn:first-child{ border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ml-split > .caretb{ border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; width: 28px; padding: 0; justify-content: center; }
.ml-split > .caretb.primary{ border-left-color: color-mix(in srgb, var(--on-dark) 35%, var(--accent)); }
.ml-wf{ display: inline-flex; gap: 6px; }
.ml-wfnote{ display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--r-control); background: var(--green-bg); color: var(--live); font-size: var(--t-small); font-weight: 600; }
.ml-wfnote.later{ background: var(--indigo-bg); color: var(--indigo-fg); }
.ml-presence{ display: inline-flex; align-items: center; }
.ml-pres{ width: 24px; height: 24px; border-radius: 50%; background: var(--row-risk); color: var(--row-risk-ink); border: 2px solid var(--surface); box-shadow: 0 0 0 1.5px var(--tone-due);
  display: inline-grid; place-items: center; font-size: 9px; font-weight: 700; margin-left: -6px; }
.ml-pres:first-child{ margin-left: 0; }
/* Someone else writing a reply here (decision 3, 21 October 2026): their face ringed in the accent, and the words beside. */
.ml-pres.replying{ box-shadow: 0 0 0 1.5px var(--accent); }
.ml-replying{ margin-left: 8px; font-size: var(--t-small); color: var(--ink-700); white-space: nowrap; }
.ml-next{ display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; border-radius: var(--r-control); background: var(--accent-soft); border-left: 3px solid var(--accent); font-size: var(--t-ui); color: var(--ink-900); line-height: 1.5; flex-wrap: wrap; }
.ml-next > b{ font-size: 11px; font-weight: 600; color: var(--accent); flex: none; }
.ml-next a{ color: var(--ink-900); text-decoration: none; }
.ml-next a:hover{ color: var(--accent); }
.ml-next.linked{ background: var(--tint-mail-bg); border-left-color: var(--tint-mail-fg); align-items: center; }
.ml-next.linked > b{ color: var(--tint-mail-fg); }
.ml-note{ background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-control); padding: 10px 14px; font-size: var(--t-small); color: var(--ink-700); line-height: 1.55; }
.ml-note.ml-aside{ display: flex; gap: 8px; align-items: center; }

/* the messages: the header row is the fold */
.ml-timeline{ display: flex; flex-direction: column; gap: 10px; }
.ml-msgwrap{ display: flex; flex-direction: column; }
.ml-msg{ border: 1px solid var(--line-soft); border-radius: var(--r-row); background: var(--surface); box-shadow: var(--shadow-hair); overflow: hidden; }
.ml-msg.team{ background: var(--surface-2); }
.ml-msg.lit{ box-shadow: 0 0 0 2px var(--accent); }
.ml-msghead{ display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; min-height: 52px; transition: background 120ms var(--ease); }
.ml-msghead:hover{ background: var(--surface-2); }
.ml-msg[open] > .ml-msghead{ border-bottom: 1px solid var(--line-soft); }
.ml-msghead .avatar{ width: 28px; height: 28px; font-size: 10px; flex: none; }
.ml-msgwho{ display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-shrink: 0; max-width: 46%; }
.ml-msgwho b{ font-size: var(--t-ui); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-addr{ font-size: var(--t-cap); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-msg:not([open]) .ml-addr{ display: none; }
.ml-fromdesk{ font-size: 11px; color: var(--live); background: var(--green-bg); border-radius: var(--r-pill); padding: 1px 7px; font-weight: 600; flex: none; }
.ml-msg:not([open]) .ml-fromdesk{ display: none; }
.ml-msgpeek{ flex: 1; min-width: 0; font-size: var(--t-small); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-msg[open] .ml-msgpeek{ display: none; }
.ml-msg[open] .ml-msgwho{ flex: 1; max-width: none; }
.ml-msgmeta{ display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; color: var(--ink-500); }
.ml-msgout{ display: inline-grid; place-items: center; color: var(--ink-400); text-decoration: none; padding: 0 2px; }
.ml-msgout:hover{ color: var(--accent); }
.ml-msg:not([open]) .ml-msgout{ display: none; }
.ml-msgto{ padding: 8px 14px 0; font-size: var(--t-cap); color: var(--ink-500); overflow-wrap: anywhere; }
.ml-msgbody{ padding: 10px 14px 14px; }
.ml-private .ml-msghead{ cursor: default; color: var(--ink-500); }
.ml-private .ml-msghead:hover{ background: none; }
.ml-held-body{ display: flex; align-items: center; gap: 8px; margin: 0; color: var(--rose-fg); font-weight: 600; font-size: var(--t-small); }
.ml-held-body a{ color: var(--accent); font-weight: 500; }
.ml-heldmsg .ml-msgpeek{ color: var(--rose-fg); font-weight: 600; }
.ml-daysep{ display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; color: var(--ink-500); font-size: 11px; font-weight: 600; }
.ml-daysep::before, .ml-daysep::after{ content: ""; height: 1px; background: var(--line-soft); flex: 1; }
.ml-daysep span{ white-space: nowrap; font-weight: 600; }
.ml-earlier{ margin: 2px 0; }
.ml-earlier > summary{ display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 2px 0; }
.ml-earlierline{ height: 1px; background: var(--line); flex: 1; }
.ml-earlierlbl{ white-space: nowrap; font-size: var(--t-small); color: var(--accent); font-weight: 600; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 12px; background: var(--surface); }
.ml-earlier > summary:hover .ml-earlierlbl{ border-color: var(--accent); }
.ml-earlier[open] > summary .ml-earlierlbl::after{ content: ", hide them"; }
.ml-earlierbody{ display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ml-docs{ display: flex; gap: 8px; flex-wrap: wrap; padding: 0 14px 12px; }
.ml-doc{ display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-control); padding: 6px 10px; font-size: var(--t-small); text-decoration: none; color: var(--ink-900); background: var(--surface); }
.ml-doc:hover{ border-color: var(--ink-400); background: var(--surface-2); }
.ml-doc.off{ color: var(--ink-500); border-style: dashed; }
.ml-doc em{ display: block; font-style: normal; font-size: 11px; color: var(--ink-500); }
.ml-doc svg{ color: var(--ink-400); }
[data-mail] .em{ font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--ink-900); overflow-wrap: anywhere; }
[data-mail] .em p{ margin: 0 0 10px; }
[data-mail] .em p:last-child{ margin-bottom: 0; }
[data-mail] .em ul, [data-mail] .em ol{ margin: 0 0 10px; padding-left: 22px; }
[data-mail] .em pre{ margin: 0 0 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-control); font-size: 12px; line-height: 1.5; color: var(--ink-700); overflow-x: auto; white-space: pre; }
[data-mail] .em a{ color: var(--accent); }
[data-mail] .em .em-signoff{ color: var(--ink-700); margin-top: 12px; }
[data-mail] .em-fold{ margin-top: 8px; border-top: 1px dashed var(--line); }
[data-mail] .em-fold > summary{ display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 11px; color: var(--ink-500); cursor: pointer; min-width: 0; list-style: none; }
[data-mail] .em-fold > summary::-webkit-details-marker{ display: none; }
[data-mail] .em-foldlbl{ font-weight: 600; color: var(--ink-700); white-space: nowrap; }
[data-mail] .em-foldpeek{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
[data-mail] .em-fold[open] > summary .em-foldpeek{ display: none; }
[data-mail] .em-foldbody{ padding: 0 0 6px 12px; border-left: 2px solid var(--line); margin: 0 0 4px; color: var(--ink-700); }
[data-mail] .em-raw{ white-space: pre-wrap; font-family: inherit; font-size: var(--t-small); color: var(--ink-500); margin: 0; }

/* the draft reply, in the conversation: one head, one status line, the words, one bar */
.ml-ev{ border: 1px solid var(--line); border-radius: var(--r-row); background: var(--surface); box-shadow: var(--shadow-hair); overflow: hidden; transition: opacity .18s var(--ease), transform .18s var(--ease); }
.ml-ev.out{ border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.ml-ev.ml-vswitching{ opacity: .35; transform: translateY(2px); }
.ml-dhead{ display: flex; gap: 10px; align-items: center; padding: 11px 16px 9px; }
.ml-dhead .avatar{ width: 28px; height: 28px; font-size: 10px; }
.ml-dwho{ flex: 1; min-width: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ml-dwho b{ font-size: var(--t-ui); font-weight: 650; }
.ml-meta{ font-size: var(--t-small); color: var(--ink-500); white-space: nowrap; }
/* The draft's status sits inside its card with the card's inset, as a tinted strip (the layout sweep, pass 2). */
.ml-dstatus{ display: flex; align-items: center; gap: 8px; width: calc(100% - 24px); margin: 8px 12px; padding: 8px 12px; border: 0; border-radius: var(--r-control);
  background: var(--surface-2); font: inherit; font-size: var(--t-small); color: var(--ink-700); text-align: left; cursor: pointer; }
.ml-dstatus i{ width: 8px; height: 8px; border-radius: 50%; background: var(--ink-400); flex: none; }
.ml-dstatus b{ color: var(--ink-900); font-weight: 600; white-space: nowrap; }
.ml-dstatus > span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ml-dstatus.g i{ background: var(--live); } .ml-dstatus.a i { background: var(--tone-due); } .ml-dstatus.d i { background: var(--danger); } .ml-dstatus.b i { background: var(--accent); }
.ml-dstatus.a b{ color: var(--row-risk-ink); } .ml-dstatus.d b { color: var(--danger); } .ml-dstatus.g b { color: var(--live); }
.ml-dmore{ display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-size: 11px; font-weight: 600; white-space: nowrap; flex: none; }
.ml-dstatus[aria-expanded="true"] .ml-dmore svg{ transform: rotate(180deg); }
.ml-ddetail{ border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.ml-checks{ display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 10px 14px; }
.ml-checks .check{ display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); }
.ml-checks .check.p{ background: var(--green-bg); color: var(--live); } .ml-checks .check.f { background: var(--danger-soft); color: var(--danger); }
.ml-checks .check svg{ width: 11px; height: 11px; }
.ml-fail{ font-size: var(--t-small); color: var(--danger); padding: 0 14px 10px; }
.ml-fold{ border-top: 1px solid var(--line-soft); }
.ml-fold > summary{ display: flex; align-items: center; gap: 6px; padding: 9px 14px; font-size: var(--t-small); color: var(--ink-500); cursor: pointer; font-weight: 600; }
.ml-fold[open] > summary svg{ transform: rotate(90deg); }
.ml-stoodbody{ padding: 4px 14px 12px; font-size: var(--t-small); color: var(--ink-500); white-space: pre-wrap; }
.ml-denv{ display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; padding: 9px 16px 0; font-size: var(--t-small); color: var(--ink-500); }
.ml-denv b{ color: var(--ink-700); font-weight: 600; }
.ml-denvsub{ color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.ml-dfiles{ display: inline-flex; gap: 6px; flex-wrap: wrap; width: 100%; padding-top: 4px; }
.ml-doc-file{ display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-small); color: var(--ink-700); text-decoration: none; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 10px 3px 8px; background: var(--surface); }
.ml-doc-file em{ font-style: normal; color: var(--ink-500); font-size: 11px; }
.ml-body{ padding: 12px 16px 14px; font-size: var(--t-body); line-height: var(--t-body-lh); }
.ml-body p{ margin: 0 0 12px; }
.ml-body p:last-child{ margin-bottom: 0; }
.ml-dedit{ padding: 12px 16px 14px; }
.ml-dedit[hidden]{ display: none; }
.ml-deditta{ display: block; width: 100%; min-height: 150px; font: inherit; font-size: var(--t-body); line-height: 1.6; color: var(--ink-900); border: 1px solid var(--line); border-radius: var(--r-control);
  padding: 12px 14px; background: var(--surface); resize: vertical; outline: none; }
.ml-deditta:focus{ border-color: var(--accent); box-shadow: var(--accent-ring); }
.ml-deditbar{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ml-bar2{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line-soft); background: var(--surface-2); }
.ml-verdicts, .ml-reject{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%; }
.ml-verdicts[hidden], .ml-reject[hidden]{ display: none; }
.ml-reject input{ flex: 1; min-width: 200px; font: inherit; font-size: var(--t-small); border: 1px solid var(--line); border-radius: var(--r-control); padding: 6px 10px; background: var(--surface); color: var(--ink-900); }
.ml-reject select{ font: inherit; font-size: var(--t-small); border: 1px solid var(--line); border-radius: var(--r-control); padding: 6px 8px; background: var(--surface); color: var(--ink-900); }
.ml-bar2 .btn{ height: 32px; }
.ml-notready{ display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-small); color: var(--row-risk-ink); font-weight: 600; }
.ml-barnote{ width: 100%; margin: 0; font-size: 11px; color: var(--ink-500); }

/* the summary, with a citation on every line, and the quick replies */
.ml-sum{ border: 1px solid var(--line-soft); border-left: 3px solid var(--accent); border-radius: var(--r-control); background: var(--surface); overflow: hidden; }
.ml-sumhead{ display: flex; align-items: center; gap: 8px; padding: 9px 14px; }
.ml-sumhead svg{ color: var(--accent); }
.ml-sumhead b{ font-size: var(--t-small); font-weight: 650; }
.ml-sumx{ border: 0; background: none; color: var(--ink-400); cursor: pointer; padding: 2px; display: inline-grid; place-items: center; transition: transform 120ms var(--ease); }
.ml-sum.shut .ml-sumx{ transform: rotate(-90deg); }
.ml-sum.shut .ml-sumbody{ display: none; }
.ml-sumbody{ padding: 0 14px 12px; }
.ml-sumnext{ margin: 0 0 8px; font-size: var(--t-ui); color: var(--ink-900); line-height: 1.5; }
.ml-sumnext b{ font-size: 11px; font-weight: 600; color: var(--accent); margin-right: 6px; }
.ml-sumnext a{ color: var(--ink-900); text-decoration: none; border-bottom: 1px solid var(--line); }
.ml-sumtext{ margin: 0; font-size: var(--t-body); line-height: 1.65; color: var(--ink-700); }
.ml-cite{ display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; margin-left: 3px; border-radius: 4px; background: var(--accent-soft); color: var(--accent);
  font-size: 10px; font-weight: 700; text-decoration: none; vertical-align: 2px; }
.ml-cite:hover{ background: var(--accent); color: var(--on-dark); }
.ml-quick{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ml-quickb{ display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  font: inherit; font-size: var(--t-small); color: var(--ink-700); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-quickb span{ overflow: hidden; text-overflow: ellipsis; }
.ml-quickb:hover{ border-color: var(--accent); color: var(--accent); }

/* everything that is not the conversation, in one box, one tab at a time */
.ml-about{ border: 1px solid var(--line-soft); border-radius: var(--r-row); background: var(--surface); overflow: hidden; }
.ml-abouttabs{ display: flex; align-items: center; gap: 2px; padding: 5px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); overflow-x: auto; scrollbar-width: none; }
.ml-abouttab{ display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-control); background: none; font: inherit; font-size: var(--t-small); color: var(--ink-500); cursor: pointer; white-space: nowrap; }
.ml-abouttab:hover{ color: var(--ink-900); }
.ml-abouttab.on{ background: var(--surface); color: var(--ink-900); font-weight: 600; box-shadow: var(--shadow-seg); }
.ml-abouttab .n{ background: var(--accent-soft); color: var(--accent); border-radius: var(--r-pill); padding: 0 6px; font-size: 11px; font-weight: 700; }
.ml-aboutpanel{ padding: 14px 16px; }
.ml-aboutpanel[hidden]{ display: none; }
.ml-emptyact{ margin-top: 10px; }
.ml-record{ display: flex; flex-direction: column; gap: 10px; }
.ml-rechead{ display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ml-recname{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ml-recname b{ font-size: var(--t-ui); font-weight: 650; overflow-wrap: anywhere; }
.ml-recstand{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ml-recgrid, .ml-recdays{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-control); overflow: hidden; }
.ml-reccell{ background: var(--surface); padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ml-reccell .k{ font-size: 11px; font-weight: 600; color: var(--ink-500); }
.ml-reccell .v{ font-size: var(--t-small); color: var(--ink-900); font-weight: 550; overflow-wrap: anywhere; }
.ml-recfoot{ margin: 0; }
.ml-recfoot a{ color: var(--accent); }
.ml-recvdocs{ display: flex; flex-direction: column; gap: 6px; }
.ml-filerow{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.ml-filerow:last-child{ border-bottom: 0; }
.ml-filerow .btn{ height: 30px; font-size: var(--t-small); }
.ml-notelist{ display: grid; gap: 10px; }
.ml-noterow{ display: flex; gap: 10px; }
.ml-noterow .avatar{ width: 26px; height: 26px; font-size: 9px; flex: none; }
.ml-notemeta{ font-size: 11px; color: var(--ink-500); }
.ml-notebody{ font-size: var(--t-small); color: var(--ink-900); white-space: pre-wrap; line-height: 1.55; }
.ml-noteform{ display: flex; gap: 8px; margin-top: 12px; }
.ml-noteform input{ flex: 1; min-width: 0; font: inherit; font-size: var(--t-small); border: 1px solid var(--line); border-radius: var(--r-control); padding: 0 11px; height: var(--ctl); background: var(--surface); color: var(--ink-900); }
.ml-noteform input:focus{ outline: none; border-color: var(--accent); box-shadow: var(--accent-ring); }
.ml-brain{ position: relative; padding-left: 4px; }
.ml-bentry{ position: relative; display: flex; gap: 12px; padding: 6px 0 10px; }
.ml-bentry::before{ content: ""; position: absolute; left: 7px; top: 22px; bottom: -4px; width: 2px; background: var(--line-soft); }
.ml-bentry:last-child::before{ display: none; }
.ml-bdot{ width: 16px; height: 16px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--line); flex: none; margin-top: 2px; z-index: 1; }
.ml-bmain{ flex: 1; min-width: 0; }
.ml-bhead{ display: flex; align-items: baseline; gap: 8px; }
.ml-bhead b{ font-size: var(--t-small); font-weight: 650; }
.ml-bhead time{ margin-left: auto; font-size: 11px; color: var(--ink-500); white-space: nowrap; }
.ml-bmain p{ margin: 2px 0 0; font-size: var(--t-small); color: var(--ink-700); line-height: 1.55; }

/* the composer: at the top of the conversation, in the reading measure */
.ml-cp{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-row); box-shadow: var(--shadow-card); }
.ml-cp[hidden]{ display: none; }
.ml-cphead{ display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); border-radius: var(--r-row) var(--r-row) 0 0; }
.ml-cphead b{ font-size: var(--t-ui); font-weight: 650; }
.ml-cpwho{ font-size: var(--t-small); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-cpx{ border: 0; background: none; color: var(--ink-500); font: inherit; font-size: var(--t-small); cursor: pointer; padding: 4px 6px; border-radius: 6px; display: inline-flex; align-items: center; }
.ml-cpx:hover{ background: var(--hover); color: var(--ink-900); }
.ml-cprow{ display: flex; align-items: flex-start; gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--line-soft); min-height: 40px; }
.ml-cprow[hidden]{ display: none; }
.ml-cprow .lab{ width: 56px; flex: none; font-size: var(--t-small); color: var(--ink-500); line-height: 24px; }
.ml-cprow > input[type=text]{ flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: var(--t-ui); color: var(--ink-900); height: 24px; }
.ml-cprow:focus-within{ background: var(--surface-2); }
.ml-pchips{ display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; align-items: center; min-height: 24px; }
.ml-pchip{ display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 3px 0 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--t-small); max-width: 100%; }
.ml-pchip.team{ background: var(--plain-bg); color: var(--ink-700); }
.ml-pchip .nm{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-pchip .x{ border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; padding: 0 3px; display: inline-grid; place-items: center; }
.ml-pchip .x:hover{ opacity: 1; }
.ml-pchip .x svg{ width: 12px; height: 12px; }
.ml-chipin{ flex: 1 1 140px; min-width: 140px; border: 0; outline: none; background: none; font: inherit; font-size: var(--t-ui); color: var(--ink-900); height: 24px; padding: 0; }
.ml-people{ position: fixed; z-index: 80; min-width: 280px; max-width: min(420px, calc(100vw - 16px)); padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control); box-shadow: var(--shadow-float); max-height: 260px; overflow-y: auto; }
.ml-people button{ display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 7px 9px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: var(--t-small); color: var(--ink-900); cursor: pointer; text-align: left; }
.ml-people button em{ font-style: normal; color: var(--ink-500); font-size: 11px; margin-left: auto; }
.ml-people button:hover, .ml-people button.on{ background: var(--accent-soft); }
.ml-cpbody{ padding: 14px; min-height: 150px; font-size: var(--t-body); line-height: 1.6; color: var(--ink-900); outline: none; white-space: pre-wrap; word-break: break-word; }
.ml-cpbody:empty::before{ content: attr(data-ph); color: var(--ink-500); }
.ml-cpbody:focus, .ml-cpbody:focus-visible{ outline: none; box-shadow: none; }
.ml-cpstatus{ display: flex; align-items: center; gap: 8px; padding: 0 14px 10px; font-size: var(--t-small); color: var(--ink-500); }
.ml-cpstatus[hidden]{ display: none; }
.ml-cpstatus .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.ml-cpstatus.live .dot{ animation: mlpulse 1.1s var(--ease) infinite; }
@keyframes mlpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.ml-cpstop{ border: 1px solid var(--line); background: var(--surface); border-radius: 6px; font: inherit; font-size: 11px; color: var(--ink-700); padding: 1px 8px; cursor: pointer; }
.ml-cpsig{ padding: 0 14px 10px; font-size: var(--t-small); color: var(--ink-500); }
.ml-cpsig summary{ cursor: pointer; color: var(--accent); font-size: var(--t-cap); }
.ml-cpsig a{ color: var(--accent); }
.ml-cpsigbody{ margin: 8px 0; padding-top: 8px; border-top: 1px solid var(--line-soft); color: var(--ink-700); white-space: pre-line; }
.ml-cpsig select{ font: inherit; font-size: var(--t-small); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; background: var(--surface); color: var(--ink-900); }
.ml-cpquotedwrap{ border-top: 1px solid var(--line-soft); }
.ml-cpquotedwrap[hidden]{ display: none; }
.ml-cpquotedwrap > summary{ padding: 8px 14px; font-size: 11px; color: var(--ink-500); cursor: pointer; }
.ml-cpquoted{ margin: 0; padding: 0 14px 12px; white-space: pre-wrap; font-family: inherit; font-size: var(--t-small); color: var(--ink-500); max-height: 200px; overflow: auto; }
.ml-cpatt{ display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.ml-cpatt[hidden]{ display: none; }
.ml-cpfile{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 9px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); font-size: var(--t-small); color: var(--ink-700); }
.ml-cpfile em{ font-style: normal; color: var(--ink-500); font-size: 11px; }
.ml-cpfile button{ border: 0; background: none; color: var(--ink-500); cursor: pointer; padding: 0 3px; display: inline-grid; place-items: center; }
.ml-cpfile button:hover{ color: var(--danger); }
.ml-cpheld{ display: flex; align-items: center; gap: 8px; margin: 0 14px 8px; padding: 8px 12px; border-radius: var(--r-control); background: var(--row-risk); color: var(--row-risk-ink); font-size: var(--t-small); }
.ml-cpheld[hidden]{ display: none; }
.ml-cpheld span{ flex: 1; min-width: 0; }
.ml-cpcoach{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 9px 14px; border-top: 1px dashed var(--line); }
.ml-cpcoach[hidden]{ display: none; }
.ml-cpcoach .lab{ font-size: 11px; color: var(--ink-500); margin-right: 2px; }
.ml-cc{ display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); }
.ml-cc svg{ width: 11px; height: 11px; }
.ml-cc.p{ background: var(--green-bg); color: var(--live); }
.ml-cc.f{ background: var(--row-risk); color: var(--row-risk-ink); }
.ml-cpbrain{ padding: 10px 14px 4px; border-top: 1px dashed var(--line); }
.ml-cpbrain[hidden]{ display: none; }
.ml-cpbrain label{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 6px; font-size: var(--t-small); color: var(--ink-900); }
.ml-cpbrain label svg{ color: var(--accent); }
.ml-cpbrain label em{ font-style: normal; color: var(--ink-500); }
.ml-cpbrain textarea{ display: block; width: 100%; min-height: 72px; resize: vertical; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); font: inherit; font-size: var(--t-small); line-height: 1.5; color: var(--ink-900); }
.ml-cpbrain textarea:focus{ outline: none; border-color: var(--accent); box-shadow: var(--accent-ring); background: var(--surface); }
.ml-cpbar{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line-soft); background: var(--surface-2); }
.ml-cpbar .ml-btn.brain{ border-color: var(--accent); color: var(--accent); }
.ml-cpbar .ml-btn.brain:hover{ background: var(--accent-soft); }
.ml-cpsteer{ height: 32px; min-width: 150px; flex: 1 1 160px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-control); font: inherit; font-size: var(--t-small); background: var(--surface); color: var(--ink-900); }
.ml-cpsteer[hidden]{ display: none; }
.ml-cpsp{ flex: 0 0 6px; }
.ml-cpfoot{ margin: 0; padding: 8px 14px 10px; font-size: 11px; color: var(--ink-500); border-top: 1px solid var(--line-soft); }
/* a new email in its own window at the foot of the screen, so nobody takes it for a reply */
.ml-newwin{ position: fixed; right: 28px; bottom: 0; width: 720px; max-width: calc(100vw - 56px); max-height: min(86vh, 900px); z-index: 70; background: var(--surface);
  border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: var(--shadow-float); display: flex; flex-direction: column; overflow: hidden; animation: mlnewwin .18s var(--ease); }
.ml-newwin[hidden]{ display: none; }
.ml-newwin .ml-cp{ border: 0; border-radius: 0; box-shadow: none; overflow: auto; max-height: min(86vh, 900px); }
.ml-newwin .ml-cphead{ background: var(--ink-900); color: var(--on-dark); padding: 12px 16px; border-radius: 0; }
.ml-newwin .ml-cphead b, .ml-newwin .ml-cphead .ml-cpwho, .ml-newwin .ml-cphead .ml-cpx{ color: var(--on-dark); }
.ml-newwin .ml-cphead .ml-cpx:hover{ background: color-mix(in srgb, var(--on-dark) 14%, transparent); }
.ml-newwin .ml-cpbody{ min-height: 200px; }
@keyframes mlnewwin { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* the quick rule, and the palette */
.ml-rules{ position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 85; width: 720px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-row); box-shadow: var(--shadow-float); overflow: hidden; }
.ml-ruleshead{ display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.ml-ruleshead b{ font-size: var(--t-ui); font-weight: 650; }
.ml-ruleshead .ml-quiet{ flex: 1; min-width: 200px; line-height: 1.45; }
.ml-ruleshead a{ color: var(--accent); }
.ml-ruleslist{ flex: 1; overflow-y: auto; padding: 8px 10px; min-height: 60px; }
.ml-rulerow{ display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-control); }
.ml-rulerow:hover{ background: var(--surface-2); }
.ml-rulerow.off{ opacity: .55; }
.ml-rulerow .rl{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ml-rulerow .rl b{ font-size: var(--t-small); font-weight: 650; }
.ml-rulerow .rl span{ font-size: 11px; color: var(--ink-500); }
.ml-rulerow .rn{ font-size: 11px; color: var(--ink-400); font-variant-numeric: tabular-nums; min-width: 20px; text-align: right; }
.ml-rulenew{ border-top: 1px solid var(--line-soft); background: var(--surface-2); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 9px; }
.ml-rulenew .mh{ font-size: 11px; font-weight: 600; color: var(--ink-400); }
.ml-rulenew .row{ display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ml-rulenew .row.foot{ align-items: center; }
.ml-rulenew label{ display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ink-500); }
.ml-rulenew label.grow{ flex: 1; min-width: 160px; }
.ml-rulenew label.chk{ flex-direction: row; align-items: center; gap: 6px; color: var(--ink-700); font-size: var(--t-small); }
.ml-rulenew select, .ml-rulenew input[type=text]{ height: 32px; font: inherit; font-size: var(--t-small); padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-900); }
.ml-cmdk{ position: fixed; left: 50%; top: 14vh; transform: translateX(-50%); z-index: 90; width: 620px; max-width: 94vw; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-row); box-shadow: var(--shadow-float); display: flex; flex-direction: column; overflow: hidden; }
.ml-cmdkin{ display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.ml-cmdkin svg{ color: var(--ink-400); }
.ml-cmdkin input{ flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: var(--t-body); color: var(--ink-900); }
.ml-cmdklist{ max-height: 52vh; overflow-y: auto; padding: 6px; }
.ml-cmdkh{ font-size: 11px; font-weight: 600; color: var(--ink-400); padding: 8px 10px 4px; }
.ml-cmdki{ display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: var(--t-small); color: var(--ink-900); cursor: pointer; text-align: left; }
.ml-cmdki span{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-cmdki:hover, .ml-cmdki.on{ background: var(--accent-soft); color: var(--accent); }
.ml-cmdkempty{ padding: 18px; text-align: center; color: var(--ink-500); font-size: var(--t-small); }
.ml-cmdkfoot{ display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line-soft); background: var(--surface-2); font-size: 11px; color: var(--ink-500); }

/* Mail settings: the tabs, the rule editor, signatures, the mailboxes */
.ml-settabs{ margin: 0 0 20px; }
.ml-notfound{ max-width: 560px; }
.ml-manage{ display: grid; gap: 16px; }
.ml-lead{ margin: 0; max-width: 720px; }
.ml-rule.ml-off .row-title b{ color: var(--ink-500); }
.ml-rule .row-sub{ white-space: normal; }
.ml-rule-acts{ align-self: center; }
.ml-cond{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.ml-cond .input{ width: 220px; max-width: 100%; }
.ml-narrow{ width: 88px; }
.ml-row-actions{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ml-row-actions .grow{ flex: 1; }
.ml-form{ display: grid; gap: 12px; max-width: 560px; }
.ml-inline{ grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); align-items: end; max-width: none; }
.ml-check{ display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-small); }
.ml-sharepeople{ display: grid; gap: 6px; margin-top: 10px; }
.ml-add{ margin-top: 12px; }
.ml-add > summary{ list-style: none; cursor: pointer; display: inline-flex; }
.ml-sig-preview{ white-space: normal; }
.ml-settings{ display: grid; gap: 16px; }
.ml-cond .menu-field, .ml-inline .menu-field{ width: auto; }
.ml-settings .menu-field, .ml-rule-form .menu-field{ max-width: 360px; }
.ml-settings .state{ white-space: normal; }
.ml-settings dd .menu-btn{ margin-bottom: 4px; }
.ml-settings dd .cap{ display: block; margin: 4px 0 0; }
.ml-manage .row-sub, .ml-settings .row-sub{ white-space: normal; }
.ml-print{ max-width: 800px; }
.ml-print-title{ font-size: 20px; margin: 0 0 4px; }
.ml-print-msg{ border-top: 1px solid var(--line-soft); padding-top: 12px; margin-top: 12px; }

/* Mail's switcher in the bar, and Spam: the reasons above the words, the words as plain text (pass 2) */
.ml-inbox{ display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-small); color: var(--ink-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-inbox svg{ width: 14px; height: 14px; }
.ml-spamhead h2{ margin: 0 0 4px; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.ml-spamhead p{ margin: 0; overflow-wrap: anywhere; }
.ml-spamact{ display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.ml-spamwhy{ border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; background: var(--surface-2); }
.ml-spamwhy h3{ margin: 0 0 6px; font-size: var(--t-small); font-weight: 600; }
.ml-spamwhy ul{ margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: var(--t-small); }
.ml-spambody pre{ margin: 16px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: var(--t-body); color: var(--ink-600); }
.ml-spamlisthead{ font-size: var(--t-small); }
.ml-cpfrom{ display: flex; align-items: center; gap: 8px; padding: 6px 12px 0; font-size: var(--t-small); }
.ml-score{ display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ml-bar2 .draft-score{ display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-right: auto; }
.ml-bar2 .draft-score .cap{ margin: 0; }
.ml-consent{ display: block; margin-top: 4px; color: var(--ink-600); quotes: "\201C" "\201D"; }

/* the widths, largest first, so a narrower rule always wins */
@media (max-width: 1440px) { .ml-tbb .hide-md { display: none; } }
@media (max-width: 1280px) { .ml-panes { grid-template-columns: 340px minmax(0, 1fr); } .ml-storyin { padding: 0 16px; } }
/* A tablet and a phone read one pane at a time: the list, or the conversation with its way back. */
@media (max-width: 1023px) {
  .ml-panes{ grid-template-columns: minmax(0, 1fr); }
  .ml-pane{ display: none; }
  .ml-panes.reading .ml-list{ display: none; }
  .ml-panes.reading .ml-pane{ display: flex; }
  .ml-list{ border-right: 0; }
  .ml-back{ display: inline-flex; }
  .ml-fresh{ display: none !important; }
  #ml-undo, body.in-app #ml-undo{ left: 16px; }
}
@media (max-width: 767px) {
  [data-mail]{ height: calc(100dvh - var(--top) - var(--bar, 0px) - var(--tabs) - env(safe-area-inset-bottom)); }
  .ml-bar{ gap: 6px; padding: 0 8px 0 var(--gutter); height: 52px; }
  .ml-h1{ display: none; }
  .ml-barr .hide-sm{ display: none; }
  .ml-search input{ padding: 0 34px; font-size: 16px; height: 40px; }
  .ml-search kbd.ml-k{ display: none; }
  .ml-storyin{ padding: 0 12px; }
  .ml-subject{ white-space: normal; font-size: 18px; }
  .ml-tb{ width: 100%; }
  .ml-tbb{ height: 40px; }
  .ml-tbb .hide-md{ display: none; }
  .ml-msgpeek{ display: none; }
  .ml-msgwho{ max-width: none; flex: 1; }
  .ml-addr{ display: none; }
  .ml-notice{ font-size: var(--t-cap); padding: 6px var(--gutter); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ml-notice svg{ display: none; }
  .ml-msghead{ gap: 8px; padding: 10px 14px; }
  .ml-msgbody{ padding-left: 14px; padding-right: 14px; }
  .ml-recgrid, .ml-recdays{ grid-template-columns: minmax(0, 1fr); }
  .ml-cpbar{ gap: 5px; }
  .ml-cpsteer{ flex-basis: 100%; }
  .ml-newwin{ right: 0; width: 100vw; max-width: 100vw; border-radius: 0; max-height: calc(100dvh - var(--tabs)); bottom: calc(var(--tabs) + env(safe-area-inset-bottom)); }
  .ml-bulk{ bottom: calc(var(--tabs) + 12px + env(safe-area-inset-bottom)); }
  #ml-undo, body.in-app #ml-undo{ bottom: calc(var(--tabs) + 12px + env(safe-area-inset-bottom)); }
  .ml-rules{ width: 96vw; }
  .ml-cond .input{ width: 100%; }
  .ml-manage .row, .ml-settings .row{ flex-wrap: wrap; row-gap: 8px; }
  .ml-manage .row-main, .ml-settings .row-main{ flex: 1 1 100%; min-width: 0; }
  .ml-manage .row-meta, .ml-settings .row-meta{ white-space: normal; flex-wrap: wrap; }
  .ml-lead{ max-width: 100%; }
  .ml-settings .kv{ grid-template-columns: minmax(0, 1fr); }
  .ml-settings .kv dd{ overflow-wrap: anywhere; }
  .ml-row .ml-hact{ display: none !important; }
  .ml-row:hover .ml-r1r{ visibility: visible; }
}
/* A printed conversation is a transcript: the mail, in order, whole. */
@media print {
  .ml-bar, .ml-list, .ml-tb, .ml-cmdk, .ml-rules, .ml-fpick, .ml-namepop, #ml-undo, .ml-bulk, .ml-cp, .ml-about{ display: none !important; }
  [data-mail], .ml-panes, .ml-pane, .ml-story{ display: block; height: auto; overflow: visible; }
  .ml-storyhead{ position: static; }
  .ml-msg > .ml-msgbody, .ml-earlier > .ml-earlierbody{ display: block !important; }
  .ml-print{ box-shadow: none; border: 0; max-width: none; }
}

/* ================================================================ Compliance ===
   Vanta's program with ISMS.online's registers, in Home's look. Every class is
   co-*; the shared ones (stat-card, table, kv, seg, filters, notice) do the rest. */
/* A second line in a register's cell: who reviewed it, how many entries are overdue (Pass 11). */
/* Compliance's figures in the record's panel (21 October 2026): the quiet line takes the figure's tone. */
.co-figs .cr-fig.due .cr-fig-sub { color: var(--tone-due); }
.co-figs .cr-fig.up .cr-fig-sub { color: var(--live); }
.co-sub { display: block; color: var(--ink-500); font-size: var(--t-small); white-space: nowrap; }
.co-page td .state { white-space: nowrap; }
/* A register, a policy or a supplier on a phone: each value with its column's name beside it, as Finance's tables read,
   and the record's name across the top (14 October: a column of bare names, dates and numbers). */
@media (max-width: 767px) {
  .co-table.stack tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
  .co-table.stack td { flex: 0 0 auto; max-width: 100%; }
  .co-table.stack td:first-child { flex: 1 1 100%; font-weight: 600; }
  .co-table.stack td:not(:first-child)[data-label]:not([data-label=""])::before { content: attr(data-label); color: var(--ink-500); font-size: var(--t-small); margin-right: 6px; font-weight: 400; }
  .co-table.stack td:has(> .state)::before { content: none !important; }
  .co-table.stack td:empty { display: none; }
  .co-table.stack .co-sub { display: inline; margin-left: 6px; }
}
.co-page { display: grid; gap: var(--gap); min-width: 0; }
.co-page > * { margin: 0; min-width: 0; }
.co-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.co-actions > * { min-width: 0; max-width: 100%; }
.co-page .toolbar > .filters { min-width: 0; max-width: 100%; }
.co-card .card-head { flex-wrap: wrap; }
.co-card .card-head .meta { white-space: normal; }
.co-narrow { max-width: 760px; }
.co-lead { color: var(--ink-500); font-size: var(--t-small); margin: 0; max-width: 72ch; }
.co-stats { margin-bottom: 0; }
.co-copy-note { margin: -4px 0 16px; }
.co-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.co-card h3 { font-size: var(--t-ui); font-weight: 600; margin: 16px 0 6px; }
.co-card .card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.co-kv { grid-template-columns: 170px minmax(0, 1fr); }
.co-kv dd .menu-btn { margin-left: -8px; }
/* A menu drawn as a field has its own border, which a negative margin would push against the card's edge. */
.co-kv dd .menu-btn.menu-field { margin-left: 0; }
.co-group { display: grid; gap: 8px; }
.co-group .section { margin: 0; }
.co-search { flex: 1 1 220px; max-width: 320px; margin-left: auto; }
.co-search .input { width: 100%; }
.co-page .filter.on { color: var(--ink-900); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.co-due-soon { color: var(--tone-due); font-weight: 500; }
.co-notice-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.co-set { display: inline-flex; }
.co-autosave { min-height: 0; }
.co-set .menu-btn, .co-kv .menu-btn { max-width: none; }
.co-set .menu-field { width: auto; min-width: 180px; gap: 12px; }
.co-set .menu-label { overflow: visible; text-overflow: clip; }
.co-ref { white-space: nowrap; }
.co-table td:first-child a { color: var(--ink-900); font-weight: 500; text-decoration: none; }
.co-table td:first-child a:hover { text-decoration: underline; }
.co-table td { vertical-align: top; }
.co-table td .state { white-space: normal; }
.co-wrap b, .co-wrap > b { white-space: normal; overflow: visible; }

/* The rings: a framework's completion. */
.co-ring { width: 64px; height: 64px; flex: none; }
.co-ring-track { fill: none; stroke: var(--line-soft); stroke-width: 7; }
.co-ring-fill { fill: none; stroke: var(--live); stroke-width: 7; stroke-linecap: round; }
.co-ring text { font-size: 14px; font-weight: 600; fill: var(--ink-900); font-family: var(--font); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.co-rings { display: grid; gap: 12px; }
.co-ring-card { display: flex; align-items: center; gap: 16px; padding: 8px; margin: 0 -8px; border-radius: var(--r-row); color: inherit; text-decoration: none; }
.co-ring-card:hover { background: var(--hover); }
.co-ring-card > span { display: grid; gap: 2px; min-width: 0; }
.co-fw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.co-fw { display: flex; gap: 20px; align-items: flex-start; color: inherit; text-decoration: none; }
.co-fw:hover { border-color: var(--ink-400); }
.co-fw h2 { margin: 0 0 4px; font-size: var(--t-h); }
.co-fw p { margin: 0 0 6px; }
.co-fw-head { display: flex; gap: 20px; align-items: center; }
.co-fw-head p { margin: 0 0 4px; }

/* The six parts of a month's evidence. */
.co-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.co-parts a { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 -8px; border-radius: var(--r-control); color: inherit; text-decoration: none; }
.co-parts a:hover { background: var(--hover); }
.co-parts .state { min-width: 150px; }
.co-parts-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.co-parts-wide .cap { margin-left: auto; }
.co-mini { display: inline-flex; gap: 4px; }
.co-mini .dot { width: 8px; height: 8px; }
.co-headline { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.co-part { padding: 0; }
.co-part-head { display: flex; align-items: center; gap: 16px; padding: 18px 24px; cursor: pointer; list-style: none; }
.co-part-head::-webkit-details-marker { display: none; }
.co-part-head h2 { margin: 0; font-size: var(--t-h); min-width: 200px; }
.co-part-head .cap { margin-left: auto; }
.co-part-head::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--ink-400); border-bottom: 1.5px solid var(--ink-400); transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform 120ms var(--ease); }
.co-part[open] .co-part-head::after { transform: rotate(-135deg); margin-top: 4px; }
.co-part-body { padding: 0 24px 20px; }
.co-part-body > .muted { margin: 0 0 8px; }

/* My work. */
.co-work-row { display: flex; align-items: center; gap: 12px; }
.co-work-row .row-main { flex: 1; min-width: 0; color: inherit; text-decoration: none; }

/* A register: its board, its heat map, an entry. */
.co-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.co-col { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-card); padding: 12px; min-height: 160px; display: grid; align-content: start; gap: 10px; }
.co-col .section { margin: 0; font-size: var(--t-small); }
.co-col.over { border-color: var(--accent); background: var(--accent-soft); }
.co-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.co-card-item { padding: 12px 14px; display: grid; gap: 6px; cursor: grab; border-radius: var(--r-row); }
.co-card-item.dragging { opacity: 0.5; }
.co-card-item a { color: inherit; text-decoration: none; }
.co-card-item a b { font-weight: 600; }
.co-card-meta { font-size: var(--t-small); color: var(--ink-500); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.co-card-foot { font-size: var(--t-cap); display: flex; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; }
.co-card-foot > span { white-space: nowrap; }
.co-board-help { margin: 0; }
.co-section-tabs { margin: 0 0 16px; }
/* A tab's own filters, under the tabs (21 October 2026), never in the header. */
.co-filterbar { margin: -4px 0 16px; }
/* A Compliance fact reads as one line of text, so a link inside it ("Version 1, Acceptable use policy, approved by…") flows with its words. */
.co-kv > dd { display: block; }
/* A state's dot comes first, so its own baseline sits low beside a number ("12 • High"); its box lines up with the text instead. */
.co-kv > dd .state { vertical-align: top; }
.co-more { margin: 4px 0 12px; }
.co-more > summary { cursor: pointer; color: var(--ink-600); font-size: var(--t-small); padding: 6px 0; }
.co-heat { display: grid; grid-template-columns: 20px repeat(5, 36px); gap: 4px; align-items: center; }
.co-heat-axis { font-size: var(--t-cap); color: var(--ink-500); text-align: center; }
.co-heat-cell { height: 36px; border-radius: 6px; display: grid; place-items: center; font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--t-small); }
.co-lv-low { background: var(--green-bg); color: var(--green-fg); }
.co-lv-medium { background: var(--sand-bg); color: var(--sand-fg); }
.co-lv-high { background: var(--row-risk); color: var(--row-risk-ink); }
.co-lv-critical { background: var(--danger-soft); color: var(--danger); }
.co-entry { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap); align-items: start; }
.co-entry-main, .co-entry-side { display: grid; gap: var(--gap); min-width: 0; }
.co-fields { display: grid; gap: 0 16px; }
.co-fields-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.co-fields-grid .field:has(textarea) { grid-column: 1 / -1; }
.co-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.co-chip { position: relative; display: inline-flex; }
.co-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.co-chip span { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-700); font-size: var(--t-small); cursor: pointer; }
.co-chip input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--ink-900); font-weight: 500; }
.co-chip input:focus-visible + span { box-shadow: var(--accent-ring); }
.co-form [aria-invalid="true"] { border-color: var(--danger); }
.co-form .form-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.co-form-error { margin: 8px 0 0; }
.co-notes { margin-top: 12px; }
.co-note { white-space: pre-wrap; color: var(--ink-700); }
.co-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--t-small); }
.co-big { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.co-lines .row { min-height: 0; padding: 4px 0; }

/* People, access reviews, questionnaires, facts. */
.co-person { display: inline-flex; gap: 10px; align-items: center; }
.co-person > span { display: grid; }
.co-review-row { flex-wrap: wrap; }
.co-decide { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.co-qas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.co-qa { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.co-qa:last-child { border-bottom: 0; }
.co-qa-q { font-weight: 500; }
.co-qa-a { display: grid; gap: 6px; }
.co-qa-a p { margin: 0; }
.co-qa-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.co-finding { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.co-kb-review { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.co-facts { display: grid; gap: 0; }
.co-fact { padding: 12px 0; border-bottom: 1px solid var(--line-soft); display: grid; gap: 6px; }
.co-fact:last-child { border-bottom: 0; }
.co-fact-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.co-fact p { margin: 0; }

/* Drafting: the hazard log. */
.co-hazards .table { min-width: 1400px; }
.co-hazards td, .co-hazards th { vertical-align: top; }
.co-cell { min-width: 180px; font-size: var(--t-small); }
.co-cso { background: var(--surface-2); min-width: 150px; }
.co-checks .row { min-height: 0; padding: 6px 0; }
.co-doc h3 { font-size: var(--t-ui); margin: 18px 0 4px; }
.co-doc p { margin: 0 0 6px; max-width: 72ch; }

/* Reports. */
.co-report-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.co-report-list a { display: grid; gap: 6px; color: inherit; text-decoration: none; height: 100%; }
.co-report-list a:hover { border-color: var(--ink-400); }
.co-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.co-bars li { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: var(--t-small); }
.co-bar { display: flex; height: 10px; border-radius: 5px; background: var(--line-soft); overflow: hidden; }
.co-bar span { height: 100%; }
.co-bar-ok { background: var(--live); }
.co-bar-bad { background: var(--tone-due); }
.co-bar-quiet { background: var(--ink-400); }
.co-bar-figs { color: var(--ink-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-table tr[data-co-href] { cursor: pointer; }
.co-table tr[data-co-href]:hover td { background: var(--surface-2); }

@media (max-width: 1180px) {
  .co-entry { grid-template-columns: minmax(0, 1fr); }
  .co-report-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .co-two, .co-fw-grid, .co-parts-wide, .co-fields-grid, .co-report-list { grid-template-columns: minmax(0, 1fr); }
  .co-kv { grid-template-columns: minmax(0, 1fr); }
  .co-kv > dt { padding-bottom: 0; border-bottom: 0; }
  .co-search { max-width: none; margin-left: 0; }
  .co-bars li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .co-finding { grid-template-columns: minmax(0, 1fr); }
  .co-board { grid-auto-columns: minmax(78vw, 1fr); }
  .co-hazards .table { min-width: 1100px; }
  .co-page .notice { flex-wrap: wrap; }
  .co-notice-actions { margin-left: 0; }
  .page-actions:has(> .co-actions) { flex: 1 1 100%; margin-left: 0; min-width: 0; }
  .co-actions { justify-content: flex-start; }
  .co-page .toolbar > .filters { flex: 1 1 100%; }
  .co-card .card-head .meta { margin-left: 0; flex: 1 1 100%; }
  .co-actions .seg { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .co-actions .seg > * { flex: none; }
  .co-part-head { flex-wrap: wrap; gap: 6px 12px; padding: 16px; }
  .co-part-head h2 { min-width: 0; flex: 1 1 100%; }
  .co-part-body { padding: 0 16px 16px; }
}
.co-qa, .co-qa-a > * { min-width: 0; max-width: 100%; }
.co-qa .state { white-space: normal; }
.co-qa-tools .co-set { min-width: 0; max-width: 100%; }
.co-qa-tools .co-set .menu-btn { max-width: 100%; min-width: 0; }
.co-qa-tools .co-set .menu-label { overflow: hidden; text-overflow: ellipsis; }
.co-qa .textarea { width: 100%; box-sizing: border-box; }

/* The IMS (session C): an annex sits under its document, indented with a rule, as Confluence's page tree shows it;
   the control block's facts read in two columns on a laptop, the way BMS's Confluence pages print it. */
.co-table tr.co-annex td:first-child { padding-left: 32px; position: relative; }
.co-table tr.co-annex td:first-child::before { content: ""; position: absolute; left: 16px; top: 0; bottom: 50%; width: 10px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.co-control .co-kv { grid-template-columns: 120px minmax(0, 1fr) 120px minmax(0, 1fr); }
.co-read .co-accept, .co-reader .co-accept { margin-top: var(--gap); }
.co-superseded p { margin: 0; }
/* An associate's own page (/read): no Hub frame, the IMS in a readable column, on a phone first. */
body.co-reader { background: var(--canvas); margin: 0; }
.co-reader-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.co-reader-bar span { color: var(--ink-500); font-size: var(--t-small); }
.co-reader-who { margin-left: auto; }
.co-reader-main { max-width: 860px; margin: 0 auto; padding: 20px 16px 48px; display: grid; gap: var(--gap); }
.co-reader-main h1 { margin: 0; }
.co-approvers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.co-code { white-space: nowrap; }
.co-more { position: relative; }
.co-more > summary { list-style: none; }
.co-more > summary::-webkit-details-marker { display: none; }
.co-more-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: 2px; min-width: 210px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-float); }
.co-more-pop .btn { justify-content: flex-start; width: 100%; }
.co-approvers li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
@media (max-width: 767px) {
  .co-table.stack tr.co-annex { padding-left: 16px; border-left: 2px solid var(--line); }
  .co-table.stack tr.co-annex td:first-child { padding-left: 0; }
  .co-table.stack tr.co-annex td:first-child::before { content: none; }
  .co-control .co-kv { grid-template-columns: 110px minmax(0, 1fr); }
}

/* ------------------------------------------------------------- Projects --- */
.pj-joins { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 8px; }
.pj-joins .sep { color: var(--ink-400); }
/* Every rule here is Projects' own (.pj-*), so nothing it sets reaches another app.
   Linear's density and marks, in Home's look: white cards on the warm canvas, one accent. */

.pj-fav.on svg { fill: var(--tone-due); color: var(--tone-due); }
.pj-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); min-width: 0; }
.pj-page > * { margin: 0; min-width: 0; }
.pj-lede { color: var(--ink-500); margin: 0; max-width: 72ch; }
.pj-hint { margin: 0; }
.pj-h { margin: 0 0 10px; font-size: var(--t-h); font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.pj-h .count { color: var(--ink-500); font-weight: 500; font-variant-numeric: tabular-nums; }
.pj-empty { padding: 20px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--ink-500); }
.pj-empty p { margin: 0; flex: 1 1 280px; }
.pj-notfound { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; max-width: 520px; }
.pj-notfound p { margin: 0; }
.pj-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.pj-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pj-over { color: var(--danger); }
.pj-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; }
.pj-dialog-wide { width: min(680px, calc(100vw - 32px)); }

/* The marks: Linear's status circle and priority bars, the health dot. */
.pj-status { width: 15px; height: 15px; flex: none; fill: none; stroke-width: 1.6; }
.pj-status .pj-fill { stroke: none; }
.pj-s-backlog { color: var(--ink-400); }
.pj-s-not-started { color: var(--ink-500); }
.pj-s-in-progress { color: var(--accent); }
.pj-s-in-progress .pj-fill { fill: var(--accent); }
.pj-s-waiting { color: var(--sand-fg); }
.pj-s-waiting .pj-fill { fill: var(--sand-fg); }
.pj-s-completed { color: var(--live); }
.pj-s-completed .pj-fill, .pj-s-canceled .pj-fill { fill: currentColor; }
.pj-s-canceled { color: var(--ink-400); }
.pj-status .pj-tick { stroke: var(--surface); stroke-width: 1.8; }
.pj-prio { width: 15px; height: 15px; flex: none; }
.pj-prio rect { fill: var(--line); stroke: none; }
.pj-prio rect.on { fill: var(--ink-700); }
.pj-prio.none circle { fill: var(--ink-400); stroke: none; }
.pj-health .dot { width: 8px; height: 8px; }
.dot.pj-h-done { background: var(--live); }
.dot.pj-h-due { background: var(--tone-due); }
.dot.pj-h-risk { background: var(--danger); }
.dot.pj-h-off { background: var(--ink-400); }
.pj-health .muted, .pj-due-word { font-size: var(--t-cap); margin-left: 2px; }
.pj-due-word { color: var(--tone-due); font-weight: 500; }
.pj-ctile { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.pj-ctile.sm { width: 24px; height: 24px; border-radius: 7px; font-size: 10px; }
.pj-ctile.lg { width: 48px; height: 48px; border-radius: 14px; font-size: 16px; }
.pj-t0 { background: var(--green-bg); color: var(--green-fg); }
.pj-t1 { background: var(--indigo-bg); color: var(--indigo-fg); }
.pj-t2 { background: var(--sand-bg); color: var(--sand-fg); }
.pj-t3 { background: var(--rose-bg); color: var(--rose-fg); }
.pj-label { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--t-cap); color: var(--ink-700); white-space: nowrap; background: var(--surface); }
.pj-ldot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.pj-l-green { background: var(--green-fg); }
.pj-l-indigo { background: var(--indigo-fg); }
.pj-l-sand { background: var(--sand-fg); }
.pj-l-rose { background: var(--rose-fg); }
.pj-l-plain { background: var(--ink-400); }
.pj-bar { display: block; position: relative; height: 4px; border-radius: 2px; background: var(--line-soft); overflow: hidden; min-width: 40px; }
.pj-bar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--live); }
.pj-bar.over > span { background: var(--danger); }
.pj-card-days { margin-top: 6px; }
.pj-contact { display: grid; min-width: 0; }
.pj-contact-email { font-size: var(--t-cap); overflow-wrap: anywhere; }
.pj-newtask-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.pj-due-picks { display: flex; flex-wrap: wrap; gap: 4px; }
.pj-mytasks-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pj-views { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pj-task-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.pj-add-more > summary { cursor: pointer; color: var(--ink-600); font-size: var(--t-small); padding: 4px 0; }
.pj-dep-row { display: flex; align-items: center; gap: 4px; }
.pj-update-edit > summary { list-style: none; display: inline-flex; }
.pj-update-edit > summary::-webkit-details-marker { display: none; }
.pj-update-edit[open] { flex-basis: 100%; }
.pj-linedays { display: grid; gap: 4px; font-size: var(--t-small); color: var(--ink-600); }
.pj-linedays.low { color: var(--tone-due); }
.pj-linedays.low .pj-bar > span { background: var(--tone-due); }
.pj-linedays.over { color: var(--danger); }
.pj-ring { flex: none; }
.pj-ring circle { fill: none; stroke-width: 2.4; }
.pj-ring .track { stroke: var(--line); }
.pj-ring .fill { stroke: var(--live); stroke-linecap: round; }
.pj-due { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-small); color: var(--ink-500); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pj-due svg { width: 13px; height: 13px; }
.pj-due.due { color: var(--tone-due); }
.pj-due.risk { color: var(--danger); }
.pj-flag { font-size: var(--t-cap); font-weight: 500; padding: 1px 7px; border-radius: var(--r-pill); white-space: nowrap; }
.pj-flag.risk { background: var(--danger-soft); color: var(--danger); }
.pj-person { display: inline-flex; flex: none; }
.pj-person .avatar { width: 22px; height: 22px; font-size: 9px; }
.pj-person.none svg { width: 18px; height: 18px; color: var(--ink-400); }
.pj-ref { color: var(--ink-500); font-size: var(--t-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pj-meta { display: inline-block; color: var(--ink-500); font-size: var(--t-small); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.pj-meta svg { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }
.pj-count { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-500); font-size: var(--t-cap); }
.pj-count svg { width: 12px; height: 12px; }
.pj-subs { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-500); font-size: var(--t-cap); font-variant-numeric: tabular-nums; }

/* The toolbar: filters in force, the tools. */
.pj-toolbar { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.pj-filterbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.pj-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.pj-tool { height: 30px; padding: 0 10px; color: var(--ink-700); }
.pj-tool.btn-icon { width: 30px; padding: 0; }
.pj-tool[aria-current="true"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pj-fchip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px 0 10px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-size: var(--t-small); color: var(--ink-900); max-width: 100%; }
.pj-fchip span.muted { white-space: nowrap; }
.pj-fchip svg { width: 13px; height: 13px; color: var(--ink-500); flex: none; }
.pj-fchip:hover { border-color: var(--ink-400); }
.pj-fmatch { font-size: var(--t-cap); color: var(--ink-500); }
.pj-fgroup { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.pj-fgroup legend { font-weight: 500; margin-bottom: 6px; padding: 0; }
.pj-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-choice { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; font-size: var(--t-small); background: var(--surface); }
.pj-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pj-choice input { margin: 0; accent-color: var(--accent); }
.pj-choice-row { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; margin-top: 4px; }
.pj-filter-form, .pj-display-form { max-height: 60dvh; overflow-y: auto; padding-right: 4px; }

/* A list: groups of 40 px rows. */
.pj-list { overflow: hidden; }
.pj-group + .pj-group { border-top: 1px solid var(--line-soft); }
.pj-group-head { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px 6px 16px; background: var(--surface-2); font-size: var(--t-small); font-weight: 600; position: sticky; top: 0; z-index: 1; }
.pj-group-toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; color: var(--ink-900); cursor: pointer; padding: 4px 0; }
.pj-group-toggle .count { color: var(--ink-500); font-weight: 500; }
.pj-group-add { margin-left: auto; width: 28px; height: 28px; }
.pj-group.folded .pj-rows { display: none; }
.pj-rows { list-style: none; margin: 0; padding: 0; }
.pj-row { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 10px; border-bottom: 1px solid var(--line-soft); position: relative; background: var(--surface); }
.pj-rows > .pj-row:last-child { border-bottom: 0; }
.pj-row:hover { background: var(--surface-2); }
.pj-row.kbd-focus, .pj-row.peeked, .pj-card.kbd-focus, .pj-card.peeked { background: var(--accent-soft); }
.pj-row.selected, .pj-card.selected { background: var(--accent-soft); }
.pj-row.closed .pj-title b { color: var(--ink-500); }
.pj-row.pj-sub { padding-left: 34px; }
.pj-row-empty { padding: 10px 16px; color: var(--ink-500); font-size: var(--t-small); }
.pj-pick { display: inline-flex; width: 18px; justify-content: center; opacity: 0; }
.pj-row:hover .pj-pick, .pj-row.selected .pj-pick, .pj-row.kbd-focus .pj-pick, .pj-pick:focus-within { opacity: 1; }
.pj-pick input { margin: 0; accent-color: var(--accent); }
.pj-row .menu-icon { width: 26px; height: 26px; }
.pj-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; height: 40px; }
.pj-title b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pj-parent { color: var(--ink-500); font-size: var(--t-small); white-space: nowrap; }
.pj-right { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; }

/* The board: columns of cards. */
.pj-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.pj-lane { margin: 8px 0 0; font-size: var(--t-small); font-weight: 600; color: var(--ink-700); }
.pj-lane .count { color: var(--ink-500); font-weight: 500; }
.pj-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.pj-col { background: transparent; border: 0; border-radius: var(--r-card); padding: 0; min-width: 0; }
.pj-col-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 2px 2px 10px; min-height: 36px; box-sizing: border-box; font-size: var(--t-small); font-weight: 500; }
.pj-col-head .count { color: var(--ink-500); font-weight: 500; }
.pj-col-head .btn { margin-left: auto; width: 26px; height: 26px; }
.pj-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-height: 40px; border-radius: var(--r-row); }
.pj-cards.pj-drop-over { background: var(--accent-soft); }
.pj-col-empty { margin: 4px 0 0; padding: 8px 6px; color: var(--ink-400); font-size: var(--t-small); }
/* Notion's board (21 October 2026): a column is its status pill and its cards on the page, nothing boxed around it;
   each open column ends in a quiet New. */
.pj-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: var(--t-small); font-weight: 500; color: var(--ink-700); background: color-mix(in srgb, var(--ink-400) 16%, transparent); }
.pj-pill-progress, .pj-pill-in-progress { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pj-pill-waiting, .pj-pill-with-client, .pj-pill-client { color: var(--tone-due); background: color-mix(in srgb, var(--tone-due) 14%, transparent); }
.pj-pill-done, .pj-pill-completed { color: var(--live); background: color-mix(in srgb, var(--live) 14%, transparent); }
.pj-col-new { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 4px; padding: 8px 6px; border: 0; border-radius: var(--r-row); background: transparent; color: var(--ink-500); font: inherit; font-size: var(--t-small); text-align: left; cursor: pointer; }
.pj-col-new:hover { background: color-mix(in srgb, var(--ink-400) 10%, transparent); color: var(--ink-900); }
.pj-col-new svg { width: 14px; height: 14px; }
.pj-col .pj-card { border-color: var(--line-soft); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink-900) 6%, transparent); transition: background 120ms var(--ease), box-shadow 120ms var(--ease); }
.pj-col .pj-card:hover { background: var(--surface-2); box-shadow: 0 2px 8px color-mix(in srgb, var(--ink-900) 8%, transparent); }
.pj-col .pj-card .pj-card-top { margin-top: 2px; }
.pj-col .pj-card .pj-ref { color: var(--ink-400); font-size: var(--t-cap); }
.pj-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-row); padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; box-shadow: var(--shadow-hair); cursor: grab; }
.pj-card.dragging { opacity: 0.5; }
.pj-card.closed .pj-card-title b { color: var(--ink-500); }
.pj-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.pj-card-title { display: flex; align-items: flex-start; gap: 8px; text-decoration: none; color: inherit; }
.pj-card-title .pj-status, .pj-card-title .pj-ctile { margin-top: 2px; }
.pj-card-title b { font-weight: 500; line-height: 20px; overflow-wrap: anywhere; }
.pj-card-where { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--ink-500); font-size: var(--t-cap); }
.pj-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pj-card-foot .menu-icon { width: 24px; height: 24px; margin-left: -4px; }
.pj-move { position: absolute; top: 6px; right: 36px; opacity: 0; }
.pj-card:hover .pj-move, .pj-card:focus-within .pj-move { opacity: 1; }
.pj-move .menu-icon { width: 24px; height: 24px; background: var(--surface); }
.pj-colseg { display: none; }
.pj-pboard .pj-card { cursor: default; }

/* Insights: a bar per slice, split by how far along; a table says the same. */
.pj-insights { padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pj-insights-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.pj-insights-head h2 { margin: 0; font-size: var(--t-h); font-weight: 600; }
.pj-legend { display: inline-flex; gap: 12px; flex-wrap: wrap; font-size: var(--t-cap); color: var(--ink-500); margin-left: auto; }
.pj-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pj-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pj-c1 { background: var(--chart-1); }
.pj-c2 { background: var(--chart-2); }
.pj-c3 { background: var(--chart-3); }
.pj-gs { background: var(--ink-400); }
.pj-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pj-bars li { display: grid; grid-template-columns: minmax(90px, 180px) minmax(0, 1fr) 56px; align-items: center; gap: 12px; }
.pj-bar-label { font-size: var(--t-small); color: var(--ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-bar-track { display: flex; gap: 2px; height: 12px; min-width: 0; }
.pj-seg { display: block; height: 12px; min-width: 3px; }
.pj-seg:first-child { border-radius: 4px 0 0 4px; }
.pj-seg:last-child { border-radius: 0 4px 4px 0; }
.pj-seg:only-child { border-radius: 4px; }
.pj-bars b { text-align: right; font-weight: 600; font-size: var(--t-small); }
.pj-insights-table summary { cursor: pointer; color: var(--ink-500); font-size: var(--t-small); }
.pj-insights-table tfoot td { font-weight: 600; }
.pj-insights-empty { margin: 0; }

/* Calendar: the week's plan. */
.pj-cal-nav { display: flex; align-items: center; gap: 4px; }
.pj-cal-nav b { padding: 0 8px; font-variant-numeric: tabular-nums; }
/* The calendar, as the reference calendar's (21 October 2026): one surface, its toolbar, the weekday row, then the days; today's
   number ringed, chips with their status edge, three to a day in a month and then "+2 more". */
.pj-calx { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.pj-calx-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.pj-calx-bar .grow { flex: 1; }
.pj-calx-today { height: 32px; padding: 0 14px; border-radius: 999px; }
.pj-calx-title { margin-left: 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pj-calx-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line-soft); }
.pj-calx-dow span { padding: 10px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.pj-calx-dow span.weekend { background: var(--surface-2); }
.pj-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; }
.pj-cal-day { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); min-height: 128px; display: flex; flex-direction: column; min-width: 0; }
.pj-calx.week .pj-cal-day { min-height: 420px; border-bottom: 0; }
.pj-cal-day:nth-child(7n) { border-right: 0; }
.pj-cal-day.weekend { background: var(--surface-2); }
.pj-cal-day.out h3 b { color: var(--ink-400); }
.pj-cal-day h3 { margin: 0; padding: 8px 10px 4px; display: flex; align-items: center; gap: 6px; font-size: var(--t-small); font-weight: 500; color: var(--ink-500); }
.pj-cal-day h3 b { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 999px; font-size: 13px; color: var(--ink-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.pj-cal-day.today h3 b { background: var(--danger); color: var(--surface); }
.pj-cal-day h3 .count { margin-left: auto; color: var(--ink-400); font-size: var(--t-cap); }
.pj-cal-list { list-style: none; margin: 0; padding: 2px 6px 6px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; align-content: start; flex: 1; min-height: 40px; }
.pj-cal-list.pj-drop-over { background: var(--accent-soft); }
.pj-cal-task { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 6px 3px 6px; border: 0; border-left: 3px solid var(--ink-400); border-radius: 6px; background: color-mix(in srgb, var(--ink-400) 10%, var(--surface)); font-size: var(--t-cap); line-height: 16px; cursor: grab; }
.pj-cal-progress { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.pj-cal-client { border-left-color: var(--tone-due); background: color-mix(in srgb, var(--tone-due) 10%, var(--surface)); }
.pj-cal-done { border-left-color: var(--live); background: color-mix(in srgb, var(--live) 9%, var(--surface)); }
.pj-cal-task a { flex: 1; min-width: 0; text-decoration: none; color: var(--ink-900); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-calx.week .pj-cal-task { align-items: flex-start; padding: 6px 8px; }
.pj-calx.week .pj-cal-task a { white-space: normal; overflow-wrap: anywhere; }
.pj-cal-task .pj-person .avatar { width: 16px; height: 16px; font-size: 7px; }
.pj-cal-task .pj-person > span:not(.avatar) { display: none; }
.pj-cal-task .pj-prio { width: 12px; height: 12px; flex: none; }
.pj-cal-task.closed a { color: var(--ink-500); text-decoration: line-through; }
.pj-cal-more { margin: 0 8px 6px; font-size: var(--t-cap); color: var(--ink-500); text-decoration: none; }
.pj-cal-more:hover { color: var(--accent); }
.pj-cal-trays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.pj-tray { padding: 12px 8px 4px; }
.pj-tray h3 { margin: 0 8px 6px; font-size: var(--t-small); display: flex; gap: 6px; }

/* The peek: the task beside the list. */
.pj-peek { position: fixed; z-index: 55; top: 12px; right: 12px; bottom: 12px; width: min(560px, 46vw); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-float); overflow-y: auto; animation: fade 140ms var(--ease); }
.pj-peek[aria-busy="true"] { opacity: 0.7; }
.pj-pane-empty { padding: 24px; color: var(--ink-500); }

/* A task. */
.pj-task { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--gap); align-items: start; }
.pj-task.in-pane { grid-template-columns: minmax(0, 1fr); padding: 16px 20px 32px; gap: 16px; }
.pj-task.in-pane .pj-props { position: static; box-shadow: none; }
.pj-task-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.pj-task-where { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-500); font-size: var(--t-small); }
/* The task page has no page head (its title is the heading), so a phone gets its way back here. */
.pj-task-back { display: none; margin-left: -8px; }
@media (max-width: 767px) { .pj-task-back { display: inline-flex; } }
.pj-task-where a { color: var(--ink-700); text-decoration: none; }
.pj-task-where a:hover { color: var(--ink-900); }
.pj-task-where .sep { color: var(--ink-400); }
.pj-task-tools { margin-left: auto; display: inline-flex; gap: 2px; }
.pj-task-tools .btn { width: 30px; height: 30px; padding: 0; }
.pj-task-title { margin: -4px 0 0; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.015em; outline: none; border-radius: 6px; overflow-wrap: anywhere; }
.pj-task-title:focus { box-shadow: var(--accent-ring); }
.pj-notes-view { min-height: 28px; cursor: text; border-radius: 6px; }
.pj-notes-view:hover { background: var(--surface-2); }
.pj-notes-view p:last-child { margin-bottom: 0; }
.pj-versions { margin-top: 8px; font-size: var(--t-small); }
.pj-versions summary { cursor: pointer; color: var(--ink-500); }
.pj-versions ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pj-versions p { margin: 2px 0 0; color: var(--ink-700); }
.pj-origin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.pj-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--line); color: var(--ink-700); font-size: var(--t-body); background: var(--surface-2); border-radius: 0 8px 8px 0; }
.pj-subtasks .pj-rows { border: 1px solid var(--line-soft); border-radius: var(--r-row); overflow: hidden; }
.pj-subtasks .pj-rows:empty { display: none; }
.pj-add-sub { margin-top: 8px; }
.pj-add-rel, .pj-add-link { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pj-add-rel .menu-field { width: 160px; }
.pj-add-rel .input, .pj-add-link .input { flex: 1 1 160px; width: auto; }
.pj-rel-list, .pj-link-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.pj-rel-list li, .pj-link-list li { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.pj-rel-list a, .pj-link-list a { color: var(--ink-900); text-decoration: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-link-list svg { width: 15px; height: 15px; color: var(--ink-500); flex: none; }
.pj-acts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pj-act { display: flex; gap: 10px; align-items: baseline; font-size: var(--t-small); color: var(--ink-700); }
.pj-act p { margin: 0; }
.pj-act-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-400); flex: none; transform: translateY(-2px); display: inline-block; margin-right: 6px; }
.pj-comment { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-row); background: var(--surface); }
.pj-comment > div { flex: 1; min-width: 0; }
.pj-comment-by { margin: 0 0 4px; font-size: var(--t-small); }
.pj-comment-box { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pj-comment-box .textarea { min-height: 64px; }
.pj-comment-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pj-reacts { display: flex; gap: 4px; flex-wrap: wrap; }
.pj-react { height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.pj-react span { font-size: var(--t-cap); color: var(--ink-500); font-variant-numeric: tabular-nums; }
.pj-react.on { border-color: var(--accent); background: var(--accent-soft); }
.pj-react[data-empty] { opacity: 0.45; }
.pj-react[data-empty]:hover, .pj-react[data-empty]:focus-visible { opacity: 1; }

/* The properties beside a task or a project. */
.pj-props { padding: 10px 14px 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; position: sticky; top: 16px; }
.pj-prop { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 38px; }
.pj-prop-name { color: var(--ink-500); font-size: var(--t-small); }
.pj-prop-value { min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pj-prop-value .menu-btn { margin-left: -8px; }
.pj-prop-value .menu-btn .pj-status, .pj-prop-value .menu-btn .pj-prio { margin-right: 4px; }
.pj-labels, .pj-members { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pj-members .avatar { width: 24px; height: 24px; font-size: 9px; }
.pj-inline-date, .pj-inline-days, .pj-inline-key { height: 30px; width: auto; max-width: 160px; margin-left: -6px; border-color: transparent; background: none; padding: 0 6px; }
.pj-inline-date:hover, .pj-inline-days:hover, .pj-inline-key:hover { border-color: var(--line); }
.pj-inline-date.risk { color: var(--danger); }
.pj-inline-date.due { color: var(--tone-due); }
.pj-inline-days { width: 90px; }
.pj-inline-key { width: 80px; text-transform: uppercase; }
.pj-props-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.pj-props-graph { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.pj-dep { display: block; font-size: var(--t-small); color: var(--ink-900); text-decoration: none; }
.pj-dep.risk { color: var(--danger); }

/* New task. */
.pj-newtask { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pj-newtask-title { height: 40px; font-size: 17px; font-weight: 500; border-color: transparent; padding: 0 4px; }
.pj-newtask-title:focus, .pj-newtask-notes:focus { box-shadow: none; border-color: transparent; }
.pj-newtask-notes { border-color: transparent; padding: 4px; min-height: 64px; }
.pj-newtask-props { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-newtask-props .menu-field { width: auto; height: 32px; font-size: var(--t-small); }
.pj-newtask-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-date { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-control); padding: 0 0 0 10px; height: 32px; font-size: var(--t-small); color: var(--ink-500); }
.pj-date .input { border: 0; height: 30px; width: 140px; padding: 0 8px; box-shadow: none; }
.pj-date .input[name=estimate] { width: 80px; }
.pj-similar { list-style: none; margin: 0; padding: 8px 12px; border-radius: var(--r-row); background: var(--row-soon); display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: var(--t-small); }
.pj-similar a { color: var(--ink-900); }
.pj-more { margin-right: auto; }
.pj-newtask-page .dialog-actions { flex-wrap: wrap; }

/* Bulk. */
.pj-bulk { position: fixed; z-index: 40; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 6px 8px 6px 16px; border-radius: 14px;
  background: var(--ink-900); color: var(--on-dark); box-shadow: var(--shadow-float); max-width: calc(100vw - 24px); overflow-x: auto; }
.pj-bulk [data-pj-bulk-count] { margin-right: 8px; white-space: nowrap; font-weight: 500; }
.pj-bulk .btn { color: var(--on-dark); height: 32px; }
.pj-bulk .btn:hover { background: var(--side-tile); color: var(--on-dark); }
.pj-bulk .btn-danger { color: var(--row-risk); }

/* Projects, the list. */
.pj-plist { overflow: hidden; }
.pj-plist-head, .pj-prow { display: grid; grid-template-columns: minmax(200px, 2.2fr) minmax(150px, 1.2fr) minmax(120px, 1fr) minmax(170px, 1.6fr) 90px 90px; gap: 16px; align-items: center; }
.pj-plist-head { padding: 10px 20px; font-size: var(--t-cap); color: var(--ink-500); border-bottom: 1px solid var(--line); }
.pj-client-head { padding: 8px 20px; }
.pj-prows { list-style: none; margin: 0; padding: 0; }
.pj-prow { padding: 12px 20px; border-bottom: 1px solid var(--line-soft); }
.pj-prow:hover { background: var(--surface-2); }
.pj-prow-name { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; text-decoration: none; color: inherit; min-width: 0; }
.pj-prow-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-prow-name .muted { font-size: var(--t-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-prow-health { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.pj-by { font-size: var(--t-cap); color: var(--ink-500); }
.pj-prow-lead { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--t-small); }
.pj-prow-lead span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-prow-lead .avatar { width: 24px; height: 24px; font-size: 9px; }
.pj-prow-tasks { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-small); }
.pj-prow-date { font-size: var(--t-small); color: var(--ink-700); }
.pj-rem { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.pj-rem + .pj-rem { margin-top: 8px; }
.pj-rem-top { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-cap); color: var(--ink-500); }
.pj-rem-top b { color: var(--ink-900); font-weight: 600; white-space: nowrap; }

/* A project. */
.pj-phead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; padding: 20px 24px 12px; align-items: start; }
.pj-phead-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.pj-phead-main > p { margin: 0; }
.pj-summary { color: var(--ink-700); outline: none; }
.pj-phead-facts { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: var(--t-small); }
.pj-lead { display: inline-flex; align-items: center; gap: 6px; }
.pj-lead .avatar { width: 22px; height: 22px; font-size: 9px; }
.pj-phead-tabs { grid-column: 1 / -1; margin-top: 8px; }
.pj-overview { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--gap); align-items: start; }
.pj-overview-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); min-width: 0; }
.pj-update { padding: 18px 22px; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
.pj-update > .avatar { width: 32px; height: 32px; font-size: 12px; }
.pj-feed.cr-sheet { gap: 0; }
.pj-feed.cr-sheet > * + * { border-top: 1px solid var(--line-soft); }
.pj-upd-main { display: grid; gap: 8px; min-width: 0; }
.pj-upd-who a { color: inherit; font-weight: 600; text-decoration: none; }
.pj-upd-who a:hover { color: var(--accent); }
.pj-upd-tags { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; font-size: var(--t-small); }
.pj-upd-tool, .pj-upd-reply > summary { border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-small); color: var(--ink-500); cursor: pointer; list-style: none; }
.pj-upd-reply > summary::-webkit-details-marker { display: none; }
.pj-upd-tool:hover, .pj-upd-reply > summary:hover { color: var(--ink-900); }
.pj-upd-tool.danger:hover { color: var(--danger); }
.pj-upd-reply[open] { flex-basis: 100%; order: 9; }
.pj-upd-reply form { margin-top: 8px; }
.pj-feed .pj-change { padding: 10px 22px 10px 66px; }
.pj-update-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.pj-update-head > a { text-decoration: none; color: inherit; }
.pj-update-by { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-small); }
.pj-update-by .avatar { width: 22px; height: 22px; font-size: 9px; }
.pj-update .prose { max-width: none; }
.pj-update-foot { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; }
.pj-update-comments { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pj-update-comments li { display: flex; gap: 10px; font-size: var(--t-small); }
.pj-update-comments p { margin: 0; }
.pj-update-reply .input { height: 32px; }
.pj-remaining { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pj-sow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pj-sow + .pj-sow { border-top: 1px solid var(--line-soft); padding-top: 14px; }
.pj-sow header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pj-sow header .muted { flex: 1; min-width: 0; font-size: var(--t-small); }
.pj-sow-left { font-size: var(--t-small); font-weight: 500; }
.pj-sow .cap { margin: 0; }
.pj-ws { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.pj-ws th { text-align: left; color: var(--ink-500); font-weight: 500; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line-soft); }
.pj-ws td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.pj-ws td a { color: var(--ink-900); text-decoration: none; display: block; margin-bottom: 4px; }
.pj-ws .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pj-ms-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.pj-ms { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 90px 32px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.pj-ms > svg { width: 14px; height: 14px; color: var(--ink-400); }
.pj-ms.next > svg { color: var(--tone-due); fill: var(--tone-due); }
.pj-ms a { text-decoration: none; color: inherit; }
.pj-ms p { margin: 2px 0 0; font-size: var(--t-small); }
.pj-ms-prog { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-small); }
.pj-ms-date { font-size: var(--t-small); text-align: right; }
.pj-add-doc { margin-top: 8px; }
.pj-graph { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.pj-graph svg { width: 100%; height: auto; }
.pj-graph path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pj-g-scope { stroke: var(--ink-400); }
.pj-g-started { stroke: var(--chart-1); }
.pj-g-done { stroke: var(--chart-3); }
.pj-g-hit { fill: transparent; stroke: none; }
.pj-g-hit:hover { fill: var(--hover); }
.pj-graph figcaption { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.pj-graph .pj-legend { margin-left: 0; }
.pj-feed { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.pj-change { margin: 0; padding: 0 22px; font-size: var(--t-small); color: var(--ink-700); }
.pj-composer { padding: 18px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pj-health-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pj-hchoice { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-row); cursor: pointer; }
.pj-hchoice input { position: absolute; opacity: 0; pointer-events: none; }
.pj-hchoice .muted { grid-column: 1 / -1; font-size: var(--t-cap); }
.pj-hchoice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pj-hchoice:has(input:focus-visible) { box-shadow: var(--accent-ring); }
.pj-since { background: var(--surface-2); border-radius: var(--r-row); padding: 10px 14px; font-size: var(--t-small); }
.pj-since summary { cursor: pointer; font-weight: 500; }
.pj-since ul { margin: 6px 0 0; padding-left: 18px; }
.pj-composer-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pj-composer-foot .btn-primary { margin-left: auto; }
.pj-share { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-small); color: var(--ink-700); }
.pj-shared { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-cap); color: var(--live); }
.pj-shared svg, .pj-portal svg { width: 13px; height: 13px; }
.pj-portal { display: inline-flex; align-items: center; gap: 6px; color: var(--live); }
/* A project's page in the record's language (21 October 2026): one line of facts, four figures, the tabs; the story
   in one sheet (the latest word, the milestones as steps, what is next, what is left) and the record in another. */
.pj-page > .cr-sub + .pj-summary { margin: -4px 0 0; }
.pj-page > .pj-summary { color: var(--ink-700); max-width: 72ch; }
.pj-page > .cr-figs + .rec-tabs { margin-top: 4px; }
.pj-in-portal { color: var(--live); }
.pj-in-portal svg { width: 14px; height: 14px; }
.pj-latest { display: grid; gap: 6px; margin-bottom: 10px; }
.pj-latest-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: var(--t-small); }
.pj-msteps { list-style: none; margin: 0 0 8px; padding: 0; display: grid; }
.pj-mstep { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.pj-mstep + .pj-mstep::before { content: ""; position: absolute; left: 11px; top: -8px; height: 18px; width: 2px; background: var(--line); }
.pj-mstep.done + .pj-mstep::before { background: var(--live); }
.pj-mstep-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: var(--surface); }
.pj-mstep.done .pj-mstep-dot { border-color: var(--live); background: var(--live); color: var(--surface); }
.pj-mstep.done .pj-mstep-dot svg { width: 13px; height: 13px; }
.pj-mstep.now .pj-mstep-dot { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.pj-mstep.late .pj-mstep-dot { border-color: var(--tone-due); }
.pj-mstep-text { display: grid; gap: 2px; flex: 1; min-width: 0; padding-top: 1px; }
.pj-mstep-text a { color: inherit; text-decoration: none; }
.pj-mstep-text a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.pj-mstep-text .muted { font-size: var(--t-small); }
.pj-mstep .btn-icon { opacity: 0; }
.pj-mstep:hover .btn-icon, .pj-mstep .btn-icon:focus-visible { opacity: 1; }
.pj-up { list-style: none; margin: 0; padding: 0; display: grid; }
.pj-up li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 0; }
.pj-up li + li { border-top: 1px solid var(--line-soft); }
.pj-up a { flex: 1; min-width: 0; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-up a:hover { color: var(--accent); }
.pj-up-due { flex: none; font-size: var(--t-small); color: var(--ink-500); font-variant-numeric: tabular-nums; }
.pj-up-due.pj-risk { color: var(--danger); }
.pj-up-due.pj-due { color: var(--tone-due); }
.pj-tdot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink-400); }
.pj-tdot.doing { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.pj-tdot.client { border-color: var(--tone-due); }
.cr-side .pj-props { position: static; padding: 0; margin-top: 12px; }
.cr-side .pj-prop { grid-template-columns: 88px minmax(0, 1fr); }
.cr-main .pj-remaining .pj-sow + .pj-sow { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.pj-catch { color: var(--ink-900) !important; }
.pj-form .field-label { font-weight: 500; }

/* Timeline. */
.pj-tl { --pj-tl-name: 260px; overflow: hidden; position: relative; }
/* The timeline, as the reference calendar's (21 October 2026): the names down the left, months over days, weeks or months, today
   ringed and its red line down the rows, each client's projects under its name, bars with a health edge. */
.pj-tl-axis { display: grid; grid-template-columns: var(--pj-tl-name) minmax(0, 1fr); border-bottom: 1px solid var(--line-soft); }
.pj-tl-namecol { display: flex; align-items: flex-end; gap: 6px; padding: 0 16px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.pj-tl-scale { position: relative; }
.pj-tl-months { position: relative; height: 28px; }
.pj-tl-months span { position: absolute; top: 8px; padding-left: 8px; font-size: var(--t-small); font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; border-left: 1px solid var(--line-soft); }
.pj-tl-units { position: relative; height: 40px; }
.pj-tl-units span { position: absolute; top: 0; bottom: 0; display: grid; justify-items: center; align-content: center; gap: 0; font-variant-numeric: tabular-nums; }
.pj-tl-units span.weekend { background: var(--surface-2); }
.pj-tl-units i { font-style: normal; font-size: 10px; font-weight: 600; color: var(--ink-500); text-transform: uppercase; }
.pj-tl-units b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink-700); }
.pj-tl-units span.today b { background: var(--danger); color: var(--surface); }
.pj-tl-units span.today i { color: var(--danger); }
.pj-tl-body { position: relative; }
.pj-tl-lines { position: absolute; top: 0; bottom: 0; left: var(--pj-tl-name); right: 0; pointer-events: none; }
.pj-tl-lines span { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line-soft); }
.pj-tl.quarter .pj-tl-lines span:nth-child(odd) { border-left-color: transparent; }
.pj-tl-todayline { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--danger); z-index: 3; pointer-events: none; }
.pj-tl-client { position: relative; z-index: 1; margin: 0; padding: 14px 16px 6px; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.pj-tl-client .count { color: var(--ink-400); }
.pj-tl-row { position: relative; z-index: 1; display: grid; grid-template-columns: var(--pj-tl-name) minmax(0, 1fr); align-items: center; min-height: 58px; border-bottom: 1px solid var(--line-soft); }
.pj-tl-group .pj-tl-row:last-child { border-bottom: 0; }
.pj-tl-name { display: flex; align-items: center; gap: 10px; padding: 6px 16px; text-decoration: none; color: inherit; min-width: 0; }
.pj-tl-name > span { display: grid; min-width: 0; }
.pj-tl-name b { font-weight: 600; font-size: var(--t-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-tl-name .muted { font-size: var(--t-cap); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-tl-name:hover b { color: var(--accent); }
.pj-tl-track { position: relative; height: 58px; }
.pj-tl-bar { position: absolute; top: 9px; height: 40px; border-radius: 8px; border: 0; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); display: flex; align-items: center; gap: 6px; overflow: hidden; cursor: grab; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink-900) 6%, transparent); }
.pj-tl-bar.pj-h-done { border-left-color: var(--live); background: color-mix(in srgb, var(--live) 10%, var(--surface)); }
.pj-tl-bar.pj-h-due { border-left-color: var(--tone-due); background: color-mix(in srgb, var(--tone-due) 11%, var(--surface)); }
.pj-tl-bar.pj-h-risk { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
.pj-tl-bar.pj-h-off { border-left-color: var(--ink-400); background: color-mix(in srgb, var(--ink-400) 12%, var(--surface)); }
.pj-tl-bar.late { box-shadow: inset 0 0 0 1px var(--tone-due); }
.pj-tl-bar.open-ended { mask-image: linear-gradient(90deg, black 85%, transparent); }
.pj-tl-bar.dragging { opacity: 0.8; cursor: grabbing; }
.pj-tl-label { display: grid; min-width: 0; flex: 1; padding-left: 4px; }
.pj-tl-label b { font-size: var(--t-small); font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-tl-label span { font-size: var(--t-cap); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-tl-dur { flex: none; padding-right: 4px; font-size: var(--t-cap); font-weight: 600; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.pj-tl-grip { width: 6px; align-self: stretch; cursor: ew-resize; flex: none; }
.pj-tl-ms { position: absolute; top: 2px; transform: translateX(-7px); color: var(--tone-due); z-index: 2; }
.pj-tl-ms svg { width: 14px; height: 14px; fill: var(--surface); }
.pj-tl-ms.done { color: var(--live); }
.pj-tl-ms.done svg { fill: var(--live); }
.pj-tl-phone { display: none; }

/* Health. */
.pj-hstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.pj-hstat { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; text-decoration: none; color: inherit; }
.pj-hstat b { font-size: 28px; line-height: 32px; font-weight: 700; }
.pj-hstat:hover { border-color: var(--ink-400); }

/* Views, people, suggestions. */
.pj-person-head { display: flex; align-items: center; gap: 10px; }
.pj-person-head p { margin: 0; }
.pj-suggests { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.pj-suggest { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.pj-suggest:last-child { border-bottom: 0; }
.pj-suggest-main { display: flex; gap: 12px; flex: 1 1 360px; min-width: 0; }
.pj-suggest-main p { margin: 2px 0 8px; font-size: var(--t-small); }
.pj-suggest-actions { display: flex; gap: 8px; }

/* Settings. */
.pj-settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.pj-setting { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.pj-setting p { margin: 2px 0 0; font-size: var(--t-small); }
.pj-setting-control { display: flex; justify-content: flex-end; }
.pj-setting-actions { padding-top: 12px; }
.pj-preview { margin-top: 12px; }
.pj-preview summary { cursor: pointer; font-weight: 500; }
.pj-mail { margin-top: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-row); background: var(--surface-2); }
.pj-mail pre { margin: 8px 0 0; white-space: pre-wrap; font-family: var(--font); font-size: var(--t-small); line-height: 20px; }
.pj-label-rows { list-style: none; margin: 0 0 12px; padding: 0; }
.pj-label-rows li { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(80px, 1fr) 90px auto auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.pj-workflow { list-style: none; margin: 0; padding: 0; }
.pj-workflow li { display: grid; grid-template-columns: 20px 140px 120px 1fr; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.pj-import { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.pj-import .field { margin: 0; min-width: 220px; }
.pj-import input[type=file] { flex: 1 1 240px; height: auto; padding: 6px; }
.pj-pick-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 50dvh; overflow-y: auto; }
.pj-prefs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }

@media (max-width: 1180px) {
  .pj-overview { grid-template-columns: minmax(0, 1fr); }
  .pj-overview .pj-props { position: static; }
  .pj-task { grid-template-columns: minmax(0, 1fr); }
  /* The title, notes and links first: the properties follow (the walk of 11 October found the title below the first screen). */
  .pj-task .pj-props { position: static; }
  .pj-plist-head { display: none; }
  .pj-prow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; }
  .pj-prow-name { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  /* Two rows on a phone: the filters (they scroll on their own), then the tools, all in sight (the walk of 11 October). */
  .pj-toolbar { gap: 8px; flex-wrap: wrap; }
  .pj-toolbar > .filters, .pj-toolbar > .pj-filterbar { flex: 1 1 100%; min-width: 0; }
  .pj-tools { margin-left: 0; flex-wrap: wrap; }
  .pj-filterbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pj-fchip { flex: none; }
  .pj-tool-word { display: none; }
  .pj-tool, .pj-tool.btn-icon { width: 44px; height: 44px; padding: 0; justify-content: center; flex: none; }
  .pj-tools .seg { flex: none; }
  .page-actions .pj-word { display: none; }
  .pj-row { min-height: 56px; flex-wrap: wrap; padding: 8px 12px; gap: 4px 8px; }
  .pj-title { flex: 1 1 calc(100% - 90px); height: auto; min-height: 36px; }
  .pj-title b { white-space: normal; }
  .pj-right { flex: 1 1 100%; flex-wrap: wrap; padding-left: 28px; }
  .pj-pick { display: none; }
  .pj-colseg { display: block; overflow-x: auto; }
  .pj-cols { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
  .pj-board .pj-col:not(.on) { display: none; }
  .pj-move { opacity: 1; right: 8px; }
  .pj-card-top .pj-person { margin-right: 32px; }
  .pj-cal { grid-template-columns: minmax(0, 1fr); }
  .pj-cal-day { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .pj-cal-day.weekend:has(.pj-cal-list:empty) { display: none; }
  .pj-calx-dow { display: none; }
  .pj-calx .pj-cal-day.out { display: none; }
  .pj-cal-list:empty { display: none; }
  .pj-cal-trays { grid-template-columns: minmax(0, 1fr); }
  .pj-props { padding: 6px 12px 12px; }
  .pj-prop { min-height: 44px; }
  .pj-task-title { font-size: 22px; line-height: 28px; }
  .pj-peek { inset: auto 0 0 0; width: 100%; max-height: 92dvh; border-radius: var(--r-sheet) var(--r-sheet) 0 0; }
  .pj-phead { padding: 16px; grid-template-columns: auto minmax(0, 1fr); }
  .pj-phead-tabs { overflow-x: auto; }
  .pj-ms { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .pj-ms-date { grid-column: 2; text-align: left; }
  .pj-ms .btn { grid-column: 3; grid-row: 1; }
  .pj-health-choices { grid-template-columns: minmax(0, 1fr); }
  .pj-prow { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  .pj-prow > span[data-label]::before { content: attr(data-label); display: block; font-size: var(--t-cap); color: var(--ink-500); margin-bottom: 2px; }
  .pj-prow-tasks, .pj-prow-date { display: flex; gap: 6px; flex-wrap: wrap; }
  .pj-tl { display: none; }
  .pj-tl-phone { display: block; }
  .pj-hstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-setting { grid-template-columns: minmax(0, 1fr); }
  .pj-setting-control { justify-content: flex-start; }
  .pj-label-rows li { grid-template-columns: 1fr 1fr; }
  .pj-workflow li { grid-template-columns: 20px 1fr 1fr; }
  .pj-workflow li span:last-child { grid-column: 2 / -1; }
  .pj-bulk { bottom: calc(var(--tabs) + 12px); }
  .pj-two { grid-template-columns: minmax(0, 1fr); }
  .pj-bars li { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) 44px; gap: 8px; }
  .pj-legend { margin-left: 0; }
  .pj-date .input { width: 150px; }
  .pj-comment-box .textarea { font-size: 16px; }
  /* New task on a phone: Create stays in reach above the tabs, however long the form. */
  .pj-newtask-page .dialog-actions { position: sticky; bottom: calc(var(--tabs) + env(safe-area-inset-bottom)); background: var(--surface); padding: 10px 0; margin: 0 -2px; z-index: 2; }
}
@media (prefers-reduced-motion: reduce) { .pj-peek { animation: none; } }

/* Beside CRM's list the panel's less-used fields fold under More fields. */
.pj-more-fields > summary { cursor: pointer; list-style: none; padding: 10px 0 6px; font-size: var(--t-small); font-weight: 500; color: var(--ink-500); }
.pj-more-fields > summary::-webkit-details-marker { display: none; }
.pj-more-fields > summary:hover { color: var(--accent); }
/* CRM's Tasks opens a task as Projects' panel; on a phone it is a page, and Tasks goes back to the list. */
.pj-split-back { justify-self: start; margin: 0 0 8px -8px; }
/* ================================================================ Sales ===== */
/* HubSpot Sales Hub's shapes and Pipedrive's board, in the Hub's look
   (docs/ledgers/sales.md). Every rule here is Sales' own (.sl-*), so nothing
   it sets reaches another app. */
.sl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sl-stage { font-weight: 500; }
.sl-line { color: var(--ink-500); font-size: var(--t-small); line-height: 18px; }
.sl-line.sl-due, td.sl-due { color: var(--tone-due); }
.sl-line.sl-risk { color: var(--danger); font-weight: 500; }
.sl-line.sl-live { color: var(--tone-up); }
.sl-tile { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.sl-tile.sm { width: 24px; height: 24px; border-radius: 7px; font-size: 10px; }
.sl-tile.lg { width: 44px; height: 44px; border-radius: 13px; font-size: 15px; }
.sl-t0 { background: var(--green-bg); color: var(--green-fg); }
.sl-t1 { background: var(--indigo-bg); color: var(--indigo-fg); }
.sl-t2 { background: var(--sand-bg); color: var(--sand-fg); }
.sl-t3 { background: var(--rose-bg); color: var(--rose-fg); }
.sl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sl-lede { margin: 0 0 16px; max-width: 72ch; }
.sl-big { font-size: 15px; line-height: 24px; margin: 0 0 8px; }
.sl-notfound p { margin: 0 0 12px; }
.sl-fu-row .sep, .sl-board-foot .sep { color: var(--ink-400); margin: 0 2px; }

/* The toolbar over a list or the board: the view, the filters as quiet menus, the page's own tools. */
.sl-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; min-width: 0; }
.sl-toolbar .sl-new { margin-left: auto; }
.sl-toolbar-note { font-size: var(--t-small); margin-left: auto; }
.sl-toolbar .filter-chip { gap: 6px; text-decoration: none; }
.sl-toolbar .filter-chip svg { width: 12px; height: 12px; flex: none; }
.sl-filterbar { display: contents; }
.sl-search { width: 220px; margin-right: 6px; }
.sl-tools { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.sl-toolbar { gap: 4px 6px; }
.sl-table td .sl-line { display: block; min-width: 150px; }
/* The leads table fits 1280 with its last column (complete.md, Pass 0): an email shortens before a column goes. */
@media (min-width: 768px) and (max-width: 1440px) {
  .sl-table td .sl-line { min-width: 130px; }
  .sl-table .sl-cell-sub { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.sl-tabs { display: flex; gap: 2px; align-items: center; border-bottom: 1px solid var(--line); margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.sl-tabs::-webkit-scrollbar { display: none; }
.sl-tab { height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--ink-500); text-decoration: none; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sl-tab svg { width: 12px; height: 12px; }
.sl-tab:hover { color: var(--ink-900); }
.sl-tab[aria-current="true"] { color: var(--ink-900); border-bottom-color: var(--ink-900); }
.sl-tab .count { color: var(--ink-500); font-variant-numeric: tabular-nums; }

/* The board: Tom's stages as columns, cards that say what is next in words. */
.sl-won-lines { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--line); border-radius: 10px; }
.sl-won-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; }
.sl-won-lines li + li { border-top: 1px solid var(--line-soft); }
.sl-won-makes ul { margin: 4px 0 6px; padding-left: 18px; display: grid; gap: 4px; }
.sl-won-makes > .cap:first-child { margin: 0; font-weight: 600; color: var(--ink-700); }
/* The returning client Mark as won found (sync fault 1): said first, parted from the rest by a hairline. */
.sl-won-match { display: grid; gap: 4px; padding: 0 0 12px; margin: 0 0 12px; border-bottom: 1px solid var(--line-soft); }
.sl-won-match p { margin: 0; }
.sl-won-match .sl-tick { margin-top: 6px; }
.sl-more { margin-top: 4px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.sl-more > summary { cursor: pointer; font-weight: 600; color: var(--ink-700); margin-bottom: 10px; }
.sl-svc-rate { margin-left: 6px; white-space: nowrap; }
.sl-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start; min-width: 0; }
.sl-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px; min-width: 0; }
.sl-col-client { background: transparent; border-style: dashed; }
.sl-col-head { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 4px 4px 8px; font-size: var(--t-small); font-weight: 600; }
.sl-col-head .count { color: var(--ink-500); font-weight: 500; font-variant-numeric: tabular-nums; }
.sl-col-sum { margin-left: auto; color: var(--ink-500); font-weight: 500; font-variant-numeric: tabular-nums; }
.sl-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-height: 44px; border-radius: var(--r-row); transition: background 120ms var(--ease); }
.sl-cards.over, .sl-zone.over { background: var(--accent-soft); }
.sl-col-empty { padding: 10px; color: var(--ink-500); font-size: var(--t-small); text-align: center; }
.sl-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-row); padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; box-shadow: var(--shadow-hair); }
.sl-card[draggable="true"] { cursor: grab; }
.sl-card.dragging { opacity: 0.5; }
.sl-card.kbd-focus { background: var(--accent-soft); }
.sl-card-title { display: flex; align-items: flex-start; gap: 8px; text-decoration: none; color: inherit; padding-right: 30px; }
.sl-card-title b { font-weight: 500; line-height: 22px; overflow-wrap: anywhere; }
.sl-card-who, .sl-card-svc { color: var(--ink-500); font-size: var(--t-cap); line-height: var(--t-cap-lh); overflow-wrap: anywhere; }
.sl-card-foot { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-top: 2px; min-height: 26px; }
.sl-card-end { display: flex; align-items: center; gap: 8px; flex: none; }
.sl-est { color: var(--ink-700); font-size: var(--t-cap); font-variant-numeric: tabular-nums; }
.sl-card-menu { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; }
.sl-card-client .sl-card-title { padding-right: 0; }
.sl-days { display: grid; gap: 4px; }
.sl-days-bar { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.sl-days-bar i { display: block; height: 100%; background: var(--live); border-radius: 2px; }
.sl-board-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; color: var(--ink-700); }
.sl-board-foot a { color: inherit; text-decoration: none; font-weight: 500; }
.sl-board-foot a:hover { text-decoration: underline; }
.sl-board-foot .count { color: var(--ink-500); font-variant-numeric: tabular-nums; }
.sl-dropzones { display: none; gap: 12px; width: 100%; margin-top: 8px; }
body.sl-dragging .sl-dropzones { display: grid; grid-template-columns: 1fr 1fr; }
.sl-zone { height: 56px; border: 1px dashed var(--line); border-radius: var(--r-row); display: grid; place-items: center; color: var(--ink-500); font-weight: 500; background: var(--surface); }
.sl-zone.danger { color: var(--danger); }
.sl-colseg { display: none; margin-bottom: 10px; }

/* Lists: the leads table, Follow-ups, Meetings, Proposals. */
.sl-table-card { overflow: hidden; }
.sl-table { min-width: 720px; }
.sl-table td, .sl-table th { padding-left: 0; }
.sl-table td:first-child, .sl-table th:first-child { padding-left: 16px; }
.sl-check { width: 36px; }
.sl-lead-cell { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 180px; }
.sl-lead-cell b { font-weight: 500; }
.sl-cell-sub { display: block; }
.sl-owner { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sl-table tr.kbd-focus td { background: var(--accent-soft); }
.sl-fu-row, .sl-call-row, .sl-enq { gap: 12px; }
.sl-fu-lead { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; text-decoration: none; color: inherit; }
.sl-fu-lead .row-title b { white-space: normal; }
.sl-fu-why { font-size: var(--t-small); color: var(--ink-700); }
.sl-fu-row.kbd-focus { background: var(--accent-soft); }
.sl-bulk { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 55; display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 16px; background: var(--ink-900); color: var(--on-dark); border-radius: 14px; box-shadow: var(--shadow-float); max-width: calc(100vw - 32px); flex-wrap: wrap; }
.sl-bulk .btn, .sl-bulk .menu-btn { color: var(--on-dark); }
.sl-bulk .btn:hover, .sl-bulk .menu-btn:hover { background: var(--side-hover); }
.sl-bulk .menu-chevron { color: var(--side-ink); }
.sl-bulk [data-sl-bulk-count] { font-weight: 600; margin-right: 8px; font-variant-numeric: tabular-nums; }
.sl-colpick { display: grid; gap: 8px; margin-bottom: 16px; }

/* Forms in sheets and dialogs. */
.sl-sheet-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sl-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sl-pair > .field { min-width: 0; }
.sl-fieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.sl-fieldset legend { font-weight: 500; margin-bottom: 8px; padding: 0; }
/* Each service its full name on its own line, the days and the rate under it, never cut (hub-pm, 11 October). */
.sl-svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px 20px; }
.sl-svc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.sl-svc .sl-tick { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
.sl-svc-value { width: 120px; flex: none; height: 30px; margin-left: 24px; }
/* Requested or Recommended, on the days box's line (ready.md 3.3, item 1). */
.sl-svc .menu-field { width: auto; flex: 1 1 120px; max-width: 170px; height: 30px; min-height: 30px; }
.sl-tick { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; line-height: 20px; }
.sl-tick input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.sl-picks { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
.sl-pick { height: 26px; padding: 0 8px; font-size: var(--t-cap); color: var(--ink-500); }
.sl-similar { background: var(--row-risk); border-radius: var(--r-row); padding: 10px 14px; margin: 0 0 16px; }
.sl-similar p { margin: 0 0 4px; }
.sl-similar ul { margin: 0 0 8px; padding-left: 18px; }
.sl-radios { display: grid; gap: 8px; }
.sl-radio { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.sl-radio input { accent-color: var(--accent); }
.sl-slots { display: grid; gap: 14px; max-height: 50vh; overflow-y: auto; }
.sl-slot-day h3 { margin: 0 0 6px; font-size: var(--t-small); font-weight: 600; }
.sl-slot-times, .sl-ptimes { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-slot { position: relative; }
.sl-slot input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sl-slot span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); font-variant-numeric: tabular-nums; font-weight: 500; }
.sl-slot input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-dark); }
.sl-slot input:focus-visible + span { box-shadow: var(--accent-ring); }
.sl-newlead { padding: 24px; max-width: 760px; }
.sl-newlead .sheet-body { padding: 0; overflow: visible; }
.sl-newlead .sheet-foot { padding: 16px 0 0; border: 0; justify-content: flex-start; }

/* A lead's About, services and timeline; a meeting's page keeps the two-column grid. A lead's surfaces are the shared
   record section's, with its own pieces under "A lead, in the record's surfaces" below. */
.sl-record-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap); align-items: start; }
.sl-record-main, .sl-record-rail { display: grid; gap: var(--gap); min-width: 0; }
.sl-kv { grid-template-columns: 110px minmax(0, 1fr); }
.sl-kv > dd { display: block; overflow-wrap: anywhere; min-width: 0; }
.sl-kv > dd .state { white-space: normal; align-items: baseline; }
.sl-svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sl-svc-list li { display: flex; justify-content: space-between; gap: 8px; }
.sl-tl-filters { margin: 0 0 12px; }
.sl-notebox { display: grid; gap: 8px; margin: 0 0 12px; }
.sl-notebox .textarea { min-height: 64px; }
.sl-notebox-foot { display: flex; justify-content: flex-end; }
.sl-tl { list-style: none; margin: 0; padding: 0; }
.sl-tl-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.sl-tl-icon { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--canvas); display: grid; place-items: center; color: var(--ink-500); }
.sl-tl-icon svg { width: 14px; height: 14px; }
.sl-tl-main { min-width: 0; flex: 1; display: grid; gap: 4px; }
.sl-tl-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.sl-tl-head a { color: inherit; text-decoration: none; }
.sl-tl-head a:hover b { text-decoration: underline; }
.sl-tl-head b { font-weight: 500; overflow-wrap: anywhere; }
.sl-tl-when { margin-left: auto; color: var(--ink-500); font-size: var(--t-cap); white-space: nowrap; }
/* On a phone a long "who" ("Aoife Corran (from the booking page)") wraps; the time stays whole (QA-24 at 390). */
@media (max-width: 767px) { .sl-tl-when { white-space: normal; text-align: right; } .sl-tl-when time { white-space: nowrap; } }
.sl-tl-body { color: var(--ink-700); font-size: var(--t-small); line-height: 20px; overflow-wrap: anywhere; }
.sl-tl-body p { margin: 0 0 4px; }
.sl-feed { padding: 8px var(--card-x); }
.sl-feed .sl-tl-row:first-child { border-top: 0; }

/* Leads, in CRM's list (hub-sales-finish, 21 October 2026): CRM's classes as they are (hub-finish's); only this. */
.sl-index-tools { flex-wrap: nowrap; }
.sl-index-tools .search.grow { flex: 0 1 200px; min-width: 150px; }
.sl-index-tools .quick-filters { flex-wrap: nowrap; flex: none; }
.sl-leads .crm-table .sl-owner { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sl-leads .crm-table .sl-nhs { margin-left: 8px; font-size: var(--t-cap); }
@media (max-width: 767px) { .sl-index-tools { flex-wrap: wrap; } .sl-index-tools .search.grow { flex: 1 1 100%; } .sl-index-tools .quick-filters { flex-wrap: wrap; flex: 1 1 0; } .sl-index-tools > [data-sl-tools] { order: 5; } }

/* Follow-ups, as CRM's Tasks (hub-sales-finish, 21 October 2026): the kit's split view; a quiet line per lead, and its pane. */
.sl-fu-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sl-fu-list .sl-fu-group { display: flex; align-items: baseline; gap: 6px; padding: 14px 16px 6px; font-size: var(--t-small); font-weight: 600; color: var(--ink-700); border-top: 1px solid var(--line-soft); }
.sl-fu-list .sl-fu-group:first-child { border-top: 0; }
.sl-fu-list .sl-fu-group .count { color: var(--ink-400); font-weight: 500; }
.sl-fu-list .row-meta .crm-late { color: var(--tone-due); }
.sl-fu-pane { display: grid; gap: 16px; }
.sl-fu-back { display: none; justify-self: start; }
.sl-fu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sl-fu-title { margin: 0 0 6px; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
.sl-fu-title a { color: inherit; text-decoration: none; }
.sl-fu-title a:hover { color: var(--accent); }
.sl-fu-head .cr-sub { margin: 0; }
.sl-fu-due { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.sl-fu-due-when { font-weight: 600; color: var(--ink-900); }
.sl-fu-due-when .crm-late { color: var(--tone-due); }
.sl-said-full { margin: 0 0 4px; }
.sl-quote { margin: 0; color: var(--ink-700); }
.sl-fu-quick .sl-actions { flex-wrap: wrap; }
.sl-fu-acts { list-style: none; margin: 0; padding: 0; }
.sl-fu-acts li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.sl-fu-acts li:first-child { border-top: 0; padding-top: 0; }
.sl-fu-acts .cr-doc-meta { flex: none; white-space: nowrap; }
.sl-act-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-900); }
@media (max-width: 767px) { .sl-fu-back { display: inline-flex; } .sl-fu-head .sl-actions { width: 100%; } }

/* Meetings, as Follow-ups (hub-sales-finish, 21 October 2026): the time first on each row, the call's pane beside. */
.sl-meet-row { align-items: center; }
.sl-meet-time { flex: none; min-width: 52px; font-weight: 600; color: var(--ink-900); font-size: var(--t-small); }
.sl-fu-list .sl-meet-row .sl-meet-time { white-space: nowrap; }
.sl-brief-h { font-size: var(--t-small); font-weight: 600; color: var(--ink-700); margin: 12px 0 6px; }
.sl-brief-h:first-child { margin-top: 0; }
.sl-brief-meta { display: inline-flex; align-items: center; gap: 8px; }

/* Draft a proposal (hub-sales-finish, 21 October 2026): the services as lines with their days, a running total. */
.sl-prop { display: grid; gap: 8px; margin: 0 0 18px; }
.sl-prop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sl-prop-head h3 { margin: 0; font-size: var(--t-ui); font-weight: 600; }
.sl-prop-total { font-weight: 600; color: var(--ink-900); }
.sl-prop-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; }
.sl-prop-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px auto 32px; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; }
.sl-prop-row:not([hidden]) ~ .sl-prop-row:not([hidden]) { border-top: 1px solid var(--line-soft); }
.sl-prop-name { min-width: 0; font-weight: 500; color: var(--ink-900); }
.sl-prop-days { display: inline-flex; align-items: center; gap: 6px; }
.sl-prop-days .input { width: 56px; text-align: right; }
.sl-prop-row .menu-btn.menu-field { width: auto; min-width: 0; }
.sl-prop-none { margin: 0; }
/* The lead form's sections (hub-sales-finish, 21 October 2026): each a heading and its fields, parted by a hairline. */
.sl-form-sec { display: grid; gap: 12px; padding: 16px 0 4px; border-top: 1px solid var(--line-soft); }
.sl-form-sec:first-child { border-top: 0; padding-top: 0; }
.sl-form-sec > h3 { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--ink-700); }
.sl-form-sec .field { margin: 0; }
.sl-form-sec > .sl-prop { margin: 0; }
.sl-pair-wide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.sl-ch { margin-top: -4px; }
.sl-switch-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.sl-switch-row > input { margin-top: 3px; }
.sl-switch-row > span { display: grid; gap: 2px; }
.sl-more .sl-form-sec:first-of-type { border-top: 0; padding-top: 4px; }
.sl-prop-list:not(:has(.sl-prop-row:not([hidden]))) { display: none; }
.sl-lead-svc { grid-template-columns: minmax(0, 1fr) 92px 86px 32px; }
.sl-lead-svc .sl-svc-rate { text-align: right; white-space: nowrap; }
.sl-prop-add .menu-btn.menu-field { width: auto; }
@media (max-width: 767px) { .sl-prop-row { grid-template-columns: minmax(0, 1fr) auto 32px; } .sl-prop-row .menu-btn { grid-column: 1 / -1; } }

/* Reports (hub-sales-finish, 21 October 2026): figures first, then a chart per question in the record's sheet,
   with CRM's bars, columns, legend and the shared chart colours. Only the stacked bars are Sales' own. */
.sl-rp { margin-top: 16px; }
.sl-rp-tools .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sl-rp .cr-sec { display: grid; gap: 12px; align-content: start; }
.sl-rp .cr-sec-head { margin-bottom: 0; }
.sl-rp-wide { grid-column: 1 / -1; }
.sl-rp-read { margin: 0; color: var(--ink-700); }
.sl-stacks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sl-stacks li { display: grid; grid-template-columns: minmax(140px, 32%) minmax(0, 1fr) 76px; align-items: center; gap: 10px; }
.sl-rp .hbar { grid-template-columns: minmax(120px, 40%) minmax(0, 1fr) 56px; }
.sl-rp .hbar-val { white-space: nowrap; }
.sl-stack-label { display: grid; font-size: var(--t-small); color: var(--ink-900); min-width: 0; }
.sl-stack-label .cap { color: var(--ink-500); }
.sl-stack { display: flex; gap: 2px; height: 10px; border-radius: 5px; background: var(--viz-track); overflow: hidden; }
.sl-stack-part { display: block; height: 100%; width: var(--w); flex: none; }
.sl-stack-part:first-child { border-radius: 4px 0 0 4px; }
.sl-stack-part:last-child { border-radius: 0 4px 4px 0; }
.sl-stack-part:only-child { border-radius: 4px; }
.sl-k-lost { background: var(--ink-400); }
.legend .sl-k-lost { background: var(--ink-400); }
/* Capacity is the track itself: drawn to its length, the month's committed and proposed days on it. */
.sl-cap { background: linear-gradient(to right, var(--viz-track) var(--cap), transparent var(--cap)); box-shadow: none; }
.legend .sl-k-free { background: var(--viz-track); box-shadow: inset 0 0 0 1px var(--line); }
.sl-free { white-space: nowrap; }
.sl-rp-table > summary { cursor: pointer; font-size: var(--t-small); color: var(--ink-500); width: max-content; }
.sl-rp-table > summary:hover { color: var(--ink-900); }
.sl-rp-table[open] > summary { margin-bottom: 8px; }
@media (max-width: 767px) { .sl-stacks li { grid-template-columns: minmax(0, 1fr) 64px; } .sl-stack { grid-column: 1 / -1; grid-row: 2; } }

/* A lead, in the record's surfaces (hub-sales-finish, 20 October 2026): what the shared section doesn't hold. */
.sl-lead .cr-sub .menu-btn { padding-left: 0; gap: 8px; }
/* A figure that sets its own value opens its sheet: the link's look, as a button. */
.sl-lead button.sl-fig-btn { font: inherit; text-align: left; background: none; border: 0; border-left: 1px solid var(--line-soft); cursor: pointer; width: 100%; }
.sl-lead button.sl-fig-btn:first-child { border-left: 0; }
.sl-lead button.sl-fig-btn .cr-fig-sub { color: var(--accent); }
.sl-lead button.sl-fig-btn:hover { background: var(--surface-2); }
.sl-lead button.sl-fig-btn:focus-visible { outline: none; box-shadow: inset var(--accent-ring); }
.sl-svc-total { margin: 8px 0 0; text-align: right; font-weight: 600; color: var(--ink-900); }
.sl-lead .cr-sub .menu-btn .dot { margin: 0; }
.sl-summary .cr-sec { padding-bottom: 18px; }
.sl-step { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-900); }
.sl-step a { color: inherit; }
.sl-said { margin: 6px 0 0; color: var(--ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-said b { font-weight: 600; color: var(--ink-900); }
.sl-rows { list-style: none; margin: 0; padding: 0; }
.sl-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); min-height: 36px; }
.sl-row:first-child { border-top: 0; padding-top: 0; }
.sl-row-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; min-width: 0; }
.sl-row-title { color: var(--ink-900); font-weight: 500; }
.sl-row-title a { color: inherit; text-decoration: none; }
.sl-row-title a:hover { color: var(--accent); }
.sl-row-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-small); color: var(--ink-500); }
.sl-row-actions { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.sl-row-actions .btn { height: 28px; padding: 0 10px; }
.sl-row-actions .cap { color: var(--ink-500); }
.sl-activity .sl-tl-row:first-child { border-top: 0; }
.sl-links { list-style: none; margin: 0; padding: 0; }
.sl-links li a { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.sl-links li:first-child a { border-top: 0; padding-top: 0; }
.sl-link-title { color: var(--ink-900); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-links li a:hover .sl-link-title { color: var(--accent); }
.sl-lead .sl-kv dd { min-width: 0; }
/* An address wraps at its @ (the <wbr> after it), never mid-word. */
.sl-lead .sl-kv > dd .sl-email { overflow-wrap: normal; word-break: normal; }
.sl-lead .sl-kv { grid-template-columns: 118px minmax(0, 1fr); }
.sl-lead .sl-kv > dd .sl-site { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-new-menu { display: inline-flex; }
.sl-new-menu .menu-btn { width: auto; gap: 8px; }
@media (max-width: 720px) {
  .sl-row { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .sl-row-actions { grid-column: 2 / -1; justify-content: flex-start; }
  .sl-said { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* Meetings and a call's briefing. */
.sl-meet-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap); align-items: start; }
.sl-meet-grid .filters { margin-bottom: 12px; }
.sl-schedpage p { margin: 0 0 12px; }
.sl-brief h3 { margin: 16px 0 6px; font-size: var(--t-small); font-weight: 600; color: var(--ink-700); }
.sl-brief h3:first-of-type { margin-top: 0; }
.sl-brief-lines { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.sl-brief-lines li { line-height: 22px; }
.sl-src { display: inline-block; margin-left: 8px; color: var(--ink-500); font-size: var(--t-cap); }
.sl-actions-wrap { margin-top: 12px; }

/* Conversion: tables first, bars beside them. */
.sl-conv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--gap); }
.sl-conv-grid > section:first-child, .sl-conv-grid > .sl-wide { grid-column: 1 / -1; }
.sl-bar-col { width: 32%; }
.sl-bar { display: block; height: 8px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.sl-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.sl-few { margin-top: 10px; }

/* Settings and Import. */
.sl-panes { margin-bottom: 16px; }
.sl-pane { display: grid; gap: var(--gap); }
.sl-h { margin: 20px 0 4px; font-size: var(--t-h); font-weight: 600; }
.sl-h:first-child { margin-top: 0; }
.sl-setting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.sl-setting:last-child { border-bottom: 0; }
.sl-setting p { margin: 2px 0 0; font-size: var(--t-small); }
.sl-setting-control { display: flex; justify-content: flex-end; min-width: 0; }
.sl-setting-form { display: flex; gap: 6px; width: 100%; }
.sl-setting-form.wide { flex-direction: column; align-items: flex-end; }
.sl-drop-zone { display: flex; align-items: center; gap: 12px; padding: 22px; border: 1px dashed var(--line); border-radius: var(--r-card); cursor: pointer; background: var(--surface-2); }
.sl-drop-zone:hover { border-color: var(--ink-400); }
.sl-drop-zone svg { width: 20px; height: 20px; color: var(--ink-500); }
.sl-drop-zone span { display: grid; }
.sl-report { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--t-small); }

/* The public pages: the booking page, a visitor's call, the screening. */
.sl-public .auth { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.sl-public-card { width: min(640px, 100%); min-width: 0; }
.sl-public .auth-card { max-width: 100%; }
.sl-pdays { display: flex; gap: 4px; overflow-x: auto; margin: 16px 0 12px; scrollbar-width: none; }
.sl-pdays::-webkit-scrollbar { display: none; }
.sl-pdays a { flex: none; padding: 6px 10px; border-radius: var(--r-control); border: 1px solid var(--line); text-decoration: none; color: var(--ink-700); font-size: var(--t-small); font-weight: 500; }
.sl-pdays a[aria-current="true"] { background: var(--ink-900); border-color: var(--ink-900); color: var(--on-dark); }
.sl-pform { display: grid; gap: 4px; }
.sl-pform .sl-ptimes { margin-bottom: 16px; }
.sl-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sl-public-tick { margin: 4px 0 16px; font-size: var(--t-small); }
.sl-ph { margin: 20px 0 0; font-size: var(--t-h); }
.sl-pactions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.sl-pactions form { margin: 0; }
.sl-public .auth-card .btn-primary { width: auto; }

@media (max-width: 1023px) {
  .sl-record-grid, .sl-meet-grid { grid-template-columns: minmax(0, 1fr); }
  /* A meeting on one column: the call's facts, then the briefing. */
  .sl-record-main, .sl-record-rail { display: contents; }
  .sl-brief { order: 6; }
}
@media (max-width: 767px) {
  .sl-colseg { display: flex; }
  .sl-board { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
  .sl-board .sl-col:not(.on) { display: none; }
  .sl-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sl-search { width: 100%; margin: 0 0 6px; }
  .sl-toolbar .sl-new { margin-left: 0; }
  .sl-tools, .sl-toolbar-note { margin-left: 0; }
  .sl-kv { grid-template-columns: 1fr; }
  .sl-conv-grid { grid-template-columns: minmax(0, 1fr); }
  .sl-bar-col { display: none; }
  .sl-setting { grid-template-columns: minmax(0, 1fr); }
  .sl-setting-control { justify-content: flex-start; }
  .sl-fu-row, .sl-call-row, .sl-enq { flex-wrap: wrap; align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
  .sl-fu-row .row-action, .sl-call-row .row-action, .sl-enq .row-action { width: 100%; padding-left: 36px; }
  .sl-table { min-width: 0; }
  .sl-table td:first-child, .sl-table th:first-child { padding-left: 0; }
  .sl-table-card { padding: 0 16px; }
  .sl-bulk { bottom: calc(var(--tabs) + 12px); }
  .sl-svc-value { width: 116px; }
}
/* CRM's Tasks on a phone: the task opens as a page, with the way back to the list first, on the left. */