/* Machinery Regulation instructions checklist
   (free-tools/machinery-regulation-checklist.html and its French twin).
   Layout comes from free-tools/free-tools.css (ft-*) and theme-minimal.css
   (intent-*); this file holds the checklist tool, the diagrams and print.
   Colours are theme tokens, so it follows the light and dark schemes. */

.mrc-page { overflow-wrap: break-word; }

/* The display rules below must not undo the hidden attribute the script relies on. */
.mrc [hidden] { display: none !important; }

#checklist { scroll-margin-top: 96px; }

/* ---------- Hero visual: the date and a glimpse of the checklist ---------- */
.mrc-showcase {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  padding: clamp(36px, 6vw, 72px) clamp(26px, 6vw, 72px) 0;
  overflow: hidden;
  border-radius: 28px;
  background: var(--surface-inverse);
  color: var(--on-surface-inverse);
}
.mrc-showcase__date { padding-bottom: clamp(36px, 6vw, 72px); }
.mrc-showcase__kicker { margin: 0; color: var(--on-surface-inverse-2); font-size: 0.95rem; font-weight: 600; }
.mrc-showcase .ft-year { margin: 10px 0 0; padding: 0; }
.mrc-showcase .ft-year strong { font-size: clamp(5.5rem, 13vw, 10.5rem); }
.mrc-showcase__card {
  padding: 28px 28px 34px;
  border-radius: 22px 22px 0 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}
.mrc-showcase__title { margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; }
.mrc-showcase__card ul { margin: 0; padding: 0; list-style: none; }
.mrc-showcase__card li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 3px 12px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.45;
}
.mrc-showcase__card i {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
}
.mrc-showcase__card li.is-done i { border-color: var(--accent); background: var(--accent); }
.mrc-showcase__card li.is-done i::after {
  display: block;
  width: 5px;
  height: 10px;
  margin: 2px auto 0;
  border: solid var(--on-fill);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  content: "";
}
.mrc-showcase__card li.is-done span { color: var(--ink-3); text-decoration: line-through; }
.mrc-showcase__card small { color: var(--ink-3); font-size: 0.78rem; }
.mrc-showcase__bar { height: 6px; margin: 18px 0 0; overflow: hidden; border-radius: var(--radius-pill); background: var(--line); }
.mrc-showcase__bar b { display: block; width: 66%; height: 100%; border-radius: inherit; background: var(--accent); }

@media (max-width: 760px) {
  .mrc-showcase { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mrc-showcase__date { padding-bottom: 32px; }
  .mrc-showcase__card { padding: 22px 20px 26px; }
}

/* ---------- The checklist tool ---------- */
.mrc-tool .ft-section__header { margin-bottom: 16px; }
.mrc-disclosure {
  max-width: 720px;
  margin: 0 auto 36px;
  color: var(--ink-3);
  font-size: 0.85rem;
  line-height: 1.55;
  text-align: center;
}

.mrc {
  padding: clamp(14px, 3vw, 32px);
  border-radius: 28px;
  background: var(--paper-2);
}

/* Questions: white cards, two per row, like a configurator. */
.mrc-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.mrc-q {
  min-width: 0;
  margin: 0;
  padding: 22px 22px 20px;
  border: 0;
  border-radius: 20px;
  background: var(--paper);
}
.mrc-q legend {
  float: left;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.mrc-q legend + * { clear: both; }
.mrc-options { display: flex; flex-wrap: wrap; gap: 8px; }
.mrc-options--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  margin-top: 12px;
}
.mrc-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.mrc-option:hover { border-color: var(--ink-3); }
.mrc-options--grid .mrc-option { border-radius: 12px; }
.mrc-option input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.mrc-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.mrc-option:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.mrc-hint { margin: 12px 0 0; color: var(--ink-3); font-size: 0.8rem; line-height: 1.5; }

.mrc-countries summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: 0.92rem;
  cursor: pointer;
  list-style: none;
}
.mrc-countries summary::-webkit-details-marker { display: none; }
.mrc-countries summary::after { color: var(--ink-3); content: "+"; }
.mrc-countries[open] summary::after { content: "−"; }
.mrc-countries summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.mrc-form__actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; }

