/* Shared layout for the in-app user manual pages (Administrator / Project
   Manager & Collaborator editions). Loaded only by views/help/manual-*.php —
   kept out of app.css since no other page needs it. Same pattern as
   assets/css/legal.css for the Privacy/Terms pages. */

:root{
  --bg:#f5f7fb; --surface:#ffffff; --surface-2:#eef1f8;
  --ink:#16202e; --ink-muted:#5b6b82; --border:#e2e6ee;
  --accent:#0d6efd; --accent-ink:#ffffff; --accent-soft:#e8f1ff;
  --success:#198754; --success-soft:#e7f6ee;
  --warning:#b45309; --warning-soft:#fff4e0;
  --danger:#dc3545; --danger-soft:#fdecee;
  --pm:#7c3aed; --pm-soft:#f1e9fe;
  --collab:#0f766e; --collab-soft:#e3f5f2;
  --radius:14px;
  --ink-night:#07111f; --ink-night-2:#0c1a2e; --ink-night-line:rgba(255,255,255,.09); --ink-night-muted:#9fb0c3;
  --new:#c2760a; --new-soft:#fdf3e3;
  /* Same type as powermaps.app: Plus Jakarta Sans for text, JetBrains Mono
     for labels and values. Loaded by the manual pages themselves. */
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.manual-page{
  background: var(--bg); color: var(--ink); font-family: var(--sans);
  line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased;
}
.manual-page a{color:var(--accent)}
.manual-page img,.manual-page svg{max-width:100%}

.manual-page .shell{display:flex; max-width:1240px; margin:0 auto;}

.manual-page .toc{
  width:270px; flex:0 0 270px; position:sticky; top:0; align-self:flex-start;
  height:100vh; overflow-y:auto; padding:28px 18px 40px 24px; border-right:1px solid var(--border);
}
.manual-page .toc-brand{display:flex; align-items:center; gap:10px; margin-bottom:22px; padding-right:6px;}
.manual-page .toc-brand .mark{
  width:34px; height:34px; border-radius:9px; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex:none;
}
.manual-page .toc-brand .name{font-weight:700; font-size:15px; letter-spacing:-0.01em;}
.manual-page .toc-brand .sub{font-size:11.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em;}
.manual-page .toc nav{font-size:13.6px;}
.manual-page .toc .grp{margin:18px 0 6px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); font-weight:700;}
.manual-page .toc a{
  display:block; padding:6px 10px; margin:1px 0; border-radius:8px; color:var(--ink-muted);
  text-decoration:none; border-left:2px solid transparent;
}
.manual-page .toc a:hover{background:var(--surface-2); color:var(--ink);}
.manual-page .toc a.active{color:var(--accent); background:var(--accent-soft); border-left-color:var(--accent); font-weight:600;}
.manual-page .toc-role{
  margin-top:20px; padding:12px 12px; border-radius:10px; background:var(--accent-soft);
  font-size:12px; color:var(--accent); font-weight:700; text-align:center; letter-spacing:.02em; line-height:1.5;
}
.manual-page .toc-legend{display:flex; gap:8px; margin-top:10px; font-size:10.5px;}
.manual-page .toc-legend span{display:flex; align-items:center; gap:4px;}
.manual-page .toc-legend i{width:8px;height:8px;border-radius:50%;display:inline-block;}

.manual-page main{flex:1; min-width:0; padding:56px 56px 120px; max-width:820px;}
.manual-page .kicker{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--accent);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px;
}
.manual-page h1.title{font-size:2.6rem; font-weight:800; line-height:1.1; letter-spacing:-0.03em; margin:0 0 14px; text-wrap:balance;}
.manual-page section > h2{font-weight:750;}
.manual-page h3{font-weight:700;}
.manual-page .lede{font-size:1.15rem; color:var(--ink-muted); max-width:60ch; margin:0 0 6px;}
.manual-page .domain-strip{display:flex; gap:10px; flex-wrap:wrap; margin:28px 0 4px;}
.manual-page .domain-chip{
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:10px 14px; font-family:var(--mono); font-size:13px;
}
.manual-page .domain-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--success);}
.manual-page .domain-chip b{font-family:var(--sans); font-weight:600; font-size:12px; color:var(--ink-muted);}

