/* online-ide.com: one stylesheet, no framework. Light by default, .dark on <html> for dark.
   The neutral greys and the blue follow the CI3 site, so returning visitors know where they are. */

:root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f4f4f4;          /* output header, status bar */
    --surface-3: #e4e5e7;          /* hovers on those bars */
    --tabbar: #ebebeb;             /* file tabs strip, a step darker as on the CI3 site */
    --line: #e1e3e8;
    --line-strong: #d2d6de;
    --ink: #1f2328;
    --ink-2: #5e5e5e;
    --ink-3: #8b8d91;
    --accent: #1a73e8;
    --accent-ink: #ffffff;
    --run: #17803d;
    --stop: #c9302c;
    --ok: #17803d;
    --warn: #b7791f;
    --err: #c9302c;
    --focus: #2563eb;
    --toast-ok: #5fd08c;
    --toast-err: #ff8a82;
    --shadow-sm: 0 1px 2px rgb(16 24 40 / .06);
    --shadow: 0 1px 2px rgb(16 24 40 / .06), 0 8px 24px -6px rgb(16 24 40 / .14);
    --shadow-lg: 0 2px 4px rgb(16 24 40 / .05), 0 16px 40px -8px rgb(16 24 40 / .22);
    --scroll-thumb: rgb(16 24 40 / .16);
    --scroll-thumb-active: rgb(16 24 40 / .32);
    --radius: 8px;
    --ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --bar-h: 52px;
    --ease: cubic-bezier(.2, .8, .2, 1);
    color-scheme: light;
}

html.dark {
    --bg: #0f0f0f;
    --surface: #18191b;
    --surface-2: #27282b;
    --surface-3: #34363a;
    --tabbar: #27282b;
    --line: #2a2b2f;
    --line-strong: #3b3d42;
    --ink: #ececec;
    --ink-2: #bdbdbd;
    --ink-3: #909099;
    --accent: #5aa2ff;
    --accent-ink: #0f0f0f;
    --scroll-thumb: rgb(255 255 255 / .13);
    --scroll-thumb-active: rgb(255 255 255 / .28);
    --run: #24934d;
    --stop: #d24a42;
    --ok: #4cc27a;
    --warn: #e0b04a;
    --err: #f0736b;
    --focus: #7aa7ff;
    --toast-ok: #17803d;
    --toast-err: #c9302c;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -8px rgb(0 0 0 / .6);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / .4), 0 20px 48px -8px rgb(0 0 0 / .7);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* set for one frame while the page theme switches (setPageTheme in the header) */
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }
[hidden] { display: none !important; }

html, body { margin: 0; }

body {
    background: var(--bg);
    color: var(--ink);
    font: 14px/1.5 var(--ui);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Icons are a Lucide sprite; stroke is set here so weight can follow context. */
.i {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.i-sm { width: 16px; height: 16px; }
.i-xs { width: 14px; height: 14px; stroke-width: 2; }
.icon-sun { display: none; }
html.dark .icon-sun { display: block; }
html.dark .icon-moon { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--surface);
    color: var(--ink-2);
    font: 500 11px/1 var(--mono);
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    font-weight: 550;
    font-size: 13px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s, transform .06s;
}
/* Hover only on enabled buttons, so a disabled one keeps its own colours */
.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }

.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.btn-icon { width: 34px; padding: 0; justify-content: center; }
.btn-sm { height: 28px; padding: 0 8px; font-size: 12px; border-radius: 6px; }
.btn-sm.btn-icon { width: 28px; padding: 0; }

.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-primary:hover:not(:disabled) { background: var(--ink-2); border-color: var(--ink-2); }
.btn-danger { background: var(--stop); border-color: var(--stop); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); background: var(--stop); }

/* Tooltips: <button data-tip="Text">. Below the element by default. */
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    translate: -50% -3px;
    padding: 5px 8px;
    border-radius: 6px;
    background: var(--ink);
    color: var(--bg);
    box-shadow: var(--shadow);
    font: 500 12px/1.3 var(--ui);
    letter-spacing: 0;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s, translate .12s;
    z-index: 50;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; translate: -50% 0; transition-delay: .45s; }
[data-tip-pos="end"]::after { left: auto; right: 0; translate: 0 -3px; }
[data-tip-pos="end"]:hover::after, [data-tip-pos="end"]:focus-visible::after { translate: 0 0; }
.dd.open [data-tip]::after { display: none; }
@media (hover: none) { [data-tip]::after { display: none; } }

/* ---------- App bar: three columns, Run sits in the true centre ---------- */

.appbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--bar-h);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.bar-start, .bar-end { display: flex; align-items: center; gap: 4px; min-width: 0; }
.bar-start .lang { margin-left: auto; }
.bar-center { display: flex; justify-content: center; }
.share-wrap { position: relative; margin-right: auto; }
.bar-tools { display: flex; align-items: center; gap: 2px; margin-left: 6px; }

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-right: 8px;
    padding: 4px 6px 4px 0;
    border-radius: var(--radius);
    text-decoration: none;
    white-space: nowrap;
}
.brand-mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent) 70%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 1px 2px rgb(0 0 0 / .18);
}
.brand-mark .i { width: 17px; height: 17px; stroke-width: 2.5; }
/* Wordmark in the editor's typeface, like the sister site online-json */
.brand-name { font: 700 15.5px/1 var(--mono); letter-spacing: -.03em; }
.brand-dash { color: var(--accent); }

