/* Light, instrument-panel look: hairline rules instead of shadows, monospace
   for anything the machine produced, and colour reserved for state. */

:root {
  --paper: #ffffff;
  --wash: #fafaf9;
  --wash-deep: #f5f5f4;
  --rule: #e7e5e4;
  --rule-firm: #d6d3d1;
  --ink: #1c1917;
  --ink-dim: #78716c;
  --ink-faint: #a8a29e;

  /* State colours. Amber = work to do, green = reused, indigo = restorable. */
  --gen: #c2410c;
  --gen-edge: #fdba74;
  --gen-wash: #fff7ed;
  --cached: #15803d;
  --cached-wash: #f0fdf4;
  --restore: #4338ca;
  --restore-wash: #eef2ff;
  --alarm: #b91c1c;
  --alarm-wash: #fef2f2;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;

  --header: 58px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Anything a machine emitted — ids, hashes, reasons, logs — is monospace.
   Prose the human wrote stays in the sans. */
.mono, td.what, td.why, td.mark, figcaption, #log, #status, .pill, .label,
.footnote { font-family: var(--mono); }

/* -- chrome ---------------------------------------------------------------- */

header {
  height: var(--header);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.brand {
  margin: 0;
  line-height: 0;
  flex: none;
}
/* Height-driven so the mark keeps its own proportions; the asset is 3x for
   retina. */
.brand img {
  height: 17px;
  width: auto;
  display: block;
}

nav { display: flex; gap: 4px; align-items: center; overflow-x: auto; }
nav a {
  padding: 3px 9px;
  border-radius: 4px;
  color: var(--ink-dim);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
}
nav a:hover { background: var(--wash-deep); color: var(--ink); }
nav a.on { background: var(--restore-wash); color: var(--restore); }

.rig { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.rig .model {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.rig .model b { color: var(--ink-dim); font-weight: 500; }

.pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.pill.live { background: var(--cached-wash); color: var(--cached); }
.pill.mock { background: var(--wash-deep); color: var(--ink-dim); }

/* -- two columns, each scrolling on its own ------------------------------- */

main {
  display: grid;
  grid-template-columns: minmax(380px, 5fr) minmax(400px, 6fr);
  height: calc(100% - var(--header));
}
.column { overflow-y: auto; padding: 18px 20px 60px; }
.column + .column { border-left: 1px solid var(--rule); background: var(--wash); }

@media (max-width: 960px) {
  main { grid-template-columns: 1fr; height: auto; }
  .column { overflow: visible; }
  .column + .column { border-left: 0; border-top: 1px solid var(--rule); }
}

/* -- section labels ------------------------------------------------------- */

.label, h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-dim);
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.label .sub, h2 .sub { color: var(--ink-faint); letter-spacing: 0.04em; }

/* -- editor --------------------------------------------------------------- */

.controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
button {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule-firm);
  border-radius: 5px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--wash-deep); }
button.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 500;
}
button.primary:hover:not(:disabled) { background: #000; }
button:disabled { opacity: 0.45; cursor: default; }

.controls label {
  color: var(--ink-dim);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
#status { font-size: 12px; color: var(--ink-faint); margin-left: 2px; }
#status.working { color: var(--gen); }

.footnote {
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

#log {
  margin: 14px 0 0;
  padding: 12px 14px;
  max-height: 260px;
  overflow: auto;
  background: var(--wash);
  border: 1px solid var(--rule);
  border-radius: 5px;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--ink-dim);
  white-space: pre-wrap;
}

/* -- panels --------------------------------------------------------------- */

.panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 15px 16px;
  margin-bottom: 14px;
}
.meta { color: var(--ink-dim); font-size: 12.5px; margin: 10px 0 0; }
.meta.stale { color: var(--gen); }
.noop { color: var(--cached); font-size: 13.5px; margin: 0; font-weight: 500; }

video {
  width: 100%;
  border-radius: 5px;
  background: #000;
  display: block;
  border: 1px solid var(--rule);
}

/* -- the plan table ------------------------------------------------------- */

table.plan { width: 100%; border-collapse: collapse; font-size: 12px; }
table.plan td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.plan tr:last-child td { border-bottom: 0; }
td.mark { width: 1.4em; font-weight: 700; }
td.what { white-space: nowrap; padding-right: 14px; }
td.why { color: var(--ink-faint); line-height: 1.5; }

tr.gen td.mark, tr.gen td.what { color: var(--gen); }
tr.gen { background: var(--gen-wash); }
tr.cached td.mark, tr.cached td.what { color: var(--cached); }
tr.restore td.mark, tr.restore td.what { color: var(--restore); }
tr.restore { background: var(--restore-wash); }

/* -- reference grids ------------------------------------------------------ */

