/* =============================================================
   ListShift - style.css
   Light-first, dark via [data-theme="dark"]. All theme-dependent
   values are CSS variables; never hardcode colours in rules.
   ============================================================= */

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ─── Tokens - light (default) ──────────────────────────────── */
:root {
    color-scheme: light dark;

    /* Brand */
    --primary: #4648d4;
    /* Deepened from #eef0ff - the old value was visually identical to --bg
       (#f7f7fb), so primary-soft tiles vanished when they weren't sitting on
       a pure-white surface. This shade stays subtle on white but is still
       visible against the page background. */
    --primary-hover: #3a3cbf;
    --primary-soft: #e0e4ff;
    --primary-ring: rgba(70, 72, 212, 0.18);
    --primary-grad: linear-gradient(135deg, #5b5de6 0%, #4648d4 100%);
    --upgrade-grad:
        radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.12) 0%, transparent 55%),
        linear-gradient(125deg, #2e2fb8 0%, #3a48c8 32%, #1a6f9a 68%, #00645a 100%);
    --accent: #00a693;

    /* Surfaces */
    --bg: #f7f7fb;
    --surface: #ffffff;
    --surface-alt: #f0f1f7;
    --surface-sunken: #eceef5;
    --surface-elevated: #ffffff;

    /* Text */
    --text: #0d1124;
    --text-muted: #5a5e72;
    --text-faint: #8a8ea0;

    /* Borders / dividers */
    --border: #e5e6f0;
    --border-strong: #d3d5e2;
    --ring: rgba(70, 72, 212, 0.22);

    /* Status */
    --live: #00a693;
    --warn: #e1a300;
    --error: #d43f3f;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(13, 17, 36, 0.04), 0 1px 1px rgba(13, 17, 36, 0.03);
    --shadow-md: 0 4px 14px rgba(13, 17, 36, 0.06), 0 2px 4px rgba(13, 17, 36, 0.04);
    --shadow-lg: 0 18px 40px rgba(13, 17, 36, 0.08), 0 4px 12px rgba(13, 17, 36, 0.04);
    --shadow-primary: 0 10px 30px rgba(70, 72, 212, 0.22);

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* Fonts */
    --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

    /* Layout */
    --container: 1280px;
    --container-wide: 1520px;
    --container-narrow: 820px;
    --header-h: 64px;
}

[data-theme="dark"] {
    --primary: #8688ff;
    --primary-hover: #a0a2ff;
    --primary-soft: rgba(134, 136, 255, 0.12);
    --primary-ring: rgba(134, 136, 255, 0.28);
    --primary-grad: linear-gradient(135deg, #7e80ff 0%, #5a5cf0 100%);
    --upgrade-grad:
        radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.1) 0%, transparent 55%),
        linear-gradient(125deg, #3a3cc6 0%, #4252d8 32%, #1a7c9e 68%, #067268 100%);
    --accent: #4fdbc8;

    --bg: #0b0c14;
    --surface: #14151f;
    --surface-alt: #1a1c28;
    --surface-sunken: #0f1019;
    --surface-elevated: #1c1e2c;

    --text: #e8e9f1;
    --text-muted: #9a9db2;
    --text-faint: #6a6d82;

    --border: #272a3b;
    --border-strong: #343853;
    --ring: rgba(134, 136, 255, 0.35);

    --live: #4fdbc8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.45);
    --shadow-primary: 0 10px 40px rgba(134, 136, 255, 0.25);
}

/* Prevent theme-swap flash. */
.no-transitions, .no-transitions *, .no-transitions *::before, .no-transitions *::after {
    transition: none !important;
}

/* ─── Base ──────────────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    padding-top: var(--header-h);
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text);
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.skip-link {
    position: absolute;
    left: 16px;
    top: -80px;
    background: var(--primary);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-weight: 600;
    z-index: 200;
    transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

/* ─── Icons ─────────────────────────────────────────────────── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ─── Header ────────────────────────────────────────────────── */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--header-h);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    z-index: 50;
}
.site-header__inner {
    height: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.site-logo { display: inline-flex; align-items: center; }
.site-logo__dark { display: none; }
[data-theme="dark"] .site-logo__light { display: none; }
[data-theme="dark"] .site-logo__dark { display: inline-flex; }

.site-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Apps-launcher menu - replaces inline top nav. */
.app-menu-wrap { position: relative; }
.app-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
    box-shadow: var(--shadow-lg);
    z-index: 200;
    grid-template-columns: repeat(3, 88px);
    gap: 6px;
}
.app-menu.open { display: grid; }
.app-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    transition: background 0.15s ease;
}
.app-menu-item:hover { background: var(--primary-soft); }
.app-menu-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: var(--radius-md);
}
.app-menu-icon .material-symbols-outlined { font-size: 22px; }

@media (max-width: 730px) {
    .app-menu {
        max-height: 70vh;
        overflow-y: auto;
        grid-template-columns: repeat(3, 76px);
    }
}

.cmdk-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 12px 0 10px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 13px;
    min-width: 220px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.cmdk-trigger:hover { background: var(--surface); border-color: var(--border-strong); }
.cmdk-trigger__label { margin-right: auto; }
.cmdk-trigger kbd {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.cmdk-trigger kbd + kbd { margin-left: 3px; }

.icon-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.icon-btn:hover {
    background: var(--surface-alt);
    border-color: var(--border-strong);
    color: var(--text);
}
.icon-btn[aria-expanded="true"] {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
}


.theme-icon--dark { display: none; }
[data-theme="dark"] .theme-icon--light { display: none; }
[data-theme="dark"] .theme-icon--dark { display: inline-flex; }

@media (max-width: 880px) {
    .cmdk-trigger__label, .cmdk-trigger kbd { display: none; }
    .cmdk-trigger { min-width: 0; padding: 0 10px; }
}

/* ─── Hero ──────────────────────────────────────────────────── */
.hero {
    padding: 56px 0 40px;
    background:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 55%),
        radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%);
}
.hero--workspace { padding-top: 32px; padding-bottom: 48px; }
.hero--tool { padding-top: 28px; padding-bottom: 32px; }

.workspace-hero-icon {
    width: 64px; height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 18px;
    flex-shrink: 0;
}
.workspace-hero-icon .material-symbols-outlined { font-size: 32px; }

/* Tool pages: icon sits to the left of the H1 rather than stacked above it,
   to claw back vertical space now that the editor sits directly below. */
.hero__title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 16px;
}
.hero__title-row .workspace-hero-icon {
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--primary);
}
.hero__title-row .workspace-hero-icon .material-symbols-outlined { font-size: 26px; }
.hero__title-row .hero__title { margin-bottom: 0; text-align: left; line-height: 1.1; }
@media (max-width: 640px) {
    .hero__title-row { gap: 14px; }
    .hero__title-row .workspace-hero-icon {
        width: 44px; height: 44px; border-radius: 12px;
    }
    .hero__title-row .workspace-hero-icon .material-symbols-outlined { font-size: 22px; }
}
.workspace-hero-keywords {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}
.workspace-hero-keywords__label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-right: 4px;
}
.tool-grid--roomy { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

.hero__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 36px;
}
/* Tool + workspace hero heads host the icon+H1 row inline, so they need more
   horizontal room to stay on one line. Lede inside keeps its own 620px cap
   for readability. */
