/* ============================================================
   Direction D re-skin — Career Launchpad HUB.
   Overrides career/css/styles.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 are preserved — this layer is purely presentational.
   ============================================================ */

/* ---- hide the old chrome (dd-chrome.js replaces it) ---- */
.header { display: none !important; }
body > footer.footer { display: none !important; }

/* ---- data cluster (export/import/clear), moved into dd-footer by
   dd-chrome.js (round 2C fix 2) — re-skinned compact/terminal, footer-
   appropriate weight; the elements/ids/handlers are untouched. ---- */
.dd-footer .footer__data-tools {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 !important; margin: 0 !important; border: none !important;
}
.dd-footer .data-tool-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--line); border-radius: 0;
  color: var(--faint); padding: 5px 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  transition: none;
}
.dd-footer .data-tool-btn svg { width: 12px; height: 12px; }
.dd-footer .data-tool-btn:hover { background: transparent; color: var(--fg); border-color: var(--fg); }
.dd-footer .data-tool-btn--danger:hover { color: var(--red); border-color: var(--red); }

/* ---- 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; }
.careers-section, .framework, .tools-section, .careers-section__header,
.careers-cta, .tools-grid, .tools-section__subtitle { background: transparent !important; }
.hero-dashboard { border-top: none; }
.careers-section > .container,
.framework > .container,
.tools-section > .container { padding: 48px 44px !important; }

/* ============ HERO + STATUS ============ */
.hero-dashboard { background: transparent !important; padding: 0 !important; color: var(--fg); }
.hero-dashboard__content {
  display: grid !important; grid-template-columns: 1.62fr 1fr;
  max-width: none !important; margin: 0 !important; padding: 0 !important; gap: 0 !important;
}
.hero-dashboard__main { padding: 54px 44px !important; border-right: 1px solid var(--line); }
.hero-dashboard__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: 22px; text-transform: none; border: none !important;
}
.hero-dashboard__badge::before { content: "$ "; color: var(--red); }
.hero-dashboard__title {
  font-family: var(--font-sans) !important; font-size: clamp(34px,5vw,50px); line-height: 1.02;
  font-weight: 600; letter-spacing: -0.025em; color: var(--fg) !important; margin: 0 0 20px; max-width: 620px;
}
.hero-dashboard__subtitle {
  font-family: var(--font-mono) !important; font-size: 14.5px; line-height: 1.7;
  color: var(--dim) !important; max-width: 520px;
}
.hero-dashboard__subtitle::before { content: "# "; }

/* how-it-works link — muted, sits under the subtitle, near the primary CTA
   in the status pane beside it. */
.hero-dashboard__how-link {
  display: inline-block; margin-top: 16px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--faint) !important; border-bottom: 1px solid var(--line); padding-bottom: 2px;
}
.hero-dashboard__how-link:hover { color: var(--fg) !important; border-bottom-color: var(--faint); }

/* status pane */
.status-card {
  padding: 40px 34px !important; background: transparent !important; border: none !important;
  font-family: var(--font-mono); box-shadow: none !important; border-radius: 0 !important;
}
.status-card__title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--faint) !important; text-transform: lowercase; margin-bottom: 14px; }
.status-card__title::before { content: "> "; color: var(--red); }
.status-card__message, .status-card__resume-label { color: var(--dim) !important; font-size: 14px; }
.status-card__cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--btn) !important; color: var(--btnfg) !important; border: none !important; border-radius: 0 !important;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; padding: 13px 22px; margin-top: 14px;
}
.status-card__domain-badge { font-family: var(--font-mono); color: var(--red) !important; background: transparent !important; border: none !important; padding: 0 !important; }
.status-card__change-btn { background: transparent !important; border: none !important; color: var(--faint) !important; text-decoration: underline; text-underline-offset: 3px; font-family: var(--font-mono); font-size: 12px; cursor: pointer; }
.status-card__stats { display: flex; gap: 28px; margin-top: 16px; }
.status-card__stat-value { font-family: var(--font-mono); font-size: 14px; color: var(--fg) !important; }
.status-card__stat-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--faint) !important; }
.status-card__next-step { margin-top: 22px; border: 1px solid var(--line); padding: 16px; background: transparent !important; }
.status-card__next-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--faint) !important; display: block; margin-bottom: 6px; }
.status-card__next-link { color: var(--fg) !important; border-bottom: 1px solid var(--red); font-family: var(--font-mono); font-size: 13px; }

/* ============ SECTION HEADERS ============ */
.careers-section__step-badge {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--red) !important;
  background: transparent !important; padding: 0 !important; text-transform: lowercase; display: block; margin-bottom: 12px;
}
.careers-section__step-badge::before { content: "// "; }
.careers-section__title, .framework__title, .tools-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;
}
.careers-section__subtitle, .tools-section__subtitle, .careers-section__source span, .careers-section__source {
  font-family: var(--font-mono) !important; font-size: 13px; color: var(--dim) !important; line-height: 1.6;
}

