/* Nike design tokens (see nikefy skill) */
:root {
  --nike-black: #0f1723;
  --nike-white: #ffffff;
  --nike-orange: #d89a2b;
  --nike-off: #f6f3ec;
  --nike-gray-1: #d9d7d1;
  --nike-gray-2: #667385;
  --nike-gray-3: #2d3a4b;
  --nike-red: #b54a2f;
  /* Type stack: Helvetica Neue authoritative, Inter as web fallback */
  --nike-font: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
  --nike-font-condensed: "Helvetica Neue Condensed", "Helvetica Neue", "Inter", Impact, Helvetica, sans-
serif;
  /* Radii — Nike prefers 0 on cards, pill on buttons */

  --radius: 0px;
  --radius-pill: 100px;
  --radius-sm: 3px;
  --hdr-h: 64px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 4px 20px rgba(0, 0, 0, 0.08);
}
[x-cloak] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--nike-white); color: var(--nike-black); font-family:
var(--nike-font); -webkit-font-smoothing: antialiased; line-height: 1.6; }
h1, h2, h3 { font-family: var(--nike-font-condensed); text-transform: uppercase; line-height: 1.05; letter-
spacing: -0.02em; }
code, pre { font-family: "IBM Plex Mono", Consolas, monospace; font-size: 12.5px; }
a { color: var(--nike-black); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--nike-orange); }
/* ---------- HEADER ---------- */
/* Header grows past the base 64px if the eight-tab nav wraps onto a
   second row, so tabs stay reachable at any window width. `flex-wrap`
   lets brand+nav break onto two rows when horizontal space is tight,
   and `row-gap` inside `.hdr-nav` gives the wrapped rows breathing room. */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--hdr-h);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 24px;
  background: var(--nike-black);
  color: var(--nike-white);
  gap: 8px 16px;
}
.hdr-left { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.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(216, 154, 43, 0.18);
  border-color: rgba(216, 154, 43, 0.45);
  color: var(--nike-white);
}

