/* INRS visual identity.
   ---------------------------------------------------------------------------
   Palette and typography follow the Service des communications' identity
   guidelines, with the colour values taken from the tokens the institute
   publishes on its own site rather than converted by eye from the Pantone
   reference. Bleu INRS — Pantone 2768 C, #071D49 — carries the identity on
   every screen.

   The logo is deliberately absent. It is not ours to place on a data
   collection instrument, and a mark at the top of a questionnaire reads as the
   institute soliciting an answer rather than as a researcher asking for one.
   The typography and the blue do the identifying work instead.

   The fonts are vendored, not linked. Same rule as maplibre and the QR
   library: a respondent's browser makes no third-party request, which is what
   the consent form promises. League Gothic is a variable font on a width axis,
   so the guidelines' "semi-condensed, all caps" for titles is set exactly
   (font-stretch: 87.5%) rather than approximated. Where the fonts cannot load
   the stacks fall back to Arial and Impact, which is what the guidelines
   themselves prescribe for Office documents. */

@font-face {
  font-family: "Metropolis";
  src: url("/vendor/fonts/Metropolis-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("/vendor/fonts/Metropolis-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("/vendor/fonts/Metropolis-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "League Gothic";
  src: url("/vendor/fonts/LeagueGothic.ttf") format("truetype");
  font-weight: 400; font-stretch: 75% 100%; font-style: normal; font-display: swap;
}

:root {
  /* The institute's published palette, verbatim. */
  --inrs-navy:  #071D49;   /* Bleu INRS, Pantone 2768 C */
  --inrs-blue:  #0064B1;
  --inrs-sky:   #74BBF1;
  --inrs-mist:  #C4CBD3;
  --inrs-grey:  #E6E6E8;

  /* Mapped onto the names the rest of this sheet already uses, so the identity
     is a palette swap rather than a rewrite of every rule. */
  --paper:      #ffffff;
  --paper-warm: #f1f2f4;
  --ink:        #071D49;
  --ink-soft:   #4a5568;
  /* Not lighter than this: the faint tone carries small text — section
     counters, slider ends, timeline captions — and needs to clear 4.5:1 on
     white. */
  --ink-faint:  #6b7688;
  --line:       #c4cbd3;
  --line-soft:  #e6e6e8;
  --accent:     #0064b1;
  --accent-soft:#74bbf1;
  --water:      #d9e6f2;
  --danger:     #b3261e;
  --ok:         #1e7b4f;
  /* Squarer than before. The institute's own surfaces are close to right
     angles, and a 10px radius on every card read as consumer software. */
  --radius:     4px;
  --pad:        clamp(1rem, 4vw, 1.75rem);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 16px/1.6 "Metropolis", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  /* Room for the fixed footer nav, including the iOS home indicator. */
  padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}
/* Two-row footer below 30rem — see the navbar rules. */
@media (max-width: 30rem) {
  body { padding-bottom: calc(7.5rem + env(safe-area-inset-bottom)); }
}

.hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* --- chrome ---------------------------------------------------------------- */

/* The identity band. With no logo on the page this bar is what marks the
   instrument as the institute's, so it carries Bleu INRS solid rather than the
   translucent paper it used to. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--inrs-navy);
  border-bottom: 0;
}
.topbar-inner {
  max-width: 44rem; margin: 0 auto;
  padding: .6rem var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand {
  font-family: "League Gothic", Impact, sans-serif;
  font-stretch: 87.5%; text-transform: uppercase;
  font-size: 1.15rem; letter-spacing: .03em; color: #fff;
}
.lang { display: flex; gap: .25rem; }
.lang button {
  border: 1px solid transparent; background: none; color: rgba(255, 255, 255, .72);
  font: inherit; font-size: .8rem; letter-spacing: .05em;
  padding: .15rem .45rem; border-radius: 6px; cursor: pointer;
}
.lang button[aria-current="true"] { color: #fff; border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .14); }

.progress { height: 3px; background: rgba(255, 255, 255, .22); }
.progress-fill { height: 100%; width: 0; background: var(--inrs-sky); transition: width .35s ease; }

.shell { max-width: 44rem; margin: 0 auto; padding: var(--pad); }
.loading { color: var(--ink-faint); }

/* Three tracks rather than a flex row, so the primary button sits in the true
   centre of the bar whether or not Back is on screen — under a flex row it
   drifted left on the first page of every section and back again afterwards.
   The outer tracks are equal, so the middle one is centred by construction. */
.navbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid;
  /* minmax(0, …) rather than a bare 1fr: a bare fr track keeps a min-content
     floor, so the counter's own width made the right track wider than the
     empty left one and pushed the "centred" button off centre by half of it. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: .5rem;
  padding: .7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line-soft);
}
/* The row is pinned as well as the column. The markup order is back, counter,
   next — so with only the columns declared, auto-placement had already passed
   column 2 by the time it reached the next button and wrapped it onto a second
   row, doubling the height of the bar. */
#btn-back { grid-row: 1; grid-column: 1; justify-self: start; }
/* Save-for-later and Continue travel together as the centred pair. */
.nav-centre {
  grid-row: 1; grid-column: 2; justify-self: center;
  display: flex; align-items: center; gap: .5rem;
}
.navbar-status {
  grid-row: 1; grid-column: 3; justify-self: end; text-align: right;
  min-width: 0;
  font-size: .78rem; color: var(--ink-faint); line-height: 1.25;
}
/* Four things do not fit across a phone. Back, save-for-later, Continue and
   the counter come to about 500px of content before gaps, and at 390 they
   simply overlapped each other.
   
   So below 30rem the bar becomes two rows: the pair of buttons on top, where
   the thumb is, and the two pieces of chrome — where you have been, where you
   are — on a quieter line beneath. Nothing is dropped and nothing shrinks to
   an unreadable size. */
@media (max-width: 30rem) {
  .navbar { grid-template-columns: 1fr 1fr; gap: .35rem .5rem; padding-top: .5rem; }
  .nav-centre { grid-row: 1; grid-column: 1 / -1; justify-self: center; }
  #btn-back { grid-row: 2; grid-column: 1; justify-self: start; }
  .navbar-status { grid-row: 2; grid-column: 2; justify-self: end; }
  /* The second row is chrome, not action: it does not need thumb-sized targets
     and taking two full button heights off a phone screen would cost more than
     it is worth. */
  #btn-back { min-height: 2.1rem; padding: .3rem .6rem; font-size: .85rem; }
  .navbar-status { font-size: .74rem; }
}

/* --- controls -------------------------------------------------------------- */

.btn {
  font: inherit; font-weight: 600;
  padding: .65rem 1.15rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--paper-warm); color: var(--ink);
  cursor: pointer; min-height: 2.9rem;
}
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.ghost { background: none; border-color: transparent; color: var(--ink-soft); }
.btn.small { padding: .35rem .7rem; min-height: 2.2rem; font-size: .85rem; }
.btn.danger { color: var(--danger); }
/* Links that are buttons — the map link on the thank-you page, the invitation
   at the foot of a keepsake — need the box the padding assumes. */
a.btn { display: inline-block; text-decoration: none; text-align: center; line-height: 1.55; }

h1.section-title {
  font-family: "League Gothic", Impact, sans-serif;
  font-stretch: 87.5%; text-transform: uppercase; font-weight: 400;
  font-size: clamp(2rem, 7vw, 2.6rem); line-height: 1.04;
  letter-spacing: .015em; color: var(--inrs-navy);
  margin: .25rem 0 .6rem;
}
/* Metropolis Bold for subtitles, which is what the guidelines ask for — the
   condensed face is reserved for titles proper. */
h2.group-title {
  font-size: .82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--inrs-blue); margin: 2.5rem 0 -.5rem;
}
.section-intro { color: var(--ink-soft); margin: 0 0 1.5rem; }

