/* Trait Bench (traitbench.com).
 *
 * Impilo design system, from docs/design/impilo-tokens/. Two deliberate
 * deviations, both recorded in that directory's SOURCE.md:
 *
 *   1. Plus Jakarta Sans instead of Gilroy, which is commercially licensed and
 *      cannot be used as a webfont here. Weights 500 and 600 only, per the
 *      system's own rule that the typeface speaks in exactly two weights.
 *   2. Exactly ONE added colour, --color-amber-flag, because the palette
 *      assumes high equals healthy and PID-5 is inverted. Do not add a second.
 *
 * Screen is the dark Deep Iris canvas. Print is the system's own light
 * inversion and lives in print.css.
 */

:root {
  --color-deep-iris: #16165c;
  --color-iris-shadow: #232269;
  --color-iris-glow: #403cd5;
  --color-iris-pulse: #5350cc;
  --color-iris-border: #4846c6;
  --color-lilac-mist: #b1a6f6;
  --color-clinical-cyan: #00b1ff;
  --color-mint-vital: #00ffaa;
  --color-cloud-white: #ffffff;
  --color-pearl: #f4f4f6;
  --color-ash: #d8d8e3;

  /* The one sanctioned extension. Elevated and Clinically Significant. */
  --color-amber-flag: #ffb020;

  --font-stack: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
                BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;

  --radius-cards: 24px;
  --radius-cards-elevated: 32px;
  --radius-inputs: 16px;
  --radius-buttons: 9999px;
  --radius-tags: 9999px;
  --radius-icons: 7px;

  --page-max-width: 1200px;
  --card-padding: 24px;

  /* Muted text is a dimmed Pearl, not Lilac Mist: the system locks Lilac Mist
   * to line art and explicitly forbids it as text. */
  --text-muted: #a9a8d6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-deep-iris);
  color: var(--color-pearl);
  font-family: var(--font-stack);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.44;
  letter-spacing: 0.01em;
}

a { color: var(--color-clinical-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-weight: 600; margin: 0 0 var(--spacing-12); }
h1 { font-size: 46px; line-height: 1; letter-spacing: -1.84px; }
h2 { font-size: 24px; letter-spacing: -0.72px; }
h3 { font-size: 18px; letter-spacing: -0.54px; }

body { min-height: 100vh; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: var(--page-max-width); margin: 0 auto; padding: var(--spacing-32) var(--spacing-24) 80px; flex: 1; }
.site-foot { margin-top: auto; }

/* ---- the de-identification banner: on every screen, never dismissible ----
 *
 * Ash, a palette neutral, rather than the amber it shipped in. Two reasons and
 * the second one is the real one. It reads as a system notice instead of
 * shouting over the hero, and amber in this tool is LOCKED to Elevated and
 * Clinically Significant, so a permanent amber strip above every page spent the
 * one warning colour on a banner that is true on every screen and therefore
 * carries no signal. The printed sheets keep amber: on white paper it is the
 * thing that says what a filed page is.
 */
.deid-bar {
  background: var(--color-ash);
  color: var(--color-deep-iris);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 10px var(--spacing-16);
}

/* ---- nav ---- */
.topbar {
  display: flex; align-items: center; gap: var(--spacing-16);
  width: 100%; max-width: var(--page-max-width); margin: 0 auto;
  padding: var(--spacing-16) var(--spacing-24);
}
.topbar .brand { font-weight: 600; font-size: 18px; letter-spacing: -0.54px; }
.topbar .spacer { flex: 1; }
/* The menu is pills, per the system: pill geometry on every button, and the
   menu items ARE buttons. */
.topbar .menu { display: flex; flex-wrap: wrap; gap: var(--spacing-8); justify-content: flex-end; }

/* ---- cards ---- */
.card {
  background: var(--color-iris-shadow);
  border: 1px solid var(--color-iris-border);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  margin-bottom: var(--spacing-24);
}
.card.elevated { border-radius: var(--radius-cards-elevated); }
.card.metric { background: var(--color-iris-glow); }

.grid { display: grid; gap: var(--spacing-16); }
.grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) { .grid.two { grid-template-columns: 1fr; } }

/* ---- buttons: pill geometry is non-negotiable in this system ---- */
.btn {
  display: inline-block;
  font: inherit; font-weight: 600; font-size: 15px;
  border-radius: var(--radius-buttons);
  padding: 12px var(--spacing-24);
  border: 1px solid var(--color-pearl);
  background: transparent; color: var(--color-pearl);
  cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; border-color: var(--color-clinical-cyan); }
