/* Crucible.
 *
 * Two panes. On the left you talk to the thing; on the right you watch it
 * work. The conversation is the front door because a visitor who can ask
 * "why was that one thrown out" never needs the layout explained to them,
 * which is the failure every previous version of this page had.
 *
 * Across the top of the working pane are three numbers that carry the whole
 * product: found, disproved, proven. Read left to right they say the
 * counterintuitive thing out loud, which is that most of what an AI finds is
 * wrong and the achievement is throwing it away.
 *
 * Red means one thing: disproved, or refused for want of authority. There is
 * no green, because a finding that survives is set in plain ink and that is
 * what surviving looks like.
 */

:root {
  color-scheme: light;

  --paper:       #FBFAF7;
  --paper-leaf:  #F3F1EA;
  --paper-wash:  #F4F1E8;
  --ink:         #14130E;   /* 17.8:1 on paper */
  --ink-muted:   #55524A;   /*  7.5:1 */
  --ink-faint:   #7C7870;   /*  4.6:1 */
  --ink-struck:  #6E6A60;   /*  5.2:1 */
  --rubric:      #8C1515;   /*  9.0:1 */
  --rule-hair:   #DAD5C7;
  --rule:        #C0BBAC;
  --rule-strong: #8F897A;

  --face-display: "Sitka Display", "Sitka Heading", ui-serif, "Iowan Old Style",
                  Charter, Cambria, "Palatino Linotype", Georgia, serif;
  --face-text: "Sitka Text", ui-serif, "Iowan Old Style", Charter,
               "Bitstream Charter", Cambria, "Palatino Linotype", Georgia, serif;
  --face-mono: "Cascadia Mono", ui-monospace, SFMono-Regular, Consolas,
               "DejaVu Sans Mono", monospace;

  --t-huge:  2.5rem;     /* 40 */
  --t-title: 1.5rem;     /* 24 */
  --t-body:  1.0625rem;  /* 17 */
  --t-sub:   0.9375rem;  /* 15 */
  --t-marg:  0.8125rem;  /* 13 */
  --t-note:  0.6875rem;  /* 11 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--paper); }
body {
  color: var(--ink); font-family: var(--face-text);
  font-size: var(--t-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
.mono { font-family: var(--face-mono); font-size: .88em;
        font-variant-numeric: tabular-nums lining-nums; }
.fig { font-variant-numeric: tabular-nums lining-nums; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
::selection { background: var(--paper-wash); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-thumb { background: var(--rule); }
* { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }

/* ------------------------------------------------------------------ head */

.head { border-bottom: 1px solid var(--rule); background: var(--paper); }
.head .in {
  height: 52px; display: flex; align-items: baseline; gap: 18px;
  padding: 0 20px;
}
.head .wm { font-family: var(--face-display); font-style: italic;
            font-size: var(--t-title); }
/* Named thesis rather than claim: a finding is a .claim, and reusing the word
   in the masthead put finding styling on the tagline and made every element
   count disagree with the numbers beside it. */
.head .thesis { font-size: var(--t-sub); color: var(--ink-muted); }
.head .id { margin-left: auto; font-size: var(--t-marg); color: var(--ink-faint); }

.split {
  display: grid; grid-template-columns: 430px 1fr;
  height: calc(100vh - 52px);
}

/* --------------------------------------------------------------- the talk */

.talk {
  border-right: 1px solid var(--rule); min-height: 0;
  display: grid; grid-template-rows: 1fr auto auto; background: var(--paper);
}
.log { overflow-y: auto; padding: 18px 20px; }

.turn { margin-bottom: 16px; animation: ink .16s ease-out both; }
@keyframes ink { from { opacity: 0; } }
.turn .by {
  font-size: var(--t-note); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 3px;
}
.turn.you .by { color: var(--rule-strong); }
.turn p { font-size: var(--t-sub); }
.turn.you p { color: var(--ink-muted); }
.turn.it p + p { margin-top: 8px; }

/* What the agent did while answering. Shown, because a visitor watching it go
   and read the run is watching the thing work. */
.did { margin: 6px 0 0; }
.did span {
  display: block; font-family: var(--face-mono); font-size: var(--t-marg);
  color: var(--ink-faint); line-height: 1.6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.did span.no { color: var(--rubric); }

.thinking { font-size: var(--t-sub); color: var(--ink-faint); font-style: italic; }

.ask {
  display: flex; gap: 9px; align-items: flex-end;
  padding: 12px 20px; border-top: 1px solid var(--rule-hair);
}
.ask textarea {
  flex: 1; resize: none; max-height: 140px;
  font-family: var(--face-text); font-size: var(--t-sub); line-height: 1.45;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); padding: 8px 10px;
}
.ask textarea:focus { outline: none; border-color: var(--ink); }
.ask button {
  font-family: var(--face-text); font-size: var(--t-sub);
  padding: 8px 16px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.ask button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.ask button:disabled { border-color: var(--rule); color: var(--ink-faint); cursor: default; }

.meter {
  padding: 0 20px 10px; font-size: var(--t-note); color: var(--ink-faint);
  font-variant-numeric: tabular-nums lining-nums;
}

/* --------------------------------------------------------------- the work */

.work { min-height: 0; display: grid; grid-template-rows: auto 1fr auto; }

/* The three numbers. The whole product, read left to right. */
.score {
  display: flex; align-items: baseline; gap: 20px;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--rule-hair);
}
.score .n { display: flex; align-items: baseline; gap: 8px; }
.score .n b {
  font-family: var(--face-display); font-size: var(--t-huge); font-weight: 400;
  line-height: 1; font-variant-numeric: tabular-nums lining-nums;
}
.score .n span { font-size: var(--t-marg); color: var(--ink-muted); }
.score .n.out b { color: var(--rubric); }
.score .arrow { font-size: var(--t-title); color: var(--rule-strong); }
.score .state {
  margin-left: auto; font-size: var(--t-marg); color: var(--ink-faint);
  align-self: center; text-align: right;
}

.stage { overflow-y: auto; padding: 18px 24px; min-height: 0; }

.idle { max-width: 56ch; color: var(--ink-muted); font-size: var(--t-sub); }
.idle p { margin-bottom: 8px; }
.idle b { color: var(--ink); }

/* The URL form and the key form share one look: fields, a button, one line
 * of guidance beneath. */
.repo, .byo { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule-hair); }
.repo label, .byo label { display: block; color: var(--ink); font-size: var(--t-sub); margin-bottom: 6px; }
.repo .row, .byo .row { display: flex; gap: 9px; align-items: center; }
.repo input, .byo input, .byo select {
  flex: 1; min-width: 0; font-family: var(--face-mono, monospace); font-size: var(--t-marg);
  color: var(--ink); background: var(--paper); border: 1px solid var(--rule); padding: 8px 10px;
}
.byo select { flex: 0 0 auto; }
.byo #byo-ceiling { flex: 0 0 8.5em; }
.repo input:focus, .byo input:focus, .byo select:focus { outline: none; border-color: var(--ink); }
.repo button, .byo button {
  font-family: var(--face-text); font-size: var(--t-sub); padding: 8px 16px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.repo button:hover:not(:disabled), .byo button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.repo button:disabled, .byo button:disabled { border-color: var(--rule); color: var(--ink-faint); cursor: default; }
.repo .hint, .byo .hint { font-size: var(--t-marg); color: var(--ink-faint); margin-top: 7px; min-height: 1.4em; }
.repo .hint.said, .byo .hint.said { color: var(--rubric); }
.byo > .hint { margin: 0 0 8px; }
.byo .status { flex: 1; font-size: var(--t-marg); color: var(--ink); }
.byo [hidden] { display: none; }
.head .out { margin-left: 14px; }
.head .out button {
  font-family: var(--face-text); font-size: var(--t-marg); color: var(--ink-faint);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.head .out button:hover { color: var(--ink); }

/* ------------------------------------------------------------- the thread */

.node { position: relative; }
.node > .kids {
  margin-left: 12px; padding-left: 20px;
  border-left: 1px solid var(--rule-hair);
}
.node > .kids > .node::before {
  content: ""; position: absolute; left: -20px; top: .8em;
  width: 13px; height: 1px; background: var(--rule-hair);
}

.who { display: flex; align-items: baseline; gap: 9px; padding-top: 11px; }
.who .dot {
  width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%;
  background: var(--rule-strong); margin-top: .4em;
}
.who.live .dot { background: var(--ink); }
.who.done .dot { background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.who .name { font-family: var(--face-display); font-style: italic; }
.who .role { font-size: var(--t-marg); color: var(--ink-muted); }
.who .meta { margin-left: auto; font-size: var(--t-note); color: var(--ink-faint);
             font-variant-numeric: tabular-nums; white-space: nowrap; }

.acts { margin: 3px 0 0 16px; }
.acts .a {
  font-family: var(--face-mono); font-size: var(--t-marg);
  color: var(--ink-faint); line-height: 1.6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80ch;
}
.acts .a b { font-weight: 400; color: var(--ink-muted); }
.acts .a.no, .acts .a.no b { color: var(--rubric); }

/* ---------------------------------------------------------------- a claim */

.claim {
  margin: 9px 0 2px 16px; padding: 10px 14px; max-width: 78ch;
  background: var(--paper-leaf); border-left: 2px solid var(--rule-strong);
}
.claim.trying { border-left-color: var(--ink); }
.claim.keep   { border-left-color: var(--ink); background: var(--paper-wash); }
.claim.out    { border-left-color: var(--rubric); }
.claim .t {
  font-size: var(--t-body); font-weight: 700; line-height: 1.35; display: inline;
  background-image: linear-gradient(var(--rubric), var(--rubric));
  background-repeat: no-repeat; background-size: 0% 1.5px; background-position: 0 64%;
}
.claim.out .t { background-size: 100% 1.5px; transition: background-size .34s ease-out;
                color: var(--ink-struck); }
.claim .where { font-family: var(--face-mono); font-size: var(--t-marg);
                color: var(--ink-muted); margin-top: 4px; }
.claim .sum { font-size: var(--t-sub); margin-top: 6px; }
.claim.out .sum, .claim.out .where { color: var(--ink-struck); }
.claim .repro {
  font-family: var(--face-mono); font-size: var(--t-marg); line-height: 1.6;
  color: var(--ink-muted); margin-top: 8px; padding-left: 11px;
  border-left: 1px solid var(--rule);
}

.verdict { display: flex; gap: 9px; align-items: baseline; padding-top: 6px; }
.verdict .n { font-size: var(--t-marg); color: var(--ink-faint); width: 2.3em; flex: 0 0 auto; }
.verdict .r { font-size: var(--t-sub); color: var(--ink-muted); max-width: 72ch; }
.verdict.kills .r { color: var(--ink); }
.verdict.kills .n { color: var(--rubric); }

.ruling { margin: 8px 0 4px 16px; font-size: var(--t-sub);
          display: flex; gap: 10px; align-items: baseline; }
.ruling .w { font-family: var(--face-display); font-style: italic; }
.ruling.out .w { color: var(--rubric); }
.ruling .c { font-size: var(--t-marg); color: var(--ink-faint); }

/* --------------------------------------------------------------- closing */

.closing { margin-top: 26px; padding: 16px 18px; background: var(--paper-leaf);
           max-width: 78ch; }
.closing h2 { font-family: var(--face-display); font-style: italic;
              font-size: var(--t-body); font-weight: 400; margin-bottom: 7px; }
.closing p { font-size: var(--t-sub); }
.closing .rows { margin-top: 11px; padding-top: 9px;
                 border-top: 1px solid var(--rule-hair);
                 font-size: var(--t-marg); color: var(--ink-muted); }
.closing .rows div { display: flex; gap: 16px; padding: 1px 0; }
.closing .rows span:last-child { margin-left: auto; }
.missed { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--rule-hair);
          font-size: var(--t-marg); color: var(--ink-muted); }
.missed b { color: var(--rubric); font-weight: 400; }

/* ---------------------------------------------------------------- ticker */

.ticker {
  border-top: 1px solid var(--rule); background: var(--paper);
  height: 40px; display: flex; align-items: center; gap: 16px; padding: 0 24px;
  font-size: var(--t-marg); color: var(--ink-muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.ticker .right { margin-left: auto; display: flex; gap: 16px; }
.ticker .dag { color: var(--rubric); }

.notice { border-left: 2px solid var(--rubric); padding-left: 11px;
          color: var(--rubric); font-size: var(--t-sub); margin: 10px 0; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  body { overflow: auto; }
  .split { grid-template-columns: 1fr; height: auto; }
  .talk { border-right: 0; border-bottom: 1px solid var(--rule); height: 62vh; }
  .work { height: auto; }
  .stage { overflow: visible; }
  .score { flex-wrap: wrap; gap: 14px; }
  .score .n b { font-size: var(--t-title); }
  .ticker { position: sticky; bottom: 0; }
}
@media (max-width: 620px) {
  :root { --t-huge: 1.75rem; --t-body: 1rem; --t-sub: .875rem; }
  .head .claim { display: none; }
  .head .in { height: 44px; }
}

/* ------------------------------------------------------------------ login */

.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.gate form { width: 100%; max-width: 380px; }
.gate .kicker { font-size: var(--t-note); letter-spacing: .1em;
                text-transform: uppercase; color: var(--ink-faint); }
.gate h1 { font-family: var(--face-display); font-size: var(--t-title);
           font-weight: 400; font-style: italic; margin: 6px 0 4px; }
.gate .sub { font-size: var(--t-sub); color: var(--ink-muted); }
.gate .field { margin-top: 18px; }
.gate label { display: block; font-size: var(--t-marg); color: var(--ink-muted);
              margin-bottom: 4px; }
.gate input { width: 100%; padding: 6px 0; background: transparent; border: 0;
              border-bottom: 1px solid var(--rule-strong);
              font-family: var(--face-mono); font-size: var(--t-sub); color: var(--ink); }
.gate input:focus { outline: none; border-bottom-color: var(--ink); border-bottom-width: 2px; }
.gate button.act {
  margin-top: 18px; padding: 8px 22px; font-family: var(--face-text);
  font-size: var(--t-sub); background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); cursor: pointer;
}
.gate button.act:hover { background: var(--ink); color: var(--paper); }
.gate .fine { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--rule-hair);
              font-size: var(--t-note); color: var(--ink-muted); line-height: 1.7; }