/* Which section a grouped page belongs to. Not a heading: the group is the
   heading on those pages, and this is the label above it. */
.section-eyebrow {
  margin: .25rem 0 .1rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--inrs-blue);
}

.q { margin: 0 0 2rem; }
.q-label { display: block; font-weight: 600; margin-bottom: .5rem; }
.q-help { display: block; color: var(--ink-soft); font-size: .88rem; margin: -.25rem 0 .6rem; }
/* The ⓘ that holds a question's caveat. The marker is drawn here rather than
   written into the markup so it cannot be read aloud as a letter; the accessible
   name comes from the summary's aria-label. */
.q-info { margin: -.1rem 0 .7rem; }
.q-info > summary {
  display: inline-grid; place-items: center; cursor: pointer;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper-warm);
  color: var(--ink-soft); font-size: .82rem; font-weight: 600; line-height: 1;
  list-style: none;
}
.q-info > summary::-webkit-details-marker { display: none; }
.q-info > summary::after { content: "i"; font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.q-info > summary:hover { border-color: var(--ink-faint); color: var(--ink); }
.q-info[open] > summary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.q-info > p {
  font-size: .85rem; font-style: italic; color: var(--ink-soft);
  border-left: 2px solid var(--accent-soft);
  padding: .4rem 0 .4rem .75rem; margin: .5rem 0 0;
}
.q-required { color: var(--danger); font-weight: 400; }
.q-error { color: var(--danger); font-size: .85rem; margin-top: .4rem; }
.q.invalid > .q-label { color: var(--danger); }

/* Question number, matching the printed instrument. Inline rather than hung in
   the margin: the column is 44rem wide and centred, so on the screens where a
   margin exists at all it is narrower than the number. */
.q-num {
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
  font-weight: 400; margin-right: .5rem;
}
.q.invalid > .q-label .q-num { color: inherit; }

/* Search box footer: the note, plus a retry button when a lookup failed. */
.search-foot { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.search-foot .search-note { flex: 1 1 auto; }
/* A code that exists but sits outside the study area: worth saying, not worth
   refusing, so it is not styled as an error. */
.search-note.caution { color: var(--accent); }

.opts { display: grid; gap: .4rem; }
.opt {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-warm); cursor: pointer; min-height: 2.9rem;
}
.opt:has(input:checked) { border-color: var(--ink); background: #fff; }
.opt input { margin-top: .2rem; accent-color: var(--ink); width: 1.05rem; height: 1.05rem; flex: none; }
.opt span { flex: 1; }

/* `search` belongs in this list: without it the address box fell back to the
   UA's default width — about half the column — which made the most important
   input in the instrument look like a leftover. */
input[type="text"], input[type="number"], input[type="email"], input[type="search"],
textarea, select {
  font: inherit; width: 100%; padding: .65rem .8rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); min-height: 2.9rem;
}
/* Safari and iOS style search inputs as rounded pills with their own metrics. */
input[type="search"] { -webkit-appearance: none; appearance: none; box-sizing: border-box; }
input:focus-visible, textarea:focus-visible, select:focus-visible,
.opt:focus-within, .btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
textarea { min-height: 5.5rem; resize: vertical; }
input.narrow { max-width: 9rem; }

/* The move-year box and the reading of what was typed into it. Baseline-
   aligned and beside the field, so it reads as part of the answer rather than
   as a note underneath it. */
.year-row { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.year-row input { flex: none; }
.year-echo { color: var(--ink-soft); font-size: .92rem; font-variant-numeric: tabular-nums; }
.other-input { margin-top: .4rem; }

/* slider */
.slider-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem; }
.slider-row input[type="range"] { width: 100%; accent-color: var(--accent); height: 2.4rem; }
.slider-value {
  font-variant-numeric: tabular-nums; font-size: 1.1rem; min-width: 2.2rem;
  text-align: right; color: var(--ink-soft);
}
.slider-value.set { color: var(--ink); font-weight: 600; }
.slider-ends { display: flex; justify-content: space-between; font-size: .78rem; color: var(--ink-faint); }
.slider-item + .slider-item { margin-top: 1.1rem; }
.slider-item > label { display: block; font-size: .92rem; margin-bottom: .1rem; }

/* likert */
.likert { overflow-x: auto; }
.likert table { border-collapse: collapse; width: 100%; min-width: 30rem; }
.likert th { font-weight: 500; font-size: .74rem; color: var(--ink-faint); padding: .3rem; text-align: center; }
.likert th:first-child { text-align: left; width: 40%; }
.likert td { text-align: center; padding: .3rem; border-top: 1px solid var(--line-soft); }
.likert td:first-child { text-align: left; font-size: .92rem; }
.likert input { accent-color: var(--ink); width: 1.15rem; height: 1.15rem; }
.likert tr:has(input:checked) td:first-child { font-weight: 500; }
/* Under ~34rem the grid stops working; each statement becomes its own block. */
@media (max-width: 34rem) {
  .likert table, .likert thead, .likert tbody, .likert tr, .likert th, .likert td { display: block; }
  .likert table { min-width: 0; }
  .likert thead { display: none; }
  .likert tr { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .7rem; margin-bottom: .5rem; background: var(--paper-warm); }
  .likert td { border: 0; padding: .15rem 0; text-align: left; }
  .likert td:first-child { font-weight: 500; margin-bottom: .3rem; }
  .likert td[data-label]::before { content: attr(data-label); font-size: .85rem; color: var(--ink-soft); margin-right: .5rem; }
  .likert td { display: flex; align-items: center; gap: .4rem; flex-direction: row-reverse; justify-content: flex-end; }
  .likert td:first-child { display: block; }
}

/* numeric grid */
.numgrid { display: grid; gap: .5rem; }
.numgrid-row { display: grid; grid-template-columns: 1fr 6rem; align-items: center; gap: .75rem; }

/* --- map ------------------------------------------------------------------- */

.map-wrap { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.map { height: min(52vh, 26rem); background: var(--paper-warm); }
.map.tall { height: min(58vh, 30rem); }
/* The read-only trajectory map carried into later sections. Short on purpose:
   it is context above a long form, not the subject of the page. */
.map.mini { height: min(30vh, 13rem); }

.traj-map { margin: 0 0 1.5rem; }
.traj-map-caption {
  margin: .4rem 0 0; font-size: .82rem; color: var(--ink-faint);
}

.picker-search { margin-bottom: .5rem; }
.map-hint {
  position: absolute; left: .5rem; bottom: .5rem; z-index: 2;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border: 1px solid var(--line); border-radius: 6px;
  padding: .2rem .5rem; font-size: .76rem; color: var(--ink-soft);
  pointer-events: none;
}
@media (max-width: 480px) {
  .map-wrap { margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); border-radius: 0; border-left: 0; border-right: 0; }
}
.maplibregl-ctrl-attrib { font-size: .68rem; }

.search { position: relative; margin-bottom: .6rem; }
.search input { padding-right: 2.4rem; }
.search-spin {
  position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
  font-size: .78rem; color: var(--ink-faint);
}
.search-results {
  list-style: none; margin: .35rem 0 0; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff;
}
.search-results:empty { display: none; }
.search-results li { padding: .6rem .8rem; cursor: pointer; font-size: .92rem; border-top: 1px solid var(--line-soft); }
.search-results li:first-child { border-top: 0; }
.search-results li:hover, .search-results li[aria-selected="true"] { background: var(--paper-warm); }
.search-note { font-size: .82rem; color: var(--ink-soft); margin: .35rem 0 0; }

/* --- place picker (5.7) ---------------------------------------------------- */

/* The list overlays what follows rather than pushing it down the page: with
   forty matches the toggle button below would otherwise walk off the screen
   while somebody is still reading the options. */
.place-search { margin-bottom: .2rem; }
.place-search .search-results {
  position: absolute; left: 0; right: 0; z-index: 5;
  max-height: 16rem; overflow-y: auto;
  box-shadow: 0 6px 18px rgba(7, 29, 73, .12);
}
.place-search .search-results li {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
}
.place-search .search-results li.muted { color: var(--ink-soft); cursor: default; }
/* Which of the three vocabularies this name belongs to. Nine names appear in
   two of them, so the kind is what tells them apart. */
.place-kind { font-size: .78rem; color: var(--ink-faint); white-space: nowrap; }

.place-toggle { margin-top: .75rem; padding-left: 0; }
.place-toggle:hover { color: var(--ink); }
.search-note.warn { color: var(--danger); }

/* precision segmented control */
.segmented { display: flex; gap: 0; margin-top: .6rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.segmented button {
  flex: 1; font: inherit; font-size: .85rem; padding: .55rem .4rem; min-height: 2.7rem;
  border: 0; border-left: 1px solid var(--line); background: var(--paper-warm);
  color: var(--ink-soft); cursor: pointer;
}
.segmented button:first-child { border-left: 0; }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.segmented-help { font-size: .8rem; color: var(--ink-faint); margin: .35rem 0 0; }

/* --- trajectory builder ---------------------------------------------------- */

.traj-prompt { font-size: 1.15rem; font-weight: 500; margin: 0 0 .75rem; }
.traj-prompt em { font-style: normal; color: var(--accent); }

.timeline {
  display: flex; gap: .4rem; overflow-x: auto; padding: .1rem .1rem .5rem;
  margin: 0 0 1rem; scrollbar-width: thin;
}
.timeline-chip {
  flex: none; display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-warm); padding: .4rem .6rem; cursor: pointer;
  font-size: .8rem; line-height: 1.3; min-width: 5.5rem; text-align: left;
}
.timeline-chip[aria-current="true"] { border-color: var(--ink); background: #fff; }
.timeline-chip b { font-variant-numeric: tabular-nums; font-weight: 600; }
.timeline-chip span { color: var(--ink-faint); max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-chip.add { border-style: dashed; color: var(--ink-soft); justify-content: center; }

/* The chip and its delete are siblings — a button cannot contain a button —
   positioned so the × sits in the chip's top corner. */
.timeline-chip-wrap { position: relative; flex: none; display: flex; }
.chip-del {
  position: absolute; top: -.35rem; right: -.35rem; z-index: 1;
  width: 1.35rem; height: 1.35rem; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--paper);
  color: var(--danger); font: 600 .9rem/1 inherit; cursor: pointer;
  /* Off until the chip is touched or focused: eight of these along a strip is
     a row of red crosses, which reads as eight errors rather than as eight
     homes. The tap target stays full size whenever it is visible. */
  opacity: 0; transition: opacity .12s;
}
.timeline-chip-wrap:hover .chip-del,
.timeline-chip-wrap:focus-within .chip-del { opacity: 1; }
.chip-del:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
/* No hover on a touchscreen, so there it is simply always visible. */
@media (hover: none) {
  .chip-del { opacity: 1; }
}

/* "Copied from home 3" — with the way out of it. */
.saved-flash .undo-reuse { margin-left: .6rem; color: var(--ink-soft); }

.home-fields { margin-top: 1.25rem; }
/* The loop's own button — "save this home and start the next". It disappears
   once the trajectory is finished, at which point the footer's Continue is the
   only way on. */
.home-actions { display: flex; flex-direction: column; align-items: center; margin-top: 1.25rem; }
.home-actions .btn.primary { min-width: min(20rem, 100%); }

.saved-flash { font-size: .8rem; color: var(--ok); opacity: 0; transition: opacity .2s; }
.saved-flash.on { opacity: 1; }

/* --- end screen ------------------------------------------------------------ */

.reward { text-align: center; padding: 1rem 0 2rem; }
.reward h1 {
  font-family: "League Gothic", Impact, sans-serif;
  font-stretch: 87.5%; text-transform: uppercase; font-weight: 400;
  font-size: clamp(2.2rem, 8vw, 3rem); line-height: 1.04;
  color: var(--inrs-navy); margin: 0 0 .5rem;
}
.reward .map-link {
  display: block; word-break: break-all; font-size: 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem; margin: 1rem 0; color: var(--ink);
}
.code-box {
  font: 600 1.25rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em; background: #fff; border: 1px dashed var(--ink-faint);
  border-radius: var(--radius); padding: .8rem; margin: .6rem 0 1rem;
  user-select: all; word-break: break-all;
}
/* The way back into a submitted questionnaire. Set apart from the reward
   itself: it is an offer, not part of the thank-you. */
.reward-edit { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); }
.reward-edit .section-intro { margin: .8rem 0 0; font-size: .85rem; }

.notice { background: var(--paper-warm); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.notice.small { padding: .7rem .85rem; font-size: .88rem; color: var(--ink-soft); }

/* --- save for later -------------------------------------------------------- */

.resume-btn {
  font-size: .82rem; min-height: 2.4rem; padding: .45rem .8rem;
  color: var(--ink-soft); white-space: nowrap;
}
.resume-btn:hover { color: var(--ink); border-color: var(--ink-faint); }

.resume-dialog {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  padding: 0; max-width: min(28rem, calc(100vw - 2rem));
  /* The panel can outgrow a short phone once the QR is in it. */
  max-height: calc(100dvh - 2rem);
}
.resume-dialog::backdrop { background: rgba(43, 40, 34, .45); }
.resume-body { padding: 1.25rem; overflow-y: auto; }
.resume-body h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.resume-body p { font-size: .9rem; }

.resume-link-row {
  display: flex; align-items: stretch; gap: .5rem; margin: .9rem 0;
}
.resume-url {
  flex: 1; min-width: 0; font-size: .78rem; line-height: 1.4;
  /* A URL has no spaces to break at, so let it break anywhere rather than
     stretching the dialog off the side of a phone. */
  overflow-wrap: anywhere; word-break: break-all;
  background: var(--paper-warm); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .5rem .6rem;
  user-select: all;
}
.resume-qr {
  width: min(13rem, 60vw); margin: 1rem auto .5rem;
  background: #fff; padding: .5rem; border-radius: var(--radius);
  border: 1px solid var(--line);
}
.resume-qr svg { display: block; width: 100%; height: auto; }
.resume-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }

/* --- consent --------------------------------------------------------------- */

#consent-agree { font-weight: 600; }
.consent-body p { margin: 0 0 .9rem; }
.consent-body strong { font-weight: 600; }
.consent-body a { color: inherit; }
.consent-list { padding-left: 1.4rem; margin: 0 0 .9rem; }
.consent-list li { margin: 0 0 .7rem; }
.consent-contacts {
  display: grid; gap: .6rem; margin: 1.2rem 0 .9rem;
  font-size: 1rem; line-height: 1.45;
}
.consent-contact strong { font-weight: 600; }
.consent-logos {
  display: flex; gap: .8rem 1.2rem; align-items: center;
  margin: .6rem 0 1rem; flex-wrap: wrap;
}
.consent-logos img { max-width: min(45%, 280px); height: auto; }
@media (max-width: 480px) {
  .consent-logos { flex-direction: column; align-items: flex-start; }
  .consent-logos img { max-width: 100%; }
}
.draft-note {
  font-size: .78rem; color: var(--ink-faint); border: 1px solid var(--line);
  border-radius: 6px; padding: .4rem .6rem; margin: 1rem 0;
}