/* Summon, for real: the picture, the review before the wallet signs, and the result. Same tokens as site.css. */

.pic input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pic__box { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 12px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--hair); font: 400 12.5px/1.4 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-2);
  transition: background-color 0.2s; }
.pic__box::before { content: ''; width: 56px; height: 56px; border-radius: 9px; background: var(--tile) center / cover no-repeat; background-image: var(--pic, none); }
.pic:hover .pic__box, .pic:focus-within .pic__box { background: var(--tile); }
.pic:focus-within .pic__box { box-shadow: inset 0 0 0 1px var(--ink); }

.review { display: grid; gap: 10px; padding: 12px 12px 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); background: var(--tile); }
.review[hidden] { display: none; }
.review__hd { margin: 0; font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.review dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; font-size: 12.5px; }
.review dt { color: var(--mute); }
.review dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.review dd b { font: 400 19px/1 var(--serif); }
.review__split { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--mute); }
.review__act { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.review__act .btn { font-size: 21px; padding: 10px 0 8px; }
.review__act button.quiet { all: unset; padding: 0 14px; border-radius: 12px; cursor: pointer; font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair); }
.review__act button.quiet:hover { background: var(--tile); }
.review--done dd a { color: var(--ink); }

/* Steps, like AGENCY's launch form: a numbered mono label, a serif name and a short note. */
.step { margin: 10px 0 -4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 400 19px/1.1 var(--serif); color: var(--ink); }
.stage[data-stage="1"] > .step, .form--compact .step { margin-top: 0; }
.step b { font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; color: var(--mute); }
.step small { flex-basis: 100%; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.pick { display: grid; gap: 6px; }
.pick__label { font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.pick input { background: transparent; border: 0; border-bottom: 1px solid var(--hair); padding: 7px 0; color: var(--ink); outline: none; font: inherit; font-size: 13px; }
.pick input:focus { border-bottom-color: var(--ink); }
.pick input[hidden] { display: none; }

/* The coin as it will look, updated as you type. */
.card-pv { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--hair); }
.card-pv__hd { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; }
.card-pv__pic { width: 44px; height: 44px; border-radius: 10px; background: var(--hair) center / cover no-repeat; background-image: var(--pic, none); }
.card-pv__id { display: grid; gap: 2px; }
.card-pv__id b { font: 400 21px/1.05 var(--serif); }
.card-pv__id span { font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.08em; color: var(--mute); }
.card-pv__line { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.card-pv__dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; font-size: 12px; line-height: 1.35; }
.card-pv__dl dt { font: 500 10.5px/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.card-pv__dl dd { margin: 0; color: var(--ink-2); }

.btn[aria-busy="true"] { opacity: 0.55; pointer-events: none; }
.btn[hidden] { display: none; } /* .btn resets every property, including the one [hidden] relies on */
.form__msg.is-err { color: var(--ink); }

/* Summon, Compact: the same form, one step at a time under a step bar. Full (every step at once) stays the default;
   the window's own Compact switch toggles it and each visitor's choice is remembered. */
.win__mode { all: unset; flex: none; height: 26px; padding: 0 9px; border-radius: 7px; cursor: pointer; color: var(--mute);
  font: 500 10px/26px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.win__mode:hover { background: var(--tile); color: var(--ink); }
.win__mode[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
.stage { display: contents; }
.stepper, .stagenav { display: none; }
.form--compact .stage { display: none; }
.form--compact .stage.is-on { display: grid; gap: 13px; animation: stage-in 0.32s var(--ease); }
.form--compact .step b { display: none; } /* the step bar carries the numbers */
.form--compact .stepper { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; padding: 3px; margin: -4px -4px 0; border-radius: 11px;
  position: sticky; top: 0; z-index: 2; background: var(--glass); box-shadow: inset 0 0 0 1px var(--hair); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.stepper button { all: unset; display: grid; justify-items: center; gap: 4px; padding: 7px 0 6px; border-radius: 8px; cursor: pointer; color: var(--mute);
  font: 500 8.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.stepper button b { font: italic 400 15px/1 var(--serif); letter-spacing: 0; color: var(--ink); transition: color 0.25s; }
.stepper button.is-todo b { color: var(--faint); } /* something on this step still has to be filled in */
.stepper button:hover { color: var(--ink); }
.stepper button[aria-current="step"] { background: var(--glass-hi); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--hair); }
.stepper button:focus-visible, .stagenav button:focus-visible, .win__mode:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.form--compact .stagenav { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.stagenav button { all: unset; text-align: center; padding: 12px 14px 11px; border-radius: 12px; cursor: pointer;
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; transition: background-color 0.2s, color 0.2s, opacity 0.25s, transform 0.25s var(--ease); }
.stagenav button[hidden] { display: none; }
.stagenav [data-move="-1"] { color: var(--mute); }
.stagenav [data-move="-1"]:hover { background: var(--tile); color: var(--ink); }
.stagenav [data-move="1"] { grid-column: 2; background: var(--ink); color: var(--bg); }
.stagenav [data-move="-1"][hidden] + [data-move="1"] { grid-column: 1 / -1; }
.stagenav [data-move="1"]:hover { opacity: 0.88; transform: translateY(-1px); }
.form--compact .check li { cursor: pointer; }
@keyframes stage-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .form--compact .stage.is-on { animation: none; } }