/* Design tokens — themeable Career Compass palette (--cv-*).
   Themes restyle the UI by redefining these variables; layout rules stay shared. */
:root,
[data-theme="steel"] {
  --cv-ink: #ededed;
  --cv-bg: #0a0a0a;
  --cv-accent: #ff6900;
  --cv-accent-rgb: 255, 105, 0;
  --cv-surface: #141414;
  --cv-gray-1: #2e2e2e;
  --cv-gray-2: #a8a8a8;
  --cv-gray-3: #cfcfcf;
  --cv-danger: #ff3030;
  --hdr-bg: #000000;
  --hdr-fg: #ffffff;
  --inverse-bg: #000000;
  --inverse-fg: #ffffff;
  --btn-primary-from: #1a1a1a;
  --btn-primary-to: #000000;
  --btn-primary-border: #2e2e2e;
  --btn-primary-hover-fg: #0a0a0a;
  --ghost-bg: rgba(255, 255, 255, 0.04);
  --ghost-border: #2e2e2e;
  --cv-font: "Inter", "SF Pro Display", "Segoe UI", -apple-system, Roboto, sans-serif;
  --cv-font-display: "Inter", "SF Pro Display", "Segoe UI", -apple-system, Roboto, sans-serif;
  --cv-mono: "JetBrains Mono", "IBM Plex Mono", Consolas, monospace;
  --radius: 0px;
  --radius-pill: 2px;
  --radius-sm: 2px;
  --hdr-h: 56px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.45);
  --theme-swatch-1: #0a0a0a;
  --theme-swatch-2: #1a1a1a;
  --theme-swatch-3: #ff6900;
  --theme-swatch-4: #ffffff;
}
[data-theme="classic"] {
  --cv-ink: #0f1723;
  --cv-bg: #ffffff;
  --cv-accent: #d89a2b;
  --cv-accent-rgb: 216, 154, 43;
  --cv-surface: #f6f3ec;
  --cv-gray-1: #d9d7d1;
  --cv-gray-2: #667385;
  --cv-gray-3: #2d3a4b;
  --cv-danger: #b54a2f;
  --hdr-bg: #0f1723;
  --hdr-fg: #ffffff;
  --inverse-bg: #0f1723;
  --inverse-fg: #ffffff;
  --btn-primary-from: #1f3048;
  --btn-primary-to: #0f1723;
  --btn-primary-border: #24384f;
  --btn-primary-hover-fg: #1f2733;
  --ghost-bg: rgba(255, 255, 255, 0.72);
  --ghost-border: #bcc3cc;
  --cv-font: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
  --cv-font-display: "Helvetica Neue Condensed", "Helvetica Neue", "Inter", Impact, Helvetica, sans-serif;
  --cv-mono: "IBM Plex Mono", Consolas, monospace;
  --radius: 0px;
  --radius-pill: 100px;
  --radius-sm: 3px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 4px 20px rgba(0, 0, 0, 0.08);
  --theme-swatch-1: #0f1723;
  --theme-swatch-2: #f6f3ec;
  --theme-swatch-3: #d89a2b;
  --theme-swatch-4: #ffffff;
}
[data-theme="arctic"] {
  --cv-ink: #0a0a0a;
  --cv-bg: #ffffff;
  --cv-accent: #ff6900;
  --cv-accent-rgb: 255, 105, 0;
  --cv-surface: #f4f4f4;
  --cv-gray-1: #e2e2e2;
  --cv-gray-2: #6e6e6e;
  --cv-gray-3: #2e2e2e;
  --cv-danger: #ff3030;
  --hdr-bg: #0a0a0a;
  --hdr-fg: #ffffff;
  --inverse-bg: #0a0a0a;
  --inverse-fg: #ffffff;
  --btn-primary-from: #ff6900;
  --btn-primary-to: #cc5500;
  --btn-primary-border: #ff6900;
  --btn-primary-hover-fg: #ffffff;
  --ghost-bg: #ffffff;
  --ghost-border: #d0d0d0;
  --cv-font: "Inter", "SF Pro Display", "Segoe UI", -apple-system, Roboto, sans-serif;
  --cv-font-display: "Inter", "SF Pro Display", "Segoe UI", -apple-system, Roboto, sans-serif;
  --cv-mono: "JetBrains Mono", Consolas, monospace;
  --radius: 0px;
  --radius-pill: 2px;
  --radius-sm: 2px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 4px 20px rgba(0, 0, 0, 0.1);
  --theme-swatch-1: #ffffff;
  --theme-swatch-2: #f4f4f4;
  --theme-swatch-3: #ff6900;
  --theme-swatch-4: #0a0a0a;
}
[data-theme="prism"] {
  --cv-ink: #ededed;
  --cv-bg: #0a0a0a;
  --cv-accent: #c6f432;
  --cv-accent-rgb: 198, 244, 50;
  --cv-surface: #141414;
  --cv-gray-1: #2e2e2e;
  --cv-gray-2: #a8a8a8;
  --cv-gray-3: #cfcfcf;
  --cv-danger: #ff3030;
  --hdr-bg: #000000;
  --hdr-fg: #ffffff;
  --inverse-bg: #000000;
  --inverse-fg: #ffffff;
  --btn-primary-from: #1a1a1a;
  --btn-primary-to: #000000;
  --btn-primary-border: #2e2e2e;
  --btn-primary-hover-fg: #0a0a0a;
  --ghost-bg: rgba(255, 255, 255, 0.04);
  --ghost-border: #2e2e2e;
  --cv-font: "Inter", "SF Pro Display", "Segoe UI", -apple-system, Roboto, sans-serif;
  --cv-font-display: "Inter", "SF Pro Display", "Segoe UI", -apple-system, Roboto, sans-serif;
  --cv-mono: "JetBrains Mono", Consolas, monospace;
  --radius: 0px;
  --radius-pill: 2px;
  --radius-sm: 2px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.45);
  --theme-swatch-1: #0a0a0a;
  --theme-swatch-2: #1a1a1a;
  --theme-swatch-3: #c6f432;
  --theme-swatch-4: #ffffff;
}
[data-theme="ocean"] {
  --cv-ink: #e8eef5;
  --cv-bg: #0b1220;
  --cv-accent: #3aa0ff;
  --cv-accent-rgb: 58, 160, 255;
  --cv-surface: #121a2a;
  --cv-gray-1: #243247;
  --cv-gray-2: #8fa3bd;
  --cv-gray-3: #c5d2e4;
  --cv-danger: #ff5c7a;
  --hdr-bg: #070d18;
  --hdr-fg: #ffffff;
  --inverse-bg: #070d18;
  --inverse-fg: #ffffff;
  --btn-primary-from: #13233a;
  --btn-primary-to: #0b1220;
  --btn-primary-border: #243247;
  --btn-primary-hover-fg: #0b1220;
  --ghost-bg: rgba(255, 255, 255, 0.04);
  --ghost-border: #243247;
  --cv-font: "Inter", "SF Pro Display", "Segoe UI", -apple-system, Roboto, sans-serif;
  --cv-font-display: "Inter", "SF Pro Display", "Segoe UI", -apple-system, Roboto, sans-serif;
  --cv-mono: "JetBrains Mono", Consolas, monospace;
  --radius: 0px;
  --radius-pill: 2px;
  --radius-sm: 2px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.45);
  --theme-swatch-1: #0b1220;
  --theme-swatch-2: #121a2a;
  --theme-swatch-3: #3aa0ff;
  --theme-swatch-4: #e8eef5;
}
[x-cloak] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--cv-bg); color: var(--cv-ink); font-family:
var(--cv-font); -webkit-font-smoothing: antialiased; line-height: 1.6; }
h1, h2, h3 { font-family: var(--cv-font-display); text-transform: uppercase; line-height: 1.05; letter-
spacing: -0.02em; }
code, pre { font-family: var(--cv-mono); font-size: 12.5px; }
a { color: var(--cv-ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--cv-accent); }
/* ---------- HEADER ---------- */
.hdr-shell {
  position: sticky;
  top: 0;
  z-index: 100;
}
.demo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 8px 24px;
  background: color-mix(in srgb, var(--cv-accent) 18%, var(--hdr-bg));
  color: var(--hdr-fg);
  border-bottom: 1px solid color-mix(in srgb, var(--cv-accent) 45%, transparent);
  font-size: 13px;
  line-height: 1.35;
}
.demo-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}
.demo-banner-text strong { font-weight: 700; }
.demo-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}
.demo-banner-reset,
.demo-banner-login {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--hdr-fg) 35%, transparent);
  background: transparent;
  color: var(--hdr-fg);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.demo-banner-reset-short,
.demo-banner-login-short { display: none; }
.demo-banner-reset:hover,
.demo-banner-login:hover {
  border-color: var(--cv-accent);
  color: var(--cv-accent);
}
@media (max-width: 780px) {
  .demo-banner {
    gap: 8px;
    padding: 4px 10px 4px 12px;
    font-size: 11px;
    line-height: 1.2;
  }
  .demo-banner-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .demo-banner-actions { gap: 6px; }
  .demo-banner-reset,
  .demo-banner-login {
    padding: 3px 8px;
    font-size: 10px;
    letter-spacing: 0.01em;
  }
  .demo-banner-reset-full { display: none; }
  .demo-banner-reset-short { display: inline; }
  .demo-banner-login-full { display: none; }
  .demo-banner-login-short { display: inline; }
}
.hdr {
  position: relative;
  top: auto;
  z-index: 1;
  min-height: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding: 0 12px 0 24px;
  background: var(--hdr-bg);
  color: var(--hdr-fg);
  gap: 8px 16px;
}
.hdr-left { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.hdr-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
}
.hdr-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}
.hdr-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--hdr-fg);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.hdr-icon-btn:hover {
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
}
.hdr-icon-btn[aria-expanded="true"] {
  color: var(--cv-accent);
}
.hdr-icon-btn svg {
  width: 22px;
  height: 22px;
  display: block;
}
.tour-replay-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.85);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tour-replay-btn:hover {
  background: rgba(var(--cv-accent-rgb), 0.18);
  border-color: rgba(var(--cv-accent-rgb), 0.45);
  color: var(--hdr-fg);
}
.hdr-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
  max-width: min(42vw, 280px);
}
.hdr-account-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}
.hdr-logout-btn {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hdr-logout-btn:hover {
  background: rgba(var(--cv-accent-rgb), 0.18);
  border-color: rgba(var(--cv-accent-rgb), 0.45);
  color: var(--hdr-fg);
}
@media (max-width: 720px) {
  .hdr-account-email {
    max-width: 28vw;
  }
}

/* ---------- Lite walkthrough ---------- */
.tour-root {
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
}
.tour-scrim {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}
.tour-hole {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(15, 23, 35, 0.64);
  outline: 2px solid rgba(216, 154, 43, 0.85);
  outline-offset: 2px;
  pointer-events: none;
  /* No CSS transition — position must track scroll 1:1 */
  z-index: 8001;
}
.tour-card {
  position: fixed;
  z-index: 8002;
  pointer-events: auto;
  background: var(--cv-bg);
  color: var(--cv-ink);
  border: 1px solid var(--cv-gray-1);
  box-shadow: 0 16px 40px rgba(15, 23, 35, 0.22);
  padding: 16px 18px 14px;
  border-radius: 4px;
}
.tour-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.tour-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cv-gray-2);
}
.tour-skip {
  background: none;
  border: none;
  font: inherit;
  font-size: 12px;
  color: var(--cv-gray-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tour-skip:hover { color: var(--cv-ink); }
.tour-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  font-family: var(--cv-font);
}
.tour-body {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--cv-gray-3);
}
.tour-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.hdr .swoosh { height: 24px; width: auto; }
.brand-title {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--hdr-fg);
}
/* Nav banner — drops below the header menu button (SteelSeries-style) */
.nav-banner {
  position: relative;
  top: auto;
  z-index: 1;
  background: var(--hdr-bg);
  color: var(--hdr-fg);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
.nav-banner-inner {
  padding: 10px 24px 14px;
  max-width: 1440px;
  margin: 0 auto;
}
/* .hdr-nav layout is owned by the stretchy pill block (STAGE15_NAV_MERGE). */
.nav-section {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-section + .nav-section {
  margin-left: 6px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.nav-dd { position: relative; }
.nav-trigger {
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  border: none;
  padding: 8px 14px;
  font: inherit;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.nav-trigger:hover {
  background: rgba(var(--cv-accent-rgb), 0.18);
  color: var(--hdr-fg);
  box-shadow: inset 0 0 0 1px rgba(var(--cv-accent-rgb), 0.28);
}
.nav-trigger.active,
.nav-trigger.open {
  background: var(--cv-accent);
  color: #0a0a0a;
}
.nav-trigger.active .tab-count,
.nav-trigger.open .tab-count {
  background: #0a0a0a;
  color: #ffffff;
}
.nav-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
  transition: transform 0.15s ease;
}
.nav-trigger.open .nav-caret { transform: rotate(180deg); }
.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  padding: 6px;
  background: var(--cv-bg);
  color: var(--cv-ink);
  border: 1px solid var(--cv-gray-1);
  box-shadow: 0 10px 28px rgba(15, 23, 35, 0.18);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--cv-ink);
  cursor: pointer;
  transition: background 0.12s ease;
}
.nav-menu-item:hover { background: var(--cv-surface); }
.nav-menu-item.active {
  background: var(--cv-ink);
  color: var(--cv-bg);
}
.nav-menu-item .tab-count {
  background: rgba(15, 23, 35, 0.08);
  color: var(--cv-gray-3);
}
.nav-menu-item.active .tab-count {
  background: rgba(255, 255, 255, 0.18);
  color: var(--cv-bg);
}
.nav-section-move .nav-trigger:not(.active):not(.open) {
  color: var(--cv-accent);
}
.nav-section-context .nav-trigger:not(.active) {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}
.tab-count {
  background: rgba(255,255,255,0.18);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}
/* Legacy flat-tab styles removed — stretchy pill nav owns .tab / .tab-group
   (see STAGE15_NAV_MERGE block below). */
/* ---------- LOADING ---------- */
.loading { padding: 80px; text-align: center; color: var(--cv-gray-2); font-weight: 600; }
/* ---------- MAIN ---------- */
.main { padding: 32px 40px 80px; max-width: 1440px; margin: 0 auto; }
.section-title {
  font-size: 32px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  margin: 0 0 24px;
}
.section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.section-head-row .section-title { margin-bottom: 0; }
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--cv-accent);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.muted { color: var(--cv-gray-2); font-size: 13px; }
/* ---------- DASHBOARD ---------- */
.dash-hero {
  background: var(--inverse-bg);
  color: var(--inverse-fg);
  padding: 48px;

  border-radius: var(--radius);
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s ease, outline-color 0.15s ease;
}
.dash-hero:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--cv-accent-rgb), 0.45);
}
.dash-hero:focus-visible {
  outline: 2px solid var(--cv-accent);
  outline-offset: 2px;
}
.dash-hero-edit-hint {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.dash-hero:hover .dash-hero-edit-hint,
.dash-hero:focus-visible .dash-hero-edit-hint {
  opacity: 1;
  color: var(--cv-accent);
}
.dash-hero::after {
  content: "";
  position: absolute;
  right: -100px; bottom: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(closest-side, var(--cv-accent), transparent);
  opacity: 0.4;
}
.dash-hero-text { position: relative; z-index: 2; }
.dash-hero .eyebrow { color: var(--cv-accent); }
/* Fluid hero — no hard breakpoint. clamp() shrinks the name from 64px on
   wide screens down to 32px on narrow ones so it never overflows. */
.hero-title {
  font-size: clamp(32px, 6vw, 64px);
  font-weight: 900;
  letter-spacing: -2px;
  margin: 0 0 8px;
  text-transform: uppercase;
  line-height: 1.02;
}
.hero-sub { font-size: 14px; color: var(--cv-gray-1); margin: 0 0 24px; }
.hero-summary { max-width: 720px; font-size: 15px; line-height: 1.6; color: var(--cv-gray-1); }
/* Dark themes: hero contact/summary need light type on inverse panels */
[data-theme="steel"] .hero-sub,
[data-theme="steel"] .hero-summary,
[data-theme="prism"] .hero-sub,
[data-theme="prism"] .hero-summary,
[data-theme="ocean"] .hero-sub,
[data-theme="ocean"] .hero-summary {
  color: #ffffff;
}
/* Highlights band: 2x2 tiles on the left, High-fives-by-FY bar chart on
   the right. Both children fill the row so heights line up automatically.
   Stacks at ≤1100px so the chart doesn't get squeezed on medium screens. */
.highlights-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  align-items: stretch;
}
/* 4 career-highlight tiles arranged 2x2 (Roles / Projects / Years at Nike /
   High-fives since 2022). Compact padding + a slightly reduced .stat-num so
   the natural 2x2 height sits close to the Hi5 chart height on the right;
   `align-items: stretch` on the parent grid then equalizes them cleanly. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 0;
}
.stat {
  background: var(--cv-surface);
  padding: 18px 22px;
  border-radius: var(--radius);
  border-left: 3px solid var(--cv-accent);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stat-num { font-size: 42px; font-weight: 900; line-height: 1; }
.stat-lbl { font-size: 11px; color: var(--cv-gray-2); text-transform: uppercase; letter-spacing: 0.5px;
font-weight: 700; margin-top: 6px; }
/* Restored from the earlier "Recognition by FY" card — used now by the
   High-fives-by-FY chart on the right side of the highlights row. */
.dash-card {
  background: var(--cv-bg);
  border: 1px solid var(--cv-gray-1);
  padding: 20px 22px;
  border-radius: var(--radius);
}
.dash-card h3 { margin: 0 0 14px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-
spacing: 0.5px; }
/* The FY-chart card visually pairs with the 2x2 tile treatment — off-white
   fill, orange left-rail — so the highlights band reads as a single family. */
.highlights-fy {
  display: flex;
  flex-direction: column;
  background: var(--cv-surface);
  border: none;
  border-left: 3px solid var(--cv-accent);
}
.highlights-fy h3 { flex: 0 0 auto; }

/* Distribute the FY rows evenly through whatever height the grid allocates
   so the chart never leaves large white gaps at the bottom when it stretches
   to match the 2x2 tile height. */
.highlights-fy > template + .maxim-row,
.highlights-fy .maxim-row { flex: 0 0 auto; }
.maxim-row { display: grid; grid-template-columns: 56px 1fr 32px; align-items: center; gap: 10px; margin-
bottom: 8px; font-size: 12px; }
.maxim-label { font-weight: 700; letter-spacing: 0.5px; }
.maxim-bar { height: 10px; background: var(--cv-accent); border-radius: 2px; min-width: 2px; }
.maxim-count { text-align: right; font-weight: 700; color: var(--cv-gray-3); }
/* Timeline embedded inside the dashboard — matches spacing above so the tiles
   flow smoothly into the timeline block. */
.dash-timeline { margin-top: 8px; }
.dash-timeline .section-title { margin-bottom: 20px; }
/* ---------- CARDS ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.card {
  background: var(--cv-bg);
  border: 1px solid var(--cv-gray-1);
  padding: 24px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--cv-ink); }
.card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.card-eyebrow { font-size: 11px; font-weight: 700; color: var(--cv-accent); letter-spacing: 0.5px; text-
transform: uppercase; }
.card-title { font-size: 17px; font-weight: 800; line-height: 1.25; }
.card-company, .card-role { font-size: 13px; color: var(--cv-gray-2); font-weight: 600; }
.project-merged-badge {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 7px;
  border: 1px solid rgba(171, 123, 30, 0.45);
  border-radius: 999px;
  color: #7a560d;
  background: rgba(227, 182, 93, 0.2);
  text-transform: lowercase;
}
.project-retired {
  border-style: dashed;
}
.project-retired-dim {
  opacity: 0.58;
}
.project-retired-dim:hover {
  opacity: 0.86;
}
/* Role-card preview block. Renders "<tenure> · <short_narrative>" between
   the company line and the bullets — leads with tenure so a scanner can
   read "how long they were in this role" first, then the short summary. */
