/* Calm layer (owner 16.09.2026: "the screen still slides to one side, one screen is packed with detail").
   Loaded last, so it only takes away: no sideways drift, one quiet material, more air between blocks. */

/* nothing may push the page sideways; horizontal rails scroll inside themselves */
html { overflow-x:hidden; }
body { overflow-x:clip; max-width:100vw; overscroll-behavior-x:none; }
main, .sheet { overflow-x:clip; }
.chips, .foryou, .fnav, .days, .tv-sights { overscroll-behavior-x:contain; }
img, video { max-width:100%; }

/* header: settings left, logo centre, music + refresh right */
header { grid-template-columns:88px 1fr 88px; }
header .logo { max-width:100%; height:15px; }
header #settings { justify-self:start; }
.hdr-r { display:flex; gap:6px; justify-content:flex-end; }
.hdr-r .icon-btn { width:40px; height:40px; border-radius:20px; }

/* one material: a quiet glass, a hairline rim, no grain, no sheen, one soft shadow */
.card::before, nav::before, .player::before, .card::after, nav::after, .player::after { display:none; }
.card, .tile, .seg, .theme, .conv, .search input, .round-nav button, .icon-btn, .day, .chip, .opt, .listbar button:not(.primary),
nav, .player, .toast, .btn.ghost, .page-glass {
  border-color:rgba(255,255,255,.08);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
html[data-theme="obsidian"] { --panel:rgba(14,14,18,.58); --glass-filter:blur(24px) saturate(130%) brightness(.85); --rim:rgba(255,255,255,.08); --line:rgba(255,255,255,.07); }
html[data-theme="crystal"] { --rim:rgba(255,255,255,.18); --line:rgba(255,255,255,.10); }
.chip, .opt, .day, .icon-btn { box-shadow:none; }
/* nested boxes lose their own box: a pill inside a card is just a row */
.card .pill, .hero .pill { background:rgba(255,255,255,.05); border:0; box-shadow:none; }
.card .card { border:0; box-shadow:none; background:rgba(255,255,255,.04); }

/* the photo stays, but behind a deeper, calmer shade */
.scene .ph { filter:saturate(85%); }
html[data-theme="obsidian"] .scene .shade { background:linear-gradient(180deg, rgba(6,6,9,.72) 0%, rgba(6,6,9,.55) 30%, rgba(6,6,9,.66) 65%, rgba(6,6,9,.88) 100%); }
html[data-theme="crystal"] .scene .shade { background:linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.40) 30%, rgba(0,0,0,.48) 65%, rgba(0,0,0,.78) 100%); }

/* air: blocks breathe, headings are quieter than the numbers under them */
main { padding:0 16px; }
.chips, .foryou, .fnav { padding-left:16px; padding-right:16px; margin-left:-16px; margin-right:-16px; scroll-padding-inline:16px; }
.block { margin-top:28px; }
.card + .card { margin-top:10px; }
.block-head { margin:0 4px 10px; }
.block-head h2 { font-size:13px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--dim); text-shadow:none; }
.page-head { padding:4px 20px 14px; }
h1 { font-size:28px; }
.hero { padding:20px 18px; }
.hero .wx svg { filter:none; }
.bar i { box-shadow:none; }
.m, .row { border-top-color:rgba(255,255,255,.06); }
.foot { margin-top:26px; }

/* bottom bar: the active pill stays inside the bar */
nav { padding:0 6px; height:66px; border-radius:33px; }
nav button { height:54px; margin:0 1px; border-radius:27px; opacity:.6; }
nav button.on { box-shadow:none; }

/* glows and pulsing gold only where they mean something */
.tv-card, .fcard, .wcard { box-shadow:0 6px 18px rgba(0,0,0,.3); }

/* travel: the page title already says where we are; a card is a photo, a city and one price */
.tv-title { display:none; }
.tv-card .mt { display:none; }
.tv-card .pr small { opacity:.75; }

