/* ChemCRM — shares one look with 365 Auditor and the Territory & Customer Map:
   same tokens, Aptos type, white top bar with a single brand-green rule, the
   "Cleaner Science." lockup, and a navy-built dark mode.

   Theme resolution, three states (identical to 365 Auditor):
     no data-theme    → follow the OS (prefers-color-scheme)   ← default
     data-theme=light → force light
     data-theme=dark  → force dark
   Light values live on bare :root; dark values are declared twice — guarded by
   :not([data-theme="light"]) under the OS media query, and unguarded under
   [data-theme="dark"]. Components only ever use the semantic tokens. */

:root {
  color-scheme: light;

  /* Brand palette — fixed values, identical in both themes. */
  --brand-blue: #0363C9;   /* blue-005, ChemStation Blue */
  --brand-navy: #012D5A;   /* blue-009 */
  --brand-blue-003: #B1CFEE;
  --brand-blue-001: #E6EFFA;
  --brand-green: #79B701;  /* green-005 — accent only: the top-bar rule, never text */
  --brand-ink: #16232B;    /* neutral-015 */

  /* Aptos is the org's face (current M365 builds); Segoe UI on machines without it. */
  --font: Aptos, "Segoe UI Variable Text", "Segoe UI", Calibri, "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --radius: 6px; --radius-sm: 6px; --radius-lg: 10px;
  --top-h: 54px; --rail-w: 60px; --rail-w-open: 236px;

  /* Semantic tokens — light (same values as 365 Auditor / the map). */
  --bg: #f1f5fa;
  --surface: #ffffff;
  --surface-2: #e9f0f9;
  --raised: #ffffff;
  --hover: #e9f0f9;
  --input-bg: #ffffff;
  --line: #d3e0ef;
  --line-soft: #e3ebf5;
  --line-strong: #b1cfee;
  --text: #16232B;
  --text-2: #4a5f70;
  --muted: #566a7b;            /* ≥ 4.8:1 on every light surface (was #6b8395, 3.4:1) */
  --heading: #012D5A;
  --brand: #0363C9;
  --brand-hover: #012D5A;
  --on-brand: #ffffff;
  --link: #0363C9;
  --tint: #E6EFFA;
  --tint-2: #d9e8f7;
  --tint-line: #b1cfee;
  --tint-text: #0363C9;
  --inverse: #012D5A;          /* bulk bar, toasts */
  --inverse-text: #ffffff;
  --inverse-muted: #B1CFEE;
  /* Brand green is 2.3:1 on white — unreadable as text — so status text uses a darkened green. */
  --accent-bg: #eef7db;
  --accent-line: #c9e39a;
  --accent-text: #4E7A01;
  --warn: #9a6700;
  --warn-bg: #fff5db;
  --danger: #c02b2b;
  --danger-bg: #fdeaea;
  --board-col: #e9f0f9;
  --board-foot: #e3ebf5;
  --overlay: rgba(1, 45, 90, .28);
  --shadow: 0 1px 2px rgba(1, 45, 90, .06);
  --shadow-lg: 0 12px 32px rgba(1, 45, 90, .16), 0 2px 6px rgba(1, 45, 90, .08);
}

/* Dark: surfaces built down from blue-009 navy so it reads as the same brand. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #081521; --surface: #0e1f30; --surface-2: #16304a; --raised: #0e1f30; --hover: #16304a; --input-bg: #0b1a29;
    --line: #1e3b56; --line-soft: #18324a; --line-strong: #2f5d85;
    --text: #E6EFFA; --text-2: #a8c0d6; --muted: #8ea7bc; --heading: #E6EFFA;
    --brand: #0363C9; --brand-hover: #2f7fd8; --on-brand: #ffffff; --link: #63A8F5;
    --tint: #11294a; --tint-2: #16345c; --tint-line: #2f5d85; --tint-text: #63A8F5;
    --inverse: #16304a; --inverse-text: #E6EFFA; --inverse-muted: #a8c0d6;
    --accent-bg: #172b09; --accent-line: #36541a; --accent-text: #8FCF2A;
    --warn: #e3b341; --warn-bg: #332913; --danger: #f27a7a; --danger-bg: #37191a;
    --board-col: #0b1a29; --board-foot: #16304a;
    --overlay: rgba(0, 0, 0, .55);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #081521; --surface: #0e1f30; --surface-2: #16304a; --raised: #0e1f30; --hover: #16304a; --input-bg: #0b1a29;
  --line: #1e3b56; --line-soft: #18324a; --line-strong: #2f5d85;
  --text: #E6EFFA; --text-2: #a8c0d6; --muted: #8ea7bc; --heading: #E6EFFA;
  --brand: #0363C9; --brand-hover: #2f7fd8; --on-brand: #ffffff; --link: #63A8F5;
  --tint: #11294a; --tint-2: #16345c; --tint-line: #2f5d85; --tint-text: #63A8F5;
  --inverse: #16304a; --inverse-text: #E6EFFA; --inverse-muted: #a8c0d6;
  --accent-bg: #172b09; --accent-line: #36541a; --accent-text: #8FCF2A;
  --warn: #e3b341; --warn-bg: #332913; --danger: #f27a7a; --danger-bg: #37191a;
  --board-col: #0b1a29; --board-foot: #16304a;
  --overlay: rgba(0, 0, 0, .55);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14px/1.45 var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5 { margin: 0; color: var(--heading); font-weight: 600; }
h1 { font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; }
h2 { font-size: 16px; letter-spacing: -0.01em; }
h3 { font-size: 14px; }
h4 { font-size: 13px; }
strong, b { font-weight: 600; }
code, .mono { font-family: var(--mono); font-size: 12px; }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
kbd { font-family: var(--font); font-size: 11px; font-weight: 600; border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; color: var(--muted); }
[hidden] { display: none !important; }
.muted { color: var(--text-2); }
.small { font-size: 12px; }
.pad { padding: 16px; }
.right { text-align: right; }
.spacer { flex: 1; }
.ic { width: 18px; height: 18px; flex: none; vertical-align: middle; }
.struck { text-decoration: line-through; color: var(--muted); }
::selection { background: var(--tint-2); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* ---------------------------------------------------------------- top bar */
.topbar { position: fixed; inset: 0 0 auto 0; height: var(--top-h); z-index: 40; background: var(--surface); color: var(--text);
  /* The one place brand green appears as a rule — one 2px line per page, as in the sibling apps. */
  border-bottom: 2px solid var(--brand-green);
  display: flex; align-items: center; gap: 20px; padding: 0 16px 0 18px; }
.brand { display: flex; align-items: center; gap: 11px; flex: none; text-decoration: none !important; }
.brand img { display: none; height: 28px; width: auto; }
:root:not([data-theme="dark"]) .brand .logo-color { display: block; }
:root[data-theme="dark"] .brand .logo-white { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .logo-color { display: none; }
  :root:not([data-theme="light"]) .brand .logo-white { display: block; }
}
.brand .divider { width: 1px; height: 22px; background: var(--line-strong); flex: none; }
.brand .product { font-weight: 650; letter-spacing: -0.01em; font-size: 15px; color: var(--heading); }
.brand .product span { color: var(--link); }
.gsearch { position: relative; flex: 0 1 520px; margin: 0 auto; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px;
  border-radius: var(--radius); background: var(--input-bg); border: 1px solid var(--line-strong); color: var(--muted); }
.gsearch:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint); }
.topbar .gsearch input { border: 0; background: transparent; box-shadow: none; outline: none; flex: 1; min-width: 0; width: auto; padding: 0; font: inherit; color: var(--text); height: 100%; }
.gsearch input::placeholder { color: var(--muted); }
.gsearch:focus-within .gs-key { display: none; }
.gs-results { position: absolute; top: 40px; left: 0; right: 0; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); max-height: 70vh; overflow-y: auto; padding: 6px 0; z-index: 50; color: var(--text); }
.gs-results h6 { margin: 8px 14px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.gs-results a { display: flex; flex-direction: column; padding: 6px 14px; color: var(--text); font-weight: 400; text-decoration: none; }
.gs-results a span { font-weight: 600; color: var(--link); }
.gs-results a:hover, .gs-results a.on { background: var(--hover); }
.gs-results a small { color: var(--muted); font-size: 12px; }
.gs-results .gs-all { color: var(--link); font-weight: 600; border-top: 1px solid var(--line-soft); margin-top: 4px; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex: none; }
/* Square bordered controls, matching 365 Auditor's theme toggle. */
.tb-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; flex: none; }
.tb-btn:hover, .menu.open > .tb-btn { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); }
.tb-btn .ic { width: 17px; height: 17px; }
.theme-toggle > .i-system, .theme-toggle > .i-light, .theme-toggle > .i-dark { display: none; }
:root[data-theme-pref="system"] .theme-toggle .i-system,
:root[data-theme-pref="light"] .theme-toggle .i-light,
:root[data-theme-pref="dark"] .theme-toggle .i-dark { display: inline-flex; }
.user-btn { display: flex; align-items: center; gap: 6px; height: 32px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12px;
  color: var(--text-2); cursor: pointer; padding: 0 8px 0 10px; border-radius: var(--radius); }
.user-btn:hover, .menu.open > .user-btn { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); }
.user-btn .ic { width: 14px; height: 14px; }
.user-btn .who { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-mobile { display: none; }

/* ---------------------------------------------------------------- rail (HubSpot-style, family colours) */
.rail { position: fixed; top: var(--top-h); bottom: 0; left: 0; width: var(--rail-w); z-index: 35; background: var(--surface); color: var(--text);
  display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.rail-scroll { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 4px; }
.rail-foot { padding: 8px; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); }
.rail-group { position: relative; }
.rail-head { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 11px; border-radius: var(--radius); color: var(--text-2);
  cursor: pointer; border: 0; background: transparent; font: inherit; width: 100%; text-decoration: none !important; outline: none; }
.rail-head .ic { width: 21px; height: 21px; }
.rail-head:hover, .rail-group:hover > .rail-head, .rail-group:focus-within > .rail-head, .rail-head:focus-visible { background: var(--surface-2); color: var(--text); }
.rail-group.on > .rail-head, .rail-head.on { background: var(--tint); color: var(--tint-text); }
.rail-label { display: none; font-weight: 600; white-space: nowrap; }
/* collapsed: each section's links are a flyout */
.rail-list { display: none; position: absolute; left: calc(100% + 8px); top: -6px; min-width: 236px; padding: 6px; background: var(--raised);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 60; }
.rail-list::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 10px; }   /* hover bridge */
.rail-group:hover > .rail-list, .rail-group:focus-within > .rail-list { display: block; }
.rail-list-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 10px 6px; }
.rail-link { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--radius); color: var(--text-2); font-weight: 500; white-space: nowrap; text-decoration: none !important; }
.rail-link .ic { width: 17px; height: 17px; }
.rail-link:hover { background: var(--surface-2); color: var(--text); }
.rail-link.on { background: var(--tint); color: var(--tint-text); }
/* expanded */
.nav-expanded .rail { width: var(--rail-w-open); }
.nav-expanded .rail-scroll { overflow-y: auto; gap: 14px; }
.nav-expanded .rail-label { display: inline; }
.nav-expanded .rail-group > .rail-head { height: auto; padding: 2px 10px; cursor: default; background: transparent !important; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.nav-expanded .rail-group > .rail-head .ic { display: none; }
.nav-expanded .rail-list { display: block; position: static; min-width: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.nav-expanded .rail-list::before, .nav-expanded .rail-list-title { display: none; }
.nav-expanded .rail-solo { height: 36px; }
.nav-expanded .rail-solo .ic { width: 18px; height: 18px; }
.rail-scrim { display: none; }

/* ---------------------------------------------------------------- page */
.page { margin: var(--top-h) 0 0 var(--rail-w); padding: 22px clamp(16px, 2vw, 32px) 72px; min-height: calc(100vh - var(--top-h)); min-width: 0; }
.nav-expanded .page { margin-left: var(--rail-w-open); }
.page-record { padding: 16px; }

/* ---------------------------------------------------------------- buttons & controls (365 Auditor sizing) */
.btn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px; border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none !important; }
.btn:hover { background: var(--surface-2); }
.btn .ic { width: 15px; height: 15px; }
.btn:focus-visible, .icon-btn:focus-visible, .qf:focus-visible, .tb-btn:focus-visible, .rail-link:focus-visible, .user-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { min-height: 26px; padding: 2px 10px; font-size: 12.5px; }
.btn-icon { width: 32px; padding: 0; justify-content: center; }
.btn-icon.btn-sm { width: 28px; }
.btn-on { background: var(--tint); border-color: var(--brand); color: var(--tint-text); }
.btn-block { width: 100%; justify-content: center; }
.btn.danger { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
.btn.danger:hover { background: var(--danger); color: #fff; }
.menu-item.danger, .icon-btn.danger { color: var(--danger); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; background: transparent; border-radius: var(--radius); color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn .ic { width: 16px; height: 16px; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--link); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.link-btn:hover { text-decoration: underline; }
.link-btn .ic { width: 15px; height: 15px; }
.link-btn.strong { text-align: left; }
input, select, textarea { font: inherit; color: var(--text); }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=datetime-local], input[type=search], input:not([type]), select, textarea {
  width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--input-bg); outline: none; font-size: 13.5px; }
textarea { height: auto; padding: 8px 10px; resize: vertical; }
select[multiple] { height: auto; padding: 4px; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint); }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); width: 15px; height: 15px; }
.select-sm { width: auto; height: 28px; font-size: 13px; padding: 0 8px; }
.chk { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.chk-group { display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; }
.chk-row { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.req { color: var(--danger); }
.hint { background: var(--tint); border: 1px solid var(--tint-line); border-radius: var(--radius); padding: 8px 12px; font-size: 13px; color: var(--text); margin-top: 0; }
.hint, .callout, .insight-note, .insight-health { min-width: 0; max-width: 100%; line-height: 1.5; overflow-wrap: anywhere; }
.title-row > h1 { min-width: 0; overflow-wrap: anywhere; }
.form-error { background: var(--danger-bg); color: var(--danger); border-radius: var(--radius); padding: 8px 12px; margin: 8px 0; font-size: 13px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.form-card { padding: 20px; margin-bottom: 16px; max-width: 980px; }
.alert { border-radius: var(--radius); padding: 10px 14px; margin: 10px 0; }
.alert-error { background: var(--danger-bg); color: var(--danger); }

/* ---------------------------------------------------------------- menus */
.menu { position: relative; display: inline-block; }
.menu-pop { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: var(--raised); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; z-index: 60; display: none; max-height: 72vh; overflow-y: auto; }
.menu-pop.menu-right { left: auto; right: 0; }
.menu.open > .menu-pop { display: block; }
.menu-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 6px 10px 4px; }
.menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border: 0; background: none; border-radius: var(--radius-sm); color: var(--text);
  font: inherit; font-weight: 400; text-align: left; cursor: pointer; text-decoration: none !important; white-space: nowrap; }
.menu-item:hover { background: var(--tint); }
.menu-item.on { color: var(--tint-text); font-weight: 500; }
.menu-item .ic { width: 16px; height: 16px; color: var(--muted); }
.menu-item.on .ic { color: var(--brand); }
.menu-item .check { margin-left: auto; visibility: hidden; }
.menu-item.on .check { visibility: visible; }
.menu-sep { height: 1px; background: var(--line-soft); margin: 5px 2px; }
.account-menu { width: 300px; }
.account-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.menu-note { font-size: 12px; color: var(--muted); padding: 4px 10px 8px; white-space: normal; }
.user-list { max-height: 50vh; overflow-y: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.user-list a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; color: var(--text); font-weight: 400; }
.user-list a:hover { background: var(--tint); text-decoration: none; }
.user-list a.on { font-weight: 500; color: var(--tint-text); }

/* ---------------------------------------------------------------- avatars, chips */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 600; flex: none; }
.avatar.xs { width: 20px; height: 20px; font-size: 9px; }
.avatar.sm { width: 26px; height: 26px; font-size: 10px; }
.avatar.lg { width: 48px; height: 48px; font-size: 17px; }
.avatar-co { background: var(--tint); color: var(--link); border-radius: 6px; }
.avatar-co .ic { width: 60%; height: 60%; }
.owner { display: inline-flex; align-items: center; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 11px; background: var(--hover); color: var(--text-2); border: 1px solid var(--line); white-space: nowrap; }
.chip-primary { background: var(--accent-bg); color: var(--accent-text); border-color: var(--accent-line); }
.tag { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--hover); border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.count-pill { font-size: 12px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.stage-pill { display: inline-block; font-size: 12px; font-weight: 500; padding: 1px 8px; border-radius: 4px; background: var(--tint); color: var(--tint-text); }
.prio { font-weight: 500; }
.prio::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--line-strong); }
.prio-high::before, .prio-urgent::before { background: var(--danger); }
.prio-medium::before { background: var(--warn); }
.prio-low::before { background: var(--brand-green); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot-active { background: var(--brand-green); }
.dot-static { background: var(--muted); }

/* ---------------------------------------------------------------- index page */
.index-head { margin-bottom: 4px; }
.index-head > p { margin: 6px 0 0; }
.title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 40px; }
.back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; margin-bottom: 8px; }
.back .ic { width: 15px; height: 15px; }
.view-tabs { display: flex; align-items: flex-end; gap: 2px; margin-top: 16px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; padding-top: 2px; }
.view-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; color: var(--text-2); font-weight: 400; border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; white-space: nowrap; max-width: 260px; text-decoration: none !important; margin-bottom: -1px; }
.view-tab span { overflow: hidden; text-overflow: ellipsis; }
.view-tab .ic { width: 15px; height: 15px; color: var(--muted); }
.view-tab:hover { color: var(--text); background: var(--hover); }
.view-tab.on { color: var(--text); font-weight: 500; background: var(--surface); border-color: var(--line); box-shadow: inset 0 2px 0 var(--brand); }
.view-tab.on .ic { color: var(--brand); }
.view-add { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 6px 10px; display: inline-flex; }
.view-add:hover { color: var(--link); }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 0 8px; }
.search-box { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--input-bg); padding: 0 10px; height: 32px; min-width: 240px; color: var(--muted); }
.search-box .ic { width: 15px; height: 15px; }
.search-box input, .search-box input:focus { border: 0; box-shadow: none; height: 100%; padding: 0; background: transparent; }
.search-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint); }
.search-box.sm { min-width: 180px; }
.seg-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.seg-toggle a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; color: var(--muted); }
.seg-toggle a + a { border-left: 1px solid var(--line); }
.seg-toggle a.on { background: var(--tint); color: var(--brand); }
.seg-toggle .ic { width: 16px; height: 16px; }
.quick-filters { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding-bottom: 12px; }
.qf { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; background: transparent;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.qf:hover { background: var(--hover); }
.qf .ic { width: 14px; height: 14px; color: var(--muted); }
.qf.on { background: var(--tint); border-color: var(--tint-line); color: var(--tint-text); }
.qf-adv { color: var(--link); }
.active-filters { display: contents; }
.fchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; background: var(--tint); color: var(--tint-text); border-radius: 999px; padding: 2px 4px 2px 10px; font-weight: 500; }
.fchip button { border: 0; background: none; color: inherit; cursor: pointer; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; }
.fchip button:hover { background: var(--tint-2); }
.dirty-note { font-size: 12px; color: var(--muted); margin-left: 8px; }

