:root {
  --page-bg:#f6f8fb; --card-bg:#ffffff; --surface-raised:#ffffff;
  --sidebar-bg:#0e1a2b; --sidebar-fg:#e4edf7; --sidebar-fg-muted:#8fa5bf;
  --text:#17202b; --text-muted:#5a6b7e; --text-disabled:#b6c0cc;
  --border:#e2e7ee; --shadow:0 1px 2px rgba(15,23,42,.06); --table-stripe:rgba(15,23,42,.03);
  --accent:#2563eb; --accent-hover:#1d4ed8; --accent-fg:#1d4ed8;
  --accent-rgb:37,99,235; --accent-fg-rgb:29,78,216;
  --danger:#b3261e; --danger-rgb:179,38,30;
  --warning:#8a5a00; --warning-rgb:138,90,0;
  --success:#15803d; --success-rgb:21,128,61;
  --info:#45526b; --info-rgb:69,82,107;
  --olive-fg:#4c661a; --olive-rgb:76,102,26;
  --input-bg:#ffffff; --input-border:#e2e7ee;
  --chart-s1:#2563eb; --chart-s2:#0d9488; --chart-s3:#b45309;
  --chart-s1-rgb:37,99,235; --chart-s2-rgb:13,148,136; --chart-s3-rgb:180,83,9;
  /* Visual-polish pass (2026-08-20): brand gradient text (wordmark/h1),
     a fixed saturated pair for the user-avatar fill (needs to stay legible
     under white initials in BOTH themes, so it does NOT lighten in dark
     mode the way --brand-grad-* does), the floating glass sidebar's
     translucent base, the body's low-alpha aurora corners, and a softer
     "raised" shadow for cards/tiles. The sidebar is a permanently dark
     dock in both themes (--sidebar-fg is light-on-dark in both blocks
     already) so --sidebar-glass-bg stays a translucent dark navy in light
     mode too -- a plain white glass here would make --sidebar-fg illegible
     (verified: ~1.1:1). See MEMORY / commit message for the WCAG numbers. */
  --brand-grad-a:#2563eb; --brand-grad-b:#7c3aed;
  --avatar-grad-a:#2563eb; --avatar-grad-b:#7c3aed;
  --sidebar-glass-bg: rgba(14,26,43,.80);
  --aurora-1: rgba(37,99,235,.05); --aurora-2: rgba(124,58,237,.045);
  --shadow-lg: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  color-scheme: light;
}

