/*
 * The app's own look, for the pages that live outside the app.
 *
 * The intro page and the 404 are plain HTML — they do not get the
 * bundle, so without this they invent their own buttons and their own
 * type and end up looking like a different product:
 *
 *   "none of the buttons match the actual buttons. All buttons and
 *    fonts on the intro page need to match the actual site's buttons."
 *
 * So the tokens, the fonts and the one button definition are copied
 * from src/assets/styles/global.css rather than approximated.
 */
@font-face{font-family:roboto-regular;src:url(fonts/Roboto/Roboto-Regular.ttf) format('truetype');font-display:swap}
@font-face{font-family:roboto-medium;src:url(fonts/Roboto/Roboto-Medium.ttf) format('truetype');font-display:swap}
@font-face{font-family:roboto-bold;src:url(fonts/Roboto/Roboto-Bold.ttf) format('truetype');font-display:swap}
/* Command text and key caps: a mono face whose zero is DOTTED, so 0 and the
   letter O (Out) never look alike (walkthrough 5b). Self-hosted: font-src 'self'. */
@font-face{font-family:'Atkinson Hyperlegible Mono';src:url(fonts/AtkinsonHyperlegibleMono/AtkinsonHyperlegibleMono-latin.woff2) format('woff2');font-weight:200 800;font-display:swap}

:root{
  color-scheme: dark;
  --primary-dark:#0B0D0A;
  --primary-dark-alt:#12140F;
  --primary-light:#141A13;
  --primary-light-alt:#181B16;
  --primary-lighter:#2C2E2B;
  --primary-lighter-alt:#1F221D;
  --secondary-lighter:#FFFFFFB3;
  --secondary-lighter-alt:#FFFFFFA3;
  --secondary-light-alt:#FFFFFF63;
  --secondary-light:#FFFFFF33;
  --secondary-dark:#FFFFFF14;
  --secondary-darker:#FFFFFF0C;
  --ink-strong:#FFFFFF;
  /* The app's own accents (src/assets/styles/global.css), so a green or
     a blue on a web page is the same one as inside the Lab. */
  --accent-sea-green:#4DBE7A;
  --accent-blue:#5A71D3;
  --accent-gold:#E2C753;
  --accent-maroon:#D9416B;
}

html,body{margin:0;padding:0}
body{
  /* THE SURFACE THE APP MOSTLY SHOWS.
     --primary-dark is the app's darkest token. In DARK theme that is
     the page behind the panels and it looks right; in LIGHT theme it
     is #C6D3CF, a muddy sage that the app only ever uses for seams —
     so the whole page came out looking like a different product.
     --primary-light is the panel surface, which is what you actually
     see when you look at the app in either theme. */
  background:var(--primary-light);
  color:var(--secondary-lighter);
  font:400 15px/1.65 roboto-regular,'Helvetica Neue',Arial,sans-serif;
  overflow-wrap:break-word;
}
h1,h2,h3{color:var(--ink-strong);font-family:roboto-bold,roboto-medium,sans-serif}
a{color:var(--accent-sea-green)}
img{max-width:100%;display:block}

/* THE one button. Same rule as the app, sized up for a web page —
   24px is right beside a fader and far too small on a landing page. */
.ll-btn{
  --btn-accent:var(--accent-sea-green);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  box-sizing:border-box;min-height:38px;padding:0 18px;
  background:var(--primary-light);
  border:1px solid var(--primary-dark);
  border-radius:4px;
  color:var(--secondary-lighter);
  text-transform:none;
  font:600 13px/1 roboto-medium,roboto-regular,sans-serif;
  letter-spacing:.04em;white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:border-color .12s,color .12s,background .12s;
}
.ll-btn:hover{border-color:var(--secondary-light);color:var(--ink-strong)}
.ll-btn.is-on{
  border-color:var(--btn-accent);
  color:var(--btn-accent);
  background:color-mix(in srgb,var(--btn-accent) 14%,var(--primary-light));
}
.ll-btn-lg{min-height:44px;padding:0 24px;font-size:14px}

/* Restored 2026-09-26: deleted by accident in 8c41921 along with the
   intro's old fader, which left the theme chip with no styling, the
   light theme with no colors, and --card (the intro's panel color)
   undefined. */
