/* What agama.css does not have, because Agama has no chip.
 *
 * The page is theirs: /agama.css is app.agama.finance's own compiled
 * stylesheet, and every class in index.html is one it already ships. This
 * file adds only what Vela shows and Agama does not — the mandate figures,
 * the agent columns, the DeFi scenarios — in their vocabulary.
 *
 * Three colours are load-bearing and mean one thing each:
 *     --chip   the Secure Element refused
 *     --host   a host refused, or an agent flagged an instruction
 *     --ok     it happened
 * Mono means a machine produced the words. Nothing else is coloured.
 */
:root {
  --fg:       #254839;
  --fg-muted: #48685a;
  --fg-faint: #7d9689;
  --line:  rgba(37, 72, 57, .10);
  --line2: rgba(37, 72, 57, .18);
  --tint:  rgba(37, 72, 57, .04);

  --chip: #9b2c2c;
  --host: #a85a2c;
  --ok:   #1f6f4a;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Agama loads Inter through next/font. We serve it, because
   test/console_test.py asserts this page contacts no origin but itself. */
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
}
body { font-family: "Inter", system-ui, -apple-system, sans-serif; font-feature-settings: 'ss01','cv11'; }

code, .mono { font-family: var(--mono); }

/* [hidden] loses to any class that sets display, and this page has three of
   them — the replay banner, the connect button, the empty-state line. It has
   caught us three times: a "recorded run" notice on a live page, and a
   Connect button offered while the device was already connected. One rule
   rather than one fix per element. */
[hidden] { display: none !important; }
a { text-decoration: none; }
.vela-mark-ghost { opacity: .07; }

.dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.45); flex: 0 0 auto; }
.dot.on { background: #6ee7b7; } .dot.off { background: #fca5a5; }

/* ------------------------------------------------------------ envelope --- */
.meter { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; display: flex; }
.meter .spent { background: var(--fg); }
.meter .held  { background: var(--host); }

ul.bound {
  list-style: none; margin: 0; padding: 11px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  font-size: 13px; color: var(--fg);
}
ul.bound li { padding: 2px 0; }
ul.bound li + li { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 7px; }
ul.bound li.none { color: var(--fg-faint); }
ul.bound li > em, ul.bound li > i, ul.bound li > span { margin-left: 9px; }
ul.bound em, ul.bound i { font-style: normal; font-size: 12px; color: var(--fg-muted); }
ul.bound .mono, ul.bound code { font-family: var(--mono); font-size: 12px; }

/* btn-primary, from their globals.css, as a class our JS can reach. */
.act {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #2e5944 0%, #1f3d31 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 30px rgba(20,50,35,.22);
  color: #fdf8ed; font: 500 13.5px/1 inherit; font-family: inherit;
  cursor: pointer; transition: filter .15s ease;
}
.act:hover:not(:disabled) { filter: brightness(1.10); }
.act:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.act.danger {
  background: #fff; color: var(--chip);
  box-shadow: inset 0 0 0 1px rgba(155,44,44,.28);
}
.act.danger:hover:not(:disabled) { filter: none; background: #fff6f5; }
.price { font-family: var(--mono); font-size: 11.5px; opacity: .7; margin-left: 9px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* --------------------------------------------------------------- fleet --- */
.fleet-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.agent {
  padding: 16px 18px; background: var(--tint);
  border: 1px solid var(--line); border-radius: 12px;
  transition: background-color .15s ease;
}
.agent:hover { background: rgba(37,72,57,.07); }
.agent .row { display: flex; align-items: baseline; gap: 9px; }
.agent .name { font-size: 14px; font-weight: 600; color: var(--fg); }
.agent .slot { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); margin-left: auto; }
.agent .amount { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 10px 0 2px; font-variant-numeric: tabular-nums; }
.agent .amount > span { font-size: 12px; font-weight: 500; color: var(--fg-muted); margin-left: 6px; }
.agent .of { font-size: 12px; color: var(--fg-muted); }
.agent .meter { margin: 12px 0; }
.agent .grants, .agent .meta { display: flex; flex-wrap: wrap; gap: 5px; }
.grant {
  font-family: var(--mono); font-size: 10.5px;
  background: rgba(37,72,57,.06); border-radius: 999px;
  padding: 3px 9px; color: var(--fg-muted);
}
.agent.free { opacity: .42; }
.agent .who { font-size: 12px; color: var(--fg-muted); }

/* --------------------------------------------------------------- minds --- */
.minds { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }
.mind { padding: 16px 18px; background: var(--tint); border: 1px solid var(--line); border-radius: 12px; }
.mind > header { display: flex; align-items: baseline; gap: 9px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.mind .who { font-weight: 600; font-size: 14px; }
.mind .meta { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--fg-faint); }
.mind .steps { list-style: none; margin: 0; padding: 0; counter-reset: step; max-height: 380px; overflow-y: auto; scrollbar-width: thin; }
.mind .steps > li { position: relative; padding: 10px 0 10px 24px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-muted); }
.mind .steps > li:first-child { border-top: 0; }
.mind .steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 11px;
  font-family: var(--mono); font-size: 10px; color: var(--fg-faint);
}
.mind .call { font-family: var(--mono); font-size: 12px; color: var(--fg); }
.mind .thought { display: block; margin-top: 4px; color: var(--fg-faint); font-size: 12px; }
.mind .out { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11.5px; }
.mind .out.refused { color: var(--chip); }
.mind .out.error   { color: var(--host); }
.mind .out.bought  { color: var(--ok); }
.mind .out.flagged { color: var(--host); font-family: inherit; font-style: italic; }
.mind .verdict { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-muted); }
.mind.live { border-color: var(--line2); box-shadow: inset 3px 0 0 var(--ok); }
.empty, .none { color: var(--fg-faint); font-size: 13px; }

