/* Operations Hub (Nov 2026): David's look, built on top of style.css and design.css. Navy sidebar and header bar, white cards with
   soft shadows, navy-to-blue buttons, Outfit. No bright colours: one navy-blue accent, muted status colours.
   The rail and the cards are flat: hairline edges, no coloured bands, no top bar.
   Motion: a small spring on hover and a bounce on press, nothing that moves on its own; all of it off for reduced motion.
   design.css's tokens are re-pointed here, so the tools' own screens pick up the palette without changes. */
:root[data-theme="light"] {
  --bg: color(display-p3 0.932 0.94 0.952); --surface: color(display-p3 1 1 1); --input-bg: color(display-p3 1 1 1); --input-chip: color(display-p3 0.932 0.94 0.952); --raised: color(display-p3 0.94 0.947 0.958); --sunk: color(display-p3 0.952 0.958 0.968);
  --line: color(display-p3 0.875 0.889 0.91); --line-strong: color(display-p3 0.812 0.83 0.86);
  --text: color(display-p3 0.16 0.2 0.29); --text-strong: color(display-p3 0.06 0.1 0.22); --text-2: color(display-p3 0.38 0.42 0.49); --text-3: color(display-p3 0.53 0.57 0.63);
  --accent: color(display-p3 0.1 0.18 0.38); --accent-hover: color(display-p3 0.06 0.12 0.28); --accent-text: color(display-p3 0.11 0.2 0.4); --accent-soft: color(display-p3 0.1 0.18 0.38 / 0.07); --accent-line: color(display-p3 0.1 0.18 0.38 / 0.35); --on-accent: color(display-p3 1 1 1);
  --ok: color(display-p3 0.2741 0.4914 0.3673); --ok-soft: color(display-p3 0.9042 0.9473 0.9196); --ok-line: color(display-p3 0.6958 0.8227 0.7466);
  --warn: color(display-p3 0.5761 0.4237 0.1843); --warn-soft: color(display-p3 0.9756 0.9539 0.9072); --warn-line: color(display-p3 0.8817 0.8035 0.6341);
  --err: color(display-p3 0.6396 0.2872 0.3182); --err-soft: color(display-p3 0.9749 0.9313 0.9375); --err-line: color(display-p3 0.8742 0.71 0.731);
  --info: color(display-p3 0.1 0.18 0.38); --info-soft: color(display-p3 0.9258 0.9443 0.9733);
  --shadow-1: 0 1px 2px color(display-p3 0.1025 0.1741 0.3222 / 0.06); --shadow-pop: 0 14px 34px color(display-p3 0.1025 0.1741 0.3222 / 0.16), 0 0 0 1px color(display-p3 0.1025 0.1741 0.3222 / 0.06);
  --box-shadow: 0 1px 2px color(display-p3 0.1025 0.1741 0.3222 / 0.05), 0 8px 24px color(display-p3 0.1025 0.1741 0.3222 / 0.06);
  --grid-line: color(display-p3 0.2783 0.4036 0.6401 / 0.05); --card-edge: color(display-p3 0.872 0.886 0.906);
}
:root:not([data-theme="light"]) {
  --bg: color(display-p3 0.04 0.06 0.1); --surface: color(display-p3 0.07 0.1 0.16); --input-bg: color(display-p3 0.08 0.11 0.17); --input-chip: color(display-p3 0.1 0.14 0.21); --raised: color(display-p3 0.09 0.125 0.19); --sunk: color(display-p3 0.05 0.075 0.12);
  --line: color(display-p3 1 1 1 / 0.07); --line-strong: color(display-p3 1 1 1 / 0.13);
  --text: color(display-p3 0.8442 0.8658 0.9092); --text-strong: color(display-p3 1 1 1); --text-2: color(display-p3 0.66 0.71 0.79); --text-3: color(display-p3 0.5 0.55 0.64);
  --accent: color(display-p3 0.5 0.6 0.76); --accent-hover: color(display-p3 0.62 0.7 0.83); --accent-text: color(display-p3 0.72 0.78 0.87); --accent-soft: color(display-p3 0.6 0.68 0.8 / 0.12); --accent-line: color(display-p3 0.72 0.78 0.87 / 0.45); --on-accent: color(display-p3 1 1 1);
  --ok: color(display-p3 0.5031 0.7449 0.6138); --ok-soft: color(display-p3 0.5031 0.7449 0.6138 / 0.14); --ok-line: color(display-p3 0.5031 0.7449 0.6138 / 0.45);
  --warn: color(display-p3 0.8254 0.6963 0.4547); --warn-soft: color(display-p3 0.8254 0.6963 0.4547 / 0.12); --warn-line: color(display-p3 0.8254 0.6963 0.4547 / 0.4);
  --err: color(display-p3 0.8305 0.5495 0.5805); --err-soft: color(display-p3 0.8305 0.5495 0.5805 / 0.13); --err-line: color(display-p3 0.8305 0.5495 0.5805 / 0.45);
  --info: color(display-p3 0.6021 0.7021 0.8779); --info-soft: color(display-p3 0.3745 0.5128 0.7489 / 0.14);
  --shadow-pop: 0 14px 34px color(display-p3 0 0 0 / 0.45), 0 0 0 1px var(--line-strong);
  --box-shadow: 0 1px 2px color(display-p3 0 0 0 / 0.3), 0 8px 24px color(display-p3 0 0 0 / 0.25);
  --grid-line: color(display-p3 0.6021 0.7021 0.8779 / 0.045); --card-edge: color(display-p3 1 1 1 / 0.08);
}
:root, :root[data-theme="light"] {
  --font: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --navy-deep: color(display-p3 0.035 0.06 0.13); --navy: color(display-p3 0.06 0.1 0.22); --navy-2: color(display-p3 0.1 0.16 0.32); --blue: color(display-p3 0.24 0.33 0.52);
  --silver: linear-gradient(180deg, color(display-p3 0.975 0.979 0.985) 0%, color(display-p3 0.865 0.878 0.898) 100%);
  --grad: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 45%, var(--navy-2) 100%);
  --spring: cubic-bezier(.34, 1.56, .64, 1); --side: 92px; --top: 0px;
  --sec-0: var(--navy); --sec-1: color(display-p3 0.24 0.33 0.52); --sec-2: color(display-p3 0.45 0.51 0.61); --sec-3: color(display-p3 0.16 0.23 0.4); --sec-4: color(display-p3 0.6 0.65 0.73); --sec-5: color(display-p3 0.33 0.4 0.53);
  --t-task: color(display-p3 0.2783 0.4036 0.6401); --t-subitem: color(display-p3 0.4705 0.433 0.6357); --t-update: color(display-p3 0.3542 0.5352 0.5706); --t-external: var(--warn); --t-note: var(--text-2);
}
html, body { font-family: var(--font); letter-spacing: 0; font-feature-settings: normal; }
body.hub-body { background-color: var(--bg); }

/* ===== Frame: the monday mock-up's rail, in navy: who's signed in, then the sections, light or dark and Security at the foot.
   The page sits to the right with its title on the page. No top bar. ===== */
.hub { display: flex; min-height: 100vh; }
.hub-side { position: fixed; inset: 0 auto 0 0; width: var(--side); z-index: 30; display: flex; flex-direction: column; align-items: center; padding: 16px 0; background: var(--navy); }
:root:not([data-theme="light"]) .hub-side { background: color(display-p3 0.065 0.095 0.175); border-right: 1px solid color(display-p3 1 1 1 / .06); }
.hub-nav { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; overflow-y: auto; scrollbar-width: none; }
.hub-foot-nav { flex: none; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; padding-top: 16px; }
.hub-div { flex: none; width: 40px; height: 1px; background: color(display-p3 1 1 1 / .14); }
.hub-nav [data-nav], .hub-navbtn, .hub-foot-nav [data-nav] { position: relative; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: 0; background: none;
  color: color(display-p3 1 1 1 / .7); font: 500 13px/16px var(--font); text-decoration: none; cursor: pointer; transition: color .2s; }
.hub-side i { width: 40px; height: 36px; display: grid; place-items: center; border-radius: 8px; transition: background-color .2s, transform .5s var(--spring); }
.hub-side i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hub-side [data-nav]:hover, .hub-navbtn:hover { color: color(display-p3 1 1 1); }
.hub-side [data-nav]:hover i, .hub-navbtn:hover i { background: color(display-p3 1 1 1 / .08); }
.hub-side [data-nav].on, .hub-bell:has(.notes:not([hidden])) .hub-navbtn { color: color(display-p3 1 1 1); font-weight: 600; }
.hub-side [data-nav].on i, .hub-bell:has(.notes:not([hidden])) .hub-navbtn i { background: color(display-p3 1 1 1 / .15); }
.hub-side:has(.notes:not([hidden])) [data-nav].on { color: color(display-p3 1 1 1 / .7); font-weight: 500; }
.hub-side:has(.notes:not([hidden])) [data-nav].on i { background: none; }
.hub-side [data-nav]:active i, .hub-navbtn:active i { transform: scale(.86); transition-duration: .1s; }
.hub-navbtn .badge { position: absolute; top: -5px; left: 48px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: color(display-p3 0.886 0.267 0.361); color: color(display-p3 1 1 1); font-size: 11px; font-weight: 700; line-height: 1; }
.hub-bell { position: static; }
.hub-side .notes { position: fixed; left: calc(var(--side) + 10px); top: 12px; right: auto; width: min(400px, calc(100vw - var(--side) - 24px)); max-height: calc(100vh - 24px); z-index: 60; color: var(--text); text-align: left; font: 400 14px var(--font); }
.hub-side .alerts-pill { display: none !important; }
.hub-side .conns:empty { display: none; }
.hub-side .conn.alert { max-width: 80px; height: auto; padding: 4px 8px; white-space: normal; text-align: center; line-height: 1.25; border: 0; background: color(display-p3 0.8305 0.5495 0.5805 / 0.22); color: color(display-p3 0.98 0.86 0.87); }
.hub-side .conn .long { display: none; }
/* Who's signed in: avatar and first name at the top; the account menu opens beside it */
.hub-user { position: relative; }
.hub-me { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: color(display-p3 1 1 1); cursor: pointer; text-decoration: none; transition: transform .5s var(--spring); }
.hub-me:active { transform: scale(.94); transition-duration: .1s; }
.hub-me .avatar, :root[data-theme="light"] .hub-me .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--silver); color: var(--navy); display: grid; place-items: center; font: 700 15px var(--font); box-shadow: none; transition: box-shadow .2s; }
.hub-me:hover .avatar { box-shadow: 0 0 0 3px color(display-p3 1 1 1 / .18); }
.hub-me-n { max-width: 80px; font-size: 13px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-user .acct { position: fixed; top: 12px; bottom: auto; left: calc(var(--side) + 10px); right: auto; width: 290px; text-align: left; }
.acct .avatar { border-radius: 50%; background: var(--navy); color: color(display-p3 1 1 1); }

.hub-main { flex: 1; min-width: 0; margin-left: var(--side); display: flex; flex-direction: column; min-height: 100vh; }
/* The page title: plain text on the page */
.hub .hub-top { padding: 36px 40px 0; }
.hub-title { min-width: 0; }
.hub-title h1, .hub-hero h2 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; color: var(--text-strong); letter-spacing: -.02em; }
.hub-title p, .hub-hero p { margin: 6px 0 0; max-width: 680px; font-size: 15.5px; color: var(--text-2); }
.hub-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13.5px; color: var(--text-3); }
.hub-crumbs a { color: var(--text-2); text-decoration: none; transition: color .15s; }
.hub-crumbs a:hover { color: var(--accent-text); }
.hub-crumbs i { font-style: normal; color: var(--text-3); }

.hub-content { flex: 1; padding: 28px 40px 48px; }
body[data-page="ask"] .hub-content { padding: 0; }
.hub-foot { padding: 18px 40px; text-align: right; font-size: 13px; color: var(--text-3); }
.hub-page.enter { animation: hubIn .4s cubic-bezier(.2,.8,.2,1) backwards; } /* backwards, not both: a transform left in place after the animation would trap fixed bars (the sign-off bar) inside the page */
@keyframes hubIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hub-soon { max-width: 560px; }
.hub-soon h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: var(--text-strong); }
.hub-soon p { margin: 0 0 18px; color: var(--text-2); }

/* ===== Building blocks ===== */
.hub-card { position: relative; background: var(--surface); border: 1px solid var(--card-edge); border-radius: 16px; padding: 24px; box-shadow: var(--box-shadow); }
.hub-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 11px; background: var(--grad); color: color(display-p3 1 1 1); font: 600 15px var(--font); text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px color(display-p3 0.05 0.1 0.25 / 0.2), inset 0 1px 0 color(display-p3 1 1 1 / .14); transition: transform .5s var(--spring), box-shadow .2s, filter .2s; }
.hub-btn svg { width: 17px; height: 17px; transition: transform .35s var(--spring); }
.hub-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px color(display-p3 0.05 0.1 0.3 / 0.22), inset 0 1px 0 color(display-p3 1 1 1 / .18); filter: brightness(1.07); color: color(display-p3 1 1 1); }
.hub-btn:hover svg:last-child { transform: translateX(3px); }
.hub-btn:active { transform: scale(.94); box-shadow: 0 1px 2px color(display-p3 0.05 0.1 0.25 / 0.2); transition-duration: .1s; }
.hub-btn:disabled { opacity: .5; cursor: default; transform: none; filter: none; }
.hub-btn.ghost { background: var(--surface); color: var(--accent-text); border: 1px solid var(--line-strong); box-shadow: var(--shadow-1); }
.hub-btn.ghost:hover { border-color: var(--accent-line); color: var(--accent-hover); background: var(--accent-soft); }
.hub-btn.sm { height: 38px; padding: 0 14px; font-size: 13.5px; border-radius: 10px; }
.hub-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-strong); }
.hub-chip i, .tc-state i { width: 7px; height: 7px; border-radius: 50%; background: color(display-p3 0.4038 0.6777 0.5053); box-shadow: 0 0 0 3px color(display-p3 0.4038 0.6777 0.5053 / 0.18); }
.hub-search { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-3); min-width: 240px; transition: border-color .2s, box-shadow .2s; }
.hub-search:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); }
.hub-search input { border: 0; padding: 0; background: none; height: 100%; box-shadow: none; color: var(--text-strong); font-size: 14px; }
.hub-search input:focus { box-shadow: none; }

/* The title block on Tools and Clients */
.hub-hero { margin-bottom: 32px; }







.hub-sec { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
.hub-sec h2 { margin: 0; font-size: 22px; font-weight: 600; color: var(--text-strong); letter-spacing: -.01em; }
.hub-sec p { margin: 2px 0 0; color: var(--text-2); font-size: 14.5px; }
.hub-seg { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--card-edge); box-shadow: var(--shadow-1); }
.hub-seg button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font: 600 14px var(--font); cursor: pointer; transition: background-color .2s, color .2s; }
.hub-seg button.on { background: var(--navy); color: color(display-p3 1 1 1); }
.hub-seg button { transition: background-color .2s, color .2s, transform .5s var(--spring); }
.hub-seg button:active { transform: scale(.93); transition-duration: .1s; }

/* Tool cards */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.hub-card.tool, .hub-card.prompt { display: flex; flex-direction: column; padding: 22px; overflow: hidden; transition: transform .5s var(--spring), box-shadow .25s, border-color .2s; }

.hub-card.tool:hover, .hub-card.prompt:hover { transform: translateY(-3px); box-shadow: 0 1px 2px color(display-p3 0.1 0.17 0.32 / 0.04), 0 14px 30px color(display-p3 0.1 0.17 0.32 / 0.09); border-color: var(--line-strong); }
.tc-top { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.tc-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--silver); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 color(display-p3 1 1 1); color: var(--navy); transition: transform .5s var(--spring); }
.tc-ico svg { width: 22px; height: 22px; stroke-width: 1.8; }
.tc-ico.sm { width: 40px; height: 40px; border-radius: 12px; }
.tc-ico.sm svg { width: 19px; height: 19px; }

.tc-state { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 12px; font-weight: 600; }
.tc-state.wait { background: var(--warn-soft); color: var(--warn); }
.tc-state.wait i { background: color(display-p3 0.7629 0.6337 0.3937); box-shadow: 0 0 0 3px color(display-p3 0.7629 0.6337 0.3937 / 0.2); }
.tc-num { min-width: 34px; height: 24px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.hub-card.tool h3, .hub-card.prompt h3 { margin: 0 0 6px; font-size: 19px; font-weight: 600; color: var(--text-strong); letter-spacing: -.01em; }
.hub-card.tool p, .hub-card.prompt p { margin: 0 0 18px; color: var(--text-2); font-size: 15px; line-height: 1.55; flex: 1; }
.tc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tc-tags span, .hr-tags span { height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--sunk); font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.hub-card.tool .hub-btn { width: 100%; }
.hub-card.tool:hover .hub-btn.ghost { border-color: var(--accent-line); color: var(--accent-hover); }
.hub-card.tool.soon .tc-ico { background: var(--raised); color: var(--text-3); }

.hub-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--card-edge); border-radius: 16px; box-shadow: var(--box-shadow); overflow: hidden; }
.hub-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; transition: background-color .15s, padding-left .3s var(--spring); }
.hub-row:first-child { border-top: 0; }
.hub-row:hover { background: var(--accent-soft); padding-left: 26px; }
.hub-row > svg { color: var(--accent-text); }
.hr-t { flex: 1; min-width: 0; }
.hr-t b { display: block; font-size: 16px; font-weight: 600; color: var(--text-strong); }
.hr-t small { display: block; font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-tags { display: flex; gap: 6px; }
@media (max-width: 1100px) { .hr-tags { display: none; } }

/* A tool's own page: the guide, the launch panel, then the results */
.tool-head { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 22px; align-items: start; margin-bottom: 22px; }

.tg-h { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.tg-h h2, .launch h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--text-strong); }
.tg-h .why { margin: 2px 0 0; font-size: 14px; }
.tg-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 12px; }
.tg-steps li { counter-increment: s; display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--text); }
.tg-steps li::before { content: counter(s); flex: none; width: 28px; height: 28px; margin-top: -2px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 700; }
.launch { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; }
.launch .why { margin: 0; font-size: 13px; }
.launch .errline { margin: 0; min-height: 0; }
.hub-field span { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.hub-field select { width: 100%; height: 46px; padding: 0 40px 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2363728b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; appearance: none; -webkit-appearance: none; font: 500 15px var(--font); color: var(--text-strong); cursor: pointer; }
.hub-field select:focus { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); }
.hub-card.hub-stage { padding: 28px; scroll-margin-top: 24px; }
.hub-card.hub-stage .msg-b { min-width: 0; overflow-x: auto; }
@media (max-width: 1000px) { .tool-head { grid-template-columns: 1fr; } .launch { position: static; } }

