/* Element by Element · a drafting table. Four sections along the top; in "How it works" the model
   sits large on a millimetre grid, the text and its controls in a reading pane on the right, and
   the eight stages along the bottom as live thumbnails of what each one produces.
   Colour roles: amber is only the interface (selection, focus, primary button); blue is a fixed
   value; vermilion is a load; fields use viridis for magnitudes and a blue-red map for signs.
   Radii: controls 6px, surfaces 10px. */

@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/archivo-latin-var.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/spectral-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/spectral-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}

/* dark: a blueprint */
:root{
  --ink:#0E1726; --panel-solid:#121E33; --line:#2A3B5C; --chip:rgba(14,23,38,.82);
  --text:#E9EEF7; --dim:#A7B3CA; --faint:#8794AE; --acc:#E8A33D; --acc-ink:#1A1206; --acc-soft:rgba(232,163,61,.16);
  --mesh:#24365A; --wire:#9FB4D8; --done:#5C4A2E;
  --bc-fix:#5B9BFF; --bc-fix-soft:rgba(91,155,255,.16); --bc-load:#F06A43;
  --grid:#1C2C49; --grid-major:#34507F;
  --term:#0A1120; --term-ink:#C9D4EA; --term-str:#7FD1A8;
  --fd:"Archivo",system-ui,sans-serif; --fb:"Spectral",Georgia,serif; --fm:"JetBrains Mono",ui-monospace,monospace;
  --top:58px; --gap:16px;
  color-scheme:dark;
}
/* light: drafting film, re-derived for contrast rather than inverted */
:root[data-theme="light"]{
  --ink:#EEF2F6; --panel-solid:#F8FAFD; --line:#C6D1E1; --chip:rgba(255,255,255,.9);
  --text:#0E1A30; --dim:#33445F; --faint:#55657E; --acc:#9A5A00; --acc-ink:#FFF8EE; --acc-soft:rgba(154,90,0,.12);
  --mesh:#CBD8EC; --wire:#3E5684; --done:#E9CFA3;
  --bc-fix:#1F5FD1; --bc-fix-soft:rgba(31,95,209,.14); --bc-load:#C2410C;
  --grid:#D5DEEA; --grid-major:#AEBDD3;
  --term:#F2F5FA; --term-ink:#1B2A44; --term-str:#1E7B4E;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--fb);font-size:17px;line-height:1.6;overflow-x:hidden}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:8px;z-index:40;background:var(--acc);color:var(--acc-ink);padding:8px 12px}
.skip:focus{left:8px}

/* ---- top bar ---- */
.top{position:sticky;top:0;z-index:20;height:var(--top);display:flex;align-items:center;gap:16px;padding:0 var(--gap);background:var(--ink);border-bottom:1px solid var(--line)}
.brand{margin:0;font-family:var(--fd);font-weight:650;font-size:20px;letter-spacing:-.01em;white-space:nowrap}
.brand .home{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;border-radius:6px}
.brand .home:hover span{color:var(--acc)}
.brand .mark{width:28px;height:28px;flex:none}
#sections{display:flex;gap:2px;flex:1;min-width:0;justify-content:center}
#sections button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 10px;cursor:pointer;color:var(--dim);font-family:var(--fd);font-size:15px;min-height:40px;white-space:nowrap}
#sections button:hover{color:var(--text)}
#sections button[aria-current="page"]{color:var(--text);border-bottom-color:var(--acc)}
.tools{display:flex;gap:8px;align-items:center}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--chip)}
.seg button{background:none;border:0;padding:6px 10px;cursor:pointer;color:var(--dim);font-family:var(--fm);font-size:12px;min-height:34px}
.seg button+button{border-left:1px solid var(--line)}
.seg.stack{display:grid;width:100%}
.seg.stack button{text-align:left}
.seg.stack button+button{border-left:0;border-top:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--acc);color:var(--acc-ink)}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]:hover{color:var(--acc-ink)}
.tog{background:var(--chip);border:1px solid var(--line);border-radius:6px;padding:7px 12px;cursor:pointer;color:var(--dim);font-family:var(--fm);font-size:12px;min-height:36px}
.tog:hover{color:var(--text)}
.tog.icon{width:36px;padding:0;display:grid;place-items:center}
.tog.icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.tog.icon .dot{fill:currentColor;stroke:none}
#btnTheme .sun{display:none}
#btnTheme[aria-pressed="true"] .sun{display:inline}
#btnTheme[aria-pressed="true"] .moon{display:none}
.tog.go{border-color:var(--acc);color:var(--acc);font-family:var(--fd);font-size:14px;font-weight:600}
.tog.go:hover{background:var(--acc);color:var(--acc-ink)}
.tog.back{font-family:var(--fd);font-size:14px}
.tog:disabled{opacity:.35;cursor:default}
.tog.go:disabled:hover{background:var(--chip);color:var(--acc)}

