/* ==========================================================================
   Positka SOC Entitlements
   ---------------------------------------------------------------------------
   Application shell: fixed sidebar + scrolling content, the standard SaaS
   layout. Two rules from the data-viz method are load-bearing here:

     1. Status colour NEVER carries meaning alone. Every dot ships with its
        text label, which is the required mitigation for the warning and
        serious steps sitting below 3:1 on a light surface.
     2. Numbers wear text tokens, not series colour. A count is ink; the
        coloured dot beside it carries identity.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
  color-scheme: light;

  /* Surfaces, from furthest back to nearest front */
  --canvas: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --sidebar: #101a2f;
  --sidebar-2: #1b2942;

  /* Brand */
  --brand: #1f3864;
  --brand-ink: #2c4f8f;
  --accent: #2a78d6;

  /* Ink */
  --ink: #101828;
  --ink-2: #475467;
  --muted: #8a93a3;
  --on-dark: #eaeef6;
  --on-dark-dim: #9aa8c2;

  /* Lines */
  --line: #e6e8ee;
  --line-2: #eff1f5;
  --ring: rgba(16, 24, 40, .08);

  /* Status (fixed, never themed) */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --neutral: #8a93a3;

  /* Tints for status backgrounds */
  --good-bg: #e9f7e9;
  --warning-bg: #fef4e0;
  --serious-bg: #fdeee7;
  --critical-bg: #fbeaea;
  --neutral-bg: #f1f2f4;

  /* Sequential (meters) */
  --seq: #2a78d6;
  --seq-track: #e6e8ee;

  --input-tint: #fffdf5;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-lg: 0 4px 16px rgba(16, 24, 40, .08);
  --sans: "Inter var", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sidebar-w: 232px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #0d1117;
    --surface: #161b22;
    --surface-2: #1c2230;
    --sidebar: #0a0f1a;
    --sidebar-2: #141c2c;
    --brand: #2c4f8f;
    --brand-ink: #7fa9e8;
    --ink: #e9edf4;
    --ink-2: #a9b4c6;
    --muted: #7d8798;
    --line: #262d3a;
    --line-2: #1f2530;
    --ring: rgba(255, 255, 255, .08);
    --good-bg: #102a12;
    --warning-bg: #2e2410;
    --serious-bg: #2d1c14;
    --critical-bg: #2c1416;
    --neutral-bg: #1f2530;
    --seq: #3987e5;
    --seq-track: #262d3a;
    --input-tint: #1e2331;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, .5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0d1117; --surface: #161b22; --surface-2: #1c2230;
  --sidebar: #0a0f1a; --sidebar-2: #141c2c;
  --brand: #2c4f8f; --brand-ink: #7fa9e8;
  --ink: #e9edf4; --ink-2: #a9b4c6; --muted: #7d8798;
  --line: #262d3a; --line-2: #1f2530; --ring: rgba(255,255,255,.08);
  --good-bg: #102a12; --warning-bg: #2e2410; --serious-bg: #2d1c14;
  --critical-bg: #2c1416; --neutral-bg: #1f2530;
  --seq: #3987e5; --seq-track: #262d3a; --input-tint: #1e2331;
  --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 4px 16px rgba(0,0,0,.5);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1rem; }
h3 { font-size: .875rem; }

p { margin: 0; }

.muted { color: var(--muted); }
.dim { color: var(--ink-2); }
.small { font-size: 12.5px; }
.xs { font-size: 11.5px; }
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: .4rem; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.divider { height: 1px; background: var(--line); margin: 1rem 0; }

/* ------------------------------------------------------------------- shell */