/* Client Wiki's */
.hub-grid.wiki { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.hub-card.wcard { display: flex; align-items: center; gap: 14px; padding: 16px; overflow: hidden; text-decoration: none; color: var(--text); transition: transform .5s var(--spring), box-shadow .25s, border-color .2s; }

.hub-card.wcard:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color(display-p3 0.1 0.17 0.32 / 0.08); border-color: var(--line-strong); }
.hub-card.tool:active, .hub-card.prompt:active, .hub-card.wcard:not(.none):active { transform: scale(.98); transition-duration: .1s; }

.hub-card.wcard > svg { color: var(--accent-text); transition: transform .35s var(--spring); }
.hub-card.wcard:hover > svg { transform: translateX(3px); }
.hub-card.wcard.none { opacity: .55; box-shadow: none; cursor: default; }
.hub-card.wcard.none:hover { transform: none; border-color: var(--card-edge); }
.wc-ini { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--silver); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 color(display-p3 1 1 1); color: var(--navy); font-weight: 600; font-size: 15px; }
.wcard.none .wc-ini { background: var(--raised); color: var(--text-2); }
.wc-ini.lg { width: 60px; height: 60px; border-radius: 16px; font-size: 21px; }
.wc-t { flex: 1; min-width: 0; }
.wc-t b { display: block; font-size: 15.5px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-t small { display: block; font-size: 13px; color: var(--text-2); }

.wiki-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.wh-t { flex: 1; min-width: 240px; }
.wh-t h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); }
.wh-t .why { margin: 4px 0 0; font-size: 14px; }
.wh-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.wiki-pills { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 12px 0; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(180deg, var(--bg) 80%, transparent); }
.wiki-pills::-webkit-scrollbar { display: none; }
.hub-search.pill { min-width: 220px; height: 38px; border-radius: 999px; flex: none; }
.wp-div { width: 1px; height: 24px; background: var(--line-strong); flex: none; margin: 0 4px; }
.wp { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: 500 14px var(--font); cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s, transform .35s var(--spring); }
.wp:hover { transform: translateY(-1px); border-color: var(--c, var(--accent-line)); }
.wp:active { transform: scale(.93); transition-duration: .1s; }
.wp i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.wp small { font-size: 12px; color: var(--text-3); font-weight: 600; }
.wp.on { background: var(--c, var(--navy)); border-color: var(--c, var(--navy)); color: color(display-p3 1 1 1); }
.wp.on i { background: color(display-p3 1 1 1); }
.wp.on small { color: color(display-p3 1 1 1 / 0.8); }
.wiki-body { display: flex; flex-direction: column; gap: 16px; }
.wsec { padding: 22px 26px; }
.wsec h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 18px; font-weight: 600; color: var(--text-strong); }
.wsec h3 i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.wsec.notes { --c: var(--warn); background: linear-gradient(180deg, var(--warn-soft), var(--surface) 70%); }
.wsec.dim { box-shadow: none; background: var(--sunk); }
.wf { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--text); }
.wf:first-of-type { border-top: 0; }
.wf-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.wf-src .src, .wf .src { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--raised); border: 1px solid var(--line); color: var(--text-2); font-size: 11.5px; font-weight: 600; text-decoration: none; transition: background-color .15s, color .15s; }
.wf a.src:hover { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-line); }
.asof { margin-left: 4px; }
.wf .src::before { content: none; }
.wf-src .src { margin-top: 0; gap: 0; }
.wd-back { margin-bottom: 16px; }

/* ===== Ask InspireOS: the conversation inside the frame ===== */
.hub .shell { min-height: calc(100vh - 120px); }
.hub .shell[data-mode="chat"] .composer-wrap { background: linear-gradient(180deg, color(display-p3 0 0 0 / 0), var(--bg) 26%); }
.hub .aura { left: var(--side); width: auto; right: 0; }
.hub .thread { padding-top: 24px; }
.hub .msg-b .card, .hub .composer .field { border-radius: 16px; }
.hub .composer .field { background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 10px 30px color(display-p3 0.1025 0.1741 0.3222 / 0.1); }
.hub .composer .field:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft), 0 10px 30px color(display-p3 0.1025 0.1741 0.3222 / 0.1); }
.hub .go { background: var(--grad); border-radius: 12px; transition: transform .35s var(--spring), filter .2s; }
.hub .go:hover { transform: scale(1.06); filter: brightness(1.08); }
.hub .go:active { transform: scale(.92); }
.hub .msg .av.os-av.orb, .hub .msg .av.orb { background: radial-gradient(circle at 34% 28%, color(display-p3 0.9076 0.9323 0.9794) 0%, color(display-p3 0.6448 0.73 0.8872) 22%, color(display-p3 0.3525 0.4932 0.7331) 50%, color(display-p3 0.1938 0.287 0.4829) 78%, color(display-p3 0.0929 0.151 0.2805) 100%); }
.hub .msg .av:not(.orb), .hub .sk-av { background: linear-gradient(140deg, color(display-p3 0.3525 0.4932 0.7331), color(display-p3 0.1938 0.287 0.4829)); border-radius: 50%; }
.hub .scope-tag, .hub .token { border-radius: 999px; }

/* Buttons inside the tools: navy gradient and the same spring */
.hub .btn:not(.alt) { background: var(--grad); color: color(display-p3 1 1 1); box-shadow: 0 4px 12px color(display-p3 0.1938 0.287 0.4829 / 0.2); }
.hub .btn { border-radius: 10px; transition: transform .5s var(--spring), box-shadow .2s, filter .2s, background-color .15s; }
.hub .btn:not(:disabled):hover { transform: translateY(-1px); }
.hub .btn:not(.alt):not(:disabled):hover { box-shadow: 0 8px 18px color(display-p3 0.1938 0.287 0.4829 / 0.28); filter: brightness(1.06); }
.hub .btn:not(:disabled):active { transform: scale(.94); transition-duration: .1s; }
.drawer, .acct, .notes, .menu { font-family: var(--font); }
.drawer .btn:not(.alt) { background: var(--grad); color: color(display-p3 1 1 1); }

@media (max-width: 860px) {
  :root { --side: 0px; }
  .hub-side { inset: auto 0 0 0; width: 100%; height: 64px; flex-direction: row; padding: 0 6px; }
  .hub-nav { flex-direction: row; justify-content: space-around; overflow: visible; }
  .hub-foot-nav, .hub-user, .hub-div, .hub-side [data-nav="pipeline"], .hub-side [data-nav="reports"] { display: none; }
  .hub-nav [data-nav], .hub-navbtn { width: 64px; font-size: 11.5px; }
  .hub-side .notes { left: 8px; right: 8px; top: auto; bottom: 72px; width: auto; max-height: 70vh; }
  .hub-main { margin-left: 0; padding-bottom: 64px; }
  .hub .hub-top { padding: 20px 16px 0; }
  .hub-content { padding: 20px 16px 32px; }
  .hub-title h1, .hub-hero h2 { font-size: 26px; }
  .hub-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hub *, .hub *::before, .hub *::after { transition: none !important; animation: none !important; }
  .hub-card:hover, .hub-btn:hover, .wp:hover { transform: none !important; }
}

/* Dark: the silver tiles become brushed steel */
:root:not([data-theme="light"]) .tc-ico, :root:not([data-theme="light"]) .wc-ini { background: linear-gradient(180deg, color(display-p3 0.2 0.24 0.31), color(display-p3 0.12 0.15 0.21)); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--accent-text); }

/* ===== Review fixes, 11 Nov ===== */
/* Dark: silver buttons and selected states on navy, so they don't vanish */
:root:not([data-theme="light"]) .hub-btn:not(.ghost), :root:not([data-theme="light"]) .hub .btn:not(.alt), :root:not([data-theme="light"]) .hub-seg button.on, :root:not([data-theme="light"]) .hub .go { background: var(--silver); color: var(--navy-deep); box-shadow: none; }
:root:not([data-theme="light"]) .hub-btn.ghost { background: var(--raised); border-color: var(--line-strong); color: var(--text-strong); }
:root:not([data-theme="light"]) .wp.on { background: var(--silver); border-color: transparent; color: var(--navy-deep); }
:root:not([data-theme="light"]) .wp.on i { background: var(--navy); }
/* One title size per level: page 30, section 20, card 18 */
.hub-sec h2 { font-size: 20px; }
.hub-card.tool h3, .tg-h h2, .launch h2, .wsec h3, .wh-t h2 { font-size: 18px; }
.hub-card.tool h3 { margin-bottom: 6px; }
.hub-chip { text-transform: none; letter-spacing: 0; font-size: 13px; }
/* Tool page: the guide and the launch card the same height */
.tool-head { align-items: stretch; }
/* Results read at the frame's size, without a card inside the card */
.hub-stage .msg-b { font-size: 15px; }
.hub-stage .why, .hub-stage .ta-h { font-size: 13.5px; }
.hub-stage .xp-card { max-width: none; border: 0; background: none; padding: 0; box-shadow: none; }
.hub-stage .plan-box { max-height: none; overflow: visible; }
.hub .xp-card .xp-sec .xp-step { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
/* Client wiki: the header card is the title; one navy for the selected pill, no coloured squares */
body[data-page="client"] .hub-title h1, body[data-page="client"] .hub-title p { display: none; }
body[data-page="client"] .hub-crumbs { margin-bottom: 0; }
.wh-t h2 { font-size: 26px; font-weight: 700; }
.wp.on { background: var(--navy); border-color: var(--navy); }
.wsec h3 i { display: none; }
.wsec.notes { background: var(--warn-soft); }
.wf > :first-child { max-width: 80ch; }
.wiki-pills { -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent); }
.hub-grid.wiki { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* Document view: one sheet, in the hub's type */
.hub-stage:has(.bd-sheet) { padding: 0; border: 0; background: none; box-shadow: none; }
.hub .bd-sheet { border-radius: 16px; border-color: var(--card-edge); background: var(--surface); }
.hub .bd-bar, .hub .bd-bar .btn { font-family: var(--font); font-size: 13.5px; }
.hub .bd-page { max-height: none; margin: 0; padding: 32px 40px; border: 0; box-shadow: none; font: 400 15px/1.6 var(--font); }
.hub .bd-page .bd-head { font: 400 14px/1.6 var(--font); }
.hub .bd-page .bd-head::first-line { letter-spacing: 0; color: var(--text-strong); }
.hub .bd-page h3 { font: 600 17px/1.4 var(--font); letter-spacing: 0; text-transform: none; margin-top: 28px; }
.hub .bd-page h3::before { content: none; }
.hub .bd-page p { max-width: 80ch; }
/* Inbox panel */
.hub-side .notes .notes-head { padding: 12px 14px 8px; font: 600 16px var(--font); color: var(--text-strong); }

/* ===== Navy, silver and white throughout (Si, 11 Nov): the tools' own screens drop monday's colours.
   Status and type colours become navy and silver shades; only errors keep a muted red. ===== */
:root[data-theme="light"] {
  --ok: color(display-p3 0.1 0.17 0.34); --ok-soft: color(display-p3 0.918 0.928 0.945); --ok-line: color(display-p3 0.77 0.8 0.85);
  --warn: color(display-p3 0.33 0.38 0.47); --warn-soft: color(display-p3 0.945 0.95 0.958); --warn-line: color(display-p3 0.8 0.82 0.86);
  --info: color(display-p3 0.1 0.17 0.34); --info-soft: color(display-p3 0.918 0.928 0.945);
  --t-task: color(display-p3 0.06 0.1 0.22); --t-subitem: color(display-p3 0.24 0.31 0.46); --t-update: color(display-p3 0.38 0.44 0.54); --t-external: color(display-p3 0.16 0.23 0.38); --t-note: var(--text-3);
  --diff-add: color(display-p3 0.86 0.88 0.92); --diff-del: color(display-p3 0.55 0.2 0.22);
}
:root:not([data-theme="light"]) {
  --ok: color(display-p3 0.82 0.86 0.92); --ok-soft: color(display-p3 1 1 1 / 0.07); --ok-line: color(display-p3 1 1 1 / 0.18);
  --warn: color(display-p3 0.68 0.72 0.79); --warn-soft: color(display-p3 1 1 1 / 0.05); --warn-line: color(display-p3 1 1 1 / 0.14);
  --info: color(display-p3 0.78 0.83 0.9); --info-soft: color(display-p3 1 1 1 / 0.07);
  --t-task: color(display-p3 0.9 0.92 0.96); --t-subitem: color(display-p3 0.72 0.77 0.85); --t-update: color(display-p3 0.6 0.65 0.73); --t-external: color(display-p3 0.8 0.84 0.9); --t-note: var(--text-3);
  --diff-add: color(display-p3 1 1 1 / 0.1); --diff-del: color(display-p3 0.85 0.5 0.53);
}
/* The InspireOS orb: deep navy with a soft silver sheen */
.hub .orb, .hub .msg .av.os-av.orb, .hub .msg .av.orb { background: radial-gradient(circle at 34% 28%, color(display-p3 0.62 0.67 0.76) 0%, color(display-p3 0.24 0.3 0.43) 22%, color(display-p3 0.1 0.16 0.31) 48%, var(--navy) 74%, var(--navy-deep) 100%);
  box-shadow: inset 0 calc(var(--o, 32px) * -.12) calc(var(--o, 32px) * .22) color(display-p3 0 0.02 0.08 / 0.6), inset 0 0 0 1px color(display-p3 1 1 1 / 0.1); }
.hub .orb::before { background: conic-gradient(from 0deg, transparent 0 10%, color(display-p3 0.62 0.68 0.78 / 0.55) 20%, transparent 34%, color(display-p3 0.3 0.38 0.55 / 0.6) 55%, transparent 68%, color(display-p3 0.8 0.83 0.88 / 0.35) 84%, transparent 94%); }
.hub .orb > b { background: radial-gradient(circle, color(display-p3 0.7 0.75 0.84 / 0.5), transparent 65%); }
.hub .orb::after { background: radial-gradient(ellipse at 50% 40%, color(display-p3 1 1 1 / 0.6), color(display-p3 1 1 1 / 0) 70%); }
.hub .msg .av:not(.orb), .hub .sk-av { background: var(--navy); }

/* Ask reads as a conversation: what you type sits on the right in a navy block, InspireOS answers on the left */
.hub .msg.me { flex-direction: row-reverse; }
.hub .msg.me .msg-main { display: flex; flex-direction: column; align-items: flex-end; max-width: min(72%, 640px); margin-left: auto; }
.hub .msg.me .msg-h { flex-direction: row-reverse; }
.hub .msg.me .msg-h b { display: none; }
.hub .msg.me .msg-b { padding: 10px 16px; border-radius: 18px 18px 4px 18px; background: var(--navy); color: color(display-p3 1 1 1); font-size: 15px; line-height: 1.5; box-shadow: 0 1px 2px color(display-p3 0.03 0.06 0.15 / 0.2); }
.hub .msg.me .msg-b :is(a, b, strong, code, span) { color: inherit; }
.hub .msg.me .msg-b code { background: color(display-p3 1 1 1 / 0.14); }
.hub .msg.me .msg-b :is(.scope-tag, .token, .tag) { background: color(display-p3 1 1 1 / 0.14); border-color: transparent; color: color(display-p3 1 1 1); }
.hub .msg.me .msg-b svg { color: inherit; stroke: currentColor; }
:root:not([data-theme="light"]) .hub .msg.me .msg-b { background: var(--silver); color: var(--navy-deep); }
:root:not([data-theme="light"]) .hub .msg.me .msg-b :is(.scope-tag, .token, .tag) { background: color(display-p3 0 0.05 0.15 / 0.08); color: var(--navy-deep); }

/* The rail foot only shows a disconnected-connection warning; Theme and Security live in the account menu */
.hub-foot-nav:not(:has(.conn)) { display: none; }
/* Calls to action on the panels: solid navy (Si, 11 Nov); a touch lighter on hover */
.hub-btn:not(.ghost), .hub .btn:not(.alt), .hub .go { background: var(--navy); box-shadow: 0 1px 2px color(display-p3 0.03 0.06 0.15 / 0.25); }
.hub-btn:not(.ghost):hover, .hub .btn:not(.alt):not(:disabled):hover { background: var(--navy-2); filter: none; box-shadow: 0 6px 16px color(display-p3 0.03 0.06 0.15 / 0.22); }
.hub-card.tool:hover .hub-btn:not(.ghost) { background: var(--navy-2); }
/* The icon inside each rounded tile gives a small nudge on hover, never on its own (Si, 11 Nov). Reduced motion turns it off. */
.tc-ico svg, .hub-side i svg { transform-origin: 50% 60%; }
@keyframes icoNudge { 0% { transform: none; } 30% { transform: translateY(-2px) rotate(-8deg) scale(1.08); } 60% { transform: translateY(0) rotate(5deg); } 80% { transform: rotate(-2deg); } 100% { transform: none; } }
@keyframes icoLift { 0% { transform: none; } 40% { transform: translateY(-2px) scale(1.06); } 100% { transform: none; } }
.hub-card.tool:hover .tc-ico svg, .hub-row:hover .tc-ico svg, .tg-h:hover .tc-ico svg { animation: icoNudge .6s cubic-bezier(.3,.7,.3,1); }
.hub-side [data-nav]:hover i svg, .hub-navbtn:hover i svg { animation: icoLift .45s cubic-bezier(.3,.7,.3,1); }
.hub-card.wcard:hover .wc-ini { animation: icoLift .45s cubic-bezier(.3,.7,.3,1); }

/* Second review, 11 Nov */
:root:not([data-theme="light"]) .wp.on { color: var(--navy-deep); }
:root:not([data-theme="light"]) .wp.on small { color: color(display-p3 0.06 0.1 0.22 / 0.7); }
:root:not([data-theme="light"]) .wp i { background: var(--text-2); }
.hub .hub-stage .xs-card.xf-wide.xp-card { max-width: none; }
.hub-me:focus { outline: none; }
.hub-me:focus-visible .avatar { box-shadow: 0 0 0 2px color(display-p3 1 1 1); }
.hub-side .notes .note b { font-weight: 500; }
.hub-side .notes .note.unread b { font-weight: 650; color: var(--text-strong); }

/* ===== Clients (monday mock-up): a panel of favourites and clients beside the page, and a clean table ===== */
.hub-panel { position: fixed; top: 0; bottom: 0; left: var(--side); width: 260px; z-index: 20; overflow-y: auto; padding: 18px 12px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border-right: 1px solid var(--line); }
body.with-panel .hub-main { margin-left: calc(var(--side) + 260px); }
.hp-head { padding: 4px 8px 12px; font-size: 16px; color: var(--text-strong); }
.hp-find { display: flex; align-items: center; gap: 8px; height: 36px; margin: 0 4px 10px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text-3); }
.hp-find input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: none; box-shadow: none; font: 400 14px var(--font); color: var(--text-strong); }
.hp-find input:focus { box-shadow: none; outline: 0; }
.hp-find:focus-within { border-color: var(--accent-line); }
.hp-sec { display: flex; align-items: center; gap: 8px; height: 32px; margin-top: 8px; padding: 0 8px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--text-strong); text-decoration: none; }
.hp-sec svg { width: 15px; height: 15px; color: var(--text-2); }
.hp-sec small { margin-left: auto; font-weight: 500; color: var(--text-3); }
a.hp-sec:hover { background: var(--raised); }
.hp-sec.on { background: var(--accent-soft); }
.hp-item { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px 0 20px; border-radius: 6px; font-size: 14px; color: var(--text); text-decoration: none; transition: background-color .15s; }
.hp-item svg { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.hp-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.hp-item:hover { background: var(--raised); }
.hp-item.on { background: var(--accent-soft); color: var(--text-strong); font-weight: 600; }
.hp-item.on svg { color: var(--navy); }
.hp-item.none { color: var(--text-3); }
.hp-empty { margin: 2px 0 4px; padding: 0 10px 0 20px; font-size: 13px; color: var(--text-3); }

.ct-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ct-count { margin-left: auto; font-size: 13px; color: var(--text-3); }
.ct-table { background: var(--surface); border: 1px solid var(--card-edge); border-radius: 10px; overflow-x: auto; }
.ct-row { display: grid; grid-template-columns: minmax(200px, 1.6fr) 104px 88px 108px minmax(150px, 1.8fr) 116px; min-width: 780px; min-height: 52px; align-items: stretch; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--text); }
.ct-row:last-child { border-bottom: 0; }
.ct-row > span { display: flex; align-items: center; min-width: 0; padding: 0 14px; border-left: 1px solid var(--line); }
.ct-row > span:first-child { border-left: 0; }
.ct-row .ct-c { justify-content: center; text-align: center; }
.ct-row i { font-style: normal; color: var(--text-3); }
.ct-head { min-height: 40px; font-size: 13px; color: var(--text-2); background: var(--sunk); border-radius: 10px 10px 0 0; }
.ct-row[data-href] { cursor: pointer; transition: background-color .12s; }
.ct-row[data-href]:hover { background: var(--accent-soft); }
.ct-row[data-href]:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; }
.ct-row.none { color: var(--text-3); }
.ct-name { gap: 10px; }
.ct-name b { font-weight: 500; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-row.none .ct-name b { color: var(--text-3); }
.ct-name .wc-ini { width: 30px; height: 30px; border-radius: 8px; font-size: 12px; }
.ct-mood { font-size: 14px; color: var(--text-2); }
.ct-mood:not(:has(i)) { display: block !important; line-height: 52px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--raised); font-size: 12.5px; color: var(--text-3); }
.ct-star { width: 24px; height: 24px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, transform .4s var(--spring); }
.ct-star svg { width: 16px; height: 16px; }
.ct-row:hover .ct-star, .ct-star.on, .ct-star:focus-visible, .wh-t .ct-star { opacity: 1; }
.ct-star.on { color: var(--navy); }
.ct-star.on svg { fill: currentColor; }
.ct-star:active { transform: scale(.8); transition-duration: .1s; }
:root:not([data-theme="light"]) .ct-star.on { color: var(--text-strong); }
.wh-t h2 { display: flex; align-items: center; gap: 8px; }
@media (max-width: 1100px) { .hub-panel { display: none; } body.with-panel .hub-main { margin-left: var(--side); } }
/* Ask: only one person types here, so their own messages carry no avatar */
.hub .msg.me > .av { display: none; }

