/* Confident But Wrong: landing page.
   Two voices: the machine speaks in the reader's own system UI font, the record in Century
   Schoolbook (CBW Schola, from TeX Gyre Schola), the face of US Supreme Court briefs.
   Evidence-tag yellow appears only where something is being marked as evidence. */

@font-face { font-family: "CBW Schola"; src: url("fonts/cbw-schola-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CBW Schola"; src: url("fonts/cbw-schola-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "CBW Schola"; src: url("fonts/cbw-schola-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --paper: #f3f5f6;     /* bond paper */
  --ink: #18233a;       /* navy ink */
  --graphite: #56606e;  /* secondary text */
  --rule: #cbd2d9;
  --exhibit: #f5d547;   /* evidence tag */
  --pencil: #2b4fbf;    /* the editor's blue pencil: links, the button, focus */
  --pencil-dark: #203c94;
  --screen: #ffffff;    /* a captured screen */
  --alert: #a3241b;
  --serif: "CBW Schola", "Century Schoolbook", "TeX Gyre Schola", Georgia, serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--serif);
  font-variant-numeric: lining-nums proportional-nums;
  font-kerning: normal;
}

a { color: var(--pencil); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--pencil-dark); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--pencil); outline-offset: 3px; }

.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

.draft {
  margin: 0;
  padding: 0.55rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font: 0.875rem/1.4 var(--ui);
  text-align: center;
}

.masthead { padding-top: 1.75rem; }
.wordmark {
  color: var(--ink);
  font-weight: 700;
  font-size: 1.3125rem;
  text-decoration: none;
}
.wordmark:hover { color: var(--ink); }

/* ---- Hero ---- */

.hero {
  display: grid;
  gap: 3.5rem;
  padding-top: 3rem;
  padding-bottom: 4.5rem;
  align-items: start;
}

