/* ============================================================================
   ADVOKE CV — templates/tokens.css
   The contract between template config (data) and template CSS (style).
   Every template gets its design through CSS custom properties written by
   the render engine onto the `.resume` wrapper. Nothing below hard-codes a
   colour, font or spacing value — everything falls back to a sensible
   default so a malformed config can never break the page.
   ============================================================================ */

/* ── 1. Page geometry ──────────────────────────────────────────────────── */

.resume {
  /* A4 by default. Letter overrides via [data-page-format="letter"]. */
  --t-page-width: 210mm;
  --t-page-min-height: 297mm;

  /* Fallback tokens — always present, even if the config omits a value. */
  --t-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --t-font-heading: var(--t-font-body);

  --t-fs-base: 10.5pt;
  --t-lh: 1.45;
  --t-ls: 0em;

  --t-heading-size: 11pt;
  --t-heading-weight: 700;
  --t-heading-transform: uppercase;
  --t-heading-tracking: 0.14em;
  --t-heading-rule-weight: 2px;
  --t-heading-rule-color: #FFC107;
  --t-heading-space-above: 0px;
  --t-heading-space-below: 0px;

  --t-accent: #FFC107;
  --t-accent-soft: #FFF4C2;
  --t-ink: #0F172A;
  --t-ink-2: #334155;
  --t-muted: #475569;
  --t-rule: #E7E5E4;
  --t-paper: #FFFFFF;
  --t-sidebar-bg: transparent;

  --t-page-pad: 16mm;
  --t-section-gap: 14px;
  --t-block-gap: 8px;
  --t-paragraph-gap: 6px;
  --t-bullet-indent: 16px;
  --t-hanging-indent: 0px;
  --t-bullet-style: disc;

  --t-header-align: left;
  --t-name-size: 22pt;
  --t-name-weight: 800;
  --t-name-tracking: -0.01em;
  --t-name-transform: none;
  --t-name-color: #0F172A;
  --t-title-size: 11.5pt;
  --t-title-weight: 500;
  --t-title-tracking: 0em;
  --t-title-transform: none;
  --t-title-color: #475569;
  --t-contact-size: 10pt;

  --t-band-bg: #FFC107;
  --t-band-fg: #0F172A;
  --t-band-pad: 16px;

  --t-avatar-size: 60px;

  --t-sidebar-width: 34%;
  --t-sidebar-pad: 16px;
  --t-main-pad: 16px;
  --t-sidebar-fg: #0F172A;
  --t-sidebar-muted: #475569;
  --t-sidebar-heading-fg: #0F172A;
  --t-sidebar-heading-rule: #FFC107;

  --t-split-left: 50%;
  --t-split-right: 50%;
  --t-split-gap: 20px;
  --t-split-rail-bg: transparent;
  --t-split-rail-border: transparent;
  --t-split-rail-border-width: 0px;

  --t-timeline-rail: #D6D3D1;
  --t-timeline-node: #0F172A;
  --t-timeline-node-size: 10px;
  --t-timeline-rail-width: 2px;
  --t-timeline-indent: 20px;

  --t-skills-columns: 2;
  --t-skills-gap: 16px;
  --t-matrix-columns: 3;
  --t-matrix-gap: 18px;
  --t-competencies-columns: 3;
  --t-competency-chip-bg: #FFF4C2;
  --t-competency-chip-fg: #8A6100;

  --t-banner-height: 120px;
  --t-banner-overlap: 32px;
  --t-banner-pattern-opacity: 0.12;

  /* Page geometry — used by print and by screen previews. */
  box-sizing: border-box;
  width: var(--t-page-width);
  min-height: var(--t-page-min-height);
  background: var(--t-paper);
  color: var(--t-ink);
  font-family: var(--t-font-body);
  font-size: var(--t-fs-base);
  line-height: var(--t-lh);
  letter-spacing: var(--t-ls);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-ligatures: common-ligatures contextual;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: none;
}

.resume[data-page-format="letter"] {
  --t-page-width: 215.9mm;
  --t-page-min-height: 279.4mm;
}

.resume,
.resume *,
.resume *::before,
.resume *::after {
  box-sizing: border-box;
}

/* ── 2. Universal typography inside a resume ──────────────────────────── */

