/* Landing (/) and the agents page (/agents). Tokens, header and footer live in site.css.
   The look: a night instrument panel. Square edges, hairlines, corner ticks on anything that
   frames a face, gold for what you act on, teal for what the system reports. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--text);font:400 17px/1.55 var(--sans);font-stretch:100%}
a{color:inherit}
:focus-visible{outline:1px solid var(--signal);outline-offset:4px}
code,pre{font-family:var(--mono);font-size:.85em}
[hidden]{display:none!important}
.button{display:inline-block;padding:11px 22px;border:1px solid var(--line);border-radius:2px;background:#0a1b2099;color:var(--text);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.button:hover{border-color:var(--signal)}
.button.primary{background:var(--gold);border-color:var(--gold);color:var(--ink);box-shadow:0 0 28px -8px var(--gold)}
.button.primary:hover{background:#edbb55;border-color:#edbb55}
.text-link{margin-left:20px}
/* Corner ticks: four L-shapes drawn as gradients, in the frame's own colour. */
.frame{--tick:var(--gold);position:relative;padding:10px;background:
  linear-gradient(var(--tick),var(--tick)) 0 0/18px 1px,linear-gradient(var(--tick),var(--tick)) 0 0/1px 18px,
  linear-gradient(var(--tick),var(--tick)) 100% 0/18px 1px,linear-gradient(var(--tick),var(--tick)) 100% 0/1px 18px,
  linear-gradient(var(--tick),var(--tick)) 0 100%/18px 1px,linear-gradient(var(--tick),var(--tick)) 0 100%/1px 18px,
  linear-gradient(var(--tick),var(--tick)) 100% 100%/18px 1px,linear-gradient(var(--tick),var(--tick)) 100% 100%/1px 18px;
  background-repeat:no-repeat}

