/* ============================================================
   Direction D — "Start here" printable cohort guide.
   Local copy of the how-it-works docs-page idiom (public/career/
   how-it-works/css/dd-how-it-works.css) so this page doesn't need
   to touch that file. Same visual language, own class names.
   ============================================================ */

.sh-intro { max-width: 760px; }

.sh-section h2 { margin-bottom: 16px; }
.sh-section p { font-family: var(--font-mono); font-size: 14px; line-height: 1.75; color: var(--dim); max-width: 760px; margin: 0 0 14px; }

/* ---- six-step table ---- */
.sh-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 16px; max-width: 760px; }
.sh-table { border-collapse: collapse; width: 100%; min-width: 480px; font-family: var(--font-mono); font-size: 13.5px; }
.sh-table th, .sh-table td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.sh-table thead th { color: var(--faint); font-weight: 600; letter-spacing: 0.05em; background: var(--cardbg); }
.sh-table tbody th { color: var(--fg); font-weight: 600; white-space: nowrap; }
.sh-table td { color: var(--dim); }
.sh-note { max-width: 760px; }
.sh-table__figure { margin-top: 10px; }

/* ---- phone stacked cards (<=640px) — table hidden there instead of
   overflowing horizontally; spec R2-A §4. Shown on print regardless
   (print CSS below forces the table back for a stable paper layout). ---- */
.sh-cards { list-style: none; margin: 0 0 16px; padding: 0; display: none; flex-direction: column; gap: 14px; max-width: 760px; }
.sh-card { border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; background: var(--cardbg); }
.sh-card__name { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.sh-card__what { font-family: var(--font-mono); font-size: 13px; color: var(--dim); margin: 0 0 8px; }
.sh-card__time { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin: 0 0 12px; }
.sh-card__link { width: 100%; }

.sh-cta { padding: 0 44px 32px; margin: 0; }
@media (max-width: 760px) { .sh-cta { padding: 0 18px 28px; } }

@media (max-width: 640px) {
  .sh-table-wrap { display: none; }
  .sh-cards { display: flex; }
}

/* ---- paper checklist ---- */
.sh-checklist { list-style: none; margin: 0 0 14px; padding: 0; max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.sh-checklist li {
  font-family: var(--font-mono); font-size: 14px; line-height: 1.6; color: var(--dim);
  border-left: 2px solid var(--line); padding-left: 14px;
}

/* ---- footer links back to the hub ---- */
.sh-stamp {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--faint);
  border-top: 1px solid var(--line); margin: 0; padding: 22px 44px;
}
.sh-stamp a { color: var(--faint); }
.sh-stamp a:hover { color: var(--fg); }

@media (max-width: 760px) {
  .sh-stamp { padding: 18px 18px; }
}

/* ---- print: one or two pages, chrome hidden, links show their URL ---- */
@media print {
  .dd-header, .dd-stepmap, .dd-progress, .dd-notice, .dd-footer, .dd-skip { display: none !important; }
  html, body { background: #fff; color: #000; }
  main a { color: #000; text-decoration: underline; }
  /* Paper has no href — print the real, absolute URL after the link text.
     Root-relative hrefs (the table/footer links) get the site origin
     prepended; already-absolute http(s) links print as-is. */
  main a[href^="/"]::after {
    content: " (https://cybersecuritycircle.org" attr(href) ")"; font-size: 0.85em; color: #333; text-decoration: none;
  }
  main a[href^="http"]::after {
    content: " (" attr(href) ")"; font-size: 0.85em; color: #333; text-decoration: none;
  }
  .dd-section, .sh-section { padding: 10px 0; border: none !important; }
  .sh-table-wrap { display: block !important; }
  .sh-cards { display: none !important; }
  .sh-table th, .sh-table td { border: 1px solid #999; color: #000; }
  .sh-checklist li { border-left: 2px solid #000; color: #000; }
  .sh-stamp { border-top: 1px solid #999; padding: 10px 0; }
  .sh-cta { display: none; }
}