/* ════════════════════════════════════════════════════════════════
   OpenTabs — editorial index theme, 5 colour modes
   (dark · paper · blush · mint · cream). Manrope (sans) for job titles
   + monospace (DM Mono) for all UI / numbers / metadata.
   Numbered index down the left with a hairline spine.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Card headline size. Fixed: it used to be a slider, which bought one
     adjustable font at the cost of a control, a stored setting and a row
     height that had to be recomputed from it. */
  --spec-size: 24px;
  --font-title: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root[data-theme="dark"] {
  --bg:#0c0d0f; --fg:#e9eae8; --spec:#d7f3ec; --mut:#6f757e;
  --co:#8fe3cf; --danger:#ff6b6e; --line:#23262b; --field-bg:#0c0d0f; --active-bg:#e7f8f3; --active-fg:#0c0d0f;
}
:root[data-theme="paper"] {
  --bg:#ffffff; --fg:#0c0d0f; --spec:#0c0d0f; --mut:#8b9099;
  --co:#0f5f57; --danger:#c8232c; --line:rgba(12,13,15,.12); --field-bg:#ffffff; --active-bg:#0c0d0f; --active-fg:#ffffff;
}
:root[data-theme="blush"] {
  --bg:#f7e9e8; --fg:#1a1413; --spec:#1a1413; --mut:#a08a89;
  --co:#9d2235; --danger:#b3202f; --line:rgba(26,20,19,.14); --field-bg:#f7e9e8; --active-bg:#1a1413; --active-fg:#f7e9e8;
}
:root[data-theme="mint"] {
  --bg:#e7f6e8; --fg:#0f1a11; --spec:#0f1a11; --mut:#7fa183;
  --co:#146b4a; --danger:#b3202f; --line:rgba(15,26,17,.14); --field-bg:#e7f6e8; --active-bg:#0f1a11; --active-fg:#e7f6e8;
}
:root[data-theme="cream"] {
  --bg:#f9f8d8; --fg:#1a1a0e; --spec:#1a1a0e; --mut:#9c9a6f;
  --co:#7a5a00; --danger:#b34a20; --line:rgba(26,26,14,.14); --field-bg:#f9f8d8; --active-bg:#1a1a0e; --active-fg:#f9f8d8;
}
/* Native <select> dropdowns follow the active theme (dark vs light popups) */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="paper"], :root[data-theme="blush"],
:root[data-theme="mint"],  :root[data-theme="cream"] { color-scheme: light; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
  min-height: 100vh;
  display: flex;
  flex-direction: column;   /* pins the footer line to the bottom */
}
main { flex: 1 0 auto; }
a { color: inherit; text-decoration: none; }

.lbl, .hint, .status {
  font-size: 12px; letter-spacing: 0;
}

/* ── Control bars ──────────────────────────────────────────────── */
.controls { border-bottom: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 28px; padding: 15px 24px; flex-wrap: wrap; row-gap: 12px; }
.field { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.field .lbl { color: var(--mut); }
/* Nav labels read as uppercase, matching the values beside them. */
.controls .lbl {
  text-transform: uppercase; letter-spacing: .08em; font-size: 11px;
}
.field.search { flex: 1; }
.field.search input {
  flex: 1; background: var(--field-bg); border: 0; outline: 0;
  border-bottom: 1px solid var(--line); color: var(--fg);
  font-family: inherit; font-size: 15px; padding: 4px 0;
  transition: border-color .2s ease;
}
.field.search input:focus { border-bottom-color: var(--spec); }
.field.search input::placeholder { color: var(--mut); }

/* ── Custom multi-select dropdowns (Source / Location / Date / Visa) ──
   Styled in harmony with the board: theme vars, inherited font, the same
   pill/chip language used elsewhere. */
.dd { position: relative; display: inline-flex; }
.dd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; outline: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--fg); padding: 0;
}
.dd-btn .lbl { color: var(--mut); }
.dd-btn .dd-sum {
  /* Never let flex shrink chew into the value — the 150px cap below is for
     genuinely long selections, not for rendering "All" as "A…". */
  flex: none;
  color: var(--fg); max-width: 150px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .04em;
}
.dd-caret { opacity: .55; transition: transform .2s ease; }
.dd.open .dd-caret { transform: rotate(180deg); opacity: .9; }
.dd.has-val .dd-sum { color: var(--spec); }

.dd-panel {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 60;
  min-width: 210px; max-height: 320px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 6px; box-shadow: 0 12px 34px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(-6px) scale(.98);
  transform-origin: top right; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.dd.open .dd-panel { opacity: 1; transform: none; pointer-events: auto; }

.dd-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-size: 12px; color: var(--fg); white-space: nowrap;
  text-transform: uppercase; letter-spacing: .04em;
  transition: background .14s ease;
}
.dd-opt:hover { background: var(--field-bg); }
.dd-opt input { accent-color: var(--spec); width: 14px; height: 14px; cursor: pointer; flex: none; }
.dd-empty { padding: 8px 10px; font-size: 12px; color: var(--mut); font-style: italic; }
/* keep the controls row from clipping an open panel */
.controls .row { overflow: visible; }


