/* ============================================================
   SAACHO ICF STUDIO - app stylesheet
   ------------------------------------------------------------
   v2.0 · 02 Oct 2026 · Ant alignment over the Saacho skin.

   WHAT THIS FILE IS
   An app layer. It owns nothing about colour, type, radius or
   elevation of its own: every value below is a reference to a
   token that public/brand/css/saacho.css already defines. That
   file is the single source of truth for the palette and the
   geometry scale, so a change there lands in ICF Studio with no
   edit here. (The one exception is the dark ramp further down,
   which the skin ships inert because ICF Studio owns its own
   theme toggle - see the note there.)

   THE CONTRACT, AND HOW IT IS MET HERE
     container   .icf-hub-main / .icf-ws-main -> max-width 1100px,
                 24px gutters, centred. The workspace editor
                 (.icf-editor-layout) is deliberately wider; it is
                 an application shell rather than a content page
                 and its third column would not survive 1100px.
     card        var(--card-bg) fill, var(--hairline) border,
                 var(--radius-lg) radius, var(--shadow-1) lift.
     controls    var(--radius-md) 6px, var(--control-h) 32px,
                 var(--control-h-lg) 40px on primary CTAs,
                 var(--fs-base) 14px control text.
     no pills    border-radius:999px / 50% appears only on
                 non-interactive shapes: the spinners, the 6px
                 status dots, and the progress track. Every
                 button, chip, tab, input and menu row uses 4/6/8.
     inputs      hairline borders, var(--focus-ring) on focus.
     text        teal and gold are FILLS. Any teal or gold that
                 carries words uses --brand-text / --gold-text,
                 because #0e8a7d is 4.24:1 on white and #b98a2f
                 is 3.12:1 - both fail AA as text. Same reason
                 --ink-mute replaces the old #94a3b8 hint grey.
     type        Source Serif 4 (--saacho-serif) stays on the
                 display headings the editor already set in
                 serif. Body prose is 16px (--fs-md); 14px
                 (--fs-base) is reserved for control text.
     motion      every transition runs on --dur/--ease, and the
                 closing block honours prefers-reduced-motion.

   WHAT THIS FILE DOES NOT DO
   It adds no class names to the markup and renames none. Every
   selector below already existed in v1.0 or is a new rule for a
   class app.js / index.php already emit. Element IDs, form names
   and data-* attributes are untouched - /ICF/api/* calls the JS
   makes depend on them.
   ============================================================ */

/* ── Tokens ───────────────────────────────────────────────────
   --icf-* are thin aliases. They exist because app.js and
   index.php write a few inline styles against them
   (style="color:var(--icf-text-muted)", and so on), and because
   the app re-themes itself below. Nothing here is a local hex. */
:root {
    /* Height of the shared sticky masthead (.navbar-brand). The
       app shell sits under it, so every full-height calc()
       subtracts this. */
    --icf-masthead: var(--nav-h);
    /* Width of the AI rail beside the editor document. */
    --icf-rail-w: 300px;
    /* Width of the sections list. */
    --icf-side-w: 280px;

    --icf-primary: var(--brand);
    --icf-primary-light: var(--brand-light);
    --icf-gold: var(--gold);
    --icf-gold-light: var(--gold-light);
    --icf-success: var(--success);
    --icf-success-light: var(--success-soft);
    --icf-warning: var(--warning);
    --icf-warning-light: var(--warning-soft);
    --icf-danger: var(--danger);
    --icf-danger-light: var(--danger-soft);
    --icf-info: var(--info);
    --icf-info-light: var(--info-soft);
    --icf-bg: var(--bg);
    --icf-surface: var(--card-bg);
    --icf-surface-alt: var(--surface-2);
    --icf-border: var(--border);
    --icf-border-light: var(--line-soft);
    --icf-text: var(--ink);
    /* Three tiers, all AA: ink 17.4:1, ink-dim 7.5:1, ink-mute
       4.6-5.0:1. Hierarchy comes from size and case on top. */
    --icf-text-secondary: var(--ink-dim);
    --icf-text-light: var(--ink-mute);
    --icf-text-muted: var(--ink-mute);
    --icf-radius: var(--radius-md);
    --icf-radius-lg: var(--radius-lg);
    --icf-font: var(--pico-font-family);
    --icf-font-serif: var(--saacho-serif);
}