.hero--tool .hero__head,
.hero--workspace .hero__head { max-width: 1100px; }
.hero__eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-soft);
    padding: 6px 12px;
    border-radius: 999px;
    letter-spacing: 0.01em;
    margin-bottom: 18px;
}
.hero__title {
    font-size: clamp(32px, 4.4vw, 52px);
    margin-bottom: 16px;
}
/* Typewriter hero headline on homepage.
   Structure: inline-grid slot stacks a hidden "ghost" copy of the final text
   and the visible "typewriter" span in the same grid cell. The slot sizes to
   the ghost's full width + height from first paint, so the typewriter growing
   underneath never pushes siblings down - even when the text would wrap to
   two lines. Inherited text-align: center keeps each line centred. */
.hero__title[data-typewriter] .hero__typewriter-slot {
    display: inline-grid;
    grid-template-areas: "content";
    max-width: 100%;
    vertical-align: top;
}
.hero__title[data-typewriter] .hero__typewriter-ghost,
.hero__title[data-typewriter] .hero__typewriter {
    grid-area: content;
    white-space: pre-wrap;
}
.hero__title[data-typewriter] .hero__typewriter-ghost {
    visibility: hidden;
}
/* Inline caret element - repositioned by JS during the type/fix phases so it
   can sit mid-word during the c -> C fix beat. */
.hero__caret-inline {
    display: inline-block;
    width: 3px;
    height: 0.9em;
    vertical-align: -0.05em;
    margin: 0 0.04em;
    background: var(--primary);
    animation: hero-caret-blink 1s steps(2, start) infinite;
    border-radius: 1px;
}
@keyframes hero-caret-blink {
    to { opacity: 0; }
}

/* "clean" highlight during the fix beat - a soft selection flash, then a
   warmer tint once the uppercase C lands, then removed on phase 4. */
.hero__fix {
    background: var(--primary-soft);
    padding: 0 3px;
    border-radius: 4px;
    animation: hero-fix-flash 0.5s ease both;
}
.hero__fix--done {
    background: rgba(79, 219, 200, 0.24); /* same family as --accent */
    animation: hero-fix-done 0.45s ease both;
}
@keyframes hero-fix-flash {
    0%   { background: transparent; }
    40%  { background: var(--primary-soft); }
    100% { background: var(--primary-soft); }
}
@keyframes hero-fix-done {
    0%   { background: var(--primary-soft); transform: scale(1); }
    30%  { background: rgba(79, 219, 200, 0.45); transform: scale(1.015); }
    100% { background: rgba(79, 219, 200, 0.24); transform: scale(1); }
}

.hero__accent {
    background: linear-gradient(120deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Fallback for older browsers that don't support background-clip: text. */
    font-weight: 800;
}
.hero__lede {
    font-size: 17px;
    color: var(--text-muted);
    max-width: 620px;
    margin: 0 auto;
}

.crumbs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 18px;
}
.crumbs .material-symbols-outlined { font-size: 16px; }
.crumbs a:hover { color: var(--primary); }
.crumbs--center { justify-content: center; display: flex; margin-left: auto; margin-right: auto; }

.hero__samples { margin-top: 44px; }
.hero__examples {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}
.hero__examples-label {
    font-weight: 600;
    color: var(--text);
    margin-right: 4px;
}
.pill-btn {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
    transition: all 0.15s ease;
}
.pill-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }

/* ─── Editor ────────────────────────────────────────────────── */
/* Three columns at equal height (middle column between input/output).
   `height` is fixed - not min/max - so adding content NEVER grows the
   container. The viewport-aware min(...) shrinks it on short screens so the
   editor still fits without pushing the footer off-screen. Panels fill the
   fixed height via grid-template-rows: minmax(0, 1fr), and the textareas
   scroll internally when content overflows. */
.editor {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px 16px;
    align-items: stretch;
    margin: 0 auto;
    height: min(712px, calc(100vh - 160px));
}
.editor > .editor__pipeline-bar { grid-column: 1 / -1; }

/* Tool-mode editor uses the same 3-column grid as the homepage -
   universal rail in the middle, same 96px width everywhere. */
.editor[data-mode="tool"] { height: min(692px, calc(100vh - 200px)); }
.editor__panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.editor__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}
.editor__panel-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.editor__panel-pill {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
}
.editor__panel-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.chip-btn:hover { background: var(--primary-soft); color: var(--primary); }
.chip-btn--ghost { background: transparent; }
.chip-btn--ghost:hover { background: var(--surface-alt); color: var(--text); }
.chip-btn--active { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.chip-btn--active:hover { background: var(--primary-soft); color: var(--primary); }
.chip-btn .material-symbols-outlined { font-size: 16px; }

/* Line wrap mode - replace the default pre whitespace model with pre-wrap +
   word-break so long items fold instead of horizontally scrolling. Persists
   across tool pages via localStorage, applied before editor init.
   The line-number gutter is hidden in wrap mode because a data line that
   wraps to N visual rows would still have only one number in the gutter,
   causing misalignment. Trading off numbers for readability. */
.editor--wrapped .editor__textarea {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.editor--wrapped .editor__code { grid-template-columns: 1fr; }
.editor--wrapped .editor__lines { display: none; }

/* Code grid: line numbers column + textarea. */
.editor__code {
    flex: 1;
    display: grid;
    grid-template-columns: 44px 1fr;
    background: var(--surface);
    min-height: 0;
    overflow: hidden;
}
.editor__lines {
    background: var(--surface-sunken);
    /* Extra right padding so the numbers don't butt up against the focus ring
       that appears on the textarea next door when it's focused. */
    padding: 14px 14px 14px 0;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 22px;
    color: var(--text-faint);
    user-select: none;
    overflow: hidden;
    white-space: pre;
}
.editor__textarea {
    padding: 14px 16px;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    /* min-height: 0 lets the textarea shrink below its intrinsic content
       size so the grid row cap wins when content exceeds the viewport.
       Native textarea overflow handles scrolling inside. */
    min-height: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 22px;
    color: var(--text);
    white-space: pre;
    /* Wider tab stops so TSV/xls previews line up visually instead of jumping
       to inconsistent positions (the default 8-char stop means tabs after
       6-char and 9-char items land in different columns). */
    tab-size: 20;
    -moz-tab-size: 20;
    overflow-wrap: normal;
    overflow: auto;
    scrollbar-width: thin;
}
.editor__textarea::placeholder { color: var(--text-faint); }
.editor__textarea--output { color: var(--text); }

.editor__status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--surface-sunken);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.editor__status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--text-faint);
}
.editor__status-dot--live {
    background: var(--live);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 20%, transparent);
}

/* ─── Action bar (middle column) ──────────────────────────────
   Two-zone layout: tool-specific options on top (when a page has any),
   universal Sort + Undo + Redo + upgrade CTA at the bottom. Uniform
   190px across every editor - homepage and tool pages look identical.
   ──────────────────────────────────────────────────────────── */
.editor__actions {
    width: 190px;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden; /* clips the flush-bottom upgrade block to the rounded corners */
}

/* Content zone for options + universal core. Scrolls internally when a
   tool has more options than fit in the fixed editor height (csv_parse,
   replace, etc.). Keeps the editor box itself at a predictable size. */
.editor__actions-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Upgrade CTA - pinned to the bottom of the action bar. Edge-to-edge so the
   parent's overflow:hidden rounds the bottom-left/right corners for us.
   One layout across every editor (action bar is a uniform 190px site-wide). */
