/* The hidden attribute has to mean hidden.
   Browsers implement it as a user-agent `display: none`, which ANY author
   display rule overrides - so `.company-row { display: flex }` quietly made
   every hidden company row visible again. Found by rendering, not by a test:
   the jsdom suites saw `row.hidden === true` and passed, because jsdom
   computes no CSS at all, while the real page kept eleven employers on screen
   under a filter that said only three matched. !important because the whole
   point is that no later display rule may win. */
[hidden] { display: none !important; }

  :root {
    /* InternBoard design system - deep slate/navy for text, emerald for
       primary actions, indigo/violet reserved for AI-labeled features so
       "this came from a model" has one consistent color across the app. */
    --ink: #0F172A;
    --text: #334155;
    --muted: #64748B;
    --muted-strong: #475569;
    --border: #E2E8F0;
    --bg: #F8FAFC;
    --surface: #FFFFFF;
    --surface-soft: #F8FAFC;
    --on-ink: #FFFFFF;

    --accent: #059669;
    --accent-dark: #047857;
    --accent-soft: #ECFDF5;
    --accent-border: #A7F3D0;

    --accent2: #6366F1;
    --accent2-dark: #4F46E5;
    --accent2-soft: #EEF2FF;
    --accent2-border: #C7D2FE;

    --danger: #DC2626;
    --danger-bg: #FEF2F2;
    --danger-border: #FECACA;
    --warn: #B45309;
    --warn-bg: #FFFBEB;
    --warn-border: #FDE68A;
    --good: #059669;
    --good-bg: #ECFDF5;
    --neutral-bg: #F1F5F9;
    /* File-type colors for the Documents cards: Word blue, PDF red. */
    --doc-word: #2563EB;
    --doc-word-bg: #EFF6FF;
    --doc-pdf: #DC2626;
    --doc-pdf-bg: #FEF2F2;

    --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-pop: 0 24px 70px rgba(15, 23, 42, 0.25);

    /* Radius scale - --radius (cards/panels) already existed; --radius-sm
       covers interactive controls (buttons/inputs/icon buttons), which
       previously drifted between 8px and 9px with no shared name behind
       either value. --radius-pill is the existing 100px "fully round" shape
       already used ad hoc by badges/segmented controls, now named. */
    --radius: 12px;
    --radius-sm: 9px;
    --radius-pill: 100px;

    /* Spacing scale - not yet applied everywhere (this file has ~15 years
       of ad hoc padding/margin values), but new/updated rules should use
       these rather than inventing another one-off number. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
  }

  /* Explicit dark toggle wins either direction; prefers-color-scheme is the
     fallback when the visitor hasn't chosen. Same token names, new values -
     everything downstream (badges, banners, buttons) restyles for free. */
  :root[data-theme="dark"] {
    --ink: #F1F5F9;
    --text: #CBD5E1;
    --muted: #94A3B8;
    --muted-strong: #CBD5E1;
    --border: #263248;
    --bg: #0B1220;
    --surface: #131C2E;
    --surface-soft: #182338;
    --on-ink: #0B1220;

    --accent: #10B981;
    --accent-dark: #34D399;
    --accent-soft: #0F2E22;
    --accent-border: #14532D;

    --accent2: #818CF8;
    --accent2-dark: #A5B4FC;
    --accent2-soft: #1E2247;
    --accent2-border: #363B77;

    --danger: #F87171;
    --danger-bg: #2C1616;
    --danger-border: #4C2323;
    --warn: #FBBF24;
    --warn-bg: #2B2210;
    --warn-border: #4A3B15;
    --good: #34D399;
    --good-bg: #0F2E22;
    --neutral-bg: #1B2537;
    --doc-word: #60A5FA;
    --doc-word-bg: #172554;
    --doc-pdf: #F87171;
    --doc-pdf-bg: #3B1219;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-pop: 0 24px 70px rgba(0, 0, 0, 0.6);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
      --ink: #F1F5F9;
      --text: #CBD5E1;
      --muted: #94A3B8;
      --muted-strong: #CBD5E1;
      --border: #263248;
      --bg: #0B1220;
      --surface: #131C2E;
      --surface-soft: #182338;
      --on-ink: #0B1220;
      --accent: #10B981;
      --accent-dark: #34D399;
      --accent-soft: #0F2E22;
      --accent-border: #14532D;
      --accent2: #818CF8;
      --accent2-dark: #A5B4FC;
      --accent2-soft: #1E2247;
      --accent2-border: #363B77;
      --danger: #F87171;
      --danger-bg: #2C1616;
      --danger-border: #4C2323;
      --warn: #FBBF24;
      --warn-bg: #2B2210;
      --warn-border: #4A3B15;
      --good: #34D399;
      --good-bg: #0F2E22;
      --neutral-bg: #1B2537;
      --doc-word: #60A5FA;
      --doc-word-bg: #172554;
      --doc-pdf: #F87171;
      --doc-pdf-bg: #3B1219;
      --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35);
      --shadow-pop: 0 24px 70px rgba(0, 0, 0, 0.6);
    }
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    transition: background 0.15s ease, color 0.15s ease;
  }
  h1, h2, h3, .brand, button {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
  }
  h1, h2, h3 { color: var(--ink); font-weight: 700; }
  strong, b { color: var(--ink); }
  a { color: var(--accent-dark); }

  /* ---- Top bar + tabs ---- */
  .topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .topbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 32px;
  }
  .brand {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    padding: 18px 0;
    white-space: nowrap;
    color: var(--ink);
  }
  .brand span { color: var(--accent); }
  .tabs {
    display: flex;
    gap: 4px;
    flex: 1;
  }
  .tab-btn {
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    padding: 20px 4px;
    margin: 0 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: color 0.12s ease, border-color 0.12s ease;
  }
  .tab-btn:hover { color: var(--ink); }
  .tab-btn.active {
    color: var(--ink);
    border-bottom-color: var(--accent);
  }
  .topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .icon-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--muted);
    padding: 8px;
    margin: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .icon-btn:hover { background: var(--surface-soft); color: var(--ink); opacity: 1; border-color: var(--border); }
  .icon-btn svg { width: 18px; height: 18px; display: block; }
  /* A real <button> since it opens the account menu now - the padding/margin
     resets undo the global `button` rule above, which would otherwise blow
     the 30px circle out to a pill. */
  .profile-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--accent2-soft); color: var(--accent2-dark);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; font-family: 'Space Grotesk', sans-serif;
    border: 1px solid var(--accent2-border); cursor: pointer;
    padding: 0; margin: 0; flex: 0 0 auto;
  }
  .profile-avatar:hover { background: var(--accent2-border); opacity: 1; }

  /* ---- Account menu ---- */
  /* Same popover shape as the filter bars' .msf panel, right-aligned since
     it hangs off the very end of the topbar. Kept as its own small block
     rather than reusing .msf, whose toggle styling is built for filter
     chips, not a round avatar. */
  .account-menu { position: relative; display: inline-flex; }
  .account-menu-panel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow-pop); padding: 6px; min-width: 244px;
    display: none;
  }
  .account-menu.open .account-menu-panel { display: block; }
  .account-menu-label {
    font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase;
    letter-spacing: 0.04em; padding: 6px 10px 8px;
  }
  .account-menu-item {
    display: block; width: 100%; text-align: left;
    background: none; border: none; color: var(--text);
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
    padding: 8px 10px; margin: 0; border-radius: 6px; cursor: pointer;
    /* One line each: a wrapped menu label reads as two separate items. The
       panel is sized to the longest label rather than the labels being
       shortened to fit a narrower panel. */
    white-space: nowrap;
  }
  .account-menu-item:hover:not(:disabled) { background: var(--surface-soft); color: var(--ink); opacity: 1; }
  .account-menu-item:disabled { color: var(--muted); cursor: default; }
  .account-menu-divider { height: 1px; background: var(--border); margin: 6px 4px; }

  /* ---- The employer side's switch button ----
     Indigo rather than the student side's green, since the employer
     workspace is a structurally separate area. Everything inside that
     workspace is styled in employer.css. */
  .employer-switch-btn {
    margin: 0 4px; background: var(--accent2-soft); color: var(--accent2-dark);
    border: 1px solid var(--accent2-border); border-radius: var(--radius-pill);
    font-size: 12.5px; font-weight: 600; padding: 7px 14px; white-space: nowrap;
  }
  .employer-switch-btn:hover { background: var(--accent2-border); opacity: 1; }

  .wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 32px 96px;
  }
  .page-heading {
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
  }
  .page-heading h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
  }
  .page-heading .subtitle {
    color: var(--muted);
    font-size: 14px;
  }

  /* Two pages of one tab, side by side under its heading - My Profile's
     Profile and Answers. A segmented control rather than more sub-tabs,
     because each page has sub-tabs of its own. */
  .page-switch {
    display: inline-flex; gap: 2px; padding: 3px; margin: -12px 0 20px;
    background: var(--neutral-bg); border: 1px solid var(--border); border-radius: var(--radius-pill);
  }
  .page-switch-btn {
    background: none; border: none; margin: 0; padding: 7px 18px; min-height: 36px;
    border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer;
  }
  .page-switch-btn:hover { color: var(--ink); opacity: 1; }
  .page-switch-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
  .page-switch-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .answers-intro { color: var(--muted); font-size: 14px; margin: 0 0 16px; }

  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-card);
  }
  h2 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 16px;
    letter-spacing: -0.005em;
  }
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .field { margin-bottom: 4px; }
  .field.full { grid-column: 1 / -1; }
  label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--muted-strong);
  }
  input, select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    background: var(--surface-soft);
    color: var(--ink);
  }
  input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    background: var(--surface);
  }
  textarea { resize: vertical; min-height: 70px; }
  /* Native <select> otherwise renders with the OS's own dropdown arrow,
     which reads as unstyled next to everything else in this design system -
     a custom chevron (color matched to --muted, a middle gray that reads
     fine on both the light and dark surface tokens) is the standard,
     functionality-preserving way to make it look intentional: still a real
     <select> with the browser's native option list, only the closed-state
     appearance changes. */
  select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394A3B8'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.25a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
    padding-right: 32px;
  }
  .checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
  .checkbox-row input { width: auto; }

  /* A field just auto-filled by AI extraction gets a brief highlight so the
     user's eye finds what changed instead of re-reading the whole form. */
  @keyframes field-pulse {
    0% { box-shadow: 0 0 0 3px var(--accent2-border); border-color: var(--accent2); }
    100% { box-shadow: 0 0 0 0 transparent; border-color: var(--border); }
  }
  .field-updated input, .field-updated select, .field-updated textarea {
    animation: field-pulse 1.8s ease-out;
  }

  button {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: var(--on-ink);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 16px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    transition: opacity 0.12s ease, background 0.12s ease, transform 0.05s ease;
  }
  button:hover { opacity: 0.9; }
  button:active { transform: translateY(1px); }
  button:disabled { opacity: 0.5; cursor: not-allowed; }
  button:disabled:hover { opacity: 0.5; }
  button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .btn-accent { background: var(--accent); color: #FFFFFF; }
  .btn-accent2 { background: var(--accent2); color: #FFFFFF; }
  .btn-danger { background: var(--danger); color: #FFFFFF; }
  .btn-ghost {
    background: none;
    color: var(--muted);
    border: 1px solid var(--border);
  }
  .btn-ghost:hover { background: var(--surface-soft); opacity: 1; color: var(--ink); }
  .btn-ghost.active { color: var(--accent-dark); border-color: var(--accent-border); background: var(--accent-soft); }

  /* ---- Tooltips (native title= upgraded to a small styled bubble) ---- */
  [data-tip] { position: relative; }
  [data-tip]:hover::after, [data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--on-ink);
    font-size: 11.5px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 7px;
    white-space: nowrap;
    box-shadow: var(--shadow-pop);
    z-index: 60;
    pointer-events: none;
  }
  .tip-icon {
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; color: inherit; cursor: help; line-height: 1;
  }

  /* ---- Listing cards ---- */
  .listing {
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 12px;
    position: relative;
  }
  .listing.risk-high { border-left-color: var(--danger); }
  .listing.risk-medium { border-left-color: var(--warn); }
  .listing.risk-low { border-left-color: var(--good); }
  .listing:last-child { margin-bottom: 0; }
  .listing-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }
  .listing-title { font-weight: 700; font-size: 15px; color: var(--ink); }
  .listing-company { color: var(--muted); font-size: 13px; margin-top: 2px; }
  .listing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }
  .badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent-dark);
  }
  .listing-desc { font-size: 13px; color: var(--text); margin-top: 10px; line-height: 1.55; }

  /* Save/Remove as icon buttons next to the title, out of the way of the
     Apply/AI Tools actions below. */
  .detail-icon-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .detail-icon-btn {
    margin: 0; padding: 7px; background: var(--surface); border: 1px solid var(--border);
    color: var(--muted); border-radius: 8px; cursor: pointer;
  }
  .detail-icon-btn svg { width: 16px; height: 16px; display: block; }
  .detail-icon-btn:hover { color: var(--ink); background: var(--surface-soft); opacity: 1; }
  .detail-icon-btn.is-saved { color: var(--accent-dark); border-color: var(--accent-border); background: var(--accent-soft); }
  .empty-note {
    color: var(--muted);
    font-size: 14px;
    text-align: center;
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .empty-note svg { width: 34px; height: 34px; color: var(--border); }
  .empty-note .empty-title { font-weight: 600; color: var(--muted-strong); font-size: 14px; }
  .empty-note .empty-sub { font-size: 13px; max-width: 34ch; }

  /* ---- Dashboard: KPI stat cards ---- */
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
  }
  .stat-tile {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    background: var(--surface-soft);
    position: relative;
  }
  .stat-tile-icon {
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent-dark);
    margin-bottom: 10px;
  }
  .stat-tile-icon svg { width: 16px; height: 16px; }
  .stat-tile .stat-value { font-size: 26px; font-weight: 700; color: var(--ink); font-family: 'Space Grotesk', sans-serif; }
  .stat-tile .stat-label { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .stat-tile.stat-attention { background: var(--warn-bg); border-color: var(--warn-border); }
  .stat-tile.stat-attention .stat-value { color: var(--warn); }
  .stat-tile.stat-attention .stat-tile-icon { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border); }
  .stat-tile.stat-ok .stat-value { color: var(--good); }

  /* ---- Dashboard: task/priority feed ---- */
  .task-feed { display: flex; flex-direction: column; gap: 10px; }
  .task-item {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 14px; background: var(--surface-soft);
  }
  .task-urgency {
    flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  }
  .task-urgency.urgent { background: var(--danger); }
  .task-urgency.soon { background: var(--warn); }
  .task-urgency.plenty { background: var(--good); }
  .task-urgency.info { background: var(--accent2); }
  .task-body { flex: 1; min-width: 0; }
  .task-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
  .task-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .task-tag {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 2px 7px; border-radius: var(--radius-pill); white-space: nowrap;
  }
  .task-tag.urgent { background: var(--danger-bg); color: var(--danger); }
  .task-tag.soon { background: var(--warn-bg); color: var(--warn); }
  .task-tag.plenty { background: var(--good-bg); color: var(--good); }
  .task-tag.info { background: var(--accent2-soft); color: var(--accent2-dark); }
  .task-action {
    margin: 0; padding: 6px 12px; font-size: 12px; flex-shrink: 0;
  }

  /* ---- Dashboard: pipeline funnel ---- */
  .pipeline-funnel { display: flex; flex-direction: column; gap: 10px; }
  .pipeline-row { display: flex; align-items: center; gap: 12px; }
  .pipeline-label { width: 110px; flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--muted-strong); }
  .pipeline-track {
    flex: 1; height: 20px; background: var(--surface-soft); border: 1px solid var(--border);
    border-radius: var(--radius-pill); overflow: hidden; position: relative;
  }
  .pipeline-fill {
    height: 100%; border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--accent2), var(--accent));
    transition: width 0.4s ease;
    min-width: 3px;
  }
  .pipeline-count { width: 26px; text-align: right; flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--ink); font-family: 'Space Grotesk', sans-serif; }

  /* ---- Home: Priorities (primary) + Pipeline (secondary) side by side -
     gives the dashboard actual visual hierarchy instead of three equally-
     weighted stacked cards; collapses to one column under 960px alongside
     this file's other responsive breakpoints. */
  .home-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
  .home-grid .card { margin-bottom: 0; }

  /* ---- Home: the command center ----
     Stat tiles straight on the page (each a button into its list), a row of
     shortcuts into every section, then two columns of cards. */
  .home-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }
  .home-stats .stat-tile {
    display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 14px 16px;
    text-align: left; font-family: inherit; color: inherit; background: var(--surface);
    box-shadow: var(--shadow-card); transition: border-color 0.12s ease, transform 0.12s ease;
  }
  .home-stats .stat-tile:hover { opacity: 1; border-color: var(--accent-border); transform: translateY(-1px); }
  .home-stats .stat-tile.stat-attention { background: var(--warn-bg); }
  .home-stats .stat-tile.stat-attention:hover { border-color: var(--warn); }
  .home-stats .stat-tile-icon { margin: 0; flex-shrink: 0; width: 36px; height: 36px; }
  .home-stats .stat-tile-icon svg { width: 18px; height: 18px; }
  .stat-tile-text { display: flex; flex-direction: column; min-width: 0; }
  .home-stats .stat-tile .stat-value { font-size: 22px; line-height: 1.1; }
  .home-stats .stat-tile .stat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .home-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
  .home-shortcut {
    display: flex; align-items: center; gap: 14px; margin: 0; padding: 18px; min-height: 84px;
    text-align: left; font-family: inherit; color: var(--ink);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-card); transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
  }
  .home-shortcut:hover { opacity: 1; border-color: var(--accent-border); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); }
  .home-shortcut-icon {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent-dark);
  }
  .home-shortcut-icon svg { width: 20px; height: 20px; }
  .home-shortcut-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
  .home-shortcut-title { font-size: 14.5px; font-weight: 700; font-family: 'Space Grotesk', 'Inter', sans-serif; }
  .home-shortcut-line { font-size: 12.5px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .home-shortcut-arrow { flex-shrink: 0; color: var(--muted); transition: transform 0.12s ease, color 0.12s ease; }
  .home-shortcut-arrow svg { width: 16px; height: 16px; display: block; }
  .home-shortcut:hover .home-shortcut-arrow { color: var(--accent-dark); transform: translateX(2px); }

  .home-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .home-card { padding: 22px 24px; }
  .home-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
  .home-card-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
  .home-card-count {
    font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill);
    background: var(--accent-soft); color: var(--accent-dark);
  }
  .home-card-count:empty { display: none; }

  .home-rows { display: flex; flex-direction: column; }
  .home-row {
    display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 10px 8px;
    background: none; border: none; border-bottom: 1px solid var(--border); border-radius: 0;
    text-align: left; font-family: inherit; color: inherit; font-weight: 400;
  }
  .home-row:last-child { border-bottom: none; }
  .home-row:hover { opacity: 1; background: var(--surface-soft); }
  .home-row .company-avatar { flex-shrink: 0; }
  .home-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
  .home-row-title, .home-row-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .home-row-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
  .home-row-meta { font-size: 12px; color: var(--muted); }
  .home-row-age {
    flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill);
    background: var(--neutral-bg); color: var(--muted-strong); white-space: nowrap;
  }

  .home-empty {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 14px 16px; border: 1px dashed var(--border); border-radius: 10px;
    color: var(--muted); font-size: 13px; line-height: 1.5;
  }
  .home-empty strong { color: var(--ink); font-weight: 600; }
  .home-empty--done { border-style: solid; background: var(--good-bg); border-color: var(--accent-border); }
  .home-empty-action { margin: 0; padding: 7px 14px; font-size: 12.5px; }

  .home-strength-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
  .home-strength-pct { font-size: 28px; font-weight: 700; line-height: 1; color: var(--warn); font-family: 'Space Grotesk', sans-serif; }
  .home-strength.is-complete .home-strength-pct { color: var(--good); }
  .home-strength-note { font-size: 12.5px; color: var(--muted); }
  .home-strength-bar { height: 8px; border-radius: var(--radius-pill); background: var(--neutral-bg); overflow: hidden; }
  .home-strength-fill { height: 100%; border-radius: inherit; background: var(--warn); transition: width 0.4s ease; }
  .home-strength.is-complete .home-strength-fill { background: var(--accent); }
  .home-strength-missing { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }

  @media (max-width: 1100px) {
    .home-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 520px) {
    .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .home-shortcuts { gap: 10px; }
    .home-shortcut { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
    .home-shortcut-arrow { display: none; }
    .home-shortcut-line { white-space: normal; }
    .home-card { padding: 18px; }
    .home-stats .stat-tile { gap: 10px; padding: 12px; }
    .home-stats .stat-tile-icon { width: 30px; height: 30px; }
    .home-stats .stat-tile .stat-label { white-space: normal; }
    /* The tag and button drop under the text, so the text keeps the row's width. */
    .home-card .task-item { flex-wrap: wrap; row-gap: 8px; }
    .home-card .task-body { flex-basis: calc(100% - 20px); }
    .home-card .task-tag { margin-left: 20px; margin-right: auto; }
  }

  /* ---- Score/signal disclosure ---- */
  .score-details summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    font-size: 12px;
    font-weight: 600;
    list-style: none;
    color: var(--text);
  }
  .score-details summary::-webkit-details-marker { display: none; }
  .score-details[open] summary { border-color: var(--accent); color: var(--accent-dark); }

  /* ---- Browse: master-detail layout ----
     Fixed-frame split view: the listings list and the posting detail are
     each capped to --browse-pane-height and scroll independently, so
     scrolling through a long posting can never push the filter bar,
     toggle, or the listings list themselves off-screen. */
  .browse-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 20px;
    align-items: start;
    /* Tall enough for eight compact cards on a laptop screen; the detail
       pane (sticky at 88px) still ends above the bottom of the window. */
    --browse-pane-height: calc(100vh - 150px);
  }
  .listing-list-pane {
    max-height: var(--browse-pane-height, calc(100vh - 200px));
    overflow-y: auto;
    padding-right: 4px;
  }
  /* A card: avatar | title, who and where, the facts | age. Everything a
     student judges a posting by, at a size that fits ten to a screen. */
  .listing-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 5px;
    cursor: pointer;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 11px;
    align-items: start;
  }
  .listing-item:hover { border-color: var(--muted); }
  .listing-item.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
  .listing-item .company-avatar { width: 30px; height: 30px; margin-top: 1px; font-size: 13px; }
  .listing-item-body { min-width: 0; }
  .listing-item-title {
    font-weight: 700; font-size: 14px; line-height: 1.28; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .listing-item-title mark, .detail-desc mark {
    background: var(--warn-bg); color: inherit; border-radius: 3px; padding: 0 1px;
    box-shadow: 0 -1px 0 var(--warn-border) inset;
  }
  .listing-item-where {
    display: flex; gap: 6px; margin-top: 2px; font-size: 12.5px; color: var(--muted-strong);
    white-space: nowrap; overflow: hidden; min-width: 0;
  }
  .listing-item-company { font-weight: 600; flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
  .listing-item-place { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
  .listing-item-place::before { content: '·'; margin-right: 6px; color: var(--muted); }
  .listing-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; }
  /* No facts and no tags: no row, rather than an empty gap under the name. */
  .listing-item-meta:not(:has(.listing-fact, .ghost-badge-icon, .listing-tag)) { display: none; }
  .listing-fact {
    font-size: 11.5px; font-weight: 600; line-height: 16px; padding: 0 7px; border-radius: var(--radius-pill);
    background: var(--neutral-bg); color: var(--muted-strong);
  }
  .listing-fact-pay { background: var(--good-bg); color: var(--good); }
  .listing-fact-term { background: var(--accent2-soft); color: var(--accent2-dark); }
  .listing-fact-pay.is-unpaid { background: var(--neutral-bg); color: var(--muted); }
  .listing-fact-hidden { background: var(--neutral-bg); color: var(--muted); }
  .listing-item.is-hidden-by-me .listing-item-body,
  .listing-item.is-hidden-by-me .company-avatar { opacity: 0.6; }
  .browse-hidden-link { color: var(--muted); }
  .listing-item-tags { display: inline-flex; gap: 5px; }
  .listing-item-tags:empty { display: none; }
  .listing-tag {
    font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-pill);
    border: 1px solid var(--accent2-border); color: var(--accent2-dark); background: var(--accent2-soft);
  }
  .listing-tag.saved { border-color: var(--border); color: var(--muted-strong); background: none; }
  .listing-item-age { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; padding-top: 2px; }
  .listing-item:hover .listing-item-age, .listing-item:focus-within .listing-item-age { visibility: hidden; }
  .listing-item-hover-actions {
    position: absolute; top: 8px; right: 8px;
    display: flex; gap: 4px;
    opacity: 0; transition: opacity 0.1s ease;
  }
  .listing-item:hover .listing-item-hover-actions,
  .listing-item:focus-within .listing-item-hover-actions { opacity: 1; }
  .listing-item-hover-actions button {
    margin: 0; padding: 5px; background: var(--surface); border: 1px solid var(--border);
    color: var(--muted); border-radius: 7px; box-shadow: var(--shadow-card);
  }
  .listing-item-hover-actions button svg { width: 14px; height: 14px; display: block; }
  .listing-item-hover-actions button:hover { color: var(--ink); opacity: 1; }
  .listing-item-hover-actions button.is-saved { color: var(--accent-dark); border-color: var(--accent-border); background: var(--accent-soft); }
  .listing-item-hover-actions button.is-hidden { color: var(--danger); border-color: var(--danger-border); background: var(--danger-bg); }

  /* ---- Unified search bar (scope toggle + search input + web-search
     action, one bordered control instead of three stacked-looking pieces) ---- */
  .search-combo {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    margin-bottom: 14px;
    overflow: hidden;
  }
  .search-combo:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
  /* Where to search: a segmented pill whose selected side is filled. The
     two sides of the old switch were the same solid colour, so there was no
     telling which one was on. */
  .search-combo .search-scope {
    display: flex; flex-shrink: 0; gap: 2px; margin: 5px 0 5px 5px; padding: 3px;
    border-radius: 8px; background: var(--neutral-bg);
  }
  .search-combo .search-scope button {
    margin: 0; padding: 6px 12px; border-radius: 6px; background: none; color: var(--muted-strong);
    font-size: 13px; font-weight: 600; white-space: nowrap;
  }
  .search-combo .search-scope button:hover { color: var(--ink); opacity: 1; }
  .search-combo .search-scope button[aria-pressed="true"] { background: var(--accent2); color: #FFFFFF; box-shadow: var(--shadow-card); }
  .search-combo-icon { width: 17px; height: 17px; color: var(--muted); flex: none; align-self: center; margin-left: 12px; }
  .search-combo input[type="text"] {
    flex: 1; min-width: 160px; border: none; border-radius: 0; background: var(--surface); padding-left: 8px;
  }
  .search-combo input[type="text"]:focus { outline: none; background: var(--surface); }
  .search-combo #browseWebSearchBtn { margin: 5px; border-radius: 7px; flex-shrink: 0; }

  /* ---- Filter bars + multi-select dropdown ---- */
  .filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
  }
  .filter-bar input[type="text"] { flex: 1; min-width: 160px; }
  .filter-bar select { width: auto; }
  .filter-bar label.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    margin: 0;
  }
  .filter-bar label.checkbox-inline input { width: auto; }
  .filter-count { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
  .search-hint { font-size: 12px; color: var(--muted); margin: -6px 0 10px; min-height: 0; }
  .search-hint:empty { display: none; }
  /* The exact-company filter set from Sources - a facet, not search text. */
  .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    padding: 4px 6px 4px 10px;
    border: 1px solid var(--accent-border);
    background: var(--accent-soft);
    border-radius: 999px;
  }
  .filter-chip[hidden] { display: none; }
  .filter-chip button {
    margin: 0;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.4;
  }

  /* Sort + "More filters" (Posting age/Hide ghost jobs/page size) pushed to
     the far right of the bar, separated by a divider from Work mode/Salary/
     Location - those three stay as always-visible chips since they're the
     filters actually reached for often; the rest live one click away. */
  .filter-bar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
  /* One click each for what students filter by most. */
  .quick-filters { display: flex; gap: 6px; flex-wrap: wrap; }
  .quick-chip {
    margin: 0; padding: 7px 12px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600;
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    font-family: 'Inter', sans-serif;
  }
  .quick-chip:hover { border-color: var(--muted); opacity: 1; }
  .quick-chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
  .filter-clear { font-size: 13px; }
  .filter-bar .filter-bar-divider { height: 22px; align-self: center; }
  .filter-bar-divider { width: 1px; align-self: stretch; background: var(--border); }
  .msf-panel-label { font-size: 11.5px; font-weight: 700; color: var(--muted-strong); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
  .msf-panel-divider { height: 1px; background: var(--border); margin: 10px -10px; }
  #msfMore .msf-panel { left: auto; right: 0; }

  .msf { position: relative; display: inline-block; }
  .msf-toggle {
    margin: 0; background: var(--surface); color: var(--text);
    border: 1px solid var(--border); font-weight: 500; font-size: 13px;
    padding: 9px 12px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  }
  .msf-toggle:hover { background: var(--surface-soft); opacity: 1; }
  .msf-toggle.has-value { border-color: var(--accent-border); color: var(--accent-dark); background: var(--accent-soft); }
  .msf-toggle svg { width: 13px; height: 13px; }
  .msf-panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow-pop); padding: 10px; min-width: 190px;
    display: none;
  }
  .msf.open .msf-panel { display: block; }
  .msf-panel-wide { min-width: 300px; padding: 12px; }
  .msf-panel-wide .field { margin-bottom: 8px; }
  #locationMapContainer { height: 200px; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 10px; border: 1px solid var(--border); }
  .leaflet-container { font-family: 'Inter', sans-serif; }
  .msf-option {
    display: flex; align-items: center; gap: 8px; padding: 6px 4px;
    font-size: 13px; color: var(--text); border-radius: 6px; cursor: pointer;
  }
  .msf-option:hover { background: var(--surface-soft); }
  .msf-option input { width: auto; margin: 0; }
  /* Term and Field list what is in view, which can run long. */
  .msf-panel-scroll { max-height: 320px; overflow-y: auto; min-width: 230px; }
  .msf-count { color: var(--muted); font-size: 12px; margin-left: auto; padding-left: 8px; }
  .msf-empty { font-size: 12.5px; color: var(--muted); padding: 6px 4px; }

  /* Both panes of the browse split-view cap at the same height and scroll
     internally, so reading a long posting never drags the page (and the
     listings sidebar) away with it - see the fixed-frame layout note above
     .browse-layout. */
  /* Nothing to open beside the list (no results, or the whole-web search
     not run yet): the list and its empty state take the whole width rather
     than sitting next to an empty "Select a listing" box. */
  .browse-layout.is-solo { grid-template-columns: 1fr; }
  .browse-layout.is-solo .detail-pane { display: none; }
  .browse-layout.is-solo .listing-list-pane { max-height: none; }
  .empty-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
  .empty-actions button { margin: 0; }
  .empty-note .empty-sub { max-width: 52ch; }

  .detail-head { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
  .detail-head .company-avatar { width: 40px; height: 40px; font-size: 16px; border-radius: 10px; }
  .detail-head .listing-title { font-size: 17px; line-height: 1.3; }
  .detail-provenance { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
  .detail-track { display: inline-flex; align-items: center; gap: 6px; }
  .detail-track svg { width: 14px; height: 14px; }
  .detail-track.is-tracked { color: var(--warn); border-color: var(--warn-border); background: var(--warn-bg); }
  .detail-original { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; text-decoration: none; margin-left: auto; }
  .detail-original:hover { background: var(--surface-soft); color: var(--ink); }

  .detail-pane {
    position: sticky; top: 88px; min-height: 200px;
    max-height: var(--browse-pane-height, calc(100vh - 200px));
    overflow-y: auto;
  }
  .detail-desc {
    font-size: 14px;
    color: var(--text);
    line-height: 1.7;
    margin-top: 16px;
    white-space: pre-wrap;
    max-width: 68ch;
  }
  .detail-desc .desc-heading {
    display: block;
    font-weight: 700;
    color: var(--ink);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 18px 0 2px;
  }
  .detail-desc .desc-heading:first-child { margin-top: 0; }
  /* Apply stays the one prominent, always-visible action; the three AI
     tools (Resume Help/Check My Match/Analyze Job) are grouped behind a
     single dropdown instead of three same-weight buttons competing with it
     - see the "AI Tools" .msf markup in renderDetailPane. */
  .detail-actions-top { margin-top: 16px; }
  .detail-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
  }
  .detail-actions button { margin-top: 0; }
  .ai-tools-menu .msf-panel { min-width: 200px; padding: 6px; }
  .ai-tools-item {
    display: block; width: 100%; text-align: left; margin: 0;
    background: none; border: none; border-radius: 6px;
    padding: 8px 10px; font-size: 13px; font-weight: 500; color: var(--text);
  }
  .ai-tools-item:hover { background: var(--surface-soft); opacity: 1; }

  .quick-apply-form {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    display: none;
  }
  .quick-apply-note {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 12px;
    line-height: 1.5;
  }

  /* ---- Find My Matches ---- */
  .sync-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap;
    background: var(--accent2-soft); border: 1px solid var(--accent2-border);
    border-radius: 10px; padding: 12px 16px; margin-bottom: 18px;
  }
  .sync-banner-text { font-size: 13px; color: var(--accent2-dark); line-height: 1.5; }
  .sync-banner-text b { color: var(--accent2-dark); }
  .sync-banner button { margin: 0; flex-shrink: 0; }

  .keyword-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }
  .keyword-row input[type="text"] { flex: 1; }
  .keyword-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    white-space: nowrap;
    margin: 0;
    font-size: 13px;
  }
  .keyword-row input[type="checkbox"] { width: auto; }
  .keyword-row .remove-keyword {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
    margin: 0;
  }
  .keyword-row .remove-keyword:hover { color: var(--danger); }
  .resume-picker-saved {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-size: 13px;
    color: var(--accent-dark);
  }
  .resume-picker-saved .resume-picker-switch { margin: 0; padding: 3px 9px; font-size: 12px; }
  .resume-picker-meta { color: var(--muted); font-weight: 400; }

  .experience-row, .education-row, .language-row {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 12px;
    position: relative;
  }
  .experience-row .remove-experience, .education-row .remove-education, .language-row .remove-language {
    position: absolute; top: 10px; right: 12px;
    background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; padding: 0 4px; margin: 0;
  }
  .experience-row .remove-experience:hover, .education-row .remove-education:hover, .language-row .remove-language:hover { color: var(--danger); }

  .keyword-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
  .keyword-suggestion {
    margin: 0; padding: 5px 11px; font-size: 12px; font-weight: 500;
    background: var(--accent2-soft); color: var(--accent2-dark); border: 1px dashed var(--accent2-border);
  }
  .keyword-suggestion:hover { background: var(--accent2-border); opacity: 1; }

  .match-result {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 14px;
  }
  .match-score-badge {
    font-size: 24px;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--accent-dark);
    white-space: nowrap;
  }

  /* ---- AI reasoning progress (Find Matches + Manage scanner) ---- */
  .ai-progress-step {
    display: flex; align-items: center; gap: 8px; margin: 7px 0; font-size: 13px;
  }
  .ai-progress-step .ai-progress-icon {
    width: 18px; text-align: center; flex-shrink: 0; font-family: monospace;
  }
  .ai-progress-step.done { color: var(--ink); }
  .ai-progress-step.active { color: var(--accent2-dark); font-weight: 600; }
  .ai-progress-step.active .ai-progress-icon { animation: pulse-dot 1s ease-in-out infinite; }
  .ai-progress-step.pending { color: var(--muted); }
  @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
  .ai-progress-elapsed { font-size: 11.5px; color: var(--muted); margin-top: 6px; font-family: 'Space Grotesk', sans-serif; }

  .company-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  .company-row:last-child { border-bottom: none; }
  .company-name { font-weight: 700; color: var(--ink); }
  .company-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
  .company-actions { display: flex; gap: 8px; }
  .small-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--ink);
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 7px;
    cursor: pointer;
    margin: 0;
  }
  .small-btn:hover { background: var(--surface-soft); }
  .small-btn:disabled { opacity: 0.6; cursor: default; }

  .source-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
  }
  .source-badge.greenhouse { background: var(--good-bg); color: var(--good); }
  .source-badge.manual { background: var(--neutral-bg); color: var(--muted); }
  .source-badge.ai { background: var(--accent2-soft); color: var(--accent2-dark); cursor: help; }

  .ghost-badge-icon { display: inline-flex; align-items: center; cursor: help; vertical-align: middle; }
  .ghost-badge-icon svg { width: 14px; height: 14px; display: block; }
  .ghost-badge-icon.ghost-high { color: var(--danger); }
  .ghost-badge-icon.ghost-medium { color: var(--warn); }
  .ghost-badge-icon.ghost-low { color: var(--good); }

  .badge.pay-paid { background: var(--good-bg); color: var(--good); }
  .badge.pay-unpaid { background: var(--neutral-bg); color: var(--muted); }
  .badge.pay-unknown { background: var(--warn-bg); color: var(--warn); }

  .deadline-line {
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
  }
  .deadline-line.deadline-urgent { color: var(--danger); }
  .deadline-line.deadline-soon { color: var(--warn); }
  .deadline-line.deadline-plenty { color: var(--good); }
  .deadline-line.deadline-expired { color: var(--danger); }
  .deadline-line.deadline-unknown { color: var(--muted); font-weight: 400; }

  .apply-btn {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 10px;
    font-size: 13px;
    background: var(--ink);
    color: var(--on-ink);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
  }
  .apply-btn:hover { opacity: 0.9; }

  /* ---- Projects: card grid + drawer ---- */
  .project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }
  .project-card {
    border: 1px solid var(--border); border-radius: 12px; padding: 18px;
    background: var(--surface); display: flex; flex-direction: column; gap: 10px;
  }
  .project-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
  .project-card-title { font-weight: 700; font-size: 15px; color: var(--ink); }
  .project-role-pill {
    display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 600;
    background: var(--accent2-soft); color: var(--accent2-dark); padding: 3px 9px; border-radius: var(--radius-pill);
  }
  .project-card-desc { font-size: 13px; color: var(--text); line-height: 1.55; flex: 1; }
  .project-quote {
    font-size: 12.5px; color: var(--accent-dark); background: var(--accent-soft);
    border-left: 3px solid var(--accent); padding: 8px 10px; border-radius: 0 8px 8px 0; line-height: 1.5;
  }
  .project-links { display: flex; gap: 10px; }
  .project-links a {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
    color: var(--muted-strong); text-decoration: none; border: 1px solid var(--border);
    padding: 5px 10px; border-radius: 7px;
  }
  .project-links a:hover { color: var(--ink); background: var(--surface-soft); }
  .project-links a svg { width: 13px; height: 13px; }
  .project-card-footer { display: flex; justify-content: flex-end; }

  .drawer-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 100;
    display: none;
  }
  .drawer-overlay.open { display: block; }
  .drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw);
    background: var(--surface); z-index: 101; box-shadow: var(--shadow-pop);
    padding: 28px; overflow-y: auto;
    transform: translateX(100%); transition: transform 0.2s ease;
  }
  .drawer-overlay.open .drawer { transform: translateX(0); }
  .drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
  .drawer-close { margin: 0; background: none; border: 1px solid var(--border); color: var(--muted); padding: 6px 10px; }

  /* ---- Sub-tabs (AI Profile, Tracker) + the Opportunities mode switch ----
     .opp-mode-toggle/.opp-mode-toggle-btn share this exact ruleset (rather
     than duplicating it) so Opportunities' browse/search/matches switch
     reads as the same "second-level navigation inside a tab" pattern as
     Profile's and Tracker's sub-tabs, instead of the segmented-pill look
     .view-toggle uses elsewhere for actual view-MODE toggles (list/kanban) -
     a different concept that still needs its own distinct treatment. */
  .subtabs, .opp-mode-toggle { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
  .subtab-btn, .opp-mode-toggle-btn {
    background: none; border: none; margin: 0; padding: 10px 4px; margin-right: 22px;
    font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer;
    border-bottom: 2px solid transparent; border-radius: 0;
  }
  .subtab-btn:hover, .opp-mode-toggle-btn:hover { color: var(--ink); }
  /* Eight My Profile tabs don't fit a tablet or phone: the row scrolls
     sideways on its own instead of widening the whole page, and a label
     stays on one line rather than stacking into three. */
  .subtabs { overflow-x: auto; scrollbar-width: none; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtabs .subtab-btn { white-space: nowrap; flex-shrink: 0; }
  .subtab-btn.active, .opp-mode-toggle-btn.active { color: var(--ink); border-bottom-color: var(--accent2); }
  .subtab-panel { display: none; }
  .subtab-panel.active { display: block; }

  .dropzone {
    border: 2px dashed var(--border); border-radius: 12px; padding: 26px 20px;
    text-align: center; background: var(--surface-soft); cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
  }
  .dropzone:hover, .dropzone.drag-over { border-color: var(--accent2); background: var(--accent2-soft); }
  .dropzone svg { width: 28px; height: 28px; color: var(--muted); margin-bottom: 8px; }
  .dropzone .dz-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
  .dropzone .dz-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
  .dropzone .dz-file { font-size: 12.5px; color: var(--accent2-dark); font-weight: 600; margin-top: 8px; }
  .dz-spinner {
    width: 22px; height: 22px; margin: 0 auto 10px;
    border: 2.5px solid var(--accent2-border); border-top-color: var(--accent2);
    border-radius: 50%; animation: spin 0.7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ---- My Profile > Documents (profile-documents.js) ----
     Two columns of file cards: resumes (the Primary slot, other versions,
     an Add tile) and cover letters. Each card is a small "page" with its
     type on it, the name, a chip or date, and a ... menu. */
  .docs-title { margin-bottom: 18px; }
  .docs-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .docs-column {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface-soft); padding: 16px 16px 14px; min-width: 0;
  }
  .docs-column-head { position: relative; display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
  .docs-column-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
  .doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
  .doc-list { display: contents; }
  .doc-list-message { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); padding: 6px 2px; }
  .docs-caption {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 12px; font-size: 12px; color: var(--muted);
  }
  .docs-status { font-size: 12.5px; color: var(--muted-strong); margin-top: 6px; }
  .docs-status:empty { display: none; }

  .doc-card {
    position: relative; display: flex; flex-direction: column; gap: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 12px 10px; min-height: 168px; min-width: 0;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
  }
  .doc-card:hover, .doc-card.menu-open { border-color: var(--muted); box-shadow: var(--shadow-card); }
  .doc-thumb {
    position: relative; height: 78px; border-radius: 6px; overflow: hidden;
    background: var(--neutral-bg); border: 1px solid var(--border);
    display: flex; align-items: flex-end; padding: 8px;
  }
  .doc-thumb::after {
    /* the folded corner of the page */
    content: ""; position: absolute; top: 0; right: 0; width: 16px; height: 16px;
    background: linear-gradient(225deg, var(--surface) 50%, var(--border) 50%);
  }
  .doc-thumb-lines {
    position: absolute; left: 10px; right: 22px; top: 12px; height: 26px;
    background: repeating-linear-gradient(to bottom, var(--border) 0 3px, transparent 3px 8px);
    opacity: 0.9;
  }
  .doc-thumb-ext {
    position: relative; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em;
    color: var(--on-ink); background: var(--muted); border-radius: 4px; padding: 2px 6px;
  }
  .doc-thumb--pdf { background: var(--doc-pdf-bg); }
  .doc-thumb--pdf .doc-thumb-ext { background: var(--doc-pdf); }
  .doc-thumb--docx, .doc-thumb--doc { background: var(--doc-word-bg); }
  .doc-thumb--docx .doc-thumb-ext, .doc-thumb--doc .doc-thumb-ext { background: var(--doc-word); }
  .doc-name {
    font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    word-break: break-word; padding-right: 22px;
  }
  .doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: auto; padding-right: 26px; }
  .doc-date { font-size: 11px; color: var(--muted); }
  .doc-chip {
    display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
    border-radius: var(--radius-pill); padding: 1px 8px; border: 1px solid; white-space: nowrap;
  }
  .doc-chip--primary { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); }
  .doc-chip--default { color: var(--accent-dark); background: var(--accent-soft); border-color: var(--accent-border); }

  .doc-menu-btn {
    position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px; margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: 7px; color: var(--muted); cursor: pointer;
  }
  .doc-menu-btn svg { width: 16px; height: 16px; fill: currentColor; }
  .doc-menu-btn:hover, .doc-menu-btn[aria-expanded="true"] { background: var(--neutral-bg); color: var(--ink); border-color: var(--border); }
  .doc-menu {
    position: absolute; right: 6px; bottom: 38px; z-index: 30; min-width: 150px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow-pop); padding: 4px; display: flex; flex-direction: column;
  }
  .doc-menu[hidden] { display: none; }
  .doc-menu-item {
    margin: 0; text-align: left; background: none; border: none; border-radius: 7px;
    padding: 7px 10px; font-size: 13px; color: var(--ink); cursor: pointer; width: 100%;
  }
  .doc-menu-item:hover, .doc-menu-item:focus-visible { background: var(--neutral-bg); outline: none; }
  .doc-menu-item--danger { color: var(--danger); }
  .doc-menu-item--danger:hover, .doc-menu-item--danger:focus-visible { background: var(--danger-bg); }

  /* The Primary slot: an upload prompt while empty, a card once filled. */
  .doc-primary { position: relative; min-height: 168px; border-radius: 10px; }
  .doc-primary--empty {
    grid-column: span 2; border: 2px dashed var(--accent2-border); background: var(--surface);
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 16px; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease;
  }
  .doc-primary--empty:hover, .doc-primary--empty:focus-visible, .doc-primary.drag-over {
    border-color: var(--accent2); background: var(--accent2-soft); outline: none;
  }
  .doc-primary--filled .doc-card { height: 100%; border-color: var(--warn-border); }
  .doc-primary.drag-over .doc-card { border-color: var(--accent2); box-shadow: 0 0 0 3px var(--accent2-soft); }
  .doc-primary-prompt svg { width: 28px; height: 28px; color: var(--accent2); margin-bottom: 6px; }
  .doc-primary .dz-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
  .doc-primary .dz-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .doc-primary-loading { text-align: center; padding: 34px 8px; }
  .doc-types { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); margin-top: 6px; }

  /* An empty list is announced to screen readers; on screen the dashed
     Add tile next to it already is the empty state, and a second empty
     tile only pushed it onto its own row. */
  .doc-empty {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .doc-add-tile {
    margin: 0; min-height: 168px; border-radius: 10px; border: 2px dashed var(--border);
    background: transparent; color: var(--muted-strong); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font: inherit; transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
  }
  .doc-add-tile:hover, .doc-add-tile:focus-visible, .doc-add-tile.drag-over {
    border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); outline: none;
  }
  .doc-add-plus {
    width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1; background: var(--neutral-bg); margin-bottom: 4px;
  }
  .doc-add-tile:hover .doc-add-plus, .doc-add-tile.drag-over .doc-add-plus { background: var(--surface); }
  .doc-add-title { font-size: 12.5px; font-weight: 700; }

  /* ---- (i) toggletips: the longer explanations, one click away ---- */
  .info-tip {
    width: 18px; height: 18px; margin: 0; padding: 0; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; vertical-align: 1px;
    border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
    color: var(--muted); font: italic 700 11px/1 Georgia, serif; cursor: pointer;
  }
  .info-tip:hover, .info-tip[aria-expanded="true"] { color: var(--accent2-dark); border-color: var(--accent2-border); background: var(--accent2-soft); }
  .info-tip-pop {
    position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; max-width: 360px; width: max-content;
    background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow-pop); padding: 10px 12px; font-size: 12.5px; font-weight: 400; font-style: normal;
    line-height: 1.5; text-transform: none; letter-spacing: normal;
  }
  .info-tip-pop[hidden] { display: none; }
  .tab-intro {
    position: relative; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 13px; color: var(--muted); margin: 0 0 14px;
  }
  .tab-intro--spaced { margin-top: 20px; }
  .tab-intro--flush { margin: 0; }
  .tab-subhead { font-size: 14px; font-weight: 700; color: var(--ink); margin: 26px 0 4px; }
  .checkbox-row { position: relative; display: flex; align-items: center; gap: 6px; }

  /* ---- My Profile header: completeness bar + "still missing" chips ---- */
  .profile-head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .profile-head-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .profile-head-main h2 { margin: 0; }
  .profile-progress {
    width: 160px; height: 8px; border-radius: var(--radius-pill); background: var(--neutral-bg); overflow: hidden;
  }
  .profile-progress-fill {
    height: 100%; width: 0; border-radius: inherit; background: var(--warn);
    transition: width 0.4s ease;
  }
  .profile-progress.is-complete .profile-progress-fill { background: var(--accent); }
  .profile-progress-pct { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
  .profile-missing { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
  .profile-missing--done { color: var(--accent-dark); font-weight: 600; }
  .missing-chip {
    margin: 0; padding: 3px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
    color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius-pill);
  }
  .missing-chip::after { content: " \2192"; }
  .missing-chip:hover { border-color: var(--warn); }

  @media (max-width: 860px) {
    .docs-columns { grid-template-columns: 1fr; }
  }
  @media (max-width: 480px) {
    .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .docs-column { padding: 12px; }
    .profile-progress { width: 110px; }
    .info-tip-pop { max-width: calc(100vw - 64px); }
  }

  .tag-input {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 9px;
    background: var(--surface-soft); min-height: 42px;
  }
  .tag-input:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--surface); }
  .tag-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--accent-soft); color: var(--accent-dark);
    font-size: 12px; font-weight: 600; padding: 4px 6px 4px 10px; border-radius: var(--radius-pill);
  }
  .tag-pill button {
    margin: 0; padding: 0; background: none; border: none; color: inherit;
    width: 16px; height: 16px; border-radius: 50%; font-size: 13px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }
  .tag-pill button:hover { background: rgba(0,0,0,0.08); opacity: 1; }
  .tag-input-field {
    border: none; outline: none; flex: 1; min-width: 100px; padding: 4px; background: none; margin: 0;
  }

  /* ---- Applications ---- */
  .application-row {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
  }
  .application-row:last-child { margin-bottom: 0; }
  .application-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
  }
  .application-listing { font-weight: 700; font-size: 14px; color: var(--ink); }
  .application-student { color: var(--muted); font-size: 12px; margin-top: 2px; }

  /* ---- Applications: visual stepper ---- */
  .stepper { display: flex; align-items: center; margin-top: 16px; overflow-x: auto; padding-bottom: 2px; }
  .stepper-step { display: flex; align-items: center; flex: 1; min-width: 84px; }
  .stepper-dot {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; border: 2px solid var(--border); color: var(--muted);
    background: var(--surface);
  }
  .stepper-line { flex: 1; height: 2px; background: var(--border); margin: 11px 2px 0; align-self: flex-start; }
  .stepper-label { font-size: 10.5px; color: var(--muted); text-align: center; margin-top: 5px; white-space: nowrap; }
  .stepper-step.done .stepper-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
  .stepper-step.done .stepper-label { color: var(--muted-strong); }
  .stepper-step.done + .stepper-step .stepper-line, .stepper-line.filled { background: var(--accent); }
  .stepper-step.current .stepper-dot { background: var(--accent2); border-color: var(--accent2); color: #fff; box-shadow: 0 0 0 3px var(--accent2-soft); }
  .stepper-step.current .stepper-label { color: var(--accent2-dark); font-weight: 700; }
  .stepper-col { display: flex; flex-direction: column; align-items: center; }
  .stepper-status-badge {
    display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill);
    background: var(--danger-bg); color: var(--danger); margin-top: 14px;
  }

  .status-select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
  }

  /* ---- Applications: AI action plan callouts ---- */
  .plan-panel {
    border-radius: 10px; padding: 12px 14px; margin-top: 12px; font-size: 13px; line-height: 1.6;
    border: 1px solid var(--border);
  }
  .plan-panel .plan-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
  }
  .plan-panel.plan-immediate { background: var(--accent2-soft); border-color: var(--accent2-border); }
  .plan-panel.plan-immediate .plan-title { color: var(--accent2-dark); }
  .plan-panel.plan-network { background: var(--surface-soft); border-color: var(--border); }
  .plan-panel.plan-network .plan-title { color: var(--muted-strong); }
  .plan-panel.plan-resume { background: var(--accent-soft); border-color: var(--accent-border); }
  .plan-panel.plan-resume .plan-title { color: var(--accent-dark); }
  .plan-panel ul { margin: 0; padding-left: 18px; }
  .insight-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: none; }
  .insight-assessment { font-size: 13px; line-height: 1.5; margin-bottom: 10px; }

  .ai-banner {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--warn);
    margin-bottom: 16px;
    line-height: 1.5;
  }

  /* ---- Toast notifications ---- */
  .toast-stack {
    position: fixed; top: 78px; right: 20px; z-index: 200;
    display: flex; flex-direction: column; gap: 8px; max-width: 340px;
  }
  .toast {
    background: var(--surface); border: 1px solid var(--warn-border); border-left: 3px solid var(--warn);
    border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow-pop);
    font-size: 12.5px; color: var(--text); line-height: 1.5;
    animation: toast-in 0.18s ease-out;
  }
  @keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
  .toast.has-action { display: flex; align-items: center; gap: 12px; }
  .toast-message { flex: 1; min-width: 0; }
  .toast-action {
    flex: none; background: none; border: none; padding: 2px 4px; cursor: pointer;
    font: inherit; font-weight: 600; color: var(--accent2); text-decoration: underline; text-underline-offset: 2px;
  }
  .toast-action:hover { color: var(--accent2-dark); }

  .suggestion-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    font-size: 13px;
  }
  .suggestion-card:last-child { margin-bottom: 0; }
  .suggestion-type {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
  }
  .suggestion-type.high { color: var(--danger); }
  .suggestion-type.medium { color: var(--warn); }
  .suggestion-type.low { color: var(--muted); }
  .suggestion-desc { line-height: 1.5; color: var(--text); }

  /* ---- Saved: view toggle + kanban ---- */
  .view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 20px; }
  .view-toggle button {
    margin: 0; border-radius: 0; background: var(--surface); color: var(--muted);
    font-size: 12.5px; padding: 8px 14px; border-right: 1px solid var(--border);
  }
  .view-toggle button:last-child { border-right: none; }
  .view-toggle button.active { background: var(--ink); color: var(--on-ink); }
  .view-toggle button:hover { opacity: 1; }
  .view-toggle button:not(.active):hover { background: var(--surface-soft); }

  .kanban-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
  .kanban-col { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; padding: 12px; min-height: 120px; }
  .kanban-col.drag-over { border-color: var(--accent2); background: var(--accent2-soft); }
  .kanban-col-title { font-size: 12px; font-weight: 700; color: var(--muted-strong); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 10px; display: flex; justify-content: space-between; }
  .kanban-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 10px 12px; margin-bottom: 8px; cursor: grab; font-size: 12.5px;
  }
  .kanban-card:active { cursor: grabbing; }
  .kanban-card-title { font-weight: 700; color: var(--ink); font-size: 13px; }
  .kanban-card-company { color: var(--muted); font-size: 11.5px; margin-top: 1px; }
  .kanban-card select, .kanban-card input {
    margin-top: 6px; font-size: 11.5px; padding: 5px 7px; border-radius: 6px;
  }
  .kanban-priority-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }

  /* ---- Manage: scanner progress ---- */
  .scan-log { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; display: none; }

  /* ---- Modals (Apply / Match panels) ---- */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 100;
    padding: 32px 20px;
    overflow-y: auto;
    align-items: flex-start;
    justify-content: center;
  }
  .modal-card {
    background: var(--surface);
    border-radius: 16px;
    padding: 32px;
    max-width: 620px;
    width: 100%;
    margin: 24px auto;
    box-shadow: var(--shadow-pop);
  }
  .kbd-hint {
    font-family: monospace; font-size: 11px; background: var(--surface-soft);
    border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px;
    padding: 1px 6px; color: var(--muted-strong);
  }
  @media (max-width: 960px) {
    .kanban-board { grid-template-columns: repeat(2, 1fr); }
    .home-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 760px) {
    .topbar-inner {
      padding: 0 16px; gap: 16px; overflow-x: auto;
      /* Fades the trailing edge so a cut-off tab reads as "more to scroll",
         not a layout glitch. */
      mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
      -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
    }
    .brand { padding: 14px 0; }
    .tabs { flex-wrap: nowrap; }
    .tab-btn { margin: 0 7px; padding: 16px 2px; white-space: nowrap; }
    .wrap { padding: 24px 16px 64px; }
    .form-grid, .browse-layout { grid-template-columns: 1fr; }
    .field.full { grid-column: auto; }
    .card { padding: 20px; border-radius: 10px; }
    .detail-pane { position: static; max-height: none; overflow-y: visible; }
    /* The split master-detail scroll region only makes sense side-by-side;
       stacked on mobile it hid most listings behind a second, easy-to-miss
       inner scrollbar. Let it flow with the page instead. */
    .listing-list-pane { max-height: none; overflow-y: visible; }
    .keyword-row { align-items: stretch; flex-wrap: wrap; }
    .keyword-row input[type="text"] { min-width: 100%; }
    .modal-card { padding: 22px; margin: 8px auto; }
    .kanban-board { grid-template-columns: 1fr; }
    .drawer { width: 100vw; }
    .toast-stack { left: 12px; right: 12px; max-width: none; top: 68px; }
  }

  /* ---- My Profile › Answers (the answer engine, answers.js) ----
     The dev-* names are from when this was the Developer tools page.
     Two lists of the same underlying thing - an exact ATS question wording -
     split by whether InternBoard has been taught an answer for it. */
  .dev-badge {
    display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px;
    border-radius: var(--radius-pill); letter-spacing: 0.02em;
  }
  .dev-badge-taught { background: var(--accent-soft); color: var(--accent-dark); border: 1px solid var(--accent-border); }
  .dev-badge-untaught { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }
  .dev-badge-count { background: var(--surface-soft); color: var(--muted-strong); border: 1px solid var(--border); }

  .dev-question {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 12px 14px; margin-bottom: 10px; background: var(--surface);
  }
  /* The row just taught from this page. The seen list opens filtered to
     "Not taught yet", so teaching a question used to make its row disappear
     on the reload that followed - the save had worked, but the only visible
     evidence was the row going away. developer.js widens the filter instead
     and marks the row, so "it saved" is something you can see. */
  .dev-question-just-taught {
    border-color: var(--accent-border);
    box-shadow: 0 0 0 2px var(--accent-soft);
  }
  .dev-question-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
  }
  /* The wording itself is the identity of the row and can be long, so it
     wraps rather than truncating - a half-shown question is unusable for
     deciding whether it's the one you meant to teach. */
  .dev-question-label {
    font-size: 13.5px; font-weight: 600; color: var(--ink);
    line-height: 1.5; overflow-wrap: anywhere; flex: 1; min-width: 220px;
  }
  .dev-question-meta { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
  .dev-question-meta code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
    background: var(--surface-soft); padding: 1px 5px; border-radius: 4px;
    overflow-wrap: anywhere;
  }
  .dev-question-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .dev-question-actions button { margin: 0; padding: 6px 12px; font-size: 12px; }

  .dev-answer-edit { margin-top: 10px; }
  .dev-answer-edit textarea { width: 100%; min-height: 64px; margin: 0 0 8px; }
  .dev-variant-list { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); }
  .dev-variant {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    font-size: 12.5px; color: var(--text); padding: 5px 0; line-height: 1.5;
  }
  .dev-variant span { overflow-wrap: anywhere; }
  .dev-variant button { margin: 0; padding: 3px 9px; font-size: 11.5px; }
  /* Truncated in the DOM, not here - developer.js keeps the whole wording in
     the title attribute so hovering still answers "which one is this
     exactly?", the question this row exists to let you ask. */
  .dev-variant-text { overflow-wrap: anywhere; }
  .dev-variant-text[title] { cursor: help; border-bottom: 1px dotted var(--border); }

  /* Two badges that are really controls. Both used to be inert spans: the
     count labelled a list that was always open, and "possible duplicate"
     named a problem while offering nothing to do about it. */
  .dev-wording-pill, .dev-duplicate-action {
    cursor: pointer; font-family: inherit; margin: 0;
  }
  .dev-wording-pill:hover, .dev-duplicate-action:hover { filter: brightness(0.96); }
  .dev-wording-pill:focus-visible, .dev-duplicate-action:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }

  /* The global `input` rule above sets width:100% and a text-input's padding,
     which a checkbox inherits too - so each of these grew to the full width
     of its row, pushing the question title and its actions onto a line of
     their own and stretching "Select all" over two. Checkboxes are sized by
     their own box, never by the column they sit in. */
  .dev-select-question, .dev-select-all input[type="checkbox"] {
    width: auto; min-width: 0; padding: 0; flex: 0 0 auto;
    accent-color: var(--accent); cursor: pointer;
  }
  .dev-select-question { margin: 4px 0 0; }
  .dev-select-all {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
    font-size: 12.5px; color: var(--muted); cursor: pointer;
    white-space: nowrap;
  }
  .dev-select-all input[type="checkbox"] { margin: 0; }

  /* How complete one taught answer is. The bar is deliberately quiet: it
     ranks questions against each other at a glance, and the gap lines under
     it are what actually say what to do about one. */
  .dev-completeness { margin-top: 8px; }
  .dev-completeness-meter {
    height: 4px; border-radius: var(--radius-pill); background: var(--surface-soft);
    overflow: hidden; max-width: 220px;
  }
  .dev-completeness-fill { height: 100%; border-radius: var(--radius-pill); }
  .dev-completeness-fill.is-strong { background: var(--accent); }
  .dev-completeness-fill.is-fair { background: #d08700; }
  .dev-completeness-fill.is-weak { background: var(--danger); }
  .dev-completeness-score { font-size: 11.5px; color: var(--muted); }
  .dev-completeness-gap { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.55; }

  /* Sticky, because choosing the questions to act on means scrolling past
     the actions - a bar pinned above the list is out of sight by the time
     the selection is finished. */
  .dev-bulk-bar {
    position: sticky; bottom: 12px; z-index: 5; margin-top: 14px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 10px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--accent-border); background: var(--surface);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    font-size: 12.5px; font-weight: 600; color: var(--ink);
  }
  .dev-bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .dev-bulk-actions button { margin: 0; padding: 6px 12px; font-size: 12px; }

  /* One suggested link. Nothing here has been applied - see the panel's own
     copy in fragments/answers.html - so the row is styled as a proposal
     rather than as a state the data is already in. */
  .dev-proposal {
    border: 1px dashed var(--border); border-radius: var(--radius-sm);
    padding: 11px 13px; margin-bottom: 9px; background: var(--surface-soft);
  }
  .dev-proposal-summary {
    font-size: 13px; color: var(--ink); line-height: 1.6; overflow-wrap: anywhere;
  }
  .dev-proposal .dev-question-actions { margin-top: 9px; }
  /* An answer composed at fill time. Uses the app's AI colour (see the
     design-system note at the top of this file: indigo/violet is reserved for
     "this came from a model") rather than the taught green, because that is
     exactly the distinction the badge exists to draw. */
  .dev-badge-generative {
    background: var(--accent2-soft, #EEF2FF); color: var(--accent2, #6366F1);
    border: 1px solid var(--accent2-border, #C7D2FE);
  }
  .dev-answer-edit .dev-generative-prompt,
  #devNewCanonicalPrompt { width: 100%; min-height: 56px; }

  .dev-noise-row {
    border: 1px dashed var(--border); border-radius: var(--radius-sm);
    padding: 9px 12px; margin-bottom: 8px; background: var(--surface-soft);
  }

  .dev-badge-confidence {
    background: var(--accent-soft); color: var(--accent-dark);
    border: 1px solid var(--accent-border); font-variant-numeric: tabular-nums;
  }
  .dev-teach-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
  .dev-teach-form select, .dev-teach-form input, .dev-teach-form textarea { margin-bottom: 8px; }
  /* The "Ask AI which question this is" button sits directly under the
     dropdown it preselects, so it reads as an aid to that control rather than
     as a step of its own - the .field wrapper's own bottom margin plus the
     button's would otherwise strand it between the two. */
  .dev-teach-form > .field { margin-bottom: 4px; }
  .dev-teach-form > .field select { margin-bottom: 0; }
  .dev-teach-form > .btn-ghost { margin: 0 0 10px; }
  .dev-status { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
  .dev-empty { font-size: 13px; color: var(--muted); padding: 6px 0; }

  /* ---- Ghost job scoring editor ---- */
  /* Two columns per variable: what you tune on the left, what it means on the
     right. Retuning is the common job and rewriting a rule is the rare one,
     and they want different things on screen - tuning wants eleven weights
     comparable at a glance, editing wants room for a 400-character regex. */
  .dev-ghost-variables { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
  .dev-ghost-variable {
    display: grid; grid-template-columns: minmax(260px, 0.85fr) minmax(300px, 1.15fr); gap: 18px;
    border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
    background: var(--surface-soft);
  }
  @media (max-width: 860px) {
    .dev-ghost-variable { grid-template-columns: 1fr; gap: 10px; }
  }
  /* A variable switched off is still there and still editable - it just is not
     scoring, and should not read as though it were. */
  .dev-ghost-variable.dev-ghost-off .dev-ghost-tune,
  .dev-ghost-variable.dev-ghost-off .dev-ghost-rules { opacity: 0.5; }
  .dev-ghost-variable.dev-ghost-off .dev-ghost-switch { opacity: 1; }

  /* Centred against the rules column, which is the taller of the two - left
     at the top, the switch and bar sat above a block of empty space. */
  .dev-ghost-tune { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
  .dev-ghost-tune-head { display: flex; align-items: center; gap: 10px; }
  .dev-ghost-tune-head .dev-ghost-label { margin: 0; flex: 1 1 auto; min-width: 0; font-weight: 600; }
  .dev-ghost-tune-head .dev-ghost-remove { margin: 0; padding: 5px 10px; font-size: 12px; flex: 0 0 auto; }

  /* Toggle switch, built from a real checkbox so it keeps keyboard focus and
     the form reads .dev-ghost-enabled.checked exactly as before. */
  .dev-ghost-switch { position: relative; flex: 0 0 auto; display: inline-flex; cursor: pointer; }
  .dev-ghost-switch input {
    position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  }
  .dev-ghost-switch-track {
    width: 34px; height: 20px; border-radius: 999px; background: var(--border);
    transition: background 0.15s ease; display: block; position: relative;
  }
  .dev-ghost-switch-track::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; transition: transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
  }
  .dev-ghost-switch input:checked + .dev-ghost-switch-track { background: var(--accent); }
  .dev-ghost-switch input:checked + .dev-ghost-switch-track::after { transform: translateX(14px); }
  .dev-ghost-switch input:focus-visible + .dev-ghost-switch-track { outline: 2px solid var(--accent2); outline-offset: 2px; }

  .dev-ghost-weight-row { display: flex; align-items: center; gap: 10px; }
  .dev-ghost-weight-slider { flex: 1 1 auto; min-width: 80px; margin: 0; accent-color: var(--accent); }
  .dev-ghost-weight-row .dev-ghost-weight {
    flex: 0 0 74px; margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600;
  }
  .dev-ghost-weight-row .dev-ghost-caption { flex: 0 0 auto; }

  .dev-ghost-rules { display: flex; flex-direction: column; }
  .dev-ghost-rules-head { display: flex; gap: 12px; flex-wrap: wrap; }
  .dev-ghost-rules-head .dev-ghost-field { flex: 1 1 200px; }
  .dev-ghost-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
  .dev-ghost-caption {
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
    color: var(--muted);
  }
  .dev-ghost-field input, .dev-ghost-field textarea { margin: 0; }
  .dev-ghost-field textarea {
    min-height: 46px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  }
  .dev-ghost-rules .dev-ghost-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
  .dev-ghost-hint { font-size: 11.5px; color: var(--muted); }
  .dev-ghost-errors { grid-column: 1 / -1; }

  #devGhostFormula { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
  .dev-ghost-bands { display: flex; gap: 12px; flex-wrap: wrap; }
  .dev-ghost-bands .field { flex: 1 1 140px; }

  /* A message about one field, shown against that field - the server answers
     an invalid configuration per field, and a shared error line at the bottom
     would make a dozen variables unfixable. */
  .dev-field-error { font-size: 12.5px; color: var(--danger); margin-top: 6px; }
  .dev-field-invalid { border-color: var(--danger) !important; }
  .dev-ghost-errors:empty { display: none; }

  .dev-ghost-warnings {
    margin-top: 10px; padding: 10px 12px; border-radius: 8px;
    background: var(--danger-bg); border: 1px solid var(--danger-border);
  }
  .dev-ghost-warning { font-size: 12.5px; color: var(--danger); }

  .dev-ghost-reference { margin-top: 14px; font-size: 13px; }
  .dev-ghost-reference summary { cursor: pointer; color: var(--muted-strong); font-weight: 600; }
  .dev-ghost-reference-group { margin-top: 10px; }
  .dev-ghost-reference-group h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; color: var(--muted); }
  .dev-ghost-reference-line { font-size: 12.5px; color: var(--muted-strong); line-height: 1.7; }
  .dev-ghost-reference-line code {
    background: var(--surface-soft); border: 1px solid var(--border); border-radius: 4px;
    padding: 1px 5px; font-size: 12px;
  }

  /* One strip, not a paragraph: the blast radius is a number you glance at
     between drags of a weight. */
  .dev-ghost-impact {
    margin-top: 16px; padding: 10px 12px; border-radius: 8px;
    background: var(--surface-soft); border: 1px solid var(--border);
  }
  .dev-ghost-impact:empty { display: none; }
  .dev-ghost-impact-summary { font-size: 14px; }
  .dev-ghost-impact-example { font-size: 12.5px; color: var(--muted-strong); line-height: 1.7; }
  .dev-ghost-impact-move { font-weight: 700; }

  .dev-ghost-preview { margin-top: 12px; }
  .dev-ghost-preview-heading { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; color: var(--muted); }
  .dev-ghost-sample {
    border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; margin-bottom: 7px;
  }
  .dev-ghost-sample-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .dev-ghost-sample-head strong { flex: 1 1 200px; min-width: 0; }
  .dev-ghost-sample-score { font-variant-numeric: tabular-nums; color: var(--muted-strong); }
  /* The bar is the point of the compact row: eight samples read as a shape
     rather than as eight numbers to compare by eye. */
  .dev-ghost-score-bar {
    flex: 0 0 120px; height: 7px; border-radius: 999px; background: var(--border); overflow: hidden;
  }
  .dev-ghost-score-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
  .dev-ghost-risk-high .dev-ghost-score-fill { background: var(--danger); }
  .dev-ghost-risk-medium .dev-ghost-score-fill { background: #D97706; }
  .dev-ghost-sample-note { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
  .dev-ghost-sample-signal { font-size: 12.5px; color: var(--muted-strong); margin-top: 3px; }
  .dev-ghost-sample-points {
    display: inline-block; min-width: 34px; font-weight: 700; font-variant-numeric: tabular-nums;
  }

  .dev-ghost-history { margin-top: 16px; font-size: 13px; }
  .dev-ghost-history summary { cursor: pointer; color: var(--muted-strong); font-weight: 600; }
  .dev-ghost-revision {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 7px 0; border-bottom: 1px solid var(--border);
  }
  .dev-ghost-revision-note { flex: 1 1 200px; overflow-wrap: anywhere; }
  .dev-ghost-revision .dev-ghost-activate { margin: 0; padding: 4px 10px; font-size: 12px; }

  /* ---- Tracker: what needs attention today ---- */
  /* Severity is a colour before it is a sentence - the banner is read at a
     glance, and an expired deadline and a three-week silence should not
     have to be told apart by reading them. */
  .tracker-alerts:empty { display: none; }
  .tracker-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
  .tracker-alert {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    border: 1px solid var(--border); border-left-width: 4px;
    border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.5;
    background: var(--surface-soft);
  }
  .tracker-alert-kind {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--muted-strong); white-space: nowrap;
  }
  .tracker-alert-message { flex: 1 1 240px; }
  .tracker-alert-expired { background: var(--neutral-bg); border-left-color: var(--muted); }
  .tracker-alert-expired .tracker-alert-kind { color: var(--muted); }
  .tracker-alert-critical { background: var(--danger-bg); border-left-color: var(--danger); }
  .tracker-alert-critical .tracker-alert-kind { color: var(--danger); }
  .tracker-alert-urgent { background: var(--warn-bg); border-left-color: var(--warn); }
  .tracker-alert-urgent .tracker-alert-kind { color: var(--warn); }
  .tracker-alert-soon { background: var(--accent2-soft); border-left-color: var(--accent2-dark); }
  .tracker-alert-soon .tracker-alert-kind { color: var(--accent2-dark); }
  .tracker-alert-info { background: var(--surface-soft); border-left-color: var(--border); }

  /* ---- Tracker: search velocity ---- */
  .velocity-card:empty { display: none; }
  .velocity-card { margin-bottom: 16px; }
  .velocity-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
  .velocity-headline { font-size: 13px; color: var(--muted-strong); margin-bottom: 4px; }
  .velocity-row {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px;
  }
  .velocity-row:last-of-type { border-bottom: none; }
  .velocity-stage { font-weight: 600; flex: 0 0 140px; }
  .velocity-days { flex: 1 1 160px; }
  .velocity-samples { color: var(--muted); font-size: 12px; }
  .velocity-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 8px; }

  /* ---- Listing detail: interview prep and resume tailoring ---- */
  .prep-block {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 14px; background: var(--surface-soft); font-size: 13px; line-height: 1.55;
  }
  .prep-heading { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
  /* Whether this was written for this listing or is generic filler is the
     first thing the student needs to know, so it sits above the content
     rather than in small print underneath it. */
  .prep-provenance { font-size: 12px; color: var(--muted-strong); margin-bottom: 8px; }
  .prep-note { font-size: 12px; color: var(--warn); margin-bottom: 10px; line-height: 1.5; }
  .prep-section { margin-top: 12px; }
  .prep-section-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--muted-strong); margin-bottom: 6px;
  }
  .prep-list { margin: 0; padding-left: 18px; }
  .prep-question, .tailor-suggestion { margin-bottom: 10px; }
  .prep-question-text { font-weight: 600; }
  .prep-why { color: var(--muted); font-size: 12px; margin-top: 2px; }
  .prep-empty { color: var(--muted); }
  /* The student's own line and the proposed rewrite have to be
     distinguishable at a glance - they are two versions of the same
     sentence, and pasting the wrong one back into a resume is the failure
     mode this styling exists to prevent. */
  .tailor-original {
    color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px;
  }
  .tailor-suggested { font-weight: 600; margin-top: 3px; }
  .tailor-rationale { color: var(--muted); font-size: 12px; margin-top: 3px; }
  .tailor-match-percent {
    float: right; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--text);
  }
  .tailor-chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
  .tailor-chip-label { width: 100%; font-size: 12px; color: var(--muted); }
  .tailor-chip {
    display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px;
    border: 1px solid var(--border); overflow-wrap: anywhere;
  }
  .tailor-chip-matched { background: var(--good-bg); color: var(--good); border-color: transparent; }
  .tailor-chip-implied { background: var(--accent-soft); color: var(--text); }
  .tailor-chip-missing { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
  /* A change is only used once the student ticks it: nothing they did not
     read goes into the document. */
  .tailor-accept {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
    margin: 0 0 3px; cursor: pointer;
  }
  .tailor-accept input { width: auto; margin: 0; }
  /* The checkbox already marks each change; a list bullet beside it is noise. */
  .tailor-list { list-style: none; padding-left: 0; }
  .tailor-adds { font-size: 12px; color: var(--good); margin-top: 3px; }
  .tailor-summary-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
  .tailor-download { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
  .tailor-download-note { font-size: 12px; color: var(--muted); margin-top: 6px; }
  .tailor-download-status { font-size: 12px; margin-top: 4px; }

  /* ---- Sign-in page ----
     Its own page rather than a panel in the app, so nothing behind the
     sign-in is fetched by somebody who has not signed in yet. One centred
     card, deliberately plain: this is a door, not a destination. */
  .login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 24px 16px;
  }
  .login-card { width: 100%; max-width: 400px; margin: 0; }
  .login-title { margin: 0 0 4px; font-size: 24px; color: var(--ink); }
  .login-subtitle { margin: 0 0 18px; color: var(--muted); font-size: 14px; }

  /* Empty until something goes wrong, and it takes no vertical space while
     empty so the form does not jump when a message appears and clears. */
  .login-error:empty { display: none; }
  .login-error {
    background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger);
    border-radius: 8px; padding: 9px 11px; font-size: 13px; margin-bottom: 14px;
  }
  /* Good news - a changed password, a deleted account - in the success
     colours rather than the error box's. */
  .login-notice:empty { display: none; }
  .login-notice {
    background: var(--good-bg); border: 1px solid var(--accent-border); color: var(--accent-dark);
    border-radius: 8px; padding: 9px 11px; font-size: 13px; margin-bottom: 14px;
  }
  .login-password-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  /* Two classes, so .btn-link's `font: inherit` further down does not win. */
  .login-password-head .login-forgot { font-size: 12.5px; }
  .login-reset-note {
    margin: 0 0 14px; padding: 9px 11px; font-size: 13px; line-height: 1.5; color: var(--text);
    background: var(--surface-soft); border: 1px solid var(--border); border-radius: 8px;
  }

  .login-form label {
    display: block; font-size: 12.5px; font-weight: 600;
    color: var(--muted-strong); margin-bottom: 5px;
  }
  .login-form input { margin-bottom: 14px; }
  .login-optional { font-weight: 400; color: var(--muted); }
  /* Sits under its input, so it takes the input's bottom margin for itself. */
  .login-form .login-hint { margin: -8px 0 14px; font-size: 12.5px; color: var(--muted); }
  #loginInviteCode { text-transform: uppercase; letter-spacing: 0.06em; }

  /* Student or employer, asked only when creating an account. Two option
     cards rather than bare radio buttons, so the choice reads as the one
     decision it is; the radio inside stays the real control. */
  .login-role { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
  .login-role legend {
    padding: 0; margin-bottom: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted-strong);
  }
  .login-form .login-role-option {
    display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft);
    cursor: pointer; font-weight: 400;
  }
  .login-form .login-role-option:has(input:checked) {
    border-color: var(--accent); background: var(--accent-soft);
  }
  /* The global input rule would stretch the radio across the whole card. */
  .login-form .login-role-option input { width: auto; margin: 3px 0 0; flex: none; accent-color: var(--accent); }
  .login-role-text { display: flex; flex-direction: column; gap: 2px; }
  .login-role-text strong { font-size: 13.5px; color: var(--ink); }
  .login-role-text span { font-size: 12.5px; color: var(--muted); }
  .login-submit { width: 100%; margin: 4px 0 0; }

  .login-switch {
    margin: 14px 0 0; font-size: 13px; color: var(--muted); text-align: center;
  }
  .btn-link {
    background: none; border: 0; padding: 0; margin: 0; font: inherit;
    color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline;
  }
  .btn-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Set apart below a rule, and quiet: it is a local shortcut, not the way
     most people are meant to get in. */
  .login-developer {
    margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
    display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  }
  .login-developer-btn { margin: 0; font-size: 12.5px; }

  /* ---- Company avatar ----
     An initial on one of eight themed tones (see avatarTone in shared-ui.js),
     so a long list of companies has something to scan by besides text. Each
     tone is defined for both themes - a pastel square on the dark theme was
     exactly how the old Sources badges broke. */
  .company-avatar {
    width: 30px; height: 30px; flex: none; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13.5px;
    background: var(--avatar-bg); color: var(--avatar-fg);
  }
  :is(.company-avatar, .person-avatar).tone-0 { --avatar-bg: #E0F2FE; --avatar-fg: #0369A1; }
  :is(.company-avatar, .person-avatar).tone-1 { --avatar-bg: #EDE9FE; --avatar-fg: #6D28D9; }
  :is(.company-avatar, .person-avatar).tone-2 { --avatar-bg: #DCFCE7; --avatar-fg: #15803D; }
  :is(.company-avatar, .person-avatar).tone-3 { --avatar-bg: #FEF3C7; --avatar-fg: #B45309; }
  :is(.company-avatar, .person-avatar).tone-4 { --avatar-bg: #FCE7F3; --avatar-fg: #BE185D; }
  :is(.company-avatar, .person-avatar).tone-5 { --avatar-bg: #E0E7FF; --avatar-fg: #4338CA; }
  :is(.company-avatar, .person-avatar).tone-6 { --avatar-bg: #CCFBF1; --avatar-fg: #0F766E; }
  :is(.company-avatar, .person-avatar).tone-7 { --avatar-bg: #FFE4E6; --avatar-fg: #BE123C; }
  :root[data-theme="dark"] :is(.company-avatar, .person-avatar).tone-0 { --avatar-bg: #0C2A3D; --avatar-fg: #7DD3FC; }
  :root[data-theme="dark"] :is(.company-avatar, .person-avatar).tone-1 { --avatar-bg: #251B45; --avatar-fg: #C4B5FD; }
  :root[data-theme="dark"] :is(.company-avatar, .person-avatar).tone-2 { --avatar-bg: #0F2E1C; --avatar-fg: #86EFAC; }
  :root[data-theme="dark"] :is(.company-avatar, .person-avatar).tone-3 { --avatar-bg: #33240A; --avatar-fg: #FCD34D; }
  :root[data-theme="dark"] :is(.company-avatar, .person-avatar).tone-4 { --avatar-bg: #3A1229; --avatar-fg: #F9A8D4; }
  :root[data-theme="dark"] :is(.company-avatar, .person-avatar).tone-5 { --avatar-bg: #1E1F4A; --avatar-fg: #A5B4FC; }
  :root[data-theme="dark"] :is(.company-avatar, .person-avatar).tone-6 { --avatar-bg: #0B2E2A; --avatar-fg: #5EEAD4; }
  :root[data-theme="dark"] :is(.company-avatar, .person-avatar).tone-7 { --avatar-bg: #3A1119; --avatar-fg: #FDA4AF; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) :is(.company-avatar, .person-avatar).tone-0 { --avatar-bg: #0C2A3D; --avatar-fg: #7DD3FC; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) :is(.company-avatar, .person-avatar).tone-1 { --avatar-bg: #251B45; --avatar-fg: #C4B5FD; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) :is(.company-avatar, .person-avatar).tone-2 { --avatar-bg: #0F2E1C; --avatar-fg: #86EFAC; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) :is(.company-avatar, .person-avatar).tone-3 { --avatar-bg: #33240A; --avatar-fg: #FCD34D; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) :is(.company-avatar, .person-avatar).tone-4 { --avatar-bg: #3A1229; --avatar-fg: #F9A8D4; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) :is(.company-avatar, .person-avatar).tone-5 { --avatar-bg: #1E1F4A; --avatar-fg: #A5B4FC; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) :is(.company-avatar, .person-avatar).tone-6 { --avatar-bg: #0B2E2A; --avatar-fg: #5EEAD4; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) :is(.company-avatar, .person-avatar).tone-7 { --avatar-bg: #3A1119; --avatar-fg: #FDA4AF; }
  }

  /* A button that reads as a link - for secondary actions inside rows. */
  .link-btn {
    background: none; border: none; padding: 0; margin: 0; cursor: pointer;
    color: var(--accent-dark); font-size: 13px; font-weight: 600; font-family: inherit;
  }
  .link-btn:hover { text-decoration: underline; opacity: 1; }
  .link-btn:disabled { color: var(--muted); text-decoration: none; }
  .small-btn.danger { color: var(--danger); border-color: var(--danger-border); }
  .small-btn.danger:hover:not(:disabled) { background: var(--danger-bg); }

  /* ---- Health: one dot colour per state, used by the Job index ---- */
  .health-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--muted); }
  .health-dot.healthy { background: var(--good); }
  .health-dot.stale { background: var(--warn); }
  .health-dot.empty { background: var(--muted); }
  .health-dot.unsynced { background: var(--border); box-shadow: inset 0 0 0 1.5px var(--muted); }

  /* ---- My companies (a student's own list) ---- */
  .myco-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
  .myco-freshness { font-size: 13px; color: var(--muted); }
  .myco-bar .btn-ghost { margin: 0; }
  .myco-refresh-status { font-size: 13px; color: var(--muted-strong); min-height: 18px; margin-bottom: 8px; }
  .myco-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
  .myco-layout .card { margin: 0; }
  .myco-list-head h2 { margin-bottom: 6px; }
  .myco-count {
    display: inline-block; min-width: 22px; padding: 0 7px; margin-left: 4px; border-radius: var(--radius-pill);
    background: var(--neutral-bg); color: var(--muted-strong); font-size: 12px; line-height: 20px; text-align: center;
    vertical-align: 2px;
  }
  .myco-count:empty { display: none; }
  .myco-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--border);
  }
  .myco-row:last-child { border-bottom: none; }
  .myco-main { display: flex; flex-direction: column; min-width: 0; }
  .myco-main .company-name { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .myco-meta { display: flex; gap: 10px; font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; min-width: 0; }
  .myco-places { color: var(--muted-strong); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .myco-updated { flex: none; }
  .myco-open { white-space: nowrap; }
  .myco-open.is-zero { color: var(--muted); font-weight: 500; }
  .myco-untrack { margin: 0; padding: 6px 12px; font-size: 12.5px; }
  .myco-track-card h2 { margin-bottom: 10px; }
  .myco-track-card input[type="search"] { margin: 0; }
  .myco-matches { margin-top: 8px; }
  .myco-match {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--border);
  }
  .myco-match .company-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .myco-match .company-avatar { width: 26px; height: 26px; font-size: 12px; }
  .myco-track-btn {
    margin: 0; padding: 5px 12px; font-size: 12.5px;
    background: var(--accent-soft); color: var(--accent-dark); border: 1px solid var(--accent-border);
  }
  .myco-track-btn:hover:not(:disabled) { background: var(--accent); color: #FFFFFF; opacity: 1; }
  .myco-track-btn.is-tracked, .myco-track-btn.is-tracked:disabled {
    background: none; border-color: transparent; color: var(--muted); opacity: 1;
  }
  .myco-matches-note { font-size: 12.5px; color: var(--muted); padding: 8px 0; }
  .myco-url { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
  .myco-url label { font-size: 12.5px; color: var(--muted-strong); font-weight: 600; }
  .myco-url-row { display: flex; gap: 8px; margin-top: 6px; }
  .myco-url-row input { margin: 0; flex: 1; min-width: 0; }
  .myco-url-row .btn-accent { margin: 0; }
  .myco-track-status { font-size: 12.5px; color: var(--muted-strong); margin-top: 8px; min-height: 16px; }
  @media (max-width: 960px) {
    .myco-layout { grid-template-columns: 1fr; }
  }

  /* ---- Manager › Job index ----
     The shared index of every company InternBoard syncs, led by its health:
     four tiles that count and filter by state, then a compact table. It used
     to be the student "Sources" tab, rendered as 25 loose rows a page with
     two bordered buttons each. */
  .index-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 4px; }
  .index-head h2 { margin: 0 0 4px; }
  /* On the Manager's Job index the head is the page heading. */
  .index-head h1 { font-size: 26px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; }
  .index-freshness { font-size: 13px; color: var(--muted); }
  .index-head-actions { display: flex; gap: 8px; flex: none; }
  .index-head-actions button { margin: 0; }
  .index-status { font-size: 13px; color: var(--muted-strong); min-height: 18px; margin: 6px 0 10px; }
  .index-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
  .index-tile { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
  .index-tile-filter {
    display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px;
    width: 100%; margin: 0; padding: 14px 16px; text-align: left;
    background: none; color: inherit; border: none; border-radius: 0; font-family: inherit; font-weight: 400;
  }
  .index-tile-filter .health-dot { grid-row: 1; }
  .index-tile-filter .stat-value { grid-row: 1; }
  .index-tile-filter .stat-label { grid-column: 1 / -1; }
  .index-tile-static { grid-template-columns: 1fr; cursor: default; }
  button.index-tile-filter:hover { opacity: 1; }
  .index-tile:hover { border-color: var(--muted); }
  .index-tile.is-active { border-color: var(--accent2); box-shadow: 0 0 0 1px var(--accent2); }
  .index-tile-action { margin: 0 16px 14px; align-self: flex-start; }
  .index-table-card { padding-top: 16px; }
  .index-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
  .index-toolbar input[type="search"] { flex: 1; min-width: 200px; margin: 0; }
  .index-toolbar select { width: auto; margin: 0; }
  .company-bulk-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 12px; padding: 8px 12px;
    border: 1px solid var(--accent2-border); border-radius: 8px; background: var(--accent2-soft);
  }
  .company-selection-count { font-size: 12.5px; font-weight: 600; color: var(--accent2-dark); margin-right: auto; }
  /* styles.css sets `input { width: 100% }` for text inputs, which also
     catches every checkbox that is not explicitly exempted - it stretches to
     its container and pushes the label onto a line of its own. That has
     already shipped once in this project (see e2e/layout-regression.js). */
  .company-row-select { margin: 0; width: auto; flex: none; }
  .index-row {
    display: grid; align-items: center; gap: 12px;
    grid-template-columns: 20px minmax(0, 2.4fr) 100px 150px 64px 110px 72px;
    padding: 9px 4px; border-bottom: 1px solid var(--border); font-size: 13px;
  }
  .index-table-head {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
    padding-top: 0; padding-bottom: 8px;
  }
  .index-row-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .index-row-name .company-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .index-row-name .company-avatar { width: 26px; height: 26px; font-size: 12px; }
  .provider-badge { color: var(--muted-strong); font-size: 12.5px; }
  .index-row-status { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .health-badge { font-size: 12.5px; color: var(--text); white-space: nowrap; }
  .health-badge.stale { color: var(--warn); font-weight: 600; }
  .index-row-open { text-align: right; font-variant-numeric: tabular-nums; }
  .index-row-open a { font-weight: 700; color: var(--ink); text-decoration: none; }
  .index-row-open a:hover { color: var(--accent-dark); text-decoration: underline; }
  .index-row-synced { color: var(--muted); white-space: nowrap; }
  .index-row-actions { display: flex; gap: 4px; justify-content: flex-end; }
  .row-icon-btn {
    margin: 0; padding: 5px; background: none; border: 1px solid transparent; border-radius: 7px;
    color: var(--muted); cursor: pointer; line-height: 0;
  }
  .row-icon-btn svg { width: 15px; height: 15px; }
  .row-icon-btn:hover { background: var(--surface-soft); border-color: var(--border); color: var(--ink); opacity: 1; }
  .row-icon-btn.danger:hover { color: var(--danger); border-color: var(--danger-border); background: var(--danger-bg); }
  .index-row .row-icon-btn { opacity: 0; transition: opacity 0.1s ease; }
  .index-row:hover .row-icon-btn, .index-row:focus-within .row-icon-btn { opacity: 1; }
  .index-group-heading {
    font-size: 11.5px; font-weight: 700; color: var(--muted-strong); text-transform: uppercase;
    letter-spacing: .04em; margin: 16px 0 4px;
  }
  .company-pager {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 14px; font-size: 13px; color: var(--muted);
  }
  .company-pager:empty { display: none; }

  /* Narrow screens keep the name, status, count and actions; the board and
     the exact sync age are one tap away in the row's tooltip and filters. */
  @media (max-width: 760px) {
    .index-head { flex-direction: column; }
    .index-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .index-row { grid-template-columns: 20px minmax(0, 1fr) auto 40px auto; }
    .index-row > :nth-child(3), .index-row > :nth-child(6) { display: none; }
    .index-row .row-icon-btn { opacity: 1; }
    .myco-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .myco-row .myco-open { grid-column: 2; justify-self: start; }
    .myco-row .myco-untrack { grid-column: 3; grid-row: 1; }
    .myco-bar { flex-direction: column; align-items: flex-start; }
  }

  /* The add panel: one pane per way into the index. */
  .index-add { margin-bottom: 16px; }
  .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--neutral-bg); margin-bottom: 14px; }
  .seg-btn {
    margin: 0; padding: 7px 14px; border-radius: 8px; background: none; color: var(--muted-strong);
    font-weight: 600; font-size: 13px;
  }
  .seg-btn:hover { color: var(--ink); opacity: 1; }
  .seg-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
  .index-add-intro { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
  .index-add-pane > .btn-accent { margin-top: 0; }
  .index-add-status { font-size: 13px; color: var(--muted); margin-top: 10px; }
  .index-add-results { margin-top: 14px; }
  .index-url-form { margin-bottom: 10px; max-width: 520px; }

  .discover-toolbar {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px;
  }
  .discover-toolbar input[type="search"] { flex: 1; min-width: 220px; margin: 0; }
  .discover-toolbar .btn-ghost { margin: 0; white-space: nowrap; }
  .discover-row-main { min-width: 0; flex: 1; }
  .discover-row-actions { display: flex; gap: 8px; align-items: flex-start; flex: none; }
  .discover-flag {
    margin-top: 6px; padding: 6px 8px; border-radius: 6px; font-size: 12px;
    background: var(--warn-bg); color: var(--warn);
  }
  .discover-positions {
    list-style: none; margin: 8px 0 0; padding: 0; font-size: 12.5px;
  }
  .discover-positions li {
    padding: 4px 0; border-top: 1px dashed var(--border); display: flex; gap: 8px; flex-wrap: wrap;
  }
  .discover-positions li:first-child { border-top: none; }
  .discover-positions a { color: var(--ink); font-weight: 600; text-decoration: none; }
  .discover-positions a:hover { text-decoration: underline; }
  .discover-position-place { color: var(--muted); }
  .discover-toggle {
    background: none; border: none; padding: 0; margin-top: 4px; cursor: pointer;
    color: var(--accent-dark); font-size: 12px; font-weight: 600;
  }
  /* An expanded employer can run to twenty positions; its Add button belongs
     beside the name it acts on, not floating at the middle of the list. */
  .company-row[data-discover-row] { align-items: flex-start; }

/* ---- Privacy and Terms (privacy.html, terms.html) ---- */
.legal-page { min-height: 100vh; display: flex; justify-content: center; padding: 40px 16px 64px; background: var(--bg); }
.legal-card { width: 100%; max-width: 720px; margin: 0; padding: 32px 36px; line-height: 1.6; color: var(--text); }
.legal-card h1 { margin: 6px 0 2px; font-size: 28px; color: var(--ink); }
.legal-card h2 { margin: 28px 0 8px; font-size: 18px; color: var(--ink); }
.legal-card p, .legal-card li { font-size: 14.5px; }
.legal-card ul { padding-left: 20px; margin: 8px 0; }
.legal-card li { margin-bottom: 6px; }
.legal-back { margin: 0; font-size: 13px; }
.legal-updated { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
@media (max-width: 600px) { .legal-card { padding: 22px 18px; } }

.login-legal { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.login-legal a { color: var(--muted); }