/* ==========================================================================
   VMAPS MIS — design system
   One stylesheet, no build step. Sections: tokens · base · shell · components
   · pages · charts · utilities · responsive.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.260c81a4759b.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.ada540c0e24a.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;

  --bg: #f3f5fa;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f4f9;
  --border: #e5e9f1;
  --border-strong: #d4dae5;

  --text: #0f172a;
  --text-2: #334155;
  --muted: #64748b;
  --faint: #94a3b8;

  --brand: #1a72a8;
  --brand-bright: #38a9de;  /* logo blue - decorative fills only */
  --abyss: #0a2342;
  --brand-600: #155f8c;
  --brand-700: #0f4c72;
  --brand-50: #eaf5fb;
  --brand-100: #d3ebf7;
  --brand-200: #a9d7ef;

  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;

  /* Chart tokens (validated: categorical slots 1–2 + fixed status palette) */
  --series-1: #2a78d6; /* Pilot / new work */
  --series-2: #eb6834; /* Project / completed */
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-critical: #d03b3b;
  --status-neutral: #a3adbd;
  --grid: #e8ebf1;

  --sidebar-w: 264px;
  --gap: 24px;          /* one rhythm between every section and card */
  --pad-x: 20px;        /* one inner edge for everything inside a card */
  --topbar-h: 64px;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 7px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.14), 0 3px 8px rgba(15, 23, 42, 0.06);
  --ring: 0 0 0 4px rgba(26, 114, 168, 0.18);
  /* who has or did something: department, sales rep, client, admin */
  --own-dept: #0d9488; --own-sales: #2563eb; --own-client: #c026d3; --own-admin: #e11d48;
}