/* table */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.table-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.table-wrap { overflow: auto; max-height: calc(100vh - 300px); min-height: 200px; border-radius: var(--radius) var(--radius) 0 0; }
table.grid { width: 100%; border-collapse: separate; border-spacing: 0; }
.grid th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); text-align: left; font-size: 12px; line-height: 1.35; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: normal; vertical-align: middle; }
.grid td { padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--line); white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; background: var(--surface); }
.grid td[colspan] { max-width: none; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.grid .wrap-cell { overflow-wrap: anywhere; }
.grid tbody tr:hover td { background: var(--hover); }
.grid tbody tr.selected td { background: var(--tint); }
.grid .cb { width: 36px; padding-right: 0; }
.grid .name-col { position: sticky; left: 0; z-index: 1; min-width: 240px; max-width: 340px; }
.grid td.name-col { box-shadow: 1px 0 0 var(--line-soft); }
.grid th.name-col { z-index: 3; }
.th-sort { color: inherit; font-weight: 600; text-decoration: none !important; }
.th-sort.on { color: var(--link); }
.th-sort:hover { color: var(--link); }
.th-sort .arrow { color: var(--brand); }
.name-cell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.name-cell .rec-link { overflow: hidden; text-overflow: ellipsis; }
.rec-link { font-weight: 500; }
.obj-ic { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 6px; background: var(--tint); color: var(--link); flex: none; }
.obj-ic .ic { width: 15px; height: 15px; }
.preview-btn { margin-left: auto; opacity: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 4px; color: var(--text-2); cursor: pointer; height: 24px; width: 28px; display: inline-flex; align-items: center; justify-content: center; }
.preview-btn .ic { width: 14px; height: 14px; }
tr:hover .preview-btn, .preview-btn:focus { opacity: 1; }
.task-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--muted); background: var(--surface); color: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; padding: 0; vertical-align: middle; }
.task-check .ic { width: 12px; height: 12px; }
.task-check:hover { border-color: var(--accent-text); color: var(--accent-text); }
.task-check.done { background: var(--accent-text); border-color: var(--accent-text); color: var(--surface); }
.empty { display: block; padding: 40px 16px; text-align: center; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.empty-ic { width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 14px; background: var(--tint); color: var(--link); display: flex; align-items: center; justify-content: center; }
.empty-ic .ic { width: 26px; height: 26px; }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); flex-wrap: wrap; }
.pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-weight: 500; }
.pager a { color: var(--text-2); }
.pager a:hover { background: var(--hover); text-decoration: none; }
.pager .cur { background: var(--tint); color: var(--tint-text); border: 1px solid var(--tint-line); }
.pager .disabled { color: var(--line-strong); }
.pager select { margin-left: 8px; }
.foot-right { display: flex; align-items: center; gap: 12px; }
.bulk-bar { position: fixed; left: calc(var(--rail-w) + 24px); right: 24px; bottom: 18px; z-index: 25; display: flex; align-items: center; gap: 8px; background: var(--inverse); color: var(--inverse-text); padding: 10px 14px; border-radius: var(--radius); box-shadow: var(--shadow-lg); flex-wrap: wrap; }
.nav-expanded .bulk-bar { left: calc(var(--rail-w-open) + 24px); }
.bulk-bar .btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: var(--inverse-text); }
.bulk-bar .btn:hover { background: rgba(255,255,255,.16); }
.bulk-bar .btn.danger { color: #ffc4c4; background: rgba(255,255,255,.08); border-color: rgba(255,196,196,.45); }
.bulk-count { font-weight: 600; margin-right: 8px; }

/* board */
.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: stretch; min-height: calc(100vh - 300px); }
.board-col { flex: 0 0 276px; display: flex; flex-direction: column; background: var(--board-col); border-radius: var(--radius); max-height: calc(100vh - 280px); border: 1px solid var(--line-soft); }
.board-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; font-weight: 600; font-size: 13px; color: var(--heading); }
.board-head .count { font-weight: 500; color: var(--muted); background: var(--surface); border-radius: 999px; padding: 0 8px; font-size: 12px; }
.cards { flex: 1; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.cards.drop-over { background: var(--tint); border-radius: var(--radius-sm); outline: 2px dashed var(--tint-line); outline-offset: -4px; }
.card { position: relative; }
.board .card { padding: 10px 12px; cursor: grab; border-radius: var(--radius-sm); }
.board .card:hover { border-color: var(--tint-line); }
.board .card.dragging { opacity: .5; }
.card-title { display: block; font-weight: 500; margin-bottom: 6px; line-height: 1.3; padding-right: 22px; }
.card-props { margin: 0; display: grid; gap: 2px; font-size: 12px; }
.card-props div { display: flex; gap: 4px; }
.card-props dt { color: var(--muted); }
.card-props dt::after { content: ":"; }
.card-props dd { margin: 0; color: var(--text); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-assoc { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line-soft); font-size: 12px; display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card-assoc .ic { width: 13px; height: 13px; color: var(--muted); }
.card-actions { position: absolute; top: 6px; right: 6px; opacity: 0; }
.board .card:hover .card-actions { opacity: 1; }
.board-more { font-size: 12px; color: var(--muted); text-align: center; padding: 6px; }
.add-card { margin: 0 8px 8px; border: 1px dashed var(--line-strong); background: transparent; border-radius: var(--radius-sm); height: 32px; color: var(--text-2); font: inherit; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
.add-card:hover { background: var(--surface); border-color: var(--brand); color: var(--link); }
.add-card .ic { width: 14px; height: 14px; }
.board-foot { border-top: 1px solid var(--line); padding: 8px 12px; font-size: 12px; display: grid; gap: 2px; background: var(--board-foot); border-radius: 0 0 var(--radius) var(--radius); }

/* ---------------------------------------------------------------- record page */
.record { display: grid; grid-template-columns: 330px minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.rec-left, .rec-right { display: flex; flex-direction: column; gap: 12px; position: sticky; top: calc(var(--top-h) + 16px); max-height: calc(100vh - var(--top-h) - 32px); overflow-y: auto; scrollbar-width: thin; }
.rec-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rec-head { padding: 14px 16px 16px; }
.rec-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rec-nav .back { margin: 0; }
.rec-ident { display: flex; gap: 12px; align-items: flex-start; }
.rec-title { font-size: 20px; line-height: 1.25; word-break: break-word; }
.rec-sub { color: var(--text-2); margin-top: 3px; }
.rec-email { margin-top: 4px; display: flex; align-items: center; gap: 4px; font-size: 13px; }
.rec-header-props { margin: 12px 0 0; display: grid; gap: 2px; }
.rec-header-props .prop { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; }
.rec-header-props .prop dt { font-size: 13px; }
.rec-header-props .prop dt::after { content: ":"; }
.rec-header-props .prop dd { margin: 0; }
.quick-acts { display: flex; justify-content: space-between; margin-top: 16px; }
.qa { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px; color: var(--text-2); padding: 0; width: 54px; }
.qa-ic { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: var(--link); background: var(--surface); }
.qa-ic .ic { width: 17px; height: 17px; }
.qa:hover .qa-ic { background: var(--tint); border-color: var(--brand); }
.card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.card-head h3 { display: flex; align-items: center; gap: 6px; flex: 1 1 180px; min-width: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; color: var(--heading); }
.card-head > .icon-btn, .card-head > .menu { flex: none; }
.card-head h3 .ic { width: 16px; height: 16px; color: var(--link); }
.props { margin: 0; padding: 6px 16px 12px; }
.prop { padding: 6px 0; min-width: 0; }
.prop dt { font-size: 12px; color: var(--muted); font-weight: 400; display: flex; align-items: center; gap: 4px; }
.prop dd { margin: 2px 0 0; font-weight: 400; word-break: break-word; min-height: 22px; border-radius: 4px; }
.prop dd.editable { cursor: text; padding: 1px 6px; margin-left: -6px; margin-right: -6px; border: 1px solid transparent; }
.prop dd.editable:hover { border-color: var(--line); background: var(--surface-2); }
.prop dd.editing { border-color: transparent; background: none; padding: 0; margin: 2px 0 0; }
.prop dd.saved { animation: flash 1.2s ease; }
@keyframes flash { 0% { background: var(--accent-bg); } 100% { background: transparent; } }
.hist-btn { border: 0; background: none; padding: 0; margin-left: 2px; color: var(--muted); cursor: pointer; opacity: 0; display: inline-flex; }
.hist-btn .ic { width: 13px; height: 13px; }
.prop:hover .hist-btn { opacity: 1; }
.edit-row { display: flex; flex-direction: column; gap: 6px; }
.edit-actions { display: flex; gap: 6px; }
.props-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 20px; }
.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 8px; }
.record-tabs-row { display: flex; align-items: center; flex: none; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding-right: 8px; min-width: 0; }
.record-tabs-row > .tabs { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; border: 0; }
.record-tabs-row .tab { white-space: nowrap; margin-bottom: 0; }
.record-view-customize { flex: none; }
.record-view-preview { padding: 6px 0; text-align: right; }
.tab { border: 0; background: none; font: inherit; font-weight: 500; color: var(--text-2); padding: 12px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); border-bottom-color: var(--brand); }
.tab-count { font-size: 11px; background: var(--hover); border-radius: 999px; padding: 0 7px; color: var(--muted); }
.tabpanel { display: flex; flex-direction: column; gap: 12px; }
.assoc-card .card-head { padding: 10px 14px; }
.assoc-item { margin: 10px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); position: relative; }
.assoc-item:hover { border-color: var(--tint-line); }
.assoc-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-right: 60px; }
.assoc-name { font-weight: 500; }
.assoc-props { margin: 6px 0 0; font-size: 12px; display: grid; gap: 1px; }
.assoc-props div { display: flex; gap: 4px; }
.assoc-props dt { color: var(--muted); }
.assoc-props dt::after { content: ":"; }
.assoc-props dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assoc-actions { position: absolute; top: 6px; right: 6px; display: flex; opacity: 0; }
.assoc-item:hover .assoc-actions, .assoc-actions:focus-within { opacity: 1; }
.assoc-actions .icon-btn { width: 24px; height: 24px; }
.view-all { display: block; padding: 4px 16px 14px; font-size: 13px; }

