.coverage small.accepted {
  color: var(--green);
}

.tab-load-error {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.tab-load-error strong { color: var(--ink); }
.tab-load-error p { margin: 0; max-width: 680px; }
.tab-load-error button { width: auto; }

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

.table-pagination button { width: auto; }
.table-pagination strong { font-size: 12px; color: var(--muted); }

.coverage small.data-warning {
  color: #7a687d;
}

.cadence-list > div {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  padding: 9px 0;
}

.cadence-list > div > i {
  margin-top: 5px;
}

.cadence-list span strong,
.cadence-list span small,
.cadence-list span em {
  display: block;
}

.cadence-list span small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.cadence-list span em {
  margin-top: 3px;
  color: #7a687d;
  font-size: 10px;
  font-style: normal;
}

.cadence-list b {
  white-space: nowrap;
}

.goal-registry,
.report-diagnostics { display:grid; gap:8px; margin-top:12px; }
.goal-registry > article { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.goal-registry > article.provisional { border-color:#e6b66b; background:var(--warn); }
.goal-registry article span,.goal-registry article small { display:block; color:var(--muted); font-size:11px; }
.goal-registry article small { grid-column:1/-1; }
.goal-registry article b { color:var(--green); font-size:11px; }
.goal-registry article.provisional b { color:#8a651d; }
.goal-meaning-form { display:flex; gap:7px; margin-top:8px; }
.goal-meaning-form input { flex:1; min-width:220px; }
.goal-meaning-form button { white-space:nowrap; }
.conversion-gaps { display:flex; flex-wrap:wrap; gap:6px; padding:12px; border-radius:12px; background:#fff0d7; }
.conversion-gaps strong { width:100%; }
.conversion-gaps span { padding:4px 8px; border-radius:999px; background:#fff; font-size:11px; }
.report-contract { border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }
.report-contract.attention { border-color:#e6b66b; }
.report-contract summary { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:13px 15px; cursor:pointer; }
.report-contract summary span small { display:block; color:var(--muted); font-size:11px; }
.report-contract summary b,.report-contract summary em { font-size:11px; font-style:normal; }
.report-contract summary em { color:var(--green); }
.report-contract.attention summary em { color:#8a651d; }
.report-contract > div { padding:0 15px 13px; border-top:1px solid var(--line); }
.report-contract p { margin:8px 0 0; color:var(--muted); font-size:12px; }
.document-audit-head { margin-top:22px; }

@media(max-width:700px) {
  .report-contract summary { grid-template-columns:1fr; }
  .goal-registry > article { grid-template-columns:1fr; }
  .goal-registry article small { grid-column:auto; }
  .goal-meaning-form { display:grid; }
  .goal-meaning-form input { min-width:0; }
}

/* Bundled here because the managed shell exposes the module's approved
   readiness asset as a single stylesheet. */
.metric-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tab-panel.terminal-mode > :not(#data-terminal) { display: none !important; }
.tab-panel.terminal-mode #data-terminal { display: block; }

.goal-bulk-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 20px; padding:18px; border:1px solid #a7d9c2; border-radius:16px; background:#eff9f4; }
.goal-bulk-panel h3 { margin:3px 0; font-size:20px; }
.goal-bulk-panel p { margin:0; color:var(--muted); }
.goal-bulk-actions { display:flex; align-items:center; gap:8px; }
.goal-bulk-panel .message { grid-column:1/-1; margin:0; }
.goal-filters { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:7px; }
.goal-filters input { min-width:260px; flex:1; }
.goal-filter { background:#fff; color:var(--green); border-color:#aac0b4; }
.goal-filter.active { background:var(--green); color:#fff; }
.goal-rows { display:grid; gap:8px; }
.goal-registry .goal-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px 12px; align-items:start; padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.goal-registry .goal-row.provisional { border-color:#e6b66b; background:var(--warn); }
.goal-row .goal-check { padding-top:3px; }
.goal-row code { display:block; margin-top:2px; color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.goal-row > small { grid-column:2/-1; }
.goal-suggestion { display:flex; gap:8px; align-items:center; margin-top:7px; }
.goal-suggestion b { padding:3px 7px; border-radius:999px; background:#dff3e8; color:var(--green)!important; white-space:nowrap; }
.goal-row.review .goal-suggestion b { background:#fff; color:#8a651d!important; }
.goal-suggestion small { color:var(--muted); }
.goal-row .goal-meaning-form { display:grid; grid-template-columns:minmax(260px,1fr) auto; }

@media (max-width:760px) {
  .goal-bulk-panel { grid-template-columns:1fr; }
  .goal-bulk-actions { align-items:stretch; flex-direction:column; }
  .goal-bulk-actions button { width:100%; }
  .goal-registry .goal-row { grid-template-columns:auto minmax(0,1fr); }
  .goal-row > b,.goal-row > small { grid-column:2; }
  .goal-row .goal-meaning-form { grid-template-columns:1fr; }
}

@media (max-width:600px) {
  .metric-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

.direct-overview,
.direct-cadence-section,
.direct-registry-section,
.direct-policy-card {
  min-width: 0;
}

.direct-summary {
  margin-bottom: 12px;
}

.direct-summary article strong {
  font-size: 22px;
  overflow-wrap: anywhere;
}

.direct-checklist {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.direct-checklist article {
  display: flex;
  align-items: flex-start;
  padding: 14px;
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}

.direct-checklist article.present {
  border-color: #a7d9c2;
}

.direct-checklist article.missing {
  background: var(--gray);
  border-color: #d7dcda;
}

.direct-checklist article.present i {
  background: #26a26f;
  box-shadow: 0 0 0 4px var(--mint);
}

.direct-checklist article.missing i {
  background: #e6a646;
}

.direct-checklist h3 {
  margin: 0;
  font-size: 14px;
}

.direct-checklist p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.direct-cadence-grid .cadence-list {
  min-height: 104px;
}

.direct-file-registry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.direct-file-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.direct-file-card.accepted {
  border-color: #a7d9c2;
}

.direct-file-card.limited {
  border-color: #e6c88f;
}

.direct-file-card.review {
  border-color: #dfaaa4;
}

.direct-file-card > header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: #f8faf8;
}

.direct-file-card.accepted > header {
  background: var(--mint);
}

.direct-file-card > header strong,
.direct-file-card > header small {
  display: block;
  overflow-wrap: anywhere;
}

.direct-file-card > header small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.direct-file-card > header b {
  align-self: start;
  flex: none;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--green);
  font-size: 10px;
}

.direct-file-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border-bottom: 1px solid var(--line);
  background: var(--line);
}

.direct-file-stats span {
  padding: 10px;
  background: #fff;
  color: var(--muted);
  font-size: 10px;
}

.direct-file-stats strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
}

.direct-components {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 18px;
}

.direct-components span {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--gray);
  color: var(--muted);
  font-size: 10px;
}

.direct-components span.ready {
  background: var(--mint);
  color: var(--green);
}

.direct-file-card > p {
  margin: 0;
  padding: 0 18px 12px;
  color: var(--red);
  font-size: 11px;
}

.direct-file-card > footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 18px;
  background: #f4f6f4;
  color: var(--muted);
  font-size: 10px;
}

.direct-file-card > footer b {
  color: var(--green);
  text-align: right;
}

.direct-policy-card {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.direct-policy-card .direct-policy {
  margin: 0;
  padding: 0;
  border: 0;
}

.direct-policy-card .direct-policy ol {
  color: var(--muted);
}

@media (max-width: 800px) {
  .direct-file-registry {
    grid-template-columns: 1fr;
  }
}

/* Control-point navigation and per-section status cards. */
.headline-stats article {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 28px #1c2c240b;
}

.headline-stats span,
.headline-stats small {
  color: var(--muted);
}

.headline-stats article.good {
  border-color: #8fceb0;
  background: #effaf4;
}

.headline-stats article.danger {
  border-color: #e2a39d;
  background: #fff1ef;
}

.headline-stats article.danger strong,
.headline-stats article.danger small {
  color: var(--red);
}

.headline-stats {
  grid-template-columns: 1fr;
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: 420px;
}

.transparency-period-card {
  display: grid;
  gap: 3px;
  padding: 14px 16px !important;
  border-color: #a7d9c2 !important;
  background: #effaf4 !important;
}

.transparency-period-card strong {
  margin: 1px 0 !important;
  color: var(--ink) !important;
  font-size: clamp(18px, 2vw, 25px) !important;
  white-space: nowrap;
}

.transparency-period-card small {
  max-width: 520px;
  line-height: 1.35;
}

.hero {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  align-items: center;
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .headline-stats { justify-self: stretch; max-width: none; }
  .transparency-period-card strong { white-space: normal; }
}

.direct-summary,
.data-health {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.canonical-health {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.auto-accept-guide {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 14px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid #a7d9c2;
  border-radius: 14px;
  background: var(--mint);
}

.auto-accept-guide strong {
  grid-row: 1 / 3;
  align-self: center;
}

.auto-accept-guide span {
  color: var(--green);
  font-weight: 700;
}

.auto-accept-guide small {
  color: var(--muted);
}

.coverage-priority {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 14px;
  align-items: center;
  margin-bottom: 12px;
  padding: 13px 15px;
  border-radius: 12px;
  background: #f2f6f3;
}

.coverage-priority span,
.coverage-priority small { color: var(--muted); font-size: 11px; }
.coverage-priority strong { font-size: 17px; }
.coverage-priority small { grid-column: 2; }

.source-coverage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.source-coverage article {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.source-coverage article.good { border-color: #a7d9c2; }
.source-coverage article.warn { border-color: #e6c88f; }
.source-coverage article.info { border-color: #cbd8d1; }
.source-coverage header { display:flex; justify-content:space-between; gap:10px; padding:14px 15px; background:#f8faf8; }
.source-coverage article.good header { background:var(--mint); }
.source-coverage article.warn header { background:var(--warn); }
.source-coverage article.info header { background:#f1f5f2; }
.source-coverage header span,.source-coverage p span { display:block; color:var(--muted); font-size:10px; }
.source-coverage header strong { display:block; font-size:17px; }
.source-coverage header b { align-self:start; flex:none; padding:3px 7px; border-radius:999px; background:#fff; color:var(--green); font-size:10px; }
.source-coverage article.warn header b { color:#8a651d; }
.source-coverage p { margin:0; padding:12px 15px; }
.source-coverage p strong { display:block; margin-top:3px; overflow-wrap:anywhere; font-size:11px; }
.source-coverage article > small { display:block; padding:0 15px 12px; color:var(--green); }
.source-coverage footer { padding:9px 15px; background:#f4f6f4; color:var(--muted); font-size:10px; }
.coverage-gaps { display:flex; flex-wrap:wrap; gap:5px; padding:0 15px 12px; }
.coverage-gaps > span { width:100%; color:#8a651d; font-size:10px; }
.coverage-gaps b { padding:3px 6px; border-radius:999px; background:var(--warn); color:#8a651d; font-size:10px; }
.coverage-advisories { display:grid; gap:8px; margin-top:12px; padding:14px 15px; border:1px solid #bdd8ca; border-left:4px solid var(--green); border-radius:12px; background:#f2faf6; }
.coverage-advisories.has-actions { border-color:#e6c88f; border-left-color:#d69d3c; background:#fff8eb; }
.coverage-advisories > header { display:flex; justify-content:space-between; gap:14px; align-items:baseline; }
.coverage-advisories > header strong,.coverage-advisories > header span { display:block; }
.coverage-advisories > header span { color:var(--muted); font-size:11px; text-align:right; }
.data-notice { padding:11px 12px; border:1px solid #dbe4df; border-radius:10px; background:#fff; }
.data-notice.action { border-color:#e6c88f; }
.data-notice b,.data-notice p,.data-notice small { display:block; }
.data-notice p { margin:4px 0; color:var(--muted); font-size:11px; }
.data-notice small { color:var(--green); font-weight:700; }
.data-notice.action small { color:#805917; }

.scope-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.scope-stats article {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.scope-stats span,
.scope-stats small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.scope-stats strong {
  display: block;
  margin: 4px 0;
  font-size: 20px;
  overflow-wrap: anywhere;
}

.data-navigator,
.canon-guide {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.data-navigator {
  grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr);
  align-items: end;
}

.data-navigator h2,
.canon-guide h2 {
  margin: 3px 0 5px;
}

.data-navigator p,
.canon-guide p {
  margin: 0;
  color: var(--muted);
}

.data-nav-controls,
.section-tools {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.data-nav-controls select,
.data-nav-controls input,
.section-tools input {
  min-width: 0;
  flex: 1;
}

.data-fold {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.data-fold > summary {
  display: flex;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
}

.data-fold > summary::-webkit-details-marker { display: none; }
.data-fold > summary::after { content: 'Раскрыть'; margin-left: auto; color: var(--green); font-size: 11px; }
.data-fold[open] > summary::after { content: 'Свернуть'; }
.data-fold > summary strong,
.data-fold > summary small { display: block; }
.data-fold > summary small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.data-fold .fold-content { padding: 0 20px 20px; }
.data-fold .viewer.fold-content { padding: 0 20px 20px; }
.section-tools { margin-bottom: 12px; }

.canon-guide ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: canon;
}

.canon-guide li {
  counter-increment: canon;
  min-width: 0;
  padding: 14px;
  border-radius: 12px;
  background: #f2f6f3;
}

.canon-guide li::before {
  content: counter(canon);
  display: grid;
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 11px;
}

.canon-guide li strong,
.canon-guide li span { display: block; }
.canon-guide li span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.canon-work { padding: 14px 16px; border-left: 4px solid var(--green); background: var(--mint); }
.canon-work p { margin-top: 4px; color: var(--ink); }

@media (max-width: 900px) {
  .data-navigator { grid-template-columns: 1fr; }
  .canon-guide ol { grid-template-columns: 1fr 1fr; }
  .source-coverage { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .scope-stats,
  .canon-guide ol,
  .canonical-health { grid-template-columns: 1fr; }
  .data-nav-controls,
  .section-tools { flex-direction: column; }
  .auto-accept-guide { grid-template-columns: 1fr; }
  .auto-accept-guide strong { grid-row: auto; }
  .coverage-priority { grid-template-columns: 1fr; }
  .coverage-priority small { grid-column: auto; }
}

@media (max-width: 700px) {
  .direct-checklist {
    grid-template-columns: 1fr;
  }

  .direct-file-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .direct-file-card > header,
  .direct-file-card > footer {
    display: grid;
  }

  .direct-file-card > footer b {
    text-align: left;
  }
}

/* Compact control-point header and consistent disclosure cards. */
.hero {
  gap: 18px;
  padding-block: 4px;
}

.hero h1 {
  margin: 5px 0 8px;
  font-size: clamp(30px, 4vw, 42px);
}

.hero p {
  max-width: 620px;
  font-size: 14px;
}

.transparency-period-card {
  padding: 11px 14px !important;
}

.period-source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.period-source-list span {
  padding: 3px 7px;
  border: 1px solid #cfe2d7;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 10px;
}

.section-fold {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.section-fold > summary {
  display: flex;
  min-width: 0;
  padding: 17px 20px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.section-fold > summary::-webkit-details-marker { display: none; }
.section-fold > summary::after {
  content: 'Раскрыть';
  flex: none;
  margin-left: auto;
  padding-left: 16px;
  color: var(--green);
  font-size: 11px;
}
.section-fold[open] > summary::after { content: 'Свернуть'; }
.section-fold > summary span { min-width: 0; }
.section-fold > summary strong,
.section-fold > summary small { display: block; overflow-wrap: anywhere; }
.section-fold > summary small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.section-fold > .fold-content { min-width: 0; padding: 0 20px 20px; }

.direct-warning,
.remark,
.technical-goals {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.direct-warning.action,
.remark.action { border-color: #e6c88f; }
.direct-warning.info,
.remark.info { border-color: #cbd8d1; }

.direct-warning > summary,
.technical-goals > summary {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.direct-warning > summary::-webkit-details-marker,
.technical-goals > summary::-webkit-details-marker { display: none; }
.direct-warning > summary b,
.technical-goals > summary b { margin-left: auto; color: var(--green); font-size: 10px; }
.direct-warning > div,
.technical-goals > div { padding: 0 14px 14px; border-top: 1px solid var(--line); }
.direct-warning p,
.remark p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }

.remarks-workbench {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid #cbd8d1;
  border-radius: 12px;
  background: #fff;
}

.remarks-workbench.warn { border-color: #e6c88f; background: var(--warn); }
.remarks-workbench > summary { display:flex; gap:12px; padding:14px; cursor:pointer; list-style:none; }
.remarks-workbench > summary::-webkit-details-marker { display:none; }
.remarks-workbench > summary span { min-width:0; }
.remarks-workbench > summary strong,
.remarks-workbench > summary small { display:block; }
.remarks-workbench > summary small { color:var(--muted); font-size:11px; }
.remarks-workbench > summary::after { content:'Раскрыть'; margin-left:auto; color:var(--green); font-size:11px; }
.remarks-workbench[open] > summary::after { content:'Свернуть'; }
.remarks-workbench > div { display:grid; gap:8px; padding:0 14px 14px; }
.remark { padding:12px 14px; }
.remark header { display:flex; justify-content:space-between; gap:12px; }
.remark header b { color:var(--green); font-size:10px; }

.data-health article.info { border-color:#cbd8d1; background:#f4f7f5; }
.data-health article.danger { border-color:#e2a39d; background:#fff1ef; }
.data-health article.danger strong { color:var(--red); }

.remark-period-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr)) auto;
  gap: 8px;
  margin-top: 10px;
}

.remark-period-form button { align-self: end; }
.technical-goals { margin-top: 10px; }
.technical-goals .goal-registry { margin-top: 10px; }

/* The shared shell may switch the document to dark mode by class or
   data-theme. Keep module surfaces readable without changing shell assets. */
:is(html[data-theme="dark"], body[data-theme="dark"], body.dark) .section-fold,
:is(html[data-theme="dark"], body[data-theme="dark"], body.dark) .data-fold,
:is(html[data-theme="dark"], body[data-theme="dark"], body.dark) .canon-guide,
:is(html[data-theme="dark"], body[data-theme="dark"], body.dark) .data-navigator,
:is(html[data-theme="dark"], body[data-theme="dark"], body.dark) .scope-stats article,
:is(html[data-theme="dark"], body[data-theme="dark"], body.dark) .direct-warning,
:is(html[data-theme="dark"], body[data-theme="dark"], body.dark) .remark,
:is(html[data-theme="dark"], body[data-theme="dark"], body.dark) .remarks-workbench,
:is(html[data-theme="dark"], body[data-theme="dark"], body.dark) .technical-goals,
:is(html[data-theme="dark"], body[data-theme="dark"], body.dark) .period-source-list span {
  background: #1e2d27;
  border-color: #3b5047;
  color: #edf5f1;
}

:is(html[data-theme="dark"], body[data-theme="dark"], body.dark) .section-fold small,
:is(html[data-theme="dark"], body[data-theme="dark"], body.dark) .data-fold small,
:is(html[data-theme="dark"], body[data-theme="dark"], body.dark) .direct-warning p,
:is(html[data-theme="dark"], body[data-theme="dark"], body.dark) .remark p {
  color: #b9c9c2;
}

@media (max-width: 700px) {
  main { padding-inline: 14px; }
  .hero { gap: 12px; }
  .hero h1 { font-size: 30px; }
  .metric-tabs { position: static; }
  .section-fold > summary,
  .data-fold > summary { padding: 14px; }
  .section-fold > .fold-content,
  .data-fold .fold-content,
  .data-fold .viewer.fold-content { padding: 0 14px 14px; }
  .remark-period-form { grid-template-columns: 1fr; }
}

/* The shared visual layer is injected after module HTML. These narrow,
   module-owned overrides preserve its palette while keeping this control
   point intentionally compact in both themes. */
html[data-sota-visual="true"] .hero {
  padding: 18px 22px !important;
  gap: 18px !important;
}
html[data-sota-visual="true"] .hero h1 {
  margin: 5px 0 8px !important;
  font-size: clamp(30px, 4vw, 42px) !important;
  line-height: 1.05 !important;
}
html[data-sota-visual="true"] .hero p { font-size: 14px !important; }
html[data-sota-visual="true"] :is(.section-fold,.data-fold,.canon-guide,.data-navigator,.remarks-workbench,.remark,.technical-goals,.direct-warning) {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
}
html[data-sota-visual="true"] :is(.section-fold,.data-fold,.canon-guide,.data-navigator,.remarks-workbench,.technical-goals,.direct-warning) {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
html[data-sota-visual="true"] :is(.period-source-list span,.data-health article.info) {
  background: var(--surface-raised) !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
}
html[data-sota-visual="true"] .data-health article.danger {
  background: var(--red-tint) !important;
  border-color: var(--red-border) !important;
}
html[data-sota-visual="true"] :is(.remarks-workbench.warn,.remark.action,.direct-warning.action) {
  background: var(--amber-tint) !important;
  border-color: var(--amber-border) !important;
}

@media (max-width: 700px) {
  html[data-sota-visual="true"] .hero { padding: 16px !important; }
  html[data-sota-visual="true"] .hero h1 { font-size: 30px !important; }
}