.card-preview {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cv-gray-3);
  margin-top: 8px;
}
.card-tenure {
  font-weight: 700;
  color: var(--cv-ink);
}
.card-preview-sep { color: var(--cv-gray-1); }
.card-short-narrative { color: var(--cv-gray-3); }
.card-bullets { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.card-bullet { font-size: 12.5px; line-height: 1.45; color: var(--cv-gray-3); }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.card-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  max-height: 4.6em;
  overflow: hidden;
}
.tag.skill-tag {
  text-transform: none;
  border-color: var(--cv-gray-2, #bbb);
  color: var(--cv-gray-4, #333);
  background: var(--cv-gray-0, #f5f5f5);
  cursor: default;
}
.tag.skill-tag:hover {
  border-color: var(--cv-gray-2, #bbb);
  color: var(--cv-gray-4, #333);
}
.tag {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 10px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-pill);
  color: var(--cv-gray-3);
  background: var(--cv-bg);
  cursor: pointer;
  text-transform: lowercase;
  transition: border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.tag:hover { border-color: var(--cv-ink); color: var(--cv-ink); }
.card-metrics { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.metric-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  background: var(--cv-ink);
  color: var(--cv-bg);
  border-radius: 3px;
}
.card-footer {
  display: flex;
  gap: 12px;
  margin-top: 8px;

  padding-top: 12px;
  border-top: 1px solid var(--cv-gray-1);
  font-size: 11px;
  color: var(--cv-gray-2);
}
/* ---------- FILTERS ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: var(--cv-surface);
  border-radius: var(--radius);
  margin-bottom: 16px;
  align-items: center;
}
.filters > * { min-width: 0; }
.filters select, .filters input[type=text] {
  font: inherit;
  padding: 8px 12px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius);
  background: var(--cv-bg);
  color: var(--cv-ink);
  font-size: 13px;
  max-width: 100%;
}
.filters select option,
.tk-filters select option,
.job-role-select option,
.ai-count select option,
.tk-status-select select option,
.notes-filter-row select option,
.notes-field select option {
  background: var(--cv-bg);
  color: var(--cv-ink);
}
.filter-search { min-width: 220px; }
.filters input[type=text]::placeholder,
.filter-search::placeholder {
  color: var(--cv-gray-2);
  opacity: 1;
}
.skills-filters .filter-search { flex: 1 1 220px; min-width: 200px; }
.skills-result-count {
  font-size: 12.5px;
  margin-left: auto;
  white-space: nowrap;
}
.skill-jd-preview {
  font-size: 12px;
  margin-top: 6px;
}
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.btn {
  font: inherit;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-weight: 500;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  letter-spacing: 0.02em;
}
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}
.btn.primary {
  background: linear-gradient(135deg, var(--btn-primary-from), var(--btn-primary-to));
  color: var(--hdr-fg);
  border-color: var(--btn-primary-border);
  box-shadow: var(--shadow-1);
}
.btn.primary:hover {
  background: linear-gradient(135deg, var(--cv-accent), color-mix(in srgb, var(--cv-accent) 75%, #000));
  border-color: var(--cv-accent);
  color: var(--btn-primary-hover-fg);
  box-shadow: 0 6px 14px rgba(var(--cv-accent-rgb), 0.25);
}
.btn.ghost { background: var(--ghost-bg); color: var(--cv-ink); border-color: var(--ghost-border); }
.btn.ghost:hover {
  border-color: var(--cv-accent);
  background: rgba(var(--cv-accent-rgb), 0.10);
}
.btn.danger {
  background: transparent;
  color: var(--cv-danger);
  border-color: var(--cv-danger);
}
.btn.danger:hover {
  background: var(--cv-danger);
  color: #ffffff;
  border-color: var(--cv-danger);
}
.btn:active { transform: translateY(1px); }
/* ---------- TIMELINE ---------- */
.tl { position: relative; }
.tl-wrap { border-left: 1px solid var(--cv-gray-1); }
.tl-row { display: grid; grid-template-columns: 280px 1fr; align-items: center; height: 28px; gap: 12px; }
.tl-label { font-size: 12.5px; font-weight: 600; padding-right: 12px; overflow: hidden; text-overflow:
ellipsis; white-space: nowrap; }
.tl-bar-holder { position: relative; height: 100%; background: var(--cv-surface); cursor: pointer; }
.edu-edit-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tl-bar {
  position: absolute;
  top: 6px;
  height: 16px;
  border-radius: 2px;
  min-width: 2px;
}
/* Role bars share the theme accent with education, in a fuller solid shade.
   Education stays the muted striped variant below. */
.tl-bar.roles {
  background: color-mix(in srgb, var(--cv-accent) 72%, #000 28%);
}
/* Concurrent stretch assignments stand out as a brighter accent shade. */
.tl-bar.roles.stretch {
  background: color-mix(in srgb, var(--cv-accent) 82%, #fff 18%);
}
.tl-bar.project { background: var(--cv-accent); opacity: 0.85; }
/* Education bars — muted theme accent + subtle diagonal stripe to visually
   separate them from roles (solid deeper accent) and any future project bars. */
.tl-bar.education {
  background: var(--cv-accent);
  opacity: 0.55;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.18) 0,
    rgba(255, 255, 255, 0.18) 4px,
    transparent 4px,
    transparent 8px
  );
}
.tl-bar-holder.no-click { cursor: default; }
/* Education group — a shaded band beneath the role stack with a thin
   top divider and a small uppercase label so the two strata read as
   distinct sections on a single time axis. Horizontal padding is

   intentionally zero so the label + bar columns stay aligned with the
   role rows above (and the year scale below). */
.tl-group.education {
  margin-top: 10px;
  padding: 6px 0 4px;
  border-top: 1px solid var(--cv-gray-1);
  background: linear-gradient(
    to right,
    rgba(250, 84, 0, 0.06),
    rgba(250, 84, 0, 0.02)
  );
}
.tl-group-hdr {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cv-gray-2);
  padding: 2px 0 6px 4px;
}
.tl-scale { display: flex; justify-content: space-between; padding-left: 292px; padding-top: 14px; color:
var(--cv-gray-2); font-size: 11px; align-items: flex-start; padding-right: 8px; }
.tl-year {
  display: inline-block;
  white-space: nowrap;
  transform: rotate(-33deg);
  transform-origin: top left;
  font-size: 10.5px;
  letter-spacing: 0.01em;
}
/* ---------- HEATMAP ---------- */
.heat-wrap { overflow-x: auto; }
.heat { border-collapse: collapse; width: 100%; }
.heat th, .heat td { padding: 4px 8px; text-align: center; font-size: 12px; border: 1px solid var(--cv-gray-1); }
.heat th { background: var(--inverse-bg); color: var(--inverse-fg); }
.heat .skill-name { text-align: left; font-weight: 600; padding: 6px 12px; background: var(--cv-surface);
white-space: nowrap; }
/* ---------- SKILLS TAB — job-role filter + skill cards ---------- */
/* Row of large filter buttons across the top of the Skills tab. */
.job-role-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 12px;
}
.job-role-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: min(420px, 100%);
}
.job-role-select {
  font: inherit;
  width: 100%;
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm);
  background: var(--cv-bg);
  color: var(--cv-ink);
  font-size: 13px;
}
.job-role-select:focus {
  outline: none;
  border-color: var(--cv-ink);
  box-shadow: 0 0 0 2px rgba(216, 154, 43, 0.2);
}
.job-role-btn {
  padding: 10px 16px;
  border: 1.5px solid var(--cv-ink);
  border-radius: 999px;
  background: var(--cv-bg);
  color: var(--cv-ink);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 120ms ease, box-shadow 0.2s ease, transform 0.12s ease;
}
.job-role-btn:hover {
  background: rgba(216, 154, 43, 0.12);
  border-color: #9f7b38;
  transform: translateY(-1px);
}
.job-role-btn.active {
  background: linear-gradient(135deg, #1f3048, var(--cv-ink));
  color: var(--cv-bg);
  border-color: #24384f;
  box-shadow: 0 6px 12px rgba(15, 23, 35, 0.2);
}
.job-role-btn.active:hover { background: linear-gradient(135deg, #e3b65d, var(--cv-accent)); color: #1f2733; }
/* Compact category chips */
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.cat-chip {
  padding: 4px 12px;
  border: 1px solid var(--cv-gray-1);
  border-radius: 999px;
  background: transparent;
  color: var(--cv-gray-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 120ms ease, box-shadow 0.2s ease;
}
.cat-chip:hover {
  border-color: #7b8898;
  color: var(--cv-ink);
  background: rgba(216, 154, 43, 0.10);
}
.cat-chip.active {
  background: linear-gradient(135deg, #e3b65d, var(--cv-accent));
  border-color: var(--cv-accent);
  color: #1f2733;
  box-shadow: 0 4px 10px rgba(171, 123, 30, 0.24);
}
/* Banner shown when a job-role button is active */
.job-role-banner {
  padding: 12px 16px;
  margin-bottom: 20px;
  border-left: 4px solid var(--cv-accent);
  background: var(--cv-surface);
  border-radius: 4px;
}
.job-role-banner-title { font-size: 14px; margin-bottom: 2px; }
.job-role-banner-title strong { text-transform: uppercase; letter-spacing: 0.04em; }
/* Card grid */
.skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.skill-card {
  padding: 16px 18px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius);
  background: var(--cv-bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.skill-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.skill-card {
  cursor: pointer;
}
.skill-card:focus-visible {
  outline: 2px solid var(--cv-accent);
  outline-offset: 2px;
}
.skill-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}
.skill-alt-count {
  font-size: 11.5px;
}

/* ---------- SKILL DETAIL MODAL ---------- */
.skill-detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  /* Opened both from the Skills catalog (no drawer open) AND from inside
     the project/role drawer's clickable skill chips — so it needs to
     layer ABOVE the drawer (`.drawer { z-index: 200; }`), matching the
     bullet-skill-picker's z-index: 250 pattern. */
  z-index: 460;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  overflow-y: auto;
}
.skill-detail-modal {
  position: relative;
  width: min(640px, 100%);
  background: var(--cv-bg);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  padding: 28px 28px 24px;
  margin-bottom: 40px;
}
.skill-detail-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  color: var(--cv-gray-2);
}
.skill-detail-title {
  font-size: 26px;
  margin: 4px 0 8px;
  letter-spacing: -0.5px;
}
.skill-detail-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.skill-detail-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.skill-detail-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.skill-detail-def {
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0 0 18px;
}
.skill-detail-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--cv-gray-1);
}
.skill-detail-section h4 {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.skill-detail-hint {
  font-size: 12.5px;
  margin: 0 0 10px;
}
.skill-alt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.skill-alt-chip {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--cv-gray-1);
  border-radius: 999px;
  background: var(--cv-surface);
}
.skill-angle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skill-angle-row {
  padding: 10px 12px;
  background: var(--cv-surface);
  border-radius: 6px;
}
.skill-angle-main {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.skill-angle-label {
  font-weight: 700;
  font-size: 14px;
}
.skill-angle-desc {
  font-size: 12.5px;
  margin-top: 4px;
}
.skill-angle-variants {
  font-size: 11.5px;
  margin-top: 4px;
}
.skill-add-modal { width: min(720px, 100%); }
.skill-add-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cv-gray-3);
}
.skill-add-field input,
.skill-add-field textarea,
.skill-add-field select {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cv-ink);
  border: 1px solid var(--cv-gray-1);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--cv-bg);
}
.skill-add-field textarea { resize: vertical; min-height: 72px; }
.skill-add-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) {
  .skill-add-row { grid-template-columns: 1fr; }
}
.skill-add-angles-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.skill-add-angles-head h4 { margin: 0; }
.skill-add-fits { max-height: 280px; overflow-y: auto; }
.skill-add-fit-select {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border: 1px solid var(--cv-gray-1);
  border-radius: 6px;
  background: var(--cv-bg);
}
.skill-add-error {
  color: #b00020;
  font-size: 13px;
  margin: 0 0 12px;
}
.skill-add-status {
  color: var(--cv-gray-3);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 12px;
}
.skill-edit-error {
  color: #b00020;
  font-size: 13px;
  margin: 0 0 10px;
}
.skill-edit-status {
  color: var(--cv-gray-3);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
}
.skill-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.skill-jd-count {
  font-size: 14px;
  margin: 0 0 10px;
}
.skill-jd-hits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skill-jd-hits li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
button.linkish {
  background: none;
  border: none;
  padding: 0;
  color: var(--cv-ink);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.skill-detail-loading {
  padding: 24px 0;
  text-align: center;
}

.skill-card.pri-1 { border-top: 3px solid var(--cv-accent); }
.skill-card.pri-2 { border-top: 3px solid var(--cv-ink); }
.skill-card.pri-3 { border-top: 3px solid var(--cv-gray-2); }
.skill-card.pri-4,
.skill-card.pri-5 { border-top: 3px solid var(--cv-gray-1); }
.skill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.skill-cat-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cv-gray-3);
  padding: 2px 8px;
  border: 1px solid var(--cv-gray-1);
  border-radius: 999px;
}
.skill-fit {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--cv-bg);
}
.skill-fit.fit-3 { background: var(--cv-accent); }
.skill-fit.fit-2 { background: var(--cv-ink); }
.skill-fit.fit-1 { background: var(--cv-gray-2); }
.skill-card .skill-name {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--cv-ink);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.skill-def {
  font-size: 13px;
  line-height: 1.5;
  color: var(--cv-gray-3);
  margin: 0;
}

.skill-meta { display: flex; gap: 12px; font-size: 11px; color: var(--cv-gray-2); }
.skill-pri { font-weight: 600; }
.skill-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--cv-gray-1);
}
.skill-roles-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.role-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--cv-gray-1);
  background: var(--cv-surface);
  color: var(--cv-ink);
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
}
.role-chip:hover {
  background: var(--cv-ink);
  color: var(--cv-bg);
  border-color: var(--cv-ink);
}
/* ---------- DRAWER: project skill-tag editor + evidence chips ---------- */
.drawer-skills-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 20px;
}
.drawer-evidence-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-md);
  background: var(--cv-surface);
}
.drawer-evidence-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.evidence-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.evidence-item {
  padding: 8px 10px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm, 6px);
  background: var(--cv-bg);
}
.evidence-item-hdr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}
.evidence-who {
  font-weight: 700;
}
.evidence-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--cv-gray-1);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.evidence-message {
  margin: 4px 0 0;
  font-size: 12px;
  color: #444;
}
.evidence-item code {
  font-size: 11px;
  word-break: break-all;
}
.evidence-cfe-chip {
  cursor: pointer;
}
.drawer-skills-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.drawer-skills-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.skill-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.skill-chip-btn {
  font-weight: 600;
}
.skill-chip-btn:not(.skill-chip-tagged):not(.skill-chip-suggested):hover {
  background: var(--cv-accent);
  color: var(--cv-bg);
  border-color: var(--cv-accent);
}
/* Tagged / suggested chips are compound (label + ×/+ action button), so the
   hover/background lives on the wrapping <span> instead of a single
   clickable element. */
.skill-chip-tagged, .skill-chip-suggested {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.skill-chip-suggested {
  background: var(--cv-bg);
  border-style: dashed;
}
.skill-chip-label {
  background: none;
  border: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  padding: 2px 8px;
  cursor: pointer;
}
.skill-chip-tagged .skill-chip-label:hover {
  color: var(--cv-accent);
}
.skill-chip-x, .skill-chip-plus {
  background: var(--cv-gray-1);
  border: none;
  border-left: 1px solid var(--cv-gray-1);
  color: var(--cv-ink);
  font-weight: 700;
  font-size: 12px;
  width: 20px;
  height: 100%;
  cursor: pointer;
  line-height: 1;
}
.skill-chip-x:hover { background: #d33; color: var(--cv-bg); }
.skill-chip-plus:hover { background: var(--cv-accent); color: var(--cv-bg); }
.skill-chip-x:disabled, .skill-chip-plus:disabled { opacity: 0.5; cursor: default; }
.skill-tag-picker {
  font: inherit;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--cv-gray-1);
  border-radius: 4px;
  background: var(--cv-bg);
  color: var(--cv-gray-2);
  cursor: pointer;
}
/* ---------- HIGH-FIVES WALL ---------- */
.hf-list { display: flex; flex-direction: column; gap: 12px; }
.hf {
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--cv-gray-1);
  background: var(--cv-bg);
}
.hf.received { border-left: 4px solid var(--cv-accent); }
.hf.sent { border-left: 4px solid var(--cv-ink); background: var(--cv-surface); }
.hf-head { display: flex; gap: 12px; align-items: center; font-size: 11px; text-transform: uppercase;
letter-spacing: 0.5px; color: var(--cv-gray-2); font-weight: 700; }
.hf-date { color: var(--cv-ink); }
.hf-fy { padding: 2px 6px; background: var(--cv-gray-3); color: var(--cv-bg); border-radius: 3px; }
.hf-maxim { color: var(--cv-accent); }
.hf-dir.received { color: var(--cv-accent); }
.hf-dir.sent { color: var(--cv-ink); }
.hf-people { font-size: 14px; margin-top: 8px; }
.hf-title { color: var(--cv-gray-2); font-size: 12px; font-weight: 500; margin-left: 6px; }
.hf-msg { font-size: 14px; line-height: 1.55; margin-top: 8px; color: var(--cv-gray-3); font-style:
italic; }
.hf-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
/* ---------- REVIEWS ---------- */
.rv-list, .cards { }
.rv-goals { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.rv-goal { font-size: 12px; line-height: 1.4; }
.rv-goal b { display: block; color: var(--cv-ink); }
.rv-comps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
/* ---------- REVIEWS BY YEAR (new layout) ---------- */
.reviews-view code {
  background: var(--cv-surface);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 12px;
  color: var(--cv-ink);
}
.reviews-hdr-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.reviews-actions { display: flex; gap: 8px; align-items: center; }
.reviews-upload-btn { cursor: pointer; }
.reviews-ai-block {
  margin: 14px 0 8px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius);
  padding: 10px 14px;
  background: var(--cv-surface);
  color: var(--cv-ink);
}
.reviews-ai-block summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--cv-ink);
  list-style: none;
}
.reviews-ai-block summary::-webkit-details-marker {
  display: none;
}

.learning-view { margin-top: 4px; }
.lr-block { margin-top: 22px; }
.lr-block-personality { margin-top: 32px; padding-top: 8px; border-top: 1px solid var(--cv-gray-1); }
.lr-block-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.lr-h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.lr-card {
  text-align: left;
  background: var(--cv-bg);
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font: inherit;
  color: inherit;
}
.lr-card:hover {
  border-color: var(--cv-gray-2);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.lr-card-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cv-gray-3);
  margin-bottom: 6px;
}
.lr-card-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
}
.lr-card-summary { font-size: 13px; margin-bottom: 8px; }
.lr-card-usecase, .lr-card-detail {
  font-size: 12.5px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lr-edit-panel { max-width: 560px; }
.lr-edit-panel .iv-modal-label { display: block; margin-bottom: 10px; font-size: 12.5px; }
.lr-edit-panel input,
.lr-edit-panel textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm);
}
.fy-list { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.fy-card {
  background: var(--cv-bg);
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius);
  padding: 24px 28px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fy-card:hover { border-color: var(--cv-gray-2); box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.fy-hdr {
  display: flex;
  justify-content: space-between;

  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--cv-ink);
  margin-bottom: 16px;
}
.fy-hdr-left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.fy-badge {
  font-family: "Helvetica Neue", "Inter", sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--cv-ink);
  line-height: 1;
}
.fy-role {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cv-gray-2);
}
.fy-rating {
  display: inline-block;
  background: var(--cv-accent);
  color: var(--cv-bg);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.fy-mgrs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; }