.editor__upgrade {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 14px;
    background: var(--upgrade-grad);
    color: #fff;
    text-align: left;
    transition: filter 0.15s ease, transform 0.12s ease;
    box-shadow: 0 -4px 12px rgba(70, 72, 212, 0.18);
}
.editor__upgrade:hover { filter: brightness(1.06); }
.editor__upgrade:active { transform: translateY(1px); }
.editor__upgrade-icon {
    width: 28px; height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 18px;
}
.editor__upgrade-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.editor__upgrade-title {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.editor__upgrade-sub {
    font-size: 10px;
    opacity: 0.92;
    line-height: 1.3;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.editor__actions-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.editor__actions-group--options { gap: 10px; }
/* Core group (Sort / Wrap / Undo / Redo) lays out as a 2-column grid so the
   four buttons pair up (Sort+Wrap view toggles on top, Undo+Redo history
   below). Keeps the action bar half as tall - useful on option-heavy tools
   where vertical room is tight. */
.editor__actions-group--core {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.editor__actions-group--core .editor__actions-label { grid-column: 1 / -1; }
.editor__actions-label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 0 2px;
    margin-bottom: 2px;
}
.editor__actions-divider {
    height: 1px;
    background: var(--border);
    margin: 2px 6px;
}

/* Universal core buttons - same visual language across homepage and tool pages. */
.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.action-btn .material-symbols-outlined { font-size: 22px; }
.action-btn:hover { background: var(--primary-soft); color: var(--primary); }
.action-btn:active { transform: scale(0.96); }
.action-btn.is-active {
    background: var(--primary-grad);
    color: #fff;
    box-shadow: var(--shadow-primary);
}
.action-btn.is-active:hover { color: #fff; }

/* Sort button states - a 3-state cycle (off → asc → desc → off). */
.action-btn[data-sort-state="asc"],
.action-btn[data-sort-state="desc"] {
    background: var(--primary-grad);
    color: #fff;
    box-shadow: var(--shadow-primary);
}
.action-btn[data-sort-state="asc"] [data-sort-icon],
.action-btn[data-sort-state="desc"] [data-sort-icon] { color: #fff; }

/* Undo button disabled state. */
.action-btn[disabled] {
    opacity: 0.4;
    pointer-events: none;
}

/* Tool-option controls - compact, label above control. */
.action-opt {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    color: var(--text);
}
.action-opt > span {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.action-opt--toggle {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    padding: 5px 0;
    min-width: 0; /* allow the label span below to truncate */
}
/* On narrow viewports the options grid gives each toggle a wide cell, so
   space-between leaves a huge gap between the label and the pill. Pin the
   label next to the toggle instead. */
@media (max-width: 720px) {
    .action-opt--toggle { justify-content: flex-start; }
    .action-opt--toggle > span:not(.toggle) { flex: 0 1 auto; }
}
/* Label sits left of the pill toggle; single-line with graceful truncation. */
.action-opt--toggle > span:not(.toggle) {
    flex: 1 1 auto;
    min-width: 0;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Pill toggle - input is hidden; .toggle__slider is the visible control.
   The slider's ::before pseudo is the moving circle (input can't have ::before). */
.toggle {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
    flex-shrink: 0;
}
.toggle input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}
.toggle__slider {
    position: absolute;
    inset: 0;
    background: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.toggle__slider::before {
    content: '';
    position: absolute;
    top: 1px; left: 1px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.toggle input:checked ~ .toggle__slider {
    background: var(--primary);
    border-color: var(--primary);
}
.toggle input:checked ~ .toggle__slider::before { transform: translateX(14px); }
.toggle input:focus-visible ~ .toggle__slider { box-shadow: 0 0 0 3px var(--primary-ring); }
.action-opt select,
.action-opt--text input {
    width: 100%;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface-alt);
    color: var(--text);
    font-size: 12px;
}
.action-opt select:focus,
.action-opt--text input:focus {
    outline: 2px solid var(--primary-ring);
    outline-offset: 0;
    border-color: var(--primary);
}

@media (max-width: 960px) {
    .editor,
    .editor[data-mode="tool"] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        height: auto;
    }
    .editor__panel { height: 380px; }

    /* Keep the action bar as a single vertical stack so Options → Core → Upgrade
       flow in reading order. The inner groups go grid for compact layout.
       overflow:hidden stays inherited from desktop so the Plus upgrade block
       gets clipped to the rounded bottom corners. */
    .editor__actions {
        width: 100%;
        flex-direction: column;
    }
    .editor__actions-scroll {
        padding: 12px;
        gap: 14px;
        overflow: visible;
    }
    .editor__actions-divider { display: none; }

    /* Options: two per row on phones, three on tablets. Each option keeps its
       column flex layout (label on top, control under). */
    .editor__actions-group--options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 14px;
    }
    .editor__actions-group--options .editor__actions-label { grid-column: 1 / -1; }

    /* Core buttons: 4 across on one row (Sort / Wrap / Undo / Redo). */
    .editor__actions-group--core { grid-template-columns: repeat(4, 1fr); }
    .action-btn { width: 100%; }

    /* Upgrade pinned to the bottom of the action bar - don't let flex-wrap
       scatter it into the middle of the controls. */
    .editor__upgrade { margin-top: 0; }

    /* Give the hero-try pills real breathing room so they don't sit flush against
       the editor's bottom edge and read as if they belong to the output panel. */
    .hero-try { margin-top: 24px; }
}

@media (min-width: 541px) and (max-width: 960px) {
    /* Three columns for options on tablets - more horizontal room. */
    .editor__actions-group--options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ─── Hero try/reverse links (tool pages) ──────────────────── */
.hero-try {
    max-width: var(--container-wide);
    margin: 20px auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
}
.hero-try__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.hero-try__link .material-symbols-outlined { font-size: 16px; color: var(--primary); }
.hero-try__link:hover { border-color: var(--primary); background: var(--primary-soft); }
.hero-try__link--reverse { background: var(--primary-soft); border-color: transparent; font-weight: 600; }
.hero-try__link--reverse strong { font-weight: 700; }

/* ─── Tool content blocks (how-to / example / FAQ / side) ──── */
.tool-content { padding: 64px 0; }
.tool-content__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: start;
}
.tool-content__main { min-width: 0; }
.tool-section {
    margin-bottom: 48px;
    scroll-margin-top: 80px;
}
.tool-section h2 {
    font-size: 26px;
    margin-bottom: 14px;
}
.tool-section__lede { color: var(--text-muted); margin-bottom: 18px; }

/* Paragraph spacing inside tool-sections (Privacy Policy, Plus, etc.).
   Global reset zeros <p> margin, so re-add it here. Last paragraph trims
   trailing space so section spacing stays consistent. */
.tool-section > p { margin-bottom: 14px; line-height: 1.6; }
.tool-section > p:last-child { margin-bottom: 0; }

/* Bare <ul>/<ol> inside a tool-section (e.g. Privacy Policy). The global
   reset zeros all list margin/padding, so we re-add them explicitly here. */
.tool-section > ul,
.tool-section > ol {
    margin: 14px 0 20px;
    padding-left: 28px;
    list-style: disc;
    line-height: 1.65;
}
.tool-section > ol { list-style: decimal; }
.tool-section > ul > li,
.tool-section > ol > li {
    margin-bottom: 8px;
    color: var(--text);
}
.tool-section > ul > li:last-child,
.tool-section > ol > li:last-child { margin-bottom: 0; }

/* SEO intro - longer-form paragraph block under the editor. Kept airy so it
   doesn't compete with the tool itself for attention. */
.tool-section--intro p {
    color: var(--text);
    line-height: 1.7;
    margin-bottom: 14px;
    font-size: 16px;
    max-width: 72ch;
}
.tool-section--intro p:last-child { margin-bottom: 0; }

/* What [tool] can do / Who uses the tool - plain H3 + paragraph rhythm so
   the page doesn't turn into a wall of cards. Matches the tone of the intro
   + FAQ blocks. */
.tool-section--capabilities h3,
.tool-section--use-cases h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-top: 22px;
    margin-bottom: 6px;
}
.tool-section--capabilities h3:first-of-type,
.tool-section--use-cases h3:first-of-type { margin-top: 8px; }
.tool-section--capabilities p,
.tool-section--use-cases p {
    color: var(--text-muted);
    line-height: 1.65;
    max-width: 72ch;
    margin-bottom: 0;
}

/* Options reference table - horizontal overflow on mobile, tonal zebra rows. */
.settings-table__wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.settings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.settings-table th,
.settings-table td {
    text-align: left;
    padding: 10px 14px;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}
.settings-table th {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface-alt);
}
.settings-table tbody tr:last-child td { border-bottom: 0; }
.settings-table td:first-child {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
}
.settings-table tbody tr:nth-child(even) td { background: var(--surface-alt); }

/* Narrow viewports: stack each row as a labelled card. The column header
   projects in front of each cell via data-label (added by tool.php). */
@media (max-width: 720px) {
    .settings-table__wrap {
        overflow-x: visible;
        border: 0;
        background: transparent;
        border-radius: 0;
    }
    .settings-table { display: block; font-size: 14px; }
    .settings-table thead { display: none; }
    .settings-table tbody { display: block; }
    .settings-table tr {
        display: block;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 4px 12px 10px;
        margin-bottom: 10px;
    }
    .settings-table tbody tr:nth-child(even) td,
    .settings-table tbody tr:nth-child(even) { background: var(--surface); }
    .settings-table td {
        display: block;
        padding: 8px 0 2px;
        border-bottom: 0;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        max-width: none;
    }
    .settings-table td::before {
        content: attr(data-label);
        display: block;
        font-family: var(--font-display);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 4px;
    }
    .settings-table td:first-child {
        font-family: var(--font-mono);
        font-size: 13px;
        font-weight: 600;
        white-space: normal;
    }
    /* Keyboard shortcuts table has only <kbd>+description; keep the narrow layout
       but scrap the label since it would repeat. */
    .shortcuts-table td::before { display: none; }
}

/* Keyboard shortcuts table - styled <kbd> pills and a small Plus-link pill
   in the Tier column so the gating is clear without shouting. */
.tool-section--shortcuts kbd {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 4px;
    background: var(--surface-alt);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text);
    line-height: 1.4;
    box-shadow: 0 1px 0 rgba(13, 17, 36, 0.04);
}
.shortcuts-table td:first-child { white-space: nowrap; }
.shortcuts-table td:last-child a {
    display: inline-block;
    padding: 2px 8px;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.shortcuts-table td:last-child a:hover { background: var(--primary); color: #fff; }
.shortcut-plus-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: middle;
}
.shortcut-plus-badge:hover { background: var(--primary); color: #fff; }
body.is-plus a.shortcut-plus-badge,
body.is-plus .shortcuts-table a.shortcut-plus-badge { display: none; }
.tool-section__plus-link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.tool-section__plus-link:hover { text-decoration-thickness: 2px; }

.steps { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.steps li {
    display: flex; gap: 14px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 14px 18px;
    border-radius: var(--radius-md);
}
.steps__num {
    flex: 0 0 28px;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 700;
    font-size: 13px;
}
.steps li span:last-child { line-height: 1.55; color: var(--text); }

.example-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.example-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.example-card--out { border-color: var(--primary); }
.example-card__head {
    padding: 10px 14px;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.example-card--out .example-card__head { color: var(--primary); }
.example-card { display: flex; flex-direction: column; }
.example-card__body {
    padding: 14px 18px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
    /* Wrap long lines instead of scrolling. Guarantees every worked example
       sits at a fixed-for-the-content height and both cards stay equal. */
    white-space: pre-wrap;
    word-break: break-word;
    overflow: hidden;
    background: var(--surface);
    margin: 0;
    flex: 1 1 auto;
}

.faq { display: flex; flex-direction: column; gap: 10px; }
.faq__item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.faq__item[open] { border-color: var(--border); box-shadow: none; }
.faq__item summary {
    padding: 14px 18px;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    position: relative;
    padding-right: 44px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.15s ease;
    color: var(--text-muted);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(180deg); color: var(--primary); }
.faq__body { padding: 0 18px 16px; color: var(--text-muted); line-height: 1.7; }

/* Inline anchor styling for prose-rendered detail fields (FAQ answers, how-to
   steps, capability bodies, settings rows, etc. rendered via detail_text()).
   Scoped tight so it does not touch class-styled links like .side-list a or
   .hero-try__link. */
.hero__lede a,
.faq__body a,
.tool-section > p a,
.tool-section > ul a,
.tool-section > ol a,
.tool-section__lede a,
.tool-section h3 + p a,
.settings-table td a,
.steps li a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.hero__lede a:hover,
.faq__body a:hover,
.tool-section > p a:hover,
.tool-section > ul a:hover,
.tool-section > ol a:hover,
.tool-section__lede a:hover,
.tool-section h3 + p a:hover,
.settings-table td a:hover,
.steps li a:hover { text-decoration-thickness: 2px; }

.keyword-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.keyword-chip {
    padding: 6px 12px;
    background: var(--surface-alt);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-muted);
    transition: background 0.15s ease, color 0.15s ease;
}
/* Linked variant - used on workspace hero where each chip jumps to a tool.
   Hover state telegraphs that it's clickable, the static span variant on
   tool.php "also known as" stays the plain chip. */
a.keyword-chip {
    text-decoration: none;
    cursor: pointer;
}
a.keyword-chip:hover,
a.keyword-chip:focus-visible {
    background: var(--primary-soft);
    color: var(--primary);
}

.tool-content__side { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px; }
.side-card {
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.side-card h3 {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.side-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.side-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text);
    transition: background 0.1s ease, color 0.1s ease;
}
.side-list a:hover { background: var(--primary-soft); color: var(--primary); }
.side-list .material-symbols-outlined { font-size: 17px; color: var(--text-muted); }
.side-list a:hover .material-symbols-outlined { color: var(--primary); }
.side-card__all {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}
.side-card__all:hover { text-decoration: underline; }

@media (max-width: 1000px) {
    .tool-content__grid { grid-template-columns: 1fr; gap: 32px; }
    .tool-content__side { position: static; }
    .example-grid { grid-template-columns: 1fr; }
}

/* ─── Sections ─────────────────────────────────────────────── */
.section { padding: 72px 0; }
/* Top padding is smaller than bottom because the preceding section
   (.tool-content) already contributes 64px of its own bottom padding, so
   the visual "air" above the h2 = 64 + 48 = 112px. Match that below the
   grid so the section reads as vertically centred. */
/* Top padding is smaller than bottom on purpose: the preceding .tool-content
   already contributes 64px of its own bottom padding, so the visual air above
   the H2 is 64 + 48 = 112px, matching the 112px below the grid. */
.section--tinted { background: var(--surface-alt); padding: 48px 0 112px; }
.section--tinted .section__head { margin-bottom: 24px; }

.section__head {
    margin: 0 auto 32px;
    text-align: center;
    max-width: 620px;
}
.section__head h2 {
    font-size: clamp(24px, 3vw, 34px);
    margin-bottom: 8px;
}
.section__head p { color: var(--text-muted); }
.section__head--split {
    text-align: left;
    max-width: none;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* ─── Hub grid ─────────────────────────────────────────────── */
.workspace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
/* Tool/workspace pages render 5 cards (the 6 workspaces minus the current);
   force them onto one row on wide screens so the section doesn't leave a
   tall band of blank tinted background below the grid. */
.section--tinted .workspace-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 1100px) {
    .section--tinted .workspace-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .section--tinted .workspace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Compact vertical variant for the 5-up "Explore another workspace" row.
   Icon centered on top, title below, count pill at the bottom. Drop the
   description - it's redundant on cross-sell cards and caused ragged heights. */
.section--tinted .workspace-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 20px 14px 16px;
}
.section--tinted .workspace-card__icon { width: 44px; height: 44px; border-radius: 12px; }
.section--tinted .workspace-card__icon .material-symbols-outlined { font-size: 22px; }
.section--tinted .workspace-card__body { flex: 0 0 auto; width: 100%; }
.section--tinted .workspace-card__body h3 { font-size: 15px; margin-bottom: 4px; }
.section--tinted .workspace-card__body p { display: none; }
.section--tinted .workspace-card__count {
    display: inline-block;
    margin-top: 2px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 0.08em;
}
.section--tinted .workspace-card__arrow { display: none; }
.section--tinted .workspace-card:hover .workspace-card__count { background: var(--primary-soft); color: var(--primary); }

.workspace-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
}
.workspace-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}
.workspace-card__icon {
    width: 48px; height: 48px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--primary);
}
.workspace-card__icon .material-symbols-outlined { font-size: 24px; }
.workspace-card__body { flex: 1; min-width: 0; }
.workspace-card__body h3 { font-size: 17px; margin-bottom: 2px; }
.workspace-card__body p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}
.workspace-card__count {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
}
.workspace-card__arrow {
    font-size: 20px;
    color: var(--text-faint);
    transition: transform 0.15s ease, color 0.15s ease;
}
.workspace-card:hover .workspace-card__arrow { transform: translateX(4px); color: var(--primary); }

