/* =============================================================
   Clear Trial — Clean Paper design system implementation.
   Reference: DESIGN-SYSTEM.md
============================================================= */

:root {
    /* --- Core palette (DESIGN-SYSTEM.md §2) --------------------- */
    --ink:            #25321F;
    --body:           #2A2A24;
    --muted:          #6D6D5E;
    --faint:          #9A9585;
    --accent:         #2F6B4F;
    --accent-hover:   #255740;
    --accent-pale:    #DDE8DD;
    --accent-soft:    #E3E9DC;
    --paper:          #FAF8F3;
    --paper-hi:       #FFFFFF;
    --panel:          #F2EFE7;
    --panel-2:        #EDE9DA;
    --surface:        #FFFFFF;
    --border:         #E6E1D3;
    --border-strong:  #D8D3C2;
    --hairline:       #D9D5C8;
    --hairline-2:     #E8E4D6;

    /* --- Status colours (used for tags/callouts ONLY) ----------- */
    --confirmed-bg:   #DDE8DD;  --confirmed-border: #B3C6B3;  --confirmed-text: #3A7A55;
    --attention-bg:   #F9EFE0;  --attention-border: #E7D3AC;  --attention-text: #8A6520;
    --error-bg:       #F6E4E0;  --error-border:     #DFB8AE;  --error-text:     #8C3F2C;
    --neutral-bg:     #F2EFE7;  --neutral-border:   #D8D3C2;  --neutral-text:   #6D6D5E;

    /* --- Tile accent tints (home page) ------------------------- */
    --tile-all-bg:      #F2EFE7;  --tile-all-fg:      #2A2A24;
    --tile-gen-bg:      #E6EAEE;  --tile-gen-fg:      #4E5C6B;
    --tile-author-bg:   #F1E4C6;  --tile-author-fg:   #A97F1F;
    --tile-external-bg: #E5E2F0;  --tile-external-fg: #5B5487;
    --tile-inst-bg:     #F3DFE1;  --tile-inst-fg:     #A44F55;
    --tile-complete-bg: #E2ECE5;  --tile-complete-fg: #2F6B4F;

    /* --- Type stacks (DESIGN-SYSTEM.md §3) --------------------- */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
}

/* --------------------------------------------------------------
   Reset + base
-------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--paper);
    color: var(--body);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ==============================================================
   Top bar — brand + user
============================================================== */
.topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 28px;
    border-bottom: 1px solid var(--hairline);
    background: var(--paper);
}
.brand {
    display: flex; align-items: center; gap: 10px;
    color: var(--body);
}
.brand-mark {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--accent); color: white;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-weight: 700; font-size: 15px;
    letter-spacing: -0.02em;
    box-shadow: 0 2px 6px rgba(47,107,79,0.14);
}
.brand-name {
    font-size: 16px; font-weight: 700;
    letter-spacing: -0.005em;
    font-family: var(--font-serif);
}
.brand-tag {
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--muted);
    margin-left: 4px; font-weight: 500;
}
.topbar-user {
    margin-left: auto;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--muted);
}
.user-name { font-weight: 500; color: var(--body); }
.user-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--panel); color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 11px;
    border: 1px solid var(--hairline);
}
.topbar-signout {
    background: transparent; border: 1px solid var(--hairline);
    width: 30px; height: 30px; border-radius: 6px;
    color: var(--muted); font-size: 14px;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}
.topbar-signout:hover { border-color: var(--accent); color: var(--accent); }

/* ==============================================================
   Page container
============================================================== */
.page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 30px 24px;
}

/* ==============================================================
   Home page — hero + CTA + tile grid + archive
============================================================== */
.hero-h1 {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 32px;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 6px 0 4px;
    line-height: 1.2;
}
.hero-name { color: var(--accent); font-style: italic; }
.hero-sub {
    color: var(--muted);
    font-size: 15px;
    margin: 0 0 28px;
}

/* Big green primary CTA */
.cta-form { margin: 0; }
.cta-newbtn {
    width: 100%;
    display: flex; align-items: center; gap: 24px;
    background: var(--accent); color: white;
    border: 0; border-radius: 12px;
    padding: 24px 26px;
    box-shadow: 0 4px 18px rgba(47,107,79,0.16);
    cursor: pointer; text-align: left;
    font: inherit;
    transition: background 0.12s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.cta-newbtn:hover {
    background: var(--accent-hover);
    box-shadow: 0 6px 24px rgba(47,107,79,0.22);
    transform: translateY(-1px);
}
.cta-newbtn:active { transform: translateY(0); }
.cta-icon {
    width: 52px; height: 52px; border-radius: 12px;
    background: rgba(255,255,255,0.16); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 300; line-height: 1;
}
.cta-body {
    flex: 1;
    display: flex; flex-direction: column; gap: 4px;
}
.cta-title {
    font-family: var(--font-serif);
    font-size: 22px; font-weight: 700;
    letter-spacing: -0.005em;
}
.cta-desc { font-size: 14px; opacity: 0.92; }
.cta-arrow { font-size: 22px; opacity: 0.85; }

/* Section title above the tile grid */
.section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    font-weight: 600;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 8px;
    margin: 36px 0 14px;
}

/* Tile grid */
.tile-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tile-grid { grid-template-columns: 1fr; } }

.tile {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 20px 18px;
    min-height: 168px;
    color: var(--body);
    transition: border-color 0.12s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.tile:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.tile:active { transform: translateY(1px); }

.tile-head { display: flex; align-items: center; gap: 12px; }
.tile-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.tile-count {
    margin-left: auto;
    font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
    font-family: var(--font-serif);
    color: var(--ink);
}
.tile-name {
    margin: 0; font-size: 15px; font-weight: 700;
    letter-spacing: -0.005em; color: var(--ink);
}
.tile-desc {
    margin: 0; font-size: 13px;
    color: var(--muted); line-height: 1.45;
}
.tile-cta {
    margin-top: auto; padding-top: 4px;
    font-size: 12px; color: var(--accent); font-weight: 600;
    letter-spacing: 0.02em;
}

/* Per-tile icon colour tokens */
.tile-all      .tile-icon { background: var(--tile-all-bg);      color: var(--tile-all-fg); }
.tile-gen      .tile-icon { background: var(--tile-gen-bg);      color: var(--tile-gen-fg); }
.tile-author   .tile-icon { background: var(--tile-author-bg);   color: var(--tile-author-fg); }
.tile-external .tile-icon { background: var(--tile-external-bg); color: var(--tile-external-fg); }
.tile-inst     .tile-icon { background: var(--tile-inst-bg);     color: var(--tile-inst-fg); }
.tile-complete .tile-icon { background: var(--tile-complete-bg); color: var(--tile-complete-fg); }

/* Archive strip below the grid */
.archive-strip {
    display: flex; align-items: center; gap: 12px;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 14px 18px;
    margin-top: 24px;
    color: var(--body);
    transition: border-color 0.12s ease;
}
.archive-strip:hover { border-color: var(--muted); }
.archive-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: white; border: 1px solid var(--hairline);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 15px;
}
.archive-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.archive-title { font-weight: 600; color: var(--ink); }
.archive-sub   { font-size: 12px; color: var(--muted); }
.archive-count {
    font-family: var(--font-serif);
    font-weight: 700; color: var(--muted);
    font-size: 17px;
}

/* ==============================================================
   Buttons — secondary
============================================================== */
.btn-secondary {
    display: inline-block;
    background: var(--panel); color: var(--muted);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 8px 14px; font-size: 13px;
    font-weight: 500;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn-secondary:hover {
    border-color: var(--accent); color: var(--accent);
}

/* ==============================================================
   Footer
============================================================== */
.app-footer {
    max-width: 1180px; margin: 0 auto;
    padding: 12px 30px 20px;
    text-align: center;
    font-size: 11px; color: var(--muted);
    border-top: 1px solid var(--hairline);
    margin-top: 32px;
}
.app-footer a       { color: var(--muted); padding: 0 8px; }
.app-footer a:hover { color: var(--accent); text-decoration: underline; }
.app-footer .sep    { color: var(--faint); }

/* Protocol-ID chip — floats right of the footer links so the current
   run's unique identifier is always visible. */
.footer-run-id {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-left: 16px;
    padding: 2px 10px;
    background: var(--paper-2, #fbf8f2);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 999px;
    font-size: 10.5px;
}
.footer-run-id-label {
    color: var(--muted, #857f70);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    font-size: 9.5px;
}
.footer-run-id-value {
    color: var(--ink, #2a2820);
    font-weight: 500;
}

/* ==============================================================
   Placeholder page (Phase 1 stubs)
============================================================== */
.placeholder {
    max-width: 620px; margin: 60px auto;
    padding: 32px 34px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: left;
}
.placeholder-tag {
    display: inline-block;
    background: var(--attention-bg);
    color: var(--attention-text);
    border: 1px solid var(--attention-border);
    padding: 3px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}
.placeholder-title {
    font-family: var(--font-serif);
    font-size: 24px; font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink); margin: 0 0 8px;
}
.placeholder-sub {
    font-size: 14px; color: var(--muted); margin: 0 0 20px;
}
.placeholder-body {
    font-size: 14px; color: var(--body);
    margin: 0 0 24px;
}
.placeholder-body strong { color: var(--ink); font-weight: 600; }
.placeholder-nav { display: flex; gap: 10px; }

/* ==============================================================
   Phase 2 — Library, Archive, Settings, Cache summary, Disk status
============================================================== */

/* Shared page heading */
.page-h1 {
    font-family: var(--font-serif);
    font-size: 26px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 6px 0 4px;
}
.page-sub {
    color: var(--muted); font-size: 14px;
    margin: 0 0 20px;
}
.mono  { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }
.muted { color: var(--muted); }

/* Cards (settings, disk) */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 22px;
    margin: 0 0 18px;
}
.card-h {
    font-family: var(--font-serif);
    font-size: 17px; font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
}

/* Alerts */
.alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin: 0 0 14px;
    border: 1px solid transparent;
}
.alert-ok {
    background: var(--confirmed-bg);
    border-color: var(--confirmed-border);
    color: var(--confirmed-text);
}

/* Inline primary/secondary buttons that don't span the row */
.btn-inline { display: inline-block; width: auto; padding: 8px 16px; font-size: 13px; }
.btn-primary.btn-inline {
    /* width: auto here beats the later `.btn-primary { width: 100% }`
       full-width sign-in rule; without it, .btn-inline primary buttons
       stretch and force the sibling secondary buttons onto a new row. */
    width: auto;
    display: inline-block;
    background: var(--accent); color: white; border: none;
    border-radius: 8px; font-weight: 600;
    cursor: pointer; text-decoration: none;
}
.btn-primary.btn-inline:hover { background: var(--accent-hover); }

/* Chip / status pill */
.chip {
    display: inline-block;
    padding: 5px 12px; border-radius: 20px;
    background: var(--panel);
    border: 1px solid var(--hairline);
    color: var(--muted);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.3;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip-active {
    background: var(--accent); color: white; border-color: var(--accent);
}
.chip-ok   { background: var(--confirmed-bg); border-color: var(--confirmed-border); color: var(--confirmed-text); }
.chip-warn { background: var(--attention-bg); border-color: var(--attention-border); color: var(--attention-text); }

/* Library head bar (title + New button) */
.lib-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px;
    margin: 4px 0 18px;
}

/* Filter row */
.lib-filter {
    display: flex; align-items: center; gap: 16px;
    margin: 0 0 20px;
    flex-wrap: wrap;
}
.lib-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lib-search {
    appearance: none;
    background: white;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px; color: var(--body);
    min-width: 220px;
    margin-left: auto;
    font-family: inherit;
}
.lib-search:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(47,107,79,0.10);
}

/* Empty state */
.empty-state {
    background: var(--surface); border: 1px dashed var(--hairline);
    border-radius: 10px;
    padding: 32px; text-align: center;
    color: var(--muted); font-size: 14px;
}
.empty-state p { margin: 0 0 12px; }

/* Card grid (library) */
.lib-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) { .lib-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .lib-grid { grid-template-columns: 1fr; } }