/* colour-theme swatches — collapsed to the active colour, fan out on hover */
.swatches { display: flex; align-items: center; }
.sw {
  width: 15px; height: 15px; border-radius: 50%; background: var(--c);
  border: 1px solid var(--line); cursor: pointer; padding: 0; margin-left: 7px;
  transition: width .22s ease, opacity .22s ease, margin .22s ease,
              transform .22s ease, border-width .22s ease;
}
.swatches .sw:first-child { margin-left: 0; }
.swatches:not(:hover) .sw:not(.is-on) {
  width: 0; opacity: 0; margin-left: 0; border-width: 0;
  transform: scale(.4); pointer-events: none;
}
.swatches:not(:hover) .sw.is-on { margin-left: 0; }
.sw.is-on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--fg); }

/* Highlighted facts: how much they raised + where they're based */
.roles { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
/* block, not flex: as a flex container its text became an anonymous item
   and sat indented from the rest of the card */
.roles.none {
  display: block; color: var(--mut); font-size: 11px; font-style: italic;
}
a.role {
  color: var(--spec); font-size: 12px;
  border-bottom: 1px solid transparent; align-self: flex-start;
}
a.role:hover { border-bottom-color: var(--spec); }

/* Outreach row: company site + LinkedIn + founder deep-links (free layer) */
/* Bare icons: Website and Company are lookups you take occasionally, and
   giving them the same pill as the two real actions made a seven-control
   card read as seven equal choices. */
/* The icon buttons draw at 20px. On a touch screen that's half a fingertip,
   so they get an invisible 44px target without growing on screen. */
@media (hover: none) and (pointer: coarse) {
  .job .act.icon { position: relative; }
  .job .act.icon::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}

/* ── Three-column board (New · Older-day · Older-week; Applied = drawer) ── */
/* ── Three-column board ────────────────────────────────────────── */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col { border-left: 1px solid var(--line); min-width: 0; }
.col:first-child { border-left: 0; }
.col-head {
  position: sticky; top: 57px; z-index: 15; background: var(--bg);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 16px 18px 13px; border-bottom: 1px solid var(--line);
}
.col-head h2 {
  margin: 0; font-size: 12px; text-transform: uppercase;
  letter-spacing: .07em; font-weight: 700;
  display: inline-flex; align-items: center; gap: 7px;
}
.col-head em { font-style: normal; color: var(--mut); font-size: 12px; }
.col-head .hint { color: var(--mut); font-size: 11px; }
.col-head .showing { color: var(--co); font-size: 11px; }
.col-head .clear-all { margin-left: auto; }
.job { display: block; padding: 16px 18px 16px 46px; border-bottom: 1px solid var(--line); }
/* Fixed height, centred: a 17px LinkedIn icon used to make some top rows
   taller than others, so company names (and the checkbox beside them) sat at
   a different height from card to card. */
.job-top {
  display: flex; align-items: center; gap: 8px; height: 24px;
  color: var(--mut); font-size: 11px; margin-bottom: 9px;
}
.job-top .idx { color: var(--mut); }
/* The checkbox lives alone in the left gutter, centred on the 24px top row
   (16px card padding + (24 - 15) / 2). Every line of text starts at the same
   left edge beside it. */
.job-check {
  position: absolute; left: 18px; top: 20px; width: 15px; height: 15px; margin: 0; cursor: pointer;
  /* outline only: no fill, the tick is drawn by hand */
  -webkit-appearance: none; appearance: none; background: transparent;
  border: 1.5px solid var(--mut); border-radius: 3px;
  transition: border-color .15s ease;
}
.job-check:hover { border-color: var(--fg); }
.job-check:checked { border-color: var(--co); }
.job-check:checked::after {
  content: ""; position: absolute; left: 4px; top: 0px; width: 4px; height: 8px;
  border: solid var(--co); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.job-check:focus-visible { outline: 1px solid var(--co); outline-offset: 2px; }
.job { position: relative; }
.job-top .co { color: var(--fg); }
.job-top .src { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
/* Almost every icon on the card became a word. The two that survive mark
   where a posting came from, so they get a size you can actually read
   rather than the 14px they were drawn at. */
.ico-li, .ico-money { flex: none; vertical-align: middle; width: 17px; height: 17px; }
.job-top .src { font-size: 11px; gap: 6px; }
.job-title {
  display: block; color: var(--spec); font-family: var(--font-title);
  font-size: var(--spec-size, 24px); line-height: 1.12;
  font-weight: 600; letter-spacing: -.02em; word-break: break-word;
}
.job:hover .job-title { opacity: .78; }
.job-meta { margin-top: 8px; color: var(--mut); font-size: 11px; }

/* ── The verb line ──
   Controls are words, so they inherit the card's voice instead of importing
   a button's. A rule above them separates what the job *is* from what you
   can *do* about it, which is the only hierarchy this card needs. */
/* No rule above the verbs: the card already has a border under it, and a
   second line ten pixels away made every card read as two boxes. Spacing
   separates the job from what you can do about it. */
.verbs {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 16px;
  font-family: var(--font-ui); font-size: 11px;
  text-transform: uppercase; letter-spacing: .09em;
}
/* Underline is the hover state, not the resting one — at rest the line is
   just words, and the row stops striping. */
.verb {
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  font: inherit; color: var(--fg);
  /* Restated rather than inherited: form controls don't take
     text-transform from an ancestor. */
  text-transform: uppercase; letter-spacing: inherit;
  border-bottom: 1px solid transparent;
}
.verb:hover { color: var(--co); border-bottom-color: var(--co); }
/* Finished work stops asking for attention but stays legible and clickable. */
.verb.is-done { color: var(--mut); }
.verb.is-done:hover { color: var(--fg); border-bottom-color: var(--fg); }
/* The one verb that is genuinely your move right now. */
.verb.is-live { color: var(--co); font-weight: 600; }
/* Filing is always available and never the point, so it sits apart from the
   verbs that move a job forward. One rule for all three card types. */
.verbs-tail { margin-left: auto; display: inline-flex; align-items: baseline; gap: 14px; }
.verb.quiet { color: var(--mut); }
.verb.quiet:hover { color: var(--danger); border-bottom-color: var(--danger); }
.vsep { color: var(--mut); opacity: .5; }
/* The focused card is read from further back, so its verbs scale up. */
.verbs-lg { font-size: 13px; gap: 14px; margin-top: 26px; letter-spacing: .1em; }
.verbs-lg .verb { padding: 4px 0; }
.verbs-lg kbd { margin-left: 6px; }
.verb kbd {
  font-family: var(--font-ui); font-size: 10px; padding: 2px 5px;
  border: 1px solid var(--line); border-radius: 4px; color: var(--mut); line-height: 1.4;
}
a.verb { text-decoration: none; }

/* ── Decay ──
   The posting ages, not your controls: --age dims what the job *is* and
   leaves the verbs at full strength. Floors at 0.5 so a month-old listing
   is still readable, just visibly past its moment. */
.job-top, .job-title, .job-meta, .job .badges { opacity: var(--age, 1); }
.job-meta .sep { opacity: .45; margin: 0 5px; }
.badge {
  white-space: nowrap;            /* "1 design role" was wrapping to 2 lines */
  font-size: 10px; letter-spacing: 0;
  border: 1px solid var(--line); border-radius: 20px; padding: 2px 8px; color: var(--fg);
}
.job-title { cursor: pointer; }
/* Wraps rather than overflows: the footer gained a second button and at
   ~1100px the row was running past the card edge instead of stacking. */
.act {
  cursor: pointer; font-family: var(--font-ui); font-size: 11px;
  transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
/* Done = primary filled pill */
.act.done, .act.ghost { display: inline-flex; align-items: center; line-height: 1; }
.act.done {
  background: var(--active-bg); color: var(--active-fg);
  border: 0; border-radius: 20px; padding: 5px 13px;
}
.act.done:hover { opacity: .82; }
/* Not yet / Undo = quiet ghost */
.act.ghost {
  background: none; border: 0; color: var(--mut); padding: 4px 2px;
  border-bottom: 1px solid transparent;
}
.act.ghost:hover { color: var(--fg); border-bottom-color: var(--fg); }

/* Résumé hand-off — the one button that reads as a state, not an action.
   Outlined accent = not started, quiet dashed = waiting on you in Claude,
   filled accent = tailored résumé saved. */
/* The accent-outlined pill: the one thing a card is primarily for. Résumé
   on a job, Read article on a raise. They share a style because they hold
   the same rank — the filled pill they both used to wear now only appears
   in drawers and panels, where nothing else competes with it. */
/* A quiet caveat, not an alarm: the card still works, it just hands over
   less. Sits at the end of the meta line with the other facts. */
/* Dashed and muted so it reads as a caveat next to the solid badges, not
   as another thing the job has going for it. */
.badge.thin { border-style: dashed; color: var(--mut); cursor: help; }
.col-empty { padding: 18px; color: var(--mut); font-size: 12px; }

/* Applied column reads as a struck-through checklist */

/* whole tile is clickable (opens the posting + "did you apply?") */
.job { cursor: pointer; position: relative; }

/* on-tile "Did you apply?" prompt — covers the clicked card in place */
.act, .clear-all, .drawer-close { cursor: pointer; }   /* keep buttons obvious */
.act.icon.del:hover { color: var(--danger); }


/* animated strike that draws left→right when you click Done (GSAP sets --strike) */

/* ── List view: one column, big editorial specimens ────────────── */
.foot {
  color: var(--mut); font-size: 13px; text-align: center; padding: 44px 20px 60px;
  display: flex; flex-direction: column; gap: 7px;
}
.foot b { color: var(--fg); font-weight: 700; }
.foot .tagline { color: var(--mut); letter-spacing: .01em; }


/* ── Icon actions: Undo + Remove (sit alongside Done / Not yet) ── */
.act.icon {
  background: none; border: 0; padding: 2px; color: var(--mut);
  display: inline-flex; align-items: center; line-height: 0; cursor: pointer;
}
.act.icon svg { display: block; }
.act.icon:hover { color: var(--fg); }


/* ── Applied drawer — collapsible panel from the right edge ────── */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 29; background: rgba(0,0,0,.32);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
body.drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; z-index: 30;
  height: 100vh; width: min(390px, 88vw);
  display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--line);
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
body.drawer-app #drawerApplied,
body.drawer-out #drawerOutreach,
body.drawer-trash #drawerTrash {
  transform: translateX(0); box-shadow: -22px 0 50px rgba(0,0,0,.22);
}
.drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 18px 14px; border-bottom: 1px solid var(--line); flex: none;
}
.drawer-head h2 {
  margin: 0; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700;
}
.drawer-head em { font-style: normal; color: var(--mut); font-size: 12px; }
.drawer-close {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--mut); font-family: var(--font-ui); font-size: 15px; padding: 2px 6px;
}
.drawer-close:hover { color: var(--fg); }
.drawer .rows { overflow-y: auto; flex: 1 1 auto; }

