/* web-place-pages: place pages, city hubs, share links on explore-elsewhere.com.
   App theme (system.md / constants/theme.ts): warm gray ramp, road-yellow fill
   (never text), blue community stars, traffic-light verdicts, Inter, glass
   surfaces for the invite card and dialog. Light only, like the landing site. */
:root{
  --g100:#FAFAFA; --g200:#E8E6E3; --hair:#D3D1CF; --mud:#726A62; --ink2:#3A332E; --ink:#1C1512; --card:#FFFFFF;
  --road:#F4BB00; --blue:#006F9D; --danger:#B3362C;
  --tlred:#FF2D2D; --tlyel:#FFD000; --tlgrn:#00D26A; --housing:#1A1A1A;
  --sh2:0 2px 4px rgba(0,0,0,0.06), 0 3px 6px rgba(0,0,0,0.08);
  --sh3:0 3px 6px rgba(0,0,0,0.08), 0 10px 20px rgba(0,0,0,0.10);
  color-scheme:light;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{ background:var(--g100); color:var(--ink); font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
button{ font:inherit; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:6px; }
h1,h2,h3{ text-wrap:balance; }

/* header */
.hdr{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; padding:12px 16px 0; max-width:1180px; margin:0 auto; }
.hdr .bar{ height:54px; background:#fff; border:1px solid var(--g200); border-radius:999px; box-shadow:var(--sh3); display:flex; align-items:center; justify-content:space-between; padding:0 8px 0 20px; }
.wm{ font-weight:700; font-size:20px; letter-spacing:-0.8px; text-decoration:none; color:var(--ink); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; font-weight:600; font-size:14px; padding:11px 16px; border:0; cursor:pointer; text-decoration:none; transition:transform .15s ease, opacity .15s; }
.btn:active{ opacity:.7; }
.btn-y{ background:var(--road); color:var(--ink); }
.btn-k{ background:var(--ink); color:#FAFAFA; }
.btn-o{ background:#fff; color:var(--ink); border:1px solid var(--hair); }
.hdr .btn{ border-radius:999px; padding:9px 16px; font-size:13.5px; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 16px; }
.crumbs{ font-size:13px; color:var(--mud); display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:16px 2px 0; }
.crumbs a{ color:var(--ink2); font-weight:600; text-decoration:underline; text-decoration-color:var(--road); text-decoration-thickness:2px; text-underline-offset:3px; }
.crumbs .sep{ color:var(--hair); }

/* server-rendered fallback (replaced by web.js) */
.ssr{ max-width:760px; margin:0 auto; padding:24px 20px 40px; display:flex; flex-direction:column; gap:12px; }
.ssr h1{ font-size:30px; letter-spacing:-1px; line-height:1.15; }
.ssr ul, .ssr ol{ padding-left:20px; display:flex; flex-direction:column; gap:6px; }

/* photos */
.ph{ background:#D9D4CC center/cover no-repeat; position:relative; overflow:hidden; }
.ph-none{ background:linear-gradient(160deg,#E9E4DB,#CFC7BA); }

/* stars + traffic light */
.stars{ display:inline-flex; gap:2px; vertical-align:middle; }
.star{ width:var(--s,16px); height:var(--s,16px); position:relative; display:inline-block; }
.star svg{ position:absolute; inset:0; width:100%; height:100%; }
.star .o{ color:#D3D1CF; } .star .f{ color:var(--blue); }
.star .clip{ position:absolute; inset:0; overflow:hidden; }
.star .clip svg{ width:var(--s,16px); height:var(--s,16px); }
.tl{ display:inline-flex; gap:3px; background:var(--housing); padding:3px 5px; border-radius:999px; vertical-align:middle; flex-shrink:0; }
.tl i{ width:7px; height:7px; border-radius:50%; display:block; background:#3A3A3A; }
.tl[data-v="0"] i:nth-child(1){ background:var(--tlred); }
.tl[data-v="1"] i:nth-child(2){ background:var(--tlyel); }
.tl[data-v="2"] i:nth-child(3){ background:var(--tlgrn); }

/* place page */
.hero{ position:relative; height:clamp(220px, 42vw, 380px); margin-top:14px; border-radius:24px; overflow:hidden; }
.hero .scrim{ position:absolute; inset:45% 0 0 0; background:linear-gradient(transparent, rgba(12,9,6,0.72)); }
.hero .id{ position:absolute; left:20px; right:20px; bottom:18px; color:#fff; }
.hero h1{ font-size:clamp(28px, 4.4vw, 44px); line-height:1.12; letter-spacing:-1.2px; font-weight:700; }
.hero .meta{ font-size:15px; opacity:.92; margin-top:4px; }
.grid{ display:grid; grid-template-columns:1fr; gap:28px; padding:24px 2px 48px; }
.main, .side{ display:flex; flex-direction:column; gap:28px; min-width:0; }
.side{ gap:16px; }
@media (min-width:960px){
  .grid{ grid-template-columns:1fr 340px; gap:48px; padding-top:32px; }
  .side{ position:sticky; top:84px; align-self:start; }
}
.sec-h{ font-size:18px; font-weight:700; letter-spacing:-0.3px; margin-bottom:12px; }
.score{ display:flex; align-items:center; gap:14px; }
.score .num{ font-size:44px; font-weight:700; letter-spacing:-1.5px; line-height:1; color:var(--blue); font-variant-numeric:tabular-nums; }
.score .sub{ font-size:13px; color:var(--mud); margin-top:4px; }
.infocard{ background:#fff; border:1px solid var(--g200); border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--sh2); }
.addr-t{ font-size:14px; color:var(--mud); }
.acts{ display:flex; gap:10px; flex-wrap:wrap; }
.acts .btn{ flex:1; }
.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
@media (min-width:960px){ .gal{ grid-template-columns:repeat(5,1fr); } }
.gal a{ aspect-ratio:1; border-radius:12px; display:block; }
.notes{ display:flex; flex-direction:column; gap:10px; }
.note{ background:var(--card); border:1px solid var(--g200); border-radius:16px; padding:14px 16px; box-shadow:var(--sh2); }
.note .top{ display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.note .who{ font-weight:600; font-size:14px; }
.note .vlbl{ font-size:12.5px; color:var(--mud); }
.note .when{ font-size:12.5px; color:var(--mud); margin-left:auto; }
.note p{ font-size:15px; line-height:1.55; overflow-wrap:anywhere; }
.linkrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; font-weight:600; color:var(--ink2); text-decoration:none; background:#fff; border:1px solid var(--hair); border-radius:12px; padding:11px 14px; cursor:pointer; width:100%; text-align:left; }
.linkrow::after{ content:''; width:7px; height:7px; border-right:2px solid var(--ink2); border-top:2px solid var(--ink2); transform:rotate(45deg); margin-right:3px; flex-shrink:0; }
.mini{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--g200); text-decoration:none; }
.mini .ph{ width:52px; height:52px; border-radius:12px; flex-shrink:0; }
.mini .t{ font-weight:600; font-size:14.5px; }
.mini .s{ font-size:12.5px; color:var(--mud); }
.mini .r{ margin-left:auto; font-weight:700; color:var(--blue); font-variant-numeric:tabular-nums; }

/* glass invite card */
.invite{ border-radius:24px; padding:14px; }
.glass{ position:relative; z-index:1; background:rgba(255,255,255,0.62); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border:1px solid rgba(255,255,255,0.6); border-radius:18px; box-shadow:0 8px 24px rgba(28,21,18,0.18); padding:18px; display:flex; flex-direction:column; gap:10px; }
.invite h3{ font-size:18px; letter-spacing:-0.3px; }
.invite p{ font-size:14px; color:var(--ink2); }
.invite .btn{ align-self:flex-start; }

/* shared card (temporary link) */
.shared{ margin-top:14px; border-radius:24px; padding:12px; }
.shared .glass{ padding:14px; }
.shared .top{ display:flex; align-items:center; gap:8px; font-size:14px; }
.shared .exp{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--ink); background:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.8); padding:3px 9px; border-radius:999px; font-weight:600; }
.shared .exp svg{ width:13px; height:13px; }
.shared .pics{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px, 1fr); gap:8px; overflow-x:auto; scrollbar-width:none; }
.shared .pics .ph{ height:220px; border-radius:14px; }
.shared p{ font-size:15.5px; line-height:1.5; }

/* hubs */
.hub-h{ padding:26px 2px 4px; max-width:760px; }
.hub-h h1{ font-size:clamp(30px, 4.4vw, 44px); line-height:1.1; letter-spacing:-1.3px; margin:4px 0 8px; }
.hub-h h1 .u{ border-bottom:4px dashed var(--road); padding-bottom:1px; }
.hub-h p{ font-size:15px; color:var(--mud); }
.chips{ display:flex; gap:8px; padding:16px 2px 6px; overflow-x:auto; scrollbar-width:none; }
.chip{ flex-shrink:0; background:#fff; border-radius:999px; padding:8px 14px; font-size:13.5px; font-weight:600; color:var(--mud); box-shadow:0 2px 8px rgba(138,112,96,0.14); text-decoration:none; border:1.5px solid transparent; }
.chip.on{ color:var(--ink); border-color:var(--ink); }
.rank{ list-style:none; padding:10px 2px 8px; display:grid; grid-template-columns:1fr; gap:16px; max-width:760px; }
.ri{ display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center; text-decoration:none; }
.ri .ph{ width:96px; height:96px; border-radius:14px; }
.ri .t{ font-weight:700; font-size:16.5px; letter-spacing:-0.2px; line-height:1.25; }
.ri .c{ display:inline-block; font-size:12px; color:var(--ink); background:var(--road); font-weight:600; margin-top:4px; padding:2px 9px; border-radius:999px; }
.ri .sc{ display:flex; align-items:center; gap:6px; margin-top:6px; font-size:12.5px; color:var(--mud); flex-wrap:wrap; }
.ri .sc .cnt{ color:var(--ink); font-weight:700; font-size:13.5px; font-variant-numeric:tabular-nums; }
.ri .sc b{ color:var(--blue); font-variant-numeric:tabular-nums; }
.ri .q{ font-size:13.5px; color:var(--ink2); margin-top:6px; line-height:1.45; overflow-wrap:anywhere; }
.nearby{ padding:24px 2px 8px; display:flex; flex-direction:column; gap:10px; }
.nearby .cities{ display:flex; flex-wrap:wrap; gap:8px; }
.hub-invite{ max-width:760px; padding:16px 2px 48px; }

/* empty / gone */
.empty{ padding:72px 16px 64px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.empty .sign{ width:92px; height:92px; position:relative; margin-bottom:10px; }
.empty .sign::before{ content:''; position:absolute; inset:14px; background:var(--road); border:2.5px solid var(--ink); border-radius:8px; transform:rotate(45deg); }
.empty .sign span{ position:relative; z-index:1; display:flex; width:100%; height:100%; align-items:center; justify-content:center; font-weight:800; font-size:30px; }
.empty h1{ font-size:24px; letter-spacing:-0.5px; }
.empty p{ font-size:15px; color:var(--mud); max-width:32ch; }
.empty .btn{ margin-top:10px; }

/* loading + error */
.sk{ background:linear-gradient(90deg,#EEEBE7 0%,#F6F4F1 50%,#EEEBE7 100%); background-size:200% 100%; animation:sk 1.2s ease-in-out infinite; border-radius:12px; }
@keyframes sk{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
.retry{ text-align:center; padding:40px 16px; color:var(--mud); display:flex; flex-direction:column; gap:12px; align-items:center; }

/* invite dialog */
.dim{ position:fixed; inset:0; background:rgba(10,8,6,0.4); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); z-index:50; display:flex; align-items:center; justify-content:center; padding:18px; }
.dlg{ width:100%; max-width:420px; border-radius:24px; background:rgba(255,255,255,0.82); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); border:1px solid rgba(255,255,255,0.6); box-shadow:0 18px 36px rgba(0,0,0,0.35); padding:24px 20px 20px; display:flex; flex-direction:column; gap:14px; animation:pop .22s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop{ from{ transform:scale(.88); opacity:0; } to{ transform:scale(1); opacity:1; } }
.dlg h2{ font-size:22px; letter-spacing:-0.6px; }
.dlg p{ font-size:14.5px; color:var(--mud); }
.dlg .center{ text-align:center; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:13px; font-weight:600; }
.field .in{ height:50px; border:1.5px solid var(--ink); border-radius:12px; display:flex; align-items:center; padding:0 14px; gap:10px; background:#fff; }
.field .in.bad{ border-color:var(--danger); }
.field .cc{ color:var(--mud); padding-right:10px; border-right:1px solid var(--hair); }
.field input{ border:0; outline:0; font:inherit; font-size:16px; flex:1; min-width:0; background:transparent; color:var(--ink); }
.field .errt{ font-size:12.5px; color:var(--danger); }
.dlg .btn{ padding:15px; font-size:15px; }
.fine{ font-size:12px; color:var(--mud); text-align:center; }
.done-ic{ width:56px; height:56px; border-radius:50%; background:var(--road); display:flex; align-items:center; justify-content:center; align-self:center; color:var(--ink); }

.foot{ max-width:1180px; margin:0 auto; padding:24px 18px 40px; border-top:1px solid var(--g200); font-size:12.5px; color:var(--mud); display:flex; flex-wrap:wrap; gap:16px; }
.foot a{ text-decoration:none; color:var(--mud); }

@media (prefers-reduced-motion: reduce){ .sk, .dlg{ animation:none; } .btn{ transition:none; } }