/* LO AI Tools — Design System
   Outfit display + Plus Jakarta Sans body. Warm cream & orange palette.
   Matches guide/styles.css design system. WCAG 2.2 AA compliant. */

/* ------------------------------------------------------------------ */
/* Design tokens                                                       */
/* ------------------------------------------------------------------ */

:root {
    /* Brand — #ad5415 is the lightest same-hue orange that passes
       WCAG AA 4.5:1 on white, cream-bg, and primary-light surfaces */
    --primary:        #ad5415;
    --primary-hover:  #934712;
    --primary-light:  #fcf0d8;
    --primary-surface:#fff3e4;
    --accent:         #ad5415;
    --accent-light:   #fcf0d8;

    /* Neutrals */
    --text:           #040608;
    --text-secondary: #655b55;
    --text-tertiary:  #726e6b;
    --bg:             #fef8ee;
    --surface:        #ffffff;
    --border:         #d5cfcc;
    --border-light:   #ece7e3;

    /* Semantic */
    --error:          #b83a2e;
    --error-bg:       #fdf0ef;
    --warning:        #a67d1a;
    --warning-bg:     #fef9e7;
    --warning-ink-dark:#7a5a0a;
    --success:        #1a7a3a;
    --success-bg:     #edf7f0;
    --info-bg:        #fff3e4;

    /* Org accent — teal for LogicalOutcomes section */
    --lo-accent:      #1a6b63;

    /* Radii */
    --radius-sm:      6px;
    --radius:         0.75rem;
    --radius-lg:      20px;
    --radius-pill:    999px;

    /* Shadows */
    --shadow-xs:      0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow:         0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg:      0 8px 24px rgba(0,0,0,0.12);
    --focus-ring:     0 0 0 3px rgba(173, 84, 21, 0.25);
    /* Header */
    --header-bg:      rgba(255, 255, 255, 0.94);
    --accent-dark:    #934712;

    /* Spacing scale */
    --space-xs:       0.25rem;
    --space-sm:       0.5rem;
    --space-md:       1rem;
    --space-lg:       1.5rem;
    --space-xl:       2.5rem;

    /* Layout */
    --max-width:      960px;
    --page-padding:   2rem;

    /* Fonts */
    --font-display:   'Outfit', sans-serif;
    --font-body:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
                      "Segoe UI", Roboto, sans-serif;
}

/* ------------------------------------------------------------------ */
/* Reset & base                                                        */
/* ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
    font-family: var(--font-body);
    color: var(--text);
    background:
        radial-gradient(circle at top right, rgba(173, 84, 21, 0.08), transparent 28%),
        linear-gradient(180deg, #fffdf9 0%, var(--bg) 32%, #ffffff 100%);
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Skip to main content link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 1000;
    padding: 0.75rem 1.5rem;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* Typography                                                          */
/* ------------------------------------------------------------------ */

h1, h2, h3 {
    font-family: var(--font-display);
    line-height: 1.25;
    color: var(--text);
}

h1 { font-size: 2rem;   font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.1rem; font-weight: 700; }

p { color: var(--text-secondary); }

/* ------------------------------------------------------------------ */
/* .prose — opt-in long-form content typography                        */
/* ------------------------------------------------------------------ */
/* The site-wide reset above strips margin and padding from every
   element. Components and form pages re-establish their own spacing
   inside class-scoped wrappers (.info-box, .qual-form-card, .alert,
   etc.). Long-form prose pages (manuals, guides, glossaries, help
   pages) have naked <h2>/<h3>/<p>/<ul>/<ol>/<dl> elements with no
   such wrapper, so they need this opt-in utility class to render
   readably. Wrap the page's <section> in `.prose` (alongside any
   page-scoped class like .rf-page) and the prose elements inside
   will inherit sensible margins and bullet indentation.

   Reference page: app/templates/resilient/guide.html.
   Documented in: docs/component-reference.md.
   Lint-enforced by: tests/test_template_lint.py (test_prose_pages_*).
*/
.prose h2 { margin: 2rem 0 0.75rem; }
.prose h3 { margin: 1.5rem 0 0.5rem; }
.prose p  { margin: 0 0 0.85rem; }
.prose ul,
.prose ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.prose ul ul, .prose ol ol,
.prose ul ol, .prose ol ul { margin-top: 0.4rem; margin-bottom: 0.4rem; }
.prose li         { margin-bottom: 0.4rem; }
.prose li > p     { margin-bottom: 0.4rem; }
.prose dl         { margin: 0 0 1rem; }
.prose dt         { margin-top: 0.9rem; font-weight: 600; color: var(--text); }
.prose dt:first-of-type { margin-top: 0; }
.prose dd         { margin: 0.2rem 0 0 1.25rem; color: var(--text-secondary); }
.prose table      { margin: 0.5rem 0 1.25rem; }
.prose nav[aria-label="Contents"] { margin: 1.5rem 0; }
/* Headings that come immediately after an info-box, alert, or nav block
   need top margin to keep them from squashing against the box's edge. */
.prose > .alert + h2,
.prose > .info-box + h2,
.prose > nav + h2 { margin-top: 1.75rem; }

/* ------------------------------------------------------------------ */
/* .empty-state — "no data here yet" surface                           */
/* ------------------------------------------------------------------ */
/* Used by the empty_state() macro in components/feedback.html.
   Replaces ad-hoc .rf-empty / .qual-empty / inline classes scattered
   across the apps. */
.empty-state {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 1rem 0;
    padding: 0.75rem 0;
}
.empty-state .empty-state-action {
    margin-left: 0.25rem;
}

a { color: var(--primary); transition: color 0.15s; }
a:hover { color: var(--primary-hover); }
a:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 3px;
}

code {
    background: var(--primary-light);
    color: var(--primary);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
    font-size: 0.88em;
    font-weight: 500;
}

strong { font-weight: 600; color: var(--text); }

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */

.site-header {
    background: var(--header-bg);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border);
}

.nav-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--page-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 3.5rem;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}
.nav-brand:hover { opacity: 0.9; }

.nav-logo {
    height: 28px;
    width: auto;
}

.nav-brand-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.nav-links { display: flex; gap: 0.15rem; align-items: center; }

.nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.35rem 0.65rem;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.nav-link:hover {
    color: var(--text);
}
.nav-link.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}
/* Nav dropdown (Learn menu) */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}
.nav-dropdown > a {
    cursor: pointer;
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.5rem 0;
    z-index: 100;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    display: block;
}
.nav-dropdown-menu a {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
}
.nav-dropdown-menu a:hover {
    background: var(--bg);
    color: var(--text);
}
.nav-dropdown-heading {
    display: block;
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.nav-dropdown-heading:not(:first-child) {
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-light);
    padding-top: 0.75rem;
}

.main-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--page-padding);
    width: 100%;
    flex: 1;
}

.site-footer {
    text-align: center;
    padding: 1rem var(--page-padding);
    font-size: 0.8rem;
    color: var(--text-tertiary);
    border-top: 1px solid var(--border);
}
.site-footer a {
    color: var(--text-tertiary);
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 2px;
}
.site-footer a:hover {
    color: var(--text-secondary);
}

/* Tools page styles are in guide.css */

/* ------------------------------------------------------------------ */
/* Back link                                                           */
/* ------------------------------------------------------------------ */

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: color 0.15s;
}
.back-link:hover { color: var(--primary); }

.nav-reassurance {
    margin-top: -1rem;
    margin-bottom: 1.5rem;
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

/* ------------------------------------------------------------------ */
/* Workflow header (inner pages)                                        */
/* ------------------------------------------------------------------ */

.workflow-header {
    margin-bottom: 2rem;
    animation: fadeUp 0.4s ease-out;
}
.workflow-header h1 {
    font-size: 1.75rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}
.workflow-header p {
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 640px;
}

/* ------------------------------------------------------------------ */
/* Brand page — template list                                          */
/* ------------------------------------------------------------------ */

.template-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 2rem;
    animation: fadeUp 0.4s ease-out 0.05s both;
}