/* ── "Clear all" per column / drawer ───────────────────────────── */
/* Destructive, so it reads as destructive at rest — not only on hover. */
.clear-all {
  background: none; border: 0; cursor: pointer; color: var(--danger);
  font-family: var(--font-ui); font-size: 11px; padding: 0; white-space: nowrap;
  font-weight: 500; letter-spacing: .02em;
  border-bottom: 1px solid transparent;
}
.clear-all:hover { border-bottom-color: var(--danger); }
.clear-all[hidden] { display: none; }
/* Restoring from Trash isn't destructive, so it drops the red. */
.clear-all.neutral { color: var(--mut); }
.clear-all.neutral:hover { color: var(--fg); border-bottom-color: var(--fg); }
.drawer-head .drawer-close { margin-left: auto; }

/* ── Confirm modal (Clear all) ─────────────────────────────────── */
.modal-scrim {
  position: fixed; inset: 0; z-index: 50; padding: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
}
.modal-scrim[hidden] { display: none; }
.modal {
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  max-width: 380px; width: 100%; padding: 24px 22px 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.modal-msg {
  margin: 0 0 20px; color: var(--fg); font-size: 14px; line-height: 1.5;
  font-family: var(--font-ui);
}
.modal-msg b { font-weight: 700; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.modal-btn {
  cursor: pointer; font-family: var(--font-ui); font-size: 13px;
  border-radius: 20px; padding: 8px 16px; border: 1px solid var(--line);
}
.modal-btn.no { background: none; color: var(--mut); }
.modal-btn.no:hover { color: var(--fg); border-color: var(--fg); }
.modal-btn.yes { background: var(--active-bg); color: var(--active-fg); border: 0; }
.modal-btn.yes:hover { opacity: .85; }

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

/* Tablet / small laptop: board collapses to a single stacked column */
/* Below three-column width the board stacks; the sticky column heads go
   static so they can't pile up on one another. */
@media (max-width: 1024px) {
  .board { grid-template-columns: 1fr; }
  .col { border-left: 0; border-top: 1px solid var(--line); }
  .col:first-child { border-top: 0; }
  .col-head { position: static; }
  .row { gap: 22px; }
}

/* Narrow tablet / large phone: the control row wraps, status drops out */
@media (max-width: 860px) {
  .row .status { display: none; }
  .row { gap: 16px; }
}

/* Phone */
@media (max-width: 600px) {
  .row { padding: 12px 16px; gap: 14px; }
  .field.search { flex-basis: 100%; order: -1; }
  .job { padding: 16px; }
  .act.done { padding: 7px 15px; }       /* comfortable tap target */
  .act { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════
   Single-page board — one control row, three columns, three drawers.
   Added in the nav-less redesign; everything above this line is the
   original editorial styling it builds on.
   ════════════════════════════════════════════════════════════════ */

/* ── One horizontal settings row ───────────────────────────────── */
.controls { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.row { gap: 20px; }
/* one right-hand group: source · location · posted · sort */
.settings-group {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-left: auto;
}
.row .status { color: var(--mut); font-size: 12px; white-space: nowrap; }
/* narrow, fixed field — it no longer eats a third of the bar */
.field.search { flex: 0 0 auto; min-width: 0; gap: 12px; }
.field.search input { flex: 0 0 210px; }
.field.search .lbl,
.dd-btn .lbl,
.field.search input { width: 100%; font-size: 13px; }

/* ── Company name: the primary hook on a card ──────────────────── */
.job-top .co {
  color: var(--co); font-weight: 700; font-size: 13px;
  letter-spacing: .01em; text-transform: uppercase;
}
.job:hover .job-top .co { text-decoration: underline; text-underline-offset: 3px; }

.col-ico { flex: none; color: var(--co); }

/* ── Just Raised column ────────────────────────────────────────── */
.act.done { font-size: 11px; padding: 5px 13px; }
/* one line of role links, then a "+N" for the rest */
/* baseline alignment inflated this row to 4x its content height; centre
   alignment plus a fixed height keeps it to exactly one line */
.roles {
  margin-top: 8px; display: flex; align-items: center; gap: 7px;
  min-width: 0; height: 18px; overflow: hidden;
}
.roles .sep { color: var(--mut); opacity: .5; }
.roles .more-roles { color: var(--mut); font-size: 11px; flex: none; }
a.role {
  color: var(--fg); font-size: 11px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
a.role:hover { border-bottom-color: var(--co); }
/* block, not flex: as a flex container its text became an anonymous item
   and sat indented from the rest of the card */
.roles.none {
  display: block; color: var(--mut); font-size: 11px; font-style: italic;
}

/* ── Right-hand panels: Applied · Trash ────────────────────────── */
.drawer-right { right: 0; left: auto; border-left: 1px solid var(--line); transform: translateX(100%); }
.drawer-tabs {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 25; display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  transition: opacity .25s ease;
}
.drawer-tab {
  writing-mode: vertical-rl;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--active-bg); color: var(--active-fg);
  border: 0; border-radius: 10px 0 0 10px; cursor: pointer;
  font-family: var(--font-ui); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; padding: 16px 9px; transition: opacity .2s ease;
}
.drawer-tab em { font-style: normal; opacity: .7; }
.drawer-tab:hover { opacity: .88; }
body.drawer-open .drawer-tabs { opacity: 0; pointer-events: none; }

/* ── Footer picks up the brand + status the navbar used to carry ── */
.foot-brand {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  color: var(--fg); font-weight: 700; letter-spacing: -.01em;
}

/* ── Permanent left rail: brand + settings, 64px, always on screen ──
   Not a drawer: it holds real width in the layout and never collapses,
   so the board simply starts to the right of it. */
:root { --rail: 64px; }
body { padding-left: var(--rail); }
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); z-index: 45;
  background: var(--bg); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 16px 0 20px; overflow-y: auto;
}
/* Wordmark lives at the foot of the rail, reading bottom-to-top. */
.rail-brand {
  margin-top: auto; width: 100%; padding-top: 16px;
  color: var(--fg); display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}
.rail-brand .wordmark {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase;
}
.rail-brand:hover { color: var(--co); }
.rail-group {
  display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%;
}
.rail-lbl {
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut);
}
/* absolute + translate is what actually centres a rotated element: grid
   centring measures the pre-rotation box, which is wider than the rail. */
/* theme swatches stack down the rail instead of running across a toolbar */
.rail-group.swatches { flex-direction: column; gap: 9px; }
.rail-group.swatches .sw,
.rail-group.swatches:not(:hover) .sw:not(.is-on) {
  width: 18px; height: 18px; margin-left: 0; opacity: 1;
  border-width: 1px; transform: none; pointer-events: auto;
}

/* ── Rail: mode switch (Board · Brain) ──────────────────────────
   Two ways of engaging the same data: Board is the triage surface you
   are looking at; Brain is cognition mode, not built yet — it sits in
   the rail dimmed so the door is visible before it opens. */
.rail-group.modes { gap: 8px; }
.mode {
  position: relative; display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--mut); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.mode:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 9%, transparent); }