.manual-page section{margin-top:64px; padding-top:8px;}
.manual-page section > h2{font-size:1.7rem; letter-spacing:-0.01em; margin:0 0 8px; scroll-margin-top:24px; display:flex; align-items:center; gap:10px;}
.manual-page section > h2 .num{
  font-family:var(--mono); font-size:.62em; color:var(--accent); background:var(--accent-soft);
  padding:3px 8px; border-radius:6px; font-weight:700;
}
.manual-page section > .desc{color:var(--ink-muted); max-width:65ch; margin-bottom:26px;}
.manual-page h3{font-size:1.18rem; margin:30px 0 10px; letter-spacing:-0.005em;}
.manual-page p{max-width:68ch}
.manual-page ul,.manual-page ol{max-width:66ch; padding-left:1.3em;}
.manual-page li{margin:6px 0;}

.manual-page .role-badge{
  display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:2px 9px; border-radius:999px; margin-left:6px; vertical-align:middle;
}
.manual-page .role-badge.pm{background:var(--pm-soft); color:var(--pm);}
.manual-page .role-badge.collab{background:var(--collab-soft); color:var(--collab);}
.manual-page .role-badge.both{background:var(--accent-soft); color:var(--accent);}
.manual-page .role-badge.admin{background:var(--accent-soft); color:var(--accent);}

.manual-page code, .manual-page .code-inline{
  font-family:var(--mono); font-size:.88em; background:var(--surface-2); border:1px solid var(--border);
  padding:1px 6px; border-radius:5px;
}

.manual-page .steps{list-style:none; padding:0; margin:18px 0 28px; counter-reset:step;}
.manual-page .steps li{counter-increment:step; position:relative; padding:2px 0 2px 40px; margin:14px 0; max-width:66ch;}
.manual-page .steps li::before{
  content:counter(step); position:absolute; left:0; top:-1px; width:26px; height:26px; border-radius:8px;
  background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.manual-page .steps b{font-weight:650}

.manual-page .callout{border-radius:12px; padding:16px 18px; margin:22px 0; border:1px solid var(--border); background:var(--surface); max-width:68ch;}
.manual-page .callout.tip{border-color:var(--success); background:var(--success-soft);}
.manual-page .callout.warn{border-color:var(--warning); background:var(--warning-soft);}
.manual-page .callout.pm{border-color:var(--pm); background:var(--pm-soft);}
.manual-page .callout.collab{border-color:var(--collab); background:var(--collab-soft);}
.manual-page .callout.admin{border-color:var(--accent); background:var(--accent-soft);}
.manual-page .callout .lbl{font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; display:block;}
.manual-page .callout.tip .lbl{color:var(--success)}
.manual-page .callout.warn .lbl{color:var(--warning)}
.manual-page .callout.pm .lbl{color:var(--pm)}
.manual-page .callout.collab .lbl{color:var(--collab)}
.manual-page .callout.admin .lbl{color:var(--accent)}

.manual-page table{width:100%; border-collapse:collapse; margin:20px 0 30px; font-size:14.5px; max-width:70ch;}
.manual-page th,.manual-page td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--border);}
.manual-page th{color:var(--ink-muted); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;}
.manual-page tr:last-child td{border-bottom:none}

.manual-page figure{margin:26px 0 30px;}
.manual-page figcaption{font-size:12.5px; color:var(--ink-muted); margin-top:9px; text-align:center;}

