/* Logro Repricing Web UI
   Light theme, Plus Jakarta Sans, Logro navy/orange as accents */

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

/* Enable `auto` keyword interpolation so `height: 0 → auto` transitions animate
   smoothly (used by collapsible detail rows on the job page). Chrome 129+,
   Firefox 129+, Safari 17.4+. Older browsers gracefully fall back to instant. */
:root { interpolate-size: allow-keywords; }

:root {
    /* Palette -- clean light */
    --bg: #ffffff;
    --bg-alt: #f6f7f9;
    --bg-card: #ffffff;
    --bg-elevated: #f0f1f4;
    --text: #1a1d23;
    --text-secondary: #4b5060;
    --text-muted: #565a6a;
    --border: #dfe1e6;
    --border-light: #e8eaee;

    /* Brand -- Logro colors */
    --accent: #d45a33;
    --accent-hover: #bf4e29;
    --accent-light: #fdf2ee;
    --navy: #1b2438;
    --navy-light: #263352;

    /* Semantic */
    --success: #1a8a5c;
    --success-bg: #edf7f2;
    --error: #c93b3b;
    --error-bg: #fdf0f0;
    --warning: #a17216;
    --warning-bg: #fdf6e8;
    /* Caution -- distinct from --warning (used by pulsing self-healing states).
       completed_unverified is TERMINAL, not self-healing, so it gets its own
       deeper amber/orange tone -- a caution color, not an "awaiting input" one. */
    --caution: #b45309;
    --caution-bg: #fdf0dc;
    --caution-border: #f0c284;

    /* Shared */
    --radius: 10px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
    --shadow: 0 2px 8px rgba(0,0,0,.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,.1);
    --savings-green: #1a8a5c;
    --savings-yellow: #a17216;
    --savings-red: #c93b3b;

    /* Type scale -- 18px base (senior-friendly), scales from root font-size */
    --text-sm: 0.833rem;     /* ~15px at 18px base */
    --text-base: 1rem;       /* 18px */
    --text-md: 1.167rem;     /* ~21px */
    --text-lg: 1.389rem;     /* ~25px */
    --text-xl: 1.667rem;     /* ~30px */
    --text-2xl: 2.111rem;    /* ~38px */

    /* Spacing */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;

    /* Unified form-control heights -- inputs, selects, textareas all share these */
    --control-h: 48px;
    --control-h-sm: 40px;

    --focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--accent);
}

/* ─── Accessibility ────────────────────────────────── */

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

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(212,90,51,.2);
    border-color: var(--accent);
}

/* ─── Base ─────────────────────────────────────────── */

html { font-size: 18px; }

body {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: var(--text-base);
    color: var(--text);
    background: var(--bg-alt);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Layout ───────────────────────────────────────── */

header {
    background: var(--navy);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    /* overflow-x:hidden removed -- it forced overflow-y:auto which clipped
       child dropdowns, and also constrained the stacking context so the
       notification panel (even with position:fixed) appeared behind page
       overlays. The nav's max-width:1120px already prevents horizontal bleed. */
}

nav {
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--sp-4) var(--sp-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
}

.logo img {
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
}

.logo-text {
    font-weight: 700;
    font-size: var(--text-base);
    color: #fff;
    letter-spacing: 0.01em;
}

.logo-divider {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,.2);
}

.logo-product {
    font-weight: 600;
    font-size: var(--text-sm);
    color: rgba(255,255,255,.65);
    letter-spacing: 0.02em;
}

main {
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
    padding: var(--sp-10) var(--sp-6) var(--sp-12);
    flex: 1;
}

footer {
    border-top: 1px solid var(--border);
    background: var(--bg);
    text-align: center;
    padding: var(--sp-4) var(--sp-6);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ─── Typography ───────────────────────────────────── */

h1 {
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--navy);
    line-height: 1.3;
    margin-bottom: var(--sp-6);
}

h2 {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--navy);
}

h3 {
    font-size: var(--text-base);
    font-weight: 700;
    margin-top: var(--sp-8);
    margin-bottom: var(--sp-3);
    color: var(--text);
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--sp-8) 0;
}

p.meta {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* ─── Nav structure ────────────────────────────────── */

.nav-left {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.nav-grid-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.5);
    transition: color .15s, background .15s;
}

.nav-grid-btn:hover {
    color: #fff;
    background: rgba(255,255,255,.1);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-separator {
    color: rgba(255,255,255,.25);
    font-size: var(--text-lg);
    font-weight: 300;
    margin-left: var(--sp-2);
    margin-right: var(--sp-2);
}

.nav-tool {
    color: rgba(255,255,255,.7);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 700;
    transition: color .15s;
}

.nav-tool:hover { color: #fff; }

.nav-link {
    color: rgba(255,255,255,.7);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: color .15s;
}

.nav-link:hover { color: #fff; }

.nav-btn-ghost {
    display: inline-flex;
    align-items: center;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 6px;
    transition: background-color .15s, border-color .15s, color .15s;
}

.nav-btn-ghost:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.4);
}

/* ─── Back link ────────────────────────────────────── */

.back-link {
    display: inline-block;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--sp-5);
    transition: color .15s;
}

.back-link:hover { color: var(--text); }

/* ─── App intro ────────────────────────────────────── */

.app-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-6);
    margin-bottom: var(--sp-10);
    padding-bottom: var(--sp-8);
    border-bottom: 1px solid var(--border);
}

.app-intro-text h1 {
    margin-bottom: var(--sp-2);
}

.app-intro-text p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
    max-width: 640px;
}

.app-intro .btn {
    flex-shrink: 0;
    margin-top: var(--sp-1);
}

/* ─── Dashboard header ─────────────────────────────── */

.dashboard-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--sp-8);
}

.dashboard-header h1 { margin-bottom: 0; }

.job-count {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 600;
}

/* ─── Buttons ──────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 12px 22px;
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: inherit;
    color: var(--text-secondary);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: all .15s;
    line-height: 1.4;
    white-space: nowrap;
    min-height: 48px;
}

.btn:hover {
    color: var(--text);
    border-color: var(--text-muted);
    background: var(--bg-alt);
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 700;
}

.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

.btn-sm {
    padding: 9px 16px;
    font-size: var(--text-sm);
    min-height: 40px;
}

.btn-icon {
    padding: 0;
    width: 42px;
    height: 36px;
    min-height: 36px;
    font-size: var(--text-base);
    line-height: 1;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-icon:hover {
    color: var(--text);
    border-color: var(--text-muted);
    background: var(--bg-alt);
}

.btn-icon svg {
    display: block;
}

.btn-danger {
    color: var(--error);
    border-color: #e8c0c0;
}

.btn-danger:hover {
    background: var(--error);
    color: #fff;
    border-color: var(--error);
}

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 14px 36px;
    font-size: var(--text-md);
    font-weight: 700;
    font-family: inherit;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    transition: all .15s;
    box-shadow: 0 2px 6px rgba(212,90,51,.25);
    letter-spacing: 0.01em;
}

.btn-download:hover {
    background: var(--accent-hover);
    box-shadow: 0 4px 12px rgba(212,90,51,.3);
    transform: translateY(-1px);
}

.btn-download:active {
    transform: translateY(0);
}

.btn-upload {
    padding: 16px 36px;
    font-size: var(--text-base);
    font-weight: 700;
    min-height: 56px;
}

.btn-upload.is-processing {
    background: #e8a08a;
    color: #fff;
    pointer-events: none;
    border-color: #e8a08a;
}

.btn-upload .spinner-inline {
    display: none;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    margin-right: var(--sp-2);
}

.btn-upload.is-processing .spinner-inline { display: inline-block; }

/* Generic in-button spinner for non-upload buttons */
.btn .spinner-inline {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    margin-right: var(--sp-2);
    vertical-align: middle;
}

.btn.is-processing:not(.btn-upload) .spinner-inline { display: inline-block; }
.btn.is-processing:not(.btn-upload) { pointer-events: none; opacity: .8; }

/* ─── Cards ────────────────────────────────────────── */

.card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-6);
}

.card h3 {
    margin: 0 0 var(--sp-4);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.card h3:not(:first-child) {
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
}

.card .summary-grid { margin-top: 0; }
.card .stat { background: var(--bg-alt); }
.card .savings-bar-container { margin-top: var(--sp-4); margin-bottom: 0; background: var(--bg-alt); }
.card .error-box { margin-top: 0; }
.card .file-list { margin: 0; }
.card .download-row { margin: 0; padding: var(--sp-8) 0; }

/* ─── Checkbox column ──────────────────────────────── */

.th-check,
.td-check {
    width: 32px;
    text-align: center;
    padding-left: 14px;
    padding-right: 8px;
}

/* ─── Batch action bar ─────────────────────────────── */

.batch-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    margin-bottom: var(--sp-3);
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
}

.batch-bar .btn {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.2);
    font-size: var(--text-sm);
    min-width: 120px;
    padding: 8px 16px;
}

.batch-bar .btn:hover {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.35);
    color: #fff;
}

/* ─── Tables ───────────────────────────────────────── */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    background: var(--bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

thead th {
    text-align: center;
    padding: 14px 16px;
    border-bottom: 2px solid var(--border);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--navy);
    background: #dce1e8;
}

thead th:first-child { text-align: left; }

tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
    text-align: center;
}

tbody td:first-child { text-align: left; }

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg-alt); }
tbody tr[data-href] { cursor: pointer; }

tbody td a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
}

tbody td a:hover { text-decoration: underline; }

table.compact { font-size: var(--text-sm); box-shadow: none; background: transparent; border: none; }
table.compact td { padding: 6px 14px 6px 0; border: none; }

/* ─── Actions cell ─────────────────────────────────── */

.actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    justify-content: flex-end;
}

thead th.th-actions { text-align: right; }

/* ─── Status badges ────────────────────────────────── */

.status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.01em;
    line-height: 1.3;
    white-space: nowrap;
}

.status-processing { background: var(--bg-elevated); color: var(--text-secondary); }
.status-complete { background: var(--success-bg); color: var(--success); }
.status-completed { background: var(--success-bg); color: var(--success); }
.status-complete_with_errors { background: var(--warning-bg); color: var(--warning); }
.status-needs_support { background: var(--warning-bg); color: var(--warning); }
.status-needs-input { background: var(--warning-bg); color: var(--warning); font-weight: 600; }
/* completed_unverified -- terminal caution state, no pulse (not self-healing). */
.status-needs-review { background: var(--caution-bg); color: var(--caution); font-weight: 700; border: 1px solid var(--caution-border); }
.status-resolving {
    background: var(--warning-bg);
    color: var(--warning);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.status-resolving::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--warning);
    animation: resolving-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes resolving-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}