.chev { color: var(--ink-3); transition: rotate .18s var(--ease); }
.dd.open > .dd-btn .chev { rotate: 180deg; }
.dd.open > .btn-ghost { background: var(--surface-2); color: var(--ink); }

.pro-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .12s;
}
.pro-link:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Run: the one loud control on the page */
/* The shortcut and the live timer share one grid cell, so Run and Stop are the same width
   and the buttons beside it never move. */
.run {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 8px 0 15px;
    border: 1px solid color-mix(in srgb, var(--run) 72%, #000);
    border-radius: 10px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--run) 84%, #fff), var(--run));
    color: #fff;
    font: 650 14px/1 var(--ui);
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 1px 1px rgb(0 0 0 / .12), 0 6px 16px -6px color-mix(in srgb, var(--run) 75%, transparent);
    transition: filter .12s, box-shadow .15s, transform .06s;
}
.run:hover { filter: brightness(1.07); }
.run:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgb(0 0 0 / .25); }
.run:focus-visible { outline-offset: 2px; }
.run-icon { width: 14px; height: 14px; fill: currentColor; stroke-width: 2; }
.run-label { min-width: 34px; text-align: left; }
.run-kbd {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 22px;
    padding: 0 7px;
    border: 0;
    border-radius: 6px;
    background: rgb(0 0 0 / .18);
    color: rgb(255 255 255 / .92);
    font: 500 11.5px/1 var(--mono);
}
.run.is-running {
    border-color: color-mix(in srgb, var(--stop) 72%, #000);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--stop) 84%, #fff), var(--stop));
    animation: run-ring 1.8s ease-out infinite;
}
.run.is-running .run-icon { scale: .86; }
@keyframes run-ring {
    0% { box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 0 0 0 color-mix(in srgb, var(--stop) 45%, transparent); }
    100% { box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 0 0 9px transparent; }
}

.share-btn { gap: 7px; }
.share-btn .i { color: var(--ink-2); }

/* Segmented control (layout) */
.seg {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    margin-right: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.seg-btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: background-color .12s, color .12s, box-shadow .12s;
}
.seg-btn .i { width: 17px; height: 17px; }
.seg-btn:hover { color: var(--ink); }
.seg-btn[aria-pressed="true"], .seg-btn[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }

/* Theme toggle: the sun and moon swap with a turn */
.theme-toggle .i { position: absolute; inset: 0; margin: auto; display: block !important; transition: opacity .2s, rotate .45s var(--ease), scale .45s var(--ease); }
.theme-toggle .icon-sun { opacity: 0; rotate: -90deg; scale: .5; }
html.dark .theme-toggle .icon-sun { opacity: 1; rotate: 0deg; scale: 1; }
html.dark .theme-toggle .icon-moon { opacity: 0; rotate: 90deg; scale: .5; }

/* ---------- Menus (File, More, Language) ---------- */

.dd { position: relative; }
.menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 244px;
    padding: 5px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    translate: 0 -4px;
    scale: .98;
    transform-origin: top left;
    transition: opacity .14s, translate .14s var(--ease), scale .14s var(--ease), visibility .14s;
}
.menu-end { left: auto; right: 0; transform-origin: top right; }
.dd.open > .menu { opacity: 1; visibility: visible; translate: 0 0; scale: 1; }
.menu [role="menuitem"] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--ink);
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.menu [role="menuitem"] .i { width: 17px; height: 17px; color: var(--ink-3); }
.menu [role="menuitem"]:hover, .menu [role="menuitem"]:focus-visible { background: var(--surface-2); outline: none; }
.menu [role="menuitem"]:hover .i, .menu [role="menuitem"]:focus-visible .i { color: var(--ink); }
.menu [role="menuitem"] kbd { margin-left: auto; border: 0; background: none; color: var(--ink-3); padding: 0; gap: 1px; }
.menu [role="menuitem"]:disabled { opacity: .4; cursor: default; background: none; }
.menu [role="menuitem"] .tab-ic { width: 15px; height: 15px; }
/* File list rows: the row is one hover target; the name opens the file, the x closes it */
.file-row { display: flex; align-items: center; padding-right: 3px; border-radius: 7px; }
.file-row:hover, .file-row:focus-within, .file-row.current { background: var(--surface-2); }
.file-row.current [role="menuitem"] { font-weight: 600; }
.file-row [role="menuitem"] { flex: 1; min-width: 0; }
.file-row [role="menuitem"]:hover, .file-row [role="menuitem"]:focus-visible { background: none; }
.file-close {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--ink-3);
    cursor: pointer;
    opacity: 0;
}
.file-row:hover .file-close, .file-row:focus-within .file-close { opacity: 1; }
.file-close:hover { color: var(--ink); }
@media (hover: none) { .file-close { opacity: 1; } }
/* Placed by script at a pointer or button (file list, tab right-click menu) */
.menu-fixed, .ctx > .menu { position: fixed; min-width: 200px; max-height: calc(100dvh - 16px); overflow-y: auto; transform-origin: top left; }
.menu .danger, .menu .danger .i, .menu .danger:hover .i { color: var(--err); }
.menu .danger:hover { background: color-mix(in srgb, var(--err) 9%, transparent); }
.menu hr { height: 1px; margin: 5px 4px; border: 0; background: var(--line); }
/* a labelled control in a menu: the layout switch in the narrow-screen menu */
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 4px 10px; font-size: 13px; color: var(--ink); }
.menu-row .seg { margin: 0; }
.menu-row .seg-btn { display: inline-flex; gap: 6px; width: auto; padding: 0 10px; font-size: 12.5px; font-weight: 550; }
.menu-row .seg-btn .i { width: 15px; height: 15px; }
.menu-title { padding: 6px 8px 8px; font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); }

