/* Discover (#/discover): compact search, When pills, results + map, Looks view, filter sheet. */
.disc{padding:20px 0 24px}

/* ---------- top row: compact search + when + filters ---------- */
.dtop{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:4px 0 24px;border-bottom:1px solid var(--line)}
.dsearch{position:relative;display:flex;align-items:stretch;flex:0 1 460px;min-width:320px;height:58px;padding:4px;background:var(--bg);border:1px solid var(--line-strong);border-radius:18px;box-shadow:var(--shadow)}
.dseg{display:flex;min-width:0;flex:1 1 0}
.dseg[data-seg="what"]{flex:1.7 1 0}
.dseg + .dseg .dfield::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:var(--line)}
.dseg.on .dfield::before,.dseg.on + .dseg .dfield::before{opacity:0}
.dfield{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;min-width:0;padding:0 16px;border-radius:13px;text-align:left;transition:background-color .15s}
.dfield:hover,.dseg.on .dfield{background:var(--surface)}
.dfield small{font-size:12px;font-weight:650;letter-spacing:.01em;line-height:1.2}
.dfield b{font-weight:500;font-size:15px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfield .pl{position:absolute;left:14px;right:14px;bottom:4px;width:calc(100% - 28px);height:6px}
.dseg.on .dfield .pl{clip-path:inset(-6px -6px -6px -6px)}
.dsearch-go{flex:none;align-self:center;width:44px;height:44px;margin-left:4px;border-radius:13px;display:grid;place-items:center;background:var(--green);color:var(--on-green);transition:background-color .15s}
.dsearch-go:hover{background:var(--green-hover)}
.dsearch-go .ic{width:19px;height:19px}

.dpanel{position:absolute;z-index:30;top:calc(100% + 10px);left:0;width:min(580px, calc(100vw - 32px));background:var(--bg);border:1px solid var(--line-strong);border-radius:20px;box-shadow:var(--shadow-pop);padding:20px 22px 22px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s, transform .18s, visibility 0s .18s}
.dpanel-where{width:min(440px, calc(100vw - 32px))}
.dseg.on .dpanel,.dctl.pick .dpanel-days{opacity:1;visibility:visible;transform:none;transition:opacity .18s, transform .18s}
.dpanel h3,.ssheet h3{font-family:var(--ui);font-size:12.5px;font-weight:650;letter-spacing:.01em;margin:0 0 10px;color:var(--steel)}
.dq{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;margin:0 0 20px;border:1px solid var(--line-strong);border-radius:12px;transition:border-color .15s, box-shadow .15s}
.dq:focus-within{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent)}
.dq .ic{width:18px;height:18px;color:var(--steel)}
.dq input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:15.5px;padding:0;-webkit-appearance:none;appearance:none}
.dq input::placeholder{color:var(--steel)}
.dq input::-webkit-search-cancel-button{display:none}
.dhint{font-size:13px;color:var(--steel)}

