/* ============================================================
   BA/HUB — LAYOUT & COMPONENT STYLES
   Base reset, sidebar, topbar, dashboard, topic pages,
   search modal, glossary, responsive and print rules.
   Depends on the variables defined in theme.css.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;margin:0;}
a{color:var(--signal);text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--flag-soft);color:var(--ink);}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}

/* --- Native form controls ---
   A <select>'s dropdown list is painted by the browser, not the page,
   so it needs two things. `color-scheme` in theme.css tells the browser
   which scheme to paint it in — that alone fixes Safari and macOS
   Chrome. Firefox and Chrome on Windows also honour explicit option
   colours, so they are set here too. Without either, an option inherits
   the page's near-white --ink onto a light popup and disappears.
   Controls that deliberately sit transparent (table cells, the glossary
   search) set their own background inline or at higher specificity, so
   they are unaffected by the colour rules below. */
select,input,textarea{font-family:inherit;color:var(--ink);}
select option,select optgroup{background-color:var(--surface);color:var(--ink);}
input::placeholder,textarea::placeholder{color:var(--steel-soft);opacity:1;}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid var(--paper);}

/* ============================================================
   REFERENCE TAG (signature element)
   ============================================================ */
.tag{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.03em;
  padding:2px 7px;
  border-radius:3px;
  background:var(--signal-soft);
  color:var(--signal);
  white-space:nowrap;
  display:inline-block;
  line-height:1.6;
}
.tag--flag{background:var(--flag-soft);color:var(--flag);}

/* ============================================================
   LAYOUT
   ============================================================ */
.app{display:flex;min-height:100vh;}

/* --- Sidebar --- */
.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--surface);
  border-right:1px solid var(--line);
  height:100vh;
  position:sticky;
  top:0;
  display:flex;
  flex-direction:column;
  z-index:40;
  transition:transform .2s ease;
}
.sidebar__brand{
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 18px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.sidebar__brand-mark{
  width:28px;height:28px;border-radius:6px;
  background:var(--ink);
  color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:600;font-size:11px;
  flex-shrink:0;
}
html[data-theme="dark"] .sidebar__brand-mark{background:var(--signal);color:#0B0E14;}
.sidebar__brand-text{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.01em;}

.sidebar__scroll{flex:1;overflow-y:auto;padding:10px 10px 24px;}
/* --- Left icon/code column ---
   The home icon and every group code share one fixed-width column
   (--nav-gutter) with the same gap after it, so the house glyph is
   centred over the FND / STK / ... codes and every label in the tree —
   Dashboard, the group titles, the topic names — starts on the same
   x-position. Fixed rather than intrinsic because the code width is
   whatever three mono characters happen to measure, which moves with
   the font that actually loads. */
.sidebar{--nav-gutter:22px;}
.nav-home{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;margin-bottom:6px;border-radius:var(--radius-s);
  font-weight:600;font-size:13.5px;color:var(--ink);
}
.nav-home.active,.nav-home:hover{background:var(--signal-soft);color:var(--signal);}
.nav-home__icon{
  width:var(--nav-gutter);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.nav-home svg{flex-shrink:0;display:block;}

.nav-group{margin-bottom:2px;}
.nav-group__head{
  width:100%;display:flex;align-items:center;gap:8px;
  background:none;border:none;padding:9px 10px;
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--steel-soft);border-radius:var(--radius-s);
}
.nav-group__head:hover{color:var(--ink);background:var(--line-soft);}
.nav-group__chevron{margin-left:auto;transition:transform .15s ease;flex-shrink:0;color:var(--steel-soft);}
.nav-group__chevron.open{transform:rotate(90deg);}
.nav-group__code{font-family:var(--font-mono);font-size:10px;color:var(--steel-soft);width:var(--nav-gutter);flex-shrink:0;}
.nav-group__items{overflow:hidden;max-height:0;transition:max-height .18s ease;}
.nav-group__items.open{max-height:900px;}
.nav-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px 7px 20px;margin:1px 4px;border-radius:var(--radius-s);
  font-size:13.5px;color:var(--ink);border-left:2px solid transparent;
}
.nav-item:hover{background:var(--line-soft);}
.nav-item.active{background:var(--signal-soft);color:var(--signal);border-left-color:var(--signal);font-weight:600;}
.nav-item__label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-item__code{font-family:var(--font-mono);font-size:9.5px;color:var(--steel-soft);flex-shrink:0;}
.nav-item.active .nav-item__code{color:var(--signal);}

.sidebar__foot{
  border-top:1px solid var(--line);padding:12px 16px;
  font-size:11px;color:var(--steel-soft);flex-shrink:0;
}

/* --- Main column --- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}

.topbar{
  height:var(--topbar-h);flex-shrink:0;
  display:flex;align-items:center;gap:14px;
  padding:0 20px;border-bottom:1px solid var(--line);
  background:var(--paper);position:sticky;top:0;z-index:30;
}
.topbar__hamburger{display:flex;background:none;border:1px solid var(--line);border-radius:var(--radius-s);width:34px;height:34px;align-items:center;justify-content:center;color:var(--ink);}
.breadcrumb{
  display:flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:12px;color:var(--steel);overflow:hidden;white-space:nowrap;flex-shrink:1;min-width:0;
}
.breadcrumb a{color:var(--steel);}
.breadcrumb a:hover{color:var(--signal);}
.breadcrumb__sep{color:var(--line);}
.breadcrumb__current{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;}

.searchbox{
  margin-left:auto;flex-shrink:0;
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:7px 10px;color:var(--steel-soft);font-size:13px;width:230px;
}
.searchbox:hover{border-color:var(--steel-soft);}
.searchbox kbd{
  margin-left:auto;font-family:var(--font-mono);font-size:10px;background:var(--line-soft);
  border:1px solid var(--line);border-radius:3px;padding:1px 5px;color:var(--steel);
}
.iconbtn{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:var(--ink);
}
.iconbtn:hover{border-color:var(--steel-soft);}
.iconbtn.active{background:var(--flag-soft);color:var(--flag);border-color:var(--flag-soft);}

/* ============================================================
   SETTINGS MENU (top-right) — theme, print, sidebar hover mode.
   Deliberately far from the collapsed-sidebar's peek overlay
   (which only ever covers the left ~280px of the viewport), so
   these controls can never get buried behind it. See navigation.js
   for the open/close wiring and the hover-mode logic.
   ============================================================ */
.settings-menu-wrap{position:relative;}
.settings-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:230px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  box-shadow:var(--shadow-pop);
  z-index:70;
  display:none;flex-direction:column;
  padding:6px;
}
.settings-menu.open{display:flex;}
.settings-menu__item{
  display:flex;align-items:center;gap:10px;
  width:100%;border:none;background:transparent;border-radius:var(--radius-s);
  padding:9px 10px;color:var(--ink);font-family:var(--font-body);font-size:13px;text-align:left;
  cursor:pointer;
}
.settings-menu__item:hover{background:var(--paper);}
.settings-menu__item span:first-of-type{flex:1;}
.settings-menu__state{color:var(--steel-soft);font-size:12px;flex:none !important;}
.settings-menu__item.active .settings-menu__state{color:var(--flag);font-weight:600;}
.settings-menu__divider{height:1px;background:var(--line-soft);margin:5px 2px;}
.hover-mode-icon{transition:transform .18s ease;}
#hoverModeBtn[data-mode="auto"] .hover-mode-icon{transform:rotate(90deg);}
#hoverModeBtn[data-mode="pinned-open"] .hover-mode-icon{transform:rotate(0deg);}
#hoverModeBtn[data-mode="pinned-closed"] .hover-mode-icon{transform:rotate(-90deg);opacity:.55;}
/* The eye is struck through while sections are hidden, so the row's
   icon says the same thing as its state label. */
