/* ============================================================================
   Walking Reset — the assessment wizard.
   Layout: editorial split. A sequenced rail on the left carries the step
   number and its framing copy; the working surface sits on the right.
   ========================================================================== */

.shell {
  width: min(100% - (var(--gutter) * 2), 1120px);
  margin-inline: auto;
}

/* --- Language switch: a small floating pill, detached from the top edge --- */

.langbar {
  display: flex;
  justify-content: flex-end;
  padding-top: 1.5rem;
}

.langbar__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(253, 251, 247, 0.72);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.langbar__opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.34rem 0.85rem;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .langbar__opt:not([aria-current="true"]):hover { color: var(--ink); }
}

.langbar__opt[aria-current="true"] { color: #fff; }

.langbar__txt { position: relative; z-index: 1; }

/* Sits behind the label rather than being the label's own background, so the
   chip can travel between options while the two words stay put. */
.langbar__ind {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--ink);
  view-transition-name: lang-indicator;
}

/* --- Hero and filming narrative ---------------------------------------- */

.hero { padding-top: clamp(2.5rem, 1rem + 6vw, 7rem); }
.hero__opening {
  min-height: min(76vh, 48rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.72fr);
  grid-template-areas: "title lede" "cue lede";
  align-content: center;
  align-items: end;
  gap: clamp(1.4rem, 1rem + 3vw, 4.5rem);
  padding-bottom: clamp(4rem, 2rem + 7vw, 8rem);
}
.hero h1 {
  grid-area: title;
  max-width: 9ch;
  font-size: clamp(3.7rem, 2.2rem + 7.5vw, 6rem);
  letter-spacing: -0.036em;
  font-weight: 500;
  line-height: 0.95;
  font-variation-settings: "opsz" 72;
}
.hero__lede {
  grid-area: lede;
  align-self: end;
  max-width: 38ch;
  padding-bottom: 0.35rem;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-2);
}
.hero__cue { grid-area: cue; justify-self: start; }
.hero-guide {
  position: relative;
  display: grid;
  grid-template-columns: minmax(13rem, 0.52fr) minmax(0, 1.48fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  padding: clamp(3.2rem, 2rem + 5vw, 7rem) 0;
  border-top: 1px solid var(--hairline);
}
.hero-guide__rail { align-self: start; }
.hero-guide__title { max-width: 8ch; font-size: var(--step-3); font-weight: 500; }
.hero-guide__note { max-width: 31ch; margin-top: 1rem; color: var(--ink-3); font-size: var(--step--1); }
.hero-guide__story { min-width: 0; }
.hero-plate { transform-origin: 50% 50%; }
.hero-mistakes { padding-top: clamp(2rem, 1rem + 4vw, 4rem); }
.is-enhanced .hero__opening > *,
.is-enhanced .hero-plate,
.is-enhanced .hero-mistakes { will-change: transform, opacity, clip-path; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .hero-guide__rail { position: sticky; top: clamp(2rem, 8vh, 5rem); }
}

/* --- The split ---------------------------------------------------------- */

.step {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 0.5rem + 3vw, 4rem);
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
  border-top: 1px solid var(--hairline);
}

.step[hidden] { display: none; }

.step__rail { position: relative; }

@media (min-width: 900px) {
  .step__rail {
    position: sticky;
    top: 2.5rem;
    align-self: start;
  }
}

.step__num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  font-variation-settings: "opsz" 60;
}

.step__title {
  margin-top: 0.9rem;
  font-size: var(--step-2);
  font-weight: 500;
  font-variation-settings: "opsz" 32;
}

.step__note {
  margin-top: 0.8rem;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 34ch;
}

.step[data-state="done"] .step__num { color: var(--ink-3); }

/* --- Working surface ---------------------------------------------------- */

fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }

.field + .field { margin-top: 1.6rem; }

.cta-row { margin-top: 1.6rem; }

.step__body > .bezel > .core > .prose + .cta-row { margin-top: 1.35rem; }

.field__legend {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  padding: 0;
  margin-bottom: 0.15rem;
}

.field__hint {
  font-size: var(--step--1);
  color: var(--ink-3);
  margin-bottom: 0.85rem;
  max-width: 58ch;
}

/* Checkboxes ------------------------------------------------------------- */

