/* The Good Job visual system: "The Quiet Page" (DESIGN.md).
   White page, warm grey ink, near-black actions, blue for links and focus only.
   Four pale tags, one per kind of information: pink = what you exclude, blue = what you prefer,
   yellow = in your words, green = what Claude wrote. No webfont. Contrast pairs are tested in ui/tests.py. */

:root {
  /* White page, warm ink. ground and surface stay two tokens so a tinted ground costs one line. */
  --ground: #ffffff;
  --surface: #ffffff;
  --wash: #f7f7f5;
  --line: #e9e9e7;
  --ink: #37352f;
  --ink-muted: #6b6a65;
  --field-border: #8e8c86;
  --disabled: #e9e9e7;

  /* Near black for the primary action, blue for links and focus only, one red. */
  --action: #191918;
  --action-hover: #3b3a36;
  --action-tint: #efefed;
  --on-action: #ffffff;
  --link: #1d63c9;
  --focus: #1d63c9;
  --error: #c4332b;
  --error-tint: #fbeceb;

  /* Tags: pale fill, ink for text on the fill, rule for small marks on white. */
  --pink: #f8e4ec;
  --pink-ink: #6e2a48;
  --pink-rule: #c0477f;
  --blue: #e1edf6;
  --blue-ink: #1d4466;
  --blue-rule: #3a78ad;
  --yellow: #fbf0d4;
  --yellow-ink: #5c4210;
  --yellow-rule: #a87316;
  --green: #e3f0e4;
  --green-ink: #245133;
  --green-rule: #3f8458;

  --font-text: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";

  --size-xs: 0.8125rem;
  --size-s: 0.875rem;
  --size-m: 1rem;
  --size-l: 1.25rem;
  --size-xl: 1.5rem;
  --size-xxl: 2rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Three corners, three jobs: marks, controls, panels. */
  --corner-s: 4px;
  --corner: 6px;
  --corner-l: 10px;
  --control-height: 2.75rem;
  /* The one shadow: only for what floats above the page. */
  --shadow-float: 0 0 0 1px rgb(15 15 15 / 5%), 0 3px 6px rgb(15 15 15 / 10%), 0 9px 24px rgb(15 15 15 / 20%);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --quick: 160ms;
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--field-border) var(--ground);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--size-m);
  line-height: 1.5;
  caret-color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--action-tint); color: var(--ink); }

h1, h2, h3 { line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: var(--size-xxl); font-weight: 700; letter-spacing: -0.015em; }
h2 { font-size: var(--size-l); font-weight: 600; }
h3 { font-size: var(--size-m); font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--space-3); }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.typed { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon { flex: none; width: 1.25rem; height: 1.25rem; }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  padding: var(--space-2) var(--space-4);
  background: var(--action);
  color: var(--on-action);
  border-radius: var(--corner);
  z-index: 10;
}
.skip-link:focus { top: var(--space-2); }

/* Page shell */

.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--ground);
}
.masthead__inner, .page, .footer__inner {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: var(--space-4);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 3.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--size-m);
  text-decoration: none;
}
.wordmark:hover { text-decoration: none; }
/* The brand mark: three of the product’s tags, in their block order (also ui/favicon.svg). */
.wordmark__tabs { display: inline-flex; gap: 3px; }
.wordmark__tabs span { display: block; width: 0.5rem; height: 0.5rem; border-radius: 2px; }
.wordmark__tabs span:nth-child(1) { background: var(--pink-rule); }
.wordmark__tabs span:nth-child(2) { background: var(--blue-rule); }
.wordmark__tabs span:nth-child(3) { background: var(--yellow-rule); }

.masthead__aside { font-size: var(--size-s); color: var(--ink-muted); }

main { flex: 1; }
.page { padding-block: var(--space-6) var(--space-8); }

.footer { border-top: 1px solid var(--line); font-size: var(--size-s); color: var(--ink-muted); }
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-5);
}
.footer a { color: var(--ink-muted); }

/* Block progress: named blocks, no numbers, and the time left in minutes. */

.progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
}
.progress__blocks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--size-s);
}
.progress__block {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-muted);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.progress__block::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--tab, var(--line));
}
.progress__block[data-tone="pink"] { --tab: var(--pink-rule); }
.progress__block[data-tone="blue"] { --tab: var(--blue-rule); }
.progress__block[data-tone="yellow"] { --tab: var(--yellow-rule); }
.progress__block[aria-current="step"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.progress__block--done .icon { width: 1rem; height: 1rem; color: var(--ink-muted); }
.progress__time { font-size: var(--size-s); color: var(--ink-muted); }
/* Phones: the three blocks as three equal cells, each tab above its name. */
@media (max-width: 29.99rem) {
  .progress { display: block; }
  .progress__blocks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-3);
  }
  .progress__block {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    align-content: start;  /* a one-line name sits level with its two-line neighbours */
    gap: var(--space-1);
    line-height: 1.3;
  }
  .progress__block::before { grid-column: 1 / -1; }
  .progress__block .icon { grid-column: 1; }
  .progress__name { grid-column: 2; }
  .progress__block:not(.progress__block--done) .progress__name { grid-column: 1 / -1; }
  .progress__time { margin-top: var(--space-3); }
}