h1 {
  margin: 0 0 1.5rem;
  font-weight: 400;
  font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 span { display: block; }
h1 span + span { margin-top: 0.12em; }

.dek { margin: 0 0 2.25rem; max-width: 34rem; }

/* ---- Signup ---- */

.signup { max-width: 31rem; }
.signup label { display: block; margin-bottom: 0.5rem; font: 600 0.9375rem/1.3 var(--ui); }
.signup .row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.signup input[type="email"] {
  flex: 1 1 15rem;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid #7d8796;
  border-radius: 2px;
  background: var(--screen);
  color: var(--ink);
  font: 1.0625rem/1.25 var(--ui);
}
.signup input[type="email"]::placeholder { color: #8a929d; }
.signup button {
  flex: 0 0 auto;
  padding: 0.85rem 1.45rem;
  border: 0;
  border-radius: 2px;
  background: var(--pencil);
  color: #fff;
  font: 600 1.0625rem/1.25 var(--ui);
  cursor: pointer;
}
.signup button:hover { background: var(--pencil-dark); }
@media (max-width: 26rem) { .signup button { flex: 1 1 100%; } }
.signup button:disabled { cursor: progress; opacity: 0.75; }
.signup .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup .status { margin: 0.75rem 0 0; font: 600 1rem/1.45 var(--ui); }
.signup .status:empty { display: none; }
.signup .status[data-kind="error"] { color: var(--alert); }
.signup .status[data-kind="ok"] { padding: 0.75rem 0.9rem; background: var(--screen); border-left: 4px solid var(--exhibit); }
.signup.done label, .signup.done .row { display: none; }
.signup.done .status { margin-top: 0; }
.fine { margin: 1rem 0 0; color: var(--graphite); font-size: 0.9375rem; line-height: 1.55; }

/* ---- The exhibit: an AI output as it was shown, and what the record says ---- */

.exhibit { margin: 0; }

.capture {
  position: relative;
  padding: 2.75rem 1.5rem 1.6rem;
  background: var(--screen);
  border: 1px solid var(--rule);
  color: #1f2430;
  font-family: var(--ui);
  font-variant-numeric: normal;
}

.tag {
  position: absolute;
  top: -0.95rem;
  left: 1.25rem;
  padding: 0.45rem 0.7rem 0.4rem;
  background: var(--exhibit);
  color: var(--ink);
  font: 700 0.9375rem/1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.03em;
}

.prompt {
  max-width: 88%;
  margin: 0 0 1.5rem auto;
  padding: 0.7rem 1rem;
  border-radius: 1.1rem 1.1rem 0.3rem 1.1rem;
  background: #eceff3;
  color: #3d4451;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.intro { margin: 0 0 0.6rem; font-size: 1rem; line-height: 1.5; }

.answer { margin: 0; padding-left: 1.3rem; }
.answer li {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
  line-height: 1.38;
  font-weight: 500;
}

/* The highlighter goes across the claim once; reduced motion shows it already marked. */
.answer mark {
  color: inherit;
  background: linear-gradient(var(--exhibit), var(--exhibit)) no-repeat 0 88% / 100% 0.6em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.08em;
  animation: highlight 1100ms 600ms cubic-bezier(0.25, 0.7, 0.2, 1) both;
}
@keyframes highlight { from { background-size: 0% 0.6em; } to { background-size: 100% 0.6em; } }
@media (prefers-reduced-motion: reduce) { .answer mark { animation: none; } }

.record {
  margin: 1.5rem 0 0 1.5rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--pencil);
}
.record .finding { margin: 0 0 0.6rem; font-size: 1.1875rem; line-height: 1.5; }
.record .provenance { margin: 0; color: var(--graphite); font-size: 0.9375rem; line-height: 1.5; }

/* ---- Sections ---- */

.block { padding-top: 3.25rem; padding-bottom: 3.25rem; }
.block > * { max-width: 44rem; }
h2 { margin: 0 0 1.5rem; font-size: 2rem; line-height: 1.15; font-weight: 400; }
.nowrap { white-space: nowrap; }
.lede { margin: 0 0 1.75rem; }

.parts { margin: 0; }
.parts dt { font-weight: 700; }
.parts dd { margin: 0.15rem 0 1.25rem; }
.parts dd:last-child { margin-bottom: 0; }

.docket { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.docket li { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.docket .when { margin: 0 0 0.3rem; color: var(--graphite); font-size: 0.9375rem; }
.docket .when .rid { font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.02em; }
.docket .title { margin: 0 0 0.3rem; }
.docket .meta { margin: 0; color: var(--graphite); font-size: 0.9375rem; }

.prose p { margin: 0 0 1.1rem; }
.statuses { margin: 0 0 1.25rem; }
.statuses dt { font-weight: 700; }
.statuses dd { margin: 0 0 0.6rem; }

.colophon {
  padding-top: 2rem;
  padding-bottom: 3rem;
  color: var(--graphite);
  font-size: 0.9375rem;
}
.colophon p { max-width: 44rem; margin: 0 0 0.5rem; }

/* ---- Wider screens ---- */

@media (min-width: 40rem) {
  .capture { padding: 3rem 2rem 1.9rem; }
  .docket li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 1.5rem; }
  .docket .when { margin: 0.1rem 0 0; display: flex; flex-direction: column; }
  .docket .what { min-width: 0; }
  .parts, .statuses { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: 1.5rem; }
  .parts dd, .statuses dd { margin-top: 0; }
  .statuses { grid-template-columns: 7rem minmax(0, 1fr); }
}

@media (min-width: 62rem) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5rem; padding-top: 4.5rem; padding-bottom: 5.5rem; }
  .exhibit { margin-top: 0.6rem; }
  /* Sections: the heading sits in the margin, the content in the exhibit's column. */
  .block { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 5rem; }
  .block > * { grid-column: 2; max-width: none; }
  .block > h2 { grid-column: 1; grid-row: 1 / span 4; font-size: 2.125rem; line-height: 1.1; }
  .parts { display: block; }
  .parts dd { margin: 0.15rem 0 1.25rem; }
}