/* Lightwave Phase 0 harness.
   An instrument, not a document: summary before detail, state encoded in form
   as well as number. Palette continues the design doc — cool slate neutrals
   with an amber mark — while pass/degraded/fail carry their own semantics. */

:root {
  --ground:    #F4F5F7;
  --surface:   #FFFFFF;
  --surface-2: #ECEEF1;
  --ink:       #15191F;
  --ink-2:     #4D5666;
  --ink-3:     #7B8595;
  --rule:      #D6DBE2;
  --rule-soft: #E5E9EE;

  --accent:    #9D6410;

  --ok:        #1C7A4E;  --ok-bg:   #DDF0E5;
  --warn:      #8A5A0C;  --warn-bg: #F5E8CF;
  --bad:       #96382B;  --bad-bg:  #F7E2DE;
  --run:       #176460;  --run-bg:  #DAEBEA;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --body: Charter, "Bitstream Charter", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:    #12161B;
    --surface:   #191E25;
    --surface-2: #20262E;
    --ink:       #E3E8EF;
    --ink-2:     #9AA3B1;
    --ink-3:     #6E7786;
    --rule:      #2B323B;
    --rule-soft: #232A32;

    --accent:    #E8A93C;

    --ok:        #4FC183;  --ok-bg:   #14301F;
    --warn:      #E8A93C;  --warn-bg: #33280F;
    --bad:       #DC7F6B;  --bad-bg:  #36201B;
    --run:       #45B3AC;  --run-bg:  #14302E;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- bar --- */
.bar {
  display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.4rem;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 0.6rem; }
.mark {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.name { font-family: var(--mono); font-size: 0.95rem; letter-spacing: -0.02em; font-weight: 600; }
.phase { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.origin { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); }

main { max-width: 1120px; margin: 0 auto; padding: 1.6rem 1.4rem 3rem; display: flex; flex-direction: column; gap: 1.4rem; }

/* --------------------------------------------------------------- gate --- */
.gate {
  display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--ink-3);
  padding: 1.3rem 1.4rem;
}
.gate[data-state="running"] { border-left-color: var(--run); }
.gate[data-state="pass"]    { border-left-color: var(--ok); }
.gate[data-state="warn"]    { border-left-color: var(--warn); }
.gate[data-state="fail"]    { border-left-color: var(--bad); }

.gate-head { flex: 1 1 26rem; display: flex; flex-direction: column; gap: 0.4rem; }
.gate h1 { font-family: var(--mono); font-size: 1.32rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.gate[data-state="pass"] h1 { color: var(--ok); }
.gate[data-state="warn"] h1 { color: var(--warn); }
.gate[data-state="fail"] h1 { color: var(--bad); }
.gate p { color: var(--ink-2); font-size: 0.93rem; max-width: 56ch; }
.gate-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ------------------------------------------------------------ buttons --- */
.btn {
  font-family: var(--mono); font-size: 0.8rem;
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 2px;
  cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--ink-3); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn.ghost { background: transparent; }
.btn.small { padding: 0.35rem 0.6rem; font-size: 0.72rem; }
.btn .hint { color: currentColor; opacity: 0.6; font-size: 0.7rem; }

/* ----------------------------------------------------------- findings --- */
.findings { display: flex; flex-direction: column; gap: 0.5rem; }
.finding {
  display: flex; gap: 0.7rem; align-items: baseline;
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--rule); padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
}
.finding.blocker { border-left-color: var(--bad); }
.finding.warning { border-left-color: var(--warn); }
.finding .tag {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; padding-top: 0.15rem;
}
.finding.blocker .tag { color: var(--bad); }
.finding.warning .tag { color: var(--warn); }

/* -------------------------------------------------------------- panel --- */
.panel { display: flex; flex-direction: column; gap: 0.9rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.5rem; }
.panel-head h2 { font-family: var(--mono); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; }
.legend { display: flex; gap: 0.4rem; }

/* --------------------------------------------------------------- pill --- */
.pill {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.2rem 0.45rem; border-radius: 2px; white-space: nowrap;
  border: 1px solid transparent;
}
.pill.idle { background: var(--surface-2); color: var(--ink-3); border-color: var(--rule); }
.pill.run  { background: var(--run-bg);  color: var(--run);  border-color: var(--run); }
.pill.ok   { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.pill.bad  { background: var(--bad-bg);  color: var(--bad);  border-color: var(--bad); }

/* -------------------------------------------------------------- cards --- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.9rem; }
.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 2px solid var(--rule);
  padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem;
}
.card.lead { grid-column: span 2; }
@media (max-width: 680px) { .card.lead { grid-column: span 1; } }
.card[data-state="run"]  { border-top-color: var(--run); }
.card[data-state="ok"]   { border-top-color: var(--ok); }
.card[data-state="warn"] { border-top-color: var(--warn); }
.card[data-state="bad"]  { border-top-color: var(--bad); }

.card header { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.card h3 { font-family: var(--mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; }
.metric { display: flex; align-items: baseline; gap: 0.45rem; }
.big {
  font-family: var(--mono); font-size: 1.65rem; font-weight: 500;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.unit { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.verdict { font-size: 0.86rem; color: var(--ink-2); line-height: 1.45; }
.card[data-state="ok"]   .big { color: var(--ok); }
.card[data-state="warn"] .big { color: var(--warn); }
.card[data-state="bad"]  .big { color: var(--bad); }

.detail {
  font-family: var(--mono); font-size: 0.68rem; line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--rule-soft);
  padding: 0.6rem; overflow-x: auto; color: var(--ink-2);
  max-height: 20rem; overflow-y: auto; white-space: pre;
}
.card .detail { cursor: text; }

/* ------------------------------------------------------------- report --- */
.report { background: var(--surface); border: 1px solid var(--rule); padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.report label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
input[type="text"] {
  font-family: var(--mono); font-size: 0.82rem;
  padding: 0.55rem 0.7rem; background: var(--ground); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 2px; flex: 1 1 14rem; min-width: 0;
}
input[type="text"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.report-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.note { font-size: 0.86rem; color: var(--ink-2); }

.roomlink {
  font-family: var(--mono); font-size: 0.76rem; word-break: break-all;
  background: var(--surface-2); border: 1px solid var(--rule-soft); padding: 0.6rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.roomlink b { color: var(--accent); font-weight: 600; }

/* --------------------------------------------------------------- chat --- */
.chat { display: flex; flex-direction: column; gap: 0.3rem; max-height: 16rem; overflow-y: auto; }
.msg {
  font-family: var(--mono); font-size: 0.76rem; display: flex; gap: 0.6rem;
  padding: 0.35rem 0.5rem; background: var(--surface-2); border-left: 2px solid var(--rule);
}
.msg.mine { border-left-color: var(--accent); }
.msg .seq { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.msg .who { color: var(--ink-3); }
.msg .lat { margin-left: auto; color: var(--run); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- log --- */
.log {
  font-family: var(--mono); font-size: 0.7rem; line-height: 1.55;
  background: var(--surface); border: 1px solid var(--rule);
  padding: 0.7rem; max-height: 22rem; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
}
.line { display: flex; gap: 0.6rem; }
.line .t { color: var(--ink-3); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.line .m { color: var(--ink-2); word-break: break-word; }
.line.ok   .m { color: var(--ok); }
.line.warn .m { color: var(--warn); }
.line.bad  .m { color: var(--bad); }
.line.step .m { color: var(--ink); }

footer {
  max-width: 1120px; margin: 0 auto; padding: 1.4rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }