.ss-app{font-size:1rem;line-height:1.65;max-width:1150px}.ss-app h2{font-size:1.7rem;margin-bottom:8px}.ss-app h3{font-size:1.15rem}.ss-app button,.ss-app a,.ss-related a{min-height:44px}.ss-app a,.ss-related a{color:var(--accent);text-underline-offset:4px}.ss-top,.ss-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:20px}.ss-top{justify-content:space-between}.ss-top label{max-width:320px}.ss-app small,.ss-badge{font-size:.875rem}.ss-badge{display:inline-block;border:1px solid var(--line);border-radius:30px;padding:3px 10px;color:var(--muted)}.ss-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:16px;margin:22px 0}.ss-pattern{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:22px;border:1px solid var(--line);background:var(--panel);border-radius:16px;color:inherit;text-decoration:none}.ss-pattern strong{font-size:2rem;letter-spacing:normal}.ss-pattern:hover{border-color:var(--accent);background:var(--soft)}.ss-note,.ss-related{border-left:3px solid var(--accent);background:var(--soft);padding:16px 20px;border-radius:0 12px 12px 0;margin:18px 0}.ss-note p{margin:4px 0}.ss-sound,.ss-practice,.ss-search-result{padding:22px;border:1px solid var(--line);background:var(--panel);border-radius:16px;margin:18px 0}.ss-sound-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}.ss-ipa{font-size:1.65rem;font-family:inherit}.ss-word-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.ss-word{display:flex;flex-direction:column;gap:2px;align-items:flex-start;font-size:1.25rem;min-width:100px;padding:12px 16px}.ss-highlight{color:inherit;background:transparent;border-bottom:3px solid var(--accent);font-weight:700;padding:0 1px}.ss-app button[aria-pressed=true]{border:2px solid var(--accent);background:var(--soft)}.ss-compare{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:center}.ss-compare>div{background:var(--soft);padding:18px;border-radius:12px;min-width:0}.ss-compare .ss-word{min-width:0}.ss-feedback{padding:14px;border:1px solid var(--line);background:var(--soft);border-radius:10px;margin:16px 0}.ss-buckets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:12px;margin:18px 0}.ss-bucket{border:1px solid var(--line);padding:15px;border-radius:12px}.ss-bucket button{width:100%;margin-bottom:12px}.ss-bucket ul{padding-left:20px}.ss-search{display:block;max-width:620px}.ss-search-result h3{margin-bottom:4px}.ss-dialog{max-width:620px;max-height:85dvh;overflow:auto}.ss-dialog h2{font-size:2rem}.ss-dialog dl{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ss-dialog dd{margin:0}.ss-app :focus-visible,.ss-related a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.ss-app button:disabled{opacity:.65;cursor:default}.ss-audio-status{min-height:1.6em;color:var(--muted);font-size:.875rem}.ss-mode-tabs{display:flex;flex-wrap:wrap;gap:8px}.ss-app .ss-sorting-word{font-size:1.15rem}.ss-app .ss-quiz-word{font-size:2.5rem;margin:20px 0}.ss-app .ss-subtitle{color:var(--muted)}
.ss-app aside.ss-note{display:block;border-right:0}
@media(max-width:600px){.ss-app h2{font-size:1.4rem}.ss-sound,.ss-practice{padding:16px}.ss-compare{grid-template-columns:1fr}.ss-compare>strong{text-align:center}.ss-top{align-items:stretch;flex-direction:column}.ss-top label{max-width:none}.ss-dialog dl{grid-template-columns:1fr}.ss-dialog dd{margin-bottom:10px}}
.ss-category-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.ss-category-tabs button{font-size:.95rem;text-align:left;white-space:normal}.ss-minimal-link{display:inline-flex;align-items:center;padding:14px 18px;border:1px solid var(--accent);border-radius:12px;font-weight:600}.ss-app .ss-quiz-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px;margin:20px 0}.ss-app .ss-quiz-choices button{min-height:60px;padding:16px;text-align:left;font-size:1.35rem;line-height:1.6;white-space:normal;overflow-wrap:anywhere}.ss-thai-sound{font-size:1.3rem;font-weight:600}.ss-silent{background:transparent;color:inherit;border:1px dashed currentColor;text-decoration:line-through;text-decoration-thickness:1px;padding:0 2px}.ss-silent-label{font-size:1rem}.ss-pattern,.ss-sound,.ss-practice,.ss-search-result,.ss-bucket,.ss-top>*{min-width:0;overflow-wrap:anywhere}.ss-dialog{box-sizing:border-box;width:min(620px,calc(100vw - 24px));color:inherit;background:var(--panel)}.ss-app select{max-width:100%}
@media(max-width:600px){.ss-app .ss-quiz-choices{grid-template-columns:1fr}.ss-category-tabs{gap:6px}.ss-category-tabs button{flex:1 1 140px}.ss-search-result{padding:16px}.ss-pattern{padding:16px}.ss-app .ss-word{max-width:100%}}
.ss-focused>.ss-intro h2,.ss-focused>.ss-intro .ss-subtitle{display:none}.ss-focused>.ss-top,.ss-focused>.ss-actions{margin-bottom:10px}.ss-focused [data-ss-question],.ss-focused [data-mp-question]{scroll-margin-top:16px}

