/* File Sizes (computer-science/file-sizes.php). The page chrome (header, title bar, toggles,
   dialogs, challenge questions) is the shared one-screen layout in /css/resource.css; this is the
   stage, the stepper and the calculators. Theme tokens only, so it follows light and dark mode
   and every site theme. */

/* ---------- one screen: the chosen topic's chosen mode fills what's left ---------- */
.fs-panel{flex:1;min-height:0;display:flex;flex-direction:column}
.fs-mode{flex:1;min-height:0}
.fs-mode[data-mode="explore"]{padding:14px 16px 12px;display:flex;flex-direction:column;gap:10px}

/* ---------- the stage: one 16:9 area the walk-through draws in, as big as fits ---------- */
.fs-stage-box{height:min(52vw,72vh);container-type:size;display:grid;place-items:center}
.fs-stage{position:relative;width:min(100cqw,calc(100cqh * 16 / 9));aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line);container-type:inline-size}
.fs-stage-canvas canvas{display:block;width:100%;height:100%}
@media (min-width:901px) and (min-height:560px){
  .fs-stage-box{flex:1;height:auto;min-height:0}
}

/* text: the document zooms by transform; each character is a span */
.doc{position:absolute;inset:0;padding:6% 7%;font:500 clamp(12px,2.2cqw,24px)/1.65 var(--font-mono);color:var(--ink);white-space:pre-wrap;
  transform-origin:0 0;transition:transform 1.1s cubic-bezier(.3,.7,.2,1),opacity .6s}