/* phone search pill */
.dpill{display:none;align-items:center;gap:12px;width:100%;height:58px;padding:0 18px;border:1px solid var(--line-strong);border-radius:999px;box-shadow:var(--shadow);text-align:left;background:var(--bg)}
.dpill .ic{width:19px;height:19px}
.dpill span{display:flex;flex-direction:column;min-width:0}
.dpill b{font-weight:600;font-size:15px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpill small{font-size:13px;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.dctl{position:relative;display:flex;align-items:center;gap:8px;flex:1 1 420px;min-width:0}
.dwhen{display:flex;align-items:center;gap:8px;min-width:0}
.wpill{display:inline-flex;align-items:center;gap:7px;flex:none;height:38px}
.wpill .ic{width:16px;height:16px}
.fbtn{display:inline-flex;align-items:center;gap:8px;flex:none;height:38px;margin-left:auto}
.fbtn .ic{width:17px;height:17px}
.fcount{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-right:-4px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:12px;font-weight:700}
.dpanel-days{left:0;width:min(560px, calc(100vw - 32px))}
.dpanel-days .days{grid-template-columns:repeat(7,1fr);margin-top:12px}

/* ---------- heading row ---------- */
.dhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:28px 0 24px}
.dhead-t{min-width:0}
.dhead h1{font-size:clamp(28px, 2.6vw, 36px)}
.dmeta{margin-top:8px;font-size:14.5px;color:var(--steel)}
.dhead-r{display:flex;align-items:center;gap:14px;flex:none}
.dsort{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--steel)}
.dsort select{height:38px;padding:0 28px 0 4px;border:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666B72' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9.5 12 15.5l6-6'/%3E%3C/svg%3E") no-repeat right 4px center/16px;font-weight:600;font-size:14.5px;color:var(--ink);-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:8px}
.dsort select:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.dsort select option{background:var(--bg);color:var(--ink)}
.dview span{height:34px;padding:0 14px}

/* ---------- results + map ---------- */
.dsplit{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:40px;align-items:start}
.dres{grid-column:1 / 8;min-width:0}
.dmap{grid-column:8 / 13;position:sticky;top:88px;min-width:0}
.dmapbox{aspect-ratio:auto;height:calc(100vh - 112px);min-height:460px;max-height:820px}
.st.lit .st-name h3 a,.st.flash .st-name h3 a{background-size:100% 1.5px}
.st.flash .folio .ph{animation:dflash 1.2s var(--ease-part)}
@keyframes dflash{0%,40%{box-shadow:0 0 0 2px var(--green)}100%{box-shadow:0 0 0 2px transparent}}
.dempty{padding:40px 16px 48px}
.dempty .empty-title{font-size:26px}

.dreach{margin-top:24px}
.dreach-h{padding-top:8px}
.dreach-h h2{font-size:26px;margin:28px 0 6px}
.dgroup{margin-top:18px}
.dgroup-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:10px 0 4px;font-size:13.5px;color:var(--steel)}
.dgroup-h b{font-size:15px;font-weight:650;color:var(--ink)}
.dgroup .list .st:first-child{padding-top:16px}

/* looks view */
.dlooks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill, minmax(208px, 1fr));gap:28px 20px}
.dlooks .look .ph{aspect-ratio:4/5}
.dlooks-wrap .dreach .dlooks{margin-top:12px}

/* phone map pieces */
.dpeek{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center;background:var(--bg);border-radius:16px;padding:10px 40px 10px 10px;box-shadow:var(--shadow-pop)}
.dpeek[hidden]{display:none}
.dpeek-media .ph{border-radius:10px}
.dpeek-b{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.dpeek-n{display:flex;gap:8px;align-items:baseline}
.dpeek-n b{font-weight:650;font-size:15.5px}
.dpeek-n span{font-size:13px;font-weight:600;color:var(--steel)}
.dpeek-s{font-size:13px;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dpeek-s b{color:var(--ink);font-weight:600}
.dpeek .btn{margin-top:4px}
.dpeek-x{position:absolute;top:4px;right:4px;width:34px;height:34px}
.dmaptoggle{display:none}

/* ---------- filter sheet ---------- */
.fs{padding:20px 0;border-top:1px solid var(--line)}
.fs:first-child{border-top:0;padding-top:4px}
.fs h3{font-family:var(--ui);font-size:15px;font-weight:650;letter-spacing:0;margin:0 0 12px}
.fs .opts{margin:0;gap:8px}
.fs .opt small{font-size:12px;font-weight:500;color:var(--steel);margin-left:3px}
.fs .opt[aria-pressed="true"] small{color:var(--open-ink)}
.fs-note{font-size:13px;color:var(--steel);margin:-4px 0 12px}
.fs .opts + .fs-note{margin:12px 0 0}
.fs .segd + .fs-note{margin:10px 0 0}
.fs-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.fs-row b{font-weight:650;font-size:15px}
.fs .segd{width:100%}
.fs .segd label{flex:1}
.fs .segd span{justify-content:center;padding:0 10px}
.fs-last{padding-bottom:0}
.fs .tgl{padding:0}
.frange{--p:100%;width:100%;height:30px;margin:6px 0 2px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.frange:focus{outline:none}
.frange::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(90deg, var(--stroke) var(--p), var(--line-strong) var(--p))}
.frange::-moz-range-track{height:2px;border-radius:2px;background:linear-gradient(90deg, var(--stroke) var(--p), var(--line-strong) var(--p))}
.frange::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:var(--bg);border:2px solid var(--green);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.frange::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--bg);border:2px solid var(--green)}
.frange:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 30%, transparent)}
.frange-l{display:flex;justify-content:space-between;font-size:12.5px;color:var(--steel)}
.dfsheet .sheet-foot{justify-content:space-between}
.dfsheet .sheet-foot .btn{min-width:200px}
.ssheet .opts{margin-bottom:18px}
.ssheet .ss-where{margin-top:22px}
.ssheet .cities{grid-template-columns:1fr 1fr}