/* ===== A client's page (monday mock-up): header, tabs, tiles, boxes, board, meetings, activity ===== */
body[data-page="client"] .hub-title h1, body[data-page="client"] .hub-title p { display: none; }
body[data-page="client"] .hub-crumbs { margin-bottom: 0; }
body[data-page="client"] .hub-content { padding-top: 18px; }
.cp-loading { padding: 40px 0; color: var(--text-3); }
.cp-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cp-ini { width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--silver); box-shadow: inset 0 0 0 1px var(--line); color: var(--navy); font: 700 18px var(--font); }
:root:not([data-theme="light"]) .cp-ini { background: var(--raised); color: var(--text-strong); }
.cp-t { flex: 1; min-width: 240px; }
.cp-t h1 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); }
.cp-t p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
.cp-acts { display: flex; gap: 10px; align-items: center; }
.cp-run { position: relative; }
.cp-run .hub-btn svg:last-child { width: 15px; height: 15px; }
.cp-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 330px; padding: 6px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-pop); }
.cp-menu p { margin: 6px 10px 8px; font-size: 12.5px; color: var(--text-3); }
.cp-menu a { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); }
.cp-menu a:hover { background: var(--accent-soft); }
.cp-menu b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.cp-menu small { display: block; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.cp-tabs { display: flex; gap: 2px; margin: 0 0 22px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.cp-tabs a { flex: none; height: 42px; display: flex; align-items: center; padding: 0 14px; border-radius: 8px 8px 0 0; font: 500 15px var(--font); color: var(--text-2); text-decoration: none; box-shadow: inset 0 -2px 0 transparent; transition: color .15s, background-color .15s, box-shadow .2s; }
.cp-tabs a:hover { color: var(--text-strong); background: var(--accent-soft); }
.cp-tabs a[aria-selected="true"] { color: var(--text-strong); box-shadow: inset 0 -2px 0 var(--navy); }
:root:not([data-theme="light"]) .cp-tabs a[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--text-strong); }
.cp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cp-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--card-edge); border-radius: 12px; }
.cp-tile span { font-size: 13px; color: var(--text-2); }
.cp-tile b { font-size: 20px; line-height: 1.25; font-weight: 600; color: var(--text-strong); }
.cp-tile small { font-size: 12.5px; color: var(--text-3); }
.cp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.cp-main, .cp-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cp-box { padding: 18px 20px; background: var(--surface); border: 1px solid var(--card-edge); border-radius: 12px; }
.cp-box > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cp-box h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-strong); }
.cp-box h4 { margin: 14px 0 6px; font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.cp-p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text); max-width: 80ch; }
.cp-empty { margin: 0; font-size: 14px; color: var(--text-3); }
.cp-link { font-size: 13.5px; font-weight: 500; color: var(--accent-text); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.cp-link:hover { text-decoration: underline; }
.cp-link svg { width: 13px; height: 13px; }
.cp-list { margin: 0; padding: 0; list-style: none; }
.cp-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.cp-list li:first-child { border-top: 0; padding-top: 2px; }
.cp-li-t { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.cp-li-t small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-3); }
.cp-who { flex: none; min-width: 64px; height: 22px; margin-top: 1px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 12px; font-weight: 600; }
.cp-who.us { background: var(--navy); color: color(display-p3 1 1 1); }
.cp-who.them { background: var(--raised); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="light"]) .cp-who.us { background: var(--silver); color: var(--navy-deep); }
.cp-bul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.cp-act { margin: 0; padding: 0; list-style: none; }
.cp-act li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: var(--text); }
.cp-act li:first-child { border-top: 0; }
.cp-act li > span:first-child { display: inline-block; min-width: 70px; margin-right: 8px; font-size: 12.5px; color: var(--text-3); }
.cp-act small { display: block; font-size: 12.5px; color: var(--text-3); }
.cp-keys { margin: 0; padding: 0; list-style: none; }
.cp-keys li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--text); }
.cp-keys li:first-child { border-top: 0; padding-top: 0; }
.cp-links { margin: 0; padding: 0; list-style: none; }
.cp-links li { padding: 6px 0; }
.cp-links a { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--accent-text); text-decoration: none; }
.cp-links a:hover { text-decoration: underline; }
.cp-links svg { width: 13px; height: 13px; }
.cp-docbar { margin-top: 16px; }
@media (max-width: 1200px) { .cp-cols { grid-template-columns: 1fr; } }

/* Board tab: monday groups, navy and silver */
.bd-group { margin-bottom: 18px; }
.bd-gh { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 4px 6px; border: 0; background: none; cursor: pointer; font: 600 16px var(--font); color: var(--g, var(--navy)); }
:root:not([data-theme="light"]) .bd-gh { color: var(--text-strong); }
.bd-gh svg { width: 16px; height: 16px; transition: transform .2s; }
.bd-gh[aria-expanded="false"] svg { transform: rotate(-90deg); }
.bd-gh small { font: 500 13px var(--font); color: var(--text-3); }
.bd-table { background: var(--surface); border: 1px solid var(--card-edge); border-left: 4px solid var(--g, var(--navy)); border-radius: 8px; overflow-x: auto; }
.bd-row { display: grid; grid-template-columns: minmax(280px, 1fr) 90px 140px 100px 70px; min-width: 700px; min-height: 40px; align-items: stretch; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--text); }
.bd-row > span { display: flex; align-items: center; min-width: 0; padding: 0 10px; border-left: 1px solid var(--line); }
.bd-row > span:first-child { border-left: 0; }
.bd-c { justify-content: center; }
.bd-head { min-height: 34px; font-size: 12.5px; color: var(--text-2); }
.bd-name { gap: 6px; }
.bd-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-row.sub { background: var(--sunk); font-size: 14px; }
.bd-row.sub .bd-name { padding-left: 46px; }
.bd-tog, .bd-tog-sp { flex: none; width: 34px; }
.bd-tog { display: inline-flex; align-items: center; gap: 1px; height: 24px; padding: 0 4px; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; }
.bd-tog:hover { background: var(--raised); }
.bd-tog svg { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .2s; }
.bd-tog.open svg { transform: none; }
.bd-tog small { font-size: 11.5px; }
.bd-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: color(display-p3 1 1 1); font: 600 11.5px var(--font); }
.bd-av.none { background: none; box-shadow: inset 0 0 0 1px dashed var(--line-strong); border: 1px dashed var(--line-strong); }
:root:not([data-theme="light"]) .bd-av { background: var(--silver); color: var(--navy-deep); }
.bd-st { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 28px; padding: 0 8px; border-radius: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.bd-st.done { background: var(--navy); color: color(display-p3 1 1 1); }
.bd-st.work { background: var(--navy-2); color: color(display-p3 1 1 1); }
.bd-st.out { background: var(--blue); color: color(display-p3 1 1 1); }
.bd-st.qc { background: color(display-p3 0.55 0.6 0.69); color: color(display-p3 1 1 1); }
.bd-st.todo { background: var(--raised); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
.bd-st.stuck { background: var(--err-soft); color: var(--err); }
:root:not([data-theme="light"]) .bd-st.done { background: var(--silver); color: var(--navy-deep); }

/* Meetings tab */
.mt-list { display: flex; flex-direction: column; gap: 10px; }
.mt-row { background: var(--surface); border: 1px solid var(--card-edge); border-radius: 12px; overflow: hidden; }
.mt-h { width: 100%; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto 18px; gap: 16px; align-items: center; padding: 14px 18px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.mt-h:hover { background: var(--accent-soft); }
.mt-h > svg { width: 16px; height: 16px; color: var(--text-3); transition: transform .2s; }
.mt-h[aria-expanded="true"] > svg { transform: rotate(180deg); }
.mt-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 12px; background: var(--silver); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; color: var(--text-2); }
.mt-date b { font-size: 20px; line-height: 1; color: var(--navy); }
:root:not([data-theme="light"]) .mt-date { background: var(--raised); } :root:not([data-theme="light"]) .mt-date b { color: var(--text-strong); }
.mt-t b { display: block; font-size: 15.5px; font-weight: 600; color: var(--text-strong); }
.mt-t small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.mt-meta { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.mt-b { padding: 4px 18px 18px 92px; display: flex; flex-direction: column; gap: 4px; }
.mt-b .hub-btn { align-self: flex-start; margin-top: 12px; }

/* Website & SEO and Files */
.ct-table.seo .ct-row { grid-template-columns: minmax(260px, 1fr) 120px 140px 120px; min-width: 640px; }
.seo-p { flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 1px; padding-top: 8px !important; padding-bottom: 8px !important; }
.seo-p b { font-weight: 500; color: var(--text-strong); }
.seo-p small { font-size: 12.5px; color: var(--text-3); }
.ct-table.seo .bd-st { width: auto; min-width: 80px; height: 24px; }
.fp-rooms { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fp-rooms li { display: grid; grid-template-columns: 120px 70px 1fr; align-items: center; gap: 12px; font-size: 14.5px; }
.fp-rooms b { text-align: right; font-weight: 600; color: var(--text-strong); }
.fp-rooms i { height: 8px; width: var(--w); border-radius: 4px; background: var(--navy); }
:root:not([data-theme="light"]) .fp-rooms i { background: var(--silver); }

/* Activity tab */
.ac-month { margin-bottom: 18px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--card-edge); border-radius: 12px; }
.ac-month h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--text-strong); }
.ac-k { display: inline-flex !important; align-items: center; height: 20px; min-width: 0 !important; padding: 0 8px; border-radius: 6px; background: var(--raised); font-size: 12px !important; color: var(--text-2) !important; }
.cp-photos { margin-top: 16px; }
.cp-photos .xp-slot { margin: 0; }

/* Photos: albums first (the mock-up's folder cards), then a grid, a viewer and downloads */
.ph-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ph-bar .hub-search { min-width: 320px; }
.ph-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ph-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font: 500 13.5px var(--font); color: var(--text); cursor: pointer; transition: background-color .15s, transform .4s var(--spring); }
.ph-chip small { color: var(--text-3); }
.ph-chip svg { width: 14px; height: 14px; }
.ph-chip:hover { border-color: var(--accent-line); }
.ph-chip:active { transform: scale(.94); transition-duration: .1s; }
.ph-chip.on { background: var(--navy); border-color: var(--navy); color: color(display-p3 1 1 1); }
.ph-chip.on small { color: color(display-p3 1 1 1 / .75); }
.ph-chip:disabled { opacity: .4; cursor: default; }
:root:not([data-theme="light"]) .ph-chip.on { background: var(--silver); color: var(--navy-deep); }
.ph-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ph-album { display: flex; flex-direction: column; padding: 0 0 12px; border: 1px solid var(--card-edge); border-radius: 12px; background: var(--surface); text-align: left; cursor: pointer; overflow: hidden; font: inherit; transition: transform .45s var(--spring), box-shadow .2s, border-color .2s; }
.ph-album:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 12px 26px color(display-p3 0.1 0.17 0.32 / 0.1); }
.ph-album:active { transform: scale(.98); transition-duration: .1s; }
.ph-cover { display: block; height: 150px; margin-bottom: 10px; background: var(--silver); overflow: hidden; }
.ph-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.ph-album:hover .ph-cover img { transform: scale(1.04); }
.ph-album b { padding: 0 14px; font-size: 15.5px; font-weight: 600; color: var(--text-strong); }
.ph-album small { padding: 0 14px; font-size: 13px; color: var(--text-3); }
.ph-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 15px; }
.ph-crumbs button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 4px; border: 0; border-radius: 6px; background: none; font: 500 15px var(--font); color: var(--accent-text); cursor: pointer; }
.ph-crumbs button:hover { background: var(--accent-soft); }
.ph-crumbs button svg { width: 15px; height: 15px; }
.ph-crumbs i { font-style: normal; color: var(--text-3); }
.ph-crumbs b { font-weight: 600; color: var(--text-strong); }
.ph-sel { display: flex; align-items: center; gap: 10px; min-height: 36px; margin-bottom: 12px; font-size: 14px; color: var(--text-2); }
.ph-sel b { color: var(--text-strong); }
.ph-sel .hub-btn svg { width: 15px; height: 15px; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ph-cell { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: var(--silver); aspect-ratio: 1; }
.ph-cell img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.ph-cell:hover img { transform: scale(1.04); }
.ph-cell.broken img { visibility: hidden; }
.ph-cell figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 6px; padding: 18px 10px 8px; font-size: 12.5px; color: color(display-p3 1 1 1); background: linear-gradient(transparent, color(display-p3 0.02 0.04 0.1 / .72)); opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-cell:hover figcaption { opacity: 1; }
.ph-tick, .ph-dl { position: absolute; top: 8px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: color(display-p3 1 1 1 / .92); color: var(--navy); cursor: pointer; opacity: 0; transition: opacity .15s, transform .35s var(--spring); }
.ph-tick { left: 8px; } .ph-dl { right: 8px; }
.ph-tick svg, .ph-dl svg { width: 16px; height: 16px; }
.ph-cell:hover .ph-tick, .ph-cell:hover .ph-dl, .ph-cell.picked .ph-tick { opacity: 1; }
.ph-tick:active, .ph-dl:active { transform: scale(.85); }
.ph-cell.picked { box-shadow: 0 0 0 3px var(--navy); }
.ph-cell.picked .ph-tick { background: var(--navy); color: color(display-p3 1 1 1); }
.ph-tick svg { opacity: .35; } .ph-cell.picked .ph-tick svg { opacity: 1; }
.ph-more { display: flex; justify-content: center; margin-top: 16px; }
.ph-vid { margin-top: 14px; }
.ph-view { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: minmax(0, 1fr) 340px; background: color(display-p3 0.02 0.035 0.08 / .94); animation: hubIn .2s ease both; }
.ph-v-img { position: relative; display: grid; place-items: center; padding: 32px; min-height: 0; }
.ph-v-img img { grid-area: 1 / 1; max-width: 100%; max-height: calc(100vh - 64px); object-fit: contain; border-radius: 6px; }
.ph-v-full { opacity: 0; transition: opacity .25s; } .ph-v-full.in { opacity: 1; }
.ph-v-info { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 56px 24px 24px; background: var(--surface); overflow-y: auto; color: var(--text); }
.ph-v-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--raised); color: var(--text-strong); cursor: pointer; }
.ph-v-x svg { width: 18px; height: 18px; }
.ph-v-n { margin: 0; font-size: 13px; color: var(--text-3); }
.ph-v-info h3 { margin: 0; font-size: 22px; font-weight: 700; color: var(--text-strong); }
.ph-v-info h3 span { font-size: 15px; font-weight: 600; color: var(--text-2); }
.ph-v-info p { margin: 0; font-size: 15px; line-height: 1.5; }
.ph-v-info dl { display: grid; grid-template-columns: 70px 1fr; gap: 6px 10px; margin: 4px 0; font-size: 13.5px; }
.ph-v-info dt { color: var(--text-3); } .ph-v-info dd { margin: 0; color: var(--text); word-break: break-word; }
.ph-v-info dd a { color: var(--accent-text); }
.ph-v-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ph-v-acts .hub-btn { width: 100%; } .ph-v-acts svg, .ph-v-nav svg { width: 16px; height: 16px; }
.ph-v-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; }
@media (max-width: 900px) { .ph-view { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .ph-v-info { max-height: 45vh; padding-top: 48px; } }
.ct-table.seo.gap .ct-row { grid-template-columns: minmax(220px, 1.4fr) 90px minmax(150px, 1fr) 90px 140px; }
.seo-note { margin: 0 0 12px; }
.cp-list .bd-st { width: auto; min-width: 70px; height: 22px; margin-top: 1px; font-size: 12px; }
.cp-keys.comp li > span { display: flex; flex-direction: column; } .cp-keys.comp li > span:last-child { align-items: flex-end; text-align: right; }
.cp-keys small { font-size: 12.5px; color: var(--text-3); }
.cp-keys b { font-weight: 600; color: var(--text-strong); }
.hub-seg button { white-space: nowrap; }
.ac-d { display: inline-block; margin-right: 8px; font-size: 12.5px; color: var(--text-3); }
.cp-act li > .ac-k { margin-right: 8px; }

/* Pipeline (monday mock-up): stage columns of deal cards, navy shading deepening towards Won */
.pl-note { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--sunk); font-size: 14px; color: var(--text-2); }
.pl-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--navy); }
.pl-note b { color: var(--text-strong); }
.pl-board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.pl-col { display: flex; flex-direction: column; min-height: 420px; border-radius: 10px; overflow: hidden; background: var(--sunk); border: 1px solid var(--card-edge); }
.pl-col > header { display: flex; align-items: center; height: 44px; padding: 0 14px; color: color(display-p3 1 1 1); font-size: 15px;
  background: color-mix(in oklab, var(--navy) calc(40% + var(--s) * 15%), color(display-p3 0.55 0.6 0.69)); }