[data-theme="dark"] {
  --page-bg:#0b1220; --card-bg:#111a2c; --surface-raised:#18233a;
  --sidebar-bg:#0a1626; --sidebar-fg:#dee9f5; --sidebar-fg-muted:#7e93ac;
  --text:#e4ecf5; --text-muted:#9aaec4; --text-disabled:#48586c;
  --border:#243349; --shadow:0 1px 2px rgba(0,0,0,.5); --table-stripe:rgba(255,255,255,.03);
  --accent:#2563eb; --accent-hover:#3b82f6; --accent-fg:#5ca9ff;
  --accent-rgb:37,99,235; --accent-fg-rgb:92,169,255;
  --danger:#ff6b60; --danger-rgb:255,107,96;
  --warning:#ffb84d; --warning-rgb:255,184,77;
  --success:#34d399; --success-rgb:52,211,153;
  --info:#a9b8d6; --info-rgb:169,184,214;
  --olive-fg:#a8d15c; --olive-rgb:168,209,92;
  --input-bg:#111a2c; --input-border:#243349;
  --chart-s1:#3b82f6; --chart-s2:#0d9488; --chart-s3:#d97706;
  --chart-s1-rgb:59,130,246; --chart-s2-rgb:13,148,136; --chart-s3-rgb:217,119,6;
  --brand-grad-a:#5ca9ff; --brand-grad-b:#a78bfa;
  --avatar-grad-a:#2563eb; --avatar-grad-b:#7c3aed;
  --sidebar-glass-bg: rgba(10,22,38,.68);
  --aurora-1: rgba(59,130,246,.13); --aurora-2: rgba(167,139,250,.11);
  --shadow-lg: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
  --page-bg:#0b1220; --card-bg:#111a2c; --surface-raised:#18233a;
    --sidebar-bg:#0a1626; --sidebar-fg:#dee9f5; --sidebar-fg-muted:#7e93ac;
    --text:#e4ecf5; --text-muted:#9aaec4; --text-disabled:#48586c;
    --border:#243349; --shadow:0 1px 2px rgba(0,0,0,.5); --table-stripe:rgba(255,255,255,.03);
    --accent:#2563eb; --accent-hover:#3b82f6; --accent-fg:#5ca9ff;
    --accent-rgb:37,99,235; --accent-fg-rgb:92,169,255;
    --danger:#ff6b60; --danger-rgb:255,107,96;
    --warning:#ffb84d; --warning-rgb:255,184,77;
    --success:#34d399; --success-rgb:52,211,153;
    --info:#a9b8d6; --info-rgb:169,184,214;
    --olive-fg:#a8d15c; --olive-rgb:168,209,92;
    --input-bg:#111a2c; --input-border:#243349;
    --chart-s1:#3b82f6; --chart-s2:#0d9488; --chart-s3:#d97706;
    --chart-s1-rgb:59,130,246; --chart-s2-rgb:13,148,136; --chart-s3-rgb:217,119,6;
    --brand-grad-a:#5ca9ff; --brand-grad-b:#a78bfa;
    --avatar-grad-a:#2563eb; --avatar-grad-b:#7c3aed;
    --sidebar-glass-bg: rgba(10,22,38,.68);
    --aurora-1: rgba(59,130,246,.13); --aurora-2: rgba(167,139,250,.11);
    --shadow-lg: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

/* Typography -- vendored variable font (static/fonts/NunitoSans-var.woff2,
   latin subset, weights 200-1000). A single @font-face with a weight RANGE
   lets every font-weight value below (400/600/700/800) resolve to its own
   instance instead of the browser faking bold. Falls back to the system
   sans stack until the woff2 loads (font-display: swap). */
@font-face {
  font-family: "Nunito Sans";
  src: url("fonts/NunitoSans-var.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  font-family: "Nunito Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--page-bg);
  /* Aurora page depth -- two large, static (no animation), very-low-alpha
     radial gradients in the brand hues anchored to the viewport corners.
     Alpha is tuned low enough that body-text contrast against it stays
     >=4.5:1 in both themes (verified via a WCAG relative-luminance check
     during this pass); it never sits behind card/table text since every
     .card etc. paints its own opaque --card-bg on top. */
  background-image:
    radial-gradient(900px 650px at 6% -8%, var(--aurora-1), transparent 60%),
    radial-gradient(900px 650px at 106% 108%, var(--aurora-2), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: inherit;
  line-height: 1.3;
}

h1 {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Gradient title only on top-level page titles (.page-header h1 -- always
   rendered directly on --page-bg/aurora, never inside a .card), and only
   because it's contrast-safe there in both themes: the WCAG check run
   during this pass gave 4.86:1 / 5.36:1 (light) and 7.64:1 / 6.88:1 (dark)
   for the two gradient stops against --page-bg, comfortably over the 3:1
   large-bold-text minimum. */
.page-header h1 {
  background: linear-gradient(135deg, var(--brand-grad-a), var(--brand-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

h2 {
  font-size: 1.12rem;
  font-weight: 700;
}

h3 {
  font-size: 0.95rem;
  font-weight: 700;
}

/* Muted uppercase micro-label -- KPI/summary-card captions, EcoVadis-style
   section eyebrows. */
.summary-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

a {
  color: var(--accent-fg);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a, button, .btn, .tabs a, .sidebar nav a {
  -webkit-tap-highlight-color: transparent;
}

/* Focus-visible ring, site-wide -- 2px accent ring with a 2px offset.
   Elements that already carry their own tinted focus-visible ring
   (.workspace-tile, .scope-toggle) win on specificity (a class selector
   beats this bare-tag one), so they're unaffected. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb));
  outline-offset: 2px;
}

/* Disclosure chevron -- generic <details>/<summary> micro-interaction.
   Excludes .journey-node (the ESG Journey roadmap's icon-centric stage
   summary), which deliberately has no marker at all. */
summary:not(.journey-node) {
  cursor: pointer;
  list-style: none;
}

summary:not(.journey-node)::-webkit-details-marker {
  display: none;
}

summary:not(.journey-node)::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.6;
  transform: rotate(45deg);
  transition: transform 0.16s ease-out;
  vertical-align: 0.05em;
}

details[open] > summary:not(.journey-node)::after {
  transform: rotate(-135deg);
}

/* Floating glass dock (visual-polish pass, 2026-08-20) -- an inset sticky
   panel rather than an edge-to-edge bar. --sidebar-glass-bg is opaque
   enough (light .80 / dark .68 alpha, see :root comment) to keep
   --sidebar-fg text >=4.5:1 even over a stray white card blurred behind
   it; the @supports block only swaps in the translucency + blur where
   backdrop-filter exists, so browsers without it keep the fully opaque
   solid --sidebar-bg fallback. */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 0.75rem;
  align-self: flex-start;
  height: calc(100vh - 1.5rem);
  margin: 0.75rem;
  border-radius: 18px;
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12);
  overflow-y: auto;
  z-index: 10;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sidebar {
    background: var(--sidebar-glass-bg);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}

.sidebar .brand,
.topbar .brand {
  background: linear-gradient(135deg, var(--brand-grad-a), var(--brand-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.sidebar .brand {
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: 2rem;
  letter-spacing: 0.02em;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex-grow: 1;
}

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--sidebar-fg);
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  font-weight: 600;
  transition: background-color 0.16s ease-out, color 0.16s ease-out,
    transform 0.16s ease-out, box-shadow 0.16s ease-out;
}

.sidebar nav a svg {
  flex-shrink: 0;
  opacity: 0.8;
}

.sidebar nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transform: translateX(2px);
}

.sidebar nav a.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.35);
}

.sidebar nav a.active svg {
  opacity: 1;
}

.sidebar nav a.disabled {
  color: var(--sidebar-fg-muted);
  cursor: default;
  pointer-events: none;
}

.sidebar .user-box {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 1rem;
  padding-top: 1rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.sidebar .user-avatar {
  width: 2.3rem;
  height: 2.3rem;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8rem;
  color: #ffffff;
  background: linear-gradient(135deg, var(--avatar-grad-a), var(--avatar-grad-b));
}

.sidebar .user-meta {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
}

.sidebar .user-box form {
  margin: 0;
  flex-shrink: 0;
}

.sidebar .user-box button {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--sidebar-fg-muted);
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.16s ease-out, color 0.16s ease-out,
    border-color 0.16s ease-out;
}

.sidebar .user-box button svg {
  width: 16px;
  height: 16px;
}

.sidebar .user-box button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--sidebar-fg);
  border-color: rgba(255, 255, 255, 0.3);
}

.main {
  flex-grow: 1;
  padding: 2rem;
  max-width: 1100px;
  min-width: 0;
}

.main h1 {
  margin-top: 0;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-lg);
}

/* Several templates nest a second .card inside one (some overriding its
   background to --page-bg for a deliberately "recessed" sub-panel look --
   e.g. tracker/evidence_form.html, tracker/policy_form.html). Suppress the
   inner shadow so nesting doesn't stack two raised-elevation shadows into
   a muddy double halo, and so the recessed variant actually reads sunken. */
.card .card {
  box-shadow: none;
}

.btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #ffffff;
  border: none;
  padding: 0.65rem 1.15rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  transition: transform 0.16s ease-out, box-shadow 0.16s ease-out,
    filter 0.16s ease-out;
}

.btn:hover {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent));
  text-decoration: none;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.35);
}

.btn:active {
  filter: brightness(.92);
  transform: translateY(0);
}

.btn-secondary {
  background: transparent;
  color: var(--accent-fg);
  border: 1px solid var(--accent-fg);
  transition: background-color 0.16s ease-out, color 0.16s ease-out,
    transform 0.16s ease-out;
}

.btn-secondary:hover {
  background: rgba(var(--accent-fg-rgb), 0.08);
  color: var(--accent-fg);
  transform: translateY(-1px);
}

.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  transition: background-color 0.16s ease-out, color 0.16s ease-out,
    transform 0.16s ease-out;
}

.btn-danger:hover {
  background: rgba(var(--danger-rgb), 0.08);
  color: var(--danger);
  transform: translateY(-1px);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

td {
  font-size: 0.9rem;
}

.tabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs a {
  padding: 0.65rem 1rem;
  border-radius: 10px 10px 0 0;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background-color 0.16s ease-out, color 0.16s ease-out;
}

.tabs a:hover {
  background: rgba(var(--accent-fg-rgb), 0.06);
  color: var(--text);
  text-decoration: none;
}

.tabs a.active {
  background: rgba(var(--accent-fg-rgb), 0.1);
  color: var(--accent-fg);
  border-bottom-color: var(--accent-fg);
  font-weight: 700;
}

.tabs a.disabled {
  color: var(--text-disabled);
  pointer-events: none;
}

form p {
  margin: 0 0 1rem;
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text);
}

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--input-bg) inset;
  -webkit-text-fill-color: var(--text);
}

input[type="number"] { max-width: 9rem; }
input[type="date"] { max-width: 12rem; }

