/* =====================================================
   css/directory.css — home/directory view only.
   Additive to base.css; every new class is dir- prefixed
   and everything is scoped under the .dir-home wrapper,
   so nothing leaks into other views.
   ===================================================== */

/* ---------- keyboard focus: visible, calm, on the paper ---------- */
.dir-home :is(.fchip, .citychip, .rcard, .ph, .stat, #q):focus-visible{
  outline:2px solid var(--acc);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- filmstrip: real anchors, swipeable, edge-faded ----------
   base.css draws the tilted paper frames (.strip .ph); dir-scroll only
   turns the row into a horizontal scroller with a soft fade toward the
   end, so the cut-off photos read as "there is more" instead of a crop. */
.dir-home .strip a.ph{display:block;color:inherit;text-decoration:none}
.dir-scroll{
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  /* RTL: scroll starts at the right — keep the start crisp (14px)
     and fade the far end (30px) where more photos wait. */
  -webkit-mask-image:linear-gradient(to left, transparent 0, #000 14px, #000 calc(100% - 30px), transparent 100%);
          mask-image:linear-gradient(to left, transparent 0, #000 14px, #000 calc(100% - 30px), transparent 100%);
}
.dir-scroll::-webkit-scrollbar{display:none}
.dir-scroll .ph{scroll-snap-align:center}

/* ---------- search: the "/" keyboard hint ---------- */
.dir-qwrap{position:relative;display:inline-flex;align-items:center}
.dir-qwrap #q{padding-left:28px}
.dir-kbd{
  position:absolute;left:5px;top:50%;transform:translateY(-50%);
  font-family:"Heebo","Segoe UI",Arial,sans-serif;font-size:10.5px;line-height:1;
  color:#a8a294;border:1px solid var(--faint);border-radius:3px;padding:3px 6px;
  pointer-events:none;transition:opacity .15s;
}
.dir-qwrap:focus-within .dir-kbd,
.dir-qwrap.dir-hasq .dir-kbd{opacity:0}
@media (hover:none){
  .dir-kbd{display:none}
  .dir-qwrap #q{padding-left:4px}
}

/* ---------- filters: group divider + quiet sort row ---------- */
.dir-sep{color:var(--faint)}
.dir-sortrow{margin-top:2px}
.dir-sortlbl{font-size:11px;letter-spacing:2px;color:var(--soft)}

/* ---------- live result count ---------- */
.dir-count{
  text-align:center;font-size:12px;font-weight:300;color:var(--soft);
  letter-spacing:.8px;margin:0 0 18px;font-variant-numeric:tabular-nums;
  min-height:18px;
}

/* ---------- statline entries that double as links ---------- */
.dir-home a.stat{text-decoration:none;cursor:pointer}
.dir-home a.stat:hover .n,
.dir-home a.stat:hover .l{color:var(--acc)}

/* ---------- city chips as anchors + the expander ---------- */
.dir-home a.citychip{text-decoration:none}
.dir-home a.citychip[hidden]{display:none}
.dir-more{color:var(--acc);border-bottom-color:transparent;font-weight:500}

/* ---------- empty state: nothing under the cloche ---------- */
.dir-empty{text-align:center;padding:54px 0 28px}
.dir-empty[hidden]{display:none}
.dir-ink{width:64px;height:64px;margin:0 auto 16px;color:#c9c2b2}
.dir-et{font-size:clamp(22px,4vw,30px);font-weight:700;line-height:1.25}
.dir-ex{
  font-family:"Heebo","Segoe UI",Arial,sans-serif;
  font-size:13.5px;font-weight:300;color:var(--soft);line-height:2;
  margin:10px auto 20px;max-width:430px;
}

/* ---------- calm for those who ask for it ---------- */
@media (prefers-reduced-motion:reduce){
  .dir-scroll{scroll-snap-type:none}
  .dir-home .strip .ph,
  .dir-home .strip .ph img{transition:none}
}

/* ---------- the finder strip: dish search first ---------- */
.dir-home .dir-find{max-width:620px;margin:22px auto 0}
.dir-home .dir-findbar{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
  border:1.5px solid var(--ink);background:var(--card);border-radius:28px;
  padding:11px 18px;box-shadow:3px 4px 0 var(--faint);
  transition:transform .18s,box-shadow .18s;
}
.dir-home .dir-findbar:hover,
.dir-home .dir-findbar:focus-visible{transform:translate(-1px,-2px);box-shadow:4px 6px 0 var(--faint)}
.dir-home .dir-findmag{width:19px;height:19px;stroke:var(--soft2);stroke-width:1.8;fill:none;stroke-linecap:round;flex-shrink:0}
.dir-home .dir-findbar:hover .dir-findmag{stroke:var(--acc)}
.dir-home .dir-findph{flex:1;min-width:0;font-size:14.5px;color:var(--ph);font-weight:300;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dir-home .dir-findgo{font-size:11.5px;color:var(--acc);font-weight:600;letter-spacing:.5px;white-space:nowrap}
.dir-home .dir-findchips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:11px}
.dir-home .dir-findchip{
  text-decoration:none;color:var(--soft);font-family:var(--sans);font-size:11.5px;letter-spacing:.2px;
  border:1px solid var(--faint);border-radius:13px;padding:3px 10px;background:var(--card);
  display:inline-flex;align-items:center;gap:6px;transition:color .15s,border-color .15s;
}
.dir-home .dir-findchip:hover{color:var(--acc);border-color:var(--acc)}
.dir-home .dir-findn{font-size:9px;color:var(--mut);background:var(--faint2);border-radius:7px;padding:0 5px;font-weight:600}
@media (max-width:640px){
  .dir-home .dir-find{margin-top:16px}
  .dir-home .dir-findph{font-size:13px}
  .dir-home .dir-findgo{display:none}
}
@media print{.dir-home .dir-find{display:none}}