/* ==========================================================================
   The account pages: sign in, create account, and the account itself
   ==========================================================================
   Built on zp.css: fields are .zp-field / .zp-input, buttons .zp-btn, the
   Login / Register switch is a .zp-tabs strip. This sheet only lays the cards
   out and styles what exists here alone: the four-step guide, the link code
   box, the linked player and the form notes.
   ========================================================================== */

/* The head sits inside main, which is already the shell: do not inset it a second time. */
body > main > .page-hero { width: 100%; }
body > main > .page-hero + * { margin-top: var(--s-6); }

.acct-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
.acct-wrap[hidden] { display: none; }
@media (min-width: 900px) {
  .acct-wrap { grid-template-columns: minmax(0, 560px) minmax(0, 380px); gap: var(--s-6); }
  .acct-wrap-single { grid-template-columns: minmax(0, 680px); }
}
.acct-wrap-single { gap: var(--s-4); }

/* ---------- cards: the panel surface ---------- */
.acct-card {
  min-width: 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--lip), var(--raise);
}
.acct-card h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 var(--s-4);
  font-size: var(--mc-s1); letter-spacing: 0; line-height: 1.1;
}
.acct-card h2::before { content: ""; width: 3px; height: 16px; background: var(--accent); flex: none; }
.acct-card p { color: var(--text-2); font-size: var(--fs-sm); margin: 0 0 var(--s-4); }
@media (max-width: 480px) { .acct-card { padding: var(--s-4); } }

/* ---------- Login / Register: a .zp-tabs strip across the top of the card ---------- */
.acct-card > .acct-tabs { margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-5); padding: 0 var(--s-3); background: var(--surface-2); border-radius: var(--r-3) var(--r-3) 0 0; }
@media (max-width: 480px) { .acct-card > .acct-tabs { margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) var(--s-4); } }
.acct-tabs .zp-tab[aria-selected="true"] { background: var(--surface); }

/* ---------- forms ---------- */
.acct-form { display: grid; gap: var(--s-4); }
/* display: grid above outranks the browser's own [hidden] rule; without this both forms show at once. */
.acct-form[hidden] { display: none; }
.acct-form .zp-field > span .opt { margin-left: 6px; font-style: normal; color: var(--text-3); opacity: 0.75; }
.acct-form .zp-field > span { color: var(--text-2); }
.acct-form .zp-field:focus-within > span { color: var(--accent); }
.acct-form small { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.45; }
.acct-form .zp-btn { justify-self: start; }
.acct-form .zp-btn[disabled] { cursor: wait; }
@media (max-width: 480px) { .acct-form .zp-btn[type="submit"] { justify-self: stretch; } }

.acct-error, .acct-ok {
  margin: 0; padding: 9px 12px;
  border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--r-2);
  font-size: var(--fs-sm); line-height: 1.45;
}
.acct-card p.acct-error { margin: 0; color: var(--loss); background: var(--loss-wash); border-color: rgba(242, 86, 107, 0.35); border-left-color: var(--loss); }
.acct-card p.acct-ok { margin: 0; color: var(--win); background: var(--win-wash); border-color: rgba(63, 212, 138, 0.35); border-left-color: var(--win); }
.acct-card p.acct-fine, .acct-fine { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-3); }
.acct-fine a { color: var(--accent); }
.acct-fine a:hover { color: var(--accent-hi); }
.acct-card .acct-fine + .zp-btn, .acct-card p + .zp-btn { margin-top: var(--s-4); }

/* ---------- the guide above the register form: four numbered steps ---------- */
.acct-guide {
  list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid;
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-sunk); overflow: hidden;
}
.ag-step {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 10px 12px; border-top: 1px solid var(--line);
}
.ag-step:first-child { border-top: 0; }
.ag-n {
  font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 800; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums; padding-top: 1px;
}
.ag-step b { display: block; font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 700; letter-spacing: 0; text-transform: uppercase; line-height: 1.15; color: var(--text); }
.ag-step div > span { display: block; margin-top: 3px; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-2); }
.ag-step .zp-cmd { white-space: normal; }