/* Django's default CheckboxSelectMultiple/RadioSelect markup (a bare <ul> of
   <li><label><input>…</label></li>) — scoped to forms so it doesn't touch
   the .messages list or the .md renderer's own <ul>/<ol> (those live outside
   any <form>). */
.main form ul.errorlist { list-style: disc; padding-left: 1.25rem; display: block; }
.main form ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.main form ul li label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.2rem;
}

.empty-state {
  color: var(--text-muted);
  font-style: italic;
}

.login-wrapper {
  max-width: 360px;
  margin: 4rem auto;
  padding: 2rem;
}

.errorlist {
  color: var(--danger);
  padding-left: 1.1rem;
  margin: 0.2rem 0;
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--border);
  color: var(--text-muted);
}

.badge-draft { background: rgba(var(--info-rgb), 0.15); color: var(--info); }
.badge-approved { background: rgba(var(--success-rgb), 0.15); color: var(--success); }
.badge-retired { background: var(--border); color: var(--text-muted); }
.badge-danger { background: rgba(var(--danger-rgb), 0.14); color: var(--danger); }
.badge-warning { background: rgba(var(--warning-rgb), 0.16); color: var(--warning); }
.badge-pending { background: rgba(var(--warning-rgb), 0.16); color: var(--warning); }
.badge-rejected { background: rgba(var(--danger-rgb), 0.14); color: var(--danger); }
.badge-submitted { background: rgba(var(--info-rgb), 0.15); color: var(--info); }
.badge-scored { background: rgba(var(--accent-fg-rgb), 0.15); color: var(--accent-fg); }
.badge-info { background: rgba(var(--info-rgb), 0.15); color: var(--info); }

/* Home portfolio dashboard (templates/core/home.html) -- 2-col card grid,
   one card per aggregation (core/portfolio.py), each a simple list. */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 899px) {
  .home-grid {
    grid-template-columns: 1fr;
  }
}

.attention-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.attention-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.attention-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.attention-row-text {
  min-width: 0;
}

.attention-row-text .client-name {
  font-weight: 600;
  margin-right: 0.4rem;
}

.attention-row-text .row-label {
  color: var(--text-muted);
}

.reasons-list {
  margin: 0.2rem 0 0;
  padding-left: 1.1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.trend-up { color: var(--success); }
.trend-down { color: var(--danger); }
.trend-flat { color: var(--text-muted); }

.md h1, .md h2, .md h3, .md h4 { margin-top: 1.2rem; margin-bottom: 0.5rem; }
.md h1:first-child, .md h2:first-child, .md h3:first-child { margin-top: 0; }
.md table { margin: 0.75rem 0; }
.md ul, .md ol { margin: 0.5rem 0; padding-left: 1.4rem; }
.md blockquote { margin: 0.5rem 0; padding: 0.5rem 0.9rem; border-left: 3px solid var(--border); color: var(--text-muted); }
.md code { background: var(--surface-raised); padding: 0 .3em; border-radius: 3px; }

.progress {
  background: var(--border);
  border-radius: 999px;
  height: 0.6rem;
  overflow: hidden;
  margin: 0.5rem 0;
}

.progress-bar {
  background: var(--accent);
  height: 100%;
}

.progress-bar.over-limit {
  background: var(--danger);
}

.progress-bar {
  transition: width 0.5s ease-out;
}

/* Covers every transition/transform added in the visual-polish pass
   (sidebar nav hover/active, buttons, tabs, cards/tiles, journey chips,
   chevrons) plus the pre-existing .progress-bar rule -- one blanket guard
   instead of chasing each new declaration individually. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Segmented indicator bar (templates/reports/dashboard.html, reports/scoring.py
   indicator_segments) -- one segment per EcoVadis indicator, width = that
   indicator's weight, color = that indicator's own score band. This is a
   STATUS encoding (0/25/50/75/100 -> danger/warning/olive/success),
   deliberately different from the Carbon tab charts' per-scope categorical
   colors -- the same indicator-band-N classes color the indicator-table
   badge chips below the bar. */
.segmented-bar {
  display: flex;
  height: 0.6rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
  margin: 0.5rem 0;
}

.segmented-bar-seg {
  height: 100%;
  flex-grow: 0;
  flex-shrink: 0;
}

.segmented-bar-seg.indicator-band-0 { background: var(--danger); }
.segmented-bar-seg.indicator-band-25 { background: var(--warning); }
.segmented-bar-seg.indicator-band-50 { background: var(--olive-fg); }
.segmented-bar-seg.indicator-band-75,
.segmented-bar-seg.indicator-band-100 { background: var(--success); }

.badge.indicator-band-0 { background: rgba(var(--danger-rgb), 0.14); color: var(--danger); }
.badge.indicator-band-25 { background: rgba(var(--warning-rgb), 0.16); color: var(--warning); }
.badge.indicator-band-50 { background: rgba(var(--olive-rgb), 0.16); color: var(--olive-fg); }
.badge.indicator-band-75,
.badge.indicator-band-100 { background: rgba(var(--success-rgb), 0.15); color: var(--success); }

.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
}

.checkbox-grid label {
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.4rem;
}

.checkbox-grid input[type="checkbox"],
.option-row input[type="checkbox"] {
  width: 1.1em;
  height: 1.1em;
}

.score-gauge {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--page-bg);
  border: 8px solid var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-gauge-number {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.score-gauge-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.band-insufficient { background: rgba(var(--danger-rgb), 0.14); color: var(--danger); }
.band-partial { background: rgba(var(--warning-rgb), 0.16); color: var(--warning); }
.band-good { background: rgba(var(--olive-rgb), 0.16); color: var(--olive-fg); }
.band-advanced { background: rgba(var(--success-rgb), 0.15); color: var(--success); }
.band-outstanding { background: var(--success); color: var(--card-bg); }

.gauge-insufficient { border-color: var(--danger); }
.gauge-partial { border-color: var(--warning); }
.gauge-good { border-color: var(--olive-fg); }
.gauge-advanced, .gauge-outstanding { border-color: var(--success); }

.theme-bar-row {
  margin-bottom: 1.25rem;
}

.theme-bar-row:last-child {
  margin-bottom: 0;
}

.theme-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.3rem;
}