/* Named colour families used by badges, icon bubbles, avatars and timeline dots. */
.c-violet, .badge-violet, .tint-violet { --c-bg: #f3f0ff; --c-fg: #5b21b6; --c-dot: #8b5cf6; --c-line: #ddd6fe; }
.c-indigo, .badge-indigo, .tint-indigo { --c-bg: #eef2ff; --c-fg: #3730a3; --c-dot: #6366f1; --c-line: #c7d2fe; }
.c-blue, .badge-blue, .tint-blue { --c-bg: #eff6ff; --c-fg: #1d4ed8; --c-dot: #3b82f6; --c-line: #bfdbfe; }
.c-sky, .badge-sky, .tint-sky { --c-bg: #f0f9ff; --c-fg: #0369a1; --c-dot: #0ea5e9; --c-line: #bae6fd; }
.c-cyan, .badge-cyan, .tint-cyan { --c-bg: #ecfeff; --c-fg: #0e7490; --c-dot: #06b6d4; --c-line: #a5f3fc; }
.c-teal, .badge-teal, .tint-teal { --c-bg: #f0fdfa; --c-fg: #0f766e; --c-dot: #14b8a6; --c-line: #99f6e4; }
.c-green, .badge-green, .tint-green { --c-bg: #f0fdf4; --c-fg: #15803d; --c-dot: #22c55e; --c-line: #bbf7d0; }
.c-emerald, .badge-emerald, .tint-emerald { --c-bg: #ecfdf5; --c-fg: #047857; --c-dot: #10b981; --c-line: #a7f3d0; }
.c-amber, .badge-amber, .tint-amber { --c-bg: #fffbeb; --c-fg: #b45309; --c-dot: #f59e0b; --c-line: #fde68a; }
.c-orange, .badge-orange, .tint-orange { --c-bg: #fff7ed; --c-fg: #c2410c; --c-dot: #f97316; --c-line: #fed7aa; }
.c-rose, .badge-rose, .tint-rose { --c-bg: #fff1f2; --c-fg: #be123c; --c-dot: #f43f5e; --c-line: #fecdd3; }
.c-red, .badge-red, .tint-red { --c-bg: #fef2f2; --c-fg: #b91c1c; --c-dot: #ef4444; --c-line: #fecaca; }
.c-slate, .badge-slate, .tint-slate { --c-bg: #f1f5f9; --c-fg: #475569; --c-dot: #94a3b8; --c-line: #e2e8f0; }
.c-gray, .badge-gray, .tint-gray { --c-bg: #f4f4f5; --c-fg: #52525b; --c-dot: #a1a1aa; --c-line: #e4e4e7; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }  /* the hidden attribute always wins over layout rules */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); }
h1, h2, h3, h4 { margin: 0; color: var(--text); letter-spacing: -0.015em; }
p { margin: 0; }
small { font-size: 12px; }
hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: var(--brand-100); }

.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.icon-sm { width: 15px; height: 15px; }
.icon-xs { width: 13px; height: 13px; }
.icon-lg { width: 22px; height: 22px; }
.icon-xl { width: 28px; height: 28px; }

/* ---------- App shell ---------- */
.app {
  display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh;
  background: linear-gradient(90deg, var(--surface) 0, var(--surface) var(--sidebar-w), var(--bg) var(--sidebar-w));
}

/* Sidebar: white, one left edge (--sb-x) for the logo, every icon and the avatar; the logo row is exactly as
   tall as the top bar so their bottom lines meet; one soft blue highlight marks the current page. */
.sidebar {
  --sb-x: 24px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 40;
}
.brand {
  flex: none; display: flex; align-items: center;
  height: var(--topbar-h); padding: 0 var(--sb-x);
  border-bottom: 1px solid var(--border);
}
.brand-logo { display: block; height: 26px; width: auto; }

.nav { flex: 1; overflow-y: auto; padding: 18px 12px 12px; }
.nav-group + .nav-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.nav-link {
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 calc(var(--sb-x) - 12px); margin: 2px 0; border-radius: 10px;
  color: var(--text-2); font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  transition: background 0.15s, color 0.15s;
}
.nav-link .icon { width: 18px; height: 18px; flex: none; color: var(--faint); transition: color 0.15s; }
.nav-link:hover { background: var(--surface-3); color: var(--text); }
.nav-link:hover .icon { color: var(--muted); }
.nav-link.active { background: var(--brand-50); color: var(--abyss); font-weight: 600; }
.nav-link.active .icon { color: var(--brand); }
.nav-link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.nav-count {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums;
  background: var(--brand); color: #fff;
}

.sidebar-foot { flex: none; padding: 8px 12px 16px; }
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 14px 4px 0 calc(var(--sb-x) - 12px);  /* icon buttons end under the unread count */
  border-top: 1px solid var(--border);
}
.sidebar-user .avatar { flex: none; }
/* the photo, name and role open My profile */
.sidebar-user-link { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; margin: -4px 0 -4px -6px; padding: 4px 6px;
  border-radius: 10px; color: inherit; transition: background 0.15s; }
.sidebar-user-link:hover { background: var(--surface-3); color: inherit; }
.sidebar-user-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.sidebar-user-text { flex: 1; min-width: 0; }
.sidebar-user-name {
  color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.sidebar-user-role { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.sidebar-user-actions { display: flex; flex: none; }
.sidebar-user form { display: flex; }
.sidebar-icon-btn {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted);
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.sidebar-icon-btn .icon { width: 17px; height: 17px; }
.sidebar-icon-btn:hover { background: var(--surface-3); color: var(--text); }
.sidebar-icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.main { min-width: 0; display: flex; flex-direction: column; }
/* The mobile-menu overlay must never take a grid cell. */
.scrim { display: none; }

.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  display: flex; align-items: center; gap: 16px; padding: 0 32px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-logo { display: none; flex: none; }
.topbar-logo img { display: block; height: 20px; width: auto; }
.search {
  position: relative; flex: 1; max-width: 520px;
}
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.search input {
  width: 100%; height: 40px; padding: 0 64px 0 38px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2);
  font: inherit; color: var(--text); transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.search input:focus { outline: none; background: #fff; border-color: var(--brand); box-shadow: var(--ring); }
.search kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font: 600 11px var(--font); color: var(--muted); background: #fff;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-date { font-size: 12.5px; color: var(--muted); font-weight: 500; white-space: nowrap; }

.icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: 10px;
  display: inline-grid; place-items: center; cursor: pointer;
  background: #fff; border: 1px solid var(--border); color: var(--text-2);
  transition: background 0.15s, border-color 0.15s;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.icon-btn .dot-count {
  position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 0 0 2px #fff;
}

/* Page layouts respond to this box (the space beside the sidebar), not to the screen. */
.content { padding: 28px 32px 56px; width: 100%; min-width: 0; container: content / inline-size; }
/* Every top-level block is separated by the same gap (margins collapse, so older margins never double it). */
.content > * + *:not(dialog) { margin-top: var(--gap); }
.content > .crumbs + * { margin-top: 0; }
/* Focused pages (forms, guides, short lists) sit in a centred column of comfortable width. */
.page-narrow { max-width: 1240px; }  /* left-anchored, so every page starts on the same edge as the top bar */
.page-narrow.md { max-width: 980px; }
.page-narrow.sm { max-width: 660px; }
.page-narrow > * + *:not(dialog) { margin-top: var(--gap); }
.page-narrow > .crumbs + * { margin-top: 0; }

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: var(--gap); flex-wrap: wrap; }
.page-head > :first-child { flex: 1 1 460px; min-width: 0; }
.page-title { font-family: var(--display); font-size: 31px; font-weight: 650; line-height: 1.12; letter-spacing: -0.022em; font-variation-settings: "opsz" 72; color: var(--abyss); }
.page-sub { margin-top: 6px; color: var(--muted); font-size: 14.5px; max-width: 72ch; }
/* what the client wants, under a project's title: three lines, then "Show all" for a long brief */
.page-brief { margin-top: 8px; max-width: 96ch; }
.page-brief p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.page-brief.is-long:not(.is-open) p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.page-brief .link-btn { margin-top: 2px; font-size: 13px; }
/* ---------- A project's header: the title with its type and stage, and the buttons centred on its line; the brief under
   the title; then one strip of facts in equal columns whose label, value and note lines line up. The title always keeps
   room (at least 420px): with many buttons they wrap into a second row beside it rather than squeeze it ---------- */
.page-head.job-head {
  --title-line: 35px;  /* the title's first line, which the buttons centre on */
  display: grid; grid-template-columns: minmax(min(100%, 420px), 1fr) auto;
  grid-template-areas: "name actions" "brief actions" "facts facts"; align-items: start; gap: 0 32px;
}
.job-name { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.job-title { min-width: 0; overflow-wrap: anywhere; }
.job-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.job-tags > * { height: 26px; padding-top: 0; padding-bottom: 0; }  /* the type, the stage and a revision the same height */
.job-tags .type-chip { padding: 0 9px 0 8px; font-size: 12px; }
.job-actions { grid-area: actions; justify-content: flex-end; margin-top: calc((var(--title-line) - 40px) / 2); }
.job-brief { grid-area: brief; margin-top: 6px; }
.crumbs .code-pill { padding: 1px 7px; font-size: 11.5px; color: var(--text-2); }  /* the project's code, once, where the page sits */
/* one row of equal columns, however many facts there are; three columns on a tablet, two on a phone (below) */
.job-facts {
  grid-area: facts; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 16px 0 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-xs); overflow: hidden;
}
/* hairlines between the columns (and rows, once they wrap); the strip's edge clips the outer ones */
.party { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 12px 18px 13px; box-shadow: -1px 0 0 var(--border), 0 -1px 0 var(--border); }
.party dt { display: flex; align-items: center; gap: 7px; min-height: 16px; font-size: 12px; font-weight: 550; color: var(--muted); white-space: nowrap; }
.party:not(.party-date):not(.party-quote) dt::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--own, #cbd5e1); }
.party dt .icon { width: 14px; height: 14px; flex: none; color: var(--own); }
.party dd {  /* a long name wraps onto a second line rather than being cut off */
  margin: 0; min-width: 0; overflow-wrap: break-word;
  font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--abyss); font-variant-numeric: tabular-nums;
}
/* the note under a value: days left, no team yet, the client code under its name, the quotation's version */
.party dd small, .party .client-stack .client-code {
  display: block; margin-top: 2px;
  font-family: var(--font); font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--own-text, var(--muted));
}
.party dd small.is-warn { color: #b45309; }
/* the client: the code alone for a department; the name with the code under it for sales and the admin */
.party .client-code { padding: 0; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; white-space: normal; }
.party .client-stack { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 0; }
.party .client-stack .client-name { font: inherit; color: inherit; }
/* the two dates that matter: tinted columns with a bar on top; the deadline turns amber when close, red once past */
.party-date { background: var(--tint); box-shadow: -1px 0 0 var(--border), 0 -1px 0 var(--border), inset 0 3px 0 var(--own); }
.party-date dt { color: var(--text-2); font-weight: 600; }
.party-date dd { white-space: nowrap; }
.party-date.is-received { --own: #64748b; --tint: #f6f8fb; }
.party-date.is-deadline { --own: #2563eb; --own-text: #1d4ed8; --tint: #f1f6ff; }
.party-date.is-deadline dd { color: #1e3a8a; }
.party-date.is-risk { --own: #d97706; --own-text: #b45309; --tint: #fffaeb; }
.party-date.is-risk dd { color: #78350f; }
.party-date.is-late { --own: #dc2626; --own-text: #b91c1c; --tint: #fef4f4; }
.party-date.is-late dd { color: #991b1b; }
@container content (max-width: 1250px) {  /* a laptop: the same placement, a little tighter */
  .page-head.job-head { --title-line: 30px; column-gap: 24px; }
  .job-title { font-size: 27px; }
  .party { padding: 11px 14px 12px; }
  .party dd { font-size: 15px; }
}
@container content (max-width: 900px) {  /* a tablet: the facts in three columns; a last one alone fills its row */
  .job-facts { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .job-facts > .party:nth-child(3n+1):last-child { grid-column: span 3; }
  .job-facts > .party:nth-child(3n+2):last-child { grid-column: span 2; }
}
@container content (max-width: 760px) {  /* a phone: one column, the facts before the buttons */
  .page-head.job-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "brief" "facts" "actions"; }
  .job-actions { justify-content: flex-start; margin-top: 14px; }
}
@container content (max-width: 520px) {  /* the facts in two columns */
  .job-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job-facts > .party:nth-child(n):last-child { grid-column: auto; }
  .job-facts > .party:nth-child(2n+1):last-child { grid-column: span 2; }
}
/* a team's logins, listed under the team on the Teams page */
.team-login td { padding-top: 6px; padding-bottom: 6px; background: var(--surface-2); }
.team-login.is-off .team-login-id { opacity: 0.55; }
.team-login-id { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; padding-left: 6px; }
.team-login-id .icon { width: 14px; height: 14px; color: var(--faint); }
.inline-form { display: inline; }
.party-file { display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; vertical-align: top; font: 600 15px/1.35 var(--font); color: var(--brand-600); text-decoration: none; }
.party-file .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.party-file span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }  /* a long name wraps (up to three lines) */
.party-file:hover span { text-decoration: underline; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 1 auto; max-width: 100%; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: 12px; font-weight: 650; color: var(--brand-600); letter-spacing: 0.01em;
}
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 10px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); font-weight: 550; }
.crumbs a:hover { color: var(--brand-600); }
.crumbs .icon { width: 14px; height: 14px; color: var(--faint); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  container-type: inline-size;
}
/* Cards placed side by side stretch to the same height; their body takes the spare room. */
.grid > .card, .stack > .card { display: flex; flex-direction: column; }
.card[id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }  /* a tile can jump to it below the sticky top bar */
.grid > .card > .card-body, .stack > .card > .card-body { flex: 1 1 auto; }
.card-body.fill { display: flex; flex-direction: column; }
.card-body.fill > .hbars, .card-body.fill > .dept-rows { flex: 1; align-content: space-between; }
/* A feed that fills its column and scrolls, instead of making the row taller. */
.card-body.fill-scroll { flex: 1 1 0; min-height: 180px; overflow-y: auto; contain: size;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent); }
.card-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px;
  padding: 16px var(--pad-x); border-bottom: 1px solid var(--border);
}
.card-head.borderless { border-bottom: 0; padding-bottom: 4px; }
.card-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 680; }
.card-title .bubble { width: 32px; height: 32px; border-radius: 9px; }
.card-title .bubble .icon { width: 17px; height: 17px; }
.card-sub { font-size: 12.5px; color: var(--muted); font-weight: 450; margin-top: 2px; }
/* Dashboard section heads: a tinted icon, the title and its count, then the figures that matter as short facts */
.sec-head { padding: 16px var(--pad-x) 15px; }
.sec-title { display: grid; gap: 7px; min-width: 0; }
.sec-title h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--text); }
.sec-title h2 > .icon { width: 18px; height: 18px; flex: none; color: var(--c-fg); }
.sec-count {
  display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-fg);
  font-family: var(--display); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.sec-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 18px; margin: 0 0 0 27px; font-size: 12.5px; color: var(--muted); }
.sec-fact, .sec-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sec-fact .icon { width: 14px; height: 14px; flex: none; color: var(--faint); }
.sec-fact b { font-weight: 650; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sec-fact.is-warn, .sec-fact.is-warn .icon, .sec-fact.is-warn b { color: #b45309; }
.sec-fact.is-late, .sec-fact.is-late .icon, .sec-fact.is-late b { color: #b91c1c; }
.sec-fact.is-good .icon { color: #16a34a; }
.sec-fact.is-people .icon { color: var(--own-dept); }
.sec-key i { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--own); }
.card-body { padding: var(--pad-x); }
.card-body.tight { padding: 8px 0; }
.card-body.fill-scroll { padding-bottom: 32px; }  /* room for the last item to scroll clear of the fade */
.card-foot {
  padding: 12px var(--pad-x); border-top: 1px solid var(--border); background: var(--surface-2);
  border-radius: 0 0 var(--radius) var(--radius); font-size: 13px; color: var(--muted);
}

.bubble {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: inline-grid; place-items: center;
  background: var(--c-bg, var(--brand-50)); color: var(--c-fg, var(--brand-600));
}
.bubble-sm { width: 30px; height: 30px; border-radius: 8px; }
.bubble-sm .icon { width: 16px; height: 16px; }
.bubble-lg { width: 52px; height: 52px; border-radius: 14px; }
.bubble-lg .icon { width: 26px; height: 26px; }
.bubble-round { border-radius: 999px; }

/* ---------- Grid helpers ---------- */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-main-side { grid-template-columns: minmax(0, 1fr) clamp(320px, 26%, 420px); align-items: start; }
.grid-main-side.stretch { align-items: stretch; }
.grid-side-main { grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-content: start; }
.aside-sticky { position: sticky; top: calc(var(--topbar-h) + var(--gap)); align-self: start; }
.grid > *, .stack > * { min-width: 0; }
.align-start { align-items: start; }
.row { display: flex; align-items: center; gap: 10px; }
.row-wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.spacer { flex: 1; }

/* ---------- KPI tiles ---------- */
/* ---------- Key figures: one instrument strip ---------- */
/* The figures sit in one panel of equal cells divided by hairlines (like the facts strip on a project page): a small
   icon and label, the figure large, a line under it. A figure that needs attention gets a thin signal line along the
   top of its cell, amber or red, and takes that colour; nothing else is coloured. */
.kpis {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-bottom: var(--gap);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 26px -18px rgba(15, 23, 42, 0.18); overflow: hidden;
}
.kpi {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon label" "value value" "meter meter" "foot foot"; align-content: start; column-gap: 8px;
  padding: 18px 22px 17px; background: transparent; color: inherit;
  box-shadow: -1px 0 0 var(--border), 0 -1px 0 var(--border);  /* hairlines between cells; the panel's edge clips the outer ones */
  transition: background 0.15s;
}
a.kpi:hover { background: var(--surface-2); color: inherit; }
a.kpi:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
.kpi-top { display: contents; }
.kpi > .kpi-top > .bubble {
  grid-area: icon; align-self: center; width: 16px; height: 16px; border-radius: 0; background: none; box-shadow: none;
  color: var(--c-dot, var(--faint));
}
.kpi .bubble .icon { width: 16px; height: 16px; }
.kpi .bubble.type-pilot, .kpi .bubble.type-project { background: none; }
.kpi-label {
  grid-area: label; align-self: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.kpi-value {
  grid-area: value; margin-top: 13px; font-family: var(--display); font-size: 38px; font-weight: 600; line-height: 1;
  letter-spacing: -0.035em; font-variation-settings: "opsz" 96; font-variant-numeric: tabular-nums lining-nums;
  color: var(--abyss);
}
.kpi-value small { margin-left: 3px; font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.kpi-foot { grid-area: foot; display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 12.5px; color: var(--muted); }
.kpi-meter { grid-area: meter; height: 4px; margin-top: 12px; border-radius: 999px; background: #e6edf7; overflow: hidden; }
.kpi-meter > span { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
/* needs attention: a thin signal line along the top of the cell, a faint glow under it, the figure in its colour */
.kpi.is-warn { --signal: #f59e0b; --signal-tint: rgba(245, 158, 11, 0.075); }
.kpi.is-alert { --signal: #ef4444; --signal-tint: rgba(239, 68, 68, 0.065); }
.kpi.is-warn, .kpi.is-alert { background: linear-gradient(180deg, var(--signal-tint) 0%, transparent 72%); }
.kpi.is-warn::before, .kpi.is-alert::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--signal); }
a.kpi.is-warn:hover, a.kpi.is-alert:hover { background: linear-gradient(180deg, var(--signal-tint) 0%, var(--surface-2) 72%); }
.kpi.is-warn .kpi-value { color: #b45309; }
.kpi.is-alert .kpi-value { color: #b91c1c; }
.kpi.is-good .kpi-value { color: #15803d; }
@media (prefers-reduced-motion: reduce) { .kpi { transition: none; } }

/* ---------- Hero: a survey sheet's contour drawing behind the greeting and today's standing ---------- */
/* The hill is drawn in contour lines (every fifth an index contour, a trig point on the summit) and glows faintly;
   the left stays plain navy for the words. Under the greeting, a row of small links says where things stand, each
   with a dot in its status colour, and opens the place on the page that shows it. */
.hero {
  position: relative; overflow: hidden; margin-bottom: var(--gap);
  min-height: 136px; padding: 28px 34px; border-radius: 20px; color: #fff;
  display: flex; align-items: center;
  background:
    linear-gradient(90deg, #0a2342 0%, #0a2342 22%, rgba(10, 35, 66, 0.62) 42%, rgba(10, 35, 66, 0) 60%),
    url("../img/hero-contours.0ac53dee849b.svg") right center / cover no-repeat,
    radial-gradient(ellipse 34% 150% at 80% 50%, #15507f 0%, #0f3963 46%, #0a2342 100%);
  box-shadow: 0 22px 44px -26px rgba(10, 35, 66, 0.7);
}
.hero-inner { position: relative; z-index: 1; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; }
.hero-text { min-width: 0; }
.hero h1 {
  font-family: var(--display); font-size: 32px; font-weight: 650; line-height: 1.08;
  letter-spacing: -0.025em; font-variation-settings: "opsz" 96; color: #fff;
}
.hero p { color: rgba(255, 255, 255, 0.88); margin-top: 8px; font-size: 15px; line-height: 1.55; max-width: 58ch; }
.hero p b { color: #fff; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hero-pill {
  --dot: #38a9de;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  font-size: 13.5px; font-weight: 520; color: rgba(255, 255, 255, 0.9); white-space: nowrap;
  backdrop-filter: blur(2px); transition: background 0.15s, box-shadow 0.15s;
}
.hero-pill:hover { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); color: #fff; }
.hero-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero-pill i { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 28%, transparent); }
.hero-pill b { font-weight: 750; color: #fff; font-variant-numeric: tabular-nums; }
.hero-pill.is-new { --dot: #38a9de; }
.hero-pill.is-soon { --dot: #f5b041; }
.hero-pill.is-late { --dot: #f26b6b; }
.hero-pill.is-good { --dot: #4ade80; }
.hero-pill.is-info { --dot: #a5b4fc; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero .btn-light { background: #fff; color: var(--brand-700); }
.hero .btn-light:hover { background: #eaf5fb; color: var(--brand-700); }
@media (prefers-reduced-motion: reduce) { .hero-pill { transition: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-size: 14px; font-weight: 620; line-height: 1; white-space: nowrap;
  cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.05s, color 0.15s;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 17px; height: 17px; }
.btn-primary {
  color: #fff; background: linear-gradient(180deg, #2280b9 0%, #1a72a8 100%);
  border-color: #16679a;
  box-shadow: 0 1px 2px rgba(26, 114, 168, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover { color: #fff; background: linear-gradient(180deg, #1b74ab 0%, #155f8c 100%); }
.btn-success {
  color: #fff; background: linear-gradient(180deg, #1fb257 0%, #16a34a 100%); border-color: #15903f;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-success:hover { color: #fff; background: linear-gradient(180deg, #179d4b 0%, #15803d 100%); }
.btn-warning {
  color: #fff; background: linear-gradient(180deg, #f59e0b 0%, #ea8a04 100%); border-color: #d97706;
  box-shadow: 0 1px 2px rgba(217, 119, 6, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-warning:hover { color: #fff; background: linear-gradient(180deg, #e8920a 0%, #d97706 100%); }
.btn-secondary { color: var(--text-2); background: #fff; border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { color: var(--text); background: var(--surface-2); border-color: #c3cad8; }
.btn-ghost { color: var(--text-2); background: transparent; }
.btn-ghost:hover { color: var(--text); background: var(--surface-3); }
.btn-danger { color: #dc2626; background: #fff; border-color: #fecaca; }
.btn-danger:hover { color: #b91c1c; background: #fef2f2; border-color: #fca5a5; }
.btn-danger-solid { color: #fff; background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%); border-color: #c81e1e; }
.btn-danger-solid:hover { color: #fff; background: #b91c1c; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; gap: 6px; }
.btn-sm .icon { width: 15px; height: 15px; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
.btn-block { width: 100%; }
.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }
.btn[disabled], .btn.is-loading { opacity: 0.65; pointer-events: none; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--brand-600); font-weight: 600; cursor: pointer; }
.link-btn:hover { color: var(--brand-700); }
.link-more { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.link-more .icon { width: 15px; height: 15px; }

/* ---------- Badges & chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 640; line-height: 18px; white-space: nowrap;
  background: var(--c-bg, #f1f5f9); color: var(--c-fg, #475569);
  box-shadow: inset 0 0 0 1px var(--c-line, transparent);
}
.badge .icon { width: 13px; height: 13px; }
.badge-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--c-dot, #94a3b8); flex: none; }
.badge-lg { font-size: 13px; padding: 5px 12px 5px 11px; }
.badge-lg .badge-dot { width: 8px; height: 8px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px;
  font-size: 12.5px; font-weight: 620; white-space: nowrap; border: 1px solid; line-height: 18px;
}
.chip .icon { width: 14px; height: 14px; }
.chip-sub { font-weight: 500; opacity: 0.8; }
.chip-danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.chip-warning { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.chip-success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.chip-muted { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.chip-brand { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }

.type-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 7px; border-radius: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
}
.type-chip .icon { width: 12px; height: 12px; }
.type-pilot { background: #e8f1fc; color: #1c5cab; }
.type-project { background: #fdeee7; color: #b2461c; }

.code, .code-pill, .client-code, .person-name { white-space: nowrap; }
.code {
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em;
}
.code-pill {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px;
  background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; font-weight: 650;
}
.client-code {
  display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 6px;
  background: #f5f3ff; color: #5b21b6; border: 1px solid #e9e3ff;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; font-weight: 650;
}
.client-name { color: var(--text-2); font-weight: 550; }
.client-stack { display: inline-flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.client-stack .client-name { font-size: 12.5px; color: var(--muted); }

/* ---------- My profile ---------- */
.profile { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 24px; padding: 24px var(--pad-x); }
.profile-photo { width: 120px; height: 120px; border-radius: 999px; overflow: hidden; background: var(--surface-3);
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--border); }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-initials { width: 100%; height: 100%; display: grid; place-items: center; font-size: 38px; font-weight: 700;
  letter-spacing: 0.02em; color: #fff; background: var(--a); }
.profile-name { font-family: var(--display); font-size: 22px; font-weight: 650; color: var(--text); letter-spacing: -0.01em; }
.profile-role { margin-top: 2px; font-size: 13px; color: var(--muted); }
.profile .profile-kv { padding: 14px 0 0; grid-template-columns: 96px minmax(0, 1fr); }
input[type=file].input { height: auto; padding: 6px; }
input[type=file]::file-selector-button { margin-right: 12px; padding: 7px 14px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs); background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--surface-3); }
.profile-upload { padding: 18px var(--pad-x) 0; border-top: 1px solid var(--border); }
.profile-upload .form-actions { padding: 14px 0 18px; border: 0; background: none; }
.profile-remove { padding: 0 var(--pad-x) 18px; margin-top: -8px; }
@container (max-width: 520px) {
  .profile { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}
/* the round button on the photo that chooses a new one (shown when the editor below can open it) */
.profile-photo-wrap { position: relative; width: 120px; height: 120px; }
.profile-photo-edit {
  position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: 999px; background: #fff; color: var(--brand-600); cursor: pointer;
  box-shadow: 0 0 0 3px var(--surface), var(--shadow-sm); transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.profile-photo-edit:hover { border-color: var(--brand); background: var(--brand); color: #fff; }
.profile-photo-edit:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--surface), var(--ring); }
.profile-photo-edit .icon { width: 18px; height: 18px; }

/* ---------- My profile: fitting a new photo to the circle ---------- */
/* A dark viewfinder with the circle cut out of a dimmed surround and a grid while the picture moves; the controls
   (zoom, a degree scale to straighten it like a level, quarter turns); and the picture at the sizes the app shows it. */
dialog.modal.pe { width: min(920px, calc(100vw - 32px)); }
.pe-body {
  display: grid; grid-template-columns: minmax(260px, min(440px, calc(100vh - 250px))) minmax(0, 1fr); gap: 28px;
  align-items: start; padding: 18px 24px 22px;
}
.pe-stage {
  position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--abyss);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: none;
}
.pe-stage:active { cursor: grabbing; }
.pe-stage:focus-visible { box-shadow: 0 0 0 4px rgba(26, 114, 168, 0.35); }
.pe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pe-ring {
  position: absolute; inset: 12%; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.92), 0 0 0 999px rgba(10, 35, 66, 0.68);
}
.pe-grid {
  position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity 0.25s;
  background-image:
    linear-gradient(90deg, transparent calc(100% / 3 - 0.5px), rgba(255, 255, 255, 0.55) 0 calc(100% / 3 + 0.5px),
      transparent 0 calc(200% / 3 - 0.5px), rgba(255, 255, 255, 0.55) 0 calc(200% / 3 + 0.5px), transparent 0),
    linear-gradient(180deg, transparent calc(100% / 3 - 0.5px), rgba(255, 255, 255, 0.55) 0 calc(100% / 3 + 0.5px),
      transparent 0 calc(200% / 3 - 0.5px), rgba(255, 255, 255, 0.55) 0 calc(200% / 3 + 0.5px), transparent 0);
}
.pe-stage.is-fine .pe-grid {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.42) 0 1px, transparent 1px calc(100% / 8)),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0 1px, transparent 1px calc(100% / 8));
}
.pe-stage.is-moving .pe-grid { opacity: 1; }
.pe-hint {
  position: absolute; left: 50%; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; transform: translateX(-50%);
  padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(10, 35, 66, 0.8); color: #fff;
  font-size: 12.5px; font-weight: 560; white-space: nowrap; pointer-events: none; transition: opacity 0.3s;
}
.pe-hint .icon { width: 14px; height: 14px; }
.pe-hint-touch { display: none; }
@media (pointer: coarse) { .pe-hint-mouse { display: none; } .pe-hint-touch { display: inline; } }
.pe-stage.is-used .pe-hint { opacity: 0; }
.pe-panel { display: grid; gap: 24px; align-content: start; min-width: 0; }
.pe-controls { display: grid; gap: 20px; }
.pe-control-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.pe-control-head label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.pe-angle-out { min-width: 5ch; font-family: var(--display); font-size: 16px; font-weight: 650; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.pe-angle-out.is-level { color: var(--brand-600); }
.pe-zoom { display: flex; align-items: center; gap: 4px; }
.pe-zoom input { flex: 1; min-width: 0; margin: 0 4px; accent-color: var(--brand); }
/* the degree scale: the needle is the slider's thumb; the bar along the foot runs from level to the needle */
.pe-ruler { --needle: 14px; position: relative; height: 36px; }
.pe-ticks { position: absolute; left: calc(var(--needle) / 2); bottom: 0; width: calc(100% - var(--needle)); height: 22px; overflow: visible; }
.pe-ticks line { stroke: #c3cbd8; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pe-ticks line.is-mid { stroke: #94a3b8; }
.pe-ticks line.is-major { stroke: #64748b; }
.pe-ticks line.is-zero { stroke: var(--brand); stroke-width: 2; }
.pe-ruler::after {
  content: ""; position: absolute; bottom: -1px; height: 3px; border-radius: 2px; background: var(--brand); pointer-events: none;
  left: calc(var(--needle) / 2 + (100% - var(--needle)) * var(--lo, 0.5));
  right: calc(var(--needle) / 2 + (100% - var(--needle)) * (1 - var(--hi, 0.5)));
}
.pe-ruler input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
}
.pe-ruler input:focus { outline: none; }
.pe-ruler input::-webkit-slider-runnable-track { height: 36px; background: transparent; }
.pe-ruler input::-moz-range-track { height: 36px; background: transparent; }
.pe-ruler input::-webkit-slider-thumb {
  width: var(--needle); height: 36px; border: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
  background: radial-gradient(circle at 50% 6px, var(--brand) 0 5px, transparent 5.5px),
    linear-gradient(var(--brand), var(--brand)) 50% 0 / 2px 100% no-repeat;
}
.pe-ruler input::-moz-range-thumb {
  width: var(--needle); height: 36px; border: 0; border-radius: 0; cursor: ew-resize;
  background: radial-gradient(circle at 50% 6px, var(--brand) 0 5px, transparent 5.5px),
    linear-gradient(var(--brand), var(--brand)) 50% 0 / 2px 100% no-repeat;
}
.pe-ruler input:focus-visible::-webkit-slider-thumb {
  background: radial-gradient(circle at 50% 6px, var(--brand) 0 5px, rgba(26, 114, 168, 0.25) 5.5px 9px, transparent 9.5px),
    linear-gradient(var(--brand), var(--brand)) 50% 0 / 2px 100% no-repeat;
}
.pe-ruler input:focus-visible::-moz-range-thumb {
  background: radial-gradient(circle at 50% 6px, var(--brand) 0 5px, rgba(26, 114, 168, 0.25) 5.5px 9px, transparent 9.5px),
    linear-gradient(var(--brand), var(--brand)) 50% 0 / 2px 100% no-repeat;
}
.pe-scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.pe-turns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pe-reset { margin-left: auto; }
.pe-error { margin: -6px 0 0; }
/* the picture at the sizes the app shows it */
.pe-looks {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 28px; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
}
.pe-look { display: grid; gap: 8px; justify-items: start; min-width: 0; margin: 0; }
.pe-look figcaption { font-size: 12px; color: var(--muted); }
.pe-look-big { width: 120px; height: 120px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--border); }
.pe-chip {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 16px 6px 6px;
  border: 1px solid var(--border); border-radius: 999px; background: #fff;
}
.pe-look-small { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #fff; }
.pe-chip-text { display: grid; min-width: 0; }
.pe-chip-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 650; color: var(--text); }
.pe-chip-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.pe .modal-foot .pe-another { margin-right: auto; }
.pe-short { display: none; }
@media (max-width: 480px) { .pe-long { display: none; } .pe-short { display: inline; } }
@media (max-width: 760px) {
  .pe-body { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 14px 16px 18px; }
  .pe-look-big { width: 72px; height: 72px; }
  .pe .modal-foot { flex-wrap: wrap; }
  .pe .modal-foot .pe-another { flex: 1 0 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .pe-grid, .pe-hint, .profile-photo-edit { transition: none; } }

/* ---------- Avatars ---------- */
.avatar {
  width: 34px; height: 34px; border-radius: 999px; flex: none;
  display: inline-grid; place-items: center; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  color: #fff; background: var(--a, #6366f1); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.avatar-sm { width: 26px; height: 26px; font-size: 10.5px; }
.avatar-photo { display: inline-block; object-fit: cover; background: var(--surface-3); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08); }
.avatar-lg { width: 44px; height: 44px; font-size: 15px; }
.avatar-indigo { --a: linear-gradient(135deg, #818cf8, #4f46e5); }
.avatar-violet { --a: linear-gradient(135deg, #a78bfa, #7c3aed); }
.avatar-sky { --a: linear-gradient(135deg, #38bdf8, #0284c7); }
.avatar-teal { --a: linear-gradient(135deg, #2dd4bf, #0d9488); }
.avatar-amber { --a: linear-gradient(135deg, #fbbf24, #d97706); }
.avatar-rose { --a: linear-gradient(135deg, #fb7185, #e11d48); }
.avatar-emerald { --a: linear-gradient(135deg, #34d399, #059669); }
.avatar-orange { --a: linear-gradient(135deg, #fb923c, #ea580c); }
.avatar-slate { --a: linear-gradient(135deg, #94a3b8, #64748b); }
.person { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.person-name { font-weight: 600; color: var(--text); line-height: 1.25; }
.person-sub { font-size: 12px; color: var(--muted); }

/* ---------- Progress ---------- */
.progress { height: 8px; border-radius: 999px; background: #e8edf5; overflow: hidden; min-width: 60px; }
.progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #5fc0e8 0%, #1a72a8 100%);
  transition: width 0.6s cubic-bezier(.2, .8, .2, 1);
}
.progress-done .progress-fill { background: linear-gradient(90deg, #4ade80 0%, #16a34a 100%); }
.progress-sm { height: 6px; }
.progress-lg { height: 12px; }
.progress-cell { display: flex; align-items: center; gap: 10px; min-width: 130px; }
.progress-cell .progress { flex: 1; }
.progress-cell b { font-size: 12.5px; font-weight: 700; color: var(--text-2); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; position: relative; }   /* relative: hidden screen-reader text stays inside the scroll area */
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th {
  position: sticky; top: 0; z-index: 1;
  padding: 10px 14px; text-align: left; white-space: nowrap;
  font-size: 12px; font-weight: 650; color: var(--muted);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.table th:first-child { border-top-left-radius: var(--radius); }
.table th:last-child { border-top-right-radius: var(--radius); }
.card-head + .table-wrap .table th { border-radius: 0; }
.table td { padding: 13px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-2); }
.table th:first-child, .table td:first-child { padding-left: var(--pad-x); }
.table th:last-child, .table td:last-child { padding-right: var(--pad-x); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background 0.12s; }
.table tbody tr[data-href] { cursor: pointer; }
.table tbody tr:hover { background: #f8f9ff; }
.table .text-right { text-align: right; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .num-strong { text-align: right; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.table .muted { color: var(--muted); }
.table .zero { color: var(--faint); }
.table-compact td { padding-top: 10px; padding-bottom: 10px; }
.table-dense th { white-space: normal; line-height: 1.3; vertical-align: bottom; padding-top: 10px; padding-bottom: 10px; }
.table-dense td { padding-top: 12px; padding-bottom: 12px; }
@container (max-width: 1100px) {
  .col-lg, .btn-label { display: none; }
  .btn:has(> .btn-label) { padding-inline: 0; aspect-ratio: 1; justify-content: center; }
  .table-dense th, .table-dense td { padding-left: 9px; padding-right: 9px; }
  .table-dense th:first-child, .table-dense td:first-child { padding-left: var(--pad-x); }
}
@container (max-width: 860px) { .col-md { display: none; } }
/* When the progress column hides, its % moves next to the stage badge. */
.col-sm-alt { display: none; }
.stage-pct { margin-left: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
@container (max-width: 760px) {
  .col-sm { display: none; }
  .col-sm-alt { display: revert; }
  .cell-contact { min-width: 180px; }
}
.cell-title { font-weight: 640; color: var(--text); line-height: 1.3; }
.cell-project { min-width: 240px; }
.cell-title:hover { color: var(--brand-600); }
.cell-sub { margin-top: 3px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.cell-sub > span { white-space: nowrap; }
.cell-lines { margin-top: 3px; display: grid; gap: 2px; font-size: 12.5px; color: var(--muted); }
.cell-lines > span { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.cell-lines .truncate { min-width: 0; }
.cell-client { min-width: 200px; }
.cell-contact { min-width: 220px; }
.cell-next { margin-top: 6px; white-space: nowrap; }
.cell-sub.nowrap { flex-wrap: nowrap; }
.table td.group-row { background: var(--surface-2); padding-top: 8px; padding-bottom: 8px; }
.tr-alert td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
.tr-warn td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.table tfoot td { font-weight: 700; color: var(--text); background: var(--surface-2); border-top: 1px solid var(--border); }

/* ---------- Filter bar ---------- */
.filters {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 14px var(--pad-x); border-bottom: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
}
.filters .input, .filters .select { height: 38px; }
.filters .search-field { position: relative; flex: 1 1 160px; min-width: 150px; }  /* takes whatever room the filters leave */
.filters select[name=client] { max-width: 200px; }
.result-clear { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--brand-600); }
.result-clear:hover { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
.filters .search-field .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.filters .search-field .input { padding-left: 36px; }
.filters .select { flex: 0 1 auto; width: auto; min-width: 120px; max-width: 220px; field-sizing: content; text-overflow: ellipsis; }  /* as wide as the choice shown, so the row stays on one line */
.segmented {
  display: inline-flex; flex-wrap: wrap; max-width: 100%; padding: 3px; border-radius: 10px; background: var(--surface-3);
  border: 1px solid var(--border); gap: 2px;
}
.segmented a, .segmented button {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); background: transparent; border: 0; cursor: pointer;
}
.segmented a:hover { color: var(--text); }
.segmented .on { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); }
.segmented .count { font-size: 11px; font-weight: 700; color: var(--faint); }
.segmented .on .count { color: var(--brand-600); }
.result-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--pad-x); font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--border);
}

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.form-grid .span-2 { grid-column: span 2; }
.field { display: grid; gap: 6px; margin-bottom: 18px; align-content: start; }
.field > label, .label { font-size: 13px; font-weight: 640; color: var(--text-2); }
.field .req { color: #ef4444; margin-left: 2px; }
.input, .select {
  width: 100%; height: 42px; padding: 0 13px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: #fff; color: var(--text);
  font: inherit; font-size: 14px; transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-xs);
}
.input::placeholder, .textarea::placeholder { color: #a3adbd; }
.input:hover, .select:hover { border-color: #c3cad8; }
.input:focus, .select:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 16px;
}
.textarea { height: auto; min-height: 92px; padding: 10px 13px; resize: vertical; line-height: 1.5; }
.help { font-size: 12.5px; color: var(--muted); }
.help .icon { width: 14px; height: 14px; margin-top: -2px; }
.errorlist { list-style: none; margin: 0; padding: 0; color: #dc2626; font-size: 12.5px; font-weight: 550; }
.field.has-error .input, .field.has-error .select { border-color: #f87171; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1); }
.form-errors {
  display: flex; gap: 10px; padding: 12px 14px; margin-bottom: 18px; border-radius: 10px;
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 13.5px;
}
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; color: var(--text-2); }
.check-input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand); flex: none; }
.form-actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center;
  padding: 16px 20px; border-top: 1px solid var(--border); background: var(--surface-2);
  border-radius: 0 0 var(--radius) var(--radius);
}
.form-section-title { font-size: 13px; font-weight: 700; color: var(--text); margin: 4px 0 14px; display: flex; align-items: center; gap: 8px; }
.form-section-title .icon { color: var(--brand); }

.radio-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.radio-card { position: relative; display: block; cursor: pointer; }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card-body {
  display: flex; gap: 12px; align-items: flex-start; height: 100%;
  padding: 14px; border-radius: 12px; border: 1.5px solid var(--border-strong); background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.radio-card-body b { display: block; font-size: 14px; color: var(--text); }
.radio-card-body span { font-size: 12.5px; color: var(--muted); }
.radio-card input:checked + .radio-card-body { border-color: var(--brand); background: var(--brand-50); box-shadow: var(--ring); }
.radio-card input:focus-visible + .radio-card-body { box-shadow: var(--ring); }

.range-row { display: flex; align-items: center; gap: 14px; }
.range-row input[type="range"] { flex: 1; accent-color: var(--brand); height: 6px; }
.range-row .input { width: 92px; text-align: center; font-weight: 700; }
.range-value { min-width: 54px; font-size: 22px; font-weight: 760; color: var(--brand-600); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Dialogs ---------- */
dialog.modal {
  width: min(580px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  padding: 0; border: 0; border-radius: 18px; background: #fff; color: var(--text);
  box-shadow: var(--shadow-lg); overflow: auto;
}
dialog.modal[open] { animation: modal-in 0.18s ease-out; }
dialog.modal::backdrop { background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(3px); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px 4px; }
.modal-title { font-size: 18px; font-weight: 720; }
.modal-help { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.modal-close { margin-left: auto; }
.modal-body { padding: 18px 24px 6px; }
.modal-foot {
  display: flex; gap: 10px; justify-content: flex-end; padding: 16px 24px;
  background: var(--surface-2); border-top: 1px solid var(--border);
}
.modal-context {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--muted);
}

/* ---------- Status band: the journey track and what happens next ---------- */
/* Owner colours match the Help page's role tags: department teal, sales rep blue, client magenta.
   Each step draws the half-lines either side of its dot; a reached stretch takes the colour of whoever had the job,
   and the stretch after the current step is dashed while the job is still there. */
.own-dept { --own: var(--own-dept); }
.own-sales { --own: var(--own-sales); }
.own-client { --own: var(--own-client); }
.own-admin { --own: var(--own-admin); }
.jr { list-style: none; margin: 0; padding: 30px 14px 6px; display: grid; grid-template-columns: repeat(var(--steps, 8), minmax(76px, 1fr)); overflow-x: auto; }
.jr-step { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; padding: 0 4px; text-align: center; }
.jr-step::before, .jr-step::after { content: ""; position: absolute; top: 7px; width: 50%; height: 2px; background: #e3e8f0; }
.jr-step::before { left: 0; }
.jr-step::after { right: 0; }
.jr-step:first-child::before, .jr-step:last-child::after { display: none; }
.jr-step.in-dept::before, .jr-step.out-dept::after { background: var(--own-dept); }
.jr-step.in-sales::before, .jr-step.out-sales::after { background: var(--own-sales); }
.jr-step.in-client::before, .jr-step.out-client::after { background: var(--own-client); }
.jr-step.is-current.out-dept::after { background: repeating-linear-gradient(90deg, var(--own-dept) 0 5px, transparent 5px 9px); }
.jr-step.is-current.out-sales::after { background: repeating-linear-gradient(90deg, var(--own-sales) 0 5px, transparent 5px 9px); }
.jr-step.is-current.out-client::after { background: repeating-linear-gradient(90deg, var(--own-client) 0 5px, transparent 5px 9px); }
.jr-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 16px; height: 16px; margin-bottom: 8px; color: #64748b; }
.jr-dot::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 2px #cbd3df, 0 0 0 4px var(--surface); }
.jr-step.is-done .jr-dot::before { background: var(--text); box-shadow: 0 0 0 4px var(--surface); }
.jr-step.is-current .jr-dot::before { width: 16px; height: 16px; box-shadow: inset 0 0 0 5px var(--brand), 0 0 0 5px rgba(26, 114, 168, 0.14); }
.jr-step.is-stopped .jr-dot::before { display: none; }
.jr-step.is-folded .jr-dot::before { box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px var(--text), 0 0 0 7px var(--surface); }  /* several rounds in one step */
.jr-dot .icon { width: 15px; height: 15px; }
.jr-label { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--faint); }
.jr-step.is-done .jr-label, .jr-step.is-stopped .jr-label { color: var(--text-2); }
.jr-step.is-current .jr-label { font-weight: 700; color: var(--brand-700); }
.jr-date { min-height: 16px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.jr-step.is-current .jr-date { font-weight: 600; color: var(--brand-700); }
.jr-step.is-upcoming .jr-date { color: var(--faint); }
.jr-gap { position: absolute; top: -17px; left: 100%; transform: translateX(-50%); font-size: 11.5px; font-weight: 650; color: var(--own); white-space: nowrap; }
.jr-key { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 6px; padding: 4px 22px 14px; font-size: 12px; color: var(--muted); }
.jr-key i { display: inline-block; width: 14px; height: 3px; margin-left: 8px; border-radius: 2px; background: var(--own); }

/* Under the track: the figures that matter at this stage, then the buttons; the band's edge takes the colour of who
   has the job, as on the track above. */
.nx {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 36px;
  padding: 18px 22px 20px 26px; border-top: 1px solid var(--border);
}
.nx::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--own, transparent); }
.nx.is-done { --own: #16a34a; }
.nx.is-closed { --own: #94a3b8; }
.nx-facts { display: flex; margin: 0; }
.nx-fact { display: grid; align-content: start; gap: 3px; min-width: 7.5rem; padding: 2px 22px; border-left: 1px solid var(--border); }
.nx-fact:first-child { padding-left: 0; border-left: 0; }
.nx-fact dt { font-size: 12px; font-weight: 500; color: var(--muted); }
.nx-fact dd { display: grid; gap: 4px; margin: 0; }
.nx-fact b { font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-fact small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.nx-fact.is-warn small { color: #b45309; font-weight: 600; }
.nx-fact.is-late small, .nx-fact.is-late b { color: #b91c1c; }
.nx-fact.is-late small { font-weight: 600; }
.nx-fact.is-good small { color: #15803d; }
.nx-fact-link { justify-self: start; font-size: 12.5px; }
.nx-meter { display: block; width: 72px; height: 4px; border-radius: 999px; background: #e8edf5; overflow: hidden; }
.nx-meter span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.nx-view { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.nx-view .icon { width: 15px; height: 15px; flex: none; }
.nx-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; grid-column: -2 / -1; }
/* the hours against the estimate (those who see hours): between the figures and the buttons */
.nx.has-hours { grid-template-columns: auto minmax(0, 1fr) auto; }
.nx.has-hours .nx-view { grid-column: 1 / -1; }
.nx-hours { grid-column: 2; min-width: 0; max-width: 820px; }
.nx-hours.is-alone { grid-column: 1 / 3; }
.nx-facts + .nx-hours { padding-left: 30px; border-left: 1px solid var(--border); }
/* The quotation desk, in the band while the department prepares and checks the quotation: the file being checked, then
   the seats: who prepares it (presales) and the team that will do the work. An empty seat is drawn dashed, waiting to be
   filled; a filled one is solid, its mark in the department's colour. */
.desk { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; min-width: 0; }
.desk > .nx-facts { align-self: center; padding-left: 8px; }
.seat, .desk-doc {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.seat { flex: 1 1 400px; max-width: 540px; }
.desk-doc { flex: 1.3 1 460px; max-width: 660px; }
.nx.has-desk .nx-view { grid-column: 1 / -1; }  /* a team's note above the desk, not beside it */
.seat-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: #e3f5f2; color: var(--own-dept); }
.seat-mark .icon { width: 18px; height: 18px; }
.seat.is-open { border: 1.5px dashed #c9d2df; background: transparent; }
.seat.is-open .seat-mark { border: 1.5px dashed #c9d2df; background: transparent; color: var(--faint); }
.desk-body { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.desk-body > * { max-width: 100%; }
.desk-role { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 12px; font-weight: 650; color: var(--text-2); white-space: nowrap; }
.desk-role span { overflow: hidden; text-overflow: ellipsis; }
.desk-role span { font-weight: 500; color: var(--muted); }
.seat-who {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--display); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--text);
}
.seat-who span { margin-left: 8px; font-family: var(--font); font-size: 12.5px; font-weight: 550; letter-spacing: 0; color: var(--muted); }
.seat-who.is-none { font-weight: 550; color: var(--muted); }
.seat-sub { font-size: 12px; color: var(--muted); }
.seat-sub.is-warn { color: #b45309; font-weight: 600; }
.seat-sub.is-good { color: #15803d; font-weight: 600; }
.seat-note {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 4px; padding-left: 9px; border-left: 2px solid #9fd9d1; font-size: 12.5px; line-height: 1.45; color: var(--text-2);
}
.seat-sub.is-warn + .seat-note { border-left-color: #fbbf77; }
.desk-btns { display: flex; gap: 8px; }
/* the file being checked: a sheet with a folded corner in its type's colour, its name (which opens it), size and time */
.doc-tile {
  position: relative; display: grid; place-items: end center; width: 40px; height: 50px; padding-bottom: 8px;
  border-radius: 6px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  font-size: 10.5px; font-weight: 750; letter-spacing: 0.03em; color: #475569; background: #eef2f7;
}
.doc-tile::after { content: ""; position: absolute; top: 0; right: 0; width: 13px; height: 13px; border-bottom-left-radius: 3px; background: currentColor; opacity: 0.28; }
.doc-tile.is-pdf { color: #b91c1c; background: #fdeaea; }
.doc-tile.is-doc, .doc-tile.is-docx { color: #1d4ed8; background: #e6eefd; }
.doc-tile.is-xls, .doc-tile.is-xlsx, .doc-tile.is-csv { color: #15803d; background: #e3f5e9; }
.doc-tile.is-ppt, .doc-tile.is-pptx { color: #c2410c; background: #fdeee2; }
.doc-tile.is-png, .doc-tile.is-jpg, .doc-tile.is-jpeg { color: #7c3aed; background: #f0e9fe; }
.doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--brand-700); }
.doc-name:hover { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
.doc-replace { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12.5px; }
.doc-replace .icon { width: 14px; height: 14px; }
/* a laptop: the buttons go under the desk, so its seats keep room for their words */
@container (max-width: 1500px) {
  .nx.has-desk { grid-template-columns: minmax(0, 1fr); }
  .nx.has-desk .nx-actions { grid-column: auto; justify-content: flex-start; }
}
@container (max-width: 600px) {
  .seat, .desk-doc { flex-basis: 100%; max-width: none; }
  .desk-doc { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; }
  .desk-doc .desk-btns { grid-column: 1 / -1; }
}
/* a laptop: still the figures, the hours and the buttons side by side, the buttons two by two at the right */
@container (max-width: 1500px) {
  .nx.has-hours { column-gap: 28px; }
  .nx.has-hours .nx-facts + .nx-hours { padding-left: 28px; }
  .nx.has-hours .nx-actions { display: grid; grid-template-columns: repeat(2, auto); }
}
/* not enough room for all three: the buttons go underneath, starting at the left */
@container (max-width: 1020px) {
  .nx.has-hours { grid-template-columns: auto minmax(0, 1fr); }
  .nx.has-hours .nx-actions { display: flex; grid-column: 1 / -1; justify-content: flex-start; }
}
/* not enough room side by side: everything in one column, the buttons last */
@container (max-width: 1000px) {
  .nx, .nx.has-hours { grid-template-columns: minmax(0, 1fr); }
  .nx-actions, .nx.has-hours .nx-actions { grid-column: auto; justify-content: flex-start; }
  .nx-hours, .nx-hours.is-alone { grid-column: auto; max-width: none; }
  .nx-facts + .nx-hours { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--border); }
  .nx-facts { flex-wrap: wrap; row-gap: 12px; }
}
@container (max-width: 600px) {
  .nx-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
  .nx-fact, .nx-fact:first-child { padding: 0; border-left: 0; }
}

/* Narrow cards: the track turns vertical, one step per row, with the time spent beside the line. */
@container (max-width: 760px) {
  .nx { grid-template-columns: minmax(0, 1fr); }
  .nx-actions { justify-content: flex-start; }
  .jr { grid-template-columns: minmax(0, 1fr); padding: 18px 20px 4px; }
  .jr-step { grid-template-columns: 16px minmax(0, 1fr) auto; justify-items: start; align-items: start; column-gap: 12px; padding: 0 0 14px; text-align: left; }
  .jr-step::before, .jr-step::after { left: 7px; right: auto; width: 2px; height: auto; }
  .jr-step::before { top: 0; height: 8px; }
  .jr-step::after { top: 8px; bottom: 0; }
  .jr-step:first-child::before, .jr-step:last-child::after { display: none; }
  .jr-step.is-current.out-dept::after { background: repeating-linear-gradient(180deg, var(--own-dept) 0 5px, transparent 5px 9px); }
  .jr-step.is-current.out-sales::after { background: repeating-linear-gradient(180deg, var(--own-sales) 0 5px, transparent 5px 9px); }
  .jr-step.is-current.out-client::after { background: repeating-linear-gradient(180deg, var(--own-client) 0 5px, transparent 5px 9px); }
  .jr-dot { grid-row: 1 / span 2; margin: 0; }
  .jr-label { grid-column: 2; }
  .jr-date { grid-column: 3; grid-row: 1; text-align: right; }
  .jr-gap { position: static; grid-column: 2; transform: none; }
  .jr-key { justify-content: flex-start; padding: 0 20px 14px; }
}

/* ---------- Detail lists ---------- */
.facts { display: grid; gap: 0; }
.fact { display: grid; grid-template-columns: 116px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--border); align-items: center; }
.fact:last-child { border-bottom: 0; }
.fact dt { font-size: 12.5px; color: var(--muted); font-weight: 550; display: flex; align-items: center; gap: 7px; }
.fact dt .icon { width: 15px; height: 15px; color: var(--faint); }
.fact dd { margin: 0; font-size: 13.5px; color: var(--text); font-weight: 550; min-width: 0; overflow-wrap: anywhere; }
.fact dd .chip { white-space: normal; }
/* Project Details: plain label/value pairs in three groups (who, dates, what went out). */
.kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px 14px; margin: 0; padding: 14px var(--pad-x); }
.kv + .kv { border-top: 1px solid #eef1f6; }
.kv dt { padding-top: 1px; font-size: 12.5px; color: var(--muted); }
.kv dd { margin: 0; min-width: 0; font-size: 13.5px; font-weight: 550; color: var(--text); overflow-wrap: anywhere; }
.kv-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--muted); }
.kv-sub.is-warn { color: #b45309; }
.kv-sub.is-late { color: #b91c1c; }
.kv-none { font-weight: 500; color: var(--faint); }
.kv-warn { font-weight: 620; color: #b45309; }
.prose { white-space: pre-line; color: var(--text-2); font-size: 14px; line-height: 1.65; max-width: 80ch; }

/* ---------- Timeline (client contact log) ---------- */
.timeline { padding: 6px 0 0; }
.tl-item { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
.tl-item::before { content: ""; position: absolute; left: 18px; top: 40px; bottom: 2px; width: 2px; background: #edf0f5; border-radius: 2px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item:last-child::before { display: none; }
.tl-icon {
  width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center;
  background: var(--c-bg); color: var(--c-fg); box-shadow: 0 0 0 4px #fff, inset 0 0 0 1px var(--c-line);
}
.tl-icon .icon { width: 17px; height: 17px; }
.tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 2px; }
.tl-title { font-weight: 680; font-size: 14px; color: var(--text); }
.tl-time { font-size: 12px; color: var(--faint); white-space: nowrap; }
.tl-meta { margin-top: 3px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tl-body {
  margin-top: 9px; padding: 10px 13px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--text-2); font-size: 13.5px; white-space: pre-line; overflow-wrap: anywhere;
}
.tl-body.is-feedback { background: #fff7ed; border-color: #fed7aa; color: #7c2d12; }
.tl-transition { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.tl-transition .icon { width: 14px; height: 14px; color: var(--faint); }
.tl-progress { display: flex; align-items: center; gap: 10px; margin-top: 9px; max-width: 320px; }
.tl-progress .progress { flex: 1; }
.tl-progress b { font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- Work hours: the estimate and a few figures, then a weekly timesheet ---------- */
/* the estimate: the fill is the hours used; the dark marker is where the work done stands, in hours. Fill past the
   marker is hours not yet matched by work (light teal, amber once it runs ahead); past the estimate it turns red. */
/* the hours against the estimate (in the band under the track): two bars on one scale, the hours used over the work
   done; the gap between them is whether the hours keep pace with the work */
.hb { display: grid; gap: 10px; }
.hb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; }
.hb-total { margin: 0; font-size: 13.5px; color: var(--muted); }
.hb-total b { margin-right: 3px; font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.hb-total .link-btn { margin-left: 4px; }
.hb-left {
  display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 3px 11px 3px 9px; border-radius: 999px;
  background: #f0fdfa; box-shadow: inset 0 0 0 1px #99f6e4; font-size: 13px; color: #0f766e; white-space: nowrap;
}
.hb-left .icon { width: 15px; height: 15px; flex: none; }
.hb-left b { font-family: var(--display); font-size: 15px; font-weight: 600; color: inherit; font-variant-numeric: tabular-nums; }
.hb-left.is-over { background: #fef2f2; box-shadow: inset 0 0 0 1px #fecaca; color: #b91c1c; }
.hb-left.is-under { background: #f0fdf4; box-shadow: inset 0 0 0 1px #bbf7d0; color: #15803d; }
.hb-left.is-ahead { background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; color: #b45309; }
.hb-rows { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.25rem; align-items: center; gap: 9px 14px; }
.hb-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.hb-track { position: relative; display: flex; height: 10px; border-radius: 999px; background: #e8edf5; }
.hb-seg { height: 100%; }
.hb-seg:first-child { border-radius: 999px 0 0 999px; }
.hb-seg.is-covered { background: var(--own-dept); }
.hb-seg.is-beyond { background: #5eead4; }
.hb.is-ahead .hb-seg.is-beyond, .hb.is-over .hb-seg.is-beyond { background: #f59e0b; }
.hb-seg.is-over { background: #dc2626; border-radius: 0 999px 999px 0; }
.hb-seg.is-work { border-radius: 999px; background: #2563eb; }
.hb.is-under .hb-track.is-hours { background: #dcfce7; }  /* the hours not needed, in light green */
.hb-estimate { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: #7f1d1d; opacity: 0.6; }
.hb-value { font-family: var(--display); font-size: 15px; font-weight: 600; text-align: right; color: var(--own-dept); font-variant-numeric: tabular-nums; }
.hb-value.is-work { color: #1d4ed8; }
.hb.is-ahead .hb-value:not(.is-work) { color: #b45309; }
.hb.is-over .hb-value:not(.is-work) { color: #b91c1c; }
.hb-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.hb-note .icon { width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; }
.hb-note b { font-weight: 650; }
.hb-note.is-under { color: #15803d; }
.hb-note.is-on { color: #0f766e; }
.hb-note.is-ahead { color: #b45309; }
.hb-note.is-over { color: #b91c1c; }
/* the top of the card, one strip of columns on one line: today's three figures (fixed width) | the hours for the
   progress, a column per week (filling the rest). Every column reads the same way down: its label, the big number,
   then the detail at the bottom, so the numbers and the details line up across the strip. */
.hrs-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
.hrs-top.is-alone { grid-template-columns: minmax(0, 1fr); }
.hrs-zone-head { margin: 0 0 10px; font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.hrs-day { display: flex; flex-direction: column; min-width: 0; padding: 16px 0 16px var(--pad-x); }
.hrs-top.is-alone .hrs-day { padding-right: var(--pad-x); }
.hrs-stats {
  flex: 1; display: grid; grid-template-columns: repeat(2, 11.5rem); margin: 0;
  border: 1px solid #e6ebf2; border-radius: 12px; overflow: hidden;
}
.hrs-top.is-alone .hrs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hrs-stat {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 26px 1fr; align-items: center;
  gap: 8px 9px; padding: 12px 14px; background: var(--surface);
}
.hrs-stat + .hrs-stat { border-left: 1px solid #eef1f6; }
.hrs-stat-icon {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-fg);
}
.hrs-stat-icon .icon { width: 15px; height: 15px; }
.hrs-stat dt { font-size: 12px; font-weight: 600; color: var(--c-fg); }
.hrs-stat dd { grid-column: 1 / -1; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; margin: 0; }
.hrs-stat b { font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.hrs-stat small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.hrs-stat.is-warn { background: #fffbeb; }
.hrs-stat.is-warn small { color: #b45309; font-weight: 600; }

/* the timesheet: a row per week, a small card per day (deeper teal on busier days), the week's total on the right */
.ts { --ts-cols: 4.75rem repeat(7, minmax(0, 1fr)) 6.5rem; padding: 4px var(--pad-x) 16px; border-top: 1px solid #eef1f6; }
.ts-row { display: grid; grid-template-columns: var(--ts-cols); gap: 6px; }
.ts-head { position: sticky; top: var(--topbar-h); z-index: 2; padding: 10px 0 6px; background: var(--surface); font-size: 12px; font-weight: 600; color: var(--muted); }
.ts-head span:not(:first-child) { padding-left: 9px; }
.ts-head .is-num { padding: 0 2px 0 0; text-align: right; }
.ts-week { margin-top: 6px; }
.ts-wk { display: grid; align-content: start; gap: 1px; padding: 9px 0 0; font-size: 13px; }
.ts-wk b { font-weight: 650; color: var(--text); white-space: nowrap; }
.ts-wk span { font-size: 11.5px; color: var(--muted); }
.ts-day { display: grid; align-content: start; gap: 3px; min-width: 0; min-height: 74px; padding: 7px 9px 8px; border: 1px solid #e9edf3; border-radius: 9px; background: var(--surface); }
.ts-day.is-weekend:not(.has-work) { background: #f7f9fb; }
.ts-day.is-off:not(.has-work) { border-style: dashed; background: none; }
.ts-day.has-work { border-color: rgba(13, 148, 136, 0.28); background: rgba(13, 148, 136, var(--heat, 0.1)); }
.ts-day.is-today { box-shadow: 0 0 0 2px var(--brand); }
.ts-date { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ts-day.is-today .ts-date { font-weight: 650; color: var(--brand-700); }
/* a day card: per entry, the people working and their hours each; the hours turn amber on a long day, grey on a short one */
.ts-entries { display: grid; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; }
.ts-entry { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 8px; background: none; font: inherit; color: inherit; text-align: left; }
.ts-entries li + li { padding-top: 5px; border-top: 1px dashed rgba(15, 118, 110, 0.25); }
.ts-entry.is-editable { cursor: pointer; }
.ts-entry.is-editable:hover .ts-people, .ts-entry.is-editable:hover .ts-hours { box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.45); }
.ts-entry.is-editable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ts-has-note { width: 6px; height: 6px; border-radius: 999px; background: #0f766e; opacity: 0.55; }  /* this entry has a note */
.ts-people, .ts-hours { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 7px 3px; border-radius: 7px; white-space: nowrap; }
.ts-people { background: rgba(255, 255, 255, 0.72); color: var(--text); }
.ts-people .icon, .ts-hours .icon { align-self: center; width: 13px; height: 13px; flex: none; }
.ts-people .icon { color: #0f766e; }
.ts-people b, .ts-hours b { font-family: var(--display); font-size: 17px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ts-hours { font-size: 12px; color: var(--text-2); }
.ts-hours .icon { color: var(--muted); }
.ts-hours b { margin-right: 1px; color: var(--text); }
.ts-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.ts-key .icon { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; color: #0f766e; }
.ts-key-tip { margin-left: auto; color: var(--faint); }
.ts-sum { display: grid; align-content: start; justify-items: end; gap: 1px; padding: 8px 2px 0 0; text-align: right; }
.ts-sum b { padding: 2px 9px; border-radius: 999px; background: #ccfbf1; font-family: var(--display); font-size: 15px; font-weight: 600; color: #0f766e; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-sum span { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ts-sum .ts-crew { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; font-weight: 650; color: #0f766e; }
.ts-crew .icon { width: 13px; height: 13px; }
.ts-gap { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 12px; color: var(--faint); }
.ts-gap::before, .ts-gap::after { content: ""; flex: 1; border-top: 1px dashed #dfe5ee; }
.ts-week.is-flash .ts-day { animation: ts-flash 1.6s ease-out; }
@keyframes ts-flash { from { box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.45); } to { box-shadow: 0 0 0 3px rgba(13, 148, 136, 0); } }
/* months: a heading row with the month's hours, days worked and a strip of its days; older months of a long job fold */
.ts-month { margin-top: 8px; }
.ts-month + .ts-month { border-top: 1px solid #eef1f6; padding-top: 4px; }
.ts-mhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 8px 2px; cursor: pointer; list-style: none; border-radius: 8px; }
.ts-mhead::-webkit-details-marker { display: none; }
.ts-mhead:hover { background: var(--surface-2); }
.ts-mhead:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ts-mname { min-width: 9.5rem; font-size: 14px; font-weight: 650; color: var(--text); }
.ts-mfig { font-size: 12.5px; color: var(--muted); }
.ts-mfig b { font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ts-strip { display: flex; align-items: flex-end; gap: 2px; margin-left: auto; }
.ts-strip i { width: 5px; height: 14px; border-radius: 1.5px; background: #eef2f6; }
.ts-strip i[style] { background: rgba(13, 148, 136, calc(var(--heat) * 3)); }
.ts-mtoggle { display: grid; place-items: center; color: var(--faint); transition: transform 0.15s; }
.ts-mtoggle .icon { width: 16px; height: 16px; }
.ts-month[open] .ts-mtoggle { transform: rotate(180deg); }
.ts:not(:has(.ts-month[open])) .ts-head { display: none; }  /* the weekday headings only while a month is open */
.ts-month:not([open]) .ts-mhead { padding-bottom: 8px; }
/* hours for the progress: a column per week, all the same width and filling the row, newest on the right (many weeks
   scroll sideways, opening at the newest). The top edge is the week's pace: teal as usual, green when each 1% took
   fewer hours than usual, amber when it took more or no progress was posted; the bar is the week's hours against the
   busiest week shown. */
.pg { display: flex; flex-direction: column; min-width: 0; padding: 16px var(--pad-x) 16px 14px; }
.pg-steps {
  flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(8.5rem, 1fr); margin: 0; padding: 0;
  list-style: none; border: 1px solid #e6ebf2; border-radius: 12px; overflow-x: auto; overscroll-behavior-x: contain;
}
.pg-step { --tone: #14b8a6; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; box-shadow: inset 0 3px 0 var(--tone); background: var(--surface); }
.pg-step + .pg-step { border-left: 1px solid #eef1f6; }
.pg-step.is-quick { --tone: #22c55e; background: #f6fdf8; }
.pg-step.is-slow { --tone: #f59e0b; background: #fffcf2; }
.pg-step.is-flat { --tone: #f59e0b; }
.pg-step.is-down { --tone: #94a3b8; }
.pg-step.is-round { --tone: var(--c-dot); background: var(--c-bg); }
.pg-date { display: flex; align-items: center; min-height: 26px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.pg-step.is-round .pg-date { font-weight: 650; color: var(--c-fg); }
.pg-gain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.pg-gain small { font-family: var(--font, inherit); font-size: 12px; font-weight: 500; color: var(--muted); }
.pg-step.is-round .pg-gain { font-size: 15px; }
.pg-bar { display: block; height: 6px; margin-top: auto; border-radius: 999px; background: #eef2f6; overflow: hidden; }
.pg-bar i { display: block; height: 100%; border-radius: inherit; background: var(--tone); }
.pg-hours { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: -4px; font-size: 12px; color: var(--muted); }
.pg-step.is-round .pg-hours { margin-top: auto; }  /* no bar: the detail still sits at the bottom */
.pg-hours b { font-size: 13.5px; font-weight: 650; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pg-step.is-quick .pg-hours small { font-weight: 600; color: #15803d; }
.pg-step.is-slow .pg-hours small, .pg-step.is-flat .pg-hours small { font-weight: 600; color: #b45309; }
/* the whole job at a glance (long jobs): a small square per day, a column per week, oldest on the left */
.ov { padding: 14px var(--pad-x) 8px; border-top: 1px solid #eef1f6; }
.ov-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 4px; }
.ov-key { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 11.5px; color: var(--muted); }
.ov-key i { display: block; width: 11px; height: 11px; border-radius: 2px; }
.ov-key i:first-of-type { margin-left: 4px; }
.ov-key i:last-of-type { margin-right: 4px; }
.ov-tip { margin-left: 14px; color: var(--faint); }
/* the squares grow to fill the card's width (12 to 20 px); when they can't fit, the band scrolls, opening at the newest */
.ov-scroll { overflow-x: auto; padding-bottom: 6px; }
.ov-grid {
  --sq: clamp(12px, calc((100cqw - 2 * var(--pad-x) - 2rem - var(--weeks) * 3px) / var(--weeks)), 20px);
  display: grid; grid-template-columns: 2rem repeat(var(--weeks), var(--sq)); column-gap: 3px; width: max-content; padding-top: 18px;
}
.ov-days { display: grid; grid-template-rows: repeat(7, var(--sq)); row-gap: 3px; font-size: 10px; align-items: center; color: var(--faint); }
.ov-col { position: relative; display: grid; grid-template-rows: repeat(7, var(--sq)); row-gap: 3px; border-radius: 3px; }
.ov-col i, .ov-key i { background: #eef2f6; }
.ov-col i { display: block; width: var(--sq); height: var(--sq); border-radius: 3px; }
.ov-col i.l1, .ov-key i.l1 { background: #ccfbf1; }
.ov-col i.l2, .ov-key i.l2 { background: #5eead4; }
.ov-col i.l3, .ov-key i.l3 { background: #14b8a6; }
.ov-col i.l4, .ov-key i.l4 { background: #0f766e; }
.ov-col i.is-off { background: none; box-shadow: inset 0 0 0 1px #e6ebf2; }
.ov-col i.is-today { box-shadow: 0 0 0 2px var(--brand); }
.ov-col:hover i, .ov-col:focus-visible i { outline: 1px solid rgba(15, 23, 42, 0.35); outline-offset: 0; }
.ov-col:focus-visible { outline: none; }
.ov-month { position: absolute; bottom: 100%; left: 0; padding-bottom: 4px; font-size: 11px; color: var(--muted); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ts-mtoggle { transition: none; } .ts-week.is-flash .ts-day { animation: none; } }
.hrs-empty { display: flex; align-items: flex-start; gap: 12px; padding: 16px var(--pad-x) 20px; border-top: 1px solid #eef1f6; font-size: 13px; color: var(--muted); }
.hrs-empty .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--faint); }
.hrs-empty p { margin: 0; }
.hrs-empty b { color: var(--text-2); }
.work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal-foot .modal-foot-start { margin-right: auto; }
.manhours-total { margin: -4px 0 14px; font-size: 13.5px; color: var(--text-2); min-height: 20px; }
.manhours-total b { font-family: var(--display); font-size: 18px; color: var(--text); }
/* a narrower card: today's figures across the full width, the weeks under them */
@container (max-width: 1000px) {
  .hrs-top { grid-template-columns: minmax(0, 1fr); }
  .hrs-day, .hrs-top.is-alone .hrs-day { padding: 16px var(--pad-x) 0; }
  .pg { padding: 16px var(--pad-x); }
  .hrs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 900px) {
  .ts { --ts-cols: 3.75rem repeat(7, minmax(0, 1fr)) 5.5rem; }
  .ts-row { gap: 4px; }
  .ts-day { padding: 6px 6px 7px; }
  .ts-people b, .ts-hours b { font-size: 15px; }
  .ts-people, .ts-hours { padding: 1px 5px 2px; }
  .ts-key-tip { display: none; }
}
/* a phone: each week is a heading with its total, then its worked days as cards two by two */
@container (max-width: 640px) {
  .ts-head { display: none; }
  .ts-week { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
  .ts-wk { grid-column: 1; grid-row: 1; padding: 0; }
  .ts-wk b::before { content: "Week of "; font-weight: 500; color: var(--muted); }
  .ts-sum { grid-column: 2; grid-row: 1; padding: 0; }
  .ts-day:not(.has-work) { display: none; }
  .ts-strip, .ov-tip { display: none; }
  .hrs-stats, .hrs-top.is-alone .hrs-stats { grid-template-columns: minmax(0, 1fr); }
  .hrs-stat { grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto; gap: 2px 12px; padding: 10px 14px; }
  .hrs-stat-icon { grid-row: 1 / span 2; }
  .hrs-stat dd { grid-column: 2; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 0 8px; }
  .hrs-stat + .hrs-stat { border-left: 0; border-top: 1px solid #eef1f6; }
  .pg-steps { grid-auto-columns: minmax(8rem, 45%); }
    }

/* ---------- Notifications, read job by job ---------- */
/* Filters by kind on the left (how many unread in each); the list on the right by day, and in a day one block per job:
   the job (code, title, client, where it stands and whose turn it is), then what happened to it, newest first, hanging
   off a line. Unread ones are bold with a blue dot on the line; read ones fade. Day headings stay in view. */
.nf { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--gap); align-items: start; }
.nf-side { position: sticky; top: calc(var(--topbar-h) + 16px); display: grid; gap: 14px; }
.nf-filters { display: grid; gap: 2px; padding: 8px; }
.nf-filter {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 9px; font-size: 13.5px; font-weight: 560; color: var(--text-2); text-decoration: none;
}
.nf-filter .icon { width: 16px; height: 16px; color: var(--muted); }
.nf-filter:hover { background: var(--surface-2); color: var(--text); }
.nf-filter:focus-visible { outline: none; box-shadow: var(--ring); }
.nf-filter.is-on { background: var(--brand-50); color: var(--brand-700); font-weight: 650; }
.nf-filter.is-on .icon { color: var(--brand-600); }
.nf-filter-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-filter-new {
  padding: 1px 7px; border-radius: 999px; background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.nf-filter.tone-warn .nf-filter-new { background: #d97706; }
.nf-filter.tone-warn .icon { color: #d97706; }
.nf-filter-count { grid-column: 4; min-width: 2.5ch; font-size: 12px; text-align: right; color: var(--faint); font-variant-numeric: tabular-nums; }
.nf-filters-sep { height: 1px; margin: 6px 6px; background: var(--border); }
.nf-sound { display: grid; justify-items: start; gap: 6px; padding: 14px 16px; }
.nf-sound .sound-toggle { font-size: 13.5px; font-weight: 650; color: var(--text-2); }
.nf-sound .sound-toggle .icon { width: 16px; height: 16px; }
.nf-sound p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.nf-feed { min-width: 0; }
.nf-day + .nf-day { border-top: 1px solid var(--border); }
.nf-day-head {
  position: sticky; top: var(--topbar-h); z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  margin: 0; padding: 11px var(--pad-x); border-bottom: 1px solid #e8edf3; background: rgba(248, 250, 252, 0.96);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-weight: 400;
}
.nf-day:first-child .nf-day-head { border-radius: var(--radius) var(--radius) 0 0; }
.nf-day-name { font-family: var(--display); font-size: 16px; font-weight: 650; color: var(--text); }
.nf-day-date { font-size: 13px; color: var(--muted); }
.nf-day-sum { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.nf-thread { padding: 14px var(--pad-x) 12px; }
.nf-thread + .nf-thread { border-top: 1px solid #edf0f5; }
.nf-job { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: 8px; }
.nf-job-name { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; }
.nf-job-name .code { color: var(--muted); }
.nf-job-name b { font-size: 14.5px; font-weight: 680; }
a.nf-job-name:hover b { color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; }
a.nf-job-name:focus-visible { outline: none; border-radius: 6px; box-shadow: var(--ring); }
.nf-thread:not(.has-new) .nf-job-name b { color: var(--text-2); font-weight: 620; }
.nf-job-meta { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13px; color: var(--muted); }
.nf-job-worker { padding-left: 10px; border-left: 1px solid var(--border-strong); }
.nf-job-now { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.nf-turn { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; line-height: 18px; white-space: nowrap; }
.nf-turn.turn-you { background: var(--brand); color: #fff; }
.nf-turn.turn-dept { background: #f0fdfa; color: #0f766e; box-shadow: inset 0 0 0 1px #ccfbf1; }
.nf-turn.turn-sales { background: #eff6ff; color: #1d4ed8; box-shadow: inset 0 0 0 1px #dbeafe; }
.nf-turn.turn-client { background: #fdf4ff; color: #a21caf; box-shadow: inset 0 0 0 1px #fae8ff; }
.nf-gone { font-size: 12px; color: var(--faint); }
/* what happened, hanging off the job's line: unread with a blue dot on the line, read ones a grey dot */
.nf-events { margin: 0 0 0 7px; padding: 0; border-left: 2px solid #e8edf3; list-style: none; }
.nf-thread.is-general .nf-events { margin-top: 2px; }
.nf-event {
  position: relative; display: grid; grid-template-columns: 2.75rem minmax(9rem, 15rem) minmax(0, 1fr); align-items: baseline;
  column-gap: 14px; padding: 6px 12px 6px 18px; border-radius: 0 8px 8px 0; color: var(--muted); text-decoration: none;
}
.nf-event::before {
  content: ""; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 999px;
  background: #d4dae5; box-shadow: 0 0 0 3px var(--surface);
}
.nf-event.is-new::before { background: var(--brand); }
.nf-event:hover { background: var(--surface-2); color: var(--text-2); }
.nf-event:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
.nf-event time { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.nf-what { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; font-weight: 560; color: var(--text-2); }
.nf-what .icon { width: 15px; height: 15px; flex: none; color: var(--c-fg); }
.nf-event.lvl-info .nf-what .icon { color: var(--brand-600); }
.nf-event.lvl-warning .nf-what { color: #b45309; }
.nf-event.lvl-danger .nf-what { color: #b91c1c; }
.nf-event.is-new time { font-weight: 600; color: var(--text-2); }
.nf-event.is-new .nf-what { font-weight: 700; color: var(--text); }
.nf-event.is-new.lvl-warning .nf-what { color: #92400e; }
.nf-event.is-new.lvl-danger .nf-what { color: #991b1b; }
.nf-msg {
  display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: 13px; line-height: 1.5; overflow-wrap: anywhere;
}
.nf-event.is-new .nf-msg { color: var(--text-2); }
.nf-feed > .pagination, .nf-feed > nav { border-top: 1px solid var(--border); }
/* narrower: the filters become a row of tabs above the list */
@container content (max-width: 1080px) {
  .nf { grid-template-columns: minmax(0, 1fr); }
  .nf-side { position: static; }
  .nf-filters { display: flex; overflow-x: auto; scrollbar-width: none; padding: 6px; }
  .nf-filters::-webkit-scrollbar { display: none; }
  .nf-filter { display: inline-flex; flex: none; gap: 8px; }
  .nf-filters-sep { width: 1px; height: auto; margin: 6px 4px; }
  .nf-sound { display: none; }
}
/* a phone: the time and what happened on one line, the detail under them */
@container content (max-width: 640px) {
  .nf-event { grid-template-columns: 2.75rem minmax(0, 1fr); row-gap: 2px; }
  .nf-msg { grid-column: 2; }
  .nf-job-meta { display: grid; gap: 1px; }
  .nf-job-worker { padding-left: 0; border-left: 0; }
  .nf-job-now { margin-left: 0; }
  .nf-day-sum { margin-left: 0; flex-basis: 100%; }
}

/* the bell menu: the latest notifications, those in a row about one job under its heading */
.dropdown#notif-menu { width: 440px; }
.dropdown-list.bell-list { max-height: min(460px, calc(100vh - 170px)); }
.bell-group { padding: 4px 0 6px; }
.bell-group + .bell-group { border-top: 1px solid var(--border); }
.bell-job { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 8px 16px 2px; font-size: 12.5px; color: var(--muted); }
.bell-job .code { flex: none; font-size: 12px; color: var(--text-2); }
.bell-job-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell-item {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 7px 16px;
  color: var(--muted); text-decoration: none;
}
.bell-item:hover { background: var(--surface-2); color: var(--text-2); }
.bell-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
.bell-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--c-bg); color: var(--c-fg); }
.bell-icon .icon { width: 14px; height: 14px; }
.bell-text { display: grid; min-width: 0; padding-top: 1px; }
.bell-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.bell-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.bell-item.is-new .bell-text b { font-weight: 700; color: var(--text); }
.bell-item.is-new .bell-text span { color: var(--text-2); }
.bell-time { display: inline-flex; align-items: center; gap: 6px; padding-top: 3px; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.bell-item.is-new .bell-time::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--brand); }

/* ---------- A client's contact history: a ledger like a project's timeline ---------- */
/* Each contact: what was said, who logged it and when, and whether the follow-up it set came in time (the next contact
   on or before the date: on time; after it: late; none yet: due, or overdue). A long silence is marked between days. */
.lg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lg .tl-month-head { position: relative; padding-right: 48px; }  /* the arrow keeps to the right when the figures wrap */
.lg .tl-month-toggle { position: absolute; top: 12px; right: var(--pad-x); }
.lg .tl-day { padding-block: 14px; }
.lg .up-text { margin-top: 4px; }
.avatar-xs { width: 20px; height: 20px; font-size: 8.5px; box-shadow: none; }
.lg-follow { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.lg-follow .icon { width: 13px; height: 13px; }
.lg-follow b { padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 650; line-height: 20px; }
.lg-follow.is-kept b { background: #f0fdf4; color: #15803d; }
.lg-follow.is-late b { background: #fffbeb; color: #b45309; }
.lg-follow.is-due b { background: var(--brand-50); color: var(--brand-700); }
.lg-follow.is-today b { background: #fef3c7; color: #92400e; }
.lg-follow.is-overdue b { background: #fef2f2; color: #b91c1c; }
.lg-follow.is-stopped b { background: #f1f5f9; color: #475569; }
.lg-quiet {
  display: flex; align-items: center; gap: 14px; padding: 2px var(--pad-x) 2px calc(var(--pad-x) + var(--tl-date) + 28px);
  font-size: 12.5px; color: var(--muted);
}
.lg-quiet::after { content: ""; flex: 1; border-top: 1px dashed var(--border-strong); }
.lg-quiet span { display: inline-flex; align-items: center; gap: 6px; }
.lg-quiet .icon { width: 13px; height: 13px; color: var(--faint); }
.lg-quiet b { font-weight: 650; color: var(--text-2); }
.lg-quiet[hidden] { display: none; }
@container (max-width: 520px) {
  .lg-quiet { padding-left: var(--pad-x); }
}

/* ---------- Project timeline: a ledger by day ---------- */
/* Newest first, by month (with what the month added up to) and then by day. A day reads across: the date | how far the
   job had got by its end (the bar: done before in light blue, added that day in blue), then the day's progress, hours
   and people | what happened. The figures sit in a fixed column, so reading down it shows the job growing. */
.tl { --tl-date: 60px; --tl-sum: 330px; --tl-icon: 26px; padding-bottom: 6px; }
.tl-month[hidden], .tl-day[hidden], .up-item[hidden] { display: none; }
.tl-month-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin: 0; padding: 11px var(--pad-x);
  border-block: 1px solid #e8edf3; background: var(--surface-2); font-weight: 400;
}
.tl-month:first-child .tl-month-head { border-top: 0; }
summary.tl-month-head { cursor: pointer; list-style: none; }
summary.tl-month-head::-webkit-details-marker { display: none; }
summary.tl-month-head:hover { background: var(--surface-3); }
summary.tl-month-head:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
.tl-month:not([open]) + .tl-month .tl-month-head { border-top: 0; }
.tl-month-toggle { display: grid; place-items: center; margin-left: auto; color: var(--muted); transition: transform 0.15s; }
.tl-month-toggle .icon { width: 16px; height: 16px; }
.tl-month[open] .tl-month-toggle { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .tl-month-toggle { transition: none; } }
.tl-month-name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.tl-month-fig { font-size: 13px; color: var(--text-2); }
.tl-month-fig b { margin-right: 5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-month-fig.is-gain b { color: #1d4ed8; }
.tl-month-fig.is-hours b { color: #0f766e; }
.tl-days { margin: 0; padding: 0; list-style: none; }
.tl-day {
  display: grid; grid-template-columns: var(--tl-date) var(--tl-sum) minmax(0, 1fr); column-gap: 28px; row-gap: 14px;
  align-items: start; padding: 16px var(--pad-x);
}
.tl-day + .tl-day { border-top: 1px solid #eef2f6; }
.tl.no-work .tl-day { grid-template-columns: var(--tl-date) minmax(0, 1fr); }
.tl-date { grid-column: 1; display: grid; justify-items: center; gap: 3px; text-align: center; }
.tl-date b { font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.tl-date span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.tl-date em { margin-top: 2px; font-size: 11.5px; font-style: normal; font-weight: 650; color: #1d4ed8; white-space: nowrap; }
.tl-sum { grid-column: 2; min-width: 0; padding-top: 2px; }
.tl-bar { display: flex; align-items: center; gap: 10px; }
.tl-bar-track { display: flex; flex: 1; height: 8px; overflow: hidden; border-radius: 999px; background: #e8edf3; }
.tl-bar-track i { flex: none; height: 100%; background: #bfdbfe; }
.tl-bar-track i.is-gain { background: #2563eb; }
.tl-bar b { min-width: 40px; font-size: 14.5px; font-weight: 700; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.tl-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; max-width: 16rem; }
.tl-stat { display: flex; flex-direction: column-reverse; margin: 0; }
.tl-stat dt { font-size: 12.5px; color: var(--muted); }
.tl-stat dd { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--text); font-variant-numeric: tabular-nums; }
.tl-stat.is-gain dd { color: #1d4ed8; }
.tl-stat.is-down dd { color: #b45309; }
.tl-stat.is-hours dd { color: #0f766e; }
.tl-stat.is-people dd { color: #334155; }
.tl-stat.is-none dd { color: var(--faint); }
.tl-stat.is-none dt { font-weight: 600; color: #b45309; }
.tl-stat.is-unlogged dd { color: var(--faint); }
.tl-items { grid-column: 3; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.tl.no-work .tl-items { grid-column: 2; }

/* an entry: an icon for its kind, what happened, the note, then who (their side's colour) and when */
.up-item { display: grid; grid-template-columns: var(--tl-icon) minmax(0, 1fr); column-gap: 12px; align-items: start; }
.up-mark {
  display: grid; place-items: center; width: var(--tl-icon); height: var(--tl-icon); border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--c-line); color: var(--c-fg);
}
.up-mark .icon { width: 14px; height: 14px; }
.up-item.is-step .up-mark { background: var(--c-bg); box-shadow: inset 0 0 0 1.5px var(--c-dot); }
.up-what { min-width: 0; max-width: 860px; }
.up-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: var(--tl-icon); }
.up-title { font-size: 14.5px; font-weight: 650; color: var(--text); }
.up-item.is-step .up-title { font-weight: 700; }
.up-delta { font-size: 13.5px; font-weight: 650; color: var(--brand-600); font-variant-numeric: tabular-nums; }
.up-delta.is-down { color: #b45309; }
.up-detail { font-size: 13.5px; color: var(--text-2); }
.up-detail b { font-weight: 650; color: var(--text); }
.up-detail.is-ok { font-weight: 620; color: #15803d; }
.up-detail.is-late { font-weight: 620; color: #b91c1c; }
.up-text {
  max-width: 75ch; margin: 3px 0 0; padding: 1px 0 1px 11px; border-left: 3px solid #e2e8f0;
  font-size: 13.5px; line-height: 1.55; color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere;
}
.up-text.is-feedback { border-left-color: #fb923c; color: #7c2d12; }
.up-file {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin-top: 6px; padding: 5px 11px 5px 9px;
  border: 1px solid #ccfbf1; border-radius: 8px; background: #f0fdfa; font-size: 13px; font-weight: 600; color: #0f766e;
  text-decoration: none;
}
.up-file .icon { width: 14px; height: 14px; flex: none; }
.up-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-file small { flex: none; font-weight: 500; color: var(--muted); }
.up-file:hover { border-color: #99f6e4; background: #ccfbf1; }
.up-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin: 4px 0 0; font-size: 12.5px; }
.up-who { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; color: var(--text-2); }
.up-who i { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--own, var(--faint)); }
.up-time { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-variant-numeric: tabular-nums; }
.up-time .icon { width: 12px; height: 12px; }
/* a step that was undone: struck through and tagged; the reason is in the "Step undone" entry above it */
.up-item.is-undone .up-title, .up-item.is-undone .up-delta, .up-item.is-undone .up-detail { text-decoration: line-through; color: var(--muted); }
.up-item.is-undone .up-mark { opacity: 0.45; }
.up-undone { padding: 0 7px; border-radius: 6px; background: #fff1f2; font-size: 12px; font-weight: 650; color: #be123c; }

/* a narrower card: the day's figures above its entries, beside the date */
@container (max-width: 1000px) {
  .tl { --tl-date: 58px; }
  .tl-day, .tl.no-work .tl-day { grid-template-columns: var(--tl-date) minmax(0, 1fr); column-gap: 18px; }
  .tl-sum, .tl-items, .tl.no-work .tl-items { grid-column: 2; }
  .tl-sum { max-width: 440px; }
}
/* a phone: the date heads the day on one line, the figures and entries take the full width under it */
@container (max-width: 520px) {
  .tl-day, .tl.no-work .tl-day { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 14px var(--pad-x); }
  .tl-date, .tl-sum, .tl-items, .tl.no-work .tl-items { grid-column: 1; }
  .tl-date { display: flex; align-items: baseline; gap: 7px; text-align: left; }
  .tl-date b { font-size: 20px; }
  .tl-date em { margin: 0; }
  .tl-sum { max-width: none; }
  .tl-stat dd { font-size: 15.5px; }
}

.undo-what { display: grid; gap: 6px; margin-bottom: 14px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; color: var(--text-2); }
.undo-what p { margin: 0; }
.undo-back { display: flex; align-items: center; gap: 6px; color: #be123c; }
.undo-back .icon { width: 14px; height: 14px; }
.undo-remark { font-size: 12.5px; color: var(--muted); white-space: pre-line; }

.up-filters { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-3); }
.up-filter {
  padding: 5px 10px; border: 0; border-radius: 7px; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); transition: background 0.12s, color 0.12s;
}
.up-filter span { margin-left: 3px; color: var(--faint); font-variant-numeric: tabular-nums; }
.up-filter:hover { color: var(--text); }
.up-filter[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }
.up-filter:focus-visible { outline: none; box-shadow: var(--ring); }
@media (prefers-reduced-motion: reduce) { .up-filter { transition: none; } }

/* ---------- Action needed queue ---------- */
/* Every row shares one grid, so the person, team, deadline and waiting time read down the card as columns.
   Rows hang 18px in from the group title's colour mark; the waiting time is the one figure set large. */
.aq { --aq-indent: calc(var(--pad-x) + 18px); --aq-cols: minmax(0, 1fr) 12rem 9.5rem 4.5rem 16px; padding-bottom: 6px; }
.aq-3 { --aq-cols: minmax(0, 1fr) 11rem 11rem 9.5rem 4.5rem 16px; }
.aq-group + .aq-group { border-top: 1px solid var(--border); }
.aq-head {
  display: grid; grid-template-columns: 8px auto auto minmax(0, 1fr); align-items: baseline; column-gap: 10px;
  padding: 18px var(--pad-x) 6px;
}
.aq-mark { width: 8px; height: 8px; border-radius: 2px; background: var(--c-dot); align-self: center; }
.aq-title { font-size: 14px; font-weight: 680; color: var(--text); letter-spacing: -0.005em; }
.aq-count { font-size: 13px; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.aq-help { margin-left: 8px; font-size: 12.5px; color: var(--muted); }

.aq-row {
  position: relative; display: grid; grid-template-columns: var(--aq-cols); align-items: center; column-gap: 20px;
  padding: 11px var(--pad-x) 11px var(--aq-indent); color: inherit; transition: background 0.12s;
}
.aq-row::before { content: ""; position: absolute; top: 0; left: var(--aq-indent); right: var(--pad-x); border-top: 1px solid #eef1f6; }
.aq-head + .aq-row::before, .aq-group > .aq-row:first-child::before { display: none; }
.aq-row:hover { background: var(--surface-2); color: inherit; }
.aq-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand); border-radius: var(--radius-xs); }

.aq-main { display: grid; gap: 3px; min-width: 0; }
.aq-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aq-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font-size: 12.5px; color: var(--muted); }
.aq-meta .code { font-size: 12px; color: var(--text-2); }
.aq-meta .client-code { padding: 0; border: 0; background: none; color: #6d28d9; }
.aq-meta .client-name { color: var(--muted); font-weight: 500; }
.aq-meta .is-revised { color: #c2410c; font-weight: 600; }  /* how many times the client sent it back */
.aq-meta .is-people { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
.aq-meta .is-people .icon { width: 13px; height: 13px; color: var(--own-dept); }
.aq-meta .is-hours { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.aq-meta .is-hours .icon { width: 13px; height: 13px; color: var(--muted); }
.aq-meta .is-hours.is-over { color: #b91c1c; font-weight: 600; }
.kv-action { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; }
.aq-quote {
  margin-top: 4px; padding-left: 10px; border-left: 2px solid #fdba74; font-size: 12.5px; font-style: italic; color: #9a3412;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.aq-facts { display: contents; }
.aq-fact { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.aq-fact .icon { width: 15px; height: 15px; flex: none; color: var(--faint); }
.aq-fact.is-warn { color: #b45309; font-weight: 620; }
.aq-fact.is-warn .icon { color: currentColor; }
/* the deadline reads as plain text; only a deadline at risk or overdue keeps its colour */
.aq-fact .chip { padding: 0; border: 0; background: none; font-size: 13px; gap: 7px; }
.aq-fact .chip-success, .aq-fact .chip-muted { color: var(--text-2); font-weight: 500; }
.aq-fact .chip-success .icon, .aq-fact .chip-muted .icon { color: var(--faint); }

.aq-age { display: grid; justify-items: end; gap: 4px; line-height: 1; text-align: right; }
.aq-age b { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.aq-age small { font-size: 11px; font-weight: 500; color: var(--faint); white-space: nowrap; }
.aq-age.is-late b { color: #b45309; }
.aq-go { display: grid; place-items: center; color: var(--border-strong); transition: color 0.15s, transform 0.15s; }
.aq-go .icon { width: 16px; height: 16px; }
.aq-row:hover .aq-go { color: var(--brand-600); transform: translateX(2px); }
/* the department head's "Assign presales" button, in the team column of a quotation nobody prepares yet; the rest of
   the row still opens the job */
.aq-row[data-href] { cursor: pointer; }
.aq-fact.aq-act { overflow: visible; }
a.aq-name { justify-self: start; max-width: 100%; color: var(--text); }
a.aq-name:hover { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
.aq-more { display: inline-block; padding: 8px var(--pad-x) 10px var(--aq-indent); font-size: 13px; font-weight: 620; color: var(--brand-600); }
.aq-more:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .aq-row, .aq-go { transition: none; } }

/* A narrower card stacks the facts under the title and keeps the waiting time on the right. */
@container (max-width: 980px) {
  .aq-row { grid-template-columns: minmax(0, 1fr) auto 16px; row-gap: 7px; }
  .aq-main { grid-column: 1; grid-row: 1; }
  .aq-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; grid-column: 1; grid-row: 2; }
  .aq-fact { font-size: 12.5px; }
  .aq-fact:empty { display: none; }
  .aq-age { grid-column: 2; grid-row: 1 / span 2; }
  .aq-go { grid-column: 3; grid-row: 1 / span 2; }
}
@container (max-width: 640px) {
  .aq { --aq-indent: var(--pad-x); }
  .aq-help { grid-column: 2 / -1; margin: 2px 0 0; }
  .aq-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ---------- Action needed, as an inbox ---------- */
/* One list, each row reading like an email: who it's from, a label, the job with one line on what to do, the button it
   needs, how long it has waited. New rows (not opened since they started waiting) are white and bold with a dot;
   opened ones fade to grey, like read mail, until something new happens on them. A row lifts under the pointer. */
.ib { --ib-cols: 10px 10.5rem 8.75rem minmax(0, 1fr) auto 4.25rem; }
/* tabs, one per kind of item, with how many are new: the one shown is underlined in its kind's colour */
.ib-tabs {
  display: flex; gap: 2px; padding: 0 calc(var(--pad-x) - 8px); border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.ib-tabs::-webkit-scrollbar { display: none; }
.ib-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 11px 10px 12px; border: 0;
  border-radius: 8px 8px 0 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  white-space: nowrap; cursor: pointer;
}
.ib-tab::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; }
.ib-tab:hover { background: var(--surface-2); color: var(--text); }
.ib-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
.ib-tab[data-tab="all"] { --c-dot: var(--brand); --c-fg: var(--brand-700); }
.ib-tab[aria-selected="true"] { color: var(--c-fg, var(--text)); }
.ib-tab[aria-selected="true"]::after { background: var(--c-dot, var(--brand)); }
.ib-tab-count { font-size: 12px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.ib-tab-new {
  padding: 1px 7px; border-radius: 999px; background: var(--c-dot, var(--brand)); color: #fff;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ib-tab[data-tab="all"] .ib-tab-new { background: var(--brand); }

.ib-list { padding-bottom: 2px; }
.ib-row {
  position: relative; display: grid; grid-template-columns: var(--ib-cols); align-items: center; column-gap: 16px;
  padding: 10px var(--pad-x) 10px 14px; border-top: 1px solid #e9edf3; background: #f4f6fa; color: var(--muted);
  cursor: pointer;
}
.ib-list > .ib-row:first-child { border-top: 0; }
.ib-row.is-new { background: var(--surface); color: var(--text); }
.ib-row:hover {
  z-index: 1;
  box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}
.ib-row:focus-within { z-index: 1; box-shadow: inset 3px 0 0 var(--brand); }
.ib-row[hidden], .ib-more[hidden] { display: none; }
.ib-dot { width: 8px; height: 8px; border-radius: 999px; }
.ib-row.is-new .ib-dot { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.ib-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; color: #5f6878; }
.ib-row.is-new .ib-from { font-weight: 700; color: var(--text); }
/* what kind of item it is, as a label in its colour (a little faded once opened) */
.ib-label {
  justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 2px 8px; border-radius: 6px;
  background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-fg);
  font-size: 11.5px; font-weight: 650; white-space: nowrap;
}
.ib-row:not(.is-new) .ib-label { opacity: 0.7; }
.ib-main { display: grid; gap: 4px; min-width: 0; }
.ib-line { display: flex; align-items: baseline; gap: 10px; min-width: 0; overflow: hidden; white-space: nowrap; }
.ib-subject { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 500; color: #4b5563; }
.ib-row.is-new .ib-subject { font-weight: 700; color: var(--text); }
.ib-subject:hover { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ib-snippet { flex: 1 1 0; min-width: 4rem; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: #8c95a5; }
.ib-row.is-new .ib-snippet { color: var(--text-2); }
.ib-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; font-size: 12px; color: var(--faint); }
.ib-chips .code { font-size: 11.5px; color: var(--muted); }
.ib-chips .client-code { padding: 0; border: 0; background: none; font-size: 11.5px; color: #7c5cc4; }
.ib-chips .is-revised { color: #c2410c; font-weight: 600; }
.ib-chips .chip { padding: 0; border: 0; background: none; font-size: 12px; gap: 5px; }
.ib-chips .chip .icon { width: 13px; height: 13px; }
.ib-row:not(.is-new) .ib-chips { opacity: 0.85; }
.ib-act { justify-self: end; }
.ib-when { display: grid; justify-items: end; gap: 3px; line-height: 1; text-align: right; }
.ib-when b { font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ib-row.is-new .ib-when b { font-weight: 750; color: var(--text); }
.ib-when small { font-size: 11px; color: var(--faint); white-space: nowrap; }
.ib-when.is-late b, .ib-row.is-new .ib-when.is-late b { color: #b45309; }
.ib-more {
  display: block; padding: 10px var(--pad-x) 12px 40px; border-top: 1px solid #e9edf3;
  font-size: 13px; font-weight: 620; color: var(--brand-600);
}
.ib-more:hover { text-decoration: underline; }
.sec-fact.is-new { color: var(--brand-700); }
.sec-fact.is-new i { width: 8px; height: 8px; border-radius: 999px; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.sec-fact.is-new b { color: var(--brand-700); }
.ib-newcount { margin-left: 12px; font-size: 12.5px; }
/* a narrower card reads like mail on a phone: who and when on top, the label beside who, the job and its line under */
@container (max-width: 1000px) {
  .ib-row {
    grid-template-columns: 10px auto minmax(0, 1fr) auto; row-gap: 6px; padding-block: 11px;
    grid-template-areas: "dot from label when" ". main main main" ". act act act";
  }
  .ib-dot { grid-area: dot; align-self: center; }
  .ib-from { grid-area: from; max-width: 16rem; }
  .ib-label { grid-area: label; }
  .ib-when { grid-area: when; grid-auto-flow: column; align-items: baseline; gap: 6px; }
  .ib-main { grid-area: main; }
  .ib-line { flex-direction: column; align-items: stretch; gap: 2px; white-space: normal; }
  .ib-subject { white-space: nowrap; }
  .ib-snippet { flex: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
  .ib-act { grid-area: act; justify-self: start; }
  .ib-act:empty { display: none; }
}

/* ---------- Work in hand: one row per job, where it stands in one word ---------- */
/* Each job says where it stands (late, due soon, behind, on track, not started, with sales) in that word's colour,
   which also runs down its left edge; the tabs show one kind at a time. The bar is the work done, the dark line is
   today (between the start of work and the deadline), and the words under the bar say both. */
.wh { --wh-cols: minmax(0, 1fr) 9.5rem 11.5rem minmax(13rem, 19rem) 11.5rem 5.75rem 16px; --wh-gap: 22px; }
.wh .ib-tab.is-late { --c-dot: #ef4444; --c-fg: #b91c1c; }
.wh .ib-tab.is-soon { --c-dot: #f59e0b; --c-fg: #b45309; }
.wh .ib-tab.is-behind { --c-dot: #f59e0b; --c-fg: #b45309; }
.wh .ib-tab.is-good { --c-dot: #22c55e; --c-fg: #15803d; }
.wh .ib-tab.is-waiting { --c-dot: #94a3b8; --c-fg: #475569; }
.wh .ib-tab.is-sales { --c-dot: #14b8a6; --c-fg: #0f766e; }
.wh-swatch { width: 8px; height: 8px; border-radius: 2px; background: var(--c-dot); }
.wh-head, .wh-row { display: grid; grid-template-columns: var(--wh-cols); column-gap: var(--wh-gap); padding-inline: var(--pad-x); }
.wh-head {
  padding-block: 8px; border-bottom: 1px solid var(--border); background: var(--surface-2);
  font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.wh-tabs + .wh-head { border-top: 0; }
.wh-head .is-num { text-align: right; }
.wh-row {
  --h: #94a3b8; --h-bg: #f1f5f9; --h-fg: #475569;
  position: relative; align-items: center; padding-block: 14px; border-top: 1px solid #eef1f6; color: inherit;
  transition: background 0.12s;
}
.wh-row::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--h); }
.wh-head + .wh-row { border-top: 0; }
.wh-row[hidden] { display: none; }
.wh-row.is-late { --h: #ef4444; --h-bg: #fef2f2; --h-fg: #b91c1c; }
.wh-row.is-soon, .wh-row.is-behind { --h: #f59e0b; --h-bg: #fffbeb; --h-fg: #b45309; }
.wh-row.is-good { --h: #22c55e; --h-bg: #f0fdf4; --h-fg: #15803d; }
.wh-row.is-sales { --h: #14b8a6; --h-bg: #f0fdfa; --h-fg: #0f766e; }
.wh-row:hover { background: var(--surface-2); color: inherit; }
.wh-row:hover .aq-go { color: var(--brand-600); transform: translateX(2px); }
.wh-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand); border-radius: var(--radius-xs); }
.wh-facts { display: contents; }
.wh .aq-main { gap: 6px; }
.wh .aq-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }  /* wrap, never cut the title */
/* which job it is: its code, the client's code, pilot or project, and how often the client sent it back */
.wh-id { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; font-size: 12.5px; color: var(--muted); }
.wh-id .code { font-size: 12px; color: var(--text-2); }
.wh-id .client-code { font-size: 11.5px; padding: 0 6px; }
.wh-type { display: inline-flex; align-items: center; gap: 5px; }
.wh-type .icon { width: 13px; height: 13px; color: var(--faint); }
.wh-revised {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px;
  background: #fff4ec; color: #c2410c; font-size: 11.5px; font-weight: 650; white-space: nowrap;
}
.wh-revised .icon { width: 12px; height: 12px; }
/* where it stands, in a word in its colour, and the stage under it */
.wh-status { display: grid; justify-items: start; gap: 5px; min-width: 0; }
.wh-health {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px 3px 8px; border-radius: 999px;
  background: var(--h-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 30%, transparent); color: var(--h-fg);
  font-size: 12.5px; font-weight: 680; white-space: nowrap;
}
.wh-health::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 999px; background: var(--h); }
.wh-status small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wh-who { display: grid; gap: 3px; min-width: 0; font-size: 13px; color: var(--text-2); }
.wh-who > span { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; }
.wh-who .icon { width: 15px; height: 15px; flex: none; color: var(--faint); }
.wh-who .is-sub { font-size: 12.5px; color: var(--muted); }
.wh-who .is-warn { color: #b45309; font-weight: 620; }
.wh-who .is-warn .icon { color: currentColor; }
/* a team and a sales rep never look alike: different icon, and each in its role colour */
.wh-who .is-team .icon, .aq-fact.is-team .icon { color: var(--own-dept); }
.wh-who .is-rep .icon, .aq-fact.is-rep .icon { color: var(--own-sales); }
/* the work done against the time gone: the bar, today's line on it, and both in words */
.wh-sched { display: grid; gap: 7px; min-width: 0; }
.wh-track { position: relative; height: 8px; border-radius: 999px; background: #e8edf5; }
.wh-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--brand); }
.wh-row.is-soon .wh-fill, .wh-row.is-behind .wh-fill { background: #f59e0b; }
.wh-row.is-late .wh-fill { background: #ef4444; }
.wh-row.is-sales .wh-fill { background: #14b8a6; }
.wh-today { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--text); }
.wh-caption { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.wh-caption b { font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.wh-caption span { overflow: hidden; text-overflow: ellipsis; }
.wh-note { font-size: 12px; color: var(--muted); }
.wh-note.is-warn { color: #b45309; font-weight: 600; }
.wh-note.is-asked { color: var(--brand-700); }
/* hours worked against the estimate, with a small meter: amber when the hours run ahead of the work, red over */
.wh-hours { display: grid; gap: 4px; min-width: 0; }
.wh-hours-fig { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wh-hours-fig b { font-size: 14px; font-weight: 650; color: var(--text); }
.wh-hours-fig.is-none b { color: var(--faint); font-weight: 500; }
.wh-meter { display: block; width: 100%; max-width: 8.5rem; height: 4px; border-radius: 999px; background: #e8edf5; overflow: hidden; }
.wh-meter span { display: block; height: 100%; border-radius: inherit; background: #94a3b8; }
.wh-hours small { font-size: 12px; color: var(--muted); }
.wh-hours.is-ahead small { color: #b45309; font-weight: 600; }
.wh-hours.is-ahead .wh-meter span { background: #f59e0b; }
.wh-hours.is-over small, .wh-hours.is-over .wh-hours-fig b { color: #b91c1c; font-weight: 650; }
.wh-hours.is-over .wh-meter span { background: #ef4444; }
.wh-hours.is-under small { color: #15803d; font-weight: 600; }
.wh-hours.is-under .wh-meter span { background: #22c55e; }
.text-good { color: #15803d; }
.text-bad { color: #b91c1c; }
/* the deadline: the date, and how far off it is in words */
.wh-due { display: grid; justify-items: end; gap: 4px; line-height: 1; text-align: right; }
.wh-due b { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; }
.wh-due small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.wh-row.is-late .wh-due b, .wh-row.is-late .wh-due small { color: #b91c1c; }
.wh-row.is-late .wh-due small, .wh-row.is-soon .wh-due small { font-weight: 650; }
.wh-row.is-soon .wh-due small { color: #b45309; }
.aq-age.is-over b { color: #b91c1c; }
.wh-foot { display: flex; align-items: center; gap: 10px; padding: 11px var(--pad-x) 14px; border-top: 1px solid #eef1f6; font-size: 12px; color: var(--muted); }
.wh-key { position: relative; flex: none; width: 26px; height: 6px; border-radius: 999px; background: #e8edf5; }
.wh-key::before { content: ""; position: absolute; inset: 0 50% 0 0; border-radius: inherit; background: var(--brand); }
.wh-key::after { content: ""; position: absolute; left: 70%; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: var(--text); }
@media (prefers-reduced-motion: reduce) { .wh-row { transition: none; } }

@container (max-width: 1400px) {
  .wh { --wh-cols: minmax(0, 1fr) 8.75rem 9.75rem minmax(11rem, 15rem) 8.75rem 5.25rem 16px; --wh-gap: 18px; }
}
/* A narrower card drops the headings, keeps the title and the deadline on top and puts where it stands, who, the
   schedule and the hours underneath. */
@container (max-width: 1200px) {
  .wh-head { display: none; }
  .wh-row { grid-template-columns: minmax(0, 1fr) auto 16px; row-gap: 12px; }
  .wh-row > .aq-main { grid-column: 1; grid-row: 1; }
  .wh-row > .wh-due { grid-column: 2; grid-row: 1; }
  .wh-row > .aq-go { grid-column: 3; grid-row: 1; }
  .wh-facts { display: grid; grid-template-columns: 9rem 11rem minmax(12rem, 1fr) 10rem; align-items: center; gap: 10px 22px; grid-column: 1 / -1; grid-row: 2; }
}
@container (max-width: 900px) {
  .wh-facts { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) minmax(0, 10rem); }
  .wh-sched { grid-column: 1 / -1; grid-row: 2; }
}
/* a phone: who on its own line, where it stands on the left, hours on the right, then the schedule */
@container (max-width: 600px) {
  .wh-facts { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .wh-who { grid-column: 1 / -1; grid-row: 1; }
  .wh-status { grid-column: 1; grid-row: 2; }
  .wh-hours { grid-column: 2; grid-row: 2; justify-items: end; text-align: right; }
  .wh-sched { grid-column: 1 / -1; grid-row: 3; }
}

/* ---------- Clients & leads: an account book ---------- */
/* Tabs by lead status with two quick filters; one row per client: a monogram in its status colour, who it is and
   what was said last time, the contact to call or email, its status and work, and its contact rhythm: a line from a
   month ago to a month ahead with today in the middle, the last contact behind it (the stretch since then warm to
   cold) and the next follow-up ahead of it, in red once it has passed. */
.acct-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; border-bottom: 1px solid var(--border); }
.acct-toolbar .ib-tabs { border-bottom: 0; }
.acct-tabs .ib-tab { color: var(--muted); }
.acct-tabs .ib-tab:hover { color: var(--text); }
.acct-tabs .ib-tab[aria-current="page"] { color: var(--c-fg, var(--brand-700)); }
.acct-tabs .ib-tab[aria-current="page"]::after { background: var(--c-dot, var(--brand)); }
.acct-tabs .ib-tab:not([class*="is-"]) { --c-dot: var(--brand); --c-fg: var(--brand-700); }
.acct-tabs .ib-tab.is-new { --c-dot: #3b82f6; --c-fg: #1d4ed8; }
.acct-tabs .ib-tab.is-follow_up { --c-dot: #f59e0b; --c-fg: #b45309; }
.acct-tabs .ib-tab.is-converted { --c-dot: #22c55e; --c-fg: #15803d; }
.acct-tabs .ib-tab.is-not_interested { --c-dot: #94a3b8; --c-fg: #475569; }
.acct-swatch { width: 8px; height: 8px; border-radius: 2px; background: var(--c-dot); }
.acct-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px var(--pad-x) 9px 0; }
.acct-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); font-size: 12.5px; font-weight: 550; color: var(--muted);
  white-space: nowrap;
}
.acct-chip .icon { width: 14px; height: 14px; color: var(--faint); }
.acct-chip b { font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.acct-chip:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.acct-chip.is-due.has-some { background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; color: #b45309; }
.acct-chip.is-due.has-some .icon, .acct-chip.is-due.has-some b { color: #b45309; }
.acct-chip.is-cold.has-some { background: #f1f5f9; box-shadow: inset 0 0 0 1px #cbd5e1; color: #475569; }
.acct-chip[aria-current="page"] { background: var(--brand-50); box-shadow: inset 0 0 0 1.5px var(--brand); color: var(--brand-700); }
.acct-chip[aria-current="page"] .icon, .acct-chip[aria-current="page"] b { color: var(--brand-700); }

.acct { --acct-cols: 44px minmax(0, 1fr) 15rem 11rem minmax(18rem, 1.2fr) auto; }
.acct-row {
  position: relative; display: grid; grid-template-columns: var(--acct-cols); align-items: center; column-gap: 20px;
  padding: 14px var(--pad-x); border-top: 1px solid #eef1f6; cursor: pointer; transition: background 0.12s;
}
.acct-list > .acct-row:first-child { border-top: 0; }
.acct-row:hover { background: var(--surface-2); }
.acct-row:focus-within { box-shadow: inset 3px 0 0 var(--brand); }
.acct-row.is-not_interested { background: #f8f9fb; }
.acct-row.is-not_interested .acct-name, .acct-row.is-not_interested .acct-contact b { color: var(--muted); font-weight: 550; }
/* who it is: a monogram in the status colour, the name, its code and city, and what was said last time */
.acct-mono {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-fg);
  font-family: var(--display); font-size: 15px; font-weight: 650; letter-spacing: 0.01em;
}
.acct-main { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.acct-main > * { max-width: 100%; }
.acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 650; color: var(--text); }
.acct-name:hover { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
.acct-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; font-size: 12.5px; color: var(--muted); }
.acct-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.acct-meta .icon { width: 13px; height: 13px; color: var(--faint); }
.acct-meta .client-code { font-size: 11.5px; padding: 0 6px; }
.acct-owner .icon { color: var(--own-sales); }
.acct-last {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  padding-left: 9px; border-left: 2px solid #bfd3f2; font-size: 12.5px; line-height: 1.5; color: var(--text-2);
}
/* the contact: name, role, and a tap to call or email */
.acct-contact { display: grid; gap: 2px; min-width: 0; font-size: 13px; }
.acct-contact b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 620; color: var(--text); }
.acct-contact b.is-none { font-weight: 500; color: var(--faint); }
.acct-contact small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.acct-reach { display: grid; gap: 2px; margin-top: 3px; min-width: 0; }
.acct-reach a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--brand-600); white-space: nowrap; }
.acct-reach a span { overflow: hidden; text-overflow: ellipsis; }
.acct-reach a:hover { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
.acct-reach .icon { width: 13px; height: 13px; flex: none; }
.acct-stage { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.acct-stage small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.acct-stage small b { font-weight: 650; color: var(--own-dept); }
/* the contact and the work, in words: when the client was last contacted and how, the next follow-up, and what its
   work on the go is doing (the job waiting on the sales side first). Colour only where it needs attention: the last
   contact green within two weeks, amber within a month, red after that; the follow-up amber on the day and red once
   passed; the work blue when it's the sales side's move, amber when it has sat with the client over a week. Every job
   on the go gets a line (up to three), each opening its project. A narrow cell puts the work under the other two. */
.acct-rhythm { min-width: 0; container-type: inline-size; }
.cx { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.5fr); }
.cx-cell { display: grid; align-content: start; gap: 1px; min-width: 0; padding: 1px 14px; }
.cx-cell:first-child { padding-left: 0; }
.cx-cell + .cx-cell { border-left: 1px solid #e6ebf2; }
.cx-cell small { font-size: 11.5px; color: var(--muted); }
.cx-cell b {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 650; line-height: 1.4;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.cx-cell > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.cx-cell > span .icon { width: 12px; height: 12px; margin-right: 5px; vertical-align: -2px; }
.cx-last.is-fresh b { color: #15803d; }
.cx-last.is-stale b { color: #b45309; }
.cx-last.is-cold b, .cx-next.is-late b, .cx-next.is-late > span { color: #b91c1c; }
.cx-next.is-today b { color: #b45309; }
.cx-next.is-soon b { color: var(--brand-700); }
.cx-job { display: grid; min-width: 0; color: inherit; text-decoration: none; }
.cx-job > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.cx-job:hover b { text-decoration: underline; text-underline-offset: 2px; }
.cx-job:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--ring); }
.cx-job.is-sales b { color: var(--brand-700); }
.cx-job.is-slow b { color: #b45309; }
/* several jobs: one line each, what it's doing and its code */
.cx-work.is-many { gap: 3px; }
.cx-work.is-many .cx-job { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; }
.cx-work.is-many .cx-job b { font-size: 13px; line-height: 1.35; }
.cx-work.is-many .cx-job .code { font-size: 11.5px; color: var(--muted); }
.cx-more { font-size: 12px; font-weight: 600; color: var(--brand-600); text-decoration: none; }
.cx-more:hover { text-decoration: underline; text-underline-offset: 2px; }
.cx-last.is-none b, .cx-last.is-quiet b, .cx-next.is-none b, .cx-next.is-stopped b, .cx-work b.cx-none { font-weight: 600; color: var(--faint); }
@container (max-width: 400px) {
  .cx { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .cx-cell.cx-work { grid-column: 1 / -1; padding: 8px 0 0; border-left: 0; border-top: 1px solid #e6ebf2; }
  .cx-cell > span, .cx-job > span { white-space: normal; }  /* a date wraps rather than being cut */
}
.acct-act { justify-self: end; }
@media (prefers-reduced-motion: reduce) { .acct-row { transition: none; } }
/* a laptop: two lines per client, who and their status on the first, the contact and the rhythm under them */
@container (max-width: 1300px) {
  .acct-row {
    grid-template-columns: 44px minmax(0, 1fr) minmax(15rem, 25rem) auto; row-gap: 12px;
    grid-template-areas: "mono main stage act" ". contact rhythm act";
  }
  .acct-row > .acct-mono { grid-area: mono; align-self: start; }
  .acct-row > .acct-main { grid-area: main; }
  .acct-row > .acct-stage { grid-area: stage; }
  .acct-row > .acct-contact { grid-area: contact; grid-template-columns: auto auto 1fr; align-items: baseline; column-gap: 10px; }
  .acct-row .acct-reach { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 0; }
  .acct-row > .acct-rhythm { grid-area: rhythm; }
  .acct-row > .acct-act { grid-area: act; align-self: center; }
}
/* a phone: everything under the name */
@container (max-width: 760px) {
  .acct-row { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "mono main" ". stage" ". contact" ". rhythm" ". act"; }
  .acct-row > .acct-mono { width: 40px; height: 40px; }
  .acct-row > .acct-act { justify-self: start; }
  .acct-key { display: none; }
}

/* ---------- Adding or editing a client: the fields, and the client as it will look on the list ---------- */
/* The fields in rows across the page; beside them a card showing the client as the list will (updating as you type)
   with what departments see, and the buttons, kept in view while scrolling. */
.client-editor { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--gap); align-items: start; }
.client-fields .card-body { padding: 22px 26px 6px; }
.client-section + .client-section { margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--border); }
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* the lead status as four cards in their colours */
.lead-picks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 2px; }  /* as many as are offered */
.lead-pick { position: relative; display: block; cursor: pointer; }
.lead-pick input { position: absolute; opacity: 0; pointer-events: none; }
.lead-pick > span {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 9px; row-gap: 2px; height: 100%;
  padding: 11px 13px 12px; border: 1.5px solid var(--border-strong); border-radius: 12px; background: var(--surface);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.lead-pick i { width: 9px; height: 9px; border-radius: 999px; background: var(--c-dot); }
.lead-pick b { font-size: 13.5px; font-weight: 650; color: var(--text); }
.lead-pick small { grid-column: 2; font-size: 12px; color: var(--muted); }
.lead-pick:hover > span { border-color: var(--c-dot); }
.lead-pick input:checked + span {
  border-color: var(--c-dot); background: var(--c-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-dot) 20%, transparent);
}
.lead-pick input:checked + span b { color: var(--c-fg); }
.lead-pick input:focus-visible + span { box-shadow: var(--ring); }
/* the next follow-up, with quick picks beside the date */
.client-follow { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
.date-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.date-row > .input { width: 12.5rem; flex: none; }
.date-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.date-pick {
  padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
  font: inherit; font-size: 12.5px; font-weight: 560; color: var(--text-2); cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.date-pick:hover { border-color: var(--brand); color: var(--brand-700); }
.date-pick:focus-visible { outline: none; box-shadow: var(--ring); }
.date-pick.is-clear { border-style: dashed; color: var(--muted); }
/* the client as it will look on the list */
.client-side { position: sticky; top: calc(var(--topbar-h) + 16px); display: grid; gap: 14px; }
.cp-body { display: grid; gap: 16px; padding: 18px 20px 20px; }
.cp-top { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 14px; }
.cp-top .acct-mono { width: 48px; height: 48px; font-size: 16px; }
.cp-id { display: grid; gap: 4px; min-width: 0; }
.cp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 650; color: var(--text); }
.cp-facts { display: grid; gap: 9px; margin: 0; padding-top: 14px; border-top: 1px solid var(--border); }
.cp-facts > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: baseline; gap: 10px; }
.cp-facts dt { font-size: 12px; color: var(--muted); }
.cp-facts dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 13.5px; color: var(--text); }
.cp-facts dd small { font-size: 12px; color: var(--muted); }
.cp-facts dd.is-late { color: #b91c1c; font-weight: 650; }
.cp-facts dd.is-today { color: #b45309; font-weight: 650; }
[data-pv].is-empty { color: var(--faint); font-weight: 500; }
.cp-dept { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.cp-dept .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--own-dept); }
.client-actions { display: flex; justify-content: flex-end; gap: 10px; }
.client-actions-bottom { display: none; }
/* narrower: the preview goes under the fields, and the buttons back to the bottom of the form */
@container content (max-width: 1200px) {
  .client-editor { grid-template-columns: minmax(0, 1fr); }
  .client-side { position: static; }
  .client-actions { display: none; }
  .client-actions-bottom { display: flex; }
  .form-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container content (max-width: 760px) {
  .lead-picks { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-fields .card-body { padding: 18px 16px 4px; }
}
@container content (max-width: 560px) {
  .form-grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .form-grid.cols-4 .span-2 { grid-column: auto; }
  .date-row > .input { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .lead-pick > span, .date-pick { transition: none; } }

/* ---------- Quality by team ---------- */
.qa-who { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); white-space: nowrap; }
.qa-who .icon { width: 15px; height: 15px; color: var(--own-dept); }
.qa-dept { padding: 1px 6px; border-radius: 6px; background: var(--surface-3); font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.qa-rate { display: inline-grid; grid-template-columns: 120px auto auto; align-items: center; gap: 10px; white-space: nowrap; }
.qa-bar { position: relative; height: 8px; border-radius: 999px; background: #e8edf5; overflow: hidden; }
.qa-bar span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: #16a34a; }
.qa-rate.is-mid .qa-bar span { background: #f59e0b; }
.qa-rate.is-low .qa-bar span { background: #dc2626; }
.qa-rate b { font-variant-numeric: tabular-nums; }

/* ---------- Activity feed ---------- */
/* One plain sentence per entry, the job underneath, any note quoted; the dot is the side that acted. */
.act { list-style: none; margin: 0; padding: 0 0 6px; }
.act-day { padding: 10px var(--pad-x) 4px; font-size: 12px; font-weight: 650; color: var(--text-2); }
.act-day:first-child { padding-top: 2px; }
.act-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: start; column-gap: 12px; padding: 9px var(--pad-x); }
.act-item + .act-item { border-top: 1px solid #f1f4f8; }
.act-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 999px; background: var(--own, var(--faint)); }
.act-body { min-width: 0; }
.act-text { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.act-text b { font-weight: 650; color: var(--text); }
.act-job { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-job .code { margin-right: 6px; font-size: 11.5px; color: var(--text-2); }
.act-job:hover { color: var(--brand-600); }
.act-quote { margin-top: 4px; font-size: 12.5px; line-height: 1.45; font-style: italic; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.act-time { padding-top: 2px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Empty states ---------- */
.empty { text-align: center; padding: 40px 24px; }
.empty-icon {
  width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-50), #ecf8f4); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-100);
}
.empty-icon .icon { width: 26px; height: 26px; }
.empty h4 { font-size: 15.5px; font-weight: 700; }
.empty p { margin: 6px auto 0; max-width: 420px; color: var(--muted); font-size: 13.5px; }
.empty .btn { margin-top: 16px; }
.empty-sm { padding: 22px 20px; }
.empty-sm .empty-icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 10px; }
.empty-sm .empty-icon .icon { width: 20px; height: 20px; }
.all-clear {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
}
.all-clear .bubble { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #15803d; }

/* ---------- Live updates: a quiet note when the page has just refreshed itself ---------- */
.live-note {
  position: fixed; left: 50%; bottom: 20px; z-index: 190; transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  padding: 7px 14px; border-radius: 999px; background: var(--abyss); color: #fff; font-size: 12.5px; font-weight: 600;
  box-shadow: var(--shadow-lg); transition: opacity 0.25s, transform 0.25s;
}
.live-note.is-shown { opacity: 0.94; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .live-note { transition: none; } }

/* ---------- Toasts ---------- */
.toasts { position: fixed; top: 76px; right: 24px; z-index: 200; display: grid; gap: 10px; width: min(440px, calc(100vw - 32px)); }
.toast {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px 13px 16px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden; animation: toast-in 0.25s ease-out;
}
.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c-dot); }
.toast-text { flex: 1; font-size: 13.5px; color: var(--text-2); padding-top: 1px; }
.toast-title { font-weight: 700; color: var(--text); font-size: 13.5px; }
.toast .bubble { width: 30px; height: 30px; border-radius: 999px; }
.toast .bubble .icon { width: 16px; height: 16px; }
.toast-close { background: none; border: 0; color: var(--faint); cursor: pointer; padding: 2px; border-radius: 6px; }
.toast-close:hover { color: var(--text); background: var(--surface-3); }
.toast.is-leaving { animation: toast-out 0.25s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
/* new notifications, popping up at the bottom right while a page is open; the whole card opens it */
.np-stack { top: auto; bottom: 24px; }
.np { --c-dot: var(--brand); cursor: pointer; animation: np-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15); }
.np.lvl-success { --c-dot: #16a34a; }
.np.lvl-warning { --c-dot: #f59e0b; }
.np.lvl-danger { --c-dot: #dc2626; }
.np:hover { border-color: var(--border-strong); }
.np-label { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.np-label .icon { width: 12px; height: 12px; }
.np-link { display: block; color: var(--text); text-decoration: none; }
.np-link::after { content: ""; position: absolute; inset: 0; }  /* the whole card is the link */
.np-msg { display: -webkit-box; margin-top: 2px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.np .toast-close { position: relative; z-index: 1; }
@keyframes np-in { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .np { animation: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px); } }

/* ---------- Dropdowns ---------- */
.dropdown-wrap { position: relative; }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 400px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg);
  display: none; overflow: hidden;
}
.dropdown.open { display: block; animation: modal-in 0.15s ease-out; }
.dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.dropdown-head b { font-size: 14.5px; }
.dropdown-head-actions { display: flex; align-items: center; gap: 16px; }
/* the bell menu's sound switch says how it is now; the body's class keeps it right after a live update */
.sound-toggle .when-on, .sound-off .sound-toggle .when-off { display: inline-flex; align-items: center; gap: 5px; }
.sound-toggle .when-off, .sound-off .sound-toggle .when-on { display: none; }
.sound-toggle { color: var(--muted); }
.sound-toggle:hover { color: var(--text); }
.sound-toggle .icon { width: 14px; height: 14px; }
.dropdown-list { max-height: 420px; overflow-y: auto; }
.dropdown-foot { padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface-2); text-align: center; font-size: 13px; }
.notif {
  display: flex; gap: 12px; padding: 12px 16px; color: inherit; border-top: 1px solid #f1f4f8; position: relative;
  transition: background 0.12s;
}
.notif:first-child { border-top: 0; }
.notif:hover { background: #f8f9ff; color: inherit; }
.notif.unread { background: #fafbff; }
.notif.unread::after { content: ""; position: absolute; right: 16px; top: 18px; width: 8px; height: 8px; border-radius: 999px; background: var(--brand); }
.notif .bubble { width: 34px; height: 34px; border-radius: 999px; }
.notif .bubble .icon { width: 16px; height: 16px; }
.notif-title { font-weight: 650; font-size: 13.5px; color: var(--text); padding-right: 18px; }
.notif-msg { font-size: 12.5px; color: var(--muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-time { font-size: 11.5px; color: var(--faint); margin-top: 4px; }
.lvl-info { --c-bg: #eaf5fb; --c-fg: #155f8c; --c-dot: #38a9de; }
.lvl-success { --c-bg: #f0fdf4; --c-fg: #15803d; --c-dot: #22c55e; }
.lvl-warning { --c-bg: #fffbeb; --c-fg: #b45309; --c-dot: #f59e0b; }
.lvl-danger { --c-bg: #fef2f2; --c-fg: #b91c1c; --c-dot: #ef4444; }
.lvl-error { --c-bg: #fef2f2; --c-fg: #b91c1c; --c-dot: #ef4444; }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--pad-x); border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.pagination .pages { display: flex; gap: 6px; }

/* ---------- Auth (login) ---------- */
/* Sign-in: a split screen. On the left, deep blue bands sweeping out of the top-right corner
   (static/img/signin-waves.svg, drawn by tools/make_signin_waves.py) with one line of welcome on the dark side;
   on the right, a plain white sign-in panel. */
.signin-page {
  --ink: #0a2342;
  --tide: #134b7a;
  --survey: #38a9de;
  --amber: #f5b83d;
  --panel: clamp(480px, 34vw, 680px);     /* width of the sign-in panel */
  min-height: 100vh;
  background: #050820;
  overflow-x: hidden;
}
.signin-art {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 0; width: calc(100% - var(--panel));
  display: flex; align-items: center;          /* the message and the form share one centre line: same top and */
  padding: 48px clamp(40px, 6vw, 112px) 67px;    /* bottom room as the panel (its footer is the extra 39px below) */
  box-sizing: border-box;
  background: #050820 url("../img/signin-waves.567b1e00b389.svg") center / cover no-repeat;
}
.signin-message { position: relative; isolation: isolate; max-width: 40rem; color: #fff; }
.signin-message::before {                   /* a soft blue light behind the block, lifting it off the bands */
  content: ""; position: absolute; z-index: -1; inset: -22% -30% -26% -18%;
  background: radial-gradient(closest-side, rgba(46, 82, 255, 0.32), rgba(46, 82, 255, 0) 100%);
  pointer-events: none;
}
.signin-message-logo {                      /* the wordmark has no padding, so it starts on the headline's left edge */
  display: block; width: clamp(160px, 10.5vw, 212px); height: auto; margin-bottom: clamp(36px, 5.5vh, 60px);
}
.signin-message h2 {
  margin: 0; color: #fff;
  font-family: "Bricolage Grotesque", var(--font);
  font-size: clamp(40px, 3.6vw, 66px); font-weight: 650; line-height: 1.03; letter-spacing: -0.038em;
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
  background: linear-gradient(172deg, #ffffff 0%, #ffffff 38%, #c4d2ff 72%, #93b4ff 100%);   /* light falling from above */
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 8px 30px rgba(70, 110, 255, 0.4));
}
.signin-message-rule {                      /* a short glowing stroke in the logo blue between the headline and the line under it */
  display: block; width: 56px; height: 3px; margin: 32px 0 24px; border-radius: 3px;
  background: linear-gradient(90deg, #38a9de, #8aa8ff);
  box-shadow: 0 0 14px rgba(56, 169, 222, 0.75), 0 0 2px rgba(138, 168, 255, 0.9);
  transform-origin: left center;
}
.signin-message p {
  margin: 0; max-width: 27rem;
  font-size: clamp(16px, 1.15vw, 19px); font-weight: 400; line-height: 1.65; letter-spacing: 0.003em;
  color: #cdd6ff; opacity: 0.9;
  text-wrap: pretty;
}
/* one entrance on load: logo, headline, stroke (drawn from the left), then the line under it */
.signin-message-logo, .signin-message h2, .signin-message p { animation: signin-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.signin-message h2 { animation-delay: 0.08s; }
.signin-message-rule { animation: signin-draw 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both; }
.signin-message p { animation-delay: 0.38s; }
@keyframes signin-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes signin-draw { from { opacity: 0; transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .signin-message-logo, .signin-message h2, .signin-message-rule, .signin-message p { animation: none; }
}
.signin {
  position: relative; z-index: 1; min-height: 100vh;
  display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center;
  width: var(--panel);
  margin-left: auto;
  padding: 48px 56px 28px;
  background: #fff;
  box-shadow: -24px 0 60px -30px rgba(2, 3, 12, 0.7);
}
.signin-card {
  width: 100%; max-width: 380px;
  animation: signin-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes signin-in { from { opacity: 0; transform: translateY(8px); } }
.signin-logo { display: none; width: 156px; height: auto; margin-bottom: 56px; }   /* phones only: on wider screens the logo is on the left */
.signin-title {
  font-family: "Bricolage Grotesque", var(--font);
  font-size: 34px; font-weight: 650; line-height: 1.12; letter-spacing: -0.03em;
  font-variation-settings: "opsz" 96; color: var(--ink);
}
.signin-lead { margin-top: 8px; font-size: 15px; line-height: 1.5; color: #6b7686; }
.signin-form { margin-top: 34px; }
.signin .field { margin-bottom: 18px; }
.signin .field > label { margin-bottom: 7px; font-size: 13px; font-weight: 600; color: #2b374a; }
.signin .input {
  height: 48px; padding: 0 14px; border-radius: 11px;
  background: #fff; border: 1px solid #dde3ea; box-shadow: 0 1px 2px rgba(10, 35, 66, 0.04);
  color: var(--ink); font-size: 15px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.signin .input::placeholder { color: #9aa5b4; }
.signin .input:hover { border-color: #c5cfda; }
.signin .input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(10, 35, 66, 0.08); }
.signin .password-wrap { position: relative; }
.signin .password-wrap .input { padding-right: 50px; }
.signin .reveal {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 8px; border: 0; background: transparent;
  display: grid; place-items: center; color: #8a95a5; cursor: pointer;
}
.signin .reveal:hover { background: #f1f4f8; color: var(--ink); }
.signin .reveal:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.signin-caps { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: #a16207; }
.signin-caps[hidden] { display: none; }
.signin-caps .icon { width: 14px; height: 14px; }
.signin-submit {
  width: 100%; height: 48px; margin-top: 10px; border-radius: 11px; border: 0; cursor: pointer;
  background: var(--ink); color: #fff;
  box-shadow: 0 1px 2px rgba(10, 35, 66, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font: inherit; font-size: 15px; font-weight: 600;
  transition: background 0.15s, transform 0.05s;
}
.signin-submit:hover { background: #14365e; }
.signin-submit:active { transform: translateY(1px); }
.signin-submit:focus-visible { outline: 3px solid var(--survey); outline-offset: 3px; }
.signin-help { margin-top: 26px; font-size: 13px; line-height: 1.5; color: #8a95a5; }
.signin .form-errors { margin: 22px 0 0; }
.signin-foot { width: 100%; max-width: 380px; margin-top: 20px; font-size: 12.5px; font-weight: 500; color: #9aa5b4; }
@media (prefers-reduced-motion: reduce) { .signin-card { animation: none; } }

@media (max-height: 760px) and (min-width: 721px) {
  .signin { padding-top: 28px; padding-bottom: 20px; }
  .signin-art { padding-top: 28px; padding-bottom: 59px; }
  .signin-form { margin-top: 24px; }
  .signin .field { margin-bottom: 14px; }
  .signin-help { margin-top: 18px; }
}
@media (max-width: 1100px) and (min-width: 721px) {
  .signin-page { --panel: min(480px, 55%); }
  .signin { padding-left: 48px; padding-right: 48px; }
  .signin-message h2 { font-size: 34px; }
}
@media (max-width: 720px) {                  /* phones: the panel sits on top, the ridges show beneath it */
  .signin-art { width: 100%; }
  .signin-message { display: none; }
  .signin-logo { display: block; }
  .signin {
    width: 100%; min-height: auto; padding: 32px 22px 24px;
    border-radius: 0 0 24px 24px; box-shadow: 0 24px 50px -24px rgba(3, 12, 26, 0.7);
  }
  .signin-logo { margin-bottom: 36px; }
}

/* ---------- Charts (HTML marks; specs: ≤24px bars, 4px data-end radius, 2px surface gap) ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-2); }
.legend-item { display: inline-flex; align-items: center; gap: 7px; font-weight: 550; }
.legend-item .icon { width: 14px; height: 14px; color: var(--muted); }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--sw); }

.hbars { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: 132px minmax(0, 1fr) 40px; align-items: center; gap: 12px; }
.hbar-label { font-size: 13px; color: var(--text-2); font-weight: 550; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-track { position: relative; height: 16px; display: flex; gap: 2px; border-left: 1px solid #c9d0db; padding-left: 0; }
.hbar-seg { position: relative; height: 100%; min-width: 0; background: var(--sw); outline: none; }
.hbar-seg:last-child { border-radius: 0 4px 4px 0; }
.hbar-seg:hover, .hbar-seg:focus-visible { filter: brightness(1.08); }
.hbar-value { font-size: 12.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.hbar-value.zero { color: var(--faint); font-weight: 600; }

.cols { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding-top: 18px; }
.cols-axis { position: relative; height: 180px; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.cols-axis span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; }
.cols-plot { position: relative; height: 180px; display: flex; align-items: flex-end; justify-content: space-around; border-bottom: 1px solid #c9d0db; }
.cols-grid { position: absolute; inset: 0; pointer-events: none; }
.cols-grid span { position: absolute; left: 0; right: 0; border-top: 1px solid var(--grid); }
.col-group { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.col { width: 20px; background: var(--sw); border-radius: 4px 4px 0 0; position: relative; outline: none; min-height: 0; }
.col:hover, .col:focus-visible { filter: brightness(1.08); }
.col-cap { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 11.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.cols-x { grid-column: 2; display: flex; justify-content: space-around; font-size: 12px; color: var(--muted); font-weight: 550; padding-top: 8px; }
.cols-x span { width: 42px; text-align: center; }

.dept-rows { display: grid; gap: 16px; }
.dept-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.dept-row-name { font-weight: 650; font-size: 13.5px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.dept-row-meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dept-row-meta b { color: var(--text); font-weight: 700; }
.dept-row .hbar-track { height: 14px; }
.dept-row-foot { margin-top: 6px; font-size: 12px; color: var(--muted); display: flex; gap: 4px 12px; flex-wrap: wrap; }
.dept-row-when { margin-left: auto; }
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  padding: 6px 10px; border-radius: 8px; background: #0f172a; color: #fff; font-size: 12px; font-weight: 600;
  white-space: nowrap; z-index: 20; pointer-events: none; box-shadow: var(--shadow);
}
.table-view { margin-top: 14px; font-size: 13px; max-width: 100%; overflow-x: auto; }
.table-view summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.table-view summary::-webkit-details-marker { display: none; }
.table-view summary:hover { color: var(--brand-600); }
.table-view[open] summary { margin-bottom: 10px; }
.table-view table { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.table-view .table th, .table-view .table td { padding: 8px 10px; }
.table-view .table th { white-space: normal; line-height: 1.3; vertical-align: bottom; }

/* ---------- Help page ---------- */
.flow { display: grid; gap: 0; counter-reset: flow; }
.flow-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; position: relative; padding-bottom: 22px; }
.flow-step::before { content: ""; position: absolute; left: 21px; top: 46px; bottom: 0; width: 2px; background: linear-gradient(#a9d7ef, #b8e6d6); }
.flow-step:last-child::before { display: none; }
.flow-step .bubble { width: 44px; height: 44px; border-radius: 999px; }
.who-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 2px 9px; border-radius: 999px; }
.who-sales { background: #e8f1fc; color: #1c5cab; }
.who-dept { background: #f0fdfa; color: #0f766e; }
.who-client { background: #fdf4ff; color: #a21caf; }
.who-admin { background: #fff1f2; color: #be123c; }
.role-card { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.role-card h4 { display: flex; align-items: center; gap: 10px; font-size: 15px; margin-bottom: 10px; }
.role-card ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 13.5px; display: grid; gap: 6px; }

/* ---------- Errors ---------- */
.error-page { min-height: calc(100vh - 160px); display: grid; place-items: center; text-align: center; padding: 40px 20px; }
.error-code { font-size: 64px; font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(135deg, #1a72a8, #38a9de); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }

/* ---------- Utilities ---------- */
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.strong { font-weight: 700; color: var(--text); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0 !important; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; }
.gap-6 { gap: 6px; } .gap-16 { gap: 16px; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.divider-dot::before { content: "·"; margin: 0 2px; color: var(--faint); }
.inline-form { display: inline; }
.callout {
  display: flex; gap: 12px; padding: 13px 15px; border-radius: 12px; font-size: 13.5px;
  background: var(--c-bg, var(--brand-50)); color: var(--c-fg, var(--brand-700)); border: 1px solid var(--c-line, var(--brand-200));
}
.callout .icon { margin-top: 1px; }
/* the client's feedback while a revision waits or runs: a quoted note, not a warning */
.fb-note { display: flex; gap: 14px; padding: 15px 18px; border: 1px solid var(--border); border-left: 3px solid #fb923c; border-radius: 12px; background: var(--surface); }
.fb-mark { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: #fff4ec; color: #c2410c; }
.fb-mark .icon { width: 16px; height: 16px; }
.fb-body { min-width: 0; }
.fb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 14px; color: var(--text); }
.fb-head b { font-weight: 650; }
.fb-round { padding: 1px 8px; border-radius: 999px; background: #fff4ec; color: #c2410c; font-size: 11.5px; font-weight: 650; }
.fb-text { margin: 7px 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.fb-meta { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.callout b { color: inherit; }
.delete-effects { display: grid; gap: 6px; padding-left: 18px; list-style: disc; }
.section-title { font-size: 16px; font-weight: 720; margin: 28px 0 14px; display: flex; align-items: center; gap: 10px; }

/* ---------- Responsive ---------- */
/* Side-by-side layouts only when every column gets enough room. */
@container content (max-width: 1071px) {
  .kpis { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpis-5 > * { grid-column: span 2; }
  .kpis-5 > :nth-child(n+4) { grid-column: span 3; }
}
@container content (max-width: 939px) {
  .grid-main-side, .grid-side-main { grid-template-columns: minmax(0, 1fr); }
  .aside-sticky { position: static; }
  .grid-main-side .card-body.fill-scroll { contain: none; flex: none; max-height: 440px; }
}
@container content (max-width: 899px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .grid-2 .card-body.fill-scroll { contain: none; flex: none; max-height: 440px; }
}
@container content (max-width: 639px) {
  .kpis, .kpis-5, .kpis-4 { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 15px 16px 14px; }
  .kpi-value { font-size: 32px; }
  .kpis-5 > *, .kpis-5 > :nth-child(n+4) { grid-column: auto; }
  .kpis-5 > :last-child { grid-column: span 2; }
}
/* On desktop the menu button hides the sidebar for more room; the choice is remembered. */
@media (min-width: 1025px) {
  .sidebar-collapsed .app { grid-template-columns: minmax(0, 1fr); background: var(--bg); }
  .sidebar-collapsed .sidebar { display: none; }
  .sidebar-collapsed .topbar-logo { display: inline-flex; }
}
@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; background: var(--bg); }
  .sidebar { position: fixed; left: 0; top: 0; width: var(--sidebar-w); transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: var(--shadow-lg); }
  .sidebar-open .sidebar { transform: none; }
  .sidebar-open .scrim { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 35; }
  .topbar-logo { display: inline-flex; }
}
@media (max-width: 720px) {
  .content { padding: 20px 16px 40px; }
  .topbar { padding: 0 16px; gap: 10px; }
  .topbar-date, .search kbd { display: none; }
  .topbar .btn-primary span { display: none; }
  .topbar .btn-primary { width: 40px; padding: 0; }
  .page-title { font-size: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .radio-cards { grid-template-columns: 1fr; }
  .fact { grid-template-columns: 1fr; gap: 2px; }
  .hbar { grid-template-columns: 96px minmax(0, 1fr) 32px; }
  .hero { padding: 22px 20px; min-height: 0;
    background: linear-gradient(180deg, rgba(10, 35, 66, 0.35), rgba(10, 35, 66, 0.7)),
      url("../img/hero-contours.0ac53dee849b.svg") right center / cover no-repeat, var(--abyss); }
  .hero h1 { font-size: 26px; }
  .hero-pill { font-size: 13px; }
  .toasts { right: 16px; top: 72px; }
  .chip { white-space: normal; }
  .search { min-width: 0; }
  .search input { min-width: 0; padding-right: 12px; }
}
/* ---------- Users & logins: the admin's look at a password ---------- */
.pw { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.pw-value {
  min-width: 7.5rem; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; font-weight: 600;
  color: var(--muted); letter-spacing: 0.06em; white-space: nowrap;
}
.pw.is-shown .pw-value { color: var(--text); letter-spacing: 0; user-select: all; }
.pw-btn { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.pw-btn:hover { background: var(--surface-3); color: var(--brand-700); }
.pw-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pw-btn .icon { width: 15px; height: 15px; }
.pw-btn.is-done { color: #15803d; }
.pw-unknown { font-size: 13px; font-style: italic; color: var(--faint); }
.pw-current { display: grid; gap: 6px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.pw-current-label { font-size: 13px; font-weight: 600; color: var(--text-2); }

@media (max-width: 400px) {
  .topbar { gap: 8px; padding: 0 12px; }
  .topbar-logo img { height: 16px; }
  .topbar .icon-btn, .topbar .btn-primary { width: 36px; height: 36px; }
  .search input { padding-left: 34px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .sidebar, .topbar, .page-actions, .toasts, .next-actions { display: none !important; }
  .app { display: block; }
  .card { box-shadow: none; }
}