/* The device's own monospace, everywhere: the OS renders its font best on its screen. ?font=N sets the terminal size. */
/* "paper": for e-ink and daylight — ?theme=light, the ☼ button, or the OS setting */
body.light{--bg:#fff;--fg:#111;--bar:#f2f2f2;--line:#ccc;--btn:#fafafa;--btn-fg:#111;--btn-line:#999;--btn-hover:#e6e6e6;--ok:#063;--err:#a00;--term:#fff;--accent:#036;--cell:#fff;--log:#222}
html,body{height:100%;margin:0;font:14px/1.3 system-ui,sans-serif;background:var(--bg);color:var(--fg)}
html{touch-action:pan-x pan-y}   /* no page pinch, no double-tap zoom: a surface zooms itself (zoom.js); Safari also needs gesturestart (app.js) */
body{display:flex;flex-direction:column}
/* The bar (DESIGN.org Panes → The status box). Buttons are flex: 0 0 auto — natural width, never shrunk, never grown;
   the status box is a reserved 40ch × 2 lines, so neither side has a pixel to give the other. One row, always: a row
   too narrow for it all (under ~90 terminal columns) scrolls sideways rather than wrapping — the bar never grows. */
#bar{display:flex;flex-wrap:nowrap;gap:.35em;align-items:center;padding:.3em .5em;overflow-x:auto;scrollbar-width:none;background:var(--bar);border-bottom:1px solid var(--line)}
#bar::-webkit-scrollbar{display:none}
#bar>*,#surfaces>*{flex:0 0 auto}   /* #surfaces is display:contents — its buttons are bar items too */
@media (max-width: 900px){#bar>strong{display:none}}   /* the name gives way first (iPad upright) */
#bar button{font:inherit;padding:.2em .5em;background:var(--btn);color:var(--btn-fg);border:1px solid var(--btn-line);border-radius:3px;cursor:pointer}
#bar button:hover{background:var(--btn-hover)}
#bar button[hidden]{display:none}
#surfaces{display:contents}
#surfaces .sel{border-color:var(--btn-fg);box-shadow:inset 0 0 0 1px var(--btn-fg)}   /* the surface showing: a 2px border, no layout shift */
#login.in{color:var(--ok)}
#login.dirty::after{content:" ●";color:var(--accent)}
/* the status box: two lines of 40 columns in its own font (ch = its cell). Line 1 = state (sticky), line 2 = activity (transient). */
#status{flex:0 0 40ch;height:2.6em;overflow:hidden;margin-left:auto;font:13px/1.3 monospace;color:var(--ok);white-space:pre}   /* 2.6em = 2 lines × 1.3 (lh is too new for the Boox) */
#status .activity{display:block;color:var(--log)}
#status .activity.err{color:var(--err)}
#panes{flex:1;display:flex;min-height:0;flex-direction:row}
@media (orientation: portrait){#panes{flex-direction:column}}   /* iPad held upright: stack */
.pane{flex:1 1 50%;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.pane[hidden]{display:none}
/* the render view (view.js): one iframe that never moves; CSS order puts it in slot 1 or 2 */
#viewpane{order:1;position:relative;background:var(--term)}
#viewpane.first{order:-1}
/* M-o keys (app.js): % and " force the direction the split runs in, whatever the
   orientation; C-o swaps the two shells by flex order. The class is on #panes. */
#panes.lr{flex-direction:row}
#panes.tb{flex-direction:column}
#panes.swapped .pane:first-child{order:2}
#panes.swapped #pane2{order:0}
.surface{position:absolute;inset:0;overflow:hidden;background:var(--term)}   /* out of the flow: a surface can never resize its pane */
.surface[hidden]{display:none}
#mmd iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--term)}
#svgview{position:fixed;left:-20000px;top:0;width:1200px;height:900px;overflow:hidden}   /* org2html's render view: off-screen, not display:none (Mermaid measures text) */
#svgview iframe{width:100%;height:100%;border:0}
/* plot (plot.js): the chart, centred, Plot's own figure; text and axes take the theme's colour */
#plot .chart{position:absolute;inset:0;padding:24px;box-sizing:border-box;overflow:auto;color:var(--fg);font:13px/1.3 system-ui,sans-serif}
#plot .chart figure{margin:0}
#plot .chart h2{font:600 16px/1.3 system-ui,sans-serif;margin:0 0 8px}
#plot .chart .note{margin:0;font:13px/1.4 monospace;white-space:pre-wrap;color:var(--log)}
/* squiz (squiz.js): the file at fit, then zoom.js */
#squiz .content{position:absolute;inset:0;padding:4px;box-sizing:border-box}
#squiz img,#squiz video{max-width:100%;max-height:100%;display:block;user-select:none;-webkit-user-drag:none}
#squiz iframe{width:100%;height:100%;border:0;background:#fff}
#squiz pre{margin:0;font:13px/1.4 monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--log)}
#squiz .note{margin:0;color:var(--err)}
/* grid (grid.js): Tabulator's simple theme, recoloured with the page's variables so both themes hold; org's hlines as rules */
#grid:not([hidden]){display:flex;flex-direction:column}
#grid .table{position:relative;flex:1 1 auto;min-height:0}
#grid .find{flex:0 0 auto;font:13px/1.4 monospace;padding:2px 6px;border:0;border-top:1px solid var(--line);background:var(--cell);color:var(--fg);outline:0}
#grid .find[hidden]{display:none}
#grid .formulas{flex:0 0 auto;font:13px/1.4 monospace;padding:2px 6px;border:0;border-top:1px solid var(--accent);background:var(--cell);color:var(--fg);outline:0;resize:none;white-space:pre}   /* C-c ': one formula per line */
#grid .formulas[hidden]{display:none}
#grid .tblfm{flex:0 0 auto;font:12px/1.4 monospace;padding:2px 6px;border-top:1px solid var(--line);color:var(--log);white-space:pre;overflow-x:auto}   /* the derived #+TBLFM: line */
#grid .tabulator-cell.formula::after{content:"";position:absolute;right:2px;top:2px;width:5px;height:5px;border-radius:50%;background:var(--accent)}      /* ruled by the column's formula */
#grid .tabulator-cell.field-formula::after{background:transparent;border:1px solid var(--accent);width:4px;height:4px}                                    /* its own formula */
#grid .tabulator-cell.ref{box-shadow:inset 0 0 0 2px var(--accent)}                                        /* a cell the formula being edited names */
#grid .tabulator-cell.flash{animation:grid-flash 1.2s ease-out}                                            /* a refused edit: the cell says so, not only the status box */
@keyframes grid-flash{0%,45%{background:var(--err);color:var(--bg)}100%{background:transparent}}
#grid .tabulator-col.has-formula .tabulator-col-title{color:var(--accent);font-weight:600}
#grid .tabulator-col .tabulator-col-title{cursor:text}
.tabulator-menu{background:var(--bar);color:var(--fg);border:1px solid var(--line);font:13px/1.4 monospace}   /* the grid's right-click menu (Tabulator appends it to body) */
.tabulator-menu .tabulator-menu-item{color:var(--fg)}
.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover{background:var(--btn-hover)}
.tabulator-menu .tabulator-menu-separator{border-top:1px solid var(--line)}
#grid .tabulator,#grid .tabulator-header,#grid .tabulator-col,#grid .tabulator-row,#grid .tabulator-cell{background:var(--term);color:var(--fg);border-color:var(--line)}
#grid .tabulator-header .tabulator-col,#grid .tabulator-row .tabulator-cell.tabulator-frozen{background:var(--bar)}
#grid .tabulator-row.tabulator-row-even{background:var(--term)}
#grid .tabulator-cell.tabulator-editing{border-color:var(--accent);background:var(--cell)}
#grid .tabulator-cell.tabulator-editing input{background:var(--cell);color:var(--fg);font:inherit}
#grid .tabulator-range-overlay .tabulator-range{border-color:var(--accent)}
#grid .tabulator-range-overlay .tabulator-range.tabulator-range-active::after{background:var(--accent)}
#grid .tabulator-range-selected{background:var(--btn-hover)}
#grid .hline-after .tabulator-cell{border-bottom:2px solid var(--fg)}
#grid .hline-before .tabulator-cell{border-top:2px solid var(--fg)}
#panes.split #viewpane.first{border-right:1px solid var(--line)}
@media (orientation: portrait){#panes.split #viewpane.first{border-right:0;border-bottom:1px solid var(--line)}}
#panes.split .pane:first-child{border-right:1px solid var(--line)}
@media (orientation: portrait){#panes.split .pane:first-child{border-right:0;border-bottom:1px solid var(--line)}}
#panes.split.lr .pane:first-child{border-right:1px solid var(--line);border-bottom:0}
#panes.split.tb .pane:first-child{border-right:0;border-bottom:1px solid var(--line)}
#panes.split.lr #viewpane.first{border-right:1px solid var(--line);border-bottom:0}
#panes.split.tb #viewpane.first{border-right:0;border-bottom:1px solid var(--line)}
.term{flex:1;min-height:0;padding:4px;background:var(--term)}
/* diagnostics drawer (the "log" button): isolation state, timings, doors, every error */
#log{flex:0 0 30%;overflow:auto;margin:0;padding:.6em;border-top:1px solid var(--line);font:13px/1.4 monospace;white-space:pre-wrap;color:var(--log)}
#log[hidden]{display:none}
#log .err{color:var(--err)}
/* #chart (grid.js → openChart): the chart options, a two-column form of Org Plot's parameters */
#chart{min-width:min(34em,94vw)}
#chart .chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5em .8em;font-size:13px}
#chart .chart-grid label{display:flex;flex-direction:column;gap:.15em}
#chart .chart-grid .wide{grid-column:1/-1}
#chart .chart-grid .checks{display:flex;flex-direction:row;gap:1.2em;flex-wrap:wrap}
#chart .chart-grid .checks label,#chart .deps label{flex-direction:row;align-items:center;gap:.35em}
#chart .deps{display:flex;flex-wrap:wrap;gap:.3em 1em}
#chart fieldset{border:1px solid var(--btn-line);border-radius:3px;margin:0;padding:.3em .6em .5em}
#chart legend{color:var(--log);padding:0 .3em}
#chart input[type=text],#chart select{font:inherit;padding:.2em .4em;background:var(--cell);color:var(--fg);border:1px solid var(--btn-line);border-radius:3px;min-width:0}
#chart .range{display:flex;align-items:center;gap:.3em}
#chart .range input{width:5em}
/* ask.js: a one-button dialog for downloads and folder pickers (browsers want a click) */
.box{border:1px solid var(--btn-line);border-radius:6px;background:var(--bar);color:var(--fg);padding:1em 1.2em;min-width:min(22em,90vw);font:inherit}
.box::backdrop{background:rgba(0,0,0,.45)}
.box-title{margin-bottom:.6em;font-weight:600}
.box-err{min-height:1.2em;margin:.4em 0;color:var(--err);font-size:13px}
.box-buttons{display:flex;gap:.5em;justify-content:flex-end}
.box-buttons button{font:inherit;padding:.25em .8em;background:var(--btn);color:var(--btn-fg);border:1px solid var(--btn-line);border-radius:3px;cursor:pointer}
.box-buttons .primary{border-color:var(--accent)}
#panes.dropping{outline:2px dashed var(--accent);outline-offset:-4px}
/* pinentry: the page is gpg's passphrase box (pinentry.js) */
#pin{border:1px solid var(--btn-line);border-radius:6px;background:var(--bar);color:var(--fg);padding:1em 1.2em;min-width:min(22em,90vw);font:inherit}
#pin::backdrop{background:rgba(0,0,0,.45)}
#pin-title{margin-bottom:.6em;font-weight:600}
#pin input{width:100%;box-sizing:border-box;font:16px monospace;padding:.35em .5em;background:var(--cell);color:var(--fg);border:1px solid var(--btn-line);border-radius:3px}
#pin input:focus{outline:1px solid var(--accent)}
#pin-err{min-height:1.2em;margin:.4em 0;color:var(--err);font-size:13px}
#pin-buttons{display:flex;gap:.5em;justify-content:flex-end}
#pin-buttons button{font:inherit;padding:.25em .8em;background:var(--btn);color:var(--btn-fg);border:1px solid var(--btn-line);border-radius:3px;cursor:pointer}
#pin-ok{border-color:var(--accent)}