/* say hi: the film's frame, its pages and the shared components (demo/say-hi/components.js). Load it
   after lib/style/site/notebook.css. The frame is 1920 by 1080 CSS pixels whether it is filmed or watched; on a
   page it is scaled to fit the window. */

/* The face comes from the repository, not a web font service, so that every filming sets the same
   letters, offline. */
@font-face { font-family: 'Shantell Sans'; src: url('../../lib/style/figures/fonts/ShantellSans-Variable.ttf') format('truetype'); font-weight: 300 800; }

:root {
  --informal: 100;  /* A hobby piece sits at the top of the dial (STYLE.md §3). */
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --frame-bg: #e9e6de;
}
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--frame-bg); }
body::before { display: none; }  /* The pages carry their own paper grain. */

.sh-host { position: absolute; inset: 0; }
.sh-frame { position: absolute; left: 0; top: 0; overflow: hidden; background: var(--paper); transform-origin: 0 0; }
.sh-pages, .sh-page, .sh-screen-top, .sh-scenes { position: absolute; inset: 0; }
.sh-page { overflow: hidden; transform-origin: 50% 50%; }
.sh-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.sh-page > .sh-screen { position: absolute; inset: 0; }

/* The paper: rules every 54 head units, kept a pixel and a half wide on screen (core.js sets
   --rule-width), in a tone a hook may change (night). */
.sh-sheet { position: absolute;
  background: repeating-linear-gradient(transparent 0 calc(54px - var(--rule-width, 1.4px)),
    var(--sh-rule, var(--rule)) calc(54px - var(--rule-width, 1.4px)) 54px) var(--sh-paper, var(--paper)); }
.sh-margin { position: absolute; top: -20000px; height: 40000px; width: var(--rule-width, 1.4px); background: var(--margin); }
.sh-grain { position: absolute; inset: 0; pointer-events: none; opacity: calc(.4 * var(--sh-grain, 1)); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .34  0 0 0 0 .3  .5 0 0 0 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* A page's scenes (lib/fwiends/film/scene.js) lie over the paper, transparent; only the one for the era shown is
   visible. The scene kit makes its stage position: relative, which would stack them. */
.sh-scenes > .sh-scene.pf-stage { position: absolute; inset: 0; background: none; }

/* Ground lines under the gallery's places. */
.sh-grounds { position: absolute; left: 0; top: 0; overflow: visible; color: var(--ink); filter: url(#graphite); }

/* ---- Drawers and components */
.sh-drawer { position: absolute; left: 0; top: 0; }
.sh-drawer.sh-fill { inset: 0; }  /* A drawer on a screen layer that lays its content out in the frame. */
.sh-hand, .sh-label { position: absolute; left: 0; top: 0; margin: 0; white-space: pre; line-height: 1;
  font-family: var(--face); font-weight: 300; color: var(--ink); transform-origin: 0 0; }
.sh-label.mono { font-family: var(--mono); font-variation-settings: normal !important; }
.ink-2 { color: var(--ink-2); }
.graphite { filter: url(#graphite); }
.mono { font-family: var(--mono); }

.sh-code .sh-line { position: absolute; margin: 0; white-space: pre; line-height: 1; color: var(--ink); transform: translateY(-0.82em);
  font-family: var(--mono); font-variation-settings: normal !important; }
.sh-code .sh-line.faint { color: var(--ink-2); opacity: .55; }
.sh-code .sh-n { position: absolute; right: calc(100% + .9em); top: 0; color: var(--ink-2); }
.sh-code .sh-t { position: relative; }
.sh-swatch { display: inline-block; width: .62em; height: .62em; margin: 0 .18em 0 .05em; vertical-align: -.02em; border-radius: .08em;
  box-shadow: inset 0 0 0 .04em rgba(61, 60, 57, .35); transform: rotate(-3deg); }
.sh-caret { position: absolute; top: -.05em; height: 1.1em; width: .12em; background: var(--ink); border-radius: .06em; }
.sh-caret.pill { width: .433em; border-radius: .22em; }
.sh-caret[hidden] { display: none; }

/* What Claude types, held large: one line in the code's face in a pencilled box on the paper, the line's
   number (when it is a line of a file) in ink-2 before it, the typed text bold, and the caret: the
   typist's pill at the end of what is typed, the editor's bar inside a line. */
.sh-typed p { position: absolute; left: 0; top: 0; margin: 0; white-space: pre; line-height: 1; color: var(--ink); padding: .2em .45em .14em;
  font-family: var(--mono); font-variation-settings: normal !important; transform-origin: 50% 50%;
  background: var(--mark-box-again) 0 0 / 100% 100% no-repeat, var(--sh-paper, var(--paper)); }
.sh-typed .sh-n { color: var(--ink-2); margin-right: 1.2ch; font-weight: 400; }
.sh-typed .sh-t { font-weight: 600; }
.sh-typed .sh-caret { top: .16em; }
.sh-typed .sh-file { position: absolute; left: .45em; top: -.95em; font-size: .5em; color: var(--ink-2); font-weight: 400; }

.sh-leader svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; stroke: var(--ink); stroke-opacity: .85; }
.sh-leader svg.ink-2 { stroke: var(--ink-2); }
.sh-mark i { position: absolute; left: 0; top: 0; background: no-repeat 0 0 / 100% 100%; transform-origin: 50% 50%; }

/* The intro's line (sections/intro.js): one line of the spec, its number in the gutter, the caret at its end. */
.sh-intro-line { position: absolute; left: 0; top: 0; margin: 0; white-space: pre; line-height: 1; color: var(--ink-2);
  font-family: var(--mono); font-variation-settings: normal !important; filter: url(#graphite); }
.sh-intro-line .sh-n { position: absolute; right: calc(100% + 1.2em); top: 0; color: var(--ink-3); }
.sh-intro-line .sh-caret { background: var(--ink); }

/* ---- Checks and debugging */
.sh-alarm { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); margin: 0; z-index: 100; font: 600 20px/1.3 var(--mono); color: var(--red);
  background: rgba(251, 249, 243, .9); padding: 2px 8px; }
.sh-alarm[hidden], .sh-debug[hidden] { display: none; }
.sh-debug { position: absolute; left: 16px; top: 12px; z-index: 100; font: 600 22px/1.3 var(--mono); color: var(--ink);
  background: rgba(251, 249, 243, .88); padding: 4px 10px; white-space: pre; }

/* ---- Watching on a page */
.sh-controls { position: fixed; left: 12px; bottom: 10px; display: flex; gap: 10px; align-items: center; z-index: 10;
  font: 300 18px/1 var(--face); color: var(--ink-2); }
.sh-controls button { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 6px 14px; cursor: pointer; }
html.sh-filming .sh-controls { display: none; }