/* === ../shared/css/base.css === */
/* Shared base for Cockpit and Home: tokens, reset, typography and the common components.
   A page links this file first, then its own stylesheet. A page may override only --accent and --accent-soft.
   System fonts only: no web fonts are loaded. */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --serif: var(--display);  /* old name, kept so older rules keep working */

  --ground: #F2F2F7; --surface: #FFFFFF; --raised: #FFFFFF;
  --ink: #1C1C1E; --muted: #6E6E73;
  --line: rgba(60, 60, 67, .16);
  --fill: rgba(120, 120, 128, .12);      /* control track, tinted buttons */
  --inset: #F2F2F7;                      /* a card inside a card */
  --edge: transparent;                   /* card border: none in light (the shadow does it), a hairline in dark */
  --accent: #2F55D4; --accent-soft: #E6ECFC;
  --on-accent: #FFFFFF;                  /* text on a filled accent button */
  --on-prio: #FFFFFF;                    /* text on a filled P1/P2 badge */
  --p1: #C8332B; --p2: #D0731A; --p3: #2F6FB0; --p4: #7A8494;
  --good: #1F8A55; --good-bg: #E3F4EA;
  --bad: #B3261E; --bad-bg: #FBE7E5;
  --warn: #9A6200; --warn-bg: #FBF0DC;
  --shadow: 0 1px 2px rgb(0 0 0 / .04), 0 4px 14px rgb(0 0 0 / .05);
  --shadow-hover: 0 2px 4px rgb(0 0 0 / .05), 0 8px 22px rgb(0 0 0 / .08);
  --shadow-lg: 0 10px 40px rgb(0 0 0 / .18);

  --r-card: 12px; --r-ctl: 10px; --r-pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1); --dur: 180ms;
}
/* Dark: "none" is written as a zero shadow so it can be combined with a ring (box-shadow lists) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #000000; --surface: #1C1C1E; --raised: #2C2C2E;
    --ink: #F2F2F7; --muted: #98989F;
    --line: rgba(84, 84, 88, .55);
    --fill: rgba(118, 118, 128, .24);
    --inset: #2C2C2E;
    --edge: rgba(84, 84, 88, .55);
    --accent: #8AA6FF; --accent-soft: #232E4A;
    --on-accent: #0B1020;
    --p1: #FF7A70; --p2: #F5A54F; --p3: #77AEF0; --p4: #8D97A7;
    --on-prio: #1C1C1E;
    --good: #5CCF92; --good-bg: #173326;
    --bad: #FF8A80; --bad-bg: #3A1D1B;
    --warn: #E8B04E; --warn-bg: #33291A;
    --shadow: 0 0 #0000; --shadow-hover: 0 0 #0000;
    --shadow-lg: 0 10px 40px rgb(0 0 0 / .6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #000000; --surface: #1C1C1E; --raised: #2C2C2E;
  --ink: #F2F2F7; --muted: #98989F;
  --line: rgba(84, 84, 88, .55);
  --fill: rgba(118, 118, 128, .24);
  --inset: #2C2C2E;
  --edge: rgba(84, 84, 88, .55);
  --accent: #8AA6FF; --accent-soft: #232E4A;
  --on-accent: #0B1020;
  --p1: #FF7A70; --p2: #F5A54F; --p3: #77AEF0; --p4: #8D97A7;
  --on-prio: #1C1C1E;
  --good: #5CCF92; --good-bg: #173326;
  --bad: #FF8A80; --bad-bg: #3A1D1B;
  --warn: #E8B04E; --warn-bg: #33291A;
  --shadow: 0 0 #0000; --shadow-hover: 0 0 #0000;
  --shadow-lg: 0 10px 40px rgb(0 0 0 / .6);
}

/* ---------- Reset and type ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }  /* the hidden attribute must win over components that set display */
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--ground); color: var(--ink);
  font: 15px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  padding: 0 0 env(safe-area-inset-bottom, 0);
}
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

h1 { font: 700 clamp(28px, 4vw, 34px)/1.1 var(--display); letter-spacing: -0.02em; margin: 28px 0 4px; text-wrap: balance; }
h2 { font: 600 20px/1.25 var(--display); letter-spacing: -0.01em; margin: 32px 0 10px; }
h3 { font-size: 15px; font-weight: 600; }
.hint { font: 400 13px/1.3 var(--sans); letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.hint.mono { font-family: var(--mono); }
.sub { color: var(--muted); font-size: 15px; margin: 0; }
.eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Page frame: header bar, brand switch, nav ---------- */
.wrap { margin: 0 auto; padding-inline: max(clamp(16px, 2.5vw, 40px), env(safe-area-inset-left, 0px)) max(clamp(16px, 2.5vw, 40px), env(safe-area-inset-right, 0px)); padding-block: 0 64px; }
/* Sticks at the very top; the bar's own background fills the status-bar / Dynamic Island strip */
header.top {
  position: sticky; top: 0; z-index: 5;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--ground) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.top { background: var(--ground); }
}
header.top .wrap { display: flex; align-items: center; gap: 16px; padding-block: 10px; flex-wrap: wrap; }
.brand { margin-right: auto; }
nav { display: flex; gap: 2px; flex-wrap: wrap; row-gap: 4px; }
nav a {
  color: var(--muted); font: 500 14px/1.3 var(--sans); padding: 6px 12px; border-radius: var(--r-pill);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
nav a:hover { background: var(--fill); color: var(--ink); text-decoration: none; }
nav a[aria-current="page"] { background: var(--raised); color: var(--ink); box-shadow: 0 0 0 1px var(--edge), var(--shadow); }
.who { font-size: 13px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
/* Switch between the two pages (Cockpit, Home): a segmented control, the current one selected */
.appswitch { display: inline-flex; align-self: center; gap: 2px; padding: 2px; border-radius: var(--r-ctl); background: var(--fill); }
.appswitch a { font: 600 15px/1.3 var(--display); letter-spacing: -0.01em; text-decoration: none; color: var(--muted); padding: 4px 12px; border-radius: 8px; white-space: nowrap; transition: color var(--dur) var(--ease); }
.appswitch a:hover { color: var(--ink); text-decoration: none; }
.appswitch a[aria-current="page"] { background: var(--raised); color: var(--ink); box-shadow: 0 0 0 1px var(--edge), var(--shadow); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 500 14px/1.25 var(--sans); background: var(--accent); color: var(--on-accent);
  border: 0; border-radius: var(--r-ctl); padding: 8px 14px; cursor: pointer; white-space: nowrap;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.btn:hover { filter: brightness(1.06); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: default; filter: none; transform: none; }
.btn.ghost { background: var(--fill); color: var(--ink); }
.btn.ghost[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.btn.bad, .btn.ghost.bad { color: var(--bad); }
.btn.bad:not(.ghost) { background: var(--bad-bg); }
.linkbtn { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font-size: 13px; text-decoration: none; }
.linkbtn:hover { text-decoration: underline; }
.linkbtn:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.linkbtn.lg { font-size: 14px; }
/* Small action on a card */
.qa {
  font: 500 12.5px/1.3 var(--sans); padding: 4px 10px; border-radius: 8px; border: 0;
  background: var(--fill); color: var(--ink); cursor: pointer;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.qa:hover { filter: brightness(.97); }
.qa:active { transform: scale(.97); }
.qa.ok { color: var(--good); background: var(--good-bg); }
.qa.bad { color: var(--bad); background: var(--bad-bg); }
.qa.bad.arm, .btn.bad.arm, .btn.ghost.bad.arm { color: var(--on-prio); background: var(--bad); }  /* second tap of a two-tap confirm */
/* Birthday answer: square icon button, wished (cake) or not (struck cake); aria-label and title name it */
.bdbtn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 8px; border: 0; cursor: pointer;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bdbtn:hover { filter: brightness(.96); }
.bdbtn:active { transform: scale(.96); }
.bdbtn:disabled { opacity: .55; cursor: default; filter: none; transform: none; }
.bdbtn.yes { color: var(--good); background: var(--good-bg); }
.bdbtn.no { color: var(--bad); background: var(--bad-bg); }
@media (max-width: 720px) { .bdbtn { width: 44px; height: 44px; } }

/* ---------- Segmented controls and chips ---------- */
.chips, .viewswitch, .seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--fill); border-radius: var(--r-ctl); max-width: 100%; }
.chips button, .viewswitch button {
  font: 500 13px/1.3 var(--sans); color: var(--ink); background: transparent; border: 0;
  border-radius: 8px; padding: 5px 12px; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.chips button[aria-pressed="true"], .viewswitch button[aria-pressed="true"] { background: var(--raised); box-shadow: 0 0 0 1px var(--edge), var(--shadow); }
.chips .n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; margin-left: 5px; color: var(--muted); }
/* Priority picker: the checked segment takes its priority colour */
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; pointer-events: none; }  /* anchored, or the hidden radios widen the form on a phone */
.seg span { display: inline-block; font: 600 13px/1.3 var(--mono); padding: 5px 14px; border-radius: 8px; color: var(--muted); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.seg label:hover span { color: var(--ink); }
.seg input:checked + span { color: var(--on-prio); box-shadow: var(--shadow); }
.seg .p1 input:checked + span { background: var(--p1); }
.seg .p2 input:checked + span { background: var(--p2); }
.seg .p3 input:checked + span { background: var(--p3); }
.seg .p4 input:checked + span { background: var(--p4); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Inputs ---------- */
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]), select, textarea) {
  font: 14px/1.3 var(--sans); color: var(--ink); background-color: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 8px 11px; min-width: 0;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]), select, textarea):focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
:where(select:not([multiple])) {
  -webkit-appearance: none; appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%238E8E93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
:where(input[type="search"]) {
  -webkit-appearance: none; appearance: none; padding-left: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.75' fill='none' stroke='%238E8E93' stroke-width='1.6'/%3E%3Cpath d='m10.5 10.5 3 3' stroke='%238E8E93' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 11px center;
}
:where(textarea) { resize: vertical; line-height: 1.45; }
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); }
::placeholder { color: var(--muted); opacity: .8; }

/* ---------- Pills ---------- */
.pill { display: inline-block; font: 500 11.5px/1.45 var(--sans); padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; vertical-align: baseline; color: var(--muted); background: var(--fill); }
a.pill:hover { text-decoration: none; filter: brightness(.97); }

/* ---------- Cards and grouped lists ---------- */
.card { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: var(--shadow); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; justify-content: space-between; align-items: baseline; }
.list li:last-child { border-bottom: 0; }
/* Inset grouped table */
.tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font: 600 12px/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: baseline; }
th:first-child, td:first-child { padding-left: 16px; }
th:last-child, td:last-child { padding-right: 16px; }
tbody tr:last-child > td { border-bottom: 0; }
th.num, td.num { text-align: right; }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
tbody tr { transition: background-color var(--dur) var(--ease); }
@media (hover: hover) { .tablewrap tbody tr:hover { background: var(--fill); } }