.fy-mgr-name { font-weight: 700; color: var(--cv-ink); }
.fy-mgr-title, .fy-mgr-note { margin-left: 4px; }
.fy-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.fy-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cv-surface);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  border: 1px solid var(--cv-gray-1);
}
.fy-stage { font-weight: 700; color: var(--cv-ink); }
.fy-h4 {
  font-family: "Helvetica Neue", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cv-accent);
  margin: 20px 0 10px;
}
.fy-themes p,
.markdown-inline p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--cv-ink);
  margin: 0 0 12px;
}
.fy-themes p:last-child,
.markdown-inline p:last-child { margin-bottom: 4px; }
.fy-quote-body.markdown-inline p,
.fy-quote-body .markdown-inline p {
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0 0 8px;
}

.fy-feedback { }
.fy-quote {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-left: 3px solid var(--cv-accent);
  background: var(--cv-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.fy-quote:last-child { margin-bottom: 4px; }
.fy-quote-body p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--cv-ink);
  margin: 0 0 8px;
  font-style: italic;
}
.fy-quote-body p:last-child { margin-bottom: 0; }
.fy-quote-attr {
  font-size: 12px;
  margin-top: 8px;
  font-style: normal;
}
.fy-doc-list { display: flex; flex-direction: column; gap: 4px; }
.fy-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: inherit;
  color: var(--cv-ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
  width: 100%;
}
.fy-doc:hover {
  background: var(--cv-surface);
  border-color: var(--cv-accent);
}
.fy-doc:active { transform: translateY(1px); }
.fy-doc-stage {
  font-weight: 700;
  color: var(--cv-accent);
  min-width: 90px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fy-doc-date { font-size: 11px; min-width: 90px; }
.fy-doc-file {
  flex: 1 1 auto;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 11px;
  color: var(--cv-gray-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fy-doc-meta { font-size: 11px; }
/* ---------- EXPORT ---------- */
.export-grid { display: flex; flex-direction: column; gap: 16px; }
.export-role { padding: 16px; border: 1px solid var(--cv-gray-1); border-radius: var(--radius);
background: var(--cv-bg); }
.export-role-hdr { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: 14px;
margin-bottom: 8px; flex-wrap: wrap; }
.export-role-title { color: var(--cv-ink); }
.export-bullets { padding-left: 24px; display: flex; flex-direction: column; gap: 12px; }
.export-bullet-group { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; }
.export-bullet-group.ai {
  border-left: 3px solid var(--cv-accent);
  padding-left: 12px;
  background: var(--cv-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding-top: 10px;
  padding-bottom: 10px;

  padding-right: 12px;
}
.export-bullet-group-hdr {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cv-gray-2);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.export-bullet-group.ai .export-bullet-group-hdr { color: var(--cv-accent); }
.export-bullet { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; }
/* "Related projects" chip row on the Export tab — informational only. Clicking
   a chip opens the project drawer; no export payload is affected. Mirrors the
   .role-chip look from the Skills tab so the two surfaces feel consistent. */
.export-project-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.export-project-chip {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--cv-gray-1);
  border-radius: 4px;
  background: var(--cv-surface);
  color: var(--cv-accent);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
  transition: all 120ms ease;
}
.export-project-chip:hover {
  background: var(--cv-accent);
  color: var(--cv-bg);
  border-color: var(--cv-accent);
}
/* --- new per-bullet row: rank | checkbox | skill button | text --- */
.ai-bullet {
  color: var(--cv-gray-3);
  padding: 6px 4px;
  opacity: 0.6;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
  align-items: flex-start;
  border-radius: var(--radius-sm);
}
.ai-bullet.picked {
  color: var(--cv-ink);
  opacity: 1;
  font-weight: 500;
  background: rgba(250, 84, 0, 0.06);
}
.ai-rank {
  font-weight: 700;
  color: var(--cv-accent);
  min-width: 28px;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 11px;
  padding-top: 4px;
  letter-spacing: 0.3px;
}
.ai-check {
  margin-top: 4px;
  cursor: pointer;
  accent-color: var(--cv-accent);
}
.ai-skill-btn {
  margin-top: 2px;
  border: 1px solid var(--cv-gray-1);
  background: var(--cv-bg);
  color: var(--cv-gray-3);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 120ms ease;
  position: relative;
  flex: 0 0 auto;
}
.ai-skill-btn:hover {
  border-color: var(--cv-accent);
  color: var(--cv-accent);
  background: rgba(250, 84, 0, 0.08);
}
.ai-hist-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--cv-accent, #fa5400);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.ai-bullet-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ai-bullet-text {
  cursor: text;
  padding: 2px 0;
}
.ai-bullet-text:hover { background: color-mix(in srgb, var(--cv-ink) 6%, transparent); }
.ai-bullet-edit {
  width: 100%;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  padding: 6px 8px;
  border: 1px solid var(--cv-accent);
  border-radius: var(--radius-sm);
  resize: vertical;
  background: var(--cv-bg);
  color: var(--cv-ink);
  caret-color: var(--cv-accent);
}
.ai-bullet-edit:focus {
  outline: 2px solid color-mix(in srgb, var(--cv-accent) 45%, transparent);
  outline-offset: 1px;
}
.ai-bullet-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ai-bullet-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.ai-skill-tag {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cv-surface);
  color: var(--cv-gray-3);
  border: 1px solid var(--cv-gray-1);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.btn.tiny { font-size: 11px; padding: 4px 8px; }
/* Per-bullet delete × — appears on row hover so it doesn't clutter the
   default view but stays discoverable. Aligns to the right edge. */
.ai-bullet-x {
  margin-top: 2px;
  border: none;
  background: transparent;
  color: var(--cv-gray-2);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 6px;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease;
  align-self: flex-start;
}
.ai-bullet:hover .ai-bullet-x { opacity: 0.7; }
.ai-bullet-x:hover { opacity: 1 !important; color: var(--cv-accent); }
/* Per-role "+ Add bullet" trigger. Deliberately soft — it's an
   affordance, not a primary CTA. Hover lights it up in Nike orange. */
.ai-bullet-add {
  margin-top: 6px;
  align-self: flex-start;
  border: 1px dashed var(--cv-gray-1);
  background: transparent;
  color: var(--cv-gray-3);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;

  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 120ms ease;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ai-bullet-add:hover {
  border-color: var(--cv-accent);
  color: var(--cv-accent);
  background: rgba(250, 84, 0, 0.06);
  border-style: solid;
}
/* --- bullet skill picker modal --- */
.bullet-skill-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  /* The modal is opened both from the Export tab (where the drawer is
     closed) AND from inside the role drawer's bullet editor — so it
     needs to layer ABOVE the drawer (`.drawer { z-index: 200; }`). */
  z-index: 250;
  padding: 20px;
}
.bullet-skill-modal {
  background: var(--cv-bg);
  border-radius: var(--radius);
  padding: 20px 22px;
  width: min(720px, 100%);
  max-height: min(90vh, 800px);
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.bullet-skill-modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.bullet-skill-modal-hdr h3 {
  margin: 0;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bullet-skill-preview {
  padding: 10px 12px;
  background: var(--cv-surface);
  border-left: 3px solid var(--cv-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12.5px;
  font-style: italic;
  color: var(--cv-gray-3);
  margin: 10px 0 16px;
  line-height: 1.5;
}
.bullet-skill-link-row {
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bullet-skill-project-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cv-gray-3);
}
.bullet-skill-project-field select,
.bullet-skill-project-field input {
  font: inherit;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cv-ink);
  border: 1px solid var(--cv-gray-1);
  border-radius: 6px;
  padding: 7px 10px;
  background: var(--cv-bg);
}
.bullet-skill-combo {
  position: relative;
}
.bullet-skill-combo input {
  width: 100%;
  padding-right: 36px;
}
.bullet-skill-combo-toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 34px;
  border: none;
  border-left: 1px solid var(--cv-gray-1);
  border-radius: 0 6px 6px 0;
  background: var(--cv-bg);
  color: var(--cv-gray-3);
  font-size: 14px;
  cursor: pointer;
}
.bullet-skill-combo-toggle:hover {
  color: var(--cv-ink);
}
.bullet-project-match-list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--cv-gray-1);
  border-radius: 6px;
  padding: 6px;
  background: var(--cv-bg);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
.bullet-project-match-item {
  border: 1px solid var(--cv-gray-1);
  background: var(--cv-surface);
  border-radius: 6px;
  padding: 6px 8px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}
.bullet-project-match-item:hover,
.bullet-project-match-item.active {
  border-color: var(--cv-accent);
}
.bullet-project-match-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cv-ink);
}
.bullet-project-match-meta {
  font-size: 11px;
}
.bullet-skill-link-hint {
  font-size: 12px;
  margin: 0;
}
.bullet-skill-link-status {
  font-size: 12px;
  margin: 0;
}
.bullet-skill-catalog { display: flex; flex-direction: column; gap: 14px; }
.bullet-skill-cat-hdr {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--cv-gray-3);
  margin-bottom: 6px;
}
.bullet-skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bullet-skill-modal-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--cv-gray-1);
}

.bullet-skill-modal-actions .muted { margin-right: auto; font-size: 12px; }

.bullet-skill-history {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--cv-gray-1);
}
.bullet-skill-history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cv-ink, #111);
  cursor: pointer;
}
.bullet-skill-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  max-height: 220px;
  overflow-y: auto;
}
.bullet-skill-history-item {
  padding: 8px 10px;
  background: var(--cv-gray-5, #f5f5f5);
  border-radius: 6px;
}
.bullet-skill-history-meta {
  font-size: 11px;
  margin-bottom: 4px;
}
.bullet-skill-history-text {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.45;
}

[x-cloak] { display: none !important; }
.ai-count { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.ai-count select {
  font: inherit;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm);
  background: var(--cv-bg);
  color: var(--cv-ink);
  cursor: pointer;
}
.ai-count select:disabled { background: var(--cv-gray-1); cursor: not-allowed; opacity: 0.6; }
.export-actions { display: flex; gap: 12px; align-items: center; margin-top: 24px; padding-top: 16px;
border-top: 1px solid var(--cv-gray-1); }
/* Export tab — section blocks (Summary / Roles / Skills) */
.export-block {
  margin: 20px 0 4px;
  padding: 20px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius);
  background: var(--cv-bg);
}
.export-block > h3 {
  margin: 0 0 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cv-ink);
}
.export-block-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.export-block-hdr h3 {
  margin: 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cv-ink);
}
/* Reset the inner .export-grid so it doesn't double-pad now that it sits
   inside .export-block */
.export-block .export-grid { gap: 16px; }
/* Summary preview textarea */
.summary-preview {
  width: 100%;
  min-height: 96px;
  padding: 12px 14px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm);
  background: var(--cv-surface);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cv-ink);
  resize: vertical;
  transition: border-color 120ms ease, background 120ms ease;
}
.summary-preview:focus {
  outline: none;
  border-color: var(--cv-accent);
  background: var(--cv-bg);
}
/* Export-tab skill chip list */
.export-skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.export-skill-chip {
  display: inline-flex;
  align-items: center;

  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--cv-gray-1);
  border-radius: 999px;
  background: var(--cv-bg);
  cursor: pointer;
  font-size: 12.5px;
  transition: all 120ms ease;
  user-select: none;
}
.export-skill-chip input[type="checkbox"] { display: none; }
.export-skill-chip:hover { border-color: var(--cv-ink); }
.export-skill-chip.selected {
  background: var(--cv-ink);
  border-color: var(--cv-ink);
  color: var(--cv-bg);
}
.export-skill-chip.selected .muted,
.export-skill-chip.selected .export-skill-cat { color: rgba(255,255,255,0.65); }
.export-skill-name { font-weight: 600; }
.export-skill-cat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.export-skill-fit {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--cv-bg);
}
.export-skill-fit.fit-3 { background: var(--cv-accent); }
.export-skill-fit.fit-2 { background: var(--cv-gray-3); }
.export-skill-fit.fit-1 { background: var(--cv-gray-2); }
.export-skill-chip.selected .export-skill-fit.fit-3 { background: var(--cv-accent); }
/* ---------- DRAWER ---------- */
.drawer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
  display: flex;
  justify-content: flex-end;
}
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-panel {
  width: min(900px, 90vw);
  background: var(--cv-bg);
  overflow-y: auto;
  padding: 32px 40px;
  transform: translateX(20px);
  transition: transform 200ms ease;
  position: relative;
}
.drawer-close {
  position: absolute;
  top: 20px; right: 20px;
  background: transparent;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--cv-gray-2);
}
.drawer-close:hover { color: var(--cv-ink); }
.drawer-kind {
  font-size: 11px;
  font-weight: 700;
  color: var(--cv-accent);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.drawer-title {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1px;
  margin: 4px 0 4px;
  line-height: 1.1;
}
.drawer-title-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 4px;
}
.drawer-title-row .drawer-title {
  margin: 0;
}
.drawer-title-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.drawer-title-input {
  width: 100%;
  font-family: var(--cv-font);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  padding: 6px 8px;
  border: 1px solid var(--cv-gray-1);
  border-radius: 4px;
  color: var(--cv-ink);
}
.drawer-title-input:focus {
  border-color: var(--cv-ink);
  outline: none;
}
.drawer-delete-btn {
  color: #a33;
}
.drawer-delete-btn:hover {
  color: #c00;
}
.drawer-meta { font-size: 13px; color: var(--cv-gray-2); font-weight: 600; margin-bottom: 20px; }

/* ---------- DRAWER SECTIONS (Summary / STAR cards) ---------- */
.drawer-sections {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
}
.drawer-section {
  background: var(--cv-surface);
  border-left: 3px solid var(--cv-accent);
  border-radius: 0 6px 6px 0;
  padding: 16px 18px 14px;
}
.drawer-section-star {
  border-left-color: var(--cv-accent);
  background: color-mix(in srgb, var(--cv-surface) 88%, var(--cv-accent) 12%);
}
.drawer-section-hdr {
  margin-bottom: 10px;
}
.drawer-section-kicker {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--cv-accent);
  margin-bottom: 2px;
}
.drawer-section-star .drawer-section-kicker {
  color: var(--cv-accent);
}
.drawer-star-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.drawer-star-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.star-part {
  background: var(--cv-bg);
  border: 1px solid var(--cv-gray-1);
  border-radius: 6px;
  padding: 10px 12px;
}
.star-part-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.star-part-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--cv-gray-2);
}
.star-part-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cv-ink);
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}
.star-part-textarea {
  min-height: 88px;
}
.drawer-section-star .drawer-computed-hint {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 11.5px;
}
.drawer-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cv-ink);
}
.drawer-section-body {
  margin: 0;
}
.drawer-section-body.markdown > h1,
.drawer-section-body.markdown > h2 {
  display: none; /* card header replaces top-level section titles */
}

/* ---------- REVIEW DRAWER ---------- */
.review-drawer-sections {
  margin-bottom: 8px;
}
.review-meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 0;
  margin: 0;
}
.review-meta-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 14px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid var(--cv-gray-1);
}
.review-meta-row:last-child { border-bottom: none; }
.review-meta-row dt {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--cv-gray-2);
}
.review-meta-row dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--cv-ink);
  line-height: 1.35;
}
.review-bullet-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.review-bullet-list li {
  font-size: 14px;
  line-height: 1.45;
  color: var(--cv-ink);
}
.review-quotes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.drawer-section-feedback {
  border-left-color: var(--cv-ink);
}
.drawer-section-notice {
  border-left-color: var(--cv-gray-2);
  background: color-mix(in srgb, var(--cv-surface) 70%, var(--cv-gray-1) 30%);
}
.drawer-section-notice .drawer-section-body {
  font-size: 13px;
  color: var(--cv-gray-2);
}
.review-fallback {
  font-size: 14px;
  line-height: 1.5;
}

.drawer-star-body.markdown h3 {
  margin-top: 14px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--cv-accent);
  border: none;
  padding: 0;
}
.drawer-star-body.markdown h3:first-child {
  margin-top: 0;
}
.drawer-star-body.markdown p {
  margin: 0 0 8px;
}

.drawer-body { margin-top: 16px; }
.drawer-source-details {
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm);
  background: var(--cv-surface);
}
.drawer-source-details summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cv-gray-3);
}
.drawer-source-details[open] {
  background: var(--cv-bg);
}
.drawer-source-details .drawer-body {
  margin-top: 10px;
}
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { font-weight: 800; line-height: 1.2; margin-top:
24px; margin-bottom: 12px; }
.markdown h1 { font-size: 24px; }
.markdown h2 { font-size: 20px; border-bottom: 1px solid var(--cv-gray-1); padding-bottom: 4px; }
.markdown h3 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--cv-gray-3); }
.markdown h4 { font-size: 14px; }
.markdown ul { padding-left: 20px; }
.markdown li { font-size: 14px; line-height: 1.6; margin-bottom: 4px; }
.markdown p { font-size: 14px; line-height: 1.6; }
.markdown blockquote {
  border-left: 3px solid var(--cv-accent);
  margin: 12px 0;
  padding: 4px 16px;
  background: var(--cv-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.markdown blockquote p { font-size: 13px; font-style: italic; color: var(--cv-gray-3); margin: 4px 0; }
.markdown code { padding: 2px 6px; background: var(--cv-surface); border-radius: 3px; }
.markdown pre { padding: 12px; background: var(--cv-surface); border-radius: var(--radius); overflow-x: auto;
}
.markdown a { color: var(--cv-accent); }
.drawer textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  resize: vertical;
  margin-top: 8px;
}
.drawer-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
/* ---------- COMPUTED SECTIONS (drawer) ---------- */
/* Blocks the SPA injects below the markdown body — e.g. "Cover letter
   punch lines" and "Resume bullet drafts". Visually treated as first-class
   drawer sections so they don't feel bolted on, but with a subtle orange
   accent so users know these are sourced from somewhere else (frontmatter
   / ai_bullets.yaml) rather than the free-form body. */
.drawer-computed {
  margin-top: 24px;
  padding: 14px 16px 12px;
  background: var(--cv-surface);
  border-radius: var(--radius);
  border-left: 3px solid var(--cv-accent);
}
.drawer-computed h3 {
  margin: 0 0 10px;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.drawer-computed-sub {
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: 6px;
}
.drawer-computed-hint {
  font-size: 11.5px;
  margin: 8px 0 0;
}
.drawer-punchlines {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drawer-punchlines li {
  padding: 10px 12px;
  background: var(--cv-bg);
  border-left: 2px solid var(--cv-ink);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.55;
}
/* When a punch line is an editable item (project drawer only), remove the

   default `<li>` block styles so read/edit modes can define their own layout. */
.punchline-item {
  padding: 0 !important;
  background: transparent !important;
  border-left: none !important;
}
.punchline-read,
.punchline-edit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--cv-bg);
  border-left: 2px solid var(--cv-ink);
  border-radius: var(--radius-sm);
}
.punchline-edit {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  border-left-color: var(--cv-accent);
}
.punchline-text {
  flex: 1;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  min-width: 0;
}
.punchline-textarea {
  width: 100%;
  font-family: var(--cv-font);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 8px 10px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm);
  resize: vertical;
  background: var(--cv-bg);
  color: var(--cv-ink);
}
.punchline-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.punchline-hint {
  font-size: 11.5px;
  margin-left: 4px;
}
.punchline-del {
  color: var(--cv-gray-3);
}
.punchline-del:hover {
  color: var(--cv-accent);
}
/* Header row for the punchbox — title on the left, Add button on the right. */
.drawer-computed-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.drawer-computed-hdr h3 {
  margin: 0;
}
/* Compact Nike-flavored button used inside the drawer (Save/Cancel/Edit/Add).
   Reuses the existing .btn contract but tightens padding/font. */
