/* The Case Scaffold website's shared styles (docs/website/README.md section 3). The pages carry the design's own inline styles;
 * this file adds what they share: the fonts, served from this site (the app's Source Serif 4 and Source Sans 3; Cinzel, SIL OFL
 * 1.1, docs/brand/fonts), so no page asks another site for anything; the phone-width rule; and the forms' states. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/SourceSans3-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/fonts/SourceSans3-latin-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/SourceSerif4-latin.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 500; font-display: swap; src: url("/site/fonts/cinzel-latin-500-normal.woff2") format("woff2"); }

body { margin: 0; background: #F6F4F0; }
a { color: #1F4E79; }
a:hover { color: #163A5C; }
header a, footer a { color: inherit; }
:focus-visible { outline: 3px solid #1F4E79; outline-offset: 2px; }
header :focus-visible, footer :focus-visible, section[style*="#1F4E79"] :focus-visible { outline-color: #F7F3EA; }
img { max-width: 100%; }
/* a hash is one unbroken word: it wraps anywhere, so a phone never scrolls sideways (the download page's build hash) */
code { overflow-wrap: anywhere; word-break: break-all; }
@media (max-width: 640px) { .nav-secondary { display: none; } }

/* the forms: the alert above the fields, the field that needs fixing, the confirmation that replaces the form */
.site-alert { margin: 0; padding: 12px 14px; border-left: 4px solid #A1262B; background: #FBEAEA; color: #7A1C20; border-radius: 4px; font-size: 15px; }
.site-note { margin: 0; font-size: 14px; color: #4A5562; }
input[aria-invalid="true"] { border-color: #A1262B !important; outline: 2px solid #A1262B; outline-offset: 0; }
.site-sent { background: #FFFFFF; color: #18212B; padding: 32px; border-radius: 8px; display: grid; gap: 12px; border-left: 6px solid #23663A; }
.site-sent h3 { margin: 0; font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: 24px; }
.site-sent p { margin: 0; color: #4A5562; }
button[disabled] { opacity: 0.7; cursor: progress; }
/* the honeypot: out of sight and out of the tab order, for scripts only */
.site-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* the Record check's results: unchanged, changed, cannot check */
.verdict { border-radius: 8px; padding: 24px 28px; display: grid; gap: 10px; border: 2px solid; background: #FFFFFF; }
.verdict h2 { margin: 0; font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: 26px; }
.verdict p { margin: 0; }
.verdict code { font-size: 14px; background: #F6F4F0; padding: 1px 5px; overflow-wrap: anywhere; }
.verdict.ok { border-color: #23663A; background: #EEF6F0; }
.verdict.ok h2 { color: #23663A; }
.verdict.changed { border-color: #A1262B; background: #FBEAEA; }
.verdict.changed h2 { color: #A1262B; }
.verdict.cannot { border-color: #9A4A00; background: #FFF8F2; }
.verdict.cannot h2 { color: #9A4A00; }
.verdict .small { font-size: 15px; color: #4A5562; }
form.drop-over { border-color: #1F4E79 !important; background: #E7EEF6 !important; }