.template-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.template-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}
.template-item.active {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: var(--shadow-sm);
}

.template-thumb {
    flex-shrink: 0;
    width: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.1));
}
.template-thumb svg {
    width: 100%;
    height: auto;
    border-radius: 3px;
}

.template-info {
    flex: 1;
    min-width: 0;
}
.template-item-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--text);
}
.template-item-format {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}
.template-item-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* Tab bar                                                             */
/* ------------------------------------------------------------------ */

.input-area {
    animation: fadeUp 0.4s ease-out 0.1s both;
}

.tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.5rem;
}

.tab {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    padding: 0.65rem 1.25rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.tab:hover {
    color: var(--primary);
}
.tab-active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Content textarea                                                    */
/* ------------------------------------------------------------------ */

.content-textarea {
    width: 100%;
    min-height: 280px;
    padding: 1rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.content-textarea::placeholder {
    color: var(--text-tertiary);
}
.content-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(173,84,21,0.12);
}

/* ------------------------------------------------------------------ */
/* Generate row (brand forms)                                          */
/* ------------------------------------------------------------------ */

.generate-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.indicator {
    display: none;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.htmx-request .indicator,
.htmx-request.indicator { display: flex; }
.htmx-request #generate-btn { opacity: 0.5; pointer-events: none; }

.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* ------------------------------------------------------------------ */
/* Download / success page (brand)                                     */
/* ------------------------------------------------------------------ */

.download-area {
    text-align: center;
    padding: 3rem 1rem;
    animation: fadeUp 0.5s ease-out;
}
.download-checkmark {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    animation: scaleIn 0.4s ease-out;
}
.download-area h2 {
    font-size: 1.5rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.download-filename {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-family: monospace;
    background: var(--bg);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    display: inline-block;
    margin-bottom: 1.5rem;
}
.download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 200px;
    margin-bottom: 1rem;
}
.download-tip {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-bottom: 1rem;
}
.generate-another {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
}
.generate-another:hover { color: var(--primary); }

/* ------------------------------------------------------------------ */
/* Metadata confirmation step (brand)                                  */
/* ------------------------------------------------------------------ */

.confirm-area {
    max-width: 560px;
    margin: 0 auto;
    animation: fadeUp 0.4s ease-out;
}
.confirm-area h2 {
    font-size: 1.3rem;
    margin-bottom: 0.35rem;
}
.confirm-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    line-height: 1.5;
}
.confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    margin-bottom: 1.25rem;
}
.confidence-high {
    background: var(--success-bg);
    color: var(--success);
}
.confidence-medium {
    background: var(--warning-bg);
    color: var(--warning);
}
.confidence-low {
    background: var(--error-bg);
    color: var(--error);
}
.confirm-fields {
    display: grid;
    gap: 0.875rem;
    margin-bottom: 0.5rem;
}
.confirm-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.confirm-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}
.confirm-field input[type="text"] {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.confirm-field input[type="text"]::placeholder {
    color: var(--text-tertiary);
}
.confirm-field input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(173,84,21,0.12);
}

/* Slide mode picker on confirm page */
.slide-mode-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0 0.5rem;
    background: var(--surface);
}
.slide-mode-fieldset legend {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    padding: 0 0.4rem;
}
.slide-mode-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.75rem 0;
    cursor: pointer;
    line-height: 1.4;
}
.slide-mode-option input[type="radio"] {
    margin-top: 0.25rem;
    accent-color: var(--primary);
}
.slide-mode-option strong {
    color: var(--text);
    font-size: 0.95rem;
}
.radio-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.generation-summary {
    max-width: 400px;
    margin: 0 auto 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: left;
}
.summary-heading {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.summary-fields {
    display: grid;
    gap: 0.25rem;
}
.summary-field {
    display: flex;
    gap: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.4;
}
.summary-field dt {
    color: var(--text-secondary);
    min-width: 5rem;
    flex-shrink: 0;
}
.summary-field dt::after { content: ":"; }
.summary-field dd {
    color: var(--text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    line-height: 1.4;
}
.btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--primary);
    color: var(--surface);
    border-color: var(--primary);
}
.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: var(--shadow-sm);
    color: var(--surface);
}

.btn-secondary {
    background: var(--surface);
    color: var(--text-secondary);
    border-color: var(--border);
}
.btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-small {
    font-size: 0.8rem;
    padding: 0.4rem 0.9rem;
    background: var(--surface);
    color: var(--primary);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
}
.btn-small:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

/* ------------------------------------------------------------------ */
/* Dropzone (data cleaning upload)                                     */
/* ------------------------------------------------------------------ */

.upload-form { margin-bottom: 2rem; }

/* Upload progress feedback (shown during file transfer) */
.upload-progress {
    margin-top: 1rem;
    text-align: center;
}
.upload-progress .progress-bar {
    margin: 0.75rem auto;
    max-width: 400px;
}
.upload-progress-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.btn-uploading {
    opacity: 0.7;
    pointer-events: none;
}
.btn-uploading .spinner {
    margin-right: 0.5rem;
}

.button-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dropzone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
    margin-bottom: 1.5rem;
    background: var(--surface);
}
.dropzone:hover, .dropzone:focus, .dropzone-active {
    border-color: var(--primary);
    background: var(--primary-light);
}
.file-selected {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary);
    margin-top: 0.5rem;
}

.dropzone-icon {
    color: var(--text-tertiary);
    margin-bottom: 0.75rem;
}
.dropzone-text {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}
.dropzone-hint,
.option-hint {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.link-button {
    background: none;
    border: none;
    color: var(--primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(173,84,21,0.3);
    text-underline-offset: 2px;
    padding: 0;
}
.link-button:hover { text-decoration-color: var(--primary); }

.file-list {
    list-style: none;
    text-align: left;
    margin-top: 1rem;
    font-size: 0.9rem;
}
.file-list li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.file-size {
    color: var(--text-tertiary);
    font-size: 0.8rem;
}

.visually-hidden,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ------------------------------------------------------------------ */
/* Options / fieldset                                                   */
/* ------------------------------------------------------------------ */

.options-group {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.options-group legend {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0 0.5rem;
    color: var(--text);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--text-secondary);
}
.checkbox-label input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--primary);
    flex-shrink: 0;
}

/* Optional textarea inside an .options-group fieldset (e.g. the cleaning
   form's preserve-terms allowlist). Lives next to checkbox options so
   shares the legend + spacing of its siblings. */
.options-group .textarea-label {
    display: block;
    margin-top: 1rem;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}
.options-group textarea {
    width: 100%;
    min-height: 5.5rem;
    padding: 0.6rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.options-group textarea::placeholder {
    color: var(--text-tertiary);
}
.options-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(173,84,21,0.12);
}

/* ------------------------------------------------------------------ */
/* Alerts                                                              */
/* ------------------------------------------------------------------ */

.alert {
    padding: 0.875rem 1.125rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.55;
    border-left: 4px solid transparent;
    white-space: pre-line;
}
.alert-error   { background: var(--error-bg);   border-left-color: var(--error); }
.alert-warning { background: var(--warning-bg);  border-left-color: var(--warning); }
.alert-info    { background: var(--info-bg);     border-left-color: var(--primary); }

/* Generator-warning alert on the brand download page. */
.alert .alert-heading { font-weight: 600; margin: 0 0 0.5rem 0; }
.alert .warning-list { margin: 0 0 0.5rem 1.25rem; padding: 0; font-size: 0.9rem; }
.alert .warning-list li { margin-bottom: 0.25rem; }
.alert .warning-tip { margin: 0.5rem 0 0 0; font-size: 0.875rem; color: var(--text-secondary); }

/* Filenames listed inside the "ZIP download blocked" alert on the
   cleaning results page. The alert already has its own warning icon,
   so disc bullets add visual noise. Tighter indent + monospaced
   filenames (matching .review-text's treatment elsewhere on the page)
   makes paths readable and aligned. */
