/* NursesGroup CRM Explorer — client-friendly white theme */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f7fa;
  --ink: #24292f;
  --ink-2: #57606a;
  --muted: #8b949e;
  --line: #e6eaef;
  --border: rgba(36, 41, 47, 0.10);
  --accent: #2a78d6;
  --accent-soft: #eaf2fc;
  --good: #0ca30c;
  --warning: #b47d00;
  --serious: #b4512e;
  --critical: #d03b3b;
  --good-soft: #ecf8ec;
  --warning-soft: #fdf3dc;
  --serious-soft: #fcefe9;
  --critical-soft: #fbecec;
  --radius: 12px;
  --sidebar-w: 272px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}
h1 { font-size: 1.85rem; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 0.4rem; }
h2 { font-size: 1.32rem; letter-spacing: -0.01em; margin: 2.6rem 0 0.8rem; display: flex; align-items: center; gap: 0.55rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
p { margin: 0.5rem 0; }
.lead { color: var(--ink-2); font-size: 1.05rem; max-width: 68ch; }

.ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
h2 .ico { color: var(--accent); width: 24px; height: 24px; }

/* ---------- Layout ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: #fafbfc;
  border-right: 1px solid var(--line);
  padding: 1.2rem 1rem 2rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0.4rem 1rem; }
.brand .logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 0.9rem;
}
.brand b { font-size: 0.95rem; display: block; line-height: 1.25; }
.brand span { font-size: 0.74rem; color: var(--muted); }

.nav-search {
  width: 100%;
  padding: 0.55rem 0.75rem;
  margin: 0 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.87rem;
}
.nav-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.nav-group { margin-bottom: 1rem; }
.nav-group > .nav-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  padding: 0.35rem 0.55rem;
}
.nav a, .nav .soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.42rem 0.6rem;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 0.89rem;
  text-decoration: none;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav .soon { color: var(--muted); cursor: default; }
.nav .soon .tag, .nav a .tag {
  font-size: 0.66rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0 0.5em;
  color: var(--muted);
  white-space: nowrap;
  background: var(--surface);
}

.main { flex: 1; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.7rem 2.2rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.crumbs { font-size: 0.85rem; color: var(--muted); display: flex; gap: 0.45rem; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.crumbs .sep { opacity: 0.5; }
.crumbs .here { color: var(--ink); font-weight: 600; }

.content { padding: 2.2rem 2.6rem 5rem; max-width: 1900px; margin-inline: auto; }

/* ---------- Cards & grids ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  box-shadow: 0 1px 2px rgba(36, 41, 47, 0.04);
}
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* stat tiles */
.stat { padding: 0.95rem 1.1rem; }
.stat .v { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.stat .l { font-size: 0.84rem; color: var(--ink-2); margin-top: 0.15rem; font-weight: 600; }
.stat .s { font-size: 0.76rem; color: var(--muted); }

/* icon cards */
.icard { display: flex; flex-direction: column; gap: 0.4rem; position: relative; }
.icard .ihead { display: flex; align-items: center; gap: 0.6rem; }
.icard .ihead .ico { color: var(--accent); width: 26px; height: 26px; }
.icard h3 { margin: 0; font-size: 1rem; }
.icard h3 a::after { content: ""; position: absolute; inset: 0; }
.icard p { margin: 0; font-size: 0.89rem; color: var(--ink-2); }
.icard .meta { font-size: 0.77rem; color: var(--muted); margin-top: auto; padding-top: 0.4rem; }
.icard:hover { border-color: var(--accent); }
.icard.soon { opacity: 0.6; }
.icard.soon:hover { border-color: var(--line); }

/* badges */
.badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: 0.76rem; font-weight: 600;
  border-radius: 99px;
  padding: 0.12em 0.75em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge .ico { width: 13px; height: 13px; }
.badge.good     { color: #067506;         background: var(--good-soft);     border-color: #bfe6bf; }
.badge.warning  { color: var(--warning);  background: var(--warning-soft);  border-color: #ecd9a5; }
.badge.serious  { color: var(--serious);  background: var(--serious-soft);  border-color: #f2cbb8; }
.badge.critical { color: var(--critical); background: var(--critical-soft); border-color: #f2c2c2; }
.badge.neutral  { color: var(--ink-2);    background: var(--surface-2);     border-color: var(--line); }

/* callout */
.callout {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem 1.2rem;
  margin: 1.1rem 0;
  box-shadow: 0 1px 2px rgba(36, 41, 47, 0.04);
}
.callout.risk { border-left-color: var(--critical); background: #fffafa; }
.callout.warn { border-left-color: #e0a80f; background: #fffdf5; }
.callout.tip  { border-left-color: var(--good); background: #fafffa; }
.callout h3 { margin: 0 0 0.3rem; font-size: 0.98rem; display: flex; align-items: center; gap: 0.5rem; }
.callout h3 .ico { width: 19px; height: 19px; }
.callout.risk h3 .ico { color: var(--critical); }
.callout.warn h3 .ico { color: #b58500; }
.callout.tip h3 .ico { color: var(--good); }
.callout p { font-size: 0.92rem; color: var(--ink-2); }

/* ---------- Tables ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
th, td { text-align: left; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; background: var(--surface-2); }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Horizontal flow (HTML nodes) ---------- */
.flow {
  display: flex; align-items: center; gap: 0;
  overflow-x: auto;
  padding: 1.1rem 0.3rem;
}
.flow .fnode {
  flex: 1 1 0; min-width: 112px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 0.7rem 0.65rem;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.flow .fnode:hover, .fnode:focus-visible { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(42, 120, 214, 0.12); }
.fnode .t { font-weight: 650; font-size: 0.88rem; line-height: 1.35; }
.fnode .d { font-size: 0.74rem; color: var(--muted); margin-top: 0.15rem; line-height: 1.4; }
.fnode .ni { display: grid; place-items: center; margin: 0 auto 0.4rem; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.fnode .ni .ico { width: 20px; height: 20px; }
.flow .arrow {
  flex: 0 0 auto;
  align-self: center;
  color: var(--accent);
  padding: 0 0.25rem;
  user-select: none;
  display: grid; place-items: center;
}
.flow .arrow svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.branch { flex: 1.6 1 0; min-width: 300px; }
.branch .brow-flow .fnode { min-width: 104px; }
.branch { display: flex; flex-direction: column; gap: 0.5rem; }

/* ---------- Journey (vertical storyboard) ---------- */
.journey { margin: 1.4rem 0; }
.jstep {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0 1.1rem;
  position: relative;
  padding-bottom: 1.4rem;
}
.jstep::before {
  content: "";
  position: absolute;
  left: 31px; top: 52px; bottom: 0;
  width: 2px;
  background: var(--line);
}
.jstep:last-child::before { display: none; }
.jstep .jnum {
  width: 64px; height: 52px;
  display: grid; place-items: center;
  position: relative; z-index: 1;
}
.jstep .jnum .circ {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent-soft);
  border: 2px solid var(--accent);
  color: var(--accent);
  display: grid; place-items: center;
}
.jstep .jnum .circ .ico { width: 21px; height: 21px; }
.jstep.alt .jnum .circ { background: var(--warning-soft); border-color: #e0a80f; color: #b58500; }
.jstep.end .jnum .circ { background: var(--good-soft); border-color: var(--good); color: #067506; }
.jstep .jbody {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1.15rem;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
  box-shadow: 0 1px 2px rgba(36, 41, 47, 0.04);
}
.jstep .jbody:hover, .jstep .jbody:focus-visible { border-color: var(--accent); box-shadow: 0 4px 14px rgba(42, 120, 214, 0.10); }
.jstep .jtitle { font-weight: 650; font-size: 0.99rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; }
.jstep .jtext { font-size: 0.9rem; color: var(--ink-2); margin-top: 0.25rem; }
.jstep .jmore { font-size: 0.78rem; color: var(--accent); margin-top: 0.35rem; font-weight: 600; }
.who {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-size: 0.72rem; font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.1em 0.7em;
}
.who .ico { width: 12px; height: 12px; }

/* ---------- SVG diagrams ---------- */
.diagram-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.diagram-wrap svg { display: block; min-width: 700px; width: 100%; height: auto; font-family: inherit; }
svg .node rect { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.4; }
svg .node.entity rect { fill: #fafbfc; stroke: #d6dde5; }
svg .node.hub rect { fill: var(--accent-soft); stroke: var(--accent); }
svg .node text { fill: var(--ink); font-size: 12.5px; font-weight: 600; }
svg .node text.sub { fill: var(--muted); font-size: 9.5px; font-weight: 400; }
svg .node { cursor: pointer; }
svg .node:hover rect { stroke: var(--accent); stroke-width: 2; }
svg .edge { stroke: #b6c2cf; stroke-width: 1.5; fill: none; }
svg .elabel { fill: var(--muted); font-size: 9.5px; }

/* ---------- Labeled bar list ---------- */
.barlist { display: grid; gap: 0.5rem; }
.barlist .brow { display: grid; grid-template-columns: 210px 1fr 90px; align-items: center; gap: 0.7rem; font-size: 0.87rem; }
.barlist .blabel { color: var(--ink-2); display: flex; gap: 0.5rem; align-items: center; }
.barlist .btrack { display: block; background: var(--surface-2); border-radius: 5px; height: 15px; overflow: hidden; }
.barlist .bfill { display: block; height: 100%; background: var(--accent); border-radius: 0 5px 5px 0; min-width: 2px; }
.barlist .bval { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 0.84rem; }

/* ---------- Collapsible feature cards ---------- */
details.feature {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 0.55rem;
  overflow: hidden;
}
details.feature summary {
  cursor: pointer;
  padding: 0.7rem 1.05rem;
  display: flex; align-items: center; gap: 0.7rem;
  font-weight: 600; font-size: 0.92rem;
  list-style: none;
}
details.feature summary::-webkit-details-marker { display: none; }
details.feature summary::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
  flex-shrink: 0;
}
details.feature[open] summary::before { transform: rotate(45deg); }
details.feature summary:hover { background: var(--surface-2); }
details.feature .body { padding: 0.75rem 1.15rem 0.95rem 2.2rem; font-size: 0.9rem; color: var(--ink-2); border-top: 1px solid var(--line); }
details.feature .body p { margin: 0.35rem 0; }

/* ---------- Detail modal (centered) ---------- */
.panel-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(36, 41, 47, 0.34);
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s;
}
.panel {
  position: fixed; inset: 0; margin: auto; z-index: 100;
  width: min(780px, 96vw);
  height: fit-content;
  max-height: 88vh;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(36, 41, 47, 0.22);
  opacity: 0; pointer-events: none;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.2s ease, opacity 0.2s ease;
  display: flex; flex-direction: column;
}
body.panel-open .panel { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
body.panel-open .panel-overlay { opacity: 1; pointer-events: auto; }
.panel header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.4rem 0.9rem;
  border-bottom: 1px solid var(--line);
}
.panel header h2 { margin: 0; font-size: 1.1rem; padding: 0; }
.panel header .kind { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.panel .close {
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; font-size: 0.95rem; line-height: 1;
}
.panel .close:hover { color: var(--ink); border-color: var(--muted); }
.panel .pbody { padding: 1rem 1.4rem 2rem; overflow-y: auto; font-size: 0.92rem; }
.panel .pbody h4 { margin: 1.1rem 0 0.3rem; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.panel .pbody ul { margin: 0.2rem 0; padding-left: 1.15rem; }
.panel .pbody li { margin: 0.3rem 0; }
.panel .pbody p { margin: 0.35rem 0; color: var(--ink-2); }
.panel .pbody .tech { font-size: 0.78rem; color: var(--muted); border-top: 1px solid var(--line); margin-top: 1.1rem; padding-top: 0.6rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.6rem 0; }

/* ---------- Comments ---------- */
.cbtn {
  display: inline-flex; align-items: center; gap: 0.3em;
  margin-left: 0.35rem;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); border-radius: 99px;
  padding: 0.15em 0.6em; cursor: pointer;
  font: inherit; font-size: 0.72rem; font-weight: 600;
  vertical-align: middle;
}
.cbtn .ico { width: 14px; height: 14px; }
.cbtn:hover { border-color: var(--accent); color: var(--accent); }
.cbtn.has { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.cm { border-top: 1px solid var(--line); margin-top: 1.3rem; padding-top: 0.9rem; }
.cm h4 { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.5rem !important; color: var(--ink) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.92rem !important; }
.cm h4 .ico { width: 17px; height: 17px; color: var(--accent); }
.cm-count { background: var(--accent-soft); color: var(--accent); border-radius: 99px; font-size: 0.72rem; padding: 0 0.6em; }
.cm-note { font-size: 0.84rem; color: var(--muted); }
.cm-list { display: grid; gap: 0.5rem; margin-bottom: 0.7rem; }
.cm-item { background: var(--surface-2); border-radius: 10px; padding: 0.6rem 0.85rem; }
.cm-item .cm-meta { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.8rem; }
.cm-item .cm-meta span { color: var(--muted); font-size: 0.72rem; }
.cm-item p { margin: 0.15rem 0 0 !important; font-size: 0.87rem; }
.cm-form { display: grid; gap: 0.55rem; margin-top: 0.6rem; }
.cm-id { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.cm-form input, .cm-form textarea {
  width: 100%; font: inherit; font-size: 0.88rem;
  border: 1px solid var(--line); border-radius: 9px;
  padding: 0.5rem 0.7rem; color: var(--ink); background: var(--surface);
  resize: vertical;
}
.cm-form input:focus, .cm-form textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.cm-as { font-size: 0.82rem; color: var(--ink-2); margin: 0 !important; }
.cm-change { border: none; background: none; color: var(--accent); cursor: pointer; font: inherit; font-size: 0.8rem; padding: 0; text-decoration: underline; }
.cm-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.8rem; }
.cm-err { color: var(--critical); font-size: 0.8rem; flex: 1; }
.cm-post {
  border: none; background: var(--accent); color: #fff;
  border-radius: 9px; padding: 0.5rem 1.1rem; cursor: pointer;
  font: inherit; font-size: 0.88rem; font-weight: 600;
}
.cm-post:hover { filter: brightness(1.06); }
.cm-post:disabled { opacity: 0.6; cursor: default; }

/* ---------- Decision diamonds & diagram notes ---------- */
.diagram-wrap svg .decision path.shape { fill: var(--warning-soft); stroke: #e0c98a; stroke-width: 1.5; }
.sketch-note { color: var(--muted); font-size: 0.85rem; }

/* ---------- Form & output samples (inside modals) ---------- */
.fform { display: grid; gap: 0.8rem; margin: 0.7rem 0 0.4rem; }
.fform-title {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-top: 0.9rem; margin-top: 1.1rem;
}
.fform-title .ico { width: 16px; height: 16px; color: var(--accent); }
.ffield label { font-weight: 600; font-size: 0.86rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.req, .opt {
  font-size: 0.66rem; font-weight: 700; border-radius: 99px; padding: 0.05em 0.6em;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.req { color: var(--critical); background: var(--critical-soft); border: 1px solid #f2c2c2; }
.opt { color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
.auto { font-size: 0.66rem; font-weight: 700; border-radius: 99px; padding: 0.05em 0.6em; text-transform: uppercase; letter-spacing: 0.04em; color: #067506; background: var(--good-soft); border: 1px solid #bfe6bf; }
.fctl {
  border: 1px solid #d6dde5; background: var(--surface-2);
  border-radius: 8px; padding: 0.45rem 0.75rem;
  font-size: 0.86rem; color: var(--ink-2);
  margin-top: 0.3rem;
  display: flex; justify-content: space-between; gap: 0.6rem;
}
.fctl.select::after { content: "▾"; color: var(--muted); }
.fhelp { font-size: 0.79rem; color: var(--muted); margin-top: 0.25rem; line-height: 1.5; }
.fout { display: grid; gap: 0.45rem; margin: 0.7rem 0 0.3rem; }
.fout .orow { display: grid; grid-template-columns: 150px 1fr; gap: 0.7rem; font-size: 0.85rem; }
.fout .orow b { font-weight: 600; }
.fout .orow span { color: var(--ink-2); }
@media (max-width: 560px) { .fout .orow { grid-template-columns: 1fr; gap: 0.1rem; } }

/* flow fork (two outcomes with their in-between steps) */
.branch .brow-flow { display: flex; align-items: stretch; }
.branch .brow-flow .arrow { align-self: center; }

.footer-note { margin-top: 3.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }

/* ---------- Responsive ---------- */
.menu-btn { display: none; }
img, svg { max-width: 100%; }
@media (max-width: 880px) {
  .sidebar { position: fixed; z-index: 80; transform: translateX(-102%); transition: transform 0.2s; box-shadow: 8px 0 30px rgba(0,0,0,0.15); }
  body.nav-open .sidebar { transform: translateX(0); }
  .menu-btn {
    display: inline-grid; place-items: center;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    border-radius: 8px; width: 36px; height: 36px; cursor: pointer; font-size: 1rem;
  }
  .content { padding: 1.3rem 1rem 4rem; }
  .topbar { padding: 0.6rem 1rem; }
  .barlist .brow { grid-template-columns: 135px 1fr 72px; }
  .jstep { grid-template-columns: 52px 1fr; gap: 0 0.8rem; }
  .jstep::before { left: 25px; }
}
@media (max-width: 560px) {
  body { font-size: 15px; }
  h1 { font-size: 1.45rem; }
  h2 { font-size: 1.16rem; }
  .content { padding: 1rem 0.8rem 3.5rem; }
  .grid { gap: 0.7rem; }
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
  .grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .stat .v { font-size: 1.3rem; }
  .card { padding: 0.9rem 1rem; }
  .flow .fnode { min-width: 112px; }
  .barlist .brow { grid-template-columns: 105px 1fr 62px; font-size: 0.8rem; }
  .jstep { grid-template-columns: 44px 1fr; gap: 0 0.65rem; }
  .jstep::before { left: 21px; }
  .jstep .jnum { width: 44px; height: 46px; }
  .jstep .jnum .circ { width: 38px; height: 38px; }
  .jstep .jnum .circ .ico { width: 17px; height: 17px; }
  .panel { width: 96vw; max-height: 92vh; border-radius: 13px; }
  .panel header { padding: 0.9rem 1rem 0.7rem; }
  .panel .pbody { padding: 0.8rem 1rem 1.4rem; }
  .cm-id { grid-template-columns: 1fr; }
  .crumbs { font-size: 0.78rem; }
  .diagram-wrap { padding: 0.5rem; }
}

/* ---------- Accuracy check block ---------- */
.acc {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); padding: 1rem 1.1rem; margin: 1rem 0;
}
.acc-head { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.score {
  display: inline-flex; align-items: baseline; gap: 2px;
  background: var(--good-soft); color: var(--good);
  border: 1px solid rgba(12,163,12,.28); border-radius: 999px;
  padding: 0.3rem 0.85rem; font-weight: 700; font-size: 1.15rem; line-height: 1;
}
.score small { font-size: 0.72rem; font-weight: 600; opacity: 0.8; }
.acc-head b { font-size: 1.02rem; }
.acc ul { margin: 0.7rem 0 0; padding-left: 1.1rem; color: var(--ink-2); }
.acc li { margin: 0.28rem 0; }
.acc li b { color: var(--ink); }

/* ---------- Improvement / defect cards ---------- */
.sugg, .bug {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; background: var(--surface); padding: 0.85rem 1rem; margin: 0.7rem 0;
}
.bug { border-left-color: var(--serious); }
.sugg h4, .bug h4 {
  margin: 0 0 0.3rem; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem;
}
.sugg h4 .ico { color: var(--accent); width: 19px; height: 19px; }
.bug h4 .ico { color: var(--serious); width: 19px; height: 19px; }
.sugg p, .bug p { margin: 0.3rem 0; color: var(--ink-2); }
.sugg p b, .bug p b { color: var(--ink); }
.where {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem; color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; margin-top: 0.35rem;
}
.now-next { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.55rem; }
.now-next > div {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 0.55rem 0.7rem; font-size: 0.92rem;
}
.now-next .lbl {
  display: block; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 0.15rem;
}
@media (max-width: 560px) { .now-next { grid-template-columns: 1fr; } }

/* stat tiles written as <div class="stat"><b>N</b><span>label</span></div> */
.stat:not(.card) {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.stat > b {
  display: block; font-size: 1.6rem; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2;
}
.stat > span {
  display: block; font-size: 0.84rem; color: var(--ink-2);
  margin-top: 0.15rem; font-weight: 600;
}

/* flow nodes written as <div class="fnode"><svg class="ico"/><b>Title</b><span>note</span></div> */
.fnode > .ico {
  display: block; margin: 0 auto 0.4rem;
  width: 26px; height: 26px; color: var(--accent);
}
.fnode > b { display: block; font-weight: 650; font-size: 0.88rem; line-height: 1.35; }
.fnode > span { display: block; font-size: 0.74rem; color: var(--muted); margin-top: 0.15rem; line-height: 1.4; }
.fnode > span.badge { display: inline-block; margin-top: 0.4rem; }
.fnode.good { border-color: rgba(12, 163, 12, 0.4); }
.fnode.critical { border-color: rgba(208, 59, 59, 0.4); }
@media (max-width: 1024px) {
  /* stack the flow so a downward arrow genuinely points at the next card */
  .flow { flex-direction: column; align-items: stretch; gap: 0.4rem; overflow-x: visible; padding: 0.8rem 0; }
  .flow .fnode { flex: 0 0 auto; width: 100%; min-width: 0; }
  .flow .arrow { transform: rotate(90deg); padding: 0; }
  .branch { flex: 0 0 auto; width: 100%; min-width: 0; }
  .branch .brow-flow { flex-direction: column; align-items: stretch; }
  .branch .brow-flow .arrow { align-self: center; }
}

/* severity aliases used across the guide pages */
.callout.critical { border-left-color: var(--critical); background: #fffafa; }
.callout.warning  { border-left-color: #e0a80f; background: #fffdf5; }
.callout.good     { border-left-color: var(--good); background: #fafffa; }

.card.critical { border-left: 3px solid var(--critical); }
.card.serious  { border-left: 3px solid var(--serious); }
.card.warning  { border-left: 3px solid var(--warning); }
.card.good     { border-left: 3px solid var(--good); }
.card[data-detail] { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.card[data-detail]:hover, .card[data-detail]:focus-visible {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(42,120,214,.12);
}
.card h3 { margin: 0 0 0.35rem; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.card h3 .ico { width: 19px; height: 19px; color: var(--accent); }
.card.critical h3 .ico { color: var(--critical); }
.card.serious h3 .ico  { color: var(--serious); }
.card.good h3 .ico     { color: var(--good); }
.card p { font-size: 0.89rem; color: var(--ink-2); margin: 0.3rem 0; }

td.bad  { color: var(--critical); font-weight: 600; }
td.good { color: var(--good); font-weight: 600; }
td[data-detail] { cursor: pointer; }
td[data-detail]:hover { color: var(--accent); }

.jbody[data-detail] { cursor: pointer; }
.diagram-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0.8rem; margin: 1rem 0; }
.diagram-wrap svg { display: block; min-width: 640px; width: 100%; height: auto; }

/* ---------- Catalogue pages: dense reference tables ---------- */
.cat { margin: 1.2rem 0 2rem; }
.cat h3 {
  margin: 1.6rem 0 0.4rem; font-size: 1rem;
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
.cat h3 .where { margin: 0; font-weight: 400; }
.cat table { font-size: 0.84rem; }
.cat table td, .cat table th { padding: 0.42rem 0.7rem; vertical-align: top; }
.cat table td:first-child { white-space: nowrap; font-weight: 600; }
.cat table td.wrap:first-child { white-space: normal; }

/* code/value chips inside catalogue tables */
.kv { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8em; color: var(--ink-2); }
.dead { color: var(--muted); font-style: italic; }
.dead::after { content: " (not in use)"; font-size: 0.85em; }

/* a compact two-column definition strip */
.defs { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 0.35rem 1rem; margin: 0.6rem 0 1rem; font-size: 0.9rem; }
.defs dt { font-weight: 600; }
.defs dd { margin: 0; color: var(--ink-2); }
@media (max-width: 560px) { .defs { grid-template-columns: 1fr; gap: 0.1rem 0; } .defs dd { margin-bottom: 0.5rem; } }

/* jump links at the top of a long catalogue */
.jump { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 1.6rem; }
.jump a {
  font-size: 0.82rem; padding: 0.3rem 0.7rem;
  border: 1px solid var(--line); border-radius: 99px;
  background: var(--surface-2); color: var(--ink-2);
}
.jump a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ---------- Feature list: visual feature cards ---------- */
.feat {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 0.85rem 1rem 0.9rem; margin: 0.7rem 0;
  box-shadow: 0 1px 2px rgba(36,41,47,.04);
}
.feat-h { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.feat-h .ico { width: 20px; height: 20px; color: var(--accent); }
.feat-h b { font-size: 0.98rem; }
.feat-h .go {
  margin-left: auto; font-size: 0.78rem; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 99px; padding: 0.1rem 0.6rem;
  background: var(--surface-2); color: var(--accent);
}
.feat-h .go:hover { border-color: var(--accent); text-decoration: none; }
.feat-h .dup {
  font-size: 0.72rem; font-weight: 600; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 99px; padding: 0.05rem 0.55rem;
}
.feat > p { font-size: 0.89rem; color: var(--ink-2); margin: 0.15rem 0 0.55rem; }

/* the visual flow strip */
.fstrip {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 0.3rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 0.5rem 0.6rem;
}
.fa {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.79rem; font-weight: 600; line-height: 1.25;
  border-radius: 7px; padding: 0.3rem 0.55rem;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
}
.fa .ico { width: 15px; height: 15px; }
.fa small { font-weight: 500; color: var(--ink-2); font-size: 0.92em; }
.fx { display: inline-flex; align-items: center; color: var(--muted); font-size: 0.95rem; padding: 0 0.05rem; }

/* actor colours */
.fa.home   { background:#eaf2fc; border-color:#bcd8f5; }  .fa.home   .ico { color:#2a78d6; }
.fa.office { background:#efeafc; border-color:#d3c8f2; }  .fa.office .ico { color:#6f4bd8; }
.fa.worker { background:#ecf8ec; border-color:#bfe6bf; }  .fa.worker .ico { color:#0ca30c; }
.fa.system { background:#f1f3f5; border-color:#dde1e6; }  .fa.system .ico { color:#57606a; }
.fa.money  { background:#fdf3dc; border-color:#ecd9a5; }  .fa.money  .ico { color:#b47d00; }
.fa.out    { background:#e9f7f3; border-color:#b6e3d6; }  .fa.out    .ico { color:#0a8f74; }
.fa.bad    { background:#fbecec; border-color:#f2c2c2; color:#a33; } .fa.bad .ico { color:var(--critical); }

.legend { display:flex; flex-wrap:wrap; gap:0.4rem; margin:0.8rem 0 1.4rem; }
.feat-count { font-size:0.8rem; color:var(--muted); font-weight:600; margin-left:0.3rem; }
@media (max-width: 560px) {
  .feat-h .go { margin-left: 0; }
  .fstrip { gap: 0.25rem; }
  .fa { font-size: 0.75rem; }
}

/* ---------- Responsive corrections ---------- */

/* bar rows: label and value on one line, bar full width beneath */
@media (max-width: 620px) {
  .barlist .brow {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label val" "track track";
    gap: 0.25rem 0.7rem;
  }
  .barlist .blabel { grid-area: label; flex-wrap: wrap; }
  .barlist .bval   { grid-area: val; }
  .barlist .btrack { grid-area: track; }
}

/* feature strips: stack, and only rotate real arrows */
@media (max-width: 620px) {
  .fstrip { flex-direction: column; align-items: stretch; gap: 0.3rem; }
  .fstrip .fa { justify-content: flex-start; }
  .fstrip .fx { justify-content: center; padding: 0.05rem 0; }
  .fstrip .fx:not(.alt) { transform: rotate(90deg); }
}

/* journey steps: tighter gutter on small screens */
@media (max-width: 560px) {
  .jstep { grid-template-columns: 40px 1fr; gap: 0 0.7rem; }
  .jnum, .jstep .jnum { font-size: 0.9rem; }
  .feat-h { gap: 0.4rem; }
  .feat-h b { font-size: 0.93rem; }
  .legend .fa { font-size: 0.74rem; }
  .jump a { font-size: 0.78rem; padding: 0.25rem 0.6rem; }
  .cat table td:first-child { white-space: normal; }
}

/* never let a page scroll sideways */
html, body { max-width: 100%; overflow-x: hidden; }
.content { overflow-wrap: break-word; }
.fstrip, .flow, .legend { max-width: 100%; }

/* A-Z feature index */
.azlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.15rem 1rem; margin-bottom: 0.9rem; }
.azlist a { font-size: 0.88rem; padding: 0.12rem 0; color: var(--ink-2); }
.azlist a:hover { color: var(--accent); }
.cat h3 + .azlist { margin-top: 0.2rem; }
@media (max-width: 560px) { .azlist { grid-template-columns: 1fr; } }

/* wide tables: keep columns readable and scroll rather than squash */
.tbl-wrap { position: relative; }
@media (max-width: 700px) {
  .tbl-wrap table { min-width: 540px; }
  .tbl-wrap th, .tbl-wrap td { padding: 0.45rem 0.7rem; font-size: 0.83rem; }
  /* a soft edge so it is obvious the table scrolls */
  .tbl-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 22px;
    pointer-events: none; border-radius: 0 var(--radius) var(--radius) 0;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.92));
  }
}

/* diagrams scroll inside their own frame, never the page */
.diagram-wrap { position: relative; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) {
  .diagram-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 22px;
    pointer-events: none; border-radius: 0 var(--radius) var(--radius) 0;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.92));
  }
}

/* the modal must fit a phone */
@media (max-width: 620px) {
  .panel { width: 96vw; max-height: 90vh; }
  .panel header { padding: 0.8rem 0.9rem; }
  .panel .pbody { padding: 0.9rem; }
  .fform, .fout { font-size: 0.9rem; }
}

/* ---------- Wide screens: use the space, keep prose readable ---------- */
/* Long-form text gets a comfortable measure; everything structural fills the width. */
.content > p,
.lead,
.callout p,
.jbody > p,
.feat > p,
.acc li,
.sugg p,
.bug p,
.cat > p {
  max-width: 92ch;
}

/* diagrams should not balloon on a very wide screen */
.diagram-wrap svg { max-width: 980px; margin-inline: auto; }

/* journey cards fill the width; their text keeps a readable measure */
.jbody .jtext, .jbody > p { max-width: 110ch; }

/* on a wide screen, show more cards per row */
@media (min-width: 1500px) {
  .grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
  .azlist { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .content { padding-inline: 3.2rem; }
}

/* breathing room around scroll-wrapped tables */
.tbl-wrap { margin: 1rem 0 1.4rem; }
.grid + .tbl-wrap, .fstrip + .tbl-wrap { margin-top: 1.2rem; }

/* ================= Two-pane app shell =================
   Desktop: the page itself never scrolls. The sidebar and the content
   each own their own scrollbar. On mobile the sidebar is a drawer, so
   normal page scrolling is kept there. */
@media (min-width: 881px) {
  html, body { height: 100%; overflow: hidden; }

  .layout { height: 100vh; overflow: hidden; align-items: stretch; }

  .sidebar {
    position: relative;      /* no longer sticky: it is its own pane */
    top: auto;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .main {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
  }

  /* the top bar stays pinned to the top of the content pane */
  .topbar { position: sticky; top: 0; }

  /* anchor jumps must clear the pinned top bar */
  .content h2[id], .content [id] { scroll-margin-top: 76px; }

  /* slim, unobtrusive scrollbars on both panes */
  .sidebar::-webkit-scrollbar, .main::-webkit-scrollbar { width: 10px; }
  .sidebar::-webkit-scrollbar-thumb, .main::-webkit-scrollbar-thumb {
    background: #d7dde4; border-radius: 99px;
    border: 3px solid transparent; background-clip: content-box;
  }
  .sidebar::-webkit-scrollbar-thumb:hover, .main::-webkit-scrollbar-thumb:hover { background: #b9c2cc; background-clip: content-box; }
  .sidebar::-webkit-scrollbar-track, .main::-webkit-scrollbar-track { background: transparent; }
  .sidebar, .main { scrollbar-width: thin; scrollbar-color: #d7dde4 transparent; }
}

/* mobile keeps ordinary page scrolling, with the drawer over the top */
@media (max-width: 880px) {
  html, body { height: auto; overflow-x: hidden; overflow-y: auto; }
  .layout { height: auto; min-height: 100vh; overflow: visible; }
  .main { height: auto; overflow: visible; }
  .content h2[id], .content [id] { scroll-margin-top: 64px; }
}

/* when a pop-up is open, neither pane should scroll behind it */
body.panel-open .main,
body.panel-open .sidebar { overflow: hidden; }
@media (max-width: 880px) {
  body.panel-open { overflow: hidden; }
  body.panel-open .main { overflow: visible; }
}

/* lock link at the foot of the navigation */
.nav-lock { margin-top: 0.4rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.nav-lock a { color: var(--muted); font-size: 0.84rem; justify-content: flex-start; gap: 0.45rem; }
.nav-lock a .ico { width: 15px; height: 15px; }
.nav-lock a:hover { color: var(--critical); background: var(--critical-soft); }