/* LikeCard ERP Engagement Portal — AGI · Advisory & Tax house style.
   Everything is self-hosted: no CDN, no webfont service. Works offline on the LAN. */

@font-face {
  font-family: "Carlito";
  src: url("/static/fonts/Carlito-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Carlito";
  src: url("/static/fonts/Carlito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Carlito";
  src: url("/static/fonts/Carlito-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Brand */
  --navy: #0d1f3b;
  --brick: #bf382b;
  --orange: #e8821a;

  /* Neutrals carry a slight navy bias rather than a flat mid-grey. */
  --paper: #ffffff;
  --surface: #f7f8fa;
  --surface-2: #eef1f5;
  --border: #d8dee7;
  --text: #16202f;
  --text-muted: #5c6a7e;
  --link: #0d1f3b;

  --sidebar-bg: #0d1f3b;
  --sidebar-text: #c8d2e0;
  --sidebar-active: #e8821a;
  --sidebar-hover: rgba(255, 255, 255, 0.07);

  --shadow: 0 1px 2px rgba(13, 31, 59, 0.06), 0 4px 12px rgba(13, 31, 59, 0.05);
  --radius: 6px;
  --header-h: 56px;

  /* Priority / status accents */
  --critical-bg: #fdecea; --critical-fg: #9b2419;
  --high-bg: #fdf0e2;     --high-fg: #9a5407;
  --medium-bg: #eaf0f8;   --medium-fg: #2b4a75;
  --ok-bg: #e7f4ec;       --ok-fg: #1e6b3f;
  --neutral-bg: #eef1f5;  --neutral-fg: #5c6a7e;

  --font: "Calibri", "Carlito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace;
}

:root[data-theme="dark"] {
  --paper: #10151d;
  --surface: #161d27;
  --surface-2: #1d2732;
  --border: #2b3745;
  --text: #e3e9f1;
  --text-muted: #97a4b6;
  --link: #7fb0ee;

  --sidebar-bg: #0a1526;
  --sidebar-text: #a9b6c8;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);

  --critical-bg: #3a1d1a; --critical-fg: #f19f96;
  --high-bg: #3a2a15;     --high-fg: #f0bd7c;
  --medium-bg: #1c2a3d;   --medium-fg: #9dbde4;
  --ok-bg: #16301f;       --ok-fg: #8ed0a6;
  --neutral-bg: #1d2732;  --neutral-fg: #97a4b6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* The page body must never scroll sideways — wide tables scroll in their own box. */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--orange); color: #fff; padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 12px; top: 8px; }

/* ---------------------------------------------------------------- app header */

.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 18px;
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--brick);
}

.wordmark { display: flex; align-items: baseline; gap: 9px; font-weight: 700; letter-spacing: .02em; }
.wordmark .agi { color: var(--orange); font-size: 19px; }
.wordmark .rule { width: 1px; height: 18px; background: rgba(255,255,255,.28); align-self: center; }
.wordmark .doc-title { font-weight: 400; font-size: 14px; color: #c8d2e0; }

.topbar-spacer { flex: 1; }

.confidential {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  color: var(--orange); text-transform: uppercase; white-space: nowrap;
}

.topbar-actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 6px 10px; cursor: pointer; font: inherit; font-size: 13px;
}
.icon-btn:hover { background: rgba(255,255,255,.16); }

.whoami { font-size: 12.5px; color: #c8d2e0; white-space: nowrap; }
.whoami strong { color: #fff; font-weight: 600; }
.role-chip {
  display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  background: var(--orange); color: #10151d; border-radius: 3px; padding: 1px 6px; font-weight: 700;
}

/* ---------------------------------------------------------------- layout */

.shell { display: flex; min-height: calc(100vh - var(--header-h)); }

.sidebar {
  width: 300px; flex: 0 0 300px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  overflow-y: auto;
  max-height: calc(100vh - var(--header-h));
  position: sticky; top: var(--header-h);
  padding-bottom: 40px;
}

.sidebar-search { padding: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-search input {
  width: 100%; padding: 8px 10px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06);
  color: #fff; font: inherit; font-size: 13px;
}
.sidebar-search input::placeholder { color: #8492a6; }

.nav-group { padding: 10px 0 4px; }
.nav-group-title {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: #7b8ba3; padding: 6px 16px; font-weight: 700;
}

.nav-item {
  display: block; padding: 7px 16px; color: var(--sidebar-text);
  font-size: 13.5px; border-left: 3px solid transparent;
}
.nav-item:hover { background: var(--sidebar-hover); text-decoration: none; color: #fff; }
.nav-item.active { background: rgba(232,130,26,.12); border-left-color: var(--sidebar-active); color: #fff; font-weight: 600; }

/* Collapsible heading tree */
.nav-tree summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 16px; font-size: 13.5px; color: var(--sidebar-text);
  border-left: 3px solid transparent;
}
.nav-tree summary::-webkit-details-marker { display: none; }
.nav-tree summary:hover { background: var(--sidebar-hover); color: #fff; }
.nav-tree summary .caret {
  width: 0; height: 0; flex: none;
  border-left: 4px solid currentColor; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  transition: transform .12s ease;
}
.nav-tree details[open] > summary > .caret { transform: rotate(90deg); }
.nav-tree .lvl-1 { padding-left: 16px; font-weight: 600; }
.nav-tree .lvl-2 { padding-left: 30px; }
.nav-tree .lvl-3 { padding-left: 44px; font-size: 12.5px; color: #9aa8bc; }
.nav-tree .lvl-4 { padding-left: 58px; font-size: 12.5px; color: #8494aa; }

.main {
  flex: 1;
  min-width: 0; /* lets children shrink so wide tables scroll instead of stretching the page */
  display: flex;
  gap: 28px;
  padding: 28px 32px 80px;
  align-items: flex-start;
}

.content { flex: 1; min-width: 0; max-width: 980px; }

/* Sticky "on this page" mini-TOC */
.minitoc {
  width: 210px; flex: 0 0 210px;
  position: sticky; top: calc(var(--header-h) + 24px);
  max-height: calc(100vh - var(--header-h) - 60px);
  overflow-y: auto;
  font-size: 12.5px;
  border-left: 1px solid var(--border);
  padding-left: 14px;
}
.minitoc h4 {
  margin: 0 0 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-muted);
}
.minitoc a { display: block; padding: 3px 0; color: var(--text-muted); line-height: 1.35; }
.minitoc a:hover { color: var(--brick); }
.minitoc a.d2 { padding-left: 10px; }
.minitoc a.d3 { padding-left: 20px; }
.minitoc a.current { color: var(--brick); font-weight: 600; }

@media (max-width: 1180px) { .minitoc { display: none; } }
@media (max-width: 860px) {
  .sidebar { display: none; }
  .main { padding: 18px 16px 60px; }
}

/* ---------------------------------------------------------------- typography */

.doc h1, .doc h2, .doc h3, .doc h4 {
  color: var(--navy); line-height: 1.25; margin: 1.8em 0 .6em;
  /* Anchors must clear the sticky header, or every jump lands underneath it. */
  scroll-margin-top: calc(var(--header-h) + 16px);
}
:root[data-theme="dark"] .doc h1,
:root[data-theme="dark"] .doc h2,
:root[data-theme="dark"] .doc h3,
:root[data-theme="dark"] .doc h4 { color: #dbe5f2; }

.doc h1 { font-size: 27px; border-bottom: 2px solid var(--brick); padding-bottom: 8px; margin-top: 0; }
.doc h2 { font-size: 21px; }
.doc h3 { font-size: 17px; }
.doc h4 { font-size: 15px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

.doc p { margin: .7em 0; }
.doc ul, .doc ol { margin: .6em 0; padding-left: 22px; }
.doc li { margin: .25em 0; }
.doc strong { color: var(--navy); font-weight: 700; }
:root[data-theme="dark"] .doc strong { color: #e8eef7; }

.doc blockquote {
  margin: 1em 0; padding: 10px 16px;
  border-left: 3px solid var(--orange);
  background: var(--surface);
  color: var(--text-muted);
}
.doc blockquote p { margin: .3em 0; }

.doc code {
  font-family: var(--mono); font-size: .88em;
  background: var(--surface-2); padding: 1px 5px; border-radius: 3px;
}
.doc pre { background: var(--surface-2); padding: 12px 14px; border-radius: var(--radius); overflow-x: auto; }
.doc pre code { background: none; padding: 0; }

.doc hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }

/* Heading anchor links */
.anchor {
  opacity: 0; margin-left: 8px; font-size: .72em; color: var(--text-muted);
  text-decoration: none; font-weight: 400;
}
h1:hover .anchor, h2:hover .anchor, h3:hover .anchor, h4:hover .anchor { opacity: 1; }

/* Part I / Part II section break */
.section-break { margin: 2.4em 0; border-top: 3px double var(--border); }

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

.table-block { margin: 1.4em 0; }

.table-toolbar {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-bottom: 5px;
}
.table-toolbar .table-caption { margin-right: auto; font-size: 12px; color: var(--text-muted); }

.btn-mini {
  font: inherit; font-size: 11.5px; cursor: pointer;
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 3px 9px; text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.btn-mini:hover { background: var(--surface-2); color: var(--brick); border-color: var(--brick); text-decoration: none; }

/* The scroll container: wide tables scroll here, never on the page body. */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
}

.doc table, table.grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
  min-width: max-content; /* forces the scroll container to engage instead of squashing cells */
}
.doc table th, table.grid th {
  background: var(--surface-2);
  color: var(--navy);
  text-align: left;
  font-weight: 700;
  padding: 9px 12px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
:root[data-theme="dark"] .doc table th,
:root[data-theme="dark"] table.grid th { color: #dbe5f2; }

.doc table td, table.grid td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  max-width: 460px;
}
.doc table tr:last-child td, table.grid tr:last-child td { border-bottom: 0; }
.doc table tbody tr:nth-child(even), table.grid tbody tr:nth-child(even) { background: var(--surface); }
.doc table tbody tr:hover, table.grid tbody tr:hover { background: var(--surface-2); }

/* ---------------------------------------------------------------- chips */

.chip {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px; white-space: nowrap;
  background: var(--neutral-bg); color: var(--neutral-fg);
}
.chip-critical { background: var(--critical-bg); color: var(--critical-fg); }
.chip-high     { background: var(--high-bg);     color: var(--high-fg); }
.chip-medium   { background: var(--medium-bg);   color: var(--medium-fg); }
.chip-closed, .chip-done { background: var(--ok-bg); color: var(--ok-fg); }
.chip-blocked  { background: var(--critical-bg); color: var(--critical-fg); }
.chip-inprogress { background: var(--high-bg); color: var(--high-fg); }

/* ---------------------------------------------------------------- buttons & forms */

.btn {
  font: inherit; font-size: 13.5px; cursor: pointer;
  border-radius: var(--radius); padding: 8px 14px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: #16304f; }
.btn-danger { background: var(--brick); border-color: var(--brick); color: #fff; }
.btn-danger:hover { background: #a52f24; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
select, textarea {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--paper); color: var(--text);
}
textarea { resize: vertical; min-height: 60px; }

.field { margin-bottom: 14px; }

/* ---------------------------------------------------------------- page furniture */

.page-head {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--brick);
}
.page-head h1 { margin: 0; font-size: 24px; color: var(--navy); }
:root[data-theme="dark"] .page-head h1 { color: #dbe5f2; }
.page-head .sub { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

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

.alert { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 13.5px; }
.alert-error { background: var(--critical-bg); color: var(--critical-fg); border: 1px solid currentColor; }
.alert-ok { background: var(--ok-bg); color: var(--ok-fg); border: 1px solid currentColor; }
.alert-warn { background: var(--high-bg); color: var(--high-fg); border: 1px solid currentColor; }

.muted { color: var(--text-muted); }
.small { font-size: 12.5px; }
.empty { padding: 40px; text-align: center; color: var(--text-muted); }

/* ---------------------------------------------------------------- login */

.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, #16304f 100%);
  padding: 20px;
}
.login-card {
  width: 100%; max-width: 400px; background: var(--paper);
  border-radius: 8px; padding: 32px; box-shadow: 0 20px 50px rgba(0,0,0,.35);
  border-top: 4px solid var(--brick);
}
.login-card .wordmark { justify-content: center; margin-bottom: 4px; }
.login-card .wordmark .agi { font-size: 24px; }
.login-card h1 { font-size: 17px; color: var(--navy); text-align: center; margin: 10px 0 2px; }
:root[data-theme="dark"] .login-card h1 { color: #dbe5f2; }
.login-card .tag { text-align: center; color: var(--text-muted); font-size: 12.5px; margin-bottom: 22px; }
.login-card .btn { width: 100%; justify-content: center; }
.login-foot {
  margin-top: 20px; text-align: center;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--brick); font-weight: 700;
}

/* ---------------------------------------------------------------- checklist */

.filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
}
.filters .field { margin: 0; }
.filters .field.grow { flex: 1; min-width: 180px; }
.filters select, .filters input { min-width: 130px; }

.count-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 13px; color: var(--text-muted);
}
.count-line strong { color: var(--brick); font-size: 15px; }

.col-toggles { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; }
.col-toggles label {
  display: inline-flex; align-items: center; gap: 5px; margin: 0;
  font-weight: 400; color: var(--text-muted); cursor: pointer;
}
.col-toggles input { width: auto; }

table.grid th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
table.grid th a:hover { color: var(--brick); text-decoration: none; }
table.grid td.ref { font-family: var(--mono); font-size: 12px; white-space: nowrap; font-weight: 700; }
table.grid .row-form { display: flex; gap: 6px; align-items: flex-start; }
table.grid .row-form textarea { min-height: 34px; font-size: 12.5px; }
table.grid .row-form select { font-size: 12.5px; }

/* The edit forms live outside the table (a <form> inside a <tr> is invalid HTML and
   the parser hoists it out, wrecking the row). They still need to be in the document. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --- checklist grid: keep 151 rows inside one screen ---------------------- */

/* Without a height limit the page runs on for thousands of pixels and the column
   headers scroll out of sight. Boxing the table means the filters stay put, the
   header stays visible, and the rows scroll inside. */
.grid-scroll {
  max-height: calc(100vh - var(--header-h) - 250px);
  min-height: 340px;
  overflow: auto;
}

.grid-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 -2px 0 var(--border);
}

/* Compact density — the default row padding is built for prose, not a 151-row list. */
table.grid.compact { min-width: 1080px; font-size: 12.5px; }
table.grid.compact th { padding: 7px 9px; font-size: 11.5px; }
table.grid.compact td { padding: 5px 9px; line-height: 1.4; max-width: none; }

table.grid.compact select,
table.grid.compact textarea { padding: 3px 6px; font-size: 12px; }
table.grid.compact textarea { min-height: 28px; }

/* Fixed widths stop the two prose columns from stretching every row. */
table.grid.compact th[data-col="ref"]            { width: 78px; }
table.grid.compact th[data-col="workstream"]     { width: 96px; }
table.grid.compact th[data-col="requirement"]    { width: 23%; }
table.grid.compact th[data-col="current_signal"] { width: 25%; }
table.grid.compact th[data-col="priority"]       { width: 84px; }
table.grid.compact th[data-col="session"]        { width: 64px; }
table.grid.compact th[data-col="status"]         { width: 118px; }
table.grid.compact th[data-col="notes"]          { width: 17%; }

/* Long signal text is clamped to three lines; the full text is one click away, and
   is always complete in the Excel and PDF exports. */
table.grid.compact td[data-col="current_signal"] .clamp,
table.grid.compact td[data-col="requirement"] .clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}
table.grid.compact td .clamp.open {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  cursor: default;
}

/* ---------------------------------------------------------------- flow chart */

.flow-legend {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  padding: 10px 14px; margin: 14px 0 22px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 12.5px; color: var(--text-muted);
}
.dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.dot-live    { background: #1e6b3f; }
.dot-testing { background: var(--orange); }
.dot-gap     { background: var(--brick); }
.dot-none    { background: #9aa8bc; }

.flow { display: flex; flex-direction: column; align-items: stretch; }

.flow-stage {
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 16px;
  page-break-inside: avoid;
}

.flow-stage-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.flow-num {
  flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
}
.flow-stage-head h2 {
  margin: 2px 0 0; font-size: 15.5px; color: var(--navy); line-height: 1.25;
}
:root[data-theme="dark"] .flow-stage-head h2 { color: #dbe5f2; }
.flow-stage-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted); }

/* The steps inside a stage. They run left-to-right in reading order. */
.flow-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 8px;
}

.flow-node {
  border: 1px solid var(--border);
  border-top: 3px solid #9aa8bc;
  border-radius: 5px;
  background: var(--paper);
  padding: 8px 10px;
  page-break-inside: avoid;
}
.flow-node.n-live    { border-top-color: #1e6b3f; }
.flow-node.n-testing { border-top-color: var(--orange); }
.flow-node.n-gap     { border-top-color: var(--brick); background: var(--critical-bg); }

.flow-node-label {
  font-size: 12.5px; font-weight: 700; color: var(--navy); line-height: 1.3;
}
:root[data-theme="dark"] .flow-node-label { color: #dbe5f2; }
:root[data-theme="dark"] .flow-node.n-gap .flow-node-label { color: var(--critical-fg); }

.flow-node-desc {
  margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--text-muted);
}

.flow-tag {
  display: inline-block; margin-left: 5px;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 5px; border-radius: 3px; vertical-align: middle; white-space: nowrap;
}
.t-live    { background: var(--ok-bg);       color: var(--ok-fg); }
.t-testing { background: var(--high-bg);     color: var(--high-fg); }
.t-gap     { background: var(--brick);       color: #fff; }

.flow-arrow {
  text-align: center; color: var(--orange);
  font-size: 15px; line-height: 1; padding: 5px 0;
}

.flow-break {
  margin: 22px 0; padding: 14px 16px;
  border: 1px solid var(--brick); border-left: 4px solid var(--brick);
  border-radius: var(--radius);
  background: var(--critical-bg);
  page-break-inside: avoid;
}
.flow-break-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--brick); margin-bottom: 4px;
}
.flow-break p { margin: 0; color: var(--critical-fg); font-size: 13px; }

.flow-cross {
  margin-top: 22px; padding: 14px 16px;
  border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.flow-cross h2 {
  margin: 0 0 10px; font-size: 14px; color: var(--navy);
  text-transform: uppercase; letter-spacing: .06em;
}
:root[data-theme="dark"] .flow-cross h2 { color: #dbe5f2; }

/* ---------------------------------------------------------------- back to top */

.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;

  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 4px 14px rgba(13, 31, 59, .3);
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  line-height: 1;

  /* Hidden until the reader has actually scrolled, so it never covers content
     on a short page. Kept in the layout (not display:none) so it can fade. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to-top:hover {
  background: var(--brick);
  border-color: var(--brick);
}

:root[data-theme="dark"] .to-top {
  background: var(--surface-2);
  border-color: var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
:root[data-theme="dark"] .to-top:hover {
  background: var(--brick);
  border-color: var(--brick);
}

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}

@media (max-width: 860px) {
  .to-top { right: 14px; bottom: 14px; }
}

/* print-friendly base styles (browser Ctrl+P; the PDF export uses its own sheet) */
@media print {
  .topbar, .sidebar, .minitoc, .table-toolbar, .filters, .col-toggles, .actions, .no-print { display: none !important; }
  .shell, .main { display: block; padding: 0; }
  .content { max-width: 100%; }
  .table-scroll { overflow: visible; border: 0; }
  .doc table { font-size: 9pt; page-break-inside: auto; }
  .doc table th { background: #eee !important; -webkit-print-color-adjust: exact; }
  .doc tr { page-break-inside: avoid; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: none; }
}