/* Question screen: one decision in front of you, the file beside it. */

.question-layout {
  display: grid;
  /* One column that never grows past the screen, whatever a field's intrinsic width. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}
@media (min-width: 60rem) {
  .question-layout {
    grid-template-columns: minmax(0, 37rem) 19rem;
    justify-content: space-between;
    align-items: start;
  }
  /* The file comes first in the page (above the question on phones) and goes to the right column here. */
  .question-layout > .drawer { position: sticky; top: var(--space-5); grid-column: 2; grid-row: 1; }
  .question-layout > .question { grid-column: 1; grid-row: 1; }
}

.question { max-width: 37rem; min-width: 0; }
.question__title { margin-bottom: var(--space-2); }
.question__why { color: var(--ink-muted); margin-bottom: var(--space-6); }
.question__body > * + * { margin-top: var(--space-6); }
.question__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-7);
}

.lede { font-size: var(--size-l); line-height: 1.45; max-width: 34rem; }
.prose { max-width: 38rem; }
.prose > * + * { margin-top: var(--space-4); }
.legal h2 { margin-top: var(--space-6); }
.muted { color: var(--ink-muted); }
.nowrap { white-space: nowrap; }
.small { font-size: var(--size-s); }

/* Buttons and links */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-5);
  border: 1px solid var(--action);
  border-radius: var(--corner);
  background: var(--action);
  color: var(--on-action);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--quick) var(--ease-out), border-color var(--quick) var(--ease-out),
              transform var(--quick) var(--ease-out);
}
.button:hover { background: var(--action-hover); border-color: var(--action-hover); text-decoration: none; }
.button:active { transform: translateY(1px); }
.button--secondary { background: var(--surface); color: var(--ink); border-color: var(--field-border); }
.button--secondary:hover { background: var(--wash); }
.button--danger { background: var(--surface); color: var(--error); border-color: var(--error); }
.button--danger:hover { background: var(--error-tint); border-color: var(--error); }
.button:disabled, .button[aria-disabled="true"] {
  background: var(--disabled);
  border-color: var(--disabled);
  color: var(--ink-muted);
  cursor: not-allowed;
  transform: none;
}
.button[aria-busy="true"] { cursor: progress; }
.button[aria-busy="true"]::after {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

.link-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--ink-muted);
}
.link-back:hover { color: var(--ink); }
.link-back .icon { width: 1rem; height: 1rem; }

.button-reset {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* Destructive actions live apart, far from any primary button. */
.danger-zone {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

/* Fields */

.field + .field, .field + .fallback, .fallback + .field { margin-top: var(--space-6); }
.fallback > .field { margin-top: var(--space-4); }
.field-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.field-label {
  display: block;
  padding: 0;
  margin-bottom: var(--space-1);
  font-weight: 600;
  font-size: var(--size-m);
}
.field-hint { color: var(--ink-muted); font-size: var(--size-s); margin-bottom: var(--space-3); max-width: 34rem; }
.field-error {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  color: var(--error);
  font-weight: 700;
  font-size: var(--size-s);
  margin-bottom: var(--space-2);
}
.field-error .icon { width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; }
.field-label + .chips, .field-label + .options, .field-label + .input,
.field-label + input, .field-label + textarea, .field-label + select { margin-top: var(--space-2); }

.input,
.field input[type="email"],
.field input[type="text"],
.field input[type="number"],
.field input[type="search"],
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: var(--control-height);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--field-border);
  border-radius: var(--corner);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  line-height: 1.4;
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible, .input:focus-visible {
  border-color: var(--focus);
}
.field--error input, .field--error textarea, .field--error select { border-color: var(--error); }
::placeholder { color: var(--ink-muted); opacity: 1; }

.input--code {
  font-variant-numeric: tabular-nums;
  font-size: var(--size-xl);
  font-weight: 600;
  letter-spacing: 0.15em;
  max-width: 12rem;
}
.input--short { max-width: 14rem; }

/* What a filter costs, said under it and kept up to date while the person types. */
.question__body > .field-consequence { margin-top: var(--space-3); }
.field-consequence { font-size: var(--size-s); max-width: 34rem; }

/* City and poste suggestions under the field: a listbox, the chosen row in the action tint. */
.field:has(> input[data-city]), .field:has(> input[data-suggestions-url]) { position: relative; }
.suggestions {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  margin: var(--space-1) 0 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--surface);
  border-radius: var(--corner-l);
  box-shadow: var(--shadow-float);
}
.suggestions__item { padding: var(--space-2) var(--space-3); border-radius: var(--corner-s); cursor: pointer; }
.suggestions__item:hover, .suggestions__item[aria-selected="true"] { background: var(--action-tint); }

