/* ============================================================
   Direction D re-skin — Step 6: Navigate (Job market).
   Overrides career/navigate/css/navigate.css (loaded before this) to the
   terminal aesthetic. dd-chrome.js injects the top bar / step nav / progress /
   footer, so the page's own header + footer are hidden here. ALL existing
   markup, ids, and JS hooks (tracker CRUD, modal focus-trap, CSV export,
   salary-band render) are preserved — this layer is purely presentational.
   Mirrors career/css/dd-hub.css patterns verbatim where they apply.
   ============================================================ */

/* ---- full-bleed terminal layout ---- */
main { display: block; }
.container { max-width: none !important; margin: 0 !important; padding: 0 !important; }
section { border-top: 1px solid var(--line); background: transparent !important; }
.content-section, .content-section--alt, .hero, .quick-nav, .nav-footer {
  background: transparent !important;
}
.hero { border-top: none; }
.content-section > .container,
.quick-nav > .container,
.nav-footer > .container { padding: 48px 44px !important; }

/* ============ HERO ============ */
.hero { padding: 0 !important; color: var(--fg); }
.hero::before { display: none !important; }
.hero__content { max-width: none !important; margin: 0 !important; padding: 54px 44px !important; }
.hero__breadcrumb { font-family: var(--font-mono); font-size: 11px; color: var(--faint) !important; }
.hero__breadcrumb a { color: var(--dim) !important; }
.hero__breadcrumb a:hover { color: var(--fg) !important; }
.hero__breadcrumb svg { stroke: var(--faint) !important; }
.hero__badge {
  display: inline-block; background: transparent !important; color: var(--faint) !important;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  padding: 0 !important; margin-bottom: 20px; text-transform: none; border: none !important; border-radius: 8px !important;
}
.hero__badge::before { content: "// step_06 :: navigate \2014 job_market"; color: var(--red); }
.hero__badge { font-size: 0 !important; }            /* hide the literal "Step 6: Navigate" text */
.hero__badge::before { font-size: 11px; }
.hero__title {
  font-family: var(--font-sans) !important; font-size: clamp(34px,5vw,50px); line-height: 1.18;
  font-weight: 600; letter-spacing: -0.025em; color: var(--fg) !important; margin: 0 0 20px; max-width: 620px;
}
.hero__subtitle {
  font-family: var(--font-mono) !important; font-size: 14.5px; line-height: 1.7;
  color: var(--dim) !important; max-width: 620px;
}
.hero__subtitle::before { content: "# "; }

/* ============ QUICK NAV ============ */
.quick-nav { position: static !important; box-shadow: none !important; }
.quick-nav__grid {
  display: grid !important; grid-template-columns: repeat(5,1fr); gap: 0 !important;
  border: 1px solid var(--line); max-width: none !important;
}
.quick-nav__item {
  border: none !important; border-right: 1px solid var(--line) !important;
  /* D7 (RO2-4): same notch mechanism, horizontal instead of vertical --
     .quick-nav__grid is a square-bordered box (no radius). */
  border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--dim) !important;
  padding: 18px 14px !important; flex-direction: column; gap: 10px;
}
.quick-nav__item:last-child { border-right: none !important; }
.quick-nav__item:hover { background: var(--surface) !important; transform: none !important; color: var(--fg) !important; }
.quick-nav__icon { color: var(--red) !important; background: transparent !important; border: none !important; width: auto !important; height: auto !important; }
.quick-nav__label { font-family: var(--font-mono); color: inherit !important; }

/* ============ SECTION HEADERS ============ */
.section-header { text-align: left !important; }
.section-number {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--red) !important;
  background: transparent !important; padding: 0 !important; border-radius: 8px !important;
  display: block; margin-bottom: 12px;
}
.section-number::before { content: "// "; }
.section-title {
  font-family: var(--font-sans) !important; font-size: clamp(26px,3.4vw,38px); font-weight: 600;
  letter-spacing: -0.02em; color: var(--fg) !important; margin: 0 0 10px;
}
.section-subtitle {
  font-family: var(--font-mono) !important; font-size: 13px; color: var(--dim) !important;
  line-height: 1.6; max-width: 640px; margin: 0 !important;
}