/* ─── Tool grid ────────────────────────────────────────────── */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.tool-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.15s ease;
}
.tool-card:hover {
    transform: translateY(-1px);
    border-color: var(--primary);
    background: var(--primary-soft);
}
.tool-card__icon {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--surface-alt);
    color: var(--primary);
    font-size: 18px;
    margin-bottom: 4px;
}
.tool-card:hover .tool-card__icon { background: var(--surface); }
.tool-card__label { font-size: 14px; font-weight: 600; color: var(--text); }
.tool-card__hub {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}

/* ─── Feature grid ─────────────────────────────────────────── */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.feature {
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.feature__icon {
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 22px;
    margin-bottom: 12px;
}
.feature h3 { font-size: 17px; margin-bottom: 6px; }
.feature p { color: var(--text-muted); font-size: 14px; }
.feature__soon {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--text-muted);
    margin-left: 6px;
}

/* ─── Homepage: workspace quick-nav ────────────────────────── */
.workspace-nav {
    position: sticky;
    top: var(--header-h);
    z-index: 30;
    padding: 12px 0;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.workspace-nav .container {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.workspace-nav__label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex-shrink: 0;
}
.workspace-nav__chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}
.workspace-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.workspace-chip .material-symbols-outlined { font-size: 16px; color: var(--primary); }
.workspace-chip:hover { background: var(--primary-soft); color: var(--primary); }