#hiddenSectionsBtn[data-state="shown"] .eye-slash{display:none;}

.content{flex:1;padding:28px 32px 80px;max-width:1080px;width:100%;}

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-hero{margin-bottom:28px;}
.dash-hero__eyebrow{font-family:var(--font-mono);font-size:11.5px;color:var(--steel-soft);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;}
.dash-hero h1{font-size:30px;margin-bottom:8px;}
.dash-hero p{color:var(--steel);font-size:14.5px;max-width:640px;}

.section-label{
  display:flex;align-items:baseline;gap:10px;margin:32px 0 14px;
}
.section-label h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--steel);}
.section-label__count{font-family:var(--font-mono);font-size:11px;color:var(--steel-soft);}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:16px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:8px;
  transition:border-color .12s ease, transform .12s ease;
}
.card:hover{border-color:var(--signal);transform:translateY(-1px);}
.card__top{display:flex;align-items:center;justify-content:space-between;}
.card h3{font-size:14.5px;}
.card p{font-size:12.5px;color:var(--steel);margin:0;}
.card__meta{font-family:var(--font-mono);font-size:10.5px;color:var(--steel-soft);margin-top:auto;}

.mini-list{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;}
.mini-list__row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:13px;}
.mini-list__row:last-child{border-bottom:none;}
.mini-list__row:hover{background:var(--line-soft);}
.mini-list__row .tag{flex-shrink:0;}
.mini-list__empty{padding:18px 14px;color:var(--steel-soft);font-size:13px;}

/* ============================================================
   TOPIC PAGE (stub template)
   ============================================================ */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:6px;}
.page-head h1{font-size:26px;}
.page-head__tags{display:flex;gap:8px;align-items:center;margin-bottom:10px;}
.page-actions{display:flex;gap:8px;flex-shrink:0;}
.page-sub{color:var(--steel);font-size:14px;margin-bottom:22px;max-width:680px;}

