@font-face { font-family: "Public Sans"; src: url("/fonts/public-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/fonts/public-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --paper: #F4F6F5;      /* controlled-document paper */
  --sheet: #FFFFFF;
  --ink: #1C2A29;        /* deep teal ink */
  --quiet: #55625F;
  --rule: #8A9B98;
  --verified: #2E6E58;   /* only for "checked" status */
  --highlight: #F3E68C;  /* under quoted guidance */
  --notice: #A86A12;     /* only for interim notices */
  --notice-bg: #FBF3E4;
  --focus: #1F5FA8;
  --sans: "Public Sans", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --measure: 40rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131B1A; --sheet: #1A2423; --ink: #E3EBE9; --quiet: #A3B2AF; --rule: #4E5F5C;
    --verified: #7CC4A5; --highlight: #5B5420; --notice: #E3B25F; --notice-bg: #2A2414; --focus: #8AB8F0;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.55 var(--sans);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.masthead, main, .colophon { max-width: var(--measure); margin: 0 auto; padding: 0 1rem; }
.masthead { padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; align-items: baseline; justify-content: space-between; }
.wordmark { margin: 0; font-weight: 600; letter-spacing: -.01em; }
.coverage { margin: 0; font-size: .875rem; color: var(--quiet); }

/* The ask: the search box is the hero */
.ask { padding: 2.5rem 0 1.5rem; }
.ask h1 { font: 600 clamp(1.75rem, 5vw, 2.4rem)/1.15 var(--sans); letter-spacing: -.02em; margin: 0 0 .75rem; max-width: 22ch; }
.lede { margin: 0 0 1.5rem; color: var(--quiet); max-width: 34rem; }
#ask-form { display: grid; gap: .75rem; }
#q {
  width: 100%; resize: vertical; min-height: 4.5rem;
  font: 400 1.125rem/1.45 var(--sans); color: var(--ink);
  background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 6px; padding: .8rem .9rem;
}
#q:focus { border-color: var(--ink); }
#ask-button {
  justify-self: start; font: 600 1rem/1 var(--sans); color: var(--paper); background: var(--ink);
  border: 0; border-radius: 6px; padding: .85rem 1.25rem; cursor: pointer; min-height: 44px;
}
#ask-button[disabled] { opacity: .6; cursor: progress; }
.prep { font-size: .9rem; color: var(--quiet); margin: .75rem 0 0; }
.examples p { margin: 1.5rem 0 .5rem; font-size: .9rem; color: var(--quiet); }
.examples ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.examples button {
  font: 400 .9rem/1.3 var(--sans); color: var(--ink); background: transparent; text-align: left;
  border: 1px solid var(--rule); border-radius: 999px; padding: .5rem .85rem; cursor: pointer; min-height: 44px;
}
.examples button:hover { border-color: var(--ink); }

/* Results */
.results { padding-bottom: 2rem; }
.results > .message { color: var(--quiet); padding: .5rem 0 1.5rem; }
.doc { background: var(--sheet); border-left: 4px solid var(--ink); padding: 1.25rem 1.1rem 1rem; margin: 0 0 1.5rem; }
.doc-title { font: 600 1.05rem/1.35 var(--sans); margin: 0 0 .75rem; }

/* The document-control stamp: the one memorable element */
.stamp {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr)); gap: .5rem 1rem;
  margin: 0; padding: .6rem .75rem; border: 1px dashed var(--rule); border-radius: 4px; font-size: .8125rem;
}
.stamp div { min-width: 0; }
.stamp dt { color: var(--quiet); }
.stamp dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stamp .checked dd { color: var(--verified); }
.stamp .checked dd::before { content: "✓ "; }

.notice { margin: 0 0 1.5rem; padding: .75rem .9rem; background: var(--notice-bg); border-left: 3px solid var(--notice); font-size: .9rem; }
.notice p { margin: 0 0 .4rem; }
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--notice); }

.extracts { list-style: none; margin: 0; padding: 0; }
.extract { padding: 1.1rem 0 .25rem; border-top: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); }
.extract:first-child { border-top: 0; }
.where { margin: 0 0 .5rem; font-size: .875rem; color: var(--quiet); }
.where .sec { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.quote { margin: 0; font: 400 1.0625rem/1.65 var(--serif); }
.quote p { margin: 0; }
.quote .text {
  background: linear-gradient(transparent 0 72%, color-mix(in srgb, var(--highlight) 70%, transparent) 72% 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.quote .loading-line, .quote .unavailable { font: italic 400 .95rem/1.5 var(--serif); color: var(--quiet); }
.open { margin: .6rem 0 .75rem; font-size: .9rem; }
.open a { color: var(--ink); text-underline-offset: 3px; }

.colophon { padding-top: 1rem; padding-bottom: 2.5rem; border-top: 1px solid var(--rule); font-size: .85rem; color: var(--quiet); }
.colophon p { max-width: 36rem; }

@media (prefers-reduced-motion: no-preference) {
  .doc { animation: settle .25s ease-out both; }
  @keyframes settle { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* After a search: the question stays, the introduction steps aside */
.has-results .ask { padding-top: 1.25rem; }
.has-results .ask h1 { font-size: 1.25rem; margin-bottom: .75rem; }
.has-results .lede, .has-results .examples { display: none; }
.results { scroll-margin-top: 1rem; }