/* Iron Forge Pro Console — shell styles. Reuses the consumer app's theme tokens
   (kept in sync by hand) so the Pro surface is on-brand. Lean + self-contained;
   this is the W3a shell, not the full design system. */
:root {
  color-scheme: dark;
  --bg: #0f172a;
  --surface: #1e293b;
  --surface-2: #334155;
  --border: #475569;
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --text: #f8fafc;
  --text-secondary: #94a3b8;
  --danger: #ef4444;
  --success: #22c55e;
  --warning: #f59e0b;
  --radius: 12px;
  --radius-sm: 8px;
  /* spacing + type scale (1a restyle) — use these instead of ad-hoc px for consistency */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --font-h1: 1.5rem;
  --font-h2: 1.15rem;
  --font-h3: 1rem;
  --ring: color-mix(in srgb, var(--primary) 35%, transparent);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f5f9; --surface: #ffffff; --surface-2: #e2e8f0; --border: #cbd5e1;
  --primary: #2563eb; --primary-dark: #1d4ed8; --text: #0f172a; --text-secondary: #475569;
}
/* High contrast — white surfaces, black borders, an AAA-tuned blue accent that
   keeps white-on-accent legible. Mirrors the PWA's high-contrast palette.
   (feat_theme_parity_pro_admin) */
[data-theme="high-contrast"] {
  color-scheme: light;
  --bg: #ffffff; --surface: #ffffff; --surface-2: #e6e6e6; --border: #000000;
  --primary: #0033cc; --primary-dark: #002299; --text: #000000; --text-secondary: #1a1a1a;
  --danger: #b00000; --success: #006b2d; --warning: #6b4500;
}
[data-theme="high-contrast"] .card { border: 1px solid var(--border); }
[data-theme="high-contrast"] :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
/* Noir — true-black OLED with a MONOCHROME white accent. Because --primary is
   white, anything FILLED with it needs dark text (the chrome otherwise hardcodes
   white-on-primary). Semantic colours stay coloured so errors still read. */
[data-theme="noir"] {
  color-scheme: dark;
  --bg: #000000; --surface: #0a0a0a; --surface-2: #161616; --border: #1c1c1c;
  --primary: #ffffff; --primary-dark: #e0e0e0; --text: #f5f5f5; --text-secondary: #8a8a8a;
  --danger: #ef4444; --success: #22c55e; --warning: #f59e0b;
}
[data-theme="noir"] .card { border: 1px solid var(--border); }
/* A surface/outline button on pure black is nearly invisible — a slim border (a
   hair lighter than the faint card --border) makes its edge read.
   (fix_noir_theme_button_border) */