/* ─── Homepage: per-workspace sections ─────────────────────── */
.workspace-section { padding: 56px 0; scroll-margin-top: calc(var(--header-h) + 72px); }
.workspace-section--tinted { background: var(--surface-alt); }
.workspace-section__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}
.workspace-section__icon {
    width: 52px; height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: var(--radius-lg);
}
.workspace-section__icon .material-symbols-outlined { font-size: 28px; }
.workspace-section__titles h2 {
    font-size: clamp(22px, 2.4vw, 30px);
    margin-bottom: 4px;
}
.workspace-section__titles h2 a { color: var(--text); transition: color 0.15s ease; }
.workspace-section__titles h2 a:hover { color: var(--primary); }
.workspace-section__titles p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.5;
}
.workspace-section__all {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
    transition: transform 0.15s ease;
}
.workspace-section__all:hover { transform: translateX(3px); }

@media (max-width: 720px) {
    .workspace-section__head { grid-template-columns: auto 1fr; }
    .workspace-section__all { grid-column: 1 / -1; }
}

/* ─── Homepage: ListShift Plus hero (bottom of page) ─────────
   Full-bleed card with the same upgrade gradient as the action-bar CTA. */
.plus-hero { padding: 72px 0 72px; }
.plus-hero__card {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    padding: 48px 48px;
    background: var(--upgrade-grad);
    color: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

/* Member variant: shown on homepage when the visitor already has Plus.
   No features list (they already know), so the card collapses to a single
   full-width body instead of the two-column pitch layout. */
.plus-hero__card--member {
    grid-template-columns: 1fr;
}
.plus-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.plus-hero__eyebrow .material-symbols-outlined { font-size: 16px; }
.plus-hero__body h2 {
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.15;
    margin-bottom: 14px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.plus-hero__body p {
    font-size: 16px;
    opacity: 0.92;
    margin-bottom: 24px;
    line-height: 1.55;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.plus-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.plus-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.12s ease;
}
.plus-hero__btn:hover { transform: translateY(-1px); }
.plus-hero__btn--primary {
    background: #fff;
    /* Keep the deeper light-mode purple as the button text in both themes,
       so it reads clearly on the white button chip even in dark mode. */
    color: #4648d4;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
[data-theme="dark"] .plus-hero__btn--primary { color: #4648d4; }
.plus-hero__btn--ghost { color: #fff; opacity: 0.92; }
.plus-hero__btn--ghost:hover { opacity: 1; }

.plus-hero__features {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 10px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.plus-hero__features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
}
.plus-hero__features .material-symbols-outlined { font-size: 20px; opacity: 0.9; }

@media (max-width: 880px) {
    .plus-hero__card { grid-template-columns: 1fr; padding: 36px 28px; gap: 28px; }
}

/* ─── /plus/ landing page ──────────────────────────────────── */
.plus-page { background: var(--bg); }

/* Hero */
.hero--plus {
    padding: 64px 0 48px;
    background:
        radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 55%),
        radial-gradient(circle at 15% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
        var(--bg);
}
.hero__eyebrow--plus {
    background: var(--upgrade-grad);
    color: #fff;
    padding: 6px 12px;
    box-shadow: 0 4px 12px rgba(70, 72, 212, 0.22);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hero__eyebrow--plus .material-symbols-outlined { font-size: 14px; }
.plus-hero-cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 28px;
}
.plus-hero-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    background: var(--upgrade-grad);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(70, 72, 212, 0.28);
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.plus-hero-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(70, 72, 212, 0.32); }
.plus-hero-cta__link {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}
.plus-hero-cta__link:hover { color: var(--primary); }
.plus-hero-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 28px;
    font-size: 13px;
    color: var(--text-muted);
}
.plus-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.plus-hero-meta .material-symbols-outlined { font-size: 18px; color: var(--primary); }

/* Feature grid */
.plus-features-section { padding: 80px 0 56px; }
.plus-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.plus-card {
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
    position: relative;
}
.plus-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.plus-card--wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    align-items: center;
    padding: 32px 40px;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 60%),
        var(--surface);
}
.plus-card__art {
    background: var(--primary-soft);
    border-radius: var(--radius-md);
    color: var(--primary);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.plus-card__art svg { width: 100%; height: auto; max-height: 160px; }
.plus-card__icon {
    width: 48px; height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}
.plus-card__icon .material-symbols-outlined { font-size: 26px; }
.plus-card__badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    margin-bottom: 10px;
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
}
/* Subtle "Coming soon" banner - smaller, muted, corner-pinned so it reads as
   a status tag on the card rather than a headline qualifier. */
.plus-card { position: relative; }
.plus-card__soon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    background: var(--surface-alt);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    line-height: 1.2;
}
.plus-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
}
.plus-card--wide h3 { font-size: 24px; }
.plus-card p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}
.plus-card code,
.plus-card kbd {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text);
    margin: 0 1px;
}
.plus-card--accent {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
        var(--surface);
}
.plus-card--accent .plus-card__icon {
    background: color-mix(in srgb, var(--accent) 15%, var(--surface));
    color: var(--accent);
}
@media (max-width: 980px) {
    .plus-features { grid-template-columns: repeat(2, 1fr); }
    .plus-card--wide { grid-template-columns: 1fr; padding: 28px; }
    .plus-card--wide .plus-card__art { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 640px) {
    .plus-features { grid-template-columns: 1fr; }
}

/* Pipeline deep-dive */
.plus-deepdive {
    padding: 64px 0;
    background: var(--surface-alt);
}
.plus-deepdive__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.plus-deepdive__eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 12px;
}
.plus-deepdive__copy h2 {
    font-size: clamp(24px, 2.8vw, 32px);
    margin-bottom: 14px;
}
.plus-deepdive__copy p {
    color: var(--text-muted);
    margin-bottom: 14px;
    line-height: 1.65;
}
.pipeline-demo {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.pipeline-demo li {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--surface-alt);
}
.pipeline-demo__num {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
}
.pipeline-demo strong { display: block; font-size: 14px; color: var(--text); margin-bottom: 2px; }
.pipeline-demo span:not(.pipeline-demo__num):not(.material-symbols-outlined) {
    font-size: 12px;
    color: var(--text-muted);
}
/* Specificity note: .pipeline-demo li has (0,1,1) because it's class + element,
   which beats a plain .pipeline-demo__save (0,1,0). Compound `.pipeline-demo
   li.pipeline-demo__save` (0,2,1) so the gradient wins - previously the save
   item silently inherited --surface-alt (near-white in light mode), making
   its white text invisible. */
