/* shell.css - the AiSIC workbench chrome, shared by every page: menu bar,
   library rail, document head and view tabs, setup pane, status bar and
   their responsive behaviour. Page-specific styles stay with each page. */

/* ---------------------------------------------------------------------------
   Identity: an analog design workbench. The page is laid out the way the tools
   these students will use are: a library on the left, one view of the circuit
   at a time in the middle, the simulation setup on the right - analysis,
   design variables, run, outputs - and a status bar. The schematic is drawn
   on a drafting sheet with a dot grid, the one thing the eye should land on;
   the chrome around it stays quiet, in hairline panels. Colour carries
   meaning and nothing else: blue is where you are, green runs the simulator,
   gold marks a measured value, red is outside a limit or an error.
   --------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --chrome:    #f0f3f8;
  --panel:     #f7f9fc;
  --canvas:    #ffffff;
  --grid:      #d5dce6;
  --rule:      #d6dce4;
  --rule-2:    #e5e9ef;
  --ink:       #18263d;
  --ink-2:     #4a5366;
  --ink-3:     #626d80;
  --blue:      #1749d1;
  --blue-ink:  #1749d1;
  --blue-wash: #edf2ff;
  --blue-line: #c5d7f1;
  --run:       #1b7f4b;
  --run-dark:  #15673c;
  --gold:      #c98a00;
  --gold-wash: #fdf3dc;
  --danger:    #c0392f;
  --danger-wash: #fdeeec;
  --ok:        #2fbf71;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --nav-bg:    #142238;
  --nav-ink:   #edf3ff;
  --nav-muted: #b1bed3;
  --menubar-h: 40px;
  --status-h:  22px;
  --lib-w:     224px;
  --setup-w:   252px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body { margin: 0; height: 100%; overflow: hidden; background: var(--chrome); color: var(--ink); font: 13.5px/1.5 var(--sans); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 12px; transform: translateY(-160%); padding: 10px 16px; background: var(--canvas); color: var(--blue); border: 1px solid var(--blue); border-radius: 5px; }
.skip-link:focus { transform: none; }
button, input, select { font: inherit; color: inherit; }
code { font: 500 0.93em/1 var(--mono); }
[hidden] { display: none !important; }

/* ---------- the workbench ---------- */
.app {
  display: grid; height: 100vh; height: 100dvh;
  grid-template-rows: var(--menubar-h) minmax(0, 1fr) var(--status-h);
  grid-template-columns: var(--lib-w) minmax(0, 1fr) var(--setup-w);
  grid-template-areas: "menu menu menu" "lib doc setup" "status status status";
}