/* timeline */
.tl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; }
.subtabs { display: flex; gap: 2px; flex-wrap: wrap; }
.subtabs button { border: 0; background: none; font: inherit; font-weight: 500; font-size: 13px; color: var(--text-2); padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.subtabs button:hover { background: var(--hover); }
.subtabs button.on { background: var(--tint); color: var(--tint-text); }
.tl-actions { display: flex; align-items: center; gap: 8px; }
.timeline { display: flex; flex-direction: column; gap: 8px; }
.card .timeline.compact { padding: 10px 12px 12px; }
.timeline.compact .tl-item { box-shadow: none; }
.tl-month { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 10px 2px 2px; font-weight: 600; }
.tl-item { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.tl-ic { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--tint); color: var(--link); flex: none; }
.tl-ic .ic { width: 16px; height: 16px; }
.tl-event .tl-ic { background: var(--hover); color: var(--muted); }
.tl-tasks .tl-ic { background: var(--accent-bg); color: var(--accent-text); }
.tl-body { flex: 1; min-width: 0; }
.tl-head { display: flex; align-items: center; gap: 8px; }
.tl-title { font-weight: 500; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-kicker { font-weight: 600; font-size: 13px; }
.tl-time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.tl-menu .icon-btn { width: 24px; height: 24px; }
.tl-text { margin-top: 6px; color: var(--text); word-break: break-word; }
.tl-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.tl-task { margin-top: 4px; }

.entra-team-review { margin-top: 18px; }
.entra-team-review > summary { cursor: pointer; list-style: none; }
.entra-team-review > summary::-webkit-details-marker { display: none; }
.entra-team-review > summary h3 { display: flex; align-items: center; gap: 8px; }
.entra-team-review > summary h3 .ic { width: 14px; height: 14px; transform: rotate(-90deg); }
.entra-team-review[open] > summary h3 .ic { transform: rotate(0); }
.entra-team-review:not([open]) > summary { border-bottom: 0; }
.entra-team-review > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* Submitted answers: readable labels and values without default definition-list indents. */
.tl-readable { padding: 16px 18px; }
.tl-readable .tl-head { align-items: baseline; flex-wrap: wrap; gap: 5px 12px; }
.tl-readable .tl-title { font-weight: 600; }
.tl-readable .tl-menu { align-self: center; }
.tl-subject { margin: 9px 0 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.tl-facts { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 12px 0; }
.tl-facts > div { min-width: 0; max-width: 100%; }
.tl-facts dt { margin: 0 0 3px; color: var(--muted); font-size: 11px; font-weight: 500; }
.tl-facts dd { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.5; overflow-wrap: anywhere; }
.tl-facts a { text-decoration: none; }
.tl-facts a:hover { text-decoration: underline; }
.tl-prose { margin-top: 12px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; font-size: 14px; color: var(--text); }
.tl-content { margin-top: 12px; }
.tl-content > summary { cursor: pointer; list-style: none; }
.tl-content > summary::-webkit-details-marker { display: none; }
.tl-preview { display: block; line-height: 1.7; overflow-wrap: anywhere; color: var(--text); }
.tl-read-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 7px 0 0; color: var(--link); font-size: 12px; font-weight: 500; }
.tl-read-toggle .ic { width: 13px; height: 13px; }
.tl-read-open, .tl-content[open] .tl-read-closed, .tl-content[open] .tl-preview { display: none; }
.tl-content[open] .tl-read-open { display: inline; }
.tl-content[open] .tl-read-toggle .ic { transform: rotate(180deg); }
.tl-content > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: 3px; }
.tl-join { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 8px; font-size: 13px; }
.tl-empty { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.tl-activity-source { margin-top: 14px; font-size: 11px; color: var(--muted); }
@media (max-width: 760px) {
  .tl-readable { padding: 14px 12px; gap: 9px; }
  .tl-readable .tl-time { white-space: normal; }
  .tl-facts { gap: 10px 18px; }
}
.tl-form { padding: 16px 18px; }
.tl-form .tl-head { align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.tl-form .tl-title { font-weight: 600; }
.tl-form-summary { margin: 8px 0 12px; line-height: 1.6; overflow-wrap: anywhere; }
.tl-form-summary strong { font-weight: 600; }
.tl-form a { text-decoration: none; font-weight: 500; }
.tl-form a:hover { text-decoration: underline; }
.tl-form-details > summary { display: flex; align-items: center; gap: 7px; width: fit-content; padding: 4px 0; color: var(--text-2); cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; }
.tl-form-details > summary::-webkit-details-marker { display: none; }
.tl-form-details > summary > .ic { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .15s; }
.tl-form-details[open] > summary > .ic { transform: rotate(0); }
.tl-form-details > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: 3px; }
.tl-field-count { margin-left: 3px; color: var(--muted); font-size: 12px; font-weight: 400; }
.tl-form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; margin: 14px 0 0; padding: 16px 0 2px; border-top: 1px solid var(--line); }
.tl-form-field { min-width: 0; }
.tl-form-field-wide { grid-column: 1 / -1; }
.tl-form-field dt { margin: 0 0 5px; color: var(--muted); font-size: 12px; font-weight: 500; }
.tl-form-field dd { margin: 0; color: var(--text); font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-form-source { margin-top: 14px; font-size: 11px; color: var(--muted); }
@media (max-width: 760px) {
  .tl-form { padding: 14px 12px; gap: 9px; }
  .tl-form-fields { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tl-form .tl-time { white-space: normal; }
}

/* ---------------------------------------------------------------- panel & modal */
.panel-backdrop, .modal-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 70; }
.panel, .filter-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--raised); color: var(--text); z-index: 80;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: slidein .18s ease; border-left: 1px solid var(--line); }
.filter-panel { width: min(440px, 100vw); }
@keyframes slidein { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.panel-form { display: flex; flex-direction: column; height: 100%; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; min-height: 52px; background: var(--surface-2); color: var(--heading); border-bottom: 1px solid var(--line); }
.panel-head h2 { color: var(--heading); font-size: 16px; }
.panel-head .muted { color: var(--muted); }
.preview-ident { display: flex; align-items: center; gap: 10px; }
.panel-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.panel-sub { margin: 18px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 500; }
.panel-body .props { padding: 0; }
.panel-foot { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.assoc-preset { background: var(--tint); color: var(--tint-text); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 14px; font-size: 13px; }
.prop-group .props { padding: 0; }
.modal-backdrop { display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; overflow-y: auto; }
.modal { background: var(--raised); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: min(620px, 100%); animation: pop .15s ease; }
.modal:has(.modal-wide) { width: min(900px, 100%); }
@keyframes pop { from { transform: scale(.98); opacity: .6; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 18px 20px; max-height: 64vh; overflow-y: auto; }
.modal-foot { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th { text-align: left; font-weight: 500; color: var(--text-2); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.mini-table td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.seg-tabs { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); margin-bottom: 14px; overflow: hidden; }
.seg-tabs button { border: 0; background: var(--surface); padding: 6px 14px; font: inherit; font-weight: 500; cursor: pointer; color: var(--text-2); }
.seg-tabs button.on { background: var(--tint); color: var(--tint-text); }

/* picker (record typeahead) */
.picker { position: relative; }
.picker-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 240px; overflow-y: auto; z-index: 90; }
.picker-results.always { position: static; box-shadow: none; margin-top: 8px; max-height: 260px; min-height: 60px; }
.picker-results button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 0; background: none; padding: 7px 10px; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.picker-results button span { font-weight: 500; }
.picker-results button:hover { background: var(--tint); }
.picker-results button.picked { background: var(--accent-bg); }
.picker-results button small { color: var(--muted); font-size: 12px; }
.picker-chosen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.picker-chosen .chip button { border: 0; background: none; cursor: pointer; padding: 0; color: inherit; font-size: 14px; line-height: 1; }

/* filter builder */
.filter-builder { display: flex; flex-direction: column; gap: 10px; }
.fgroup { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--surface-2); }
.fgroup-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
.frow { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 6px; display: grid; gap: 6px; }
.frow-top { display: flex; align-items: center; gap: 6px; }
.frow-top strong { flex: 1; font-weight: 500; }
.frow .vals { display: grid; gap: 4px; max-height: 180px; overflow-y: auto; }
.fand { font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; margin: -2px 0 4px; }
.for { font-size: 12px; font-weight: 600; color: var(--link); text-align: center; }
.prop-chooser { display: grid; gap: 4px; }
.prop-chooser .list { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.prop-chooser .list h6 { margin: 0; padding: 8px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 500; position: sticky; top: 0; background: var(--surface); }
.prop-chooser .list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 10px; font: inherit; color: var(--text); cursor: pointer; }
.prop-chooser .list button:hover { background: var(--tint); }
.filter-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.qf-pop .vals { max-height: 260px; overflow-y: auto; }
.menu-filter { margin: 0 0 6px; height: 32px !important; }

/* columns editor */
.columns-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.col-options { max-height: 46vh; overflow-y: auto; margin-top: 8px; }
.col-options h5 { margin: 10px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 500; }
.col-selected { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; max-height: 46vh; overflow-y: auto; }
.col-selected li { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 4px 4px 8px; background: var(--surface); cursor: grab; }
.col-selected li .icon-btn { margin-left: auto; }
.grip { color: var(--muted); letter-spacing: -2px; cursor: grab; }

/* settings */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.settings-nav { position: sticky; top: calc(var(--top-h) + 20px); display: flex; flex-direction: column; gap: 2px; }
.settings-nav h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 10px 4px; font-weight: 600; }
.settings-nav h4:first-child { margin-top: 4px; }
.settings-nav a { padding: 7px 10px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 400; text-decoration: none; }
.settings-nav a:hover { background: var(--hover); }
.settings-nav a.on { background: var(--tint); color: var(--tint-text); font-weight: 500; }
.settings-main .tabs { padding: 0; margin-top: 14px; }
.stage-table input[type=number] { width: 90px; }
.layout-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 12px 0 16px; }
.layout-cols h3 { margin-bottom: 6px; }
.chk-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; }
.map-table select { min-width: 260px; }
.tips { margin: 4px 0 12px; padding-left: 18px; }
.stat-row { display: flex; gap: 12px; margin: 12px 0 16px; flex-wrap: wrap; }
.stat { padding: 16px 20px; display: flex; flex-direction: column; min-width: 150px; }
.stat-n { font-size: 28px; font-weight: 500; color: var(--link); }
.options-editor { display: grid; gap: 6px; }
.options-editor .opt { display: grid; grid-template-columns: 1fr 1fr 30px; gap: 6px; }

/* search page */
.search-groups { display: grid; gap: 12px; max-width: 900px; }
.result-list { list-style: none; margin: 0; padding: 6px 0; }
.result-list li { padding: 7px 16px; display: flex; gap: 10px; align-items: baseline; }
.result-list li:hover { background: var(--hover); }

/* toasts */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast { background: var(--inverse); color: var(--inverse-text); padding: 10px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-weight: 400; max-width: 420px; animation: pop .15s ease; }
.toast a { color: var(--inverse-muted); margin-left: 8px; }
.toast.ok { border-left: 4px solid var(--brand-green); }
.toast.err { border-left: 4px solid var(--danger); }

