@import url("/field-station-system.css");

/* FIELD STATION · COLLECTIVE COMPUTE
   Experiment-specific layout built on the supplied v0.2 design system. */

/* ── shared apparatus ───────────────────────────────────────────────────── */
.shell-header{min-height:58px;display:flex;align-items:center;gap:var(--fs-space-6);padding:var(--fs-space-4) max(var(--fs-space-6),calc((100vw - var(--fs-page-max))/2));border-bottom:var(--fs-border);background:var(--fs-paper)}
.shell-header .spacer{flex:1}
.shell-header .mode,.source{font:400 var(--fs-text-xs)/1 var(--fs-font-mono);letter-spacing:var(--fs-tracking-label);text-transform:uppercase;color:var(--fs-muted);text-decoration:none}
.shell-header .source:hover{color:var(--fs-accent)}
.apparatus{font-family:var(--fs-font-mono)}
.signal-line{display:inline-flex;align-items:center;gap:.6rem}
.signal-line::before{content:"";width:7px;height:7px;background:var(--fs-signal-green);flex:none}

/* ── landing ────────────────────────────────────────────────────────────── */
.landing{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto}
.landing-main{width:min(var(--fs-page-max),calc(100% - 3rem));margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.7fr);gap:clamp(3rem,8vw,8rem);align-items:center;padding:clamp(4rem,10vh,8rem) 0}
.landing-copy{border-top:var(--fs-border-ink);padding-top:var(--fs-space-4)}
.landing-copy h1{max-width:12ch;margin:var(--fs-space-6) 0 var(--fs-space-6);font:500 clamp(3rem,7.2vw,6.5rem)/.96 var(--fs-font-mono);letter-spacing:var(--fs-tracking-display);text-transform:none}
.landing-copy h1 .lo{color:var(--fs-muted);font-weight:400}
.landing-copy h1 strong{color:var(--fs-ink);font-weight:600}
.landing-copy .lede{max-width:46rem;color:var(--fs-muted);font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:var(--fs-leading-body)}
.landing-actions{display:flex;flex-wrap:wrap;gap:var(--fs-space-3);margin-top:var(--fs-space-8)}
.experiment-card{align-self:end;border-top:var(--fs-border-ink);padding-top:var(--fs-space-4)}
.experiment-card .number{font:500 var(--fs-text-xs)/1 var(--fs-font-mono);letter-spacing:var(--fs-tracking-label);text-transform:uppercase;color:var(--fs-accent)}
.experiment-card h2{margin:var(--fs-space-4) 0 var(--fs-space-3);font:500 var(--fs-text-lg)/var(--fs-leading-snug) var(--fs-font-mono);letter-spacing:var(--fs-tracking-display)}
.experiment-card p{color:var(--fs-muted);line-height:var(--fs-leading-body)}
.fs-warning{margin-top:var(--fs-space-6);padding:var(--fs-space-4) 0;border-top:1px solid var(--fs-signal-orange);border-bottom:var(--fs-border);color:var(--fs-muted);font-size:var(--fs-text-sm);line-height:1.55}
.fs-warning strong{color:var(--fs-ink)}
.experiment-card dl{display:grid;grid-template-columns:6rem 1fr;gap:0;margin-top:var(--fs-space-6);border-top:var(--fs-border);font:400 var(--fs-text-sm)/1.45 var(--fs-font-mono)}
.experiment-card dt,.experiment-card dd{padding:var(--fs-space-3) 0;border-bottom:var(--fs-border)}
.experiment-card dt{color:var(--fs-muted);text-transform:uppercase;letter-spacing:var(--fs-tracking-label)}
.experiment-card dd{margin:0;color:var(--fs-ink)}
.landing-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--fs-space-4);padding:var(--fs-space-4) max(var(--fs-space-6),calc((100vw - var(--fs-page-max))/2));border-top:var(--fs-border-ink);color:var(--fs-muted);font:400 var(--fs-text-xs)/1.45 var(--fs-font-mono)}