.block{margin-bottom:24px;}
.block h2{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--steel);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.block h2::after{content:"";flex:1;height:1px;background:var(--line);}
.block-body{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:16px 18px;font-size:13.5px;color:var(--ink);
}
.stub-placeholder{
  color:var(--steel-soft);font-style:italic;font-size:13px;
  display:flex;align-items:center;gap:8px;
}
.diagram-placeholder{
  border:1px dashed var(--line);border-radius:var(--radius-m);
  padding:32px;text-align:center;color:var(--steel-soft);font-size:13px;
  background:repeating-linear-gradient(135deg, var(--line-soft) 0 1px, transparent 1px 12px);
}
/* The canvas is recessed to --paper rather than --surface. Diagram
   shapes carry a --signal-soft tint, which on a white canvas left
   them separated from their ground by little more than their stroke.
   Recessing the canvas makes them read as objects, in both themes. */
.diagram-box{
  border:1px solid var(--line);border-radius:var(--radius-m);
  padding:24px 16px;background:var(--paper);
  overflow-x:auto;margin:0;
}
/* Diagrams are authored to a 920-unit column. Below that the SVG
   would scale its type down with it, so pan instead of shrink. */
.diagram-box > svg{min-width:660px;}
.diagram-figure{
  margin:8px 0 0;padding:0;
  font-size:12.5px;color:var(--steel);text-align:center;
}
.block-body p{margin:0 0 10px;}
.block-body p:last-child{margin-bottom:0;}
.block-body ul{margin:0;padding-left:19px;display:flex;flex-direction:column;gap:7px;}
.block-body li::marker{color:var(--signal);}
.block-body .ref-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;}
.block-body .ref-list li{display:flex;align-items:center;gap:8px;color:var(--steel);font-size:13px;}
.compare-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.compare-table th,.compare-table td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.compare-table th{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--steel-soft);font-weight:600;}
.compare-table tbody tr:last-child td{border-bottom:none;}
.compare-table tr.current{background:var(--signal-soft);}
.compare-table tr.current td:first-child{font-weight:700;color:var(--signal);}
@media (max-width:600px){.compare-table{font-size:11.5px;} .compare-table th,.compare-table td{padding:7px 6px;}}

.glossary-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:9px 12px;margin:18px 0 16px;max-width:380px;}
.glossary-search input{border:none;outline:none;background:none;font-size:13.5px;flex:1;color:var(--ink);font-family:var(--font-body);}
.glossary-jump{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px;position:sticky;top:calc(var(--topbar-h) + 6px);background:var(--paper);padding:8px 0;z-index:5;}
.glossary-jump__letter{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:4px;background:var(--surface);border:1px solid var(--line);font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--steel);}
.glossary-jump__letter:hover{border-color:var(--signal);color:var(--signal);}
.glossary-letter-group{margin-bottom:24px;}
.glossary-letter-group__heading{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--signal);border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:10px;}
.glossary-term{padding:10px 0;border-bottom:1px solid var(--line-soft);}
.glossary-term:last-child{border-bottom:none;}
.glossary-term__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;flex-wrap:wrap;}
.glossary-term__head strong{font-size:14px;font-family:var(--font-display);}
.glossary-term p{margin:0;font-size:13px;color:var(--steel);}

.checklist-progress{display:flex;align-items:center;gap:10px;margin:6px 0 24px;font-size:12.5px;color:var(--steel);}
.checklist-progress__bar{flex:1;height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden;}
.checklist-progress__fill{height:100%;background:var(--ok);border-radius:3px;transition:width .15s ease;}
.checklist-progress__count{font-family:var(--font-mono);font-size:11px;color:var(--steel-soft);white-space:nowrap;}
.checklist-section, .reference-section{margin-bottom:22px;}
.checklist-section h2, .reference-section h2{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--steel);margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.checklist-section h2::after, .reference-section h2::after{content:"";flex:1;height:1px;background:var(--line);}
.checklist-item{display:flex;align-items:flex-start;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line-soft);cursor:pointer;font-size:13.5px;user-select:none;}
.checklist-item:last-child{border-bottom:none;}
.checklist-item:hover{background:var(--line-soft);}
.checklist-item__box{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--line);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;background:var(--surface);}
.checklist-item.checked .checklist-item__box{background:var(--ok);border-color:var(--ok);}
.checklist-item.checked .checklist-item__box::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px);}
.checklist-item.checked .checklist-item__label{color:var(--steel-soft);text-decoration:line-through;}
.reference-item{padding:8px 4px;border-bottom:1px solid var(--line-soft);font-size:13.5px;display:flex;gap:8px;align-items:flex-start;}
.reference-item:last-child{border-bottom:none;}
.reference-item__q{flex-shrink:0;}
.checklists-actions{display:flex;gap:8px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);}
@media print{.checklist-item__box{border-color:#000;} .checklists-actions{display:none;}}

/* written vs stub indicators */
.nav-item__status{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--line);}
.nav-item__status.done{background:var(--ok);}
.card__meta.card__meta--progress{display:flex;align-items:center;gap:6px;}
.progress-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0;}
.related-chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  font-size:12.5px;padding:6px 11px;border-radius:16px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);
}
.chip:hover{border-color:var(--signal);color:var(--signal);}

