/* /firstwatch/: the tool's page (home.css gives the reading layout). The checker's levels use firstwatch's own colours. */
.fw { --clean: #2f8f5b; --note: #b07a14; --stop: #c4433a; }
:root[data-theme="dark"] .fw { --clean: #6cc796; --note: #e2b65a; --stop: #f08a80; }
.fw-head { display: flex; align-items: center; gap: 1rem; margin: 0 0 .7rem; }
.fw h1 { font: 700 clamp(1.7rem, 6vw, 2.4rem)/1.15 Atkinson, system-ui, sans-serif; margin: 0; }
.fw .mascot[data-mascot=firstwatch] { flex: none; width: 90px; height: 96px; }
.fw .runes { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 1.6rem; }
.fw-video { width: 100%; aspect-ratio: 16 / 9; background: var(--card); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--line); }
.fw pre { overflow-x: auto; padding: .8rem 1rem; background: var(--card); border: 2px solid var(--line); font-size: .9rem; }
.fw-examples button, .fw-go { font: 600 .95rem/1.3 Atkinson, system-ui, sans-serif; color: var(--ink); background: var(--card); border: 2px solid var(--ink);
  padding: .35rem .7rem; margin: 0 .3rem .4rem 0; cursor: pointer; box-shadow: 3px 3px 0 var(--gold); }
.fw-examples button:active, .fw-go:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--gold); }
.fw-go { background: var(--ink); color: var(--bg); font-size: 1.05rem; padding: .5rem 1.2rem; }
.fw-label { display: block; font: 600 .95rem/1.4 Atkinson, system-ui, sans-serif; margin: .6rem 0 .3rem; }
#fw-input { width: 100%; font: .95rem/1.45 ui-monospace, Menlo, Consolas, monospace; color: var(--ink); background: var(--card); border: 2px solid var(--ink); padding: .7rem; resize: vertical; }
.fw-version { color: var(--muted); font-size: .9rem; margin-left: .5rem; }
.fw-result { padding: 1rem 1.1rem .4rem; background: var(--card); border: 2px solid var(--ink); border-left-width: 8px; margin: 0 0 1rem; }
.fw-result.clean { border-left-color: var(--clean); } .fw-result.note { border-left-color: var(--note); } .fw-result.stop { border-left-color: var(--stop); }
.fw-verdict { font-weight: 600; }
.fw-lvl { display: inline-block; font: 800 .8rem/1 Atkinson, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: .3em .55em; border: 2px solid currentColor; margin-right: .3rem; }
.fw-lvl.clean { color: var(--clean); } .fw-lvl.note { color: var(--note); } .fw-lvl.stop { color: var(--stop); }
.fw-list { list-style: none; padding: 0 !important; }
.fw-f { border-top: 1px solid var(--line); padding-top: .7rem; }
.fw-f p { margin: 0 0 .4rem !important; }
.fw-where, .fw-ids { color: var(--muted); font-size: .92rem; }
.fw-f blockquote { margin: 0 0 .5rem; padding: .4rem .7rem; border-left: 3px solid var(--line); font-size: .95rem; overflow-wrap: anywhere; }
.fw-ids abbr { text-decoration: underline dotted; }
.fw-terms dt { font-weight: 700; margin-top: .7rem; }
.fw-terms dd { margin: .15rem 0 0; }
.fw .fold > summary { align-items: center; }
.fw .fold > summary h2 { margin: 0; font-size: 1.15rem; }
.fw .fold + .fold { margin-top: 1rem; }