/* =====================================================================
   cv-mode.css — "CV mode" for recruiters, and print styles.
   html.cv-mode turns the dive into a clean, single-column, white CV:
   no canvas, gauge or decorations; every drawer open; flip-card backs
   shown inline; the map replaced by the route list; no gallery.
   When you print (or Save as PDF), cv-mode.js switches these same
   styles on automatically, so printing always gives a clean CV.
   ✏️ Safe to edit: which elements are hidden, spacing.
   ===================================================================== */

/* ---------- Hide the fun stuff ---------- */
.cv-mode .ocean-canvas,
.cv-mode .gauge,
.cv-mode .depth-pill,
.cv-mode .hud,
.cv-mode .scroll-cue,
.cv-mode .thermocline,
.cv-mode .surface-btn,
.cv-mode .footer__log,
.cv-mode .chart,
.cv-mode .zone--gallery,
.cv-mode .zone--lab,
.cv-mode .pass__shine,
.cv-mode .pass__seal,
.cv-mode .logos,
.cv-mode .growth,
.cv-mode .contact__fish,
.cv-mode .about__specimen,
.cv-mode .flip-card__hint,
.cv-mode .flip-card__back-title,
.cv-mode .flip-card__toggle,
.cv-mode .ripple-ring,
.cv-mode .rider,
.cv-mode .bubble,
.cv-mode .depth-label__ticks,
.cv-mode .tabs,
.cv-mode .zone--contact::after,
.cv-mode .nav__links,
.cv-mode .todo-badge,
.cv-mode .footer__built {
  display: none !important;
}

/* ---------- White page, dark text everywhere ---------- */
html.cv-mode,
.cv-mode body {
  background: var(--paper);
}

.cv-mode [data-theme],
.cv-mode .zone {
  --c-text: var(--ink);
  --c-muted: var(--ink-muted);
  --c-accent: var(--violet);
  --c-accent-soft: var(--violet-soft);
  --c-card: var(--paper);
  --c-border: var(--card-light-border);
  --c-bar: var(--paper);
  --c-green: var(--chlorophyll-deep);
  --c-focus: var(--violet);
  --c-on-accent: var(--foam);
}

.cv-mode .zone {
  min-height: 0;
  padding-block: var(--space-5);
  background: var(--paper) !important;
  border-bottom: 1px solid var(--card-light-border);
}

.cv-mode [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

.cv-mode .card,
.cv-mode .specimen__card,
.cv-mode .stat,
.cv-mode .facts,
.cv-mode .flip-card__face {
  background: var(--paper) !important;
  border-color: var(--card-light-border) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.cv-mode .nav {
  background: var(--paper);
  border-bottom-color: var(--card-light-border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- Hero becomes a compact CV header ---------- */
.cv-mode .hero {
  min-height: 0;
  padding-block: calc(var(--nav-height) + var(--space-4)) var(--space-2);
}

.cv-mode .hero__name {
  font-size: var(--step-4);
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
}

.cv-mode .hero__headline {
  font-size: var(--step-2);
}

.cv-mode .hero__now-item {
  grid-area: auto;
  opacity: 1;
  transform: none;
}

/* ---------- Single column ---------- */
.cv-mode .about,
.cv-mode .journey,
.cv-mode .skills,
.cv-mode .contact,
.cv-mode .specimens,
.cv-mode .interests,
.cv-mode .stats {
  grid-template-columns: 1fr !important;
}

.cv-mode .stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.cv-mode .stat {
  padding: var(--space-2) var(--space-3);
}

.cv-mode .stat__value {
  font-size: var(--step-2);
}

.cv-mode .about__portrait {
  width: 9rem;
  margin: 0;
}

.cv-mode .blob {
  animation: none;
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.cv-mode .section-header {
  margin-bottom: var(--space-4);
}

.cv-mode h2 {
  font-size: var(--step-3);
}

/* ---------- Everything visible ---------- */
.cv-mode .tabs__panel[hidden] {
  display: block !important;
}

.cv-mode .tabs__panel {
  padding-top: var(--space-2);
}

/* Show each skill group's name (normally announced only to screen readers) */
.cv-mode .tabs__panel .visually-hidden {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0 0 var(--space-2);
  overflow: visible;
  clip: auto;
  white-space: normal;
  font-size: var(--step-1);
}

.cv-mode .colony > li {
  animation: none !important;
  opacity: 1 !important;
}

.cv-mode .flip-card {
  min-height: 0;
  perspective: none;
}

.cv-mode .flip-card__inner {
  transform: none !important;
  min-height: 0;
}

.cv-mode .flip-card__face {
  position: static;
  opacity: 1 !important;
  transform: none !important;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  padding: var(--space-3);
}

.cv-mode .flip-card__front {
  border-bottom: 0 !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding-bottom: 0;
}

.cv-mode .flip-card__back {
  border-top: 0 !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding-top: var(--space-1);
}

.cv-mode .flip-card__face::before {
  display: none;
}

.cv-mode .flip-card__icon {
  width: 2rem;
  height: 2rem;
  color: var(--violet);
}

.cv-mode .flip-card__link {
  pointer-events: auto;
  color: var(--violet);
}

.cv-mode .pass {
  transform: none !important;
  background: var(--paper);
  box-shadow: none;
  border: 1px solid var(--card-light-border);
}

.cv-mode .competence[open] {
  border-color: var(--card-light-border);
}

.cv-mode .timeline::before,
.cv-mode .timeline__node {
  display: none;
}

.cv-mode .timeline {
  padding-left: 0;
}

.cv-mode .program__where,
.cv-mode .timeline__dates,
.cv-mode .growth__caption {
  color: var(--violet);
}

.cv-mode .program.is-linked,
.cv-mode .program:hover {
  box-shadow: none;
}

/* ---------- Footer ---------- */
.cv-mode .site-footer {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--card-light-border);
  padding-bottom: var(--space-6);
}

.cv-mode .footer__links a,
.cv-mode .footer__row--small {
  color: var(--ink-muted);
}

/* =====================================================================
   PRINT — cv-mode.js adds .cv-mode automatically before printing.
   These extra rules polish the paper version (and cover no-JS printing).
   ===================================================================== */
@media print {
  @page {
    margin: 14mm;
  }

  html,
  body {
    background: var(--paper) !important;
    color: var(--ink);
    font-size: 10.5pt;
  }

  .site-header,
  .toast-region,
  .skip-link,
  .ocean-canvas,
  .gauge,
  .depth-pill,
  .surface-btn,
  .scroll-cue,
  .hud,
  .chart,
  .zone--gallery,
  .contact__fish,
  .contact-form,
  .btn,
  .thermocline {
    display: none !important;
  }

  .zone {
    padding-block: 10pt;
    background: var(--paper) !important;
  }

  .hero {
    padding-top: 0 !important;
  }

  .contact__email {
    font-size: 11pt;
    color: var(--ink);
  }

  .card,
  .specimen,
  .timeline__item,
  .flip-card,
  .program,
  .route-log__item,
  .stat {
    break-inside: avoid;
  }

  h2,
  h3 {
    break-after: avoid;
  }

  a {
    color: var(--ink);
  }
}