/* htut.life, the two CV pages (cv-professional.html, cv-academic.html).
   Loaded after /story.css, which brings the fonts, the light and dark tokens,
   the base rules and the gate, so the door on these pages is the story's own.

   The page around the sheets follows the device's light or dark setting; the
   sheets are paper in both: white, dark ink, the cinnabar accent. On screen a
   sheet is at least one A4 page tall; printed (and in the PDFs, printed by
   scripts/pdf.mjs) it is exactly one A4 page. Below 860px the sheets give up
   their A4 shape and read as one column. */

.cvp { font-size: 16px; line-height: 1.5; }

/* ── The bar above the sheets ─────────────────────────────────────────── */
.bar {
  box-sizing: border-box; min-height: var(--head);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px;
  padding: 8px var(--pad);
  background: var(--ground); border-bottom: 1px solid var(--rule);
}
.bar__back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 15px; text-decoration: none;
}
.bar__back:hover span { text-decoration: underline; }
.bar__title { margin: 0 auto 0 0; font: 400 26px/1.1 var(--brush); }
.bar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bar__refs { display: inline-flex; align-items: center; gap: 10px; }
.bar__btn {
  box-sizing: border-box; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 14px; border: 1px solid var(--faint); border-radius: 2px;
  background: transparent; color: var(--ink); font-size: 15px; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: color .12s, border-color .12s;
}
.bar__btn:hover { color: var(--cinnabar); border-color: currentColor; }
.bar__btn .ic { width: 18px; height: 18px; }
/* the eye stays shut: referees are locked */
.bar__btn:disabled,
.bar__btn:disabled:hover { border-style: dashed; color: var(--muted); border-color: var(--faint); cursor: not-allowed; }
.bar__note { font-size: 14px; color: var(--muted); }

/* ── The sheets ───────────────────────────────────────────────────────── */
.cv {
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  padding: 32px 16px 72px;
}
.sheet {
  --s-ink: #1A1714; --s-muted: #57504A; --s-red: #B33A26; --s-mark: #C2412D; --s-rule: #E2D9CC;
  position: relative; overflow: hidden; box-sizing: border-box;
  width: 794px; min-height: 1123px; padding: 36px 42px 24px;
  display: flex; flex-direction: column; gap: 8px;
  background: #FFFFFF; color: var(--s-ink);
  font: 400 13.5px/1.3 var(--sans);
  box-shadow: 0 1px 3px rgb(26 23 20 / .12);
  color-scheme: light;
}
/* the Academic CV has room to breathe over its four sheets: the approved
   sheet's measures (the Professional CV is tightened to fit two) */
