@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap');

/* Level 22.1 — tokens v2: navy brand, teal primary, calmer neutrals (light theme) */
:root {
  --brand: #0F2742;
  --paper: #F6F8FA;
  --surface: #FFFFFF;
  --surface-2: #F3F5F8;
  --surface-3: #E9EDF1;
  --ink: #17212B;
  --line: #E1E6EC;
  --dim: #5B6B7B;
  --accent: #0F8A7A;
  --accent-dark: #0B6E62;
  --accent-soft: #E4F3F0;
  --accent-soft-line: #BFE0DA;
  --info: #4F5BD5;
  --info-soft: #ECEEFC;
  --info-soft-line: #CDD2F5;
  --green: #2E6B4F;  --green-soft: #E1F0E8;  --green-soft-line: #B9DCC9;
  --amber: #B07617;  --amber-soft: #FBF1DE;  --amber-soft-line: #EBD7A8;  --amber-ink: #8A5A0F;
  --red: #AE3A34;    --red-soft: #F8E4E2;    --red-soft-line: #EFBFBB;
  --grey-soft: #E9EDF1;
  --focus: #0F8A7A;
  --sidebar-bg: #FFFFFF;
  --sidebar-w: 248px;

  --brand-grad: linear-gradient(120deg, #0F2742 0%, #0F8A7A 100%);

  --radius-sm: 6px;
  --radius-md: 8px;
  --shadow-sm: 0 1px 2px rgba(23, 33, 43, 0.05), 0 1px 1px rgba(23, 33, 43, 0.03);
  --shadow-md: 0 4px 14px rgba(23, 33, 43, 0.08), 0 1px 3px rgba(23, 33, 43, 0.05);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
}
[data-theme="dark"] {
  --brand: #E6EDF3;
  --paper: #0F151C;
  --surface: #1A2230;
  --surface-2: #1F2937;
  --surface-3: #263142;
  --ink: #E6EDF3;
  --line: #2C3847;
  --dim: #97A6B6;
  --accent: #3FBFAC;
  --accent-dark: #7ED9CB;
  --accent-soft: #163631;
  --accent-soft-line: #22544C;
  --info: #8C96F0;
  --info-soft: #232A4F;
  --info-soft-line: #38427A;
  --green: #5FBF8E;  --green-soft: #15302A;  --green-soft-line: #22513F;
  --amber: #E0A84A;  --amber-soft: #352A14;  --amber-soft-line: #5C4620;  --amber-ink: #F0C97A;
  --red: #E8756C;    --red-soft: #3A1E1D;    --red-soft-line: #5E2F2C;
  --grey-soft: #212D3B;
  --sidebar-bg: #121A24;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 6px 18px rgba(0,0,0,.45);
  color-scheme: dark;
}
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .card { background: var(--surface); }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-feature-settings: 'tnum' 1;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.srf { font-family: 'Newsreader', Georgia, serif; }

a { color: var(--accent); }

input, select, textarea, button {
  font-family: inherit;
  color: inherit;
  border-radius: var(--radius-sm);
}

input, select, textarea {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 8px 10px;
  font-size: 14px;
  transition: border-color .12s ease, box-shadow .12s ease;
}

input:hover, select:hover, textarea:hover { border-color: #A9B7C4; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 95, 143, 0.14);
}

button {
  cursor: pointer;
  border: 1px solid var(--ink);
  background: none;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background .12s ease, transform .06s ease, box-shadow .12s ease, border-color .12s ease;
}

button:hover:not(:disabled) { background: rgba(43,95,143,.07); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

button.primary {
  background: var(--brand-grad);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
button.primary:hover:not(:disabled) { filter: brightness(1.06); box-shadow: var(--shadow-md); }
button.primary:active:not(:disabled) { filter: brightness(0.97); }

button.quiet { border-color: var(--line); font-weight: 400; }
button.quiet:hover:not(:disabled) { border-color: #A9B7C4; background: rgba(22,33,45,.03); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.center-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-box { width: 100%; max-width: 380px; }
.auth-box.card { box-shadow: var(--shadow-md); }

.auth-box h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.auth-box .sub { color: var(--dim); font-size: 13px; margin-bottom: 20px; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.field label { font-size: 12px; color: var(--dim); }

.error-text { color: var(--red); font-size: 13px; margin: 8px 0; }

.switch-link {
  margin-top: 16px;
  font-size: 13px;
  color: var(--dim);
  text-align: center;
}
.switch-link button { border: none; padding: 0; font-weight: 600; color: var(--accent); text-decoration: underline; background: none; }

header.topbar {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header.topbar::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-grad);
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand .bars { display: flex; flex-direction: column; gap: 2px; }
.brand .bars span { display: block; width: 22px; height: 4px; border-radius: 1px; }
.brand h1 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.brand img { display: block; }

main.container { max-width: 1000px; margin: 0 auto; padding: 32px 24px; }

.hidden { display: none !important; }

/* Loading + empty states */
.state-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 48px 20px; color: var(--dim); text-align: center;
}
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--line); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--paper); display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--dim);
}

/* Requirement lattice glyph */
.lat { display: inline-flex; gap: 1.5px; vertical-align: middle; }
.lat i { display: block; width: 5px; height: 13px; border-radius: 1px; }

.list-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border: 1px solid var(--line); background: var(--surface);
  margin-bottom: 8px; cursor: pointer; border-radius: var(--radius-sm);
  transition: border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.list-row:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }

.top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }

.detail-layout { display: flex; gap: 24px; align-items: flex-start; }
.req-sidebar { width: 260px; flex-shrink: 0; }
.req-btn {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 9px 10px; margin-bottom: 2px; font-size: 12.5px; cursor: pointer;
  border: 1px solid transparent; background: none; border-radius: var(--radius-sm);
  transition: background .12s ease;
}
.req-btn:hover { background: rgba(43,95,143,.06); }
.req-btn.active { border-color: var(--accent-soft-line); background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; box-shadow: var(--shadow-sm); }
.req-btn .n { color: var(--dim); font-size: 11px; min-width: 15px; text-align: right; }
.req-btn .t { flex: 1; min-width: 0; line-height: 1.3; }

.posture-card { padding: 14px; margin-bottom: 16px; position: relative; overflow: hidden; }
.posture-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-grad);
}
.posture-num { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }

.level-card { padding: 15px; margin-bottom: 14px; transition: box-shadow .15s ease; }
.level-card:hover { box-shadow: var(--shadow-md); }
.level-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.status-btn {
  font-size: 11.5px; padding: 5px 11px; cursor: pointer; border: 1px solid var(--line);
  background: none; font-weight: 400; border-radius: var(--radius-sm);
  transition: border-color .12s ease, background .12s ease, transform .06s ease;
}
.status-btn:active { transform: translateY(1px); }
.risk-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-top: 9px; padding: 9px; background: var(--paper); border-radius: var(--radius-sm); }
.risk-field { display: flex; flex-direction: column; gap: 2px; }
.risk-field label { font-size: 10.5px; color: var(--dim); }
.risk-field select { font-size: 11.5px; padding: 3px 5px; }
.risk-result { margin-left: auto; text-align: right; }
.risk-result .band { font-size: 10.5px; color: var(--dim); }
.risk-result .val { font-size: 13px; font-weight: 600; }

textarea.finding { width: 100%; font-size: 13px; padding: 8px; border: 1px solid var(--line); margin-top: 8px; resize: vertical; min-height: 56px; }
.field-label { font-size: 10.5px; color: var(--dim); margin-top: 8px; display: block; }

.saved-tag { font-size: 10.5px; color: var(--green); opacity: 0; transition: opacity .3s ease; }
.saved-tag.show { opacity: 1; }

