/* WON-181: the drill layer, the result box, the Sources block and the footer links, in v3.1's own tokens.
   v31.css stays Chris's stylesheet byte for byte; everything this page adds lives here. */

html.cc31-lock,
html.cc31-lock body { overflow: hidden; }

/* ===== DRILL LAYER (spec §6.2) ================================================================================= */
/* The layer scrolls and the iframe keeps the 640px the drill needs (#app min-height, body overflow hidden), so on a
   short phone the drill's last row is reached by scrolling the layer, not cut off (plan decision 2). */
.cc31-drill { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--charcoal); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cc31-drill[hidden], .cc31-res[hidden] { display: none; }
.cc31-drill__bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 6px 0 16px; border-bottom: 1px solid rgba(255,255,255,.12); color: #c9d3d9; font: 700 12px/1.2 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.cc31-drill__frame { flex: 1 0 auto; display: block; width: 100%; min-height: 640px; border: 0; background: var(--charcoal); }
.cc31-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: inherit; font: 400 28px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.cc31-x:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* ===== RESULT BOX (spec §6.3) ================================================================================== */
.cc31-res { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(11,17,22,.72); overflow-y: auto; }
.cc31-res__box { width: min(560px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--white); color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow); }
.cc31-res__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 4px 20px; border-bottom: 1px solid var(--line); font: 800 13px/1.2 Manrope, Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.cc31-res__body { padding: 20px 22px 24px; }
.cc31-res__score { font: 800 64px/1 Manrope, Inter, system-ui, sans-serif; }
.cc31-res__score small { margin-left: 2px; font-size: 28px; }
.cc31-res__band { margin: 10px 0 6px; font-weight: 700; }
.cc31-res__weak { margin: 0 0 18px; color: var(--muted); }
.cc31-res__weak b { color: var(--text); }
.cc31-res__mail { padding-top: 16px; border-top: 1px solid var(--line); }
.cc31-res__mail h3 { margin: 0 0 6px; font: 800 18px/1.25 Manrope, Inter, system-ui, sans-serif; }
.cc31-res__mail p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.55; }
#cc31-res-form { display: flex; flex-wrap: wrap; gap: 8px; }
#cc31-res-form[hidden] { display: none; }
#cc31-res-email { flex: 1 1 220px; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; font: 500 16px Inter, system-ui, sans-serif; }
#cc31-res-email:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.cc31-res__mail .cc31-res__msg { margin: 10px 0 0; color: var(--green-text); font-weight: 700; }
.cc31-res__mail .cc31-res__msg.is-error { color: #b42318; }
.cc31-res__mail .cc31-res__micro { margin: 10px 0 0; font-size: 12px; }
.cc31-res__skip { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--muted); font: 500 14px Inter, system-ui, sans-serif; text-decoration: underline; cursor: pointer; }
.cc31-res__buy { width: 100%; margin-top: 14px; }
.cc31-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ===== SOURCES AND CLAIMS, FOOTER LINKS (claims ledger C39, C40) =============================================== */
.cc31-sources { padding: 48px 0; }
.cc31-sources ol { margin: 12px 0 0; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.cc31-sources a { text-decoration: underline; }
.footer .cc31-legal { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 4px; }
.footer .cc31-legal a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-size: 12px; text-decoration: underline; }

/* ===== TAP TARGETS: 44px on every control (WON-181; inline prose links are exempt) ======================== */
.nav-login { display: inline-flex; align-items: center; min-height: 44px; }
summary { padding: 11px 0; margin: -11px 0; }
.sticky-mobile .btn-sm { min-height: 44px; }
.nav-inner > a[aria-label] { display: inline-flex; align-items: center; min-height: 44px; }
.quote small a { display: inline-flex; align-items: center; min-height: 44px; }