.btn.btn-xs {
  padding: 4px 10px;
  font-size: 11.5px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.drawer-role-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;

}
.drawer-role-bullets li {
  padding: 8px 10px;
  background: var(--cv-bg);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
}
.drawer-bullet-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.tag.tag-sm {
  font-size: 10.5px;
  padding: 1px 6px;
}
/* ---------- Drawer bullet editor (mirrors the Export tab bullet UI) ----------
   The `.drawer-bullet-editor` section holds an in-place clone of the Export
   tab's `.ai-bullet` rows so the user can edit / reorder-relevance /
   add / delete bullets straight from the role drawer. The `.ai-*` classes
   are shared with the Export tab (single source of styling); this block only
   fine-tunes spacing / row background so the rows read cleanly against the
   drawer's off-white `.drawer-computed` surface. */
.drawer-bullet-editor .drawer-bullet-group {
  padding: 4px 0 0;
  gap: 4px;
}
.drawer-bullet-editor .ai-bullet {
  background: var(--cv-bg);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.drawer-bullet-editor .ai-bullet.picked {
  border-color: var(--cv-accent);
}
/* Nudge the "+ Add bullet" affordance so it sits comfortably below the
   last row rather than jammed against it. */
.drawer-bullet-editor .ai-bullet-add {
  margin-top: 8px;
}
/* Hint under the editor — same look as the punchline hint below Summary. */
.drawer-bullet-editor .drawer-computed-hint {
  margin-top: 10px;
  font-size: 11.5px;
}
/* ---------- NOTES LIST (drawer) ---------- */
.notes-block { margin-top: 20px; }
.notes-block h3 { margin: 0 0 8px; }
.notes-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.note-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--cv-surface);
  border-radius: var(--radius);
  border-left: 3px solid var(--cv-accent);
}
.note-body { flex: 1; min-width: 0; }
.note-stamp {
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--cv-gray-2);
  margin-bottom: 3px;
}
.note-text {
  font-size: 13.5px;
  line-height: 1.5;

  color: var(--cv-ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.note-del {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--cv-gray-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.note-del:hover {
  background: var(--cv-accent);
  color: #fff;
}
/* ---------- INTERVIEW TAB ---------- */
.iv-view { padding-bottom: 40px; }
.iv-intro { margin-bottom: 16px; }
.iv-intro code {
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 12px;
  background: var(--cv-surface);
  padding: 1px 6px;
  border-radius: 3px;
}
/* Section 1 — storyboard layout: sticky tray on the left, category lanes on
   the right. Using CSS grid so the tray stays fixed while lanes flow. */
.iv-storyboard {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  min-height: 400px;
}
/* Project tray */
.iv-tray {
  position: sticky;
  top: 84px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: var(--cv-bg);
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius);
  padding: 12px;
}
.iv-tray-hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cv-gray-1);
  margin-bottom: 8px;
}
.iv-tray-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.iv-project-tile {
  cursor: grab;
  border-radius: var(--radius-sm);
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.iv-project-tile:active { cursor: grabbing; }
.iv-project-tile:hover {

  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transform: translateX(2px);
}
.iv-project-open {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--cv-gray-1);
  border-left: 3px solid var(--cv-accent);
  background: var(--cv-bg);
  border-radius: var(--radius-sm);
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  font: inherit;
}
.iv-project-open:hover { background: var(--cv-surface); }
.iv-project-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cv-ink);
  line-height: 1.3;
}
.iv-project-role { font-size: 10.5px; }
/* Category swim lanes */
.iv-lanes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.iv-lane {
  border: 2px dashed var(--cv-gray-1);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--cv-bg);
  transition: all 120ms ease;
  min-height: 140px;
}
.iv-lane.drag-hover {
  border-color: var(--cv-accent);
  border-style: solid;
  background: rgba(250, 84, 0, 0.05);
}
.iv-lane-hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.iv-lane-title-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  min-width: 0;
}
.iv-lane-title-btn:hover h4 {
  color: var(--cv-accent);
}
.iv-lane-title-btn:hover .iv-lane-coach-hint {
  color: var(--cv-accent);
}
.iv-lane-coach-hint {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.iv-lane-hdr h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cv-ink);
}
.iv-lane-count { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.iv-lane-desc { font-size: 11.5px; margin: 4px 0 10px; }
.iv-lane-pins {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
}
.iv-lane-empty {
  font-size: 11px;
  font-style: italic;
  padding: 6px 0;
}
.iv-pin-chip {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--cv-ink);
  border-radius: 4px;
  overflow: hidden;
  font-size: 11.5px;
  background: var(--cv-surface);
}
.iv-pin-label {

  padding: 3px 8px;
  border: none;
  background: transparent;
  color: var(--cv-ink);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.iv-touch-ghost {
  position: fixed;
  z-index: 420;
  pointer-events: none;
  max-width: min(72vw, 320px);
  background: rgba(15, 23, 35, 0.95);
  color: var(--cv-bg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 3px solid var(--cv-accent);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28);
}
.iv-touch-ghost-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}
.iv-touch-ghost-role {
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.25;
}
.iv-pin-label:hover { color: var(--cv-accent); }
.iv-pin-x {
  padding: 0 6px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--cv-gray-1);
  color: var(--cv-gray-3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.iv-pin-x:hover { background: var(--cv-accent); color: #fff; }
/* Section 2 — answer bank */
.iv-bank { display: flex; flex-direction: column; gap: 10px; }
.iv-bank-cat {
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius);
  background: var(--cv-bg);
  overflow: hidden;
}
.iv-bank-cat-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease;
}
.iv-bank-cat-hdr:hover { background: var(--cv-surface); }
.iv-caret {
  display: inline-block;
  font-size: 12px;
  color: var(--cv-accent);
  transition: transform 120ms ease;
}
.iv-caret.open { transform: rotate(90deg); }
.iv-bank-cat-hdr h3 {
  margin: 0;
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.iv-bank-cat-meta { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.iv-bank-questions {
  padding: 4px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.iv-question {
  padding: 14px 16px;
  border: 1px solid var(--cv-gray-1);
  border-left: 3px solid var(--cv-ink);
  border-radius: var(--radius-sm);
  background: var(--cv-surface);
}
.iv-question-prompt {
  font-size: 14px;
  font-weight: 600;
  color: var(--cv-ink);
  line-height: 1.4;
  margin-bottom: 8px;
}
.iv-question-pins {
  display: flex;

  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.iv-pins-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.iv-question-pin {
  font-size: 11.5px;
  padding: 2px 8px;
  background: var(--cv-bg);
  border: 1px dashed var(--cv-accent);
  color: var(--cv-accent);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}
.iv-question-pin:hover { background: var(--cv-accent); color: #fff; }
/* STAR answer cards */
.iv-answers { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.iv-answer {
  padding: 12px 14px;
  background: var(--cv-bg);
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm);
}
.iv-answer-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--cv-gray-1);
}
.iv-answer-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--cv-ink);
  flex: 1;
}
.iv-answer-role { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.iv-answer-x {
  padding: 0 6px;
  background: transparent;
  border: 1px solid var(--cv-gray-1);
  color: var(--cv-gray-3);
  font-size: 14px;
  cursor: pointer;
  border-radius: 3px;
}
.iv-answer-x:hover { background: var(--cv-accent); color: #fff; border-color: var(--cv-accent); }
.iv-answer-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  line-height: 1.55;
}
.iv-answer-body b {
  display: inline-block;
  width: 16px;
  color: var(--cv-accent);
  font-weight: 700;
}
.iv-add-answer {
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 12px;
}
/* ---------- STAR MODAL ---------- */
.iv-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 300;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.iv-modal-panel {
  background: var(--cv-bg);
  border-radius: var(--radius);
  padding: 32px 36px;
  width: min(760px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.iv-coach-panel {
  width: min(880px, 100%);
}
.iv-coach-sub {
  margin: 4px 0 0;
  font-size: 13px;
}
.iv-coach-modules {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.iv-coach-module {
  border-top: 1px solid var(--cv-gray-1);
  padding-top: 14px;
}
.iv-coach-mod-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.iv-coach-mod-num {
  color: var(--cv-accent);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.iv-coach-mod-summary {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--cv-gray-3);
}
.iv-coach-outcomes {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--cv-gray-3);
}
.iv-coach-concepts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.iv-coach-concept {
  background: var(--cv-surface);
  border-left: 3px solid var(--cv-accent);
  padding: 12px 14px;
}
.iv-coach-concept-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.iv-coach-points {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 12.5px;
}
.iv-coach-para {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--cv-ink);
}
.iv-coach-xrefs-hdr {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cv-gray-3);
  margin-bottom: 4px;
}
.iv-coach-xref-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.iv-coach-xref-btn {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cv-ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.iv-coach-xref-btn:hover { color: var(--cv-accent); }
.iv-coach-noxref {
  margin: 0;
  font-size: 12px;
  font-style: italic;
}
.iv-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  color: var(--cv-gray-3);
  cursor: pointer;
  border-radius: 4px;
}
.iv-modal-close:hover { background: var(--cv-surface); color: var(--cv-ink); }
.iv-modal-hdr { margin-right: 40px; }
.iv-modal-hdr .eyebrow { color: var(--cv-accent); }
.iv-modal-title {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--cv-ink);
}
.iv-star-guide {
  padding: 12px 14px;
  border-left: 3px solid var(--cv-accent);
  background: var(--cv-surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12.5px;
  line-height: 1.55;
}
.iv-star-guide-hdr {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cv-accent);
  margin-bottom: 4px;
}
.iv-star-guide ul { margin: 0; padding-left: 18px; }
.iv-star-guide li { margin-bottom: 4px; }
.iv-star-guide i { color: var(--cv-gray-3); font-style: normal; font-size: 11.5px; }
.iv-modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.iv-modal-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cv-gray-3);
}
.iv-modal-label input,
.iv-modal-label select,
.iv-modal-label textarea {
  padding: 8px 10px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm);

  font: inherit;
  font-size: 13px;
  color: var(--cv-ink);
  background: var(--cv-bg);
  font-weight: 400;
  resize: vertical;
}
.iv-modal-label input:focus,
.iv-modal-label select:focus,
.iv-modal-label textarea:focus {
  outline: none;
  border-color: var(--cv-accent);
}
.info-modal {
  z-index: 420;
}
.info-modal-panel {
  width: min(560px, 100%);
}
.info-modal-body {
  margin-top: 4px;
}
.info-disclaimer-list {
  margin: 0;
  padding: 0 0 0 1.15em;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cv-gray-3);
}
.info-disclaimer-list li::marker {
  color: var(--cv-accent);
}
.info-disclaimer-list strong {
  color: var(--cv-ink);
  font-weight: 700;
}
.info-disclaimer-list a {
  color: var(--cv-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.info-disclaimer-list a:hover {
  opacity: 0.85;
}
.iv-modal-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--cv-gray-1);
  margin-top: 4px;
}
/* ---------- RESPONSIVE ---------- */
/* Medium screens — the FY chart drops below the 2x2 tiles so both have
   full horizontal breathing room. Hero title continues to scale via
   clamp() automatically. */