.pipeline-demo li.pipeline-demo__save {
    margin-top: 4px;
    background: var(--upgrade-grad);
    color: #fff;
}
.pipeline-demo li.pipeline-demo__save strong { color: #fff; }
.pipeline-demo li.pipeline-demo__save span:not(.pipeline-demo__num):not(.material-symbols-outlined) { color: rgba(255,255,255,0.92); }
.pipeline-demo__num--save { background: rgba(255,255,255,0.25); color: #fff; }
@media (max-width: 880px) {
    .plus-deepdive__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Pricing tiers - Free / Plus / Team */
.plus-pricing { padding: 80px 0 64px; }
.plus-pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}
.plus-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    text-align: center;
}
/* Plus is the featured tier - gradient border, slightly scaled up, badge. */
.plus-tier--plus {
    background-image:
        linear-gradient(var(--surface), var(--surface)),
        var(--upgrade-grad);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 2px solid transparent;
    box-shadow: var(--shadow-lg);
    transform: scale(1.02);
    z-index: 1;
}
.plus-tier__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    background: var(--upgrade-grad);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(70, 72, 212, 0.3);
}
.plus-tier__head { margin-bottom: 20px; }
.plus-tier__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    margin-bottom: 14px;
}
.plus-tier--plus .plus-tier__name { color: var(--primary); }
.plus-tier__name .material-symbols-outlined { font-size: 20px; }
.plus-tier__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}
.plus-tier__amount {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
    line-height: 1;
}
.plus-tier__amount--text { font-size: 28px; line-height: 1.1; }
.plus-tier__per { color: var(--text-muted); font-size: 15px; font-weight: 600; }
.plus-tier__tagline {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
    max-width: 260px;
    margin: 0 auto;
}
.plus-tier__checks {
    list-style: none;
    text-align: left;
    margin: 20px 0 24px;
    padding: 18px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: 9px;
    flex: 1;
}
.plus-tier__checks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.45;
}
.plus-tier__checks .material-symbols-outlined {
    font-size: 18px;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 0px;
}
.plus-tier__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.plus-tier__btn--primary {
    background: var(--upgrade-grad);
    color: #fff;
    box-shadow: 0 10px 24px rgba(70, 72, 212, 0.26);
}
.plus-tier__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(70, 72, 212, 0.32); }
.plus-tier__btn--ghost {
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border);
}
.plus-tier__btn--ghost:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.plus-tier__btn--current {
    color: var(--text-muted);
    background: var(--surface-alt);
    border: 1px dashed var(--border);
    cursor: default;
}
.plus-tier__btn--current:hover { background: var(--surface-alt); color: var(--text-muted); border-color: var(--border); }
.plus-tier__btn--current .material-symbols-outlined { font-size: 18px; color: var(--primary); }
.plus-tier__fine {
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 12px;
}

@media (max-width: 960px) {
    .plus-pricing__grid { grid-template-columns: 1fr; gap: 24px; max-width: 480px; margin: 0 auto; }
    .plus-tier--plus { transform: none; }
}

/* FAQ */
.plus-faq { padding: 64px 0 80px; background: var(--surface-alt); }

/* ─── Footer ───────────────────────────────────────────────── */
.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
}
.site-footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 56px 24px 28px;
}
.site-footer__logo { display: inline-flex; }
.site-footer__brand p {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 14px;
    max-width: 300px;
    line-height: 1.6;
}
/* Brand column (1.5fr) alongside 5 workspace columns (1fr each). */
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr));
    gap: 32px;
    margin-bottom: 36px;
}
.site-footer__heading {
    display: block;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 14px;
    transition: color 0.15s ease;
}
a.site-footer__heading:hover { color: var(--primary); }
.site-footer__col ul { list-style: none; }
.site-footer__col li {
    margin-bottom: 8px;
    min-width: 0;
}
.site-footer__col a {
    display: block;
    font-size: 13.5px;
    color: var(--text-muted);
    transition: color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.site-footer__col a:hover { color: var(--primary); }
.site-footer__bottom {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-muted);
    gap: 16px;
    flex-wrap: wrap;
}
.site-footer__credit {
    color: var(--text-muted);
    text-decoration: none;
}
.site-footer__credit:hover { color: var(--primary); }
.site-footer__bottom-links {
    display: flex;
    gap: 18px;
}
.site-footer__bottom-links a {
    color: var(--text-muted);
}
.site-footer__bottom-links a:hover { color: var(--primary); }