/* ── Dark ramp ───────────────────────────────────────────────
   saacho.css ships a .saacho-dark ramp, but ICF Studio has its
   own three-state toggle (system / light / dark) that app.js
   drives by putting .dark or .light on both <body> and #icf-app,
   so the ramp has to be restated here rather than opted into.

   Two notes on why this is spelled out rather than inherited:

   1. A custom property is substituted on the element that
      DECLARES it. --icf-surface is declared on :root, so it
      resolves against :root's --card-bg and could never see a
      --card-bg overridden further down the tree. That is why
      every theme block below restates the --icf-* aliases as
      well as the shared ramp.
   2. The shared ramp is overridden too, so the masthead and
      footer - which live outside #icf-app but inside <body> -
      follow the toggle instead of staying white over a dark app.

   The values are the same hexes saacho.css declares on
   .saacho-dark, so the two ramps cannot drift apart visually. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #141414;
        --card-bg: #1f1f1f;
        --surface-2: #262626;
        --border: #3d3d3d;
        --line-soft: #2b2b2b;
        --ink: #f0f0f0;
        --ink-dim: #c2c2c2;
        --ink-mute: #9a9a9a;
        --brand: #0f8577;
        --brand-text: #4ac7b4;
        --brand-light: #10312c;
        --brand-border: rgba(74, 199, 180, .45);
        --gold: #d3a851;
        --gold-text: #e0bd74;
        --gold-light: #2e2612;
        --success: #4b9a2f;
        --success-soft: #16240f;
        --success-border: rgba(75, 154, 75, .45);
        --warning: #d4a03c;
        --warning-soft: #2a2114;
        --warning-border: rgba(212, 160, 60, .45);
        --danger: #e05555;
        --danger-soft: #2a1414;
        --danger-border: rgba(224, 85, 85, .45);
        --info-soft: #16243a;
        --focus-ring: 0 0 0 2px rgba(74, 199, 180, .45);
    }
}

:is(body.dark, .icf-app.dark) {
    --bg: #141414;
    --card-bg: #1f1f1f;
    --surface-2: #262626;
    --border: #3d3d3d;
    --line-soft: #2b2b2b;
    --ink: #f0f0f0;
    --ink-dim: #c2c2c2;
    --ink-mute: #9a9a9a;
    --brand: #0f8577;
    --brand-text: #4ac7b4;
    --brand-light: #10312c;
    --brand-border: rgba(74, 199, 180, .45);
    --gold: #d3a851;
    --gold-text: #e0bd74;
    --gold-light: #2e2612;
    --success: #4b9a2f;
    --success-soft: #16240f;
    --success-border: rgba(75, 154, 75, .45);
    --warning: #d4a03c;
    --warning-soft: #2a2114;
    --warning-border: rgba(212, 160, 60, .45);
    --danger: #e05555;
    --danger-soft: #2a1414;
    --danger-border: rgba(224, 85, 85, .45);
    --info-soft: #16243a;
    --focus-ring: 0 0 0 2px rgba(74, 199, 180, .45);

    --icf-primary: var(--brand);
    --icf-primary-light: var(--brand-light);
    --icf-gold: var(--gold);
    --icf-gold-light: var(--gold-light);
    --icf-success: var(--success);
    --icf-success-light: var(--success-soft);
    --icf-warning: var(--warning);
    --icf-warning-light: var(--warning-soft);
    --icf-danger: var(--danger);
    --icf-danger-light: var(--danger-soft);
    --icf-info: var(--info);
    --icf-info-light: var(--info-soft);
    --icf-bg: var(--bg);
    --icf-surface: var(--card-bg);
    --icf-surface-alt: var(--surface-2);
    --icf-border: var(--border);
    --icf-border-light: var(--line-soft);
    --icf-text: var(--ink);
    --icf-text-secondary: var(--ink-dim);
    --icf-text-light: var(--ink-mute);
    --icf-text-muted: var(--ink-mute);
}

/* An explicit "light" selection wins over the OS preference. */
:is(body.light, .icf-app.light) {
    --bg: #f5f5f5;
    --card-bg: #ffffff;
    --surface-2: #fafafa;
    --border: #d9d9d9;
    --line-soft: #f0f0f0;
    --ink: #1f1f1f;
    --ink-dim: #595959;
    --ink-mute: #6f6f6f;
    --brand: #0e8a7d;
    --brand-text: #0a6f64;
    --brand-light: #e3f5f2;
    --brand-border: #91caff;
    --gold: #b98a2f;
    --gold-text: #856321;
    --gold-light: #f5ecd4;
    --success: #237804;
    --success-soft: #f6ffed;
    --success-border: #b7eb8f;
    --warning: #9f5f00;
    --warning-soft: #fffbe6;
    --warning-border: #ffe58f;
    --danger: #cf1322;
    --danger-soft: #fff2f0;
    --danger-border: #ffccc7;
    --info: #2563a6;
    --info-soft: #e4eefa;
    --focus-ring: 0 0 0 2px rgba(14, 138, 125, .14);

    --icf-primary: var(--brand);
    --icf-primary-light: var(--brand-light);
    --icf-gold: var(--gold);
    --icf-gold-light: var(--gold-light);
    --icf-success: var(--success);
    --icf-success-light: var(--success-soft);
    --icf-warning: var(--warning);
    --icf-warning-light: var(--warning-soft);
    --icf-danger: var(--danger);
    --icf-danger-light: var(--danger-soft);
    --icf-info: var(--info);
    --icf-info-light: var(--info-soft);
    --icf-bg: var(--bg);
    --icf-surface: var(--card-bg);
    --icf-surface-alt: var(--surface-2);
    --icf-border: var(--border);
    --icf-border-light: var(--line-soft);
    --icf-text: var(--ink);
    --icf-text-secondary: var(--ink-dim);
    --icf-text-light: var(--ink-mute);
    --icf-text-muted: var(--ink-mute);
}

/* The masthead lives outside #icf-app but inside <body>, so it
   inherits the shared ramp above on its own. Only the pieces that
   paint a hard-coded white need re-pointing. */
:is(body.dark, .icf-app.dark) .navbar-brand { background: var(--card-bg); }
:is(body.dark, .icf-app.dark) .navbar-brand,
:is(body.dark, .icf-app.dark) .navbar-brand .saacho-tier-badge,
:is(body.dark, .icf-app.dark) .navbar-brand .saacho-signin { color: var(--ink); }
:is(body.dark, .icf-app.dark) .navbar-brand nav a { color: var(--ink-dim); }
:is(body.dark, .icf-app.dark) .navbar-brand nav a:hover { color: var(--brand-text); }

/* ── Base ───────────────────────────────────────────────────
   Grey canvas, white cards on top of it. */
html, body { min-height: 100%; }
body { background: var(--icf-bg); color: var(--icf-text); }

/* ── Loading ──────────────────────────────────────────────── */
.icf-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: calc(100vh - var(--icf-masthead)); gap: 16px;
}
.icf-loading p { color: var(--icf-text-muted); font-size: var(--fs-base); }
.icf-spinner, .icf-spinner-lg, .icf-spinner-sm {
    border-style: solid; border-color: var(--icf-border);
    border-top-color: var(--icf-primary);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
.icf-spinner { width: 32px; height: 32px; border-width: 3px; }
.icf-spinner.sm { width: 16px; height: 16px; border-width: 2px; }
.icf-spinner-lg { width: 48px; height: 48px; border-width: 4px; }
.icf-spinner-sm { width: 20px; height: 20px; border-width: 2px; animation-duration: .7s; }
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes snackbarIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes savePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.2); } }

/* ── App container ────────────────────────────────────────── */
.icf-app { display: flex; flex-direction: column; min-height: calc(100vh - var(--icf-masthead)); }
.icf-app > * { animation: fadeSlideIn var(--dur) var(--ease) backwards; }

/* ─────────────────────── APP BAR ───────────────────────────
   Subordinate to the shared .navbar-brand above it: a card
   surface with one hairline under it, carrying the app name and
   the app's own working actions. */
.icf-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-shrink: 0;
    min-height: calc(var(--control-h-lg) + 16px);
    padding: 8px 24px;
    background: var(--icf-surface);
    border-bottom: var(--hairline);
}
.icf-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.icf-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.icf-back-btn { background: transparent; color: var(--icf-text-secondary); }
.icf-back-btn:hover { background: var(--icf-surface-alt); color: var(--icf-text); }

.icf-app-name {
    font-size: var(--fs-md); font-weight: 600; color: var(--icf-text);
    white-space: nowrap; letter-spacing: -.01em;
}

.icf-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); min-width: 0; }
.icf-breadcrumb > span { color: var(--icf-text-muted); }
.icf-breadcrumb strong { color: var(--icf-text); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.icf-breadcrumb-title { cursor: pointer; border-radius: var(--radius-sm); padding: 2px 8px; transition: background-color var(--dur) var(--ease); }
.icf-breadcrumb-title:hover { background: var(--icf-surface-alt); }

/* ─────────────────────────── BUTTONS ─────────────────────────
   .btn-brand / .btn-outline / .btn-gold / .btn-ghost come from
   the skin and are left alone. This file supplies the Ant control
   metrics for every .icf-btn, the two extra sizes, and the two
   variants the skin has no class for. */
.icf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--control-h);
    padding: 0 15px;
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}
/* The default button, for .icf-btn used with no variant class.
   The :not() list keeps this from out-specifying the skin's own
   fills, which sit at a single class and would otherwise lose to
   this later rule. */
.icf-btn:not(.btn-brand, .btn-outline, .btn-gold, .btn-ghost, .primary, .danger) {
    background: var(--card-bg);
    color: var(--ink);
    border: 1px solid var(--border);
}
.icf-btn:not(.btn-brand, .btn-outline, .btn-gold, .btn-ghost, .primary, .danger):hover {
    background: var(--brand-light);
    color: var(--brand-text);
    border-color: var(--brand-text);
    text-decoration: none;
}

