@import url("./math-display.css?v=20260909-calculus-v1");

:root {
  --paper: #f3eee3;
  --paper-deep: #e8dfce;
  --paper-light: #fffdf8;
  --ink: #16211d;
  --muted: #68716b;
  --line: #d6cdbd;
  --pine: #153f36;
  --pine-2: #205c4e;
  --mint: #b8d9c9;
  --lime: #dceca9;
  --coral: #df755b;
  --blue: #2f74c0;
  --amber: #c47a18;
  --green: #2f8f46;
  --deep-green: #176b34;
  --red: #c43d3d;
  --shadow: 0 18px 54px rgba(33, 47, 39, 0.1);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.5; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
a { color: var(--pine-2); }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  transform: translateY(-150%);
  padding: 9px 13px;
  color: #fff;
  background: var(--pine);
  border-radius: 9px;
}
.skip-link:focus { transform: translateY(0); }

.eyebrow { margin: 0 0 8px; color: var(--pine-2); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 17px; color: inherit; text-align: center; text-decoration: none; border: 1px solid transparent; border-radius: 12px; cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 850; line-height: 1.2; transition: transform 140ms ease, box-shadow 140ms ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: var(--pine); box-shadow: 0 9px 20px rgba(21, 63, 54, .16); }
.button-secondary { color: var(--pine); background: var(--mint); }
.button-outline { color: var(--pine); background: transparent; border-color: var(--line); }
.quiet-button, .text-button { padding: 0; color: var(--pine-2); background: transparent; border: 0; cursor: pointer; font-size: 12px; font-weight: 800; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

.loading-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); }
.loading-screen img { object-fit: contain; }