/* music rails: artists round, albums and playlists square */
.mrail { display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding:2px 16px 4px; margin:0 -16px; scroll-padding-inline:16px; overscroll-behavior-x:contain; }
.mrail::-webkit-scrollbar { display:none; }
.mr { flex:0 0 auto; width:112px; min-width:0; text-align:left; color:var(--ink); }
.mr .art { display:grid; place-items:center; width:112px; height:112px; border-radius:16px; background:rgba(255,255,255,.06) center/cover no-repeat; }
.mr.artist { width:96px; text-align:center; } .mr.artist .art { width:96px; height:96px; border-radius:50%; }
.mr b { display:block; margin-top:8px; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mr small { display:block; color:var(--dim); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:14px 10px; }
.mgrid .mr { flex:none; } .mgrid .mr .art { width:100%; height:auto; aspect-ratio:1; }
.col-hero { display:flex; gap:14px; align-items:center; margin:4px 2px 14px; }
.col-hero .art { flex:0 0 96px; height:96px; border-radius:16px; background:rgba(255,255,255,.06) center/cover no-repeat; }
.col-hero h2 { margin:0 0 4px; font-size:20px; } .col-hero .t2 { color:var(--dim); font-size:13px; }
#view .row .t2 { cursor:pointer; }

/* traveller insights */
.som { display:block; color:var(--dim); font-size:12px; margin-top:2px; font-weight:500; }
.tv-badges { position:absolute; left:10px; right:10px; top:40px; z-index:2; display:flex; gap:4px; flex-wrap:wrap; }
.tv-badges i { font-style:normal; font-size:10px; font-weight:700; padding:3px 7px; border-radius:10px; background:rgba(0,0,0,.55); color:#fff; display:inline-flex; align-items:center; }
.tv-badges i svg.i { width:12px; height:12px; }
.tv-badges .vb.free { background:rgba(31,163,122,.85); } .tv-badges .vb.evisa, .tv-badges .vb.arrival { background:rgba(214,158,46,.85); color:#15161A; }
.tv-badges .tb { background:rgba(226,86,43,.85); }
.tv-toprail { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:2px 16px 4px; margin:0 -16px; scroll-padding-inline:16px; overscroll-behavior-x:contain; }
.tv-toprail::-webkit-scrollbar { display:none; }
.tv-top { position:relative; flex:0 0 auto; width:132px; height:150px; border-radius:18px; overflow:hidden; text-align:left; color:#fff; }
.tv-top .ph { position:absolute; inset:0; background:var(--img) center/cover no-repeat, #1a1a22; }
.tv-top .sh { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.72)); }
.tv-top em { position:absolute; top:8px; left:10px; font:800 22px/1 -apple-system, "Segoe UI", sans-serif; font-style:normal; color:var(--gold); text-shadow:0 2px 8px rgba(0,0,0,.5); }
.tv-top .tx { position:absolute; left:10px; right:10px; bottom:9px; } .tv-top b { display:block; font-size:14px; } .tv-top small { font-size:11px; opacity:.85; }
.card.ins { padding:4px 0; }
.ins-row { display:flex; align-items:center; gap:12px; width:100%; padding:11px 14px; text-align:left; color:var(--ink); border-top:1px solid rgba(255,255,255,.06); }
.ins-row:first-child { border-top:0; }
.ins-row .main { flex:1; min-width:0; } .ins-row .t2 { color:var(--dim); font-size:12px; }
.ins-ic { flex:0 0 34px; height:34px; border-radius:17px; display:grid; place-items:center; background:rgba(255,255,255,.07); }
.ins-ic.free { background:rgba(31,163,122,.25); color:#6EE7B7; } .ins-ic.evisa, .ins-ic.arrival { background:rgba(214,158,46,.22); color:var(--gold); }
.ins-ic.visa { background:rgba(255,255,255,.08); } .ins-ic.warn { background:rgba(226,86,43,.22); color:#FDBA74; } .ins-ic.up { color:#FDBA74; }
.ins-ic svg.i { width:18px; height:18px; }
.ins-bars { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; height:120px; align-items:end; padding:8px 4px 0; }
.ins-bars .ib { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.ins-bars .ib i { display:block; width:70%; height:var(--h); max-height:78%; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg, var(--gold), rgba(248,218,85,.35)); }
.ins-bars .ib b { font-size:11px; margin-top:4px; } .ins-bars .ib span { font-size:10px; color:var(--dim); }

/* nearby places */
.near-cats { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.near-cat { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px 10px; border-radius:16px; background:var(--panel); border:1px solid rgba(255,255,255,.08); color:var(--ink); font-size:11px; text-align:center; line-height:1.15; }
.near-cat svg.i { width:22px; height:22px; color:var(--gold); }
.near-cat.on { background:var(--active); color:var(--active-ink); } .near-cat.on svg.i { color:var(--active-ink); }
.near-cats.small { display:flex; overflow-x:auto; scrollbar-width:none; gap:6px; margin:0 -16px 12px; padding:0 16px; }
.near-cats.small::-webkit-scrollbar { display:none; }
.near-cats.small .near-cat { flex:0 0 auto; flex-direction:row; padding:8px 12px; border-radius:18px; font-size:13px; }
.near-cats.small .near-cat svg.i { width:16px; height:16px; }
.near-head { display:flex; gap:12px; align-items:center; margin:4px 2px 14px; }
.near-head .ic { width:48px; height:48px; border-radius:24px; display:grid; place-items:center; background:rgba(248,218,85,.14); color:var(--gold); }
.near-head h2 { margin:0; font-size:20px; } .near-head .t2 { color:var(--dim); font-size:13px; }
.near-note { color:var(--dim); font-size:13px; margin:0 4px 10px; }
.near-row { width:100%; text-align:left; }
.near-go { display:flex; align-items:center; gap:4px; color:var(--gold); font-size:12px; font-weight:600; } .near-go svg.i { width:16px; height:16px; }

/* tour packages */
.tr-sum { color:var(--dim); font-size:13px; margin:2px 4px 10px; }
.tr-list { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.tr-card { display:flex; gap:12px; width:100%; padding:10px; border-radius:20px; text-align:left; color:var(--ink); background:var(--panel); border:1px solid rgba(255,255,255,.08); }
.tr-img { flex:0 0 96px; height:120px; border-radius:14px; background:#1a1a22 center/cover no-repeat; display:grid; place-items:center; }
.tr-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.tr-top { display:flex; align-items:center; gap:6px; } .tr-top b { font-size:15px; } .tr-top small { color:var(--dim); font-size:12px; }
.tr-facts { font-size:12px; color:var(--ink); opacity:.85; } .tr-inc { font-size:11px; color:var(--dim); }
.tr-price { display:flex; align-items:baseline; gap:8px; margin-top:2px; } .tr-price b { font-size:20px; color:var(--gold); } .tr-price small { color:var(--dim); font-size:11px; }
.tr-v { align-self:flex-start; font-size:11px; font-weight:700; padding:3px 8px; border-radius:10px; background:rgba(255,255,255,.08); }
.tr-v.good { background:rgba(31,163,122,.25); color:#6EE7B7; }
.tr-est { font-size:11px; color:var(--dim); } .tr-ch { font-size:11px; color:var(--faint); margin-top:auto; }
/* "open in" */
.open-head { display:flex; gap:12px; align-items:center; margin:4px 2px 12px; }
.open-head .ic { width:48px; height:48px; border-radius:24px; display:grid; place-items:center; background:rgba(248,218,85,.14); color:var(--gold); }
.open-head h2 { margin:0; font-size:19px; } .open-head .t2 { color:var(--dim); font-size:13px; }
.open-row { gap:10px; } .open-ic { width:32px; height:32px; border-radius:16px; display:grid; place-items:center; background:rgba(255,255,255,.07); color:var(--gold); }
.open-btn { display:inline-flex; align-items:center; gap:4px; padding:7px 12px; border-radius:16px; font-size:13px; background:rgba(255,255,255,.08); color:var(--ink); margin-left:6px; }
.open-btn.on { background:var(--active); color:var(--active-ink); font-weight:600; } .open-btn svg.i { width:14px; height:14px; }
.open-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:12px; }
.open-tile { display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 6px; text-align:center; color:var(--ink); }
.open-tile svg.i { color:var(--gold); } .open-tile b { font-size:12px; word-break:break-all; } .open-tile small { color:var(--dim); font-size:11px; }