/* Primary CTAs - "New ICF", "Save & Continue", "Generate", "Save".
   Two classes deep so it out-specifies the skin's .btn-brand, whose
   32px height it doubles. :not(.sm) leaves the small variants on
   the skin's own height. */
.icf-app .icf-btn.btn-brand:not(.sm) {
    min-height: var(--control-h-lg);
    padding: 0 20px;
}
/* .primary is index.php's own name for the brand-filled button in
   the modals. Those live outside #icf-app, so this variant carries
   its own metrics rather than relying on the rule above. */
.icf-btn.primary {
    min-height: var(--control-h-lg);
    padding: 0 20px;
    background: var(--brand); color: #fff;
    border: 1px solid var(--brand);
    box-shadow: 0 2px 0 rgba(14, 138, 125, .1);
}
.icf-btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; text-decoration: none; }
.icf-btn.primary:active { background: var(--brand-dark); border-color: var(--brand-dark); box-shadow: none; }

.icf-btn.sm { min-height: var(--control-h-sm); padding: 0 8px; font-size: var(--fs-xs); gap: 4px; }
/* No danger button exists in the skin, so this one stays
   app-owned and restates the radius the .btn-* classes provide. */
.icf-btn.danger { background: var(--icf-danger); border: 1px solid var(--icf-danger); color: #fff; border-radius: var(--radius-md); }
.icf-btn.danger:hover { background: #a3342f; border-color: #a3342f; color: #fff; }
.icf-btn.disabled, .icf-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Focus: the skin's :focus-visible outline is left in place and
   the soft ring is added underneath it, so keyboard users get
   both a hard ring and the Ant field glow. */
.icf-btn:focus-visible { box-shadow: var(--focus-ring); }

/* The skin's "learn more" action; only the size is app-owned. */
.icf-learn { font-size: var(--fs-base); white-space: nowrap; }
.icf-learn.sm { font-size: var(--fs-xs); }

/* ─────────────────────────── STATUS PILLS ────────────────────
   Ant chip: tinted fill, hairline, 4px radius, 12px caps. */
.status-details, .status-documents, .status-additional {
    background: var(--info-soft); color: var(--info); border: 1px solid var(--info);
}
.status-questions { background: var(--icf-warning-light); color: var(--icf-warning); border: 1px solid var(--warning-border); }
.status-draft { background: var(--icf-gold-light); color: var(--gold-text); border: 1px solid var(--warning-border); }
.status-final, .status-generated { background: var(--icf-success-light); color: var(--icf-success); border: 1px solid var(--success-border); }
.icf-status-pill { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icf-badge { display: inline-flex; align-items: center; gap: 4px; }
.badge-current { background: var(--icf-success-light); color: var(--icf-success); border: 1px solid var(--success-border); }

/* ─────────────────────────── HUB ─────────────────────────────
   The workspace list is a list of selectable siblings, not a set
   of independent cards, so it is one card whose rows are divided
   by --line-soft. That keeps the eye scanning a list and stops
   five shadows competing for attention. */
.icf-hub { display: flex; flex-direction: column; min-height: calc(100vh - var(--icf-masthead)); }
.icf-hub-main {
    flex: 1; width: 100%;
    max-width: 1100px; margin: 0 auto;
    padding: 0 24px 48px;
}

.icf-hub-hero { padding: 48px 0 24px; max-width: 760px; }
.icf-hub-kicker {
    font-family: var(--icf-font-serif); font-style: italic;
    color: var(--gold-text); font-size: var(--fs-base);
    margin: 0 0 8px; letter-spacing: .01em;
}
.icf-hub-hero h1 {
    font-family: var(--icf-font-serif); font-weight: 600;
    font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2;
    color: var(--icf-text); margin: 0 0 16px;
}
.icf-hub-hero h1 .icf-accent { color: var(--brand-text); font-style: italic; }
.icf-hub-hero p { color: var(--icf-text-secondary); font-size: var(--fs-md); line-height: var(--lh-body); max-width: 560px; margin: 0; }

.icf-hub-section-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin: 32px 0 16px; padding-bottom: 16px;
    border-bottom: 1px solid var(--icf-border-light);
}
.icf-hub-section-head h2 { font-size: 1.25rem; font-weight: 600; font-family: var(--icf-font-serif); margin: 0; }
.icf-hub-count { color: var(--icf-text-secondary); }

.icf-hub-empty { text-align: center; padding: 64px 24px; }
.icf-hub-empty-icon {
    width: 64px; height: 64px; margin: 0 auto 16px;
    background: var(--icf-primary-light); border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: var(--brand-text);
}
.icf-hub-empty h3 { font-size: 1.25rem; font-weight: 600; margin: 0 0 8px; font-family: var(--icf-font-serif); }
.icf-hub-empty p { color: var(--icf-text-secondary); margin: 0 0 24px; }

/* One card, rows divided by --line-soft. */
.icf-hub-grid {
    display: flex; flex-direction: column;
    background: var(--card-bg);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

/* Two columns: the identity of the study on the left, its actions
   on the right. The class names are the app's; only the placement
   is new. */
.icf-hub-grid > .icf-hub-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "top actions"
        "title actions"
        "meta actions"
        "prog actions"
        "foot actions";
    column-gap: 24px; row-gap: 8px;
    align-items: center;
    padding: 16px 24px;
    background: var(--card-bg);
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    box-shadow: none;
    transition: background-color var(--dur) var(--ease);
}
.icf-hub-grid > .icf-hub-card:last-child { border-bottom: 0; }
.icf-hub-grid > .icf-hub-card:hover {
    background: var(--surface-2);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}
.icf-hub-grid > .icf-hub-card.current { box-shadow: inset 2px 0 0 0 var(--brand); }

.icf-hub-card-top { grid-area: top; display: flex; align-items: center; gap: 8px; }
.icf-hub-card-step {
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--icf-text-muted);
}
.icf-hub-card-title {
    grid-area: title;
    font-family: var(--icf-font-serif); font-size: 1.0625rem; font-weight: 600;
    line-height: 1.3; color: var(--icf-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.icf-hub-card-meta { grid-area: meta; font-size: var(--fs-base); color: var(--icf-text-secondary); display: flex; gap: 8px; flex-wrap: wrap; }
.icf-hub-card-progress { grid-area: prog; }
.icf-hub-card-foot { grid-area: foot; margin-top: 0; }
.icf-hub-card-updated { font-size: var(--fs-xs); color: var(--icf-text-muted); }
.icf-hub-card-actions { grid-area: actions; display: flex; flex-direction: row; gap: 8px; align-items: center; margin-top: 0; }
.icf-hub-card-actions .icf-btn { flex: 0 0 auto; }

/* "New ICF" is the first row of the same list, so it is a row
   rather than a dashed placeholder card. */
.icf-hub-grid > .icf-hub-card.icf-hub-card-new {
    display: flex; flex-direction: row; align-items: center; gap: 12px;
    padding: 16px 24px;
    background: var(--card-bg);
    border: 0; border-bottom: 1px solid var(--line-soft);
    border-radius: 0; box-shadow: none;
    color: var(--icf-text-secondary);
    cursor: pointer; text-align: left;
}
.icf-hub-grid > .icf-hub-card.icf-hub-card-new:hover {
    background: var(--brand-light); color: var(--brand-text); border-color: transparent;
}
.icf-hub-card-new-icon {
    width: var(--control-h); height: var(--control-h); flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--surface-2); border: 1px solid var(--line-soft);
    display: flex; align-items: center; justify-content: center; font-size: var(--fs-base);
}
.icf-hub-card-new-label { font-weight: 600; font-size: var(--fs-md); }

/* ─────────────────────────── STEPPER ─────────────────────────
   Section tabs, not pills: 32px controls on a hairline rule,
   with the active one marked by a 2px --brand underline sitting
   on the rule itself. */
.icf-ws { display: flex; flex-direction: column; min-height: calc(100vh - var(--icf-masthead)); }

.icf-stepper {
    display: flex; align-items: stretch; gap: 4px;
    padding: 8px 24px 0;
    background: var(--icf-surface);
    border-bottom: var(--hairline);
    overflow-x: auto; flex-shrink: 0;
}
.icf-step {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    min-height: var(--control-h);
    margin-bottom: -1px;
    padding: 0 12px;
    border: 0; border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: var(--fs-base); font-weight: 400;
    color: var(--icf-text-muted); background: none;
    white-space: nowrap; cursor: default;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.icf-step-label { line-height: var(--lh-body); }
.icf-step-num {
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); line-height: 1;
    background: var(--icf-surface-alt); color: var(--icf-text-muted);
}
.icf-step.done { color: var(--brand-text); cursor: pointer; }
.icf-step.done:hover { background: var(--icf-surface-alt); }
.icf-step.done .icf-step-num { background: var(--icf-primary-light); color: var(--brand-text); }
.icf-step.active { color: var(--brand-text); font-weight: 600; border-bottom-color: var(--brand); }
.icf-step.active .icf-step-num { background: var(--brand); color: #fff; }
.icf-step.locked { color: var(--icf-text-muted); }

/* ── Alert ───────────────────────────────────────────────────
   Ant alert: tinted wash, hairline, 3px coloured rule. */
.icf-alert {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 12px 16px; margin: 16px auto 0;
    max-width: 1100px;
    border-radius: var(--radius-md);
    border: var(--hairline); border-left: 3px solid var(--icf-info);
    background: var(--icf-info-light); color: var(--icf-info);
    font-size: var(--fs-base); line-height: var(--lh-body);
}

.icf-alert-info { background: var(--icf-info-light); color: var(--icf-info); border-left-color: var(--icf-info); }
.icf-alert-info i { color: var(--icf-info); }

/* ─────────────────────────── STEP CARDS ────────────────────── */
.icf-ws-main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px; }
.icf-step-card {
    max-width: 800px; margin: 0 auto;
    background: var(--card-bg);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    padding: 32px;
    animation: fadeSlideIn var(--dur) var(--ease);
}
.icf-step-card-center { display: flex; flex-direction: column; }
.icf-step-card-head { margin-bottom: 24px; }
.icf-step-card-head h2 { font-family: var(--icf-font-serif); font-size: 1.5rem; font-weight: 600; margin: 0 0 8px; }
.icf-step-card-head p { color: var(--icf-text-secondary); font-size: var(--fs-md); line-height: var(--lh-body); margin: 0; }
.icf-step-kicker {
    font-family: var(--icf-font-serif); font-style: italic;
    color: var(--gold-text); font-size: var(--fs-base); margin: 0 0 8px;
}

.icf-step-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 32px; }
.icf-step-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 32px; padding-top: 24px;
    border-top: 1px solid var(--line-soft);
}
.icf-step-nav-hint { font-size: var(--fs-base); color: var(--icf-text-muted); }