[data-theme="noir"] .btn { border: 1px solid #333; }
[data-theme="noir"] .btn-primary,
[data-theme="noir"] .nav-item.active { color: #000; }
/* Fully black & white: desaturate everything the palette can't reach — coloured
   emoji nav icons, the tenant logo/accent, charts. Grayscale on the document ROOT
   does it in one stroke; per spec the root is exempt from creating a containing
   block, so fixed overlays (modals) aren't broken. Mirrors the PWA's Noir.
   (user 2026-06-30: Noir must grayscale the icons too) */
html[data-theme="noir"] { filter: grayscale(1); }
/* Blanc — the inverse of Noir: paper-white surfaces, near-black text, a MONOCHROME
   black accent. --primary is black and the chrome hardcodes white-on-primary, so
   filled primary controls stay legible with no override. Grayscales the document
   like Noir for a true black-&-white light theme. Mirrors the PWA's Blanc.
   (feat_blanc_theme) */
[data-theme="blanc"] {
  color-scheme: light;
  --bg: #ffffff; --surface: #f7f7f7; --surface-2: #ededed; --border: #e0e0e0;
  --primary: #000000; --primary-dark: #1f1f1f; --text: #0a0a0a; --text-secondary: #6b6b6b;
  --danger: #ef4444; --success: #22c55e; --warning: #f59e0b;
}
[data-theme="blanc"] .card { border: 1px solid var(--border); }
/* A light .btn on white loses its edge — a slim border keeps buttons discernible
   (the light counterpart of fix_noir_theme_button_border). */
[data-theme="blanc"] .btn { border: 1px solid var(--border); }
html[data-theme="blanc"] { filter: grayscale(1); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
a { color: var(--primary); text-decoration: none; }
h1, h2, h3 { margin: 0 0 8px; line-height: 1.25; }
h1 { font-size: var(--font-h1); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: var(--font-h2); font-weight: 700; }
h3 { font-size: var(--font-h3); font-weight: 700; }
.text-secondary { color: var(--text-secondary); }
.text-sm { font-size: 0.85em; }
.muted { color: var(--text-secondary); }

.spinner {
  display: inline-block; width: 24px; height: 24px; border: 3px solid var(--surface-2);
  border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite;
}
.center-spinner { display: grid; place-items: center; min-height: 60vh; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: var(--radius-sm); padding: 10px 16px;
  font-size: 0.95rem; font-weight: 600; cursor: pointer; background: var(--surface-2); color: var(--text);
}
.btn:hover { filter: brightness(1.08); }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--border); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-block { width: 100%; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}
.badge {
  display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; background: var(--surface-2); color: var(--text-secondary);
}
.badge-soon { background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--warning); }

/* Account hub (feat_pro_account_hub): identity hero + circular avatar. */
.account-hero { display: flex; align-items: center; gap: var(--space-4); }
.avatar {
  width: 56px; height: 56px; flex: none; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.25rem; letter-spacing: 0.02em;
}

/* Text-like controls fill their row; checkboxes/radios are sized separately below. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font-size: 1rem; font-family: inherit;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
input:disabled { opacity: 0.7; cursor: default; }
/* Custom dropdown chevron, inset from the right edge (the native arrow sits flush to the box
   edge — owner 2026-06-30). select:not([multiple]) (0,1,1) beats single-class select rules. */
select:not([multiple]) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 34px;
}
/* Themed checkboxes + radios (global fix — the base width:100% used to stretch them). */
input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--primary); cursor: pointer;
}
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; margin-bottom: 4px; }
.error-msg { color: var(--danger); margin: 0 0 10px; }

/* ── public (landing / login) ── */
.public { max-width: 920px; margin: 0 auto; padding: 32px 20px; }
.hero { text-align: center; padding: 48px 0 32px; }
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.hero p { color: var(--text-secondary); font-size: 1.1rem; max-width: 620px; margin: 8px auto 24px; }
.feature-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 32px; }
.auth-box { max-width: 380px; margin: 8vh auto; }

/* ── console shell ── */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
/* Sticky, viewport-height column so the foot (Sign out) stays at the bottom of
   the viewport even on tall sections (Branding/Features) — previously the sidebar
   stretched to content height and pushed Sign out below the fold. (fix_pro_branding_features_merge) */
.sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 18px 12px; display: flex; flex-direction: column; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; }
.brand { font-weight: 800; font-size: 1.1rem; padding: 8px 10px 18px; display: flex; align-items: center; gap: 8px; }
.nav-groups { display: flex; flex-direction: column; gap: var(--space-3); }
.nav-group { display: flex; flex-direction: column; }
.nav-group-label {
  text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.07em; font-weight: 700;
  color: var(--text-secondary); padding: 2px 12px 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text-secondary); cursor: pointer; font-weight: 600; margin-bottom: 2px;
}
.nav-ico { width: 1.25em; text-align: center; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--primary); color: #fff; }
.sidebar-foot { margin-top: auto; padding: 10px; }
/* Home hub quick-link tiles (feat_pro_home_landing). */
.home-tile { cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.home-tile:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.nav-item-home { margin-bottom: var(--space-2); }
/* Foot actions (feat_pro_settings_foot_single_row): Take a tour · Settings · Sign out as a
   single row of icon buttons. Settings routes to the Account page (which carries Sign out). */
.pro-foot-actions { display: flex; gap: 8px; }
.pro-foot-btn { flex: 1; padding: 9px 0; }
.pf-ico { font-size: 1.15rem; line-height: 1; }
/* Workspace switcher (feat_pro_workspace_switcher) — only present when the user owns >1. */
.ws-switch { padding: 0 10px 12px; }
.ws-select { width: 100%; }
.content { padding: var(--space-6) var(--space-6); max-width: 1000px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-5); gap: var(--space-3); }
.page-head h1 { margin: 0; }
.page-sub { color: var(--text-secondary); font-size: 0.9rem; margin-top: 4px; }
.grid-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.stat { font-size: 1.8rem; font-weight: 800; }
/* Tappable card (dashboard stat tiles, quick actions). */
a.card { text-decoration: none; color: inherit; transition: border-color 0.12s, background 0.12s; }
a.card:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 12px 0; border-top: 1px solid var(--border); }
.list-row:first-child { border-top: none; }
/* Small layout utilities used across the console (were referenced but never defined,
   which left rows that relied on them cramped + un-flexed). */
