/* Shared by the Solutions page examples. The same faces and colour tokens as the site (src/styles/globals.css),
   self-hosted because the site's CSP only allows its own fonts. Each page's own script sets data-theme from the
   host page. */
@font-face { font-family: "Inter"; src: url("../walkthrough/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../walkthrough/fonts/space-grotesk-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../walkthrough/fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

html {
  color-scheme: light;
  --f-display: "Space Grotesk", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --bg-2: #F6F4F2; --surface: #FFFFFF; --surface-3: #ECE8E5;
  --ink: #171413; --ink-2: #5C5754; --ink-3: #6E6862;
  --border: #E6E0DC; --border-2: #D6CEC9;
  --red: #FF0000; --red-text: #C10000; --crit: #E5484D;
  --ok: #1F8A5B; --info: #2A6FDB; --warn: #C98A00;
  --red-soft: rgba(255, 0, 0, 0.07); --ok-soft: rgba(31, 138, 91, 0.1);
  --warn-soft: rgba(201, 138, 0, 0.12); --info-soft: rgba(42, 111, 219, 0.1);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-2: #131313; --surface: #1B1B1B; --surface-3: #2A2A2A;
  --ink: #E5E2E1; --ink-2: #B4B5B5; --ink-3: #8F8C8A;
  --border: #262423; --border-2: #3A3534;
  --red-text: #FF4D43; --crit: #F2726C;
  --ok: #5FBF8A; --info: #6AA0F0; --warn: #E0A83C;
  --red-soft: rgba(255, 77, 67, 0.12); --ok-soft: rgba(95, 191, 138, 0.14);
  --warn-soft: rgba(224, 168, 60, 0.14); --info-soft: rgba(106, 160, 240, 0.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  /* Transparent, so a box reserved taller than the view needs shows the page behind it rather than a slab of
     panel. That is what lets each reserved height carry real slack for a reader who zooms or scales text up. */
  background: transparent; color: var(--ink);
  font-family: var(--f-body); font-size: 13px; line-height: 1.5;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
/* The panel hugs its content rather than filling the frame: the page reserves a box big enough for the tallest
   this view gets, and any slack left over shows the page's own background instead of empty panel. */
.panel { display: flex; flex-direction: column; border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.lbl { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.mono { font-family: var(--f-mono); }
.still *, .still *::before, .still *::after { transition: none !important; animation: none !important; }