/* talk.css — THE LAB REGISTER, as a form to fill in.
   Serves BOTH public pages: /talk (the short one) and /intake (the long one),
   which is why nothing below is named for either. Same palette, faces and
   hairlines as templates/site.css and public/admin/admin.css — hexes copied
   verbatim from lib/tokens.mjs — so somebody who has seen ctlab.fit recognises
   this as the same lab, not a form service bolted on the side.

   Every text pair here clears 4.5:1 and every control edge clears 3:1 on white.
   The reader is a professor with ten minutes: one column, one question at a
   time, nothing that moves on its own. */

/* ---------- Faces (self-hosted; build.mjs copies fonts/ to the site root.
   These URLs resolve against THIS FILE, at /talk/talk.css, so ../fonts is the
   site root whichever page loaded the stylesheet.) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal; font-weight: 100 900; font-stretch: 62% 125%;
  font-display: swap; src: url('../fonts/archivo-var.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../fonts/plexmono-roman-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('../fonts/plexmono-roman-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('../fonts/plexmono-roman-600.woff2') format('woff2');
}

:root {
  --paper:  #ffffff;
  --paper2: #f3f1f1;
  --ink:    #000000;
  --soft:   #4d4d4d;   /* 8.45:1 on paper */
  --blue:   #0036f9;   /* 7.25:1 on paper */
  --navy:   #001049;
  --red:    #b70000;   /* 6.97:1 on paper */
  --line:   #d8d8d8;   /* decorative hairlines only, never a control edge */

  --font-display: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --column: 44rem;     /* a reading measure, not a page width */
}

* { box-sizing: border-box; }
/* Sections are shown and hidden with the `hidden` attribute; a display rule on
   a class would otherwise out-specify the UA rule and show them anyway. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.6;
  border-top: 8px solid var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 118%;
  line-height: .98; letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}
h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); max-width: 18ch; }
h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); max-width: 26ch; }
a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--red); }

/* Visible on every control, on every page, for everybody using a keyboard. */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Top bar ---------- */
.bar { border-bottom: 1px solid var(--line); }
.bar-inner {
  max-width: calc(var(--column) + 2 * var(--gutter)); margin: 0 auto;
  padding: 14px var(--gutter);
}
.kicker {
  margin: 0;
  font-family: var(--font-mono); font-weight: 600; font-size: 11.5px; line-height: 1;
  letter-spacing: .28em; text-transform: uppercase; color: var(--ink);
}
.kicker::before {
  content: ''; display: inline-block; width: 10px; height: 10px;
  background: var(--blue); margin-right: 11px; vertical-align: -1px;
}

/* ---------- The page ---------- */
main {
  max-width: calc(var(--column) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(2rem, 6vh, 3.5rem) var(--gutter) clamp(3rem, 10vh, 5rem);
}
.lede {
  max-width: 58ch; margin: 1.25rem 0 0;
  font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.55; color: var(--ink);
}
.hint {
  margin: 8px 0 0; max-width: 62ch;
  font-family: var(--font-mono); font-size: .74rem; line-height: 1.65;
  letter-spacing: .03em; color: var(--soft);
}
.loading {
  margin: 2rem 0 0;
  font-family: var(--font-mono); font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--soft);
}

/* How long this will take, said at the top where it changes whether somebody
   starts at all. */
.meter {
  margin: 1.5rem 0 0; padding: 12px 16px;
  background: var(--paper2); border-left: 6px solid var(--blue);
  font-family: var(--font-mono); font-size: .76rem; line-height: 1.7;
  letter-spacing: .04em; color: var(--ink); max-width: 58ch;
}

/* ---------- Questions ---------- */
form { margin: clamp(2rem, 5vh, 3rem) 0 0; }

/* One question per band, divided by a hairline. A fieldset needs the border and
   padding reset before it will sit in the same rhythm as a div. */