.tab-btn {
  padding: 9px 13px; font-size: 13px; background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent; color: var(--dim); border-radius: 0;
  transition: color .12s ease, border-color .12s ease;
}
.tab-btn:hover { color: var(--ink); }

.evidence-box { margin-top: 8px; padding: 9px; background: var(--paper); border-radius: var(--radius-sm); }
.evidence-row {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px;
  padding: 4px 8px; margin-bottom: 4px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.ev-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-size { color: var(--dim); font-size: 10.5px; white-space: nowrap; }
.ev-download { font-size: 11px; text-decoration: underline; }
.ev-delete { background: none; border: none; cursor: pointer; color: var(--dim); font-size: 15px; padding: 0 2px; line-height: 1; }
.ev-delete:hover { color: var(--red); }
.evidence-upload-btn {
  display: inline-block; font-size: 11.5px; padding: 6px 12px; cursor: pointer;
  border: 1px dashed var(--dim); background: var(--surface); margin-top: 2px; border-radius: var(--radius-sm);
  transition: border-color .12s ease, background .12s ease;
}
.evidence-upload-btn:hover { border-color: var(--accent); background: rgba(43,95,143,.04); }
.evidence-upload-btn input[type="file"] { display: none; }

.dash-assess-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent) !important; }
.attention-item:hover span:last-child { text-decoration: underline; }

/* ---------------- Mobile ---------------- */
@media (max-width: 780px) {
  main.container { padding: 18px 14px; }
  header.topbar { padding: 12px 16px; }
  .brand h1 { font-size: 14.5px; }

  .detail-layout { flex-direction: column; gap: 14px; }
  .req-sidebar { width: 100%; }
  .req-sidebar .card { margin-bottom: 12px; }

  .top-actions { flex-direction: column; align-items: stretch; }
  .top-actions button { width: 100%; }

  .risk-row { flex-direction: column; align-items: stretch; }
  .risk-result { margin-left: 0; text-align: left; }

  .list-row { flex-direction: column; align-items: flex-start; gap: 4px; }

  table { font-size: 11px !important; }
}