.check {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.55rem 0;
  cursor: pointer;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-2);
  transition: color var(--dur-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .check:hover { color: var(--ink); }
}
.check + .check { border-top: 1px solid var(--hairline); }

.check input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.16rem 0 0;
  border: 1px solid var(--hairline-2);
  border-radius: 6px;
  background: var(--card);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition:
    background-color var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out);
}

.check input::before {
  content: "";
  width: 0.62rem;
  height: 0.62rem;
  transform: scale(0);
  transform-origin: center;
  transition: transform var(--dur-ui) var(--ease-expo);
  box-shadow: inset 1rem 1rem #fff;
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 84% 0%, 39% 67%);
}

.check input:checked { background: var(--sage); border-color: var(--sage); }
.check input:checked::before { transform: scale(1); }

.check--consent {
  border-top: 1px solid var(--hairline);
  margin-top: 1.1rem;
  padding-top: 1.1rem;
}

/* Select rows ------------------------------------------------------------ */

/* Same row grammar as the checkboxes directly above them — question on the
   left, control on the right, hairline between — because these are the same
   kind of thing and answering fourteen of them in a row should feel like one
   list, not a second form. The controls share a column so the eye can run down
   the answers without re-finding them on each line. */

.pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

.pick + .pick { border-top: 1px solid var(--hairline); }

.pick__q {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-2);
  transition: color var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .pick:hover .pick__q { color: var(--ink); }
}

/* The native control carries system chrome that has nothing to do with this
   page, so it is rebuilt on the same tokens as every other control here. The
   chevron is a background image rather than a pseudo-element because a select
   cannot host one. */
.pick select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 2.6rem;
  padding: 0.5rem 2.2rem 0.5rem 0.85rem;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-ctl);
  background-color: var(--card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1.2 1.2 5.5 5.5l4.3-4.3' fill='none' stroke='%236E655A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  color: var(--ink);
  font: inherit;
  font-family: var(--sans);
  font-size: var(--step--1);
  line-height: 1.4;
  cursor: pointer;
  transition:
    border-color var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .pick select:hover { border-color: var(--ink-3); background-color: var(--card-quiet); }
}

.pick select:focus-visible { border-color: var(--sage); }

/* ============================================================================
   The filming guide (step 01).
   Diagrams carry no type of their own — an img element is out of reach of
   the page's webfonts and of its two languages — so every word here is HTML
   sitting beside a picture, and the numbered keys are the join between them.
   ========================================================================== */

.room { margin: 0; }

.room__img { display: block; width: 100%; height: auto; }

.room__legend {
  counter-reset: key;
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem 2.25rem;
}

.room__legend li {
  counter-increment: key;
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr);
  gap: 0.7rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-3);
}

/* The same disc as the one printed in the drawing, so the eye can travel from
   a numbered point in the room to the sentence that explains it. */
.room__legend li::before {
  content: counter(key);
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 0.8rem;
  font-variant-numeric: lining-nums;
  line-height: 1;
}

.room__legend b,
.fix b { color: var(--ink); font-weight: 600; }

.fix {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: center;
  gap: 1.6rem;
  margin: 1.85rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
}

.fix__img { display: block; width: 100%; height: auto; }

.fix figcaption {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 46ch;
}

.fix b { display: block; margin-bottom: 0.2rem; }

.guide__sub {
  margin: 1.95rem 0 0.9rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
}

.dont {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.dont li { min-width: 0; }
.dont img { display: block; width: 100%; height: auto; }

.dont span {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--ink-3);
}

/* Upload rows ------------------------------------------------------------ */

.uploads { display: grid; gap: 0.5rem; }

.upload {
  --shot: 96px;
  display: grid;
  grid-template-columns: var(--shot) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem 0.7rem 0.7rem;
  border-radius: var(--r-ctl);
  background: var(--card-quiet);
  border: 1px solid transparent;
  transition:
    background-color var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out);
}

/* The diagram of the shot this slot wants. Ten labels that differ by one word
   are hard to tell apart at a glance; the viewfinder is what separates them. */
.upload__shot {
  display: block;
  width: var(--shot);
  height: var(--shot);
  transition: opacity var(--dur-ui) var(--ease-out);
}

/* Once the file is in, the instruction has done its job and stops competing
   with the row that still needs one. */
.upload[data-status="done"] .upload__shot { opacity: 0.4; }