/* ---- How it works: the workbench ---- */
.work{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,38%);grid-template-rows:minmax(0,1fr) auto;height:calc(100dvh - var(--top))}
.stagewrap{position:relative;grid-column:1;grid-row:1;min-height:0;overflow:hidden}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
#scene:active{cursor:grabbing}
#noGl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:420px;margin:0;padding:14px 18px;background:var(--panel-solid);color:var(--dim);border:1px solid var(--line);border-radius:10px;text-align:center}
.chip{position:absolute;left:12px;top:12px;z-index:2;display:flex;align-items:center;gap:8px;background:var(--chip);border:1px solid var(--line);border-radius:6px;padding:7px 12px;cursor:pointer;font-family:var(--fd);font-size:15px;font-weight:600;min-height:40px}
.chip:hover{border-color:var(--acc)}
.chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.legend{position:absolute;left:12px;bottom:44px;z-index:2;width:min(240px,40%);background:var(--chip);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-family:var(--fm);font-size:12px;color:var(--dim)}
.legendtext{border-left:3px solid var(--line);padding-left:10px}
.bar{display:block;width:100%;height:30px}
.scalebar{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:8px;font-family:var(--fm);font-size:12px;color:var(--dim)}
.scalebar i{display:block;height:6px;border:1.5px solid var(--text);border-top:0}
#zoom{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;gap:4px}
#zoom button{width:38px;height:38px;display:grid;place-items:center;background:var(--chip);border:1px solid var(--line);border-radius:6px;cursor:pointer;color:var(--dim)}
#zoom button:hover{color:var(--text)}
#zoom svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.pane{grid-column:2;grid-row:1 / span 2;overflow:auto;border-left:1px solid var(--line);background:var(--panel-solid);padding:20px 24px 24px}
#title{font-family:var(--fd);font-weight:650;font-size:27px;line-height:1.15;letter-spacing:-.01em;margin:0 0 12px}
.what{font-family:var(--fd);font-size:15px;border-left:3px solid var(--acc);padding-left:12px;margin:0 0 12px}
.body{margin:0 0 12px;max-width:65ch}
.math{margin:4px 0 8px;overflow-x:auto}
.math math{font-size:1.08em;margin:6px 0}
.math .lk{background:var(--acc-soft);border-radius:4px;cursor:help;padding:0 2px}
.math .lk:hover,.math .lk:focus{background:var(--acc);color:var(--acc-ink);outline:none}
.hint{color:var(--faint);font-family:var(--fm);font-size:12px;margin:4px 0 12px}
.fact{color:var(--dim);font-size:15px;font-style:italic;margin:14px 0}
.steps{display:flex;justify-content:space-between;gap:10px;margin-top:6px}
.alert{color:var(--bc-load);border:1px solid var(--bc-load);border-radius:6px;padding:8px 10px;margin:0 0 10px;font-family:var(--fm);font-size:13px}