/* Chips: checkboxes drawn as chips. A tone colours the chosen ones with their block's card. */

.chips {
  --chip-on: var(--blue);
  --chip-rule: var(--blue-rule);
}
.chips,
.chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* Chips in groups: each group a labelled list of its own, the cap counted over the whole container. */
.chips[data-grouped] { display: block; }
.chips__group + .chips__group { margin-top: var(--space-5); }
.chips__legend {
  margin: 0 0 var(--space-2);
  font-size: var(--size-s);
  font-weight: 600;
  color: var(--ink-muted);
}
.chips[data-tone="pink"] { --chip-on: var(--pink); --chip-rule: var(--pink-rule); }
.chips[data-tone="yellow"] { --chip-on: var(--yellow); --chip-rule: var(--yellow-rule); }
.chips[data-tone="green"] { --chip-on: var(--green); --chip-rule: var(--green-rule); }

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--field-border);
  border-radius: var(--corner);
  background: var(--surface);
  cursor: pointer;
  line-height: 1.25;
  transition: background-color var(--quick) var(--ease-out), border-color var(--quick) var(--ease-out);
}
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip__mark {
  /* Always in the layout, so a chip never changes width when picked and its neighbours never move. */
  display: block;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--field-border);
  border-radius: var(--corner-s);
  color: transparent;
}
.chip:hover { border-color: var(--ink); }
.chip:has(input:checked) { background: var(--chip-on); border-color: var(--chip-rule); }
.chip:has(input:checked) .chip__mark { border-color: var(--ink); color: var(--ink); }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip:has(input:disabled) { border-style: dashed; color: var(--ink-muted); cursor: not-allowed; }
.chips__count { margin-top: var(--space-2); font-size: var(--size-s); color: var(--ink-muted); }

/* Options: one row per choice, native radio or checkbox. */

.options { display: grid; gap: var(--space-2); }
.option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--corner);
  background: var(--surface);
  cursor: pointer;
  line-height: 1.3;
  transition: border-color var(--quick) var(--ease-out), background-color var(--quick) var(--ease-out);
}
.option input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--action);
}
.option:hover { border-color: var(--field-border); }
.option:has(input:checked) { border-color: var(--field-border); background: var(--action-tint); }

/* Switch: "Plutôt une préférence". A pill with a round knob. */

.switch { display: flex; align-items: center; gap: var(--space-3); }
.switch__input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  margin: 0;
  border: 1px solid var(--field-border);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  transition: background-color var(--quick) var(--ease-out), border-color var(--quick) var(--ease-out);
}
.switch__input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--ink);  /* off: an ink knob on the field's white, never a greyed-out control */
  transition: transform var(--quick) var(--ease-out), background-color var(--quick) var(--ease-out);
}
.switch__input:checked { background: var(--action); border-color: var(--action); }
.switch__input:checked::before { transform: translateX(1.25rem); background: var(--on-action); }
.switch__label { cursor: pointer; }
.field-hint--switch { margin: var(--space-1) 0 0 3.5rem; }

/* CV screen: the native file field, framed as a drop zone by the script on computers; the list read from the CV,
   one line per item with its own "Supprimer". */

/* The native file control speaks the browser's language. Once tri.js runs, it is hidden but still focusable,
   opened by a French label drawn as a secondary button, which shows the focus ring the input receives. Without
   the script the native control stays, and its own name for the chosen file with it. */
.file-field:not(.file-field--enhanced) .file-field__pick { display: none; }
.file-field--enhanced .file-field__input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.file-field__pick { margin-top: var(--space-2); }
.file-field__pick .icon { width: 1.125rem; height: 1.125rem; }
/* also after the error summary's link moves focus here */
.file-field__input:focus + .file-field__pick { outline: 2px solid var(--focus); outline-offset: 2px; }
.file-field__status {
  margin-top: var(--space-2);
  font-size: var(--size-s);
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}
.cv-drop--active {
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--field-border);
  border-radius: var(--corner-l);
  background: var(--surface);
  transition: border-color var(--quick) var(--ease-out), background-color var(--quick) var(--ease-out);
}
.cv-drop--over { border-color: var(--focus); background: var(--wash); }
.cv-drop__hint { margin-top: var(--space-3); font-size: var(--size-s); color: var(--ink-muted); }
.cv-upload__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.cv-upload__promise { margin-top: var(--space-3); font-size: var(--size-s); color: var(--ink-muted); max-width: 34rem; }
.cv-upload__busy { margin-top: var(--space-3); font-weight: 600; }
.cv-upload__busy:empty { display: none; }