/* Language picker */
.lang-btn {
    gap: 8px;
    padding: 0 9px 0 8px;
    border-color: var(--line);
    background: var(--surface-2);
    min-width: 132px;
}
.lang-btn:hover, .lang.open .lang-btn { background: var(--surface-3); border-color: var(--line-strong); }
.lang-btn .chev { margin-left: auto; }
.lang-btn img { width: 18px; height: 18px; }
.lang-menu { width: 380px; padding: 6px; }
.lang-menu ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; }
.lang-menu li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 6px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    text-align: center;
    cursor: pointer;
    transition: background-color .1s, border-color .1s;
}
.lang-menu li img { width: 28px; height: 28px; transition: scale .18s var(--ease); }
.lang-menu li:hover, .lang-menu li:focus { background: var(--surface-2); outline: none; }
.lang-menu li:hover img, .lang-menu li:focus img { scale: 1.08; }
.lang-menu li:focus-visible { border-color: var(--focus); }
.lang-menu li[aria-selected="true"] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.lang-name { font-size: 13px; font-weight: 550; color: var(--ink); }
.lang-menu .ext { font: 10.5px var(--mono); color: var(--ink-3); }

/* ---------- Page frame with ad rails ---------- */

.frame { display: flex; justify-content: center; }
.rail { flex: none; width: 230px; padding: 12px 10px; }
.main { container-type: inline-size; flex: 1; min-width: 0; max-width: 1680px; } /* the in-text ad slots size against it */
@media (min-width: 1800px) { .rail { width: 320px; } }
@media (max-width: 1100px) { .rail { display: none; } }

/* Ezoic ad slots. The sidebar ads stay in view just below the header while the page scrolls. */
.rail [id^="ezoic-pub-ad-placeholder-"] { position: sticky; top: calc(var(--bar-h) + 12px); }
/* Slots in the page text: wider than the text where the main column has room, up to the widest ad
   (970px), and centred on the text. Ezoic left-aligns an ad that is wider than its slot and its inline
   !important styles can't be overridden, so the slot itself has to be wide enough. They are also as
   tall as the box Ezoic puts in them from the start, so the text doesn't jump when an ad arrives:
   the min-heights Ezoic gives each placement (desktop and mobile); update them if the placements
   change in Ezoic's dashboard. */
.content [id^="ezoic-pub-ad-placeholder-"] {
    --slot-w: max(100%, min(970px, 100cqw - 32px));
    width: var(--slot-w);
    margin-inline: calc((100% - var(--slot-w)) / 2);
    text-align: center;
}
#ezoic-pub-ad-placeholder-104, #ezoic-pub-ad-placeholder-105 { min-height: 300px; }
#ezoic-pub-ad-placeholder-107 { min-height: 105px; }
@media (max-width: 767px) {
    #ezoic-pub-ad-placeholder-107 { min-height: 265px; }
}

/* ---------- Workspace ---------- */

/* <html data-layout> is horizontal, vertical or tabs; set before first paint by ide.php.
   The starting pane sizes match what Split.js applies, so nothing moves when it loads. */
.workspace {
    display: flex;
    justify-content: space-between;
    height: calc(100vh - var(--bar-h));
    height: calc(100dvh - var(--bar-h));
    min-height: 480px;
    padding: 10px;
}
[data-layout="vertical"] .workspace, [data-layout="tabs"] .workspace { flex-direction: column; }
[data-layout="horizontal"] #editor-pane { width: calc(var(--split, 50%) - 5px); }
[data-layout="horizontal"] #output-pane { width: calc(100% - var(--split, 50%) - 5px); }
[data-layout="vertical"] #editor-pane { height: calc(var(--split, 65%) - 5px); }
[data-layout="vertical"] #output-pane { height: calc(100% - var(--split, 65%) - 5px); }
[data-layout="tabs"] .pane { flex: 1; }
[data-layout="tabs"] .workspace:not(.show-output) #output-pane,
[data-layout="tabs"] .workspace.show-output #editor-pane,
[data-layout="tabs"] #expand-output, [data-layout="tabs"] .tool-sep { display: none; }

/* Code / Output switch, tabs layout only */
.views { display: none; flex: none; gap: 2px; align-self: flex-start; margin-bottom: 8px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
[data-layout="tabs"] .views { display: inline-flex; }
.view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-3);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}
.view-btn:hover { color: var(--ink); }
.view-btn[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.view-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.view-dot:not(.running, .ok, .warn, .err) { display: none; }
.view-dot.running { color: var(--focus); animation: pulse 1s ease-in-out infinite; }
.view-dot.ok { color: var(--ok); }
.view-dot.warn { color: var(--warn); }
.view-dot.err { color: var(--err); }

.pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Split.js gutter with a visible grip */
.gutter { flex: none; position: relative; background: transparent; }
.gutter::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 3px;
    background: var(--line-strong);
    transition: background-color .15s, scale .15s;
}
.gutter:hover::after, .gutter:active::after { background: var(--accent); }
.gutter.gutter-horizontal { cursor: col-resize; }
.gutter.gutter-horizontal::after { width: 4px; height: 36px; }
.gutter.gutter-horizontal:hover::after { scale: 1 1.6; }
.gutter.gutter-vertical { cursor: row-resize; }
.gutter.gutter-vertical::after { height: 4px; width: 36px; }
.gutter.gutter-vertical:hover::after { scale: 1.6 1; }

