/* ============================================================
   resume-screen.css — on-screen resume.

   Applies Figma node 11936:34878 to the web page so /resume/ and its
   printed output read as the same document: uppercase centred masthead,
   contact row without separator dots, uppercase section headings over a
   hairline rule, accent role titles with company and dates right-aligned
   on one line, and text filling the column.

   Two deliberate differences from the print sheet, both forced:

   1. Sizes are screen sizes, not the design's print points. The design
      sets 9pt body on A4; at that size on screen it is unreadable. The
      design's PROPORTIONS are kept (name 1.8x body, role and headings
      ~1.1x) at a 15px base.

   2. The design's #2559b3 scores about 2.5:1 on this site's near-black
      background, well under the 4.5:1 minimum. Dark mode uses a
      lightened blue of the same hue; light mode uses the design value.

   Loads after styles.css. Print rules live in resume-print.css.
   ============================================================ */

.doc{
  --resume-accent:#5b9bff;                     /* dark mode: lightened for contrast */
  --resume-rule:rgba(255,255,255,.22);
}
[data-theme="light"] .doc{
  --resume-accent:#2559b3;                     /* the design value */
  --resume-rule:rgba(0,0,0,.35);
}

/* ---- masthead ------------------------------------------------- */
.doc header{ text-align:center; }
.doc__name{
  text-transform:uppercase;
  letter-spacing:0;
  font-weight:600;
}
.doc__role{ font-weight:500; }
.doc__contact{
  gap:0 1.75rem;                                /* design uses gaps, not dots */
  font-size:0.9375rem;
}
.doc__contact .sep{ display:none; }
.doc__contact a{ color:var(--resume-accent); }
.doc__contact a[href^="tel"],
.doc__contact a[href^="mailto"]{ color:inherit; }

/* ---- section headings: uppercase over a hairline rule ---------- */
.doc__h{
  display:block;
  font-weight:600;
  border-bottom:1px solid var(--resume-rule);
  padding-bottom:.45rem;
  margin-bottom:.9rem;
}

/* ---- roles: accent title left, company and dates right --------- */
.doc__job{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  column-gap:1.25rem;
  margin-bottom:.7rem;
}
.doc__job-title{
  grid-column:1;
  margin:0;
  color:var(--resume-accent);
  font-weight:600;
}
.doc__job-meta{
  grid-column:2;
  margin:0;
  text-align:right;
  white-space:nowrap;
  font-weight:500;
}
.doc__job ul{ grid-column:1 / -1; margin-top:.6rem; }

/* ---- text fills the column, as on the sheet -------------------- */
.doc__summary,
.doc__tools,
.doc__job li,
.doc__entry-sub,
.doc__entry-main{ max-width:none; }

/* ---- Recognition and Education: award first, on one line ------- */
.doc__two{ gap:1.5rem 3rem; }
.doc__two > div{ display:flex; flex-wrap:nowrap; align-items:baseline; }
.doc section:has(> .doc__entry-main):not(:has(.doc__job)){
  display:flex; flex-wrap:wrap; align-items:baseline;
}
.doc section:has(> .doc__entry-main) > .doc__h{ flex:0 0 100%; }
.doc__entry-main{ order:1; flex:0 0 auto; }
.doc__entry-sub { order:2; flex:0 0 auto; }
.doc__entry-sub::before{ content:"\00a0-\00a0"; }

/* Each heading carries its own rule, so the <hr> separators are
   redundant — but they were also supplying the gap between sections,
   so that spacing has to move onto the sections themselves. */
.doc hr{ display:none; }
/* the sections are separated by <hr> elements in the markup, so
   `section + section` never matches — target every section instead */
.doc section{ margin-top:2.25rem; }
.doc section:first-of-type{ margin-top:1.5rem; }

@media (max-width:640px){
  /* a two-column role header is cramped on a phone */
  .doc__job{ grid-template-columns:1fr; }
  .doc__job-meta{ grid-column:1; text-align:left; white-space:normal; }
  .doc__two > div,
  .doc section:has(> .doc__entry-main):not(:has(.doc__job)){ flex-wrap:wrap; }
}