.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--sidebar);
  color: var(--on-dark);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  padding: 1rem .75rem;
  gap: .25rem;
}
.sidebar .logo {
  display: flex; align-items: center; gap: .6rem;
  padding: .3rem .5rem 1.1rem;
}
.sidebar .logo .mark {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(135deg, #2a78d6, #1f3864);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 13px; letter-spacing: -.02em;
}
.sidebar .logo .name { font-weight: 650; font-size: 13.5px; letter-spacing: .01em; }
.sidebar .logo .sub { font-size: 10.5px; color: var(--on-dark-dim); letter-spacing: .04em; text-transform: uppercase; }

.sidebar .group-label {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-dark-dim); padding: .9rem .6rem .3rem;
}
.sidebar nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar nav a {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .6rem; border-radius: var(--r-sm);
  color: var(--on-dark-dim); font-size: 13px; font-weight: 500;
}
.sidebar nav a:hover { background: var(--sidebar-2); color: var(--on-dark); text-decoration: none; }
.sidebar nav a[aria-current] { background: var(--sidebar-2); color: #fff; font-weight: 600; }
.sidebar nav a[aria-current] .ico { color: var(--accent); }
.sidebar nav a .ico { width: 16px; height: 16px; flex: 0 0 auto; }
.sidebar nav a .badge {
  margin-left: auto; font-size: 10.5px; font-weight: 700;
  background: var(--critical); color: #fff;
  border-radius: 999px; padding: .05rem .38rem; font-variant-numeric: tabular-nums;
}
.sidebar .spacer { flex: 1; }
.sidebar .foot {
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding-top: .7rem; margin-top: .7rem;
}
.sidebar .who { display: flex; align-items: center; gap: .55rem; padding: .3rem .6rem .5rem; }
.sidebar .who .avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  background: var(--sidebar-2); color: var(--on-dark);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .12);
}
.sidebar .who .n { font-size: 12.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .who .r { font-size: 10.5px; color: var(--on-dark-dim); text-transform: uppercase; letter-spacing: .05em; }
.sidebar .signout {
  width: 100%; justify-content: center;
  background: transparent; border: 1px solid rgba(255, 255, 255, .16); color: var(--on-dark);
}
.sidebar .signout:hover { background: var(--sidebar-2); }

.content { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: .55rem 1.5rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.topbar .crumbs { font-size: 12.5px; color: var(--muted); display: flex; gap: .4rem; align-items: center; }
.topbar .crumbs a { color: var(--muted); }
.topbar .crumbs .sep { opacity: .5; }

.page { padding: 1.5rem; max-width: 1720px; width: 100%; }
.page-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-head h1 + .sub { margin-top: .3rem; color: var(--ink-2); font-size: 13px; max-width: 78ch; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; flex-direction: row; align-items: center;
    flex-wrap: wrap; gap: .5rem; padding: .6rem .9rem;
  }
  .sidebar .logo { padding: 0 .5rem 0 0; }
  .sidebar .logo .sub, .sidebar .group-label, .sidebar .who .r { display: none; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar .foot { border: 0; margin: 0; padding: 0; }
  .sidebar .spacer { flex: 1; }
  .page { padding: 1rem; }
}

/* ------------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.card > .card-head {
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.card > .card-head h2 { font-size: .95rem; }
.card > .card-head .hint { font-size: 12px; color: var(--muted); }
.card > .card-head .actions { margin-left: auto; }
.card > .card-body { padding: 1.1rem; }
.card > .card-foot {
  padding: .7rem 1.1rem; border-top: 1px solid var(--line-2);
  font-size: 12px; color: var(--muted); background: var(--surface-2);
  border-radius: 0 0 var(--r) var(--r);
}

.grid { display: grid; gap: 1rem; align-items: start; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ----------------------------------------------------- hero, tiles, meters */

.hero { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.hero .figure {
  font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: var(--ink);
}
.hero .figure-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin-top: .3rem;
}
.hero .caption { flex: 1 1 30ch; max-width: 64ch; color: var(--ink-2); font-size: 13px; }

.meter { display: block; height: 7px; border-radius: 999px; background: var(--seq-track); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--seq); }
.meter.slim { height: 5px; }

.tiles { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); margin-bottom: 1rem; }
.tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
  padding: .8rem .9rem; position: relative; overflow: hidden;
}
/* A 3px status rail: redundant with the label, never the only cue. */
.tile::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--neutral);
}
.tile.t-gap::before { background: var(--critical); }
.tile.t-conflict::before { background: var(--serious); }
.tile.t-over::before { background: var(--warning); }
.tile.t-match::before { background: var(--good); }
.tile.t-na::before, .tile.t-plain::before { background: var(--line); }
.tile .label { display: flex; align-items: center; gap: .4rem; font-size: 12px; color: var(--ink-2); font-weight: 550; }
.tile .value { font-size: 1.75rem; font-weight: 700; line-height: 1.15; margin-top: .2rem; letter-spacing: -.02em; }
.tile .hint { font-size: 11px; color: var(--muted); margin-top: .15rem; line-height: 1.35; }
.tile.is-zero .value { color: var(--muted); font-weight: 600; }