@media print {
  .no-print { display: none !important; }
  header.topbar, .req-sidebar, .top-actions { display: none !important; }
  /* Level 19.7 — print only the page content, always in the light palette */
  .sidebar, .page-head-meta, #ui-layer, .menu-btn, .kbd-hint, .skip-link { display: none !important; }
  .shell { display: block !important; } .shell .container { max-width: none; padding: 0; }
  :root, [data-theme="dark"] { --paper: #fff; --surface: #fff; --surface-2: #F5F7FA; --surface-3: #ECF0F4; --ink: #16212D; --line: #D6DDE5; --dim: #5F6F80; color-scheme: light; }
  body { background: #fff !important; }
  .card { box-shadow: none !important; break-inside: avoid; }
}

/* Level 10.3 — rights-request status workflow */
.dsar-badge {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.dsar-badge.tone-blue  { color: var(--accent-dark); background: var(--accent-soft); border-color: var(--accent-soft-line); }
.dsar-badge.tone-amber { color: var(--amber-ink); background: var(--amber-soft); border-color: var(--amber-soft-line); }
.dsar-badge.tone-green { color: var(--green); background: var(--green-soft); border-color: var(--green-soft-line); }
.dsar-badge.tone-red   { color: var(--red); background: var(--red-soft); border-color: var(--red-soft-line); }
.dsar-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dsar-chip {
  font: inherit; font-size: 11.5px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--dim); border: 1px solid var(--line);
}
.dsar-chip span { opacity: .7; margin-left: 3px; }
.dsar-chip:hover { color: var(--ink); }
.dsar-chip.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.dsar-chip.active span { opacity: .85; }

/* Level 10.4 — rights-request SLA */
.dsar-sla-bar {
  display: flex; align-items: center; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px; font-size: 12px; color: var(--dim);
}
.dsar-sla-bar > * + * { margin-left: 10px; } /* margins, not gap: older WebKit ignores flex gap */
.dsar-sla-bar label { font-size: 12px; font-weight: 600; color: var(--ink); }
.dsar-sla-bar input { width: 70px; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); }
.dsar-due { font-size: 10.5px; margin-left: 10px; color: var(--dim); white-space: nowrap; }
.dsar-due.soon { color: var(--amber-ink); font-weight: 600; }
.dsar-due.overdue { color: var(--red); font-weight: 700; }
.dsar-card-overdue { border-left: 3px solid var(--red); }
.dsar-chip.danger { color: var(--red); border-color: var(--red-soft-line); }
.dsar-chip.danger.active { color: #fff; background: var(--red); border-color: var(--red); }

/* Level 10.5 — identity verification */
.dsar-id-box { margin: 4px 0 14px; padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.dsar-id-box .field { margin-bottom: 10px; }
.dsar-due.idok { color: var(--green); font-weight: 600; }
.dsar-id-warn {
  margin-top: 10px; padding: 8px 10px; font-size: 11px; line-height: 1.55;
  color: var(--amber-ink); background: var(--amber-soft); border: 1px solid var(--amber-soft-line); border-radius: var(--radius-sm);
}

/* Level 18.2 — RoPA questionnaire form */
.dsar-badge.tone-grey { color: var(--dim); background: var(--surface-3); border-color: var(--line); }
.ropa-section { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-top: 8px; background: var(--surface); }
.ropa-section summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.ropa-section summary::-webkit-details-marker { display: none; }
.ropa-section summary::before { content: "▸"; color: var(--dim); font-size: 11px; margin-right: 8px; }
.ropa-section[open] summary::before { content: "▾"; }
.ropa-section summary > span:first-child { flex: 1; display: flex; align-items: center; }
.ropa-secno {
  display: inline-block; min-width: 20px; text-align: center; font-size: 10.5px; font-weight: 600;
  color: var(--accent-dark); background: var(--accent-soft); border-radius: 999px; padding: 1px 6px; margin-right: 8px;
}
.ropa-secprog { font-size: 11px; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
.ropa-secprog.done { color: var(--green); }
.ropa-section-body { padding: 4px 12px 2px; border-top: 1px solid var(--line); }
.ropa-section-body .field { margin-bottom: 12px; }
.ropa-section-body .field:first-child { margin-top: 10px; }
.ropa-help { font-size: 10.5px; color: var(--dim); line-height: 1.5; }
.ropa-na { opacity: .55; }
.ropa-checks { display: flex; flex-wrap: wrap; }
.ropa-checks label { font-size: 12px; color: var(--ink); display: inline-flex; align-items: center; margin: 2px 14px 2px 0; }
.ropa-checks input { margin-right: 6px; }

/* Level 18.3 — RoPA section evidence */
.ropa-evidence { margin: 4px 0 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ropa-ev-upload { display: flex; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.ropa-ev-upload > * + * { margin-left: 8px; }
.ropa-ev-field { font-size: 11.5px; padding: 4px 6px; border: 1px solid var(--line); max-width: 320px; color: var(--dim); }
.ropa-ev-tag {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 10px;
  color: var(--accent-dark); background: var(--accent-soft); border: 1px solid var(--accent-soft-line); vertical-align: middle;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Level 18.4 — rule settings */
.ropa-rules-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ropa-rules-table th { text-align: left; font-size: 10.5px; font-weight: 600; color: var(--dim); padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ropa-rules-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ropa-rules-table tr:last-child td { border-bottom: none; }
.ropa-rules-table code { font-size: 11px; background: var(--surface-3); padding: 1px 5px; border-radius: 3px; }
.ropa-rules-table select { font-size: 12px; padding: 3px 5px; border: 1px solid var(--line); width: 100%; }
.ropa-rules-table tr.rule-off td { opacity: .5; }
.ropa-rules-table tr.rule-modified td:first-child { border-left: 3px solid var(--amber); }
.rule-mod-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-left: 6px; vertical-align: middle; }

/* Level 18.5 — RoPA gaps */
.dsar-badge.big { font-size: 11.5px; padding: 3px 10px; min-width: 76px; text-align: center; }
.ropa-kpis { display: flex; flex-wrap: wrap; margin: 0 -4px 14px; }
.ropa-kpi { flex: 1; min-width: 110px; margin: 4px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); border-top: 3px solid var(--line); }
.ropa-kpi .n { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.ropa-kpi .l { font-size: 11px; color: var(--dim); margin-top: 2px; }
.ropa-kpi.tone-green { border-top-color: var(--green); } .ropa-kpi.tone-amber { border-top-color: var(--amber); }
.ropa-kpi.tone-red { border-top-color: var(--red); } .ropa-kpi.tone-grey { border-top-color: var(--dim); }
.ropa-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 12px; background: var(--surface); }
.ropa-seg button { font: inherit; font-size: 12px; padding: 6px 14px; border: none; background: none; color: var(--dim); cursor: pointer; }
.ropa-seg button.on { background: var(--accent); color: #fff; }
.ropa-req-card { margin-bottom: 8px; overflow: hidden; }
.ropa-req-card.muted { padding: 10px 14px; opacity: .7; }
.ropa-req-card.open { border-color: var(--accent); }
.ropa-req-head { width: 100%; display: flex; align-items: center; padding: 11px 14px; background: none; border: none; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.ropa-req-head:hover { background: var(--surface-2); }
.ropa-req-n { min-width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; }
.ropa-req-title { font-size: 13px; font-weight: 600; flex: 1.4; min-width: 160px; }
.ropa-req-mid { flex: 1.6; display: flex; flex-direction: column; margin: 0 14px; min-width: 160px; }
.ropa-req-pct { font-size: 10.5px; color: var(--dim); margin-top: 4px; white-space: nowrap; }
.ropa-stack { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-3); }
.ropa-stack span { display: block; height: 100%; } .ropa-stack .ok { background: var(--green); } .ropa-stack .partial { background: var(--amber); } .ropa-stack .gap { background: var(--red); }
.ropa-crit { font-size: 10.5px; font-weight: 700; color: var(--red); margin-right: 10px; white-space: nowrap; }
.ropa-ov-tag { font-size: 10px; font-weight: 600; color: var(--accent-dark); background: var(--accent-soft); border-radius: 999px; padding: 1px 7px; margin-right: 10px; white-space: nowrap; line-height: 1.5; flex: none; }
.ropa-req-body { border-top: 1px solid var(--line); padding: 10px 14px 12px; }
.ropa-req-why { font-size: 12px; color: var(--dim); padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-sm); margin-bottom: 8px; line-height: 1.6; }
.ropa-override-form { display: flex; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.ropa-override-form > * + * { margin-left: 8px; }
.ropa-override-form select { font-size: 12px; padding: 4px 6px; border: 1px solid var(--line); }
.ropa-override-form input { flex: 1; min-width: 200px; font-size: 12px; padding: 5px 8px; border: 1px solid var(--line); }
.ropa-override-note { font-size: 12px; color: var(--ink); margin-top: 4px; }
.ropa-act-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; margin-top: 6px; background: var(--surface); }
.ropa-act-head { display: flex; align-items: center; font-size: 12.5px; }
.ropa-finding { font-size: 12px; margin-top: 6px; padding-left: 4px; display: flex; align-items: flex-start; flex-wrap: wrap; line-height: 1.5; }
.ropa-finding code { font-size: 10.5px; background: var(--surface-3); padding: 1px 5px; border-radius: 3px; }
.ropa-finding.dim { color: var(--dim); }
.ropa-grid { width: 100%; border-collapse: collapse; font-size: 12px; }
.ropa-grid th { font-size: 11px; font-weight: 600; color: var(--dim); text-align: center; padding: 8px 6px; border-bottom: 1px solid var(--line); background: var(--surface-2); vertical-align: top; }
.ropa-grid th div { font-weight: 400; font-size: 10px; margin-top: 2px; }
.ropa-grid th:first-child, .ropa-grid td.app { text-align: left; padding-left: 12px; min-width: 130px; }
.ropa-grid td { padding: 5px 4px; border-bottom: 1px solid var(--line); text-align: center; }
.ropa-cell { font: inherit; font-size: 11px; font-weight: 600; padding: 5px 6px; width: 100%; border-radius: 6px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.ropa-cell.tone-green { color: var(--green); background: var(--green-soft); } .ropa-cell.tone-amber { color: var(--amber-ink); background: var(--amber-soft); }
.ropa-cell.tone-red { color: var(--red); background: var(--red-soft); } .ropa-cell.tone-grey { color: var(--dim); background: var(--surface-3); }
.ropa-cell:hover { border-color: var(--accent); } .ropa-cell.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft-line); }

/* Level 18.6 — organisation view */
.ropa-grid tr.org-row td { background: var(--surface-2); border-bottom: 2px solid var(--line); }

/* Level 18.7 — consistency flags */
.ropa-consistency { margin: 8px 0 10px; padding: 10px 12px; background: var(--amber-soft); border: 1px solid var(--amber-soft-line); border-radius: var(--radius-sm); }
.ropa-consistency-title { font-size: 12px; font-weight: 600; color: var(--amber-ink); margin-bottom: 6px; }
.ropa-flag { display: flex; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink); margin-top: 4px; line-height: 1.5; }
.ropa-flag code { font-size: 10.5px; background: var(--surface); border: 1px solid var(--amber-soft-line); padding: 1px 5px; border-radius: 3px; margin-right: 8px; }
.ropa-secflag { font-size: 10.5px; font-weight: 700; color: var(--red); margin-left: 8px; }
.ropa-consistency-card { border-left: 3px solid var(--amber); }

/* Level 10.6 — rights-request tasks */
.dsar-tasks { margin: 4px 0 14px; padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.dsar-task-bar { width: 120px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.dsar-task-bar span { display: block; height: 100%; background: var(--green); }
.dsar-task { display: flex; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 10px; margin-top: 6px; }
.dsar-task input[type=checkbox] { margin: 3px 10px 0 0; flex: none; }
.dsar-task-main { flex: 1; min-width: 0; }
.dsar-task-label { font-size: 12.5px; color: var(--ink); line-height: 1.4; }
.dsar-task.done .dsar-task-label { color: var(--dim); text-decoration: line-through; }
.dsar-task-hint { font-size: 10.5px; color: var(--dim); margin-top: 1px; }
.dsar-task-custom { font-size: 9.5px; font-weight: 600; color: var(--accent-dark); background: var(--accent-soft); border-radius: 999px; padding: 0 6px; margin-left: 6px; vertical-align: middle; }
.dsar-task-ropa { font-size: 11px; padding: 3px 5px; border: 1px solid var(--line); max-width: 190px; margin-left: 10px; color: var(--dim); flex: none; }
.dsar-task .ev-delete { margin-left: 8px; flex: none; }
.dsar-task-add { display: flex; align-items: center; margin-top: 8px; }
.dsar-task-add input { flex: 1; font-size: 12px; padding: 6px 8px; border: 1px solid var(--line); margin-right: 8px; }

/* Level 10.7 — communication log */
.dsar-comms { margin: 4px 0 14px; padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.dsar-comm-add { margin-bottom: 8px; }
.dc-row { display: flex; align-items: center; margin-bottom: 6px; }
.dc-row > * + * { margin-left: 6px; }
.dsar-comm-add select, .dsar-comm-add input[type=datetime-local] { font-size: 11.5px; padding: 5px 6px; border: 1px solid var(--line); background: var(--surface); }
.dsar-comm-add .dc-summary { flex: 1; min-width: 220px; font-size: 12px; padding: 6px 8px; border: 1px solid var(--line); }
.dsar-comm-add .dc-file-label { padding: 5px 9px; font-size: 13px; }
.dsar-comm-add .dc-error { width: 100%; margin: 6px 0 0 0; }
.dsar-comm { display: flex; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 10px; margin-top: 6px; }
.dsar-comm.system { background: transparent; border-style: dashed; }
.dc-glyph { width: 20px; text-align: center; font-size: 13px; color: var(--accent); margin-right: 8px; flex: none; }
.dsar-comm.dir-inbound .dc-glyph { color: var(--green); } .dsar-comm.system .dc-glyph { color: var(--dim); }
.dc-main { flex: 1; min-width: 0; }
.dc-meta { font-size: 10.5px; color: var(--dim); display: flex; flex-wrap: wrap; align-items: center; }
.dc-meta > * + * { margin-left: 6px; }
.dc-chip { font-size: 9.5px; font-weight: 600; color: var(--accent-dark); background: var(--accent-soft); border-radius: 999px; padding: 0 6px; }
.dsar-comm.system .dc-chip { color: var(--dim); background: var(--surface-3); }
.dc-summary-text { font-size: 12.5px; color: var(--ink); line-height: 1.45; margin-top: 2px; }
.dsar-comm.system .dc-summary-text { color: var(--dim); font-size: 12px; }
.dc-attach { display: inline-block; font-size: 11.5px; margin-top: 4px; text-decoration: underline; }
.dsar-comm .ev-delete { margin-left: 8px; flex: none; }

/* Level 10.8 — resolution */
.dsar-resolution { margin: 4px 0 14px; padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: var(--radius-sm); }
.dsar-resolution.closed { border-left-color: var(--green); }
.dsar-resolution .field { margin-bottom: 10px; }

/* Level 10.9 — rights-request dashboard */
.dsar-bar-row { display: flex; align-items: center; font-size: 11.5px; margin-top: 5px; }
.dsar-bar-label { width: 150px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsar-bar { flex: 1; height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; margin: 0 8px; }
.dsar-bar span { display: block; height: 100%; background: var(--accent); }
.dsar-bar-n { width: 22px; text-align: right; font-weight: 600; }

/* Level 10.10 — public intake */
.dsar-intake-card { padding: 10px 14px; margin-bottom: 14px; }
.dsar-ref { font-size: 10.5px; font-weight: 600; color: var(--accent-dark); background: var(--surface-3); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; margin-left: 8px; font-variant-numeric: tabular-nums; }

/* Level 11.2 — consent checklist */
.cc-answers { display: flex; flex: none; margin: 0 10px; }
.cc-btn { font: inherit; font-size: 11px; padding: 3px 9px; border: 1px solid var(--line); background: var(--surface); color: var(--dim); cursor: pointer; }
.cc-btn + .cc-btn { margin-left: -1px; }
.cc-btn:first-child { border-radius: 4px 0 0 4px; } .cc-btn:last-child { border-radius: 0 4px 4px 0; }
.cc-btn.on.yes { background: var(--green); color: #fff; border-color: var(--green); }
.cc-btn.on.no { background: var(--red); color: #fff; border-color: var(--red); }
.cc-btn.on.na { background: var(--dim); color: #fff; border-color: var(--dim); }
.cc-note { width: 200px; flex: none; font-size: 11.5px; padding: 4px 6px; border: 1px solid var(--line); }
.dc-row input[type=number], .dc-row input[type=text] { font-size: 11.5px; padding: 5px 6px; border: 1px solid var(--line); }

/* Level 12 — incidents */
.inc-timeline { margin: 8px 0 12px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.inc-step { display: flex; align-items: flex-start; padding: 6px 0; border-left: 2px solid var(--line); margin-left: 6px; padding-left: 14px; position: relative; }
.inc-dot { position: absolute; left: -6px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--dim); border: 2px solid var(--surface); }
.inc-step.done .inc-dot { background: var(--green); } .inc-step.pending .inc-dot { background: var(--amber); }
.inc-check { display: flex; align-items: flex-start; font-size: 12.5px; padding: 4px 0; }
.inc-check input { margin: 3px 10px 0 0; }

/* ===================== Level 19.1 / 19.2 — app shell ===================== */
.shell { display: flex; align-items: stretch; min-height: 100vh; }
.shell.collapsed { --sidebar-w: 64px; }
.sidebar { width: var(--sidebar-w); flex: none; background: var(--sidebar-bg); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; }
.side-brand { display: flex; align-items: center; height: 56px; padding: 0 14px 0 16px; border-bottom: 1px solid var(--line); }
.side-brand img { width: 26px; height: 26px; flex: none; }
.side-brand span { font-weight: 700; font-size: 15px; letter-spacing: -.01em; margin-left: 10px; white-space: nowrap; }
.side-collapse { margin-left: auto; }
.icon-btn { font: inherit; width: 26px; height: 26px; border-radius: 6px; border: 1px solid transparent; background: none; color: var(--dim); cursor: pointer; font-size: 16px; line-height: 1; }
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.side-context { margin: 12px 10px 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); display: flex; align-items: center; cursor: pointer; }
.side-context > div { margin-left: 10px; }
.side-context:hover { border-color: var(--accent-soft-line); }
.ring { position: relative; width: 40px; height: 40px; flex: none; }
.ring svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.ring .ring-bg { fill: none; stroke: var(--surface-3); stroke-width: 4; }
.ring .ring-fg { fill: none; stroke-width: 4; stroke-linecap: round; }
.ring .ring-txt { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.side-context .ctx-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-context .ctx-sub { font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#side-nav { padding: 6px 10px 10px; flex: 1; }
.side-group { font-size: 10.5px; color: var(--dim); padding: 12px 8px 4px; white-space: nowrap; }
.side-item { display: flex; align-items: center; width: 100%; padding: 7px 8px; margin: 1px 0; border: none; border-radius: 7px; background: none; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; text-align: left; white-space: nowrap; position: relative; }
.side-item:hover { background: var(--surface-3); }
.side-item.on { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.side-item.on::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-grad); }
.side-ico { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--dim); margin-right: 10px; }
.shell.collapsed .side-ico { margin-right: 0; }
.side-item.on .side-ico { color: var(--accent-dark); }
.side-ico svg { width: 17px; height: 17px; }
.side-badge { margin-left: auto; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--surface-3); color: var(--dim); }
.side-item.on .side-badge { background: var(--surface); }
.side-badge.alert { background: var(--red-soft); color: var(--red); }
.side-foot { border-top: 1px solid var(--line); padding: 8px 10px 12px; }
.side-user { display: flex; align-items: center; padding: 8px; font-size: 12.5px; }
.side-user .avatar { margin-right: 10px; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-grad); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.side-user-actions { display: flex; padding: 0 8px; flex-wrap: wrap; }
.side-user-actions > * + * { margin-left: 4px; }
.side-user-actions .quiet { font-size: 11px; padding: 3px 8px; }
.shell.collapsed .side-label, .shell.collapsed .side-brand span, .shell.collapsed .side-group, .shell.collapsed .side-badge, .shell.collapsed .side-user-actions, .shell.collapsed .side-context .ctx-name, .shell.collapsed .side-context .ctx-sub { display: none; }
.shell.collapsed .side-item { justify-content: center; padding: 9px 0; }
.shell.collapsed .side-context { justify-content: center; padding: 8px; }
.shell.collapsed .side-brand { justify-content: center; padding: 0; }
.shell.collapsed .side-collapse { margin: 0; position: absolute; left: 44px; top: 14px; background: var(--surface); border-color: var(--line); }
.shell-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.shell .topbar { position: sticky; top: 0; z-index: 20; height: 56px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; background: var(--paper); border-bottom: 1px solid var(--line); }
.shell .topbar::before { display: none; }
.crumbs { display: flex; align-items: center; font-size: 13px; color: var(--dim); min-width: 0; }
.crumbs a { color: var(--dim); text-decoration: none; cursor: pointer; } .crumbs a:hover { color: var(--ink); }
.crumbs .sep { opacity: .5; margin: 0 6px; } .crumbs .here { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; }
.topbar-actions > * + * { margin-left: 10px; }
.kbd-hint { font-size: 11px; color: var(--dim); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; background: var(--surface); }
.shell .container { max-width: 1240px; width: 100%; margin: 0 auto; padding: 24px 24px 48px; }
.tab-strip { display: none !important; }
.detail-header-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 40; width: 248px; transform: translateX(-100%); transition: transform .2s ease; }
  .shell.side-open .sidebar { transform: none; box-shadow: var(--shadow-md); }
  .shell .container { padding: 16px; }
  .side-collapse { display: none; }
  .topbar .menu-btn { display: inline-flex; }
}
.menu-btn { display: none; margin-right: 8px; }

/* ===================== Level 19.3 — UI kit ===================== */
#ui-layer { position: relative; z-index: 100; }
.ui-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10, 16, 24, .45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s ease; z-index: 100; }
.ui-backdrop.in { opacity: 1; } .ui-backdrop.out { opacity: 0; }
.ui-dialog { width: 440px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-md); padding: 20px 22px; transform: translateY(6px); transition: transform .12s ease; }
.ui-dialog.wide { width: 640px; }
.ui-backdrop.in .ui-dialog { transform: none; }
.ui-dialog-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.ui-dialog-body { font-size: 14px; color: var(--ink); line-height: 1.55; } .ui-dialog-body p { margin: 0; }
.ui-dialog-input { width: 100%; margin-top: 12px; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink); }
.ui-dialog-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.ui-dialog-actions > * + * { margin-left: 8px; }
.ui-danger { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--red); background: var(--red); color: #fff; cursor: pointer; }
#ui-toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-end; z-index: 110; }
.ui-toast { display: flex; align-items: center; max-width: 380px; margin-top: 8px; padding: 10px 12px; font-size: 12.5px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.ui-toast.in { opacity: 1; transform: none; }
.ui-toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 10px; flex: none; }
.ui-toast.error .ui-toast-dot { background: var(--red); } .ui-toast.success .ui-toast-dot { background: var(--green); } .ui-toast.warn .ui-toast-dot { background: var(--amber); }
.ui-toast-x { margin-left: 12px; border: none; background: none; color: var(--dim); font-size: 16px; cursor: pointer; }
.ui-side-backdrop { justify-content: flex-end; align-items: stretch; }
.ui-slide { background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-md); max-width: 100vw; height: 100vh; display: flex; flex-direction: column; transform: translateX(24px); transition: transform .18s ease; }
.ui-backdrop.in .ui-slide { transform: none; }
.ui-slide-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ui-slide-title { font-size: 15px; font-weight: 700; } .ui-slide-body { padding: 18px; overflow-y: auto; }
.ui-table-wrap { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.ui-table-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ui-table-q { font-size: 12.5px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; min-width: 220px; background: var(--surface); color: var(--ink); }
.ui-table-count { font-size: 11px; color: var(--dim); }
.ui-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ui-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--dim); padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); cursor: pointer; user-select: none; white-space: nowrap; }
.ui-table th.sorted { color: var(--accent-dark); } .ui-table th.r, .ui-table td.r { text-align: right; }
.ui-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ui-table tbody tr:hover td { background: var(--surface-2); } .ui-table tr:last-child td { border-bottom: none; }
.ui-table-empty { color: var(--dim); text-align: center; padding: 24px !important; }
.ui-palette-backdrop { align-items: flex-start; padding-top: 12vh; }
.ui-palette { width: 620px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); overflow: hidden; }
.ui-palette-q { width: 100%; font: inherit; font-size: 15px; padding: 14px 16px; border: none; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); outline: none; }
.ui-palette-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.ui-palette-item { display: flex; align-items: center; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.ui-palette-item.on { background: var(--accent-soft); }
.ui-palette-group { font-size: 10.5px; color: var(--dim); width: 110px; flex: none; }
.ui-palette-label { flex: 1; font-weight: 500; } .ui-palette-hint { font-size: 11px; color: var(--dim); margin-left: 10px; }
.ui-palette-empty { padding: 18px; color: var(--dim); font-size: 13px; text-align: center; }
.ui-palette-foot { font-size: 10.5px; color: var(--dim); padding: 8px 14px; border-top: 1px solid var(--line); background: var(--surface-2); }
.kbd-hint { font: inherit; cursor: pointer; } .kbd-hint:hover { color: var(--ink); border-color: var(--accent-soft-line); }

/* ===================== Level 19.4 — dashboard ===================== */
.dash-head { display: flex; align-items: baseline; flex-wrap: wrap; margin-bottom: 14px; }
.dash-story { font-size: 12.5px; color: var(--dim); margin-left: 14px; }
.dash-hero { display: flex; align-items: stretch; margin-bottom: 14px; }
.dash-posture { flex: 1.3; display: flex; align-items: center; padding: 18px 22px; margin-right: 12px; min-width: 0; }
.dash-ring { position: relative; width: 120px; height: 120px; flex: none; }
.dash-ring svg { width: 120px; height: 120px; }
.dash-ring-txt { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dash-ring-n { font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.dash-ring-l { font-size: 10px; color: var(--dim); margin-top: 4px; }
.dash-posture-side { margin-left: 22px; min-width: 0; flex: 1; }
.dash-posture-h { font-size: 14px; font-weight: 700; }
.dash-posture-p { font-size: 12px; color: var(--dim); line-height: 1.55; margin: 4px 0 12px; max-width: 48ch; }
.dash-dist-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-3); }
.dash-dist-bar span { display: block; height: 100%; }
.dash-legends { display: flex; flex-wrap: wrap; margin-top: 8px; } .dash-legends.col { flex-direction: column; margin: 0 0 0 18px; }
.dash-legend { display: flex; align-items: center; font-size: 11.5px; color: var(--dim); margin: 2px 14px 2px 0; }
.dash-legend span { width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; } .dash-legend b { color: var(--ink); margin-left: 6px; }
.dash-tiles { flex: 1; display: flex; flex-wrap: wrap; margin: -5px; }
.dash-tile { flex: 1 1 calc(50% - 10px); min-width: 150px; margin: 5px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border-left: 3px solid var(--line); }
.dash-tile.alert { border-left-color: var(--red); }
.dash-tile-v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.dash-tile.alert .dash-tile-v { color: var(--red); }
.dash-tile-l { font-size: 12px; color: var(--ink); margin-top: 3px; } .dash-tile-s { font-size: 10.5px; color: var(--dim); margin-top: 2px; }
.dash-row { display: flex; align-items: stretch; margin-bottom: 14px; }
.dash-heat { flex: 1.6; margin-right: 12px; min-width: 0; } .dash-sev { flex: 1; }
.dash-card-h { font-size: 13px; font-weight: 700; margin-bottom: 10px; } .dash-card-h span { font-size: 11px; font-weight: 400; color: var(--dim); margin-left: 8px; }
.heat-strip { display: flex; }
.heat-cell { flex: 1; text-align: center; padding: 0 3px; min-width: 0; }
.heat-box { height: 46px; border-radius: 6px; background: var(--red); }
.heat-n { font-size: 13px; font-weight: 700; margin-top: 6px; } .heat-l { font-size: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-sev-body { display: flex; align-items: center; }
.dash-att { margin-bottom: 6px; }
.att-card { display: flex; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); margin-top: 8px; background: var(--surface-2); }
.att-dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 12px; flex: none; background: var(--dim); }
.att-card.red .att-dot { background: var(--red); } .att-card.amber .att-dot { background: var(--amber); }
.att-main { flex: 1; min-width: 0; } .att-head { font-size: 13px; font-weight: 600; } .att-sub { font-size: 11.5px; color: var(--dim); margin-top: 1px; }
.att-go { font-size: 11.5px; padding: 5px 10px; margin-left: 12px; flex: none; }
.att-more, .att-empty { font-size: 12px; color: var(--dim); padding: 8px 2px; }
.dash-prog { display: inline-block; width: 90px; height: 6px; border-radius: 3px; background: var(--surface-3); vertical-align: middle; overflow: hidden; margin-right: 8px; }
.dash-prog span { display: block; height: 100%; background: var(--accent); }
.dash-prog-n { font-size: 11.5px; color: var(--dim); }
@media (max-width: 900px) { .dash-hero, .dash-row { flex-direction: column; } .dash-posture, .dash-heat { margin: 0 0 12px; } .heat-strip { flex-wrap: wrap; } .heat-cell { flex: 1 1 18%; } }

