/* ============================================================
   Direction D re-skin — Career Launchpad · Step 4: ACQUIRE.
   Overrides career/acquire/css/acquire.css (loaded before this) to the terminal
   aesthetic, EXACTLY mirroring career/css/dd-hub.css. 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, classes, and JS hooks are preserved —
   this layer is purely presentational (the cert status-cycle button, target
   dates, exam/study links, credentials, custom items, filters, and the add-item
   modal all keep their hooks). #certPath is a flat list of .cert-item rows (NOT
   tiers) in this DOM; we re-skin those real rows to bordered DD cards.
   ============================================================ */

/* ---- 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; }
.hero, .profile-bar, .acquire-content, .quick-links { background: transparent !important; }
.hero { border-top: none; }
.acquire-content > .container,
.quick-links > .container { padding: 48px 44px !important; }

/* ============ HERO ============ */
.hero { padding: 0 !important; color: var(--fg); }
.hero__content { max-width: none !important; padding: 54px 44px !important; }
.hero__back {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--faint) !important; margin-bottom: 22px;
}
.hero__back:hover { color: var(--red) !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: 18px; text-transform: lowercase;
  border: none !important; border-radius: 8px !important;
}
.hero__badge::before { content: "// step_04 :: acquire — certifications & training"; color: var(--red); }
/* hide the original badge text node; the ::before carries the DD label */
.hero__badge { font-size: 0 !important; }
.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: 560px;
}
.hero__subtitle::before { content: "# "; }

/* ============ PROFILE BAR ============ */
.profile-bar { border-bottom: none !important; padding: 0 !important; }
.profile-bar__inner {
  display: flex !important; flex-wrap: wrap; gap: 0 !important; justify-content: flex-start !important;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.profile-bar__item {
  text-align: left !important; flex: 1; min-width: 180px;
  padding: 24px 28px !important; border-right: 1px solid var(--line);
}
.profile-bar__label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  color: var(--faint) !important; text-transform: uppercase; margin-bottom: 8px !important;
}
.profile-bar__value { font-family: var(--font-mono); font-size: 22px; color: var(--red) !important; letter-spacing: -0.02em; }

/* ============ ACQUIRE CONTENT / CARDS ============ */
.acquire-grid { display: block !important; gap: 0 !important; }
.acquire-main { gap: 28px !important; }
.card {
  background: transparent !important; border: 1px solid var(--line) !important; border-radius: 8px !important;
  box-shadow: none !important; padding: 0 !important;
}
.card__header {
  margin-bottom: 0 !important; padding: 24px 26px 18px !important; align-items: baseline;
  border-bottom: 1px solid var(--line);
}
.card__title {
  font-family: var(--font-sans) !important; font-size: clamp(18px,2.2vw,24px); font-weight: 600;
  letter-spacing: -0.015em; color: var(--fg) !important;
}
.card__badge {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--faint) !important;
  background: transparent !important; border: 1px solid var(--line) !important; border-radius: 8px !important; padding: 5px 10px !important;
}
.card__note {
  margin: 0 !important; padding: 14px 26px !important; background: transparent !important;
  border-left: none !important; border-bottom: 1px solid var(--line) !important;
  /* D7 (RO2-4): sits directly between .card__header and the first tracker
     row, both of which already have their own border/radius handling --
     rounding this note's corners created a visible notch against them. */
  border-radius: 0 !important;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--dim) !important;
}
.card__note::before { content: "// "; color: var(--faint); }