/* Landing / profiles */
.welcome-screen {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 5%, rgba(220, 236, 169, .7), transparent 27rem),
    linear-gradient(90deg, transparent 31px, rgba(21, 63, 54, .03) 32px, transparent 33px),
    var(--paper);
  background-size: auto, 32px 32px, auto;
}
.welcome-header { width: min(1420px, calc(100% - 64px)); min-height: 94px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.welcome-brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 700 26px/.95 "Times New Roman", Times, serif; letter-spacing: -.02em; }
.welcome-brand img { object-fit: contain; mix-blend-mode: multiply; }
.local-pill { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; color: var(--muted); background: rgba(255,255,255,.45); border: 1px solid var(--line); border-radius: 99px; font-size: 11px; }
.local-pill i { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(47,143,70,.11); }
.welcome-main { position: relative; z-index: 2; width: min(1280px, calc(100% - 64px)); margin: 0 auto; min-height: calc(100vh - 156px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(390px, .68fr); gap: clamp(52px, 8vw, 120px); align-items: center; padding: 52px 0 76px; }
.welcome-copy h1 { max-width: 810px; margin: 0; font: 500 clamp(52px, 6.5vw, 94px)/.93 var(--serif); letter-spacing: -.055em; }
.welcome-copy h1 em { color: var(--pine-2); font-weight: 500; }
.welcome-lede { max-width: 690px; margin: 26px 0; color: var(--muted); font-size: clamp(16px, 1.5vw, 20px); }
.welcome-proof { display: flex; flex-wrap: wrap; gap: 16px; }
.welcome-proof span { min-width: 132px; padding-right: 18px; color: var(--muted); border-right: 1px solid var(--line); font-size: 11px; }
.welcome-proof span:last-child { border: 0; }
.welcome-proof strong { display: block; color: var(--ink); font: 600 28px/1 var(--serif); }
.welcome-agent-boundary { display: flex; gap: 10px; max-width: 690px; margin-top: 22px; padding: 13px 15px; color: var(--pine); background: color-mix(in srgb, var(--mint) 58%, white); border-left: 3px solid var(--pine-2); border-radius: 0 13px 13px 0; font-size: 11px; line-height: 1.55; }
.welcome-agent-boundary strong { flex: 0 0 auto; }
.profile-panel { padding: clamp(24px, 3vw, 38px); background: rgba(255,253,248,.94); border: 1px solid rgba(22,33,29,.1); border-radius: var(--radius-xl); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.panel-heading h2 { margin: 0; font: 600 32px/1.05 var(--serif); }
.profile-list { display: grid; gap: 10px; margin: 24px 0 20px; }
.profile-card { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px; text-align: left; background: #f9f5ec; border: 1px solid var(--line); border-radius: 15px; cursor: pointer; transition: border-color 140ms ease, transform 140ms ease; }
.profile-card:hover { transform: translateY(-1px); border-color: var(--pine-2); }
.profile-card .avatar { flex: 0 0 42px; }
.profile-card span { min-width: 0; flex: 1; }
.profile-card strong, .profile-card small { display: block; }
.profile-card small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.profile-card b { color: var(--pine-2); font-size: 18px; }
.empty-profiles { padding: 22px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 15px; font-size: 12px; }
.create-profile-form { padding-top: 20px; border-top: 1px solid var(--line); }
.create-profile-form label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 850; }
.input-action { display: flex; gap: 8px; }
.input-action input { min-width: 0; flex: 1; height: 44px; padding: 0 13px; color: var(--ink); background: #fbf8f1; border: 1px solid var(--line); border-radius: 12px; }
.form-message { min-height: 18px; margin: 7px 0 0; color: var(--red); font-size: 11px; }
.welcome-storage-restore { margin-top: 20px; padding: 16px; border: 1px solid color-mix(in srgb, var(--pine) 22%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--mint) 42%, var(--paper-light)); }
.welcome-storage-restore > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--ink); cursor: pointer; list-style: none; }
.welcome-storage-restore > summary::-webkit-details-marker { display: none; }
.welcome-storage-restore > summary span, .welcome-storage-restore > summary strong, .welcome-storage-restore > summary small { display: block; }
.welcome-storage-restore > summary strong { font-size: 15px; line-height: 1.25; }
.welcome-storage-restore > summary small { margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.4; }
.welcome-storage-restore > summary b { flex: 0 0 auto; padding: 10px 13px; color: #fff; background: var(--pine); border-radius: 10px; font-size: 11px; box-shadow: 0 8px 18px color-mix(in srgb, var(--pine) 14%, transparent); }
.welcome-storage-restore[open] > summary b { color: #fff; background: var(--pine); }
.welcome-storage-body > p { margin: 14px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.welcome-github-sync-form { gap: 11px; margin-top: 13px; padding-top: 13px; }
.welcome-github-sync-form .bridge-token-form { gap: 11px; }
.welcome-github-sync-form .github-repo-fields { grid-template-columns: 1fr 1fr; gap: 8px; }
.welcome-github-sync-form .github-repo-fields label:last-child { grid-column: 1 / -1; }
.welcome-github-sync-form label { gap: 5px; font-size: 10px; }
.welcome-github-sync-form input { min-height: 40px; }
.welcome-github-sync-form .bridge-remember small, .welcome-github-sync-form .bridge-form-note { font-size: 9px; }
.profile-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 12px; }
.profile-panel-footer p { max-width: 210px; margin: 0; color: var(--muted); text-align: right; font-size: 9px; }
.welcome-footer { position: absolute; left: 32px; bottom: 20px; color: var(--muted); font-size: 10px; }
.math-scribble { position: absolute; z-index: 1; color: rgba(21,63,54,.06); font: 500 100px/1 var(--serif); transform: rotate(-9deg); }
.scribble-one { left: -15px; bottom: 6%; }
.scribble-two { right: 4%; top: 12%; font-size: 150px; }
.scribble-three { right: -30px; bottom: -12px; font-size: 54px; }

/* Persistent application shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0, 1fr) 326px; background: var(--paper); }
.app-shell.agent-collapsed { grid-template-columns: 236px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 18px 18px; color: #edf4ef; background: var(--pine); border-right: 1px solid rgba(255,255,255,.08); }
.sidebar-brand { display: flex; align-items: center; gap: 7px; padding: 0 7px 15px; border-bottom: 1px solid rgba(255,255,255,.12); }
.sidebar-brand img { object-fit: contain; filter: brightness(0) invert(1); opacity: .95; }
.sidebar-brand strong, .sidebar-brand small { display: block; }
.sidebar-brand strong { font: 700 22px/.95 "Times New Roman", Times, serif; letter-spacing: -.02em; }
.sidebar-brand small { margin-top: 3px; color: #9fb9aa; font-size: 9px; }
.clock-card { display: grid; justify-items: center; padding: 16px 0 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.analog-clock { width: 128px; height: 128px; display: block; }
.clock-face { fill: #fffdf8; stroke: #abc5b6; stroke-width: 2; }
.clock-tick-hour { stroke: #173f37; stroke-width: 3.5; stroke-linecap: round; }
.clock-tick-minute { stroke: #93aa9e; stroke-width: 1.2; stroke-linecap: round; }
.clock-hand { stroke: #17211d; stroke-linecap: round; }
.clock-hour { stroke-width: 5.5; }
.clock-minute { stroke-width: 3.8; }
.clock-second { stroke: var(--coral); stroke-width: 1.8; }
.clock-center { fill: #17211d; }
.timer-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.timer-grid span { color: #9fb9aa; text-align: center; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.timer-grid strong { display: block; margin-top: 2px; color: #fff; font-size: 11px; letter-spacing: 0; text-transform: none; }
.main-nav { display: grid; gap: 4px; margin: 16px 0; }
.main-nav button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; padding: 0 12px; color: #bfd0c6; text-align: left; background: transparent; border: 0; border-radius: 10px; cursor: pointer; font-size: 11px; font-weight: 750; }
.main-nav button span { width: 18px; color: #8faf9d; text-align: center; font-size: 17px; }
.main-nav button:hover, .main-nav button[aria-current="page"] { color: #fff; background: rgba(255,255,255,.09); }
.main-nav button[aria-current="page"] span { color: var(--lime); }
.sidebar-profile { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 4px; margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.12); }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; color: var(--pine); background: var(--lime); border-radius: 50% 50% 50% 12px; font: 700 17px/1 var(--serif); }
.sidebar-profile strong, .sidebar-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-profile strong { font-size: 11px; }
.sidebar-profile small { margin-top: 2px; color: #91aa9c; font-size: 8px; }
.profile-dashboard-button { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 9px; margin: -4px 0 -4px -4px; padding: 4px; color: inherit; text-align: left; background: transparent; border: 0; border-radius: 12px; cursor: pointer; }
.profile-dashboard-button:hover, .profile-dashboard-button:focus-visible { background: rgba(255,255,255,.09); outline: none; }
.profile-dashboard-button:active { transform: translateY(1px); }
.profile-copy { min-width: 0; }
#logout-button { width: 24px; height: 30px; color: #9db4a7; background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
#logout-button:hover, #logout-button:focus-visible { color: #fff; background: rgba(255,255,255,.09); outline: none; }

.view-root { min-width: 0; padding: clamp(28px, 4vw, 58px); outline: none; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.page-head h1 { margin: 0; font: 500 clamp(38px, 4.5vw, 62px)/.98 var(--serif); letter-spacing: -.04em; }
.page-head p:not(.eyebrow) { max-width: 640px; margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metric-card { position: relative; min-height: 124px; padding: 19px; overflow: hidden; background: var(--paper-light); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.metric-card::after { content: ""; position: absolute; right: -19px; bottom: -24px; width: 72px; height: 72px; border: 16px solid color-mix(in srgb, var(--metric-color, var(--pine)) 16%, transparent); border-radius: 50%; }
.metric-card span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.metric-card strong { display: block; margin-top: 12px; font: 600 38px/1 var(--serif); }
.metric-card small { display: block; margin-top: 7px; color: var(--muted); font-size: 9px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .7fr); gap: 16px; margin-top: 16px; }
.content-card { padding: 24px; background: var(--paper-light); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 10px 35px rgba(40,48,43,.04); }
.card-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.card-heading h2 { margin: 0; font: 600 24px/1.1 var(--serif); }
.card-heading p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.status-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; color: #fff; background: var(--status-color, #858a89); border-radius: 99px; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.suggested-card { position: relative; padding: 30px; color: #edf4ef; background: var(--pine); border-radius: var(--radius-lg); overflow: hidden; }
.suggested-card::after { content: ""; position: absolute; right: -48px; top: -44px; width: 150px; height: 150px; border: 28px solid rgba(220,236,169,.13); border-radius: 50%; }
.suggested-card .eyebrow { color: var(--lime); }
.suggested-card h2 { position: relative; z-index: 1; margin: 0; font: 500 35px/1.05 var(--serif); }
.suggested-card p { position: relative; z-index: 1; max-width: 570px; color: #b9cec2; }
.suggested-meta { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin: 22px 0; }
.suggested-meta span { color: #bad0c4; font-size: 10px; }
.suggested-actions { position: relative; z-index: 1; display: flex; gap: 8px; }
.suggested-actions .button-primary { color: var(--pine); background: var(--lime); }
.suggested-actions .button-outline { color: #fff; border-color: rgba(255,255,255,.25); }
.attempt-list { display: grid; gap: 9px; }
.attempt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.attempt-row:first-child { border-top: 0; }
.attempt-row strong, .attempt-row small { display: block; }
.attempt-row strong { font-size: 11px; }
.attempt-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.attempt-score { min-width: 54px; text-align: right; font: 600 19px/1 var(--serif); }
.empty-state { padding: 30px 16px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-md); font-size: 11px; }

/* Agent dock */
.agent-dock { position: sticky; top: 0; height: 100vh; overflow: auto; padding: 28px 22px; color: #edf4ef; background: #102f29; border-left: 1px solid rgba(255,255,255,.07); transition: box-shadow 180ms ease, transform 200ms ease; }
.agent-dock.is-closed { display: none; }
.agent-dock.is-highlighted { box-shadow: inset 4px 0 0 var(--lime), -20px 0 50px rgba(0,0,0,.18); }
.agent-dock-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.agent-dock .eyebrow { color: var(--mint); }
.agent-dock-header h2 { margin: 0; font: 500 29px/1.05 var(--serif); }
.agent-close { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: #edf4ef; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 50%; font: 300 24px/1 var(--sans); cursor: pointer; }
.agent-close:hover, .agent-close:focus-visible { color: var(--pine); background: var(--lime); outline: none; }
.agent-spark { width: 38px; height: 38px; display: grid; place-items: center; color: var(--pine); background: var(--lime); border-radius: 50%; }
.bridge-card, .agent-prompt-card, .agent-tools, .agent-activity { margin-top: 16px; padding: 16px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.11); border-radius: 15px; }
.bridge-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; font-weight: 800; }
.bridge-card i { width: 8px; height: 8px; background: #e0c878; border-radius: 50%; box-shadow: 0 0 0 5px rgba(224,200,120,.1); }
.bridge-card[data-state="ready"] i { background: #bce8bc; }
.bridge-card p { margin: 7px 0 0; color: #9fb9aa; font-size: 10px; }
.agent-browser-boundary { margin: 12px 2px 0; color: #aac3b5; font-size: 9px; line-height: 1.5; }
.agent-browser-boundary strong { color: var(--lime); }
.agent-handoff-card { margin-top: 16px; padding: 18px; color: var(--ink); background: color-mix(in srgb, var(--mint) 42%, var(--paper-light)); border: 1px solid color-mix(in srgb, var(--pine) 18%, var(--line)); border-radius: 15px; }
.agent-handoff-card h3 { margin: 5px 0 8px; font: 600 22px/1.08 var(--serif); }
.agent-handoff-card > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.agent-handoff-card > small { display: block; margin-top: 10px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.agent-handoff-card.is-ready { border-left: 4px solid var(--pine-2); }
.agent-handoff-card.needs-migration { border-left: 4px solid var(--coral); }
.agent-handoff-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
.agent-desktop-link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; box-sizing: border-box; margin-top: 15px; text-align: center; text-decoration: none; }
.mobile-remote-setup { margin: 14px 0 0; padding: 14px; border: 1px solid color-mix(in srgb,var(--coral) 32%,var(--line)); border-radius: 13px; background: color-mix(in srgb,var(--coral) 8%,var(--paper-light)); }
.mobile-remote-setup > strong { display: block; color: var(--ink); font-size: 12px; }
.mobile-remote-setup > p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.mobile-remote-setup details { margin-top: 10px; }
.mobile-remote-setup summary { color: var(--pine); cursor: pointer; font-size: 10px; font-weight: 850; }
.mobile-remote-setup ul { display: grid; gap: 7px; margin: 10px 0; padding-left: 18px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.mobile-remote-setup > a { color: var(--pine); font-size: 9px; font-weight: 850; }
#agent-dock .agent-handoff-card { color: #edf4ef; background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.11); }
#agent-dock .agent-handoff-card > p:not(.eyebrow), #agent-dock .agent-handoff-card > small { color: #aac3b5; }
#agent-dock .agent-handoff-card h3 { color: #fff; }
#agent-dock .agent-handoff-actions { grid-template-columns: 1fr; }
#agent-dock .mobile-remote-setup { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.13); }
#agent-dock .mobile-remote-setup > strong, #agent-dock .mobile-remote-setup summary, #agent-dock .mobile-remote-setup > a { color: var(--lime); }
#agent-dock .mobile-remote-setup > p, #agent-dock .mobile-remote-setup ul { color: #aac3b5; }
.mini-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #d9e4de; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.mini-heading button { padding: 0; color: #9fb9aa; background: transparent; border: 0; cursor: pointer; font-size: 9px; }
.mini-heading small { color: #809d8c; font-size: 8px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.agent-prompt-card p { margin: 12px 0 0; color: #f1eee6; font: italic 14px/1.5 var(--serif); }
.agent-tools summary { display: flex; justify-content: space-between; cursor: pointer; font-size: 10px; font-weight: 800; }
.agent-tools summary strong { color: var(--lime); }
#tool-list { display: grid; gap: 7px; margin-top: 13px; }
#tool-list code { overflow: hidden; color: #bdd4c6; font-size: 8px; text-overflow: ellipsis; }
#tool-list code.tool-failed { color: #ffb3a5; text-decoration: line-through; text-decoration-thickness: 1px; }
.agent-activity ol { max-height: 260px; margin: 12px 0 0; padding: 0; overflow: auto; list-style: none; }
.agent-activity li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.08); }
.agent-activity time { color: #7f9f8d; font-size: 8px; }
.agent-activity li span { display: grid; gap: 2px; min-width: 0; }
.agent-activity code { overflow: hidden; color: var(--lime); font-size: 8px; text-overflow: ellipsis; }
.agent-activity small, #activity-empty { color: #9fb9aa; font-size: 9px; }
.agent-toggle { position: fixed; z-index: 68; right: 0; top: 76px; width: 42px; height: 58px; display: none; place-items: center; color: var(--pine); background: var(--lime); border: 1px solid color-mix(in srgb, var(--pine) 18%, transparent); border-right: 0; border-radius: 14px 0 0 14px; box-shadow: var(--shadow); cursor: pointer; font-size: 18px; }
.app-shell.agent-collapsed .agent-toggle { display: grid; }
.agent-toggle:hover { width: 48px; }
.mobile-nav { display: none; }

.toast { position: fixed; z-index: 120; right: 24px; bottom: 24px; max-width: 360px; padding: 13px 16px; color: #fff; background: var(--pine); border-radius: 12px; box-shadow: var(--shadow); font-size: 11px; }

/* Shared learning surfaces */
.compact-select { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.compact-select select { max-width: 300px; min-height: 43px; padding: 0 34px 0 12px; color: var(--ink); background: var(--paper-light); border: 1px solid var(--line); border-radius: 11px; font-size: 11px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.section-title { margin-bottom: 18px; }
.section-title h2 { margin: 0; font: 600 30px/1.05 var(--serif); }
.locked-note { margin: 17px 0; padding: 13px 14px; color: #733d32; background: #fff0e9; border-left: 3px solid var(--coral); border-radius: 4px 10px 10px 4px; }
.locked-note strong { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.locked-note p { margin: 4px 0 0; font-size: 10px; }
button:disabled { cursor: not-allowed; opacity: .5; transform: none !important; }

/* Mastery map */
.status-legend { display: flex; flex-wrap: wrap; gap: 8px 15px; margin: -10px 0 16px; color: var(--muted); font-size: 9px; text-transform: capitalize; }
.status-legend span { display: flex; align-items: center; gap: 6px; }
.status-legend i { width: 9px; height: 9px; border-radius: 50%; }
.status-legend .map-subject-key { margin-left: auto; color: var(--pine); font-weight: 850; letter-spacing: .03em; text-transform: none; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 286px; align-items: start; gap: 15px; min-height: 0; }
.map-canvas-shell { min-width: 0; display: grid; gap: 9px; }
.map-toolbar { display: flex; align-items: end; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.map-plan-toggle { min-height: 43px; display: grid; grid-template-columns: 28px max-content; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 5px 12px 5px 7px; color: var(--pine); background: var(--paper-light); border: 1px solid var(--line); border-radius: 11px; cursor: pointer; text-align: left; }
.map-plan-toggle > span { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; color: var(--pine); background: var(--lime); border-radius: 8px; font-size: 14px; }
.map-plan-toggle strong { align-self: end; font-size: 9px; }
.map-plan-toggle small { align-self: start; color: var(--muted); font-size: 6px; }
.map-plan-toggle:hover { border-color: var(--pine-2); transform: translateY(-1px); }
.map-plan-toggle:disabled { opacity: .62; cursor: not-allowed; transform: none; }
.map-plan-toggle[aria-pressed="true"] { color: #fff; background: var(--pine); border-color: var(--pine); box-shadow: 0 7px 18px color-mix(in srgb, var(--pine) 24%, transparent); }
.map-plan-toggle[aria-pressed="true"] small { color: color-mix(in srgb, var(--mint) 82%, white); }
.map-zoom-control { display: grid; grid-template-columns: 38px 58px 38px; align-items: center; min-height: 43px; overflow: hidden; background: var(--paper-light); border: 1px solid var(--line); border-radius: 11px; }
.map-zoom-control button { height: 41px; color: var(--pine); background: transparent; border: 0; cursor: pointer; font-size: 20px; }
.map-zoom-control button:hover { background: color-mix(in srgb, var(--mint) 35%, white); }
.map-zoom-control output { color: var(--muted); text-align: center; font-size: 9px; font-weight: 850; }
.map-scroll { position: relative; width: 100%; min-width: 0; height: clamp(420px, 62svh, 560px); max-height: none; overflow: auto; contain: layout paint; overscroll-behavior: contain; touch-action: none; cursor: grab; user-select: none; background: rgba(255,253,248,.68); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: inset 0 0 50px rgba(21,63,54,.035); }
.map-scroll.is-panning, .map-scroll.is-pinching, .map-scroll.is-panning .map-node, .map-scroll.is-pinching .map-node { cursor: grabbing; }
.map-scroll.is-plan-mode { cursor: crosshair; }
.map-scroll.is-plan-mode .map-node { cursor: grab; }
.map-scroll.is-moving-nodes, .map-scroll.is-moving-nodes .map-node { cursor: grabbing; }
.map-scroll.is-selecting { cursor: crosshair; }
.map-gesture-hint { position: sticky; z-index: 3; top: 11px; left: 11px; width: max-content; margin: 11px 0 -38px 11px; padding: 7px 10px; color: var(--pine); pointer-events: none; background: color-mix(in srgb, var(--paper-light) 88%, transparent); border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 999px; box-shadow: 0 5px 15px rgba(21,63,54,.08); backdrop-filter: blur(8px); font-size: 8px; font-weight: 850; letter-spacing: .03em; }
.map-hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .map-hint-desktop { display: none; }
  .map-hint-touch { display: inline; }
}
.mastery-map { display: block; font-family: var(--sans); }
.map-edges { fill: none; stroke: #b7b0a4; stroke-width: 1.5; }
.map-edges .is-cross-subject { stroke: var(--coral); stroke-width: 2.5; stroke-dasharray: 7 5; }
.map-plan-connections { fill: none; pointer-events: none; }
.map-plan-connection { stroke: var(--plan-color); stroke-width: 6; stroke-linecap: round; opacity: .72; filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--plan-color) 28%, transparent)); }
.map-plan-connection.is-active { stroke-width: 8; opacity: .96; }
.map-plan-comment-links { fill: none; pointer-events: none; }
.map-plan-comment-link { stroke: var(--pine-2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 6; opacity: .72; }
.map-plan-comment { cursor: grab; filter: drop-shadow(0 6px 9px rgba(21,63,54,.14)); }
.map-plan-comment > rect { fill: #fff9d9; stroke: var(--pine-2); stroke-width: 2; }
.map-plan-comment > circle { fill: var(--pine); }
.map-plan-comment-icon { fill: white; font: 800 10px/1 var(--sans); pointer-events: none; }
.map-plan-comment-copy { fill: var(--ink); font: 750 9px/1.35 var(--sans); pointer-events: none; }
.map-plan-comment-meta { fill: var(--muted); font: 850 6px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.map-subject-lane rect { opacity: .2; stroke: rgba(21,63,54,.16); stroke-width: 1; }
.map-subject-lane line { opacity: .32; stroke-width: 1; }
.map-subject-lane text { font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.map-subject-lanes.is-plan-reference { opacity: .62; pointer-events: none; }
.map-node { cursor: pointer; outline: none; filter: drop-shadow(0 5px 7px rgba(30,38,33,.1)); }
.map-node .map-node-body { stroke: transparent; stroke-width: 3; transition: stroke 130ms ease, transform 130ms ease; }
.map-node:hover .map-node-body, .map-node:focus .map-node-body, .map-node.is-selected .map-node-body { stroke: var(--lime); }
.map-node-plan-outline { pointer-events: none; stroke-width: 3.5; opacity: .82; }
.map-node-plan-outline.is-active { stroke-width: 5; opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
.map-node.is-plan-selected .map-node-body { stroke: #fff; stroke-width: 4; stroke-dasharray: 7 4; }
.map-node.is-plan-hidden { opacity: .46; filter: grayscale(.35) drop-shadow(0 4px 5px rgba(30,38,33,.08)); }
.map-node.is-plan-hidden .map-node-body { stroke: var(--coral); stroke-width: 3; stroke-dasharray: 5 4; }
.map-node.is-plan-hidden.is-plan-selected { opacity: .78; }
.map-node-hidden-badge { pointer-events: none; }
.map-node-hidden-badge rect { fill: var(--paper-light); stroke: var(--coral); stroke-width: 1; }
.map-node .map-node-hidden-badge text { fill: var(--coral); font-size: 5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.map-node-note-badge { pointer-events: none; }
.map-node-note-badge circle { fill: var(--paper-light); stroke: var(--pine); stroke-width: 2; }
.map-node .map-node-note-badge text { fill: var(--pine); font-size: 8px; font-weight: 900; }
.map-selection-marquee { pointer-events: none; fill: color-mix(in srgb, var(--lime) 25%, transparent); stroke: var(--pine-2); stroke-width: 2; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; }
.map-node .map-node-subject-accent { opacity: .95; }
.map-node .map-node-status-dot { stroke: rgba(255,255,255,.92); stroke-width: 1.5; }
.map-node text { fill: #fff; font-size: 10px; font-weight: 800; pointer-events: none; }
.map-node .map-node-meta { fill: rgba(255,255,255,.76); font-size: 7px; font-weight: 650; text-transform: uppercase; }
.map-node .map-node-subject { fill: rgba(255,255,255,.92); font-size: 11px; font-weight: 900; }
.map-branch-actions { display: flex; align-items: center; gap: 5px; min-height: 43px; padding: 0 7px; background: var(--paper-light); border: 1px solid var(--line); border-radius: 11px; }
.map-branch-actions .quiet-button { padding: 10px 8px; min-height: 42px; font-size: 12px; }
.map-branch-group { filter: drop-shadow(0 7px 10px rgba(30,38,33,.14)); }
.map-branch-group-body { stroke: rgba(255,255,255,.85); stroke-width: 2; }
.map-branch-group text { pointer-events: none; }
.map-branch-group-field { fill: rgba(255,255,255,.9); font-size: 11px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.map-branch-group-name { fill: #fff; font-size: 20px; font-weight: 900; }
.map-branch-group-meta { fill: rgba(255,255,255,.9); font-size: 12px; font-weight: 700; }
.map-branch-group-toggle { cursor: pointer; }
.map-branch-group-toggle rect { fill: #dceca9; stroke: rgba(21,63,54,.25); stroke-width: 2; }
.map-branch-group-toggle text { fill: var(--pine); font-size: 28px; font-weight: 900; }
.map-branch-group-toggle:hover rect, .map-branch-group-toggle:focus rect { stroke: #fff; stroke-width: 3; }
.map-branch-heading-toggle { cursor: pointer; }
.map-branch-heading-toggle rect { fill: var(--paper-light); stroke: var(--pine-2); stroke-width: 1; }
.map-branch-heading-toggle text { fill: var(--pine); font-size: 18px; font-weight: 900; }
.map-branch-heading-toggle:hover rect, .map-branch-heading-toggle:focus rect { fill: var(--lime); stroke-width: 2; }
.map-edge-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; }
.map-edges path:focus, .map-edge-hit:focus { outline: none; }
.map-detail { align-self: start; position: sticky; top: 24px; padding: 22px; background: var(--paper-light); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.map-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.map-detail code { color: var(--muted); font-size: 7px; }
.map-detail > .eyebrow { margin-top: 23px; }
.map-detail h2 { margin: 0; font: 600 27px/1.03 var(--serif); }
.map-detail > p:not(.eyebrow) { color: var(--muted); font-size: 10px; }
.detail-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 18px 0; }
.detail-metrics span { padding: 9px 5px; color: var(--muted); text-align: center; background: #f5f0e7; border-radius: 9px; font-size: 7px; text-transform: uppercase; }
.detail-metrics strong { display: block; margin-top: 3px; color: var(--ink); font: 600 15px/1 var(--serif); text-transform: none; }
.skill-relations { display: grid; gap: 10px; margin: 15px 0; }
.skill-relations div { display: grid; gap: 3px; }
.skill-relations dt { color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.skill-relations dd { margin: 0; font-size: 9px; }
.application-mini { padding-top: 12px; border-top: 1px solid var(--line); }
.application-mini > strong { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.application-mini p { margin: 6px 0 0; color: var(--muted); font-size: 8px; }
.map-detail-actions { display: flex; gap: 7px; margin-top: 18px; }
.map-detail-actions .button { flex: 1; padding: 0 9px; font-size: 9px; }
.status-legend .map-plan-key { margin-left: auto; padding: 4px 8px; color: var(--pine); background: color-mix(in srgb, var(--lime) 55%, white); border-radius: 999px; font-weight: 900; letter-spacing: .03em; text-transform: none; }
.map-layout.is-plan-mode { grid-template-columns: minmax(0, 1fr) 330px; }
.map-plan-actionbar { display: grid; grid-template-columns: minmax(150px,1fr) repeat(5,minmax(92px,auto)); align-items: stretch; gap: 7px; padding: 7px; background: color-mix(in srgb, var(--pine) 94%, white); border-radius: 14px; box-shadow: 0 8px 22px rgba(21,63,54,.17); }
.map-plan-actionbar > div { display: grid; align-content: center; gap: 2px; padding: 4px 8px; color: white; }
.map-plan-actionbar > div strong { font-size: 9px; }
.map-plan-actionbar > div small { color: var(--mint); font-size: 6px; }
.map-plan-actionbar > button { min-width: 0; display: grid; grid-template-columns: 25px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; column-gap: 6px; padding: 6px 8px; color: var(--pine); background: var(--paper-light); border: 0; border-radius: 9px; cursor: pointer; text-align: left; }
.map-plan-actionbar > button:hover { background: var(--lime); }
.map-plan-actionbar > button[aria-pressed="true"] { background: var(--lime); box-shadow: inset 0 0 0 2px var(--pine-2); }
.map-plan-actionbar > button:disabled { opacity: .48; cursor: not-allowed; }
.map-plan-actionbar > button:disabled:hover { background: var(--paper-light); }
.map-plan-actionbar > button > span { grid-row: 1 / 3; width: 25px; height: 25px; display: grid; place-items: center; background: var(--lime); border-radius: 7px; font-size: 11px; font-weight: 900; }
.map-plan-actionbar > button strong { align-self: end; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.map-plan-actionbar > button small { align-self: start; overflow: hidden; color: var(--muted); font-size: 5px; text-overflow: ellipsis; white-space: nowrap; }
.map-plan-panel { max-height: calc(100svh - 48px); overflow: auto; scrollbar-width: thin; padding: 18px; }
.map-plan-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.map-plan-heading .eyebrow { margin: 0 0 5px; }
.map-plan-heading > span { padding: 5px 8px; color: var(--pine); background: var(--lime); border-radius: 99px; font-size: 6px; font-weight: 900; white-space: nowrap; }
.map-plan-heading > button { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; color: var(--pine); background: var(--paper-deep); border: 0; border-radius: 50%; cursor: pointer; font-size: 18px; }
.map-plan-heading > button:hover { background: var(--lime); }
.map-plan-intro { margin: 9px 0 12px !important; }
.map-plan-help { display: grid; gap: 6px; padding: 10px 11px; color: var(--pine); background: color-mix(in srgb, var(--mint) 40%, white); border-left: 3px solid var(--pine-2); border-radius: 4px 9px 9px 4px; }
.map-plan-help p { margin: 0; font-size: 7px; line-height: 1.55; }
.map-plan-help strong { display: block; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.map-plan-touch-help { display: none; }
.map-plan-selection { margin: 12px 0; padding: 11px; background: var(--paper-deep); border-radius: 10px; }
.map-plan-selection header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.map-plan-selection header > strong { font-size: 9px; }
.map-plan-selection header > span { padding: 3px 6px; color: var(--plan-color); background: color-mix(in srgb, var(--plan-color) 12%, white); border: 1px solid color-mix(in srgb, var(--plan-color) 45%, transparent); border-radius: 99px; font-size: 6px; font-weight: 900; }
.map-plan-selection > p { margin: 6px 0 9px; color: var(--muted); font-size: 7px; line-height: 1.45; }
.map-plan-selection > div { display: flex; gap: 8px; }
.map-plan-selection .quiet-button { padding: 0; font-size: 7px; }
.map-plan-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.map-plan-section-heading strong { font-size: 9px; }
.map-plan-section-heading small { color: var(--muted); font-size: 6px; }
.map-plan-form, .map-plan-paths, .map-plan-notes { display: grid; gap: 8px; padding: 13px 0; border-top: 1px solid var(--line); }
.map-plan-form label { display: grid; gap: 4px; color: var(--muted); font-size: 7px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.map-plan-form input:not([type="color"]), .map-plan-form select, .map-plan-form textarea { width: 100%; min-width: 0; padding: 9px 10px; color: var(--ink); background: var(--paper-light); border: 1px solid var(--line); border-radius: 8px; font: 600 9px/1.35 var(--sans); letter-spacing: 0; text-transform: none; resize: vertical; }
.map-plan-form .button { min-height: 38px; font-size: 8px; }
.map-plan-composer-copy { margin: 0; padding: 9px; color: var(--muted); background: var(--paper-deep); border-radius: 8px; font-size: 7px; line-height: 1.5; }
.map-plan-color { grid-template-columns: 1fr 38px 56px; align-items: center; }
.map-plan-color > span { grid-column: 1; }
.map-plan-color input { grid-column: 2; grid-row: 1; width: 36px; height: 30px; padding: 2px; background: var(--paper-light); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.map-plan-color output { grid-column: 3; grid-row: 1; font-size: 7px; text-transform: uppercase; }
.map-plan-paths article { display: grid; grid-template-columns: minmax(0,1fr) 42px 24px; align-items: center; gap: 5px; padding: 5px; background: color-mix(in srgb, var(--plan-color) 7%, var(--paper-light)); border: 1px solid color-mix(in srgb, var(--plan-color) 28%, var(--line)); border-radius: 9px; }
.map-plan-paths article.is-active { box-shadow: inset 3px 0 0 var(--plan-color); }
.map-plan-paths article > button:first-child { min-width: 0; display: grid; grid-template-columns: 9px minmax(0,1fr); align-items: center; gap: 7px; padding: 5px; color: var(--ink); text-align: left; background: none; border: 0; cursor: pointer; }
.map-plan-paths article i { width: 9px; height: 32px; background: var(--plan-color); border-radius: 99px; }
.map-plan-paths article span { min-width: 0; }
.map-plan-paths article strong, .map-plan-paths article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-plan-paths article strong { font-size: 8px; }
.map-plan-paths article small { margin-top: 2px; color: var(--muted); font-size: 6px; }
.map-plan-paths article label { display: grid; justify-items: center; gap: 1px; color: var(--muted); cursor: pointer; font-size: 5px; }
.map-plan-paths article input[type="color"] { width: 28px; height: 25px; padding: 1px; background: transparent; border: 0; cursor: pointer; }
.map-plan-delete, .map-plan-notes article > button { width: 24px; height: 24px; color: var(--coral); background: transparent; border: 0; border-radius: 50%; cursor: pointer; font-size: 16px; }
.map-plan-delete:hover, .map-plan-notes article > button:hover { background: #fff0e9; }
.map-plan-empty { margin: 0; padding: 9px; color: var(--muted); background: var(--paper-deep); border-radius: 8px; font-size: 7px; }
.map-plan-notes article { display: grid; grid-template-columns: minmax(0,1fr) 24px; gap: 6px; padding: 9px; background: var(--paper-deep); border-radius: 9px; }
.map-plan-notes article strong { font-size: 7px; }
.map-plan-notes article p { margin: 4px 0 0; color: var(--muted); font-size: 7px; line-height: 1.45; white-space: pre-wrap; }
.map-plan-footer { display: grid; gap: 7px; padding-top: 11px; border-top: 1px solid var(--line); }
.map-plan-footer .quiet-button { justify-self: start; padding: 0; color: var(--coral); font-size: 7px; }
.map-plan-footer .button { min-height: 38px; font-size: 8px; }
@media (hover: none) and (pointer: coarse) {
  .map-plan-desktop-help { display: none; }
  .map-plan-touch-help { display: block; }
}

/* Lessons */
.lesson-overview { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
.lesson-status-card, .theory-card { padding: 25px; background: var(--paper-light); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.lesson-status-card { position: sticky; top: 22px; }
.lesson-status-card > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lesson-status-card code { color: var(--muted); font-size: 7px; }
.lesson-score { margin-top: 28px; }
.lesson-score span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.lesson-score strong { font: 600 52px/1 var(--serif); }
.lesson-score small { color: var(--muted); }
.mastery-track { height: 7px; margin: 11px 0 20px; overflow: hidden; background: var(--paper-deep); border-radius: 10px; }
.mastery-track i { display: block; height: 100%; background: var(--pine-2); border-radius: inherit; }
.lesson-status-card > .button { width: 100%; }
.theory-card > .eyebrow { color: var(--coral); }
.theory-copy { max-width: 780px; color: #3f4943; }
.theory-copy > p:first-of-type { margin-top: 0; color: var(--ink); font: 500 22px/1.35 var(--serif); }
.theory-copy p { margin: 0 0 17px; font-size: 13px; line-height: 1.7; }
.theory-copy h3 { margin: 26px 0 10px; font: 600 20px/1.1 var(--serif); }
.theory-copy ul, .theory-copy ol { padding-left: 22px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.application-grid { display: grid; grid-template-columns: 220px repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.application-grid article { min-height: 128px; padding: 18px; background: var(--pine); border-radius: var(--radius-md); }
.application-grid article strong { color: var(--lime); font: 500 16px/1.2 var(--serif); }
.application-grid article p { margin: 9px 0 0; color: #b7cbc0; font-size: 9px; }
.examples-section { margin-top: 34px; }
.example-list { display: grid; gap: 9px; }
.example-list details { background: var(--paper-light); border: 1px solid var(--line); border-radius: var(--radius-md); }
.example-list summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; font: 600 15px/1.25 var(--serif); }
.example-list summary span { color: var(--coral); font: 850 9px/1 var(--sans); }
.example-list details > div { padding: 0 18px 18px 50px; color: var(--muted); font-size: 11px; }
.example-list details p { margin: 7px 0 0; }
.example-list .example-solution { color: var(--pine); font: 600 21px/1.2 var(--serif); }
.question-diagram { max-width: 720px; margin: 22px auto; color: var(--pine); }
.question-diagram-square { max-width: 540px; }
.question-diagram svg { display: block; width: 100%; height: auto; overflow: hidden; background: var(--paper-light); border: 1px solid var(--line); border-radius: 14px; }
.question-diagram text { fill: var(--pine); font: 28px var(--sans); }
.question-diagram .diagram-tick { font-size: 24px; fill: var(--muted); }
.question-diagram .diagram-label { paint-order: stroke; stroke: var(--paper-light); stroke-width: 7px; stroke-linejoin: round; font-weight: 650; }
.question-diagram .diagram-grid { stroke: var(--line); stroke-width: 1.2; }
.question-diagram .diagram-sphere-line { stroke: var(--muted); stroke-width: 1.6; }
.question-diagram .diagram-axis, .question-diagram .diagram-circle { stroke: var(--muted); stroke-width: 1.8; fill: none; }
.question-diagram .diagram-line { stroke: var(--pine); stroke-width: 3; }
.question-diagram .diagram-guide { stroke: var(--coral); stroke-width: 3; stroke-dasharray: 8 5; fill: none; }
.question-diagram .diagram-shape { stroke: var(--pine); stroke-width: 3; fill: #d8ebe3; }
.question-diagram .diagram-cutout { stroke: var(--coral); stroke-width: 2; fill: #f4d8ce; }
.question-diagram .diagram-point { fill: var(--pine); }
.question-diagram .diagram-accent { stroke: var(--coral); stroke-width: 3; fill: none; }
.question-diagram .diagram-leader { stroke: var(--muted); stroke-width: 1.3; stroke-dasharray: 4 5; }
.question-diagram figcaption { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.6; text-align: center; }

/* Tests */
.test-empty { max-width: 680px; margin: 12vh auto 0; text-align: center; }
.test-empty h2 { margin: 16px 0 8px; font: 600 35px/1.05 var(--serif); }
.test-empty p { color: var(--muted); }
.test-progress { min-width: 180px; }
.test-progress span { display: block; margin-bottom: 7px; color: var(--muted); text-align: right; font-size: 9px; }
.test-progress i { display: block; height: 7px; overflow: hidden; background: var(--paper-deep); border-radius: 10px; }
.test-progress b { display: block; height: 100%; background: var(--pine-2); }
.inline-feedback { display: grid; grid-template-columns: 39px minmax(0, 1fr); gap: 13px; max-width: 880px; margin: -10px 0 18px; padding: 16px; background: #fff3e8; border: 1px solid #e9c9aa; border-radius: var(--radius-md); }
.inline-feedback > span { width: 39px; height: 39px; display: grid; place-items: center; color: #fff; background: var(--coral); border-radius: 50% 50% 50% 12px; }
.inline-feedback strong { font: 600 15px/1.3 var(--serif); }
.inline-feedback p:not(.eyebrow) { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.test-form { max-width: 920px; margin: 0 auto; }
.question-card { margin-bottom: 14px; padding: 27px; background: var(--paper-light); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 8px 26px rgba(40,48,43,.035); }
.question-number { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.question-number span { color: var(--coral); font-size: 9px; font-weight: 900; }
.question-number small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.question-card h2 { max-width: 760px; margin: 20px 0 24px; font: 500 clamp(23px, 3vw, 34px)/1.2 var(--serif); }
.response-field { display: grid; gap: 7px; margin-top: 14px; color: var(--muted); font-size: 9px; font-weight: 800; }
.response-field input, .response-field textarea, .reflection-card input, .reflection-card textarea, .reflection-card select, .self-review input, .self-review textarea, .self-review select { width: 100%; color: var(--ink); background: #fbf8f1; border: 1px solid var(--line); border-radius: 11px; outline: none; }
.response-field input { height: 48px; padding: 0 13px; font: 600 18px/1 var(--serif); }
.response-field textarea { padding: 13px; resize: vertical; line-height: 1.6; background-image: repeating-linear-gradient(transparent 0, transparent 25px, rgba(21,63,54,.07) 26px); }
.response-field input:focus, .response-field textarea:focus, .reflection-card input:focus, .reflection-card textarea:focus, .reflection-card select:focus { border-color: var(--pine-2); box-shadow: 0 0 0 3px rgba(32,92,78,.1); }
.structured-work-editor { display: grid; gap: 16px; margin-top: 18px; padding: 18px; border: 1px solid color-mix(in srgb,var(--pine) 22%,var(--line)); border-radius: 18px; background: color-mix(in srgb,var(--mint) 42%,var(--paper-light)); }
.structured-work-editor.compact { padding: 15px 18px; }
.structured-work-editor header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.structured-work-editor h3 { margin: 3px 0 0; font: 600 22px/1.15 var(--serif); }
.structured-work-editor header > span { padding: 6px 10px; border-radius: 999px; background: var(--paper-light); color: var(--muted); font-size: 10px; font-weight: 900; }
.structured-work-editor label { display: grid; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 800; }
.structured-work-editor label small { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.45; }
.structured-work-editor input:not([type="checkbox"]), .structured-work-editor textarea, .structured-work-editor select { box-sizing: border-box; width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper-light); color: var(--ink); font: 600 14px/1.35 var(--sans); }
.structured-work-editor textarea { resize: vertical; }
.structured-work-editor fieldset { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.structured-work-editor legend { padding: 0 7px; color: var(--pine); font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.structured-candidate-row { display: grid; grid-template-columns: .8fr 1fr 1.5fr auto; gap: 8px; margin-bottom: 8px; }
.structured-candidate-row .quiet-button { min-width: 40px; padding: 0; }
.structured-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.structured-grid > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sign-interval-list { display: grid; gap: 9px; }
.sign-interval-list > div { display: grid; grid-template-columns: auto repeat(4,minmax(90px,1fr)) auto; align-items: center; gap: 8px; }
.structured-work-editor .check-field { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.structured-work-editor .check-field input { width: 16px; height: 16px; accent-color: var(--pine); }
.question-prompt-blocks { display: grid; gap: 14px; max-width: 820px; margin: 20px 0 24px; }
.question-prompt-blocks > p { margin: 0; color: var(--ink); font: 500 clamp(20px,2.5vw,29px)/1.32 var(--serif); }
.formatted-code-block { min-width: 0; margin: 0; overflow: hidden; border: 1px solid color-mix(in srgb,var(--pine) 24%,var(--line)); border-radius: 14px; background: #172522; color: #f2f5ed; box-shadow: 0 10px 24px rgba(10,31,27,.1); }
.formatted-code-block figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 9px 13px; color: #c5d8d1; border-bottom: 1px solid rgba(255,255,255,.1); font: 800 9px/1.2 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.formatted-code-block pre { margin: 0; padding: 16px; overflow: auto; }
.formatted-code-block code, .code-response-field textarea, .result-code { font-family: "SFMono-Regular",Consolas,"Liberation Mono",monospace; font-variant-ligatures: none; tab-size: 4; }
.formatted-code-block code { display: block; color: inherit; font-size: 13px; line-height: 1.65; white-space: pre; }
.code-response-field textarea { min-height: 270px; padding: 16px; color: #edf5ee; background: #13221f; border-color: #2e4f48; border-radius: 13px; font-size: 13px; line-height: 1.6; resize: vertical; }
.python-run-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 11px; }
.python-run-row small { max-width: 520px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.python-privacy-note { max-width: 760px; margin: 10px 0 0; padding: 10px 12px; color: var(--muted); background: color-mix(in srgb,var(--mint) 30%,var(--paper-light)); border-left: 3px solid var(--pine-2); border-radius: 9px; font-size: 10px; line-height: 1.55; }
.python-sandbox-status { display: grid; gap: 10px; margin-top: 11px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 13px; background: var(--paper-deep); }
.python-sandbox-status.passed { border-left-color: #2e9b58; background: #e8f5e9; }
.python-sandbox-status.failed { border-left-color: #c34444; background: #f9e9e5; }
.python-sandbox-status p { margin: 0 0 4px; }
.python-sandbox-status ul, .python-result ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.python-sandbox-status li, .python-result li { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; }
.python-sandbox-status li.passed::before, .python-result li.passed::before { content: "✓"; color: #25834b; font-weight: 900; }
.python-sandbox-status li.failed::before, .python-result li.failed::before { content: "×"; color: #b53636; font-weight: 900; }
.python-sandbox-status li strong { margin-right: auto; }
.python-sandbox-status details pre { overflow: auto; white-space: pre-wrap; }
.trace-table-scroll { max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-light); }
.trace-table-scroll table { width: 100%; border-collapse: collapse; }
.trace-table-scroll th, .trace-table-scroll td { min-width: 104px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; }
.trace-table-scroll th { min-width: 70px; color: var(--pine); background: color-mix(in srgb,var(--mint) 52%,var(--paper-light)); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.trace-table-scroll tr:last-child > * { border-bottom: 0; }
.trace-table-scroll tr > *:last-child { border-right: 0; }
.trace-table-editor .trace-table-scroll input { min-width: 90px; border-radius: 7px; font-family: "SFMono-Regular",Consolas,monospace; }
.trace-diagnostics { color: var(--coral); }
.trace-correct { color: #217747; font-weight: 800; }
@media (max-width: 760px) {
  .structured-candidate-row, .sign-interval-list > div, .structured-grid, .structured-grid > div { grid-template-columns: 1fr; }
  .structured-work-editor { padding: 14px; }
}
.answer-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.answer-options legend { margin-bottom: 8px; color: var(--muted); font-size: 9px; font-weight: 800; }
.answer-options label { cursor: pointer; }
.answer-options input { position: absolute; opacity: 0; pointer-events: none; }
.answer-options span { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 10px; background: #fbf8f1; border: 1px solid var(--line); border-radius: 11px; font-size: 10px; }
.answer-options b { width: 25px; height: 25px; display: grid; place-items: center; color: var(--pine); background: var(--mint); border-radius: 7px; }
.answer-options input:checked + span { border-color: var(--pine-2); box-shadow: 0 0 0 3px rgba(32,92,78,.1); }
.work-guide { margin: 13px 0; padding: 13px 15px; color: var(--muted); background: #f4f0e7; border-left: 3px solid var(--pine-2); border-radius: 10px; font-size: 9px; }
.work-guide summary { color: var(--pine); cursor: pointer; font-weight: 850; }
.work-guide[open] summary { margin-bottom: 8px; }
.work-guide ul, .work-guide ol { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 20px; }
.work-guide p { margin: 8px 0 0; }
.work-guide .work-syntax-note { padding: 8px 10px; color: var(--pine); background: rgba(255,255,255,.65); border-radius: 8px; }
.sticky-submit { position: sticky; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 13px 15px; background: rgba(255,253,248,.96); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.sticky-submit span { color: var(--muted); font-size: 9px; }

/* Results and reflection */
.result-score { min-width: 130px; text-align: right; }
.result-score strong { display: block; color: var(--pine); font: 600 52px/1 var(--serif); }
.result-score span { color: var(--muted); font-size: 9px; }
.results-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.result-questions { display: grid; gap: 9px; }
.result-question { background: var(--paper-light); border: 1px solid var(--line); border-radius: var(--radius-md); }
.result-question summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 14px; cursor: pointer; }
.result-question summary > span:nth-child(2) { min-width: 0; }
.result-question summary strong, .result-question summary small { display: block; }
.result-question summary strong { font-size: 10px; }
.result-question summary small { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.result-question summary > b { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.result-icon { width: 31px; height: 31px; display: grid; place-items: center; color: #fff; border-radius: 50%; }
.result-icon.correct { background: var(--green); }
.result-icon.incorrect { background: var(--coral); }
.result-body { padding: 0 17px 17px 59px; color: var(--muted); font-size: 10px; }
.result-body dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.result-body dl div { padding: 10px; background: #f5f0e7; border-radius: 9px; }
.result-body dt { font-size: 7px; text-transform: uppercase; }
.result-body dd { margin: 3px 0 0; color: var(--ink); font: 600 16px/1.2 var(--serif); }
.shown-work { margin-top: 10px; }
.shown-work pre { padding: 12px; overflow: auto; color: var(--ink); background: #f5f0e7; border-radius: 9px; white-space: pre-wrap; }
.result-code { max-height: 330px; margin: 0; padding: 13px; overflow: auto; color: #edf5ee; background: #13221f; border-radius: 9px; white-space: pre; }
.python-result small { display: block; margin-top: 10px; color: var(--muted); }
.result-review-guide { margin-top: 10px; padding: 12px 14px; color: var(--muted); background: #edf5f0; border-left: 3px solid var(--pine-2); border-radius: 9px; }
.result-review-guide > strong { display: block; color: var(--pine); font-size: 9px; }
.result-review-guide ul, .result-review-guide ol { display: grid; gap: 4px; margin: 8px 0 0; padding-left: 20px; }
.mistake-tags { color: #a44f3e; }
.reflection-card { position: sticky; top: 22px; padding: 23px; background: var(--pine); color: #edf4ef; border-radius: var(--radius-lg); }
.reflection-card .eyebrow { color: var(--lime); }
.reflection-card h2 { margin: 0; font: 500 29px/1.05 var(--serif); }
.reflection-card > p:not(.eyebrow) { color: #adc3b6; font-size: 9px; }
.reflection-card form { display: grid; gap: 12px; margin-top: 20px; }
.reflection-card label { display: grid; gap: 5px; color: #b8ccc0; font-size: 8px; font-weight: 750; }
.reflection-card input, .reflection-card textarea, .reflection-card select { padding: 9px; }
.reflection-card input[type="range"] { padding: 0; accent-color: var(--lime); }
.reflection-card output { justify-self: end; margin-top: -18px; color: var(--lime); }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.saved-mastery { margin: 25px 0; }
.saved-mastery strong { font: 600 54px/1 var(--serif); }
.saved-mastery span { color: #a8c0b2; }
.reflection-summary { display: grid; gap: 8px; }
.reflection-summary div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.1); }
.reflection-summary dt { color: #97b0a1; font-size: 8px; }
.reflection-summary dd { margin: 0; font-size: 9px; }
.reflection-card > .button { width: 100%; margin-top: 15px; color: var(--pine); background: var(--lime); }
.saved-reviews { margin-top: 20px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.12); }
.saved-reviews article { margin-top: 8px; padding: 10px; color: var(--ink); background: var(--paper-light); border-radius: 9px; }
.saved-reviews article strong { font-size: 9px; text-transform: capitalize; }
.saved-reviews article ul { display: grid; gap: 4px; margin: 7px 0; padding: 0; list-style: none; }
.saved-reviews article li { padding: 5px 7px; background: var(--paper); border-radius: 6px; font-size: 8px; text-transform: capitalize; }
.saved-reviews article p, .saved-reviews article small { display: block; margin: 4px 0 0; color: var(--muted); font-size: 8px; }
.self-review { margin-top: 16px; }
.self-review form { display: grid; gap: 10px; }
.review-form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.self-review label { display: grid; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 800; }
.self-review input, .self-review textarea, .self-review select { padding: 10px; }
.review-permission-note { margin: 0; padding: 8px 10px; color: var(--pine); background: color-mix(in srgb, var(--mint) 38%, white); border-radius: 8px; font-size: 8px; }
.structured-review { display: grid; gap: 8px; margin: 2px 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; }
.structured-review[hidden] { display: none; }
.structured-review legend { padding: 0 6px; color: var(--pine); font: 700 10px/1.2 var(--sans); }
.structured-review > p { margin: 0; color: var(--muted); font-size: 9px; }
.structured-review-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(150px, .65fr) minmax(170px, 1fr); gap: 8px; align-items: center; padding: 9px; background: color-mix(in srgb, var(--paper) 65%, white); border-radius: 9px; }
.structured-review-row strong { font-size: 9px; line-height: 1.35; }
.structured-review-row label { grid-template-columns: auto 1fr; align-items: center; }

/* Settings / data / exports */
.settings-controls { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(250px,.7fr); gap: 16px; margin-bottom: 16px; }
.settings-control-card { padding: 23px; background: var(--paper-light); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 10px 35px rgba(40,48,43,.04); }
.settings-control-card h2 { margin: 0; font: 600 24px/1.08 var(--serif); }
.settings-control-card > p { margin: 7px 0 17px; color: var(--muted); font-size: 10px; }
.settings-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.settings-mode-grid button { min-width: 0; padding: 16px; color: var(--ink); text-align: left; background: color-mix(in srgb, var(--paper) 58%, white); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.settings-mode-grid button[aria-pressed="true"] { border-color: var(--pine-2); box-shadow: inset 0 0 0 2px var(--pine-2); }
.settings-mode-grid strong, .settings-mode-grid small { display: block; }
.settings-mode-grid strong { font: 600 17px/1.1 var(--serif); }
.settings-mode-grid small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.settings-tour-action { display: grid; gap: 11px; align-content: end; height: 100%; }
.settings-tour-action p { margin: 7px 0 0; color: var(--muted); font-size: 10px; }
.settings-tour-action .button { width: 100%; }
.backup-recommendation { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 15px 17px; color: var(--ink); background: #fff2d6; border: 1px solid #e7c779; border-radius: var(--radius-md); }
.backup-recommendation > span { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--coral); border-radius: 50%; font-weight: 900; }
.backup-recommendation div { flex: 1; }
.backup-recommendation strong, .backup-recommendation p { display: block; margin: 0; }
.backup-recommendation p { margin-top: 3px; color: var(--muted); font-size: 9px; }
.storage-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.storage-summary article { padding: 18px; background: var(--pine); border-radius: var(--radius-md); }
.storage-summary span, .storage-summary strong, .storage-summary small { display: block; }
.storage-summary span { color: var(--mint); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.storage-summary strong { margin: 7px 0 4px; color: #fff; font: 500 24px/1 var(--serif); }
.storage-summary small { color: #9fb9aa; font-size: 8px; }
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.backup-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; margin: 26px 0; }
.backup-flow > span { color: var(--coral); font-size: 8px; font-weight: 900; }
.backup-flow strong, .backup-flow small { display: block; }
.backup-flow strong { margin: 6px 0 3px; color: var(--ink); font: 600 15px/1 var(--serif); }
.backup-flow small { color: var(--muted); font-size: 7px; font-weight: 500; }
.backup-flow > b { color: var(--line); }
.data-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lesson-packs-card { margin-top: 16px; }
.lesson-pack-guide { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; margin: 18px 0; padding: 17px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-md); }
.lesson-pack-guide strong { font: 600 17px/1.1 var(--serif); }
.lesson-pack-guide p { max-width: 680px; margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.installed-packs { display: grid; gap: 8px; }
.installed-packs article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; }
.installed-packs strong, .installed-packs small { display: block; }
.installed-packs p { margin: 3px 0; color: var(--muted); font-size: 9px; }
.installed-packs small { color: var(--muted); font-size: 8px; }
.pack-actions { display: grid; justify-items: end; gap: 7px; }
.pack-mark { width: 35px; height: 35px; display: grid; place-items: center; color: var(--pine); background: var(--lime); border-radius: 10px; font-size: 19px; }
.pack-security-note { margin: 14px 0 0; padding-top: 12px; color: var(--muted); border-top: 1px solid var(--line); font-size: 8px; }
.staged-pack { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 12px; margin: 17px 0; padding: 15px; color: var(--ink); background: color-mix(in srgb, var(--highlight, #dceca9) 46%, white); border: 1px solid color-mix(in srgb, var(--primary-alt, #205c4e) 28%, var(--line)); border-radius: var(--radius-md); }
.staged-pack > span { padding: 6px 8px; color: #fff; background: var(--pine); border-radius: 99px; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.staged-pack strong, .staged-pack small { display: block; }
.staged-pack p { margin: 3px 0; color: var(--muted); font-size: 9px; }
.staged-pack small { color: var(--pine-2); font-size: 8px; }
.guideline-note { margin: 13px 0; padding: 12px; color: var(--ink); background: color-mix(in srgb, var(--mint) 40%, white); border-left: 3px solid var(--pine-2); border-radius: 8px; }
.guideline-note strong { font-size: 9px; }
.guideline-note p { margin: 4px 0 0; color: var(--muted); font-size: 8px; }
.export-list { display: grid; }
.export-list button { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 13px 0; text-align: left; background: transparent; border: 0; border-top: 1px solid var(--line); cursor: pointer; }
.export-list button:first-child { border-top: 0; }
.export-list span, .export-list small { display: block; }
.export-list span { font-size: 10px; font-weight: 800; }
.export-list small { grid-column: 1; color: var(--muted); font-size: 8px; }
.export-list b { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--pine-2); font-size: 9px; }
.tutor-setup { margin-top: 16px; }
.tutor-setup pre { margin: 0; padding: 15px; overflow: auto; color: #dce8e1; background: var(--pine); border-radius: 11px; font: 11px/1.6 var(--sans); white-space: pre-wrap; }

/* New-profile app tour */
.app-tour { max-width: 1280px; min-width: 0; margin: 0 auto; container-type: inline-size; }
.tour-topbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.tour-brand { display: flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; font: 600 18px/1 "Times New Roman", Times, serif; }
.tour-brand img { object-fit: contain; mix-blend-mode: multiply; }
.tour-topbar > div { display: flex; align-items: center; gap: 16px; }
.tour-topbar > div > span { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.tour-progress { height: 4px; overflow: hidden; background: var(--paper-deep); border-radius: 0 0 99px 99px; }
.tour-progress i { display: block; height: 100%; background: var(--coral); border-radius: inherit; transition: width 240ms ease; }
.tour-layout { display: grid; grid-template-columns: 195px minmax(0,1fr); gap: 16px; align-items: start; max-width: 100%; margin-top: 22px; }
.tour-layout > *, .tour-stage > * { min-width: 0; }
.tour-steps { display: grid; gap: 5px; }
.tour-steps button { display: grid; grid-template-columns: 29px minmax(0,1fr); gap: 9px; width: 100%; padding: 9px; text-align: left; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 11px; cursor: pointer; }
.tour-steps button:hover { background: color-mix(in srgb, var(--paper-light) 65%, transparent); }
.tour-steps button.is-active { color: var(--ink); background: var(--paper-light); border-color: var(--line); box-shadow: 0 8px 26px rgba(30,45,37,.05); }
.tour-steps button > span { width: 28px; height: 28px; display: grid; place-items: center; color: var(--pine); background: var(--paper-deep); border-radius: 8px; font-size: 7px; font-weight: 900; }
.tour-steps button.is-active > span { color: var(--pine); background: var(--lime); }
.tour-steps button.is-complete > span { color: #fff; background: var(--green); }
.tour-steps strong, .tour-steps small { display: block; }
.tour-steps strong { font-size: 8px; }
.tour-steps small { max-width: 130px; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.tour-stage { display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); gap: 24px; width: 100%; max-width: 100%; min-height: 610px; padding: clamp(24px,3vw,42px); overflow: hidden; background: var(--paper-light); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.tour-copy { align-self: center; }
.tour-copy h1 { max-width: 620px; margin: 0; font: 500 clamp(37px,4.8cqi,61px)/.96 var(--serif); overflow-wrap: anywhere; letter-spacing: -.045em; }
.tour-lede { max-width: 620px; margin: 19px 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.tour-copy ul { display: grid; gap: 10px; margin: 24px 0; padding: 0; list-style: none; }
.tour-copy li { display: grid; grid-template-columns: 21px 1fr; gap: 9px; color: var(--ink); font-size: 10px; line-height: 1.5; }
.tour-copy li > span { width: 20px; height: 20px; display: grid; place-items: center; color: var(--pine); background: var(--lime); border-radius: 50%; font-size: 7px; font-weight: 900; }
.tour-copy aside { padding: 13px 15px; color: var(--ink); background: color-mix(in srgb, var(--mint) 34%, white); border-left: 3px solid var(--pine-2); border-radius: 9px; }
.tour-copy aside > span { font-size: 7px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.tour-copy aside p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }
.tour-visual { width: 100%; max-width: 100%; min-width: 0; align-self: center; }
.tour-visual > * { max-width: 100%; }
.tour-actions { grid-column: 1 / -1; align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 21px; border-top: 1px solid var(--line); }
.tour-actions > div { display: flex; align-items: center; gap: 10px; }
.tour-profile-preview { position: relative; display: grid; grid-template-columns: 86px minmax(0,1fr) auto; align-items: center; gap: 15px; padding: 28px; background: color-mix(in srgb, var(--paper) 62%, white); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 18px 50px rgba(30,45,37,.08); }
.tour-profile-preview img { width: 86px; height: 80px; object-fit: contain; }
.tour-profile-preview span, .tour-profile-preview strong, .tour-profile-preview small { display: block; }
.tour-profile-preview span { color: var(--pine-2); font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.tour-profile-preview strong { margin: 4px 0; font: 600 24px/1 var(--serif); }
.tour-profile-preview small { color: var(--muted); font-size: 8px; }
.tour-profile-preview > i { width: 33px; height: 33px; display: grid; place-items: center; color: #fff; background: var(--green); border-radius: 50%; font-style: normal; }
.tour-local-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 10px; }
.tour-local-row span { padding: 10px; color: var(--pine); text-align: center; background: var(--lime); border-radius: 9px; font-size: 8px; font-weight: 900; }
.tour-subject-preview { padding: 17px; color: #fff; background: var(--pine); border-radius: 16px; }
.tour-subject-preview p { margin: 0 0 8px; color: color-mix(in srgb, var(--mint) 72%, white); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.tour-subject-preview > div { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; }
.tour-assignment-note { margin: 10px 0 0; padding: 10px 12px; color: var(--muted); background: color-mix(in srgb,var(--mint) 38%,var(--paper-light)); border-left: 3px solid var(--pine-2); border-radius: 9px; font-size: 9px; line-height: 1.5; }
.tour-subject-preview > div > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--pine); background: var(--lime); border-radius: 11px; font-size: 19px; }
.tour-subject-preview strong { font: 500 25px/1 var(--serif); }
.tour-subject-preview > small { display: block; margin-top: 11px; color: color-mix(in srgb, var(--mint) 78%, white); font-size: 7px; }
.tour-mode-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.tour-mode-preview button { min-width: 0; padding: 18px; color: var(--ink); text-align: left; background: color-mix(in srgb, var(--paper) 60%, white); border: 1px solid var(--line); border-radius: 13px; cursor: pointer; transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
.tour-mode-preview button:hover { transform: translateY(-2px); border-color: var(--pine-2); }
.tour-mode-preview button.is-active { border-color: var(--pine-2); box-shadow: inset 0 0 0 2px var(--pine-2); }
.tour-mode-preview span, .tour-mode-preview strong, .tour-mode-preview small { display: block; }
.tour-mode-preview span { color: var(--coral); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.tour-mode-preview strong { margin: 7px 0 4px; font: 600 17px/1.1 var(--serif); }
.tour-mode-preview small { color: var(--muted); font-size: 7px; }
.tour-mode-preview i { display: inline-flex; margin-top: 12px; padding: 5px 7px; color: var(--pine); background: var(--lime); border-radius: 99px; font-size: 7px; font-style: normal; font-weight: 900; }
.tour-map-preview { overflow: hidden; padding: 8px; background: color-mix(in srgb, var(--paper) 58%, white); border: 1px solid var(--line); border-radius: 17px; }
.tour-map-controls { display: flex; align-items: center; gap: 5px; padding: 7px 7px 2px; }
.tour-map-controls span, .tour-map-controls strong, .tour-map-controls b, .tour-map-controls i { padding: 6px 8px; border-radius: 7px; font-size: 7px; font-style: normal; }
.tour-map-controls span { color: var(--muted); border: 1px solid var(--line); }
.tour-map-controls strong { color: #fff; background: var(--pine); }
.tour-map-controls b { color: var(--pine); background: var(--lime); }
.tour-map-controls i { margin-left: auto; color: var(--pine); background: var(--paper-light); border: 1px solid var(--line); font-weight: 850; }
.tour-map-preview svg { width: 100%; display: block; }
.tour-map-preview path { fill: none; stroke: var(--line); stroke-width: 5; }
.tour-map-preview rect { fill: var(--blue); }
.tour-map-preview .learning rect { fill: var(--amber); }
.tour-map-preview .proven rect { fill: var(--green); }
.tour-map-preview .locked rect { fill: #858a89; }
.tour-map-preview text { fill: #fff; text-anchor: middle; font: 700 11px var(--sans); }
.tour-map-preview text:nth-of-type(2) { opacity: .75; font-size: 8px; }
.tour-statuses { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.tour-loop-preview { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 5px; }
.tour-loop-preview article { min-width: 0; min-height: 112px; display: grid; align-content: center; padding: 13px; background: color-mix(in srgb, var(--paper) 56%, white); border: 1px solid var(--line); border-radius: 12px; }
.tour-loop-preview article span { color: var(--coral); font-size: 7px; font-weight: 900; }
.tour-loop-preview article b { margin: 8px 0 4px; font: 600 16px/1 var(--serif); }
.tour-loop-preview article small { color: var(--muted); font-size: 6px; }
.tour-loop-preview > i { color: var(--pine-2); font-style: normal; font-weight: 900; }
.tour-work-preview { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 18px; color: #fff; background: var(--pine); border-radius: 13px; }
.tour-work-preview code { color: #fff; font: 14px/1.8 var(--serif); }
.tour-work-preview span { padding: 7px 9px; color: var(--pine); background: var(--lime); border-radius: 99px; font-size: 7px; font-weight: 900; }
.tour-depot-preview { padding: 20px; background: color-mix(in srgb, var(--paper) 58%, white); border: 1px solid var(--line); border-radius: 18px; }
.tour-depot-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tour-depot-preview > header small, .tour-depot-preview > header strong { display: block; }
.tour-depot-preview > header small { color: var(--pine-2); font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.tour-depot-preview > header strong { margin-top: 4px; font: 600 24px/1 var(--serif); }
.tour-depot-preview > header > span { padding: 6px 8px; color: var(--pine); background: var(--lime); border-radius: 99px; font-size: 7px; font-weight: 850; }
.tour-depot-preview > div { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin: 17px 0 10px; }
.tour-depot-preview article { min-width: 0; min-height: 148px; display: grid; align-content: start; padding: 16px; background: #e9f4f2; border: 1px solid color-mix(in srgb, #246b69 34%, var(--line)); border-top: 5px solid #246b69; border-radius: 13px; }
.tour-depot-preview article.is-biology { background: #eef5e7; border-color: color-mix(in srgb, #557d45 34%, var(--line)); border-top-color: #557d45; }
.tour-depot-preview article > span { color: var(--muted); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.tour-depot-preview article > strong { margin: 10px 0 6px; font: 600 18px/1.05 var(--serif); }
.tour-depot-preview article > small { color: var(--muted); font-size: 7px; }
.tour-depot-preview article footer { display: flex; gap: 6px; margin-top: auto; padding-top: 16px; }
.tour-depot-preview article footer b { padding: 5px 7px; color: var(--pine); background: rgba(255,255,255,.72); border-radius: 99px; font-size: 7px; }
.tour-depot-preview > p { margin: 0; padding: 10px 12px; color: var(--muted); background: var(--paper-light); border-radius: 9px; font-size: 7px; }
.tour-depot-preview > p b { margin-right: 5px; color: var(--green); }
.tour-agent-preview { padding: 22px; color: #edf4ef; background: var(--pine); border-radius: 19px; box-shadow: 0 18px 50px rgba(21,63,54,.2); }
.tour-agent-head { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; }
.tour-agent-head > span { width: 40px; height: 40px; display: grid; place-items: center; color: var(--pine); background: var(--lime); border-radius: 50%; }
.tour-agent-head small, .tour-agent-head strong { display: block; }
.tour-agent-head small { color: var(--lime); font-size: 7px; text-transform: uppercase; }
.tour-agent-head strong { margin-top: 3px; font: 500 20px/1 var(--serif); }
.tour-agent-head > i { padding: 6px 8px; color: var(--lime); border: 1px solid rgba(255,255,255,.18); border-radius: 99px; font: 700 7px/1 var(--sans); }
.tour-agent-preview > p { margin: 20px 0; padding: 16px; color: var(--ink); background: var(--paper-light); border-radius: 11px; font: 500 15px/1.4 var(--serif); }
.tour-tool-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 18px; }
.tour-tool-row code { padding: 6px; color: color-mix(in srgb, var(--mint) 74%, white); background: rgba(255,255,255,.07); border-radius: 6px; font-size: 6px; }
.tour-agent-preview .button { width: 100%; }
.tour-agent-prompt { margin: 18px 0; padding: 16px; color: var(--ink); background: var(--paper-light); border-radius: 11px; }
.tour-agent-prompt > span { display: block; color: var(--pine-2); font-size: 7px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.tour-agent-prompt p { margin: 7px 0 13px; font: 500 12px/1.45 var(--serif); }
.tour-agent-prompt .button { min-height: 38px; }
.tour-ownership-preview { display: grid; gap: 10px; }
.tour-ownership-preview article { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 19px; background: color-mix(in srgb, var(--paper) 57%, white); border: 1px solid var(--line); border-radius: 14px; }
.tour-ownership-preview article > span { width: 48px; height: 48px; display: grid; place-items: center; color: var(--pine); background: var(--lime); border-radius: 12px; font-size: 20px; }
.tour-ownership-preview strong, .tour-ownership-preview small { display: block; }
.tour-ownership-preview strong { font: 600 18px/1.1 var(--serif); }
.tour-ownership-preview small { margin-top: 5px; color: var(--muted); font-size: 7px; }
.tour-ownership-preview article > b { padding: 6px 8px; color: var(--pine-2); border: 1px solid var(--line); border-radius: 99px; font-size: 7px; }

@container (max-width: 920px) {
  .app-tour .tour-layout { grid-template-columns: 1fr; }
  .app-tour .tour-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .app-tour .tour-steps button { grid-template-columns: 24px minmax(0,1fr); }
  .app-tour .tour-steps button > span { width: 24px; height: 24px; }
  .app-tour .tour-stage { grid-template-columns: 1fr; min-height: 0; }
  .app-tour .tour-actions { grid-column: auto; }
}

@container (max-width: 620px) {
  .app-tour .tour-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-tour .tour-stage { padding: 22px; }
  .app-tour .tour-copy h1 { font-size: clamp(36px,10cqi,48px); }
  .app-tour .tour-actions, .app-tour .tour-actions > div { align-items: stretch; flex-direction: column-reverse; }
  .app-tour .tour-actions .button, .app-tour .tour-actions .quiet-button { width: 100%; }
  .app-tour .tour-mode-preview, .app-tour .tour-local-row { grid-template-columns: 1fr; }
  .app-tour .tour-depot-preview > div { grid-template-columns: 1fr; }
  .app-tour .tour-loop-preview { grid-template-columns: 1fr; }
  .app-tour .tour-loop-preview > i { transform: rotate(90deg); text-align: center; }
  .app-tour .tour-ownership-preview article { grid-template-columns: 42px 1fr; }
  .app-tour .tour-ownership-preview article > b { grid-column: 2; justify-self: start; }
}

/* Human Lesson Creator */
.studio-head { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.studio-native-picker { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(250px,.8fr) auto; gap: 16px; align-items: end; margin: 18px 0; padding: 20px 22px; background: linear-gradient(135deg,color-mix(in srgb,var(--mint) 44%,var(--paper-light)),var(--paper-light)); border: 1px solid var(--line); border-left: 4px solid var(--pine-2); border-radius: var(--radius-lg); }
.studio-native-picker h2 { margin: 2px 0 5px; font: 600 23px/1.05 var(--serif); }
.studio-native-picker p:not(.eyebrow) { max-width: 620px; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.studio-native-picker label { min-width: 0; display: grid; gap: 6px; color: var(--muted); font-size: 7px; font-weight: 850; text-transform: uppercase; }
.studio-native-picker select { width: 100%; min-height: 42px; padding: 0 11px; color: var(--ink); background: var(--paper-light); border: 1px solid var(--line); border-radius: 10px; }
.studio-native-picker .button { min-height: 42px; }
.studio-tutorial { position: relative; display: grid; grid-template-columns: minmax(240px,.8fr) minmax(0,1.7fr); gap: 24px; margin: 18px 0; padding: 24px; color: #edf4ef; background: var(--pine); border-radius: var(--radius-lg); overflow: hidden; }
.studio-tutorial::after { content: "✎"; position: absolute; right: -20px; bottom: -65px; color: rgba(255,255,255,.05); font: 180px/1 var(--serif); }
.studio-tutorial h2 { margin: 0; color: #fff; font: 500 30px/1.05 var(--serif); }
.studio-tutorial p:not(.eyebrow) { max-width: 510px; color: color-mix(in srgb, var(--mint) 72%, white); font-size: 10px; }
.studio-tutorial > div > .eyebrow { color: var(--lime); }
.studio-tutorial ol { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.studio-tutorial li { display: grid; grid-template-columns: 28px 1fr; gap: 9px; padding: 11px; background: rgba(255,255,255,.07); border-radius: 10px; }
.studio-tutorial li > b { width: 27px; height: 27px; display: grid; place-items: center; color: var(--pine); background: var(--lime); border-radius: 50%; font-size: 9px; }
.studio-tutorial li span, .studio-tutorial li small { display: block; }
.studio-tutorial li span { color: #fff; font-size: 9px; font-weight: 850; }
.studio-tutorial li small { margin-top: 2px; color: color-mix(in srgb, var(--mint) 74%, white); font-size: 7px; font-weight: 500; }
.studio-tutorial > .quiet-button { position: absolute; z-index: 2; left: 24px; bottom: 17px; color: var(--lime); font-size: 9px; }
.studio-tour-open { margin: 12px 0; }
.studio-grid { display: grid; grid-template-columns: 245px minmax(0,1fr); gap: 18px; align-items: start; }
.studio-rail { position: sticky; top: 20px; display: grid; gap: 10px; padding: 17px; background: var(--paper-light); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.studio-rail hr { width: 100%; margin: 6px 0; border: 0; border-top: 1px solid var(--line); }
.studio-reset { width: 100%; margin-top: 6px; }
.studio-canvas { display: grid; gap: 14px; min-width: 0; }
.studio-card { padding: 24px; background: var(--paper-light); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 9px 30px rgba(30,45,37,.03); }
.studio-card h2 { margin: 0; font: 600 26px/1.05 var(--serif); }
.studio-card h3 { margin: 0 0 10px; font: 600 17px/1.1 var(--serif); }
.studio-card > .studio-section-title { margin-bottom: 19px; }
.studio-section-title { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.studio-section-title p:not(.eyebrow) { max-width: 600px; margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.studio-section-title > button:not(.button):not(.danger-link) { width: 31px; height: 31px; color: var(--pine); background: var(--lime); border: 0; border-radius: 9px; cursor: pointer; font-size: 18px; }
.studio-skill-list { display: grid; gap: 5px; }
.studio-skill-list button { display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 0 7px; padding: 8px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 9px; cursor: pointer; }
.studio-skill-list button.is-active { background: color-mix(in srgb, var(--mint) 38%, white); border-color: var(--line); }
.studio-skill-list span { grid-row: 1 / 3; width: 23px; height: 23px; display: grid; place-items: center; color: var(--pine); background: var(--paper-deep); border-radius: 7px; font-size: 7px; font-weight: 900; }
.studio-skill-list b, .studio-skill-list small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-skill-list b { font-size: 9px; }
.studio-skill-list small { color: var(--muted); font-size: 6px; }
.studio-field { min-width: 0; display: grid; gap: 5px; margin-bottom: 10px; color: var(--muted); font-size: 8px; font-weight: 800; }
.studio-field > span { display: flex; align-items: center; gap: 5px; }
.studio-help, .studio-tutorial i { width: 15px; height: 15px; display: inline-grid; place-items: center; color: #fff; background: var(--pine-2); border: 0; border-radius: 50%; font: 800 8px/1 var(--sans); }
.studio-help { position: relative; flex: 0 0 15px; padding: 0; cursor: help; }
.studio-help::after { display: none; content: attr(data-tooltip); position: absolute; z-index: 80; top: calc(100% + 8px); left: var(--studio-tooltip-offset, -8px); width: max-content; max-width: min(270px, calc(100vw - 50px)); padding: 9px 11px; color: #fff; background: var(--pine); border-radius: 8px; box-shadow: 0 8px 25px rgba(12,43,34,.22); font: 600 8px/1.5 var(--sans); text-align: left; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-3px); transition: opacity .14s ease, transform .14s ease, visibility .14s ease; }
.studio-help:hover::after, .studio-help:focus-visible::after, .studio-help[aria-expanded="true"]::after { display: block; opacity: 1; visibility: visible; transform: translateY(0); }
.studio-help:focus-visible { outline: 2px solid var(--pine-2); outline-offset: 2px; }
.studio-tutorial i { cursor: default; }
.studio-field input, .studio-field textarea, .studio-field select { width: 100%; color: var(--ink); background: color-mix(in srgb, var(--paper) 55%, white); border: 1px solid var(--line); border-radius: 10px; outline: 0; }
.studio-field input, .studio-field select { min-height: 40px; padding: 0 10px; }
.studio-field textarea { padding: 10px; resize: vertical; line-height: 1.5; }
.studio-field select[multiple] { min-height: 108px; padding: 6px; }
.studio-field input:focus, .studio-field textarea:focus, .studio-field select:focus { border-color: var(--pine-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 45%, transparent); }
.studio-field small { color: var(--muted); font-size: 7px; font-weight: 500; }
.studio-two, .studio-three, .studio-four { display: grid; gap: 10px; }
.studio-two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.studio-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.studio-four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.studio-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 17px; }
.studio-choice label { cursor: pointer; }
.studio-choice input { position: absolute; opacity: 0; }
.studio-choice span { display: block; min-height: 72px; padding: 14px; background: color-mix(in srgb, var(--paper) 55%, white); border: 1px solid var(--line); border-radius: 11px; }
.studio-choice input:checked + span { border-color: var(--pine-2); box-shadow: inset 0 0 0 2px var(--pine-2); }
.studio-choice b, .studio-choice small { display: block; }
.studio-choice b { color: var(--ink); font-size: 10px; }
.studio-choice small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.studio-override-note { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 13px; align-items: center; padding: 16px; color: var(--pine); background: color-mix(in srgb,var(--mint) 42%,white); border: 1px solid color-mix(in srgb,var(--pine-2) 34%,var(--line)); border-radius: 12px; }
.studio-override-note > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--lime); background: var(--pine); border-radius: 12px; font-size: 19px; font-weight: 900; }
.studio-portability-note { margin: 0 0 12px; padding: 10px 12px; color: var(--muted); background: var(--paper-deep); border: 1px solid var(--line); border-radius: 10px; font-size: 8px; line-height: 1.55; }
.studio-portability-note strong { color: var(--ink); }
.studio-override-note strong { font: 600 15px/1.1 var(--serif); }
.studio-override-note p { margin: 5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.theme-palette { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; margin-top: 8px; }
.theme-palette label { min-width: 0; display: grid; gap: 4px; color: var(--muted); font-size: 6px; text-align: center; }
.theme-palette input { width: 100%; height: 38px; padding: 2px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.studio-advanced { margin: 10px 0; padding: 12px; background: color-mix(in srgb, var(--paper) 60%, white); border-radius: 10px; }
.studio-advanced summary { color: var(--pine); cursor: pointer; font-size: 9px; font-weight: 850; }
.studio-advanced[open] summary { margin-bottom: 13px; }
.studio-repeat { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.studio-repeat article { margin-bottom: 9px; padding: 14px; background: color-mix(in srgb, var(--paper) 48%, white); border-radius: 11px; }
.studio-repeat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.studio-repeat-head b { font: 600 14px/1 var(--serif); }
.studio-repeat-head button, .danger-link { padding: 0; color: var(--red); background: transparent; border: 0; cursor: pointer; font-size: 8px; font-weight: 800; }
.studio-problems { display: grid; gap: 9px; }
.studio-question-roadmap { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 8px; margin: -4px 0 18px; padding: 12px; color: var(--muted); background: color-mix(in srgb, var(--mint) 28%, white); border: 1px solid var(--line); border-radius: 12px; }
.studio-question-roadmap article { display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 8px; align-items: start; }
.studio-question-roadmap article > span { width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: var(--pine-2); border-radius: 50%; font-size: 8px; font-weight: 900; }
.studio-question-roadmap strong { display: block; color: var(--ink); font-size: 8px; }
.studio-question-roadmap p { margin: 3px 0 0; font-size: 7px; line-height: 1.45; }
.studio-question-roadmap > i { color: var(--pine-2); font-style: normal; font-weight: 900; }
.studio-question-tabs { display: grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); gap: 7px; max-height: 214px; margin-bottom: 8px; padding: 3px; overflow: auto; }
.studio-question-tabs button { min-width: 0; display: grid; grid-template-columns: 27px minmax(0,1fr); gap: 2px 8px; align-items: center; padding: 9px; color: var(--ink); text-align: left; background: color-mix(in srgb,var(--paper) 48%,white); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.studio-question-tabs button[aria-current="true"] { background: color-mix(in srgb,var(--mint) 48%,white); border-color: var(--pine-2); box-shadow: inset 0 0 0 1px var(--pine-2); }
.studio-question-tabs span { grid-row: 1 / 3; width: 27px; height: 27px; display: grid; place-items: center; color: var(--pine); background: var(--lime); border-radius: 8px; font-size: 7px; font-weight: 900; }
.studio-question-tabs b, .studio-question-tabs small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-question-tabs b { font-size: 8px; }
.studio-question-tabs small { color: var(--muted); font-size: 6px; }
.studio-question-count { margin: 0 3px 12px; color: var(--muted); font-size: 7px; }
.studio-response-picker { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.8fr); gap: 14px; align-items: center; margin: 12px 0 16px; padding: 13px 14px 3px; background: color-mix(in srgb, var(--mint) 32%, white); border: 1px solid var(--line); border-radius: 11px; }
.studio-response-picker strong, .studio-response-picker small { display: block; }
.studio-response-picker strong { color: var(--ink); font-size: 10px; }
.studio-response-picker small { max-width: 430px; margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.studio-response-summary { grid-column: 1 / -1; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px; align-items: center; margin: 0 -2px 10px; padding: 10px 12px; background: var(--paper-light); border-radius: 9px; }
.studio-response-summary > span { width: 32px; height: 32px; display: grid; place-items: center; color: var(--lime); background: var(--pine); border-radius: 9px; font: 700 17px/1 var(--serif); }
.studio-response-summary p { margin: 3px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.studio-problems > details { background: color-mix(in srgb, var(--paper) 48%, white); border: 1px solid var(--line); border-radius: 12px; }
.studio-problems > details > summary { display: grid; grid-template-columns: 31px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px; cursor: pointer; }
.studio-problems > details > summary span { width: 29px; height: 29px; display: grid; place-items: center; color: var(--pine); background: var(--mint); border-radius: 8px; font-size: 8px; font-weight: 900; }
.studio-problems > details > summary b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.studio-problems > details > summary small { color: var(--muted); font-size: 7px; }
.studio-problem-body { padding: 4px 14px 14px; }
.studio-work-authoring { padding: 0; overflow: hidden; background: #f6f8f4; border: 1px solid color-mix(in srgb, var(--line) 74%, var(--pine-2)); }
.studio-work-authoring > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; list-style-position: inside; }
.studio-work-authoring > summary span { color: var(--pine); font-size: 9px; font-weight: 900; }
.studio-work-authoring > summary b { padding: 5px 8px; color: var(--pine); background: var(--mint); border-radius: 99px; font-size: 7px; }
.studio-work-authoring[open] > summary { margin: 0; border-bottom: 1px solid var(--line); }
.studio-work-authoring > :not(summary) { margin-right: 14px; margin-left: 14px; }
.studio-mode-guide { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 11px; align-items: center; margin-top: 14px; padding: 12px; color: var(--muted); background: var(--paper-light); border-radius: 10px; }
.studio-mode-guide > span { width: 38px; height: 38px; display: grid; place-items: center; color: var(--lime); background: var(--pine); border-radius: 10px; font: 700 20px/1 var(--serif); }
.studio-mode-guide strong { display: block; color: var(--ink); font-size: 9px; }
.studio-mode-guide p { margin: 4px 0 0; font-size: 8px; line-height: 1.5; }
.studio-syntax-note { margin-top: 5px; padding: 12px 14px; color: var(--pine); background: #edf5f0; border-left: 3px solid var(--pine-2); border-radius: 9px; }
.studio-syntax-note strong { display: block; font-size: 9px; }
.studio-syntax-note p { margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.studio-proof-anatomy { margin-top: 14px !important; overflow: hidden; background: var(--paper-light); border: 1px solid color-mix(in srgb, var(--pine-2) 38%, var(--line)); border-radius: 12px; }
.studio-proof-anatomy > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; color: #fff; background: var(--pine); }
.studio-proof-anatomy > header span, .studio-proof-anatomy > header strong { display: block; }
.studio-proof-anatomy > header span { color: var(--lime); font-size: 6px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.studio-proof-anatomy > header strong { margin-top: 3px; font: 600 15px/1.1 var(--serif); }
.studio-proof-anatomy > header > b { padding: 5px 8px; color: var(--pine); background: var(--lime); border-radius: 99px; font-size: 6px; text-transform: uppercase; }
.studio-proof-flow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap: 7px; align-items: center; padding: 14px; }
.studio-proof-flow article { min-height: 128px; display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 8px; align-content: start; padding: 10px; background: color-mix(in srgb, var(--paper) 48%, white); border-radius: 9px; }
.studio-proof-flow article > span { width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: var(--pine-2); border-radius: 50%; font-size: 7px; font-weight: 900; }
.studio-proof-flow strong, .studio-proof-flow b { display: block; }
.studio-proof-flow strong { color: var(--ink); font-size: 8px; }
.studio-proof-flow b { margin-top: 3px; color: var(--coral); font-size: 6px; text-transform: uppercase; }
.studio-proof-flow p { margin: 6px 0 0; color: var(--muted); font-size: 7px; line-height: 1.5; }
.studio-proof-flow > i { color: var(--pine-2); font-style: normal; font-weight: 900; }
.studio-proof-contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 14px 14px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 10px; }
.studio-proof-contrast article { padding: 12px; background: var(--paper-light); }
.studio-proof-contrast span, .studio-proof-contrast strong { display: block; }
.studio-proof-contrast span { color: var(--coral); font-size: 6px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.studio-proof-contrast strong { margin-top: 3px; color: var(--ink); font-size: 9px; }
.studio-proof-contrast p { margin: 5px 0 0; color: var(--muted); font-size: 7px; line-height: 1.55; }
.studio-example-button { margin: -2px 14px 12px !important; padding: 0; color: var(--pine-2); background: transparent; border: 0; cursor: pointer; font-size: 8px; font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }
.studio-review-lock { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; align-items: center; margin-top: 10px; padding: 10px 12px; color: var(--pine); background: color-mix(in srgb, var(--lime) 30%, white); border-radius: 10px; }
.studio-review-lock > span { width: 29px; height: 29px; display: grid; place-items: center; color: #fff; background: var(--pine-2); border-radius: 50%; font-weight: 900; }
.studio-review-lock strong { display: block; font-size: 8px; }
.studio-review-lock p { margin: 3px 0 0; color: var(--muted); font-size: 7px; }
.studio-student-preview { margin-top: 14px; margin-bottom: 14px; overflow: hidden; background: var(--paper-light); border: 1px solid var(--line); border-radius: 12px; }
.studio-student-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; color: #dcebe2; background: var(--pine); }
.studio-student-preview > header span, .studio-student-preview > header strong { display: block; }
.studio-student-preview > header span { color: var(--lime); font-size: 6px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.studio-student-preview > header strong { margin-top: 2px; color: #fff; font-size: 9px; }
.studio-student-preview > header > b { padding: 5px 8px; color: var(--pine); background: var(--lime); border-radius: 99px; font-size: 6px; text-transform: uppercase; }
.studio-student-preview > article { padding: 14px; }
.studio-student-preview > article > small { color: var(--coral); font-size: 6px; font-weight: 900; letter-spacing: .12em; }
.studio-student-preview h4 { margin: 4px 0 12px; font: 600 15px/1.25 var(--serif); }
.studio-student-preview label { display: grid; gap: 5px; margin-top: 9px; color: var(--muted); font-size: 7px; font-weight: 850; }
.studio-student-preview label > i { min-height: 35px; padding: 9px 10px; color: #8a928d; background: #fbf8f1; border: 1px solid var(--line); border-radius: 8px; font-style: normal; font-weight: 500; }
.studio-student-preview .studio-preview-work > i { min-height: 82px; line-height: 1.7; background-image: repeating-linear-gradient(transparent 0, transparent 21px, rgba(21,63,54,.06) 22px); }
.studio-preview-guide { margin: 10px 0; padding: 11px 12px; color: var(--muted); background: #f4f0e7; border-radius: 9px; font-size: 7px; }
.studio-preview-guide > strong { display: block; color: var(--pine); font-size: 8px; }
.studio-preview-guide ul, .studio-preview-guide ol { display: grid; gap: 3px; margin: 7px 0 0; padding-left: 18px; }
.studio-preview-guide p { margin: 8px 0 0; }
.studio-student-preview > footer { padding: 9px 13px; color: var(--muted); background: color-mix(in srgb, var(--paper) 58%, white); border-top: 1px solid var(--line); font-size: 7px; line-height: 1.45; }
.studio-runtime-preview { margin: 14px 0; overflow: hidden; color: var(--ink); background: color-mix(in srgb, var(--highlight) 24%, var(--paper-light)); border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line)); border-radius: 13px; }
.studio-runtime-preview header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; color: #fff; background: var(--primary); }
.studio-runtime-preview header span, .studio-runtime-preview header strong { display: block; }
.studio-runtime-preview header span { color: var(--highlight); font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.studio-runtime-preview header strong { margin-top: 3px; font: 600 15px/1.1 var(--serif); }
.studio-runtime-preview header > div:last-child { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.studio-runtime-preview header .quiet-button { color: var(--highlight); }
.studio-runtime-preview > div { padding: 15px; }
.studio-runtime-preview > div > small { color: var(--primary-alt); font-size: 7px; font-weight: 900; }
.studio-runtime-preview h3 { margin: 7px 0 12px; font: 600 18px/1.2 var(--serif); }
.studio-runtime-preview dl { display: grid; grid-template-columns: 1.4fr .7fr .7fr; gap: 8px; margin: 0; }
.studio-runtime-preview dl div { padding: 9px; background: rgba(255,255,255,.7); border-radius: 8px; }
.studio-runtime-preview dt { color: var(--muted); font-size: 6px; font-weight: 900; text-transform: uppercase; }
.studio-runtime-preview dd { margin: 5px 0 0; font-size: 8px; overflow-wrap: anywhere; }
.studio-runtime-preview footer { padding: 9px 14px; color: var(--muted); border-top: 1px solid var(--line); font-size: 7px; }
.studio-checks { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 10px; color: var(--muted); font-size: 8px; font-weight: 750; }
.studio-checks input { accent-color: var(--pine-2); }
.studio-publish { display: grid; grid-template-columns: minmax(220px,1fr) minmax(220px,.8fr); gap: 16px; align-items: center; }
.studio-publish > p { grid-column: 1 / -1; }
.studio-publish-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.studio-validation { padding: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; }
.studio-validation.is-valid { background: color-mix(in srgb, var(--mint) 48%, white); border-color: var(--pine-2); }
.studio-validation.is-error { background: #fff0eb; border-color: var(--coral); }
.studio-validation strong, .studio-validation small { display: block; }
.studio-validation p { margin: 4px 0; color: var(--muted); font-size: 8px; }
.studio-validation small { color: var(--pine-2); font-size: 7px; }

/* Lesson Depot */
.depot-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.depot-head h1 { max-width: 700px; }
.depot-trust-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr) auto) minmax(0,1fr); align-items: center; gap: 10px; margin: 18px 0; padding: 15px 18px; color: #eef5f1; background: var(--pine); border-radius: var(--radius-lg); }
.depot-trust-strip span { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 2px 8px; align-items: center; }
.depot-trust-strip b { grid-row: 1 / 3; width: 27px; height: 27px; display: grid; place-items: center; color: var(--pine); background: var(--lime); border-radius: 50%; font-size: 8px; }
.depot-trust-strip strong, .depot-trust-strip small { display: block; }
.depot-trust-strip strong { color: #fff; font-size: 8px; }
.depot-trust-strip small { color: color-mix(in srgb, var(--mint) 74%, white); font-size: 6px; }
.depot-trust-strip i { color: var(--lime); font-style: normal; }
.depot-toolbar { display: grid; grid-template-columns: minmax(220px,1.7fr) minmax(140px,.7fr) minmax(140px,.7fr) auto; gap: 10px; align-items: end; margin: 18px 0; }
.depot-toolbar label { display: grid; gap: 5px; color: var(--muted); font-size: 7px; font-weight: 850; text-transform: uppercase; }
.depot-toolbar input, .depot-toolbar select { width: 100%; min-height: 42px; padding: 0 12px; color: var(--ink); background: var(--paper-light); border: 1px solid var(--line); border-radius: 10px; outline: 0; }
.depot-toolbar input:focus, .depot-toolbar select:focus { border-color: var(--pine-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 45%, transparent); }
.depot-toolbar .quiet-button { min-height: 42px; }
.depot-results-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 22px 0 11px; }
.depot-results-heading h2 { margin: 0; font: 600 26px/1 var(--serif); }
.depot-results-heading > small { max-width: 430px; color: var(--muted); text-align: right; font-size: 7px; }
.depot-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.depot-card { position: relative; min-width: 0; display: flex; flex-direction: column; overflow: hidden; padding: 22px 19px 19px; background: var(--depot-paper,var(--paper-light)); border: 1px solid color-mix(in srgb,var(--depot-primary,var(--pine)) 24%,var(--line)); border-radius: var(--radius-lg); box-shadow: 0 12px 30px color-mix(in srgb,var(--depot-primary,var(--pine)) 9%,transparent); }
.depot-card::before { position: absolute; inset: 0 0 auto; height: 5px; content: ""; background: linear-gradient(90deg,var(--depot-primary,var(--pine)),var(--depot-accent,var(--coral)) 62%,var(--depot-highlight,var(--lime))); }
.depot-card.is-preview { background: linear-gradient(145deg,var(--depot-paper,var(--paper-light)),color-mix(in srgb,var(--depot-tint,var(--mint)) 24%,var(--depot-paper,var(--paper-light)))); border-style: dashed; }
.depot-card.is-preview .depot-version { color: var(--depot-primary,var(--pine)); background: color-mix(in srgb,var(--depot-highlight,var(--lime)) 48%,var(--depot-paper,var(--paper-light))); }
.depot-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.depot-card-badges { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.depot-subject, .depot-version { padding: 5px 7px; border-radius: 99px; font-size: 6px; font-weight: 900; text-transform: uppercase; }
.depot-subject { color: var(--depot-primary,var(--pine)); background: var(--depot-highlight,var(--lime)); }
.depot-version { color: var(--muted); background: var(--paper-deep); }
.depot-trust-badge { padding: 5px 7px; color: var(--depot-primary,var(--pine)); background: color-mix(in srgb,var(--depot-tint,var(--mint)) 58%,white); border: 1px solid color-mix(in srgb,var(--depot-primary,var(--pine)) 20%,transparent); border-radius: 99px; font-size: 6px; font-weight: 900; text-transform: uppercase; }
.depot-trust-badge.is-official { color: #fff; background: var(--depot-primary,var(--pine)); }
.depot-trust-badge.is-recommended { background: var(--depot-highlight,var(--lime)); }
.depot-trust-badge.is-new, .depot-trust-badge.is-subscribed { color: #704512; background: #f6e4ad; }
.depot-trust-badge.is-contested { color: #8a2e20; background: #ffe0d7; border-color: var(--coral); }
.depot-card.is-contested { border-color: var(--coral); border-style: dashed; }
.depot-card h2 { margin: 15px 0 7px; color: var(--depot-primary,var(--ink)); font: 600 22px/1.04 var(--serif); }
.depot-card > p { min-height: 43px; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.depot-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0; }
.depot-tags span { padding: 5px 7px; color: var(--depot-primary-alt,var(--pine-2)); background: color-mix(in srgb,var(--depot-tint,var(--mint)) 48%,white); border-radius: 99px; font-size: 6px; font-weight: 800; }
.depot-card dl { display: grid; gap: 6px; margin: auto 0 12px; padding-top: 5px; }
.depot-card dl div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.depot-card dt, .depot-card dd { margin: 0; font-size: 7px; }
.depot-card dt { color: var(--muted); }
.depot-card dd { overflow: hidden; color: var(--ink); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.depot-community a, .depot-community button { width: 100%; min-height: 39px; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 9px; color: var(--pine); text-decoration: none; text-align: left; background: var(--paper); border: 1px solid transparent; border-radius: 9px; cursor: pointer; font: 800 7px/1.2 var(--sans); }
.depot-community a:hover, .depot-community button:hover, .depot-community button:focus-visible { border-color: var(--pine-2); background: color-mix(in srgb, var(--mint) 55%, var(--paper-light)); outline: none; }
.depot-community .depot-preview-community:disabled { color: var(--muted); background: color-mix(in srgb, var(--paper-deep) 58%, var(--paper-light)); border-color: var(--line); cursor: default; opacity: 1; }
.depot-community b { margin-left: auto; }
.depot-community-panel { margin: 18px 0; overflow: hidden; background: var(--paper-light); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 18px 50px rgba(30,45,37,.08); }
.depot-community-panel > header, .depot-community-panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; background: color-mix(in srgb, var(--mint) 42%, var(--paper-light)); }
.depot-community-panel > header { border-bottom: 1px solid var(--line); }
.depot-community-panel > header > div { display: flex; align-items: baseline; gap: 8px; }
.depot-community-panel > header span, .depot-community-panel > footer span { color: var(--muted); font-size: 7px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.depot-community-panel > header strong { font-size: 9px; }
.depot-community-panel > footer { border-top: 1px solid var(--line); }
.community-connect-copy { max-width: 760px; padding: 30px; }
.community-connect-copy h2 { margin: 0; font: 600 30px/1.05 var(--serif); }
.community-connect-copy > p:not(.eyebrow) { margin: 10px 0 18px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.community-connect-copy > div { display: flex; flex-wrap: wrap; gap: 9px; }
.community-error { padding: 10px 12px; color: #8b2f20 !important; background: color-mix(in srgb, var(--coral) 13%, white); border-left: 3px solid var(--coral); border-radius: 8px; }
.community-remember { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 18px; color: var(--ink); font-size: 8px; cursor: pointer; }
.community-remember input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--pine); }
.community-remember span { display: grid; gap: 2px; }
.community-remember small { color: var(--muted); font-size: 7px; font-weight: 500; }
.community-loading { min-height: 210px; display: grid; place-items: center; align-content: center; gap: 9px; padding: 30px; }
.community-loading strong { font: 600 22px/1 var(--serif); }
.community-loading small { color: var(--muted); font-size: 8px; }
.community-discussion-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 25px 28px; }
.community-discussion-heading h2 { margin: 0; font: 600 30px/1.05 var(--serif); }
.community-discussion-heading p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.community-reaction-groups { display: flex; flex-wrap: wrap; gap: 16px 24px; padding: 0 28px 22px; }
.community-reaction-group { min-width: 0; }
.community-reactions-label { display: flex; align-items: center; gap: 6px; color: var(--pine); font-size: 9px; }
.community-reactions-label > b { min-width: 22px; padding: 3px 6px; text-align: center; background: var(--paper); border-radius: 6px; }
.community-emoji-reactions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.community-emoji-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 55px; min-height: 40px; padding: 7px 10px; color: var(--pine); background: var(--paper-light); border: 1px solid var(--line); border-radius: 99px; cursor: pointer; }
.community-emoji-button > span { font-size: 17px; line-height: 1; }
.community-emoji-button > b { font-size: 10px; }
.community-emoji-button[aria-pressed="true"] { background: var(--mint); border-color: var(--pine); box-shadow: inset 0 0 0 1px var(--pine); }
.community-emoji-button:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }
.community-emoji-button:disabled { opacity: .55; cursor: default; }
.community-comment-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.community-comment-feedback .community-emoji-reactions { margin: 0; }
.community-comment-feedback .community-reaction-groups { padding: 0; gap: 14px 20px; }
.community-comment-feedback .community-reactions-label { margin-bottom: 8px; }
.community-comments { margin: 0 28px 24px; border: 1px solid var(--line); border-radius: 14px; }
.community-comments-heading { display: flex; justify-content: space-between; gap: 12px; padding: 12px 15px; background: var(--paper); border-bottom: 1px solid var(--line); }
.community-comments-heading strong, .community-comments-heading a { color: var(--pine); font-size: 8px; }
.community-comment { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px; padding: 14px 15px; border-bottom: 1px solid var(--line); }
.community-comment:last-child { border-bottom: 0; }
.community-comment-avatar { width: 32px; height: 32px; display: grid; place-items: center; color: var(--pine); background: var(--lime); border-radius: 50%; font: 700 14px/1 var(--serif); }
.community-comment header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.community-comment header strong { font-size: 8px; }
.community-comment header span { padding: 3px 5px; color: var(--pine); background: var(--mint); border-radius: 99px; font-size: 5px; font-weight: 900; text-transform: uppercase; }
.community-comment time { margin-left: auto; color: var(--muted); font-size: 6px; }
.community-comment p { margin: 7px 0; color: var(--ink); font-size: 8px; line-height: 1.55; overflow-wrap: anywhere; }
.community-comment a { color: var(--pine-2); font-size: 6px; font-weight: 800; }
.community-empty { padding: 30px; color: var(--muted); text-align: center; font-size: 8px; }
.community-comment-form { display: grid; gap: 8px; margin: 0 28px 28px; padding: 16px; background: color-mix(in srgb, var(--mint) 32%, var(--paper-light)); border-radius: 14px; }
.community-comment-form > label { color: var(--pine); font-size: 8px; font-weight: 850; }
.community-comment-form textarea { width: 100%; min-height: 92px; resize: vertical; padding: 11px 12px; color: var(--ink); background: var(--paper-light); border: 1px solid var(--line); border-radius: 10px; outline: none; font: 8px/1.5 var(--sans); }
.community-comment-form textarea:focus { border-color: var(--pine-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 55%, transparent); }
.community-comment-form > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.community-comment-form small { color: var(--muted); font-size: 7px; }
.lesson-hub-tabs { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; padding: 9px 10px 9px 15px; color: var(--muted); background: color-mix(in srgb, var(--mint) 38%, var(--paper-light)); border: 1px solid var(--line); border-radius: 13px; }
.lesson-hub-tabs > span { font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.lesson-hub-tabs > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.lesson-hub-tabs button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; color: var(--muted); background: transparent; border: 0; border-radius: 9px; cursor: pointer; font-size: 8px; font-weight: 850; }
.lesson-hub-tabs button b { font-size: 11px; }
.lesson-hub-tabs button[aria-current="page"] { color: #fff; background: var(--pine-2); box-shadow: 0 5px 14px rgba(21,63,54,.16); }
.depot-card-actions { display: grid; grid-template-columns: .65fr 1fr; gap: 7px; }
.depot-card-actions .button { width: 100%; min-width: 0; padding-inline: 9px; }
.depot-card-actions button:disabled { cursor: default; opacity: .6; }
.depot-preview { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; margin: 18px 0; padding: 20px; color: #fff; background: var(--pine); border-radius: var(--radius-lg); }
.depot-preview h2 { margin: 0; color: #fff; font: 600 27px/1.05 var(--serif); }
.depot-preview p:not(.eyebrow) { max-width: 650px; margin: 6px 0; color: color-mix(in srgb, var(--mint) 75%, white); font-size: 8px; }
.depot-preview .eyebrow, .depot-preview .quiet-button { color: var(--lime); }
.depot-preview-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.depot-preview-facts span { padding: 7px 9px; color: var(--ink); background: var(--paper-light); border-radius: 8px; font-size: 8px; font-weight: 850; }
.depot-preview-facts small { display: block; margin-top: 2px; color: var(--muted); font-size: 5px; text-transform: uppercase; }
.depot-state { display: grid; justify-items: center; gap: 8px; margin: 20px 0; padding: 50px 20px; text-align: center; background: var(--paper-light); border: 1px dashed var(--line); border-radius: var(--radius-lg); }
.depot-state > span { width: 38px; height: 38px; display: grid; place-items: center; color: var(--pine); background: var(--lime); border-radius: 50%; font: 700 18px/1 var(--serif); }
.depot-state h2 { margin: 0; font: 600 25px/1 var(--serif); }
.depot-state p { margin: 0; color: var(--muted); font-size: 8px; }
.depot-state.is-error { background: #fff5f0; border-color: var(--coral); }
.depot-spinner { animation: depot-spin 900ms linear infinite; border: 3px solid var(--mint); border-top-color: var(--pine-2); }
@keyframes depot-spin { to { transform: rotate(360deg); } }
.depot-contribute { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 24px; margin-top: 18px; padding: 25px; background: color-mix(in srgb, var(--mint) 40%, var(--paper-light)); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.depot-contribute h2 { margin: 0; font: 600 27px/1.05 var(--serif); }
.depot-contribute p:not(.eyebrow) { max-width: 680px; color: var(--muted); font-size: 8px; }
.depot-contribute > div:last-child { display: grid; gap: 7px; }

@media (max-width: 1240px) {
  .app-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .app-shell.agent-collapsed { grid-template-columns: 210px minmax(0, 1fr); }
  .agent-dock { position: fixed; z-index: 70; right: 0; top: 0; width: min(360px, 92vw); transform: translateX(105%); box-shadow: -20px 0 50px rgba(0,0,0,.18); transition: transform 200ms ease; }
  .agent-dock.is-open { transform: translateX(0); }
  .application-grid { grid-template-columns: 190px repeat(2, minmax(0, 1fr)); }
  .application-grid article:last-child { grid-column: 2 / -1; }
  .tour-layout { grid-template-columns: 175px minmax(0,1fr); }
  .tour-stage { grid-template-columns: minmax(240px,.8fr) minmax(280px,1.2fr); gap: 18px; }
}

@media (max-width: 860px) {
  .welcome-main { grid-template-columns: 1fr; gap: 42px; padding-top: 42px; }
  .welcome-copy h1 { max-width: 700px; }
  .profile-panel { max-width: 620px; }
  .app-shell { display: block; padding-bottom: 64px; }
  .sidebar { position: sticky; z-index: 50; top: 0; width: 100%; height: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 10px 16px; }
  .sidebar-brand { padding: 0; border: 0; }
  .sidebar-brand img { width: 42px; height: 40px; }
  .sidebar-brand small { display: none; }
  .clock-card { display: none; }
  .main-nav { display: none; }
  .sidebar-profile { margin: 0; padding: 0; border: 0; justify-self: end; }
  .view-root { padding: 30px 18px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .map-layout { grid-template-columns: 1fr; }
  .map-layout.is-plan-mode { grid-template-columns: minmax(0, 1fr); }
  .map-scroll { height: clamp(300px, 60svh, 540px); max-height: none; contain: layout paint; }
  .map-detail { position: relative; top: 0; }
  .map-plan-actionbar { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; padding: 6px; }
  .map-plan-actionbar > div { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; padding: 2px 5px 4px; }
  .map-plan-actionbar > button { grid-template-columns: 23px minmax(0,1fr); padding: 6px; }
  .map-plan-actionbar > button > span { width: 23px; height: 23px; }
  .map-plan-panel:not(.is-composer-open) { display: none; }
  .map-plan-panel.is-composer-open { position: fixed; z-index: 75; top: auto; right: 10px; bottom: 68px; left: 10px; max-height: min(72svh, 620px); overflow: auto; padding: 16px; box-shadow: 0 24px 70px rgba(13,38,33,.34); }
  .lesson-overview { grid-template-columns: 1fr; }
  .lesson-status-card { position: relative; top: 0; }
  .application-grid { grid-template-columns: 1fr 1fr; }
  .application-grid .section-title { grid-column: 1 / -1; }
  .application-grid article:last-child { grid-column: auto; }
  .results-layout { grid-template-columns: 1fr; }
  .review-form-grid { grid-template-columns: repeat(2, 1fr); }
  .reflection-card { position: relative; top: 0; }
  .data-grid { grid-template-columns: 1fr; }
  .settings-controls { grid-template-columns: 1fr; }
  .storage-summary { grid-template-columns: repeat(2, 1fr); }
  .lesson-pack-guide { grid-template-columns: 1fr 1fr; }
  .lesson-pack-guide > div { grid-column: 1 / -1; }
  .staged-pack { grid-template-columns: auto 1fr; }
  .staged-pack .button { width: 100%; }
  .studio-native-picker { grid-template-columns: 1fr minmax(250px,.8fr); }
  .studio-native-picker > div { grid-column: 1 / -1; }
  .studio-tutorial { grid-template-columns: 1fr; padding-bottom: 50px; }
  .studio-grid { grid-template-columns: 1fr; }
  .studio-rail { position: relative; top: 0; }
  .studio-skill-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .studio-four { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tour-layout { grid-template-columns: 1fr; }
  .tour-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .tour-steps button { grid-template-columns: 24px minmax(0,1fr); }
  .tour-steps button > span { width: 24px; height: 24px; }
  .tour-stage { grid-template-columns: 1fr; min-height: 0; }
  .tour-actions { grid-column: auto; }
  .mobile-nav { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; height: 58px; display: grid; grid-template-columns: repeat(6, 1fr); background: rgba(255,253,248,.97); border-top: 1px solid var(--line); backdrop-filter: blur(10px); }
  .mobile-nav button { color: var(--muted); background: transparent; border: 0; font-size: 9px; font-weight: 800; }
  .mobile-nav button[aria-current="page"] { color: var(--pine); background: rgba(184,217,201,.3); }
  .agent-toggle { top: 68px; }
}

@media (max-width: 620px) {
  .welcome-header, .welcome-main { width: min(100% - 28px, 1280px); }
  .welcome-header { min-height: 76px; }
  .welcome-brand img { width: 51px; height: 48px; }
  .welcome-brand { font-size: 20px; }
  .local-pill { padding: 7px 9px; font-size: 8px; }
  .welcome-main { padding: 34px 0 78px; }
  .welcome-copy h1 { font-size: clamp(45px, 14vw, 68px); }
  .welcome-lede { font-size: 15px; }
  .welcome-proof { gap: 10px; }
  .welcome-proof span { min-width: 96px; }
  .welcome-storage-restore > summary { align-items: flex-start; }
  .welcome-github-sync-form .github-repo-fields { grid-template-columns: 1fr; }
  .welcome-github-sync-form .github-repo-fields label:last-child { grid-column: auto; }
  .welcome-github-sync-form .bridge-connect-actions .button { width: 100%; justify-content: center; }
  .profile-panel { padding: 22px; }
  .input-action { align-items: stretch; flex-direction: column; }
  .profile-panel-footer { align-items: start; flex-direction: column; }
  .profile-panel-footer p { max-width: none; text-align: left; }
  .welcome-footer { left: 14px; }
  .page-head { align-items: start; flex-direction: column; }
  .lesson-hub-tabs { position: sticky; z-index: 35; top: 76px; align-items: stretch; flex-direction: column; gap: 7px; margin: -12px -2px 18px; padding: 8px; background: rgba(247,250,247,.96); box-shadow: 0 8px 20px rgba(21,63,54,.08); backdrop-filter: blur(10px); }
  .lesson-hub-tabs > span { padding-left: 5px; font-size: 7px; }
  .lesson-hub-tabs > div { width: 100%; }
  .lesson-hub-tabs button { min-height: 40px; padding: 0 8px; font-size: 8px; }
  .depot-community-panel { scroll-margin-top: 164px; }
  .page-actions { justify-content: flex-start; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric-card { min-height: 110px; padding: 15px; }
  .metric-card strong { font-size: 31px; }
  .suggested-card { padding: 23px; }
  .suggested-card h2 { font-size: 29px; }
  .sidebar-brand span { display: none; }
  .sidebar-profile small { display: none; }
  .page-head .compact-select, .page-head .compact-select select { width: 100%; max-width: none; }
  .map-layout { min-height: 0; }
  .application-grid { grid-template-columns: 1fr; }
  .application-grid article, .application-grid article:last-child { grid-column: auto; }
  .answer-options { grid-template-columns: 1fr; }
  .sticky-submit { align-items: stretch; flex-direction: column; }
  .sticky-submit .button { width: 100%; }
  .result-score { text-align: left; }
  .result-body { padding-left: 17px; }
  .result-body dl { grid-template-columns: 1fr; }
  .storage-summary { grid-template-columns: 1fr; }
  .settings-mode-grid { grid-template-columns: 1fr; }
  .backup-recommendation { align-items: flex-start; flex-wrap: wrap; }
  .backup-recommendation .button { width: 100%; }
  .lesson-pack-guide { grid-template-columns: 1fr; }
  .lesson-pack-guide > div { grid-column: auto; }
  .staged-pack { grid-template-columns: 1fr; }
  .installed-packs article { grid-template-columns: auto 1fr; }
  .installed-packs article .pack-actions { grid-column: 1 / -1; justify-items: start; }
  .backup-flow { grid-template-columns: 1fr; }
  .backup-flow > b { transform: rotate(90deg); text-align: center; }
  .review-form-grid { grid-template-columns: 1fr; }
  .structured-review-row { grid-template-columns: 1fr; }
  .studio-native-picker { grid-template-columns: 1fr; padding: 18px; }
  .studio-native-picker > div { grid-column: auto; }
  .studio-native-picker .button { width: 100%; }
  .studio-tutorial ol, .studio-choice, .studio-two, .studio-three, .studio-four, .studio-publish, .studio-response-picker { grid-template-columns: 1fr; }
  .studio-help::after { position: fixed; top: auto; right: 18px; bottom: 82px; left: 18px; width: auto; max-width: none; padding: 12px 14px; font-size: 11px; }
  .studio-question-roadmap { grid-template-columns: 1fr; }
  .studio-runtime-preview header { align-items: flex-start; flex-direction: column; }
  .studio-runtime-preview header > div:last-child { justify-content: start; }
  .studio-runtime-preview dl { grid-template-columns: 1fr; }
  .studio-question-roadmap > i { transform: rotate(90deg); text-align: center; }
  .studio-proof-flow, .studio-proof-contrast { grid-template-columns: 1fr; }
  .studio-proof-flow > i { transform: rotate(90deg); text-align: center; }
  .studio-proof-flow article { min-height: 0; }
  .studio-proof-anatomy > header { align-items: flex-start; flex-direction: column; }
  .studio-work-authoring > summary { align-items: flex-start; flex-direction: column; }
  .studio-mode-guide { grid-template-columns: 32px minmax(0,1fr); }
  .studio-mode-guide > span { width: 32px; height: 32px; font-size: 16px; }
  .depot-trust-strip { grid-template-columns: 1fr; }
  .depot-trust-strip > i { transform: rotate(90deg); text-align: center; }
  .depot-toolbar, .depot-grid, .depot-preview, .depot-contribute { grid-template-columns: 1fr; }
  .depot-results-heading { align-items: start; flex-direction: column; }
  .depot-results-heading > small { text-align: left; }
  .studio-skill-list { grid-template-columns: 1fr; }
  .theme-palette { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .studio-problems > details > summary { grid-template-columns: 31px minmax(0,1fr); }
  .studio-problems > details > summary small { grid-column: 2; }
  .studio-publish > p, .studio-publish-actions { grid-column: auto; }
  .tour-topbar { align-items: flex-start; padding: 8px 0; }
  .tour-topbar > div { align-items: flex-end; flex-direction: column-reverse; gap: 4px; }
  .tour-layout { margin-top: 14px; }
  .tour-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tour-stage { padding: 22px; }
  .tour-copy h1 { font-size: 42px; }
  .tour-actions, .tour-actions > div { align-items: stretch; flex-direction: column-reverse; }
  .tour-actions .button, .tour-actions .quiet-button { width: 100%; }
  .tour-mode-preview, .tour-local-row { grid-template-columns: 1fr; }
  .tour-depot-preview > div { grid-template-columns: 1fr; }
  .tour-loop-preview { grid-template-columns: 1fr; }
  .tour-loop-preview > i { transform: rotate(90deg); text-align: center; }
  .tour-ownership-preview article { grid-template-columns: 42px 1fr; }
  .tour-ownership-preview article > b { grid-column: 2; justify-self: start; }
}

/* QuickMaths Bridge */
.github-bridge-card { margin: 24px 0; overflow: hidden; }
.bridge-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.bridge-card-heading h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); }
.bridge-card-heading p:not(.eyebrow) { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.6; }
.sync-phase { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 8px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--paper-light); font-size: 11px; font-weight: 800; }
.sync-phase i { width: 9px; height: 9px; border-radius: 50%; background: #a6aaa5; }
.sync-phase.connected i { background: #359360; box-shadow: 0 0 0 4px color-mix(in srgb, #359360 15%, transparent); }
.sync-phase.error i, .sync-phase.conflict i { background: var(--coral); box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 15%, transparent); }
.github-sync-form { display: grid; gap: 15px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.bridge-token-form { display: grid; gap: 15px; }
.github-sync-form label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.github-sync-form input { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--paper-light); color: var(--ink); outline: none; }
.github-sync-form input:focus { border-color: var(--pine); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pine) 12%, transparent); }
.github-repo-fields { display: grid; grid-template-columns: 1fr 1fr .65fr; gap: 12px; }
.bridge-remember { display: flex !important; align-items: flex-start; gap: 10px !important; color: var(--ink) !important; }
.bridge-remember input { flex: 0 0 auto; width: 18px; min-height: 18px; margin-top: 2px; accent-color: var(--pine); }
.bridge-remember span { display: grid; gap: 3px; }
.bridge-remember small { color: var(--muted); font-weight: 500; line-height: 1.45; }
.bridge-connect-actions, .bridge-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bridge-form-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.bridge-warning, .bridge-choice { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 15px; border-radius: 13px; background: color-mix(in srgb, var(--coral) 11%, var(--paper-light)); border-left: 4px solid var(--coral); }
.bridge-warning { align-items: flex-start; }
.bridge-warning p, .bridge-choice p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.bridge-choice > div { flex: 1; }
.bridge-status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 23px 0; }
.bridge-status-grid article { display: grid; gap: 4px; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-light); }
.bridge-status-grid span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bridge-status-grid strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.bridge-status-grid small { color: var(--muted); font-size: 10px; }
.bridge-toolbar { margin-bottom: 14px; }
.danger-link { margin-left: auto; color: var(--coral); }
.workspace-storage-manager { margin: 24px 0; padding: 0; overflow: hidden; }
.workspace-storage-manager > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px; cursor: pointer; list-style: none; }
.workspace-storage-manager > summary::-webkit-details-marker { display: none; }
.workspace-storage-manager > summary > span { display: grid; gap: 4px; }
.workspace-storage-manager > summary strong { font: 600 clamp(22px,2.6vw,30px)/1.1 var(--font-display); }
.workspace-storage-manager > summary small { color: var(--muted); font-size: 11px; }
.workspace-storage-manager > summary > b { flex: 0 0 auto; padding: 10px 14px; color: #fff; background: var(--pine); border-radius: 10px; font-size: 11px; }
.workspace-storage-manager[open] > summary { border-bottom: 1px solid var(--line); }
.workspace-storage-manager[open] > summary > b::after { content: " ×"; }
.workspace-storage-manager-body { display: grid; gap: 26px; padding: 24px; }
.depot-source-manager { margin: 24px 0; padding: 0; overflow: hidden; }
.depot-source-manager > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px; cursor: pointer; list-style: none; }
.depot-source-manager > summary::-webkit-details-marker { display: none; }
.depot-source-manager > summary > span { display: grid; gap: 4px; }
.depot-source-manager > summary strong { font: 600 clamp(22px,2.6vw,30px)/1.1 var(--font-display); }
.depot-source-manager > summary small { color: var(--muted); font-size: 11px; }
.depot-source-manager > summary > b { flex: 0 0 auto; padding: 10px 14px; color: #fff; background: var(--pine); border-radius: 10px; font-size: 11px; }
.depot-source-manager[open] > summary { border-bottom: 1px solid var(--line); }
.depot-source-manager[open] > summary > b::after { content: " ×"; }
.depot-source-manager-body { display: grid; gap: 18px; padding: 24px; }
.depot-source-list { display: grid; gap: 8px; }
.depot-source-list article { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; }
.depot-source-list article.is-error { background: #fff2ed; border-color: var(--coral); }
.depot-source-list article > div { min-width: 0; display: grid; gap: 3px; }
.depot-source-list strong, .depot-source-list small { display: block; }
.depot-source-list small, .depot-source-list p { color: var(--muted); font-size: 8px; overflow-wrap: anywhere; }
.depot-source-list p { margin: 3px 0 0; color: #8a2e20; }
.depot-source-warnings { padding: 12px 14px; background: #fff2ed; border-left: 3px solid var(--coral); border-radius: 9px; }
.depot-source-warnings strong { font-size: 9px; }
.depot-source-warnings p { margin: 5px 0 0; color: var(--muted); font-size: 8px; overflow-wrap: anywhere; }
.storage-manager-notice { padding: 16px 18px; border-left: 4px solid var(--coral); border-radius: 12px; background: color-mix(in srgb, var(--coral) 10%, var(--paper-light)); }
.storage-manager-notice p, .storage-manager-heading p:not(.eyebrow), .storage-clear-zone p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.storage-manager-heading, .storage-clear-zone { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.storage-manager-heading h2, .storage-clear-zone h2 { margin: 0; font: 600 24px/1.1 var(--font-display); }
.storage-manager-heading > span { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 800; }
.storage-profile-list { display: grid; gap: 9px; margin-top: 16px; }
.storage-profile-list article { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-light); }
.storage-profile-list article > div { display: grid; gap: 3px; min-width: 0; }
.storage-profile-list article strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storage-profile-list article small { color: var(--muted); font-size: 10px; }
.storage-profile-avatar { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: var(--pine); background: var(--lime); font: 700 18px/1 var(--serif); }
.storage-clear-zone { align-items: center; padding: 20px; border: 1px solid color-mix(in srgb, var(--coral) 48%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--coral) 6%, var(--paper-light)); }
.danger-button { border-color: color-mix(in srgb, var(--coral) 65%, var(--line)) !important; color: var(--coral) !important; }
.danger-button-solid { color: #fff !important; background: var(--coral) !important; box-shadow: 0 9px 20px color-mix(in srgb, var(--coral) 22%, transparent); }
.danger-button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 900px) {
  .github-repo-fields { grid-template-columns: 1fr 1fr; }
  .github-repo-fields label:last-child { grid-column: 1 / -1; }
  .bridge-status-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .bridge-card-heading, .bridge-choice { align-items: flex-start; flex-direction: column; }
  .github-repo-fields, .bridge-status-grid { grid-template-columns: 1fr; }
  .github-repo-fields label:last-child { grid-column: auto; }
  .bridge-connect-actions .button, .bridge-toolbar .button { width: 100%; justify-content: center; }
  .danger-link { margin-left: 0; }
  .workspace-storage-manager > summary, .workspace-storage-manager-body, .depot-source-manager > summary, .depot-source-manager-body { padding: 18px; }
  .workspace-storage-manager > summary, .depot-source-manager > summary, .storage-manager-heading, .storage-clear-zone { align-items: stretch; flex-direction: column; }
  .workspace-storage-manager > summary > b, .depot-source-manager > summary > b, .storage-clear-zone .button { width: 100%; text-align: center; }
  .storage-profile-list article { grid-template-columns: 36px minmax(0,1fr); }
  .storage-profile-avatar { width: 36px; height: 36px; }
  .storage-profile-list article .button { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

/* GitHub community authorization */
.community-auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--lime) 28%, transparent), transparent 38%), var(--paper); }
.community-auth-shell { width: min(620px,100%); }
.community-auth-card { display: grid; justify-items: start; padding: clamp(28px,6vw,60px); background: var(--paper-light); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 25px 70px rgba(24,52,43,.12); }
.community-auth-card h1 { margin: 4px 0 12px; font: 600 clamp(38px,7vw,64px)/.95 var(--serif); }
.community-auth-card > p:not(.eyebrow) { max-width: 440px; margin: 0 0 24px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.community-auth-mark { position: relative; width: 78px; height: 68px; margin-bottom: 24px; color: var(--pine); font-family: var(--serif); }
.community-auth-mark span { position: absolute; font-size: 42px; line-height: 1; }
.community-auth-mark span:nth-child(1) { top: 0; left: 0; }
.community-auth-mark span:nth-child(2) { right: 0; bottom: 0; }
.community-auth-mark i { position: absolute; top: 22px; left: 28px; font: 800 18px/1 var(--sans); }
.community-auth-card .depot-spinner { margin: 6px 0; }

@media (max-width: 700px) {
  .depot-community-panel > header, .depot-community-panel > footer { align-items: flex-start; flex-direction: column; }
  .depot-community-panel > header .quiet-button { align-self: flex-end; margin-top: -29px; }
  .depot-community-panel > footer .danger-link { margin-left: 0; }
  .community-connect-copy { padding: 22px 18px; }
  .community-connect-copy h2, .community-discussion-heading h2 { font-size: 25px; }
  .community-connect-copy > div, .community-connect-copy .button { width: 100%; }
  .community-discussion-heading { align-items: stretch; flex-direction: column; padding: 21px 18px; }
  .community-reaction-groups { padding-right: 18px; padding-left: 18px; }
  .community-comments, .community-comment-form { margin-right: 18px; margin-left: 18px; }
  .community-comment { grid-template-columns: 27px minmax(0,1fr); padding: 12px; }
  .community-comment-avatar { width: 27px; height: 27px; font-size: 12px; }
  .community-comment time { width: 100%; margin-left: 0; }
  .community-comment-form > div { align-items: stretch; flex-direction: column; }
  .community-comment-form .button { width: 100%; }
}

/* Learner / educator entry paths */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.welcome-path-panel { align-self: center; }
.welcome-path-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: -18px -18px 24px; padding: 5px; background: var(--paper-deep); border-radius: 15px; }
.welcome-path-switch button { min-height: 44px; padding: 8px 12px; color: var(--muted); background: transparent; border: 0; border-radius: 11px; cursor: pointer; font-size: 11px; font-weight: 850; line-height: 1.25; }
.welcome-path-switch button.is-active { color: var(--ink); background: var(--paper-light); box-shadow: 0 4px 16px rgba(22,33,29,.08); }
.welcome-curriculum-loader { margin-top: 17px; padding: 16px; background: color-mix(in srgb, var(--mint) 30%, var(--paper-light)); border: 1px solid color-mix(in srgb, var(--pine) 18%, var(--line)); border-radius: 15px; }
.welcome-curriculum-loader h3 { margin: 0; font: 600 22px/1.05 var(--serif); }
.welcome-curriculum-loader > p:not(.eyebrow) { margin: 7px 0 12px; color: var(--muted); font-size: 10px; }
.welcome-loader-actions { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; }
.welcome-loader-actions > button { min-height: 40px; padding: 0 12px; color: var(--pine); background: var(--paper-light); border: 1px solid var(--line); border-radius: 10px; }
.welcome-curriculum-url-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.welcome-curriculum-url-form input { min-width: 0; height: 40px; padding: 0 10px; color: var(--ink); background: var(--paper-light); border: 1px solid var(--line); border-radius: 10px; font-size: 10px; }
.welcome-curriculum-url-form button { padding: 0 10px; }
.educator-welcome-note { margin: 18px 0; padding: 16px; color: #293637; background: #eef0ed; border-left: 4px solid #566665; border-radius: 12px; }
.educator-welcome-note strong { font: 600 19px/1.1 var(--serif); }
.educator-welcome-note p, .welcome-educator-storage { margin: 6px 0 0; color: #66706f; font-size: 10px; line-height: 1.55; }

/* Educator workspace */
.app-shell.is-educator {
  --paper: #ececea;
  --paper-deep: #dedfdd;
  --paper-light: #fafafa;
  --ink: #202829;
  --muted: #66706f;
  --line: #c9cdca;
  --pine: #314846;
  --pine-2: #536b68;
  --mint: #d4ddda;
  --lime: #dfe3dc;
  --coral: #8b6259;
  background: var(--paper);
}
.app-shell.is-educator .sidebar { background: #263b3a; }
.app-shell.is-educator .clock-card { filter: saturate(.35); }
.app-shell.is-educator .agent-toggle { background: #d8ded8; }
.educator-page-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.educator-page-head h1 { max-width: 900px; }
.educator-metrics .metric-card { --metric-color: #657674 !important; }
.educator-policy-summary { display: grid; gap: 0; margin: 10px 0 0; }
.educator-policy-summary div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.educator-policy-summary dt { color: var(--muted); font-size: 11px; }
.educator-policy-summary dd { margin: 0; font-size: 11px; font-weight: 800; text-align: right; }
.curriculum-workspace { margin-bottom: 34px; padding: clamp(22px,3vw,36px); background: #f7f7f6; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 16px 46px rgba(25,40,39,.07); }
.curriculum-workspace-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.curriculum-workspace-head h1 { margin: 0; font: 600 clamp(34px,4vw,52px)/.95 var(--serif); letter-spacing: -.035em; }
.curriculum-workspace-head > div:first-child > p:not(.eyebrow) { max-width: 680px; margin: 12px 0 0; color: var(--muted); }
.curriculum-workspace-actions { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; }
.curriculum-workspace-actions label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.curriculum-workspace-actions select { min-width: 210px; min-height: 44px; padding: 0 12px; color: var(--ink); background: var(--paper-light); border: 1px solid var(--line); border-radius: 11px; }
.curriculum-editor-grid { display: grid; grid-template-columns: minmax(260px,.7fr) minmax(390px,1.3fr); gap: 15px; margin-top: 18px; }
.curriculum-editor-card { display: grid; align-content: start; gap: 12px; padding: 20px; background: var(--paper-light); border: 1px solid var(--line); border-radius: 16px; }
.curriculum-editor-card label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.curriculum-editor-card input:not([type="checkbox"]), .curriculum-editor-card select, .curriculum-editor-card textarea, .educator-inline-form input { width: 100%; min-height: 42px; padding: 9px 11px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; resize: vertical; }
.curriculum-editor-card small { color: var(--muted); font-weight: 500; }
.curriculum-policy-card { grid-row: span 2; }
.curriculum-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.curriculum-agent-toggle { display: grid !important; grid-template-columns: auto 1fr; align-items: start; padding: 13px; background: #eef1ef; border-radius: 11px; }
.curriculum-agent-toggle input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pine); }
.curriculum-agent-toggle strong, .curriculum-agent-toggle small { display: block; }
.agent-policy-preview { padding: 12px 14px; color: #4b5a59; background: #e4e9e6; border-left: 3px solid #6d7f7c; border-radius: 9px; }
.agent-policy-preview strong { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.agent-policy-preview p { margin: 4px 0 0; font-size: 10px; }
.assessment-disclaimer { margin-top: 14px; padding: 13px 15px; color: #4d504e; background: #f0efeb; border: 1px solid #d4d1c8; border-left: 4px solid #767a75; border-radius: 10px; }
.assessment-disclaimer strong { display: block; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.assessment-disclaimer p { margin: 5px 0 0; font-size: 10px; line-height: 1.55; }
.curriculum-pack-manager { grid-column: 1; }
.curriculum-pack-list { display: grid; gap: 8px; }
.curriculum-pack-row { display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 10px !important; padding: 11px; color: var(--ink) !important; background: #f4f5f4; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.curriculum-pack-row input { width: 18px; height: 18px; accent-color: var(--pine); }
.curriculum-pack-row strong, .curriculum-pack-row small { display: block; }
.curriculum-pack-row.is-fixed { opacity: .72; cursor: default; }
.curriculum-scope-note { margin: 2px 0 0; padding: 11px 13px; color: var(--muted); background: #eef1ef; border-left: 3px solid var(--pine-2); border-radius: 9px; font-size: 10px; line-height: 1.55; }
.form-actions, .educator-inline-form { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.educator-inline-form { max-width: 650px; margin-top: 20px; }
.educator-inline-form input { flex: 1; min-width: 220px; }
.educator-empty { padding: clamp(30px,6vw,70px); }
.learner-curriculum-card { margin: 22px 0; }
.curriculum-link-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 10px; margin-top: 16px; }
.curriculum-link-form label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.curriculum-link-form input { min-height: 44px; padding: 0 12px; color: var(--ink); background: var(--paper-light); border: 1px solid var(--line); border-radius: 11px; }
.curriculum-guidance-card pre { max-height: 320px; margin: 0; padding: 16px; overflow: auto; color: var(--ink); background: var(--paper-deep); border: 1px solid var(--line); border-radius: 12px; font: 500 10px/1.65 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 1050px) {
  .curriculum-editor-grid { grid-template-columns: 1fr; }
  .curriculum-policy-card { grid-row: auto; }
  .curriculum-pack-manager { grid-column: auto; }
}
@media (max-width: 700px) {
  .welcome-path-switch { margin: -10px -10px 20px; }
  .welcome-loader-actions, .welcome-curriculum-url-form { grid-template-columns: 1fr; }
  .welcome-loader-actions > button, .welcome-curriculum-url-form button { width: 100%; min-height: 40px; }
  .curriculum-workspace { margin-right: -7px; margin-left: -7px; padding: 18px 14px; border-radius: 17px; }
  .curriculum-workspace-head { flex-direction: column; }
  .curriculum-workspace-actions, .curriculum-workspace-actions label, .curriculum-workspace-actions select { width: 100%; }
  .curriculum-workspace-actions .button { flex: 1; }
  .curriculum-field-grid { grid-template-columns: 1fr; }
  .curriculum-editor-card { padding: 16px; }
  .curriculum-link-form { grid-template-columns: 1fr; }
}

.welcome-student-guide, .welcome-educator-guide { display: inline-flex; width: fit-content; color: var(--pine); font-weight: 800; text-underline-offset: 4px; }
body:has(.educator-welcome-backdrop), body:has(.agent-welcome-backdrop), body:has(.bridge-source-backdrop) { overflow: hidden; }
.action-confirm-backdrop { position: fixed; inset: 0; z-index: 1600; display: grid; place-items: center; box-sizing: border-box; padding: 20px; background: color-mix(in srgb,#0b2f2b 70%,transparent); backdrop-filter: blur(10px); }
.action-confirm-dialog { width: min(520px,100%); box-sizing: border-box; padding: clamp(24px,5vw,40px); color: var(--ink); background: var(--paper-light); border: 1px solid color-mix(in srgb,var(--pine) 24%,var(--line)); border-radius: 26px; box-shadow: 0 28px 90px rgba(4,37,33,.3); }
.action-confirm-dialog h2 { margin: 8px 0 14px; font: 600 clamp(30px,5vw,44px)/1 var(--serif); letter-spacing: -.035em; }
.action-confirm-dialog > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.action-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.action-confirm-actions .button { min-height: 50px; }
.bridge-source-dialog { width: min(780px,100%); max-height: min(820px,calc(100vh - 40px)); overflow: auto; }
.bridge-source-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 24px 0 14px; }
.bridge-source-columns article { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb,var(--mint) 35%,var(--paper-light)); }
.bridge-source-columns span, .bridge-source-columns small { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bridge-source-columns strong { display: block; margin: 7px 0 5px; overflow-wrap: anywhere; font-size: 16px; }
.bridge-source-columns p { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.bridge-diff-table { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; }
.bridge-diff-table > div { display: grid; grid-template-columns: minmax(120px,1.4fr) repeat(2,minmax(70px,.8fr)); align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); }
.bridge-diff-table > div:first-child { border-top: 0; }
.bridge-diff-table span { color: var(--muted); font-size: 11px; }
.bridge-diff-table strong { text-align: center; font-size: 12px; }
.bridge-diff-head { background: var(--paper-deep); }
.bridge-diff-head span, .bridge-diff-head strong { color: var(--ink); font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.bridge-choice-note { margin-top: 14px !important; padding-left: 12px; border-left: 3px solid var(--pine-2); font-size: 11px !important; }
.bridge-source-actions { grid-template-columns: .8fr 1fr 1fr; }
.workspace-merge-dialog { width: min(900px,100%); }
.merge-bulk, .merge-overview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.merge-overview > span { padding: 10px 14px; border-radius: 10px; background: var(--mint); font-size: 13px; }
.merge-start-time { font-weight: 700; color: var(--pine); }
.merge-options { margin: 12px 0; font-size: 12px; }
.merge-options > summary { cursor: pointer; color: var(--pine); padding: 6px 0; }
.merge-history-note { font-size: 12px !important; margin-top: 14px !important; }
.merge-item { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 12px 0; }
.merge-item legend { font-size: 12px; font-weight: 800; padding: 0 6px; }
.merge-change + .merge-change { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.merge-change-choice, .merge-keep-base { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 6px 0; }
.merge-change-choice > span { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.merge-change-choice strong { font-size: 15px; }
.merge-change-choice small { color: var(--muted); font-size: 12px; }
.merge-change-choice .merge-source { color: var(--pine); font-weight: 800; }
.merge-item input { flex-shrink: 0; width: 20px; height: 20px; margin: 3px 0; accent-color: var(--pine); }
.merge-change-details { margin: 6px 0 0 32px; font-size: 12px; overflow-wrap: anywhere; }
.merge-change-details summary { cursor: pointer; padding: 6px 0; color: var(--pine); }
.merge-change-details dl { margin: 0; }
.merge-change-details dl > div { padding: 6px 0; }
.merge-change-details dt { font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.merge-change-details dd { margin: 0; white-space: pre-wrap; max-height: 220px; overflow: auto; }
.merge-before { color: var(--muted); }
.merge-keep-base { font-size: 12px; align-items: center; margin-top: 10px; }
.merge-error { color: var(--coral); font-weight: 700; }
.merge-footer { position: sticky; bottom: -1px; background: var(--paper-light); padding: 16px 0 4px; }
@media (max-width: 600px) {
  .merge-item { padding: 10px; }
  .merge-change-details { margin-left: 0; }
  .merge-footer { position: static; }
}
.button-danger { border-color: #a94a3c; background: #a94a3c; color: #fff; }
.button-danger:hover, .button-danger:focus-visible { border-color: #87382d; background: #87382d; }
.agent-welcome-backdrop { position: fixed; inset: 0; z-index: 1250; display: grid; place-items: center; box-sizing: border-box; max-width: 100vw; padding: clamp(18px,4vw,52px); overflow: auto; background: color-mix(in srgb,#0b2f2b 72%,transparent); backdrop-filter: blur(14px); }
.agent-welcome-dialog { box-sizing: border-box; width: min(690px,100%); min-width: 0; padding: clamp(28px,5vw,58px); border: 1px solid color-mix(in srgb,var(--pine) 22%,var(--line)); border-radius: 34px; outline: none; background: radial-gradient(circle at 100% 0,color-mix(in srgb,var(--mint) 75%,transparent),transparent 34%),var(--paper-light); box-shadow: 0 28px 90px rgba(4,37,33,.28); }
.agent-welcome-mark { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 24px; border-radius: 20px; background: var(--pine); color: var(--lime); font-size: 25px; }
.agent-welcome-dialog h1 { max-width: 610px; margin: 8px 0 16px; font-family: "Times New Roman",Times,serif; font-size: clamp(42px,7vw,66px); font-weight: 500; line-height: .94; letter-spacing: -.045em; }
.agent-welcome-dialog > p:not(.eyebrow) { max-width: 610px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.agent-welcome-continue { display: block; margin: 16px auto 0; }
.educator-welcome-backdrop { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; box-sizing: border-box; max-width: 100vw; padding: clamp(18px,4vw,52px); overflow: auto; background: color-mix(in srgb,#0b2f2b 72%,transparent); backdrop-filter: blur(14px); }
.educator-welcome-dialog { box-sizing: border-box; width: min(720px,100%); min-width: 0; padding: clamp(28px,5vw,58px); border: 1px solid color-mix(in srgb,var(--pine) 22%,var(--line)); border-radius: 34px; outline: none; background: radial-gradient(circle at 100% 0,color-mix(in srgb,var(--mint) 75%,transparent),transparent 34%),var(--paper-light); box-shadow: 0 28px 90px rgba(4,37,33,.28); }
.educator-welcome-mark { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 24px; border-radius: 20px; background: var(--pine); color: var(--paper-light); font-family: "Times New Roman",Times,serif; font-size: 25px; }
.educator-welcome-dialog h1 { max-width: 610px; margin: 8px 0 16px; font-family: "Times New Roman",Times,serif; font-size: clamp(42px,7vw,66px); font-weight: 500; line-height: .94; letter-spacing: -.045em; }
.educator-welcome-dialog > p:not(.eyebrow) { max-width: 610px; margin: 0 0 28px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.educator-guide-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 21px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb,var(--mint) 50%,var(--paper-light)); color: var(--ink); text-decoration: none; transition: transform .18s ease,border-color .18s ease; }
.educator-guide-link:hover, .educator-guide-link:focus-visible { border-color: var(--pine); transform: translateY(-2px); }
.educator-guide-link span { display: grid; gap: 4px; }
.educator-guide-link small { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.educator-guide-link strong { font-size: 17px; }
.educator-guide-link b { font-size: 24px; }
.educator-prompt-card { margin: 16px 0 26px; padding: 18px 20px; border-radius: 18px; background: var(--pine); color: var(--paper-light); }
.educator-prompt-card > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 11px; color: color-mix(in srgb,var(--paper-light) 72%,transparent); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.educator-prompt-card button { padding: 7px 11px; border: 1px solid color-mix(in srgb,var(--paper-light) 35%,transparent); border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.educator-prompt-card p { margin: 0; overflow-wrap: anywhere; color: var(--paper-light); font-size: 14px; line-height: 1.65; }
.educator-welcome-ok { width: 100%; min-height: 56px; }
.formatted-prompt-authoring .studio-field-intro { color: var(--muted); font-size: 11px; line-height: 1.55; }
.studio-code-preview { margin: 10px 0; overflow: hidden; color: #eef5ef; background: #14231f; border-radius: 11px; }
.studio-code-preview figcaption { padding: 7px 11px; color: #b9cec5; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.studio-code-preview pre { margin: 0; padding: 12px; overflow: auto; }
.studio-code-preview code { font: 500 11px/1.6 "SFMono-Regular",Consolas,monospace; white-space: pre; }
.studio-python-authoring { display: grid; gap: 13px; margin: 14px 0; padding: 16px; border: 1px solid color-mix(in srgb,var(--pine) 22%,var(--line)); border-radius: 15px; background: color-mix(in srgb,var(--mint) 30%,var(--paper-light)); }

@media (max-width: 640px) {
  .action-confirm-backdrop { align-items: end; padding: 12px; }
  .action-confirm-dialog { margin-bottom: 74px; padding: 24px 20px; border-radius: 22px; }
  .action-confirm-actions { grid-template-columns: 1fr; }
  .bridge-source-dialog { max-height: calc(100vh - 98px); }
  .bridge-source-columns { grid-template-columns: 1fr; }
  .bridge-diff-table > div { grid-template-columns: minmax(105px,1.3fr) repeat(2,minmax(56px,.65fr)); padding: 9px 10px; }
  .bridge-source-actions { grid-template-columns: 1fr; }
  .agent-handoff-actions { grid-template-columns: 1fr; }
  .agent-welcome-backdrop { align-items: start; padding: 12px; }
  .agent-welcome-dialog { margin: 8px 0 88px; padding: 26px 20px; border-radius: 24px; }
  .agent-welcome-mark { width: 52px; height: 52px; margin-bottom: 18px; border-radius: 16px; font-size: 20px; }
  .agent-welcome-dialog h1 { font-size: 41px; }
  .educator-welcome-backdrop { align-items: start; padding: 12px; }
  .educator-welcome-dialog { margin: 8px 0 88px; padding: 26px 20px; border-radius: 24px; }
  .educator-welcome-mark { width: 52px; height: 52px; margin-bottom: 18px; border-radius: 16px; font-size: 20px; }
  .educator-welcome-dialog h1 { font-size: 41px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
.lesson-publisher-dialog { box-sizing: border-box; width: min(780px, calc(100vw - 28px)); max-height: calc(100dvh - 36px); padding: clamp(20px, 4vw, 36px); border: 1px solid var(--line); border-radius: 24px; color: var(--ink); background: var(--paper-light); box-shadow: 0 24px 90px #0004; }
.lesson-publisher-dialog::backdrop { background: #152f2b99; }
.lesson-publisher-dialog p { line-height: 1.6; }
.lesson-publisher-dialog fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.publisher-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.publisher-heading h2 { margin: 0; font-size: clamp(24px, 4vw, 34px); }
.publisher-heading > button { flex-shrink: 0; }
.publisher-section { padding: 22px 0; border-top: 1px solid var(--line); }
.publisher-section h3 { margin: 0 0 14px; }
.publisher-section label:not(.publisher-file-label) { display: grid; gap: 8px; margin: 14px 0; font-weight: 600; }
.publisher-section input:not([type=checkbox]):not([type=file]), .publisher-section select { box-sizing: border-box; width: 100%; min-width: 0; padding: 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.publisher-section small { display: block; margin-top: 12px; color: var(--muted); line-height: 1.6; }
.publisher-fields { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.publisher-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.publisher-file-label { position: relative; overflow: hidden; cursor: pointer; }
.publisher-file-label input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.publisher-file-label:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.publisher-review { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.publisher-review dl { display: grid; gap: 12px; }
.publisher-review dl > div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; }
.publisher-review dd { margin: 0; overflow-wrap: anywhere; }
.publisher-review dt { color: var(--muted); }
.publisher-review pre { max-height: 280px; padding: 14px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; background: var(--paper-light); }
.publisher-review .publisher-consent { display: flex !important; align-items: start; gap: 12px; font-weight: 400 !important; line-height: 1.6; }
.publisher-consent input { margin-top: 7px; flex-shrink: 0; }
.publisher-error { padding: 14px; border: 1px solid #b34535; border-radius: 10px; color: #8a291d; background: #fff0eb; overflow-wrap: anywhere; }
.publisher-progress, .publisher-success { padding: 18px; background: var(--mint); border-radius: 12px; overflow-wrap: anywhere; }
.publisher-status-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.publisher-history { display: grid; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.lesson-publisher-dialog button:disabled { cursor: wait; opacity: .55; }
.lesson-publisher-dialog summary { cursor: pointer; }
@media (max-width: 540px) { .publisher-fields { grid-template-columns: 1fr; gap: 0; } .publisher-review dl > div { grid-template-columns: 1fr; gap: 4px; } .publisher-actions .button { width: 100%; } }

/* Persistent GitHub save status beside the profile, including narrow phones. */
.global-storage-status { display: flex; align-items: center; gap: 7px; padding: 8px 0; min-height: 44px; min-width: 0; text-align: left; color: inherit; background: transparent; border: 0; cursor: pointer; grid-row: 2; grid-column: 1 / -1; }
.global-storage-status i { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: #aab7b2; box-shadow: 0 0 0 3px #ffffff13; }
.global-storage-status[data-tone="connected"] i { background: #b6df81; }
.global-storage-status[data-tone="pending"] i { background: #ffce73; }
.global-storage-status[data-tone="error"] i { background: #ff927b; }
.sidebar-profile .global-storage-status strong { display: block; font-size: 10px; }
.sidebar-profile .global-storage-status small { display: block; color: #c7dbd0; font-size: 9px; margin-top: 3px; }
.global-storage-status:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 5px; }
.storage-merge-setting { min-width: 0; margin: 22px 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; }
.storage-merge-setting legend { padding: 0 8px; font-weight: 800; }
.storage-merge-setting > label { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.storage-merge-setting > label:has(input:checked) { background: color-mix(in srgb, var(--mint) 30%, transparent); border-color: var(--pine); }
.storage-merge-setting input { flex: 0 0 18px; width: 18px; height: 18px; margin: 3px 0; accent-color: var(--pine); }
.storage-merge-setting small { display: block; color: var(--muted); margin-top: 7px; line-height: 1.6; }
@media (max-width: 860px) {
  .sidebar { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .sidebar-profile { grid-template-columns: minmax(0, 1fr) auto 24px; gap: 12px; min-width: 0; }
  .global-storage-status { grid-column: 2; grid-row: 1; padding: 0; }
  .sidebar-profile .profile-copy { max-width: 110px; }
}
@media (max-width: 420px) {
  .sidebar { padding: 10px; }
  .sidebar-profile { gap: 8px; }
  .sidebar-profile .profile-copy { max-width: 74px; }
  .sidebar-profile .global-storage-status small { font-size: 9px; }
}
@media (max-width: 360px) {
  .sidebar-profile .profile-copy { display: none; }
}

/* Branch groups inside each learning field. */
.map-branch-lane > rect { fill-opacity: .38; stroke-opacity: .18; stroke-width: 1; }
.map-branch-lane > text { font-size: 15px; font-weight: 800; letter-spacing: .015em; text-transform: none; }
.map-subject-lane > text { font-size: 18px; }


.lesson-media { width: 100%; margin: 1.25rem auto; }
.lesson-illustrations { margin: 2rem 0; }
.lesson-illustration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 1.25rem; }
.lesson-illustration-grid .lesson-media { align-self: start; max-width: 860px; margin: 0 auto; }
.lesson-media-content { width: 100%; overflow: hidden; border-radius: 12px; background: var(--paper-light, #fffdf8); }
.lesson-media-content > img, .lesson-media-content > video { display: block; max-width: 100%; height: auto; margin: auto; }
.lesson-media-content[style] > img, .lesson-media-content[style] > video { width: 100%; height: 100%; }
.lesson-media-content > audio { display: block; width: 100%; }
.lesson-media figcaption { padding: .65rem .25rem; color: var(--muted, #68716b); font-size: .9rem; text-align: center; }
.lesson-media-status { padding: 1rem; color: var(--muted, #68716b); overflow-wrap: anywhere; }

.map-subject-lanes .map-branch-heading-toggle { pointer-events: auto; }
.cartesian-endpoint { stroke: var(--pine); stroke-width: 2.5; }
.cartesian-endpoint.open { fill: var(--paper-light); }
.cartesian-endpoint.closed { fill: var(--pine); }
.cartesian-asymptote { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 8 6; }
.map-edge-hit:hover, .map-edge-hit:focus { stroke: var(--pine); stroke-opacity: .18; }

/* Compact settings workspace; other learning pages retain their own scale. */
.settings-shell { display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px; align-items:start; }
.settings-nav { position:sticky; top:24px; display:flex; flex-direction:column; gap:4px; }
.settings-nav button { min-height:42px; padding:10px 12px; text-align:left; font:600 13px/1.4 var(--sans); border:0; border-radius:8px; color:var(--muted); background:transparent; cursor:pointer; }
.settings-nav button[aria-current="page"] { color:var(--pine); background:var(--lime); }
.settings-nav button:hover { color:var(--pine); background:var(--paper-light); }
.settings-nav button:focus-visible { outline:2px solid var(--pine); outline-offset:2px; }
.settings-content, .settings-content > section { min-width:0; }
.settings-content > section:not([hidden]) { display:grid; gap:16px; }
.settings-shell [hidden] { display:none !important; }
.settings-shell .content-card, .settings-shell .settings-control-card { padding:18px; border-radius:12px; margin:0; box-shadow:none; min-width:0; }
.settings-shell h2 { font:700 19px/1.3 var(--sans); margin:0 0 8px; overflow-wrap:anywhere; }
.settings-shell h3 { font:700 16px/1.4 var(--sans); }
.settings-shell p, .settings-shell label, .settings-shell summary { font-size:13px; line-height:1.5; }
.settings-shell small { font-size:12px; line-height:1.4; }
.settings-shell .eyebrow { font-size:10px; margin-bottom:6px; }
.settings-shell .button, .settings-shell .quiet-button { min-height:40px; padding:9px 12px; font-size:12px; border-radius:8px; }
.settings-shell input:not([type="radio"]):not([type="checkbox"]), .settings-shell select { min-height:40px; padding:9px 10px; font-size:13px; }
.settings-shell .settings-controls, .settings-shell .data-grid { grid-template-columns:1fr; gap:16px; margin:0; }
.settings-shell .settings-mode-grid button { padding:12px; }
.settings-shell .settings-mode-grid strong { font:700 15px/1.4 var(--sans); }
.settings-shell .card-heading, .settings-shell .bridge-card-heading { gap:12px; margin-bottom:12px; }
.settings-shell .storage-summary { gap:10px; margin:0; }
.settings-shell .storage-summary article { padding:12px; }
.settings-shell .storage-summary strong { font-size:18px; overflow-wrap:anywhere; }
.settings-shell .bridge-status-grid { gap:10px; }
.settings-shell .bridge-status-grid article { padding:12px; }
.settings-shell .bridge-status-grid strong { font-size:15px; overflow-wrap:anywhere; }
.settings-shell .storage-profile-list article { padding:10px; }
.settings-shell .storage-profile-list .button { width:auto; grid-column:auto; }
.settings-shell .storage-profile-list article { grid-template-columns:32px minmax(0,1fr) auto; gap:8px; }
.settings-shell .storage-profile-avatar { width:32px; height:32px; }
.settings-shell .storage-clear-zone > .button { flex-shrink:0; white-space:nowrap; }
.settings-shell button:disabled { opacity:.45; cursor:not-allowed; filter:grayscale(1); }
.storage-manager-busy { padding:10px 12px; border-radius:8px; background:var(--paper); color:var(--muted); }
@media(max-width:760px) {
 .settings-shell { grid-template-columns:minmax(0,1fr); gap:14px; }
 .settings-nav { position:static; flex-direction:row; overflow-x:auto; padding-bottom:5px; border-bottom:1px solid var(--line); }
 .settings-nav button { flex:0 0 auto; white-space:nowrap; min-height:42px; }
 .settings-shell .content-card, .settings-shell .settings-control-card { padding:14px; }
 .settings-shell .settings-mode-grid { grid-template-columns:1fr; }
 .settings-shell .card-heading, .settings-shell .bridge-card-heading { flex-wrap:wrap; }
 .settings-shell .data-actions, .settings-shell .bridge-actions { flex-wrap:wrap; }
 .settings-shell .storage-profile-list .button { font-size:11px; padding:8px; }
}


/* Experimental formal proof companion. Mathematical verification remains
   visually distinct from ordinary answer grading and tutor review. */
.formal-proof-panel{margin:1rem 0;padding:1rem;border:1px solid var(--line,#d8dde7);border-radius:16px;background:color-mix(in srgb,var(--surface,#fff) 94%,#5665d8 6%)}
.formal-proof-panel>header{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between}.formal-proof-panel h3{margin:.2rem 0 0}.formal-proof-status{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:.35rem .55rem;border-radius:999px;background:rgba(90,100,130,.12);white-space:nowrap}.formal-proof-panel.verified .formal-proof-status{background:rgba(30,150,95,.14)}.formal-proof-panel.refuted .formal-proof-status{background:rgba(190,60,60,.14)}
.formal-proof-contract{margin:.75rem 0}.formal-proof-contract p{margin:.25rem 0}.formal-proof-context,.formal-proof-steps,.formal-proof-obligations,.formal-proof-suggestions{margin:.85rem 0;padding:.75rem;border-radius:12px;background:rgba(255,255,255,.55)}.formal-proof-context ul,.formal-proof-obligations ul,.formal-proof-steps ol{margin:.45rem 0 0;padding-left:1.35rem}.formal-proof-steps li{margin:.4rem 0}.formal-proof-steps li small{display:block;opacity:.72}.formal-proof-steps li p{margin:.2rem 0;font-size:.88rem}
.formal-proof-suggestions{display:flex;gap:.4rem;flex-wrap:wrap}.formal-proof-suggestions>strong{width:100%}.formal-suggestion{border:1px solid var(--line,#d8dde7);background:transparent;border-radius:999px;padding:.4rem .65rem;cursor:pointer}.formal-step-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin-top:.85rem}.formal-step-editor label{display:grid;gap:.25rem}.formal-step-editor input{width:100%}.formal-proof-actions{grid-column:1/-1;display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}.formal-proof-warning{margin:.75rem 0;padding:.65rem .75rem;border-radius:10px;background:rgba(215,145,35,.12)}.formal-proof-certified{display:grid;gap:.25rem;margin:.75rem 0;padding:.65rem .75rem;border-radius:10px;background:rgba(30,150,95,.12)}.formal-proof-certified code{overflow-wrap:anywhere;font-size:.76rem}@media(max-width:720px){.formal-step-editor{grid-template-columns:1fr}.formal-proof-panel>header{flex-direction:column}.formal-proof-status{align-self:flex-start}}

/* Native formal reasoning workspace. Status is text as well as color. */
.proof-workspace { --proof-line:rgba(139,157,195,.22); padding:clamp(1rem,2vw,1.75rem); }
.proof-workspace h3 { font-size:1.15rem; margin:.2rem 0; }
.proof-workspace h4 { margin:.2rem 0 1rem; font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; opacity:.75; }
.proof-theorem { margin:1.2rem 0 1.6rem; padding:1.15rem 1.3rem; border-left:3px solid var(--accent,#7c8dff); background:rgba(120,140,220,.08); border-radius:0 .7rem .7rem 0; }
.proof-theorem>p { margin:.45rem 0 .7rem; font-size:1.15rem; font-weight:600; overflow-wrap:anywhere; }
.proof-domain-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.proof-domain-chips span { border:1px solid var(--proof-line); border-radius:2rem; padding:.15rem .6rem; font-size:.8rem; }
.proof-workspace-columns { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr); gap:1.5rem; align-items:start; }
.proof-reasoning,.proof-context { min-width:0; }
.proof-context { border-left:1px solid var(--proof-line); padding-left:1.4rem; }
.proof-step-list { list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.8rem; }
.proof-reasoning-step { padding:1rem; border:1px solid var(--proof-line); border-radius:.8rem; background:rgba(127,145,190,.035); }
.proof-step-heading { display:flex; align-items:center; gap:.55rem; }
.proof-step-number { display:inline-grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%; background:rgba(133,146,202,.15); font-size:.8rem; }
.proof-step-badge { font-size:.75rem; font-weight:650; }
.proof-step-heading button { margin-left:auto; padding:.25rem .6rem; font-size:.75rem; min-height:32px; }
.proof-step-claim { font-weight:600; font-size:1.05rem; margin:.7rem 0 .4rem; overflow-wrap:anywhere; }
.proof-step-reason,.proof-step-feedback { font-size:.85rem; margin:.35rem 0; }
.proof-step-id { font-size:.7rem; opacity:.65; }
.proof-step-feedback { opacity:.8; }
.proof-reasoning-step.kernel-verified { border-color:#378867; background:rgba(46,145,97,.075); }
.kernel-verified .proof-step-badge { color:#25845d; }
.proof-reasoning-step.proof-blocked { border-color:#bd8b45; }
.proof-empty,.proof-trust-note { font-size:.87rem; line-height:1.6; opacity:.75; }
.proof-workspace .formal-step-editor { display:grid; grid-template-columns:1fr; min-width:0; padding:1rem; margin:1rem 0; border:1px solid var(--proof-line); border-radius:.8rem; }
.proof-workspace .formal-step-editor legend { padding:0 .4rem; font-size:.85rem; font-weight:650; }
.proof-workspace textarea,.proof-workspace select,.proof-workspace input { width:100%; box-sizing:border-box; min-height:42px; padding:.7rem; color:inherit; background:var(--panel,#fff); border:1px solid var(--proof-line); border-radius:.45rem; font:inherit; }
.proof-workspace textarea { resize:vertical; }
.proof-workspace select { font-size:.88rem; }
.proof-workspace .formal-step-editor label { display:grid; gap:.4rem; font-size:.85rem; }
.proof-workspace .formal-step-editor label small { opacity:.65; font-weight:400; }
.proof-facts { list-style:none; padding:0; margin:0 0 1.5rem; display:grid; gap:.7rem; }
.proof-facts li { display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; font-size:.9rem; }
.proof-facts code { font-size:.73rem; opacity:.7; }
.proof-facts small { width:100%; }
.proof-obligation-list { padding:0; list-style:none; }
.proof-obligation-list li { margin:.8rem 0; padding:.7rem; border-radius:.5rem; background:rgba(194,142,59,.065); font-size:.87rem; }
.proof-obligation-list p { margin:.3rem 0; }
.proof-obligation-list small { opacity:.6; }
.proof-edit-notice,.proof-next-obligation { padding:.8rem; background:rgba(194,142,59,.09); border-left:3px solid #bd8b45; border-radius:.3rem; font-size:.88rem; }
.proof-meaning { margin:1rem 0; font-size:.85rem; }
.proof-meaning pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.8rem; }
.proof-trust-note { border-top:1px solid var(--proof-line); padding-top:1rem; font-size:.75rem; }
.proof-certificate code { display:block; overflow-wrap:anywhere; padding:.5rem 0; }
.proof-workspace footer { border-top:1px solid var(--proof-line); margin-top:1rem; padding-top:.8rem; font-size:.78rem; }
.proof-workspace button:focus-visible,.proof-workspace summary:focus-visible,.proof-workspace input:focus-visible,.proof-workspace textarea:focus-visible,.proof-workspace select:focus-visible { outline:2px solid var(--accent,#7c8dff); outline-offset:3px; }
@media(max-width:760px) { .proof-workspace-columns { grid-template-columns:1fr; }.proof-context { border-left:0; padding:1rem 0 0; border-top:1px solid var(--proof-line); }.proof-workspace .formal-proof-actions { flex-wrap:wrap; } }

.proof-workspace { --proof-line:var(--line); background:var(--paper-light); color:var(--ink); }
.proof-theorem { border-left-color:var(--pine); background:rgba(184,217,201,.22); }
.proof-reasoning-step { background:rgba(184,217,201,.06); }
.proof-workspace textarea,.proof-workspace select,.proof-workspace input { background:var(--paper-light); }

/* Revision-bound proof guidance stays in the native learner workspace. */
.proof-tutor-guidance { margin-top: 1.2rem; padding: 1rem; border: 1px solid var(--line, #d6cdbd); border-radius: 14px; background: var(--paper-light, #fffdf8); }
.proof-tutor-guidance blockquote { margin: .75rem 0; padding-left: .9rem; border-left: 3px solid var(--primary, #153f36); font-size: 1.05rem; line-height: 1.65; }
.proof-tutor-guidance small { display: block; margin-top: .7rem; line-height: 1.5; }
.proof-tutor-status, .proof-assessment-note { font-size: .88rem; line-height: 1.6; overflow-wrap: anywhere; }
.proof-assessment-note { padding: .8rem 1rem; border-radius: 10px; background: var(--paper-light, #fffdf8); }

/* Scoped proof construction stays readable on narrow screens. */
.proof-subproof-controls,.proof-fact-picker { margin:.8rem 0; padding:.7rem; border:1px solid var(--proof-line); border-radius:10px; }
.proof-subproof-controls label,.proof-reasoning > label { display:grid; gap:.35rem; margin:.65rem 0; }
.proof-subproof-controls input,.proof-subproof-controls select,.proof-subproof-controls textarea { width:100%; min-width:0; }
.proof-fact-picker button,.proof-reasoning details button { margin:.25rem; max-width:100%; white-space:normal; overflow-wrap:anywhere; text-align:left; }
.proof-method-requirement { font-weight:600; }