.flex { display: flex; }
.gap-8 { gap: var(--space-2); }
.mt-8 { margin-top: var(--space-2); }
.mt-12 { margin-top: var(--space-3); }
.btn-sm { padding: 6px 10px; font-size: 0.85rem; }
.divider { border: none; border-top: 1px solid var(--border); }

/* ── Collapsible sidebar (feat_collapsible_sidebars) ──
   A desktop toggle shrinks the nav to a 64px icon rail. The brand row holds the
   toggle; collapsing hides labels/brand-name/group-labels/email + swaps Sign out
   to an icon. Persisted via localStorage 'pro_sidebar_collapsed'. */
.brand { justify-content: space-between; }
.brand-main { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.nav-collapse-btn {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  font-size: 1.05rem; line-height: 1; padding: 4px 7px; border-radius: var(--radius-sm); flex: none;
}
.nav-collapse-btn:hover { background: var(--surface-2); color: var(--text); }
.so-ico { display: none; }
@media (min-width: 721px) {
  .shell.nav-collapsed { grid-template-columns: 64px 1fr; }
  .nav-collapsed .brand-main,
  .nav-collapsed .nav-group-label,
  .nav-collapsed .nav-item > span:not(.nav-ico),
  .nav-collapsed .sidebar-foot > div,
  .nav-collapsed .so-label { display: none; }
  .nav-collapsed .brand { justify-content: center; padding: 8px 0 18px; }
  /* Collapsed rail hides the group labels, so the Member/Coach/Company groups
     run together — a separator line keeps them distinguishable. (owner UX 2026-06-29) */
  .nav-collapsed .nav-group + .nav-group { border-top: 1px solid var(--border); padding-top: var(--space-3); }
  .nav-collapsed .nav-item { justify-content: center; gap: 0; padding: 9px 0; }
  .nav-collapsed .nav-ico { width: auto; font-size: 1.15rem; }
  .nav-collapsed .sidebar { padding: 18px 8px; }
  .nav-collapsed .sidebar-foot { padding: 10px 0; }
  .nav-collapsed .so-ico { display: inline; }
  /* The foot actions stack vertically in the 64px rail so the three icon buttons stay tappable. */
  .nav-collapsed .pro-foot-actions { flex-direction: column; gap: 6px; }
  /* The workspace switcher is text-heavy — hide it in the icon rail. */
  .nav-collapsed #ws-switch-slot { display: none; }
}

/* Mobile top bar + off-canvas drawer + "bigger screen" notice — hidden on desktop/tablet.
   (feat_pro_mobile_drawer_and_notice, supersedes the old horizontal chip strip.) */
.mobile-topbar { display: none; }
.nav-backdrop { display: none; }
.mobile-notice { display: none; }

/* Phones: the console is built for tablet/desktop. The sidebar slides in from the left behind a
   hamburger; a one-time notice explains the small-screen caveat. */
@media (max-width: 720px) {
  .shell { grid-template-columns: 1fr; }
  .nav-collapse-btn { display: none; } /* rail collapse is a desktop affordance */

  /* Fixed top bar: hamburger + brand. */
  .mobile-topbar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 52px; padding: 0 12px;
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .mtb-burger { background: none; border: 0; color: var(--text); font-size: 1.4rem; line-height: 1; padding: 6px 8px; cursor: pointer; border-radius: var(--radius-sm); }
  .mtb-burger:hover { background: var(--surface-2); }
  .mtb-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; min-width: 0; overflow: hidden; white-space: nowrap; }

  /* The sidebar is an off-canvas drawer. */
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 60; height: 100dvh; width: min(82vw, 300px);
    transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
  }
  .shell.drawer-open .sidebar { transform: translateX(0); }
  .nav-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.5); }
  .shell.drawer-open .nav-backdrop { display: block; }

  /* Content clears the fixed top bar. */
  .content { padding: calc(52px + var(--space-4)) var(--space-4) var(--space-4); }

  /* The notice sits at the top of the content. */
  .mobile-notice {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-2); font-size: 0.85rem; color: var(--text-secondary);
  }
  .mobile-notice-x { margin-left: auto; background: none; border: 0; color: var(--text-secondary); font-size: 1rem; line-height: 1; cursor: pointer; padding: 2px 4px; flex: none; }
}