/*
 * LIGHT THEME, same tokens as the app's global.css so a page outside
 * the app and a panel inside it are the same color. Applied by
 * theme-chip.js, which stamps data-theme on <html>.
 */
:root[data-theme="light"]{
  color-scheme: light;
  --primary-dark:#C6D3CF;
  --primary-dark-alt:#D9E4E0;
  --primary-light:#E8F0EC;
  --primary-light-alt:#E1EAE6;
  --primary-lighter:#F6FBF8;
  --primary-lighter-alt:#EEF5F1;
  --secondary-lighter:#0D1411D6;
  --secondary-lighter-alt:#0D1411B0;
  --secondary-light-alt:#0D14117A;
  --secondary-light:#0D141133;
  --secondary-dark:#0D141114;
  --secondary-darker:#0D14110A;
  --ink-strong:#0B1310;
  --accent-sea-green:#2E9557;
  --accent-blue:#3E55BA;
  --accent-gold:#977C0B;
  --accent-maroon:#C22552;
}

/*
 * BETA, next to the name on every page outside the app (owner,
 * 2026-10-04: "LIMELIGHT  LEARN  BETA"). Owner, 2026-10-05: the old
 * chip was nearly the size of LEARN's box but a little smaller, which
 * read as a typo. It is now deliberately SMALL: a superscript tag up
 * against the end of the name, the way a trademark mark sits. Gold ink
 * and a gold hairline, no fill (never dark text on a colored fill); on
 * the light theme the gold is darkened so it still reads. The app's
 * topbar tag (toolbar.fragment.vue .beta_chip h3) is drawn the same.
 */
:root{ --beta-ink:#e2b04a; }
:root[data-theme="light"]{ --beta-ink:#7a6104; }
/*
 * A COLLAPSED PANEL is this thick everywhere on the site (owner,
 * 2026-10-10: "a universal thinness across every panel on the entire
 * site, whether vertical or horizontal"). The Lab defines it in
 * src/assets/styles/global.css with the whole layout (.ll-tab / .ll-bar);
 * none of the static tools has a panel that folds into a strip today,
 * so this is the value one uses when it does. tests/collapsed-panels
 * keeps the two equal.
 */
:root{ --ll-collapsed:24px; }
.beta_chip{display:inline-block;flex:0 0 auto;align-self:flex-start;
  padding:2px 3px 1px 5px;border-radius:2px;
  border:1px solid color-mix(in srgb,var(--beta-ink) 55%,transparent);background:none;color:var(--beta-ink);
  font:600 8.5px/1.2 roboto-medium,roboto-regular,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;vertical-align:super;cursor:help;
  /* Superscript: the tag's bottom sits about the middle of the name's capitals. */
  position:relative;top:-3px;margin-left:-3px}

/* The chip itself — same shape and size as the one in the app's topbar. */
.theme_chip{
  height:34px;width:34px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--secondary-light-alt);border-radius:4px;flex:0 0 auto;
}
.theme_chip:hover{background:var(--secondary-darker);color:var(--secondary-lighter)}
.theme_chip svg{width:15px;height:15px;display:block}

/* Cards and panels sit one step up from the page, in both themes. */
:root{ --page:var(--primary-light); --card:var(--primary-lighter-alt); }
:root[data-theme="light"]{ --page:var(--primary-lighter); --card:var(--primary-light); }
:root[data-theme="light"] body{ background:var(--primary-lighter); }

/*
 * THE BEAMS, sitewide. Twin of the block at the end of
 * src/assets/styles/global.css — same stops, same geometry — so the
 * intro page, the 404 page and the app itself are visibly one product.
 *
 *   "I kind of want to make that part of the theming of the site."
 *
 * Fixed to the top and bottom EDGE of the viewport, full width, behind
 * nothing and over everything, on every page. The in-flow `.beams`
 * divs some pages still carry are separate and harmless — they are
 * rules between sections, not this frame.
 */
body::before,body::after{content:'';position:fixed;left:0;right:0;height:4px;
  z-index:2147483000;pointer-events:none;
  /* It sits on its own strip of the page's color, so text scrolling past the screen's edge slides UNDER the line
     (owner, 2026-11-02: it must never cover words) instead of being tinted by it. */
  background:linear-gradient(90deg,transparent 0%,
    rgba(30,168,118,.95) 14%,transparent 26%,rgba(77,163,255,.95) 42%,
    transparent 54%,rgba(226,176,74,.95) 70%,transparent 82%,
    rgba(217,65,107,.95) 94%,transparent 100%),var(--ll-edge,var(--primary-light));
  filter:blur(.6px)}
:root[data-theme="light"] body::before,:root[data-theme="light"] body::after{
  background:linear-gradient(90deg,transparent 0%,
    rgba(30,168,118,.95) 14%,transparent 26%,rgba(77,163,255,.95) 42%,
    transparent 54%,rgba(226,176,74,.95) 70%,transparent 82%,
    rgba(217,65,107,.95) 94%,transparent 100%),var(--ll-edge,var(--primary-lighter))}
body::before{top:0}
body::after{bottom:0}
@media print{body::before,body::after{display:none}}

/*
 * "WE'VE MOVED" — the note the old vercel.app addresses land on.
 *
 *   "On the intro page a pop-up should show up with the theming and
 *    everything. You click OK at the bottom or there's an X at the top
 *    and that pop-up should say, 'Please save this new URL.'"
 *
 * Built by public/moved.js only when the URL carries ?moved=1, which
 * only the old-domain redirects in vercel.json add. Tokens only, so it
 * follows light/dark like the rest of the page.
 */
.ll-modal-veil{position:fixed;inset:0;z-index:2147482000;display:flex;align-items:center;
  justify-content:center;padding:16px;background:rgba(0,0,0,.62)}
.ll-modal{position:relative;box-sizing:border-box;width:100%;max-width:420px;overflow:hidden;
  background:var(--primary-light-alt);border:1px solid var(--primary-lighter);border-radius:10px;
  box-shadow:0 18px 60px rgba(0,0,0,.45)}
.ll-modal::before{content:'';display:block;height:3px;background:linear-gradient(90deg,
  rgba(30,168,118,.95),rgba(77,163,255,.95),rgba(226,176,74,.95),rgba(217,65,107,.95))}
.ll-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 14px 0 20px}
.ll-modal-head h2{margin:0;font-size:18px;line-height:1.3}
/* THE close X — the look the app's popups took from this note. Twin of
   .ll-close in src/assets/styles/global.css, at web size. */