.page-nav{display:flex;justify-content:space-between;gap:12px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);}
.page-nav a{
  display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--steel);
  border:1px solid var(--line);border-radius:var(--radius-m);padding:9px 14px;max-width:46%;
}
.page-nav a:hover{border-color:var(--signal);}
.page-nav a strong{color:var(--ink);font-size:13.5px;font-weight:600;}
.page-nav a.next{text-align:right;margin-left:auto;}

.btn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;padding:8px 13px;border-radius:var(--radius-s);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
}
.btn:hover{border-color:var(--steel-soft);}
.btn--primary{background:var(--signal);border-color:var(--signal);color:#fff;}
.btn--primary:hover{opacity:.92;}
/* Dark mode's --signal is a light blue, so white label text on it lands
   at about 2.8:1. Flip to dark ink there, the same way the sidebar
   brand mark does. Affects the existing tool and template buttons too. */
html[data-theme="dark"] .btn--primary{color:#0B0E14;}

/* ============================================================
   SEARCH MODAL
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,18,26,.5);backdrop-filter:blur(2px);
  display:none;align-items:flex-start;justify-content:center;padding-top:12vh;z-index:100;
}
.modal-overlay.open{display:flex;}
.search-modal{
  width:min(560px,90vw);background:var(--surface);border-radius:var(--radius-m);
  border:1px solid var(--line);box-shadow:var(--shadow-pop);overflow:hidden;
}
.search-modal__input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);}
.search-modal__input-row input{
  border:none;outline:none;background:none;font-size:15px;flex:1;color:var(--ink);font-family:var(--font-body);
}
.search-modal__results{max-height:50vh;overflow-y:auto;padding:6px;}
.search-result{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-s);font-size:13.5px;
}
.search-result.active{background:var(--signal-soft);}
.search-result .tag{flex-shrink:0;}
.search-result__path{margin-left:auto;font-size:11px;color:var(--steel-soft);}
.search-empty{padding:24px;text-align:center;color:var(--steel-soft);font-size:13px;}

/* ============================================================
   DESKTOP SIDEBAR COLLAPSE
   ============================================================ */

/* These two used to be `transition:all`, which also animated the
   inherited `color`. Flipping the theme parked that transition on the
   *old* theme's ink, permanently — so any descendant that didn't
   re-declare its own colour inherited light ink on a dark page. Every
   pre-existing component happened to set `color` explicitly, so it
   never showed. Only the properties that actually animate are named
   now; neither element animates anything of its own (the sidebar's
   width does the work and .main reflows via flexbox), so this is a
   no-op visually. */
.app{
    transition:none;
}

.sidebar{
    transition:width .25s ease;
}

.main{
    transition:width .25s ease;
}

.app.sidebar-collapsed .sidebar{
    width:var(--sidebar-collapsed-w);
}

.app.sidebar-collapsed .sidebar__brand-text,
.app.sidebar-collapsed .sidebar__foot,
.app.sidebar-collapsed .nav-home span:not(.nav-home__icon),
.app.sidebar-collapsed .nav-group__head span:not(.nav-group__code),
.app.sidebar-collapsed .nav-item__label{
    display:none;
}

/* When a group is expanded in the collapsed rail, its items show their
   code (e.g. FND-01) instead of the small status dot — more useful at
   a glance than an undifferentiated row of dots, at the cost of a
   slightly wider rail (see --sidebar-collapsed-w). */
.app.sidebar-collapsed .nav-item__status{
    display:none;
}
.app.sidebar-collapsed .nav-item__code{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:100%;
}
.app.sidebar-collapsed .nav-item__code.is-written{
    color:var(--ok);
}

.app.sidebar-collapsed .nav-group__head,
.app.sidebar-collapsed .nav-home{
    justify-content:center;
}

.app.sidebar-collapsed .nav-item{
    justify-content:center;
    padding-left:10px;
}

.app.sidebar-collapsed .nav-group__chevron{
    display:none;
}

/* ============================================================
   HOVER-TO-EXPAND (PEEK) — desktop, collapsed state only.
   Widens the sidebar in place (same mechanism as a normal full
   expand) so .main reflows and shifts over to make room. This is
   deliberately NOT position:fixed: taking the sidebar out of flow
   caused .main to fill the full viewport width underneath it,
   which meant peeking visibly covered/clipped real content rather
   than just floating over empty space. A brief content shift while
   hovering is a fair trade for content never being hidden.
   ============================================================ */
.app.sidebar-collapsed .sidebar.sidebar--peek{
    width:var(--sidebar-w);
}
.app.sidebar-collapsed .sidebar.sidebar--peek .sidebar__brand-text,
.app.sidebar-collapsed .sidebar.sidebar--peek .sidebar__foot,
.app.sidebar-collapsed .sidebar.sidebar--peek .nav-home span:not(.nav-home__icon),
.app.sidebar-collapsed .sidebar.sidebar--peek .nav-group__head span:not(.nav-group__code),
.app.sidebar-collapsed .sidebar.sidebar--peek .nav-item__label,
.app.sidebar-collapsed .sidebar.sidebar--peek .nav-item__status,
.app.sidebar-collapsed .sidebar.sidebar--peek .nav-group__chevron{
    display:revert;
}
.app.sidebar-collapsed .sidebar.sidebar--peek .nav-item__code{
    display:revert;
    overflow:revert;
    text-overflow:revert;
    white-space:revert;
    color:revert;
}
.app.sidebar-collapsed .sidebar.sidebar--peek .nav-group__head,
.app.sidebar-collapsed .sidebar.sidebar--peek .nav-home{
    justify-content:revert;
}
.app.sidebar-collapsed .sidebar.sidebar--peek .nav-item{
    justify-content:revert;
    padding-left:revert;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);box-shadow:var(--shadow-pop);}
  .sidebar.open{transform:translateX(0);}
  .topbar__hamburger{display:flex;}
  .searchbox{width:150px;}
  .content{padding:20px 16px 60px;}
  .breadcrumb{display:none;}

  .sidebar-backdrop{
    position:fixed;inset:0;background:rgba(15,18,26,.5);
    z-index:39; /* below .sidebar's z-index:40, above everything else */
    opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  .sidebar-backdrop.open{opacity:1;pointer-events:auto;}
}
/* Never shown on desktop, even if the .open class is somehow left on
   from a resize — belt-and-braces alongside the JS width checks. */
@media (min-width:901px){
  .sidebar-backdrop{display:none;}
}
@media (max-width:520px){
  .searchbox span{display:none;}
  .searchbox{width:auto;padding:8px;}
  .searchbox kbd{display:none;}
}

/* ============================================================
   SITE FOOTER — ownership and licence notice.

   Lives in .main after <main class="content">, so it sits at the
   foot of the content column and survives the router replacing
   #content. .content carries flex:1, which pushes this to the
   bottom of the viewport on short pages rather than leaving it
   floating mid-screen.

   It deliberately still prints: an attribution notice is exactly
   the thing that should travel with a printed or exported page,
   which is also what MIT clause 2 asks for.
   ============================================================ */
.site-foot{
  border-top:1px solid var(--line);
  background:var(--surface);
  padding:20px 32px 26px;
  margin-top:auto;
}
.site-foot__inner{
  max-width:1080px;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
}
.site-foot__brand{display:flex;align-items:center;gap:11px;}
.site-foot__mark{
  width:30px;height:30px;border-radius:6px;flex-shrink:0;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:.02em;
}
html[data-theme="dark"] .site-foot__mark{background:var(--signal);color:#0B0E14;}
.site-foot__brand-text{display:flex;flex-direction:column;line-height:1.35;}
.site-foot__brand-text strong{
  font-family:var(--font-display);font-size:13.5px;font-weight:700;
  letter-spacing:-.01em;color:var(--ink);
}
.site-foot__brand-text span{font-size:12px;color:var(--steel);}
.site-foot__meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12px;color:var(--steel);
}
.site-foot__meta a{color:var(--steel);text-decoration:underline;text-underline-offset:2px;}
.site-foot__meta a:hover{color:var(--signal);}
.site-foot__sep{color:var(--line);}

@media (max-width:760px){
  .site-foot{padding:18px 16px 22px;}
  .site-foot__inner{flex-direction:column;align-items:flex-start;gap:14px;}
}

/* Print */
@media print{
  .sidebar,.topbar,.page-actions,.page-nav{display:none !important;}
  .content{padding:0;max-width:none;}
  body{background:#fff;color:#000;}
  .site-foot{
    background:transparent;padding:14px 0 0;margin-top:24px;
    border-top:1px solid #999;
  }
  .site-foot__mark{background:#000 !important;color:#fff !important;}
  .site-foot__meta a{color:#000;}
}

/* ============================================================
   TEMPLATES — freeform document editor (Step 3)
   ============================================================ */
.tpl-toolbar{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px;margin-bottom:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);}
.tpl-toolbar button{
  font-size:12.5px;font-weight:600;padding:5px 9px;border-radius:var(--radius-s);
  border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;
}
.tpl-toolbar button:hover{border-color:var(--line);background:var(--paper);}
.tpl-toolbar__sep{width:1px;background:var(--line);margin:2px 4px;}
@media print{.tpl-toolbar{display:none;}}

/* Matches the inline styles used by tplHeading/tplList/tplNote in
   tpl-content.js, so a heading, list, or note typed live via the
   toolbar (using document.execCommand + formatBlock, which cannot
   attach inline styles of its own) looks the same as the seed
   content already in the document. */
.tpl-doc-body h3{font-size:14px;margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:600;}
.tpl-doc-body ul,.tpl-doc-body ol{margin:0 0 14px;padding-left:20px;}
.tpl-doc-body li{margin-bottom:5px;}
.tpl-doc-body blockquote{font-size:11.5px;color:var(--steel);font-style:italic;margin:4px 0 14px;border:none;padding:0;}
.tpl-doc-body p{margin:0 0 10px;}
/* ============================================================
   BEST PRACTICE (BST) — the tabbed process-document shell,
   generalised from the standalone ADO Peer Review Workbench file.
   Rendered by js/best-practice.js.

   Everything is tone-driven: a block declares a tone and picks up
   a matching accent/tint pair, so nothing here hard-codes a
   colour and every component works in both themes.
   ============================================================ */
.bp-t--signal{--bp-accent:var(--signal);--bp-tint:var(--signal-soft);}
.bp-t--violet{--bp-accent:var(--violet);--bp-tint:var(--violet-soft);}
.bp-t--rust{--bp-accent:var(--rust);--bp-tint:var(--rust-soft);}
.bp-t--flag{--bp-accent:var(--flag);--bp-tint:var(--flag-soft);}
.bp-t--ok{--bp-accent:var(--ok);--bp-tint:var(--ok-soft);}
.bp-t--danger{--bp-accent:var(--danger);--bp-tint:var(--danger-soft);}
.bp-t--steel{--bp-accent:var(--steel);--bp-tint:var(--line-soft);}

.bp-code{font-family:var(--font-mono);font-size:12px;background:var(--line-soft);border-radius:3px;padding:1px 5px;}
.btn--sm{font-size:12px;padding:5px 10px;}

/* --- Toolbar --- */
.bp-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  padding:8px 10px;margin-bottom:18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);
}
.bp-toolbar button{
  font-size:12.5px;font-weight:600;padding:5px 9px;border-radius:var(--radius-s);
  border:1px solid transparent;background:transparent;color:var(--ink);
}
.bp-toolbar button:hover{border-color:var(--line);background:var(--paper);}
.bp-toolbar__sep{width:1px;align-self:stretch;background:var(--line);margin:2px 4px;}

/* --- Step tabs. The standalone file hid these behind a dropdown
   because it had no other navigation; here the sidebar handles
   "which document", so the steps stay visible and scroll
   sideways rather than collapsing. --- */
.bp-tabs{
  display:flex;gap:4px;margin-bottom:24px;padding-bottom:2px;
  border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:thin;
}
.bp-tab{
  flex-shrink:0;display:flex;align-items:center;gap:7px;
  padding:9px 13px;border:none;background:transparent;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  font-size:13px;font-weight:500;color:var(--steel);white-space:nowrap;
}
.bp-tab:hover{color:var(--ink);background:var(--line-soft);}
.bp-tab.active{color:var(--signal);border-bottom-color:var(--signal);font-weight:600;}
.bp-tab__n{font-family:var(--font-mono);font-size:10.5px;color:var(--steel-soft);}
.bp-tab.active .bp-tab__n{color:var(--signal);}
/* Marks a tab whose tool has no backend behind it — the state
   survives the tab being active, so it keeps its own colour. */
.bp-tab__badge{
  font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 6px;border-radius:9px;
  background:var(--flag-soft);color:var(--flag);
}

/* --- Page (one per tab) --- */
.bp-page{display:none;}
.bp-page.active{display:block;animation:bpFade .2s ease;}
@keyframes bpFade{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}
.bp-page-head{max-width:74ch;margin-bottom:26px;}
.bp-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--steel);margin-bottom:7px;
}
.bp-page-head h2{font-size:21px;margin-bottom:9px;line-height:1.3;}
.bp-page-head p{font-size:14px;color:var(--steel);margin:0;}

