/* Uptitude design standard 2.3.0 tokens. Light on :root, dark on [data-theme="dark"]. The FloriMed look block at the end of this file overrides colours, type and shapes (10 Oct 2026). */
:root {
  --c-page: #F4FAFA; --c-surface: #FFFFFF; --c-sunken: #FAFAFB; --c-raised: #FFFFFF; --c-hover: #F3F5F6; --c-selected: #F4F3F9; --c-disabled-bg: #E3E9EB;
  --c-text: #052A33; --c-text-2: #325259; --c-text-3: #486E78; --c-text-dis: #6A949F; --c-text-inverse: #FFFFFF;
  --c-action: #5B4BEF; --c-action-hover: #4F3DEE; --c-action-pressed: #2914E6; --c-on-action: #FFFFFF; --c-action-border: #5B4BEF; --c-action-text: #5B4BEF; --c-action-text-hover: #4F3DEE;
  --c-a-50: #FBFAFC; --c-a-100: #F4F3F9; --c-a-200: #E3E2F4; --c-a-300: #BEB8EF; --c-a-400: #9C92F0; --c-a-500: #8276F3;
  --c-accent: #00807A; --c-on-accent: #FFFFFF; --c-accent-border: #00807A;
  --c-hairline: #E3E9EB; --c-subtle: #B5C7CC; --c-control: #6A949F; --c-strong: #325259; --c-focus: #5B4BEF;
  --c-dark: #052A33; --c-on-dark: #FFFFFF; --c-on-dark-2: #E3E9EB; --c-on-dark-3: #B5C7CC; --c-on-dark-border: #223E44; --c-on-dark-accent: #BEB8EF;
  --c-amber-200: #F0E1CA; --c-red-200: #F1DFE0;
  --c-blue-100: #F2F5F8; --c-blue-800: #184982; --c-blue-600: #1F5FA8;
  --c-green-100: #EFF5F1; --c-green-800: #15542A; --c-green-600: #1E7A3C;
  --c-amber-100: #F7F3ED; --c-amber-800: #674100; --c-amber-600: #9A6100;
  --c-red-100: #F8F2F3; --c-red-800: #90181D; --c-red-600: #C02026;
  --c-destructive-fill: #C02026; --c-on-destructive: #FFFFFF;
  --c-scrim: rgba(5,42,51,0.60); --c-overlay-hover: rgba(5,42,51,0.06); --c-overlay-selected: rgba(91,75,239,0.08); --c-skeleton: rgba(5,42,51,0.10);
  --c-font: 'Segoe UI', 'Segoe UI Web (West European)', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --c-display-size: 32px; --c-display-lh: 40px; --c-h1-size: 24px; --c-h1-lh: 32px; --c-h2-size: 20px; --c-h2-lh: 28px; --c-h3-size: 16px; --c-h3-lh: 24px;
  --c-body-lg-size: 16px; --c-body-lg-lh: 24px; --c-body-size: 14px; --c-body-lh: 22px; --c-small-size: 12px; --c-small-lh: 18px; --c-label-size: 12px; --c-label-lh: 16px; --c-label-tracking: 0.4px;
  --c-space-1: 4px; --c-space-2: 8px; --c-space-3: 12px; --c-space-4: 16px; --c-space-6: 24px; --c-space-8: 32px; --c-space-12: 48px; --c-space-16: 64px;
  --c-radius-sm: 4px; --c-radius-md: 8px; --c-radius-pill: 999px;
  --c-control-sm: 28px; --c-control-md: 36px; --c-control-lg: 44px; --c-row-height: 44px;
  --c-max-width: 1440px; --c-page-padding: 16px; --c-gutter: 24px;
  --c-motion-fast: 120ms ease; --c-motion-base: 200ms ease;
  --c-shadow-sm: 0 1px 2px rgba(0,0,0,.08); --c-shadow-md: 0 2px 8px rgba(0,0,0,.10); --c-shadow-lg: 0 8px 24px rgba(0,0,0,.14);
  /* Navigation rail follows the theme: built from the semantic tokens above */
  --c-rail-bg: #FFFFFF; --c-rail-text: #325259; --c-rail-strong: #052A33; --c-rail-muted: #486E78; --c-rail-line: #E3E9EB; --c-rail-hover: #F3F5F6; --c-rail-active: #F4F3F9; --c-rail-accent: #5B4BEF;
}
[data-theme="dark"] {
  color-scheme: dark;
  --c-rail-bg: #052A33; --c-rail-text: #B5C7CC; --c-rail-strong: #F8FCFC; --c-rail-muted: #B5C7CC; --c-rail-line: #223E44; --c-rail-hover: #223E44; --c-rail-active: #223E44; --c-rail-accent: #BEB8EF;
  --c-page: #03171C; --c-surface: #052A33; --c-sunken: #03171C; --c-raised: #1B3D45; --c-hover: #1B3D45; --c-selected: #160E62; --c-disabled-bg: #1B3D45;
  --c-text: #F8FCFC; --c-text-2: #B5C7CC; --c-text-3: #8CAAB2; --c-text-dis: #6A949F; --c-text-inverse: #052A33;
  --c-action: #9C92F0; --c-action-hover: #BEB8EF; --c-action-pressed: #8A86D9; --c-on-action: #052A33; --c-action-border: #9C92F0; --c-action-text: #BEB8EF; --c-action-text-hover: #E3E2F4;
  --c-a-50: #113242; --c-a-100: #1A394D; --c-a-200: #26415D; --c-a-300: #BEB8EF; --c-a-400: #9C92F0; --c-a-500: #8276F3;
  --c-accent: #09AFA8; --c-on-accent: #052A33; --c-accent-border: #09AFA8;
  --c-hairline: #1D768B; --c-subtle: #223E44; --c-control: #6A949F; --c-strong: #8CAAB2; --c-focus: #BEB8EF;
  --c-dark: #052A33; --c-on-dark: #F8FCFC; --c-on-dark-2: #E3E9EB; --c-on-dark-3: #B5C7CC; --c-on-dark-border: #223E44; --c-on-dark-accent: #BEB8EF;
  --c-amber-200: #3E3F20; --c-red-200: #4C262E;
  --c-blue-100: #0A354A; --c-blue-800: #A5C1E2; --c-blue-600: #A5C1E2;
  --c-green-100: #0A3A35; --c-green-800: #81D09A; --c-green-600: #81D09A;
  --c-amber-100: #233529; --c-amber-800: #E8B661; --c-amber-600: #E8B661;
  --c-red-100: #2A2830; --c-red-800: #E7B1B3; --c-red-600: #E7B1B3;
  --c-destructive-fill: #E7B1B3; --c-on-destructive: #052A33;
  --c-scrim: rgba(5,42,51,0.60); --c-overlay-hover: rgba(255,255,255,0.06); --c-overlay-selected: rgba(190,184,239,0.08); --c-skeleton: rgba(255,255,255,0.10);
  --c-shadow-sm: 0 1px 2px rgba(0,0,0,.45); --c-shadow-md: 0 2px 8px rgba(0,0,0,.55); --c-shadow-lg: 0 8px 24px rgba(0,0,0,.65);
}
@media (prefers-reduced-motion: reduce) { :root { --c-motion-fast: 1ms; --c-motion-base: 1ms; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--c-page); color: var(--c-text); font-family: var(--c-font); font-size: var(--c-body-size); line-height: var(--c-body-lh); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--c-radius-sm); }
svg.i { flex: none; fill: currentColor; vertical-align: middle; }
.hide { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type */
.u-h1 { font-size: var(--c-h1-size); line-height: var(--c-h1-lh); font-weight: 600; margin: 0; }
.u-h2 { font-size: var(--c-h2-size); line-height: var(--c-h2-lh); font-weight: 600; margin: 0; }
.u-h3 { font-size: var(--c-h3-size); line-height: var(--c-h3-lh); font-weight: 600; margin: 0; }
.u-small { font-size: var(--c-small-size); line-height: var(--c-small-lh); color: var(--c-text-3); }
.u-num { font-variant-numeric: tabular-nums; }
.muted { color: var(--c-text-3); }
.t2 { color: var(--c-text-2); }

/* Frame */
.frame { display: flex; min-height: 100vh; }
.rail { width: 240px; flex: none; background: var(--c-rail-bg); color: var(--c-rail-text); border-right: 1px solid var(--c-rail-line); transition: width var(--c-motion-base); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.rail__brand { padding: var(--c-space-4); border-bottom: 1px solid var(--c-rail-line); display: flex; align-items: center; gap: var(--c-space-2); }
.rail__title { flex: 1; min-width: 0; }
.rail__name { color: var(--c-rail-strong); font-size: var(--c-h3-size); line-height: var(--c-h3-lh); font-weight: 600; }
.rail__sub { font-size: var(--c-small-size); line-height: var(--c-small-lh); color: var(--c-rail-muted); }
.rail nav { padding: var(--c-space-3) var(--c-space-2); display: flex; flex-direction: column; gap: var(--c-space-1); flex: 1; overflow: auto; }
.rail a { display: flex; align-items: center; gap: var(--c-space-3); min-height: var(--c-control-lg); padding: 0 var(--c-space-3); border-radius: var(--c-radius-sm); color: var(--c-rail-text); text-decoration: none; border-left: 2px solid transparent; }
.rail a:hover { background: var(--c-rail-hover); }
.rail a[aria-current="page"] { background: var(--c-rail-active); color: var(--c-rail-strong); font-weight: 600; border-left-color: var(--c-rail-accent); }
.rail a .cnt { margin-left: auto; font-size: var(--c-small-size); line-height: var(--c-small-lh); }
.rail__foot { padding: var(--c-space-4); border-top: 1px solid var(--c-rail-line); font-size: var(--c-small-size); line-height: var(--c-small-lh); }
.rail__foot .who { color: var(--c-rail-strong); font-weight: 600; }
.main { flex: 1; min-width: 0; }
.topbar { display: flex; align-items: center; gap: var(--c-space-4); padding: var(--c-space-3) var(--c-page-padding) var(--c-space-4); max-width: var(--c-max-width); margin: 0 auto; }
.topbar__title { flex: 1; min-width: 0; }
.topbar__actions { display: flex; gap: var(--c-space-2); align-items: center; }
.page { max-width: var(--c-max-width); margin: 0 auto; padding: 0 var(--c-page-padding) var(--c-space-12); }
.crumb { font-size: var(--c-small-size); line-height: var(--c-small-lh); color: var(--c-text-3); }
.notice { display: flex; gap: var(--c-space-3); align-items: center; padding: var(--c-space-3) var(--c-space-4); border-radius: var(--c-radius-md); margin-bottom: var(--c-space-6); border: 1px solid var(--c-hairline); background: var(--c-surface); }
.notice--warn { background: var(--c-amber-100); color: var(--c-amber-800); border-color: var(--c-amber-100); }
.notice--info { background: var(--c-hover); color: var(--c-text-2); border-color: var(--c-hairline); }
.notice--err { background: var(--c-red-100); color: var(--c-red-800); border-color: var(--c-red-100); }
.notice b { font-weight: 600; }

/* Theme switch */
.theme-switch { display: inline-flex; gap: 4px; padding: 4px; background: var(--c-surface); border: 1px solid var(--c-hairline); border-radius: var(--c-radius-pill); }
.theme-switch button { font: inherit; font-size: var(--c-small-size); font-weight: 600; min-height: 28px; padding: 4px 12px; border: 0; border-radius: var(--c-radius-pill); background: transparent; color: var(--c-text-2); cursor: pointer; }
.theme-switch button[aria-pressed="true"] { background: var(--c-action); color: var(--c-on-action); }

/* Buttons */
.u-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--c-space-2); height: var(--c-control-md); padding: 0 var(--c-space-4); font-family: var(--c-font); font-size: var(--c-body-size); font-weight: 600; line-height: 1; border-radius: var(--c-radius-sm); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--c-motion-fast), border-color var(--c-motion-fast), color var(--c-motion-fast); }
.u-btn--primary { background: var(--c-action); color: var(--c-on-action); border-color: var(--c-action-border); }
.u-btn--primary:hover { background: var(--c-action-hover); }
.u-btn--primary:active { background: var(--c-action-pressed); }
.u-btn--secondary { background: var(--c-surface); color: var(--c-action-text); border-color: var(--c-action-text); }
.u-btn--secondary:hover { background: var(--c-a-50); }
.u-btn--tertiary { background: transparent; color: var(--c-text-2); border-color: transparent; }
.u-btn--tertiary:hover { background: var(--c-hover); }
.u-btn--destructive { background: var(--c-surface); color: var(--c-red-600); border-color: var(--c-red-600); }
.u-btn--destructive:hover { background: var(--c-red-100); }
.u-btn[disabled] { background: var(--c-hover); color: var(--c-text-3); border-color: var(--c-hairline); cursor: not-allowed; }
.u-btn--sm { height: var(--c-control-sm); font-size: var(--c-small-size); padding: 0 var(--c-space-3); }
.rowact { display: inline-flex; gap: var(--c-space-2); }