@media (max-width: 1100px) {
    .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
    .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ─── 404 ───────────────────────────────────────────────────── */
.page-404 { padding: 96px 0; text-align: center; }
.page-404 h1 { font-size: 72px; margin-bottom: 16px; color: var(--primary); }
.page-404 ul { list-style: none; display: inline-flex; flex-direction: column; gap: 6px; margin-top: 24px; }
.page-404 a { color: var(--primary); }
.page-404 a:hover { text-decoration: underline; }

/* ─── Utility ──────────────────────────────────────────────── */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ─── Import modal ────────────────────────────────────────── */
/* Pops over the input panel when the user clicks Import. Scoped to the
   editor so multiple editors on a page don't collide. Backdrop traps clicks,
   Escape closes via JS. Drag-drop zone lights up on dragenter. */
.import-modal[hidden] { display: none; }
.import-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.import-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 17, 36, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.import-modal__panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 28px 24px 20px;
    z-index: 1;
}
.import-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
}
.import-modal__close:hover { background: var(--surface-alt); color: var(--text); }
.import-modal__head { text-align: center; margin-bottom: 18px; }
.import-modal__icon {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 8px;
    display: inline-block;
}
.import-modal__head h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
}
.import-modal__head p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    max-width: 320px;
    margin: 0 auto;
}
.import-modal__drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 28px 16px;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    outline: none;
}
.import-modal__drop:hover,
.import-modal__drop:focus-visible { border-color: var(--primary); background: var(--primary-soft); }
.import-modal__drop.is-dragging { border-color: var(--primary); background: var(--primary-soft); }
.import-modal__drop-icon { font-size: 36px; color: var(--primary); }
.import-modal__drop-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
}
.import-modal__drop-sub { font-size: 12px; color: var(--text-muted); }
.import-modal__foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}
.import-modal__types {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}
.import-modal__types strong { font-family: var(--font-mono); color: var(--text); font-weight: 500; }
.import-modal__plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--upgrade-grad);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.15s ease;
}
.import-modal__plus:hover { filter: brightness(1.08); }
.import-modal__plus .material-symbols-outlined { font-size: 16px; }
.import-modal__status {
    margin-top: 10px;
    min-height: 18px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

/* ─── Fullscreen editor ────────────────────────────────────── */
/* Clicking the fullscreen chip on the output panel lifts the editor out of
   the page flow and fills the viewport. Esc exits. The rest of the page is
   frozen underneath (body.has-fullscreen-editor prevents scroll). */
body.has-fullscreen-editor { overflow: hidden; }
.editor.editor--fullscreen {
    position: fixed;
    inset: 0;
    z-index: 250;
    margin: 0;
    padding: 16px;
    gap: 12px;
    background: var(--bg);
    max-height: none;
    min-height: 100vh;
    height: 100vh;
    border-radius: 0;
}
.editor.editor--fullscreen .editor__panel { border-radius: var(--radius-md); }
.editor.editor--fullscreen .editor__actions { border-radius: var(--radius-md); }
/* Upgrade CTA stays visible in fullscreen - it was hidden previously to save
   vertical room but fullscreen already gives MORE room, not less, and free
   users need to see the prompt no matter which view they're in. */
@media (max-width: 960px) {
    .editor.editor--fullscreen { padding: 8px; gap: 8px; }
    .editor.editor--fullscreen .editor__panel { height: auto; min-height: 45vh; }
}

/* ─── Accessibility: reduced motion ────────────────────────── */
/* Respect the OS-level "reduce motion" preference by disabling transitions,
   animations, smooth scroll, and parallax. Users who set this have vestibular
   sensitivity or just want a faster perceived experience. The !important is
   necessary to defeat the transition declarations scattered across component
   rules without having to refactor them. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto; }
    /* Exempt the typewriter caret: it's a 3px blinking cursor, the exact kind
       of tiny helpful movement the reduced-motion spec is not aimed at. */
    .hero__caret-inline {
        animation-duration: 1s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ─── Accessibility: global keyboard focus ring ────────────── */
/* Consistent primary-soft outline on any keyboard-focused interactive element.
   :focus-visible only triggers for keyboard navigation, so mouse users don't
   see the ring on click - matches the platform convention. Outline-offset
   keeps it clear of the element's own borders. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
/* Textareas + inputs already have their own visual container - use an inner
   ring so the outline doesn't clash with the component's border. */
textarea:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="search"]:focus-visible,
input[type="url"]:focus-visible {
    outline-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}
/* Chips and action-btn inherit the outline but don't need the border-radius
   override since they're already rounded. */
.chip-btn:focus-visible,
.action-btn:focus-visible,
.pill-btn:focus-visible { outline-offset: 3px; border-radius: var(--radius-md); }

/* ─── Command palette (Ctrl/Cmd+K) ─────────────────────────── */
.cmdk[hidden] { display: none; }
.cmdk {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 20px 20px;
}
.cmdk__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 17, 36, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.cmdk__panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 1;
}
.cmdk__searchbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
}
.cmdk__search-icon { color: var(--text-muted); font-size: 20px; }
.cmdk__input {
    flex: 1 1 auto;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--text);
    min-width: 0;
    /* Breathing room so the caret and the first typed letter are not flush
       against the icon on the left or the close pill on the right. */
    padding: 4px 12px;
}
.cmdk__input::placeholder { color: var(--text-faint); }
.cmdk__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
}
.cmdk__close:hover { background: var(--surface-sunken); color: var(--text); }
.cmdk__close kbd {
    font: inherit;
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
}
.cmdk__results {
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
}
.cmdk__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--text);
    text-decoration: none;
    transition: background 0.1s ease;
}
.cmdk__item.is-active { background: var(--primary-soft); color: var(--primary); }
.cmdk__item-icon {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--primary);
    flex-shrink: 0;
    font-size: 20px;
}
/* Active row turns primary-soft, so the icon's own primary-soft background
   would blend in. Swap to --surface - theme-aware (white in light mode,
   dark surface in dark mode) - so the icon tile stands out without the
   harsh white the old rule showed in dark mode. */
.cmdk__item.is-active .cmdk__item-icon { background: var(--surface); }
.cmdk__item-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cmdk__item-label {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cmdk__item-meta {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cmdk__item.is-active .cmdk__item-meta { color: var(--primary); opacity: 0.8; }
.cmdk__item-enter {
    opacity: 0;
    font-size: 18px;
    color: inherit;
    transition: opacity 0.1s ease;
}
.cmdk__item.is-active .cmdk__item-enter { opacity: 1; }
.cmdk__empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}
.cmdk__empty strong { color: var(--text); font-weight: 600; }
.cmdk__footer {
    display: flex;
    gap: 18px;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-muted);
    background: var(--surface-alt);
}
.cmdk__footer kbd {
    display: inline-block;
    padding: 1px 6px;
    margin-right: 4px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text);
    line-height: 1.4;
}
@media (max-width: 640px) {
    .cmdk { padding: 20px 12px; }
    .cmdk__panel { max-width: 100%; }
    .cmdk__footer { display: none; }
    .cmdk__results { max-height: calc(100vh - 180px); }
}

/* ─── Account / auth pages ─────────────────────────────────── */
.account-page { padding: 48px 0 96px; min-height: calc(100vh - 320px); }
.account-page--narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.account-page__head { margin-bottom: 28px; text-align: center; }
.account-page__head h1 { font-size: 32px; margin-bottom: 8px; }
.account-page__head p { color: var(--text-muted); }

.account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}
@media (max-width: 820px) {
    .account-grid { grid-template-columns: 1fr; }
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}
.auth-card .auth-form { flex: 1; }
/* Reserve the Turnstile widget's footprint so the layout doesn't jump when
   the async widget finishes rendering. Cloudflare's "normal" widget is 300x65.
   Using fixed width/height (not min-*) so the outer box cannot grow or shrink
   when the iframe lands - any internal margin/padding on the Turnstile chrome
   is clipped instead of shoving neighbours around. */
.auth-card .cf-turnstile {
    align-self: center;
    display: block;
    width: 300px;
    height: 65px;
    overflow: hidden;
}
.auth-card .cf-turnstile iframe { display: block; }
.account-grid .auth-card { margin-bottom: 0; }
.auth-card h2 { font-size: 20px; margin-bottom: 16px; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form__row { display: flex; flex-direction: column; gap: 6px; }
.auth-form__row span { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.auth-form__row input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 15px;
}
.auth-form__row input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    border-color: var(--primary);
}
.auth-form__foot { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.auth-form__foot a { color: var(--primary); }

/* Minimal .btn system for auth surfaces (no global .btn exists yet). */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: var(--surface-alt);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn--primary:hover { background: var(--primary-dark, var(--primary)); filter: brightness(1.06); }
.btn--plus { background: var(--upgrade-grad); color: #fff; border: none; }
.btn--ghost { background: transparent; border-color: var(--border); color: var(--text-muted); }
.btn--block { width: 100%; }

.plus-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.plus-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
}
.plus-card h2 { font-size: 22px; }
.plus-card__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    font-size: 14px;
    color: var(--text);
    list-style: none;
    padding: 0;
    margin: 0;
}
.plus-card__features li { display: inline-flex; align-items: center; gap: 6px; }
.plus-card__features .material-symbols-outlined { font-size: 18px; color: var(--primary); }
.plus-card__fineprint { font-size: 12px; color: var(--text-faint); }