.export-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.messages {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.message {
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
}

.message-success { background: rgba(var(--success-rgb), 0.12); color: var(--success); }
.message-error { background: rgba(var(--danger-rgb), 0.14); color: var(--danger); }
.message-warning, .message-info { background: rgba(var(--warning-rgb), 0.16); color: var(--warning); }

.intake-panel {
  border: 1px dashed var(--accent);
  background: rgba(var(--accent-fg-rgb), 0.06);
}

.banner-warning {
  background: rgba(var(--warning-rgb), 0.16);
  color: var(--warning);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.banner-warning ul {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
}

.confidence-high { color: var(--success); font-weight: 600; }
.confidence-medium { color: var(--warning); font-weight: 600; }
.confidence-low { color: var(--danger); font-weight: 600; }

.priority-high { background: rgba(var(--danger-rgb), 0.14); color: var(--danger); }
.priority-medium { background: rgba(var(--warning-rgb), 0.16); color: var(--warning); }
.priority-low { background: rgba(var(--success-rgb), 0.15); color: var(--success); }

/* Score Simulator "+N pts" chips (reports/simulator.py, Action Plan tab's
   "Score impact" column) -- house palette is slate-blue accent, so a
   positive modelled point gain uses --accent-fg (NOT --success, which is
   reserved for pass/approved semantics elsewhere). A genuine score DROP
   borrows the danger token instead:
     - .impact-theme-negative -- overall_delta == 0 but at least one theme
       delta is negative (today's real case: a claimed-but-unevidenced GEN
       certification dilutes GEN's own score, see simulator.py's honesty
       requirement and the negative-delta regression test in
       tests/test_simulator.py). The label keeps its real minus sign (see
       simulator._sign) -- this class only changes the chip's color.
     - .impact-score-negative -- overall_delta < 0 itself. Kept defensively
       for when a future down-force reaches a non-GEN theme, but currently
       UNREACHABLE: the only modelled down-force today (certifications
       activating at score 0) is confined to GEN, and GEN is excluded from
       `overall` (see reports/scoring.py's overall_score docstring).
   All tokens resolve automatically in both themes. */
.impact-chip {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: help;
}

.impact-score { background: rgba(var(--accent-fg-rgb), 0.16); color: var(--accent-fg); }
.impact-theme { background: rgba(var(--accent-fg-rgb), 0.08); color: var(--accent-fg); }
.impact-none, .impact-audit { background: var(--border); color: var(--text-muted); }
.impact-theme-negative { background: rgba(var(--danger-rgb), 0.14); color: var(--danger); }
.impact-score-negative { background: rgba(var(--danger-rgb), 0.14); color: var(--danger); }

.current-year-row { background: var(--surface-raised); }
.mini-bar { background: var(--border); }
.mini-bar-fill { background: var(--accent); }

/* Table wrapper — lets wide tables (records, factors) scroll horizontally
   on narrow viewports instead of blowing out the page width. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  min-width: 560px;
}

/* Utility classes replacing repeated inline styles across templates. */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.page-header h1 {
  min-width: 0;
  margin: 0;
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.summary-card {
  margin-bottom: 0;
}

.score-row {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}

.score-row-text {
  flex: 1 1 220px;
  min-width: 0;
}

.field-auto {
  width: auto;
  display: inline-block;
}

.action-cell {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.inline-form {
  display: inline-flex;
}

.option-comment-wrap {
  margin-top: 0.3rem;
  margin-left: 1.6rem;
}

.option-comment-input {
  max-width: 400px;
}

.card > h2:first-child,
.card > h3:first-child {
  margin-top: 0;
}

/* Client Workspace launcher (templates/core/_workspace_tiles.html,
   core/workspace.py::workspace_tiles) -- Canva-style icon-tile grid at the
   top of the client Overview tab. Each tile is ONE <a> (no nested links);
   --tile-rgb is set per-tile inline from the hue's *-rgb token (including
   --chart-s1/s2/s3-rgb above) and drives both the icon tint and the hover
   ring/shadow so the grid stays token-safe in both themes. */
.workspace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.workspace-tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem;
  color: var(--text);
  box-shadow: var(--shadow-lg);
  transition: transform 0.16s ease-out, box-shadow 0.16s ease-out, border-color 0.16s ease-out;
}

.workspace-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  border-color: rgba(var(--tile-rgb), 0.45);
  text-decoration: none;
  color: var(--text);
}

.workspace-tile:focus-visible {
  outline: 2px solid rgb(var(--tile-rgb));
  outline-offset: 2px;
}

.workspace-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(var(--tile-rgb), 0.14);
  color: rgb(var(--tile-rgb));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.workspace-tile-icon svg {
  width: 24px;
  height: 24px;
}

.workspace-tile-title {
  font-weight: 800;
  font-size: 0.98rem;
  margin-top: 0.25rem;
}

.workspace-tile-blurb {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: -0.2rem;
}

.workspace-tile-status {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: auto;
  padding-top: 0.5rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .workspace-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .workspace-grid {
    grid-template-columns: 1fr;
  }
}

/* Home "ESG Journey" roadmap hero (templates/core/_journey_road.html,
   core/journey.py::journey_overview) -- a 6-node beginner -> advanced
   stepper, included above the existing home-grid cards. Each .journey-stage
   sets --tile-rgb once (from journey.STAGE_RGB_VAR) so its icon circle and
   every client chip beneath it share one tint, same custom-property
   pattern as .workspace-tile / .quadrant-dot above. .journey-scroll allows
   horizontal scroll (with scroll-snap) once 6 fixed-width stage columns
   stop fitting the viewport, rather than ever wrapping the road. */
.journey-scroll {
  overflow-x: auto;
  padding-bottom: 0.25rem;
  margin-top: 0.75rem;
}

.journey-road {
  display: flex;
  align-items: flex-start;
  position: relative;
  min-width: max-content;
  scroll-snap-type: x proximity;
}

.journey-road::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 76px;
  right: 76px;
  height: 2px;
  background: var(--border);
  z-index: 0;
}

.journey-stage {
  flex: 0 0 152px;
  min-width: 152px;
  position: relative;
  padding: 0 0.4rem;
  scroll-snap-align: start;
}

.journey-node-details summary.journey-node {
  list-style: none;
  cursor: pointer;
}

.journey-node-details summary.journey-node::-webkit-details-marker {
  display: none;
}

.journey-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
}

.journey-node-icon {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--tile-rgb), 0.16);
  color: rgb(var(--tile-rgb));
  border: 2px solid var(--card-bg);
  box-shadow: 0 0 0 2px rgba(var(--tile-rgb), 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.journey-node-label {
  font-weight: 800;
  font-size: 0.88rem;
}

.journey-node-count {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.journey-stage-empty .journey-node-icon {
  opacity: 0.4;
}

.journey-stage-empty .journey-node-label,
.journey-stage-empty .journey-node-count {
  color: var(--text-disabled);
}

.journey-criteria {
  margin-top: 0.5rem;
  padding: 0.65rem 0.8rem;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.78rem;
}

.journey-criteria-blurb {
  margin: 0 0 0.35rem;
  font-weight: 700;
  color: var(--text);
}

.journey-criteria ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-muted);
}

.journey-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: center;
  margin-top: 0.6rem;
}