.pl-col > header b { flex: 1; font-weight: 600; }
.pl-col > header small { font-size: 13.5px; opacity: .85; }
.pl-card { display: flex; flex-direction: column; gap: 6px; margin: 10px 10px 0; padding: 14px; background: var(--surface); border: 1px solid var(--card-edge); border-radius: 8px; transition: transform .45s var(--spring), box-shadow .2s; }
.pl-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px color(display-p3 0.1 0.17 0.32 / 0.08); }
.pl-card > b { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.pl-card > span { font-size: 13px; color: var(--text-2); }
.pl-next { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.pl-next .bd-av { width: 24px; height: 24px; font-size: 10.5px; }
.pl-card .hub-btn { margin-top: 4px; height: 34px; }
.pl-card .hub-btn:disabled { opacity: .55; }
.pl-col > header b, .pl-col > header small { color: color(display-p3 1 1 1); }
.pl-board { grid-template-columns: repeat(5, minmax(180px, 1fr)); }

/* ===== Brain: a fixed contents list on the left, a reading pane on the right, a fact panel that slides in ===== */
.br { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.br-index { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; scrollbar-width: thin; }
.br-find { min-width: 0; margin-bottom: 10px; height: 38px; }
.br-g { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: inherit; color: var(--text-strong); cursor: pointer; text-align: left; transition: background-color .15s; }
.br-g b { font-size: 15px; font-weight: 600; }
.br-g small { font-size: 12.5px; color: var(--text-3); }
.br-g:hover { background: var(--raised); }
.br-g.on { background: var(--navy); color: color(display-p3 1 1 1); } .br-g.on small { color: color(display-p3 1 1 1 / .7); }
:root:not([data-theme="light"]) .br-g.on { background: var(--silver); color: var(--navy-deep); } :root:not([data-theme="light"]) .br-g.on small { color: var(--navy); }
.br-hs { display: flex; flex-direction: column; margin: 2px 0 8px; }
.br-hs a { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px 5px 22px; border-radius: 6px; font-size: 13.5px; color: var(--text-2); text-decoration: none; }
.br-hs a:hover { background: var(--raised); color: var(--text-strong); }
.br-hs a small { color: var(--text-3); }
.br-hs a.empty { color: var(--text-3); }
.br-div { height: 1px; margin: 8px 0; background: var(--line); }
.br-built { margin: 12px 10px 8px; font-size: 12.5px; color: var(--text-3); }
.br-index .hub-btn { margin: 0 4px; }
.br-pane { min-width: 0; max-width: 820px; }
.br-head { margin-bottom: 18px; }
.br-head h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--text-strong); }
.br-head p { margin: 4px 0 0; font-size: 14.5px; color: var(--text-2); }
.br-sec { margin-bottom: 18px; padding: 20px 22px 8px; background: var(--surface); border: 1px solid var(--card-edge); border-radius: 14px; scroll-margin-top: 16px; }
.br-sec > header { display: flex; align-items: baseline; gap: 10px; }
.br-sec h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-strong); }
.br-sec > header span { font-size: 13px; color: var(--text-3); }
.br-about { margin: 2px 0 10px; font-size: 13.5px; color: var(--text-3); }
.br-facts { display: flex; flex-direction: column; }
.br-fact { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 12px 10px; margin: 0 -10px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; text-align: left; cursor: pointer; font: inherit; transition: background-color .12s; width: calc(100% + 20px); }
.br-facts > .br-fact:first-child { border-top: 0; }
.br-fact:hover { background: var(--accent-soft); border-radius: 8px; }
.br-ft { font-size: 15.5px; line-height: 1.65; color: var(--text); }
.br-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }
.br-src { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 500; color: var(--text-2); }
.br-more { font-weight: 600; }
.br-none { margin: 4px 0 14px; font-size: 14.5px; color: var(--text-3); }
.br-q { padding: 14px 16px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--card-edge); border-radius: 10px; font-size: 15.5px; line-height: 1.6; color: var(--text); }
.br-q small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-3); }
.br-hit { padding: 10px 14px 0; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--card-edge); border-radius: 10px; }
.br-hit > span { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.br-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(420px, 100vw); display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-pop); transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.br-panel.open { transform: none; }
.br-panel > header { display: flex; justify-content: space-between; align-items: center; }
.br-panel .ph-v-x { position: static; }
.br-tag { display: inline-flex; height: 26px; align-items: center; padding: 0 10px; border-radius: 6px; background: var(--navy); color: color(display-p3 1 1 1); font-size: 13px; font-weight: 600; }
:root:not([data-theme="light"]) .br-tag { background: var(--silver); color: var(--navy-deep); }
.br-pt { margin: 0; font-size: 18px; line-height: 1.55; color: var(--text-strong); }
.br-asof { margin: 0; font-size: 13.5px; color: var(--text-3); }
.br-panel h4 { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.br-refs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.br-refs li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--sunk); }
.br-refs b { display: block; font-size: 14px; font-weight: 500; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-refs small { font-size: 12.5px; color: var(--text-3); }
.br-refs a { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 500; color: var(--accent-text); text-decoration: none; }
.br-refs a svg { width: 13px; height: 13px; }
@media (max-width: 1100px) { .br { grid-template-columns: 1fr; } .br-index { position: static; max-height: none; } }
.br-g b, .br-g small { color: inherit; }
.br-g small { opacity: .7; }
.br-find { height: 38px; }

/* Client hero: the same template for everyone, with their own website on a desktop screen and a phone in front */
.cp-hero { position: relative; min-height: 268px; padding: 26px 28px; margin-bottom: 20px; border: 1px solid var(--card-edge); border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, color(display-p3 0.86 0.88 0.92) 0%, transparent 55%), var(--surface); align-items: flex-start; flex-wrap: nowrap; }
:root:not([data-theme="light"]) .cp-hero { background: radial-gradient(120% 140% at 100% 0%, color(display-p3 0.14 0.19 0.3) 0%, transparent 55%), var(--surface); }
.cp-hero .cp-t { position: relative; z-index: 1; max-width: calc(100% - 400px); }
.cp-hero .cp-acts { position: absolute; left: 28px; bottom: 26px; z-index: 1; }
.cp-hero .cp-ini { position: relative; z-index: 1; }
.cp-devices { position: absolute; right: 26px; top: 22px; width: 360px; height: 230px; pointer-events: none; }
.cp-mac { position: absolute; left: 0; top: 0; width: 320px; height: 200px; padding: 8px 8px 18px; border-radius: 12px 12px 6px 6px; background: color(display-p3 0.08 0.1 0.15);
  box-shadow: 0 18px 40px color(display-p3 0.05 0.08 0.16 / 0.25), inset 0 0 0 1px color(display-p3 1 1 1 / 0.08); transform: translateY(6px); opacity: 0; animation: devIn .7s .05s cubic-bezier(.2,.8,.2,1) forwards; }
.cp-mac img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 4px; background: var(--silver); }
.cp-mac::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: color(display-p3 1 1 1 / 0.25); }
.cp-stand { position: absolute; left: 130px; top: 205px; width: 60px; height: 22px; background: linear-gradient(color(display-p3 0.7 0.73 0.78), color(display-p3 0.85 0.87 0.9)); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); opacity: 0; animation: devIn .7s .05s forwards; }
.cp-phone { position: absolute; right: 0; top: 52px; width: 92px; height: 178px; padding: 5px; border-radius: 18px; background: color(display-p3 0.06 0.08 0.12);
  box-shadow: 0 16px 34px color(display-p3 0.05 0.08 0.16 / 0.32), inset 0 0 0 1px color(display-p3 1 1 1 / 0.1); transform: translateY(10px); opacity: 0; animation: devIn .7s .18s cubic-bezier(.2,.8,.2,1) forwards; }
.cp-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 14px; background: var(--silver); }
@keyframes devIn { to { opacity: 1; transform: none; } }
.cp-hero.noshot .cp-devices { display: none; }
.cp-hero.noshot .cp-t { max-width: none; }
.cp-hero.noshot { min-height: 0; }
.cp-hero.noshot .cp-acts { position: static; }
@media (max-width: 1100px) { .cp-devices { display: none; } .cp-hero .cp-t { max-width: none; } .cp-hero .cp-acts { position: static; } .cp-hero { min-height: 0; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .cp-mac, .cp-stand, .cp-phone { animation: none; opacity: 1; transform: none; } }

/* ===== Security (UI expert's spec, 12 Nov): tabs, the access grid of switches, connection rows with a side panel, log, stop ===== */
.sec { max-width: 1180px; }
.sec-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 24px}
.sec-tab{position:relative;display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px;border:0;border-radius:8px 8px 0 0;background:none;font:500 15px var(--font);color:var(--text-2);cursor:pointer;box-shadow:inset 0 -2px 0 transparent;transition:color .15s,background-color .15s,box-shadow .2s}
.sec-tab svg{width:15px;height:15px}
.sec-tab:hover{color:var(--text-strong);background:var(--accent-soft)}
.sec-tab[aria-selected="true"]{color:var(--text-strong);box-shadow:inset 0 -2px 0 var(--navy)}
:root:not([data-theme="light"]) .sec-tab[aria-selected="true"]{box-shadow:inset 0 -2px 0 var(--text-strong)}
.sec-tab.stop{margin-left:auto}
.sec-tab .dot{position:absolute;top:10px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--err)}
.sec-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.sec-bar .hub-search{min-width:280px;height:40px}
.sec-count{margin-left:auto;font-size:13px;color:var(--text-3)}
.sec-hint{margin:0 0 14px;font-size:13.5px;color:var(--text-2)}
.sec-hint a{color:var(--accent-text)}
.sec-inline{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2);cursor:pointer}

.sec-switch{position:relative;width:36px;height:20px;flex:none;padding:0;border:0;border-radius:999px;background:var(--line-strong);cursor:pointer;transition:background-color .2s,transform .12s}
.sec-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:999px;background:color(display-p3 1 1 1);box-shadow:0 1px 2px color(display-p3 0.03 0.06 0.15/.25);transition:transform .35s var(--spring),width .15s}
.sec-switch[aria-checked="true"]{background:var(--navy)}
.sec-switch[aria-checked="true"]::after{transform:translateX(16px)}
:root:not([data-theme="light"]) .sec-switch[aria-checked="true"]{background:var(--accent)}
.sec-switch:active{transform:scale(.92)}
.sec-switch:active::after{width:20px}
.sec-switch[aria-checked="true"]:active::after{transform:translateX(12px)}
.sec-switch:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
.sec-switch[aria-busy="true"]::after{opacity:.6}
.sec-switch:disabled{opacity:.35;cursor:not-allowed;transform:none}
.sec-switch[data-locked]{opacity:.5;cursor:not-allowed;transform:none}

.sec-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--raised);color:var(--text-2);font:500 13px var(--font);white-space:nowrap;justify-self:start}
.sec-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sec-pill.ok{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-line)}
.sec-pill.err{color:var(--err);background:var(--err-soft);border-color:var(--err-line)}
.sec-pill.off{background:transparent}
.sec-pill.busy::before{animation:secPulse 1s ease-in-out infinite}
.sec-pill.owner{height:20px;padding:0 8px;font-size:11.5px;margin-left:4px;vertical-align:2px}
.sec-pill.owner::before{content:none}
@keyframes secPulse{50%{opacity:.25}}

.sec-list{background:var(--surface);border:1px solid var(--card-edge);border-radius:12px;overflow:hidden;margin-bottom:14px}
.sec-row{display:grid;grid-template-columns:40px minmax(0,1fr) 150px 110px 20px;align-items:center;gap:16px;width:100%;min-height:64px;padding:0 20px;border:0;border-top:1px solid var(--line);background:none;font:inherit;color:var(--text);text-align:left;cursor:pointer;transition:background-color .15s}
.sec-row:first-child{border-top:0}
.sec-row:hover,.sec-row[aria-expanded="true"]{background:var(--accent-soft)}
.sec-row[aria-expanded="true"]{box-shadow:inset 2px 0 0 var(--navy)}
.sec-row:focus-visible{outline:2px solid var(--accent-line);outline-offset:-2px}
.sec-row b{display:block;font-size:15px;font-weight:600;color:var(--text-strong)}
.sec-row small{display:block;font-size:13px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-row > svg{width:18px;height:18px;color:var(--text-3)}
.sec-logo{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--silver);box-shadow:inset 0 0 0 1px var(--line);color:var(--navy);font:700 16px var(--font)}
:root:not([data-theme="light"]) .sec-logo{background:var(--raised);color:var(--text-strong)}
.sec-when{font-size:13px;color:var(--text-3)}