/* ---- landing ---- */
.home main>section{--gutter:max(clamp(16px,4vw,48px),calc(50vw - 590px));padding-inline:var(--gutter)}
.home h2{margin:0 0 24px;font-weight:800;font-stretch:112%;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.1;letter-spacing:-.015em}
/* The hero is the artwork: the compass sits at the lower right, the headline in the dark to its left. */
.hero{display:flex;align-items:center;min-height:min(78vh,760px);padding-block:clamp(56px,9vw,112px);background:
  linear-gradient(90deg,var(--void) 30%,#050d10cc 52%,#050d1000 78%),
  linear-gradient(0deg,var(--void),#050d1000 26%),
  url(art/compass.jpg) right bottom/auto 112% no-repeat}
.pitch{min-width:0;max-width:40rem}
.hero h1{margin:0 0 28px;font-weight:800;font-stretch:112%;font-size:clamp(2.5rem,6vw,4.75rem);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.pitch p{max-width:34em;margin:0 0 28px;font-size:1.15rem;color:#c5d3d0}
.pitch .actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.command{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:8px 8px 8px 20px;background:#0a1b20cc;border:1px solid var(--line);border-radius:2px}
.command code{flex:1;overflow-x:auto;white-space:nowrap;color:var(--signal)}
.command button{min-width:5.2em;padding:8px 16px;border:1px solid var(--line);border-radius:2px;background:var(--void);color:var(--text);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.command button:hover{border-color:var(--signal)}
.command.quiet{max-width:34em;margin:20px 0 0}

.identity,.suite,.loop,.band{padding-block:48px;border-top:1px solid var(--line)}
/* One panel, read left to right: the face, what the agent has, who it answers to. */
.identity-panel{display:grid;grid-template-columns:240px minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.identity figure{margin:0}
.identity img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 20%}
.identity figcaption{margin-top:14px;color:var(--muted);font-size:14px}
.identity dl{margin:0}
.identity dl::before{content:'Has';display:block;padding-bottom:10px;color:var(--gold);font-weight:700}
.identity dl[aria-label]::before{content:attr(aria-label)}
.identity dl div{padding:11px 0;border-top:1px solid var(--line)}
.identity dt{color:var(--signal);font:13px var(--mono)}
.identity dd{margin:2px 0 0}

/* The suite is a table because it is one: product, what it is for, where to get it. */
.suite table{width:100%;border-collapse:collapse}
.suite tr{border-top:1px solid var(--line)}
.suite th,.suite td{padding:16px 24px 16px 0;text-align:left;vertical-align:baseline}
.suite th{width:7em;font-weight:800;font-stretch:112%;font-size:1.25rem}
.suite td:last-child{width:13em;padding-right:0;text-align:right;white-space:nowrap}
.suite td a{color:var(--gold);font-weight:600;text-underline-offset:4px}
/* The steps are numbered because they happen in this order. */
.loop ol{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 24px;padding:0;list-style:none;counter-reset:step}
.loop li{position:relative;padding:44px 24px 0 0;counter-increment:step;font-size:16px}
.loop li::before{content:counter(step);position:absolute;top:0;left:0;z-index:1;width:30px;height:30px;border:1px solid var(--gold);border-radius:50%;background:var(--void);color:var(--gold);font:700 14px/28px var(--mono);text-align:center}
.loop li::after{content:'';position:absolute;top:15px;left:30px;right:0;height:1px;background:var(--line)}
.loop li:last-child::after{display:none}
.loop li b{display:block;margin-bottom:4px;font-weight:800;font-stretch:112%}
.loop p{max-width:44em;margin:0;color:var(--muted)}

.band{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(20px,5vw,80px);scroll-margin-top:16px}
.band p{margin:0 0 18px;max-width:36em}
.band p:last-child{margin-bottom:0}
.band pre{margin:0 0 18px;padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:2px;overflow-x:auto;line-height:1.6;color:var(--signal)}
.band .note{color:var(--muted);font-size:15px}
.version{display:inline-block;margin-left:.35em;padding:.2em .55em;border:1px solid var(--signal);border-radius:2px;color:var(--signal);font:700 .45em var(--mono);vertical-align:middle}
@media(max-width:820px){
  /* On a narrow screen the artwork sits behind the headline, dimmed so the text stays readable. */
  .hero{min-height:0;background:linear-gradient(#050d10d9,#050d10d9),linear-gradient(0deg,var(--void),#050d1000 30%),url(art/compass.jpg) 70% bottom/cover no-repeat}
  .band{grid-template-columns:minmax(0,1fr)}
  .identity-panel{grid-template-columns:minmax(0,1fr)}
  .identity figure{max-width:240px}
  .suite tr{display:block;padding:14px 0}
  .suite th,.suite td,.suite td:last-child{display:block;width:auto;padding:2px 0;text-align:left;white-space:normal}
  .suite td:empty{display:none}
  .loop ol{grid-template-columns:1fr;gap:20px}
  .loop li{padding:0 0 0 46px}
  .loop li::after{display:none}
}

/* ---- agents page: a console on the left, one live head on the right, all on one screen ---- */
.deck{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,56px);align-items:start;max-width:1240px;margin:0 auto;padding:28px clamp(16px,4vw,48px) 0}
.console{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;max-width:420px;padding-top:8px}
/* What the head is saying is the main thing to read. */
.caption{min-height:4.2em;margin:0;font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.35;text-wrap:pretty}
.voice{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.talk{padding:14px 44px;border:1px solid var(--gold);border-radius:2px;background:var(--gold);color:var(--ink);font:inherit;font-size:1.1rem;font-weight:800;font-stretch:112%;cursor:pointer;box-shadow:0 0 28px -8px var(--gold)}
.talk:hover{background:#edbb55}
/* Until it is first pressed, the button asks for attention; this is the one thing on the page that moves by itself. */
.talk.invite{animation:invite 2.4s ease-in-out infinite}
@keyframes invite{50%{box-shadow:0 0 44px 0 var(--gold)}}
@media(prefers-reduced-motion:reduce){.talk.invite{animation:none}}
.talk.recording{background:transparent;color:var(--gold);box-shadow:none}
.talk:disabled{opacity:.4;cursor:default}
.plain{padding:4px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--muted);font:inherit;font-size:15px;cursor:pointer}
.plain:hover{color:var(--text);border-bottom-color:var(--signal)}
#composer{display:flex;width:100%;gap:8px}
#composer input{flex:1;min-width:0;padding:10px 16px;border:1px solid var(--line);border-radius:2px;background:var(--panel);color:var(--text);font:inherit}
#composer button{width:44px;border:1px solid var(--line);border-radius:2px;background:var(--panel);color:var(--text);font:inherit;cursor:pointer}
.status{min-height:1.4em;margin:0;color:var(--signal);font:13px var(--mono)}
.wallet-btn{padding:8px 16px;border:1px solid var(--line);border-radius:2px;background:transparent;color:var(--text);font:inherit;font-size:15px;cursor:pointer}
.wallet-btn:hover{border-color:var(--signal)}
.wallet-btn.connected{border-color:var(--live);color:#86efac}
.credits{color:var(--muted);font:13px var(--mono)}

.notice{max-width:min(420px,90vw);padding:28px;border:1px solid var(--gold);border-radius:2px;background:var(--panel);color:var(--text);font:inherit;text-align:center;box-shadow:0 0 60px -10px #000}
.notice::backdrop{background:#050d10cc}
.notice p{margin:0 0 20px;font-size:1.15rem}
.notice label{display:block;margin:0 0 14px}
.notice .hint{margin:0 0 12px;font-size:15px}
.dialog-actions{display:flex;justify-content:center;gap:10px;margin-top:8px}
.hint{color:var(--muted);font-size:14px}
.hint.bad{color:#fca5a5}
.hint a{color:var(--gold)}

/* Only farm owners see this part: who is on the farm, and how the selected agent is doing. */
.farm{width:100%;margin-top:8px}
.farm h2{margin:0 0 10px;font-weight:800;font-stretch:112%;font-size:1.1rem}
.farm ul{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid var(--line)}
.farm li{border-bottom:1px solid var(--line)}
.farm li button{display:grid;grid-template-columns:8px 1fr auto;gap:12px;align-items:center;width:100%;padding:9px 12px;border:0;border-left:2px solid transparent;background:transparent;color:var(--muted);font:inherit;text-align:left;cursor:pointer}
.farm li button:hover{background:#5fd9cc0a}
.farm li button[aria-pressed=true]{border-left-color:var(--agent,var(--gold));background:#5fd9cc12}
.farm .who{color:var(--text);font-weight:700;font-stretch:112%}
.farm .what{font:12px var(--mono)}
.adoptable h3{margin:0 0 6px;color:var(--muted);font-size:14px;font-weight:600}
.adoptable li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;padding:8px 12px 8px 14px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.dot.ok{background:var(--live);box-shadow:0 0 8px var(--live)}
.dot.bad{background:var(--stop);box-shadow:0 0 8px var(--stop)}
.details{margin:0 0 14px}
.details div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--line);font-size:15px}
.details dt{color:var(--signal);font:13px/1.8 var(--mono)}
.details dd{margin:0;text-align:right;overflow-wrap:anywhere}
.details dd.mono{font-family:var(--mono);font-size:13px}
.details dd.ok{color:#86efac}
.details dd.bad{color:#fca5a5}
.farm-actions{display:flex;flex-wrap:wrap;gap:8px}
.estop{padding:11px 16px;border:1px solid var(--stop);border-radius:2px;background:#ef444422;color:#fecaca;font:inherit;font-weight:700;cursor:pointer}
.estop:hover{background:#ef444444}
.estop:disabled{opacity:.4;cursor:default}
.voice-pick{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:15px}
#voice{padding:6px 12px;border:1px solid var(--line);border-radius:2px;background:transparent;color:var(--text);font:inherit;font-size:14px;cursor:pointer}

/* The head is sized from the window's height, so it and its nameplate always fit on screen
   beside the console. Each agent carries a colour: the head model varies face shape only, so the
   frame and the nameplate make agents differ at a glance. */
.stage{position:sticky;top:16px;display:flex;justify-content:center}
.portrait{--agent:var(--gold);--tick:var(--agent);width:min(100%,calc((100dvh - 190px)/1.1));min-width:200px;margin-bottom:44px}
#head{display:block;width:100%;aspect-ratio:1/1.1;border:0;background:#010604}
/* The face is tens of megabytes. Until it is ready a compass covers the frame, its needle
   hunting for north, and nothing on the page starts. */
.loader{position:absolute;inset:10px;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#010604;transition:opacity .6s}
.loader.done{opacity:0;pointer-events:none}
.loader svg{width:min(42%,150px);overflow:visible}
.loader .dial{fill:none;stroke:var(--line);stroke-width:1.5;transform-origin:60px 60px;animation:dial 24s linear infinite}
.loader .dial path{stroke:var(--signal);stroke-width:2;opacity:.8}
.loader .dial .minor{opacity:.35}
.loader .needle{transform-origin:60px 60px;animation:seek 3.2s cubic-bezier(.4,0,.2,1) infinite}
.loader .north{fill:var(--gold);filter:drop-shadow(0 0 6px var(--gold))}
.loader .south{fill:var(--signal);opacity:.75}
.loader .pin{fill:var(--void);stroke:var(--gold);stroke-width:2}
.loader p{margin:0;color:var(--muted);font:13px var(--mono)}
.loader p::after{content:'';animation:dots 1.6s steps(4,end) infinite}
@keyframes dial{to{transform:rotate(360deg)}}
/* The needle overshoots and settles, then is knocked off north again. */
@keyframes seek{0%{transform:rotate(-70deg)}28%{transform:rotate(38deg)}48%{transform:rotate(-18deg)}64%{transform:rotate(9deg)}78%{transform:rotate(-3deg)}88%,94%{transform:rotate(0)}100%{transform:rotate(-70deg)}}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
@media(prefers-reduced-motion:reduce){.loader .dial,.loader .needle{animation:none}}
.nametag{position:absolute;z-index:2;left:50%;bottom:-36px;transform:translateX(-50%);width:max-content;max-width:92%;padding:10px 28px 9px;border:1px solid var(--line);border-bottom:2px solid var(--agent);background:#06181cf2;text-align:center}
#tag-name{display:block;font-weight:800;font-stretch:125%;font-size:clamp(1.1rem,2.6vw,1.7rem);line-height:1;letter-spacing:.06em;text-transform:uppercase;overflow-wrap:break-word}
#tag-role{display:block;margin-top:5px;color:var(--muted);font:12px var(--mono)}
@media(max-width:600px){
  /* A phone has no room for two columns: the head goes on top, kept short so Talk stays on screen. */
  .deck{grid-template-columns:minmax(0,1fr)}
  .stage{position:static;order:-1}
  .portrait{width:min(78%,calc(46dvh/1.1))}
  .caption{min-height:3em}
}