.status-error { background: var(--error-bg); color: var(--error); }
.status-submitted { background: var(--bg-elevated); color: var(--text-secondary); }
.status-resolved { background: var(--success-bg); color: var(--success); }
.status-needs_attention { background: var(--warning, #e6a817); color: white; }
.status-in_progress { background: var(--accent); color: white; }
.status-closed { background: var(--text-muted); color: white; }
.status-open { background: var(--secondary, #6c757d); color: white; }
.status-awaiting-answer { background: var(--warning-bg); color: var(--warning); font-weight: 600; }

/* ─── Inline meta-line status (no pill) ───────────────── */

.meta-status {
    font-weight: 700;
    white-space: nowrap;
    text-transform: capitalize;
}
.meta-status-awaiting-answer { color: var(--warning); }

/* status_css_class filter returns "status-{status}" or "status-resolving" */
.meta-status-status-complete { color: var(--success); }
.meta-status-status-error { color: var(--error); }
.meta-status-status-resolving { color: var(--warning); }
.meta-status-status-needs-review { color: var(--caution); font-weight: 700; }
.meta-status-status-needs-input { color: var(--warning); font-weight: 700; }

/* ─── Savings ──────────────────────────────────────── */

.savings-green { color: var(--savings-green); font-weight: 700; }
.savings-yellow { color: var(--savings-yellow); font-weight: 700; }
.savings-red { color: var(--savings-red); font-weight: 700; }
.savings-none { color: var(--text-muted); font-style: italic; }

/* ─── Summary grid ─────────────────────────────────── */

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
    align-items: stretch;
}

.stat {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: calc(var(--text-sm) * 1.4 * 2 + var(--text-base) * 1.2 + var(--sp-4) * 2 + var(--sp-3));
}

.stat .label {
    display: flex;
    align-items: flex-start;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    min-height: calc(var(--text-sm) * 1.4 * 2);
}

.stat .value {
    display: block;
    font-size: var(--text-base);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat.highlight { background: var(--success-bg); border-color: #b8dcc8; }
.stat.highlight .value { color: var(--success); }

/* completed_unverified: the highlighted savings figures must not read as a
   validated "green" result -- a screenshotted headline shouldn't be mistaken
   for a passed verification. */
.stat.highlight.is-unverified { background: var(--caution-bg); border-color: var(--caution-border); }
.stat.highlight.is-unverified .value { color: var(--caution); }
.unverified-caption {
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--caution);
    text-transform: none;
    letter-spacing: normal;
}

/* ─── Savings bar ──────────────────────────────────── */

.savings-bar-container {
    margin: var(--sp-5) 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-5);
}

.savings-bar-label {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
}

.savings-bar-track {
    height: 32px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.savings-bar-fill {
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width .6s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--sp-3);
    font-size: var(--text-sm);
    font-weight: 700;
    color: #fff;
    min-width: 56px;
}

.savings-bar-fill.green { background: var(--savings-green); }
.savings-bar-fill.yellow { background: var(--savings-yellow); }
.savings-bar-fill.red { background: var(--savings-red); }

.savings-bar-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 600;
}

/* ─── Download / integrity ─────────────────────────── */

.download-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: var(--sp-5) 0;
}

.download-row-diagnostic {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-2);
}

.link-diagnostic {
    font-size: var(--text-sm);
    color: var(--color-text-muted, #6b7280);
    text-decoration: underline;
}

.link-diagnostic:hover {
    color: var(--color-primary, #2563eb);
}

.hint {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted, #9ca3af);
    margin: var(--sp-1) 0 0;
    text-align: center;
    max-width: 480px;
}

.files-card { padding: 0; }

/* Animated collapse for <details>: keep body in layout, animate max-height */
.files-card > .files-card-body {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 280ms cubic-bezier(.2,.6,.2,1),
        opacity 200ms ease;
}
.files-card[open] > .files-card-body {
    max-height: 1200px;
    opacity: 1;
    transition:
        max-height 320ms cubic-bezier(.2,.6,.2,1),
        opacity 240ms ease 40ms;
}
.files-card-inner {
    padding: var(--sp-2) 0 var(--sp-4);
}
.files-card-inner .file-list,
.files-card-inner h3 {
    margin-left: var(--sp-6);
    margin-right: var(--sp-6);
}
.files-card-inner h3 { margin-top: var(--sp-5); }

.files-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-6);
    cursor: pointer;
    list-style: none;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text);
    border-radius: var(--radius);
    transition: background .15s;
}

.files-summary::-webkit-details-marker { display: none; }
.files-summary:hover { background: var(--bg-alt); }

.files-summary::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    margin-right: var(--sp-1);
    transition: transform .15s;
}

.files-card[open] .files-summary::after { transform: rotate(-135deg); margin-top: 4px; }

.files-count {
    margin-left: auto;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-muted);
}

.integrity-pass {
    text-align: center;
    color: var(--success);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-top: var(--sp-4);
    padding: var(--sp-3);
    background: var(--success-bg);
    border-radius: var(--radius-sm);
}

.integrity-fail {
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    background: var(--error-bg);
    border: 1px solid #e8c0c0;
    border-radius: var(--radius-sm);
    color: var(--error);
    font-size: var(--text-sm);
}

.integrity-fail ul { margin: var(--sp-2) 0 0 var(--sp-5); padding: 0; }
.integrity-fail li { margin-bottom: var(--sp-1); }

/* ─── Count chip ───────────────────────────────────── */

.count-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.5;
    min-width: 24px;
    text-align: center;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.count-chip.is-warning {
    background: var(--warning-bg);
    color: var(--warning);
}

.count-chip.is-error {
    background: var(--error-bg);
    color: var(--error);
}

.count-chip.is-success {
    background: var(--success-bg);
    color: var(--success);
}

.count-chip.is-muted {
    background: var(--bg-elevated);
    color: var(--text-muted);
    opacity: 0.6;
}

/* ─── Detail sections (inside Results Summary card) ── */

.detail-sections {
    border-top: 1px solid var(--border-light);
}

.detail-row {
    border-bottom: 1px solid var(--border-light);
}

.detail-row-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-1);
    cursor: pointer;
    list-style: none;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    transition: background .15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.detail-row-summary::-webkit-details-marker { display: none; }
.detail-row-summary:hover,
.detail-row[open] > .detail-row-summary { background: var(--bg-alt); }
.detail-row-summary:focus,
.detail-row-summary:focus-visible {
    outline: none;
    box-shadow: none;
}

.detail-row-summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    margin-right: var(--sp-1);
    flex-shrink: 0;
    transition: transform .15s;
}

.detail-row[open] .detail-row-summary::after {
    transform: rotate(-135deg);
    margin-top: 3px;
}

.detail-row-label {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
}

.detail-row-body {
    font-size: var(--text-sm);
    display: block;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        height 280ms cubic-bezier(.2,.6,.2,1),
        opacity 220ms ease;
}

.detail-row-body > .detail-row-body-inner {
    padding: var(--sp-2) var(--sp-3) var(--sp-4);
}

.detail-row[open] > .detail-row-body {
    height: auto;
    opacity: 1;
    transition:
        height 300ms cubic-bezier(.2,.6,.2,1),
        opacity 240ms ease 30ms;
}

.detail-row-body .file-list {
    margin: 0;
}

.detail-row-intro {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--sp-3);
}

/* ─── Integrity check list ─────────────────────────── */

.integrity-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.integrity-check-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}

.integrity-check-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 7px;
    background: var(--success);
}

.integrity-check-item.failed .integrity-check-icon {
    background: var(--error);
}

.integrity-check-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.integrity-check-item span {
    font-size: var(--text-sm);
    color: var(--text);
    line-height: 1.4;
}

.loaded-file-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.loaded-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--text-sm);
    line-height: 1.4;
}

.anomaly-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.anomaly-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--text-sm);
    line-height: 1.4;
}

.anomaly-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 7px;
    background: var(--text-muted);
}

.anomaly-dot-warn { background: var(--warning); }
.anomaly-dot-info { background: var(--text-muted); }
.anomaly-dot-error { background: var(--error); }

/* ─── Error file list (mirrors anomaly-list pattern) ─────────────────────── */

.error-file-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.error-file-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--text-sm);
    line-height: 1.4;
}

.error-file-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 7px;
    background: var(--error);
}

.error-file-item strong {
    font-weight: 600;
    color: var(--text);
}

/* ─── Integrity check failure message (inline under failed check) ─────────── */

.integrity-check-failure-message {
    font-size: var(--text-sm);
    color: var(--error);
    line-height: 1.4;
}

.integrity-issues {
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    background: var(--error-bg);
    border: 1px solid #e8c0c0;
    border-radius: var(--radius-sm);
    color: var(--error);
    font-size: var(--text-sm);
}

.integrity-issues strong {
    display: block;
    margin-bottom: var(--sp-2);
    font-weight: 700;
}

.integrity-issues ul {
    margin: 0 0 0 var(--sp-5);
    padding: 0;
}

.integrity-issues li {
    margin-bottom: var(--sp-1);
}

/* Empty / disabled rows */
.detail-row-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-1);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    cursor: default;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.detail-row-empty .detail-row-label {
    color: var(--text-muted);
}

/* All-passed integrity row gets a slightly warmer label */
.detail-row-pass .detail-row-label {
    color: var(--text);
}

/* ─── Job detail header ────────────────────────────── */

.job-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-6);
    margin-bottom: var(--sp-6);
}

.job-header h1 { margin-bottom: var(--sp-2); }

.job-actions {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
    padding-top: var(--sp-1);
}

/* ─── Needs support banner ─────────────────────────── */

.needs-support-banner {
    background: var(--warning-bg);
    border: 1px solid #dfc78a;
    border-radius: var(--radius);
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
    display: flex;
    align-items: center;
    gap: var(--sp-5);
}

.needs-support-banner .banner-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.needs-support-banner .banner-text { flex: 1; margin: 0; color: var(--text); font-size: var(--text-sm); }

/* ─── Needs input banner (password-protected files) ── */

.needs-input-banner {
    background: var(--warning-bg);
    border: 1px solid #dfc78a;
    border-radius: var(--radius);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-5);
}

.needs-input-banner .banner-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.needs-input-banner-body { flex: 1; }
.needs-input-banner .banner-text { flex: 1; margin: 0; color: var(--text); font-size: var(--text-sm); }

.needs-input-files { margin-bottom: var(--sp-6); }

/* ─── Needs review banner (completed_unverified -- terminal, not self-healing) ── */

.needs-review-banner {
    background: var(--caution-bg);
    border: 1px solid var(--caution-border);
    border-radius: var(--radius);
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-5);
}

.needs-review-banner .banner-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; color: var(--caution); }
.needs-review-banner-body { flex: 1; }
.needs-review-banner .banner-text { flex: 1; margin: 0; color: var(--text); font-size: var(--text-sm); }
.needs-review-banner .banner-text strong { color: var(--caution); }

/* ─── Q&A blocked / review banners (job <-> question link) ── */

.qa-blocked-banner {
    background: var(--warning-bg);
    border: 1px solid #dfc78a;
    border-radius: var(--radius);
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-5);
}
.qa-blocked-banner .banner-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.qa-blocked-body { flex: 1; }
.qa-blocked-banner .banner-text { flex: 1; margin: 0; color: var(--text); font-size: var(--text-sm); }
.qa-blocked-links { margin: var(--sp-2) 0 0; }
.qa-blocked-links a {
    color: var(--warning);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
}
.qa-blocked-links a:hover { text-decoration: underline; }