.cv-list { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.cv-list__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}
.cv-list__why { margin-top: var(--space-2); font-size: var(--size-s); color: var(--ink-muted); max-width: 34rem; }
.cv-list__group { border: 0; margin: var(--space-6) 0 0; padding: 0; min-width: 0; }
.cv-list__save { margin-top: var(--space-5); }
.cv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  align-items: end;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.cv-row__fields { display: grid; gap: var(--space-2); min-width: 0; }
.cv-row__label { display: block; margin-bottom: var(--space-1); font-size: var(--size-xs); color: var(--ink-muted); }
.cv-row__field .field-error { margin-top: var(--space-1); }
.cv-row__field.field--error .input { border-color: var(--error); }
.cv-row__delete {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  font-size: var(--size-s);
  cursor: pointer;
}
.cv-row__delete input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--error); }
.cv-row__delete label { cursor: pointer; }
.cv-row:has(.cv-row__delete input:checked) .cv-row__fields { opacity: 0.45; }
.cv-row:has(.cv-row__delete input:checked) .input { text-decoration: line-through; }
@media (min-width: 40rem) {
  .cv-row--position .cv-row__fields { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); }
}

/* Error summary, at the top of a form that came back with errors. */

.error-summary {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--error);
  border-radius: var(--corner-l);
  background: var(--error-tint);
}
.error-summary__title {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--error);
  font-size: var(--size-m);
}
.error-summary ul { margin: var(--space-2) 0 0; padding-left: 1.75rem; }
.error-summary a { color: var(--error); font-weight: 700; }

.notice {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--corner-l);
  background: var(--wash);
}

/* Panels: white with a hairline; the tag in the head carries the kind's colour. */

.card {
  --tone-fill: var(--wash);
  --tone-ink: var(--ink-muted);
  --card-ink: var(--ink-muted);
  --card-rule: var(--line);
  position: relative;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--corner-l);
  background: var(--surface);
  color: var(--ink);
}
.card--pink { --tone-fill: var(--pink); --tone-ink: var(--pink-ink); }
.card--blue { --tone-fill: var(--blue); --tone-ink: var(--blue-ink); }
.card--yellow { --tone-fill: var(--yellow); --tone-ink: var(--yellow-ink); }
.card--green { --tone-fill: var(--green); --tone-ink: var(--green-ink); }

.card__head {
  display: flex;
  flex-wrap: wrap;  /* a tag or a link drops under the title on phones instead of squeezing it */
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-3);
}
.card__title { font-size: var(--size-m); font-weight: 600; }
/* On a panel of one kind, the title is that kind's tag. */
.card:is(.card--pink, .card--blue, .card--yellow, .card--green):not(.card--strip) .card__title {
  padding: 0.125rem var(--space-2);
  border-radius: var(--corner-s);
  background: var(--tone-fill);
  color: var(--tone-ink);
  font-size: var(--size-xs);
  line-height: 1.3;
}
.card__meta { font-size: var(--size-xs); color: var(--card-ink); }
.card__rows { margin: 0; display: grid; gap: var(--space-2); font-size: var(--size-s); }
.card__rows div { display: grid; gap: 0; }
.card__rows dt { color: var(--card-ink); font-size: var(--size-xs); }
.card__rows dd { margin: 0; }
.card__empty { color: var(--card-ink); font-size: var(--size-s); }
.card__text { font-size: var(--size-s); }
.card__text p + p { margin-top: var(--space-2); }
.card__counter {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  font-size: var(--size-s);
  line-height: 1.4;
}
.card__counter strong { font-size: var(--size-m); }

/* The file: cards filed in their block order. Open beside the question on wide screens,
   a folded band under the masthead on phones. */

.drawer { min-width: 0; }
.drawer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border-radius: var(--corner-l);
  background: var(--wash);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.drawer__summary::-webkit-details-marker { display: none; }
.drawer__summary { flex-wrap: wrap; padding-block: var(--space-2); }
/* The counter in the folded band on phones. From 60rem the card shows it; this copy stays for screen readers. */
.drawer__counter {
  flex-basis: 100%;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-size: var(--size-s);
  line-height: 1.4;
}
.drawer__summary .icon { transition: transform var(--quick) var(--ease-out); transform: rotate(90deg); }
.drawer[open] .drawer__summary .icon { transform: rotate(-90deg); }
.drawer__count { font-weight: 400; font-size: var(--size-s); color: var(--ink-muted); }
.drawer__cards { display: grid; gap: var(--space-5); padding-top: var(--space-5); }
.drawer__note { font-size: var(--size-xs); color: var(--ink-muted); }