.lib-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 10px;
}
.lib-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px;
}
.lib-card-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lib-card-title {
    font-family: var(--font-serif);
    font-size: 15px; font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin: 0;
    letter-spacing: -0.005em;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.lib-card-subtitle {
    font-size: 11.5px;
    color: var(--muted);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lib-card-status {
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 8px; border-radius: 12px;
    border: 1px solid var(--neutral-border);
    background: var(--neutral-bg); color: var(--neutral-text);
    white-space: nowrap;
    flex-shrink: 0;
}

.lib-card-head-right {
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}

/* Immediate custom hover tooltip — used for truncated card titles */
.hover-tip {
    position: absolute;
    max-width: 360px;
    background: var(--ink); color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 12.5px; line-height: 1.4;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    z-index: 60;
    pointer-events: none;
    white-space: normal;
    animation: fadeIn 0.1s ease-out;
}

/* Small circular (i) info icon.  Muted by default, deepens on hover. */
.info-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--panel);
    border: 1px solid var(--hairline);
    color: var(--muted);
    font-family: var(--font-serif);
    font-style: italic; font-weight: 700; font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
    padding: 0;
}
.info-icon:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.status-drafting              { background: #F7EEDA; color: #7E5F17; border-color: #E4CE9B; }
.status-ready-for-review      { background: var(--tile-external-bg); color: var(--tile-external-fg); border-color: #C7C1DD; }
.status-under-review          { background: var(--tile-author-bg); color: var(--tile-author-fg); border-color: #E1CB8F; }
.status-institutional-review  { background: var(--tile-inst-bg); color: var(--tile-inst-fg); border-color: #D9B5B9; }
.status-complete              { background: var(--confirmed-bg); color: var(--confirmed-text); border-color: var(--confirmed-border); }

.lib-card-meta {
    font-size: 11.5px; color: var(--muted); margin: 0;
}
.lib-card-run { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.dot-sep { margin: 0 6px; color: var(--faint); }

/* Lifecycle checklist inside the card */
.lifecycle {
    list-style: none; padding: 0; margin: 4px 0 6px;
    display: flex; flex-direction: column; gap: 4px;
}
.lifecycle-row {
    font-size: 12px; line-height: 1.4;
    padding: 0; margin: 0;
    border-radius: 6px;
}
/* Both link + button variants share the same flex layout so alignment
   is identical whether the row is active or locked. */
.lc-link {
    display: flex; align-items: center;
    gap: 8px;
    padding: 4px 6px;
    color: inherit; text-decoration: none;
    border-radius: 6px;
    transition: background 0.1s;
    width: 100%;
    box-sizing: border-box;
}
.lc-link:hover { background: var(--panel); }

.lc-mark {
    flex-shrink: 0;
    width: 14px; text-align: center;
    font-weight: 700;
}
.lc-label {
    color: var(--ink); font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.lc-note {
    color: var(--muted); font-size: 11.5px;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}

.lc-done  .lc-mark { color: var(--accent); }
.lc-progress .lc-mark { color: var(--attention-text); }
.lc-pending  .lc-mark { color: var(--faint); }

/* Locked-row button — same flex as .lc-link */
.lc-locked-btn {
    all: unset;
    display: flex; align-items: center;
    gap: 8px;
    padding: 4px 6px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    border-radius: 6px;
    transition: background 0.1s;
}
.lc-locked-btn:hover { background: var(--panel); }
.lc-locked-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lifecycle-row.lc-locked { opacity: 0.7; }
.lifecycle-row.lc-locked:hover { opacity: 1; }

.lib-card-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}
.lib-card-flag {
    font-size: 10.5px; font-weight: 600;
    padding: 3px 10px; border-radius: 12px;
}
.flag-complete { background: var(--confirmed-bg); color: var(--confirmed-text); }
.flag-ready    { background: var(--attention-bg); color: var(--attention-text); }

/* Slightly smaller Open button so Files + Manage fit alongside it. */
.btn-open { padding: 6px 12px !important; font-size: 12.5px !important; }

/* Small Files text link on library card — always underlined so
   it reads as a link, hover deepens colour + adds a subtle backdrop.
   Manage link reuses the same styling. */
.lib-card-files,
.lib-card-manage {
    font-size: 12px;
    color: var(--muted);
    text-decoration: underline;
    text-decoration-color: var(--hairline);
    text-underline-offset: 3px;
    padding: 6px 8px;
    border-radius: 4px;
    transition: color 0.1s, background 0.1s, text-decoration-color 0.1s;
    background: none; border: none; cursor: pointer;
    font-family: inherit;
}
.lib-card-files:hover,
.lib-card-manage:hover {
    color: var(--accent);
    background: var(--panel);
    text-decoration-color: var(--accent);
}
.lib-card-manage:hover { color: var(--attention-text); }
.lib-card-manage:hover { text-decoration-color: var(--attention-text); }

/* Locked-row button — looks like a link, not a button */
.lc-locked-btn {
    all: unset;
    display: grid;
    grid-template-columns: 20px auto 1fr;
    gap: 6px;
    padding: 3px 6px;
    align-items: baseline;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    border-radius: 6px;
    transition: background 0.1s;
}
.lc-locked-btn:hover { background: var(--panel); }
.lc-locked-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lc-locked .lc-locked-btn { opacity: 0.7; }
.lc-locked .lc-locked-btn:hover { opacity: 1; }

/* Modal */
.modal-scrim {
    position: fixed; inset: 0;
    background: rgba(20, 30, 25, 0.42);
    z-index: 50;
    animation: fadeIn 0.15s ease-out;
}
.modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(20,30,50,0.20);
    padding: 20px 24px;
    max-width: 440px;
    width: calc(100vw - 32px);
    z-index: 51;
    animation: modalIn 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-sans);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
    from { opacity: 0; transform: translate(-50%, -46%) scale(0.98); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.modal-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.modal-title {
    font-family: var(--font-serif);
    font-size: 18px; font-weight: 700;
    color: var(--ink);
    margin: 0; line-height: 1.3;
}
.modal-close {
    background: none; border: none;
    font-size: 22px; color: var(--muted);
    cursor: pointer; padding: 0 4px; line-height: 1;
}
.modal-close:hover { color: var(--ink); }
.modal-body {
    font-size: 14px; color: var(--body);
    line-height: 1.55;
    margin: 0 0 18px;
}
.modal-actions {
    display: flex; gap: 8px; justify-content: flex-end;
}
.modal-wide { max-width: 560px; padding-top: 28px; }


/* ── Reference / Footnote modal ────────────────────────────────────
   Styled to match the past Streamlit modal that authors are used to:
   modal card with type toggle at top, "pinned to block" preview,
   text area, optional URL, Save/Cancel. */
.fn-modal {
    /* Custom shell — full-viewport z-stack with our own backdrop
       instead of piggybacking on the base `.modal` positioning
       (which centres the card via translate). */
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    padding: 0; margin: 0;
    background: none; border: none; box-shadow: none;
    transform: none;
    z-index: 60;
    max-width: none;
    overflow: hidden;
    animation: fadeIn 120ms ease-out;
}
.fn-modal .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 25, 0.42);
}
.fn-modal .modal-card {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--paper, #fff);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(20,30,50,0.22);
    padding: 22px 24px;
    animation: modalIn 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fn-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}
.fn-type-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: var(--paper-2, #fbf8f2);
    padding: 6px;
    border-radius: 8px;
}
.fn-type-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--body, #3a372f);
    cursor: pointer;
    user-select: none;
}
.fn-type-choice input[type=radio] { margin: 0; }
.fn-type-choice-active {
    background: var(--paper, #fff);
    border-color: #4a7658;
    color: #2e5b3d;
    box-shadow: 0 1px 2px rgba(20,30,25,0.06);
}
.fn-pin {
    background: #eaf3ec;
    border-left: 3px solid #4a7658;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12.5px;
}
.fn-pin-label {
    margin: 0 0 4px;
    color: #2e5b3d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 10.5px;
}
.fn-pin-preview {
    margin: 0;
    color: var(--ink, #2a2820);
    font-size: 12px;
    line-height: 1.4;
    background: rgba(255,255,255,0.6);
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    word-break: break-word;
    max-width: 100%;
}
.fn-pin-hint {
    margin: 6px 0 0;
    color: var(--muted, #857f70);
    font-size: 11.5px;
    font-style: italic;
}
.fn-field-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink, #2a2820);
    margin: 4px 0 -4px;
}
.fn-optional {
    font-weight: 400;
    font-style: italic;
    color: var(--muted, #857f70);
    margin-left: 4px;
}
.fn-hint {
    margin: 0;
    font-size: 11.5px;
    color: var(--muted, #857f70);
    line-height: 1.4;
}
.fn-modal .modal-actions {
    margin-top: 4px;
}

/* Info-modal metadata table */
.info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 4px 0 16px;
}
.info-table th {
    text-align: left;
    color: var(--muted);
    font-weight: 500;
    padding: 6px 12px 6px 0;
    vertical-align: top;
    white-space: nowrap;
    width: 40%;
}
.info-table td {
    padding: 6px 0;
    color: var(--body);
    vertical-align: top;
}
.info-table .info-section {
    padding-top: 14px;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-top: 1px solid var(--hairline);
}

/* Manage modal — two side-by-side option rows (Archive + Delete). */
.manage-row {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 12px 14px; margin: 10px 0 0;
    background: var(--panel); border: 1px solid var(--hairline);
    border-radius: 8px;
}
.manage-row-text {
    flex: 1; font-size: 13px; line-height: 1.5;
    display: flex; flex-direction: column; gap: 3px;
}
.manage-row-text strong { color: var(--ink); font-weight: 600; }
.manage-row-text span   { color: var(--muted); font-size: 12px; }
.manage-row.manage-row-danger {
    background: #FBF3F1;
    border-color: var(--error-border);
}
.manage-row.manage-row-danger strong { color: var(--error-text); }
.mg-confirm-label {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px;
    font-size: 11.5px; color: var(--muted);
}
.mg-confirm-input {
    padding: 4px 8px !important;
    font-size: 12px !important;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    max-width: 220px;
}

/* Copy icon (📋) — muted, hover deepens.  Sits inline next to a link. */
.copy-btn {
    background: none; border: none;
    padding: 2px 4px; margin-left: 6px;
    font-size: 13px; line-height: 1;
    color: var(--muted); cursor: pointer;
    border-radius: 3px;
    transition: background 0.1s, color 0.1s;
}
.copy-btn:hover { background: var(--panel); color: var(--accent); }
.copy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Destructive button variant */
.btn-danger {
    background: var(--error-text); color: white;
    border: 1px solid var(--error-text);
    border-radius: 8px;
    padding: 8px 14px; font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, opacity 0.1s;
}
.btn-danger:hover:not(:disabled) { background: #6E2E1E; }
.btn-danger:disabled { opacity: 0.4; cursor: not-allowed; }

/* Tables */
.tbl {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    font-size: 13px;
}
.tbl th {
    background: var(--panel);
    text-align: left;
    padding: 10px 14px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--muted);
    border-bottom: 1px solid var(--hairline);
}
.tbl td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--hairline-2);
    color: var(--body);
}
.tbl tr:last-child td { border-bottom: none; }
.tbl .num  { text-align: right; font-variant-numeric: tabular-nums; }

/* Settings form */
.settings-form .field {
    margin-bottom: 16px;
}
.settings-form select.input {
    background-image:
      linear-gradient(45deg, transparent 50%, var(--muted) 50%),
      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position:
      calc(100% - 18px) 50%,
      calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 30px;
    cursor: pointer;
}
.toggle-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0;
    cursor: pointer;
}
.toggle-row input { margin-top: 4px; }
.toggle-row strong { display: block; color: var(--ink); font-weight: 600; }
.form-actions { display: flex; gap: 10px; margin-top: 4px; }

/* Cache summary metrics */
.metric-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0 0 18px;
}
@media (max-width: 700px) { .metric-row { grid-template-columns: 1fr; } }
.metric {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
}
.metric-label {
    font-size: 11.5px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 4px;
}
.metric-value {
    font-family: var(--font-serif);
    font-size: 24px; font-weight: 700; color: var(--ink);
    letter-spacing: -0.01em;
}
.metric-delta {
    font-size: 12px; color: var(--accent); font-weight: 600;
    margin-top: 2px;
}
.cache-line {
    font-size: 12px; color: var(--muted); line-height: 1.6;
    margin: 0 0 24px;
}

/* Disk log tail */
.log-tail {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11.5px; line-height: 1.5;
    color: var(--body);
    max-height: 400px;
    overflow: auto;
    white-space: pre-wrap;
    margin: 0;
}

/* ==============================================================
   Phase 3 — Wizard (steps 1..6)
============================================================== */

/* ── Compact wizbar (row of step buttons + Home) ─────────── */
.wizbar {
    display: grid;
    grid-template-columns: 40px repeat(6, 1fr);
    gap: 6px;
    margin: 4px 0 20px;
}
.wizbar-home,
.wizbar-btn {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    background: var(--paper);
    color: var(--body);
    font-size: 13px; font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: border-color 0.1s, background 0.1s, color 0.1s;
}
.wizbar-home {
    justify-content: center;
    font-size: 17px;
    padding: 6px 0;
    color: var(--muted);
}
.wizbar-home:hover, .wizbar-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.wizbar-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--panel);
    color: var(--muted);
    font-size: 11px; font-weight: 700;
    flex-shrink: 0;
}
.wizbar-label {
    text-overflow: ellipsis; overflow: hidden;
}
.wizbar-done  .wizbar-num { background: var(--accent-soft); color: var(--accent); }
.wizbar-done  { color: var(--muted); }
.wizbar-active {
    background: var(--accent); color: white; border-color: var(--accent);
    font-weight: 600;
}
.wizbar-active .wizbar-num { background: rgba(255,255,255,0.22); color: white; }
.wizbar-active:hover { color: white; border-color: var(--accent); }

/* ── Wizard forms ─────────────────────────────────────── */
.wizard-form textarea { font-family: inherit; }
.file-input {
    padding: 8px 12px;
    background: var(--paper);
    cursor: pointer;
}
.file-input::file-selector-button {
    background: var(--panel); color: var(--muted);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    padding: 6px 12px; margin-right: 12px;
    font: inherit; cursor: pointer;
}
.file-input::file-selector-button:hover {
    border-color: var(--accent); color: var(--accent);
}

.alert-card { border-color: var(--attention-border); background: var(--attention-bg); }
.alert-card .page-h1 { color: var(--attention-text); }
.alert-attention {
    background: var(--attention-bg);
    border: 1px solid var(--attention-border);
    color: var(--attention-text);
    padding: 12px 14px; border-radius: 8px;
    font-size: 13px;
    margin: 0 0 18px;
}

/* ── Step-2 view toggle (missing vs extracted) ────────── */
.view-toggle {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin: 0 0 18px;
}
@media (max-width: 800px) { .view-toggle { grid-template-columns: 1fr; } }
.view-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: var(--surface);
    color: var(--body);
    font-size: 13.5px;
    line-height: 1.4;
    text-decoration: none;
    transition: border-color 0.1s, background 0.1s;
}
.view-opt .dot {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--hairline);
    background: transparent;
    flex-shrink: 0;
}
.view-opt:hover { border-color: var(--accent); }
.view-opt.view-active {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.view-opt.view-active .dot {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: inset 0 0 0 2px white;
}
.view-count {
    margin-left: auto;
    font-family: var(--font-serif);
    font-weight: 700;
    color: var(--muted);
    font-size: 15px;
    white-space: nowrap;
}
.view-active .view-count { color: var(--accent); }

/* ── Field cards (Step 2) ───────────────────────────── */
.field-list { display: flex; flex-direction: column; gap: 12px; }
.field-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
}
.field-card-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 8px;
}
.field-card-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.field-card-name {
    font-size: 15px; font-weight: 600; color: var(--ink);
}
.field-card-row {
    font-size: 11px; color: var(--faint); font-family: ui-monospace, Menlo, monospace;
}
.field-card-meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin: 6px 0 12px;
}
.meta-label {
    font-size: 10.5px; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--muted); font-weight: 600;
    margin-bottom: 3px;
}
.meta-value { font-size: 13px; color: var(--body); line-height: 1.4; }

.val-box {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--body);
    font-family: var(--font-serif);
    line-height: 1.5;
}
.val-empty  { font-style: italic; color: var(--faint); font-family: var(--font-sans); }
.val-strike { text-decoration: line-through; color: var(--faint); }

.val-deleted {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: #f7f3ec;
}
.val-deleted-tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #a89f89;
    font-family: var(--font-sans);
    font-weight: 600;
    background: #ede9dd;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
}

.field-card-extract { margin: 6px 0 10px; }
.field-card-extract summary {
    font-size: 12px; color: var(--muted);
    cursor: pointer; padding: 4px 0;
}
.extract-block {
    background: var(--panel);
    border-left: 3px solid var(--hairline);
    padding: 8px 12px;
    font-family: var(--font-serif); font-size: 13px;
    color: var(--body); line-height: 1.5;
    margin-top: 4px;
}

.field-card-form { margin-top: 10px; }
.field-card-form textarea { margin-bottom: 8px; }
.field-card-form .form-actions { margin: 4px 0 0; }

/* Resolution radios (3 modes: leave / input / remove) */
.res-radios {
    display: flex; flex-wrap: wrap; gap: 12px 20px;
    margin: 6px 0 10px;
}
.res-opt {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--body);
    cursor: pointer;
    padding: 3px 0;
}
.res-opt input { margin: 0; }
.res-opt:hover span { color: var(--accent); }

.res-panel {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 6px;
}
.remove-warning {
    font-size: 13px; color: var(--muted);
    margin: 0 0 10px; line-height: 1.5;
}
.remove-warning strong { color: var(--attention-text); }

.field-card-notes {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px dashed var(--hairline);
}
.notes-body {
    font-size: 12.5px; color: var(--muted);
    line-height: 1.5; margin: 0;
    font-family: var(--font-serif);
}

/* Artefact grid (Step 3) */
.artefact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 6px 0 12px;
}
@media (max-width: 780px) { .artefact-grid { grid-template-columns: 1fr; } }
.artefact-card {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
}
.artefact-card.artefact-missing { opacity: 0.72; }
.artefact-icon {
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--panel);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--muted);
    flex-shrink: 0;
}
.artefact-body { flex: 1; }
.artefact-body h3 {
    margin: 0 0 4px;
    font-size: 14px; font-weight: 700; color: var(--ink);
    font-family: var(--font-serif);
}
.artefact-body p { margin: 0 0 8px; font-size: 12px; }
.artefact-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.artefact-replace { cursor: pointer; }

.progress-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 6px;
}

/* Progress bar (Steps 3, 4) */
.progress-wrap { margin: 6px 0; }
.progress-bar {
    height: 8px;
    background: var(--panel);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}
.progress-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.4s ease-out;
}
.progress-line {
    display: flex; gap: 8px; align-items: baseline;
    font-size: 13px;
}
.progress-pct {
    font-family: var(--font-serif);
    font-weight: 700; color: var(--ink);
    font-size: 15px;
    min-width: 42px;
}
.progress-msg { color: var(--body); }
.progress-extra { color: var(--muted); font-size: 12px; }

/* Spinner — 3-dot pulse showing the process is alive */
.spinner {
    display: inline-block;
    width: 12px; height: 12px;
    border: 2px solid var(--panel);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 2px;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Field priority badges */
.badge {
    display: inline-block;
    padding: 3px 8px; border-radius: 12px;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.badge-p1 { background: var(--error-bg);     color: var(--error-text);     border: 1px solid var(--error-border); }
.badge-p2 { background: var(--attention-bg); color: var(--attention-text); border: 1px solid var(--attention-border); }
.badge-p3 { background: var(--neutral-bg);   color: var(--neutral-text);   border: 1px solid var(--neutral-border); }

/* ==============================================================
   Phase 4a — Editor page (sticky nav + palette + word-processor
   body with hover-reveal annotation tooltips).
============================================================== */

/* ── Sticky section-nav strip ─────────────────────────── */
.ed-nav {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 16px;
    padding: 10px 16px;
    background: rgba(250, 248, 243, 0.96);
    backdrop-filter: blur(8px);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    margin: 0 0 24px;
}
.ed-nav-btn {
    border: 1px solid var(--hairline);
    background: white; color: var(--body);
    padding: 6px 12px; border-radius: 6px;
    font-size: 13px; font-weight: 500;
    cursor: pointer;
}
.ed-nav-btn:hover { border-color: var(--accent); color: var(--accent); }

.ed-nav-title {
    display: flex; align-items: baseline; gap: 12px;
    font-family: var(--font-serif);
}
.ed-nav-num {
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--muted); font-weight: 600;
    font-family: var(--font-sans);
}
.ed-nav-name { font-size: 17px; font-weight: 700; color: var(--ink); }
.ed-nav-dots {
    margin-left: auto; display: flex; gap: 4px; align-items: center;
}
.dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--hairline);
    transition: background 0.12s, transform 0.12s;
}
.dot:hover     { background: var(--muted); transform: scale(1.3); }
.dot-active    { background: var(--accent); width: 10px; height: 10px; }
.ed-nav-back {
    padding: 6px 12px; border-radius: 6px;
    font-size: 12px; color: var(--muted);
    border: 1px solid transparent;
}
.ed-nav-back:hover { color: var(--accent); border-color: var(--hairline); }

/* Prominent Freeze-for-review CTA on the editor sticky nav strip.
   Rendered as either an <a> ("manage review" state, when frozen) or
   a <button> inside a POST form ("Freeze for review" state, when
   unfrozen — the form skips the /wizard/6 confirmation card and
   freezes in one click), so the reset properties below cover both. */
.ed-nav-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 6px;
    background: var(--accent); color: white;
    font-size: 13px; font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    letter-spacing: 0.005em;
    border: 1px solid var(--accent);
    box-shadow: 0 2px 6px rgba(47,107,79,0.18);
    transition: background 0.12s, transform 0.05s, box-shadow 0.12s;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.ed-nav-cta:hover {
    background: var(--accent-hover);
    box-shadow: 0 3px 10px rgba(47,107,79,0.24);
}
.ed-nav-cta:active { transform: translateY(1px); }

/* When already frozen — muted amber "manage" state instead of green. */
.ed-nav-cta-frozen {
    background: var(--attention-bg);
    color: var(--attention-text);
    border-color: var(--attention-border);
    box-shadow: none;
}
.ed-nav-cta-frozen:hover {
    background: #F3E2C0;
    color: var(--attention-text);
    box-shadow: none;
}

/* Small companion Unfreeze button next to the Frozen pill. Muted
   secondary look so it doesn't compete with the primary "manage
   review" affordance, but easy to find when the author needs it. */
.ed-nav-unfreeze {
    display: inline-flex; align-items: center;
    padding: 7px 12px;
    margin-left: 6px;
    border-radius: 6px;
    background: transparent;
    color: var(--muted, #6D6D5E);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    letter-spacing: 0.005em;
    border: 1px solid var(--hairline, #e5e2dc);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
}
.ed-nav-unfreeze:hover {
    background: var(--paper-hi, #FFFFFF);
    color: var(--body, #2A2A24);
    border-color: var(--body, #2A2A24);
}
.ed-nav-unfreeze:active { transform: translateY(1px); }

/* ── Palette drawer (left side) ──────────────────────── */
.palette {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 340px;
    background: var(--paper);
    border-right: 1px solid var(--hairline);
    box-shadow: 8px 0 32px rgba(0,0,0,0.08);
    padding: 20px 8px 20px 20px;
    transform: translateX(-100%);
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 40;
    overflow-y: auto;
}
.palette.open { transform: translateX(0); }
.palette-scrim {
    position: fixed; inset: 0; background: rgba(0,0,0,0.24);
    opacity: 0; pointer-events: none;
    transition: opacity 0.24s;
    z-index: 30;
}
.palette-scrim.open { opacity: 1; pointer-events: auto; }
.palette-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 12px 12px 4px; margin-bottom: 8px;
    border-bottom: 1px solid var(--hairline);
}
.palette-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--muted); font-weight: 600;
}
.palette-close {
    background: none; border: none; font-size: 24px; color: var(--muted);
    cursor: pointer; line-height: 1; padding: 0 6px;
}
.palette-close:hover { color: var(--ink); }
.palette-list { list-style: none; padding: 0; margin: 0; }
.palette-item a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 6px;
    color: var(--body); transition: background 0.1s;
}
.palette-item a:hover { background: var(--panel); }
.palette-item.palette-active a { background: var(--panel); font-weight: 600; }
.palette-item.palette-active .palette-num {
    background: var(--accent); color: white; border-color: var(--accent);
}
.palette-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 6px;
    border: 1px solid var(--hairline); background: white;
    font-size: 12px; font-weight: 600; color: var(--muted);
    font-family: var(--font-serif);
    flex-shrink: 0;
}
.palette-name {
    font-size: 13px; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; flex: 1;
}