.blocked-file-list {
    margin: 0.5rem 0 0 0;
    padding-left: 1.25rem;
    list-style: none;
}
.blocked-file-list li {
    padding: 0.15rem 0;
    font-family: var(--font-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
    font-size: 0.95em;
    word-break: break-all;
}

.error-message {
    padding: 0.875rem 1.125rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.55;
    border-left: 4px solid var(--error);
    background: var(--error-bg);
    color: var(--text);
}

.text-error { color: var(--error); font-weight: 600; }
.text-warning { color: var(--warning); font-weight: 600; }

/* ------------------------------------------------------------------ */
/* CSV column picker                                                   */
/* ------------------------------------------------------------------ */

.orientation-line {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: -0.5rem 0 1.25rem;
}

.csv-picker {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.csv-caption {
    caption-side: top;
    font-size: 0.9rem;
    color: var(--text-secondary);
    padding: 0.6rem 0.75rem;
    background: var(--surface);
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}
.csv-caption strong { color: var(--text); }
.csv-selected-count { font-weight: 600; color: var(--primary); }

.column-table-scroll {
    overflow-x: auto;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
}
.column-table-scroll:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
}

.column-table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 0.85rem;
}

.column-table th,
.column-table td {
    border: 1px solid var(--border-light);
    padding: 0;
    vertical-align: top;
    text-align: left;
}

.column-header-cell,
.column-select-all-cell {
    max-width: 240px;
    min-width: 140px;
    background: var(--primary-surface);
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.12s;
}
.column-select-all-cell {
    min-width: 80px;
    background: var(--primary-light);
    position: sticky;
    left: 0;
    z-index: 2;
    border-right: 2px solid var(--border);
}
.column-header-cell:hover,
.column-select-all-cell:hover {
    background: var(--primary-light);
}
.column-header-cell:focus-within,
.column-select-all-cell:focus-within {
    box-shadow: inset 0 0 0 3px var(--primary);
}
.column-header-suggested {
    background: var(--primary-light);
}

