/* C2 · Browse / HSK & Dictionary — canvas "Browse" board. Search page reuses the search box + buttons. */
main.page:has(.bw){padding:40px 40px 72px}
@media (max-width:760px){main.page:has(.bw){padding:24px 20px 40px}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bw{display:flex;flex-direction:column;gap:28px;min-width:0}
.bw-h1{margin:0!important;font-size:26px!important;font-weight:700;line-height:normal}
.bw-h1 .zh{font-weight:500;color:var(--muted)}

.bw-search{height:52px;box-sizing:border-box;background:var(--card);border:1.5px solid var(--line);border-radius:14px;display:flex;align-items:center;gap:10px;padding:0 16px;color:var(--text-2)}
.bw-search:focus-within{border-color:var(--ink)}
.bw-search input{flex:1;min-width:0;height:100%;border:0;outline:none;background:transparent;font-family:var(--font-ui);font-size:16px;color:var(--ink)}
.bw-search input::placeholder{color:var(--muted)}

.bw-tabs{display:flex;gap:6px;flex-wrap:wrap}
.bw-hsk{display:flex;flex-direction:column;gap:14px}
.bw-levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(96px,100%),1fr));gap:8px}
.bw-level{min-height:64px;box-sizing:border-box;border-radius:14px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none}
.bw-level b{font-size:16px}.bw-level span{font-size:12px;color:var(--text-2)}
.bw-level:hover{border-color:var(--text-2)}
.bw-level.is-on{border-color:var(--red);background:var(--sel)}
.bw-note{margin:0;color:var(--text-2)}
.bw-note a{display:inline-flex;align-items:center;min-height:44px}

/* buttons: canvas 40px, kept at 44px for touch */
.bw-btn{height:44px;box-sizing:border-box;padding:0 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-family:var(--font-ui);font-size:13px;font-weight:400;display:inline-flex;align-items:center;justify-content:center;gap:4px;text-decoration:none;cursor:pointer;white-space:nowrap}
.bw-btn:hover{border-color:var(--text-2)}
.bw-btn[aria-pressed=true],.bw-btn.is-red{border-color:var(--red);background:var(--red);color:var(--on-red);font-weight:600}
.bw-view,.bw-pdf{font-weight:600}
.bw-view[aria-pressed=true]{background:var(--soft);border-color:var(--line);color:var(--ink)}
.bw-btn.is-red:hover{background:var(--red-d);border-color:var(--red-d);color:var(--on-red)}
.bw-btn.is-disabled{color:var(--muted);cursor:default;opacity:.7}
.bw-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.bw-group{display:flex;gap:6px;flex-wrap:wrap}
.bw-results-t{margin:0;font-size:17px;font-weight:700}

.browse-results{display:flex;flex-direction:column;gap:14px;min-width:0}
.browse-list{background:var(--card);border-radius:16px;padding:4px 16px}
.browse-list .word-row{min-width:0}
.browse-list .word-row:first-child{border-top:0}
.browse-list .wr-en{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.bw-st.is-known{background:var(--green-t);color:var(--green-d)}
.bw-st.is-due{background:var(--gold-t);color:var(--gold)}
.bw-st.is-learning{background:var(--blue-t);color:var(--blue)}
.bw-st.is-new{background:var(--soft);color:var(--text-2)}
.browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(104px,100%),1fr));gap:8px}
.browse-grid .char-tile{min-width:0}
.browse-grid .ct-m{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browse-grid .char-tile[data-len="3"] .ct-c{font-size:26px}
.browse-grid .char-tile[data-len="4"] .ct-c{font-size:20px}
[data-pane][hidden],.is-filtered{display:none!important}
.empty{margin:0;padding:24px;background:var(--card);border:1px dashed var(--line);border-radius:16px;color:var(--text-2)}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pager-n{color:var(--text-2);font-size:14px}

/* By pinyin / by radical cards */
.bw-card{background:var(--card);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.bw-radicals{gap:14px}
.bw-tones{display:flex;gap:6px;flex-wrap:wrap}
.bw-tones .bw-btn{font-weight:600}
.bw-tones .bw-btn.tone-1{color:var(--tone1)}.bw-tones .bw-btn.tone-2{color:var(--tone2)}.bw-tones .bw-btn.tone-3{color:var(--tone3)}.bw-tones .bw-btn.tone-4{color:var(--tone4)}
.bw-tones .bw-btn.is-on{border-color:currentColor;background:var(--sel)}
.bw-sound{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:8px}
.bw-sound a{text-decoration:none;color:var(--ink);min-height:56px;box-sizing:border-box;padding:8px 12px;border-radius:12px;background:var(--paper);display:flex;align-items:center;gap:10px;min-width:0}
.bw-sound a:hover{background:var(--red-t)}
.bw-sound .zh{font-size:26px}
.bw-sound-t{display:flex;flex-direction:column;font-size:13px;min-width:0}
.bw-sound-t span:last-child{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-sound-t .tone-1{color:var(--tone1)}.bw-sound-t .tone-2{color:var(--tone2)}.bw-sound-t .tone-3{color:var(--tone3)}.bw-sound-t .tone-4{color:var(--tone4)}
.bw-pick{margin:0;font-size:14px;color:var(--text-2)}
.bw-az summary{display:flex;align-items:center;min-height:44px;font-size:13px;color:var(--text-2);cursor:pointer}
.bw-az-g h3{margin:8px 0 6px;font-size:13px;font-weight:600;color:var(--text-2)}
.bw-az-items{display:flex;flex-wrap:wrap;gap:6px}
.bw-az-items a{min-width:44px;min-height:44px;box-sizing:border-box;padding:0 10px;border-radius:10px;background:var(--paper);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:14px;text-decoration:none}
.bw-az-items a:hover{background:var(--red-t)}
.bw-az-items a.is-on{background:var(--red);color:var(--on-red)}
.bw-rad-g{display:flex;flex-direction:column;gap:8px}
.bw-rad-g h2{margin:0;font-size:13px;font-weight:600;color:var(--text-2)}
.bw-rad-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(56px,100%),1fr));gap:6px}
.bw-rad-items a{text-decoration:none;color:var(--ink);min-height:56px;box-sizing:border-box;border-radius:10px;background:var(--paper);border:2px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center}
.bw-rad-items a:hover{background:var(--red-t)}
.bw-rad-items a.is-on{border-color:var(--red);background:var(--sel)}
.bw-rad-items b{font-size:22px;font-weight:500;line-height:1.3}
.bw-rad-items span{font-size:11px;color:var(--text-2)}
.bw a:focus-visible,.bw button:focus-visible,.bw summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}