.bp-block{margin-bottom:26px;}
.bp-block-head{
  font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--steel);
  margin-bottom:11px;display:flex;align-items:center;gap:8px;font-weight:600;
}
.bp-block-head::after{content:"";flex:1;height:1px;background:var(--line);}
.bp-prose{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:16px 18px;font-size:13.5px;color:var(--ink);box-shadow:var(--shadow-card);
}
.bp-prose p{margin:0 0 10px;}
.bp-prose p:last-child{margin-bottom:0;}

/* --- Note / callout --- */
.bp-note{
  border:1px solid var(--bp-accent);border-left-width:3px;background:var(--bp-tint);
  border-radius:var(--radius-m);padding:13px 17px;margin:0 0 22px;
}
.bp-note__label{
  display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--bp-accent);margin-bottom:5px;
}
.bp-note__body{font-size:13.5px;color:var(--ink);}
.bp-note__body p{margin:0 0 8px;}
.bp-note__body p:last-child{margin-bottom:0;}

/* --- Two-lens panels --- */
.bp-panels{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.bp-panel{
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--bp-accent);
  border-radius:var(--radius-m);padding:15px 17px;box-shadow:var(--shadow-card);
}
.bp-panel h4{font-size:13.5px;display:flex;align-items:center;gap:8px;margin-bottom:8px;color:var(--bp-accent);}
.bp-dot{width:7px;height:7px;border-radius:50%;background:var(--bp-accent);flex-shrink:0;}
.bp-panel__note{font-size:12.5px;color:var(--steel);margin:0 0 11px;}
.bp-panel ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--ink);}
.bp-panel li::marker{color:var(--bp-accent);}