.column-header-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem;
    cursor: pointer;
    min-height: 44px;
}
.column-header-label input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--primary);
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.column-header-text {
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.column-select-all-label {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
}

.column-sample-row td {
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.35;
}
.column-sample-cell {
    max-width: 240px;
    padding: 0.45rem 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.column-sample-corner {
    background: var(--primary-light);
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 2px solid var(--border);
    min-width: 80px;
}

.column-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.column-submit-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.column-zero-message {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}
#process-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
#process-btn:disabled:hover {
    background: var(--primary);
}

.why-expander {
    margin: 1.25rem 0 0;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border-light);
}
.why-expander > .expandable-toggle {
    font-size: 0.9rem;
    color: var(--primary);
    padding: 0.5rem 0;
}
.why-expander-body {
    margin: 0.25rem 0 0.5rem 1.25rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Cancel confirmation dialog */
.cancel-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(33, 30, 28, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.cancel-dialog-backdrop[hidden] { display: none; }
/* The .btn rule above sets display: inline-flex, which silently overrides
   the browser's default [hidden] { display: none }. Without this, JS that
   hides a button via element.hidden=true has no visible effect. */
.btn[hidden] { display: none; }
.cancel-dialog-panel {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.cancel-dialog-panel h2 {
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
}
.cancel-dialog-panel p {
    margin: 0 0 1.25rem;
    color: var(--text-secondary);
}
.cancel-dialog-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.btn-danger {
    background: #8a2a16;
    color: var(--surface);
    border: 2px solid #8a2a16;
}
.btn-danger:hover, .btn-danger:focus {
    background: #6d1f0f;
    border-color: #6d1f0f;
    color: var(--surface);
}
body.has-open-dialog { overflow: hidden; }

/* ------------------------------------------------------------------ */
/* Filename review (data cleaning)                                     */
/* ------------------------------------------------------------------ */

.rename-form { margin-bottom: 2rem; }

.rename-base-label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}
.rename-base-label input[type="text"] {
    font-size: 1rem;
    padding: 0.55rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    max-width: 320px;
    font-family: var(--font-body);
}
.rename-base-label input[type="text"]:focus {
    border-color: var(--primary);
    outline: 3px solid var(--primary-light);
    outline-offset: 1px;
}

.rename-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.25rem 0 0;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.rename-table thead th {
    text-align: left;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0.75rem 1rem;
    background: var(--primary-surface);
    border-bottom: 1.5px solid var(--border);
}
.rename-table tbody tr {
    border-bottom: 1px solid var(--border-light);
}
.rename-table tbody tr:last-child {
    border-bottom: none;
}
.rename-table tbody th,
.rename-table tbody td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    text-align: left;
    font-weight: normal;
}
.rename-original code {
    font-family: var(--font-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
    font-size: 0.85rem;
    color: var(--text);
    background: var(--primary-surface);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    word-break: break-all;
}
.rename-flag-marker {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--warning-ink-dark, #7a5a0a);
    background: var(--warning-bg, #fef9e7);
    border-radius: var(--radius-pill);
}
.rename-new {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.rename-new input[type="text"] {
    flex: 1 1 180px;
    min-width: 0;
    font-size: 0.9rem;
    padding: 0.45rem 0.65rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
}
.rename-new input[type="text"]:focus {
    border-color: var(--primary);
    outline: 3px solid var(--primary-light);
    outline-offset: 1px;
}
.rename-extension {
    font-family: var(--font-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
    font-size: 0.85rem;
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.rename-keep-original {
    flex-shrink: 0;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    color: var(--text-secondary, var(--text-tertiary));
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    min-height: 24px;
    min-width: 24px;
}
.rename-keep-original:hover {
    background: var(--border-light);
    color: var(--text);
}
.rename-keep-original:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 1px;
    border-color: var(--primary);
}

@media (max-width: 640px) {
    .rename-table thead { display: none; }
    .rename-table tbody tr {
        display: block;
        padding: 0.75rem 0;
    }
    .rename-table tbody th,
    .rename-table tbody td {
        display: block;
        padding: 0.4rem 1rem;
    }
}

/* Show-only-flagged filter row above the rename table. Needs a flex layout
   that puts the checkbox label on the left and the live count announcer on
   the right so the count is visible without scrolling past the table. The
   shared .checkbox-label class supplies the checkbox styling; this wrapper
   only handles the row-level alignment no existing class carries. */
.filename-filter-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 1rem 0 0;
}
.filename-filter-toggle .checkbox-label {
    padding: 0;
}
.filename-filter-count {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.rename-additional-options {
    margin: 1.25rem 0 0;
    padding: 0.25rem 0;
    border-top: 1px solid var(--border-light);
}
.rename-additional-options > .expandable-toggle {
    font-size: 0.95rem;
    color: var(--primary);
    padding: 0.5rem 0;
    font-weight: 500;
}
.rename-additional-body {
    padding: 0.75rem 0 0.5rem 1.25rem;
}
.rename-additional-body .options-group {
    border: none;
    padding: 0;
    margin: 0;
}
.rename-additional-body .rename-base-label {
    margin-bottom: 0.35rem;
}
.rename-additional-body .option-hint {
    margin: 0 0 0.9rem;
}
.rename-additional-body .checkbox-label {
    margin-top: 0.25rem;
}

/* ------------------------------------------------------------------ */
/* Results                                                             */
/* ------------------------------------------------------------------ */

.batch-summary {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;
    box-shadow: var(--shadow-sm);
}
.batch-summary h2 {
    font-size: 1.1rem;
    font-family: var(--font-body);
    margin-bottom: 0.75rem;
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

/* ------------------------------------------------------------------ */
/* Shared card base — see components/card.html + plan doc              */
/* docs/superpowers/plans/2026-04-24-card-macro-family.md              */
/* ------------------------------------------------------------------ */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.card__title { font-size: 1.25rem; margin-bottom: 0.5rem; }
.card__body  { }
.card__summary { cursor: pointer; }

/* Interactive affordance — hover lift for clickable cards (tool-card etc.) */
.card--interactive { transition: box-shadow 0.2s; }
.card--interactive:hover { box-shadow: var(--shadow-sm); }

/* Compact density — tighter padding + smaller radius for dense lists
   (excerpt cards, quote lists). */
.card--compact {
    padding: 1rem;
    border-radius: var(--radius-sm);
}

/* Left-accent variants — 3px brand stripe. Matches the visual language
   used by `.qual-home-primary`, `.rf-quote-card`, and the left-accent
   `.result-card` variants. */
.card--accent-primary { border-left: 3px solid var(--primary); }
.card--accent-green {
    border-left: 3px solid var(--success);
    background: var(--success-bg);
}
.card--accent-yellow {
    border-left: 3px solid var(--warning);
    background: var(--warning-bg);
}
.card--accent-red {
    border-left: 3px solid var(--error);
    background: var(--error-bg);
}

/* Expandable card (<details>) — hide default disclosure marker so the
   shared .expandable-toggle chevron on <summary> is the only indicator. */
details.card--expandable > summary.card__summary { list-style: none; }
details.card--expandable > summary.card__summary::-webkit-details-marker { display: none; }
details.card--expandable > summary.card__summary::marker { display: none; content: ""; }

.result-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--success);
    transition: box-shadow 0.2s;
}
.result-card:hover {
    box-shadow: var(--shadow-sm);
}
.result-error  { border-left-color: var(--error); }
.result-review { border-left-color: var(--warning); }

/* Collapsible result cards for large batches (uses <details>) */
details.result-card { cursor: default; }
details.result-card > summary.result-header {
    cursor: pointer;
    list-style: none;
    margin-bottom: 0;
}
details.result-card > summary.result-header::-webkit-details-marker { display: none; }
details.result-card > summary.result-header::marker { display: none; content: ""; }
details.result-card[open] > summary.result-header {
    margin-bottom: 0.875rem;
}

.result-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.875rem;
}
.result-header h2 {
    font-size: 1rem;
    font-family: var(--font-body);
    font-weight: 600;
}

.result-icon {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--warning-bg);
    color: var(--warning);
}
.result-icon-ok    { background: var(--success-bg); color: var(--success); }
.result-icon-error { background: var(--error-bg);   color: var(--error); }

/* B7 (2026-04-20 A1): chip text next to the file heading making the
   partial-de-identification state explicit. Amber background mirrors the
   existing warning icon; text repeats the warning so the meaning is
   carried in two channels (icon + text), not just colour. */
.result-status-chip {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
    vertical-align: middle;
}
.result-status-chip--partial {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning);
}

.result-error-msg {
    color: var(--error);
    font-size: 0.9rem;
}

.result-downloads {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.result-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.5rem;
    margin-bottom: 1rem;
}
.stat {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.stat-value {
    font-size: 0.9rem;
    color: var(--text);
}

/* ------------------------------------------------------------------ */
/* Review section (expandable)                                         */
/* ------------------------------------------------------------------ */

.review-section {
    margin: 0.875rem 0;
    border: 1.5px solid var(--warning);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
/* Shared expandable toggle — chevron rotation for <details>/<summary> */
.expandable-toggle {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}
.expandable-toggle::-webkit-details-marker { display: none; }
.expandable-toggle::marker { display: none; content: ""; }
.expandable-toggle::before {
    content: '\25B6';
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 0.65em;
    transition: transform 0.2s;
}
details[open] > .expandable-toggle::before {
    transform: rotate(90deg);
}

.review-toggle {
    padding: 0.6rem 0.875rem;
    background: var(--warning-bg);
    font-size: 0.85rem;
    color: var(--warning);
}
.review-items { padding: 0.875rem; }
.review-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}
.review-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.85rem;
}
.review-item:last-child { border-bottom: none; }
.review-type {
    font-weight: 600;
    color: var(--warning);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    margin-right: 0.5rem;
}
.review-text {
    background: var(--warning-bg);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.85em;
}
.review-context {
    color: var(--text-tertiary);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    word-break: break-word;
}

/* Pre-substitution review (A2). The interactive variant lays out the
   checkbox to the left of the row body so the "Replace" control is
   visible and Tab-reachable before the entity text. Flex layout keeps
   the checkbox top-aligned when the reason text wraps. */
.review-item--interactive {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.review-item-toggle {
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.review-item-toggle-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.review-item-body {
    flex: 1 1 auto;
    min-width: 0;
}
.review-source-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    background: var(--border-light);
}
.entity-review-combination-note {
    margin-top: 0.4rem;
    padding: 0.4rem 0.6rem;
    border-left: 3px solid var(--warning);
    background: var(--warning-bg);
    color: var(--text-primary);
    font-size: 0.8rem;
    line-height: 1.35;
    word-break: break-word;
}

/* A2 pre-substitution review page. Form-level layout: header, entity
   list per file, then two submit buttons. No new colours introduced -
   reuses existing button styles. */
.pre-review-file-section {
    margin-bottom: 2rem;
    padding: 1rem;
    border: 1px solid var(--border-light);
    border-radius: 6px;
}
.pre-review-file-section h2 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}
.pre-review-file-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}
.pre-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.error-actions {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Results actions                                                     */
/* ------------------------------------------------------------------ */

.results-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.results-actions-hint {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.audit-download {
    flex-basis: 100%;
    margin-top: 0.75rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.audit-download .btn {
    align-self: flex-start;
}

.rename-summary {
    flex-basis: 100%;
    margin: 0.75rem 0 0;
    padding: 0.75rem 1rem;
    background: var(--primary-surface);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* ------------------------------------------------------------------ */
/* Info box                                                            */
/* ------------------------------------------------------------------ */

.info-box {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-top: 1.75rem;
    font-size: 0.9rem;
    line-height: 1.6;
}
.info-box h2 {
    font-size: 1rem;
    font-family: var(--font-body);
    font-weight: 600;
    margin-bottom: 0.4rem;
    margin-top: 1.25rem;
    color: var(--text);
}
.info-box h2:first-child { margin-top: 0; }
.info-box ul {
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
}
.info-box li {
    margin-bottom: 0.3rem;
    color: var(--text-secondary);
}
.info-box p {
    margin-bottom: 0.4rem;
}

/* Collapsible variant — summary acts as the h2 heading. Used by
   data_handling_box(collapsible=True) to avoid a wall of bullets below
   the call-to-action on home pages. */
.info-box--collapsible > summary {
    list-style: none;
    cursor: pointer;
}
.info-box--collapsible > summary h2 {
    display: inline;
    margin: 0;
}
.info-box--collapsible[open] > summary h2 {
    margin-bottom: 0.5rem;
}
.info-box--collapsible > summary.expandable-toggle::before {
    font-size: 0.7em;
    vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Animations / keyframes                                              */
/* ------------------------------------------------------------------ */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Transparency link inside card details ──────────────────────── */
.details-transparency-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--accent-dark);
    text-decoration: none;
    transition: color 0.15s;
}

.details-transparency-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* ── How It Works page ───────────────────────────────────────────── */
.how-it-works {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--page-padding);
}

.how-it-works-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.how-it-works-header h1 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--accent-dark);
    text-decoration: none;
    white-space: nowrap;
}
.back-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

.how-it-works-content {
    line-height: 1.6;
}

.how-it-works-content h2 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    color: var(--text);
}

/* V1 — when a user clicks "How it works →" from a workflow page, the Tech
   Reference page scrolls to the matched section anchor. Without a visible
   focus indicator the user (especially a keyboard or screen-reader user)
   gets no signal that they arrived at the right section. The :target
   pseudo-class handles exactly this case without needing tabindex. */
.how-it-works-content h2:target {
    outline: 3px solid var(--accent);
    outline-offset: 6px;
    background-color: var(--accent-light);
    scroll-margin-top: 1rem;
}

.how-it-works-content h3 {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    margin-top: 1.25rem;
}

.how-it-works-content ul {
    padding-left: 1.25rem;
}

.how-it-works-content li {
    margin-bottom: 0.3rem;
}

.how-it-works-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}