.qa-review-banner {
    background: var(--success-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
    display: flex;
    align-items: center;
    gap: var(--sp-5);
}
.qa-review-banner .banner-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; color: var(--success); }
.qa-review-banner .banner-text { flex: 1; margin: 0; color: var(--text); font-size: var(--text-sm); }

.unlock-file-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border-light);
}
.unlock-file-item:last-child { border-bottom: none; }
.unlock-file-item .loaded-file-name { flex: 1; }
.unlock-file-item .unlock-btn { flex-shrink: 0; }

.tag-warning {
    background: var(--warning-bg);
    color: var(--warning);
}

/* ─── Unlock modal ─────────────────────────────────── */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-box {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: var(--sp-8);
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.modal-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.modal-subtitle {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
    word-break: break-all;
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.modal-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.modal-input {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-family: inherit;
    color: var(--text);
    background: var(--bg);
    transition: border-color .15s, box-shadow .15s;
}

.modal-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212, 90, 51, 0.15);
}

.modal-error {
    font-size: var(--text-sm);
    color: var(--error);
    margin: 0;
    padding: var(--sp-2) var(--sp-3);
    background: var(--error-bg);
    border-radius: var(--radius-sm);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
}

.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

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

.btn-primary {
    background: var(--accent);
    color: #fff;
    border: 1px solid transparent;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── File counts ──────────────────────────────────── */

/* ─── Processing ───────────────────────────────────── */

.processing-time { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--sp-1); }

.spinner {
    display: inline-block;
    width: 20px; height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    margin-left: var(--sp-2);
    vertical-align: middle;
}

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

.processing-pulse { color: var(--text-secondary); }

/* ─── Processing banner ────────────────────────────── */

@keyframes processing-bg-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
}

.processing-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: var(--sp-4) var(--sp-5);
    margin-top: var(--sp-4);
    animation: processing-bg-pulse 2.4s ease-in-out infinite;
}

.processing-banner .processing-spinner {
    width: 28px;
    height: 28px;
    border-width: 3px;
    flex-shrink: 0;
    margin-left: 0;
}

.processing-banner-text {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.processing-banner-text strong {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}

.processing-banner-text span {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ─── Upload form ──────────────────────────────────── */

.upload-form {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-8);
    margin-top: var(--sp-6);
    box-shadow: var(--shadow);
}

.field { margin-bottom: var(--sp-8); }

.field label {
    display: block;
    font-weight: 700;
    font-size: var(--text-base);
    margin-bottom: var(--sp-2);
    color: var(--text);
}

/* ─── Unified form controls ─────────────────────────
   Single source of truth for text/email/password/number/search inputs,
   textareas, and selects across .field (upload/proposal forms),
   .form-field (admin/users forms), the bare .form-input class, and
   .auth-form (login/MFA/password-reset forms). Do not reintroduce
   per-context padding/font-size -- add new contexts to this selector
   union instead. */
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="search"],
.field select,
.field textarea,
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field input[type="search"],
.form-field select,
.form-field textarea,
.form-field .form-input,
.form-input,
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    min-height: var(--control-h);
    padding: 12px 16px;
    font-size: var(--text-base);
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    /* background-color (not the `background` shorthand) so this rule never
       clobbers background-image -- .form-field .form-input has higher
       specificity than .form-field select and would otherwise reset the
       chevron below back to none for <select class="form-input">. */
    background-color: var(--bg);
    color: var(--text);
    transition: border-color .15s;
}

/* Custom chevron so native <select> rendering is identical across OSes.
   Stroke color is the resolved hex of --text-muted (#565a6a) -- CSS
   custom properties don't reliably resolve inside external data-URI
   SVG backgrounds, so it's hardcoded here and must be kept in sync if
   --text-muted ever changes. */
.field select,
.form-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23565a6a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    padding-right: 40px;
}

/* Shared focus ring for every unified control (including .select-compact) */
.field input[type="text"]:focus,
.field input[type="email"]:focus,
.field input[type="password"]:focus,
.field input[type="number"]:focus,
.field input[type="search"]:focus,
.field select:focus,
.field textarea:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.form-field .form-input:focus,
.form-input:focus,
.auth-form input:focus,
.select-compact:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212,90,51,.15);
}

.field input[type="file"] { font-size: var(--text-sm); }

.field-error {
    color: var(--error);
    font-size: var(--text-sm);
    margin: var(--sp-1) 0 var(--sp-2);
}

.help { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--sp-2); }

/* ─── Upload notice (password-prompt mode) ─────────── */

.upload-notice {
    background: var(--warning-bg);
    border: 1px solid #e8d8a0;
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-5);
    margin-top: var(--sp-4);
    font-size: var(--text-sm);
    color: var(--warning);
}

.upload-notice p { margin: 0; }

/* ─── Password show/hide toggle ─────────────────────── */

.pw-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.pw-wrap input[type="password"],
.pw-wrap input[type="text"] {
    width: 100%;
    padding-right: 4rem;
}

.pw-toggle {
    position: absolute;
    right: var(--sp-3);
    background: none;
    border: none;
    padding: var(--sp-1) var(--sp-2);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1;
    user-select: none;
    white-space: nowrap;
}

.pw-toggle:hover { color: var(--text); }
.pw-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ─── Upload help callout ──────────────────────────── */

.upload-help-callout {
    background: var(--accent-light);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-5);
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
}

.upload-help-callout.is-dismissed { display: none; }

.upload-help-callout-body {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

.upload-help-callout-title {
    display: block;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--navy);
    margin-bottom: var(--sp-2);
}

.upload-help-callout ul {
    margin: var(--sp-2) 0 0 var(--sp-5);
    padding: 0;
}

.upload-help-callout ul li {
    margin-bottom: var(--sp-1);
}

.upload-help-callout-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 var(--sp-1);
    border-radius: var(--radius-sm);
    transition: color .15s;
}

.upload-help-callout-dismiss:hover { color: var(--accent); }

/* ─── Upload workflow note (below submit) ──────────── */

.upload-workflow-note {
    margin-top: var(--sp-5);
    background: var(--bg-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

.upload-workflow-note strong {
    color: var(--text);
}

/* ─── Help details / cheat-sheet ──────────────────── */

.help-summary {
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    user-select: none;
}

.help-summary::-webkit-details-marker { display: none; }

.help-summary::before {
    content: '\25B6';
    font-size: 0.6rem;
    transition: transform .15s;
    color: var(--accent);
}

details[open] .help-summary::before { transform: rotate(90deg); }

.help-summary:hover { color: var(--accent-hover); }

.help-details {
    margin-top: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

.help-details p { margin: 0 0 var(--sp-2); }
.help-details p:last-child { margin-bottom: 0; }

.help-details ul {
    margin: var(--sp-1) 0 var(--sp-2) var(--sp-5);
    padding: 0;
}

.help-details ul li { margin-bottom: var(--sp-1); }

.help-details code {
    font-family: ui-monospace, monospace;
    font-size: 0.8rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
}

.provider-format-note { margin-top: 0; }

/* ─── Inline status help text ─────────────────────── */

.status-help-text {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: var(--sp-2);
    line-height: 1.5;
}

.status-help-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-light);
    line-height: 1.5;
}

.status-help-legend span {
    white-space: nowrap;
}

.status-help-legend strong {
    color: var(--text-secondary);
    font-weight: 600;
}

.status-error-reasons {
    margin-top: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--bg-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

.status-error-reasons strong {
    display: block;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--sp-2);
}

.status-error-reasons ul {
    margin: 0 0 var(--sp-3) var(--sp-5);
    padding: 0;
}

.status-error-reasons li {
    margin-bottom: var(--sp-1);
}

.status-error-reasons .support-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.status-error-reasons .support-link:hover {
    text-decoration: underline;
}

/* ─── Alert banners ────────────────────────────────── */

.alert {
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--radius-sm);
    margin: var(--sp-4) 0;
    font-size: var(--text-sm);
}

.alert-error {
    background: var(--error-bg);
    border: 1px solid #e8c0c0;
    color: var(--error);
}

/* ─── Button row ───────────────────────────────────── */

.button-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
}

.btn-secondary {
    background: var(--bg);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

/* ─── Drop zone ────────────────────────────────────── */

.drop-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: var(--sp-8) var(--sp-6);
    text-align: center;
    transition: border-color .2s, background .2s;
    cursor: pointer;
    position: relative;
}

.drop-zone:hover, .drop-zone.dragover {
    border-color: var(--accent);
    background: var(--accent-light);
}

.drop-zone-text { color: var(--text-secondary); font-size: var(--text-base); }
.drop-zone-text strong { color: var(--text); }
.drop-zone-text small { font-size: var(--text-sm); }
.drop-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.selected-files { margin-top: var(--sp-3); text-align: left; }
.selected-files ul { list-style: none; padding: 0; }

.selected-files li {
    padding: var(--sp-1) 0;
    font-size: var(--text-sm);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.selected-files li::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--success);
    border-radius: 50%;
    flex-shrink: 0;
}

.size-info { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--sp-2); }

.size-warning {
    font-size: var(--text-sm);
    color: var(--warning);
    background: var(--warning-bg);
    border: 1px solid #dfc78a;
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    margin-top: var(--sp-2);
    font-weight: 600;
}

/* ─── Form actions ─────────────────────────────────── */

.form-actions {
    margin-top: var(--sp-4);
}

/* Generic text input matching textarea style -- sizing lives in the
   unified form-control rule above; this just sets display + placeholder. */
.form-input {
    display: block;
}

.form-input::placeholder {
    color: var(--text-muted);
}

/* Reusable field label */
.form-label {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text);
    margin-bottom: var(--sp-1);
}

/* Stacked form field (label + input) with consistent bottom spacing.
   Control sizing (padding/font/border/focus) lives in the unified
   form-control rule above -- do not reimpose it here. */
.form-field {
    margin-bottom: var(--sp-4);
}

/* ─── Platform confirmation modal ─────────────────── */

.platform-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9000;
    align-items: center;
    justify-content: center;
}

.platform-modal-backdrop.is-open {
    display: flex;
}

.platform-modal {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: var(--sp-6);
    max-width: 420px;
    width: calc(100% - var(--sp-8));
}

.platform-modal-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--navy);
    margin-bottom: var(--sp-3);
}

.platform-modal-message {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--sp-6);
}

.platform-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
}

/* ─── Textarea ─────────────────────────────────────── */

textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-family: inherit;
    resize: none;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    transition: border-color .15s;
}

textarea::placeholder {
    color: var(--text-muted);
    line-height: 1.6;
}

textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212,90,51,.15);
}

/* ─── Feedback (per-job) ───────────────────────────── */

.feedback-divider {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-12);
    margin-bottom: var(--sp-6);
}