@media (max-width: 1100px) {
  .highlights-row { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  .main { max-width: 100%; overflow-x: hidden; }
  .stat-grid { grid-template-columns: 1fr; }
  .stat-num { font-size: 40px; }
  .iv-storyboard { grid-template-columns: 1fr; }
  .iv-tray { position: static; max-height: 320px; }
  .iv-modal-row { grid-template-columns: 1fr; }
  /* Nav drops inter-section borders on narrow screens so wrapped clusters
     don't leave stranded dividers hanging. */
  .nav-section + .nav-section,
  .tab-group + .tab-group { border-left: none; margin-left: 0; padding-left: 0; }
  /* Timeline years: switch to vertical when spacing gets tighter. */
  .tl-scale {
    justify-content: space-between;
    gap: 0;
    overflow: visible;
    white-space: normal;
    padding-top: 8px;
  }
  .tl-year {
    flex: 1 1 0;
    text-align: center;
    transform: rotate(180deg);
    transform-origin: center;
    writing-mode: vertical-rl;
    font-size: 10px;
    min-width: 0;
    letter-spacing: 0.02em;
  }
  /* Mobile safety rail: filters must not widen page canvas. */
  .filters,
  .tk-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .filters select,
  .filters input[type=text],
  .filter-search,
  .skills-filters .filter-search,
  .skills-result-count,
  .tk-search,
  .tk-filters select,
  .tk-clear-filters {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
  }
  .tk-search,
  .tk-tiles-filter-banner-text { min-width: 0; }
}
@media (max-width: 600px) {
  .dash-hero { padding: 32px 24px; }
  .hero-summary { font-size: 13px; }
  .main { padding: 20px 16px 60px; }
  .tl-row { grid-template-columns: 154px 1fr; gap: 8px; }
  .tl-label { font-size: 11.5px; }
  .tl-scale {
    padding-left: 162px;
  }
  .tl-year:nth-child(even) { visibility: hidden; }
}
@media (max-width: 460px) {
  .tl-row { grid-template-columns: 128px 1fr; }
  .tl-scale { padding-left: 136px; }
  .tl-year { visibility: hidden; }
  .tl-year:nth-child(3n + 1) { visibility: visible; }
}
@media (max-width: 780px) {
  /* Mobile drawers (role/project popups): use full viewport width. */
  .drawer {
    justify-content: stretch;
  }
  .drawer-panel {
    width: 100vw;
    max-width: 100vw;
    min-height: 100dvh;
    padding: 20px 16px 24px;
    transform: translateX(0);
  }
  .drawer-close {
    top: 12px;
    right: 12px;
  }

  /* Drawer bullet rows: controls in a compact top row, text below. */
  .drawer-bullet-editor .ai-bullet {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    grid-template-areas:
      "rank check skill . del"
      "body body body body body";
    row-gap: 8px;
    column-gap: 8px;
    align-items: center;
    padding: 8px 8px 10px;
  }
  .drawer-bullet-editor .ai-rank {
    grid-area: rank;
    padding-top: 0;
    min-width: 0;
  }
  .drawer-bullet-editor .ai-check {
    grid-area: check;
    margin-top: 0;
  }
  .drawer-bullet-editor .ai-skill-btn {
    grid-area: skill;
    margin-top: 0;
  }
  .drawer-bullet-editor .ai-bullet-x {
    grid-area: del;
    margin-top: 0;
    justify-self: end;
    opacity: 0.7;
  }
  .drawer-bullet-editor .ai-bullet-body {
    grid-area: body;
    width: 100%;
  }
  .drawer-bullet-editor .ai-bullet-edit {
    min-height: 86px;
  }
  /* Project drawer punch lines: action buttons on their own rows. */
  .drawer-punchbox .punchline-read {
    flex-direction: column;
    align-items: stretch;
  }
  .drawer-punchbox .punchline-actions {
    width: 100%;
    margin-top: 4px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: stretch;
  }
  .drawer-punchbox .punchline-actions .btn {
    width: 100%;
  }
  .drawer-punchbox .punchline-actions .punchline-hint {
    margin-left: 0;
  }

  /* Export bullets: same mobile stacking as drawer editor. */
  .export-view .export-bullet-group.ai .ai-bullet {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    grid-template-areas:
      "rank check skill . del"
      "body body body body body";
    row-gap: 8px;
    column-gap: 8px;
    align-items: center;
    padding: 8px 8px 10px;
  }
  .export-view .export-bullet-group.ai .ai-rank {
    grid-area: rank;
    padding-top: 0;
    min-width: 0;
  }
  .export-view .export-bullet-group.ai .ai-check {
    grid-area: check;
    margin-top: 0;
  }
  .export-view .export-bullet-group.ai .ai-skill-btn {
    grid-area: skill;
    margin-top: 0;
  }
  .export-view .export-bullet-group.ai .ai-bullet-x {
    grid-area: del;
    margin-top: 0;
    justify-self: end;
    opacity: 0.7;
  }
  .export-view .export-bullet-group.ai .ai-bullet-body {
    grid-area: body;
    width: 100%;
  }
  .export-view .export-bullet-group.ai .ai-bullet-edit {
    min-height: 86px;
  }

  /* Track detail + baseline (and other non-wide) modals: full-screen on mobile. */
  .tk-modal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .tk-modal-panel {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
    padding: 20px 16px 24px;
    box-shadow: none;
  }
  .tk-modal-close {
    top: 12px;
    right: 12px;
  }
  .tk-modal-hdr {
    margin-right: 36px;
  }
  .tk-modal-title {
    font-size: 1.25rem;
    line-height: 1.2;
  }
  .tk-modal-actions.tk-modal-actions-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: stretch;
  }
  .tk-modal-actions.tk-modal-actions-detail .btn {
    width: 100%;
  }
  .tk-modal-actions.tk-modal-actions-detail .btn.danger {
    grid-column: 1 / -1;
  }
  .tk-modal-actions.tk-modal-actions-detail .tk-modal-actions-spacer {
    display: none;
  }
  .tk-modal-actions.tk-modal-actions-detail .muted {
    grid-column: 1 / -1;
    font-size: 12px;
  }

  /* Snippet-card action row: inject on top, retire/delete below. */
  .tk-modal-snippets .tk-snip-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .tk-modal-snippets .tk-snip-inject-label {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .tk-modal-snippets .tk-snip-inject-label select {
    width: 100%;
  }
  .tk-modal-snippets .tk-snip-actions .tk-btn.tk-btn-mini {
    width: 100%;
    text-align: center;
  }

  /* Track cover-letter + resume builder: full-screen like role drawer. */
  .tk-modal.tk-modal-wide {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .tk-modal-wide .tk-modal-panel-wide,
  .tk-punch-panel.tk-modal-panel,
  .tk-resume-builder-panel.tk-modal-panel {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
    padding: 20px 16px 24px;
    box-shadow: none;
  }
  .tk-punch-panel.tk-modal-panel,
  .tk-resume-builder-panel {
    overflow: hidden;
  }
  .tk-modal-wide .tk-modal-close {
    top: 12px;
    right: 12px;
  }
  .tk-modal-wide .tk-modal-hdr {
    margin-right: 36px;
  }
  .tk-modal-wide .tk-modal-title {
    font-size: 1.25rem;
    line-height: 1.2;
  }
  /* Free vertical room: drop long blurbs + redundant angle/status chrome. */
  .tk-punch-panel > .tk-modal-hdr .tk-punch-blurb,
  .tk-resume-builder-panel > .tk-modal-hdr .tk-punch-blurb,
  .tk-punch-panel > .tk-modal-hdr .tk-modal-angle,
  .tk-resume-builder-panel > .tk-modal-hdr .tk-modal-angle,
  .tk-resume-builder-panel .tk-punch-toolbar {
    display: none !important;
  }
  .tk-punch-panel .tk-punch-table-wrap {
    max-height: none;
    flex: 1 1 auto;
    min-height: 180px;
  }
  .tk-punch-table {
    font-size: 12px;
    width: 100%;
    table-layout: fixed;
  }
  /* Drop Breakdown + Date on mobile so Project & punchline can use the width. */
  .tk-punch-col-parts,
  .tk-punch-col-date {
    display: none !important;
  }
  .tk-punch-col-project {
    width: auto;
  }
  .tk-punch-panel > .tk-punch-actions,
  .tk-resume-builder-panel > .tk-resume-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-items: stretch;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--cv-gray-1, #ddd);
  }
  .tk-punch-panel > .tk-punch-actions .btn,
  .tk-resume-builder-panel > .tk-resume-actions .btn {
    width: 100%;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.2;
    min-height: 36px;
  }
  .tk-punch-panel > .tk-punch-actions .tk-modal-actions-spacer,
  .tk-resume-builder-panel > .tk-resume-actions .tk-modal-actions-spacer {
    display: none;
  }
  .tk-punch-panel > .tk-punch-actions > .muted {
    grid-column: 1 / -1;
    font-size: 11px;
    order: -1;
  }
  /* Resume builder bullets: reclaim the indented gutter for full-width text. */
  .tk-resume-builder-panel .export-role {
    padding: 10px 8px;
  }
  .tk-resume-builder-panel .export-bullets {
    padding-left: 0;
    gap: 8px;
  }
  .tk-resume-builder-panel .export-bullet-group.ai {
    width: 100%;
    max-width: 100%;
  }
  /* Resume builder / Export role bullets: stack controls like drawer. */
  .tk-resume-builder-panel .export-bullet-group.ai .ai-bullet,
  .export-view .export-role .export-bullet-group.ai .ai-bullet {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    grid-template-areas:
      "rank check skill . del"
      "body body body body body";
    row-gap: 8px;
    column-gap: 8px;
    align-items: center;
    padding: 8px 8px 10px;
  }
  .tk-resume-builder-panel .export-bullet-group.ai .ai-rank,
  .export-view .export-role .export-bullet-group.ai .ai-rank {
    grid-area: rank;
    padding-top: 0;
    min-width: 0;
  }
  .tk-resume-builder-panel .export-bullet-group.ai .ai-check,
  .export-view .export-role .export-bullet-group.ai .ai-check {
    grid-area: check;
    margin-top: 0;
  }
  .tk-resume-builder-panel .export-bullet-group.ai .ai-skill-btn,
  .export-view .export-role .export-bullet-group.ai .ai-skill-btn {
    grid-area: skill;
    margin-top: 0;
  }
  .tk-resume-builder-panel .export-bullet-group.ai .ai-bullet-x,
  .export-view .export-role .export-bullet-group.ai .ai-bullet-x {
    grid-area: del;
    margin-top: 0;
    justify-self: end;
    opacity: 0.7;
  }
  .tk-resume-builder-panel .export-bullet-group.ai .ai-bullet-body,
  .export-view .export-role .export-bullet-group.ai .ai-bullet-body {
    grid-area: body;
    width: 100%;
  }
  .tk-resume-builder-panel .export-bullet-group.ai .ai-bullet-edit,
  .export-view .export-role .export-bullet-group.ai .ai-bullet-edit {
    min-height: 86px;
  }
  .export-view .export-role {
    padding: 12px;
  }
  .export-view .export-role-hdr {
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .tk-resume-builder-content .export-block {
    margin-bottom: 14px;
  }
  .tk-resume-summary-hdr {
    gap: 6px;
  }
  .tk-resume-builder-panel .summary-preview {
    min-height: 120px;
    font-size: 13px;
  }
  .tk-cover-ai-summary-hint {
    display: none;
  }
}
/* ========================================================================
   TRACK TAB
   ========================================================================
   Layout: an upload panel, then a filterable list of application cards.
   Each card is anchored on its status pill (colored by outcome tier —
   waiting / active / win / closed) and gets a subtle orange border when
   flagged as stale (no response 14+ days). Same Nike palette as everywhere
   else — no new colors introduced. Modal uses the same shell as the STAR
   modal but with a full-width form grid. */
.track-view { display: block; }
.tk-upload {
  background: var(--cv-bg);
  border: 1px solid var(--cv-gray-1);
  padding: 18px;
  margin: 14px 0 24px;
}
.tk-upload-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.tk-upload-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--cv-gray-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.tk-upload-label input[type="file"],
.tk-upload-label input[type="url"] {
  padding: 8px 10px;
  border: 1px solid var(--cv-gray-1);
  font-family: var(--cv-font);
  font-size: 13px;
  color: var(--cv-ink);
  background: var(--cv-bg);
  border-radius: var(--radius-sm);
}
.tk-upload-label input[type="url"]:focus {
  border-color: var(--cv-ink);
  outline: none;
}
.tk-jd-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--cv-gray-1);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--cv-ink);
  background: var(--cv-surface);
  resize: vertical;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
}
.tk-jd-input:focus { border-color: var(--cv-ink); outline: none; background: var(--cv-bg); }
.tk-upload-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.tk-upload-status { font-size: 12.5px; }
.tk-btn {
  padding: 10px 18px;
  border: 1px solid transparent;
  font-family: var(--cv-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background 120ms, color 120ms, border-color 120ms;
  border-radius: var(--radius-pill);
}
.tk-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tk-btn-primary {
  background: var(--cv-ink);
  color: var(--cv-bg);
}
.tk-btn-primary:hover:not(:disabled) { background: var(--cv-accent); }
.tk-btn-secondary {
  background: var(--cv-bg);
  color: var(--cv-ink);
  border-color: var(--cv-ink);
}
.tk-btn-secondary:hover:not(:disabled) {
  background: var(--cv-ink);
  color: var(--cv-bg);
}
.tk-btn-ghost {
  background: transparent;
  color: var(--cv-gray-3);
  border-color: var(--cv-gray-1);
}
.tk-btn-ghost:hover:not(:disabled) {
  color: var(--cv-ink);
  border-color: var(--cv-ink);
}
.tk-btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  line-height: 1;
}
.tk-list-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 12px;
  flex-wrap: wrap;
}
.tk-app-counts {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.tk-app-count-sep {
  margin: 0 4px;
  opacity: 0.55;
}
.tk-app-count-active {
  color: #1a7a3c;
}
.tk-app-count-inactive {
  color: #6a6a6a;
}
.tk-flag-count {
  font-size: 11.5px;
  color: var(--cv-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: 10px;
}
.tk-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tk-filters > * { min-width: 0; max-width: 100%; }
.tk-search {
  padding: 8px 10px;
  border: 1px solid var(--cv-gray-1);
  font-family: var(--cv-font);
  font-size: 13px;
  min-width: 240px;
  border-radius: var(--radius-sm);
  background: var(--cv-bg);
  color: var(--cv-ink);
}
.tk-search:focus { border-color: var(--cv-ink); outline: none; }
.tk-search::placeholder {
  color: var(--cv-gray-2);
  opacity: 1;
}
.tk-filters select {
  padding: 8px 10px;
  border: 1px solid var(--cv-gray-1);
  font-family: var(--cv-font);
  font-size: 13px;
  background: var(--cv-bg);
  color: var(--cv-ink);
  border-radius: var(--radius-sm);
}
.tk-clear-filters {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 8px 12px;
  font-size: 12px;
}
.tk-tiles-filter-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid #f0d4a8;
  background: #fff8ee;
  border-radius: var(--radius-md);
  color: #7a4a00;
  font-size: 13px;
  line-height: 1.35;
}
.tk-tiles-filter-banner-icon {
  font-weight: 700;
  flex-shrink: 0;
}
.tk-tiles-filter-banner-text {
  flex: 1;
  min-width: 200px;
}
.tk-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.tk-mode-btn {
  padding: 8px 12px;
  border: none;
  background: var(--cv-bg);
  color: var(--cv-gray-3);
  font-family: var(--cv-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1;
}
.tk-mode-btn + .tk-mode-btn {
  border-left: 1px solid var(--cv-gray-1);
}
.tk-mode-btn:hover {
  color: var(--cv-ink);
}
.tk-mode-btn.is-active {
  background: var(--cv-ink);
  color: var(--cv-bg);
}
.tk-empty {
  padding: 40px 20px;
  text-align: center;
  border: 1px dashed var(--cv-gray-1);
}
.tk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}
.tk-metrics {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
.tk-metrics-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tk-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.tk-metric-panel {
  background: var(--cv-bg);
  border: 1px solid var(--cv-gray-1);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
}
.tk-metric-panel-day {
  width: 100%;
  min-height: 0;
}
.tk-metric-day-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tk-grain-toggle .tk-mode-btn {
  padding: 6px 10px;
  font-size: 11px;
}
.tk-metric-total {
  color: var(--cv-gray-3);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.tk-day-frame {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-height: 188px;
}
.tk-day-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  flex: 0 0 28px;
  padding: 22px 0 28px;
  color: var(--cv-gray-3);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  user-select: none;
}
.tk-day-ytick { display: block; }
.tk-day-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 188px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 0;
  scrollbar-width: thin;
}
.tk-day-col {
  flex: 1 0 28px;
  min-width: 28px;
  margin: 0;
  padding: 4px 2px 6px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--cv-font);
  color: var(--cv-ink);
  transition: background 120ms, border-color 120ms;
}
.tk-grain-week .tk-day-col {
  flex-basis: 56px;
  min-width: 56px;
}
.tk-grain-month .tk-day-col {
  flex-basis: 48px;
  min-width: 48px;
}
.tk-grain-year .tk-day-col {
  flex-basis: 64px;
  min-width: 64px;
}
.tk-day-col:hover {
  background: var(--cv-surface);
}
.tk-day-col.is-selected {
  border-bottom-color: var(--cv-accent);
  background: rgba(250, 84, 0, 0.06);
}
.tk-day-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--cv-gray-3);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tk-day-col.is-selected .tk-day-count {
  color: var(--cv-accent);
}
.tk-day-plot {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tk-day-stack {
  width: 78%;
  max-width: 44px;
  min-width: 18px;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: height 160ms ease;
}
.tk-day-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 1px;
  flex-shrink: 0;
  flex-basis: 0;
  position: relative;
  overflow: hidden;
}
.tk-day-seg-n {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.75), 0 1px 1px rgba(0, 0, 0, 0.45);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}
.tk-day-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--cv-gray-3);
  white-space: nowrap;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-day-col.is-selected .tk-day-label {
  color: var(--cv-ink);
}
.tk-metric-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cv-ink);
  font-family: var(--cv-font);
}
.tk-heat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
}
.tk-heat-cell {
  margin: 0;
  padding: 10px 10px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: rgba(250, 84, 0, calc(0.06 + 0.62 * var(--heat, 0.2)));
  color: var(--cv-ink);
  cursor: pointer;
  text-align: left;
  font-family: var(--cv-font);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 56px;
  transition: outline 120ms, border-color 120ms, transform 120ms;
}
.tk-heat-cell:hover {
  outline: 1px solid var(--cv-gray-2);
}
.tk-heat-cell.is-selected {
  border-color: var(--cv-accent);
  box-shadow: inset 3px 0 0 var(--cv-accent);
}
.tk-heat-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tk-heat-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--cv-gray-3);
  font-variant-numeric: tabular-nums;
}
.tk-heat-status {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.tk-heat-status-cell {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  background: color-mix(in srgb, var(--st-color, #c8c8c8) calc(18% + 55% * var(--heat, 0.3)), white);
}
.tk-heat-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--st-color, #c8c8c8);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.tk-heat-status-cell .tk-heat-label {
  flex: 1 1 auto;
  min-width: 0;
  -webkit-line-clamp: 1;
}
.tk-heat-status-cell .tk-heat-count {
  margin-left: auto;
}
.tk-metric-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.tk-metric-row {
  cursor: pointer;
  padding: 6px 8px;
  border-left: 3px solid transparent;
  transition: background 120ms, border-color 120ms;
}
.tk-metric-row:hover {
  background: var(--cv-surface);
}
.tk-metric-row.is-selected {
  border-left-color: var(--cv-accent);
  background: rgba(250, 84, 0, 0.06);
}
.tk-metric-row-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.tk-metric-label {
  font-size: 13px;
  color: var(--cv-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.tk-metric-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--cv-gray-3);
  flex-shrink: 0;
}
.tk-metric-bar {
  height: 6px;
  background: var(--cv-gray-1);
  border-radius: 2px;
  overflow: hidden;
}
.tk-metric-bar-fill {
  height: 100%;
  background: var(--cv-accent);
  border-radius: 2px;
  min-width: 2px;
  transition: width 160ms ease;
}
.tk-metric-empty {
  margin: 0;
  font-size: 12px;
}
.tk-card {
  background: var(--cv-bg);
  border: 1px solid var(--cv-gray-1);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 120ms, border-color 120ms;
}
.tk-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  border-color: var(--cv-gray-2);
}
.tk-card.tk-stale {
  border-left: 3px solid var(--cv-accent);
}
.tk-card.tk-card-inactive {
  opacity: 0.58;
  border-style: dashed;
  background: #f7f7f7;
}
.tk-card.tk-card-inactive:hover {
  opacity: 0.86;
}
.tk-card-hdr { display: flex; flex-direction: column; gap: 4px; }
.tk-card-title-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}
.tk-card-title-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.tk-cov-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tk-cov-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  border: 1px solid var(--cv-gray-1, #ddd);
  background: var(--cv-bg, #fff);
  color: var(--cv-gray-3, #666);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.tk-cov-icon:hover {
  border-color: var(--cv-gray-3, #888);
  background: var(--cv-surface, #f7f7f7);
}
.tk-cov-glyph { font-size: 11px; line-height: 1; }
.tk-cov-count { font-variant-numeric: tabular-nums; font-size: 10px; }
.tk-cov-icon.tone-danger {
  border-color: rgba(198, 40, 40, 0.35);
  color: #b71c1c;
  background: rgba(198, 40, 40, 0.06);
}
.tk-cov-icon.tone-danger:hover {
  border-color: rgba(198, 40, 40, 0.55);
  background: rgba(198, 40, 40, 0.1);
}
.tk-cov-icon.tone-warn {
  border-color: rgba(250, 84, 0, 0.35);
  color: #c43e00;
  background: rgba(250, 84, 0, 0.06);
}
.tk-cov-icon.tone-warn:hover {
  border-color: rgba(250, 84, 0, 0.55);
  background: rgba(250, 84, 0, 0.1);
}
.tk-cov-icon.tone-info {
  border-color: rgba(90, 90, 90, 0.28);
  color: #555;
  background: rgba(0, 0, 0, 0.03);
}
.tk-cov-icon.tone-muted {
  border-color: rgba(90, 90, 90, 0.22);
  color: #777;
  background: transparent;
}

.tk-cov-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 260;
  padding: 20px;
}
.tk-cov-modal {
  background: var(--cv-surface, #141414);
  color: var(--cv-ink, #ededed);
  border: 1px solid var(--cv-gray-1, #2e2e2e);
  border-radius: var(--radius, 8px);
  padding: 20px 22px;
  width: min(560px, 100%);
  max-height: min(86vh, 720px);
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tk-cov-modal .muted,
.tk-cov-modal-sub,
.tk-cov-section-hint {
  color: var(--cv-gray-2, #a8a8a8);
}
.tk-cov-modal-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.tk-cov-modal-title {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--cv-ink, #ededed);
}
.tk-cov-modal-sub {
  margin: 2px 0 0;
  font-size: 13px;
}
.tk-cov-section {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--cv-ink, #ededed);
  opacity: 1;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}
.tk-cov-section.is-focus {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cv-accent, #ff6900) 55%, transparent);
}
.tk-cov-section ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.tk-cov-section li { margin: 3px 0; }
.tk-cov-section-hint {
  margin: 4px 0 0;
  font-size: 12px;
}
.tk-cov-subhdr {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cv-gray-2, #a8a8a8);
}
.tk-cov-covered { color: var(--cv-gray-2, #a8a8a8); }
.tk-cov-modal-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--cv-gray-1, #2e2e2e);
}
.tk-cov-modal-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--cv-danger, #ff3030) 45%, transparent);
  background: color-mix(in srgb, var(--cv-danger, #ff3030) 12%, transparent);
  color: var(--cv-ink, #ededed);
  font-size: 13px;
}

.tk-coverage-label {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0;
  color: var(--cv-ink, #ededed);
}
.tk-coverage-gaps {
  border-left: 3px solid #ff6b6b;
  background: color-mix(in srgb, #ff6b6b 12%, var(--cv-bg, #0a0a0a));
}
.tk-coverage-matched {
  border-left: 3px solid #3dcf8e;
  background: color-mix(in srgb, #3dcf8e 12%, var(--cv-bg, #0a0a0a));
}
.tk-coverage-extras {
  border-left: 3px solid var(--cv-accent, #ff6900);
  background: color-mix(in srgb, var(--cv-accent, #ff6900) 12%, var(--cv-bg, #0a0a0a));
}
.tk-coverage-nice,
.tk-coverage-duties {
  border-left: 3px solid var(--cv-gray-2, #a8a8a8);
  background: color-mix(in srgb, var(--cv-gray-1, #2e2e2e) 55%, var(--cv-bg, #0a0a0a));
}
.tk-rejected-days {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #6a6a6a;
}
.tk-card-title {
  margin: 0;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cv-ink);
  text-transform: none;
  letter-spacing: -0.005em;
  font-family: var(--cv-font);
}
.tk-card-company {
  margin: 0;
  font-size: 13px;
  color: var(--cv-gray-3);
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.tk-card-meta {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--cv-ink);
}
.tk-card-meta strong { font-weight: 600; }
.tk-kw-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.tk-chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-pill);
  color: var(--cv-gray-3);
  background: var(--cv-surface);
  line-height: 1.4;
}
.tk-chip-kw {
  background: transparent;
  border-color: var(--cv-gray-1);
  color: var(--cv-gray-3);
  font-family: "SFMono-Regular", Consolas, monospace;
}
.tk-kw-more { font-size: 11px; }
.tk-stale-note {
  margin: 0;
  padding: 6px 10px;
  border-left: 2px solid var(--cv-accent);
  background: rgba(250, 84, 0, 0.06);
  font-size: 12px;
  color: var(--cv-gray-3);
}
.tk-card-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--cv-gray-1);
  padding-top: 10px;
  margin-top: 4px;
}
.tk-footer-selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tk-status-select {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  text-transform: uppercase;

  letter-spacing: 0.08em;
  color: var(--cv-gray-3);
  font-weight: 600;
  min-width: 0;
}
.tk-status-select select {
  padding: 6px 8px;
  border: 1px solid var(--cv-gray-1);
  font-family: var(--cv-font);
  font-size: 12.5px;
  background: var(--cv-bg);
  color: var(--cv-ink);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  min-width: 0;
  width: 100%;
  border-radius: var(--radius-sm);
}
.tk-angle-hint {
  margin: 0;
  font-size: 11px;
  color: var(--cv-gray-3);
}
.tk-angle-resolved {
  color: var(--cv-accent);
  font-weight: 600;
}
.tk-detail-hint {
  margin-top: 4px;
  font-size: 11px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--cv-gray-2);
}
.tk-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.tk-actions .tk-btn { padding: 8px 12px; font-size: 11.5px; }
/* Status pills — outcome-tier coloring, all readable on white. */
.tk-status-pill {
  display: inline-block;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-pill);
  color: var(--cv-gray-3);
  background: var(--cv-surface);
  white-space: nowrap;
  flex-shrink: 0;
}
.tk-status-pill.st-neutral { background: var(--cv-surface); color: var(--cv-gray-3); }
.tk-status-pill.st-waiting {
  background: var(--cv-surface);
  color: var(--cv-gray-3);
  border-color: var(--cv-gray-2);
}
.tk-status-pill.st-active {
  background: rgba(250, 84, 0, 0.1);
  color: var(--cv-accent);
  border-color: var(--cv-accent);
}
.tk-status-pill.st-win {
  background: var(--cv-ink);
  color: var(--cv-bg);
  border-color: var(--cv-ink);
}
.tk-status-pill.st-closed {
  background: var(--cv-bg);
  color: var(--cv-gray-2);
  border-color: var(--cv-gray-1);
  text-decoration: line-through;
}
/* ---------- TRACK MODALS (detail + baseline editor) ---------- */
.tk-modal {
  position: fixed;

  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 350;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.tk-modal-panel {
  background: var(--cv-bg);
  padding: 32px 36px;
  width: min(880px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  border-radius: var(--radius);
}
.tk-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  color: var(--cv-gray-3);
  cursor: pointer;
  border-radius: 4px;
}
.tk-modal-close:hover { background: var(--cv-surface); color: var(--cv-ink); }
.tk-modal-hdr { margin-right: 40px; }
.tk-modal-hdr .eyebrow { color: var(--cv-accent); }
.tk-modal-title {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cv-ink);
  text-transform: none;
  letter-spacing: -0.005em;
}
.tk-modal-sub { font-size: 13px; margin-top: 2px; }
.tk-modal-idline {
  font-size: 10.5px;
  font-family: "SFMono-Regular", Consolas, monospace;
  margin-top: 4px;
  letter-spacing: 0;
}
.tk-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tk-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 14px;
}
.tk-modal-field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.tk-loc-warn {
  color: #a15c00;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  cursor: help;
  line-height: 1;
}
.tk-loc-warn-msg {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: #a15c00;
  line-height: 1.35;
}
.tk-url-open-link {
  text-transform: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--cv-ink);
  text-decoration: underline;
  white-space: nowrap;
}
.tk-modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--cv-gray-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.tk-modal-field input,
.tk-modal-field select,
.tk-modal-field textarea {
  padding: 8px 10px;
  border: 1px solid var(--cv-gray-1);
  font-family: var(--cv-font);
  font-size: 13px;

  color: var(--cv-ink);
  background: var(--cv-bg);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}
.tk-modal-field input:focus,
.tk-modal-field select:focus,
.tk-modal-field textarea:focus {
  border-color: var(--cv-ink);
  outline: none;
}
.tk-modal-field textarea { resize: vertical; font-family: var(--cv-font); line-height: 1.5; }
.tk-modal-notes textarea { min-height: 90px; }
.tk-modal-kw-block,
.tk-modal-activity {
  padding: 10px 12px;
  background: var(--cv-surface);
  border: 1px solid var(--cv-gray-1);
  border-left: 3px solid var(--cv-accent);
  border-radius: var(--radius);
  font-size: 12.5px;
  color: var(--cv-ink);
}
.tk-modal-kw-block summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--cv-accent);
}
.tk-modal-kw-block summary::-webkit-details-marker {
  display: none;
}
.tk-modal-kw-block .eyebrow,
.tk-modal-activity .eyebrow { color: var(--cv-accent); }
.tk-modal-activity ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  max-height: 180px;
  overflow-y: auto;
}
.tk-modal-activity li {
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px dotted var(--cv-gray-1);
}
.tk-modal-activity li:last-child { border-bottom: none; }
.tk-activity-file-link {
  font-weight: 600;
  color: var(--cv-ink);
  text-decoration: underline;
}
.tk-modal-jd {
  border: 1px solid var(--cv-gray-1);
  padding: 10px 12px;
  background: var(--cv-surface);
  font-size: 12px;
}
.tk-modal-jd summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--cv-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  list-style: none;
}
.tk-modal-jd summary::-webkit-details-marker {
  display: none;
}
.tk-modal-jd pre {
  margin: 10px 0 0;
  max-height: 260px;
  overflow-y: auto;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  white-space: pre-wrap;
  color: var(--cv-gray-3);
}
.tk-modal-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--cv-gray-1);
  flex-wrap: wrap;
}
.tk-modal-actions-spacer { flex: 1; }
.tk-baseline-para {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.tk-baseline-para textarea {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--cv-gray-1);
  font-family: var(--cv-font);
  font-size: 13px;
  line-height: 1.5;
  border-radius: var(--radius-sm);
  resize: vertical;
}
.tk-baseline-para textarea:focus { border-color: var(--cv-ink); outline: none; }
@media (max-width: 900px) {
  .tk-upload-row { grid-template-columns: 1fr; }
  .tk-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   Track — Feedback loop (upload buttons + diff preview modal)
   ============================================================ */
/* Feedback block inside the app-detail modal */
.tk-modal-feedback {
  margin-top: 16px;
  padding: 12px 14px 14px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius);
  background: var(--cv-surface);
  color: var(--cv-ink);
}
.tk-modal-feedback .eyebrow {
  color: var(--cv-accent);
}
.tk-feedback-blurb {
  margin: 6px 0 10px;
  font-size: 12px;
  line-height: 1.5;
}
.tk-feedback-btns {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.tk-feedback-status {
  font-size: 12px;
  margin-left: 4px;
}
/* Wide variant of the modal used for the diff preview — the side-by-side
   before/after cards need more horizontal room than the app-detail
   modal's default. */
.tk-modal-wide .tk-modal-panel-wide {
  max-width: 1080px;
  width: 92vw;
}
/* Cover-letter punchline ranking picker */
.tk-punch-panel.tk-modal-panel {
  width: min(1080px, 92vw);
  max-width: 1080px;
  max-height: min(92vh, 100dvh);
  height: min(92vh, 100dvh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px 28px;
}
.tk-punch-panel > .tk-modal-hdr {
  flex: 0 0 auto;
}
.tk-punch-panel .tk-punch-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tk-punch-panel .tk-punch-toolbar,
.tk-punch-panel .tk-punch-error,
.tk-punch-panel .tk-punch-empty {
  flex: 0 0 auto;
}
.tk-punch-panel .tk-cover-ai-block {
  flex: 0 0 auto;
}
.tk-punch-panel .tk-punch-table-wrap {
  flex: 0 0 auto;
  min-height: 200px;
  overflow: auto;
  max-height: 340px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-md);
}
.tk-punch-panel > .tk-punch-actions {
  flex: 0 0 auto;
  margin-top: 4px;
}
/* Track resume builder — same shell as punchline picker (sticky footer) */
.tk-resume-builder-panel {
  max-height: min(92vh, 100dvh);
  height: min(92vh, 100dvh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tk-resume-builder-panel > .tk-modal-hdr {
  flex: 0 0 auto;
}
.tk-resume-builder-panel .tk-modal-body {
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.tk-resume-builder-panel > .tk-resume-actions {
  flex: 0 0 auto;
  margin-top: 4px;
}
.tk-resume-builder-content .export-block {
  margin-bottom: 20px;
}
.tk-resume-summary-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.tk-resume-summary-hdr h3 {
  margin: 0;
}
.tk-modal-angle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.tk-modal-angle-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cv-gray-3, #666);
}
.tk-modal-angle-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.tk-modal-angle-source {
  font-size: 12px;
}
.tk-resume-skill-group {
  margin-bottom: 14px;
}
.tk-resume-skill-group-hdr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cv-gray-3, #666);
  margin: 0 0 8px;
}
.tk-punch-blurb {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  max-width: 62ch;
}
.tk-punch-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--cv-gray-1);
  margin-bottom: 12px;
}
.tk-punch-hint {
  font-size: 13px;
  font-weight: 600;
}
.tk-punch-hint.is-ready { color: #1a7a3c; }
.tk-punch-hint.is-warn { color: #a15c00; }
.tk-punch-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #fff4f0;
  border: 1px solid #f0c4b8;
  border-radius: var(--radius-sm);
  color: #8b2e1a;
  font-size: 13px;
  font-weight: 600;
}
.tk-punch-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--cv-gray-3);
  border: 1px dashed var(--cv-gray-1);
  border-radius: var(--radius-md);
  flex: 1 1 auto;
}
.tk-punch-table-wrap {
  overflow: auto;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-md);
}
.tk-punch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.tk-punch-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f7f7f7;
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cv-gray-3);
  font-weight: 700;
  padding: 10px 10px;
  border-bottom: 1px solid var(--cv-gray-1);
  white-space: nowrap;
}
.tk-punch-row {
  cursor: pointer;
  border-bottom: 1px solid var(--cv-gray-1);
  vertical-align: top;
  transition: background 120ms ease;
}
.tk-punch-row:hover { background: #fafafa; }
.tk-punch-row.is-selected {
  background: #f3f8f4;
  box-shadow: inset 3px 0 0 #1a7a3c;
}
.tk-punch-table td {
  padding: 12px 10px;
}
.tk-punch-col-check { width: 36px; }
.tk-punch-col-rank { width: 42px; }
.tk-punch-col-score { width: 56px; }
.tk-punch-col-parts { width: 168px; }
.tk-punch-col-date { width: 88px; white-space: nowrap; }
.tk-punch-check {
  width: 16px;
  height: 16px;
  accent-color: var(--cv-ink);
  cursor: pointer;
}
.tk-punch-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--cv-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.tk-punch-score {
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.tk-punch-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tk-punch-pill {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: #eee;
  color: #444;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tk-punch-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.tk-punch-title {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  min-width: 0;
  margin-bottom: 2px;
}
.tk-punch-edit-btn {
  flex: 0 0 auto;
  padding: 3px 10px;
  font-size: 11px;
}
.tk-punch-id {
  font-size: 11px;
  margin-bottom: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.tk-punch-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: #333;
}
.tk-punch-edit {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tk-punch-edit-textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  padding: 8px 10px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius);
  background: var(--cv-bg);
  color: var(--cv-ink);
  box-sizing: border-box;
}
.tk-punch-edit-textarea:focus {
  outline: none;
  border-color: var(--cv-ink);
}
.tk-punch-edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.tk-punch-edit-hint {
  font-size: 11px;
}
/* Toolbar row above the change cards (bulk select controls) */
.tk-feedback-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 14px;
  border-bottom: 1px solid var(--cv-gray-1);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
/* Empty-state when there are no meaningful edits */
.tk-feedback-empty {
  padding: 32px 24px;
  text-align: center;
  border: 1px dashed var(--cv-gray-1);
  border-radius: var(--radius-md);
  background: var(--cv-gray-0, #F5F5F5);
}
.tk-feedback-empty-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}
/* Change card — one per proposed edit */
.tk-fb-card {
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-md);

  margin-bottom: 12px;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.tk-fb-card.is-selected {
  border-color: var(--cv-ink);
  box-shadow: 0 0 0 1px var(--cv-ink);
}
/* Warning-only cards — no backend field maps to the change, so there's no
   checkbox/apply affordance, just an amber-tinted notice. */
.tk-fb-card.is-warning {
  border-color: #e0a800;
  background: #fffaf0;
}
.tk-fb-hdr-warning {
  cursor: default;
}
.tk-fb-warn-icon {
  color: #b98400;
  font-size: 14px;
}
.tk-fb-warn-msg {
  margin: 0;
  padding: 0 12px 10px;
  font-size: 12px;
  color: #8a6400;
}
/* Header row — checkbox + kind chip + target path + similarity */
.tk-fb-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--cv-gray-1);
  flex-wrap: wrap;
}
.tk-fb-hdr input[type=checkbox] {
  width: 16px; height: 16px;
  accent-color: var(--cv-ink);
}
.tk-fb-kind {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--cv-ink);
  color: #fff;
  border-radius: 10px;
}
.tk-fb-target {
  flex: 1;
  font-size: 12px;
}
.tk-fb-sim {
  font-size: 11px;
}
/* Side-by-side before / after */
.tk-fb-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px;
}
.tk-fb-side {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.55;
}
.tk-fb-before {
  background: #FFF3E0;   /* soft warm — "this is what shipped" */
  border: 1px solid #F5CBA7;
}
.tk-fb-after {
  background: #E8F5E9;   /* soft green — "your revised version" */
  border: 1px solid #A5D6A7;
}
.tk-fb-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cv-gray-3, #575757);
  margin-bottom: 6px;
}
.tk-fb-text {
  white-space: pre-wrap;
  word-break: break-word;
}
@media (max-width: 780px) {
  .tk-fb-diff { grid-template-columns: 1fr; }
  .tk-modal-wide .tk-modal-panel-wide { width: 100vw; max-width: 100vw; }
}