.journey-chip {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(var(--tile-rgb), 0.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  border: 2px solid var(--card-bg);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform 0.16s ease-out, box-shadow 0.16s ease-out, filter 0.16s ease-out;
}

.journey-chip:hover {
  filter: brightness(1.1);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(var(--tile-rgb), 0.45);
}

.journey-summary {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0.85rem 0 0;
}

.journey-unplaced {
  margin-top: 0.75rem;
}

.journey-unplaced summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 700;
}

.journey-unplaced .attention-list {
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .journey-stage {
    flex-basis: 118px;
    min-width: 118px;
  }

  .journey-road::before {
    left: 59px;
    right: 59px;
  }

  .journey-node-label {
    font-size: 0.76rem;
  }

  .journey-node-count {
    font-size: 0.68rem;
  }

  .journey-criteria {
    font-size: 0.72rem;
  }
}

.theme-toggle {
  position: fixed;
  top: 1rem;
  right: calc(1rem + env(safe-area-inset-right));
  z-index: 60;
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  background: var(--surface-raised);
}

.is-busy {
  opacity: .7;
}

.is-busy .btn {
  cursor: progress;
}

.is-busy .btn:disabled::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.5em;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #ffffff;
  animation: btn-spin 0.6s linear infinite;
  vertical-align: -0.1em;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Mobile topbar (hamburger + brand) — hidden by default, shown <=768px. */
.topbar {
  display: none;
  align-items: center;
  gap: 0.75rem;
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  padding: 0.75rem 1rem;
  padding-top: calc(0.75rem + env(safe-area-inset-top));
}

.topbar #nav-toggle {
  background: none;
  border: 1px solid var(--sidebar-fg-muted);
  color: var(--sidebar-fg);
  border-radius: 6px;
  padding: 0.4rem 0.65rem;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}

.topbar .brand {
  font-weight: 700;
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 40;
}

body.nav-open .nav-overlay {
  display: block;
}

@media (max-width: 768px) {
  .main {
    padding: 1.25rem;
  }

  .btn, .btn-secondary, .btn-danger {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .card {
    padding: 1rem;
  }

  .card .card {
    padding: 0.75rem;
  }

  .topbar {
    display: flex;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: min(80vw, 280px);
    margin: 0;
    border-radius: 0 18px 18px 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 50;
    padding-top: calc(1rem + env(safe-area-inset-top));
  }

  body.nav-open .sidebar {
    transform: none;
  }

  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  .main {
    padding: 0.85rem;
  }

  .summary-cards {
    grid-template-columns: 1fr;
  }

  .score-gauge {
    width: 96px;
    height: 96px;
  }

  .login-wrapper {
    padding: 1.25rem;
    margin: 2rem auto;
  }

  .option-comment-wrap {
    margin-left: 0;
  }
}

/* Tech polish: tabular numerals for data displays */
.summary-card strong, .score-gauge, .progress-bar, td { font-variant-numeric: tabular-nums; }
.sidebar .brand { letter-spacing: 0.04em; }

/* Carbon Analytics section (templates/carbon/_panel.html) -- Chart.js
   (static/vendor/chart.umd.min.js + static/charts.js) reading the
   --chart-s1/-s2/-s3 series tokens above. Canvas colors are BAKED at
   render time (unlike the old inline-SVG approach's `fill="var(--chart-sN)"`
   marks), so charts.js destroys and rebuilds every chart on a theme toggle
   instead of relying on CSS to repaint them. */
.analytics-section h3 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.chart-legend {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.88rem;
  color: var(--text);
}

.chart-legend li {
  display: inline-flex;
  align-items: center;
}

.chart-chip {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  flex-shrink: 0;
}

.chip-scope1 { background: var(--chart-s1); }
.chip-scope2 { background: var(--chart-s2); }
.chip-scope3 { background: var(--chart-s3); }

/* Scope-toggle buttons (upgraded chart-legend chips) -- one shared client-side
   state (static/charts.js) hides/shows a scope across the donut, monthly
   stacked bars, activity bars and YoY trend simultaneously. */
.scope-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.scope-toggle:hover {
  background: var(--surface-raised);
}

.scope-toggle[aria-pressed="false"] {
  opacity: 0.45;
  text-decoration: line-through;
}

.scope-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Slicer row -- year select (htmx) + site select (client-side filter),
   reusing .field-auto for consistent control sizing. */
.slicer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-bottom: 1rem;
}

.field-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.field-group .field-auto {
  margin: 0;
}

.analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
  align-items: start;
  gap: 1.5rem;
}

.analytics-monthly,
.analytics-yoy {
  grid-column: 1 / -1;
}

/* Chart.js requires an explicit-height wrapper + maintainAspectRatio:false
   (set in charts.js) rather than an intrinsic-size <svg>. */
.chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 260px;
}

.chart-canvas-donut {
  max-width: 260px;
  height: 260px;
  margin: 0 auto;
}

.chart-canvas-tall {
  height: 320px;
}

.chart-canvas-mini {
  height: 160px;
}

.activity-more {
  margin-top: 0.75rem;
}

.activity-more summary {
  cursor: pointer;
  color: var(--accent-fg);
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .chart-canvas-donut {
    max-width: 220px;
    height: 220px;
  }
}

/* QA fixes 2026-07-26 */
.summary-card .kpi-value { display: block; font-size: 1.6rem; font-weight: 800; margin: 0; font-variant-numeric: tabular-nums; }
.banner-info { background: rgba(var(--accent-fg-rgb), 0.12); color: var(--accent-fg); padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.table-scroll input[type="checkbox"] { width: 1.15em; height: 1.15em; }

/* Compact "pointer" table cells (templates/carbon/factor_list.html + the
   Part-3 sweep) -- a short label/badge in the cell, full detail via
   title="" tooltip, so prose-length source citations / notes / quotes stop
   forcing tables into horizontal scroll. */
.cell-title { font-weight: 600; }
.cell-subtext { display: block; font-size: 0.78rem; color: var(--text-muted); margin-top: 0.1rem; }
.cell-pointer { cursor: help; text-decoration: underline dotted; text-decoration-color: var(--border); text-underline-offset: 2px; }

/* Materiality Phase B (2026-08-20): SDG chips, topic-grid inputs, stakeholder
   influence x interest mini-matrix, engagement timeline. */
.sdg-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
}

.sdg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  font-size: 0.82rem;
  cursor: help;
}

.sdg-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* committed/aspirational/not_selected -- the O6 anti-SDG-washing states
   (materiality/rules.py::compute_sdg_statuses). */
.sdg-chip-committed { border-color: var(--success); background: rgba(var(--success-rgb), 0.12); color: var(--success); }
.sdg-chip-aspirational { border-color: var(--warning); background: rgba(var(--warning-rgb), 0.12); color: var(--warning); }
.sdg-chip-not_selected { opacity: 0.55; }