/* ── room chrome ────────────────────────────────────────────────────────── */
.room-body{height:100svh;overflow:hidden;display:flex;flex-direction:column}
.room-header{flex:none;min-height:58px;display:flex;align-items:center;gap:var(--fs-space-6);padding:var(--fs-space-4) max(var(--fs-space-4),calc((100vw - 1440px)/2));border-bottom:var(--fs-border);background:var(--fs-paper)}
.room-header .spacer{flex:1}
.room-header .mode{font:400 var(--fs-text-xs)/1 var(--fs-font-mono);letter-spacing:var(--fs-tracking-label);text-transform:uppercase;color:var(--fs-muted)}
#room-badge{display:none;padding:.55rem .7rem;border:var(--fs-border-ink);border-radius:0;background:transparent;color:var(--fs-accent);font:500 var(--fs-text-xs)/1 var(--fs-font-mono);letter-spacing:.12em;cursor:pointer}
#room-badge:hover{border-color:var(--fs-accent)}
#privacy-strip{flex:none;display:grid;grid-template-columns:auto 1fr;align-items:start;gap:var(--fs-space-4);padding:.65rem max(var(--fs-space-4),calc((100vw - 1440px)/2));border-bottom:1px solid var(--fs-signal-orange);color:var(--fs-muted);font-size:var(--fs-text-sm);line-height:1.45}
#privacy-strip b{color:var(--fs-ink)}
#privacy-strip .signal{font:500 var(--fs-text-xs)/1.45 var(--fs-font-mono);letter-spacing:var(--fs-tracking-label);text-transform:uppercase;color:var(--fs-signal-orange);white-space:nowrap}

/* ── join surface ───────────────────────────────────────────────────────── */
#join-screen{flex:1;overflow-y:auto;display:grid;place-items:center;padding:clamp(2rem,7vh,6rem) var(--fs-space-6)}
.join-card{width:min(720px,100%);border-top:var(--fs-border-ink);padding-top:var(--fs-space-4)}
.join-card h1{max-width:13ch;margin:var(--fs-space-6) 0 var(--fs-space-4);font:500 clamp(2.65rem,6vw,5rem)/.98 var(--fs-font-mono);letter-spacing:var(--fs-tracking-display)}
.join-card h1 .lo{color:var(--fs-muted);font-weight:400}
.join-card > p{max-width:55ch;margin-bottom:var(--fs-space-8);color:var(--fs-muted);font-size:var(--fs-text-md);line-height:var(--fs-leading-body)}
.join-fields{display:grid;grid-template-columns:1fr 11rem;gap:var(--fs-space-3);border-top:var(--fs-border);padding-top:var(--fs-space-4)}
.join-fields input{width:100%;min-width:0;padding:.8rem .85rem;border:var(--fs-border);border-radius:var(--fs-radius-input);background:transparent;color:var(--fs-ink);outline:none;font-family:var(--fs-font-sans)}
.join-fields input:focus{border-color:var(--fs-accent)}
#code-input,#key-input{font-family:var(--fs-font-mono);letter-spacing:.08em;text-transform:uppercase}
#key-wrap{grid-column:1/-1}
#key-input{font-size:var(--fs-text-sm);text-transform:none}
#join-pledge{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:var(--fs-space-4) 0;border-bottom:var(--fs-border);color:var(--fs-muted);font:400 var(--fs-text-sm)/1 var(--fs-font-mono)}
#join-pledge input{width:4rem;padding:.45rem;border:var(--fs-border);border-radius:var(--fs-radius-input);background:transparent;text-align:center;font-family:var(--fs-font-mono)}
#join-pledge .step{width:30px;height:30px;border:var(--fs-border);border-radius:0;background:transparent;cursor:pointer;font-family:var(--fs-font-mono)}
#join-pledge .step:hover{border-color:var(--fs-accent);color:var(--fs-accent)}
.consent{display:grid;grid-template-columns:auto 1fr;gap:var(--fs-space-3);align-items:start;margin:var(--fs-space-6) 0 var(--fs-space-4);padding:var(--fs-space-4) 0;border-top:1px solid var(--fs-signal-orange);border-bottom:var(--fs-border);color:var(--fs-muted);font-size:var(--fs-text-sm);line-height:1.5}
.consent input{margin-top:.2rem;accent-color:var(--fs-accent)}
.join-actions{display:flex;gap:var(--fs-space-3);flex-wrap:wrap;margin-top:var(--fs-space-4)}
.join-actions button{padding:var(--fs-space-4) var(--fs-space-6);border:var(--fs-border-ink);border-radius:0;background:transparent;color:var(--fs-ink);cursor:pointer;font:500 var(--fs-text-sm)/1 var(--fs-font-mono);letter-spacing:var(--fs-tracking-label);text-transform:uppercase}
.join-actions button.primary{background:var(--fs-ink);color:var(--fs-paper)}
.join-actions button:hover:not(:disabled){border-color:var(--fs-accent);color:var(--fs-accent)}
.join-actions button.primary:hover:not(:disabled){background:var(--fs-accent);border-color:var(--fs-accent);color:var(--fs-paper)}
.join-actions button:disabled{opacity:.42;cursor:default}
.invite-help{display:flex;justify-content:space-between;align-items:center;gap:var(--fs-space-4);padding-top:var(--fs-space-4);color:var(--fs-muted);font:400 var(--fs-text-xs)/1.4 var(--fs-font-mono)}
.invite-help button{padding:0;border:0;background:transparent;color:var(--fs-accent);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:.25em}
#join-status{min-height:1.4rem;margin-top:var(--fs-space-3);color:var(--fs-muted);font:400 var(--fs-text-sm)/1.45 var(--fs-font-mono)}
#join-status[data-tone="warn"]{color:var(--fs-signal-red)}
#join-status[data-tone="ok"]{color:var(--fs-signal-green)}