.manual-page .browser-mock{
  border-radius:12px; overflow:hidden; border:1px solid var(--border); background:var(--surface);
  box-shadow:0 1px 3px rgba(16,24,40,.06), 0 8px 24px -12px rgba(16,24,40,.18); max-width:640px;
}
.manual-page .browser-bar{display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--surface-2); border-bottom:1px solid var(--border);}
.manual-page .browser-bar .dots{display:flex; gap:5px;}
.manual-page .browser-bar .dots span{width:9px;height:9px;border-radius:50%; background:var(--border);}
.manual-page .browser-bar .url{
  flex:1; font-family:var(--mono); font-size:11px; color:var(--ink-muted); background:var(--surface);
  border:1px solid var(--border); border-radius:6px; padding:4px 10px; text-align:center; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.manual-page .app-frame{display:flex; min-height:230px;}
.manual-page .app-side{width:120px; flex:none; background:var(--accent); color:var(--accent-ink); padding:14px 10px; display:flex; flex-direction:column; gap:5px; font-size:10.5px;}
.manual-page .app-side .b{font-weight:800; font-size:12px; margin-bottom:10px; opacity:.95}
.manual-page .app-side .item{padding:6px 8px; border-radius:6px; opacity:.72}
.manual-page .app-side .item.on{background:rgba(255,255,255,.18); opacity:1; font-weight:600;}
.manual-page .app-main{flex:1; padding:16px 18px; background:var(--surface);}
.manual-page .app-main h4{margin:0 0 12px; font-size:14px;}
.manual-page .stat-row{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.manual-page .stat{flex:1; min-width:76px; background:var(--surface-2); border-radius:8px; padding:8px 10px;}
.manual-page .stat b{display:block; font-size:16px;}
.manual-page .stat span{font-size:10px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.03em;}
.manual-page .mock-row{display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:7px; font-size:11.5px; background:var(--surface-2); margin-bottom:6px;}
.manual-page .mock-row .chip{font-size:9.5px; padding:1px 6px; border-radius:999px; font-weight:700; margin-left:auto;}
.manual-page .chip.green{background:var(--success-soft); color:var(--success)}
.manual-page .chip.amber{background:var(--warning-soft); color:var(--warning)}
.manual-page .chip.blue{background:var(--accent-soft); color:var(--accent)}
.manual-page .chip.gray{background:var(--border); color:var(--ink-muted)}
.manual-page .chip.purple{background:var(--pm-soft); color:var(--pm)}
.manual-page .chip.teal{background:var(--collab-soft); color:var(--collab)}
.manual-page .form-mock label{display:block; font-size:10.5px; color:var(--ink-muted); margin:9px 0 3px;}
.manual-page .form-mock .field{height:26px; border-radius:6px; background:var(--surface-2); border:1px solid var(--border);}
.manual-page .form-mock .btn{
  margin-top:12px; height:28px; width:110px; border-radius:6px; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
}
.manual-page .map-mock{
  height:150px; border-radius:8px; background:
    linear-gradient(var(--surface-2) 1px, transparent 1px) 0 0/16px 16px,
    linear-gradient(90deg, var(--surface-2) 1px, transparent 1px) 0 0/16px 16px,
    var(--surface);
  border:1px solid var(--border); position:relative; overflow:hidden;
}
.manual-page .map-mock .pin{position:absolute; width:10px; height:10px; border-radius:50% 50% 50% 0; background:var(--danger); transform:rotate(-45deg);}

.manual-page .phone-mock{
  width:230px; border-radius:34px; border:8px solid var(--ink); background:var(--ink); overflow:hidden;
  box-shadow:0 20px 40px -18px rgba(16,24,40,.4); margin:0 auto;
}
.manual-page .phone-screen{background:var(--surface); border-radius:26px; overflow:hidden; min-height:420px; display:flex; flex-direction:column;}
.manual-page .phone-notch{height:22px; background:var(--surface); display:flex; align-items:center; justify-content:center;}
.manual-page .phone-notch .pill{width:56px; height:6px; border-radius:4px; background:var(--border);}
.manual-page .phone-topbar{background:var(--accent); color:var(--accent-ink); padding:12px 14px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px;}
.manual-page .phone-body{flex:1; padding:14px; font-size:11.5px;}
.manual-page .phone-tabs{display:flex; border-top:1px solid var(--border); padding:8px 0; background:var(--surface);}
.manual-page .phone-tabs .tab{flex:1; text-align:center; font-size:9.5px; color:var(--ink-muted);}
.manual-page .phone-tabs .tab.on{color:var(--accent); font-weight:700;}
.manual-page .phone-tabs .dotwrap{height:18px; display:flex; align-items:center; justify-content:center;}
.manual-page .phone-tabs .dotwrap .d{width:16px;height:16px;border-radius:50%;background:var(--surface-2);}
.manual-page .phone-tabs .tab.on .dotwrap .d{background:var(--accent-soft); border:2px solid var(--accent);}

.manual-page .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;}
@media (max-width:820px){ .manual-page .grid-2{grid-template-columns:1fr} }

.manual-page .toc-toggle{display:none;}
.manual-page footer.doc{margin-top:90px; padding-top:26px; border-top:1px solid var(--border); color:var(--ink-muted); font-size:13px;}

@media (max-width:980px){
  .manual-page .toc{position:fixed; left:0; top:0; bottom:0; z-index:40; background:var(--bg); transform:translateX(-100%); transition:transform .2s ease; box-shadow:20px 0 40px rgba(0,0,0,.15);}
  .manual-page .toc.open{transform:translateX(0);}
  .manual-page .toc-toggle{
    display:flex; position:fixed; top:16px; left:16px; z-index:41; width:42px; height:42px; border-radius:10px;
    background:var(--surface); border:1px solid var(--border); align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 4px 14px rgba(16,24,40,.12);
  }
  .manual-page main{padding:80px 22px 100px;}
  .manual-page h1.title{font-size:2rem;}
}

/* Top bar linking back into the app (matches elements/topnav.php's brand blue) */
.manual-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 24px; border-bottom:1px solid #e2e6ee; background:#fff;
  position:sticky; top:0; z-index:30;
}
.manual-topbar .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#16202e; font-weight:700;}
.manual-topbar .brand img{height:30px; width:auto;}
.manual-topbar .actions{display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:6px 16px;}
.manual-topbar .actions a{font-size:14px; text-decoration:none; color:#5b6b82;}
.manual-topbar .actions a:hover{color:#16202e;}
.manual-topbar .actions a.primary{color:#fff; background:#0d6efd; font-weight:600; padding:7px 14px; border-radius:9px;}
.manual-topbar .actions a.primary:hover{background:#0b5ed7; color:#fff;}

/* Reading progress: a hairline along the top bar's bottom edge. */
.manual-progress{position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); transform-origin:0 50%; transform:scaleX(0);}

/* The sticky top bar would otherwise sit over section headings. */
.manual-page section > h2, .manual-page h3[id]{scroll-margin-top:84px;}
.manual-page .toc{top:61px; height:calc(100vh - 61px);}

/* ── Table of contents: search, "new" markers ───────────────────────── */
.manual-page .toc-search{position:relative; margin:18px 0 4px;}
.manual-page .toc-search input{
  width:100%; border:1px solid var(--border); background:var(--surface); border-radius:10px;
  padding:8px 10px 8px 32px; font:inherit; font-size:13px; color:var(--ink);
}
.manual-page .toc-search input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.manual-page .toc-search svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--ink-muted);}
.manual-page .toc-empty{font-size:12.5px; color:var(--ink-muted); padding:8px 10px;}
.manual-page .toc a .tnew{
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--new); background:var(--new-soft); border-radius:999px; padding:1px 6px; margin-left:6px; vertical-align:1px;
}
.manual-page .toc a.hidden-by-search, .manual-page .toc .grp.hidden-by-search{display:none;}