#syncBtn[data-state="ok"] { color: #4caf7a; }
#syncBtn[data-state="error"] { color: #e5675b; }
#syncBtn[data-state="busy"] svg { opacity: .5; }
.mode.is-on { color: var(--fg); border-color: var(--line); background: color-mix(in srgb, var(--fg) 9%, transparent); }
/* Icon-only rail, so the name flies out on hover. It is one shared fixed
   element rather than a ::after on the button: the rail scrolls, and an
   overflow container clips a flyout down to a sliver. */
.rail-tip {
  position: fixed; left: 0; top: 0; transform: translateY(-50%);
  padding: 5px 9px; border-radius: 7px; white-space: nowrap;
  background: var(--fg); color: var(--bg);
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 60;
}
.rail-tip.on { opacity: 1; }
/* visually-hidden label so the buttons still read as "Board" / "Brain" */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* "+24 more cities" — a collapsed multi-city repost. Quiet: it is a
   footnote about one job, not a second job. */
/* A major VC on the round is the strongest signal on a raise card. */
.badge.vc { border-color: var(--co); color: var(--co); }

.dupe {
  display: inline-block; margin-left: 8px; padding: 1px 6px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 10px; letter-spacing: .03em; color: var(--mut);
  white-space: nowrap; cursor: default;
}
.cog-card .dupe { font-size: 11px; padding: 2px 8px; }