.error-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.error-card { max-width: 480px; text-align: center; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1280px) {
  .record { grid-template-columns: 300px minmax(0, 1fr); }
  .rec-right { grid-column: 1 / -1; position: static; max-height: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  /* the right column now runs underneath BOTH columns, so a pinned left column would slide over it
     (its text showing through the gaps between cards): let it scroll with the page here */
  .rec-left { position: static; max-height: none; }
  .user-btn .who { display: none; }          /* avatar only; full name is in the menu */
}
@media (max-width: 900px) {
  .rail { width: var(--rail-w-open); transform: translateX(-100%); transition: transform .2s ease; }
  body.nav-open .rail { transform: none; }
  body.nav-open .rail-scrim { display: block; position: fixed; inset: var(--top-h) 0 0 0; background: var(--overlay); z-index: 34; }
  /* on phones the rail always shows its labeled, expanded form */
  .rail .rail-label { display: inline; }
  .rail .rail-scroll { overflow-y: auto; gap: 14px; }
  .rail .rail-group > .rail-head { height: auto; padding: 2px 10px; background: transparent !important; color: var(--heading); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
  .rail .rail-group > .rail-head .ic { display: none; }
  .rail .rail-list { display: block; position: static; min-width: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
  .rail .rail-list-title, [data-nav-expand] { display: none !important; }
  .page, .nav-expanded .page { margin-left: 0; padding: 16px; }
  .nav-mobile { display: inline-flex; }
  .gs-key { display: none; }
  .gsearch { flex: 1; margin: 0; min-width: 0; }
  .topbar { gap: 8px; padding: 0 8px; }
  .record { grid-template-columns: 1fr; }
  .rec-left { position: static; max-height: none; }
  .settings-layout, .columns-editor, .layout-cols, .form-grid { grid-template-columns: 1fr; }
  .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .settings-nav h4 { display: none; }
  .bulk-bar, .nav-expanded .bulk-bar { left: 16px; right: 16px; }
  .table-wrap { max-height: none; }
}
@media (max-width: 640px) {
  :root { --top-h: 96px; }
  .topbar { flex-wrap: wrap; align-content: center; row-gap: 8px; }
  .topbar-right { margin-left: auto; }
  .topbar .gsearch { order: 1; flex: 0 0 100%; }
  .brand { gap: 7px; }
  .brand img { height: 22px; }
  .brand .divider, .brand .product { display: none; }
}

/* ---------------------------------------------------------------- admin: users, teams, permissions (365 Auditor badge style) */
.badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.badge-neutral { background: var(--surface-2); color: var(--text-2); border-color: var(--line); }
.badge-good { background: var(--accent-bg); color: var(--accent-text); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-bad { background: var(--danger-bg); color: var(--danger); }
.badge-off { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.scope { font-size: 12px; white-space: nowrap; }
.scope-none { color: var(--muted); }
.scope-all { color: var(--accent-text); font-weight: 600; }
.scope-team, .scope-team_unassigned { color: var(--link); font-weight: 600; }
.scope-owned, .scope-owned_unassigned { color: var(--text); }
.stack { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.wrap, .wrap-cell { white-space: normal !important; }
.wrap-cell { max-width: 360px; }
.pad-top { padding-top: 14px; }
.pad-x { padding-left: 16px; padding-right: 16px; }
.pad-bottom { padding-bottom: 16px; }
.form-card.card { padding: 0; overflow: clip; }
.form-card .card-head { border-radius: 0; }
.form-card .card-head:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.wide-card { max-width: none; }
.indent { margin: -2px 0 10px 24px; }
.crumbs { margin-bottom: 4px; }
.crumbs a { font-weight: 400; }
.avatar-stack { display: flex; align-items: center; gap: 2px; }
.tree-toggle { width: 22px; height: 22px; border: 0; background: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; padding: 0; }
.tree-toggle:hover { background: var(--surface-2); color: var(--text); }
.tree-toggle .ic { width: 15px; height: 15px; transition: transform .15s ease; }
tr.collapsed .tree-toggle .ic { transform: rotate(-90deg); }
.tree-spacer { display: inline-block; width: 22px; }
.table-wrap.auto-h { max-height: none; min-height: 0; }
.perm-matrix td { padding: 6px 10px; }
.perm-matrix { table-layout: fixed; }
.perm-matrix th.name-col, .perm-matrix td.name-col { width: 190px; min-width: 0; }
.perm-matrix th:nth-child(3), .perm-matrix td:nth-child(3) { width: 96px; }
.perm-matrix .scope-select { width: 100%; min-width: 0; }
.perm-matrix select:disabled, .perm-matrix input:disabled { opacity: .45; }
.matrix-title { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.user-pick { max-height: 46vh; padding: 4px 10px; }
.user-pick .chk { padding: 5px 0; }
.status-tabs .count-pill { padding: 0 7px; font-size: 11px; }
.card > .mini-table.pad { padding: 8px 12px; }
.plain-list.pad { padding: 12px 16px; }

/* ---------------------------------------------------------------- Your preferences, notifications */
.prefs { max-width: 1000px; }
.prefs .form-card { max-width: none; }
.avatar.xl { width: 72px; height: 72px; font-size: 24px; }
.avatar-img { object-fit: cover; background: var(--surface-2); padding: 0; }
.user-btn .avatar { margin-left: -4px; }
.avatar-edit { display: flex; align-items: center; gap: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn-row label.btn { cursor: pointer; }
.hours-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 6px 0 4px; }
.hours-row input { width: auto; }
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; }
.field-err, input.field-err, select.field-err { outline: 2px solid var(--danger); outline-offset: 1px; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; margin: 0; }
.kv dt { color: var(--text-2); font-weight: 600; font-size: 12.5px; }
.kv dd { margin: 0; }
.connect-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; }
/* "Coming with Microsoft 365" sections: visibly inert, still readable */
.soon-card fieldset { border: 0; margin: 0; min-width: 0; }
.soon-card fieldset > * { opacity: .72; }
.soon-badge { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.soon-badge .ic { width: 13px; height: 13px; }
.soon { display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 0 5px; border-radius: 8px;
  border: 1px solid var(--line); color: var(--muted); margin-left: 4px; vertical-align: middle; }
.settings-nav a.muted-link { color: var(--muted); }

/* toggle switch: knob position shows the state (not colour alone) */
.switch { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-strong); transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch input:checked + span { background: var(--brand); border-color: var(--brand); }
.switch input:checked + span::after { transform: translateX(16px); background: #fff; }
.switch input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.notif-grid .ch-col { width: 140px; text-align: center; white-space: nowrap; }
.notif-grid th.ch-col .ic { width: 14px; height: 14px; vertical-align: -2px; }
.notif-grid .group-row th { background: var(--surface-2); text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 6px 14px; }
.is-paused .notif-grid { opacity: .55; }

/* bell */
.bell-btn { position: relative; }
.bell-count { position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid var(--surface); }
.bell-pop { width: 380px; padding: 0; overflow: hidden; display: none; }
.menu.open > .bell-pop { display: flex; flex-direction: column; }
.bell-loading { padding: 16px; }
.bell-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.bell-head .icon-btn .ic { width: 15px; height: 15px; }
.bell-list { max-height: 60vh; overflow-y: auto; }
.bell-list.full { max-height: none; }
.notif { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; color: var(--text); font-weight: 400; text-decoration: none; border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid transparent; }
.notif:hover { background: var(--hover); text-decoration: none; }
.notif.unread { border-left-color: var(--brand); background: var(--tint); }
.notif.unread .notif-title { font-weight: 600; }
.notif-ic { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--link); }
.notif-ic .ic { width: 18px; height: 18px; }
.notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.notif-title { line-height: 1.35; }
.notif-text { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-meta { font-size: 11.5px; color: var(--muted); }
.notif-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-top: 6px; }
.bell-empty { display: flex; gap: 12px; align-items: flex-start; padding: 22px 16px; }
.bell-empty > .ic { width: 22px; height: 22px; color: var(--muted); flex: none; }
.bell-foot { display: block; text-align: center; padding: 9px; font-weight: 600; border-top: 1px solid var(--line-soft); }
@media (max-width: 700px) {
  .bell-pop { width: calc(100vw - 24px); position: fixed; top: calc(var(--top-h) + 4px); right: 12px; left: 12px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 8px; }
  .avatar-edit { flex-direction: column; align-items: flex-start; }
}
.settings-main input:disabled, .settings-main select:disabled, .settings-main textarea:disabled {
  background: var(--surface-2); color: var(--text-2); cursor: not-allowed; }
/* settings pages on phones: wide tables and tab rows scroll inside the page instead of widening it */
.settings-main { min-width: 0; }
.settings-main .tabs { overflow-x: auto; scrollbar-width: thin; }
.settings-main .tabs .tab { white-space: nowrap; }
.kv dd { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- readability pass (colour-blind friendly)
   Lists and menus tell a heading, a link and "you are here" apart by weight,
   case, dividers and a selection bar — never by a shade of grey alone.
   Links are full ink; secondary text stays at 4.5:1 or better in both themes. */

/* Section headings in lists, menus and panels: small caps, bold, heading colour. */
.settings-nav h4, .rail-list-title, .menu-title, .gs-results h6, .prop-chooser .list h6, .col-options h5,
.tl-month, .panel-sub, .matrix-title, .notif-grid .group-row th,
.nav-expanded .rail-group > .rail-head {
  color: var(--heading); font-weight: 700; letter-spacing: .07em; }

/* Settings nav: groups split by a rule; links in full ink. */
.settings-nav { gap: 1px; }
.settings-nav h4 { font-size: 11.5px; margin: 0; padding: 14px 12px 6px; border-top: 1px solid var(--line); }
.settings-nav h4:first-child { border-top: 0; padding-top: 4px; }

/* Hover = soft fill only. Current page = fill + 3px bar on the left + bold. */
.settings-nav a, .rail-link { color: var(--text); font-weight: 400; }
.settings-nav a:hover, .rail-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.settings-nav a.on, .rail-link.on { background: var(--tint); color: var(--tint-text); font-weight: 700; box-shadow: inset 3px 0 0 var(--brand); }
.settings-nav a.muted-link { color: var(--text-2); }
.rail-group.on > .rail-head, .rail-head.on { box-shadow: inset 3px 0 0 var(--brand); }
.nav-expanded .rail-group.on > .rail-head { box-shadow: none; }

/* Tabs: full-ink labels; the current tab is bold with a thicker underline. */
.tab, .view-tab, .subtabs button { color: var(--text); }
.tab.on { font-weight: 700; border-bottom-width: 3px; }
.tab:hover:not(.on) { box-shadow: inset 0 -2px 0 var(--line-strong); }
.view-tab.on { font-weight: 700; }
.subtabs button.on { font-weight: 700; box-shadow: inset 0 -2px 0 var(--brand); }

/* Labels that sat in the faint grey: table headers, record property labels. */
.grid th { color: var(--text-2); font-weight: 700; }
.prop dt, .card-props dt, .assoc-props dt { color: var(--text-2); }
.count-pill { color: var(--text-2); }

/* Menus: hover is a fill; the chosen option also gets its check mark (shape, not colour). */
.menu-item:hover { background: var(--surface-2); }

/* ---------------------------------------------------------------- text stays inside its box
   Long unbroken values (emails, URLs, domains, IDs) wrap instead of running past
   a card's edge. Tables keep one-line cells with an ellipsis and scroll sideways
   inside their own card. */
.rec-ident > div { min-width: 0; flex: 1; }
.rec-title, .rec-sub, .rec-email a { overflow-wrap: anywhere; }
.rec-email { flex-wrap: wrap; }
.prop dd { overflow-wrap: anywhere; }
/* inline-edit hover box drawn as a shadow, so it no longer widens the row */
.prop dd.editable { padding: 1px 0; margin-left: 0; margin-right: 0; border: 0; }
.prop dd.editable:hover { background: var(--surface-2); box-shadow: 0 0 0 6px var(--surface-2), 0 0 0 7px var(--line); }
.assoc-props div { min-width: 0; }
.assoc-props dt { flex: none; }
.assoc-props dd { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; min-width: 0; }
.assoc-name, .card-title, .board-card a, .tl-text, .tl-title, .notif-title, .notif-text, .account-head, .menu-note,
.kv dd, .stack, .panel, .preview-panel, .result-list li { overflow-wrap: anywhere; }
.table-card { max-width: 100%; overflow-x: auto; }
.search-groups { grid-template-columns: minmax(0, 1fr); }
.result-list li { flex-wrap: wrap; min-width: 0; }
.notif-grid td.name-col { white-space: normal; max-width: none; }
.perm-matrix { min-width: 760px; }   /* scrolls sideways inside .table-wrap on narrow screens */
.form-actions { flex-wrap: wrap; }

/* ---------------------------------------------------------------- Home, Sales workspace, Forecast */
.rail-home { margin-bottom: 4px; }
.rail-link.is-soon { color: var(--text-2); }
.rail-link .soon { margin-left: auto; }
.chip-lock { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); }
.chip-lock .ic { width: 12px; height: 12px; }

/* rows used in every card: title in ink, details underneath */
.ws-list { list-style: none; margin: 0; padding: 0; }
.ws-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line-soft); }
.ws-row:last-child { border-bottom: 0; }
.ws-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ws-title { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.ws-title:hover { color: var(--link); }
.ws-title-text { overflow-wrap: anywhere; }
.ws-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--text-2); align-items: center; }
.ws-meta a { font-weight: 500; }
.ws-ic { flex: none; width: 26px; height: 26px; border-radius: 6px; background: var(--tint); color: var(--link); display: inline-flex; align-items: center; justify-content: center; }
.ws-ic .ic { width: 15px; height: 15px; }
.ws-time { flex: none; width: 92px; font-size: 12.5px; color: var(--text); line-height: 1.35; }
.ws-row .task-check { margin-top: 1px; }
.people { display: inline-flex; align-items: center; gap: 3px; }
.people a { line-height: 0; }
/* status words, outlined so they read without colour */
.flag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0 6px; border-radius: 4px;
  border: 1px solid var(--line-strong); color: var(--text); background: var(--surface); }
.flag-bad { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.ws-empty { display: flex; align-items: center; gap: 10px; padding: 14px 4px; color: var(--text-2); }
.ws-empty > .ic { width: 20px; height: 20px; color: var(--muted); flex: none; }
.soon-empty { align-items: flex-start; }
.ws-foot { display: flex; align-items: center; gap: 12px; padding-top: 8px; }

/* Home */
.home { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; max-width: 1400px; margin: 0 auto; }
.home-main, .home-side { min-width: 0; }
.home-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.home-hello { font-size: 15px; color: var(--text-2); font-weight: 500; }
.home-headline { font-size: clamp(22px, 1.5vw, 26px); line-height: 1.3; margin: 8px 0 18px; font-weight: 600; letter-spacing: -0.02em; max-width: none; overflow-wrap: anywhere; }
.brief-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 16px; margin-bottom: 14px; box-shadow: var(--shadow); }
.brief-card > header { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; flex-wrap: wrap; }
.brief-card h2 { min-width: 0; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.brief-card > header .muted { min-width: 0; overflow-wrap: anywhere; }
.brief-ic { width: 28px; height: 28px; border-radius: 6px; background: var(--tint); color: var(--link); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.brief-ic .ic { width: 16px; height: 16px; }
.brief-day { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--heading); font-weight: 700; margin: 10px 0 2px; }
.brief-note { margin: 0 0 4px; }
.brief-more { display: inline-block; margin-top: 6px; font-size: 13px; }
.home-side { position: sticky; top: calc(var(--top-h) + 16px); padding: 0; max-height: calc(100vh - var(--top-h) - 32px); overflow-y: auto; }
.side-head { padding: 14px 16px 4px; }
.side-head h2 { font-size: 15px; }
.side-tabs { padding: 0 8px; position: sticky; top: 0; background: var(--surface); z-index: 1; overflow-x: auto; }
.side-tabs .tab { padding: 10px 10px; font-size: 13px; white-space: nowrap; }
.side-pane { padding: 10px 16px 16px; }
.side-sub { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--heading); font-weight: 700; margin: 12px 0 4px; }
.side-more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; }
.side-table { width: 100%; }
.side-table td { vertical-align: top; padding: 7px 6px; border-bottom: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.big-stats { display: grid; gap: 4px; }
.big-stat { display: flex; flex-direction: column; padding: 12px 4px; border-bottom: 1px solid var(--line-soft); color: var(--text); text-decoration: none !important; }
.big-stat strong { font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--heading); }
.big-stat span { color: var(--text-2); }
.big-stat em { font-style: normal; font-weight: 700; color: var(--danger); font-size: 12.5px; }
.big-stat:hover span { text-decoration: underline; }
.metric-list { margin: 0; display: grid; gap: 0; }
.metric-list div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.metric-list dt { color: var(--text-2); }
.metric-list dd { margin: 0; font-weight: 700; text-align: right; }
.order-list { list-style: none; margin: 6px 0 14px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.order-list li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); }
.order-list li:last-child { border-bottom: 0; }
.order-list .chk { flex: 1; }
.order-list .is-soon { opacity: .75; }
.order-btns { display: inline-flex; gap: 2px; }
.order-btns .icon-btn { font-size: 15px; font-weight: 700; }

/* Sales workspace */
.ws-head { margin-bottom: 14px; }
.ws-title-h { display: flex; align-items: center; gap: 12px; }
.ws-kicker { color: var(--text-2); font-weight: 600; }
.ws-sep { width: 1px; height: 22px; background: var(--line-strong); }
.ws-rep-pick { display: inline-flex; align-items: center; gap: 6px; }
.ws-tabs { margin-top: 10px; }
.ws-summary { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.ws-section { margin-bottom: 14px; }
.ws-section > summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.ws-section > summary::-webkit-details-marker { display: none; }
.ws-section > summary h2 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.ws-caret .ic { width: 16px; height: 16px; transition: transform .15s; transform: rotate(-90deg); }
.ws-section[open] .ws-caret .ic { transform: none; }
.ws-info { margin-left: auto; }
.ws-section-body { padding: 0 16px 12px; border-top: 1px solid var(--line-soft); }
.ws-side { position: sticky; top: calc(var(--top-h) + 16px); padding: 0; }
.day-nav { display: flex; align-items: center; gap: 6px; padding: 4px 0 8px; }
.attain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 8px; }
.attain div { display: flex; flex-direction: column; }
.attain strong { font-size: 18px; }
.bar { display: block; height: 10px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); }
.bar.sm { height: 8px; width: 90px; flex: none; }

