/* ===========================================================================
   Poftim — visual system
   ---------------------------------------------------------------------------
   The look is "instrument": something engineered rather than decorated.

   Three rules hold it together, and breaking any one of them is what makes an
   interface drift into generic-template territory:

     1. No rounded corners. Anywhere. Radius is zero throughout.
     2. No shadows and no gradients. Structure comes from hairline rules and
        from real whitespace, not from floating cards.
     3. One signal colour, used only where something is live: the scan target,
        the progress fill, the connection state. Never on decoration.

   Fonts are system stacks by necessity — the Content Security Policy forbids
   remote fonts and the page ships no binaries. Character comes instead from
   treatment: extreme scale contrast, tight display tracking, widely tracked
   uppercase micro-labels, and tabular monospace for every number.

   Secondary text is deliberately not very light. Muted greys that look elegant
   in a mock-up become unreadable on a phone in daylight, and most of the text
   here explains what happens to somebody's private files.
   =========================================================================== */

:root {
  --paper:      #F7F5F0;  /* warm bone, not white — reads considered */
  --panel:      #EFEBE2;
  --ink:        #0A0A0B;
  --ink-soft:   #434248;  /* body copy: ~9:1 on paper */
  --ink-faint:  #6C6A64;  /* micro-labels only: ~5:1 on paper */
  --rule:       #DCD7CC;
  --rule-firm:  #B9B3A5;
  --signal:     #E23B00;  /* holds up against bone at small sizes */
  --signal-ink: #FFFFFF;
  --caution-bg: #FCEFE6;
  --caution-ink:#7C3410;
  --scrim:      rgba(10, 10, 11, 0.72);

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 34rem;
  --wide: 68rem;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #0A0A0B;
    --panel:      #131315;
    --ink:        #F2F0EC;
    --ink-soft:   #B5B2AB;
    --ink-faint:  #8B8880;
    --rule:       #26262A;
    --rule-firm:  #3C3C42;
    --signal:     #FF5C2B;
    --signal-ink: #0A0A0B;
    --caution-bg: #241408;
    --caution-ink:#FFC9A6;
    --scrim:      rgba(0, 0, 0, 0.82);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* --- shared type ---------------------------------------------------------- */

.eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.eyebrow--alert { color: var(--signal); }

.display {
  margin: 0;
  font-size: clamp(2.1rem, 1.5rem + 2.9vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

.heading {
  margin: 0.5rem 0 0;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.05;
  text-wrap: balance;
}

/* The instruction under the code. Deliberately modest: the code itself and the
   one button are what the page is for. */
.caption {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lede {
  margin: 0;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Explanations of what happens to somebody's files are not secondary text. */
.lede--strong {
  color: inherit;
  max-width: 46rem;
  font-size: 1.125rem;
  margin-top: 1.25rem;
}

.note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.note--fine { font-size: 0.8125rem; color: var(--ink-faint); max-width: 26rem; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip:focus { left: 0; }

.noscript {
  margin: 0;
  padding: 1rem var(--gutter);
  background: var(--signal);
  color: var(--signal-ink);
  font-size: 0.9375rem;
  text-align: center;
}

/* --- masthead ------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.masthead__end {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 1.75rem);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: inherit;
  text-decoration: none;
}

.brand__mark {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  flex: none;
  overflow: visible;
}

/* The core square is the only part of the mark that carries the signal
   colour — it stands for the payload being handed over. */
.brand__core { fill: var(--signal); }

.brand__word {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.infolink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.375rem 0;
}
.infolink:hover { color: var(--signal); }
.infolink__glyph { width: 0.9375rem; height: 0.9375rem; flex: none; }

/* Nothing competes with a transfer in progress. */
:root[data-app-state="offer"] .infolink,
:root[data-app-state="transferring"] .infolink { display: none; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.status__dot {
  width: 7px;
  height: 7px;
  background: var(--ink-faint);
  flex: none;
}

.status[data-tone="live"] { color: var(--signal); }
.status[data-tone="live"] .status__dot { background: var(--signal); }
.status[data-tone="busy"] .status__dot { animation: blink 1.1s steps(1) infinite; }
.status[data-tone="done"] { color: var(--ink); }
.status[data-tone="done"] .status__dot { background: var(--ink); }

@keyframes blink { 50% { opacity: 0.25; } }

/* --- the tool ------------------------------------------------------------- */

.app {
  min-height: calc(100svh - 3.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem) var(--gutter);
}

.stage {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  width: 100%;
  max-width: var(--measure);
}

.stage--centred { align-items: center; text-align: center; }
.stage--centred .lede { text-align: center; }

.app[data-state="waiting"]      .stage[data-stage="waiting"],
.app[data-state="connecting"]   .stage[data-stage="connecting"],
.app[data-state="confirm"]      .stage[data-stage="confirm"],
.app[data-state="connected"]    .stage[data-stage="connected"],
.app[data-state="offer"]        .stage[data-stage="offer"],
.app[data-state="transferring"] .stage[data-stage="transferring"],
.app[data-state="complete"]     .stage[data-stage="complete"],
.app[data-state="error"]        .stage[data-stage="error"] {
  display: flex;
}

/* Waiting is the front door: code, instruction, action, in that order. */
.app[data-state="waiting"] .stage {
  align-items: center;
  text-align: center;
  gap: 1rem;
}

/* --- scan target ---------------------------------------------------------- */

/* A white plate holding the code, framed by four corner ticks sitting outside
   it — the way a viewfinder brackets what it is aimed at. This is the motif
   the whole identity is built from, so it is drawn large enough to register. */
/* Both the plate and the frame shrink-wrap the code.
   The renderer floors the canvas to a whole number of device pixels per module,
   so its final width is usually a little under the space available. If the
   plate stretched to fill that space instead, the leftover white would sit to
   one side and the code would look off-centre inside its own frame. */
.scanframe {
  position: relative;
  align-self: center;
  width: max-content;
  max-width: 100%;
  padding: clamp(1rem, 4vw, 1.5rem);
  line-height: 0;
}

.scanframe__plate {
  background: #FFFFFF;  /* scanners need the white surround, in either theme */
  padding: clamp(0.75rem, 3vw, 1rem);
}

.scanframe__tick {
  position: absolute;
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--signal);
  pointer-events: none;
}
.scanframe__tick[data-corner="tl"] { top: 0;    left: 0;  border-right: 0; border-bottom: 0; }
.scanframe__tick[data-corner="tr"] { top: 0;    right: 0; border-left: 0;  border-bottom: 0; }
.scanframe__tick[data-corner="bl"] { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.scanframe__tick[data-corner="br"] { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

.app[data-state="waiting"] .scanframe__tick { animation: hunt 2.6s ease-in-out infinite; }

@keyframes hunt {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Width and height are pinned inline by the renderer to hold a 1:1 device-pixel
   mapping, so no size is declared here. */
.qr {
  display: block;
  image-rendering: pixelated;
}

/* --- buttons -------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
}

.actions--stacked { width: 100%; justify-content: center; }
.app[data-state="waiting"] .actions { justify-content: center; }

.btn {
  font: inherit;
  font-weight: 600;
  letter-spacing: -0.01em;
  min-height: 3rem;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  background: none;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

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

.btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.btn--primary:hover { background: var(--signal); color: var(--signal-ink); }

.btn--large {
  min-height: 3.5rem;
  padding: 0 2.5rem;
  font-size: 1.0625rem;
  min-width: min(100%, 16rem);
}

.btn--compact { min-height: 2.5rem; padding: 0 1rem; font-size: 0.875rem; }

.btn--ghost { border-color: var(--rule-firm); }
.btn--ghost:hover { border-color: var(--ink); }

/* --- fingerprint ---------------------------------------------------------- */

.fingerprint {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(1.25rem, 0.9rem + 1.6vw, 1.875rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--signal);
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  width: 100%;
  text-align: center;
}

.fingerprint--small {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 0;
  padding: 0;
  text-align: left;
}

/* --- dropzone ------------------------------------------------------------- */

.dropzone {
  width: 100%;
  border: 1px dashed var(--rule-firm);
  padding: clamp(1.75rem, 7vw, 3.25rem) 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.dropzone.is-over {
  border-style: solid;
  border-color: var(--signal);
  background: var(--panel);
}

.dropzone__lead { margin: 0; font-size: 1.125rem; font-weight: 600; }
.dropzone__or { margin: 0; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }

/* --- progress ------------------------------------------------------------- */

#xfer-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.percent {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(4rem, 2rem + 12vw, 8rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.86;
  font-variant-numeric: tabular-nums;
}

.percent__sign {
  font-size: 0.28em;
  letter-spacing: 0.1em;
  vertical-align: super;
  color: var(--ink-faint);
}

.meter { width: 100%; height: 3px; background: var(--rule); }

.meter__fill {
  height: 100%;
  width: 0%;
  background: var(--signal);
  transition: width 200ms linear;
}

.readout {
  margin: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  border-top: 1px solid var(--rule);
}

.readout > div { padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }

.readout dt {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.readout dd {
  margin: 0.25rem 0 0;
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

/* --- file lists ----------------------------------------------------------- */

.measure {
  margin: 0;
  font-family: var(--mono);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.manifest {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  border-top: 1px solid var(--rule);
  max-height: 44vh;
  overflow-y: auto;
}

.manifest li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8125rem 0;
  border-bottom: 1px solid var(--rule);
}

.manifest .name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
}

.manifest .size {
  flex: none;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.manifest a {
  flex: none;
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--rule-firm);
}
.manifest a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.caution {
  margin: 0;
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--caution-bg);
  color: var(--caution-ink);
  font-size: 0.875rem;
  border-left: 3px solid var(--signal);
}

/* --- pulse ---------------------------------------------------------------- */

.pulse { display: flex; gap: 0.375rem; }
.pulse i {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--signal);
  animation: step 1.2s ease-in-out infinite;
}
.pulse i:nth-child(2) { animation-delay: 0.15s; }
.pulse i:nth-child(3) { animation-delay: 0.3s; }

@keyframes step {
  0%, 100% { opacity: 0.2; transform: translateY(0); }
  40%      { opacity: 1;   transform: translateY(-3px); }
}

/* ===========================================================================
   Document pages (/about)
   =========================================================================== */

.band { border-top: 1px solid var(--rule); padding: clamp(3rem, 8vw, 6rem) var(--gutter); }
.band--lead { border-top: 0; }

.band__inner { max-width: var(--wide); margin: 0 auto; }
.band__inner--narrow { max-width: 46rem; }

/* The security band inverts against whichever theme is active: dark on a light
   page, light on a dark one. The muted tones have to be redefined for the
   surface the band actually paints, or secondary text ends up light-on-light
   in one of the two themes. */
.band--inverted {
  background: var(--ink);
  color: var(--paper);
  border-top-color: var(--ink);
  --rule: #33333A;
  --rule-firm: #4A4A52;
  --ink-faint: #9C9A93;
  --ink-soft: #CFCCC5;
}

@media (prefers-color-scheme: dark) {
  /* Here the band is the light surface, so its muted tones must darken. */
  .band--inverted {
    --rule: #D6D1C6;
    --rule-firm: #B4AE9F;
    --ink-faint: #62605A;
    --ink-soft: #3E3D43;
  }
}

.band--inverted .heading { color: var(--paper); }

.steps {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.steps li { padding: 1.25rem 1.75rem 1.5rem 0; border-top: 2px solid currentColor; }

.steps__num {
  margin: 0 0 1.5rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--signal);
}

.steps h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.steps p:last-child { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.6; }

/* The trust ledger: a claim on the left, a flat verdict on the right. */
.ledger { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 1px solid var(--rule); }

.ledger li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9375rem 0;
  border-bottom: 1px solid var(--rule);
}

.ledger span { font-size: 1rem; }

.ledger em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  flex: none;
}

.specs {
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  border-top: 1px solid var(--rule);
}

.specs > div { padding: 1.125rem 1.5rem 1.125rem 0; border-bottom: 1px solid var(--rule); }

.specs dt {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.375rem;
}

.specs dd { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.5; }

/* Two-column explanation of a setting and its trade-off. */
.compare {
  margin: 2.5rem 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0 2.5rem;
}

.compare > div { padding-top: 1.25rem; border-top: 2px solid currentColor; }

.compare h3 { margin: 0 0 0.625rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; }
.compare p { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.6; }

/* --- accordion ------------------------------------------------------------ */

.accordion { margin-top: 2rem; }

.accordion details { border-top: 1px solid var(--rule); }
.accordion details:last-of-type { border-bottom: 1px solid var(--rule); }

.accordion summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 1.125rem 2.75rem 1.125rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.accordion summary:hover { color: var(--signal); }

/* A plus that becomes a minus — drawn, not a glyph, so it matches the ruling. */
.accordion summary::before,
.accordion summary::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  background: var(--signal);
}
.accordion summary::after { width: 14px; height: 2px; transform: translateY(-50%); }
/* No transition here: animating a pseudo-element's opacity across the [open]
   attribute leaves it stuck at zero when the entry is closed again, so the
   plus never comes back. An instant flip also suits the rest of the design. */
.accordion summary::before {
  width: 2px;
  height: 14px;
  right: 6px;
  transform: translateY(-50%);
}
.accordion details[open] summary::before { opacity: 0; }

.accordion details p {
  margin: 0 0 1.375rem;
  max-width: 42rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.closing { margin: 2.5rem 0 0; }

/* --- colophon ------------------------------------------------------------- */

.colophon { border-top: 1px solid var(--rule); padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) 2rem; }

.colophon__inner {
  max-width: var(--wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 3rem;
  align-items: flex-start;
  justify-content: space-between;
}

.colophon--slim { padding-top: 1.75rem; }
.colophon--slim .colophon__tag { max-width: 20rem; }

.colophon__brand { display: flex; gap: 0.875rem; align-items: flex-start; max-width: 22rem; }
.colophon__brand .brand__mark { width: 1.75rem; height: 1.75rem; margin-top: 0.125rem; }
.colophon__brand .brand__mark rect { fill: var(--signal); }

.colophon__tag { margin: 0; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.5; }
.colophon__tag strong { color: var(--ink); letter-spacing: -0.01em; }

.colophon__nav { display: flex; flex-direction: column; gap: 0.5rem; }
.colophon__nav--row { flex-direction: row; flex-wrap: wrap; gap: 1.25rem; }

.colophon__nav a {
  color: var(--ink-soft);
  font-size: 0.875rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
}
.colophon__nav a:hover { color: var(--ink); border-bottom-color: var(--signal); }

.colophon__meta { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; max-width: 24rem; }

.switch { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.switch input { accent-color: var(--signal); width: 1rem; height: 1rem; flex: none; }
.switch__label { font-size: 0.875rem; font-weight: 600; }

/* A toggle nobody can explain is a toggle nobody should ship. */
.switch__help { margin: 0; font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.5; }
.switch__help a { color: inherit; text-underline-offset: 3px; }
.switch__help a:hover { color: var(--signal); }

.linky {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.linky:hover { color: var(--signal); }

.devpanel {
  max-width: var(--wide);
  margin: 2rem auto 0;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}

.devpanel dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.devpanel > dl > div { padding: 0.5rem 1rem 0.5rem 0; }

.devpanel dt {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.devpanel dd { margin: 0.1875rem 0 0; font-family: var(--mono); font-size: 0.8125rem; word-break: break-all; }

/* --- session-safe information layer -------------------------------------- */

html.info-open,
html.info-open body { overflow: hidden; }

.info-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--paper);
  color: var(--ink);
}

.info-panel[hidden] { display: none; }

.info-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(0.75rem + env(safe-area-inset-top)) var(--gutter) 0.75rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.info-panel__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
}

.info-panel__scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.info-panel__closing {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* Destructive navigation is a deliberate decision, not an incidental link.
   The box follows the same hard-edged instrument language as the rest of the
   app: one rule, no radius, no shadow, and the safe action in signal colour. */
.leave-panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  background: var(--scrim);
}

.leave-panel[hidden] { display: none; }

.leave-panel__box {
  width: min(100%, 34rem);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--rule-firm);
}

.leave-panel__title { margin-top: 0.75rem; }
.leave-panel__box .lede { margin-top: 1rem; }
.leave-panel__actions { margin-top: 1.75rem; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 34rem) {
  .status__text { display: none; }
  .infolink span { display: none; }
  .infolink__glyph { width: 1.125rem; height: 1.125rem; }
  .steps li { padding-right: 0; }
  .colophon__inner { flex-direction: column; }

  .info-panel__bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .info-panel .status__text { display: inline; }
  .info-panel__actions { width: 100%; }
  .info-panel__actions .btn { flex: 1; }
}

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