/* ---------- Notice, skeleton ---------- */
.notice { margin-top: 20px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: var(--shadow); color: var(--muted); }
.notice.err { color: var(--bad); background: var(--bad-bg); box-shadow: none; border-color: transparent; }
.skel { height: 74px; border-radius: var(--r-card); background: linear-gradient(90deg, var(--surface) 0%, var(--fill) 50%, var(--surface) 100%); background-size: 200% 100%; animation: skel 1.4s linear infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- Tabs: a scrollable strip of pills ---------- */
.tabs { display: flex; gap: 4px; margin-top: 26px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button, .tabs a {
  display: inline-flex; align-items: center; font: 500 14px/1.3 var(--sans); color: var(--muted);
  background: none; border: 0; border-radius: var(--r-pill); padding: 7px 14px; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tabs button:hover, .tabs a:hover { color: var(--ink); background: var(--fill); text-decoration: none; }
.tabs [aria-selected="true"], .tabs [aria-selected="true"]:hover { color: var(--ink); background: var(--raised); box-shadow: 0 0 0 1px var(--edge), var(--shadow); }
.tabs .n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; margin-left: 6px; color: var(--muted); }

/* ---------- Dialog sheet ---------- */
dialog { border: 0; border-radius: 16px; padding: 18px 20px; background: var(--ground); color: var(--ink); box-shadow: var(--shadow-lg); max-height: calc(100vh - 48px); }
dialog::backdrop { background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog[open] { animation: sheet-in 200ms var(--ease); }
dialog[open]::backdrop { animation: fade-in 200ms var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50;
  max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: var(--r-pill);
  font: 500 14px/1.35 var(--sans); color: var(--ground);
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  animation: toast-in 220ms var(--ease);
}
#toast.bad { background: var(--bad); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Login ---------- */
.login {
  width: min(380px, calc(100% - 32px)); margin: calc(12vh + env(safe-area-inset-top, 0px)) auto 0;
  padding: 28px; display: grid; gap: 12px;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 16px; box-shadow: var(--shadow);
}
.login h1 { margin: 0 0 2px; }
.login .stack { display: grid; gap: 12px; }
.login label { display: grid; gap: 5px; font-size: 13px; color: var(--muted); }
.login input { width: 100%; font-size: 15px; background-color: var(--ground); }
.login .btn { width: 100%; padding-block: 10px; font-size: 15px; }
.login .notice { margin-top: 0; }

/* ---------- Touch, motion ---------- */
@media (pointer: coarse) {
  nav a { padding: 8px 12px; }
  .appswitch a { padding: 6px 13px; }
  .chips button, .viewswitch button { padding: 7px 13px; }
  .qa { padding: 7px 12px; font-size: 13px; }
  .btn { min-height: 40px; }
  .linkbtn { padding: 6px 0; }
  .tabs button, .tabs a { padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* === ../shared/css/ios26.css === */
/* iOS and iPadOS 26 ("Liquid Glass") layer of Cockpit and Home, under the V3 styles.
   Every rule is scoped under body.ui-v2, which both pages carry in their own HTML.
   Both pages link this file right after base.css and before their own stylesheets. Values come from docs/ios26-tokens.md.
   This file never sets --accent, --accent-soft or --on-accent: each page sets its own.
   Low-specificity rules use :where(body.ui-v2) so they only replace the base defaults; page rules still win over them.
   Tokens added here: --glass-bg, --glass-blur, --glass-rim, --glass-shadow (the .glass recipe), --sel-fill (selected
   capsule inside glass), --seg-thumb and --seg-thumb-shadow (selected segment), --r-sheet (sheet radius). */

/* ---------- Tokens ---------- */
body.ui-v2 {
  --ground: #F2F2F7; --surface: #FFFFFF; --raised: #FFFFFF;
  --ink: #000000; --muted: rgba(60, 60, 67, .6);
  --line: rgba(0, 0, 0, .12);                 /* Separators / Non-opaque */
  --fill: rgba(118, 118, 128, .12);           /* Fills / Tertiary */
  --inset: #F2F2F7;
  --edge: transparent;
  --shadow: 0 0 #0000;                        /* iOS grouped cells are flat */
  --shadow-hover: 0 2px 10px rgb(0 0 0 / .06);
  --shadow-lg: 0 12px 48px rgb(0 0 0 / .18);
  --r-card: 24px; --r-ctl: 12px; --r-sheet: 34px;

  --glass-bg: rgba(255, 255, 255, .65);
  --glass-blur: saturate(180%) blur(14px);
  --glass-rim: inset 0 0 0 .5px rgba(255, 255, 255, .7), 0 0 0 .5px rgba(0, 0, 0, .06);
  --glass-shadow: 0 8px 40px rgb(0 0 0 / .12);
  --sel-fill: rgba(0, 0, 0, .07);
  --seg-thumb: #FFFFFF;
  --seg-thumb-shadow: 0 2px 6px rgb(0 0 0 / .12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.ui-v2 {
    --ground: #000000; --surface: #1C1C1E; --raised: #2C2C2E;
    --ink: #FFFFFF; --muted: rgba(235, 235, 245, .7);
    --line: rgba(255, 255, 255, .17);
    --fill: rgba(118, 118, 128, .24);
    --inset: #2C2C2E;
    --edge: transparent;
    --shadow: 0 0 #0000; --shadow-hover: 0 0 #0000;
    --shadow-lg: 0 12px 48px rgb(0 0 0 / .6);

    --glass-bg: rgba(37, 37, 40, .62);
    --glass-rim: inset 0 0 0 .5px rgba(255, 255, 255, .14);
    --glass-shadow: 0 8px 40px rgb(0 0 0 / .5);
    --sel-fill: rgba(255, 255, 255, .16);
    --seg-thumb: rgba(255, 255, 255, .27);
    --seg-thumb-shadow: 0 0 #0000;
  }
}
:root[data-theme="dark"] body.ui-v2 {
  --ground: #000000; --surface: #1C1C1E; --raised: #2C2C2E;
  --ink: #FFFFFF; --muted: rgba(235, 235, 245, .7);
  --line: rgba(255, 255, 255, .17);
  --fill: rgba(118, 118, 128, .24);
  --inset: #2C2C2E;
  --edge: transparent;
  --shadow: 0 0 #0000; --shadow-hover: 0 0 #0000;
  --shadow-lg: 0 12px 48px rgb(0 0 0 / .6);

  --glass-bg: rgba(37, 37, 40, .62);
  --glass-rim: inset 0 0 0 .5px rgba(255, 255, 255, .14);
  --glass-shadow: 0 8px 40px rgb(0 0 0 / .5);
  --sel-fill: rgba(255, 255, 255, .16);
  --seg-thumb: rgba(255, 255, 255, .27);
  --seg-thumb-shadow: 0 0 #0000;
}

/* ---------- Glass: a reusable surface (pages may also apply the same recipe in CSS) ---------- */
body.ui-v2 .glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim), var(--glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.ui-v2 .glass { background: var(--raised); }
}

/* ---------- Typography: Large Title and Title 3; body text size unchanged ---------- */
:where(body.ui-v2) h1 { font: 700 34px/41px var(--display); letter-spacing: .4px; }
:where(body.ui-v2) h2 { font: 600 20px/25px var(--display); letter-spacing: -.45px; }
@media (max-width: 720px) {
  :where(body.ui-v2) h1 { font-size: 30px; line-height: 36px; }
}

/* ---------- Header bar and the Cockpit | Home switch ---------- */
body.ui-v2 header.top { border-bottom: 0; background: color-mix(in srgb, var(--ground) 70%, transparent); }  /* blur from base.css */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.ui-v2 header.top { background: var(--ground); }
}
body.ui-v2 .appswitch { gap: 2px; padding: 2px; border-radius: 999px; background: var(--fill); }
body.ui-v2 .appswitch a { border-radius: 999px; }
body.ui-v2 .appswitch a[aria-current="page"] { background: var(--seg-thumb); color: var(--ink); box-shadow: var(--seg-thumb-shadow); }

/* ---------- Generic controls ---------- */
:where(body.ui-v2) .btn { border-radius: 999px; }
/* Inputs, selects and textareas keep their base look; their radius already follows --r-ctl (12px above). */
/* === css/cockpit.css === */
/* Cockpit: page rules on top of ../shared/css/base.css (tokens, type, header, nav, buttons, chips,
   inputs, pills, cards, tables, tabs, dialog, toast, login). Tokens are not redefined here. */

/* ---------- Text ---------- */
.lede { font-size: 16px; max-width: 68ch; margin: 14px 0 0; }
.lede a, .md a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.lede.short { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.tag { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
.tag.foot { margin-top: 14px; }
.tag.checkline { display: flex; gap: 6px; align-items: center; cursor: pointer; }
p.none { margin: 0; font-size: 13px; color: var(--muted); }
.srcline { font-size: 12px; color: var(--muted); }
.flag { color: var(--bad); font-weight: 500; }
.month { font: 600 12px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 26px 0 4px; }
.back { display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 500; }
.more { margin-top: 10px; }
.md { max-width: 68ch; font-size: 14px; }
.md h1, .md h2, .md h3 { font: 600 15px/1.35 var(--sans); letter-spacing: 0; margin: 16px 0 4px; border: 0; padding: 0; }
.md p, .md ul, .md ol { margin: 6px 0; }
.md table { font-size: 13px; }
.md th, .md td { padding: 6px 10px; }
.md th:first-child, .md td:first-child { padding-left: 0; }
.md code { font: 12.5px var(--mono); background: var(--fill); padding: 1px 5px; border-radius: 5px; }
.md pre { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-ctl); padding: 10px 12px; box-shadow: var(--shadow); }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: 8px 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--line); color: var(--muted); }
ol.plain, ul.plain { margin: 0; padding-left: 18px; }
ol.plain li, ul.plain li { margin: 5px 0; }

/* ---------- Toolbars ---------- */
.headrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.headrow h1 { margin-bottom: 4px; }
.hbtns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
/* Date eyebrow over a title */
#view > .eyebrow { margin: 24px 0 0; }
.eyebrow + h1, .eyebrow + .headrow h1 { margin-top: 4px; }
.eyebrow + .headrow .hbtns { margin-top: 4px; }
.tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0 12px; }
.tools input[type="search"] { flex: 1 1 220px; max-width: 320px; }
/* Filter rows with counts can hold ten buttons: separate pill chips read tidier than one wrapped track */
.tools .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; background: none; border-radius: 0; }
.tools .chips button { background: var(--fill); border-radius: var(--r-pill); padding: 5px 12px; }
.tools .chips button:hover { filter: brightness(.97); }
.tools .chips button[aria-pressed="true"] { background: var(--ink); color: var(--ground); box-shadow: none; }
.tools .chips button[aria-pressed="true"] .n { color: var(--ground); opacity: .7; }
.sel { font-size: 14px; }
.viewswitch { margin: 6px 0 4px; }

/* ---------- Tables ---------- */
p + .tablewrap { margin-top: 14px; }
.tablewrap tbody tr { cursor: pointer; }
.tablewrap tbody tr.static { cursor: default; }
@media (hover: hover) { .tablewrap tbody tr.static:hover { background: none; } }
td.name a { color: var(--ink); text-decoration: none; font-weight: 500; }
td.name a:hover { text-decoration: underline; }
table.compact td, table.compact th { padding-block: 7px; font-size: 13.5px; vertical-align: top; }
table.compact th { font-size: 11.5px; }

/* ---------- Pills ---------- */
.pill.cold, .pill.medium { color: var(--warn); background: var(--warn-bg); }
.pill.task, .pill.opportunity { color: var(--accent); background: var(--accent-soft); }
.pill.task.pill { padding: 2px 8px; font-size: 11.5px; border: 0; cursor: inherit; }  /* .task (task row) below would otherwise restyle this pill */
.pill.kind { color: var(--ink); background: var(--accent-soft); }
.pill.none { color: var(--muted); background: var(--fill); }
a.pill.dex { color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.pill.won, .pill.finished, .pill.low, .pill.positive, .pill.to_be { color: var(--good); background: var(--good-bg); }
.pill.lost, .pill.high, .pill.negative, .pill.phase_out { color: var(--bad); background: var(--bad-bg); }
.pill.target { color: var(--on-accent); background: var(--accent); }
.orgs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.orgs a { font-size: 12px; font-weight: 500; text-decoration: none; background: var(--accent-soft); color: var(--accent); padding: 2px 8px; border-radius: var(--r-pill); }
.orgs a.proj { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.orgs a:hover { text-decoration: none; filter: brightness(.97); }

/* ---------- Priority badge ---------- */
.prio { display: inline-flex; align-items: baseline; gap: 4px; font: 600 11.5px/1.35 var(--mono); padding: 1px 6px; border-radius: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prio small { font-weight: 500; font-size: 10.5px; opacity: .85; }
.prio.p1 { color: var(--on-prio); background: var(--p1); }
.prio.p2 { color: var(--on-prio); background: var(--p2); }
.prio.p3 { color: var(--p3); background: color-mix(in srgb, var(--p3) 14%, transparent); }
.prio.p4 { color: var(--p4); background: var(--fill); }

/* ---------- Account, person, note pages ---------- */
.stats { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 16px; }
.stat { display: grid; gap: 1px; }
.stat b { font: 600 22px/1.2 var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--muted); }
.cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 36px; }
@media (max-width: 820px) { .cols { grid-template-columns: 1fr; } }
.cols > *, .cols3 > *, #panel { min-width: 0; }
.notecols { margin-top: 24px; }
.notecols > section > h2:first-child, .notecols > aside > h2:first-child { margin-top: 0; }
.opentasks { margin-top: 8px; }
.asidehead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 32px 0 10px; }
.asidehead h2 { margin: 0; }
.asidehead .linkbtn { font-size: 14px; font-weight: 500; }
#panel > h2:first-child, #panel > .cols > section > h2:first-child, #panel > .cols > aside > h2:first-child { margin-top: 20px; }

.meeting { padding-block: 14px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 2px 14px; }
.meeting time { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--muted); padding-top: 2px; }
.meeting h3 { font-size: 15px; font-weight: 600; margin: 0; }
.meeting h3 a { color: inherit; text-decoration: none; }
.meeting h3 a:hover { text-decoration: underline; }
.meeting .exec { margin: 4px 0 0; color: var(--ink); max-width: 68ch; }
.meeting details { grid-column: 2; margin-top: 6px; }
.meeting summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.noterow { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 2px 14px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.noterow time { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--muted); padding-top: 2px; }
.noterow a.t { color: var(--ink); font-weight: 600; text-decoration: none; }
.noterow a.t:hover { text-decoration: underline; }
.noterow .exec { margin: 3px 0 0; color: var(--muted); font-size: 14px; max-width: 72ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list li .r { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dec { padding-block: 12px; border-bottom: 1px solid var(--line); }
.dec .src { font-size: 12px; color: var(--muted); margin-top: 3px; }
.ailist li { display: flex; gap: 8px; justify-content: space-between; align-items: baseline; }
.ailist li[data-task] { cursor: pointer; }
.ailist li[data-task]:hover .aitext, .notecols .task:hover .tt { text-decoration: underline; }
.ailist .aistate { flex: none; }
.ailist .aitask { cursor: pointer; }
.ailist .aitext { flex: 1; }
.ailist li.closed .aitext, .task.closed .tt { color: var(--muted); text-decoration: line-through; }
.task.closed .trow .pill { text-decoration: none; }
pre.transcript { font: 14px/1.6 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; margin: 10px 0 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: var(--shadow); max-height: 70vh; overflow-y: auto; }
/* KPI tiles across the full width */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 18px; }
.kpi { display: grid; align-content: start; gap: 4px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 12px 14px 13px; }
.kpi span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.kpi b { font: 600 22px/1.2 var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi b.none { color: var(--muted); font-weight: 400; }
#panel > .cols.prow > * > h2:first-child, #panel > .cols.prow > * > .asidehead:first-child { margin-top: 28px; }
/* Project tabs: pages, then one tab per sales step with a status badge */
.sn { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 600 11px var(--mono); background: var(--fill); color: var(--muted); }
.sn.done { color: var(--good); background: var(--good-bg); }
.sn.current { color: var(--on-accent); background: var(--accent); }
.stepline { margin-top: 16px; }
.sqtopic h3 { font-size: 15px; font-weight: 600; margin: 22px 0 4px; }
.sqq { padding-block: 10px 12px; border-bottom: 1px solid var(--line); }
.sqq .sqt { font-size: 14px; }
.sqq ul, .sqtopic > ul { margin: 5px 0 0; padding-left: 18px; }
.sqq li, .sqtopic > ul li { margin: 3px 0; }
.sqnone { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.caprow { padding-block: 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.caprow .tag { margin-top: 2px; }
.assume { background: var(--warn-bg); border-left: 4px solid var(--warn); border-radius: var(--r-card); padding: 11px 14px; margin: 10px 0; font-size: 14px; }
.assume b { display: block; margin-bottom: 4px; }
.rank { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 600 12px var(--mono); margin-right: 6px; }
.cols3 { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 28px; }
.cols3 > * > h2:first-child, .cols3 > * > .asidehead:first-child { margin-top: 22px; }
.cols3 figure.mm { margin-top: 6px; padding: 8px; }
@media (max-width: 1100px) { .cols3 { grid-template-columns: 1fr; gap: 0; } }
/* On a laptop the overview stays one screen: each column scrolls in its own box */
@media (min-width: 1101px) {
  .cols3 > * { max-height: max(320px, calc(100vh - 540px)); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; border-bottom: 1px solid var(--line); }
  .cols3 > * > h2:first-child, .cols3 > * > .asidehead:first-child { position: sticky; top: 0; background: var(--ground); margin-top: 0; padding-top: 14px; padding-bottom: 6px; z-index: 1; }
  .assume { padding: 9px 13px; margin: 8px 0; }
  .kpis { margin-top: 14px; }
}
/* Mermaid views (landscape, capability map, stakeholder map, org tree): generated in the database */
figure.mm { margin: 12px 0 18px; max-width: 100%; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 14px; overflow-x: auto; }
figure.mm .mmout svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
figure.mm figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
figure.mm details summary { cursor: pointer; }
figure.mm pre { font: 11.5px/1.4 var(--mono); white-space: pre-wrap; margin: 6px 0 0; color: var(--muted); }
.mmerr { color: var(--bad); font-size: 13px; }
/* A landscape reads at its own size: scroll sideways rather than shrink the labels away */
figure.mm.wide .mmout svg { max-width: none; min-width: 860px; }
.cols:has(figure.mm.wide) { grid-template-columns: 1fr; }
.cols:has(figure.mm.wide) > aside { display: none; }

/* ---------- Task rows ---------- */
.task { padding-block: 12px; border-bottom: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.task:last-child { border-bottom: 0; }
.trow { display: flex; gap: 8px; align-items: baseline; }
.task .tt { font-weight: 500; font-size: 15px; }
.task:hover .tt { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.task .meta { font-size: 12.5px; color: var(--muted); display: flex; gap: 4px 10px; flex-wrap: wrap; margin-top: 3px; }
.meta .late, .task .late { color: var(--p1); font-weight: 500; }
.pin { color: var(--warn); }
.rec { color: var(--accent); }
/* Round tick to finish a card: tick | body; the ring takes the effective priority colour */
.task[data-p="1"] { --pc: var(--p1); }
.task[data-p="2"] { --pc: var(--p2); }
.task[data-p="3"] { --pc: var(--p3); }
.task[data-p="4"] { --pc: var(--p4); }
.task.has-tick { display: flex; gap: 10px; align-items: flex-start; }
.task.has-tick > .tick { flex: none; margin-top: 1px; }
.task .tmain { flex: 1; min-width: 0; }
.task { transition: opacity var(--dur) var(--ease); }
.task.leaving { opacity: 0; }
.task.leaving { pointer-events: none; }
.tick { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid var(--pc, var(--p4)); background: transparent; color: #fff; cursor: pointer; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tick svg { width: 12px; height: 12px; opacity: 0; transition: opacity var(--dur) var(--ease); }
.tick:hover { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.tick:hover svg, .tick.on svg { opacity: 1; }
.tick.on { background: var(--good); border-color: var(--good); color: #fff; }
/* Priority columns: no box, a coloured label over the cards */
.k-important { --pc: var(--p1); } .k-normal { --pc: var(--accent); } .k-waiting { --pc: var(--warn); }
#f-notes { resize: vertical; min-height: 9em; }
dialog#dayDlg { width: min(560px, calc(100vw - 32px)); padding: 20px 22px; }
.dhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dhead h2 { margin: 0; }
.dhead .linkbtn { font-size: 15px; font-weight: 500; }
.fl { display: grid; gap: 5px; font-size: 13px; color: var(--muted); margin: 14px 0 0; border: 0; padding: 0; min-width: 0; }
.fl legend { padding: 0; margin-bottom: 5px; }
.fl > span { display: flex; align-items: baseline; }
.fl input, .fl select, .fl textarea { width: 100%; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }
.seg { display: flex; width: max-content; max-width: 100%; margin-top: 2px; }
.recrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--ink); font-size: 14px; }
.recrow input, .recrow select { padding-block: 6px; }
.numin, .fl .numin { width: 4.5em; }
.wdchk { display: inline-flex; gap: 3px; align-items: center; font-size: 12.5px; font-family: var(--mono); }
.warnbox { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-ctl); color: var(--bad); background: var(--bad-bg); font-size: 14px; }
.formerr { color: var(--bad); font-size: 13px; margin: 10px 0 0; }
.dactions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
#r-fields { display: contents; }
.daymove { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.daymove input { padding-block: 6px; }
.golink { font-size: 12px; font-weight: 500; margin-left: 6px; }
.golink[hidden] { display: none; }

/* ---------- Calendar (calendar.js) ---------- */
.calrow.closed a.t { text-decoration: line-through; color: var(--muted); }
.calrow .exec { -webkit-line-clamp: 1; }

/* ---------- Documents: body fills its column; version compare (documents.js) ---------- */
.md.wide { max-width: none; }
.btn.small { font-size: 12.5px; padding: 4px 10px; }
.cmptools { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 20px 0 8px; }
/* Two equal columns; the divider is a 1px line drawn in the middle of the column gap */
.cmphead, .cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; background: linear-gradient(var(--line), var(--line)) 50% 0 / 1px 100% no-repeat; }
.cmphead { position: sticky; top: var(--headh, 0px); z-index: 2; background-color: var(--ground); padding: 10px 0; border-bottom: 1px solid var(--line); }
.cmph { min-width: 0; padding-inline: 13px 10px; }
.cmpnav { display: flex; gap: 6px; align-items: center; }
.cmpnav select { flex: 0 1 auto; min-width: 0; font-size: 14px; padding-block: 5px; }
.cmpnav .btn { font-size: 16px; line-height: 1.1; padding: 4px 10px; }
.cmpcur { display: flex; align-items: center; gap: 6px; min-height: 32px; font: 600 15px/1.3 var(--sans); }
.cmpmeta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.cnote { font-size: 13px; color: var(--muted); margin: 2px 0 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cnote.open { display: block; overflow: visible; }
.cmore { font-size: 12.5px; }
.cmp { row-gap: 4px; padding-top: 10px; }
.cmpc { min-width: 0; padding: 6px 10px; border-left: 3px solid transparent; border-radius: 8px; }
.cmp .md { max-width: none; }
.cmp .md > :first-child, .cmp .md > figure.mm:first-child { margin-top: 0; }
.cmp .md > :last-child { margin-bottom: 0; }
.cmpc > p.muted { margin: 0; }
.cmp-del { border-left-color: var(--bad); background: var(--bad-bg); }
.cmp-add { border-left-color: var(--good); background: var(--good-bg); }
.cmp-empty { background: repeating-linear-gradient(135deg, var(--fill) 0 6px, transparent 6px 12px); }
/* Stronger than the cell background, so changed words stand out inside a changed block */
.cmp del { background: color-mix(in srgb, var(--bad) 20%, transparent); color: var(--bad); text-decoration: line-through; border-radius: 3px; }
.cmp ins { background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--good); text-decoration: none; border-radius: 3px; }
.cmpgap { grid-column: 1 / -1; margin: 4px 0; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 8px; background: var(--ground); color: var(--accent); font: 500 13px/1.3 var(--sans); cursor: pointer; }
.cmpgap:hover { background: var(--fill); }
@media (max-width: 820px) {
  .cmphead, .cmp { grid-template-columns: minmax(0, 1fr); background-image: none; }
  .cmphead { row-gap: 10px; position: static; }  /* a sticky two-version header would cover a third of a phone screen */
  .cmp-same { display: none; }                    /* unchanged sections once, not once per version */
  .cmp-same + .cmpc::before { content: "both versions" !important; }
  .cmp { row-gap: 6px; }
  .cmpc[data-v]::before { content: attr(data-v); display: block; margin-bottom: 4px; font: 500 11.5px/1.3 var(--sans); color: var(--muted); }
  .cmp-empty { display: none; }
}

/* Long names, URLs and markdown tables must not push the page sideways */
.md, .exec, td, .list li, .task .tt { overflow-wrap: anywhere; }
.md table, .md pre { display: block; max-width: 100%; overflow-x: auto; }
.md img { max-width: 100%; height: auto; }

/* Touch screens: bigger targets */
@media (pointer: coarse) {
  .tools .chips button { padding: 7px 13px; }
}

/* ---------- Review: proposals of the daily review job ---------- */
.rlist { display: grid; gap: 10px; max-width: 880px; }
.rcard { display: grid; gap: 5px; min-width: 0; padding: 12px 14px 14px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.rtop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
.rwhere a { color: var(--accent); }
.rconf { margin-left: auto; font-size: 12px; color: var(--muted); }
.rconf.low { color: var(--warn); font-weight: 500; cursor: help; }
.pill.rk-request { color: var(--warn); background: var(--warn-bg); }
.rtitle { font-size: 15px; font-weight: 600; line-height: 1.35; }
.rline { font-size: 13px; color: var(--muted); max-width: 90ch; }
.rtasks { font-size: 13px; display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; }
.rtask { color: var(--accent); cursor: pointer; }
.rtask:hover { text-decoration: underline; }
.rsep { color: var(--muted); margin-left: 4px; }
.rdecide { display: grid; gap: 8px; margin-top: 6px; justify-items: start; }
.rdecide textarea { width: 100%; max-width: 72ch; font-size: 16px; resize: vertical; overflow: hidden; }
.seg.verdict span { font-family: var(--sans); }
.seg.verdict input:checked + span { background: var(--raised); color: var(--ink); box-shadow: 0 0 0 1px var(--edge), var(--shadow); }
.ract { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.ract .formerr, .rdone .formerr { margin: 0; flex-basis: 100%; }
.rdone { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 4px; font-size: 13.5px; }
.rfb { color: var(--ink); }
.rsuggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rsuggest .rlabel { font-size: 12px; color: var(--muted); }
.rsuggest .seg { margin-top: 0; }
.rsuggest .rdue { font-size: 16px; min-width: 0; }
.rchoice { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.rchoice s { color: var(--muted); }
.rchoice .rsep { margin-left: 0; }

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  .wrap { padding-bottom: 48px; }
  /* iOS zooms into any field under 16px on focus */
  input, select, textarea { font-size: 16px !important; }

  /* A nav as one swipeable strip */
  nav { grid-column: 1 / -1; flex-wrap: nowrap; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%); }
  nav::-webkit-scrollbar, .tabs::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; }
  nav a { white-space: nowrap; padding-block: 8px; flex: none; }
  /* Filter chips: one swipeable row instead of four wrapped ones */
  .tools .chips { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .chips button { flex: none; }
  .hbtns > .chips { overflow-x: auto; scrollbar-width: none; }

  h1 { margin-top: 18px; }
  h2, .asidehead { margin-top: 26px; }
  .tools input[type="search"] { flex: 1 1 100%; max-width: none; }
  .tools .btn { flex: 1 1 auto; }
  .stats { gap: 10px 22px; }
  .stat b { font-size: 19px; }
  .list li { flex-wrap: wrap; row-gap: 2px; }
  .list li .r { white-space: normal; }

  /* Date column above the text instead of beside it */
  .meeting, .noterow { grid-template-columns: minmax(0, 1fr); }
  .meeting details { grid-column: 1; }

  /* Tables become one row card per record inside the rounded container; number and date cells carry their column name */
  .tablewrap { overflow: hidden; }
  .tablewrap table, .tablewrap tbody, .tablewrap tr, .tablewrap td { display: block; }
  .tablewrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tablewrap tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .tablewrap tbody tr:last-child { border-bottom: 0; }
  .tablewrap td, .tablewrap td:first-child, .tablewrap td:last-child { padding: 0; border: 0; }
  .tablewrap td:first-child { flex: 1 1 100%; }
  .tablewrap td:empty { display: none; }
  .tablewrap td.num { text-align: left; }
  .tablewrap td:not(:first-child) { font-size: 13px; }
  .tablewrap td.num[data-label]::before, .tablewrap td.mono[data-label]::before { content: attr(data-label) " "; font-family: var(--sans); color: var(--muted); }
  .tablewrap td[colspan] { flex-basis: 100%; }

  /* Task notes field and the day check */
  #f-notes { min-height: 6em; }
  .daymove { width: 100%; }
  .daymove input { flex: 1; }
  .dactions .btn { flex: 1 1 auto; }
  .seg { display: flex; width: 100%; }
  .seg label { flex: 1; }
  .seg span { display: block; text-align: center; padding-block: 8px; }
  /* Review: verdict and Save across the full card */
  .rdecide { justify-items: stretch; }
  .ract .btn { flex: 1 1 100%; }
  .rsuggest .seg, .rsuggest .rdue { flex: 1 1 100%; width: 100%; }
}
/* === css/crm.css === */
/* Cockpit CRM: Reach out, People list, person page and their sheets (docs/crm-ui.md).
   Built on ../shared/css/base.css and css/cockpit.css; colours come from their tokens only. */

/* ---------- Avatar tint: the hue comes from the name (inline --h); saturation and lightness per theme ---------- */
:root { --av-bg-s: 58%; --av-bg-l: 88%; --av-fg-s: 42%; --av-fg-l: 32%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --av-bg-s: 26%; --av-bg-l: 27%; --av-fg-s: 62%; --av-fg-l: 80%; }
}
:root[data-theme="dark"] { --av-bg-s: 26%; --av-bg-l: 27%; --av-fg-s: 62%; --av-fg-l: 80%; }

.av { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; vertical-align: middle;
  background: hsl(var(--h, 220) var(--av-bg-s) var(--av-bg-l)); color: hsl(var(--h, 220) var(--av-fg-s) var(--av-fg-l));
  font: 600 12px/1 var(--sans); letter-spacing: .02em; user-select: none; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.s28 { width: 28px; height: 28px; font-size: 11px; }
.av.s36 { width: 36px; height: 36px; font-size: 13px; }
.av.s72 { width: 72px; height: 72px; font-size: 26px; }
.ic { flex: none; vertical-align: -3px; }

/* ---------- Cards with an eyebrow ---------- */
.ccard { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: var(--shadow); margin-top: 16px; padding: 2px 0 4px; min-width: 0; }
.ccard > h2.eyebrow { margin: 0; padding: 12px 16px 6px; font: 600 12px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; gap: 8px; align-items: baseline; }
.ccard > h2.eyebrow .mono { font-weight: 500; letter-spacing: 0; }
.ccard.empty { padding: 16px; }
.ccard.empty p { margin: 0; }
.ccard.empty p + p { margin-top: 4px; }

/* ---------- Person rows (Reach out) ---------- */
.prow { display: grid; grid-template-columns: 36px minmax(0, 1fr) 112px 124px auto; grid-template-areas: "av main cad stat side"; gap: 4px 12px; align-items: center;
  padding: 10px 16px; border-top: 1px solid var(--line); transition: opacity var(--dur) var(--ease); }
.ccard > h2.eyebrow + .prow { border-top: 0; }
.prow.leaving { opacity: 0; pointer-events: none; }
.pav { grid-area: av; line-height: 0; }
.pmain { grid-area: main; min-width: 0; }
/* Fixed columns on the right, so pills, status, contact buttons and actions line up from row to row */
.pside { grid-area: side; display: grid; grid-template-columns: 136px auto; align-items: center; gap: 10px; }
.pcad { grid-area: cad; justify-self: end; }
.prow > .pstat { grid-area: stat; justify-self: end; }
.pline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pname { font-weight: 600; color: var(--ink); }
a.pname { color: var(--ink); }
.psub { color: var(--muted); }
.preason { font-size: 12.5px; color: var(--muted); margin-top: 1px; overflow-wrap: anywhere; }
.pstat { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pstat.bad { color: var(--bad); }
.pstat.today { color: var(--accent); }
.pcontact, .pacts { display: inline-flex; gap: 4px; align-items: center; }
.pacts { gap: 6px; }
.pacts .qa, details.menu > summary.qa { display: inline-flex; align-items: center; gap: 4px; }
.prow .tick { --pc: var(--accent); position: relative; }
.prow .tick::before { content: ""; position: absolute; inset: -11px; }  /* 44px target around the 22px ring */
.ibtn { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fill); color: var(--ink); text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.ibtn:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }

/* Snooze and other small menus (details/summary) */
details.menu { position: relative; display: inline-block; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
.menupop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 6; min-width: 150px; display: grid; padding: 4px;
  background: var(--raised); border: 1px solid var(--edge); border-radius: var(--r-ctl); box-shadow: var(--shadow-lg); }
.menupop button { text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 8px; cursor: pointer; font: 14px/1.3 var(--sans); color: var(--ink); }
.menupop button:hover { background: var(--fill); }

/* Check composer: under a row, in the Keep in touch card, and as "Add a note" */
.composer { display: grid; gap: 8px; }
.composer.inline { padding: 10px 16px 12px 64px; border-top: 1px dashed var(--line); background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.chips.chanchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; background: none; border-radius: 0; }
.chanchips button { display: inline-flex; align-items: center; gap: 5px; background: var(--fill); border-radius: var(--r-pill); padding: 5px 11px; }
.chanchips button[aria-pressed="true"] { background: var(--ink); color: var(--ground); box-shadow: none; }
.composer .cnote { width: 100%; }
/* channel chips and the day of the contact on one line; the day goes under the chips when they need the room */
.composer .crow { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.cday { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.cday input { width: auto; font-variant-numeric: tabular-nums; }
.cacts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cacts .chint { margin-left: 4px; font: 400 12.5px/1.35 var(--sans); color: var(--muted); }
.composer .formerr { margin: 0; }
/* Extra people on the same check: chips, "+ Add people", and a search with a list under it */
.cextra { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.cxchips { display: contents; }
.cxchip { display: inline-flex; align-items: center; gap: 2px; background: var(--fill); border-radius: var(--r-pill); padding: 3px 4px 3px 11px; font-size: 13.5px; }
.cxchip button { background: none; border: 0; padding: 0 6px; min-width: 24px; min-height: 24px; border-radius: var(--r-pill); color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.cxchip button:hover { background: var(--accent-soft); color: var(--accent); }
.cextra .cxadd { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 500; }
.cextra .cxadd[hidden], .cxpick[hidden], .cxlist[hidden] { display: none; }
.cxpick { position: relative; display: inline-block; width: min(280px, 100%); }
.cxpick .cxq { width: 100%; }
.cxlist { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 7; display: grid; padding: 4px 0;
  background: var(--raised); border: 1px solid var(--edge); border-radius: var(--r-ctl); box-shadow: var(--shadow-lg); }
.cxopt { display: flex; align-items: center; gap: 10px; padding: 6px 12px; min-height: 40px; cursor: pointer; }
.cxopt[aria-selected="true"] { background: var(--accent-soft); }
@media (hover: hover) { .cxopt:hover { background: var(--fill); } .cxopt[aria-selected="true"]:hover { background: var(--accent-soft); } }
.cxname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxnone { padding: 8px 12px; color: var(--muted); font-size: 13.5px; }

/* Coming up */
.crow2 { display: grid; grid-template-columns: 28px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ccard > h2.eyebrow + .crow2 { border-top: 0; }
@media (hover: hover) { .crow2:hover { background: var(--fill); text-decoration: none; } }
.crow2 .pname { font-weight: 500; }
.crow2 .psub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

/* To clean up */
.cline { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 14px; }
.ccard > h2.eyebrow + .cline { border-top: 0; }
details.cline > summary { cursor: pointer; font-weight: 500; color: var(--accent); }
.clist { display: grid; margin-top: 8px; }
.prop { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); }
.prop .pmain { flex: 1 1 280px; }
.prop .formerr { margin: 4px 0 0; }
.prop .pacts { flex-wrap: wrap; }
.mergepick { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* org_link: company picker under the proposal */
.orgpick { flex-basis: 100%; display: grid; gap: 6px; padding: 4px 0 2px; }
.orgpick .orgq { width: 100%; max-width: 420px; }
.orgres { display: grid; max-width: 420px; border-radius: var(--r-ctl); overflow: hidden; }
.orgres:empty { display: none; }
.orgres button { text-align: left; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--fill); color: var(--ink); cursor: pointer; font: 14px/1.3 var(--sans); }
.orgres button:last-child { border-bottom: 0; }
.orgres button:hover { background: var(--accent-soft); }
.orgres p { margin: 4px 0; font-size: 13px; }

/* ---------- Person page ---------- */
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.whist { list-style: none; margin: 0; padding: 0; }
.whist li { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; overflow-wrap: anywhere; }
.whist li:first-child { border-top: 0; }
.whist li:not(.cur) b { font-weight: 500; color: var(--muted); }
.wh-line { font-size: 13px; }
.wh-period { color: var(--muted); }

/* Timeline: month headings, a thin line with a 24px icon dot per item */
.tl-month { font: 600 12px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 14px 0 4px; }
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 11.5px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.tl-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 7px 0; }
.tl-dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.k-note .tl-dot { color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.k-touch .tl-dot { color: var(--good); background: var(--good-bg); box-shadow: none; }
.k-job_change .tl-dot { color: var(--warn); background: var(--warn-bg); box-shadow: none; }
.k-message .tl-dot { color: var(--ink); background: var(--fill); box-shadow: none; }
.tl-main { min-width: 0; padding-top: 2px; }
.tl-head { display: flex; gap: 4px 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.tl-head a { color: var(--ink); }
.tl-head time { margin-left: auto; font: 12px var(--mono); color: var(--muted); white-space: nowrap; }
.tl-meta { font-size: 12px; color: var(--muted); font-weight: 400; }
.tl .tl-body { margin: 3px 0 0; font-size: 13.5px; overflow-wrap: anywhere; }
.tl .bubble { width: fit-content; max-width: min(52ch, 100%); margin: 5px 0 0; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--inset); font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* long snippets (a WhatsApp export can hold a whole exchange) show six lines; a click shows all */
.tl .bubble { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; cursor: pointer; }
.tl .bubble.open { display: block; -webkit-line-clamp: unset; overflow: visible; cursor: default; }
.tl .bubble.out { margin-left: auto; border-radius: 14px 14px 4px 14px; background: var(--accent-soft); }
.tl-link { display: inline-block; margin-top: 4px; font-size: 12.5px; }
.tl-task { cursor: pointer; }
.tl-task:hover { text-decoration: underline; }
#tlmore { margin-top: 10px; }

/* ---------- Sheet dialog (edit, + Person, groups, confirm) ---------- */
dialog#crmDlg { width: min(560px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
dialog#crmDlg.wide { width: min(760px, calc(100vw - 32px)); }
dialog#crmDlg.narrow { width: min(440px, calc(100vw - 32px)); }
dialog#crmDlg[open] { display: flex; flex-direction: column; }
#crmDlg .dhead { flex: none; padding: 18px 20px 10px; border-bottom: 1px solid var(--line); }
#crmDlg .sbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 20px 18px; overscroll-behavior: contain; }
#crmDlg .sbody > p:first-child { margin-top: 12px; }
#crmDlg .sfoot { flex: none; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--ground); }
#crmDlg .sfoot .formerr { flex-basis: 100%; margin: 0; }
.sform input:not([type="checkbox"], [type="radio"], [type="file"]), .sform select, .sform textarea { background-color: var(--surface); }
.reps { display: grid; gap: 6px; }
.reprow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--ink); }
.reprow input, .reprow select { width: auto; min-width: 0; }
.reprow input { flex: 1 1 160px; }
.reprow.addr .r-street { flex: 2 1 200px; }
.reprow.addr .r-postcode { flex: 0 1 96px; }
.reprow.bday select { flex: 0 1 140px; }
.fl.rep > .linkbtn { justify-self: start; display: inline-flex; gap: 4px; align-items: center; margin-top: 6px; }
.relname { flex: 1 1 160px; font-size: 14px; }
.relsearch { margin-top: 8px; }
.relsearch input { width: 100%; }
.relres { display: grid; margin-top: 4px; border-radius: var(--r-ctl); overflow: hidden; }
.relres:empty { display: none; }
.relres button { text-align: left; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: 14px/1.3 var(--sans); }
.relres button:hover { background: var(--fill); }
.relres p { margin: 6px 0; }
.gpick { display: flex; flex-wrap: wrap; gap: 6px; }
.gtoggle { font: 500 13px/1.3 var(--sans); padding: 5px 12px; border-radius: var(--r-pill); border: 0; background: var(--fill); color: var(--ink); cursor: pointer; }
.gtoggle[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.ephoto { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.ephoto label.btn { cursor: pointer; }
.ephoto .tag { margin: 6px 0 0; }
.ephoto .linkbtn { margin-left: 10px; }
/* Groups editor */
.glist { display: grid; margin-top: 10px; }
.grow { display: grid; grid-template-columns: 56px minmax(0, 1fr) 170px 82px auto; gap: 8px; align-items: center; padding: 6px 0 6px calc(var(--d, 0) * 22px); border-top: 1px solid var(--line); }
.grow:first-child { border-top: 0; }
.gemoji { width: 56px; text-align: center; }
.gcount { font-size: 12.5px; white-space: nowrap; }
.gadd { margin-top: 18px; }
.gadd h3 { margin: 0 0 6px; font-size: 14px; }
.gaddrow { display: flex; flex-wrap: wrap; gap: 8px; }
.gaddrow #ga-name { flex: 1 1 160px; }

/* ---------- Company page: people by level, or as a tree (hierarchy.js) ---------- */
.hier { margin-top: 18px; container-type: inline-size; }
.hierhead { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.hsum { margin: 0; font-size: 14px; color: var(--muted); }
.hsum b { color: var(--ink); font-weight: 600; }
.hierhead .viewswitch { margin: 0; }
.hier .ccard { margin-top: 12px; }
.hier .ccard.empty { padding: 14px 16px; }
.hdept { margin: 0; padding: 10px 16px 3px; border-top: 1px solid var(--line); font: 500 12px/1.3 var(--sans); color: var(--muted); }
.hdept .mono { font-size: 11px; margin-left: 4px; }
.ccard > h2.eyebrow + .hdept { border-top: 0; padding-top: 2px; }
.hctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hctl .hedit { padding-block: 5px; font-size: 13px; }
/* One quiet line per person: avatar, name · title, stakeholder pills, priority, due, last contact; with "Edit levels"
   on (.hediting) also level and reports to */
.hrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 44px 76px 88px; grid-template-areas: "av main sh prio due last";
  gap: 0 10px; align-items: center; padding: 6px 16px; border-top: 1px solid var(--line); font-size: 14px; }
.hediting .hrow { grid-template-columns: 28px minmax(0, 1fr) auto 44px 76px 88px 96px 120px; grid-template-areas: "av main sh prio due last lvl rep"; }
.ccard > h2.eyebrow + .hrow, .hdept + .hrow { border-top: 0; }
.hrow .pline .psub { font-size: 13px; }
.hrow.arch .pname { color: var(--muted); }
.hmeta { display: contents; }
.hbr { display: none; }
.hshs { grid-area: sh; display: inline-flex; gap: 4px; min-width: 0; }
.hshs:empty { display: none; }
.hsh { display: inline-flex; max-width: 220px; font-size: 11.5px; text-decoration: none; white-space: nowrap; }
.hsh:hover { text-decoration: none; filter: brightness(.96); }
.hshp { min-width: 0; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; }
.hprio { grid-area: prio; font-size: 13px; color: var(--muted); }
.hprio.top { color: var(--ink); font-weight: 600; }
.hdue { grid-area: due; font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hdue .lbl { display: none; }
.hdue.bad { color: var(--bad); font-weight: 500; }
.hdue.today { color: var(--accent); font-weight: 500; }
.hlast { grid-area: last; display: inline-flex; gap: 5px; align-items: center; font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hlvl { grid-area: lvl; width: 100%; min-width: 0; font-size: 13px; padding: 4px 26px 4px 8px; background-position: right 7px center; }
.hrep { grid-area: rep; min-width: 0; position: relative; }
/* the chevron is the select's (base.css), so the button reads as a picker */
.hrepb { display: flex; align-items: center; width: 100%; min-width: 0; color: var(--muted); padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%238E8E93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; }
.hrepb.set { color: var(--ink); }
.hrepn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hic { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hmore { display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13px; }
.hreppop { width: 280px; gap: 4px; }
.hreppop .hrepq { width: 100%; margin-bottom: 2px; }
.hrepres { display: grid; }
.hrepres p { margin: 6px 4px; font-size: 13px; }
.hreppop button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hreppop [data-rep-clear] { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--bad); }
.hreppop .formerr { margin: 4px; font-size: 12.5px; }
/* Left: muted, with when */
.hrow.hgone { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "av main when"; }
.hrow.hgone .pav, .hrow.hgone .pmain { opacity: .62; }
.hwhen { grid-area: when; font-size: 13px; color: var(--muted); white-space: nowrap; }
/* Tree: each level of reports indented, a thin line on the left */
.htree, .htree ul { list-style: none; margin: 0; padding: 0; }
.htree { padding: 2px 16px 12px; }
.htree ul { margin-left: 13px; padding-left: 18px; border-left: 1px solid var(--line); }
.htree li { position: relative; padding-top: 6px; }
.htree ul > li::before { content: ""; position: absolute; left: -18px; top: 20px; width: 12px; border-top: 1px solid var(--line); }
.hnode { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; }
/* name and title, then pills and the number of reports; these go under the name when the line is full */
.hnt { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
.htxt { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hnx { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.htxt .psub { font-size: 13px; }
.hn { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hloose { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 18px; padding: 4px 16px 14px; }
/* A narrow block (phone, or the page with its side column): the name line with the due date, then what we know
   (stakeholder, priority, last contact) in small type, then level and manager side by side */
@container (max-width: 700px) {
  .hrow, .hediting .hrow { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "av main due" ". meta meta"; gap: 2px 10px; padding: 8px 14px; }
  .hmeta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
  .hmeta > .hprio:empty { display: none; }
  .hdue .lbl { display: inline; }
  .hbr { display: block; flex-basis: 100%; height: 0; }
  .hlvl { width: auto; flex: 1 1 38%; }
  .hrep { flex: 1 1 54%; }
  .hrow.hgone { grid-template-areas: "av main when"; }
  .htree { padding-inline: 14px; }
  .htree ul { margin-left: 10px; padding-left: 12px; }
  .htree ul > li::before { left: -12px; width: 8px; }
}

/* Narrow windows: the right-hand part of a Reach out row goes under the name */
@media (max-width: 1000px) {
  .prow { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "av main stat" ". side side"; }
  .pcad { display: none; }  /* the reason line already says the cadence */
  .pside { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .prow > .pstat { align-self: start; padding-top: 1px; }
}

/* ---------- Phones (<= 720px) ---------- */
@media (max-width: 720px) {
  /* Reach out rows: the name line, then the reason, then the actions; 44px targets */
  .prow { grid-template-areas: "av main stat" "side side side"; padding: 12px 14px; }
  .pside { gap: 6px; }
  .prow .pacts .bl { display: none; }  /* icon buttons on a phone; the aria-label names them */
  .prow .pacts .qa, .prow details.menu > summary.qa { justify-content: center; min-width: 44px; }
  .ibtn { width: 44px; height: 44px; }
  .pacts .qa, details.menu > summary.qa { min-height: 44px; padding-inline: 12px; }
  .pacts { margin-left: auto; }
  .composer.inline { padding: 10px 14px 12px; }
  .cday input { min-height: 44px; }
  .hlvl, .hrepb { min-height: 44px; }
  .hreppop button { min-height: 44px; }
  .hreppop { width: min(300px, calc(100vw - 48px)); }
  .orgres button { min-height: 44px; }
  .chanchips button { padding: 8px 12px; }
  .cxpick { width: 100%; }
  .cxopt { min-height: 44px; }
  .cxchip button { min-width: 36px; min-height: 36px; }
  .cextra .cxadd { min-height: 44px; }
  .crow2 { grid-template-columns: 28px minmax(0, 1fr) auto; padding-inline: 14px; }
  .crow2 .psub { display: none; }
  /* Sheets fill the screen; title bar and Save stay in reach */
  dialog#crmDlg, dialog#crmDlg.wide { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border-radius: 0; box-shadow: none; }
  dialog#crmDlg[open] { animation: sheet-up 280ms var(--ease); }
  dialog#crmDlg.narrow { width: 100%; max-width: 100%; height: auto; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  #crmDlg .dhead { padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 10px; }
  #crmDlg .dhead .linkbtn { font-size: 15px; padding: 6px 0 6px 12px; }
  #crmDlg .sbody { padding-inline: 16px; }
  #crmDlg .sfoot { padding-inline: 16px; }
  #crmDlg .sfoot .btn { flex: 1 1 auto; min-height: 44px; }
  .grow { grid-template-columns: 52px minmax(0, 1fr); }
  .grow .gcad { grid-column: 2; }
  .grow .gcount { grid-column: 1; }
  .grow [data-gdel] { grid-column: 2; justify-self: start; min-height: 40px; }
  .gemoji { width: 52px; }
}
/* === css/v2.css === */
/* Classes in use on the pages without a V3 version (Friday review) and on parts of V3 pages (Inbox, the Quick log rows),
   and the Cockpit's accent (iOS blue). Tokens come from base.css, overridden by ../shared/css/ios26.css (iOS 26 neutrals,
   radii, the glass tokens --glass-*, --sel-fill, --seg-thumb, --r-sheet).

   .v2-page        page wrapper inside #view (vertical padding; #view already has the side gutter)
   .v2-head        title row: a block with .v2-lbl kicker + h1 on the left, actions on the right; wraps on a phone
   .v2-card        surface card: --surface, radius --r-card, padding 16px 18px, no border, --shadow
   .v2-grid-3      three equal columns; one column at 960px and below
   .v2-kpis        row of tiles (auto-fit, min 150px); each tile .v2-kpi with .v2-lbl and a <b> value (Title 1)
   .v2-lbl         small label (13px semibold, muted, no uppercase)
   .v2-row         flex row with a top hairline; the first row of a group has none
   .v2-chip        small capsule tag; variants .deal (link blue), .promise and .warn (warn), .reach (purple), .wait (neutral),
                   .cold and .risk (bad), .good (good)
   .v2-btn         capsule button, 34px tall (44px on a phone)
   .v2-empty       muted empty state
   .v2-why         muted 13px reason line under an item
   Tokens added here: --v2-reach / --v2-reach-bg (purple), --v2-good-ink (green text on --good-bg), --v2-sel (selected row),
   --v2-link (accent for link text: #0088FF on white is only ~3.6:1, so text uses a darker blue; fills and glyphs keep --accent). */

:root { --v2-reach: #6B3FB8; --v2-reach-bg: #F0E9FB; --v2-good-ink: #17683F; --v2-sel: color-mix(in srgb, var(--accent) 7%, #FFFFFF); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --v2-reach: #C9A6FF; --v2-reach-bg: #2A1A40; --v2-good-ink: var(--good); --v2-sel: color-mix(in srgb, var(--accent) 12%, #1C1C1E); }
}
:root[data-theme="dark"] { --v2-reach: #C9A6FF; --v2-reach-bg: #2A1A40; --v2-good-ink: var(--good); --v2-sel: color-mix(in srgb, var(--accent) 12%, #1C1C1E); }

/* Cockpit accent: iOS 26 Accents/Blue. --v2-sel is set again here so it mixes this accent, not the root one. */
body.ui-v2 {
  --accent: #0088FF; --accent-soft: color-mix(in srgb, #0088FF 13%, #FFFFFF); --on-accent: #FFFFFF;
  --v2-link: #0071E3;
  --v2-sel: color-mix(in srgb, var(--accent) 7%, #FFFFFF);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.ui-v2 {
    --accent: #0091FF; --accent-soft: color-mix(in srgb, #0091FF 22%, #000000); --on-accent: #FFFFFF;
    --v2-link: #3DA5FF;
    --v2-sel: color-mix(in srgb, var(--accent) 12%, #1C1C1E);
  }
}
:root[data-theme="dark"] body.ui-v2 {
  --accent: #0091FF; --accent-soft: color-mix(in srgb, #0091FF 22%, #000000); --on-accent: #FFFFFF;
  --v2-link: #3DA5FF;
  --v2-sel: color-mix(in srgb, var(--accent) 12%, #1C1C1E);
}
/* Link text; :where keeps it at the weight of base.css's a rule, so any class rule still sets its own colour */
:where(body.ui-v2) a { color: var(--v2-link); }

/* ---------- Shared page classes ---------- */
.v2-page { padding-block: 4px 24px; }
.v2-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin: 24px 0 20px; }
.v2-head h1 { margin: 2px 0 0; }
.v2-card { background: var(--surface); border: 0; border-radius: var(--r-card); box-shadow: var(--shadow); padding: 16px 18px; }
.v2-card > :first-child { margin-top: 0; }
.v2-card > :last-child { margin-bottom: 0; }
.v2-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 960px) { .v2-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.v2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.v2-kpi { background: var(--surface); border: 0; border-radius: 20px; box-shadow: var(--shadow); padding: 12px 14px; display: grid; gap: 2px; }
.v2-kpi b { font: 700 28px/34px var(--display); font-variant-numeric: tabular-nums; letter-spacing: .38px; }  /* Title 1 */
.v2-lbl { font: 600 13px/18px var(--sans); text-transform: none; letter-spacing: 0; color: var(--muted); }
.v2-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.v2-row:first-child { border-top: 0; }
.v2-chip { display: inline-block; font: 600 12px/1.3 var(--sans); padding: 2px 9px; border-radius: 999px; white-space: nowrap; vertical-align: baseline; background: var(--fill); color: var(--ink); }
.v2-chip.deal { background: var(--accent-soft); color: var(--v2-link, var(--accent)); }
.v2-chip.promise, .v2-chip.warn { background: var(--warn-bg); color: var(--warn); }
.v2-chip.reach { background: var(--v2-reach-bg); color: var(--v2-reach); }
.v2-chip.wait { background: var(--fill); color: var(--ink); }
.v2-chip.cold, .v2-chip.risk { background: var(--bad-bg); color: var(--bad); }
.v2-chip.good { background: var(--good-bg); color: var(--v2-good-ink); }
.v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 7px 16px;
  font: 600 14px/1.2 var(--sans); color: var(--ink); background: var(--fill); border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.v2-btn:hover { filter: brightness(.96); text-decoration: none; }
.v2-btn:active { transform: scale(.98); }
.v2-btn:disabled { opacity: .55; cursor: default; filter: none; transform: none; }
.v2-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 18px 8px; margin: 0; }
.v2-why { color: var(--muted); font-size: 13px; line-height: 1.4; margin: 2px 0 0; }
.v2-err { color: var(--bad); font-size: 13px; margin: 0; }
/* 6px side margin + 10px padding keeps the text on the 16px line of the group labels */
.v2-palopt { display: flex; align-items: center; gap: 12px; margin-inline: 6px; padding: 8px 10px; border-radius: 12px; cursor: pointer; min-height: 44px; }
.v2-palopt[aria-selected="true"] { background: var(--sel-fill); box-shadow: none; }
.v2-paltxt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-paltxt b { font-weight: 600; }
.v2-palnote { color: var(--muted); font-size: 14px; padding: 12px 16px; margin: 0; }

/* ---------- Quick log: who ---------- */
.v2-whochip { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--inset); border-radius: var(--r-ctl); min-height: 44px; }
.v2-whoname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-whoname b { font-weight: 600; }
.v2-wholist { margin-top: 4px; max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); }
.v2-wholist .v2-palopt { padding-inline: 12px; }

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  body.ui-v2 main.wrap { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  body.ui-v2 #toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }

  .v2-btn { min-height: 44px; }
}
/* === css/v2-now.css === */
/* Friday review (#/week). Every rule uses a v2now-/v2week- class; tokens from base.css and v2.css. */
.v2now h2 { margin: 0; font-size: 17px; }
.v2now .v2-err { margin: 0; }
.v2now-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.v2now-mt { font-weight: 700; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }

/* Friday review */
.v2week .v2-kpis { margin-bottom: 20px; }
.v2week > .v2-err { margin-bottom: 12px; }
.v2now-bad { color: var(--bad); }
.v2week .v2-card h2.v2-lbl { margin: 0 0 6px; }
.v2week .v2-row { align-items: flex-start; }
.v2week .v2-row > .v2-chip { flex: none; margin-top: 1px; }
.v2now-rt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.v2now-rt .v2now-mt { font-size: 14px; font-weight: 600; }
.v2now-rt .v2now-chips { margin-top: 6px; }
.v2week .v2-row > .v2-btn { flex: none; }

/* Phone */
@media (max-width: 720px) {
  .v2week .v2-row { flex-wrap: wrap; }
  .v2now-rt > a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
}
/* === css/v2-inbox.css === */
/* Inbox (#/inbox): the hook classes kept on the V3 markup (js/v3/inbox.js); css/v3-inbox.css draws on top of these. */
.v2ix .v2-head { margin-bottom: 16px; }
.v2ix-loaderr { margin: 0 0 12px; }

/* Group filter */
.v2ix-filters { display: flex; flex-direction: column; gap: 2px; }

/* One card: scan list | detail, split by a hairline */
.v2ix-list { border-right: 1px solid var(--line); max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; }
.v2ix-list > .v2-empty { padding: 32px 16px; }
.v2ix-ul { list-style: none; margin: 0; padding: 0; }
.v2ix-item {
  padding: 10px 16px; border-top: 1px solid var(--line); cursor: pointer;
  outline: none; transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.v2ix-item:first-child { border-top: 0; }
.v2ix-item:hover:not(.is-sel) { background: var(--fill); }
.v2ix-item.is-sel { background: var(--sel-fill); border-radius: var(--r-ctl); }
.v2ix-item.is-sel, .v2ix-item.is-sel + .v2ix-item { border-top-color: transparent; }  /* no hairline across the selected capsule */
.v2ix-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.v2ix-item.is-leaving { opacity: 0; pointer-events: none; }
.v2ix-item.is-busy { opacity: .7; }
.v2ix-and { font-weight: 400; color: var(--muted); }

/* Detail pane */
.v2ix-detail { min-width: 0; padding: 20px 24px 24px; }
.v2ix-pick { padding: 48px 16px; }
.v2ix-det { outline: none; }
.v2ix-det.is-busy { opacity: .85; }
.v2ix-inline { font-weight: 400; color: var(--muted); }
.v2ix-body { margin: 0 0 12px; font-size: 14px; overflow-wrap: anywhere; }
.v2ix-body a { color: var(--v2-link); }
.v2ix-note { font-style: italic; }
.v2ix-status { color: var(--ink); font-weight: 600; }

/* Actions, then the panel and the error under them */
.v2ix-det .v2-btn.arm { background: var(--bad); color: #fff; }
.v2ix-rowerr { margin-top: 8px; }
.v2ix-panel { margin-top: 12px; padding: 12px; background: var(--inset); border-radius: var(--r-ctl); display: grid; gap: 10px; }
.v2ix-panel[hidden] { display: none; }
.v2ix-panel input[type="search"] { width: 100%; }
.v2ix-orgres { display: grid; gap: 2px; }
.v2ix-orgres .v2-why { margin: 0; }
.v2ix-org { text-align: left; font: 400 14px/1.3 var(--sans); color: var(--ink); background: none; border: 0; border-radius: var(--r-ctl); padding: 8px 10px; min-height: 36px; cursor: pointer; }
.v2ix-org:hover, .v2ix-org:focus-visible { background: var(--fill); }

/* 721-1100px: filters as a wrapped chip row above list | detail */
@media (max-width: 1100px) {
  .v2ix-filters { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .v2ix-list { max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); }
  .v2ix-detail { padding: 18px 20px 20px; }
}

/* Up to 720px: the list alone; the detail as its own view (is-detail) with Back */
@media (max-width: 720px) {
  .v2ix-list { border-right: 0; max-height: none; overflow: visible; }
  .v2ix-item { padding: 12px 14px; }
  .v2ix-detail { display: none; padding: 12px 16px 20px; }
  .v2ix.is-detail .v2-head, .v2ix.is-detail .v2ix-filters, .v2ix.is-detail .v2ix-list { display: none; }
  .v2ix.is-detail .v2ix-detail { display: block; }
  .v2ix-org { min-height: 44px; }
}
/* === ../shared/css/ios26-v3.css === */
/* UI V3 (native iOS 26 layout): the chrome and the shared components of Cockpit and Home. Spec: docs/ui-v3.md.
   Every rule is scoped under body.ui-v3. The body carries ui-v2 too, so ios26.css and the older page styles still apply
   underneath. Linked after those stylesheets of the page and before the app's own V3 file (Cockpit css/v3.css, Home css/home-v3.css), which sets the accent tokens below.
   Phone = below 768px (top row + floating tab bar); desktop and iPad = 768px and up (sticky glass top bar).

   Tokens (set here for light and dark): --v3-label, --v3-label2 (secondary), --v3-label3 (tertiary), --v3-ground,
   --v3-cell (list and card surface), --v3-cell2 (surface inside a sheet), --v3-sheet (sheet ground), --v3-sep
   (hairline), --v3-fill (tertiary fill), --v3-fill-sel (selected capsule), --v3-thumb (selected segment),
   --v3-glass / --v3-glass-blur / --v3-glass-shadow / --v3-glass-rim (tab bar glass), --v3-glass-sm /
   --v3-glass-sm-shadow (top-row circles), --v3-tabink, --v3-chev, --v3-badge, --v3-red-ink (destructive text),
   --v3-top (top padding of the first row), --v3-gutter (side gutter), --v3-clear (bottom padding that clears the
   tab bar). Set by the app file: --v3-accent (glyphs, selected tab), --v3-accent-ink (text, links),
   --v3-accent-fill (filled buttons, the switch, Save), --v3-on-accent (text on the fill).

   Page and head (build the head with v3Head() in shared/js/v3-ui.js)
   .v3-page         page wrapper inside #view; bottom padding clears the tab bar on a phone
   .v3-head         page head: .v3-toprow (.v3-lead = app switch or back circle, .v3-acts = circles), then
                    .v3-titleblock (.v3-eyebrow, h1.v3-title 34/41 bold, .v3-subtitle 15/20 secondary).
                    .v3-head.v3-deep = nav row with a back circle (deeper pages); .v3-notitle = top row only
   .v3-gap          22px space above a block (between sections)
   Grouped lists
   .v3-sechead      section header above a list or card (13/18 semibold secondary); an <a> or button in it is the
                    trailing link in the accent
   .v3-list         grouped inset list (radius 24, --v3-cell); its rows are direct children
   .v3-row          row (a, button.v3-rowbtn or div): optional leading .v3-tile (30px icon tile, white glyph; colour
                    classes red, orange, green, blue, purple, grey; default the accent), .v3-avatar (40px) or
                    .v3-check (24px round check, aria-pressed="true" = done; put v3Icon("check", 14, 3) inside),
                    then .v3-text (.v3-rtitle 17/22, .v3-rsub 15/20 secondary), then trailing .v3-value (17
                    secondary), a .v3-pill and/or v3Chevron(). Hairlines are inset to the text start; the last
                    row has none. .v3-list.v3-dense = 13/18 subtitles (desktop tables of rows)
   .v3-secfoot      footer under a list (13/18 secondary)
   Surfaces and controls
   .v3-card         flat card: radius 24, padding 16, --v3-cell
   .v3-tiles        number tiles: 2 columns on a phone, 4 on desktop; each child is a card with .v3-lbl (13
                    secondary) and a <b> value (28/34 bold)
   .v3-seg          segmented control: buttons with aria-pressed (or links with aria-current); .v3-segfull = full
                    width (always full width on a phone)
   .v3-chips        a row of .v3-chip filter capsules (32px; aria-pressed="true" = accent fill); one scrolling row
                    on a phone
   .v3-btn          filled capsule (accent fill, white 15/600; 44px on a phone, 34px on desktop); .tinted (accent
                    12% fill, accent text), .gray (grey fill, accent text), .plain (text only, accent);
                    .v3-btnrow lays buttons side by side, equal width
   .v3-circle       44px glass circle (36px in the desktop top bar); .fill = accent, .plain = grey fill;
                    .v3-dot inside = red badge dot. .v3-circles groups circles in one glass capsule
   .v3-glassbtn     44px glass capsule with text
   .v3-pill         22px status capsule 12/600; .red (overdue, risk), .orange (due soon, end of support), .green
                    (done, supporter), .blue (deal step), .purple (reach out), .grey (waiting; also the default)
   .v3-count        red count capsule (Inbox badge)
   .v3-sheet        <dialog> made by v3Sheet(): bottom sheet on a phone (top radius 34, grabber), centred 560px
                    card on desktop; .v3-sheethead = Close circle | title | Save circle; .v3-sheetbody
   .v3-red          destructive text (Sign out) */

/* ---------- Tokens ---------- */
body.ui-v3 {
  --v3-label: #000000; --v3-label2: rgba(60, 60, 67, .6); --v3-label3: rgba(60, 60, 67, .3);
  --v3-ground: #F2F2F7; --v3-cell: #FFFFFF; --v3-cell2: #FFFFFF; --v3-sheet: #F2F2F7;
  --v3-sep: rgba(60, 60, 67, .18);
  --v3-fill: rgba(118, 118, 128, .12); --v3-fill-sel: rgba(118, 118, 128, .14);
  --v3-thumb: #FFFFFF; --v3-thumb-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  --v3-glass: rgba(255, 255, 255, .65);
  --v3-glass-blur: blur(14px) saturate(180%);
  --v3-glass-shadow: 0 8px 40px rgba(0, 0, 0, .12);
  --v3-glass-rim: inset 0 0 0 .5px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
  --v3-glass-sm: rgba(255, 255, 255, .7);
  --v3-glass-sm-shadow: 0 2px 12px rgba(0, 0, 0, .06), inset 0 0 0 .5px rgba(0, 0, 0, .06);
  --v3-tabink: #1A1A1A; --v3-chev: rgba(60, 60, 67, .3);
  --v3-badge: #FF383C; --v3-red-ink: #E9152D;
  --v3-backdrop: rgba(0, 0, 0, .25);
  --v3-top: max(16px, calc(env(safe-area-inset-top, 0px) + 4px));
  --v3-gutter: 16px;
  --v3-clear: calc(94px + max(26px, env(safe-area-inset-bottom, 0px)));
  letter-spacing: -.2px;
}
@media (min-width: 768px) {
  body.ui-v3 { --v3-gutter: 24px; --v3-clear: 32px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.ui-v3 {
    --v3-label: #FFFFFF; --v3-label2: rgba(235, 235, 245, .6); --v3-label3: rgba(235, 235, 245, .3);
    --v3-ground: #000000; --v3-cell: #1C1C1E; --v3-cell2: #2C2C2E; --v3-sheet: #1C1C1E;
    --v3-sep: rgba(84, 84, 88, .6);
    --v3-fill: rgba(118, 118, 128, .24); --v3-fill-sel: rgba(118, 118, 128, .24);
    --v3-thumb: #636366; --v3-thumb-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    --v3-glass: rgba(30, 30, 30, .6);
    --v3-glass-shadow: 0 8px 40px rgba(0, 0, 0, .5);
    --v3-glass-rim: inset 0 0 0 .5px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .08);
    --v3-glass-sm: rgba(44, 44, 46, .7);
    --v3-glass-sm-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .08);
    --v3-tabink: #FFFFFF; --v3-chev: rgba(235, 235, 245, .3);
    --v3-badge: #FF4245; --v3-red-ink: #FF6165;
  }
}
:root[data-theme="dark"] body.ui-v3 {
  --v3-label: #FFFFFF; --v3-label2: rgba(235, 235, 245, .6); --v3-label3: rgba(235, 235, 245, .3);
  --v3-ground: #000000; --v3-cell: #1C1C1E; --v3-cell2: #2C2C2E; --v3-sheet: #1C1C1E;
  --v3-sep: rgba(84, 84, 88, .6);
  --v3-fill: rgba(118, 118, 128, .24); --v3-fill-sel: rgba(118, 118, 128, .24);
  --v3-thumb: #636366; --v3-thumb-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  --v3-glass: rgba(30, 30, 30, .6);
  --v3-glass-shadow: 0 8px 40px rgba(0, 0, 0, .5);
  --v3-glass-rim: inset 0 0 0 .5px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .08);
  --v3-glass-sm: rgba(44, 44, 46, .7);
  --v3-glass-sm-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .08);
  --v3-tabink: #FFFFFF; --v3-chev: rgba(235, 235, 245, .3);
  --v3-badge: #FF4245; --v3-red-ink: #FF6165;
}

/* ---------- Page frame: #view gutters; pages without a V3 renderer (body.v3-compat) get the tab bar clearance ---------- */
body.ui-v3 main#view {
  padding-inline: max(var(--v3-gutter), env(safe-area-inset-left, 0px)) max(var(--v3-gutter), env(safe-area-inset-right, 0px));
  padding-bottom: 0;
}
body.ui-v3.v3-compat main#view { padding-bottom: var(--v3-clear); }
body.ui-v3 .v3-page { padding-bottom: var(--v3-clear); }

/* ---------- Glass circles, glass text buttons, the app switch ---------- */
body.ui-v3 .v3-circle {
  flex: none; position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none;
  color: var(--v3-label); background: var(--v3-glass-sm);
  -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%);
  box-shadow: var(--v3-glass-sm-shadow);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
body.ui-v3 .v3-circle:hover { text-decoration: none; filter: brightness(.97); }
body.ui-v3 .v3-circle:active { transform: scale(.95); }
body.ui-v3 .v3-circle:disabled { opacity: .5; cursor: default; transform: none; }
body.ui-v3 .v3-circle.fill { background: var(--v3-accent-fill); color: var(--v3-on-accent); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.ui-v3 .v3-circle.plain { background: var(--v3-fill); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.ui-v3 .v3-circles {
  display: inline-flex; flex: none; border-radius: 999px; background: var(--v3-glass-sm);
  -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%);
  box-shadow: var(--v3-glass-sm-shadow);
}
body.ui-v3 .v3-circles > .v3-circle { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.ui-v3 .v3-dot {
  position: absolute; top: 8px; right: 7px; width: 9px; height: 9px; padding: 0; border-radius: 999px;
  background: var(--v3-badge); box-shadow: 0 0 0 2px var(--v3-cell); font-size: 0; line-height: 0; overflow: hidden; color: transparent;
}
body.ui-v3 .v3-glassbtn {
  flex: none; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; display: inline-flex; align-items: center;
  font: 600 15px/20px var(--sans); color: var(--v3-label); cursor: pointer; text-decoration: none; white-space: nowrap;
  background: var(--v3-glass-sm); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%);
  box-shadow: var(--v3-glass-sm-shadow);
}
body.ui-v3 .v3-glassbtn:hover { text-decoration: none; filter: brightness(.97); }
body.ui-v3 .v3-glassbtn[aria-pressed="true"] { background: var(--v3-accent-fill); color: var(--v3-on-accent); box-shadow: none; }
body.ui-v3 .v3-appswitch {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); flex: none; padding: 3px; border-radius: 999px;
  background: var(--v3-glass-sm); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%);
  box-shadow: var(--v3-glass-sm-shadow);
}
body.ui-v3 .v3-appswitch a {
  height: 38px; padding: 0 16px; display: flex; align-items: center; justify-content: center; border-radius: 999px;
  font: 500 15px/20px var(--sans); color: var(--v3-label); text-decoration: none; white-space: nowrap; box-shadow: none;
}
body.ui-v3 .v3-appswitch a:hover { text-decoration: none; }
body.ui-v3 .v3-appswitch a[aria-current="page"] { background: var(--v3-accent-fill); color: var(--v3-on-accent); font-weight: 600; }
body.ui-v3 .v3-count {
  display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--v3-badge); color: #FFFFFF;
  font: 700 11px/18px var(--sans); letter-spacing: 0; text-align: center; font-variant-numeric: tabular-nums;
}

/* ---------- Chrome, phone: top row of compat pages and the floating tab bar ---------- */
body.ui-v3 .v3-compatrow { display: none; }
body.ui-v3 .v3-tabbar {
  position: fixed; z-index: 6; display: flex; gap: 10px; align-items: center;
  left: max(20px, env(safe-area-inset-left, 0px)); right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(26px, env(safe-area-inset-bottom, 0px));
}
body.ui-v3 .v3-tabs {
  flex: 1 1 auto; min-width: 0; height: 62px; padding: 4px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  border-radius: 999px; background: var(--v3-glass);
  -webkit-backdrop-filter: var(--v3-glass-blur); backdrop-filter: var(--v3-glass-blur);
  box-shadow: var(--v3-glass-shadow), var(--v3-glass-rim);
}
body.ui-v3 .v3-tabs a {
  min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 999px; color: var(--v3-tabink); font: 600 10px/12px var(--sans); letter-spacing: 0; text-decoration: none;
}
body.ui-v3 .v3-tabs a:hover { text-decoration: none; }
body.ui-v3 .v3-tabs a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui-v3 .v3-tabs a[aria-current="page"] { background: var(--v3-fill-sel); color: var(--v3-accent); }
body.ui-v3 .v3-tabs a:focus-visible, body.ui-v3 .v3-tabsearch:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: -2px; }
body.ui-v3 .v3-tabsearch {
  flex: none; width: 62px; height: 62px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--v3-tabink);
  background: var(--v3-glass); -webkit-backdrop-filter: var(--v3-glass-blur); backdrop-filter: var(--v3-glass-blur);
  box-shadow: var(--v3-glass-shadow), var(--v3-glass-rim);
}
body.ui-v3 .v3-bar { display: none; }
@media (max-width: 767.98px) {
  body.ui-v3.v3-compat .v3-compatrow {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: var(--v3-top) max(var(--v3-gutter), env(safe-area-inset-right, 0px)) 0 max(var(--v3-gutter), env(safe-area-inset-left, 0px));
  }
  body.ui-v3 .v3-compatrow .v3-acts { display: flex; gap: 8px; align-items: center; }
  /* Toasts sit just above the tab bar */
  body.ui-v3 #toast, body.ui-v3 .toast { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Chrome, desktop and iPad: the sticky glass top bar ---------- */
@media (min-width: 768px) {
  body.ui-v3 .v3-tabbar { display: none; }
  body.ui-v3 .v3-bar {
    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; min-height: 64px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) max(var(--v3-gutter), env(safe-area-inset-right, 0px)) 12px max(var(--v3-gutter), env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--v3-ground) 72%, transparent);
    -webkit-backdrop-filter: var(--v3-glass-blur); backdrop-filter: var(--v3-glass-blur);
    box-shadow: inset 0 -.5px 0 var(--v3-sep);
  }
  /* The switch is a plain segmented control in the bar */
  body.ui-v3 .v3-bar .v3-appswitch { background: var(--v3-fill); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.ui-v3 .v3-bar .v3-appswitch a { height: 30px; padding: 0 12px; font-size: 13px; line-height: 18px; }
  body.ui-v3 .v3-bar .v3-appswitch a[aria-current="page"] { background: var(--v3-thumb); color: var(--v3-label); box-shadow: var(--v3-thumb-shadow); }
  body.ui-v3 .v3-nav {
    display: flex; gap: 2px; min-width: 0; padding: 4px; border-radius: 999px; overflow-x: auto; scrollbar-width: none;
    background: var(--v3-glass-sm); box-shadow: var(--v3-glass-sm-shadow);
  }
  body.ui-v3 .v3-nav::-webkit-scrollbar { display: none; }
  body.ui-v3 .v3-nav a {
    flex: none; height: 32px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
    color: var(--v3-tabink); font: 500 14px/18px var(--sans); white-space: nowrap; text-decoration: none; box-shadow: none;
  }
  body.ui-v3 .v3-nav a:hover { background: var(--v3-fill); color: var(--v3-tabink); text-decoration: none; }
  body.ui-v3 .v3-nav a[aria-current="page"] { background: var(--v3-fill-sel); color: var(--v3-accent-ink); font-weight: 600; box-shadow: none; }
  body.ui-v3 .v3-searchfield {
    margin-left: auto; flex: 0 1 240px; min-width: 0; height: 36px; padding: 0 12px; display: flex; align-items: center; gap: 8px;
    border: 0; border-radius: 999px; background: var(--v3-fill); color: var(--v3-label2); font: 400 14px/18px var(--sans);
    cursor: pointer; text-align: left;
  }
  body.ui-v3 .v3-searchfield svg { flex: none; }
  body.ui-v3 .v3-searcht { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.ui-v3 .v3-kbd { flex: none; font: 600 12px/16px var(--sans); color: var(--v3-label2); }
  body.ui-v3 .v3-bar .v3-circle { width: 36px; height: 36px; }
}
/* iPad portrait and narrow windows: the search field becomes a circle and the nav tightens (it scrolls if still too wide) */
@media (min-width: 768px) and (max-width: 1099.98px) {
  body.ui-v3 .v3-bar { gap: 8px; }
  body.ui-v3 .v3-nav a { padding: 0 10px; }
  body.ui-v3 .v3-searchfield { flex: none; width: 36px; padding: 0; justify-content: center; }
  body.ui-v3 .v3-searcht, body.ui-v3 .v3-kbd { display: none; }
}

/* ---------- Page head and large title ---------- */
body.ui-v3 .v3-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lead acts" "title title";
  align-items: center; column-gap: 12px; padding-top: var(--v3-top);
}
body.ui-v3 .v3-toprow { display: contents; }
body.ui-v3 .v3-lead { grid-area: lead; display: flex; align-items: center; min-width: 0; }
body.ui-v3 .v3-acts { grid-area: acts; display: flex; gap: 8px; align-items: center; justify-self: end; }
body.ui-v3 .v3-titleblock { grid-area: title; min-width: 0; padding-top: 6px; }
body.ui-v3 .v3-title { margin: 0; font: 700 34px/41px var(--display); letter-spacing: .4px; text-wrap: balance; }
body.ui-v3 .v3-eyebrow { margin: 0; font: 600 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); text-transform: none; }
body.ui-v3 .v3-subtitle { margin: 0; font: 400 15px/20px var(--sans); letter-spacing: -.23px; color: var(--v3-label2); }
body.ui-v3 .v3-head.v3-notitle { grid-template-areas: "lead acts"; }
@media (min-width: 768px) {
  body.ui-v3 .v3-head { grid-template-areas: "title acts"; align-items: end; padding-top: 20px; }
  body.ui-v3 .v3-head.v3-notitle:not(.v3-deep) { grid-template-areas: ". acts"; }
  body.ui-v3 .v3-head:not(.v3-deep) .v3-lead { display: none; }
  body.ui-v3 .v3-head.v3-deep { grid-template-areas: "lead lead" "title acts"; row-gap: 8px; }
  body.ui-v3 .v3-head.v3-deep.v3-notitle { grid-template-areas: "lead acts"; align-items: center; }
}

/* ---------- Grouped inset list ---------- */
body.ui-v3 .v3-sechead {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 22px 0 0; padding: 0 16px 6px; font: 600 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2);
}
body.ui-v3 .v3-sechead a, body.ui-v3 .v3-sechead button {
  font: 400 15px/20px var(--sans); color: var(--v3-accent-ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
}
body.ui-v3 .v3-secfoot { margin: 6px 0 0; padding: 0 16px; font: 400 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); }
body.ui-v3 .v3-list { display: block; margin: 0; padding: 0; list-style: none; border-radius: 24px; background: var(--v3-cell); overflow: hidden; }
body.ui-v3 .v3-row {
  --v3-inset: 16px;
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px 16px;
  color: var(--v3-label); text-decoration: none; font: 400 17px/22px var(--sans); letter-spacing: -.43px;
}
body.ui-v3 .v3-row:has(> .v3-tile) { --v3-inset: 58px; }
body.ui-v3 .v3-row:has(> .v3-check) { --v3-inset: 52px; }
body.ui-v3 .v3-row:has(> .v3-avatar) { --v3-inset: 68px; }
body.ui-v3 .v3-list > .v3-row:not(:last-child)::after {
  content: ""; position: absolute; left: var(--v3-inset); right: 0; bottom: 0; height: .5px; background: var(--v3-sep); pointer-events: none;
}
body.ui-v3 a.v3-row:hover { text-decoration: none; }
body.ui-v3 .v3-rowbtn { width: 100%; margin: 0; border: 0; background: none; text-align: left; cursor: pointer; }
@media (hover: hover) {
  body.ui-v3 a.v3-row:hover, body.ui-v3 .v3-rowbtn:hover { background: var(--v3-fill); }
}
body.ui-v3 a.v3-row:active, body.ui-v3 .v3-rowbtn:active { background: var(--v3-fill); }
body.ui-v3 .v3-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
body.ui-v3 .v3-rtitle { font: 400 17px/22px var(--sans); letter-spacing: -.43px; color: var(--v3-label); overflow-wrap: anywhere; }
body.ui-v3 .v3-rsub { font: 400 15px/20px var(--sans); letter-spacing: -.23px; color: var(--v3-label2); overflow-wrap: anywhere; }
body.ui-v3 .v3-list.v3-dense .v3-rsub { font-size: 13px; line-height: 18px; letter-spacing: -.08px; }
body.ui-v3 .v3-value { flex: none; font: 400 17px/22px var(--sans); letter-spacing: -.43px; color: var(--v3-label2); text-align: right; }
body.ui-v3 .v3-chev { flex: none; color: var(--v3-chev); }
body.ui-v3 .v3-tile {
  flex: none; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--v3-accent-fill); color: #FFFFFF;
}
body.ui-v3 .v3-tile.red { background: #FF383C; }
body.ui-v3 .v3-tile.orange { background: #FF8D28; }
body.ui-v3 .v3-tile.green { background: #34C759; }
body.ui-v3 .v3-tile.blue { background: #0088FF; }
body.ui-v3 .v3-tile.purple { background: #CB30E0; }
body.ui-v3 .v3-tile.grey { background: #8E8E93; }
body.ui-v3 .v3-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 999px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #A0A0A8, #5A5A62); color: #FFFFFF; font: 600 15px/1 var(--sans); letter-spacing: 0;
}
body.ui-v3 .v3-avatar img { width: 100%; height: 100%; object-fit: cover; }
body.ui-v3 .v3-check {
  flex: none; width: 24px; height: 24px; padding: 0; border-radius: 999px; border: 1.5px solid var(--v3-label3); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body.ui-v3 .v3-check svg { opacity: 0; }
body.ui-v3 .v3-check[aria-pressed="true"] { background: var(--v3-accent); border-color: var(--v3-accent); }
body.ui-v3 .v3-check[aria-pressed="true"] svg { opacity: 1; }
body.ui-v3 .v3-check:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 2px; }

/* ---------- Card and number tiles ---------- */
body.ui-v3 .v3-card { border: 0; border-radius: 24px; padding: 16px; background: var(--v3-cell); box-shadow: none; }
body.ui-v3 .v3-card > :first-child { margin-top: 0; }
body.ui-v3 .v3-card > :last-child { margin-bottom: 0; }
body.ui-v3 .v3-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { body.ui-v3 .v3-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.ui-v3 .v3-tiles > * { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px; border-radius: 24px; background: var(--v3-cell); color: var(--v3-label); text-decoration: none; }
body.ui-v3 .v3-tiles .v3-lbl { font: 400 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); }
body.ui-v3 .v3-tiles b { font: 700 28px/34px var(--display); letter-spacing: .38px; font-variant-numeric: tabular-nums; }

/* ---------- Segmented control ---------- */
body.ui-v3 .v3-seg {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: 100%;
  padding: 3px; border-radius: 999px; background: var(--v3-fill);
}
body.ui-v3 .v3-seg.v3-segfull { display: grid; width: 100%; }
body.ui-v3 .v3-seg > button, body.ui-v3 .v3-seg > a {
  min-width: 0; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 500 14px/18px var(--sans); letter-spacing: -.15px; color: var(--v3-label); text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
body.ui-v3 .v3-seg > [aria-pressed="true"], body.ui-v3 .v3-seg > [aria-selected="true"], body.ui-v3 .v3-seg > [aria-current="page"] {
  background: var(--v3-thumb); box-shadow: var(--v3-thumb-shadow); font-weight: 600;
}
body.ui-v3 .v3-seg > :focus-visible { outline: 2px solid var(--v3-accent); outline-offset: -2px; }
@media (max-width: 767.98px) { body.ui-v3 .v3-seg { display: grid; width: 100%; } }

/* ---------- Chips ---------- */
body.ui-v3 .v3-chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 767.98px) {
  body.ui-v3 .v3-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--v3-gutter)); padding-inline: var(--v3-gutter);
  }
  body.ui-v3 .v3-chips::-webkit-scrollbar { display: none; }
}
body.ui-v3 .v3-chip {
  flex: none; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--v3-fill); color: var(--v3-label); font: 500 14px/18px var(--sans); letter-spacing: -.15px; white-space: nowrap;
  cursor: pointer; text-decoration: none;
}
body.ui-v3 .v3-chip:hover { text-decoration: none; }
body.ui-v3 .v3-chip[aria-pressed="true"], body.ui-v3 .v3-chip[aria-current="page"] { background: var(--v3-accent-fill); color: var(--v3-on-accent); font-weight: 600; }

/* ---------- Buttons ---------- */
body.ui-v3 .v3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 16px;
  border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; text-decoration: none;
  background: var(--v3-accent-fill); color: var(--v3-on-accent); font: 600 15px/20px var(--sans); letter-spacing: -.23px;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (max-width: 767.98px) { body.ui-v3 .v3-btn { height: 44px; padding: 0 18px; } }
body.ui-v3 .v3-btn:hover { text-decoration: none; filter: brightness(1.06); }
body.ui-v3 .v3-btn:active { transform: scale(.98); }
body.ui-v3 .v3-btn:disabled { opacity: .5; cursor: default; filter: none; transform: none; }
body.ui-v3 .v3-btn.tinted { background: color-mix(in srgb, var(--v3-accent) 12%, transparent); color: var(--v3-accent-ink); }
body.ui-v3 .v3-btn.gray { background: var(--v3-fill); color: var(--v3-accent-ink); }
body.ui-v3 .v3-btn.plain { background: none; color: var(--v3-accent-ink); padding-inline: 4px; }
body.ui-v3 .v3-btn.tinted:hover, body.ui-v3 .v3-btn.gray:hover, body.ui-v3 .v3-btn.plain:hover { filter: brightness(.96); }
body.ui-v3 .v3-btnrow { display: flex; gap: 8px; }
body.ui-v3 .v3-btnrow > .v3-btn { flex: 1 1 0; min-width: 0; }

/* ---------- Pills ---------- */
body.ui-v3 .v3-pill {
  display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 8px; border-radius: 999px; white-space: nowrap;
  font: 600 12px/16px var(--sans); letter-spacing: 0; background: rgba(118, 118, 128, .12); color: rgba(60, 60, 67, .8);
}
body.ui-v3 .v3-pill.red { background: rgba(255, 56, 60, .12); color: #C4161B; }
body.ui-v3 .v3-pill.orange { background: rgba(255, 141, 40, .16); color: #A84A00; }
body.ui-v3 .v3-pill.green { background: rgba(52, 199, 89, .14); color: #1F7A35; }
body.ui-v3 .v3-pill.blue { background: rgba(0, 136, 255, .12); color: #0062C4; }
body.ui-v3 .v3-pill.purple { background: rgba(203, 48, 224, .12); color: #8A1F9A; }
body.ui-v3 .v3-pill.grey { background: rgba(118, 118, 128, .12); color: rgba(60, 60, 67, .8); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.ui-v3 .v3-pill, :root:not([data-theme="light"]) body.ui-v3 .v3-pill.grey { background: rgba(118, 118, 128, .24); color: rgba(235, 235, 245, .8); }
  :root:not([data-theme="light"]) body.ui-v3 .v3-pill.red { background: rgba(255, 66, 69, .22); color: #FF8A8C; }
  :root:not([data-theme="light"]) body.ui-v3 .v3-pill.orange { background: rgba(255, 146, 48, .22); color: #FFB06A; }
  :root:not([data-theme="light"]) body.ui-v3 .v3-pill.green { background: rgba(48, 209, 88, .2); color: #30D158; }
  :root:not([data-theme="light"]) body.ui-v3 .v3-pill.blue { background: rgba(0, 145, 255, .22); color: #6CB8FF; }
  :root:not([data-theme="light"]) body.ui-v3 .v3-pill.purple { background: rgba(219, 52, 242, .22); color: #EA8DFF; }
}
:root[data-theme="dark"] body.ui-v3 .v3-pill, :root[data-theme="dark"] body.ui-v3 .v3-pill.grey { background: rgba(118, 118, 128, .24); color: rgba(235, 235, 245, .8); }
:root[data-theme="dark"] body.ui-v3 .v3-pill.red { background: rgba(255, 66, 69, .22); color: #FF8A8C; }
:root[data-theme="dark"] body.ui-v3 .v3-pill.orange { background: rgba(255, 146, 48, .22); color: #FFB06A; }
:root[data-theme="dark"] body.ui-v3 .v3-pill.green { background: rgba(48, 209, 88, .2); color: #30D158; }
:root[data-theme="dark"] body.ui-v3 .v3-pill.blue { background: rgba(0, 145, 255, .22); color: #6CB8FF; }
:root[data-theme="dark"] body.ui-v3 .v3-pill.purple { background: rgba(219, 52, 242, .22); color: #EA8DFF; }

body.ui-v3 .v3-red { color: var(--v3-red-ink); }

/* ---------- Bottom sheet (v3Sheet) ---------- */
body.ui-v3 dialog.v3-sheet {
  width: 100%; max-width: none; max-height: calc(100dvh - 54px - env(safe-area-inset-top, 0px));
  margin: auto 0 0; padding: 0; border: 0; border-radius: 34px 34px 0 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--v3-sheet); color: var(--v3-label); box-shadow: 0 -8px 40px rgba(0, 0, 0, .18);
}
body.ui-v3 dialog.v3-sheet[open] { animation: sheet-up 280ms var(--ease); }
body.ui-v3 dialog.v3-sheet::backdrop { background: var(--v3-backdrop); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.ui-v3 .v3-sheetbox { padding: 6px var(--v3-gutter) calc(24px + env(safe-area-inset-bottom, 0px)); }
body.ui-v3 .v3-sheetbox::before { content: ""; display: block; width: 36px; height: 5px; margin: 0 auto; border-radius: 999px; background: var(--v3-label3); }
body.ui-v3 .v3-sheethead { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; padding-top: 10px; }
body.ui-v3 .v3-sheettitle { margin: 0; text-align: center; font: 600 17px/22px var(--sans); letter-spacing: -.43px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui-v3 .v3-sheetbody { margin-top: 14px; }
body.ui-v3 .v3-sheetbody > .v3-sechead:first-child { margin-top: 6px; }
body.ui-v3 .v3-sheet .v3-list, body.ui-v3 .v3-sheet .v3-card, body.ui-v3 .v3-sheet .v3-tiles > * { background: var(--v3-cell2); }
@media (min-width: 768px) {
  body.ui-v3 dialog.v3-sheet { width: min(560px, calc(100vw - 48px)); max-height: 85vh; margin: auto; border-radius: 34px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
  body.ui-v3 dialog.v3-sheet[open] { animation: sheet-in 200ms var(--ease); }
  body.ui-v3 .v3-sheetbox { padding: 16px 20px 24px; }
  body.ui-v3 .v3-sheetbox::before { display: none; }
  body.ui-v3 .v3-sheethead { padding-top: 0; }
}

/* ---------- Spacing (after the components, so it wins over their margin: 0) ---------- */
body.ui-v3 .v3-gap { margin-top: 22px; }

/* ---------- No backdrop-filter: glass becomes solid ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.ui-v3 .v3-circle:not(.fill):not(.plain), body.ui-v3 .v3-circles, body.ui-v3 .v3-glassbtn, body.ui-v3 .v3-appswitch,
  body.ui-v3 .v3-tabs, body.ui-v3 .v3-tabsearch, body.ui-v3 .v3-nav { background: var(--v3-cell); }
  body.ui-v3 .v3-circles > .v3-circle { background: transparent; }
  body.ui-v3 .v3-bar { background: var(--v3-ground); }
}
/* === css/v3.css === */
/* Cockpit UI V3: the accent and the shell. Components and chrome: ../shared/css/ios26-v3.css (read its header for
   the class reference). Every rule is under body.ui-v3. Page files: css/v3-<page>.css. */

/* Accent: iOS 26 Blue for glyphs; a darker blue for text and fills with white text (#0088FF on white is ~3.6:1) */
body.ui-v3 { --v3-accent: #0088FF; --v3-accent-ink: #0071E3; --v3-accent-fill: #0071E3; --v3-on-accent: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.ui-v3 { --v3-accent: #0091FF; --v3-accent-ink: #3DA5FF; --v3-accent-fill: #0091FF; }
}
:root[data-theme="dark"] body.ui-v3 { --v3-accent: #0091FF; --v3-accent-ink: #3DA5FF; --v3-accent-fill: #0091FF; }
/* === css/v3-now.css === */
/* UI V3: Now page (#/, js/v3/now.js). Every rule under body.ui-v3 (components: ../shared/css/ios26-v3.css; the task
   row is in css/v3-tasks.css). Board: Main (light). Phone: one column; desktop: the sections side by side. */

/* The More circle is for the phone; the desktop top bar has its own */
@media (min-width: 768px) { body.ui-v3 .v3n-more { display: none; } }

body.ui-v3 .v3n-top { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
body.ui-v3 .v3n-sum { display: flex; flex-wrap: wrap; gap: 8px; }
body.ui-v3 .v3n-sumchip {
  height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; white-space: nowrap;
  background: var(--v3-cell); color: var(--v3-label); font: 600 13px/18px var(--sans); letter-spacing: -.08px;
}
@media (max-width: 767.98px) {
  body.ui-v3 .v3n-sum {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--v3-gutter)); padding-inline: var(--v3-gutter);
  }
  body.ui-v3 .v3n-sum::-webkit-scrollbar { display: none; }
}
@media (min-width: 768px) {
  body.ui-v3 .v3n-top { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  body.ui-v3 .v3n-area { min-width: 300px; }
}

/* Columns: Next moves, Meetings, Reach out */
body.ui-v3 .v3n-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 768px) { body.ui-v3 .v3n-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
@media (min-width: 1280px) { body.ui-v3 .v3n-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.ui-v3 .v3n-col { min-width: 0; }
body.ui-v3 h2.v3-sechead { text-transform: none; }
body.ui-v3 .v3n-after { margin-top: 12px; }

body.ui-v3 .v3n-empty { margin: 0; padding: 14px 16px; font: 400 15px/20px var(--sans); color: var(--v3-label2); }
body.ui-v3 .v3n-err { margin: 0 0 10px; padding: 0 16px; color: var(--v3-red-ink); font: 600 15px/20px var(--sans); }
body.ui-v3 .v3n-move .v3-pill.blue { margin-left: -4px; }

/* Meetings: day chips, then one row per meeting with the time on the left */
body.ui-v3 .v3n-days { margin-bottom: 10px; }
body.ui-v3 .v3n-dn { font-weight: 400; opacity: .7; font-variant-numeric: tabular-nums; }
body.ui-v3 .v3n-meet { --v3-inset: 72px; align-items: flex-start; }
body.ui-v3 .v3n-meet .v3-chev { align-self: center; }
body.ui-v3 .v3n-meet.is-off .v3-rtitle { text-decoration: line-through; color: var(--v3-label2); }
body.ui-v3 .v3n-time { flex: none; width: 44px; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
body.ui-v3 .v3n-time b { font: 600 15px/22px var(--sans); color: var(--v3-label); }
body.ui-v3 .v3n-time span { font: 400 13px/18px var(--sans); color: var(--v3-label2); }
body.ui-v3 .v3n-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
body.ui-v3 .v3n-pills .v3-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Reach out: avatar, name, Log or the two birthday answers */
body.ui-v3 .v3n-reach { --v3-inset: 68px; }
body.ui-v3 .v3n-reach > .av { width: 40px; height: 40px; font-size: 15px; }
body.ui-v3 .v3n-name { text-decoration: none; }
body.ui-v3 .v3n-name:hover { color: var(--v3-accent-ink); }
body.ui-v3 .v3n-acts { flex: none; display: flex; gap: 8px; align-items: center; }
body.ui-v3 .v3n-bd {
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--v3-fill); color: var(--v3-accent-ink); cursor: pointer;
}
body.ui-v3 .v3n-bd + .v3n-bd { color: var(--v3-label2); }
body.ui-v3 .v3n-bd:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 2px; }
@media (max-width: 767.98px) { body.ui-v3 .v3n-bd { width: 44px; height: 44px; } }
/* === css/v3-tasks.css === */
/* UI V3: All tasks page (#/tasks), the shared task row (also on Now) and the task sheet (js/v3/alltasks.js).
   Every rule under body.ui-v3 (components: ../shared/css/ios26-v3.css). Boards: CockpitDark (Tasks),
   CockpitTaskSheet (the sheet). Phone inputs are 16px so iOS does not zoom on focus. */

/* ---------- Task row (All tasks and Now) ---------- */
body.ui-v3 .v3t-row { --v3-inset: 52px; align-items: center; cursor: pointer; }
body.ui-v3 .v3t-row.v3t-decide { box-shadow: inset 3px 0 0 var(--v3-badge); }
body.ui-v3 .v3t-row.is-leaving { opacity: .45; transition: opacity 220ms var(--ease); }
body.ui-v3 .v3t-row .v3-check { position: relative; }
body.ui-v3 .v3t-row .v3-check::before { content: ""; position: absolute; inset: -10px; }  /* 44px target around the 24px circle */
body.ui-v3 .v3t-slot { flex: none; width: 24px; height: 24px; }
body.ui-v3 .v3t-ring {
  flex: none; width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--v3-fill); color: var(--v3-label2);
}
body.ui-v3 .v3t-open {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: 400 17px/22px var(--sans); letter-spacing: -.43px; color: var(--v3-label); overflow-wrap: anywhere;
}
body.ui-v3 .v3t-open:hover { text-decoration: none; }
body.ui-v3 .v3t-open:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 2px; border-radius: 6px; }
body.ui-v3 .v3t-star { color: #FF9500; }
body.ui-v3 .v3t-row .v3-rsub a { color: inherit; text-decoration: underline; text-decoration-color: var(--v3-label3); text-underline-offset: 2px; }
body.ui-v3 .v3t-row .v3-rsub a:hover { color: var(--v3-accent-ink); }
body.ui-v3 .v3t-late { color: var(--v3-red-ink); }
body.ui-v3 .v3t-prio { font-variant-numeric: tabular-nums; }
body.ui-v3 .v3t-nudge { flex: none; height: 32px; padding: 0 14px; font-size: 14px; }
@media (max-width: 767.98px) { body.ui-v3 .v3t-nudge { height: 36px; } }
body.ui-v3 .v3t-accent { color: var(--v3-accent-ink); }
body.ui-v3 .v3t-morerow { --v3-inset: 52px; }

/* ---------- All tasks page ---------- */
body.ui-v3 .v3t-tools { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
body.ui-v3 .v3t-filters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
body.ui-v3 .v3t-search {
  flex: 1 1 220px; max-width: 360px; height: 36px; padding: 0 12px; display: flex; align-items: center; gap: 8px;
  border-radius: 999px; background: var(--v3-fill); color: var(--v3-label2);
}
body.ui-v3 .v3t-search input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: 400 15px/20px var(--sans); color: var(--v3-label); -webkit-appearance: none; appearance: none;
}
body.ui-v3 .v3t-search input:focus { box-shadow: none; outline: none; }
body.ui-v3 .v3t-search:focus-within { outline: 2px solid var(--v3-accent); outline-offset: 1px; }
body.ui-v3 .v3t-search input::-webkit-search-cancel-button { cursor: pointer; }
body.ui-v3 .v3t-grouprow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
body.ui-v3 .v3t-hnote { font-weight: 400; color: var(--v3-label2); }
body.ui-v3 .v3-sechead .v3t-gname { font: 600 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); text-decoration: none; }
body.ui-v3 .v3-sechead a.v3t-gname:hover { color: var(--v3-accent-ink); }
body.ui-v3 .v3t-empty { margin: 0; padding: 14px 16px; font: 400 15px/20px var(--sans); color: var(--v3-label2); }
@media (max-width: 767.98px) {
  body.ui-v3 .v3t-filters { flex-direction: column; align-items: stretch; }
  body.ui-v3 .v3t-search { max-width: none; flex-basis: auto; height: 40px; }
  body.ui-v3 .v3t-search input { font-size: 16px; }
  body.ui-v3 .v3t-grouprow .v3-seg { flex: 1 1 auto; }
}
/* Desktop: the groups of Mine sit side by side when there is room */
@media (min-width: 1100px) {
  body.ui-v3 .v3t-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); column-gap: 24px; align-items: start; }
  body.ui-v3 .v3t-views { min-width: 420px; }
}

/* ---------- Task sheet ---------- */
body.ui-v3 .v3t-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.ui-v3 .v3t-sheet .v3t-form { margin: 0; }
body.ui-v3 .v3t-warn {
  margin: 0 0 14px; padding: 12px 16px; border-radius: 18px; background: rgba(255, 56, 60, .12); color: var(--v3-red-ink);
  font: 600 15px/20px var(--sans); letter-spacing: -.23px;
}
body.ui-v3 .v3t-titlecard { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
body.ui-v3 .v3t-titlecard input, body.ui-v3 .v3t-titlecard textarea {
  width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; resize: none;
}
body.ui-v3 .v3t-titlecard input:focus, body.ui-v3 .v3t-titlecard textarea:focus { box-shadow: none; outline: none; }
body.ui-v3 .v3t-titlecard:focus-within { box-shadow: 0 0 0 2px var(--v3-accent); }
body.ui-v3 .v3t-title { font: 600 20px/25px var(--display); letter-spacing: -.45px; color: var(--v3-label); }
body.ui-v3 .v3t-notes { font: 400 15px/20px var(--sans); letter-spacing: -.23px; color: var(--v3-label2); field-sizing: content; min-height: 40px; max-height: 40vh; }
/* cockpit.css styles the V1 field by id (#f-notes min-height 9em, #r-fields display contents): the sheet overrides it */
body.ui-v3 .v3t-titlecard #f-notes { resize: none; min-height: 40px; }
body.ui-v3 .v3t-refform #r-fields { display: flex; }
body.ui-v3 .v3t-title::placeholder, body.ui-v3 .v3t-notes::placeholder { color: var(--v3-label3); }

/* P1 to P4: radios in a segmented control; the selected one carries its priority colour */
body.ui-v3 .v3t-pseg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.ui-v3 .v3t-pseg label { position: relative; min-width: 0; cursor: pointer; }
body.ui-v3 .v3t-pseg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
body.ui-v3 .v3t-pseg span {
  height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 999px;
  font: 500 14px/18px var(--sans); color: var(--v3-label); transition: background-color var(--dur) var(--ease);
}
body.ui-v3 .v3t-pseg input:checked + span { background: var(--v3-thumb); box-shadow: var(--v3-thumb-shadow); font-weight: 700; }
body.ui-v3 .v3t-pseg .p1 input:checked + span { color: #C4161B; }
body.ui-v3 .v3t-pseg .p2 input:checked + span { color: #A84A00; }
body.ui-v3 .v3t-pseg input:focus-visible + span { outline: 2px solid var(--v3-accent); outline-offset: -2px; }

/* Settings rows: tile, label, control on the right */
body.ui-v3 .v3t-set { min-height: 48px; padding-block: 6px; }
body.ui-v3 .v3t-set > label.v3-text { cursor: pointer; }
body.ui-v3 .v3t-set .v3-rtitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
body.ui-v3 .v3t-rnote { font: 400 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); }
body.ui-v3 .v3t-go { font: 400 15px/20px var(--sans); color: var(--v3-accent-ink); text-decoration: none; }
body.ui-v3 .v3t-go[hidden] { display: none; }
body.ui-v3 .v3t-selwrap { position: relative; flex: 0 1 auto; min-width: 0; max-width: 58%; display: inline-flex; align-items: center; gap: 6px; }
body.ui-v3 .v3t-selwrap .v3-chev { pointer-events: none; }
body.ui-v3 select.v3t-sel {
  min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-appearance: none; appearance: none; text-overflow: ellipsis; text-align: right; text-align-last: right; direction: ltr;
  font: 400 17px/22px var(--sans); letter-spacing: -.43px; color: var(--v3-label2); cursor: pointer;
}
body.ui-v3 select.v3t-sel:focus { box-shadow: none; outline: none; }
body.ui-v3 .v3t-selwrap:focus-within { outline: 2px solid var(--v3-accent); outline-offset: 2px; border-radius: 6px; }
body.ui-v3 select.v3t-sel option { color: initial; background: initial; }
body.ui-v3 input.v3t-date, body.ui-v3 input.v3t-inline {
  flex: none; height: 30px; margin: 0; padding: 0 10px; border: 0; border-radius: 8px; background: var(--v3-fill); box-shadow: none;
  font: 400 15px/20px var(--sans); color: var(--v3-label); color-scheme: light dark;
}
body.ui-v3 input.v3t-inline { flex: 1 1 140px; min-width: 0; max-width: 55%; }
body.ui-v3 input.v3t-date:focus, body.ui-v3 input.v3t-inline:focus { box-shadow: 0 0 0 2px var(--v3-accent); outline: none; }

/* Repeat details: interval, weekdays, which one; hidden while the rule is "Does not repeat" */
body.ui-v3 .v3t-recx { --v3-inset: 58px; flex-direction: column; align-items: stretch; gap: 6px; padding: 0 16px 12px 58px; min-height: 0; }
body.ui-v3 .v3t-recx:has(#rr-extra:empty) { display: none; }
body.ui-v3 .v3t-recrow { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font: 400 15px/20px var(--sans); color: var(--v3-label); }
body.ui-v3 .v3t-recrow input, body.ui-v3 .v3t-recrow select {
  height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background-color: var(--v3-fill); box-shadow: none; font: 400 15px/20px var(--sans); color: var(--v3-label);
}
body.ui-v3 .v3t-recrow select { padding-right: 26px; }
body.ui-v3 .v3t-recrow .wdchk { font: 600 12px/16px var(--sans); gap: 4px; }
body.ui-v3 .v3t-rectext { margin: 0; font: 400 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); }

/* Switch (Waiting on someone, Pin) */
body.ui-v3 input.v3t-switch {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 51px; height: 31px; margin: 0; padding: 0;
  border: 0; border-radius: 999px; background: rgba(120, 120, 128, .16); cursor: pointer; transition: background-color var(--dur) var(--ease);
}
body.ui-v3 input.v3t-switch::after {
  content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 999px; background: #FFFFFF;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .06); transition: transform var(--dur) var(--ease);
}
body.ui-v3 input.v3t-switch:checked { background: #34C759; }
body.ui-v3 input.v3t-switch:checked::after { transform: translateX(20px); }
body.ui-v3 input.v3t-switch:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 2px; }

body.ui-v3 .v3t-err { margin: 12px 0 0; padding: 0 16px; color: var(--v3-red-ink); font: 600 15px/20px var(--sans); }

/* Subtasks and references: the V1 list items (subLiHTML, refLiHTML) drawn as rows */
body.ui-v3 .v3t-ul { margin: 0; padding: 0; list-style: none; }
body.ui-v3 .v3t-ul > li {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 16px; border: 0;
  font: 400 17px/22px var(--sans); letter-spacing: -.43px; overflow-wrap: anywhere;
}
body.ui-v3 .v3t-ul > li::after { content: ""; position: absolute; left: 50px; right: 0; bottom: 0; height: .5px; background: var(--v3-sep); }
body.ui-v3 .v3t-refs .v3t-ul > li::after { left: 16px; }
body.ui-v3 .v3t-ul > li.muted { color: var(--v3-label2); font-size: 15px; }
body.ui-v3 .v3t-ul > li.muted::after { left: 16px; }
body.ui-v3 .v3t-ul > li > label { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; }
body.ui-v3 .v3t-ul input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 999px;
  border: 1.5px solid var(--v3-label3); background: transparent no-repeat center / 12px 12px; cursor: pointer;
}
body.ui-v3 .v3t-ul input[type="checkbox"]:checked {
  border-color: var(--v3-accent); background-color: var(--v3-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.ui-v3 .v3t-ul input[type="checkbox"]:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 2px; }
body.ui-v3 .v3t-ul .sdone { text-decoration: line-through; color: var(--v3-label2); }
body.ui-v3 .v3t-ul .linkbtn { flex: none; font: 400 15px/20px var(--sans); color: var(--v3-red-ink); padding: 6px 0; }
body.ui-v3 .v3t-ul .pill { background: var(--v3-fill); color: var(--v3-label2); font: 600 12px/16px var(--sans); padding: 3px 8px; }
body.ui-v3 .v3t-refs .v3t-ul > li > span { flex: 1 1 auto; min-width: 0; }
body.ui-v3 .v3t-refs .v3t-ul a, body.ui-v3 .v3t-refs .v3t-ul [data-open-file] { color: var(--v3-accent-ink); font: inherit; }
body.ui-v3 .v3t-addrow { --v3-inset: 16px; gap: 12px; color: var(--v3-accent-ink); min-height: 46px; padding-block: 4px; }
body.ui-v3 .v3t-addrow input {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 8px 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: 400 17px/22px var(--sans); letter-spacing: -.43px; color: var(--v3-label);
}
body.ui-v3 .v3t-addrow input::placeholder { color: var(--v3-accent-ink); opacity: .9; }
body.ui-v3 .v3t-addrow input:focus { box-shadow: none; outline: none; }
body.ui-v3 .v3t-addrow:focus-within { box-shadow: inset 0 0 0 2px var(--v3-accent); border-radius: 0 0 24px 24px; }
body.ui-v3 .v3t-refform { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 10px 16px 12px; }
body.ui-v3 .v3t-refform .v3t-selwrap { max-width: none; }
body.ui-v3 .v3t-refform select.v3t-sel { text-align: left; text-align-last: left; color: var(--v3-accent-ink); }
body.ui-v3 .v3t-rfields { flex: 1 1 220px; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.ui-v3 .v3t-rfields input, body.ui-v3 .v3t-rfields select {
  flex: 1 1 160px; min-width: 0; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background-color: var(--v3-fill); box-shadow: none;
  font: 400 15px/20px var(--sans); color: var(--v3-label);
}
body.ui-v3 .v3t-rfields input[type="file"] { padding: 6px 10px; height: auto; }
body.ui-v3 .v3t-rfields input:focus, body.ui-v3 .v3t-rfields select:focus { box-shadow: 0 0 0 2px var(--v3-accent); }
body.ui-v3 .v3t-rfields .muted { font-size: 13px; color: var(--v3-label2); }
body.ui-v3 .v3t-gapfoot { margin-top: 18px; }

/* Actions: Reschedule, Drop (Skip, Stop), Done; wraps to two lines when there are four */
body.ui-v3 .v3t-acts { flex-wrap: wrap; }
body.ui-v3 .v3t-acts > .v3-btn { flex: 1 1 40%; height: 50px; font-size: 17px; }
body.ui-v3 .v3t-acts > .v3-btn.gray { color: var(--v3-accent-ink); }
body.ui-v3 .v3-btn.v3t-bad { background: rgba(255, 56, 60, .12); color: #C4161B; }
body.ui-v3 .v3-btn.v3t-bad.arm { background: #E9152D; color: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.ui-v3 .v3-btn.v3t-bad { background: rgba(255, 66, 69, .22); color: #FF8A8C; }
  :root:not([data-theme="light"]) body.ui-v3 .v3-btn.v3t-bad.arm { background: #FF4245; color: #FFFFFF; }
  :root:not([data-theme="light"]) body.ui-v3 .v3t-pseg .p1 input:checked + span { color: #FF8A8C; }
  :root:not([data-theme="light"]) body.ui-v3 .v3t-pseg .p2 input:checked + span { color: #FFB06A; }
  :root:not([data-theme="light"]) body.ui-v3 .v3t-warn { background: rgba(255, 66, 69, .22); }
  :root:not([data-theme="light"]) body.ui-v3 input.v3t-switch { background: rgba(120, 120, 128, .32); }
  :root:not([data-theme="light"]) body.ui-v3 input.v3t-switch:checked { background: #30D158; }
}
:root[data-theme="dark"] body.ui-v3 .v3-btn.v3t-bad { background: rgba(255, 66, 69, .22); color: #FF8A8C; }
:root[data-theme="dark"] body.ui-v3 .v3-btn.v3t-bad.arm { background: #FF4245; color: #FFFFFF; }
:root[data-theme="dark"] body.ui-v3 .v3t-pseg .p1 input:checked + span { color: #FF8A8C; }
:root[data-theme="dark"] body.ui-v3 .v3t-pseg .p2 input:checked + span { color: #FFB06A; }
:root[data-theme="dark"] body.ui-v3 .v3t-warn { background: rgba(255, 66, 69, .22); }
:root[data-theme="dark"] body.ui-v3 input.v3t-switch { background: rgba(120, 120, 128, .32); }
:root[data-theme="dark"] body.ui-v3 input.v3t-switch:checked { background: #30D158; }

/* Reschedule sheet */
body.ui-v3 .v3t-note { margin: 0; padding: 0 4px; font: 400 15px/20px var(--sans); letter-spacing: -.23px; color: var(--v3-label2); }
body.ui-v3 .v3t-note b { color: var(--v3-label); font-weight: 600; }

/* Phone: 16px controls (no zoom on focus) */
@media (max-width: 767.98px) {
  body.ui-v3 select.v3t-sel { font-size: 17px; }
  body.ui-v3 input.v3t-date, body.ui-v3 input.v3t-inline, body.ui-v3 .v3t-recrow input, body.ui-v3 .v3t-recrow select,
  body.ui-v3 .v3t-rfields input, body.ui-v3 .v3t-rfields select { font-size: 16px; }
  body.ui-v3 .v3t-notes { font-size: 16px; }
  body.ui-v3 .v3t-selwrap { max-width: 55%; }
}
/* cockpit.css forces every field to 16px !important at 720px and below; these are larger on the board (no zoom either way) */
@media (max-width: 720px) {
  body.ui-v3 .v3t-titlecard .v3t-title { font-size: 20px !important; }
  body.ui-v3 select.v3t-sel, body.ui-v3 .v3t-addrow input { font-size: 17px !important; }
}

/* PC: three columns. Title, priority, description | settings | actions, subtasks, references. Title and description
   split into two cards here (the card itself is display: contents), so each field carries its own focus ring. */
@media (min-width: 1100px) {
  body.ui-v3 dialog.v3-sheet.v3t-wide { width: min(1680px, calc(100vw - 48px)); }
  body.ui-v3 .v3t-wide .v3t-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px 24px; align-items: stretch; }
  body.ui-v3 .v3t-wide .v3t-form { display: contents; }
  body.ui-v3 .v3t-wide .v3t-warn { grid-column: 1 / -1; margin: 0; }

  body.ui-v3 .v3t-wide .v3t-col1 { display: flex; flex-direction: column; }
  body.ui-v3 .v3t-wide .v3t-titlecard { display: contents; }
  body.ui-v3 .v3t-wide .v3t-titlecard #f-title, body.ui-v3 .v3t-wide .v3t-titlecard #f-notes { padding: 14px 16px; border-radius: 24px; background: var(--v3-cell2); }
  body.ui-v3 .v3t-wide .v3t-titlecard #f-title:focus, body.ui-v3 .v3t-wide .v3t-titlecard #f-notes:focus { box-shadow: 0 0 0 2px var(--v3-accent); }
  body.ui-v3 .v3t-wide .v3t-titlecard #f-title { order: 0; flex: none; }
  body.ui-v3 .v3t-wide #f-prio-h { order: 1; }
  body.ui-v3 .v3t-wide .v3t-pseg { order: 2; flex: none; }
  body.ui-v3 .v3t-wide .v3t-titlecard #f-notes { order: 3; flex: 1 1 auto; min-height: 220px; max-height: none; margin-top: 22px; }

  body.ui-v3 .v3t-wide .v3t-settings { margin-top: 0; }
  /* The column is narrow at 1100px: a label keeps its longest word whole and the select gives way (ellipsis) */
  body.ui-v3 .v3t-wide .v3t-set > label.v3-text { min-width: min-content; }
  body.ui-v3 .v3t-wide .v3t-set .v3-rtitle { overflow-wrap: normal; }

  body.ui-v3 .v3t-wide .v3t-col3 { display: flex; flex-direction: column; }
  body.ui-v3 .v3t-wide .v3t-acts { order: -1; margin-top: 0; }
  body.ui-v3 .v3t-wide .v3t-acts [data-v3t-act="done"] { order: -1; }
  body.ui-v3 .v3t-wide .v3t-acts > .v3-btn { flex: 1 1 auto; height: 44px; }
  /* Top of the column when nothing sits above: the actions come first by order, so :first-child alone does not say it */
  body.ui-v3 .v3t-wide .v3t-col3:not(:has(> .v3t-acts)) > .v3-sechead:first-child, body.ui-v3 .v3t-wide .v3t-col3 > .v3t-gapfoot { margin-top: 0; }
}
/* === css/v3-meeting.css === */
/* UI V3: Meeting page (#/meeting/<id>). Every rule under body.ui-v3 (components: ../shared/css/ios26-v3.css).
   Script: js/v3/meeting.js. .v3m-who = attendee stack button; .v3m-seg = Brief | Context | After; .v3m-panel = one
   segment; .v3m-grid = the Brief in two columns on desktop; .v3m-bottom = Log contact (or Open note) and Re-run. */

body.ui-v3 .v3m-empty { margin: 16px 0 0; color: var(--v3-label2); font: 400 15px/20px var(--sans); }
body.ui-v3 .v3m-titleblock { padding-top: 8px; }
body.ui-v3 .v3m-when {
  margin: 0; font: 600 13px/18px var(--sans); letter-spacing: -.08px; text-transform: uppercase; color: var(--v3-accent-ink);
}
body.ui-v3 .v3m-title { margin-top: 2px; }
@media (max-width: 767.98px) { body.ui-v3 .v3m-title { font-size: 28px; line-height: 34px; letter-spacing: .36px; } }
body.ui-v3 .v3m-sub, body.ui-v3 .v3m-others { margin: 2px 0 0; font: 400 15px/20px var(--sans); letter-spacing: -.23px; color: var(--v3-label2); overflow-wrap: anywhere; }
body.ui-v3 .v3m-others { font-size: 13px; line-height: 18px; letter-spacing: -.08px; margin-top: 4px; }
body.ui-v3 .v3m a:not(.v3-row):not(.v3-btn):not(.v3-circle) { color: var(--v3-accent-ink); text-decoration: none; }
body.ui-v3 .v3m a:not(.v3-row):not(.v3-btn):not(.v3-circle):hover { text-decoration: underline; }

body.ui-v3 .v3m-banner { margin: 14px 0 0; padding: 12px 16px; border-radius: 20px; background: var(--v3-fill); font: 400 15px/20px var(--sans); }
body.ui-v3 .v3m-banner.bad { background: rgba(255, 56, 60, .12); color: #C4161B; }

/* Attendee stack */
body.ui-v3 .v3m-who {
  width: 100%; margin: 14px 0 0; padding: 10px 14px; border: 0; border-radius: 20px; display: flex; align-items: center; gap: 10px;
  background: var(--v3-cell); color: var(--v3-label); text-align: left; cursor: pointer; font: inherit;
}
body.ui-v3 button.v3m-who:hover { filter: brightness(.98); }
body.ui-v3 button.v3m-who:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 2px; }
body.ui-v3 .v3m-whonone { cursor: default; min-height: 50px; }
body.ui-v3 .v3m-stack { display: flex; flex: none; }
body.ui-v3 .v3m-stack .av, body.ui-v3 .v3m-more {
  width: 30px; height: 30px; font-size: 12px; box-shadow: 0 0 0 2px var(--v3-cell); border-radius: 999px;
}
body.ui-v3 .v3m-stack > * + * { margin-left: -8px; }
body.ui-v3 .v3m-more { display: inline-flex; align-items: center; justify-content: center; background: var(--v3-fill); color: var(--v3-label); font-weight: 600; }
body.ui-v3 .v3m-whot { flex: 1 1 auto; min-width: 0; font: 400 15px/20px var(--sans); letter-spacing: -.23px; color: var(--v3-label2); }

body.ui-v3 .v3m-seg { margin-top: 14px; }
@media (min-width: 768px) { body.ui-v3 .v3-seg.v3m-seg { display: inline-grid; width: auto; min-width: 360px; } }

/* Cards and text */
body.ui-v3 .v3m-lbl { display: block; margin: 0; font: 600 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); }
body.ui-v3 .v3m-focust, body.ui-v3 .v3m-text { margin: 6px 0 0; font: 400 17px/23px var(--sans); letter-spacing: -.43px; }
body.ui-v3 .v3m-text { margin: 0; }
body.ui-v3 .v3m-muted { margin: 6px 0 0; font: 400 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); }
body.ui-v3 .v3m-since .v3m-prevt { display: block; font: 600 17px/22px var(--sans); letter-spacing: -.43px; }
body.ui-v3 .v3m-md { margin-top: 6px; font: 400 15px/21px var(--sans); letter-spacing: -.23px; overflow-wrap: anywhere; }
body.ui-v3 .v3m-md > :first-child { margin-top: 0; }
body.ui-v3 .v3m-md > :last-child { margin-bottom: 0; }
body.ui-v3 .v3m-since .v3m-lbl { margin-top: 12px; }
body.ui-v3 .v3m-decs { margin: 4px 0 0; padding-left: 20px; font: 400 15px/21px var(--sans); }

body.ui-v3 .v3m-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { body.ui-v3 .v3m-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 16px; align-items: start; } }

body.ui-v3 .v3m-task .v3-pill { margin-left: 4px; }
body.ui-v3 .v3m-qs { padding: 0; }
body.ui-v3 .v3m-q { align-items: flex-start; --v3-inset: 44px; }
body.ui-v3 .v3m-star { flex: none; width: 16px; text-align: center; color: var(--v3-label3); font-size: 17px; line-height: 22px; }
body.ui-v3 .v3m-star.on { color: #FFCC00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.ui-v3 .v3m-star.on { color: #FFD60A; } }
:root[data-theme="dark"] body.ui-v3 .v3m-star.on { color: #FFD60A; }

body.ui-v3 .v3m-watch { display: flex; flex-direction: column; gap: 10px; }
body.ui-v3 .v3m-alert { display: flex; gap: 10px; padding: 12px 16px; border-radius: 20px; font: 400 15px/20px var(--sans); letter-spacing: -.23px; }
body.ui-v3 .v3m-alert.red { background: rgba(255, 56, 60, .12); color: #A3101A; }
body.ui-v3 .v3m-alert.orange { background: rgba(255, 141, 40, .14); color: #8A3D00; }
body.ui-v3 .v3m-bang { flex: none; font-weight: 700; }
body.ui-v3 .v3m-alertt { min-width: 0; overflow-wrap: anywhere; }
body.ui-v3 .v3m-alerts { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; opacity: .8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.ui-v3 .v3m-alert.red { background: rgba(255, 69, 58, .14); color: #FF9A94; }
  :root:not([data-theme="light"]) body.ui-v3 .v3m-alert.orange { background: rgba(255, 146, 48, .14); color: #FFB06A; }
  :root:not([data-theme="light"]) body.ui-v3 .v3m-banner.bad { background: rgba(255, 69, 58, .14); color: #FF9A94; }
}
:root[data-theme="dark"] body.ui-v3 .v3m-alert.red { background: rgba(255, 69, 58, .14); color: #FF9A94; }
:root[data-theme="dark"] body.ui-v3 .v3m-alert.orange { background: rgba(255, 146, 48, .14); color: #FFB06A; }
:root[data-theme="dark"] body.ui-v3 .v3m-banner.bad { background: rgba(255, 69, 58, .14); color: #FF9A94; }
body.ui-v3 .v3m-alert a { color: inherit; text-decoration: underline; }

/* Context */
body.ui-v3 .v3m-ta {
  display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border: 0; border-radius: 14px; resize: vertical; min-height: 96px;
  background: var(--v3-fill); color: var(--v3-label); font: 400 17px/22px var(--sans); letter-spacing: -.43px; box-sizing: border-box;
}
@media (min-width: 768px) { body.ui-v3 .v3m-ta { font-size: 15px; line-height: 20px; } }
body.ui-v3 .v3m-ta:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 1px; }
body.ui-v3 .v3m-ctxbtns { display: flex; justify-content: flex-end; margin-top: 10px; }
body.ui-v3 .v3m-brief summary { cursor: pointer; font: 600 15px/20px var(--sans); color: var(--v3-accent-ink); }
body.ui-v3 .v3m-brief[open] summary { margin-bottom: 8px; }

/* Bottom actions and error */
body.ui-v3 .v3m-err { margin: 14px 0 0; color: var(--v3-red-ink); font: 400 15px/20px var(--sans); }
body.ui-v3 .v3m-bottom { margin-top: 22px; }
@media (max-width: 767.98px) { body.ui-v3 .v3m-bottom > .v3-btn { height: 50px; font-size: 17px; } }
@media (min-width: 768px) { body.ui-v3 .v3m-bottom { max-width: 480px; } }

/* Sheets: people and actions */
body.ui-v3 .v3m-person { align-items: flex-start; --v3-inset: 64px; }
body.ui-v3 .v3m-person .v3-chev { align-self: center; }
body.ui-v3 .v3m-av { flex: none; display: inline-flex; }
body.ui-v3 .v3m-av .av { width: 36px; height: 36px; }
body.ui-v3 .v3m-st { font-style: italic; }
body.ui-v3 .v3m-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
body.ui-v3 .v3m-declined .v3-rtitle { color: var(--v3-label2); }
body.ui-v3 .v3m-add { flex: none; align-self: center; }
body.ui-v3 .v3m-morepeople { margin-top: 12px; }
body.ui-v3 .v3m-morepeople summary { cursor: pointer; padding: 0 16px 8px; font: 600 15px/20px var(--sans); color: var(--v3-accent-ink); }
body.ui-v3 .v3m-invite { white-space: pre-wrap; overflow-wrap: anywhere; font: 400 15px/20px var(--sans); max-height: 50vh; overflow-y: auto; }
/* === css/v3-deals.css === */
/* UI V3: Deals (#/deals) and the project page (#/project/<id>). Every rule under body.ui-v3 (components:
   ../shared/css/ios26-v3.css). Script: js/v3/deals.js.
   Deals: .v3d-phone = grouped lists per column (phone); .v3d-board = the columns as cards (desktop, scrolls sideways
   inside its own box). Project: .v3p-tabrow = page tabs (.v3p-tabs, one scrolling segmented row) and the step
   capsules (.v3p-steps); .v3p-tiles, .v3p-cols (two columns on desktop); .v3p-v1 wraps a V1 body (other tabs). */

/* ---------- Deals ---------- */
body.ui-v3 .v3d-empty { margin: 16px 0 0; color: var(--v3-label2); font: 400 15px/20px var(--sans); }
body.ui-v3 .v3d-seg { margin-top: 18px; }
body.ui-v3 .v3d-n {
  flex: none; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--v3-fill); color: var(--v3-label2); font: 600 12px/16px var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums;
}
body.ui-v3 .v3d .v3-sechead { align-items: center; }
body.ui-v3 .v3d-row { align-items: center; }
body.ui-v3 .v3d-row .v3-rtitle { font-weight: 600; }
body.ui-v3 .v3d-line { font-size: 13px; line-height: 18px; letter-spacing: -.08px; }
body.ui-v3 .v3d-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
body.ui-v3 .v3d-none { min-height: 44px; }

/* Phone: the lists; desktop: the board */
body.ui-v3 .v3d-board { display: none; }
@media (min-width: 768px) {
  body.ui-v3 .v3d-more { display: none; }
  body.ui-v3 .v3d-phone { display: none; }
  body.ui-v3 .v3d-board {
    display: grid; grid-template-columns: repeat(var(--v3d-cols, 6), minmax(220px, 1fr)); gap: 12px; align-items: start;
    margin-top: 18px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin;
  }
}
body.ui-v3 .v3d-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 24px; background: var(--v3-fill); }
body.ui-v3 .v3d-col.won { background: color-mix(in srgb, #34C759 14%, var(--v3-fill)); }
body.ui-v3 .v3d-colh {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 6px 2px;
  font: 600 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2);
}
body.ui-v3 .v3d-col .v3d-empty { margin: 6px; font-size: 13px; line-height: 18px; }
body.ui-v3 .v3d-card {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border-radius: 18px;
  background: var(--v3-cell); color: var(--v3-label); text-decoration: none;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
body.ui-v3 .v3d-card:hover { text-decoration: none; filter: brightness(.98); }
body.ui-v3 .v3d-card:active { transform: scale(.99); }
body.ui-v3 .v3d-card:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 2px; }
body.ui-v3 .v3d-org { font: 600 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); overflow-wrap: anywhere; }
body.ui-v3 .v3d-cname { font: 600 15px/20px var(--sans); letter-spacing: -.23px; overflow-wrap: anywhere; }
body.ui-v3 .v3d-amt { margin-top: 4px; font: 700 20px/25px var(--display); letter-spacing: .38px; font-variant-numeric: tabular-nums; }
body.ui-v3 .v3d-amt.none { font-weight: 500; font-size: 15px; line-height: 20px; color: var(--v3-label2); letter-spacing: -.23px; }
body.ui-v3 .v3d-fact { font: 400 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); }

/* ---------- Project page ---------- */
body.ui-v3 .v3p-sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 0;
  font: 400 15px/20px var(--sans); letter-spacing: -.23px; color: var(--v3-label2);
}
body.ui-v3 .v3p-sub a { color: var(--v3-accent-ink); text-decoration: none; }
body.ui-v3 .v3p-chain { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body.ui-v3 .v3p-chain .v3-chip { color: var(--v3-accent-ink); }
@media (max-width: 767.98px) {
  body.ui-v3 .v3p .v3-head .v3-acts .v3-btn { height: 44px; }
  body.ui-v3 .v3p .v3-title { font-size: 28px; line-height: 34px; letter-spacing: .36px; }
  body.ui-v3 .v3p-chain { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--v3-gutter)); padding-inline: var(--v3-gutter); }
  body.ui-v3 .v3p-chain::-webkit-scrollbar { display: none; }
}

/* Tabs: one scrolling segmented row; the steps a row of capsules under it */
body.ui-v3 .v3p-tabrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 18px; }
body.ui-v3 .v3-seg.v3p-tabs {
  display: flex; width: auto; max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
body.ui-v3 .v3-seg.v3p-tabs::-webkit-scrollbar { display: none; }
body.ui-v3 .v3-seg.v3p-tabs > button { flex: none; padding: 0 16px; overflow: visible; }
body.ui-v3 .v3p-steps { position: relative; display: flex; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
body.ui-v3 .v3p-steps::-webkit-scrollbar { display: none; }
body.ui-v3 .v3p-step {
  position: relative; flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px;
  font: 500 13px/18px var(--sans); letter-spacing: -.08px; white-space: nowrap; cursor: pointer;
  background: transparent; color: var(--v3-label2); box-shadow: inset 0 0 0 1px var(--v3-label3);
}
body.ui-v3 .v3p-step.done { background: rgba(52, 199, 89, .14); color: #1F7A35; box-shadow: none; font-weight: 600; }
body.ui-v3 .v3p-step.current { background: var(--v3-accent-fill); color: var(--v3-on-accent); box-shadow: none; font-weight: 600; }
body.ui-v3 .v3p-step[aria-selected="true"] { outline: 2px solid var(--v3-label); outline-offset: 2px; }
body.ui-v3 .v3p-step:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.ui-v3 .v3p-step.done { background: rgba(48, 209, 88, .2); color: #30D158; }
}
:root[data-theme="dark"] body.ui-v3 .v3p-step.done { background: rgba(48, 209, 88, .2); color: #30D158; }
@media (max-width: 767.98px) {
  body.ui-v3 .v3p-tabrow { display: block; }
  body.ui-v3 .v3p-steps { margin: 10px calc(-1 * var(--v3-gutter)) 0; padding: 3px var(--v3-gutter); max-width: none; }
}

/* Panel */
body.ui-v3 .v3p-panel { margin-top: 18px; }
body.ui-v3 .v3p-tiles { gap: 12px; }
body.ui-v3 .v3p-tile b { font: 700 28px/34px var(--display); letter-spacing: .38px; overflow-wrap: anywhere; }
body.ui-v3 .v3p-tile b small { font: 500 15px/20px var(--sans); letter-spacing: -.23px; color: var(--v3-label2); }
body.ui-v3 .v3p-tile b.v3p-none { font-weight: 500; font-size: 20px; line-height: 34px; color: var(--v3-label3); }
body.ui-v3 .v3p-tsub { font: 400 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); }
body.ui-v3 .v3p-tsub.orange { color: #A84A00; }
body.ui-v3 .v3p-tsub.red { color: #C4161B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.ui-v3 .v3p-tsub.orange { color: #FFB06A; }
  :root:not([data-theme="light"]) body.ui-v3 .v3p-tsub.red { color: #FF8A8C; }
}
:root[data-theme="dark"] body.ui-v3 .v3p-tsub.orange { color: #FFB06A; }
:root[data-theme="dark"] body.ui-v3 .v3p-tsub.red { color: #FF8A8C; }
body.ui-v3 .v3p-facts .v3-rtitle { font-size: 15px; line-height: 20px; letter-spacing: -.23px; }
body.ui-v3 .v3p-facts .v3-rsub { font: 600 13px/18px var(--sans); letter-spacing: -.08px; }

body.ui-v3 .v3p-cols { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  body.ui-v3 .v3p-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
}
body.ui-v3 .v3p-cols a:not(.v3-row) { color: var(--v3-accent-ink); }
body.ui-v3 .v3-secfoot a { color: var(--v3-accent-ink); text-decoration: none; }

/* Task rows: the V1 round tick (tickHTML) dressed as a V3 check circle; red edge when overdue */
body.ui-v3 .v3p-task { --v3-inset: 52px; cursor: pointer; }
body.ui-v3 .v3p-task.late { box-shadow: inset 4px 0 0 #FF383C; }
body.ui-v3 .v3p-task:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: -2px; }
@media (hover: hover) { body.ui-v3 .v3p-task:hover { background: var(--v3-fill); } }
body.ui-v3 .v3p-task .tick {
  position: relative; flex: none; width: 24px; height: 24px; border-radius: 999px; border: 1.5px solid var(--v3-label3);
  background: transparent; color: #FFFFFF;
}
body.ui-v3 .v3p-task .tick::before { content: ""; position: absolute; inset: -10px; }  /* 44px target */
body.ui-v3 .v3p-task .tick svg { width: 13px; height: 13px; }
body.ui-v3 .v3p-task .tick:hover { background: color-mix(in srgb, var(--v3-accent) 14%, transparent); border-color: var(--v3-accent); color: var(--v3-accent); }
body.ui-v3 .v3p-task .tick.on { background: var(--v3-accent); border-color: var(--v3-accent); color: #FFFFFF; }
body.ui-v3 .v3p-ring { flex: none; width: 24px; height: 24px; border-radius: 999px; border: 1.5px solid var(--v3-label3); box-sizing: border-box; }
body.ui-v3 .v3p-ring.dashed { border-style: dashed; }
body.ui-v3 .v3p-late { color: #C4161B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.ui-v3 .v3p-late { color: #FF8A8C; } }
:root[data-theme="dark"] body.ui-v3 .v3p-late { color: #FF8A8C; }
body.ui-v3 .v3p-pin { color: #FFCC00; }
body.ui-v3 .task.leaving.v3p-task, body.ui-v3 .v3p-task.leaving { opacity: .4; }

body.ui-v3 .v3p-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.ui-v3 .v3p-date { font-size: 15px; line-height: 20px; white-space: nowrap; }
body.ui-v3 .v3p-note { align-items: flex-start; }
body.ui-v3 .v3p-note .v3-chev { align-self: center; }

body.ui-v3 .v3p-person { --v3-inset: 64px; padding-block: 10px; }
body.ui-v3 .v3p-av { flex: none; display: inline-flex; }
body.ui-v3 .v3p-av .av { width: 36px; height: 36px; }

body.ui-v3 .v3p-log { --v3-inset: 16px; align-items: flex-start; }
body.ui-v3 .v3p-log .v3-pill { margin-top: 1px; border-radius: 6px; }
body.ui-v3 .v3p-log .v3-rtitle { font-size: 15px; line-height: 20px; letter-spacing: -.23px; }
body.ui-v3 .v3p-log a { color: var(--v3-accent-ink); }

body.ui-v3 .v3p-assume { background: color-mix(in srgb, #FF8D28 12%, var(--v3-cell)); }
body.ui-v3 .v3p-cardlbl { margin: 0; font: 600 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); }
body.ui-v3 .v3p-cardtext { margin: 6px 0 0; font: 400 17px/22px var(--sans); letter-spacing: -.43px; }
body.ui-v3 .v3p-cardsub { margin: 6px 0 0; font: 400 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); }

/* A V1 body (Documents, Architecture, Decisions, Business case, a step) inside the V3 page: on a card surface */
body.ui-v3 .v3p-v1 { padding: 16px; border-radius: 24px; background: var(--v3-cell); overflow-x: auto; }
body.ui-v3 .v3p-v1 > :first-child { margin-top: 0; }
body.ui-v3 .v3p-v1 h2 { font: 600 17px/22px var(--sans); letter-spacing: -.43px; }
body.ui-v3 .v3p-log .v3-pill { min-width: 50px; justify-content: center; }
/* V1 uses .cols.prow on Documents and Architecture, and crm.css styles .prow as a Reach out row (a five-column grid
   with padding and a top border); inside the V3 page the two columns are restored. */
body.ui-v3 .v3p-v1 .cols.prow {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: none; gap: 0 36px; align-items: start;
  padding: 0; border-top: 0;
}
@media (max-width: 820px) { body.ui-v3 .v3p-v1 .cols.prow { grid-template-columns: minmax(0, 1fr); } }
/* === css/v3-account.css === */
/* UI V3: Accounts list, company page, People list and person page (js/v3/account.js). Boards CockpitCompany.dc.html
   and CockpitPerson.dc.html. Every rule under body.ui-v3; components and tokens come from ../shared/css/ios26-v3.css.
   Prefixes: .v3a- (accounts, lists, shared bits on these pages), .v3pe- (person page; .v3p- is the project page). */

/* ---------- Shared bits ---------- */
body.ui-v3 .v3a-muted { color: var(--v3-label2); font: 400 15px/20px var(--sans); }
body.ui-v3 .v3a-n { margin-left: 2px; font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
body.ui-v3 .v3a-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
body.ui-v3 .v3a-empty .v3-rsub { color: var(--v3-label2); }
body.ui-v3 .v3a-when { flex: none; font: 400 15px/20px var(--sans); letter-spacing: -.23px; color: var(--v3-label2); white-space: nowrap; }
body.ui-v3 .v3a .v3-rsub a, body.ui-v3 .v3a .v3-secfoot a, body.ui-v3 .v3a-csub a, body.ui-v3 .v3pe-sub a { color: var(--v3-accent-ink); }
body.ui-v3 .v3a h2.v3-sechead { font-weight: 600; }
/* Avatars from crm.js (.av with initials or a photo) at the sizes these pages use */
body.ui-v3 .v3a .av.s32 { width: 32px; height: 32px; font-size: 12px; }
body.ui-v3 .v3a .av.s40 { width: 40px; height: 40px; font-size: 15px; }
body.ui-v3 .v3a .av.s96 { width: 96px; height: 96px; font-size: 38px; font-weight: 600; }
body.ui-v3 .v3a .v3-avatar > .av { width: 100%; height: 100%; font-size: 15px; font-weight: 600; }
/* Company initial tiles */
body.ui-v3 .v3a-ctile, body.ui-v3 .v3a-bigtile {
  flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--v3-label);
  background: linear-gradient(160deg, rgba(118, 118, 128, .16), rgba(118, 118, 128, .32)); box-shadow: inset 0 0 0 .5px var(--v3-sep);
}
body.ui-v3 .v3a-ctile { width: 40px; height: 40px; border-radius: 10px; font: 700 17px/1 var(--sans); }
body.ui-v3 .v3a-ctile.sm { width: 30px; height: 30px; border-radius: 8px; font-size: 14px; }
body.ui-v3 .v3a-bigtile { width: 64px; height: 64px; border-radius: 18px; font: 700 24px/1 var(--sans); }
body.ui-v3 .v3-row:has(> .v3a-ctile) { --v3-inset: 68px; }
body.ui-v3 .v3-row:has(> .v3a-ctile.sm) { --v3-inset: 58px; }

/* ---------- Search field and filters (lists) ---------- */
body.ui-v3 .v3a-search {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px;
  background: var(--v3-fill); color: var(--v3-label2); cursor: text;
}
body.ui-v3 .v3a-search svg { flex: none; }
body.ui-v3 .v3a-search input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none;
  color: var(--v3-label); font: 400 17px/22px var(--sans); letter-spacing: -.43px;
}
body.ui-v3 .v3a-search input::placeholder { color: var(--v3-label2); }
body.ui-v3 .v3a-search:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--v3-accent) 45%, transparent); }
body.ui-v3 .v3a-chiprow { margin-top: 12px; }
body.ui-v3 .v3a-count { margin-top: 12px; }
body.ui-v3 .v3-subtitle.v3a-count { margin: 0; padding: 0; }
body.ui-v3 .v3a-list > .v3-list { margin-top: 6px; }
body.ui-v3 .v3a-sels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (min-width: 768px) { body.ui-v3 .v3a-sels { display: flex; flex-wrap: wrap; } }
body.ui-v3 .v3a-sel { min-width: 0; }
body.ui-v3 .v3a-sel select {
  width: 100%; height: 36px; padding: 0 30px 0 14px; border: 0; border-radius: 999px; background-color: var(--v3-fill);
  color: var(--v3-label); font: 500 15px/20px var(--sans); box-shadow: none; text-overflow: ellipsis;
}
@media (max-width: 767.98px) { body.ui-v3 .v3a-sel select { font-size: 16px; height: 40px; } }
body.ui-v3 .v3a-more { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }

/* ---------- Accounts list rows ---------- */
body.ui-v3 .v3a-crow .v3a-pills { justify-content: flex-end; max-width: 45%; }
@media (max-width: 767.98px) { body.ui-v3 .v3a-crow .v3a-pills { display: none; } }

/* ---------- Company page ---------- */
body.ui-v3 .v3a-chead { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
body.ui-v3 .v3a-cname { flex: 1 1 0; min-width: 0; }
body.ui-v3 .v3a-cname .v3-title { overflow-wrap: anywhere; }
body.ui-v3 .v3a-ctypes { margin-top: 4px; }
body.ui-v3 .v3a-csub { margin-left: 4px; font: 400 15px/20px var(--sans); letter-spacing: -.23px; color: var(--v3-label2); overflow-wrap: anywhere; }
body.ui-v3 .v3a-hot { flex: none; }
body.ui-v3 .v3a-hot > button:disabled { cursor: default; opacity: 1; }
body.ui-v3 .v3a-hot > button[data-hot="active"][aria-pressed="true"] { background: #30D158; color: #00330F; font-weight: 700; }
body.ui-v3 .v3a-hot > button[data-hot="target"][aria-pressed="true"] { background: var(--v3-accent-fill); color: var(--v3-on-accent); font-weight: 700; }
@media (max-width: 767.98px) {
  body.ui-v3 .v3a-chead { flex-wrap: wrap; gap: 12px 14px; }
  body.ui-v3 .v3a-bigtile { width: 52px; height: 52px; border-radius: 14px; font-size: 20px; }
  body.ui-v3 .v3a-cname .v3-title { font-size: 28px; line-height: 34px; }
  body.ui-v3 .v3a-hot { flex: 1 1 100%; }
}
body.ui-v3 .v3a-lbl { margin: 0 0 4px; font: 600 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); }
body.ui-v3 .v3a-line p:last-child { margin: 0; font: 400 15px/21px var(--sans); letter-spacing: -.23px; }
body.ui-v3 .v3a-kpis .v3a-why { font: 400 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); }
body.ui-v3 .v3a-kpis b { overflow-wrap: anywhere; }
@media (max-width: 767.98px) { body.ui-v3 .v3a-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 768px) { body.ui-v3 .v3a-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
body.ui-v3 .v3a-tabs .v3-chip { gap: 4px; }
body.ui-v3 .v3a-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; }
@media (min-width: 768px) { body.ui-v3 .v3a-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { body.ui-v3 .v3a-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.ui-v3 .v3a-col { min-width: 0; }
body.ui-v3 .v3a-closed { opacity: .55; }
/* Tasks: the round tick of tasks.js as a 24px check circle; "You" / "Them" for rows without one */
body.ui-v3 .v3a-task { cursor: pointer; }
body.ui-v3 .v3a-task:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: -2px; }
@media (hover: hover) { body.ui-v3 .v3a-task:hover { background: var(--v3-fill); } }
body.ui-v3 .v3a .v3-row:has(> .tick), body.ui-v3 .v3a .v3-row:has(> .v3a-who) { --v3-inset: 52px; }
body.ui-v3 .v3a .v3-row > .tick {
  flex: none; width: 24px; height: 24px; margin: 0; padding: 0; border-radius: 999px; border: 1.5px solid var(--v3-label3);
  background: transparent; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none;
}
body.ui-v3 .v3a .v3-row > .tick svg { width: 13px; height: 13px; opacity: 0; }
body.ui-v3 .v3a .v3-row > .tick:hover svg { opacity: .5; color: var(--v3-label2); }
body.ui-v3 .v3a .v3-row > .tick.on { background: var(--v3-accent); border-color: var(--v3-accent); }
body.ui-v3 .v3a .v3-row > .tick.on svg { opacity: 1; color: #FFFFFF; }
body.ui-v3 .v3a-who {
  flex: none; width: 24px; display: inline-flex; justify-content: center; font: 600 10px/14px var(--sans); letter-spacing: 0;
  color: var(--v3-label2); text-transform: uppercase;
}
body.ui-v3 .v3a-who.you { color: var(--v3-accent-ink); }
/* Who decides: one row of people per level, joined by a short line */
body.ui-v3 .v3a-tree { display: flex; flex-direction: column; align-items: center; gap: 0; }
body.ui-v3 .v3a-level { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 100%; }
body.ui-v3 .v3a-link { display: block; width: 1px; height: 14px; margin: 5px 0; background: var(--v3-label3); }
body.ui-v3 .v3a-node {
  display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 8px 12px 8px 8px; border-radius: 16px;
  background: var(--v3-fill); color: var(--v3-label); text-decoration: none;
}
body.ui-v3 .v3a-node:hover { text-decoration: none; filter: brightness(.97); }
body.ui-v3 .v3a-node:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 2px; }
body.ui-v3 .v3a-ntext { display: flex; flex-direction: column; min-width: 0; }
body.ui-v3 .v3a-ntext b { font: 600 15px/20px var(--sans); letter-spacing: -.23px; overflow-wrap: anywhere; }
body.ui-v3 .v3a-ntext span { font: 400 12px/16px var(--sans); letter-spacing: 0; color: var(--v3-label2); overflow-wrap: anywhere; }
body.ui-v3 .v3a-ntext .v3a-nmet { color: #1F7A35; }
body.ui-v3 .v3a-node.notmet .v3a-nmet { color: #C4161B; }
body.ui-v3 .v3a-treefoot { margin: 14px 0 0; text-align: center; font: 400 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); }
body.ui-v3 .v3a-gapnote { margin: 6px 0 0; text-align: center; font: 400 13px/18px var(--sans); color: #A84A00; }
/* IT landscape chips */
body.ui-v3 .v3a-layer { margin: 14px 0 0; font: 600 12px/16px var(--sans); letter-spacing: .4px; text-transform: uppercase; color: var(--v3-label2); }
body.ui-v3 .v3a-layer:first-child { margin-top: 0; }
body.ui-v3 .v3a-apps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
body.ui-v3 .v3a-app {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 10px;
  background: var(--v3-fill); font: 500 13px/18px var(--sans); letter-spacing: -.08px; overflow-wrap: anywhere;
}
body.ui-v3 .v3a-flag { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 999px; }
body.ui-v3 .v3a-flag.red { background: #FF453A; }
body.ui-v3 .v3a-flag.orange { background: #FF9F0A; }
body.ui-v3 .v3a-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; font: 400 12px/16px var(--sans); color: var(--v3-label2); }
body.ui-v3 .v3a-legend .v3a-flag + * { margin-right: 6px; }
/* The system's hotness suggestion (shown, never set) */
body.ui-v3 .v3a-suggest { display: flex; gap: 12px; padding: 14px 16px; border-radius: 24px; background: rgba(255, 159, 10, .14); }
body.ui-v3 .v3a-sicon {
  flex: none; width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 159, 10, .25); color: #A84A00; font: 700 15px/1 var(--sans);
}
body.ui-v3 .v3a-stitle { margin: 0; font: 600 15px/20px var(--sans); letter-spacing: -.23px; color: #A84A00; }
body.ui-v3 .v3a-sbody { margin: 2px 0 0; font: 400 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); }
/* V1 tabs inside the V3 frame */
body.ui-v3 .v3a-v1 > .v3-head + * { margin-top: 14px; }

/* ---------- People list ---------- */
body.ui-v3 .v3a-prow .v3-rtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.ui-v3 .v3a-prow.sel { background: color-mix(in srgb, var(--v3-accent) 10%, transparent); }
body.ui-v3 label.v3a-prow { cursor: pointer; }
body.ui-v3 .v3a-cb { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--v3-accent); }
body.ui-v3 .v3-row:has(> .v3a-cb) { --v3-inset: 102px; }
body.ui-v3 .v3a-selrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body.ui-v3 .v3a-bulkbar {
  position: sticky; z-index: 4; bottom: 16px; display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 8px 8px 8px 18px;
  border-radius: 999px; background: var(--v3-glass); -webkit-backdrop-filter: var(--v3-glass-blur); backdrop-filter: var(--v3-glass-blur);
  box-shadow: var(--v3-glass-shadow), var(--v3-glass-rim);
}
body.ui-v3 .v3a-bulkbar b { flex: 1; min-width: 0; font: 600 15px/20px var(--sans); }
@media (max-width: 767.98px) { body.ui-v3 .v3a-bulkbar { bottom: calc(100px + max(0px, env(safe-area-inset-bottom, 0px) - 26px)); } }
body.ui-v3 .v3a-bsel select {
  flex: 0 1 auto; max-width: 55%; border: 0; background: transparent; box-shadow: none; text-align: right;
  color: var(--v3-label2); font: 400 17px/22px var(--sans);
}
@media (max-width: 767.98px) { body.ui-v3 .v3a-bsel select { font-size: 16px; } }

/* ---------- Person page ---------- */
body.ui-v3 .v3pe-hero { margin-top: 4px; text-align: center; }
body.ui-v3 .v3pe-av { display: inline-flex; }
body.ui-v3 .v3pe-name { margin: 12px 0 0; font: 700 28px/34px var(--display); letter-spacing: .36px; overflow-wrap: anywhere; }
body.ui-v3 .v3pe-nick { font-weight: 400; color: var(--v3-label2); }
body.ui-v3 .v3pe-sub { display: block; max-width: none; margin: 0; font: 400 15px/20px var(--sans); letter-spacing: -.23px; color: var(--v3-label2); }
body.ui-v3 .v3pe-pills { justify-content: center; margin-top: 8px; }
body.ui-v3 .v3pe-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; --cols: var(--n); max-width: min(560px, calc(var(--n) * 134px + (var(--n) - 1) * 8px)); margin: 18px auto 0; }
body.ui-v3 .v3pe-act {
  flex: 0 0 calc((100% - (var(--cols) - 1) * 8px) / var(--cols)); box-sizing: border-box; min-width: 0;
  height: 62px; padding: 0; border: 0; border-radius: 18px; background: var(--v3-cell); color: var(--v3-accent-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
  font: 600 12px/16px var(--sans); letter-spacing: 0; text-decoration: none;
}
body.ui-v3 .v3pe-act:hover { text-decoration: none; filter: brightness(.97); }
body.ui-v3 .v3pe-act:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 2px; }
body.ui-v3 .v3pe-act svg { width: 22px; height: 22px; }
@media (max-width: 560px) { body.ui-v3 .v3pe-acts { --cols: var(--n-phone); } }
body.ui-v3 .v3pe-cols { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; }
@media (min-width: 900px) { body.ui-v3 .v3pe-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
body.ui-v3 .v3pe-col { min-width: 0; }
body.ui-v3 .v3pe-info { justify-content: space-between; }
body.ui-v3 .v3pe-k { flex: none; font: 400 17px/22px var(--sans); letter-spacing: -.43px; }
body.ui-v3 .v3pe-v { min-width: 0; text-align: right; font: 400 17px/22px var(--sans); letter-spacing: -.43px; color: var(--v3-label2); overflow-wrap: anywhere; }
body.ui-v3 .v3pe-v.red { color: var(--v3-red-ink); }
body.ui-v3 .v3pe-v.orange { color: #C25E00; }
body.ui-v3 .v3pe-info.col { flex-direction: column; align-items: flex-start; gap: 2px; }
body.ui-v3 .v3pe-info.col .v3pe-v { text-align: left; }
body.ui-v3 .v3pe-v.prewrap { white-space: pre-wrap; }
/* The snooze menu of crm.js inside the Reach out row */
body.ui-v3 .v3pe-kit details.menu > summary.qa {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--v3-fill); color: var(--v3-accent-ink); font: 600 15px/20px var(--sans); box-shadow: none;
}
body.ui-v3 .v3pe-kit .menupop { background: var(--v3-cell2); border-radius: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .18); }
body.ui-v3 .v3pe-kit .menupop button { color: var(--v3-label); }
/* Contact trend bars */
body.ui-v3 .v3pe-trend { align-items: center; }
body.ui-v3 .v3pe-bars { flex: none; display: flex; align-items: flex-end; gap: 5px; height: 44px; }
body.ui-v3 .v3pe-bars > span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; width: 12px; height: 100%; }
body.ui-v3 .v3pe-bars i { display: block; width: 8px; min-height: 2px; max-height: calc(100% - 14px); border-radius: 3px; background: var(--v3-accent); }
body.ui-v3 .v3pe-bars i.z { background: var(--v3-label3); }
body.ui-v3 .v3pe-bars em { font: 600 10px/12px var(--sans); font-style: normal; color: var(--v3-label2); }
/* Contact detail rows */
body.ui-v3 .v3pe-crow a.v3-rtitle { color: var(--v3-accent-ink); text-decoration: none; }
body.ui-v3 .v3pe-crow .v3-tile { color: #FFFFFF; }
body.ui-v3 .v3pe-crow .v3-tile svg { width: 16px; height: 16px; }
body.ui-v3 .v3pe-wa { flex: none; height: 30px; padding: 0 12px; font-size: 13px; }
body.ui-v3 .v3pe-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Cards that hold V1 markup: works for, work history, the note composer, the timeline */
body.ui-v3 .v3pe-works ul.plain { margin: 0; padding: 0; list-style: none; font: 400 17px/24px var(--sans); }
body.ui-v3 .v3pe-works ul.plain a, body.ui-v3 .v3pe-works a, body.ui-v3 .v3pe-work a, body.ui-v3 .v3pe-tl a { color: var(--v3-accent-ink); }
body.ui-v3 .v3pe-works p, body.ui-v3 .v3pe-work p { margin: 6px 0 0; font: 400 13px/18px var(--sans); color: var(--v3-label2); }
body.ui-v3 .v3pe-work .whist li { border-top-color: var(--v3-sep); font-size: 15px; }
body.ui-v3 .v3pe-work .whist li b { font-weight: 600; color: var(--v3-label); }
body.ui-v3 .v3pe-work .whist li:not(.cur) b { color: var(--v3-label2); }
body.ui-v3 .v3pe-work .wh-line { color: var(--v3-label2); }
body.ui-v3 .v3pe-note .composer { gap: 10px; }
body.ui-v3 .v3pe-note .cnote {
  width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--v3-fill); color: var(--v3-label);
  font: 400 17px/22px var(--sans); letter-spacing: -.43px; box-shadow: none; resize: vertical;
}
@media (max-width: 767.98px) { body.ui-v3 .v3pe-note .cnote { font-size: 16px; } }
body.ui-v3 .v3pe-note .chanchips button { border-radius: 999px; }
body.ui-v3 .v3pe-note .chanchips button[aria-pressed="true"] { background: var(--v3-accent-fill); color: var(--v3-on-accent); border-color: transparent; }
body.ui-v3 .v3pe-note .cacts .btn { border-radius: 999px; background: var(--v3-accent-fill); color: var(--v3-on-accent); border: 0; }
body.ui-v3 .v3pe-note .chint { color: var(--v3-label2); font-size: 13px; }
body.ui-v3 .v3pe-tl .tl-month { margin: 16px 0 6px; font: 600 13px/18px var(--sans); letter-spacing: -.08px; text-transform: none; color: var(--v3-label2); }
body.ui-v3 .v3pe-tl .tl-month:first-child { margin-top: 0; }
body.ui-v3 .v3pe-tl .tl-item { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 8px 0; }
body.ui-v3 .v3pe-tl .tl-dot { width: 30px; height: 30px; }
body.ui-v3 .v3pe-tl .tl-head { font: 400 17px/22px var(--sans); letter-spacing: -.43px; }
body.ui-v3 .v3pe-tl .tl-head time, body.ui-v3 .v3pe-tl .tl-meta { color: var(--v3-label2); font-size: 13px; }
body.ui-v3 .v3pe-tl .tl-body { color: var(--v3-label2); font: 400 15px/20px var(--sans); letter-spacing: -.23px; }
body.ui-v3 .v3pe-tl #tlmore { margin-top: 10px; border-radius: 999px; }

/* ---------- Dark mode: tinted texts that need a lighter shade ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.ui-v3 .v3a-ntext .v3a-nmet { color: #30D158; }
  :root:not([data-theme="light"]) body.ui-v3 .v3a-node.notmet .v3a-nmet { color: #FF8A8C; }
  :root:not([data-theme="light"]) body.ui-v3 .v3a-gapnote { color: #FFB06A; }
  :root:not([data-theme="light"]) body.ui-v3 .v3a-sicon { color: #FFB340; }
  :root:not([data-theme="light"]) body.ui-v3 .v3a-stitle { color: #FFC266; }
  :root:not([data-theme="light"]) body.ui-v3 .v3a-sbody { color: rgba(255, 214, 150, .8); }
  :root:not([data-theme="light"]) body.ui-v3 .v3pe-v.orange { color: #FF9F0A; }
}
:root[data-theme="dark"] body.ui-v3 .v3a-ntext .v3a-nmet { color: #30D158; }
:root[data-theme="dark"] body.ui-v3 .v3a-node.notmet .v3a-nmet { color: #FF8A8C; }
:root[data-theme="dark"] body.ui-v3 .v3a-gapnote { color: #FFB06A; }
:root[data-theme="dark"] body.ui-v3 .v3a-sicon { color: #FFB340; }
:root[data-theme="dark"] body.ui-v3 .v3a-stitle { color: #FFC266; }
:root[data-theme="dark"] body.ui-v3 .v3a-sbody { color: rgba(255, 214, 150, .8); }
:root[data-theme="dark"] body.ui-v3 .v3pe-v.orange { color: #FF9F0A; }
/* === css/v3-inbox.css === */
/* UI V3: Inbox (#/inbox, js/v3/inbox.js). Every rule under body.ui-v3 (components: ../shared/css/ios26-v3.css).
   The page keeps V2's hook classes (.v2ix, .v2ix-list, .v2ix-item, .v2ix-detail, .v2ix-panel, ...) for the V2 logic,
   so the V2 rules on those classes (css/v2-inbox.css) are neutralised here under .v3ix.
   Desktop (>= 768px): title with the filters as a segmented control, then list card | detail card (board
   CockpitDesktop.dc.html). Phone: filter chips, grouped .v3-list sections, the detail as its own page (.is-detail). */

body.ui-v3 .v3ix { --v3ix-inset: var(--v3-cell); }
body.ui-v3 .v3ix-loaderr { margin: 12px 0 0; }

/* ---------- Filters: chips on a phone, a segmented control on desktop ---------- */
body.ui-v3 .v3ix .v3ix-filters { flex-direction: row; margin-top: 14px; }
body.ui-v3 .v3ix-n { font-weight: 500; color: var(--v3-label2); font-variant-numeric: tabular-nums; }
body.ui-v3 .v3ix-f[aria-pressed="true"] .v3ix-n { color: inherit; opacity: .85; }

/* ---------- Scan list ---------- */
body.ui-v3 .v3ix .v2ix-list { max-height: none; overflow: visible; border-right: 0; }
body.ui-v3 .v3ix .v2ix-item {
  border-top: 0; border-radius: 0; background: transparent; cursor: pointer; outline: none;
  transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
body.ui-v3 .v3ix .v2ix-item:focus-visible { box-shadow: inset 0 0 0 2px var(--v3-accent); }
body.ui-v3 .v3ix .v2ix-item.is-leaving { opacity: 0; pointer-events: none; }
body.ui-v3 .v3ix .v2ix-item.is-busy { opacity: .6; }
body.ui-v3 .v3ix-rtop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
body.ui-v3 .v3ix-ltitle {
  flex: 1 1 auto; min-width: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
body.ui-v3 .v3ix-when { flex: none; font: 400 15px/20px var(--sans); letter-spacing: -.23px; color: var(--v3-label2); font-variant-numeric: tabular-nums; }
body.ui-v3 .v3ix-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ui-v3 .v3ix .v2ix-and, body.ui-v3 .v3ix .v2ix-inline { font-weight: 400; color: var(--v3-label2); }
body.ui-v3 .v3ix-empty { margin: 0; padding: 32px 16px; text-align: center; font: 400 15px/20px var(--sans); color: var(--v3-label2); }

/* ---------- Detail ---------- */
body.ui-v3 .v3ix .v2ix-det { outline: none; }
body.ui-v3 .v3ix .v2ix-det.is-busy { opacity: .85; }
body.ui-v3 .v3ix .v2ix-pick { margin: 0; padding: 48px 16px; text-align: center; font: 400 15px/20px var(--sans); color: var(--v3-label2); }
body.ui-v3 .v3ix-nav { display: flex; }
body.ui-v3 .v3ix-kline { margin: 0; font: 600 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); overflow-wrap: anywhere; }
body.ui-v3 .v3ix-dtitle { margin: 2px 0 0; font: 700 22px/28px var(--display); letter-spacing: -.26px; color: var(--v3-label); overflow-wrap: anywhere; }
body.ui-v3 .v3ix-dtitle a { color: inherit; }
body.ui-v3 .v3ix-why, body.ui-v3 .v3ix-body p {
  margin: 6px 0 0; max-width: 62ch; font: 400 17px/22px var(--sans); letter-spacing: -.43px;
  color: color-mix(in srgb, var(--v3-label) 85%, transparent); overflow-wrap: anywhere;
}
body.ui-v3 .v3ix-body a { color: var(--v3-accent-ink); }
body.ui-v3 .v3ix .v2ix-note { font-style: italic; color: var(--v3-label2); }
body.ui-v3 .v3ix .v2ix-status { font-weight: 600; color: var(--v3-label); }
body.ui-v3 .v3ix-low { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; font: 400 15px/20px var(--sans); color: var(--v3-label2); }

/* Inset lists inside the detail: rows of label | value, and the tasks the proposal touches */
body.ui-v3 .v3ix .v3ix-inset { margin-top: 18px; border-radius: 18px; background: var(--v3ix-inset); }
body.ui-v3 .v3ix .v3-sechead + .v3ix-inset { margin-top: 0; }
body.ui-v3 .v3ix-kv { justify-content: space-between; }
body.ui-v3 .v3ix-k { flex: none; color: var(--v3-label); }
body.ui-v3 .v3ix-v { min-width: 0; text-align: right; color: var(--v3-label2); overflow-wrap: anywhere; }
body.ui-v3 .v3ix-v a { color: var(--v3-accent-ink); text-decoration: none; }
body.ui-v3 .v3ix-src { font-size: 15px; line-height: 20px; }
body.ui-v3 .v3ix-tstat { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--v3-label3); }
body.ui-v3 .v3ix-tstat .v3-ico { flex: none; }
body.ui-v3 .v3ix-old { text-decoration: line-through; opacity: .55; }
body.ui-v3 .v3ix-nochange { margin-right: 4px; font: 400 13px/18px var(--sans); color: var(--v3-label2); }

/* Actions and their panel */
body.ui-v3 .v3ix-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
body.ui-v3 .v3ix-acts .v3-btn { height: 44px; padding: 0 22px; }
body.ui-v3 .v3ix .v3ix-danger { background: color-mix(in srgb, var(--v3-red-ink) 14%, transparent); color: var(--v3-red-ink); }
body.ui-v3 .v3ix .v3-btn.arm { background: var(--v3-badge); color: #FFFFFF; }
body.ui-v3 .v3ix .v2ix-rowerr { margin: 10px 0 0; font: 400 15px/20px var(--sans); color: var(--v3-red-ink); }
body.ui-v3 .v3ix .v2ix-panel { margin-top: 16px; padding: 0; border-radius: 0; background: none; display: grid; gap: 12px; }
body.ui-v3 .v3ix .v2ix-panel[hidden] { display: none; }
body.ui-v3 .v3ix .v3ix-plist { border-radius: 18px; background: var(--v3ix-inset); }
body.ui-v3 .v3ix .v3ix-plist .v3-row { justify-content: space-between; padding-block: 8px; }
body.ui-v3 .v3ix .v3ix-prio { flex: none; width: 200px; }
body.ui-v3 .v3ix .v3ix-prio > button { height: 28px; font-size: 13px; }
body.ui-v3 .v3ix-date {
  flex: none; width: auto; height: 34px; margin: 0; padding: 0 10px; border: 0; border-radius: 10px; box-shadow: none;
  background: var(--v3-fill); color: var(--v3-label); font: 400 17px/22px var(--sans); color-scheme: light dark;
}
body.ui-v3 .v3ix-fb { display: grid; gap: 6px; }
body.ui-v3 .v3ix-lbl { padding: 0 16px; font: 600 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); }
body.ui-v3 .v3ix-fb textarea {
  width: 100%; min-height: 72px; margin: 0; padding: 12px 14px; border: 0; border-radius: 14px; box-shadow: none; resize: vertical;
  background: var(--v3-fill); color: var(--v3-label); font: 400 17px/22px var(--sans); letter-spacing: -.43px;
}
body.ui-v3 .v3ix-fb textarea:focus-visible, body.ui-v3 .v3ix-date:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 0; }
body.ui-v3 .v3ix-pacts, body.ui-v3 .v3ix-keep { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.ui-v3 .v3ix-hint { font: 400 13px/18px var(--sans); color: var(--v3-label2); }
@media (pointer: coarse) { body.ui-v3 .v3ix-hint { display: none; } }
body.ui-v3 .v3ix-note { margin: 0; padding: 0 16px; font: 400 13px/18px var(--sans); color: var(--v3-label2); }
body.ui-v3 .v3ix-search {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--v3-fill); color: var(--v3-label2);
}
body.ui-v3 .v3ix-search input {
  flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; outline: none; background: transparent;
  color: var(--v3-label); font: 400 17px/22px var(--sans);
}
body.ui-v3 .v3ix-search:focus-within { box-shadow: 0 0 0 2px var(--v3-accent); }
body.ui-v3 .v3ix .v2ix-orgres { display: grid; gap: 2px; }
body.ui-v3 .v3ix .v2ix-orgres .v2-why { margin: 0; padding: 0 16px; font: 400 13px/18px var(--sans); color: var(--v3-label2); }
body.ui-v3 .v3ix .v2ix-org {
  width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 14px; background: none; cursor: pointer; text-align: left;
  font: 400 17px/22px var(--sans); color: var(--v3-label);
}
body.ui-v3 .v3ix .v2ix-org:hover, body.ui-v3 .v3ix .v2ix-org:focus-visible { background: var(--v3-fill); outline: none; }

/* ---------- Phone: chips, grouped lists, the detail as its own page ---------- */
@media (max-width: 767.98px) {
  body.ui-v3 .v3ix-layout { margin-top: 2px; }
  body.ui-v3 .v3ix-group:first-child > .v3-sechead { margin-top: 16px; }
  body.ui-v3 .v3ix-group:first-child > .v3-list:first-child { margin-top: 16px; }
  body.ui-v3 .v3ix .v2ix-item.is-sel { background: transparent; }
  body.ui-v3 .v3ix .v3ix-row:active { background: var(--v3-fill); }
  body.ui-v3 .v3ix .v2ix-detail { display: none; padding: 0; }
  body.ui-v3 .v3ix.is-detail .v3ix-top, body.ui-v3 .v3ix.is-detail .v3ix-listcard, body.ui-v3 .v3ix.is-detail .v3ix-loaderr { display: none; }
  body.ui-v3 .v3ix.is-detail .v2ix-detail { display: block; }
  body.ui-v3 .v3ix-nav { padding-top: var(--v3-top); margin-bottom: 14px; }
  body.ui-v3 .v3ix-dtitle { font-size: 28px; line-height: 34px; letter-spacing: .36px; }
  body.ui-v3 .v3ix-acts .v3-btn { flex: 1 1 auto; }
  body.ui-v3 .v3ix .v3ix-kv { flex-wrap: wrap; }
  body.ui-v3 .v3ix .v3ix-prio > button { height: 32px; }
}

/* ---------- Desktop and iPad: list card | detail card ---------- */
@media (min-width: 768px) {
  body.ui-v3 .v3ix { --v3ix-inset: color-mix(in srgb, var(--v3-label) 6%, var(--v3-cell)); }
  body.ui-v3 .v3ix-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
  body.ui-v3 .v3ix-top > .v3-head { flex: 1 1 auto; min-width: 220px; }
  body.ui-v3 .v3ix .v3-head .v3-acts { display: none; }
  /* the filters as a segmented control */
  body.ui-v3 .v3ix .v3ix-filters {
    flex: 0 1 auto; flex-wrap: nowrap; gap: 0; max-width: 100%; margin-top: 0; padding: 3px; overflow-x: auto; scrollbar-width: none;
    border-radius: 999px; background: var(--v3-fill);
  }
  body.ui-v3 .v3ix .v3ix-filters::-webkit-scrollbar { display: none; }
  body.ui-v3 .v3ix .v3ix-f { height: 30px; padding: 0 12px; background: transparent; color: var(--v3-label); font: 500 13px/18px var(--sans); letter-spacing: -.08px; }
  body.ui-v3 .v3ix .v3ix-f[aria-pressed="true"] { background: var(--v3-thumb); color: var(--v3-label); box-shadow: var(--v3-thumb-shadow); font-weight: 600; }
  body.ui-v3 .v3ix .v3ix-f:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: -2px; }
  body.ui-v3 .v3ix-f[aria-pressed="true"] .v3ix-n { color: var(--v3-label2); opacity: 1; }

  body.ui-v3 .v3ix-layout { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 20px; }
  body.ui-v3 .v3ix-listcard {
    position: sticky; top: calc(var(--headh, 64px) + 16px); max-height: calc(100vh - var(--headh, 64px) - 32px); max-height: calc(100dvh - var(--headh, 64px) - 32px);
    overflow-y: auto; overscroll-behavior: contain; padding: 8px; border-radius: 24px; background: var(--v3-cell);
  }
  body.ui-v3 .v3ix .v3ix-ul { border-radius: 0; background: transparent; overflow: visible; }
  body.ui-v3 .v3ix-listcard .v3-sechead { margin-top: 14px; padding: 0 14px 4px; }
  body.ui-v3 .v3ix-listcard .v3ix-group:first-child > .v3-sechead { margin-top: 6px; }
  body.ui-v3 .v3ix .v3ix-row { --v3-inset: 14px; padding: 12px 14px; border-radius: 16px; }
  body.ui-v3 .v3ix .v3ix-ul > .v3ix-row:not(:last-child)::after { right: 14px; }
  body.ui-v3 .v3ix .v3ix-ul > .v3ix-row.is-sel::after, body.ui-v3 .v3ix .v3ix-ul > .v3ix-row:has(+ .is-sel)::after { display: none; }
  body.ui-v3 .v3ix .v2ix-item.is-sel { background: color-mix(in srgb, var(--v3-accent) 10%, transparent); }
  body.ui-v3 .v3ix .v2ix-item:hover:not(.is-sel) { background: var(--v3-fill); }
  body.ui-v3 .v3ix .v3ix-row .v3-chev { display: none; }
  body.ui-v3 .v3ix .v3ix-ltitle { font: 600 15px/20px var(--sans); letter-spacing: -.23px; }
  body.ui-v3 .v3ix .v3ix-when, body.ui-v3 .v3ix .v3ix-meta { font-size: 13px; line-height: 18px; letter-spacing: -.08px; }

  body.ui-v3 .v3ix .v2ix-detail { min-width: 0; min-height: 240px; padding: 24px; border-radius: 24px; background: var(--v3-cell); }
  body.ui-v3 .v3ix-nav { display: none; }
}
/* iPad portrait and narrow windows: a narrower list leaves the detail room */
@media (min-width: 768px) and (max-width: 1099.98px) {
  body.ui-v3 .v3ix-layout { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); }
  body.ui-v3 .v3ix .v2ix-detail { padding: 20px; }
}
/* === css/v3-library.css === */
/* UI V3: Library (#/library) and the document page (#/document/<id>), js/v3/library.js. Every rule under body.ui-v3
   (components: ../shared/css/ios26-v3.css). Desktop (>= 768px): result list | sticky preview card; document page =
   text | details, versions and contents. Phone: one column; the preview is a bottom sheet, contents a sheet too. */

/* ---------- Search capsule, type chips, company picker ---------- */
body.ui-v3 .v3lib-q {
  display: flex; align-items: center; gap: 8px; height: 44px; margin-top: 16px; padding: 0 16px; border-radius: 999px;
  background: var(--v3-fill); color: var(--v3-label2); cursor: text;
}
body.ui-v3 .v3lib-q:focus-within { box-shadow: 0 0 0 2px var(--v3-accent); }
body.ui-v3 .v3lib-q svg { flex: none; }
body.ui-v3 .v3lib-q input, body.ui-v3 .v3lib-q input:focus {
  flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: none; box-shadow: none; background: transparent;
  color: var(--v3-label); font: 400 17px/22px var(--sans); letter-spacing: -.43px;
}
body.ui-v3 .v3lib-bar { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
body.ui-v3 .v3lib-n { font-weight: 500; color: var(--v3-label2); font-variant-numeric: tabular-nums; }
body.ui-v3 .v3lib-chips .v3-chip[aria-pressed="true"] .v3lib-n { color: inherit; opacity: .85; }
body.ui-v3 .v3lib-co {
  position: relative; align-self: flex-start; display: inline-flex; align-items: center; height: 32px; border-radius: 999px;
  background: var(--v3-fill); color: var(--v3-label);
}
body.ui-v3 .v3lib-co select {
  height: 100%; max-width: min(280px, 70vw); margin: 0; padding: 0 30px 0 14px; border: 0; border-radius: 999px; box-shadow: none;
  background: transparent; color: inherit; font: 500 14px/18px var(--sans); letter-spacing: -.15px;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
body.ui-v3 .v3lib-co select:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 0; }
body.ui-v3 .v3lib-co svg { position: absolute; right: 11px; top: 10px; transform: rotate(90deg); color: var(--v3-label2); pointer-events: none; }

/* ---------- Result list ---------- */
body.ui-v3 .v3lib-list > .v3-sechead:first-child { margin-top: 18px; }
body.ui-v3 .v3lib-row { align-items: flex-start; }
body.ui-v3 .v3lib-row > .v3-tile { margin-top: 2px; }
body.ui-v3 .v3lib-row > .v3-chev, body.ui-v3 .v3lib-row > .v3-value { align-self: center; }
body.ui-v3 .v3lib-meta { font-size: 13px; line-height: 18px; letter-spacing: -.08px; }
body.ui-v3 .v3lib-snip {
  margin-top: 2px; font: 400 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
body.ui-v3 .v3lib-ver { font-size: 15px; line-height: 20px; }
body.ui-v3 .v3lib mark, body.ui-v3 .v3lib-sheet mark {
  background: color-mix(in srgb, var(--v3-accent) 20%, transparent); color: inherit; border-radius: 4px; padding: 0 1px;
}
body.ui-v3 .v3lib-title mark { font-weight: 600; }
body.ui-v3 .v3lib-empty { margin: 0; padding: 24px 16px; text-align: center; font: 400 15px/20px var(--sans); color: var(--v3-label2); }
body.ui-v3 .v3lib-err { color: var(--v3-red-ink); }
body.ui-v3 .v3lib-row[aria-current="true"]:focus-visible, body.ui-v3 .v3lib-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--v3-accent); }

/* ---------- Preview (desktop card and phone sheet) ---------- */
body.ui-v3 .v3lib-prev[hidden] { display: none; }
body.ui-v3 .v3lib-ptype { margin: 0 0 6px; }
body.ui-v3 .v3lib-ptitle { margin: 0; font: 700 22px/28px var(--display); letter-spacing: -.26px; overflow-wrap: anywhere; }
body.ui-v3 .v3lib-pmeta, body.ui-v3 .v3lib-psec { margin: 4px 0 0; font: 400 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); overflow-wrap: anywhere; }
body.ui-v3 .v3lib-md { max-width: none; margin-top: 12px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
body.ui-v3 .v3lib-md > :first-child { margin-top: 0; }
body.ui-v3 .v3lib-md table { display: block; max-width: 100%; overflow-x: auto; }
body.ui-v3 .v3lib-acts { display: flex; flex-wrap: wrap; gap: 8px; }
body.ui-v3 .v3lib-sheet .v3lib-acts { margin-top: 18px; }
body.ui-v3 .v3lib-sheet .v3lib-acts > .v3-btn { flex: 1 1 auto; }

/* ---------- Document page ---------- */
body.ui-v3 .v3doc-kv { justify-content: space-between; }
body.ui-v3 .v3doc-k { flex: none; color: var(--v3-label); }
body.ui-v3 .v3doc-v { min-width: 0; text-align: right; color: var(--v3-label2); overflow-wrap: anywhere; }
body.ui-v3 .v3doc-v a { color: var(--v3-accent-ink); text-decoration: none; }
body.ui-v3 .v3doc-date { font-size: 15px; line-height: 20px; white-space: nowrap; }
body.ui-v3 .v3doc .v3-rtitle .v3-pill { vertical-align: 2px; margin-left: 4px; }
body.ui-v3 .v3doc-text { overflow-x: auto; }
body.ui-v3 .v3doc-text .md { max-width: 72ch; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
body.ui-v3 .v3doc-text .md > :first-child { margin-top: 0; }
body.ui-v3 .v3doc-text .md h1, body.ui-v3 .v3doc-text .md h2, body.ui-v3 .v3doc-text .md h3 {
  scroll-margin-top: calc(var(--headh, 0px) + 16px); font-family: var(--display); font-weight: 700; letter-spacing: -.2px;
}
body.ui-v3 .v3doc-text .md h1 { font-size: 22px; line-height: 28px; margin: 22px 0 6px; }
body.ui-v3 .v3doc-text .md h2 { font-size: 19px; line-height: 25px; margin: 20px 0 6px; }
body.ui-v3 .v3doc-text .md h3 { font-size: 17px; line-height: 22px; margin: 16px 0 4px; }
body.ui-v3 .v3doc-text .md :is(h1, h2, h3):focus { outline: none; }
body.ui-v3 .v3doc-text .md table { display: block; max-width: 100%; overflow-x: auto; }
body.ui-v3 .v3doc-toc { display: none; }

/* ---------- Phone ---------- */
@media (max-width: 767.98px) {
  body.ui-v3 .v3lib-chips { order: 2; }
  body.ui-v3 .v3lib-co { order: 1; }
  body.ui-v3 .v3lib-prev { display: none !important; }
  body.ui-v3 .v3doc-main > .v3-sechead { margin-top: 22px; }
}

/* ---------- Desktop and iPad ---------- */
@media (min-width: 768px) {
  body.ui-v3 .v3lib .v3-head .v3-acts { display: none; }  /* the top bar has Inbox, search and More */
  body.ui-v3 .v3lib-q { max-width: 720px; }
  body.ui-v3 .v3lib-bar { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px 16px; }
  body.ui-v3 .v3lib-chips { flex: 1 1 auto; min-width: 0; }
  body.ui-v3 .v3lib-co { flex: none; }
  body.ui-v3 .v3lib-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  body.ui-v3 .v3lib-list { min-width: 0; }
  body.ui-v3 .v3lib-row[aria-current="true"] { background: color-mix(in srgb, var(--v3-accent) 10%, transparent); }
  body.ui-v3 .v3lib-prev {
    position: sticky; top: calc(var(--headh, 64px) + 16px); margin-top: 42px; min-width: 0;
    max-height: calc(100vh - var(--headh, 64px) - 32px); max-height: calc(100dvh - var(--headh, 64px) - 32px);
    display: flex; flex-direction: column; gap: 16px; padding: 20px 24px; border-radius: 24px; background: var(--v3-cell);
  }
  body.ui-v3 .v3lib-pbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  body.ui-v3 .v3lib-acts { flex: none; }

  body.ui-v3 .v3doc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 20px; align-items: start; }
  body.ui-v3 .v3doc-tocrow { display: none; }
  body.ui-v3 .v3doc-toc { display: block; }
  body.ui-v3 .v3doc-side { min-width: 0; }
  body.ui-v3 .v3doc-text { padding: 24px 28px; }
}
/* === css/v3-search.css === */
/* UI V3: Search (dialog.v3-search, js/v3/search.js) and the Quick log sheet (dialog.v3-sheet.v3ql). Every rule under
   body.ui-v3 (components: ../shared/css/ios26-v3.css). Search, phone: full screen, results on top, scope chips and the
   glass field pinned at the bottom; desktop: a centred 640px glass panel with the field on top (board
   CockpitSearch.dc.html). Quick log: the V2 fields (#qlWho, #qlWhoQ, .v2-whochip, .v2-wholist) restyled in the sheet. */

/* ---------- Search, phone first ---------- */
html.v3s-lock body.ui-v3 { overflow: hidden; }
body.ui-v3 dialog.v3-search {
  position: fixed; inset: 0 auto auto 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--v3-ground); color: var(--v3-label);
}
body.ui-v3 dialog.v3-search::backdrop { background: var(--v3-backdrop); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.ui-v3 dialog.v3-search[open] { animation: sheet-in 160ms var(--ease); }
body.ui-v3 .v3s-box { height: 100%; display: flex; flex-direction: column; min-height: 0; }
body.ui-v3 .v3s-list {
  order: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--v3-top) max(var(--v3-gutter), env(safe-area-inset-right, 0px)) 28px max(var(--v3-gutter), env(safe-area-inset-left, 0px));
}
body.ui-v3 .v3s-list > .v3s-group:first-child > .v3-sechead { margin-top: 0; }
body.ui-v3 .v3s-scopes {
  order: 2; position: relative; flex: none; margin: -24px 0 0; padding: 24px 12px 2px;
  background: linear-gradient(180deg, transparent, var(--v3-ground) 55%);
}
body.ui-v3 .v3s-field {
  order: 3; flex: none; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--v3-ground);
}
body.ui-v3 .v3s-in {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px; display: flex; align-items: center; gap: 8px; border-radius: 999px; cursor: text;
  background: var(--v3-glass); color: var(--v3-label2);
  -webkit-backdrop-filter: var(--v3-glass-blur); backdrop-filter: var(--v3-glass-blur);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .12), var(--v3-glass-rim);
}
body.ui-v3 .v3s-in svg { flex: none; }
body.ui-v3 .v3s-in input, body.ui-v3 .v3s-in input:focus {
  flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: none; box-shadow: none; background: transparent;
  color: var(--v3-label); font: 400 17px/22px var(--sans); letter-spacing: -.43px; caret-color: var(--v3-accent);
}
body.ui-v3 .v3s-in input::-webkit-search-cancel-button { display: none; }
body.ui-v3 .v3s-esc { display: none; flex: none; font: 600 12px/16px var(--sans); color: var(--v3-label2); }
body.ui-v3 .v3s-field .v3s-close {
  width: 48px; height: 48px; background: var(--v3-glass); box-shadow: 0 8px 30px rgba(0, 0, 0, .12), var(--v3-glass-rim);
  -webkit-backdrop-filter: var(--v3-glass-blur); backdrop-filter: var(--v3-glass-blur);
}

/* Results */
body.ui-v3 .v3s-opt { cursor: pointer; }
body.ui-v3 .v3s-opt .v3-rtitle, body.ui-v3 .v3s-opt .v3-rsub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui-v3 .v3s-opt .v3-rsub { font-size: 13px; line-height: 18px; letter-spacing: -.08px; }
body.ui-v3 .v3-search mark { background: none; color: var(--v3-label); font-weight: 600; }
body.ui-v3 .v3s-av { flex: none; display: inline-flex; }
body.ui-v3 .v3s-av .av { width: 36px; height: 36px; }
body.ui-v3 .v3s-ring { flex: none; width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--v3-label3); }
body.ui-v3 .v3s-top { padding: 14px 16px; }
body.ui-v3 .v3s-toplist > .v3s-top::after { display: none; }
body.ui-v3 .v3s-top .v3-rtitle { font-weight: 600; }
body.ui-v3 .v3s-top .v3-rsub { font-size: 15px; line-height: 20px; letter-spacing: -.23px; }
body.ui-v3 .v3s-bigtile { width: 48px; height: 48px; border-radius: 14px; }
body.ui-v3 .v3s-av.big .av { width: 48px; height: 48px; font-size: 17px; }
body.ui-v3 .v3s-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px 76px; }
body.ui-v3 .v3s-act { height: 34px; }
body.ui-v3 .v3s-act[aria-selected="true"] { outline: 2px solid var(--v3-accent); outline-offset: 1px; }
body.ui-v3 .v3s-note { margin: 0; padding: 24px 16px; text-align: center; font: 400 15px/20px var(--sans); color: var(--v3-label2); }
@media (hover: hover) {
  body.ui-v3 .v3s-opt[aria-selected="true"] { background: color-mix(in srgb, var(--v3-accent) 12%, transparent); }
}

/* ---------- Search, desktop: a centred glass panel, field on top ---------- */
@media (min-width: 768px) {
  body.ui-v3 dialog.v3-search {
    inset: 0; width: min(640px, calc(100vw - 48px)); height: fit-content; max-height: 76vh; margin: 12vh auto auto;
    border-radius: 28px; background: color-mix(in srgb, var(--v3-ground) 82%, transparent);
    -webkit-backdrop-filter: var(--v3-glass-blur); backdrop-filter: var(--v3-glass-blur);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25), var(--v3-glass-rim);
  }
  body.ui-v3 .v3s-box { height: auto; max-height: 76vh; }
  body.ui-v3 .v3s-field { order: 1; padding: 12px 12px 8px; background: transparent; }
  body.ui-v3 .v3s-in { background: var(--v3-fill); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.ui-v3 .v3s-in:focus-within { box-shadow: 0 0 0 2px var(--v3-accent); }
  body.ui-v3 .v3s-esc { display: inline; }
  body.ui-v3 .v3s-field .v3s-close { display: none; }
  body.ui-v3 .v3s-scopes { order: 2; margin: 0; padding: 0 12px 4px; background: none; }
  body.ui-v3 .v3s-list { order: 3; padding: 4px 12px 14px; }
  body.ui-v3 .v3s-list > .v3s-group:first-child > .v3-sechead { margin-top: 10px; }
}

/* ---------- Quick log sheet ---------- */
body.ui-v3 .v3ql-form > .v3-sechead:first-child { margin-top: 0; }
body.ui-v3 .v3ql .v2-whochip {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; border-radius: 18px; background: var(--v3-cell2);
}
body.ui-v3 .v3ql .v2-whoname { flex: 1 1 auto; min-width: 0; font: 400 17px/22px var(--sans); letter-spacing: -.43px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui-v3 .v3ql .v2-whoname b { font-weight: 600; }
body.ui-v3 .v3ql .v2-whoname .muted { color: var(--v3-label2); }
body.ui-v3 .v3ql .v2-whochip .linkbtn { flex: none; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--v3-accent-ink); font: 400 17px/22px var(--sans); cursor: pointer; }
body.ui-v3 .v3ql #qlWhoQ, body.ui-v3 .v3ql-note {
  width: 100%; margin: 0; border: 0; box-shadow: none; background: var(--v3-cell2); color: var(--v3-label);
  font: 400 17px/22px var(--sans); letter-spacing: -.43px;
}
body.ui-v3 .v3ql #qlWhoQ { height: 48px; padding: 0 16px; border-radius: 18px; }
body.ui-v3 .v3ql-note { display: block; min-height: 104px; padding: 12px 16px; border-radius: 18px; resize: vertical; }
body.ui-v3 .v3ql #qlWhoQ:focus-visible, body.ui-v3 .v3ql-note:focus-visible, body.ui-v3 .v3ql-day input:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 0; }
body.ui-v3 .v3ql .v2-wholist {
  margin-top: 6px; max-height: 240px; overflow-y: auto; border: 0; border-radius: 18px; background: var(--v3-cell2); padding: 4px 0;
}
body.ui-v3 .v3ql .v2-wholist .v2-palopt { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0 4px; padding: 6px 12px; border-radius: 14px; cursor: pointer; }
body.ui-v3 .v3ql .v2-wholist .v2-palopt[aria-selected="true"] { background: color-mix(in srgb, var(--v3-accent) 12%, transparent); }
body.ui-v3 .v3ql .v2-wholist .v2-paltxt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 17px/22px var(--sans); }
body.ui-v3 .v3ql .v2-wholist .v2-paltxt .muted { color: var(--v3-label2); font-size: 15px; }
body.ui-v3 .v3ql .v2-wholist .v2-palnote { margin: 0; padding: 12px 16px; color: var(--v3-label2); font: 400 15px/20px var(--sans); }
body.ui-v3 .v3ql-how > button { height: 32px; }
body.ui-v3 .v3ql-day { justify-content: space-between; }
body.ui-v3 .v3ql-day input {
  flex: none; width: auto; height: 34px; margin: 0; padding: 0 10px; border: 0; border-radius: 10px; box-shadow: none;
  background: var(--v3-fill); color: var(--v3-label); font: 400 17px/22px var(--sans); color-scheme: light dark;
}
body.ui-v3 .v3ql-err { margin: 10px 16px 0; font: 400 15px/20px var(--sans); color: var(--v3-red-ink); }
body.ui-v3 .v3ql-foot { margin-top: 10px; text-align: center; }
/* === css/v3-goals.css === */
/* UI V3: Goals (#/goals, js/v3/goals.js). Everything under body.ui-v3; V3 tokens only. */

/* ---------- Quarter stepper ---------- */
body.ui-v3 .v3g-step { display: flex; align-items: center; gap: 4px; margin: 10px 0 16px; padding: 0; }
body.ui-v3 .v3g-stepbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--v3-fill); color: var(--v3-accent-ink); text-decoration: none;
}
@media (hover: hover) { body.ui-v3 .v3g-stepbtn:hover { filter: brightness(.96); } }
body.ui-v3 .v3g-stepq { min-width: 76px; text-align: center; font: 600 15px/20px var(--sans); letter-spacing: -.23px; color: var(--v3-label); font-variant-numeric: tabular-nums; }
body.ui-v3 .v3g-now { margin-left: 8px; font: 400 15px/20px var(--sans); letter-spacing: -.23px; color: var(--v3-accent-ink); }
@media (max-width: 767.98px) {
  body.ui-v3 .v3g-stepbtn { width: 44px; height: 44px; }
}

/* ---------- Goal rows ---------- */
body.ui-v3 .v3g-row { cursor: pointer; }
@media (hover: hover) { body.ui-v3 .v3g-row:hover { background: var(--v3-fill); } }
body.ui-v3 .v3g-row.is-dropped > * { opacity: .5; }
body.ui-v3 .v3g-rank { font: 600 15px/1 var(--sans); font-variant-numeric: tabular-nums; }
body.ui-v3 .v3g-open {
  flex: 1 1 auto; min-width: 0; display: flex; margin: 0; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit;
  text-align: left; cursor: pointer; font: inherit; box-shadow: none;
}
body.ui-v3 .v3g-open:hover { background: none; box-shadow: none; }
body.ui-v3 .v3g-open:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 2px; }
body.ui-v3 .v3g-area { font: 600 12px/16px var(--sans); letter-spacing: 0; color: var(--v3-label2); white-space: nowrap; }
body.ui-v3 .v3g-stats { font: 400 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); overflow-wrap: anywhere; }
body.ui-v3 .v3g-over { color: var(--v3-red-ink); font-weight: 600; }
body.ui-v3 .v3g-move { flex: none; display: flex; gap: 2px; }
body.ui-v3 .v3g-move button {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--v3-accent-ink); cursor: pointer; box-shadow: none;
}
body.ui-v3 .v3g-move button:hover:not(:disabled) { background: var(--v3-fill); }
body.ui-v3 .v3g-move button:disabled { color: var(--v3-label3); cursor: default; }
body.ui-v3 .v3g-move button:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: -2px; }
body.ui-v3 .v3g-move [data-g3-move="-1"] svg { transform: rotate(-90deg); }
body.ui-v3 .v3g-move [data-g3-move="1"] svg { transform: rotate(90deg); }
@media (max-width: 767.98px) {
  body.ui-v3 .v3g-row:has(.v3g-move) { padding-right: 4px; }
  body.ui-v3 .v3g-move { flex-direction: column; gap: 0; margin: -8px 0; }
  body.ui-v3 .v3g-move button { width: 44px; height: 44px; }
}

/* ---------- Empty state and small lines ---------- */
body.ui-v3 .v3g-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
body.ui-v3 .v3g-empty p { margin: 0; font: 400 17px/22px var(--sans); letter-spacing: -.43px; color: var(--v3-label); }
body.ui-v3 .v3g-note { margin: 0; padding: 0 16px; font: 400 15px/20px var(--sans); letter-spacing: -.23px; color: var(--v3-label2); }

/* ---------- Sheets ---------- */
body.ui-v3 .v3g-sheet .v3g-err { margin: 0 0 14px; }
body.ui-v3 .v3g-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
body.ui-v3 .v3g-field[hidden] { display: none; }
body.ui-v3 .v3g-lbl { padding: 0 16px; font: 600 13px/18px var(--sans); letter-spacing: -.08px; color: var(--v3-label2); }
body.ui-v3 .v3g-field > input, body.ui-v3 .v3g-field > textarea {
  width: 100%; min-width: 0; box-sizing: border-box; margin: 0; padding: 11px 16px; border: 0; border-radius: 16px; background: var(--v3-cell2); color: var(--v3-label);
  font: 400 17px/22px var(--sans); letter-spacing: -.43px; box-shadow: none;
}
body.ui-v3 .v3g-field > textarea { resize: none; field-sizing: content; min-height: 66px; max-height: 40vh; }
body.ui-v3 .v3g-field > input:focus, body.ui-v3 .v3g-field > textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--v3-accent); }
@media (max-width: 767.98px) { body.ui-v3 .v3g-field > input, body.ui-v3 .v3g-field > textarea { font-size: 16px; } }
body.ui-v3 .v3g-seg > button { min-width: 0; padding-inline: 4px; }
body.ui-v3 .v3g-sheet .v3-list { background: var(--v3-cell2); }
body.ui-v3 .v3g-linked[hidden], body.ui-v3 .v3g-results[hidden] { display: none; }
body.ui-v3 .v3g-linkrow { padding-block: 8px; padding-right: 6px; }
body.ui-v3 .v3g-x {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -6px 0; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--v3-label2); cursor: pointer; box-shadow: none;
}
body.ui-v3 .v3g-x:hover { background: var(--v3-fill); }
body.ui-v3 .v3g-x:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: -2px; }
body.ui-v3 .v3g-results .v3-ico { flex: none; color: var(--v3-accent-ink); }
body.ui-v3 .v3g-nohit { margin: 0; padding: 12px 16px; font: 400 15px/20px var(--sans); letter-spacing: -.23px; color: var(--v3-label2); }
body.ui-v3 .v3g-carry { margin-top: 4px; }
body.ui-v3 .v3g-carried { margin: 0; padding: 0 16px; font: 400 15px/20px var(--sans); letter-spacing: -.23px; color: var(--v3-label2); }
body.ui-v3 .v3g-linkfor { margin-bottom: 10px; }