@media (min-width: 60rem) {
  .drawer__summary { padding: 0; background: none; min-height: 0; cursor: default; }
  .drawer__summary .icon { display: none; }
  .drawer__counter {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* The end screen's file: the whole file beside the date on wide screens, nothing more on phones. */
.drawer--wide-only { display: none; }
@media (min-width: 60rem) {
  .drawer--wide-only { display: block; }
}

/* A card filed this very request slides into the drawer. */
.card--filed { animation: file-in 320ms var(--ease-out) both; }
@keyframes file-in {
  /* Starts visible: the card drops into the drawer, it never fades in from nothing. */
  from { transform: translateY(-0.75rem); }
  to { transform: none; }
}

/* Check answers: the file spread open, one line per answer, each with its own "Modifier". */

.answers { margin: 0; }
.answers__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--card-rule, var(--line));
}
.answers__row:last-child { border-bottom: 0; }
.answers dt { grid-column: 1; font-size: var(--size-s); color: var(--card-ink, var(--ink-muted)); }
.answers dd { grid-column: 1; margin: 0; }
/* The "Modifier" link sits in its own dd (a dl holds only dt and dd), beside the answer. */
.answers .answers__edit {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: var(--size-s);
  font-weight: 600;
}
.answers__missing { color: var(--card-ink, var(--ink-muted)); font-style: italic; }

/* AI label, always visible next to text Claude wrote. */
.ai-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--size-xs);
  color: var(--green-ink);
}


/* Summary: the file spread open across the page. Part A on the three panels, word for word, each line with its
   "Modifier"; part B on the green card below, each sentence opening on the answers it comes from. */

.question-layout > .summary { grid-column: 1 / -1; }
.summary__cards { display: grid; gap: var(--space-6) var(--space-5); margin-top: var(--space-2); }
@media (min-width: 48rem) {
  .summary__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .summary__card--exclude { grid-row: span 2; }
  .summary__card--understood { grid-column: 1 / -1; }
}
.summary__card--understood > :not(.card__head) { max-width: 44rem; }
/* Text on the green card takes the card's ink, never the page's grey. */
.summary__card--understood .muted, .summary__card--understood .field-hint { color: var(--card-ink); }
.summary__error {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin-bottom: var(--space-4);
  color: var(--error);
  font-weight: 600;
}
.summary__error .icon { margin-top: 0.15rem; }
.summary__replaces { flex-basis: 100%; margin-top: 0; }
.reading + .summary__replaces { margin-top: var(--space-4); font-weight: 600; }

.source + .source { border-top: 1px solid var(--card-rule); }
.source__sentence {
  padding: var(--space-2) 0;
  cursor: pointer;
  list-style: none;
  text-decoration: underline dotted var(--field-border);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.source__sentence::-webkit-details-marker { display: none; }
.source__sentence:hover { text-decoration-style: solid; }
.source[open] .source__sentence { text-decoration: none; font-weight: 600; }
.source__body {
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--corner);
  background: var(--wash);
  font-size: var(--size-s);
}
.source__from { color: var(--card-ink); font-size: var(--size-xs); font-weight: 600; }
.source__text { margin-top: 0; white-space: pre-line; overflow-wrap: anywhere; }
.source__text + .source__from { margin-top: var(--space-3); }

.summary__text { overflow-wrap: anywhere; }
.summary__text + .muted { margin-top: var(--space-2); }
.summary__pending { max-width: 38rem; }
.summary__stale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--corner);
  background: var(--wash);
}
.summary__stale p { font-weight: 600; }
.summary__correct {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.summary__correct .field { margin-bottom: var(--space-5); }
.summary__correct .field + .field { margin-top: 0; }
.summary__evolves { margin-bottom: var(--space-5); }
.summary__edit { margin-top: var(--space-5); }
.summary__edit > summary, .fallback > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--link);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.summary__edit > summary::-webkit-details-marker, .fallback > summary::-webkit-details-marker { display: none; }
.summary__edit > summary .icon, .fallback > summary .icon {
  width: 1rem;
  height: 1rem;
  transform: rotate(90deg);
  transition: transform var(--quick) var(--ease-out);
}
.summary__edit[open] > summary .icon, .fallback[open] > summary .icon { transform: rotate(-90deg); }
.summary__edit form { margin-top: var(--space-4); }
.summary__edit .button { margin-top: var(--space-4); }

/* What Claude really reads while the summary is written: a plain list, nothing ticks. */
.reading { margin: var(--space-4) 0 0; padding-left: 1.25rem; }
.reading li + li { margin-top: var(--space-2); }

/* The date of the first mail: a quiet block, risen in once. Class names kept from the stamp it replaced. */

.stamp {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--corner-l);
  background: var(--wash);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--size-l);
  line-height: 1.3;
}
.stamp__small { display: block; font-size: var(--size-s); font-weight: 400; color: var(--ink-muted); }
.stamp--press { animation: date-rise 240ms var(--ease-out) both; }
@keyframes date-rise {
  from { opacity: 0; transform: translateY(0.375rem); }
  to { opacity: 1; transform: none; }
}

/* End: the appointment. The date block gives the day of the first mail; the tips sit under it as plain text. */

