/* WIZYBIT Recruiting — shared tokens */

:root {
    /* ── Functional grays / status colors ─────────────── */
    --fg:     #0f172a;            /* slate-900 — matches landing --ink */
    --bg:     #f8fafc;            /* slate-50 — neutral surface */
    --muted:  #475569;            /* slate-600 */
    --muted-soft: #64748b;        /* slate-500 — chip / metadata text */
    --border: #e2e8f0;            /* slate-200 */
    --card:   #ffffff;
    --accent: #00a47a;            /* kept for source-verified, success states */
    --warn:   #d97706;
    --crit:   #dc2626;
    --info:   #2563eb;

    /* ── Brand palette — teal sibling of the WIZYBIT family ─────
       Variable names kept (purple/teal) to avoid touching 20+
       stylesheets and templates; values flipped to the Recruiter's
       teal so the whole app chrome matches the landing page. */
    --brand-purple:        #0e7490;  /* teal-700 — primary brand ink */
    --brand-purple-strong: #164e63;  /* teal-900 — darker variant */
    --brand-blue:          #0891b2;  /* teal-600 */
    --brand-teal:          #06b6d4;  /* teal-500 — the accent */
    --brand-mint:          #0d9488;
    --brand-amber:         #ffb84d;
    --brand-coral:         #ff7a59;
    --brand-deep:          #164e63;  /* teal-900 — dark surfaces */
    --brand-soft:          #ecfeff;  /* cyan-50 — tinted bg */
    --brand-soft-2:        #cffafe;  /* cyan-100 — pills / chip bg */

    /* ── Layout tokens ────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(14, 116, 144, 0.08);
    --shadow-lg: 0 10px 30px rgba(14, 116, 144, 0.14);
}

* { box-sizing: border-box; }

body {
    /* Match landing.html exactly — same font stack across every page */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--fg);
    background: var(--bg);
    margin: 0;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Header shell matches the landing .site-header exactly:
   - full-bleed white strip with a 1px bottom border
   - inner rows constrained to the same 1200px .wrap as the landing page
     so the brand sits in the same spot and ADVANCED hits the same gutter. */
header {
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
}
.header-row-top {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem 1.75rem;
    flex-wrap: wrap;
}
.header-row-candidate {
    max-width: 1200px;
    margin: 0.55rem auto 0;
    padding: 0.55rem 1.5rem 0;
}

/* ── Brand stack (far left): WIZYBIT + Recruiting + LIVE indicator ── */
.brand-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

/* ── Step nav (left, right after brand) ───────────────────────────── */
.nav-primary {
    display: flex;
    gap: 0.4rem 1.2rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Account block (far right via margin-left:auto) ───────────────── */
.header-account {
    margin-left: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

/* ── Tier dropdown menu ──────────────────────────────────────────── */
.tier-menu { position: relative; }
.tier-menu > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.tier-menu > summary::-webkit-details-marker { display: none; }
.tier-menu > summary::marker { content: ""; }
.tier-menu-trigger {
    /* Inherits .plan-badge sizing from the shared rule above — no override.
       Keeps the ADVANCED pill identical on landing and on in-app pages. */
}
.tier-gear  { font-size: 0.95rem; line-height: 1; }
.tier-caret { font-size: 0.65rem; opacity: 0.85; }

.tier-menu[open] > summary { box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.18); border-radius: 999px; }

.tier-menu-panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 50;
    min-width: 16rem;
    max-width: 22rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    animation: tier-menu-in 0.12s ease-out;
}
@keyframes tier-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tier-menu-heading {
    padding: 0.35rem 0.7rem 0.2rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
}
.tier-menu-email {
    padding: 0.5rem 0.7rem 0.25rem;
    font-size: 0.82rem;
    color: var(--muted);
    word-break: break-all;
    line-height: 1.3;
}
.tier-menu-item {
    display: block;
    padding: 0.5rem 0.7rem;
    color: var(--brand-deep);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.92rem;
    text-align: left;
    background: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.3;
    transition: background-color 0.1s, color 0.1s;
}
.tier-menu-item:hover {
    background: var(--brand-soft-2);
    color: var(--brand-purple);
    box-shadow: none;
}
.tier-menu-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.4);
}
.tier-menu-sep {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0.3rem 0.2rem;
}
.tier-menu-form { display: contents; }   /* let the button fill the panel */
.tier-menu-signout {
    color: var(--crit) !important;
    font-weight: 600;
}
.tier-menu-signout:hover {
    background: #fef2f2;
    color: var(--crit) !important;
}
.brand {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    gap: 0.1rem;
}
/* Horizontal variant used in the app header so logo + WIZYBIT + Recruiting
   + AI pill all baseline on one row with the step-nav beside them. */
.brand-inline {
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
}
/* Match landing .brand-mark exactly — tight tracking, same weight + size */
.brand-mark {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--fg);
    line-height: 1;
}
.brand-sub {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--muted);
    letter-spacing: 0;
}
.brand-sub-inline {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--muted);
    letter-spacing: 0;
    line-height: 1;
}

/* "AI Powered" pill — sits next to WIZYBIT on every page (app + landing
   + auth) so visitors immediately see this is an AI agent, not a human
   recruiter service. */
.brand-mark-row, .landing-mark-row {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    line-height: 1;
}
.brand-logo {
    flex: none;
    width: 28px;
    height: 28px;
    display: block;
}
.brand-ai-pill {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--brand-purple), var(--brand-teal));
    color: #ffffff !important;       /* override gradient-clip transparent on parents */
    -webkit-text-fill-color: #ffffff;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(108, 92, 231, 0.25);
    cursor: help;
}
.header-row-candidate {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.92rem;
}
.header-candidate-name { color: var(--fg); font-weight: 700; font-size: 1.05rem; }
.header-candidate-headline { color: var(--muted); font-style: italic; }
.header-candidate-meta { color: var(--muted); font-size: 0.88rem; }
.header-candidate-meta a { color: inherit; }
.header-user { font-size: 0.85rem; color: var(--muted); }
.header-logout-form { display: inline; margin: 0; padding: 0; }
.header-logout {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.82rem;
    padding: 0.2rem 0.65rem;
    border-radius: 3px;
    cursor: pointer;
}
.header-logout:hover { color: var(--fg); border-color: var(--fg); }

/* ── Plan badges — match landing exactly (pale pill, dark teal text) ── */
.plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid var(--brand-soft-2);
    background: #fff;
    color: var(--brand-purple);        /* dark teal — same as landing's --brand-strong */
    line-height: 1.2;
    cursor: pointer;
}
.plan-badge.plan-free {
    background: #fff;
    color: var(--muted);
    border-color: var(--border);
}
.plan-badge.plan-free:hover { color: var(--brand-purple); border-color: var(--brand-purple); }
.plan-badge.plan-pro {
    background: linear-gradient(180deg, var(--brand-soft) 0%, #fff 100%);
    color: var(--brand-purple);
    border-color: var(--brand-soft-2);
}
.plan-badge.plan-recruiter {
    background: linear-gradient(180deg, #e0f2fe 0%, #fff 100%);
    color: #0369a1;
    border-color: #bae6fd;
}
.plan-badge.plan-enterprise {
    background: linear-gradient(180deg, var(--brand-soft-2) 0%, #fff 100%);
    color: var(--brand-deep);
    border-color: var(--brand-soft-2);
}

/* "🔒 Pro" tag inline next to gated features */
.pro-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-purple), var(--brand-teal));
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* ── Upgrade page tier cards ────────────────────────────────────── */
.plan-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    margin: 1rem 0;
}
.plan-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem 1.4rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: box-shadow 0.18s, transform 0.18s;
}
.plan-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.plan-card-free       { border-top: 4px solid var(--muted); }
.plan-card-pro        { border-top: 4px solid var(--brand-purple); }
.plan-card-recruiter  { border-top: 4px solid #0ea5e9; }
.plan-card-enterprise { border-top: 4px solid var(--brand-deep); }
.plan-card.is-current {
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.18), var(--shadow-md);
    border-color: var(--brand-purple);
}
.plan-card-head {
    display: flex; justify-content: space-between; align-items: center;
}
.plan-card-title { margin: 0; font-size: 1.4rem; color: var(--brand-deep); }
.plan-card-tagline { margin: 0; color: var(--muted); font-size: 0.92rem; }
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex; flex-direction: column; gap: 0.4rem;
    font-size: 0.92rem;
}
.plan-feature {
    padding-left: 1.25rem;
    position: relative;
    color: var(--brand-deep);
}
.plan-feature::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--brand-purple);
    font-weight: 800;
}
.plan-feature.plan-feature-locked {
    color: var(--muted);
    opacity: 0.7;
}
.plan-feature.plan-feature-locked::before { content: ""; }
.plan-card-cta { margin-top: 0.6rem; }
.plan-card-cta button { width: 100%; }