/* Editor tabs: the tabs scroll; New file and the file list stay pinned at the end, so they never move */
.tabbar {
    display: flex;
    align-items: center;
    height: 34px;
    flex: none;
    padding-right: 4px;
    background: var(--tabbar);
    border-bottom: 1px solid var(--line);
}
.tabs {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 6px 0 12px;
    border-right: 1px solid var(--line);
    font: 12.5px var(--mono);
    color: var(--ink-3);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color .12s, background-color .12s;
}
.tab:hover { color: var(--ink); }
.tab.active { background: var(--surface); color: var(--ink); }
.tab.active::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); }
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--surface); }
.tab-ic { width: 14px; height: 14px; flex: none; }
svg.tab-ic { color: var(--ink-3); stroke-width: 2; }
.tab:not(.active) img.tab-ic { filter: saturate(.4); opacity: .75; }
.tab .tab-name { padding: 2px 0; }
.tab:first-child { padding-right: 14px; }
.tab-close {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    opacity: 0;
}
.tab-close .i { width: 14px; height: 14px; stroke-width: 2; }
.tab:hover .tab-close, .tab.active .tab-close, .tab-close:focus-visible { opacity: 1; }
.tab-close:hover { background: var(--surface-3); color: var(--ink); }
.tab-rename {
    width: 130px;
    padding: 2px 5px;
    border: 1px solid var(--focus);
    border-radius: 4px;
    background: var(--surface);
    font: 12.5px var(--mono);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent);
}
.tab-act {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    margin-left: 2px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
}
/* New file: set apart from the tabs, outlined and muted so it reads as an action, not a tab */
.tabs { margin-right: 10px; }
.tabs + .tab-act { margin-left: auto; border: 1px solid var(--line-strong); background: var(--surface); }
.tabs + .tab-act:hover { border-color: var(--ink-3); }
.tab-act:hover, .dd.open > .tab-act { background: var(--surface-3); color: var(--ink); }
.tab-act .i { width: 16px; height: 16px; stroke-width: 2; }

#editor { flex: 1; min-height: 0; }
#editor.is-loading { visibility: hidden; }

/* Status bar: items are clickable shortcuts into the matching setting */
.statusbar {
    container-type: inline-size;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 30px;
    flex: none;
    padding: 0 6px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    font: 500 11.5px/1 var(--ui);
    color: var(--ink-3);
}
/* A narrow status bar (phones, or beside the output on a laptop) drops the indentation, which is
   in Editor settings, and shortens its texts; Feedback keeps its label */
@container (max-width: 540px) {
    #sb-indent, #cursor-pos .text-full { display: none; }
    #cursor-pos .text-short { display: inline; }
}
@container (max-width: 420px) {
    .sb-item .text-full { display: none; }
    .sb-item .text-short { display: inline; }
}
.sb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 7px;
    border: 0;
    border-radius: 5px;
    background: none;
    color: inherit;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .1s, color .1s;
}
button.sb-item:hover { background: var(--surface-3); color: var(--ink); }
.sb-item.static { cursor: default; }
.sb-item img { width: 13px; height: 13px; }
#cursor-pos { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.sb-push { flex: 1; }
.saved-state .i { color: var(--ok); }
#sb-wrap[aria-pressed="true"] { color: var(--ink); background: var(--surface-3); }
.statusbar [data-tip]::after { top: auto; bottom: calc(100% + 8px); translate: -50% 3px; }
.statusbar [data-tip-pos="end"]::after { translate: 0 3px; }
.statusbar [data-tip]:hover::after { translate: -50% 0; }
.statusbar [data-tip-pos="end"]:hover::after { translate: 0 0; }

/* Output pane */
.out-head {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    flex: none;
    padding: 0 6px 0 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}
.out-title { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12.5px; color: var(--ink); }
.out-title .i { color: var(--ink-3); stroke-width: 2; }
.out-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.tool-sep { width: 1px; height: 16px; margin: 0 4px; background: var(--line-strong); }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font: 500 11.5px var(--mono);
    background: var(--surface-3);
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: pill-in .2s var(--ease);
}
.pill:not(.running, .ok, .warn, .err) { display: none; }
.pill::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.running { color: var(--focus); background: color-mix(in srgb, var(--focus) 12%, transparent); }
.pill.running::before { animation: pulse 1s ease-in-out infinite; }
.pill.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.pill.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.pill.err { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
@keyframes pulse { 50% { opacity: .3; } }
@keyframes pill-in { from { opacity: 0; scale: .9; } }

/* Arguments read like the command line that runs the active file */
.args {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    height: 36px;
    padding: 0 14px;
    border-bottom: 1px solid var(--line);
    font: 12.5px var(--mono);
    color: var(--ink-3);
    cursor: text;
    transition: background-color .12s;
}
.args:focus-within { background: color-mix(in srgb, var(--focus) 5%, var(--surface)); }
.args-prompt { color: var(--run); font-weight: 700; }
.args-file { color: var(--ink-2); white-space: nowrap; }
.args input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font: 12.5px var(--mono);
    color: var(--ink);
    outline: none;
}
.args input::placeholder { color: var(--ink-3); opacity: .7; }