.btn.primary {
  background: var(--color-iris-pulse);
  border-color: var(--color-iris-pulse);
  color: var(--color-cloud-white);
  box-shadow: 0 0 20px rgba(60, 57, 185, 0.4);
}
.btn.small { padding: 7px var(--spacing-16); font-size: 13px; }
.btn.danger { border-color: var(--color-amber-flag); color: var(--color-amber-flag); }

/* ---- inputs ---- */
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
input[type=text], textarea, select {
  font: inherit; font-weight: 500; font-size: 16px;
  width: 100%;
  border-radius: var(--radius-inputs);
  border: 1px solid var(--color-iris-border);
  background: var(--color-deep-iris);
  color: var(--color-pearl);
  padding: 12px var(--spacing-16);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--color-clinical-cyan); outline-offset: 1px;
}
.field { margin-bottom: var(--spacing-16); }

/* ---- tags and band chips ---- */
.tag {
  display: inline-block; border-radius: var(--radius-tags);
  padding: 4px 12px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--color-iris-border); color: var(--color-pearl);
}
.band {
  display: inline-block; border-radius: var(--radius-tags);
  padding: 3px 11px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.03em; color: var(--color-deep-iris);
}
.band.wnl { background: var(--color-mint-vital); }
.band.elev, .band.clin { background: var(--color-amber-flag); }
.band.none {
  background: transparent; color: var(--text-muted);
  border: 1px dashed var(--color-iris-border);
}

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 0 var(--spacing-12) var(--spacing-8); border-bottom: 1px solid var(--color-iris-border);
}
td { padding: 10px var(--spacing-12); border-bottom: 1px solid rgba(72, 70, 198, 0.4); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Numeric headers stay on one line: "Norm M" wrapping to "NORM / M"
   reads as sloppy on a document a clinician files. */
th.num { text-align: right; white-space: nowrap; }
tr.suppressed td { color: var(--text-muted); font-style: italic; }

.muted { color: var(--text-muted); }
.small { font-size: 13px; }
.tiny { font-size: 11.5px; line-height: 1.5; }

/* ---- item administration ---- */
.item { border-bottom: 1px solid rgba(72, 70, 198, 0.4); padding: var(--spacing-16) 0; }
.item:last-child { border-bottom: none; }
.item .stem { display: flex; gap: var(--spacing-12); margin-bottom: var(--spacing-12); }
.item .n {
  font-weight: 600; color: var(--text-muted); min-width: 34px;
  font-variant-numeric: tabular-nums;
}
.options { display: flex; flex-wrap: wrap; gap: var(--spacing-8); padding-left: 46px; }
.options label {
  margin: 0; font-weight: 500; font-size: 13px; cursor: pointer;
  border: 1px solid var(--color-iris-border); border-radius: var(--radius-tags);
  padding: 7px 14px;
}
.options input { position: absolute; opacity: 0; width: 0; height: 0; }
.options input:checked + span { color: var(--color-cloud-white); }
.options label:has(input:checked) {
  background: var(--color-iris-pulse); border-color: var(--color-iris-pulse);
}
.options label:has(input:focus-visible) { outline: 2px solid var(--color-clinical-cyan); }

/* ---- paper entry grid ---- */
.entry-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--spacing-8);
}
.entry-cell { display: flex; align-items: center; gap: 6px; }
.entry-cell .n {
  font-size: 12px; color: var(--text-muted); min-width: 28px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.entry-cell input {
  width: 46px; padding: 6px; text-align: center; border-radius: var(--radius-icons);
  font-variant-numeric: tabular-nums;
}
.entry-cell input.filled { border-color: var(--color-clinical-cyan); }

/* ---- progress ---- */
.progress { height: 6px; border-radius: 3px; background: #2f2e7e; overflow: hidden; }
.progress > div { height: 100%; background: var(--color-clinical-cyan); }

.savestate {
  font-size: 12px; color: var(--text-muted); min-height: 18px;
}

.chart { overflow-x: auto; }
.chart svg { display: block; max-width: 100%; height: auto; border-radius: var(--radius-icons); }

.err {
  background: var(--color-amber-flag); color: var(--color-deep-iris);
  border-radius: var(--radius-inputs); padding: 10px var(--spacing-16);
  font-size: 14px; font-weight: 600;
}

.callout {
  border: 1px solid var(--color-iris-border); border-left: 3px solid var(--color-amber-flag);
  border-radius: var(--radius-icons); padding: var(--spacing-16);
  font-size: 13px; line-height: 1.55; color: var(--text-muted);
}

/* ---- the public home page ------------------------------------------------
 *
 * The one page anybody sees first, so it carries the whole system:
 * full-bleed Deep Iris bands, a split hero with the line art on the left third,
 * ONE dotted word-highlight, and a hard cut to the Pearl inversion with no
 * gradient between them. It reads no visitor's cookie, ever.
 */
.site-nav { border-bottom: 1px solid rgba(72, 70, 198, 0.45); }
.site-nav-inner {
  max-width: var(--page-max-width); margin: 0 auto;
  padding: var(--spacing-16) var(--spacing-24);
  display: flex; align-items: center; gap: var(--spacing-24);
}
.brand-mark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--color-pearl); font-weight: 600; font-size: 18px;
  letter-spacing: -0.54px; text-decoration: none;
}
.brand-mark:hover { text-decoration: none; color: var(--color-cloud-white); }
.site-nav-links { flex: 1; display: flex; gap: var(--spacing-24); }
.site-nav-links a {
  color: var(--color-pearl); font-size: 15px; text-decoration: none;
}
.site-nav-links a:hover { color: var(--color-clinical-cyan); text-decoration: none; }

