/* ==========================================================================
   aca.hare.quest

   The client-report design system from hare-quest/templates/client-report,
   adapted from a printable document to two screens: a landing page and a
   support request form.

   Typography
     Instrument Serif  wordmark only. It is the logo, so it stays.
     Noto Serif        headings and body.
     Noto Sans         labels, form controls, data. Tabular figures.

   Fonts are latin-subset (about 20 KB each instead of 220 KB) because this
   page gets loaded on classroom hardware over school wifi. Regenerate with
   scripts/subset-fonts.sh after replacing a source face.

   Light is the base palette. Dark redefines tokens only, in both the
   system-preference and the explicitly-stamped case, so the page holds up
   in all three viewer states.
   ========================================================================== */

@font-face{font-family:'ACA Wordmark';src:url(fonts/InstrumentSerif-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'ACA Serif';src:url(fonts/NotoSerif-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'ACA Serif';src:url(fonts/NotoSerif-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'ACA Serif';src:url(fonts/NotoSerif-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'ACA Sans';src:url(fonts/NotoSans-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'ACA Sans';src:url(fonts/NotoSans-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* --- tokens ------------------------------------------------------------- */
:root{
  --paper:#ffffff;
  --panel:#f3f6f8;
  --field:#ffffff;
  --ink:#16191c;
  --ink-2:#41474d;
  --ink-3:#6f767d;
  --rule:#d3d8dc;
  --rule-hard:#16191c;
  --accent:#1d4e6b;
  --accent-ink:#ffffff;
  --accent-tint:#eaf1f5;
  --flag:#8a5a1e;
  --flag-tint:#faf3e8;
  --bad:#8c2f22;
  --bad-tint:#fbeeec;
  --good:#1f5c3d;
  --good-tint:#eaf4ee;

  --measure:66ch;
  --s1:6px; --s2:10px; --s3:16px; --s4:24px; --s5:34px; --s6:48px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14171a;
    --panel:#1c2024;
    --field:#1a1e22;
    --ink:#e6e9ec;
    --ink-2:#b3bac0;
    --ink-3:#838c94;
    --rule:#2c3237;
    --rule-hard:#e6e9ec;
    --accent:#84b6d2;
    --accent-ink:#0f1418;
    --accent-tint:#1a2831;
    --flag:#d9a15c;
    --flag-tint:#241d12;
    --bad:#e39387;
    --bad-tint:#2a1a17;
    --good:#8fc7a8;
    --good-tint:#16241c;
  }
}
:root[data-theme="dark"]{
  --paper:#14171a;
  --panel:#1c2024;
  --field:#1a1e22;
  --ink:#e6e9ec;
  --ink-2:#b3bac0;
  --ink-3:#838c94;
  --rule:#2c3237;
  --rule-hard:#e6e9ec;
  --accent:#84b6d2;
  --accent-ink:#0f1418;
  --accent-tint:#1a2831;
  --flag:#d9a15c;
  --flag-tint:#241d12;
  --bad:#e39387;
  --bad-tint:#2a1a17;
  --good:#8fc7a8;
  --good-tint:#16241c;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'ACA Serif',Georgia,serif;
  font-size:16px;
  line-height:1.65;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}

a{color:var(--accent);text-underline-offset:2px}

/* --- shared page shell -------------------------------------------------- */
.page{
  max-width:44rem;
  margin:0 auto;
  padding:var(--s5) var(--s4) 80px;
  display:flex;
  flex-direction:column;
  gap:var(--s5);
}

.masthead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:var(--s3);
  flex-wrap:wrap;
  padding-bottom:var(--s3);
  border-bottom:2px solid var(--rule-hard);
}
.masthead .wordmark{
  font-family:'ACA Wordmark',Georgia,serif;
  font-size:28px;
  line-height:1;
  color:var(--ink);
  text-decoration:none;
}
.masthead .who{
  font-family:'ACA Sans',system-ui,sans-serif;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-3);
  text-align:right;
}

h1{
  font-family:'ACA Serif',Georgia,serif;
  font-weight:700;
  font-size:clamp(26px,4.2vw,34px);
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0;
  text-wrap:balance;
}
h2{
  font-family:'ACA Serif',Georgia,serif;
  font-weight:700;
  font-size:19px;
  line-height:1.3;
  margin:0;
  text-wrap:balance;
}
p{margin:0;max-width:var(--measure)}
.lede{font-size:17px;color:var(--ink-2)}
.small{font-size:14px;color:var(--ink-2)}
.fine{
  font-family:'ACA Sans',system-ui,sans-serif;
  font-size:12.5px;
  line-height:1.55;
  color:var(--ink-3);
  max-width:var(--measure);
}

/* --- landing ------------------------------------------------------------ */
.landing{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--s5);
  max-width:34rem;
  padding:var(--s5) var(--s4);
  margin:0 auto;
  text-align:center;
}
.landing .call{
  font-family:'ACA Serif',Georgia,serif;
  font-weight:700;
  font-size:clamp(24px,5vw,32px);
  line-height:1.25;
  margin:0;
  text-wrap:balance;
}
.iconlink{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s3);
  align-self:center;
  padding:var(--s4) var(--s5);
  border:1px solid var(--rule);
  border-radius:3px;
  background:var(--panel);
  color:var(--ink);
  text-decoration:none;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.iconlink:hover,.iconlink:focus-visible{
  border-color:var(--accent);
  background:var(--accent-tint);
}
.iconlink:active{transform:translateY(1px)}
.iconlink .mark{width:104px;height:104px}
.iconlink .mark svg{width:100%;height:100%;display:block;fill:var(--ink)}
.iconlink:hover .mark svg,.iconlink:focus-visible .mark svg{fill:var(--accent)}
.iconlink .go{
  font-family:'ACA Sans',system-ui,sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--accent);
}
@media (prefers-reduced-motion:reduce){
  .iconlink{transition:none}
  .iconlink:active{transform:none}
}
.landing .alt{
  font-family:'ACA Sans',system-ui,sans-serif;
  font-size:13px;
  color:var(--ink-3);
  margin:0;
  max-width:none;
}
.landing .alt a{font-weight:700}

/* --- form --------------------------------------------------------------- */
form{display:flex;flex-direction:column;gap:var(--s5)}
.field{display:flex;flex-direction:column;gap:var(--s1);max-width:var(--measure)}
.field.wide{max-width:none}

label,.label{
  font-family:'ACA Sans',system-ui,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.hint{
  font-family:'ACA Sans',system-ui,sans-serif;
  font-size:12.5px;
  color:var(--ink-3);
}

input[type=text],input[type=email],select,textarea{
  font-family:'ACA Sans',system-ui,sans-serif;
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  background:var(--field);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:9px 11px;
  width:100%;
  appearance:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px var(--accent-tint)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}

select{
  /* Native arrow is removed by appearance:none, so draw one. Encoded inline
     as a data URI, which the CSP permits for img-src and background-image. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236f767d' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:11px;
  padding-right:34px;
}

textarea{
  font-size:14.5px;
  min-height:19rem;
  resize:vertical;
  tab-size:2;
}

/* --- severity definitions ----------------------------------------------- */
details.defs{
  border:1px solid var(--rule);
  border-radius:2px;
  background:var(--panel);
  padding:0;
}
details.defs summary{
  font-family:'ACA Sans',system-ui,sans-serif;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink-2);
  padding:9px 12px;
  cursor:pointer;
  list-style:none;
}
details.defs summary::-webkit-details-marker{display:none}
details.defs summary::before{content:"+ ";color:var(--accent);font-weight:700}
details.defs[open] summary::before{content:"\2212 "}
details.defs .body{
  padding:0 12px 12px;
  display:flex;
  flex-direction:column;
  gap:var(--s2);
}
details.defs dl{margin:0;display:flex;flex-direction:column;gap:var(--s2)}
details.defs dt{
  font-family:'ACA Sans',system-ui,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--accent);
}
details.defs dd{
  margin:2px 0 0;
  font-size:14px;
  line-height:1.5;
  color:var(--ink-2);
}

/* --- template toolbar --------------------------------------------------- */
.tools{display:flex;flex-direction:column;gap:var(--s2)}
.tools[hidden]{display:none}
.toolrow{display:flex;flex-wrap:wrap;gap:var(--s1)}
button{
  font-family:'ACA Sans',system-ui,sans-serif;
  font-size:13px;
  font-weight:700;
  color:var(--ink-2);
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:6px 11px;
  cursor:pointer;
  transition:border-color .12s ease,color .12s ease,background .12s ease;
}
button:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-tint)}
button[aria-pressed=true]{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
}
button.clear{margin-left:auto}
button.submit{
  font-size:15px;
  padding:11px 22px;
  color:var(--accent-ink);
  background:var(--accent);
  border-color:var(--accent);
  align-self:flex-start;
}
button.submit:hover{opacity:.9;color:var(--accent-ink);background:var(--accent)}
@media (prefers-reduced-motion:reduce){button{transition:none}}