/* ── Cognition mode ────────────────────────────────────────────────
   The opposite of the board: one listing, centred, with everything else
   out of the room. Entering swaps the whole surface via data-mode on
   <html>, so the board keeps its state and simply stops being drawn. */
.cog { display: none; }
html[data-mode="cognition"] .controls,
html[data-mode="cognition"] .board,
html[data-mode="cognition"] .drawer-tabs,
html[data-mode="cognition"] .foot { display: none; }
html[data-mode="cognition"] .cog {
  display: grid; position: fixed; inset: 0 0 0 var(--rail); z-index: 40;
  grid-template-columns: 88px minmax(0, 1fr) 88px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head head head" "prev stage next" "keys keys keys";
  align-items: center; background: var(--bg);
}

/* Column name at the top, so you always know which pile you're in. */
.cog-head {
  grid-area: head; display: flex; align-items: center; gap: 14px;
  padding: 22px 28px; border-bottom: 1px solid var(--line);
}
.cog-col {
  margin: 0; font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg);
}
/* A countdown, not "7 of 103": the deck shrinks as you decide, so a
   fixed total would be a lie the moment you file anything. */
.cog-left {
  font-family: var(--font-ui);
  font-size: 12px; color: var(--mut);
}
.cog-exit {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 11px; font: inherit; font-size: 12px;
  color: var(--mut); cursor: pointer;
}
.cog-exit:hover { color: var(--fg); border-color: var(--fg); }

