/* Tokens from the Stitch design system asset "Instrument"
   (LIGHT, seed #0F766E, Inter, ROUND_EIGHT) and its design.md rules:
   hairline borders, no decorative colour, colour only where it carries data. */
:root {
  --surface: #fbfbfa;
  --card: #ffffff;
  --hairline: #e4e6e3;
  --ink: #141614;
  --muted: #6b7069;
  --teal: #0f766e;
  --teal-soft: #e6f1ef;
  --indigo: #4338ca;
  --amber: #b45309;
  --amber-soft: #fdf3e6;
  --red: #b3262e;
  --scale-low: #f2efe4;
  --scale-high: #0f5132;
  --r-card: 12px;
  --r-control: 8px;
  --r-cell: 3px;
  --s: 8px;
}

* { box-sizing: border-box; }

/* The topbar is sticky, so anything the browser scrolls to itself — a focused
   control, a focused codon cell — otherwise lands underneath it and takes the
   header's clicks instead of its own. 64px clears the 57px bar plus a gap. */
html { scroll-padding-top: 64px; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 14px/1.5 Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

.mono, textarea, input.mono, .seq, .kv { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* --- chrome --- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--s));
  padding: calc(2 * var(--s)) calc(4 * var(--s));
  background: var(--card); border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 5;
}
.topbar h1 { font: 600 16px/1.4 Inter, sans-serif; margin: 0; }
.pills { display: flex; flex-wrap: wrap; gap: var(--s); }
.pill {
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 2px 10px; font-size: 12px; color: var(--muted); background: var(--surface);
}
.pill-state { background: var(--teal-soft); border-color: transparent; color: var(--teal); font-weight: 500; }

main { max-width: 1200px; margin: 0 auto; padding: calc(4 * var(--s)); }
section { margin-bottom: calc(4 * var(--s)); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--s)); margin-bottom: var(--s); }

.label {
  font: 600 11px/1.4 Inter, sans-serif; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 0 0 var(--s);
}
.sub { font-size: 12px; color: var(--muted); }
.error-text { font-size: 12px; color: var(--red); }

.card {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: calc(3 * var(--s)); margin-bottom: calc(2 * var(--s));
}
.card.failure { border-color: var(--red); }
.card.failure h2 { font: 600 16px/1.4 Inter, sans-serif; margin: 0 0 var(--s); color: var(--red); }

/* --- metrics --- */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(2 * var(--s)); }
.metrics.six { grid-template-columns: repeat(6, 1fr); }
.metric {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: calc(2 * var(--s)); display: flex; flex-direction: column; gap: 4px;
}
.metric .value { font: 600 24px/1.3 Inter, sans-serif; letter-spacing: -0.01em; }
.metric .unit { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 2px; }

/* --- form --- */
textarea, input[type="text"], input[type="number"] {
  width: 100%; background: var(--card); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-control);
  padding: var(--s); font-size: 13px; resize: vertical;
}
textarea { line-height: 1.6; }
textarea:focus, input:focus, .btn:focus-visible, .seg:focus-visible, .codon:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 1px;
}
.row { display: flex; align-items: center; gap: calc(2 * var(--s)); }
.row.between { justify-content: space-between; }
.row.actions { margin-top: calc(2 * var(--s)); }
.controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(2 * var(--s)); margin-top: calc(2 * var(--s)); }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.field.short { width: 140px; }
.field.grow { flex: 1 1 220px; }
.check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
details summary { cursor: pointer; font-size: 13px; color: var(--teal); }
.guide { font-size: 13px; }
.guide ol { margin: calc(2 * var(--s)) 0 0; padding-left: 18px; }
.guide li { margin-bottom: var(--s); }
.guide h3 { margin: calc(3 * var(--s)) 0 0; }
.guide dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px calc(2 * var(--s)); margin: var(--s) 0 0; }
.guide dt { font-weight: 500; }
.guide dd { margin: 0; color: var(--muted); }