/* Cards, grids */
.u-card { background: var(--c-surface); border: 1px solid var(--c-hairline); border-radius: var(--c-radius-md); box-shadow: var(--c-shadow-sm); padding: var(--c-space-6); min-width: 0; }
.card-head { display: flex; align-items: center; gap: var(--c-space-3); margin-bottom: var(--c-space-4); }
.card-head h2, .card-head h3 { flex: 1; }
.u-grid { display: grid; gap: var(--c-gutter); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--c-gutter); align-items: start; }
.stack > * + * { margin-top: var(--c-gutter); }
/* Cards never touch (Ben, 11 Oct 2026): a card, table or grid that follows another on a page gets a gap. A page that
   sets its own bigger gap keeps it. */
#view > .u-card + .u-card, #view > .u-card + .tbl-wrap, #view > .tbl-wrap + .u-card, #view > .u-card + .u-grid, #view > .u-grid + .u-card, #view > .u-card + .split, #view > .split + .u-card, #view > .notice + .u-card { margin-top: 16px; }
.kpi__label { font-size: var(--c-label-size); line-height: var(--c-label-lh); font-weight: 600; letter-spacing: var(--c-label-tracking); color: var(--c-text-3); }
.kpi__value { font-size: var(--c-display-size); line-height: var(--c-display-lh); font-weight: 600; margin: var(--c-space-2) 0 var(--c-space-1); font-variant-numeric: tabular-nums; }
.kpi__sub { font-size: var(--c-small-size); line-height: var(--c-small-lh); color: var(--c-text-3); }
.meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--c-space-4) var(--c-space-6); margin-top: var(--c-space-4); padding-top: var(--c-space-4); border-top: 1px solid var(--c-hairline); }
.meta dt { font-size: var(--c-label-size); line-height: var(--c-label-lh); font-weight: 600; letter-spacing: var(--c-label-tracking); color: var(--c-text-3); }
.meta dd { margin: var(--c-space-1) 0 0; color: var(--c-text); }
.meta dd.notset { color: var(--c-text-3); }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; text-align: left; color: var(--c-action-text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 24px; }
.linkbtn:hover { color: var(--c-action-text-hover); }
.u-link { color: var(--c-action-text); text-decoration: underline; text-underline-offset: 2px; }
.u-link:hover { color: var(--c-action-text-hover); }
.notice a { display: inline-flex; align-items: center; min-height: var(--c-space-6); }
.search:focus-within { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* Pills */
.u-pill { display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 12px; border-radius: var(--c-radius-pill); font-size: var(--c-small-size); font-weight: 600; white-space: nowrap; }
.u-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.u-pill--completed { background: var(--c-blue-100); color: var(--c-blue-800); }
.u-pill--ontrack { background: var(--c-green-100); color: var(--c-green-800); }
.u-pill--atrisk { background: var(--c-amber-100); color: var(--c-amber-800); }
.u-pill--overdue { background: var(--c-red-100); color: var(--c-red-800); }
.u-pill--neutral { background: var(--c-hover); color: var(--c-text-2); }
.tag { display: inline-flex; align-items: center; gap: var(--c-space-1); height: 24px; padding: 0 var(--c-space-2); border-radius: var(--c-radius-sm); border: 1px solid var(--c-hairline); font-size: var(--c-small-size); color: var(--c-text-2); white-space: nowrap; }

/* Chips and toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--c-space-2); align-items: center; margin-bottom: var(--c-space-4); }
.chip { height: var(--c-control-sm); padding: 0 var(--c-space-3); border-radius: var(--c-radius-pill); border: 1px solid var(--c-control); background: var(--c-surface); color: var(--c-text-2); font: inherit; font-size: var(--c-small-size); font-weight: 600; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--c-a-100); border-color: var(--c-action-border); color: var(--c-action-text); }
.search { display: inline-flex; align-items: center; gap: var(--c-space-2); height: var(--c-control-md); padding: 0 var(--c-space-3); border: 1px solid var(--c-control); border-radius: var(--c-radius-sm); background: var(--c-surface); color: var(--c-text-3); margin-left: auto; }
.search input { border: 0; outline: 0; background: transparent; font: inherit; color: var(--c-text); width: 220px; }
.count { font-size: var(--c-small-size); line-height: var(--c-small-lh); color: var(--c-text-3); }
.tabs { display: flex; gap: var(--c-space-1); border-bottom: 1px solid var(--c-hairline); margin-bottom: var(--c-space-6); }
.tabs { flex-wrap: wrap; }
.tabs button, .tabs a { display: inline-flex; align-items: center; font: inherit; font-weight: 600; background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--c-space-2) var(--c-space-4); color: var(--c-text-2); cursor: pointer; min-height: var(--c-control-md); text-decoration: none; }
.tabs button[aria-selected="true"], .tabs a[aria-selected="true"] { color: var(--c-action-text); border-bottom-color: var(--c-action-border); }
.inline-field { display: inline-flex; align-items: center; gap: var(--c-space-2); }
.inline-field .u-select { height: var(--c-control-sm); max-width: 200px; }
.grp { margin-bottom: var(--c-space-6); }
.grp__head { margin: 0 0 var(--c-space-2); }
.grp__btn { display: inline-flex; align-items: center; gap: var(--c-space-3); background: none; border: 0; padding: var(--c-space-1) 0; font: inherit; color: var(--c-text); cursor: pointer; min-height: var(--c-control-md); }
.grp__btn .u-small { color: var(--c-text-3); }
.multi { border: 1px solid var(--c-control); border-radius: var(--c-radius-sm); padding: var(--c-space-2); background: var(--c-surface); }
.picked { display: flex; flex-wrap: wrap; gap: var(--c-space-1); margin-bottom: var(--c-space-2); }
.pick { max-height: 192px; overflow: auto; margin-top: var(--c-space-2); }
.pick .u-check { min-height: var(--c-control-sm); }

/* Tables */
.tbl-wrap { background: var(--c-surface); border: 1px solid var(--c-hairline); border-radius: var(--c-radius-md); overflow: auto; max-height: calc(100vh - 160px); }
/* Column names stay in view while the rows scroll. Solid background so rows never show through. */
.u-table thead th { position: sticky; top: 0; z-index: 1; background: linear-gradient(var(--c-hover), var(--c-hover)), var(--c-surface); }
.u-table { width: 100%; border-collapse: collapse; font-size: var(--c-body-size); }
.u-table th { text-align: left; background: var(--c-hover); color: var(--c-text-3); font-size: var(--c-label-size); line-height: var(--c-label-lh); font-weight: 600; letter-spacing: var(--c-label-tracking); text-transform: uppercase; padding: var(--c-space-2) var(--c-space-3); border-bottom: 1px solid var(--c-hairline); white-space: nowrap; }
.u-table td { padding: 0 var(--c-space-3); border-bottom: 1px solid var(--c-hairline); height: var(--c-row-height); vertical-align: middle; color: var(--c-text-2); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-table.two td { height: 62px; }
.u-table tbody tr:last-child td { border-bottom: 0; }
.u-table td.u-num, .u-table th.u-num { text-align: right; font-variant-numeric: tabular-nums; }
.u-table tbody tr:hover { background: var(--c-overlay-hover); }
.lead { font-weight: 600; color: var(--c-text); }
.sub { display: block; font-size: var(--c-small-size); line-height: var(--c-small-lh); color: var(--c-text-3); overflow: hidden; text-overflow: ellipsis; }
.bar { height: 8px; border-radius: var(--c-radius-pill); background: var(--c-hairline); overflow: hidden; min-width: 96px; }
.bar > span { display: block; height: 100%; background: var(--c-action); border-radius: var(--c-radius-pill); }
.bar.over > span { background: var(--c-red-600); }

/* Empty, skeleton */
.u-empty { text-align: center; padding: var(--c-space-12) var(--c-space-6); color: var(--c-text-3); }
.u-empty__title { font-size: var(--c-body-lg-size); line-height: var(--c-body-lg-lh); color: var(--c-text); font-weight: 600; margin-bottom: var(--c-space-2); }
.skel { height: var(--c-row-height); border-radius: var(--c-radius-sm); background: var(--c-skeleton); margin-bottom: var(--c-space-2); }


.need { display: flex; align-items: center; gap: var(--c-space-3); min-height: 32px; }
.need .r { flex: 1; color: var(--c-text); }

/* Dialog */
.scrim { position: fixed; inset: 0; background: var(--c-scrim); display: flex; align-items: flex-start; justify-content: center; padding: var(--c-space-12) var(--c-space-4); overflow: auto; z-index: 20; }
.dlg { background: var(--c-surface); border-radius: var(--c-radius-md); box-shadow: var(--c-shadow-lg); width: 100%; max-width: 720px; display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
/* The form scrolls inside the dialog; the footer (Save, Cancel) sits below it at the bottom of the dialog, never over the form. */
.dlg__head, .dlg__foot { flex: none; }
.dlg__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dlg--sm { max-width: 480px; }
.dlg__head { display: flex; align-items: center; gap: var(--c-space-3); padding: var(--c-space-6) var(--c-space-6) 0; }
.dlg__head h2 { flex: 1; }
.dlg__body { padding: var(--c-space-4) var(--c-space-6); }
.dlg__foot { display: flex; justify-content: flex-end; gap: var(--c-space-2); padding: var(--c-space-4) var(--c-space-6); border-top: 1px solid var(--c-hairline); background: var(--c-surface); border-radius: 0 0 var(--c-radius-md) var(--c-radius-md); }
.dlg__foot .left { margin-right: auto; }
.fgroup { margin-bottom: var(--c-space-4); }
.fgroup h3 { margin-bottom: var(--c-space-3); }
.fgroup--plain { margin-bottom: 0; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--c-space-4); }
.u-field { display: block; margin-bottom: var(--c-space-3); }
.u-field.wide { grid-column: 1 / -1; }
.u-field__label { display: block; font-size: var(--c-body-size); font-weight: 600; margin-bottom: var(--c-space-1); color: var(--c-text); }
.u-field__req { color: var(--c-red-600); margin-left: 4px; }
.u-field__hint { display: block; font-size: var(--c-small-size); line-height: var(--c-small-lh); color: var(--c-text-3); margin-top: var(--c-space-1); }
.u-field__error { display: block; font-size: var(--c-small-size); line-height: var(--c-small-lh); color: var(--c-red-800); margin-top: var(--c-space-1); font-weight: 600; }
.u-input, .u-select, .u-textarea { width: 100%; font-family: var(--c-font); font-size: var(--c-body-size); color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-control); border-radius: var(--c-radius-sm); padding: 0 var(--c-space-3); height: var(--c-control-md); }
.u-textarea { height: auto; padding: var(--c-space-2) var(--c-space-3); line-height: var(--c-body-lh); resize: vertical; }
.u-input:hover, .u-select:hover, .u-textarea:hover { border-color: var(--c-text-3); }
.u-input--error { border-color: var(--c-red-600); border-width: 2px; }
.u-check { display: flex; align-items: center; gap: var(--c-space-2); min-height: var(--c-control-md); }
.u-check input { width: 20px; height: 20px; accent-color: var(--c-action); }
.u-check--lg input { width: 24px; height: 24px; }
.summary { padding: var(--c-space-3) var(--c-space-4); border-radius: var(--c-radius-md); background: var(--c-red-100); color: var(--c-red-800); margin-bottom: var(--c-space-4); }
.summary a { color: var(--c-red-800); }

/* Toast */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--c-space-6); display: flex; flex-direction: column; gap: var(--c-space-2); z-index: 30; }
.u-toast { display: flex; align-items: center; gap: var(--c-space-6); background: var(--c-dark); color: var(--c-on-dark); border-radius: var(--c-radius-md); padding: var(--c-space-3) var(--c-space-4); box-shadow: var(--c-shadow-lg); font-size: var(--c-body-size); }
.u-toast button { color: var(--c-on-dark-accent); font-weight: 600; background: none; border: 0; cursor: pointer; font: inherit; min-height: 28px; }