.mrc-btn { cursor: pointer; font-family: inherit; }

/* Results: a summary bar that stays in view while you tick. */
.mrc-results { margin-top: 12px; }
.mrc-form[hidden] + .mrc-results { margin-top: 0; }
.mrc-results__head {
  position: sticky;
  top: 92px;
  z-index: 6;
  padding: 18px 22px;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 18px 36px -26px rgba(10, 10, 11, 0.5);
}
.mrc-results__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.mrc-results__title { margin: 0; font-size: 1.45rem; letter-spacing: -0.03em; }
.mrc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mrc-status { margin: 8px 0 0; color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; }
.mrc-progress {
  height: 6px;
  margin: 12px 0 0;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--line);
}
.mrc-progress__bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.2s ease;
}
.mrc-note { margin: 10px 0 0; color: var(--ink-2); font-size: 0.85rem; }
.mrc-note:empty { display: none; }
.mrc-answers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 16px;
  margin: 14px 0 0;
  padding: 16px 22px;
  border-radius: 20px;
  background: var(--paper);
  font-size: 0.85rem;
  line-height: 1.45;
}
.mrc-answers dt { color: var(--ink-3); }
.mrc-answers dd { margin: 0; color: var(--ink); font-weight: 600; }

/* Each group is a card that opens and closes. */
.mrc-group { margin-top: 12px; border-radius: 20px; background: var(--paper); }
.mrc-group__summary {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  padding: 20px 22px;
  border-radius: 20px;
  cursor: pointer;
  list-style: none;
}
.mrc-group__summary::-webkit-details-marker { display: none; }
.mrc-group__summary::after {
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-2);
  content: "+";
  font-size: 1.15rem;
  line-height: 1;
}
.mrc-group__details[open] > .mrc-group__summary::after { content: "−"; }
.mrc-group__summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mrc-group__title { flex: 1 1 auto; margin: 0; font-size: 1.12rem; letter-spacing: -0.015em; line-height: 1.3; }
.mrc-group__count { flex: 0 0 auto; color: var(--ink-3); font-size: 0.85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mrc-group__body { padding: 0 22px 8px; }
.mrc-group__note { margin: -6px 0 8px; color: var(--ink-3); font-size: 0.85rem; line-height: 1.5; }

.mrc-list { margin: 0; padding: 0; list-style: none; }
.mrc-list li.mrc-item { list-style: none; border-top: 1px solid var(--line); }
/* Text on the left, the article reference in a narrow column on the right. */
.mrc-item label {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
  align-items: baseline;
  gap: 6px 24px;
  padding: 13px 4px 13px 38px;
  line-height: 1.5;
  cursor: pointer;
}
.mrc-item label:hover .mrc-item__text { color: var(--ink); }
.mrc-item .mrc-tag { grid-column: 1; justify-self: start; }
.mrc-item .mrc-ref { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; }
.mrc-item input {
  position: absolute;
  top: 15px;
  left: 4px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
}
.mrc-item__text { grid-column: 1; color: var(--ink); }
.mrc-item input:checked ~ .mrc-item__text { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.mrc-tag,
.mrc-new {
  display: inline-block;
  padding: 1px 9px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
}
.mrc-new { margin-right: 4px; }
.mrc-item--watch .mrc-tag { border: 1px solid currentColor; background: transparent; }
.mrc-ref { color: var(--ink-3); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.mrc-group--tips .mrc-item__text { color: var(--ink-2); }
.mrc-empty { margin: 24px 0 8px; color: var(--ink-2); text-align: center; }

.mrc-print-only { display: none; }

@media (max-width: 760px) {
  .mrc-form { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .mrc { margin-inline: -6px; border-radius: 22px; }
  .mrc-item label { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mrc-item .mrc-ref { grid-column: 1; grid-row: auto; text-align: left; white-space: normal; }
  .mrc-q { padding: 18px 16px; }
  .mrc-results__head { position: static; padding: 16px; }
  .mrc-actions { width: 100%; }
  .mrc-actions .mrc-btn { flex: 1 1 0; }
  .mrc-answers { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .mrc-answers dd { margin-bottom: 6px; }
  .mrc-group__summary { flex-wrap: wrap; padding: 18px 16px; }
  .mrc-group__title { flex-basis: calc(100% - 50px); }
  .mrc-group__summary::after { order: 2; }
  .mrc-group__count { order: 3; flex-basis: 100%; }
  .mrc-group__body { padding: 0 14px 6px; }
}

/* ---------- Figures and diagrams ---------- */
.mrc-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: inherit;
  overflow: visible;
}

.mrc-timeline--tall { display: none; max-width: 360px; }

@media (max-width: 640px) {
  .mrc-timeline--wide { display: none; }
  .mrc-timeline--tall { display: block; }
}

.mrc-svg-axis { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.mrc-svg-axis--dash { stroke: var(--ink-3); stroke-dasharray: 2 7; }
.mrc-svg-axis--accent { stroke: var(--accent); stroke-width: 4; }
.mrc-svg-arrowhead { fill: var(--accent); }
.mrc-svg-node { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.mrc-svg-node--accent { stroke: var(--accent); fill: var(--accent-soft); }
.mrc-svg-node--big { fill: var(--accent); }
.mrc-svg-date { fill: var(--ink); font-size: 15px; font-weight: 700; }
.mrc-svg-date--accent { fill: var(--accent); }
.mrc-svg-label { fill: var(--ink-2); font-size: 14px; }

.mrc-svg-box { fill: var(--paper); stroke: var(--line-strong); stroke-width: 1.5; }
.mrc-svg-box--accent { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.mrc-svg-box--muted { fill: var(--paper-2); }
.mrc-svg-machine { fill: var(--paper-2); stroke: var(--ink-3); stroke-width: 1.5; }
.mrc-svg-machine-dark { fill: var(--ink-3); }
.mrc-svg-accent-fill { fill: var(--accent); }
.mrc-svg-plate { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.5; }
.mrc-svg-qr rect { fill: var(--ink); }
.mrc-svg-qr .mrc-svg-qr-bg { fill: var(--paper); stroke: var(--line-strong); }
.mrc-svg-bar { fill: var(--line-strong); }
.mrc-svg-bar--accent { fill: var(--accent); }
.mrc-svg-link { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 4; }
.mrc-svg-phone { fill: var(--ink); }
.mrc-svg-screen { fill: var(--paper); }
.mrc-svg-sheet { fill: var(--paper); stroke: var(--ink-3); stroke-width: 1.5; }
.mrc-svg-warn { fill: none; stroke: var(--danger); stroke-width: 2; stroke-linejoin: round; }
.mrc-svg-strong { fill: var(--ink); font-size: 15px; font-weight: 700; }
.mrc-svg-text { fill: var(--ink-2); font-size: 14px; }
.mrc-svg-small { fill: var(--ink-2); font-size: 12.5px; }
.mrc-svg-ref { fill: var(--accent); font-size: 12.5px; font-weight: 600; }
.mrc-svg-kicker { fill: var(--ink-3); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.mrc-dates { display: block; padding: clamp(24px, 5vw, 56px); }
.mrc-dates .mrc-svg { max-width: 900px; margin: 0 auto; }
.mrc-dates figcaption { margin-top: 20px; }
.mrc-timeline--tall { display: none; max-width: 360px; }

@media (max-width: 640px) {
  .mrc-timeline--wide { display: none; }
  .mrc-timeline--tall { display: block; }
}

.mrc-facts { margin-top: 48px; }
.mrc-tip-ref { display: block; margin-top: 8px; color: var(--ink-3); font-size: 0.8rem; }

/* Article 10(7): an animated view of how the instructions reach the user,
   in the style of the homepage hero (paper ground, a machine, connector
   lines carrying violet pulses, document cards that update and tick).
   Without JavaScript, or with reduced motion, it shows its final state. */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2");
}

.mrc-flow { display: grid; gap: clamp(48px, 6vw, 72px); }

.mrc-anim {
  --mrc-ink: #29282c;
  --mrc-muted: #79767d;
  --mrc-violet: #8060b4;
  --mrc-line: #d6d1d9;
  position: relative;
  margin: 0;
  padding: clamp(28px, 4vw, 48px) clamp(18px, 4vw, 48px) clamp(24px, 3vw, 40px);
  overflow: hidden;
  border-radius: 28px;
  background: radial-gradient(ellipse 80% 70% at 50% 0%, #fbfaf8 0%, #f4f3ef 60%, #efede8 100%);
  color: var(--mrc-ink);
  color-scheme: light;
  font: 400 14px/1.5 "Inter", sans-serif;
}

.mrc-anim p { margin: 0; color: inherit; }
.mrc-anim__machine { position: relative; width: min(560px, 82%); margin: 0 auto; }
.mrc-anim__machine img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 52%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 60% at 50% 52%, #000 55%, transparent 100%);
}

.mrc-anim__plate {
  position: absolute;
  top: 14%;
  left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 7px;
  overflow: hidden;
  border: 1px solid #e1dde3;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 14px 28px -18px rgb(56 43 67 / 28%);
}
.mrc-anim__qr { display: block; width: 34px; height: 34px; }
.mrc-anim__plate span { display: grid; }
.mrc-anim__plate b { font: 500 9.5px/1.4 "Geist Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mrc-muted); }
.mrc-anim__plate i { font-style: normal; font-size: 13px; letter-spacing: -0.01em; color: var(--mrc-ink); }
.mrc-anim__plate::after {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 36px;
  height: 2px;
  background: var(--mrc-violet);
  box-shadow: 0 0 10px 2px rgb(128 96 180 / 45%);
  content: "";
  opacity: 0;
}

.mrc-anim__caption { margin-top: 6px !important; text-align: center; font-size: 15px; letter-spacing: -0.01em; color: #6e6873; }
.mrc-anim__caption span,
.mrc-doc__ref { font: 400 10px/1.4 "Geist Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #9a90a1; }
.mrc-anim__caption span { margin-left: 8px; }

.mrc-anim__lines { display: block; width: 100%; height: 72px; margin: 8px 0 -3px; overflow: visible; }
.mrc-anim__line,
.mrc-anim__pulse { fill: none; vector-effect: non-scaling-stroke; }
.mrc-anim__line { stroke: var(--mrc-line); stroke-width: 1.2; }
.mrc-anim__dot { fill: none; stroke: #c9c2cd; stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mrc-anim.is-armed .mrc-anim__dot { opacity: 0; }
.mrc-anim.is-playing .mrc-anim__dot { animation: mrc-fade 0.4s ease 1.7s both; }
.mrc-anim__pulse { stroke: var(--mrc-violet); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.07 1.2; stroke-dashoffset: 0.07; opacity: 0; }

.mrc-anim__docs {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 22px);
  align-items: start;
}

.mrc-doc {
  --arrival: 0;
  position: relative;
  min-width: 0;
  padding: 18px 20px 20px;
  overflow: hidden;
  border: 1px solid #e1dde3;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 16px 30px -20px rgb(56 43 67 / 18%);
}
.mrc-doc__top { display: flex; align-items: center; gap: 9px; color: #928997; }
.mrc-doc__icon { flex: none; width: 17px; height: 21px; color: #9f90ac; }
.mrc-doc__top .mrc-doc__ref { margin-left: auto; }
.mrc-doc__status {
  display: grid;
  flex: none;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid #d4dece;
  border-radius: 50%;
  background: #f2f5ef;
  color: #77866f;
}
.mrc-doc__status svg { width: 12px; height: 12px; }
.mrc-doc__title { margin: 14px 0 12px !important; font-size: 18px; line-height: 1.25; letter-spacing: -0.035em; color: var(--mrc-ink); }
.mrc-doc__body { padding-top: 6px; border-top: 1px solid #eae5ed; }
.mrc-doc__row { display: flex; gap: 11px; margin: 0 -7px !important; padding: 6px 7px; border-radius: 3px; font-size: 13px; color: #6f6874; }
.mrc-doc__row span { font: 400 10px/1.9 "Geist Mono", monospace; color: #ad9cba; }
.mrc-doc__note { margin-top: 10px !important; font: 400 10px/1.55 "Geist Mono", monospace; letter-spacing: 0.02em; color: #8b8291; }
.mrc-doc--digital .mrc-doc__row:first-child { background: rgb(135 105 164 / 7%); color: #705886; }
.mrc-doc__progress { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: #bac6b1; transform-origin: left; }

.mrc-anim__strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(12px, 2vw, 20px);
  padding: 12px 18px;
  border: 1px solid #e1dde3;
  border-radius: 6px;
  background: rgb(255 255 255 / 70%);
}
.mrc-anim__strip p { flex: 1; font-size: 13.5px; color: #6f6874; }
.mrc-anim__strip b { margin-right: 6px; font-weight: 500; color: var(--mrc-ink); }

/* The sequence: armed (hidden) by the script, played once in view. */
.mrc-anim.is-armed .mrc-anim__plate,
.mrc-anim.is-armed .mrc-doc,
.mrc-anim.is-armed .mrc-anim__strip,
.mrc-anim.is-armed .mrc-anim__caption { opacity: 0; }
.mrc-anim.is-armed .mrc-anim__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mrc-anim.is-armed .mrc-doc__status { border-color: #ded6e4; background: #fff; color: transparent; }
.mrc-anim.is-armed .mrc-doc__progress { transform: scaleX(0); background: #bda7ca; }
.mrc-anim.is-armed .mrc-doc--digital .mrc-doc__row:first-child { background: none; color: #6f6874; }

.mrc-anim.is-playing .mrc-anim__plate { animation: mrc-rise 0.6s ease 0.1s both; }
.mrc-anim.is-playing .mrc-anim__plate::after { animation: mrc-scan 1.1s ease-in-out 0.6s 2 both; }
.mrc-anim.is-playing .mrc-anim__caption { animation: mrc-fade 0.6s ease 0.5s both; }
.mrc-anim.is-playing .mrc-anim__line { animation: mrc-draw 0.9s ease 1s both; }
.mrc-anim.is-playing .mrc-doc { animation: mrc-rise 0.6s ease calc(1.5s + var(--i) * 0.2s) both, mrc-arrive 1.6s ease calc(2.3s + var(--i) * 0.55s) both; }
.mrc-anim.is-playing .mrc-doc__status { animation: mrc-tick 0.5s ease calc(3s + var(--i) * 0.55s) both; }
.mrc-anim.is-playing .mrc-doc__progress { animation: mrc-progress 0.9s ease calc(2.3s + var(--i) * 0.55s) both; }
.mrc-anim.is-playing .mrc-doc--digital .mrc-doc__row:first-child { animation: mrc-row 0.8s ease 2.9s both; }
.mrc-anim.is-playing .mrc-anim__pulse { animation: mrc-pulse 3.6s ease-in-out calc(2s + var(--p, 0) * 0.55s) infinite; }
.mrc-anim.is-playing .mrc-anim__pulse:nth-of-type(5) { --p: 1; }
.mrc-anim.is-playing .mrc-anim__pulse:nth-of-type(6) { --p: 2; }
.mrc-anim.is-playing .mrc-anim__strip { animation: mrc-rise 0.6s ease 4.4s both; }

@keyframes mrc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mrc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mrc-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes mrc-scan { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(32px); } }
@keyframes mrc-pulse { 0% { opacity: 0; stroke-dashoffset: 0.07; } 8% { opacity: 1; } 70% { opacity: 1; stroke-dashoffset: -1; } 72%, 100% { opacity: 0; stroke-dashoffset: -1; } }
@keyframes mrc-arrive {
  0% { border-color: #e1dde3; box-shadow: 0 16px 30px -20px rgb(56 43 67 / 18%); }
  30% { border-color: #ac8dbf; box-shadow: 0 16px 30px -20px rgb(56 43 67 / 18%), 0 0 0 3px rgb(157 124 181 / 12%); }
  100% { border-color: #e1dde3; box-shadow: 0 16px 30px -20px rgb(56 43 67 / 18%); }
}
@keyframes mrc-tick {
  from { border-color: #bfa7cf; background: #f4eff8; color: transparent; }
  to { border-color: #d4dece; background: #f2f5ef; color: #77866f; }
}
@keyframes mrc-progress {
  0% { transform: scaleX(0); background: #bda7ca; }
  80% { transform: scaleX(1); background: #bda7ca; }
  100% { transform: scaleX(1); background: #bac6b1; }
}
@keyframes mrc-row {
  from { background: none; color: #6f6874; }
  40% { background: rgb(135 105 164 / 14%); color: #705886; }
  to { background: rgb(135 105 164 / 7%); color: #705886; }
}

@media (prefers-reduced-motion: reduce) {
  .mrc-anim *, .mrc-anim *::after { animation: none !important; }
}

/* The conditions, under the visual, in two columns. */
.mrc-conditions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 5vw, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cond;
}
.mrc-conditions li {
  position: relative;
  margin: 0;
  padding: 22px 0 22px 52px;
  border-top: 1px solid var(--line);
  list-style: none;
  counter-increment: cond;
}
.mrc-conditions li::before {
  position: absolute;
  top: 20px;
  left: 0;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-fill);
  content: counter(cond);
  font-size: 0.8rem;
  font-weight: 700;
}
.mrc-conditions strong { display: block; font-size: 1.12rem; letter-spacing: -0.015em; line-height: 1.35; }
.mrc-conditions span { display: block; margin-top: 4px; color: var(--ink-2); line-height: 1.55; }
.mrc-conditions small {
  display: block;
  margin-top: 8px;
  color: var(--ink-3);
  font: 400 0.72rem/1.4 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mrc-aside { max-width: 760px; margin: 32px 0 0; color: var(--ink-3); font-size: 0.9rem; line-height: 1.6; }

@media (max-width: 860px) {
  .mrc-anim__docs { grid-template-columns: minmax(0, 1fr); }
  .mrc-anim__lines { display: none; }
  .mrc-anim__docs { margin-top: 20px; }
  .mrc-conditions { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .mrc-anim__machine { width: 100%; }
  .mrc-anim__plate { top: auto; bottom: -6px; }
  .mrc-anim__caption { margin-top: 18px !important; font-size: 14px; }
  .mrc-anim__caption span { display: block; margin: 4px 0 0; }
  .mrc-anim__strip { flex-wrap: wrap; }
}

/* ---------- Comparison, band, sources ---------- */
.ft-page .mrc-compare { min-width: 640px; }
.mrc-compare th[scope="row"] { width: 20%; color: var(--ink); font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
.mrc-compare td { line-height: 1.5; }

.ft-band .mrc-band-note { font-size: 0.9rem; line-height: 1.55; }

.mrc-sources { width: min(900px, calc(100% - 40px)); margin: 28px auto 0; }
.mrc-sources details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mrc-sources summary {
  position: relative;
  padding: 18px 42px 18px 0;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  list-style: none;
}
.mrc-sources summary::-webkit-details-marker { display: none; }
.mrc-sources summary::after { position: absolute; top: 15px; right: 0; color: var(--ink-3); content: "+"; font-size: 1.35rem; font-weight: 400; }
.mrc-sources details[open] summary::after { content: "−"; }
.mrc-sources ul { margin: 0 0 20px; padding-left: 20px; color: var(--ink-2); font-size: 0.9rem; }
.mrc-sources li { margin-bottom: 8px; line-height: 1.6; }

/* ---------- Print: the checklist only ---------- */
@media print {
  @page { margin: 14mm 14mm 16mm; }
  body { margin: 0 !important; padding: 0 !important; background: #fff; color: #000; }
  body > header,
  .tw-consent-banner,
  .tw-consent-manage,
  .tw-consent-overlay,
  .skip-link,
  .footer,
  .nav-lang { display: none !important; }
  .ft-page main > :not(.mrc-print-keep) { display: none !important; }
  .mrc-hero { width: auto; margin: 0; padding: 0 0 8pt; text-align: left; }
  .mrc-hero > :not(h1) { display: none !important; }
  .mrc-hero h1 { max-width: none; margin: 0; font-size: 18pt; letter-spacing: -0.01em; line-height: 1.2; }
  .mrc-hero h1 .ft-quiet { color: #000; }
  #checklist { width: auto; margin: 0; padding: 0; }
  #checklist > .ft-section__header,
  .mrc-form,
  .mrc-actions,
  .mrc-progress,
  .mrc-note,
  .mrc-group__count { display: none !important; }
  .mrc-group__summary::after { display: none !important; }
  .mrc-disclosure { max-width: none; margin: 0 0 8pt; padding: 5pt 7pt; border: 1px solid #999; color: #000; font-size: 8.5pt; text-align: left; }
  .mrc { padding: 0; border-radius: 0; background: none; }
  .mrc-results { margin: 0; }
  .mrc-results__head { position: static; padding: 0 0 6pt; border-bottom: 1px solid #999; border-radius: 0; background: none; box-shadow: none; }
  .mrc-results__title { font-size: 13pt; }
  .mrc-status,
  .mrc-answers,
  .mrc-print-only { color: #000; font-size: 9pt; }
  .mrc-answers { margin-top: 6pt; padding: 0; border-radius: 0; background: none; }
  .mrc-print-only { display: block; margin: 4pt 0 0; }
  .mrc-group { margin-top: 12pt; border-radius: 0; background: none; }
  .mrc-group__summary { display: block; padding: 0; }
  .mrc-group__title { font-size: 11pt; break-after: avoid; }
  .mrc-group__body { padding: 0; }
  .mrc-group__note { margin: 2pt 0 4pt; color: #333; font-size: 8.5pt; }
  .mrc-list li.mrc-item { border-top: 0; border-bottom: 1px solid #ccc; }
  .mrc-item { break-inside: avoid; }
  .mrc-item label { display: block; padding: 4pt 0 4pt 22pt; font-size: 9.5pt; line-height: 1.35; }
  .mrc-item .mrc-ref { margin-left: 6pt; white-space: normal; }
  .mrc-item .mrc-tag { margin-left: 6pt; }
  .mrc-item input { top: 5pt; left: 2pt; width: 11pt; height: 11pt; }
  .mrc-item input:checked ~ .mrc-item__text { color: #000; text-decoration: none; }
  .mrc-tag { border: 1px solid #666; background: none; color: #000; font-size: 7.5pt; }
  .mrc-ref { color: #333; font-size: 8pt; }
  .mrc-sources { width: auto; margin-top: 14pt; font-size: 8.5pt; }
  .mrc-sources details { border: 0; }
  .mrc-sources summary { padding: 0 0 4pt; color: #000; font-size: 11pt; }
  .mrc-sources summary::after { display: none; }
  .mrc-sources ul { color: #000; font-size: 8.5pt; }
  .mrc-sources a { color: #000; text-decoration: none; }
}