.flash {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid transparent;
}
.flash--error   { background: #fdecec; border-color: #f3b6b6; color: #8a1a1a; }
.flash--success { background: #e9f7ee; border-color: #aee0c0; color: #145a32; }
[data-theme="dark"] .flash--error   { background: #3a1b1b; border-color: #683030; color: #f4b9b9; }
[data-theme="dark"] .flash--success { background: #162d22; border-color: #2f5b44; color: #b9e6ce; }

.plus-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 14px;
    margin-bottom: 12px;
}
.plus-status--active   { background: var(--primary-soft); color: var(--primary); }
.plus-status--inactive { background: var(--surface-alt);  color: var(--text-muted); }

/* ─── Pipelines (Plus) ─────────────────────────────────────── */
.editor__pipeline-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
}
.editor__pipeline-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.editor__pipeline-icon {
    color: var(--primary);
    font-size: 20px;
}
.editor__pipeline-label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.editor__pipeline-center {
    flex: 1;
    min-width: 0;
    padding: 0 12px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
}
.editor__pipeline-center[hidden] { display: none; }
.editor__pipeline-draft-count strong { color: var(--primary); }
.editor__pipeline-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
.editor__pipeline-right .chip-btn--primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
/* Keep the deeper light-mode purple on the Run button in dark mode - the
   dark-mode --primary (#8688ff) washes out against the pipeline bar chrome. */
[data-theme="dark"] .editor__pipeline-right .chip-btn--primary {
    background: #4648d4;
    border-color: #4648d4;
}
.editor__pipeline-right .chip-btn--primary:hover { filter: brightness(1.05); }

/* Dark-mode --primary is lightened to #8688ff for contrast on dark chrome,
   but any .btn--primary sitting on a light surface (auth-cards on /account/,
   pipeline modals, future modals) washes out. Hard-code the deep light-mode
   purple on every .btn--primary so buttons stay legible in both themes.
   Specific overrides above (.plus-hero__btn--primary, .chip-btn--primary) use
   different classes and aren't affected. */
[data-theme="dark"] .btn--primary {
    background: #4648d4;
    border-color: #4648d4;
    color: #fff;
}

@media (max-width: 720px) {
    .editor__pipeline-bar {
        flex-wrap: wrap;
        gap: 8px 10px;
    }
    .editor__pipeline-center {
        order: 3;
        flex-basis: 100%;
        border-left: none;
        border-right: none;
        padding: 0;
    }
    .editor__pipeline-right { margin-left: auto; }
}

.pipeline-modal[hidden] { display: none; }
.pipeline-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.pipeline-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 25, 0.55);
    backdrop-filter: blur(2px);
}
.pipeline-modal__panel {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl, 0 24px 60px rgba(0,0,0,0.25));
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    padding: 28px 28px 22px;
    overflow-y: auto;
}
.pipeline-modal__panel--gate {
    text-align: center;
    max-width: 460px;
    padding: 36px 28px 28px;
}
.pipeline-modal__panel--gate h3 { margin: 0 0 12px; }
.pipeline-modal__panel--gate p  { margin: 0 auto 24px; max-width: 38ch; line-height: 1.6; color: var(--text-muted); }
.pipeline-modal__gate-icon {
    font-size: 48px;
    color: var(--primary);
    display: inline-block;
    margin-bottom: 14px;
}
.pipeline-modal__close {
    position: absolute;
    top: 12px; right: 12px;
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
}
.pipeline-modal__close:hover { background: var(--surface-alt); color: var(--text); }
.pipeline-modal__panel h3 {
    font-size: 22px;
    margin: 0 0 6px;
}
.pipeline-modal__sub {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 18px;
    line-height: 1.55;
}
.pipeline-modal__steps {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pipeline-modal__step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.pipeline-modal__step-num {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.pipeline-modal__step-label { flex: 1; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pipeline-modal__step-del {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
}
.pipeline-modal__step-del:hover { background: var(--surface); color: var(--text); }
.pipeline-modal__empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface-alt);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
}
.pipeline-modal__save { display: flex; flex-direction: column; gap: 12px; }
.pipeline-modal__save label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.pipeline-modal__save input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 15px;
}
.pipeline-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.pipeline-modal__panel--gate .pipeline-modal__actions { justify-content: center; }
.pipeline-modal__status {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-muted);
    min-height: 18px;
}

.pipeline-modal__run-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pipeline-modal__run-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.pipeline-modal__run-item > div { flex: 1; min-width: 0; }
.pipeline-modal__run-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.pipeline-modal__run-meta { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* /account/pipelines/ list */
.pipelines-empty { text-align: center; padding: 20px; }
.pipelines-empty .material-symbols-outlined { font-size: 48px; color: var(--primary); }
.pipelines-empty h2 { margin: 10px 0 8px; font-size: 22px; }
.pipelines-empty p { color: var(--text-muted); max-width: 46ch; margin: 0 auto 18px; line-height: 1.55; }
.pipelines-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pipelines-list__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.pipelines-list__main { flex: 1; min-width: 0; }
.pipelines-list__name { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.pipelines-list__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.pipelines-list__step {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 6px;
    font-family: var(--font-mono);
}
.pipelines-list__arrow { color: var(--text-faint); }
.pipelines-list__meta { font-size: 12px; color: var(--text-faint); }
.pipelines-list__actions { display: flex; gap: 8px; flex-shrink: 0; }
.pipelines-list__delete { padding: 8px; }
.pipelines-list__delete .material-symbols-outlined { color: var(--text-muted); font-size: 20px; }
.pipelines-list__delete:hover .material-symbols-outlined { color: #c23b3b; }

@media (max-width: 560px) {
    .pipeline-modal__panel { padding: 20px 18px; }
    .pipelines-list__item { flex-direction: column; align-items: stretch; }
    .pipelines-list__actions { justify-content: flex-end; }
}

/* Free-tier download cooldown: greyed + timer icon. */
.action-btn.is-cooling,
.chip-btn.is-cooling {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: auto; /* keep tooltip via title */
}
.action-btn.is-cooling .material-symbols-outlined,
.chip-btn.is-cooling .material-symbols-outlined {
    color: var(--text-faint);
}

/* Import modal - Plus gate for free users. */
.import-modal__plus-gate {
    text-align: center;
    padding: 8px 0 4px;
}
.import-modal__plus-gate h3 {
    font-size: 22px;
    margin: 8px 0 8px;
}
.import-modal__plus-gate p {
    color: var(--text-muted);
    max-width: 42ch;
    margin: 0 auto 20px;
    line-height: 1.55;
}
.import-modal__gate-actions {
    display: inline-flex;
    gap: 10px;
    justify-content: center;
}

.paypal-subscribe { margin: 4px 0; }
.account-logout { margin-top: 24px; text-align: center; }
.muted { color: var(--text-muted); font-size: 13px; }

.billing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: 12px;
}
.billing-table th,
.billing-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.billing-table th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.billing-table tbody tr:last-child td { border-bottom: none; }
.billing-table__txn {
    font-family: var(--font-mono, ui-monospace, 'JetBrains Mono', monospace);
    font-size: 12px;
    color: var(--text-muted);
}
@media (max-width: 560px) {
    .billing-table__txn { display: none; }
    .billing-table thead th:last-child { display: none; }
}