/* ------------------------------------------------------------ scenario --- */
.pair { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.scenario {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  width: 100%; text-align: left; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  font-family: inherit; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.scenario:hover:not(:disabled) { border-color: var(--line2); background: var(--tint); }
.scenario:disabled { opacity: .5; cursor: not-allowed; }
.scenario b { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.scenario em { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--fg-faint); }
.badge {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  border-radius: 999px; padding: 3px 9px;
  color: var(--ok); background: rgba(31,111,74,.09);
}
.badge.bad { color: var(--chip); background: rgba(155,44,44,.09); }
.onefield { font-size: 13px; color: var(--fg-muted); }
.onefield b { color: var(--fg); }

/* ----------------------------------------------------------------- log --- */
ol.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
ol.log > li {
  background: var(--tint); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; font-family: var(--mono); font-size: 12px; color: var(--fg-muted);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
}
ol.log > li.none { font-family: inherit; }

.banner {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;
  background: rgba(168,90,44,.08); border: 1px solid rgba(168,90,44,.24);
  border-radius: 12px; padding: 12px 15px; font-size: 13px; color: var(--fg);
}
.banner b { color: var(--host); }

.hint.chip, .chip { color: var(--chip); }
.hint.host, .host { color: var(--host); }
.hint.ok, .ok { color: var(--ok); }

@media (max-width: 900px) { .pair { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* -------------------------------------------------------- device panel ---
 * Anchored under the pill, in the frame rather than on the sheet, so it
 * reads as chrome: it is about the hardware, not about the numbers.
 */
.device-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  z-index: 60; width: 320px; max-width: calc(100vw - 32px);
  text-align: left;
}
.device-fix-code {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 12px; color: var(--fg);
  background: rgba(37,72,57,.06); border-radius: 8px; padding: 8px 10px;
  word-break: break-word;
}
.inv {
  margin: 0; padding: 11px 13px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  display: grid; grid-template-columns: auto 1fr; gap: 5px 16px;
  align-items: baseline; font-family: var(--mono); font-size: 12px;
}
.inv:empty { display: none; }
.inv dt { color: var(--fg-faint); }
.inv dd { margin: 0; color: var(--fg); }

/* The pill carries the state before the panel is ever opened. */
#device { border: 0; font-family: inherit; }
#device[data-state="ready"] { }

/* --------------------------------------------------------- operations ---
 * Each tile is one thing a person would otherwise type in a terminal, with
 * what it costs said before the button rather than after: a tap, a public
 * URL, real HBAR.
 */
.ops-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.op {
  padding: 16px 18px; background: var(--tint);
  border: 1px solid var(--line); border-radius: 12px;
  display: flex; flex-direction: column;
}
.op-note { margin: 6px 0 0; font-size: 12.5px; color: var(--fg-muted); flex: 1; }
.op-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.op-fields input {
  min-width: 0; flex: 1 1 70px;
  font-family: var(--mono); font-size: 12.5px;
  background: #fff; color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
}
.op-fields input:focus { outline: 0; border-color: rgba(37,72,57,.45); }
.op .act { align-self: flex-start; }
.op .act + .act { margin-left: 6px; }

.op-out {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px;
  max-height: 320px; overflow: auto;
}
.op-out pre {
  margin: 0; font-family: var(--mono); font-size: 12px;
  line-height: 1.6; color: var(--fg-muted);
  white-space: pre-wrap; word-break: break-word;
}
/* The device asking for a finger is the one line that must not be skimmed. */
.op-out pre b { color: var(--fg); font-weight: 600; }

/* ------------------------------------------------------------- devbar ----
 * What the Flex is asking for, at the top of the page.
 *
 * The console could already make the device put a screen up — Grant, Revoke —
 * and the only sign of it was a line in a subprocess transcript four cards
 * down. Someone who had just pressed a button had no reason to look at the
 * device in their hand, and the 180-second approval window ran out in silence.
 *
 * Amber while the device is waiting on a person, green for the moment after
 * it decides. Both are the palette's existing meanings: amber is the host
 * asking, green is that it happened.
 */
.devbar-wrap {
  position: sticky; top: 0; z-index: 30;
  padding: 14px 24px 0;
  /* The panel scrolls under it, so it needs its own backdrop or the text of
     whatever is passing behind shows through the gap on either side. */
  background: linear-gradient(#fdf8ed 78%, rgba(253, 248, 237, 0));
  padding-bottom: 14px;
}
@media (min-width: 768px) { .devbar-wrap { padding-left: 96px; padding-right: 96px; } }

.devbar {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px;
  border-radius: 12px; font-size: 14px; font-weight: 500;
  background: #fdf4e8; border: 1px solid rgba(168, 90, 44, .32); color: var(--host);
  box-shadow: 0 6px 20px rgba(37, 72, 57, .10);
}
.devbar b { color: #7d3f18; font-weight: 600; }
.devbar.done {
  background: #eef6f1; border-color: rgba(31, 111, 74, .28); color: var(--ok);
}
.devbar.done b { color: #14512f; }

.devbar-spin {
  flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(168, 90, 44, .25); border-top-color: var(--host);
  animation: devbar-spin .8s linear infinite;
}
.devbar.done .devbar-spin { display: none; }
@keyframes devbar-spin { to { transform: rotate(360deg); } }
/* The bar is the point, not the spinning. */
@media (prefers-reduced-motion: reduce) { .devbar-spin { animation: none; } }

/* The bytes the chip signed, under the event that produced them. */
.signed {
  margin-top: 7px; padding: 8px 10px; border-radius: 9px;
  background: var(--tint); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--fg-muted);
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px;
  overflow-wrap: anywhere;
}
.signed dt { color: var(--fg-faint); }
.signed dd { margin: 0; color: var(--fg); }

/* Who decided, then what they decided.
 *
 * event() has been building a div.head with a span.who inside it since the
 * first version of this page, and neither class had a rule anywhere — so two
 * spans sat flush against each other and the log read "chipsigned 0.01 HBAR".
 * The same welding as "0.48HBARavailable", from the same cause: styling a
 * class the DOM does not have while the one it does have goes unstyled.
 */
ol.log .head { display: flex; flex-wrap: wrap; gap: 9px; align-items: baseline; }
ol.log .head .who {
  flex: 0 0 auto; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line2); font-size: 11px; color: var(--fg-faint);
}
ol.log > li > .detail { flex: 1 1 auto; color: var(--fg-faint); }
/* The chip's own statement gets a row to itself rather than being squeezed
   beside the sentence that introduced it. */
ol.log > li > .signed { flex: 1 0 100%; }

/* --------------------------------------------------------------- flow ----
 * The argument, as three things you can press.
 *
 * This page grew to fifteen buttons — every one of them real, none of them
 * explained, and named after what was being bought rather than what pressing
 * it would prove. A reader meeting that reads none of them. So the three acts
 * are the spine, and everything else is behind a disclosure at the bottom.
 */
ol.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
ol.flow > li {
  display: grid; grid-template-columns: 44px 1fr; gap: 18px;
  padding: 22px 0; border-top: 1px solid var(--line);
}
ol.flow > li:first-child { border-top: 0; padding-top: 6px; }

.flow-n {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tint); border: 1px solid var(--line2);
  font-family: var(--mono); font-size: 14px; color: var(--fg-muted);
}
.flow-body h3 { margin: 4px 0 0; font-size: 19px; font-weight: 600; color: var(--fg); }
.flow-body > p {
  margin: 7px 0 0; max-width: 62ch; font-size: 14px; line-height: 1.55;
  color: var(--fg-muted);
}
.flow-body > p b { color: var(--fg); font-weight: 600; }
.flow-body .op-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.flow-body .op-fields label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--fg-faint);
}
.flow-body .op-fields input { width: 92px; }
/* Which agent step 2 is about, beside the heading rather than trailing off
   the end of the sentence under it. */
.flow-body h3 #try-as {
  margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--fg-faint);
}

