/* ============================================================
   NISHCHAY PORTFOLIO — cv.css
   In-app Curriculum Vitae page (#page-cv).
   Depends on style.css for :root tokens, the .page/.sub-page shell,
   .mono and .reveal — and on liquid-glass.css for the .lq-btn
   component used in the actions row (not restyled here).
   Everything below is scoped to #page-cv or a .cv- prefix.
   ============================================================ */

/* ── LOCAL TOKENS ─────────────────────────────────────── */
/* Only values that do not already exist on :root. --cv-read sits
   deliberately between --text and --text-dim: --text-dim (0.45) is
   tuned for short captions and is too faint for CV-length prose. */
#page-cv {
  --cv-read:       rgba(240,237,232,0.72);
  --cv-chip-line:  rgba(201,169,110,0.24); /* matches the .tech-tags pill edge */
  --cv-measure:    68ch;                   /* ~65–75 characters of body copy */
  --cv-rail:       210px;
  --cv-stick:      96px;                   /* clears the sticky .sub-header */
}

/* ── DOCUMENT SHELL ───────────────────────────────────── */
.cv-doc {
  max-width: 980px;
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 6vw, 78px);
}

/* ── MASTHEAD ─────────────────────────────────────────── */
.cv-masthead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.cv-name {
  font-size: clamp(1.9rem, 4.8vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.cv-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-dim);
  letter-spacing: 0.01em;
}
.cv-contact-item { overflow-wrap: anywhere; }
.cv-contact-sep  { color: var(--text-dimmer); }

.cv-inline-link {
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-2);
  padding-bottom: 1px;
  transition: color var(--tf), border-color var(--tf);
}
.cv-inline-link:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.cv-profiles {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cv-profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 40px;
  background: var(--surface);
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  transition: color var(--tf), border-color var(--tf), background var(--tf), transform var(--tf);
}
.cv-profile:hover {
  color: var(--gold);
  border-color: var(--gold-dim);
  background: var(--surface-2);
  transform: translateY(-2px);
}
.cv-ico { width: 14px; height: 14px; flex: none; }

/* ── ACTIONS ROW ──────────────────────────────────────── */
/* Wrapper only — .lq-btn itself is styled by the shared component. */
.cv-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--border);
}
.cv-actions-note {
  font-size: 0.66rem;
  color: var(--text-dimmer);
  letter-spacing: 0.02em;
}

/* ── SECTION GRID (rail + column) ─────────────────────── */
.cv-section {
  display: grid;
  grid-template-columns: minmax(150px, var(--cv-rail)) minmax(0, 1fr);
  gap: clamp(20px, 3.5vw, 56px);
  align-items: start;
}

.cv-rail {
  position: sticky;
  top: var(--cv-stick);
  align-self: start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.cv-idx {
  font-size: 0.62rem;
  color: var(--gold);
  letter-spacing: 0.16em;
  margin-bottom: 9px;
}
.cv-label {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text);
}

.cv-col { min-width: 0; }

/* ── BODY COPY ────────────────────────────────────────── */
.cv-lede {
  font-size: clamp(0.9rem, 1.4vw, 1rem);
  line-height: 1.75;
  color: var(--cv-read);
  max-width: var(--cv-measure);
}
.cv-text {
  margin-top: 12px;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--cv-read);
  max-width: var(--cv-measure);
}

/* ── ENTRIES (education / projects / experience) ──────── */
.cv-entries {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3vw, 40px);
}

.cv-entry {
  position: relative;
  padding-left: 22px;
  border-left: 1px solid var(--border);
  transition: border-color var(--tf);
}
.cv-entry::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-2);
  transition: background var(--tf), box-shadow var(--tf);
}
.cv-entry:hover { border-left-color: var(--gold-dim); }
.cv-entry:hover::before {
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim);
}

.cv-entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 18px;
}
.cv-entry-title {
  font-size: clamp(0.95rem, 1.5vw, 1.06rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  max-width: var(--cv-measure);
}
.cv-entry-where {
  font-weight: 400;
  font-size: 0.84em;
  letter-spacing: 0;
  color: var(--text-dim);
}
.cv-entry-where::before {
  content: "·";
  margin: 0 7px;
  color: var(--text-dimmer);
}
.cv-date {
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  flex: none;
}
.cv-entry-kicker {
  margin-top: 7px;
  font-size: 0.67rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  line-height: 1.55;
}

/* ── BULLET POINTS ────────────────────────────────────── */
.cv-points {
  list-style: none;
  margin-top: 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: var(--cv-measure);
}
.cv-points li {
  position: relative;
  padding-left: 17px;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--cv-read);
}
.cv-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.76em;
  width: 7px;
  height: 1px;
  background: var(--border-2);
}
.cv-org { color: var(--text); font-weight: 600; }

/* ── CHIPS (skills, grades) ───────────────────────────── */
.cv-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.cv-chips li {
  padding: 4px 11px;
  background: var(--gold-dim);
  border: 1px solid var(--cv-chip-line);
  border-radius: 20px;
  font-family: 'DM Mono', monospace;
  font-size: 0.66rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--gold);
}