/* ─────────────────────────── FORMS ─────────────────────────── */
.icf-form { display: block; }
.icf-form-section { margin-bottom: 32px; }
.icf-form-section-title {
    font-size: var(--fs-base); font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: var(--icf-text-muted);
    margin: 0 0 16px; padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
}
.icf-form-group { margin-bottom: 24px; }
.icf-form-group label.required::after { content: " *"; color: var(--icf-danger); }
.icf-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.icf-form-input { margin-top: 8px; }
.icf-form-textarea { resize: vertical; line-height: var(--lh-body); }
.icf-form-select-wrap { position: relative; display: block; }
.icf-form-select {
    appearance: none; -webkit-appearance: none;
    color: var(--ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
    padding-right: 40px;
}
.icf-hint { font-size: var(--fs-xs); color: var(--icf-text-muted); margin: 8px 0 0; line-height: var(--lh-body); }

/* ── Chips (selectable answer controls) ────────────────────── */
.icf-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.icf-chip, .icf-chip-radio {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: var(--control-h);
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    color: var(--icf-text);
    font-size: var(--fs-base); line-height: var(--lh-body);
    cursor: pointer; white-space: nowrap;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}
.icf-chip:hover, .icf-chip-radio:hover {
    border-color: var(--brand-text); color: var(--brand-text); background: var(--brand-light);
}
.icf-chip.selected, .icf-chip-radio.selected {
    border-color: var(--brand); background: var(--brand); color: #fff;
}
.icf-chip i { font-size: var(--fs-xs); }
.icf-chip input, .icf-chip-radio input { display: none; }
/* Multi-select keeps the fill light so two selections are easy to
   tell apart at a glance. */
.icf-chip-group-multi .icf-chip.selected {
    background: var(--brand-light); color: var(--brand-text); border-color: var(--brand);
}

/* ── Read-only summary ─────────────────────────────────────── */
.icf-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.icf-info-item {
    padding: 16px;
    background: var(--icf-surface-alt);
    border: var(--hairline);
    border-radius: var(--radius-md);
}
.icf-info-label {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
    color: var(--icf-text-muted); margin: 0 0 4px;
}
.icf-info-value { font-size: var(--fs-md); font-weight: 600; word-break: break-word; }
.icf-readonly-text {
    background: var(--icf-surface-alt);
    border: var(--hairline);
    border-radius: var(--radius-md);
    padding: 16px;
    font-size: var(--fs-md); line-height: var(--lh-body); white-space: pre-wrap;
}

/* ─────────────────────────── UPLOADS ─────────────────────────
   Ant dragger: 1px dashed hairline, --radius-lg, soft lift on
   hover so it reads as a drop target rather than a field. */
.icf-upload-zone-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.icf-upload-zone {
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    background: var(--icf-surface-alt);
    box-shadow: none;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}
.icf-upload-zone:hover, .icf-upload-zone.dragover {
    border-color: var(--brand); background: var(--brand-light); box-shadow: var(--shadow-2);
}
.icf-upload-icon { font-size: 1.5rem; margin-bottom: 8px; color: var(--brand-text); }
.icf-upload-text { font-size: var(--fs-md); font-weight: 600; margin-bottom: 4px; }
.icf-upload-hint { font-size: var(--fs-xs); color: var(--icf-text-muted); }

.icf-doc-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.icf-uploading-note { display: flex; align-items: center; gap: 8px; margin-right: auto; font-size: var(--fs-base); color: var(--icf-text-muted); }
.icf-doc-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: var(--hairline);
    border-radius: var(--radius-md);
}
.icf-doc-icon { color: var(--icf-danger); font-size: var(--fs-md); }
.icf-doc-info { flex: 1; min-width: 0; }
.icf-doc-name { font-size: var(--fs-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icf-doc-meta { font-size: var(--fs-xs); color: var(--icf-text-muted); }
.icf-doc-size { font-size: var(--fs-xs); color: var(--icf-text-muted); flex-shrink: 0; }

/* ─────────────────────── QUESTIONS ────────────────────────── */
.icf-qa-wait { text-align: center; padding: 32px 16px; }
.icf-qa-wait p { color: var(--icf-text-secondary); font-size: var(--fs-md); line-height: var(--lh-body); margin: 0 auto 24px; max-width: 460px; }
.icf-qa-wait .icf-hub-empty-icon { margin-bottom: 16px; }

.icf-qa-progress {
    font-size: var(--fs-base); font-weight: 400; color: var(--brand-text);
    background: var(--icf-primary-light); border: 1px solid var(--brand-border);
    padding: 0 12px; min-height: var(--control-h-sm);
    border-radius: var(--radius-sm); line-height: calc(var(--control-h-sm) - 2px);
    white-space: nowrap;
}
.icf-qa-progress-bar { margin-bottom: 24px; }

/* A nested block rather than a second floating card: white on
   white would cost the step card its edge. */
.icf-qa-card {
    background: var(--icf-surface-alt);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    padding: 24px;
    animation: fadeSlideIn var(--dur) var(--ease);
}
.icf-qa-num {
    width: 24px; height: 24px; border-radius: var(--radius-sm);
    background: var(--brand); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); font-weight: 600; margin-bottom: 8px;
}
.icf-qa-question { font-family: var(--icf-font-serif); font-size: 1.125rem; font-weight: 600; line-height: 1.45; margin: 0 0 8px; }
.icf-qa-type {
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: var(--gold-text); margin-bottom: 16px;
}
.icf-qa-answer { margin-top: 0; }
.icf-qa-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.icf-qa-yn-btn { min-height: var(--control-h-lg); font-size: var(--fs-base); }
/* The markup always ships btn-brand on both answers, so the
   unselected one is knocked back to an outlined default and the
   selected one is held down rather than lifted. */
.icf-qa-yn-btn:not(.selected) {
    background: var(--card-bg); color: var(--icf-text);
    border-color: var(--border); box-shadow: none;
}
.icf-qa-yn-btn:not(.selected):hover { border-color: var(--brand); color: var(--brand-text); background: var(--brand-light); }
.icf-qa-yn-btn.selected { box-shadow: inset 0 0 0 1px var(--brand-dark); }
.icf-qa-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.icf-qa-note {
    margin-top: 16px; font-size: var(--fs-base); color: var(--icf-text-muted);
    display: flex; align-items: flex-start; gap: 8px; line-height: var(--lh-body);
}

.icf-qa-readonly {
    background: var(--icf-surface-alt);
    border: var(--hairline);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 8px;
}
.icf-qa-readonly-q { font-weight: 600; font-size: var(--fs-md); margin-bottom: 8px; display: flex; gap: 12px; align-items: flex-start; }
.icf-qa-readonly-q .icf-qa-num { margin-bottom: 0; flex-shrink: 0; }
.icf-qa-readonly-a { font-size: var(--fs-base); color: var(--icf-text-secondary); padding-left: 36px; }

/* ─────────────────────────── DRAFT ────────────────────────── */
.icf-draft-list { display: flex; flex-direction: column; gap: 16px; }
.icf-draft-section {
    background: var(--card-bg);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.icf-draft-head {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 24px;
    background: var(--icf-primary-light);
    border-bottom: 1px solid var(--line-soft);
}
.icf-draft-num {
    width: 24px; height: 24px; border-radius: var(--radius-sm);
    background: var(--brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); font-weight: 600; flex-shrink: 0;
}
.icf-draft-title { font-family: var(--icf-font-serif); font-size: 1.0625rem; font-weight: 600; margin: 0; }
.icf-draft-brief { padding: 16px 24px; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--icf-text-secondary); }
.icf-draft-brief p { margin-bottom: 8px; }
.icf-draft-brief p:last-child { margin-bottom: 0; }
.icf-draft-subs { padding: 0 24px 16px; display: flex; flex-direction: column; gap: 8px; }
.icf-draft-sub { padding: 12px 16px; background: var(--icf-surface-alt); border-radius: var(--radius-md); }
.icf-draft-sub-title { font-weight: 600; font-size: var(--fs-base); margin-bottom: 4px; }
.icf-draft-sub-brief { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--icf-text-secondary); }
.icf-draft-sub-brief p { margin-bottom: 6px; }
.icf-draft-sub-brief p:last-child { margin-bottom: 0; }
.icf-draft-comment {
    padding: 16px 24px;
    border-top: 1px solid var(--line-soft);
    background: var(--icf-warning-light);
}
.icf-draft-comment label {
    display: block; font-size: var(--fs-xs); font-weight: 600; margin-bottom: 8px;
    color: var(--warning); text-transform: uppercase; letter-spacing: .05em;
}
.icf-draft-comment-toggle {
    padding: 12px 24px;
    border-top: 1px solid var(--line-soft);
    background: var(--icf-surface-alt);
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
}
.icf-draft-comment-toggle .icf-draft-comment { flex-basis: 100%; padding: 16px 0 0; border-top: 0; background: transparent; }
.icf-draft-comment-toggle .icf-draft-comment textarea { margin-top: 0; }
.icf-draft-comment-saved {
    font-size: var(--fs-xs); color: var(--icf-success); font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
}
.icf-draft-overall {
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    background: var(--icf-primary-light);
    display: flex; flex-direction: column; gap: 16px;
    margin-top: 16px;
}
.icf-draft-overall-head { display: flex; gap: 12px; align-items: flex-start; }
.icf-draft-overall-head i { font-size: 1.25rem; color: var(--brand-text); margin-top: 2px; }
.icf-draft-overall-head h3 { font-family: var(--icf-font-serif); font-size: 1.0625rem; font-weight: 600; margin: 0 0 4px; }
.icf-draft-overall-head p { font-size: var(--fs-base); color: var(--icf-text-secondary); line-height: var(--lh-body); margin: 0; }