.sec-scrim{position:fixed;inset:0;z-index:59;background:color(display-p3 0.035 0.06 0.13/.28);opacity:0;pointer-events:none;transition:opacity .2s}
.sec-scrim.open{opacity:1;pointer-events:auto}
.sec-panel{position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(460px,100vw);display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-pop);transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sec-panel.open{transform:none}
.sec-panel>header{display:flex;align-items:center;gap:14px;padding:24px 24px 14px}
.sec-panel>header h2{flex:1;margin:0;font-size:18px;font-weight:600;color:var(--text-strong)}
.sec-x{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:8px;background:var(--raised);color:var(--text-strong);cursor:pointer}
.sec-x svg{width:18px;height:18px}
.sec-result{margin:0;padding:0 24px 14px;font-size:14px;border-bottom:1px solid var(--line);min-height:1px}
.sec-result.ok{color:var(--ok)}.sec-result.err{color:var(--err)}
.sec-panel .body{flex:1;overflow:auto;padding:22px 24px;display:flex;flex-direction:column;gap:20px}
.sec-help{margin:0;font-size:15px;line-height:1.55;color:var(--text-2)}
.sec-panel>footer{display:flex;justify-content:space-between;gap:10px;padding:16px 24px;border-top:1px solid var(--line)}
.sec-field label{display:block;margin-bottom:6px;font:600 14px var(--font);color:var(--text-strong)}
.sec-field input{width:100%;height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line-strong);background:var(--input-bg);color:var(--text-strong);font:500 15px var(--font)}
.sec-field input.masked, .sec-panel input.masked{-webkit-text-security:disc}
.sec-field input:focus{outline:0;border-color:var(--accent-line);box-shadow:0 0 0 4px var(--accent-soft)}
.sec-saved{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 4px 0 14px;border-radius:10px;border:1px solid var(--line);background:var(--sunk);color:var(--text-2);font:500 15px ui-monospace,monospace}
.sec-field .hint, .sec-panel .hint{margin:6px 0 0;font-size:13px;color:var(--text-3)}
.sec-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:var(--text)}
.sec-steps li .sec-field{margin-bottom:8px}
.sec-disconnect{align-self:flex-start;padding:0;border:0;background:none;font:500 14px var(--font);color:var(--err);cursor:pointer}
.sec-disconnect:hover{text-decoration:underline}

.sec-gridwrap{overflow:auto;max-height:calc(100vh - 300px);background:var(--surface);border:1px solid var(--card-edge);border-radius:12px}
.sec-grid{border-collapse:separate;border-spacing:0;min-width:100%}
.sec-grid th,.sec-grid td{height:56px;padding:0 12px;border-bottom:1px solid var(--line);text-align:center;background:var(--surface)}
.sec-grid td .sec-switch{vertical-align:middle}
.sec-grid thead th{position:sticky;top:0;z-index:2;height:84px;width:112px;vertical-align:bottom;padding-bottom:10px;font:500 13px/1.3 var(--font);color:var(--text-2)}
.sec-grid thead th small{display:block;font-size:11.5px;color:var(--text-3)}
.sec-grid .who{position:sticky;left:0;z-index:1;width:280px;min-width:240px;text-align:left;border-right:1px solid var(--line)}
.sec-grid thead .who{z-index:3}
.who-in{display:flex;align-items:center;gap:12px}
.who-t b{display:block;font-size:15px;font-weight:500;color:var(--text-strong);white-space:nowrap}
.who-t small{display:block;font-size:13px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.sec-grid tbody tr:hover td{background:linear-gradient(var(--accent-soft),var(--accent-soft)) var(--surface)}
.sec-glyph{width:28px;height:28px;margin:0 auto 6px;border-radius:8px;display:grid;place-items:center;background:var(--silver);box-shadow:inset 0 0 0 1px var(--line);color:var(--navy)}
.sec-glyph svg{width:15px;height:15px}
:root:not([data-theme="light"]) .sec-glyph{background:var(--raised);color:var(--text-strong)}
.sec-ava{width:32px;height:32px;flex:none;border-radius:50%;display:inline-grid;place-items:center;background:var(--navy);color:color(display-p3 1 1 1);font:600 13px var(--font)}
:root:not([data-theme="light"]) .sec-ava{background:var(--silver);color:var(--navy-deep)}

.sec-log{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed}
.sec-log th{position:sticky;top:0;z-index:1;height:40px;padding:0 14px;text-align:left;font:500 13px var(--font);color:var(--text-2);background:var(--sunk);border-bottom:1px solid var(--line)}
.sec-log th:nth-child(1){width:140px}.sec-log th:nth-child(2){width:160px}.sec-log th:nth-child(3){width:200px}
.sec-log td{height:44px;padding:0 14px;border-bottom:1px solid var(--line);font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec-log td b{font-weight:600;color:var(--text-strong)}
.sec-log tr.bad td:nth-child(3){color:var(--err)}
.sec-more{display:flex;justify-content:center;margin-top:12px}

.sec-stop{max-width:720px;display:grid;grid-template-columns:44px 1fr;gap:18px;padding:28px;border:1px solid var(--err-line);border-radius:16px;background:var(--surface)}
.sec-stop .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--err-soft);color:var(--err)}
.sec-stop .ico svg{width:22px;height:22px}
.sec-stop h2{margin:6px 0 8px;font-size:20px;font-weight:600;color:var(--text-strong)}
.sec-stop p{margin:0 0 10px;font-size:15px;line-height:1.55;color:var(--text)}
.sec-stop ul{margin:0 0 14px;padding-left:18px;font-size:14.5px;line-height:1.7;color:var(--text-2)}
.sec-stop-go{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.sec-stop input{width:200px;height:44px;border:1px solid var(--line-strong);border-radius:10px;background:var(--input-bg);text-align:center;font:600 15px var(--font);color:var(--text-strong)}
.sec-btn-stop{height:44px;padding:0 20px;border:0;border-radius:11px;background:var(--err);color:color(display-p3 1 1 1);font:600 15px var(--font);cursor:pointer;transition:transform .35s var(--spring)}
:root:not([data-theme="light"]) .sec-btn-stop{color:var(--navy-deep)}
.sec-btn-stop:active{transform:scale(.94);transition-duration:.1s}
.sec-btn-stop:disabled{opacity:.4;cursor:default;transform:none}
.sec-stopped{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;margin-bottom:18px;padding:10px 16px;border:1px solid var(--err-line);border-radius:12px;background:var(--err-soft);color:var(--err);font-size:14.5px}
.sec-toast{position:fixed;left:calc(var(--side) + 20px);bottom:20px;z-index:90;display:flex;align-items:center;gap:16px;padding:12px 16px;border-radius:12px;background:var(--navy-deep);color:color(display-p3 1 1 1);font-size:14.5px;box-shadow:0 12px 30px color(display-p3 0 0.02 0.08/.3);animation:hubIn .25s ease both}
.sec-toast button{padding:0;border:0;background:none;font:600 14.5px var(--font);color:color(display-p3 0.75 0.8 0.9);cursor:pointer;text-decoration:underline}
:root:not([data-theme="light"]) .sec-toast{background:var(--silver);color:var(--navy-deep)} :root:not([data-theme="light"]) .sec-toast button{color:var(--navy)}
@media (prefers-reduced-motion:reduce){.sec-switch,.sec-switch::after,.sec-panel,.sec-row,.sec-btn-stop{transition:none}.sec-pill.busy::before{animation:none}}

/* ===== Design review fixes, 12 Nov ===== */
.cp-hero, :root:not([data-theme="light"]) .cp-hero { background: var(--surface); }
.cp-hero.compact { min-height: 0; padding: 14px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cp-hero.compact .cp-devices { display: none; }
.cp-hero.compact .cp-t { max-width: none; flex: 1; }
.cp-hero.compact .cp-acts { position: static; }
.cp-hero.compact .cp-ini { width: 40px; height: 40px; font-size: 15px; border-radius: 11px; }
.cp-hero.compact .cp-t h1 { font-size: 24px; }
.cp-mood { margin-top: 10px !important; font-size: 15px !important; color: var(--text) !important; max-width: 52ch; }
.cp-mood b { font-weight: 600; color: var(--text-strong); }
.cp-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: -4px 0 18px; }
.cp-strip:empty { display: none; }
.cp-strip a { display: block; height: 120px; border-radius: 10px; overflow: hidden; background: var(--silver); }
.cp-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.cp-strip a:hover img { transform: scale(1.05); }
.cp-tile b { font-size: 22px; }
.cp-acts .hub-btn svg:last-child { width: 14px; height: 14px; }
.hub .msg table { display: block; overflow-x: auto; max-width: 100%; }
.pl-col > header { background: var(--surface); border-bottom: 1px solid var(--line); }
.pl-col > header b { color: var(--text-strong); } .pl-col > header small { color: var(--text-3); }
.pl-card .hub-btn { background: var(--surface); color: var(--accent-text); border: 1px solid var(--line-strong); box-shadow: none; }
.pl-card .hub-btn:disabled { opacity: 1; }
:root:not([data-theme="light"]) .pl-card .hub-btn { background: var(--raised); color: var(--text-strong); }
.br-g.on, :root:not([data-theme="light"]) .br-g.on { background: var(--accent-soft); color: var(--text-strong); box-shadow: inset 2px 0 0 var(--navy); }
:root:not([data-theme="light"]) .br-g.on { box-shadow: inset 2px 0 0 var(--text-strong); }
.br-g.on small { color: var(--text-3); opacity: 1; }
.br-src { background: none; box-shadow: none; padding: 0; height: auto; color: var(--text-3); }
.br-meta .br-src + .br-src::before { content: "·"; margin-right: 6px; }
.br-refs .br-src { padding: 0 8px; height: 22px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }
.mt-h[aria-expanded="true"] .mt-t small { display: none; }
body[data-page="wiki"] .hp-find { display: none; }
.ph-v-img { position: relative; }
.ph-arrow { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: color(display-p3 1 1 1 / .9); color: var(--navy); cursor: pointer; transition: transform .35s var(--spring), opacity .2s; }
.ph-arrow.l { left: 16px; } .ph-arrow.r { right: 16px; }
.ph-arrow svg { width: 20px; height: 20px; }
.ph-arrow:hover { transform: scale(1.08); } .ph-arrow:active { transform: scale(.9); }
.ph-arrow:disabled { opacity: 0; pointer-events: none; }
.sec-panel:not(.open) { visibility: hidden; box-shadow: none; transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s; }
:root:not([data-theme="light"]) .sec-switch { background: color(display-p3 1 1 1 / .2); }
:root:not([data-theme="light"]) .sec-switch[aria-checked="true"] { background: var(--accent); }
.cp-hero:not(.compact):not(.noshot) .cp-t { max-width: calc(100% - 470px); }

/* ===== Success green (Si, 12 Nov): a mint green, the one colour beside navy and silver. Used for "on", connected and done.
   --success fills (switches); --success-text is a deeper mint so words stay readable. ===== */
:root[data-theme="light"] {
  --success: color(display-p3 0.38 0.8 0.64); --success-text: color(display-p3 0.12 0.5 0.38); --success-soft: color(display-p3 0.9 0.97 0.94); --success-line: color(display-p3 0.66 0.88 0.79);
}
:root:not([data-theme="light"]) {
  --success: color(display-p3 0.42 0.85 0.69); --success-text: color(display-p3 0.55 0.9 0.76); --success-soft: color(display-p3 0.42 0.85 0.69 / 0.14); --success-line: color(display-p3 0.42 0.85 0.69 / 0.4);
}
:root[data-theme], :root:not([data-theme="light"]) { --ok: var(--success-text); --ok-soft: var(--success-soft); --ok-line: var(--success-line); }
.sec-switch[aria-checked="true"], :root:not([data-theme="light"]) .sec-switch[aria-checked="true"] { background: var(--success); }
/* Access grid header: anchored to the top so every column's icon sits on the same line, however the label wraps (Si, 12 Nov). */
.sec-grid thead th{vertical-align:top;padding-top:14px;padding-bottom:12px}
.sec-grid thead th.who{padding-top:20px}
.sec-grid thead th:not(.who){white-space:nowrap}
/* Clients table: the row picked with the arrow keys */
.ct-row[data-href]:focus { outline: none; background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--navy); }
:root:not([data-theme="light"]) .ct-row[data-href]:focus { box-shadow: inset 3px 0 0 var(--text-strong); }

/* Ask is a plain back-and-forth (Si, 12 Nov): InspireOS on the left in a white box, you on the right in navy.
   A reply that is a tool's card or table keeps its own box rather than being boxed twice. */
.hub .msg:not(.me) .msg-b:not(:has(> div, > section, > table, > form)) { width: fit-content; max-width: min(78%, 720px); padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px color(display-p3 0.03 0.06 0.15 / 0.06); color: var(--text); font-size: 15px; line-height: 1.55; }
.hub .msg:not(.me) .msg-b:not(:has(> div, > section, > table, > form)) > :first-child { margin-top: 0; }
.hub .msg:not(.me) .msg-b:not(:has(> div, > section, > table, > form)) > :last-child { margin-bottom: 0; }
:root:not([data-theme="light"]) .hub .msg:not(.me) .msg-b:not(:has(> div, > section, > table, > form)) { background: var(--raised); border-color: color(display-p3 1 1 1 / 0.08); }
.hub .msg:not(.me) .msg-b:has(> .typing:only-child, > .typing + .why) { padding: 10px 14px; }
/* Client list: just the search and the list (Si, 12 Nov). A bigger, deeper search box. */
.hp-find { flex: none; height: 46px; margin: 2px 4px 14px; padding: 0 14px; gap: 10px; border-radius: 12px; background: var(--input-bg); }
.hp-find svg { width: 18px; height: 18px; flex: none; }
.hp-find input { font-size: 15px; }
/* Photo strip placeholders while the photos load */
.cp-ph { display: block; height: 120px; border-radius: 10px; background: linear-gradient(90deg, var(--raised) 0%, var(--sunk) 50%, var(--raised) 100%); background-size: 200% 100%; animation: cpPh 1.2s ease-in-out infinite; }
@keyframes cpPh { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .cp-ph { animation: none; } }

