/* arq-fit: the one-screen layer shared by arquestra.dev tools (simulator, radar, future assets).
   One place decides how big type is, how much air there is, and how a page fits the viewer's screen:
   - tokens: type sizes and spacing, which tighten on shorter screens instead of letting the page scroll;
   - frame: .fit-app fills the screen exactly; panels shrink (.fit-fill) and only lists scroll inside (.fit-scroll);
   - charts: .fit-sq keeps a square chart (the donut) as large as the space allows, never larger.
   Pages use the tokens (var(--fs-body)...) rather than fixed pixel sizes. On narrow screens the page scrolls normally. */
:root{
  --fs-label:11px;--fs-small:12px;--fs-body:14px;--fs-read:15.5px;--fs-step:15px;
  --fs-h1:clamp(1.6rem,3vw,2.5rem);--fs-num:clamp(24px,2.8vw,36px);--fs-mid:clamp(22px,2.6vw,32px);
  --gap:12px;--pad:16px;--chart-max:300px}
@media (max-height:860px){:root{--fs-body:13px;--fs-read:14.5px;--fs-step:14px;--fs-h1:clamp(1.4rem,2.4vw,2.05rem);--fs-num:clamp(22px,2.4vw,30px);--fs-mid:clamp(20px,2.2vw,28px);--gap:10px;--pad:13px}}
@media (max-height:740px){:root{--fs-label:10px;--fs-small:11px;--fs-body:12.5px;--fs-read:13.5px;--fs-step:13px;--fs-h1:clamp(1.25rem,2vw,1.7rem);--fs-num:clamp(20px,2vw,26px);--fs-mid:clamp(18px,2vw,24px);--gap:8px;--pad:10px}}
html.fit,html.fit body{margin:0;height:100%}
.fit-app{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:var(--gap)}
.fit-fill{flex:1 1 0;min-height:0}
.fit-scroll{min-height:0;overflow:auto}
.fit-clip{min-height:0;overflow:hidden}
.fit-sq{container-type:size;min-height:110px;height:100%;display:grid;place-items:center}
.fit-sq>*{width:min(100cqw,100cqh,var(--chart-max))!important;max-width:none!important;aspect-ratio:1}
@media (max-height:740px){.fit-short-hide{display:none!important}}
@media (max-width:980px){html.fit,html.fit body{height:auto}.fit-app{height:auto}.fit-sq{height:auto;container-type:inline-size}.fit-sq>*{width:min(100cqw,var(--chart-max))!important}}