.end__sort { margin: var(--space-5) 0 0; max-width: 34rem; }
.end__sort p { margin: 0 0 var(--space-3); }
.end__stamp { margin: var(--space-5) 0 var(--space-6); }
.end .lede { margin-bottom: var(--space-5); }
.end__tips { margin: var(--space-2) 0 0; padding-left: 1.25rem; }
.end__tips li + li { margin-top: var(--space-2); }
.end__welcome { margin-top: var(--space-5); max-width: 34rem; }
.end__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-7) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-weight: 600;
}

/* After the questionnaire: « Ma recherche » and « Mes données », reached from a small account menu. */

.account-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--size-s);
}
.account-nav a {
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  color: var(--ink-muted);
  text-decoration: none;
}
.account-nav a:hover { color: var(--ink); border-bottom-color: var(--line); }
.account-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }

/* « Ma recherche »: the file kept open, denser than the summary screen. */
.my-search__saved { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-5); }
.my-search__saved .icon { color: var(--action); }
.my-search__poste { display: flex; gap: var(--space-2); align-items: flex-start; margin-bottom: var(--space-5); }
.my-search__poste .icon { flex: none; margin-top: 0.2em; }
.my-search__title { margin-bottom: var(--space-2); }
.my-search .question__why { margin-bottom: var(--space-5); }
.my-search__cards { gap: var(--space-6) var(--space-4); }
.my-search .answers__row { padding: var(--space-2) 0; }
.my-search .answers dd { font-size: var(--size-s); }
.my-search__correct { margin-top: var(--space-4); font-size: var(--size-s); font-weight: 600; }
/* Phones: every card of « Ma recherche » puts its edit link under the title, whatever the title's length. */
@media (max-width: 29.99rem) {
  .my-search .card__head { flex-direction: column; align-items: flex-start; }
}
.card__action { font-size: var(--size-s); font-weight: 600; text-align: right; }

/* A block's page: its screens one under the other, each under a hairline. */
.block-page__screen {
  padding-top: var(--space-5);
  margin-top: var(--space-7);
  border-top: 1px solid var(--line);
}
.block-page__title { font-size: var(--size-l); margin-bottom: var(--space-2); }
.block-page__screen .question__why { margin-bottom: var(--space-5); }
.block-page__cv { margin-top: var(--space-8); }
.block-page__cv-link { font-weight: 600; }

/* « Mes données »: one line per thing kept, the destructive action apart at the bottom. */
.my-data__list { margin: 0; }
.my-data__row {
  display: grid;
  gap: var(--space-1) var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}
.my-data__row:first-child { border-top: 1px solid var(--line); }
.my-data__row dt { font-size: var(--size-s); color: var(--ink-muted); }
.my-data__row dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 40rem) {
  .my-data__row { grid-template-columns: 11rem minmax(0, 1fr); }
}
.my-data__address { font-weight: 600; }
.my-data__detail { display: block; margin-top: var(--space-1); font-size: var(--size-s); color: var(--ink-muted); }
.my-data__summary > * + * { margin-top: var(--space-2); }
.my-data .ai-label { display: block; margin-top: var(--space-1); }
.my-data__leave { max-width: 34rem; font-size: var(--size-s); color: var(--ink-muted); }
.my-data__resubscribe { margin-top: var(--space-3); }
.danger-zone form + .my-data__leave, .danger-zone form + .my-data__delete { margin-top: var(--space-5); }

/* Score gauge: always the same ten notches, the number written beside it. */

.gauge { display: inline-flex; align-items: center; gap: var(--space-3); }
.gauge__notches { display: inline-flex; gap: 2px; }
.gauge__notch { width: 0.5rem; height: 1rem; border: 1px solid var(--field-border); border-radius: 2px; background: var(--surface); }
.gauge__notch--on { background: var(--ink); border-color: var(--ink); }
.gauge__value { font-variant-numeric: tabular-nums; font-weight: 600; }

/* A callout inside a panel: the kind's fill, no border (Claude's reason under an offer). */
.card--strip {
  --card-ink: var(--tone-ink);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--corner);
  background: var(--tone-fill);
  font-size: var(--size-s);
  line-height: 1.45;
}

/* Home: what the product does and the address field, the morning mail beside it from 60rem. */

.home { display: grid; gap: var(--space-7); }
.home__intro { min-width: 0; }
.home__sample { margin: 0; }
@media (min-width: 60rem) {
  .home {
    grid-template-columns: minmax(0, 36rem) minmax(0, 25rem);
    justify-content: space-between;
    align-items: start;
  }
  .home__sample { margin-top: var(--space-2); }
}
.home__title { margin-bottom: var(--space-5); }
.home__promise { margin-top: var(--space-4); max-width: 34rem; }
.home__form { margin-top: var(--space-6); max-width: 28rem; }
.home__submit { margin-top: var(--space-4); }
.home__note { margin-top: var(--space-4); }
.home__note + .home__note { margin-top: var(--space-2); }
.home__caption { margin-top: var(--space-3); }