/* ── Advanced engine editor (feat_pro_advanced_engine_editor) ─────────────────
   DUPLICATE of the .ps-* block in frontend/pwa/css/app.css — kept in step until
   chore_consolidate_progression_editor. Plus .ps-toast (Pro-only minimal toast). */
/* ── Progression scripting authoring (feat_progression_scripting_authoring_ui) ── */
.ps-intro, .ps-library .ps-intro { color: var(--text-secondary); margin: 4px 0 16px; }
.ps-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ps-actions .btn { flex: 1 1 auto; }
.ps-section { font-size: 15px; margin: 22px 0 8px; }
.ps-script-card { display: block; text-decoration: none; color: inherit; margin-top: 8px; }
.ps-script-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.ps-script-sub { color: var(--text-secondary); font-size: 13px; margin-top: 4px; }
.ps-hook-tag { display: inline-block; font-family: ui-monospace, monospace; font-size: 11px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 1px 6px; }
.ps-origin { font-size: 11px; color: var(--text-secondary); }
.ps-status { font-size: 11px; border-radius: var(--radius-sm); padding: 1px 7px; text-transform: capitalize; }
.ps-status-pending { background: var(--warning); color: #2a1d00; }
.ps-status-approved { background: var(--success); color: #032a12; }
.ps-status-rejected { background: var(--danger); color: #fff; }
.ps-refs { display: grid; gap: 8px; }
.ps-ref-card { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: inherit; }
.ps-ref-card span { color: var(--text-secondary); font-size: 13px; }
.ps-ref-card .ps-hook-tag { align-self: flex-start; }

/* editor widget */
.ps-editor { display: flex; flex-direction: column; gap: 10px; }
.ps-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ps-toolbar .btn { flex: 0 0 auto; }
.ps-fork-wrap { position: relative; }
.ps-fork-menu { position: absolute; z-index: 30; top: 100%; left: 0; margin-top: 4px; width: min(320px, 86vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.28); overflow: hidden; }
.ps-fork-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; background: none; border: none; border-bottom: 1px solid var(--border); cursor: pointer; color: inherit; }
.ps-fork-item:last-child { border-bottom: none; }
.ps-fork-item:hover { background: var(--surface-2); }
.ps-fork-item span { font-size: 12px; color: var(--text-secondary); }

.ps-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ps-name-input { flex: 2 1 180px; }
.ps-desc-input { flex: 3 1 220px; }
.ps-hook-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.ps-hook-select { padding: 6px; }
.ps-hooks-detected { flex-basis: 100%; font-size: 12px; color: var(--primary); }

.ps-code-wrap { position: relative; display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.ps-gutter { margin: 0; padding: 10px 6px 10px 10px; text-align: right; color: var(--text-secondary); opacity: .6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; user-select: none;
  overflow: hidden; min-width: 2.4em; background: var(--surface-2); white-space: pre; }
/* The code panel is a transparent-text textarea stacked over a syntax-highlighted <pre>
   that share an identical box + typography, so the highlight tracks the caret exactly.
   (feat_engine_builder_syntax_highlight) */
.ps-code-stack { position: relative; flex: 1; min-width: 0; min-height: 320px; }
.ps-hl, .ps-code {
  position: absolute; inset: 0; margin: 0; padding: 10px; border: 0; box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5;
  tab-size: 2; white-space: pre; }
.ps-hl { overflow: hidden; pointer-events: none; background: var(--bg); color: var(--text); }
.ps-hl code { font: inherit; white-space: inherit; }
.ps-code { resize: none; background: transparent; color: transparent; caret-color: var(--text); overflow: auto; }
.ps-code:focus { outline: none; }
/* Token colours — theme-adaptive (color-mix against the active --text / --primary). */
.ps-t-cm { color: var(--text-secondary); font-style: italic; }
.ps-t-kw { color: var(--primary); }
.ps-t-ty { color: color-mix(in srgb, var(--primary) 55%, var(--text)); }
.ps-t-str { color: color-mix(in srgb, var(--text) 45%, #d98b4a); }
.ps-t-num { color: color-mix(in srgb, var(--text) 45%, #57a64a); }
/* "Show changes": diff folded into the code panel (feat_engine_builder_diff_toggle). */
.ps-diffov { position: absolute; inset: 0; margin: 0; padding: 10px 0; overflow: auto; z-index: 2;
  background: var(--bg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; }
/* A walkthrough amendment can span several added lines — the wrapper gives the spotlight one box
   around the whole change. (fix_engine_walkthrough_rects_and_problems) */
.ps-amend-group { display: block; scroll-margin: 80px; }
.ps-dl { display: flex; white-space: pre; }
.ps-dl-sign { width: 1.8em; flex: none; text-align: center; color: var(--text-secondary); user-select: none; }
.ps-dl-code { white-space: pre; }
.ps-dl-add { background: color-mix(in srgb, #2ea043 18%, transparent); }
.ps-dl-del { background: color-mix(in srgb, #f85149 18%, transparent); }
.ps-showchanges { display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }

.ps-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-top: 2px; }
.ps-tab { background: none; border: none; padding: 8px 12px; cursor: pointer; color: var(--text-secondary); font-weight: 600; font-size: 13px; border-bottom: 2px solid transparent; }
.ps-tab.active { color: var(--text); border-bottom-color: var(--primary); }
.ps-badge { display: inline-block; min-width: 18px; text-align: center; background: var(--danger); color: #fff; border-radius: 9px; font-size: 11px; padding: 0 5px; }
.ps-panels { min-height: 120px; }
.ps-panel { padding: 10px 2px; }
.ps-contract, .ps-sample, .ps-json { margin: 0; padding: 10px; background: var(--surface-2); border-radius: var(--radius);
  font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.45; overflow: auto; max-height: 360px; white-space: pre; }

/* Editable preview fixture (feat_engine_builder_preview_fixtures). */
.ps-sample-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ps-sample-hint { font-size: 12px; color: var(--text-secondary); }
.ps-sample-edit { width: 100%; box-sizing: border-box; min-height: 220px; resize: vertical; padding: 10px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.45; white-space: pre; }
.ps-sample-status { margin-top: 6px; font-size: 12px; color: var(--text-secondary); }
.ps-sample-status.edited { color: var(--primary); }
.ps-sample-status.error { color: var(--danger, #f85149); }

.ps-result { display: flex; flex-direction: column; gap: 6px; }
.ps-result-scope { font-size: 11px; color: var(--text-secondary); font-family: ui-monospace, monospace; }
.ps-result-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius); }
.ps-result-key { font-weight: 700; }
.ps-slot { font-size: 13px; }
.ps-slot strong { color: var(--success); }
.ps-hold { color: var(--text-secondary); }
.ps-ok { color: var(--success); font-weight: 600; }
.ps-warn { color: var(--warning); font-weight: 600; }
.ps-err { color: var(--danger); }
.ps-err code { background: var(--surface-2); padding: 1px 4px; border-radius: 4px; }

.ps-problem { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; margin-bottom: 6px;
  background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--danger); border-radius: var(--radius); cursor: pointer; color: inherit; }
.ps-problem-loc { font-size: 11px; color: var(--text-secondary); }
.ps-problem-tok { font-family: ui-monospace, monospace; font-weight: 700; color: var(--danger); }
.ps-problem-msg { font-size: 13px; }
.ps-import-input { width: 100%; margin: 8px 0; }

/* lessons */
.ps-lesson-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; background: var(--surface); }
.ps-lesson-top { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.ps-lesson-step { font-size: 12px; color: var(--text-secondary); font-weight: 700; }
.ps-lesson-feature { font-size: 11px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 2px 8px; }
.ps-lesson-body { color: var(--text); line-height: 1.55; }
.ps-lesson-body code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 12px; }
.ps-lesson-body ul { padding-left: 18px; }
.ps-lesson-try { margin-top: 10px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius); font-size: 14px; }
.ps-lesson-nav { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ps-lesson-nav .btn { flex: 1 1 auto; }

/* roomier editor on wider screens */
@media (min-width: 760px) {
  .ps-code-stack { min-height: 420px; }
}

.ps-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--text, #111); color: var(--bg, #fff); padding: 10px 16px; border-radius: 8px;
  font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.3); opacity: 0; transition: opacity .2s, transform .2s;
  z-index: 10000; pointer-events: none; }
.ps-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Lessons "what changed" git-style diff (feat_pro_advanced_engine_editor). */
.ps-diff { margin: 0 0 10px; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: auto; max-height: 240px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.5; background: var(--surface-2); }
.ps-diff-line { display: block; white-space: pre; padding: 0 8px; }
.ps-diff-add { background: rgba(46, 160, 67, .18); color: var(--success, #2ea043); }
.ps-diff-del { background: rgba(248, 81, 73, .18); color: var(--danger, #f85149); }
.ps-diff-ctx { color: var(--text-secondary); }

/* Guided-tour popover, themed to the Pro dark tokens (driver.js ships a white popover).
   (feat_engine_tour_overhaul) */
.driver-popover.pro-tour { background-color: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.5); max-width: 340px; padding: 18px 20px; }
.driver-popover.pro-tour .driver-popover-title { color: var(--text); font-family: inherit; font-size: 1.05rem; font-weight: 700; }
.driver-popover.pro-tour .driver-popover-description { color: var(--text-secondary); font-family: inherit; font-size: 0.9rem; line-height: 1.5; }
.driver-popover.pro-tour .driver-popover-description b,
.driver-popover.pro-tour .driver-popover-description strong { color: var(--text); }
.driver-popover.pro-tour .driver-popover-description code { background: var(--surface-2); color: var(--text);
  padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 12px; }
.driver-popover.pro-tour .driver-popover-progress-text { color: var(--text-secondary); font-size: 0.8rem; }
.driver-popover.pro-tour .driver-popover-close-btn { color: var(--text-secondary); }
.driver-popover.pro-tour .driver-popover-close-btn:hover,
.driver-popover.pro-tour .driver-popover-close-btn:focus { color: var(--text); }
/* footer buttons — mirror .btn / .btn-primary; no hover change (keyboard focus ring only) */
.driver-popover.pro-tour .driver-popover-footer { margin-top: 16px; }
.driver-popover.pro-tour .driver-popover-footer button { background-color: var(--surface-2); color: var(--text);
  border: 1px solid transparent; border-radius: var(--radius-sm); text-shadow: none; font-family: inherit;
  font-size: 0.85rem; font-weight: 600; padding: 7px 14px; }
/* No hover state on the tour buttons (owner: don't change on hover) — keep only a keyboard
   focus ring for accessibility. (fix_pro_tour_no_hover_change) */
.driver-popover.pro-tour .driver-popover-footer button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* The primary/Next button is the accent colour. Selector must out-specify the neutral
   `…-footer button` rule above (0,3,1) — `button.driver-popover-next-btn` under the footer is
   (0,4,1), else Next inherits the surface-2 style + driver's default hover. (fix_pro_tour_next_btn_accent) */
.driver-popover.pro-tour .driver-popover-footer button.driver-popover-next-btn {
  background-color: var(--primary); border-color: var(--primary); color: #fff; }
/* retint only the visible (non-transparent) edge of the arrow so it matches the popover */
.driver-popover.pro-tour .driver-popover-arrow-side-left { border-left-color: var(--surface); }
.driver-popover.pro-tour .driver-popover-arrow-side-right { border-right-color: var(--surface); }
.driver-popover.pro-tour .driver-popover-arrow-side-top { border-top-color: var(--surface); }
.driver-popover.pro-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--surface); }

/* "Write my engine with AI" prompt modal (feat_engine_builder_ai_prompt). */
.ps-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 10001;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.ps-modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  width: min(760px, 100%); max-height: 90vh; display: flex; flex-direction: column; padding: 18px 20px; }
.ps-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ps-modal-head strong { font-size: 1.05rem; }
.ps-modal-sub { color: var(--text-secondary); font-size: 0.9rem; margin: 8px 0 12px; }
.ps-modal-prompt { flex: 1; min-height: 280px; width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; }
.ps-modal-foot { display: flex; gap: 10px; margin-top: 14px; }