/* --- Lead-in list (etiquette / ground rules) --- */
.bp-leadlist{
  list-style:none;margin:0;padding:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);overflow:hidden;
}
.bp-leadlist li{
  padding:13px 17px;border-bottom:1px solid var(--line-soft);
  font-size:13.5px;color:var(--steel);
}
.bp-leadlist li:last-child{border-bottom:none;}
.bp-leadlist b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:3px;}

/* --- Flow track --- */
.bp-flow{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;}
.bp-flow__step{
  flex:1;min-width:180px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:13px 15px;font-size:13px;color:var(--ink);box-shadow:var(--shadow-card);
}
.bp-flow__n{
  display:block;font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--signal);margin-bottom:5px;
}
.bp-flow__arrow{display:flex;align-items:center;color:var(--steel-soft);font-size:16px;flex-shrink:0;}

/* --- Cards --- */
.bp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;}
.bp-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:15px 17px;box-shadow:var(--shadow-card);
}
.bp-card h4{font-size:13.5px;margin-bottom:9px;}
.bp-card p{font-size:13px;color:var(--steel);margin:0 0 9px;}
.bp-card ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink);}
.bp-card li::marker{color:var(--signal);}

/* --- Table --- */
.bp-table-wrap{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  overflow-x:auto;box-shadow:var(--shadow-card);
}
.bp-table{width:100%;border-collapse:collapse;font-size:12.5px;color:var(--ink);min-width:540px;}
.bp-table th,.bp-table td{padding:10px 12px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top;}
.bp-table th{
  font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--steel-soft);background:var(--paper);border-bottom-color:var(--line);
}
.bp-table tbody tr:last-child td{border-bottom:none;}

