/* Pyxis TDD questionnaire.
   Palette carried over from the Pyxis deck so the form and the deliverable look like one
   product to the respondent. */

:root {
  --navy: #0e2238;
  --slate: #1c3a5c;
  --pyxis: #018bd9;
  --pyxis-dark: #0166a3;
  --paper: #f6f7f9;
  --ink: #1a1a1a;
  --muted: #6c7a89;
  --rule: #d6dde4;
  --ok: #2c6e5f;
  --ok-bg: #e8f2ef;
  --warn: #8a6d1f;
  --warn-bg: #f7f1e0;
  --crit: #a83232;
  --crit-bg: #f7e9e9;
  --skip: #eef2f6;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", Times, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.55;
}

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

header {
  background: var(--navy);
  color: #fff;
  padding: 12px 24px;
  display: flex;
  /* center, not baseline. An <img> has no text baseline, so under baseline alignment its
     BOTTOM edge sits on the text baseline and the logo rides visibly high against the target
     name beside it. */
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}
/* 40px. The tagline sits in the bottom ~18% of the artwork, so at 30px it renders about
   5px tall and reads as noise; at 40px it is legible. The header is sized to the logo. */
header img.brand { height: 40px; width: auto; display: block; flex: none; }
header .target { font-family: var(--serif); font-size: 17px; }
header .who { margin-left: auto; color: #9fb3c8; font-size: 13px; }

.bar { height: 4px; background: var(--rule); }
.bar > span { display: block; height: 100%; background: var(--pyxis); transition: width 0.3s; }

.layout { display: grid; grid-template-columns: 300px 1fr; gap: 0; align-items: start; }
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } nav { position: static !important; } }

/* --------------------------------------------------------------------- nav */

