/* Bubble Word Jam V2: additions only. Existing colours, fonts and cards come from range-base.css / bwj.css / bwj-v6.css (unchanged); this file adds layout for the new components and accessibility treatment. */
:where(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--gold,#ffcf4a);outline-offset:2px}
html{scroll-padding-top:12px}
.ac,.vp,.cblock,.bwj-dcard,.bwj-dgroup,.bwj-dbatch{scroll-margin-top:14px}
.wd,.cat-n,.jb,.bwj-res p{overflow-wrap:anywhere}
.bwj .wrap{min-width:0}
/* Puzzle Set tabs only exist when JavaScript can drive them; without it every recorded set stays readable in source order */
.vsel{display:none}
.js .vsel{display:block}
.vp[hidden]{display:none!important}
.vbtn{min-height:44px}
.srcrec{margin:14px 0 0;font-size:13px;color:var(--faint,#bcb4de)}
.srcrec summary{cursor:pointer;min-height:32px;display:flex;align-items:center;font-weight:700;color:var(--mut,#ddd6f3)}
.srcrec p{margin:6px 0 0}
.lnb,.btn-copy,.btn-s,.navbtn{min-height:44px}
.btn-s{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
/* hub opening viewport: title, exact-level form, tool shortcuts, examples */
.bwj-hubhero .head,.bwj-toolhero .head{margin:0 0 12px;font-size:clamp(24px,6.6vw,42px);line-height:1.1}
.bwj-hubhero .lvform{margin-top:6px}
.lvhelp{margin:8px 2px 0;font-size:13px;color:var(--mut,#ddd6f3)}
.lverr{margin:6px 2px 0;min-height:1.3em;font-size:14px;font-weight:700;color:var(--coral,#ff6a5c)}
.lvform input{min-height:48px;font-size:16px}
.go{min-height:48px}
.bwj-sc{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}
.bwj-sc .btn-s{flex:1 1 180px}
.bwj-try{margin:12px 0 0;font-size:13.5px;color:var(--mut,#ddd6f3)}
.bwj-try__l{display:block;font-family:var(--font-m,monospace);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.bwj-chip{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;margin:4px 8px 0 0;border:1px solid var(--line2,rgba(255,255,255,.2));border-radius:999px;color:var(--ink,#faf8ff);text-decoration:none;background:var(--glass,rgba(255,255,255,.06))}
.bwj-chip:hover{border-color:var(--cyan,#2bdcf2)}
.prose{max-width:780px}
.bwj-xl{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.bwj-ex{margin:12px 0}
.bwj-srcnote{margin-top:22px;font-size:13px;color:var(--faint,#bcb4de)}
/* collection jump list with verified previews */
.bwj-jump .jb{flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.25}
.jb-n{font-weight:800}
.jb-p{font-size:11.5px;opacity:.9}
.jb-s{font-size:11px;font-weight:700;color:var(--gold,#ffcf4a)}
.hstats.h4,.hstats.h5{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
/* search tools */
.bwj-tool{display:block;max-width:780px;margin-top:6px}
.bwj-tool label,.bwj-modes legend{display:block;font-weight:700;margin:12px 0 6px}
.bwj-modes{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bwj-modes legend{width:100%;padding:0}
.bwj-mode{position:relative;margin:0!important;font-weight:700}
.bwj-mode input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.bwj-mode span{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--line2,rgba(255,255,255,.2));background:var(--glass,rgba(255,255,255,.06))}
.bwj-mode input:checked+span{background:var(--gold,#ffcf4a);color:#241a40;border-color:var(--gold,#ffcf4a)}
.bwj-mode input:focus-visible+span{outline:3px solid var(--cyan,#2bdcf2);outline-offset:2px}
.bwj-tool textarea,.bwj-tool input[type=text],.bwj-tool select{display:block;width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid var(--line2,rgba(255,255,255,.2));background:rgba(0,0,0,.28);color:var(--ink,#faf8ff);font:inherit;font-size:16px}
.bwj-tool textarea{resize:vertical}
.bwj-tool #tool-help{margin:8px 0 0;font-size:13px;color:var(--mut,#ddd6f3)}
.bwj-tool-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.bwj-tool [role=status]{min-height:1.4em;margin:12px 0 0;font-weight:700;color:var(--gold2,#ffe79e)}
.bwj-tool-more{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
#tool-results{margin-top:6px}
.bwj-res__g{margin:18px 0 6px;font-family:var(--font-m,monospace);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold2,#ffe79e)}
.bwj-reslist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bwj-res{padding:14px;border-radius:14px;border:1px solid var(--line2,rgba(255,255,255,.2));background:var(--surf,#332f4e)}
.bwj-res p{margin:0 0 6px}
.bwj-res__t{font-weight:800}
.bwj-res__s,.bwj-res__m{font-size:13.5px;color:var(--mut,#ddd6f3)}
.bwj-res__c,.bwj-res__w{font-size:14px}
.bwj-res .btn-s{margin-top:6px}
/* Daily pools + icon boards */
.bwj-dgroup,.bwj-dbatch,.cblock{margin:10px 0}
.bwj-dgroup>summary,.bwj-dbatch>summary,.cblock>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700}
.bwj-dgrid{display:grid;gap:10px;margin-top:8px}
.bwj-dgroup__note,.srcline{font-size:13px;color:var(--mut,#ddd6f3)}
@media (max-width:420px){.bwj-jump .bwj-jump__list{grid-template-columns:repeat(2,minmax(0,1fr))}.bwj-sc .btn-s{flex-basis:100%}.hstats.h4,.hstats.h5{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* keyboard focus ring for the hub level input: the shared .rp2 .hsearch input{outline:0} removes the input ring and the wrapper showed none */
.rp2 .hsearch .sbox:focus-within{outline:3px solid var(--gold,#ffcf4a);outline-offset:3px}

/* V3 private QA (answer-first). Search form is directly under the H1; the intro paragraph, status and helper text follow the controls. Compaction below is scoped to the Finder/Daily form only and only at <=390px. */
.bwj-tool h2{margin:8px 0 12px}
.bwj-tool #bwj-finder-help,.bwj-tool #bwj-daily-help{margin:8px 0 0;font-size:13px;color:var(--mut,#ddd6f3)}
.bwj-about-stats{margin-top:16px}
@media (max-width:390px){
.bwj .scard.bwj-tool{padding:12px}
.bwj-tool label,.bwj-modes legend{margin:8px 0 6px}
.bwj-tool textarea{height:88px;min-height:88px;overflow:auto;padding:10px 12px}
.bwj-tool input[type=text],.bwj-tool select{min-height:44px;padding:8px 12px}
.bwj-tool .btn-s,.bwj-mode span{min-height:44px}
.bwj-tool-actions{margin-top:8px;gap:8px}
.bwj-tool [role=status]{margin:8px 0 0}
.bwj-tool #bwj-finder-help,.bwj-tool #bwj-daily-help{margin-top:8px}
}
/* the form now follows the H1 directly (the old intro paragraph used to provide this gap) */
.rp2 .bwj-toolhero h1.head{margin-bottom:12px}
/* fragment alignment: bwj-v6.css reserves --bwj-sm (112-188px) above every answer article for a sticky header that these pages do not have, so #level-N landed the heading 150-220px down the screen */
.bwj .bwj-ac{scroll-margin-top:14px}
/* author display:flex on .btn-s overrode the hidden attribute, so "Retry loading" was visible before any search; restore the intended hidden state (JS still toggles .hidden) */
.bwj-tool-more [hidden]{display:none!important}

/* V4 private QA (Job 17 A): answer-first mobile compaction for the 360 collection pages. <=390 CSS px ONLY; desktop (>=391px) is unchanged. */
.bwj .vsub-late{display:block;margin:12px 0 0}
@media (max-width:390px){
.bwj .bwj-jump{margin-top:10px}
.bwj .bwj-jump .bwj-jump__label{margin-bottom:8px}
.bwj .bwj-jump .bwj-jump__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bwj .bwj-jump .bwj-jump__list .jb{min-height:48px;padding:8px}
.bwj .bwj-jump .jb .jb-n{font-size:16px;line-height:1.25}
.bwj .bwj-jump .jb .jb-p,.bwj .bwj-jump .jb .jb-s{display:none}
.bwj .vsel .vlab{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.bwj .vsel{position:relative}
.bwj .vseg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.bwj .vbtn{min-height:44px;min-width:0;padding:6px 8px;overflow-wrap:anywhere}
.bwj .bwj-ac:first-child{padding-top:12px}
.bwj .ac-no{margin-bottom:10px}
.bwj .vsel{margin-bottom:8px}
}

/* V6 Daily srcline: long source identifiers wrap naturally instead of overflowing at <=320px */
.bwj-dailypage .bwj-dcard .srcline {
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}