/* Redeem page only. Same rule as the shell: no colour, no duration, no radius
 * that is not a token. */

.phead {
  padding: var(--s-6) var(--s-6) var(--s-5);
  border-bottom: 1px solid var(--ln);
  position: relative; overflow: hidden;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 0%), var(--spot), transparent 62%);
}
.phead > * { position: relative; z-index: 2; }
.phead h1 { margin: 0 0 7px; font-size: var(--t-h2); }
.phead .sub { margin: 0; color: var(--mut); font-size: var(--t-sm); max-width: 58ch; }

/* LIGHT 4: lit, never boxed. */
.phead mark {
  background: none; color: var(--acc-txt); position: relative; padding: 0;
  text-shadow: 0 0 28px var(--bloom), 0 0 60px var(--bloom);
}
.phead mark::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.03em; height: 2px;
  background: linear-gradient(90deg, transparent, var(--acc) 16%, var(--acc) 84%, transparent);
  box-shadow: 0 0 16px -3px var(--acc);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-reveal) var(--ease) 0.12s;
}
.phead[data-seen="1"] mark::after { transform: scaleX(1); }

.hint { color: var(--mut); font-size: var(--t-sm); max-width: 52ch; margin: 0 0 var(--s-4); }

/* A read-only field should not look typed into. Dimming it is not enough on
   its own, so it also loses the focus ring and is out of the tab order. */
.field input[readonly] { color: var(--mut); cursor: default; }
.field input[readonly]:focus { border-color: var(--ln); box-shadow: inset 0 1px 0 var(--edge); padding-left: var(--s-3); }

/* One live region, three tones. Colour is never the only signal: each state
   reads differently in words too, because roughly one man in twelve cannot
   tell the red from the green. */
.msg { min-height: 1.4em; font-size: var(--t-sm); margin: var(--s-3) 0 0; color: var(--mut); }
.msg[data-kind="ok"] { color: var(--ok); }
.msg[data-kind="bad"] { color: var(--warn); }
.msg[data-kind="warn"] { color: var(--warn); }
.msg:empty { display: none; }

.code {
  font-family: var(--mono); font-size: 13px; line-height: 1.8;
  background: var(--inp); border: 1px solid var(--ln); border-radius: var(--rad-soft);
  box-shadow: inset 0 1px 0 var(--edge);
  padding: var(--s-4); margin: 0 0 var(--s-2);
  overflow-x: auto; white-space: pre; color: var(--mut); max-width: 100%;
}
.code b { color: var(--fg); font-weight: 400; }
.code u { text-decoration: none; color: var(--acc-txt); }

/* free key path */
.prog { height: 2px; border-radius: 2px; background: var(--barbg); margin: 2px 0 var(--s-4); overflow: hidden; }
.prog i { display: block; height: 100%; width: 0; background: var(--acc); box-shadow: 0 0 8px -2px var(--acc); transition: width var(--t-bloom) var(--ease); }
[data-seen="1"] .prog i { width: var(--w); }

.steps { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.steps li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--ln); align-items: start;
}
.steps li:last-child { border-bottom: 0; }
.steps i {
  font-style: normal; width: 26px; height: 26px; display: grid; place-items: center;
  font-size: 11.5px; font-family: var(--mono); font-variant-numeric: tabular-nums;
  border: 1px solid var(--ln); border-radius: var(--rad-soft); color: var(--mut);
  box-shadow: inset 0 1px 0 var(--edge);
  transition: color var(--t-tint) ease, border-color var(--t-tint) ease, box-shadow var(--t-move) var(--ease);
}
.steps li[data-ok="1"] i { color: var(--acc-txt); border-color: var(--acc); box-shadow: 0 0 18px -8px var(--acc), inset 0 1px 0 var(--edge); }
.steps li[data-ok="1"] .ic { width: 15px; height: 15px; }
.steps em { font-style: normal; display: block; font-size: var(--t-sm); font-weight: 500; margin-bottom: 2px; }
.steps small { color: var(--mut); font-size: var(--t-xs); line-height: 1.5; display: block; }

.helpline {
  margin-top: var(--s-5); font-size: var(--t-sm); color: var(--mut);
  border-top: 1px solid var(--ln); padding-top: var(--s-4);
}