/* ───────────────────── FINAL EDITOR (workspace) ──────────────
   Three columns: sections list, the document, the AI rail. The
   rail is fixed-width beside the document on desktop and stacks
   under it once the document would be squeezed - which it is a
   grid change only, the markup is untouched. */
.icf-editor-layout {
    /* --control-h-lg bar + 16px padding, then the stepper. Kept as
       a sum of the two real heights rather than a magic number. */
    --icf-bar-h: calc(var(--control-h-lg) + 16px);
    --icf-tabs-h: calc(var(--control-h) + 8px);
    display: flex; flex: 1; overflow: hidden;
    width: 100%; max-width: 1400px; margin: 0 auto;
    height: calc(100vh - var(--icf-bar-h) - var(--icf-tabs-h) - var(--icf-masthead));
    min-height: 560px;
}

/* Sections list: selectable siblings, so rows on a --card-bg
   panel divided by --line-soft, with the active row marked by a
   brand rule down its edge rather than a floating card. */
.icf-sidebar {
    width: var(--icf-side-w);
    background: var(--card-bg);
    border-right: var(--hairline);
    display: flex; flex-direction: column;
    overflow-y: auto; flex-shrink: 0;
}
.icf-sidebar-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    position: sticky; top: 0; background: var(--card-bg); z-index: 1;
}
.icf-sidebar-header h3 {
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: var(--icf-text-muted); margin: 0;
}
.icf-sidebar-list { padding: 8px 0; }
.icf-sidebar-group + .icf-sidebar-group { border-top: 1px solid var(--line-soft); }
.icf-sidebar-group.active-group { box-shadow: inset 2px 0 0 0 var(--brand); }
.icf-sidebar-item {
    padding: 8px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--line-soft);
    transition: background-color var(--dur) var(--ease);
}
.icf-sidebar-item:last-child { border-bottom: 0; }
.icf-sidebar-item:hover { background: var(--surface-2); }
.icf-sidebar-item.active { background: var(--brand-light); }
.icf-sidebar-item.active .icf-sidebar-item-title { color: var(--brand-text); }
.icf-sidebar-item-row { display: flex; align-items: center; gap: 8px; }
.icf-sidebar-item-title { font-weight: 400; font-size: var(--fs-base); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icf-sidebar-item-meta {
    font-size: var(--fs-xs); color: var(--icf-text-muted); margin-top: 4px;
    padding-left: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icf-sidebar-chevron {
    font-size: .5rem; color: var(--icf-text-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; flex-shrink: 0;
    transition: transform var(--dur) var(--ease);
}
.icf-sidebar-chevron.open { transform: rotate(90deg); }
.icf-sidebar-spacer { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; }
.icf-sidebar-children { padding: 4px 0 8px 16px; }
.icf-sidebar-child {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    cursor: pointer; font-size: var(--fs-xs);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icf-sidebar-child:hover { background: var(--surface-2); }
.icf-sidebar-child.active { background: var(--brand-light); color: var(--brand-text); font-weight: 600; }
.icf-sidebar-child-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--icf-border); flex-shrink: 0; transition: background-color var(--dur) var(--ease); }
.icf-sidebar-child-dot.done { background: var(--icf-success); }
.icf-sidebar-child-title { flex: 1; color: var(--icf-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icf-sidebar-child.active .icf-sidebar-child-title { color: var(--brand-text); }
.icf-sidebar-child-meta { font-size: .625rem; color: var(--icf-text-muted); }
.icf-sidebar-num { color: var(--icf-text-muted); margin-right: 2px; }
.icf-editor-num { color: var(--brand-text); margin-right: 4px; }
.icf-sidebar-footer { padding: 16px; border-top: 1px solid var(--line-soft); }

.icf-sidebar-actions { display: flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity var(--dur) var(--ease); }
.icf-sidebar-item:hover .icf-sidebar-actions,
.icf-sidebar-child:hover .icf-sidebar-actions { opacity: 1; }
.icf-sidebar-action {
    width: 22px; height: 22px;
    border: 0; border-radius: var(--radius-sm);
    background: transparent; cursor: pointer;
    font-size: var(--fs-xs); line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--icf-text-muted);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icf-sidebar-action:hover { background: var(--icf-surface-alt); color: var(--icf-text); }
.icf-sidebar-action.danger:hover { background: var(--icf-danger-light); color: var(--icf-danger); }
.icf-sidebar-action.sm { width: 18px; height: 18px; font-size: .625rem; }
/* Hover-revealed row actions stay reachable by keyboard. */
.icf-sidebar-item:focus-within .icf-sidebar-actions,
.icf-sidebar-child:focus-within .icf-sidebar-actions { opacity: 1; }

.icf-progress-label {
    display: flex; justify-content: space-between;
    font-size: var(--fs-xs); color: var(--icf-text-muted); margin-bottom: 8px;
}
.icf-progress-bar {
    height: 6px;
    background: var(--icf-surface-alt);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.icf-progress-fill {
    height: 100%;
    background: var(--brand);
    border-radius: var(--radius-sm);
    transition: width 600ms cubic-bezier(.4, 0, .2, 1);
}
.icf-final-note {
    margin-top: 12px; font-size: var(--fs-xs); color: var(--icf-text-muted);
    display: flex; align-items: flex-start; gap: 6px; line-height: var(--lh-body);
}

/* ── Editor document ───────────────────────────────────────── */
.icf-editor { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--icf-bg); min-width: 0; }
.icf-editor-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 24px;
    background: var(--card-bg);
    border-bottom: var(--hairline);
}
.icf-editor-title { font-family: var(--icf-font-serif); font-size: 1.125rem; font-weight: 600; margin: 0; }
.icf-save-indicator { font-size: var(--fs-xs); color: var(--icf-text-muted); display: flex; align-items: center; gap: 6px; }
.icf-save-indicator .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--icf-success); }
.icf-save-indicator .dot.saving { background: var(--icf-warning); animation: savePulse 1s cubic-bezier(.4, 0, .6, 1) infinite; }
.icf-save-indicator .dot.unsaved { background: var(--icf-danger); }

/* Document on the left, AI rail on the right. Row gap is 0 so
   the toolbar and the editing surface read as one card; the
   column gap is the gutter between the two columns. */
.icf-editor-content {
    flex: 1; overflow-y: auto;
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--icf-rail-w);
    grid-template-rows: auto auto;
    align-content: start;
    gap: 0 24px;
}
.icf-editor-toolbar {
    grid-column: 1; grid-row: 1;
    display: flex; align-items: center; gap: 2px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: var(--hairline); border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-1);
}
.icf-toolbar-btn {
    width: var(--control-h); height: var(--control-h-sm);
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; cursor: pointer;
    font-size: var(--fs-base); line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--icf-text-secondary); font-family: var(--icf-font);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icf-toolbar-btn:hover { background: var(--brand-light); color: var(--brand-text); }