.confirm-swap{
  font-family:'ACA Sans',system-ui,sans-serif;
  font-size:12.5px;
  color:var(--flag);
}
.confirm-swap[hidden]{display:none}

/* --- notices ------------------------------------------------------------ */
.notice{
  border-left:3px solid var(--accent);
  background:var(--accent-tint);
  padding:var(--s3) var(--s4);
  display:flex;flex-direction:column;gap:var(--s2);
}
.notice.warn{border-left-color:var(--flag);background:var(--flag-tint)}
.notice.bad{border-left-color:var(--bad);background:var(--bad-tint)}
.notice.good{border-left-color:var(--good);background:var(--good-tint)}
.notice .lbl{
  font-family:'ACA Sans',system-ui,sans-serif;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:var(--accent);
}
.notice.warn .lbl{color:var(--flag)}
.notice.bad .lbl{color:var(--bad)}
.notice.good .lbl{color:var(--good)}
.notice p{max-width:none}

/* --- receipt (confirmation page, served by the intake service) ---------- */
.ticketno{
  font-family:'ACA Sans',system-ui,sans-serif;
  font-size:clamp(22px,4vw,28px);
  font-weight:700;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.summary{
  border:1px solid var(--rule);
  border-radius:2px;
  overflow:hidden;
}
.summary dl{
  margin:0;
  display:grid;
  grid-template-columns:9.5rem 1fr;
}
.summary dt{
  font-family:'ACA Sans',system-ui,sans-serif;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);
  background:var(--panel);
  padding:9px 12px;
  border-bottom:1px solid var(--rule);
}
.summary dd{
  margin:0;
  padding:9px 12px;
  border-bottom:1px solid var(--rule);
  font-family:'ACA Sans',system-ui,sans-serif;
  font-size:14px;
  color:var(--ink-2);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.summary dt:last-of-type,.summary dd:last-of-type{border-bottom:0}
@media (max-width:560px){
  .summary dl{grid-template-columns:1fr}
  .summary dt{border-bottom:0;padding-bottom:0;background:transparent}
  .summary dd{padding-top:2px}
}

/* --- footer ------------------------------------------------------------- */
.foot{
  border-top:1px solid var(--rule);
  padding-top:var(--s3);
  display:flex;
  justify-content:space-between;
  gap:var(--s3);
  flex-wrap:wrap;
  font-family:'ACA Sans',system-ui,sans-serif;
  font-size:12px;
  color:var(--ink-3);
}
.foot a{color:var(--ink-3)}

/* "optional" marker on a label. Deliberately quiet: the point is that most of
   the form is optional, so the markers should not shout. */
.opt {
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-3);
  font-size:11.5px;
  margin-left:4px;
}