/* controls and numbers, in the pane under the text that explains them */
#ctl,#conds,#numbers{font-family:var(--fm);font-size:12.5px;line-height:1.5}
#ctl{margin-top:14px}
.field{display:block;margin:0 0 12px}
.field .lab,.lab{display:flex;justify-content:space-between;gap:8px;color:var(--faint);margin-bottom:5px;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.field output{color:var(--text);text-transform:none;letter-spacing:0}
.field.chk{display:flex;gap:8px;align-items:center;color:var(--dim);cursor:pointer}
.field.chk input{width:18px;height:18px;accent-color:var(--acc);margin:0}
input[type=range]{width:100%;accent-color:var(--acc);margin:4px 0;min-height:24px}
#numbers{margin-top:8px;border-top:1px solid var(--line);padding-top:10px}
#numbers summary{cursor:pointer;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;font-size:12px;margin-bottom:8px}
#read{margin:0;display:grid;grid-template-columns:auto auto;gap:3px 12px}
#read dt{color:var(--dim)}
#read dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
#plotWrap{margin:12px 0 0}
#plotWrap figcaption{color:var(--faint);font-size:12px;margin-bottom:6px}
#plot{display:block;width:100%;height:210px}
table.mat{border-collapse:collapse;font-size:11.5px;margin:4px 0 8px;width:100%}
table.mat td{padding:2px 4px;text-align:right;border:1px solid var(--line);font-variant-numeric:tabular-nums}

/* the conditions inspector, one row per condition, each with its drawing symbol */
.conds{width:100%;border-collapse:collapse;margin:6px 0 12px}
.conds caption{text-align:left;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;font-size:12px;padding-bottom:6px}
.conds td{padding:6px 4px;vertical-align:middle}
.conds tr:hover,.conds tr:focus-within{background:var(--acc-soft)}
.conds .reg{color:var(--dim);white-space:nowrap}
.conds .field{margin:0}
.sw{display:inline-block;width:26px;height:14px;border-radius:2px;vertical-align:middle}
.sw.k-clamp{background:repeating-linear-gradient(135deg,var(--bc-fix) 0 2px,transparent 2px 6px);border-left:3px solid var(--bc-fix)}
.sw.k-roller{border-bottom:3px solid var(--bc-fix);background:radial-gradient(circle at 30% 70%,var(--bc-fix) 2px,transparent 3px),radial-gradient(circle at 70% 70%,var(--bc-fix) 2px,transparent 3px)}
.sw.k-symmetry{border-top:2px dashed var(--bc-fix);height:8px}
.sw.k-free,.sw.k-insulated{border-top:2px dashed var(--faint);height:8px}
.sw.k-traction{background:linear-gradient(90deg,transparent 0 40%,var(--bc-load) 40% 100%);height:4px}
.sw.k-fixed,.sw.k-temperature{background:linear-gradient(90deg,#440154,#31688e,#35b779,#fde725)}
.sw.k-initial{background:linear-gradient(90deg,#fde725,#35b779);border-left:3px solid var(--text)}
.sw.k-material{background:repeating-conic-gradient(var(--wire) 0 25%,transparent 0 50%) 0 0/7px 7px}
.sw.k-source{border:3px solid var(--bc-load);border-radius:50%;width:14px}
.sw.k-convection{border-top:3px dashed var(--bc-load);height:8px}

/* ---- the filmstrip: what each stage produces ---- */
.film{grid-column:1;grid-row:2;display:flex;gap:6px;overflow-x:auto;padding:8px 10px;border-top:1px solid var(--line);background:var(--panel-solid)}
.film button{flex:1 0 92px;display:flex;flex-direction:column;gap:4px;background:var(--chip);border:1px solid var(--line);border-radius:6px;padding:6px;cursor:pointer;color:var(--dim);font-family:var(--fm);font-size:12px;text-align:left;min-height:44px}
.film button:hover{color:var(--text);border-color:var(--wire)}
.film button[aria-current="step"]{border-color:var(--acc);color:var(--text);box-shadow:inset 0 -2px 0 var(--acc)}
.film canvas{width:100%;height:56px;display:block}

/* ---- A full job: one screen, the object left, the reading pane right, the terminal below ---- */
.job{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,36%);grid-template-rows:minmax(0,1fr) minmax(160px,30%);height:calc(100dvh - var(--top))}
.jobwrap{position:relative;grid-column:1;grid-row:1;min-height:0;overflow:hidden}
#jobScene{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
#jobScene:active{cursor:grabbing}
.chip.still{cursor:default;margin:0}
.chip.still:hover{border-color:var(--line)}
.nogl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:420px;margin:0;padding:14px 18px;background:var(--panel-solid);color:var(--dim);border:1px solid var(--line);border-radius:10px;text-align:center}
.zoom{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;gap:4px}
.zoom button{width:38px;height:38px;display:grid;place-items:center;background:var(--chip);border:1px solid var(--line);border-radius:6px;cursor:pointer;color:var(--dim)}
.zoom button:hover{color:var(--text)}
.zoom button[aria-pressed="true"]{color:var(--acc);border-color:var(--acc)}
.help{position:absolute;right:12px;top:12px;z-index:2;margin:0;padding:8px 10px;list-style:none;background:var(--chip);border:1px solid var(--line);border-radius:10px;font-family:var(--fm);font-size:11.5px;color:var(--dim);display:grid;gap:3px}
.help li{display:flex;align-items:center;gap:7px}
.help svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
table.mats{border-collapse:collapse;width:100%;margin:6px 0 10px;font-size:12px}
table.mats th{text-align:left;font-weight:500;color:var(--dim);padding:3px 6px 3px 0}
table.mats thead th{color:var(--faint);text-transform:uppercase;letter-spacing:.04em;font-size:11px;text-align:right}
table.mats td{text-align:right;padding:3px 6px;font-variant-numeric:tabular-nums;border-top:1px solid var(--line)}
table.mats td.u{color:var(--faint);text-align:left;padding-left:4px}
#jobTables{margin-top:10px}
#jobTables .lab{margin:10px 0 4px}
#jobTables figure{margin:12px 0 0}
#jobTables figcaption{color:var(--faint);font-size:12px;margin-bottom:6px}
#jobConv{display:block;width:100%;height:170px}
.zoom svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.job .pane{grid-row:1 / span 2}
.job .legend{bottom:12px}
.rail{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 14px}
.rail button{background:var(--chip);border:1px solid var(--line);border-radius:6px;padding:5px 8px;cursor:pointer;color:var(--dim);font-family:var(--fm);font-size:12px;min-height:32px}
.rail button:hover{color:var(--text);border-color:var(--wire)}
.rail button[aria-current="step"]{border-color:var(--acc);color:var(--text);box-shadow:inset 0 -2px 0 var(--acc)}
.rail button span{color:var(--faint)}
#jobCtl,#jobNumbers{font-family:var(--fm);font-size:12.5px;line-height:1.5}
#jobCtl{margin-top:14px}
#jobNumbers{margin-top:8px;border-top:1px solid var(--line);padding-top:10px}
#jobNumbers summary{cursor:pointer;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;font-size:12px;margin-bottom:8px}
#jobRead{margin:0;display:grid;grid-template-columns:auto auto;gap:3px 12px}
#jobRead dt{color:var(--dim)}
#jobRead dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
#jobPlotWrap{margin:12px 0 0}
#jobPlotWrap figcaption{color:var(--faint);font-size:12px;margin-bottom:6px}
#jobPlot{display:block;width:100%;height:200px}
#jobCtl a.tog{display:inline-block;text-decoration:none}
.term{grid-column:1;grid-row:2;display:flex;flex-direction:column;min-height:0;border-top:1px solid var(--line);background:var(--term)}
.termbar{display:flex;align-items:center;gap:10px;padding:6px 12px;font-family:var(--fm);font-size:12px;color:var(--faint);border-bottom:1px solid var(--line)}
.termbar span{flex:1}
.termbar a{text-decoration:none}
#jobTermToggle{display:none}
#jobTerm{flex:1;margin:0;padding:10px 14px;overflow:auto;font-family:var(--fm);font-variant-ligatures:none;font-size:12.5px;line-height:1.5;color:var(--term-ink);white-space:pre;tab-size:4}
#jobTerm .p{color:var(--acc)}
#jobTerm .c{color:var(--faint)}
#jobTerm .k{color:var(--bc-fix)}
#jobTerm .s{color:var(--term-str)}
#jobTerm .n{color:var(--text)}
#jobTerm .r{color:var(--acc);font-weight:500}

/* ---- the other sections: documents ---- */
.doc{max-width:1120px;margin:0 auto;padding:28px var(--gap) 64px}
.doc h1{font-family:var(--fd);font-weight:650;font-size:32px;letter-spacing:-.01em;margin:0 0 10px}
.doc h2{font-family:var(--fd);font-weight:650;font-size:22px;margin:0 0 8px}
.doc h3{font-family:var(--fd);font-weight:600;font-size:17px;margin:0 0 6px}
.doc .lead{max-width:70ch;color:var(--dim);margin:0 0 24px}
.doc p{max-width:68ch}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-auto-flow:dense;gap:16px}
.tile{border:1px solid var(--line);border-radius:10px;padding:16px;background:var(--panel-solid);display:flex;flex-direction:column;gap:8px}
.tile.live{grid-column:span 2}
.tile .badge{font-family:var(--fm);font-size:12px;color:var(--faint)}
.tile.live .badge{color:var(--acc)}
.tile .hardp{font-size:15px;color:var(--dim)}
.tile .hardp b{font-family:var(--fd);font-weight:600;color:var(--text)}
.tile .math{font-size:15px}
.models{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.models button{display:flex;flex-direction:column;gap:4px;background:var(--chip);border:1px solid var(--line);border-radius:6px;padding:6px;cursor:pointer;font-family:var(--fd);font-size:14px;text-align:left;min-height:44px}
.models button:hover{border-color:var(--acc)}
.models canvas{width:100%;height:84px;display:block}
.part{border-top:1px solid var(--line);padding:24px 0}
.part .fig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.part canvas.chart{width:100%;height:240px;display:block}
.part canvas.thumb{width:100%;height:200px;display:block}
.part .ctl{font-family:var(--fm);font-size:12.5px;max-width:560px}
table.data{border-collapse:collapse;font-family:var(--fm);font-size:12.5px;width:100%}
table.data th{text-align:right;color:var(--faint);font-weight:500;padding:4px 8px;border-bottom:1px solid var(--line)}
table.data th:first-child,table.data td:first-child{text-align:left}
table.data td{text-align:right;padding:4px 8px;font-variant-numeric:tabular-nums}
table.data tr.ok td:last-child{color:var(--acc)}
ol.chain{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
ol.chain li{border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--panel-solid);position:relative}
ol.chain li+li::before{content:"\2192";position:absolute;left:-14px;top:12px;color:var(--faint)}

/* ---- dialogs ---- */
.dlg{max-width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px);background:var(--panel-solid);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:22px 26px}
.dlg::backdrop{background:rgba(5,8,16,.6)}
.dlg h2{font-family:var(--fd);margin:0 0 12px}
.dlg h3{font-family:var(--fd);font-size:16px;margin:16px 0 4px}
.dlg p,.dlg li{color:var(--dim)}
.dlg a{color:var(--acc)}
.dlgx{position:absolute;right:12px;top:10px;background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--dim);width:40px;height:40px}
.dtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:8px}
.dtabs button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 10px;cursor:pointer;color:var(--dim);font-family:var(--fm);font-size:12.5px}
.dtabs button[aria-selected="true"]{color:var(--acc);border-bottom-color:var(--acc)}
.refs li{margin-bottom:6px;font-size:15px}
.more{display:flex;gap:16px;flex-wrap:wrap;padding:0;list-style:none;margin-top:18px;font-family:var(--fm);font-size:12.5px}
#gallery .tiles{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