/* Compact catalog shares Vocabulary's row density and neutral table treatment. */
.page:has(#english-spelling:not([hidden]))>header{margin-bottom:16px}
.page:has(#english-spelling:not([hidden]))>header #subtitle{display:none}
.ss-app.ss-compact{max-width:none;font-size:15px;line-height:1.5}
.ss-compact-top,.ss-compact-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ss-compact-top{justify-content:space-between;margin-bottom:14px}
.ss-catalog-label{font-size:14px;color:var(--muted)}
.ss-accent{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.ss-accent select{width:172px}
.ss-compact button,.ss-compact select,.ss-compact input{font-size:15px;min-height:40px;padding:8px 10px;border-radius:7px}
.ss-compact .ss-minimal-link{padding:8px 12px;min-height:40px;font-size:14px;border-color:var(--line);border-radius:7px;text-decoration:none;font-weight:500;background:var(--panel)}
.ss-compact .ss-audio-status:empty{display:none}
.ss-compact .ss-audio-status{margin:0 0 10px;min-height:0}
.ss-catalog-controls{display:grid;grid-template-columns:minmax(200px,1fr) minmax(180px,260px);gap:12px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.ss-catalog-controls label{display:grid;gap:5px;color:var(--muted);font-size:13px}
.ss-catalog-controls input,.ss-catalog-controls select{height:42px;width:100%}
.ss-result-count{margin:12px 0 8px;color:var(--muted);font-size:13px}
.ss-table-wrap{max-width:100%;overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;scrollbar-width:thin}
.ss-table{border-collapse:collapse;width:100%;min-width:850px;text-align:left;font-size:15px;line-height:1.5}
.ss-table thead{background:var(--soft);color:var(--muted);font-size:13px}
.ss-table th,.ss-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.ss-table thead th{font-weight:600;white-space:nowrap}
.ss-table tbody th{font-weight:600;text-align:left}
.ss-table tbody tr:last-child>*{border-bottom:0}
.ss-table tbody tr:hover{background:color-mix(in srgb,var(--soft) 55%,var(--panel))}
.ss-table .ss-row-index{color:var(--muted);font-size:13px;width:40px}
.ss-table .ss-pattern-name{font-size:18px;text-decoration:none;display:inline-flex;align-items:center;min-height:32px;white-space:nowrap}
.ss-cell-ipa{color:var(--muted);font-size:14px;overflow-wrap:anywhere;max-width:220px}
.ss-examples{color:var(--muted);max-width:220px}
.ss-level{font-size:12px;color:var(--muted);white-space:nowrap}
.ss-table .ss-number{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ss-row-actions{display:flex;align-items:center;gap:10px;white-space:nowrap}
.ss-row-actions a{display:inline-flex;align-items:center;min-height:36px;font-size:14px;text-decoration:none}
.ss-table button{min-height:36px;padding:6px 10px;font-size:14px}
.ss-word-table{min-width:720px}
.ss-word-table .ss-word-name{border:0;background:transparent;color:var(--accent);padding:4px 0;text-align:left;font-size:16px;font-weight:600}
.ss-word-table .ss-highlight{border:0;padding:0}
.ss-context{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.ss-table .ss-table-empty{text-align:center;padding:32px;color:var(--muted)}
.ss-reference{margin:14px 0;color:var(--muted);font-size:13px}
.ss-reference summary{cursor:pointer;padding:6px 0}
.ss-reference p{margin:6px 0}
.ss-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.ss-compact .ss-top{margin:12px 0;gap:10px}
.ss-compact .ss-top h2{font-size:24px;margin:0}
.ss-compact .ss-top>div>a{display:none}
.ss-compact .ss-sound,.ss-compact .ss-practice{padding:16px;margin:12px 0;border-radius:10px}
.ss-compact .ss-note{padding:10px 14px;margin:12px 0;font-size:14px}
@media(max-width:700px){
 .ss-compact-top{align-items:flex-start;gap:8px}
 .ss-compact-tools{width:100%;gap:8px}
 .ss-accent{flex:1;min-width:170px}.ss-accent select{width:100%}
 .ss-compact-tools button,.ss-compact .ss-minimal-link{min-height:44px}
 .ss-catalog-controls{grid-template-columns:minmax(0,1fr);gap:8px;padding:10px}
 .ss-catalog-controls input,.ss-catalog-controls select{height:44px;font-size:16px}
 .ss-table th,.ss-table td{padding:8px 10px}
 .ss-table button,.ss-row-actions a,.ss-table .ss-pattern-name{min-height:44px}
}
