/* Basera showcase.css — Doorzad's social pictures inside the app:
   the home page's stories rail and story viewer (js/stories.js), the /reels
   feed and the in-browser reel player (js/reels.js), the listing's
   "Share this home" block, the lister's social kit and the picture viewer
   (js/share-kit.js), and the locality page (/in/{slug}).

   Uses the tokens in basera.css :root. The dark surfaces (viewer, reels) use
   --sc-night, on which every text colour here is white or paper (>= 15:1) and
   the CTA is coral-strong behind white text (4.7:1). Every control is at least
   44 x 44 px. Motion is off under prefers-reduced-motion (basera.css also
   clamps every transition there). */

:root{--sc-night:#100C16;--sc-night-2:#1B1424;--sc-glass:rgba(250,244,236,.16);--sc-glass-hover:rgba(250,244,236,.28)}

/* ================= stories rail ================= */
.sc-rail{margin:4px 0 0;min-width:0}
.sc-rail__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 18px}
.sc-rail__title{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.sc-rail__reels{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font-weight:700;font-size:15px;color:var(--coral-dk)}
.sc-rail__reels:hover{color:var(--coral-dk);text-decoration:underline;text-underline-offset:3px}
.sc-rail__row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:6px 18px 4px;margin:0;list-style:none}
.sc-rail__row::-webkit-scrollbar{display:none}
.sc-rail__row > li{flex:none}
.sc-circle{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;padding:2px 0 4px;border:0;background:transparent;cursor:pointer;font-family:inherit;color:var(--ink);-webkit-tap-highlight-color:transparent;border-radius:14px}
.sc-circle:focus-visible{outline:2px solid var(--focus);outline-offset:0}
.sc-circle__ring{width:70px;height:70px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,var(--coral),var(--marigold),var(--coral-strong),var(--coral));display:block;flex:none}
.sc-circle--area .sc-circle__ring{background:conic-gradient(from 210deg,var(--teal),var(--marigold),var(--coral),var(--teal))}
.sc-circle.is-seen .sc-circle__ring{background:var(--line)}
.sc-circle__img{width:100%;height:100%;border-radius:50%;border:3px solid var(--paper);object-fit:cover;background:var(--coral);display:block}
.sc-circle--area .sc-circle__img{background:var(--soft)}
.sc-circle__label{font-size:13px;font-weight:600;line-height:1.25;max-width:76px;text-align:center;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){.sc-circle:hover .sc-circle__label{color:var(--ink)}}
@media (min-width:760px){
  .sc-rail{max-width:1240px;margin:28px auto 0;padding:0 10px}
  .sc-rail__title{font-size:22px}
  .sc-circle{width:88px}
  .sc-circle__ring{width:80px;height:80px}
  .sc-circle__label{font-size:14px;max-width:88px}
  .sc-rail__row{gap:16px}
}

