/* treasury — plain CSS, no framework, no build step. Base copied from
   genesis/css/genesis.css, itself copied from defxn-dao/css/dao.css
   (card/button/form/modal rules, the same shared <flux-authorization-dialog>
   element and "admin-auth-*" classes), so this explorer 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
   verbatim from defxn-dao, itself from defxn.com's SDK-generated theme).
   genesis's mint-console rules were swapped for the directory table, spend
   parameter form and claim table below; everything else is unchanged. */
* { 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);
}
.write-form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.write-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: hsl(var(--text-muted)); }
.write-form input, .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;
}
.write-form input:focus, .write-form textarea:focus { outline: none; border-color: hsl(var(--primary) / 0.6); }
.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; }

/* ---- Treasury pages -------------------------------------------------- */
header.site a.brand:hover { text-decoration: none; }
main { max-width: 960px; }
.hint { color: hsl(var(--text-muted)); font-size: 0.82rem; margin: 0.5rem 0 0; }
.muted { color: hsl(var(--text-faint)); font-size: 0.82rem; }
.back { margin: 0.75rem 0 0; font-size: 0.85rem; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.toolbar .hint { margin: 0; }
.row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 0.75rem; }
.row button.action { align-self: auto; }
.field-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.field-row label { flex: 1; min-width: 220px; }
.field-row label.narrow { flex: 0 1 12rem; min-width: 140px; }
/* An honest-gap note: what the wire cannot tell this page, and what the
   person has to supply instead. Drift/honey border = "needs your review",
   per the theme anatomy, not an error. */
.gap-note {
  margin: 0; padding: 0.5rem 0.7rem; border-left: 2px solid hsl(var(--warning) / 0.6); border-radius: 4px;
  background: hsl(var(--warning) / 0.06); color: hsl(var(--text-muted)); font-size: 0.78rem; line-height: 1.5;
}
.derived { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid hsl(var(--border-subtle)); }
.derived details, section.card details { margin-top: 0.5rem; }
section.card summary { cursor: pointer; color: hsl(var(--text-muted)); font: 600 0.7rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
pre.raw { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 14rem; }
.vote-status { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.88rem; color: hsl(var(--text)); }
.vote-status .status-pill { align-self: flex-start; }
.table-host { margin-top: 0.75rem; overflow-x: auto; }
table.dir-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.dir-table th {
  text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid hsl(var(--border-default));
  color: hsl(var(--text-faint)); font: 600 0.65rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
table.dir-table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid hsl(var(--border-subtle)); vertical-align: middle; }
table.dir-table tr:last-child td { border-bottom: none; }
table.dir-table tr.is-me td { background: hsl(var(--trust) / 0.06); }
table.dir-table code { font-family: var(--font-mono); font-size: 0.78rem; color: hsl(var(--text)); }
table.dir-table td a { font-family: var(--font-mono); font-weight: 600; }
table.dir-table td .status-pill { margin-left: 0.4rem; }
.amount { font-family: var(--font-mono); color: hsl(var(--text-strong)); white-space: nowrap; }
ul.signer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
ul.signer-list .status-pill { margin-left: 0.4rem; }
.identity-broker-note { color: hsl(var(--text-faint)); font-size: 0.76rem; margin: 0.5rem 0 0; }
@media (max-width: 620px) {
  main { padding: 1rem; }
  section.card { padding: 1.1rem 1rem; }
  table.dir-table thead { display: none; }
  table.dir-table, table.dir-table tbody, table.dir-table tr, table.dir-table td { display: block; width: 100%; }
  table.dir-table tr { padding: 0.5rem 0; border-bottom: 1px solid hsl(var(--border-subtle)); }
  table.dir-table td { border: none; padding: 0.2rem 0; }
  table.dir-table td::before { content: attr(data-label); display: block; color: hsl(var(--text-faint)); font: 600 0.6rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
}
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:empty::before { content: "Nothing sent yet."; color: hsl(var(--text-faint)); }
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); } }