:root{
    --paper:#FFFFFF;
    --ink:#0A0A0A;
    --tint:#F2F1ED;
    --muted:#6B6B66;
    --flag:#C8102E;
    --ok:#1B5E3A;
    --rule:#0A0A0A;

    --grot:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
    --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --paper:#131312; --ink:#F2F1ED; --tint:#1E1E1C;
      --muted:#9A9A93; --flag:#FF5566; --ok:#4FB37C; --rule:#F2F1ED;
    }
  }
  :root[data-theme="dark"]{
    --paper:#131312; --ink:#F2F1ED; --tint:#1E1E1C;
    --muted:#9A9A93; --flag:#FF5566; --ok:#4FB37C; --rule:#F2F1ED;
  }
  :root[data-theme="light"]{
    --paper:#FFFFFF; --ink:#0A0A0A; --tint:#F2F1ED;
    --muted:#6B6B66; --flag:#C8102E; --ok:#1B5E3A; --rule:#0A0A0A;
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--grot); font-size:17px; line-height:1.55;
    font-synthesis-weight:none;
  }
  .wrap{max-width:1080px; margin:0 auto; padding:0 24px}
  .col{max-width:62ch}
  [hidden]{display:none !important}

  /* ---- masthead: mimics the panel's top hairline + statement ---- */
  .mast{
    display:flex; justify-content:space-between; align-items:baseline;
    gap:16px; flex-wrap:wrap;
    padding:14px 0 10px; border-bottom:1px solid var(--rule);
  }
  .mark{font-weight:800; letter-spacing:-.02em; font-size:19px}
  /* Not uppercased, and this is not a style preference. Everything wearing
     this class is a CFR citation, and sub-paragraph letters are
     case-significant: uppercasing rendered "21 CFR 101.9(c)" as "101.9(C)",
     which cites a paragraph that is not the one we apply. Same reason the
     format headings under .fmt h3 clear it. */
  .cite{
    font-family:var(--mono); font-size:12px; color:var(--muted);
    letter-spacing:.04em; text-transform:none;
  }

  /* rule hierarchy borrowed from the real panel: 8pt / 4pt / hairline */
  .bar-x{height:9px; background:var(--rule)}
  .bar-m{height:4px; background:var(--rule)}

  section{padding:0}
  .pad{padding:54px 0}

  h1{
    font-size:clamp(38px,6.4vw,68px); line-height:.96; letter-spacing:-.035em;
    font-weight:800; margin:0 0 20px; text-wrap:balance;
  }
  h2{
    font-size:clamp(24px,3.2vw,32px); line-height:1.1; letter-spacing:-.02em;
    font-weight:800; margin:0 0 14px; text-wrap:balance;
  }
  h3{font-size:15px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin:0 0 10px}
  p{margin:0 0 16px}
  .lede{font-size:19px; color:var(--muted)}
  .eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--flag); margin:0 0 14px; font-weight:600;
  }

  .fields{display:grid; grid-template-columns:repeat(2,1fr); gap:10px 14px}
  @media (max-width:520px){ .fields{grid-template-columns:1fr} }
  .f{display:flex; flex-direction:column; gap:3px}
  .f.wide{grid-column:1 / -1}
  .f label{font-size:12px; color:var(--muted); letter-spacing:.03em}
  .f input{
    font-family:var(--mono); font-size:15px; font-variant-numeric:tabular-nums;
    padding:8px 10px; background:var(--paper); color:var(--ink);
    border:1px solid var(--muted); border-radius:0;
  }
  .f input:focus-visible{outline:2px solid var(--flag); outline-offset:1px; border-color:var(--flag)}
  .sub{font-size:11.5px; color:var(--muted); margin:0}

  .note{
    background:var(--tint); border:1px solid var(--rule);
    padding:14px 16px; margin:16px 0 0; font-size:13.5px; line-height:1.45;
  }
  .note p{margin:0 0 8px}
  .note p:last-child{margin:0}
  .note b{font-weight:800}

  .warn{
    border:2px solid var(--flag); color:var(--flag); font-weight:700;
    font-size:14.5px; line-height:1.45; padding:12px 14px; margin:16px 0 0;
  }