.progress { height: 2px; flex: none; background: transparent; overflow: hidden; margin-bottom: -2px; position: relative; z-index: 1; }
.progress.running { background: color-mix(in srgb, var(--focus) 15%, transparent); }
.progress.running::after {
    content: "";
    display: block;
    width: 35%;
    height: 100%;
    background: var(--focus);
    animation: slide 1.1s ease-in-out infinite;
}
.progress.ok { background: var(--ok); animation: fade-bar 1.6s ease-in forwards; }
.progress.warn { background: var(--warn); }
.progress.err { background: var(--err); }
@keyframes slide { from { translate: -100%; } to { translate: 290%; } }
@keyframes fade-bar { 70% { opacity: 1; } to { opacity: 0; } }

.hint {
    display: none;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 8px 8px 8px 14px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--warn) 10%, var(--surface));
    font-size: 12.5px;
    color: var(--ink);
}
.hint.show { display: flex; animation: pill-in .2s var(--ease); }
.hint .i { color: var(--warn); }
.hint button { margin-left: auto; }

.terminal { position: relative; flex: 1; min-height: 0; padding: 4px 2px 2px 6px; background: var(--term-bg, var(--surface)); cursor: text; }
#xterm-container { height: 100%; }
/* Slim scrollbars for the editor and the terminal: faint until the pointer is over the pane */
.ace_scrollbar, .xterm .xterm-viewport { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
.ace_editor:hover .ace_scrollbar, .terminal:hover .xterm-viewport { scrollbar-color: var(--scroll-thumb-active) transparent; }
/* a dark editor theme on the light page */
.ace_dark .ace_scrollbar { scrollbar-color: rgb(255 255 255 / .13) transparent; }
.ace_dark.ace_editor:hover .ace_scrollbar { scrollbar-color: rgb(255 255 255 / .28) transparent; }

/* Shown until the first run, and again after Clear */
.term-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    background: var(--term-bg, var(--surface));
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-3);
    pointer-events: none;
    transition: opacity .2s, visibility .2s;
}
.term-empty strong { color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.term-empty kbd { vertical-align: 1px; }
.term-empty-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--run) 10%, var(--surface-2));
    color: var(--run);
}
.term-empty-icon .i { width: 16px; height: 16px; fill: currentColor; translate: 1px 0; }
.terminal.has-output .term-empty { opacity: 0; visibility: hidden; }

/* ---------- Dialogs ---------- */

/* A modal dialog makes the page inert but doesn't stop it scrolling: wheel or touch scrolling over
   a dialog, its backdrop or the end of a list in it would scroll the page behind. The gutter keeps
   the page from shifting when its scrollbar goes. */
html:has(dialog:modal) { overflow: hidden; scrollbar-gutter: stable; }

dialog {
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
}
dialog > form { display: flex; flex-direction: column; max-height: calc(100dvh - 34px); }
dialog.wide { width: min(600px, calc(100vw - 32px)); }
dialog::backdrop { background: rgb(20 18 15 / .45); backdrop-filter: blur(3px); }
dialog[open] { animation: pop .18s var(--ease); }
dialog[open]::backdrop { animation: fade .18s ease-out; }
@keyframes pop { from { opacity: 0; translate: 0 8px; scale: .98; } }
@keyframes fade { from { opacity: 0; } }

.dlg-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 6px; }
.dlg-head h2 { flex: 1; margin: 0; font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; }
.dlg-head h2 small { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.dlg-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--ink-2);
}
.dlg-icon.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.dlg-icon.danger { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }
.dlg-icon.ok { background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); }
.dlg-body { padding: 8px 20px 18px; color: var(--ink-2); overflow-y: auto; }
.dlg-body p { margin: 0 0 12px; }
.dlg-body ul { margin: 0 0 10px; padding-left: 18px; }
.dlg-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
}
.dlg-foot .left { margin-right: auto; color: var(--ink-3); font-size: 12px; }

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span, .field > label:first-child { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.field-split { display: flex; justify-content: space-between; }
.field-split output { font: 500 12px var(--mono); color: var(--ink); }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; cursor: pointer; }
.field-row + .field-row { border-top: 1px dashed var(--line); }
.field-row > span:first-child { font-size: 13px; color: var(--ink); }
.field-row small { display: block; margin-top: 1px; font-size: 12px; color: var(--ink-3); }
.input, .select {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    transition: border-color .12s, box-shadow .12s;
}
.select { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a867c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; cursor: pointer; }
.input:focus, .select:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }
textarea.input { height: auto; padding: 8px 10px; font-family: inherit; line-height: 1.5; resize: vertical; }

/* Feedback rating: hovering previews the stars up to the pointer */
.stars { display: flex; gap: 2px; margin-left: -5px; }
.stars button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--line-strong); cursor: pointer; transition: color .1s; -webkit-tap-highlight-color: transparent; }
.stars .i { width: 24px; height: 24px; }
.stars button.on, .stars:hover button { color: var(--warn); }
.stars button.on .i, .stars:hover button .i { fill: currentColor; }
.stars button:hover ~ button { color: var(--line-strong); }
.stars button:hover ~ button .i { fill: none; }
.stars button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.input.mono { font-family: var(--mono); font-size: 12.5px; }
.input-group { display: flex; gap: 6px; }