/* ---------- 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(--nike-white);
  color: var(--nike-black);
  border: 1px solid var(--nike-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(--nike-gray-2);
}
.tour-skip {
  background: none;
  border: none;
  font: inherit;
  font-size: 12px;
  color: var(--nike-gray-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tour-skip:hover { color: var(--nike-black); }
.tour-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  font-family: var(--nike-font);
}
.tour-body {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--nike-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; }
/* Nav: five sections — links + modern dropdowns */
.hdr-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 4px;
  flex-wrap: wrap;
  row-gap: 6px;
}
.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(216, 154, 43, 0.18);
  color: var(--nike-white);
  box-shadow: inset 0 0 0 1px rgba(216, 154, 43, 0.28);
}
.nav-trigger.active,
.nav-trigger.open {
  background: var(--nike-white);
  color: var(--nike-black);
}
.nav-trigger.active .tab-count,
.nav-trigger.open .tab-count {
  background: var(--nike-black);
  color: var(--nike-white);
}
.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(--nike-white);
  color: var(--nike-black);
  border: 1px solid var(--nike-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(--nike-black);
  cursor: pointer;
  transition: background 0.12s ease;
}
.nav-menu-item:hover { background: var(--nike-off); }
.nav-menu-item.active {
  background: var(--nike-black);
  color: var(--nike-white);
}
.nav-menu-item .tab-count {
  background: rgba(15, 23, 35, 0.08);
  color: var(--nike-gray-3);
}
.nav-menu-item.active .tab-count {
  background: rgba(255, 255, 255, 0.18);
  color: var(--nike-white);
}
.nav-section-move .nav-trigger:not(.active):not(.open) {
  color: var(--nike-orange);
}
.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 kept for any leftover .tab usage */
.tab-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tab-group + .tab-group {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.tab {
  background: transparent;
  color: var(--nike-white);
  border: none;
  padding: 8px 16px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.tab:hover {
  background: rgba(216, 154, 43, 0.20);
  box-shadow: inset 0 0 0 1px rgba(216, 154, 43, 0.35);
  transform: translateY(-1px);
}
.tab.tab-home,
.tab.tab-edit { color: var(--nike-white); font-weight: 600; }
.tab.tab-home.active,
.tab.tab-edit.active { background: var(--nike-white); color: var(--nike-black); }
.tab.tab-home.active .tab-count,
.tab.tab-edit.active .tab-count { background: var(--nike-black); color: var(--nike-white); }
.tab.tab-record {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}
.tab.tab-record .tab-count { background: rgba(255, 255, 255, 0.10); color: rgba(255,255,255,0.85); }
.tab.tab-record:hover { color: var(--nike-white); }
.tab.tab-record.active {
  background: rgba(255, 255, 255, 0.14);
  color: var(--nike-white);
}
.tab.tab-record.active .tab-count {
  background: rgba(255, 255, 255, 0.25);
  color: var(--nike-white);
}
.tab.tab-output {
  color: var(--nike-orange);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.tab.tab-output .tab-count { background: rgba(216, 154, 43, 0.20); color: var(--nike-orange); }
.tab.tab-output:hover { background: rgba(216, 154, 43, 0.16); }
.tab.tab-output.active {
  background: linear-gradient(135deg, #e3b65d, var(--nike-orange));
  color: #1f2733;
}
.tab.tab-output.active .tab-count {
  background: rgba(255, 255, 255, 0.55);
  color: #1f2733;
}
/* ---------- LOADING ---------- */
.loading { padding: 80px; text-align: center; color: var(--nike-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(--nike-orange);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.muted { color: var(--nike-gray-2); font-size: 13px; }
/* ---------- DASHBOARD ---------- */
.dash-hero {
  background: var(--nike-black);
  color: var(--nike-white);
  padding: 48px;

  border-radius: var(--radius);
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.dash-hero::after {
  content: "";
  position: absolute;
  right: -100px; bottom: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(closest-side, var(--nike-orange), transparent);
  opacity: 0.4;
}
.dash-hero-text { position: relative; z-index: 2; }
.dash-hero .eyebrow { color: var(--nike-orange); }
/* 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(--nike-gray-1); margin: 0 0 24px; }
.hero-summary { max-width: 720px; font-size: 15px; line-height: 1.6; color: var(--nike-gray-1); }
/* 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(--nike-off);
  padding: 18px 22px;
  border-radius: var(--radius);
  border-left: 3px solid var(--nike-orange);
  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(--nike-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(--nike-white);
  border: 1px solid var(--nike-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(--nike-off);
  border: none;
  border-left: 3px solid var(--nike-orange);
}
.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(--nike-orange); border-radius: 2px; min-width: 2px; }
.maxim-count { text-align: right; font-weight: 700; color: var(--nike-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(--nike-white);
  border: 1px solid var(--nike-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(--nike-black); }
.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(--nike-orange); 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(--nike-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(--nike-gray-3);
  margin-top: 8px;
}
.card-tenure {
  font-weight: 700;
  color: var(--nike-black);
}
.card-preview-sep { color: var(--nike-gray-1); }
.card-short-narrative { color: var(--nike-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(--nike-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(--nike-gray-2, #bbb);
  color: var(--nike-gray-4, #333);
  background: var(--nike-gray-0, #f5f5f5);
  cursor: default;
}
.tag.skill-tag:hover {
  border-color: var(--nike-gray-2, #bbb);
  color: var(--nike-gray-4, #333);
}
.tag {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 10px;
  border: 1px solid var(--nike-gray-1);
  border-radius: var(--radius-pill);
  color: var(--nike-gray-3);
  background: var(--nike-white);
  cursor: pointer;
  text-transform: lowercase;
  transition: border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.tag:hover { border-color: var(--nike-black); color: var(--nike-black); }
.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(--nike-black);
  color: var(--nike-white);
  border-radius: 3px;
}
.card-footer {
  display: flex;
  gap: 12px;
  margin-top: 8px;

  padding-top: 12px;
  border-top: 1px solid var(--nike-gray-1);
  font-size: 11px;
  color: var(--nike-gray-2);
}
/* ---------- FILTERS ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: var(--nike-off);
  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(--nike-gray-1);
  border-radius: var(--radius);
  background: var(--nike-white);
  font-size: 13px;
  max-width: 100%;
}
.filter-search { min-width: 220px; }
.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;
}
.btn.primary {
  background: linear-gradient(135deg, #1f3048, var(--nike-black));
  color: var(--nike-white);
  border-color: #24384f;
  box-shadow: 0 4px 10px rgba(15, 23, 35, 0.18);
}
.btn.primary:hover {
  background: linear-gradient(135deg, #e3b65d, var(--nike-orange));
  border-color: var(--nike-orange);
  color: #1f2733;
  box-shadow: 0 6px 14px rgba(171, 123, 30, 0.25);
}
.btn.ghost { background: rgba(255, 255, 255, 0.72); color: var(--nike-black); border-color: #bcc3cc; }
.btn.ghost:hover {
  border-color: #7b8898;
  background: rgba(216, 154, 43, 0.10);
}
.btn:active { transform: translateY(1px); }
/* ---------- TIMELINE ---------- */
.tl { position: relative; }
.tl-wrap { border-left: 1px solid var(--nike-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(--nike-off); cursor: pointer; }
.tl-bar {
  position: absolute;
  top: 6px;
  height: 16px;
  border-radius: 2px;
  min-width: 2px;
}
.tl-bar.roles { background: var(--nike-black); }
/* Concurrent stretch assignments (kind_detail === "stretch-assignment")
   render as solid Nike orange so they stand out from the primary black
   role bars while still living in the "Roles" band. */
.tl-bar.roles.stretch { background: var(--nike-orange); }
.tl-bar.project { background: var(--nike-orange); opacity: 0.85; }
/* Education bars — muted orange + subtle diagonal stripe to visually
   separate them from roles (solid black) and any future project bars. */
.tl-bar.education {
  background: var(--nike-orange);
  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(--nike-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(--nike-gray-2);
  padding: 2px 0 6px 4px;
}
.tl-scale { display: flex; justify-content: space-between; padding-left: 292px; padding-top: 14px; color:
var(--nike-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(--nike-
gray-1); }
.heat th { background: var(--nike-black); color: var(--nike-white); }
.heat .skill-name { text-align: left; font-weight: 600; padding: 6px 12px; background: var(--nike-off);
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(--nike-gray-1);
  border-radius: var(--radius-sm);
  background: var(--nike-white);
  color: var(--nike-black);
  font-size: 13px;
}
.job-role-select:focus {
  outline: none;
  border-color: var(--nike-black);
  box-shadow: 0 0 0 2px rgba(216, 154, 43, 0.2);
}
.job-role-btn {
  padding: 10px 16px;
  border: 1.5px solid var(--nike-black);
  border-radius: 999px;
  background: var(--nike-white);
  color: var(--nike-black);
  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(--nike-black));
  color: var(--nike-white);
  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(--nike-orange)); 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(--nike-gray-1);
  border-radius: 999px;
  background: transparent;
  color: var(--nike-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(--nike-black);
  background: rgba(216, 154, 43, 0.10);
}
.cat-chip.active {
  background: linear-gradient(135deg, #e3b65d, var(--nike-orange));
  border-color: var(--nike-orange);
  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(--nike-orange);
  background: var(--nike-off);
  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(--nike-gray-1);
  border-radius: var(--radius);
  background: var(--nike-white);
  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(--nike-orange);
  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(--nike-white);
  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(--nike-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(--nike-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(--nike-gray-1);
  border-radius: 999px;
  background: var(--nike-off);
}
.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(--nike-off);
  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(--nike-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(--nike-black);
  border: 1px solid var(--nike-gray-1);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--nike-white);
}
.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(--nike-gray-1);
  border-radius: 6px;
  background: var(--nike-white);
}
.skill-add-error {
  color: #b00020;
  font-size: 13px;
  margin: 0 0 12px;
}
.skill-add-status {
  color: var(--nike-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(--nike-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(--nike-black);
  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(--nike-orange); }
.skill-card.pri-2 { border-top: 3px solid var(--nike-black); }
.skill-card.pri-3 { border-top: 3px solid var(--nike-gray-2); }
.skill-card.pri-4,
.skill-card.pri-5 { border-top: 3px solid var(--nike-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(--nike-gray-3);
  padding: 2px 8px;
  border: 1px solid var(--nike-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(--nike-white);
}
.skill-fit.fit-3 { background: var(--nike-orange); }
.skill-fit.fit-2 { background: var(--nike-black); }
.skill-fit.fit-1 { background: var(--nike-gray-2); }
.skill-card .skill-name {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--nike-black);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.skill-def {
  font-size: 13px;
  line-height: 1.5;
  color: var(--nike-gray-3);
  margin: 0;
}

.skill-meta { display: flex; gap: 12px; font-size: 11px; color: var(--nike-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(--nike-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(--nike-gray-1);
  background: var(--nike-off);
  color: var(--nike-black);
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
}
.role-chip:hover {
  background: var(--nike-black);
  color: var(--nike-white);
  border-color: var(--nike-black);
}
/* ---------- 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(--nike-gray-1);
  border-radius: var(--radius-md);
  background: #fafafa;
}
.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(--nike-gray-1);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
}
.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(--nike-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(--nike-orange);
  color: var(--nike-white);
  border-color: var(--nike-orange);
}
/* 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(--nike-white);
  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(--nike-orange);
}
.skill-chip-x, .skill-chip-plus {
  background: var(--nike-gray-1);
  border: none;
  border-left: 1px solid var(--nike-gray-1);
  color: var(--nike-black);
  font-weight: 700;
  font-size: 12px;
  width: 20px;
  height: 100%;
  cursor: pointer;
  line-height: 1;
}
.skill-chip-x:hover { background: #d33; color: var(--nike-white); }
.skill-chip-plus:hover { background: var(--nike-orange); color: var(--nike-white); }
.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(--nike-gray-1);
  border-radius: 4px;
  background: var(--nike-white);
  color: var(--nike-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(--nike-gray-1);
  background: var(--nike-white);
}
.hf.received { border-left: 4px solid var(--nike-orange); }
.hf.sent { border-left: 4px solid var(--nike-black); background: var(--nike-off); }
.hf-head { display: flex; gap: 12px; align-items: center; font-size: 11px; text-transform: uppercase;
letter-spacing: 0.5px; color: var(--nike-gray-2); font-weight: 700; }
.hf-date { color: var(--nike-black); }
.hf-fy { padding: 2px 6px; background: var(--nike-gray-3); color: var(--nike-white); border-radius: 3px; }
.hf-maxim { color: var(--nike-orange); }
.hf-dir.received { color: var(--nike-orange); }
.hf-dir.sent { color: var(--nike-black); }
.hf-people { font-size: 14px; margin-top: 8px; }
.hf-title { color: var(--nike-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(--nike-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(--nike-black); }
.rv-comps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
/* ---------- REVIEWS BY YEAR (new layout) ---------- */
.reviews-view code {
  background: var(--nike-off);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 12px;
  color: var(--nike-black);
}
.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(--nike-gray-1);
  border-radius: var(--radius);
  padding: 10px 14px;
  background: var(--nike-off);
}
.reviews-ai-block summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}

.learning-view { margin-top: 4px; }
.lr-block { margin-top: 22px; }
.lr-block-personality { margin-top: 32px; padding-top: 8px; border-top: 1px solid var(--nike-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(--nike-white);
  border: 1px solid var(--nike-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(--nike-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(--nike-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(--nike-gray-1);
  border-radius: var(--radius-sm);
}
.fy-list { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.fy-card {
  background: var(--nike-white);
  border: 1px solid var(--nike-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(--nike-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(--nike-black);
  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(--nike-black);
  line-height: 1;
}
.fy-role {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nike-gray-2);
}
.fy-rating {
  display: inline-block;
  background: var(--nike-orange);
  color: var(--nike-white);
  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(--nike-black); }
.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(--nike-off);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  border: 1px solid var(--nike-gray-1);
}
.fy-stage { font-weight: 700; color: var(--nike-black); }
.fy-h4 {
  font-family: "Helvetica Neue", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--nike-orange);
  margin: 20px 0 10px;
}
.fy-themes p,
.markdown-inline p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--nike-black);
  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(--nike-orange);
  background: var(--nike-off);
  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(--nike-black);
  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(--nike-gray-1);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: inherit;
  color: var(--nike-black);
  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(--nike-off);
  border-color: var(--nike-orange);
}
.fy-doc:active { transform: translateY(1px); }
.fy-doc-stage {
  font-weight: 700;
  color: var(--nike-orange);
  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(--nike-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(--nike-gray-1); border-radius: var(--radius);
background: var(--nike-white); }
.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(--nike-black); }
.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(--nike-orange);
  padding-left: 12px;
  background: var(--nike-off);
  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(--nike-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(--nike-orange); }
.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(--nike-gray-1);
  border-radius: 4px;
  background: var(--nike-off);
  color: var(--nike-orange);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
  transition: all 120ms ease;
}
.export-project-chip:hover {
  background: var(--nike-orange);
  color: var(--nike-white);
  border-color: var(--nike-orange);
}
/* --- new per-bullet row: rank | checkbox | skill button | text --- */
.ai-bullet {
  color: var(--nike-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(--nike-black);
  opacity: 1;
  font-weight: 500;
  background: rgba(250, 84, 0, 0.06);
}
.ai-rank {
  font-weight: 700;
  color: var(--nike-orange);
  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(--nike-orange);
}
.ai-skill-btn {
  margin-top: 2px;
  border: 1px solid var(--nike-gray-1);
  background: var(--nike-white);
  color: var(--nike-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(--nike-orange);
  color: var(--nike-orange);
  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(--nike-orange, #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: rgba(0, 0, 0, 0.03); }
.ai-bullet-edit {
  width: 100%;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  padding: 6px 8px;
  border: 1px solid var(--nike-orange);
  border-radius: var(--radius-sm);
  resize: vertical;
  background: var(--nike-white);
}
.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(--nike-off);
  color: var(--nike-gray-3);
  border: 1px solid var(--nike-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(--nike-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(--nike-orange); }
/* 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(--nike-gray-1);
  background: transparent;
  color: var(--nike-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(--nike-orange);
  color: var(--nike-orange);
  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(--nike-white);
  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(--nike-off);
  border-left: 3px solid var(--nike-orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12.5px;
  font-style: italic;
  color: var(--nike-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(--nike-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(--nike-black);
  border: 1px solid var(--nike-gray-1);
  border-radius: 6px;
  padding: 7px 10px;
  background: var(--nike-white);
}
.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(--nike-gray-1);
  border-radius: 0 6px 6px 0;
  background: var(--nike-white);
  color: var(--nike-gray-3);
  font-size: 14px;
  cursor: pointer;
}
.bullet-skill-combo-toggle:hover {
  color: var(--nike-black);
}
.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(--nike-gray-1);
  border-radius: 6px;
  padding: 6px;
  background: var(--nike-white);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
.bullet-project-match-item {
  border: 1px solid var(--nike-gray-1);
  background: var(--nike-off);
  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(--nike-orange);
}
.bullet-project-match-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--nike-black);
}
.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(--nike-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(--nike-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(--nike-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(--nike-black, #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(--nike-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(--nike-gray-1);
  border-radius: var(--radius-sm);
  background: var(--nike-white);
  cursor: pointer;
}
.ai-count select:disabled { background: var(--nike-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(--nike-gray-1); }
/* Export tab — section blocks (Summary / Roles / Skills) */
.export-block {
  margin: 20px 0 4px;
  padding: 20px;
  border: 1px solid var(--nike-gray-1);
  border-radius: var(--radius);
  background: var(--nike-white);
}
.export-block > h3 {
  margin: 0 0 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nike-black);
}
.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(--nike-black);
}
/* 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(--nike-gray-1);
  border-radius: var(--radius-sm);
  background: var(--nike-off);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--nike-black);
  resize: vertical;
  transition: border-color 120ms ease, background 120ms ease;
}
.summary-preview:focus {
  outline: none;
  border-color: var(--nike-orange);
  background: var(--nike-white);
}
/* 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(--nike-gray-1);
  border-radius: 999px;
  background: var(--nike-white);
  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(--nike-black); }
.export-skill-chip.selected {
  background: var(--nike-black);
  border-color: var(--nike-black);
  color: var(--nike-white);
}
.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(--nike-white);
}
.export-skill-fit.fit-3 { background: var(--nike-orange); }
.export-skill-fit.fit-2 { background: var(--nike-gray-3); }
.export-skill-fit.fit-1 { background: var(--nike-gray-2); }
.export-skill-chip.selected .export-skill-fit.fit-3 { background: var(--nike-orange); }
/* ---------- 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(--nike-white);
  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(--nike-gray-2);
}
.drawer-close:hover { color: var(--nike-black); }
.drawer-kind {
  font-size: 11px;
  font-weight: 700;
  color: var(--nike-orange);
  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(--nike-font);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  padding: 6px 8px;
  border: 1px solid var(--nike-gray-1);
  border-radius: 4px;
  color: var(--nike-black);
}
.drawer-title-input:focus {
  border-color: var(--nike-black);
  outline: none;
}
.drawer-delete-btn {
  color: #a33;
}
.drawer-delete-btn:hover {
  color: #c00;
}
.drawer-meta { font-size: 13px; color: var(--nike-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(--nike-off);
  border-left: 3px solid var(--nike-orange);
  border-radius: 0 6px 6px 0;
  padding: 16px 18px 14px;
}
.drawer-section-star {
  border-left-color: var(--nike-black);
  background: linear-gradient(180deg, #f7f7f5 0%, #ffffff 100%);
}
.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(--nike-orange);
  margin-bottom: 2px;
}
.drawer-section-star .drawer-section-kicker {
  color: var(--nike-black);
}
.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: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  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(--nike-gray-2);
}
.star-part-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--nike-black);
  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(--nike-black);
}
.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 rgba(0, 0, 0, 0.05);
}
.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(--nike-gray-2);
}
.review-meta-row dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--nike-black);
  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(--nike-black);
}
.review-quotes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.drawer-section-feedback {
  border-left-color: var(--nike-black);
}
.drawer-section-notice {
  border-left-color: var(--nike-gray-2);
  background: #f3f3f1;
}
.drawer-section-notice .drawer-section-body {
  font-size: 13px;
  color: var(--nike-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(--nike-orange);
  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(--nike-gray-1);
  border-radius: var(--radius-sm);
  background: var(--nike-off);
}
.drawer-source-details summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nike-gray-3);
}
.drawer-source-details[open] {
  background: var(--nike-white);
}
.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(--nike-gray-1); padding-bottom: 4px; }
.markdown h3 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--nike-
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(--nike-orange);
  margin: 12px 0;
  padding: 4px 16px;
  background: var(--nike-off);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.markdown blockquote p { font-size: 13px; font-style: italic; color: var(--nike-gray-3); margin: 4px 0; }
.markdown code { padding: 2px 6px; background: var(--nike-off); border-radius: 3px; }
.markdown pre { padding: 12px; background: var(--nike-off); border-radius: var(--radius); overflow-x: auto;
}
.markdown a { color: var(--nike-orange); }
.drawer textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--nike-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(--nike-off);
  border-radius: var(--radius);
  border-left: 3px solid var(--nike-orange);
}
.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(--nike-white);
  border-left: 2px solid var(--nike-black);
  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(--nike-white);
  border-left: 2px solid var(--nike-black);
  border-radius: var(--radius-sm);
}
.punchline-edit {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  border-left-color: var(--nike-orange);
}
.punchline-text {
  flex: 1;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  min-width: 0;
}
.punchline-textarea {
  width: 100%;
  font-family: var(--nike-font);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 8px 10px;
  border: 1px solid var(--nike-gray-1);
  border-radius: var(--radius-sm);
  resize: vertical;
  background: var(--nike-white);
}
.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(--nike-gray-3);
}
.punchline-del:hover {
  color: var(--nike-orange);
}
/* 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(--nike-white);
  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(--nike-white);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.drawer-bullet-editor .ai-bullet.picked {
  border-color: var(--nike-orange);
}
/* 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(--nike-off);
  border-radius: var(--radius);
  border-left: 3px solid var(--nike-orange);
}
.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(--nike-gray-2);
  margin-bottom: 3px;
}
.note-text {
  font-size: 13.5px;
  line-height: 1.5;

  color: var(--nike-black);
  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(--nike-gray-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.note-del:hover {
  background: var(--nike-orange);
  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(--nike-off);
  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(--nike-white);
  border: 1px solid var(--nike-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(--nike-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(--nike-gray-1);
  border-left: 3px solid var(--nike-orange);
  background: var(--nike-white);
  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(--nike-off); }
.iv-project-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nike-black);
  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(--nike-gray-1);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--nike-white);
  transition: all 120ms ease;
  min-height: 140px;
}
.iv-lane.drag-hover {
  border-color: var(--nike-orange);
  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(--nike-orange);
}
.iv-lane-title-btn:hover .iv-lane-coach-hint {
  color: var(--nike-orange);
}
.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(--nike-black);
}
.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(--nike-black);
  border-radius: 4px;
  overflow: hidden;
  font-size: 11.5px;
  background: var(--nike-off);
}
.iv-pin-label {

  padding: 3px 8px;
  border: none;
  background: transparent;
  color: var(--nike-black);
  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(--nike-white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 3px solid var(--nike-orange);
  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(--nike-orange); }
.iv-pin-x {
  padding: 0 6px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--nike-gray-1);
  color: var(--nike-gray-3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.iv-pin-x:hover { background: var(--nike-orange); color: #fff; }
/* Section 2 — answer bank */
.iv-bank { display: flex; flex-direction: column; gap: 10px; }
.iv-bank-cat {
  border: 1px solid var(--nike-gray-1);
  border-radius: var(--radius);
  background: var(--nike-white);
  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(--nike-off); }
.iv-caret {
  display: inline-block;
  font-size: 12px;
  color: var(--nike-orange);
  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(--nike-gray-1);
  border-left: 3px solid var(--nike-black);
  border-radius: var(--radius-sm);
  background: var(--nike-off);
}
.iv-question-prompt {
  font-size: 14px;
  font-weight: 600;
  color: var(--nike-black);
  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(--nike-white);
  border: 1px dashed var(--nike-orange);
  color: var(--nike-orange);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}
.iv-question-pin:hover { background: var(--nike-orange); color: #fff; }
/* STAR answer cards */
.iv-answers { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.iv-answer {
  padding: 12px 14px;
  background: var(--nike-white);
  border: 1px solid var(--nike-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(--nike-gray-1);
}
.iv-answer-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--nike-black);
  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(--nike-gray-1);
  color: var(--nike-gray-3);
  font-size: 14px;
  cursor: pointer;
  border-radius: 3px;
}
.iv-answer-x:hover { background: var(--nike-orange); color: #fff; border-color: var(--nike-orange); }
.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(--nike-orange);
  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(--nike-white);
  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(--nike-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(--nike-orange);
  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(--nike-gray-3);
}
.iv-coach-outcomes {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--nike-gray-3);
}
.iv-coach-concepts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.iv-coach-concept {
  background: var(--nike-off);
  border-left: 3px solid var(--nike-orange);
  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(--nike-black);
}
.iv-coach-xrefs-hdr {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nike-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(--nike-black);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.iv-coach-xref-btn:hover { color: var(--nike-orange); }
.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(--nike-gray-3);
  cursor: pointer;
  border-radius: 4px;
}
.iv-modal-close:hover { background: var(--nike-off); color: var(--nike-black); }
.iv-modal-hdr { margin-right: 40px; }
.iv-modal-hdr .eyebrow { color: var(--nike-orange); }
.iv-modal-title {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--nike-black);
}
.iv-star-guide {
  padding: 12px 14px;
  border-left: 3px solid var(--nike-orange);
  background: var(--nike-off);
  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(--nike-orange);
  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(--nike-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(--nike-gray-3);
}
.iv-modal-label input,
.iv-modal-label select,
.iv-modal-label textarea {
  padding: 8px 10px;
  border: 1px solid var(--nike-gray-1);
  border-radius: var(--radius-sm);

  font: inherit;
  font-size: 13px;
  color: var(--nike-black);
  background: var(--nike-white);
  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(--nike-orange);
}
.iv-modal-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--nike-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 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;
  }

  /* 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(--nike-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(--nike-white);
  border: 1px solid var(--nike-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(--nike-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(--nike-gray-1);
  font-family: var(--nike-font);
  font-size: 13px;
  color: var(--nike-black);
  background: var(--nike-white);
  border-radius: var(--radius-sm);
}
.tk-upload-label input[type="url"]:focus {
  border-color: var(--nike-black);
  outline: none;
}
.tk-jd-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--nike-gray-1);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--nike-black);
  background: var(--nike-off);
  resize: vertical;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
}
.tk-jd-input:focus { border-color: var(--nike-black); outline: none; background: var(--nike-white); }
.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(--nike-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(--nike-black);
  color: var(--nike-white);
}
.tk-btn-primary:hover:not(:disabled) { background: var(--nike-orange); }
.tk-btn-secondary {
  background: var(--nike-white);
  color: var(--nike-black);
  border-color: var(--nike-black);
}
.tk-btn-secondary:hover:not(:disabled) {
  background: var(--nike-black);
  color: var(--nike-white);
}
.tk-btn-ghost {
  background: transparent;
  color: var(--nike-gray-3);
  border-color: var(--nike-gray-1);
}
.tk-btn-ghost:hover:not(:disabled) {
  color: var(--nike-black);
  border-color: var(--nike-black);
}
.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(--nike-orange);
  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(--nike-gray-1);
  font-family: var(--nike-font);
  font-size: 13px;
  min-width: 240px;
  border-radius: var(--radius-sm);
}
.tk-search:focus { border-color: var(--nike-black); outline: none; }
.tk-filters select {
  padding: 8px 10px;
  border: 1px solid var(--nike-gray-1);
  font-family: var(--nike-font);
  font-size: 13px;
  background: var(--nike-white);
  color: var(--nike-black);
  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(--nike-gray-1);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.tk-mode-btn {
  padding: 8px 12px;
  border: none;
  background: var(--nike-white);
  color: var(--nike-gray-3);
  font-family: var(--nike-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(--nike-gray-1);
}
.tk-mode-btn:hover {
  color: var(--nike-black);
}
.tk-mode-btn.is-active {
  background: var(--nike-black);
  color: var(--nike-white);
}
.tk-empty {
  padding: 40px 20px;
  text-align: center;
  border: 1px dashed var(--nike-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(--nike-white);
  border: 1px solid var(--nike-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(--nike-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(--nike-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(--nike-font);
  color: var(--nike-black);
  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(--nike-off);
}
.tk-day-col.is-selected {
  border-bottom-color: var(--nike-orange);
  background: rgba(250, 84, 0, 0.06);
}
.tk-day-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--nike-gray-3);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tk-day-col.is-selected .tk-day-count {
  color: var(--nike-orange);
}
.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(--nike-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(--nike-black);
}
.tk-metric-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nike-black);
  font-family: var(--nike-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(--nike-black);
  cursor: pointer;
  text-align: left;
  font-family: var(--nike-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(--nike-gray-2);
}
.tk-heat-cell.is-selected {
  border-color: var(--nike-orange);
  box-shadow: inset 3px 0 0 var(--nike-orange);
}
.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(--nike-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(--nike-off);
}
.tk-metric-row.is-selected {
  border-left-color: var(--nike-orange);
  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(--nike-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.tk-metric-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--nike-gray-3);
  flex-shrink: 0;
}
.tk-metric-bar {
  height: 6px;
  background: var(--nike-gray-1);
  border-radius: 2px;
  overflow: hidden;
}
.tk-metric-bar-fill {
  height: 100%;
  background: var(--nike-orange);
  border-radius: 2px;
  min-width: 2px;
  transition: width 160ms ease;
}
.tk-metric-empty {
  margin: 0;
  font-size: 12px;
}
.tk-card {
  background: var(--nike-white);
  border: 1px solid var(--nike-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(--nike-gray-2);
}
.tk-card.tk-stale {
  border-left: 3px solid var(--nike-orange);
}
.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(--nike-gray-1, #ddd);
  background: var(--nike-white, #fff);
  color: var(--nike-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(--nike-gray-3, #888);
  background: var(--nike-off, #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.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 260;
  padding: 20px;
}
.tk-cov-modal {
  background: var(--nike-white, #fff);
  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.22);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.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;
}
.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;
  opacity: 0.72;
  transition: opacity 120ms ease;
}
.tk-cov-section.is-focus { opacity: 1; }
.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(--nike-gray-3, #666);
}
.tk-cov-covered { color: var(--nike-gray-3, #666); }
.tk-cov-modal-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--nike-gray-1, #e5e5e5);
}

.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;
}
.tk-coverage-gaps {
  border-left: 2px solid #c62828;
  background: rgba(198, 40, 40, 0.06);
}
.tk-coverage-extras {
  border-left: 2px solid var(--nike-orange, #fa5400);
  background: rgba(250, 84, 0, 0.06);
}
.tk-coverage-nice,
.tk-coverage-duties {
  border-left: 2px solid var(--nike-gray-1, #ccc);
  background: var(--nike-off, #fafafa);
}
.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(--nike-black);
  text-transform: none;
  letter-spacing: -0.005em;
  font-family: var(--nike-font);
}
.tk-card-company {
  margin: 0;
  font-size: 13px;
  color: var(--nike-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(--nike-black);
}
.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(--nike-gray-1);
  border-radius: var(--radius-pill);
  color: var(--nike-gray-3);
  background: var(--nike-off);
  line-height: 1.4;
}
.tk-chip-kw {
  background: transparent;
  border-color: var(--nike-gray-1);
  color: var(--nike-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(--nike-orange);
  background: rgba(250, 84, 0, 0.06);
  font-size: 12px;
  color: var(--nike-gray-3);
}
.tk-card-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--nike-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(--nike-gray-3);
  font-weight: 600;
  min-width: 0;
}
.tk-status-select select {
  padding: 6px 8px;
  border: 1px solid var(--nike-gray-1);
  font-family: var(--nike-font);
  font-size: 12.5px;
  background: var(--nike-white);
  min-width: 0;
  width: 100%;
  border-radius: var(--radius-sm);
}
.tk-angle-hint {
  margin: 0;
  font-size: 11px;
  color: var(--nike-gray-3);
}
.tk-angle-resolved {
  color: var(--nike-orange);
  font-weight: 600;
}
.tk-detail-hint {
  margin-top: 4px;
  font-size: 11px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--nike-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(--nike-gray-1);
  border-radius: var(--radius-pill);
  color: var(--nike-gray-3);
  background: var(--nike-off);
  white-space: nowrap;
  flex-shrink: 0;
}
.tk-status-pill.st-neutral { background: var(--nike-off); color: var(--nike-gray-3); }
.tk-status-pill.st-waiting {
  background: var(--nike-off);
  color: var(--nike-gray-3);
  border-color: var(--nike-gray-2);
}
.tk-status-pill.st-active {
  background: rgba(250, 84, 0, 0.1);
  color: var(--nike-orange);
  border-color: var(--nike-orange);
}
.tk-status-pill.st-win {
  background: var(--nike-black);
  color: var(--nike-white);
  border-color: var(--nike-black);
}
.tk-status-pill.st-closed {
  background: var(--nike-white);
  color: var(--nike-gray-2);
  border-color: var(--nike-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(--nike-white);
  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(--nike-gray-3);
  cursor: pointer;
  border-radius: 4px;
}
.tk-modal-close:hover { background: var(--nike-off); color: var(--nike-black); }
.tk-modal-hdr { margin-right: 40px; }
.tk-modal-hdr .eyebrow { color: var(--nike-orange); }
.tk-modal-title {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--nike-black);
  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(--nike-black);
  text-decoration: underline;
  white-space: nowrap;
}
.tk-modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--nike-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(--nike-gray-1);
  font-family: var(--nike-font);
  font-size: 13px;

  color: var(--nike-black);
  background: var(--nike-white);
  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(--nike-black);
  outline: none;
}
.tk-modal-field textarea { resize: vertical; font-family: var(--nike-font); line-height: 1.5; }
.tk-modal-notes textarea { min-height: 90px; }
.tk-modal-kw-block,
.tk-modal-activity {
  padding: 10px 12px;
  background: var(--nike-off);
  border-left: 3px solid var(--nike-black);
  font-size: 12.5px;
}
.tk-modal-kw-block .eyebrow,
.tk-modal-activity .eyebrow { color: var(--nike-gray-3); }
.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(--nike-gray-1);
}
.tk-modal-activity li:last-child { border-bottom: none; }
.tk-activity-file-link {
  font-weight: 600;
  color: var(--nike-black);
  text-decoration: underline;
}
.tk-modal-jd {
  border: 1px solid var(--nike-gray-1);
  padding: 10px 12px;
  background: var(--nike-off);
  font-size: 12px;
}
.tk-modal-jd summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--nike-gray-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.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(--nike-gray-3);
}
.tk-modal-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--nike-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(--nike-gray-1);
  font-family: var(--nike-font);
  font-size: 13px;
  line-height: 1.5;
  border-radius: var(--radius-sm);
  resize: vertical;
}
.tk-baseline-para textarea:focus { border-color: var(--nike-black); 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 dashed var(--nike-gray-1);
  border-radius: var(--radius-md);
  background: var(--nike-gray-0, #F5F5F5);
}
.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(--nike-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(--nike-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(--nike-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(--nike-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(--nike-gray-3);
  border: 1px dashed var(--nike-gray-1);
  border-radius: var(--radius-md);
  flex: 1 1 auto;
}
.tk-punch-table-wrap {
  overflow: auto;
  border: 1px solid var(--nike-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(--nike-gray-3);
  font-weight: 700;
  padding: 10px 10px;
  border-bottom: 1px solid var(--nike-gray-1);
  white-space: nowrap;
}
.tk-punch-row {
  cursor: pointer;
  border-bottom: 1px solid var(--nike-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(--nike-black);
  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(--nike-black);
  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(--nike-gray-1);
  border-radius: var(--radius);
  background: var(--nike-white);
  color: var(--nike-black);
  box-sizing: border-box;
}
.tk-punch-edit-textarea:focus {
  outline: none;
  border-color: var(--nike-black);
}
.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(--nike-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(--nike-gray-1);
  border-radius: var(--radius-md);
  background: var(--nike-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(--nike-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(--nike-black);
  box-shadow: 0 0 0 1px var(--nike-black);
}
/* 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(--nike-gray-1);
  flex-wrap: wrap;
}
.tk-fb-hdr input[type=checkbox] {
  width: 16px; height: 16px;
  accent-color: var(--nike-black);
}
.tk-fb-kind {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--nike-black);
  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(--nike-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: 96vw; }
}

/* ============================================================
   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: rgba(17, 17, 17, 0.55);
  /* 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: #fff;
  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 rgba(0, 0, 0, 0.25);
  position: relative;
}
.lint-summary {
  margin: 6px 0 0;
  font-size: 12px;
}
.lint-applied-chip { color: var(--nike-black); font-weight: 700; }
.lint-warn-inline { color: #B8590A; }
/* 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(--nike-gray-0, #F5F5F5);
  border: 1px solid var(--nike-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: #FDECEA;
  border: 1px solid #F5B7B1;
  border-radius: var(--radius-sm);
  color: #922B21;
  font-size: 12.5px;
}
/* Zero-hits happy path */

.lint-empty {
  padding: 24px 20px;
  text-align: center;
  border: 1px dashed var(--nike-gray-1);
  border-radius: var(--radius-md);
  background: #E8F5E9;
}
.lint-empty-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  color: #2E7D32;
}
/* One card per hit */
.lint-hit {
  border: 1px solid var(--nike-gray-1);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fff;
  border-left-width: 4px;    /* accent stripe carries severity color */
}
.lint-hit.lint-sev-error       { border-left-color: #C0392B; background: #FDF3F2; }
.lint-hit.lint-sev-warning     { border-left-color: #FA5400; background: #FFF7F1; }
.lint-hit.lint-sev-suggestion  { border-left-color: #5D8AA8; background: #F4F7FA; }
.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: #fff;
}
.lint-sev-chip.lint-sev-error      { background: #C0392B; }
.lint-sev-chip.lint-sev-warning    { background: #FA5400; }
.lint-sev-chip.lint-sev-suggestion { background: #5D8AA8; }
.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(--nike-gray-3, #575757);
  margin-bottom: 8px;
}
.lint-hit-match code {
  background: #fff2e0;
  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(--nike-gray-1);
  border-radius: var(--radius-md);
  background: #FAFAFA;
}
.tk-modal-snippets .eyebrow {
  margin-bottom: 8px;
}
/* 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(--nike-black);
  border-radius: var(--radius-sm);
  background: #fff;
  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(--nike-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(--nike-black);
}
.tk-snip-override-text {
  flex: 1;
  color: var(--nike-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(--nike-orange, #FA5400);
  font-weight: 600;
}
.tk-snip-empty {
  font-size: 12.5px;
  line-height: 1.55;
  padding: 10px 12px;
  border: 1px dashed var(--nike-gray-1);
  border-radius: var(--radius-sm);
  background: #fff;
}
.tk-snip-error {
  color: #B71C1C;
  font-size: 12.5px;
  padding: 6px 0;
}
/* Suggestion card */
.tk-snip-card {
  background: #fff;
  border: 1px solid var(--nike-gray-1);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: border-color 120ms ease;
}
.tk-snip-card:hover {
  border-color: var(--nike-black);
}
.tk-snip-card-hdr {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.tk-snip-star {
  color: var(--nike-orange, #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(--nike-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(--nike-gray-2, #b8b8b8);
  border-radius: 4px;
  background: #fff;
}
.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(--nike-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(--nike-orange, #FA5400);
}
.tk-fb-sidecar-toggle input[type=radio] {
  width: 15px; height: 15px;
  accent-color: var(--nike-orange, #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(--nike-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(--nike-gray-3, #575757);
}
.tk-fb-sidecar-field input[type=text] {
  padding: 5px 8px;
  border: 1px solid var(--nike-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(--nike-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(--nike-black);
  color: #fff;
  border-color: var(--nike-black);
}

/* ---- Career notes tab ---- */
.notes-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 20px;
  margin-top: 16px;
}
.notes-sidebar {
  border: 1px solid var(--nike-gray-2, #ddd);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  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(--nike-gray-2, #ddd);
  border-radius: 6px;
  padding: 10px;
  background: #fafafa;
  cursor: pointer;
}
.notes-list-item.is-active {
  border-color: var(--nike-orange, #fa5400);
  background: #fff7f2;
}
.notes-list-title {
  font-weight: 600;
  font-size: 13px;
}
.notes-list-meta {
  font-size: 11px;
  margin-top: 4px;
}
.notes-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.notes-composer,
.notes-detail {
  border: 1px solid var(--nike-gray-2, #ddd);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}
.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(--nike-gray-2, #ccc);
  border-radius: 6px;
}
.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(--nike-gray-2, #ccc);
  border-radius: 6px;
  background: #fff;
}
.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(--nike-gray-2, #ccc);
  border-radius: 6px;
}
.notes-error {
  color: #b00020;
  font-size: 13px;
}

/* 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(--nike-font-condensed);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--nike-black);
  }
  .notes-filter-row {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 4px 0 8px;
    background: var(--nike-white);
  }
  .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(--nike-gray-2, #ddd);
  border-radius: 8px;
  margin-bottom: 4px;
  background: #fafafa;
}
.tk-cover-ai-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}
.tk-cover-ai-summary::-webkit-details-marker {
  display: none;
}
.tk-cover-ai-summary::before {
  content: "▸";
  margin-right: 8px;
  color: var(--nike-gray-3, #666);
  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;
}
.tk-cover-ai-inner {
  padding: 0 12px 12px;
  border-top: 1px solid var(--nike-gray-1);
}
.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(--nike-gray-1);
  border-radius: var(--radius-sm);
  background: var(--nike-white);
  margin-bottom: 10px;
}
.tk-cover-note-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--nike-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(--nike-black);
}
.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; }
}