/* ============================================================
   Lint popover — local grammar / style / career-writing check
   ============================================================ */
/* Small "🔍 Polish" button shared by every editor (bullet, punchline,
   STAR, cover-letter baseline). Sits alongside Save/Cancel; the icon does the
   visual work so we don't add another color to the palette. */
.btn.tiny.lint-btn {
  gap: 4px;
  font-size: 11px;
  letter-spacing: 0.02em;
}
/* Row wrapping baseline paragraph controls */
.tk-baseline-para-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
/* --- Popover modal --- */
.lint-modal {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--cv-ink) 45%, transparent);
  /* MUST layer above every other modal — the Polish popover is invoked
     from INSIDE the baseline editor / diff-preview / detail modals, so
     it needs to render on top of them. `.tk-modal` sits at 350; bumping
     to 500 leaves a healthy gap for any future modal layers we add. */
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lint-modal-panel {
  background: var(--cv-surface);
  color: var(--cv-ink);
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-lg, 12px);
  max-width: 780px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px 28px 20px;
  box-shadow: 0 30px 60px color-mix(in srgb, var(--cv-ink) 28%, transparent);
  position: relative;
}
.lint-modal-panel .tk-modal-title,
.lint-modal-panel .eyebrow,
.lint-modal-panel .lint-hit-kind,
.lint-modal-panel .lint-hit-msg {
  color: var(--cv-ink);
}
.lint-summary {
  margin: 6px 0 0;
  font-size: 12px;
}
.lint-applied-chip { color: var(--cv-ink); font-weight: 700; }
.lint-warn-inline { color: var(--cv-accent); }
/* Live preview of the text being linted (updates as user applies fixes) */
.lint-preview-wrap {
  margin-bottom: 16px;
}
.lint-preview {
  padding: 12px 14px;
  background: var(--cv-bg);
  color: var(--cv-ink);
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.lint-busy  { padding: 8px 0; font-size: 12.5px; }
.lint-error {
  padding: 10px 12px;
  background: color-mix(in srgb, var(--cv-danger) 12%, var(--cv-bg));
  border: 1px solid color-mix(in srgb, var(--cv-danger) 40%, var(--cv-gray-1));
  border-radius: var(--radius-sm);
  color: var(--cv-danger);
  font-size: 12.5px;
}
/* Zero-hits happy path */

.lint-empty {
  padding: 24px 20px;
  text-align: center;
  border: 1px dashed var(--cv-gray-1);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cv-accent) 10%, var(--cv-bg));
}
.lint-empty-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--cv-ink);
}
/* One card per hit */
.lint-hit {
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--cv-bg);
  color: var(--cv-ink);
  border-left-width: 4px;    /* accent stripe carries severity color */
}
.lint-hit.lint-sev-error {
  border-left-color: var(--cv-danger);
  background: color-mix(in srgb, var(--cv-danger) 10%, var(--cv-bg));
}
.lint-hit.lint-sev-warning {
  border-left-color: var(--cv-accent);
  background: color-mix(in srgb, var(--cv-accent) 10%, var(--cv-bg));
}
.lint-hit.lint-sev-suggestion {
  border-left-color: var(--cv-gray-2);
  background: color-mix(in srgb, var(--cv-gray-2) 12%, var(--cv-bg));
}
.lint-hit-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.lint-sev-chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 10px;
  color: var(--cv-bg);
}
.lint-sev-chip.lint-sev-error      { background: var(--cv-danger); color: #fff; }
.lint-sev-chip.lint-sev-warning    { background: var(--cv-accent); color: #fff; }
.lint-sev-chip.lint-sev-suggestion { background: var(--cv-gray-3); color: var(--cv-bg); }
.lint-hit-kind {
  font-weight: 700;
  font-size: 12.5px;
}
.lint-hit-src {
  font-size: 11px;
  font-style: italic;
}
.lint-ignore {
  margin-left: auto;
  font-size: 11px !important;
}
.lint-hit-msg {
  font-size: 12.5px;
  line-height: 1.55;
  margin-bottom: 6px;
}
.lint-hit-match {
  font-size: 12px;
  color: var(--cv-gray-2);
  margin-bottom: 8px;
}
.lint-hit-match code {
  background: color-mix(in srgb, var(--cv-accent) 16%, var(--cv-surface));
  color: var(--cv-ink);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11.5px;
}
.lint-hit-fixes {
  display: flex;
  gap: 6px;
  align-items: center;

  flex-wrap: wrap;
}
.lint-fix-label {
  font-size: 11.5px;
}
.lint-fix-btn {
  font-size: 11.5px !important;
  padding: 4px 10px !important;
  letter-spacing: 0.01em;
}
.lint-footer-hint {
  font-size: 11.5px;
  max-width: 60%;
}
/* ============================================================
   Snippet library — Track detail modal + diff-preview sidecar
   ============================================================ */
/* --- Section container in the detail modal ------------------ */
.tk-modal-snippets {
  margin: 18px 0 4px;
  padding: 14px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius);
  background: var(--cv-surface);
  color: var(--cv-ink);
}
.tk-modal-snippets .eyebrow {
  margin-bottom: 8px;
  color: var(--cv-accent);
}
/* Active-overrides strip — shows which slots currently carry a snippet
   injection. Sits atop the suggestions list so the user always knows
   what's about to ship on the next Build. */
.tk-snip-overrides {
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm);
  background: var(--cv-bg);
  color: var(--cv-ink);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.tk-snip-overrides-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.tk-snip-override-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px dashed var(--cv-gray-1);
  font-size: 12.5px;
  line-height: 1.5;
}
.tk-snip-override-row:first-of-type { border-top: none; }
.tk-snip-slot-label {
  flex: 0 0 68px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cv-ink);
}
.tk-snip-override-text {
  flex: 1;
  color: var(--cv-gray-3, #575757);
  word-break: break-word;
}
/* Suggestions strip header */
.tk-snip-suggest-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;

  margin: 4px 0 8px;
}
.tk-snip-inject-status {
  color: var(--cv-accent, #FA5400);
  font-weight: 600;
}
.tk-snip-empty {
  font-size: 12.5px;
  line-height: 1.55;
  padding: 10px 12px;
  border: 1px dashed var(--cv-gray-1);
  border-radius: var(--radius-sm);
  background: var(--cv-bg);
  color: var(--cv-gray-2);
}
.tk-snip-error {
  color: var(--cv-danger);
  font-size: 12.5px;
  padding: 6px 0;
}
/* Suggestion card */
.tk-snip-card {
  background: var(--cv-bg);
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm);
  color: var(--cv-ink);
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: border-color 120ms ease;
}
.tk-snip-card:hover {
  border-color: var(--cv-accent);
}
.tk-snip-card-hdr {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.tk-snip-star {
  color: var(--cv-accent, #FA5400);
  font-size: 14px;
  line-height: 1;
}
.tk-snip-label {
  font-weight: 700;
  font-size: 13px;
  flex: 1;
}
.tk-snip-score {
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.tk-snip-preview {
  font-size: 12.5px;
  line-height: 1.55;
  color: #333;
  margin-bottom: 6px;
}
.tk-snip-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-bottom: 8px;
}
.tk-snip-origin {
  font-size: 11px;
  font-style: italic;
  margin-left: 4px;
}
.tk-snip-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px dashed var(--cv-gray-1);
  padding-top: 8px;
}
.tk-snip-inject-label {
  display: flex;
  align-items: center;
  gap: 6px;

  font-size: 11.5px;
}
.tk-snip-inject-label select {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm);
  background: var(--cv-bg);
  color: var(--cv-ink);
}
.tk-btn.tk-btn-mini {
  font-size: 10.5px;
  padding: 4px 8px;
  letter-spacing: 0.02em;
}
/* --- Save-to-library sidecar in the diff-preview modal ------- */
.tk-fb-sidecar {
  border-top: 1px dashed var(--cv-gray-1);
  padding: 10px 12px 12px;
  background: #FAFAFA;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.tk-fb-sidecar.is-active {
  background: #FFF7E6;   /* soft amber — matches "save to library" intent */
}
.tk-fb-sidecar-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
}
.tk-fb-sidecar-toggle input[type=checkbox] {
  width: 15px; height: 15px;
  accent-color: var(--cv-accent, #FA5400);
}
.tk-fb-sidecar-toggle input[type=radio] {
  width: 15px; height: 15px;
  accent-color: var(--cv-accent, #FA5400);
}
.tk-fb-summary-callout {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.45;
}
.tk-fb-summary-angle-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tk-fb-new-angle-fields {
  margin: 8px 0 10px 22px;
}
.tk-fb-sidecar-field-wide {
  grid-column: 1 / -1;
}
.tk-fb-archetype-input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.4;
  padding: 6px 8px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm, 4px);
  resize: vertical;
}
.tk-fb-sidecar-hint {
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
}
.tk-fb-sidecar-body {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.tk-fb-sidecar-body > .tk-fb-sidecar-field:nth-child(3) {
  /* Angle-picker row spans full width for breathing room */
  grid-column: 1 / -1;
}
.tk-fb-sidecar-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11.5px;
}
.tk-fb-sidecar-field > span:first-child {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cv-gray-3, #575757);
}
.tk-fb-sidecar-field input[type=text] {
  padding: 5px 8px;
  border: 1px solid var(--cv-gray-2, #b8b8b8);
  border-radius: 4px;
  font-size: 12.5px;
}
.tk-fb-angle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.tk-fb-angle-chip {
  display: inline-flex;
  align-items: center;

  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--cv-gray-2, #b8b8b8);
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
  background: #fff;
  transition: all 120ms ease;
}
.tk-fb-angle-chip.is-on {
  background: var(--cv-ink);
  color: #fff;
  border-color: var(--cv-ink);
}

/* ---- Career notes / AI Context tab ---- */
.notes-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 20px;
  margin-top: 16px;
}
.notes-sidebar {
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius, 0);
  padding: 12px;
  background: var(--cv-surface);
  color: var(--cv-ink);
  max-height: 70vh;
  overflow: auto;
}
.notes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.notes-list-item {
  text-align: left;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm, 2px);
  padding: 10px;
  background: var(--cv-bg);
  color: var(--cv-ink);
  cursor: pointer;
}
.notes-list-item:hover {
  border-color: var(--cv-gray-2);
}
.notes-list-item.is-active {
  border-color: var(--cv-accent);
  background: rgba(var(--cv-accent-rgb), 0.1);
}
.notes-list-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--cv-ink);
}
.notes-list-meta {
  font-size: 11px;
  margin-top: 4px;
  color: var(--cv-gray-2);
}
.notes-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.notes-composer,
.notes-detail {
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius, 0);
  padding: 14px;
  background: var(--cv-surface);
  color: var(--cv-ink);
}
.notes-composer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.notes-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.notes-field textarea,
.notes-field input,
.notes-field select,
.notes-filter-row select {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm, 2px);
  background: var(--cv-bg);
  color: var(--cv-ink);
}
.notes-field textarea::placeholder,
.notes-field input::placeholder {
  color: var(--cv-gray-2);
  opacity: 0.85;
}
.notes-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin-top: 8px;
}
.tk-cover-model-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
}
.tk-cover-model-field select {
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm);
  background: var(--cv-bg);
  color: var(--cv-ink);
}
.tk-cover-model-field .eyebrow {
  color: var(--cv-accent);
}
.notes-add-category {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.notes-add-category input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm, 2px);
  background: var(--cv-bg);
  color: var(--cv-ink);
}
.notes-add-category input::placeholder {
  color: var(--cv-gray-2);
  opacity: 0.85;
}
.notes-file-input {
  color: var(--cv-ink);
}
.notes-error {
  color: var(--cv-danger, #ff3030);
  font-size: 13px;
}
.notes-sidebar .muted,
.notes-composer .muted,
.notes-detail .muted {
  color: var(--cv-gray-2);
}

/* AI Context Bank — mobile-only layout (desktop unchanged) */
@media (max-width: 900px) {
  .notes-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .notes-sidebar {
    max-height: none;
    padding: 0;
    border: none;
    background: transparent;
  }
  .notes-sidebar::before {
    content: "Saved notes";
    display: block;
    font-family: var(--cv-font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--cv-ink);
  }
  .notes-filter-row {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 4px 0 8px;
    background: var(--cv-bg);
  }
  .notes-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 0;
    max-height: 42vh;
    overflow: auto;
    padding: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .notes-list-item {
    padding: 12px 14px;
    min-height: 44px;
  }
  /* Selected note editor above the add composer */
  .notes-detail {
    order: -1;
  }
  .notes-composer,
  .notes-detail {
    padding: 12px;
  }
  .notes-composer-grid {
    grid-template-columns: 1fr;
  }
  .notes-field textarea {
    min-height: 140px;
  }
  .notes-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .notes-actions .btn,
  .notes-file-input {
    width: 100%;
  }
  .notes-file-input {
    font-size: 14px;
    padding: 8px 0;
  }
  .notes-add-category {
    flex-direction: column;
    align-items: stretch;
  }
  .notes-add-category .btn {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .notes-view .section-title {
    font-size: 1.35rem;
  }
  .notes-view > .muted {
    font-size: 13px;
    line-height: 1.45;
  }
  .notes-list {
    max-height: 36vh;
  }
}
.tk-cover-ai-block {
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius);
  margin-bottom: 4px;
  background: var(--cv-surface);
  color: var(--cv-ink);
}
.tk-cover-ai-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  color: var(--cv-ink);
}
.tk-cover-ai-summary::-webkit-details-marker {
  display: none;
}
.tk-cover-ai-summary::before {
  content: "▸";
  margin-right: 8px;
  color: var(--cv-accent);
  transition: transform 120ms ease;
}
.tk-cover-ai-block[open] > .tk-cover-ai-summary::before {
  transform: rotate(90deg);
}
.tk-cover-ai-summary-hint {
  font-size: 12px;
  color: var(--cv-gray-2);
}
.tk-cover-ai-inner {
  padding: 0 12px 12px;
  border-top: 1px solid var(--cv-gray-1);
  color: var(--cv-ink);
}
.tk-cover-ai-inner .tk-punch-blurb {
  margin-top: 10px;
}
.tk-cover-note-filter {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.tk-cover-note-filter-field {
  flex: 1;
  min-width: 0;
}
.tk-cover-note-count {
  font-size: 12px;
  white-space: nowrap;
}
.tk-cover-note-list {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm);
  background: var(--cv-bg);
  margin-bottom: 10px;
}
.tk-cover-note-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--cv-gray-1);
  cursor: pointer;
}
.tk-cover-note-item:last-child {
  border-bottom: none;
}
.tk-cover-note-item:hover {
  background: #fafafa;
}
.tk-cover-note-check {
  margin-top: 3px;
  accent-color: var(--cv-ink);
}
.tk-cover-note-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tk-cover-note-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.tk-cover-note-meta {
  font-size: 11px;
}
.tk-cover-note-empty {
  padding: 12px;
  margin: 0;
  font-size: 12px;
}
.tk-cover-ai-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.tk-cover-section-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.tk-cover-section-hint {
  font-size: 11px;
  font-weight: 400;
}
.tk-cover-cta-block {
  flex: 0 0 auto;
}
.tk-fb-angle-chip input[type=checkbox] {
  display: none;
}
@media (max-width: 780px) {
  .tk-fb-sidecar-body { grid-template-columns: 1fr; }
}