.row, fieldset.row {
  display: block;
  margin: 0; padding: clamp(1.4rem, 3.5vh, 2rem) 0;
  border: 0; border-top: 1px solid var(--line);
  min-width: 0;   /* a fieldset will not shrink below its content without this */
}
.row:first-child { border-top: 4px solid var(--ink); }

.field-label, legend.field-label {
  display: block; margin: 0 0 8px; padding: 0;
  font-family: var(--font-mono); font-weight: 600; font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  max-width: 62ch;
}
/* A legend is drawn ON its fieldset's top border by default, which cut the
   hairline in half and made the question above look struck through. Floating it
   takes it out of that special case: it becomes an ordinary block, the rule
   above it stays whole, and the question reads like every other one. The clear
   keeps whatever follows below the float rather than beside it. */
fieldset.row > legend.field-label { float: left; width: 100%; }
fieldset.row > legend.field-label + * { clear: both; }
/* Optional is marked; required is the default, so the page is not a field of
   asterisks. */
.opt {
  margin-left: 10px;
  font-weight: 400; letter-spacing: .12em; color: var(--soft);
  text-transform: uppercase;
}
.sub-label {
  display: block; margin: 18px 0 8px;
  font-family: var(--font-mono); font-weight: 500; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--soft);
}
/* The hint belongs above the box: it is how to answer, and reading it after
   answering is reading it too late. */
.field-label + .hint, legend.field-label + .hint { margin: -2px 0 12px; }