.feedback-divider-label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.feedback-divider-rule {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.feedback-section .feedback-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.feedback-section .feedback-form textarea { width: 100%; }
.feedback-section .feedback-form .btn { align-self: flex-start; }

.feedback-history-label {
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
}

.feedback-history {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.feedback-item {
    padding: var(--sp-4) var(--sp-5);
    background: var(--bg-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.feedback-item .feedback-meta {
    margin: 0;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-light);
    font-size: var(--text-sm);
    color: var(--text-muted);
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    flex-wrap: wrap;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.feedback-item .feedback-status {
    font-weight: 700;
    white-space: nowrap;
}

.feedback-item .feedback-status-submitted { color: var(--text-secondary); }
.feedback-item .feedback-status-resolved { color: var(--success); }

.feedback-item .feedback-meta-sep { color: var(--border); }
.feedback-item .feedback-meta-date { font-variant-numeric: tabular-nums; }

.feedback-item .feedback-auto-badge {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 2px;
    border-radius: 4px;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.feedback-item .feedback-text {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text);
}

.resolution {
    color: var(--success);
    font-style: italic;
    font-size: var(--text-sm);
    margin: 0;
}

/* ─── Feedback resolution card & reply thread ─────── */

.fb-resolution-card {
    margin-top: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: rgba(34, 160, 98, 0.07);
    border-left: 3px solid var(--success);
    border-radius: var(--radius-sm);
}

.fb-resolution-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.fb-resolution-icon {
    color: var(--success);
    font-weight: 700;
    font-size: var(--text-sm);
}

.fb-resolution-label {
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--success);
}

.fb-resolution-date {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-left: auto;
    white-space: nowrap;
}

.fb-resolution-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--sp-2) 0;
}

.fb-download-btn {
    margin-top: var(--sp-1);
}

.fb-thread {
    margin-top: var(--sp-3);
}

/* Team messages: warm accent tint (matches admin styling convention) */
.thread-team {
    background: rgba(212, 90, 51, 0.05);
}

/* Client messages: neutral alt-bg (same as thread-user default) */
.thread-client {
    background: var(--bg-alt);
}

.thread-author-team {
    color: var(--accent);
}

.thread-author-client {
    color: var(--success);
}

.fb-reply-section {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-light);
}

.fb-reply-prompt {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--sp-2) 0;
}

.fb-reply-form textarea {
    width: 100%;
    box-sizing: border-box;
}

.fb-reply-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
    flex-wrap: wrap;
}

/* ─── Feedback (global page) ──────────────────────── */

.feedback-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-8);
}

.feedback-ticket {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-5);
}

.ticket-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.ticket-source { color: var(--text-secondary); font-size: var(--text-sm); }

.ticket-source-link {
    color: var(--accent);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 700;
}

.ticket-source-link:hover { text-decoration: underline; }

.ticket-date {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-left: auto;
    white-space: nowrap;
}

.ticket-body {
    font-size: var(--text-sm);
    line-height: 1.6;
    white-space: pre-line;
    color: var(--text);
}

.ticket-body + .resolution { margin-top: var(--sp-2); }

.feedback-category {
    display: flex;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.category-option {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 600;
}

.category-option input[type="radio"] { accent-color: var(--accent); }
.category-option:has(input:checked) span { color: var(--text); }

/* ─── Questions ──────────────────────────────── */

.section-heading {
    margin-top: var(--sp-10);
    margin-bottom: var(--sp-4);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.count-badge {
    background: var(--accent);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0;
    text-transform: none;
}

.count-badge.count-muted {
    background: var(--text-muted);
}

.count-badge.count-attention {
    background: var(--warning, #e6a817);
}

.form-hint {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--sp-4);
    line-height: 1.5;
}

.questions-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.question-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-5);
}

.question-open {
    border-left: 3px solid var(--accent);
}

.question-answered {
    border-left: 3px solid var(--success);
}

.question-needs_attention {
    border-left: 3px solid var(--warning, #e6a817);
}

.question-in_progress {
    border-left: 3px solid var(--accent);
}

.question-closed {
    border-left: 3px solid var(--text-muted);
    opacity: 0.7;
}

.question-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    row-gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.question-asker {
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text);
}

.question-text {
    font-size: var(--text-sm);
    line-height: 1.6;
    white-space: pre-line;
    color: var(--text);
    margin-bottom: var(--sp-3);
}

.answer-form textarea {
    font-size: var(--text-sm);
}

.answer-block {
    background: var(--bg-alt);
    border-radius: var(--radius-sm);
    padding: var(--sp-4);
    margin-top: var(--sp-2);
}

.answer-by {
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--success);
}

.answer-block .ticket-date {
    font-size: var(--text-xs, 0.75rem);
    margin-left: var(--sp-2);
}

.answer-text {
    font-size: var(--text-sm);
    line-height: 1.6;
    white-space: pre-line;
    color: var(--text);
    margin-top: var(--sp-2);
}

/* ─── Thread ─────────────────────────────────── */

.thread {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: var(--sp-3) 0;
    padding-left: var(--sp-4);
    border-left: 2px solid var(--border-light);
}

.thread-message {
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
    background: var(--bg-alt);
}

.thread-admin {
    background: rgba(212, 90, 51, 0.05);
}

.thread-msg-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
}

.thread-author {
    font-weight: 700;
    font-size: var(--text-sm);
}

.thread-author-admin {
    color: var(--accent);
}

.thread-author-user {
    color: var(--success);
}

.thread-msg-text {
    font-size: var(--text-sm);
    line-height: 1.6;
    white-space: pre-line;
    color: var(--text);
}

/* Markdown-rendered Q&A message bodies (question body + thread messages).
   white-space: normal so <p> tags don't create extra gaps;
   p margins give the breathing room that pre-line used to provide. */
.qa-msg-body {
    font-size: var(--text-sm);
    line-height: 1.6;
    white-space: normal;
    color: var(--text);
    margin-bottom: var(--sp-3);
}
.qa-msg-body p {
    margin: 0 0 var(--sp-2) 0;
}
.qa-msg-body p:last-child {
    margin-bottom: 0;
}
.qa-msg-body strong {
    font-weight: 600;
}
.qa-msg-body em {
    font-style: italic;
}
.qa-msg-body code {
    font-family: monospace;
    background: var(--bg-alt);
    padding: 0.1em 0.3em;
    border-radius: 2px;
    font-size: 0.9em;
}
.qa-msg-body ul,
.qa-msg-body ol {
    padding-left: var(--sp-4);
    margin: 0 0 var(--sp-2) 0;
}
.qa-msg-body a {
    color: var(--accent);
    text-decoration: underline;
}

.reply-form {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-light);
}

.reply-form textarea {
    font-size: var(--text-sm);
}

.status-controls {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-light);
}

.answer-form-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
}

.answer-form-actions .btn:last-child {
    margin-left: auto;
}

.file-input-hidden {
    display: none;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.file-upload-names {
    font-size: var(--text-xs, 0.75rem);
    color: var(--text-muted);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.answer-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.answer-attachments {
    margin-top: var(--sp-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.attachment-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--text-sm);
    color: var(--accent);
    text-decoration: none;
    padding: var(--sp-1) var(--sp-3);
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
}

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

.section-divider {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: var(--sp-10) 0;
}

.section-title {
    font-size: var(--text-lg, 1.125rem);
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--sp-5);
}

/* ─── Error / file lists ──────────────────────────── */

.error-box {
    background: var(--error-bg);
    border: 1px solid #e8c0c0;
    border-radius: var(--radius-sm);
    padding: var(--sp-4) var(--sp-5);
    margin: var(--sp-4) 0;
    color: var(--error);
    font-size: var(--text-sm);
}

.success-box {
    background: var(--success-bg);
    border: 1px solid #b3dfc9;
    border-radius: var(--radius-sm);
    padding: var(--sp-4) var(--sp-5);
    margin: var(--sp-4) 0;
    color: var(--success);
    font-size: var(--text-sm);
}

.error-list li { color: var(--error); margin-left: var(--sp-6); margin-bottom: var(--sp-1); }

.file-list { list-style: none; }
.file-list li {
    padding: var(--sp-2) 0;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.file-list li + li { border-top: 1px solid var(--border-light); }
.file-list.muted li { color: var(--text-muted); }

.tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-left: auto;
    vertical-align: middle;
    flex-shrink: 0;
    font-weight: 600;
}

.question-context {
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 0;
}

.tag-linked-job {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
}
.tag-linked-job:hover {
    background: var(--accent);
    color: white;
    text-decoration: none;
}

/* ─── Empty state ──────────────────────────────────── */

.empty-state {
    text-align: center;
    padding: var(--sp-12) var(--sp-6);
    color: var(--text-secondary);
    font-size: var(--text-md);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.empty-state a { color: var(--accent); font-weight: 700; }

/* ─── Info box ─────────────────────────────────────── */

.info-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-6);
    margin-top: var(--sp-8);
    box-shadow: var(--shadow-sm);
}

.info-box h3 {
    margin: 0 0 var(--sp-4);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* ─── Agent message ────────────────────────────────── */

.agent-message {
    background: var(--bg-alt);
    border-left: 3px solid var(--accent);
    padding: var(--sp-4) var(--sp-5);
    margin-top: var(--sp-4);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.agent-message h4 { margin-bottom: var(--sp-1); color: var(--text); font-size: var(--text-base); }

/* ─── Hub page ─────────────────────────────────────── */

.hub-header {
    margin-bottom: var(--sp-10);
}

.hub-subtitle {
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin-top: var(--sp-2);
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-5);
}

.tool-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-6);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}

a.tool-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.tool-card-upcoming {
    border-style: dashed;
}

.tool-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-alt);
    border-radius: var(--radius-sm);
    color: var(--accent);
}

.tool-card-upcoming .tool-icon {
    color: var(--text-muted);
}

.tool-info h2 {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--navy);
    margin-bottom: var(--sp-1);
}

.tool-card-upcoming .tool-info h2 {
    color: var(--text-muted);
}

.tool-info p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.tool-card-upcoming .tool-info p {
    color: var(--text-muted);
}

.tool-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    width: fit-content;
}

.tool-status-active {
    background: var(--success-bg);
    color: var(--success);
}

.tool-status-planned {
    background: var(--bg-elevated);
    color: var(--text-muted);
}

/* ─── Print ────────────────────────────────────────── */

