/* Shared light themes: World mist blue / Taiwan cream and honey. */
:root{color-scheme:light;--bg:#e5eff5;--surface:#fff;--surface2:#edf6f9;--line:#b5cddc;--text:#173449;--muted:#526775;--mint:#168da3;--gold:#f6cd77;--blue:#87bcf5;--danger:#af3446;--accent-soft:#d4edf2;--accent-ink:#096b7b;--ocean:#c4dfe9;--visited:#35aab5;--focus:#168da330}
:root[data-journal="taiwan"]{--bg:#fffaf0;--surface:#fffdf6;--surface2:#fff9e7;--line:#e5d7ad;--text:#36352f;--muted:#686557;--mint:#e4b72f;--accent-soft:#fff1bc;--accent-ink:#80610b;--ocean:#bedfea;--visited:#f1cf67;--focus:#e4b72f35}
body{background:var(--bg);color:var(--text)}button{color:var(--text)}a{color:var(--accent-ink)}.outline,.native-date-shell{border-color:var(--line)}.secondary{background:var(--accent-soft);color:var(--text)}.danger{background:#fbe6e9;color:#9d293e}.sync-pill,label{color:var(--text)}.kicker,.status,.summary-block strong,.trip-picker-year{color:var(--accent-ink)}
.hero{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:14px;padding:20px;background:var(--surface);border-color:var(--line)}.hero>div{min-width:0}.hero .kicker{display:none}.hero h2{font-size:clamp(20px,2.9vw,30px);line-height:1.35;margin:0 0 5px}.hero p{color:var(--muted);font-size:14px;line-height:1.5}.hero-aside{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:center}.hero .number{min-width:0;padding:4px 8px;border:0;border-left:1px solid var(--line);background:transparent;border-radius:0;text-align:center}.hero .number:first-child{border-left:0}.number strong{color:var(--accent-ink);font-size:30px;line-height:1.2}.number span{display:block;color:var(--muted);font-size:13px;white-space:nowrap;margin-top:5px}
.home-view-all{padding:8px 0 8px 10px;background:transparent;border:0;border-radius:0;color:var(--accent-ink);font-size:14px;font-weight:600;min-height:40px;white-space:nowrap}.home-view-all:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.journal-location,.journal-location.is-taiwan{background:var(--accent-soft);color:var(--text)}.journal-switch{border-color:var(--mint)}.country-chip{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--line)}.note-trip-banner{background:var(--accent-soft);border-color:var(--line);color:var(--text)}.note-trip-banner strong{color:var(--text)}.note-trip-banner span{color:var(--accent-ink)}
.empty{border-color:var(--line)}.story-icon,.trip-picker-item,.date-trigger,input,textarea,select,.end-calendar,.sort-photo,.trip-video-link{background:var(--surface);color:var(--text);border-color:var(--line)}input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}input:focus,textarea:focus,select:focus,.native-date-shell:focus-within{box-shadow:0 0 0 2px var(--focus)}.story-icon-danger{color:var(--danger);border-color:#d6a1ab}.notice{background:var(--accent-soft);color:var(--text)}.budget-bar{background:var(--line)}.trip-picker-item.selected,.calendar-days button.in-trip{background:var(--accent-soft);color:var(--text);border-color:var(--mint)}.calendar-days button{background:var(--surface2);color:var(--muted)}.calendar-days button.selected{background:var(--mint);color:var(--text)}
.nav{background:var(--surface);border-color:var(--line);box-shadow:0 -4px 18px #17344912}.nav button{color:var(--muted)}.nav button.active{background:var(--accent-soft);color:var(--accent-ink)}.nav [data-cloud-state="connected"] .sync-cloud,.nav [data-cloud-state="syncing"] .sync-cloud{color:var(--accent-ink)}
.map,.mini-map,.leaflet-container{background:var(--ocean)}#map-expand{background:var(--surface);border-color:var(--line)}#map-dialog{background:var(--bg);color:var(--text)}.recent-trip-arrow{background:var(--surface);color:var(--accent-ink);border-color:var(--line);box-shadow:0 4px 16px #17344922}.home-fragments-head{border-color:var(--line)}.trip-context-bar{background:var(--surface)}#trip-detail .story-item{background:var(--surface);border-color:var(--line)}#trip-detail .story-item>small{color:var(--muted)}#trip-detail .story::before{background:var(--line)}#trip-detail .story-item::before{background:var(--mint);border-color:var(--surface)}.timeline,.story{border-color:var(--line)}
.maplibregl-popup-content{background:var(--surface);color:var(--text)}.maplibregl-popup-tip{border-color:transparent!important}
.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:var(--surface)!important}
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip{border-bottom-color:var(--surface)!important}
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{border-bottom-color:var(--surface)!important}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:var(--surface)!important}
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{border-top-color:var(--surface)!important}
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{border-top-color:var(--surface)!important}
.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--surface)!important}
.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--surface)!important}.maplibregl-popup-close-button{color:var(--text)}.maplibregl-ctrl-attrib{background:var(--surface);color:var(--muted)}.maplibregl-ctrl-attrib a{color:var(--accent-ink)}
@media(max-width:580px){.hero{grid-template-columns:minmax(0,1.25fr) minmax(162px,1fr);padding:14px 10px;gap:8px}.hero h2{font-size:18px}.hero p{font-size:13px}.hero .number{padding:3px 3px}.hero .number strong{font-size:25px}.hero .number span{font-size:12px}}