/* Home, below the form: what the product does, each section a heading on the left and its text on the right. */

.landing {
  display: grid;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
@media (min-width: 60rem) {
  .landing { grid-template-columns: 17rem minmax(0, 44rem); }
}
.landing__title { font-size: var(--size-l); font-weight: 600; line-height: 1.3; text-wrap: balance; }
.landing__body { min-width: 0; }
.landing__lede { max-width: 38rem; margin-bottom: var(--space-5); }
.landing__prose { max-width: 38rem; }
.landing__figures { font-size: var(--size-l); line-height: 1.45; }
.landing--last .button { margin-top: 0; }

/* The day: the moment on the left, what happens on the right. */
.day { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-6); }
.day__moment { display: grid; gap: var(--space-1) var(--space-5); }
@media (min-width: 40rem) {
  .day__moment { grid-template-columns: 10rem minmax(0, 1fr); }
}
.day__time { font-weight: 600; color: var(--ink-muted); }
.day__heading { margin-bottom: var(--space-2); }

/* A tag on its own, outside a panel: the kind's pale fill and dark ink. */
.tag {
  display: inline-block;
  padding: 0.125rem var(--space-2);
  border-radius: var(--corner-s);
  font-size: var(--size-xs);
  font-weight: 600;
  line-height: 1.3;
}
.tag--pink { background: var(--pink); color: var(--pink-ink); }
.tag--blue { background: var(--blue); color: var(--blue-ink); }
.tag--yellow { background: var(--yellow); color: var(--yellow-ink); }
.tag--green { background: var(--green); color: var(--green-ink); }

.kinds { margin: 0; display: grid; gap: var(--space-5); }
.kinds__row { display: grid; gap: var(--space-2) var(--space-5); }
@media (min-width: 40rem) {
  .kinds__row { grid-template-columns: 10rem minmax(0, 1fr); align-items: baseline; }
}
.kinds dd { margin: 0; }

.nevers { margin: 0 0 var(--space-5); padding: 0; list-style: none; display: grid; gap: var(--space-4); max-width: 38rem; }
.nevers__head { font-weight: 600; }

.faq { max-width: 38rem; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__item summary {
  padding-block: var(--space-3);
  font-weight: 600;
  cursor: pointer;
}
.faq__item summary::marker { color: var(--ink-muted); }
.faq__item p { padding-bottom: var(--space-4); }

.sample-offers { margin: 0; padding: 0; list-style: none; }
.sample-offer { padding-block: var(--space-4); }
.sample-offer:first-child { padding-top: var(--space-1); }
.sample-offer:last-child { padding-bottom: 0; }
.sample-offer + .sample-offer { border-top: 1px solid var(--line); }
.sample-offer__title { font-weight: 600; line-height: 1.3; }
.sample-offer .sample-offer__meta { margin-top: var(--space-1); }
.sample-offer .gauge { margin-top: var(--space-2); }

/* The sort page: one sheet on top of the next, answered by three buttons, a swipe or the arrow keys. */

main:has(.sort) { overflow-x: clip; }  /* a sheet flying off must not widen the page */
.sort { max-width: 34rem; }
.sort__count { margin-top: var(--space-2); font-size: var(--size-s); }
.sort__ai { margin-top: var(--space-1); }
/* What the sorts taught, a green card (Claude's text) above the sheet; « Corriger » and « Effacer » under it. */
.sort__learned { margin-top: var(--space-6); }
.sort__learned + .sort__stage { margin-top: var(--space-6); }
.sort__learned-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-5);
  margin-top: var(--space-2);
  font-size: var(--size-s);
  font-weight: 600;
}
.sort__learned-actions a, .sort__learned-actions .button-reset {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  font-weight: 600;
}
.sort__stage { position: relative; margin: var(--space-6) 0 var(--space-5); }
.sort__stage:empty { display: none; }

.sort-card {
  z-index: 1;
  padding: var(--space-4) var(--space-5) var(--space-5);
  font-size: var(--size-m);
  font-weight: 400;
}
.sort-card > * + * { margin-top: var(--space-3); }
.sort-card__explore { font-size: var(--size-xs); color: var(--green-ink); }
.sort-card__title { font-size: var(--size-m); }
.sort-card__title:focus { outline: none; }
.sort-card__title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sort-card .sort-card__employer { margin-top: var(--space-1); }
.sort-card__meta { display: flex; flex-wrap: wrap; column-gap: var(--space-2); margin-top: var(--space-1); }
.sort-card__meta > :not([hidden]) ~ :not([hidden])::before {
  content: "·";
  content: "·" / "";  /* decorative: not read out */
  margin-right: var(--space-2);
}
.sort-card .gauge { display: flex; }
.sort-card__reason { display: grid; gap: var(--space-1); }
.sort-card__source, .sort-card__attribution { font-size: var(--size-xs); }
.sort-card__source + .sort-card__attribution { margin-top: var(--space-1); }
.sort-card__link { display: inline-block; font-weight: 600; }
/* The sheet behind: the next offer, offset by 0.5rem, out of reach. The top sheet hides most of it. */
.sort-card--next { position: absolute; inset: var(--space-2) calc(-1 * var(--space-2)) calc(-1 * var(--space-2))
  var(--space-2); z-index: 0; overflow: hidden; }