/* ============ CERTIFICATION TRACKER (flat #certPath list) ============ */
.cert-path { display: block !important; gap: 0 !important; padding: 0 !important; }
.cert-item {
  border: none !important; border-bottom: 1px solid var(--line) !important;
  border-left: 3px solid var(--line) !important;
  /* D7 (RO2-4): individually rounding every flush, stacked row notched at
     each shared edge (a sliver of background showing through where the
     rail's rounded corner didn't meet the next row's). Only the group's
     outer corners round now. */
  border-radius: 0 !important;
  background: var(--cardbg) !important; padding: 22px 24px !important;
  font-family: var(--font-mono); align-items: flex-start; gap: 18px;
}
.cert-item:hover { background: var(--surface) !important; }
.cert-item:first-child { border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; }
.cert-item:last-child { border-bottom: none !important; border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; }
/* status-tinted left rail (mirrors the status control); earned = green */
.cert-item--status-planned { border-left-color: var(--line) !important; }
.cert-item--status-in-progress { border-left-color: var(--red) !important; }
.cert-item--status-earned { border-left-color: var(--green) !important; background: var(--cardbg) !important; }
.cert-item--recommended { background: var(--cardbg) !important; }

.cert-item__order {
  width: 26px; height: 26px; border: 1px solid var(--red) !important; border-radius: 50% !important;
  background: transparent !important; color: var(--red) !important; font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
}
.cert-item--recommended .cert-item__order { background: transparent !important; color: var(--red) !important; }
.cert-item__name {
  font-family: var(--font-sans) !important; font-size: 15.5px; font-weight: 600;
  color: var(--fg) !important; letter-spacing: -0.01em; margin-bottom: 4px !important;
}
.cert-item__badge {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase;
  background: transparent !important; color: var(--red) !important;
  border: 1px solid var(--red) !important; border-radius: 8px !important; padding: 2px 6px !important;
}
.cert-item__badge--strength {
  color: var(--dim) !important; border-color: var(--faint) !important;
}
/* provider / level — mono, faint */
.cert-item__org { font-family: var(--font-mono); font-size: 12px; color: var(--faint) !important; margin-bottom: 8px !important; }
.cert-item__meta { font-family: var(--font-mono); font-size: 12px; color: var(--dim) !important; gap: 16px; }
.cert-item__meta-item { color: var(--green) !important; }

/* target-date control → bordered mono input */
.cert-item__track { margin-top: 14px !important; }
.cert-item__date-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  color: var(--faint) !important; text-transform: uppercase; gap: 6px;
}
.cert-item__date {
  background: var(--bg) !important; color: var(--fg) !important;
  border: 1px solid var(--line) !important; border-radius: 8px !important;
  font-family: var(--font-mono); font-size: 12px; padding: 8px 10px !important;
}
.cert-item__date:focus { outline: none; border-color: var(--red) !important; }

/* status cycle button → square DD control (the "checkbox" of this tracker) */
.cert-item__actions { gap: 8px; }
.cert-status {
  border: 1px solid var(--line) !important; border-radius: 8px !important;
  background: transparent !important; font-family: var(--font-mono) !important;
  font-size: 11px; letter-spacing: 0.04em; font-weight: 500; color: var(--dim) !important;
  padding: 9px 14px !important; gap: 9px;
}
.cert-status:hover { border-color: var(--red) !important; }
.cert-status__dot { width: 9px; height: 9px; border-radius: 8px !important; background: var(--faint) !important; }
.cert-status--planned { border-color: var(--line) !important; color: var(--dim) !important; }
.cert-status--planned .cert-status__dot { background: var(--faint) !important; }
.cert-status--in-progress { border-color: var(--red) !important; color: var(--red) !important; background: transparent !important; }
.cert-status--in-progress .cert-status__dot { background: var(--red) !important; }
.cert-status--earned { border-color: var(--green) !important; color: var(--green) !important; background: transparent !important; }
.cert-status--earned .cert-status__dot { background: var(--green) !important; }

/* exam page / study links → mono ghost buttons */
.cert-item__btn {
  background: transparent !important; color: var(--red) !important;
  border: 1px solid var(--line) !important; border-radius: 8px !important;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; padding: 8px 12px !important;
}
.cert-item__btn:hover { border-color: var(--red) !important; color: var(--red) !important; background: transparent !important; }
.cert-item__btn--primary { background: var(--btn) !important; border: none !important; color: var(--btnfg) !important; }
.cert-empty, .resources-empty { font-family: var(--font-mono); font-size: 13px; color: var(--faint) !important; padding: 28px 26px !important; }