/* ===================== Level 19.5 — page header ===================== */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.page-eyebrow { font-size: 12px; color: var(--dim); }
.page-title { margin: 2px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--brand); }
.page-head-meta { display: flex; align-items: center; flex-wrap: wrap; }
.page-head-meta > * + * { margin-left: 8px; }
.meta-chip { font-size: 11.5px; color: var(--dim); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.detail-layout.no-reqs .req-sidebar { display: none; }
#req-detail > h2:first-child { display: none; }
#req-detail > p:first-of-type { margin-top: 0; }

/* ===================== Level 19.6 — responsive + accessibility ===================== */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--surface); color: var(--ink); padding: 8px 12px; border: 2px solid var(--focus); border-radius: 6px; }
.skip-link:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.side-item:focus-visible, .ui-palette-item:focus-visible, .ui-table th:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ui-table-wrap { overflow-x: auto; }
.ui-table { min-width: 640px; }
.ropa-grid-wrap, .card[style*="overflow:auto"] { -webkit-overflow-scrolling: touch; }
.shell-scrim { display: none; }
@media (max-width: 900px) {
  .shell-main { width: 100%; max-width: 100vw; overflow-x: hidden; }
  .detail-layout > main, #req-detail { width: 100%; max-width: 100%; }
  #req-detail p { max-width: 100% !important; }
  .ropa-kpis { margin-left: 0; margin-right: 0; }
  .shell.side-open .shell-scrim { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10,16,24,.4); z-index: 35; }
  .page-head { align-items: flex-start; }
  .page-head-meta { margin-top: 10px; }
  .detail-layout { flex-direction: column; }
  .req-sidebar { width: 100%; }
  .ropa-kpis .ropa-kpi { flex: 1 1 40%; }
  .dash-tile { flex: 1 1 100%; }
  .dash-posture { flex-direction: column; text-align: center; }
  .dash-posture-side { margin: 14px 0 0; }
  .ropa-req-head { flex-wrap: wrap; }
  .ropa-req-mid { flex: 1 1 100%; order: 3; margin: 8px 0 0; }
  .ui-slide { width: 100vw !important; }
  .dc-row { flex-wrap: wrap; }
  .dc-row > * { margin-bottom: 6px; }
  .cc-note { width: 100%; margin-top: 6px; }
  .dsar-task { flex-wrap: wrap; }
  .crumbs a, .crumbs .sep { display: none; } .crumbs .here { font-size: 14px; }
}
@media (max-width: 520px) {
  .shell .container { padding: 12px; }
  .page-title { font-size: 19px; }
  .ropa-kpis .ropa-kpi { flex: 1 1 40%; min-width: 0; }
  .kbd-hint { display: none; }
}