/* --- Type tabs, shared by rubrics and snippets --- */
.bp-typetabs,.bp-kindtabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.bp-typetab,.bp-kindtab{
  display:flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:16px;
  border:1px solid var(--line);background:var(--surface);
  font-size:12.5px;font-weight:500;color:var(--steel);
}
.bp-typetab:hover,.bp-kindtab:hover{border-color:var(--bp-accent);color:var(--ink);}
.bp-typetab.active,.bp-kindtab.active{
  border-color:var(--bp-accent);background:var(--bp-tint);color:var(--bp-accent);font-weight:600;
}
.bp-swatch{width:8px;height:8px;border-radius:2px;background:var(--bp-accent);flex-shrink:0;}
.bp-kindtabs{margin-top:-4px;}

/* --- Rubric panel --- */
.bp-rubric{display:none;}
.bp-rubric.active{display:block;}
.bp-rubric__head{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:14px 17px;background:var(--bp-tint);
  border:1px solid var(--bp-accent);border-bottom:none;
  border-radius:var(--radius-m) var(--radius-m) 0 0;
}
.bp-rubric__goal{font-size:13px;color:var(--ink);flex:1;min-width:240px;}
.bp-progress{width:180px;flex-shrink:0;}
.bp-progress__label{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--steel);margin-bottom:4px;}
.bp-progress__count{color:var(--bp-accent);font-weight:600;}
.bp-progress__track{height:6px;border-radius:3px;background:var(--surface);border:1px solid var(--line);overflow:hidden;}
.bp-progress__fill{height:100%;background:var(--bp-accent);transition:width .16s ease;}

.bp-checks{
  list-style:none;margin:0;padding:0;
  background:var(--surface);border:1px solid var(--line);border-top:none;
}
.bp-check{
  display:flex;gap:12px;padding:12px 17px;border-bottom:1px solid var(--line-soft);
  cursor:pointer;user-select:none;
}
.bp-check:last-child{border-bottom:none;}
.bp-check:hover{background:var(--line-soft);}
.bp-check__box{
  width:17px;height:17px;border-radius:4px;border:1.5px solid var(--line);
  flex-shrink:0;margin-top:2px;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.bp-check.checked .bp-check__box{background:var(--bp-accent);border-color:var(--bp-accent);}
.bp-check.checked .bp-check__box::after{
  content:"";width:8px;height:4px;
  border-left:2px solid var(--surface);border-bottom:2px solid var(--surface);
  transform:rotate(-45deg) translate(1px,-1px);
}
.bp-check__title{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:2px;}
.bp-check__desc{font-size:12.5px;color:var(--steel);}
.bp-check.checked .bp-check__title{color:var(--steel);}
.bp-gwt{
  margin-top:8px;padding:9px 12px;border-radius:var(--radius-s);
  background:var(--paper);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:11.5px;color:var(--ink);line-height:1.7;
}
.bp-kw{color:var(--signal);font-weight:600;}
.bp-rubric__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 17px;background:var(--surface);
  border:1px solid var(--line);border-top:1px solid var(--line-soft);
  border-radius:0 0 var(--radius-m) var(--radius-m);
}
.bp-done{font-size:12.5px;color:var(--ok);font-weight:600;opacity:0;transition:opacity .18s ease;}
.bp-done.show{opacity:1;}