.btn {
  border: 1px solid var(--hairline); background: var(--card); color: var(--ink);
  border-radius: var(--r-control); padding: 8px 14px; font: 500 13px Inter, sans-serif; cursor: pointer;
}
.btn:hover { background: var(--surface); }
.btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn.primary:hover { background: #0b5c56; }
.btn[disabled] { opacity: 0.5; cursor: default; }
.link { font-size: 13px; color: var(--teal); }

.segmented { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--r-control); overflow: hidden; }
.seg { border: 0; background: var(--card); padding: 8px 14px; font: 500 13px Inter, sans-serif; cursor: pointer; color: var(--muted); }
.seg + .seg { border-left: 1px solid var(--hairline); }
.seg[aria-checked="true"] { background: var(--teal-soft); color: var(--teal); }
.segmented.small .seg { padding: 4px 10px; font-size: 12px; }

/* --- codon track --- */
.legend { display: flex; align-items: center; gap: calc(2 * var(--s)); flex-wrap: wrap; margin-bottom: var(--s); font-size: 12px; color: var(--muted); }
.scale { width: 96px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--scale-low), var(--scale-high)); }
.key { display: inline-flex; align-items: center; gap: 6px; }
.key::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--hairline); }
.key.constraint::before { background: var(--amber); }
.key.objective::before { background: var(--indigo); }

.track { display: flex; flex-wrap: wrap; gap: 1px; }
.codon {
  width: 28px; height: 22px; border-radius: var(--r-cell);
  font: 500 10px/22px "JetBrains Mono", monospace; text-align: center;
  border: 0; border-bottom: 2px solid transparent; padding: 0; cursor: help;
  background: var(--scale-low); color: var(--ink);
}
.codon.dark { color: #f7faf8; }
.codon.changed-by-constraint { border-bottom-color: var(--amber); }
.codon.changed-by-objective { border-bottom-color: var(--indigo); }
.codon[aria-expanded="true"], .codon:hover { box-shadow: 0 0 0 1px var(--ink) inset; }
.track.by-change .codon { background: var(--scale-low); color: var(--ink); }
.track.by-change .codon.changed-by-constraint { background: var(--amber-soft); }
.track.by-change .codon.changed-by-objective { background: #eceafc; }

.tooltip {
  position: absolute; width: 260px; background: var(--card);
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  box-shadow: 0 12px 24px rgba(20, 22, 20, 0.1);
  padding: calc(1.5 * var(--s)); font-size: 12px; z-index: 10; pointer-events: none;
}
.tooltip dl { display: grid; grid-template-columns: auto 1fr; gap: 2px calc(1.5 * var(--s)); margin: 0; }
.tooltip dt { color: var(--muted); }
.tooltip dd { margin: 0; font-family: "JetBrains Mono", monospace; }
.tooltip .detail { margin: var(--s) 0 0; color: var(--muted); }

/* --- sequence, lists --- */
.seq { margin: 0; font-size: 13px; line-height: 1.8; white-space: pre-wrap; word-break: break-all; }
.seq .pos { color: var(--muted); }
.rules { list-style: none; margin: 0 0 var(--s); padding: 0; }
.rules li { display: flex; gap: calc(1.5 * var(--s)); padding: 4px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; }
.rules li:last-child { border-bottom: 0; }
.rules .coord { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--muted); white-space: nowrap; }
.rules .flag { color: var(--amber); font-weight: 500; }
.rules li.empty { color: var(--muted); font-size: 12px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: calc(2 * var(--s)); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px calc(2 * var(--s)); margin: var(--s) 0 0; font-size: 12px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

footer { color: var(--muted); font-size: 12px; border-top: 1px solid var(--hairline); padding-top: calc(2 * var(--s)); }

@media (max-width: 900px) {
  .metrics, .metrics.six, .two { grid-template-columns: repeat(2, 1fr); }
  .guide dl { grid-template-columns: 1fr; gap: 2px; }
  .guide dd { margin-bottom: var(--s); }
  main { padding: calc(2 * var(--s)); }
}