/* FLOP Agent Chat (unofficial).
   Same system as the Technocore community board: tokens from https://flop.finance/design.md, one centred
   Space Mono stack, cyan underlined links and actions, underline-only inputs, radius 0, no shadows or fills. */
:root {
  color-scheme: dark;
  --base: #0A1128;          /* the ground */
  --ice-white: #F5F7FA;     /* body text */
  --accent: #00B4D8;        /* links, labels, actions */
  --accent-hover: #3DC5E0;  /* derived primary-hover */
  --text-2: #A1A7AE;        /* derived secondary text (7.7:1 on Base) */
  --hairline: #232A3E;      /* derived surface-light / border */
  --green: #32D74B;         /* positive / succeeded, always labelled */
  --red: #FF453A;           /* errors only, always labelled */
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--base);
  color: var(--ice-white);
  font: 400 14px/1.5 var(--mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
/* Addresses, hashes and JSON are long unbroken runs: wrap them instead of widening the page. */
p, pre, dd { overflow-wrap: anywhere; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
b { font-weight: 700; }

/* ---------------------------------------------------------------- devnet banner (every screen) */

.devnet {
  position: sticky; top: 0; z-index: 1;
  margin: 0; padding: 10px 16px;
  background: var(--base); border-bottom: 1px solid var(--accent);
  text-align: center; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
}
.devnet b { color: var(--accent); }

/* ---------------------------------------------------------------- hero stack (max 720) */

.hero {
  max-width: 720px; margin: 0 auto;
  padding: clamp(24px, min(6vw, 5svh), 56px) 16px 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.lockup { display: block; width: min(78vw, 400px); min-width: 250px; height: auto; }
.title { margin: clamp(8px, 2vw, 16px) 0 0; font-size: clamp(18px, 3vw, 22px); font-weight: 700; letter-spacing: 0.04em; }
.sub { margin: 8px 0 0; color: var(--text-2); font-size: 13px; }
.design { margin: clamp(24px, 4vw, 32px) auto 0; max-width: 60ch; font: 400 14px/1.6 var(--sans); color: var(--ice-white); }

/* ---------------------------------------------------------------- steps (max 720) */

main { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.step { margin-top: clamp(48px, 8vw, 80px); }
.label { margin: 0 0 12px; font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.fine { margin: 8px 0 0; color: var(--text-2); font-size: 12px; line-height: 1.6; }
.state { margin: 8px 0 0; font-size: 13px; }
.state .tag, .alert .tag { font-weight: 700; letter-spacing: 0.08em; margin-right: 8px; color: var(--accent); }
.tag.ok { color: var(--green); }
.tag.err { color: var(--red); }
.tag.dim { color: var(--text-2); }
.alert { margin: 12px 0 0; font-size: 13px; }

.field input, .field textarea {
  width: 100%; padding: 8px 0; margin: 0;
  background: transparent; color: var(--ice-white);
  border: 0; border-bottom: 1px solid var(--accent); border-radius: 0;
  font: 400 14px/1.5 var(--mono); resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-2); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent-hover); box-shadow: 0 1px 0 var(--accent-hover); }
.field textarea:disabled, .field input:disabled { border-bottom-color: var(--hairline); }

/* Actions read as links: no filled buttons. */
.actions { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.act {
  padding: 4px 0; background: none; border: 0; cursor: pointer;
  color: var(--accent); font: 700 14px/1.5 var(--mono); text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
.act:hover { color: var(--accent-hover); }
.act:disabled { color: var(--text-2); text-decoration: none; cursor: default; }

.wallet { margin-top: 12px; }
.wallet ul { list-style: none; margin: 8px 0 0; padding: 0; }
.wallet li { margin: 4px 0; }
.wallet li .act { font-weight: 400; overflow-wrap: anywhere; }
.wallet li .act.on { font-weight: 700; }

/* Raw JSON and challenge text: hairline box, no fill. */
pre {
  margin: 8px 0 0; padding: 12px; border: 1px solid var(--hairline); border-radius: 0;
  font: 400 12px/1.5 var(--mono); color: var(--ice-white); white-space: pre-wrap; max-height: 360px; overflow: auto;
}
.caption { margin: 12px 0 0; font-size: 12px; color: var(--text-2); }

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0 0; font-size: 13px; }
dl.kv dt { color: var(--text-2); }
dl.kv dd { margin: 0; }

/* ---------------------------------------------------------------- chat log */

.log { margin: 0 0 16px; }
.turn { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.turn:first-child { border-top: 1px solid var(--hairline); }
.who { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.turn.user .who { color: var(--accent); }
.text { margin: 0; font: 400 14px/1.6 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.turn details { margin-top: 12px; font-size: 12px; }
.turn summary { cursor: pointer; color: var(--accent); }

/* ---------------------------------------------------------------- footer */

.foot {
  max-width: 720px; margin: clamp(72px, 12vw, 128px) auto 0; padding: 0 16px 48px;
  text-align: center; color: var(--text-2); font-size: 12px; line-height: 1.6;
}
.foot p { margin: 8px 0; }

@media (max-width: 560px) {
  dl.kv { grid-template-columns: 1fr; gap: 2px; }
  dl.kv dd { margin-bottom: 8px; }
}