.materiality-score-select { width: 4.5rem; }
.materiality-rationale-input { width: 100%; min-width: 9rem; }

/* BCG-style stakeholder Interest x Influence quadrant matrix (2026-08-20
   Canva-workspace pass) -- replaces the old 3x3 dot grid. Quadrant
   key/label pairs and each stakeholder's left%/top% + --tile-rgb group
   tint come from materiality/views.py::_stakeholder_quadrant_positions.
   Quadrant cells fill the grid in DOM order top-left -> top-right ->
   bottom-left -> bottom-right; dots are positioned absolutely over the
   whole square via inline left/top percentages. */
.quadrant-matrix-wrap {
  position: relative;
  max-width: 480px;
  padding: 0 0 1.6rem 1.6rem;
  margin: 0.5rem 0 1.25rem;
}

.quadrant-matrix {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.quadrant-cell {
  background: rgba(var(--tile-rgb), 0.08);
  padding: 0.5rem 0.6rem;
}

.quadrant-cell.quadrant-tr,
.quadrant-cell.quadrant-br {
  text-align: right;
}

.quadrant-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.quadrant-axis-x,
.quadrant-axis-y {
  position: absolute;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.quadrant-axis-x {
  bottom: 0;
  left: 1.6rem;
  right: 0;
  text-align: center;
}

.quadrant-axis-y {
  top: 0;
  bottom: 1.6rem;
  left: 0;
  width: 1.6rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
}

.quadrant-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: rgba(var(--tile-rgb), 0.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
  font-weight: 700;
  border: 2px solid var(--card-bg);
  box-shadow: var(--shadow);
  cursor: help;
}

.engagement-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--border);
}

.engagement-timeline li {
  position: relative;
  padding: 0 0 1rem 1rem;
}

.engagement-timeline li::before {
  content: "";
  position: absolute;
  left: -0.4rem;
  top: 0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
}

.chart-canvas-matrix {
  height: 360px;
}

/* ---------------------------------------------------------------------------
   Evidence Vault -- pillar folders (tracker/sections.py,
   templates/tracker/evidence_list.html). Every colour comes from the
   existing tokens; --tile-rgb is set inline per section/chip, so the same
   rules tint Environment/Social/Governance/Data differently.
   --------------------------------------------------------------------------- */