.plan-name.plan-free       { color: var(--muted); }
.plan-name.plan-pro        { color: var(--brand-purple); }
.plan-name.plan-recruiter  { color: #0369a1; }
.plan-name.plan-enterprise { color: var(--brand-deep); }
.contact-line { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0.6rem; font-size: 0.9rem; }
.contact-line a { color: inherit; }
header nav { display: flex; gap: 1.25rem; }
header nav a { color: var(--muted); text-decoration: none; }
header nav a:hover { color: var(--fg); }

main {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
}

h2 {
    margin: 1.75rem 0 1rem;
    font-size: 1.1rem;
    color: var(--brand-purple);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
h3 {
    margin: 1.25rem 0 0.6rem;
    font-size: 1rem;
    color: var(--brand-deep);
    font-weight: 700;
}

.empty { color: var(--muted); font-style: italic; }

/* counts */
.counts { display: flex; gap: 1rem; margin: 1rem 0 2rem; }
.count-card {
    flex: 1;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
}
.count-card:hover { border-color: var(--fg); }
.count-card .count { font-size: 2rem; font-weight: 600; }
.count-card .label { color: var(--muted); font-size: 0.9rem; }

/* notifications, approvals, incidents — shared list look */
ul.notifications, ul.approvals, ul.incidents {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.notifications li, .approval, .incident {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}
.approval, .incident { padding: 1rem; margin-bottom: 0.75rem; }
.approval header, .incident header {
    display: flex;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 0.5rem;
}
.approval .agent, .incident .agent { font-weight: 600; color: var(--fg); }
.approval .action, .incident .scope { font-family: monospace; }
.approval .summary, .incident .summary { margin: 0.25rem 0; }

/* approvals — buttons */
.approval form.actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

/* ── Buttons ──────────────────────────────────────────────────────
   Default = filled brand purple (clearly clickable).
   .secondary = outlined, lower-emphasis.
   .approve = green, .reject = red, .remove = ghost X for inline deletes. */
/* Primary button — mirrors landing's .btn-primary (teal-500 fill, teal-700
   hover, pill, same padding + shadow). This is THE button style across the
   whole app, so the Profile/Share/etc. pages feel like the landing page. */
button, .button {
    display: inline-block;
    padding: 0.6rem 1.3rem;
    border: 1px solid var(--brand-teal);
    background: var(--brand-teal);
    color: #ffffff;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(6, 182, 212, 0.3);
    transition: background-color 0.12s, border-color 0.12s, transform 0.06s, box-shadow 0.12s;
}
button:hover, .button:hover {
    background: var(--brand-purple);        /* teal-700 */
    border-color: var(--brand-purple);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(14, 116, 144, 0.3);
}
button:active, .button:active { transform: translateY(1px); }
button:focus-visible, .button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.28);
}
button:disabled, .button:disabled {
    opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none;
}

/* Secondary — outlined, neutral */
button.secondary, .button.secondary {
    background: var(--card);
    color: var(--brand-deep);
    border-color: var(--border);
    font-weight: 500;
}
button.secondary:hover, .button.secondary:hover {
    background: var(--brand-soft);
    border-color: var(--brand-purple);
    color: var(--brand-purple);
}

/* Approve / Reject — keep their semantic colors but brand-friendly */
button.approve {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
button.approve:hover {
    background: #008c66; border-color: #008c66;
}
button.reject {
    background: var(--card); color: var(--crit); border-color: #f4c4c4;
}
button.reject:hover {
    background: var(--crit); border-color: var(--crit); color: #fff;
}

/* ── Form fields ──────────────────────────────────────────────────
   Global baseline for all text-like inputs.  Per-section rules can
   still override sizing — this just makes the borders, focus glow,
   and disabled state consistent across the whole app. */
input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=url],
input[type=search],
select,
textarea {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.65rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--fg);
    background: var(--card);
    transition: border-color 0.12s, box-shadow 0.12s;
}
input[type=text]:hover,
input[type=email]:hover,
input[type=number]:hover,
input[type=password]:hover,
input[type=url]:hover,
input[type=search]:hover,
select:hover,
textarea:hover {
    border-color: var(--brand-purple);
}
input[type=text]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=url]:focus,
input[type=search]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand-purple);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.18);
}
textarea { line-height: 1.45; }

/* ── Links ─────────────────────────────────────────────────────────
   Default link gets brand purple AND is underlined at rest, so inline
   links don't get lost in body copy.  Hover deepens the colour and
   thickens the underline.  Header nav, .muted, .button all opt out. */
main a {
    color: var(--brand-purple);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(108, 92, 231, 0.5);
    text-underline-offset: 2px;
    font-weight: 600;
    transition: color 0.12s, text-decoration-color 0.12s, text-decoration-thickness 0.12s;
}
main a:hover {
    color: var(--brand-purple-strong);
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
}
/* Muted links keep the underline removed — used for metadata
   (e.g. "view posting →" on a digest item). */
main a.muted, main a.muted:hover {
    text-decoration: none;
    font-weight: inherit;
}
/* Buttons rendered as <a> shouldn't be underlined */
main a.button, main a.button:hover { text-decoration: none; }
/* Step nav, plan badge, account chips, header chrome — opt out */
main a.step.is-link,
main a.step.is-link:hover { text-decoration: none; font-weight: inherit; }
main a.tier-menu-item,
main a.tier-menu-item:hover { text-decoration: none; }
/* Tag-style chips that are also links */
main a.watchlist-count,
main a.watchlist-count:hover,
main a.top-company-link,
main a.top-company-link:hover { text-decoration: none; font-weight: inherit; }
main a.secondary-link, main a.secondary-link:hover { text-decoration: none; font-weight: 500; }

.approval.approved { border-left: 3px solid var(--accent); }
.approval.rejected { border-left: 3px solid var(--crit); opacity: 0.7; }
.approval .decision { font-weight: 600; }

/* incidents — severity bars */
.incident.severity-info       { border-left: 3px solid var(--info); }
.incident.severity-routine    { border-left: 3px solid var(--muted); }
.incident.severity-needs_input { border-left: 3px solid var(--warn); }
.incident.severity-critical   { border-left: 3px solid var(--crit); }
.incident form.actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.incident form.actions input[type=text] {
    flex: 1;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 3px;
}

/* notifications */
ul.notifications li { display: flex; gap: 0.75rem; align-items: baseline; }
ul.notifications .level { font-family: monospace; color: var(--muted); }
ul.notifications .agent { font-weight: 600; }
ul.notifications .when { margin-left: auto; color: var(--muted); font-size: 0.85rem; }
ul.notifications .level-critical .level { color: var(--crit); }
ul.notifications .level-needs_input .level { color: var(--warn); }
ul.notifications li.unseen { background: #fffbe8; }

/* audit table */
table.audit {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: var(--card);
}
table.audit th, table.audit td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
table.audit pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 24rem;
    font-size: 0.75rem;
}
table.audit tr.outcome-success  .outcome { color: var(--accent); }
table.audit tr.outcome-failure  .outcome { color: var(--crit); }
table.audit tr.outcome-blocked  .outcome { color: var(--warn); }
table.audit tr.outcome-rate_limited .outcome { color: var(--warn); }

pre {
    background: #f3f3f3;
    padding: 0.5rem;
    border-radius: 3px;
    overflow-x: auto;
}

details summary { cursor: pointer; color: var(--muted); }

/* ── Profile (Phase 2) ──────────────────────────────────── */

.profile-header h2 { font-size: 1.4rem; color: var(--fg); text-transform: none; letter-spacing: 0; margin-bottom: 0.25rem; }
.profile-header .headline { font-size: 1rem; color: var(--muted); margin: 0.25rem 0; }
.profile-header .summary { margin-top: 0.75rem; }
.muted { color: var(--muted); }

.small { font-size: 0.85rem; }

.open-questions { list-style: none; padding: 0; margin: 0; }
.open-question {
    background: #f0f7ff;
    border: 1px solid #c7dcf2;
    border-radius: 4px;
    padding: 0.65rem 0.9rem;
    margin-bottom: 0.4rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.open-question .priority {
    font-family: monospace;
    font-size: 0.75rem;
    background: #d6e7f8;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.open-question-body {
    flex: 1 1 0;
    min-width: 0;
}
.open-question .question {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--fg);
}
.open-question .rationale {
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 0.2rem;
    line-height: 1.35;
}

/* Skill level groups */
.skill-level-group { margin-bottom: 0.75rem; }
.skill-level-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 700;
    margin: 0 0 0.3rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--border);
}
.skill-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.25rem 0.6rem;
    font-size: 0.88rem;
}
.skill-chip.source-verified { border-left: 3px solid var(--accent); }
.skill-chip.source-stated   { border-left: 3px solid var(--info); }
.skill-chip.source-derived  { border-left: 3px solid var(--warn); }
.skill-chip .skill-years { font-size: 0.75rem; color: var(--muted); }
.skill-chip .source-tag { margin-left: 0; }

/* Skill chip edit popover — keeps the inline pill layout intact while the
   grid edit form floats below the chip when expanded. */
.skill-chip { position: relative; }
.skill-chip .skill-edit-popover { display: inline; margin: 0; }
.skill-chip .skill-edit-popover[open] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    width: 360px;
    display: block;
}
.skill-chip .skill-edit-popover[open] > summary {
    position: absolute;
    top: -1.4rem;
    left: 0.4rem;
    font-size: 0.7rem;
    color: var(--muted);
}
.skill-chip .skill-edit-popover .item-edit-form {
    margin-top: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    background: var(--card);
}

/* Inline edit form per profile item */
.item-edit-block { margin-top: 0.5rem; }
.item-edit-block > summary {
    font-size: 0.8rem;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    display: inline;
}
.item-edit-block > summary:hover { color: var(--fg); }
.item-edit-form {
    margin-top: 0.6rem;
    padding: 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.75rem;
}
.item-edit-form label {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    color: var(--muted);
    gap: 0.2rem;
}
.item-edit-form label.full-width { grid-column: 1 / -1; }
.item-edit-form input[type=text],
.item-edit-form input[type=number],
.item-edit-form select,
.item-edit-form textarea {
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.3rem 0.5rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--fg);
    background: var(--card);
}
.item-edit-form .edit-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.5rem;
    margin-top: 0.2rem;
}
.item-edit-form button[type=submit] {
    font-size: 0.82rem;
    padding: 0.3rem 0.75rem;
}
.input-disabled,
input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--bg) !important;
}
.date-missing {
    color: var(--warn);
    font-style: italic;
    cursor: help;
}
.repair-notice {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fffbe8;
    border: 1px solid #f0e0a0;
    border-radius: 4px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.75rem;
    font-size: 0.88rem;
    color: #7a5800;
}

.profile-items { list-style: none; padding: 0; margin: 0; }
.profile-items li.item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.4rem;
}
.profile-items li.item.inline {
    display: inline-flex;
    gap: 0.5rem;
    margin-right: 0.4rem;
    align-items: baseline;
}
.profile-items.inline { padding: 0; }
.profile-items li.item.source-verified { border-left: 3px solid var(--accent); }
.profile-items li.item.source-stated   { border-left: 3px solid var(--info); }
.profile-items li.item.source-derived  { border-left: 3px solid var(--warn); }
.profile-items header { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; font-size: 0.9rem; }
.profile-items header .role { font-weight: 600; }
.profile-items header .company { font-weight: 600; }
.profile-items header .name { font-weight: 600; }
.profile-items .when { margin-left: auto; font-size: 0.85rem; }
.profile-items .cat { font-family: monospace; font-size: 0.85rem; }
.profile-items .prof { font-style: italic; color: var(--muted); font-size: 0.85rem; }
.profile-items .kind { font-family: monospace; color: var(--muted); }
.profile-items p { margin: 0.4rem 0 0; font-size: 0.95rem; }

