/* ============ Rome & the Aegean — trip companion ============ */ /* Palette: INK & GOLD — deep navy & gold by default (photos glow against it); warm paper by day. */ :root{ --bg:#12162a; --bg2:#161b34; --surface:#1c2340; --surface2:#232c50; --ink:#f4efe4; --ink-soft:#c9c8bd; --ink-dim:#8f93a6; --gold:#d3ab5b; --gold-soft:#e7cd92; --hair:#e7cd92; --on-accent:#12162a; --line:rgba(255,255,255,.10); --sight:#8fc0e8; --meal:#e6a97a; --transit:#9ad2b0; --sea:#7fb4d8; --info:#d3ab5b; --ok:#7bd6a1; --danger:#e88b7a; --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; --tab-h:64px; --shadow:0 8px 30px rgba(0,0,0,.35); --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px); } /* Always Ink & Gold — no day/light mode, by Jason's call. color-scheme stays dark. */ :root{color-scheme:dark} :root[data-palette="marble"]{color-scheme:light} /* Alternate palette kept on file: MARBLE & OXBLOOD — activate with */ :root[data-palette="marble"]{ --bg:#f3efe9; --bg2:#ebe5dd; --surface:#fffdfb; --surface2:#f5f0e9; --ink:#241d1c; --ink-soft:#4a3f3c; --ink-dim:#8a7f79; --gold:#6b1f2a; --gold-soft:#8a2a37; --hair:#b8964e; --on-accent:#fff; --line:rgba(70,35,25,.13); --sight:#2f5f8f; --meal:#a8602e; --transit:#3d7d5c; --sea:#2f6f95; --info:#6b1f2a; --ok:#3f8f66; --danger:#b8394a; --shadow:0 10px 28px rgba(60,30,20,.14); } :root[data-palette="marble"][data-theme="dark"]{ --bg:#171312; --bg2:#1d1816; --surface:#241e1c; --surface2:#2d2624; --ink:#f2ece6; --ink-soft:#cfc5bd; --ink-dim:#8f837c; --gold:#c04c5e; --gold-soft:#d9b070; --hair:#c9a45a; --on-accent:#fff; --line:rgba(255,255,255,.10); --sight:#8fb8e0; --meal:#e2a074; --transit:#93cba9; --sea:#7fb0d6; --info:#d9b070; --ok:#7bd6a1; --danger:#e88b7a; --shadow:0 10px 30px rgba(0,0,0,.4); } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)} body{font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-text-size-adjust:100%; overflow-x:hidden;overscroll-behavior-y:none} [hidden]{display:none!important} button{font-family:inherit;color:inherit;cursor:pointer} a{color:var(--gold-soft)} .boot{padding:40vh 24px;text-align:center;color:var(--ink-dim);font-family:var(--serif);font-size:20px} #app{max-width:640px;margin:0 auto;padding:0 16px; padding-top:calc(var(--safe-t) + 8px); padding-bottom:calc(var(--tab-h) + var(--safe-b) + 96px);min-height:100vh} /* ---------- headers ---------- */ .page-head{padding:14px 2px 6px} .page-head .eyebrow{font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--gold);font-weight:700} .page-head h1{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1.1;margin:4px 0 2px} .page-head .sub{color:var(--ink-dim);font-size:14.5px} /* ---------- NOW ---------- */ .now-wrap{padding-top:6px} .now-eyebrow{display:flex;align-items:center;gap:8px;color:var(--gold);font-weight:700; font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin:2px 2px 10px} .pulse{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 var(--gold); animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(211,171,91,.5)}70%{box-shadow:0 0 0 10px rgba(211,171,91,0)}100%{box-shadow:0 0 0 0 rgba(211,171,91,0)}} .now-card{background:linear-gradient(160deg,var(--surface),var(--bg2));border:1px solid var(--line); border-radius:22px;padding:20px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden} .now-card .daytag{color:var(--ink-dim);font-size:14px;font-weight:600} .now-card .time{font-family:var(--serif);font-size:19px;color:var(--gold-soft);margin-top:2px} .now-card h2{font-family:var(--serif);font-weight:600;font-size:29px;line-height:1.12;margin:6px 0 10px} .now-card .notes{color:var(--ink-soft);font-size:17px;line-height:1.55;white-space:pre-line} .now-card .notes.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden} .readmore{background:none;border:none;color:var(--gold);font-weight:700;padding:8px 0 0;font-size:15px} .badgerow{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 2px} .badge{font-size:13.5px;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid var(--line); background:var(--surface2);color:var(--ink-soft);display:inline-flex;gap:6px;align-items:center} .badge.book{color:var(--on-accent);background:var(--gold);border-color:transparent} .badge svg,.tag svg{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .badge{max-width:100%;line-height:1.3} .badge.cost{color:var(--ink)} .actions{display:flex;gap:10px;margin-top:16px} .btn{flex:1;border:1px solid var(--line);background:var(--surface2);color:var(--ink); border-radius:14px;padding:15px 12px;font-size:16px;font-weight:700;display:flex;align-items:center; justify-content:center;gap:9px;text-decoration:none;min-height:52px} .btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9} .btn.primary{background:var(--gold);color:var(--on-accent);border-color:transparent} .btn:active{transform:translateY(1px)} .next-strip{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px; padding:13px 16px;display:flex;align-items:center;gap:12px} .next-strip .lab{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700} .next-strip .t{font-family:var(--serif);font-size:17px} .next-strip .in{margin-left:auto;text-align:right;color:var(--ink-dim);font-size:13px;font-weight:600;flex-shrink:0} .next-strip .in b{display:block;color:var(--ink);font-size:16px} .btn.here{border-color:var(--gold);color:var(--gold-soft);background:transparent} .hererow{display:flex;align-items:center;gap:10px;margin-top:12px} .here-chip{flex:1;display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--ok); border:1px solid var(--ok);border-radius:12px;padding:10px 12px} .here-chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4} .fixed-strip{margin-top:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px; padding:13px 16px;display:flex;align-items:center;gap:12px} .fixed-strip .lab{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700} .fixed-strip .t{font-family:var(--serif);font-size:17px} .fixed-strip .sub{color:var(--ink-dim);font-size:13px}.fixed-strip .sub b{color:var(--ink)} .fixed-strip .in{margin-left:auto;text-align:right;color:var(--ink-dim);font-size:12px;font-weight:600;flex-shrink:0} .fixed-strip .in b{display:block;color:var(--gold-soft);font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.1} .fixed-strip.urgent{border-color:var(--danger)}.fixed-strip.urgent .lab,.fixed-strip.urgent .in b{color:var(--danger)} .badge.fixed{color:var(--gold-soft);border-color:var(--gold)} .plan{margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 16px} .plan .lab{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:8px} .pstatus{font-size:14.5px;color:var(--ink-soft);margin-bottom:8px;line-height:1.4} .pstatus b{color:var(--ink)} .pstatus.behind b{color:var(--meal)}.pstatus.ahead b{color:var(--ok)}.pstatus.bad{color:var(--danger)}.pstatus.bad b{color:var(--danger)} .prow{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:15px} .prow .pt{flex:1;min-width:0} .prow .pd{color:var(--ink-dim);font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap} .prow.cut .pd{color:var(--meal)}.prow .pd s{color:var(--ink-dim);margin-left:4px} .prow.info{color:var(--ink-dim);font-size:13.5px} .prow.anchor{align-items:center;color:var(--gold-soft);font-weight:700} .prow.anchor svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;flex:0 0 auto} .prow.anchor .pd{color:var(--gold-soft)} .pretrip{display:flex;flex-direction:column;gap:9px} .ptask{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 13px;display:flex;gap:11px;align-items:flex-start} .ptask.urgent{border-color:var(--gold)} .ptask.late{border-color:var(--danger)} .ptask.done{opacity:.5} .ptask .pcheck{flex:0 0 auto;width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line);background:none; display:flex;align-items:center;justify-content:center;padding:0;margin-top:1px} .ptask.done .pcheck{border-color:var(--ok);color:var(--ok)} .ptask .pcheck svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:3} .ptask .pbody{flex:1;min-width:0} .ptask .pt{font-size:15.5px;font-weight:700;line-height:1.3} .ptask.done .pt{text-decoration:line-through;color:var(--ink-dim)} .ptask .pd{display:none;color:var(--ink-soft);font-size:14.5px;line-height:1.5;margin-top:7px;white-space:pre-line} .ptask.open .pd{display:block} .ptask .pwhen{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--ink-dim);border:1px solid var(--line); border-radius:999px;padding:3px 8px;margin-top:1px} .ptask .pwhen.soon{color:var(--gold);border-color:var(--gold)} .ptask .pwhen.late{color:var(--danger);border-color:var(--danger)} .countdown{text-align:center;padding:26px 10px 6px} .countdown .num{font-family:var(--serif);font-size:64px;line-height:1;color:var(--gold-soft)} .countdown .lab{color:var(--ink-dim);letter-spacing:.16em;text-transform:uppercase;font-size:13px;margin-top:8px} .carry{margin:14px 2px 2px} .carry .lab{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:8px} .carry ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px} .carry li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 13px; font-size:15.5px;color:var(--ink-soft);display:flex;gap:10px;align-items:flex-start} .carry li::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:2px;background:var(--gold);margin-top:7px} /* ---------- day strip + timeline ---------- */ .datestrip{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} .datestrip::-webkit-scrollbar{display:none} .chip{flex:0 0 auto;scroll-snap-align:center;background:var(--surface);border:1px solid var(--line); border-radius:14px;padding:9px 13px;text-align:center;min-width:62px;color:var(--ink-soft)} .chip .dow{font-size:12px;color:var(--ink-dim);font-weight:600} .chip .dnum{font-family:var(--serif);font-size:20px;margin-top:1px} .chip.active{background:var(--gold);color:var(--on-accent);border-color:transparent} .chip.active .dow{color:var(--on-accent)} .chip.today::after{content:"";display:block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin:3px auto 0} .chip.active.today::after{background:var(--on-accent)} .day-title{font-family:var(--serif);font-size:23px;margin:4px 2px 2px} .day-region{color:var(--ink-dim);font-size:14px;margin:0 2px 6px} .porttimes{display:inline-block;font-size:13px;font-weight:700;color:var(--gold);background:var(--surface); border:1px solid var(--line);border-radius:10px;padding:5px 10px;margin:2px 2px 8px} .timeline{position:relative;margin-top:6px} .stop{display:flex;gap:12px;padding:2px 0} .rail{flex:0 0 auto;width:22px;display:flex;flex-direction:column;align-items:center} .dot{width:14px;height:14px;border-radius:50%;border:2.5px solid var(--gold);background:var(--bg);margin-top:20px;flex:0 0 auto} .dot.done{background:var(--gold)} .line{width:2px;flex:1;background:var(--line);margin:2px 0} .stop:last-child .line{display:none} .card{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 14px; margin-bottom:12px;min-width:0} .card .top{display:flex;align-items:baseline;gap:9px} .card .tm{font-family:var(--serif);font-size:17px;color:var(--gold-soft);flex:0 0 auto;min-width:46px} .card .ttl{font-weight:700;font-size:17.5px;line-height:1.25} .card .type-ic{flex:0 0 auto;width:18px;height:18px;margin-top:2px} .card .meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px} .card .notes{color:var(--ink-soft);font-size:16px;line-height:1.55;margin-top:11px;white-space:pre-line} .card.done .ttl{color:var(--ink-dim);text-decoration:line-through;text-decoration-color:var(--ink-dim)} .tag{font-size:12.5px;font-weight:700;padding:4px 9px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);color:var(--ink-soft)} .tag.book{color:var(--on-accent);background:var(--gold);border-color:transparent} .tag.audio{color:var(--gold);display:inline-flex;gap:5px;align-items:center} .tag.audio svg{width:13px;height:13px;fill:currentColor} .card .rowbtns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .mini{border:1px solid var(--line);background:var(--surface2);border-radius:11px;padding:10px 12px;font-weight:700; font-size:14.5px;display:inline-flex;gap:7px;align-items:center;color:var(--ink); min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mini svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2} .mini.primary{background:var(--gold);color:var(--on-accent);border-color:transparent} .mini.ghost{background:none} .check{margin-left:auto;border:1px solid var(--line);background:none;border-radius:11px;padding:10px 12px; color:var(--ink-dim);font-weight:700;font-size:14px;display:inline-flex;gap:7px;align-items:center; flex:0 0 auto;white-space:nowrap} .check.on{color:var(--ok);border-color:var(--ok)} .check svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.4} .sea-card{text-align:center;padding:26px 18px;background:radial-gradient(120% 90% at 50% 0%,var(--surface2),var(--surface)); border:1px solid var(--line);border-radius:18px;margin-bottom:12px} .sea-card .ic{font-size:34px} .sea-card .ttl{font-family:var(--serif);font-size:22px;margin:6px 0} .sea-card .notes{color:var(--ink-soft);font-size:16px;line-height:1.55;white-space:pre-line} /* ---------- audio player (inline + mini) ---------- */ .player{margin-top:12px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:12px} .player .selrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px} .trk{border:1px solid var(--line);background:var(--surface2);border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:700;color:var(--ink-soft)} .trk.active{background:var(--gold);color:var(--on-accent);border-color:transparent} .player .ctl{display:flex;align-items:center;gap:12px} .pp{width:48px;height:48px;border-radius:50%;background:var(--gold);border:none;color:var(--on-accent);flex:0 0 auto; display:flex;align-items:center;justify-content:center} .pp svg{width:22px;height:22px;fill:var(--on-accent)} .back15{background:none;border:none;color:var(--ink-soft);display:flex;flex-direction:column;align-items:center;font-size:10px;font-weight:700} .back15 svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2} .scrub{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0} .scrub input[type=range]{width:100%;accent-color:var(--gold);height:22px} .scrub .tt{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-dim);font-variant-numeric:tabular-nums} .dlnote{font-size:12.5px;color:var(--ink-dim);margin-top:8px} .dlnote b{color:var(--gold)} .miniplayer{position:fixed;left:0;right:0;bottom:calc(var(--tab-h) + var(--safe-b));z-index:40; max-width:640px;margin:0 auto;background:var(--surface);border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(0,0,0,.25);display:flex;align-items:center;gap:11px;padding:9px 14px} .miniplayer .pp{width:40px;height:40px}.miniplayer .pp svg{width:18px;height:18px} .miniplayer .mtitle{min-width:0;flex:1} .miniplayer .mtitle b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .miniplayer .mtitle span{font-size:12px;color:var(--ink-dim)} .miniplayer .mx{background:none;border:none;color:var(--ink-dim);font-size:22px;padding:4px 6px} .miniplayer progress{position:absolute;top:-1px;left:0;width:100%;height:2px;border:none;background:transparent} .miniplayer progress::-webkit-progress-bar{background:transparent} .miniplayer progress::-webkit-progress-value{background:var(--gold)} /* ---------- tours / downloads ---------- */ .storagebar{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:8px 0 14px} .storagebar .row{display:flex;align-items:center;gap:12px} .storagebar .used{font-family:var(--serif);font-size:22px} .storagebar .cap{color:var(--ink-dim);font-size:13px} .dlall{margin-left:auto} .type-ic{width:18px;height:18px;flex:0 0 auto} .tour{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:10px; display:flex;align-items:center;gap:12px} .tour .type-ic{width:26px;height:26px;flex:0 0 auto} .tour .info{min-width:0;flex:1} .tour .info b{font-size:16px;display:block} .tour .info span{font-size:12.5px;color:var(--ink-dim)} .tour .dlbtn{flex:0 0 auto;border:1px solid var(--gold);background:none;color:var(--gold);border-radius:11px; padding:9px 13px;font-weight:700;font-size:14px;min-width:96px;text-align:center} .tour .dlbtn.have{border-color:var(--ok);color:var(--ok)} .tour .dlbtn.busy{border-color:var(--line);color:var(--ink-dim)} .tour .pbar{height:4px;background:var(--surface2);border-radius:3px;overflow:hidden;margin-top:8px} .tour .pbar i{display:block;height:100%;background:var(--gold);width:0} /* ---------- bookings ---------- */ .book-block{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px 16px;margin-bottom:12px} .book-block h3{font-family:var(--serif);font-size:19px;margin:0 0 4px} .book-block .ref{font-family:var(--serif);font-size:22px;color:var(--gold-soft);letter-spacing:.02em; user-select:all;margin:2px 0} .book-block .k{color:var(--ink-dim);font-size:13px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-top:8px} .book-block .v{font-size:16px} .book-block a.tel{color:var(--gold-soft);font-weight:700;text-decoration:none} .leg{border-top:1px solid var(--line);padding:9px 0} .leg .lg1{font-size:13.5px;color:var(--ink-dim)}.leg .lg1 b{color:var(--gold-soft);font-size:15px} .leg .lg2{font-size:15.5px;margin-top:2px}.leg .lg2 span{font-family:var(--serif);color:var(--gold-soft);margin:0 2px} .emg{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:6px} .emg a{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:12px;text-decoration:none;color:var(--ink)} .emg a b{display:block;font-family:var(--serif);font-size:24px;color:var(--gold-soft)} .emg a span{font-size:12.5px;color:var(--ink-dim)} .section-lab{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:16px 2px 8px} /* ---------- info ---------- */ .info-block{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px 16px;margin-bottom:12px} .info-block h3{font-family:var(--serif);font-size:18px;margin:0 0 6px;display:flex;gap:9px;align-items:center} .info-block p{color:var(--ink-soft);font-size:15.5px;line-height:1.55;margin:0} .toggle-row{display:flex;align-items:center;gap:12px} .switch{margin-left:auto;width:52px;height:30px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);position:relative;flex:0 0 auto} .switch i{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--ink-dim);transition:.18s} .switch.on{background:var(--gold)}.switch.on i{left:24px;background:var(--on-accent)} /* ---------- tab bar ---------- */ .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;max-width:640px;margin:0 auto; background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px); border-top:1px solid var(--line);padding-bottom:var(--safe-b);height:calc(var(--tab-h) + var(--safe-b))} .tab{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;color:var(--ink-dim);font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:6px 2px} .tab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .tab[aria-current="true"]{color:var(--gold)} .jumpnow{position:fixed;right:16px;bottom:calc(var(--tab-h) + var(--safe-b) + 16px);z-index:45; background:var(--gold);color:var(--on-accent);border:none;border-radius:999px;padding:11px 16px;font-weight:800; box-shadow:var(--shadow);display:flex;gap:7px;align-items:center;font-size:14px} .jumpnow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4} .offline-pill{position:fixed;top:calc(var(--safe-t) + 8px);left:50%;transform:translateX(-50%);z-index:60; background:var(--danger);color:var(--on-accent);font-weight:800;font-size:12.5px;padding:6px 14px;border-radius:999px;box-shadow:var(--shadow)} /* ---------- images ---------- */ .hero{position:relative;margin:-20px -18px 14px;border-radius:22px 22px 0 0;overflow:hidden;aspect-ratio:16/10;background:var(--surface2)} .hero img{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block} .hero .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,24,.88) 0%,rgba(10,12,24,.35) 45%,rgba(10,12,24,.05) 100%)} .hero .over{position:absolute;left:18px;right:18px;bottom:14px;color:#fff} .hero .over .daytag{color:rgba(255,255,255,.82)} .hero .over .time{color:#ead1a0} .hero .over h2{color:#fff;margin:4px 0 0;text-shadow:0 1px 12px rgba(0,0,0,.4)} .card-img{margin:-13px -14px 0;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface2);border-radius:16px 16px 0 0} .card-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block} .card-img .cscrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,24,.82),rgba(10,12,24,0) 60%)} .card-img .cover{position:absolute;left:14px;right:14px;bottom:10px;display:flex;align-items:baseline;gap:9px;color:#fff} .card-img .cover .tm{color:#ead1a0} .card-img .cover .ttl{color:#fff;font-weight:700;font-size:17.5px;text-shadow:0 1px 10px rgba(0,0,0,.5)} .card.hasimg .top{display:none} .pop-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:8px;display:block;background:var(--surface2)} /* ---------- add a stop ---------- */ .addstop{margin:8px 0 4px} .addbtn{width:100%;border:1.5px dashed var(--line);background:none;color:var(--gold);border-radius:14px;padding:14px;font-weight:700;font-size:15.5px} .addform{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;margin-top:10px;display:flex;flex-direction:column;gap:11px} .addform label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);font-weight:700} .addform input,.addform textarea{font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;text-transform:none;letter-spacing:0;font-weight:400} .addform textarea{resize:vertical} .as-types{display:flex;gap:8px} .as-type{flex:1;border:1px solid var(--line);background:var(--surface2);color:var(--ink-soft);border-radius:10px;padding:10px;font-weight:700} .as-type.active{background:var(--gold);color:var(--on-accent);border-color:transparent} .as-actions{display:flex;gap:9px} .as-actions .mini{flex:1;justify-content:center} /* ---------- MAP ---------- */ .mapwrap{margin:8px 0 4px;position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line)} #leaflet{width:100%;background:var(--surface); /* dvh follows Safari's shrinking/growing bottom bar; vh is the fallback for older browsers */ height:calc(100vh - var(--tab-h) - var(--safe-b) - var(--safe-t) - 300px); height:calc(100dvh - var(--tab-h) - var(--safe-b) - var(--safe-t) - 300px); min-height:260px} .leaflet-container{font-family:var(--sans);background:var(--bg2)} .pin{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg); background:var(--surface2);border:2px solid var(--gold);box-shadow:0 3px 8px rgba(0,0,0,.4); display:flex;align-items:center;justify-content:center} .pin b{transform:rotate(45deg);color:var(--gold);font-size:13px;font-weight:800;font-family:var(--sans)} .pin.cur{background:var(--gold);border-color:#fff} .pin.cur b{color:var(--on-accent)} .pin.meal{border-color:var(--meal)} .pin.meal b{color:var(--meal)} .pin.transit{border-color:var(--transit)} .pin.transit b{color:var(--transit)} .leaflet-popup-content-wrapper{background:var(--surface);color:var(--ink);border-radius:14px;box-shadow:var(--shadow)} .leaflet-popup-tip{background:var(--surface)} .leaflet-popup-content{margin:12px 14px;font-size:15px} .pop .pt{font-family:var(--serif);font-size:16px;margin:0 0 2px} .pop .ph{color:var(--gold-soft);font-size:13px;margin-bottom:8px} .pop .pb{display:flex;gap:8px} .pop a,.pop button{border:1px solid var(--line);background:var(--surface2);color:var(--ink);border-radius:10px; padding:8px 11px;font-weight:700;font-size:13.5px;text-decoration:none;display:inline-flex;gap:6px;align-items:center} .pop a.primary{background:var(--gold);color:var(--on-accent);border-color:transparent} .map-hint{font-size:12.5px;color:var(--ink-dim);padding:8px 4px 0;text-align:center} .getting{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 16px; display:flex;gap:12px;align-items:center} .getting .gic{width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--surface2);display:flex;align-items:center;justify-content:center} .getting .gic svg{width:20px;height:20px;fill:none;stroke:var(--transit);stroke-width:1.8} .getting .gl{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700} .getting .gt{font-size:15.5px;color:var(--ink-soft);line-height:1.4} .timeleft{margin:12px 0 2px;background:var(--surface);border:1px solid var(--line);border-radius:16px; padding:13px 16px;display:flex;align-items:center;gap:12px} .timeleft .big{font-family:var(--serif);font-size:26px;color:var(--gold-soft);line-height:1} .timeleft .lab{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700} .timeleft .sub{color:var(--ink-dim);font-size:13px} /* ---------- tickets/PDF ---------- */ .tkt{margin-top:10px;background:var(--bg2);border:1px dashed var(--line);border-radius:12px;padding:11px 13px} .tkt.has{border-style:solid;border-color:var(--ok)} .tkt .row{display:flex;align-items:center;gap:10px} .tkt .tname{min-width:0;flex:1;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tkt .tname b{color:var(--ok)} .tkt .tbtn{border:1px solid var(--line);background:var(--surface2);border-radius:10px;padding:8px 11px;font-weight:700;font-size:13.5px;color:var(--ink)} .tkt .tbtn.primary{background:var(--gold);color:var(--on-accent);border-color:transparent} .tkt .tbtn.view{border-color:var(--ok);color:var(--ok);background:none} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* ---------- overflow guards (phone) ---------- */ html,body{max-width:100%;overflow-x:hidden} #app,.stop,.card,.now-card,.book-block,.info-block,.ptask,.timeleft,.next-strip,.fixed-strip,.getting,.plan{min-width:0;max-width:100%} .card .top{flex-wrap:wrap} .card .ttl,.card-img .cover .ttl,.now-card h2{overflow-wrap:anywhere} .badgerow,.meta{flex-wrap:wrap;max-width:100%} .badge,.tag{max-width:100%;overflow-wrap:anywhere} .book-block .ref{overflow-wrap:anywhere} /* live per-stop countdown chips */ .tag.when{color:var(--gold-soft);border-color:var(--gold);font-variant-numeric:tabular-nums} .tag.now{color:var(--on-accent);background:var(--gold);border-color:transparent;letter-spacing:.04em} .card.done .tag.when,.card.done .tag.now{display:none} /* anniversary banner at the head of the Now screen */ .trip-banner{margin:0 -16px 12px;overflow:hidden;background:var(--surface)} .trip-banner img{display:block;width:100%;height:auto} /* ---------- Borghese 75-minute route ---------- */ .routebar{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--gold);border-radius:16px;padding:13px 16px;margin-bottom:12px} .routebar .lab{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700} .routebar .big{font-family:var(--serif);font-size:30px;color:var(--gold-soft);line-height:1.1;font-variant-numeric:tabular-nums} .routebar .sub{color:var(--ink-dim);font-size:12.5px} .routebar .mini{margin-left:auto;flex:0 0 auto} .route{display:flex;flex-direction:column;gap:8px} .rstep{display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 13px} .rstep .rt{flex:0 0 62px;text-align:right} .rstep .rt b{display:block;font-family:var(--serif);font-size:17px;color:var(--gold-soft)} .rstep .rt span{font-size:11.5px;color:var(--ink-dim)} .rstep .rb{flex:1;min-width:0} .rstep .rr{font-weight:800;font-size:15.5px} .rstep .rw{color:var(--ink-soft);font-size:14.5px;line-height:1.5;margin-top:4px} .rstep.now{border-color:var(--gold);background:linear-gradient(160deg,var(--surface2),var(--surface))} .rstep.now .rr{color:var(--gold)} .rstep.past{opacity:.42} /* big bold time under the photo, in the card body */ .card .tmrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:2px} .card .tmbig{font-size:21px;font-weight:800;color:var(--gold-soft);letter-spacing:.01em;line-height:1.2; font-variant-numeric:tabular-nums} .card.hasimg .tmrow{margin-top:10px} .card.done .tmbig{color:var(--ink-dim)} .card .meta:empty{display:none} /* the non-photo cards get the same weight */ .card .top .tm{font-family:var(--sans);font-size:21px;font-weight:800;color:var(--gold-soft);min-width:0} .card-img .cover{bottom:12px} /* ---------- palette switch (More) ---------- */ .palrow{display:flex;gap:9px;margin:2px 0 14px} .palbtn{flex:1;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:14px; padding:13px 10px;font-weight:800;font-size:14.5px;display:flex;align-items:center;justify-content:center;gap:9px} .palbtn .sw{width:17px;height:17px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(128,128,128,.45)} .palbtn.on{border-color:var(--gold);color:var(--gold)} .palbtn .ink{background:linear-gradient(135deg,#12162a 50%,#d3ab5b 50%)} .palbtn .marble{background:linear-gradient(135deg,#f3efe9 50%,#6b1f2a 50%)} /* marble: the gallery-card scrim can be gentler on a light ground */ :root[data-palette="marble"] .hero .scrim{background:linear-gradient(to top,rgba(30,18,16,.82) 0%,rgba(30,18,16,.3) 45%,rgba(30,18,16,.04) 100%)} :root[data-palette="marble"] .card-img .cscrim{background:linear-gradient(to top,rgba(30,18,16,.8),rgba(30,18,16,0) 60%)} :root[data-palette="marble"] .card-img .cover .tm{color:#f0d9a8} :root[data-palette="marble"] .tabbar{background:color-mix(in srgb,var(--bg) 94%,transparent)} /* ---------- collapsible sections ---------- */ .fold{margin:14px 0 2px} .fold-head{width:100%;display:flex;align-items:center;gap:9px;background:none;border:none;padding:6px 2px;text-align:left} .fold-head .lab{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700} .fold-head .cnt{font-size:11.5px;font-weight:700;color:var(--ink-dim);border:1px solid var(--line); border-radius:999px;padding:2px 8px;white-space:nowrap} .fold-head .chev{width:18px;height:18px;margin-left:auto;flex:0 0 auto;fill:none;stroke:var(--gold); stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s} .fold.open .fold-head .chev{transform:rotate(180deg)} .fold-body{display:none} .fold.open .fold-body{display:block} .fold .carry{margin:4px 0 0} @media (prefers-reduced-motion:reduce){.fold-head .chev{transition:none}} /* the Map tab should never scroll under the tab bar */ body.map-view #app{padding-bottom:calc(var(--tab-h) + var(--safe-b) + 8px)} body.map-view .map-hint{padding:6px 4px 0;font-size:12px} body.map-view .day-title{font-size:20px;margin:2px 2px 4px} /* ---------- swipe left to delete ---------- */ .carry-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px} .carry-list li,.ptask{position:relative;touch-action:pan-y;will-change:transform} .carry-list li::after,.ptask::after{content:"Delete";position:absolute;right:14px;top:0;bottom:0; display:flex;align-items:center;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--danger);opacity:0;pointer-events:none} /* the label used to sit outside the row (translateX(100%)), which made the whole page 40px wider than the screen and let iOS pan sideways. It now fades in place. */ .carry-list,.pretrip,.fold-body{overflow-x:clip} .carry-list li.swiping::after,.ptask.swiping::after{opacity:1} .carry-list li.swiping,.ptask.swiping{border-color:var(--danger)} /* the big "time to move" number on Now */ .now-card.bigcount{padding:6px 18px 18px;margin-bottom:12px} .now-card.bigcount .countdown{padding:18px 10px 4px} .now-card.bigcount .num{font-size:56px;font-variant-numeric:tabular-nums} .now-card.bigcount .lab{margin-top:6px;font-size:11.5px} .now-card.bigcount .nextname{font-family:var(--serif);font-size:19px;color:var(--ink);margin-top:5px;line-height:1.25} .now-card.bigcount .ticker{font-family:var(--sans);font-size:26px;font-weight:800;color:var(--ink); font-variant-numeric:tabular-nums;letter-spacing:.02em;margin-top:8px} .now-card.bigcount .tickcap{color:var(--ink-dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:3px} /* small inline text button (version check in More) */ .linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--gold-soft); text-decoration:underline;text-underline-offset:2px;cursor:pointer} /* Borghese "must see" ranking on the route screen */ .info-block.mustsee ol{margin:8px 0 0;padding-left:22px} .info-block.mustsee li{margin:5px 0;font-weight:650;color:var(--ink)} .info-block.mustsee .ms-note{margin-top:9px;font-size:12.5px;color:var(--ink-dim)} /* ---- the whole trip on one screen ---- */ .overviewbtn{display:block;width:100%;margin:10px 0 4px;padding:12px 14px;border-radius:14px; background:var(--surface2);border:1px solid var(--line);color:var(--gold-soft); font-size:14px;font-weight:650;letter-spacing:.01em;text-align:center;cursor:pointer} .overviewbtn.big{margin-top:4px;font-size:15px;padding:14px} .info-block.throughline p{font-size:14.5px;line-height:1.55} .triplist{margin-top:6px} .leghead{margin:18px 0 8px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)} .tripday{display:flex;gap:12px;width:100%;text-align:left;align-items:flex-start; padding:12px 13px;margin-bottom:8px;border-radius:14px;background:var(--surface); border:1px solid var(--line);cursor:pointer} .tripday.is-now{border-color:var(--gold-soft);box-shadow:0 0 0 1px var(--gold-soft) inset} .tripday .td-n{flex:0 0 30px;height:30px;border-radius:9px;background:var(--surface2); color:var(--gold-soft);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center} .tripday .td-b{min-width:0;flex:1} .tripday .td-h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap} .tripday .td-d{font-size:12.5px;color:var(--ink-dim);letter-spacing:.04em} .tripday .td-tag{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; color:var(--on-accent);background:var(--gold-soft);padding:2px 7px;border-radius:999px} .tripday .td-g{margin-top:5px;font-size:14.5px;line-height:1.45;color:var(--ink)} .tripday .td-a{margin-top:6px;font-size:12px;color:var(--gold-soft);font-weight:650} /* ---- "how you get there" row on every stop card ---- */ .howto{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 2px;padding:7px 10px; border-radius:10px;background:var(--surface2);border:1px solid var(--line)} .howto .hw-ic{font-size:15px;line-height:1;flex:0 0 auto} .howto .hw-t{font-size:13.5px;font-weight:650;color:var(--ink);min-width:0;flex:1} .howto .hw-m{font-size:12px;color:var(--gold-soft);font-weight:700;letter-spacing:.02em;flex:0 0 auto} .howto.stay{background:transparent;border:0;padding:2px 0;font-size:12.5px;color:var(--ink-dim);font-style:italic} .howto.m-walk .hw-t{color:var(--ink)} .howto.m-taxi,.howto.m-car{border-color:rgba(214,177,107,.35)} /* ---- optional stops: dashed, clearly "your call" ---- */ .card.is-optional{border-style:dashed;border-color:rgba(214,177,107,.5);background:transparent} .badge.optional{background:transparent;border:1px dashed var(--gold-soft);color:var(--gold-soft);font-weight:700} .rail .dot.opt{background:transparent;border:2px dashed var(--gold-soft)} /* optional stops render compact */ .card.is-optional .top .ttl{font-size:16px} .card.is-optional .tmbig{font-size:20px} .card.is-optional .notes{font-size:13px} .impact{margin:8px 0 2px;padding:9px 11px;border-radius:10px; background:var(--surface2);border:1px dashed rgba(214,177,107,.45)} .impact .im-r{display:flex;gap:9px;align-items:baseline;margin-bottom:5px} .impact .im-k{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; padding:2px 7px;border-radius:999px} .impact .im-k.go{background:var(--gold-soft);color:var(--on-accent)} .impact .im-k.no{background:transparent;border:1px solid var(--line);color:var(--ink-dim)} .impact .im-v{font-size:12.5px;line-height:1.4;color:var(--ink);min-width:0} .impact .im-same{margin-top:7px;padding-top:7px;border-top:1px solid var(--line); font-size:12px;color:var(--gold-soft);font-weight:650} /* make it unambiguous that the travel row is the journey TO this stop */ .howto .hw-lab{display:block;font-size:9.5px;font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-dim);margin-bottom:2px} .howto .hw-from{color:var(--ink-dim);font-weight:500}