/* Schedule (week) */
.sched { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.sched-side { padding: 4px 14px; }
.sched-side summary { cursor: pointer; padding: 10px 0; list-style: none; }
.sched-side summary h2 { font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.sched-main { padding: 0; overflow: hidden; }
.sched-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sched-bar h2 { font-size: 15px; }
.cal { --hour-h: 52px; display: grid; grid-template-columns: 64px repeat(var(--days), minmax(0, 1fr)); overflow-x: auto; }
.cal-corner { border-bottom: 1px solid var(--line); }
.cal-dayhead { padding: 8px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line-soft); font-size: 13px; min-width: 0; }
.cal-dayhead.is-today strong { text-decoration: underline; text-underline-offset: 3px; }
.cal-tasks { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.cal-tasks a { font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 3px; }
.cal-tasks .ic { width: 12px; height: 12px; flex: none; }
.cal-hours { grid-column: 1; }
.cal-hour { height: var(--hour-h); font-size: 11.5px; color: var(--text-2); text-align: right; padding: 0 8px 0 0; transform: translateY(-7px); }
.cal-col { position: relative; border-left: 1px solid var(--line-soft); min-width: 0; }
.cal-col.is-today { background: color-mix(in srgb, var(--tint) 45%, transparent); }
.cal-slot { height: var(--hour-h); border-top: 1px solid var(--line-soft); }
.cal-event { position: absolute; left: 3px; right: 3px; padding: 3px 6px; border-radius: 5px; background: var(--tint); border: 1px solid var(--tint-line);
  border-left: 3px solid var(--brand); color: var(--text); font-size: 12px; overflow: hidden; text-decoration: none !important; display: flex; flex-direction: column; line-height: 1.25; }
.cal-event strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event span { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event:hover { border-color: var(--brand); }
.cal-now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--danger); }
.cal-now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* Dashboard tab */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.kpi-label { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.kpi strong { font-size: 26px; color: var(--heading); }
.kpi-sub { font-size: 12.5px; color: var(--text-2); }
.stage-bars { display: grid; gap: 8px; }
.stage-bar { display: grid; grid-template-columns: 210px minmax(0, 1fr) 190px; gap: 12px; align-items: center; }
.sb-label { font-weight: 500; overflow-wrap: anywhere; }
.sb-track { height: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.sb-fill { display: block; height: 100%; background: var(--brand); }
.sb-val { font-weight: 600; }

/* Forecast */
.seg-tabs a { display: inline-block; padding: 6px 14px; color: var(--text); font-weight: 500; text-decoration: none !important; }
.seg-tabs a + a { border-left: 1px solid var(--line-strong); }
.seg-tabs a.on { background: var(--tint); color: var(--tint-text); font-weight: 700; box-shadow: inset 0 -3px 0 var(--brand); }
.seg-tabs a:hover:not(.on) { background: var(--surface-2); }
.toolbar .seg-tabs { margin-bottom: 0; }
.fc-cards { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin: 10px 0 14px; }
.fc-card { padding: 14px 16px; }
.fc-card h2 { font-size: 14px; margin-bottom: 8px; }
.fc-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 10px; }
.fc-nums div { display: flex; flex-direction: column; }
.fc-nums dt { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.fc-nums dd { margin: 0; font-size: 22px; font-weight: 600; color: var(--heading); display: flex; flex-direction: column; }
.fc-nums dd .muted { font-size: 12px; font-weight: 400; }
.fc-grid td { vertical-align: top; }
.fc-total td { background: var(--surface-2); font-weight: 600; }
.fc-attain { display: flex; align-items: center; gap: 8px; }
.goals-wrap { max-height: 60vh; }
.goals-grid input { width: 120px; }
.tool-card { display: flex; gap: 20px; padding: 24px; max-width: 760px; }
.tool-ic { width: 56px; height: 56px; border-radius: 12px; background: var(--tint); color: var(--link); display: flex; align-items: center; justify-content: center; flex: none; }
.tool-ic .ic { width: 28px; height: 28px; }
.feed-full { padding: 4px 16px; }
@media (max-width: 1100px) {
  .home, .ws-summary, .sched, .fc-cards { grid-template-columns: minmax(0, 1fr); }
  .home-side, .ws-side { position: static; max-height: none; }
  .stage-bar { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 600px) {
  .home-headline { font-size: 22px; }
  .ws-time { width: 70px; }
  .attain { grid-template-columns: 1fr 1fr; }
}
.side-tabs { flex-wrap: wrap; overflow: visible; }
.cal-event.is-short { flex-direction: row; gap: 6px; align-items: baseline; padding-top: 2px; }
.ws-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } .ws-tabs .tab { white-space: nowrap; flex: none; }

/* ---------------------------------------------------------------- rail, HubSpot-style (2026-11-06)
   Collapsed or expanded, the rail is a short list of sections; a section's pages
   open in a flyout (hover, click or keyboard). Expanded only adds the labels.
   On phones the drawer opens a section in place (accordion). */
.rail-chev { display: none; margin-left: auto; }
.rail-chev .ic { width: 15px; height: 15px; }
.rail-group.open > .rail-list { display: block; }
.rail-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.rail-sub { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--heading); padding: 6px 10px 4px; }
.rail-list { max-height: calc(100vh - var(--top-h) - 24px); overflow-y: auto; }
.rail-group.open > .rail-head { background: var(--surface-2); color: var(--text); }
.nav-expanded .rail-scroll { gap: 4px; overflow: visible; }
.nav-expanded .rail-group > .rail-head { height: 40px; padding: 0 11px; cursor: pointer; background: transparent; color: var(--text);
  font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.nav-expanded .rail-group > .rail-head .ic { display: inline-block; }
.nav-expanded .rail-group > .rail-head:hover, .nav-expanded .rail-group:hover > .rail-head,
.nav-expanded .rail-group.open > .rail-head { background: var(--surface-2) !important; }
.nav-expanded .rail-group.on > .rail-head { background: var(--tint) !important; color: var(--tint-text); box-shadow: inset 3px 0 0 var(--brand); }
.nav-expanded .rail-chev { display: inline-flex; }
.nav-expanded .rail-list { display: none; position: absolute; left: calc(100% + 8px); top: -6px; min-width: 236px; padding: 6px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 60; }
.nav-expanded .rail-group:hover > .rail-list, .nav-expanded .rail-group.open > .rail-list { display: block; }
.nav-expanded .rail-list::before { display: block; }
.nav-expanded .rail-list-title { display: block; }
.nav-expanded .rail-solo { height: 40px; font-weight: 600; color: var(--text); }
.nav-expanded .rail-solo .ic { width: 21px; height: 21px; }
.rail-head .rail-label { font-weight: 600; }
.rail-group:focus-within > .rail-list { display: none; }
.rail-group:hover > .rail-list, .rail-group.open > .rail-list { display: block; }
@media (max-width: 900px) {
  .rail .rail-scroll { overflow-y: auto; gap: 4px; }
  .rail .rail-group > .rail-head { height: 42px; padding: 0 11px; cursor: pointer; background: transparent !important; color: var(--text);
    font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 600; }
  .rail .rail-group > .rail-head .ic { display: inline-block; }
  .rail .rail-group.on > .rail-head { background: var(--tint) !important; color: var(--tint-text); }
  .rail .rail-chev { display: inline-flex; }
  .rail .rail-chev .ic { transition: transform .15s; }
  .rail .rail-group.open .rail-chev .ic { transform: rotate(90deg); }
  .rail .rail-list, .nav-expanded .rail .rail-list { display: none; position: static; min-width: 0; padding: 0 0 6px 24px; background: transparent;
    border: 0; box-shadow: none; max-height: none; }
  .rail .rail-group.open > .rail-list { display: block; }
  .rail .rail-group:hover > .rail-list { display: none; }
  .rail .rail-group.open:hover > .rail-list { display: block; }
  .rail .rail-list::before { display: none; }
}

/* ---------------------------------------------------------------- Service: Help desk, Customer success */
.hd-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.hd-main { min-width: 0; }
.hd-nav { position: sticky; top: calc(var(--top-h) + 16px); padding: 10px 8px; display: flex; flex-direction: column; gap: 1px;
  max-height: calc(100vh - var(--top-h) - 32px); overflow-y: auto; }
.hd-nav-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 8px; }
.hd-nav-head h2 { font-size: 16px; }
.hd-sub { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--heading); padding: 12px 8px 4px; }
.hd-link { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--radius-sm); color: var(--text); font-weight: 400; text-decoration: none !important; }
.hd-link .ic { width: 16px; height: 16px; color: var(--text-2); flex: none; }
.hd-link:hover { background: var(--surface-2); }
.hd-link.on { background: var(--tint); color: var(--tint-text); font-weight: 700; box-shadow: inset 3px 0 0 var(--brand); }
.hd-link.on .ic { color: var(--tint-text); }
.hd-count { margin-left: auto; font-size: 12px; font-weight: 700; min-width: 22px; text-align: right; }
.hd-recnav { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.rec-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* health: the word carries the meaning; border style is a second, non-colour cue */
.health { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 0 7px; border-radius: 4px; border: 1px solid var(--line-strong);
  color: var(--text); background: var(--surface); white-space: nowrap; }
.health-watch { border-style: dashed; border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }
.health-at-risk { border: 2px double var(--danger); color: var(--danger); background: var(--danger-bg); }
.service-card .card-head { gap: 8px; }
.service-card .metric-list { padding-top: 4px; }
.ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.ins-grid .card { margin: 0; }
.stage-bar.compact { grid-template-columns: 130px minmax(0, 1fr) 40px; }
.wrap-cell { white-space: normal !important; max-width: 340px; }
a.kpi { color: var(--text); text-decoration: none !important; }
a.kpi:hover .kpi-label { text-decoration: underline; }
@media (max-width: 900px) {
  .hd-layout { grid-template-columns: minmax(0, 1fr); }
  .hd-nav { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .hd-nav-head, .hd-sub { width: 100%; }
  .hd-link { border: 1px solid var(--line); }
}

/* ---------------------------------------------------------------- view types + View settings panel */
.index-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.index-body.vs-open { grid-template-columns: minmax(0, 1fr) 320px; }
.index-view { min-width: 0; }
.view-settings { position: sticky; top: calc(var(--top-h) + 12px); padding: 0; max-height: calc(100vh - var(--top-h) - 24px); overflow-y: auto; }
.vs-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.vs-head h2 { font-size: 15px; }
.vs-body { padding: 10px 14px 16px; }
.vs-sec { border-top: 1px solid var(--line-soft); padding-top: 10px; margin-top: 12px; }
.vs-sec h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--heading); font-weight: 700; margin-bottom: 8px; }
.vs-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.vs-type { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--text); font-size: 12px; font-weight: 500; text-decoration: none !important; }
.vs-type:hover { background: var(--surface-2); }
.vs-type.on { background: var(--tint); color: var(--tint-text); font-weight: 700; border: 2px solid var(--brand); padding: 7px 3px; }
.vs-type .ic { width: 18px; height: 18px; }
.vs-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: 0; background: none; font: inherit; color: var(--text);
  cursor: pointer; border-radius: var(--radius-sm); text-align: left; }
.vs-row:hover { background: var(--surface-2); }
.vs-row > span { flex: 1; }
.vs-row .ic { width: 16px; height: 16px; flex: none; }
.vs-row.danger { color: var(--danger); }
.view-settings .field { margin-bottom: 8px; }
.btn-on { background: var(--tint); color: var(--tint-text); border-color: var(--brand); }