@media (max-width: 640px) {
  ol.flow > li { grid-template-columns: 1fr; gap: 10px; }
}

/* The rest of the console, folded away until someone wants it. */
#more-toggle {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  width: 100%; cursor: pointer; background: none; border: 0; padding: 0;
  text-align: left; font: inherit; color: inherit;
}
.more-state { margin-left: auto; font-size: 13px; color: var(--fg-faint); }

/* What an agent is for, and which one the buttons above are acting as.
 *
 * The fleet listed five labels and a number each. Nothing on the page said
 * what "research-1" does, why one would pick it over "watcher", or what
 * picking one changed — so the answer to "which agent should I select?" was
 * a guess, including for the person who built it.
 */
.agent .does {
  margin: 7px 0 2px; font-size: 13px; line-height: 1.5; color: var(--fg-muted);
}
.agent .picked {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ok);
}
.agent:not(.free) { cursor: pointer; }

/* A model asking for the same refused thing again. Real behaviour, and one
   agent did it nine times — printed nine times it reads as a broken console
   rather than a looping agent. */
.mind .again {
  display: block; margin-top: 4px; font-size: 11px; color: var(--host);
}

/* ---------------------------------------------------------------- hire ----
 * Choosing what to put on the device.
 *
 * Step 1 was a text field containing "remote-1" and two unlabelled numbers,
 * which asks a reader to already know which agents exist, what they are for,
 * and what a sensible budget looks like. Cards say all three.
 */