.cvp--academic .sheet { padding: 44px 56px 36px; gap: 14px; line-height: 1.45; }
.cvp--academic .sheet + .sheet { padding-top: 40px; }
.cvp--academic .cv__h { font-size: 23px; }
.cvp--academic .cv__sec { gap: 6px; }
.cvp--academic .cv__sec--experience, .cvp--academic .cv__sec--activities { gap: 8px; }
.cvp--academic .rails { grid-template-columns: 50px minmax(0, 1fr); gap: 10px 12px; }
.cvp--academic .rails--tight { gap: 8px 12px; }
.cvp--academic .cv__ul { margin-top: 2px; }
.sheet + .sheet { padding-top: 28px; }
.sheet ::selection { background: var(--s-red); color: #FFFFFF; }
.sheet a { color: inherit; text-decoration-color: #B5AA9C; }
.sheet a:hover { color: var(--s-red); }
.sheet :focus-visible { outline-color: var(--s-red); }
.sheet p { margin: 0; }
.sheet b { font-weight: 700; }

.sheet__ink { position: absolute; width: 70px; height: 210px; opacity: .85; fill: var(--s-ink); pointer-events: none; }
.sheet__ink--out { right: -10px; bottom: -60px; }
.sheet__ink--in { left: -16px; top: -70px; }
.sheet__foot { margin-top: auto !important; display: flex; justify-content: space-between; font-size: 11.5px; color: var(--s-muted); }

/* header: the name in Htut Brush over the brush underline */
.cv__head { display: flex; flex-direction: column; gap: 2px; }
.cv__name { margin: 0; font: 400 42px/1 var(--brush); text-wrap: initial; }
.cv__under { display: block; width: 340px; height: 22px; margin: -2px 0 2px; fill: var(--s-ink); }
.cv__tag { font-size: 15px; font-weight: 700; color: var(--s-red); }
.cv__contact { margin-top: 2px !important; font-size: 12.5px; }
.cv__rtw { font-size: 12.5px; color: var(--s-muted); }
.cv__run { margin-left: 40px !important; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.cv__run-name { font: 400 24px/1.1 var(--brush); }
.cv__run span:last-child { font-size: 11.5px; color: var(--s-muted); }

/* sections: a brush heading after the cinnabar mark */
.cv__sec { display: flex; flex-direction: column; gap: 4px; }
.cv__sec--experience, .cv__sec--activities { gap: 6px; }
.cv__h { margin: 0; display: flex; align-items: center; gap: 8px; font: 400 22px/1.1 var(--brush); text-wrap: initial; }
.cv__mark { width: 26px; height: 15px; flex: none; fill: var(--s-mark); }
.cv__ul { margin: 1px 0 0; padding-left: 16px; }

/* the margin rail of years */
.rails { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px 10px; }
.rails--tight { gap: 6px 10px; }
.rail {
  margin: 0; padding-right: 8px; border-right: 1.5px solid var(--s-rule);
  font: 400 18px/1.4 var(--brush); color: var(--s-red);
}
.ent__h { margin: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; font-weight: 700; text-wrap: initial; }
.ent__org { font-weight: 400; }
.ent__when { flex: 0 0 auto; font-weight: 400; font-style: normal; color: var(--s-muted); }
.ent__org-h { margin: 0; font-size: 13.5px; font-weight: 700; text-wrap: initial; }
.ent__h--role { margin-top: 4px; font-weight: 600; font-style: italic; }
.cv__ul + .ent__h--role { margin-top: 6px; }

.edu { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; }
.edu__when { color: var(--s-muted); }
.skills { margin: 0; display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 3px 12px; }
.skills dt { font-weight: 700; }
.skills dd { margin: 0; }
.press__url { display: block; font-size: 11.5px; color: var(--s-muted); overflow-wrap: anywhere; }

/* ── Academic CV: which second paragraph ──────────────────────────────── */
/* The page carries all four; the checked radio picks one (rules in the page
   head, per version). Without :has() the default stays, as without CSS. */
@supports not selector(:has(*)) {
  .pv:not(.pv--default), .dl:not(.dl--default) { display: none; }
}
.pick {
  margin: 2px 0 0; padding: 8px 12px 10px; min-width: 0;
  border: 1px dashed #8C8379; border-radius: 2px;
  display: flex; flex-direction: column; gap: 8px;
}
.pick__legend { padding: 0 4px; font-size: 12.5px; font-weight: 700; }
.pick__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.pick__opt { position: relative; display: inline-flex; }
.pick__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick__opt span {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border: 1px solid #8C8379; border-radius: 16px; font-size: 12.5px; line-height: 1.2;
}
.pick__opt input:checked + span { background: var(--s-ink); border-color: var(--s-ink); color: #FFFFFF; }
.pick__opt input:hover:not(:checked) + span { border-color: var(--s-ink); }
.pick__opt input:focus-visible + span { outline: 3px solid var(--s-red); outline-offset: 2px; }
.pick__note { font-size: 11.5px; color: var(--s-muted); }

/* ── Phones and narrow windows: one readable column ───────────────────── */
@media screen and (max-width: 859px) {
  .bar__title { font-size: 22px; }
  .cv { align-items: stretch; gap: 16px; padding: 16px 16px 48px; }
  .sheet, .sheet + .sheet { width: auto; min-height: 0; padding: 22px 16px 18px; gap: 16px; font-size: 16px; line-height: 1.5; }
  .cvp--academic .sheet, .cvp--academic .sheet + .sheet { padding: 22px 16px 18px; gap: 16px; line-height: 1.5; }
  .cvp--academic .rails, .cvp--academic .rails--tight { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sheet__ink { display: none; }
  .cv__name { font-size: 34px; line-height: 1.05; }
  .cv__under { width: min(260px, 80%); height: 18px; }
  .cv__tag { font-size: 16px; }
  .cv__contact, .cv__rtw { font-size: 15px; }
  .cv__contact a { overflow-wrap: anywhere; }
  .cv__run { margin-left: 0 !important; flex-wrap: wrap; }
  .cv__run-name { font-size: 20px; }
  .cv__run span:last-child, .sheet__foot, .pick__note, .press__url { font-size: 14px; }
  .pick__legend, .pick__opt span { font-size: 15px; }
  .pick__opt span { min-height: 40px; border-radius: 20px; }
  .rails, .rails--tight { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rail { border: 0; padding: 0; margin-top: 10px; font-size: 19px; line-height: 1.2; }
  .rail:first-child { margin-top: 0; }
  .rail:empty { display: none; }
  .rails--tight .ent--line + .ent--line { margin-top: 8px; }
  .ent__h, .ent__org-h { flex-wrap: wrap; column-gap: 12px; row-gap: 0; font-size: 16px; }
  .edu { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .edu__when { margin-bottom: 8px !important; }
  .skills { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .skills dd { margin-bottom: 8px; }
}
@media screen and (max-width: 599px) {
  .bar { padding: 8px 16px; }
  .bar__note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── Print and PDF: exactly one A4 page per sheet ─────────────────────── */
@page { size: A4; margin: 0; }
@media print {
  html, body { background: #FFFFFF !important; }
  .bar, .skip, .gate, .pick { display: none !important; }
  .cv { display: block; padding: 0; }
  .sheet, .sheet + .sheet {
    width: 210mm; height: 297mm; min-height: 0;
    box-shadow: none; break-after: page; break-inside: avoid;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  .sheet:last-child { break-after: auto; }
  .sheet a { text-decoration: none; }
}