/* ===================== Level 19.7 — polish: skeletons, empty states ===================== */
.skeleton { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--line) 0%, var(--surface-3) 50%, var(--line) 100%); opacity: .7; background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; }
@keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skel-page { padding: 4px 0; }
.skel-page .skeleton + .skeleton { margin-top: 10px; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--dim); }
.empty-state .empty-ico { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; }
.empty-state .empty-ico svg { width: 22px; height: 22px; }
.empty-state h3 { margin: 0 0 4px; font-size: 15px; color: var(--ink); }
.empty-state p { margin: 0 auto; max-width: 44ch; font-size: 12.5px; line-height: 1.55; }

/* ===================== Level 20.1 / 20.2 — DPIA ===================== */
.dpia-sdf { display: flex; align-items: center; padding: 12px 14px; }
.dpia-head { display: flex; padding: 14px 16px; margin-bottom: 14px; }
.dpia-grid { display: flex; align-items: flex-start; }
.dpia-qs { flex: 1.5; min-width: 0; margin-right: 14px; }
.dpia-side { flex: 1; min-width: 280px; position: sticky; top: 72px; }
.dpia-q { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; }
.dpia-q.answered { border-left-color: var(--accent); }
.dpia-q-main { flex: 1; min-width: 0; margin-right: 10px; }
.dpia-q-title { font-size: 12.8px; line-height: 1.45; }
.dpia-q-code { font-size: 10.5px; font-weight: 700; color: var(--dim); margin-right: 8px; font-variant-numeric: tabular-nums; }
.dpia-imported { display: inline-block; font-size: 10.5px; color: var(--accent-dark); background: var(--accent-soft); border-radius: 4px; padding: 1px 7px; margin-top: 5px; }
.dpia-imported.manual { color: var(--amber-ink); background: var(--amber-soft); }
.dpia-ref { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; border-radius: 3px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; cursor: help; }
.dpia-ref.regulatory { color: var(--red); background: var(--red-soft); } .dpia-ref.methodology { color: var(--accent-dark); background: var(--accent-soft); } .dpia-ref.recommended { color: var(--dim); background: var(--surface-3); }
.dpia-ans .cc-btn[disabled] { cursor: default; opacity: .8; }
.dpia-result { padding: 14px 16px; border-top: 3px solid var(--line); }
.dpia-result.tone-red { border-top-color: var(--red); } .dpia-result.tone-amber { border-top-color: var(--amber); } .dpia-result.tone-green { border-top-color: var(--green); }
.dpia-result-h { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-top: 2px; }
.dpia-result.tone-red .dpia-result-h { color: var(--red); } .dpia-result.tone-amber .dpia-result-h { color: var(--amber-ink); } .dpia-result.tone-green .dpia-result-h { color: var(--green); }
.dpia-why { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; margin-top: 6px; }
.dpia-why-h { font-size: 12px; font-weight: 600; } .dpia-why-t { font-size: 11.5px; color: var(--dim); margin-top: 2px; line-height: 1.45; }
.dpia-why-m { font-size: 11px; margin-top: 3px; color: var(--ink); }
.dpia-actions { display: flex; flex-wrap: wrap; margin-top: 12px; } .dpia-actions > * { margin: 0 8px 6px 0; }
.dpia-log { padding: 6px 0; border-top: 1px dashed var(--line); } .dpia-log:first-of-type { border-top: none; }
@media (max-width: 900px) { .dpia-grid { flex-direction: column; } .dpia-qs { margin: 0 0 12px; } .dpia-side { position: static; width: 100%; } .dpia-q { flex-wrap: wrap; } .dpia-q .cc-answers { margin: 8px 0 0; } }