/* ============ SUBSECTIONS → bordered prep panels ============ */
.subsection {
  border: 1px solid var(--line); background: var(--cardbg) !important; padding: 24px 26px !important;
  margin-bottom: 22px !important; border-radius: 8px !important;
}
.subsection-title {
  font-family: var(--font-mono) !important; font-size: 12px; letter-spacing: 0.06em;
  color: var(--red) !important; text-transform: lowercase;
  border-bottom: 1px solid var(--line) !important; padding-bottom: 14px; margin-bottom: 20px;
}
.subsection-title::before { content: "> "; color: var(--red); }
.subsection-title svg { color: var(--red) !important; }

/* ============ JOB SEARCH — resource cards ============ */
.resource-cards {
  display: grid !important; grid-template-columns: repeat(3,1fr); gap: 0 !important;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.resource-card {
  border: none !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  background: var(--cardbg) !important; border-radius: 8px !important; box-shadow: none !important;
  padding: 20px !important; font-family: var(--font-mono); transition: background 150ms !important;
}
.resource-card:hover { background: var(--surface) !important; transform: none !important; box-shadow: none !important; border-color: var(--line) !important; }
.resource-card--featured { border-top: none !important; }
.resource-card__badge {
  position: static !important; background: transparent !important; color: var(--green) !important;
  border: 1px solid var(--line) !important; border-radius: 8px !important;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; padding: 3px 8px !important;
  align-self: flex-start; margin-bottom: 12px; text-transform: uppercase;
}
.resource-card__icon { color: var(--red) !important; background: transparent !important; border: none !important; width: auto !important; height: auto !important; }
.resource-card__title { font-family: var(--font-sans) !important; font-size: 15px; font-weight: 600; color: var(--fg) !important; letter-spacing: -0.01em; }
.resource-card__desc { font-family: var(--font-mono); font-size: 12.5px; color: var(--dim) !important; line-height: 1.55; }
.resource-card__link, .resource-card__arrow { color: var(--red) !important; font-family: var(--font-mono); font-size: 11px; }
.resource-card__link svg, .resource-card__arrow svg { stroke: var(--red) !important; }

/* compact variant → list rows */
.resource-cards--compact {
  display: grid !important; grid-template-columns: repeat(2,1fr); gap: 0 !important;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.resource-card--compact { border-radius: 8px !important; padding: 16px 18px !important; }
.resource-card--compact .resource-card__title { font-size: 14px; }
.resource-card--compact .resource-card__desc { font-size: 12px; }

/* ============ EMPLOYER GRID ============ */
.employer-grid {
  display: grid !important; grid-template-columns: repeat(5,1fr); gap: 0 !important;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.employer-category {
  border: none !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  background: var(--cardbg) !important; border-radius: 8px !important; padding: 18px !important;
}
.employer-category__title { font-family: var(--font-mono) !important; font-size: 10px; letter-spacing: 0.1em; color: var(--red) !important; text-transform: uppercase; }
.employer-category__list { font-family: var(--font-mono); }
.employer-category__list li { color: var(--dim) !important; font-size: 13px; }
.employer-category__list li::before { content: "\2192  "; color: var(--red); }

/* ============ RESUME / ATS / TEMPLATES ============ */
.two-column { gap: 0 !important; }
.tips-card {
  background: transparent !important; border: 1px solid var(--line) !important; border-radius: 8px !important;
  box-shadow: none !important; padding: 0 !important;
}
.tips-card + .tips-card { border-left: none !important; }
.tips-card__title {
  font-family: var(--font-mono) !important; font-size: 12px; letter-spacing: 0.06em; color: var(--red) !important;
  text-transform: lowercase; border-bottom: 1px solid var(--line) !important; padding: 18px 22px !important; margin: 0 !important;
}
.tips-card__icon { color: var(--red) !important; background: transparent !important; }
.tips-list { padding: 18px 22px !important; }
.tips-list__item { border: none !important; }
.tips-list__number {
  font-family: var(--font-mono) !important; background: transparent !important; color: var(--red) !important;
  border: 1px solid var(--red) !important; border-radius: 50% !important;
}
.tips-list__content strong { font-family: var(--font-sans) !important; color: var(--fg) !important; }
.tips-list__content p { font-family: var(--font-mono); font-size: 13px; color: var(--dim) !important; }

.ats-tips { padding: 18px 22px 0 !important; }
.ats-tip { background: transparent !important; border: 1px solid var(--line) !important; border-radius: 8px !important; }
.ats-tip__title { font-family: var(--font-mono) !important; letter-spacing: 0.1em; }
.ats-tip--do .ats-tip__title { color: var(--green) !important; }
.ats-tip--dont .ats-tip__title { color: var(--red) !important; }
.ats-tip__list { font-family: var(--font-mono); }
.ats-tip__list li { color: var(--dim) !important; font-size: 13px; }
.ats-tip--do .ats-tip__list li::before { color: var(--green) !important; }
.ats-tip--dont .ats-tip__list li::before { color: var(--red) !important; }
.nice-link-box {
  margin: 18px 22px 22px !important; background: transparent !important;
  border: 1px solid var(--line) !important; border-radius: 8px !important;
}
.nice-link-box__icon { color: var(--red) !important; }
.nice-link-box__content h4 { font-family: var(--font-sans) !important; color: var(--fg) !important; }
.nice-link-box__content p { font-family: var(--font-mono); font-size: 13px; color: var(--dim) !important; }
.nice-link-box__btn {
  background: var(--btn) !important; color: var(--btnfg) !important; border: none !important; border-radius: 8px !important;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em;
}
.nice-link-box__btn svg { stroke: var(--btnfg) !important; }

.cover-letter-section { border: 1px solid var(--line); background: var(--cardbg) !important; padding: 24px 26px !important; margin-bottom: 22px; }
.template-grid {
  display: grid !important; grid-template-columns: repeat(4,1fr); gap: 0 !important;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.template-card {
  border: none !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  background: transparent !important; border-radius: 8px !important; box-shadow: none !important; padding: 18px !important;
}
.template-card:hover { transform: none !important; box-shadow: none !important; background: var(--surface) !important; }
.template-card__icon { color: var(--red) !important; background: transparent !important; }
.template-card__title { font-family: var(--font-sans) !important; color: var(--fg) !important; font-size: 14px; }
.template-card__desc { font-family: var(--font-mono); font-size: 12.5px; color: var(--dim) !important; }
.template-card__key-points { font-family: var(--font-mono); }
.template-card__key-points span { color: var(--green) !important; font-size: 10px; }

/* ============ INTERVIEW PREP — tabs / panels / questions ============ */
.role-tabs { border-bottom: 1px solid var(--line) !important; gap: 0 !important; }
.role-tab {
  font-family: var(--font-mono) !important; font-size: 12px; letter-spacing: 0.04em;
  background: transparent !important; color: var(--dim) !important; border: none !important;
  border-bottom: 2px solid transparent !important; border-radius: 8px !important; padding: 12px 16px !important;
}
.role-tab:hover { color: var(--fg) !important; background: transparent !important; }
.role-tab--active { color: var(--fg) !important; background: transparent !important; border-bottom-color: var(--red) !important; }

.question-list { display: grid; gap: 0 !important; border: 1px solid var(--line); }
.question-item {
  border: none !important; border-bottom: 1px solid var(--line) !important;
  /* D7 (RO2-4): .question-list is a square-bordered box (no radius), so
     rows get none either -- see dd-build.css .linkedin-step. */
  border-radius: 0 !important;
  background: var(--cardbg) !important; padding: 16px 18px !important; box-shadow: none !important;
}
.question-item:last-child { border-bottom: none !important; }
.question-item__q { font-family: var(--font-sans) !important; color: var(--fg) !important; font-size: 14px; }
.question-item__q::before { content: "$ "; color: var(--red); font-family: var(--font-mono); }
.question-item__hint { font-family: var(--font-mono); font-size: 13px; color: var(--dim) !important; background: transparent !important; border-left: 1px solid var(--red) !important; border-radius: 8px !important; }
.question-item__hint strong { color: var(--red) !important; }

/* assessment + STAR + questions-to-ask → red-arrow bullet panels */
.assessment-grid {
  display: grid !important; grid-template-columns: repeat(3,1fr); gap: 0 !important;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.assessment-card {
  border: none !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  background: var(--cardbg) !important; border-radius: 8px !important; box-shadow: none !important; padding: 20px !important;
}
.assessment-card__icon { color: var(--red) !important; background: transparent !important; }
.assessment-card__title { font-family: var(--font-sans) !important; color: var(--fg) !important; font-size: 14px; }
.assessment-card__desc { font-family: var(--font-mono); font-size: 12.5px; color: var(--dim) !important; }
.assessment-card__list { font-family: var(--font-mono); }
.assessment-card__list li { color: var(--dim) !important; font-size: 13px; }
.assessment-card__list li::before { content: "\2192  "; color: var(--red); }
.assessment-card__list a { color: var(--red) !important; }

.star-method { display: grid; gap: 0 !important; border: 1px solid var(--line); }
.star-step {
  border: none !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; /* D7 (RO2-4): .star-method is square-bordered */
  background: var(--cardbg) !important; padding: 18px !important;
}
.star-step:last-child { border-bottom: none !important; }
.star-step__letter {
  font-family: var(--font-mono) !important; background: transparent !important; color: var(--red) !important;
  border: 1px solid var(--red) !important; border-radius: 50% !important;
}
.star-step__content h4 { font-family: var(--font-sans) !important; color: var(--fg) !important; }
.star-step__content p { font-family: var(--font-mono); font-size: 13px; color: var(--dim) !important; }
.star-step__example { font-family: var(--font-mono); font-size: 13px; color: var(--green) !important; background: transparent !important; border-left: 1px solid var(--green) !important; border-radius: 8px !important; }

.questions-grid {
  display: grid !important; grid-template-columns: repeat(2,1fr); gap: 0 !important;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.questions-category {
  border: none !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  background: var(--cardbg) !important; border-radius: 8px !important; padding: 18px !important;
}
.questions-category h4 { font-family: var(--font-mono) !important; font-size: 10px; letter-spacing: 0.1em; color: var(--red) !important; text-transform: uppercase; }
.questions-category ul { font-family: var(--font-mono); }
.questions-category li { color: var(--dim) !important; font-size: 13px; list-style: none; }
.questions-category li::before { content: "\2192  "; color: var(--red); }

/* ============ SALARY & MARKET ============ */
.salary-resources {
  display: grid !important; grid-template-columns: repeat(3,1fr); gap: 0 !important;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.salary-card {
  border: none !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  background: var(--cardbg) !important; border-radius: 8px !important; box-shadow: none !important; padding: 20px !important;
}
.salary-card:hover { transform: none !important; box-shadow: none !important; background: var(--surface) !important; }
.salary-card--featured { border-top: none !important; }
.salary-card__icon { color: var(--red) !important; background: transparent !important; }
.salary-card__title { font-family: var(--font-sans) !important; color: var(--fg) !important; font-size: 15px; }
.salary-card__desc { font-family: var(--font-mono); font-size: 12.5px; color: var(--dim) !important; }
.salary-card__badge { font-family: var(--font-mono); font-size: 9px; color: var(--green) !important; background: transparent !important; border: 1px solid var(--line) !important; border-radius: 8px !important; }

.salary-bands__intro { font-family: var(--font-mono); font-size: 13px; color: var(--dim) !important; }
.salary-bands {
  display: grid !important; grid-template-columns: repeat(3,1fr); gap: 0 !important;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.salary-band {
  border: none !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  background: var(--cardbg) !important; border-radius: 8px !important; padding: 18px !important; font-family: var(--font-mono);
}
.salary-band__title { font-family: var(--font-sans) !important; color: var(--fg) !important; font-size: 14px; }
.salary-band__level { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--faint) !important; }
.salary-band__low, .salary-band__high { font-family: var(--font-mono); color: var(--green) !important; font-size: 12px; }
/* DD salary band: track --line2, range band border + fill --red low-opacity, median marker --green */
.salary-band__bar {
  background: var(--line2) !important; border: 1px solid var(--red) !important; border-radius: 8px !important;
  height: 8px !important;
  background-image: linear-gradient(90deg, rgba(255,42,26,0.18), rgba(255,42,26,0.18)) !important;
  position: relative;
}
.salary-band__mid-marker {
  position: absolute; top: -2px; bottom: -2px; left: 50%; width: 2px;
  background: var(--green) !important; transform: translateX(-50%);
}
.salary-band__mid { font-family: var(--font-mono); font-size: 12px; color: var(--dim) !important; }
.salary-band__source { line-height: 1.65; font-family: var(--font-mono); font-size: 10px; color: var(--faint) !important; border-top: 1px solid var(--line) !important; }
.salary-bands__note { font-family: var(--font-mono); font-size: 13px; color: var(--dim) !important; background: transparent !important; border: 1px solid var(--line) !important; border-radius: 8px !important; }
.salary-bands__note--warn { border-left: 2px solid var(--red) !important; }

.market-highlights {
  display: grid !important; grid-template-columns: repeat(2,1fr); gap: 0 !important;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.market-highlight {
  border: none !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  background: var(--cardbg) !important; border-radius: 8px !important; padding: 18px !important;
}
.market-highlight__icon { color: var(--red) !important; background: transparent !important; }
.market-highlight__content h4 { font-family: var(--font-sans) !important; color: var(--fg) !important; }
.market-highlight__content p { font-family: var(--font-mono); font-size: 13px; color: var(--dim) !important; }

/* Salary negotiation guide → bordered panel + red-arrow checklist */
.negotiation-content { gap: 0 !important; }
.negotiation-tips { display: grid; gap: 0 !important; border: 1px solid var(--line); }
.negotiation-tip {
  border: none !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; /* D7 (RO2-4): .negotiation-tips is square-bordered */
  background: var(--cardbg) !important; padding: 16px 18px !important;
}
.negotiation-tip:last-child { border-bottom: none !important; }
.negotiation-tip h4 { font-family: var(--font-mono) !important; font-size: 12px; color: var(--red) !important; }
.negotiation-tip p { font-family: var(--font-mono); font-size: 13px; color: var(--dim) !important; }
.negotiation-checklist {
  border: 1px solid var(--line) !important; background: var(--cardbg) !important; border-radius: 8px !important; padding: 18px !important;
}
.negotiation-checklist h4 { font-family: var(--font-mono) !important; font-size: 11px; letter-spacing: 0.08em; color: var(--red) !important; text-transform: uppercase; }
.negotiation-checklist ul { font-family: var(--font-mono); }
.negotiation-checklist li { color: var(--dim) !important; font-size: 12px; list-style: none; }
.negotiation-checklist li::before { content: "\2192  "; color: var(--red); }

/* ============ SECURITY CLEARANCE ============ */
.clearance-levels {
  display: grid !important; grid-template-columns: repeat(2,1fr); gap: 0 !important;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.clearance-card {
  border: none !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  background: var(--cardbg) !important; border-radius: 8px !important; box-shadow: none !important; padding: 20px !important;
}
.clearance-card__level {
  font-family: var(--font-mono) !important; background: transparent !important; color: var(--red) !important;
  border: 1px solid var(--line) !important; border-radius: 8px !important; letter-spacing: 0.06em;
}
.clearance-card__level--secret, .clearance-card__level--ts, .clearance-card__level--sci { color: var(--red) !important; }
.clearance-card__info h4 { font-family: var(--font-sans) !important; color: var(--fg) !important; }
.clearance-card__info p { font-family: var(--font-mono); font-size: 13px; color: var(--dim) !important; }
.clearance-card__timeline { font-family: var(--font-mono); font-size: 11px; color: var(--faint) !important; }
.clearance-card__timeline strong { color: var(--red) !important; }

.sf86-intro, .sf86-intro p { font-family: var(--font-mono); font-size: 13px; color: var(--dim) !important; }
.sf86-intro strong { color: var(--fg) !important; }
.sf86-grid {
  display: grid !important; grid-template-columns: repeat(3,1fr); gap: 0 !important;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.sf86-category {
  border: none !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  background: var(--cardbg) !important; border-radius: 8px !important; padding: 18px !important;
}
.sf86-category h4 { font-family: var(--font-mono) !important; font-size: 10px; letter-spacing: 0.1em; color: var(--red) !important; text-transform: uppercase; }
.sf86-category ul { font-family: var(--font-mono); }
.sf86-category li { color: var(--dim) !important; font-size: 12px; list-style: none; }
.sf86-category li::before { content: "\2192  "; color: var(--red); }
.sf86-warning { background: transparent !important; border: 1px solid var(--red) !important; border-radius: 8px !important; }
.sf86-warning__icon { color: var(--red) !important; }
.sf86-warning__content h4 { font-family: var(--font-sans) !important; color: var(--fg) !important; }
.sf86-warning__content p { font-family: var(--font-mono); font-size: 13px; color: var(--dim) !important; }

.concerns-grid {
  display: grid !important; grid-template-columns: repeat(2,1fr); gap: 0 !important;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.concern-card {
  border: none !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  background: var(--cardbg) !important; border-radius: 8px !important; box-shadow: none !important; padding: 18px !important;
}
.concern-card h4 { font-family: var(--font-mono) !important; font-size: 12px; color: var(--red) !important; }
.concern-card p { font-family: var(--font-mono); font-size: 13px; color: var(--dim) !important; }
.concern-card strong { color: var(--fg) !important; }

/* ============ JOB APPLICATION TRACKER (Store-backed core feature) ============ */
.job-tracker {
  background: transparent !important; border: 1px solid var(--line) !important; border-radius: 8px !important;
  box-shadow: none !important; padding: 0 !important;
}
.job-tracker__bar { padding: 18px 20px !important; border-bottom: 1px solid var(--line); margin-bottom: 0 !important; }
.job-tracker__count { font-family: var(--font-mono) !important; font-size: 12px; color: var(--fg) !important; font-weight: 400; }
.job-tracker__count::before { content: "$ "; color: var(--red); }
.btn-track {
  font-family: var(--font-mono) !important; font-size: 11px; letter-spacing: 0.05em;
  background: transparent !important; color: var(--fg) !important; border: 1px solid var(--line) !important; border-radius: 8px !important;
}
.btn-track:hover:not(:disabled) { background: var(--surface) !important; border-color: var(--line) !important; color: var(--fg) !important; }
.btn-track--primary { background: var(--btn) !important; color: var(--btnfg) !important; border: none !important; }
.btn-track--primary:hover:not(:disabled) { background: var(--btn) !important; filter: brightness(1.1); }

.job-list { gap: 0 !important; padding: 0 !important; }
.job-row {
  border: none !important; border-bottom: 1px solid var(--line) !important;
  /* D7 (RO2-4): .job-tracker (the parent) has its own 8px radius and no
     padding, so the last row sat flush against its rounded bottom corner --
     round only the group's outer corners, not every row. */
  border-radius: 0 !important;
  background: var(--cardbg) !important; padding: 16px 20px !important; font-family: var(--font-mono);
}
.job-row:first-child { border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; }
.job-row:last-child { border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; }
.job-row__company { font-family: var(--font-sans) !important; color: var(--fg) !important; font-weight: 600; }
.job-row__role { font-family: var(--font-mono); font-size: 13px; color: var(--dim) !important; }
.job-row__notes { font-family: var(--font-mono); font-size: 12px; color: var(--faint) !important; }
.job-row__date { font-family: var(--font-mono); font-size: 10px; color: var(--faint) !important; }
/* DD segmented / mono stage chips */
.job-stage {
  font-family: var(--font-mono) !important; font-size: 9px; letter-spacing: 0.08em;
  background: transparent !important; border: 1px solid var(--line) !important; border-radius: 8px !important;
  padding: 3px 9px !important; text-transform: uppercase;
}
.job-stage--applied { color: var(--faint) !important; border-color: var(--line) !important; }
.job-stage--screen  { color: var(--dim) !important; border-color: var(--line) !important; }
.job-stage--onsite  { color: var(--red) !important; border-color: var(--red) !important; }
.job-stage--offer   { color: var(--green) !important; border-color: var(--green) !important; }
.job-row__btn {
  font-family: var(--font-mono) !important; font-size: 10px; background: transparent !important;
  color: var(--dim) !important; border: 1px solid var(--line) !important; border-radius: 8px !important;
}
.job-row__btn:hover { color: var(--fg) !important; border-color: var(--line) !important; }
.job-row__btn--danger:hover { color: var(--red) !important; border-color: var(--red) !important; }
.job-empty {
  background: transparent !important; border: 1px dashed var(--line) !important; border-radius: 8px !important;
  color: var(--faint) !important; font-family: var(--font-mono); margin: 16px 20px; padding: 28px !important;
}

/* ============ ADD / EDIT MODAL (hub modal pattern) ============ */
.modal-overlay { background: rgba(0,0,0,0.74) !important; }
.modal {
  background: var(--bg) !important; border: 1px solid var(--line) !important; border-radius: 8px !important;
  color: var(--fg) !important; font-family: var(--font-sans) !important; box-shadow: none !important;
  background-image: repeating-linear-gradient(to bottom,var(--scan) 0,var(--scan) 1px,transparent 1px,transparent 3px) !important;
}
.modal h1, .modal h2, .modal h3, .modal__title { color: var(--fg) !important; font-family: var(--font-sans) !important; }
.modal__close { color: var(--faint) !important; }
.modal__close:hover { color: var(--fg) !important; }
#jobModal .modal__header { border-bottom: 1px solid var(--line) !important; }
#jobModal .modal__footer { background: transparent !important; border-top: 1px solid var(--line) !important; }
#jobModal .form-label { font-family: var(--font-mono) !important; font-size: 10px; letter-spacing: 0.08em; color: var(--faint) !important; text-transform: uppercase; }
#jobModal .form-input, #jobModal .form-select {
  background: var(--cardbg) !important; color: var(--fg) !important; border: 1px solid var(--line) !important; border-radius: 8px !important;
  font-family: var(--font-mono) !important; font-size: 14px;
}
#jobModal .form-input:focus, #jobModal .form-select:focus { outline: none; border-color: var(--red) !important; box-shadow: 0 0 0 1px var(--red) !important; }

/* ============ NAV FOOTER ============ */
.nav-footer { border-top: 1px solid var(--line); }
.nav-footer__content {
  display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 0 !important;
  border: 1px solid var(--line);
}
.nav-footer__btn, .nav-footer__completion {
  border: none !important; border-right: 1px solid var(--line) !important; border-radius: 8px !important;
  background: transparent !important; box-shadow: none !important; padding: 20px !important;
}
.nav-footer__completion { border-right: none !important; }
.nav-footer__btn:hover { transform: none !important; box-shadow: none !important; background: var(--surface) !important; }
.nav-footer__btn svg, .nav-footer__completion-icon { color: var(--red) !important; stroke: var(--red) !important; }
.nav-footer__btn-label, .nav-footer__completion-subtitle { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--faint) !important; }
.nav-footer__btn-title, .nav-footer__completion-title { font-family: var(--font-sans) !important; color: var(--fg) !important; }

/* ============ RESPONSIVE (mirrors dd.css breakpoints) ============ */
@media (max-width: 980px) {
  .quick-nav__grid { grid-template-columns: repeat(5,1fr); }
  .resource-cards, .salary-resources, .assessment-grid, .sf86-grid, .salary-bands { grid-template-columns: 1fr 1fr; }
  .template-grid { grid-template-columns: 1fr 1fr; }
  .employer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 760px) {
  .content-section > .container, .quick-nav > .container, .nav-footer > .container { padding: 32px 18px !important; }
  .hero__content { padding: 38px 22px !important; }
  .quick-nav__grid { grid-template-columns: 1fr 1fr; }
  .resource-cards, .resource-cards--compact, .salary-resources, .assessment-grid, .sf86-grid,
  .salary-bands, .market-highlights, .questions-grid, .clearance-levels, .concerns-grid { grid-template-columns: 1fr; }
  .template-grid { grid-template-columns: 1fr 1fr; }
  .employer-grid { grid-template-columns: 1fr 1fr; }
  .two-column { display: block !important; }
  .tips-card + .tips-card { border-top: none !important; }
  .nav-footer__content { grid-template-columns: 1fr; }
  .nav-footer__btn, .nav-footer__completion { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
  .job-row { flex-direction: column; align-items: stretch; }
}
@media (max-width: 520px) {
  .quick-nav__grid { grid-template-columns: 1fr; }
  .template-grid, .employer-grid { grid-template-columns: 1fr; }
}

/* ---- lead verify fix (browser-caught): SF-86 clearance panel was a white box ---- */
.sf86-content, .sf86-content * { background-color: transparent !important; }
.sf86-content { border: 1px solid var(--line) !important; border-radius: 8px !important; color: var(--dim) !important; }
.sf86-content h1, .sf86-content h2, .sf86-content h3, .sf86-content h4 { color: var(--fg) !important; font-family: var(--font-sans) !important; }
.sf86-content a { color: var(--red) !important; }

/* Interview Practice launch card -> the integrated interview SPA at /interview/ */
.interview-launch { display:block; text-decoration:none; border:1px solid var(--red); background:var(--cardbg); padding:24px 26px; margin-bottom:28px; transition:box-shadow .15s ease, transform .15s ease; }
.interview-launch:hover { box-shadow:0 8px 28px rgba(0,0,0,0.3); transform:translateY(-1px); }
.interview-launch__badge { font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; color:var(--red); }
.interview-launch__title { font-family:var(--font-sans); font-size:22px; font-weight:600; color:var(--fg); margin:8px 0 8px; letter-spacing:-0.01em; }
.interview-launch__desc { font-family:var(--font-mono); font-size:13.5px; color:var(--dim); line-height:1.65; max-width:760px; margin:0; }