/* persistence notice (JS-inserted .card__note) keeps the DD note look via rules above */

/* ============ CREDENTIALS (earned) ============ */
.credentials-actions { gap: 8px; }
.credentials-list { gap: 0 !important; padding: 0 !important; }
.credential-item {
  background: transparent !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; /* D7 (RO2-4): see .cert-item */
  padding: 16px 26px !important; gap: 14px; font-family: var(--font-mono);
}
.credential-item:first-child { border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; }
.credential-item:last-child { border-bottom: none !important; border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; }
.credential-item__check {
  width: 18px; height: 18px; border-radius: 8px !important; border: 1px solid var(--green) !important;
  background: transparent !important; color: var(--green) !important; font-size: 11px;
}
.credential-item__name { font-family: var(--font-sans) !important; font-size: 14px; font-weight: 600; color: var(--fg) !important; }
.credential-item__vendor { font-family: var(--font-mono); font-size: 12px; color: var(--faint) !important; }
.credentials-qr { padding: 20px 26px !important; }

/* ============ TRAINING RESOURCES ============ */
.resource-filters { gap: 0 !important; }
.filter-btn {
  background: transparent !important; color: var(--dim) !important;
  border: 1px solid var(--line) !important; border-radius: 8px !important;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; padding: 8px 14px !important;
}
.filter-btn + .filter-btn { border-left: none !important; }
.filter-btn:hover { border-color: var(--red) !important; color: var(--fg) !important; }
.filter-btn--active, .filter-btn[aria-pressed="true"] { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }

.resources-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);
}
.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: 22px !important; font-family: var(--font-mono);
}
.resource-card:hover { border-color: var(--line) !important; box-shadow: none !important; background: var(--surface) !important; }
.resource-card__icon { background: transparent !important; border: 1px solid var(--line) !important; border-radius: 8px !important; color: var(--red) !important; }
.resource-card__name { font-family: var(--font-sans) !important; font-size: 14.5px; font-weight: 600; color: var(--fg) !important; }
.resource-card__type { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--faint) !important; }
.resource-card__desc { font-family: var(--font-mono); font-size: 12.5px; color: var(--dim) !important; line-height: 1.55; }
.resource-card__tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em;
  background: transparent !important; color: var(--dim) !important;
  border: 1px solid var(--line) !important; border-radius: 8px !important; padding: 2px 7px !important;
}
.resource-card__tag--free { color: var(--green) !important; border-color: var(--green) !important; background: transparent !important; }
.resource-card__tag--paid { color: var(--red) !important; border-color: var(--red) !important; background: transparent !important; }
.resource-card__pricing { font-family: var(--font-mono); font-size: 10px; color: var(--faint) !important; }
.resource-card__link { font-family: var(--font-mono); font-size: 11px; color: var(--red) !important; font-weight: 500; }
.resource-card__link:hover { text-decoration: underline; }

/* ============ OTHER LEARNING (custom items) ============ */
.progress-list { gap: 0 !important; }
.progress-empty {
  background: transparent !important; border: 1px dashed var(--line) !important; border-radius: 8px !important;
  font-family: var(--font-mono); font-size: 13px; color: var(--faint) !important; padding: 32px !important;
}
.progress-item {
  background: transparent !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; /* D7 (RO2-4): see .cert-item */
  padding: 16px 26px !important; gap: 14px; font-family: var(--font-mono);
}
.progress-item:first-child { border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; }
/* E3 (RX3-3): renderCustom() always appends the (possibly hidden) #customEmpty
   div AFTER the rows, so it -- not the last row -- is the DOM's actual
   :last-child whenever there's at least one item; :last-child alone left the
   real last row square-cornered. :nth-last-child(2) is the last row whenever
   #customEmpty trails it; :last-child stays as a fallback for the (currently
   unreachable) case where #customEmpty is missing from the DOM. */
