/* genesis — plain CSS, no framework, no build step. Base copied verbatim
   from defxn-dao/css/dao.css (card/button/form/modal rules, same shared
   <flux-authorization-dialog> element and "admin-auth-*" classes) so this
   mint-only page shares ONE visual foundation with the rest of the defxn
   family per the Dead Ark UI System law, not a separate hand-rolled
   palette. Tokens from themes.css (copied from defxn.com's own
   SDK-generated theme). DAO-specific rules (initiation steps, founder
   chips/roster) were dropped — this page has no DAO content. */
* { box-sizing: border-box; }
html, body { margin: 0; background: hsl(var(--canvas)); color: hsl(var(--text)); }
body { line-height: 1.55; font-family: var(--font-sans); }
a { color: hsl(var(--primary)); text-decoration: none; }
a:hover { text-decoration: underline; }
header.site {
  display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.1rem 1.5rem; border-bottom: 1px solid hsl(var(--border-subtle));
  position: sticky; top: 0; z-index: 5;
  background: hsl(var(--canvas) / 0.72);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
header.site .brand { font-weight: 700; font-size: 1.05rem; color: hsl(var(--text-strong)); letter-spacing: -0.01em; }
header.site .net {
  color: hsl(var(--text-faint)); font-size: 0.68rem; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
}
nav.tabs { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-left: auto; }
nav.tabs a {
  color: hsl(var(--text-muted)); font-size: 0.85rem; padding: 0.3rem 0;
  border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease;
}
nav.tabs a:hover { color: hsl(var(--text-strong)); text-decoration: none; }
nav.tabs a[aria-current="page"] { color: hsl(var(--text-strong)); border-bottom-color: hsl(var(--accent)); }
main { max-width: 880px; margin: 0 auto; padding: 1.5rem; }
section.card {
  background: hsl(var(--raised)); border: 1px solid hsl(var(--border-default)); border-radius: 14px;
  padding: 1.35rem 1.6rem; margin-bottom: 1.25rem;
  box-shadow: 0 1px 0 hsl(var(--text-strong) / 0.04) inset, 0 8px 24px hsl(0 0% 0% / 0.28);
}
section.card h2 { margin-top: 0; font-size: 1.05rem; color: hsl(var(--text-strong)); font-weight: 600; }
section.card p.lead { color: hsl(var(--text-muted)); margin-top: -0.4rem; font-size: 0.92rem; }
.kicker {
  display: block; font-family: var(--font-mono); font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--text-faint)); margin-bottom: 0.4rem;
}
.status-pill {
  display: inline-block; padding: 0.18rem 0.65rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  font-family: var(--font-mono);
}
.status-pill.ok { background: hsl(var(--trust) / 0.15); color: hsl(var(--trust)); }
.status-pill.pending { background: hsl(var(--warning) / 0.15); color: hsl(var(--warning)); }
.status-pill.error { background: hsl(var(--danger) / 0.15); color: hsl(var(--danger)); }
.status-pill.unknown { background: hsl(var(--text-muted) / 0.15); color: hsl(var(--text-muted)); }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0.75rem 0; }
dl.kv dt { color: hsl(var(--text-faint)); font-size: 0.82rem; }
dl.kv dd { margin: 0; font-family: var(--font-mono); font-size: 0.82rem; word-break: break-all; color: hsl(var(--text)); }
pre.raw {
  background: hsl(var(--overlay)); border: 1px solid hsl(var(--border-subtle)); border-radius: 8px;
  padding: 0.75rem; font-size: 0.76rem; overflow-x: auto; color: hsl(var(--text-muted)); font-family: var(--font-mono);
}
form.write-form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
form.write-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: hsl(var(--text-muted)); }
form.write-form input, form.write-form textarea {
  background: hsl(var(--overlay)); border: 1px solid hsl(var(--border-default)); border-radius: 8px; color: hsl(var(--text));
  padding: 0.5rem 0.6rem; font: inherit; font-family: var(--font-mono); font-size: 0.82rem;
}
form.write-form input:focus, form.write-form textarea:focus { outline: none; border-color: hsl(var(--primary) / 0.6); }
form.write-form textarea { min-height: 4.5rem; resize: vertical; }
/* Baseline for ANY button on this page, including ones injected by the
   shared Auth Kit widget (js/admin/auth.js) that carry no "action" class of
   their own -- without this they render as bare OS-default buttons, which
   reads as "the page has no CSS" even when everything else is styled. */