/* ------------------------------------------------------- dashboard blocks */

/* Health strip: four panels, the first one twice the width for the hero figure. */
.kpis {
  display: grid; gap: 1rem; margin-bottom: 1rem;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
@media (max-width: 1180px) { .kpis { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }

.kpi {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.kpi .k-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); display: flex; align-items: center; gap: .4rem;
}
.kpi .k-value { font-size: 2.1rem; font-weight: 700; line-height: 1; letter-spacing: -.025em; }
.kpi.lead .k-value { font-size: 3rem; }
.kpi .k-sub { font-size: 12px; color: var(--ink-2); }
.kpi .k-foot { margin-top: auto; }
.kpi.is-zero .k-value { color: var(--muted); }
.kpi.flagged .k-value { color: var(--critical); }

/* Five metrics fit at desktop width; the hero figure keeps a little extra. */
.kpis.five { grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr; }
.kpis.five .kpi.lead .k-value { font-size: 2.6rem; }
@media (max-width: 1240px) {
  .kpis.five { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* By customer: the two rate columns carry a meter under the figure, so the
   comparison across accounts reads without doing arithmetic. */
.by-customer thead th.num .dot { margin-right: .25rem; vertical-align: middle; }
.by-customer td.num .meter { margin-top: .35rem; min-width: 54px; }

/* Horizontal bars: magnitude comparison, so one hue, not five. The status dot
   beside each label keeps the verdict identity without a five-way colour
   adjacency the palette cannot pass. */
.bars { display: flex; flex-direction: column; gap: .55rem; }
.bar-row { display: grid; grid-template-columns: minmax(140px, 15rem) 1fr auto; gap: .7rem; align-items: center; }
.bar-row .b-label { display: flex; align-items: center; gap: .4rem; font-size: 12.5px; color: var(--ink-2); }
.bar-track { background: var(--seq-track); border-radius: 0 4px 4px 0; height: 12px; overflow: hidden; }
.bar-fill {
  display: block; height: 100%; background: var(--seq);
  border-radius: 0 4px 4px 0;   /* rounded data-end, square at the baseline */
  min-width: 2px;
}
.bar-row .b-value { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: right; }
.bar-row.is-zero .b-value { color: var(--muted); font-weight: 500; }

/* Heat-tinted counts. The number is always ink; the tint is a second channel. */
td.heat { position: relative; text-align: right; font-variant-numeric: tabular-nums; }
td.heat > span { position: relative; z-index: 1; }
td.heat::before {
  content: ""; position: absolute; inset: 2px; border-radius: 3px;
  background: var(--heat, transparent);
}

/* Compact action list — one line per thing to do. */
.todo { display: flex; flex-direction: column; }
.todo-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: .7rem;
  align-items: baseline; padding: .6rem 1.1rem;
  border-bottom: 1px solid var(--line-2);
}
.todo-item:last-child { border-bottom: 0; }
.todo-item:hover { background: var(--surface-2); }
.todo-item .t-what { min-width: 0; }
.todo-item .t-name { font-weight: 550; font-size: 13px; }
.todo-item .t-meta { font-size: 11.5px; color: var(--muted); margin-top: .1rem; }
.todo-item .t-where { font-size: 11.5px; white-space: nowrap; }

.all-clear {
  display: flex; align-items: center; gap: .5rem;
  padding: 1.1rem; font-size: 13px; color: var(--ink-2);
}
.all-clear .ico { color: var(--good); width: 18px; height: 18px; }

/* ------------------------------------------------------------------- icons */

/* A base size for every icon. Without this, an icon used anywhere that has no
   context rule of its own inherits nothing and draws at the SVG's natural size —
   a 24px glyph stretched to fill its box, which is how a ladder ended up the
   height of a paragraph in the escalation heading. Context rules below still
   win on specificity. */
.ico { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; }

/* ------------------------------------------------------------ status atoms */

.dot {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto;
  box-shadow: 0 0 0 1px var(--ring);
}
.dot.match, .dot.good { background: var(--good); }
.dot.over { background: var(--warning); }
.dot.conflict { background: var(--serious); }
.dot.gap { background: var(--critical); }
.dot.na { background: var(--neutral); }
.dot.blank { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }

.verdict { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }

/* Chip = dot + label + tint. The label is what carries meaning. */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  padding: .15rem .5rem; border-radius: 999px;
  background: var(--neutral-bg); color: var(--ink-2);
  border: 1px solid transparent;
}
.chip.match { background: var(--good-bg); color: #0a6b0a; }
.chip.over { background: var(--warning-bg); color: #8a5d00; }
.chip.conflict { background: var(--serious-bg); color: #9c4a24; }
.chip.gap { background: var(--critical-bg); color: #a12727; }
.chip.na, .chip.blank { background: var(--neutral-bg); color: var(--muted); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip.match { color: #6ede6e; }
  :root:not([data-theme="light"]) .chip.over { color: #f5c65c; }
  :root:not([data-theme="light"]) .chip.conflict { color: #f0a17e; }
  :root:not([data-theme="light"]) .chip.gap { color: #f08b8b; }
}
:root[data-theme="dark"] .chip.match { color: #6ede6e; }
:root[data-theme="dark"] .chip.over { color: #f5c65c; }
:root[data-theme="dark"] .chip.conflict { color: #f0a17e; }
:root[data-theme="dark"] .chip.gap { color: #f08b8b; }

.pill {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: 10.5px; font-weight: 650; letter-spacing: .02em;
  padding: .1rem .4rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); color: var(--ink-2); background: var(--surface-2);
}
.pill.core { border-color: #f0c9c9; color: #a12727; background: var(--critical-bg); }
.pill.on { border-color: #bfe6bf; color: #0a6b0a; background: var(--good-bg); }
.pill.off { color: var(--muted); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pill.core { border-color: #5a2b2b; color: #f08b8b; }
  :root:not([data-theme="light"]) .pill.on { border-color: #2a5a2a; color: #6ede6e; }
}

/* ------------------------------------------------------------------ tables */

table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
thead th {
  background: var(--surface-2); color: var(--ink-2);
  font-weight: 600; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  text-align: left; padding: .55rem .7rem;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2; white-space: nowrap;
}
tbody td, tbody th {
  padding: .6rem .7rem; border-bottom: 1px solid var(--line-2);
  text-align: left; vertical-align: top; font-weight: 400;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover td, tbody tr:hover th { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mid, th.mid { text-align: center; }
tfoot td {
  padding: .55rem .7rem; font-weight: 650; background: var(--surface-2);
  border-top: 1px solid var(--line); font-size: 12.5px;
}
.table-scroll { overflow-x: auto; }
.table-scroll table.matrix { min-width: max-content; }
td.prose { white-space: normal; max-width: 46ch; }
td.prose-wide { white-space: normal; max-width: 62ch; }
.zero { color: var(--muted); }
.flag { color: var(--critical); font-weight: 650; }
.strong { font-weight: 650; }
.cell-title { font-weight: 550; color: var(--ink); }
.cell-sub { font-size: 11.5px; color: var(--muted); margin-top: .1rem; }

/* ---------------------------------------------------------------- controls */

.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2;
  padding: .48rem .85rem; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--brand); background: var(--brand); color: #fff;
  transition: background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--brand-ink); border-color: var(--brand-ink); text-decoration: none; }
.btn .ico { width: 15px; height: 15px; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--muted); }
.btn.danger { background: var(--critical); border-color: var(--critical); }
.btn.danger:hover { background: #b02f2f; border-color: #b02f2f; }
.btn.small { padding: .3rem .6rem; font-size: 12px; }
.btn.link { background: none; border: 0; color: var(--brand-ink); box-shadow: none; padding: .2rem .3rem; }
.btn.link:hover { background: var(--surface-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

label.field { display: block; margin-bottom: .9rem; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
label.field > span { display: block; margin-bottom: .3rem; }
label.field .hint { font-weight: 400; color: var(--muted); }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
select, textarea {
  width: 100%; font: inherit; font-size: 13px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: .45rem .6rem;
  box-shadow: var(--shadow);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { min-height: 72px; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 3 4-3' fill='none' stroke='%238a93a3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .5rem center;
  padding-right: 1.7rem;
}

/* Drop zone for the document uploads */
.dropzone {
  border: 1.5px dashed var(--line); border-radius: var(--r);
  background: var(--surface-2); padding: 1rem;
  display: flex; gap: .8rem; align-items: flex-start;
  transition: border-color .12s ease, background .12s ease;
}
.dropzone:hover, .dropzone.has-file { border-color: var(--accent); background: var(--surface); }
.dropzone .ico { width: 22px; height: 22px; color: var(--muted); flex: 0 0 auto; margin-top: .1rem; }
.dropzone.has-file .ico { color: var(--good); }
.dropzone .dz-body { min-width: 0; flex: 1; }
.dropzone .dz-title { font-weight: 600; font-size: 13px; color: var(--ink); }
.dropzone .dz-hint { font-size: 11.5px; color: var(--muted); margin-top: .1rem; }
.dropzone .dz-file { font-size: 12px; color: var(--good); font-weight: 600; margin-top: .3rem; word-break: break-all; }
.dropzone input[type="file"] { margin-top: .5rem; font-size: 12px; width: 100%; }

.filters {
  display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--line-2);
  background: var(--surface-2); border-radius: var(--r) var(--r) 0 0;
}
.filters label.field { margin: 0; min-width: 155px; }
.filters .check { display: flex; align-items: center; gap: .35rem; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.filters .check input { width: auto; box-shadow: none; }
.filters .sep { flex: 1; }

/* ---------------------------------------------------------------- notices */

.notice {
  display: flex; gap: .65rem; align-items: flex-start;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--surface); box-shadow: var(--shadow);
  padding: .75rem .9rem; border-radius: var(--r-sm);
  margin-bottom: 1rem; font-size: 13px;
}
.notice .ico { width: 17px; height: 17px; flex: 0 0 auto; margin-top: .1rem; color: var(--accent); }
.notice.ok { border-left-color: var(--good); background: var(--good-bg); }
.notice.ok .ico { color: var(--good); }
.notice.warn { border-left-color: var(--serious); background: var(--serious-bg); }
.notice.warn .ico { color: var(--serious); }
.notice.error { border-left-color: var(--critical); background: var(--critical-bg); }
.notice.error .ico { color: var(--critical); }
.notice strong { display: block; margin-bottom: .1rem; }
.notice code { font-size: 12px; }
.notice pre { white-space: pre-wrap; margin: .4rem 0 0; font-size: 12px; }

/* ----------------------------------------------------------------- matrix */

.matrix { font-size: 12.5px; }
.matrix tbody td { vertical-align: top; padding: .45rem .55rem; }
.matrix tbody tr.group-head td {
  background: var(--sidebar); color: #fff; font-weight: 650;
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  padding: .4rem .7rem; border-bottom: 0;
}
.matrix tbody tr.group-head:hover td { background: var(--sidebar); }
/* Seven columns is a lot. Widths are tight on purpose so the whole row fits a
   1600px screen without the last column falling off the edge. */
.matrix td.param { min-width: 190px; max-width: 240px; white-space: normal; }
.matrix td.param .name { font-weight: 600; color: var(--ink); }
.matrix td.param .ref { color: var(--muted); font-size: 11px; margin-top: .1rem; }
.matrix td.cell { min-width: 148px; max-width: 172px; }
.matrix td.note-cell { min-width: 210px; max-width: 260px; white-space: normal; }
.matrix td.why-cell { min-width: 218px; max-width: 268px; white-space: normal; }

/* A row that is not a deviation has nothing to explain and nobody to agree it
   with, so it carries no controls at all — just a note saying so. Four inert
   dropdowns on every Match row was most of what made this table hard to read.
   The script clones the controls in if an edit turns the row into a deviation. */
.matrix td.why-cell.not-deviation::before {
  content: "no deviation"; font-size: 11px; color: var(--muted);
}
.matrix td.why-cell.not-deviation:has(.agree-grid)::before { content: none; }
.disposition-cell { margin-bottom: .3rem; }
.agree-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: .25rem; margin-top: .3rem; }
.agree-grid .cell-select { padding-right: 1.1rem; background-position: right .25rem center; }
.agree { display: block; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.agree > span { display: block; margin-bottom: .1rem; }
.matrix .standard { color: var(--muted); font-size: 11.5px; min-width: 110px; max-width: 150px; white-space: normal; }

.note-grid { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: .25rem; margin-top: .25rem; }
.note-grid input { font-size: 11.5px; padding: .22rem .35rem; }

.cell-input, .cell-select {
  width: 100%; background: var(--input-tint);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .32rem .45rem; font: inherit; font-size: 12.5px; color: var(--ink);
  box-shadow: none;
}
.cell-input:hover, .cell-select:hover { border-color: var(--muted); }
.cell-input:focus, .cell-select:focus { border-color: var(--accent); background: var(--surface); }
.cell-input.saved, .cell-select.saved { animation: flash-saved 1.1s ease-out; }
.cell-input.failed, .cell-select.failed { border-color: var(--critical); background: var(--critical-bg); }
@keyframes flash-saved {
  0% { background: var(--good-bg); border-color: var(--good); }
  100% { background: var(--input-tint); }
}
.note-input { background: var(--surface); min-height: 0; height: auto; field-sizing: content; resize: vertical; }
.cell-select.small { font-size: 11.5px; padding: .2rem .35rem; margin-top: .2rem; }
/* Evidence is the quote that makes a finding defensible, but a paragraph of it
   in every cell sets the height of every row. Three lines, and the full text on
   hover — the whole quote is still one gesture away, and rows stay comparable. */
.evidence {
  margin-top: .28rem; font-size: 11px; color: var(--muted);
  border-left: 2px solid var(--line); padding-left: .4rem; line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.matrix tbody tr:hover .evidence { -webkit-line-clamp: unset; }
.readonly-cell { padding: .3rem .4rem; font-size: 12.5px; white-space: pre-wrap; }

/* ------------------------------------------------------------------- misc */

details.disclose {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow); margin-bottom: 1rem;
}
details.disclose summary {
  cursor: pointer; font-weight: 600; font-size: 13px; padding: .8rem 1.1rem;
  list-style: none; display: flex; align-items: center; gap: .5rem;
}
details.disclose summary::-webkit-details-marker { display: none; }
details.disclose summary::before {
  content: ""; width: 0; height: 0; flex: 0 0 auto;
  border-left: 5px solid var(--muted); border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; transition: transform .15s ease;
}
details.disclose[open] summary::before { transform: rotate(90deg) translateX(1px); }
details.disclose .disclose-body { padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--line-2); padding-top: 1rem; }

.empty {
  text-align: center; padding: 3rem 1.5rem; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.empty .ico { width: 40px; height: 40px; color: var(--muted); margin-bottom: .75rem; }
.empty h2 { color: var(--ink); margin-bottom: .35rem; font-size: 1.05rem; }
.empty p { max-width: 52ch; margin: 0 auto 1.1rem; font-size: 13px; }

/* Sign-in is the one page without the shell. */
.auth {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background:
    radial-gradient(1100px 500px at 50% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent),
    var(--canvas);
}
.auth .box { width: 100%; max-width: 384px; }
.auth .brand { display: flex; align-items: center; gap: .65rem; justify-content: center; margin-bottom: 1.25rem; }
.auth .brand .mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, #2a78d6, #1f3864);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px;
}
.auth .card { margin: 0; }
.auth .card > .card-body { padding: 1.5rem; }
.auth .legal { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 1rem; }

.foot-note { padding: 1.5rem; color: var(--muted); font-size: 11.5px; text-align: center; }

@media print {
  .sidebar, .topbar, .actions, .filters, .foot-note { display: none !important; }
  .app { grid-template-columns: 1fr; }
  body { background: #fff; }
  .card { break-inside: avoid; box-shadow: none; }
}

/* ------------------------------------------- escalation, contacts, perms */

/* A heading that separates page sections without pretending to be a card. */
.section-head { margin: 1.6rem 0 .7rem; }
.section-head h2 { font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; }
.section-head .sub { font-size: 12.5px; color: var(--muted); margin-top: .15rem; }
.card-head h2 .ico { width: 15px; height: 15px; vertical-align: -2px; margin-right: .3rem; color: var(--muted); }

/* Contact rows: inputs sit flush in the cell, like the matrix. */
table.contacts td { padding: .35rem .4rem; vertical-align: middle; }
table.contacts td .cell-input { width: 100%; }
table.contacts .readonly-cell { font-size: 12.5px; }

/* Add-a-row strip in the card footer: wraps rather than scrolling the page. */
.add-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.add-row input { width: auto; }

/* Capability grid. The tick carries a text alternative, so the meaning does not
   depend on seeing a glyph or a colour. */
table.perms th[scope], table.perms tbody th { font-weight: 500; }
table.perms .yes { color: var(--good); display: inline-flex; }
table.perms .no { color: var(--muted); }
.ico-sm { width: 15px; height: 15px; }
.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;
}

/* Delete, in a row of otherwise safe actions. */
.btn.ghost.danger-link { color: var(--critical); }
.btn.ghost.danger-link:hover { border-color: var(--critical); background: var(--critical-bg); }