/* ---- not found ---- */
.nf{max-width:560px;margin:18vh auto 0;padding:0 20px}
.nf h1{font-family:var(--fd)}
.nf a.tog{display:inline-block;text-decoration:none}

@media (max-width:1100px){#sections button{font-size:14px;padding:8px 6px}.tile.live{grid-column:auto}}
@media (max-width:980px){.part .fig{grid-template-columns:1fr}ol.chain{grid-template-columns:1fr}ol.chain li+li::before{content:none}}

/* phones and narrow windows: one scrolling column, the model on top */
@media (max-width:860px){
  :root{--top:auto}
  .top{flex-wrap:wrap;height:auto;padding:8px 16px;gap:8px 12px}
  .brand{font-size:18px;flex:1}
  #sections{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto}
  .tools{display:contents} #btnTheme,#btnAbout{order:1} #level,#lang{order:2} .top .seg{flex-wrap:nowrap}
  .work{display:flex;flex-direction:column;height:auto}
  .stagewrap{order:1} .film{order:2} .pane{order:3}
  .scalebar{left:auto;right:12px;bottom:auto;top:16px}
  .legend{bottom:66px}
  .stagewrap{height:56vh;min-height:300px}
  .film{scroll-snap-type:x mandatory}
  .film button{flex:0 0 104px;scroll-snap-align:start}
  .pane{border-left:0;border-top:1px solid var(--line)}
  #title,#jobTitle{font-size:24px}
  .job{display:flex;flex-direction:column;height:auto}
  .jobwrap{order:1;height:50vh;min-height:280px} .job .pane{order:2} .term{order:3;min-height:0} .job .legend{bottom:66px} .termbar{flex-wrap:wrap}
  #jobTermToggle{display:inline-block} #jobTerm{display:none;max-height:50vh} .term.open #jobTerm{display:block}
  .help{display:none}
  .legend{width:min(200px,55%)}
}
@media (pointer:coarse){.hint.how{display:none}
  .seg button,.tog,#sections button{min-height:44px} .tog.icon,#zoom button{width:44px;height:44px}}
@media (prefers-reduced-motion:no-preference){.tog:active:not(:disabled),.seg button:active,#zoom button:active,.film button:active{transform:translateY(1px)}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}