/* monaco.css — the 🏁 MONACO card. a code editor on a Monaco-GP card table.
   ported from oz4.2/monaco.css, IC-cleaned: GP-track bar · GP.png car · local assets/.
   the card system owns collapse (.card.collapsed); the casino table lives here. */

.p-monaco {
  --mc-icon-h: 64px;   /* ← FINE-TUNE KNOB: race-car + wrecker + car2 height. (Sum 2026-07-11) bumped back to 64 — "make
                          car bigger till gears line up." head is 46px so it clips the car's transparent top/bottom (fine). */
  background: var(--mc-bg);
  min-width: 300px;    /* (Sum 2026-07-09) a floor tied to the card's zoom/resize — the workbench can't shrink below ~one full tab + the PIT chrome, so at least one tab always reads up top */
  /* no 5px casino-table border — inherit the standard 1px .card line so it matches the rest */
}

/* ── the bar — the Monaco GP race track (darker → better text contrast than the harbor) ── */
.p-monaco .card-head {
  background: url('assets/monaco-topbar.png') center / cover no-repeat;   /* (Sum) keep the ORIGINAL main top bar */
  gap: 6px; padding: 0 8px; position: relative;
  border-bottom: 1px solid var(--mc-border);
  height: 46px; overflow: hidden;   /* fixed at 46 (matches the other cards — no auto-grow). bigger
     icons clip their transparent top/bottom and push RIGHT (they're landscape). the tab-bar yields.
     background-size:cover crops the track image to the bar height automatically (no PNG edit). */
}
/* ── orientation-aware (Sum 2026-07-09): a collapsed VERTICAL rail wears the banner ROTATED 90° — the
   same trick the bot skins use (a -vert.png swaps in on data-orient=vertical). the icon shrinks to fit the rail. ── */
.p-monaco[data-orient="vertical"] .card-head { background-image: url('assets/monaco-topbar-vert.png'); }
.p-monaco.collapsed[data-orient="vertical"] .card-icon-img { height: 28px; }   /* the 64px landscape race-car → rail-sized, centered (overflow clips the wide sides) */
/* no scrim/tint — the GP-track image carries its own contrast; the gold text keeps its own
   drop-shadow. (the bar was reading darker than the source PNG — that gradient was why.) */
.p-monaco .card-head > * { position: relative; z-index: 1; }
.p-monaco .card-head::after { color: var(--mc-amber); z-index: 1; }   /* the ▾ collapse chevron, above the scrim */

.p-monaco .card-icon-img { height: var(--mc-icon-h); width: auto; flex-shrink: 0; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.85)); }
/* (Sum 2026-07-11) COLLAPSED Monaco (a horizontal strip) keeps its BIG landscape car. the generic 46px
   collapsed-icon rule (for square bot icons) squashes a landscape car small — override it so the left car
   stays --mc-icon-h tall, matching car2, when the bar is collapsed. */
.p-monaco.collapsed:not([data-orient="vertical"]) .card-icon-img { width: auto; height: var(--mc-icon-h); min-width: 0; }
.p-monaco .card-title { font-family: 'Courier New', monospace; color: var(--mc-amber); letter-spacing: 3px; text-shadow: 0 1px 4px rgba(0,0,0,0.9); flex-shrink: 0; }

/* flags — green = open file, yellow = copy to sandbox */
.mc-flag { background: none; border: none; padding: 0 2px; height: 28px; width: 28px; min-width: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.mc-flag img { height: 22px; width: auto; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.85)); }
.mc-sandbox { flex-shrink: 0; padding: 0 3px; }
.mc-sandbox img { height: 38px; width: auto; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.85)); }   /* (Sum) constrain the sandbox crate — was unconstrained (715px) and hogging the whole bar */
.mc-flag:hover img { transform: scale(1.08); }
.mc-flag:active img { transform: scale(0.96); }
/* the START LIGHTS — replaces the green flag: red + yellow dark (off), GREEN lit + glowing.
   the metaphor: lights out → go → load a file into the cache + start the race. all CSS. */
.mc-lights {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--mc-screen); border: 1px solid #000; border-radius: 4px;
  padding: 3px 4px; cursor: pointer; flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.07);
}
.mc-light { width: 8px; height: 8px; border-radius: 50%; }
.mc-light.red    { background: var(--mc-light-red); }   /* off */
.mc-light.yellow { background: var(--mc-amber-dim); }   /* off */
.mc-light.green  { background: var(--mc-green-lit); box-shadow: 0 0 6px 1px rgba(43,255,102,0.9); }   /* lit + glow = go */
.mc-lights:hover .mc-light.green { box-shadow: 0 0 11px 2px rgba(43,255,102,1); }  /* rgba glow: structural */
.mc-lights:active { transform: translateY(1px); }

/* the WRECKER — tows a file out of the sandbox. live when files exist; ghost when not. */
/* launch (the red curtain) — a small button on the active tab, after 🏁: render this file in the preview card */
.mc-tab-launch { background: none; border: none; padding: 0 2px; margin: 0; cursor: pointer; display: inline-flex; align-items: center; min-width: 0; }
.mc-tab-launch img { height: 48px; width: 40px; object-fit: cover; object-position: center; display: block; border-radius: 2px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.7)); }   /* Sum: 0.75× tall, cropped to 0.5× wide (was 64px-tall auto-width) */
.mc-tab-launch:hover img { transform: scale(1.18); }
.mc-tab-launch:active { transform: translateY(1px); }

.mc-reveal { background: none; border: none; padding: 0 4px; cursor: pointer; flex-shrink: 0; font-size: 20px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)); }
.mc-reveal:hover { transform: scale(1.12); }
.mc-wrecker { background: none; border: none; padding: 0 2px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; }
.mc-wrecker img { height: var(--mc-icon-h); width: auto; display: block;
  /* push the orange truck → dark red (CRAP: ties it to the collar-red theme). dials: the
     hue-rotate degrees swing orange→red · saturate deepens · brightness darkens. */
  filter: hue-rotate(-28deg) saturate(1.45) brightness(0.9) drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }
.mc-wrecker:hover img { transform: scale(1.08); }
/* ghost = nothing to tow. grayscale + dim, NOT opacity (STYLE: no opacity on UI). */
.mc-wrecker.ghost { cursor: default; }
.mc-wrecker.ghost img { filter: grayscale(1) brightness(0.45); }
/* drag-to-tow: a red wrecker ghost follows the cursor; the targeted tab lights up red */
.mc-wrecker-ghost {
  position: fixed; z-index: 9999; pointer-events: none; height: 54px; width: auto;
  transform: translate(-50%, -50%);
  filter: hue-rotate(-28deg) saturate(1.45) brightness(0.9) drop-shadow(0 3px 6px rgba(0,0,0,0.7));
}
.mc-tab.tow-target, .mc-chip.tow-target { outline: 2px solid var(--bad); outline-offset: -2px; filter: brightness(1.25); }

/* tabs — the racing grid (gp-tabs.png) */
.mc-tab-bar { display: flex; flex-wrap: nowrap; gap: 3px; align-items: center; overflow-x: auto; scrollbar-width: none; min-height: var(--tab-h); flex: 1; min-width: 0; }   /* min-width:0 → the bar always yields room to the actions cluster (the dock toggle never gets pushed off the right edge) */
.mc-tab-bar::-webkit-scrollbar { display: none; }
/* (Sum 2026-07-11) tabs FILL the bar Y (--tab-h) + bigger font (--fs-tab) — were floating small in the middle */
.mc-tab { display: flex; align-items: center; gap: 4px; padding: 0 10px; border-radius: 4px; background: url('assets/gp-tabs.png') center / cover; border: 1px solid rgba(255,255,255,0.25); cursor: pointer; font-family: monospace; font-size: var(--fs-tab); font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.9); white-space: nowrap; height: var(--tab-h); box-shadow: 0 2px 6px rgba(0,0,0,0.6); flex-shrink: 0; transition: filter .12s ease, transform .12s ease, border-color .12s ease; }
.mc-tab .mc-tab-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }   /* one long filename can't hog the whole row — abbrev + ellipsis keeps a tab tab-sized */
.mc-tab:hover { filter: brightness(1.15); }
.mc-tab.active { border-color: var(--mc-amber); filter: brightness(1.1); }
.mc-tab.mode-original { border-left: 3px solid var(--cj-green); }
.mc-tab.mode-sandbox  { border-left: 3px solid var(--mc-gold); }
.mc-tab-dot { color: var(--mc-amber); margin-left: 2px; font-size: var(--fs-ui); }
.mc-tab-ver { font-size: var(--fs-ui); color: var(--mc-amber); display: inline-flex; align-items: center; gap: 3px; cursor: pointer; position: relative; }
.mc-ver-car { height: 15px; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }
.mc-ver-pop { display: none; gap: 3px; margin-left: 2px; }         /* the ◀ ▶ rollback nav — hidden until you click the car */
.mc-tab-ver.open .mc-ver-pop { display: inline-flex; }
/* the OPEN tab's actions, moved out by the STOP button so the tabs stay small */
.mc-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: 4px; }
.mc-tab-nav { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,200,80,0.2); border-radius: 3px; color: var(--mc-amber); font-size: var(--fs-ui); padding: 1px 5px; min-width: 24px; min-height: 24px; cursor: pointer; }
.mc-tab-nav:disabled { color: var(--mc-amber-dim); border-color: transparent; cursor: default; }
/* tab flags — 🟡 save a version · 🏁 move to disk (checkered = emoji) */
.mc-tab-flag { background: none; border: none; padding: 0 1px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 34px; line-height: 1; }   /* 🟡/🏁 pinned (Sum: right size) — no longer follows the race-car knob */
.mc-tab-flag img { height: 48px; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }
.mc-tab-flag:hover { transform: scale(1.14); }

/* the editor — fills the makeCard body (the card's bottom bar resizes it; automaticLayout relayouts) */
.monaco-host { position: absolute; inset: 0; }

/* ── the PIT sub-bar — find · replace · go-to-line · minimap, hidden until the PIT toggle (Sum, 2026-07-09). ── */
.mc-body-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }   /* (Sum 2026-07-13) ONE scroll = Monaco's. The card no longer scrolls over the editor — a double-slider was fighting Monaco's own scroll during a select-drag (the "vibrating"). Boxes are capped + scroll internally; collapse one for more room. */
.mc-body-wrap .mc-editors { position: relative; flex: 1 1 auto; min-height: 150px; }   /* the editor fills the remaining space; Monaco owns the scroll */
.mc-body-wrap .mc-editors .monaco-host { position: absolute; inset: 0; flex: none; }
.mc-diff-host { position: absolute; inset: 0; display: none; }                       /* 🏁 the drag race — shown only on .diff-on */
/* (Sum 2026-07-11) the "lanes match" hint — floats over the drag race when there's nothing different to show */
.mc-diff-hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; max-width: 82%;
  background: rgba(18,20,26,.94); border: 1px solid var(--mc-border); border-radius: 8px; color: var(--mc-amber);
  font-size: var(--fs-ui); font-weight: 600; line-height: 1.35; padding: 9px 15px; text-align: center; pointer-events: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.55); }
.mc-body-wrap.diff-on .monaco-host { display: none; }
.mc-body-wrap.diff-on .mc-diff-host { display: block; }
.mc-pit { flex: 0 0 auto; display: none; gap: 8px; padding: 8px 12px; align-items: center; border-bottom: 1px solid var(--mc-border);
  background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)), url('assets/pitlane.png') center/cover no-repeat; }   /* (Sum 2026-07-09) the new pit-lane backdrop, lightly dimmed (the opaque buttons carry the contrast) */
.mc-pit.open { display: flex; }
/* (Sum 2026-07-09) OPAQUE grey pills — a png icon on a busy track needs a solid seat, like the buttons on the oz/unicorn bar */
/* (Sum 2026-07-11) bigger tools — the pit icons + text almost fill the bar's Y */
/* every pit button gets a SOLID grey seat so it reads as a tile against the busy racetrack photo (Sum 2026-07-13) —
   #26262c blended into the dark asphalt; the on-states were translucent washes that let the photo bleed through */
