/* Chip Sim, the page. The sheets, plates, tables and buttons are the kit's (ui/sheet.css); what is here is the page's own:
   where the sheet sits, and what is drawn inside its view plates (the sketch editor, the console, the logic view, the
   display, the parts' controls, the pins). Only the sheet's tokens (--paper, --ink, --ink-light, --rule, --dim, --hot,
   --alarm, --good-ink, --warn, --mono): no colour of its own. Sizes on a sheet are shares of its width (cqw). */
[hidden] { display:none !important; }
body.zu-page { background:var(--desk); }
.zu-account:empty { display:none; }
#sheets { min-width:0; height:calc(100dvh - var(--topbar)); }          /* --topbar: the kit's (tokens.css), the same on every page */
.cs-page .zs-sheet__foot { min-height:9cqw; }
/* a view plate's box fills its plate: the views below are laid out inside it */
.cs-page .zs-plate__body > .zs-view { position:absolute; inset:0; }

.cs-view { position:absolute; inset:0; display:flex; flex-direction:column; color:var(--ink); font-size:1.05cqw; min-height:0; }
.cs-view .cs-bar { display:flex; gap:.5cqw; align-items:center; flex-wrap:wrap; padding:.3cqw 0; }
.cs-view .cs-bar select, .cs-view .cs-bar button, .cs-view .cs-bar input { font:inherit; color:var(--ink); background:var(--paper); border:var(--pen-thin) solid var(--rule); padding:.2cqw .5cqw; }
.cs-view .cs-bar button { color:var(--dim); border-color:var(--dim); cursor:pointer; }
.cs-view .cs-bar button.on { color:var(--hot); border-color:var(--hot); }
.cs-view .cs-small { color:var(--ink-light); font-size:.9cqw; }

/* the sketch editor */
.cs-editor { flex:1; min-height:0; width:100%; resize:none; font-family:var(--mono); font-size:.95cqw; line-height:1.35; color:var(--ink); background:var(--paper);
  border:var(--pen-thin) solid var(--rule); padding:.5cqw; tab-size:2; white-space:pre; overflow:auto; }

/* the serial console */
.cs-console { flex:1; min-height:0; overflow:auto; font-family:var(--mono); font-size:.9cqw; line-height:1.3; white-space:pre-wrap; overflow-wrap:anywhere;
  border:var(--pen-thin) solid var(--rule); padding:.4cqw; background:var(--paper); }
.cs-console .uart { color:var(--ink-light); }
.cs-console .sim { color:var(--dim); }
.cs-console .err { color:var(--alarm); }
.cs-send { display:flex; gap:.4cqw; padding-top:.3cqw; }
.cs-send input { flex:1; min-width:0; font-family:var(--mono); }   /* (an input is ~20 characters wide by default: Send ran past a phone's plate) */

/* the logic view and the display */
/* the logic view: one finger on a touch screen scrolls the page (the site's gesture rule; the kit's ZuTouch sets the same),
   two pinch and slide it (js/app.js); a mouse drags it */