.ll-close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  box-sizing:border-box;width:34px;height:34px;padding:0;border-radius:4px;cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--secondary-lighter);
  font:400 22px/1 roboto-regular,sans-serif;text-transform:none}
.ll-close:hover{border-color:var(--secondary-light);color:var(--ink-strong)}
.ll-modal-body{padding:10px 20px 4px}
.ll-modal-body p{margin:0 0 12px}
.ll-modal-url{display:block;margin:4px 0 14px;padding:12px 14px;border-radius:6px;
  border:1px solid var(--accent-sea-green);color:var(--accent-sea-green);
  background:color-mix(in srgb,var(--accent-sea-green) 10%,var(--primary-light-alt));
  font:700 22px/1.2 roboto-bold,roboto-medium,sans-serif;letter-spacing:.02em;text-align:center;
  overflow-wrap:anywhere}
/* The footer and its button are the APP's popup footer and button
   (uikit.popup.vue .popup_validation + uk-button), not the big web
   buttons: "The OK button at the bottom... does not match the rest of
   the site." Same hairline, same 24px card, same 10.5px label. */
.ll-modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:8px;margin-top:10px;
  border-top:1px solid var(--secondary-light)}
.ll-modal-foot .ll-btn{height:24px;min-height:24px;min-width:70px;padding:0 12px;
  font:600 10.5px/1 roboto-medium,roboto-regular,sans-serif;letter-spacing:.04em}

/* The links along the top of the site's pages: each a real page (owner,
   2026-10-23), and drawn as THE button above, the one every button on the
   site and in the app already uses (owner, 2026-10-24: "Lighting and Sound
   for Teachers don't match our theming ... we've already optimized our
   button look"). Only the gap and the page-you're-on are set here. */
.nav_links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav_links .ll-btn[aria-current]{border-color:var(--btn-accent);color:var(--btn-accent);
  background:color-mix(in srgb,var(--btn-accent) 14%,var(--primary-light))}
.nav_links .ll-btn:focus-visible{outline:2px solid var(--accent-sea-green);outline-offset:1px}
@media (max-width:560px){ .nav_links{gap:6px} .nav_links .ll-btn{min-height:34px;padding:0 10px} }