/*
 * firmament.css — the single, common stylesheet for the whole platform
 * (FIRMAMENT.md §2/§3). Every module renders into this layout and uses these
 * tokens and components; modules never ship their own stylesheets.
 *
 * Design language (decided 2026-06-25): navy is the fixed structural colour;
 * a single --accent token swaps by the owning company (Outsideology neon green
 * by default, Earth Station Systems turquoise via [data-brand="ess"]). Type is
 * Space Grotesk (display), Inter (UI), JetBrains Mono (codes) — all self-hosted
 * under /static/fonts (no CDN). Tone: cool and precise, navy-dominant with a
 * restrained accent. Icons are a self-hosted SVG sprite (static/img/icons.svg).
 */

/* ---- self-hosted fonts (no CDN — CLAUDE.md) ---------------------------- */
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/space-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/space-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/jetbrains-mono-500.woff2") format("woff2"); }

/* ---- design tokens ----------------------------------------------------- */
:root {
  /* Brand — navy is fixed across both companies. */
  --navy-900: #0B1A33;
  --navy-800: #0F2444;
  --navy-700: #1A3460;

  /* Accent — Outsideology neon green by default; [data-brand] swaps it.
     --accent-ink is the readable text colour to sit ON an accent fill. */
  --accent: #B6FF3A;
  --accent-ink: #0B1A33;

  /* Neutrals. */
  --canvas: #F4F6FA;
  --surface: #FFFFFF;
  --ink: #0B1A33;
  --muted: #5A6679;
  --line: #E3E8F0;
  --on-dark: #E8EEF7;
  --on-dark-muted: #94A4BE;

  /* Functional status — deliberately distinct from the neon brand green. */
  --success: #2BA46B;
  --warning: #E0A325;
  --danger: #D24B40;
  --info: #3E7DD6;

  /* Typography. */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Layout. */
  --sidebar-w: 232px;
  --topbar-h: 56px;
  --radius: 8px;
  --radius-card: 12px;
  --space: 1rem;
}

