/* /tracer's shared parts (website v3). The system is site.css; each section
   has its own file beside this one, linked after it in the page's order.

   ---- the scene: Excel and the Tracer's pane, at their true sizes ---------
   scene.js fills it with the kit (web/kit): Excel's rows in .sc-xl, framed
   by the kit's camera, its sheet tabs under them in .sc-tabs, and the pane
   in .sc-pane, floated over Excel's lower right as the app floats it. A CSS
   pixel is a point of the captures (--s: 1), so the smallest label, a
   heading or a key hint, draws at 10 px. The pane is the captured one, 640
   points wide here, its columns narrowed to fit, as its dividers allow
   (columns.ts). Nothing here moves: the films write transform and opacity.
     --xh   the rows Excel shows, in points: its title bar, tabs, formula
            bar and headings, then Kestrel's rows 1 to 8
     --pw, --ph   the pane's window: tall enough for Pricing's 2.5 and the
            Map's legend, with what is under them cut off, as the pane's
            own window cuts what scrolls (a shorter scene fits a laptop's
            first screen, B1 and S1)
   A phone draws both smaller and whole, Excel without its headings
   (g-mobile-films, below). */
.scene{--s:1;--xh:236;--pw:640;--ph:476;position:relative;width:712px;height:calc((var(--xh) + 28 + var(--ph)) * var(--s) * 1px);margin-left:auto}
/* the window: its rows and, under them, its sheet tabs, one rounded box */
.sc-win{position:absolute;left:0;top:0;width:640px;height:calc((var(--xh) + 28) * var(--s) * 1px);border-radius:var(--r-win);overflow:hidden;background:#F5F5F5;box-shadow:var(--shadow-stage),0 0 0 1px var(--edge-win);transform:translateZ(0)}
.sc-xl{position:absolute;left:0;top:0;right:0;height:calc(var(--xh) * var(--s) * 1px);overflow:hidden}
.sc-tabs{position:absolute;left:0;right:0;bottom:0;height:calc(28px * var(--s));overflow:hidden}
/* the viewports round the window and draw its edge, so the window's own does not */
.sc-win .xk-win{border-radius:0;box-shadow:none}
.sc-pane{position:absolute;right:0;top:calc((var(--xh) + 28) * var(--s) * 1px);width:calc(var(--pw) * var(--s) * 1px);height:calc(var(--ph) * var(--s) * 1px)}
.sc-panebox{position:absolute;left:0;top:0;width:calc(var(--pw) * 1px);height:calc(var(--ph) * 1px);transform:scale(var(--s));transform-origin:0 0}
.sc-pane .xk-tr{width:calc(var(--pw) * 1px)}
.sc-pane .xk-trwin{height:calc(var(--ph) * 1px)}
.sc-pane .xk-trth,.sc-pane .xk-trrow{grid-template-columns:240px 130px 80px minmax(90px,1fr)}
.sc-pane .xk-trbar i{left:240px;width:130px}
/* with no script there is no film to draw: the words stand alone */
html.nojs .scene,html.nojs .tf-read{display:none}
@media (max-width:1279px){.scene{margin-left:0}}
/* the film under the words, from 1024 to 1279: room for Excel's title,
   framed past it; elsewhere the window is framed short of it, at column G */
@media (min-width:1024px) and (max-width:1279px){.scene{width:100%}.sc-win{width:830px}}
@media (max-width:1023px){.scene{width:100%}}
/* g-mobile-films (the user, 2026-10-16: on a phone "the animation is cut in
   half the width"): the scene is drawn smaller and whole. Excel at 0.8, its
   cells 8.4 px; the pane at a scale of its own (--ps), as wide as the scene
   and never under 480 points, where the real pane folds each row into two
   lines (Explorer.tsx, COMPACT_BELOW): its four columns whole, its rows 8.9 px
   or more. The scene is the screen less 16 px, so each step's --ps is at most
   that over 480 at the narrowest screen it covers. */
@media (max-width:600px){
  .scene{--s:.8;--ps:.8;--xh:211;width:auto;margin-inline:-10px;height:calc(((var(--xh) + 28) * var(--s) + var(--ph) * var(--ps)) * 1px)}
  .sc-win{width:100%}
  .sc-pane{left:0;right:0;width:auto;height:calc(var(--ph) * var(--ps) * 1px);overflow:hidden;border-radius:var(--r-win)}
  .sc-panebox{width:calc(100% / var(--ps));transform:scale(var(--ps))}
  .sc-pane .xk-tr{width:100%}
  /* G11: Info wide enough for "+ term" and its "hardcoded" pill, whole; Element still holds B2+B3+B4+B5+B6+B7 */
  .sc-pane .xk-trth,.sc-pane .xk-trrow{grid-template-columns:180px 136px 76px minmax(0,1fr)}
  .sc-pane .xk-trbar i{left:180px;width:136px}
  /* the website review: a heading ends in "…", never cut mid-letter; the
     tabs' numbers and key hints half a point larger, 7 px at 360 */
  .sc-pane .xk-trth span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sc-pane .xk-trk,.sc-pane .xk-trtab i{font-size:10.5px}
}
@media (max-width:399px){.scene{--ps:.77}}
@media (max-width:385px){.scene{--ps:.74}}
@media (max-width:371px){.scene{--ps:.71}}
@media (max-width:356px){.scene{--ps:.68}}
@media (max-width:342px){.scene{--ps:.65}}
@media (max-width:327px){.scene{--ps:.62}}
/* the walkthrough's scene is the screen less 26 px: its own steps */
@media (max-width:409px){.wstage .scene{--ps:.77}}
@media (max-width:395px){.wstage .scene{--ps:.74}}
@media (max-width:381px){.wstage .scene{--ps:.71}}
@media (max-width:366px){.wstage .scene{--ps:.67}}
@media (max-width:351px){.wstage .scene{--ps:.64}}
@media (max-width:336px){.wstage .scene{--ps:.61}}
@media (max-width:321px){.wstage .scene{--ps:.58}}

/* the keys under a film: the site's keycap, typed by the film (web/kit,
   AxiomKit.keys), and what the step shows rising beside it */
.tf-read.xk-keys{flex-direction:row;align-items:center;gap:16px;margin:20px 0 0;min-height:46px;color:var(--ink)}
.tf-read .xk-hk{font-size:44px;gap:.1em;flex:none}
.tf-read .xk-kname{min-height:0;font:600 18px/1.3 var(--ui);letter-spacing:-.005em;color:var(--ink)}
/* beside the words, the hero's keys sit under them, beside the pane (hero.js) */
.tfilm.tf-beside .tf-read{position:absolute;margin:0}