/* ── active experiment ──────────────────────────────────────────────────── */
#room-screen{flex:1;min-height:0;display:none;overflow:hidden;width:min(1440px,100%);margin-inline:auto;border-inline:var(--fs-border)}
#side{width:330px;flex:none;min-height:0;overflow-y:auto;padding:0 var(--fs-space-4) var(--fs-space-4);border-right:var(--fs-border);background:var(--fs-paper)}
.side-k{margin:var(--fs-space-6) 0 var(--fs-space-3);color:var(--fs-muted);font:500 var(--fs-text-xs)/1 var(--fs-font-mono);letter-spacing:var(--fs-tracking-label);text-transform:uppercase}
#side-room{padding:var(--fs-space-4) 0;border-top:var(--fs-border-ink);border-bottom:var(--fs-border);cursor:pointer}
#side-room:hover #side-code{color:var(--fs-accent)}
#side-code{font:500 1.45rem/1 var(--fs-font-mono);letter-spacing:.16em;color:var(--fs-ink)}
.side-hint{color:var(--fs-muted);font:400 var(--fs-text-xs)/1.45 var(--fs-font-mono)}
#side-room .side-hint{margin-top:var(--fs-space-2)}
#peers{border-top:var(--fs-border)}
.peer-card{padding:var(--fs-space-3) 0;border-bottom:var(--fs-border)}
.peer-card.self{border-top:2px solid var(--fs-accent)}
.peer-name{display:flex;align-items:center;gap:.55rem;font:500 var(--fs-text-sm)/1.3 var(--fs-font-mono)}
.dot{width:6px;height:6px;background:var(--fs-signal-yellow);flex:none}
.dot.ok{background:var(--fs-signal-green)}
.peer-gpu,.peer-stats,.pledge{margin-top:.4rem;color:var(--fs-muted);font:400 var(--fs-text-xs)/1.45 var(--fs-font-mono)}
.peer-stats{display:flex;gap:.65rem;flex-wrap:wrap}
.peer-stats b{color:var(--fs-ink);font-weight:500}
.peer-card button,.pledge input,#ai-panel select{border:var(--fs-border);border-radius:var(--fs-radius-input);background:transparent;color:var(--fs-ink);padding:.42rem .5rem;font:400 var(--fs-text-xs)/1 var(--fs-font-mono)}
.peer-card button{margin-top:.45rem;cursor:pointer;text-transform:uppercase;letter-spacing:var(--fs-tracking-label)}
.peer-card button:hover{border-color:var(--fs-accent);color:var(--fs-accent)}
#ai-panel{display:none;flex-direction:column;gap:var(--fs-space-3);margin-top:var(--fs-space-6);padding-top:0;border-top:var(--fs-border-ink)}
#ai-head{display:flex;flex-direction:column;gap:var(--fs-space-3)}
#ai-title{font:500 var(--fs-text-xs)/1 var(--fs-font-mono);letter-spacing:var(--fs-tracking-label);color:var(--fs-ink)}
#ai-model{width:100%;padding:.6rem .55rem!important}
#ai-need{display:grid;gap:.4rem}
#need-bar,#ldg-bar{height:2px;overflow:hidden;background:var(--fs-line)}
#need-fill,#ldg-fill{height:100%;width:0;background:var(--fs-accent);transition:width .18s linear}
#need-text,#ai-status,#ldg-title,#ldg-sub{color:var(--fs-muted);font:400 var(--fs-text-xs)/1.5 var(--fs-font-mono)}
#ai-start{width:max-content;padding:.7rem .85rem;border:var(--fs-border-ink);border-radius:0;background:var(--fs-ink);color:var(--fs-paper);font:500 var(--fs-text-xs)/1 var(--fs-font-mono);letter-spacing:var(--fs-tracking-label);text-transform:uppercase;cursor:pointer}
#ai-start:hover:not(:disabled){background:var(--fs-accent);border-color:var(--fs-accent)}
#ai-start:disabled{opacity:.4}
.host-section{display:grid;gap:.45rem;padding-top:var(--fs-space-3);border-top:var(--fs-border)}
.host-section[hidden]{display:none}
.host-section label{color:var(--fs-muted);font:500 var(--fs-text-xs)/1 var(--fs-font-mono);text-transform:uppercase;letter-spacing:var(--fs-tracking-label)}
#ai-loading{padding:.25rem 0}
#cache-line{margin-top:var(--fs-space-4)}
#cache-line a{color:var(--fs-muted)}
#cluster-bar{margin-top:var(--fs-space-3);padding-top:var(--fs-space-3);border-top:var(--fs-border);color:var(--fs-muted);font:400 var(--fs-text-xs)/1.4 var(--fs-font-mono)}
#cluster-bar b{color:var(--fs-ink);font-weight:400}