/* Earth Station Systems projects: only the accent changes. */
[data-brand="ess"] { --accent: #1FD6CE; }

/* ---- reset & base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--ink); line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; font-weight: 500; }

p { margin: 0 0 0.9rem; }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

/* ---- icons (SVG sprite) ------------------------------------------------ */
.icon {
  width: 1.25rem; height: 1.25rem; flex: none; vertical-align: -0.22em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-sm { width: 1rem; height: 1rem; }

/* ---- app shell (authenticated) ---------------------------------------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  min-height: 100vh;
}

.topbar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px;
  background: var(--navy-900);
  color: var(--on-dark);
  padding: 0 18px;
}
.brand { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #fff; text-decoration: none; letter-spacing: 0.01em; }
.brand .brand-dot { color: var(--accent); }
.topbar .spacer { flex: 1; }
.topbar-user { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 600; font-size: 0.72rem;
  display: flex; align-items: center; justify-content: center;
}
.topbar-user .who { font-size: 0.82rem; color: var(--on-dark-muted); }
.linkbtn { background: none; border: 0; color: var(--on-dark); font: inherit; font-size: 0.82rem; cursor: pointer; padding: 0; }
.linkbtn:hover { color: #fff; text-decoration: underline; }

.sidebar { grid-column: 1; background: var(--navy-800); padding: 12px 10px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; margin-bottom: 2px; border-radius: var(--radius);
  color: var(--on-dark-muted); font-size: 0.9rem; text-decoration: none;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--on-dark); text-decoration: none; }
.nav-item.is-active { background: rgba(255, 255, 255, 0.07); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.nav-item.is-active .icon { color: var(--accent); }
.nav-item.is-upcoming { color: #5f6f8c; cursor: default; }
.nav-item .tag-soon { margin-left: auto; font-size: 0.62rem; letter-spacing: 0.04em; color: var(--on-dark-muted); border: 0.5px solid #2b446e; border-radius: 20px; padding: 1px 7px; }
.nav-group { margin: 14px 11px 6px; font-size: 0.68rem; letter-spacing: 0.06em; color: #4f628a; }

.main { grid-column: 2; padding: 26px 30px; min-width: 0; }
.page-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.page-head .sub { margin: 2px 0 0; color: var(--muted); font-size: 0.85rem; }
.page-head .actions { margin-left: auto; }

/* ---- centered layout (anonymous: sign in, errors) --------------------- */
.plain { min-height: 100vh; display: flex; flex-direction: column; align-items: center; }
.plain-bar { width: 100%; background: var(--navy-900); padding: 0 18px; height: var(--topbar-h); display: flex; align-items: center; }
.plain-body { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 410px; background: var(--surface); border: 0.5px solid var(--line); border-radius: var(--radius-card); padding: 1.75rem 1.9rem; }
.auth-card h1 { font-size: 1.35rem; }
.auth-card form { margin-top: 1rem; }
.auth-card p:last-child { margin-bottom: 0; }

/* ---- components -------------------------------------------------------- */
.card { background: var(--surface); border: 0.5px solid var(--line); border-radius: var(--radius-card); padding: 1.1rem 1.25rem; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 0.9rem var(--font-sans);
  padding: 8px 15px; border-radius: var(--radius);
  border: 0.5px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: #c9d2e0; text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn-primary:hover { filter: brightness(0.96); border-color: transparent; }

label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
input, select, textarea {
  width: 100%; font: 400 0.95rem var(--font-sans); color: var(--ink);
  background: var(--surface); border: 0.5px solid var(--line);
  border-radius: var(--radius); padding: 9px 11px;
}
/* Checkboxes and radios are natural-size controls — the 100% width above
   would give them a full-row layout box, crushing any label text beside
   them (seen on the Access page's authorise tickbox, 2026-07-05). */
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 52, 96, 0.08); }
.helptext, .form-row p { font-size: 0.8rem; color: var(--muted); }
.errorlist, .error { color: var(--danger); font-size: 0.85rem; margin: 0 0 0.8rem; padding-left: 0; list-style: none; }
/* Inline confirmation (e.g. "invite sent", a just-issued API token). */
.notice { background: #f2f8f4; border: 0.5px solid var(--success); border-radius: var(--radius); padding: 10px 12px; font-size: 0.9rem; margin: 0 0 0.8rem; overflow-wrap: anywhere; }

table.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.table th { text-align: left; font-weight: 500; color: var(--muted); font-size: 0.76rem; letter-spacing: 0.03em; border-bottom: 1px solid var(--ink); padding: 8px 10px; }
table.table td { padding: 10px; border-bottom: 0.5px solid var(--line); }
table.table tr:hover td { background: #fbfcfe; }
.num { text-align: right; font-family: var(--font-mono); }

.pill { display: inline-block; font-size: 0.72rem; font-weight: 500; padding: 3px 10px; border-radius: 20px; }
.pill-neutral { background: #EEF1F6; color: #47526a; }
.pill-info { background: #E6EFFB; color: #225394; }
.pill-success { background: #E2F4EC; color: #1C6E48; }
.pill-warning { background: #FBF0DC; color: #8A5B12; }
.pill-danger { background: #FaE7E5; color: #97302a; }

/* ---- project workspace (status strip: phase stepper + disposition) ----- */
.status-strip { display: flex; align-items: center; gap: 14px; margin: 4px 0 0; min-height: 26px; }
.phase-stepper { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.phase-step { display: flex; align-items: center; gap: 6px; }
.phase-step .dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; display: inline-block; }
.phase-step.is-done .dot { background: var(--navy-700); border-color: var(--navy-700); }
.phase-step.is-current .dot { background: var(--accent); border-color: var(--accent); }
.phase-step .phase-label { font-size: 0.82rem; font-weight: 600; }
/* Key-roles table: role and since stay tight so the assign/substitute
   column (with its contact picker) gets the width. */
.key-roles .col-role { width: 15%; }
.key-roles .col-since { width: 9%; white-space: nowrap; }
.key-roles .col-assign { width: 42%; }
.key-roles .col-assign details { margin-top: 0; }
.key-roles .col-assign form { margin-top: 8px; }
/* The "+N more" link under a capped workspace table. */
.more-link { margin: 8px 0 0; font-size: 0.85rem; }
/* ---- tickets (register + ticket page) ----------------------------------- */
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; white-space: nowrap; }
.toggle input[type="checkbox"] { margin: 0; }
.inline-form { display: inline-block; margin-left: 8px; }
.timeline { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.timeline-comment { background: var(--canvas); border: 0.5px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.timeline-comment.is-internal { background: #FBF6E9; border-color: #E8D9A8; }
.timeline-meta { margin: 0 0 4px; display: flex; gap: 8px; align-items: center; font-size: 0.85rem; }
.timeline-body { margin: 0; }
.timeline-change { font-size: 0.85rem; }
/* The little ✕ inside an audience pill. */
.pill-remove { background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.72rem; padding: 0 0 0 4px; color: inherit; }
/* Comment box first (newest-first feed): button + internal tick stacked
   to its right. */
.comment-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; }
.comment-row textarea { flex: 1; min-width: 0; }
.comment-side { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
/* A picker with its action button beside it (e.g. reassign). */
.picker-row { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; }
.picker-row .contact-picker { flex: 1; min-width: 0; }
.picker-row button { flex: none; }
/* Audience pills with the add-a-role select inline after them. */
.audience-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.audience-row select { width: auto; }
.audience-row .sub, .audience-row p { margin: 0; }

/* An icon-only action button (e.g. the project-settings cog). Padding and
   flex alignment keep it the same height and baseline as its .btn
   neighbours; the header actions row centres its items for the same
   reason (a bare span wrapper, e.g. #quote-actions, dissolves into the
   row with display: contents). */
.page-head .actions { display: flex; align-items: center; gap: 8px; }
.page-head .actions > span { display: contents; }
.btn-icon { padding: 8px 9px; }
.btn-icon .icon { width: 18px; height: 18px; display: block; }

/* ---- dashboard tiles --------------------------------------------------- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.tile { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 0.5px solid var(--line); border-radius: var(--radius-card); padding: 1.1rem 1.2rem; color: var(--ink); text-decoration: none; }
.tile:hover { border-color: #c9d2e0; text-decoration: none; }
.tile .icon { color: var(--muted); }
.tile.is-live .icon { color: var(--ink); }
.tile h3 { margin: 0; }
.tile p { margin: 0; font-size: 0.85rem; color: var(--muted); }
/* The headline figure on summary cards (e.g. the IMS home's live register
   counts) — a big number between the card title and its caption. */
.tile .stat { font-size: 1.9rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
.tile .go { margin-top: auto; color: var(--info); font-size: 0.82rem; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.tile.is-upcoming { opacity: 0.7; }
.tile.is-upcoming .go { color: var(--muted); }

/* ---- enquiry detail / timeline (UI-1) ---------------------------------- */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; align-items: start; }
.detail-grid h2 { font-size: 1.05rem; margin-bottom: 10px; }
/* Editor-page layout (full-width stacked sections — quote detail etc.). */
main > section { margin-top: 24px; }
main > section > h2 { font-size: 1.05rem; margin-bottom: 10px; }
/* The add row at the foot of an editor table (inputs live in the cells). */
.add-line-row td { vertical-align: top; border-top: 1.5px solid var(--line); background: #fbfcfe; }
.add-line-row input, .add-line-row select { margin: 2px 0; }
.note-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.note-form textarea { resize: vertical; }
.note-form button { align-self: flex-start; }
.event { padding: 10px 0; border-bottom: 0.5px solid var(--line); }
.event:last-child { border-bottom: 0; }
.event-meta { display: flex; gap: 10px; font-size: 0.78rem; color: var(--muted); margin-bottom: 3px; }
.event-who { font-weight: 500; color: var(--ink); }
.event-body { font-size: 0.9rem; }
@media (max-width: 760px) { .detail-grid { grid-template-columns: 1fr; } }

/* ---- quote detail (UI-2) ----------------------------------------------- */
.totals-table { margin-left: auto; margin-top: 12px; border-collapse: collapse; }
.totals-table td { padding: 4px 10px; }
.totals-table tr.grand td { border-top: 1.5px solid var(--ink); font-weight: 600; font-size: 1.05rem; }
.docmeta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 14px; font-size: 0.9rem; }
.docmeta dt { color: var(--muted); }
.docmeta dd { margin: 0; }
.reissue { margin-top: 18px; padding-top: 14px; border-top: 0.5px solid var(--line); }

/* ---- document detail / approval workflow (AL-1) ------------------------ */
.signoff { margin-bottom: 16px; }
.signoff .event-body { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.signoff-actions { display: flex; gap: 8px; }

/* ---- toasts (error surfacing; reusable) -------------------------------- */
.toast-host { position: fixed; right: 16px; bottom: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.toast { background: var(--ink); color: var(--on-dark); padding: 10px 14px; border-radius: var(--radius); font-size: 0.85rem; line-height: 1.35; box-shadow: 0 6px 20px rgba(11, 26, 51, 0.28); cursor: pointer; }

/* ---- document sharing + acceptance (AL-2) ------------------------------ */
.share-list, .ack-status { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.share-list li { display: flex; align-items: center; gap: 8px; }
.share-list li form { margin: 0; }
.checkline { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.ack-statement { font-style: italic; padding: 10px 12px; background: var(--canvas); border-left: 3px solid var(--accent); border-radius: 6px; margin: 0 0 10px; }
.reject-form { margin-top: 14px; padding-top: 12px; border-top: 0.5px solid var(--line); }

/* ---- authoring forms (quote lines, new enquiry, mark lost) -------------- */
.btn-small { padding: 4px 10px; font-size: 0.78rem; }
/* Competency certificate chips on the contact page (competence §14.7): the
   attached-document link with its inline detach button, kept on one line. */
.cert-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
             font-size: 0.85rem; }
.cert-chip .inline-form { display: inline; }
.cert-chip .inline-form button { padding: 0 6px; line-height: 1.4; }
.btn-danger { color: var(--danger); border-color: #ecc7c3; }
.btn-danger:hover { border-color: var(--danger); }
table.table td.row-actions, table.table th.row-actions { width: 1%; white-space: nowrap; text-align: right; }
.row-actions .error { white-space: normal; margin: 6px 0 0; }
tr.line-edit td { vertical-align: top; }
tr.line-edit input, tr.line-edit select { font-size: 0.85rem; padding: 6px 8px; margin-bottom: 6px; }
.line-add-form { margin-top: 18px; padding-top: 14px; border-top: 0.5px solid var(--line); }
.line-add-form h3 { margin-bottom: 8px; }
.field-row { display: flex; gap: 8px; margin-bottom: 8px; }
.field-row input, .field-row select { flex: 1; min-width: 0; }
.field-row button { flex: none; }
.stacked-form { display: flex; flex-direction: column; gap: 4px; max-width: 560px; }
.stacked-form label { margin-top: 10px; }
.stacked-form .actions { margin-top: 16px; }
.mark-lost { margin-top: 18px; }
.mark-lost summary { cursor: pointer; font-size: 0.85rem; color: var(--muted); margin-bottom: 10px; }

/* ---- contacts register --------------------------------------------------- */
.search-form { display: flex; gap: 8px; margin-bottom: 18px; max-width: 460px; }
.search-form input { flex: 1; }
.dupe-warning { margin: 12px 0; padding: 12px 14px; background: #FBF0DC; border-left: 3px solid var(--warning); border-radius: 6px; }
.dupe-warning ul { margin: 0 0 8px; padding-left: 18px; }
.dupe-warning p:last-of-type { margin-bottom: 0; }
.assign-form { margin-bottom: 20px; }
.assign-form .field-row { margin-top: 8px; }
.check-label { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; margin-bottom: 10px; max-width: 460px; }
.check-label input { margin-top: 3px; flex: none; }
.row-actions-inline { display: flex; gap: 8px; margin-bottom: 10px; }

/* ---- required marker -------------------------------------------------------
   Required fields carry a red asterisk on the label (the platform
   convention, decided 2026-07-05); optional fields are unmarked. */
.req { color: var(--danger); margin-left: 2px; font-weight: 600; }

/* ---- contact picker ---------------------------------------------------------
   The reusable search-driven contact chooser (contacts/_picker.html): a
   search box that lists matches as radio options inside the parent form —
   the standard control wherever a <select> of contacts would not scale. */
.contact-picker input[type="search"] { margin-bottom: 6px; }
.picker-options { list-style: none; margin: 0 0 8px; padding: 0; border: 0.5px solid var(--line);
  border-radius: var(--radius); max-height: 220px; overflow-y: auto; background: var(--surface); }
.picker-options li + li { border-top: 0.5px solid var(--line); }
.picker-options label { display: flex; gap: 8px; align-items: center; padding: 8px 11px;
  cursor: pointer; font-size: 0.9rem; }
.picker-options label:hover { background: var(--canvas); }
.picker-options input[type="radio"] { width: auto; margin: 0; }

/* ---- help tips ------------------------------------------------------------
   The standard way to attach help to a field or heading: a small "?" blob
   whose tip (the data-tip attribute) pops up on hover or keyboard focus.
   Rendered by the help_tip tag (core.templatetags.list_controls). */
.help-tip { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; background: var(--muted); color: var(--surface);
  font-size: 0.65rem; font-weight: 600; line-height: 1; cursor: help; vertical-align: 1px; user-select: none; }
.help-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%); width: max-content; max-width: 260px; padding: 8px 11px;
  background: var(--navy-800); color: var(--on-dark); font-size: 0.75rem; font-weight: 400;
  line-height: 1.45; border-radius: 6px; box-shadow: 0 4px 14px rgba(11, 26, 51, 0.25);
  opacity: 0; visibility: hidden; transition: opacity 0.12s ease; pointer-events: none; z-index: 40; }
.help-tip:hover::after, .help-tip:focus-visible::after { opacity: 1; visibility: visible; }

/* ---- live lists -----------------------------------------------------------
   The standard list pattern: a search box that updates the table as you
   type (HTMX fragment swaps), filter selects beside it, and sortable column
   headers (the sort_header tag) with an arrow on the current column. */
.list-controls { display: flex; gap: 8px; margin-bottom: 18px; max-width: 560px; }
/* Registers with more/longer filters (e.g. the NCR register's three
   selects) get more room so the search box keeps a usable width. */
.list-controls.wide { max-width: 800px; }
/* The base rule gives inputs/selects width:100%; inside this flex row that
   would let the select claim the whole track and crush the search box, so
   both get explicit flex shares instead. */
.list-controls input[type="search"] { flex: 1 1 auto; width: auto; min-width: 0; }
.list-controls select { flex: 0 0 auto; width: auto; }
th.sortable a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
th.sortable a:hover { color: var(--ink); text-decoration: underline; }
th.sortable .sort-arrow { font-size: 0.55rem; color: var(--muted); }

/* --- Top-bar tools: notifications bell + settings cog (§12) -------------- */
.topbar-tools { display: flex; align-items: center; gap: 4px; }
.tool-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  color: var(--on-dark-muted); text-decoration: none;
}
.tool-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.tool-btn.is-active { color: #fff; background: rgba(255, 255, 255, 0.1); }
/* The count blob sits on the top-right of the bell; hidden when empty (the
   span holds no .blob at a zero count, so nothing shows). */
.bell-blob { position: absolute; top: 3px; right: 3px; }
.bell-blob .blob {
  display: block; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 8px; background: var(--danger); color: #fff;
  font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; line-height: 16px;
  text-align: center;
}

/* --- Notifications page (§12) ------------------------------------------- */
.notif-groups { display: flex; flex-direction: column; gap: 14px; }
.notif-group h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 0.6rem; font-size: 1rem; }
.count-chip {
  display: inline-block; min-width: 20px; padding: 0 6px; box-sizing: border-box;
  border-radius: 10px; background: var(--canvas); border: 0.5px solid var(--line);
  color: var(--muted); font-size: 0.72rem; font-weight: 600; text-align: center; line-height: 18px;
}
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 0.5px solid var(--line);
}
.notif-item:first-child { border-top: 0; }
.notif-item .sev-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--info); }
.notif-item.sev-critical .sev-dot { background: var(--danger); }
.notif-item.sev-escalation .sev-dot { background: var(--warning); }
.notif-link { flex: 1; color: var(--ink); text-decoration: none; }
.notif-link:hover { text-decoration: underline; }
.notif-age { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.empty-state { color: var(--muted); text-align: center; padding: 2rem 1rem; }

/* --- Company settings screen (§12) -------------------------------------- */
.settings-form .setting-block + .setting-block { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 0.5px solid var(--line); }
.settings-form .setting-block h2 { margin: 0 0 0.3rem; font-size: 1rem; }
.setting-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0.6rem 0 0.3rem; }
.setting-row input[type="number"] { width: 5rem; }
.setting-row select { width: auto; }
.settings-form .hint { font-size: 0.8rem; margin: 0.2rem 0 0; }
.settings-form .actions { margin-top: 1.4rem; }

/* --- Stages & invoice points screen (§4, slice D1) ----------------------- */
.stages-meta { margin: 0 0 0.8rem; }
.stages-table td.stage-part { padding-left: 28px; }
.stages-table td.point-cell { padding-left: 28px; }
.stages-table td.stage-part + td, .stages-table tr .stage-part { }
.stages-table .input-tiny { width: 4.5rem; }
.stages-table .input-small { width: 7rem; }
.stages-table tr.stage-row td { background: var(--canvas); }
.stage-list { margin: 0 0 0.8rem; padding-left: 1.4rem; }
.stage-list li { padding: 2px 0; }
.stage-list ul { list-style: circle; padding-left: 1.4rem; }

/* --- Drag-to-reorder (reorder.js, D4) ------------------------------------ */
tr[draggable="true"] { cursor: grab; }
tr.reorder-dragging { opacity: 0.45; }
.drag-handle { color: var(--muted); margin-right: 6px; cursor: grab; user-select: none; }

/* --- Build programme Gantt (delivery module, D4) -------------------------- */
.gantt { width: 100%; height: auto; display: block; }
.gantt-grid { stroke: var(--line); stroke-width: 0.5; }
.gantt-month { fill: var(--muted); font-size: 11px; }
.gantt-header { fill: var(--ink); font-size: 12px; font-weight: 600; }
.gantt-label { fill: var(--ink); font-size: 12px; }
.gantt-bar { fill: var(--accent); opacity: 0.85; }
.gantt-bar:hover { opacity: 1; }
.gantt-today { stroke: var(--danger); stroke-width: 1; stroke-dasharray: 4 3; }

/* --- RAMS screens (delivery D5) ------------------------------------------
   The compliance report's result chips, its problem-item lists, and the
   task edit row's checkbox sets. Module screens style through this one
   core stylesheet (FIRMAMENT.md §3). */
.status-chip { display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; }
.status-pass { background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent); }
.status-warn { background: color-mix(in srgb, #d97706 18%, transparent);
  color: #d97706; }
.status-fail { background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: var(--danger); }
.check-items { margin: 6px 0 0 0; padding-left: 18px; color: var(--muted); }
.check-items li { margin-bottom: 4px; }
.check-set { border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; margin: 8px 0; }
.check-set legend { font-size: 0.8rem; color: var(--muted); padding: 0 4px; }
.check-set .checkbox-label { display: inline-flex; align-items: center;
  gap: 4px; margin-right: 14px; font-size: 0.85rem; white-space: nowrap; }
.checkbox-label { display: inline-flex; align-items: center; gap: 6px; }
/* D6: the Gantt's progress overlay — the completed fraction of a package's
   tasks drawn as a solid inner band over the planned bar. */
.gantt-progress { fill: var(--ink); opacity: 0.4; pointer-events: none; }
.task-done strong { text-decoration: line-through; color: var(--muted); }
.tick-form { display: inline; margin-right: 4px; }

/* --- List manager (FIRMAMENT.md §18, slice LM) ---------------------------
   The per-list manage pages: flex rows (each row carries its edit form and
   remove form as siblings), draggable when ranked, with media thumbnails
   and the brands' key-colour input. */
.settings-lists { margin-top: 24px; }
.settings-lists .list-links { list-style: none; padding: 0; margin: 6px 0 0 0; }
.settings-lists .list-links li { padding: 3px 0; }
.list-manage { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.list-row { display: flex; align-items: center; gap: 10px;
            padding: 6px 8px; border: 1px solid var(--line, #C7D0DE);
            border-radius: 6px; background: var(--panel, #fff); }
.list-row[draggable="true"] { cursor: grab; }
.list-row .list-edit { display: flex; align-items: center; gap: 10px; flex: 1; }
.list-row .list-edit input[type="text"] { flex: 1; min-width: 10em; }
.list-row .list-code { min-width: 9em; }
.list-row .list-name { flex: 1; }
.list-thumb { height: 26px; max-width: 90px; object-fit: contain; }
.brand-form { display: flex; gap: 6px; align-items: center; }
.list-row input[type="color"], .note-form input[type="color"] {
  width: 44px; height: 30px; padding: 2px; flex: 0 0 auto; }

/* Project images gallery and document previews (FEATURES.md FR-002), the
   bulk uploader's review table (FR-001), and a section heading with an
   action beside it. */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-head h2 { margin-bottom: 0; }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.image-grid a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; min-width: 0; }
.image-grid img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px;
                  border: 0.5px solid var(--line); background: var(--surface); }
.image-caption { font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-preview { display: block; max-width: 100%; border-radius: 6px; border: 0.5px solid var(--line); margin-bottom: 14px; }
.upload-table img { height: 56px; max-width: 84px; object-fit: contain; border-radius: 4px; }
.upload-table input[type="text"], .upload-table select { width: 100%; min-width: 10em; }
.upload-table .file-kind { white-space: nowrap; color: var(--muted); font-size: 0.85rem; }