/* Metadata Planner (Si, 12 Nov): Actions / The data tabs, the running tally, and a tick on every page change. */
.xp-tabs { display: flex; gap: 4px; margin: 14px 0 18px; border-bottom: 1px solid var(--line); }
.xp-tabs button { position: relative; display: inline-flex; align-items: baseline; gap: 8px; height: 42px; padding: 0 14px; border: 0; background: none; font: 500 15px var(--font); color: var(--text-2); cursor: pointer; }
.xp-tabs button small { font-size: 12.5px; font-weight: 400; color: var(--text-3); }
.xp-tabs button:hover { color: var(--text-strong); }
.xp-tabs button.on { color: var(--text-strong); font-weight: 600; }
.xp-tabs button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--navy); }
:root:not([data-theme="light"]) .xp-tabs button.on::after { background: var(--text-strong); }
.xp-tally { margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.xp-tl-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.xp-tl-top b { font-size: 16px; color: var(--text-strong); }
.xp-tl-top span { margin-left: auto; font-size: 13px; color: var(--success-text, var(--ok)); font-weight: 600; }
.xp-tl-bar { height: 8px; border-radius: 99px; background: var(--raised); overflow: hidden; }
.xp-tl-bar i { display: block; height: 100%; border-radius: 99px; background: var(--success); transition: width .5s var(--spring, ease); }
.xp-tl-none { margin: 12px 0 0; font-size: 13.5px; color: var(--text-3); }
.xp-tl-log { margin-top: 12px; }
.xp-tl-log summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-2); list-style: none; }
.xp-tl-log summary::-webkit-details-marker { display: none; }
.xp-tl-log summary::before { content: "›"; display: inline-block; width: 14px; transition: transform .2s; }
.xp-tl-log[open] summary::before { transform: rotate(90deg); }
.xp-tl-log ul { list-style: none; margin: 10px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.xp-tl-log li { display: grid; grid-template-columns: 64px minmax(0, 1.4fr) minmax(0, 1fr) 130px; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text); }
.xp-tl-log li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); font-weight: 600; }
.xp-tl-d, .xp-tl-f, .xp-tl-w { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-tl-w { text-align: right; }
.xp-tick { flex: none; width: 20px; height: 20px; display: grid; place-items: center; margin-right: 6px; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: transparent; cursor: pointer; transition: background-color .15s, border-color .15s, transform .12s; }
.xp-tick svg { width: 14px; height: 14px; stroke-width: 3; }
.xp-tick:hover { border-color: var(--success); color: color-mix(in srgb, var(--success) 55%, transparent); }
.xp-tick.on { background: var(--success); border-color: var(--success); color: #fff; }
.xp-tick:active { transform: scale(.9); }
.xp-tick:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
@media (max-width: 720px) { .xp-tl-log li { grid-template-columns: 56px minmax(0, 1fr); } .xp-tl-f, .xp-tl-w { display: none; } }

/* ===== Meeting Actions / Meeting Push pages (Si, 12 Nov): the monday mock-up's screens in navy, silver and white ===== */
body[data-tool="meeting-actions"] .hub-top :is(h1, p), body[data-tool="meeting-push"] .hub-top :is(h1, p), body[data-tool="new-business"] .hub-top :is(h1, p) { display: none; }
.ma { display: grid; gap: 18px; padding-bottom: 90px; }
.ma svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ma-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ma-head h1, .ma-rhead h1 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: var(--text-strong); }
.ma-head p, .ma-rhead p { margin: 6px 0 0; font-size: 15px; color: var(--text-2); }
.ma-head .hub-btn { margin-left: auto; }
.ma-rhead p a { color: var(--text-strong); font-weight: 600; }
.ma-load, .ma-empty { padding: 40px 0; text-align: center; color: var(--text-3); font-size: 15px; }
.ma-empty .linkbtn { margin-left: 6px; }
.ma-ini { flex: none; width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--silver); box-shadow: inset 0 0 0 1px var(--line); color: var(--navy); font-size: 12px; font-weight: 700; }
.ma-ini.lg { width: 52px; height: 52px; border-radius: 14px; font-size: 18px; }
:root:not([data-theme="light"]) .ma-ini { background: var(--raised); color: var(--text-strong); }
/* list */
.ma-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.ma-tabs button { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 0; background: none; font: 500 15px var(--font); color: var(--text-2); cursor: pointer; }
.ma-tabs button b:not(:empty) { min-width: 22px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--navy); color: #fff; font-size: 12px; }
.ma-tabs button.on { color: var(--text-strong); font-weight: 600; }
.ma-tabs button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--navy); border-radius: 2px; }
:root:not([data-theme="light"]) .ma-tabs button.on::after { background: var(--text-strong); }
.ma-list { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.ma-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(200px, 1.6fr) 120px 80px minmax(200px, 1.2fr); align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 18px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; font: 400 14.5px var(--font); color: var(--text); cursor: pointer; }
.ma-row:first-child { border-top: 0; }
.ma-row:not(.ma-lhead):hover { background: var(--raised); }
.ma-lhead { min-height: 42px; cursor: default; font-size: 12.5px; font-weight: 600; color: var(--text-3); text-transform: none; }
.ma-client { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text-strong); }
.ma-d, .ma-n { color: var(--text-2); }
.ma-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--raised); color: var(--text-2); }
.ma-pill.wait { background: var(--accent-soft); color: var(--text-strong); }
.ma-pill.done { background: var(--success-soft); color: var(--success-text); }
.ma-pill i { font-style: normal; font-size: 10.5px; padding: 1px 5px; border-radius: 4px; background: var(--navy); color: #fff; }
.ma-carry { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.ma-carry > b { font-size: 13px; color: var(--text-2); }
.ma-carry-i { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; font: 400 14.5px var(--font); color: var(--text); cursor: pointer; }
.ma-carry-i:hover { background: var(--raised); }
.ma-carry-i small { display: block; color: var(--text-3); font-size: 12.5px; }
.ma-carry-i > span:nth-child(2) { flex: 1; }
.ma-carry-i svg { transform: rotate(-90deg); color: var(--text-3); }
/* new meeting */
.ma-steps-new { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(320px, 2fr); gap: 18px; align-items: start; }
.ma-pick h2 { margin: 0 0 12px; font-size: 17px; }
.ma-mlist { display: grid; gap: 8px; max-height: 460px; overflow-y: auto; }
.ma-m { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; font: 400 14px var(--font); color: var(--text); cursor: pointer; }
.ma-m:hover { border-color: var(--navy); }
.ma-m b { color: var(--text-strong); font-weight: 600; }
.ma-m > span:nth-child(2) { grid-column: 1; color: var(--text-3); font-size: 13px; }
.ma-m .ma-pill { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.ma-paste { margin-top: 14px; }
.ma-paste summary { cursor: pointer; font-weight: 600; color: var(--text-2); font-size: 14px; }
.ma-paste textarea, .ma-notes textarea { width: 100%; margin: 10px 0; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--input-bg); font: 400 15px/1.5 var(--font); color: var(--text-strong); resize: vertical; }
.ma-notes-f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ma-notes-f .gap { flex: 1; }
.ma-work h2 { margin: 0 0 14px; font-size: 18px; }
.ma-work ol { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.ma-work li { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 15px; }
.ma-work li i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); }
.ma-work li.now { color: var(--text-strong); font-weight: 600; } .ma-work li.now i { border-color: var(--navy) transparent var(--navy) var(--navy); animation: mwSpin .8s linear infinite; }
.ma-work li.done { color: var(--text-2); } .ma-work li.done i { border-color: var(--success); background: var(--success); }
.ma-bar { height: 8px; border-radius: 99px; background: var(--raised); overflow: hidden; } .ma-bar i { display: block; height: 100%; width: 0; background: var(--navy); border-radius: 99px; transition: width .4s; }
@keyframes mwSpin { to { transform: rotate(360deg); } }
/* review */
.ma-rhead { display: flex; align-items: center; gap: 16px; }
.ma-test { padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--text-strong); font-weight: 600; font-size: 13px; }
.ma-stepper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ma-stepper > i { flex: 0 1 40px; height: 2px; background: var(--line-strong); border-radius: 2px; }
.ma-step { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); font-size: 14px; background: var(--surface); }
.ma-step b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--raised); font-size: 12px; color: var(--text-2); }
.ma-step small { color: var(--text-3); font-size: 12px; margin-left: 2px; }
.ma-step.now { border-color: var(--navy); color: var(--text-strong); font-weight: 600; } .ma-step.now b { background: var(--navy); color: #fff; }
.ma-step.done b { background: var(--success); color: #fff; } .ma-step.done b svg { width: 13px; height: 13px; stroke-width: 3; }
:root:not([data-theme="light"]) .ma-step.now { border-color: var(--text-strong); } :root:not([data-theme="light"]) .ma-step.now b { background: var(--silver); color: var(--navy-deep); }
.ma-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ma-tiles > div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.ma-tiles span { display: block; margin-bottom: 4px; font-size: 12.5px; color: var(--text-3); }
.ma-tiles b { font-size: 15px; font-weight: 600; color: var(--text-strong); line-height: 1.35; }
.ma-tiles b small { font-weight: 400; color: var(--text-3); }
.ma-tiles .warn { border-color: color-mix(in srgb, var(--warn, #c88a2a) 45%, var(--line)); }
.ma-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.ma-groups { display: grid; gap: 18px; min-width: 0; }
.ma-gh { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--text-strong); }
.ma-gh h2 { margin: 0; font-size: 17px; font-weight: 600; }
.ma-gh span { min-width: 22px; height: 22px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; background: var(--raised); font-size: 12px; color: var(--text-2); }
.ma-gh svg { transition: transform .15s; } .ma-grp.shut .ma-gh svg { transform: rotate(-90deg); }
.ma-tbl { margin-top: 8px; border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: 12px; background: var(--surface); overflow: hidden; }
:root:not([data-theme="light"]) .ma-tbl { border-left-color: var(--text-2); }
.ma-tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) 110px 60px 74px 60px; align-items: center; min-height: 46px; border-top: 1px solid var(--line); font-size: 14.5px; cursor: pointer; outline: none; }
.ma-tr > span { padding: 6px 8px; min-width: 0; }
.ma-tr:first-child { border-top: 0; }
.ma-th { min-height: 36px; cursor: default; font-size: 12.5px; color: var(--text-3); background: var(--raised); }
.ma-tr:not(.ma-th):hover { background: var(--raised); }
.ma-tr.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--navy); }
.ma-tr:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-line); }
.ma-tr.sub .ma-a { padding-left: 26px; position: relative; } .ma-tr.sub .ma-a::before { content: "↳"; position: absolute; left: 8px; color: var(--text-3); }
.ma-tr.pushed { opacity: .7; }
.ma-a { color: var(--text-strong); line-height: 1.35; }
.ma-a em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--text-3); }
.ma-flag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 600; background: color-mix(in srgb, #e2a03f 18%, transparent); color: #8a5a10; vertical-align: 1px; }
.ma-flag.b { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
:root:not([data-theme="light"]) .ma-flag { color: #f2c27a; }
.ma-tick { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: transparent; cursor: pointer; transition: transform .12s, background-color .15s; }
.ma-tick svg { width: 14px; height: 14px; stroke-width: 3; }
.ma-tick:hover:not(:disabled) { border-color: var(--success); color: color-mix(in srgb, var(--success) 60%, transparent); }
.ma-tick.on, .ma-tick.in { background: var(--success); border-color: var(--success); color: #fff; }
.ma-tick:active { transform: scale(.88); }
.ma-type { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--raised); color: var(--text-2); white-space: nowrap; }
.ma-type.t-task { background: var(--accent-soft); color: var(--text-strong); }
.ma-type.t-external { background: color-mix(in srgb, #e2a03f 16%, transparent); color: #8a5a10; }
:root:not([data-theme="light"]) .ma-type.t-external { color: #f2c27a; }
.ma-who { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; }
:root:not([data-theme="light"]) .ma-who { background: var(--silver); color: var(--navy-deep); }
.ma-add { display: inline-flex; align-items: center; gap: 8px; justify-self: start; height: 38px; padding: 0 14px; border: 1px dashed var(--line-strong); border-radius: 10px; background: none; font: 500 14px var(--font); color: var(--text-2); cursor: pointer; }
.ma-add:hover { border-color: var(--navy); color: var(--text-strong); }
/* the side panel */
.ma-side { position: sticky; top: 20px; max-height: calc(100vh - 140px); overflow-y: auto; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 10px 30px color(display-p3 0.03 0.06 0.15 / .06); }
.ma-sd { display: grid; gap: 12px; }
.ma-sd-top { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.ma-sd select, .ma-sd input, .ma-sd textarea, .ma-dlg input, .ma-dlg textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--input-bg); font: 400 14px/1.45 var(--font); color: var(--text-strong); box-shadow: none; }
.ma-sd-top select { width: auto; flex: 1; min-width: 0; }
.ma-sd textarea { resize: none; overflow: hidden; }
.ma-pulse { font-size: 16px !important; font-weight: 600 !important; }
.ma-sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ma-sd-grid .wide { grid-column: 1 / -1; }
.ma-sd label > span, .ma-dlg label > span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.ma-sd :disabled { background: var(--raised); color: var(--text-2); }
.ma-sd-flag { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #e2a03f 14%, transparent); font-size: 13.5px; font-weight: 600; color: #8a5a10; }
.ma-sd-flag .hub-btn { margin-left: auto; }
:root:not([data-theme="light"]) .ma-sd-flag { color: #f2c27a; }
.ma-quote { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--raised); }
.ma-quote a, .ma-quote > span { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; }
.ma-quote a svg { width: 11px; height: 11px; }
.ma-quote p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--text); font-style: italic; }
.ma-sd-acts { display: flex; gap: 8px; }
.ma-sd-acts .hub-btn:first-child { flex: 1; justify-content: center; }
.ma-in { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--success-text); font-weight: 600; font-size: 14px; }
/* the bar along the bottom */
.ma-foot { position: fixed; z-index: 30; left: calc(var(--side, 76px) + 24px); right: 24px; bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); box-shadow: 0 12px 34px color(display-p3 0.03 0.06 0.15 / .14); }
.ma-foot .gap, .ma-dlg footer .gap { flex: 1; }
.ma-count { font-size: 14px; color: var(--text-2); } .ma-count b { color: var(--text-strong); }
.ma-prog { width: 160px; height: 8px; border-radius: 99px; background: var(--raised); overflow: hidden; } .ma-prog i { display: block; height: 100%; background: var(--success); border-radius: 99px; transition: width .4s; }
.ma-err { width: 100%; margin: 0; }
.ma-rv.ro .ma-tick { cursor: default; }
/* done */
.ma-done { display: grid; justify-items: center; gap: 6px; padding: 44px 24px; text-align: center; }
.ma-done-tick { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--success); color: #fff; margin-bottom: 8px; animation: maPop .5s var(--spring, ease) both; }
.ma-done-tick svg { width: 28px; height: 28px; stroke-width: 3; }
.ma-done h2 { margin: 0; font-size: 22px; }
.ma-done p { margin: 0; color: var(--text-2); }
.ma-done-acts { display: flex; gap: 10px; margin-top: 14px; }
@keyframes maPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* dialogs: sign off and recap, push preview */
.ma-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: color(display-p3 0.03 0.05 0.1 / .45); }
.ma-dlg { width: min(640px, 100%); max-height: calc(100vh - 40px); display: grid; grid-template-rows: auto 1fr auto; border-radius: 18px; background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.3); overflow: hidden; }
.ma-dlg header { position: relative; padding: 20px 56px 14px 22px; border-bottom: 1px solid var(--line); }
.ma-dlg header h2 { margin: 0; font-size: 19px; } .ma-dlg header p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-2); }
.ma-x { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; } .ma-x:hover { background: var(--raised); }
.ma-dlg-b { display: grid; gap: 12px; padding: 16px 22px; overflow-y: auto; }
.ma-dlg footer { display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); }
.ma-rcpts { display: flex; flex-wrap: wrap; gap: 6px; }
.ma-chip { display: inline-flex; align-items: center; border-radius: 999px; background: var(--accent-soft); }
.ma-chip button { height: 28px; padding: 0 10px; border: 0; background: none; font: 500 13px var(--font); color: var(--text-strong); cursor: pointer; } .ma-chip button + button { padding: 0 8px 0 2px; color: var(--text-3); }
.ma-chip svg { width: 12px; height: 12px; }
.ma-rcpts select { width: auto; height: 28px; padding: 0 8px; border-radius: 999px; font-size: 13px; }
.ma-prev summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text-2); }
.ma-prev > div { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: #eef1f5; color: #222; max-height: min(65vh, 600px); overflow: auto; }
.ma-op { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; } .ma-op small { color: var(--text-3); font-size: 12px; } .ma-op b { color: var(--text-strong); font-weight: 600; }
@media (max-width: 1180px) { .ma-body { grid-template-columns: 1fr; } .ma-side { position: static; max-height: none; } .ma-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ma-steps-new { grid-template-columns: 1fr; } .ma-row { grid-template-columns: 1fr; gap: 4px; } .ma-lhead { display: none; } .ma-tr { grid-template-columns: 40px minmax(0, 1fr) 90px; } .ma-tr > span:nth-child(n+4) { display: none; } .ma-foot { left: 12px; right: 12px; } }
@media (prefers-reduced-motion: reduce) { .ma-done-tick { animation: none; } .ma-work li.now i { animation-duration: 2s; } }
.ma-side *, .ma-dlg * { box-sizing: border-box; }
.ma-sd-grid > *, .ma-sd-top > * { min-width: 0; }
.ma-tiles b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ma-sd-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ma-sd select, .ma-sd input { max-width: 100%; }
.ma-sd { grid-template-columns: minmax(0, 1fr); }
.ma-sd > * { min-width: 0; }
/* The sign-off bar stays fixed to the bottom of the window (Si, 13 Nov); the page keeps room under its content so nothing hides behind it. */
.ma-foot { position: fixed; left: calc(var(--side, 76px) + 24px); right: 24px; bottom: 16px; }
.ma { padding-bottom: 110px; }
@media (max-width: 760px) { .ma-foot { left: 12px; right: 12px; bottom: 76px; } .ma { padding-bottom: 170px; } }
/* Review, tidied (Si, 12 Nov): title in line with the sections, the company top right, one summary line, no tiles or step bar;
   a narrower actions column so the side panel never scrolls sideways, its top level with the first section; no double stroke. */
.ma-rhead { align-items: flex-start; justify-content: space-between; gap: 20px; }
.ma-rhead > div { min-width: 0; }
.ma-co { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 14px; font-weight: 600; color: var(--text-strong); }
.ma-sum { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 14.5px; color: var(--text-2); }
.ma-sum b { color: var(--text-strong); }
.ma-where { padding-left: 16px; border-left: 1px solid var(--line); }
.ma-body { grid-template-columns: minmax(0, 1fr) 420px; }
.ma-side { overflow-x: hidden; margin-top: 0; }
.ma-groups > .ma-grp:first-child .ma-gh { margin-top: 0; }
.ma-tr { grid-template-columns: 40px minmax(0, 1fr) 104px 48px 64px 66px; }
.ma-tr > span:last-child { white-space: nowrap; }
.ma-tr.on { background: var(--accent-soft); box-shadow: none; }
.ma-tr.on .ma-a { font-weight: 600; }
@media (max-width: 1280px) { .ma-body { grid-template-columns: minmax(0, 1fr) 360px; } }
/* Panel dropdowns: our own chevron with room to its right */
.ma-sd select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2363728b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
.ma-sd select:disabled { background-color: var(--raised); }
/* The panel and its action (Si, 12 Nov): the panel stays white and points at the open row with a notch on its left edge;
   the open row uses the same light grey as hover, in bold. No outline, no second grey. */
.ma-sidew { position: sticky; top: 20px; align-self: start; }
.ma-sidew .ma-side { position: static; }
.ma-nub { position: absolute; left: -9px; z-index: 2; width: 18px; height: 18px; margin-top: -9px; background: var(--surface); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); transition: top .18s ease; pointer-events: none; }
.ma-nub[hidden] { display: none; }
.ma-tr.on, .ma-tr:not(.ma-th):hover { background: var(--raised); box-shadow: none; }
.ma-tr.on .ma-a { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ma-nub { transition: none; } }
.ma-sd-head { display: flex; align-items: center; gap: 10px; margin: -2px 0 2px; font-size: 13px; color: var(--text-2); }
.ma-sd-head b { color: var(--text-strong); font-size: 14px; }
.ma-sd-head span::before { content: "·"; margin-right: 10px; color: var(--text-3); }
.ma-sd-ok { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--success-text); font-weight: 600; }
.ma-sd-ok::before { content: none !important; }
.ma-sd-ok svg { width: 14px; height: 14px; stroke-width: 3; }
/* No frosted blur behind the bottom bar: it made Chrome redraw the sticky panel with broken text on returning to the tab. */
.ma-foot { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
.ma-sidew { isolation: isolate; }
.ma-count-line { margin: -4px 0 0; font-size: 15px; color: var(--text-2); }
.ma-count-line b { color: var(--text-strong); }
.ma-pill.done svg { width: 13px; height: 13px; stroke-width: 3; }
/* ===== New Business (David's brief, Phases 1–4): the Meeting Actions layout, with the deal's four stages as tabs ===== */
.nb .linkbtn { padding: 0; border: 0; background: none; font: 600 13.5px var(--font); color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); cursor: pointer; }
.nb .linkbtn:hover { text-decoration-color: currentColor; }
.nb .ma-sum .linkbtn { margin-left: auto; }
.nb .why { color: var(--text-3); font-size: 14px; }
.nb .hub-btn.sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.nb .hub-btn.ghost { background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-strong); box-shadow: none; }
.nb .hub-btn.ghost:hover { background: var(--raised); color: var(--text-strong); filter: none; }
.nb .hub-btn.copied { background: var(--success-soft); border-color: transparent; color: var(--success-text); }
.nb .hub-btn:disabled { opacity: .45; pointer-events: none; }
.ma-pill.warn { background: color-mix(in srgb, #e2a03f 18%, transparent); color: #8a5a10; }
:root:not([data-theme="light"]) .ma-pill.warn { color: #f2c27a; }
/* the list */
.nb-row { grid-template-columns: minmax(200px, 1.3fr) minmax(170px, 1fr) minmax(220px, 1.5fr) 56px 130px; }
.nb-row .ma-client > span:last-child { display: grid; min-width: 0; }
.nb-row .ma-client b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-row .ma-client small { font-weight: 400; font-size: 13px; color: var(--text-3); }
.nb-where { display: grid; gap: 6px; }
.nb-where small { font-size: 13px; color: var(--text-2); }
.nb-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 132px; }
.nb-track i { height: 6px; border-radius: 99px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.nb-track i.on { background: var(--navy); box-shadow: none; }
.nb-track i.now { background: linear-gradient(90deg, var(--navy) 50%, color-mix(in srgb, var(--navy) 30%, transparent) 50%); box-shadow: none; }
:root:not([data-theme="light"]) .nb-track i.on { background: var(--accent-text); }
:root:not([data-theme="light"]) .nb-track i.now { background: linear-gradient(90deg, var(--accent-text) 50%, color-mix(in srgb, var(--accent-text) 30%, transparent) 50%); }
.nb-track.lost i { background: var(--raised); }
.nb-next { display: flex; align-items: center; gap: 8px; color: var(--text-2); line-height: 1.35; }
.nb-next.you { color: var(--text-strong); font-weight: 600; }
.nb-next > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--navy); }
:root:not([data-theme="light"]) .nb-next > i { background: var(--accent-text); }
.nb-next.done { color: var(--success-text); } .nb-next.done svg { width: 14px; height: 14px; stroke-width: 3; }
.nb-next.lost { color: var(--text-3); }
/* one deal */
.nb-dhead { display: flex; align-items: center; gap: 16px; }
.nb-dhead h1 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: var(--text-strong); }
.nb-dhead p { margin: 5px 0 0; font-size: 14.5px; color: var(--text-2); }
.nb-dhead p a { color: var(--text-strong); font-weight: 600; }
.nb-dhead .ma-test { margin-left: 4px; font-size: 12px; }
.nb-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.nb-step { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px; border: 0; border-radius: 11px; background: none; text-align: left; font: inherit; color: var(--text-2); cursor: pointer; transition: background-color .15s; }
.nb-step + .nb-step::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
.nb-step:hover { background: var(--raised); }
.nb-step.on { background: var(--raised); }
.nb-step.on + .nb-step::before, .nb-step:hover + .nb-step::before, .nb-step.on::before, .nb-step:hover::before { opacity: 0; }
.nb-step > b { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: 13px; font-weight: 700; color: var(--text-3); }
.nb-step > b svg { width: 15px; height: 15px; stroke-width: 3; }
.nb-step.now > b { background: var(--navy); box-shadow: none; color: #fff; }
.nb-step.done > b { background: var(--success); box-shadow: none; color: #fff; }
:root:not([data-theme="light"]) .nb-step.now > b { background: var(--silver); color: var(--navy-deep); }
.nb-step > span { display: grid; min-width: 0; }
.nb-step strong { font-size: 14.5px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-step.later strong { color: var(--text-2); font-weight: 500; }
.nb-step small { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-step.on strong { font-weight: 700; }
.nb-stage { display: grid; gap: 18px; animation: nbIn .22s ease backwards; }
@keyframes nbIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* the list-and-panel inside a stage */
.nb-tr { grid-template-columns: 40px minmax(0, 1fr) auto !important; min-height: 50px; }
.nb-tr > span:last-child { padding-right: 14px; }
.nb-tr .ma-a { display: block; }
.nb-sub { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--text-3); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-tr.mute .ma-a { color: var(--text-3); font-weight: 400; }
.ma-type.nb-k-opinion { background: color-mix(in srgb, var(--t-subitem) 14%, transparent); color: var(--t-subitem); }
.ma-type.nb-k-question { background: color-mix(in srgb, #e2a03f 16%, transparent); color: #8a5a10; }
.ma-type.nb-k-inferred { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-3); }
:root:not([data-theme="light"]) .ma-type.nb-k-question { color: #f2c27a; }
.nb-prov { margin: 0; font-size: 12.5px; color: var(--text-3); }
.nb-was { flex-wrap: wrap; } .nb-was span { flex: 1 1 100%; font-weight: 500; }
.nb-was .hub-btn { margin-left: 0 !important; }
.nb-seg { display: inline-flex; gap: 8px; }
.nb-more > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text-2); list-style: none; }
.nb-more > summary::before { content: "+"; font-size: 17px; line-height: 1; }
.nb-more[open] > summary::before { content: "–"; }
.nb-more[open] > summary { margin-bottom: 10px; }
/* notes */
.nb-notes { display: grid; gap: 10px; padding: 18px; }
.nb-notes h2 { margin: 0; font-size: 20px; } .nb-notes h3 { margin: 0; font-size: 15px; }
.nb-notes.big { padding: 26px; }
.nb-notes .why { margin: 0; }
.nb-notes textarea, .nb-q input, .nb-q textarea, .nb-mail input, .nb-mail textarea, .nb-pick textarea, .nb-mail-sd input, .nb-mail-sd textarea, .nb-slide input, .nb-slide textarea, .nb-rule input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--input-bg); font: 400 15px/1.5 var(--font); color: var(--text-strong); resize: vertical; }
.nb-notes textarea:focus, .nb-q input:focus, .nb-q textarea:focus, .nb-mail input:focus, .nb-mail textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--accent-soft); }
.nb-pdnotes { display: grid; gap: 10px; }
.nb-pdnotes h3 { margin: 6px 0 0; font-size: 14px; color: var(--text-3); font-weight: 600; }
.nb-pdnotes article { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.nb-pdnotes small { color: var(--text-3); font-size: 12.5px; } .nb-pdnotes p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text); white-space: pre-wrap; }
/* pitch prep questions */
.nb-ask { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.nb-q { display: grid; gap: 16px; }
.nb-q h2, .nb-unc h3, .nb-pick h2, .nb-empty h2 { margin: 0; font-size: 20px; color: var(--text-strong); }
.nb-q > .why { margin: -8px 0 0; }
.nb-fl { display: grid; gap: 6px; }
.nb-fl > span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.nb-fl small { font-size: 12.5px; color: var(--text-3); }
.nb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nb-chip input { position: absolute; opacity: 0; pointer-events: none; }
.nb-chip span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-size: 14px; color: var(--text-2); cursor: pointer; transition: background-color .15s, color .15s; }
.nb-chip span:hover { background: var(--raised); }
.nb-chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
:root:not([data-theme="light"]) .nb-chip input:checked + span { background: var(--silver); border-color: transparent; color: var(--navy-deep); }
.nb-chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-line); }
.nb-q-f { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
.nb-unc { display: grid; gap: 10px; position: sticky; top: 20px; }
.nb-unc .why { margin: 0; }
.nb-unc-r { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-strong); transition: opacity .3s; }
.nb-unc-r small { display: block; font-size: 12px; color: var(--text-3); }
.nb-unc-r.gone { opacity: .35; } .nb-unc-r.gone .ma-tick { background: var(--success); border-color: var(--success); color: #fff; }
/* cards */
.nb-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.nb-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 15px; color: var(--text-strong); }
.nb-card h3 .linkbtn { margin-left: auto; font-size: 13px; }
.ma-grp > .nb-card { margin-top: 8px; }
.nb-src { margin: 10px 0 0; font-size: 12.5px; color: var(--text-3); }
.nb-seo { padding: 0; overflow: hidden; }
.nb-seo-h, .nb-seo-r { display: grid; grid-template-columns: minmax(0, 1.4fr) 120px 120px minmax(0, 1.2fr); gap: 10px; align-items: center; padding: 10px 16px; }
.nb-seo-h { background: var(--raised); font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.nb-seo-r { border-top: 1px solid var(--line); font-size: 14px; color: var(--text); }
.nb-seo-r b { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.nb-top { font-size: 12.5px; color: var(--text-2); line-height: 1.45; word-break: break-all; }
.nb-seo .nb-src { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); }
.nb-checks { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, #e2a03f 12%, transparent); }
.nb-checks b { font-size: 12.5px; color: #8a5a10; } .nb-checks p { margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.45; }
:root:not([data-theme="light"]) .nb-checks b { color: #f2c27a; }
.nb-slide { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; }
.nb-slide > b { width: 26px; height: 26px; display: grid; place-items: center; margin-top: 6px; border-radius: 7px; background: var(--raised); font-size: 12px; color: var(--text-2); }
.nb-slide > div { display: grid; gap: 4px; }
.nb-slide input { font-weight: 600; padding: 7px 10px; font-size: 14px; }
.nb-slide textarea { padding: 7px 10px; font-size: 13.5px; resize: none; overflow: hidden; }
/* after the pitch */
.nb-pick { display: grid; gap: 12px; }
.nb-pick > .why { margin: -4px 0 4px; }
.nb-pick .ma-mlist { max-height: 420px; }
.nb-pick .ma-paste .hub-btn { margin-top: 2px; }
.nb-two { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 18px; align-items: start; }
.nb-col { display: grid; gap: 14px; min-width: 0; }
.nb-ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.nb-agreed { display: grid; }
.nb-agreed > div { display: grid; grid-template-columns: minmax(0, 1fr) 30px 110px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--text-strong); }
.nb-agreed > div:first-child { border-top: 0; padding-top: 0; }
.nb-agreed small { font-size: 13px; color: var(--text-2); text-align: right; }
.nb-prices { display: grid; }
.nb-prices > div { display: grid; grid-template-columns: minmax(0, 1fr) 120px 130px; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.nb-prices > div:first-child { border-top: 0; padding-top: 0; }
.nb-prices b { display: block; font-weight: 600; color: var(--text-strong); }
.nb-prices small { font-size: 12.5px; color: var(--text-3); }
.nb-prices .ma-pill { justify-self: end; }
.nb-prices .nb-why { grid-column: 1 / -1; }
.nb-prices .check .nb-why { color: #8a5a10; } :root:not([data-theme="light"]) .nb-prices .check .nb-why { color: #f2c27a; }
.nb-warn { color: #8a5a10 !important; } :root:not([data-theme="light"]) .nb-warn { color: #f2c27a !important; }
.nb-mail { position: sticky; top: 20px; display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 10px 30px color(display-p3 0.03 0.06 0.15 / .06); }
.nb-mail-h { display: grid; gap: 2px; } .nb-mail-h h3 { margin: 0; font-size: 16px; color: var(--text-strong); } .nb-mail-h .why { font-size: 13px; }
.nb-mail label > span, .nb-mail-sd label > span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.nb-mail textarea, .nb-mail-sd textarea { resize: none; overflow: hidden; font-size: 14.5px; line-height: 1.6; }
.nb-mail .nb-src { margin: 0; }
.nb-mail > .hub-btn { justify-self: start; }
/* empty stages, the working card */
.nb-empty { display: grid; justify-items: start; gap: 10px; padding: 32px; }
.nb-empty .why { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.55; }
.nb-empty .hub-btn { margin-top: 6px; }
.nb-work { max-width: 640px; }
/* pricing rules dialog */
.nb-rule { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.nb-rule input { padding: 8px 10px; font-size: 14px; }
.nb-rule-h span { font-size: 12px; font-weight: 600; color: var(--text-3); }
.nb .ma-foot svg, .nb-dhead svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nb .ma-foot .ma-count svg { color: var(--success-text); vertical-align: -3px; stroke-width: 3; }
@media (max-width: 1180px) { .nb-two, .nb-ask { grid-template-columns: 1fr; } .nb-mail, .nb-unc { position: static; } }
@media (max-width: 900px) { .nb-steps { grid-template-columns: 1fr 1fr; } .nb-step + .nb-step::before { display: none; } .nb-row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .nb-stage { animation: none; } }
/* review fixes (12 Nov) */
.nb .ma-sum .ma-where { border-left: 0; padding-left: 0; }
.nb .ma-sum .ma-where::before { content: "·"; margin-right: 10px; color: var(--text-3); }
.nb-tr .ma-a { min-width: 0; overflow: hidden; }
.nb-exline { margin: -6px 0 0; font-size: 14px; color: var(--text-3); } .nb-exline b { color: var(--text-2); }
.nb-next { font-weight: 400; color: var(--text); }
.nb-next.you { font-weight: 400; color: var(--text-strong); }
.nb-next.mine { font-weight: 600; }
.nb-row > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.nb-row.ma-lhead > span:last-child { text-align: right; }
.nb-track i.now { background: var(--navy); }
:root:not([data-theme="light"]) .nb-track i.now { background: var(--accent-text); }
.nb-checks { background: none; padding: 0; gap: 8px; }
.nb-checks b { color: var(--text-2); }
.nb-checks p { position: relative; padding-left: 16px; }
.nb-checks p::before { content: ""; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #e2a03f; }
.nb-seo.nosite .nb-seo-h, .nb-seo.nosite .nb-seo-r { grid-template-columns: minmax(0, 1.4fr) 140px minmax(0, 1.3fr); }
.nb-seo-h > span:nth-child(2), .nb-seo-r > span:nth-child(2) { text-align: right; padding-right: 24px; }
.nb-agreed small { white-space: nowrap; }
.nb-agreed > div { grid-template-columns: minmax(0, 1fr) 30px minmax(90px, auto); }
.nb-norules { margin: 0 0 10px; font-size: 13.5px; color: #8a5a10; } :root:not([data-theme="light"]) .nb-norules { color: #f2c27a; }
.nb-prices.norules .nb-why { display: none; }
.nb .ma-foot > .why { font-size: 13px; }

/* Client brain freshness, top right beside the breadcrumb */
.hub .hub-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hub-fresh { position: relative; flex: none; }
.hub-fresh > button { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; white-space: nowrap; }
.hub-fresh > button:hover { color: var(--text-strong); }
.hub-fresh > button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.hub-fresh i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.hub-fresh.aging i { background: var(--warn); }
.hub-fresh.old i { background: #c4483d; }
.hf-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 280px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(10,20,45,.18); font-size: 13px; display: grid; gap: 6px; }
.hf-pop[hidden] { display: none; }
.hf-pop b { font-size: 13.5px; }
.hf-pop p { margin: 0; display: flex; justify-content: space-between; gap: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.hf-pop small { color: var(--text-3); line-height: 1.45; margin-top: 4px; }
@media (max-width: 700px) { .hub-fresh > button { padding: 4px 10px; font-size: 12px; } }


/* ---------- E2M's palette (Si, 13 Nov): the same navy, blue and soft blue glow as the hub E2M built for David, so InspireOS
   feels like it comes from the same place. Lighter shadows than theirs. Values from their stylesheet. ---------- */
:root, :root[data-theme="light"] {
  --navy-deep: #0f2840; --navy: #1a3d5c; --navy-2: #2a5580; --blue: #4183c4;
  --grad: linear-gradient(135deg, #4183c4 0%, #2f6fad 100%);
}
:root[data-theme="light"] {
  --bg: #f4f7fb; --surface: #ffffff; --input-bg: #ffffff; --input-chip: #eef3f9; --raised: #f8fafd; --sunk: #eef3f9;
  --line: #d8e2ef; --line-strong: #c6d3e4; --card-edge: #d8e2ef;
  --text: #1f2937; --text-strong: #0f2840; --text-2: #64748b; --text-3: #8a97a8;
  --accent: #4183c4; --accent-hover: #2f6fad; --accent-text: #2a5580; --accent-soft: rgba(65, 131, 196, .12); --accent-line: rgba(65, 131, 196, .4);
  --info: #2a5580; --info-soft: rgba(65, 131, 196, .1);
  --shadow-1: 0 1px 2px rgba(15, 40, 64, .06); --box-shadow: 0 1px 2px rgba(15, 40, 64, .05), 0 6px 18px rgba(15, 40, 64, .06);
  --shadow-pop: 0 12px 30px rgba(15, 40, 64, .14), 0 0 0 1px rgba(15, 40, 64, .05);
}
:root:not([data-theme="light"]) {
  --bg: #0b0f14; --surface: #161d27; --input-bg: #1a2230; --input-chip: #1d2634; --raised: #1a2230; --sunk: #10151d;
  --line: #2a3544; --line-strong: #364457; --card-edge: #2a3544;
  --text: #e8edf3; --text-strong: #f8fafc; --text-2: #9aa8b8; --text-3: #7d8b9c;
  --accent: #9ec5e8; --accent-hover: #b8d4f0; --accent-text: #b8d4f0; --accent-soft: rgba(158, 197, 232, .16); --accent-line: rgba(158, 197, 232, .45);
}
.hub-side, :root:not([data-theme="light"]) .hub-side { background: linear-gradient(180deg, #1a3d5c 0%, #0f2840 100%); }
:root:not([data-theme="light"]) .hub-side { border-right: 1px solid rgba(255, 255, 255, .06); }
.hub-btn:not(.ghost) { box-shadow: 0 2px 8px rgba(65, 131, 196, .3); }
.hub-btn:not(.ghost):hover { box-shadow: 0 4px 14px rgba(65, 131, 196, .42); filter: none; }
/* Status on each tool card: Active (green) or Beta (orange), the dot breathing very slowly. */
.tc-state.active { background: rgba(22, 163, 74, .1); color: #15803d; }
.tc-state.active i { background: #2cc26a; box-shadow: 0 0 8px rgba(44, 194, 106, .7); animation: tcPulse 2.4s ease-in-out infinite; }
.tc-state.beta { background: rgba(234, 120, 20, .12); color: #b45309; }
.tc-state.beta i { background: #f08a24; box-shadow: 0 0 8px rgba(240, 138, 36, .65); animation: tcPulse 2.4s ease-in-out infinite; }
:root:not([data-theme="light"]) .tc-state.active { background: rgba(34, 197, 94, .18); color: #86efac; }
:root:not([data-theme="light"]) .tc-state.beta { background: rgba(240, 138, 36, .18); color: #fdba74; }
.tc-state { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
@keyframes tcPulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tc-state i { animation: none; } }
/* E2M's card details (Si, 13 Nov, from their tool cards): the icon on a navy-to-blue tile in white, the same gradient on
   the call-to-action buttons, and their small uppercase tags. Their shadows, toned down. */
:root, :root[data-theme="light"] { --grad: linear-gradient(135deg, #2a5580 0%, #4183c4 100%); }
.tc-ico { background: linear-gradient(135deg, #1a3d5c 0%, #4183c4 100%); color: #fff; box-shadow: 0 6px 14px rgba(26, 61, 92, .2), inset 0 1px 0 rgba(255, 255, 255, .22); border-radius: 14px; }
.tc-ico svg { stroke: #fff; }
.hub-btn:not(.ghost), .hub-card.tool .hub-btn { background: var(--grad); border-radius: 12px; box-shadow: 0 4px 12px rgba(65, 131, 196, .26); }
.hub-btn:not(.ghost):hover, .hub-card.tool .hub-btn:hover { box-shadow: 0 6px 16px rgba(65, 131, 196, .36); }
.tc-tags span, .hr-tags span { height: auto; padding: 4px 10px; background: rgba(65, 131, 196, .14); color: #1a3d5c; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
:root:not([data-theme="light"]) .tc-tags span, :root:not([data-theme="light"]) .hr-tags span { background: rgba(158, 197, 232, .16); color: #b8d4f0; }
.tc-ico:not(.sm) { width: 50px; height: 50px; border-radius: 15px; }
.tc-ico:not(.sm) svg { width: 24px; height: 24px; }
/* The Cards / List switch: the selected one takes the same gradient as the call-to-action buttons. */
.hub-seg button.on { background: var(--grad); color: #fff; box-shadow: 0 2px 8px rgba(65, 131, 196, .26); }
.hub-seg button.on svg { stroke: #fff; color: #fff; }
/* The left menu (Si, 13 Nov): between E2M's dark sidebar and the bright button blue: the buttons' deep blue down to navy. */
.hub-side, :root:not([data-theme="light"]) .hub-side { background: linear-gradient(180deg, #2a5580 0%, #1a3d5c 100%); }

/* The quiet note under "Item to update" in the side panel (Si, 13 Nov): only there, never on the rows. */
.ma-hint { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--text-2); }
.ma-hint svg { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; }
.ma-hint { align-items: flex-start; } .ma-hint svg { margin-top: 2px; } .ma-hint.low { color: var(--warn); }
/* "No item picked" stands out in orange (Si, 13 Nov), still only in the side panel. */
.ma-hint.warn { padding: 8px 10px; border-radius: 10px; background: rgba(240, 138, 36, .12); border: 1px solid rgba(240, 138, 36, .4); color: #b45309; font-weight: 600; font-size: 13px; }
.ma-hint.warn svg { stroke: #f08a24; }
:root:not([data-theme="light"]) .ma-hint.warn { background: rgba(240, 138, 36, .16); color: #fdba74; }
/* One dropdown look everywhere (Si, 13 Nov): every select in the hub gets the same chevron, 12px in from the edge, with room
   for it in the padding, so no screen falls back to the browser's own arrow hard against the side. */
:where(.hub, .hub-body) select { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2363728b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
.ma-rcpts select { padding: 0 30px 0 12px; background-position: right 10px center; background-size: 14px; }
.ma-dlg select { min-height: 36px; border: 1px solid var(--line-strong); border-radius: 10px; font: 400 14px var(--font); color: var(--text-strong); padding-left: 12px; }
.ma-rcpts select { min-height: 28px; border-radius: 999px; font-size: 13px; }

/* To / CC chips (Si, 13 Nov): the name is just a label; hovering a chip shows "CC"/"To" to move it and a round × to remove it.
   On touch screens (no hover) both controls always show. */
.ma-chip { gap: 2px; padding: 0 4px 0 12px; height: 30px; border: 1px solid var(--accent-line); }
.ma-chip-n { font: 500 13px var(--font); color: var(--text-strong); white-space: nowrap; }
.ma-chip .ma-chip-mv, .ma-chip .ma-chip-x { height: 22px; min-width: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; opacity: 0; transition: opacity .15s, background-color .15s, color .15s; }
.ma-chip .ma-chip-mv { font: 600 10.5px var(--font); letter-spacing: .04em; color: var(--accent-text); background: var(--surface); margin-left: 4px; }
.ma-chip .ma-chip-x { padding: 0; width: 22px; color: var(--text-2); }
.ma-chip .ma-chip-x svg { width: 12px; height: 12px; }
.ma-chip:hover .ma-chip-mv, .ma-chip:hover .ma-chip-x, .ma-chip:focus-within .ma-chip-mv, .ma-chip:focus-within .ma-chip-x { opacity: 1; }
.ma-chip .ma-chip-x:hover { background: #dc2626; color: #fff; }
.ma-chip .ma-chip-mv:hover { background: var(--grad); color: #fff; }
@media (hover: none) { .ma-chip .ma-chip-mv, .ma-chip .ma-chip-x { opacity: 1; } }
.ma-chip { max-width: 320px; overflow: hidden; transition: max-width .22s ease, opacity .18s ease, transform .22s ease, padding .22s ease, margin .22s ease, border-width .22s ease; }
.ma-chip.out { max-width: 0 !important; opacity: 0; transform: scale(.85); padding-left: 0; padding-right: 0; margin-right: -8px; border-width: 0; }
.ma-chip.in { animation: chipIn .26s cubic-bezier(.2,.8,.2,1) both; }
@keyframes chipIn { from { opacity: 0; transform: scale(.85); max-width: 0; } to { opacity: 1; transform: none; max-width: 320px; } }
@media (prefers-reduced-motion: reduce) { .ma-chip, .ma-chip.in { transition: none; animation: none; } }
/* Every gradient call-to-action button has white text, wherever it sits (the Pipeline cards had kept an older dark text). */
.hub .hub-btn:not(.ghost), .hub .pl-card .hub-btn, :root:not([data-theme="light"]) .hub .pl-card .hub-btn { color: #fff; border-color: transparent; }
.hub .hub-btn:not(.ghost) svg { stroke: #fff; }
/* Pipeline columns run from below the search bar to the bottom of the window (Si, 13 Nov), all the same height. */
.pl-board { min-height: calc(100vh - 372px); align-items: stretch; }
.pl-col { min-height: 0; }
@media (max-width: 760px) { .pl-board { min-height: 0; } .pl-col { min-height: 420px; } }
/* ---------- Prospects (13 Nov): the client page's layout, for deals from Pipedrive ---------- */
.pr-item { display: flex; align-items: center; gap: 10px; padding-top: 8px; padding-bottom: 8px; }
.pr-ini { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--grad); color: #fff; font-size: 10.5px; font-weight: 700; }
.pr-t { display: grid; min-width: 0; }
.pr-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-t small { font-size: 11.5px; color: var(--text-3); }
.pr-t small.pr-go, .pl-next .pr-go { color: #15803d; } .pr-t small.pr-wait, .pl-next .pr-wait { color: #b45309; }
:root:not([data-theme="light"]) .pr-t small.pr-go, :root:not([data-theme="light"]) .pl-next .pr-go { color: #86efac; }
:root:not([data-theme="light"]) .pr-t small.pr-wait, :root:not([data-theme="light"]) .pl-next .pr-wait { color: #fdba74; }
.pl-card { text-decoration: none; color: inherit; display: grid; gap: 4px; }
.pl-card > b { display: block; } .pl-card > span { display: block; }
.pl-next .pr-go, .pl-next .pr-wait { font-weight: 600; font-size: 12.5px; }
.hp-item.pr-item { height: auto; min-height: 44px; align-items: center; }
.pr-head .cp-t p { margin: 4px 0 0; color: var(--text-2); }
.pr-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font: 600 11px var(--font); letter-spacing: .06em; text-transform: uppercase; background: rgba(65, 131, 196, .14); color: #1a3d5c; vertical-align: middle; }
.pr-badge.ex { background: var(--sunk); color: var(--text-2); }
:root:not([data-theme="light"]) .pr-badge { background: rgba(158, 197, 232, .16); color: #b8d4f0; }
.pr-st { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; }
.pr-st i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.pr-st.pr-go i { background: #2cc26a; box-shadow: 0 0 8px rgba(44, 194, 106, .6); animation: tcPulse 2.4s ease-in-out infinite; }
.pr-st.pr-wait i { background: #f08a24; box-shadow: 0 0 8px rgba(240, 138, 36, .6); animation: tcPulse 2.4s ease-in-out infinite; }
.pr-body { display: grid; gap: 16px; }
.pr-wait { padding: 28px; } .pr-wait h3 { margin: 0 0 6px; }
.pr-next { padding: 14px 18px; } .pr-next b { color: var(--accent-text); margin-right: 6px; }
.pr-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.pr-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; align-items: start; }
.pr-g { padding: 18px 20px; min-width: 0; } .pr-g h3 { margin: 0 0 10px; font-size: 15px; } .pr-g h4 { margin: 14px 0 4px; font-size: 13.5px; color: var(--accent-text); }
.pr-g ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pr-g li { line-height: 1.5; } .pr-g li small { display: block; color: var(--text-3); font-size: 12px; }
.pr-k { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--sunk); color: var(--text-2); font-size: 11px; font-weight: 600; }
.pr-txt { line-height: 1.6; color: var(--text); white-space: normal; }
.pr-deck { padding: 18px 20px; } .pr-deck-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pr-deck-h h3 { margin: 0; } .pr-deck-h .gap { flex: 1; }
.pr-deck-v { margin-top: 14px; border-radius: 12px; background: var(--sunk); min-height: 120px; padding: 18px; }
.pr-mail { margin-top: 10px; padding: 14px 16px; border-radius: 12px; background: var(--sunk); } .pr-mail b { display: block; margin-bottom: 8px; }
.pr-seo { padding: 18px 20px; overflow-x: auto; } .pr-seo table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pr-seo th, .pr-seo td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } .pr-seo th { color: var(--text-2); font-weight: 600; font-size: 12.5px; }
.pr-seo .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-known li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; } .pr-known span { color: var(--text-2); } .pr-known i { color: #b45309; font-style: normal; font-weight: 600; }
.pr-seg button small { margin-left: 6px; font-size: 11.5px; opacity: .75; font-variant-numeric: tabular-nums; }
.ct-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pr-lost { display: grid; gap: 10px; }
.pr-lrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; }
.pr-lrow .pr-t { flex: 1; } .pr-lrow .pr-t b { font-size: 15px; }
.pr-badge.lost { background: rgba(220, 38, 38, .1); color: #b91c1c; } .pr-badge.nurture { background: rgba(240, 138, 36, .12); color: #b45309; }
.pl-board.pr-board { grid-template-columns: repeat(4, minmax(160px, 1fr)); overflow-x: visible; }
@media (max-width: 1100px) { .pl-board.pr-board { grid-template-columns: repeat(2, minmax(160px, 1fr)); } }
/* Card states: only when they add something (busy spinner, waiting, needs David, failed, done) */
.pr-s { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.pr-s.busy { color: var(--accent-text); } .pr-s.warn { color: #b45309; } .pr-s.err { color: #b91c1c; } .pr-s.done { color: #15803d; }
.pr-s .spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: prSpin .8s linear infinite; }
@keyframes prSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pr-s .spin { animation: none; } }
.pr-t .pr-s { font-size: 11.5px; }
/* Card footers (Si, 13 Nov): the person's circle never squashes when the state wraps to two lines; the state reads tight. */
.pl-next { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl-next .bd-av { flex: 0 0 auto; width: 24px; height: 24px; min-width: 24px; border-radius: 50%; display: inline-grid; place-items: center; aspect-ratio: 1; }
.pl-next .pr-s, .pr-t .pr-s { line-height: 1.15; min-width: 0; }
.pr-item .pr-t { flex: 1; }
.pr-flag { margin-left: auto; flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; font-size: 12px; font-weight: 700; }
.pr-flag svg { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.pr-flag.warn { color: #d97706; background: rgba(240, 138, 36, .14); } .pr-flag.err { color: #dc2626; background: rgba(220, 38, 38, .1); }
.pr-flag.wait { color: var(--text-3); background: var(--sunk); } .pr-flag.done { color: #15803d; } .pr-flag.busy { color: var(--accent-text); }
.pr-flag .spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: prSpin .8s linear infinite; }
/* The list's flag is just an orange flag, no background (Si, 13 Nov). */
.pr-flag.warn, .pr-flag.err, .pr-flag.wait { background: none; }
.pr-flag.warn { color: #f08a24; } .pr-flag.err { color: #dc2626; }
.pr-flag svg { width: 16px; height: 16px; }
.hp-item.on .pr-flag.warn { color: #f08a24; }
.hp-item .pr-flag.warn svg { fill: #f08a24 !important; stroke: #f08a24 !important; color: #f08a24 !important; opacity: 1 !important; }
.hp-item .pr-flag.err svg { fill: #dc2626 !important; stroke: #dc2626 !important; opacity: 1 !important; }
.pr-deck-v { padding: 0; overflow: hidden; background: #d5d8de; }
.pr-deck-w { width: 1920px; transform-origin: 0 0; }
.pr-deck-f { display: block; width: 1920px; border: 0; background: #d5d8de; }
/* The deck is 1920px wide inside; keep it out of the layout so it can't widen the page, and let the preview scroll. */
.pr-deck-v { position: relative; max-height: 72vh; overflow: hidden auto; }
.pr-deck-w { position: absolute; top: 0; left: 0; }
/* Prospects: prices against David's rules, hand-over status */
.pr-prices li small { display: block; color: var(--muted); }
.pr-prices li.chk small { color: #b35c00; }
.pr-done { font-size: 13px; color: var(--muted); margin-right: 8px; }
/* 13 Nov: navy pulled towards Inspire's brand navy (#233C62, as in the logo and pitch deck). Dark ends start at brand navy and move into the lighter blue. */
:root, :root[data-theme="light"] { --navy-deep: #172a4b; --navy: #233c62; --navy-2: #2d5287; --text-strong: #172a4b; --accent-text: #233c62; --info: #233c62;
  --grad: linear-gradient(135deg, #233c62 0%, #3f7bbd 100%); }
.hub-side, :root:not([data-theme="light"]) .hub-side { background: linear-gradient(180deg, #233c62 0%, #2d5287 100%); }
.tc-ico { background: linear-gradient(135deg, #233c62 0%, #3f7bbd 100%); box-shadow: 0 6px 14px rgba(35, 60, 98, .22), inset 0 1px 0 rgba(255, 255, 255, .22); }
.tc-tags span, .hr-tags span { color: #233c62; }
/* Dark mode: the desktop and phone frames on client pages turn silver, so they stand out from the dark page. */
:root[data-theme="dark"] .cp-mac, :root[data-theme="dark"] .cp-phone { background: linear-gradient(160deg, #e9ecf0 0%, #c5cad2 55%, #aab0b9 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .12); }
:root[data-theme="dark"] .cp-mac::after { background: rgba(0, 0, 0, .25); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cp-mac, :root:not([data-theme="light"]) .cp-phone { background: linear-gradient(160deg, #e9ecf0 0%, #c5cad2 55%, #aab0b9 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .55); } }
/* Pitch deck reader: one landscape page at a time, back and forward underneath. */
.pr-rd { margin-top: 14px; outline: none; max-height: none; overflow: visible; background: none; padding: 0; position: static; height: auto !important; min-height: 0 !important; }
.pr-rd-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .1); border: 1px solid var(--line); }
.pr-rd-stage .pr-deck-w { position: absolute; top: 0; left: 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.pr-rd:focus-visible .pr-rd-stage { box-shadow: 0 0 0 3px var(--accent-soft), 0 8px 24px rgba(15, 23, 42, .1); }
.pr-rd-bar { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; }
.pr-rd-n { min-width: 96px; text-align: center; font: 600 14px var(--font); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pr-rd-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--grad); color: #fff; box-shadow: 0 4px 12px rgba(35, 60, 98, .25); transition: transform .15s, opacity .15s; }
.pr-rd-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pr-rd-btn:hover:not(:disabled) { transform: translateY(-1px); }
.pr-rd-btn:disabled { opacity: .3; cursor: default; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .pr-rd-stage .pr-deck-w { transition: none; } }
/* Notes on the presentation */
.pr-rd-bar { position: relative; }
.pr-rd-add { position: absolute; right: 0; }
.pr-rd-notes { display: grid; gap: 8px; margin-top: 12px; }
.pr-rd-notes:empty { display: none; }
.pr-note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #fff7e8; border: 1px solid #f3dcae; font-size: 14px; color: var(--text-strong); }
.pr-note span { flex: 1; } .pr-note small { display: block; margin-top: 2px; color: var(--text-3); font-size: 12px; } .pr-note em { font-style: normal; font-weight: 600; color: #b35c00; margin-right: 4px; }
.pr-note.done { background: var(--raised); border-color: var(--line); margin-top: 8px; }
.pr-note-x { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; } .pr-note-x:hover { background: rgba(0,0,0,.06); color: #c0392b; } .pr-note-x svg { width: 12px; height: 12px; }
.pr-note-new { display: grid; gap: 8px; } .pr-note-new div { display: flex; justify-content: flex-end; gap: 8px; }
.pr-rr-h { display: block; margin-bottom: 8px; font-size: 14px; } .ma-dlg-b .pr-note + .pr-note { margin-top: 8px; }
:root[data-theme="dark"] .pr-note:not(.done) { background: rgba(243, 156, 18, .1); border-color: rgba(243, 156, 18, .3); }
@media (max-width: 760px) { .pr-rd-add { position: static; } .pr-rd-bar { flex-wrap: wrap; } }
/* The demo prospect: a small tag in the list and on its page */
.pr-demo { flex: none; margin-left: auto; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font: 700 10px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.pr-demo + .pr-flag { margin-left: 6px; }
.pr-badge.demo { background: var(--accent-soft); color: var(--accent-text); }