@media print {
    header, footer, nav, .btn, .btn-download, .download-row,
    .back-link, form, .actions, .feedback-history, .agent-message, .btn-danger {
        display: none !important;
    }
    body { background: #fff; color: #222; font-size: 11pt; }
    main { max-width: 100%; padding: 0; margin: 0; }
    .summary-grid { grid-template-columns: repeat(3, 1fr); }
    .stat, .card, .savings-bar-container, .info-box, table { box-shadow: none; border: 1px solid #ddd; }
    .needs-support-banner { border: 2px solid #b8860b; }
    h1, h2 { color: #222; }
    a { color: #222 !important; text-decoration: none !important; }
}

/* ─── Responsive ───────────────────────────────────── */

@media (max-width: 640px) {
    main { padding: var(--sp-6) var(--sp-4) var(--sp-8); }
    nav { padding: var(--sp-3) var(--sp-4); }
    .summary-grid { grid-template-columns: repeat(2, 1fr); }
    table { font-size: var(--text-sm); }
    thead th, tbody td { padding: 12px 10px; }
    .upload-form { padding: var(--sp-5); }
    .dashboard-header { flex-direction: column; gap: var(--sp-2); }
    .drop-zone { padding: var(--sp-6) var(--sp-4); }
    .stat .value { font-size: var(--text-md); }
    .btn-download { padding: 12px 20px; font-size: var(--text-base); width: 100%; justify-content: center; }
    .job-header { flex-direction: column; gap: var(--sp-3); }
    .job-actions { justify-content: flex-start; }
    .logo-divider, .logo-product { display: none; }
    .cost-summary-grid { grid-template-columns: 1fr 1fr; }
    .admin-charts .card canvas { height: 200px !important; }
}

/* ─── Admin nav link ──────────────────────────────── */

.nav-link-admin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    color: rgba(255,255,255,.7);
    transition: opacity .15s;
    padding: 4px;
}

.nav-link-admin:hover { opacity: 0.8; }
.nav-link-admin svg { display: block; }

/* ─── Admin Dashboard ─────────────────────────────── */

.admin-header {
    margin-bottom: var(--sp-8);
}

.admin-header h1 {
    margin-bottom: var(--sp-2);
}

.admin-header-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
}

.admin-header-row h1 {
    margin-bottom: 0;
}

/* Inline status text (not badges) */
.text-success { color: var(--success); font-weight: 600; }
.text-warning { color: var(--warning); font-weight: 600; }
.text-error   { color: var(--error);   font-weight: 600; }

/* Compact inline role/action form in table cells */
.table-action-form {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}

/* Smaller sibling of the unified control system (inline table-row selects) --
   shares border/radius/chevron/focus with .field/.form-field selects, just
   at --control-h-sm instead of --control-h. */
.select-compact {
    min-height: var(--control-h-sm);
    font-size: var(--text-sm);
    padding: 9px 36px 9px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23565a6a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
}

.admin-card {
    text-decoration: none;
    display: block;
    padding: var(--sp-5);
    transition: border-color .15s, box-shadow .15s;
}

.admin-card h3 {
    margin-top: 0;
}

.admin-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.admin-section-heading {
    margin-top: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.cost-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
}

.cost-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-5) var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    box-shadow: var(--shadow-sm);
}

.cost-card-label {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.cost-card-value {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.cost-card-sub {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.admin-charts {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

.admin-charts .card canvas {
    max-height: 280px;
    margin-bottom: var(--sp-4);
}

.admin-cost-table {
    margin-top: var(--sp-4);
}

.admin-cost-table .total-row td {
    border-top: 2px solid var(--border);
    padding-top: var(--sp-3);
}

/* ─── Telemetry banner ────────────────────────────── */

.telemetry-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 8000;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-light);
    padding: var(--sp-2) var(--sp-6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    font-size: 0.8125rem; /* 13px */
    color: var(--text-muted);
    line-height: 1.4;
}

.telemetry-banner-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 0 var(--sp-1);
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.telemetry-banner-close:hover { opacity: 1; }

/* ─── Telemetry admin ─────────────────────────────── */

.telemetry-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
}

.telemetry-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    margin-top: var(--sp-4);
}

.telemetry-table th,
.telemetry-table td {
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border-light);
}

.telemetry-table th {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-alt);
}

.telemetry-table tbody tr:hover { background: var(--bg-alt); }

.telemetry-bar {
    display: inline-block;
    height: 10px;
    border-radius: 3px;
    background: var(--accent);
    min-width: 2px;
    vertical-align: middle;
}

.telemetry-count {
    font-weight: 600;
    color: var(--navy);
    min-width: 3rem;
    display: inline-block;
}

/* ─── Auth pages ─────────────────────────────────── */

.auth-wrap {
    display: flex;
    justify-content: center;
    padding: var(--sp-12) var(--sp-4);
}

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--sp-10) var(--sp-8);
    width: 100%;
    max-width: 420px;
}

.auth-card h1 {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--sp-2);
}

.auth-card .auth-intro {
    color: var(--text-secondary);
    margin-bottom: var(--sp-6);
    font-size: var(--text-sm);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.auth-form label {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

/* Control sizing (padding/font/border/focus) for .auth-form inputs lives
   in the unified form-control rule above -- do not reimpose it here. */

.auth-form .btn-primary {
    width: 100%;
    margin-top: var(--sp-2);
}

.auth-error {
    background: var(--error-bg);
    color: var(--error);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    border: 1px solid rgba(201,59,59,.2);
    margin-bottom: var(--sp-4);
}

.auth-info {
    background: var(--success-bg);
    color: var(--success);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    border: 1px solid rgba(26,138,92,.2);
    margin-bottom: var(--sp-4);
}

.auth-footer-links {
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-light);
    text-align: center;
    font-size: var(--text-sm);
}

.auth-footer-links a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.auth-footer-links a:hover { text-decoration: underline; }

.auth-mfa-code {
    font-size: var(--text-lg);
    letter-spacing: 0.3em;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
}

.auth-totp-secret {
    background: var(--bg-elevated);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, monospace;
    font-size: var(--text-sm);
    word-break: break-all;
    user-select: all;
}

.auth-qr {
    display: block;
    margin: var(--sp-4) auto;
    width: 200px;
    height: 200px;
    background: #fff;
    padding: var(--sp-2);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
}

/* ─── User menu dropdown ────────────────────────────── */

.user-menu {
    position: relative;
}

.user-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: transparent;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.85);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
    user-select: none;
}

.user-menu-btn:hover,
.user-menu-btn[aria-expanded="true"] {
    color: #fff;
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.4);
}

.user-menu-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.user-menu-label {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-chevron {
    flex-shrink: 0;
    transition: transform .15s;
}

.user-menu-btn[aria-expanded="true"] .user-menu-chevron {
    transform: rotate(180deg);
}

.user-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 100;
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-1) 0;
    outline: none;
}

.user-menu-panel[hidden] { display: none; }

.user-menu-identity {
    padding: var(--sp-3) var(--sp-4) var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--sp-1);
}

.user-menu-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}

.user-menu-email {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.4;
    word-break: break-all;
}

.user-menu-role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.02em;
    align-self: flex-start;
}

.user-menu-divider {
    display: none;
}

.user-menu-item {
    display: block;
    width: 100%;
    padding: var(--sp-2) var(--sp-4);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .12s, color .12s;
    white-space: nowrap;
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
    background: var(--bg-alt);
    color: var(--text);
    outline: none;
}

.user-menu-logout-form {
    margin: 0;
    padding: 0;
}

/* Mobile: keep panel within viewport */
@media (max-width: 640px) {
    .user-menu-panel {
        right: 0;
        left: auto;
        min-width: 190px;
    }

    .user-menu-label {
        max-width: 120px;
    }
}

/* ─── Notification bell ─────────────────────────────── */

.notif-bell {
    position: relative;
}

.notif-bell-wrap {
    position: relative;
}

.notif-bell-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.75);
    padding: 0.4rem 0.55rem;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1;
}

.notif-bell-btn:hover,
.notif-bell-btn[aria-expanded="true"] {
    color: #fff;
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.4);
}

.notif-bell-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.notif-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    background: var(--error);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    padding: 0 3px;
    pointer-events: none;
}

.notif-panel {
    /* Fixed (not absolute, and portaled to body via JS in base.html) so it
       escapes the sticky header's stacking context entirely. Positioned
       under the bell via positionNotifPanel() in base.html, which runs
       before every paint where this panel could be visible -- the top/right
       below are a no-JS fallback only and are intentionally >= the header's
       current rendered height (~72px) plus margin so they never overlap it.
       Keep in sync with header height (nav padding + content) if that grows. */
    position: fixed;
    top: 80px;
    right: 16px;
    z-index: 1001;
    width: 320px;
    max-width: calc(100vw - 16px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.notif-panel[hidden] { display: none; }

.notif-panel-header {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
}

.notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 380px;
    overflow-y: auto;
}

.notif-item {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.notif-item-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}

.notif-item-age {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.notif-item-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    align-self: flex-start;
    margin-top: 2px;
    transition: color .15s;
}

.notif-item-link:hover { color: var(--accent-hover); }

.notif-empty {
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.notif-panel-footer-link {
    display: block;
    padding: var(--sp-2) var(--sp-4);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    border-top: 1px solid var(--border-light);
    transition: color .15s, background .15s;
}

.notif-panel-footer-link:hover {
    color: var(--accent-hover);
    background: var(--bg-hover, rgba(0,0,0,.02));
}

/* ─── Stale banner ──────────────────────────────────── */

.notif-stale-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    background: var(--warning-bg);
    color: var(--warning);
    padding: var(--sp-2) var(--sp-5);
    font-size: var(--text-sm);
    font-weight: 500;
    border-bottom: 1px solid rgba(161,114,22,.2);
}

.notif-stale-banner[hidden] { display: none; }

.notif-stale-link {
    font-weight: 700;
    color: var(--warning);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
}

.notif-stale-dismiss {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--warning);
    font-size: 1rem;
    line-height: 1;
    padding: 0 var(--sp-1);
    opacity: 0.7;
    transition: opacity .15s;
    flex-shrink: 0;
}

.notif-stale-dismiss:hover { opacity: 1; }

/* Mobile: full-width panel below header */
@media (max-width: 600px) {
    .notif-panel {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
        max-height: 60vh;
        overflow-y: auto;
    }

    /* Compact nav on narrow screens to prevent horizontal overflow. */
    nav {
        padding-left: var(--sp-3);
        padding-right: var(--sp-3);
    }

    /* Hide the text "Feedback" nav link -- accessible via notification panel. */
    nav .nav-link {
        display: none;
    }

    /* Hide the nav separator (| between logo and tool name) to save space. */
    .nav-separator {
        display: none;
    }

    /* Truncate user name label to prevent overflow. */
    .user-menu-label {
        max-width: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ─── Nav count badge (Questions link) ──────────────── */

.nav-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--warning, #e6a817);
    color: white;
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    line-height: 1;
    margin-left: var(--sp-1);
    vertical-align: middle;
}

/* ─── Client Questions page ─────────────────────────── */

.questions-page {
    max-width: 780px;
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-4);
}

.questions-page-header {
    margin-bottom: var(--sp-8);
}

.questions-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--sp-2);
    color: var(--text-primary);
}

.questions-page-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.questions-section-note {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: var(--sp-4);
}

.questions-in-our-court .question-card {
    opacity: 0.8;
}

.question-card-passive {
    border-left-color: var(--border);
}

.question-passive-note {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: var(--sp-3);
    font-style: italic;
}

/* Closed questions section toggle */

.closed-questions-section {
    margin-top: var(--sp-8);
}

.closed-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.875rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    margin-bottom: var(--sp-4);
}

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

.closed-toggle-icon {
    flex-shrink: 0;
    transition: transform 0.2s;
}

.closed-toggle-icon-open {
    transform: rotate(180deg);
}

.questions-closed-list .question-card {
    opacity: 0.65;
}

/* Questions tile on apps grid -- distinct treatment as an inbox, not a tool */

.tool-card-questions {
    border-left: 4px solid var(--accent);
}


/* ─── Dedicated notifications page ──────────────────────────────────
   Gated behind LOGRO_NOTIF_PAGE -- these rules only ever apply to the
   .notifications-page container, which only renders when the flag is on,
   so this block cannot affect any flag-off page. */

.notifications-page {
    max-width: 780px;
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-4);
}

.notifications-page-header {
    margin-bottom: var(--sp-8);
}

.notifications-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--sp-2);
    color: var(--text-primary);
}