/* ============ CATALOG CONTROLS ============ */
.catalog__control-label, .catalog__facet-title, .catalog__facets-legend {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--faint) !important; text-transform: uppercase;
}
.catalog__facets { border: 1px solid var(--line); border-radius: 0 !important; background: transparent !important; }
.catalog__search-input, .catalog__select {
  background: var(--cardbg) !important; color: var(--fg) !important; border: 1px solid var(--line) !important; border-radius: 0 !important;
  font-family: var(--font-mono); font-size: 13px; padding: 10px 12px;
}
.facet-chip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  background: transparent !important; color: var(--dim) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; padding: 8px 14px;
}
.facet-chip--active, .facet-chip[aria-pressed="true"] { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }
.catalog__count { font-family: var(--font-mono); font-size: 11px; color: var(--faint) !important; }
.catalog__reset { font-family: var(--font-mono); font-size: 11px; color: var(--red) !important; background: transparent !important; border: none !important; cursor: pointer; }
.domain-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.domain-dot--grc{background:var(--dom-grc) !important} .domain-dot--architecture{background:var(--dom-architecture) !important}
.domain-dot--threatVuln{background:var(--dom-threatVuln) !important} .domain-dot--secops{background:var(--dom-secops) !important} .domain-dot--ot{background:var(--dom-ot) !important}

/* compare tray */
.compare-tray { background: var(--cardbg) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; font-family: var(--font-mono); font-size: 12px; color: var(--dim) !important; }
.compare-tray__btn { background: var(--btn) !important; color: var(--btnfg) !important; border: none !important; border-radius: 0 !important; font-family: var(--font-mono); font-size: 11px; padding: 9px 16px; }
.compare-tray__clear { background: transparent !important; color: var(--faint) !important; border: none !important; font-family: var(--font-mono); }

/* ============ ROLE CARDS (catalog grid) ============ */
.catalog__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);
}
.role-card {
  border: none !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  background: var(--cardbg) !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 20px !important; font-family: var(--font-mono);
}
.role-card:hover { background: var(--surface) !important; transform: none !important; }
.role-card__domain-tag { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.04em; background: transparent !important; padding: 0 !important; }
.role-card__title { font-family: var(--font-sans) !important; font-size: 15.5px; font-weight: 600; color: var(--fg) !important; letter-spacing: -0.01em; }
.role-card__level { font-family: var(--font-mono); font-size: 9px; color: var(--faint) !important; }
.role-card__salary-value { color: var(--green) !important; font-family: var(--font-mono); font-size: 12.5px; }
.role-card__salary-src { color: var(--faint) !important; font-family: var(--font-mono); font-size: 8.5px; }
.role-card button, .role-card a { font-family: var(--font-mono); font-size: 10px; background: transparent !important; color: var(--red) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; padding: 6px 10px; }
.career-card__domain-tag--grc, .role-card__domain-tag--grc{color:var(--dom-grc) !important}
.career-card__domain-tag--architecture, .role-card__domain-tag--architecture{color:var(--dom-architecture) !important}
.career-card__domain-tag--threatVuln, .role-card__domain-tag--threatVuln{color:var(--dom-threatVuln) !important}
.career-card__domain-tag--secops, .role-card__domain-tag--secops{color:var(--dom-secops) !important}
.career-card__domain-tag--ot, .role-card__domain-tag--ot{color:var(--dom-ot) !important}

/* ============ MARKET STATS ============ */
.market-stats { background: transparent !important; border: 1px solid var(--line) !important; border-radius: 0 !important; padding: 0 !important; margin: 40px 0 0; }
.market-stats__title { font-family: var(--font-sans) !important; color: var(--fg) !important; padding: 24px 26px 0; }
.market-stats__note { color: var(--faint) !important; }
.market-stats__grid { display: grid !important; grid-template-columns: repeat(4,1fr); gap: 0 !important; border-top: 1px solid var(--line); }
.market-stat { border-right: 1px solid var(--line); padding: 28px 26px !important; background: transparent !important; }
.market-stat:last-child { border-right: none; }
.market-stat__value { font-family: var(--font-mono); font-size: 32px; font-weight: 500; color: var(--red) !important; letter-spacing: -0.02em; }
.market-stat__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--faint) !important; }

/* ============ CAREERS CTA ============ */
.careers-cta { margin-top: 36px; }
.careers-cta__btn { background: var(--btn) !important; color: var(--btnfg) !important; border: none !important; border-radius: 0 !important; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; padding: 14px 24px; }
.careers-cta__text { font-family: var(--font-mono); color: var(--dim) !important; }