/* ---------- THEME DRAWER ---------- */
.theme-drawer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 220;
  display: flex;
  justify-content: flex-end;
}
.theme-drawer-panel {
  width: min(420px, 92vw);
  background: var(--cv-surface);
  color: var(--cv-ink);
  overflow-y: auto;
  padding: 28px 28px 40px;
  transform: translateX(20px);
  transition: transform 200ms ease;
  position: relative;
  border-left: 1px solid var(--cv-gray-1);
  box-shadow: var(--shadow-2);
}
.theme-drawer.open .theme-drawer-panel { transform: translateX(0); }
.theme-drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--cv-gray-2);
}
.theme-drawer-close:hover { color: var(--cv-ink); }
.theme-drawer-kicker {
  font-size: 11px;
  font-weight: 700;
  color: var(--cv-accent);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 6px;
}
.theme-drawer-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.theme-drawer-sub {
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--cv-gray-2);
  line-height: 1.45;
}
.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.theme-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  background: var(--cv-bg);
  border: 1px solid var(--cv-gray-1);
  color: var(--cv-ink);
  padding: 12px;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.theme-card:hover {
  border-color: var(--cv-accent);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}
.theme-card.active {
  border-color: var(--cv-accent);
  box-shadow: inset 0 0 0 1px var(--cv-accent);
}
.theme-preview {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 54px 28px;
  gap: 4px;
  width: 100%;
  min-height: 86px;
}
.theme-swatch {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.theme-swatch.s1 { background: var(--sw1); grid-row: 1 / span 2; }
.theme-swatch.s2 { background: var(--sw2); }
.theme-swatch.s3 { background: var(--sw3); }
.theme-swatch.s4 {
  background: var(--sw4);
  grid-column: 2;
  height: 10px;
  margin-top: -2px;
  border-radius: 0;
}
.theme-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theme-card-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.theme-card-desc {
  font-size: 11.5px;
  color: var(--cv-gray-2);
  line-height: 1.35;
}

/* STAGE1_UI_MERGE: vault-boot + bullet versions + coverage feedback */
.vault-boot {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background: var(--cv-ink);
  color: var(--cv-bg);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.vault-boot.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.vault-boot__wash {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 46vmax;
  height: 46vmax;
  margin: -23vmax 0 0 -23vmax;
  background: radial-gradient(circle, rgba(216, 154, 43, 0.28), transparent 68%);
  pointer-events: none;
}
.vault-boot__panel {
  position: relative;
  width: min(420px, 100%);
  text-align: left;
}
.vault-boot__mark {
  margin: 0;
  font-family: var(--nike-font-condensed);
  font-size: clamp(40px, 8vw, 64px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.vault-boot__line {
  margin: 14px 0 0;
  max-width: 28em;
  font-size: 15px;
  line-height: 1.45;
  color: var(--cv-muted-1);
}
.vault-boot__track {
  position: relative;
  width: 100%;
  height: 3px;
  margin-top: 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
}
.vault-boot__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cv-accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.vault-boot__status {
  margin: 14px 0 0;
  min-height: 1.4em;
  font-size: 14px;
  line-height: 1.4;
  color: var(--cv-muted-1);
}
/* Motion starts only once the screen is on the frame the user can see.
   Starting it in CSS lets the clock run while the page is still parsing,
   so a reload looked like the bar had remembered its old progress. */
.vault-boot.is-playing .vault-boot__wash {
  animation: vault-boot-wash 16s ease-in-out infinite alternate;
}
.vault-boot.is-playing .vault-boot__mark {
  animation: vault-boot-rise 0.7s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
.vault-boot.is-playing .vault-boot__line {
  animation: vault-boot-rise 0.7s cubic-bezier(0.16, 0.84, 0.24, 1) 0.08s both;
}
.vault-boot.is-playing .vault-boot__track {
  animation: vault-boot-fade 0.6s ease 0.16s both;
}
.vault-boot.is-playing .vault-boot__status {
  animation: vault-boot-fade 0.6s ease 0.22s both;
}
@keyframes vault-boot-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes vault-boot-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes vault-boot-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes vault-boot-wash {
  from { transform: translate3d(-8%, -4%, 0) scale(1); }
  to { transform: translate3d(10%, 7%, 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .vault-boot { transition: none; }
  .vault-boot.is-playing .vault-boot__mark,
  .vault-boot.is-playing .vault-boot__line,
  .vault-boot.is-playing .vault-boot__track,
  .vault-boot.is-playing .vault-boot__status,
  .vault-boot.is-playing .vault-boot__wash { animation: none; }
}

.ai-versions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
  min-width: 0;
}
.ai-ver-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ai-ver-select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 8px;
  border: 1px solid var(--cv-muted-1);
  border-radius: var(--radius-sm);
  background: var(--cv-bg);
  color: var(--cv-ink);
}
.ai-ver-select:hover:not(:disabled) { border-color: var(--cv-accent); }
.ai-ver-select:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 1px; }
.ai-ver-select:disabled { cursor: progress; }
.ai-ver-detail {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--cv-muted-2);
}
.ai-ver-del {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--cv-muted-1);
  border-radius: 50%;
  background: var(--cv-bg);
  color: var(--cv-muted-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.ai-ver-del:hover { color: #c0392b; border-color: #c0392b; }
.ai-skill-more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border: 1px dashed var(--cv-gray-2);
  border-radius: 999px;
  background: transparent;
  color: var(--cv-gray-3);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
}
.ai-skill-more:hover { border-color: var(--cv-accent); color: var(--cv-accent); }
.ai-ver-draft {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px dashed var(--cv-muted-1);
  border-radius: var(--radius-sm);
  background: var(--cv-surface);
  font-weight: 400;
}
.ai-ver-draft label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 240px;
  min-width: 0;
  font-size: 11.5px;
}
.ai-ver-draft label > span { flex: none; white-space: nowrap; }
.ai-ver-draft select {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 12px;
  padding: 3px 4px;
}
/* Bulk "Versions" switcher in the Export tab and the Track builder note. */
.ver-set-switch select { max-width: 340px; }
.tk-resume-ver-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -2px 0 10px;
  padding: 6px 10px;
  border-left: 3px solid var(--cv-accent);
  background: rgba(216, 154, 43, 0.08);
  font-size: 12.5px;
  color: var(--cv-muted-3);
}
/* Per-bullet Delete — appears on row hover so it doesn't clutter the
   default view but stays discoverable. Aligns to the right edge. */
.ai-bullet-x {
  margin-top: 2px;
  border: none;
  background: transparent;
  color: var(--cv-muted-2);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.2;
  padding: 2px 0;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease;
  align-self: flex-start;
  white-space: nowrap;
}
.ai-bullet:hover .ai-bullet-x { opacity: 0.7; }
.ai-bullet-x:hover { opacity: 1 !important; color: var(--cv-accent); }
.bullet-trash {
  margin-top: 10px;
  align-self: stretch;
}
.bullet-trash-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--cv-muted-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
}
.bullet-trash-toggle:hover { color: var(--cv-accent); }
.bullet-trash-caret { width: 10px; font-size: 10px; }
.bullet-trash-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bullet-trash-item {
  padding: 8px 10px;
  border: 1px dashed var(--cv-muted-1);
  border-radius: var(--radius-sm);
  background: var(--cv-surface);
}
.bullet-trash-text {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cv-muted-3);
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.25);
}
.bullet-trash-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
.bullet-trash-when {
  font-family: var(--cv-mono);
  font-size: 10.5px;
  color: var(--cv-gray-2);
}
.bullet-trash-actions {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}
.bullet-trash-actions .btn { white-space: nowrap; }
.tk-cov-fb {
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--cv-gray-1, #2e2e2e);
  background: var(--cv-bg, #0a0a0a);
  color: var(--cv-ink, #ededed);
  cursor: pointer;
}
.tk-cov-fb:hover {
  border-color: var(--cv-accent, #ff6900);
}
.tk-cov-fb.on {
  background: var(--cv-accent, #ff6900);
  border-color: var(--cv-accent, #ff6900);
  color: #111;
  font-weight: 600;
}
.tk-cov-fb:disabled { opacity: 0.6; cursor: default; }
.tk-cov-note {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--cv-gray-1, #2e2e2e);
  border-radius: 6px;
  background: var(--cv-bg, #0a0a0a);
  color: var(--cv-ink, #ededed);
}
.tk-cov-note::placeholder {
  color: var(--cv-gray-2, #a8a8a8);
  opacity: 0.9;
}
.tk-cov-section-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--cv-gray-2, #a8a8a8);
}
.tk-cov-subhdr {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cv-gray-2, #a8a8a8);
}
.tk-cov-covered { color: var(--cv-gray-2, #a8a8a8); }
.tk-cov-modal-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--cv-gray-1, #2e2e2e);
}

.tk-coverage-label {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0;
  color: var(--cv-ink, #ededed);
}

@media (max-width: 720px) {
  .ai-ver-select { min-height: 0; font-size: 13px; padding: 4px 8px; }
  .ai-ver-del { width: 26px; height: 26px; font-size: 14px; }
  .ai-skill-more { min-height: 0; padding: 2px 8px; font-size: 10.5px; }
  .ai-bullet-x { opacity: 0.85; font-size: 12px; }
  .ai-ver-draft label { flex-basis: 100%; }
  .ai-ver-draft .btn { flex: 1 1 auto; }
  .ai-bullet-actions > .muted { display: none; }
  .bullet-trash-toggle { min-height: 40px; }
  .bullet-trash-actions { margin-left: 0; width: 100%; }
  .bullet-trash-actions .btn { flex: 1 1 0; min-height: 40px; }
  .ver-set-switch select { max-width: 100%; }

}

@media (max-width: 720px) {
  .bullet-trash-toggle { min-height: 40px; }
  .bullet-trash-actions { margin-left: 0; width: 100%; }
  .bullet-trash-actions .btn { flex: 1 1 0; min-height: 40px; }
  .ver-set-switch select { max-width: 100%; }

  /* Track detail modal: cleaner button rows on narrow screens. */
  .tk-modal {
    padding: 8px;
  }
  .tk-modal-panel {
    width: 100%;
    max-height: 96vh;
    padding: 18px 14px;
  }
  .tk-modal-actions.tk-modal-actions-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: stretch;
  }
  .tk-modal-actions.tk-modal-actions-detail .btn { width: 100%; }
  .tk-modal-actions.tk-modal-actions-detail .btn.danger { grid-column: 1 / -1; }
  .tk-modal-actions.tk-modal-actions-detail .tk-modal-actions-spacer { display: none; }
  .tk-modal-actions.tk-modal-actions-detail .muted {
    grid-column: 1 / -1;
    font-size: 12px;
  }
}

/* STAGE1_UI_MERGE: bullet delete confirm */
.bullet-delete-backdrop {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
}
.bullet-delete-dialog {
  width: min(440px, 100%);
  padding: 18px 18px 16px;
  border-radius: var(--radius, 4px);
  background: var(--cv-bg);
  color: var(--cv-ink);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}
.bullet-delete-dialog h3 { margin: 0 0 10px; font-size: 18px; }
.bullet-delete-copy {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--cv-accent);
  background: var(--cv-surface);
  font-size: 13px;
  line-height: 1.45;
}
.bullet-delete-note {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.8;
}
.bullet-delete-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.tk-cov-claim { margin: 0 0 12px; color: var(--cv-ink, #ededed); }
.tk-cov-claim-text {
  margin: 0 0 4px;
  color: var(--cv-ink, #ededed);
  font-size: 13px;
  line-height: 1.45;
}
.tk-cov-claim-basis {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--cv-gray-2, #a8a8a8);
  opacity: 1;
}
.tk-cov-claim-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tk-cov-note {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--cv-gray-1, #2e2e2e);
  border-radius: 6px;
  background: var(--cv-bg, #0a0a0a);
  color: var(--cv-ink, #ededed);
  font: inherit;
  font-size: 12.5px;
}

/* STAGE15_NAV_MERGE: stretchy pill nav + mobile scrub + FAB (clean) */
.hdr {
  /* Scrolls away with the page so the sticky nav FAB can take over. */
  position: relative;
  z-index: 100;
  min-height: var(--hdr-h);
  display: flex;
  align-items: center;
  /* Keep brand + nav + info on one row; nav scrolls if tight. */
  flex-wrap: nowrap;
  padding: 8px 12px 8px 20px;
  /* theme owns hdr bg */
  /* theme owns hdr fg */
  gap: 8px 12px;
}
.hdr-left { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }
.hdr .swoosh { height: 24px; width: auto; }
.brand-title { font-weight: 800; font-size: 17px; letter-spacing: 0.5px; text-transform: uppercase; }
.hdr-nav {
  --nav-pad: 4px;
  /* Always dark — sits on the white stretchy bead (not theme ink). */
  --nav-ink: #0f1723;
  --nav-pill: 999px;
  position: relative;
  display: flex;
  align-items: center;
  /* Hug the tabs — do NOT grow to fill the header. */
  flex: 0 1 auto;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  flex-wrap: nowrap;
  gap: 0;
  padding: var(--nav-pad);
  border-radius: var(--nav-pill);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.hdr-nav::-webkit-scrollbar { display: none; }
.hdr-nav.is-traveling .nav-bead__body {
  box-shadow:
    0 2px 14px rgba(0, 0, 0, 0.28),
    0 0 calc(22px * var(--glow, 0)) rgba(216, 154, 43, calc(0.55 * var(--glow, 0)));
}
.nav-bead {
  --l: 4px;
  --r: 80px;
  --sq: 1;
  --glow: 0;
  position: absolute;
  top: var(--nav-pad);
  bottom: var(--nav-pad);
  left: var(--l);
  width: calc(var(--r) - var(--l));
  transform: scaleY(var(--sq));
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
  will-change: left, width, transform;
}
.nav-bead__body {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: var(--nav-pill, 999px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.tab-group {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 2px;
}
.tab-group + .tab-group {
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.tab {
  --covl: 0px;
  --covr: 0px;
  position: relative;
  z-index: 1;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--nav-pill, 999px);
  display: block;
  flex: 0 0 auto;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  overflow: hidden;
}
.tab:hover { color: var(--cv-bg); }
.tab:hover .tab__face:not(.tab__face--on) {
  background: rgba(216, 154, 43, 0.14);
}
.tab:focus-visible {
  outline: 2px solid rgba(216, 154, 43, 0.85);
  outline-offset: -2px;
}
.tab.active:focus-visible { outline-color: rgba(15, 23, 35, 0.35); }
.tab__face {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  white-space: nowrap;
}
/* Ink face sits on top and is clipped to the bead's coverage — the recolour
   edge is the stretch signature from gallery #25. */
.tab__face--on {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  color: var(--nav-ink);
  /* Opaque so the base face cannot ghost through the bead. */
  background: #fff;
  clip-path: inset(0 calc(100% - var(--covr)) 0 var(--covl));
  pointer-events: none;
}
.tab__face--on .tab-count {
  background: var(--nav-ink);
  color: #fff;
}
.tab-count {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-pill);
  padding: 0 7px;
  font-size: 10.5px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
  line-height: 1.55;
}
/* Output cluster keeps a quiet orange tint on the base face only. */
.tab.tab-output .tab__face:not(.tab__face--on) { color: rgba(232, 184, 96, 0.92); }
.tab.tab-output .tab__face:not(.tab__face--on) .tab-count {
  background: rgba(216, 154, 43, 0.18);
  color: var(--cv-accent);
}
/* Mobile orb hit-target — hidden on desktop; see @media (max-width: 900px). */
.nav-orb {
  display: none;
}
/* Sticky FAB — fixed bottom-right when the header scrolls away (all viewports). */
.nav-fab {
  --fab: 56px;
  --fab-capsule: 132px;
  --fill: 0;
  --fab-bg: rgba(20, 28, 40, 0.96);
  --fab-fill: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(232, 184, 96, 0.95) 100%
  );
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 200;
  width: var(--fab);
  height: var(--fab);
  margin: 0;
  padding: 0;
  border: 0;
  /* Keep a constant pill radius (circle when square). */
  border-radius: 999px;
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  touch-action: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  color: var(--cv-bg);
  /* Progress is painted on the button itself so mobile WebKit cannot
     leak a square child fill outside the pill. */
  background-color: var(--fab-bg);
  background-image: var(--fab-fill);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(0.92) translateZ(0);
  transform-origin: right center;
  transition:
    width 0.22s cubic-bezier(0.55, 0.08, 0.25, 1),
    opacity 0.22s ease,
    transform 0.22s cubic-bezier(0.55, 0.08, 0.25, 1),
    visibility 0.22s ease,
    box-shadow 0.22s ease,
    background-size 0.05s linear;
}
.nav-fab.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1) translateZ(0);
}
.nav-fab.is-holding {
  width: var(--fab-capsule);
  background-size: calc(var(--fill, 0) * 1%) 100%;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.nav-fab:active,
.nav-fab:focus {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.nav-fab:focus-visible {
  outline: 2px solid var(--cv-accent);
  outline-offset: 2px;
}
.nav-fab .nav-orb__icon {
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: block;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.nav-fab .nav-orb__label {
  position: absolute;
  left: 18px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #0f1723;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}
.nav-fab.is-holding .nav-orb__label {
  opacity: 1;
}
.nav-fab.is-holding .nav-orb__icon {
  opacity: 0;
  transform: scale(0.5);
}
@media (prefers-reduced-motion: reduce) {
  .nav-fab {
    transition: opacity 0.01s linear, visibility 0.01s linear;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-bead { will-change: auto; }
  .hdr-nav.is-traveling .nav-bead__body { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
  .hdr-nav { transition: none !important; }
}

@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  .main { max-width: 100%; overflow-x: hidden; }
  .stat-grid { grid-template-columns: 1fr; }
  .stat-num { font-size: 40px; }
  .iv-storyboard { grid-template-columns: 1fr; }
  .iv-tray { position: static; max-height: 320px; }
  .iv-modal-row { grid-template-columns: 1fr; }
  /* Mobile: circular touch orb. Press → stretch vertically into a list;
     glide finger through options (stretchy highlight); release → navigate. */
  .hdr {
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    gap: 10px;
    overflow: visible;
  }
  .hdr-left { min-height: 40px; }
  .hdr-nav {
    --orb: 52px;
    --scrub-w: 168px;
    --t: 4px;
    --b: 48px;
    position: relative;
    margin-left: auto;
    flex: 0 0 auto;
    width: var(--orb);
    height: var(--orb);
    padding: 0;
    /* 999px stays circular when square; avoids 50%→pill square flashes. */
    border-radius: 999px;
    overflow: hidden;
    isolation: isolate;
    justify-content: flex-start;
    align-items: stretch;
    touch-action: manipulation;
    z-index: 120;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    /* Collapse snaps shut; only the open stretch is animated. */
    transition: box-shadow 0.25s ease;
  }
  .hdr-nav.is-scrubbing {
    position: absolute;
    top: 6px;
    right: 10px;
    width: var(--scrub-w);
    /* height set inline while scrubbing — sized to fit every tab */
    border-radius: 26px;
    padding: 6px;
    overflow: hidden;
    flex-direction: column;
    flex-wrap: nowrap;
    background: rgba(20, 28, 40, 0.96);
    box-shadow:
      0 12px 36px rgba(0, 0, 0, 0.45),
      inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    transition:
      width 0.34s cubic-bezier(0.55, 0.08, 0.25, 1),
      height 0.48s cubic-bezier(0.55, 0.08, 0.25, 1),
      border-radius 0.35s cubic-bezier(0.55, 0.08, 0.25, 1),
      padding 0.25s ease,
      box-shadow 0.3s ease;
    touch-action: none; /* scrub owns the gesture while open */
  }
  /* FAB-opened menu anchors bottom-right near the sticky button. */
  .hdr-nav.is-scrubbing.is-fab-anchored {
    position: fixed;
    top: auto;
    bottom: max(16px, env(safe-area-inset-bottom));
    right: max(16px, env(safe-area-inset-right));
    z-index: 220;
  }
  .nav-orb {
    display: grid;
    place-items: center;
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--cv-bg);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .nav-orb:focus-visible {
    outline: 2px solid var(--cv-accent);
    outline-offset: 2px;
  }
  /* Standard 3-bar hamburger for the header control. */
  .nav-orb__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 22px;
    height: 16px;
    pointer-events: none;
  }
  .nav-orb__burger span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
  }
  /* While the menu is open the orb must never receive hits — it is
     position:absolute; inset:0 over the whole capsule. Leaving it
     clickable (when sticky-open flips off during a scrub) steals the
     tab click and closes the menu before navigation/animation runs. */
  .hdr-nav.is-scrubbing .nav-orb {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none !important;
    visibility: hidden;
  }
  /* Keep tabs/bead out of the collapsed orb so desktop bead scroll/paint
     cannot shove the touch icon out of the 52px circle. */
  .hdr-nav:not(.is-scrubbing) .nav-bead,
  .hdr-nav:not(.is-scrubbing) .tab-group {
    display: none;
  }
  /* Full-row hit targets: the whole capsule row is tappable, not just the label. */
  .hdr-nav.is-scrubbing .tab-group {
    opacity: 1;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  .hdr-nav.is-scrubbing .nav-bead {
    display: block;
    opacity: 1;
    left: 5px;
    right: 5px;
    width: auto;
    top: var(--t);
    bottom: auto;
    height: calc(var(--b) - var(--t));
    transform: scaleX(var(--sq, 1));
    will-change: top, height, transform;
    z-index: 0;
    pointer-events: none;
  }
  .hdr-nav.is-scrubbing .tab {
    pointer-events: auto;
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 0;
    font-size: 13px;
    z-index: 2;
    /* Idle = muted white (same as desktop). */
    color: rgba(255, 255, 255, 0.72) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.72);
  }
  .hdr-nav.is-scrubbing .tab .tab__face,
  .hdr-nav.is-scrubbing .tab .tab__label {
    color: inherit !important;
    -webkit-text-fill-color: inherit;
  }
  .hdr-nav.is-scrubbing .tab .tab-count {
    background: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9);
  }
  /* Output cluster idle = gold (same as desktop). */
  .hdr-nav.is-scrubbing .tab.tab-output {
    color: rgba(232, 184, 96, 0.92) !important;
    -webkit-text-fill-color: rgba(232, 184, 96, 0.92);
  }
  .hdr-nav.is-scrubbing .tab.tab-output .tab-count {
    background: rgba(216, 154, 43, 0.18) !important;
    color: var(--cv-accent) !important;
    -webkit-text-fill-color: var(--cv-accent);
  }
  .hdr-nav.is-scrubbing .tab__face {
    display: flex !important;
    flex: 1 1 auto;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    box-sizing: border-box;
  }
  /* Mobile: single face — dual-face caused inconsistent ink/white stacking. */
  .hdr-nav.is-scrubbing .tab__face--on {
    display: none !important;
  }
  /* Hot row under the white bead = dark ink on every tab type. */
  .hdr-nav.is-scrubbing .tab.is-scrub-hot,
  .hdr-nav.is-scrubbing .tab.tab-output.is-scrub-hot {
    color: #0f1723 !important;
    -webkit-text-fill-color: #0f1723 !important;
  }
  .hdr-nav.is-scrubbing .tab.is-scrub-hot .tab__face,
  .hdr-nav.is-scrubbing .tab.is-scrub-hot .tab__label,
  .hdr-nav.is-scrubbing .tab.tab-output.is-scrub-hot .tab__face,
  .hdr-nav.is-scrubbing .tab.tab-output.is-scrub-hot .tab__label {
    color: #0f1723 !important;
    -webkit-text-fill-color: #0f1723 !important;
  }
  .hdr-nav.is-scrubbing .tab.is-scrub-hot .tab-count,
  .hdr-nav.is-scrubbing .tab.tab-output.is-scrub-hot .tab-count {
    background: #0f1723 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  /* First-run coach tip: press & drag (footer inside the open capsule). */
  .nav-scrub-hint {
    display: none;
  }
  .hdr-nav.is-scrubbing .nav-scrub-hint {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 100%;
    margin: 2px 0 0;
    padding: 6px 8px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-sizing: border-box;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    animation: nav-scrub-hint-in 0.32s ease 0.2s forwards;
  }
  .nav-scrub-hint__main {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.88);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.88);
  }
  .nav-scrub-hint__sub {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.52);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.52);
  }
  @keyframes nav-scrub-hint-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  /* One-shot bead nudge while the tip is visible — shows the bubble can move. */
  .hdr-nav.has-scrub-hint.is-scrubbing .nav-bead {
    animation: nav-bead-nudge 0.45s ease-out 0.35s 1 both;
  }
  @keyframes nav-bead-nudge {
    0%, 100% { transform: scaleX(var(--sq, 1)) translateY(0); }
    40% { transform: scaleX(var(--sq, 1)) translateY(-6px); }
    70% { transform: scaleX(var(--sq, 1)) translateY(3px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hdr-nav.is-scrubbing .nav-scrub-hint {
      animation: none;
      opacity: 1;
    }
    .hdr-nav.has-scrub-hint.is-scrubbing .nav-bead {
      animation: none;
    }
  }
  .tab-group + .tab-group {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
  .tab__face { padding: 6px 9px; }
  .tab { font-size: 12px; }
  .hdr--nav-scrub::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(0, 0, 0, 0.28);
    pointer-events: none;
  }
  /* Timeline years: switch to vertical when spacing gets tighter. */
  .tl-scale {
    justify-content: space-between;
    gap: 0;
    overflow: visible;
    white-space: normal;
    padding-top: 8px;
  }
  .tl-year {
    flex: 1 1 0;
    text-align: center;
    transform: rotate(180deg);
    transform-origin: center;
    writing-mode: vertical-rl;
    font-size: 10px;
    min-width: 0;
    letter-spacing: 0.02em;
  }
  /* Mobile safety rail: filters must not widen page canvas. */
  .filters,
  .tk-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .filters select,
  .filters input[type=text],
  .filter-search,
  .skills-filters .filter-search,
  .skills-result-count,
  .tk-search,
  .tk-filters select,
  .tk-clear-filters {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
  }
  .tk-search,
  .tk-tiles-filter-banner-text { min-width: 0; }
}

.hdr-nav.is-fab-anchored.is-scrubbing {
  --scrub-w: 168px;
  --t: 4px;
  --b: 48px;
  position: fixed;
  top: auto;
  left: auto;
  bottom: max(16px, env(safe-area-inset-bottom));
  right: max(16px, env(safe-area-inset-right));
  z-index: 220;
  width: var(--scrub-w);
  border-radius: 26px;
  padding: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  background: rgba(20, 28, 40, 0.96);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  touch-action: none;
}

.hdr-nav.is-fab-anchored.is-scrubbing .nav-orb {
  display: none !important;
}

.hdr-nav.is-fab-anchored.is-scrubbing .tab-group {
  opacity: 1;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.hdr-nav.is-fab-anchored.is-scrubbing .nav-bead {
  display: block;
  opacity: 1;
  left: 5px;
  right: 5px;
  width: auto;
  top: var(--t);
  bottom: auto;
  height: calc(var(--b) - var(--t));
  transform: scaleX(var(--sq, 1));
  z-index: 0;
  pointer-events: none;
}

.hdr-nav.is-fab-anchored.is-scrubbing .tab {
  pointer-events: auto;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0;
  font-size: 13px;
  z-index: 2;
  color: rgba(255, 255, 255, 0.72) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.72);
}

.hdr-nav.is-fab-anchored.is-scrubbing .tab .tab__face,
.hdr-nav.is-fab-anchored.is-scrubbing .tab .tab__label {
  color: inherit !important;
  -webkit-text-fill-color: inherit;
}

.hdr-nav.is-fab-anchored.is-scrubbing .tab .tab-count {
  background: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.hdr-nav.is-fab-anchored.is-scrubbing .tab.tab-output {
  color: rgba(232, 184, 96, 0.92) !important;
  -webkit-text-fill-color: rgba(232, 184, 96, 0.92);
}

.hdr-nav.is-fab-anchored.is-scrubbing .tab__face {
  display: flex !important;
  flex: 1 1 auto;
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  box-sizing: border-box;
}

.hdr-nav.is-fab-anchored.is-scrubbing .tab__face--on {
  display: none !important;
}

.hdr-nav.is-fab-anchored.is-scrubbing .tab.is-scrub-hot,
.hdr-nav.is-fab-anchored.is-scrubbing .tab.tab-output.is-scrub-hot {
  color: #0f1723 !important;
  -webkit-text-fill-color: #0f1723 !important;
}

.hdr-nav.is-fab-anchored.is-scrubbing .tab.is-scrub-hot .tab-count,
.hdr-nav.is-fab-anchored.is-scrubbing .tab.tab-output.is-scrub-hot .tab-count {
  background: #0f1723 !important;
  color: #fff !important;
}

.hdr-nav.is-fab-anchored.is-scrubbing .nav-scrub-hint {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
  margin: 2px 0 0;
  padding: 6px 8px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
}

.hdr--nav-scrub:has(.hdr-nav.is-fab-anchored)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

/* Live Make-a-Move group accent */
.tab.tab-move .tab__face:not(.tab__face--on) { color: rgba(232, 184, 96, 0.92); }
.tab.tab-move .tab__face:not(.tab__face--on) .tab-count {
  background: rgba(var(--cv-accent-rgb), 0.18);
  color: var(--cv-accent);
}
.hdr-nav .tab.active {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.hdr {
  justify-content: flex-start;
  gap: 8px 10px;
  z-index: 100;
  flex-wrap: nowrap;
}
.hdr-left { flex: 0 1 auto; min-width: 0; }
.hdr-nav {
  margin-left: auto;
  margin-right: 0;
  flex: 0 1 auto;
  min-width: 0;
  width: max-content;
  /* Leave room for info btn on the same row instead of wrapping. */
  max-width: calc(100% - 56px);
}
.hdr-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: 2px;
  margin-right: 0;
}
.hdr-right .tour-replay-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.hdr-right .hdr-icon-btn {
  width: 40px;
  height: 40px;
}
@media (max-width: 900px) {
  .hdr {
    flex-wrap: wrap;
  }
  .hdr-nav {
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 0;
    max-width: none;
    width: auto;
  }
  .hdr-right {
    margin-left: 0;
  }
}

/* Resume builder layout upgrades (from transfer) */
.export-role.is-hidden {
  opacity: 0.72;
  background: var(--cv-surface);
}
.stretch-include {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cv-gray-2);
  cursor: pointer;
  user-select: none;
}
.stretch-include input { accent-color: var(--cv-accent); cursor: pointer; }
.stretch-hidden-note { margin: 0 0 4px; font-size: 12px; }
.tk-resume-layout .tk-layout-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tk-layout-label {
  font-size: 12.5px;
  font-weight: 600;
}
.tk-layout-label .muted { font-weight: 400; }
.tk-layout-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--cv-gray-1);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  background: var(--cv-bg);
  color: var(--cv-ink);
}
.tk-layout-input:focus {
  outline: none;
  border-color: var(--cv-accent);
}
.tk-layout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 10px;
}
.tk-layout-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 10px;
  cursor: pointer;
}
.tk-layout-check input {
  margin-top: 3px;
  accent-color: var(--cv-accent);
}
.tk-layout-sig {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
}
.ai-sig-btn {
  flex: 0 0 auto;
  margin-top: 1px;
  border: none;
  background: transparent;
  color: var(--cv-gray-2);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}
.ai-sig-btn:hover:not(:disabled) { color: var(--cv-accent); }
.ai-sig-btn.is-on { color: var(--cv-accent); }
.tk-resume-checks .tk-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--cv-gray-1);
  font-size: 13px;
}
.tk-check-chip {
  flex: 0 0 auto;
  min-width: 74px;
  text-align: center;
  border-radius: 999px;
  font-size: 10.5px;
  padding: 1px 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--cv-gray-1);
  background: var(--cv-surface);
  color: var(--cv-ink);
}
.tk-check-chip.warning {
  background: rgba(var(--cv-accent-rgb), 0.14);
  border-color: rgba(var(--cv-accent-rgb), 0.45);
}
.tk-check-chip.suggestion {
  background: var(--cv-surface);
  border-color: var(--cv-gray-2);
}
.tk-check-chip.ok {
  background: rgba(46, 160, 67, 0.12);
  border-color: rgba(46, 160, 67, 0.4);
}