footer{padding:30px 0 60px; font-size:13px; color:var(--muted)}
footer p{margin:0 0 9px}
/* Inherit the muted footer colour instead of the browser's link blue, which
   is the only saturated colour anywhere on this page and would make the
   policy links the loudest thing in the footer. */
.legal-links{margin-top:14px}
.legal-links a{color:var(--muted); text-underline-offset:2px}

@media (prefers-reduced-motion:no-preference){
  .flash{animation:fl .5s ease-out}
  @keyframes fl{ 0%{background:color-mix(in srgb,var(--flag) 26%,transparent)} 100%{background:transparent} }
}

/* Result columns. Three of them, and the third -- what we did NOT check --
   carries a count for the same reason the other two do: hiding it would
   imply it had passed. */
.cols{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px}
@media (max-width:900px){ .cols{grid-template-columns:1fr} }
.cols>*{min-width:0}
.colhead{
  display:flex; align-items:baseline; gap:9px;
  border-bottom:4px solid var(--rule); padding-bottom:7px; margin-bottom:14px;
}
.colhead .n{font-family:var(--mono); font-size:22px; font-weight:800; font-variant-numeric:tabular-nums}
.colhead .t{font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:700}
.col-outside .colhead{border-color:var(--flag); color:var(--flag)}
.col-consistent .colhead{border-color:var(--ok); color:var(--ok)}
.col-unchecked .colhead{border-color:var(--muted); color:var(--muted)}

.card{border:1px solid var(--rule); padding:13px 14px; margin-bottom:12px}
.card .name{font-size:14px; font-weight:800; margin:0 0 8px}
.card dl{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0 0 10px; font-size:13.5px}
.card dt{color:var(--muted); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; font-weight:700}
.card dd{margin:0; font-family:var(--mono); font-variant-numeric:tabular-nums}
.card .assume{font-size:12.5px; color:var(--muted); margin:0 0 10px; line-height:1.45}
/* Citations are case-significant, so this must never inherit an uppercase
   rule: 101.9(c)(2) is not 101.9(C)(2). Same reason as index.html's .cite. */
.card blockquote{
  margin:0; padding:0 0 0 13px; border-left:3px solid var(--muted);
  font-family:var(--serif); font-size:14px; line-height:1.45;
}
.card blockquote cite{
  display:block; margin-top:6px; font-family:var(--mono); font-size:11px;
  font-style:normal; letter-spacing:.05em; color:var(--muted); text-transform:none;
}

/* The next step, sitting directly under the findings rather than at the foot
   of the page, because a reader who has just been given three findings and no
   next move is the reader this page was losing. It carries no price and no
   buy control: the paid pack is one hop away on the generator, which states
   its own price. See the comment in check.html for why that is a constraint
   and not a layout preference. */
.next{border:2px solid var(--rule); padding:18px 20px; margin-top:28px; max-width:62ch}
.next h3{margin-bottom:8px}
.next p{margin:0 0 14px}
.next p:last-child{margin:0}
.go{
  display:inline-block; font-weight:800; font-size:15px; letter-spacing:.02em;
  padding:11px 18px; background:var(--ink); color:var(--paper);
  text-decoration:none; border:2px solid var(--ink);
}
.go:hover{background:var(--paper); color:var(--ink)}
.go:focus-visible{outline:2px solid var(--flag); outline-offset:2px}

/* Shown only when the URL carried prefilled values. */
.prefill{border:2px solid var(--rule); background:var(--tint); padding:14px 16px; margin:22px 0 0; font-size:14px}
.prefill p{margin:0}
[hidden]{display:none !important}