.cover,.note-thumb,.detail-cover{background:var(--accent-soft)}.cover-label,.detail-cover h2{color:#fff}.gallery-photo{background:var(--surface2)}:root[data-journal="taiwan"] .number strong{color:#b48b00}

/* Clear trip affiliation and requested home navigation cues. */
.note-trip-banner{background:#28657a;border-color:#20576b;color:#fff}.note-trip-banner strong{color:#fff}.note-trip-banner span{color:#d6edf6}
:root[data-journal="taiwan"] .note-trip-banner{background:#ead078;border-color:#c5a745;color:#36352f}:root[data-journal="taiwan"] .note-trip-banner strong{color:#36352f}:root[data-journal="taiwan"] .note-trip-banner span{color:#5b4a1c}
.home-view-all{display:inline-flex;align-items:center;gap:7px}.home-view-all::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-right:3px;flex:none}#visited-open>span{font-weight:800}



/* Keep navigation outside the content's momentum-scrolling region. */
html{height:100%;overflow:hidden;scroll-behavior:auto}
body{height:100dvh;min-height:0;overflow:hidden}
.app{height:calc(100dvh - var(--nav-height,76px));min-height:0;overflow:auto;overscroll-behavior:contain;padding-bottom:24px;scroll-behavior:auto}
.nav{z-index:1400;isolation:isolate;touch-action:pinch-zoom}
.nav button{touch-action:pinch-zoom;min-height:48px;user-select:none;-webkit-user-select:none}
html.map-expanded .app{overflow:hidden}

/* Full-width scroller keeps the desktop scrollbar at the viewport edge. */
.app{max-width:none;padding-left:max(18px,calc((100% - 1144px)/2));padding-right:max(18px,calc((100% - 1144px)/2))}

/* Preserve balanced proportions and give every statistic equal space. */
.hero{grid-template-columns:minmax(max-content,1.35fr) minmax(0,1fr);gap:10px}
.hero p{white-space:nowrap}
.hero-aside{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch}
@media(max-width:580px){.hero{grid-template-columns:minmax(max-content,1.3fr) minmax(150px,1fr);padding:14px 8px;gap:4px}.hero .number{padding:3px 0}}

/* Reposition the original image within the trip's banner frame. */
.trip-cover-preview .cover-position-stage{position:relative;width:100%;overflow:hidden;border-radius:12px;background:var(--surface2);touch-action:none;cursor:grab;user-select:none}
.trip-cover-preview .cover-position-stage:active{cursor:grabbing}
.trip-cover-preview .cover-position-stage:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.trip-cover-preview .cover-position-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;margin:0;object-fit:cover;border-radius:0;pointer-events:none}
.cover-position-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#061a26b5);pointer-events:none}
.cover-position-title{position:absolute;left:14px;bottom:12px;color:#fff;z-index:1;font-size:18px;pointer-events:none}
.cover-position-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:12px 0}
.cover-position-controls label{flex:1 1 150px;font-size:14px}.cover-position-controls input{display:block;width:100%;padding:0;margin:6px 0;accent-color:var(--mint)}

/* Darker World home button; retain its existing hover appearance. */
.journal-location:not(.is-taiwan){background:#a3d2dc}
@media(hover:hover) and (pointer:fine){.journal-location:not(.is-taiwan):hover{background:var(--accent-soft)}}

/* Day and date above the location and travel mode. */
.story-date-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:6px;color:var(--muted)}
.trip-day-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;background:#28657a;color:#fff;font-size:13px;font-weight:800;line-height:1.4;white-space:nowrap}
:root[data-journal="taiwan"] .trip-day-badge{background:#ead078;color:#5b4a1c}
#trip-detail .story-item>.story-location-row{margin-bottom:8px;line-height:1.5}

/* Lightbox sizes come from the actual visual viewport, including page zoom. */
#photo-dialog{touch-action:none;overscroll-behavior:contain}
#photo-dialog .photo-viewer{height:100%;min-height:0}
#photo-dialog .photo-toolbar,#photo-dialog .photo-footer{box-sizing:border-box}

/* Follow the visible card group sides in stacked and horizontal layouts. */
.carousel-edge-glow{position:absolute;top:25%;width:12px;height:50%;z-index:3;pointer-events:none;border-radius:999px;color:#168da3;background:radial-gradient(ellipse at center,currentColor 0%,transparent 70%);filter:blur(2px);opacity:0;animation:carousel-edge-glow 1050ms ease-in-out both}
.carousel-edge-glow[data-side="left"]{left:-12px}.carousel-edge-glow[data-side="right"]{right:-12px}
:root[data-journal="taiwan"] .carousel-edge-glow{color:#d5a52a}
@keyframes carousel-edge-glow{0%{opacity:0}24%{opacity:.9}45%{opacity:.75}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.carousel-edge-glow{animation-duration:450ms}}

#trip-form button[type="submit"],#note-submit{color:#fff}
:root[data-journal="taiwan"] #trip-form button[type="submit"],:root[data-journal="taiwan"] #note-submit{background:var(--mint);color:var(--text)}

/* Contrasting arrival cue guides the eye to the selected journal entry. */
#trip-detail .story-item{--note-cue:#287f9a;--note-cue-wash:#dceff5;--note-cue-halo:#287f9a45}
:root[data-journal="taiwan"] #trip-detail .story-item{--note-cue:#bb761b;--note-cue-wash:#ffebcc;--note-cue-halo:#d9943652}
#trip-detail .story-item.note-located{animation:note-arrival 2500ms ease-in-out both}
@keyframes note-arrival{0%,100%{border-color:var(--line);background:var(--surface);box-shadow:0 0 0 0 transparent}12%,48%{border-color:var(--note-cue);background:var(--note-cue-wash);box-shadow:0 0 0 2px var(--note-cue-halo)}30%{border-color:var(--line);background:var(--surface);box-shadow:0 0 0 1px var(--note-cue-halo)}76%{border-color:var(--line);background:var(--surface);box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){#trip-detail .story-item.note-located{animation:none;outline:none;border-color:var(--note-cue);background:var(--note-cue-wash);box-shadow:0 0 0 2px var(--note-cue-halo)}}

/* Summit field uses the existing journal palette without changing home statistics. */
.baiyue-field{margin:16px 0;border:1px solid var(--line);border-radius:12px;padding:12px}
.baiyue-field[hidden]{display:none}.baiyue-field summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--text);min-height:24px}
.baiyue-selection-count{margin-left:8px;color:var(--muted);font-size:13px;font-weight:500}
.baiyue-selected,.baiyue-badges{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.baiyue-options{max-height:240px;overflow:auto;overscroll-behavior:auto;margin-top:10px;border-top:1px solid var(--line)}
.baiyue-options .baiyue-option{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:8px 4px;border-bottom:1px solid var(--line);font-weight:500;color:var(--text);cursor:pointer}
.baiyue-option input{flex:0 0 auto;width:20px;height:20px;padding:0;margin:0;accent-color:var(--mint)}

/* Shared action colors for the six World journal create/edit/save buttons. */
:root[data-journal="world"] #trips [data-open-trip],
:root[data-journal="world"] #notes-add,
:root[data-journal="world"] #trip-form button[type="submit"],
:root[data-journal="world"] #note-submit,
:root[data-journal="world"] #detail-edit,
:root[data-journal="world"] [data-write-trip]{background:#8dc5d0;color:var(--text)}

/* Independent note-card cover, without changing gallery order. */
.sort-photo-image .card-cover-star{position:absolute;right:7px;top:7px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;min-width:0;border:0;border-radius:0;background:transparent;color:#fff;font-size:22px;line-height:1;box-shadow:none;text-shadow:0 1px 3px #0009;touch-action:manipulation}
.sort-photo-image .card-cover-star[aria-pressed="true"]{color:#e4b72f}
.card-cover-star:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
@media(hover:hover) and (pointer:fine){.sort-photo-image .card-cover-star{font-size:26px;opacity:0;pointer-events:none}.sort-photo-image:hover .card-cover-star,.sort-photo:focus-within .card-cover-star{opacity:1;pointer-events:auto}}
@media(any-pointer:coarse){.sort-photo-image .card-cover-star{font-size:22px;opacity:1;pointer-events:auto}}

/* Keep Taiwan card borders inside the carousel clipping area, including fractional pixels. */
@media(min-width:581px){:root[data-journal="taiwan"] #home-trips .trip-page{padding-bottom:4px}}

/* In-page navigation stays inside the content scroller. */

/* iPad: document-positioned shell verified on Chrome with keyboard panning. */
html[data-ipad-viewport="true"]{overscroll-behavior:none}
html[data-ipad-viewport="true"] body{position:static;inset:auto;display:block;height:100%;width:100%;min-height:0;overflow:hidden}
#ipad-viewport-shell{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;background:var(--bg)}
html[data-ipad-viewport="true"] .app{position:absolute;inset:0 0 var(--nav-height,76px) 0;width:100%;height:auto;min-height:0;margin:0;overflow:auto;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
html[data-ipad-viewport="true"] .nav{position:absolute;inset:auto 0 0;transform:none;padding-bottom:max(2px,calc(env(safe-area-inset-bottom,0px) - 3px))}
#ipad-viewport-shell .viewport-debug{position:absolute}
.viewport-debug{position:fixed;top:8px;left:8px;z-index:2000;margin:0;padding:8px 10px;max-width:calc(100vw - 16px);background:#173449ed;color:#fff;font:12px/1.5 monospace;white-space:pre-wrap;pointer-events:none}


/* Larger iPad navigation labels/icons, shared by three- and five-button menus. */
html[data-ipad-viewport="true"] .nav button{font-size:14px}
html[data-ipad-viewport="true"] .nav button b{font-size:25px}
html[data-ipad-viewport="true"] .nav .sync-cloud,html[data-ipad-viewport="true"] .nav b .taiwan-icon{width:30px;height:30px}

/* Home card titles occupy one line at every screen size. */
#home-trips .trip-card,#home-notes .note-card{min-width:0}
#home-trips .trip-body,#home-notes .note-body{min-width:0}
#home-trips .trip-body h3,#home-notes .note-body h3{display:block;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset;overflow-wrap:normal;word-break:normal}
#home-notes .note-trip-banner{min-width:0;flex-wrap:nowrap;overflow:hidden}
#home-notes .note-trip-banner span{flex-shrink:0;white-space:nowrap}
#home-notes .note-trip-banner strong{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Navigation controls share each journal's Add Trip color. */
:root{--trip-action-bg:#8dc5d0}
:root[data-journal="taiwan"]{--trip-action-bg:var(--mint)}
:root[data-journal] #trips [data-open-trip],
:root[data-journal] #journal-location,
:root[data-journal] #detail-back,
:root[data-journal] #return-slot-detail-back,
:root[data-journal] [data-return-target="detail-back"]{background:var(--trip-action-bg);color:var(--text);border-color:var(--trip-action-bg)}

/* Native sticky return toolbar stays inside the content scroller. */
.trip-context-bar{position:sticky;top:0}

/* Clear only the archive text query; keep the adjacent filter independent. */
.archive-search-field{position:relative;min-width:0}
.archive-search-field input{width:100%;padding-right:42px}
.archive-search-field input::-webkit-search-cancel-button,.archive-search-field input::-webkit-search-decoration{-webkit-appearance:none}
.archive-search-field .archive-search-clear{position:absolute;right:3px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:36px;height:36px;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font:24px/1 system-ui;box-shadow:none;touch-action:manipulation}
.archive-search-field .archive-search-clear[hidden]{display:none}
.archive-search-field .archive-search-clear:hover{background:var(--surface2);color:var(--text)}
.archive-search-field .archive-search-clear:focus-visible{outline:2px solid var(--mint);outline-offset:-4px}

@media(max-width:580px){
 .archive-tools{grid-template-columns:minmax(0,1fr) 116px;gap:8px}
 .archive-search-field input{padding-left:10px;padding-right:38px}
 .archive-search-field input:placeholder-shown{padding-right:10px}
 .archive-search-field input::placeholder{font-size:clamp(11px,calc((100vw - 180px)/12),15px)}
}

/* More room for three equally spaced statistics and their divider gaps. */
.hero{grid-template-columns:minmax(max-content,1.2fr) minmax(0,1fr);gap:4px}
.hero p{white-space:nowrap}
.hero-aside{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:580px){.hero{grid-template-columns:minmax(max-content,1.2fr) minmax(162px,1fr);gap:2px}.hero .number{padding:3px 3px}}

/* Center visible content together without changing its size or internal gaps. */
.hero>div{transform:translateX(var(--hero-content-shift,0px))}

/* Keep the mobile home map inset evenly inside its card. */
@media(max-width:580px){.map-card #world-map{margin-inline:10px}}

/* Card cover adjustment applies to banner cards; compact square thumbnails stay centered. */
.note-thumb{position:relative;overflow:hidden}
.note-thumb-photo{height:100%;width:100%;overflow:hidden}
.note-thumb .note-crop-button{position:absolute;right:8px;top:8px;z-index:2;display:none;place-items:center;width:36px;height:36px;padding:0;border:1px solid #ffffff66;border-radius:10px;background:#173449c9;color:#fff;box-shadow:0 2px 8px #0003;touch-action:manipulation}
.note-crop-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.note-thumb .note-crop-button[hidden]{display:none!important}
@media(min-width:581px){.note-thumb .note-crop-button{display:grid}.note-thumb img{object-position:var(--note-cover-x,50%) var(--note-cover-y,50%)}}
@media(any-pointer:coarse){.note-thumb .note-crop-button{width:44px;height:44px}}
#note-crop-dialog{width:min(95vw,680px)}
#note-crop-dialog h3{margin-bottom:0}
#note-crop-dialog .note-crop-preview .cover-position-stage::after{display:none}
#note-crop-dialog [data-crop-save]{background:var(--trip-action-bg);color:#fff}

/* Recent trip cards have their own crop, independent of the detail banner. */
.cover-photo{width:100%;height:100%;overflow:hidden}
.cover::after{pointer-events:none}
#home-trips .cover .trip-card-crop-button{position:absolute;right:8px;top:8px;z-index:2;display:none;place-items:center;width:36px;height:36px;padding:0;border:1px solid #ffffff66;border-radius:10px;background:#173449c9;color:#fff;box-shadow:0 2px 8px #0003;touch-action:manipulation}
#home-trips .cover .trip-card-crop-button[hidden]{display:none!important}
@media(min-width:581px){#home-trips .cover .trip-card-crop-button{display:grid}#home-trips .cover img{object-position:var(--trip-card-x,50%) var(--trip-card-y,50%)}}
@media(any-pointer:coarse){#home-trips .cover .trip-card-crop-button{width:44px;height:44px}}

#photo-stage.zoomed{cursor:grab;user-select:none}
#photo-stage.zoomed.mouse-dragging{cursor:grabbing}
#photo-full{user-select:none;-webkit-user-drag:none}