
.strata-landing { --directory-muted:#a7b1ba; }
.directory-section { border-bottom:1px solid var(--line); background:#0c1013; scroll-margin-top:30px; }
.directory-section > .shell.section { padding-top:64px; padding-bottom:72px; }
.directory-heading { display:grid; grid-template-columns:1.12fr 1fr; gap:4rem; align-items:end; margin-bottom:2.6rem; }
.directory-heading h2 { font-size:clamp(2rem,3.1vw,3rem); }
.directory-heading .eyebrow { margin-bottom:1.15rem; }
.directory-period { color:var(--orange); }
.directory-intro p { color:var(--directory-muted); font-size:1rem; line-height:1.8; max-width:490px; margin-bottom:.9rem; }
.directory-join-link { color:#e7ecef; font-size:.875rem; font-weight:650; display:inline-flex; align-items:center; gap:.55rem; }
.directory-join-link > span { color:var(--orange); font-size:1.15rem; }
.directory-filters { display:grid; grid-template-columns:minmax(190px,1.5fr) minmax(160px,.85fr) minmax(150px,.8fr) auto; gap:1rem; align-items:end; padding:1.25rem 1.4rem; border:1px solid #30383f; border-radius:9px; background:#151a1e; }
.directory-filters label { min-width:0; }
.directory-filters label > span:first-child { display:block; font-size:.75rem; font-weight:650; color:#b9c3cb; margin-bottom:.45rem; }
.directory-filters input[type="search"], .directory-filters select { width:100%; min-height:46px; color:#dfe6ec; background:#0d1216; border:1px solid #36424c; border-radius:5px; font:500 .85rem/1.5 var(--body); padding:.65rem .8rem; }
.directory-input-wrap { position:relative; }
.directory-input-wrap svg { position:absolute; top:14px; left:13px; width:18px; height:18px; fill:none; stroke:#8494a0; stroke-width:1.7; pointer-events:none; }
.directory-input-wrap input[type="search"] { padding-left:2.5rem; }
.directory-filters input::placeholder { color:#8c9aa6; opacity:1; }
.directory-filters :is(input,select):focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
.directory-filters select { padding-right:1.6rem; }
.directory-filters .directory-remote-filter { display:flex; position:relative; align-items:center; gap:.55rem; min-height:46px; margin-left:.2rem; color:#d6dee4; cursor:pointer; font-size:.8rem; white-space:nowrap; }
.directory-remote-filter input { position:absolute; opacity:0; width:36px; height:22px; margin:0; }
.directory-switch { width:35px; height:21px; border-radius:12px; background:#46525d; position:relative; flex:none; transition:background .15s; }
.directory-switch::before { content:""; position:absolute; left:3px; top:3px; width:15px; height:15px; border-radius:50%; background:white; transition:transform .15s; }
.directory-remote-filter input:checked + .directory-switch { background:var(--orange); }
.directory-remote-filter input:checked + .directory-switch::before { transform:translateX(14px); }
.directory-remote-filter input:focus-visible + .directory-switch { outline:2px solid var(--orange); outline-offset:4px; }
.directory-results-bar { display:flex; justify-content:space-between; align-items:center; min-height:66px; gap:1rem; }
.directory-results-bar p { color:#94a2ad; font-size:.8125rem; margin:0; }
.directory-results-bar strong { color:#e7edf1; font-weight:600; }
.directory-results-bar button { color:var(--orange); border:0; background:none; padding:.4rem 0; cursor:pointer; font:600 .8rem var(--body); }
.directory-results-bar button span { margin-left:.4rem; font-size:1.15rem; }
.directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; align-items:stretch; }
.directory-action { display:inline-flex; align-items:center; justify-content:center; gap:1.6rem; padding:.8rem 1.2rem; min-height:45px; border:1px solid #ff6428; border-radius:5px; background:var(--orange); color:#151719; font:750 .85rem/1.4 var(--body); cursor:pointer; white-space:nowrap; }
.directory-action > span { font-size:1.05rem; }
.directory-empty { text-align:center; padding:3.2rem 1.5rem; border:1px dashed #384751; border-radius:10px; background:#12191e; }
.directory-empty h3 { font-size:1.25rem; margin-bottom:.5rem; }
.directory-empty p { color:var(--directory-muted); font-size:.9375rem; }
.directory-empty-icon { display:block; font-size:2.2rem; color:var(--orange); margin-bottom:1rem; }
@media(hover:hover) and (pointer:fine) { .tuner-card:hover { border-color:#596771; transform:translateY(-2px); } .tuner-contact-button:hover { background:#ff642816; color:#ff986e; } .directory-action:hover { background:#ff7e4d; } }
@media(max-width:1150px) { .directory-filters { grid-template-columns:minmax(190px,1.3fr) minmax(140px,.85fr) minmax(140px,.8fr); } .directory-filters .directory-remote-filter { grid-column:1/-1; min-height:23px; margin:.25rem 0 0; } .tuner-card { padding:1.2rem; } .tuner-card-head { align-items:flex-start; gap:.75rem; } .tuner-avatar { width:47px; height:47px; font-size:1rem; } .directory-heading { gap:2rem; } }
@media(max-width:900px) { .directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .directory-heading { grid-template-columns:1fr; gap:1.25rem; } .directory-intro p { max-width:620px; } .directory-heading h2 { font-size:2.3rem; } .directory-heading .eyebrow { margin-bottom:.8rem; } .tuner-card { padding:1.5rem; } }
@media(max-width:760px) {  .directory-section { scroll-margin-top:48px; } .directory-filters { grid-template-columns:1fr 1fr; padding:1rem; } .directory-filters .directory-search { grid-column:1/-1; } .directory-heading { margin-bottom:1.75rem; } .directory-grid { gap:1rem; } .tuner-card { padding:1.2rem; } .directory-heading h2 { font-size:clamp(1.75rem,6.8vw,2.3rem); } }
@media(max-width:540px) { .directory-grid { grid-template-columns:1fr; } .tuner-card { padding:1.5rem; } .tuner-card-head { align-items:center; gap:1rem; } .tuner-avatar { width:55px; height:55px; font-size:1.15rem; } .tuner-card h3 { font-size:1.1rem; } .directory-filters { gap:.85rem; } .directory-filters select { font-size:.77rem; padding-left:.55rem; } .directory-filters .directory-remote-filter { margin-top:.35rem; } .directory-section .section { padding-block:3rem; } }

.directory-section [hidden]{display:none!important}
.directory-section button:disabled{opacity:.45;cursor:default}
.directory-results-bar .landing-icon { width:14px; height:14px; }
.directory-empty-icon .landing-icon { width:28px; height:28px; }

/* The same public cards, in a touch-native strip and an accessible full directory. */
.directory-grid.directory-carousel { display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#49545d transparent; padding-block:3px 14px; }
.directory-carousel > .tuner-card { flex:0 0 calc((100% - 2.4rem)/3); scroll-snap-align:start; }
.directory-carousel { cursor:grab; }
.directory-carousel.is-dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }
.directory-carousel:focus-visible { outline:2px solid var(--orange); outline-offset:5px; border-radius:10px; }
.directory-browse { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.5rem; padding-top:1.25rem; }
.directory-swipe-hint { color:var(--directory-muted); font-size:.8rem; margin:0; }
.directory-swipe-hint span { padding-left:.5rem; color:#e4ebef; }
.directory-carousel-controls { display:flex; align-items:center; gap:1rem; }
.directory-carousel-controls > span { min-width:90px; text-align:center; font-size:.8rem; color:#bac6cf; font-variant-numeric:tabular-nums; }
.directory-arrow { display:inline-grid; place-items:center; width:46px; height:46px; flex:none; border:1px solid #45515a; border-radius:50%; color:#f3f5f6; background:#161d22; font:500 1.3rem var(--body); cursor:pointer; }
.directory-view-all { justify-self:end; padding:.85rem 1.4rem; border:1px solid var(--orange); border-radius:6px; background:var(--orange); color:#171719; font:800 .85rem var(--body); cursor:pointer; min-height:46px; }
.directory-section :is(.directory-arrow,.directory-view-all):focus-visible { outline:2px solid #fff; outline-offset:4px; }
.directory-section :is(.directory-arrow,.directory-view-all):hover:not(:disabled) { filter:brightness(1.15); }
.directory-dialog-open { overflow:hidden; scrollbar-gutter:stable; }
.directory-dialog { --directory-muted:#a7b1ba; width:min(1240px,calc(100% - 64px)); max-width:none; height:min(900px,calc(100dvh - 64px)); max-height:none; padding:0; margin:auto; background:#0e1419; color:#ecf0f3; border:1px solid #3b4852; border-radius:16px; box-shadow:0 32px 100px #0009; overflow:hidden; }
.directory-dialog::backdrop { background:#03080bd4; backdrop-filter:blur(7px); }
.directory-dialog[open] { display:flex; flex-direction:column; }
.directory-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.6rem 2rem; border-bottom:1px solid #303b43; flex:none; }
.directory-dialog-header .eyebrow { font-size:.65rem; margin:0 0 .4rem; }
.directory-dialog-header h2 { font-size:clamp(1.6rem,3vw,2.25rem); margin:0; }
.directory-dialog-body { padding:1.5rem 2rem 2rem; overflow-y:auto; overscroll-behavior:contain; }
.directory-dialog-intro { color:var(--directory-muted); font-size:.9rem; margin:0 0 1.5rem; }
.directory-all-grid { align-items:stretch; }
.directory-all-footer { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:1.5rem; padding-top:1.75rem; }
.directory-all-footer p { font-size:.8rem; color:var(--directory-muted); margin:0; }
@media(max-width:1000px) { .directory-dialog .directory-filters { grid-template-columns:1fr 1fr; } .directory-dialog .directory-search { grid-column:1/-1; } .directory-all-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) { .directory-carousel > .tuner-card { flex-basis:calc((100% - 1.2rem)/2); } }
@media(max-width:600px) {
  .directory-grid.directory-carousel { gap:1rem; }
  .directory-carousel > .tuner-card { flex-basis:88%; padding:1.25rem; }
  .directory-browse { grid-template-columns:1fr auto; gap:1.2rem; }
  .directory-swipe-hint { font-size:.75rem; }
  .directory-carousel-controls { gap:.5rem; }
  .directory-carousel-controls > span { min-width:68px; font-size:.75rem; }
  .directory-view-all { width:100%; grid-column:1/-1; }
  .directory-dialog { width:100%; height:100dvh; border:0; border-radius:0; }
  .directory-dialog-header { padding:1.1rem 1.1rem; padding-top:max(1.1rem,env(safe-area-inset-top)); }
  .directory-dialog-body { padding:1.1rem 1.1rem max(1.5rem,env(safe-area-inset-bottom)); }
  .directory-all-grid { grid-template-columns:1fr; }
  .directory-dialog .directory-filters { padding:1rem; }
  .directory-dialog-intro { line-height:1.7; }
  .directory-section input[type="search"], .directory-section select { font-size:16px; }
}
@media(max-width:420px) { .directory-section .directory-filters { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .directory-section *, .directory-section *::before { scroll-behavior:auto!important; transition:none!important; } }

/* Touch: 44px+ targets and 16px fields, so iOS does not zoom on focus at any width. Where only the hit area
   should grow, equal negative margins (or a relative offset) keep the layout and text where they were. */
@media(pointer:coarse) {
  .directory-join-link { padding-block:7px; margin-block:-7px; }
  .directory-results-bar button { min-height:44px; }
  .directory-section input[type="search"], .directory-section select { font-size:16px; }
  /* Landing cards only: the signed-in Join Our Network and admin pages share tuner-listing-card.css, not this file. */
  .directory-section .tuner-contact-details { gap:0; }
  .directory-section .tuner-contact-details a { display:flex; align-items:center; min-height:44px; }
}
@media(pointer:coarse) and (max-width:1150px) { .directory-filters .directory-remote-filter { min-height:45px; margin-bottom:-22px; top:-11px; } }
