/* Ringcl geometry with the supplied Discord light-mode reference palette. */
:root{color-scheme:light;--brand:#5865F2;--brand-ink:#FFFFFF;--on-accent:#FFFFFF;--bg:#FBFBFB;--surface:#F3F3F4;--surface-soft:#E7E7E9;--surface-selected:#DDDDE0;--field:#D8D8DA;--line:#DFDFE1;--line-strong:#6C6D76;--text:#28282D;--muted:#6C6D76;--shadow:#D8D8DA;--panel-shadow:#D8D8DA;--control-edge:#D8D8DA;--overlay:color-mix(in srgb,var(--text) 35%,transparent)}
:root[data-theme=dark]{color-scheme:dark;--brand-ink:#FFFFFF;--bg:#111214;--surface:#2E2E32;--surface-soft:#323339;--surface-selected:#414248;--field:#1B1C20;--line:#414248;--line-strong:#61636E;--text:#FBFBFB;--muted:#DDDDE2;--shadow:#1B1C20;--panel-shadow:#1B1C20;--control-edge:#1B1C20;--overlay:color-mix(in srgb,var(--bg) 75%,transparent)}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}
.icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;font:600 20px/1 "Material Symbols Outlined";font-style:normal;letter-spacing:normal;text-transform:none;white-space:nowrap;font-feature-settings:"liga";-webkit-font-smoothing:antialiased}
button,.button{--button-edge:var(--field);--button-shadow:var(--field);--button-face:var(--surface-soft);min-width:0;font-size:12px;text-decoration:none}button[aria-pressed=true],.button.primary{--button-face:var(--brand);color:var(--brand-ink)}:root[data-theme=dark] button[aria-pressed=true],:root[data-theme=dark] .button.primary{--button-face:var(--surface-selected);color:var(--brand)}:is(button,.button):hover:not(:disabled){background:var(--surface-selected)}.icon-button{width:40px;height:40px;padding:0;flex:none}.ringcl-box{--box-edge:var(--field)}:is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--text);outline-offset:4px}.is-loading>.icon{animation:directory-spin 1s linear infinite}@keyframes directory-spin{to{transform:rotate(360deg)}}
.site-header{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}.header-inner,main{max-width:1168px;margin:auto;padding-inline:24px}.header-inner{min-height:78px;display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:16px}.brand{display:flex;align-items:center;gap:20px;text-decoration:none}.brand img{display:block;width:120px;height:auto;filter:brightness(0)}:root[data-theme=dark] .brand img{filter:none}.brand>span{border-left:1px solid var(--line);padding-left:20px;font-size:14px;font-weight:700}.site-header nav{display:flex;gap:12px;align-items:center}.suggest-button{padding-inline:14px}
main{padding-top:32px;padding-bottom:28px}.browse-controls{margin-bottom:30px}.search-row{display:flex;align-items:stretch;gap:12px}.search-field{display:flex;align-items:center;gap:12px;min-height:54px;padding:0 14px;flex:1;min-width:0;background:var(--surface)}.search-field>.icon{color:var(--muted)}.search-field input:not([type=checkbox]){height:50px;min-width:0;flex:1;padding:0;border:0;box-shadow:none;background:transparent;color:var(--text);font-size:14px;outline:none}.search-field:focus-within{--box-edge:var(--line-strong)}input::placeholder{color:var(--muted)}.search-field input:focus-visible{outline:none}input[type=search]::-webkit-search-cancel-button{display:none}.search-field kbd{font:12px/1 Consolas,monospace;color:var(--muted)}.clear-search{width:28px;height:28px;min-height:28px;padding:0}.clear-search .icon{font-size:16px;width:16px;height:16px}.search-row>#filterToggle{font-size:13px;padding-inline:18px}.count-badge{font-size:11px}.category-tabs{display:flex;flex-wrap:wrap;gap:12px;padding:20px 0}.category-tabs button{min-height:36px;padding:7px 12px;gap:7px}.category-tabs .icon{font-size:18px;width:18px;height:18px}
.quick-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;border-top:1px solid var(--line)}.quick-filters{display:flex;flex-wrap:wrap;gap:12px}.quick-filters button{min-height:34px;padding:6px 10px;font-size:11px;gap:6px}.quick-filters .icon{font-size:17px;width:17px;height:17px}.sort-controls{display:flex;gap:12px;align-items:center;flex:none}.sort-select{display:flex;gap:6px;align-items:center;position:relative;border:2px solid var(--field);border-radius:6px;box-shadow:3px 3px 0 var(--field);padding-left:10px;background:var(--surface-soft)}.sort-select select{appearance:none;width:auto;min-width:120px;height:34px;padding:0 26px 0 0;font-size:12px;box-shadow:none!important;border:0;background:none;color:var(--text)}.sort-select>.icon{font-size:18px;width:18px;height:18px;pointer-events:none}.sort-select>.icon:last-child{position:absolute;right:7px}.sort-controls>.icon-button{width:38px;height:38px;min-height:38px}.active-filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.active-filters button{font-size:11px;min-height:30px;padding:5px 8px}.active-filters .icon{font-size:14px;width:14px;height:14px}
.results-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.results-heading h2{margin:0;font-size:17px;letter-spacing:-.4px;font-weight:750}.results-heading h2 span{margin-left:8px;font:600 12px/1 system-ui,sans-serif;color:var(--muted)}.list-heading,.service-row{display:grid;grid-template-columns:40px minmax(150px,1.7fr) minmax(85px,.7fr) minmax(60px,.55fr) minmax(100px,.8fr) 66px 40px;align-items:center;gap:18px;padding-inline:20px}.list-heading{min-height:28px;margin-bottom:10px;color:var(--muted);font-size:11px}.list-heading>span:first-child,.list-heading>span:nth-child(6){text-align:center}.list-heading .icon{font-size:18px;width:18px;height:18px;vertical-align:middle}.service-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.service-row{min-height:88px;padding-block:16px;background:var(--surface);cursor:pointer}.service-row:hover{--box-edge:var(--line-strong)}.row-rank{display:flex;justify-content:center;align-items:center;color:var(--muted);font-size:19px;font-weight:750;font-variant-numeric:tabular-nums}.row-rank>.icon{font-size:22px;width:22px;height:22px}.row-brand{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.service-name{font-size:15px;font-weight:750;text-decoration:none;max-width:100%;overflow-wrap:anywhere;line-height:1.3}.service-name:hover{text-decoration:underline;text-underline-offset:3px}.service-domain{font-size:11px;color:var(--muted);overflow-wrap:anywhere}.row-facts{display:contents}.row-fact{font-size:12px}.vote-button{width:66px;min-height:38px;padding:6px 9px;gap:6px;font-variant-numeric:tabular-nums}.vote-button .icon{font-size:19px;width:19px;height:19px}.visit-button{width:40px;height:40px;min-height:40px;padding:0}.visit-button .icon{font-size:19px;width:19px;height:19px}.empty-state{text-align:center;padding:40px 20px;background:var(--surface)}.empty-state>.icon{width:30px;height:30px;font-size:30px;color:var(--muted)}.empty-state h3{font-size:16px;margin:12px 0 22px}.load-more{display:flex;align-items:center;flex-direction:column;gap:12px;margin-top:26px}.load-more .button{min-width:150px}.load-more p{margin:0;font-size:11px;color:var(--muted)}.site-footer{display:flex;align-items:center;gap:18px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}.footer-brand{font-weight:800;font-size:12px;text-decoration:none;margin-right:auto}.site-footer button{font-size:11px;min-height:34px;padding:6px 9px}.site-footer button .icon{width:16px;height:16px;font-size:16px}
.directory-dialog{width:min(510px,calc(100% - 36px));max-height:calc(100dvh - 48px);padding:24px;background:var(--surface);color:var(--text);overflow:auto}.directory-dialog::backdrop{background:var(--overlay)}.dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}.dialog-heading h2{display:flex;align-items:center;gap:8px;font-size:18px;margin:5px 0 0;letter-spacing:-.4px}.dialog-heading>.icon-button{width:32px;height:32px;min-height:32px}.dialog-heading>.icon-button .icon{font-size:18px;width:18px;height:18px}.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.filter-grid label,#reportForm label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--muted)}.select-field{position:relative;display:block}.select-field select{appearance:none;font-size:12px;height:40px;padding-right:32px;background:var(--surface-soft);border:2px solid var(--field);box-shadow:3px 3px 0 var(--field)}.select-field>.icon{position:absolute;right:8px;top:10px;font-size:18px;width:18px;height:18px;pointer-events:none}.feature-filter{padding:0;border:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:12px}.feature-filter legend{font-size:12px;color:var(--muted);margin-bottom:12px}.feature-filter label{position:relative;display:flex;align-items:center;gap:6px;min-height:32px;padding:6px 9px;font-size:11px;border:2px solid var(--field);box-shadow:3px 3px 0 var(--field);border-radius:6px;background:var(--surface-soft);cursor:pointer}.feature-filter input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}.feature-filter label>.icon{display:none;font-size:15px;width:15px;height:15px}.feature-filter label:has(input:checked){border-color:var(--brand);box-shadow:3px 3px 0 var(--brand)}.feature-filter input:checked+.icon{display:inline-flex}.feature-filter label:has(input:focus-visible){outline:2px solid var(--text);outline-offset:4px}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.dialog-actions .visit-button{width:44px;height:40px}.dialog-actions>.primary{min-width:120px}#detailBrand h2{font-size:23px;margin:0}#detailBrand p{font-size:12px;color:var(--muted);margin:4px 0 0}.detail-table{display:grid;grid-template-columns:1fr 1fr;margin:0;gap:0 20px}.detail-table>div{padding:12px 0;border-bottom:1px solid var(--line)}.detail-table dt{color:var(--muted);font-size:11px}.detail-table dd{font-size:13px;margin:5px 0 0}.detail-features{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:22px}.detail-feature{display:flex;gap:5px;align-items:center;font-size:12px}.detail-feature .icon{font-size:16px;width:16px;height:16px}.language-dialog{width:280px;position:fixed;top:72px;right:max(24px,calc((100vw - 1120px)/2));left:auto;bottom:auto;margin:0}.language-choice{display:flex;justify-content:space-between;margin-top:12px}.language-choice[aria-current=true]{--button-edge:var(--brand);--button-shadow:var(--brand)}#reportForm{display:grid;gap:18px}#reportForm :is(input,textarea){width:100%;background:var(--surface-soft);color:var(--text);border:2px solid var(--field);box-shadow:3px 3px 0 var(--field);border-radius:6px}#reportForm textarea{resize:vertical;min-height:95px;padding:10px 12px}#reportStatus{font-size:12px;margin:0;color:var(--muted)}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 36px);width:max-content;padding:12px 18px;background:var(--surface);color:var(--text);font-size:12px;z-index:100;pointer-events:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1000px){.list-heading,.service-row{grid-template-columns:28px minmax(120px,1.6fr) minmax(75px,.7fr) minmax(50px,.5fr) minmax(80px,.8fr) 60px 38px;gap:12px;padding-inline:16px}.vote-button{width:60px}.suggest-button>span:not(.icon){display:none}.suggest-button{width:40px;padding:0}.category-tabs,.quick-filters{gap:10px}}
@media(max-width:760px){.header-inner{min-height:70px;padding:14px 18px;gap:12px}.brand{gap:12px}.brand img{width:96px}.brand>span{padding-left:12px;font-size:12px}.site-header nav{gap:8px}.site-header .icon-button,.site-header .suggest-button{width:34px;height:34px;min-height:34px}.header-inner .icon{font-size:18px;width:18px;height:18px}main{padding:24px 18px}.search-field{min-height:50px;padding-inline:12px;gap:8px}.search-field input:not([type=checkbox]){font-size:12px;height:46px}.search-field kbd{display:none}.search-row{gap:10px}.search-row>#filterToggle{padding-inline:11px;font-size:12px}.category-tabs{gap:10px;padding-block:20px}.category-tabs button{font-size:11px;min-height:34px;padding:6px 9px;gap:5px}.category-tabs .icon{font-size:16px;width:16px;height:16px}.quick-row{flex-direction:column;align-items:stretch;gap:18px}.quick-filters button{font-size:10px;padding-inline:9px}.sort-controls{justify-content:flex-end}.browse-controls{margin-bottom:26px}.list-heading{display:none}.service-row{grid-template-columns:24px minmax(0,1fr) 58px 36px;gap:12px;min-height:100px;padding:15px 12px}.row-rank{grid-column:1;grid-row:1;font-size:16px}.row-rank .icon{font-size:20px;width:20px;height:20px}.row-brand{grid-column:2;grid-row:1;gap:3px}.service-name{font-size:14px}.service-domain{font-size:10px}.row-facts{grid-row:2;grid-column:2/-1;display:flex;flex-wrap:wrap;gap:5px 12px}.row-fact{font-size:10px;color:var(--muted)}.row-fact:empty{display:none}.fact-login:not(:empty)::before{content:attr(data-label) ' '}.fact-ads:not(:empty)::before{content:attr(data-label) ' '}.vote-button{grid-column:3;grid-row:1;width:58px;min-height:36px;font-size:11px;padding:6px;gap:5px}.visit-button{grid-column:4;grid-row:1;width:36px;height:36px;min-height:36px}.visit-button .icon{width:17px;height:17px;font-size:17px}.directory-dialog{padding:20px}.filter-grid{gap:16px 12px}.filter-grid label{font-size:11px}.filter-grid select{font-size:11px;padding-left:8px}.language-dialog{top:64px;right:18px}.site-footer{gap:12px;flex-wrap:wrap}.site-footer button{font-size:10px}.footer-brand{flex-basis:100%}}
@media(max-width:350px){.brand>span{display:none}.filter-grid{grid-template-columns:1fr}.quick-filters{gap:8px}.quick-filters button{padding-inline:7px}.service-row{column-gap:8px}}

/* Search, navigation, conditions and results each have one place. */
button,.button{--button-edge:var(--control-edge);--button-shadow:var(--control-edge);--button-face:var(--surface)}
button[aria-pressed=true],.button.primary{--button-face:var(--surface-soft);color:var(--text)}
:root[data-theme=dark] button[aria-pressed=true],:root[data-theme=dark] .button.primary{--button-face:var(--surface-selected);color:var(--brand)}
.header-inner{display:grid;grid-template-columns:auto minmax(220px,1fr) auto;gap:28px;min-height:82px;padding-block:18px}
.brand{gap:16px}.brand img{width:112px}.brand>span{padding-left:16px;font-size:13px}
.header-search{display:flex;min-width:0;gap:12px;align-items:center;max-width:520px;width:100%;justify-self:end}
.header-search .search-field{background:var(--bg);min-height:42px;padding-inline:12px;gap:10px;--box-edge:var(--control-edge)}
.header-search .search-field input:not([type=checkbox]){height:38px;font-size:12px}.header-search .search-field:focus-within{--box-edge:var(--line-strong)}
.header-search .clear-search{width:24px;height:24px;min-height:24px}.header-search .clear-search .icon{font-size:15px;width:15px;height:15px}
#filterToggle{position:relative;flex:none}#filterCount{position:absolute;top:-8px;right:-8px;display:grid;place-items:center;min-width:17px;height:17px;padding-inline:3px;border:1px solid var(--brand);border-radius:4px;background:var(--brand);color:var(--brand-ink);font-size:9px;line-height:1}
.site-header .header-actions{gap:10px}.header-actions .icon-button{width:38px;height:38px;min-height:38px}
main{padding-top:28px}.browse-controls{margin-bottom:28px}.browse-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.category-tabs{padding:0;gap:10px}.category-tabs button{min-height:34px;padding:6px 10px;font-size:11px}
.sort-controls{gap:10px}.sort-select{border-color:var(--control-edge);box-shadow:3px 3px 0 var(--control-edge);background:var(--surface)}.sort-select select{font-size:11px;height:30px;min-width:115px}.sort-controls>.icon-button{width:34px;height:34px;min-height:34px}
.filter-strip{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.filter-strip>button,.active-filters>button{min-height:30px;padding:5px 9px;font-size:11px;gap:6px}.filter-strip .icon{width:16px;height:16px;font-size:16px}
.active-filters{display:contents;margin:0}.active-filters .reset-filters{width:30px;height:30px;min-height:30px;padding:0}
button.is-applied{--button-edge:var(--brand);--button-shadow:var(--brand);--button-face:var(--surface-soft)}
.results-heading{justify-content:flex-start;gap:12px;margin-bottom:16px}.results-heading h1{font-size:16px;letter-spacing:-.3px;font-weight:750;margin:0}.results-heading h1>span{font-size:12px;margin-left:7px;color:var(--muted);font-weight:600}
.info-trigger{width:26px;height:26px;min-height:26px}.info-trigger>.icon{width:16px;height:16px;font-size:16px}
.list-heading,.service-row{grid-template-columns:36px minmax(160px,1fr) 64px 64px 64px 66px 40px;gap:24px}.service-row{min-height:78px;padding-block:14px;background:var(--surface)}
.list-heading>span:nth-child(n+3){display:flex;align-items:center;justify-content:center;gap:4px;font-size:10px}.list-heading>span .icon{width:15px;height:15px;font-size:15px}
.row-fact{display:flex;align-items:center;justify-content:center}.fact-indicator{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;color:var(--text);cursor:help;vertical-align:middle;border-radius:4px;outline-offset:3px}
.fact-indicator>.icon{width:22px;height:22px;font-size:22px}.fact-indicator[data-tip]::after{content:attr(data-tip);display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:7px 10px;border:2px solid var(--control-edge);border-radius:5px;background:var(--text);color:var(--bg);box-shadow:3px 3px 0 var(--control-edge);font:500 11px/1.6 system-ui,sans-serif;white-space:normal;width:max-content;max-width:240px;z-index:40;pointer-events:none}
.fact-indicator:is(:hover,:focus-visible,.tip-open)::after{display:block}.service-row:has(.fact-indicator:is(:hover,:focus-visible,.tip-open)){z-index:5;position:relative}
.detail-table{display:block;margin:0}.detail-table>div{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:48px;padding:9px 0}
.detail-table dt,.detail-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;flex:none}.detail-table dt>.icon,.detail-label>.icon{width:17px;height:17px;font-size:17px}
.detail-table dd{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin:0;font-size:12px;text-align:right;min-width:0}.detail-table .fact-indicator::after{left:auto;right:0;transform:none}
.detail-feature-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.detail-features{display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:5px;margin:0}.detail-feature{font-size:initial}.detail-feature .icon{font-size:20px;width:20px;height:20px}

.select-field select,.sort-select{background:var(--surface);border-color:var(--control-edge);box-shadow:3px 3px 0 var(--control-edge)}
.feature-filter label{border-color:var(--control-edge);box-shadow:3px 3px 0 var(--control-edge);background:var(--surface)}
#reportForm :is(input,textarea){background:var(--bg);border-color:var(--control-edge);box-shadow:3px 3px 0 var(--control-edge)}
@media(max-width:1050px){.header-inner{gap:20px}.brand>span{display:none}.brand img{width:108px}.list-heading,.service-row{grid-template-columns:30px minmax(140px,1fr) 50px 50px 50px 60px 38px;gap:18px}.browse-toolbar{gap:16px}.category-tabs{gap:9px}.category-tabs button{padding-inline:8px}.vote-button{width:60px}}
@media(max-width:760px){.header-inner{grid-template-columns:1fr auto;gap:16px;padding:14px 18px 18px;min-height:0}.brand{grid-column:1;grid-row:1}.brand img{width:104px}.brand>span{display:block;font-size:12px}.site-header .header-actions{grid-column:2;grid-row:1;gap:9px}.header-actions .icon-button{width:32px;height:32px;min-height:32px}.header-search{grid-row:2;grid-column:1/-1;justify-self:stretch;max-width:none;gap:12px}.header-search .search-field{min-height:40px}.header-search .search-field input:not([type=checkbox]){height:36px}.header-search #filterToggle{width:38px;height:38px;min-height:38px}.header-search kbd{display:none}main{padding-top:22px}.browse-toolbar{display:grid;grid-template-columns:1fr;gap:14px}.category-tabs{flex-wrap:nowrap;overflow-x:auto;padding:0 3px 5px 0;gap:10px}.category-tabs button{white-space:nowrap;flex:none;min-height:32px}.sort-controls{justify-content:flex-end}.filter-strip{margin-top:16px;padding-top:16px;gap:10px}.filter-strip>button,.active-filters>button{font-size:10px;padding-inline:8px}.results-heading{gap:10px}.results-heading h1{font-size:15px}.list-heading{display:none}.service-row{grid-template-columns:24px minmax(0,1fr) 58px 36px;gap:9px 12px;min-height:94px;padding:13px 12px}.row-facts{grid-column:2/-1;grid-row:2;gap:16px;align-items:center;justify-content:flex-start}.row-fact{gap:5px;font-size:9px;justify-content:flex-start}.row-fact:empty{display:none}.row-fact:not(:empty)::before{content:attr(data-label)}.row-fact .fact-indicator{width:22px;height:22px}.row-fact .fact-indicator>.icon{font-size:19px;width:19px;height:19px}.fact-indicator[data-tip]::after{max-width:190px}.vote-button{width:58px}.detail-table>div{gap:12px}.detail-feature-row{gap:7px}.detail-label{font-size:11px;gap:6px}.detail-features{gap:2px}.detail-feature{width:25px}.detail-feature>.icon{font-size:19px;width:19px;height:19px}.language-dialog{top:58px}}
@media(max-width:350px){.brand>span{display:none}.header-inner{gap:14px}.row-facts{gap:10px}.service-row{column-gap:8px}.detail-label>.icon{display:none}}

.category-tabs{scrollbar-width:none}.category-tabs::-webkit-scrollbar{display:none}

/* Selected filters share the recommendation button's border and offset shadow. */
.language-choice[aria-current=true]{--button-edge:var(--brand);--button-shadow:var(--brand);--button-face:var(--surface-soft);background:var(--button-face);color:var(--text)}
.category-tabs button[aria-pressed=true],.filter-strip button[aria-pressed=true],button.is-applied,.feature-filter label:has(input:checked){--button-edge:var(--brand);--button-shadow:var(--brand);--button-face:var(--surface-soft);background:var(--button-face);color:var(--text)}
.feature-filter label:has(input:checked){border-color:var(--brand);box-shadow:3px 3px 0 var(--brand)}
.category-tabs button[aria-pressed=true]:hover,.filter-strip button[aria-pressed=true]:hover,button.is-applied:hover{background:var(--surface-selected)}
:root[data-theme=dark] .category-tabs button[aria-pressed=true],:root[data-theme=dark] .filter-strip button[aria-pressed=true]{color:var(--text)}
:root[data-theme] button.primary,:root[data-theme] .button.primary{--button-edge:var(--brand);--button-shadow:var(--brand);--button-face:var(--surface-soft);background:var(--button-face);color:var(--text)}
:root[data-theme] button.primary:hover,:root[data-theme] .button.primary:hover{background:var(--surface-selected);color:var(--text)}
/* Keep the Ringcl face and offset shadow visible on recommended services. */
:root[data-theme] button.vote-button[aria-pressed=true]{--button-edge:var(--brand);--button-shadow:var(--brand);--button-face:var(--surface-soft);background:var(--button-face);color:var(--text)}
:root[data-theme] button.vote-button[aria-pressed=true]:hover{background:var(--surface-selected);color:var(--text)}
:root[data-theme=light] .service-row:hover{--box-edge:var(--field);background:var(--surface-soft)}
:is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
:root[data-theme] button.primary:focus-visible{outline-color:var(--brand);outline-offset:-4px}
.header-search .search-field:focus-within{--box-edge:var(--brand)}.header-search .search-field input:focus-visible{outline:none}
.sort-select:focus-within{border-color:var(--brand);box-shadow:3px 3px 0 var(--brand)}.sort-select select:focus-visible{outline:none}
.select-field select:focus-visible{outline:none;border-color:var(--brand);box-shadow:3px 3px 0 var(--brand)}
select option{background:var(--surface);color:var(--text)}
:root[data-theme=light] .feature-filter label:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:-2px}

.fact-indicator:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

:root[data-theme=dark] button[aria-pressed=true]{color:var(--text)}

/* The search, filters and column labels move as a single sticky area. */
html{scroll-padding-top:calc(var(--directory-chrome-height,300px) + 12px)}
.directory-chrome{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.directory-chrome .site-header{position:static}
.header-inner{max-width:none;grid-template-columns:auto minmax(0,1fr) auto;padding-inline:clamp(18px,3vw,48px)}
.header-search{max-width:none;justify-self:stretch}
.language-dialog{right:calc(clamp(18px,3vw,48px) + 48px)}
.directory-controls{max-width:1168px;margin:auto;padding:22px 24px 0}
.directory-controls .browse-controls{margin-bottom:20px}
.directory-controls .results-heading{margin-bottom:10px}
.directory-controls .list-heading{margin-bottom:0;min-height:34px;padding-bottom:5px}
main{padding-top:14px}

/* Dialog controls use the same surface, focus edge and offset shadow. */
.directory-dialog .language-choice{width:100%;min-height:42px;padding:10px 12px}
.directory-dialog .language-choice[aria-current=true]:hover{background:var(--surface-selected)}
#reportForm :is(input,textarea){font:inherit;min-width:0;border:2px solid var(--control-edge);box-shadow:3px 3px 0 var(--control-edge);transition:border-color 140ms ease,box-shadow 140ms ease,background-color 140ms ease}
#reportForm input{height:42px;padding:8px 11px}
#reportForm textarea{padding:10px 11px;line-height:1.6}
#reportForm :is(input,textarea):hover{border-color:var(--line-strong);box-shadow:3px 3px 0 var(--line-strong)}
#reportForm :is(input,textarea):focus{outline:none;border-color:var(--brand);box-shadow:3px 3px 0 var(--brand)}
#reportForm button.primary{justify-self:end;min-height:40px}
#reportStatus:empty{display:none}

/* Detail values and feature names are readable without hover. */
.details-dialog .detail-table dt{flex:0 1 auto;min-width:0}
.details-dialog .detail-table dd{flex:1 1 0;min-width:0}
.detail-value{display:inline-flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0;font-size:12px;line-height:1.6}
.detail-value>.icon{width:19px;height:19px;font-size:19px;flex:none}
.detail-value>span:not(.icon){min-width:0;overflow-wrap:anywhere}
.detail-feature-row{display:block;padding-block:16px}
.detail-feature-row>.detail-label{margin-bottom:12px}
.detail-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;min-width:0}
.detail-features .detail-feature{justify-content:flex-start;width:auto;height:auto;font-size:12px}
.dialog-actions .detail-visit{width:auto;padding:8px 12px;gap:7px}
@media(max-width:760px){
 .header-inner{grid-template-columns:1fr auto;padding-inline:18px;gap:14px}
 .language-dialog{right:18px}
 .directory-controls{padding:16px 18px 0}
 .directory-controls .browse-controls{margin-bottom:16px}
 .directory-controls .results-heading{margin-bottom:4px}
 .directory-controls .list-heading{display:flex;gap:18px;min-height:30px;padding:0 0 5px}
 .directory-controls .list-heading>span:is(:first-child,:nth-child(2),:nth-child(6),:nth-child(7)){display:none}
 .directory-controls .list-heading>span:nth-child(n+3){font-size:10px}
 .filter-strip{padding-top:12px;margin-top:12px}
 .browse-toolbar{gap:10px}
 main{padding-top:12px}
 .details-dialog .detail-table>div{gap:12px}
 .details-dialog .detail-table dt{font-size:11px}
 .detail-value,.detail-features .detail-feature{font-size:11px}
 .detail-features{gap:12px}
}

/* Result title and quick filters share one row. */
.directory-controls .browse-controls{margin-bottom:16px}
.results-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;margin-bottom:10px;border-top:1px solid var(--line)}
.results-toolbar .results-heading{flex:none;margin:0}
.results-toolbar .filter-strip{flex:1;min-width:0;justify-content:flex-end;gap:10px;margin:0;padding:0;border:0}
.results-toolbar .filter-strip>[data-quick]{white-space:nowrap}
.results-toolbar .active-filters>button{max-width:100%;overflow-wrap:anywhere}
@media(max-width:640px){
 .results-toolbar{gap:10px;padding-top:12px;margin-bottom:6px}
 .results-toolbar .filter-strip{gap:6px}
 .results-toolbar .quick-label{display:none}
 .results-toolbar .filter-strip>[data-quick]{width:30px;height:30px;min-height:30px;padding:0;flex:none}
}