/* "New" badge used in headings and tables. */
.manual-page .new-badge{
  display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--new); background:var(--new-soft); border:1px solid rgba(194,118,10,.25);
  padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:middle;
}

/* An on-screen label — a button or tab name the reader should look for. */
.manual-page .ui{
  display:inline-block; font-size:.86em; font-weight:650; line-height:1.35; white-space:nowrap;
  background:var(--surface); border:1px solid var(--border); border-bottom-width:2px;
  padding:0 7px; border-radius:6px; color:var(--ink);
}

/* Section anchor that appears on hover, for sharing a link to a section. */
.manual-page section > h2 .anchor{
  margin-left:auto; font-size:.8em; color:var(--border); text-decoration:none; opacity:0; transition:opacity .15s ease;
}
.manual-page section > h2:hover .anchor, .manual-page section > h2 .anchor:focus{opacity:1; color:var(--ink-muted);}

/* ── What's new ─────────────────────────────────────────────────────── */
.manual-page .whatsnew{
  margin:34px 0 0; border:1px solid var(--border); border-radius:18px; background:var(--surface);
  padding:22px 22px 18px; box-shadow:0 1px 3px rgba(16,24,40,.05);
}
.manual-page .whatsnew-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
.manual-page .whatsnew-head b{font-size:15px;}
.manual-page .whatsnew-head span{font-family:var(--mono); font-size:11.5px; color:var(--ink-muted);}
.manual-page .whatsnew-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;}
.manual-page .wn{
  display:flex; gap:12px; align-items:flex-start; text-decoration:none; color:var(--ink);
  border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--bg);
  transition:border-color .15s ease, transform .2s ease, background-color .15s ease;
}
.manual-page .wn:hover{border-color:var(--accent); background:var(--surface); transform:translateY(-1px);}
.manual-page .wn .ic{
  width:34px; height:34px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent);
}
.manual-page .wn b{display:block; font-size:14px; line-height:1.3;}
.manual-page .wn small{display:block; font-size:12.5px; color:var(--ink-muted); line-height:1.45; margin-top:2px;}
@media (max-width:640px){ .manual-page .whatsnew-grid{grid-template-columns:1fr;} }