.icf-toolbar-sep { width: 1px; height: 18px; background: var(--line-soft); margin: 0 8px; }

.icf-editor-wysiwyg {
    grid-column: 1; grid-row: 2;
    min-height: 420px;
    background: var(--card-bg);
    border: var(--hairline);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-1);
    padding: 24px;
    font-size: var(--fs-md); line-height: var(--lh-body);
    color: var(--icf-text);
    overflow-y: auto;
    outline: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.icf-editor-wysiwyg:focus { border-color: var(--brand-text); box-shadow: var(--focus-ring); }
.icf-editor-wysiwyg:empty::before { content: attr(data-placeholder); color: var(--icf-text-muted); pointer-events: none; }
.icf-editor-wysiwyg h1 { font-family: var(--icf-font-serif); font-size: 1.5rem; font-weight: 600; margin: 0 0 16px; }
.icf-editor-wysiwyg h2 { font-family: var(--icf-font-serif); font-size: 1.25rem; font-weight: 600; margin: 24px 0 8px; }
.icf-editor-wysiwyg p { margin: 0 0 16px; }
.icf-editor-wysiwyg ul, .icf-editor-wysiwyg ol { margin: 8px 0 16px 24px; }
.icf-editor-wysiwyg li { margin-bottom: 8px; }
.icf-editor-wysiwyg strong { font-weight: 600; }