/* My projects (projects.js): a centred library of projects and share links in this browser */
dialog.lib { width: min(720px, calc(100vw - 32px)); }
dialog.lib > form { height: min(640px, calc(100dvh - 34px)); }
.lib .dlg-head { padding-bottom: 12px; }
.lib-tabs { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.lib-tabs [role="tab"] { position: relative; padding: 9px 12px 11px; border: 0; background: none; color: var(--ink-3); font-weight: 600; font-size: 13px; cursor: pointer; }
.lib-tabs [role="tab"]:hover { color: var(--ink); }
.lib-tabs [role="tab"][aria-selected="true"] { color: var(--ink); }
.lib-tabs [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.lib-tabs .count { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); font: 600 11px/1.5 var(--mono); color: var(--ink-3); }
.lib-tabs .count:empty { display: none; }
.lib-body { flex: 1; min-height: 0; padding-top: 14px; }
.lib-search { position: relative; display: block; margin-bottom: 10px; }
.lib-search .i { position: absolute; left: 10px; top: 50%; translate: 0 -50%; color: var(--ink-3); }
.lib-search .input { padding-left: 32px; }
.lib-list { margin: 0; padding: 0; list-style: none; }
.lib-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; }
.lib-item + .lib-item { border-top: 1px solid var(--line); }
.lib-item:hover { background: var(--surface-2); }
.lib-item.is-expired { opacity: .6; }
.lib-icon { flex: none; width: 28px; height: 28px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.lib-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lib-name { justify-self: start; max-width: 100%; overflow: hidden; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; font-size: 14px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
button.lib-name { cursor: pointer; }
button.lib-name:hover { color: var(--accent); }
.lib-rename { height: 30px; }
.lib-meta { overflow: hidden; font-size: 12px; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
.lib-meta.mono { font-family: var(--mono); }
.lib-badge { justify-self: start; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 11px; font-weight: 600; }
.lib-acts { flex: none; display: flex; align-items: center; gap: 4px; }
.lib-acts .danger:hover:not(:disabled) { background: color-mix(in srgb, var(--err) 10%, transparent); color: var(--err); }
.lib-empty { display: grid; gap: 6px; justify-items: center; padding: 48px 24px; text-align: center; color: var(--ink-3); font-size: 13px; }
.lib-empty strong { color: var(--ink); font-size: 14px; }
.lib-caution { display: flex; gap: 10px; margin: 0 20px 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.lib-caution .i { flex: none; margin-top: 2px; color: var(--warn); }
.lib-caution p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.lib-caution .lib-caution-close { flex: none; width: 26px; height: 26px; margin: -4px -6px -4px 0; }
.lib-caution .lib-caution-close .i { margin: 0; color: var(--ink-3); }
.lib-summary { margin: -6px 0 14px; font-size: 12.5px; color: var(--ink-3); }
.field .optional { font-weight: 500; color: var(--ink-3); }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
@media (max-width: 560px) {
    .lib-item { flex-wrap: wrap; }
    .lib-acts { width: 100%; justify-content: flex-end; }
}
.input-group .btn { height: 36px; }

.share-to { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; font-size: 13px; color: var(--ink-3); }
.socials { display: flex; flex-wrap: wrap; gap: 6px; }
.socials a { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink-2); transition: color .12s, background-color .12s, border-color .12s; }
.socials a:hover { color: var(--ink); border-color: var(--ink-3); background: var(--surface-2); }
.socials .i { width: 16px; height: 16px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 480px) { .grid-2 { grid-template-columns: 1fr; } }

.set-section + .set-section { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.set-section h3 { margin: 0 0 12px; font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); }
.layout-pick { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin-bottom: 14px; }
@media (max-width: 1000px) { .layout-pick .lp-side { display: none; } }
.layout-pick label {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 550;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}
.layout-pick label:hover { border-color: var(--line-strong); }
.layout-pick input { position: absolute; opacity: 0; pointer-events: none; }
.layout-pick label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.layout-pick label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.lp-art { display: flex; gap: 4px; height: 58px; padding: 5px; border-radius: 6px; background: var(--surface-2); }
.lp-v { flex-direction: column; }
.lp-art i { flex: 1; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); }
.lp-art i:last-child { flex: .8; border-color: transparent; background: color-mix(in srgb, var(--ink) 82%, transparent); }
.lp-t { flex-direction: column; }
.lp-t i:first-child { flex: none; width: 45%; height: 9px; border-color: var(--accent); }
.lp-t i:last-child { flex: 1; border-color: var(--line); background: var(--surface); }

.choice { display: grid; gap: 8px; margin-bottom: 16px; }
.choice label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font-weight: 550;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, background-color .12s;
}
.choice label:hover { border-color: var(--line-strong); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label .i { width: 22px; height: 22px; color: var(--ink-3); }
.choice label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
.choice label:has(input:checked) .i { color: var(--accent); }
.choice label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12px; }

.switch { position: relative; width: 36px; height: 22px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background .18s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: translate .18s var(--ease); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { translate: 14px; }
.switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

input[type="range"] { width: 100%; accent-color: var(--accent); }

.callout {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--warn) 12%, transparent);
    color: var(--ink);
    font-size: 13px;
}
.callout .i { width: 16px; height: 16px; color: var(--warn); margin-top: 2px; }
.callout.info { background: var(--surface-2); }
.callout.info .i { color: var(--ink-2); }
.callout.error { background: color-mix(in srgb, var(--err) 10%, transparent); }
.callout.error .i { color: var(--err); }