.cs-canvas { flex:1; min-height:0; width:100%; display:block; border:var(--pen-thin) solid var(--rule); background:var(--paper); touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.cs-display { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; container-type:size; }
/* round whatever the plate's shape: the smaller of its width and height, less room for the outline (a share of the plate) */
.cs-display canvas { --d:calc(min(100cqw, 100cqh) * .96 - 4px); width:var(--d); height:var(--d); flex:none; border-radius:50%; outline:1px solid var(--rule); outline-offset:2px; }

/* the parts' controls */
.cs-controls { flex:1; overflow:auto; min-height:0; }
.cs-controls fieldset { border:var(--pen-thin) solid var(--rule); margin:0 0 .5cqw; padding:.3cqw .5cqw .5cqw; min-width:0; }   /* (a fieldset is min-content wide by default: it ran past the plate) */
.cs-controls legend { font-weight:600; padding:0 .3cqw; }
.cs-controls label { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:.2cqw .5cqw; align-items:center; margin:.25cqw 0; }
.cs-controls input[type=range] { grid-column:1 / -1; width:100%; accent-color:var(--dim); }
.cs-controls select, .cs-controls button { font:inherit; color:var(--dim); background:var(--paper); border:var(--pen-thin) solid var(--dim); padding:.15cqw .4cqw; }
.cs-controls button { cursor:pointer; width:100%; margin-top:.2cqw; }
.cs-controls button.held { color:var(--hot); border-color:var(--hot); }
.cs-controls .val { font-family:var(--mono); color:var(--dim); }
.cs-controls .state { font-family:var(--mono); font-size:.85cqw; color:var(--ink-light); white-space:pre-wrap; margin-top:.2cqw; }
/* a part's name folds its controls away */
.cs-controls button.cs-fold { width:auto; margin:0; padding:0; border:0; background:none; color:var(--ink); font-weight:600; text-align:left; }
.cs-controls button.cs-fold::before { content:'▾ '; color:var(--ink-light); }
.cs-controls fieldset.folded button.cs-fold::before { content:'▸ '; }
.cs-controls fieldset.folded > :not(legend) { display:none; }
.cs-controls fieldset.folded { padding-bottom:0; }

/* the pins */
.cs-pins { flex:1; overflow:auto; min-height:0; }
.cs-pins table { border-collapse:collapse; width:100%; font-size:.95cqw; }
.cs-pins th, .cs-pins td { text-align:left; padding:.15cqw .4cqw; border-bottom:var(--pen-faint) solid var(--rule); }
.cs-pins td.lv { font-family:var(--mono); }
.cs-pins td.lv.hi { color:var(--hot); }
.cs-pins tr.free td { color:var(--ink-light); }

/* on a phone (a portrait sheet, the kit's SHEETS.md 16): the views take a phone's lettering, not a share of the sheet's
   width, and everything to touch is a fingertip (44 px, the kit's --tap there) high; a box being typed in is 16 px, so the
   phone does not zoom the page into it. The sketch wraps its long lines at the plate's width (nothing to scroll sideways). The parts and the pins are as tall as they are (portrait height 'auto'), the page scrolls past them. */
.zs-wrap.is-portrait .cs-view { font-size:14px; }
.zs-wrap.is-portrait .cs-view .cs-small { font-size:12.5px; }
.zs-wrap.is-portrait .cs-view .cs-bar { gap:8px; padding:4px 0 8px; }
.zs-wrap.is-portrait .cs-view .cs-bar :is(select, button, input) { min-height:44px; min-width:44px; padding:0 10px; }
.zs-wrap.is-portrait .cs-view .cs-bar select { font-size:16px; }
.zs-wrap.is-portrait .cs-editor { font-size:16px; padding:8px; white-space:pre-wrap; overflow-wrap:anywhere; overflow-x:hidden; }
.zs-wrap.is-portrait .cs-console { font-size:12.5px; padding:6px; }
.zs-wrap.is-portrait .cs-send { gap:8px; padding-top:8px; }
.zs-wrap.is-portrait .cs-send :is(input, button) { min-height:44px; font-size:16px; padding:0 10px; }
.zs-wrap.is-portrait .zs-plate.is-auto .cs-view { position:relative; inset:auto; }
.zs-wrap.is-portrait .cs-controls, .zs-wrap.is-portrait .cs-pins { overflow:visible; }
.zs-wrap.is-portrait .cs-controls { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:8px; }
.zs-wrap.is-portrait .cs-controls fieldset { grid-column:1 / -1; min-width:0; margin:0 0 10px; padding:6px 10px 10px; }
.zs-wrap.is-portrait .cs-controls fieldset.cs-switch { grid-column:auto; padding:4px 6px 8px; }     /* the three push buttons, side by side */
.zs-wrap.is-portrait .cs-controls fieldset.cs-switch button:not(.cs-fold) { padding:4px 6px; line-height:1.2; }
.zs-wrap.is-portrait .cs-controls button.cs-fold { min-height:44px; margin:0; padding:0 4px; font-size:14px; }
.zs-wrap.is-portrait .cs-controls fieldset.cs-switch button.cs-fold { min-height:32px; font-size:12.5px; pointer-events:none; }  /* (a push button's name only names it) */
.zs-wrap.is-portrait .cs-controls fieldset.cs-switch button.cs-fold::before { content:none; }
.zs-wrap.is-portrait .cs-controls legend { padding:0 6px; }
.zs-wrap.is-portrait .cs-controls label { gap:4px 10px; margin:8px 0; }
.zs-wrap.is-portrait .cs-controls input[type=range] { height:44px; margin:0; }
.zs-wrap.is-portrait .cs-controls select { min-height:44px; font-size:16px; padding:0 8px; }
.zs-wrap.is-portrait .cs-controls button { min-height:44px; margin-top:6px; padding:0 10px; }
.zs-wrap.is-portrait .cs-controls .state { font-size:12.5px; margin-top:6px; }
.zs-wrap.is-portrait .cs-pins table { font-size:13px; }
.zs-wrap.is-portrait .cs-pins :is(th, td) { padding:6px 8px; }
/* a button held while pressed: a finger on it neither scrolls the page nor selects its words */
.cs-controls button.hold { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }