/* =========================================================
   CV-PAGES.CSS - the CV-linked destination pages.
   Depends on style.css (tokens), eda.css and project-focus.css.
   Adds only what those three do not already provide:
   breadcrumbs, directory cards, reserved media slots, and the
   role / anchor furniture the deep pages need.
   ========================================================= */

/* -------------------- Breadcrumbs -------------------- */
.crumbs {
  padding-top: var(--sp-5);
  font: 400 var(--fs-xs)/1.6 var(--mono);
  color: var(--text-muted);
}
.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.crumbs li + li::before {
  content: "/";
  margin-inline: 8px;
  color: var(--border-strong);
}
.crumbs a { color: var(--text-secondary); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--text-main); }

/* -------------------- Directory (hub) cards -------------------- */
.dir-grid {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px)  { .dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dir-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.dir-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  height: 100%;
  padding: var(--sp-5);
  border: 1px solid var(--border-line);
  border-radius: var(--r-xl);
  background: var(--bg-panel);
  color: inherit;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.dir-card:hover { border-color: var(--border-strong); background: var(--bg-panel-alt); }

/* A grid cell holding a card and the card that sits directly under it. */
.dir-item--stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.dir-item--stack .dir-card { height: auto; }
.dir-item--stack .dir-card:first-child { flex: 1 1 auto; }
.dir-card--sub { margin-left: var(--sp-4); border-left: 3px solid var(--accent); }
.dir-card__kicker {
  margin: 0;
  font: 500 var(--fs-xxs)/1.5 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dir-card__title {
  margin: 0;
  font: 600 var(--fs-lg)/1.3 var(--sans);
  letter-spacing: -0.01em;
  color: var(--text-main);
}
.dir-card__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}
.dir-card__foot {
  margin-top: auto;
  padding-top: var(--sp-3);
  font: 500 var(--fs-xxs)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.dir-card__foot::after { content: " \2192"; }

/* -------------------- Reserved media slots --------------------
   A slot is a commitment, not a gap. It states what will go there
   and carries a RESERVED marker, so an empty page reads as a page
   with nothing in it yet rather than as a page that failed to load. */
.slot-grid {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 760px) { .slot-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.slot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 168px;
  padding: var(--sp-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-xl);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 9px,
      rgba(87, 182, 240, .035) 9px 10px
    ),
    var(--bg-panel);
}
.slot__tag {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  padding: 3px 7px;
  border: 1px solid var(--border-line);
  border-radius: 2px;
  background: var(--bg-panel-alt);
  font: 500 var(--fs-xxs)/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.slot__kind {
  margin: 0;
  font: 500 var(--fs-xxs)/1.5 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.slot__label {
  margin: 0;
  font: 500 var(--fs-sm)/1.4 var(--sans);
  color: var(--text-main);
}
.slot__note {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 54ch;
}

/* -------------------- Roles -------------------- */
.role-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 860px) { .role-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* -------------------- Anchored skill blocks -------------------- */
.anchor-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.anchor-head__permalink {
  font: 400 var(--fs-xs)/1 var(--mono);
  color: var(--text-muted);
}
.anchor-head__permalink:hover { color: var(--accent); }
.pf-section:target .pf-section__title,
.pf-section[id]:target .anchor-head h2 { color: var(--accent); }

/* Evidence line: a skill points back at the work that shows it. */
.evidence {
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-secondary);
}
.evidence b {
  display: block;
  margin-bottom: 4px;
  font: 500 var(--fs-xxs)/1.5 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}
.evidence a + a::before { content: " \00b7 "; color: var(--border-strong); }

/* -------------------- Contribution cards -------------------- */
.contrib-card {
  border: 1px solid var(--border-line);
  border-radius: var(--r-xl);
  background: var(--bg-panel);
  overflow: hidden;
}
.contrib-card + .contrib-card { margin-top: var(--sp-4); }
.contrib-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-line);
  background: var(--bg-panel-alt);
}
.contrib-card__repo {
  margin: 0;
  font: 500 var(--fs-sm)/1.4 var(--mono);
  color: var(--text-main);
}
.contrib-card__domain {
  margin: 2px 0 0;
  font: 400 var(--fs-xxs)/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contrib-card__body { padding: var(--sp-4); }
.contrib-card__rows {
  display: grid;
  gap: 0;
  margin: 0;
}
.contrib-card__rows > div {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: var(--sp-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-secondary);
}
.contrib-card__rows > div:last-child { border-bottom: 0; }
.contrib-card__rows b {
  font: 500 var(--fs-xxs)/1.7 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}
@media (max-width: 640px) {
  .contrib-card__rows > div { grid-template-columns: 1fr; gap: 2px; }
}

/* -------------------- Small utilities -------------------- */
.lede {
  max-width: 76ch;
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-secondary);
}
.pill-academic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--warning);
  border-radius: 2px;
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  font: 500 var(--fs-xxs)/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--warning);
}
.page-cv .pf-section:last-of-type { border-bottom: 0; }
.next-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-block: var(--sp-6);
}

/* -------------------- Display maths --------------------
   Same spacing rule the open-source page uses, repeated here so
   the generated pages do not have to pull in that stylesheet
   just for one selector. KaTeX display blocks scroll rather than
   overflow on a narrow screen. */
.os-math-row + .os-math-row { margin-top: var(--sp-3); }
.eda-math .katex-display { overflow-x: auto; overflow-y: hidden; padding-block: 2px; }

/* -------------------- Stacked definition list --------------------
   For lists whose label is a sentence rather than a term. The label
   sits above its text instead of beside it, because a question does
   not fit in a 168px column and should not be shouted in mono caps. */
.pf-list--stack li { grid-template-columns: 1fr; gap: 3px; padding: var(--sp-3) 0; }
.pf-list--stack li b {
  font: 600 var(--fs-sm)/1.45 var(--sans);
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--text-main);
  overflow-wrap: normal;
}

/* -------------------- Anchor landing --------------------
   The header is sticky, so a link straight to #rf-microwave used
   to land with the heading hidden underneath it. These anchors are
   linked from the PDF resume, so they have to land clear of it.
   Scoped to the pages that load this stylesheet. */
.pf-section[id],
.section[id],
[id="contact"] {
  scroll-margin-top: calc(var(--header-h) + 18px);
}