.grid { display: grid; gap: 10px; margin-top: 12px; }
.grid.cells { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.grid.plates { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

figure { margin: 0; }
figure img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--rule-firm);
  display: block;
  background: var(--wash-deep);
}
.grid.plates figure img { aspect-ratio: auto; object-fit: contain; }
figure.stale img { opacity: 0.35; border-color: var(--gen-edge); }
.placeholder {
  aspect-ratio: 1;
  border: 1px dashed var(--rule-firm);
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
  background: var(--wash);
}
figcaption {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.45;
  color: var(--ink-dim);
  word-break: break-all;
}
figcaption .kind {
  display: block;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* -- diagnostics ---------------------------------------------------------- */

.diagnostics { border-color: var(--gen-edge); background: var(--gen-wash); }
.diagnostics ul { margin: 0; padding-left: 16px; font-size: 12.5px; }
.diagnostics li { margin-bottom: 4px; }
.diagnostics li.error { color: var(--alarm); }
.diagnostics li.warning { color: var(--gen); }
.diagnostics li b { font-family: var(--mono); font-weight: 500; }

a { color: var(--restore); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.pill.spent { background: var(--alarm-wash); color: var(--alarm); }

/* -- project picker -------------------------------------------------------- */

.picker { position: relative; }
.picker > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
  padding: 4px 10px;
  border: 1px solid var(--rule-firm);
  border-radius: 5px;
  color: var(--ink);
  white-space: nowrap;
}
.picker > summary::-webkit-details-marker { display: none; }
.picker > summary::after { content: " ▾"; color: var(--ink-faint); }
.picker > summary:hover { background: var(--wash-deep); }
.picker[open] > summary { background: var(--wash-deep); }

.picker .menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 20;
  min-width: 230px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--rule-firm);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgb(28 25 23 / 0.08);
}
.menu-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
  padding: 4px 8px 6px;
}
.picker .menu a {
  display: block;
  padding: 5px 8px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-dim);
  text-decoration: none;
}
.picker .menu a:hover { background: var(--wash-deep); color: var(--ink); }
.picker .menu a.on { background: var(--restore-wash); color: var(--restore); }

.menu-new {
  display: flex;
  gap: 5px;
  margin-top: 6px;
  padding-top: 7px;
  border-top: 1px solid var(--rule);
}
.menu-new input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--rule-firm);
  border-radius: 4px;
  color: var(--ink);
  background: var(--paper);
}
.menu-new input:focus { outline: none; border-color: var(--ink-faint); }
.menu-new button { padding: 4px 10px; font-size: 12px; }

/* -- editor: highlight layer under a transparent textarea ------------------ */

/* Every property here that affects glyph position must be identical on
   .highlight and on textarea, or the coloured copy drifts out of register with
   the text you are typing. They are declared together for that reason. */
.editor { position: relative; }

.editor .highlight,
.editor textarea {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: 0;
  tab-size: 2;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

.editor .highlight {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  border-color: var(--rule-firm);
  pointer-events: none;
}

.editor textarea {
  position: relative;
  display: block;
  width: 100%;
  min-height: 56vh;
  resize: vertical;
  background: transparent;
  color: transparent;
  caret-color: var(--ink);
  border-color: var(--rule-firm);
}
.editor textarea::selection { background: #dbeafe; color: transparent; }
.editor textarea:focus { outline: none; border-color: var(--ink-faint); }
.editor:focus-within .highlight { border-color: var(--ink-faint); }

/* Tokens. Muted enough to read as one document, distinct enough to scan:
   structure in violet, the cast in indigo, and transitions in red because a
   state change is the thing you came to the script to find. */
.t-comment { color: #a8a29e; font-style: italic; }
.t-kw      { color: #7c3aed; }
.t-name    { color: var(--ink); font-weight: 600; }
.t-kind    { color: #c2410c; }
.t-field   { color: #0e7490; }
.t-string  { color: #15803d; }
.t-ref     { color: #4338ca; font-weight: 500; }
.t-arrow   { color: #b91c1c; font-weight: 700; }

/* -- identity and read-only ------------------------------------------------ */

.signin {
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--rule-firm);
  border-radius: 5px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.signin:hover { background: var(--wash-deep); }
.picker.who > summary { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.picker.who .menu { left: auto; right: 0; }
.menu-note {
  padding: 7px 8px 4px;
  margin-top: 6px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--ink-dim);
}

.readonly {
  margin: 12px 0 0;
  padding: 11px 13px;
  background: var(--wash);
  border: 1px solid var(--rule);
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--ink-dim);
}
/* A read-only editor should look like a document, not a disabled input. */
.editor textarea[readonly] { cursor: default; }

/* -- sign-in and sharing --------------------------------------------------- */

.menu form.stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 2px 8px;
}
.menu form.stack input {
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--rule-firm);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}
.menu form.stack input:focus { outline: none; border-color: var(--ink-faint); }
.menu form.stack button { font-size: 12px; }
.picker.who .menu { min-width: 250px; }

.panel.share { margin-top: 14px; }
ul.shared { list-style: none; margin: 12px 0 0; padding: 0; }
ul.shared li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12.5px;
}
ul.shared li:last-child { border-bottom: 0; }
ul.shared li span { flex: 1; }
ul.shared button { padding: 2px 8px; font-size: 11.5px; }

/* -- agent access ---------------------------------------------------------- */

pre.endpoint {
  margin: 10px 0 0;
  padding: 9px 11px;
  background: var(--wash);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
  overflow-x: auto;
  white-space: pre;
  user-select: all;
}
pre.endpoint.secret { border-color: var(--gen-edge); background: var(--gen-wash); }
.meta.token-once { color: var(--gen); margin-bottom: 0; }

/* -- consent screen -------------------------------------------------------- */

main.single {
  display: block;
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 20px 60px;
  height: auto;
}
.panel.consent { padding: 22px 24px; }
.panel.consent .lede { font-size: 14.5px; margin: 0 0 14px; }
.panel.consent .stack { display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
.panel.consent .stack input {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 8px 10px;
  border: 1px solid var(--rule-firm);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}
.panel.consent .stack input:focus { outline: none; border-color: var(--ink-faint); }
ul.grants {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-dim);
}
ul.grants b { color: var(--gen); }

/* The reviewer hint under the sign-in form. Sized down and dimmed: it is a
   signpost for one visitor in a hundred, not a second call to action. */
.menu-note {
  margin: 10px 2px 2px;
  max-width: 240px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-dim);
}
.menu-note b { color: var(--ink); font-weight: 600; }