/* Subtle source-type chip — internal recruiter shorthand, not a verdict */
.source-tag {
    font-family: monospace;
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 2px;
    margin-left: auto;
    color: var(--muted);
    background: #f3f3f3;
    border: 1px solid var(--border);
    text-transform: lowercase;
    letter-spacing: 0;
}
.source-tag.source-verified { color: var(--accent); border-color: #c8e6d4; background: #f0faf4; }
.source-tag.source-stated   { color: var(--info);   border-color: #c7dcf2; background: #f0f7ff; }
.source-tag.source-derived  { color: var(--warn);   border-color: #f0e0a0; background: #fffbe8; }

.badge-current {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 2px;
    color: var(--accent);
    background: #f0faf4;
    border: 1px solid #c8e6d4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Inline delete X-button on profile items */
.inline-delete { display: inline; margin: 0; padding: 0; }
button.remove {
    background: transparent;
    color: var(--muted);
    border: 1px solid transparent;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1;
    padding: 0;
    font-size: 1rem;
    cursor: pointer;
    margin-left: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
button.remove:hover {
    color: var(--crit);
    border-color: var(--crit);
    background: #fff5f5;
}

/* Manual-add and edit forms (small, inline under each section) */
details.add-block, details.edit-block {
    margin: 0.75rem 0 1rem;
    background: var(--card);
    border: 1px dashed var(--border);
    border-radius: 4px;
    padding: 0.4rem 0.75rem;
}
details.add-block[open], details.edit-block[open] {
    border-style: solid;
    padding: 0.75rem 1rem;
}
details.add-block summary, details.edit-block summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.9rem;
    user-select: none;
}
details.add-block[open] summary, details.edit-block[open] summary {
    color: var(--fg);
    margin-bottom: 0.5rem;
}
.manual-form { display: flex; flex-direction: column; gap: 0.5rem; }
.manual-form label {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
}
.manual-form label.checkbox { display: inline-flex; align-items: center; gap: 0.4rem; }
.manual-form input[type=text],
.manual-form textarea,
.manual-form select {
    display: block;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    font: inherit;
    color: var(--fg);
    margin-top: 0.2rem;
}
.manual-form .row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.manual-form .row label { flex: 1; min-width: 8rem; }
.manual-form button {
    align-self: flex-start;
    margin-top: 0.4rem;
}

/* ── Home: hero + journey step cards ────────────────────────────── */
.welcome { margin-bottom: 1.5rem; }
.welcome h2 { font-size: 1.5rem; text-transform: none; letter-spacing: 0; color: var(--fg); margin-bottom: 0.25rem; }
.welcome .tagline {
    font-size: 1.15rem;
    color: var(--accent);
    font-weight: 500;
    margin: 0.25rem 0 0.5rem;
}
/* Bigger, card-framed hero so the home page opens with presence. */
.welcome-hero {
    padding: 1.6rem 1.75rem 1.4rem;
    border: 1px solid var(--border);
    border-left: 6px solid var(--brand-purple);
    border-radius: 12px;
    background: linear-gradient(135deg, #f5f3ff 0%, #ecfeff 60%, #ffffff 100%);
    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.08);
}
/* Home dashboard hero layout — title left, 📖 Guide button right. */
.welcome-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.welcome-guide-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    flex-shrink: 0; margin-top: 0.3rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--brand-purple); border-radius: 999px;
    background: #fff; color: var(--brand-purple);
    font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.welcome-guide-btn:hover {
    background: var(--brand-soft);
    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.15);
    transform: translateY(-1px);
    text-decoration: none;
}
.welcome-hero h2 {
    font-size: 2rem; font-weight: 800; letter-spacing: -0.02em;
    color: var(--brand-purple);
}
.welcome-hero .tagline {
    font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em;
    color: #0e7490;
}
.welcome-hero .welcome-sub {
    font-size: 1rem; line-height: 1.55; color: var(--fg); margin: 0.6rem 0 0;
    max-width: 55rem;
}

.journey { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.journey .step {
    position: relative;
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 6px solid var(--border);
    border-radius: 10px;
    padding: 1.1rem 1.35rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.journey .step:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.journey .step.step-locked {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
    background: #f9fafb;
}

/* Per-step accent colors so the four steps are visually distinct and
   match their landing-destination palette (share=teal, profile=purple,
   talk=amber, opportunities=green). */
.step-share   { border-left-color: #0e7490; }
.step-share   .step-icon { color: #0e7490; }
.step-profile { border-left-color: #7c3aed; }
.step-profile .step-icon { color: #7c3aed; }
.step-talk    { border-left-color: #d97706; }
.step-talk    .step-icon { color: #d97706; }
.step-opps    { border-left-color: #047857; }
.step-opps    .step-icon { color: #047857; }

.journey .step.step-current {
    border-color: var(--brand-purple);
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.18), 0 6px 18px rgba(108, 92, 231, 0.12);
    background: linear-gradient(180deg, #faf8ff 0%, #ffffff 100%);
}
.journey .step.step-done {
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

/* Big round step numbers — a check when done, a pulsing ring when
   current. */
.step-num-large {
    flex: 0 0 3rem;
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.3rem;
    position: relative;
}
.journey .step.step-current .step-num-large {
    background: var(--brand-purple); color: #fff;
}
.journey .step.step-current .step-num-large::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 2px solid var(--brand-purple); opacity: 0.4;
    animation: step-pulse 1.8s ease-out infinite;
}
.journey .step.step-done .step-num-large {
    background: #10b981; color: #fff;
}
.journey .step.step-done .step-num-large::before {
    content: "✓"; font-size: 1.5rem;
}
.journey .step.step-done .step-num-large { font-size: 0; }

.step-body { flex: 1; min-width: 0; }
.step-head {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.5rem; margin-bottom: 0.3rem;
}
.step-body h3 {
    margin: 0;
    font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em;
    color: var(--fg);
}
.step-icon { font-size: 1.2rem; }
.step-body p { margin: 0.35rem 0; }
.step-body .muted { font-size: 0.93rem; line-height: 1.5; }
.step-status {
    color: var(--brand-purple);
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.3rem;
}
.journey .step.step-locked .step-status { color: var(--muted); font-weight: 400; }
.journey .step.step-done    .step-status { color: #047857; }

.step-badge {
    display: inline-flex; align-items: center;
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
    padding: 0.18rem 0.55rem; border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.step-badge-done    { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.step-badge-current { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.step-badge-locked  { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; }

/* Compact 4-step strip shown at the top of each sub-page in the
   candidate flow so the user always sees where they are. */
.flow-strip {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
    padding: 0.55rem 0.8rem; margin: 0 0 1.25rem;
    border: 1px solid var(--border); border-radius: 999px;
    background: linear-gradient(90deg, #f5f3ff 0%, #ecfeff 50%, #ecfdf5 100%);
    font-size: 0.82rem;
}
.flow-home {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: #fff; border: 1px solid var(--border);
    color: var(--muted); text-decoration: none; font-size: 1rem;
    margin-right: 0.25rem;
}
.flow-home:hover { color: var(--brand-purple); border-color: var(--brand-purple); }
.flow-step {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.65rem; border-radius: 999px;
    text-decoration: none; color: var(--muted);
    font-weight: 600;
    border: 1px solid transparent;
}
.flow-step:hover { color: var(--fg); background: rgba(255,255,255,0.7); }
.flow-step.flow-active {
    background: #fff; color: var(--brand-purple);
    border-color: var(--brand-purple);
    box-shadow: 0 1px 4px rgba(108, 92, 231, 0.15);
}
.flow-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.3rem; height: 1.3rem; border-radius: 50%;
    background: #e2e8f0; color: var(--muted);
    font-weight: 800; font-size: 0.72rem;
}
.flow-active .flow-num { background: var(--brand-purple); color: #fff; }
.flow-icon { font-size: 1rem; }
.flow-label { font-size: 0.82rem; }
.flow-sep { color: var(--muted-soft); font-weight: 700; }
@media (max-width: 600px) {
    .flow-label { display: none; }
}

/* Sub-page header block shown under the flow strip — gives each step
   page a strong, visually consistent intro that matches the color of
   its step card on the home page. */
.flow-header {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.1rem 1.4rem;
    border: 1px solid var(--border);
    border-left: 6px solid #cbd5e1;
    border-radius: 12px;
    background: linear-gradient(135deg, #fafbff 0%, #ffffff 100%);
    margin: 0 0 1.25rem;
}
.flow-header-icon {
    flex: 0 0 auto;
    width: 3.2rem; height: 3.2rem; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 2px 6px rgba(15,23,42,0.06);
}
.flow-header-title {
    margin: 0;
    font-size: 1.5rem; font-weight: 800; letter-spacing: -0.015em;
    color: var(--fg);
}
.flow-header-sub {
    margin: 0.2rem 0 0;
    font-size: 0.93rem; line-height: 1.5; color: var(--muted);
}
.flow-header-share   { border-left-color: #0e7490; background: linear-gradient(135deg, #ecfeff 0%, #ffffff 100%); }
.flow-header-share   .flow-header-title { color: #0e7490; }
.flow-header-profile { border-left-color: #7c3aed; background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%); }
.flow-header-profile .flow-header-title { color: #7c3aed; }
.flow-header-talk    { border-left-color: #d97706; background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%); }
.flow-header-talk    .flow-header-title { color: #b45309; }
.flow-header-opps    { border-left-color: #047857; background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%); }
.flow-header-opps    .flow-header-title { color: #047857; }
.flow-header-emails  { border-left-color: #2563eb; background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%); }
.flow-header-emails  .flow-header-title { color: #1d4ed8; }

/* When the flow strip sits INSIDE the app header (replacing the plain
   nav-primary text links), drop the standalone pill-strip chrome so it
   blends into the existing header layout.  Also tighten padding so all
   5 steps + the account menu fit on one row at common widths. */
.flow-strip.flow-strip-inline {
    background: none; border: none; padding: 0; margin: 0;
    gap: 0.15rem;
    flex: 1 1 auto; min-width: 0;
    justify-content: center;
}
.flow-strip.flow-strip-inline .flow-home { display: none; }
.flow-strip.flow-strip-inline .flow-step {
    padding: 0.28rem 0.55rem;
    gap: 0.3rem;
}
.flow-strip.flow-strip-inline .flow-sep { font-size: 0.85rem; }
.flow-strip.flow-strip-inline .flow-icon { font-size: 0.95rem; }
.flow-strip.flow-strip-inline .flow-label { font-size: 0.85rem; font-weight: 600; }
@media (max-width: 1100px) {
    .flow-strip.flow-strip-inline .flow-label { display: none; }
}

.ops-summary { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.ops-summary h3 { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ops-row { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.ops-pill {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--muted);
}
.ops-pill:hover { border-color: var(--fg); color: var(--fg); }

/* Active nav item */
header nav a.nav-current {
    color: var(--brand-purple);
    font-weight: 700;
}
header nav a.nav-current .step-num {
    background: var(--brand-purple);
    color: #fff;
}

/* Header nav step numbers */
header nav .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1;
    border-radius: 50%;
    background: var(--brand-soft-2);
    color: var(--brand-purple);
    font-size: 0.7rem;
    font-weight: 700;
    margin-right: 0.25rem;
    vertical-align: middle;
}
header nav .nav-sep {
    color: var(--border);
    margin: 0 0.25rem;
}
header nav a.ops { color: var(--muted); font-size: 0.9rem; }
header nav a.ops:hover { color: var(--brand-purple); }

/* ── Opportunity digest (Phase 3) ───────────────────────── */

.digest-summary {
    background: #f0f7ff;
    border: 1px solid #c7dcf2;
    border-radius: 4px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1rem;
    white-space: pre-wrap;
}

ol.digest-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.digest-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid var(--accent);
}
.digest-item.decided-interested { border-left-color: var(--accent); background: #f0faf4; }
.digest-item.decided-maybe { border-left-color: var(--info); }
.digest-item.decided-not_interested { border-left-color: var(--border); opacity: 0.65; }

.digest-item header {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 0.95rem;
}
.digest-item .rank {
    font-family: monospace;
    background: #eef;
    color: var(--fg);
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-weight: 700;
    font-size: 0.85rem;
}
.digest-item .title { font-weight: 600; }
.digest-item .company { font-weight: 600; }
.digest-item .reasoning {
    margin: 0.6rem 0 0.5rem;
    line-height: 1.5;
}
.digest-item .feedback-form {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}
.digest-item .feedback-form input[type=text] {
    flex: 1;
    min-width: 12rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    font: inherit;
}
.digest-item .decision-line { margin: 0.4rem 0 0; }
.digest-item form button { font-size: 0.85rem; padding: 0.3rem 0.7rem; }

/* Criteria summary block (shown when criteria are set) */
.criteria-summary {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--info);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}
.criteria-summary > div { margin: 0.2rem 0; }
.criteria-summary .cat { display: inline-block; min-width: 7rem; }
.tags { margin-top: 0.4rem; display: flex; gap: 0.35rem; flex-wrap: wrap; }
.tag {
    background: #eef;
    color: #336;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    font-size: 0.8rem;
    font-family: monospace;
}

/* Chat */
.kickoff-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    padding: 1.1rem 1.3rem;
    margin: 1rem 0 1.5rem;
}
.kickoff-card .kickoff-lead { font-size: 1rem; margin: 0 0 0.6rem; color: var(--fg); }
.kickoff-card form { margin: 0.9rem 0 0.4rem; }
.kickoff-card .kickoff-skip { margin: 0.6rem 0 0; }

/* Talk → Opportunities transition banner */
.ready-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #f0faf4;
    border: 1px solid #c8e6d4;
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    padding: 0.8rem 1rem;
    margin: 0.5rem 0 1.25rem;
    flex-wrap: wrap;
}
.ready-banner-text { flex: 1 1 60%; min-width: 16rem; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.95rem; }
.ready-banner-text strong { color: #1f5a36; }
.ready-banner-text .muted { font-size: 0.85rem; }
.ready-banner-cta {
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    padding: 0.45rem 0.95rem;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}
.ready-banner-cta:hover { filter: brightness(0.95); }

/* Inline "I'm ready" link — looks like a link, posts a form */
.chat-skip { margin-top: 0.75rem; }
.link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--info);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}
.link-button:hover { color: var(--accent); }

/* Opportunities first-visit greeting */
.opportunities-greeting {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    padding: 1.2rem 1.4rem;
    margin: 1rem 0 1.5rem;
}
.opportunities-greeting .greeting-title { margin: 0 0 0.4rem; font-size: 1.1rem; text-transform: none; letter-spacing: 0; color: var(--fg); }
.greeting-criteria { list-style: none; padding: 0; margin: 0.85rem 0; display: flex; flex-direction: column; gap: 0.35rem; }
.greeting-criteria li { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.greeting-cat { font-family: monospace; font-size: 0.78rem; color: var(--muted); text-transform: uppercase; min-width: 6rem; }
.greeting-val { font-weight: 600; color: var(--fg); }
.greeting-cta { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }

.chat .messages { list-style: none; padding: 0; margin: 1rem 0; }
.chat .msg {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.5rem;
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
}
.chat .msg.role-user { border-left: 3px solid var(--info); }
.chat .msg.role-assistant { border-left: 3px solid var(--accent); }
.chat .msg .role { font-family: monospace; font-size: 0.8rem; color: var(--muted); width: 5rem; flex-shrink: 0; }
.chat .msg .content { flex: 1; white-space: pre-wrap; }
.chat .msg .when { font-size: 0.8rem; }
.chat-form textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    font: inherit;
    resize: vertical;
}
.chat-form button { margin-top: 0.4rem; }
.open-questions-hint { margin: 0.75rem 0; }
.open-questions-hint summary { cursor: pointer; }
.open-questions-hint ul { padding-left: 1.25rem; margin: 0.5rem 0 0; }
.open-questions-hint .priority {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--muted);
    margin-right: 0.4rem;
}

/* Ingest page — "on file" section at top */
.on-file-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.on-file-heading {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}
.section-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}
.add-more-heading {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

/* Ingest forms */
.ingest-form {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.ingest-form label {
    display: block;
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--muted);
}
.ingest-form input[type=file] {
    display: block;
    margin-top: 0.35rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--fg);
    cursor: pointer;
}
.ingest-form input[type=text],
.ingest-form textarea {
    display: block;
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    font: inherit;
    color: var(--fg);
    margin-top: 0.25rem;
}
.ingest-form h4 { margin: 0 0 0.4rem; font-size: 1rem; }
.ingest-form button { margin-top: 0.5rem; }

/* Collapsed-form variant: when the candidate already has material on file,
   the paste-text form hides behind a <summary> row so the big empty
   textarea doesn't read like an unprocessed drop. */
.ingest-form-collapsed { padding: 0; }
.ingest-form-collapsed > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    user-select: none;
}
.ingest-form-collapsed > summary::-webkit-details-marker { display: none; }
.ingest-form-collapsed > summary::before {
    content: "+ ";
    font-weight: 700;
    color: var(--muted);
    margin-right: 0.3rem;
}
.ingest-form-collapsed[open] > summary::before { content: "− "; }
.ingest-form-collapsed > summary:hover { background: rgba(0,0,0,0.02); }
.ingest-form-summary-title { font-weight: 600; }
.ingest-form-body { padding: 0 1.25rem 1rem; }

/* Ingest submit button — slightly more prominent than a plain button */
.ingest-submit {
    margin-top: 0.75rem;
    padding: 0.55rem 1.4rem;
    font-weight: 700;
    /* Inherits brand purple background + white text from base button.
       Slightly larger padding makes this the visually-heaviest CTA. */
}
.ingest-submit:hover {
    box-shadow: var(--shadow-md);
}

/* "What happens next" hint above submit */
.form-hint {
    margin: 0.6rem 0 0;
    line-height: 1.4;
}

/* File input styling */
.file-label {
    display: block;
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--muted);
}
.file-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.5rem 0.75rem;
    margin-top: 0.35rem;
    font-size: 0.88rem;
}
.file-preview-icon { font-size: 1rem; }
.file-preview-name { font-weight: 600; color: var(--fg); word-break: break-all; }
.file-preview-size { white-space: nowrap; }
.ingest-result { background: #f0f7f0; border: 1px solid #cfe0cf; padding: 1rem 1.25rem; border-radius: 4px; }
.ingest-result .error { color: var(--crit); }

/* Saved free-text sources */
.saved-freetext {
    margin-top: 1.25rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}
.saved-freetext h4 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.saved-source-item {
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 0.5rem;
    background: var(--bg);
}
.saved-source-item > summary {
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.9rem;
    list-style: none;
    user-select: none;
}
.saved-source-item > summary::-webkit-details-marker { display: none; }
.saved-source-item > summary::before {
    content: "▶";
    font-size: 0.65rem;
    color: var(--muted);
    flex-shrink: 0;
    transition: transform 0.15s;
}
.saved-source-item[open] > summary::before { transform: rotate(90deg); }
.saved-source-label { font-weight: 600; color: var(--fg); }
.saved-source-meta { margin-left: auto; white-space: nowrap; }
.saved-source-body { padding: 0 0.9rem 0.9rem; }
.saved-source-content {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.75rem 1rem;
    font-family: monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
    margin: 0 0 0.6rem;
    color: var(--fg);
}
.saved-source-actions { display: flex; gap: 0.5rem; }
.saved-source-actions-top { display: inline-flex; gap: 0.4rem; margin-left: 0.6rem; }
.btn-small { font-size: 0.8rem; padding: 0.3rem 0.7rem; font-weight: 600; }
/* Secondary helper — outlined neutral chip, distinct from primary purple. */
.btn-secondary {
    background: var(--card);
    color: var(--brand-deep);
    border-color: var(--border);
    font-weight: 500;
}
.btn-secondary:hover {
    background: var(--brand-soft);
    border-color: var(--brand-purple);
    color: var(--brand-purple);
}
.btn-danger {
    background: var(--card);
    color: var(--crit);
    border-color: #f4c4c4;
}
.btn-danger:hover {
    background: var(--crit);
    border-color: var(--crit);
    color: #fff;
}

/* Other-sources list on ingest page */
.saved-other-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}
.saved-other-list li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.saved-other-list li:last-child { border-bottom: none; }
.saved-other-actions { margin-left: auto; display: inline-flex; gap: 0.4rem; }
.source-kind-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.source-kind-github_user  { background: #dde4f5; color: #2a3a7a; }
.source-kind-code_archive { background: #f5eedd; color: #7a5a1a; }
.source-kind-website      { background: #ddf5e8; color: #1a7a4a; }
.source-kind-freetext     { background: #f0f0f0; color: #555; }

/* Phase 4: Company Research */
.research-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}
.signal-pill {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
}
.signal-pill .cat { font-size: 0.75rem; }
.signal-wide { flex: 1 1 300px; }
.research-body { margin-top: 1.5rem; }
.research-body h3 { font-size: 1rem; margin: 1.25rem 0 0.4rem; color: var(--muted); font-weight: 600; }
.research-body p { margin: 0 0 0.75rem; }
.inline-research { display: inline; }
.inline-research button.small { padding: 0.2rem 0.6rem; font-size: 0.8rem; }
a.company { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--border); }
a.company:hover { border-bottom-color: var(--accent); color: var(--accent); }

/* Phase 5: Application Draft */
.draft-section { margin-bottom: 2rem; }
.draft-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.draft-header h3 { margin: 0; }
.draft-body {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 600px;
    overflow-y: auto;
}
.jd-preview { max-height: 300px; color: var(--muted); }
.tailoring-notes {
    background: #f5f9f5;
    border-left: 3px solid var(--accent);
    padding: 0.75rem 1rem;
    border-radius: 0 4px 4px 0;
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
}
button.small { padding: 0.2rem 0.7rem; font-size: 0.8rem; }

/* Phase 5: Tailoring inputs (picks + free-text hints) */
.tailoring-hints-form {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    margin-top: 0.75rem;
}
.tailoring-block {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.tailoring-field { display: flex; flex-direction: column; gap: 0.4rem; }
.tailoring-field-title { font-weight: 600; font-size: 0.95rem; }
.tailoring-field-help { line-height: 1.5; }
.tailoring-picks {
    list-style: none;
    margin: 0.25rem 0 0 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg, #fff);
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.tailoring-picks li { margin: 0; padding: 0; }
.tailoring-picks label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.4rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9rem;
}
.tailoring-picks label:hover { background: var(--card); }
.tailoring-picks input[type="checkbox"] { flex-shrink: 0; margin: 0; }
.tailoring-picks .pick-main { flex: 1; min-width: 0; }
.tailoring-picks .pick-meta { flex-shrink: 0; white-space: nowrap; }
.tailoring-hints-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--fg);
    resize: vertical;
    margin-top: 0.25rem;
}
.tailoring-hints-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
}

/* Phase 6: Email drafts */
.email-edit-form { margin-top: 1rem; }
.email-header-fields {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.email-header-fields label,
.email-edit-form > label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
}
.field-label { color: var(--muted); font-size: 0.8rem; font-weight: 500; }
.email-header-fields input {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    font: inherit;
    color: var(--fg);
}
.email-body {
    width: 100%;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--fg);
    resize: vertical;
}
.status-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.status-draft    { background: #fff8e0; color: #8a6000; }
.status-approved { background: #e0f0ff; color: #0050a0; }
.status-sent     { background: #e0f7e8; color: #0a6020; }
.status-rejected { background: #f5f5f5; color: #888; }
.status-dot { font-size: 0.7rem; }
.status-ok   { color: var(--accent); }
.status-warn { color: var(--warn); }
.warn { color: var(--warn); }
.item-done   { opacity: 0.75; }
.item-muted  { opacity: 0.5; }
.reject-btn  { color: var(--crit); border-color: var(--crit); }

/* Phase 7: Interview Coach */
.qa-group {
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 0.75rem;
}
.qa-group-header {
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.qa-group-header::-webkit-details-marker { display: none; }
.qa-group[open] .qa-group-header { border-bottom: 1px solid var(--border); }
.question-list {
    margin: 0;
    padding: 0.75rem 1rem 0.75rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.question-item { margin: 0; }
.question-text { margin: 0 0 0.25rem; font-weight: 500; }
.story-cat { margin: 0.75rem 0 0.25rem; font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 1rem; }
.story-list { margin: 0; padding: 0 1rem 0.75rem 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.story-item { margin: 0; }
.story-item p { margin: 0.15rem 0 0; }
.qa-thread {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 500px;
    overflow-y: auto;
    padding: 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 0.75rem;
}
.qa-message { display: flex; flex-direction: column; gap: 0.2rem; }
.qa-role {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--muted);
}
.qa-interviewer .qa-role { color: var(--info); }
.qa-candidate .qa-role   { color: var(--accent); }
.qa-coach .qa-role       { color: var(--warn); }
.qa-content {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
}
.qa-interviewer .qa-content { border-left: 3px solid var(--info); }
.qa-candidate .qa-content   { border-left: 3px solid var(--accent); margin-left: 2rem; }
.qa-coach .qa-content       { border-left: 3px solid var(--warn); font-style: italic; }

/* ── Posting / "About this role" card on the thread page ───────── */
.posting-card {
    background:
        radial-gradient(circle at 5% 10%, rgba(108, 92, 231, 0.05), transparent 50%),
        var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand-purple);
    border-radius: 14px;
    padding: 1.4rem 1.5rem;
}
.posting-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.posting-card-head h3 { margin: 0; }

.posting-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.5rem 1rem;
    font-size: 0.92rem;
    color: var(--brand-deep);
    background: var(--brand-soft);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    border: 1px solid var(--brand-soft-2);
}
.posting-meta li { display: flex; flex-direction: column; gap: 0.15rem; line-height: 1.35; }
.posting-meta-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-purple);
}

/* The description is rendered as HTML now — Greenhouse content stripped
   of script/iframe/inline-handlers server-side, then injected with
   Jinja's `| safe`. We style the structural tags here so paragraphs,
   headings, lists, links all look right inside the JD card. */
.posting-description-html {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--brand-deep);
    /* Lever returns plain text (not HTML), so we need pre-wrap to
       preserve paragraph breaks. Real HTML elements inside still get
       block-level formatting from their browser default + our per-tag
       rules below — pre-wrap only affects text-node whitespace. */
    white-space: pre-wrap;
    word-wrap: break-word;
}
.posting-description-html h1,
.posting-description-html h2,
.posting-description-html h3,
.posting-description-html h4 {
    color: var(--brand-deep);
    margin: 1rem 0 0.4rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
.posting-description-html h1 { font-size: 1.15rem; }
.posting-description-html h2 { font-size: 1.05rem; }
.posting-description-html h1:first-child,
.posting-description-html h2:first-child,
.posting-description-html h3:first-child,
.posting-description-html h4:first-child,
.posting-description-html p:first-child { margin-top: 0; }
.posting-description-html p { margin: 0 0 0.7rem; }
.posting-description-html p:last-child { margin-bottom: 0; }
.posting-description-html ul,
.posting-description-html ol { margin: 0.4rem 0 0.8rem; padding-left: 1.4rem; }
.posting-description-html li { margin: 0.2rem 0; }
.posting-description-html a {
    color: var(--brand-purple);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.posting-description-html a:hover { color: var(--brand-purple-strong); text-decoration-thickness: 2px; }
.posting-description-html strong { color: var(--brand-deep); font-weight: 700; }
.posting-description-html em { color: var(--brand-deep); }
.posting-description-html hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }

/* Soft fade at the bottom of the preview to hint there's more — only
   shown for long descriptions. The full version lives inside <details>. */
.posting-description-preview {
    position: relative;
    max-height: 18rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
/* Hide the preview block when the full version is open */
.posting-description-wrap[open] ~ .posting-description-preview,
.posting-description-preview:has(+ .posting-description-wrap[open]) {
    /* placeholder — actual hide is done via :has if supported, or via
       sibling-combinator below */
}
.posting-description-wrap[open] {
    /* When open, hide the previous-sibling preview by inverting display */
    margin-top: 0.5rem;
}
/* Use general sibling combinator: when wrap[open], the next preview should hide.
   Order in template: preview first, then wrap. So we use :has on parent. */
.posting-card:has(.posting-description-wrap[open]) .posting-description-preview {
    display: none;
}

.posting-description-toggle {
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: var(--brand-purple);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.4rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.posting-description-toggle::-webkit-details-marker { display: none; }
.posting-description-toggle::marker { content: ""; }
.posting-description-toggle::before { content: "▸"; font-size: 0.75rem; transition: transform 0.15s; }
.posting-description-wrap[open] > .posting-description-toggle::before { transform: rotate(90deg); }
.posting-description-toggle .when-open { display: none; }
.posting-description-wrap[open] > .posting-description-toggle .when-closed { display: none; }
.posting-description-wrap[open] > .posting-description-toggle .when-open { display: inline; }

/* ── Progress card (chart across rounds) ─────────────────────── */
.progress-card {
    background:
        radial-gradient(circle at 12% 18%, rgba(108, 92, 231, 0.08), transparent 55%),
        radial-gradient(circle at 88% 82%, rgba(6, 182, 212, 0.08), transparent 55%),
        var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand-purple);
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
}
.progress-card .draft-header { align-items: center; }
.progress-headline {
    margin: 0.25rem 0 0.85rem;
    font-size: 0.95rem;
    color: var(--brand-deep);
    opacity: 0.9;
}
.progress-headline strong { color: var(--brand-purple); }

.progress-trend {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    border: 1px solid;
}
.progress-trend.trend-improving  { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.progress-trend.trend-regressing { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.progress-trend.trend-steady     { background: #fffbeb; color: #92400e; border-color: #fde68a; }

.progress-chart-wrap {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.85rem;
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
}
.progress-chart {
    display: block;
    width: 100%;
    height: auto;
    min-width: 480px;       /* preserve readability on narrow screens */
}
.progress-note {
    margin-top: 0.8rem;
    font-size: 0.82rem;
    line-height: 1.45;
}

.progress-card-empty {
    background: var(--brand-soft);
    border: 1px dashed var(--brand-purple);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
}

/* ── Archived interview sessions (Past rounds) ──────────────────── */
.archived-sessions { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.6rem; }
.archived-session  { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.archived-session > details > summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.archived-session > details > summary::-webkit-details-marker { display: none; }
.archived-session > details > summary::marker { content: ""; }
.archived-session > details > summary::before {
    content: "▸";
    font-size: 0.8rem;
    color: var(--muted);
    width: 0.9rem;
    transition: transform 0.15s;
}
.archived-session > details[open] > summary::before { transform: rotate(90deg); }
.archived-round { font-weight: 700; color: var(--brand-deep); font-size: 1rem; }
.archived-date  { color: var(--muted); font-size: 0.85rem; font-family: monospace; }
.archived-meta  { color: var(--muted); font-size: 0.85rem; }
.archived-excerpt {
    flex: 1 1 100%;
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.4;
}
.archived-grade {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    border: 1px solid;
}
.archived-grade.grade-strong               { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.archived-grade.grade-borderline           { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.archived-grade.grade-needs-more-practice  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* "How this page works" stepper on the Interview prep page.
   Three numbered steps rendered as cards with strong brand colors,
   large status glyphs, and connecting arrows on desktop so the flow
   reads at a glance. */
.prep-steps {
    margin: 0 0 1.5rem; padding: 1.1rem 1.25rem;
    border: 1px solid var(--border); border-radius: 10px;
    background: linear-gradient(180deg, #fafbff 0%, #f3f6fc 100%);
}
.prep-steps-title {
    margin: 0 0 0.9rem; font-size: 0.78rem; color: var(--brand-purple);
    text-transform: uppercase; letter-spacing: 0.14em; font-weight: 800;
}
.prep-steps-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 0.9rem;
    grid-template-columns: 1fr;
    align-items: stretch;
}
@media (min-width: 900px) {
    .prep-steps-list {
        grid-template-columns: 1fr auto 1fr auto 1fr;
        align-items: stretch;
    }
    /* Arrow between step 1→2 and 2→3 */
    .prep-steps-list::before,
    .prep-steps-list::after {
        content: "→";
        align-self: center;
        font-size: 1.6rem; font-weight: 700;
        color: #cbd5e1;
    }
    .prep-steps-list::before { grid-column: 2; grid-row: 1; }
    .prep-steps-list::after  { grid-column: 4; grid-row: 1; }
    .prep-step:nth-child(1) { grid-column: 1; }
    .prep-step:nth-child(2) { grid-column: 3; }
    .prep-step:nth-child(3) { grid-column: 5; }
}
.prep-step {
    position: relative;
    display: flex; flex-direction: column; gap: 0.6rem;
    padding: 1.1rem 1.1rem 0.9rem;
    border: 2px solid var(--border); border-radius: 10px;
    background: #fff;
    transition: box-shadow 0.15s, transform 0.15s;
}
.prep-step.step-done {
    border-color: #a7f3d0;
    background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%);
}
.prep-step.step-current {
    border-color: var(--brand-purple);
    background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 100%);
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.12);
}
.prep-step.step-pending {
    background: #fafbfc;
    opacity: 0.72;
}
/* Big circle top-left with the number, or a check when done */
.prep-step-num {
    position: absolute; top: -14px; left: 14px;
    width: 32px; height: 32px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: #fff; background: #94a3b8;
    font-size: 1rem;
    border: 3px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.step-done    .prep-step-num { background: #10b981; }
.step-done    .prep-step-num::before { content: "✓"; font-size: 1.1rem; }
.step-done    .prep-step-num { font-size: 0; } /* hide the number text when check is shown */
.step-current .prep-step-num { background: var(--brand-purple); }
/* Pulsing ring on the current step so the eye lands on it */
.step-current .prep-step-num::after {
    content: ""; position: absolute; inset: -6px; border-radius: 999px;
    border: 2px solid var(--brand-purple); opacity: 0.4;
    animation: step-pulse 1.8s ease-out infinite;
}
@keyframes step-pulse {
    0%   { transform: scale(0.95); opacity: 0.6; }
    70%  { transform: scale(1.25); opacity: 0;   }
    100% { transform: scale(1.25); opacity: 0;   }
}
.prep-step-body  { flex: 1 1 auto; min-width: 0; padding-top: 0.5rem; }
.prep-step-head  { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.prep-step-head strong { font-size: 1.02rem; color: var(--fg); }
.prep-step-body p { margin: 0.25rem 0 0; line-height: 1.45; }
.prep-step-body form { margin-top: auto; }

/* Accent the three body sections so the page isn't all black & white.
   Cheat sheet / likely questions / story map each get a thin colored
   left border + a matching header color — mirrors the stepper above. */
#cheat-sheet-section     { border-left: 4px solid #0e7490; padding-left: 1rem; }
#cheat-sheet-section h3  { color: #0e7490; }
#likely-questions-section     { border-left: 4px solid #7c3aed; padding-left: 1rem; }
#likely-questions-section h3  { color: #7c3aed; }
#story-map-section            { border-left: 4px solid #d97706; padding-left: 1rem; }
#story-map-section .qa-group-header { color: #d97706; font-weight: 700; }
#qa { border-left: 4px solid #10b981; padding-left: 1rem; }
#qa h3 { color: #047857; }

/* ── Opportunity thread page — redesigned ─────────────────────── */
/* Page header: bigger title, subtle underline, breathing room. */
.thread-header {
    padding: 1rem 1.25rem 1.1rem;
    margin-bottom: 1.1rem;
    background: linear-gradient(180deg, #fafbff 0%, #f3f6fc 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.thread-header-top {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; flex-wrap: wrap;
}
.thread-title       { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; color: var(--fg); line-height: 1.25; }
.thread-title-at    { color: var(--muted); font-weight: 500; margin: 0 0.25rem; }
.thread-company     { color: var(--brand-purple); text-decoration: none; }
.thread-company:hover { text-decoration: underline; }
.thread-location    { margin: 0.4rem 0 0.9rem; }

/* Larger, labeled stage trail */
.stage-trail-lg {
    display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center;
    padding: 0.75rem; margin-top: 0.6rem;
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
}
.stage-trail-lg .stage-node {
    font-size: 0.82rem; padding: 0.3rem 0.65rem;
}
.stage-trail-lg .stage-node-active {
    font-weight: 800;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.18);
}

/* Each major section gets a distinct color + icon so the page reads as
   grouped phases (context, stage, action artifacts, outcome) instead
   of a flat stack of gray boxes. */
.thread-section {
    position: relative;
    padding-left: 1.1rem;
    padding-top: 0.6rem; padding-bottom: 0.6rem;
    border-left: 5px solid var(--border);
    margin-bottom: 1.1rem;
}
.thread-section h3 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
    margin: 0 0 0.5rem;
}
.thread-section .section-icon {
    margin-right: 0.1rem;
    font-size: 1.15rem;
    vertical-align: -1px;
}

/* Status badges on every section header — tells the user at a glance
   what's done, what's in progress, what hasn't been started. */
.section-status {
    display: inline-flex; align-items: center;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em;
    padding: 0.22rem 0.65rem; border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.status-done     { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.status-progress { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.status-pending  { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.status-locked   { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }

/* Email drafts listing — stronger visual presence so it stands up to
   the footer below. Card grid with a blue left-border accent (matches
   the ✉️ emails section color used on the thread page). */
.email-drafts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 900px) {
    .email-drafts-grid { grid-template-columns: 1fr 1fr; }
}
.email-draft-card {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 0.9rem 1.1rem 0.75rem;
    border: 1px solid var(--border);
    border-left: 5px solid #2563eb;
    border-radius: 8px;
    background: #fff;
    color: var(--fg);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.email-draft-card:hover {
    border-color: #1d4ed8;
    border-left-color: #1d4ed8;
    box-shadow: 0 4px 12px rgba(37,99,235,0.14);
    transform: translateY(-1px);
    text-decoration: none;
}
.email-draft-card.status-sent     { border-left-color: #10b981; opacity: 0.85; }
.email-draft-card.status-rejected { border-left-color: #cbd5e1; opacity: 0.6; }
.edc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.edc-subject { font-size: 1rem; font-weight: 700; color: var(--brand-purple); line-height: 1.3; }
.edc-meta {
    display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center;
    font-size: 0.85rem; color: var(--muted);
}
.edc-type {
    font-weight: 700; font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 0.14rem 0.5rem; border-radius: 999px;
    background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
}
.edc-sep  { color: var(--muted-soft); }
.edc-warn { color: #b45309; font-weight: 600; }
.edc-date { align-self: flex-end; }

/* "What's done for this role" badges under each pipeline card. */
.pipeline-badges {
    display: inline-flex; flex-wrap: wrap; gap: 0.3rem;
    margin-top: 0.4rem;
    width: 100%;
}
.pipeline-badge {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
    padding: 0.14rem 0.5rem; border-radius: 999px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.1s, box-shadow 0.1s;
}
.pipeline-badge:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.06); }
.pipeline-badge.pb-done { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.pipeline-badge.pb-todo { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; opacity: 0.85; }

/* Pipeline card — emphasize the position title; everything else is
   secondary context. */
.browse-item .browse-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-purple);
    letter-spacing: -0.005em;
}
.browse-item .browse-title:hover { text-decoration: underline; }

/* Short teaser excerpt at the top of the "About this role" card so the
   candidate sees what the role is without expanding the full JD. */
.posting-excerpt {
    margin: 0.4rem 0 0.9rem;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid #0e7490;
    background: #ecfeff;
    color: var(--fg);
    font-size: 0.93rem;
    line-height: 1.5;
    border-radius: 0 6px 6px 0;
}
.section-context     { border-left-color: #0e7490; }
.section-context     h2, .section-context     h3 { color: #0e7490; }
.section-stage       { border-left-color: #7c3aed; }
.section-stage       h2, .section-stage       h3 { color: #7c3aed; }
.section-application { border-left-color: #0891b2; }
.section-application h2, .section-application h3 { color: #0e7490; }
.section-emails      { border-left-color: #2563eb; }
.section-emails      h2, .section-emails      h3 { color: #1d4ed8; }
.section-interview   { border-left-color: #10b981; }
.section-interview   h2, .section-interview   h3 { color: #047857; }
.section-offer       { border-left-color: #d97706; }
.section-offer       h2, .section-offer       h3 { color: #b45309; }
.section-utility     { border-left-color: #cbd5e1; opacity: 0.9; }
.section-utility     .qa-group-header { color: #475569; }

/* Quick-jump nav — a horizontal row of color-matched chips directly
   under the header so the full map is visible without scrolling. */
.thread-nav {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin: 0 0 1.25rem; padding: 0.6rem 0.8rem;
    border: 1px solid var(--border); border-radius: 8px;
    background: linear-gradient(180deg, #fafbff 0%, #f3f6fc 100%);
}
.thread-nav-link {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.3rem 0.7rem; border-radius: 999px;
    font-size: 0.82rem; font-weight: 600;
    background: #fff; color: var(--fg);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
}
.thread-nav-link:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.nav-context     { border-color: #a5f3fc; color: #0e7490; background: #ecfeff; }
.nav-stage       { border-color: #ddd6fe; color: #7c3aed; background: #f5f3ff; }
.nav-application { border-color: #a5f3fc; color: #0e7490; background: #ecfeff; }
.nav-emails      { border-color: #bfdbfe; color: #1d4ed8; background: #eff6ff; }
.nav-interview   { border-color: #a7f3d0; color: #047857; background: #ecfdf5; }
.nav-offer       { border-color: #fde68a; color: #b45309; background: #fffbeb; }
.step-badge {
    display: inline-flex; align-items: center;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
    padding: 0.14rem 0.5rem; border-radius: 999px;
    border: 1px solid transparent; white-space: nowrap;
}
.step-badge-done    { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.step-badge-current { background: var(--brand-soft); color: var(--brand-purple); border-color: var(--brand-soft-2, #e9d5ff); }
.step-badge-pending { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.step-badge-ok      { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.step-badge-warn    { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.step-badge-full    { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* Round quota pill on the Mock interview heading. Promoted out of the
   muted subtitle so it's visible at a glance — users were missing it. */
.rounds-pill {
    display: inline-flex; align-items: center;
    font-size: 0.78rem; font-weight: 700;
    padding: 0.22rem 0.65rem; border-radius: 999px;
    border: 1px solid transparent; letter-spacing: 0.01em;
    white-space: nowrap;
}
.rounds-pill-ok   { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.rounds-pill-warn { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.rounds-pill-full { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.archived-grade.grade-na                   { background: var(--brand-soft); color: var(--brand-purple); border-color: var(--brand-soft-2); }
.archived-grade.grade-no-debrief           { background: var(--bg);         color: var(--muted);       border-color: var(--border); }

.archived-session-body {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(108, 92, 231, 0.025), transparent 80px);
}
.archived-subsection { margin-top: 0.85rem; }
.archived-subsection > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--brand-purple);
    font-size: 0.92rem;
    padding: 0.35rem 0;
    list-style: none;
}
.archived-subsection > summary::-webkit-details-marker { display: none; }
.archived-subsection > summary::marker { content: ""; }
.archived-subsection > summary::before {
    content: "▸ ";
    color: var(--muted);
    font-size: 0.8rem;
    transition: transform 0.15s;
    display: inline-block;
}
.archived-subsection[open] > summary::before { transform: rotate(90deg); }
.archived-questions { padding-left: 1.3rem; margin: 0.4rem 0 0; }
.archived-questions li { margin: 0.45rem 0; font-size: 0.92rem; line-height: 1.45; }
.archived-thread {
    margin-top: 0.4rem;
    /* slightly tighter than the live thread */
    max-height: 32rem;
    overflow-y: auto;
}
.qa-form { margin-top: 0.5rem; }
.qa-input { width: 100%; }

/* ── Pipeline / thread ────────────────────────────────────────── */

/* Stage pills */
.stage-pill {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    color: #fff;
}
.stage-pill-sm { font-size: 0.7rem; padding: 0.1rem 0.4rem; }

.stage-discovered   { background: #94a3b8; }
.stage-interested   { background: #0ea5e9; }
.stage-applied      { background: #3b82f6; }
.stage-screening    { background: #6366f1; }
.stage-interviewing { background: #8b5cf6; }
.stage-offer        { background: #f59e0b; color: #1c1c1c; }
.stage-negotiating  { background: #f97316; }
.stage-accepted     { background: #22c55e; }
.stage-rejected     { background: #ef4444; }
.stage-withdrawn    { background: #9ca3af; }

/* Stage trail breadcrumb */
.stage-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    margin: 0.75rem 0;
}
.stage-node {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}
.stage-node-past   { color: var(--muted); background: var(--bg); }
.stage-node-active { color: #fff; background: #3b82f6; }
.stage-node-future { color: #bbb; background: var(--bg); }
.stage-terminal-accepted .stage-node-active { background: #22c55e; }
.stage-terminal-rejected  .stage-node-active { background: #ef4444; }
.stage-terminal-withdrawn .stage-node-active { background: #9ca3af; }
.stage-arrow { color: var(--muted); font-size: 0.85rem; }

/* Terminal banners */
.stage-terminal-banner {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.stage-terminal-accepted { background: #dcfce7; border: 1px solid #86efac; color: #166534; }
.stage-terminal-rejected  { background: #fee2e2; border: 1px solid #fca5a5; color: #7f1d1d; }
.stage-terminal-withdrawn { background: #f1f5f9; border: 1px solid #cbd5e1; color: #475569; }

/* Top-companies summary on Opportunities */
.top-companies-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.top-company-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    margin-bottom: 0.4rem;
    background: var(--card);
    flex-wrap: wrap;
}
.top-company-item.empty { border-left-color: var(--border); opacity: 0.65; }
.top-company-link { color: inherit; text-decoration: none; flex: 1 1 auto; }
.top-company-link:hover .top-company-name { text-decoration: underline; }
.top-company-name { font-weight: 600; font-size: 1rem; }
.top-company-count { font-size: 0.92rem; }
.top-company-count strong { color: var(--accent); }

/* Watchlist row count badge */
.watchlist-count {
    font-size: 0.78rem;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    background: #f0faf4;
    color: var(--accent);
    border: 1px solid #c8e6d4;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.watchlist-count:hover { background: var(--accent); color: #fff; }
.watchlist-count-zero {
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    background: #f3f3f3;
    border: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
}
.watchlist-empty { opacity: 0.7; }

/* "Other companies" — collapsible list for watchlist entries that
   returned 0 postings on the last poll. Out of the way by default. */
.dormant-watchlist {
    margin-top: 1rem;
    background: var(--brand-soft);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
}
.dormant-watchlist > summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
    color: var(--brand-deep);
    font-weight: 600;
    padding: 0.35rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.dormant-watchlist > summary::-webkit-details-marker { display: none; }
.dormant-watchlist > summary::marker { content: ""; }
.dormant-watchlist > summary::before {
    content: "▸";
    font-size: 0.78rem;
    color: var(--muted);
    transition: transform 0.15s;
}
.dormant-watchlist[open] > summary::before { transform: rotate(90deg); }
.dormant-watchlist-note { margin: 0.4rem 0 0.6rem; }

/* Browse postings page (paginated list across the watchlist) */
.browse-filters { margin: 0.5rem 0 1rem; }
.browse-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.5rem 0.8rem;
    align-items: end;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.75rem 0.9rem;
}
.browse-filter-form label:first-of-type { grid-column: span 2; }
.browse-filter-form label {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    color: var(--muted);
    gap: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.browse-filter-form input[type=text],
.browse-filter-form select {
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.35rem 0.5rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--fg);
    background: var(--card);
    text-transform: none;
    letter-spacing: 0;
}
.browse-filter-actions { display: flex; gap: 0.5rem; align-items: center; }

.browse-list { list-style: none; padding: 0; margin: 0; }
.browse-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.browse-item:last-child { border-bottom: none; }
.browse-item.closed { opacity: 0.55; }
.browse-item.decided-not_interested { opacity: 0.6; }
.browse-item-main { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; flex: 1 1 60%; min-width: 16rem; }
.browse-title { font-weight: 600; color: var(--fg); text-decoration: none; }
.browse-title:hover { text-decoration: underline; }
.browse-item-actions { display: inline-flex; align-items: center; gap: 0.6rem; }
.browse-rate-form { display: inline-flex; gap: 0.25rem; }
.browse-rate-form button { padding: 0.15rem 0.55rem; font-size: 0.85rem; }
.status-pill {
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 2px;
    background: #f3f3f3;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status-pill.closed { background: #f5e8e8; color: #a44; }
.decision-pill {
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.decision-pill.decision-interested     { background: #f0faf4; color: var(--accent); border: 1px solid #c8e6d4; }
.decision-pill.decision-maybe          { background: #fffbe8; color: var(--warn);   border: 1px solid #f0e0a0; }
.decision-pill.decision-not_interested { background: #f5e8e8; color: var(--crit);   border: 1px solid #e8c4c4; }

/* AI fit-score pill on browse rows */
.fit-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    border: 1px solid;
    margin-right: 0.2rem;
}
.fit-pill.fit-high { color: var(--accent); background: #f0faf4; border-color: #c8e6d4; }
.fit-pill.fit-mid  { color: var(--warn);   background: #fffbe8; border-color: #f0e0a0; }
.fit-pill.fit-low  { color: var(--muted);  background: #f3f3f3; border-color: var(--border); }

.browse-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
}
.browse-pagination a { color: var(--info); text-decoration: none; }
.browse-pagination a:hover { text-decoration: underline; }

.secondary-link {
    color: var(--muted);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.4rem 0.85rem;
    font-size: 0.9rem;
}
.secondary-link:hover { color: var(--fg); border-color: var(--fg); }

/* Pipeline list on opportunities page */
.pipeline-list { list-style: none; padding: 0; margin: 0; }
.pipeline-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
}
.pipeline-item:last-child { border-bottom: none; }
.pipeline-title { font-weight: 600; }

/* Status badge (email list) */
.status-badge { font-size: 0.75rem; font-weight: 600; }
.status-draft    { color: var(--muted); }
.status-sent     { color: var(--accent); }
.status-approved { color: var(--info); }
.status-rejected { color: var(--crit); }

/* Offer form grid */
.offer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.offer-grid label { display: flex; flex-direction: column; font-size: 0.9rem; font-weight: 500; gap: 0.25rem; }
.offer-grid input {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.9rem;
    width: 100%;
}
.offer-textarea-label {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    font-weight: 500;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

/* Activity timeline */
.timeline-list { list-style: none; padding: 0.5rem 0 0; margin: 0; }
.timeline-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-date  { min-width: 5.5rem; color: var(--muted); }
.timeline-note  { font-style: italic; }

/* ── Markdown rendered body ───────────────────────────────────── */
.markdown-body { font-size: 0.95rem; line-height: 1.65; }
.markdown-body h1 { font-size: 1.25rem; margin: 1.25rem 0 0.4rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; }
.markdown-body h2 { font-size: 1.05rem; margin: 1rem 0 0.35rem; }
.markdown-body h3 { font-size: 0.95rem; margin: 0.85rem 0 0.25rem; }
.markdown-body p  { margin: 0.4rem 0; }
.markdown-body ul, .markdown-body ol { padding-left: 1.5rem; margin: 0.3rem 0; }
.markdown-body li { margin: 0.2rem 0; }
.markdown-body strong { font-weight: 600; }
.markdown-body em { font-style: italic; }
.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.markdown-body code { font-family: monospace; font-size: 0.88em; background: #f3f3f3; padding: 0.1em 0.35em; border-radius: 3px; }
.draft-rendered { padding: 0.75rem 0; }

/* Next-steps call-out */
.next-steps { background: #f0fdf4; border: 1px solid #bbf7d0; }
.next-steps h3 { color: #166534; }
/* .button.secondary — outline variant that mirrors landing .btn-outline */
.button.secondary {
    background: #ffffff;
    color: var(--fg);
    border: 1px solid var(--border);
    box-shadow: none;
}
.button.secondary:hover {
    background: var(--brand-soft);
    border-color: var(--brand-soft-2);
    color: var(--brand-purple);
}

/* Flash messages ─────────────────────────────────────────────── */
.flash-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.flash {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 0.95rem;
    line-height: 1.4;
}
.flash-success {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}
.flash-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}
.flash-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}
.flash-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

/* Confirm dialog ────────────────────────────────────────────────── */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    backdrop-filter: blur(2px);
}
.confirm-overlay[hidden] { display: none; }
.confirm-dialog {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.75rem 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    max-width: 22rem;
    width: 90%;
}
.confirm-msg {
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--fg);
}
.confirm-buttons {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
}
/* Neutral, no brand purple — matches modern system dialogs.
   !important beats the app's default button styling (gradients etc.). */
.confirm-buttons button {
    padding: 0.5rem 1.1rem !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    background-image: none !important;
    min-width: 5rem !important;
}
.confirm-cancel {
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #cfcfcf !important;
}
.confirm-cancel:hover {
    background: #f3f3f3 !important;
    border-color: #b5b5b5 !important;
}
.confirm-ok {
    background: #333 !important;
    color: #fff !important;
    border: 1px solid #333 !important;
}
.confirm-ok:hover {
    background: #000 !important;
    border-color: #000 !important;
}
.confirm-ok:focus-visible,
.confirm-cancel:focus-visible {
    outline: 2px solid #999 !important;
    outline-offset: 2px !important;
}
/* Destructive variant — opt in with data-confirm-danger="1" (sets .danger). */
.confirm-ok.danger {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}
.confirm-ok.danger:hover {
    background: #991b1b !important;
    border-color: #991b1b !important;
}

/* Loading overlay ──────────────────────────────────────────────── */
#loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}
#loading-overlay[hidden] { display: none; }
.loading-card {
    background: var(--card);
    border-radius: 8px;
    padding: 1.75rem 2.25rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    text-align: center;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.loading-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
    font-weight: 600;
    font-size: 1.05rem;
}
.loading-sub {
    max-width: 22rem;
}

/* Inline mini-spinner for buttons (optional helper) */
/* Relationship radios on ingest forms ───────────────────────── */
.relationship-fieldset {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem 1rem 1rem;
    margin: 0.75rem 0 1rem;
    background: var(--card);
}
.relationship-fieldset legend {
    padding: 0 0.4rem;
    font-weight: 600;
    font-size: 0.95rem;
}
.radio-label {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.45rem 0.25rem;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.4;
}
.radio-label:hover { background: rgba(0,0,0,0.025); }
.radio-label input[type=radio] { margin-top: 0.25rem; }
.radio-label span { flex: 1; }

/* Apply companion page ──────────────────────────────────────── */
main:has(.apply-grid) { max-width: 1400px; }

.apply-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}
.apply-title h2 { margin: 0 0 0.4rem; }
.apply-actions { text-align: right; flex-shrink: 0; }
.apply-open-btn {
    font-size: 1.05rem;
    padding: 0.7rem 1.2rem;
}

.apply-grid {
    display: grid;
    grid-template-columns: 280px 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 6rem;  /* leave room for sticky footer */
}
@media (max-width: 1100px) {
    .apply-grid { grid-template-columns: 1fr; }
}

.apply-col {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.apply-col h3 {
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.apply-col h4 { margin: 0.5rem 0 0.4rem; font-size: 0.95rem; color: var(--muted); }

.apply-fields { font-size: 0.92rem; }

.copy-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-bottom: 0.25rem;
}
.copy-row:hover, .copy-row:focus {
    background: rgba(10, 165, 85, 0.06);
    border-color: rgba(10, 165, 85, 0.3);
    outline: none;
}
.copy-label {
    color: var(--muted);
    font-size: 0.8rem;
    min-width: 5.5rem;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.copy-value {
    flex: 1;
    word-break: break-word;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.copy-row-block { flex-direction: column; align-items: stretch; }
.copy-row-block .copy-value { font-size: 0.9rem; line-height: 1.45; }
.copy-hint {
    color: var(--muted);
    font-size: 0.75rem;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.copy-hint.copied { color: var(--accent); font-weight: 600; }

.apply-section {
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.apply-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.75rem;
    background: rgba(0,0,0,0.025);
    border-bottom: 1px solid var(--border);
    gap: 0.5rem;
}
.apply-section-heading {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--fg);
}
.apply-section .markdown-body { padding: 0.75rem 1rem; }
button.copied { background: var(--accent) !important; color: white !important; }

/* Sticky footer */
.apply-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
    padding: 0.75rem 1.5rem;
    z-index: 50;
}
.apply-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.apply-confirm-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: flex-end;
}
.apply-note {
    flex: 0 1 24rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.9rem;
}
.apply-confirm-btn {
    background: var(--accent);
    color: white;
    border: none;
    padding: 0.65rem 1.1rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95rem;
}
.apply-confirm-btn:hover { opacity: 0.9; }

/* Send-mode badge ──────────────────────────────────────────── */
.send-mode {
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: help;
    white-space: nowrap;
    align-self: flex-start;
}
.send-mode-live {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}
.send-mode-preview {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

/* Simulate-inbound section ─────────────────────────────────── */
.sim-section {
    border-left: 3px solid #fbbf24;
    background: #fffdf6;
}
.sim-section textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
}
.advance-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.92rem;
}
.advance-toggle input { margin: 0; }

/* Timeline notes */
.timeline-note { display: block; }
.timeline-note-content {
    margin-top: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1.45;
    white-space: pre-wrap;
}
.timeline-note-kind { display: inline-block; }
.sim-badge {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 3px;
    padding: 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    margin-right: 0.4rem;
    letter-spacing: 0.05em;
}
.timeline-note { word-break: break-word; }

/* Settings page ────────────────────────────────────────────── */
.settings-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}
.settings-block h4 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.counts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
}

.danger-zone {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
}
.danger-zone h3 {
    margin-top: 0;
    color: #991b1b;
}
.danger-block {
    background: white;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}
.danger-block-strong {
    border-color: #ef4444;
    border-width: 2px;
}
.danger-block h4 { margin: 0 0 0.4rem; color: #991b1b; }
.danger-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}
.danger-form input[type=text] {
    flex: 1 1 16rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9rem;
}
.danger-btn {
    background: #dc2626;
    color: white;
    border: none;
    padding: 0.55rem 1.1rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}
.danger-btn:hover { background: #b91c1c; }
.danger-btn-strong { background: #991b1b; }
.danger-btn-strong:hover { background: #7f1d1d; }

.spinner-inline {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: -0.1em;
    margin-right: 0.4em;
}

/* ─── App footer (every page) ────────────────────────────────── */
.app-footer {
    margin-top: 3rem;
    padding: 1.1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--card);
}
.app-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
    color: var(--muted);
    font-size: 0.82rem;
}
.app-footer-link {
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
}
.app-footer-link:hover { color: var(--brand-purple); }
.app-footer-sep { margin: 0 0.5rem; color: var(--muted-soft); }
.app-footer-copy { display: block; text-align: center; color: var(--muted); font-size: 0.82rem; margin-top: 0.6rem; }

/* ─── WIZYBIT suite cross-sell — rich 2-card row rendered in every
   page's footer via templates/_partials/wzb_suite_footer.html.  Fallback
   hex values keep the row looking right regardless of which theme-var
   set the host page defines. ─────────────────────────────────────── */
.wzb-suite-row { margin: 0 0 1.5rem; padding: 1.75rem 1rem; border-top: 1px solid var(--line, var(--border, #e2e8f0)); border-bottom: 1px solid var(--line, var(--border, #e2e8f0)); }
.wzb-suite-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-strong, var(--brand-purple, #0e7490)); text-align: center; margin: 0 0 0.3rem; }
.wzb-suite-head { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink, var(--fg, #0f172a)); margin: 0 0 1.1rem; text-align: center; }
.wzb-suite-cards { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.wzb-suite-card { display: flex; align-items: flex-start; gap: 0.9rem; min-width: 300px; max-width: 460px; flex: 1 1 340px; padding: 1rem 1.1rem; border: 1px solid var(--line, var(--border, #e2e8f0)); border-radius: 12px; background: #fff; text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.wzb-suite-card:hover { border-color: var(--brand-strong, var(--brand-purple, #0e7490)); box-shadow: 0 4px 14px rgba(14,116,144,0.12); transform: translateY(-1px); }
.wzb-suite-thumb { flex: 0 0 auto; width: 56px; height: 56px; }
.wzb-suite-thumb svg { width: 100%; height: 100%; display: block; border-radius: 12px; box-shadow: 0 2px 8px rgba(15,23,42,0.15); }
.wzb-suite-body { flex: 1 1 auto; min-width: 0; }
.wzb-suite-name { font-weight: 700; font-size: 1rem; margin: 0 0 0.3rem; color: var(--ink, var(--fg, #0f172a)); }
.wzb-suite-tag { font-size: 0.85rem; color: var(--ink, var(--fg, #0f172a)); line-height: 1.45; margin: 0 0 0.6rem; }
.wzb-suite-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.wzb-suite-chips span { font-size: 0.7rem; font-weight: 600; padding: 0.14rem 0.55rem; border-radius: 999px; background: #ecfeff; color: var(--brand-strong, var(--brand-purple, #0e7490)); border: 1px solid #a5f3fc; letter-spacing: 0.01em; }
.wzb-suite-arrow { font-size: 1.2rem; color: var(--brand-strong, var(--brand-purple, #0e7490)); flex: 0 0 auto; font-weight: 700; }