.doc .ch{border-radius:3px;transition:background .25s,color .25s,opacity .6s;position:relative}
.doc.dim .ch{opacity:.12}
.doc .ch.focus{opacity:1;background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 3px var(--accent-tint)}
.doc .ch.counted{background:var(--accent-tint)}
.doc .ch.sp.counted{background:var(--warn-tint)}
.doc .ch.nl.counted{background:var(--bad-tint)}
.doc.marks .ch.sp::after{content:"\00B7";position:absolute;left:0;right:0;text-align:center;color:var(--warn);font-weight:700}
.doc.marks .ch.nl::before{content:"\21B5";color:var(--bad);font-weight:700}
.branch{position:absolute;top:8%;bottom:8%;width:42%;padding:clamp(10px,1.6cqw,18px) clamp(12px,1.8cqw,20px);border-radius:8px;background:var(--panel);border:1px solid var(--line-strong);
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;animation:fs-in .6s ease both;overflow:hidden}
.branch h3{margin:0;font:700 clamp(15px,1.9cqw,20px)/1.1 var(--font-display);color:var(--accent-deep)}
#textAscii{left:5%}
#textUnicode{right:5%}
.branch .big{font-size:clamp(14px,2.1cqw,22px);margin:4px 0}
.branch .glyph{display:inline-block;min-width:1.4em;text-align:center;border-radius:4px;background:var(--accent);color:var(--on-accent);font-family:var(--font-mono);font-weight:700}
.branch .bits{letter-spacing:.08em;color:var(--accent-b)}
.branch .rule{font:600 clamp(13px,1.9cqw,19px)/1.3 var(--font-display);margin:auto 0 0;color:var(--ink)}
.branch .rule strong{color:var(--accent)}
.branch .small{font-size:clamp(11px,1.2cqw,13px)}
.ascii-row{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;font-family:var(--font-mono);font-size:12px}
.ascii-row div{border:1px solid var(--line);border-radius:3px;padding:3px 0;text-align:center;background:var(--panel-2)}
.ascii-row div b{display:block;font-size:15px;color:var(--ink)}
.ascii-row div span{color:var(--muted);font-size:10.5px}
.ascii-row div.on{border-color:var(--accent);background:var(--accent-tint)}
.uni-grid{display:grid;grid-template-columns:auto auto repeat(3,1fr);gap:4px 8px;font-size:12.5px;align-items:center}
.uni-grid .h{font:700 10.5px/1.2 var(--font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.uni-grid .g{font:700 19px/1 var(--font-mono);text-align:center;min-width:1.6em}
.uni-grid .bytes{display:flex;gap:2px;flex-wrap:wrap}
.uni-grid .bytes i{font:500 10.5px/1 var(--font-mono);font-style:normal;padding:3px 3px;border-radius:2px;background:var(--accent-b-tint);color:var(--ink)}
.count-box{position:absolute;right:4%;bottom:6%;display:flex;flex-direction:column;align-items:flex-end;padding:10px 16px;border-radius:8px;background:var(--panel);
  border:1px solid var(--line-strong);box-shadow:var(--shadow);font:600 14px/1.2 var(--font-display);color:var(--muted);animation:fs-in .4s ease both}
.count-box .num{font-size:clamp(26px,4.2cqw,46px);font-weight:700;color:var(--accent)}
.count-box .key{font:500 12px/1.4 var(--font-body);margin-top:4px}
.count-box .key i{font-style:normal;padding:0 4px;border-radius:3px}
.results{position:absolute;inset:auto 4% 6% 4%;padding:14px 18px;border-radius:8px;background:var(--panel);border:1px solid var(--line-strong);box-shadow:var(--shadow);animation:fs-in .5s ease both}
.results table{font-size:clamp(12px,1.6cqw,15px)}
.results td.num{text-align:right}

/* images: the table of colour depths beside the canvas */
.depth-table{position:absolute;top:5%;right:3%;width:40%;max-height:90%;overflow:auto;padding:12px 14px;border-radius:8px;background:var(--panel);border:1px solid var(--line-strong);box-shadow:var(--shadow);animation:fs-in .5s ease both}
.depth-table table{font-size:clamp(11px,1.4cqw,14px)}
.depth-table tr.on td{background:var(--accent-tint);font-weight:600}
.depth-table .sw{display:inline-block;width:1.1em;height:1.1em;border-radius:3px;vertical-align:-2px;border:1px solid var(--line-strong)}
.depth-table p{margin:8px 0 0;font-size:13px;color:var(--ink-soft)}

@keyframes fs-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- stepper ---------- */
.stepper{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:none}
.step-caption{flex:1 1 320px;margin:0;font-size:15px;line-height:1.45;color:var(--ink);min-height:2.9em;display:flex;align-items:center}
.step-caption b{color:var(--accent-deep);margin-right:.6em;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;white-space:nowrap}

/* ---------- calculator: the inputs on the left, the working on the right ---------- */
.fs-calc{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:24px;padding:20px 22px;overflow:auto;align-items:start}
.fs-calc h2{margin:0;font:700 18px/1.2 var(--font-display);color:var(--ink)}
.fs-calc-in{display:flex;flex-direction:column;gap:14px}
.fs-calc-in .small{margin:0}
.fs-calc-out{display:flex;flex-direction:column;gap:10px;min-width:0}
.fs-calc-visual{container-type:inline-size}
.fs-calc-visual .fs-stage{width:min(100%,calc(34vh * 16 / 9))}
.fs-live-note{margin:0;min-height:1.4em}
.field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink-soft);font-weight:600}
.field input,.field select,.field textarea{font:500 15px/1.3 var(--font-body);color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:5px;padding:7px 9px;width:100%}
.field textarea{font-family:var(--font-mono);resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--focus);outline-offset:1px}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden;align-self:flex-start}
.seg button{font:600 13px/1 var(--font-body);padding:9px 11px;border:0;background:var(--panel);color:var(--ink-soft);cursor:pointer}
.seg button[aria-checked="true"]{background:var(--accent);color:var(--on-accent)}
.seg button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.presets{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.calc{font-size:15px;line-height:1.6;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:14px 16px}
.calc p{margin:0 0 4px}
.calc .working{font-family:var(--font-mono);font-size:14px;color:var(--ink-soft)}
.calc .answer{font:700 22px/1.3 var(--font-display);color:var(--accent-deep)}
.calc .warnline{color:var(--warn);font-size:13.5px}
.calc table{font-size:14px;margin-top:6px}
.calc td.num{text-align:right}
.listen{margin:0}

/* ---------- challenges fill the space ---------- */
.fs-quiz{display:flex;flex-direction:column}
.fs-quiz .cq{flex:1}

/* ---------- smaller screens (the phone pass is issue #4): stack instead of overlapping ---------- */
@media (max-width:900px){
  .fs-calc{grid-template-columns:1fr}
}
@media (max-width:720px){
  .fs-panel#panel-text .fs-stage-box{height:auto;container-type:normal;display:block}
  #textStage{width:100%;aspect-ratio:auto;min-height:0;display:flex;flex-direction:column}
  #textStage .doc{position:relative;inset:auto;padding:14px}
  #textStage .branch,#textStage .count-box,#textStage .results{position:relative;inset:auto;width:auto;margin:0 10px 10px;left:auto;right:auto;bottom:auto;top:auto}
  .depth-table{position:relative;inset:auto;width:auto;margin:8px}
}
@media (prefers-reduced-motion:reduce){.doc,.doc .ch,.branch,.count-box,.results,.depth-table{transition:none;animation:none}}