/* ==========================================================================
   Storefront - verification flow
   Appended to layout.css as its own sheet (store.css).

   Every colour, radius and font here is an existing token from styles.css, so
   the panel cannot drift from the rest of the site. Nothing new is introduced.
   ========================================================================== */

.storeAuthWrap {
  max-width: 46rem;
  margin-inline: auto;
}

/* --- step indicator ---------------------------------------------------- */

.storeSteps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.storeStep {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  color: var(--muted);
  font-family: var(--pixel);
  font-size: 0.88rem;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.storeStep span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background: var(--surface-3);
  color: var(--text-bright);
  font-size: 0.8rem;
  transition: background 0.18s ease, color 0.18s ease;
}

.storeStep.is-active {
  border-color: var(--accent-line);
  background: var(--surface-2);
  color: var(--text-bright);
}

.storeStep.is-active span {
  background: var(--accent);
  color: var(--ink);
}

.storeStep.is-done span {
  background: var(--green);
  color: var(--ink);
}

/* --- panel ------------------------------------------------------------ */

.storePanel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
  padding: clamp(24px, 4vw, 40px);
}

.storeStepForm h2 {
  margin-bottom: 12px;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.storePanelLead {
  color: var(--muted);
  margin-bottom: 26px;
}

/* --- fields ----------------------------------------------------------- */

.storeField {
  display: block;
  margin-bottom: 22px;
}

.storeField > span {
  display: block;
  color: var(--accent-bright);
  font-family: var(--pixel);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  font-size: 0.84rem;
}

.storeField input {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  color: var(--text-bright);
  font-family: var(--sans);
  font-size: 1.02rem;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.storeField input::placeholder {
  color: var(--faint);
}

.storeField input:hover {
  border-color: var(--line-3);
}

.storeField input:focus-visible {
  border-color: var(--accent-bright);
  background: var(--bg);
}

.storeField small {
  display: block;
  color: var(--faint);
  margin-top: 8px;
  font-size: 0.86rem;
}

/* --- checkbox --------------------------------------------------------- */

.storeCheck {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  margin-bottom: 8px;
}

.storeCheck input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: var(--accent);
}

.storeCheckHelp {
  display: block;
  color: var(--faint);
  margin-bottom: 24px;
  font-size: 0.86rem;
}

/* --- OTP boxes -------------------------------------------------------- */

.storeOtpRow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

.storeOtp {
  width: 100%;
  min-height: 66px;
  padding: 0;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  /* Noticeably rounder than the other inputs, so the six cells read as code
     boxes rather than text fields. */
  border-radius: 14px;
  color: var(--text-bright);
  font-family: var(--pixel);
  font-size: clamp(1.25rem, 4.5vw, 1.75rem);
  line-height: 1;
  text-align: center;
  outline: none;
  caret-color: var(--accent-bright);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.storeOtp:hover {
  border-color: var(--line-3);
}

.storeOtp:focus-visible {
  border-color: var(--accent-bright);
  background: var(--bg);
  box-shadow: 0 0 0 3px rgb(225 90 201 / 0.28);
}

/* --- messages --------------------------------------------------------- */

.storeMsg {
  min-height: 1.5em;
  color: var(--muted);
  margin-bottom: 18px;
  font-size: 0.94rem;
}

.storeMsg:empty {
  margin-bottom: 0;
}

.storeMsg.is-error {
  color: var(--red);
}

.storeMsg.is-success {
  color: var(--green);
}

/* --- recipient strip -------------------------------------------------- */

.storeForUser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  margin-bottom: 24px;
  padding: 13px 18px;
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}

.storeInlineBtn {
  /* Kept flush to the surrounding text, but the hit area is padded out to a
     comfortable 44px so it is usable on a phone. */
  min-height: 44px;
  padding: 8px 2px;
  background: none;
  border: 0;
  color: var(--accent-bright);
  font-family: var(--pixel);
  font-size: 0.86rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.storeInlineBtn:hover {
  color: var(--white);
}

/* --- verified summary ------------------------------------------------- */

.storeSummary {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 26px;
}

.storeSummary > div {
  display: grid;
  grid-template-columns: minmax(140px, 38%) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  background: var(--surface-2);
  padding: 15px 20px;
}

.storeSummary > div + div {
  border-top: 1px solid var(--line);
}

.storeSummary dt {
  color: var(--faint);
  font-family: var(--pixel);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.84rem;
}

.storeSummary dd {
  margin: 0;
  color: var(--text-bright);
  overflow-wrap: anywhere;
}

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

.storeSubmit {
  width: 100%;
}

.storeActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.storeActions .button {
  flex: 1 1 180px;
}

button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.storeFoot {
  color: var(--faint);
  text-align: center;
  margin-top: 26px;
  font-size: 0.92rem;
}

.storeFoot a {
  color: var(--accent-bright);
  text-underline-offset: 3px;
}

/* --- player head ------------------------------------------------------ */

.storeWho {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  margin-bottom: 16px;
  padding: 14px 18px;
}

.storeWho[hidden] {
  display: none;
}

/* Square, pixelated, bordered - the head is a 3D render of an 8x8 skin, so it
   must not be smoothed or it looks wrong. */
.storeWhoHead {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  object-fit: cover;
  image-rendering: pixelated;
  background: var(--surface-3);
  border: 2px solid var(--line-2);
  border-radius: var(--r-s);
}

.storeWhoText {
  min-width: 0;
}

.storeWhoText small {
  display: block;
  color: var(--accent-bright);
  font-family: var(--pixel);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
  font-size: 0.82rem;
}

.storeWhoText strong {
  display: block;
  color: var(--text-bright);
  font-family: var(--pixel);
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}

/* Clipboard fallback for the code, so entering it never depends on a paste
   event landing inside a box. Full width, sits under the primary action. */
.storePasteBtn {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  background: none;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-s);
  color: var(--muted);
  font-family: var(--pixel);
  font-size: 0.86rem;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.storePasteBtn:hover:not([disabled]) {
  border-color: var(--accent-line);
  color: var(--accent-bright);
  background: var(--accent-dim);
}

.storePasteBtn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Pointer from the store explainer page back to the storefront. */
.storeInfoNote {
  color: var(--faint);
  margin-top: 16px;
  font-size: 0.88rem;
}

.storeInfoNote a {
  color: var(--accent-bright);
  text-underline-offset: 3px;
}

/* --- live verification progress --------------------------------------- */

.storeProgress {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  height: 14px;
  margin-bottom: 14px;
  overflow: hidden;
}

.storeProgressFill {
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  height: 100%;
  width: 0%;
  /* The upstream reports real percentages, but it still jumps around, so the
     bar eases rather than snapping. */
  transition: width 0.45s var(--ease-out);
}

.storeProgressMeta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 16px;
  color: var(--muted);
  margin-bottom: 22px;
  font-size: 0.92rem;
}

.storeProgressMeta > span:first-child {
  color: var(--accent-bright);
  font-family: var(--pixel);
  flex: 0 0 auto;
}

.storeProgressMeta > span:last-child {
  overflow-wrap: anywhere;
}

/* --- labelled change rows --------------------------------------------- */

/* Replaces the old single ambiguous "Applying to X / Change" strip. Each row
   names what it changes, so the button can never be misread. */
.storeChangeRows {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 24px;
}

.storeChangeRow {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  background: var(--surface-2);
  margin: 0;
  padding: 12px 16px;
}

.storeChangeRow + .storeChangeRow {
  border-top: 1px solid var(--line);
}

.storeChangeRow > span {
  color: var(--faint);
  font-family: var(--pixel);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.82rem;
}

.storeChangeRow > strong {
  color: var(--text-bright);
  overflow-wrap: anywhere;
  font-size: 0.98rem;
}

.storeChangeRow .storeInlineBtn {
  justify-self: end;
  white-space: nowrap;
  text-align: right;
}

/* --- narrow screens --------------------------------------------------- */

@media (max-width: 719px) {
  /* Three labels with numbers get cramped long before the grid does, so the
     words are dropped and the numbered chips carry the state. */
  .storeStep {
    justify-content: center;
    padding: 10px 6px;
    font-size: 0.72rem;
  }

  .storeStep span {
    width: 20px;
    height: 20px;
    font-size: 0.72rem;
  }
}

@media (max-width: 519px) {
  .storeOtpRow {
    gap: 6px;
  }

  .storeOtp {
    min-height: 56px;
    border-radius: 12px;
  }

  .storeSummary > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  /* Three columns do not fit a phone, so the label sits on its own line and the
     button drops under the value where it cannot be mistaken for the row above. */
  .storeChangeRow {
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
  }

  .storeChangeRow > span {
    grid-column: 1 / -1;
  }

  .storeChangeRow > strong {
    grid-column: 1;
  }

  .storeChangeRow .storeInlineBtn {
    grid-column: 2;
  }
}