.notifications-page-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.notifications-section {
    margin-top: var(--sp-8);
}

.notifications-section:first-of-type {
    margin-top: 0;
}

.notif-page-empty {
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
}

.notifications-active-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.notif-page-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
}

.notif-page-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notif-page-item-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
}

.notif-page-item-age {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.notif-page-item-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .15s;
}

.notif-page-item-link:hover { color: var(--accent-hover); }

.notifications-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.notif-history-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-2);
    border-bottom: 1px solid var(--border-light);
}

.notif-history-item:last-child { border-bottom: none; }

.notif-history-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-muted, #f3f4f6);
    color: var(--text-muted);
    margin-top: 2px;
}

.notif-history-item-qa .notif-history-icon {
    color: var(--accent);
}

.notif-history-item-feedback .notif-history-icon {
    color: var(--warning, #e6a817);
}

.notif-history-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notif-history-title {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
}

.notif-history-title:hover { color: var(--accent); }

.notif-history-age {
    font-size: 0.75rem;
    color: var(--text-muted);
}


/* ─── Floating "Ask a question" button ─────────────────────────────── */

.ask-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--navy);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    border-radius: 100px; /* pill */
    box-shadow: var(--shadow-md);
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
    white-space: nowrap;
}

.ask-fab:hover,
.ask-fab:focus-visible {
    background: var(--navy-light);
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    transform: translateY(-1px);
    color: #fff;
    outline: none;
}

.ask-fab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.ask-fab-icon {
    flex-shrink: 0;
}

/* Mobile: shrink to icon-only pill at narrow viewports */
@media (max-width: 639px) {
    .ask-fab {
        bottom: 16px;
        right: 16px;
        padding: 12px;
        gap: 0;
    }

    .ask-fab-label {
        display: none;
    }
}

/* .ask-fab as button (strip default button chrome) */
button.ask-fab {
    border: none;
    cursor: pointer;
}


/* ─── Ask popover ───────────────────────────────────────────────────── */

/* Ensure [hidden] wins over the flex rule below */
.ask-popover[hidden] {
    display: none;
}

.ask-popover {
    position: fixed;
    bottom: 80px;
    right: 24px;
    width: 360px;
    max-width: calc(100vw - 48px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    padding: 20px;
    z-index: 51; /* above the FAB */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ask-popover-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
}

.ask-popover-close:hover {
    background: #f3f4f6;
    color: #111827;
}

.ask-popover-context {
    font-size: var(--text-sm, 13px);
    color: #6b7280;
    margin: 0;
    padding-right: 28px; /* clear the close button */
    word-break: break-all;
}

.ask-popover-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: var(--text-sm, 13px);
    resize: vertical;
    min-height: 96px;
    line-height: 1.5;
    transition: border-color 0.15s;
}

.ask-popover-textarea:focus {
    outline: none;
    border-color: var(--navy, #1b2438);
    box-shadow: 0 0 0 2px rgba(27,36,56,0.12);
}

.ask-popover-actions {
    display: flex;
    justify-content: flex-end;
}

.ask-popover-submit {
    padding: 8px 20px;
    background: var(--navy, #1b2438);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.ask-popover-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ask-popover-submit:not(:disabled):hover {
    background: var(--navy-light, #2d3d5a);
}

.ask-popover-success {
    font-size: var(--text-sm, 13px);
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 0;
}

.ask-popover-error {
    font-size: var(--text-sm, 13px);
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 0;
}

.ask-popover-footer {
    font-size: var(--text-sm, 13px);
    color: #6b7280;
    margin: 0;
    text-align: right;
}

.ask-popover-footer a {
    color: var(--navy, #1b2438);
    text-decoration: none;
}

.ask-popover-footer a:hover {
    text-decoration: underline;
}

/* Mobile: full-width pinned to bottom */
@media (max-width: 639px) {
    .ask-popover {
        bottom: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
    }
}

/* ─── Hub onboarding UX ─────────────────────────────── */

/* Intro banner */
.hub-intro-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    background: var(--accent-light);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-6);
}

.hub-intro-banner-body {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

.hub-intro-banner-headline {
    display: block;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--navy);
    margin-bottom: var(--sp-1);
}

.hub-intro-banner-body p {
    margin: 0;
}

.hub-intro-banner-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 var(--sp-1);
    border-radius: var(--radius-sm);
    transition: color .15s;
}

.hub-intro-banner-dismiss:hover {
    color: var(--accent);
}

/* Tool card restructured as div with click-via-JS */
div.tool-card {
    position: relative;
    cursor: pointer;
}

div.tool-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

div.tool-card:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* (?) help button -- click to reveal, no hover-only info */
.tool-help-btn {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
    font-size: 0.833rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, border-color .15s, background .15s;
    z-index: 1;
    min-width: 28px;
}

.tool-help-btn:hover,
.tool-help-btn[aria-expanded="true"] {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-light);
}

/* Click-reveal help panel (replaces hover-only tooltip) */
.tool-help-panel {
    display: none;
    position: absolute;
    top: calc(var(--sp-3) + 34px);
    right: var(--sp-3);
    width: 240px;
    background: var(--navy);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1.5;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    white-space: normal;
    z-index: 100;
    text-align: left;
}

.tool-help-panel.is-open {
    display: block;
}

/* How it works details block */
.tool-how-details {
    margin-top: var(--sp-3);
    border-top: 1px solid var(--border-light);
    padding-top: var(--sp-3);
}

.tool-how-details summary {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
    transition: color .15s;
}

.tool-how-details summary::-webkit-details-marker {
    display: none;
}

.tool-how-details summary::before {
    content: '\25B6';
    font-size: 0.6rem;
    transition: transform .15s;
    display: inline-block;
}

.tool-how-details[open] summary::before {
    transform: rotate(90deg);
}

.tool-how-details summary:hover {
    color: var(--accent);
}

.tool-how-list {
    margin: var(--sp-2) 0 0 var(--sp-4);
    padding: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

.tool-how-list li {
    margin-bottom: var(--sp-1);
}

.tool-how-list li:last-child {
    margin-bottom: 0;
}

/* ─── Upload steps (numbered flow) ─────────────────── */

.upload-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-6) 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    counter-reset: upload-step;
}

.upload-step {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border-light);
}

.upload-step:last-child {
    border-bottom: none;
}

.upload-step-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: var(--text-base);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.upload-step-body {
    flex: 1;
}

.upload-step-label {
    display: block;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--navy);
    margin-bottom: var(--sp-1);
}

.upload-step-hint {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Active/current step highlight */
.upload-step-active .upload-step-num {
    background: var(--accent);
}

/* Form control that lives directly inside a step body */
.upload-step-field {
    margin-top: var(--sp-4);
    margin-bottom: 0;
}

/* Give steps more breathing room now that each holds an input */
.upload-form .upload-steps {
    margin: 0;
}

.upload-form .upload-step {
    padding: var(--sp-5) 0;
}

.upload-form .upload-step:first-child {
    padding-top: 0;
}

.upload-form .upload-step:last-child {
    padding-bottom: 0;
}

/* ─── Hub tour button ───────────────────────────────── */

.hub-tour-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-6);
    background: var(--accent);
    border: 2px solid var(--accent);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: var(--text-md);
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s;
    min-height: 52px;
    white-space: nowrap;
    box-shadow: var(--shadow);
}

.hub-tour-btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.hub-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-10);
}

.hub-header-text { flex: 1; }

/* ─── Guided tour overlay ───────────────────────────── */

.tour-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
}

.tour-backdrop.is-active {
    pointer-events: auto;
}

.tour-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 9001;
    transition: background 0.3s ease;
    pointer-events: none;
}

.tour-overlay.is-dimmed {
    background: rgba(0, 0, 0, 0.55);
    pointer-events: auto;
}

.tour-highlight-box {
    position: fixed;
    border-radius: var(--radius);
    box-shadow:
        0 0 0 4px var(--accent),
        0 0 0 9999px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    z-index: 9002;
    transition: all 0.3s ease;
    opacity: 0;
}

.tour-highlight-box.is-visible {
    opacity: 1;
}

.tour-tooltip {
    position: fixed;
    z-index: 9003;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: var(--sp-6) var(--sp-6) var(--sp-5);
    max-width: 380px;
    min-width: 300px;
    pointer-events: auto;
    transition: all 0.3s ease;
}

.tour-tooltip-step {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--sp-2);
}

.tour-tooltip-title {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--navy);
    margin-bottom: var(--sp-3);
    line-height: 1.3;
}

.tour-tooltip-body {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--sp-5);
}

.tour-tooltip-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.tour-btn-next {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 12px 24px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
    min-height: 48px;
}

.tour-btn-next:hover { background: var(--accent-hover); }

.tour-btn-back {
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    background: var(--bg-alt);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
    min-height: 48px;
}

.tour-btn-back:hover { background: var(--bg-elevated); }
.tour-btn-back:disabled { opacity: 0.4; cursor: default; }

.tour-btn-skip {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    transition: color .15s;
}

.tour-btn-skip:hover { color: var(--text); }

.tour-progress-dots {
    display: flex;
    gap: var(--sp-1);
    align-items: center;
}

.tour-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    transition: background .2s;
}

.tour-dot.is-active { background: var(--accent); }

/* Welcome / closing step centered card */
.tour-tooltip.tour-centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 640px) {
    .tour-tooltip {
        max-width: calc(100vw - 32px);
        min-width: auto;
    }
}

/* ─── Unified job-status colors (platform-wide) ─────────────────────────
   The repricing tool uses status values complete/error/needs_input; the
   other tools (benchmark/directory/geo/disruption/proposal) use
   completed/failed/queued/running/pending_phase1. Map those to the same
   semantic meta-line colors so a finished job reads green and a failed job
   reads red everywhere, matching the repricing gold standard. */
.meta-status-status-completed { color: var(--success); }
.meta-status-status-failed { color: var(--error); }
.meta-status-status-queued,
.meta-status-status-running,
.meta-status-status-processing,
.meta-status-status-pending_phase1 { color: var(--text-secondary); }

/* Stat-grid value colors: raise specificity above `.stat .value` so semantic
   savings colors actually render inside a summary grid (pass=green, fail=red,
   caution=amber) — used by directory QA, geo anomalies, disruption. */
.stat .value.savings-green { color: var(--savings-green); }
.stat .value.savings-yellow { color: var(--savings-yellow); }
.stat .value.savings-red { color: var(--savings-red); }

/* ─── Sortable tables ───────────────────────────────────────────── */
th.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-sortable:hover { color: var(--accent); }
th.th-sortable::after { content: '\2195'; opacity: 0.3; margin-left: 0.35em; font-size: 0.85em; font-weight: 400; }
th.th-sortable[aria-sort="ascending"]::after { content: '\2191'; opacity: 1; color: var(--accent); }
th.th-sortable[aria-sort="descending"]::after { content: '\2193'; opacity: 1; color: var(--accent); }
th.th-sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ─── Sidebar Navigation ─────────────────────────────
   Everything below is scoped under body.has-sidebar so flag-OFF pages
   (LOGRO_SIDEBAR_NAV unset/false) are completely unaffected -- no existing
   rule above this point is modified. */