.upload:has(input:focus-visible) { border-color: var(--sage-line); }
.upload[data-status="done"] { background: var(--sage-soft); }
.upload[data-status="error"] { background: var(--rose-soft); }

.upload__label { font-size: var(--step--1); font-weight: 600; }

.upload__hint {
  display: block;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 0.1rem;
}

.upload__tag {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: 0.5rem;
}

.upload__ctl { display: flex; align-items: center; gap: 0.75rem; }

.upload__status {
  font-size: var(--step--1);
  color: var(--ink-3);
  min-width: 5.5rem;
  text-align: right;
}
.upload[data-status="done"]  .upload__status { color: var(--sage-ink); font-weight: 600; }
.upload[data-status="error"] .upload__status { color: var(--rose); font-weight: 600; }

/* The native control is replaced by its label, which stays keyboard-reachable
   because the input keeps its own focus ring under :focus-visible. */
.upload input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.upload__pick {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--hairline-2);
  background: var(--card);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-ui) var(--ease-out),
    color var(--dur-ui) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .upload__pick:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
}
.upload__pick:active { transform: scale(0.97); }
.upload input[type="file"]:focus-visible + .upload__pick {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
}

#intake-outcome:not(:empty) { margin-top: 1.5rem; }
#secret-box:not([hidden]) { margin-top: 1.6rem; }

/* Secret key ------------------------------------------------------------- */

.secret {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.85rem 0.85rem 0.85rem 1.1rem;
  border-radius: var(--r-ctl);
  background: var(--ink);
  color: #fff;
}

.secret__key {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  word-break: break-all;
}

.secret__copy {
  flex: none;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .secret__copy:hover { background: rgba(255, 255, 255, 0.2); }
}
.secret__copy:active { transform: scale(0.97); }

/* Progress --------------------------------------------------------------- */

.progress { display: flex; align-items: center; gap: 0.9rem; }

.progress__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--sage);
  flex: none;
  animation: pulse 1.9s var(--ease-fluid) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.82); }
}

.progress[data-done="true"] .progress__dot { animation: none; }
.progress[data-failed="true"] .progress__dot { background: var(--rose); animation: none; }

.progress__label { font-size: var(--step--1); color: var(--ink-2); }

/* Report frame ----------------------------------------------------------- */

.visuals__state { margin: 0; color: var(--ink-3); }
.visuals__state:empty { display: none; }
.visuals__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: var(--r-inner);
  background: var(--hairline);
}
.visual {
  margin: 0;
  min-width: 0;
  background: var(--paper);
}
.visual--clip { grid-column: 1 / -1; }
.visual img,
.visual video {
  display: block;
  width: 100%;
  max-height: 34rem;
  object-fit: contain;
  background: var(--ink);
}
.visual figcaption {
  padding: 0.65rem 0.8rem;
  font-size: var(--step--1);
  color: var(--ink-3);
}
.visuals__legend {
  margin: 1rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-3);
}

.reportbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

/* Same trap as .databanner: this is rendered with the hidden attribute, and
   `display: block` below would outrank the UA rule that hides it. Latent until
   now only because its step is hidden too. */
#report-frame[hidden] { display: none; }

#report-frame {
  width: 100%;
  border: 0;
  border-radius: var(--r-inner);
  background: var(--paper);
  display: block;
  min-height: 24rem;
}

.share-out {
  margin-top: 0.9rem;
  font-size: var(--step--1);
  color: var(--ink-3);
  word-break: break-all;
}

/* Colophon --------------------------------------------------------------- */

.colophon {
  border-top: 1px solid var(--hairline);
  margin-top: 1rem;
  padding: 2rem 0 4.5rem;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 62ch;
}

/* ============================================================================
   The one authored motion moment: a step unlocking. Steps are visible by
   default and the class is added by script, so nothing depends on JS to appear.
   ========================================================================== */

.step--reveal .step__rail,
.step--reveal .bezel {
  animation: rise var(--dur-enter) var(--ease-expo) backwards;
}
.step--reveal .bezel { animation-delay: 80ms; }

/* The shift is a variable so reduced-motion can zero the travel and keep the
   fade, rather than losing the cue that a new step arrived. */
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, var(--reveal-shift), 0); }
  to   { opacity: 1; transform: none; }
}

/* Eight upload slots landing at once reads as a dump; a short stagger makes it
   read as a list being laid out. Delays stay inside the card's own entrance. */