.resume h1,
.resume h2,
.resume h3,
.resume h4,
.resume h5,
.resume h6 {
  margin: 0;
  font-family: var(--t-font-heading);
  color: var(--t-ink);
  line-height: 1.2;
  font-weight: var(--t-heading-weight);
  letter-spacing: 0;
  text-wrap: pretty;
  break-after: avoid;
}

.resume p {
  margin: 0;
  line-height: var(--t-lh);
}

.resume p + p {
  margin-top: var(--t-paragraph-gap);
}

.resume a {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}

.resume ul,
.resume ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.resume li {
  margin: 0;
}

.resume strong,
.resume b {
  font-weight: 600;
  color: var(--t-ink);
}

.resume em,
.resume i {
  font-style: italic;
}

.resume hr {
  border: 0;
  margin: 0;
  padding: 0;
}

.resume img,
.resume svg {
  max-width: 100%;
}

/* ── 3. Layout shell ──────────────────────────────────────────────────── */

.resume > .layout {
  min-height: inherit;
  display: block;
  padding: var(--t-page-pad);
}

.resume-body {
  margin-top: var(--t-section-gap);
}

/* ── 4. Header ────────────────────────────────────────────────────────── */

.resume-header {
  display: block;
  text-align: var(--t-header-align);
}

.resume-header__identity {
  min-width: 0;
}

.resume-header__name {
  font-family: var(--t-font-heading);
  font-size: var(--t-name-size);
  font-weight: var(--t-name-weight);
  letter-spacing: var(--t-name-tracking);
  text-transform: var(--t-name-transform);
  color: var(--t-name-color);
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.resume-header__name--split {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.28em;
  align-items: baseline;
}

.resume-header__name-first {
  font-weight: 300;
  color: var(--t-name-color);
}

.resume-header__name-last {
  font-weight: 800;
  color: var(--t-accent);
}

.resume-header__title {
  font-family: var(--t-font-body);
  font-size: var(--t-title-size);
  font-weight: var(--t-title-weight);
  letter-spacing: var(--t-title-tracking);
  text-transform: var(--t-title-transform);
  color: var(--t-title-color);
  margin: 0.28em 0 0;
  line-height: 1.3;
}

/* Contact rows -------------------------------------------------------- */

.resume-header__contact {
  margin: 0.55em 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 0.55em;
  font-size: var(--t-contact-size);
  color: var(--t-muted);
  align-items: center;
}

.resume-header__contact--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2em;
  text-align: left;
}

.resume-header--center .resume-header__contact--stacked {
  align-items: center;
  text-align: center;
}

.resume-header__contact--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.2em 1.2em;
  justify-items: start;
}

.resume-header__contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-width: 0;
  max-width: 100%;
}

.resume-header__contact-sep {
  color: var(--t-muted);
  opacity: 0.7;
  user-select: none;
}

.resume-header__contact-link,
.resume-header__contact-static {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-width: 0;
  color: inherit;
}

.resume-header__contact-link:hover {
  color: var(--t-accent);
}

.resume-header__contact-icon {
  display: inline-flex;
  width: 0.92em;
  height: 0.92em;
  flex-shrink: 0;
  color: var(--t-accent);
  opacity: 0.85;
}

.resume-header__contact-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.resume-header__contact-text {
  overflow-wrap: anywhere;
}

/* Header divider ------------------------------------------------------ */

.resume-header__divider-wrap {
  margin-top: 0.7em;
}

.resume-divider {
  border: 0;
  height: 1px;
  background: var(--t-rule);
  width: 100%;
  margin: 0;
}

.resume-divider--hair { height: 0.75px; opacity: 0.85; }
.resume-divider--thin { height: 1px; }
.resume-divider--double {
  height: 0;
  border-top: 1px solid var(--t-rule);
  border-bottom: 1px solid var(--t-rule);
  background: transparent;
  padding-top: 2px;
}
.resume-divider--accent {
  height: 2px;
  background: var(--t-accent);
}

/* Header alignment variants ------------------------------------------ */

.resume-header--center {
  text-align: center;
}
.resume-header--center .resume-header__contact {
  justify-content: center;
}
.resume-header--right {
  text-align: right;
}
.resume-header--right .resume-header__contact {
  justify-content: flex-end;
}

/* ── 5. Avatar ────────────────────────────────────────────────────────── */

.resume-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.resume-avatar__svg {
  display: block;
  width: var(--t-avatar-size);
  height: auto;
}

/* Positioning inside the header -------------------------------------- */