.how-it-works-content code,
.how-it-works-content pre {
    font-size: 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.how-it-works-content pre {
    padding: 1rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.how-it-works-content code {
    padding: 0.15rem 0.35rem;
}

.how-it-works-content a {
    color: var(--accent-dark);
    text-decoration: none;
}
.how-it-works-content a:hover {
    text-decoration: underline;
}

.how-it-works-content em {
    color: var(--text-secondary);
}

/* ── Compliance report ────────────────────────────────────────────── */

/* Prominent disclaimer blockquote */
.compliance-report-content blockquote {
    border-left: 4px solid var(--warning);
    background: var(--warning-bg);
    padding: 0.75rem 1rem;
    margin: 1.5rem 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text);
}

.compliance-report-content blockquote p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
}

/* Summary table */
.compliance-report-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin: 1rem 0 1.5rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.compliance-report-content th {
    background: var(--primary-light);
    color: var(--text);
    font-weight: 600;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
}

.compliance-report-content td {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border-light);
    vertical-align: top;
}

.compliance-report-content tr:nth-child(even) td {
    background: var(--primary-surface);
}

/* Per-tool h3 sections (rendered from pandoc h3) */
.compliance-report-content h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    text-transform: none;
    letter-spacing: 0;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
    :root {
        --page-padding: 1.25rem;
    }
    .template-item { gap: 1rem; padding: 0.875rem 1rem; }
    .template-thumb { width: 72px; }
    .nav-container {
        flex-direction: column;
        gap: 0.5rem;
        height: auto;
        padding: 0.75rem var(--page-padding);
    }
    .nav-links { flex-wrap: wrap; justify-content: center; }
    .results-actions { flex-direction: column; }
    .form-actions { flex-direction: column; }
    .result-stats { gap: 0.5rem 1.5rem; }
}

@media (max-width: 480px) {
    .brand-header h1,
    .workflow-header h1 { font-size: 1.4rem; }
    .template-item { padding: 0.75rem; }
    .template-thumb { width: 60px; }
}

/* -----------------------------------------------------------------------
   Qualitative Analysis workflow styles
   ----------------------------------------------------------------------- */

/* Step layout & header */
.qual-step { max-width: var(--max-width); margin: 0 auto; padding: 2rem 1rem; }
.qual-step-header { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1.5rem; }
.qual-phase-label {
    background: var(--border-light);
    color: var(--text-secondary);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.qual-step-badge { background: var(--primary); color: #fff; padding: 0.25rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; }
.qual-project-code { font-family: monospace; background: var(--border-light); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.875rem; margin-left: auto; }
.qual-step-actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.qual-step-subtitle {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-tertiary);
    font-family: var(--font-body);
    margin-top: 0.25rem;
}

/* Home page */
.qual-home { max-width: var(--max-width); margin: 0 auto; padding: 0 1rem 2rem; }
.qual-home .workflow-header { margin-bottom: 1.5rem; }

/* Primary "Start New Analysis" card — full-width, prominent */
.qual-home-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.qual-home-card h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.qual-home-card p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 0.75rem; }
.qual-home-primary { border-left: 3px solid var(--primary); }
.qual-home-primary .btn { margin-top: 0.5rem; }
.qual-home-time { font-size: 0.875rem; color: var(--text-tertiary); margin-bottom: 1rem; }

/* Example finding disclosure inside the primary card.
   Uses shared .expandable-toggle class for the chevron — see style.css:1158. */
.qual-home-example {
    margin-bottom: 1.25rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--background);
}
.qual-home-example > summary {
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.qual-home-example-body {
    padding: 0.25rem 0.875rem 0.875rem 1.875rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.qual-home-example-body p { margin: 0 0 0.5rem; font-size: 0.875rem; }
.qual-home-example-body p:last-child { margin-bottom: 0; }
.qual-home-example-body p.qual-home-example-label {
    font-style: italic;
    color: var(--text-tertiary);
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

/* BYOQ home-page expander — outer spacing only. Sits between the primary
   "Start a New Analysis" card and the resume card. Inner controls inherit
   from existing .qual-form-group / .qual-question-item / .qual-custom-eq-*
   rules. Task 8 JS binds to the scoping hooks inside (no CSS rules yet). */
.qual-home-byoq {
    margin-bottom: 1rem;
}

/* Resume section — demoted, compact, secondary styling */
.qual-home-resume {
    background: var(--background);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.qual-home-resume h2 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}
.qual-home-resume p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}
.qual-home-resume-form {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.qual-home-resume-field { flex: 1; min-width: 200px; }
.qual-home-resume label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--text-secondary);
}
.qual-home-resume input[type="text"] {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}
.qual-home-resume small {
    display: block;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
}
.qual-home-resume .btn { flex-shrink: 0; }
.qual-home-resume .error-message { margin-top: 0.75rem; }

.qual-home .info-box { margin-bottom: 1.5rem; }

/* Compact "Before you start" prerequisite alert on the qual home page.
   Tightens the default alert spacing so it sits inline with the CTA stack. */
.qual-home-prereq {
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    white-space: normal;
}
.qual-home-prereq p { margin: 0; }

/* V9 — two-level identifier explainer. Visually distinct from the prereq
   alert (which is a warning) and the card body (a call-to-action). Uses the
   existing secondary-text scale so it reads as orienting copy, not a
   warning. */
.qual-home-identifiers {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Form cards (replace browser-default fieldsets) */
.qual-form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.qual-form-card h2 {
    font-size: 1rem;
    font-family: var(--font-body);
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text);
}

/* Table scroll wrapper */
.qual-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0.5rem 0;
}

/* Table helper text */
.qual-table-help {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-top: 0.75rem;
    line-height: 1.5;
}

/* Inventory summary */
.qual-inventory-summary { margin-bottom: 0.5rem; }
.qual-inventory-summary p { font-size: 0.9rem; color: var(--text-secondary); }

/* Inventory table */
.qual-inventory-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; }
.qual-inventory-table th, .qual-inventory-table td { padding: 0.5rem 0.625rem; border: 1px solid var(--border); text-align: left; font-size: 0.875rem; }
.qual-inventory-table thead th { background: var(--primary-surface); font-weight: 600; font-size: 0.8rem; white-space: nowrap; }
.qual-inventory-table input[type="text"],
.qual-inventory-table input[type="number"] { width: 100%; border: 1px solid var(--border); padding: 0.3rem 0.4rem; border-radius: 3px; font-size: 0.85rem; }
.qual-inventory-table input[type="text"]:focus,
.qual-inventory-table input[type="number"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(173,84,21,0.12); }
.qual-inventory-table input[type="checkbox"] { width: auto; }
.qual-inventory-table tr.excluded td { background: var(--border-light); color: var(--text-tertiary); }
.qual-inventory-table tr.excluded td:first-child { color: inherit; }
.exclusion-rationale-row td { border-top: none !important; padding-top: 0; }
.exclusion-rationale-row input[type="text"] { width: auto; }

/* Consent */
.qual-consent-box { background: var(--info-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin: 1.5rem 0; }

/* Progress */
.qual-progress { text-align: center; padding: 2rem; }
.progress-bar { height: 8px; background: var(--border); border-radius: var(--radius-sm); margin: 1rem 0; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--primary); border-radius: var(--radius-sm); transition: width 0.3s; }