/* ── Section body typography ─────────────────────────── */
.section-body {
    max-width: 860px; margin: 0 auto;
    padding: 4px 4px 32px;
    font-family: var(--font-serif);
    font-size: 15px; line-height: 1.7; color: var(--body);
}
.section-body p { margin: 0 0 14px; }
.subhead {
    font-family: var(--font-serif);
    color: #2E5A82; font-weight: 700;
    letter-spacing: -0.005em;
    margin: 28px 0 12px;
}
.subhead-h2 { font-size: 20px; }
.subhead-h3 { font-size: 17px; color: #3B6FA0; }
.subhead-h4 { font-size: 15px; color: #4E7FB0; }

.section-rule {
    border: 0; border-top: 1px solid var(--hairline);
    margin: 24px 0;
}

.section-list { margin: 0 0 14px 22px; }
.section-list li { margin-bottom: 6px; }

.section-table {
    width: 100%; border-collapse: collapse;
    margin: 14px 0 18px;
    font-family: var(--font-sans);
    font-size: 13px;
}
.section-table th, .section-table td {
    border: 1px solid var(--hairline);
    padding: 6px 10px; text-align: left;
    vertical-align: top;
}
.section-table thead {
    background: var(--panel);
}
.section-table th { color: var(--ink); font-weight: 600; }

/* ── Editable block wrappers (invisible until interacted) ── */
.block {
    padding: 6px 10px;
    margin: 0 -10px 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: background 0.08s, border-color 0.08s;
}
.block:hover        { background: rgba(47,107,79,0.03); }
.block.block-active {
    background: rgba(47,107,79,0.06);
    border-color: var(--accent);
}
.block p { margin: 0; }

/* ── Inline annotations — subtle background, tooltip on hover ── */
.anno {
    position: relative;
    padding: 1px 3px;
    border-radius: 3px;
    /* `cursor: text` (not `help`) so users understand the highlight
       is still clickable/selectable body text — the `help` cursor
       previously used made the span look non-interactive and blocked
       users from click-to-edit.  Tooltip on hover is unaffected.
       Fixed 2026-08-25. */
    cursor: text;
    /* Explicit `pointer-events: auto` guards against any global
       reset elsewhere in the cascade — clicks on annotations MUST
       bubble to the containing .block for the editor's click
       handler to select it. */
    pointer-events: auto;
    transition: filter 0.1s;
}
.anno:hover { filter: brightness(0.94); }
.anno-extracted { background: #DCEEDD; }
.anno-inferred  { background: #FDEBC4; }
.anno-manual    { background: #EADCF6; }
.anno-need      { background: #FFDCB6; }
.anno-critical  { background: #F8CFD3; font-weight: 600; }
.anno-conditional { background: #D5E7F5; }   /* soft blue — trial-type conditional boilerplate */

/* Multi-line tooltip — the whole hover text is built server-side in
   `web/section_render.py::_build_tooltip` and stashed in the
   `data-tooltip` attribute.  `white-space: pre-line` renders the
   `\n` separators as line breaks; `max-width` lets long lines wrap.
   Rewritten 2026-08-22 so every hover shows description +
   Field/Parameter + Notes/explanation (or Rule for CONDITIONAL)
   even when the model didn't cite a source or the field lookup
   missed. */
.anno::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px); left: 0;
    background: var(--ink); color: white;
    padding: 8px 12px; border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 11px; line-height: 1.5;
    white-space: pre-line;
    max-width: 360px; width: max-content;
    box-shadow: 0 4px 14px rgba(0,0,0,0.16);
    opacity: 0; pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.12s, transform 0.12s;
    z-index: 20;
}
.anno-extracted::after   { border-left: 3px solid #2F6B4F; }
.anno-inferred::after    { border-left: 3px solid #B87A1E; }
.anno-manual::after      { border-left: 3px solid #6A44A0; }
.anno-need::after        { border-left: 3px solid #C25E24; }
.anno-critical::after    { border-left: 3px solid #A72832; }
.anno-conditional::after { border-left: 3px solid #2F6B9A; }
.anno:hover::after { opacity: 1; transform: translateY(0); }

/* ── Floating action toolbar on selected block ── */
.block-actions {
    position: absolute;
    display: flex; gap: 4px;
    background: var(--ink); border-radius: 6px;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
    z-index: 30;
    font-family: var(--font-sans);
}
.block-action {
    background: transparent; border: 0; color: white;
    padding: 5px 12px; border-radius: 4px;
    font-size: 12px; font-weight: 500;
    cursor: pointer;
}
.block-action:hover { background: rgba(255,255,255,0.14); }
.block-action-ai    { color: #A5D6BB; }
.block-action-ai:hover { background: rgba(165,214,187,0.16); color: white; }

/* ── Block edit mode (inline textarea replacing the paragraph) ── */
.block-editing { border-color: var(--accent) !important; background: #F1F6F1; }
.block-edit-area {
    width: 100%;
    font-family: var(--font-serif);
    font-size: 15px; line-height: 1.7;
    color: var(--body);
    background: white;
    border: 1px solid var(--hairline);
    border-radius: 6px;
    padding: 10px 12px;
    resize: vertical;
    min-height: 100px;
}
.block-edit-area:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(47,107,79,0.14);
}
.block-edit-mono {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12.5px; line-height: 1.5;
    white-space: pre;
    overflow-x: auto;
}

/* Table blocks — same hover/active affordance as paragraphs. */
.block-table { padding: 6px 10px; margin: 14px -10px 18px; }
.block-table .section-table { margin: 0; }
.block-edit-actions {
    display: flex; align-items: center; gap: 8px; margin-top: 8px;
    flex-wrap: wrap;
    font-family: var(--font-sans);
}
.block-edit-hint {
    font-size: 12px; color: var(--muted);
    margin-left: auto;
    max-width: 480px; text-align: right;
}

/* ── Edited-block marker + frozen mode ── */
.block-edited { border-color: var(--accent-soft); }
.block-mark {
    font-family: var(--font-sans);
    font-size: 10.5px;
    color: var(--accent);
    letter-spacing: 0.02em;
    margin-left: 8px;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.75;
}
.block-frozen { cursor: default; }
.block-frozen:hover { background: transparent; }

/* ── AI-assist preview + loading ── */
.block-ai {
    background: #F7F4EB;
    border-color: var(--attention-border);
    padding: 12px 14px;
}
.ai-preview-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 10px;
    font-family: var(--font-sans);
}
.ai-mode-badge {
    display: inline-block;
    background: var(--attention-bg); color: var(--attention-text);
    border: 1px solid var(--attention-border);
    padding: 3px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.04em;
}
.ai-preview-hint { font-size: 12px; color: var(--muted); }
.ai-preview-grid {
    display: grid; gap: 10px;
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) { .ai-preview-grid { grid-template-columns: 1fr; } }
.ai-side {
    background: white; border: 1px solid var(--hairline);
    border-radius: 6px; padding: 10px 12px;
}
.ai-side-old { border-color: #E3D5C1; }
.ai-side-new { border-color: var(--accent-soft); }
.ai-side-body {
    font-family: var(--font-serif); font-size: 14px; line-height: 1.6;
    color: var(--body);
    white-space: pre-wrap;
    margin-top: 4px;
}
.ai-preview-actions {
    display: flex; align-items: center; gap: 10px;
    margin-top: 12px;
    font-family: var(--font-sans);
}
.ai-loading {
    padding: 24px 12px;
    text-align: center; color: var(--muted);
    font-family: var(--font-sans); font-size: 13px;
}
.ai-loading .spinner { margin-right: 10px; vertical-align: middle; }

/* .next-section-armed — auto-advance behaviour removed 2026-08-05,
   styles kept as no-ops in case any external tooling references the
   class. */
.next-section-armed { /* no-op */ }
@keyframes nextPulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(47,107,79,0.5); }
    100% { transform: scale(1.02); box-shadow: 0 0 0 20px rgba(47,107,79,0); }
}

/* ── Change-summary table cells ── */
.tbl td.diff-old {
    max-width: 260px;
    font-family: var(--font-serif); font-size: 12px;
    color: var(--muted);
    text-decoration: line-through;
}
.tbl td.diff-new {
    max-width: 260px;
    font-family: var(--font-serif); font-size: 12px;
    color: var(--ink);
    background: rgba(47,107,79,0.06);
}

/* ── Phase 5: comments + reviewer panel ── */
.comment-panel {
    position: absolute;
    width: 380px;
    background: white; border: 1px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.16);
    padding: 12px 14px;
    z-index: 40;
    font-family: var(--font-sans);
}
.comment-thread { }
.comment-thread-head {
    font-size: 11px; color: var(--muted);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 8px;
}
.comment-list { list-style: none; padding: 0; margin: 0 0 10px; }
.comment-item {
    padding: 8px 10px; margin-bottom: 6px;
    background: var(--panel); border-radius: 6px;
    font-size: 13px;
}
.comment-item.comment-mine {
    background: var(--accent-soft);
}
.comment-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 6px; margin-bottom: 3px;
}
.comment-meta strong { font-size: 12px; color: var(--ink); }
.comment-meta span { font-size: 11px; }
.comment-body { margin: 0; font-size: 13px; color: var(--body); line-height: 1.5; }
.comment-form { margin-top: 8px; }
.comment-form textarea {
    width: 100%; margin-bottom: 6px;
    font-family: inherit; font-size: 13px;
}

/* Author review-mgmt thread listing */
.review-block-thread {
    padding: 10px 12px; margin-bottom: 12px;
    background: var(--panel); border: 1px solid var(--hairline);
    border-radius: 8px;
}
.review-block-head {
    font-size: 11px; color: var(--muted);
    padding-bottom: 6px; margin-bottom: 8px;
    border-bottom: 1px dashed var(--hairline);
}
.review-thread-list { list-style: none; padding: 0; margin: 0; }
.review-thread-list > li { padding: 6px 0; }
.review-thread-meta {
    display: flex; justify-content: space-between;
    font-size: 11.5px; color: var(--muted);
    margin-bottom: 2px;
}
.review-thread-meta strong { color: var(--ink); }
.review-thread-body {
    margin: 0; font-size: 13px; color: var(--body);
    font-family: var(--font-serif); line-height: 1.55;
}

/* ── Small toast notification (top-right) ── */
.toast {
    position: fixed; top: 20px; right: 20px;
    background: var(--ink); color: white;
    padding: 10px 16px; border-radius: 6px;
    font-family: var(--font-sans); font-size: 13px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.22);
    z-index: 60;
    animation: toastIn 0.2s ease-out;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Next-section pill at the bottom */
.next-section {
    display: inline-block;
    margin-top: 32px; padding: 12px 18px;
    background: var(--panel); border: 1px solid var(--hairline);
    border-radius: 8px;
    color: var(--accent); font-weight: 600; font-size: 14px;
    font-family: var(--font-sans);
    transition: border-color 0.12s, transform 0.05s;
}
.next-section:hover { border-color: var(--accent); transform: translateX(2px); }

/* ==============================================================
   Sign-in page — split-screen, matches signin-page-mockup.html
============================================================== */
.signin-body {
    background: var(--paper); min-height: 100vh;
    font-family: var(--font-sans);
}
.signin-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}
@media (max-width: 900px) {
    .signin-shell { grid-template-columns: 1fr; }
    .signin-hero  { display: none; }
}

/* --- Left hero panel -------------------------------------- */
.signin-hero {
    position: relative;
    background:
      radial-gradient(ellipse at 30% 20%, #F4F1E5 0%, var(--paper) 55%, var(--panel-2) 100%);
    padding: 56px 60px;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.signin-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(107,107,98,0.06) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}
.signin-brand {
    display: flex; align-items: center; gap: 12px;
    position: relative; z-index: 1;
}
.signin-brand-mark {
    width: 38px; height: 38px; border-radius: 9px;
    background: var(--accent); color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px;
    font-family: var(--font-serif);
    box-shadow: 0 3px 10px rgba(47,107,79,0.18);
}
.signin-brand-name {
    font-size: 17px; font-weight: 700; letter-spacing: -0.005em;
    font-family: var(--font-serif);
    color: var(--ink);
}
.signin-brand-tag {
    font-size: 10.5px; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--muted);
    margin-left: 6px; font-weight: 500;
}

.signin-hero-body {
    position: relative; z-index: 1;
    max-width: 460px;
    margin: 60px 0 20px;
}
.signin-hero-h {
    font-family: var(--font-serif);
    font-size: 42px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.12;
    margin: 0 0 20px; color: var(--ink);
}
.signin-hero-h em {
    font-style: italic; color: var(--accent);
    font-weight: 700;
}
.signin-hero-sub {
    font-size: 15px; color: var(--muted);
    line-height: 1.6; max-width: 44ch;
    margin: 0 0 32px;
}

.signin-feature-list {
    display: flex; flex-direction: column; gap: 14px;
    list-style: none; padding: 0; margin: 0;
}
.signin-feature-list li {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 14px; color: var(--body);
}
.signin-feature-icon {
    width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; margin-top: 1px;
}
.signin-feature-text { line-height: 1.45; }
.signin-feature-text strong { font-weight: 600; color: var(--ink); }
.signin-feature-text span   { color: var(--muted); font-size: 13px; }

.signin-hero-foot {
    margin-top: auto; position: relative; z-index: 1;
    color: var(--muted); font-size: 11.5px;
    display: flex; align-items: center; gap: 16px;
    padding-top: 24px; border-top: 1px solid var(--hairline);
}
.signin-hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--hairline);
    padding: 4px 10px; border-radius: 12px;
    color: var(--body); font-size: 11px; font-weight: 500;
}

/* --- Right form panel ------------------------------------ */
.signin-form-wrap {
    background: var(--paper-hi);
    display: flex; align-items: center; justify-content: center;
    padding: 48px 40px;
}
.signin-form-card {
    width: 100%; max-width: 380px;
    display: flex; flex-direction: column;
}
.signin-demo-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: #F1E4C6; color: #8A6510;
    padding: 4px 10px; border-radius: 10px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    margin-bottom: 20px; align-self: flex-start;
}
.signin-form-title {
    font-family: var(--font-serif);
    font-size: 26px; font-weight: 700; letter-spacing: -0.01em;
    margin: 0 0 8px; color: var(--ink);
}
.signin-form-sub {
    font-size: 13.5px; color: var(--muted);
    margin: 0 0 28px; line-height: 1.55;
}

.field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.field label {
    font-size: 12.5px; font-weight: 600;
    color: var(--body); letter-spacing: 0.005em;
}
.field-hint {
    font-size: 11.5px; color: var(--muted);
    margin-top: 2px;
}
.input {
    appearance: none; width: 100%;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 11px 12px;
    font-size: 14px; color: var(--body);
    font-family: inherit;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(47,107,79,0.12);
    background: white;
}
.input::placeholder { color: #A8A499; }

.row-inline {
    display: flex; align-items: center; justify-content: space-between;
    margin: 4px 0 20px;
    font-size: 12px; color: var(--muted);
}
.row-inline a { color: var(--accent); font-weight: 500; }
.row-inline a:hover { text-decoration: underline; }
.remember-me { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.btn-primary {
    appearance: none; width: 100%;
    background: var(--accent); color: white;
    border: none; border-radius: 8px;
    padding: 12px 14px;
    font-size: 14.5px; font-weight: 600;
    cursor: pointer; letter-spacing: 0.002em;
    transition: background 0.12s ease, transform 0.05s ease;
    font-family: inherit;
}
.btn-primary:hover  { background: var(--accent-hover); }
.btn-primary:active { transform: translateY(1px); }

.signin-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0 18px;
    color: var(--muted); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.14em;
}
.signin-divider::before, .signin-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--hairline);
}

.btn-google {
    appearance: none; width: 100%;
    background: white; color: var(--body);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 14px; font-weight: 500;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: background 0.12s ease, border-color 0.12s ease;
    font-family: inherit;
}
.btn-google:hover { background: var(--paper); border-color: var(--muted); }
.g-logo { width: 18px; height: 18px; flex-shrink: 0; }

.signin-foot-links {
    margin-top: 24px;
    text-align: center;
    font-size: 11.5px; color: var(--muted);
}
.signin-foot-links a {
    color: var(--muted);
    border-bottom: 1px dotted var(--hairline);
}
.signin-foot-links a:hover { color: var(--body); border-color: var(--muted); }


/* ═══════════════════════════════════════════════════════════
   Institutional Review (RFM) page — Phase 5b
   ═══════════════════════════════════════════════════════════ */

.cycle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rfm-add-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.rfm-add-actions { margin-left: auto; }

.rfm-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
}

.rfm-row {
    background: var(--paper, #fff);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 6px;
    padding: 14px 16px;
}
.rfm-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.rfm-row-titles {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.rfm-row-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rfm-label {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 600;
    color: var(--ink, #2a2820);
    background: var(--hairline-soft, #f4f1ea);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.rfm-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: 1px solid transparent;
}
.rfm-pill-draft                  { background: #f4f1ea; color: #6b6558; border-color: #dcd7cc; }
.rfm-pill-confirmed              { background: #eaf3ec; color: #2e5b3d; border-color: #c9dfcf; }
.rfm-pill-modifications_proposed { background: #fbf1dd; color: #6e4d18; border-color: #ead6a8; }
.rfm-pill-modifications_accepted { background: #e3ebf4; color: #2c4a6b; border-color: #c1d1e2; }

.rfm-body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    color: var(--body, #3a372f);
}
.rfm-authority {
    font-weight: 600;
    color: var(--ink, #2a2820);
}
.rfm-text {
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
}

.rfm-edit-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding: 12px;
    background: var(--paper-2, #fbf8f2);
    border-radius: 6px;
}
/* Honor the [hidden] attribute — the explicit display:flex above would
   otherwise beat the browser default [hidden] { display: none } and
   leak the Save/Cancel controls onto every card. */
.rfm-edit-form[hidden] { display: none; }

/* Applied to the RFM card while the "Suggest modification" AI call
   is in flight: dims the card and blocks pointer events so nothing
   else on it looks clickable. Cleared on the next page reload. */
.rfm-card-analyzing {
    opacity: 0.65;
    pointer-events: none;
    filter: grayscale(0.15);
    transition: opacity 0.15s ease-out, filter 0.15s ease-out;
}
.rfm-card-analyzing [data-suggest-btn] {
    pointer-events: none;
    cursor: wait;
}
.rfm-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.rfm-diff-box {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--paper-2, #fbf8f2);
    border-radius: 6px;
    border: 1px solid var(--hairline, #e5e2dc);
}
/* Bulk Accept-all / Reject-all row at the top of the diff box.
   Only rendered when at least one modification is still pending. */
.rfm-bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--hairline, #e5e2dc);
}
.rfm-bulk-label {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted, #6a655b);
}
.rfm-diff-item {
    padding: 10px 0;
    border-bottom: 1px dashed var(--hairline, #e5e2dc);
}
.rfm-diff-item:last-child { border-bottom: none; }
.rfm-diff-head {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 6px;
}
.rfm-diff-body {
    line-height: 1.55;
    color: var(--body, #3a372f);
}
.rfm-mod-status-accepted .rfm-diff-body { opacity: 0.7; }
.rfm-mod-status-rejected .rfm-diff-body { opacity: 0.5; }

/* ── Stacked before/after for RFM per-snippet diffs ── */
.rfm-ba {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.rfm-ba-old, .rfm-ba-new {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 8px 10px;
    border-radius: 4px;
    line-height: 1.5;
    font-size: 13px;
}
.rfm-ba-old {
    background: #fbe6e6;
    color: #8a1f1f;
}
.rfm-ba-old .rfm-ba-text { text-decoration: line-through; }
.rfm-ba-new {
    background: #e4f3e4;
    color: #1f5a2c;
}
.rfm-ba-label {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.5px;
    min-width: 60px;
    padding-top: 2px;
    opacity: 0.75;
}
.rfm-ba-text {
    flex: 1;
    white-space: pre-wrap;
    color: inherit;
    text-decoration-color: currentColor;
}
.rfm-mod-section {
    font-weight: 600;
    color: var(--ink, #2a2820);
    font-size: 13px;
}
.rfm-mod-status-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}
.rfm-mod-pending  { background: #f4f1ea; color: #6b6558; }
.rfm-mod-accepted { background: #dbebd6; color: #2e5b3d; }
.rfm-mod-rejected { background: #fbe6e6; color: #8a1f1f; }
.rfm-mod-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--hairline, #e5e2dc);
}


/* ── Track Changes markup — shared by RFM page + editor overlay ── */
.diff-del {
    background: #fbe6e6;
    color: #8a1f1f;
    text-decoration: line-through;
    padding: 0 2px;
    border-radius: 2px;
}
.diff-ins {
    background: #e4f3e4;
    color: #1f5a2c;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0 2px;
    border-radius: 2px;
}

/* Small text helper */
.small { font-size: 11px; }

.prior-cycles {
    margin: 0;
    padding: 0;
    list-style: none;
}
.prior-cycles li {
    padding: 6px 0;
    border-bottom: 1px dashed var(--hairline, #e5e2dc);
    color: var(--body, #3a372f);
}
.prior-cycles li:last-child { border-bottom: none; }

/* ── Inline RFM diff overlay in the editor ────────────────── */
.block-rfm-diff {
    background: linear-gradient(to right,
                                rgba(240, 220, 100, 0.10) 0%,
                                rgba(240, 220, 100, 0.05) 100%);
    border-left: 3px solid #d9b64e;
    padding-left: 10px;
    margin-left: -13px;
    position: relative;
}
.rfm-diff-inline {
    margin: 0;
    line-height: 1.55;
}
.block-rfm-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    background: #d9b64e;
    color: #3f2f0a;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    text-decoration: none;
    vertical-align: middle;
}
.block-rfm-tag:hover { background: #c8a63e; }


/* ═══════════════════════════════════════════════════════════
   Key Trial Metrics — inline previews (Step 3 + editor)
   ═══════════════════════════════════════════════════════════ */

/* ── Compact KTM panel on wizard/4 Generate Protocol ─────────────
   4 file chips in a 2×2 grid.  Secondary to the "Start generation"
   CTA — subtle framing, quick View/Download/Replace access without
   navigating back to wizard/3. */
.ktm-panel {
    background: var(--paper-2, #fbf8f2);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 14px 0 16px;
}
.ktm-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}
.ktm-panel-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    color: var(--muted, #857f70);
}
.ktm-panel-manage {
    font-size: 12px;
    color: var(--accent, #3d6e4e);
    text-decoration: none;
    font-weight: 500;
}
.ktm-panel-manage:hover { text-decoration: underline; }
.ktm-panel-empty {
    font-size: 13px;
    color: var(--muted, #857f70);
    padding: 8px 4px;
    font-style: italic;
}
.ktm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.ktm-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--paper, #fff);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 6px;
    padding: 8px 10px;
    min-height: 46px;
}
.ktm-chip-missing { opacity: 0.7; border-style: dashed; }
.ktm-chip-icon {
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-2, #fbf8f2);
    border-radius: 4px;
    font-size: 16px;
    color: var(--muted, #857f70);
    flex-shrink: 0;
}
.ktm-chip-meta {
    flex: 1;
    min-width: 0;   /* allow text-overflow to work */
}
.ktm-chip-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink, #2a2820);
    line-height: 1.2;
}
.ktm-chip-filename {
    font-size: 11px;
    color: var(--muted, #857f70);
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ktm-chip-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.ktm-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--muted, #857f70);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.ktm-icon-btn:hover {
    background: var(--paper-2, #fbf8f2);
    border-color: var(--hairline, #e5e2dc);
    color: var(--accent, #3d6e4e);
}
@media (max-width: 720px) {
    .ktm-grid { grid-template-columns: 1fr; }
}


/* Stacked full-width artefact cards on Step 3 so the inline preview
   has real horizontal room to render tables and slide images. */
.artefact-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}
.artefact-list .artefact-card {
    display: block;
    padding: 14px 16px;
    background: var(--paper, #fff);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 6px;
}
.artefact-card-head {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 14px;
    align-items: center;
}
.artefact-card .artefact-icon {
    font-size: 22px;
    color: var(--muted, #857f70);
    line-height: 1;
}
.artefact-card .artefact-titles h3 {
    margin: 0;
    font-size: 15px;
    color: var(--ink, #2a2820);
}
.artefact-card .artefact-titles p {
    margin: 2px 0 0;
    font-size: 12px;
}
.artefact-card .artefact-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.artefact-preview-pane {
    margin-top: 14px;
    padding: 12px;
    background: var(--paper-2, #fbf8f2);
    border-radius: 6px;
    border: 1px solid var(--hairline, #e5e2dc);
}
.preview-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted, #857f70);
    padding: 6px 4px;
}
.preview-error {
    padding: 10px 12px;
    background: #fbe6e6;
    color: #8a1f1f;
    border-radius: 4px;
    font-size: 13px;
}
.preview-warning {
    padding: 10px 12px;
    background: #fbf1dd;
    color: #6e4d18;
    border-radius: 4px;
    font-size: 13px;
}

/* Multi-sheet workbook tab strip */
.xlsx-preview-tabs .sheet-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--hairline, #e5e2dc);
    padding-bottom: 4px;
    flex-wrap: wrap;
}
.sheet-tab {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    font-size: 12px;
    color: var(--muted, #857f70);
    cursor: pointer;
}
.sheet-tab:hover { color: var(--body, #3a372f); }
.sheet-tab-active {
    background: var(--paper, #fff);
    border-color: var(--hairline, #e5e2dc);
    color: var(--ink, #2a2820);
    font-weight: 600;
}

/* Slide gallery for PPTX previews */
.pptx-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.pptx-slide {
    margin: 0;
    padding: 8px;
    background: var(--paper, #fff);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 4px;
    text-align: center;
}
.pptx-slide img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--hairline-soft, #f4f1ea);
    border-radius: 3px;
}
.pptx-slide figcaption {
    margin-top: 6px;
    font-size: 11px;
    color: var(--muted, #857f70);
}

/* ── Metric preview modal — large, centred, scrolls inside ── */
.modal.modal-metric {
    width: 92vw;
    max-width: 1400px;
    height: 88vh;
    max-height: none;
    top: 6vh;
    left: 4vw;
    right: auto;
    transform: none;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* [hidden] otherwise loses the cascade fight with the display:flex above. */
.modal.modal-metric[hidden] { display: none; }
.modal.modal-metric .modal-head {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hairline, #e5e2dc);
}
.modal.modal-metric .modal-title {
    margin: 0;
    font-size: 18px;
    color: var(--ink, #2a2820);
}
.modal-metric-body {
    flex: 1 1 auto;
    overflow: auto;
    padding-right: 6px;
}
/* PPTX slides render at native size inside the modal */
.modal-metric-body .pptx-preview {
    grid-template-columns: 1fr;
    max-width: 100%;
}
.modal-metric-body .pptx-slide img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.modal-metric-body .xlsx-preview .rich-table,
.modal-metric-body .xlsx-preview table {
    max-width: 100%;
}

/* Editor's compact Key Trial Metrics button bar (replaces the old
   permanently-expanded inline panel — buttons open the modal instead). */
.ed-metrics-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 12px auto 20px;
    padding: 10px 32px;
}
.ed-metrics-bar-label {
    font-weight: 600;
    color: var(--ink, #2a2820);
    font-size: 13px;
    margin-right: 4px;
}

/* Editor pinned Key Trial Metrics panel */
.ed-metrics {
    max-width: 900px;
    margin: 12px auto 20px;
    padding: 0 32px;
}
.ed-metrics details {
    background: var(--paper-2, #fbf8f2);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 6px;
    padding: 8px 14px;
}
.ed-metrics-summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    color: var(--ink, #2a2820);
    padding: 6px 0;
    list-style: none;
}
.ed-metrics-summary::marker { display: none; }
.ed-metrics-summary::-webkit-details-marker { display: none; }
.ed-metrics-summary::before {
    content: "▾ ";
    color: var(--muted, #857f70);
    font-weight: normal;
}
details:not([open]) .ed-metrics-summary::before { content: "▸ "; }
.ed-metrics-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--hairline, #e5e2dc);
}
.ed-metric-block {
    background: var(--paper, #fff);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 5px;
    padding: 10px 12px;
}
.ed-metric-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.ed-metric-head h3 {
    margin: 0;
    font-size: 14px;
    color: var(--ink, #2a2820);
}
.ed-metric-preview {
    overflow-x: auto;
}
.ed-metric-preview .pptx-preview {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}


/* ═══════════════════════════════════════════════════════════
   Two-tier lifecycle navigation
   ═══════════════════════════════════════════════════════════ */

/* Top-bar breadcrumb (sits inside .topbar, before user avatar) */
.topbar-crumbs {
    margin-left: auto;
    margin-right: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted, #857f70);
}
.topbar-crumbs a {
    color: var(--muted, #857f70);
    text-decoration: none;
}
.topbar-crumbs a:hover { color: var(--ink, #2a2820); }
.topbar-crumbs span[aria-current] {
    color: var(--ink, #2a2820);
    font-weight: 600;
}
.crumb-sep {
    color: #b8b1a1;
    padding: 0 2px;
}

/* Two-tier nav wrapper */
.lifenav {
    margin: 0;
}

/* ── Top bar (dark) ── */
.lifenav-top {
    background: #1e2b23;   /* dark forest — matches Clean Paper accent tone */
    border-bottom: 1px solid #0f1a13;
}
.lifenav-top-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.lifechip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    color: #cdcbb8;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    cursor: default;
}
a.lifechip { cursor: pointer; }
a.lifechip:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f2efe4;
}
.lifechip-num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.lifechip-dot { opacity: 0.6; }
.lifechip-active {
    background: #f5f1e6;
    color: #1e2b23;
    border-color: #f5f1e6;
    font-weight: 600;
}
.lifechip-active .lifechip-dot { opacity: 0.5; }
.lifechip-pending {
    color: #8a8770;
}
.lifechip-home {
    color: #f2efe4;
    padding-left: 10px;
    padding-right: 10px;
}
.lifechip-home:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
}
.lifechip-home-icon {
    font-size: 15px;
    line-height: 1;
    margin-right: 2px;
}
.lifenav-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 4px;
}
.lifechip-lock {
    font-size: 11px;
    margin-left: 4px;
    opacity: 0.85;
    vertical-align: middle;
}
/* Green tick that appears on a stage chip once it's fully done —
   quick visual signal that generation / author review / etc. is
   behind the user. */
.lifechip-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    border-radius: 999px;
    background: #4fa668;
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

/* Checklist inside the locked-row modal */
.lc-checklist {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}
.lc-check {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--body, #3a372f);
}
.lc-check + .lc-check {
    margin-top: 2px;
}
.lc-check-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: #ede9dd;
    color: #a89f89;
}
.lc-check-done { color: #2e5b3d; }
.lc-check-done .lc-check-mark { background: #dbebd6; color: #2e5b3d; }
.lc-check-progress { color: #7a5a1a; font-weight: 500; }
.lc-check-progress .lc-check-mark { background: #ecdfbc; color: #7a5a1a; }
.lc-check-pending .lc-check-label,
.lc-check-pending .lc-check-note {
    color: var(--muted, #857f70);
}
.lc-check-note {
    font-size: 11.5px;
    color: var(--muted, #857f70);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.lc-check-done .lc-check-note {
    color: #6b8d76;
}

/* ═══════════════════════════════════════════════════════════
   Reviewer landing + reviewer view
   ═══════════════════════════════════════════════════════════ */

.reviewer-landing {
    max-width: 640px;
    margin: 24px auto 60px;
    padding: 0 24px;
}
.reviewer-landing-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    align-items: center;
}

/* Two-column reviewer layout — section body + right comments rail.
   Section navigation is a slide-in drawer (.palette / .palette-scrim)
   toggled from the ≡ Sections button in .ed-nav, exactly matching
   the author editor. */
.reviewer-page { max-width: 1240px; }
.reviewer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}
.reviewer-layout .reviewer-body { min-width: 0; }

/* When rail is hidden, collapse to a single centred column. */
.reviewer-layout:has(.reviewer-rail[hidden]) {
    grid-template-columns: minmax(0, 1fr);
}
.reviewer-layout:has(.reviewer-rail[hidden]) .reviewer-body {
    max-width: 780px;
    margin: 0 auto;
}

.reviewer-rail {
    position: sticky;
    top: 12px;
    background: var(--paper-2, #fbf8f2);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 8px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* [hidden] otherwise loses the cascade fight with display:flex above. */
.reviewer-rail[hidden] { display: none; }
.reviewer-rail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--hairline, #e5e2dc);
    background: var(--paper, #fff);
}
.reviewer-rail-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #2a2820);
}
.reviewer-rail-body {
    padding: 12px 14px;
    overflow-y: auto;
    flex: 1 1 auto;
}

@media (max-width: 900px) {
    .reviewer-layout,
    .reviewer-layout:has(.reviewer-rail[hidden]) {
        grid-template-columns: 1fr;
    }
    .reviewer-rail {
        position: static;
        max-height: 60vh;
    }
}

/* Comment thread + reactions inside the rail */
.comment-thread { font-size: 13px; }
.comment-thread-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11px;
    color: var(--muted, #857f70);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--hairline, #e5e2dc);
}
.comment-list { list-style: none; margin: 0 0 10px; padding: 0; }
.comment-item {
    padding: 8px 10px;
    background: var(--paper, #fff);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 6px;
    margin-bottom: 6px;
}
.comment-item.comment-mine {
    background: #eef4ee;
    border-color: #cadecd;
}
.comment-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 4px;
}
.comment-meta strong { color: var(--ink, #2a2820); font-weight: 600; }
.comment-body {
    margin: 0 0 6px;
    line-height: 1.45;
    color: var(--body, #3a372f);
    white-space: pre-wrap;
}
.comment-reactions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.reaction-btn {
    background: var(--paper-2, #fbf8f2);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    cursor: pointer;
    color: var(--muted, #857f70);
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 100ms ease;
}
.reaction-btn:hover { background: #efece2; }
.reaction-active {
    background: #dbebd6;
    color: #2e5b3d;
    border-color: #b7d5b0;
}
.reaction-active-neg {
    background: #fbe6e6;
    color: #8a1f1f;
    border-color: #eab8b8;
}
.reaction-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.comment-form { display: flex; flex-direction: column; gap: 6px; }
.comment-form textarea { font-size: 13px; }

/* Per-block comment chip (💬 N) — inline default; the reviewer view
   overrides to a floating left-margin position (see below). */
.block-comments-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 1px 8px;
    background: #eaf3ec;
    color: #2e5b3d;
    border: 1px solid #c9dfcf;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    vertical-align: middle;
}
.block-comments-chip:hover { background: #d8ecdc; }

/* Reviewer view: chip sits just outside the block's left edge, right-
   aligned with a small gap so it hugs the paragraph without pushing
   the text over.  ~8px = ~0.2cm gap; total footprint stays under 1cm. */
.reviewer-body .block { position: relative; }
.reviewer-body .block-comments-chip {
    position: absolute;
    right: calc(100% + 8px);
    top: 0;
    margin: 0;
    white-space: nowrap;
    padding: 2px 10px;
    line-height: 1.5;
}
@media (max-width: 1100px) {
    /* Not enough gutter to the left of the paragraph — inline it. */
    .reviewer-body .block-comments-chip {
        position: static;
        margin-left: 8px;
    }
}

/* Empty chip — appears on every block in the reviewer view so the
   reviewer sees a clickable affordance even when no comments exist. */
.block-comments-chip-empty {
    background: transparent;
    color: #857f70;
    border-color: #d3cebd;
    font-weight: 400;
    padding: 1px 6px;
    opacity: 0.65;
}
.block-comments-chip-empty:hover {
    background: #eaf3ec;
    color: #2e5b3d;
    border-color: #c9dfcf;
    opacity: 1;
}

/* Highlight the block whose thread is open in the rail */
.block.block-focused {
    background: rgba(240, 220, 100, 0.15);
    border-left: 3px solid #d9b64e;
    padding-left: 8px;
    margin-left: -11px;
}


/* Author-preview row on the External Review page — pinned at the top
   of the reviewers list, distinct teal border so it stands apart from
   real reviewers. */
.author-preview-row {
    display: grid;
    grid-template-columns: 1.6fr auto auto 1.6fr;
    gap: 16px;
    align-items: center;
    padding: 12px 14px;
    background: #f0fbf7;
    border: 2px solid #0f766e;
    border-radius: 8px;
}
.author-preview-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.author-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #ccfbf1;
    color: #0f766e;
    border-radius: 999px;
    font-size: 14px;
    flex-shrink: 0;
}
.author-preview-name strong { color: var(--ink, #2a2820); }
.author-preview-name .muted { font-size: 13px; }
.author-preview-name .small { font-size: 11.5px; margin-top: 2px; }
.author-badge {
    display: inline-block;
    padding: 3px 10px;
    background: #ccfbf1;
    color: #0f766e;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.author-preview-sent {
    font-size: 12.5px;
    white-space: nowrap;
}
.author-preview-link {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

@media (max-width: 720px) {
    .author-preview-row {
        grid-template-columns: 1fr;
    }
    .author-preview-link { justify-content: flex-start; }
}


/* Import error page — full-page recovery view when an import can't
   proceed (frozen target, missing folder, etc.). */
.import-error-card {
    max-width: 640px;
    margin: 60px auto 80px;
    padding: 32px 36px;
    background: var(--paper, #fff);
    border: 1px solid var(--hairline, #e5e2dc);
    border-left: 4px solid #b98a17;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(20, 30, 25, 0.06);
}
.import-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #fbf1dd;
    color: #b98a17;
    border-radius: 999px;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
}
.import-error-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: var(--paper-2, #fbf8f2);
    border-radius: 6px;
    margin: 18px 0 22px;
    font-size: 12.5px;
}
.import-error-meta-label {
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 10.5px;
    color: var(--muted, #857f70);
    font-weight: 600;
    margin-right: 8px;
}
.import-error-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
}


/* RFM summary table (inside modal) */
.rfm-summary {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.rfm-summary thead th {
    text-align: left;
    padding: 8px 10px;
    background: var(--paper-2, #fbf8f2);
    border-bottom: 2px solid var(--hairline, #e5e2dc);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted, #857f70);
}
.rfm-summary tbody td {
    padding: 10px;
    border-bottom: 1px solid var(--hairline, #e5e2dc);
    vertical-align: top;
    color: var(--body, #3a372f);
    line-height: 1.5;
}
.rfm-summary tbody tr:last-child td { border-bottom: none; }
.rfm-summary-subs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rfm-summary-subs li {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12.5px;
}
.rfm-mini-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 3px;
    line-height: 1.4;
}
.rfm-mini-tag-acc { background: #dbebd6; color: #2e5b3d; }
.rfm-mini-tag-pen { background: #ecdfbc; color: #7a5a1a; }
.rfm-mini-tag-rej { background: #efe6ea; color: #6b3653; }


/* Import-from-another-protocol picker */
.import-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 60vh;
    overflow-y: auto;
}
.import-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: var(--paper, #fff);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 6px;
}
.import-item:hover { background: var(--paper-2, #fbf8f2); }
.import-item-name {
    font-weight: 600;
    color: var(--ink, #2a2820);
    font-size: 14px;
}
.import-item-meta {
    font-size: 12px;
    margin-top: 4px;
}

/* General disabled-button styling — applies to Publish button when
   lifecycle isn't complete, greyed CTA in locked-row modals, etc. */
.btn-primary:disabled,
.btn-secondary:disabled,
button.btn-primary[disabled],
button.btn-secondary[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(30%);
}
.btn-primary:disabled:hover,
.btn-secondary:disabled:hover {
    /* Prevent the hover styling from making it look interactive. */
    background: inherit;
    transform: none;
}


/* ═══════════════════════════════════════════════════════════
   Finalise wizard (Publish stage)
   ═══════════════════════════════════════════════════════════ */

.finalise-form { max-width: 900px; margin: 0 auto; }

.finalise-opts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.finalise-opt {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 6px;
    background: var(--paper, #fff);
    cursor: pointer;
    transition: background 100ms ease;
}
.finalise-opt:hover { background: var(--paper-2, #fbf8f2); }
.finalise-opt input[type="checkbox"] {
    margin-top: 4px;
    accent-color: var(--accent, #2F6B4F);
}
.finalise-opt span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.finalise-opt strong {
    color: var(--ink, #2a2820);
    font-size: 14px;
}
.finalise-opt em {
    font-style: normal;
    color: var(--muted, #857f70);
    font-size: 12px;
}

.team-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.team-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr auto;
    gap: 8px;
    align-items: center;
}
.team-row .input { margin: 0; }
.btn-icon {
    min-width: 32px;
    padding: 6px 8px !important;
    font-size: 16px;
    line-height: 1;
}

.reviewer-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.reviewer-list li {
    padding: 6px 0;
    color: var(--body, #3a372f);
    border-bottom: 1px dashed var(--hairline-soft, #f4f1ea);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
}
.reviewer-list li:last-child { border-bottom: none; }


/* ═══════════════════════════════════════════════════════════
   In-app notifications banner (Task #120)
   ═══════════════════════════════════════════════════════════ */

.notif-bar {
    max-width: 1200px;
    margin: 12px auto 0;
    padding: 0 24px;
}
.notif-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #eaf3ec;
    border: 1px solid #c9dfcf;
    border-radius: 6px;
    color: #2e5b3d;
    font-size: 13px;
}
.notif-card-body { flex: 1; }
.notif-card-body strong { color: #244a30; }
.notif-card-actions { display: flex; gap: 6px; }
.notif-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #6b6558;
    padding: 0 4px;
}
.notif-dismiss:hover { color: #2a2820; }

/* ── Sub bar (light) ── */
.lifenav-sub {
    background: var(--paper-2, #fbf8f2);
    border-bottom: 1px solid var(--hairline, #e5e2dc);
    position: relative;
}
.lifenav-sub::before {
    /* short vertical connector from active chip down to sub-bar.  Kept
       simple — a hairline emerging from the underside of the top bar
       just above the sub-bar. */
    content: "";
    position: absolute;
    top: -10px;
    left: 40px;
    width: 1px;
    height: 10px;
    background: #b8b1a1;
    display: none;   /* enabled via JS if we want, hairline is subtle */
}
.lifenav-sub-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 12.5px;
}
.lifesub {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 4px;
    color: var(--muted, #857f70);
    text-decoration: none;
    white-space: nowrap;
}
a.lifesub:hover {
    background: rgba(30, 43, 35, 0.06);
    color: var(--ink, #2a2820);
}
.lifesub-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: transparent;
    color: inherit;
}
.lifesub-done   { color: #3d6e4e; }
.lifesub-done   .lifesub-mark {
    background: #dbebd6; color: #2e5b3d;
}
.lifesub-current { color: var(--ink, #2a2820); font-weight: 600; }
.lifesub-current .lifesub-mark {
    background: #ecdfbc; color: #7a5a1a;
}
.lifesub-pending .lifesub-mark {
    background: #ede9dd; color: #a89f89;
}
.lifesub-active { font-weight: 700; }
.lifesub-sep {
    color: #c9c3b3;
    padding: 0 2px;
    user-select: none;
}


/* ═══════════════════════════════════════════════════════════
   Protocol Summary page (wizard step 5)
   ═══════════════════════════════════════════════════════════ */

.summary-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin: 20px 0 16px;
}
.summary-head h1 {
    margin: 0;
    font-size: 32px;
    color: var(--ink, #2a2820);
}
.summary-head p {
    margin: 6px 0 0;
    color: var(--muted, #857f70);
    font-size: 14px;
}
.summary-status-pill {
    display: inline-block;
    padding: 6px 14px;
    background: #f5e9c9;
    color: #6e4d18;
    border: 1px solid #e6d199;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.summary-status-pill.done {
    background: #dbebd6; color: #2e5b3d; border-color: #b7d5b0;
}
.summary-status-pill.paused {
    background: #efe6ea; color: #6b3653; border-color: #d9c2ce;
}

.summary-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .summary-grid { grid-template-columns: 1fr; }
}

.summary-card {
    background: var(--paper, #fff);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 8px;
    padding: 18px 20px;
}
.summary-card h2 {
    margin: 0 0 4px;
    font-size: 16px;
    color: var(--ink, #2a2820);
}
.summary-card-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-size: 10.5px;
    color: var(--muted, #857f70);
    margin: 0 0 10px;
}

.summary-progress-bar {
    height: 6px;
    background: #efece2;
    border-radius: 999px;
    overflow: hidden;
    margin: 12px 0 16px;
}
.summary-progress-fill {
    height: 100%;
    background: #3d6e4e;
    transition: width 300ms ease;
}

.sections-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.sections-list li {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--hairline-soft, #f4f1ea);
}
.sections-list li:first-child { border-top: none; }

/* State shape now lives INSIDE .section-status on the right, immediately
   before the status text.  Colour-blind-friendly: circle = done,
   triangle = in progress, nothing = queued. */
.section-shape {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    margin-right: 6px;
    vertical-align: middle;
}
/* Inline artefact preview block (SoA table, Objectives table, Flow
   diagram) — rendered at the [INSERT_*] sentinel position by the
   section renderer, content fetched from /wizard/3/preview/<key>. */
.section-artefact {
    margin: 18px 0;
    padding: 14px 16px;
    background: var(--paper, #fff);
    border: 1px solid var(--hairline, #e5e2dc);
    border-left: 3px solid #4a7658;
    border-radius: 6px;
}
.section-artefact-head {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted, #857f70);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
/* Download / Replace buttons in an artefact block's header. */
.section-artefact-actions {
    display: inline-flex;
    gap: 6px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
/* Land below the sticky editor bar when returning via #ct-art-… */
.section-artefact { scroll-margin-top: 96px; }
.section-artefact-body { overflow-x: auto; }
.section-artefact-body table { max-width: 100%; }
.section-artefact-error { border-left-color: #a72832; }


.section-shape-done    { color: #3d8f52; }
.section-shape-auto    { color: #6a44a0; }   /* purple — auto-built at Publish */
.section-shape-current {
    color: #e69a29;
    animation: shapePulse 1.4s ease-in-out infinite;
}
@keyframes shapePulse {
    0%,100% { opacity: 1; }
    50%     { opacity: 0.55; }
}

.section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background: #ede9dd;
    color: #6b6558;
    font-size: 12px;
    font-weight: 600;
}
.sections-list li.state-done .section-num {
    background: #dbebd6; color: #2e5b3d;
}
.sections-list li.state-current .section-num {
    background: #ecdfbc; color: #7a5a1a;
}
.sections-list li.state-auto .section-num {
    background: #eaddf5; color: #4a2f78;    /* soft purple — auto-built */
}
.section-name { font-size: 14px; color: var(--body, #3a372f); }
.sections-list li.state-current .section-name {
    font-weight: 600; color: var(--ink, #2a2820);
}
.sections-list li.state-queued .section-name { color: var(--muted, #857f70); }
.sections-list li.state-auto .section-name {
    color: var(--muted, #857f70); font-style: italic;
}
.sections-list li.state-auto .section-status {
    color: #6a44a0; font-style: normal;
}
.section-status {
    font-size: 12px;
    color: var(--muted, #857f70);
    font-style: italic;
}
.sections-list li.state-current .section-status {
    color: #7a5a1a; font-weight: 600; font-style: normal;
}

.this-run-item {
    background: var(--paper-2, #fbf8f2);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.this-run-item:last-child { margin-bottom: 0; }
.this-run-item-label {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10.5px;
    color: var(--muted, #857f70);
    margin: 0 0 4px;
}
.this-run-item-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink, #2a2820);
}
.this-run-item-value.big { font-size: 22px; }

/* ── Compact "This Run" card (2026-08-03 redesign) ────────────────
   Row-per-fact list — label left, value right — replacing the
   stacked coloured tiles.  ~30% shorter than the previous layout,
   still airy thanks to breathing space between rows. */
.this-run-card { padding: 16px 18px 14px; }
.this-run-card .summary-card-eyebrow {
    margin: 0 0 10px;
    font-size: 10.5px;
    letter-spacing: 0.7px;
}
.this-run-list {
    margin: 0;
    padding: 0;
}
.this-run-row {
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px solid var(--hairline-soft, #f4f1ea);
}
.this-run-row:first-of-type { border-top: none; padding-top: 0; }
.this-run-row dt {
    margin: 0;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    color: var(--muted, #857f70);
    font-weight: 600;
}
.this-run-row dd {
    margin: 0;
    font-size: 13px;
    color: var(--ink, #2a2820);
    word-break: break-word;
    line-height: 1.35;
}
.this-run-row dd strong { font-weight: 700; }
.this-run-row-model dd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.this-run-change-btn {
    background: none;
    border: none;
    padding: 0 2px;
    color: var(--accent, #3d6e4e);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    flex: 0 0 auto;
}
.this-run-change-btn:hover { color: var(--ink, #2a2820); }
.this-run-model-form {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--hairline-soft, #f4f1ea);
}
.this-run-model-select {
    flex: 1 1 200px;
    font-size: 12px;
    padding: 4px 6px;
}
.this-run-model-hint {
    flex: 1 1 100%;
    margin: 2px 0 0;
    font-size: 10.5px;
    color: var(--muted, #857f70);
    font-style: italic;
}

.freeze-card .version-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--paper-2, #fbf8f2);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 4px;
    font-size: 11px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--muted, #857f70);
    margin-left: 8px;
}
.freeze-card .card-head-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.freeze-card p.freeze-desc {
    color: var(--body, #3a372f);
    font-size: 13px;
    margin: 8px 0 14px;
}
.freeze-warn {
    padding: 10px 12px;
    background: #fbf1dd;
    color: #6e4d18;
    border-radius: 4px;
    font-size: 12.5px;
    margin: 0 0 12px;
    display: flex; gap: 6px; align-items: center;
}
.freeze-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}
.freeze-actions .btn-primary,
.freeze-actions .btn-secondary { flex: 1; text-align: center; }
.freeze-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ── /finalise/<run_id>/downloads — post-generation landing page ── */
/* This is the last page in the wizard, so it's given some room to
   breathe: a confident hero card with a big primary download CTA,
   metadata alongside, and a lightweight "what's inside" list beneath. */
.dl-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px 28px;
    background: var(--paper-hi, #FFFFFF);
    border: 1px solid var(--accent-soft, #E3E9DC);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(47, 107, 79, 0.06);
    margin: 8px 0 22px;
}
.dl-hero-check {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    background: var(--accent-pale, #DDE8DD);
    color: var(--accent, #2F6B4F);
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.dl-hero-body {
    flex: 1;
    min-width: 0;
}
.dl-hero-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted, #6D6D5E);
    margin-bottom: 4px;
}
.dl-hero-title {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--body, #2A2A24);
    word-break: break-all;
}
.dl-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 13px;
    color: var(--muted, #6D6D5E);
}
.dl-meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}
.dl-meta-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}
.dl-meta-value {
    color: var(--body, #2A2A24);
    font-weight: 500;
}
.dl-meta-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}
.dl-meta-dot {
    opacity: 0.4;
}
.dl-hero-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 8px;
    background: var(--accent, #2F6B4F);
    color: white !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid var(--accent, #2F6B4F);
    box-shadow: 0 4px 12px rgba(47, 107, 79, 0.22);
    transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
    white-space: nowrap;
}
.dl-hero-btn:hover {
    background: var(--accent-hover, #255740);
    box-shadow: 0 6px 16px rgba(47, 107, 79, 0.28);
}
.dl-hero-btn:active { transform: translateY(1px); }

/* Contents card */
.dl-details {
    padding: 20px 24px;
    background: var(--paper-hi, #FFFFFF);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 8px;
    margin-bottom: 18px;
}
.dl-details-h {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--body, #2A2A24);
}
.dl-details-sub {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: var(--muted, #6D6D5E);
}
.dl-details-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 20px;
}
.dl-details-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: var(--body, #2A2A24);
    line-height: 1.4;
}
.dl-check {
    color: var(--accent, #2F6B4F);
    font-weight: 700;
    flex: 0 0 auto;
}
.dl-details-name { font-weight: 500; }
.dl-details-detail {
    color: var(--muted, #6D6D5E);
    font-size: 12px;
}

/* Bottom actions strip */
.dl-footer-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 22px 0 40px;
}

/* Mobile — stack the hero so the CTA gets full width */
@media (max-width: 640px) {
    .dl-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 20px;
    }
    .dl-hero-btn {
        width: 100%;
    }
}

/* ── Editor: auto-built section states ────────────────────────
   Sections the pipeline does not generate (e.g. the Glossary that
   the DOCX assembler builds from the tag registry at Publish time)
   are shown in the palette + dot strip with a distinct purple hint
   so the author can tell they're not editable. */
.dot-auto {
    background: transparent;
    border: 1px dashed var(--muted, #6D6D5E);
    opacity: 0.5;
}
.dot-auto.dot-active {
    border-color: #8064B9;
    opacity: 1;
    background: #EFE6FA;
}
.palette-auto {
    opacity: 0.75;
}
.palette-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #EFE6FA;
    color: #4C3986;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Body placeholder shown when the user navigates to an auto section.
   Keeps the layout stable but makes it obvious there's nothing to
   edit and points them at the palette / next section. */
.section-auto-placeholder {
    padding: 36px 32px;
    margin: 24px 0;
    background: var(--paper-hi, #FFFFFF);
    border: 1px dashed #C6B9E6;
    border-radius: 10px;
    text-align: center;
    color: var(--body, #2A2A24);
}
.section-auto-placeholder .section-auto-icon {
    font-size: 32px;
    color: #8064B9;
    margin-bottom: 8px;
    line-height: 1;
}
.section-auto-placeholder h2 {
    margin: 0 0 10px 0;
    font-size: 22px;
    font-weight: 600;
}
.section-auto-lede {
    max-width: 640px;
    margin: 0 auto 12px auto;
    font-size: 15px;
    line-height: 1.5;
    color: var(--body, #2A2A24);
}
.section-auto-tip {
    max-width: 640px;
    margin: 0 auto;
    font-size: 13px;
    color: var(--muted, #6D6D5E);
}

/* ── External review closed — "invite disabled" notice ──
   Shown in place of the "Invite a reviewer" form when the cycle is
   closed. Amber-tinged card with a lock glyph, a title, an
   explanatory line, and an inline Reopen button so the author
   doesn't have to hunt for the one in the page header. */
.invite-closed-notice {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    margin: 4px 0 0;
    background: var(--attention-bg, #F9EFE0);
    border: 1px solid var(--attention-border, #E7D3AC);
    border-radius: 10px;
    flex-wrap: wrap;
}
.invite-closed-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    color: var(--attention-text, #8A6520);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
}
.invite-closed-body {
    flex: 1;
    min-width: 240px;
}
.invite-closed-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--attention-text, #8A6520);
    line-height: 1.3;
}
.invite-closed-text {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--body, #2A2A24);
    line-height: 1.45;
}
.invite-closed-notice .btn-primary {
    flex: 0 0 auto;
    white-space: nowrap;
}
@media (max-width: 560px) {
    .invite-closed-notice {
        flex-direction: column;
        text-align: center;
        align-items: stretch;
    }
    .invite-closed-icon {
        margin: 0 auto;
    }
    .invite-closed-notice .btn-primary {
        width: 100%;
    }
}

/* ── Comments 3-tab nav (Document / Themes / Issues) ──
   Sits between the page heading and the analysis body on all three
   author-facing comment views. Each tab renders as a small card so
   the icon + label + hint all read cleanly. */
.comments-nav-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 4px 0 22px;
}
.comments-nav-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 14px 16px;
    background: var(--paper-hi, #FFFFFF);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.05s;
}
.comments-nav-tab:hover {
    border-color: var(--accent-soft, #E3E9DC);
    box-shadow: 0 3px 12px rgba(47, 107, 79, 0.08);
}
.comments-nav-tab:active { transform: translateY(1px); }
.comments-nav-tab-active {
    border-color: var(--accent, #2F6B4F);
    box-shadow: inset 0 0 0 1px var(--accent, #2F6B4F);
    background: var(--accent-pale, #DDE8DD);
}
.comments-nav-icon {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 4px;
}
.comments-nav-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--body, #2A2A24);
}
.comments-nav-hint {
    font-size: 12px;
    color: var(--muted, #6D6D5E);
    line-height: 1.3;
}
@media (max-width: 720px) {
    .comments-nav-tabs { grid-template-columns: 1fr; }
}

/* ── Analysis meta strip (last-run + regenerate button) ── */
.comments-analysis-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--paper-hi, #FFFFFF);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.comments-analysis-status {
    font-size: 13px;
    color: var(--muted, #6D6D5E);
    line-height: 1.4;
}
.comments-analysis-status strong {
    color: var(--body, #2A2A24);
    font-weight: 600;
}
.comments-analysis-stale {
    color: #8A6520;
    font-weight: 500;
}

/* ── Themes / issues list ── */
.analysis-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.analysis-item {
    background: var(--paper-hi, #FFFFFF);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 10px;
    padding: 18px 20px;
}
.analysis-item-issue { border-left: 4px solid var(--accent, #2F6B4F); }
.analysis-item-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.analysis-item-num {
    flex: 0 0 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-pale, #DDE8DD);
    color: var(--accent, #2F6B4F);
    font-weight: 700;
    font-size: 13px;
}
.analysis-item-body { flex: 1; min-width: 0; }
.analysis-item-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--body, #2A2A24);
}
.analysis-item-meta {
    font-size: 12px;
    color: var(--muted, #6D6D5E);
    line-height: 1.5;
}
.analysis-section-chip {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 2px 8px;
    background: var(--accent-soft, #E3E9DC);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    color: var(--accent, #2F6B4F);
}
.analysis-section-group {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--paper, #FAF8F3);
    border-radius: 6px;
}
.analysis-section-group-h {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent, #2F6B4F);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.analysis-comment-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.analysis-comment {
    padding: 10px 12px;
    background: var(--paper, #FAF8F3);
    border-radius: 6px;
    border-left: 3px solid var(--hairline, #e5e2dc);
}
.analysis-section-group .analysis-comment {
    background: var(--paper-hi, #FFFFFF);
    border-left-color: var(--accent-soft, #E3E9DC);
}
.analysis-comment-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    color: var(--muted, #6D6D5E);
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.analysis-comment-author {
    font-weight: 600;
    color: var(--body, #2A2A24);
}
.analysis-comment-loc { text-align: right; }
.analysis-comment-block {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    opacity: 0.75;
}
.analysis-comment-body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--body, #2A2A24);
}
.analysis-comment-summary {
    display: block;
    color: var(--muted, #6D6D5E);
    margin-bottom: 3px;
}
.analysis-comment-text { white-space: pre-wrap; }

.empty-state {
    padding: 32px 24px;
    text-align: center;
    background: var(--paper-hi, #FFFFFF);
    border: 1px dashed var(--hairline, #e5e2dc);
    border-radius: 10px;
    color: var(--muted, #6D6D5E);
    font-size: 14px;
}

/* ── Analysis loading state ──
   Shown on the Themes / Issues pages while the background LLM pass
   runs. Meta-refresh in the template polls every 3s; the moment the
   cache lands the page swaps to results. */
.analysis-loader {
    padding: 48px 32px;
    text-align: center;
    background: var(--paper-hi, #FFFFFF);
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 10px;
    color: var(--body, #2A2A24);
}
.analysis-loader-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 18px;
    border: 3px solid var(--accent-pale, #DDE8DD);
    border-top-color: var(--accent, #2F6B4F);
    border-radius: 50%;
    animation: analysisSpin 0.9s linear infinite;
}
@keyframes analysisSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.analysis-loader-title {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--body, #2A2A24);
}
.analysis-loader-body {
    max-width: 480px;
    margin: 0 auto 8px auto;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted, #6D6D5E);
}
.analysis-loader-hint {
    max-width: 480px;
    margin: 8px auto 0 auto;
    font-size: 12px;
    color: var(--muted, #6D6D5E);
    font-style: italic;
}

/* ── wizard/2 fields disclosure ── */
.fields-disclosure {
    border: 1px solid var(--hairline, #e5e2dc);
    border-radius: 8px;
    background: var(--paper-hi, #FFFFFF);
    overflow: hidden;
}
.fields-disclosure > summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--body, #2A2A24);
    transition: background 0.12s;
}
.fields-disclosure > summary::-webkit-details-marker { display: none; }
.fields-disclosure > summary:hover { background: var(--paper, #FAF8F3); }
.fields-disclosure-summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 6px;
    color: var(--muted, #6D6D5E);
    transition: transform 0.15s;
}
.fields-disclosure[open] .fields-disclosure-summary::before {
    transform: rotate(90deg);
}
.fields-disclosure-chip {
    flex: 1;
}
.fields-disclosure-hint {
    color: var(--muted, #6D6D5E);
    font-size: 12px;
    font-weight: 400;
}
.fields-disclosure[open] .fields-disclosure-hint::after {
    content: " · click again to collapse";
}
.fields-disclosure .field-list {
    padding: 4px 18px 18px;
}

/* ── Downloads page: "INCOMPLETE build" red alert ──
   Shown when the pipeline had to skip one or more sections during
   the docx conversion.  Deliberately loud — an incomplete protocol
   is worse than no protocol because the reader may not notice the
   missing chunk. */
.dl-incomplete-alert {
    display: flex;
    gap: 18px;
    padding: 22px 24px;
    margin: 8px 0 20px;
    background: #fbe6e6;
    border: 2px solid #8a1f1f;
    border-left-width: 6px;
    border-radius: 10px;
    color: #2A2A24;
}
.dl-incomplete-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: #8a1f1f;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}
.dl-incomplete-body {
    flex: 1;
    min-width: 0;
}
.dl-incomplete-title {
    margin: 0 0 6px 0;
    color: #8a1f1f;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}
.dl-incomplete-lede {
    margin: 0 0 10px 0;
    font-size: 13.5px;
    line-height: 1.5;
}
.dl-incomplete-list {
    margin: 0 0 10px 0;
    padding-left: 22px;
    font-size: 13px;
    line-height: 1.55;
}
.dl-incomplete-list li { margin-bottom: 4px; }
.dl-incomplete-reason {
    color: #6a2a2a;
    font-size: 12.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.dl-incomplete-hint {
    margin: 8px 0 0 0;
    font-size: 12px;
    color: #6a2a2a;
}
.dl-incomplete-hint code {
    background: #f4d0d0;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11.5px;
}

/* ══════════════════════════════════════════════════════════════════
   KTM page (unified 2026-08-20) + generation-page kickoff card
   ══════════════════════════════════════════════════════════════════
   Adds:
     .artefact-card-wide          full-width horizontal card
     .artefact-list-stacked       one-column stack (removes any grid)
     .artefact-actions-equal      equal-width action buttons
     .btn-equal / .btn-lg         sizing helpers
     .artefact-changed(+chip)     "changed since last run" affordance
     .btn-primary-grey            greyed variant of primary CTA
     .ktm-footer-actions          bottom action row on KTM page
     .kickoff-card                standalone launch card on /wizard/5
   ══════════════════════════════════════════════════════════════════ */

/* Stacked list overrides any prior grid layout for artefact cards. */
.artefact-list-stacked {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0 24px;
}
.artefact-list-stacked .artefact-card,
.artefact-card.artefact-card-wide {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.artefact-card-wide .artefact-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--panel);
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
}
.artefact-card-wide .artefact-titles h3 {
    margin: 0 0 3px;
    font-size: 15px;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.2;
}
.artefact-card-wide .artefact-titles p {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
}

/* Equal-width action buttons in KTM card action row. */
.artefact-actions-equal {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}
.btn-equal {
    min-width: 100px;
    text-align: center;
    justify-content: center;
}

/* "Changed since last run" card state — green border + orange chip. */
.artefact-card.artefact-changed {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-soft) inset;
}
.artefact-changed-chip {
    display: inline-block;
    background: var(--attention-bg);
    color: var(--attention-text);
    border: 1px solid var(--attention-border);
    font-size: 10.5px;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 8px;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: 1px;
}

/* Larger primary button used for CTAs. */
.btn-lg {
    padding: 11px 22px;
    font-size: 14px;
    min-width: 160px;
}
/* Greyed variant of primary — signals "action available but currently
   redundant" (e.g. Generate when nothing has changed). */
.btn-primary-grey,
.btn-primary.btn-primary-grey {
    background: #C0BEB4;
    border-color: #A9A794;
    color: #55534A;
    font-weight: 500;
}
.btn-primary-grey:hover,
.btn-primary.btn-primary-grey:hover {
    background: #B5B3AA;
    border-color: #9F9D8A;
    color: #40403A;
}

/* Bottom action row on the KTM page. */
.ktm-footer-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.ktm-footer-hint {
    color: var(--muted);
    font-size: 12.5px;
    margin-left: 4px;
}

/* ── Kickoff card (top of left column on /wizard/5) ────────────── */
.kickoff-card {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 22px 24px;
    margin-bottom: 16px;
}
.kickoff-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    margin: 0 0 6px;
}
.kickoff-title {
    margin: 0 0 6px;
    font-size: 18px;
    color: var(--ink);
    font-weight: 600;
}
.kickoff-lede {
    margin: 4px 0 16px;
    color: #384738;
    font-size: 13.5px;
    line-height: 1.5;
}
.kickoff-form { margin: 0; }
.kickoff-controls {
    /* Stacks vertically — the kickoff card lives in the ~340px
       right rail, so two side-by-side selects would be too narrow.
       Model on top, Template below. */
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.kickoff-ctrl label {
    display: block;
    font-size: 10.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
    font-weight: 600;
}
.kickoff-ctrl select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    border-radius: 5px;
    color: var(--ink);
    font-family: inherit;
    font-size: 12.5px;
}
.kickoff-ctrl select:disabled {
    color: var(--muted);
    background: var(--panel);
    cursor: not-allowed;
}
.kickoff-cta {
    width: 100%;
    padding: 11px 16px;
    font-size: 13.5px;
}
.kickoff-hint {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 11.5px;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   Step 2 (Review & Enrich) — 2026-08-20 redesign
   ══════════════════════════════════════════════════════════════════
   Adds:
     .sticky-toolbar          top nav with counts + jump buttons + CTA
     .expandable-card         KTM-style card wrapping a <details>
     .fc-*                    new field-card styling with metadata
                              strip, badges, panels
     .badge-*                 priority + source colour badges
   ══════════════════════════════════════════════════════════════════ */

/* ── Sticky toolbar ── */
.sticky-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--paper);
    padding: 10px 0;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--border);
}
.sticky-toolbar-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.toolbar-status {
    display: flex;
    gap: 18px;
    align-items: center;
}
.toolbar-metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.toolbar-metric-num {
    font-size: 18px;
    color: var(--ink);
    font-weight: 700;
    line-height: 1;
}
.toolbar-metric-num.attention { color: var(--attention-text); }
.toolbar-metric-num.ok        { color: var(--accent); }
.toolbar-metric-lbl {
    font-size: 10.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-top: 2px;
}
.toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.toolbar-jump {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.toolbar-jump:hover {
    color: var(--ink);
    border-color: var(--border-strong);
    background: var(--panel);
}
.toolbar-jump .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.toolbar-jump .dot.missing  { background: var(--attention-text); }
.toolbar-jump .dot.captured { background: var(--accent); }

/* ── Expandable cards (native <details> based) ── */
.expandable-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.expandable-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.12s ease;
    scroll-margin-top: 100px;  /* jump-to lands below sticky toolbar */
}
.expandable-card:hover  { border-color: var(--border-strong); }
.expandable-card[open]  { border-color: var(--accent); }
.expandable-card summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 44px 1fr auto 28px;
    gap: 18px;
    align-items: center;
    user-select: none;
}
.expandable-card summary::-webkit-details-marker { display: none; }
.expandable-card summary::marker { content: ''; }
.exp-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
}
.exp-icon-missing  { background: var(--attention-bg); color: var(--attention-text); }
.exp-icon-captured { background: var(--accent-soft);  color: var(--accent); }
.exp-titles h3 {
    margin: 0 0 3px;
    font-size: 15px;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.2;
}
.exp-titles p {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
}
.exp-count {
    background: var(--panel);
    color: var(--muted);
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.expandable-card[open] .exp-count {
    background: var(--accent-soft);
    color: var(--accent);
}
.exp-chevron {
    width: 20px;
    height: 20px;
    color: var(--muted);
    transition: transform 0.15s ease;
}
.expandable-card[open] .exp-chevron { transform: rotate(180deg); }
.exp-body {
    padding: 4px 20px 20px;
    border-top: 1px solid var(--hairline);
}

/* ── Field card (rebuilt) ── */
.field-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.field-card {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px 16px;
    transition: border-color 0.12s, opacity 0.12s, background 0.12s;
    scroll-margin-top: 100px;
}
.field-card.state-skipped { background: var(--panel); opacity: 0.62; }
.field-card.state-skipped .field-card-title { color: var(--muted); }
.field-card.state-skipped .fc-actions-default { display: none; }
.field-card:not(.state-skipped) .fc-actions-skipped { display: none; }
.field-card.state-saved   { border-color: var(--accent); }
.field-card.state-removed { background: var(--panel); opacity: 0.7; }

.field-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}
.field-card-title {
    font-weight: 600;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.3;
}
.field-card-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

/* Priority + source badges */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
    line-height: 1.4;
}
.badge-p1 { background: #F6E4E0; color: #8C3F2C; border-color: #DFB8AE; }
.badge-p2 { background: var(--attention-bg); color: var(--attention-text); border-color: var(--attention-border); }
.badge-p3 { background: var(--panel); color: var(--muted); border-color: var(--border-strong); }
.badge-extracted { background: var(--accent-soft); color: var(--accent); border-color: #B3C6B3; }
.badge-inferred  { background: #E5E2F0; color: #5B5487; border-color: #C7C1DE; }
.badge-manual    { background: #F1E4C6; color: #A97F1F; border-color: #E3D399; }
.badge-missing   { background: var(--attention-bg); color: var(--attention-text); border-color: var(--attention-border); }
.badge-removed   { background: var(--panel); color: var(--muted); border-color: var(--border-strong); }

/* Metadata strip */
.fc-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 20px;
    padding: 8px 0 4px;
    border-top: 1px solid var(--hairline);
    margin: 0;
    font-size: 12px;
}
.fc-meta.fc-meta-full {
    border-top: none;
    padding-top: 6px;
    grid-template-columns: 1fr;
}
.fc-meta div        { min-width: 0; }
.fc-meta dt {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10.5px;
    font-weight: 600;
    margin: 0 0 2px;
}
.fc-meta dd {
    margin: 0;
    color: var(--body);
    font-size: 12.5px;
    line-height: 1.4;
}
.fc-meta dd.mono {
    font-family: monospace;
    font-size: 11.5px;
    color: var(--ink);
}

/* Value box */
.fc-value-box {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.5;
}
.fc-value-box.empty {
    color: var(--faint);
    font-style: italic;
}

/* Source excerpt */
.fc-extract-wrapper {
    margin-top: 8px;
}
.fc-extract-toggle {
    list-style: none;
    cursor: pointer;
    color: var(--accent);
    font-size: 12px;
    padding: 2px 0;
    user-select: none;
    font-weight: 500;
}
.fc-extract-toggle::-webkit-details-marker,
.fc-extract-toggle::marker { display: none; content: ''; }
.fc-extract-toggle:hover   { text-decoration: underline; }
.fc-extract-toggle::before { content: '▸ '; display: inline-block; transition: transform 0.15s; }
.fc-extract-wrapper[open] .fc-extract-toggle::before { transform: rotate(90deg); }
.fc-extract {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--panel);
    border-left: 3px solid var(--faint);
    border-radius: 4px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
    font-family: Georgia, serif;
}
.fc-extract-loc {
    display: block;
    margin-top: 6px;
    color: var(--faint);
    font-size: 11px;
    font-family: var(--font-sans);
}

/* Action row */
.fc-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--hairline);
}
.btn-ghost {
    background: none;
    border: none;
    color: var(--muted);
    padding: 5px 10px;
    font-size: 12.5px;
    cursor: pointer;
    font-family: inherit;
    border-radius: 4px;
}
.btn-ghost:hover {
    color: var(--body);
    background: var(--panel);
}
.btn-ghost.btn-inline { padding: 6px 10px; }

.fc-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--attention-bg);
    color: var(--attention-text);
    border: 1px solid var(--attention-border);
}

/* Reveal panels (inline textarea / remove confirm) */
.fc-panel {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--hairline);
}
.fc-panel-label {
    display: block;
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 4px;
}
.fc-panel textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    min-height: 60px;
    background: var(--surface);
    color: var(--ink);
}
.fc-panel-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}
.fc-remove-warning {
    color: var(--attention-text);
    font-size: 12.5px;
    margin: 0 0 6px;
}

.fc-inline-form { margin: 0; display: inline-block; }
.val-strike     { text-decoration: line-through; color: var(--muted); }
.val-deleted-tag {
    display: inline-block; margin-left: 6px;
    color: var(--muted); font-size: 11px; font-style: italic;
}

@media (max-width: 780px) {
    .fc-meta { grid-template-columns: 1fr; }
    .sticky-toolbar-inner { grid-template-columns: 1fr; }
    .toolbar-actions { justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════
   Field-card 5-state UX (2026-08-22 rewrite)
   ══════════════════════════════════════════════════════════════════
   1. default (locked)   .fc-locked-view visible, value read-only
   2. editing            .fc-edit-form visible, textarea + Save/Cancel
   3. skipped            card dims, only .fc-actions-skipped visible
   4. omit confirmation  .fc-confirm visible in place of locked view
   5. saved (MANUAL)     green-bordered card, saved value shown, Edit/Clear
   ══════════════════════════════════════════════════════════════════ */

/* The [hidden] attribute is what JS toggles when the user clicks
   Edit / Cancel / Omit.  We rely on the browser's implicit
   `[hidden] { display: none }` rather than setting `display: block`
   explicitly (which would beat the hidden attribute). */
.fc-locked-view[hidden],
.fc-edit-form[hidden],
.fc-confirm[hidden]     { display: none !important; }

/* Lock icon in the top-right corner of the read-only value box */
.fc-value-box { position: relative; }
.fc-value-box .lock-icon {
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--faint);
    font-size: 12px;
    user-select: none;
    pointer-events: none;
    opacity: 0.7;
}

/* Editable textarea shown during State 2.
   Green border + focus ring so it's obvious the field is now editable. */
.fc-value-editor {
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    min-height: 44px;
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}
.fc-value-editor::placeholder { color: var(--faint); font-style: italic; }
.fc-value-editor:focus { border-color: var(--accent); }

/* The edit form has its own action row directly below the textarea. */
.fc-edit-form .fc-actions {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--hairline);
}

/* Confirmation panel for "Omit from protocol" — same amber tone as the
   attention-badge palette so the destructive intent is unmissable. */
.fc-confirm {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--attention-bg);
    border: 1px solid var(--attention-border);
    border-radius: 4px;
}
.fc-confirm p {
    margin: 0 0 10px;
    color: var(--attention-text);
    font-size: 12.5px;
}
.fc-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Skipped state — dim the card, hide the edit/confirm/locked views,
   show only the "skipped" badge row. */
.field-card.state-skipped .fc-locked-view,
.field-card.state-skipped .fc-edit-form,
.field-card.state-skipped .fc-confirm  { display: none; }

/* Removed (masked) state — dim slightly; the template already only
   renders the Undo button in this branch, so no children to hide. */
.field-card.state-removed { background: var(--panel); opacity: 0.72; }

/* Disabled Save button — clearly not clickable when textarea empty. */
.fc-save-btn:disabled,
.btn-primary:disabled {
    background: var(--panel);
    color: var(--faint);
    border-color: var(--border-strong);
    cursor: not-allowed;
    font-weight: 500;
    box-shadow: none;
}
.fc-save-btn:disabled:hover,
.btn-primary:disabled:hover {
    background: var(--panel);
    border-color: var(--border-strong);
}

/* ══════════════════════════════════════════════════════════════════
   KTM page 2-column layout (2026-08-22 v4)
   ══════════════════════════════════════════════════════════════════
   Left column   → artefact-list-stacked (existing) — narrower now
   Right column  → kickoff-card + next-step-card + summary-card
   ══════════════════════════════════════════════════════════════════ */

.ktm-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}
@media (max-width: 900px) {
    .ktm-grid { grid-template-columns: 1fr; }
}

/* "Done" variant of the kickoff card — neutral panel, not green,
   used once KTMs are on disk and the primary action shifts to
   Continue.  Uses .kickoff-card as the base and overrides colours. */
.kickoff-card.kickoff-card-done {
    background: var(--surface);
    border-color: var(--border);
}

/* Continue to Protocol Generation card — separate from kickoff so
   it can be toggled between "waiting" (grey) and "ready" (green)
   independently of the KTM generation status. */
.next-step-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 12px;
    transition: border-color 0.15s, background 0.15s;
}
.next-step-card.active {
    background: var(--accent-soft);
    border-color: var(--accent);
}
.next-step-card.disabled { opacity: 0.75; }
.next-step-title {
    margin: 0 0 4px;
    font-size: 15px;
    color: var(--muted);
    font-weight: 600;
}
.next-step-card.active .next-step-title { color: var(--ink); }
.next-step-lede {
    margin: 4px 0 12px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
}
.next-step-card.active .next-step-lede { color: #384738; }
.next-step-card .kickoff-cta { text-decoration: none; text-align: center; display: block; }

/* ══════════════════════════════════════════════════════════════════
   Wizard step 1 — extraction overlay (2026-08-22)
   ══════════════════════════════════════════════════════════════════
   Full-screen overlay with animated spinner + reassurance message.
   Shown on form submit; removed automatically when the browser
   navigates to the next page.
   ══════════════════════════════════════════════════════════════════ */

.wiz-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(37, 50, 31, 0.55);      /* semi-transparent ink */
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: wiz-overlay-fade 0.15s ease-out;
}
.wiz-overlay[hidden] { display: none !important; }

@keyframes wiz-overlay-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.wiz-overlay-card {
    background: var(--surface);
    border-radius: 10px;
    padding: 32px 40px;
    max-width: 460px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.wiz-overlay-title {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--ink);
    font-weight: 600;
}
.wiz-overlay-lede {
    margin: 0 0 12px;
    color: var(--body);
    font-size: 13.5px;
    line-height: 1.55;
}
.wiz-overlay-lede strong { color: var(--ink); }
.wiz-overlay-note {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
}

.wiz-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid var(--accent-soft);
    border-top-color: var(--accent);
    border-radius: 50%;
    margin: 0 auto 18px;
    animation: wiz-spin 0.9s linear infinite;
}
@keyframes wiz-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════
   Reviewer Comments hub page — /review/<run_id>/comments-hub
   (2026-08-22)
   ══════════════════════════════════════════════════════════════════ */

.rc-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    color: var(--muted); font-size: 12.5px; margin-bottom: 20px;
}
.rc-breadcrumb a { color: var(--muted); text-decoration: none; }
.rc-breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.rc-breadcrumb .sep { color: var(--faint); }
.rc-breadcrumb .current { color: var(--ink); font-weight: 600; }

.rc-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
}
.rc-head-actions {
    display: flex; gap: 8px; align-items: center;
    flex-shrink: 0; flex-wrap: wrap;
}

/* 5-metric status strip */
.rc-status-strip {
    display: flex;
    gap: 32px;
    padding: 14px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.rc-status-metric { display: flex; flex-direction: column; }
.rc-status-num {
    font-size: 20px; color: var(--ink);
    font-weight: 700; line-height: 1;
}
.rc-status-lbl {
    font-size: 10.5px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-top: 3px; font-weight: 600;
}

/* Horizontal card list — mirrors artefact-card-wide */
.rc-list {
    display: flex; flex-direction: column;
    gap: 12px; margin-bottom: 24px;
}
.rc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 18px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s;
}
.rc-card:hover {
    border-color: var(--accent);
    text-decoration: none;
    color: inherit;
}
.rc-icon {
    width: 44px; height: 44px; border-radius: 8px;
    background: var(--panel);
    display: grid; place-items: center;
    color: var(--muted); font-size: 22px; line-height: 1;
}
.rc-icon-doc     { background: #E6EAEE; color: #4E5C6B; }
.rc-icon-themes  { background: #E5E2F0; color: #5B5487; }
.rc-icon-issues  { background: var(--attention-bg); color: var(--attention-text); }
.rc-meta { min-width: 0; }
.rc-title {
    font-weight: 600; color: var(--ink);
    font-size: 15.5px; margin: 0 0 3px; line-height: 1.2;
}
.rc-detail {
    color: var(--muted); font-size: 13px;
    line-height: 1.45; margin: 0;
}
.rc-open {
    color: var(--accent); font-weight: 600;
    font-size: 13px; white-space: nowrap;
}

/* "What next?" decision block */
.rc-close-actions {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 22px;
    margin-top: 8px;
}
.rc-close-title {
    font-size: 15px; color: var(--ink);
    font-weight: 600; margin: 0 0 4px;
}
.rc-close-lede {
    color: var(--muted); font-size: 12.5px;
    margin: 0 0 16px; line-height: 1.5;
}
.rc-close-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
}
@media (max-width: 900px) {
    .rc-close-row { grid-template-columns: 1fr; }
    .rc-page-head { flex-direction: column; }
    .rc-head-actions { width: 100%; }
}
.rc-close-option {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}
.rc-close-option-primary {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.rc-close-option-title {
    font-weight: 600; color: var(--ink);
    font-size: 13.5px; margin: 0 0 4px;
}
.rc-close-option-desc {
    color: var(--muted); font-size: 12px;
    margin: 0; line-height: 1.45;
}
.rc-close-option-primary .rc-close-option-desc { color: #384738; }
.rc-close-cta {
    display: inline-block;
    text-align: center;
    padding: 9px 16px;
    border-radius: 6px;
    font-weight: 600; font-size: 13px;
    text-decoration: none; cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
}
.rc-close-cta-primary {
    background: var(--accent);
    color: white; border-color: var(--accent);
}
.rc-close-cta-primary:hover { background: var(--accent-hover); }
.rc-close-cta-secondary {
    background: var(--surface);
    color: var(--body);
    border-color: var(--border-strong);
}
.rc-close-cta-secondary:hover { background: var(--panel); }

/* ══════════════════════════════════════════════════════════════════
   KTM overlay — persistent progress bar (2026-08-24)
   Shown inside the .wiz-overlay-card while /wizard/3/progress.json
   is polled every 2 s.  The overlay stays visible for the full
   generation and reloads the page when done.
   ══════════════════════════════════════════════════════════════════ */

.ktm-overlay-progress {
    width: 100%;
    height: 8px;
    background: var(--panel);
    border-radius: 4px;
    margin: 14px 0 8px;
    overflow: hidden;
}
.ktm-overlay-progress-bar {
    height: 100%;
    background: var(--accent);
    width: 0%;
    transition: width 0.4s ease;
}
.ktm-overlay-status {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 12px;
    font-family: var(--font-sans);
    text-align: center;
    min-height: 1.4em;
}

/* ══════════════════════════════════════════════════════════════════
   Institutional Review — transition state (no active cycle)
   Rewritten 2026-08-27.  Shows "What this page is for" card + 5-step
   workflow + past-cycle-aware decision row.  Users arriving from the
   Downloads page skip this state entirely (see /institutional/{id}/enter).
   ══════════════════════════════════════════════════════════════════ */

.explain-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px 28px;
    margin-bottom: 20px;
}
.explain-card-h {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 600;
}
.explain-lede {
    color: var(--body);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 14px;
}
.explain-lede strong { color: var(--ink); }

.explain-steps {
    margin: 12px 0 16px;
    padding: 14px 18px;
    background: var(--paper);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    color: var(--body);
    font-size: 13px;
}
.explain-steps h3 {
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    font-weight: 700;
}
.explain-steps ol {
    margin: 0;
    padding-left: 22px;
    line-height: 1.6;
}
.explain-steps li { margin: 4px 0; }

.explain-note {
    color: var(--muted);
    font-size: 12.5px;
    margin: 12px 0 0;
    font-style: italic;
}

.explain-cta-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 18px;
    flex-wrap: wrap;
}
.explain-cta-hint {
    color: var(--muted);
    font-size: 12.5px;
}

/* Two-option decision row shown when past cycles exist */
.explain-decisions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
}
@media (max-width: 780px) {
    .explain-decisions { grid-template-columns: 1fr; }
}
.explain-decision {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}
.explain-decision-primary {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.explain-decision-title {
    font-weight: 600;
    color: var(--ink);
    font-size: 14px;
    margin: 0 0 4px;
}
.explain-decision-desc {
    color: var(--muted);
    font-size: 12.5px;
    margin: 0;
    line-height: 1.5;
}
.explain-decision-primary .explain-decision-desc { color: #384738; }

/* Past-cycles list at bottom */
.explain-past {
    padding: 14px 18px;
    background: var(--panel);
    border-radius: 6px;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 20px;
}
.explain-past h3 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.explain-past ul { margin: 0; padding-left: 22px; }
.explain-past li { margin: 3px 0; }

/* ── Auto-run chip ─────────────────────────────────────────────
   Rendered on library cards, the downloads page hero, and the
   auto-run progress page.  Yellow so it visually distinguishes
   a hands-off run from a hand-tuned one — reviewers, downstream
   readers and Jean-Marc himself need to know at a glance whether
   what they're looking at went through the normal step-by-step
   editing or was produced end-to-end without human input. */
.auto-chip {
  display: inline-block;
  background: #FFF3B0; color: #6E5300;
  border: 1px solid #E5C64B; border-radius: 10px;
  padding: 2px 10px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase;
  vertical-align: middle;
}
.auto-chip-lg {
  padding: 3px 12px; font-size: 13px;
}

/* Cancel link on the wiz-step-1 extraction overlay — subtle, since
   we don't want to encourage cancelling; it's an escape hatch when
   things are stuck. */
.wiz-overlay-cancel {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #D9D0BC;
  border-radius: 4px;
  color: #6C6350;
  background: transparent;
  text-decoration: none;
  font-size: 13px;
}
.wiz-overlay-cancel:hover {
  background: #F5F1E6;
  color: #2F6B4F;
  border-color: #A8998A;
}

/* ── Demo mode banner ─────────────────────────────────────────
   Rendered by base.html on every page when the current run is a
   demo clone.  Loud enough that no viewer can confuse demo output
   with real protocol output.  Warm orange (not yellow) so it
   visually differs from the "Auto run" chip. */
.demo-banner {
  background: #FFE9CC; color: #7A4300;
  border-bottom: 2px solid #E5A54D;
  padding: 8px 24px;
  font-size: 14px; line-height: 1.4;
  display: flex; align-items: center; gap: 10px;
}
.demo-banner-icon { font-size: 18px; }
.demo-banner strong { color: #6B3900; }

/* Demo chip variant — same shape as .auto-chip but orange. */
.demo-chip {
  display: inline-block;
  background: #FFD9A8; color: #7A4300;
  border: 1px solid #E5A54D; border-radius: 10px;
  padding: 2px 10px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase;
  vertical-align: middle;
}
.demo-chip-lg { padding: 3px 12px; font-size: 13px; }

/* ══════════════════════════════════════════════════════════
   Step 2 (Review & Enrich) — v3 layout (2026-09-22)
   Refined tabs + hero CTA + progress line + sort dropdown.
   Replaces the previous sticky-toolbar + expandable-cards
   design.  Kept modest and paper-like — no heavy boxes.
   ══════════════════════════════════════════════════════════ */

/* Hero CTA card (green tint, matches Clean Paper) */
.s2-hero {
  background: linear-gradient(135deg, #F0F7F2, #F5F1E6);
  border: 1px solid #EDE7DA;
  border-radius: 8px;
  padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin: 4px 0 18px 0; flex-wrap: wrap;
}
.s2-hero-body { flex: 1; min-width: 240px; }
.s2-hero-title {
  font-weight: 700; font-size: 17px; color: #2F6B4F;
}
.s2-hero-sub {
  color: #6C6350; font-size: 14px; margin-top: 4px; line-height: 1.5;
}
.s2-hero-cta { flex-shrink: 0; }

/* Progress line under the hero */
.s2-progress {
  margin: 0 4px 8px 4px;
  color: #6C6350; font-size: 14px;
}
.s2-progress-num  { color: #1a1a1a; font-size: 16px; }
.s2-progress-session { color: #2F6B4F; }

/* ── Refined underline tabs ────────────────────────────
   No boxes, no heavy borders.  A single hairline runs the
   width of the tab strip; the active tab paints a thicker
   coloured accent on top of it (green for Extracted,
   warm orange for Missing).  Inactive tabs get a subtle
   hover state so they read as clickable. */
.s2-tab-wrap { margin-top: 12px; }
.s2-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid #EDE7DA;
  margin: 0;
}
.s2-tab {
  background: none; border: none;
  color: #6C6350;
  padding: 12px 20px 14px 20px;
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.15s;
  letter-spacing: 0.005em;
  font-family: inherit;
}
.s2-tab::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: transparent;
  transition: background 0.15s;
  border-radius: 2px;
}
.s2-tab:hover:not(.active) { color: #2F6B4F; }
.s2-tab:hover:not(.active)::after { background: #EDE7DA; }
.s2-tab.active { color: #2F6B4F; font-weight: 600; cursor: default; }
.s2-tab.active::after { background: #2F6B4F; height: 3px; }
.s2-tab.missing.active { color: #7A4300; }
.s2-tab.missing.active::after { background: #E5A54D; }

.s2-tab-count {
  display: inline-block;
  padding: 1px 9px; border-radius: 999px; font-size: 12px;
  background: #FAF7EE; color: #6C6350;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.s2-tab.active .s2-tab-count {
  background: #E5F0E1; color: #2F6B4F;
}
.s2-tab.missing.active .s2-tab-count {
  background: #FFE9CC; color: #7A4300;
}

/* Toolbar under the tabs */
.s2-toolbar {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 4px 16px 4px; flex-wrap: wrap;
}
.s2-toolbar-left {
  color: #6C6350; font-size: 13px; flex: 1;
}
.s2-toolbar-right {
  display: flex; align-items: center; gap: 8px;
  color: #6C6350; font-size: 13px; margin-left: auto;
}
.s2-sort {
  padding: 6px 10px; border: 1px solid #EDE7DA;
  border-radius: 4px; font-size: 13px;
  background: white; color: #1a1a1a; font-weight: 500;
  cursor: pointer; font-family: inherit;
}
.s2-sort:hover { border-color: #2F6B4F; }

/* Panels flow naturally under the tabs — no border/container */
.s2-panel { padding: 0; }

/* Priority (or section) group headers within the field list */
.s2-group-header {
  font-weight: 700; font-size: 13px; color: #2F6B4F;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 18px 0 10px 0; padding-bottom: 4px;
  border-bottom: 1px solid #EDE7DA;
}
.s2-group-header:first-of-type { margin-top: 4px; }

/* Footer CTA — mirrors the hero button, right-aligned */
.s2-footer {
  text-align: right;
  padding: 20px 0;
  border-top: 1px solid #EDE7DA;
  margin-top: 30px;
}

/* ══════════════════════════════════════════════════════════
   KTM page — v3 layout (2026-09-22 redesign)
   No landing card; inline artefact previews; small
   Download+Replace buttons; ETA/Cancel overlay while generating.
   ══════════════════════════════════════════════════════════ */

.ktm-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 24px; flex-wrap: wrap;
}
.ktm-header-body { flex: 1; min-width: 240px; }
.ktm-top-cta { flex-shrink: 0; margin-top: 4px; }
.ktm-top-cta.is-disabled {
  opacity: 0.45; pointer-events: none; cursor: not-allowed;
}

.ktm-artefacts { display: flex; flex-direction: column; gap: 18px; }

.ktm-card {
  background: white;
  border: 1px solid #EDE7DA;
  border-radius: 8px;
  padding: 18px 20px;
}
.ktm-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.ktm-card-head-left { display: flex; align-items: center; gap: 12px; flex: 1; }
.ktm-card-check {
  width: 24px; height: 24px; border-radius: 50%;
  background: #E5F0E1; color: #2F6B4F;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.ktm-card-check.pending { background: #EDE7DA; color: #6C6350; }
.ktm-card-title {
  font-size: 17px; font-weight: 700; color: #2F6B4F;
}
.ktm-card-sub {
  color: #6C6350; font-size: 13px; margin-top: 2px;
}
.ktm-card-actions {
  display: flex; gap: 6px; align-items: center; flex-shrink: 0;
}

/* Small action buttons — matches the field-card action style */
.btn-sm-inline {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; font-size: 12px; font-weight: 600;
  border-radius: 4px; border: 1px solid #EDE7DA;
  background: white; color: #6C6350;
  cursor: pointer; text-decoration: none;
  line-height: 1.2; white-space: nowrap;
}
.btn-sm-inline:hover { border-color: #2F6B4F; color: #2F6B4F; }
.btn-sm-file { cursor: pointer; }
.btn-sm-file input[type=file] { display: none; }

.ktm-card-pending-lbl {
  font-size: 12px; color: #6C6350; font-style: italic;
}

/* Preview area inside a card */
.ktm-card-preview { margin-top: 6px; }
.ktm-preview-loading {
  padding: 30px; text-align: center;
  color: #6C6350; font-size: 13px; font-style: italic;
  background: #FAF7EE; border-radius: 6px;
}
.ktm-preview-empty {
  padding: 30px; text-align: center;
  color: #8A7F63; font-size: 13px; font-style: italic;
  background: #FAF7EE; border: 1px dashed #EDE7DA; border-radius: 6px;
}

/* Flow diagram stacked slides */
.pptx-preview-stacked {
  display: flex; flex-direction: column; gap: 14px;
}
.pptx-slide-stacked {
  margin: 0; position: relative;
  border: 1px solid #EDE7DA; border-radius: 6px;
  background: #FAF7EE; overflow: hidden;
}
.pptx-slide-stacked img {
  display: block; width: 100%; height: auto;
}
.pptx-slide-page-chip {
  position: absolute; top: 8px; left: 10px;
  background: white; color: #2F6B4F;
  padding: 3px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 700;
  border: 1px solid #EDE7DA;
  z-index: 2;
}

/* Footer CTA */
.ktm-footer {
  text-align: right; padding: 20px 0;
  border-top: 1px solid #EDE7DA;
  margin-top: 24px;
}

/* ── Full-page generating overlay ─────────────────── */
.ktm-overlay {
  position: fixed; inset: 0;
  background: rgba(250, 247, 238, 0.94);
  z-index: 9000;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 120px;
}
.ktm-overlay-card {
  background: white; border: 1px solid #EDE7DA;
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  padding: 32px 40px; max-width: 520px; width: 100%;
  text-align: center;
}
.ktm-spinner {
  width: 48px; height: 48px; margin: 0 auto 20px auto;
  border: 4px solid #EDE7DA;
  border-top-color: #2F6B4F;
  border-radius: 50%;
  animation: ktm-spin 1s linear infinite;
}
@keyframes ktm-spin { to { transform: rotate(360deg); } }
.ktm-overlay-title {
  font-size: 20px; font-weight: 700; color: #2F6B4F;
  margin: 0 0 8px 0;
}
.ktm-overlay-sub {
  color: #6C6350; font-size: 14px; margin: 0 0 18px 0;
}
.ktm-overlay-eta {
  background: #FAF7EE; border: 1px solid #EDE7DA;
  border-radius: 6px; padding: 10px 14px;
  color: #1a1a1a; font-size: 13px;
  margin: 12px 0 16px 0;
}
.ktm-overlay-eta strong { color: #2F6B4F; }
.ktm-overlay-progress { margin: 16px 0; }
.ktm-overlay-bar {
  height: 8px; background: #EDE7DA; border-radius: 999px;
  overflow: hidden; margin-bottom: 8px;
}
.ktm-overlay-bar > div {
  height: 100%; background: #2F6B4F;
  width: 0; transition: width 0.35s ease;
  border-radius: 999px;
}
.ktm-overlay-msg {
  color: #6C6350; font-size: 13px; min-height: 18px;
}
.ktm-overlay-cancel {
  display: inline-block; padding: 8px 20px;
  border: 1px solid #EDE7DA; border-radius: 6px;
  color: #6C6350; background: white; text-decoration: none;
  font-size: 13px; font-weight: 500; cursor: pointer;
  margin-top: 4px; font-family: inherit;
}
.ktm-overlay-cancel:hover {
  border-color: #B23A2A; color: #B23A2A;
}
.ktm-overlay-note {
  color: #8A7F63; font-size: 12px; margin: 12px 0 0 0;
  opacity: 0.9; line-height: 1.5;
}

/* KTM v3 header — resume + generate-full-protocol side by side */
.ktm-header-actions {
  display: flex; gap: 10px; align-items: center;
  flex-shrink: 0; flex-wrap: wrap; margin-top: 4px;
}
.ktm-partial-note {
  background: #FFF9E6; border: 1px solid #E5C64B; border-radius: 6px;
  padding: 10px 14px; margin: -12px 0 20px 0;
  color: #6E5300; font-size: 13px; line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════
   Step 5 (Protocol generation) — right-rail v2 (2026-09-22)
   State-aware primary card at top of the aside; the this-run
   card sits below (see .this-run-card, unchanged).
   ══════════════════════════════════════════════════════════ */

.s5-primary {
  background: white;
  border: 1px solid #EDE7DA;
  border-radius: 8px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.s5-eyebrow {
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 11px; color: #6C6350; font-weight: 700;
  margin: 0 0 6px 0;
}
.s5-title {
  font-size: 17px; font-weight: 700; color: #2F6B4F;
  margin: 0 0 6px 0;
}
.s5-lede {
  color: #6C6350; font-size: 13px; line-height: 1.5;
  margin: 0 0 14px 0;
}
.s5-hint {
  color: #8A7F63; font-size: 11px; line-height: 1.5;
  margin: 10px 0 0 0; text-align: center;
}
.s5-ctrl-label {
  display: block; font-size: 12px; color: #6C6350;
  font-weight: 600; margin: 4px 0 4px 0;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.s5-select {
  width: 100%; padding: 8px 10px;
  border: 1px solid #EDE7DA; border-radius: 4px;
  font-size: 13px; background: white; color: #1a1a1a;
  font-family: inherit; margin-bottom: 12px; cursor: pointer;
}
.s5-select:hover { border-color: #2F6B4F; }
.s5-primary-btn {
  display: block; width: 100%;
  padding: 11px; border-radius: 6px;
  background: #2F6B4F; color: white; border: none;
  font-weight: 600; font-size: 14px;
  cursor: pointer; font-family: inherit;
}
.s5-primary-btn:hover { background: #204F3B; }
.s5-secondary-btn {
  display: block; width: 100%;
  padding: 8px; border-radius: 4px;
  background: white; color: #2F6B4F;
  border: 1px solid #EDE7DA;
  font-weight: 600; font-size: 13px;
  cursor: pointer; font-family: inherit;
}
.s5-secondary-btn:hover { border-color: #2F6B4F; background: #F5F1E6; }

/* State 1 — Ready */
.s5-ready {
  background: linear-gradient(135deg, #F0F7F2, #F5F1E6);
  border-color: #C9DBCC;
}
.s5-ready .s5-eyebrow { color: #2F6B4F; }

/* State 2 — Generating */
.s5-generating {
  border-color: #2F6B4F;
  box-shadow: 0 4px 12px rgba(47,107,79,0.08);
}
.s5-generating .s5-eyebrow { color: #2F6B4F; }
.s5-spinner {
  width: 36px; height: 36px; margin: 0 auto 12px auto;
  border: 3px solid #EDE7DA; border-top-color: #2F6B4F;
  border-radius: 50%; animation: s5-spin 1s linear infinite;
}
@keyframes s5-spin { to { transform: rotate(360deg); } }
.s5-gen-num {
  font-size: 26px; font-weight: 700; color: #2F6B4F;
  text-align: center;
}
.s5-gen-lbl {
  color: #6C6350; font-size: 13px; text-align: center;
  margin-bottom: 12px;
}
.s5-progress-outer {
  height: 8px; background: #EDE7DA; border-radius: 999px;
  overflow: hidden; margin: 8px 0 8px 0;
}
.s5-progress-inner {
  height: 100%; background: #2F6B4F; border-radius: 999px;
  transition: width 0.4s ease;
}
.s5-eta {
  color: #6C6350; font-size: 12px; text-align: center;
  margin-bottom: 14px; line-height: 1.5;
}
.s5-eta strong { color: #1a1a1a; }
.s5-stop-btn {
  display: block; width: 100%;
  padding: 10px; border-radius: 6px;
  background: white; color: #B23A2A; border: 1px solid #B23A2A;
  font-weight: 600; font-size: 14px;
  cursor: pointer; font-family: inherit;
}
.s5-stop-btn:hover { background: #B23A2A; color: white; }

/* State 3 — Incomplete */
.s5-incomplete {
  background: #FFF9E6;
  border-color: #E5C64B;
}
.s5-incomplete .s5-eyebrow { color: #6E5300; }
.s5-incomplete .s5-title { color: #6E4200; }

/* 2026-09-24 — failed (error) variant + cut-off sections */
.s5-failed { background: #FBE3E1; border-color: #E5A79E; }
.s5-failed .s5-eyebrow { color: #8a1f1f; }
.s5-failed .s5-title   { color: #6E1F16; }
.s5-error-details { margin: 4px 0 12px 0; font-size: 12px; color: #6C6350; }
.s5-error-details pre {
  white-space: pre-wrap; word-break: break-word;
  background: rgba(255,255,255,0.6); padding: 8px; border-radius: 4px;
  font-size: 11px; margin: 6px 0 0 0;
}
.s5-cutoff-note {
  background: #FFF3D6; border: 1px solid #E5C64B; border-radius: 4px;
  padding: 8px 10px; font-size: 13px; color: #6E5300; margin: 0 0 12px 0;
}
.section-shape-cutoff { color: #c77d00; }
.sections-list li.state-cutoff .section-num {
    background: #FFE7B3; color: #7a4a00;
}
.sections-list li.state-cutoff .section-status { color: #9a5b00; }

/* State 4 — Complete */
.s5-complete {
  background: linear-gradient(135deg, #F0F7F2, #F5F1E6);
  border-color: #C9DBCC;
}
.s5-complete .s5-eyebrow { color: #2F6B4F; }
.s5-complete-check {
  width: 40px; height: 40px; border-radius: 50%;
  background: #2F6B4F; color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin: 0 auto 12px auto;
}
.s5-regenerate-fold {
  margin-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 12px;
}
.s5-regenerate-fold > summary {
  cursor: pointer; font-size: 12px; color: #6C6350;
  font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.s5-regenerate-fold > summary:hover { color: #2F6B4F; }

/* KTM v3 — collapsed preview foldout (used by the Filled Required
   Fields workbook, which sits at the bottom of the page). */
.ktm-preview-collapse > summary {
  cursor: pointer; font-size: 13px; color: #6C6350;
  font-weight: 600;
  padding: 8px 10px;
  border: 1px solid #EDE7DA;
  border-radius: 4px;
  background: #FAF7EE;
  list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  user-select: none;
}
.ktm-preview-collapse > summary:hover {
  border-color: #2F6B4F; color: #2F6B4F;
}
.ktm-preview-collapse > summary::before {
  content: "▶";
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 10px;
}
.ktm-preview-collapse[open] > summary::before { transform: rotate(90deg); }
.ktm-preview-collapse > summary::-webkit-details-marker { display: none; }

/* ══════════════════════════════════════════════════════════════════
   "Protocol generated" page — /wizard/5/done  (2026-09-24)
   ══════════════════════════════════════════════════════════════════ */
.done-page { max-width: 980px; margin: 0 auto; padding: 12px 0 40px; }
.done-hero { text-align: center; margin-bottom: 26px; }
.done-check { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px;
  background: #E5F0E1; color: #2F6B4F; font-size: 34px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.done-hero h1 { font-family: Georgia, serif; color: #2F6B4F; font-size: 30px; margin: 0 0 6px; }
.done-hero p { color: #6C6350; margin: 0; }
.done-facts { display: inline-flex; flex-wrap: wrap; margin: 16px 0 0; background: #fff;
  border: 1px solid #EDE7DA; border-radius: 8px; overflow: hidden; }
.done-fact { padding: 10px 20px; border-right: 1px solid #EDE7DA; text-align: left; }
.done-fact:last-child { border-right: 0; }
.done-fact dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #6C6350; }
.done-fact dd { margin: 0; font-weight: 600; font-size: 14px; }
.done-cutoff { background: #FFF3D6; border: 1px solid #E5C64B; color: #6E5300;
  border-radius: 8px; padding: 12px 16px; margin: 0 0 22px; font-size: 14px; }
.done-cutoff-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.done-cutoff-row { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; background: rgba(255,255,255,.6); border-radius: 6px; padding: 6px 10px; margin: 0; }
.done-btn-mini { background: #fff; color: #6E5300; border: 1px solid #E5C64B;
  border-radius: 5px; padding: 4px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.done-btn-mini:hover { background: #FFF9E6; }
.done-next-h { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: #6C6350; margin: 0 0 12px; font-weight: 600; }
.done-options { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .done-options { grid-template-columns: 1fr; } }
.done-opt { background: #fff; border: 1px solid #EDE7DA; border-radius: 10px;
  padding: 22px 20px 20px; display: flex; flex-direction: column; position: relative; }
.done-opt.done-rec { border: 2px solid #2F6B4F; box-shadow: 0 4px 16px rgba(47,107,79,.10); }
.done-rec-badge { position: absolute; top: -11px; left: 18px; background: #2F6B4F; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; }
.done-opt-icon { font-size: 26px; margin-bottom: 8px; }
.done-opt h3 { margin: 0 0 6px; font-size: 18px; color: #204F3B; }
.done-opt p { margin: 0 0 10px; color: #6C6350; font-size: 14px; }
.done-opt ul { margin: 0 0 16px; padding-left: 18px; color: #444; font-size: 13px; }
.done-opt ul li { margin-bottom: 3px; }
.done-spacer { flex: 1; }
.done-btn { display: block; width: 100%; text-align: center; padding: 11px 16px;
  border-radius: 6px; font: inherit; font-weight: 600; font-size: 14px;
  text-decoration: none; cursor: pointer; border: none; }
.done-btn-primary { background: #2F6B4F; color: #fff; }
.done-btn-primary:hover { background: #204F3B; }
.done-btn-secondary { background: #fff; color: #2F6B4F; border: 1px solid #2F6B4F; }
.done-btn-secondary:hover { background: #FAF7EE; }
.done-btn-danger-outline { background: #fff; color: #8a1f1f; border: 1px solid #d9a39c; }
.done-btn-danger-outline:hover { background: #FBE3E1; }
.done-btn-danger { background: #8a1f1f; color: #fff; }
.done-btn[disabled] { opacity: .45; cursor: not-allowed; }
.done-dl-warning { background: #FBE3E1; border: 1px solid #E5A79E; color: #8a1f1f;
  border-radius: 6px; padding: 10px 12px; font-size: 13px; line-height: 1.45; margin: 0 0 14px; }
.done-dl-hint { font-size: 12px; color: #6C6350; margin: 8px 0 0; text-align: center; }
.done-lock-note { margin-top: 10px; font-size: 12px; color: #8a1f1f;
  display: flex; gap: 6px; align-items: flex-start; }
.done-footer-links { margin-top: 28px; text-align: center; font-size: 13px; color: #6C6350; }
.done-footer-links a { color: #6C6350; }
.done-backdrop { position: fixed; inset: 0; background: rgba(20,20,15,.45);
  display: flex; align-items: center; justify-content: center; z-index: 9500; }
.done-backdrop[hidden] { display: none; }
.done-dialog { background: #fff; border-radius: 12px; width: 520px; max-width: 92vw;
  padding: 26px 28px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.done-dialog h2 { margin: 0 0 8px; font-family: Georgia, serif; color: #8a1f1f; font-size: 22px; }
.done-dialog p { margin: 0 0 12px; color: #333; font-size: 14px; }
.done-dialog ul { margin: 0 0 16px; padding: 0; list-style: none; font-size: 14px; }
.done-dialog li { padding: 6px 0; border-bottom: 1px solid #EDE7DA; display: flex; gap: 10px; }
.done-dialog li:last-child { border-bottom: 0; }
.done-dialog .x { color: #8a1f1f; font-weight: 700; width: 16px; }
.done-dialog .ok { color: #2F6B4F; font-weight: 700; width: 16px; }
.done-dialog label { display: flex; gap: 8px; align-items: flex-start; font-size: 14px;
  background: #FBF6EA; border: 1px solid #EDE7DA; border-radius: 6px;
  padding: 10px 12px; margin-bottom: 16px; }
.done-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin: 0; }
.done-dialog-actions .done-btn { width: auto; }
.done-btn.is-busy { opacity: .8; cursor: progress; pointer-events: none; }
.done-spin { display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
  border: 2px solid rgba(47,107,79,.25); border-top-color: #2F6B4F; border-radius: 50%;
  animation: doneSpin .8s linear infinite; margin-right: 6px; }
@keyframes doneSpin { to { transform: rotate(360deg); } }
.done-dl-error { font-size: 13px; color: #8a1f1f; background: #FBE3E1;
  border: 1px solid #E5A79E; border-radius: 6px; padding: 8px 10px; margin: 8px 0 0; }

/* ══ Welcome back + friendly error pages (2026-09-28) ══ */
.wb-page { max-width: 620px; margin: 40px auto 60px; }
.wb-eyebrow-top { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: #6C6350; margin: 0 0 6px; }
.wb-title { font-family: Georgia, serif; color: #2F6B4F; font-size: 30px; margin: 0 0 6px; }
.wb-sub { color: #6C6350; margin: 0 0 24px; }
.wb-card { display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  background: #fff; border: 1px solid #EDE7DA; border-radius: 10px;
  padding: 18px 20px; margin-bottom: 14px; color: #1a1a1a; }
.wb-card:hover { border-color: #2F6B4F; }
.wb-continue { border: 2px solid #2F6B4F; box-shadow: 0 4px 16px rgba(47,107,79,.10); }
.wb-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: #6C6350; font-weight: 600; }
.wb-name { font-size: 18px; font-weight: 600; color: #204F3B; }
.wb-stage { font-size: 14px; color: #444; }
.wb-id { font-size: 12px; color: #8A7F63; }
.wb-go { margin-top: 8px; align-self: flex-start; background: #2F6B4F; color: #fff;
  padding: 8px 16px; border-radius: 6px; font-weight: 600; font-size: 14px; }
.wb-actions { display: flex; gap: 10px; margin-top: 8px; }