/* Light only. With `light dark` a dark-preference environment repainted the
   canvas under fixed foregrounds, flipping several contrast truths: the
   defects and their twins are calibrated against a white canvas. */
:root { color-scheme: light; }
/* One measure for the whole page. At 60rem the header and the version chip
   reached the full width while prose stopped at 42em, leaving a dead gutter
   down the right. 48rem is narrow enough to read and wide enough for the
   multi-part field layouts, and everything now aligns to the same edge. */
body { font: 16px/1.6 system-ui, sans-serif; margin: 0 auto; padding: 2rem 1rem 4rem; max-width: 48rem; }
h1 { margin-bottom: .25rem; }
.dl-case { border: 1px solid #767676; border-radius: 6px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.dl-case h2 { margin: 0 0 .25rem; font-size: 1rem; }
.dl-meta { margin: 0 0 1rem; color: #595959; font-size: .875rem; }
.dl-defect { border-left: 6px solid #b4232b; }
.dl-correct { border-left: 6px solid #1b6b45; }
label { display: inline-block; margin-right: .5rem; }
input, button, select, textarea { font: inherit; margin: .15rem .5rem .15rem 0; }
fieldset { margin: .5rem 0; }

/* Case-specific styling. These rules ARE the defect in some cases and must
   not be treated as incidental presentation. */
.dl-fake-button { display: inline-block; padding: .35rem .8rem; border: 1px solid #767676; border-radius: 4px; cursor: pointer; }
.dl-error-visual { border: 2px solid #d4351c; }
.dl-error-visual-text { color: #d4351c; }
.dl-req-star { color: #d4351c; }

/* Branding. Index page only, and never a link: a route back to the chrome
   would let a crawler leave the target. It is a <header> so its content sits
   in a landmark — as a bare div it put a region violation on our own page. */
.dl-brand { display: flex; align-items: center; gap: .55rem; margin-bottom: 2rem; }
.dl-mark { width: 20px; height: 20px; flex: none; }
/* The mark's accent, and the one place this target names a brand colour.
   It must equal --primary in web/src/app/globals.css; build-wcag22.mjs
   fails the build if the two ever disagree. The colours live here rather
   than as SVG presentation attributes so there is a single declaration to
   check, and so a hand-typed hex cannot hide inside the markup again. */
:root { --dl-accent: #db0000; }
.dl-mark path { stroke: currentColor; }
.dl-mark rect { stroke: var(--dl-accent); }
.dl-wordmark { font-weight: 600; letter-spacing: -.02em; }
.dl-origin { font-size: .8125rem; color: #595959; border: 1px solid #767676; border-radius: 999px; padding: .1rem .5rem; }
.dl-version { font-size: .8125rem; color: #595959; margin-left: auto; }

/* images group. These rules carry the defect in images-css-conveys-meaning:
   the state is in the background colour and nowhere else. */
.dl-status-icon { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; }
.dl-status-fail { background: #d4351c; }
.dl-status-ok { background: #00703c; }
.dl-promo { font-family: Georgia, serif; font-size: 20px; }

/* structure group. These rules carry the defect where noted. */
.dl-fake-heading { font-size: 1.15rem; font-weight: 700; margin: 0 0 .25rem; }
.dl-layout td { padding: .2rem .6rem; }
.dl-reorder { display: flex; }          /* the defect: order reverses DOM sequence */
.dl-reorder .dl-r1 { order: 1; }
.dl-reorder .dl-r2 { order: 2; }
.dl-reorder .dl-r3 { order: 3; }
.dl-inorder span { margin-right: .5rem; }
.dl-round { border-radius: 999px; }
.dl-skip { position: absolute; left: -9999px; }
.dl-skip:focus { position: static; }

/* text group. Several of these rules ARE the defect: the contrast values and
   the fixed sizing are the thing under test, not incidental styling. */
.dl-contrast-fail { color: #9a9a9a; background: #ffffff; }   /* 2.81:1 — under 3, so it fails at any text size */
.dl-contrast-pass { color: #595959; background: #ffffff; }   /* 7.0:1 */
.dl-large-contrast-fail { font-size: 24px; font-weight: 700; color: #a8a8a8; background: #fff; } /* 2.3:1 — under 3 */
.dl-nc-fail { border: 1px solid #d6d6d6; background: #fff; } /* border 1.4:1 against page */
.dl-nc-pass { border: 1px solid #595959; background: #fff; } /* 7.0:1 */
.dl-fixed-box { width: 260px; height: 44px; overflow: hidden; }
.dl-fixed-text { font-size: 12px; margin: 0; }
.dl-fluid-box { max-width: 26em; }
.dl-spacing-clip { height: 3.2em; overflow: hidden; }        /* clips when spacing grows */
.dl-spacing-ok { overflow: visible; }
.dl-c-red { color: #d4351c; }
.dl-c-green { color: #00703c; }
.dl-tag { color: #0b0c0c; }
.dl-tip-bad .dl-tip-bubble, .dl-tip-good .dl-tip-bubble { display: none; border: 1px solid #767676; padding: .2rem .4rem; }
.dl-tip-bad:hover .dl-tip-bubble { display: inline; }        /* hover only, vanishes on move */
.dl-tip-good:hover .dl-tip-bubble, .dl-tip-good:focus .dl-tip-bubble, .dl-tip-good .dl-tip-bubble:hover { display: inline; }

/* keyboard group. The focus rules ARE the defect where marked. */
.dl-kb-fake { display: inline-block; padding: .35rem .8rem; border: 1px solid #767676; border-radius: 4px; cursor: pointer; }
.dl-trap-box { display: inline-block; padding: .25rem; border: 1px dashed #767676; }
.dl-nofocus:focus { outline: none; }                    /* the defect: no visible focus */
.dl-yesfocus:focus-visible { outline: 3px solid #0b0c0c; outline-offset: 2px; }
/* 2.4.11 prohibits only a FULLY hidden focused control; a partial overlap is
   a pass. So the bar is tall enough to swallow the whole button — this is
   F110, same as the header case but through a sticky bottom bar. */
.dl-obscure-wrap { position: relative; height: 6rem; overflow: hidden; }
.dl-obscured { position: absolute; top: 3.2rem; left: 0; }
.dl-not-obscured { position: absolute; top: .3rem; left: 0; }
.dl-sticky-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3rem; box-sizing: border-box; background: #0b0c0c; color: #fff; padding: .25rem .5rem; }

/* pointer + timing. The target sizes ARE the defect. */
.dl-target-small { display: inline-block; width: 18px; height: 18px; line-height: 18px; font-size: 10px; overflow: hidden; }
.dl-target-ok { display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; padding: 0 .3rem; }
.dl-swipe, .dl-swipe-ok, .dl-drag, .dl-drag-ok, .dl-motion, .dl-motion-ok,
.dl-timeout, .dl-timeout-ok, .dl-marquee, .dl-marquee-ok { border: 1px solid #767676; padding: .4rem .6rem; margin: .25rem 0; }
.dl-scroll { display: inline-block; animation: dl-slide 6s linear infinite; }
@keyframes dl-slide { from { transform: translateX(0); } to { transform: translateX(3rem); } }
@media (prefers-reduced-motion: reduce) { .dl-scroll { animation: none; } }

/* media group. */
.dl-media { max-width: 100%; }
.dl-flash, .dl-flash-ok { border: 1px solid #767676; padding: .4rem .6rem; margin: .25rem 0; }
.dl-flash { animation: dl-flash 0.2s steps(2) infinite; }        /* 5 per second */
/* The pass twin stops inside five seconds, so it cannot draw a 2.2.2 flag. */
.dl-flash-ok { animation: dl-flash 1s steps(2) 4; }              /* 1 per second, ends at 4s */
@keyframes dl-flash { 0% { background: #fff; } 100% { background: #ffd; } }
@media (prefers-reduced-motion: reduce) { .dl-flash, .dl-flash-ok { animation: none; } }

/* links + status. */
.dl-help-icon { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #1d70b8; vertical-align: -1px; }
.dl-help-block { border: 1px solid #767676; padding: .4rem .6rem; margin: .25rem 0; }
.dl-status-out { display: inline-block; min-width: 8rem; }

/* layout group. The fixed width and the orientation rule ARE the defects. */
.dl-reflow-bad { width: 500px; }
.dl-reflow-ok { max-width: 100%; }
.dl-orient-nag { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .dl-orient-lock { display: none; }
  .dl-orient-nag { display: block; }
}
.dl-txn { border: 1px solid #767676; padding: .5rem .75rem; margin: .25rem 0; }

/* depth cases. */
.dl-autosubmit, .dl-explicit { border: 1px solid #767676; padding: .5rem .75rem; margin: .25rem 0; }
.dl-header-wrap { position: relative; height: 5rem; overflow: hidden; border: 1px solid #767676; }
/* Tall enough to cover the control completely: F110 is total occlusion,
   not the partial overlap the sticky-bar case already covers. */
/* z-index matters: the header precedes the button in the DOM, so without it
   the button painted on top and nothing was actually hidden. */
.dl-fixed-header { position: absolute; top: 0; left: 0; right: 0; height: 3.5rem; z-index: 1; background: #0b0c0c; color: #fff; padding: .25rem .5rem; }
.dl-under-header { position: absolute; top: 1.2rem; left: 1rem; }

/* 1.1.1 depth cases. */
.dl-ascii { font-family: monospace; line-height: 1.1; margin: 0; }
.dl-lookalike { font-size: 1.1rem; }

/* 1.3.1 / 1.3.2 / 4.1.2 / 2.1.1 depth cases. */
.dl-ascii-table { font-family: monospace; white-space: pre; margin: 0; }
.dl-spaced-word { letter-spacing: 0; }
.dl-fake-link { color: #1d70b8; text-decoration: underline; cursor: pointer; }
.dl-custom-toggle, .dl-real-toggle { display: inline-block; border: 1px solid #767676; border-radius: 4px; padding: .3rem .7rem; cursor: pointer; }
.dl-tablist { list-style: none; display: flex; gap: .5rem; padding: 0; margin: 0; }
.dl-tab { border: 1px solid #767676; padding: .25rem .6rem; cursor: pointer; }

/* final depth cases. The contrast, sizing and blink rules ARE the defects. */
.dl-symbol { color: #d4351c; }
.dl-hard-lock { border: 1px solid #767676; padding: .4rem .6rem; }
.dl-f81-error { border: 2px solid #d4351c; }              /* colour only, no text */
.dl-bg-image { background-image: url(../assets/text-as-image.svg); background-size: cover; padding: 1rem; }
.dl-bg-text { color: #f0f0f0; margin: 0; }                /* fails over a light patch */
/* F80: the control's box is pinned in pixels, so enlarging the text does not
   enlarge the field and the value is clipped instead. */
.dl-fixed-control { font-size: 12px; width: 120px; height: 20px; line-height: 20px; box-sizing: border-box; overflow: hidden; }
.dl-vw-text { font-size: 1.1vw; }                         /* ignores user text size */
.dl-server-redirect { border: 1px solid #767676; padding: .4rem .6rem; }
/* 20 one-second iterations: the blink really stops after 20s, matching
   data-blink-seconds, and 20s is far past the five-second limit. The
   scripted sibling blinks from its own setInterval, not from here. */
.dl-blink { animation: dl-blink 1s steps(2) 20; }
@keyframes dl-blink { 0% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dl-blink { animation: none; } }
.dl-far-spacer { height: 4rem; overflow: hidden; color: #595959; }
.dl-far-dialog, .dl-near-dialog { border: 1px solid #767676; padding: .4rem .6rem; }