button, input[type="submit"], input[type="button"] {
  background: hsl(var(--overlay)); color: hsl(var(--text)); border: 1px solid hsl(var(--border-default));
  border-radius: 8px; padding: 0.5rem 1rem; font: inherit; font-size: 0.85rem; cursor: pointer;
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover { border-color: hsl(var(--primary) / 0.5); }
button.action {
  align-self: flex-start; background: hsl(var(--accent)); color: hsl(var(--text-inverse)); border: none;
  border-radius: 8px; padding: 0.55rem 1.1rem; font-weight: 600; font-size: 0.85rem; cursor: pointer;
  transition: opacity 0.15s ease;
}
button.action:hover { opacity: 0.88; }
button.action:disabled { opacity: 0.45; cursor: not-allowed; }
button.action.secondary { background: transparent; color: hsl(var(--text)); border: 1px solid hsl(var(--border-default)); }
.result-banner {
  margin-top: 0.75rem; padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.82rem;
  border: 1px solid hsl(var(--border-default)); white-space: pre-wrap; font-family: var(--font-mono);
}
.result-banner.ok { border-color: hsl(var(--trust) / 0.5); color: hsl(var(--trust)); }
.result-banner.error { border-color: hsl(var(--danger) / 0.5); color: hsl(var(--danger)); }
.identity-bar {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  font-size: 0.85rem; color: hsl(var(--text-muted));
}
.identity-bar strong { color: hsl(var(--text-strong)); }
#identityContainer { margin-top: 0.5rem; }
/* The real Auth Kit widget (js/admin/auth.js, reused verbatim -- same one
   defxn.com's CMS gate uses) dumps its own full identity state once signed
   in: a heading, a paragraph, and a dl of Identity/Auth Kit/Identity id/
   Wallet/Security. That duplicates #identityStatus above (already compact:
   "Signed in as X - key Y...") and is tall enough on its own to push the
   DAO content below the fold, reading as "nothing is there." defxn.com's
   own css/account.css hides the identical dump at `[data-stage="ready"]`
   the same way -- this is that same fix, not a new one. */
#identityContainer .ark-auth-panel[data-stage="ready"] [data-ark-auth="body"] > :is(h2, p, dl) { display: none; }
/* The widget's own heading ("Sign in to defxn DAO") duplicates the modal's
   own title above it (index.html's #identityDialogTitle) at every stage,
   not just "ready" -- the modal already supplies that context. */
#identityContainer [data-ark-auth="heading"] { display: none; }
.identity-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---- Sign-in modal (index.html's #identityDialog) --------------------
   Every sign-in on this site opens here -- never inline on the page --
   reusing the same .admin-auth-backdrop/.admin-auth-panel visual language
   as the scoped-authorization dialog so the two feel like one system, just
   narrower, since this holds a short choice + a file picker, not a
   manifest to review. */
#identityDialog .admin-auth-panel { width: min(460px, 100%); }
.identity-broker-option { width: 100%; justify-content: center; margin-top: 0.75rem; }
.identity-modal-divider {
  display: flex; align-items: center; gap: 0.75rem; margin: 1.1rem 0;
  color: hsl(var(--text-faint)); font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.identity-modal-divider::before, .identity-modal-divider::after { content: ''; flex: 1; height: 1px; background: hsl(var(--border-subtle)); }
footer.site { text-align: center; color: hsl(var(--text-faint)); font-size: 0.76rem; padding: 2rem 1rem; }

/* ---- Mint console ---------------------------------------------------- */
.mint-field-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.mint-field-row label { flex: 1; min-width: 160px; }
#mintBalance { font-family: var(--font-mono); color: hsl(var(--text-strong)); }
#mintWsUrl { font-family: var(--font-mono); color: hsl(var(--text-faint)); font-size: 0.78rem; }
#mintHint { color: hsl(var(--text-muted)); font-size: 0.82rem; margin: 0.4rem 0 0; }
ul.log-list {
  list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem;
  max-height: 16rem; overflow-y: auto; font-family: var(--font-mono); font-size: 0.78rem;
}
ul.log-list li { padding: 0.4rem 0.6rem; border-radius: 6px; background: hsl(var(--overlay)); color: hsl(var(--text-muted)); word-break: break-all; }
ul.log-list li.ok { color: hsl(var(--trust)); border: 1px solid hsl(var(--trust) / 0.3); }
ul.log-list li.err { color: hsl(var(--danger)); border: 1px solid hsl(var(--danger) / 0.3); }

/* ---- Scoped authorization dialog (js/ark/authorization-dialog.js) ---
   Copied verbatim from defxn.com's own css/admin.css .admin-auth-* rules
   (same shared <flux-authorization-dialog> element, same "admin-auth-*"
   class names) so every defxn property renders this one real confirm-and-
   sign dialog identically -- only var(--sans)/var(--mono) are retargeted to
   this file's own --font-sans/--font-mono tokens, nothing visual changed. */
flux-authorization-dialog { position: fixed; inset: 0; z-index: 50; }
.admin-auth-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: hsl(var(--canvas) / .84); backdrop-filter: blur(18px); }
.admin-auth-panel { width: min(720px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 28px; border: 1px solid hsl(var(--border-default)); border-radius: 18px; background: hsl(var(--overlay)); box-shadow: 0 30px 100px hsl(var(--canvas) / .75); color: hsl(var(--text)); }
.admin-auth-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.admin-auth-title h2 { margin: 7px 0 0; color: hsl(var(--text-strong)); font: 650 30px/1.05 var(--font-sans); letter-spacing: -.035em; }
.admin-auth-title .kicker { color: hsl(var(--accent)); font: 700 9px var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.admin-auth-close { width: 34px; height: 34px; border: 1px solid hsl(var(--border-subtle)); border-radius: 50%; background: hsl(var(--nested)); color: hsl(var(--text-strong)); font-size: 20px; }
.admin-auth-description { max-width: 62ch; color: hsl(var(--text-muted)); line-height: 1.55; }
.admin-auth-context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 22px 0; overflow: hidden; border: 1px solid hsl(var(--border-subtle)); border-radius: 12px; background: hsl(var(--border-subtle)); }
.admin-auth-context > div { min-width: 0; padding: 12px; background: hsl(var(--surface)); }
.admin-auth-context dt, .admin-auth-digest small { display: block; margin-bottom: 5px; color: hsl(var(--text-faint)); font: 700 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.admin-auth-context dd { margin: 0; overflow-wrap: anywhere; color: hsl(var(--text-strong)); font: 600 11px/1.45 var(--font-mono); }
.admin-auth-digest { padding: 14px; border-left: 2px solid hsl(var(--trust)); border-radius: 5px; background: hsl(var(--nested)); }
.admin-auth-digest code { display: block; overflow-wrap: anywhere; color: hsl(var(--text-strong)); font: 11px/1.5 var(--font-mono); }
.admin-auth-panel details { margin-top: 12px; padding: 12px; border: 1px solid hsl(var(--border-subtle)); border-radius: 9px; }
.admin-auth-panel summary { cursor: pointer; color: hsl(var(--text-muted)); font: 700 10px var(--font-mono); text-transform: uppercase; }
.admin-auth-panel pre { max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: hsl(var(--text-muted)); font: 10px/1.5 var(--font-mono); }
.admin-auth-safety { color: hsl(var(--text-faint)); font-size: 11px; line-height: 1.5; }
.admin-auth-panel > footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
@media (max-width: 620px) { .admin-auth-backdrop { padding: 0; } .admin-auth-panel { height: 100vh; max-height: none; border-radius: 0; } .admin-auth-context { grid-template-columns: 1fr; } }

/* ---- Create new identity (js/identity-panel.js's renderCreatePanel) ---- */
.identity-create-toggle { margin-top: 0.9rem; font-size: 0.82rem; color: hsl(var(--text-faint)); }
.link-button { background: none; border: none; padding: 0; color: hsl(var(--primary)); font: inherit; font-size: inherit; cursor: pointer; text-decoration: underline; }
.link-button:hover { color: hsl(var(--accent)); }
#identityCreatePanel { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid hsl(var(--border-subtle)); }
.auth-word-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; list-style: none; margin: 0.9rem 0; padding: 0.9rem; border: 1px solid hsl(var(--border-default)); border-radius: 10px; background: hsl(var(--overlay)); }
.auth-word-grid li { display: flex; align-items: baseline; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.8rem; }
.auth-word-grid li small { color: hsl(var(--text-faint)); min-width: 1.4em; }
.auth-word-grid li strong { color: hsl(var(--text-strong)); }
@media (max-width: 620px) { .auth-word-grid { grid-template-columns: repeat(2, 1fr); } }