/* Coding workspace */
.qual-coding-workspace { max-width: 1200px; }
.qual-coding-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; min-height: 500px; }
.qual-theme-sidebar { border-right: 1px solid var(--border); padding-right: 1rem; overflow-y: auto; max-height: 70vh; }
.qual-theme-list { list-style: none; padding: 0; margin: 0.5rem 0; }
.qual-theme-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0.5rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; cursor: pointer; text-align: left; }
.qual-theme-btn:hover, .qual-theme-btn:focus { border-color: var(--primary); background: var(--primary-surface); }
.qual-theme-btn.active { border-color: var(--primary); background: var(--primary-surface); font-weight: 600; }
.qual-theme-count { background: var(--border-light); padding: 0.125rem 0.5rem; border-radius: 10px; font-size: 0.75rem; }
.qual-filter-bar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding: 0.75rem; background: var(--primary-surface); border-radius: var(--radius-sm); margin-bottom: 1rem; }
.qual-filter-bar label { font-size: 0.875rem; font-weight: 500; }
.qual-filter-bar select { padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* Excerpt cards */
.qual-excerpt-cards { display: flex; flex-direction: column; gap: 1rem; }
.qual-excerpt-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; }
.qual-excerpt-meta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
.qual-excerpt-quote { border-left: 4px solid var(--primary); padding-left: 1rem; margin: 0.75rem 0; font-style: italic; }
.qual-excerpt-code { font-family: monospace; font-size: 0.75rem; background: var(--border-light); padding: 0.125rem 0.375rem; border-radius: 3px; }