.progress-item:last-child,
.progress-item:nth-last-child(2) { border-bottom: none !important; border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; }
.progress-item__checkbox {
  width: 18px; height: 18px; border: 1px solid var(--faint) !important; border-radius: 8px !important;
  background: transparent !important; color: var(--green) !important;
}
.progress-item__checkbox--checked { background: transparent !important; border-color: var(--green) !important; color: var(--green) !important; }
.progress-item__name { font-family: var(--font-sans) !important; font-size: 14px; font-weight: 500; color: var(--fg) !important; }
.progress-item__meta { font-family: var(--font-mono); font-size: 10px; color: var(--faint) !important; }
.progress-item__delete { color: var(--faint) !important; }
.progress-item__delete:hover { color: var(--red) !important; }

/* ============ QUICK LINKS (official bodies) ============ */
.quick-links__title {
  font-family: var(--font-mono) !important; font-size: 11px; letter-spacing: 0.12em;
  color: var(--red) !important; text-transform: lowercase; text-align: left !important; margin-bottom: 18px !important;
}
.quick-links__title::before { content: "> "; }
.quick-links__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);
}
.quick-link {
  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;
  text-align: left !important; padding: 22px 24px !important; font-family: var(--font-mono);
}
.quick-link:hover { background: var(--surface) !important; border-color: var(--line) !important; box-shadow: none !important; }
.quick-link__name { font-family: var(--font-sans) !important; font-size: 15px; font-weight: 600; color: var(--fg) !important; margin-bottom: 6px !important; }
.quick-link__desc { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint) !important; }

/* ============ BUTTONS ============ */
.btn { border-radius: 8px !important; font-family: var(--font-mono) !important; }
.btn--primary { background: var(--btn) !important; color: var(--btnfg) !important; border: none !important; }
.btn--secondary {
  background: transparent !important; color: var(--fg) !important;
  border: 1px solid var(--line) !important; border-radius: 8px !important;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
}
.btn--secondary:hover { border-color: var(--red) !important; background: transparent !important; }

/* ============ ADD-PROGRESS MODAL ============ */
.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;
  background-image: repeating-linear-gradient(to bottom,var(--scan) 0,var(--scan) 1px,transparent 1px,transparent 3px) !important;
}
.modal__header { border-bottom-color: var(--line) !important; background: transparent !important; }
.modal__title { font-family: var(--font-sans) !important; color: var(--fg) !important; font-weight: 600; }
.modal__close { color: var(--faint) !important; }
.modal__close:hover { color: var(--fg) !important; }
.modal__footer { background: transparent !important; border-top: 1px solid var(--line) !important; }
.form-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--faint) !important; text-transform: uppercase; }
.form-input, .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); font-size: 14px; padding: 10px 12px !important;
}
.form-input:focus, .form-select:focus { outline: none; border-color: var(--red) !important; }

/* ============ TOAST ============ */
.toast {
  background: var(--bg) !important; color: var(--fg) !important;
  border: 1px solid var(--line) !important; border-radius: 8px !important; font-family: var(--font-mono) !important;
}
.toast--success { border-color: var(--green) !important; }

/* ============ RESPONSIVE (mirrors dd.css breakpoints) ============ */
@media (max-width: 980px) {
  .resources-grid { grid-template-columns: 1fr 1fr; }
  .quick-links__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .acquire-content > .container, .quick-links > .container { padding: 32px 18px !important; }
  .hero__content { padding: 38px 22px !important; }
  .profile-bar__item { min-width: 50%; flex: 1 0 50%; }
  .profile-bar__item:nth-child(2) { border-right: none; }
  .cert-item { flex-wrap: wrap; }
  .cert-item__actions { flex-direction: row !important; flex-wrap: wrap; width: 100%; }
  .resources-grid { grid-template-columns: 1fr; }
  .quick-links__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .profile-bar__item { min-width: 100%; flex: 1 0 100%; border-right: none; border-bottom: 1px solid var(--line); }
}