.hero { padding: 64px 0 56px; }
.hero-inner {
  max-width: var(--page-max-width); margin: 0 auto;
  padding: 0 var(--spacing-24);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--spacing-48); align-items: center;
}
.lineart { max-width: 260px; }
.lineart svg { display: block; width: 100%; height: auto; }

.eyebrow {
  display: inline-block; margin: 0 0 var(--spacing-16);
  border: 1px solid var(--color-iris-border); border-radius: var(--radius-tags);
  padding: 5px 14px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}

/* The system's display step, with its signature negative tracking. It steps
 * down twice below so the headline never wraps into a single word on a phone. */
.display {
  font-size: 54px; line-height: 1.02; letter-spacing: -2.16px;
  margin: 0 0 var(--spacing-24); color: var(--color-cloud-white);
}
/* The dotted word-highlight. One per page, and this is it. */
.boxed {
  border: 1px dashed var(--color-clinical-cyan);
  border-radius: var(--radius-icons);
  padding: 0 10px 3px; white-space: nowrap;
}

.lede { font-size: 17px; color: var(--color-pearl); max-width: 62ch; margin: 0 0 var(--spacing-24); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--spacing-12); }
.hero-foot { margin: var(--spacing-16) 0 0; max-width: 56ch; }

.strip { padding: 72px 0; }
.strip.tinted { background: var(--color-iris-shadow); }
.strip-inner { max-width: var(--page-max-width); margin: 0 auto; padding: 0 var(--spacing-24); }
.strip-inner.split {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--spacing-48); align-items: center;
}
.section-head { font-size: 34px; letter-spacing: -1.2px; margin-bottom: var(--spacing-24); }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-24); }
.feature { margin-bottom: 0; }
.feature h3 { margin-bottom: var(--spacing-8); }
.feature p { font-size: 15px; color: var(--text-muted); margin: 0; }
.feature-step {
  display: inline-block; margin-bottom: var(--spacing-12);
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--color-clinical-cyan);
}

.paste-demo { margin-bottom: 0; background: var(--color-iris-glow); }
.snippet {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.7; margin: var(--spacing-8) 0 var(--spacing-16);
  padding: var(--spacing-16); border-radius: var(--radius-icons);
  background: rgba(22, 22, 92, 0.55); color: var(--color-pearl);
  overflow-x: auto;
}
.chip {
  display: inline-block; border-radius: var(--radius-tags); padding: 3px 10px;
  font-size: 11px; font-weight: 600; margin-right: 6px;
  border: 1px solid var(--color-iris-border); color: var(--text-muted);
}
.chip.ok { background: var(--color-mint-vital); color: var(--color-deep-iris); border-color: transparent; }
.chip.warn { background: var(--color-amber-flag); color: var(--color-deep-iris); border-color: transparent; }