:root {
    --sidebar-width: 240px;
    --sidebar-width-collapsed: 64px;
}

/* NOTE: body keeps its base flex column layout (display:flex; min-height:100vh
   with main{flex:1}) so the sticky footer still pins to the viewport bottom on
   short pages. The sidebar rail is position:fixed, so it's out of flow and does
   not participate in the body flex layout; the margin-left shifts on
   main/footer below handle the horizontal offset. */

/* Slim top bar replacing the old full header when the sidebar is active. */
body.has-sidebar .topbar-slim {
    background: var(--navy);
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    margin-left: var(--sidebar-width);
    transition: margin-left .18s ease;
}

html.sidebar-collapsed body.has-sidebar .topbar-slim {
    margin-left: var(--sidebar-width-collapsed);
}

body.has-sidebar .topbar-slim nav {
    max-width: none;
    padding: var(--sp-3) var(--sp-6);
}

body.has-sidebar .sidebar-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.85);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}

body.has-sidebar .sidebar-hamburger:hover {
    color: #fff;
    background: rgba(255,255,255,.1);
}

body.has-sidebar .nav-tool-label {
    color: rgba(255,255,255,.85);
    font-size: var(--text-sm);
    font-weight: 700;
    margin-left: var(--sp-2);
}

/* Shift page content to make room for the fixed sidebar rail. `main` sets an
   explicit `width: 100%` in the base rules above (for the flag-OFF centered
   layout) -- combined with a fixed margin-left that's a SPECIFIED (not auto)
   width, the browser doesn't shrink the box to compensate, so the two
   together overflow the viewport by exactly the sidebar's width. `footer`
   has no explicit width in the base rules (default auto), so margin-left
   alone is safe there and needs no width override. This only bites between
   the mobile breakpoint (640px, where margin-left resets to 0 below) and
   roughly max-width + sidebar-width (~1360px, where 1120px's own cap already
   leaves enough room) -- i.e. tablet-ish widths -- which is exactly the gap
   that surfaced it. */
body.has-sidebar main,
body.has-sidebar footer {
    margin-left: var(--sidebar-width);
    transition: margin-left .18s ease;
}

body.has-sidebar main {
    width: calc(100% - var(--sidebar-width));
}

html.sidebar-collapsed body.has-sidebar main,
html.sidebar-collapsed body.has-sidebar footer {
    margin-left: var(--sidebar-width-collapsed);
}

html.sidebar-collapsed body.has-sidebar main {
    width: calc(100% - var(--sidebar-width-collapsed));
}

/* Sidebar rail itself. */
body.has-sidebar .app-sidebar {
    /* Width is intentionally fit-content (not 100%/inset:0) -- this wrapper
       must NOT intercept pointer events across the whole viewport when the
       rail is transformed off-screen (mobile, closed drawer). Only the
       .sidebar-backdrop child (itself position:fixed + inset:0, shown only
       while .is-open) is allowed to cover the full viewport. */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: fit-content;
    height: 100vh;
    pointer-events: none;
}

body.has-sidebar .sidebar-rail,
body.has-sidebar .sidebar-backdrop {
    pointer-events: auto;
}

body.has-sidebar .sidebar-rail {
    position: relative;
    z-index: 1001;
    width: var(--sidebar-width);
    height: 100%;
    background: var(--navy);
    display: flex;
    flex-direction: column;
    transition: width .18s ease;
    overflow-x: hidden;
}

html.sidebar-collapsed body.has-sidebar .sidebar-rail {
    width: var(--sidebar-width-collapsed);
}

body.has-sidebar .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 999;
}

body.has-sidebar .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4);
    gap: var(--sp-2);
}

body.has-sidebar .sidebar-logo {
    display: flex;
    align-items: center;
    min-width: 0;
}

body.has-sidebar .sidebar-logo img {
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);
}

body.has-sidebar .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.6);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color .15s, background .15s, transform .18s;
}

body.has-sidebar .sidebar-toggle:hover {
    color: #fff;
    background: rgba(255,255,255,.1);
}

html.sidebar-collapsed body.has-sidebar .sidebar-toggle svg {
    transform: rotate(180deg);
}

/* Collapsed rail (64px): the wide wordmark overflows and would push the
   collapse/expand chevron out of the overflow-x:hidden rail, leaving a
   collapsed user with no visible way to expand. Hide the wordmark and center
   the toggle so the (now right-pointing) chevron is the top affordance. */
html.sidebar-collapsed body.has-sidebar .sidebar-logo {
    display: none;
}

html.sidebar-collapsed body.has-sidebar .sidebar-header {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

body.has-sidebar .sidebar-tools {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-2);
    min-width: 0;
    /* This <nav> also matches the global bare `nav { margin: 0 auto;
       max-width: 1120px; align-items: center; ... }` rule further up this
       file (written for the old centered topbar nav). That rule's
       properties aren't overridden here just by being more specific unless
       explicitly re-declared, and margin:auto on the cross axis of a column
       flex item disables align-items:stretch entirely (per the flexbox
       spec) -- so without this reset, the nav shrink-to-fits around its
       longest link's content instead of filling the 240px rail, and gets
       centered inside it besides. That's what let the min-width:auto trap
       on .sidebar-link below go unnoticed: the active/hover row highlight
       was itself shrink-wrapped and inset from both edges rather than
       spanning the full rail width. */
    margin: 0;
    max-width: none;
    align-items: stretch;
    justify-content: flex-start;
}

body.has-sidebar .sidebar-tools-secondary {
    padding-bottom: var(--sp-2);
}

body.has-sidebar .sidebar-divider {
    height: 1px;
    margin: var(--sp-2) var(--sp-4);
    background: rgba(255,255,255,.12);
}

body.has-sidebar .sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.7);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    border-left: 3px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
    /* A flex item's default min-width is auto (content-based), not 0 -- so
       without this, an unusually long tool name won't respect the rail's
       240px width at all; the whole row grows to fit the text and gets
       silently hard-clipped by .sidebar-rail's overflow-x:hidden instead of
       ever reaching the label's ellipsis below. min-width:0 here (and on
       .sidebar-link-label) lets the row actually shrink to the rail's width
       so truncation can kick in. */
    min-width: 0;
}

body.has-sidebar .sidebar-link:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
}

body.has-sidebar .sidebar-link.is-active,
body.has-sidebar .sidebar-link[aria-current="page"] {
    color: #fff;
    background: var(--navy-light);
    border-left-color: var(--accent);
}

body.has-sidebar .sidebar-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.has-sidebar .sidebar-link-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Collapsed: icons only, centered, labels hidden via CSS (kept in DOM for a11y). */
html.sidebar-collapsed body.has-sidebar .sidebar-link {
    justify-content: center;
    padding: var(--sp-2);
}

html.sidebar-collapsed body.has-sidebar .sidebar-link-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Collapsed-rail tooltip: a single shared floating element, shown/positioned
   by JS in base.html on hover/focus of a .sidebar-link (see
   '#sidebar-tooltip' there). It can't be a CSS ::after on the link itself --
   .sidebar-rail has overflow-x:hidden (needed to clip the wordmark during
   the collapse-width transition above), and overflow clips ALL descendants
   regardless of position, so a pseudo-element tooltip positioned outside the
   64px rail would just get cut off. Living outside .sidebar-rail (as a
   position:fixed sibling inside #app-sidebar, which has no overflow rule)
   sidesteps that entirely. Desktop only in practice -- the JS only shows it
   when collapsed AND above the mobile breakpoint, since on mobile the drawer
   always shows full labels (see the mobile media query below). */
.sidebar-tooltip {
    position: fixed;
    z-index: 1005;
    background: var(--navy);
    color: #fff;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    pointer-events: none;
}

body.has-sidebar .sidebar-user {
    margin-top: auto;
    padding: var(--sp-3);
    border-top: 1px solid rgba(255,255,255,.12);
}

body.has-sidebar .sidebar-user-summary {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-2);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    cursor: pointer;
    text-align: left;
    transition: background .15s;
}

body.has-sidebar .sidebar-user-summary:hover {
    background: rgba(255,255,255,.08);
}

body.has-sidebar .sidebar-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
}

body.has-sidebar .sidebar-user-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}

