/* Lab chrome. INFRASTRUCTURE ONLY.

   This file styles index.html and harness.html. No study loads it, and no
   study may. The thesis is that the era had no shared design layer, so
   factoring a common panel style across two studies would quietly invent 2014
   and stop the lab studying 2001. Captions are therefore drawn AROUND a study
   by the index, never injected into it. A study stays a whole page that owns
   everything about itself. */

:root {
  --bg:     #101215;
  --panel:  #191d22;
  --raise:  #21262d;
  --rule:   #2b323a;
  --dim:    #78889a;
  --text:   #b9c6d2;
  --bright: #ffffff;
  --accent: #35c8e8;
  --survives:  #57d68a;
  --artifact:  #e2604f;
  --contested: #e0a03c;
  /* ABSORBED shipped without a colour and fell back to --dim, so the one
     verdict about a technique winning read as the greyest thing on the sheet.
     Fixed here alongside REVOKED rather than left as a second oversight. */
  --absorbed:  #6fb7d8;
  --revoked:   #b57ad8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 80px;
  background: var(--bg);
  color: var(--text);
  font: 400 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.wrap { width: 1180px; max-width: calc(100% - 48px); margin: 0 auto; }

.lab-head { padding: 30px 0 16px; border-bottom: 1px solid var(--rule); }
.lab-head h1 {
  margin: 0 0 6px;
  font-family: 'Silkscreen', monospace; font-weight: 700;
  font-size: 16px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bright);
}
.lab-head .thesis { margin: 0; max-width: 76ch; color: var(--dim); }
.lab-head .thesis b { color: var(--text); font-weight: 400; }
.lab-head nav { margin-top: 14px; display: flex; gap: 16px; }
.lab-head nav a { color: var(--dim); text-decoration: none; border-bottom: 1px solid transparent; }
.lab-head nav a:hover, .lab-head nav a[aria-current] { color: var(--accent); border-color: var(--accent); }

.tag {
  display: inline-block; padding: 2px 7px;
  font-family: 'Silkscreen', monospace; font-size: 8px;
  letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--rule); color: var(--dim);
}
.tag.v-survives  { color: var(--survives);  border-color: var(--survives); }
.tag.v-artifact  { color: var(--artifact);  border-color: var(--artifact); }
.tag.v-contested { color: var(--contested); border-color: var(--contested); }
.tag.v-absorbed  { color: var(--absorbed);  border-color: var(--absorbed); }
.tag.v-revoked   { color: var(--revoked);   border-color: var(--revoked); }

.filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 0; }
.filters button {
  padding: 5px 9px; background: transparent; color: var(--dim);
  border: 1px solid var(--rule);
  font-family: 'Silkscreen', monospace; font-size: 8px;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.filters button[aria-pressed="true"] { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.filters button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.filters .sep { width: 1px; background: var(--rule); margin: 0 6px; }

/* ------------------------------------------------------------------ footer */
/* Mirrors .lab-head: one rule, dim type. The credits link is the reason this
   exists, since the attribution has to be reachable from the published site
   and not only from a repo that stays private. */
.lab-foot {
  margin-top: 56px; padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--dim); font-size: 12px;
}
.lab-foot p { margin: 0 0 5px; }
.lab-foot a { color: var(--dim); text-decoration: none; border-bottom: 1px solid transparent; }
.lab-foot a:hover { color: var(--accent); border-color: var(--accent); }