/* ── SKILL GROUPS ─────────────────────────────────────── */
.cv-skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(20px, 2.6vw, 32px);
}
.cv-skill-group { min-width: 0; }
.cv-skill-label {
  font-size: 0.62rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-dimmer);
}

/* ── CERTIFICATIONS ───────────────────────────────────── */
.cv-certs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
}
.cv-cert {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background var(--tf), border-color var(--tf);
}
.cv-cert:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}
.cv-cert-term {
  font-size: 0.63rem;
  color: var(--gold);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.cv-cert-desc {
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--cv-read);
}

/* ── FOCUS ────────────────────────────────────────────── */
/* Outline only, so it inherits each element's own border-radius.
   .lq-btn is excluded — liquid-glass.css already ships its own
   :focus-visible ring (including a forced-colors variant). */
#page-cv a:not(.lq-btn):focus-visible,
#page-cv .back-btn:focus-visible,
#page-cv .crumb-home:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 820px) {
  .cv-section {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .cv-rail {
    position: static;
    top: auto;
  }
  .cv-doc { gap: clamp(36px, 7vw, 56px); }
}

@media (max-width: 540px) {
  .cv-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .cv-contact-sep { display: none; }
  .cv-profiles { flex-direction: column; align-items: stretch; }
  .cv-profile { justify-content: space-between; }
  .cv-actions { gap: 10px; }
  .cv-entry-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 380px) {
  .cv-entry { padding-left: 16px; }
  .cv-cert { padding: 14px 15px; }
  .cv-chips li { font-size: 0.62rem; padding: 4px 9px; }
}

/* ── PRINT ────────────────────────────────────────────── */
/* Renders the CV as a plain black-on-white document. The site shell
   is fixed-position and opacity-driven, so it has to be unwound here;
   !important is required to beat those base rules. */
@media print {
  @page { margin: 14mm; }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  .page:not(#page-cv),
  #loader,
  .bg-canvas,
  .scroll-indicator,
  .ai-chat-panel,
  .ai-chat-backdrop,
  #ai-chat-trigger {
    display: none !important;
  }

  #page-cv {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;
    min-height: 0 !important;
    color: #000 !important;
  }
  #page-cv .sub-content {
    max-width: none !important;
    padding: 0 !important;
  }
  #page-cv .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* chrome that must not print */
  #page-cv .sub-header,
  #page-cv .sub-footer,
  #page-cv .back-btn,
  #page-cv .cv-actions,
  #page-cv .sub-num,
  #page-cv .section-sub,
  #page-cv .cv-ico {
    display: none !important;
  }

  #page-cv .sub-intro { margin-bottom: 6mm !important; }
  #page-cv .section-heading {
    font-size: 10pt !important;
    font-weight: 400 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #555 !important;
    margin-bottom: 0 !important;
  }

  #page-cv .cv-doc {
    max-width: none !important;
    gap: 9mm !important;
  }
  #page-cv .cv-name {
    font-size: 22pt !important;
    color: #000 !important;
  }
  #page-cv .cv-section {
    grid-template-columns: 34mm minmax(0, 1fr) !important;
    gap: 8mm !important;
  }
  #page-cv .cv-rail {
    position: static !important;
    border-bottom-color: #bbb !important;
  }
  #page-cv .cv-entries { gap: 6mm !important; }
  #page-cv .cv-entry { border-left-color: #ddd !important; }
  #page-cv .cv-entry::before { background: #999 !important; }
  #page-cv .cv-points li::before { background: #999 !important; }

  #page-cv .cv-lede,
  #page-cv .cv-text,
  #page-cv .cv-points li,
  #page-cv .cv-org,
  #page-cv .cv-cert-desc,
  #page-cv .cv-entry-title,
  #page-cv .cv-label {
    color: #000 !important;
    max-width: none !important;
  }
  #page-cv .cv-idx,
  #page-cv .cv-date,
  #page-cv .cv-entry-kicker,
  #page-cv .cv-entry-where,
  #page-cv .cv-contact,
  #page-cv .cv-contact-sep,
  #page-cv .cv-cert-term,
  #page-cv .cv-skill-label {
    color: #444 !important;
  }
  #page-cv .cv-inline-link,
  #page-cv .cv-profile {
    color: #000 !important;
    background: none !important;
    border-color: #bbb !important;
  }
  #page-cv .cv-profiles { gap: 4mm !important; }
  #page-cv .cv-profile { padding: 0 !important; border: 0 !important; }
  #page-cv .cv-chips li {
    background: none !important;
    border-color: #999 !important;
    color: #000 !important;
  }
  #page-cv .cv-cert {
    background: none !important;
    border-color: #ccc !important;
  }

  /* keep entries whole across page boundaries */
  #page-cv .cv-masthead,
  #page-cv .cv-entry,
  #page-cv .cv-cert,
  #page-cv .cv-skill-group {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  #page-cv .cv-label,
  #page-cv .cv-entry-title {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }
}

/* ── REDUCED MOTION ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #page-cv .cv-profile,
  #page-cv .cv-inline-link,
  #page-cv .cv-entry,
  #page-cv .cv-entry::before,
  #page-cv .cv-cert {
    transition: none !important;
  }
  #page-cv .cv-profile:hover { transform: none !important; }
  #page-cv .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}