/*
 * THE WARM GLASS, everywhere.
 *
 * The League's look (XploreBot UI Implementation Pack v1, 29 Sep 2026)
 * applied to the whole IDE. Loaded last, so at equal specificity it has
 * the final word. Three moves:
 *
 *   1. The fonts: DM Sans for everything, Manrope for headings, in both
 *      themes. The faces are the League's own (@font-face in league.css).
 *   2. The light theme's tokens, retuned to the pack's palette: pearl
 *      canvas, ink, muted, brand and action orange, peach, sage. Every
 *      rule that reads a token follows; nothing else has to change.
 *   3. The surfaces: the topbar, cards, menus and dialogs become frosted
 *      ivory panels with the pack's edge and shadow; buttons and inputs
 *      take the pack's radius and colours.
 *
 * Light only for the glass, as the pack is light only; the dark theme
 * keeps its palette and gains the fonts.
 */

:root {
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --glass-heading: "Manrope", "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}
h1, h2, h3, h4, .home-tab, dialog h2, .brand strong { font-family: var(--glass-heading); }
h1 { letter-spacing: -.03em; }

/* ---------------------------------------------------------- the tokens */
:root[data-theme="light"] {
  --ink: #24332D;
  --muted: #5F6C65;
  --surface: #EEF0EA;
  --panel: #F7F8F3;
  --line: rgba(36, 51, 45, 0.12);
  --orange: #F5632C;
  --orange-ink: #B33B13;
  --orange-soft: #FFF0E5;
  --accent: #F5632C;
  --surface-0: #EEF0EA;
  --surface-1: #F7F8F3;
  --surface-2: #E6ECE1;
  --canvas: #F7F8F3;
  --toolbox: #EEF0EA;
  --flyout: #F7F8F3;
  --grid: #D7DDD5;
  --sim-space: #E5E9DF;
  --sim-ground: #EEF0EA;
  --ok: #567A60;
  --good: #567A60;
  --danger: #B33B13;
  --bad: #B33B13;
  --warn: #B06000;
  --warning-text: #7a4a12;
  --warning-surface: #FFF6EC;
  --warning-border: #D9822B;
  --x-brand: #F5632C;
  --x-brand-text: #B33B13;
  --xp-orange: #F5632C;
  --xp-orange-strong: #B33B13;
  --xp-success: #567A60;
  --xp-radius-sm: 8px;
  --xp-radius-md: 12px;
  --xp-shadow-drawer: 0 16px 34px rgba(46, 62, 48, 0.18);
  --ai-surface: #F7F8F3;
  --ai-line: rgba(36, 51, 45, 0.12);
  --ai-ink: #24332D;
  --ai-accent: #F5632C;
  --glass: rgba(255, 255, 252, 0.62);
  --glass-border: rgba(255, 255, 255, 0.88);
  --glass-solid: #F7F8F3;
  --glass-shadow: 0 8px 24px rgba(46, 62, 48, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --glass-blur: blur(18px) saturate(112%);
}

/* --------------------------------------------------------- the canvas */
:root[data-theme="light"] body { background: radial-gradient(ellipse at 86% 20%, #e5e9df 0, transparent 47%), #EEF0EA; }
:root[data-theme="light"] main { background: none; }

/* ---------------------------------------------------------- the chrome */
:root[data-theme="light"] .topbar {
  background: rgba(255, 255, 252, 0.56);
  border-bottom-color: var(--glass-border);
  box-shadow: none;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
:root[data-theme="light"] .home-nav { background: rgba(255, 255, 252, 0.22); border-bottom-color: rgba(255, 255, 255, 0.5); }
:root[data-theme="light"] .home-tab {
  text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 500;
  padding: .55rem .95rem; border-radius: 10px; color: var(--ink);
}
:root[data-theme="light"] .home-tab:hover { background: rgba(255, 255, 255, 0.55); }
:root[data-theme="light"] .home-tab.is-active { background: var(--orange-soft); color: var(--orange-ink); }
:root[data-theme="light"] .home-tab.is-active svg { stroke: var(--orange); }
:root[data-theme="light"] .topbar-pill-btn, :root[data-theme="light"] .theme-toggle {
  background: rgba(255, 255, 252, 0.6); border-color: var(--glass-border); border-radius: 10px;
}
:root[data-theme="light"] .edition-badge { border-color: var(--line); }

/* -------------------------------------------------------- the controls */
:root[data-theme="light"] .primary-button {
  color: #fff; background: #CF4314; border-color: transparent; border-radius: 10px; box-shadow: none; font-weight: 700;
}
:root[data-theme="light"] .primary-button:hover { filter: none; transform: none; background: #B83910; }
:root[data-theme="light"] .secondary-button { background: #FAFBF7; border-color: var(--line); border-radius: 10px; font-weight: 600; }
:root[data-theme="light"] .secondary-button:hover { background: #fff; border-color: var(--line); }
:root[data-theme="light"] .danger-button { border-radius: 10px; }
/* Not the code editors' input layers: those are transparent textareas laid
   over painted text, and an opaque background would hide the program. */
:root[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:root[data-theme="light"] select, :root[data-theme="light"] textarea:not(.code-input):not(.editor-area) {
  border-radius: 10px; background-color: #FFFEFB; border-color: var(--line);
}
:root[data-theme="light"] :focus-visible { outline-color: var(--ink); }
:root[data-theme="light"] .primary-button:focus-visible, :root[data-theme="light"] .secondary-button:focus-visible,
:root[data-theme="light"] input:focus-visible, :root[data-theme="light"] select:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------------------------------------------------------- the glass */
/* Frosted ivory panels: the cards of the hub, the menus, the dialogs and
   the panels of the workspace. Text inside stays fully opaque. */
:root[data-theme="light"] .project-card, :root[data-theme="light"] .home-card, :root[data-theme="light"] .robot-card,
:root[data-theme="light"] .class-card, :root[data-theme="light"] .learn-track-card, :root[data-theme="light"] .learn-state-card,
:root[data-theme="light"] .editor-shell, :root[data-theme="light"] .checks-panel, :root[data-theme="light"] .project-details,
:root[data-theme="light"] .code-view, :root[data-theme="light"] .dock, :root[data-theme="light"] .action-group,
:root[data-theme="light"] .ai-camera-stage, :root[data-theme="light"] .ai-cat, :root[data-theme="light"] .ai-card,
:root[data-theme="light"] .ai-class, :root[data-theme="light"] .ai-chrome, :root[data-theme="light"] .ai-recipe,
:root[data-theme="light"] .library-status, :root[data-theme="light"] .library-row, :root[data-theme="light"] .bluetooth-row,
:root[data-theme="light"] .device-option, :root[data-theme="light"] .school-signin, :root[data-theme="light"] .assignment-row,
:root[data-theme="light"] .checkpoint-item-row, :root[data-theme="light"] .lesson-nav-tabs, :root[data-theme="light"] .try-itself-panel,
:root[data-theme="light"] .try-editor-box, :root[data-theme="light"] .try-sim-box, :root[data-theme="light"] .sidebar-resource-item,
:root[data-theme="light"] .sidebar-hint-card, :root[data-theme="light"] .language-option,
:root[data-theme="light"] #workspace-view.xp-shell > aside#coach-rail, :root[data-theme="light"] .coach-option, :root[data-theme="light"] .coach-ask-form,
:root[data-theme="light"] .sp-story-card, :root[data-theme="light"] .sp-select-card, :root[data-theme="light"] .sp-detail-side,
:root[data-theme="light"] .sp-form-section, :root[data-theme="light"] .sp-choice {
  background: var(--glass); border-color: var(--glass-border); box-shadow: var(--glass-shadow);
}
:root[data-theme="light"] .project-card:hover, :root[data-theme="light"] .project-card:focus-visible {
  border-color: rgba(245, 99, 44, 0.45); box-shadow: 0 12px 30px rgba(46, 62, 48, 0.08); transform: translateY(-2px);
}
/* One blur layer per surface that floats over the page, not one per card. */
:root[data-theme="light"] .menu-panel, :root[data-theme="light"] .connect-popover, :root[data-theme="light"] .dock,
:root[data-theme="light"] #workspace-view.xp-shell > aside#coach-rail {
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
:root[data-theme="light"] .menu-panel, :root[data-theme="light"] .connect-popover {
  background: rgba(255, 255, 252, 0.94); border-color: var(--glass-border); box-shadow: 0 16px 40px rgba(46, 62, 48, 0.14); border-radius: 14px;
}
:root[data-theme="light"] dialog {
  background: var(--glass-solid); border-color: var(--glass-border); border-radius: 20px;
  box-shadow: 0 24px 80px rgba(24, 41, 28, 0.22);
}
:root[data-theme="light"] dialog::backdrop { background: rgba(32, 48, 38, 0.27); backdrop-filter: blur(5px); }
:root[data-theme="light"] .dialog-close { border-radius: 10px; background: rgba(36, 51, 45, 0.06); }
:root[data-theme="light"] .eyebrow { color: var(--orange-ink); }

/* The hub's hero: the League's greeting, not a poster. */
:root[data-theme="light"] h1 em { color: var(--orange); }

/* Blockly's canvas follows the tokens above; the flyout and toolbox too. */
:root[data-theme="light"] .blocklyToolboxDiv { background-color: var(--toolbox); }

/* Reduced effects: a solid panel where the blur would be. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="light"] .topbar, :root[data-theme="light"] .menu-panel, :root[data-theme="light"] .connect-popover { background: var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="light"] .topbar, :root[data-theme="light"] .menu-panel, :root[data-theme="light"] .connect-popover,
  :root[data-theme="light"] .dock, :root[data-theme="light"] #workspace-view.xp-shell > aside#coach-rail {
    backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--glass-solid);
  }
}

/* The AI Lab keeps its palette on its own element; retuned there too. */
:root[data-theme="light"] .ai2 {
  --ai-surface: #F7F8F3; --ai-surface-2: #EEF0EA; --ai-line: rgba(36, 51, 45, 0.12); --ai-ink: #24332D;
  --ai-muted: #5F6C65; --ai-accent: #F5632C; --ai-accent-soft: #FFF0E5; --ai-accent-ink: #B33B13;
}

/* ------------------------------------------------ the remaining controls */
/* Chips: peach when chosen, ivory otherwise, as the pack's scope controls. */
:root[data-theme="light"] .strip-chip, :root[data-theme="light"] .learn-filters button {
  border-radius: 10px; background: rgba(255, 255, 252, 0.6); border-color: var(--glass-border); color: var(--muted); font-weight: 500;
}
:root[data-theme="light"] .strip-chip[aria-pressed="true"], :root[data-theme="light"] .learn-filters button.is-active {
  background: var(--orange-soft); border-color: #f5dccb; color: var(--orange-ink);
}
/* The hero's Start and Learn's Continue: the pack's one action button. */
:root[data-theme="light"] .start-button, :root[data-theme="light"] .learn-button-primary {
  border-radius: 10px; border: 1px solid transparent; background: #CF4314; color: #fff; font-weight: 700;
}
:root[data-theme="light"] .start-button:hover, :root[data-theme="light"] .learn-button-primary:hover:not(:disabled) { background: #B83910; color: #fff; transform: none; }
:root[data-theme="light"] .learn-button { border-radius: 10px; }
:root[data-theme="light"] .learn-button-dark { background: #294139; color: #F7FAF1; }
:root[data-theme="light"] .learn-kicker-pill, :root[data-theme="light"] .learn-tag { border-radius: 6px; }
/* The bench's Run keeps its green (the pack's sage), with white text now readable on it. */
:root[data-theme="light"] .xp-run-green { background: #567A60; border-color: #567A60; color: #fff; }
:root[data-theme="light"] .xp-view-switch, :root[data-theme="light"] .xp-sim-tabs { border-radius: 11px; }
:root[data-theme="light"] .xp-view-switch button[aria-pressed="true"] { background: var(--orange-soft); color: var(--orange-ink); }

/* ------------------------------------------------ the portals, in glass */
/* The school administrator's portal (.sap) and the installer's console
   (.adp) keep their own token blocks and their own light surfaces in either
   IDE theme. Retuned to the pack here: the dark rail becomes the League's
   frosted ivory sidebar, cards become glass panels, the primary button the
   pack's action orange. Layout untouched. */
.sap, .sap-print-host, .sap-hosted, .adp {
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  --sap-orange: #F5632C; --sap-orange-dark: #B83910; --sap-orange-soft: #FFF0E5; --sap-orange-pale: #F7F8F3;
  --sap-black: #24332D; --sap-charcoal: #24332D; --sap-muted: #5F6C65; --sap-line: rgba(36, 51, 45, 0.12);
  --sap-surface: #F7F8F3; --sap-bg: #EEF0EA; --sap-success: #567A60; --sap-success-soft: #E6ECE1;
  --sap-danger: #B33B13; --sap-danger-soft: #FFF0E5; --sap-warning: #9A6700; --sap-warning-soft: #FFF6DC;
  --sap-radius-lg: 18px; --sap-radius-md: 10px; --sap-shadow: 0 8px 24px rgba(46, 62, 48, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --adp-orange: #F5632C; --adp-deep: #B33B13; --adp-ink: #24332D; --adp-text: #24332D; --adp-muted: #5F6C65;
  --adp-border: rgba(36, 51, 45, 0.12); --adp-bg: #EEF0EA; --adp-white: #F7F8F3; --adp-tint: #FFF0E5;
  --adp-green: #567A60; --adp-green-bg: #E6ECE1; --adp-radius: 18px; --adp-radius-s: 10px; --adp-input: 10px;
}
.sap h1, .sap h2, .sap h3, .sap-hosted h1, .sap-hosted h2, .sap-hosted h3, .adp h1, .adp h2, .adp h3, .adp-h1, .sap-metric-value, .sap-top-title h1 { font-family: var(--glass-heading); }
.sap, .adp { background: radial-gradient(ellipse at 86% 20%, #e5e9df 0, transparent 47%), #EEF0EA; }

/* The school portal's rail: ivory glass, ink text, peach for the current page. */
.sap-rail { background: rgba(255, 255, 252, 0.56); color: var(--sap-black); border-right: 1px solid rgba(255, 255, 255, 0.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.sap-brand { background: transparent; padding-left: 4px; }
.sap-rail-label { color: var(--sap-muted); }
.sap-nav button, .sap-rail-foot > button { color: var(--sap-black); }
.sap-nav button:hover, .sap-rail-foot > button:hover { background: rgba(255, 255, 255, 0.55); color: var(--sap-black); }
.sap-nav button[aria-current="page"] { background: var(--sap-orange-soft); color: #B33B13; box-shadow: inset 3px 0 0 var(--sap-orange); }
.sap-rail .sap-avatar { background: var(--sap-orange); color: #24332D; }
.sap-rail-foot .sap-mini small, .sap-rail-foot .sap-mini span { color: var(--sap-muted); }
.sap-top { background: rgba(255, 255, 252, 0.82); border-bottom: 1px solid rgba(255, 255, 255, 0.88); box-shadow: 0 1px 0 rgba(36, 51, 45, 0.06); backdrop-filter: blur(18px) saturate(112%); -webkit-backdrop-filter: blur(18px) saturate(112%); }
.sap-heading { align-items: flex-start; }
.sap-panel, .sap-metric, .sap-quick, .sap-recent-item, .sap-card { overflow: hidden; }
.sap-note { overflow-wrap: anywhere; }
.sap-who, .sap-metric, .sap-panel, .sap-quick, .sap-signin-card, .sap-recent-item, .sap-card, .sap-dialog {
  background: rgba(255, 255, 252, 0.62); border-color: rgba(255, 255, 255, 0.88); box-shadow: var(--sap-shadow);
}
.sap-dialog { background: #F7F8F3; }
.sap-btn { background: #FAFBF7; border-color: var(--sap-line); border-radius: 10px; font-weight: 600; }
.sap-btn:hover { background: #fff; border-color: var(--sap-line); }
.sap-btn-primary, .sap-btn-primary:hover { color: #fff; background: #CF4314; border-color: transparent; }
.sap-btn-primary:hover { background: #B83910; }
.sap-metric-icon { background: var(--sap-orange-soft); color: #B33B13; }
.sap :focus-visible, .sap-hosted :focus-visible { outline: 3px solid var(--sap-black); outline-offset: 2px; }

/* The administrator's console: same treatment. */
.adp-head { background: rgba(255, 255, 252, 0.56); border-bottom-color: rgba(255, 255, 255, 0.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.adp-side { background: rgba(255, 255, 252, 0.56); border-right-color: rgba(255, 255, 255, 0.88); }
.adp-nav button[aria-current="page"] { box-shadow: inset 3px 0 0 var(--adp-orange); }
.adp-card { background: rgba(255, 255, 252, 0.62); border-color: rgba(255, 255, 255, 0.88); box-shadow: var(--sap-shadow, 0 8px 24px rgba(46, 62, 48, 0.045)); }
.adp-btn { border-radius: 10px; }
.adp-btn-primary, .adp-btn-primary:hover { color: #fff; background: #CF4314; border-color: transparent; filter: none; }
.adp-btn-primary:hover { background: #B83910; }
@media (prefers-reduced-transparency: reduce) {
  .sap-rail, .sap-top, .adp-head, .adp-side { backdrop-filter: none; -webkit-backdrop-filter: none; background: #F7F8F3; }
}