/* ---------- the aside ---------- */
.acct-aside {
  min-width: 0; padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-band);
}
.acct-aside h2 { margin: 0 0 var(--s-4); font-size: var(--px-2); text-transform: none; }
.acct-aside ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); counter-reset: aa; }
.acct-aside li {
  counter-increment: aa; position: relative; padding-left: 34px;
  font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2);
}
.acct-aside li::before { content: counter(aa, decimal-leading-zero); position: absolute; left: 0; top: 2px; font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 500; line-height: 1.6; color: var(--accent); }
.acct-aside b { color: var(--text); }
@media (max-width: 480px) { .acct-aside { padding: var(--s-4); } }

/* ---------- the linked player ---------- */
.acct-player { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; margin-bottom: var(--s-4); }
.acct-player img { width: 48px; height: 48px; border-radius: var(--r-2); background: var(--surface-3); image-rendering: pixelated; }
.acct-player div { min-width: 0; }
.acct-player b { display: block; font-family: var(--f-display); font-size: var(--mc-s2); font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-player span { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-3); }
.acct-player .zp-btn { margin-bottom: 3px; }
@media (max-width: 480px) { .acct-player { grid-template-columns: auto minmax(0, 1fr); } .acct-player .zp-btn { grid-column: 1 / -1; justify-self: start; } }