/* ---------- menu bar ---------- */
.menubar {
  grid-area: menu; display: flex; align-items: center; gap: 12px; padding: 0 10px;
  background: var(--canvas); border-bottom: 1px solid var(--rule); font: 13.5px/1.5 var(--sans);
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; }
.brandtype { display: flex; flex-direction: column; gap: 1px; }
.wordmark { font: 750 22px/1 var(--sans); letter-spacing: -0.055em; margin: 0; color: var(--ink); }
.brandsub { font-size: 10px; line-height: 1.2; letter-spacing: .015em; color: var(--ink-2); }
.sitenav { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.sitenav a { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 4px 9px; border-radius: 3px; color: var(--ink-2); text-decoration: none; font-size: 12px; font-weight: 550; white-space: nowrap; }
.sitenav a:hover { background: var(--panel); color: var(--blue); }
.sitenav a[aria-current="page"] { color: var(--blue); background: var(--blue-wash); font-weight: 650; }
.process { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.process b { font: 600 12px/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.process sub { font-size: 8.5px; }
.navtoggle {
  display: inline-flex; align-items: center; gap: 6px; flex: none; cursor: pointer;
  font-weight: 550; font-size: 12px; color: var(--ink-2); background: var(--canvas);
  border: 1px solid var(--rule); border-radius: 3px; padding: 4px 8px; min-height: 28px;
}
.panelcontrols { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.menuspacer { flex: 1; }
.panelcontrols button[aria-pressed="true"], .navtoggle[aria-expanded="true"] { color: var(--blue); background: var(--blue-wash); border-color: var(--blue-line); }
.navtoggle .bars, .navtoggle .bars::before, .navtoggle .bars::after {
  display: block; width: 13px; height: 1.6px; background: currentColor; border-radius: 1px; content: "";
}
.navtoggle .bars { position: relative; }
.navtoggle .bars::before { position: absolute; top: -4px; }
.navtoggle .bars::after { position: absolute; top: 4px; }

/* ---------- library ---------- */
.library {
  grid-area: lib; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--nav-bg); color: var(--nav-ink); border-right: 1px solid var(--nav-bg);
}
.library :focus-visible { outline-color: #bdeeff; outline-offset: -3px; }
.library .catitem.on:focus-visible, .library .domainbutton[aria-pressed="true"]:focus-visible { outline-color: var(--blue); }
.libhd { display: flex; flex-direction: column; gap: 7px; padding: 8px 8px 6px; }
.libtitle { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.libtitle h2 { font-size: 12px; font-weight: 650; letter-spacing: -.015em; margin: 0; }
.libtitle { flex-wrap: wrap; }
.libtitle h2 { flex: 1; }
#catcount, .libcount { flex-basis: 100%; }
#catcount, .libcount { color: var(--nav-muted); font: 11px/1.4 var(--mono); white-space: nowrap; }
.domainfield { display: flex; flex-direction: column; gap: 6px; color: var(--nav-muted); font-size: 12px; }
#domainfilter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.domainbutton { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 28px; padding: 4px 6px; border: 1px solid #40516a; border-radius: 3px; color: var(--nav-ink); background: transparent; font-size: 11px; text-align: left; cursor: pointer; text-decoration: none; }
.domainbutton span { font-size: 10.5px; color: var(--nav-muted); }
.domainbutton:hover:not(:disabled) { background: #253751; }
.domainbutton[aria-pressed="true"] { border-color: #9dbaff; background: #e8efff; color: #15397e; font-weight: 650; }
.domainbutton[aria-pressed="true"] span { color: #526581; }
.domainbutton:disabled { opacity: .7; cursor: default; border-style: dashed; }
#closedrawer { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 6px; border: 1px solid #52627a; border-radius: 3px; background: transparent; color: var(--nav-ink); cursor: pointer; font-size: 11px; }
.searchfield { position: relative; }
.searchfield kbd { position: absolute; right: 7px; top: 5px; font: 11px/18px var(--mono); text-align: center; width: 19px; border: 1px solid #52627a; border-radius: 3px; color: var(--nav-muted); pointer-events: none; }
#clearfilter { position: absolute; right: 2px; top: 1px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--nav-ink); cursor: pointer; font-size: 21px; }
.panetitle { font-size: 12.5px; font-weight: 650; color: var(--ink); margin: 0; }
#filter, .railsearch {
  width: 100%; font-size: 13px; color: var(--nav-ink);
  background: #213149 no-repeat 11px 50% / 15px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23858e9f' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.8'/%3E%3Cpath d='m10.6 10.6 3.6 3.6'/%3E%3C/svg%3E");
  border: 1px solid #40516a; border-radius: 3px; padding: 5px 32px 5px 32px;
}
#filter::placeholder, .railsearch::placeholder { color: var(--nav-muted); }
#filter::-webkit-search-cancel-button, .railsearch::-webkit-search-cancel-button { display: none; }
.libmeta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; letter-spacing: .025em; color: var(--nav-muted); }
.libmeta > span { text-transform: uppercase; }
.library .linkbtn { color: #c2d4ff; font-size: 11px; letter-spacing: 0; }
.library .linkbtn:disabled { opacity: .5; cursor: default; text-decoration: none; }
.linkbtn { font-size: 12px; color: var(--blue-ink); background: none; border: 0; padding: 0; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
#catalogue { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 20px; scrollbar-color: #5d6e88 var(--nav-bg); scrollbar-width: thin; }
#catalogue .empty { color: var(--nav-muted); }
.shelf + .shelf { margin-top: 3px; }
.shelfhd {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 30px; padding: 5px 6px;
  position: sticky; top: 0; z-index: 1; background: var(--nav-bg); border: 0; border-radius: 7px; cursor: pointer; text-align: left; font-size: 13px; line-height: 1.4; font-weight: 550; color: var(--nav-ink);
}
.shelfhd:hover { background: #213149; }
.shelficon { display: none; }
.shelficon svg { width: 100%; height: 100%; }
.chev { width: 6.5px; height: 6.5px; flex: none; margin: 0 2px 2px 2px;
        border-right: 1.6px solid var(--nav-muted); border-bottom: 1.6px solid var(--nav-muted);
        transform: rotate(-45deg); transition: transform .15s; }
.shelf.open .chev { transform: rotate(45deg); margin-bottom: 4px; }
.shelfname { flex: 1; min-width: 0; }
.shelf.here > .shelfhd { background: #253751; }
.shelf.here .shelficon { color: #a9c4ff; }
.shelfcount { font-size: 11px; font-weight: 500; color: var(--nav-muted); font-variant-numeric: tabular-nums; background: #293a52; min-width: 21px; text-align: center; border-radius: 4px; padding: 1px 3px; }
.subhd { margin: 7px 0 2px; padding: 0 6px 0 14px; font-size: 11px; font-weight: 550; color: var(--nav-muted); }
.catlist { list-style: none; margin: 0 0 6px; padding: 0; }
.catitem {
  scroll-margin-top: 64px;
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  background: none; border: 0; border-left: 3px solid transparent; border-radius: 0 6px 6px 0;
  min-height: 28px; padding: 5px 6px; cursor: pointer;
}
.catlist { margin-left: 10px; border-left: 1px solid #40516a; }
.catitem:hover { background: #213149; }
.catitem.on { background: #e8efff; border-left-color: #6995ff; }
.catname { font-size: 12px; line-height: 1.4; color: var(--nav-ink); }
.catitem.on .catname { color: #15397e; font-weight: 700; }
.scrim { display: none; }

/* ---------- the document: header, view tabs, the view ---------- */
.doc { grid-area: doc; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dochead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 5px 10px; min-width: 0; background: var(--canvas); }
.docidentity { display: flex; flex: 1 1 360px; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.dochead h2, .dochead .doctitle { font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -0.03em; margin: 0; overflow-wrap: anywhere; }
.crumbs { font-size: 11px; color: var(--ink-3); margin: 0; overflow-wrap: anywhere; }
.crumbs .sep { margin: 0 5px; }
.circuitreuse { position: relative; flex: none; margin-left: auto; align-self: center; }
.circuitreuse > summary { min-height: 28px; display: flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid var(--rule); border-radius: 3px; background: var(--canvas); color: var(--ink-2); font-size: 11px; font-weight: 550; cursor: pointer; list-style: none; }
.circuitreuse > summary::-webkit-details-marker { display: none; }
.circuitreuse > summary::after { content: "+"; font-size: 16px; font-weight: 400; }
.circuitreuse[open] > summary { color: var(--blue); border-color: var(--blue-line); background: var(--blue-wash); }
.circuitreuse[open] > summary::after { content: "−"; }
.reuseactions { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: min(280px, calc(100vw - 32px)); padding: 14px; border: 1px solid var(--rule); border-radius: 7px; background: var(--canvas); box-shadow: 0 10px 30px #18263d22; }
.reuseactions p { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.reuseactions a, .reuseactions button { display: block; width: 100%; min-height: 38px; padding: 8px 9px; margin-top: 6px; color: var(--blue); background: var(--panel); border: 1px solid var(--rule-2); border-radius: 4px; text-decoration: none; text-align: left; font-size: 12px; cursor: pointer; }
.reuseactions a:hover, .reuseactions button:hover { background: var(--blue-wash); border-color: var(--blue-line); }
#jsonstatus { margin: 9px 0 0; color: var(--ink-2); }
#jsonstatus:empty { display: none; }

.tabstrip { display: flex; padding: 0 4px; border-bottom: 1px solid var(--rule); min-width: 0; background: var(--canvas); }
.vtabs { display: flex; flex: 1; flex-wrap: wrap; align-items: stretch; gap: 0; min-width: 0; }
.vtab {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; flex: none; min-height: 30px; font-size: 12px; font-weight: 550; color: var(--ink-2); cursor: pointer;
  background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 4px 9px; margin: 0;
}
.vtab svg { width: 16px; height: 16px; flex: none; }
.vtab:hover { color: var(--blue); background: var(--panel); }
.vtab.on, .vtab[aria-selected="true"] { border-bottom-color: var(--blue); color: var(--blue); font-weight: 650; background: var(--blue-wash); }

.tool {
  font-size: 12px; font-weight: 550; color: var(--ink-2); background: var(--canvas); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--rule); border-radius: 6px; padding: 4px 9px; min-width: 28px;
}
.tool:hover { border-color: var(--blue); color: var(--blue-ink); }

/* ---------- simulation setup ---------- */
.setup {
  grid-area: setup; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel); border-left: 1px solid var(--rule);
}
.pane { padding: 9px 10px; border-bottom: 1px solid var(--rule-2); }
.panehd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 9px; }
.analyses { display: flex; flex-direction: column; gap: 1px; }
.anopt {
  scroll-margin-top: 128px;
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
  font-size: 13px; color: var(--ink); background: none; border: 0; border-radius: 6px; padding: 5px 6px;
}
.anopt:hover { background: rgba(20,25,34,.04); }
.anopt::before { content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none;
                 border: 1.5px solid #aeb6c3; background: var(--canvas); }
.anopt.on { font-weight: 650; }
.anopt.on::before { border-color: var(--blue); background: radial-gradient(circle, var(--blue) 3.2px, var(--canvas) 3.8px); }
#analysisnote { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.paramgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
.moreparams { margin-top: 12px; }
.moreparams summary, .variations > summary { cursor: pointer; color: var(--ink-2); font-size: 12.5px; font-weight: 650; padding: 5px 0; }
.moreparams[open] summary { margin-bottom: 8px; }
.setuphead { position: sticky; top: 0; z-index: 6; background: var(--panel); }
.setuphead .panehd { margin: 0; gap: 6px; }
#backtoview, .mobileactions { display: none; }
.prow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.plabel { font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.punit { color: var(--ink-3); }
.pinput {
  font: 500 12.5px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink);
  background: var(--canvas); border: 1px solid var(--rule); border-radius: 3px; padding: 5px 6px; width: 100%; min-width: 0;
}
.pinput:hover { border-color: #bcc5d2; }
.pinput:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 2px var(--blue-wash); }
.pinput.bad { border-color: var(--gold); background: var(--gold-wash); }
.btnrun {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; cursor: pointer;
  font-size: 14px; font-weight: 700; color: #fff; background: var(--run); border: 1px solid var(--run);
  border-radius: 8px; padding: 10px 14px;
}
.btnrun::before { content: ""; width: 0; height: 0; border-left: 9px solid currentColor;
                  border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.btnrun:hover:not(:disabled) { background: var(--run-dark); }
.setuphead .panetitle { font-size: 12px; letter-spacing: -.01em; }
.setuphead .btnrun, #viewrun, #head-run { width: auto; margin: 0; border-radius: 3px; padding: 4px 8px; min-height: 28px; font-size: 12px; gap: 5px; }
.setuphead .btnrun::before, #viewrun::before, #head-run::before { border-left-width: 6px; border-top-width: 4px; border-bottom-width: 4px; }
#closesetup { padding: 2px 5px; min-height: 26px; }
.btnrun:disabled { opacity: .5; cursor: default; }
.variant { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; margin-top: 14px; }
.variant .vname { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.variant .vsel { grid-column: 1 / -1; display: flex; gap: 6px; min-width: 0; }
.variant select { font-size: 12.5px; background: var(--canvas); border: 1px solid var(--rule); border-radius: 6px; padding: 5px 6px; min-width: 0; flex: 1; }
.btn2 { font-size: 12.5px; font-weight: 650; color: var(--ink); background: var(--canvas); cursor: pointer; white-space: nowrap;
        border: 1px solid var(--rule); border-radius: 6px; padding: 5px 12px; }
.btn2:hover:not(:disabled) { border-color: var(--blue); color: var(--blue-ink); }
.btn2:disabled { opacity: .5; cursor: default; }
.hint { font-size: 12px; line-height: 1.5; color: var(--ink-3); margin: 10px 0 0; }
.outputs { margin: 0; }
.orow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--rule-2); }
.orow:last-child { border-bottom: 0; }
.orow dt { font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.orow dd { margin: 0; font: 600 12.5px/1.35 var(--mono); font-variant-numeric: tabular-nums; text-align: right;
           border-bottom: 2px solid var(--gold); }
.orow.fail dd { color: var(--danger); border-bottom-color: var(--danger); }
/* a long value - a bit string, a list of thresholds - goes under its label */
.orow.long { grid-template-columns: minmax(0, 1fr); }
.orow.long dd { text-align: left; justify-self: start; overflow-wrap: anywhere; font-weight: 500; }
.outempty { font-size: 12.5px; color: var(--ink-3); margin: 0; }

/* ---------- status bar ---------- */
.statusbar {
  grid-area: status; display: flex; align-items: center; min-width: 0; overflow: hidden;
  background: var(--chrome); border-top: 1px solid var(--rule); font: 11px/1.5 var(--sans); color: var(--ink-3); white-space: nowrap;
}
.statusbar > * { padding: 0 12px; }
.statusbar > * + * { border-left: 1px solid var(--rule); }
.statusbar a { color: var(--ink-2); text-decoration: none; }
.statusbar a:hover { color: var(--blue-ink); text-decoration: underline; }
.status { display: inline-flex; align-items: center; gap: 7px; flex: 1 1 auto; min-width: 170px; color: var(--ink-2); }
#simstatus { overflow: hidden; text-overflow: ellipsis; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #aab2c0; flex: none; }
.dot.on { background: var(--ok); }
.byline { color: var(--ink-2); }

/* ---------- narrower: the library slides in ---------- */
@media (min-width: 1280px) {
  body.librarycollapsed { --lib-w: 0px; }
  body.librarycollapsed .library { display: none; }
}
@media (min-width: 900px) {
  body.setupcollapsed { --setup-w: 0px; }
  body.setupcollapsed .setup { display: none; }
}
@media (max-width: 1279px) {
  .app { grid-template-columns: minmax(0, 1fr) var(--setup-w); grid-template-areas: "menu menu" "doc setup" "status status"; }
  .navtoggle { display: inline-flex; }
  #closedrawer { display: inline-flex; align-items: center; }
  .libtitle { flex-wrap: wrap; }
  .libtitle h2 { flex: 1; }
  #catcount, .libcount { flex-basis: 100%; }
  .library {
    position: fixed; top: var(--menubar-h); left: 0; bottom: var(--status-h); z-index: 45;
    width: min(320px, 88vw); transform: translateX(-102%); transition: transform .18s ease;
  }
  body.navopen .library { transform: none; box-shadow: 0 16px 48px rgba(20,25,34,.22); }
  body.navopen .scrim { display: block; position: fixed; inset: var(--menubar-h) 0 var(--status-h) 0; z-index: 44; background: rgba(20,25,34,.28); }
  .process .opt { display: none; }
}
@media (max-width: 1099px) { .statusbar .opt2, .process { display: none; } }
@media (max-width: 899px) {
  body { overflow: auto; height: auto; }
  .app { height: auto; min-height: 100vh; grid-template-columns: minmax(0, 1fr);
         grid-template-rows: var(--menubar-h) auto auto auto; grid-template-areas: "menu" "doc" "setup" "status"; }
  .menubar { position: sticky; top: 0; z-index: 46; }
  .library { bottom: 0; }
  body.navopen .scrim { inset: var(--menubar-h) 0 0 0; }
  .dochead, .setup, .pinput { scroll-margin-top: calc(var(--menubar-h) + 90px); }
  .tabstrip { position: sticky; top: var(--menubar-h); z-index: 7; background: var(--canvas); padding: 0 8px; }
  .vtabs { justify-content: flex-start; }
  .setup { overflow: visible; border-left: 0; border-top: 1px solid var(--rule); }
  .setuphead { position: static; }
  .setuphead .btnrun { display: none; }
  #backtoview { display: inline-block; }
  .mobileactions { position: fixed; bottom: 0; left: 0; right: 0; z-index: 43; display: flex; gap: 8px; padding: 5px 12px max(5px, env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: var(--panel); }
  .mobileactions .btnrun { width: auto; flex: 1; padding: 6px 12px; }
  .mobileactions .btn2 { min-width: 100px; }
  .app { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
  .statusbar { flex-wrap: wrap; white-space: normal; padding: 8px 0; row-gap: 6px; }
  .statusbar > * + * { border-left: 0; }
  .process { display: none; }
  .menubar { padding: 0 10px; gap: 8px; }
  .brand { order: -1; }
  .navtoggle { order: 1; margin-left: auto; padding: 6px 8px; min-height: 32px; }
  #setuptoggle, #focusviewport, #closesetup { display: none; }
  .vtab { min-height: 36px; }
  .domainbutton { min-height: 36px; }
  .catitem, .shelfhd { min-height: 34px; }
}
@media (max-width: 700px) {
  :root { --menubar-h: 72px; }
  .menubar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 40px 32px; gap: 0 8px; }
  .brand { grid-column: 1; grid-row: 1; order: initial; }
  .panelcontrols { grid-column: 2; grid-row: 1; }
  .sitenav { grid-column: 1 / -1; grid-row: 2; align-self: stretch; margin-left: 0; gap: 4px; border-top: 1px solid var(--rule-2); }
  .sitenav a { flex: 1; border-radius: 3px 3px 0 0; padding: 3px 6px; }
}
@media (max-width: 560px) {
  .sitenav a { font-size: 12px; padding: 3px 5px; }
  .vtab { font-size: 12px; padding: 6px 8px; }
  .vtab svg { display: none; }
  .wordmark { font-size: 22px; }
  .brandsub { font-size: 10px; }
  .dochead { padding: 6px 10px; gap: 5px; }
  .docidentity { flex-basis: 100%; }
  .dochead h2, .dochead .doctitle { font-size: 18px; }
  .circuitreuse { margin-left: 0; }
  .reuseactions { left: 0; right: auto; }
}
@media (prefers-reduced-motion: reduce) { .library, .chev { transition: none; } }

/* ---------- document pages: the same chrome around a scrolling document ----------
   Methodology, Showcase and About keep the menu bar, dock and status bar of the
   workbench; their content scrolls in the middle, on the canvas. */
body .app.docapp { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--menubar-h) minmax(0, 1fr) auto var(--status-h); grid-template-areas: "menu" "doc" "dock" "status"; }
.docapp > .docpage { grid-area: doc; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--canvas); }
.docapp > .run-dock { grid-row: 3; }
@media (max-width: 899px) {
  body .app.docapp { grid-template-rows: var(--menubar-h) auto auto auto; grid-template-areas: "menu" "doc" "dock" "status"; padding-bottom: 0; }
  .docapp > .docpage { overflow: visible; }
}