body.has-sidebar .sidebar-user-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.has-sidebar .sidebar-user-email {
    font-size: 0.75rem;
    color: rgba(255,255,255,.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.has-sidebar .sidebar-user-actions {
    display: none;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--sp-2);
}

body.has-sidebar .sidebar-user-open .sidebar-user-actions {
    display: flex;
}

body.has-sidebar .sidebar-link-logout {
    width: 100%;
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

/* Collapsed: show just an avatar/initial; hide name/email/actions. */
html.sidebar-collapsed body.has-sidebar .sidebar-user-summary {
    justify-content: center;
    padding: var(--sp-2) 0;
}

html.sidebar-collapsed body.has-sidebar .sidebar-user-info {
    display: none;
}

html.sidebar-collapsed body.has-sidebar .sidebar-user-actions {
    display: none;
}

/* Desktop: backdrop and off-canvas transform are mobile-only; keep the rail
   permanently visible and non-transformed above 640px. */
@media (min-width: 641px) {
    body.has-sidebar .sidebar-backdrop {
        display: none;
    }
}

/* Mobile: sidebar becomes an off-canvas drawer. */
@media (max-width: 640px) {
    body.has-sidebar .sidebar-hamburger {
        display: inline-flex;
    }

    body.has-sidebar .topbar-slim,
    body.has-sidebar main,
    body.has-sidebar footer {
        margin-left: 0;
    }

    /* Mobile drawer is off-canvas (transformed out of view, see below), so
       main shouldn't reserve any width for it -- undo the calc() width
       override above or content would sit 240px narrower than the viewport
       for no reason. */
    body.has-sidebar main {
        width: 100%;
    }

    body.has-sidebar .sidebar-rail {
        width: 260px;
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    html.sidebar-collapsed body.has-sidebar .sidebar-rail {
        width: 260px;
    }

    body.has-sidebar .app-sidebar.is-open .sidebar-rail {
        transform: translateX(0);
    }

    body.has-sidebar .sidebar-backdrop {
        display: none;
    }

    body.has-sidebar .app-sidebar.is-open .sidebar-backdrop {
        display: block;
    }

    html.sidebar-collapsed body.has-sidebar .sidebar-link-label {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: nowrap;
    }

    html.sidebar-collapsed body.has-sidebar .sidebar-link {
        justify-content: flex-start;
        padding: var(--sp-2) var(--sp-3);
    }

    html.sidebar-collapsed body.has-sidebar .sidebar-user-info {
        display: flex;
    }

    html.sidebar-collapsed body.has-sidebar .sidebar-user-open .sidebar-user-actions {
        display: flex;
    }

    /* The desktop rail-collapse concept (icons-only, ~64px) doesn't exist on
       mobile -- the drawer is always full-width and open/closed via the
       hamburger + backdrop + Escape below, not "collapsed". A collapsed
       state persisted in localStorage from a prior desktop session (or the
       chevron below, were it visible) would otherwise strand the drawer with
       its logo hidden and no corresponding visual change, since the desktop
       collapse rules for the logo aren't scoped away from mobile. Force the
       logo back on and hide the now-meaningless collapse toggle so there's
       no dead control offering a broken state. */
    html.sidebar-collapsed body.has-sidebar .sidebar-logo {
        display: flex;
    }

    body.has-sidebar .sidebar-toggle {
        display: none;
    }

    body.has-sidebar .sidebar-header {
        justify-content: flex-start;
    }
}

/* =========================================================
   Workspace — client conversation surface (Story 2)
   ========================================================= */

/* Status pills */
.ws-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ws-status-received    { background: #e5e7eb; color: #374151; }
.ws-status-in-progress { background: #dbeafe; color: #1e40af; }
.ws-status-awaiting-you { background: #fef3c7; color: #92400e; }
.ws-status-responded   { background: #d1fae5; color: #065f46; }
.ws-status-resolved    { background: #f3f4f6; color: #6b7280; }

/* Thread cards (list page) */
.ws-thread-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  gap: 12px;
  transition: border-color 0.15s, background 0.15s;
}
.ws-thread-card:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}
.ws-thread-card-bar {
  width: 4px;
  border-radius: 2px;
  flex-shrink: 0;
  align-self: stretch;
}
.ws-thread-card-bar.received    { background: #9ca3af; }
.ws-thread-card-bar.in-progress { background: #3b82f6; }
.ws-thread-card-bar.awaiting-you { background: #f59e0b; }
.ws-thread-card-bar.responded   { background: #10b981; }
.ws-thread-card-bar.resolved    { background: #d1d5db; }

/* Message bubbles (thread detail) */
.ws-message {
  margin-bottom: 20px;
}
.ws-message-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.ws-message-time {
  color: #9ca3af;
  font-size: 0.8rem;
}
.ws-message-client .ws-message-body {
  background: #f0f9ff;
  border-radius: 0 8px 8px 8px;
  padding: 12px 16px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.ws-message-team .ws-message-body {
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 8px 0 8px 8px;
  padding: 12px 16px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.ws-message-attachments {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ws-attachment-link {
  font-size: 0.85rem;
  color: #2563eb;
  text-decoration: none;
  padding: 4px 10px;
  background: #eff6ff;
  border-radius: 4px;
  border: 1px solid #bfdbfe;
  transition: background 0.12s;
}
.ws-attachment-link:hover {
  background: #dbeafe;
}

/* Timeline events (status transitions) */
.ws-timeline-event {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: #6b7280;
  font-size: 0.85rem;
}
.ws-timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  flex-shrink: 0;
}
.ws-timeline-label { flex: 1; }
.ws-timeline-time  { color: #9ca3af; white-space: nowrap; }

/* Awaiting-you amber banner */
.ws-awaiting-banner {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  color: #92400e;
  font-weight: 500;
  font-size: 0.95rem;
}

/* Session-expired banner (composer draft preservation) */
.ws-session-banner {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
  color: #991b1b;
  font-weight: 500;
  font-size: 0.9rem;
}
.ws-session-banner a { color: #991b1b; text-decoration: underline; font-weight: 600; }

/* "Draft restored" hint (composer draft preservation) */
.ws-draft-hint {
  font-size: 0.8rem;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 10px;
}

/* "New" chip — team has replied since the client last viewed the thread */
.ws-new-chip {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 10px;
  padding: 1px 8px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Status progress bar */
.ws-progress-bar {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
.ws-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  min-width: 60px;
}
.ws-progress-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  z-index: 1;
  border: 2px solid #e5e7eb;
  background: #f9fafb;
  color: #9ca3af;
}
.ws-progress-step-current .ws-progress-dot {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.ws-progress-step-done .ws-progress-dot {
  background: #d1fae5;
  border-color: #10b981;
  color: #065f46;
}
.ws-progress-check { font-size: 0.85rem; }
.ws-progress-label {
  font-size: 0.65rem;
  color: #9ca3af;
  text-align: center;
  margin-top: 4px;
  max-width: 80px;
  line-height: 1.3;
}
.ws-progress-step-current .ws-progress-label {
  color: #1d4ed8;
  font-weight: 600;
}
.ws-progress-step-done .ws-progress-label {
  color: #059669;
}
.ws-progress-connector {
  position: absolute;
  top: 14px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: #e5e7eb;
  z-index: 0;
}
.ws-progress-connector-done {
  background: #10b981;
}

/* =========================================================
   Workspace V2 -- three-panel thread-native shell (WS-A)
   Flag: LOGRO_WORKSPACE_V2. New surface; reuses the .ws-* rules
   above by class name (status pills, message bubbles, timeline,
   attachment links) but introduces its own .ws2-* namespace for
   panel chrome so nothing above is touched or overridden.
   ========================================================= */

.ws2-shell-wrap {
  width: 100%;
}

.ws2-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 320px;
  gap: var(--sp-5);
  align-items: start;
}

.ws2-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ws2-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--navy);
}

.ws2-panel-body {
  padding: var(--sp-3);
  overflow-y: auto;
  max-height: 70vh;
}

.ws2-empty-note {
  color: var(--text-muted);
  font-size: var(--text-sm);
  padding: var(--sp-4) var(--sp-2);
  text-align: center;
}

/* --- Left panel: thread list --- */

.ws2-thread-items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ws2-thread-item {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background .12s;
}

.ws2-thread-item:hover {
  background: var(--bg-alt);
}

.ws2-thread-item-active {
  background: var(--bg-alt);
  box-shadow: inset 2px 0 0 var(--accent);
}

.ws2-thread-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ws2-thread-item-title {
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws2-thread-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* --- WS-E: Q&A/feedback flagged-thread additions --- */

.ws2-thread-list-filter {
  padding: 0 0 var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}

.ws2-filter-link {
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.ws2-filter-link:hover {
  text-decoration: underline;
}

.ws2-flag-badge {
  margin-right: 4px;
}

.ws2-legacy-qa-chip {
  display: inline-block;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt, #eef1f5);
  color: var(--text-muted);
}

.ws2-flagged-banner {
  background: var(--warning-bg, #fff8e6);
  border: 1px solid var(--warning, #d9a441);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  font-weight: 600;
  font-size: var(--text-sm);
}

.ws2-legacy-qa-banner {
  background: var(--surface-alt, #eef1f5);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.ws2-feedback-tag {
  display: inline-block;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  padding: 1px 6px;
  margin-left: var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--surface-alt, #eef1f5);
  color: var(--text-muted);
}

/* --- Middle panel: conversation --- */

.ws2-conversation-panel {
  /* Header + scrollable body + reply bar stack vertically inside the panel. */
  max-height: calc(70vh + 96px);
}

.ws2-conversation-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws2-conversation-body {
  flex: 1;
}

.ws2-inline-error {
  background: var(--error-bg);
  border: 1px solid var(--error);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  color: var(--error);
  font-size: var(--text-sm);
}

.ws2-reply-bar {
  border-top: 1px solid var(--border);
  padding: var(--sp-3);
}

.ws2-reply-bar form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ws2-reply-textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: inherit;
  resize: vertical;
}

.ws2-reply-submit {
  align-self: flex-end;
}

/* --- Right panel: canvas --- */

.ws2-canvas-slot {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.ws2-canvas-slot:last-child {
  margin-bottom: 0;
}

.ws2-canvas-slot-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--sp-2);
}

.ws2-canvas-placeholder {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.ws2-canvas-job-status,
.ws2-canvas-downloads-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ws2-canvas-job-name {
  font-weight: 600;
  font-size: var(--text-sm);
}

.ws2-canvas-job-state {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.ws2-canvas-job-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.ws2-canvas-job-spinner {
  display: inline-block;
  margin-right: var(--sp-1);
  vertical-align: middle;
}

.ws2-canvas-job-message {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

.ws2-canvas-job-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

.ws2-canvas-download-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ws2-canvas-download-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

.ws2-canvas-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color .15s, background .15s, transform .18s;
}

.ws2-canvas-toggle:hover {
  color: var(--text);
  background: var(--bg-alt);
}

/* Collapsed canvas: shrink the right column to a slim rail with just the
   toggle button, hide its body and title text. Mirrors the sidebar-nav
   collapse pattern (html.sidebar-collapsed) but scoped to this shell only. */
body.ws2-canvas-collapsed .ws2-shell {
  grid-template-columns: 220px minmax(0, 1fr) 44px;
}

body.ws2-canvas-collapsed .ws2-canvas-panel .ws2-panel-body,
body.ws2-canvas-collapsed .ws2-canvas-panel-title-text {
  display: none;
}

body.ws2-canvas-collapsed .ws2-canvas-toggle svg {
  transform: rotate(180deg);
}

body.ws2-canvas-collapsed .ws2-canvas-panel .ws2-panel-header {
  justify-content: center;
}

/* Responsive: stack panels on narrow screens instead of squeezing 3 columns.
   Canvas panel becomes a collapsed-by-default section the client can expand;
   thread list gets a fixed short height so the conversation stays reachable
   without excessive scrolling. */
@media (max-width: 900px) {
  .ws2-shell,
  body.ws2-canvas-collapsed .ws2-shell {
    grid-template-columns: 1fr;
  }

  .ws2-thread-list-panel .ws2-panel-body {
    max-height: 220px;
  }

  .ws2-conversation-panel {
    max-height: none;
  }

  .ws2-conversation-body {
    max-height: 50vh;
  }

  .ws2-canvas-panel .ws2-panel-body {
    max-height: 50vh;
  }

  body.ws2-canvas-collapsed .ws2-canvas-panel .ws2-panel-body,
  body.ws2-canvas-collapsed .ws2-canvas-panel-title-text {
    display: none;
  }
}

/* =========================================================
   Workspace V2 -- tool-tag chips + deterministic pushback (WS-B)
   Flag: LOGRO_WORKSPACE_V2. Composer chip row (new-thread page) and the
   conversation-panel tool badge + pushback banner share this block.
   ========================================================= */

.ws2-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.ws2-chip {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}

.ws2-chip:hover {
  background: var(--bg-alt);
}

.ws2-chip-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Reuses the drop-zone visuals originally inline in workspace_new.html,
   promoted here so the v2 reply composer (_workspace_v2_conversation.html)
   can share them without duplicating a <style> block per template. */
.ws-drop-zone,
.ws2-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--text-sm);
  transition: border-color .15s, background .15s;
}

.ws-drop-zone.ws-drag-over,
.ws2-dropzone.ws-drag-over {
  border-color: var(--accent);
  background: var(--bg-alt);
}

.ws-file-list {
  margin-top: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ws-file-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px var(--sp-2);
  font-size: 0.85rem;
}

.ws-file-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-file-item-size {
  color: var(--text-muted);
  white-space: nowrap;
}

.ws-file-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1rem;
  padding: 0 2px;
  line-height: 1;
}

.ws-file-remove:hover {
  color: var(--error);
}

.ws2-tool-badge {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px var(--sp-2);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

.ws2-pushback-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  color: var(--warning);
  font-size: var(--text-sm);
}

.ws2-pushback-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.ws2-pushback-btn {
  font-size: 0.8rem;
  padding: 6px var(--sp-3);
  white-space: nowrap;
}

.ws2-pushback-btn-secondary {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}