/* ── AI rail ─────────────────────────────────────────────────
   A fixed-width right rail on desktop, stacked below the document
   once the document would be narrower than the rail. */
.icf-ai-panel {
    grid-column: 2; grid-row: 1 / span 2;
    align-self: start;
    position: sticky; top: 0;
    margin-top: 0;
    background: var(--card-bg);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.icf-ai-chips-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 12px 0; }
.icf-ai-input-row { display: flex; align-items: center; gap: 8px; padding: 12px; }
.icf-ai-input {
    flex: 1; min-width: 0;
    min-height: var(--control-h);
    padding: 4px 11px;
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    background: var(--card-bg);
}
.icf-ai-suggestion-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px;
    background: var(--icf-primary-light);
    border-bottom: 1px solid var(--line-soft);
}
.icf-ai-suggestion-info { display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); font-weight: 400; color: var(--brand-text); }
.icf-ai-suggestion-actions { display: flex; gap: 8px; }
.icf-ai-loading { display: flex; align-items: center; gap: 8px; padding: 12px; font-size: var(--fs-base); color: var(--icf-text-muted); }

/* ── Compliance check panel ──────────────────────────────────
   Ant alert: warning wash, tinted hairline, 3px rule. */
.icf-compliance-panel {
    margin: 16px 24px 0;
    border: 1px solid var(--warning-border);
    border-left: 3px solid var(--icf-warning);
    border-radius: var(--radius-md);
    background: var(--icf-warning-light);
    overflow: hidden;
}
.icf-compliance-head {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 12px 16px;
    background: none; border: 0; cursor: pointer;
    font: inherit; color: inherit; text-align: left;
}
.icf-compliance-head i.fa-clipboard-check { color: var(--icf-warning); }
.icf-compliance-head strong { font-size: var(--fs-base); font-weight: 600; }
.icf-compliance-sub { margin-left: auto; font-size: var(--fs-xs); color: var(--icf-text-muted); text-align: right; line-height: var(--lh-body); }
.icf-compliance-list { display: block; margin: 0; padding: 4px 24px 16px 40px; list-style: none; }
.icf-compliance-list li { position: relative; padding: 8px 0; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--icf-text-secondary); }
.icf-compliance-list li::before { content: "\26A0"; position: absolute; left: -20px; top: 8px; font-size: var(--fs-xs); }

/* ─────────────────────────── MODALS ────────────────────────── */
.icf-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: fadeIn var(--dur) var(--ease);
}
.icf-modal {
    display: flex; flex-direction: column; overflow: hidden;
    width: 100%; max-width: 600px; max-height: 85vh;
    background: var(--icf-surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    animation: slideUp 250ms var(--ease);
}
.icf-preview-modal { max-width: 900px; max-height: 90vh; }
.icf-disclaimer-modal { max-width: 560px; }
.icf-prompt-modal { max-width: 420px; }

/* Print fidelity, deliberately not themed: this pane previews the
   exported document, so it stays white with black text. */
.icf-preview-body { padding: 40px; background: #fff; color: #000; }
.icf-preview-doc { max-width: 700px; margin: 0 auto; font-family: "Times New Roman", serif; font-size: 12pt; line-height: 1.8; color: #000; }
.icf-preview-doc h1 { font-size: 16pt; font-weight: bold; margin: 24pt 0 6pt; }
.icf-preview-doc h2 { font-size: 14pt; font-weight: bold; margin: 18pt 0 4pt; }
.icf-preview-doc p { margin: 0 0 10pt; text-align: justify; }
.icf-preview-doc ul, .icf-preview-doc ol { margin: 6pt 0 10pt 24pt; }
.icf-preview-doc li { margin-bottom: 4pt; }
.icf-preview-doc strong { font-weight: bold; }
.icf-preview-doc hr, .icf-preview-hr { border: none; border-top: 1px solid #ccc; margin: 18pt 0; }
.icf-preview-title { text-align: center; font-size: 18pt; margin-bottom: 6pt; }
.icf-preview-subtitle { text-align: center; font-size: 11pt; margin: 2pt 0; }

.icf-modal-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line-soft);
    flex-shrink: 0;
}
.icf-modal-header h2 { font-family: var(--icf-font-serif); font-size: 1.125rem; font-weight: 600; margin: 0; }
.icf-modal-close {
    width: var(--control-h); height: var(--control-h);
    border: 0; border-radius: var(--radius-md);
    background: transparent; cursor: pointer;
    font-size: 1rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    color: var(--icf-text-muted);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icf-modal-close:hover { background: var(--icf-surface-alt); color: var(--icf-text); }
.icf-modal-body { flex: 1; overflow-y: auto; padding: 24px; }
.icf-modal-footer {
    display: flex; justify-content: flex-end; gap: 16px;
    padding: 16px 24px;
    border-top: 1px solid var(--line-soft);
    flex-shrink: 0;
}

.icf-prompt-input { padding: 4px 11px; }
.icf-prompt-actions { display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px; }

.icf-generating-modal {
    background: var(--icf-surface);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    padding: 40px; text-align: center;
    width: 100%; max-width: 400px;
}
.icf-generating-spinner { margin-bottom: 16px; }
.icf-generating-content h3 { font-family: var(--icf-font-serif); font-size: 1.25rem; font-weight: 600; margin: 0 0 8px; }
.icf-generating-content p { color: var(--icf-text-secondary); font-size: var(--fs-md); margin: 0 0 24px; line-height: var(--lh-body); }
.icf-generating-progress { display: flex; align-items: center; gap: 12px; font-size: var(--fs-xs); color: var(--icf-text-muted); }
.icf-generating-progress .icf-progress-bar { flex: 1; }
.icf-generating-inline { display: flex; align-items: center; gap: 12px; padding: 32px 0; color: var(--icf-text-muted); font-size: var(--fs-md); }

/* Disclaimer */
.icf-disclaimer-content { font-size: var(--fs-md); line-height: var(--lh-body); color: var(--icf-text-secondary); }
.icf-disclaimer-content p { margin-bottom: 16px; }
.icf-disclaimer-content ul { margin: 16px 0 16px 0; padding: 0; list-style: none; }
.icf-disclaimer-content li { margin-bottom: 12px; padding-left: 24px; position: relative; }
.icf-disclaimer-content li::before {
    content: ""; position: absolute; left: 0; top: 8px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--icf-gold);
}
.icf-disclaimer-content li strong { color: var(--icf-text); }
.icf-disclaimer-ack {
    font-style: italic; color: var(--icf-text-muted);
    border-top: 1px solid var(--line-soft);
    padding-top: 16px; margin: 8px 0 0;
}

/* Empty state */
.icf-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 48px 24px; text-align: center;
}
.icf-empty p { color: var(--icf-text-muted); font-size: var(--fs-md); line-height: var(--lh-body); margin: 0 0 24px; max-width: 400px; }

/* ─────────────────────── GUEST BANNER ────────────────────────
   Lives outside #icf-app, on the PHP page. */
.icf-guestbar {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    flex-wrap: wrap; padding: 8px 24px;
    background: var(--brand); color: #fff;
    font-size: var(--fs-base); line-height: var(--lh-body); text-align: center;
}
.icf-guestbar-cta {
    display: inline-flex; align-items: center;
    min-height: var(--control-h); padding: 0 16px;
    border-radius: var(--radius-md);
    background: #fff; color: var(--brand-text);
    font-size: var(--fs-base); font-weight: 400;
    text-decoration: none; white-space: nowrap;
    transition: background-color var(--dur) var(--ease);
}
.icf-guestbar-cta:hover { background: var(--brand-light); color: var(--brand-dark); text-decoration: none; }

/* ─────────────────────────── SNACKBAR ──────────────────────── */
#icf-snackbar-container {
    position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
    z-index: 9999;
    display: flex; flex-direction: column; gap: 12px;
    pointer-events: none;
}
.icf-snackbar {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    min-width: min(320px, calc(100vw - 32px)); max-width: 480px;
    padding: 12px 24px;
    background: var(--card-bg);
    color: var(--icf-text);
    border: 1px solid var(--line-soft);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    font-size: var(--fs-base); font-weight: 400; line-height: var(--lh-body);
    animation: snackbarIn 300ms var(--ease);
    pointer-events: auto;
}
.icf-snackbar.success { border-left-color: var(--icf-success); }
.icf-snackbar.error { border-left-color: var(--icf-danger); }
.icf-snackbar.info { border-left-color: var(--brand); }
.icf-snackbar.warning { border-left-color: var(--icf-warning); }
.icf-snackbar-icon { font-size: var(--fs-md); flex-shrink: 0; }
.icf-snackbar.success .icf-snackbar-icon { color: var(--icf-success); }
.icf-snackbar.error .icf-snackbar-icon { color: var(--icf-danger); }
.icf-snackbar.info .icf-snackbar-icon { color: var(--brand-text); }
.icf-snackbar.warning .icf-snackbar-icon { color: var(--icf-warning); }
.icf-snackbar-close {
    background: none; border: 0; cursor: pointer;
    font-size: var(--fs-base); color: var(--icf-text-muted);
    padding: 0 0 0 8px; flex-shrink: 0; line-height: 1;
}
.icf-snackbar-close:hover { color: var(--icf-text); }