/* Segmented choice in a dialog, e.g. share link expiry */
.seg-tabs { display: flex; margin: 0; }
.seg-tabs label {
    position: relative;
    flex: 1;
    display: grid;
    place-items: center;
    height: 30px;
    border-radius: 6px;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 550;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s, color .12s, box-shadow .12s;
}
.seg-tabs label:hover { color: var(--ink); }
.seg-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.seg-tabs label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.seg-tabs label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Button busy state: the spinner takes the icon place */
.spinner { display: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.is-loading .spinner { display: block; }
.is-loading .i { display: none; }
.btn.is-loading:disabled { opacity: .75; cursor: progress; }
@keyframes spin { to { rotate: 360deg; } }

/* Checklist of files that are already open (Open from disk) */
.conflict-list { display: grid; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.check { display: flex; align-items: center; gap: 10px; padding: 7px 12px; color: var(--ink); cursor: pointer; accent-color: var(--accent); }
.check input { width: 15px; height: 15px; margin: 0; }
.conflict-list .check { font: 12.5px var(--mono); }
.conflict-list .check + .check { border-top: 1px solid var(--line); }
.conflict-list .check:hover { background: var(--surface-2); }
.check-all { padding: 0 12px 8px; font-size: 12.5px; font-weight: 600; }

.shortcuts { display: grid; grid-template-columns: 1fr auto; margin: 0 0 18px; font-size: 13px; color: var(--ink); }
.shortcuts dt, .shortcuts dd { padding: 8px 0; border-bottom: 1px solid var(--line); }
.shortcuts dd { margin: 0; display: flex; gap: 4px; align-items: center; justify-content: flex-end; color: var(--ink-3); font-size: 12px; }
.shortcuts em { font-style: normal; margin: 0 4px; }

/* ---------- Toasts ---------- */

/* Under the app bar: the bottom of the screen is kept for the sticky footer ad. */
.toasts { position: fixed; left: 50%; top: calc(var(--bar-h) + 12px); translate: -50% 0; z-index: 100; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(460px, calc(100vw - 32px));
    min-height: 42px;
    padding: 8px 10px 8px 14px;
    border-radius: 12px;
    background: var(--ink);
    color: var(--bg);
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    font-weight: 500;
    pointer-events: auto;
    animation: toast-in .22s var(--ease);
}
.toast .i { opacity: .75; }
.toast.ok .i { color: var(--toast-ok); opacity: 1; }
.toast.err .i { color: var(--toast-err); opacity: 1; }
.toast.leave { opacity: 0; translate: 0 -6px; transition: opacity .2s, translate .2s; }
.toast button { margin-left: auto; color: inherit; }
.toast button:hover { background: rgb(128 128 128 / .25); color: inherit; }
.toast > span { padding-right: 4px; }
@keyframes toast-in { from { opacity: 0; translate: 0 -10px; scale: .97; } }

/* Small nudge that points at a button (share after 5 runs) */
.nudge {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 230px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ink);
    color: var(--bg);
    font-size: 12.5px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    z-index: 30;
    animation: pop .2s var(--ease);
}
.nudge::before { content: ""; position: absolute; top: -5px; left: 22px; width: 10px; height: 10px; background: inherit; rotate: 45deg; }

/* Ace's "All editor options" panel and shortcut list are light-only and append to <body>;
   restyle them from the page tokens so their fields aren't black in dark mode. */
html #ace_settingsmenu, html #kbshortcutmenu { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); font: 13px/1.5 var(--ui); accent-color: var(--accent); }
html #ace_settingsmenu select, html #ace_settingsmenu input:not([type="checkbox"]), html #ace_settingsmenu button {
    padding: 2px 6px;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background: var(--surface-2);
    color: var(--ink);
}
html #ace_settingsmenu button:hover { background: var(--surface-3); }
html #ace_settingsmenu button[ace_selected_button="true"] { background: var(--surface-3); border-color: var(--ink-3); box-shadow: none; }
#ace_settingsmenu .ace_optionsMenuEntry:hover { background: var(--surface-2); }
#kbshortcutmenu .ace_optionsMenuKey { color: var(--focus); }
#kbshortcutmenu .ace_optionsMenuCommand { color: var(--ink-2); }

/* ---------- Content below the IDE ---------- */

.content { max-width: 800px; margin: 0 auto; padding: 40px 20px 8px; }
.content h1 { margin: 0 0 14px; font-size: 32px; line-height: 1.2; letter-spacing: -.02em; }
.content h2 { margin: 40px 0 12px; font-size: 22px; line-height: 1.3; letter-spacing: -.01em; }
.content p, .content li { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; }
.content a { color: var(--accent); }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; padding: 0; list-style: none; }
.features li { padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 15px; line-height: 1.55; }
.features strong { display: block; color: var(--ink); margin-bottom: 2px; }
.content .lead { font-size: 18.5px; line-height: 1.65; color: var(--ink-2); }
.content h3 { margin: 24px 0 6px; font-size: 17.5px; color: var(--ink); }
.content kbd { padding: 1px 5px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface-2); font: 500 12px/1.4 var(--mono); }
.steps { padding-left: 22px; }
.steps li { padding-left: 4px; margin-bottom: 4px; }
.code-sample { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); font: 14.5px/1.65 var(--mono); color: var(--ink); tab-size: 4; }
.code-sample code { display: block; padding: 14px 16px; overflow-x: auto; font: inherit; }
/* ide.js colours the sample with the editor theme (Ace static highlight): the theme paints the block */
.code-sample.is-highlighted code { padding: 0; }
.code-sample .ace_static_highlight { padding: 14px 16px 14px 0; overflow-x: auto; white-space: pre; font: inherit; }
/* line numbers: Ace places them absolutely inside each line's left padding */
.code-sample .ace_static_highlight.ace_show_gutter .ace_line { padding-left: 3.6em; }
.code-sample .ace_static_highlight .ace_gutter { width: 2.4em; padding: 0; margin: 0; background: none; opacity: .5; }
.faq h3:first-child { margin-top: 8px; }
.related { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.related a { display: inline-block; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 15px; text-decoration: none; }
.related a:hover { border-color: var(--accent); }
.content .lang-card, .content .lang-card:visited { color: var(--ink); }
.lang-card small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); }