/* ---------- the link code ---------- */
.acct-code {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "cmd copy";
  gap: 6px var(--s-3); align-items: center;
  padding: 12px 14px; margin: 0 0 var(--s-3);
  background: var(--surface-sunk); border: 1px solid var(--accent-line); border-left: 3px solid var(--accent);
  border-radius: var(--r-2); box-shadow: var(--well);
}
.acct-code-label { grid-area: label; font-family: var(--f-mono); font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; color: var(--accent); }
.acct-code code {
  grid-area: cmd; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 500; letter-spacing: 0; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.acct-code .zp-btn { grid-area: copy; margin-bottom: 3px; }
#codeBox p { margin: 0 0 6px; }
#codeBox + .zp-btn { margin-top: var(--s-2); }

/* ==========================================================================
   Minecraft look (2026-10-19)
   account.css loads before zp.css and mc.css, so every rule here starts at body[data-page].
   The sign-in card is a grey game window: Login and Register as two buttons across the top
   (the open one lavender), labels in GUI grey, the game's black text fields, the submit button
   full width. Errors and notes sit in dark wells. The aside and the account cards are the dark
   GUI; the link code is a chat line.
   ========================================================================== */
body[data-page] .acct-card {
  padding: 10px 12px 14px; border: 8px solid transparent; border-radius: 0; background: none; box-shadow: none;
  border-image: var(--mc-gui) 4 fill / 8px / 0 stretch;
  color: var(--mc-gui-ink); text-shadow: var(--mc-shadow);
}
body[data-page] .acct-card h2 { margin: 0 0 12px; font-size: var(--mc-s1); line-height: 1.2; color: var(--mc-gui-ink); text-shadow: var(--mc-shadow); }
body[data-page] .acct-card h2::before { width: 10px; height: 10px; background: var(--accent); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.35), inset 2px 2px 0 rgba(255, 255, 255, 0.4); }
body[data-page] .acct-card p { font-size: var(--mc-s1); color: var(--mc-gui-ink); }
body[data-page] .acct-card a:not(.zp-btn) { color: #cdbbff; }
body[data-page] .acct-card a:not(.zp-btn):hover { color: #000; }

/* Login / Register: two buttons across the top of the window */
body[data-page] .acct-card > .acct-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 14px; padding: 0; background: none; border-radius: 0;
}
body[data-page] .acct-tabs .zp-tab { justify-content: center; min-height: 40px; }
body[data-page] .acct-tabs .zp-tab[aria-selected="true"] { background: none; }

/* fields: GUI grey labels over the black text field */
body[data-page] .acct-form { gap: 14px; }
body[data-page] .acct-form .zp-field { gap: 4px; }
body[data-page] .acct-form .zp-field > span { font-family: var(--mc-font); font-size: var(--mc-s1); color: var(--mc-gui-ink); text-shadow: var(--mc-shadow); }
body[data-page] .acct-form .zp-field:focus-within > span { color: #000; }
body[data-page] .acct-form .zp-field > span .opt { color: var(--mc-gui-ink-2); opacity: 1; }
body[data-page] .acct-form .zp-field input { height: 44px; padding: 0 10px; }
body[data-page] .acct-form small { font-size: var(--mc-s1); line-height: 1.45; color: var(--mc-gui-ink-2); text-shadow: var(--mc-shadow); }
body[data-page] .acct-form .zp-btn { justify-self: start; }
body[data-page] .acct-form .zp-btn[type="submit"] { justify-self: stretch; }
body[data-page] .acct-card p.acct-fine, body[data-page] .acct-fine { font-size: var(--mc-s1); line-height: 1.5; color: var(--mc-gui-ink-2); }

/* errors and confirmations: a line in a dark well, in the chat colour */
body[data-page] .acct-card p.acct-error, body[data-page] .acct-card p.acct-ok {
  padding: 8px 12px; border: 2px solid transparent; border-radius: 0; background: none;
  border-image: var(--mc-well) 1 fill / 2px / 0 stretch; font-size: var(--mc-s1); text-shadow: var(--mc-shadow);
}
body[data-page] .acct-card p.acct-error { color: var(--mc-red); }
body[data-page] .acct-card p.acct-ok { color: var(--mc-green); }

/* the four steps above the register form, in a dark well */
body[data-page] .acct-guide {
  border: 2px solid transparent; border-radius: 0; background: none; border-image: var(--mc-well) 1 fill / 2px / 0 stretch;
  color: var(--text); text-shadow: var(--mc-shadow);
}
body[data-page] .ag-step { border-top: 0; padding: 8px 12px; }
body[data-page] .ag-step:nth-child(even) { background: rgba(255, 255, 255, 0.035); }
body[data-page] .ag-n { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); line-height: 1.3; color: var(--accent); }
body[data-page] .ag-step b { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); line-height: 1.3; color: #fff; }
body[data-page] .ag-step div > span { font-size: var(--mc-s1); color: var(--text-2); }

/* the aside: the dark GUI */
body[data-page] .acct-aside { padding: 12px 14px; border: 8px solid transparent; border-radius: 0; background: none; border-image: var(--mc-gui-dark) 4 fill / 8px / 0 stretch; }
body[data-page] .acct-aside h2 { font-size: var(--mc-s2); line-height: 1.2; }
body[data-page] .acct-aside li { font-size: var(--mc-s1); }
body[data-page] .acct-aside li::before { font-family: var(--mc-font); font-size: var(--mc-s1); font-weight: 400; line-height: 1.55; top: 0; }
body[data-page] .acct-aside b { font-weight: 400; }

/* the linked player: the head in a slot */
body[data-page] .acct-player img { width: 52px; height: 52px; padding: 2px; border-radius: 0; background: none; border: 2px solid transparent; border-image: var(--mc-slot) 1 fill / 2px / 0 stretch; box-sizing: content-box; }
body[data-page] .acct-player b { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s2); color: var(--mc-gui-ink); }
body[data-page] .acct-player span { font-family: var(--mc-font); font-size: var(--mc-s1); color: var(--mc-gui-ink-2); }

/* the link code: a chat line to copy */
body[data-page] .acct-code { padding: 8px 10px; border: 0; border-radius: 0; background: #000; box-shadow: 0 0 0 2px #a0a0a0; }
body[data-page] .acct-code-label { font-family: var(--mc-font); font-size: var(--mc-s1); color: var(--mc-gray); text-shadow: var(--mc-shadow); }
body[data-page] .acct-code code { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); color: var(--mc-yellow); text-shadow: var(--mc-shadow); }

@media (max-width: 480px) {
  body[data-page] .acct-card { padding: 8px 8px 12px; }
  body[data-page] .acct-aside { padding: 10px; }
}