.resume-header {
  position: relative;
}

.resume-header--left .resume-avatar--header-right,
.resume-header--center .resume-avatar--header-right {
  position: absolute;
  right: 0;
  top: 0;
}

.resume-header--right .resume-avatar--header-left {
  position: absolute;
  left: 0;
  top: 0;
}

.resume-avatar--header-center {
  margin: 0 auto 0.5em;
  display: flex;
}

.resume-avatar--header-left {
  margin-bottom: 0.5em;
}

/* ── 6. Sections ──────────────────────────────────────────────────────── */

.resume-section + .resume-section {
  margin-top: var(--t-section-gap);
}

.resume-section__heading {
  font-family: var(--t-font-heading);
  font-size: var(--t-heading-size);
  font-weight: var(--t-heading-weight);
  text-transform: var(--t-heading-transform);
  letter-spacing: var(--t-heading-tracking);
  color: var(--t-ink);
  margin: 0 0 var(--t-block-gap);
  padding-top: var(--t-heading-space-above);
  line-height: 1.25;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  break-after: avoid;
}

.resume-section__heading-text {
  display: inline-block;
  min-width: 0;
}

/* Heading rules ------------------------------------------------------ */

.resume-section__heading--underline {
  padding-bottom: 0.28em;
  border-bottom: var(--t-heading-rule-weight) solid var(--t-heading-rule-color);
}

.resume-section__heading--thin-underline {
  padding-bottom: 0.24em;
  border-bottom: 0.75px solid var(--t-heading-rule-color);
}

.resume-section__heading--fine-underline {
  padding-bottom: 0.24em;
  border-bottom: 1px solid var(--t-heading-rule-color);
}

.resume-section__heading--accent-underline {
  padding-bottom: 0.3em;
  border-bottom: var(--t-heading-rule-weight) solid var(--t-heading-rule-color);
  position: relative;
}

.resume-section__heading--block {
  padding-bottom: 0.3em;
  border-bottom: var(--t-heading-rule-weight) solid var(--t-heading-rule-color);
  display: block;
}

.resume-section__heading--accent-bar,
.resume-section__heading--bar-left {
  display: inline-flex;
  align-items: center;
  padding-left: 0.7em;
  position: relative;
}

.resume-section__heading--accent-bar::before,
.resume-section__heading--bar-left::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.08em;
  bottom: 0.08em;
  width: var(--t-heading-rule-weight, 3px);
  background: var(--t-heading-rule-color);
  border-radius: 2px;
}

.resume-section__heading--tag-left {
  display: inline-flex;
  align-items: center;
  padding-left: 0.8em;
  position: relative;
}

.resume-section__heading--tag-left::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 3px;
  background: var(--t-heading-rule-color);
  border-radius: 2px;
}

.resume-section__heading--small-caps-space {
  font-variant: small-caps;
  letter-spacing: calc(var(--t-heading-tracking) + 0.06em);
}

.resume-section__heading--numbered {
  padding-left: 2em;
  position: relative;
  counter-reset: none;
}

.resume-section__heading--numbered::before {
  content: attr(data-number);
  position: absolute;
  left: 0;
  top: -0.1em;
  font-size: 1.75em;
  font-weight: 900;
  color: var(--t-accent);
  letter-spacing: -0.02em;
  line-height: 1;
}

.resume-section__heading--none {
  border: 0;
}

/* ── 7. Entries ───────────────────────────────────────────────────────── */

.resume-entries {
  display: block;
}

.resume-entry {
  break-inside: avoid;
  page-break-inside: avoid;
}

.resume-entry + .resume-entry {
  margin-top: calc(var(--t-block-gap) + 2px);
}

.resume-entry__head {
  min-width: 0;
}

.resume-entry__title {
  font-family: var(--t-font-heading);
  font-size: calc(var(--t-fs-base) + 0.6pt);
  font-weight: 700;
  color: var(--t-ink);
  letter-spacing: 0;
  line-height: 1.28;
  margin: 0;
}

.resume-entry__link {
  color: var(--t-ink);
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}

.resume-entry__link:hover {
  color: var(--t-accent);
  border-bottom-color: var(--t-accent);
}

.resume-entry__org,
.resume-entry__role {
  margin: 0.12em 0 0;
  font-size: calc(var(--t-fs-base) - 0.2pt);
  color: var(--t-muted);
  line-height: 1.35;
}