.site-foot { margin-top: 40px; border-top: 1px solid var(--line); background: var(--surface); }
.site-foot-inner { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 28px 48px; max-width: 1100px; margin: 0 auto; padding: 32px 20px 24px; }
.foot-about p { margin: 12px 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
.foot-site { display: flex; flex-direction: column; gap: 7px; }
.foot-site a, .foot-group a { color: var(--ink-2); font-size: 13.5px; text-decoration: none; }
.foot-site a:hover, .foot-group a:hover { color: var(--ink); text-decoration: underline; }
/* CSS columns, not a grid: each language's links stay together and the groups read top to bottom */
.foot-langs { columns: 4 150px; column-gap: 32px; }
.foot-group { break-inside: avoid; margin-bottom: 20px; }
.foot-group ul { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.foot-group .foot-title { margin-bottom: 9px; }
.foot-title { margin: 0 0 12px; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
@media (max-width: 720px) { .site-foot-inner { grid-template-columns: 1fr; } }
.legal a { color: var(--ink-2); text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal .push { margin-left: auto; }
.legal .report-link { color: var(--ink-3); }

/* Static pages (about, privacy, terms) */
.doc { max-width: 760px; margin: 0 auto; padding: 40px 20px; }
.doc h1 { font-size: 32px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 18px; }
.doc h2, .doc h3 { margin: 36px 0 10px; letter-spacing: -.01em; }
.doc h2 { font-size: 22px; }
.doc p, .doc li { color: var(--ink-2); font-size: 16.5px; line-height: 1.75; }
.doc a { color: var(--accent); }
.doc .updated { margin-top: -8px; font-size: 13.5px; color: var(--ink-3); }
.lang-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.lang-table th, .lang-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.lang-table th { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.lang-table td { color: var(--ink-2); }

/* 404 */
.not-found { max-width: 860px; text-align: center; padding-top: 64px; padding-bottom: 72px; }
.not-found-code { margin: 0 0 8px; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--accent); }
.doc.not-found h1 { font-size: clamp(28px, 4vw, 38px); }
.not-found-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 40px; }
.doc .not-found-actions .btn { color: var(--ink); }
.doc .not-found-actions .btn-primary { color: var(--bg); }
.not-found h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.lang-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.doc .lang-cards li { margin: 0; }
.lang-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 550; transition: border-color .12s, transform .12s; }
.doc .lang-card { color: var(--ink); }
.lang-card:hover { border-color: var(--ink); transform: translateY(-1px); }
.lang-card img { width: 22px; height: 22px; }


/* ---------- Small screens ---------- */

.narrow-only { display: none !important; }
.text-short { display: none; }

@media (max-width: 1240px) {
    .hide-lg { display: none !important; }
}
@media (max-width: 1000px) {
    .wide-only { display: none !important; }
    .narrow-only { display: block !important; }
    .share-wrap { margin-right: auto; }
    /* the Code / Output switch spans the width, half each */
    .views { align-self: stretch; }
    .view-btn { flex: 1; justify-content: center; height: 30px; }
}
@media (max-width: 640px) {
    .appbar { padding: 0 8px; gap: 6px; }
    .appbar .brand-name, .lang-label, .share-label, .run-kbd { display: none; }
    .run { grid-template-columns: auto auto; }
    .brand { margin-right: 2px; padding-right: 0; }
    .lang-btn { min-width: 0; }
    .share-btn { width: 34px; padding: 0; justify-content: center; }
    .run { padding: 0 16px; }
    .lang-menu { position: fixed; top: calc(var(--bar-h) + 4px); left: 8px; right: 8px; width: auto; }
    .workspace { padding: 6px; min-height: 0; }
    .views { margin-bottom: 6px; }
    /* Stacked on a phone: no gutter, fixed heights, the page scrolls */
    [data-layout="vertical"] .workspace { height: auto; }
    [data-layout="vertical"] #editor-pane { height: 55vh; margin-bottom: 6px; }
    [data-layout="vertical"] #output-pane { height: 45vh; }
    /* Phones: shorter status texts instead of dropping information */
    .text-full { display: none; }
    .text-short { display: inline; }
    .pill { max-width: 40vw; }
    [data-layout="tabs"] .out-title { display: none; }
    .statusbar { padding: 0 4px; }
    .sb-item { padding: 0 5px; }
    .content h1 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Bar on the static pages */
.appbar.site-bar { display: flex; gap: 6px; }
.site-bar .bar-spacer { flex: 1; }
@media (hover: none) { .term-empty .keys { display: none; } }
.dlg-body .foot-title { margin-top: 20px; color: var(--ink); font-size: 12.5px; }
.dlg-body .foot-title:first-child { margin-top: 0; }