.cog-stage { grid-area: stage; display: grid; place-items: center; padding: 28px 12px; min-height: 0; }

/* Arrows sit at the edges of the room, not on the card. */
.cog-arrow {
  display: grid; place-items: center; justify-self: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: none; border: 1px solid var(--line); color: var(--mut);
  cursor: pointer; transition: color .15s, border-color .15s, transform .15s;
}
.cog-arrow.prev { grid-area: prev; }
.cog-arrow.next { grid-area: next; }
.cog-arrow:hover:not(:disabled) { color: var(--fg); border-color: var(--fg); }
.cog-arrow.prev:hover:not(:disabled) { transform: translateX(-3px); }
.cog-arrow.next:hover:not(:disabled) { transform: translateX(3px); }
.cog-arrow:disabled { opacity: .22; cursor: default; }

/* ── The one card ─────────────────────────────────────────────── */
.cog-card {
  width: min(680px, 100%); display: flex; flex-direction: column; gap: 18px;
  padding: 38px 40px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg);
}
.cog-card .cog-src {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut);
}
.cog-card .cog-src .sep { opacity: .45; }
.cog-card .cog-co {
  font-family: var(--font-ui);
  font-size: 14px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--co); text-decoration: none;
}
a.cog-co:hover { text-decoration: underline; }
.cog-card .cog-title {
  margin: 0; font-family: var(--font-title); color: var(--spec);
  font-size: clamp(26px, 3.4vw, 40px); font-weight: 700;
  line-height: 1.12; letter-spacing: -.02em; word-break: break-word;
}
.cog-card .cog-meta {
  font-family: var(--font-ui);
  font-size: 13px; color: var(--mut); line-height: 1.7;
}
.cog-card .cog-meta .sep { margin: 0 9px; opacity: .45; }
.cog-card .badges { display: flex; flex-wrap: wrap; gap: 7px; }
.cog-card .roles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Read it, then decide: open is the loud one, filing is quiet. */
/* Five controls now, not three — tightened so the row still reads as one
   line of choices instead of leaving Trash stranded on its own. */
.cog-act {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 13px; border-radius: 10px;
  background: none; border: 1px solid var(--line); color: var(--mut);
  font: inherit; font-size: 13px; cursor: pointer;
}
.cog-act:hover { color: var(--fg); border-color: var(--fg); }
.cog-act.del:hover { color: var(--danger); border-color: var(--danger); }

/* Nothing left in this pile. */
.cog-done { text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.cog-done h3 { margin: 0; font-family: var(--font-title); font-size: 24px; font-weight: 700; color: var(--spec); }
.cog-done p { margin: 0; color: var(--mut); font-size: 14px; }
.cog-done .cog-jump { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Every action carries its own way back, because the deck shrinks and the
   left arrow can no longer show you what you just filed. */
.cog-toast {
  position: fixed; left: 50%; bottom: 88px; transform: translate(-50%, 10px);
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px; border-radius: 10px;
  background: var(--fg); color: var(--bg);
  font-size: 13px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s; z-index: 55;
}
.cog-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cog-toast button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}

.cog-keys {
  grid-area: keys; display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 8px 12px; padding: 18px;
  border-top: 1px solid var(--line);
  font-size: 11px; color: var(--mut);
}
/* One hint = its keys + its word, kept together so the only gap that reads
   as a gap is the one between hints. */
.cog-keys .khint { display: inline-flex; align-items: center; gap: 6px; }
.cog-keys .khint kbd + kbd { margin-left: -3px; }   /* arrow pairs sit tight */
.cog-keys .sep { opacity: .4; margin: 0; }

/* Uniform key caps: same box whatever the glyph, so Esc, A and the arrows
   share one baseline instead of each sitting where its own font puts it. */
.cog-keys kbd, .cog-exit kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  font-family: var(--font-ui); font-size: 10px; line-height: 1;
  border: 1px solid var(--line); border-radius: 4px; color: var(--mut);
}