/* Level 20.3 — DPIA workspace */
.dpia-layout { display: flex; align-items: flex-start; }
.dpia-nav { width: 240px; flex: none; margin-right: 16px; position: sticky; top: 72px; }
.dpia-nav-item { display: flex; align-items: center; width: 100%; text-align: left; font: inherit; font-size: 12.5px; padding: 7px 10px; margin-bottom: 2px; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--ink); cursor: pointer; }
.dpia-nav-item:hover { background: var(--surface-3); } .dpia-nav-item.on { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-sm); font-weight: 600; }
.dpia-nav-item.muted { color: var(--dim); }
.dpia-nav-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); margin-right: 9px; flex: none; }
.dpia-nav-dot.green { background: var(--green); } .dpia-nav-dot.amber { background: var(--amber); } .dpia-nav-dot.red { background: var(--red); }
.dpia-nav-n { font-size: 10.5px; color: var(--dim); margin-left: 8px; }
.dpia-main { flex: 1; min-width: 0; }
.dpia-import { padding: 12px 14px; margin-bottom: 12px; border-left: 3px solid var(--accent); }
.dpia-kv { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dpia-kv th { text-align: left; font-weight: 500; color: var(--dim); width: 34%; padding: 5px 10px 5px 0; vertical-align: top; border-top: 1px dashed var(--line); }
.dpia-kv td { padding: 5px 0; vertical-align: top; border-top: 1px dashed var(--line); }
.dpia-kv tr:first-child th, .dpia-kv tr:first-child td { border-top: none; }
.dpia-banner { display: flex; align-items: center; background: var(--amber-soft); border: 1px solid var(--amber-soft-line); color: var(--amber-ink); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12.5px; margin-bottom: 14px; }
@media (max-width: 900px) { .dpia-layout { flex-direction: column; } .dpia-nav { width: 100%; position: static; margin: 0 0 12px; display: flex; flex-wrap: wrap; } .dpia-nav .side-group { display: none; } .dpia-nav-item { width: auto; } }

.dpia-banner.red { background: var(--red-soft); border-color: var(--red-soft-line); color: var(--red); }

/* ===================== Level 22.1 — provenance language ===================== */
.prov { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; vertical-align: middle; cursor: help; }
.prov .g { margin-right: 5px; font-size: 11px; }
.prov.imported { color: var(--info); background: var(--info-soft); border-color: var(--info-soft-line); }
.prov.derived { color: var(--info); background: var(--info-soft); border-color: var(--info-soft-line); }
.prov.override { color: var(--amber-ink); background: var(--amber-soft); border-color: var(--amber-soft-line); }
.prov.frozen { color: var(--dim); background: var(--surface-3); border-color: var(--line); }
.prov.manual { color: var(--dim); background: transparent; border-color: var(--line); }
.prov.sm { font-size: 10px; padding: 2px 6px; }
h2, .dash-head h2 { color: var(--brand); }
.card { border-radius: 10px; }

/* ===================== Level 22.2 — inspector footer, table density, row menu, filter bar ===================== */
.ui-slide-head { align-items: flex-start; } .ui-slide-body { flex: 1; } .ui-slide-foot { padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); display: flex; justify-content: flex-end; }
.ui-slide-foot > * + * { margin-left: 8px; }
.ui-table-wrap.sticky { overflow: auto; } .ui-table-wrap.sticky thead th { position: sticky; top: 0; z-index: 2; }
.ui-table-wrap.compact .ui-table td { padding: 5px 10px; font-size: 12px; } .ui-table-wrap.compact .ui-table th { padding: 6px 10px; }
.ui-table th:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ui-row-menu { font-size: 16px; line-height: 1; }
.ui-menu { position: absolute; z-index: 120; min-width: 180px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-md); padding: 4px; }
.ui-menu-item { display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; padding: 7px 10px; border: none; background: none; color: var(--ink); border-radius: 6px; cursor: pointer; }
.ui-menu-item:hover { background: var(--surface-3); } .ui-menu-item.danger { color: var(--red); }
.ui-filterbar { display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.ui-chips { display: flex; flex-wrap: wrap; flex: 1; } .ui-chips > * { margin: 0 6px 6px 0; }
.ui-chip { font: inherit; font-size: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.ui-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); } .ui-chip-n { font-size: 11px; opacity: .8; margin-left: 2px; }
.ui-chip.tone-red.on { background: var(--red); border-color: var(--red); } .ui-chip.tone-amber.on { background: var(--amber); border-color: var(--amber); }
.ui-filter-q { font-size: 12.5px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; min-width: 220px; background: var(--surface); color: var(--ink); margin-bottom: 6px; }

