/* InvestCRM stylesheet.
   Starts from the v2 dashboard's tokens and components, adapted for a multi-page app.
   No inline styles anywhere (the CSP blocks them), so every colour is a class. */

/* ---------- Tokens ---------- */
:root {
  --red: #BF0000;
  --red-dark: #960000;
  --red-tint: #FBEAEA;
  --ink: #2B2B2B;
  --ink-soft: #454543;
  --muted: #5E5E5C;
  --grey: #919294;
  --white: #FFFFFF;
  --paper: #F4F3F1;
  --panel: #FAF9F7;
  --line: #DEDCD8;
  --line-strong: #BDBAB4;
  --live: #1F5D3A;
  --live-tint: #E5F1EA;
  --focus: #BF0000;

  --font: 'Aptos', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --top: 4.25rem;
  --side: 17.5rem;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-sm: 6px;
  /* Soft, layered shadows: a hairline close to the surface plus a wide, faint glow. */
  --shadow-sm: 0 1px 2px rgba(43, 43, 43, .05), 0 1px 3px rgba(43, 43, 43, .04);
  --shadow: 0 1px 2px rgba(43, 43, 43, .04), 0 8px 24px -10px rgba(43, 43, 43, .14);
  --shadow-lg: 0 2px 4px rgba(43, 43, 43, .05), 0 16px 36px -14px rgba(43, 43, 43, .22);
  --edge: rgba(43, 43, 43, .08); /* panel borders: lighter than --line so shadows do the work */
  --glass: rgba(255, 255, 255, .78);
}

