/* The whole page stylesheet. Originally extracted from the UX mockup's
     views.clj and carried over wholesale; the mockup itself was deleted on
     2026-07-28 (branch `archive/mockup`). Served as a static asset via
     ring/wrap-resource from resources/public. Grouped roughly:
       1. Base / dev-mode strip / top-nav / auth-modal / setup grouping /
          recent-activity wrap  (post-restructure additions)
       2. Legacy persona-bar / persona-body / reset-btn rules — the old
          persona-bar and Reset-in-body affordances no longer render, so
          these rules are dead in practice. Left in place because chopping
          them out of a 4000-line stylesheet is more risk than reward, and
          they don't match any element in the current markup.
       3. Section-specific rules for each S-story (S2 résumé, S3 prefs,
          S5 nudge, S6 ATS overlay, S7 queue, S8 rejected,
          S9 fill-mode, S10 pause banner, S13 recent
          activity, S15 applications, S16 notes). */
  :root { color-scheme: light dark; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.5;
  }
  /* Main content column. Dev-mode strip + top-nav sit outside this so they
     can span the full page width. */
  .page {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 6rem;
  }

  /* ---------------------------------------------------------------------
     Dev-mode strip — persona selector + Reset persona button. Full-width,
     dashed red border so it reads unambiguously as a dev-only chrome
     element and can never be mistaken for a real product surface.
  --------------------------------------------------------------------- */
  .dev-strip {
    width: 100%;
    box-sizing: border-box;
    background: repeating-linear-gradient(
      -45deg,
      rgba(220, 38, 38, 0.05),
      rgba(220, 38, 38, 0.05) 12px,
      rgba(220, 38, 38, 0.09) 12px,
      rgba(220, 38, 38, 0.09) 24px
    );
    border-bottom: 2px dashed #dc2626;
    padding: .5rem 1.25rem;
  }
  @media (prefers-color-scheme: dark) {
    .dev-strip {
      background: repeating-linear-gradient(
        -45deg,
        rgba(239, 68, 68, 0.08),
        rgba(239, 68, 68, 0.08) 12px,
        rgba(239, 68, 68, 0.14) 12px,
        rgba(239, 68, 68, 0.14) 24px
      );
      border-bottom-color: #ef4444;
    }
  }
  .dev-strip-inner {
    /* R6: dev-only chrome — spans the full viewport width, doesn't have
       to respect the main content column's max-width. Single line on any
       normal desktop width (`flex-wrap: nowrap`). Three flex items: badge
       (left), persona-buttons cluster (middle), Reset button (right).
       `justify-content: space-between` pushes badge and reset to the
       edges; the middle cluster fills the gap. */
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .dev-strip-inner > .dev-strip-personas {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex: 1 1 auto;
    justify-content: center;
    flex-wrap: wrap;
    min-width: 0;
  }
  .dev-strip-inner > .badge,
  .dev-strip-inner > .reset-btn { flex: 0 0 auto; }
  .dev-strip .badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #b91c1c;
    background: #fff;
    border: 1px dashed #dc2626;
    padding: .1rem .45rem;
    border-radius: .25rem;
    white-space: nowrap;
  }
  @media (prefers-color-scheme: dark) {
    .dev-strip .badge {
      background: #1a0f0f;
      color: #fca5a5;
      border-color: #ef4444;
    }
  }
  .dev-strip .badge::before { content: "⚠ "; }
  .dev-strip .persona-btn {
    font: inherit;
    padding: .3rem .7rem;
    border-radius: .3rem;
    border: 1px solid #c9c9d0;
    background: white;
    color: inherit;
    cursor: pointer;
    font-size: .875rem;
  }
  @media (prefers-color-scheme: dark) {
    .dev-strip .persona-btn { background: #2a2a30; border-color: #40404a; }
  }
  .dev-strip .persona-btn:hover { border-color: #6366f1; }
  .dev-strip .persona-btn.active {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
  }
  .dev-strip .persona-btn .price {
    display: inline-block;
    margin-left: .25rem;
    opacity: .75;
    font-size: .8rem;
  }
  .dev-strip .reset-btn {
    /* R5: no more margin-left:auto — the parent .dev-strip-inner uses
       justify-content:space-between to push this cluster to the right. */
    font: inherit;
    font-size: .8125rem;
    padding: .3rem .7rem;
    border-radius: .3rem;
    border: 1px dashed #dc2626;
    background: transparent;
    color: #b91c1c;
    cursor: pointer;
  }
  .dev-strip .reset-btn:hover { background: rgba(220,38,38,.08); }
  @media (prefers-color-scheme: dark) {
    .dev-strip .reset-btn { color: #fca5a5; border-color: #ef4444; }
    .dev-strip .reset-btn:hover { background: rgba(239,68,68,.12); }
  }

  /* ---------------------------------------------------------------------
     Top navigation — real site header. Logo on the left, auth/settings
     controls on the right. Sits below the dev-mode strip.
  --------------------------------------------------------------------- */
  .top-nav {
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #d9d9de;
    background: white;
  }
  @media (prefers-color-scheme: dark) {
    .top-nav { background: #14141a; border-bottom-color: #2f2f36; }
  }
  .top-nav-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .top-nav .logo {
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -.01em;
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: baseline;
    gap: .05rem;
  }
  .top-nav .logo .auto  { color: #6366f1; }
  .top-nav .logo .apply { color: inherit; }
  .top-nav .nav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    position: relative;
  }
  .top-nav .nav-btn {
    font: inherit;
    padding: .4rem .8rem;
    border-radius: .375rem;
    border: 1px solid #c9c9d0;
    background: white;
    color: inherit;
    cursor: pointer;
    font-size: .875rem;
  }
  @media (prefers-color-scheme: dark) {
    .top-nav .nav-btn { background: #2a2a30; border-color: #40404a; }
  }
  .top-nav .nav-btn:hover { border-color: #6366f1; color: #4f52d6; }
  @media (prefers-color-scheme: dark) {
    .top-nav .nav-btn:hover { color: #a5a7f5; }
  }
  .top-nav .nav-btn.primary {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
  }
  .top-nav .nav-btn.primary:hover {
    background: #4f52d6;
    border-color: #4f52d6;
    color: white;
  }
  .top-nav .settings-btn {
    font: inherit;
    padding: .4rem .75rem;
    border-radius: .375rem;
    border: 1px solid #c9c9d0;
    background: white;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    position: relative;
    font-size: .875rem;
  }
  @media (prefers-color-scheme: dark) {
    .top-nav .settings-btn { background: #2a2a30; border-color: #40404a; }
  }
  .top-nav .settings-btn:hover { border-color: #6366f1; color: #4f52d6; }
  @media (prefers-color-scheme: dark) {
    .top-nav .settings-btn:hover { color: #a5a7f5; }
  }
  .top-nav .settings-btn .gear {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    opacity: .8;
  }
  .top-nav .settings-btn .missing-dot {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: #e0754c;
    box-shadow: 0 0 0 2px rgba(224,117,76,.2);
    margin-left: .1rem;
  }
  @media (prefers-color-scheme: dark) {
    .top-nav .settings-btn .missing-dot {
      background: #ff8a5c;
      box-shadow: 0 0 0 2px rgba(255,138,92,.2);
    }
  }

  /* User menu — native <details>-based popover. */
  .user-menu {
    position: relative;
  }
  .user-menu > summary {
    font: inherit;
    padding: .4rem .75rem;
    border-radius: .375rem;
    border: 1px solid #c9c9d0;
    background: white;
    color: inherit;
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .875rem;
  }
  .user-menu > summary::-webkit-details-marker { display: none; }
  @media (prefers-color-scheme: dark) {
    .user-menu > summary { background: #2a2a30; border-color: #40404a; }
  }
  .user-menu > summary:hover { border-color: #6366f1; }
  .user-menu > summary::after {
    content: "▾";
    opacity: .55;
    font-size: .75rem;
    margin-left: .15rem;
  }
  .user-menu[open] > summary::after { content: "▴"; }
  .user-menu .menu-panel {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    min-width: 10rem;
    background: white;
    border: 1px solid #d9d9de;
    border-radius: .375rem;
    box-shadow: 0 6px 24px rgba(0,0,0,.09);
    padding: .3rem;
    z-index: 60;
  }
  @media (prefers-color-scheme: dark) {
    .user-menu .menu-panel {
      background: #1e1e26;
      border-color: #2f2f36;
      box-shadow: 0 6px 24px rgba(0,0,0,.4);
    }
  }
  .user-menu .menu-panel button {
    font: inherit;
    display: block;
    width: 100%;
    text-align: left;
    padding: .4rem .55rem;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: .3rem;
    font-size: .875rem;
  }
  .user-menu .menu-panel button:hover {
    background: #f4f4f7;
  }
  @media (prefers-color-scheme: dark) {
    .user-menu .menu-panel button:hover { background: #2a2a30; }
  }

  /* ---------------------------------------------------------------------
     Placeholder auth modal (#auth-modal). Reuses the ATS overlay backdrop
     grammar — centered card with a Close button.
  --------------------------------------------------------------------- */
  #auth-modal:empty { display: none; }
  #auth-modal .backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    display: grid;
    place-items: center;
    z-index: 80;
  }
  #auth-modal .card {
    background: white;
    color: inherit;
    border-radius: .5rem;
    border: 1px solid #d9d9de;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    padding: 1.5rem 1.75rem;
    max-width: 26rem;
    width: calc(100vw - 2rem);
  }
  @media (prefers-color-scheme: dark) {
    #auth-modal .card { background: #1a1a20; border-color: #2f2f36; }
  }
  #auth-modal .card h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
  #auth-modal .card p { margin: 0 0 1rem; opacity: .85; }
  #auth-modal .card .actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
  }
  #auth-modal .card button {
    font: inherit;
    padding: .4rem .9rem;
    border-radius: .3rem;
    border: 1px solid #c9c9d0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  #auth-modal .card button:hover { background: #f4f4f7; }
  @media (prefers-color-scheme: dark) {
    #auth-modal .card button { border-color: #40404a; }
    #auth-modal .card button:hover { background: #2a2a30; }
  }
  /* Auth modal — form / sent two-state swap (R2). */
  #auth-modal .auth-card .auth-sent-state { display: none; }
  #auth-modal .auth-card.sent .auth-form-state { display: none; }
  #auth-modal .auth-card.sent .auth-sent-state { display: block; }
  #auth-modal .auth-card p.hint { opacity: .75; font-size: .9rem; }
  #auth-modal .auth-card input[type=email] {
    width: 100%;
    box-sizing: border-box;
    padding: .55rem .7rem;
    border-radius: .35rem;
    border: 1px solid #c9c9d0;
    background: white;
    color: inherit;
    font: inherit;
    margin: .35rem 0 1rem;
  }
  @media (prefers-color-scheme: dark) {
    #auth-modal .auth-card input[type=email] {
      background: #10101a; border-color: #40404a;
    }
  }
  #auth-modal .auth-card button.primary {
    background: #16a34a;
    color: white;
    border-color: #16a34a;
    font-weight: 600;
  }
  #auth-modal .auth-card button.primary:hover { background: #15803d; border-color: #15803d; }
  #auth-modal .auth-card strong.sent-email { color: #16a34a; }

  /* ---------------------------------------------------------------------
     Auth-modal 'check your email' state extras (R5). The confirmation
     card now shows two buttons — Close (secondary) + Simulate email
     link click (primary). The primary one flips the persona server-
     side; the mockup-hint one-liner just above the actions row labels
     the shortcut as mockup theater, not a magic user experience.
  --------------------------------------------------------------------- */
  #auth-modal .auth-card p.mockup-hint {
    margin: .5rem 0 1rem;
    padding: .55rem .7rem;
    background: #f4f4f7;
    border-left: 3px solid #94949e;
    border-radius: .25rem;
    font-size: .82rem;
    opacity: .8;
  }
  @media (prefers-color-scheme: dark) {
    #auth-modal .auth-card p.mockup-hint {
      background: #262632;
      border-left-color: #6a6a7a;
    }
  }

  /* ---------------------------------------------------------------------
     R5: anonymous / logged-out banner. Same amber-accent grammar as
     the new-user banner so a demo viewer reads the two states as
     related, but with a distinct id + copy so switching between them
     in the dev strip is legible as two different states rather than
     the same banner in two places.
  --------------------------------------------------------------------- */
  #anonymous-banner {
    margin-bottom: 1.25rem;
    padding: 1rem 1.15rem;
    /* Slightly cooler amber than #new-user-banner (more toward gold),
       so the two banners share a family but aren't identical.
       R10: content is centered — headline, sub, and CTA read as a
       single centered call-to-action rather than a left-aligned
       advisory. */
    border: 1px solid #d9a34a;
    border-left: 4px solid #b78228;
    background: #fdf5e4;
    border-radius: .375rem;
    text-align: center;
  }
  @media (prefers-color-scheme: dark) {
    #anonymous-banner {
      background: #241a08;
      border-color: #6a4a18;
      border-left-color: #d9a34a;
    }
  }
  #anonymous-banner .banner-body h3 {
    margin: 0 0 .3rem;
    font-size: 1rem;
    color: #7c5010;
  }
  @media (prefers-color-scheme: dark) {
    #anonymous-banner .banner-body h3 { color: #e8c07a; }
  }
  #anonymous-banner .banner-body p {
    margin: 0 0 .75rem;
    font-size: .9rem;
    opacity: .85;
  }
  #anonymous-banner .banner-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  #anonymous-banner .banner-actions button {
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    padding: .4rem .9rem;
    border-radius: .3rem;
    border: 1px solid #b78228;
    background: white;
    color: #7c5010;
    cursor: pointer;
  }
  @media (prefers-color-scheme: dark) {
    #anonymous-banner .banner-actions button {
      background: #1c1508;
      border-color: #a56b1c;
      color: #e8c07a;
    }
  }
  #anonymous-banner .banner-actions button.primary {
    background: #b78228;
    border-color: #b78228;
    color: white;
  }
  #anonymous-banner .banner-actions button.primary:hover {
    background: #915f18;
    border-color: #915f18;
  }
  #anonymous-banner .banner-actions button:not(.primary):hover {
    background: #fdf1d5;
  }
  @media (prefers-color-scheme: dark) {
    #anonymous-banner .banner-actions button:not(.primary):hover {
      background: #241a08;
    }
  }

  /* ---------------------------------------------------------------------
     R5: upgrade view. Full-content-area page rendered in place of the
     workspace when :showing = :upgrade. Reuses the pricing cards layout
     that used to live on the logged-out landing.
  --------------------------------------------------------------------- */
  #persona-body.upgrade-view {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  #persona-body.upgrade-view .upgrade-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }
  #persona-body.upgrade-view .upgrade-header-copy {
    flex: 1;
  }
  #persona-body.upgrade-view .upgrade-header h2 {
    margin: 0 0 .2rem;
    font-size: 1.35rem;
  }
  #persona-body.upgrade-view .current-caption {
    margin: 0;
    font-size: .9rem;
    opacity: .75;
  }
  #persona-body.upgrade-view .current-caption strong {
    color: #4f52d6;
  }
  @media (prefers-color-scheme: dark) {
    #persona-body.upgrade-view .current-caption strong { color: #a5a7f5; }
  }
  #persona-body.upgrade-view .back-btn {
    font: inherit;
    font-size: .875rem;
    padding: .4rem .8rem;
    border-radius: .3rem;
    border: 1px solid #c9c9d0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  #persona-body.upgrade-view .back-btn:hover {
    background: #f4f4f7;
    border-color: #a9a9b0;
  }
  @media (prefers-color-scheme: dark) {
    #persona-body.upgrade-view .back-btn { border-color: #40404a; }
    #persona-body.upgrade-view .back-btn:hover { background: #2a2a30; }
  }
  #persona-body.upgrade-view .upgrade-footnote {
    margin: 0;
    padding: .75rem 1rem;
    background: #f7f7fa;
    border-radius: .375rem;
    font-size: .875rem;
    opacity: .8;
    line-height: 1.5;
  }
  @media (prefers-color-scheme: dark) {
    #persona-body.upgrade-view .upgrade-footnote {
      background: #1e1e26;
    }
  }
  #persona-body.upgrade-view .upgrade-back-row {
    display: flex;
    justify-content: center;
    margin-top: .5rem;
  }

  /* ---------------------------------------------------------------------
     Pricing cards. Rendered inside the upgrade view (and potentially
     other places later). Three side-by-side, stacking on narrow
     screens. Free is visually recessive, paid tiers prominent, Maintain
     highlighted as recommended. R5 generalized: the same grammar used
     to be scoped to `#persona-body.logged-out` for the marketing landing;
     that landing is gone, so these rules live under `#persona-body` so
     the upgrade view can pick them up regardless of persona.
  --------------------------------------------------------------------- */
  #persona-body .plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    /* Small top padding gives the .plan-badge headroom above Maintain. */
    padding-top: .75rem;
  }
  @media (max-width: 640px) {
    #persona-body .plan-grid { grid-template-columns: 1fr; }
  }
  #persona-body .plan-card {
    position: relative;
    display: grid;
    gap: .25rem;
    padding: 1.25rem 1.1rem 1.35rem;
    border: 1px solid #d9d9de;
    border-radius: .5rem;
    background: white;
    text-align: left;
  }
  @media (prefers-color-scheme: dark) {
    #persona-body .plan-card {
      background: #1a1a20;
      border-color: #2f2f36;
    }
  }
  #persona-body .plan-card .plan-name {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .65;
    font-weight: 600;
  }
  #persona-body .plan-card .plan-price {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: .1rem;
    line-height: 1.1;
  }
  #persona-body .plan-card .plan-volume {
    font-size: .875rem;
    opacity: .75;
    margin-top: .1rem;
  }
  #persona-body .plan-card .plan-tagline {
    margin: .65rem 0 0;
    font-size: .8125rem;
    opacity: .7;
    line-height: 1.4;
  }
  #persona-body .plan-card .plan-features {
    list-style: none;
    padding: 0;
    margin: .75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
  }
  #persona-body .plan-card .plan-features li {
    font-size: .82rem;
    line-height: 1.4;
    padding-left: 1rem;
    position: relative;
    opacity: .85;
  }
  #persona-body .plan-card .plan-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #16a34a;
    font-weight: 700;
  }
  /* Free tier: recessive — grey, muted. */
  #persona-body .plan-card.plan-free {
    background: transparent;
    opacity: .9;
  }
  #persona-body .plan-card.plan-free .plan-price {
    font-weight: 600;
    opacity: .85;
  }
  /* Maintain (recommended): indigo ring + badge. */
  #persona-body .plan-card.recommended {
    border-color: #6366f1;
    box-shadow: 0 0 0 1px #6366f1 inset,
                0 8px 20px rgba(99,102,241,.08);
  }
  @media (prefers-color-scheme: dark) {
    #persona-body .plan-card.recommended {
      background: #1c1d2c;
      box-shadow: 0 0 0 1px #6366f1 inset,
                  0 8px 20px rgba(99,102,241,.14);
    }
  }
  #persona-body .plan-card .plan-badge {
    position: absolute;
    top: -.55rem;
    left: 50%;
    transform: translateX(-50%);
    background: #6366f1;
    color: white;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
  }
  #persona-body .plan-card.plan-maintain .plan-price {
    color: #4f52d6;
  }
  @media (prefers-color-scheme: dark) {
    #persona-body .plan-card.plan-maintain .plan-price {
      color: #a5a7f5;
    }
  }
  /* R5: 'below current' tier — greyed out on the upgrade view because
     downgrades aren't offered here. Still visible so the user sees
     what they already have; muted so it doesn't compete with the
     upgrade CTAs above. */
  #persona-body .plan-card.below-current {
    opacity: .55;
  }
  /* Action slot at the bottom of a plan card on the upgrade view. */
  #persona-body .plan-card .plan-action {
    margin-top: 1rem;
    display: flex;
  }
  #persona-body .plan-card .plan-action .upgrade-to {
    flex: 1;
    font: inherit;
    font-weight: 600;
    padding: .55rem .85rem;
    border-radius: .35rem;
    border: 1px solid #16a34a;
    background: #16a34a;
    color: white;
    cursor: pointer;
    font-size: .9rem;
  }
  #persona-body .plan-card .plan-action .upgrade-to:hover {
    background: #15803d;
    border-color: #15803d;
  }
  /* Recommended card gets the indigo primary treatment, not green. */
  #persona-body .plan-card.recommended .plan-action .upgrade-to {
    background: #6366f1;
    border-color: #6366f1;
  }
  #persona-body .plan-card.recommended .plan-action .upgrade-to:hover {
    background: #4f52d6;
    border-color: #4f52d6;
  }
  #persona-body .plan-card .plan-action .current-plan {
    flex: 1;
    text-align: center;
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .55rem .85rem;
    border-radius: .35rem;
    background: #e6e7fb;
    color: #4f52d6;
    border: 1px solid #c9caf5;
  }
  @media (prefers-color-scheme: dark) {
    #persona-body .plan-card .plan-action .current-plan {
      background: #23253a;
      border-color: #3a3d5f;
      color: #a5a7f5;
    }
  }
  #persona-body .plan-card .plan-action .plan-included {
    flex: 1;
    text-align: center;
    font-size: .82rem;
    padding: .55rem .85rem;
    opacity: .7;
    font-style: italic;
  }

  /* ---------------------------------------------------------------------
     Setup grouping — wraps Résumé / Preferences / Fill mode
     under a single heading. Also carries the small compact strip listing
     résumé ✓ · prefs ✓ · ext ✓ · fill mode.
  --------------------------------------------------------------------- */
  #setup {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #d9d9de;
  }
  @media (prefers-color-scheme: dark) {
    #setup { border-top-color: #2f2f36; }
  }
  #setup > .setup-head {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 0 0 .5rem;
  }
  #setup > .setup-head h2 {
    margin: 0;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .7;
  }
  #setup > .setup-head .compact-status {
    font-size: .8125rem;
    opacity: .75;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
  }
  #setup > .setup-head .compact-status .sep { opacity: .35; }
  #setup > .setup-head .compact-status .item.ok       { color: #1e5a2e; }
  #setup > .setup-head .compact-status .item.missing  { opacity: .55; }
  @media (prefers-color-scheme: dark) {
    #setup > .setup-head .compact-status .item.ok { color: #b8dfc2; }
  }
  /* Setup children — Résumé / Preferences / Fill mode — no
     longer need their own top border/margin since #setup already carries
     one. Override the older per-section rules. */
  #setup > #prefs,
  #setup > #resume,
  #setup > #fill-mode {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #d9d9de;
  }
  @media (prefers-color-scheme: dark) {
    #setup > #prefs,
    #setup > #resume,
    #setup > #fill-mode {
      border-top-color: #2f2f36;
    }
  }

  /* ---------------------------------------------------------------------
     Recent activity collapsed <details> at page bottom.
  --------------------------------------------------------------------- */
  #recent-activity-wrap {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid #d9d9de;
  }
  @media (prefers-color-scheme: dark) {
    #recent-activity-wrap { border-top-color: #2f2f36; }
  }
  #recent-activity-wrap > summary {
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    opacity: .8;
    list-style: none;
    padding: .25rem 0;
  }
  #recent-activity-wrap > summary::-webkit-details-marker { display: none; }
  #recent-activity-wrap > summary::before {
    content: "▶ ";
    display: inline-block;
    width: 1.1em;
    opacity: .55;
  }
  #recent-activity-wrap[open] > summary::before { content: "▼ "; }
  /* Nested #recent-activity keeps the existing styles; kill the top border
     because the wrap already provides one and the section content already
     has its own headings. */
  #recent-activity-wrap #recent-activity {
    margin-top: .75rem;
  }

  header.persona-bar {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    background: #f4f4f7;
    border: 1px solid #d9d9de;
    border-radius: .5rem;
    margin-bottom: 2rem;
  }
  @media (prefers-color-scheme: dark) {
    header.persona-bar { background: #1e1e22; border-color: #2f2f36; }
  }
  header.persona-bar .label {
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    opacity: .7;
    margin-right: .25rem;
  }
  /* S23: Settings entry point pinned to the right of the persona bar. Uses
     margin-left: auto so it sits opposite the persona buttons regardless of
     how many personas render. Visible from anywhere on the dashboard — the
     whole point of S23 is that Preferences is a first-class settings
     surface, not a section buried at the bottom of a scroll. */
  header.persona-bar .settings-btn {
    font: inherit;
    padding: .4rem .8rem;
    border-radius: .375rem;
    border: 1px solid #c9c9d0;
    background: white;
    color: inherit;
    cursor: pointer;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    position: relative;
  }
  @media (prefers-color-scheme: dark) {
    header.persona-bar .settings-btn { background: #2a2a30; border-color: #40404a; }
  }
  header.persona-bar .settings-btn:hover {
    border-color: #6366f1;
    color: #4f52d6;
  }
  @media (prefers-color-scheme: dark) {
    header.persona-bar .settings-btn:hover { color: #a5a7f5; }
  }
  header.persona-bar .settings-btn .gear {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    opacity: .8;
  }
  /* S23: small red dot indicator when prefs haven't been saved yet on the
     current persona. Nudge without nagging — same idea as the queue's empty
     state pointing at prefs, just from the top of the page too. */
  header.persona-bar .settings-btn .missing-dot {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: #e0754c;
    box-shadow: 0 0 0 2px rgba(224,117,76,.2);
    margin-left: .1rem;
  }
  @media (prefers-color-scheme: dark) {
    header.persona-bar .settings-btn .missing-dot {
      background: #ff8a5c;
      box-shadow: 0 0 0 2px rgba(255,138,92,.2);
    }
  }
  /* S23: gentle flash on the Preferences section when the Settings entry
     point lands the user there. Runs alongside the smooth scroll so the
     target section reads as 'the thing you were sent to'. */
  @keyframes prefs-jumped-flash {
    0%   { box-shadow: 0 0 0 0 rgba(99,102,241,.35); }
    30%  { box-shadow: 0 0 0 8px rgba(99,102,241,.18); }
    100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
  }
  #prefs.just-jumped {
    animation: prefs-jumped-flash 800ms ease-out;
    border-radius: .375rem;
  }
  .persona-btn {
    font: inherit;
    padding: .4rem .8rem;
    border-radius: .375rem;
    border: 1px solid #c9c9d0;
    background: white;
    cursor: pointer;
  }
  @media (prefers-color-scheme: dark) {
    .persona-btn { background: #2a2a30; border-color: #40404a; color: inherit; }
  }
  .persona-btn:hover { border-color: #6366f1; }
  .persona-btn.active {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
  }
  .persona-btn .price {
    display: inline-block;
    margin-left: .35rem;
    opacity: .75;
    font-size: .875rem;
  }
  #signed-in-as {
    padding: 1.25rem 1.5rem;
    border: 1px solid #d9d9de;
    border-radius: .5rem;
    margin-bottom: 1.25rem;
  }
  @media (prefers-color-scheme: dark) {
    #signed-in-as { border-color: #2f2f36; }
  }
  #signed-in-as h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
  #signed-in-as .blurb { opacity: .8; margin: .25rem 0 0; }

  /* S27: subtle fade cue when the identity card is patched in on switch. */
  @keyframes persona-switch-fade {
    from { opacity: .35; transform: translateY(-2px); }
    to   { opacity: 1;   transform: none; }
  }
  #signed-in-as.just-switched {
    animation: persona-switch-fade 220ms ease-out;
  }

  #persona-body {
    padding: 1.25rem 1.5rem;
    border: 1px solid #d9d9de;
    border-radius: .5rem;
    position: relative;
  }
  @media (prefers-color-scheme: dark) {
    #persona-body { border-color: #2f2f36; }
  }
  #persona-body h2 {
    margin: 0 0 .75rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .65;
  }
  /* S28: small text button in the persona-body corner. */
  #persona-body .reset-btn {
    position: absolute;
    top: .75rem;
    right: .875rem;
    font: inherit;
    font-size: .8125rem;
    padding: .2rem .55rem;
    border-radius: .3rem;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    opacity: .55;
    cursor: pointer;
  }
  #persona-body .reset-btn:hover {
    opacity: 1;
    border-color: #c9c9d0;
    background: #f4f4f7;
  }
  @media (prefers-color-scheme: dark) {
    #persona-body .reset-btn:hover { background: #2a2a30; border-color: #40404a; }
  }
  /* S28: brief flash cue after a reset lands. */
  @keyframes persona-reset-flash {
    0%   { background: rgba(99,102,241,.14); }
    100% { background: transparent; }
  }
  #persona-body.just-reset {
    animation: persona-reset-flash 500ms ease-out;
  }
  #persona-body dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1rem;
  }
  #persona-body dt { opacity: .6; font-size: .875rem; }
  #persona-body dd {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .875rem;
  }
  #persona-body .pill {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    background: #eef;
    border: 1px solid #cce;
  }
  @media (prefers-color-scheme: dark) {
    #persona-body .pill { background: #2a2a3a; border-color: #40405a; }
  }
  #persona-body .pill.paused  { background: #fde; border-color: #ecb; }
  @media (prefers-color-scheme: dark) {
    #persona-body .pill.paused { background: #3a2a2a; border-color: #5a4040; }
  }
  #persona-body .pill.ok      { background: #e6f7ea; border-color: #b8dfc2; }
  #persona-body .pill.missing { background: #f4f4f7; border-color: #d9d9de; opacity: .8; }
  @media (prefers-color-scheme: dark) {
    #persona-body .pill.ok      { background: #1e3524; border-color: #2f5238; }
    #persona-body .pill.missing { background: #2a2a30; border-color: #40404a; }
  }

  /* S3: preferences section. Lives inside #persona-body under the counters. */
  #prefs {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #d9d9de;
  }
  @media (prefers-color-scheme: dark) {
    #prefs { border-top-color: #2f2f36; }
  }
  #prefs h3 {
    margin: 0 0 .75rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .65;
  }
  #prefs .empty {
    padding: 1rem 1.25rem;
    border: 1px dashed #c9c9d0;
    border-radius: .375rem;
    text-align: center;
    opacity: .85;
  }
  @media (prefers-color-scheme: dark) {
    #prefs .empty { border-color: #40404a; }
  }
  #prefs .empty p { margin: 0 0 .75rem; }
  #prefs form { display: grid; gap: .75rem; }
  #prefs .row {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: .5rem 1rem;
    align-items: start;
  }
  #prefs label { font-size: .875rem; opacity: .75; padding-top: .35rem; }
  #prefs input[type=text],
  #prefs input[type=number],
  #prefs textarea {
    font: inherit;
    padding: .4rem .55rem;
    border: 1px solid #c9c9d0;
    border-radius: .3rem;
    background: white;
    color: inherit;
    width: 100%;
    box-sizing: border-box;
  }
  @media (prefers-color-scheme: dark) {
    #prefs input[type=text],
    #prefs input[type=number],
    #prefs textarea {
      background: #2a2a30;
      border-color: #40404a;
    }
  }
  #prefs textarea { font-family: inherit; resize: vertical; min-height: 6.5rem; }
  #prefs .hint { font-size: .75rem; opacity: .6; margin: .15rem 0 0; }
  #prefs .inline {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding-top: .35rem;
  }
  #prefs .actions { display: flex; gap: .5rem; justify-content: flex-end; }
  /* legacy prefs-form buttons — scoped off the new .btn buttons so they
     don't override .btn.primary:disabled etc. */
  #prefs button.primary:not(.btn) {
    font: inherit;
    padding: .4rem .9rem;
    border-radius: .3rem;
    border: 1px solid #6366f1;
    background: #6366f1;
    color: white;
    cursor: pointer;
  }
  #prefs button.primary:not(.btn):hover { background: #4f52d6; border-color: #4f52d6; }
  #prefs button.ghost {
    font: inherit;
    padding: .4rem .9rem;
    border-radius: .3rem;
    border: 1px solid #c9c9d0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  @media (prefers-color-scheme: dark) {
    #prefs button.ghost { border-color: #40404a; }
    #prefs button.ghost:hover { background: #2a2a30; }
  }
  #prefs .summary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1rem;
    margin: 0 0 .75rem;
  }
  #prefs .summary dt { opacity: .6; font-size: .875rem; }
  #prefs .summary dd { margin: 0; font-size: .875rem; }
  #prefs .freeform-preview {
    white-space: pre-wrap;
    font-size: .875rem;
    opacity: .85;
    max-height: 4.5rem;
    overflow: hidden;
    position: relative;
  }
  #prefs .saved-cue {
    display: inline-block;
    margin-left: .5rem;
    font-size: .75rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #e6f7ea;
    border: 1px solid #b8dfc2;
    color: #1e5a2e;
  }
  @media (prefers-color-scheme: dark) {
    #prefs .saved-cue {
      background: #1e3524;
      border-color: #2f5238;
      color: #b8dfc2;
    }
  }
  @keyframes prefs-saved-fade {
    0%   { opacity: 0; transform: translateY(-2px); }
    100% { opacity: 1; transform: none; }
  }
  #prefs .saved-cue.fresh { animation: prefs-saved-fade 220ms ease-out; }

  /* S2: résumé section. Same visual grammar as #prefs. */
  #resume {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #d9d9de;
  }
  @media (prefers-color-scheme: dark) {
    #resume { border-top-color: #2f2f36; }
  }
  #resume h3 {
    margin: 0 0 .75rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .65;
  }
  #resume .empty {
    padding: 1rem 1.25rem;
    border: 1px dashed #c9c9d0;
    border-radius: .375rem;
    text-align: center;
    opacity: .9;
  }
  @media (prefers-color-scheme: dark) {
    #resume .empty { border-color: #40404a; }
  }
  #resume .empty p { margin: 0 0 .75rem; opacity: .8; font-size: .9rem; }
  #resume .file-picker {
    display: inline-block;
    font: inherit;
    padding: .4rem .9rem;
    border-radius: .3rem;
    border: 1px solid #6366f1;
    background: #6366f1;
    color: white;
    cursor: pointer;
  }
  #resume .file-picker:hover { background: #4f52d6; border-color: #4f52d6; }
  #resume input[type=file] { display: none; }
  #resume .card {
    display: grid;
    grid-template-columns: 1fr max-content;
    gap: .5rem 1rem;
    align-items: start;
    padding: 1rem 1.25rem;
    border: 1px solid #d9d9de;
    border-radius: .375rem;
    background: #fafafd;
  }
  @media (prefers-color-scheme: dark) {
    #resume .card { border-color: #2f2f36; background: #1a1a1f; }
  }
  #resume .card .filename {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9rem;
    word-break: break-all;
  }
  #resume .card .meta { font-size: .8125rem; opacity: .7; margin-top: .15rem; }
  #resume .card .actions {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: stretch;
  }
  #resume .card .actions button,
  #resume .card .actions label.file-picker {
    font-size: .8125rem;
    padding: .3rem .7rem;
    text-align: center;
    white-space: nowrap;
  }
  #resume .card .actions .ghost {
    font: inherit;
    font-size: .8125rem;
    padding: .3rem .7rem;
    border-radius: .3rem;
    border: 1px solid #c9c9d0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  @media (prefers-color-scheme: dark) {
    #resume .card .actions .ghost { border-color: #40404a; }
    #resume .card .actions .ghost:hover { background: #2a2a30; }
  }
  #resume .parsed {
    grid-column: 1 / -1;
    margin-top: .5rem;
    padding-top: .75rem;
    border-top: 1px dashed #d9d9de;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .25rem 1rem;
  }
  @media (prefers-color-scheme: dark) {
    #resume .parsed { border-top-color: #40404a; }
  }
  #resume .parsed dt { opacity: .6; font-size: .8125rem; }
  #resume .parsed dd { margin: 0; font-size: .8125rem; }
  #resume .parsed .skills span.pill {
    display: inline-block;
    margin: 0 .25rem .25rem 0;
  }
  #resume .uploaded-cue {
    display: inline-block;
    margin-left: .5rem;
    font-size: .75rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #e6f7ea;
    border: 1px solid #b8dfc2;
    color: #1e5a2e;
  }
  @media (prefers-color-scheme: dark) {
    #resume .uploaded-cue {
      background: #1e3524;
      border-color: #2f5238;
      color: #b8dfc2;
    }
  }
  @keyframes resume-uploaded-fade {
    0%   { opacity: 0; transform: translateY(-2px); }
    100% { opacity: 1; transform: none; }
  }
  #resume .uploaded-cue.fresh { animation: resume-uploaded-fade 220ms ease-out; }
  @media (prefers-color-scheme: dark) {
  }
  @media (prefers-color-scheme: dark) {
  }
  @media (prefers-color-scheme: dark) {
  }
  @media (prefers-color-scheme: dark) {
  }
  @media (prefers-color-scheme: dark) {
  }

  /* S9: fill-mode section. Grouped with the other setup sections. Two-card
     toggle for paid personas, single locked card for free. */
  #fill-mode {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #d9d9de;
  }
  @media (prefers-color-scheme: dark) {
    #fill-mode { border-top-color: #2f2f36; }
  }
  #fill-mode h3 {
    margin: 0 0 .75rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .65;
  }
  #fill-mode .options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }
  #fill-mode .options.locked {
    grid-template-columns: 1fr;
  }
  #fill-mode .opt {
    font: inherit;
    text-align: left;
    padding: .85rem 1rem;
    border: 1px solid #d9d9de;
    border-radius: .375rem;
    background: #fafafd;
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: .25rem;
  }
  @media (prefers-color-scheme: dark) {
    #fill-mode .opt { border-color: #2f2f36; background: #1a1a1f; }
  }
  #fill-mode .opt:hover { border-color: #6366f1; }
  #fill-mode .opt.selected {
    border-color: #6366f1;
    background: #eef0ff;
    box-shadow: 0 0 0 1px #6366f1 inset;
  }
  @media (prefers-color-scheme: dark) {
    #fill-mode .opt.selected { background: #24263a; }
  }
  #fill-mode .opt.locked {
    cursor: default;
    opacity: .95;
  }
  #fill-mode .opt.locked:hover { border-color: #d9d9de; }
  @media (prefers-color-scheme: dark) {
    #fill-mode .opt.locked:hover { border-color: #2f2f36; }
  }
  #fill-mode .opt .head {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .95rem;
  }
  #fill-mode .opt .radio {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    border-radius: 999px;
    border: 2px solid #c9c9d0;
    box-sizing: border-box;
    flex: 0 0 auto;
  }
  @media (prefers-color-scheme: dark) {
    #fill-mode .opt .radio { border-color: #55555f; }
  }
  #fill-mode .opt.selected .radio {
    border-color: #6366f1;
    background:
      radial-gradient(circle, #6366f1 45%, transparent 50%);
  }
  #fill-mode .opt .tag {
    margin-left: auto;
    font-size: .7rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: #eef;
    border: 1px solid #cce;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .8;
  }
  @media (prefers-color-scheme: dark) {
    #fill-mode .opt .tag { background: #2a2a3a; border-color: #40405a; }
  }
  #fill-mode .opt .explainer {
    font-size: .8125rem;
    opacity: .8;
    font-weight: 400;
  }
  #fill-mode .free-note {
    margin: .75rem 0 0;
    font-size: .8125rem;
    opacity: .7;
  }
  #fill-mode .free-note strong { font-weight: 600; }
  #fill-mode .trust-cue {
    margin: .75rem 0 0;
    padding: .55rem .75rem;
    border-radius: .3rem;
    background: #e6f7ea;
    border: 1px solid #b8dfc2;
    color: #1e5a2e;
    font-size: .8125rem;
  }
  @media (prefers-color-scheme: dark) {
    #fill-mode .trust-cue {
      background: #1e3524;
      border-color: #2f5238;
      color: #b8dfc2;
    }
  }
  @keyframes fill-mode-trust-fade {
    0%   { opacity: 0; transform: translateY(-2px); }
    100% { opacity: 1; transform: none; }
  }
  #fill-mode .trust-cue.fresh { animation: fill-mode-trust-fade 240ms ease-out; }
  /* R3: Free tier gets a static, muted trust-ramp explainer under the
     fill-mode cards. Different from the paid transient .fresh cue —
     no green background, just a small footnote-style line. */
  #fill-mode .trust-cue.static {
    background: transparent;
    border: none;
    color: inherit;
    opacity: .65;
    padding: 0;
    font-size: .8125rem;
    margin-top: .6rem;
  }
  @media (prefers-color-scheme: dark) {
    #fill-mode .trust-cue.static {
      background: transparent;
      border: none;
      color: inherit;
    }
  }

  /* S7: queue section. Sits above Résumé because it's the primary UX. */
  #queue {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #d9d9de;
  }
  @media (prefers-color-scheme: dark) {
    #queue { border-top-color: #2f2f36; }
  }
  /* S10: queue header lays the section title on the left and the
     pause/resume button on the right, so the control lives with the
     thing it affects. */
  #queue .q-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 0 .75rem;
  }
  #queue h3 {
    margin: 0;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .65;
  }
  #queue .pause-btn {
    font: inherit;
    font-size: .8125rem;
    padding: .3rem .8rem;
    border-radius: .3rem;
    border: 1px solid #c9c9d0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
  }
  #queue .pause-btn:hover {
    border-color: #6366f1;
    color: #4f52d6;
  }
  @media (prefers-color-scheme: dark) {
    #queue .pause-btn { border-color: #40404a; }
    #queue .pause-btn:hover { color: #a5a7f5; border-color: #6366f1; }
  }
  #queue .pause-btn.resume {
    border-color: #b58a1a;
    color: #7a5900;
    background: #fff7e1;
  }
  #queue .pause-btn.resume:hover {
    background: #ffeeb8;
    border-color: #7a5900;
    color: #4a3600;
  }
  @media (prefers-color-scheme: dark) {
    #queue .pause-btn.resume {
      background: #3a2f14;
      border-color: #7a5900;
      color: #ffd580;
    }
    #queue .pause-btn.resume:hover {
      background: #4a3a1c;
      color: #ffe6a8;
    }
  }
  /* S10: paused banner at the top of the queue section. Amber to read as
     an intentional user-selected state, not an error. */
  #queue .pause-banner {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .65rem .85rem;
    margin: 0 0 .75rem;
    border: 1px solid #e6c979;
    background: #fff7e1;
    color: #6a4a00;
    border-radius: .375rem;
    font-size: .875rem;
  }
  @media (prefers-color-scheme: dark) {
    #queue .pause-banner {
      background: #2f2712;
      border-color: #7a5900;
      color: #ffd580;
    }
  }
  #queue .pause-banner .icon {
    font-weight: 700;
    line-height: 1.2;
  }
  #queue .pause-banner .body { flex: 1; }
  #queue .pause-banner .body strong { font-weight: 600; }
  #queue .pause-banner .body .sub {
    display: block;
    margin-top: .15rem;
    font-size: .8125rem;
    opacity: .85;
  }
  #queue .empty {
    padding: 1rem 1.25rem;
    border: 1px dashed #c9c9d0;
    border-radius: .375rem;
    text-align: center;
    opacity: .85;
    font-size: .9rem;
  }
  @media (prefers-color-scheme: dark) {
    #queue .empty { border-color: #40404a; }
  }
  #queue .empty p { margin: 0; }

  /* R10: auto-submit swap-counter pill on the queue header. Sits next
     to the "Queued (N)" title / pause button. Two visual states —
     .ok (swaps remaining) reads green; .full (cap reached) reads
     muted grey. Same pill grammar as .quota-pill / .score for visual
     consistency. */
  #queue .swap-pill {
    font-size: .72rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    white-space: nowrap;
  }
  #queue .swap-pill.ok {
    background: #e6f7ea;
    border: 1px solid #b8dfc2;
    color: #1e5a2e;
  }
  @media (prefers-color-scheme: dark) {
    #queue .swap-pill.ok {
      background: #1e3524;
      border-color: #2f5238;
      color: #b8dfc2;
    }
  }
  #queue .swap-pill.full {
    background: #eef;
    border: 1px solid #d9d9de;
    color: #6f6f78;
  }
  @media (prefers-color-scheme: dark) {
    #queue .swap-pill.full {
      background: #24242c;
      border-color: #40404a;
      color: #9a9aa4;
    }
  }
  /* R10: amber callout above the queue rows in auto-submit mode.
     Tells the user they can reject up to N rows to swap them.
     Same amber family as the pause-banner but a different left-
     accent so the two don't get confused when both fire. */
  #queue .auto-submit-callout {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .65rem .85rem;
    margin: 0 0 .75rem;
    border: 1px solid #f5b84a;
    border-left: 4px solid #f59e0b;
    background: #fffaf0;
    color: #7a5000;
    border-radius: .375rem;
    font-size: .875rem;
  }
  @media (prefers-color-scheme: dark) {
    #queue .auto-submit-callout {
      background: #2a1f10;
      border-color: #7a5a20;
      border-left-color: #f59e0b;
      color: #fbbf77;
    }
  }
  #queue .auto-submit-callout .callout-icon {
    font-weight: 700;
    line-height: 1.2;
  }
  #queue .auto-submit-callout .callout-body { flex: 1; }
  #queue .auto-submit-callout .callout-body strong { font-weight: 600; }
  #queue .auto-submit-callout .callout-body .sub {
    opacity: .85;
  }
  /* R10: per-row scheduled-submit line above the headline. Small,
     muted, monospace — reads as machine metadata, not editorial.
     Only rendered when the persona is in auto-submit mode. */
  #queue .q-row .schedule {
    font-size: .75rem;
    color: #4f52d6;
    margin-bottom: .1rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    letter-spacing: .01em;
  }
  @media (prefers-color-scheme: dark) {
    #queue .q-row .schedule { color: #a5a7f5; }
  }
  #queue .q-row .schedule .schedule-icon {
    opacity: .75;
    font-size: .8rem;
  }
  #queue .q-row .schedule .schedule-time {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500;
  }
  #queue ol.q-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .5rem;
  }
  #queue .q-row {
    display: grid;
    grid-template-columns: 2rem 1fr max-content;
    gap: .35rem 1rem;
    align-items: baseline;
    padding: .75rem 1rem;
    border: 1px solid #d9d9de;
    border-radius: .375rem;
    background: #fafafd;
  }
  @media (prefers-color-scheme: dark) {
    #queue .q-row { border-color: #2f2f36; background: #1a1a1f; }
  }
  #queue .q-row .rank {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8125rem;
    opacity: .55;
    text-align: right;
  }
  #queue .q-row .headline {
    font-weight: 600;
    font-size: .95rem;
  }
  #queue .q-row .headline .employer { opacity: .8; font-weight: 500; }
  #queue .q-row .headline .sep      { opacity: .35; margin: 0 .35rem; }
  #queue .q-row .rationale {
    font-size: .8125rem;
    opacity: .8;
    margin-top: .15rem;
  }
  #queue .q-row .meta {
    font-size: .75rem;
    opacity: .6;
    margin-top: .15rem;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
  }
  #queue .q-row .meta .dot { opacity: .5; }
  #queue .q-row .score {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8125rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #eef;
    border: 1px solid #cce;
    white-space: nowrap;
  }
  @media (prefers-color-scheme: dark) {
    #queue .q-row .score { background: #2a2a3a; border-color: #40405a; }
  }

  /* S8: reject affordance on each queue row. The score chip and Reject
     button share a right-column stack; clicking Reject opens the inline
     <details> panel below the row's content. */
  #queue .q-row .row-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
  }
  #queue .q-row .reject-toggle {
    font: inherit;
    font-size: .75rem;
    padding: .15rem .55rem;
    border-radius: .3rem;
    border: 1px solid #c9c9d0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .7;
    list-style: none;
  }
  #queue .q-row .reject-toggle::-webkit-details-marker { display: none; }
  #queue .q-row .reject-toggle:hover {
    opacity: 1;
    border-color: #c47070;
    color: #a63838;
  }
  @media (prefers-color-scheme: dark) {
    #queue .q-row .reject-toggle { border-color: #40404a; }
    #queue .q-row .reject-toggle:hover { color: #f5a5a5; border-color: #7a3a3a; }
  }
  #queue .q-row details[open] .reject-toggle {
    opacity: 1;
    border-color: #c47070;
    color: #a63838;
  }
  #queue .q-row .reject-panel {
    grid-column: 2 / -1;
    margin-top: .35rem;
    padding: .65rem .75rem;
    border: 1px solid #e2c9c9;
    border-radius: .3rem;
    background: #fff7f7;
    display: grid;
    gap: .5rem;
  }
  @media (prefers-color-scheme: dark) {
    #queue .q-row .reject-panel {
      background: #2a1e1e;
      border-color: #4a3232;
    }
  }
  #queue .q-row .reject-panel label {
    font-size: .8125rem;
    opacity: .8;
  }
  #queue .q-row .reject-panel textarea {
    font: inherit;
    padding: .35rem .5rem;
    border: 1px solid #c9c9d0;
    border-radius: .3rem;
    background: white;
    color: inherit;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 3.5rem;
  }
  @media (prefers-color-scheme: dark) {
    #queue .q-row .reject-panel textarea {
      background: #1a1a1f;
      border-color: #40404a;
    }
  }
  #queue .q-row .reject-panel .actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
  }
  #queue .q-row .reject-panel button.reject {
    font: inherit;
    font-size: .8125rem;
    padding: .3rem .8rem;
    border-radius: .3rem;
    border: 1px solid #a63838;
    background: #a63838;
    color: white;
    cursor: pointer;
  }
  #queue .q-row .reject-panel button.reject:hover { background: #8b2828; border-color: #8b2828; }
  #queue .q-row .reject-panel button.cancel {
    font: inherit;
    font-size: .8125rem;
    padding: .3rem .8rem;
    border-radius: .3rem;
    border: 1px solid #c9c9d0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  @media (prefers-color-scheme: dark) {
    #queue .q-row .reject-panel button.cancel { border-color: #40404a; }
    #queue .q-row .reject-panel button.cancel:hover { background: #2a2a30; }
  }

  /* S8: Rejected (N) affordance below the queue. Collapsible <details>
     so the story stays visible without eating vertical space. */
  #rejected {
    margin-top: 1rem;
  }
  #rejected summary.rejected-toggle {
    cursor: pointer;
    font-size: .8125rem;
    opacity: .7;
    padding: .35rem 0;
    list-style: none;
    display: inline-block;
  }
  #rejected summary.rejected-toggle::-webkit-details-marker { display: none; }
  #rejected summary.rejected-toggle::marker { content: ''; }
  #rejected summary.rejected-toggle::before {
    content: '▸ ';
    display: inline-block;
    width: 1em;
    opacity: .55;
  }
  #rejected details[open] > summary.rejected-toggle::before { content: '▾ '; }
  #rejected summary.rejected-toggle:hover { opacity: 1; }
  #rejected .learning-note {
    font-size: .75rem;
    opacity: .55;
    margin: .35rem 0 .5rem;
    font-style: italic;
  }
  #rejected ul.r-list {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0;
    display: grid;
    gap: .35rem;
  }
  #rejected .r-row {
    display: grid;
    grid-template-columns: 1fr max-content;
    gap: .25rem .75rem;
    align-items: baseline;
    padding: .5rem .75rem;
    border: 1px solid #d9d9de;
    border-radius: .3rem;
    background: #fafafd;
    font-size: .8125rem;
  }
  @media (prefers-color-scheme: dark) {
    #rejected .r-row { border-color: #2f2f36; background: #1a1a1f; }
  }
  #rejected .r-row .headline { font-weight: 500; }
  #rejected .r-row .headline .employer { opacity: .8; font-weight: 500; }
  #rejected .r-row .headline .sep { opacity: .35; margin: 0 .35rem; }
  #rejected .r-row .reason {
    grid-column: 1 / -1;
    opacity: .8;
    font-size: .75rem;
    margin-top: .15rem;
    white-space: pre-wrap;
  }
  #rejected .r-row .reason.none { opacity: .45; font-style: italic; }
  #rejected .r-row .meta {
    grid-column: 1 / -1;
    font-size: .7rem;
    opacity: .55;
    margin-top: .15rem;
  }
  #rejected .r-row button.un-reject {
    font: inherit;
    font-size: .75rem;
    padding: .2rem .6rem;
    border-radius: .3rem;
    border: 1px solid #c9c9d0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .75;
    white-space: nowrap;
  }
  #rejected .r-row button.un-reject:hover {
    opacity: 1;
    border-color: #6366f1;
    color: #4f52d6;
  }
  @media (prefers-color-scheme: dark) {
    #rejected .r-row button.un-reject { border-color: #40404a; }
    #rejected .r-row button.un-reject:hover { color: #a5a7f5; border-color: #4f52d6; }
  }

  /* S27: logged-out empty state gets its own look — marketing-ish, no counters. */
  #persona-body.logged-out {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: linear-gradient(180deg, transparent, rgba(99,102,241,.06));
  }
  #persona-body.logged-out h2 {
    font-size: 1.375rem;
    text-transform: none;
    letter-spacing: 0;
    opacity: 1;
    margin-bottom: .75rem;
  }
  #persona-body.logged-out p { opacity: .8; margin: .25rem auto; max-width: 34rem; }
  #persona-body.logged-out ul {
    list-style: none;
    padding: 0;
    margin: 1.25rem auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    max-width: 40rem;
  }
  #persona-body.logged-out li {
    padding: .75rem;
    border: 1px solid #d9d9de;
    border-radius: .375rem;
    font-size: .875rem;
  }
  @media (prefers-color-scheme: dark) {
    #persona-body.logged-out li { border-color: #2f2f36; }
  }

  /* S5: weekly ready-to-apply nudge (Free tier only). Sits at the very top
     of #persona-body — above the counters row and the queue — so it reads
     as the primary CTA of the whole workspace. Green border + soft green
     wash mirrors the queue's Apply button so 'this is the button that
     matters' is obvious at a glance. */
  #weekly-nudge {
    margin: 0 0 1.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid #1e9047;
    border-radius: .5rem;
    background: linear-gradient(180deg, rgba(30,144,71,.08), rgba(30,144,71,.02));
    display: grid;
    gap: .75rem;
  }
  @media (prefers-color-scheme: dark) {
    #weekly-nudge {
      border-color: #2f7d4c;
      background: linear-gradient(180deg, rgba(46,160,67,.14), rgba(46,160,67,.03));
    }
  }
  #weekly-nudge .eyebrow {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: #1e5a2e;
    margin: 0;
  }
  @media (prefers-color-scheme: dark) {
    #weekly-nudge .eyebrow { color: #7ecc95; }
  }
  #weekly-nudge h3 {
    margin: 0;
    font-size: 1.25rem;
    text-transform: none;
    letter-spacing: 0;
    opacity: 1;
  }
  #weekly-nudge .pick {
    display: grid;
    gap: .15rem;
  }
  #weekly-nudge .pick .headline {
    font-weight: 600;
    font-size: 1.05rem;
  }
  #weekly-nudge .pick .headline .employer { opacity: .85; }
  #weekly-nudge .pick .headline .sep { opacity: .35; margin: 0 .35rem; }
  #weekly-nudge .pick .rationale {
    font-size: .875rem;
    opacity: .8;
  }
  #weekly-nudge .cta-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  #weekly-nudge .cta-row .fill-btn {
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: .65rem 1.4rem;
    border-radius: .35rem;
    border: 1px solid #1a7f3f;
    background: #1e9047;
    color: white;
    cursor: pointer;
  }
  #weekly-nudge .cta-row .fill-btn:hover {
    background: #187538;
    border-color: #14612e;
  }
  #weekly-nudge .cta-row .fill-btn:disabled {
    cursor: not-allowed;
    background: #c9c9d0;
    border-color: #c9c9d0;
    color: #6b6b73;
  }
  #weekly-nudge .caption {
    font-size: .8125rem;
    opacity: .7;
    margin: 0;
  }
  #weekly-nudge .caption strong { font-weight: 600; opacity: .9; }
  #weekly-nudge .empty {
    padding: .5rem 0 0;
    font-size: .9rem;
    opacity: .85;
  }
  #weekly-nudge .empty button.link {
    font: inherit;
    font-size: .9rem;
    padding: 0;
    margin-left: .25rem;
    border: none;
    background: transparent;
    color: #4f52d6;
    cursor: pointer;
    text-decoration: underline;
  }
  #weekly-nudge .empty button.link:hover { color: #3a3daa; }
  @media (prefers-color-scheme: dark) {
    #weekly-nudge .empty button.link { color: #a5a7f5; }
    #weekly-nudge .empty button.link:hover { color: #c8caff; }
  }
  /* Used-this-week state: neutral gray, not green. The prize is spent. */
  #weekly-nudge.used {
    border-color: #c9c9d0;
    background: linear-gradient(180deg, rgba(120,120,130,.06), transparent);
  }
  @media (prefers-color-scheme: dark) {
    #weekly-nudge.used {
      border-color: #40404a;
      background: linear-gradient(180deg, rgba(80,80,90,.14), transparent);
    }
  }
  #weekly-nudge.used .eyebrow { color: inherit; opacity: .6; }
  #weekly-nudge.used .headline .status-pill {
    display: inline-block;
    font-size: .7rem;
    padding: .1rem .5rem;
    margin-left: .5rem;
    border-radius: 999px;
    background: #e6f7ea;
    border: 1px solid #b8dfc2;
    color: #1e5a2e;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    vertical-align: middle;
  }
  @media (prefers-color-scheme: dark) {
    #weekly-nudge.used .headline .status-pill {
      background: #1e3524;
      border-color: #2f5238;
      color: #b8dfc2;
    }
  }

  /* R3: Free-tier queue treatment. Top 3 rows behave normally; row 4 is
     replaced with a single locked-upgrade card that summarizes how many
     more matches are behind the paywall. Header carries a small quota
     pill alongside the "Queued (N)" count. */
  #queue .quota-pill {
    font-size: .72rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: #eef;
    border: 1px solid #cce;
    color: #4f52d6;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    white-space: nowrap;
    margin-right: auto;
    margin-left: -.25rem;
  }
  @media (prefers-color-scheme: dark) {
    #queue .quota-pill {
      background: #2a2a3a;
      border-color: #40405a;
      color: #a5a7f5;
    }
  }
  #queue .quota-pill.spent {
    background: #fff7e1;
    border-color: #e6c979;
    color: #7a5900;
  }
  @media (prefers-color-scheme: dark) {
    #queue .quota-pill.spent {
      background: #2f2712;
      border-color: #7a5900;
      color: #ffd580;
    }
  }
  /* Locked-upgrade row at rank 4 on Free — same shape as .q-row so the
     ellipsis reads legibly, dashed border + indigo accent so it's
     visually distinct from real queue rows. */
  #queue .q-row.upgrade-row {
    border-style: dashed;
    border-color: #6366f1;
    background: rgba(99,102,241,.05);
    align-items: center;
  }
  @media (prefers-color-scheme: dark) {
    #queue .q-row.upgrade-row {
      background: rgba(99,102,241,.09);
    }
  }
  #queue .q-row.upgrade-row .rank {
    font-size: 1rem;
    opacity: 1;
  }
  #queue .q-row.upgrade-row .headline .locked-count {
    font-weight: 600;
    opacity: 1;
  }
  #queue .q-row.upgrade-row .rationale {
    opacity: .85;
  }
  #queue .q-row .upgrade-btn {
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    padding: .35rem .85rem;
    border-radius: .3rem;
    border: 1px solid #6366f1;
    background: #6366f1;
    color: white;
    cursor: pointer;
    white-space: nowrap;
  }
  #queue .q-row .upgrade-btn:hover {
    background: #4f52d6;
    border-color: #4f52d6;
  }
  /* R3: quota-locked Apply button on Free once the week's slot is spent.
     Keeps the green Apply framing (so the paid affordance is legible)
     but muted + a lock icon so the gate reads. */
  #queue .q-row .apply-btn.quota-locked {
    background: transparent;
    color: #16a34a;
    border-color: #b8dfc2;
    cursor: pointer;
    opacity: .95;
  }
  #queue .q-row .apply-btn.quota-locked:hover {
    background: rgba(22,163,74,.06);
    border-color: #16a34a;
  }
  @media (prefers-color-scheme: dark) {
    #queue .q-row .apply-btn.quota-locked {
      color: #7ecc95;
      border-color: #2f5238;
    }
    #queue .q-row .apply-btn.quota-locked:hover {
      background: rgba(46,160,67,.1);
      border-color: #7ecc95;
    }
  }
  #queue .q-row .apply-btn.quota-locked .lock {
    margin-right: .25rem;
    font-size: .75em;
  }

  /* S6: green Apply button on each queue row, stacked with the score chip
     and Reject affordance. Disabled variant for paused personas. */
  #queue .q-row .apply-btn {
    font: inherit;
    font-size: .8125rem;
    padding: .3rem .85rem;
    border-radius: .3rem;
    border: 1px solid #1a7f3f;
    background: #1e9047;
    color: white;
    cursor: pointer;
    white-space: nowrap;
  }
  #queue .q-row .apply-btn:hover { background: #187538; border-color: #14612e; }
  #queue .q-row .apply-btn:disabled {
    cursor: not-allowed;
    background: #c9c9d0;
    border-color: #c9c9d0;
    color: #6b6b73;
    opacity: .75;
  }
  @media (prefers-color-scheme: dark) {
    #queue .q-row .apply-btn:disabled {
      background: #2a2a30;
      border-color: #40404a;
      color: #6b6b73;
    }
  }

  /* S6: fake ATS overlay. Fixed backdrop covers the viewport; the modal
     panel is centered and holds a mock ATS form
     progressively via SSE patches. Empty when no submission is active —
     the persona-slice's :active-application drives whether we render
     content or an empty <div>. */
  #ats-overlay:empty { display: none; }
  #ats-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15, 15, 20, .55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1rem;
    overflow-y: auto;
    animation: ats-overlay-fade 160ms ease-out;
  }
  @keyframes ats-overlay-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  #ats-overlay .modal {
    background: #ffffff;
    color: #1a1a1f;
    width: min(680px, 100%);
    border-radius: .6rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 6rem);
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal { background: #1e1e24; color: #f0f0f5; }
  }
  #ats-overlay .modal .head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e5ea;
    background: #f6f6f9;
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal .head { background: #14141a; border-bottom-color: #2f2f36; }
  }
  #ats-overlay .modal .logo {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .3rem;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: white;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex: 0 0 auto;
  }
  #ats-overlay .modal .head .title-block { flex: 1; min-width: 0; }
  #ats-overlay .modal .head .app-title {
    font-size: .8125rem;
    opacity: .6;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  #ats-overlay .modal .head .headline {
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #ats-overlay .modal .head .headline .employer { opacity: .85; }
  #ats-overlay .modal .head .headline .sep { opacity: .35; margin: 0 .35rem; }
  #ats-overlay .modal .close {
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    padding: .25rem .55rem;
    border-radius: .3rem;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .55;
  }
  #ats-overlay .modal .close:hover {
    opacity: 1;
    background: #ececf0;
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal .close:hover { background: #2a2a30; }
  }
  #ats-overlay .modal .progress {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1.25rem;
    background: #eef0ff;
    border-bottom: 1px solid #dcdff5;
    font-size: .8125rem;
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal .progress { background: #23253a; border-bottom-color: #2f3253; }
  }
  #ats-overlay .modal .progress .spinner {
    width: .85rem;
    height: .85rem;
    border-radius: 999px;
    border: 2px solid #c9c9d0;
    border-top-color: #6366f1;
    animation: ats-spin 700ms linear infinite;
    flex: 0 0 auto;
  }
  @keyframes ats-spin { to { transform: rotate(360deg); } }
  #ats-overlay .modal .progress.done {
    background: #e6f7ea;
    border-bottom-color: #b8dfc2;
    color: #1e5a2e;
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal .progress.done { background: #1e3524; border-bottom-color: #2f5238; color: #b8dfc2; }
  }
  #ats-overlay .modal .progress.done .spinner {
    border: 2px solid #2ea043;
    border-top-color: #2ea043;
    animation: none;
    background: #2ea043;
  }
  #ats-overlay .modal .form {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    display: grid;
    gap: .85rem;
  }
  #ats-overlay .modal .field { display: grid; gap: .25rem; }
  #ats-overlay .modal .field label {
    font-size: .8125rem;
    opacity: .75;
    font-weight: 500;
  }
  #ats-overlay .modal .field input[type=text],
  #ats-overlay .modal .field input[type=email],
  #ats-overlay .modal .field input[type=tel],
  #ats-overlay .modal .field input[type=number],
  #ats-overlay .modal .field textarea {
    font: inherit;
    padding: .45rem .6rem;
    border: 1px solid #c9c9d0;
    border-radius: .3rem;
    background: #fafafd;
    color: inherit;
    box-sizing: border-box;
    width: 100%;
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal .field input[type=text],
    #ats-overlay .modal .field input[type=email],
    #ats-overlay .modal .field input[type=tel],
    #ats-overlay .modal .field input[type=number],
    #ats-overlay .modal .field textarea {
      background: #14141a;
      border-color: #40404a;
    }
  }
  #ats-overlay .modal .field textarea { resize: vertical; min-height: 4.5rem; }
  #ats-overlay .modal .field.filled input,
  #ats-overlay .modal .field.filled textarea {
    background: #eefaf0;
    border-color: #b8dfc2;
    animation: ats-field-fill 240ms ease-out;
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal .field.filled input,
    #ats-overlay .modal .field.filled textarea {
      background: #1e3524;
      border-color: #2f5238;
    }
  }
  @keyframes ats-field-fill {
    from { background: #d0f5da; }
    to   { background: #eefaf0; }
  }
  #ats-overlay .modal .field .resume-pill {
    display: inline-block;
    font-size: .75rem;
    padding: .25rem .55rem;
    border-radius: .3rem;
    background: #eef0ff;
    border: 1px solid #dcdff5;
    color: #4f52d6;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal .field .resume-pill {
      background: #23253a;
      border-color: #2f3253;
      color: #a5a7f5;
    }
  }
  #ats-overlay .modal .field.pending input,
  #ats-overlay .modal .field.pending textarea {
    background: #f4f4f7;
    color: #a0a0a8;
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal .field.pending input,
    #ats-overlay .modal .field.pending textarea {
      background: #14141a;
      color: #55555f;
    }
  }
  #ats-overlay .modal .actions {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e5e5ea;
    background: #f9f9fc;
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal .actions { background: #14141a; border-top-color: #2f2f36; }
  }
  #ats-overlay .modal .actions .cancel {
    font: inherit;
    padding: .5rem 1rem;
    border-radius: .3rem;
    border: 1px solid #c9c9d0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal .actions .cancel { border-color: #40404a; }
    #ats-overlay .modal .actions .cancel:hover { background: #2a2a30; }
  }
  #ats-overlay .modal .actions .submit {
    font: inherit;
    padding: .55rem 1.4rem;
    border-radius: .3rem;
    border: 1px solid #1e9047;
    background: #1e9047;
    color: white;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
  }
  #ats-overlay .modal .actions .submit:hover { background: #187538; border-color: #14612e; }
  #ats-overlay .modal .actions .submit:disabled {
    background: #c9c9d0;
    border-color: #c9c9d0;
    cursor: not-allowed;
    opacity: .75;
  }
  #ats-overlay .modal .actions .submit.ready {
    box-shadow: 0 0 0 3px rgba(30,144,71,.25);
    animation: ats-submit-pulse 900ms ease-in-out;
  }
  @keyframes ats-submit-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(30,144,71,.25); }
    50%      { box-shadow: 0 0 0 6px rgba(30,144,71,.15); }
  }

  /* S6: toast for successful application, briefly overlays the main
     dashboard. Empty container by default so patches can inject the
     message and self-remove after ~2s via a client-side timeout. */
  #apply-toast:empty { display: none; }
  #apply-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 150;
    background: #1a1a1f;
    color: #f0f0f5;
    padding: .65rem 1.1rem;
    border-radius: .4rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
    font-size: .875rem;
    animation: ats-toast-in 200ms ease-out;
  }
  @keyframes ats-toast-in {
    from { opacity: 0; transform: translate(-50%, .5rem); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }
  #apply-toast .check {
    display: inline-block;
    color: #4ade80;
    margin-right: .35rem;
    font-weight: 700;
  }

  /* S12: Video receipt overlay. Shares #ats-overlay + .modal grammar with
     S6's live submission overlay so the field replay is visually 1:1 with
     the actual fill animation the user saw at submission time. The purple
     accent + 'RECEIPT' eyebrow distinguishes 'we're replaying' from
     'we're filling now'. */
  #ats-overlay .modal.receipt-mode .head {
    background: linear-gradient(180deg, rgba(168,85,247,.10), rgba(168,85,247,.02));
    border-bottom-color: rgba(168,85,247,.35);
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal.receipt-mode .head {
      background: linear-gradient(180deg, rgba(168,85,247,.14), rgba(168,85,247,.02));
      border-bottom-color: rgba(168,85,247,.5);
    }
  }
  #ats-overlay .modal.receipt-mode .logo {
    background: linear-gradient(135deg, #a855f7, #ec4899);
  }
  #ats-overlay .modal.receipt-mode .head .app-title {
    color: #7c3aed;
    opacity: .9;
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal.receipt-mode .head .app-title { color: #c4a5f7; }
  }
  #ats-overlay .modal.receipt-mode .head .app-title::before {
    content: '▶ ';
    display: inline-block;
    margin-right: .1rem;
  }
  #ats-overlay .modal.receipt-mode .head .meta {
    font-size: .75rem;
    opacity: .7;
    margin-top: .15rem;
  }
  #ats-overlay .modal.receipt-mode .progress {
    background: #f6efff;
    border-bottom-color: #e0cffb;
    color: #5b21b6;
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal.receipt-mode .progress {
      background: #2a1e3a;
      border-bottom-color: #4a2f6b;
      color: #d4b8f7;
    }
  }
  #ats-overlay .modal.receipt-mode .progress .spinner {
    border: 2px solid #d4b8f7;
    border-top-color: #a855f7;
  }
  #ats-overlay .modal.receipt-mode .progress.done {
    background: #f6efff;
    border-bottom-color: #d4b8f7;
    color: #5b21b6;
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal.receipt-mode .progress.done {
      background: #2a1e3a;
      border-bottom-color: #4a2f6b;
      color: #d4b8f7;
    }
  }
  #ats-overlay .modal.receipt-mode .progress.done .spinner {
    background: #a855f7;
    border-color: #a855f7;
  }
  #ats-overlay .modal.receipt-mode .actions {
    justify-content: space-between;
  }
  #ats-overlay .modal.receipt-mode .actions .receipt-note {
    font-size: .75rem;
    opacity: .55;
    font-style: italic;
    align-self: center;
    max-width: 24rem;
  }
  #ats-overlay .modal.receipt-mode .replay {
    font: inherit;
    padding: .5rem 1rem;
    border-radius: .3rem;
    border: 1px solid #a855f7;
    background: transparent;
    color: #7c3aed;
    cursor: pointer;
  }
  #ats-overlay .modal.receipt-mode .replay:hover {
    background: #f6efff;
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal.receipt-mode .replay { color: #c4a5f7; }
    #ats-overlay .modal.receipt-mode .replay:hover { background: #2a1e3a; }
  }
  #ats-overlay .modal.receipt-mode .replay:disabled {
    opacity: .5;
    cursor: not-allowed;
  }
  #ats-overlay .modal.receipt-mode .field.filled input,
  #ats-overlay .modal.receipt-mode .field.filled textarea {
    background: #f6efff;
    border-color: #d4b8f7;
    animation: ats-field-fill-receipt 240ms ease-out;
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal.receipt-mode .field.filled input,
    #ats-overlay .modal.receipt-mode .field.filled textarea {
      background: #2a1e3a;
      border-color: #4a2f6b;
    }
  }
  @keyframes ats-field-fill-receipt {
    from { background: #e2ccfb; }
    to   { background: #f6efff; }
  }
  #ats-overlay .modal.receipt-mode .field .resume-pill {
    background: #f6efff;
    border-color: #d4b8f7;
    color: #7c3aed;
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal.receipt-mode .field .resume-pill {
      background: #2a1e3a;
      border-color: #4a2f6b;
      color: #c4a5f7;
    }
  }

  /* S12: 'Watch receipt' button in the post-submit dwell — sits next to the
     Close button in the actions row while :progress = :submitted. */
  #ats-overlay .modal .actions .watch-receipt {
    font: inherit;
    padding: .5rem 1rem;
    border-radius: .3rem;
    border: 1px solid #a855f7;
    background: transparent;
    color: #7c3aed;
    cursor: pointer;
    margin-right: auto;
  }
  #ats-overlay .modal .actions .watch-receipt::before {
    content: '▶ ';
  }
  #ats-overlay .modal .actions .watch-receipt:hover {
    background: #f6efff;
    border-color: #7c3aed;
  }
  @media (prefers-color-scheme: dark) {
    #ats-overlay .modal .actions .watch-receipt { color: #c4a5f7; }
    #ats-overlay .modal .actions .watch-receipt:hover { background: #2a1e3a; }
  }

  /* S12: Receipts section. Lives beneath Rejected, same collapsible-details
     grammar so it doesn't dominate vertical space when the user has zero
     submissions. */
  #receipts {
    margin-top: 1rem;
  }
  #receipts summary.receipts-toggle {
    cursor: pointer;
    font-size: .8125rem;
    opacity: .7;
    padding: .35rem 0;
    list-style: none;
    display: inline-block;
  }
  #receipts summary.receipts-toggle::-webkit-details-marker { display: none; }
  #receipts summary.receipts-toggle::marker { content: ''; }
  #receipts summary.receipts-toggle::before {
    content: '▸ ';
    display: inline-block;
    width: 1em;
    opacity: .55;
  }
  #receipts details[open] > summary.receipts-toggle::before { content: '▾ '; }
  #receipts summary.receipts-toggle:hover { opacity: 1; }
  #receipts .receipts-note {
    font-size: .75rem;
    opacity: .55;
    margin: .35rem 0 .5rem;
    font-style: italic;
  }
  #receipts ul.rc-list {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0;
    display: grid;
    gap: .35rem;
  }
  #receipts .rc-row {
    display: grid;
    grid-template-columns: 1fr max-content max-content;
    gap: .25rem .75rem;
    align-items: center;
    padding: .5rem .75rem;
    border: 1px solid #d9d9de;
    border-radius: .3rem;
    background: #fafafd;
    font-size: .8125rem;
  }
  @media (prefers-color-scheme: dark) {
    #receipts .rc-row { border-color: #2f2f36; background: #1a1a1f; }
  }
  #receipts .rc-row .headline { font-weight: 500; }
  #receipts .rc-row .headline .employer { opacity: .85; font-weight: 500; }
  #receipts .rc-row .headline .sep { opacity: .35; margin: 0 .35rem; }
  #receipts .rc-row .meta {
    grid-column: 1 / -1;
    display: flex;
    gap: .5rem;
    align-items: center;
    font-size: .7rem;
    opacity: .6;
    margin-top: .15rem;
  }
  #receipts .rc-row .meta .dot { opacity: .5; }
  #receipts .rc-row .mode-pill {
    display: inline-block;
    font-size: .7rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    border: 1px solid #cce;
    background: #eef;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
  }
  @media (prefers-color-scheme: dark) {
    #receipts .rc-row .mode-pill { background: #2a2a3a; border-color: #40405a; }
  }
  #receipts .rc-row .mode-pill.auto {
    background: #eefaf0;
    border-color: #b8dfc2;
    color: #1e5a2e;
  }
  @media (prefers-color-scheme: dark) {
    #receipts .rc-row .mode-pill.auto {
      background: #1e3524;
      border-color: #2f5238;
      color: #b8dfc2;
    }
  }
  #receipts .rc-row button.watch {
    font: inherit;
    font-size: .75rem;
    padding: .2rem .6rem;
    border-radius: .3rem;
    border: 1px solid #a855f7;
    background: transparent;
    color: #7c3aed;
    cursor: pointer;
    white-space: nowrap;
  }
  #receipts .rc-row button.watch::before { content: '▶ '; }
  #receipts .rc-row button.watch:hover {
    background: #f6efff;
    border-color: #7c3aed;
  }
  @media (prefers-color-scheme: dark) {
    #receipts .rc-row button.watch { color: #c4a5f7; }
    #receipts .rc-row button.watch:hover { background: #2a1e3a; }
  }
  #receipts .receipts-footnote {
    margin: .5rem 0 0;
    font-size: .75rem;
    opacity: .55;
    font-style: italic;
  }

  /* S13: Recent activity timeline. Sits below Rejected as a proper
     history view — replaces the S12 Receipts section, since submissions
     already flow through the timeline with a per-row Watch receipt
     button. Vertical list with a colored chip per event type, a one-line
     summary, and a relative timestamp. Timeline uses a subtle left rail
     so the events read as sequential without being loud. */
  #recent-activity {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #d9d9de;
  }
  @media (prefers-color-scheme: dark) {
    #recent-activity { border-top-color: #2f2f36; }
  }
  #recent-activity h3 {
    margin: 0 0 .35rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .65;
  }
  #recent-activity .subtitle {
    font-size: .75rem;
    opacity: .55;
    margin: 0 0 .75rem;
  }
  #recent-activity .empty {
    padding: 1rem 1.25rem;
    border: 1px dashed #c9c9d0;
    border-radius: .375rem;
    text-align: center;
    opacity: .85;
    font-size: .9rem;
  }
  @media (prefers-color-scheme: dark) {
    #recent-activity .empty { border-color: #40404a; }
  }
  #recent-activity .empty p { margin: 0; opacity: .8; }
  #recent-activity ol.tl {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
  }
  #recent-activity ol.tl::before {
    content: '';
    position: absolute;
    left: .55rem;
    top: .25rem;
    bottom: .25rem;
    width: 1px;
    background: #e5e5ea;
  }
  @media (prefers-color-scheme: dark) {
    #recent-activity ol.tl::before { background: #2f2f36; }
  }
  #recent-activity .tl-row {
    position: relative;
    padding: .45rem 0 .45rem 1.75rem;
    display: grid;
    grid-template-columns: 1fr max-content;
    gap: .15rem .75rem;
    align-items: baseline;
  }
  #recent-activity .tl-row .chip {
    position: absolute;
    left: 0;
    top: .55rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: #c9c9d0;
    border: 2px solid #fafafd;
    box-shadow: 0 0 0 1px #d9d9de;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .625rem;
    color: white;
    font-weight: 700;
    line-height: 1;
  }
  @media (prefers-color-scheme: dark) {
    #recent-activity .tl-row .chip {
      border-color: #1a1a1f;
      box-shadow: 0 0 0 1px #2f2f36;
    }
  }
  /* Per-type chip colors — greens for positive submissions, red for
     rejected, purple for résumé, indigo for prefs, amber for
     pause events. */
  #recent-activity .tl-row.type-application-submitted .chip { background: #1e9047; }
  #recent-activity .tl-row.type-application-rejected  .chip { background: #a63838; }
  #recent-activity .tl-row.type-prefs-saved            .chip { background: #6366f1; }
  #recent-activity .tl-row.type-resume-uploaded        .chip { background: #a855f7; }
  #recent-activity .tl-row.type-resume-removed         .chip { background: #8a8a95; }
  #recent-activity .tl-row.type-fill-mode-changed     .chip { background: #4f52d6; }
  #recent-activity .tl-row.type-auto-apply-paused     .chip { background: #b58a1a; }
  #recent-activity .tl-row.type-auto-apply-resumed    .chip { background: #1e9047; }
  #recent-activity .tl-row .summary {
    font-size: .875rem;
    line-height: 1.35;
  }
  #recent-activity .tl-row .summary .employer { opacity: .85; font-weight: 600; }
  #recent-activity .tl-row .summary .sep { opacity: .35; margin: 0 .35rem; }
  #recent-activity .tl-row .summary .mode { opacity: .7; font-style: italic; }
  #recent-activity .tl-row .summary strong { font-weight: 600; }
  #recent-activity .tl-row .when {
    font-size: .75rem;
    opacity: .6;
    white-space: nowrap;
  }
  #recent-activity .tl-row .aux {
    grid-column: 1 / -1;
    font-size: .75rem;
    opacity: .7;
    margin-top: .1rem;
  }
  #recent-activity .tl-row .aux .reason {
    white-space: pre-wrap;
    font-style: italic;
    opacity: .85;
  }
  #recent-activity .tl-row .aux button.watch {
    font: inherit;
    font-size: .75rem;
    padding: .15rem .55rem;
    border-radius: .3rem;
    border: 1px solid #a855f7;
    background: transparent;
    color: #7c3aed;
    cursor: pointer;
    white-space: nowrap;
  }
  #recent-activity .tl-row .aux button.watch::before { content: '▶ '; }
  #recent-activity .tl-row .aux button.watch:hover {
    background: #f6efff;
    border-color: #7c3aed;
  }
  @media (prefers-color-scheme: dark) {
    #recent-activity .tl-row .aux button.watch { color: #c4a5f7; }
    #recent-activity .tl-row .aux button.watch:hover { background: #2a1e3a; }
  }
  #recent-activity .footnote {
    margin: .75rem 0 0;
    font-size: .75rem;
    opacity: .55;
    font-style: italic;
  }

  /* S15: Applications section. Canonical list of every submission on the
     persona, sorted newest-first. Table-ish grid so each row scans as
     'employer/title · when · mode · status · [watch]'. Status pills are
     clickable — the whole selector is a small row of buttons, one of which
     is the current status; clicking a different one POSTs the change. */
  #applications {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #d9d9de;
  }
  @media (prefers-color-scheme: dark) {
    #applications { border-top-color: #2f2f36; }
  }
  #applications h3 {
    margin: 0 0 .35rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .65;
  }
  #applications .subtitle {
    font-size: .75rem;
    opacity: .55;
    margin: 0 0 .75rem;
  }
  #applications .empty {
    padding: 1rem 1.25rem;
    border: 1px dashed #c9c9d0;
    border-radius: .375rem;
    text-align: center;
    opacity: .85;
    font-size: .9rem;
  }
  @media (prefers-color-scheme: dark) {
    #applications .empty { border-color: #40404a; }
  }
  #applications .empty p { margin: 0; opacity: .8; }
  #applications ol.a-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .5rem;
  }
  #applications .a-row {
    display: grid;
    grid-template-columns: 1fr max-content;
    gap: .35rem 1rem;
    align-items: center;
    padding: .65rem .85rem;
    border: 1px solid #d9d9de;
    border-radius: .375rem;
    background: #fafafd;
  }
  @media (prefers-color-scheme: dark) {
    #applications .a-row { border-color: #2f2f36; background: #1a1a1f; }
  }
  #applications .a-row .headline {
    font-weight: 600;
    font-size: .9rem;
  }
  #applications .a-row .headline .employer { opacity: .85; }
  #applications .a-row .headline .sep { opacity: .35; margin: 0 .35rem; }
  #applications .a-row .headline .title { font-weight: 500; opacity: .85; }
  #applications .a-row .meta {
    font-size: .75rem;
    opacity: .65;
    margin-top: .15rem;
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
  }
  #applications .a-row .meta .dot { opacity: .5; }
  #applications .a-row .mode-pill {
    display: inline-block;
    font-size: .68rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: #eef;
    border: 1px solid #cce;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    opacity: .8;
  }
  @media (prefers-color-scheme: dark) {
    #applications .a-row .mode-pill { background: #2a2a3a; border-color: #40405a; }
  }
  #applications .a-row .side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
  }
  #applications .a-row .watch {
    font: inherit;
    font-size: .75rem;
    padding: .15rem .55rem;
    border-radius: .3rem;
    border: 1px solid #a855f7;
    background: transparent;
    color: #7c3aed;
    cursor: pointer;
    white-space: nowrap;
  }
  #applications .a-row .watch::before { content: '▶ '; }
  #applications .a-row .watch:hover {
    background: #f6efff;
    border-color: #7c3aed;
  }
  @media (prefers-color-scheme: dark) {
    #applications .a-row .watch { color: #c4a5f7; }
    #applications .a-row .watch:hover { background: #2a1e3a; }
  }
  /* Status selector: horizontal row of small pill buttons, one .selected.
     Clicking a non-selected pill POSTs a status change. */
  #applications .a-row .status-row {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px dashed #e5e5ea;
  }
  @media (prefers-color-scheme: dark) {
    #applications .a-row .status-row { border-top-color: #2f2f36; }
  }
  #applications .a-row .status-row .status-label {
    font-size: .7rem;
    opacity: .55;
    text-transform: uppercase;
    letter-spacing: .04em;
    align-self: center;
    margin-right: .15rem;
  }
  #applications .status-btn {
    font: inherit;
    font-size: .72rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    border: 1px solid #c9c9d0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .65;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    line-height: 1.35;
  }
  @media (prefers-color-scheme: dark) {
    #applications .status-btn { border-color: #40404a; }
  }
  #applications .status-btn:hover { opacity: 1; border-color: #6366f1; }
  /* Per-status color for the SELECTED pill only — unselected pills stay
     neutral so the row reads as 'one out of five is on'. */
  #applications .status-btn.selected {
    opacity: 1;
    cursor: default;
    box-shadow: 0 0 0 1px currentColor inset;
  }
  #applications .status-btn.selected:hover { border-color: currentColor; }
  #applications .status-btn.status-no-reply.selected {
    background: #f4f4f7;
    border-color: #b0b0b8;
    color: #55555f;
  }
  #applications .status-btn.status-heard-back.selected {
    background: #eef0ff;
    border-color: #6366f1;
    color: #4f52d6;
  }
  #applications .status-btn.status-advancing.selected {
    background: #fff7e1;
    border-color: #b58a1a;
    color: #7a5900;
  }
  #applications .status-btn.status-offer.selected {
    background: #e6f7ea;
    border-color: #1e9047;
    color: #1e5a2e;
  }
  #applications .status-btn.status-rejected.selected {
    background: #fbeaea;
    border-color: #a63838;
    color: #8b2828;
  }
  @media (prefers-color-scheme: dark) {
    #applications .status-btn.status-no-reply.selected {
      background: #2a2a30; border-color: #6b6b73; color: #c9c9d0;
    }
    #applications .status-btn.status-heard-back.selected {
      background: #24263a; border-color: #6366f1; color: #a5a7f5;
    }
    #applications .status-btn.status-advancing.selected {
      background: #3a2f14; border-color: #b58a1a; color: #ffd580;
    }
    #applications .status-btn.status-offer.selected {
      background: #1e3524; border-color: #2f7d4c; color: #b8dfc2;
    }
    #applications .status-btn.status-rejected.selected {
      background: #2a1e1e; border-color: #7a3a3a; color: #f5a5a5;
    }
  }

  /* S15: timeline chip for :application-status-changed. Uses the target-
     status color so the chip previews the new state at a glance. */
  #recent-activity .tl-row.type-application-status-changed .chip { background: #6366f1; }
  #recent-activity .tl-row.type-application-status-changed.to-offer     .chip { background: #1e9047; }
  #recent-activity .tl-row.type-application-status-changed.to-advancing .chip { background: #b58a1a; }
  #recent-activity .tl-row.type-application-status-changed.to-rejected  .chip { background: #a63838; }
  #recent-activity .tl-row.type-application-status-changed.to-no-reply  .chip { background: #8a8a95; }
  #recent-activity .tl-row.type-application-status-changed.to-heard-back .chip { background: #6366f1; }
  #recent-activity .tl-row .summary .status-inline {
    display: inline-block;
    font-size: .68rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    vertical-align: baseline;
    margin: 0 .1rem;
    opacity: .9;
  }
  #recent-activity .tl-row .summary .status-inline.to-no-reply   { color: #6b6b73; }
  #recent-activity .tl-row .summary .status-inline.to-heard-back { color: #4f52d6; }
  #recent-activity .tl-row .summary .status-inline.to-advancing  { color: #7a5900; }
  #recent-activity .tl-row .summary .status-inline.to-offer      { color: #1e5a2e; }
  #recent-activity .tl-row .summary .status-inline.to-rejected   { color: #8b2828; }
  @media (prefers-color-scheme: dark) {
    #recent-activity .tl-row .summary .status-inline.to-no-reply   { color: #c9c9d0; }
    #recent-activity .tl-row .summary .status-inline.to-heard-back { color: #a5a7f5; }
    #recent-activity .tl-row .summary .status-inline.to-advancing  { color: #ffd580; }
    #recent-activity .tl-row .summary .status-inline.to-offer      { color: #b8dfc2; }
    #recent-activity .tl-row .summary .status-inline.to-rejected   { color: #f5a5a5; }
  }

  footer.notice {
    margin-top: 3rem;
    font-size: .8125rem;
    opacity: .55;
  }
  /* S16: label utility — visible to screen readers, hidden from sight. */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* S16: Notes affordance under each application row. Collapsed <details>
     spans the full row width (same grid-column trick as .status-row) so the
     expanded textarea can breathe. */
  #applications .a-row .notes-details {
    grid-column: 1 / -1;
    margin-top: .35rem;
  }
  #applications .a-row .notes-toggle {
    font: inherit;
    font-size: .72rem;
    padding: .1rem .55rem;
    border-radius: .3rem;
    border: 1px solid #c9c9d0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .7;
    list-style: none;
    display: inline-block;
  }
  #applications .a-row .notes-toggle::-webkit-details-marker { display: none; }
  #applications .a-row .notes-toggle::before { content: '▸ '; opacity: .55; }
  #applications .a-row details[open] > .notes-toggle::before { content: '▾ '; }
  #applications .a-row .notes-toggle:hover {
    opacity: 1;
    border-color: #6366f1;
    color: #4f52d6;
  }
  @media (prefers-color-scheme: dark) {
    #applications .a-row .notes-toggle { border-color: #40404a; }
    #applications .a-row .notes-toggle:hover { color: #a5a7f5; border-color: #6366f1; }
  }
  #applications .a-row .notes-toggle .count {
    opacity: .55;
    margin-left: .2rem;
    font-variant-numeric: tabular-nums;
  }
  #applications .a-row details[open] > .notes-toggle .count { opacity: .8; }
  #applications .a-row .notes-panel {
    margin-top: .5rem;
    padding: .65rem .75rem;
    border: 1px solid #d9d9de;
    border-radius: .3rem;
    background: #fbfbff;
    display: grid;
    gap: .5rem;
  }
  @media (prefers-color-scheme: dark) {
    #applications .a-row .notes-panel {
      background: #1e1e26;
      border-color: #2f2f36;
    }
  }
  #applications .a-row .notes-panel textarea {
    font: inherit;
    padding: .4rem .55rem;
    border: 1px solid #c9c9d0;
    border-radius: .3rem;
    background: white;
    color: inherit;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 4rem;
    line-height: 1.4;
  }
  @media (prefers-color-scheme: dark) {
    #applications .a-row .notes-panel textarea {
      background: #14141a;
      border-color: #40404a;
    }
  }
  #applications .a-row .notes-panel .actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: flex-end;
  }
  #applications .a-row .notes-panel button.save {
    font: inherit;
    font-size: .8125rem;
    padding: .3rem .9rem;
    border-radius: .3rem;
    border: 1px solid #6366f1;
    background: #6366f1;
    color: white;
    cursor: pointer;
  }
  #applications .a-row .notes-panel button.save:hover {
    background: #4f52d6;
    border-color: #4f52d6;
  }
  #applications .a-row .notes-panel .saved-cue {
    display: inline-block;
    font-size: .72rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #e6f7ea;
    border: 1px solid #b8dfc2;
    color: #1e5a2e;
    margin-right: auto;
  }
  @media (prefers-color-scheme: dark) {
    #applications .a-row .notes-panel .saved-cue {
      background: #1e3524;
      border-color: #2f5238;
      color: #b8dfc2;
    }
  }
  @keyframes app-note-saved-fade {
    0%   { opacity: 0; transform: translateY(-2px); }
    100% { opacity: 1; transform: none; }
  }
  #applications .a-row .notes-panel .saved-cue.fresh {
    animation: app-note-saved-fade 220ms ease-out;
  }

  /* S16: timeline chip for :application-note-updated — same indigo family as
     status changes so \"application things I did\" reads as one visual group. */
  #recent-activity .tl-row.type-application-note-updated .chip { background: #6366f1; }
  #recent-activity .tl-row .summary .note-preview {
    font-style: italic;
    opacity: .85;
  }

  /* ---------------------------------------------------------------------
     R4: New-user guidance banner. Amber accent (warm/attention, not
     red-error) so it reads as guidance not a warning. Sits at the very
     top of #persona-body when the persona has no prefs or no résumé.
  --------------------------------------------------------------------- */
  #new-user-banner {
    margin-bottom: 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid #f5b84a;
    border-left: 4px solid #f59e0b;
    background: #fffaf0;
    border-radius: .375rem;
    /* R10: centered layout — headline, sub, and the two CTAs read as
       a single centered call-to-action. Matches #anonymous-banner. */
    text-align: center;
  }
  @media (prefers-color-scheme: dark) {
    #new-user-banner {
      background: #2a1f10;
      border-color: #7a5a20;
      border-left-color: #f59e0b;
    }
  }
  #new-user-banner .banner-body h3 {
    margin: 0 0 .3rem;
    font-size: 1rem;
    color: #92400e;
  }
  @media (prefers-color-scheme: dark) {
    #new-user-banner .banner-body h3 { color: #fbbf77; }
  }
  #new-user-banner .banner-body p {
    margin: 0 0 .75rem;
    font-size: .9rem;
    opacity: .85;
  }
  #new-user-banner .banner-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  #new-user-banner .banner-actions button {
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    padding: .4rem .9rem;
    border-radius: .3rem;
    border: 1px solid #d1a04a;
    background: white;
    color: #92400e;
    cursor: pointer;
  }
  @media (prefers-color-scheme: dark) {
    #new-user-banner .banner-actions button {
      background: #1f1608;
      border-color: #a56b1c;
      color: #fbbf77;
    }
  }
  #new-user-banner .banner-actions button.primary {
    background: #f59e0b;
    border-color: #f59e0b;
    color: white;
  }
  #new-user-banner .banner-actions button.primary:hover {
    background: #d97706;
    border-color: #d97706;
  }
  #new-user-banner .banner-actions button:not(.primary):hover {
    background: #fef5e2;
  }
  @media (prefers-color-scheme: dark) {
    #new-user-banner .banner-actions button:not(.primary):hover {
      background: #2a1f10;
    }
  }

  /* R4: caption above the queue on the new-user (not-set-up) branch.
     Small, muted — it just names what the list is. */
  #queue p.generic-queue-caption {
    margin: -.25rem 0 .5rem;
    font-size: .8125rem;
    opacity: .7;
    font-style: italic;
  }

  /* ---------------------------------------------------------------------
     R4: Free-tier blur + upgrade overlay on rows 4-10 of the queue.
     .queue-body.with-blur is the positioned parent; the .blurred rows
     render normally but with a CSS blur filter; .blur-overlay sits
     absolutely-positioned centered over the blurred region.
  --------------------------------------------------------------------- */
  #queue .queue-body.with-blur {
    position: relative;
  }
  #queue .q-row.blurred {
    filter: blur(4.5px);
    pointer-events: none;
    user-select: none;
    /* Slight opacity cut so the overlay reads over the blur without
       the blur competing for attention. */
    opacity: .85;
  }
  #queue .blur-overlay {
    position: absolute;
    /* Sit centered over the blurred region. Percent-based so the position
       tracks with the queue body height without hard-coding row dimensions:
       3 unblurred rows above ~ 30% of the list, so ~55% down lands well
       inside the 7-row blurred zone regardless of exact row heights. */
    top: 55%;
    left: 0;
    right: 0;
    transform: translateY(-40%);
    display: flex;
    justify-content: center;
    /* Don't consume clicks on the whole strip — only the card interior. */
    pointer-events: none;
    z-index: 5;
  }
  #queue .blur-overlay-card {
    pointer-events: auto;
    max-width: 24rem;
    padding: 1.25rem 1.5rem;
    text-align: center;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid #d9d9de;
    border-radius: .5rem;
    box-shadow: 0 10px 30px rgba(30, 30, 40, .18),
                0 2px 6px rgba(30, 30, 40, .08);
  }
  @media (prefers-color-scheme: dark) {
    #queue .blur-overlay-card {
      background: rgba(26, 26, 32, .92);
      border-color: #40404a;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .45),
                  0 2px 6px rgba(0, 0, 0, .3);
    }
  }
  #queue .blur-overlay-card .lock {
    font-size: 1.5rem;
    margin-bottom: .25rem;
  }
  #queue .blur-overlay-card .headline {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: .35rem;
  }
  #queue .blur-overlay-card p.sub {
    margin: 0 0 .9rem;
    font-size: .875rem;
    opacity: .8;
  }
  #queue .blur-overlay-card .upgrade-btn {
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    padding: .5rem 1.2rem;
    border-radius: .3rem;
    border: 1px solid #6366f1;
    background: #6366f1;
    color: white;
    cursor: pointer;
  }
  #queue .blur-overlay-card .upgrade-btn:hover {
    background: #4f52d6;
    border-color: #4f52d6;
  }

  /* ---------------------------------------------------------------------
     R9 — Nav tabs. Three top-level views (Jobs / Profile / Stats) rendered
     below the top-nav, above the persona-body. Desktop layout is a
     horizontal row of tab buttons with a bolder underline on the active
     one; mobile layout (<= 640px) is a native <details>/<summary>
     hamburger with the current view label on the summary.
  --------------------------------------------------------------------- */
  .nav-tabs {
    width: 100%;
    box-sizing: border-box;
    background: white;
    border-bottom: 1px solid #e5e5ea;
  }
  @media (prefers-color-scheme: dark) {
    .nav-tabs { background: #14141a; border-bottom-color: #2f2f36; }
  }
  /* Hide the whole strip when empty (logged-out). */
  .nav-tabs:empty { display: none; }
  .nav-tabs > .nav-tabs-inner:empty { display: none; }

  .nav-tabs-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }

  /* Desktop: horizontal tab row. */
  .nav-tabs-row {
    display: flex;
    gap: .25rem;
    align-items: stretch;
  }
  .nav-tabs-row .nav-tab {
    font: inherit;
    padding: .7rem .95rem .55rem;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: .9rem;
    letter-spacing: .01em;
    opacity: .7;
    position: relative;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 0;
  }
  .nav-tabs-row .nav-tab:hover {
    opacity: 1;
    color: #4f52d6;
  }
  @media (prefers-color-scheme: dark) {
    .nav-tabs-row .nav-tab:hover { color: #a5a7f5; }
  }
  .nav-tabs-row .nav-tab.active {
    opacity: 1;
    font-weight: 600;
    color: #4f52d6;
    border-bottom-color: #6366f1;
  }
  @media (prefers-color-scheme: dark) {
    .nav-tabs-row .nav-tab.active {
      color: #a5a7f5;
      border-bottom-color: #6366f1;
    }
  }

  /* Mobile: hamburger. Hidden on desktop. */
  .nav-tabs-menu { display: none; }
  .nav-tabs-menu > summary {
    font: inherit;
    list-style: none;
    padding: .65rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 600;
  }
  .nav-tabs-menu > summary::-webkit-details-marker { display: none; }
  .nav-tabs-menu > summary .nav-tabs-menu-current { color: #4f52d6; }
  @media (prefers-color-scheme: dark) {
    .nav-tabs-menu > summary .nav-tabs-menu-current { color: #a5a7f5; }
  }
  .nav-tabs-menu > summary .nav-tabs-menu-glyph {
    font-size: 1.1rem;
    opacity: .75;
  }
  .nav-tabs-menu-panel {
    display: flex;
    flex-direction: column;
    padding: .25rem 0 .5rem;
    gap: .1rem;
    border-top: 1px solid #e5e5ea;
  }
  @media (prefers-color-scheme: dark) {
    .nav-tabs-menu-panel { border-top-color: #2f2f36; }
  }
  .nav-tabs-menu-item {
    font: inherit;
    text-align: left;
    padding: .55rem .35rem;
    background: transparent;
    border: none;
    border-radius: .3rem;
    color: inherit;
    cursor: pointer;
    font-size: .95rem;
    opacity: .8;
  }
  .nav-tabs-menu-item:hover {
    background: #f4f4f7;
    opacity: 1;
  }
  @media (prefers-color-scheme: dark) {
    .nav-tabs-menu-item:hover { background: #2a2a30; }
  }
  .nav-tabs-menu-item.active {
    opacity: 1;
    font-weight: 600;
    color: #4f52d6;
  }
  @media (prefers-color-scheme: dark) {
    .nav-tabs-menu-item.active { color: #a5a7f5; }
  }

  @media (max-width: 640px) {
    .nav-tabs-row  { display: none; }
    .nav-tabs-menu { display: block; }
  }

  /* ---------------------------------------------------------------------
     R9 — Profile view / Account section. The Profile view is the setup
     sections (Prefs / Résumé) as primary content, plus a
     small Account panel at the bottom.
  --------------------------------------------------------------------- */
  .profile-view > #prefs,
  .profile-view > #resume,
  .profile-view > #account {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #d9d9de;
  }
  @media (prefers-color-scheme: dark) {
    .profile-view > #prefs,
    .profile-view > #resume,
      .profile-view > #account { border-top-color: #2f2f36; }
  }
  /* First section in the view has no top border — it sits directly under
     the (possibly-empty) new-user banner. */
  .profile-view > #prefs:first-child,
  .profile-view > *:first-child {
    margin-top: .5rem;
    padding-top: 0;
    border-top: none;
  }

  #account h3 {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
  }
  #account dl.account-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1rem;
    row-gap: .35rem;
    margin: .5rem 0 1rem;
    font-size: .9rem;
  }
  #account dl.account-details dt {
    font-weight: 600;
    opacity: .65;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .75rem;
    align-self: center;
  }
  #account dl.account-details dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
  }
  #account .plan-name { font-weight: 600; }
  #account .upgrade-inline {
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    padding: .2rem .65rem;
    border-radius: .3rem;
    border: 1px solid #6366f1;
    background: #6366f1;
    color: white;
    cursor: pointer;
  }
  #account .upgrade-inline:hover {
    background: #4f52d6;
    border-color: #4f52d6;
  }
  #account .account-actions {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
  }
  #account .sign-out {
    font: inherit;
    font-size: .875rem;
    padding: .4rem .8rem;
    border-radius: .3rem;
    border: 1px solid #c9c9d0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  @media (prefers-color-scheme: dark) {
    #account .sign-out { border-color: #40404a; }
  }
  #account .sign-out:hover {
    background: #f4f4f7;
    border-color: #6366f1;
  }
  @media (prefers-color-scheme: dark) {
    #account .sign-out:hover { background: #2a2a30; }
  }

  /* ---------------------------------------------------------------------
     R10 — Settings view. Reached only via the ⚙ button in the top-nav.
     A placeholder card
     naming the settings surface the real product would grow into.
     Section chrome mirrors .profile-view so the two views feel like
     siblings.
  --------------------------------------------------------------------- */
  .settings-view > #settings-placeholder {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #d9d9de;
  }
  @media (prefers-color-scheme: dark) {
      .settings-view > #settings-placeholder { border-top-color: #2f2f36; }
  }
  .settings-view > *:first-child {
    margin-top: .5rem;
    padding-top: 0;
    border-top: none;
  }
  #settings-placeholder h3 {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
  }
  #settings-placeholder p {
    margin: 0;
    padding: 1rem 1.25rem;
    border: 1px dashed #c9c9d0;
    border-radius: .375rem;
    font-size: .9rem;
    opacity: .8;
    line-height: 1.45;
  }
  @media (prefers-color-scheme: dark) {
    #settings-placeholder p { border-color: #40404a; }
  }

  /* ---------------------------------------------------------------------
     R9 — Stats view. Three cards stacked vertically. CSS bars only; no
     charting library. Card visual grammar matches other sections.
  --------------------------------------------------------------------- */
  .stats-view {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .stats-card {
    padding: 1.15rem 1.25rem 1.25rem;
    border: 1px solid #d9d9de;
    border-radius: .5rem;
    background: white;
  }
  @media (prefers-color-scheme: dark) {
    .stats-card { border-color: #2f2f36; background: #14141a; }
  }
  .stats-card > h3 {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
  }
  .stats-card > p.subtitle {
    margin: 0 0 1rem;
    opacity: .7;
    font-size: .85rem;
  }
  #stats-empty .empty {
    padding: 1.5rem 0;
    text-align: center;
    opacity: .75;
  }

  /* Funnel bars. Horizontal, one per status. Bar width scales to the
     max count across the five statuses; the max bar is 100% wide. */
  .funnel {
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }
  .funnel-row {
    display: grid;
    grid-template-columns: 7rem 1fr 6rem;
    align-items: center;
    column-gap: .75rem;
    font-size: .85rem;
  }
  .funnel-label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    opacity: .8;
    text-align: right;
  }
  .funnel-bar-track {
    background: #f0f0f4;
    border-radius: 999px;
    height: 1rem;
    overflow: hidden;
    position: relative;
  }
  @media (prefers-color-scheme: dark) {
    .funnel-bar-track { background: #2a2a30; }
  }
  .funnel-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .3s ease-out;
    min-width: 2px;
  }
  .funnel-count {
    font-size: .78rem;
    opacity: .75;
    font-variant-numeric: tabular-nums;
  }
  /* Match status-pill colors from the Applications section. */
  .funnel-row.status-no-reply .funnel-bar-fill   { background: #b0b0b8; }
  .funnel-row.status-heard-back .funnel-bar-fill { background: #6366f1; }
  .funnel-row.status-advancing .funnel-bar-fill  { background: #b58a1a; }
  .funnel-row.status-offer .funnel-bar-fill      { background: #1e9047; }
  .funnel-row.status-rejected .funnel-bar-fill   { background: #a63838; }
  @media (prefers-color-scheme: dark) {
    .funnel-row.status-no-reply .funnel-bar-fill   { background: #6b6b73; }
    .funnel-row.status-heard-back .funnel-bar-fill { background: #6366f1; }
    .funnel-row.status-advancing .funnel-bar-fill  { background: #b58a1a; }
    .funnel-row.status-offer .funnel-bar-fill      { background: #2f7d4c; }
    .funnel-row.status-rejected .funnel-bar-fill   { background: #7a3a3a; }
  }
  .funnel-row.status-no-reply .funnel-label   { color: #55555f; }
  .funnel-row.status-heard-back .funnel-label { color: #4f52d6; }
  .funnel-row.status-advancing .funnel-label  { color: #7a5900; }
  .funnel-row.status-offer .funnel-label      { color: #1e5a2e; }
  .funnel-row.status-rejected .funnel-label   { color: #8b2828; }
  @media (prefers-color-scheme: dark) {
    .funnel-row.status-no-reply .funnel-label   { color: #c9c9d0; }
    .funnel-row.status-heard-back .funnel-label { color: #a5a7f5; }
    .funnel-row.status-advancing .funnel-label  { color: #ffd580; }
    .funnel-row.status-offer .funnel-label      { color: #b8dfc2; }
    .funnel-row.status-rejected .funnel-label   { color: #f5a5a5; }
  }

  /* Weekly bar chart. Vertical bars, one per week, left→right = oldest→newest.
     Height scales to the busiest week across the visible window. */
  .weekly-chart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(2.25rem, 1fr));
    align-items: end;
    gap: .4rem;
    height: 9rem;
    padding-top: .25rem;
    border-bottom: 1px solid #e5e5ea;
  }
  @media (prefers-color-scheme: dark) {
    .weekly-chart { border-bottom-color: #2f2f36; }
  }
  .weekly-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    height: 100%;
  }
  .weekly-bar-track {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 1px;
  }
  .weekly-bar-fill {
    width: 100%;
    background: #6366f1;
    border-radius: .2rem .2rem 0 0;
    min-height: 2px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: .15rem;
    transition: height .3s ease-out;
  }
  .weekly-bar-fill:hover { background: #4f52d6; }
  .weekly-count {
    font-size: .65rem;
    color: white;
    font-weight: 600;
    opacity: .95;
    line-height: 1;
  }
  .weekly-label {
    font-size: .65rem;
    text-align: center;
    opacity: .6;
    white-space: nowrap;
    transform: translateY(.35rem);
  }
  @media (max-width: 640px) {
    /* Under 640px the label stride is too tight; hide every-other. */
    .weekly-chart { grid-template-columns: repeat(auto-fit, minmax(1.5rem, 1fr)); }
    .weekly-col:nth-child(even) .weekly-label { visibility: hidden; }
  }

  /* Response rate card — one big number + a short caption. */
  #stats-response .response-rate-big {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.05;
    color: #6366f1;
    letter-spacing: -.02em;
  }
  @media (prefers-color-scheme: dark) {
    #stats-response .response-rate-big { color: #a5a7f5; }
  }
  #stats-response .response-rate-caption {
    margin: .5rem 0 0;
    opacity: .75;
    font-size: .9rem;
  }

/* ---- résumé: LinkedIn-style positions + edit form (build-app) ---- */
.position-card { margin: 12px 0; padding-left: 12px; border-left: 2px solid #e5e7eb; }
.position-card .pos-role { font-weight: 600; }
.position-card .pos-company { color: #374151; }
.position-card .pos-dates,
.position-card .pos-loc { color: #6b7280; font-size: 13px; }
#resume .summary { display: flex; align-items: center; gap: 8px; }
#resume .skills { margin: 8px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#resume .positions h4 { margin: 16px 0 4px; }

.autogrow { width: 100%; min-width: 240px; font: inherit; padding: 6px 8px;
            border: 1px solid #d1d5db; border-radius: 6px; box-sizing: border-box; }
#resume form .row { display: grid; grid-template-columns: 160px 1fr; gap: 10px;
                    align-items: start; margin: 8px 0; }
#resume form .row > label { color: #374151; padding-top: 6px; }
#resume form .row input[type=text],
#resume form .row input:not([type]),
#resume form .row input[type=email],
#resume form .row input[type=number] { width: 100%; padding: 6px 8px;
  border: 1px solid #d1d5db; border-radius: 6px; box-sizing: border-box; }


/* ============================================================
   Resume section — file / derived split + shared two-column
   review (used by BOTH "edit resume" and "review upload").
   Theme tokens are set explicitly for light AND dark so text
   is never light-on-light (the earlier readability bug).
   ============================================================ */
:root {
  --rz-text:#1f2937; --rz-muted:#6b7280; --rz-border:#e5e7eb;
  --rz-line:#f1f5f9; --rz-panel:#f8fafc; --rz-input-bg:#ffffff;
  --rz-input-border:#d1d5db; --rz-accent:#4f46e5; --rz-danger:#b91c1c;
  --rz-pickbg:#eef2ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --rz-text:#e7e7ea; --rz-muted:#9aa0aa; --rz-border:#2f2f36;
    --rz-line:#26262c; --rz-panel:#1c1c22; --rz-input-bg:#14141a;
    --rz-input-border:#3a3a44; --rz-accent:#6366f1; --rz-danger:#f87171;
    --rz-pickbg:#20223a;
  }
}

/* file block: the uploaded file + Replace/Remove */
.resume-body { display:flex; flex-direction:column; gap:22px; color:var(--rz-text); }
.resume-file { display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:14px 16px; background:var(--rz-panel);
  border:1px solid var(--rz-border); border-radius:10px; color:var(--rz-text); }
.resume-file .filename { font-weight:600; }
.resume-file .file-info .meta { color:var(--rz-muted); font-size:13px; margin-top:2px; }
.resume-file .file-actions { display:flex; gap:8px; flex-shrink:0; }

/* derived (parsed details) block */
.resume-derived { border-top:1px dashed var(--rz-border); padding-top:18px; color:var(--rz-text); }
.resume-derived .derived-head { display:flex; justify-content:space-between;
  align-items:center; margin-bottom:10px; }
.resume-derived .derived-head h4 { margin:0; font-size:14px; color:var(--rz-muted);
  text-transform:uppercase; letter-spacing:.04em; }

/* read-only view rows */
.derived-fields .field-row { display:grid; grid-template-columns:150px 1fr; gap:12px;
  align-items:start; padding:9px 0; border-bottom:1px solid var(--rz-line); }
.derived-fields .field-row:last-child { border-bottom:none; }
.field-row .field-label { color:var(--rz-muted); font-size:13px; padding-top:2px; }
.field-row .field-label.section-label { font-weight:600; color:var(--rz-text); }
.field-row .field-value { font-weight:500; color:var(--rz-text); }

/* multi-value one-per-line (skills, languages) — view */
.rc-lines { display:flex; flex-direction:column; gap:2px; font-weight:400; }
.rc-line { color:var(--rz-text); }

/* ---- shared two-column review / edit grid ---- */
.reconcile-grid { display:grid; grid-template-columns:150px 1fr 1fr; gap:6px 14px;
  align-items:start; color:var(--rz-text); }
.reconcile-head { display:contents; }
.reconcile-head span { font-weight:600; color:var(--rz-muted); font-size:12px;
  text-transform:uppercase; letter-spacing:.04em; padding-bottom:4px;
  border-bottom:1px solid var(--rz-border); }
.reconcile-row { display:contents; }
.reconcile-label { padding-top:8px; color:var(--rz-muted); font-size:13px; }
.reconcile-cell { display:flex; gap:8px; align-items:start; padding:6px 8px;
  border-radius:8px; }
.reconcile-cell.readonly { color:var(--rz-text); }               /* edit: left col reference */
.reconcile-cell .rc-body { flex:1; min-width:0; }
.reconcile-cell .rc-text { color:var(--rz-text); }
.reconcile-cell .muted { color:var(--rz-muted); }
.reconcile-cell .rc-pick { margin-top:9px; accent-color:var(--rz-accent); }
/* highlight the currently-picked side (reconcile) */
.reconcile-cell:has(.rc-pick:checked) { background:var(--rz-pickbg); }

/* inputs (both columns, both flows) */
.reconcile-cell input[type=text],
.reconcile-cell textarea,
.field-row .field-value input,
.field-row .field-value textarea,
.pos-edit-grid input {
  width:100%; padding:7px 9px; font:inherit; color:var(--rz-text);
  background:var(--rz-input-bg); border:1px solid var(--rz-input-border);
  border-radius:7px; box-sizing:border-box; }
.reconcile-cell input:focus, .reconcile-cell textarea:focus,
.field-row .field-value input:focus, .field-row .field-value textarea:focus {
  outline:none; border-color:var(--rz-accent); }

/* experience (roles) */
.experience { display:grid; grid-template-columns:150px 1fr; gap:12px; padding:12px 0 0; }
.experience > div { grid-column:2; }
.position-card { margin:0 0 14px; padding-left:12px; border-left:2px solid var(--rz-border); }
.position-card .pos-role { font-weight:600; color:var(--rz-text); }
.position-card .pos-company { color:var(--rz-text); }
.position-card .pos-dates, .position-card .pos-loc { color:var(--rz-muted); font-size:13px; }

.reconcile-positions { margin-top:22px; }
.reconcile-positions h4 { margin:0 0 10px; font-size:14px; color:var(--rz-muted);
  text-transform:uppercase; letter-spacing:.04em; }

.position-edit { margin:8px 0; padding:12px; background:var(--rz-panel);
  border:1px solid var(--rz-border); border-radius:10px; color:var(--rz-text); }
.pos-edit-grid { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pos-edit-grid input[type=text], .pos-edit-grid input:not([type]) { flex:1 1 160px; }
.pos-edit-grid input[type=month] { flex:0 0 auto; }
.pos-date { color:var(--rz-muted); font-size:13px; }
.pos-remove { display:inline-flex; align-items:center; gap:4px; margin-top:8px;
  color:var(--rz-danger); font-size:13px; }
.add-position { margin-top:10px; border-top:1px dashed var(--rz-border); padding-top:10px; }

/* reconcile position rows */
.reconcile-position { margin:8px 0; padding:12px; background:var(--rz-panel);
  border:1px solid var(--rz-border); border-radius:10px; color:var(--rz-text); }
.reconcile-position .pos-employer { font-weight:600; margin-bottom:6px; }
.reconcile-position input[type=text] { margin:4px 6px 0 0; padding:6px 8px;
  background:var(--rz-input-bg); color:var(--rz-text);
  border:1px solid var(--rz-input-border); border-radius:6px; }

/* actions + buttons */
.form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px;
  padding-top:14px; border-top:1px solid var(--rz-border); }
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px;
  border-radius:8px; font:inherit; font-weight:600; cursor:pointer;
  border:1px solid transparent; }
.btn.primary { background:var(--rz-accent); color:#fff; }
.btn.primary:hover { filter:brightness(1.08); }
.btn.secondary { background:var(--rz-input-bg); color:var(--rz-text);
  border-color:var(--rz-input-border); }
.btn.secondary:hover { border-color:var(--rz-accent); }
.btn.file-picker { position:relative; overflow:hidden; }
.btn.file-picker input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }

/* ---- entry notes, education, card-like edit blocks, locked nav ---- */

/* free-text notes under a role/education entry (view) */
.pos-notes { color:var(--rz-text); font-size:13px; margin-top:6px;
  white-space:pre-wrap; opacity:.9; }

/* editable entry blocks read as cards (match the view cards) */
.position-edit { border-left:3px solid var(--rz-accent); }
.position-edit .entry-notes { width:100%; margin-top:8px; padding:7px 9px;
  font:inherit; color:var(--rz-text); background:var(--rz-input-bg);
  border:1px solid var(--rz-input-border); border-radius:7px; box-sizing:border-box; }
.position-edit .entry-notes:focus { outline:none; border-color:var(--rz-accent); }

/* nav tabs disabled while an upload review is in progress */
.nav-tab.disabled, .nav-tab:disabled { opacity:.4; cursor:not-allowed; }

/* ---- section header actions (Edit / Cancel+Save) in the top-right ---- */
.derived-head { display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin-bottom:10px; }
.derived-head h3 { margin:0; font-size:15px; color:var(--rz-text); }
.head-actions { display:flex; gap:8px; flex-shrink:0; }
/* prefs uses the same derived-fields grid; keep the inline checkbox tidy */
.field-value label.inline { display:inline-flex; align-items:center; gap:6px;
  color:var(--rz-text); font-weight:400; }
.field-value .freeform-preview { margin:0; white-space:pre-wrap; color:var(--rz-text); }

/* red Cancel — solid red, sits where Edit was (far right) */
.btn.danger { background:#dc2626; color:#fff; border-color:#dc2626; }
.btn.danger:hover { background:#b91c1c; border-color:#b91c1c; }
/* disabled Save reads as clearly inert (grey) until the form is dirty */
.btn.primary:disabled,
.btn.primary:disabled:hover {
  background:var(--rz-border); color:var(--rz-muted); border-color:var(--rz-border);
  cursor:not-allowed; filter:none; }

/* queue header: title + swap-budget pill */
#queue .q-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.swaps-pill { font-size:12px; font-weight:600; color:var(--rz-muted);
  border:1px solid var(--rz-border); border-radius:999px; padding:3px 10px; white-space:nowrap; }

/* ============================================================
   Queue + Processed cards — shared grammar (S48/S51/S52).
   Rows are cards; the header is click-to-expand; a .q-detail
   panel reveals the full posting + history.
   ============================================================ */
.q-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.q-row { border:1px solid var(--rz-border); border-radius:12px; background:var(--rz-panel); }
.q-row-top { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; }
.q-open { display:flex; align-items:flex-start; gap:12px; flex:1; min-width:0; cursor:pointer; }
.q-open:hover .headline { text-decoration:underline; text-decoration-color:var(--rz-border); }
.q-row .rank { color:var(--rz-muted); font-variant-numeric:tabular-nums; font-size:13px;
  padding-top:2px; flex:0 0 auto; }
.q-body { min-width:0; flex:1; }
.q-row .headline { font-weight:600; color:var(--rz-text); }
.q-row .headline .employer { color:var(--rz-text); }
.q-row .headline .sep { color:var(--rz-muted); margin:0 6px; }
.q-row .rationale { color:var(--rz-muted); font-size:13px; margin-top:3px; }
.q-row .meta { color:var(--rz-muted); font-size:12px; margin-top:4px; }
.q-row .meta .dot { margin:0 6px; opacity:.5; }
.q-row .row-side { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:0 0 auto; }
.q-row .score { font-size:12px; color:var(--rz-muted); font-weight:600; }
.apply-btn { padding:7px 16px; border:1px solid var(--rz-accent); background:var(--rz-accent);
  color:#fff; border-radius:8px; font:inherit; font-weight:600; cursor:pointer; }
.apply-btn:hover { filter:brightness(1.08); }

/* expand / collapse */
.q-detail { display:none; padding:0 16px 16px; border-top:1px solid var(--rz-border);
  margin:0 0 0; }
.q-row.expanded .q-detail { display:block; padding-top:14px; }
.job-detail h5, .job-activity h5 { margin:14px 0 6px; font-size:12px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--rz-muted); }
.job-detail h5:first-child { margin-top:0; }
.job-desc { color:var(--rz-text); margin:0 0 10px; white-space:pre-wrap; }
.job-facts { display:flex; flex-wrap:wrap; gap:8px; }
.job-facts .fact { font-size:12px; color:var(--rz-text); background:var(--rz-input-bg);
  border:1px solid var(--rz-border); border-radius:999px; padding:3px 10px; }

/* red reject (S49) */
.reject-pop { position:relative; }
.reject-toggle { list-style:none; cursor:pointer; font-size:13px; font-weight:600;
  color:var(--rz-danger); border:1px solid var(--rz-danger); border-radius:8px;
  padding:6px 14px; background:transparent; display:inline-block; }
.reject-toggle::-webkit-details-marker { display:none; }
.reject-toggle:hover { background:var(--rz-danger); color:#fff; }
.reject-panel { position:absolute; right:0; z-index:5; margin-top:6px; width:260px;
  background:var(--rz-panel); border:1px solid var(--rz-border); border-radius:10px;
  padding:12px; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.reject-panel label { display:block; font-size:12px; color:var(--rz-muted); margin-bottom:6px; }
.reject-panel textarea { width:100%; box-sizing:border-box; padding:6px 8px; font:inherit;
  color:var(--rz-text); background:var(--rz-input-bg); border:1px solid var(--rz-input-border);
  border-radius:6px; margin-bottom:8px; }
.btn.sm { padding:5px 12px; font-size:13px; }

/* Processed — green Applied / red Rejected accents (S48) */
#processed { margin-top:26px; }
.q-row.processed.applied  { border-left:4px solid #16a34a; }
.q-row.processed.rejected { border-left:4px solid var(--rz-danger); }
.proc-badge { flex:0 0 auto; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:3px 9px; border-radius:999px; align-self:flex-start; }
.proc-badge.applied  { background:rgba(22,163,74,.15); color:#16a34a; }
.proc-badge.rejected { background:rgba(220,38,38,.15); color:var(--rz-danger); }

/* status pills */
.app-status-pills { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; }
.status-pill { font-size:11px; padding:3px 9px; border-radius:999px; cursor:pointer;
  border:1px solid var(--rz-border); color:var(--rz-muted); text-transform:capitalize;
  white-space:nowrap; user-select:none; }
.status-pill:hover { border-color:var(--rz-accent); }
.status-pill.active { background:var(--rz-accent); color:#fff; border-color:var(--rz-accent); }

/* activity timeline + notes */
.timeline { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.timeline li { display:flex; gap:10px; font-size:13px; padding-left:12px;
  border-left:2px solid var(--rz-border); }
.timeline .tl-when { color:var(--rz-muted); flex:0 0 96px; }
.timeline .tl-what { color:var(--rz-text); }
.note-form { display:flex; gap:8px; margin-top:12px; }
.note-form input { flex:1; padding:6px 9px; font:inherit; color:var(--rz-text);
  background:var(--rz-input-bg); border:1px solid var(--rz-input-border); border-radius:7px; }
.reject-note { margin-top:12px; color:var(--rz-danger); font-size:13px; }

/* pairing mode (S47) */
.pairing-mode .dot.offline { color:var(--rz-muted); }
.pairing-steps { margin:10px 0; padding-left:20px; color:var(--rz-text); line-height:1.7; }
.pairing-steps code { background:var(--rz-input-bg); padding:1px 5px; border-radius:4px; font-size:12px; }

/* ============================================================
   Override the legacy #queue grid layout — the queue rows are
   now expandable cards (.q-row > .q-row-top > .q-open/.row-side,
   + .q-detail). These #queue-scoped rules beat the old ones.
   ============================================================ */
#queue ol.q-list { display:flex; flex-direction:column; gap:10px; }
#queue .q-row { display:block; padding:0; border-radius:12px; align-items:stretch; }
#queue .q-row-top { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; }
#queue .q-open { display:flex; align-items:flex-start; gap:12px; flex:1; min-width:0; cursor:pointer; }
#queue .q-body { flex:1; min-width:0; }
#queue .q-row .rank { flex:0 0 auto; padding-top:2px; text-align:left; }
#queue .q-row .row-side { flex:0 0 auto; display:flex; flex-direction:column;
  align-items:flex-end; gap:6px; }
#queue .q-detail { display:none; padding:0 16px 16px; border-top:1px solid var(--rz-border); }
#queue .q-row.expanded .q-detail { display:block; padding-top:14px; }
#queue .q-open:hover .headline { text-decoration:underline; text-decoration-color:var(--rz-border); }

/* red Reject (beat the legacy grey pill) */
#queue .q-row .reject-toggle { color:var(--rz-danger); border:1px solid var(--rz-danger);
  background:transparent; border-radius:8px; padding:6px 14px; font-size:13px; font-weight:600;
  list-style:none; cursor:pointer; }
#queue .q-row .reject-toggle::-webkit-details-marker { display:none; }
#queue .q-row .reject-toggle:hover { background:var(--rz-danger); color:#fff; }
#queue .q-row .reject-pop { position:relative; }
#queue .q-row .reject-panel { position:absolute; right:0; z-index:5; margin-top:6px; width:260px;
  background:var(--rz-panel); border:1px solid var(--rz-border); border-radius:10px; padding:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.25); text-align:left; }

/* ============================================================
   Processed card v2 — collapsed header only expands; actions
   at the top of the expanded panel; colour-coded status.
   ============================================================ */
.proc-head { align-items:center; }
.proc-head .q-chevron { flex:0 0 auto; color:var(--rz-muted); transition:transform .18s ease; margin-left:4px; }
.q-row.expanded .proc-head .q-chevron { transform:rotate(180deg); }
.proc-head .proc-status { flex:0 0 auto; }

/* colour-coded status tag + active pills (item 2) */
.status-tag { font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px;
  text-transform:capitalize; white-space:nowrap; }
.status-tag.st-no-reply  { background:rgba(148,155,166,.18); color:#9aa0aa; }
.status-tag.st-heard-back{ background:rgba(59,130,246,.18);  color:#60a5fa; }
.status-tag.st-advancing { background:rgba(99,102,241,.20);  color:#8b8cf7; }
.status-tag.st-offer     { background:rgba(22,163,74,.18);   color:#22c55e; }
.status-tag.st-rejected  { background:rgba(220,38,38,.18);   color:#f87171; }

/* actions bar at the top of the expanded panel */
.proc-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding-bottom:14px; margin-bottom:4px; border-bottom:1px solid var(--rz-border); }
.proc-actions .app-status-pills { flex:1; }

/* set-status pills — active uses the status colour */
.app-status-pills { display:flex; flex-wrap:wrap; gap:5px; }
.status-pill { font-size:11px; padding:3px 10px; border-radius:999px; cursor:pointer;
  border:1px solid var(--rz-border); color:var(--rz-muted); text-transform:capitalize;
  white-space:nowrap; user-select:none; }
.status-pill:hover { border-color:var(--rz-accent); color:var(--rz-text); }
.status-pill.active.st-no-reply  { background:#6b7280; color:#fff; border-color:#6b7280; }
.status-pill.active.st-heard-back{ background:#3b82f6; color:#fff; border-color:#3b82f6; }
.status-pill.active.st-advancing { background:#6366f1; color:#fff; border-color:#6366f1; }
.status-pill.active.st-offer     { background:#16a34a; color:#fff; border-color:#16a34a; }
.status-pill.active.st-rejected  { background:#dc2626; color:#fff; border-color:#dc2626; }

/* status history rows — each deletable */
.status-history .hist-row { display:flex; align-items:center; gap:10px; padding:4px 0; }
.hist-when { color:var(--rz-muted); font-size:12px; flex:0 0 96px; }

/* notes — auto-resizing fields, each deletable (item 3/4) */
.notes-block { margin-top:6px; }
.note-row { display:flex; align-items:flex-start; gap:8px; margin:6px 0; }
.note-row.new { margin-top:10px; }
.note-field { flex:1; padding:7px 9px; font:inherit; color:var(--rz-text);
  background:var(--rz-input-bg); border:1px solid var(--rz-input-border); border-radius:8px;
  box-sizing:border-box; line-height:1.4; }
.note-field:focus { outline:none; border-color:var(--rz-accent); }

/* small delete × */
.x-del { flex:0 0 auto; width:26px; height:26px; border-radius:6px; cursor:pointer;
  border:1px solid transparent; background:transparent; color:var(--rz-muted);
  font-size:16px; line-height:1; }
.x-del:hover { border-color:var(--rz-danger); color:var(--rz-danger); background:transparent; }

/* item 1 — a subtle 'arrival' so a moved item reads as landing, not
   duplicating. Short + gentle so re-renders don't flash. */
@keyframes rowArrive { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
/* only Processed rows animate (the 'landing'); the queue rows carry an
   absolutely-positioned reject popover that a stacking context would trap. */
#processed .q-row { animation:rowArrive .2s ease both; }
@media (prefers-reduced-motion: reduce) { #processed .q-row { animation:none; } }

/* processed last-activity date + caught-up empty state */
.proc-date { flex:0 0 auto; color:var(--rz-muted); font-size:12px; font-variant-numeric:tabular-nums;
  cursor:default; }
.proc-when { color:var(--rz-muted); font-size:12px; margin:2px 0 4px; }
.queue-empty { border:1px dashed var(--rz-border); border-radius:12px; padding:22px 18px;
  text-align:center; }
.queue-empty p { margin:0; color:var(--rz-text); }

/* Settings — auto-apply mode as selectable cards + a clear pause button */
#fill-mode .fill-mode-options { display:flex; flex-direction:column; gap:8px; margin:4px 0 2px; }
#fill-mode .fill-mode-options label { display:block; }
#fill-mode .fill-mode-options label button {
  width:100%; text-align:left; padding:12px 14px; font:inherit; cursor:pointer;
  color:var(--rz-text); background:var(--rz-panel);
  border:1px solid var(--rz-border); border-radius:10px; }
#fill-mode .fill-mode-options label button:hover { border-color:var(--rz-accent); }
#fill-mode .fill-mode-options label.active button {
  border-color:var(--rz-accent); background:var(--rz-pickbg);
  box-shadow:inset 3px 0 0 var(--rz-accent); font-weight:600; }
#fill-mode > button { margin-top:12px; padding:8px 14px; font:inherit; font-weight:500;
  cursor:pointer; border-radius:8px; border:1px solid var(--rz-input-border);
  background:var(--rz-input-bg); color:var(--rz-text); }
#fill-mode > button:hover { border-color:var(--rz-accent); }

/* section explanation text (Settings) */
.section-desc { color:var(--rz-muted); font-size:13px; margin:2px 0 12px; line-height:1.5; }
.pause-block { margin-top:16px; padding-top:14px; border-top:1px solid var(--rz-border); }
.paused-since { color:var(--rz-danger); font-size:13px; margin:10px 0 0; font-weight:500; }

/* fill-mode locked while paused */
#fill-mode .fill-mode-options.disabled { opacity:.5; }
#fill-mode .fill-mode-options.disabled label button { cursor:not-allowed; }
#fill-mode .fill-mode-options label button:disabled { cursor:not-allowed; }

/* queue PAUSED banner — a chip + shortcut into Settings */
.paused-banner { display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  margin:0 0 14px; padding:12px 16px; cursor:pointer; font:inherit;
  border:1px solid var(--rz-danger); border-radius:12px;
  background:rgba(220,38,38,.10); color:var(--rz-text); }
.paused-banner:hover { background:rgba(220,38,38,.16); }
.paused-banner .pause-chip { flex:0 0 auto; font-weight:800; font-size:12px; letter-spacing:.06em;
  color:#fff; background:var(--rz-danger); padding:4px 10px; border-radius:999px; white-space:nowrap; }
.paused-banner .pause-when { color:var(--rz-muted); font-size:13px; }

/* "for your information" note: info icon + subtle box so section
   explanations read as guidance, not just more body text */
.info-note { display:flex; gap:10px; align-items:flex-start; margin:2px 0 14px;
  padding:11px 13px; border:1px solid var(--rz-border); border-left:3px solid var(--rz-accent);
  border-radius:8px; background:var(--rz-pickbg); }
.info-ico { flex:0 0 auto; width:18px; height:18px; margin-top:1px; border-radius:50%;
  background:var(--rz-accent); color:#fff; font-size:12px; font-weight:700; font-style:italic;
  font-family:Georgia, 'Times New Roman', serif;
  display:inline-flex; align-items:center; justify-content:center; }
.info-body { color:var(--rz-text); font-size:13px; line-height:1.55; }

/* fill-mode option cards: title + sub-line */
#fill-mode .fill-mode-options label button { display:flex; flex-direction:column; gap:3px; }
#fill-mode .opt-title { font-weight:600; }
#fill-mode .opt-sub { font-size:12px; color:var(--rz-muted); font-weight:400; line-height:1.4; }
#fill-mode .fill-mode-options label.active .opt-sub { color:var(--rz-text); opacity:.85; }
#fill-mode .pause-block h4 { margin:0 0 8px; font-size:14px; color:var(--rz-text); }

/* top-nav signed-in cluster: space between the settings gear and the
   user menu (was cramped) */
.top-nav .signed-in-actions { display:flex; align-items:center; gap:16px; }

/* post-hire: open offers list */
.hired-view .offer-list { margin:6px 0 0; padding-left:20px; color:var(--rz-text); line-height:1.7; }
.hired-view #open-offers { margin-bottom:16px; }

/* ============================================================
   Account view — current plan + pricing comparison (CTA page)
   ============================================================ */
.account-view { max-width:1000px; }
.account-head h2 { margin:0 0 14px; font-size:22px; }

.account-current { display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap; }
.account-current .current-plan-line { margin-top:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.plan-badge { font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  padding:3px 10px; border-radius:999px; }
.plan-badge.free     { background:rgba(148,155,166,.18); color:#9aa0aa; }
.plan-badge.maintain { background:rgba(59,130,246,.18); color:#60a5fa; }
.plan-badge.hunt     { background:rgba(99,102,241,.20); color:#8b8cf7; }
.account-current .renew { color:var(--rz-muted); font-size:12px; }

.pricing-head { margin:26px 0 12px; }
.pricing-head h3 { margin:0 0 4px; font-size:18px; }

.pricing-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:stretch; }
@media (max-width:760px) { .pricing-grid { grid-template-columns:1fr; } }

.pricing-grid .plan-card { position:relative; display:flex; flex-direction:column;
  border:1px solid var(--rz-border); border-radius:14px; padding:22px 20px; background:var(--rz-panel); }
.pricing-grid .plan-card.featured { border-color:var(--rz-accent); box-shadow:0 0 0 1px var(--rz-accent); }
.pricing-grid .plan-card.is-current { background:var(--rz-pickbg); }
.plan-ribbon { position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--rz-accent); color:#fff; font-size:11px; font-weight:700; letter-spacing:.04em;
  padding:3px 12px; border-radius:999px; white-space:nowrap; }
.plan-name-row { display:flex; align-items:center; gap:8px; }
.plan-name-row h3 { margin:0; font-size:18px; }
.current-pill { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--rz-accent); border:1px solid var(--rz-accent); border-radius:999px; padding:2px 7px; }
.plan-card .plan-price { font-size:30px; font-weight:800; margin:10px 0 2px; color:var(--rz-text); }
.plan-card .plan-price .cadence { font-size:13px; font-weight:500; color:var(--rz-muted); }
.plan-tagline { color:var(--rz-muted); font-size:13px; margin:2px 0 14px; min-height:34px; }

.plan-features { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.plan-features li { display:flex; gap:9px; font-size:13px; line-height:1.4; align-items:flex-start; }
.plan-features .feat-mark { flex:0 0 auto; width:17px; height:17px; margin-top:1px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.plan-features li.yes { color:var(--rz-text); }
.plan-features li.yes .feat-mark { background:rgba(22,163,74,.18); color:#22c55e; }
.plan-features li.no { color:var(--rz-muted); }
.plan-features li.no .feat-mark { background:rgba(148,155,166,.15); color:var(--rz-muted); }

.plan-cta { width:100%; padding:10px 14px; font:inherit; font-weight:600; cursor:pointer;
  border-radius:9px; border:1px solid transparent; }
.plan-cta.primary { background:var(--rz-accent); color:#fff; }
.plan-cta.primary:hover { filter:brightness(1.08); }
.plan-cta.secondary { background:var(--rz-input-bg); color:var(--rz-text); border-color:var(--rz-input-border); }
.plan-cta.secondary:hover { border-color:var(--rz-accent); }
.plan-cta.current { background:transparent; color:var(--rz-muted); border-color:var(--rz-border);
  cursor:default; }

.why-card { margin-top:26px; }
.why-card > h3 { margin:0 0 14px; font-size:16px; }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:760px) { .why-grid { grid-template-columns:1fr; } }
.why-item h4 { margin:0 0 4px; font-size:14px; color:var(--rz-text); }
.why-item p { margin:0; color:var(--rz-muted); font-size:13px; line-height:1.5; }

/* user-menu separator */
.user-menu .menu-panel .menu-sep { border:none; border-top:1px solid var(--rz-border); margin:4px 0; }

/* the new pricing cards use .feat-mark, not the legacy ::before check */
#persona-body .pricing-grid .plan-features li::before { content: none; }
#persona-body .pricing-grid .plan-features li { padding-left: 0; }

/* ── Apply overlay (S6/S9-S12): live submission modal + receipt ──────────── */
#app-overlay:empty { display: none; }
.app-scrim {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(2, 6, 23, 0.66);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.app-modal {
  width: min(640px, 100%); max-height: 90vh; overflow-y: auto;
  background: #0f172a; color: #e2e8f0;
  border: 1px solid #1e293b; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  padding: 1.25rem 1.25rem 1rem;
}
.app-modal-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.app-logo {
  width: 42px; height: 42px; flex: none; border-radius: 10px;
  background: #334155; color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.app-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; }
.app-headline { font-weight: 600; }
.app-headline .sep { margin: 0 .4rem; color: #64748b; }
.app-headline .title { color: #cbd5e1; font-weight: 500; }
.app-progress {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem; border-radius: 9px; margin-bottom: 1rem;
  background: #1e293b; color: #cbd5e1; font-size: .92rem;
}
.app-progress.ready { background: #0b3b2e; color: #6ee7b7; }
.app-progress.done  { background: #064e3b; color: #a7f3d0; }
.app-progress.failed { background: #4c1d1d; color: #fca5a5; }
.app-progress .check { font-weight: 700; }
.app-progress .ico {
  width: 20px; height: 20px; border-radius: 50%; background: #dc2626; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem;
}
.app-progress .spinner {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid #475569; border-top-color: #93c5fd;
  animation: app-spin 0.7s linear infinite;
}
@keyframes app-spin { to { transform: rotate(360deg); } }
.app-actions { display: flex; justify-content: flex-end; gap: .6rem; align-items: center; }
.app-hint { color: #94a3b8; font-size: .88rem; }

/* Screen-capture receipt in the Processed detail (S12) */

/* ── Auto Submit toggle (top of Jobs) ───────────────────────────────────── */
.auto-submit-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem; margin-bottom: 1rem;
  background: var(--card, #0f172a); border: 1px solid var(--border, #1e293b);
  border-radius: 10px;
}
.auto-submit-bar.on { border-color: #6366f1; }
.asb-text { display: flex; flex-direction: column; gap: .1rem; }
.asb-title { font-weight: 600; }
.asb-sub { font-size: .85rem; color: var(--muted, #94a3b8); }
.asb-toggle {
  flex: none; width: 48px; height: 28px; border-radius: 999px; padding: 0;
  border: 1px solid var(--border, #334155); background: #334155;
  position: relative; cursor: pointer; transition: background .15s;
}
.asb-toggle.on { background: #6366f1; border-color: #6366f1; }
.asb-knob {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.asb-toggle.on .asb-knob { transform: translateX(20px); }

/* ── Auto Apply schedule bar (bottom of Jobs, S53) ──────────────────────── */
.auto-apply-bar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  position: sticky; bottom: 0; z-index: 5;
  margin-top: 1.25rem; padding: .75rem 1rem;
  background: var(--card, #0f172a); border: 1px solid var(--border, #1e293b);
  border-radius: 10px; box-shadow: 0 -6px 20px rgba(2,6,23,.35);
}
.auto-apply-bar.on { border-color: #6366f1; }
.aab-toggle {
  flex: none; width: 44px; height: 26px; border-radius: 999px; padding: 0;
  border: 1px solid var(--border, #334155); background: #334155;
  position: relative; cursor: pointer; transition: background .15s;
}
.aab-toggle.on { background: #6366f1; border-color: #6366f1; }
.aab-knob {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.aab-toggle.on .aab-knob { transform: translateX(18px); }
.aab-label { font-weight: 500; }
.aab-timeform { display: inline; margin: 0; }
.aab-time {
  font: inherit; padding: .3rem .5rem; border-radius: 6px;
  border: 1px solid var(--border, #334155);
  background: var(--input-bg, #1e293b); color: inherit;
}
.aab-when { color: var(--muted, #94a3b8); font-size: .85rem; margin-left: auto; }

/* ── View receipt affordance + receipt modal (S12) ──────────────────────── */

/* ── Screen-capture lightbox (click to open full-width) ─────────────────── */
#lightbox {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.92); overflow: auto;
  align-items: flex-start; justify-content: center;
  padding: 2rem; cursor: zoom-out;
}
#lightbox img { width: 95vw; max-width: 1400px; height: auto; border-radius: 8px; }