/* ============ FRAMEWORK ============ */
.framework__steps { display: flex !important; border: 1px solid var(--line); gap: 0 !important; }
.step-card { flex: 1; border: none !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 22px 16px !important; }
.step-card:last-child { border-right: none !important; }
.step-card:hover { background: var(--surface) !important; transform: none !important; }
.step-card__number { width: 28px; height: 28px; border: 1px solid var(--red) !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--red) !important; background: transparent !important; margin-bottom: 12px; }
.step-card__title { font-family: var(--font-sans) !important; font-size: 14px; color: var(--fg) !important; font-weight: 600; }
.step-card__desc { font-family: var(--font-mono); font-size: 11px; color: var(--faint) !important; line-height: 1.45; }
.step-card__status { font-family: var(--font-mono); font-size: 9px; color: var(--faint) !important; background: transparent !important; border: none !important; padding: 0 !important; }
.step-card__status--active { color: var(--red) !important; }

/* ============ TOOLS ============ */
.tools-grid { display: block !important; border-top: 1px solid var(--line); }
.tool-card { display: flex !important; align-items: center; gap: 22px; border: none !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 20px 4px !important; }
.tool-card:hover { transform: none !important; background: var(--surface) !important; }
.tool-card__header { display: flex; align-items: center; gap: 12px; width: 290px; flex: none; border: none !important; }
.tool-card__icon { color: var(--red) !important; background: transparent !important; border: none !important; width: auto !important; height: auto !important; }
.tool-card__title { font-family: var(--font-sans) !important; font-size: 16px; color: var(--fg) !important; font-weight: 600; }
.tool-card__step-badge { font-family: var(--font-mono); font-size: 9px; color: var(--faint) !important; background: transparent !important; }
.tool-card__desc { font-family: var(--font-mono); font-size: 13px; color: var(--dim) !important; flex: 1; margin: 0 !important; }
.tool-card__status { display: flex; align-items: center; gap: 12px; flex: none; }
.tool-card__status-badge { font-family: var(--font-mono); font-size: 9px; color: var(--faint) !important; background: transparent !important; }
.tool-card__status-badge--new { color: var(--green) !important; }
.tool-card__btn { font-family: var(--font-mono); font-size: 11px; color: var(--red) !important; background: transparent !important; border: none !important; }

/* ============ MODALS ============ */
.modal-overlay { background: rgba(0,0,0,0.74) !important; }
.modal, .modal-overlay > * {
  background: var(--bg) !important; border: 1px solid var(--line) !important; border-radius: 0 !important;
  color: var(--fg) !important; font-family: var(--font-sans) !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 { color: var(--fg) !important; }
.domain-option { border: none !important; border-bottom: 1px solid var(--line) !important; background: transparent !important; border-radius: 0 !important; }
/* modal internals → DD accents (replace old gold/teal) */
.role-detail__title { color: var(--fg) !important; border-left-color: var(--red) !important; }
.role-detail__title::before { background: var(--red) !important; color: var(--red) !important; }
#roleModalBody a, .role-detail__step-link, .modal a, .modal__body a { color: var(--red) !important; }
.role-detail__chips > * { background: transparent !important; border: 1px solid var(--line) !important; color: var(--dim) !important; border-radius: 0 !important; font-family: var(--font-mono); font-size: 11px; }
.role-detail__certs { font-family: var(--font-mono); color: var(--red) !important; }
.role-detail__salary { background: transparent !important; border: 1px solid var(--line) !important; border-radius: 0 !important; }
.role-detail__salary-value { color: var(--green) !important; }
.role-detail__salary-mid { color: var(--fg) !important; }
.modal__footer { background: transparent !important; border-top-color: var(--line) !important; }
.modal__btn { border-radius: 0 !important; font-family: var(--font-mono) !important; }
.modal__btn--primary { background: var(--btn) !important; color: var(--btnfg) !important; border: none !important; }
.modal__btn--secondary { background: transparent !important; color: var(--fg) !important; border: 1px solid var(--line) !important; }
.modal__close { color: var(--faint) !important; }

/* ============ RESPONSIVE (hub-specific, mirrors dd.css breakpoints) ============ */
@media (max-width: 980px) {
  .hero-dashboard__content { grid-template-columns: 1fr; }
  .hero-dashboard__main { border-right: none; border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .careers-section > .container, .framework > .container, .tools-section > .container { padding: 32px 18px !important; }
  .hero-dashboard__main { padding: 38px 22px !important; }
  .catalog__grid { grid-template-columns: 1fr 1fr; }
  .market-stats__grid { grid-template-columns: 1fr 1fr; }
  .market-stat:nth-child(2) { border-right: none; }
  .framework__steps { flex-wrap: wrap; }
  .step-card { flex: 1 0 33%; border-bottom: 1px solid var(--line) !important; }
  .tool-card { flex-wrap: wrap; }
  .tool-card__header { width: 100%; }
}
@media (max-width: 520px) {
  .catalog__grid { grid-template-columns: 1fr; }
  .market-stats__grid { grid-template-columns: 1fr; }
}

/* ---- market-stat inline source citations (added with the citation audit) ---- */
.market-stat__source { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.03em; color: var(--faint); margin-top: 8px; line-height: 1.45; }