/* Admin */
.check-row { display: flex; align-items: center; gap: var(--c-space-3); min-height: var(--c-row-height); border-bottom: 1px solid var(--c-hairline); }
.check-row:last-child { border-bottom: 0; }
.check-row .n { flex: 1; color: var(--c-text); font-weight: 600; }

@media (max-width: 1360px) { .split { grid-template-columns: 1fr; } .split > .stack:last-child { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--c-gutter); } .split > .stack:last-child > * { margin-top: 0; } }
/* Lower-priority columns step aside below 1400px. The values stay on the edit form and the detail pages. */
@media (max-width: 1399px) { .u-table .opt { display: none; } }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .frame { flex-direction: column; } .rail { width: auto; height: auto; position: static; } .g2, .g4, .fgrid, .meta { grid-template-columns: 1fr; } .topbar { flex-wrap: wrap; } .search { margin-left: 0; } .search input { width: 160px; } .topbar, .page { padding-left: var(--c-space-4); padding-right: var(--c-space-4); } }

.tbl-all { max-height: 70vh; overflow: auto; }
.tbl-all td, .tbl-all th { white-space: nowrap; }
.tbl-all .cell-all { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.tbl-all thead th { position: sticky; top: 0; z-index: 1; background: var(--c-hover); }
.cmts { list-style: none; margin: 0; padding: 0; }
.cmt { padding: var(--c-space-3) 0; border-top: 1px solid var(--c-hairline); }
.cmt__meta { display: flex; align-items: center; gap: var(--c-space-3); flex-wrap: wrap; }
.cmt__meta .rowact { margin-left: auto; }
.cmt__body { margin: var(--c-space-2) 0 0; white-space: pre-wrap; color: var(--c-text); }
.ts th, .ts td { white-space: nowrap; }
.ts .u-select { min-width: 220px; }
.ts__h { width: 64px; text-align: right; }
.ts__over { color: var(--c-red-800); font-weight: 600; }
details.dq { display: block; }
details.dq > summary { display: flex; align-items: center; gap: var(--c-space-3); cursor: pointer; list-style: none; min-height: var(--c-space-6); }
details.dq > summary::-webkit-details-marker { display: none; }
details.dq > summary .u-num { margin-left: auto; }
details.dq ul { margin: var(--c-space-2) 0 0 var(--c-space-8); }
.rating { border: 0; padding: 0; margin: 0 0 var(--c-space-4); display: flex; flex-wrap: wrap; gap: var(--c-space-2); }
.rating legend { width: 100%; margin-bottom: var(--c-space-2); }
.rating__opt { display: inline-flex; align-items: center; gap: var(--c-space-2); min-height: var(--c-space-6); padding: 0 var(--c-space-2); border: 1px solid var(--c-hairline); border-radius: var(--c-radius-sm); cursor: pointer; }
.rating__opt:has(input:checked) { border-color: var(--c-action-border); background: var(--c-selected); }
.dm { display: block; width: 100%; height: auto; } /* the whole drawing fits the width of the page: no scrolling, it zooms out instead */
.dm-wrap { overflow: hidden; }
.dm-band { fill: var(--c-sunken); stroke: var(--c-hairline); stroke-width: 1; }
.dm-band--fin { stroke: var(--c-accent-border); stroke-dasharray: 6 4; }
.dm-band__label { fill: var(--c-text-2); font-size: 11px; font-weight: 600; font-family: inherit; }
.dm-node { fill: var(--c-surface); stroke: var(--c-control); stroke-width: 1; }
.dm-node--hub { stroke: var(--c-action-border); }
.dm-node--fin { stroke: var(--c-accent-border); }
.dm-node__text { fill: var(--c-text); font-size: 11px; font-family: inherit; }
.dm-node__n { fill: var(--c-text-2); font-size: 10px; font-family: inherit; }
.dm a:hover .dm-node { fill: var(--c-hover); }
.dm a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.dm a:focus-visible .dm-node { stroke: var(--c-focus); stroke-width: 2; }
.dm-edge { fill: none; stroke: var(--c-text-3); stroke-width: 1; opacity: .3; }
.dm--focus .dm-edge { opacity: .05; }
.dm--focus .dm-edge.on { opacity: 1; stroke-width: 1.6; stroke: var(--c-action-border); }
.dm--focus a:not(.on) .dm-node__text, .dm--focus a:not(.on) .dm-node__n { opacity: .4; }
.dm-edge--many { stroke-dasharray: 2 3; }
.dm-edge--cross { stroke: var(--c-accent-border); stroke-dasharray: 6 4; }
.dm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--c-space-2) var(--c-space-4); margin-bottom: var(--c-space-3); }
.dm-key { display: inline-block; width: var(--c-space-8); border-top: 1px solid var(--c-text-3); vertical-align: middle; }
.dm-key--many { border-top-style: dotted; }
.dm-key--cross { border-top: 1px dashed var(--c-accent-border); }
.rating--names { flex-direction: column; align-items: stretch; }
.rating--names .rating__opt { padding: var(--c-space-2) var(--c-space-3); align-items: flex-start; }
.rating--names .rating__opt input { margin-top: var(--c-space-1); }
.rail__sec { display: flex; flex-direction: column; gap: var(--c-space-1); margin-top: var(--c-space-4); padding-top: var(--c-space-3); border-top: 1px solid var(--c-rail-line); }
.rail__head { padding: 0 var(--c-space-3) var(--c-space-1); font-size: var(--c-label-size); line-height: var(--c-label-lh); font-weight: 600; letter-spacing: var(--c-label-tracking); text-transform: uppercase; color: var(--c-rail-muted); }