input[type="text"], input[type="email"], textarea, select {
  width: 100%; max-width: 40rem; display: block;
  font-family: var(--font-display); font-size: 1rem; line-height: 1.55;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink);   /* 21:1 — well past the 3:1 control rule */
  border-radius: 0;
  padding: 11px 12px;
  -webkit-appearance: none; appearance: none;
}
select {
  /* The native arrow goes with appearance:none, so one is drawn back on. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
textarea { resize: vertical; min-height: 6rem; }
input:hover, textarea:hover, select:hover { background-color: var(--paper2); }
input:focus, textarea:focus, select:focus {
  background-color: var(--paper);
  outline: 3px solid var(--blue); outline-offset: 1px;
}
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--red); border-width: 2px;
}

/* ---------- Boxes to tick ---------- */
/* Native inputs, made bigger. Anything drawn by hand here would cost the
   keyboard behaviour and the screen-reader naming that come free. */
.checks { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; }
.checks.stack { flex-direction: column; gap: 12px; }
.check {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 1rem; line-height: 1.45; cursor: pointer;
  max-width: 40rem;
}
.check input {
  flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: 2px 0 0;
  accent-color: var(--blue);   /* 7.25:1 when ticked */
  cursor: pointer;
}
.check span { min-width: 0; }

/* ---------- The one field nobody should fill in ----------
   The honeypot. Off-screen rather than display:none, because a fair number of
   the crawlers this is here to catch skip anything that is not rendered at all.
   It stays in the accessibility tree on purpose, and its label says "leave this
   blank", so somebody hearing the page is told what to do rather than puzzling
   over an unexplained box. */
.leave-blank {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-weight: 600; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 14px 26px; border-radius: 0; cursor: pointer;
  border: 2px solid var(--blue); background: var(--blue); color: var(--paper);
  text-decoration: none;   /* the class is also worn by a link, once */
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { color: var(--paper); }
.notice .btn { margin-top: 6px; }
.btn:hover { background: var(--navy); border-color: var(--navy); }
.btn[disabled] {
  cursor: default;
  background: var(--paper2); color: var(--soft); border-color: var(--soft);
}
.btn[disabled]:hover { background: var(--paper2); color: var(--soft); border-color: var(--soft); }

.send {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: clamp(1.75rem, 4vh, 2.5rem) 0 0;
  padding: clamp(1.5rem, 4vh, 2rem) 0 0;
  border-top: 4px solid var(--ink);
}
.send .status {
  margin: 0; flex: 1 1 14rem;
  font-family: var(--font-mono); font-size: .76rem; line-height: 1.6;
  letter-spacing: .06em; color: var(--soft);
}

/* ---------- Messages ---------- */
.field-error {
  margin: 10px 0 0; max-width: 62ch;
  font-family: var(--font-mono); font-size: .78rem; line-height: 1.65; color: var(--red);
}
.field-error::before { content: '\2715\2002'; font-weight: 600; }

.notice {
  margin: 1.75rem 0 0; padding: 18px 20px;
  background: var(--paper2); border-left: 6px solid var(--blue);
}
.notice.warn { border-left-color: var(--red); }
.notice h2 { font-size: 1rem; font-stretch: 112%; margin: 0 0 8px; }
.notice p { margin: 0 0 6px; max-width: 62ch; font-size: .97rem; line-height: 1.55; }
.notice p:last-child { margin-bottom: 0; }
.notice ul { margin: 8px 0 0; padding-left: 1.15rem; max-width: 62ch; }
.notice li { margin: 0 0 4px; font-size: .97rem; line-height: 1.5; }

noscript .notice { display: block; }

/* ---------- What happens next ----------
   Shown in place of the form once the thing has actually arrived. Deliberately
   the loudest thing on the site: somebody who has just pressed send should be
   in no doubt that it worked. */
.done {
  margin: clamp(1rem, 4vh, 2rem) 0 0;
  padding: clamp(1.75rem, 5vh, 2.5rem) clamp(1.5rem, 5vw, 2.25rem);
  background: var(--paper);
  border-top: 8px solid var(--ink);
  box-shadow: 12px 12px 0 0 var(--blue);
}
.done h2 { margin: 0 0 1rem; }
.done p { margin: 0 0 .85rem; max-width: 58ch; font-size: 1.02rem; line-height: 1.6; }
.done p:last-child { margin-bottom: 0; }
.done .hint { margin-top: 1.25rem; }

/* ---------- A section of the long form ---------- */
.group {
  margin: clamp(2.5rem, 7vh, 4rem) 0 0;
  padding: 0; border: 0; min-width: 0;
}
.group:first-of-type { margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.group > legend {
  padding: 0; margin: 0;
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--blue);
}
.group-note {
  margin: 10px 0 0; max-width: 60ch;
  font-size: .97rem; line-height: 1.55; color: var(--ink);
}
/* The group's questions, wrapped so the heavy rule lands under the heading and
   not under whichever question happens to be a fieldset. (:first-of-type counts
   per element type, so a group whose rows are a mix of div and fieldset would
   otherwise draw the 4px rule twice.) */
.rows { margin-top: 1.25rem; }

/* The sponsor block, shown only when somebody says they are a student. Set in
   from the edge so it reads as part of that answer rather than a new question. */
.sponsor {
  margin: 1.5rem 0 0; padding: 18px 20px;
  background: var(--paper2); border-left: 6px solid var(--ink);
}
.sponsor .why { margin: 0 0 14px; max-width: 58ch; font-size: .97rem; line-height: 1.55; }
.sponsor .row { border-top: 0; padding: 0 0 14px; }
.sponsor .row:last-child { padding-bottom: 0; }
.sponsor input { background: var(--paper); }

/* ---------- Foot ---------- */
.colophon {
  border-top: 1px solid var(--line);
  padding: 22px var(--gutter) 40px;
}
.colophon-inner { max-width: var(--column); margin: 0 auto; }
.colophon p {
  margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px;
  font-family: var(--font-mono); font-size: .7rem; line-height: 1.7;
  letter-spacing: .1em; text-transform: uppercase; color: var(--soft);
}

/* ---------- Narrow screens ---------- */
@media (max-width: 560px) {
  .send { flex-direction: column; align-items: stretch; }
  .send .btn { justify-content: center; }
  .checks { gap: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}