nav {
  position: sticky;
  top: 68px;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
  padding: 16px 0 40px;
  border-right: 1px solid var(--rule);
  background: #fff;
}
nav button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 7px 20px; cursor: pointer; font: inherit; color: var(--ink);
  border-left: 3px solid transparent;
}
nav button:hover { background: var(--paper); }
nav button[aria-current="true"] { background: #eaf4fb; border-left-color: var(--pyxis); font-weight: 600; }

/* Group heading — collapsible. Eleven of these replace a wall of 81 rows. */
nav button.group {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px 8px; margin-top: 4px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  border-top: 1px solid var(--rule);
}
nav button.group:first-child { border-top: 0; margin-top: 0; }
nav button.group .caret { width: 10px; font-size: 9px; color: var(--muted); }
nav button.group .gname { flex: 1; }
nav button.group .c { font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
nav button.group .c.done { color: var(--ok); }
nav button.group.open { color: var(--navy); }
nav button.sec { padding-left: 32px; }
nav .row { display: flex; gap: 8px; align-items: baseline; }
nav .row .n { flex: 1; }
nav .row .c { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
nav .done .c { color: var(--ok); }
nav .na { color: var(--muted); font-style: italic; }

/* ------------------------------------------------------------------- main */

main { padding: 28px 40px 120px; max-width: 820px; }
h1 { font-family: var(--serif); font-size: 24px; margin: 0 0 4px; color: var(--navy); }
.sub { color: var(--muted); margin: 0 0 24px; font-size: 14px; }

.q { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.q.hidden { display: none; }
.q .id { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.q .text { font-weight: 600; margin: 2px 0 6px; }
.q .help { color: var(--muted); font-size: 13.5px; margin: 0 0 10px; }
.q .req { color: #a83232; margin-left: 4px; }

input[type="text"], input[type="number"], input[type="date"], textarea, select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 3px;
  font: inherit; background: #fff; color: var(--ink);
}
textarea { min-height: 88px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--pyxis); outline-offset: -1px; border-color: var(--pyxis); }
.unit { display: flex; align-items: center; gap: 8px; }
.unit .u { color: var(--muted); font-size: 13px; white-space: nowrap; }

.choices { display: flex; flex-direction: column; gap: 6px; }
.choices.inline { flex-direction: row; gap: 18px; }
.choices label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.choices input { margin-top: 3px; }

.na-row { margin-top: 10px; }
.na-row label { display: inline-flex; gap: 7px; align-items: center; color: var(--muted); font-size: 13.5px; cursor: pointer; }
.q.is-na .text { color: var(--muted); }
/* Visual only. The controls carry the real `disabled` attribute — pointer-events does not
   block keyboard entry, so styling alone left mouse and keyboard disagreeing about whether
   the field was live. */
.q.is-na .field { opacity: 0.45; }

/* A write that did not land. Persistent, not a flash: the respondent has to be able to see it
   after they have looked away, because the alternative is an answer silently discarded. */
.q.has-error { background: #fdf8f8; }
.save-error {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 3px;
  font-size: 13px; color: var(--crit); background: var(--crit-bg);
  border-left: 3px solid var(--crit);
}

/* Repeating groups. Up to four columns reads as a grid; beyond that a horizontal table is
   unusable below desktop width, so each row becomes its own labeled card. 2.7 has eleven. */
.tbl { margin-top: 4px; }
.tbl .trow { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr) 32px; gap: 8px; align-items: start; margin-bottom: 8px; }
.tbl .thead { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.tbl .thead .tcell { padding-bottom: 2px; }
.tbl.grid .trow { grid-template-columns: 2fr 1fr 2fr 32px; }

.tcard { border: 1px solid var(--rule); border-radius: 3px; padding: 12px 14px; margin-bottom: 10px; background: #fff; position: relative; }
.tcard-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; }
.tcard .tcell { margin-bottom: 8px; }
.tcard .tlabel { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.tcard-del { position: absolute; top: 8px; right: 8px; }

.tdel-btn { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 3px; }
.tdel-btn:hover { background: var(--crit-bg); color: var(--crit); }
.tadd { border: 1px dashed var(--rule); background: none; color: var(--pyxis-dark); padding: 8px 14px; border-radius: 3px; font: inherit; cursor: pointer; }
.tadd:hover { border-color: var(--pyxis); background: #eaf4fb; }
.tmulti { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.tmulti label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }

@media (max-width: 860px) {
  .tbl.grid .trow { grid-template-columns: 1fr; }
  .tbl .thead { display: none; }
}

.artifact-note {
  font-size: 12.5px; color: var(--slate); background: #eaf4fb;
  padding: 8px 10px; border-radius: 3px; margin-top: 8px;
}

.saved { font-size: 12px; color: var(--ok); margin-left: 8px; opacity: 0; transition: opacity 0.2s; }
.saved.show { opacity: 1; }

/* ------------------------------------------------------------------ notices */

.notice {
  background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--pyxis);
  padding: 16px 18px; margin-bottom: 26px; border-radius: 3px;
}
.notice h2 { font-size: 14px; margin: 0 0 6px; color: var(--navy); }
.notice p { margin: 0 0 6px; font-size: 13.5px; color: var(--slate); }
.notice p:last-child { margin: 0; }

/* The notice carries seven points, grouped under two labels. Same 13.5px/--slate as .notice p
   so the blocks read as one notice rather than a second component. */
.notice h3 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600; margin: 14px 0 6px;
}
.notice ul { margin: 0; padding-left: 18px; }
.notice li { font-size: 13.5px; color: var(--slate); margin: 0 0 6px; }
.notice li:last-child { margin-bottom: 0; }
.notice li strong { color: var(--navy); font-weight: 600; }

.skipped { background: var(--skip); color: var(--muted); padding: 12px 14px; border-radius: 3px; font-size: 13.5px; }

.gate { text-align: center; margin: 18vh auto; max-width: 460px; padding: 0 24px; }
.gate h1 { font-size: 20px; }
.gate p { color: var(--muted); }

footer { padding: 20px 0 0; display: flex; gap: 12px; align-items: center; }
button.primary {
  background: var(--pyxis); color: #fff; border: 0; padding: 10px 20px;
  border-radius: 3px; font: inherit; font-weight: 600; cursor: pointer;
}
button.primary:hover { background: var(--pyxis-dark); }
button.primary:disabled { background: var(--rule); color: var(--muted); cursor: not-allowed; }
button.ghost { background: none; border: 1px solid var(--rule); padding: 10px 18px; border-radius: 3px; font: inherit; cursor: pointer; }

/* Free text behind an "Other" selection. A bare "Other" is uninterpretable: it tells
   reconciliation nothing and can be checked against nothing in the code. */
.other-wrap { margin-top: 8px; padding-left: 22px; }
.other-wrap[hidden] { display: none; }
.other-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.other-input { max-width: 460px; }

/* ------------------------------------------------------- header completion */

.hprog { display: flex; align-items: baseline; gap: 10px; margin-left: 18px; font-variant-numeric: tabular-nums; }
.hprog .hnum { font-size: 13px; color: #9fb3c8; }
.hprog .hpct { font-size: 15px; font-weight: 700; color: #fff; }
.hprog .hreq { font-size: 12px; color: #e2c88a; }

/* Thicker and darker than the original 4px of #d6dde4 on #f6f7f9, which was 2.69:1 against
   its track — below the 3:1 minimum for non-text UI, and invisible in practice. */
.bar { height: 7px; background: #c3ccd6; }
.bar > span { background: var(--pyxis-dark); }

/* ----------------------------------------------------------------- review */

nav button.sec.review { margin-top: 6px; border-top: 1px solid var(--rule); padding-top: 12px; font-weight: 600; }
nav button.sec.review.ready .c { color: var(--ok); font-weight: 700; }

.notice.warn { border-left-color: var(--warn); }
.notice.ok { border-left-color: var(--ok); background: var(--ok-bg); }

.outstanding { margin-top: 10px; max-height: 320px; overflow-y: auto; }
button.jump {
  display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--rule); background: none;
  padding: 7px 2px; font: inherit; cursor: pointer;
}
button.jump:hover { background: var(--warn-bg); }
button.jump .jid { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 62px; }
button.jump .jtext { flex: 1; font-size: 13.5px; }
button.jump .jsec { font-size: 11px; color: var(--muted); }

.rev-sec { margin: 26px 0; }
.rev-h { font-family: var(--serif); font-size: 16px; color: var(--navy); border-bottom: 1px solid var(--rule); padding-bottom: 6px; margin: 0 0 10px; }
.rev-q { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 8px 0; border-bottom: 1px solid #eef2f6; }
.rev-qt { font-size: 13.5px; color: var(--slate); }
.rev-a { font-size: 13.5px; white-space: pre-wrap; }
.rev-q.unanswered .rev-a { color: var(--crit); }
.rev-a .missing { color: var(--crit); font-style: italic; }
.rev-other { color: var(--slate); font-size: 13px; margin-top: 2px; }
.rev-count { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.rev-row { font-size: 12.5px; padding: 3px 0 3px 10px; border-left: 2px solid var(--rule); margin-top: 4px; }

.attest { border: 1px solid var(--rule); border-radius: 3px; padding: 20px 22px; margin: 30px 0 0; background: #fff; }
.attest h2 { font-family: var(--serif); font-size: 17px; color: var(--navy); margin: 0 0 8px; }
.attest p { font-size: 13.5px; color: var(--slate); margin: 0 0 14px; }
.attest-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.attest input { max-width: 380px; }
.attest-actions { display: flex; gap: 10px; margin-top: 16px; }

/* --------------------------------------------------------------- printing */
/* The review view is the downloadable copy — browser print-to-PDF, no PDF library. */

@media print {
  header, nav, .bar, footer, .attest-actions, .outstanding, .tadd, .tdel-btn { display: none !important; }
  .layout { display: block; }
  main { max-width: none; padding: 0; }
  body { font-size: 11pt; background: #fff; }
  .rev-sec { page-break-inside: avoid; }
  .rev-q { page-break-inside: avoid; grid-template-columns: 1fr 1fr; }
  .notice, .attest { border: 1px solid #999; }
  a[href]:after { content: ""; }
}