@media (max-width: 1100px){
  .dres{grid-column:1 / -1}
  .dmap{display:none}
}
@media (max-width: 1100px) and (min-width: 761px){
  .dsearch{flex-basis:100%}
}

/* ---------- phone ---------- */
@media (max-width: 760px){
  .disc{padding:12px 0 24px}
  .dtop{flex-direction:column;align-items:stretch;gap:12px;padding:0 0 14px}
  .dsearch{display:none}
  .dpill{display:flex}
  .dctl{flex:none;gap:8px;width:100%;max-width:100%}
  .fbtn{order:-1;margin-left:0}
  .fbtn{width:38px;padding:0;justify-content:center;position:relative;font-size:0;gap:0}
  .fbtn .ic{width:18px;height:18px}
  .fcount{position:absolute;top:-5px;right:-5px;margin:0;min-width:18px;height:18px;font-size:11px;border:2px solid var(--bg)}
  .dwhen{flex:1;overflow-x:auto;scrollbar-width:none;margin-right:0;padding-right:0}
  .dwhen::-webkit-scrollbar{display:none}
  .wpill{height:36px;padding:0 13px;font-size:13.5px}
  .dpanel-days{top:calc(100% + 8px);left:0;right:0;width:auto;padding:16px}
  .dpanel-days .days{grid-template-columns:repeat(7,1fr);gap:6px}
  .dpanel-days .day{padding:8px 0 10px}
  .dpanel-days .day b{font-size:11.5px}
  .dpanel-days .day span{font-size:17px}
  .dhead{flex-direction:column;align-items:stretch;gap:14px;padding:18px 0 10px}
  .dhead h1{font-size:26px}
  .dmeta{font-size:13.5px;margin-top:6px}
  .dcur{display:none}
  .dhead-r{justify-content:space-between;gap:8px}
  .dview span{padding:0 12px;font-size:14px}
  .dsplit{display:block}
  .dmap{display:none;position:relative;top:auto}
  .disc.show-map .dres{display:none}
  .disc.show-map .dmap{display:block;margin:0 -16px}
  .disc.show-map .dmapbox{height:calc(100dvh - 76px);min-height:420px;max-height:none;border-radius:0;border-left:0;border-right:0}
  .dmapbox .map-foot{bottom:84px}
  .dpeek{bottom:80px}
  .dmap:has(.dpeek:not([hidden])) .map-foot{display:none}
  .dmaptoggle{display:inline-flex;position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:35;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;font-size:15px;box-shadow:var(--shadow-pop)}
  .dmaptoggle .ic{width:18px;height:18px}
  .disc.is-looks .dmaptoggle{display:none}
  html.sheet-open .dmaptoggle{display:none}
  .dreach-h h2{font-size:22px}
  .dlooks{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .dlooks .look .svc{font-size:14px}
  .dlooks .look .by{font-size:12.5px}
  .dempty{padding:32px 4px 40px}
  .dempty .empty-title{font-size:23px}
  .ssheet .cities{grid-template-columns:1fr}
  .dfsheet .sheet-foot .btn{min-width:0}
}
@media (prefers-reduced-motion: reduce){
  .dpanel{transition-property:opacity !important;transform:none}
  .st.flash .folio .ph{animation:none}
}
/* guard: book.css styles a global .tick (checkbox card); the ruler readout uses .v.tick for its bump */
.dsearch .readout .v.tick,.ssheet .readout .v.tick{display:block;gap:0;padding:0;border:0;border-radius:0;margin:0;cursor:auto;background:none}