/* ── Video card (the field guide) ───────────────────────────────────── */
.manual-page .video-card{
  margin:26px 0 30px; background:var(--ink-night); color:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 20px 50px -24px rgba(7,17,31,.6); max-width:100%;
}
.manual-page .video-card video{display:block; width:100%; aspect-ratio:16/9; background:#000;}
.manual-page .video-meta{padding:16px 18px 18px;}
.manual-page .video-meta .vt{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 14px; margin-bottom:12px;}
.manual-page .video-meta .vt b{font-size:15px;}
.manual-page .video-meta .vt span{font-family:var(--mono); font-size:11.5px; color:var(--ink-night-muted);}
.manual-page .chapters{display:flex; flex-wrap:wrap; gap:6px;}
.manual-page .chapters button{
  display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  color:#c9d5e2; background:var(--ink-night-2); border:1px solid var(--ink-night-line); border-radius:999px; padding:5px 11px;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.manual-page .chapters button span{font-family:var(--mono); font-size:10.5px; color:var(--ink-night-muted); font-weight:500;}
.manual-page .chapters button:hover{color:#fff; border-color:rgba(255,255,255,.25);}
.manual-page .chapters button.on{background:var(--accent); border-color:var(--accent); color:#fff;}
.manual-page .chapters button.on span{color:rgba(255,255,255,.8);}
.manual-page .chapters button:focus-visible{outline:2px solid #4d94ff; outline-offset:2px;}
.manual-page .video-meta .vlinks{margin-top:12px; font-size:12.5px; color:var(--ink-night-muted);}
.manual-page .video-meta .vlinks a{color:#4d94ff; font-weight:600;}

/* ── Extra mock pieces: shape capture, network map ─────────────────── */
.manual-page .chip-row{display:flex; flex-wrap:wrap; gap:5px; margin:4px 0 10px;}
.manual-page .chip-row span{font-size:9.5px; font-weight:700; padding:4px 8px; border-radius:7px; border:1px solid var(--border); color:var(--ink-muted); background:var(--surface);}
.manual-page .chip-row span.sel{background:var(--accent-soft); border-color:var(--accent); color:var(--accent);}
.manual-page .mock-card{background:var(--surface-2); border-radius:10px; padding:10px; margin-bottom:8px;}
.manual-page .mock-card b{display:block; font-size:11px;}
.manual-page .mock-card small{display:block; font-size:9.5px; color:var(--ink-muted);}
.manual-page .mock-btn{display:flex; align-items:center; justify-content:center; height:26px; border-radius:7px; font-size:10px; font-weight:700; margin-top:6px;}
.manual-page .mock-btn.fill{background:var(--accent); color:#fff;}
.manual-page .mock-btn.ok{background:var(--success); color:#fff;}
.manual-page .mock-btn.line{border:1.5px solid var(--accent); color:var(--accent); background:var(--surface);}
.manual-page .mock-btn.stop{border:1.5px solid var(--danger); color:var(--danger); background:var(--danger-soft);}
.manual-page .rtk-chip{margin-left:auto; font-family:var(--mono); font-size:9px; background:rgba(255,255,255,.2); border-radius:999px; padding:2px 7px;}
.manual-page .tool-row{display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-bottom:10px;}
.manual-page .tool-row b{font-size:12px; margin-right:6px;}
.manual-page .tool-row span{font-size:10px; font-weight:600; border:1px solid var(--border); border-radius:6px; padding:2px 7px; background:var(--surface);}
.manual-page .tool-row span.on{background:var(--ink); border-color:var(--ink); color:#fff;}
.manual-page .net-mock{position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--border); background:#e3f0e9;}
.manual-page .net-mock svg{display:block; width:100%; height:auto;}
.manual-page .net-mock .result{
  position:absolute; top:8px; right:8px; width:44%; background:#fff; border-radius:8px; padding:8px 10px;
  font-size:10px; line-height:1.45; box-shadow:0 6px 18px rgba(16,24,40,.15);
}
.manual-page .net-mock .result b{font-size:10.5px;}

/* Key/value reference list (settings, stored fields). */
.manual-page dl.kv{display:grid; grid-template-columns:minmax(150px, 34%) 1fr; gap:0; margin:18px 0 28px; max-width:70ch; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface);}
.manual-page dl.kv dt, .manual-page dl.kv dd{margin:0; padding:10px 14px; border-bottom:1px solid var(--border); font-size:14.5px;}
.manual-page dl.kv dt{font-weight:650; background:var(--surface-2);}
.manual-page dl.kv dt:nth-last-of-type(1), .manual-page dl.kv dd:last-of-type{border-bottom:none;}
@media (max-width:640px){ .manual-page dl.kv{grid-template-columns:1fr;} .manual-page dl.kv dt{border-bottom:none; padding-bottom:2px;} }

/* Back to top */
.manual-top-btn{
  position:fixed; right:22px; bottom:84px; z-index:35; width:42px; height:42px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(16,24,40,.12);
  opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease;
}
.manual-top-btn.show{opacity:1; pointer-events:auto; transform:none;}
.manual-top-btn:hover{border-color:var(--accent); color:var(--accent);}

/* Small screens: tables scroll sideways instead of squeezing; the TOC
   button clears the brand in the top bar. */
@media (max-width:980px){
  .manual-page .toc{top:0; height:100vh; z-index:45;}
  .manual-page .toc-toggle{top:12px; z-index:46;}
  .manual-topbar{padding-left:70px;}
  .manual-page table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}
}
@media (max-width:560px){
  .manual-topbar .brand span{display:none;}
  .manual-topbar .actions a:not(.primary){display:none;}
}

@media (prefers-reduced-motion: reduce){
  .manual-page *, .manual-top-btn{transition:none !important;}
}

/* Print: the manual as a document, without navigation chrome. */
@media print{
  .manual-topbar, .manual-page .toc, .manual-page .toc-toggle, .manual-top-btn, .manual-page .video-card video{display:none !important;}
  .manual-page{background:#fff;}
  .manual-page main{padding:0; max-width:none;}
  .manual-page section{break-inside:avoid-page; margin-top:32px;}
  .manual-page figure, .manual-page .callout, .manual-page table{break-inside:avoid;}
  .manual-page .video-card{background:#fff; color:var(--ink); box-shadow:none; border:1px solid var(--border);}
  .manual-page a{color:var(--ink);}
}