.vault-health { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.vault-budget { flex: 1 1 320px; min-width: 0; }
.vault-budget-label { font-size: 0.85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.vault-stats { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.vault-stat {
  display: inline-flex; gap: 0.35rem; align-items: baseline;
  padding: 0.4rem 0.75rem; border-radius: 999px;
  background: var(--border); color: var(--text-muted); font-size: 0.85rem;
}
.vault-stat strong { font-size: 1rem; color: var(--text); font-variant-numeric: tabular-nums; }
.vault-stat-danger { background: rgba(var(--danger-rgb), 0.14); color: var(--danger); }
.vault-stat-danger strong { color: var(--danger); }
.vault-stat-warning { background: rgba(var(--warning-rgb), 0.16); color: var(--warning); }
.vault-stat-warning strong { color: var(--warning); }
a.vault-stat:hover { text-decoration: none; filter: brightness(0.96); }

/* auto-fit + 170px lets four tiles stretch and five (with Needs filing) still share one row on a laptop. */
.vault-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.vault-tile { padding: 0.9rem 1rem; }

.section-card { border-top: 3px solid rgb(var(--tile-rgb)); scroll-margin-top: 1rem; }
.section-head { display: flex; gap: 0.9rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 0.5rem; }
.section-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: rgba(var(--tile-rgb), 0.14); color: rgb(var(--tile-rgb));
  display: flex; align-items: center; justify-content: center;
}
.section-titles { flex: 1 1 260px; min-width: 0; }
.section-titles h2 { margin: 0; display: flex; gap: 0.5rem; align-items: center; }
.section-subtitle { margin: 0.15rem 0 0; color: var(--text-muted); font-size: 0.85rem; }
.section-crosslink { margin: 0 0 0.5rem; font-size: 0.9rem; }

.section-upload { flex: 0 1 auto; display: flex; flex-direction: column; gap: 0.5rem; }
.section-upload-form {
  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  background: rgba(var(--tile-rgb), 0.06); border: 1px dashed rgba(var(--tile-rgb), 0.5);
  border-radius: 10px; padding: 0.5rem 0.75rem;
}
.section-upload-label { font-size: 0.78rem; font-weight: 700; color: rgb(var(--tile-rgb)); flex-basis: 100%; }
.section-upload-form input[type="file"] { font-size: 0.85rem; max-width: 230px; }

.subgroup { margin-top: 1rem; }
.subgroup-title {
  margin: 0 0 0.5rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); display: flex; gap: 0.4rem; align-items: center;
}
.subgroup-count { background: var(--border); color: var(--text-muted); border-radius: 999px; padding: 0 0.5rem; font-size: 0.75rem; }
.subgroup-hint {
  margin: 0; padding: 0.6rem 0.75rem; border: 1px dashed var(--border); border-radius: 10px;
  color: var(--text-muted); font-size: 0.85rem;
}

.doc-list { display: flex; flex-direction: column; gap: 0.4rem; }
.doc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center;
  padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg);
  transition: border-color 0.16s ease-out;
}
.doc-row:hover { border-color: rgba(var(--tile-rgb, var(--accent-rgb)), 0.45); }
.doc-main { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.doc-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-filename {
  font-size: 0.78rem; color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-meta { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-muted); }
.validity { font-weight: 600; font-variant-numeric: tabular-nums; }
.validity-ok { color: var(--success); }
.validity-warning { color: var(--warning); }
.validity-danger { color: var(--danger); }
.validity-muted { color: var(--text-muted); }
.pillar-chip {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
  background: rgba(var(--tile-rgb), 0.14); color: rgb(var(--tile-rgb));
}
.doc-actions { justify-content: flex-end; }
.file-under-form { gap: 0.35rem; align-items: center; }
.file-under-form select { margin: 0; padding: 0.4rem 0.5rem; font-size: 0.85rem; }

.doc-stack { border: 1px solid var(--border); border-radius: 12px; background: rgba(var(--tile-rgb), 0.04); }
.doc-stack > summary { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; padding: 0.6rem 0.75rem; font-weight: 700; }
.doc-stack-meta { font-size: 0.8rem; color: var(--text-muted); font-weight: 400; }
.doc-stack-body { padding: 0 0.6rem 0.6rem; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 720px) {
  .doc-row { grid-template-columns: 1fr; }
  .doc-actions { justify-content: flex-start; }
  .section-upload { flex-basis: 100%; }
}

/* Vault rows repeat Edit/Delete twenty-plus times, so Delete is demoted to a
   quiet text button here (still .btn-danger semantics + confirm()); it only
   turns red on hover/focus. Tables elsewhere keep the outlined variant. */
.doc-actions .btn-danger { border-color: transparent; color: var(--text-muted); }
.doc-actions .btn-danger:hover,
.doc-actions .btn-danger:focus-visible { color: var(--danger); border-color: var(--danger); background: rgba(var(--danger-rgb), 0.08); }

/* Pillar tiles double as tabs on the Evidence page (?section=...): the
   active one gets a solid ring in its own hue and a faint tint so the eye
   lands on it before the section card below. */
.vault-tile.active {
  border-color: rgb(var(--tile-rgb));
  background: rgba(var(--tile-rgb), 0.06);
  box-shadow: 0 0 0 1px rgb(var(--tile-rgb)), var(--shadow-lg);
}
.vault-tile.active .workspace-tile-title { color: rgb(var(--tile-rgb)); }
.vault-tile.active:hover { transform: none; }

/* ---------------------------------------------------------------------------
   Materiality funnel (materiality/funnel.py, templates/materiality/_step_*.html).
   Step tiles reuse .vault-tiles/.vault-tile; everything below is the
   question cards, pill controls, screening rows, segmented scores and the
   review layout. Tokens only; --tile-rgb is set per step / per pillar.
   --------------------------------------------------------------------------- */
.funnel-year { align-items: center; }
.funnel-newyear { position: relative; }
.funnel-newyear > summary { list-style: none; display: inline-block; }
.funnel-newyear > summary::-webkit-details-marker { display: none; }
.funnel-newyear > summary::after { display: none; }
.funnel-newyear-form {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 300px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 0.9rem 1rem;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 0.5rem;
}
.funnel-newyear-form label { font-size: 0.85rem; }
.funnel-final-banner { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }

.funnel-step { position: relative; }
.funnel-step-num {
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; font-weight: 700;
  background: rgba(var(--tile-rgb), 0.14); color: rgb(var(--tile-rgb)); margin-bottom: 0.25rem;
}
.funnel-step.done .funnel-step-num { background: rgba(var(--success-rgb), 0.16); color: var(--success); }
.funnel-step-bar { display: block; height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 0.4rem; }
.funnel-step-bar i { display: block; height: 100%; background: rgb(var(--tile-rgb)); transition: width 0.3s ease-out; }

.funnel-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.funnel-qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.funnel-q { border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.funnel-q-label { font-weight: 700; font-size: 0.92rem; display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.funnel-q-label small { font-weight: 400; color: var(--text-muted); font-size: 0.75rem; }
.funnel-num { width: 5rem; margin: 0 0 0 0.4rem; padding: 0.25rem 0.4rem; font-size: 0.9rem; }

.pills { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.pill {
  position: relative; display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--border);
  border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.85rem; cursor: pointer; user-select: none;
  background: var(--card-bg); color: var(--text); margin: 0;
}
.pill input[type="radio"], .pill input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.pill:has(input:checked) { border-color: var(--accent-fg); background: rgba(var(--accent-fg-rgb), 0.12); color: var(--accent-fg); font-weight: 700; }
.pill:has(input:focus-visible) { outline: 2px solid var(--accent-fg); outline-offset: 2px; }
.pill.is-static { cursor: default; font-weight: 700; }
.pill.pill-input { cursor: default; }
.prefill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.7rem;
  color: var(--warning); background: rgba(var(--warning-rgb), 0.14); border-radius: 6px; padding: 0.15rem 0.4rem;
}

.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0.25rem 0 0.75rem; }
.stat { border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.7rem; }
.stat b { display: block; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.78rem; color: var(--text-muted); }

.topic-row {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 0.75rem; align-items: center;
  border: 1px solid var(--border); border-radius: 12px; padding: 0.55rem 0.75rem; background: var(--card-bg);
}
.topic-row.pillar-E, .rate-row.pillar-E { --tile-rgb: var(--chart-s1-rgb); }
.topic-row.pillar-S, .rate-row.pillar-S { --tile-rgb: var(--chart-s2-rgb); }
.topic-row.pillar-G, .rate-row.pillar-G { --tile-rgb: var(--chart-s3-rgb); }
.topic-row:hover, .topic-row:focus-within, .rate-row:hover, .rate-row:focus-within { border-color: rgba(var(--tile-rgb), 0.55); }
.topic-dot { width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--tile-rgb)); }
.topic-main { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.topic-name { font-size: 0.95rem; }
.topic-reason { font-size: 0.8rem; color: var(--text-muted); display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.rule-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.7rem;
  background: var(--border); color: var(--text-muted); border-radius: 5px; padding: 0.05rem 0.4rem;
}

.tri, .seg { display: grid; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.tri { grid-template-columns: repeat(3, auto); }
.seg { grid-template-columns: repeat(5, 1fr); min-width: 170px; }
.tri label, .seg label {
  position: relative; text-align: center; padding: 0.35rem 0.6rem; font-size: 0.82rem; font-weight: 700; cursor: pointer;
  color: var(--text-muted); border-right: 1px solid var(--border); margin: 0; white-space: nowrap;
  transition: background-color 0.12s, color 0.12s;
}
.seg label { padding: 0.35rem 0; }
.tri label:last-child, .seg label:last-child { border-right: 0; }
.tri input, .seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.tri label:has(input:checked) { background: rgb(var(--tile-rgb)); color: #fff; }
.seg label:has(input:checked) { background: rgb(var(--tile-rgb)); color: #fff; }
.tri label:has(input:focus-visible), .seg label:has(input:focus-visible) { outline: 2px solid rgb(var(--tile-rgb)); outline-offset: -2px; }
.funnel-fieldset:disabled .tri label, .funnel-fieldset:disabled .seg label, .funnel-fieldset:disabled .pill { cursor: default; opacity: 0.8; }

.fold { border: 1px solid var(--border); border-radius: 12px; margin-top: 0.75rem; }
.fold > summary { padding: 0.6rem 0.75rem; font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.fold > summary::after { margin-left: auto; }
.fold-hint { font-weight: 400; color: var(--text-muted); font-size: 0.8rem; }
.fold-body { padding: 0 0.6rem 0.6rem; }
.fold-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
.custom-topic { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.5rem; align-items: center; margin-top: 0.75rem; border: 1px dashed rgba(var(--tile-rgb), 0.5); border-radius: 12px; padding: 0.6rem 0.75rem; background: rgba(var(--tile-rgb), 0.05); }
.custom-topic input[type="text"], .custom-topic select { margin: 0; }

.rate-legend { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.rate-legend b { color: var(--text); margin-right: 0.3rem; }
.rate-head, .rate-row { display: grid; grid-template-columns: minmax(0, 1.3fr) 180px 180px 120px; gap: 0.75rem; align-items: center; }
.rate-head.with-stakeholder, .rate-row.with-stakeholder { grid-template-columns: minmax(0, 1.3fr) 180px 180px 80px 120px; }
.rate-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 0 0.75rem 0.3rem; }
.rate-row { border: 1px solid var(--border); border-radius: 12px; padding: 0.55rem 0.75rem; background: var(--card-bg); }
.rate-stakeholder { font-variant-numeric: tabular-nums; font-weight: 700; text-align: center; }
.rate-result { display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; }
.result-preview { display: none; font-size: 0.72rem; color: var(--success); }
.rate-row:has(.seg input[value="4"]:checked) .result-preview,
.rate-row:has(.seg input[value="5"]:checked) .result-preview { display: inline; }
.rate-row:has(.seg input[value="4"]:checked) .badge-draft,
.rate-row:has(.seg input[value="5"]:checked) .badge-draft { display: none; }
.rate-more { grid-column: 1 / -1; border-top: 1px dashed var(--border); padding-top: 0.4rem; }
.rate-more > summary { font-size: 0.8rem; color: var(--accent-fg); display: inline-flex; align-items: center; }
.rate-more-body { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.4rem; }
.rate-more-body label { font-size: 0.8rem; color: var(--text-muted); }
.rate-more-body input[type="text"] { margin: 0; }
.disagree > summary { font-size: 0.82rem; color: var(--accent-fg); display: inline-flex; align-items: center; }
.disagree-box { margin-top: 0.4rem; border: 1px solid rgba(var(--warning-rgb), 0.5); background: rgba(var(--warning-rgb), 0.08); border-radius: 10px; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.disagree-box select { margin: 0; }

.sticky-save {
  position: sticky; bottom: 0; margin-top: 0.9rem; padding: 0.7rem 0; background: var(--card-bg);
  border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.sticky-save-note { font-size: 0.8rem; color: var(--text-muted); max-width: 60ch; }

.review-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; }
.review-summary { margin: 0 0 0.5rem; font-size: 0.88rem; color: var(--text-muted); }
.chip-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.funnel-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.funnel-check li { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.9rem; }
.check-ok { color: var(--success); font-weight: 800; }
.check-no { color: var(--danger); font-weight: 800; }
.survey-upload { gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.survey-upload input[type="file"] { max-width: 220px; font-size: 0.85rem; }

@media (max-width: 860px) {
  .funnel-qgrid, .review-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .rate-head { display: none; }
  .rate-row, .rate-row.with-stakeholder { grid-template-columns: 1fr; }
  .topic-row { grid-template-columns: 10px minmax(0, 1fr); }
  .topic-row .tri, .topic-row form, .topic-row .action-cell { grid-column: 2; justify-self: start; }
  .custom-topic { grid-template-columns: 1fr; }
  .funnel-newyear-form { right: auto; left: 0; }
}

/* ---------------------------------------------------------------------------
   Funnel tabs (templates/core/_client_tabs.html): small numeral on the seven
   funnel steps, a divider before the tools, and the flow strip underneath
   (materiality/coverage.py::flow_strip) that says what came in from the
   previous step and what the next one still needs.
   --------------------------------------------------------------------------- */
.tabs a .tab-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.68rem; font-weight: 700;
  background: rgba(var(--accent-fg-rgb), 0.12); color: var(--accent-fg); border-radius: 6px;
  padding: 0 0.35rem; margin-right: 0.4rem; vertical-align: 1px;
}
.tabs a.active .tab-num { background: var(--accent-fg); color: #fff; }
.tabs a.tab-tool { border-left: 1px solid var(--border); border-radius: 0 10px 0 0; margin-left: 0.4rem; padding-left: 1rem; }

.flow-strip {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin: -0.75rem 0 1.25rem; padding: 0.5rem 0.9rem; border: 1px dashed var(--border); border-radius: 10px;
  font-size: 0.85rem; color: var(--text-muted); background: var(--card-bg);
}
.flow-strip b { color: var(--text); }
.flow-missing {
  padding: 0.25rem 0.7rem; border-radius: 999px; background: rgba(var(--warning-rgb), 0.16); color: var(--warning);
  font-weight: 700; text-decoration: none;
}
.flow-missing:hover { text-decoration: none; filter: brightness(0.96); }
.flow-ok { padding: 0.25rem 0.7rem; border-radius: 999px; background: rgba(var(--success-rgb), 0.14); color: var(--success); font-weight: 700; }
@media (max-width: 720px) { .flow-strip { flex-direction: column; align-items: flex-start; } }

/* ---------------------------------------------------------------------------
   Activities tab (tracker/activities.py, templates/tracker/activity_list.html):
   the Evidence row grammar with a wrapping title, ghost rows for suggestions.
   --------------------------------------------------------------------------- */
.act-row {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 0.75rem; align-items: start;
  border: 1px solid var(--border); border-radius: 12px; padding: 0.6rem 0.75rem; background: var(--card-bg);
  transition: border-color 0.16s ease-out; scroll-margin-top: 1rem;
}
.act-row.pillar-E { --tile-rgb: var(--chart-s1-rgb); }
.act-row.pillar-S { --tile-rgb: var(--chart-s2-rgb); }
.act-row.pillar-G { --tile-rgb: var(--chart-s3-rgb); }
.act-row:hover, .act-row:focus-within { border-color: rgba(var(--tile-rgb, var(--warning-rgb)), 0.55); }
.act-row .topic-dot { margin-top: 0.45rem; background: rgb(var(--tile-rgb, var(--warning-rgb))); }
.act-ghost { border-style: dashed; background: rgba(var(--tile-rgb), 0.04); }
.act-main { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.act-title { font-size: 0.95rem; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.act-meta { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-muted); }
.act-more > summary { font-size: 0.8rem; color: var(--accent-fg); display: inline-flex; align-items: center; }
.act-more p { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--text-muted); max-width: 80ch; }
.act-row .doc-actions { align-self: center; }
@media (max-width: 720px) {
  .act-row { grid-template-columns: 10px minmax(0, 1fr); }
  .act-row .doc-actions { grid-column: 2; justify-content: flex-start; }
}

/* Ten client tabs must fit a laptop viewport beside the sidebar: slightly
   tighter padding and type than the generic .tabs rule above. */
.tabs a { padding: 0.55rem 0.75rem; font-size: 0.93rem; }
.tabs a .tab-num { margin-right: 0.3rem; }

/* Login / register / reset pages (templates/registration/*.html) */
.auth-links { margin: 1rem 0 0; font-size: 0.9rem; color: var(--text-muted); }
.login-wrapper label small { color: var(--text-muted); font-weight: 400; }