/* ── model distribution + chat ──────────────────────────────────────────── */
#chatpane{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--fs-paper)}
#chat-log{flex:none;max-height:78px;overflow-y:auto;padding:.55rem var(--fs-space-6);border-bottom:var(--fs-border);color:var(--fs-muted);font:400 var(--fs-text-xs)/1.5 var(--fs-font-mono)}
#chat-log b{color:var(--fs-accent);font-weight:500}
#ai-empty{flex:1;display:grid;place-items:center;padding:var(--fs-space-8);color:var(--fs-muted);font:400 var(--fs-text-sm)/1.5 var(--fs-font-mono);text-align:center}
#load-card{display:none;margin:auto;width:min(560px,calc(100% - 3rem));padding:var(--fs-space-4) 0;border-top:var(--fs-border-ink);border-bottom:var(--fs-border)}
#load-card.on{display:block}
.lc-k,.lc-note,.lc-row{font:400 var(--fs-text-xs)/1.45 var(--fs-font-mono);color:var(--fs-muted)}
.lc-k{letter-spacing:var(--fs-tracking-label)}
.lc-note{padding-top:var(--fs-space-3);border-top:var(--fs-border)}
.lc-row{display:grid;grid-template-columns:120px 1fr 62px;align-items:center;gap:var(--fs-space-3);padding:var(--fs-space-3) 0;border-top:var(--fs-border)}
.lc-row .n{color:var(--fs-ink)}
.lc-row .n small{display:block;color:var(--fs-muted);font-size:.7rem}
.lc-row .bar{height:2px;background:var(--fs-line)}
.lc-row .fill{height:100%;width:0;background:var(--fs-accent)}
.lc-row .pct{text-align:right;color:var(--fs-muted)}
.lc-row.done .pct{color:var(--fs-signal-green)}
#ai-output{flex:1;display:none;overflow-y:auto;padding:clamp(1.5rem,4vw,4rem);white-space:normal;line-height:var(--fs-leading-body)}
.m{max-width:760px;margin:0 auto;padding:var(--fs-space-6) 0;border-top:var(--fs-border)}
.m:first-child{border-top:var(--fs-border-ink)}
.m .who{margin-bottom:var(--fs-space-3);font:500 var(--fs-text-xs)/1 var(--fs-font-mono);letter-spacing:var(--fs-tracking-label);text-transform:uppercase;color:var(--fs-accent)}
.m.user .who{color:var(--fs-muted)}
.m .bubble{font-size:var(--fs-text-base);line-height:var(--fs-leading-body);white-space:pre-wrap}
.m .bubble p + p{margin-top:1em}
.m .stats{margin-top:var(--fs-space-4);color:var(--fs-muted);font:400 var(--fs-text-xs)/1.4 var(--fs-font-mono)}
.cursor{display:inline-block;width:.55em;height:1em;margin-left:.2em;background:var(--fs-accent);vertical-align:-.15em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
#ai-row{flex:none;display:none;gap:0;padding:var(--fs-space-4) clamp(var(--fs-space-4),4vw,var(--fs-space-12));border-top:var(--fs-border-ink);background:var(--fs-paper)}
#ai-row input{flex:1;min-width:0;padding:.85rem .9rem;border:var(--fs-border);border-right:0;border-radius:var(--fs-radius-input) 0 0 var(--fs-radius-input);background:transparent;color:var(--fs-ink);outline:none}
#ai-row input:focus{border-color:var(--fs-accent)}
#ai-send{padding:.85rem 1.1rem;border:var(--fs-border-ink);border-radius:0;background:var(--fs-ink);color:var(--fs-paper);font:500 var(--fs-text-xs)/1 var(--fs-font-mono);letter-spacing:var(--fs-tracking-label);text-transform:uppercase;cursor:pointer}
#ai-send:hover:not(:disabled){background:var(--fs-accent);border-color:var(--fs-accent)}
#ai-send:disabled{opacity:.4}
#toasts{position:fixed;right:var(--fs-space-4);bottom:var(--fs-space-4);z-index:100;display:grid;gap:var(--fs-space-2)}
.toast{max-width:360px;padding:var(--fs-space-3) var(--fs-space-4);border:var(--fs-border-ink);background:var(--fs-paper);color:var(--fs-ink);font:400 var(--fs-text-xs)/1.4 var(--fs-font-mono)}

@media(max-width:820px){
  .landing-main{grid-template-columns:1fr;align-items:start;padding:var(--fs-space-16) 0;gap:var(--fs-space-16)}
  .landing-copy h1{font-size:clamp(2.8rem,13vw,5rem)}
  .room-header .mode{display:none}
  #privacy-strip{grid-template-columns:1fr;gap:.3rem}
  #room-screen{flex-direction:column;overflow-y:auto;border-inline:0}
  #side{width:100%;overflow:visible;border-right:0;border-bottom:var(--fs-border-ink);padding:0 var(--fs-space-4) var(--fs-space-4)}
  #chatpane{min-height:70svh}
  #ai-output{min-height:50svh}
}
@media(max-width:560px){
  .fs-container,.landing-main{width:calc(100% - 2rem)}
  .shell-header,.room-header{padding-inline:var(--fs-space-4);gap:var(--fs-space-3)}
  .fs-wordmark .fs-mark{display:none}
  .source{display:none}
  .join-fields{grid-template-columns:1fr}
  #code-input,#key-wrap{grid-column:auto}
  .join-actions{display:grid;grid-template-columns:1fr}
  .join-actions button{width:100%}
  .invite-help{align-items:flex-start;flex-direction:column;gap:.35rem}
  .lc-row{grid-template-columns:90px 1fr 48px;gap:.5rem}
  #ai-row{padding:.75rem}
}
@media(prefers-reduced-motion:reduce){*{scroll-behaviour:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}