/* calendar view */
.vcal { padding: 0; overflow: hidden; }
.vcal-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.vcal-bar h2 { font-size: 16px; }
.vcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.vcal-dow { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.vcal-day { min-height: 104px; padding: 4px 6px 6px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vcal-day:nth-child(7n) { border-right: 0; }
.vcal-day.is-other { background: var(--surface-2); }
.vcal-day.is-other .vcal-num { color: var(--text-2); font-weight: 400; }
.vcal-day.is-today { box-shadow: inset 0 0 0 2px var(--brand); }
.vcal-num { font-size: 12.5px; font-weight: 700; }
.vcal-item { font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--tint); border-left: 3px solid var(--brand); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; text-decoration: none !important; }
.vcal-item:hover { text-decoration: underline !important; }

/* timeline view */
.vtl { padding: 0; overflow: hidden; }
.vtl-grid { overflow-x: auto; }
.vtl-head, .vtl-row { display: grid; grid-template-columns: 240px minmax(480px, 1fr); }
.vtl-head { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.vtl-name { padding: 7px 12px; border-right: 1px solid var(--line-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtl-name a { font-weight: 600; color: var(--text); }
.vtl-track { position: relative; min-height: 34px; }
.vtl-month { position: absolute; top: 0; bottom: 0; padding: 8px 6px; font-size: 12px; font-weight: 700; border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.vtl-row { border-bottom: 1px solid var(--line-soft); }
.vtl-today { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--danger); }
.vtl-bar { position: absolute; top: 6px; height: 22px; border-radius: 5px; background: var(--tint); border: 1px solid var(--tint-line); border-left: 3px solid var(--brand);
  color: var(--text); font-size: 11.5px; overflow: hidden; white-space: nowrap; padding: 2px 6px; text-decoration: none !important; min-width: 10px; }
.vtl-bar.is-point { border-radius: 11px; }
.vtl-bar span { display: inline-block; }
@media (max-width: 1100px) {
  .index-body.vs-open { grid-template-columns: minmax(0, 1fr); }
  .view-settings { position: static; max-height: none; }
  .vtl-head, .vtl-row { grid-template-columns: 150px minmax(420px, 1fr); }
}
/* only one section flyout at a time: once one is open (clicked), hovering others does not stack a second */
.rail.has-open .rail-group:not(.open):hover > .rail-list { display: none; }
/* board cards: "Label: value" on one line, cut with an ellipsis inside the card (full text on hover) */
.card-props div { min-width: 0; }
.card-props dt { flex: none; max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-props dd { min-width: 0; flex: 1; }
.vcal-num { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.vcal-day.is-today .vcal-num { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .vcal-num .flag { display: none; } .vcal-day { min-height: 72px; padding: 3px; } .vcal-item { font-size: 10.5px; padding: 0 3px; } }

/* ---------------------------------------------------------------- charts (validated categorical palette, fixed order; light + dark selected) */
:root { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; --series-7: #6250d6; --series-8: #e34948; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767; } }
:root[data-theme="dark"] { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767; }
.chart { width: 100%; height: auto; display: block; font-family: var(--font); }
.chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .tick { fill: var(--text-2); font-size: 11px; }
.chart .vlabel { fill: var(--text); font-size: 11px; font-weight: 600; }
.chart .mark { stroke: var(--surface); stroke-width: 1; cursor: default; }
.chart .mark:hover, .chart .dot:hover { opacity: .8; }
.chart .line { fill: none; stroke-width: 2; }
.chart .area { opacity: .22; stroke: none; }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart .slice { stroke: var(--surface); stroke-width: 2; }
.chart .hole { fill: var(--surface); }
.chart .donut-total { fill: var(--text); font-size: 20px; font-weight: 700; }
.s1 { fill: var(--series-1); stroke: var(--series-1); } .s2 { fill: var(--series-2); stroke: var(--series-2); } .s3 { fill: var(--series-3); stroke: var(--series-3); }
.s4 { fill: var(--series-4); stroke: var(--series-4); } .s5 { fill: var(--series-5); stroke: var(--series-5); } .s6 { fill: var(--series-6); stroke: var(--series-6); }
.s7 { fill: var(--series-7); stroke: var(--series-7); } .s8 { fill: var(--series-8); stroke: var(--series-8); }
.chart .mark.s1, .chart .mark.s2, .chart .mark.s3, .chart .mark.s4, .chart .mark.s5, .chart .mark.s6, .chart .mark.s7, .chart .mark.s8 { stroke: var(--surface); }
.chart .line.s1, .chart .line.s2, .chart .line.s3, .chart .line.s4, .chart .line.s5, .chart .line.s6, .chart .line.s7, .chart .line.s8 { fill: none; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 0 0 8px; padding: 0; font-size: 12.5px; color: var(--text); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw.s1 { background: var(--series-1); } .sw.s2 { background: var(--series-2); } .sw.s3 { background: var(--series-3); } .sw.s4 { background: var(--series-4); }
.sw.s5 { background: var(--series-5); } .sw.s6 { background: var(--series-6); } .sw.s7 { background: var(--series-7); } .sw.s8 { background: var(--series-8); }
.chart-tip { position: fixed; z-index: 200; pointer-events: none; background: var(--inverse); color: var(--inverse-text); padding: 5px 9px; border-radius: 6px;
  font-size: 12.5px; box-shadow: var(--shadow-lg); max-width: 320px; }
.chart-empty { padding: 30px 10px; text-align: center; color: var(--text-2); }
.kpi-big { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 0; }
.kpi-big strong { font-size: 40px; line-height: 1.1; color: var(--heading); }
.kpi-big span { color: var(--text-2); }
.rv-toggle { margin-top: 6px; }
.rv-foot { margin-top: 6px; }
.grid.compact td, .grid.compact th { padding: 5px 10px; }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
.spark-bar { flex: 1; background: var(--series-1); border-radius: 3px 3px 0 0; min-height: 2px; }

/* ---------------------------------------------------------------- reporting pages */
.rep-tabs { margin-top: 10px; }
.rb { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.rb-settings { position: sticky; top: calc(var(--top-h) + 12px); max-height: calc(100vh - var(--top-h) - 24px); overflow-y: auto; padding: 0; }
.rb-settings .vs-types { grid-template-columns: repeat(4, 1fr); }
.rb-settings button.vs-type { background: none; font: inherit; cursor: pointer; }
.cond-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 6px; align-items: start; margin-bottom: 6px; }
.cond-row select, .cond-row input { min-width: 0; width: 100%; }
.cond-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; margin-bottom: 6px; }
.cond-or { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--heading); margin-bottom: 6px; }
.dash-pick { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; padding: 0; color: var(--heading); font: inherit; }
.dash-pick .ic { width: 18px; height: 18px; }
.dash-add { min-width: 300px; }
.dash-add input { width: 100%; margin-bottom: 6px; }
.dash-filters { flex-wrap: wrap; }
.dash-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row dense; grid-auto-rows: 8px; gap: 14px; align-items: start; }
.dash-tile { margin: 0; min-width: 0; grid-row-end: span var(--dash-rows, 20); }
.dash-grid:not(.dash-ready) { grid-auto-rows: auto; }
.dash-grid:not(.dash-ready) .dash-tile { grid-row-end: auto; }
.dash-layout-help { color: var(--text-2); font-size: 12px; margin: 8px 0; }
.dash-grip { border: 0; padding: 2px 4px; background: none; color: var(--muted); cursor: grab; font-size: 19px; line-height: 1; touch-action: none; }
.dash-grip:active { cursor: grabbing; }
.dash-resize { position: absolute; right: 2px; bottom: 2px; border: 0; background: transparent; color: var(--muted); padding: 4px; font-size: 17px; line-height: 1; cursor: nwse-resize; touch-action: none; }
.dash-grip:focus-visible, .dash-resize:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dash-tile.is-dragging { opacity: .65; outline: 2px dashed var(--brand); z-index: 5; }
.dash-tile.is-resizing { outline: 2px solid var(--brand); z-index: 5; }
.dash-tile.size-third { grid-column: span 2; } .dash-tile.size-half { grid-column: span 3; } .dash-tile.size-full { grid-column: span 6; }
.dash-tile .card-head h3 a { color: var(--heading); }
.dash-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; color: var(--text); text-decoration: none !important; }
.dash-card:hover strong { text-decoration: underline; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tpl { padding: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin: 0; }
.tpl p { margin: 0; }
.goal-prog { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.goal-nums { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.goal-pct { margin-left: auto; font-weight: 700; }
@media (max-width: 1100px) {
  .rb { grid-template-columns: minmax(0, 1fr); }
  .rb-settings { position: static; max-height: none; }
  .dash-tile.size-third, .dash-tile.size-half { grid-column: span 6; }
}

/* ---------------------------------------------------------------- workflow editor */
.wf-title { gap: 10px; }
.wf-name { font-size: 20px; font-weight: 700; color: var(--heading); border: 1px solid transparent; background: transparent; padding: 2px 6px; border-radius: var(--radius-sm); min-width: 0; flex: 1 1 320px; max-width: 640px; }
.wf-name:hover, .wf-name:focus { border-color: var(--line-strong); background: var(--input-bg); }
.wf-desc { width: 100%; max-width: 900px; border: 1px solid transparent; background: transparent; color: var(--text-2); padding: 2px 6px; border-radius: var(--radius-sm); margin-top: 4px; }
.wf-desc:hover, .wf-desc:focus { border-color: var(--line-strong); background: var(--input-bg); }
.wf-editor { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.wf-editor:has(.wf-panel[hidden]) { grid-template-columns: minmax(0, 1fr); }
.wf-canvas { display: flex; flex-direction: column; align-items: center; padding: 18px 8px 40px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow-x: auto; min-height: 300px; }
.wf-card { width: 340px; max-width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); cursor: pointer; }
.wf-card:hover { border-color: var(--brand); }
.wf-card.on { border: 2px solid var(--brand); box-shadow: 0 0 0 3px var(--tint); }
.wf-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.wf-card-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.wf-card-head strong { color: var(--heading); }
.wf-cat { margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.wf-ic .ic { width: 16px; height: 16px; color: var(--link); }
.wf-card-body { padding: 8px 12px 10px; font-size: 13px; overflow-wrap: anywhere; }
.wf-trigger { border-top: 4px solid var(--brand); }
.wf-add { display: flex; flex-direction: column; align-items: center; padding: 2px 0; }
.wf-add::before, .wf-add::after { content: ""; width: 2px; height: 10px; background: var(--line-strong); }
.wf-plus { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-weight: 700; cursor: pointer; line-height: 1; }
.wf-plus:hover { background: var(--tint); border-color: var(--brand); }
.wf-line { width: 2px; height: 14px; background: var(--line-strong); }
.wf-branches { display: flex; gap: 16px; align-items: flex-start; padding-top: 10px; }
.wf-branch { display: flex; flex-direction: column; align-items: center; border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 8px; min-width: 360px; }
.wf-branch-tag { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--heading); }
.wf-join { font-size: 11.5px; color: var(--text-2); padding: 6px 0 0; }
.wf-end { margin-top: 4px; padding: 3px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 12px; font-weight: 700; color: var(--text-2); }
.wf-panel { position: sticky; top: calc(var(--top-h) + 12px); max-height: calc(100vh - var(--top-h) - 24px); overflow-y: auto; padding: 0; }
.wf-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.wf-panel-head h2 { font-size: 15px; }
.wf-panel-body { padding: 12px 14px 16px; }
.wf-panel-body .field { margin-bottom: 10px; }
.wf-panel-body select[multiple] { width: 100%; }
.wf-run { border-bottom: 1px solid var(--line-soft); padding: 8px 14px; }
.wf-run summary { cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wf-log { margin: 8px 0 4px; padding-left: 20px; font-size: 13px; display: grid; gap: 4px; }
.enroll-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
@media (max-width: 1100px) {
  .wf-editor { grid-template-columns: minmax(0, 1fr); }
  .wf-panel { position: static; max-height: none; }
  .wf-branches { flex-direction: column; }
  .wf-branch { min-width: 0; width: 100%; }
}
/* workflow canvas: centred, but still scrollable to the left edge when branches are wider than the space */
.wf-canvas { align-items: safe center; }
.wf-branches { width: max-content; }
/* condition rows in the narrow side panels: property and remove on one line, operator and value below */
.wf-panel .cond-row, .rb-settings .cond-row { grid-template-columns: minmax(0, 1fr) auto; }
.wf-panel .cond-row > [data-c=property], .rb-settings .cond-row > [data-c=property] { grid-column: 1; grid-row: 1; }
.wf-panel .cond-row > [data-cond-del], .rb-settings .cond-row > [data-cond-del] { grid-column: 2; grid-row: 1; }
.wf-panel .cond-row > [data-c=operator], .rb-settings .cond-row > [data-c=operator] { grid-column: 1 / -1; grid-row: 2; }
.wf-panel .cond-row > [data-c=value], .rb-settings .cond-row > [data-c=value] { grid-column: 1 / -1; grid-row: 3; }

/* ---------------------------------------------------------------- login page (Microsoft 365 sign-in) */
.login-body { min-height: 100vh; color: var(--text); font-family: var(--font); margin: 0; overflow-x: hidden;
  background: #00172f linear-gradient(160deg, #012D5A 0%, #01264c 55%, #00172f 100%); }
.login-wrap { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; box-sizing: border-box; }
.login-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--brand-green);
  border-radius: var(--radius-lg); padding: 28px 28px 24px; box-sizing: border-box; box-shadow: 0 6px 24px rgba(1, 45, 90, .08); }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.login-brand img { display: none; height: 30px; width: auto; }
:root:not([data-theme="dark"]) .login-brand .logo-color { display: block; }
:root[data-theme="dark"] .login-brand .logo-white { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .login-brand .logo-color { display: none; }
  :root:not([data-theme="light"]) .login-brand .logo-white { display: block; }
}
.login-product { font-weight: 650; letter-spacing: -0.01em; font-size: 18px; color: var(--heading); padding-left: 12px; border-left: 1px solid var(--line-strong); }
.login-product span { color: var(--link); }  /* same two-tone mark as the top bar's .brand .product */
.login-card h1 { font-size: 24px; margin: 0 0 10px; color: var(--heading); }
.login-lead { margin: 0 0 18px; line-height: 1.5; overflow-wrap: anywhere; }
.login-lead.login-after { margin: 16px 0 0; }
.login-ms { width: 100%; justify-content: center; min-height: 44px; font-size: 15px; font-weight: 600; gap: 10px; box-sizing: border-box; }
.ms-mark { width: 18px; height: 18px; flex: none; background: #fff; padding: 2px; border-radius: 2px; }
.login-notice, .login-info { border-radius: var(--radius); padding: 10px 12px; margin: 0 0 16px; line-height: 1.45; overflow-wrap: anywhere; }
.login-notice { background: var(--danger-bg); border: 1px solid var(--danger); border-left-width: 4px; color: var(--text); }
.login-notice strong { color: var(--danger); display: block; }
.login-info { background: var(--tint); border: 1px solid var(--tint-line); border-left-width: 4px; color: var(--text); }
.login-card code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); padding: 1px 4px; border-radius: 4px; }

/* Login background — navy field (same in both themes) with slow-drifting brand glows and a hexagon
   (molecule) lattice that creeps diagonally while a soft light sweeps across it. Decorative only:
   everything is transform/opacity/mask so it stays cheap, and it all stops under reduced motion. */
.login-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.login-glow { position: absolute; border-radius: 50%; will-change: transform, opacity; }
.login-glow.g-blue { width: 95vmax; height: 95vmax; right: -35vmax; top: -45vmax;
  background: radial-gradient(closest-side, rgba(3, 99, 201, .8), rgba(3, 99, 201, 0));
  animation: login-drift-blue 26s ease-in-out infinite alternate; }
.login-glow.g-green { width: 75vmax; height: 75vmax; left: -30vmax; bottom: -40vmax;
  background: radial-gradient(closest-side, rgba(121, 183, 1, .42), rgba(121, 183, 1, 0));
  animation: login-drift-green 32s ease-in-out infinite alternate; }
.login-glow.g-sky { width: 55vmax; height: 55vmax; left: 15vw; top: 35vh;
  background: radial-gradient(closest-side, rgba(99, 168, 245, .32), rgba(99, 168, 245, 0));
  animation: login-drift-sky 40s ease-in-out infinite alternate; }
@keyframes login-drift-blue {
  0%   { transform: translate(0, 0) scale(1); opacity: .85; }
  50%  { transform: translate(-20vw, 16vh) scale(1.15); opacity: 1; }
  100% { transform: translate(-6vw, 34vh) scale(.92); opacity: .7; } }
@keyframes login-drift-green {
  0%   { transform: translate(0, 0) scale(1); opacity: .55; }
  50%  { transform: translate(14vw, -10vh) scale(1.1); opacity: 1; }
  100% { transform: translate(26vw, -22vh) scale(1.25); opacity: .75; } }
@keyframes login-drift-sky {
  0%   { transform: translate(0, 0) scale(.9); opacity: .35; }
  50%  { transform: translate(-28vw, -14vh) scale(1.1); opacity: .9; }
  100% { transform: translate(22vw, -28vh) scale(1); opacity: .5; } }

/* Lattice: fades out behind the card, visible toward the edges. */
.login-lattice-wrap { position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 22%, #000 85%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 22%, #000 85%); }
.login-lattice { position: absolute; inset: -192px; opacity: .13; will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55.4' height='96' viewBox='0 0 55.4 96'%3E%3Cg fill='none' stroke='%23B1CFEE' stroke-width='1'%3E%3Cpath d='M27.7 0L55.4 16V48L27.7 64L0 48V16Z M27.7 64V96'/%3E%3C/g%3E%3Cg fill='%23B1CFEE'%3E%3Ccircle cx='27.7' cy='0' r='2.2'/%3E%3Ccircle cx='0' cy='48' r='2.2'/%3E%3Ccircle cx='55.4' cy='48' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 55.4px 96px;
  animation: login-lattice 90s linear infinite; }
/* Moves exactly two tiles across and down, so the loop is seamless. */
@keyframes login-lattice { from { transform: translate(0, 0); } to { transform: translate(110.8px, 192px); } }
/* Glint: a brighter copy of the lattice, shown only inside a soft spot that sweeps across now and then. */
.login-glint { opacity: .55;
  -webkit-mask-image: radial-gradient(circle closest-side, #000, transparent); mask-image: radial-gradient(circle closest-side, #000, transparent);
  -webkit-mask-size: 560px 560px; mask-size: 560px 560px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: login-lattice 90s linear infinite, login-glint 18s ease-in-out infinite; }
@keyframes login-glint {
  0%        { -webkit-mask-position: -700px 15%; mask-position: -700px 15%; }
  55%, 100% { -webkit-mask-position: calc(100% + 700px) 85%; mask-position: calc(100% + 700px) 85%; } }

.login-body .login-card { border-color: transparent; border-top-color: var(--brand-green); box-shadow: 0 24px 60px rgba(0, 10, 25, .45); }
:root[data-theme="dark"] .login-body .login-card { border-color: #2f5d85; border-top-color: var(--brand-green); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .login-body .login-card { border-color: #2f5d85; border-top-color: var(--brand-green); } }

@media (prefers-reduced-motion: reduce) {
  .login-glow, .login-lattice { animation: none; }
  .login-glint { display: none; }
}

/* "Viewing as" banner for super admins (sign-in mode) */
.viewas-bar { position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--top-h) + 6px); z-index: 45; display: flex; gap: 10px; align-items: center;
  background: var(--inverse); color: var(--inverse-text); border-radius: 999px; padding: 6px 8px 6px 14px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.2); max-width: calc(100vw - 32px); }
.viewas-bar strong { font-weight: 700; }
.viewas-bar a { color: var(--inverse-text); background: rgba(255,255,255,.16); border-radius: 999px; padding: 3px 10px; text-decoration: none; font-weight: 600; white-space: nowrap; }

/* Microsoft 365 connection status (Your preferences, Settings › Microsoft 365) */
.conn-state { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.conn-state::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.conn-state.ok { color: var(--accent-text); }
.conn-state.ok::before { background: currentColor; }
.conn-state.reauth, .conn-state.error { color: var(--danger); }
.conn-state.none { color: var(--text-2); }
.never-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.never-list li { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 13px; max-width: 100%; overflow-wrap: anywhere; }
.never-list button { border: 0; background: transparent; color: var(--text-2); cursor: pointer; padding: 2px 6px; border-radius: 999px; }
.never-list button:hover { background: var(--hover); color: var(--danger); }

.callout { background: var(--tint); border: 1px solid var(--tint-line); border-left-width: 4px; border-radius: var(--radius); padding: 12px 14px; margin-top: 14px; }
.callout .steps { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.45; }
.callout code, .kv code { overflow-wrap: anywhere; }
.chk.is-soon-opt { color: var(--text-2); }

/* Outlook composer (send email / schedule meeting from a record) */
.compose .modal-body { display: grid; gap: 12px; }
.compose-from { margin: 0; overflow-wrap: anywhere; }
.compose .chk-list { display: grid; gap: 4px; margin: 4px 0 8px; max-height: 180px; overflow: auto; }
.compose .chk-list .chk span { overflow-wrap: anywhere; }
.compose fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.compose-sig { border-left: 3px solid var(--line-strong); padding: 4px 10px; }
.compose-sig .muted { white-space: pre-wrap; overflow-wrap: anywhere; }
.compose-grid { grid-template-columns: minmax(0, 1fr) 240px; align-items: start; }
.compose-main { display: grid; gap: 12px; min-width: 0; }
.compose-side { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; min-width: 0; }
.compose-side h3 { font-size: 13px; margin: 0 0 8px; color: var(--heading); }
.day-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.day-list li { display: grid; gap: 2px; padding: 6px 8px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow-wrap: anywhere; }
.day-list .day-time { font-weight: 600; }
.day-list li.clash { border: 2px solid var(--danger); }
.clash-tag { color: var(--danger); font-size: 12px; }
@media (max-width: 720px) { .compose-grid { grid-template-columns: minmax(0, 1fr); } }

/* Outlook events on the week calendar: not logged in ChemCRM — dashed outline + the word "Outlook" */
.cal-event.is-outlook { background: var(--surface-2); color: var(--text); border: 1px dashed var(--line-strong); border-left: 3px dashed var(--text-2); }
.cal-event.is-outlook strong { color: var(--text); }

/* Call picker */
.call-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.call-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.call-who { min-width: 0; overflow-wrap: anywhere; }

.ooo-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }

/* Users & teams: Entra directory */
ul.tight { margin: 4px 0 10px; padding-left: 20px; }
ul.tight li { margin: 3px 0; }
.dir-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-left: 4px solid var(--brand); }
.dir-card.dir-preview { border-left-color: var(--warn); }
.dir-card.dir-off { border-left-color: var(--line-strong); }
.dir-card .dir-text { flex: 1; min-width: 0; }
.dir-card .dir-text p { margin: 4px 0 0; }
.dir-card .dir-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.dir-error { color: var(--danger); font-weight: 600; }
.kv-entra { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.kv-entra dt { color: var(--muted); }
.kv-entra dd { margin: 0; overflow-wrap: anywhere; }
.rule-cond { white-space: normal; }
.rule-cond .k { color: var(--muted); }
.notice-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-left: 4px solid var(--warn); background: var(--warn-bg); }
.notice-bar p { margin: 0; flex: 1; min-width: 220px; color: var(--text); }
.nowrap { white-space: nowrap; }
.inline-form { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.card-head .spacer { flex: 1; }

/* team page: Entra placement */
.rule-intro { margin: 0 0 10px; }
.rule-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.rule-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.rule-row + .rule-row { border-top: 1px solid var(--line); }
.rule-main { flex: 1; min-width: 0; }
.rule-when { font-size: 14px; margin-bottom: 2px; overflow-wrap: anywhere; }
.rule-k { color: var(--text-2); }
.rule-and { margin: 0 6px; color: var(--text-2); font-weight: 600; }
.rule-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.rule-empty { margin: 0; padding: 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--text-2); }
.rule-hint { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; padding: 10px 12px; margin-bottom: 10px;
  border-left: 4px solid var(--brand); background: var(--tint); border-radius: var(--radius); color: var(--text); }
.rule-form { display: grid; grid-template-columns: minmax(140px, 1fr) auto minmax(160px, 1.4fr); align-items: center; gap: 8px; margin-bottom: 8px; }
.rule-form select, .rule-form input { width: 100%; min-width: 0; }
.rule-more { margin-top: 10px; }
.rule-more summary { cursor: pointer; color: var(--link); }
.card-sub { padding: 12px 14px; border-top: 1px solid var(--line); }
.card-sub h4 { margin: 0 0 4px; font-size: 13.5px; color: var(--heading); display: inline-flex; align-items: center; gap: 8px; }
.card-sub > p { margin: 0 0 10px; }
details.card-sub > summary { cursor: pointer; list-style-position: inside; }
details.card-sub[open] > summary { margin-bottom: 6px; }
.sub-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bulk-inline { display: flex; gap: 8px; margin: 0 0 8px; }
@media (max-width: 640px) { .rule-form { grid-template-columns: 1fr; } .rule-row { flex-wrap: wrap; } }

/* Test copies (CHEMCRM_ENVIRONMENT_LABEL): say so in words, and swap the green rule for orange */
.env-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; background: #F97937; color: #16232B; }
body.env-lab .topbar { border-bottom-color: #F97937 !important; box-shadow: inset 0 -3px 0 #F97937; }

/* ===================================================== territory map (lab) */
.page-map { padding: 0 !important; }
.map-shell { position: relative; display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - var(--top-h)); min-height: 480px; }
.map-side { overflow-y: auto; border-right: 1px solid var(--line); background: var(--surface); padding: 14px 16px 24px; }
.map-side-head h1 { font-size: 18px; margin: 0 0 4px; color: var(--heading); }
.map-side-head p { margin: 0 0 12px; }
.map-ctl { padding: 10px 0; border-top: 1px solid var(--line-soft); display: grid; gap: 8px; }
.map-ctl .field { margin: 0; }
.map-ctl select, .map-ctl input[type=search] { width: 100%; }
.seg { display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.seg button { flex: 1; padding: 7px 6px; background: var(--surface); color: var(--text); border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button.on { background: var(--brand); color: var(--on-brand); }
.map-layers .chk { display: flex; gap: 8px; align-items: center; }
.map-summary .sum-big { font-size: 22px; font-weight: 700; color: var(--heading); line-height: 1.2; }
.map-summary .sum-big span { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); }
.map-summary p { margin: 6px 0 0; color: var(--text-2); }
.map-legend { display: grid; gap: 4px; font-size: 12.5px; color: var(--text); }
.leg-row { display: flex; align-items: center; gap: 8px; }
.leg-sw { width: 22px; height: 14px; border-radius: 3px; border: 1px solid var(--line-strong); flex: none; }
.leg-empty { background: var(--bg); border-style: dashed; }
.map-main { position: relative; min-width: 0; }
.crm-map { position: absolute; inset: 0; }
.map-key { position: absolute; left: 12px; bottom: 26px; max-width: calc(100% - 24px); z-index: 700; display: flex; gap: 14px; flex-wrap: wrap; padding: 6px 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 12px; color: var(--text); }
.map-key span { display: inline-flex; align-items: center; gap: 5px; }
.key-dot { fill: #c2410c; stroke: #fff; stroke-width: 1; }
.key-ring { fill: rgba(154, 52, 18, .12); stroke: #9a3412; stroke-width: 1.6; }
.key-office { fill: #0363C9; stroke: #fff; stroke-width: 1.5; }
:root[data-theme="dark"] .key-dot, :root[data-theme="dark"] .key-ring { fill: #ffb27d; stroke: #ffb27d; }
.map-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); z-index: 800; overflow-y: auto; padding: 18px 18px 28px;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: -6px 0 18px rgba(1, 45, 90, .12); }
.map-drawer h2 { margin: 2px 0 6px; font-size: 20px; color: var(--heading); overflow-wrap: anywhere; }
.map-drawer h3 { margin: 16px 0 6px; font-size: 13.5px; color: var(--heading); }
.map-drawer-x { position: absolute; top: 10px; right: 10px; }
.pop-kind { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.drawer-note { margin: 8px 0; padding: 8px 10px; border-left: 4px solid var(--warn); background: var(--warn-bg); color: var(--text); font-size: 13px; }
.drawer-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin: 10px 0; }
.dstat { display: flex; flex-direction: column; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none !important; }
.dstat:hover { border-color: var(--brand); }
.dstat b { font-size: 20px; color: var(--heading); }
.dstat span { font-size: 12.5px; color: var(--text-2); }
.dstat em { font-style: normal; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.drawer-actions { display: flex; gap: 8px; margin-top: 16px; }
.nearby li { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.map-pop { font: 13px/1.45 var(--font); color: #16232B; min-width: 180px; }
.map-pop .pop-name { display: block; font-size: 14.5px; font-weight: 700; margin: 2px 0 4px; color: #0363C9; }
.map-pop .muted { color: #566a7b; }
.leaflet-tooltip.terr-label { background: transparent; border: 0; box-shadow: none; padding: 0; font: 600 11.5px var(--font); color: #012D5A;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; white-space: nowrap; }
:root[data-theme="dark"] .leaflet-tooltip.terr-label { color: #E6EFFA; text-shadow: 0 0 3px #0b1a28, 0 0 3px #0b1a28; }
.terr-label::before, .place-label::before { display: none; }
.leaflet-tooltip.place-label { background: transparent; border: 0; box-shadow: none; padding: 0 0 0 2px; font: 11px var(--font); color: var(--text-2); text-shadow: 0 0 3px var(--surface); }
.office-pin { background: #0363C9; border: 2px solid #fff; border-radius: 2px; box-shadow: 0 0 0 1px #012D5A; }
.office-pin.hq { background: #012D5A; }
.leaflet-container { font-family: var(--font); }
@media (max-width: 860px) {
  .map-shell { grid-template-columns: 1fr; grid-template-rows: auto 70vh; height: auto; }
  .map-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .map-main { min-height: 70vh; }
}
/* a list's Map layout and a record's Location card */
.listmap { position: relative; height: min(68vh, 640px); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.loc-map { height: 220px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-bottom: 10px; }
.loc-kv { margin: 0 0 6px; grid-template-columns: minmax(84px, max-content) minmax(0, 1fr); gap: 6px 12px; }
.listmap-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.key-inactive { stroke: #33506b; stroke-width: 1.8; stroke-dasharray: 5 4; }
:root[data-theme="dark"] .key-inactive { stroke: #8ab4e0; }
.key-open { fill: rgba(154, 103, 0, .3); stroke: none; }
.terr-inactive { font-weight: 500; font-style: italic; }

/* Territory section: the Territory & Customer Map fills the page under ChemCRM's chrome */
.page-territory { padding: 0 !important; }
.territory-frame { display: block; width: 100%; height: calc(100vh - var(--top-h)); border: 0; background: var(--bg); }
.listmap-frame { display: block; width: 100%; height: min(70vh, 660px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.settings-frame { height: calc(100vh - var(--top-h) - 190px); min-height: 560px; border: 1px solid var(--line); border-radius: var(--radius); }

/* team page: the territory it covers */
.terr-card { padding: 12px 14px; border-top: 1px solid var(--line-soft); }
.terr-card:first-of-type { border-top: 0; }
.terr-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.terr-card-head .spacer { flex: 1; }
.terr-name { font-size: 16px; color: var(--heading); }
.terr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.terr-stats > a, .terr-stats > div { display: flex; flex-direction: column; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none !important; }
.terr-stats > a:hover { border-color: var(--brand); }
.terr-stats b { font-size: 19px; color: var(--heading); }
.terr-stats span { font-size: 12.5px; color: var(--text-2); }
.terr-office { margin: 4px 0 0; }
.terr-pick { max-height: 360px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; margin-top: 8px; }

/* team page: its MFC office */
.office-card { display: grid; grid-template-columns: 220px 1fr; gap: 14px; padding: 12px 14px; border-top: 1px solid var(--line-soft); }
.office-card:first-of-type { border-top: 0; }
.office-map { height: 150px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.office-info { display: grid; gap: 3px; align-content: start; color: var(--text); }
.office-name { font-size: 15px; color: var(--heading); }
.office-acts { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
@media (max-width: 640px) { .office-card { grid-template-columns: 1fr; } }

/* Company summary card (lab) — the company's rundown at the top of About */
.co-summary .card-head { gap: 10px; }
.acct-kind { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 11px; border: 1px solid var(--line-strong); color: var(--text); background: var(--surface-2); white-space: nowrap; }
.acct-kind.is-strategic { border-width: 2px; border-color: var(--link); color: var(--link); }
.co-summary-text { margin: 12px 0 4px; }
.co-summary-text .prop { display: block; }
.co-summary-text dd { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.co-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 10px 0 12px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.co-figs > div { display: flex; flex-direction: column; padding: 10px 12px 10px 0; min-width: 0; }
.co-figs > div + div { padding-left: 12px; border-left: 1px solid var(--line-soft); }
.co-fig-n { font-size: 20px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-fig-l { font-size: 12px; color: var(--text-2); font-weight: 600; }
.co-facts { grid-template-columns: 130px 1fr; }
.co-acct { border-top: 1px solid var(--line-soft); padding-top: 4px; }
.co-acct .props { padding: 6px 0 4px; }
.co-acct .small { margin: 4px 0 0; }
@media (max-width: 700px) { .co-facts { grid-template-columns: 1fr; } .co-facts dt { margin-top: 6px; } }

/* ================================================================ fit to the screen (desktop)
   Like HubSpot: the window itself never scrolls. The area beside the rail and under the top bar is
   the one scroll area for ordinary pages; home, lists and records fit the screen and scroll their own
   boxes (columns, the table, the tab content) while their headers stay put. Phones keep normal page
   scrolling. Sticky things now stick inside .page, so their offsets no longer add the top bar. */
@media (min-width: 901px) {
  html, body { overflow: hidden; }
  .page { position: fixed; top: var(--top-h); left: var(--rail-w); right: 0; bottom: 0; margin: 0; min-height: 0;
          overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .nav-expanded .page { left: var(--rail-w-open); margin: 0; }
  .settings-nav, .ws-side, .hd-nav { top: 16px; }

  /* pages that fit: a column whose last part takes the rest of the height and scrolls inside */
  .page-home, .page-list, .page-record { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 16px; }
  .page-home > *, .page-list > *, .page-record > * { flex: none; }

  /* home: the main column and "Your day at a glance" scroll on their own */
  .page-home > .home { flex: 1 1 auto; min-height: 0; width: 100%; align-items: stretch; }
  .home-main { min-height: 0; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
  .home-side { position: static; top: auto; max-height: 100%; align-self: start; }

  /* records: three columns, each its own scroll; the About / Activities tabs stay pinned */
  .page-record > .record { flex: 1 1 auto; min-height: 0; height: 100%; align-items: stretch; }
  .record > .rec-left, .record > .rec-right { position: static; top: auto; max-height: none; height: 100%; min-height: 0;
                                              overflow-y: auto; scrollbar-width: thin; padding-bottom: 2px; }
  .record > .rec-main { min-height: 0; height: 100%; overflow: hidden; }
  .rec-main > .tabpanel { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-bottom: 2px; }
  .rec-main > .tabpanel[hidden] { display: none; }

  /* lists: title, views, toolbar and filters stay; the table scrolls inside its card; pages pinned below */
  .page-list > .index-body, .page-list > .hd-layout { flex: 1 1 auto; min-height: 0; }
  .page-list .hd-layout { align-items: stretch; }
  .page-list .hd-nav { position: static; max-height: 100%; overflow-y: auto; }
  .page-list .hd-main { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .page-list .hd-main > * { flex: none; }
  .page-list .hd-main > .index-body { flex: 1 1 auto; min-height: 0; }
  .index-body { height: 100%; align-items: stretch; }
  .index-view { min-height: 0; height: 100%; display: flex; flex-direction: column; overflow-y: auto; }
  .index-view > .table-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .index-view > .table-card > .table-wrap { flex: 1 1 auto; min-height: 0; max-height: none; }
  .index-view > .table-card > .table-foot { flex: none; }
  .index-view > .board { flex: 1 1 auto; min-height: 0; }
  .index-view .board-col { max-height: 100%; }
  .view-settings { position: static; top: auto; max-height: 100%; }
}
/* mid-size screens (1101–1280): keep the three record columns, a little narrower, each scrolling */
@media (min-width: 1101px) and (max-width: 1280px) {
  .record { grid-template-columns: 270px minmax(0, 1fr) 270px; }
  .record > .rec-right { grid-column: auto; display: flex; flex-direction: column; }
}
/* smaller (901–1100): the right column moves under the other two, so the record page scrolls as one
   again rather than squeezing three scroll areas into the space */
@media (min-width: 901px) and (max-width: 1100px) {
  /* A stacked Home needs one continuous scroll area, rather than two short panes
     that stop in the middle of cards and tables. */
  .page-home { overflow-y: auto; display: block; padding-bottom: 24px; }
  .page-home > .home { height: auto; align-items: start; }
  .home-main { overflow: visible; padding-right: 0; }
  .home-side { max-height: none; }
  .page-record { overflow-y: auto; display: block; padding-bottom: 72px; }
  .page-record > .record { height: auto; align-items: start; }
  .record > .rec-left, .record > .rec-main, .record > .rec-right { height: auto; overflow: visible; }
  .rec-main > .tabpanel { overflow: visible; }
}

/* ---- the Territory map's loading cover: the frame stays invisible until the map reports ready */
.map-frame-wrap { position: relative; background: var(--bg); }
.map-frame-wrap > iframe { transition: opacity .16s ease; }
.map-loading-note { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 10px;
  color: var(--text-2); font-weight: 600; pointer-events: none; }
.map-frame-wrap.map-loading > .map-loading-note { display: flex; }
.map-loading-note::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong);
  border-top-color: var(--brand); animation: map-spin .8s linear infinite; }
.map-frame-wrap.map-loading > iframe { opacity: 0; animation: map-reveal 0s 12s forwards; }   /* safety net if the script never runs */
@keyframes map-spin { to { transform: rotate(360deg); } }
@keyframes map-reveal { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .map-loading-note::before { animation: none; } .map-frame-wrap > iframe { transition: none; } }
/* View export dialog */
.export-intro p { margin: 7px 0; }
.export-field { display: grid; gap: 6px; margin: 16px 0; font-weight: 600; }
.export-field input, .export-field select { width: 100%; }
.export-options { border: 0; padding: 0; margin: 18px 0; display: grid; gap: 9px; }
.export-options legend { font-weight: 600; margin-bottom: 8px; }
.export-customize { border-top: 1px solid var(--border); padding-top: 14px; }
.export-customize summary { cursor: pointer; font-weight: 600; margin-bottom: 12px; }
.export-customize .chk { margin: 10px 0; }

/* Lab-only admin center preview */
.admin-preview { max-width: 1500px; }
.admin-eyebrow { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .09em; margin-bottom: 8px; }
.admin-preview-notice { background: var(--warn-bg); border: 1px solid var(--warn); border-radius: 8px; color: var(--text); padding: 13px 16px; margin-bottom: 20px; }
.admin-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.admin-preview-card { margin: 0; overflow: hidden; }
.admin-preview-card .card-head p { margin: 5px 0 0; }
.admin-access { grid-column: 1 / -1; }
.admin-links { padding: 4px 18px 14px; }
.admin-links a { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.admin-links a:last-child { border-bottom: 0; }
.admin-links a span { color: var(--text-2); font-size: 12px; }
.admin-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-picker select { min-width: 250px; max-width: 100%; }
.admin-person { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 22px 0 14px; }
.admin-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.admin-facts > div { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 5px; }
.admin-facts span, .admin-facts small { color: var(--text-2); font-size: 12px; }
.admin-map-summary { border-left: 3px solid var(--accent-text); padding: 2px 14px; margin: 20px 0; }
.admin-map-summary p { margin: 6px 0; }
.admin-permissions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; padding-top: 12px; }
.admin-permissions div { display: flex; justify-content: space-between; gap: 15px; padding: 7px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .admin-preview-grid, .admin-facts, .admin-permissions { grid-template-columns: 1fr; } .admin-access { grid-column: auto; } }
.admin-policy { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.admin-policy:last-child { border: 0; }
.admin-policy input { margin-top: 3px; flex: none; }
.admin-policy span { display: flex; flex-direction: column; gap: 5px; }
.admin-policy small { color: var(--text-2); font-size: 13px; line-height: 1.5; }

.admin-permission-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; padding-bottom: 18px; }
.admin-permission-options .chk { align-items: flex-start; }
@media (max-width: 760px) { .admin-permission-options { grid-template-columns: 1fr; } }
/* Record customization uses the same semantic colors as the rest of the app. */
.record-designer { max-width: none; }
.rv-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; padding: 14px 0; border-block: 1px solid var(--line); }
.rv-toolbar label { display: grid; gap: 4px; font-size: 12px; color: var(--text-2); }
.rv-toolbar select { min-width: 170px; }
.rv-status { min-height: 22px; color: var(--text-2); margin: 12px 0; }
.rv-error { color: var(--danger); }
.rv-view-settings { margin-bottom: 18px; }
.rv-view-settings summary { cursor: pointer; }
.rv-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; border-top: 1px solid var(--line); }
.rv-settings-grid .field { gap: 10px; }
.rv-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 16px; align-items: start; }
.rv-canvas { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(260px, 1.6fr) minmax(170px, 1fr); gap: 14px; min-width: 0; }
.rv-region { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; min-width: 0; }
.rv-region > h3 { font-size: 11px; text-transform: uppercase; color: var(--text-2); margin: 4px 0 14px; letter-spacing: .06em; }
.rv-identity { display: grid; gap: 8px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; margin-bottom: 10px; }
.rv-identity small { color: var(--text-2); }
.rv-card { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 6px; margin: 8px 0; overflow: hidden; cursor: grab; }
.rv-card.selected { outline: 2px solid var(--link); outline-offset: 1px; }
.rv-card-select { display: grid; width: 100%; gap: 7px; text-align: left; border: 0; padding: 12px; color: var(--text); background: transparent; font: inherit; cursor: pointer; }
.rv-card-select small, .rv-card-select span { color: var(--text-2); font-size: 11px; overflow-wrap: anywhere; }
.rv-card-tools { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 5px; }
.rv-card-tools > button:not(.btn), .rv-selected-prop button { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; min-width: 27px; min-height: 25px; }
.rv-dropzone { min-height: 60px; }
.rv-add { width: 100%; margin: 5px 0; }
.rv-tabbar { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); gap: 4px; padding-bottom: 6px; }
.rv-tabbar button { background: var(--surface); color: var(--text-2); border: 1px solid var(--line); padding: 7px 10px; border-radius: 4px; font: inherit; cursor: pointer; }
.rv-tabbar button.on { color: var(--link); border-color: var(--link); }
.rv-tab-tools { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.rv-section { border: 1px dashed var(--line-strong); padding: 8px; margin: 12px 0; border-radius: 6px; }
.rv-section-title { border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; padding: 7px 0; }
.rv-section-title small { color: var(--text-2); }
.rv-protected { background: var(--surface); padding: 20px; border-radius: 6px; color: var(--text-2); }
.rv-inspector { position: sticky; top: 70px; max-height: calc(100vh - 95px); overflow-y: auto; }
.rv-inspector .field { margin: 14px 0; }
.rv-inspector h4 { margin: 16px 0 8px; }
.rv-inspector input, .rv-inspector select { max-width: 100%; }
.rv-inspector > .pad { display: grid; gap: 10px; }
.rv-selected-prop { display: flex; gap: 4px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.rv-selected-prop span { flex: 1; min-width: 0; font-size: 12px; }
.rv-property-results { display: grid; max-height: 220px; overflow-y: auto; margin-top: 8px; gap: 3px; }
.rv-property-results button { background: var(--surface); color: var(--link); border: 1px solid var(--line); text-align: left; padding: 8px; cursor: pointer; border-radius: 4px; }
.rv-condition { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 8px; }
.rv-rule { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rv-rule input, .rv-rule select { width: 100%; }
.rv-preview { margin-top: 20px; }
.rv-preview iframe { width: 100%; height: 720px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.rv-dialog { background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: 10px; padding: 24px; max-width: 800px; width: calc(100% - 40px); max-height: 85vh; overflow-y: auto; }
.rv-dialog::backdrop { background: var(--overlay); }
.rv-card-library { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rv-card-library button { padding: 20px; white-space: normal; }
.rv-record-card { margin: 0; min-width: 0; }
.rv-record-card > summary { cursor: pointer; list-style: none; }
.rv-record-card > summary::before { content: '▸'; color: var(--text-2); margin-right: 4px; }
.rv-record-card[open] > summary::before { content: '▾'; }
.rv-record-card > summary h3 { margin-right: auto; }
.rv-card-body > .card { border: 0; box-shadow: none; }
.rv-card-body > .card > .card-head { display: none; }
.rv-record-panel { display: grid; gap: 18px; align-content: start; }
.rv-record-section { min-width: 0; }
.rv-record-section > h2 { margin: 4px 0 10px; }
.rv-record-grid { display: grid; gap: 12px; align-items: start; }
.rv-record-grid.rv-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-section-cards.rv-columns-2 > .rv-dropzone { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rv-section-cards.rv-columns-2 .rv-add { grid-column: 1 / -1; }
.rv-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-highlights dd { font-size: 20px; font-weight: 600; }
.rv-activity-totals { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; }
.rv-activity-totals dd { margin: 0; font-size: 22px; font-weight: 600; }
.rv-stage-track { list-style: none; display: grid; gap: 7px; margin: 0; }
.rv-stage-track li { color: var(--text-2); border-left: 3px solid var(--line-strong); padding: 6px 10px; }
.rv-stage-track li.current { color: var(--link); border-color: var(--link); background: var(--surface-2); font-weight: 600; }
.record-compact .props .prop { padding-block: 5px; }
.record-compact .assoc-item { padding-block: 7px; }
@media (max-width: 1550px) { .rv-workspace { grid-template-columns: 1fr; } .rv-inspector { position: static; max-height: none; } .rv-inspector > .pad { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } .rv-property-picker, .rv-condition { grid-column: 1 / -1; } }
@media (max-width: 1000px) { .rv-canvas { grid-template-columns: 1fr; } .rv-settings-grid { grid-template-columns: 1fr 1fr; } .rv-record-grid.rv-columns-2 { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .rv-settings-grid, .rv-inspector > .pad, .rv-card-library { grid-template-columns: 1fr; } }

.record-preview-mode { --top-h: 0px; --rail-w: 0px; }
.record-preview-mode .topbar, .record-preview-mode .rail, .record-preview-mode .rail-scrim { display: none; }
.record-preview-mode > .page { margin-left: 0; margin-top: 0; padding: 12px; height: 100vh; }

/* Session-switch controls submit verified forms rather than mutating GETs. */
.user-list form{margin:0}.switch-user-button{display:block;width:100%;text-align:left;border:0;background:none;color:inherit;padding:10px;cursor:pointer}.switch-user-button.on{font-weight:700}