.sort-card--next > * { opacity: 0; }  /* only an edge at rest; the offer shows once the top sheet moves */
.sort-card--dragging ~ .sort-card--next > *, .sort-card--settling ~ .sort-card--next > * { opacity: 1; }
.sort-card--top { touch-action: pan-y; cursor: grab; }
.sort-card--dragging { cursor: grabbing; user-select: none; will-change: transform; box-shadow: var(--shadow-float); }
.sort-card--settling { transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out); }

.sort [hidden] { display: none; }
.sort-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.sort-actions .button { padding: 0 var(--space-4); white-space: nowrap; }
.sort-actions__short { display: none; }
.sort-actions .button--secondary.is-armed { background: var(--action-tint); color: var(--ink); border-color: var(--action); }
.sort-actions .button:not(.button--secondary).is-armed {
  background: var(--action-hover);
  border-color: var(--action-hover);
}
@media (max-width: 29.99rem) {
  .sort-actions__full { display: none; }
  .sort-actions__short { display: inline; }
}
.sort__undo { margin-top: var(--space-4); }
.sort__undo .button-reset { min-height: var(--control-height); }
.sort__undo .button-reset:disabled { color: var(--ink-muted); text-decoration: none; cursor: not-allowed; }
.sort__notice { margin-top: var(--space-5); padding: var(--space-4); }
.sort__notice .button { margin-top: var(--space-3); }
.sort__end { margin-top: var(--space-5); }
.sort__end + .sort__undo { margin-top: var(--space-3); }
.sort__end:focus { outline: none; }
.sort__end > * + * { margin-top: var(--space-3); }
.sort__recap { font-weight: 600; }

/* Sign-in pages: the code page and the link page. */

.code-page__change { margin-top: var(--space-2); }
.code-page__address { margin-top: var(--space-3); }
.code-page__throttled { margin-top: var(--space-5); }
.code-page__form { margin-top: var(--space-6); }
.code-page__submit { margin-top: var(--space-4); }
.code-page__help { margin-top: var(--space-6); font-size: var(--size-s); }
.code-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.code-page__actions form { margin: 0; }
.link-page__other-device { margin-top: var(--space-5); }
.masthead__aside form { margin: 0; }

/* Internal style page */

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-3); }
.swatch { border-radius: var(--corner-l); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.swatch__chip { height: 3rem; }
.swatch__chip--ground { background: var(--ground); }
.swatch__chip--surface { background: var(--surface); }
.swatch__chip--ink { background: var(--ink); }
.swatch__chip--ink-muted { background: var(--ink-muted); }
.swatch__chip--action { background: var(--action); }
.swatch__chip--link { background: var(--link); }
.swatch__chip--wash { background: var(--wash); }
.swatch__chip--error { background: var(--error); }
.swatch__chip--pink { background: var(--pink); }
.swatch__chip--blue { background: var(--blue); }
.swatch__chip--yellow { background: var(--yellow); }
.swatch__chip--green { background: var(--green); }
.swatch__name { padding: var(--space-2) var(--space-3); font-size: var(--size-xs); }
.style-section + .style-section { margin-top: var(--space-8); }
.style-section > h2 { margin-bottom: var(--space-4); }
.style-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.style-grid { display: grid; gap: var(--space-6); }
@media (min-width: 48rem) { .style-grid { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

.stack > * + * { margin-top: var(--space-4); }
.space-top { margin-top: var(--space-6); }
.space-top-l { margin-top: var(--space-7); }

/* « Mes offres »: the offers judged, one sheet each with its follow-up form. */
.history__tabs { margin-bottom: var(--space-5); }
.history__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.history__title { font-size: var(--size-l, 1.25rem); margin: 0 0 var(--space-2); }
.history__form { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.history__form .field + .field { margin-top: 0; }
.history__form textarea { min-height: 4rem; }
.history__form .button { justify-self: start; }
@media (min-width: 48rem) {
  .history__form { grid-template-columns: 1fr 1fr; }
  .history__form .field:has(textarea), .history__form .button { grid-column: 1 / -1; }
}
.history__pages { display: flex; gap: var(--space-4); justify-content: center; margin-top: var(--space-6); }

/* OpenRouter education screen and tutorial (accounts): five numbered points, each under a ruled heading. */
.education, .tutorial { margin: var(--space-6) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-5); }
.education__point, .tutorial > li { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.education__heading { font-size: var(--size-m); margin-bottom: var(--space-1); }