/* View as: the bar that says whose view this is */
.vabar { display: flex; align-items: center; gap: var(--c-space-3); padding: var(--c-space-2) var(--c-space-8); background: var(--c-selected); color: var(--c-text); border-bottom: 1px solid var(--c-action-border); }
.vabar__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vabar .u-btn { margin-left: auto; }
@media (max-width: 760px) { .vabar { padding-left: var(--c-space-4); padding-right: var(--c-space-4); flex-wrap: wrap; } }
.prio__link { display: block; white-space: normal; min-height: var(--c-space-6); line-height: var(--c-space-6); }
.who .build { display: block; font-size: var(--c-small-size); line-height: var(--c-small-lh); color: var(--c-rail-muted); font-weight: 400; }
/* Resourcing grid: reads like the Demand sheet, every role cell editable */
.grid-wrap { max-height: calc(100vh - 320px); overflow: auto; }
.grid th, .grid td { vertical-align: middle; height: 44px; white-space: nowrap; }
.grid thead th { position: sticky; top: 0; z-index: 2; background: var(--c-hover); }
.grid .grid__lead { position: sticky; left: 0; z-index: 1; background: var(--c-surface); min-width: 200px; text-align: left; font-weight: 600; }
.grid thead th:first-child { left: 0; z-index: 3; }
.gcell-box { display: flex; flex-direction: column; gap: var(--c-space-1); }
.gcell { min-height: 28px; min-width: 120px; padding: 0 var(--c-space-2); border: 1px solid var(--c-control); border-radius: var(--c-radius-sm); background: var(--c-surface); color: var(--c-text); font: inherit; }
.gcell--num { min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.gcell:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.gcell[aria-invalid="true"] { border-color: var(--c-red-600); }
.gcell-box--saved .gcell { border-color: var(--c-green-600); }
.staff { display: inline-flex; align-items: center; gap: var(--c-space-1); white-space: nowrap; }
.av-frame { display: block; width: 100%; height: calc(100vh - 200px); min-height: 480px; border: 1px solid var(--c-hairline); border-radius: var(--c-radius-md); background: var(--c-surface); }
/* Analytics: the dashboard fills everything beside the menu. No header, no padding, no frame border. */
.is-full .topbar { display: none; }
.is-full .page { max-width: none; padding: 0; }
.is-full .av-frame { height: 100vh; min-height: 0; border: 0; border-radius: 0; }
.full-pad { padding: var(--c-space-6) var(--c-page-padding); }
/* Multi-select filters */
.msel { position: relative; }
.msel__btn { display: inline-flex; align-items: center; gap: var(--c-space-1); min-height: 40px; padding: 0 var(--c-space-3); border: 1px solid var(--c-border); border-radius: var(--c-radius-md); background: var(--c-surface); cursor: pointer; list-style: none; }
.msel__btn::-webkit-details-marker { display: none; }
.msel__panel input[type=checkbox] { width: 24px; height: 24px; flex: none; }
.msel__panel .u-check { min-height: 32px; }
.msel__panel { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 240px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--c-space-1); padding: var(--c-space-3); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--c-radius-md); box-shadow: var(--c-shadow-lg); }
/* A table row that opens its item when clicked anywhere */
.rowlink { cursor: pointer; }
/* thin rows (Other Assets): one line a row, so more rows fit on a screen */
.u-table--tight td { height: 30px; font-size: 13px; }
.u-table--tight .lead { font-size: 13px; }
/* a table whose rows are buttons: pointer, a clear hover and focus, and an arrow at the end of the row */
.u-table--click tbody tr:hover td { background: var(--c-a-50); }
.u-table--click tbody tr:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.u-table--click td.rowgo { width: 28px; padding: 0 var(--c-space-2); color: var(--c-text-3); text-align: right; }
.u-table--click tbody tr:hover td.rowgo { color: var(--c-action-border); }
.form-top { margin-bottom: var(--c-space-4); padding-bottom: var(--c-space-3); border-bottom: 1px solid var(--c-hairline); }
.rowlink:hover td { background: var(--c-hover); }
/* Menu sections open and close; in the icons-only menu every icon stays visible. */
.rail__head { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 32px; border: 0; background: none; cursor: pointer; text-align: left; font-family: inherit; }
.rail__head .i { flex: none; }
.rail__items { display: flex; flex-direction: column; gap: var(--c-space-1); }
.rail__sec.is-closed .rail__items { display: none; }
.frame--slim .rail__sec.is-closed .rail__items { display: flex; }
/* Date fields: the text field plus a calendar button. The native picker sits invisibly under the button. */
.datepick { display: flex; gap: var(--c-space-2); align-items: center; }
.datepick > .u-input, .datepick > .gcell { flex: 1; min-width: 0; }
.datepick__wrap { position: relative; display: inline-flex; flex: none; }
.datepick__btn { min-width: 40px; padding-left: var(--c-space-2); padding-right: var(--c-space-2); }
.datepick__native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: 0; padding: 0; }
/* New version banner: covers the whole app; everything behind is inert. */
.ver { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--c-space-6); background: var(--c-scrim); }
.ver__box { max-width: 560px; width: 100%; background: var(--c-surface); color: var(--c-text); border: 2px solid var(--c-accent); border-radius: var(--c-radius-md); padding: var(--c-space-8); box-shadow: var(--c-shadow-lg); }
/* Collapsed menu: icons only, labels stay as the accessible name and the tooltip */
.rail__toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--c-space-1); min-width: 36px; height: 36px; padding: 0 var(--c-space-2); border: 1px solid var(--c-rail-accent); border-radius: var(--c-radius-sm); background: var(--c-rail-active); color: var(--c-rail-accent); font: inherit; font-size: var(--c-small-size); font-weight: 600; cursor: pointer; }
.rail__toggle:hover { background: var(--c-rail-hover); }
.rail__toggle--slim { width: 44px; padding: 0; }
.rail__toggle--slim .rail__toggle-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rail__out { display: inline-flex; align-items: center; gap: var(--c-space-2); min-width: 24px; min-height: 24px; }
.frame--slim .rail__out { width: 36px; height: 36px; justify-content: center; }
.frame--slim .rail { width: 64px; }
.frame--slim .rail__brand { padding: var(--c-space-4) var(--c-space-2); justify-content: center; }
.frame--slim .rail__title, .frame--slim .rail a .lbl, .frame--slim .rail a .cnt, .frame--slim .rail__head, .frame--slim .rail__foot .who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.frame--slim .rail nav { padding-left: var(--c-space-1); padding-right: var(--c-space-1); }
.frame--slim .rail a { justify-content: center; padding: 0; position: relative; }
.frame--slim .rail__foot { padding: var(--c-space-3) var(--c-space-1); display: flex; justify-content: center; }
.frame--slim .rail__out .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rail a .dot { display: none; }
.frame--slim .rail a .dot { display: block; position: absolute; top: 8px; right: 10px; width: 8px; height: 8px; border-radius: var(--c-radius-pill); background: var(--c-rail-accent); }
@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }
.skip { position: absolute; left: var(--c-space-4); top: -48px; z-index: 100; padding: var(--c-space-2) var(--c-space-4); background: var(--c-action); color: var(--c-on-action); border-radius: var(--c-radius-sm); }
.skip:focus { top: var(--c-space-2); }
/* Sortable tables (SBD) */
.u-table th .sorthead { display: inline; min-height: 24px; line-height: 24px; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.u-table th .sorthead:hover { color: var(--c-text); }
.u-table th[aria-sort="ascending"], .u-table th[aria-sort="descending"] { color: var(--c-text); }
.sbd-table th, .sbd-table td { padding-left: var(--c-space-1); padding-right: var(--c-space-2); }
.sbd-table td { font-size: var(--c-small-size); line-height: var(--c-small-lh); max-width: 104px; }
.sbd-table td.wide { max-width: 176px; }
.sbd-table td .sub { display: block; overflow: hidden; text-overflow: ellipsis; }
.viewonly { display: inline-flex; align-items: center; min-height: 24px; color: var(--c-text-3); font-size: var(--c-small-size); }
.gcell-ro { display: inline-flex; align-items: center; min-height: 28px; color: var(--c-text-2); }
.sbd-table th { white-space: normal; vertical-align: bottom; }
.sbd-table th .sorthead { text-align: left; }
.sbd-table--fixed { table-layout: fixed; width: 100%; min-width: 960px; }
.sbd-table--fixed td, .sbd-table--fixed td.wide { max-width: none; }
.sbd-table--fixed th { overflow: hidden; }
.u-table th .sorthead .i { vertical-align: middle; margin-left: var(--c-space-1); }
.sbd-table td .sub, .sbd-table td > div > span:first-child { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   FloriMed look (10 Oct 2026, Ben). Palette, type and component shapes from the FloriMed delivery mockups; the app keeps
   the Uptitude name and the Uptitude design standard rules (contrast, target sizes, focus). Text on the bright blue
   (#00B1FF) is navy, because white on it fails contrast. Fonts are bundled (SIL OFL, licences in fonts/).
   ========================================================================== */
@font-face { font-family: "Public Sans"; src: url("fonts/public-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/public-sans-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
:root {
  --c-font: "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --c-font-head: "Instrument Sans", "Public Sans", system-ui, sans-serif;
  --c-page: #F6FBFD; --c-surface: #FFFFFF; --c-sunken: #F6FBFD; --c-raised: #FFFFFF; --c-hover: #E8F0F4; --c-selected: #E5F7FF; --c-disabled-bg: #E8F0F4;
  --c-text: #041122; --c-text-2: #41606E; --c-text-3: #536D7C; --c-text-dis: #8FA3AF; --c-text-inverse: #FFFFFF;
  --c-action: #00B1FF; --c-action-hover: #33C1FF; --c-action-pressed: #0096D9; --c-on-action: #041122; --c-action-border: #00B1FF; --c-action-text: #045E80; --c-action-text-hover: #034A66;
  --c-a-50: #F0FAFF; --c-a-100: #E5F7FF; --c-a-200: #BFEFFF; --c-a-300: #80D8FF; --c-a-400: #33C1FF; --c-a-500: #00B1FF;
  --c-accent: #045E80; --c-on-accent: #FFFFFF; --c-accent-border: #045E80;
  --c-hairline: #DDE8EE; --c-subtle: #D8E2E8; --c-control: #708796; --c-strong: #41606E; --c-focus: #045E80; --c-border: #D8E2E8;
  --c-dark: #041122; --c-on-dark: #FFFFFF; --c-on-dark-2: #E8F5FB; --c-on-dark-3: #9EDFF5; --c-on-dark-border: #16283A; --c-on-dark-accent: #BFEFFF;
  --c-blue-100: #E5F7FF; --c-blue-800: #045E80; --c-blue-600: #00B1FF;
  --c-green-100: #E6F6EC; --c-green-800: #17663A; --c-green-600: #31B56A;
  --c-amber-100: #FEF3E0; --c-amber-800: #7A4D00; --c-amber-600: #F5A623; --c-amber-200: #FBE3B8;
  --c-red-100: #FDECEE; --c-red-800: #A11D2B; --c-red-600: #C62E3A; --c-red-200: #F6C9CE;
  --c-destructive-fill: #C62E3A;
  --c-scrim: rgba(4,17,34,0.60); --c-overlay-hover: rgba(4,17,34,0.04); --c-overlay-selected: rgba(0,177,255,0.10); --c-skeleton: rgba(4,17,34,0.08);
  --c-radius-sm: 10px; --c-radius-md: 16px;
  --c-shadow-sm: none; --c-shadow-md: 0 3px 10px rgba(4,17,34,.08); --c-shadow-lg: 0 12px 32px rgba(4,17,34,.16);
  /* The menu is navy in both themes, as in the mockup */
  --c-rail-bg: #041122; --c-rail-text: #C9DCE6; --c-rail-strong: #FFFFFF; --c-rail-muted: #8FA6B4; --c-rail-line: #16283A; --c-rail-hover: #0B2236; --c-rail-active: #0B3545; --c-rail-accent: #00B1FF;
}
[data-theme="dark"] {
  --c-page: #020B16; --c-surface: #041122; --c-sunken: #020B16; --c-raised: #0B2236; --c-hover: #0B2236; --c-selected: #06324A; --c-disabled-bg: #0B2236;
  --c-text: #EAF6FB; --c-text-2: #B3CAD6; --c-text-3: #8EA9B8; --c-text-dis: #5E7A8A; --c-text-inverse: #041122;
  --c-action: #00B1FF; --c-action-hover: #33C1FF; --c-action-pressed: #0096D9; --c-on-action: #041122; --c-action-border: #00B1FF; --c-action-text: #5CCBFF; --c-action-text-hover: #9EDFF5;
  --c-a-50: #071C2E; --c-a-100: #0A2A40; --c-a-200: #0E3A57; --c-a-300: #80D8FF; --c-a-400: #33C1FF; --c-a-500: #00B1FF;
  --c-accent: #5CCBFF; --c-on-accent: #041122; --c-accent-border: #5CCBFF;
  --c-hairline: #16314A; --c-subtle: #1E3D57; --c-control: #6F8D9E; --c-strong: #8EA9B8; --c-focus: #5CCBFF; --c-border: #1E3D57;
  --c-dark: #041122; --c-on-dark: #EAF6FB; --c-on-dark-accent: #BFEFFF;
  --c-blue-100: #082A40; --c-blue-800: #9EDFF5; --c-blue-600: #00B1FF;
  --c-green-100: #0B2E22; --c-green-800: #7FD6A3; --c-green-600: #31B56A;
  --c-amber-100: #2E2410; --c-amber-800: #F7C46C; --c-amber-600: #F5A623; --c-amber-200: #4A3A16;
  --c-red-100: #33141B; --c-red-800: #F2A7AE; --c-red-600: #E5606B; --c-red-200: #4C1E27;
  --c-destructive-fill: #E5606B; --c-on-destructive: #041122;
  --c-scrim: rgba(0,0,0,0.65); --c-overlay-hover: rgba(255,255,255,0.05); --c-overlay-selected: rgba(0,177,255,0.12); --c-skeleton: rgba(255,255,255,0.08);
  --c-shadow-sm: none; --c-shadow-md: 0 2px 8px rgba(0,0,0,.55); --c-shadow-lg: 0 12px 32px rgba(0,0,0,.65);
  --c-rail-bg: #010812; --c-rail-text: #C9DCE6; --c-rail-strong: #FFFFFF; --c-rail-muted: #8FA6B4; --c-rail-line: #12233A; --c-rail-hover: #0B2236; --c-rail-active: #0B3545; --c-rail-accent: #00B1FF;
}
body { font-variant-numeric: tabular-nums; }
::selection { background: var(--c-a-200); color: var(--c-text); }
.u-h1, .u-h2, .u-h3, .rail__name, .kpi__value, .pcard__val .v, .u-empty__title, .dlg__head h2 { font-family: var(--c-font-head); letter-spacing: -0.015em; }
.u-h1 { font-size: 26px; line-height: 32px; }
.crumb { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
/* Buttons: pills */
.u-btn { border-radius: var(--c-radius-pill); font-weight: 600; }
.u-btn--secondary { background: var(--c-surface); color: var(--c-text); border-color: var(--c-subtle); }
.u-btn--secondary:hover { background: var(--c-surface); border-color: var(--c-action); }
.theme-switch { border-color: var(--c-subtle); }
/* Cards: white, rounded, hairline, flat */
.u-card { border-radius: var(--c-radius-md); box-shadow: none; padding: 20px 22px; }
.kpi__label, .meta dt { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 500; }
/* Filters and chips: pills */
.chip { height: 34px; padding: 0 var(--c-space-4); border-color: var(--c-subtle); color: var(--c-text); font-size: 13px; }
.chip:hover { border-color: var(--c-action); }
.chip[aria-pressed="true"] { background: var(--c-action); border-color: var(--c-action); color: var(--c-on-action); }
.msel__btn { border-radius: var(--c-radius-pill); border-color: var(--c-subtle); padding: 0 var(--c-space-4); }
.msel__btn:hover { border-color: var(--c-action); }
.search { border-radius: var(--c-radius-pill); border-color: var(--c-subtle); }
.u-input, .u-select, .u-textarea, .gcell { border-radius: var(--c-radius-sm); }
.tabs button[aria-selected="true"], .tabs a[aria-selected="true"] { color: var(--c-text); border-bottom-color: var(--c-action); }
/* Tables: white, rounded, uppercase grey headings, quiet rows */
.tbl-wrap { border-radius: var(--c-radius-md); }
.u-table thead th, .tbl-all thead th, .grid thead th { background: var(--c-surface); }
.u-table th { color: var(--c-text-3); font-size: 11px; font-weight: 500; letter-spacing: .1em; padding-top: 12px; padding-bottom: 12px; }
.u-table td { color: var(--c-text); }
.u-table td .sub { color: var(--c-text-3); }
.rowlink:hover td { background: var(--c-a-50); }
/* Status pills: soft, no dot */
.u-pill { height: 22px; padding: 0 9px; font-size: 11.5px; gap: 6px; }
.u-pill::before { display: none; }
/* Menu: navy rail, rounded active item with a blue edge */
.rail { border-right: 0; }
.rail a { border-radius: 12px; min-height: 42px; }
.rail a[aria-current="page"] { background: var(--c-rail-active); border-left: 2px solid var(--c-rail-accent); }
.rail__head { font-size: 10px; letter-spacing: .12em; font-weight: 500; }
.rail__toggle { border-radius: var(--c-radius-pill); }
.rail :focus-visible { outline-color: var(--c-rail-accent); }
/* Work: budget burn bar and issue / risk chips */
.burn { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.burn__bar { display: block; height: 6px; border-radius: var(--c-radius-pill); background: var(--c-hairline); overflow: hidden; }
.burn__bar > span { display: block; height: 100%; border-radius: var(--c-radius-pill); background: var(--c-action); }
.burn--warn .burn__bar > span { background: var(--c-amber-600); }
.burn--over .burn__bar > span { background: var(--c-red-600); }
.burn__txt { font-size: 12px; line-height: 16px; color: var(--c-text-3); }
.chips { display: inline-flex; gap: 6px; }
.mchip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--c-radius-pill); border: 1px solid var(--c-hairline); background: var(--c-sunken); color: var(--c-text-2); font-size: 11.5px; font-weight: 600; }
.mchip--warn { background: var(--c-amber-100); border-color: var(--c-amber-200); color: var(--c-amber-800); }
.mchip--bad { background: var(--c-red-100); border-color: var(--c-red-200); color: var(--c-red-800); }
.rail nav { min-height: 0; } /* the menu scrolls inside the rail instead of stretching the page */
/* Menu (10 Oct 2026, Ben): name, build and sign out sit at the end of the scrolling menu, not fixed below it; items 20% shorter;
   closed section names 25% closer, each with a chevron. */
.rail__scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.rail__scroll nav { flex: none; overflow: visible; }
.rail__scroll .rail__foot { margin-top: auto; }
.rail a { min-height: 34px; }
.rail__sec { margin-top: 10px; padding-top: 8px; }
.rail__head { min-height: 26px; }
.rail__head .i { width: 14px; height: 14px; }
.toolbar--one { flex-wrap: nowrap; overflow-x: auto; }
.toolbar--one .search { flex: 0 1 260px; min-width: 160px; }
.grid .grid__lead { min-width: 150px; max-width: 150px; }
.grid .grid__lead a, .grid .grid__lead .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Timeline and deliverables: Gantt in the FloriMed mockup's look (10 Oct 2026) */
.gantt__head { display: flex; padding-bottom: 10px; border-bottom: 1px solid var(--c-hover); }
.gantt__name { width: 300px; flex: none; padding-right: 16px; min-width: 0; overflow: hidden; }
.gantt__name .lead { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.gantt__months { flex: 1; display: grid; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-3); text-align: center; }
.gantt__row { display: flex; align-items: center; padding-top: 6px; }
.gantt__track { flex: 1; position: relative; height: 17px; background-image: linear-gradient(90deg, var(--c-hover) 1px, transparent 1px); border-radius: 8px; }
.gantt__bar { position: absolute; top: 1px; height: 15px; border-radius: var(--c-radius-pill); display: flex; align-items: center; padding: 0 10px; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; min-width: 8px; }
.gantt__bar--done { background: var(--c-green-100); color: var(--c-green-800); box-shadow: inset 0 0 0 1px var(--c-green-600); }
.gantt__bar--active { background: var(--c-action); color: var(--c-on-action); }
.gantt__bar--next { background: var(--c-a-200); color: var(--c-blue-800); }
.gantt__bar--off { background: var(--c-hover); color: var(--c-text-3); }
.gantt__now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--c-amber-600); z-index: 1; }
@media (max-width: 760px) { .gantt__name { width: 128px; } }
/* Row headers (the work item in the Resourcing grid) read as normal text, not as column headings */
.u-table tbody th { text-transform: none; letter-spacing: normal; font-size: var(--c-body-size); font-weight: 600; color: var(--c-text); padding-top: 0; padding-bottom: 0; }
.grid .grid__lead a { min-height: 24px; line-height: 24px; }
/* Resourcing grid (10 Oct 2026, Ben): smaller text so more fits on one screen; specialism 25% narrower. Controls stay 24px+. */
.grid { font-size: 12px; }
.grid th, .grid td { height: 36px; padding-left: 6px; padding-right: 6px; }
.grid .gcell { font-size: 12px; min-height: 26px; min-width: 90px; padding: 0 4px; }
.grid .gcell--num { min-width: 56px; }
.grid .grid__spec .gcell { min-width: 0; width: 151px; } /* 25% narrower: about 163px wide with padding, was 218 */
.grid thead th { font-size: 10px; }
.grid .grid__lead { font-size: 12px; }
/* Menu toggle: just "Hide", slimmer (10 Oct 2026) */
.rail__toggle { height: 28px; min-width: 28px; padding: 0 10px 0 8px; gap: 4px; }
.rail__toggle--slim { width: 36px; padding: 0; }
/* Files and links: a row that still needs a work item */
tr.row--warn td { background: var(--c-amber-100); }
/* Progress bar for long jobs (10 Oct 2026): % complete, step, spinner, last reply from SharePoint; amber when stuck */
.actbar { pointer-events: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--c-space-4); z-index: 40; display: flex; align-items: center; gap: var(--c-space-3); width: min(720px, calc(100vw - 32px)); padding: var(--c-space-3) var(--c-space-4); background: var(--c-dark); color: var(--c-on-dark); border-radius: var(--c-radius-md); box-shadow: var(--c-shadow-lg); }
.actbar__text { flex: 1; min-width: 0; }
.actbar__main { font-weight: 600; }
.actbar__sub { font-size: var(--c-small-size); line-height: var(--c-small-lh); color: var(--c-on-dark-2); }
.actbar__prog { width: 120px; height: 8px; accent-color: var(--c-action); }
.actbar__spin { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--c-action); animation: actspin 0.9s linear infinite; }
@keyframes actspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .actbar__spin { animation: actpulse 2s ease-in-out infinite; border-top-color: rgba(255,255,255,.25); background: var(--c-action); } @keyframes actpulse { 50% { opacity: .35; } } }
.actbar--stuck { background: var(--c-amber-100); color: var(--c-amber-800); }
.actbar--stuck .actbar__sub { color: var(--c-amber-800); }
.actbar--stuck .actbar__spin { border-top-color: var(--c-amber-600); animation-duration: 3s; }
.actbar.hide { display: none; }
@media (max-width: 760px) { .actbar__prog { display: none; } }
.summary.summary--warn { background: var(--c-amber-100); color: var(--c-amber-800); }
.summary.summary--warn a { color: var(--c-amber-800); }
/* Empty risk and issue boxes on a work item: half the height (10 Oct 2026) */
.u-empty--sm { padding: var(--c-space-3) var(--c-space-6); }
.u-empty--sm .u-empty__title { margin-bottom: 0; }
.u-empty--sm p { margin: 4px 0 0; }
/* Work item Documents: names smaller and wrapping (10 Oct 2026) */
.doc-name { white-space: normal; max-width: 360px; }
.doc-name a { display: block; line-height: 1.35; overflow-wrap: anywhere; min-height: 24px; padding: 3px 0; }
/* Roles card: the people on a role over time sit under it (10 Oct 2026) */
section[aria-label='Roles'] .check-row { flex-wrap: wrap; }
.role-people { flex-basis: 100%; margin: 2px 0 4px; }
.role-people ul { margin: 0 0 4px; padding-left: 18px; }
.role-people li { margin: 2px 0; }
/* Commercial chain: documents and Link file on a step (10 Oct 2026) */
section[aria-label='Commercial chain'] .check-row { flex-wrap: wrap; padding: 4px 0; }
.chain-docs { flex-basis: 100%; margin: 0 0 4px; padding-left: 18px; }
.chain-docs li { margin: 2px 0; overflow-wrap: anywhere; }
.pick-list { max-height: 320px; overflow: auto; border: 1px solid var(--c-hairline); border-radius: 8px; margin-top: 8px; }
.pick-list .check-row { padding: 0 8px; }
/* Popups (10 Oct 2026): bottom right, out of the way, no focus trap */
.tip-pop { position: fixed; right: 24px; bottom: 24px; z-index: 900; transform-origin: bottom right; width: min(360px, calc(100vw - 32px)); background: var(--c-raised); color: var(--c-text); border: 1px solid var(--c-hairline); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 12px 16px; }
.tip-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tip-pop__kind { font-size: var(--c-caption-size, 12px); text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-3); font-weight: 600; }
.tip-pop__text { margin: 6px 0 2px; line-height: 1.45; }
/* Start and finish times on the timesheet (11 Oct 2026) */
.ts__t { width: 7.5em; min-width: 0; }
.ts__times th { font-weight: 500; }
/* Admin > Notifications (11 Oct 2026) */
.notif-modes { border: 0; padding: 0; margin: 8px 0 0; }
.notif-mode { display: flex; gap: 8px; align-items: flex-start; min-height: 32px; padding: 4px 0; cursor: pointer; }
.notif-mode input { margin: 2px 0 0; width: 24px; height: 24px; flex: none; }
.notif-people { padding-left: 18px; margin: 4px 0; }
.notif-people li { display: flex; gap: 8px; align-items: center; }
.notif-sw { min-height: 32px; }
.notif-sw input { width: 24px; height: 24px; flex: none; }
/* Admin > Architecture (11 Oct 2026) */
.arch-wrap { overflow-x: auto; }
.arch-svg { width: 100%; min-width: 860px; height: auto; display: block; }
.arch-lane { fill: var(--c-page); stroke: var(--c-hairline); }
.arch-lane-t { font: 600 13px var(--c-font); fill: var(--c-text-2); letter-spacing: .04em; }
.arch-box { fill: var(--c-raised); stroke: var(--c-border); stroke-width: 1.5; }
.arch-box--ok { stroke: var(--c-green-600); stroke-width: 2.5; }
.arch-box--bad { stroke: var(--c-red-600); stroke-width: 2.5; }
.arch-name { font: 600 14px var(--c-font-head); fill: var(--c-text); }
.arch-type { font: 12px var(--c-font); fill: var(--c-text-2); }
.arch-edge { fill: none; stroke: var(--c-accent); stroke-width: 1.5; opacity: .85; }
.arch-arrowhead { fill: var(--c-accent); }
.arch-num-bg { fill: var(--c-raised); stroke: var(--c-accent); }
.arch-num { font: 600 11px var(--c-font); fill: var(--c-text); text-anchor: middle; }
/* Day-rate calendar (11 Oct 2026) */
.dr-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 12px 0; }
.dr-head { font-size: var(--c-small-size); color: var(--c-text-2); text-align: center; }
.dr-cell { min-height: 72px; border: 1px solid var(--c-hairline); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 2px; background: var(--c-raised); }
.dr-empty { border-color: transparent; background: transparent; }
.dr-day { font-weight: 600; }
.dr-tag { font-size: 11px; color: var(--c-text-2); }
.dr-planned { border: 1px solid var(--c-accent); }
.dr-ok { background: var(--c-green-100); }
.dr-esc { background: var(--c-amber-100); }
.dr-off { background: var(--c-page); color: var(--c-text-2); }
.arch-flow { font: 600 12px var(--c-font); fill: var(--c-text); paint-order: stroke; stroke: var(--c-raised); stroke-width: 4px; stroke-linejoin: round; }
.arch-edge { stroke-width: 2; }
.notif-preview { border: 1px solid var(--c-hairline); border-radius: 12px; padding: 12px 16px; margin-top: 8px; background: var(--c-page); max-width: 640px; }
.notif-rows th { text-align: left; padding: 2px 12px 2px 0; color: var(--c-text-2); font-weight: 500; vertical-align: top; }
.notif-rows td { padding: 2px 0; }
.notif-details summary { cursor: pointer; min-height: 24px; padding: 4px 0; font-weight: 600; }
.notif-meta { grid-template-columns: 1fr; }
/* a table row that opens something when clicked (My to-do data quality, 11 Oct 2026); text that may run to several lines */
.u-table tr.row-link, .rows-click .u-table tbody tr { cursor: pointer; }
.refresh-row { align-items: flex-start; gap: 12px; } .refresh-row .u-btn, .refresh-row > .u-small { flex: 0 0 300px; justify-content: flex-start; text-align: left; } .refresh-row .n { white-space: normal; }
@media (max-width: 900px) { .refresh-row { flex-wrap: wrap; } .refresh-row .u-btn { flex-basis: 100%; } }
.u-table td .wrap { display: block; white-space: normal; overflow-wrap: anywhere; }
/* Notifications as a table (11 Oct 2026): one line each, the detail opens under the line */
.notif-table { table-layout: fixed; }
.notif-wrap { max-height: none; }
.notif-table td, .notif-table tbody th { height: 30px; padding-top: 2px; padding-bottom: 2px; vertical-align: middle; max-width: none; }
.notif-table thead th { padding-top: 6px; padding-bottom: 6px; }
.notif-w-on { width: 44px; } .notif-w-name { width: 27%; } .notif-w-who { width: 148px; } .notif-w-sent { width: 76px; } .notif-w-use { width: 60px; }
.notif-table .notif-row th { font-weight: 400; text-align: left; background: none; overflow: hidden; }
.notif-table input[type=checkbox] { width: 24px; height: 24px; margin: 0; display: block; }
.notif-c-on { width: 40px; }
.notif-table .notif-area-row th { height: 24px; padding-top: 8px; padding-bottom: 2px; }
.notif-one { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-2); }
.notif-name { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; max-width: 100%; padding: 0 4px 0 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--c-text); cursor: pointer; text-align: left; white-space: nowrap; }
.notif-name .i { flex: none; }
.notif-table .notif-area { text-align: left; padding-top: 10px; font-size: var(--c-label-size); line-height: var(--c-label-lh); letter-spacing: var(--c-label-tracking); text-transform: uppercase; color: var(--c-text-2); font-weight: 600; }
.notif-detail-row > td { white-space: normal; padding: 8px 12px 16px 44px; background: var(--c-page); }
.notif-detail__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; align-items: start; }
@media (max-width: 900px) { .notif-detail__cols { grid-template-columns: 1fr; } }
/* Client feedback (11 Oct 2026) */
.fb-trend { display: inline-flex; gap: 3px; align-items: center; }
.fb-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid var(--c-border); }
.fb-pos { background: var(--c-green-600); border-color: var(--c-green-600); }
.fb-neu { background: var(--c-blue-600); border-color: var(--c-blue-600); }
.fb-con { background: var(--c-amber-600); border-color: var(--c-amber-600); }
.fb-esc { background: var(--c-red-600); border-color: var(--c-red-600); }
.fb-none { background: transparent; }
.fb-sent { font-weight: 600; background: none !important; border: 0; }
/* Team and hiring (11 Oct 2026) */
.grid__unavail th, .grid__unavail td { background: var(--c-amber-100); }
.ws-row { display: grid; grid-template-columns: 180px 1fr 140px; gap: 8px; align-items: center; min-height: 28px; }
.ws-bar { height: 10px; border-radius: 6px; background: var(--c-page); border: 1px solid var(--c-hairline); overflow: hidden; display: block; }
.ws-fill { display: block; height: 100%; background: var(--c-accent); }
.ws-over { background: var(--c-red-600); }
/* A table cell that holds a row of controls (the role tick boxes): never cut off at the usual 320px. */
.u-table td.wide { max-width: none; overflow: visible; white-space: nowrap; }