.resume-entry__company,
.resume-entry__org-name,
.resume-entry__grade,
.resume-entry__issuer,
.resume-entry__cred,
.resume-entry__relation,
.resume-entry__type {
  color: var(--t-ink-2);
}

.resume-entry__location,
.resume-entry__date {
  color: var(--t-muted);
}

.resume-entry__sep {
  color: var(--t-muted);
  opacity: 0.7;
  padding: 0 0.1em;
}

.resume-entry__context {
  margin-top: 0.28em;
  color: var(--t-ink-2);
  font-size: var(--t-fs-base);
  line-height: var(--t-lh);
}

.resume-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2em 1em;
  margin-top: 0.12em;
  font-size: calc(var(--t-fs-base) - 0.2pt);
  color: var(--t-muted);
}

.resume-meta__left { min-width: 0; }
.resume-meta__secondary { min-width: 0; color: var(--t-ink-2); }
.resume-meta__right { margin-left: auto; text-align: right; white-space: nowrap; }

/* ── 8. Bullets ───────────────────────────────────────────────────────── */

.resume-bullets {
  margin-top: 0.32em;
  padding-left: var(--t-bullet-indent);
  list-style: var(--t-bullet-style);
}

.resume-bullets.resume-bullets {
  list-style: disc;
}

.resume-bullet {
  padding-left: 0.1em;
  margin-top: 0.15em;
  line-height: var(--t-lh);
  color: var(--t-ink-2);
  orphans: 3;
  widows: 3;
}

.resume-bullet::marker {
  color: var(--t-accent);
}

/* When a template requests a non-default bullet, the engine writes it to
 * the --t-bullet-style token; we override the list-style through a
 * data-driven selector on the resume wrapper. */
.resume[data-bullet="square"] .resume-bullets { list-style: square; }
.resume[data-bullet="dash"] .resume-bullets { list-style: none; }
.resume[data-bullet="dash"] .resume-bullet { padding-left: 1em; position: relative; }
.resume[data-bullet="dash"] .resume-bullet::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--t-accent);
}
.resume[data-bullet="arrow"] .resume-bullets { list-style: none; }
.resume[data-bullet="arrow"] .resume-bullet { padding-left: 1em; position: relative; }
.resume[data-bullet="arrow"] .resume-bullet::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--t-accent);
}
.resume[data-bullet="none"] .resume-bullets { list-style: none; padding-left: 0; }
.resume[data-bullet="none"] .resume-bullet { padding-left: 0; }

/* ── 9. Chips, skills, matrix ─────────────────────────────────────────── */

.resume-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28em 0.4em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resume-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.16em 0.55em;
  border-radius: 999px;
  background: var(--t-accent-soft);
  color: var(--t-ink);
  font-size: calc(var(--t-fs-base) - 0.4pt);
  line-height: 1.35;
  border: 1px solid transparent;
}

.resume-chips--skills .resume-chip {
  background: var(--t-paper);
  border-color: var(--t-rule);
}

.resume-chips--competencies .resume-chip {
  background: var(--t-competency-chip-bg);
  color: var(--t-competency-chip-fg);
}

.resume-chips--interests .resume-chip {
  background: var(--t-accent-soft);
}

.resume-matrix {
  display: grid;
  grid-template-columns: repeat(var(--t-matrix-columns, 3), minmax(0, 1fr));
  gap: 0.6em var(--t-matrix-gap, 18px);
}

.resume-matrix__group {
  min-width: 0;
}

.resume-matrix__label {
  font-family: var(--t-font-heading);
  font-size: calc(var(--t-fs-base) - 1pt);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-accent);
  margin: 0 0 0.28em;
  line-height: 1.25;
}

.resume-matrix__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.12em;
}

.resume-matrix__item {
  font-size: var(--t-fs-base);
  color: var(--t-ink-2);
  line-height: 1.4;
}