/* --- Snippets --- */
.bp-snip-out{
  width:100%;min-height:170px;resize:vertical;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:14px 16px;font-family:var(--font-mono);font-size:12.5px;line-height:1.65;
  color:var(--ink);outline:none;
}
.bp-snip-out:focus{border-color:var(--signal);}
.bp-copy-row{display:flex;align-items:center;gap:12px;margin-top:10px;}
.bp-copied{font-size:12px;color:var(--ok);font-weight:600;}

/* --- Tracker --- */
.bp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:18px;}
.bp-stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:14px 16px;text-align:center;box-shadow:var(--shadow-card);
}
.bp-stat__n{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--ink);line-height:1.1;}
.bp-stat__n.bp-t--ok{color:var(--ok);}
.bp-stat__n.bp-t--flag{color:var(--flag);}
.bp-stat__n.bp-t--danger{color:var(--danger);}
.bp-stat__l{font-size:11.5px;color:var(--steel);margin-top:3px;}

.bp-track-form{
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:16px 18px;margin-bottom:18px;box-shadow:var(--shadow-card);
}
.bp-field{display:flex;flex-direction:column;gap:4px;flex:1;min-width:130px;}
.bp-field--wide{flex:2;min-width:200px;}
.bp-field--btn{flex:0 0 auto;min-width:0;}
.bp-field > span{
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--steel-soft);
}
.bp-field input,.bp-field select{
  border:1px solid var(--line);border-radius:var(--radius-s);
  background:var(--paper);color:var(--ink);
  padding:8px 10px;font-size:13px;font-family:var(--font-body);outline:none;
}
.bp-field input:focus,.bp-field select:focus{border-color:var(--signal);}

.bp-log{min-width:640px;}
.bp-log__when{font-family:var(--font-mono);font-size:11px;color:var(--steel-soft);white-space:nowrap;}
.bp-outcome{
  display:inline-block;font-size:11.5px;font-weight:600;
  padding:2px 9px;border-radius:11px;
  background:var(--bp-tint);color:var(--bp-accent);white-space:nowrap;
}
.bp-del{
  border:none;background:transparent;color:var(--steel-soft);
  font-size:16px;line-height:1;padding:0 4px;border-radius:3px;
}
.bp-del:hover{color:var(--danger);background:var(--danger-soft);}
.bp-log-empty{padding:20px 16px;text-align:center;font-size:13px;color:var(--steel);}
.bp-track-tail{display:flex;align-items:center;gap:12px;margin-top:14px;}
.bp-save-status{font-size:12px;color:var(--ok);font-weight:600;}

/* --- Worked example cards --- */
.bp-example-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.bp-example{
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--bp-accent);
  border-radius:var(--radius-m);overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow-card);
}
.bp-example-pair .bp-example{margin-bottom:0;}
.bp-example__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:13px 18px;border-bottom:1px solid var(--line-soft);
}
.bp-example__title{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--ink);}
.bp-pill{
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 9px;border-radius:11px;
  background:var(--bp-tint);color:var(--bp-accent);white-space:nowrap;flex-shrink:0;
}
.bp-example__body{padding:16px 18px 18px;}
.bp-field-row{margin-bottom:15px;}
.bp-field-row:last-of-type{margin-bottom:0;}
.bp-field-row__label{
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--steel-soft);margin-bottom:4px;
}
.bp-field-row__value{font-size:13px;color:var(--ink);line-height:1.65;}
.bp-field-row__value ul{margin:4px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:5px;}
.bp-field-row__value li::marker{color:var(--bp-accent);}
.bp-field-row__value .bp-gwt{margin-top:8px;}
.bp-field-row__value .bp-gwt + .bp-gwt{margin-top:8px;}
.bp-why{
  margin-top:18px;padding:12px 15px;border-radius:var(--radius-s);
  background:var(--ok-soft);border:1px dashed var(--ok);
}
.bp-why__label{
  display:block;font-family:var(--font-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ok);margin-bottom:4px;
}
.bp-why p{margin:0;font-size:13px;color:var(--ink);line-height:1.65;}

/* --- Responsive --- */
@media (max-width:820px){
  .bp-panels,.bp-example-pair{grid-template-columns:1fr;}
  .bp-flow__arrow{display:none;}
  .bp-flow__step{min-width:100%;}
  .bp-rubric__head{flex-direction:column;align-items:stretch;gap:12px;}
  .bp-progress{width:100%;}
  .bp-field,.bp-field--wide{flex:1 1 100%;}
  .bp-field--btn button{width:100%;justify-content:center;}
}

/* --- Print: the whole guide, not whichever tab was open. --- */
@media print{
  .bp-toolbar,.bp-tabs,.bp-track-form,.bp-track-tail,.bp-copy-row,
  .bp-rubric__foot,.bp-del{display:none !important;}
  .bp-page{display:block !important;page-break-before:always;}
  .bp-page:first-of-type{page-break-before:auto;}
  .bp-rubric{display:block !important;margin-bottom:20px;}
  .bp-typetabs,.bp-kindtabs{display:none !important;}
  .bp-example,.bp-card,.bp-panel,.bp-check,.bp-flow__step{break-inside:avoid;}
  .bp-snip-out{min-height:0;height:auto;}
}