.step--reveal .upload {
  animation: rise 380ms var(--ease-out) backwards;
}
.step--reveal .upload:nth-child(1) { animation-delay: 200ms; }
.step--reveal .upload:nth-child(2) { animation-delay: 240ms; }
.step--reveal .upload:nth-child(3) { animation-delay: 280ms; }
.step--reveal .upload:nth-child(4) { animation-delay: 320ms; }
.step--reveal .upload:nth-child(5) { animation-delay: 360ms; }
.step--reveal .upload:nth-child(6) { animation-delay: 400ms; }
.step--reveal .upload:nth-child(7) { animation-delay: 440ms; }
.step--reveal .upload:nth-child(8) { animation-delay: 480ms; }

@media (max-width: 899px) {
  .step { grid-template-columns: minmax(0, 1fr); }
  .step__note { max-width: none; }
  .hero__opening {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "lede" "cue";
    align-items: start;
  }
  .hero__lede { max-width: 44ch; padding-bottom: 0; }
  .hero-guide { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hero-guide__title { max-width: none; }
  .hero-guide__note { max-width: 48ch; }
}

/* The room drawing is 900 units wide and holds detail the whole way across, so
   it gets the card to itself well before the layout runs out of room. */
@media (max-width: 760px) {
  .room__legend { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
  .fix { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .fix__img { max-width: 20rem; }
  .fix figcaption { max-width: none; }
  .dont { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1rem; }
}

/* The upload row runs out of horizontal room long before the viewport does:
   it sits inside a bezel inside the shell. Stack it early. */
@media (max-width: 640px) {
  .visuals__grid { grid-template-columns: minmax(0, 1fr); }
  .visual--clip { grid-column: auto; }
  /* 15rem of control plus a question does not fit a phone, so the answer moves
     under its question. The hairlines stay: they are what keeps fourteen
     stacked pairs from reading as twenty-eight loose lines. */
  .pick { grid-template-columns: minmax(0, 1fr); gap: 0.45rem; padding: 0.7rem 0; }

  /* The diagram stays on the label's line; only the control drops, so the row
     never becomes three stacked strips. */
  .upload { --shot: 72px; grid-template-columns: var(--shot) minmax(0, 1fr); gap: 0.7rem 0.85rem; }
  .upload__ctl { grid-column: 1 / -1; justify-content: space-between; }
  .upload__status { min-width: 0; text-align: left; }
  .upload__label { display: block; }
  .upload__tag { margin-left: 0; display: block; margin-top: 0.15rem; }
}

/* --- Access key, revealed on request ------------------------------------- */
/* The key is a credential. Printing it unprompted puts it on whatever screen
   happens to be visible; behind a disclosure it stays available without being
   broadcast. <details> gives the toggle, keyboard support and the open/closed
   semantics for free. */

.secret-reveal {
  margin-top: 1.15rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-ctl);
  background: var(--card-quiet);
}

.secret-reveal > summary {
  cursor: pointer;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  list-style: none;
}
.secret-reveal > summary::-webkit-details-marker { display: none; }

.secret-reveal > summary::after {
  content: "＋";
  float: right;
  color: var(--ink-3);
  transition: transform var(--dur-ui) var(--ease-out);
}
.secret-reveal[open] > summary::after { content: "－"; }

.secret-reveal__note {
  margin: 0.6rem 0 0;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-3);
}

/* --- Data notice ---------------------------------------------------------- */
/* A notice, not a gate: it never covers the page and never blocks interaction,
   because nothing here requires consent. Fixed to the bottom so it is visible
   without displacing the hero, and it yields on small screens. */

/* The hidden attribute only works through the UA rule `[hidden] { display: none }`,
   which ANY author display declaration outranks. Without this, setting
   banner.hidden = true changed the attribute and nothing else: the notice stayed
   on screen and its dismiss button looked broken. */
.databanner[hidden] { display: none; }

.databanner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.25rem;
  flex-wrap: wrap;
  padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.14);
}

.databanner__text {
  margin: 0;
  max-width: 68ch;
  font-size: var(--step--1);
  line-height: 1.5;
}

.databanner .databanner__close {
  flex: none;
  background: var(--paper);
  color: var(--ink);
  border-color: transparent;
}

@media print { .databanner { display: none; } }