.resume-skills-list {
  display: grid;
  grid-template-columns: repeat(var(--t-skills-columns, 2), minmax(0, 1fr));
  gap: 0.2em var(--t-skills-gap, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.resume-skill__item {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  font-size: var(--t-fs-base);
  color: var(--t-ink-2);
  line-height: 1.4;
  min-width: 0;
}

.resume-skill__name {
  flex: 1 1 auto;
  min-width: 0;
}

.resume-skill__level {
  flex: 0 0 auto;
  font-size: calc(var(--t-fs-base) - 1pt);
  color: var(--t-muted);
  letter-spacing: 0.02em;
}

/* ── 10. Languages ────────────────────────────────────────────────────── */

.resume-languages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.2em 1em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resume-language {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em;
  font-size: var(--t-fs-base);
  line-height: 1.45;
}

.resume-language__name { font-weight: 600; color: var(--t-ink); }
.resume-language__level { color: var(--t-muted); font-size: calc(var(--t-fs-base) - 0.6pt); }
.resume-language__cert { color: var(--t-muted); font-style: italic; font-size: calc(var(--t-fs-base) - 0.6pt); }

/* ── 11. Publications ─────────────────────────────────────────────────── */

.resume-publications {
  margin: 0;
  padding: 0;
  list-style: none;
}

.resume-publications--numbered {
  counter-reset: pub;
}

.resume-publication {
  padding-left: var(--t-hanging-indent, 0);
  text-indent: calc(var(--t-hanging-indent, 0) * -1);
  margin-top: 0.24em;
  font-size: var(--t-fs-base);
  line-height: var(--t-lh);
  color: var(--t-ink-2);
}

.resume-publication:first-child {
  margin-top: 0;
}

.resume-publication__marker {
  display: inline-block;
  min-width: 1.9em;
  color: var(--t-accent);
  font-weight: 700;
  text-indent: 0;
}

.resume-publication__citation {
  text-indent: 0;
}

.resume-publication__title {
  font-style: italic;
  color: var(--t-ink);
}

.resume-publication__venue {
  color: var(--t-ink-2);
}

.resume-publication__year {
  font-weight: 600;
  color: var(--t-ink);
}

.resume-publication__doi {
  color: var(--t-accent);
  overflow-wrap: anywhere;
}

/* ── 12. Inline lists ─────────────────────────────────────────────────── */

.resume-inline-list {
  margin-top: 0.28em;
  font-size: calc(var(--t-fs-base) - 0.4pt);
  color: var(--t-muted);
  line-height: 1.4;
}

.resume-inline-list__label {
  font-weight: 600;
  color: var(--t-ink-2);
  margin-right: 0.3em;
}

.resume-inline-list__value {
  color: var(--t-ink-2);
}

/* ── 13. Metrics strip ────────────────────────────────────────────────── */

.resume-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4em 0.8em;
  margin-top: 0.4em;
  padding: 0.45em 0.6em;
  background: #FDFDFC;
  border: 1px solid var(--t-rule);
  border-radius: 4px;
}

.resume-metric {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  min-width: 0;
}

.resume-metric__label {
  font-size: calc(var(--t-fs-base) - 1.4pt);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--t-muted);
  font-weight: 700;
}

.resume-metric__value {
  font-size: calc(var(--t-fs-base) - 0.2pt);
  color: var(--t-ink);
  font-weight: 600;
}

/* ── 14. Executive band ───────────────────────────────────────────────── */

.resume-exec__band {
  margin-top: 0.7em;
}

.resume-exec__summary {
  font-size: calc(var(--t-fs-base) + 0.3pt);
  line-height: 1.5;
  color: var(--t-ink-2);
}

.resume-exec__summary--italic { font-style: italic; }

.resume-exec__competencies {
  display: grid;
  grid-template-columns: repeat(var(--t-competencies-columns, 3), minmax(0, 1fr));
  gap: 0.28em 0.9em;
  margin-top: 0.55em;
}

.resume-exec__competencies--chips {
  display: block;
}

.resume-exec__competency {
  display: block;
  font-size: var(--t-fs-base);
  color: var(--t-ink-2);
  line-height: 1.4;
  padding-left: 0.7em;
  position: relative;
}

.resume-exec__competency::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--t-accent);
}

/* ── 15. Print placeholders (editor-only) ─────────────────────────────── */

.resume-placeholder {
  font-style: italic;
  color: var(--t-muted);
  font-size: calc(var(--t-fs-base) - 0.4pt);
  padding: 0.2em 0;
  border-left: 2px dashed var(--t-rule);
  padding-left: 0.7em;
}

/* ── 16. Print safety net ─────────────────────────────────────────────── */

@media print {
  .resume {
    width: 100%;
    min-height: 0;
    box-shadow: none;
    border-radius: 0;
  }
  .resume > .layout {
    padding: 0;
  }
}