/* Level 22.3 — dashboard ranked bars + tiles */
.dash-tiles { flex-direction: column; } .dash-tile { flex: 1 1 auto; min-width: 0; }
.rank-row { display: flex; align-items: center; padding: 5px 0; border-top: 1px dashed var(--line); font-size: 12.5px; } .rank-row:first-child { border-top: none; }
.rank-row.zero { color: var(--dim); } .rank-i { width: 20px; color: var(--dim); font-size: 11px; } .rank-l { width: 42%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-3); margin: 0 10px; overflow: hidden; } .rank-bar span { display: block; height: 100%; background: var(--red); opacity: .8; }
.rank-row.zero .rank-bar span { display: none; } .rank-n { width: 56px; text-align: right; font-weight: 600; font-size: 11.5px; }

/* Level 22.3 — countdown band, stepper, risk progression, decision buttons */
.inc-band { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 10px; margin: 8px 0 12px; border: 1px solid var(--line); background: var(--surface); border-left: 5px solid var(--accent); }
.inc-band.teal { border-left-color: var(--accent); } .inc-band.amber { border-left-color: var(--amber); background: var(--amber-soft); } .inc-band.red { border-left-color: var(--red); background: var(--red-soft); }
.inc-band-l { font-size: 12px; color: var(--dim); } .inc-band-v { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 2px 0; }
.inc-band.red .inc-band-v { color: var(--red); } .inc-band.amber .inc-band-v { color: var(--amber-ink); } .inc-band.teal .inc-band-v { color: var(--accent-dark); }
.inc-band-s { font-size: 11.5px; color: var(--dim); }
.stepper { display: flex; align-items: center; margin: 0 0 14px; }
.step { display: flex; align-items: center; font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.step-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; margin-right: 7px; }
.step.done .step-dot { background: var(--accent); border-color: var(--accent); color: #fff; } .step.on .step-dot { border-color: var(--accent); color: var(--accent-dark); border-width: 2px; }
.step.on { color: var(--ink); font-weight: 600; } .step-line { flex: 1; height: 1px; background: var(--line); margin: 0 10px; min-width: 14px; }
.risk-prog { display: flex; align-items: stretch; margin-bottom: 14px; }
.rp { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.rp-l { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; } .rp-v { font-size: 24px; font-weight: 700; margin: 4px 0 2px; }
.rp-band { display: inline-block; font-size: 20px; font-weight: 700; margin: 4px 0 2px; padding: 2px 10px; border-radius: 8px; }
.rp-band.tone-red { background: var(--red-soft); color: var(--red); } .rp-band.tone-amber { background: var(--amber-soft); color: var(--amber-ink); } .rp-band.tone-green { background: var(--green-soft); color: var(--green); }
.rp-s { font-size: 11px; color: var(--dim); } .rp-arrow { display: flex; align-items: center; padding: 0 8px; color: var(--dim); font-size: 18px; }
button.decision { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 8px; background: var(--surface); cursor: pointer; }
button.decision.teal { border: 1.5px solid var(--accent); color: var(--accent-dark); } button.decision.amber { border: 1.5px solid var(--amber); color: var(--amber-ink); } button.decision.red { border: 1.5px solid var(--red); color: var(--red); }
button.decision[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 900px) { .risk-prog { flex-wrap: wrap; } .rp { flex: 1 1 45%; margin: 4px 0; } .rp-arrow { display: none; } .stepper { flex-wrap: wrap; } .step-line { display: none; } .step { margin: 4px 12px 4px 0; } }

/* Level 22.4 — case workspace */
.case-head { display: flex; align-items: center; padding: 14px 16px; margin-bottom: 10px; }
.case-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.case-tab { font: inherit; font-size: 13px; padding: 8px 12px; border: none; border-bottom: 2px solid transparent; background: none; color: var(--dim); cursor: pointer; margin-bottom: -1px; }
.case-tab.on { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 600; }
.sla-tl { width: 260px; flex: none; margin-left: 16px; } .sla-tl-l { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--dim); margin-bottom: 4px; }
.sla-tl-bar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; } .sla-tl-bar span { display: block; height: 100%; background: var(--accent); }
.sla-tl-bar.tone-amber span { background: var(--amber); } .sla-tl-bar.tone-red span { background: var(--red); } .sla-tl-bar.tone-green span { background: var(--green); }
.sla-tl-s { font-size: 11.5px; font-weight: 600; margin-top: 4px; } .sla-tl-s.tone-red { color: var(--red); } .sla-tl-s.tone-amber { color: var(--amber-ink); } .sla-tl-s.tone-green { color: var(--green); }
.sla-mini { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: var(--surface-3); vertical-align: middle; overflow: hidden; margin-right: 6px; } .sla-mini span { display: block; height: 100%; background: var(--accent); }
.sla-mini.tone-amber span { background: var(--amber); } .sla-mini.tone-red span { background: var(--red); } .sla-mini.tone-green span { background: var(--green); }
.sla-mini-l { font-size: 11px; } .sla-mini-l.tone-red { color: var(--red); font-weight: 600; } .sla-mini-l.tone-amber { color: var(--amber-ink); }
@media (max-width: 900px) { .case-head { flex-direction: column; align-items: stretch; } .sla-tl { width: 100%; margin: 10px 0 0; } }