/* Fixed accessible palette for statuses and tags. Text on tint is at least 7:1. */
.c-red    { --c-bg: #FEF3F2; --c-fg: #B42318; --c-bd: #FDA29B; --c-solid: #D92D20; } /* warning red, not brand red */
.c-orange { --c-bg: #FDEEE3; --c-fg: #8A3500; --c-bd: #F2C7A6; --c-solid: #C2560C; }
.c-amber  { --c-bg: #FBF1DC; --c-fg: #6E4A00; --c-bd: #EBD6A6; --c-solid: #A87100; }
.c-green  { --c-bg: #E5F1EA; --c-fg: #1F5D3A; --c-bd: #BFDCC9; --c-solid: #2E7D4F; }
.c-teal   { --c-bg: #E0F2F1; --c-fg: #0B5550; --c-bd: #A9D8D4; --c-solid: #13807A; }
.c-blue   { --c-bg: #E6EEFA; --c-fg: #1A4780; --c-bd: #BBCDEA; --c-solid: #2563B0; }
.c-indigo { --c-bg: #ECEBFA; --c-fg: #36308A; --c-bd: #C9C5EE; --c-solid: #4F46C0; }
.c-purple { --c-bg: #F3E9F7; --c-fg: #62287A; --c-bd: #DCC3E6; --c-solid: #8A3BA8; }
.c-pink   { --c-bg: #FBE9F1; --c-fg: #8A2054; --c-bd: #EFC0D5; --c-solid: #B83275; }
.c-brown  { --c-bg: #F3ECE6; --c-fg: #643F22; --c-bd: #DCCAB9; --c-solid: #8B5A33; }
.c-slate  { --c-bg: #E8EBEF; --c-fg: #2F3C55; --c-bd: #C9D0DA; --c-solid: #4A5A78; }
.c-grey   { --c-bg: #EDEDEC; --c-fg: #454543; --c-bd: #D6D5D2; --c-solid: #6F6F6C; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  font-size: 100%;
  scroll-padding-top: calc(var(--top) + 1rem);
}
html.ts-small { font-size: 84.375%; } /* the whole layout is in rem, so this zooms everything, not just text */
html.ts-large { font-size: 118.75%; }
body {
  margin: 0;
  background:
    radial-gradient(70rem 32rem at 100% -8rem, rgba(191, 0, 0, .045), transparent 70%),
    radial-gradient(50rem 30rem at -10% 110%, rgba(43, 43, 43, .035), transparent 70%),
    linear-gradient(180deg, #F7F6F4 0%, #F1F0ED 100%) fixed;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem; /* 17px at standard size */
  line-height: 1.55;
}
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(1.75rem, 3vw, 2.125rem); letter-spacing: -.01em; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1em; }
a { color: var(--red); text-underline-offset: .15em; }
a:hover { color: var(--red-dark); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; vertical-align: -.25em; }
.lead { font-size: 1.125rem; color: var(--ink-soft); max-width: 70ch; }
.muted { color: var(--muted); }
.skip {
  position: absolute; left: -9999px; top: 0.5rem; z-index: 500;
  background: var(--ink); color: #fff; padding: 0.625rem 1rem; border-radius: 6px;
}
.skip:focus { left: 0.75rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1rem; white-space: nowrap;
  border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--white); color: var(--ink);
  font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.btn:hover { background: var(--ink); color: #fff; }
.btn-primary {
  background: linear-gradient(180deg, #CC1414 0%, #B00000 100%); border-color: #B00000; color: #fff;
  box-shadow: 0 1px 2px rgba(150, 0, 0, .25), 0 6px 14px -6px rgba(191, 0, 0, .55);
}
.btn-primary:hover { background: linear-gradient(180deg, #B80A0A 0%, #960000 100%); border-color: var(--red-dark); color: #fff; transform: translateY(-1px); }
.btn-secondary { border-width: 1px; border-color: rgba(43, 43, 43, .16); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--white); color: var(--ink); border-color: rgba(43, 43, 43, .45); box-shadow: var(--shadow); }
.btn-danger { border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-quiet {
  border-color: transparent; background: transparent; color: var(--red);
  text-decoration: underline; text-decoration-color: rgba(191, 0, 0, .4); padding: 0 0.5rem;
}
.btn-quiet:hover { background: var(--red-tint); color: var(--red-dark); }
.btn-lg { min-height: 3rem; font-size: 1.0625rem; padding: 0 1.25rem; }
.btn-sm { min-height: 2.5rem; padding: 0 0.75rem; font-size: .9375rem; gap: 0.375rem; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* Big activity buttons on the profile: Called, Emailed, Met, Teaser sent, Add note */
.action-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.625rem; }
.action-bar + * { margin-top: 1.125rem; }
.action-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem;
  min-height: 4.75rem; padding: 0.5rem;
  border: 1px solid var(--edge); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F6 100%); color: var(--ink);
  font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.action-btn .icon {
  width: 2.25rem; height: 2.25rem; padding: 0.4375rem; border-radius: 10px;
  color: var(--red); background: var(--red-tint);
}
.action-btn:hover { box-shadow: var(--shadow); transform: translateY(-1px); border-color: rgba(191, 0, 0, .25); }
.action-btn[aria-expanded="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(191, 0, 0, .12), var(--shadow); }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 300; height: var(--top);
  display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem;
  background: var(--glass); border-bottom: 1px solid var(--edge);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 20px -16px rgba(43, 43, 43, .3);
}
.tb-brand { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; }
.tb-logo { height: 1.75rem; width: auto; display: block; }
.tb-title { font-weight: 700; color: var(--muted); padding-left: 1rem; border-left: 1px solid var(--line); white-space: nowrap; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.menu-btn {
  display: none; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.875rem;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--white);
  font-weight: 700; cursor: pointer;
}

.textsize { display: flex; align-items: center; gap: 0.25rem; }
.ts-label { font-size: .875rem; color: var(--muted); font-weight: 600; margin-right: 0.375rem; }
.textsize button {
  min-width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--white); color: var(--ink); font-weight: 700; line-height: 1; cursor: pointer;
}
.textsize button.ts-small { font-size: 13px; }
.textsize button.ts-standard { font-size: 17px; }
.textsize button.ts-large { font-size: 22px; }
.textsize button:hover { border-color: var(--ink); }
.textsize button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Layout ---------- */
.app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: calc(100vh - var(--top)); }
.side {
  position: sticky; top: var(--top); height: calc(100vh - var(--top)); overflow-y: auto;
  display: flex; flex-direction: column; gap: 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(250,248,246,.92) 100%); border-right: 1px solid var(--edge); padding: 1.25rem 0.875rem 1.5rem;
}
.main { padding: 1.75rem 2.5rem 5rem; max-width: 77.5rem; width: 100%; min-width: 0; }
.main:has(> .board) { max-width: none; } /* the board view uses the full width */
.main:focus { outline: none; }

/* ---------- Sidebar ---------- */
.side-close-row { display: none; }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-list form { margin: 0; }
.side-link {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.125rem; padding: 0.625rem 0.75rem;
  border: 0; border-radius: var(--radius); background: transparent;
  color: var(--ink); font-size: 1rem; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer;
}
.side-link .icon { color: var(--muted); }
.side-link:hover { background: rgba(43, 43, 43, .05); color: var(--ink); }
.side-link.active { background: linear-gradient(180deg, #3A3A3A 0%, #222 100%); color: #fff; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); }
.side-link.active .icon { color: #fff; }
.side-account { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.side-who { margin: 0 0.75rem 0.5rem; font-size: .9375rem; color: var(--muted); }
.side-who strong { color: var(--ink); }
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 250; }

/* ---------- Bottom tab bar (phones) ---------- */
.tabbar { display: none; }

/* ---------- Page header ---------- */
.page-head { margin-bottom: 1.5rem; }
.page-head-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.5rem; }
.eyebrow { margin: 0 0 0.375rem; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.back-link { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; font-weight: 700; text-decoration: none; }

/* ---------- Panels ---------- */
.panel {
  background: var(--white); border: 1px solid var(--edge); border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--shadow);
}
.panel > h2:first-child, .panel-head h2 { font-size: 1.25rem; margin: 0; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.875rem; }
.panel-note { color: var(--muted); font-size: .9375rem; margin: 0.25rem 0 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }

/* ---------- Summary tiles ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.kpi {
  display: flex; flex-direction: column; gap: 2px; padding: 1rem 1.125rem;
  background: linear-gradient(160deg, #FFFFFF 40%, #FBF8F6 100%); border: 1px solid var(--edge); border-radius: var(--radius-lg);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s;
}
.kpi:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); color: var(--ink); }
.kpi-v { font-size: 1.875rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi-k { font-size: .9375rem; color: var(--muted); font-weight: 600; }
.kpi.accent { background: linear-gradient(160deg, #FFFFFF 30%, #FCEDED 100%); box-shadow: inset 0 3px 0 var(--red), var(--shadow); }

/* ---------- Search ---------- */
.search-form { display: flex; gap: 0.625rem; }
.search-box {
  flex: 1 1 auto; width: 100%; min-height: 3.5rem; padding: 0.75rem 1rem 0.75rem 3rem;
  border: 1px solid rgba(43, 43, 43, .18); border-radius: 12px;
  background: var(--white) url("../img/search.svg") no-repeat 16px center; font-size: 1.0625rem;
  box-shadow: inset 0 1px 2px rgba(43, 43, 43, .05);
}
.search-box::placeholder { color: #6F6E6B; }
.search-box:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px rgba(191, 0, 0, .12); }

/* ---------- Forms ---------- */
.stack > * + * { margin-top: 1.125rem; }
.field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.field > label, .field > .label, fieldset > legend { font-weight: 700; font-size: 1rem; color: var(--ink); }
.field-hint { font-size: .9375rem; color: var(--muted); margin: 0; }
.field-error { font-size: .9375rem; color: var(--red); font-weight: 700; margin: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"],
input[type="url"], input[type="date"], input[type="number"], select, textarea {
  width: 100%; min-height: 3rem; padding: 0.625rem 0.75rem;
  border: 1px solid rgba(43, 43, 43, .2); border-radius: var(--radius); background: var(--white); font-size: 1rem;
  box-shadow: inset 0 1px 2px rgba(43, 43, 43, .05);
}
textarea { min-height: 6.875rem; resize: vertical; line-height: 1.5; }
select { padding-right: 2.25rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(191, 0, 0, .15); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); border-width: 2px; }
.check { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; cursor: pointer; font-weight: 500; }
.check input { width: 1.5rem; height: 1.5rem; accent-color: var(--red); flex: 0 0 auto; margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem 1.25rem; }
.form-grid .full { grid-column: 1 / -1; }
.narrow { max-width: 32.5rem; }
input[readonly] { background: var(--panel); color: var(--ink-soft); }
.details { margin: 0; display: grid; gap: 0.625rem; }
.details > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0.25rem 1rem; }
.details dt { font-weight: 700; }
.details dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .details > div { grid-template-columns: minmax(0, 1fr); } }
.pw-wrap { display: flex; gap: 0.5rem; }
.pw-wrap input { flex: 1 1 auto; }
.pw-toggle { min-width: 5.25rem; }

/* Segmented choice (radio buttons that look like big buttons) */
.choice { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.choice label { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.625rem; font-size: .9375rem; white-space: nowrap;
  border: 1px solid rgba(43, 43, 43, .18); border-radius: var(--radius); background: var(--white); font-weight: 700;
  box-shadow: var(--shadow-sm); transition: border-color .15s, background-color .15s;
}
.choice label:hover span { border-color: rgba(43, 43, 43, .45); }
.choice input:checked + span { background: var(--red-tint); border-color: var(--red); color: #8A0000; box-shadow: 0 0 0 1px var(--red) inset; }
.choice input:checked + span::before { content: "\2713"; margin-right: 0.375rem; }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice label[class*="c-"] span { border-color: var(--c-bd); }
.choice label[class*="c-"] span::before {
  content: ""; width: 0.5625rem; height: 0.5625rem; border-radius: 3px; background: var(--c-solid); margin-right: 0.375rem; flex: 0 0 auto;
}
.choice label[class*="c-"]:hover span { border-color: var(--c-solid); background: var(--c-bg); }
.choice label[class*="c-"] input:checked + span {
  background: var(--c-solid); border-color: var(--c-solid); color: #fff; box-shadow: 0 4px 10px -6px var(--c-solid);
}
.choice label[class*="c-"] input:checked + span::before {
  content: "\2713"; width: auto; height: auto; background: none; border-radius: 0; font-weight: 800;
}
/* Colour-coded dropdown (status): a filled tile when closed, a floating menu of colour tiles when open. */
.picker { position: relative; }
.picker > summary { list-style: none; }
.picker > summary::-webkit-details-marker { display: none; }
.picker-dot { width: 0.5625rem; height: 0.5625rem; border-radius: 3px; background: var(--c-solid); flex: 0 0 auto; }
.picker-button {
  display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.75rem; cursor: pointer;
  border: 1px solid var(--c-solid); border-radius: var(--radius); background: var(--c-solid); color: #fff;
  font-weight: 700; box-shadow: 0 4px 10px -6px var(--c-solid);
}
.picker-button .picker-dot { background: #fff; }
.picker-value { flex: 1 1 auto; min-width: 0; }
.picker-chevron { margin-left: auto; transition: transform .15s; }
.picker[open] .picker-chevron { transform: rotate(180deg); }
.picker[open] > .picker-button { box-shadow: 0 0 0 3px rgba(43, 43, 43, .12), 0 4px 10px -6px var(--c-solid); }
.picker-menu {
  position: absolute; z-index: 40; top: calc(100% + 0.375rem); left: 0; right: 0;
  display: flex; flex-direction: column; gap: 0.25rem; padding: 0.375rem;
  background: var(--white); border: 1px solid var(--edge); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.picker-option { position: relative; }
.picker-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.picker-option > span {
  display: flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 0.625rem;
  border: 1px solid var(--c-bd); border-radius: 8px; font-weight: 700; font-size: .9375rem; color: var(--ink); background: var(--white);
}
.picker-option:hover > span { background: var(--c-bg); border-color: var(--c-bd); color: var(--c-fg); }
.picker-option input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
.picker-option input:checked + span { background: var(--c-solid); border-color: var(--c-solid); color: #fff; }
.picker-option input:checked + span .picker-dot { background: #fff; }
.picker-option input:checked + span::after { content: "\2713"; margin-left: auto; font-weight: 800; }

/* ---------- Alerts and the "Saved" state ---------- */
.flashes:empty { display: none; }
.flashes { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.125rem; }
.flash, .alert {
  display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.875rem 1rem;
  border-radius: 12px; border: 1px solid; font-weight: 600; box-shadow: var(--shadow-sm);
}
.flash p, .alert p { margin: 0; }
.flash .icon, .alert .icon { margin-top: 2px; }
.flash-success, .alert-success { background: var(--live-tint); border-color: #BFDCC9; color: var(--live); }
.flash-error, .alert-error { background: var(--red-tint); border-color: #F1C4C4; color: #A30000; }
.flash-info, .alert-info { background: #E6EEFA; border-color: #BBCDEA; color: #1A4780; }
.flash-warning, .alert-warning { background: #FBF1DC; border-color: #EBD6A6; color: #6E4A00; }
.saved {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.5rem; border-radius: var(--radius-sm);
  background: var(--live-tint); color: var(--live); border: 1px solid #BFDCC9; font-weight: 700; font-size: .875rem;
}
.htmx-error { margin: 0.5rem 0; padding: 0.75rem 0.875rem; border-radius: 8px; background: var(--red-tint); color: #A30000; }

/* ---------- Badges, tags, chips ---------- */
/* Labels, not pills: small square-cornered tints, like a dashboard's status labels. */
.badges, .tags, .chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.badges { align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: 1.625rem; padding: 0 0.5rem;
  border-radius: var(--radius-sm); border: 1px solid var(--c-bd, rgba(43, 43, 43, .14));
  background: var(--c-bg, var(--white)); color: var(--c-fg, var(--ink));
  font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.badge.solid { background: linear-gradient(180deg, #3A3A3A, #222); border-color: #222; color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.tag {
  display: inline-flex; align-items: center; min-height: 1.625rem; padding: 0 0.5rem; border-radius: var(--radius-sm);
  border: 1px solid var(--c-bd, rgba(43, 43, 43, .14)); background: var(--c-bg, var(--white)); color: var(--c-fg, var(--ink-soft));
  font-size: .8125rem; font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: box-shadow .15s, border-color .15s;
}
a.tag:hover { border-color: var(--c-fg, var(--ink)); color: var(--c-fg, var(--ink)); box-shadow: var(--shadow-sm); }

/* Filter choices: soft tiles that stay big enough to tap (44px). Selected = red tint with a tick. */
.chip {
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0 0.75rem;
  border: 1px solid rgba(43, 43, 43, .14); border-radius: var(--radius); background: var(--white);
  font-size: .9375rem; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.chip:hover { border-color: rgba(43, 43, 43, .4); color: var(--ink); box-shadow: var(--shadow); }
.chip[aria-pressed="true"], .chip.on {
  background: var(--red-tint); border-color: var(--red); color: #8A0000; box-shadow: 0 0 0 1px var(--red) inset;
}
.chip[aria-pressed="true"]::before, .chip.on::before { content: "\2713"; font-weight: 800; }
.chip.remove { background: var(--white); border-color: rgba(191, 0, 0, .35); color: #8A0000; min-height: 2.5rem; }
.chip.remove::after {
  content: "\00D7"; display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; margin-left: 0.125rem; border-radius: 4px;
  background: var(--red-tint); font-size: 1rem; line-height: 1; font-weight: 700;
}
.chip.reset { border-color: transparent; color: var(--red); background: transparent; box-shadow: none; min-height: 2.5rem; text-decoration: underline; text-underline-offset: .2em; }
.chip.reset:hover { background: var(--red-tint); color: var(--red-dark); }

/* ---------- Investor cards ---------- */
.card {
  display: grid; grid-template-columns: 0.375rem minmax(0, 1fr);
  background: var(--white); border: 1px solid var(--edge); border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: 0.75rem; box-shadow: var(--shadow);
  transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.spine { background: var(--line); }
.card.p-high .spine { background: var(--red); }
.card.p-medium .spine { background: var(--grey); }
.card.stance-avoid .spine { background: var(--red); }
.card.stance-watch .spine { background: var(--grey); }
.card.stance-target .spine { background: var(--live); }
.card-body { padding: 1rem 1.375rem 1.125rem; min-width: 0; }
/* Warning banners, styled like the tags: light tint, strong border, dark text, coloured icon.
   Red ones are scarlet (#FF4405), deliberately unlike brand crimson, so they read as "warning". */
.banner.c-red, .page-banner.c-red { --c-solid: #FF4405; --c-bg: #FFF1EC; --c-fg: #B42318; --c-bd: #FF4405; }
.banner.suppressed, .page-banner.suppressed { --c-solid: #6F6F6C; --c-bg: #F2F2F1; --c-fg: #3D3D3B; }
.banner {
  display: flex; align-items: center; gap: 0.5rem; margin: -1rem -1.375rem 0.875rem; padding: 0.4375rem 1.375rem;
  background: var(--c-bg); color: var(--c-fg); border-bottom: 2px solid var(--c-solid);
  font-weight: 800; font-size: .875rem; letter-spacing: .02em; text-transform: uppercase;
}
.banner-icon { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--c-solid); }
.banner-text { min-width: 0; }
.banner + .banner { margin-top: -0.875rem; }
.card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1.125rem; }
.card-title { display: flex; flex-direction: column; min-width: 0; flex: 1 1 18.75rem; }
.card-name { font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--ink); text-decoration: none; }
a.card-name:hover { color: var(--red); text-decoration: underline; }
.card-who { font-size: .9375rem; color: var(--muted); overflow-wrap: anywhere; }
.rec { margin: 0.625rem 0 0; max-width: 90ch; }
.rec b, .rec strong { color: var(--red); }
.card-meta { display: flex; flex-wrap: wrap; gap: 0.375rem 1.125rem; margin-top: 0.75rem; font-size: .9375rem; color: var(--muted); }
.card-meta strong { color: var(--ink); }
.card-meta .overdue { color: #A30000; font-weight: 700; }
.card .tags { margin-top: 0.75rem; }
.history { overflow-wrap: anywhere; margin: 0.75rem 0 0; padding-left: 0.875rem; border-left: 3px solid var(--line); color: var(--ink-soft); max-width: 90ch; }
.history .h-label { display: block; font-size: .875rem; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.history a { overflow-wrap: anywhere; }

/* ---------- Lists (follow-ups, activity) ---------- */
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row-main { flex: 1 1 16.25rem; min-width: 0; overflow-wrap: anywhere; }
.row-title { font-weight: 700; color: var(--ink); text-decoration: none; }
a.row-title:hover { color: var(--red); text-decoration: underline; }
.row-sub { display: block; color: var(--muted); font-size: .9375rem; }
.row.overdue .row-due { color: #A30000; font-weight: 700; }
.due-label { display: inline-flex; align-items: center; gap: 0.375rem; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.875rem 0; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 0; }
.tl-ico {
  width: 2.5rem; height: 2.5rem; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--red-tint); color: var(--red);
}
.tl-head { font-weight: 700; }
.tl-when { color: var(--muted); font-weight: 400; font-size: .9375rem; }
.tl-body { margin: 0.25rem 0 0; white-space: pre-line; color: var(--ink-soft); }

/* ---------- Section headings (pipeline groups, tiers) ---------- */
h2.group {
  display: flex; align-items: center; gap: 0.625rem; margin: 2rem 0 0.375rem; font-size: 1.25rem;
}
h2.group::before { content: ""; width: 0.375rem; height: 1.25em; background: var(--red); border-radius: 3px; flex: 0 0 auto; }
.group-note { margin: 0 0 0.875rem; color: var(--ink-soft); max-width: 85ch; }
.count-pill {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; min-height: 1.5rem; padding: 0 0.4375rem;
  border-radius: var(--radius-sm); background: var(--ink); color: #fff;
  font-size: .8125rem; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

/* ---------- Tables (targets, admin lists) ---------- */
.t-wrap { background: var(--white); border: 1px solid var(--edge); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: .875rem; font-weight: 700; padding: 0.75rem 1rem;
  background: var(--panel); border-bottom: 1px solid var(--line-strong);
}
.table td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-soft); }
.table tr:last-child td { border-bottom: 0; }
.table td.t-name { color: var(--ink); min-width: 11.875rem; }

/* ---------- Empty states ---------- */
.empty {
  background: rgba(255, 255, 255, .7); border: 2px dashed rgba(43, 43, 43, .18); border-radius: var(--radius-lg);
  padding: 2.25rem 1.5rem; text-align: center; color: var(--ink-soft);
}
.empty p { margin: 0 0 0.75rem; }
.empty-actions { justify-content: center; }

/* ---------- Footer ---------- */
.foot { margin-top: 3.5rem; padding-top: 1.125rem; border-top: 1px solid var(--line-strong); font-size: .9375rem; color: var(--muted); }
.foot-logo { height: 1.125rem; width: auto; display: block; margin-bottom: 0.5rem; }
.foot p { margin: 0; }

/* ---------- Sign-in pages ---------- */
.auth-body { min-height: 100vh; display: flex; flex-direction: column; }
.auth-top { display: flex; justify-content: flex-end; padding: 1rem 1.25rem 0; }
.auth-main { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1rem 3rem; }
.auth-main:focus { outline: none; }
.auth-card {
  width: 100%; max-width: 30rem; background: var(--white); border: 1px solid var(--edge); box-shadow: var(--shadow-lg);
  border-top: 5px solid var(--red); border-radius: var(--radius-lg); padding: 2rem 2.25rem 1.75rem; box-shadow: var(--shadow);
}
.auth-logo { height: 2.125rem; width: auto; display: block; }
.auth-app { margin: 0.625rem 0 1.5rem; font-weight: 700; color: var(--muted); }
.auth-h { font-size: 1.75rem; margin-bottom: 1.125rem; }
.auth-alt { margin: 1.25rem 0 0; text-align: center; }
.auth-alt a { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; font-weight: 700; }
.auth-card .actions { flex-direction: column; align-items: stretch; margin-top: 1.25rem; }
.auth-foot { margin: 1.25rem 0 0; color: var(--muted); font-size: .9375rem; text-align: center; }
.error-page { padding: 0.75rem 0; }
.error-detail { white-space: pre-wrap; font-size: .8125rem; background: var(--panel); padding: 0.75rem; border: 1px solid var(--line); overflow: auto; }

/* ---------- Pipeline ---------- */
.search-panel { padding-bottom: 1rem; }
.search-label { display: block; font-weight: 700; margin-bottom: 0.5rem; }
.filters { margin-top: 0.875rem; }
.filters > summary { list-style: none; width: auto; display: inline-flex; }
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary::after { content: "\25BE"; font-size: .8em; transition: transform .15s; }
.filters[open] > summary::after { transform: rotate(180deg); }
.filter-rows { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.filter-hint { color: var(--muted); font-size: .9375rem; margin: 0 0 0.875rem; }
.filter-row { margin-bottom: 1rem; }
.filter-row:last-child { margin-bottom: 0; }
h3.filter-label { font-size: 1rem; margin: 0 0 0.5rem; }
.result-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem; margin: 0 0 0.5rem; }
.result-count { margin: 0; color: var(--muted); font-weight: 600; }
.result-count strong { color: var(--ink); }

.section { margin-top: 1.5rem; }
.section > summary { list-style: none; cursor: pointer; border-radius: 8px; }
.section > summary::-webkit-details-marker { display: none; }
.section > summary h2.group { margin: 0 0 0.75rem; }
.section-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 0.375rem; font-size: .9375rem; font-weight: 700; color: var(--red); }
.section-toggle::before { content: "Hide"; }
.section:not([open]) .section-toggle::before { content: "Show"; }
.section-toggle::after { content: "\25BE"; transition: transform .15s; }
.section:not([open]) .section-toggle::after { transform: rotate(-90deg); }
h2.group.group-c-red::before, h2.group.group-c-green::before, h2.group.group-c-amber::before, h2.group.group-c-blue::before,
h2.group.group-c-grey::before, h2.group.group-c-slate::before, h2.group.group-c-purple::before, h2.group.group-c-teal::before,
h2.group.group-c-orange::before, h2.group.group-c-indigo::before, h2.group.group-c-pink::before, h2.group.group-c-brown::before { background: var(--c-solid); }
h2.group.group-c-red { --c-solid: #D92D20; } h2.group.group-c-green { --c-solid: #2E7D4F; } h2.group.group-c-amber { --c-solid: #A87100; }
h2.group.group-c-blue { --c-solid: #2563B0; } h2.group.group-c-grey { --c-solid: #6F6F6C; } h2.group.group-c-slate { --c-solid: #4A5A78; }
h2.group.group-c-purple { --c-solid: #8A3BA8; } h2.group.group-c-teal { --c-solid: #13807A; } h2.group.group-c-orange { --c-solid: #C2560C; }
h2.group.group-c-indigo { --c-solid: #4F46C0; } h2.group.group-c-pink { --c-solid: #B83275; } h2.group.group-c-brown { --c-solid: #8B5A33; }
.more-wrap { margin-top: 0.5rem; }
/* While new results are loading (search as you type), fade the old ones slightly. */
#results { transition: opacity .15s; }
#results.htmx-request { opacity: .55; }

.rec-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; margin-top: 0.875rem; }
.card-more[open] { flex-basis: 100%; }
.card-more > summary { list-style: none; }
.card-more > summary::-webkit-details-marker { display: none; }
.card-more .when-open, .card-more[open] .when-closed { display: none; }
.card-more[open] .when-open { display: inline; }
.card-more-body { margin-top: 0.75rem; }
.card-details .history ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }
.card-details-foot { margin: 1rem 0 0; }

/* ---------- Investor profile ---------- */
.page-banner {
  display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.75rem; padding: 0.625rem 1rem;
  border: 2px solid var(--c-solid); border-radius: var(--radius); background: var(--c-bg); color: var(--c-fg);
  font-weight: 800; letter-spacing: .02em; text-transform: uppercase; box-shadow: var(--shadow-sm);
}
.page-banner .banner-icon .icon { width: 1.5rem; height: 1.5rem; }
.profile-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1.25rem; }
.profile-title h1 { margin-bottom: 0.25rem; }
.profile-who { margin: 0 0 0.25rem; font-size: 1.125rem; color: var(--ink-soft); }
.profile-facts { margin: 0; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.profile-facts strong { color: var(--ink); }
.profile-facts .overdue, .card-meta .overdue { color: #A30000; font-weight: 700; display: inline-flex; align-items: center; gap: 0.25rem; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22.5rem); gap: 0 1.25rem; align-items: start; }
.profile-main, .profile-side { min-width: 0; }
.profile-side .panel { padding: 1.125rem 1.25rem; }
.panel h2 { font-size: 1.25rem; margin-bottom: 0.875rem; }
.sub-h { font-size: 1.0625rem; margin: 1.25rem 0 0.5rem; }
.log-panel:empty { display: none; }
.log-panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.log-panel .sub-h { margin-top: 0; }
.contact-rows { display: flex; flex-direction: column; }
.contact-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem 0.75rem; align-items: center;
  padding: 0.625rem 0; border-bottom: 1px solid var(--line);
}
.contact-row:last-child { border-bottom: 0; }
.contact-label { grid-column: 1; font-size: .875rem; font-weight: 700; color: var(--muted); }
.contact-value { grid-column: 1; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.contact-edit-btn { grid-column: 2; grid-row: 1 / span 2; }
.contact-edit { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.5rem; }
.contact-edit .contact-label { color: var(--ink); }
.tag-edit-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; }
.tag-edit-list li { display: inline-flex; align-items: center; gap: 0.125rem; }
.tag-edit-list form { margin: 0; }
.tag-edit-list .btn-quiet { padding: 0 0.375rem; font-size: .875rem; }
.inline-add { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.inline-add select, .inline-add input { flex: 1 1 auto; min-width: 0; }
.row-extra { list-style: none; padding: 0 0 0.75rem; border-bottom: 1px solid var(--line); }
.row-extra summary { cursor: pointer; font-weight: 700; color: var(--red); min-height: 2.75rem; display: flex; align-items: center; }
.tl-email summary { cursor: pointer; color: var(--red); font-weight: 700; margin-top: 0.25rem; }
.narrow-panel { max-width: 40rem; }

/* Panel headings: icon tile + title, with an optional "?" help button. */
.panel-head { position: relative; flex-wrap: nowrap; }
.panel .panel-head h2, .panel-head h2 { display: flex; align-items: center; gap: 0.625rem; margin: 0; font-size: 1.1875rem; }
.h-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 2rem; height: 2rem; border-radius: 9px; background: var(--red-tint); color: var(--red);
}
.h-icon .icon { width: 1.125rem; height: 1.125rem; }
.help { flex: 0 0 auto; position: relative; }
.help > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--muted);
  border: 1px solid rgba(43, 43, 43, .14); background: var(--white); box-shadow: var(--shadow-sm);
}
.help > summary::-webkit-details-marker { display: none; }
.help > summary:hover, .help[open] > summary { color: #1A4780; border-color: #BBCDEA; background: #EEF3FB; }
.help-text {
  position: absolute; z-index: 30; top: calc(100% + 0.625rem); right: -0.375rem; width: min(22rem, calc(100vw - 2rem));
  display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.875rem 1rem;
  background: #F2F6FC; border: 1px solid #BBCDEA; border-radius: 12px; color: #1A3A66;
  box-shadow: var(--shadow-lg); font-size: .9375rem; font-weight: 500; text-transform: none; letter-spacing: 0;
}
.help-text::before {
  content: ""; position: absolute; top: -0.4375rem; right: 1.0625rem; width: 0.75rem; height: 0.75rem;
  background: #F2F6FC; border-left: 1px solid #BBCDEA; border-top: 1px solid #BBCDEA; transform: rotate(45deg);
}
/* Where the "?" sits on the left (after a page title), open to the right instead. */
.page-head-help .help-text { right: auto; left: -0.375rem; }
.page-head-help .help-text::before { right: auto; left: 1.0625rem; }
.help-text p { margin: 0; }
.help-text .icon { color: #2563B0; margin-top: 0.125rem; }
.search-label-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; position: relative; margin-bottom: 0.5rem; }
.search-label-row .search-label { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.filter-label { display: flex; align-items: center; gap: 0.4375rem; }
.search-label .h-icon { width: 1.75rem; height: 1.75rem; }
.page-head-help { position: relative; display: flex; align-items: center; gap: 0.75rem; }
.page-head-help h1 { margin: 0; }
.filter-label .icon { color: var(--muted); width: 1.0625rem; height: 1.0625rem; }

/* Tags on the profile: one label each with a small × to remove, wrapping to save space. */
.tag-chips { display: flex; flex-wrap: wrap; gap: 0.4375rem; margin: 0 0 0.875rem; padding: 0; list-style: none; }
.tag-chip { display: inline-flex; align-items: stretch; margin: 0; }
.tag-chip .tag { border-radius: var(--radius-sm) 0 0 var(--radius-sm); min-height: 2rem; padding: 0 0.5rem 0 0.625rem; }
.tag-chip button {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; padding: 0; cursor: pointer;
  border: 1px solid var(--c-bd, rgba(43, 43, 43, .14)); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--c-bg, var(--white)); color: var(--c-fg, var(--ink));
}
.tag-chip button .icon { width: 0.9375rem; height: 0.9375rem; }
.tag-chip button:hover { background: var(--c-fg, var(--ink)); color: #fff; }

/* Tag menu: grouped, with icon headings; click a tag to add it. */
.tag-adder { margin: 0; }
.tag-picker > summary { width: 100%; justify-content: flex-start; }
.tag-picker > summary .picker-chevron { margin-left: auto; }
.tag-menu { max-height: 22rem; overflow-y: auto; gap: 0.125rem; padding: 0.5rem 0.75rem 0.75rem; }
.tag-menu-h { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0.375rem; font-weight: 800; font-size: .9375rem; }
.tag-menu-h .h-icon { width: 1.625rem; height: 1.625rem; border-radius: 7px; }
.tag-menu-h .h-icon .icon { width: 0.9375rem; height: 0.9375rem; }
.tag-menu-items { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.tag-menu-items .tag { gap: 0.25rem; min-height: 2.125rem; cursor: pointer; font: inherit; font-size: .875rem; font-weight: 600; }
.tag-menu-items .tag .icon { width: 0.875rem; height: 0.875rem; }
.tag-menu-items .tag:hover { border-color: var(--c-fg, var(--ink)); box-shadow: var(--shadow-sm); }

/* Recommendation: the "what we think" summary, accented in brand red. */
.p-rec { border-left: 4px solid var(--red); }
.p-rec .rec { font-size: 1.0625rem; margin: 0; }

/* Background and history: imported research, styled as a reference file so it reads differently. */
.p-details { background: linear-gradient(180deg, #F6F7F9 0%, #F1F3F6 100%); border-color: #D9DEE6; border-left: 4px solid #4A5A78; }
.p-details .h-icon { background: #E3E8F0; color: #2F3C55; }
.p-details .history {
  border-left: 0; padding: 0.75rem 0.875rem; margin: 0.625rem 0 0; max-width: none;
  background: rgba(255, 255, 255, .85); border: 1px solid #E1E5EC; border-radius: 10px; color: var(--ink-soft);
}
.p-details .h-label {
  display: flex; width: max-content; max-width: 100%; align-items: center; gap: 0.25rem; margin-bottom: 0.375rem; padding: 0.0625rem 0.4375rem;
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 800;
  color: #2F3C55; background: #E3E8F0; border-radius: var(--radius-sm);
}
.p-details .history.action { border-color: #FDA29B; background: #FFF8F7; }
.p-details .history.action .h-label { color: #912018; background: #FEE4E2; }

/* Toggle buttons that are open turn red-tinted, so it's obvious where to click to close them. */
.contact-more[open] > summary, .card-more[open] > summary, .filters[open] > summary {
  background: var(--red-tint); border-color: var(--red); color: #8A0000; box-shadow: 0 0 0 1px var(--red) inset;
}
.card-more[open] > summary .icon { transform: rotate(180deg); }

/* Contact panel: who and how to reach them, with everything else in an accordion. */
.contact-summary { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-bottom: 0.875rem; }
.cs-line { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; overflow-wrap: anywhere; min-width: 0; }
.cs-line .icon { color: var(--grey); margin-top: 0.1875rem; }
.cs-person strong { display: block; font-size: 1.0625rem; }
.cs-role { display: block; color: var(--muted); font-size: .9375rem; }
.contact-more > summary { list-style: none; }
.contact-more > summary::-webkit-details-marker { display: none; }
.contact-more .when-open, .contact-more[open] .when-closed { display: none; }
.contact-more[open] .when-open { display: inline; }
.contact-more[open] > summary .icon { transform: rotate(180deg); }
.contact-more[open] > summary { margin-bottom: 0.5rem; }
.conn-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: 0.25rem; }
.conn-note { color: var(--muted); }

/* Contact rows: a small icon beside each label. */
.contact-label { display: inline-flex; align-items: center; gap: 0.375rem; }
.contact-label .icon { width: 1rem; height: 1rem; color: var(--grey); }
.p-remove { background: transparent; border-style: dashed; }

/* ---------- Competitor investors ---------- */
.toolbar-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; }
.toolbar-panel .filter-row { margin: 0; }
.jump-row { margin-top: 0.875rem !important; padding-top: 0.875rem; border-top: 1px solid var(--line); }
h2.filter-label { font-size: 1rem; margin: 0 0 0.5rem; }
.comp { margin: 0 0 1.75rem; scroll-margin-top: calc(var(--top) + 1rem); }
.comp-head {
  background: linear-gradient(180deg, #F6F7F9 0%, #F1F3F6 100%); border: 1px solid #D9DEE6; border-left: 4px solid #4A5A78;
  border-radius: var(--radius-lg); padding: 1rem 1.25rem; margin-bottom: 0.75rem; box-shadow: var(--shadow-sm);
}
.comp-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.comp-name { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.25rem; }
.comp-name .h-icon { background: #E3E8F0; color: #2F3C55; }
.comp-route { font-weight: 700; color: var(--red); font-size: .9375rem; }
.comp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.5rem 1.25rem; margin: 0.75rem 0 0; }
.comp-facts dt { display: flex; align-items: center; gap: 0.3125rem; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #2F3C55; }
.comp-facts dt .icon { width: 0.875rem; height: 0.875rem; }
.comp-facts dd { margin: 0.125rem 0 0; color: var(--ink-soft); }
.comp-notes { margin-top: 0.625rem; font-size: .9375rem; color: var(--ink-soft); }
.comp-notes p { margin: 0 0 0.375rem; }
.comp-actions { margin-top: 0.75rem; }
.comp-empty { margin: 0 0 0 0.25rem; }
.comp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 0.75rem; }
.comp-cards .card { margin: 0; }
.card.stance-watch .spine { background: #A87100; }
.stance-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; margin-top: 0.875rem; }
.stance-label { font-size: .875rem; font-weight: 700; color: var(--muted); }
.stance-buttons { display: inline-flex; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.stance-btn {
  display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.5rem; padding: 0 0.75rem; cursor: pointer;
  border: 1px solid var(--c-bd); background: var(--white); color: var(--c-fg); font: inherit; font-size: .875rem; font-weight: 700;
}
.stance-btn + .stance-btn { border-left: 0; }
.stance-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.stance-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.stance-btn:hover { background: var(--c-bg); }
.stance-btn[aria-pressed="true"] { background: var(--c-solid); border-color: var(--c-solid); color: #fff; }
.stance-btn .icon { width: 1rem; height: 1rem; }
.card-remove { margin: 0 0 0 auto; }

/* ---------- Series A targets ---------- */
.targets-toolbar { align-items: center; margin-bottom: 0.5rem; }
.tier { margin-bottom: 1.5rem; scroll-margin-top: calc(var(--top) + 1rem); }
.tier h2.group .h-icon { width: 1.75rem; height: 1.75rem; }
.tier h2.group::before { display: none; }
.tier-x h2.group .h-icon { background: #FEE4E2; color: #B42318; }
.t-wrap.dont { border-left: 4px solid #FF4405; }
.targets-table td { font-size: .9375rem; }
.targets-table tr { scroll-margin-top: calc(var(--top) + 1rem); }
.targets-table tr:target td { background: #FFF8E6; }
.t-investor { font-weight: 800; font-size: 1.0625rem; color: var(--ink); text-decoration: none; }
a.t-investor:hover { color: var(--red); text-decoration: underline; }
.t-labels { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.375rem; }
.t-actions { width: 1%; white-space: nowrap; }
.t-actions-inner { display: flex; flex-direction: column; gap: 0.25rem; align-items: center; }
.t-order-h { width: 1%; text-align: center !important; }
.t-edit { margin: 0.375rem 0 0 -0.5rem; }
.targets-table th:nth-child(1) { width: 22%; } .targets-table th:nth-child(2) { width: 32%; }
.targets-table th:nth-child(3) { width: 20%; }
@media (max-width: 640px) { .t-actions-inner { flex-direction: row; } }
.t-actions form { margin: 0; }
.btn-icon { width: 2.5rem; min-height: 2.5rem; padding: 0; }
.icon.flip { transform: rotate(180deg); }
.tier-choice { flex-direction: column; align-items: flex-start; }
.tier-choice span { white-space: normal; padding-top: 0.375rem; padding-bottom: 0.375rem; }
.more-actions { margin-bottom: 0.75rem; }
.more-actions:empty { display: none; }

/* ---------- Board (Kanban) view: columns, cards moved with buttons, not drag and drop ---------- */
.toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.view-switch { display: inline-flex; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.view-opt {
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0 0.875rem;
  border: 1px solid rgba(43, 43, 43, .16); background: var(--white); color: var(--ink); font-weight: 700; text-decoration: none;
}
.view-opt + .view-opt { border-left: 0; }
.view-opt:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.view-opt:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.view-opt:hover { background: var(--paper); color: var(--ink); }
.view-opt.on { background: linear-gradient(180deg, #3A3A3A, #222); border-color: #222; color: #fff; }
.board { display: grid; gap: 0.875rem; align-items: start; margin-top: 0.75rem; position: relative; }
.board-cols-1 { grid-template-columns: minmax(0, 1fr); }
.board-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.board-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.board-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.board-col {
  background: linear-gradient(180deg, var(--c-bg) 0%, rgba(255, 255, 255, .6) 100%);
  border: 1px solid var(--c-bd); border-top: 4px solid var(--c-solid); border-radius: var(--radius-lg); padding: 0.75rem;
  min-width: 0; scroll-margin-top: calc(var(--top) + 1rem);
}
.board-col-head h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.0625rem; color: var(--c-fg); }
.board-col-head .count-pill { margin-left: auto; }
.board-col-head p { margin: 0.25rem 0 0; font-size: .8125rem; color: var(--muted); }
.board-dot { width: 0.625rem; height: 0.625rem; border-radius: 3px; background: var(--c-solid); flex: 0 0 auto; }
.board-cards { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.board-card {
  background: var(--white); border: 1px solid var(--edge); border-radius: 12px; padding: 0.75rem 0.875rem;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.375rem; min-width: 0;
  scroll-margin-top: calc(var(--top) + 1rem);
}
.board-card:target { box-shadow: 0 0 0 3px var(--c-solid, var(--red)), var(--shadow); }
.board-card .badge { white-space: normal; align-self: flex-start; min-height: 1.5rem; padding-top: 0.125rem; padding-bottom: 0.125rem; }
.board-name { font-weight: 800; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.board-name:hover { color: var(--red); text-decoration: underline; }
.board-sub { display: flex; align-items: flex-start; gap: 0.375rem; margin: 0; font-size: .875rem; color: var(--ink-soft); }
.board-sub .icon { width: 1rem; height: 1rem; color: var(--grey); margin-top: 0.125rem; flex: 0 0 auto; }
.board-text { margin: 0; font-size: .875rem; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.board-empty { margin: 0; font-size: .875rem; color: var(--muted); text-align: center; padding: 0.75rem 0; }
.board-move { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: 0.25rem; }
.board-move-label { font-size: .8125rem; font-weight: 700; color: var(--muted); }
.stance-btn.solo { border-radius: 8px; border-left: 1px solid var(--c-bd); min-height: 2.25rem; padding: 0 0.625rem; }
.board-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-top: 0.25rem; }
.board-controls form { margin: 0; }
.board-controls .btn-icon { width: 2.25rem; min-height: 2.25rem; }
@media (max-width: 960px) {
  /* Columns scroll sideways on smaller screens, one comfortable column width each. */
  .board { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
  .board-col { flex: 0 0 min(85vw, 20rem); scroll-snap-align: start; }
}

/* ---------- Home ---------- */
.home-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.home-head h1 { margin: 0; }
.home-search .search-label { display: flex; align-items: center; gap: 0.5rem; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.home-grid .panel { margin-bottom: 1.25rem; }
.fu-row { flex-wrap: nowrap; }
.fu-row .row-main { flex: 1 1 auto; }
.fu-row form { margin: 0; flex: 0 0 auto; }
.fu-row .row-due { display: flex; margin-top: 0.25rem; font-size: .9375rem; color: var(--ink-soft); }
.fu-row .row-due .icon { width: 1rem; height: 1rem; }
.fu-row.overdue { background: linear-gradient(90deg, #FEF3F2, transparent 70%); margin: 0 -0.75rem; padding-left: 0.75rem; padding-right: 0.75rem; border-radius: 10px; }
.fu-row.overdue .row-due { color: #B42318; font-weight: 800; }
.fu-row.overdue .row-due .icon { color: #D92D20; }
.fu-done { color: var(--live); font-weight: 600; }
.fu-done .icon { vertical-align: -3px; }
.lead-people { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.lead-people strong { min-width: 3.5rem; }
.feed li { grid-template-columns: 2.25rem minmax(0, 1fr); padding: 0.625rem 0; }
.feed .tl-ico { width: 2.25rem; height: 2.25rem; }
.feed-line { margin: 0.375rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.feed-line a { font-weight: 800; }
.feed-detail { margin: 0.125rem 0 0; color: var(--muted); font-size: .9375rem; overflow-wrap: anywhere; }
.add-investor .narrow-panel, .add-investor .panel-warning { max-width: 46rem; }
.add-investor .alert { margin-bottom: 1.25rem; }
@media (max-width: 960px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .home-head .btn-lg { width: 100%; }
  .home-search .search-form { flex-direction: column; }
}

/* ---------- Admin ---------- */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.row-actions form { margin: 0; }
.invite-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 9rem auto; gap: 0.75rem 1rem; align-items: end; }
.user-row.is-disabled .row-title { color: var(--muted); text-decoration: line-through; }
.tag-group.is-retired { opacity: .7; }
.group-flags { margin: -0.375rem 0 0.5rem; }
.tag-group .row-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
.tag-group .row-main .row-sub { display: inline; margin-left: 0.25rem; }
.tag-group .row { padding: 0.5rem 0; }
.add-tag { margin-top: 0.75rem; }
.add-tag[open] > summary { background: var(--red-tint); border-color: var(--red); color: #8A0000; }
.add-tag > form { margin-top: 0.875rem; padding: 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); }
.colour-choice span { min-width: 5.5rem; justify-content: flex-start; }
fieldset.field { border: 0; margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; min-width: 0; }
fieldset.field legend { font-weight: 700; margin-bottom: 0.5rem; padding: 0; }
.input-short { max-width: 8rem; }
.setting-status { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; color: var(--ink-soft); }
.setting-status .icon { flex: 0 0 auto; margin-top: 0.125rem; color: #A87100; }
.settings-form .panel-head { margin-bottom: 0.625rem; }
.audit-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 0.75rem 1rem; align-items: end; }
.audit-filter .actions { flex-wrap: nowrap; }
.audit-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.audit-entry { background: var(--white); border: 1px solid var(--edge); border-radius: var(--radius-lg); padding: 0.75rem 1rem; box-shadow: var(--shadow-sm); }
.audit-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; }
.audit-what { font-weight: 700; overflow-wrap: anywhere; }
.audit-what a, .audit-what strong { margin-left: 0.25rem; }
.audit-meta { color: var(--muted); font-size: .9375rem; }
.audit-diff { width: 100%; margin-top: 0.5rem; border-collapse: collapse; font-size: .9375rem; table-layout: fixed; }
.audit-diff th, .audit-diff td { text-align: left; padding: 0.375rem 0.5rem; border-top: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.audit-diff thead th { border-top: 0; color: var(--muted); font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.audit-diff tbody th { width: 28%; font-weight: 600; color: var(--ink-soft); }
.audit-diff td.was { background: #FEF3F2; color: #912018; }
.audit-diff td.now { background: #ECFDF3; color: #05603A; }
.audit-values tbody tr:first-child th, .audit-values tbody tr:first-child td { border-top: 0; }
.audit-values td { color: var(--ink); }
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.25rem; color: var(--muted); font-weight: 600; }
.btn-xs { min-height: 2rem; padding: 0 0.5rem; font-size: .8125rem; gap: 0.25rem; }
.btn-xs .icon { width: 0.875rem; height: 0.875rem; }
.tl-remove { margin: 0.25rem 0 0; }
.warn-text { display: flex; align-items: center; gap: 0.375rem; color: #93370D; }
.warn-text .icon { width: 1rem; height: 1rem; flex: 0 0 auto; }
.jump-chips { margin-bottom: 1rem; }
.jump-chips .count-pill { margin-left: 0.375rem; }
.result-count .export-btn { margin-left: 0.75rem; vertical-align: middle; }
@media (max-width: 960px) {
  .invite-form, .audit-filter { grid-template-columns: minmax(0, 1fr); }
  .audit-diff tbody th { width: 34%; }
  .result-count .export-btn { margin: 0.5rem 0 0; display: flex; width: max-content; }
}

/* "Find an investor" picker */
.picker-results { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.5rem; }
.picker-results:empty { display: none; }
.pick-option { position: relative; display: block; }
.pick-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pick-option > span {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3rem; padding: 0.5rem 0.75rem;
  border: 1px solid rgba(43, 43, 43, .16); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm);
}
.pick-option:hover > span { border-color: rgba(43, 43, 43, .45); }
.pick-option input:checked + span { border-color: var(--red); background: var(--red-tint); box-shadow: 0 0 0 1px var(--red) inset; }
.pick-option input:checked + span .pick-main strong::before { content: "\2713  "; color: var(--red); }
.pick-option input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.pick-main { display: flex; flex-direction: column; min-width: 0; }
.pick-sub { color: var(--muted); font-size: .875rem; }
.pick-empty { margin: 0.25rem 0 0; }

/* ---------- Admin ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr)); gap: 0.875rem; }
.tool {
  display: flex; flex-direction: column; gap: 0.375rem; padding: 1.25rem; min-height: 8.75rem;
  background: var(--white); border: 1px solid var(--edge); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none;
}
.tool:hover { border-color: var(--ink); box-shadow: var(--shadow); color: var(--ink); }
.tool .icon { width: 1.75rem; height: 1.75rem; color: var(--red); }
.tool-name { font-size: 1.125rem; font-weight: 700; }
.tool-desc { color: var(--muted); font-size: .9375rem; }
.file-input { min-height: 3rem; padding: 0.625rem; border: 2px dashed var(--line-strong); border-radius: 8px; background: var(--panel); width: 100%; }
.panel-warning { border-left: 6px solid #A87100; }
.panel-warning h2 { display: flex; align-items: flex-start; gap: 0.5rem; }
.panel-warning h2 .icon { color: #A87100; flex: 0 0 auto; margin-top: 0.125rem; }
.import-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-sub { font-size: .875rem; color: var(--muted); margin-top: 0.25rem; }
.disclosure > summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  min-height: 2.75rem; cursor: pointer; list-style: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure-title { font-size: 1.125rem; font-weight: 700; }
.disclosure-hint { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 700; color: var(--red); }
.disclosure-hint::after { content: "\25BE"; transition: transform .15s; }
.disclosure[open] .disclosure-hint::after { transform: rotate(180deg); }
.disclosure[open] > summary { margin-bottom: 0.875rem; }
.name-list { columns: 3 15rem; margin: 0; padding-left: 1.25rem; }
.name-list li { break-inside: avoid; margin-bottom: 0.25rem; }
.diff { border-top: 1px solid var(--line); padding: 0.875rem 0; }
.diff-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.diff-name { font-weight: 700; font-size: 1.0625rem; }
.diff-table td { font-size: .9375rem; }
.diff-from { background: #FDF3F3; }
.diff-to { background: #EEF7F1; }
.apply-panel { border-top: 4px solid var(--red); }
.cancel-form { margin-top: -6px; }

/* ---------- Style guide only ---------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); gap: 0.625rem; }
.swatch { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.75rem; border-radius: var(--radius); border: 1px solid var(--c-bd); background: var(--c-bg); color: var(--c-fg); font-weight: 700; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .main { padding: 1.5rem 1.75rem 5rem; }
}
@media (max-width: 960px) {
  :root { --top: 3.75rem; }
  .menu-btn { display: inline-flex; }
  .tb-title, .ts-label { display: none; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: fixed; left: 0; top: 0; bottom: 0; width: min(20.625rem, 88vw); height: auto; z-index: 400;
    transform: translateX(-105%); transition: transform .2s ease; box-shadow: 4px 0 20px rgba(0, 0, 0, .2);
    visibility: hidden;
  }
  body.menu-open .side { transform: none; visibility: visible; }
  body.menu-open { overflow: hidden; }
  .side-close-row { display: flex; justify-content: flex-end; }
  .main { padding: 1.25rem 1rem 6.875rem; }
  .grid-2, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .action-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Profile: one column, with the things people do most near the top. */
  .profile-grid { display: flex; flex-direction: column; align-items: stretch; }
  .profile-main, .profile-side { display: contents; }
  .profile-grid > .panel, .profile-grid .panel { min-width: 0; max-width: 100%; }
  .p-contact { order: 0; } .p-log { order: 1; } .p-follow { order: 2; } .p-know { order: 3; } .p-timeline { order: 4; }
  .p-rec { order: 5; } .p-target { order: 6; } .p-tags { order: 7; }
  .p-details { order: 9; } .p-comp { order: 10; } .p-remove { order: 11; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    background: var(--glass); border-top: 1px solid var(--edge); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 -8px 24px -18px rgba(43, 43, 43, .35);
    padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom));
  }
  .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 3.5rem; border: 0; border-radius: 8px; background: transparent;
    color: var(--ink-soft); font-size: min(.75rem, 12.5px); min-width: 0; font-weight: 700; text-decoration: none; cursor: pointer;
  }
  .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab .icon { width: 1.5rem; height: 1.5rem; }
  .tab.active { color: var(--red); background: var(--red-tint); }
}
@media (max-width: 640px) {
  .topbar { padding: 0 0.75rem; gap: 0.625rem; }
  .tb-logo { height: 1.25rem; }
  .menu-btn span { display: none; }
  .textsize { gap: 3px; }
  .textsize button { min-width: 2.5rem; height: 2.5rem; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .panel { padding: 1rem; }
  .card-body { padding: 0.875rem 1rem 1rem; }
  .banner { margin: -0.875rem -1rem 0.75rem; }
  .action-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .action-btn { min-height: 4.5rem; padding: 0.5rem 0.25rem; font-size: .9375rem; }
  .auth-card { padding: 1.5rem 1.25rem; }
  .search-form { flex-direction: column; }
  .table.stack-sm thead { display: none; }
  .table.stack-sm, .table.stack-sm tbody, .table.stack-sm tr, .table.stack-sm td { display: block; width: 100%; }
  .table.stack-sm tr { border-bottom: 1px solid var(--line-strong); padding: 0.375rem 0; }
  .table.stack-sm td { border: 0; padding: 0.375rem 1rem; min-width: 0; }
  .table.stack-sm td::before { content: attr(data-label); display: block; font-size: .8125rem; font-weight: 700; color: var(--ink); }
  .table.stack-sm td.t-name::before { display: none; }
}
@media print {
  .topbar, .side, .tabbar, .scrim, .textsize { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
  .card { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}