/* Direction of travel matches the arrow you pressed. */
@keyframes cogInNext { from { opacity: 0; transform: translateX(26px); } }
@keyframes cogInPrev { from { opacity: 0; transform: translateX(-26px); } }
.cog-stage.to-next > * { animation: cogInNext .19s ease-out; }
.cog-stage.to-prev > * { animation: cogInPrev .19s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .cog-stage.to-next > *, .cog-stage.to-prev > * { animation: none; }
  .cog-arrow, .cog-toast { transition: none; }
}

/* ── Rail: the column picker ──────────────────────────────────── */
.cog-pick {
  position: fixed; z-index: 60; min-width: 190px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}
.cog-pick[hidden] { display: none; }
.cog-pick-lbl {
  padding: 5px 9px 7px; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mut);
}
.cog-pick-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--fg); text-align: left;
}
.cog-pick-opt em {
  margin-left: auto; font-style: normal;
  font-family: var(--font-ui); font-size: 12px; color: var(--mut);
}
.cog-pick-opt:hover { background: color-mix(in srgb, var(--fg) 9%, transparent); }
.cog-pick-opt:disabled { opacity: .4; cursor: default; }
.cog-pick-opt:disabled:hover { background: none; }

/* Résumé project link — same popover shell as the column picker, but it
   holds a field instead of a menu. The rail is 64px wide, so the input
   can't live in the rail itself. */
.proj-pick { min-width: 320px; gap: 8px; padding: 12px; }
.proj-input {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  font: inherit; font-family: var(--font-ui); font-size: 12px;
  color: var(--fg); background: var(--field-bg);
  border: 1px solid var(--line); border-radius: 8px;
}
.proj-input:focus { outline: none; border-color: var(--co); }
.proj-input.bad { border-color: var(--danger); }
.proj-hint { margin: 0; padding: 0 2px; font-size: 11px; line-height: 1.45; color: var(--mut); }
.proj-hint.warn { color: var(--danger); }
.proj-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 2px; }
.proj-row .act.ghost { margin-right: auto; }
.cog-pick-lbl i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .65; }

/* ── Outreach ──────────────────────────────────────────────────── */
/* One button walking a multi-day arc, so each stage has to say what it
   wants from you at a glance: quiet = nothing to do, accent = your move. */

.drawer-tab.has-due em { background: var(--co); color: var(--bg); }

/* Day headings in the Applied drawer. Same voice as the outreach groups —
   they're both "what happened when" lists. */
.day-head {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 2px 8px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg);
}
.day-head:first-child { padding-top: 4px; }
.day-head em { font-style: normal; color: var(--mut); }

.out-group { padding: 4px 0 14px; }
.out-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 2px 2px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg);
}
.out-head em { font-style: normal; color: var(--mut); }
.out-note { padding: 0 2px 8px; font-size: 11px; color: var(--mut); }
.out-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 2px 10px;
  padding: 10px 10px; margin-bottom: 6px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line);
}
.out-row:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
/* The one group that's actually a to-do reads first. */
.out-row.due { border-color: var(--co); background: color-mix(in srgb, var(--co) 8%, transparent); }
.out-co { font-weight: 600; font-size: 13px; color: var(--fg); }
.out-when { font-size: 11px; color: var(--mut); text-align: right; }
.out-row.stale .out-when { color: var(--danger); }
.out-role { grid-column: 1 / -1; font-size: 11px; color: var(--mut); }
.out-reset {
  background: none; border: 0; cursor: pointer; padding: 0 2px;
  font: inherit; font-size: 12px; line-height: 1; color: var(--mut); opacity: 0;
}
.out-row:hover .out-reset { opacity: 1; }
.out-reset:hover { color: var(--danger); }
.out-role.gone { font-style: italic; opacity: .7; }

/* Where did that job go? — a beat of emphasis after jumping from a row. */
.job.pinged { box-shadow: inset 0 0 0 2px var(--co); }

/* Per-column shortcut into cognition mode, next to Clear all. */
/* Rank toggle — sits beside the brain in the column head. It reorders,
   it never hides: the count is identical either way. */
.col-rank {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  margin-left: auto; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--mut); cursor: pointer;
}
.col-rank:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 10%, transparent); }
.col-rank.is-on { color: var(--active-fg); background: var(--active-bg); }
/* once one button owns the right edge the next must not claim it too */
.col-rank + .col-focus { margin-left: 6px; }
/* Why this card ranked where it did — ranking should not be a black box. */
.score-trace {
  display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 8px;
}
.score-trace b {
  font-weight: 500; font-size: 10px; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--mut); white-space: nowrap;
}