.mc-pit-btn { background: #3a3a43; border: 1px solid rgba(255,255,255,.34); border-radius: 6px; color: var(--mc-amber); font-size: var(--fs-ui); line-height: 1; padding: 5px 10px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.6); display: inline-flex; align-items: center; }
.mc-pit-btn img { height: 30px; width: auto; display: block; }
.mc-pit-btn:hover { background: #47474f; border-color: rgba(255,255,255,.6); }
.mc-pit-btn.on { background: #3a3a43; border-color: #2bff66; box-shadow: inset 0 0 0 2px rgba(43,255,102,.32), 0 2px 6px rgba(0,0,0,.6); }   /* colored RING over the solid seat, not a see-through tint */
/* ── SQUIGGY'S BAR (Sum 2026-07-11) — the pit toggle creates this bar UNDER the pit. never inline.
   ROW 1 controls: level ▾ (icon only) · scope · granularity toggles (snippets·line·chunk·whole file) · ⚡ acts.
   BELOW: one SECTION per OPEN granularity, each up to 5 options as EDITABLE mini-Monaco boxes + a ＋ to port.
   "modes limit viewers" — bigger sizes unlock up the ladder; whole file is god-only. ── */
.mc-sqbox { flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; padding: 7px 12px;
  border-bottom: 1px solid var(--mc-border); background: rgba(255,65,54,.06); max-height: 46vh; overflow: hidden; }   /* (Sum 2026-07-13) CLIP — nothing bleeds over the editor; sections scroll inside, the grip grows the box */
.mc-sqbox[hidden] { display: none; }
.mc-sq-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.mc-sq-main.wide { flex-direction: row; }   /* (Sum 2026-07-13) chat side-by-side when wide, stacked when narrow — same rule as fix */
.mc-sq-main > .mc-sq-sections { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; }
.mc-sq-chat { flex: 1 1 auto; min-height: 130px; min-width: 0; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 6px; }
.mc-sq-main.wide > .mc-sq-chat { border-top: 0; border-left: 1px solid rgba(255,255,255,.12); padding-top: 0; padding-left: 8px; }
.mc-sq-chat[hidden] { display: none; }
.mc-sq-chat-log { flex: 1 1 auto; min-height: 60px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.mc-sq-chat-msg { max-width: 94%; padding: 7px 9px; border-radius: 8px; font: 500 var(--fs-ui)/1.45 system-ui; white-space: pre-wrap; word-break: break-word; }
.mc-sq-chat-msg.user { align-self: flex-end; background: rgba(94,234,212,.18); border: 1px solid rgba(94,234,212,.35); color: #eafffb; }
.mc-sq-chat-msg.assistant { align-self: flex-start; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #e8e8ea; }
.mc-sq-chat-row { flex: 0 0 auto; display: flex; gap: 6px; }
.mc-sq-chat-in { flex: 1 1 auto; min-width: 0; height: 40px; background: #0e0f14; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; color: #fff; padding: 0 12px; font: 600 var(--fs-ui)/1 system-ui; }
.mc-sq-chat-in:focus { outline: none; border-color: #5eead4; }
.mc-sq-chat-send { flex: 0 0 auto; width: 46px; height: 40px; cursor: pointer; background: #5eead4; border: 0; border-radius: 8px; color: #05201b; font-size: 18px; font-weight: 800; }
.mc-sq-chatbtn.on { background: rgba(94,234,212,.28) !important; border-color: #5eead4 !important; color: #eafffb !important; }
.mc-sq-grip { flex: 0 0 auto; height: 14px; cursor: ns-resize; display: flex; align-items: center; justify-content: center; color: var(--text-dim,#8a8a92); font: 900 14px/1 system-ui; letter-spacing: 3px; border-radius: 5px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); user-select: none; margin-top: 2px; }
.mc-sq-grip:hover { background: rgba(255,255,255,.14); color: #fff; }
.mc-sqbox[data-level="god"] { background: linear-gradient(90deg, rgba(94,234,212,.1), rgba(167,139,250,.1), rgba(240,171,252,.1)); border-bottom-color: rgba(167,139,250,.4); }
.sq-ico { display: block; width: auto; }

/* row 1 — controls */
.mc-sq-ctrls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mc-sq-level { position: relative; flex: 0 0 auto; }
.mc-sq-level-btn { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 8px; cursor: pointer;
  background: #23252f; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; }
.mc-sq-level-btn:hover { border-color: rgba(255,255,255,.45); }
.mc-sq-level-btn .sq-ico { height: 32px; }                         /* (Sum) once chosen — just the icon + the ▾ */
.mc-sqbox[data-level="god"] .mc-sq-level-btn .sq-ico { filter: drop-shadow(0 0 6px rgba(167,139,250,.85)); }
.mc-sq-level-btn .cx { color: var(--text-dim); font-size: var(--fs-ui); }
.mc-sq-lv-menu { display: none; position: fixed; z-index: 100001; flex-direction: column; min-width: 190px; padding: 5px;   /* (Sum) FIXED + JS-positioned → escapes the bar's overflow clip, floats above the editor */
  background: #0e0f14; border: 1px solid #000; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.7); }
.mc-sq-level.open .mc-sq-lv-menu { display: flex; }                /* keep the WORDS in the dropdown */
.mc-sq-lv { display: flex; align-items: center; gap: 10px; text-align: left; background: transparent; border: 0; border-radius: 6px; padding: 6px 10px; cursor: pointer; color: #eee; font: 700 var(--fs-ui)/1 system-ui; white-space: nowrap; }
.mc-sq-lv .sq-ico { height: 34px; }
.mc-sq-lv:hover { background: rgba(255,255,255,.12); }
.mc-sq-lv.on { background: rgba(255,65,54,.18); color: #ffd7d3; }
/* (Sum 2026-07-13) the SHARED ▾ picker contents — Teach voice · Fix aggression, matches Squiggy's level dropdown */
.mc-sq-level-btn .mc-lv-ico { height: 28px; width: auto; flex: 0 0 auto; }
.mc-sq-level-btn .mc-lv-name { color: #fff; font: 800 var(--fs-ui)/1 system-ui; white-space: nowrap; }
.mc-sq-lv .mc-lv-ico { height: 30px; width: auto; flex: 0 0 auto; }
/* scope icons inside the context ▾ dropdown */
.mc-ctxdrop .mc-sq-level-btn { gap: 6px; }
.mc-ctxdrop .mc-sq-lv { gap: 8px; }
.mc-ctxdrop .sc-ico { flex: 0 0 auto; }
.mc-ctxdrop .sc-img { height: 22px; width: auto; }
/* the REFRESH-RATE DIAL — the knob IS a refresh circle that spins with the value + a 0-100 box (Sum 2026-07-11) */
.mc-sq-dial { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.mc-sq-knob { width: 28px; height: 28px; cursor: ns-resize; flex: 0 0 auto; color: var(--mc-amber); display: inline-flex; align-items: center; justify-content: center; }
.mc-sq-knob svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.mc-sq-dialnum { width: 58px; padding: 9px 4px; text-align: center; background: #16161c; color: #eee; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; font: 700 var(--fs-ui)/1 system-ui; }
/* the chat's `↻ auto` on/off — sensitivity is the shared topbar dial; the ↻ spins while it re-drafts */
/* the headless ⚡ squiggy box + the chat-code box glow their icon while they're fetching (Sum 2026-07-13) */
.mc-sq-sect.live > .mc-sq-sect-ico { animation: mc-liveglow 1s ease-in-out infinite; }
@keyframes mc-liveglow { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* (Sum 2026-07-13) the scope PILLS are gone — context is a ▾ dropdown now (mcScopeDrop). the .sc-* icons live on in the dropdown. */
/* the shared HIGHLIGHTER toggle (Squiggy · teach · fix) — 🖊 target just the selection */
.mc-hl-btn { display: inline-flex; align-items: center; justify-content: center; padding: 3px 7px; border-radius: 6px; cursor: pointer; background: #26262c; border: 1px solid rgba(255,255,255,.26); }
.mc-hl-btn .sc-img { height: 21px; width: auto; pointer-events: none; }
.mc-hl-btn:hover { border-color: rgba(255,255,255,.55); }
.mc-hl-btn.on { background: rgba(232,184,75,.24); border-color: var(--mc-amber); box-shadow: inset 0 0 0 1px rgba(232,184,75,.45); }
.mc-hl-btn.dim { opacity: .4; cursor: default; }
.mc-sq-spacer { flex: 1 1 auto; }                                          /* pushes the granularity icons to the right (x+) */
.mc-sq-grans { display: inline-flex; align-items: center; gap: 6px; }
.mc-sq-gran { display: inline-flex; padding: 4px; cursor: pointer; border-radius: 8px; background: #1e2029; border: 1px solid rgba(255,255,255,.16); }
.mc-sq-gran .gran-ico { height: 30px; width: auto; display: block; }
.mc-sq-gran:hover { border-color: rgba(255,255,255,.4); }
.mc-sq-gran.on { background: rgba(43,255,102,.16); border-color: #2bff66; box-shadow: 0 0 0 1px rgba(43,255,102,.4) inset; }   /* ON = green (Sum: consistent — functions + every granularity light GREEN when active) */
.mc-sq-gran.dim { cursor: default; border-color: rgba(255,255,255,.06); }    /* locked — needs a higher mode */
.mc-sq-gran.dim .gran-ico { filter: grayscale(1) brightness(.5); }
.mc-sq-acts { display: inline-flex; align-items: center; gap: 5px; }
.mc-sq-act { padding: 7px 12px; cursor: pointer; border-radius: 6px; background: rgba(232,184,75,.14); border: 1px solid rgba(232,184,75,.5); color: #ffe9b0; font: 700 var(--fs-ui)/1 system-ui; white-space: nowrap; }
.mc-sq-act:hover { background: var(--mc-amber); color: #241a02; border-color: #fff; }

/* the sections — each granularity its own toolbox of editable mini editors */
.mc-sqbox:focus { outline: none; }                                 /* it's focusable for Tab-nav — no focus ring */
.mc-sq-sections { display: flex; flex-direction: column; gap: 8px; }
.mc-sq-sect { display: flex; align-items: flex-start; gap: 10px; }
.mc-sq-sect-ico { flex: 0 0 auto; height: 30px; width: auto; margin-top: 4px; }   /* the granularity's icon labels its row */
/* (Sum 2026-07-13) the monaco section icon doubles as the few/many toggle */
.mc-sq-fmico { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 0; cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); border-radius: 6px; color: var(--text-dim,#aab); }
.mc-sq-fmico:hover { border-color: #5eead4; color: #eafffb; }
.mc-sq-opts { flex: 1 1 auto; display: flex; align-items: stretch; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 3px; min-width: 0; }   /* (Sum 2026-07-13) FILL the card width — was content-sized, which starved the minis */
/* (Sum 2026-07-13) ◀ n/m ▶ VERSION NAV — walk the ring of past ⚡ / 💬 suggestions (mono glyphs → PNG in the Fable icon pass) */
.mc-sq-nav { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; }
.mc-sq-navb { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 7px; cursor: pointer; background: #23262f; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; color: var(--mc-amber, #e8b84b); font: 700 var(--fs-ui)/1 system-ui; }
.mc-sq-navb:hover:not(:disabled) { background: rgba(255,255,255,.14); color: #fff; }
.mc-sq-navb:disabled { opacity: .38; cursor: default; }
.mc-sq-navn { min-width: 2.6em; text-align: center; color: var(--text-dim, #aab); font: 700 var(--fs-ui)/1 system-ui; font-variant-numeric: tabular-nums; }
/* an option — a snippet CHIP (click to add) or a mini-editor box (edit + ＋) */
.mc-sq-opt { flex: 0 0 auto; display: inline-flex; align-items: stretch; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; overflow: hidden; background: #0e0f14; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.mc-sq-opt.sel { border-color: var(--mc-amber); box-shadow: 0 0 0 2px rgba(232,184,75,.4); }   /* keyboard selection */
.mc-sq-opt.chip { padding: 8px 13px; cursor: pointer; color: #ffd7d3; background: rgba(255,65,54,.1); border-color: rgba(255,65,54,.35); font: 700 var(--fs-ui)/1 'Courier New',monospace; white-space: nowrap; }
.mc-sq-opt.chip:hover { background: rgba(255,65,54,.22); }
.mc-sq-opt.chip.sel { background: #ff4136; color: #fff; border-color: #fff; }
.mc-sq-detail { margin-left: 7px; opacity: .62; font-weight: 500; }   /* (Sum 2026-07-13) the signature / kind — the "longer format" the popup shows */
.mc-sq-mini { flex: 0 0 auto; }                                    /* Monaco host — size set inline by JS */
.mc-sq-add { flex: 0 0 auto; display: flex; align-items: center; padding: 0 13px; cursor: pointer; border: 0; border-left: 1px solid rgba(255,255,255,.14);
  background: rgba(43,255,102,.14); color: #8effa8; font-size: 20px; font-weight: 800; }
.mc-sq-add:hover, .mc-sq-add:focus { outline: none; background: rgba(43,255,102,.32); color: #fff; }
.mc-sq-none { color: var(--text-dim); font: 500 var(--fs-ui)/1 'Courier New',monospace; padding-top: 10px; }
.mc-sq-fallback { margin: 0; padding: 8px 10px; color: #cfe; font: 500 var(--fs-ui)/1.4 'Courier New',monospace; white-space: pre; }

/* Squiggy — the leveled-autofill mascot button (off · lint · suggest · LLM) */
.mc-squiggy { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; }
.mc-squiggy svg { display: block; }
.mc-squiggy .sq-ico { height: 30px; width: auto; }   /* (Sum) Squiggy on the toggle — nap (off) reads wide, the awake forms tall */
.mc-squiggy.on { background: #3a3a43; border-color: rgba(255,65,54,.8); box-shadow: inset 0 0 0 2px rgba(255,65,54,.3), 0 2px 6px rgba(0,0,0,.6); }   /* keep the solid seat — red ring marks Squiggy's bar open */
/* (Sum 2026-07-11) PIT is now the TOOLBOX (sandbox·save·save-out·preview live inside) — a SQUARE white board. */
.mc-pit-toggle { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: #f4f2ea; border: 1px solid #cfcabc; border-radius: 6px; color: #17171a; font: 800 var(--fs-ui)/1 'Bebas Neue','Oswald',monospace; letter-spacing: 2px; cursor: pointer; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0,0,0,.55); }
.mc-pit-toggle.on { background: var(--mc-amber, #e8b84b); border-color: #fff; }   /* lit while the toolbox is open */
.mc-pit-sep { flex: 1 1 auto; min-width: 16px; }   /* (Sum 2026-07-11) a flex GAP — code tools hug LEFT, run tools (sandbox·save·save-out·preview) push RIGHT */
/* (Sum 2026-07-14) GARAGES — the pit dock bay. the REAL grey-tile tool button LIVES in its garage (no duplicate palette);
   empty garage = just an arrow (no words). drag a button between garages to re-dock. grey seats so they read like the pit. */
.mc-pit-btn[data-tool] { cursor: grab; }
.mc-pit-btn[data-tool]:active { cursor: grabbing; }
.mc-pit-btn[data-tool].dragging { opacity: .4; }
.mc-garages { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.14); }
.mc-garage { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 46px; min-height: 46px; padding: 4px; border-radius: 9px; background: #2a2a31; border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.5); }   /* a grey SEAT (a touch darker than the pit) so the grey buttons sit proud on it */
.mc-garage.drop { background: #2f4a34; border-color: #2bff66; box-shadow: inset 0 0 0 2px rgba(43,255,102,.5); }
.mc-garage-arrow { min-width: 30px; text-align: center; opacity: .6; font: 800 20px/1 system-ui; color: var(--text-dim); }
/* wing dock containers — a wing takes space only when "docked" (holds a VISIBLE panel); syncWings() toggles it. */
.mc-wing { flex: 0 0 auto; display: flex; flex-direction: column; }
.mc-wing:not(.docked) { display: none; }
.mc-wing-top, .mc-wing-bottom { max-height: 50vh; overflow: hidden; }   /* (Sum 2026-07-14) cap the height so a tall panel can't shove the editor + slider off-screen — the panel scrolls INSIDE instead */
/* the editor mid-row: left side-wing · slider · editor (fills) · slider · right side-wing */
.mc-midrow { flex: 1 1 auto; display: flex; min-height: 0; min-width: 0; }
.mc-midrow > .mc-editors { flex: 1 1 auto; min-width: 0; }
/* a side wing lays its docked BOT beside a thin VERTICAL keys bar; the BOT fills the wing (width set by the slider). */
.mc-wing-side { flex: 0 0 auto; overflow: hidden; width: 440px; min-width: 340px; max-width: 52vw; flex-direction: row; align-items: stretch; }
.mc-wing-side > .mc-fix, .mc-wing-side > .mc-toolbox, .mc-wing-side > .mc-sqbox, .mc-wing-side > .mc-console { order: 1; flex: 1 1 auto; min-width: 0; min-height: 0; max-height: none; overflow: hidden; }   /* (Sum 2026-07-14) the bot FILLS the wing; its chrome stays, its halves scroll INTERNALLY */
.mc-wing > .mc-fix, .mc-wing > .mc-toolbox, .mc-wing > .mc-sqbox, .mc-wing > .mc-console { flex: 1 1 auto; min-height: 0; max-height: none; overflow: hidden; }   /* (Sum 2026-07-14) every docked bot FILLS its wing (top/bottom too) + clips so its own halves scroll — no dead space, no off-screen overflow */
.mc-wing > .mc-console.collapsed { flex: 0 0 auto; }   /* (Sum 2026-07-14) a collapsed console lets GO of the wing — editor + side wings reclaim the space */
/* (Sum 2026-07-14) FIND toggles as a bar ABOVE the file name (was an editor overlay); GOTO lives permanently IN the name bar */
.mc-body-wrap > .mc-find { position: static; box-shadow: 0 6px 16px rgba(0,0,0,.5); z-index: auto; flex: 0 0 auto; }
.mc-namebar-goto { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; }
.mc-goto-lbl { color: var(--text-dim); font: 700 var(--fs-ui)/1 system-ui; white-space: nowrap; }
.mc-goto-in { width: 68px; height: 30px; box-sizing: border-box; background: #0e0f14; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; color: #fff; padding: 0 8px; font: 700 var(--fs-ui)/1 system-ui; }
.mc-goto-in::-webkit-inner-spin-button { opacity: .5; }
.mc-goto-go { width: 34px; height: 30px; cursor: pointer; border-radius: 6px; background: rgba(94,234,212,.14); border: 1px solid rgba(94,234,212,.4); color: #bff5ec; font: 800 var(--fs-ui)/1 system-ui; }
.mc-goto-go:hover { background: rgba(94,234,212,.28); color: #fff; }
/* the CLI keeps a manual stretch — no 50vh cap, no snap — when it's the visible panel in a top/bottom wing (Sum) */
.mc-wing:has(> .mc-console:not([hidden])) { max-height: none; }
/* (Sum 2026-07-14) ƒ · { } · 123 become a THIN VERTICAL BAR that stacks beside whatever else is in the wing */
.mc-wing-side > .mc-keys { order: 2; flex: 0 0 auto; width: auto; max-height: none; min-height: 0; border-bottom: 0; padding: 6px; overflow-y: auto; }
.mc-wing-side > .mc-keys .mc-keys-pal { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
/* inside the bot (side wings): CONVO on top · the slider · work below (talk above, work below) */
.mc-wing-side .mc-tool-right, .mc-wing-side .mc-fix-chat, .mc-wing-side .mc-sq-chat { order: 0; }
.mc-wing-side .mc-split { order: 1; }
.mc-wing-side .mc-teach-win, .mc-wing-side .mc-fix-ed, .mc-wing-side .mc-sq-sections { order: 2; }
/* THE STANDARDIZED SPLIT SLIDER — between the two halves of every bot (Fix code⇄convo · Teach lesson⇄convo · Squiggy suggestions⇄convo) */
.mc-split { flex: 0 0 auto; align-self: stretch; background: rgba(94,234,212,.22); border: 1px solid rgba(94,234,212,.4); border-radius: 5px; color: #bff5ec; display: flex; align-items: center; justify-content: center; font: 900 13px/1 system-ui; letter-spacing: 2px; user-select: none; }
.mc-split[hidden] { display: none; }
.mc-split:hover { background: rgba(94,234,212,.6); color: #fff; }
.mc-tool-split:not(.wide) > .mc-split, .mc-fix:not(.wide) .mc-fix-body > .mc-split, .mc-sq-main:not(.wide) > .mc-split { height: 24px; margin: 2px 4px; cursor: ns-resize; }   /* (Sum 2026-07-14) 24px visual — the palsy rule: a grip you can't miss on a shaky day */
.mc-tool-split.wide > .mc-split, .mc-fix.wide .mc-fix-body > .mc-split, .mc-sq-main.wide > .mc-split { width: 24px; margin: 4px 2px; cursor: ew-resize; }
/* the SLIDERS between a wing and Monaco — shown only while that wing is docked */
.mc-wing-grip { flex: 0 0 auto; background: rgba(94,234,212,.22); border: 1px solid rgba(94,234,212,.4); border-radius: 5px; display: flex; align-items: center; justify-content: center; color: #bff5ec; font: 900 15px/1 system-ui; user-select: none; }
.mc-wing-grip[hidden] { display: none; }
.mc-wing-grip:hover { background: rgba(94,234,212,.6); color: #fff; }
/* (Sum 2026-07-14) 24px visual + the ⇕/⇔ handle glyphs (design-rules: bold contrast, ≥30px-class targets, no bare bars) */
.mc-wing-grip-h { height: 24px; margin: 2px 8px; cursor: ns-resize; }
.mc-wing-grip-h::before { content: '⇕'; }
.mc-wing-grip-v { width: 24px; margin: 0 2px; cursor: ew-resize; align-self: stretch; }
.mc-wing-grip-v::before { content: '⇔'; }
/* ⌨ the grab key — a grabbed tool button visibly LIFTS off the pit (hold G · arrows · release) */
.mc-pit-btn.kbd-grab { transform: translateY(-3px) scale(1.12); box-shadow: 0 6px 14px rgba(0,0,0,.55), 0 0 0 3px var(--focus-ring, #57e0c8); z-index: 3; }
/* (Sum 2026-07-14) THE COLLAPSE HANDLE — the tool's icon leads its bar; click it or the open bar to collapse to JUST the icon */
.mc-collapse { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; cursor: pointer; border-radius: 8px; background: rgba(94,234,212,.12); border: 1px solid rgba(94,234,212,.45); display: inline-flex; align-items: center; justify-content: center; }
.mc-collapse:hover { background: rgba(94,234,212,.3); }
.mc-collapse img, .mc-collapse svg, .mc-collapse .sq-ico { width: 26px; height: 26px; object-fit: contain; }
.mc-collapse .cx, .mc-collapse .mc-lv-name { display: none; }
/* collapsed: body gone, and only the icon shows on the bar → the panel is just a thin icon bar; click anywhere on it to expand */
.mc-fix.collapsed .mc-fix-body { display: none; }
.mc-toolbox.collapsed .mc-tool-split, .mc-toolbox.collapsed > .mc-ctxslot { display: none; }
.mc-sqbox.collapsed .mc-sq-main { display: none; }
.mc-fix.collapsed .mc-fix-scope-row > :not(.mc-collapse), .mc-toolbox.collapsed .mc-tool-ctrls > :not(.mc-collapse), .mc-sqbox.collapsed .mc-sq-ctrls > :not(.mc-collapse) { display: none; }
.mc-sqbox.collapsed .mc-sq-lints-wrap { display: none; }   /* (Sum 2026-07-14) drop the ✓ clean linter row on collapse — just the icon */
.mc-fix.collapsed .mc-fix-scope-row, .mc-toolbox.collapsed .mc-tool-ctrls, .mc-sqbox.collapsed .mc-sq-ctrls { cursor: pointer; }
.mc-wing > .collapsed, .mc-wing > .mc-fix.collapsed, .mc-wing > .mc-toolbox.collapsed, .mc-wing > .mc-sqbox.collapsed, .mc-wing > .mc-console.collapsed { flex: 0 0 auto; min-height: 0; }   /* (Sum 2026-07-14) beat the fill rule so a collapsed bot SHRINKS (bottom/side reclaim space, like the top) */

/* (Sum 2026-07-14) CODE-IN-CHAT FOLD — a ``` block in a Teach/Fix bubble becomes a collapsed BAR; click to open. */
.mc-msg-prose { white-space: pre-wrap; }
.mc-cfold { display: block; margin: 5px 0; }
.mc-cfold-bar { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: 7px; padding: 5px 10px; color: #cdd3da; cursor: pointer; font: inherit; }
.mc-cfold-bar:hover { background: rgba(255,255,255,.1); }
.mc-cfold-ar { color: #57e0c8; font-size: .82em; width: .8em; }
.mc-cfold-lbl { font-size: var(--fs-ui, 14px); opacity: .92; }
.mc-cfold-body { margin: 5px 0 2px; max-height: 340px; overflow: auto; background: #0d0f13; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 8px 11px; }
.mc-cfold-body code { display: block; white-space: pre; font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.5; color: #d8dee6; }

/* (Sum 2026-07-14) ⛶ FULLSCREEN — Debug · Teach · Fix. the panel moves into .mc-fs-layer, which fills the editor below
   the pit; every other body-wrap child (namebar · tabs · find · wings · midrow) is hidden. the pit + the panel's OWN
   top bar stay. exit sends it back to its wing. */
.mc-fs-layer { display: none; }
.mc-body-wrap.mc-fs-on > .mc-fs-layer { display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; flex-direction: column; }
.mc-body-wrap.mc-fs-on > .mc-namebar,
.mc-body-wrap.mc-fs-on > .mc-tabdock,
.mc-body-wrap.mc-fs-on > .mc-find,
.mc-body-wrap.mc-fs-on > .mc-wing,
.mc-body-wrap.mc-fs-on > .mc-wing-grip,
.mc-body-wrap.mc-fs-on > .mc-midrow { display: none !important; }
.mc-fs-layer > .mc-fix, .mc-fs-layer > .mc-toolbox, .mc-fs-layer > .mc-console { flex: 1 1 auto; min-height: 0; max-height: none; overflow: hidden; }
/* the drawn ⛶ button — sits in each panel's top bar, right of the collapse icon */
.mc-fs { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; padding: 0; flex: 0 0 auto; background: transparent; border: 1px solid transparent; border-radius: 6px; color: #8a929e; cursor: pointer; }
.mc-fs:hover { background: rgba(255,255,255,.09); color: #eef1f5; }
.mc-fs.on { color: #57e0c8; background: rgba(87,224,200,.15); border-color: rgba(87,224,200,.42); }   /* lit while maximized */
.mc-fs-i { width: 15px; height: 15px; display: block; }
.mc-fs-i path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mc-fs .mc-fs-in { display: none; }
.mc-fs.on .mc-fs-ex { display: none; }
.mc-fs.on .mc-fs-in { display: block; }
/* (Sum 2026-07-14) side-wing collapse → a THIN ICON STRIP; the wing narrows so the editor gets its width back. click to expand. */
.mc-wing-side > .collapsed { flex: 0 0 auto; width: 46px; min-width: 0; min-height: 0; align-self: flex-start; }
.mc-wing-side:has(> .collapsed) { width: auto; min-width: 0; max-width: none; }
.mc-wing-side > .collapsed .mc-fix-scope-row, .mc-wing-side > .collapsed .mc-tool-ctrls, .mc-wing-side > .collapsed .mc-sq-ctrls { padding: 4px; justify-content: center; }
.mc-pit-toggle:hover { background: #fff; }
/* ── the TAB DOCK — the CURRENT + 2 most-recent ride up top; a 4th file pops this sub-bar holding EVERY open
   file, draggable to reorder / move between the two bars (Sum 2026-07-09). drop a paddock.png in assets/. ── */
.mc-tabdock { flex: 0 0 auto; display: none; gap: 0; padding: 6px 10px; align-items: center; overflow: hidden;
  scrollbar-width: none; border-bottom: 1px solid var(--mc-border);
  background-color: #14161d;
  background-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), url('assets/tabbar.png');   /* (Sum 2026-07-09) the tab-bar track = the overflow (2nd line of tabs) drawer */
  background-size: cover; background-position: center; background-repeat: no-repeat; }
.mc-tabdock::-webkit-scrollbar { display: none; }
.mc-body-wrap.dock-on .mc-tabdock { display: flex; }
/* (Sum 2026-07-10) the overflow chips SHRINK + OVERLAP as the row fills (they don't scroll off): each yields width
   and its name ellipsizes, and they tuck a few px under the previous one — hover/active lifts to the front. */
.mc-chip { display: flex; align-items: center; gap: 4px; padding: 0 10px; border-radius: 4px; cursor: grab;
  background: #23262f; border: 1px solid rgba(255,255,255,.22); color: #fff; position: relative; z-index: 1;
  font: 700 var(--fs-tab)/1 monospace; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.85);
  flex: 0 1 auto; min-width: 34px; height: var(--tab-h); margin-left: -6px; box-shadow: -3px 0 6px rgba(0,0,0,.45); }
.mc-chip:first-child { margin-left: 0; box-shadow: none; }
.mc-chip .mc-tab-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mc-chip:hover { background: #2e323d; z-index: 4; }
.mc-chip.active { border-color: var(--mc-amber); background: #3a3320; z-index: 3; flex-shrink: .3; }

/* ── (Sum 2026-07-10) a COLLAPSED monaco strip keeps the TABS THAT FIT — click one to expand + open it. the rest
   of the pit chrome stays hidden; just the car icon + the tabs. (a vertical side-rail has no room → icon only.) ── */
.p-monaco.collapsed:not([data-orient="vertical"]) .card-ctrls { display: flex !important; }
.p-monaco.collapsed:not([data-orient="vertical"]) .mc-tab-bar { display: flex !important; }
/* (Sum 2026-07-11) collapsed monaco = ICON + TAB ONLY. hide every control in the head except the tabs —
   gear · plus · car2 · sandbox · wrecker · pit · actions all go. click a tab → that file · click the icon/gap → last file. */
.p-monaco.collapsed:not([data-orient="vertical"]) .card-ctrls > *:not(.mc-tab-bar) { display: none !important; }
.mc-chip.mode-original { border-left: 3px solid var(--cj-green); }
.mc-chip.mode-sandbox  { border-left: 3px solid var(--mc-gold); }
.mc-chip.dragging, .mc-tab.dragging { outline: 2px dashed var(--mc-amber); outline-offset: -2px; }   /* drag cue — outline, not opacity (STYLE) */
.mc-tab[draggable="true"], .mc-chip { cursor: grab; }
/* the dock toggle — a small white board like the PIT board, showing the open-file count */
.mc-dock-toggle { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap;
  background: #f4f2ea; border: 1px solid #cfcabc; border-radius: 4px; color: #17171a;
  font: 800 var(--fs-ui)/1 'Bebas Neue','Oswald',monospace; letter-spacing: 1px; padding: 5px 9px; min-width: 30px;
  cursor: pointer; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0,0,0,.5); }
.mc-dock-toggle:hover { background: #fff; }
.mc-dock-toggle.lit { background: var(--mc-amber); border-color: var(--mc-gold); }

/* ── the NAME BAR — editable [ filename . ext ] on the editor page (Sum 2026-07-09). rename here; the ext
   dropdown auto-detects (✨) and overrides. AUTO-HIDES on scroll-down, returns on scroll-up / at the top. ── */
.mc-namebar { flex: 0 0 auto; display: flex; align-items: center; gap: 0; padding: 5px 10px;
  border-bottom: 1px solid var(--mc-border); background: rgba(0,0,0,.28);
  max-height: 44px; overflow: hidden; transition: max-height .18s ease, padding .18s ease, opacity .18s ease; }
.mc-namebar.hide-on-scroll { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-bottom-color: transparent; }   /* (Sum) reading down folds it away → the code gets the height */
.mc-namebar.empty { filter: grayscale(1) brightness(.6); }
.mc-name-in { flex: 0 1 300px; min-width: 70px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
  border-radius: 4px 0 0 4px; color: var(--mc-amber); font: 700 var(--fs-ui)/1 'Courier New', monospace; padding: 6px 9px; }
.mc-name-in:focus { outline: none; border-color: var(--mc-amber); background: rgba(255,255,255,.11); }
.mc-name-dot { color: #888; background: rgba(255,255,255,.06); border-top: 1px solid rgba(255,255,255,.15);
  border-bottom: 1px solid rgba(255,255,255,.15); font: 700 var(--fs-ui)/1 monospace; padding: 7px 2px; }
.mc-ext-sel { flex: 0 0 auto; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-left: 0;
  border-radius: 0 4px 4px 0; color: var(--mc-amber); font: 700 var(--fs-ui)/1 monospace; padding: 6px 6px; cursor: pointer; }
.mc-ext-sel:focus { outline: none; border-color: var(--mc-amber); }
.mc-ext-sel option { background: #16161c; color: #eee; }

/* the wrecker's inline "are you sure? save first?" (window.confirm is swallowed in the webview) */
.mc-tow-confirm { position: fixed; z-index: 10000; display: flex; flex-direction: column; min-width: 190px;
  background: #14141a; border: 1px solid #000; border-radius: 8px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.75); }
.mc-tow-q { padding: 11px 14px; color: #eee; font: 600 var(--fs-ui)/1.35 system-ui; background: rgba(255,80,80,.15); border-bottom: 1px solid rgba(255,255,255,.08); }
.mc-tow-q b { color: #fff; }
.mc-tow-btn { text-align: left; background: transparent; border: 0; color: #fff; font: 700 var(--fs-ui)/1 system-ui; padding: 11px 14px; cursor: pointer; }
.mc-tow-btn + .mc-tow-btn { border-top: 1px solid rgba(255,255,255,.06); }
.mc-tow-btn:hover { background: rgba(255,255,255,.12); }
.mc-tow-btn.save { color: var(--mc-green-lit, #2bff66); }
.mc-tow-btn.no { color: #9a9a9a; }

.p-monaco .card-bottom { height: 30px; background-position: center 60%; }   /* the monaco-slider texture · ≥30px palsy minimum */

/* ── CLEAN SKINS (clinical · corporate) — swap the playful chrome for plain toolbar glyphs. oz · unicorn ·
   ****** keep the fun icons. dark-slate glyphs; corporate inverts them to light. sandbox crate stays. (Sum 2026-07-09) ── */
[data-skin="clinical"] .p-monaco .card-icon-img,
[data-skin="corporate"] .p-monaco .card-icon-img { content: url('assets/clean-folder.png'); height: 28px; filter: none; }   /* 🏎 race car → 📂 open */
[data-skin="clinical"] .p-monaco .mc-wrecker img,
[data-skin="corporate"] .p-monaco .mc-wrecker img { content: url('assets/clean-trash.png'); height: 26px; filter: none; }   /* 🚛 wrecker → 🗑 trash */
[data-skin="clinical"] .p-monaco .mc-tab-flag[data-mc="version"] img,
[data-skin="corporate"] .p-monaco .mc-tab-flag[data-mc="version"] img { content: url('assets/clean-flag.png'); height: 24px; }   /* 🟡 save-version → flag */
[data-skin="clinical"] .p-monaco .mc-tab-disk,
[data-skin="corporate"] .p-monaco .mc-tab-disk { font-size: 0; }                                                             /* 🏁 emoji off */
[data-skin="clinical"] .p-monaco .mc-tab-disk::before,
[data-skin="corporate"] .p-monaco .mc-tab-disk::before { content: ''; display: inline-block; width: 22px; height: 22px; background: url('assets/clean-disk.png') center / contain no-repeat; }   /* → 💾 (background-image so the intrinsic 538px can't blow up the bar) */
/* the sandbox crate → a flat silhouette to match the clean glyphs: dark on clinical, white on corporate (Sum 2026-07-09) */
[data-skin="clinical"] .p-monaco .mc-sandbox img { filter: brightness(0) grayscale(1); }
[data-skin="corporate"] .p-monaco .mc-sandbox img { filter: brightness(0) invert(1); }
/* corporate is dark — flip the dark-slate glyphs to light */
[data-skin="corporate"] .p-monaco .card-icon-img,
[data-skin="corporate"] .p-monaco .mc-wrecker img,
[data-skin="corporate"] .p-monaco .mc-tab-flag[data-mc="version"] img,
[data-skin="corporate"] .p-monaco .mc-tab-disk::before { filter: invert(1) brightness(1.5); }

/* ── simplified TAB on the clean skins — flatten the racing grid, hide the GP car, plain text (Sum 2026-07-09) ── */
[data-skin="clinical"] .p-monaco .mc-tab,
[data-skin="corporate"] .p-monaco .mc-tab { background: var(--surface-2); border-color: var(--line); box-shadow: none; }
[data-skin="clinical"] .p-monaco .mc-tab.active,
[data-skin="corporate"] .p-monaco .mc-tab.active { border-color: var(--accent); filter: none; }
[data-skin="clinical"] .p-monaco .mc-tab-name,
[data-skin="corporate"] .p-monaco .mc-tab-name { color: var(--text); text-shadow: none; }
[data-skin="clinical"] .p-monaco .mc-tab-ver,
[data-skin="corporate"] .p-monaco .mc-tab-ver { color: var(--text-dim); }
[data-skin="clinical"] .p-monaco .mc-ver-car,
[data-skin="corporate"] .p-monaco .mc-ver-car { display: none; }   /* hide the GP race-car version marker */
[data-skin="clinical"] .p-monaco .mc-tab-nav,
[data-skin="corporate"] .p-monaco .mc-tab-nav { background: var(--surface); border-color: var(--line); color: var(--text); }
/* the launch button (red curtain) → a plain preview eye */
[data-skin="clinical"] .p-monaco .mc-tab-launch img,
[data-skin="corporate"] .p-monaco .mc-tab-launch img { content: url('assets/clean-eye.png'); height: 22px; width: auto; object-fit: contain; border-radius: 0; filter: none; }
[data-skin="corporate"] .p-monaco .mc-tab-launch img { filter: invert(1) brightness(1.5); }

/* ── ⚙ the ⌘ ACTIONS GEAR + ＋ PLUS (Sum 2026-07-10) — the no-typo palette on the head ── */
.p-monaco .mc-gear-wrap { position: relative; flex-shrink: 0; display: inline-flex; }
.p-monaco .mc-gear {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px; cursor: pointer;
  background: none; border: 0; line-height: 1; flex-shrink: 0;
}
.p-monaco .mc-gear:hover { filter: brightness(1.25); }
.p-monaco .mc-gear .oz-gear-ico { width: var(--head-gear, 22px); height: var(--head-gear, 22px); }
.p-monaco .mc-plus {
  flex-shrink: 0; width: var(--head-btn, 34px); height: 30px; padding: 0; cursor: pointer;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.25); border-radius: 6px;
  color: #fff; font-size: 20px; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.p-monaco .mc-plus:hover { border-color: #fff; background: rgba(0,0,0,.55); }

/* (Sum 2026-07-11) the old gear dropdown (engine-picker · yocal · actions · language) is GONE —
   the gear is now a plain button that opens the stripped settings modal (keys · HIL · yocal · model). */

/* ══════════════════════════════════════════════════════════════════════════
   FIND · REPLACE — the readable rebuild (Sum 2026-07-11). Overlays the top of the
   editor. EVERY bit of text here rides --fs-ui (the pharma floor) — no 12px chrome.
   Controls are --hit (44px) tall so gears line up and fingers land. ══════════════ */
.mc-find {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; flex-direction: column;
  background: #15161d; border-bottom: 1px solid var(--mc-border);
  box-shadow: 0 12px 30px rgba(0,0,0,.6);
}
.mc-find[hidden] { display: none; }

/* the two find/replace rows */
.mc-find-rows { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; }
.mc-find-row { display: flex; align-items: center; gap: 8px; }

/* the SCOPE dropdown — a compact picker in FRONT of the find box (Sum: "one less line taking up
   space"). the icons ARE tiny versions of the app's own tabs, so you recognise them by shape. */
.mc-scope-dd { position: relative; flex: 0 0 auto; }
.mc-scope-spacer { flex: 0 0 60px; }                                    /* aligns the replace box under the find box */
.mc-scope-cur {
  display: flex; align-items: center; gap: 4px; height: var(--hit); width: 60px; padding: 0 8px;
  background: #23252f; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; cursor: pointer;
}
.mc-scope-cur:hover { border-color: rgba(255,255,255,.4); background: #2b2e3a; }
.mc-scope-caret { color: var(--text-dim); font-size: var(--fs-ui); line-height: 1; }
.mc-scope-menu {
  display: none; position: absolute; top: calc(var(--hit) + 4px); left: 0; z-index: 60;
  flex-direction: column; min-width: 190px; padding: 5px;
  background: #0e0f14; border: 1px solid #000; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.7);
}
.mc-scope-menu.open { display: flex; }
.mc-scope-opt {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text); font-size: var(--fs-ui); font-weight: 700; cursor: pointer; text-align: left;
}
.mc-scope-opt:hover { background: rgba(255,255,255,.12); }
.mc-scope-opt.on { background: rgba(232,184,75,.16); color: var(--mc-amber); }
.sc-lbl { white-space: nowrap; }

/* ── the icons: the app's OWN tab language, shrunk (Sum 2026-07-11) ── */
/* THIS TAB = the red/white racing-curb border (the active file tab) */
.sc-ico { flex-shrink: 0; display: inline-block; }
.sc-tab { width: 30px; height: 20px; border-radius: 4px; background: #1c1e27; border: 3px solid transparent;
  border-image: repeating-linear-gradient(45deg, #e23b3b 0 4px, #fff 4px 8px) 3; box-sizing: border-box; }
/* ALL TABS = the gray body + yellow left-accent overflow chips, three, overlapping */
.sc-tabs { position: relative; width: 34px; height: 22px; }
.sc-tabs i { position: absolute; width: 15px; height: 13px; top: 5px; border-radius: 2px 3px 3px 2px;
  background: #3a3d47; border: 1px solid rgba(0,0,0,.6); border-left: 3px solid var(--mc-gold, #e8b84b); box-sizing: border-box; }
.sc-tabs i:nth-child(1) { left: 0;  top: 7px; }
.sc-tabs i:nth-child(2) { left: 7px; top: 3px; }
.sc-tabs i:nth-child(3) { left: 14px; top: 0; }
/* SANDBOX = the png we already made, scaled WAY down */
.sc-img { width: 26px; height: 26px; object-fit: contain; }
.mc-find-q, .mc-find-r {
  flex: 1 1 auto; min-width: 0; height: var(--hit);
  background: #0e0f14; border: 1px solid rgba(255,255,255,.16); border-radius: 6px;
  color: #fff; font-size: var(--fs-ui); font-weight: 600; padding: 0 12px; font-family: var(--font);
}
.mc-find-q:focus, .mc-find-r:focus { outline: none; border-color: var(--mc-amber); }
.mc-find-count { flex: 0 0 auto; min-width: 104px; text-align: right; color: var(--text-dim); font-size: var(--fs-ui); font-weight: 700; }
.mc-find-flag {
  flex: 0 0 auto; min-width: var(--hit); height: var(--hit); padding: 0 10px;
  background: #23252f; border: 1px solid rgba(255,255,255,.16); border-radius: 6px;
  color: var(--text-dim); font-size: var(--fs-ui); font-weight: 800; cursor: pointer;
}
.mc-find-flag:hover { color: #fff; border-color: rgba(255,255,255,.35); }
.mc-find-flag.on { background: rgba(43,255,102,.16); border-color: #2bff66; color: #eafff0; }
.mc-find-step {
  flex: 0 0 auto; width: var(--hit); height: var(--hit);
  background: #23252f; border: 1px solid rgba(255,255,255,.16); border-radius: 6px;
  color: var(--mc-amber); font-size: var(--fs-ui); font-weight: 800; line-height: 1; cursor: pointer;
}
.mc-find-step:hover { background: #2e313c; }
.mc-find-go {
  flex: 0 0 auto; height: var(--hit); padding: 0 16px;
  background: #2b2e3a; border: 1px solid rgba(255,255,255,.2); border-radius: 6px;
  color: #fff; font-size: var(--fs-ui); font-weight: 800; white-space: nowrap; cursor: pointer;
}
.mc-find-go:hover { background: var(--mc-amber); color: #17171a; border-color: #fff; }
/* the racing PNG action icons (Sum 2026-07-11) — swap-a-tire · the tire stack · the start lights */
.mc-find-ico { padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; }
.mc-find-ico img { height: 30px; width: auto; display: block; }
.mc-find-cursors img { height: 34px; }   /* (Sum 2026-07-11) rotated 90° → a VERTICAL column of red dots = stacked carets; taller reads better */

/* the highlighted matches, in the editor — inline decorations (amber all · green the current one) */
.mc-find-hit { background: rgba(232,184,75,.30); border-radius: 2px; }
.mc-find-hit.cur { background: rgba(43,255,102,.50); }

/* ── 🔧 fix / 🎓 teach SCOPE dropdown (Sum 2026-07-11) — CRAP · Repetition: the SAME dark menu + F1 checker strip
   as the race-car templates, and the SAME scope icons as find. this section · this tab · all tabs · whole app. ── */
.mc-fix-menu { position: fixed; z-index: 100002; display: none; flex-direction: column; min-width: 250px;
  background: #0e0e10; border: 1px solid #000; border-radius: 6px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.7); }
.mc-fix-menu::before { content: ''; display: block; height: 7px;                 /* the same checker strip → learned once */
  background-image: linear-gradient(45deg,#fff 25%,#000 25%,#000 50%,#fff 50%,#fff 75%,#000 75%,#000 100%); background-size: 14px 14px; }
.mc-fix-menu.open { display: flex; }
.mc-fix-head { color: #eee; font: 800 var(--fs-tab,16px)/1 'Bebas Neue','Oswald',system-ui; letter-spacing: .12em; text-transform: uppercase; padding: 11px 14px 9px; border-bottom: 1px solid rgba(255,255,255,.1); }
/* ── TEACH / FIX TOOLBOXES (Sum 2026-07-11) — MIRROR Squiggy's bar: a stacked panel under the pit with the same
      level ▾ · scope · four PNG level buttons, then one collapsible OUTPUT box per level + a free "ask anything" row.
      The controls reuse Squiggy's classes (.mc-sq-level / .mc-sq-scope / .mc-sq-gran) so they look identical. ── */
.mc-toolbox { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--mc-border); max-height: 85vh; overflow-y: auto; }
.mc-toolbox[hidden] { display: none; }
.mc-toolbox[data-kind="teach"] { background: rgba(94,234,212,.08); }
.mc-tool-ctrls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* (Sum 2026-07-13) THE CONVO — a scrolling chat log (was a single overwriting textarea that nuked every turn).
   every turn is a bubble; scroll back through the whole lesson. ◀▶ jumps + flashes an answer; 🧹 clears (on purpose). */
.mc-tool-log { flex: 1 1 auto; min-height: 0; max-height: 62vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px; }   /* (Sum 2026-07-14) the log shrinks + scrolls FIRST so the input stays visible on shrink */
.mc-tool-msg { max-width: 96%; padding: 9px 11px; border-radius: 9px; font: 500 var(--fs-ui)/1.5 system-ui; white-space: pre-wrap; word-break: break-word; }
.mc-tool-msg.user { align-self: flex-end; background: rgba(94,234,212,.16); border: 1px solid rgba(94,234,212,.42); color: #eafffb; }
.mc-tool-msg.assistant { align-self: flex-start; background: rgba(0,0,0,.28); border: 1px solid rgba(94,234,212,.28); color: #e9f6f3; }
.mc-tool-msg.sys { align-self: center; max-width: 100%; text-align: center; background: transparent; border: none; color: var(--text-dim); opacity: .75; padding: 2px 8px; }
.mc-tool-msg.flash { animation: mcToolFlash .9s ease; }
@keyframes mcToolFlash { 0%, 100% { box-shadow: none } 30% { box-shadow: 0 0 0 2px rgba(94,234,212,.75) } }
/* one collapsible OUTPUT box per level (and one for the free query, data-lv="_q") */
.mc-tool-sections { display: flex; flex-direction: column; gap: 8px; }
.mc-tool-sect { display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12); }
.mc-toolbox[data-kind="teach"] .mc-tool-sect { border-color: rgba(94,234,212,.32); }
.mc-tool-sect-head { display: flex; align-items: center; gap: 8px; }
.mc-tool-sect-ico { height: 28px; width: auto; flex: 0 0 auto; }
.mc-tool-sect-name { color: #fff; font: 800 var(--fs-ui)/1 system-ui; white-space: nowrap; }
.mc-tool-status { color: var(--text-dim); font: 600 var(--fs-ui)/1 system-ui; white-space: nowrap; }
.mc-tool-out { width: 100%; min-height: 120px; max-height: 82vh; resize: none; box-sizing: border-box; padding: 8px 10px; border-radius: 6px;
  background: #0e0f14; color: #e8e8ea; border: 1px solid rgba(255,255,255,.14); font: 500 var(--fs-ui)/1.45 ui-monospace,'SF Mono','Courier New',monospace; }
.mc-tool-out:focus { outline: none; border-color: rgba(255,255,255,.4); }
/* (Sum 2026-07-12) teach is a full lesson (code walk-through + the subject), so it opens BIG by default — drag the
   bottom-right grip to resize. It's prose, not code. */
.mc-toolbox[data-kind="teach"] .mc-tool-out { font-family: system-ui, sans-serif; height: 420px; min-height: 220px; line-height: 1.5; }
.mc-tool-refresh { flex: 0 0 auto; width: 34px; height: 34px; cursor: pointer; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #ddd; font: 700 var(--fs-ui)/1 system-ui; }
.mc-tool-refresh:hover { background: rgba(255,255,255,.2); color: #fff; }
/* (Sum 2026-07-13) teach VOICE buttons — NO dropdown, pick straight from these. big hit target, icon + label, the active voice lit */
/* the VISIBLE resize slider under each lesson box — drag up/down (the native corner grip was too hard to find) */
.mc-tool-grip { flex: 0 0 auto; height: 16px; margin-top: 2px; cursor: ns-resize; display: flex; align-items: center; justify-content: center; color: var(--text-dim,#8a8a92); font: 900 15px/1 system-ui; letter-spacing: 3px; border-radius: 5px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); user-select: none; }
.mc-tool-grip:hover { background: rgba(255,255,255,.14); color: #fff; }
/* the ask-a-question row — one input, answered in the picked voice, same thread */
.mc-tool-query { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }   /* (Sum 2026-07-14) the ask-input holds its space — stays visible as the convo shrinks */
.mc-tool-right > .mc-ctxslot { flex: 0 0 auto; }
.mc-tool-qin { flex: 1 1 auto; height: 40px; box-sizing: border-box; padding: 0 12px; border-radius: 6px; background: #0e0f14; color: #eee; border: 1px solid rgba(255,255,255,.18); font: 600 var(--fs-ui)/1 system-ui; }
.mc-tool-qin:focus { outline: none; border-color: rgba(255,255,255,.5); }
.mc-tool-qsend { flex: 0 0 auto; width: 44px; height: 40px; cursor: pointer; border-radius: 6px; background: var(--mc-amber); border: 1px solid #fff; color: #241a02; font: 800 var(--fs-ui)/1 system-ui; }
.mc-tool-qsend:hover { filter: brightness(1.1); }
.mc-toolbox[data-kind="teach"] .mc-tool-qsend { background: #5eead4; color: #05201b; }
/* teach's two 0z-only escalations — practice (Learn) · ask the full tutor bot (strip in standalone) */
.mc-tool-side { flex: 0 0 auto; height: 40px; padding: 0 13px; cursor: pointer; border-radius: 6px; background: rgba(94,234,212,.12); border: 1px solid rgba(94,234,212,.4); color: #bff5ec; font: 700 var(--fs-ui)/1 system-ui; white-space: nowrap; }
.mc-tool-side:hover { background: rgba(94,234,212,.26); color: #fff; }
/* (Sum 2026-07-13) make-slides / make-practice now ride in the top instrument row — size them to the row (34px) */
.mc-tool-ctrls .mc-tool-side { height: 34px; padding: 0 11px; }
/* (Sum 2026-07-13) Teach's SPLIT — its OWN blank editor (left) beside the lesson + ask (right), like Fix. wide → row · narrow → stacked */
.mc-tool-split { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }   /* fills the toolbox body under the chrome */
.mc-tool-split.wide { flex-direction: row; align-items: stretch; }
.mc-tool-split.wide .mc-teach-win, .mc-tool-split.wide .mc-tool-right { flex: 1 1 0; min-height: 200px; }
/* (Sum 2026-07-14) side wings (stacked): the two halves SHARE the body, each SCROLLS internally; the split slider re-balances + grows the lesson */
.mc-tool-split:not(.wide) .mc-tool-right, .mc-tool-split:not(.wide) .mc-teach-win { flex: 1 1 0; min-height: 90px; overflow: hidden; }
.mc-tw-pane { min-height: 0; }
.mc-tw-panes { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.mc-tool-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mc-tool-right .mc-tool-log { flex: 1 1 auto; }
/* (Sum 2026-07-13) Teach's SELF-CONTAINED window — slides + practice tabs, built from the conversation, rendered right here (no tiptap / no sandbox) */
.mc-teach-win { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; border: 1px solid rgba(94,234,212,.35); border-radius: 8px; background: rgba(0,0,0,.35); overflow: hidden; min-height: 240px; }
.mc-tw-head { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(94,234,212,.08); }
.mc-tw-tabs { display: inline-flex; gap: 4px; }
.mc-tw-tab { cursor: pointer; height: 34px; padding: 0 12px; border-radius: 7px 7px 0 0; background: transparent; border: 1px solid transparent; color: #cfcfd6; font: 800 var(--fs-ui)/1 system-ui; }
.mc-tw-tab:hover { color: #fff; }
.mc-tw-tab.on { background: rgba(94,234,212,.2); border-color: #5eead4; color: #eafffb; }
.mc-tw-status { color: var(--text-dim); font: 600 var(--fs-ui)/1 system-ui; white-space: nowrap; }
.mc-tw-open, .mc-tw-close { flex: 0 0 auto; cursor: pointer; height: 32px; padding: 0 10px; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); color: #ddd; font: 800 var(--fs-ui)/1 system-ui; }
.mc-tw-open { background: rgba(43,255,102,.14); border-color: rgba(43,255,102,.5); color: #8effa8; }
.mc-tw-open:hover { background: rgba(43,255,102,.32); color: #fff; }
.mc-tw-close:hover { background: rgba(255,255,255,.18); color: #fff; }
.mc-tw-panes { flex: 1 1 auto; min-height: 200px; display: flex; }
.mc-tw-pane { flex: 1 1 auto; width: 100%; border: 0; min-height: 200px; }
.mc-tw-pane[hidden] { display: none; }
.mc-tw-slides, .mc-tw-scratch, .mc-tw-practice { background: #0e0f14; }   /* scratch + practice are Monaco hosts now (syntax-highlighted, editable); slides is the iframe */

/* ── THE STREAM PANEL (Sum 2026-07-11) — the LLM answer lands HERE, editable, with a follow-up line ── */
.mc-stream { flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--mc-border); background: rgba(94,234,212,.06); }
.mc-stream[hidden] { display: none; }
.mc-stream-head { display: flex; align-items: center; gap: 10px; }
.mc-stream-who { flex: 1 1 auto; color: var(--mc-amber); font: 800 var(--fs-ui)/1 system-ui; }
.mc-stream-status { flex: 0 0 auto; color: var(--text-dim); font-size: var(--fs-ui); }
.mc-stream-x { flex: 0 0 auto; background: transparent; border: 0; color: var(--text-dim); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.mc-stream-x:hover { color: #fff; }
.mc-stream-body { min-height: 90px; flex: 1 1 auto; resize: none; background: #0e0f14; color: #dfeee9; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; padding: 12px 14px; font: 500 var(--fs-ui)/1.55 'Courier New',monospace; white-space: pre-wrap; }
/* (Sum 2026-07-11) the stream + editor are a SPLIT — the grip slides it: more editor ↑ / more bot ↓ */
.mc-stream { flex: 1 1 auto; min-height: 120px; }
.mc-body-wrap:has(.mc-stream:not([hidden])) .mc-editors { flex: 0 0 auto; height: var(--mc-ed-h, 260px); }
.mc-stream-grip { flex: 0 0 auto; height: 12px; cursor: ns-resize; border-radius: 3px; margin-top: 2px;
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,255,255,.28) 7px 12px); }
.mc-stream-grip:hover { background: repeating-linear-gradient(90deg, transparent 0 7px, var(--mc-amber) 7px 12px); }
.mc-stream-body:focus { outline: none; border-color: var(--mc-amber); }
.mc-stream-foot { display: flex; align-items: center; gap: 8px; }
.mc-stream-add { flex: 0 0 auto; height: 38px; padding: 0 14px; background: rgba(43,255,102,.16); border: 1px solid #2bff66; border-radius: 6px; color: #8effa8; font: 800 var(--fs-ui)/1 system-ui; cursor: pointer; }
.mc-stream-add:hover { background: rgba(43,255,102,.32); color: #fff; }
.mc-stream-in { flex: 1 1 auto; min-width: 0; height: 38px; background: #0e0f14; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; color: #fff; padding: 0 12px; font: 600 var(--fs-ui)/1 system-ui; }
.mc-stream-in:focus { outline: none; border-color: var(--mc-amber); }
.mc-stream-send { flex: 0 0 auto; width: 46px; height: 38px; background: var(--mc-amber); border: 0; border-radius: 6px; color: #241a02; font-size: 18px; font-weight: 800; cursor: pointer; }
.mc-stream-send:hover { filter: brightness(1.1); }

/* the SCOPE row (reused from find) — pick one */
.mc-fix-scope { display: flex; flex-direction: column; padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,.16); }
.mc-fix-sc { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 6px 14px; border: 0; background: transparent; color: #eee; font-size: var(--fs-ui); font-weight: 700; cursor: pointer; text-align: left; }
.mc-fix-sc span { flex: 1; white-space: nowrap; }
.mc-fix-sc em { font-style: normal; font-size: var(--fs-ui); color: #d07a9a; }
.mc-fix-sc:hover { background: rgba(255,255,255,.12); }
.mc-fix-sc.on { background: rgba(232,184,75,.16); color: var(--mc-amber); }   /* the chosen scope */
.mc-fix-sc.dim { color: #7d7d7d; cursor: default; }
.mc-fix-sc.dim .sc-ico { filter: grayscale(1) brightness(.6); }
/* the LEVEL row — voices (teach) / aggression (fix); click one to FIRE at the chosen scope */
.mc-fix-levels { display: flex; flex-direction: column; padding: 4px 0 6px; }
.mc-fix-lvl-tag { color: #8a8a8a; font-size: var(--fs-ui); text-transform: uppercase; letter-spacing: .12em; padding: 8px 14px 4px; }
.mc-fix-lvl { display: block; text-align: left; background: transparent; border: 0; color: #eee; cursor: pointer; padding: 10px 14px; font-size: var(--fs-ui); font-weight: 700; white-space: nowrap; }
.mc-fix-lvl:hover { background: rgba(255,65,54,.18); color: #ffd7d3; }

/* Squiggy REBUILT #2 (Sum 2026-07-12) — suggestions in the BOX above, NEVER inline. Powered by Monaco's real
   linter (getModelMarkers) + suggestor (keywords · doc words · JS/TS worker). Levels: off · thin (lint) · gym. */
.mc-sqbox .mc-sq-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 7px; }
.mc-sq-levels { display: inline-flex; gap: 4px; }
.mc-sq-lvchip { height: 38px; padding: 0 12px; cursor: pointer; border-radius: 7px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: #ddd; font: 800 var(--fs-ui)/1 system-ui, sans-serif; white-space: nowrap; }
.mc-sq-lvchip:hover { border-color: rgba(255,255,255,.4); }
.mc-sq-lvchip.on { background: rgba(94,234,212,.18); border-color: #5eead4; color: #d6fff7; }
.mc-sq-hint { color: var(--text-dim); font: 600 var(--fs-ui)/1.3 system-ui, sans-serif; }
.mc-sq-suggest { display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; align-content: flex-start; margin-bottom: 7px; }
.mc-sq-sg { height: 40px; padding: 0 14px; cursor: pointer; border-radius: 8px; background: #23252f; border: 1px solid rgba(255,255,255,.16); color: #f2f2f4; font: 700 var(--fs-ui)/1 ui-monospace, 'SF Mono', monospace; white-space: nowrap; }
.mc-sq-sg:hover { border-color: #5eead4; background: #2c2f3b; }
.mc-sq-lints { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-sq-mark { text-align: left; padding: 7px 10px; cursor: pointer; border-radius: 7px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: #cfcfd6; font: 600 var(--fs-ui)/1.2 system-ui, sans-serif; }
.mc-sq-mark:hover { border-color: rgba(255,255,255,.45); color: #fff; }
.mc-sq-mark.sev8 { border-color: rgba(232,80,80,.55); }    /* error */
.mc-sq-mark.sev4 { border-color: rgba(232,184,75,.55); }   /* warning */
.mc-sq-mark.fixable::before { content: "✦ "; color: #5eead4; }   /* (Sum 2026-07-13) a click-to-fix finding is marked with a spark */
.mc-sq-mark.fixable:hover { border-color: #5eead4; color: #eafffb; }
/* the changed line after a fix + the floating inline-diff peek */
.mc-lintfix-line { background: rgba(43,255,102,.14); }
.mc-lintfix { background: #14161d; border: 1px solid #5eead4; border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.6); padding: 8px 11px; max-width: 520px; font: 600 var(--fs-ui)/1.35 ui-monospace, 'SF Mono', monospace; pointer-events: none; }
.mc-lintfix-hd { color: #7ff0da; font-weight: 800; margin-bottom: 4px; }
.mc-lintfix-row { white-space: pre-wrap; word-break: break-all; }
.mc-lintfix-row.old { color: #ff9b9b; text-decoration: line-through; opacity: .8; }
.mc-lintfix-row.new { color: #9dffb0; }
.mc-lintfix-ft { margin-top: 5px; color: var(--text-dim,#8a8a92); font-size: 13px; font-family: system-ui; }
.mc-sq-none { color: var(--text-dim); font: 600 var(--fs-ui)/1.4 system-ui, sans-serif; align-self: center; }

.mc-sq-lints-wrap { margin-top: 8px; }

/* (Sum 2026-07-12) the 123 + { } tap-palettes — chars STT/typing miss most. Middle buttons + big chips (accessible). */
.mc-sq-chars { display: inline-flex; gap: 5px; }
.mc-sq-charbtn { height: 40px; min-width: 46px; padding: 0 12px; cursor: pointer; border-radius: 8px; background: #1e2029; border: 1px solid rgba(255,255,255,.16); color: #ddd; font: 800 var(--fs-ui)/1 ui-monospace, 'SF Mono', monospace; }
.mc-sq-charbtn:hover { border-color: rgba(255,255,255,.4); }
.mc-sq-charbtn.on { background: rgba(94,234,212,.18); border-color: #5eead4; color: #d6fff7; }
.mc-sq-ch { min-width: 44px; height: 44px; padding: 0 10px; cursor: pointer; border-radius: 8px; background: #23252f; border: 1px solid rgba(255,255,255,.18); color: #fff; font: 800 calc(var(--fs-ui) * 1.05)/1 ui-monospace, 'SF Mono', monospace; }   /* used by the ⌨ keys drawer */
.mc-sq-ch:hover { border-color: #5eead4; background: #2c2f3b; }

/* ▶ RUN + the SHARED jewels + CONSOLE (Sum 2026-07-12) — the green GO is the SAME glossy dome as the CLI/preview/bots */
.p-monaco .mc-go { flex-shrink: 0; width: var(--run-btn-w, 44px); height: var(--run-btn-h, 34px); padding: 0; cursor: pointer; border: none; box-shadow: none; background: transparent url('../../shell/bar/btn-green-off.png') center / contain no-repeat; }
.p-monaco .mc-go.on, .p-monaco .mc-go.ready { background-image: url('../../shell/bar/btn-green-on.png'); }   /* (Sum 2026-07-13) just ON when there's something to run — NO pulse (pulsing is only for bot permission prompts) */
.p-monaco .mc-go:active { transform: translateY(1px); }
.p-monaco .card-jewels { cursor: pointer; }
.cj-g.mc-run-pulse { animation: mcpulse 1s infinite; }
@keyframes mcpulse { 50% { opacity: .35; } }
.mc-console { flex: 0 0 auto; display: flex; flex-direction: column; max-height: 40vh; background: #0c0d11; border-bottom: 1px solid var(--mc-border); }
.mc-console[hidden] { display: none; }
/* (Sum 2026-07-13) THE HEADLESS RUNNER IS GONE. WebKit composited that hidden iframe on top no matter what (opacity,
   0×0, visibility:hidden, contain:strict — all ignored). Now there is exactly ONE render iframe: the .mc-preview-frame,
   which lives ONLY in the preview tab and is REMOVED from the DOM the instant you leave it. No iframe = no ghost. */
/* collapse the console into just its head bar (Sum: "console needs to be collapsable into a bar") */
.mc-console.collapsed { max-height: none; }
.mc-console.collapsed .mc-console-panes { display: none; }
.mc-console-min { flex: 0 0 auto; width: 26px; height: 26px; cursor: pointer; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #ddd; font: 800 13px/1 system-ui; }
.mc-console-min:hover { background: rgba(255,255,255,.2); color: #fff; }
.mc-console-head { display: flex; align-items: center; gap: 8px; padding: 7px 12px; color: #cfcfd6; font: 800 var(--fs-ui)/1 system-ui; border-bottom: 1px solid rgba(255,255,255,.1); cursor: pointer; }
.mc-console-sp { flex: 1 1 auto; }
.mc-console-clear, .mc-console-x { cursor: pointer; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 6px; height: 34px; padding: 0 12px; font: 700 var(--fs-ui)/1 system-ui; }
.mc-console-clear:hover, .mc-console-x:hover { background: rgba(255,255,255,.2); }
/* the devtools TABS (Sum 2026-07-12): console · preview · problems */
.mc-console-tabs { display: inline-flex; gap: 2px; }
.mc-ctab { cursor: pointer; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-dim,#8a8a92); height: 30px; padding: 0 12px; font: 800 var(--fs-ui)/1 system-ui; }
.mc-ctab:hover { color: #fff; }
.mc-ctab.on { color: #fff; border-bottom-color: var(--mc-gold,#e8b84b); }
.mc-ctab-badge { margin-left: 6px; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--inj-red,#e5484d); color: #fff; font: 800 11px/1 system-ui; }
.mc-console-panes { flex: 1 1 auto; min-height: 96px; display: flex; }
.mc-cpane { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; }
.mc-cpane[hidden] { display: none; }
.mc-console-body { margin: 0; padding: 10px 12px; font: 500 var(--fs-ui)/1.45 ui-monospace, 'SF Mono', monospace; white-space: pre-wrap; color: #d8d8de; }
/* (Sum 2026-07-13) the CLI pane — a self-contained REPL: scrollable output + a prompt line */
.mc-ccli { display: flex; flex-direction: column; }
.mc-cli-out { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 12px; font: 500 var(--fs-ui)/1.45 ui-monospace, 'SF Mono', monospace; }
.mc-cli-line { white-space: pre-wrap; word-break: break-word; color: #d8d8de; }
.mc-cli-line.cmd { color: #8effa8; }
.mc-cli-line.err { color: #ff9b8a; }
.mc-cli-line.wrn { color: var(--mc-amber, #e8b84b); }
.mc-cli-row { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); }
.mc-cli-prompt { color: #8effa8; font: 800 var(--fs-ui)/1 ui-monospace, monospace; flex: 0 0 auto; }
.mc-cli-in { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; color: #eee; font: 500 var(--fs-ui)/1.4 ui-monospace, 'SF Mono', monospace; }
.mc-cli-in:focus { outline: none; }
.mc-cpreview { display: flex; padding: 0; }
.mc-preview-frame { flex: 1 1 auto; width: 100%; min-height: 220px; border: 0; background: #fff; }
.mc-cproblems { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; }
.mc-prob-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; color: #cfcfd6; font: 800 var(--fs-ui)/1 system-ui; }
.mc-prob-fix { cursor: pointer; background: rgba(232,184,75,.16); border: 1px solid var(--mc-gold,#e8b84b); color: #ffe9b8; border-radius: 6px; height: 30px; padding: 0 10px; font: 800 var(--fs-ui)/1 system-ui; }
.mc-prob-fix:hover { background: rgba(232,184,75,.3); color: #fff; }
.mc-prob { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: 7px 9px; color: #d8d8de; font: 600 var(--fs-ui)/1.3 system-ui; }
.mc-prob:hover { background: rgba(255,255,255,.1); }
.mc-prob-sev { flex: 0 0 auto; font-weight: 900; }
.mc-prob-sev.err { color: #ff8a80; } .mc-prob-sev.wrn { color: #ffcf6b; } .mc-prob-sev.inf { color: #7CFF9B; }
.mc-prob-msg { flex: 1 1 auto; }
.mc-prob-loc { flex: 0 0 auto; color: var(--text-dim,#8a8a92); font-variant-numeric: tabular-nums; }
.mc-prob-none { padding: 10px; color: var(--text-dim,#8a8a92); font: 600 var(--fs-ui)/1 system-ui; }
.cw-err { color: #ff8a80; }
.cw-inf { color: #7CFF9B; }
.cw-out { color: #d8d8de; }
.cw-wrn { color: #ffcf6b; }

/* the HEAD run cluster (Sum 2026-07-12) — green GO · jewels · red STOP sit right of the pit, flex-shrink:0 so
   the tab bar yields before they clip, and they ride the collapse (desk.css keeps .card-jewels/.card-stop). */
.p-monaco .card-head .mc-go { margin-left: 4px; }

/* the functions granularity button + section header — a text glyph (ƒ( )) since it has no png yet (Sum 2026-07-12) */
.mc-sq-gran .gran-glyph { display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 34px; padding: 0 6px; font: 800 calc(var(--fs-ui) * 1.05)/1 ui-monospace, 'SF Mono', monospace; color: var(--mc-amber, #e8b84b); }
.mc-sq-sect-ico.gran-glyph { display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 34px; margin-top: 4px; font: 800 var(--fs-ui)/1 ui-monospace, 'SF Mono', monospace; color: var(--mc-amber, #e8b84b); }

/* ══ FIX WORKSPACE (Sum 2026-07-12) — a CHAT with the coder (pulls sandbox files/snippets in) + a SECOND editor (the working fix).
   responsive: .wide = side-by-side (landscape/square) · else stacked (portrait/narrow). save → fix-<name> · apply → main editor. ══ */
.mc-fix { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--mc-border); background: rgba(232,184,75,.08); max-height: 85vh; min-height: 340px; }
.mc-fix[hidden] { display: none; }
/* (Sum 2026-07-13) the instrument row is a FULL-WIDTH top bar (like Squiggy/Teach) → it starts at the far LEFT, not mid-screen.
   the chat + code editor live in .mc-fix-body BELOW it — that's the part that goes side-by-side (wide) or stacked (narrow). */
.mc-fix-body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
.mc-fix.wide .mc-fix-body { flex-direction: row; }
.mc-fix-chat { flex: 1 1 auto; min-width: 0; min-height: 200px; display: flex; flex-direction: column; gap: 6px; }
.mc-fix-ed { position: relative; flex: 1 1 auto; min-width: 0; min-height: 240px; display: flex; flex-direction: column; gap: 4px; order: -1; }   /* relative → the corner ＋ anchors to it · like Squiggy: CODE sits LEFT (row) / TOP (stacked) */
.mc-fix.wide .mc-fix-chat, .mc-fix.wide .mc-fix-ed { flex: 1 1 0; }
/* (Sum 2026-07-14) stacked (side wings / narrow): code & convo SHARE evenly */
.mc-fix:not(.wide) .mc-fix-chat, .mc-fix:not(.wide) .mc-fix-ed { flex: 1 1 0; min-height: 90px; overflow: hidden; }   /* SHARE + each scrolls; the split slider grows the code box */
.mc-fix:not(.wide) .mc-fix-host, .mc-fix:not(.wide) .mc-fix-log { min-height: 0; }
.mc-sq-main:not(.wide) .mc-sq-sections, .mc-sq-main:not(.wide) .mc-sq-chat { flex: 1 1 0; min-height: 90px; }
.mc-fix-scope-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 2px; }   /* wrap to a 2nd line on narrow (side) wings so nothing gets cut off */
.mc-fix-log { flex: 1 1 auto; min-height: 90px; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.mc-fix-msg { max-width: 94%; padding: 8px 10px; border-radius: 8px; font: 500 var(--fs-ui)/1.45 system-ui; white-space: pre-wrap; word-break: break-word; }
.mc-fix-msg.user { align-self: flex-end; background: rgba(232,184,75,.18); border: 1px solid rgba(232,184,75,.35); color: #fff7e6; }
.mc-fix-msg.assistant { align-self: flex-start; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #e8e8ea; }
.mc-fix-think { color: var(--text-dim,#8a8a92); }
.mc-fix-toed { display: block; margin-top: 8px; cursor: pointer; background: rgba(43,255,102,.16); border: 1px solid #2bff66; color: #8effa8; border-radius: 6px; height: 32px; padding: 0 10px; font: 800 var(--fs-ui)/1 system-ui; }
.mc-fix-toed:hover { background: rgba(43,255,102,.3); color: #fff; }
.mc-fix-atts { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-fix-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 9px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #e8e8ea; font: 700 var(--fs-ui)/1 system-ui; }
.mc-fix-chip-x { cursor: pointer; background: transparent; border: 0; color: var(--text-dim,#8a8a92); font: 800 13px/1 system-ui; }
.mc-fix-chip-x:hover { color: #fff; }
.mc-fix-inrow { position: relative; display: flex; align-items: center; gap: 6px; }
.mc-fix-attach { flex: 0 0 auto; width: 40px; height: 40px; cursor: pointer; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); font-size: 18px; }
.mc-fix-attach:hover { background: rgba(255,255,255,.16); }
.mc-fix-in { flex: 1 1 auto; min-width: 0; height: 40px; background: #0e0f14; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; color: #fff; padding: 0 12px; font: 600 var(--fs-ui)/1 system-ui; }
.mc-fix-in:focus { outline: none; border-color: var(--mc-gold,#e8b84b); }
.mc-fix-send { flex: 0 0 auto; width: 46px; height: 40px; cursor: pointer; background: var(--mc-gold,#e8b84b); border: 0; border-radius: 8px; color: #241a02; font-size: 18px; font-weight: 800; }
.mc-fix-send:hover { filter: brightness(1.1); }
.mc-fix-menu { position: absolute; bottom: 46px; left: 0; z-index: 30; max-height: 240px; overflow: auto; min-width: 220px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 10px; background: #16171d; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.mc-fix-mi { text-align: left; cursor: pointer; background: transparent; border: 0; color: #e8e8ea; border-radius: 6px; height: 34px; padding: 0 10px; font: 700 var(--fs-ui)/1 system-ui; }
.mc-fix-mi:hover { background: rgba(255,255,255,.12); }
.mc-fix-mi.none { color: var(--text-dim,#8a8a92); cursor: default; }
.mc-fix-ed-head { display: flex; align-items: center; gap: 8px; }
.mc-fix-name { color: var(--mc-gold,#e8b84b); font: 800 var(--fs-ui)/1 ui-monospace, monospace; white-space: nowrap; }
.mc-fix-status { color: #8effa8; font: 700 var(--fs-ui)/1 system-ui; }
/* (Sum 2026-07-13) Fix's ＋ = the SAME green ＋ square as Squiggy's box corner (`.mc-sq-add`) — insert into the editor */
.mc-fix-apply { cursor: pointer; width: 40px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; font: 800 20px/1 system-ui; background: rgba(43,255,102,.14); border: 1px solid rgba(43,255,102,.5); color: #8effa8; }
.mc-fix-apply:hover { background: rgba(43,255,102,.32); color: #fff; }
/* (Sum 2026-07-13) ＋ now rides ON the code box (down in the bottom-right corner) — like Squiggy's block ＋, not a head bar */
.mc-fix-apply.corner { position: absolute; bottom: 40px; right: 16px; z-index: 4; width: 34px; height: 34px; background: rgba(43,255,102,.2); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.mc-fix-host { flex: 1 1 auto; min-height: 200px; border: 1px solid var(--mc-border); border-radius: 6px; overflow: hidden; }
.mc-fix-grip { flex: 0 0 auto; height: 16px; cursor: ns-resize; display: flex; align-items: center; justify-content: center; color: var(--text-dim,#8a8a92); font: 900 15px/1 system-ui; letter-spacing: 3px; border-radius: 5px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); user-select: none; }
.mc-fix-grip:hover { background: rgba(255,255,255,.14); color: #fff; }

/* fix review flow (Sum 2026-07-12): undo · 🏁 diff (drag race) + ◀▶ step · push · save fix · save out */
.mc-fix-ed-head { flex-wrap: wrap; }
.mc-fix-undo, .mc-fix-diff, .mc-fix-step, .mc-fix-toprefresh { cursor: pointer; height: 34px; padding: 0 10px; border-radius: 7px; font: 800 var(--fs-ui)/1 system-ui; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); color: #ddd; }
.mc-fix-check { cursor: pointer; height: 34px; min-width: 40px; padding: 0 10px; border-radius: 7px; font: 800 15px/1 system-ui; background: rgba(43,255,102,.14); border: 1px solid rgba(43,255,102,.5); color: #8effa8; }   /* (Sum 2026-07-14) green ✓ health-check, after diff */
.mc-fix-check:hover { background: rgba(43,255,102,.32); color: #fff; }
.mc-fix-undo:hover, .mc-fix-diff:hover, .mc-fix-step:hover, .mc-fix-toprefresh:hover { background: rgba(255,255,255,.18); color: #fff; }
.mc-fix-toprefresh { flex: 0 0 auto; width: 40px; padding: 0; }
/* (Sum 2026-07-13) Teach's top-row ↻ refresh — matches Squiggy/Fix */
.mc-tool-toprefresh { flex: 0 0 auto; width: 40px; height: 40px; cursor: pointer; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); color: #ddd; font: 700 var(--fs-ui)/1 system-ui; }
.mc-tool-toprefresh:hover { background: rgba(255,255,255,.2); color: #fff; }
.mc-fix-diff.on { background: rgba(232,184,75,.22); border-color: var(--mc-gold,#e8b84b); color: #fff7e6; }
.mc-fix-diffhost { flex: 1 1 auto; min-height: 200px; border: 1px solid var(--mc-border); border-radius: 6px; overflow: hidden; }
.mc-fix-diffhost[hidden] { display: none; }

/* the thinking/coding bar (Sum 2026-07-12) — the stream filter's status: prose → chat, code → editor */
.mc-fix-mode { padding: 6px 10px; border-radius: 7px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: var(--text-dim,#8a8a92); font: 800 var(--fs-ui)/1 system-ui; }
.mc-fix-mode.coding { background: rgba(43,255,102,.14); border-color: #2bff66; color: #8effa8; }
.mc-fix-mode[hidden] { display: none; }

/* the coder's jenga ops shown inline (Sum 2026-07-12): just the snippet + where it lands, not the whole file */
.mc-fix-op { margin-top: 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; overflow: hidden; }
.mc-fix-op-h { padding: 5px 9px; background: rgba(232,184,75,.14); color: #ffe9b8; font: 800 var(--fs-ui)/1 system-ui; }
.mc-fix-op-old, .mc-fix-op-new { margin: 0; padding: 7px 9px; font: 500 var(--fs-ui)/1.4 ui-monospace,'SF Mono',monospace; white-space: pre-wrap; word-break: break-word; }
.mc-fix-op-old { background: rgba(255,65,54,.1); color: #ffb3ae; }
.mc-fix-op-new { background: rgba(43,255,102,.1); color: #a7f7bd; }

/* preview tab is file-type aware (Sum 2026-07-12): html → the iframe · py/js/sh → its output · nothing yet → a hint */
.mc-preview-out { flex: 1 1 auto; margin: 0; padding: 12px 14px; overflow: auto; background: #0e0f14; color: #dfeee9; font: 500 var(--fs-ui)/1.5 ui-monospace,'SF Mono',monospace; white-space: pre-wrap; }
.mc-preview-out[hidden] { display: none; }
.mc-preview-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; color: var(--text-dim,#8a8a92); font: 700 var(--fs-ui)/1.4 system-ui; }
.mc-preview-empty[hidden] { display: none; }

/* console resize slider (Sum 2026-07-13) — drag the bottom grip to size the console */
.mc-console-grip { flex: 0 0 auto; height: 14px; cursor: ns-resize; display: flex; align-items: center; justify-content: center; color: var(--text-dim,#8a8a92); font: 900 14px/1 system-ui; letter-spacing: 3px; background: rgba(255,255,255,.05); border-top: 1px solid rgba(255,255,255,.1); user-select: none; }
.mc-console-grip:hover { background: rgba(255,255,255,.14); color: #fff; }
.mc-console.collapsed .mc-console-grip { display: none; }

/* ascended refresh mode — append vs find-replace (Sum 2026-07-13) */
.mc-sq-llmmode { flex: 0 0 auto; height: 34px; padding: 0 10px; cursor: pointer; border-radius: 8px; background: rgba(94,234,212,.14); border: 1px solid #5eead4; color: #d6fff7; font: 800 var(--fs-ui)/1 system-ui; }
.mc-sq-llmmode:hover { background: rgba(94,234,212,.28); color: #fff; }

/* while a grip is being dragged, iframes must NOT swallow the mouse (the sticky/breaking slider fix — Sum 2026-07-13) */
.mc-dragging iframe { pointer-events: none !important; }
.mc-dragging, .mc-dragging * { user-select: none !important; cursor: ns-resize !important; }
.mc-sq-llmrefresh { min-width: 34px; text-align: center; }

/* line + the chat-code box → FULL WIDTH, stacked, up to 4 lines; both get a height grip (Sum 2026-07-13) */
.mc-sq-sect[data-gran="squiggy"] .mc-sq-opts, .mc-sq-sect[data-gran="chatcode"] .mc-sq-opts { flex-direction: column; overflow-x: visible; align-items: stretch; }
/* (Sum 2026-07-13) monaco auto chips STACK (wrap) instead of scrolling off-screen — the box scrolls down if there are a lot */
.mc-sq-sect[data-gran="monaco"] .mc-sq-opts { flex-wrap: wrap; overflow-x: visible; align-items: flex-start; }
.mc-sq-sect[data-gran="squiggy"] .mc-sq-opt, .mc-sq-sect[data-gran="chatcode"] .mc-sq-opt { position: relative; width: 100%; display: flex; flex-direction: column; }   /* relative → the corner ＋ anchors to it */
.mc-sq-sect[data-gran="squiggy"] .mc-sq-mini, .mc-sq-sect[data-gran="chatcode"] .mc-sq-mini { width: 100% !important; flex: 1 1 auto; }
/* (Sum 2026-07-13) ＋ is a small button in the TOP-RIGHT corner of the box (where the × used to be); × is gone */
.mc-sq-add.corner { position: absolute; top: 5px; right: 5px; z-index: 3; width: 30px; height: 30px; padding: 0; justify-content: center; border: 1px solid rgba(43,255,102,.4); border-radius: 6px; }
.mc-sq-sect[data-gran="chatcode"] { border-left: 2px solid rgba(94,234,212,.5); padding-left: 8px; }
.mc-sq-mini-grip { height: 13px; cursor: ns-resize; display: flex; align-items: center; justify-content: center; color: var(--text-dim,#8a8a92); font: 900 12px/1 system-ui; letter-spacing: 2px; background: rgba(255,255,255,.05); border-top: 1px solid rgba(255,255,255,.1); user-select: none; }
.mc-sq-mini-grip:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ⌨ THE KEYS DRAWER (Sum 2026-07-13) — its own pit toggle: ƒ funcs · 123 · { } */
.mc-keys { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--mc-border); background: rgba(94,234,212,.05); max-height: 40vh; overflow-y: auto; }
.mc-keys[hidden] { display: none; }
.mc-keys-pal { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-keys-pane .mc-sq-ch { min-width: 44px; }
.mc-keys-fn { font: 700 calc(var(--fs-ui) * 1.02)/1 ui-monospace, 'SF Mono', monospace !important; }
.mc-keys-fn.mine { background: rgba(232,184,75,.14); border-color: rgba(232,184,75,.5); color: #ffe9b8; }
.mc-keys-more { margin-top: 6px; cursor: pointer; height: 32px; padding: 0 12px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); color: #ddd; font: 800 var(--fs-ui)/1 system-ui; }
.mc-keys-more:hover { background: rgba(255,255,255,.18); color: #fff; }
/* (Sum 2026-07-13) ONE few/many icon toggle, inline with the ƒ chips — no words, minimal footprint. bars = destination */
.mc-fm { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; }
.fm-bars { display: inline-block; width: 14px; height: 2px; background: currentColor; }
.fm-few  { box-shadow: 0 5px 0 currentColor; }                                        /* 2 bars = few */
.fm-many { box-shadow: 0 -4px 0 currentColor, 0 3px 0 currentColor, 0 7px 0 currentColor; }   /* 4 bars = many */
.mc-keys-btn { font: 800 var(--fs-ui)/1 ui-monospace, 'SF Mono', monospace; min-width: 34px; justify-content: center; }   /* ƒ · { } · 123 read as code keys */
.mc-keys-btn.on { background: rgba(94,234,212,.22); border-color: #5eead4; }

/* linter → compact + moved to the top + a ✓ toggle left of the smallest granularity (Sum 2026-07-13) */
.mc-sq-lints-wrap { flex: 0 0 auto; width: 100%; margin: 0; }   /* (Sum 2026-07-13) its own full-width row above main — never a side column */
.mc-sq-lints.clean { min-height: 0; }
.mc-sq-lints.clean .mc-sq-none { padding-top: 0; font: 700 var(--fs-ui)/1 system-ui; color: var(--text-dim,#8a8a92); opacity: .75; }
.mc-sq-lintck { min-width: 34px; height: 30px; cursor: pointer; border-radius: 8px; background: #1e2029; border: 1px solid rgba(255,255,255,.18); color: var(--text-dim,#8a8a92); font: 900 calc(var(--fs-ui) * 1.05)/1 system-ui; }
.mc-sq-lintck.on { background: rgba(43,255,102,.16); border-color: #2bff66; color: #8effa8; }
.mc-sq-lintck:not(.on) { text-decoration: line-through; opacity: .7; }

/* the suggestions ↔ chat splitter (Sum 2026-07-13) — drag to share space */
.mc-sq-split { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--text-dim,#8a8a92); background: rgba(255,255,255,.05); border-radius: 5px; user-select: none; font: 900 13px/1 system-ui; }
.mc-sq-split[hidden] { display: none; }
.mc-sq-split:hover { background: rgba(255,255,255,.14); color: #fff; }
.mc-sq-main:not(.wide) > .mc-sq-split { height: 13px; cursor: ns-resize; }
.mc-sq-main.wide > .mc-sq-split { width: 13px; align-self: stretch; cursor: ew-resize; writing-mode: vertical-rl; }

/* keys sections stack (Sum 2026-07-13) — each toggles independently */
.mc-keys-pane { display: flex; flex-direction: column; gap: 8px; }
.mc-keys-sect { display: flex; flex-direction: column; gap: 6px; }
.mc-keys-sect + .mc-keys-sect { border-top: 1px solid rgba(255,255,255,.1); padding-top: 8px; }

/* stop the suggestions from shoving the chat off-screen (Sum 2026-07-13) — split by GROW, ignore content width */
.mc-sq-main.wide > .mc-sq-sections { flex: 1 1 0; overflow-x: hidden; }
.mc-sq-main.wide > .mc-sq-chat { flex: 1 1 0; }