/* The hard cut to the light inversion. No gradient: the system is explicit. */
.invert { background: var(--color-pearl); color: var(--color-deep-iris); padding: 80px 0; }
.invert-head { font-size: 34px; letter-spacing: -1.2px; margin-bottom: var(--spacing-8); color: var(--color-deep-iris); }
.invert-lede { font-size: 17px; max-width: 58ch; margin: 0 0 var(--spacing-48); color: #4a4a68; }
.limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-32); }
.limit h3 { color: var(--color-deep-iris); margin-bottom: var(--spacing-8); }
.limit p { font-size: 15px; color: #4a4a68; margin: 0; }

.badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-24); margin-top: var(--spacing-48); }
.badge-frame {
  display: flex; gap: var(--spacing-16); align-items: flex-start;
  border: 1px solid var(--color-ash); border-radius: var(--radius-icons);
  padding: var(--spacing-16) var(--spacing-24); background: var(--color-cloud-white);
  color: var(--color-deep-iris);
}
.badge-frame strong { display: block; font-size: 15px; margin-bottom: 4px; }
.badge-frame span { font-size: 13px; line-height: 1.5; color: #4a4a68; }

.closer { padding: 80px 0; text-align: center; }
.closer .lede { margin-left: auto; margin-right: auto; }
.closer .hero-cta { justify-content: center; }

.site-foot { background: var(--color-iris-glow); padding: var(--spacing-24) 0; }
.site-foot-inner { display: flex; flex-wrap: wrap; gap: var(--spacing-16); align-items: center; justify-content: space-between; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .lineart { display: none; }
  .strip-inner.split { grid-template-columns: 1fr; }
  .features, .limits, .badges { grid-template-columns: 1fr; }
  .display { font-size: 40px; letter-spacing: -1.4px; }
  .site-nav-links { display: none; }
}
@media (max-width: 560px) {
  .display { font-size: 32px; letter-spacing: -1px; }
  .section-head, .invert-head { font-size: 26px; letter-spacing: -0.8px; }
  .hero { padding: 48px 0 56px; }
  .strip, .invert, .closer { padding: 56px 0; }
}

/* ---- paste entry ---------------------------------------------------------
 *
 * A <details> so the grid below stays the default way in. The panel is opened
 * automatically right after an import, because that is when the clinician wants
 * to see what just happened.
 */
.paste-panel summary { cursor: pointer; list-style: none; }
.paste-panel summary::-webkit-details-marker { display: none; }
.paste-panel summary::before { content: "\25B8  "; color: var(--color-clinical-cyan); }
.paste-panel[open] summary::before { content: "\25BE  "; }
.paste-panel summary span { display: block; margin: 4px 0 0 18px; font-weight: 500; }
.paste-panel > *:not(summary) { margin-top: var(--spacing-16); }
.paste-steps { margin: var(--spacing-16) 0; padding-left: 20px; }
.paste-steps li { margin-bottom: 4px; }
.paste-panel textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.6; resize: vertical;
}
.paste-panel textarea[readonly] { color: var(--text-muted); }
.paste-panel .btn.small { margin-top: var(--spacing-8); }

.notice {
  background: var(--color-mint-vital); color: var(--color-deep-iris);
  border-radius: var(--radius-inputs); padding: 10px var(--spacing-16);
  font-size: 14px; font-weight: 600;
}

/* ---- the browser-held bench ------------------------------------------------
 *
 * Two small additions for the stateless version: an inline code chip for case
 * codes and cookie names, and a prose measure for the privacy page, which is
 * the one page on the site that is mostly paragraphs.
 */
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em; letter-spacing: 0.02em;
  padding: 1px 6px; border-radius: var(--radius-icons);
  background: rgba(22, 22, 92, 0.55); border: 1px solid var(--color-iris-border);
}
.invert .code, .badge-frame .code { background: var(--color-cloud-white); border-color: var(--color-ash); }

.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--spacing-48); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--color-pearl); font-size: 16px; line-height: 1.6; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: var(--spacing-12); }

input[type=file] {
  display: block; width: 100%; font: inherit; font-size: 14px; color: var(--text-muted);
  padding: 10px var(--spacing-16); border-radius: var(--radius-inputs);
  border: 1px dashed var(--color-iris-border); background: var(--color-deep-iris);
}
input[type=file]::file-selector-button {
  font: inherit; font-weight: 600; font-size: 13px; margin-right: var(--spacing-12);
  border-radius: var(--radius-buttons); padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--color-pearl); background: transparent; color: var(--color-pearl);
}