/* Persistent route back to the OS — mirrors #escape-hatch (base.css), which
   does the reverse trip from the OS view. Only ever present in this view's
   own markup, so it never appears while the OS is showing. */
.pv-back-os {
  font-family: var(--font-mono); font-size: 0.75rem;
  background: var(--carbon); color: var(--bone); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  white-space: nowrap;
}
.pv-back-os:hover { border-color: var(--bone); color: var(--bone); }

.pv { max-width: 760px; margin: 0 auto; padding: var(--sp-6) var(--sp-4); }
.pv-head {
  display: flex; flex-direction: column;
  /* On narrow widths, position the button at the top-right within the flex layout */
  align-items: flex-start;
}
/* Position the back-to-OS button at the top-right of the flex container on narrow widths */
.pv-head .pv-back-os {
  align-self: flex-end; margin-bottom: var(--sp-2);
}
.pv-head h1 { font-size: 2rem; margin: 0 0 var(--sp-1); width: 100%; }
.pv-role { color: var(--slate); margin: 0 0 var(--sp-3); }
.pv-location { color: var(--slate); font-size: 0.85rem; margin: 0 0 var(--sp-3); }
.pv-thesis { color: var(--bone); margin: 0 0 var(--sp-4); }
.pv-links { list-style: none; display: flex; gap: var(--sp-4); padding: 0; flex-wrap: wrap; }

.pv h2 {
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--slate); border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-2); margin-top: var(--sp-6);
}

.pv-project { border-left: 2px solid var(--line); padding-left: var(--sp-4); margin-bottom: var(--sp-5); }
.pv-project header { display: flex; gap: var(--sp-3); align-items: baseline; flex-wrap: wrap; }
.pv-project h3 { margin: 0; font-size: 1.05rem; }
.pv-summary { color: var(--slate); margin: var(--sp-2) 0; }

/* Experience entries — sized/margined like .pv-project h3 above so the two
   sections' headings read at the same weight instead of one falling back
   to the browser-default h3 (~1.17em, with default UA margins). */
.pv-role-block { margin-bottom: var(--sp-5); }
.pv-role-block h3 { margin: 0; font-size: 1.05rem; }

/* Every bullet list in this view (project bullets, experience bullets,
   certifications). Tightened off the browser-default 40px list indent, the
   same call .bullets makes in css/sections.css. */
.pv-bullets { padding-left: 1.1em; font-size: 0.85rem; }
.pv-bullets li { margin-bottom: var(--sp-2); }

.pv-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: var(--radius); border: 1px solid; }
.pv-badge--good   { color: var(--green); border-color: var(--green); }
.pv-badge--review { color: var(--amber); border-color: var(--amber); }
.pv-badge--info   { color: var(--purple); border-color: var(--purple); }

.pv-metrics { list-style: none; display: flex; gap: var(--sp-5); padding: var(--sp-3) 0; margin: 0; flex-wrap: wrap; }
.pv-metrics li { display: flex; flex-direction: column; }
.pv-metric-value { font-size: 1.6rem; font-weight: 700; color: var(--purple); line-height: 1.1; }
.pv-metric-unit  { font-size: 0.75rem; color: var(--slate); }
.pv-metric-label { font-size: 0.65rem; letter-spacing: 0.08em; color: var(--slate); }

.pv-stack span {
  display: inline-block; font-size: 0.72rem; color: var(--slate);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1px 7px; margin: 2px 4px 2px 0;
}
.pv-period { color: var(--slate); font-size: 0.8rem; margin: 0; }
/* .pv-pubs itself only had descendant rules below, so its own box fell back
   to the browser-default <ol> indent and numbering (~40px). Set explicitly
   here, as .papers does for the same content in css/sections.css. */
.pv-pubs { padding-left: 1.1em; font-size: 0.85rem; }
.pv-pubs .pv-venue, .pv-pubs .pv-plain { display: block; color: var(--slate); font-size: 0.85rem; }
.pv-pubs li { margin-bottom: var(--sp-3); }

@media (max-width: 600px) {
  .pv { padding: var(--sp-5) var(--sp-3); }
  .pv-head h1 { font-size: 1.5rem; }
  .pv-metrics { gap: var(--sp-4); }
  .pv-metric-value { font-size: 1.3rem; }
}