.col-focus {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  margin-left: auto; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--mut); cursor: pointer;
}
.col-focus:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 10%, transparent); }
/* Clear all already claimed the right edge; the brain sits just before it. */
.col-head .col-focus + .clear-all { margin-left: 10px; }

@media (max-width: 860px) {
  html[data-mode="cognition"] .cog {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "head head" "stage stage" "prev next" "keys keys";
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }
  .cog-card { padding: 26px 22px; }
  .cog-keys { display: none; }
}

/* the rail owns the left edge, so page chrome starts after it */
.controls, .col-head { }
.drawer-scrim { left: var(--rail); }

@media (max-width: 860px) {
  :root { --rail: 52px; }
  .rail { gap: 16px; }
  .rail-lbl { display: none; }
}
@media (max-width: 600px) {
  .rail { gap: 12px; padding: 10px 0 14px; }
  .rail-group.swatches .sw { width: 15px; height: 15px; }
  .mode { width: 26px; height: 26px; }
  .mode svg { width: 17px; height: 17px; }
}

/* ── Uniform rows ──────────────────────────────────────────────────
   Every card in every column is one row tall and built from the same
   parts, so the columns line up rank for rank. Anything that cannot fit
   is truncated on its own line — never allowed to spill past the card
   edge or push the action row out. */
:root { --row-h: calc(var(--spec-size) * 2.2 + 62px); --card-h: 220px; }   /* a floor, not a fixed height */

/* Cards size to their content now. The fixed row height existed so pill
   footers lined up across columns, but with a verb line pinned to the
   bottom it guaranteed a dead gap on every short card — and the columns
   scroll independently, so that alignment was never actually read. */
/* Every card is the same height so rows line up across Today, Previous and
   Just Raised. Sized for the tallest card (two-line title + badge row); the
   verb line is pinned to the bottom so it lines up too. */
.col .job {
  height: var(--card-h);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.col .job > .verbs { margin-top: auto; padding-top: 12px; }
.col .job > .job-top, .col .job > .job-meta, .col .job > .roles { flex: none; }

/* top line: index · company (truncates) · source (never shrinks) */
.job-top { min-width: 0; }
.job-top .idx { flex: none; }
.job-top .co {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.job-top .src { flex: none; max-width: 45%; overflow: hidden; white-space: nowrap; }

/* headline: at most two lines */
/* flex: none — as a shrinkable item the browser was collapsing the
   headline to zero height when a card ran long */
.col .job > .job-title {
  flex: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  /* line-height 1.12 gives a 26.9px line box, but Manrope at 24px needs 33px
     (ascent 26 + descent 7). overflow:hidden clips at the padding edge, so
     descenders in g/y/p/q/j were being cut off. Pad the bottom rather than
     opening up line-height: this costs the card ~6px once, not per line.
     In em so it tracks --spec-size. */
  padding-bottom: .26em;
}
/* meta and roles: strictly one line each, ellipsis rather than a wrap that
   would eat the room the action row needs */
.col .job > .job-meta, .col .job > .roles {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* a funding headline is short ("$250.0M · Series C"), so one line is enough
   and the roles line it carries still fits the shared row height */
.col-raised .job > .job-title { -webkit-line-clamp: 1; }
/* The card's own badges sit on their own line now that the footer is a
   sentence rather than a row competing for width. */
.job .badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }

/* The Applied / Trash edge tabs float over the right edge of the board, so
   the last column keeps a lane clear for them instead of letting them sit
   on top of a card's source label. */
.col:last-child .job { padding-right: 46px; }

/* A ticked card: text struck through and the whole card dimmed. */
.job { transition: opacity .25s ease; }
.job.is-done { opacity: .45; }
.job.is-done .job-top, .job.is-done .job-title, .job.is-done .job-meta { text-decoration: line-through; }

/* ── List view ─────────────────────────────────────────────────────
   Same cards and data as the board, one column at a time: a tab row picks
   the column, and it sits centred with room either side. The tab row only
   exists in this view. */
.view-tabs { display: none; }
html[data-view="list"] .view-tabs {
  display: flex; justify-content: center; gap: 6px; height: 46px; align-items: center;
  position: sticky; top: 57px; z-index: 16; background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.view-tabs button {
  display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px 8px;
  font: inherit; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  color: var(--mut);
}
.view-tabs button em { font-style: normal; font-weight: 400; }
.view-tabs button:hover { color: var(--fg); }
.view-tabs button.is-on { color: var(--fg); border-bottom-color: var(--co); }
html[data-view="list"] .board { display: block; max-width: 760px; margin: 0 auto; }
html[data-view="list"] .col { display: none; border-left: 0; }
html[data-view="list"] .col.is-active { display: block; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
html[data-view="list"] .col-head { top: 103px; }
html[data-view="list"][data-mode="cognition"] .view-tabs { display: none; }
@media (max-width: 1024px) { html[data-view="list"] .col-head { position: sticky; } }