/* ================= story viewer ================= */
html.sc-lock,html.sc-lock body{overflow:hidden}
.sc-story{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:var(--sc-night);color:#fff;font-family:var(--font-body);overscroll-behavior:contain}
.sc-story[open]{display:flex;align-items:center;justify-content:center}
.sc-story::backdrop{background:var(--sc-night)}
.sc-story__frame{position:relative;height:100%;width:100%;max-width:calc(100dvh * 9 / 16);display:flex;flex-direction:column;background:#000}
.sc-story__top{position:absolute;top:0;left:0;right:0;z-index:4;padding:calc(8px + env(safe-area-inset-top,0px)) 10px 14px;background:linear-gradient(rgba(16,12,22,.78),rgba(16,12,22,0))}
.sc-story__bars{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.sc-story__bar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.38);overflow:hidden}
.sc-story__bar > span{display:block;height:100%;width:0;background:#fff;border-radius:3px}
.sc-story__bar.is-done > span{width:100%}
.sc-story__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.sc-story__label{font-weight:700;font-size:16px;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sc-story__counter{font-weight:600;font-size:14px;margin-left:8px;font-variant-numeric:tabular-nums;opacity:.95}
.sc-story__btns{display:flex;gap:6px;flex:none}
.sc-btn-glass{width:44px;height:44px;border-radius:999px;border:0;padding:0;display:grid;place-items:center;cursor:pointer;background:rgba(16,12,22,.55);color:#fff;-webkit-tap-highlight-color:transparent}
.sc-btn-glass:hover{background:rgba(16,12,22,.8);color:#fff}
.sc-btn-glass:focus-visible,.sc-story__tap:focus-visible,.sc-story__cta:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.sc-story__stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;touch-action:pinch-zoom;-webkit-user-select:none;user-select:none}
.sc-story__img{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none}
.sc-story__img:not([src]){visibility:hidden}
.sc-story.is-loading .sc-story__img{opacity:.35}
/* Left third back, the rest forward, like every story app; both are real buttons. */
.sc-story__tap{position:absolute;top:0;bottom:0;z-index:2;border:0;padding:0;margin:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sc-story__tap--prev{left:0;width:33%}
.sc-story__tap--next{right:0;width:67%}
.sc-story__foot{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 16px calc(16px + env(safe-area-inset-bottom,0px));background:linear-gradient(rgba(16,12,22,0),rgba(16,12,22,.8))}
.sc-story__cta{text-decoration:none !important;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;background:var(--coral-strong);color:#fff;font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.sc-story__cta:hover{color:#fff;background:var(--coral-dk)}
.sc-story__hint{font-size:13px;color:#fff;opacity:.92;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.sc-story__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:760px){
  .sc-story__frame{height:calc(100% - 32px);border-radius:18px;overflow:hidden}
  .sc-story__hint{display:none}
}

/* ================= reel player (shared) ================= */
.sc-player{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--plum);border-radius:16px;isolation:isolate}
.sc-player__layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity;-webkit-user-drag:none;pointer-events:none}
.sc-player__layer:not([src]){visibility:hidden}
.sc-player__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--plum)}
.sc-player__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25);z-index:3}
.sc-player__bar > span{display:block;height:100%;width:0;background:var(--coral)}
.sc-player__toggle{position:absolute;top:10px;right:10px;z-index:4}
/* Reduced motion: the frames as a plain carousel, one at a time, with buttons. */
.sc-player--static{background:var(--sc-night-2)}
.sc-stills{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0;padding:0;list-style:none}
.sc-stills::-webkit-scrollbar{display:none}
.sc-stills > li{flex:0 0 100%;scroll-snap-align:start;height:100%}
.sc-stills img{width:100%;height:100%;object-fit:cover;display:block}
.sc-stills__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4}
.sc-stills__nav--prev{left:8px}
.sc-stills__nav--next{right:8px}
.sc-stills__count{position:absolute;left:10px;top:12px;z-index:4;padding:6px 10px;border-radius:999px;background:rgba(16,12,22,.7);color:#fff;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}

/* ================= /reels ================= */
.sc-reels-page{background:var(--sc-night)}
.sc-reels-page .bs-shell{background:var(--sc-night)}
.sc-reels-wrap{display:flex;flex-direction:column;height:calc(100dvh - var(--tabbar-h) - env(safe-area-inset-bottom,0px));background:var(--sc-night)}
.sc-reels{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none;background:var(--sc-night);color:#fff}
.sc-reels::-webkit-scrollbar{display:none}
.sc-reels:focus-visible{outline:3px solid var(--marigold);outline-offset:-3px}
.sc-reels__list{margin:0;padding:0;list-style:none;height:100%}
.sc-reel{height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px 12px}
.sc-reel .sc-player{height:min(calc(100% - 78px),calc((100vw - 24px) * 16 / 9));border-radius:14px}
.sc-reel__bar{display:flex;align-items:center;gap:10px;width:100%;max-width:520px}
.sc-reel__text{flex:1;min-width:0}
.sc-reel__price{font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1.15;color:#fff}
.sc-reel__place{font-size:14px;color:#E9E3EF;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-reel__cta{text-decoration:none !important;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:999px;background:var(--coral-strong);color:#fff;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;flex:none}
.sc-reel__cta:hover{color:#fff;background:var(--coral-dk)}
.sc-reel__cta:focus-visible,.sc-reels-wrap .sc-btn-glass:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.sc-reels__empty{height:100%;display:grid;place-items:center;text-align:center;padding:24px;color:#fff}
.sc-reels__empty a{color:var(--marigold);text-decoration:underline}
/* The header is its own row above the feed: nothing overlaps a reel's corner. */
.sc-reels__head{flex:none;display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 12px;border-bottom:1px solid rgba(250,244,236,.1);color:#fff}
.sc-reels__title{margin:0;font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1.2;color:#fff}
.sc-reels__back{flex:none;width:44px;height:44px;border-radius:50%;background:var(--sc-glass);color:#fff}
.sc-reels__back:hover{background:var(--sc-glass-hover);color:#fff}
.sc-reels__keys{font-size:13px;color:#E9E3EF;margin-left:auto}
@media (max-width:759.98px){.sc-reels__keys{display:none}}
@media (min-width:760px){
  .sc-reels-wrap{height:calc(100dvh - 73px)}
  .sc-reels__head{padding:6px 24px}
  .sc-reels-page .bs-footer{display:none}
  .sc-reel{padding:14px 24px}
}

/* ================= share this home (detail) ================= */
.sc-share{margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.sc-share__h{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.2;color:var(--ink)}
.sc-share__sub{font-size:14px;color:var(--muted);margin-top:4px}
.sc-share__row{display:flex;align-items:flex-end;gap:10px;margin-top:12px;flex-wrap:wrap}
.sc-thumb{position:relative;display:block;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--soft);cursor:zoom-in;flex:none}
.sc-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.sc-thumb:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sc-thumb--square{width:96px;height:96px}
.sc-thumb--story{width:58px;height:103px}
.sc-thumb__tag{position:absolute;left:4px;bottom:4px;padding:2px 6px;border-radius:999px;background:rgba(16,12,22,.78);color:#fff;font-size:13px;font-weight:700;line-height:1.3}
.sc-share__reel{margin-left:auto;align-self:center}
.sc-btn-out{text-decoration:none !important;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-family:inherit;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap}
.sc-btn-out:hover{color:var(--ink);background:rgba(28,22,38,.05)}
.sc-btn-sm{min-height:44px;padding:8px 12px;font-size:14px}

/* ================= picture viewer (share block, kit) ================= */
.sc-viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--sc-night);color:#fff;font-family:var(--font-body);overscroll-behavior:contain}
.sc-viewer[open]{display:flex;flex-direction:column}
.sc-viewer::backdrop{background:var(--sc-night)}
.sc-viewer__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px 16px}
.sc-viewer__title{font-weight:700;font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-viewer__stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 12px}
.sc-viewer__img{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:8px}
.sc-viewer__acts{display:flex;justify-content:center;gap:10px;padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px));flex-wrap:wrap}
.sc-viewer__acts .sc-btn-solid,.sc-viewer__acts .sc-btn-ghost{min-width:132px}
.sc-btn-solid{text-decoration:none !important;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:999px;border:0;background:var(--coral-strong);color:#fff;font-family:inherit;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer}
.sc-btn-solid:hover{color:#fff;background:var(--coral-dk)}
.sc-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:999px;border:1.5px solid rgba(255,255,255,.7);background:transparent;color:#fff;font-family:inherit;font-weight:700;font-size:16px;cursor:pointer}
.sc-btn-ghost:hover{color:#fff;background:rgba(255,255,255,.1)}
.sc-viewer :focus-visible{outline:3px solid var(--marigold);outline-offset:2px}

/* ================= the lister's social kit ================= */
.sc-kit{margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--card);min-width:0}
.sc-kit__h{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink)}
.sc-kit__sub{font-size:14.5px;color:var(--ink2);margin-top:4px}
.sc-kit__note{font-size:14.5px;color:var(--ink2)}
.sc-kit__caps{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.sc-cap{border:1px solid var(--divider);border-radius:12px;background:var(--paper);padding:4px 6px 4px 12px}
.sc-cap__row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.sc-cap summary{cursor:pointer;font-weight:700;font-size:15px;color:var(--ink);min-height:44px;display:flex;align-items:center;flex:1;list-style-position:inside}
.sc-cap summary::-webkit-details-marker{color:var(--muted)}
.sc-cap__text{white-space:pre-wrap;word-break:break-word;font-size:14px;color:var(--ink2);margin:4px 0 8px;max-height:220px;overflow:auto}
.sc-kit__sec{margin-top:18px}
.sc-kit__sech{font-weight:700;font-size:16px;color:var(--ink)}
.sc-kit__secn{font-size:14px;color:var(--muted);margin-top:2px}
.sc-kit__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px 12px;margin:10px 0 0;padding:0;list-style:none}
.sc-tile{display:flex;flex-direction:column;gap:6px;min-width:0}
.sc-tile .sc-thumb{width:100%;height:auto}
.sc-tile .sc-thumb img{aspect-ratio:var(--r,4/5);height:auto}
.sc-tile__label{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.sc-tile__acts{display:flex;flex-direction:column;gap:6px}
.sc-tile__acts .sc-btn-out{width:100%;padding:8px 10px;font-size:14px;min-width:0;white-space:normal;text-align:center}
.sc-kit__reel{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.sc-kit__reel .sc-player{width:100%}
.sc-kit__empty{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--soft);font-size:14.5px;color:var(--ink2)}

/* ================= locality page ================= */
.sc-area{padding-top:18px}
.sc-area__eyebrow{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-dk)}
.sc-area__h1{font-family:var(--font-display);font-weight:800;font-size:28px;line-height:1.12;margin-top:6px;color:var(--ink)}
.sc-area__h1 em{font-style:italic;color:var(--coral-dk);padding-right:.1em}
.sc-area__sub{font-size:15.5px;color:var(--ink2);margin-top:6px}
.sc-slides{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:16px -18px 0;padding:0 18px 6px;list-style:none}
.sc-slides::-webkit-scrollbar{display:none}
.sc-slides > li{flex:0 0 78%;scroll-snap-align:center;max-width:340px}
.sc-slides .sc-thumb{width:100%;height:auto;cursor:zoom-in}
.sc-slides .sc-thumb img{aspect-ratio:4/5;height:auto}
.sc-slides__nav{display:flex;align-items:center;gap:8px;margin-top:8px}
.sc-slides__count{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.sc-area__h2{font-family:var(--font-display);font-weight:700;font-size:20px;margin-top:26px;color:var(--ink)}
.sc-area__list{margin-top:12px}
.sc-area__all{margin-top:18px}
.sc-area__none{margin-top:12px;padding:14px;border-radius:14px;background:var(--soft);color:var(--ink2);font-size:15px}
@media (min-width:760px){
  .sc-area{max-width:1240px;margin:0 auto;padding:28px 28px 56px}
  .sc-area__h1{font-size:38px}
  .sc-slides{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:18px 0 0;padding:0}
  .sc-slides > li{max-width:none}
  .sc-slides__nav{display:none}
}
@media (min-width:1020px){
  .sc-slides{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* ================= motion ================= */
@media (prefers-reduced-motion:reduce){
  .sc-player__layer{will-change:auto}
  .sc-reels,.sc-stills,.sc-slides{scroll-behavior:auto}
}