/* Badges */
.badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 10px; font-size: 0.75rem; background: var(--border-light); }
.badge-new { background: var(--primary); color: #fff; font-weight: 600; }

/* Traffic lights — intentionally use specific colours for green/yellow/red */
.qual-traffic-light { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; border-radius: var(--radius-sm); margin: 1rem 0; }
.qual-traffic-green { background: var(--success-bg); border: 1px solid #66bb6a; }
.qual-traffic-yellow { background: var(--warning-bg); border: 1px solid #ffca28; }
.qual-traffic-red { background: var(--error-bg); border: 1px solid #ef5350; }
.qual-traffic-indicator { width: 16px; height: 16px; border-radius: 50%; }
.qual-traffic-green .qual-traffic-indicator { background: #66bb6a; }
.qual-traffic-yellow .qual-traffic-indicator { background: #ffca28; }
.qual-traffic-red .qual-traffic-indicator { background: #ef5350; }
.qual-traffic-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.25rem; }
.qual-traffic-dot.qual-traffic-green { background: #66bb6a; }
.qual-traffic-dot.qual-traffic-yellow { background: #ffca28; }
.qual-traffic-dot.qual-traffic-red { background: #ef5350; }

/* Verification check traffic badges */
.traffic-badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; }
.traffic-badge-green { background: var(--success-bg); color: var(--success); }
.traffic-badge-yellow { background: var(--warning-bg); color: var(--warning); }
.traffic-badge-red { background: var(--error-bg); color: var(--error); }
.traffic-badge-na { background: var(--border-light); color: var(--text-secondary); }

/* Profile */
.qual-profile-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; min-height: 500px; }
.qual-transcript-text { max-height: 60vh; overflow-y: auto; white-space: pre-wrap; font-size: 0.875rem; line-height: 1.6; padding: 1rem; background: var(--primary-surface); border-radius: var(--radius-sm); }
.qual-chat-msg { padding: 0.5rem; margin: 0.5rem 0; border-radius: var(--radius-sm); }
.qual-chat-user { background: var(--info-bg); }
.qual-chat-assistant { background: var(--border-light); }

/* Danger zone */
.qual-export-danger { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.btn-danger { background: var(--error); color: #fff; border: none; padding: 0.5rem 1rem; border-radius: var(--radius-sm); cursor: pointer; }

/* Decision log */
.qual-decision-log { width: 100%; border-collapse: collapse; }
.qual-decision-log th, .qual-decision-log td { padding: 0.5rem; border: 1px solid var(--border); text-align: left; font-size: 0.875rem; }

/* Quote accuracy gate */
.qual-accuracy-card { padding: 1rem 1.25rem; border-radius: var(--radius-sm); margin: 1.25rem 0; }
.qual-accuracy-card.qual-accuracy-green { background: var(--success-bg); border: 1px solid #66bb6a; }
.qual-accuracy-card.qual-accuracy-yellow { background: var(--warning-bg); border: 1px solid #ffca28; }
.qual-accuracy-card.qual-accuracy-red { background: var(--error-bg); border: 1px solid #ef5350; }
.qual-accuracy-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.qual-accuracy-indicator { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.qual-accuracy-indicator.green { background: #2d8659; }
.qual-accuracy-indicator.yellow { background: #b8860b; }
.qual-accuracy-indicator.red { background: #c0392b; }
.qual-accuracy-count { font-size: 0.875rem; color: var(--text-secondary); margin-left: auto; }
.qual-accuracy-breakdown { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.35rem; }
.qual-accuracy-details { margin-top: 0.75rem; }
.qual-accuracy-details summary { cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--text); }
.qual-accuracy-issues { list-style: none; padding: 0; margin-top: 0.5rem; }
.qual-accuracy-issues li { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.375rem 0; border-bottom: 1px solid var(--border-light); font-size: 0.8125rem; }
.qual-accuracy-issues li:last-child { border-bottom: none; }
.qual-accuracy-pid { font-family: monospace; font-size: 0.75rem; background: var(--border-light); padding: 0.125rem 0.375rem; border-radius: 3px; flex-shrink: 0; }
.qual-accuracy-text { color: var(--text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qual-accuracy-score { font-family: monospace; font-size: 0.75rem; color: var(--text-tertiary); flex-shrink: 0; }

/* Codebook */
.qual-codebook-list { list-style: none; padding: 0; }
.qual-codebook-list li { padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 0.5rem; }

/* Theme-participant matrix */
.qual-matrix-panel { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.qual-matrix-panel summary { font-size: 0.8rem; font-weight: 600; cursor: pointer; color: var(--text-secondary); padding: 0.25rem 0; }
.qual-matrix-panel summary:hover { color: var(--text); }
.qual-matrix-scroll { overflow-x: auto; margin-top: 0.5rem; }
.qual-matrix-table { font-size: 0.75rem; border-collapse: collapse; width: 100%; }
.qual-matrix-table th,
.qual-matrix-table td { padding: 0.2rem 0.4rem; text-align: center; border: 1px solid var(--border-light); white-space: nowrap; }
.qual-matrix-table thead th { background: var(--primary-surface); font-weight: 600; font-size: 0.7rem; }
.qual-matrix-table th[scope="row"] { text-align: left; font-weight: 500; background: var(--primary-surface); }
.qual-matrix-zero { color: var(--text-tertiary); }
.qual-matrix-total { font-weight: 600; background: var(--border-light); }
.qual-matrix-grand-total { background: var(--primary-light); }
.qual-matrix-gap { background: var(--warning-bg); }
.qual-matrix-gap-row th,
.qual-matrix-gap-row td { background: var(--warning-bg); }
.qual-matrix-gap-row .qual-matrix-total { background: var(--warning-bg); font-weight: 700; }

/* Responsive */
@media (max-width: 900px) {
    .qual-coding-layout { grid-template-columns: 1fr; }
    .qual-theme-sidebar { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 1rem; max-height: 200px; }
    .qual-profile-layout { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Transcription workflow                                              */
/* ------------------------------------------------------------------ */

.workflow-progress {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}

.progress-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.progress-message {
    font-size: 1.1rem;
    color: var(--text);
    font-weight: 500;
}

.progress-status .progress-bar {
    width: 100%;
    max-width: 400px;
    margin: 0;
}

.progress-count {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.workflow-progress-note {
    text-align: center;
    margin-bottom: 2rem;
}

.workflow-progress-note p {
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

/* Progress stage dots (stage preset) */
.progress-stages {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.progress-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.progress-stage-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: background 0.2s, border-color 0.2s;
}

.progress-stage--complete .progress-stage-dot {
    background: var(--lo-accent);
    color: #fff;
    border: 2px solid var(--lo-accent);
}

.progress-stage--active .progress-stage-dot {
    background: var(--primary-surface);
    border: 2px solid var(--primary);
}

.progress-stage--pending .progress-stage-dot {
    background: var(--surface);
    border: 2px solid var(--border);
}

.progress-stage-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-align: center;
    max-width: 80px;
}

.progress-stage--active .progress-stage-label {
    color: var(--primary);
    font-weight: 600;
}

.progress-stage--complete .progress-stage-label {
    color: var(--lo-accent);
}

.progress-stage-connector {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin-top: 16px; /* centre on dot */
    min-width: 24px;
}

.progress-stage-connector--reached {
    background: var(--lo-accent);
}

.spinner--sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* Friendly message (heading + detail) */
.progress-friendly-message {
    text-align: center;
    margin-bottom: 0.5rem;
}

.progress-heading {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.25rem;
}

.progress-detail {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Progress counter (batch preset) */
.progress-counter {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 1rem;
}

/* Elapsed time */
.progress-elapsed {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin: 0.75rem 0 0;
}

/* Safe-to-leave reassurance */
.progress-safe-to-leave {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.progress-safe-to-leave svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--lo-accent);
}

.progress-safe-to-leave p {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin: 0;
    text-align: left;
    max-width: 400px;
}

.transcribe-preview,
.transcribe-downloads,
.next-steps {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}

.next-steps-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    margin-top: 1rem;
}

.next-steps-form {
    margin: 0;
}

.next-steps-note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    max-width: 42rem;
}

.transcript-textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    resize: vertical;
    margin: 1rem 0;
}

.transcript-truncated {
    font-size: 0.85rem;
    font-style: italic;
}

.download-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
}

.radio-label input[type="radio"] {
    accent-color: var(--primary);
}

/* Pipeline step indicator */

.pipeline-steps {
    margin-bottom: 1.5rem;
}

.pipeline-steps ol {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pipeline-step {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

.pipeline-step::after {
    content: "\2192";
    margin: 0 0.75rem;
    color: var(--border);
}

.pipeline-step:last-child::after {
    display: none;
}

.pipeline-step--complete {
    color: var(--primary);
    font-weight: 600;
}

.pipeline-step--current {
    color: var(--text);
    font-weight: 600;
}

/* Card variant — prominent surfaced block used on workflow home pages for
   orientation. Evenly distributes steps and sits in a bordered container. */
.pipeline-steps--card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}
.pipeline-steps--card ol {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 0;
}
.pipeline-steps--card .pipeline-step {
    flex: 1 1 auto;
    justify-content: center;
    color: var(--text);
    font-weight: 600;
    font-size: 0.9rem;
}
.pipeline-steps--card .pipeline-step::after {
    margin: 0 0.5rem;
    color: var(--text-tertiary);
    font-size: 1.1rem;
}
@media (max-width: 600px) {
    .pipeline-steps--card ol { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .pipeline-steps--card .pipeline-step { justify-content: flex-start; }
    .pipeline-steps--card .pipeline-step::after { display: none; }
}

/* ------------------------------------------------------------------ */
/* Login page                                                          */
/* ------------------------------------------------------------------ */

/* Login — uses site-wide .btn, .alert, border/shadow tokens */
.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 2rem 1rem;
}

.login-container {
    max-width: 400px;
    width: 100%;
    padding: 2.5rem 2rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
}

.login-logo { margin-bottom: 1.5rem; }

.login-container h1 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.login-container > p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.75rem;
}

.login-form { text-align: left; }

.login-form .form-group { margin-bottom: 1.25rem; }

.login-form label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}

.login-form .form-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9rem;
    background: var(--surface);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-form .form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(173, 84, 21, 0.12);
}

.login-form .btn { width: 100%; margin-top: 0.5rem; }

.btn-ms365 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1.25rem;
    background: var(--primary);
    color: #fff !important;
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.btn-ms365:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(173, 84, 21, 0.22);
}

.btn-ms365:focus-visible {
    outline: 3px solid rgba(173, 84, 21, 0.28);
    outline-offset: 2px;
}

.ms365-mark {
    display: inline-grid;
    grid-template-columns: repeat(2, 0.45rem);
    grid-template-rows: repeat(2, 0.45rem);
    gap: 0.12rem;
    padding: 0.18rem;
    border-radius: 0.2rem;
    background: #fff;
}

.ms365-mark span:nth-child(1) { background: var(--primary); }
.ms365-mark span:nth-child(2) { background: var(--lo-accent); }
.ms365-mark span:nth-child(3) { background: #d8a469; }
.ms365-mark span:nth-child(4) { background: var(--text); }

.login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-tertiary);
    font-size: 0.8rem;
    margin: 0 0 1.25rem;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--border-light);
}

.password-wrapper { position: relative; }

.password-wrapper .form-input { padding-right: 2.75rem; }

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.password-toggle:hover { color: var(--primary); }

.password-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.password-toggle[aria-pressed="false"] .pw-icon-hide { display: none; }
.password-toggle[aria-pressed="true"] .pw-icon-show { display: none; }

.login-back { margin-top: 1.5rem; font-size: 0.85rem; }
.login-back a { color: var(--text-secondary); text-decoration: none; }
.login-back a:hover { color: var(--primary); }

.nav-link-auth {
    margin-left: auto;
    font-size: 0.85rem;
}

/* ------------------------------------------------------------------ */
/* Admin tool access                                                   */
/* ------------------------------------------------------------------ */

.admin-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.admin-header h1 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1.15;
}

.admin-panel {
    border-top: 1px solid var(--border);
    padding: 1.25rem 0;
}

.admin-panel h2 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.9rem;
}

.admin-panel-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-muted {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.admin-inline-form,
.admin-org-form {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.admin-inline-form label,
.admin-org-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.admin-org-form .form-group {
    flex: 1 1 12rem;
    min-width: 12rem;
}

.admin-org-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.admin-org-meta div {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--surface-alt, #faf8f4);
}

.admin-org-meta dt {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.admin-org-meta dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-code-value {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.82rem;
}

.admin-tool-controls {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) auto auto;
    gap: 0.75rem;
    align-items: end;
    margin: 0.75rem 0;
}

.admin-tool-search label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.admin-segmented,
.admin-bulk-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.admin-segment {
    min-height: 2.3rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.admin-segment:hover,
.admin-segment.is-active {
    border-color: var(--lo-accent);
    color: var(--lo-accent);
    background: rgba(26, 107, 99, 0.08);
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.admin-badge-public,
.admin-badge-added {
    background: rgba(26, 107, 99, 0.1);
    color: var(--lo-accent);
}

.admin-badge-removed {
    background: rgba(173, 84, 21, 0.1);
    color: var(--primary);
}

.admin-badge-neutral {
    background: rgba(54, 69, 79, 0.1);
    color: var(--text-secondary);
}

.admin-badge-muted {
    background: var(--surface-alt, #faf8f4);
    color: var(--text-tertiary);
}

.admin-tool-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.admin-tool-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-tool-table th,
.admin-tool-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
    vertical-align: top;
    font-size: 0.9rem;
}

.admin-tool-table th {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--surface-alt, #faf8f4);
}

.admin-tool-table tr:last-child td {
    border-bottom: 0;
}

.admin-tool-table input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
}

.admin-tool-name {
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.admin-tool-desc {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.admin-empty {
    margin: 0;
    padding: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

@media (max-width: 720px) {
    .admin-header { flex-direction: column; }
    .admin-inline-form,
    .admin-org-form { align-items: stretch; }
    .admin-inline-form .btn,
    .admin-org-form .btn { width: 100%; }
    .admin-org-meta,
    .admin-tool-controls { grid-template-columns: 1fr; }
    .admin-segmented,
    .admin-bulk-actions { width: 100%; }
    .admin-bulk-actions .btn { flex: 1 1 9rem; }
}

/* ------------------------------------------------------------------ */
/* Guide Assistant (handbook chat)                                     */
/* ------------------------------------------------------------------ */

.handbook-container {
    position: relative;
}

.handbook-entry {
    text-align: center;
    padding: var(--space-xl) 0;
    max-width: 800px;
    margin: 0 auto;
}

.handbook-entry .workflow-header {
    text-align: center;
}

/* Override: handbook heading is a UI question, not a branded workflow title —
   use default text colour instead of the component's orange (--primary). */
.handbook-entry .workflow-header h1 {
    color: var(--text);
}

.handbook-entry .workflow-header p {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.handbook-search-form {
    margin-bottom: var(--space-lg);
}

.handbook-input-row {
    display: flex;
    gap: var(--space-sm);
}

.handbook-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-light);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.95rem;
    background: var(--surface);
    transition: border-color 0.15s;
}

.handbook-input:focus {
    outline: 3px solid var(--primary);
    outline-offset: 1px;
    border-color: var(--primary);
}

.handbook-send {
    white-space: nowrap;
}

.handbook-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.handbook-pill {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-family: var(--font-body);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.handbook-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.handbook-pill:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 1px;
}

.handbook-trust {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.handbook-privacy {
    font-size: 0.8rem;
    margin-top: var(--space-xs);
    opacity: 0.8;
}

.handbook-error {
    max-width: 800px;
    margin: var(--space-md) auto;
    padding: 0 var(--space-md);
}

.handbook-chat {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
}

.handbook-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.handbook-msg {
    display: flex;
    flex-direction: column;
}

.handbook-msg--user {
    align-items: flex-end;
}

.handbook-msg--model {
    align-items: flex-start;
}

.handbook-msg-bubble {
    max-width: 85%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    line-height: 1.6;
    font-size: 0.95rem;
}

.handbook-msg--user .handbook-msg-bubble {
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.handbook-msg--model .handbook-msg-bubble {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-bottom-left-radius: 4px;
}

/* Neutralise headings inside chat bubbles — keep them visually inline
   so they don't break heading hierarchy or dominate the conversation. */
.handbook-prose h1,
.handbook-prose h2,
.handbook-prose h3,
.handbook-prose h4,
.handbook-prose h5,
.handbook-prose h6 {
    font-size: inherit;
    font-weight: 600;
    margin: 0.6rem 0 0.3rem;
}

.handbook-prose h1:first-child,
.handbook-prose h2:first-child,
.handbook-prose h3:first-child {
    margin-top: 0;
}

/* Prose formatting for rendered markdown in assistant responses */
.handbook-prose p {
    margin: 0 0 0.6rem;
}

.handbook-prose p:last-child,
.handbook-prose p:last-of-type {
    margin-bottom: 0;
}

.handbook-prose ul,
.handbook-prose ol {
    padding-left: 1.4rem;
    margin: 0.4rem 0 0.6rem;
}

.handbook-prose li {
    margin-bottom: 0.25rem;
}

.handbook-prose li:last-child {
    margin-bottom: 0;
}

.handbook-prose strong {
    font-weight: 600;
}

.handbook-prose a {
    color: var(--primary);
    text-decoration: underline;
}

.handbook-prose a:hover {
    color: var(--primary-hover);
}

/* Adjacent block spacing (e.g. paragraph followed by list) */
.handbook-prose p + ul,
.handbook-prose p + ol {
    margin-top: -0.2rem;
}

/* Remove bottom margin on the last prose element before citations */
.handbook-prose > *:last-of-type:not(.handbook-citations) {
    margin-bottom: 0;
}

.handbook-citations {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light);
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.handbook-citations-label {
    font-weight: 600;
    margin-right: 0.2rem;
}

.handbook-citations a {
    color: var(--primary);
    text-decoration: underline;
}

.handbook-citations a:hover {
    color: var(--primary-hover);
}

.handbook-feedback {
    display: flex;
    gap: var(--space-xs);
    margin-top: 0.25rem;
}

.handbook-feedback-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0.3rem;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.handbook-feedback-btn:hover {
    color: var(--primary);
    border-color: var(--border-light);
}

.handbook-feedback-btn[aria-pressed="true"] {
    color: var(--primary);
    border-color: var(--primary);
}

.handbook-feedback-btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 1px;
}

.handbook-input-bar {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    border-top: 1px solid var(--border-light);
    position: sticky;
    bottom: 0;
    background: var(--bg);
}

.handbook-new-chat {
    text-align: right;
    padding: var(--space-sm) 0 0;
}

.handbook-new-chat a {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.handbook-new-chat a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.handbook-loading {
    display: none;
    text-align: center;
    padding: var(--space-lg);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.htmx-request .handbook-loading,
.htmx-request.handbook-loading {
    display: block;
}

.handbook-limit {
    text-align: center;
    padding: var(--space-lg);
    border-top: 1px solid var(--border-light);
}

.handbook-limit p {
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

@media (max-width: 768px) {
    .handbook-input-row {
        flex-direction: column;
    }

    .handbook-msg-bubble {
        max-width: 92%;
    }
}

/* ------------------------------------------------------------------ */
/* Qualitative Analysis — 4-step flow                                  */
/* ------------------------------------------------------------------ */

.qual-data-summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.qual-summary-stats {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
}

.qual-summary-stats .stat {
    text-align: center;
}

.qual-summary-stats .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--primary);
}

.qual-summary-stats .stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.qual-questions-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.qual-questions-fieldset legend {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0 0.5rem;
}

.fieldset-hint {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.qual-question-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light);
}

.qual-question-item:last-child {
    border-bottom: none;
}

.qual-question-item input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.qual-question-item label {
    line-height: 1.5;
}

.qual-form-group {
    margin-bottom: 1.5rem;
}

.qual-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
}

.form-input:focus {
    outline: 3px solid var(--primary);
    outline-offset: 1px;
    border-color: var(--primary);
}

/* Additional options section on confirm page */
.qual-additional-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 1.5rem 0;
}

.qual-additional-toggle {
    padding: 1rem 1.5rem;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text);
}

.qual-additional-body {
    padding: 0 1.5rem 1.5rem;
}

.qual-context-fieldset {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.qual-context-fieldset legend {
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0 0.375rem;
}

.qual-question-item input[type="radio"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.form-input-inline {
    width: auto;
    flex: 1;
    min-width: 12rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
}

.form-input-inline:focus {
    outline: 3px solid var(--primary);
    outline-offset: 1px;
    border-color: var(--primary);
}

/* Custom evaluation questions */
.qual-custom-eq-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.qual-custom-eq-row .form-input {
    flex: 1;
}

.qual-custom-eq-list {
    list-style: none;
    padding: 0;
    margin-top: 0.75rem;
}

.qual-custom-eq-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--primary-surface);
    border-radius: var(--radius-sm);
    margin-bottom: 0.375rem;
}

.qual-custom-eq-item span {
    flex: 1;
}

.btn-remove {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--text-secondary);
    font-family: var(--font-body);
}

.btn-remove:hover {
    color: var(--error);
    border-color: var(--error);
}

.qual-key-findings {
    background: var(--primary-light);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.qual-findings-preview {
    margin-bottom: 2rem;
}

.qual-finding-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.qual-finding-card summary {
    padding: 1rem 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.qual-finding-card summary:hover {
    background: var(--primary-surface);
}

.qual-finding-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.qual-finding-body {
    padding: 0 1.5rem 1.5rem;
}

.qual-finding-section {
    padding: 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.qual-finding-section h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.qual-finding-positive {
    background: var(--success-bg);
    border-left: 3px solid var(--success);
}

.qual-finding-attention {
    background: var(--warning-bg);
    border-left: 3px solid var(--warning);
}

.qual-finding-discussion {
    background: var(--info-bg);
    border-left: 3px solid var(--primary);
}

.qual-download-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

.btn-danger-outline {
    color: var(--error);
    border: 1px solid var(--error);
    background: transparent;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-danger-outline:hover {
    background: var(--error-bg);
}

@media (max-width: 768px) {
    .qual-summary-stats {
        flex-direction: column;
        gap: 1rem;
    }
}


/* ------------------------------------------------------------------ */
/* Confirm modal — components/modal.html                                */
/* ------------------------------------------------------------------ */

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.confirm-modal[hidden] {
    display: none;
}
.confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 22, 0.55);
}
.confirm-modal-panel {
    position: relative;
    max-width: 32rem;
    width: 100%;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.confirm-modal-title {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}
.confirm-modal-body {
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-secondary);
}
.confirm-modal-body p { margin: 0 0 0.65rem; }
.confirm-modal-body p:last-child { margin-bottom: 0; }
.confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}