/* Level 22.5 — assessment level card: main | aside, collapsible Act text */
.level-grid { display: flex; align-items: flex-start; }
.level-main { flex: 1.6; min-width: 0; } .level-aside { flex: 1; min-width: 240px; margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--line); }
.aside-h { font-size: 11px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.aside-risk { display: flex; align-items: baseline; }
.level-aside .risk-row { flex-direction: column; align-items: stretch; } .level-aside .risk-field { width: 100%; margin-bottom: 6px; }
.act-body.clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1100px) { .level-grid { flex-direction: column; } .level-aside { margin: 12px 0 0; padding: 12px 0 0; border-left: none; border-top: 1px solid var(--line); } }

/* Level 22.5 — questionnaire progress */
.q-progress { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; position: sticky; top: 56px; z-index: 5; }
.q-progress .ui-filterbar { margin: 0 0 0 16px; } .q-progress .ui-chips > * { margin-bottom: 0; }
.q-ev summary::-webkit-details-marker { display: none; } .q-ev summary { list-style: none; }

/* Level 22.7 — RoPA section workspace */
.ropa-ws { display: flex; align-items: flex-start; margin-top: 12px; }
.ropa-subnav { width: 250px; flex: none; margin-right: 16px; }
.ropa-subnav-sum { font-size: 11.5px; color: var(--dim); padding: 0 10px 8px; }
.ropa-subnav-item { display: flex; align-items: center; width: 100%; text-align: left; font: inherit; font-size: 12.5px; padding: 6px 10px; margin-bottom: 2px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; }
.ropa-subnav-item:hover { background: var(--surface-3); } .ropa-subnav-item.on { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-sm); font-weight: 600; }
.ropa-subnav-l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ropa-ws-main { flex: 1; min-width: 0; }
.ropa-ws .ropa-section-body { padding: 0; }
@media (max-width: 900px) { .ropa-ws { flex-direction: column; } .ropa-subnav { width: 100%; display: flex; flex-wrap: wrap; margin: 0 0 10px; } .ropa-subnav-item { width: auto; } .ropa-subnav-sum { width: 100%; } }

/* Level 22.8 — collapsed imported context */
.dpia-import.collapsed .dpia-import-body { display: none; } .dpia-import.collapsed { padding-bottom: 8px; } .dpia-import.collapsed > div:first-child { margin-bottom: 0; }

/* Level 22.9 — density toggle, 5×5 matrix, evidence preview, bulk bar */
.ui-table-tools { display: flex; align-items: center; } .ui-density { font: inherit; font-size: 11px; padding: 3px 9px; margin-left: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--dim); cursor: pointer; }
.rm { display: inline-block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); max-width: 100%; }
.rm-row { display: flex; } .rm-row .rm-c { width: 92px; flex: none; } .rm-row .rm-c:first-child { width: 70px; }
.rm .rm-c { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 58px; padding: 6px; font-size: 11px; display: flex; flex-wrap: wrap; align-content: flex-start; }
.rm .rm-h { background: var(--surface-2); color: var(--dim); font-weight: 600; display: flex; align-items: center; justify-content: center; text-align: center; }
.rm .rm-c.b-low { background: var(--green-soft); } .rm .rm-c.b-medium { background: var(--amber-soft); } .rm .rm-c.b-high { background: #F8CBAD; } .rm .rm-c.b-critical { background: #E8756C; }
[data-theme="dark"] .rm .rm-c.b-high { background: #5A2A1E; } [data-theme="dark"] .rm .rm-c.b-critical { background: #7A2A26; }
.rm .rm-chip { display: inline-block; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin: 0 3px 3px 0; font-weight: 600; font-size: 10.5px; cursor: pointer; }
.rm .rm-chip.proj { border-style: dashed; opacity: .8; }
.ev-preview { display: inline-block; font-size: 11px; color: var(--accent-dark); margin-left: 8px; cursor: pointer; text-decoration: underline; }
.bulk-bar { display: flex; align-items: center; background: var(--accent-soft); border: 1px solid var(--accent-soft-line); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 12.5px; }
.bulk-bar > * + * { margin-left: 8px; }
/* Level 22.10 — notifications, onboarding, print */
.notif-btn { position: relative; } .notif-btn .notif-n { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--amber); color: #fff; font-size: 10px; font-weight: 700; display: none; align-items: center; justify-content: center; padding: 0 4px; }
.notif-btn.has .notif-n { display: inline-flex; } .notif-btn.alert .notif-n { background: var(--red); }
.notif-item { padding: 10px 12px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; margin-bottom: 8px; background: var(--surface); }
.notif-item.tone-red { border-left-color: var(--red); } .notif-item.tone-amber { border-left-color: var(--amber); } .notif-item.tone-grey { border-left-color: var(--line); }
.notif-h { font-size: 13px; font-weight: 600; } .notif-s { font-size: 12px; color: var(--dim); margin-top: 2px; }
.onboard { display: flex; align-items: stretch; } .onboard-step { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-right: 12px; } .onboard-step:last-child { margin-right: 0; }
.onboard-n { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; margin-bottom: 8px; }
.onboard-step h3 { margin: 0 0 4px; font-size: 14px; } .onboard-step p { margin: 0; font-size: 12.5px; color: var(--dim); line-height: 1.5; }
@media print { .dpia-nav, .case-tabs, .ui-filterbar, .q-progress, .bulk-bar, .notif-btn, .dpia-actions, .ropa-subnav, .act-toggle { display: none !important; } .level-grid, .ropa-ws, .dpia-layout { display: block !important; } .level-aside { border: none; margin: 8px 0 0; padding: 0; } }
@media (max-width: 900px) { .q-progress { position: static; flex-direction: column; align-items: stretch; } .q-progress .ui-filterbar { margin: 8px 0 0; } .onboard { flex-direction: column; } .onboard-step { margin: 0 0 10px; } .rm { overflow-x: auto; } }