/* ── Scrollbars ──────────────────────────────────────────────
   Scoped to the app so the shared masthead is left alone. */
.icf-app ::-webkit-scrollbar,
.icf-modal-overlay ::-webkit-scrollbar,
.icf-snackbar ::-webkit-scrollbar { width: 8px; height: 8px; }
.icf-app ::-webkit-scrollbar-track,
.icf-modal-overlay ::-webkit-scrollbar-track { background: transparent; }
.icf-app ::-webkit-scrollbar-thumb,
.icf-modal-overlay ::-webkit-scrollbar-thumb {
    background: var(--line-soft); border-radius: var(--radius-sm);
}
.icf-app ::-webkit-scrollbar-thumb:hover,
.icf-modal-overlay ::-webkit-scrollbar-thumb:hover { background: var(--icf-border); }

/* ─────────────────────────── RESPONSIVE ────────────────────── */
@media (width <= 1080px) {
    /* The rail stops earning its width: stack it under the
       document rather than squeeze the document under 500px. */
    .icf-editor-content { grid-template-columns: minmax(0, 1fr); }
    .icf-ai-panel { grid-column: 1; grid-row: 3; position: static; margin-top: 16px; }
}
@media (width <= 900px) {
    .icf-editor-layout { flex-direction: column; height: auto; overflow: visible; }
    .icf-sidebar { width: 100%; max-height: 40vh; border-right: 0; border-bottom: var(--hairline); }
    .icf-editor { overflow: visible; }
    .icf-editor-content { overflow: visible; }
    .icf-editor-header { flex-wrap: wrap; }
}
@media (width <= 768px) {
    .icf-header { padding: 8px 16px; }
    .icf-stepper { padding: 8px 16px 0; }
    .icf-ws-main { padding: 16px; }
    .icf-hub-main { padding: 0 16px 32px; }
    .icf-step-card { padding: 24px; }
    .icf-form-row, .icf-upload-zone-row, .icf-info-grid, .icf-qa-yn { grid-template-columns: 1fr; }
    .icf-ws, .icf-hub { min-height: auto; }
    .icf-hub-grid > .icf-hub-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "title" "meta" "prog" "foot" "actions"; }
    .icf-hub-card-actions { justify-content: flex-start; }
    .icf-sidebar-item-meta { padding-left: 0; }
}

/* ── Focus ───────────────────────────────────────────────────
   The skin already puts a 2px --brand-text outline on every
   :focus-visible. These add the Ant soft ring on top for the
   app's own controls; nothing here removes an outline. */
.icf-breadcrumb-title:focus-visible,
.icf-sidebar-action:focus-visible,
.icf-toolbar-btn:focus-visible,
.icf-modal-close:focus-visible,
.icf-compliance-head:focus-visible,
.icf-snackbar-close:focus-visible { box-shadow: var(--focus-ring); }
.icf-chip-radio:focus-within, .icf-chip:focus-within { border-color: var(--brand-text); box-shadow: var(--focus-ring); }

/* ── Reduced motion ──────────────────────────────────────────
   saacho.css already neutralises every animation and transition
   site-wide; this restates it so the app's own keyframes are
   explicitly covered if that block is ever moved. */
@media (prefers-reduced-motion: reduce) {
    .icf-app > *,
    .icf-step-card,
    .icf-qa-card,
    .icf-spinner, .icf-spinner-sm, .icf-spinner-lg,
    .icf-save-indicator .dot.saving,
    .icf-modal-overlay, .icf-modal, .icf-snackbar, .icf-generating-modal {
        animation: none !important;
        transition: none !important;
    }
    .icf-editor-wysiwyg, .icf-sidebar-chevron, .icf-progress-fill { transition: none !important; }
}

/* Shown when a section's body lives entirely in its subheadings. */
.icf-editor-children-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--icf-text-muted, #64748b);
    background: var(--icf-surface-2, rgba(120, 120, 140, 0.08));
    border: 1px solid var(--icf-border, rgba(120, 120, 140, 0.22));
}
.icf-editor-children-hint i { margin-top: 2px; opacity: 0.8; }