/* ---------- Conflict of Interest (app/coi.js), 13 Oct 2026 ---------- */
.coi-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--c-gutter); align-items: start; }
@media (max-width: 1100px) { .coi-grid { grid-template-columns: minmax(0, 1fr); } }
.coi-lead { font-size: var(--c-h3-size); line-height: var(--c-h3-lh); color: var(--c-text-2); max-width: 760px; margin: var(--c-space-3) 0; }
.coi-gap { margin-top: var(--c-space-6); margin-bottom: var(--c-space-3); }
.coi-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--c-space-4); }
@media (max-width: 900px) { .coi-how { grid-template-columns: minmax(0, 1fr); } }
.coi-n { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-blue-100); color: var(--c-blue-800); font-weight: 600; margin-bottom: var(--c-space-2); }
.coi-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--c-space-2) var(--c-space-4); margin: var(--c-space-4) 0; }
.coi-kv dt { color: var(--c-text-3); font-size: var(--c-small-size); line-height: var(--c-body-lh); }
.coi-kv dd { margin: 0; }
.coi-list { list-style: none; padding: 0; margin: var(--c-space-3) 0 0; }
.coi-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--c-space-3); padding: var(--c-space-2) 0; }
.coi-form { max-width: 960px; }
.coi-form > * + * { margin-top: var(--c-space-4); }
.coi-note { background: var(--c-hover); border-radius: var(--c-radius-md); padding: var(--c-space-3) var(--c-space-4); }
.coi-q { margin-inline: 0; }
.coi-qt { padding: 0; font-weight: 600; }
.coi-qt .crumb, .coi-qtext { display: block; }
.coi-ynrow { display: flex; gap: var(--c-space-6); margin-top: var(--c-space-3); }
.coi-yn, .coi-agree { cursor: pointer; }
.coi-agree { align-items: flex-start; margin-top: var(--c-space-3); }
.coi-agree input { flex: none; margin-top: 2px; }
.coi-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--c-space-4); margin-top: var(--c-space-3); }
@media (max-width: 800px) { .coi-two { grid-template-columns: minmax(0, 1fr); } }
.coi-count { text-align: right; }
.coi-errsum { border: 1px solid var(--c-red-600); border-left-width: 4px; border-radius: var(--c-radius-md); background: var(--c-red-100); color: var(--c-red-800); padding: var(--c-space-3) var(--c-space-4); margin-bottom: var(--c-space-4); }
.coi-errsum ul { margin: var(--c-space-2) 0 0; padding-left: var(--c-space-6); }
.coi-errsum .u-link { color: var(--c-red-800); }
.coi-submit { justify-content: flex-end; }
.coi-acts { margin-left: auto; display: inline-flex; gap: var(--c-space-2); }
.coi-steps, .coi-answers { list-style: none; padding: 0; margin: var(--c-space-3) 0 0; }
.coi-step { border-left: 3px solid var(--c-hairline); padding: 0 0 var(--c-space-3) var(--c-space-3); }
.coi-step--ontrack { border-left-color: var(--c-green-800); }
.coi-step--atrisk { border-left-color: var(--c-amber-800); }
.coi-step--overdue { border-left-color: var(--c-red-600); }
.coi-answers li { padding: var(--c-space-3) 0; border-top: 1px solid var(--c-hairline); }
.coi-answers li:first-child { border-top: 0; }
.coi-answers p { margin: var(--c-space-1) 0; }
.coi-quote { background: var(--c-hover); border-radius: var(--c-radius-md); padding: var(--c-space-2) var(--c-space-3); white-space: pre-wrap; }
.coi-doc { max-width: 860px; }
.coi-sig { font-size: var(--c-h2-size); line-height: var(--c-h2-lh); font-style: italic; margin: var(--c-space-3) 0 0; }
@media print { .rail, .topbar, .tabs, .noprint, #toasts { display: none !important; } .coi-doc { border: 0; box-shadow: none; max-width: none; padding: 0; } }