/* GoblinPay checkout + admin styles. One hand-written file, no build step,
   no JavaScript. Mobile-first (a 390px phone is the primary surface). */

:root {
  --bg: #14140f;
  --panel: #1e1e17;
  --ink: #f4f1e6;
  --dim: #a8a294;
  --accent: #e9c542;   /* Goblin yellow */
  --green: #57b894;
  --red: #d97070;
  --line: #33322a;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

main.admin { max-width: 60rem; }

/* Apple-Pay-style header: the white Goblin Pay lockup, centered with generous
   whitespace, is the only branding. No separate heading text (the lockup itself
   reads "Goblin Pay"), keeping the sheet clean and uncluttered. The lockup is
   the page's h1; its alt carries the heading for assistive tech. */
.brand { margin: 0.25rem 0 1.75rem; text-align: center; line-height: 0; }
.brandmark { height: 4rem; width: auto; display: inline-block; }

h1 { font-size: 1.5rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }

.amount {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0.25rem 0 1rem;
}

.status { font-weight: 600; margin: 0.5rem 0 1rem; }
.status.open { color: var(--dim); }
.status.paid, .status-confirmed, .status-replied { color: var(--green); }
.status.confirming { color: var(--accent); }
.status.expired { color: var(--red); }
.status-received { color: var(--accent); }

.qr {
  background: #fff;
  border-radius: var(--radius);
  padding: 0.75rem;
  width: 100%;
  max-width: 18rem;
  margin: 0 auto 1rem;
}
.qr svg { display: block; width: 100%; height: auto; }

/* "Open in Goblin" deep-link: the primary tap-to-pay affordance on the device
   that holds the wallet. Styled as the accent pill (matching the submit button)
   but centered under the QR. Harmless where the goblin: scheme has no handler. */
.open-wallet {
  display: block;
  width: fit-content;
  margin: 0 auto 0.75rem;
  background: var(--accent);
  color: #201d09;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  font-weight: 700;
  font-size: 1rem;
}
.open-wallet:hover { filter: brightness(1.05); }

.hint { color: var(--dim); font-size: 0.9rem; }
.memo { color: var(--ink); background: var(--panel); padding: 0.5rem 0.75rem; border-radius: 10px; }

label { display: block; font-size: 0.85rem; color: var(--dim); margin: 0.75rem 0 0.25rem; }

.copybox, textarea {
  width: 100%;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8rem;
  resize: vertical;
  word-break: break-all;
}

/* The invoice slatepack must be fully visible without scrolling, ENDSLATEPACK.
   included, and its length varies per invoice: auto-fit the box to its content
   where field-sizing is supported; elsewhere the rows attribute (sized to a
   measured real invoice at 390px) is the fallback. */
#invoice-slatepack { field-sizing: content; }

button {
  display: block;
  margin: 0.75rem auto 0;
  background: var(--accent);
  color: #201d09;
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
button:hover { filter: brightness(1.05); }

details.manual { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 0.75rem; }
details.manual summary { cursor: pointer; color: var(--accent); font-weight: 600; }
details.manual ol { color: var(--dim); font-size: 0.9rem; padding-left: 1.2rem; }

/* Each first-class way to pay (Goblin/Nostr, Slatepack/grin1). */
.pay-method { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 0.75rem; }
.pay-method:first-of-type { border-top: none; padding-top: 0; }
.pay-method ol { color: var(--dim); font-size: 0.9rem; padding-left: 1.2rem; }

/* Method chooser (server-driven, no JavaScript): each tab is an `<a>` link that
   sets `?method=<key>`; the server marks one active and renders only that panel.
   The selection survives the page's meta-refresh because the refresh URL carries
   the same `?method=`. Tabs wrap to a second row on narrow screens. The tab bar
   is rendered only when more than one method is available; a single method shows
   its panel with no tab chrome. */
.methods { margin-top: 1.25rem; }
.method-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.method-tab {
  flex: 1 1 auto; text-align: center; cursor: pointer; text-decoration: none;
  /* Equal-height tabs: a label that wraps to two lines keeps its neighbours the
     same height, with single-line labels vertically centered. */
  display: flex; align-items: center; justify-content: center;
  padding: 0.55rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--dim); font-size: 0.9rem; font-weight: 600; background: var(--panel);
}
.method-tab:hover { border-color: var(--dim); }
.method-tab.active {
  color: var(--bg); background: var(--accent); border-color: var(--accent);
}
.method-panel h3 { margin: 0 0 0.5rem; font-size: 1rem; }

a { color: var(--accent); }

.footer { margin-top: 2rem; color: var(--dim); font-size: 0.78rem; text-align: center; }

/* Admin tables */
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th, td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--line); }
th { color: var(--dim); font-weight: 600; }
.mono { font-family: ui-monospace, monospace; font-size: 0.75rem; color: var(--dim); word-break: break-all; }
.config ul { list-style: none; padding: 0; }
.config li { padding: 0.2rem 0; color: var(--dim); }
code { color: var(--ink); background: var(--panel); padding: 0.05rem 0.35rem; border-radius: 6px; }