.hire { display: grid; gap: 11px; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); }
.hire-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 15px; border-radius: 13px;
  border: 1px solid var(--line2); background: #fdfaf1; color: inherit;
  font: inherit; transition: border-color .12s, background .12s;
}
.hire-card:hover { border-color: rgba(37,72,57,.34); }
.hire-card.on { border-color: var(--fg); background: rgba(37,72,57,.05); }
.hire-card[disabled] { opacity: .5; cursor: default; }

.hire-role { font-size: 15px; font-weight: 600; color: var(--fg); }
.hire-does { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--fg-muted); }
.hire-terms { margin-top: 10px; font-size: 12px; color: var(--fg); }
.hire-as {
  margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--fg-faint);
}

/* Where an agent runs. The whole argument is that it is somewhere you do not
   control, so the page should say where rather than leave it implied. */
.hire-where {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.45; color: var(--fg-muted);
}
.agent .does .runs { color: var(--fg-faint); }

/* A run, in one line, with the transcript behind it.
 *
 * Three full transcripts filled the page and a reader got none of them. This
 * stays open while the run is live — watching it happen is the point — and
 * folds into its summary when the run ends, unless somebody opens it.
 */
.mind .sum {
  display: block; width: 100%; text-align: left; cursor: pointer;
  margin-top: 9px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 13px; color: var(--fg-muted);
}
.mind .sum::after {
  content: " — show"; color: var(--fg-faint); font-size: 12px;
}
.mind.open .sum::after { content: " — hide"; }
.mind.live .sum::after { content: ""; }
.mind:not(.live):not(.open) .steps,
.mind:not(.live):not(.open) .verdict { display: none; }

/* The recorded-run banner, once some of it is not recorded any more.
   Green because this is the page succeeding, not warning. */
.banner.live {
  background: rgba(31, 111, 74, .07);
  border-color: rgba(31, 111, 74, .26);
}
.banner.live b { color: var(--ok); }