/* Shared layout primitives: adapt to available inline space, not device/ratio labels. */
:root{--page-gutter:clamp(16px,4vw,28px);--control-gap:12px;--section-space:24px;--content-width:1040px;--control-height:48px}
.shell,.detail-shell{width:100%;max-width:var(--content-width);padding-inline:var(--page-gutter);padding-left:max(var(--page-gutter),env(safe-area-inset-left));padding-right:max(var(--page-gutter),env(safe-area-inset-right));margin-inline:auto;min-width:0}
.shell>main{min-width:0;padding-top:var(--section-space)}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:var(--control-gap);min-height:76px;padding-block:14px;position:relative;z-index:6}
.site-brand{display:inline-flex;align-items:center;gap:10px;min-height:var(--control-height);font-size:17px;font-weight:650;flex-shrink:0}.site-brand img{border-radius:8px}
.site-menu{position:relative;min-width:0;max-width:65%}.site-menu>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:var(--control-height);padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:15px;font-weight:600}.site-menu>summary::-webkit-details-marker{display:none}.site-menu>summary>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-panel{position:absolute;inset-inline-end:0;top:calc(100% + 8px);width:260px;max-width:calc(100vw - 2 * var(--page-gutter));display:grid;gap:4px;padding:8px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 12px 32px #1a31331a;max-height:calc(100dvh - 100px);max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain}
.menu-panel>a,.menu-panel #online-tools>a,.menu-panel button{display:flex;align-items:center;justify-content:flex-start;min-height:var(--control-height);padding:10px 14px;width:100%;border:0;border-radius:9px;background:transparent;color:var(--ink);font:inherit;font-size:15px;text-align:start;overflow-wrap:anywhere;cursor:pointer}
.menu-panel>a:hover,.menu-panel button:hover,.menu-panel #online-tools>a:hover{background:#eef4f1}.menu-panel form{margin:0;display:block}.menu-panel .menu-logout{font-weight:400;color:var(--muted);border-top:1px solid var(--line);border-radius:0}.menu-panel #online-tools{display:grid;gap:4px;margin:0}
.page-back{display:flex;align-items:center;gap:var(--control-gap);min-height:48px;margin:0;padding:0}.page-back a{display:inline-flex;align-items:center;min-height:48px;color:var(--accent);font-weight:600;font-size:14px}
.page-heading,.trip-heading,.editor-heading{padding:0 0 var(--section-space)}.page-heading{display:flex;align-items:center;flex-wrap:wrap;gap:var(--control-gap)}.page-heading h1{flex:1 1 100%}.management>h1{margin-top:var(--section-space)}
.footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--control-gap);margin-top:40px;padding:20px 0 max(24px,env(safe-area-inset-bottom));font-size:12px;text-align:center;width:100%}.footer>span{overflow-wrap:anywhere}
.form-actions,.edit-tools,.map-actions,.member-actions,.day-nav{gap:var(--control-gap)}.form-actions>*{min-width:0;flex:0 1 auto}.button,.form-actions button,.text-button,.management button{min-height:var(--control-height);max-width:100%;padding:12px 16px}.button.secondary,.management button.secondary{background:#fff;color:var(--accent);border:1px solid var(--line)}
.day-nav{position:static}.day-nav a{min-height:48px;overflow-wrap:anywhere;max-width:100%}.overview-stats>div{flex-wrap:wrap;text-align:center;min-width:0}.trip-summary,.event-meta{flex-wrap:wrap}.event-meta>*{min-width:0;overflow-wrap:anywhere}.admin-grid{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}.invite-meta{grid-template-columns:minmax(0,auto) minmax(0,1fr)}.history-top{flex-wrap:wrap}.management textarea,.import-input{max-width:100%;min-width:0}.management .member-actions select{appearance:none;-webkit-appearance:none;background:#fff;padding-right:20px}.management .menu-panel form{display:block}
.auth-card{width:100%;max-width:440px;margin:clamp(24px,6vh,64px) auto;padding:24px}.auth-card button{min-height:var(--control-height)}
.install-card{max-width:480px;margin:clamp(24px,6vh,64px) auto;text-align:center;padding:clamp(20px,4vw,32px);background:#fff;border:1px solid var(--line);border-radius:24px}.install-icon{display:block;margin:0 auto 24px;border-radius:20px}.install-card h1{font-size:28px;margin-bottom:12px}.install-actions{display:grid;gap:var(--control-gap);margin-top:24px}.install-actions .button{width:100%}#install-status:empty{display:none}#install-status{font-size:14px;margin-top:16px;color:var(--muted)}
.install-help{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 16px 48px #1a313329}.install-help::backdrop{background:#162a3540}.install-help ol{padding-left:24px;margin:20px 0;display:grid;gap:12px}.install-help button{width:100%}.install-help:not([open]):not([hidden]){position:fixed;inset:0;margin:auto;height:fit-content;z-index:20}
@media(max-width:600px){.shell>main{padding-top:20px}.page-heading h1{font-size:30px}.management>h1{font-size:28px}.site-header{min-height:76px}.form-actions>*{flex:1 1 120px}.page-heading>.button{flex:1 1 130px}.trip-grid{gap:var(--section-space)}.management .trip-stats{gap:8px;padding:16px 8px}.member-actions{align-items:stretch}.member-actions select{flex-basis:100%}.member-actions>button,.member-actions>a{flex:1 1 100px}.diff-values{grid-template-columns:minmax(0,1fr)}.order-list>li{flex-wrap:wrap}.editor-day-heading{flex-wrap:wrap}}
@media(max-height:500px) and (orientation:landscape){.site-header{padding-block:8px;min-height:64px}.auth-card,.install-card{margin-block:16px}.menu-panel{max-height:calc(100dvh - 80px)}}
@media(prefers-reduced-motion:reduce){.site-menu,.install-help{scroll-behavior:auto}}

#offline-status:empty,.offline-sync-status:empty{display:none}

.footer .version-update{font-size:14px;font-weight:500;min-height:44px;padding:10px 14px}.footer{column-gap:16px;row-gap:8px}

/* Journey reading layout: a chronological column, never a masonry card grid.
   Only wide canvases add a date column; controls and text keep bounded widths. */
.journey-shell{--content-width:1240px;--journey-time-width:4.5rem}
.journey-shell .trip-heading{display:grid;gap:24px;padding-block:24px 32px}
.trip-heading-main,.trip-heading-summary{min-width:0}
.journey-shell h1{font-size:clamp(1.9rem,3vw,2.65rem);letter-spacing:-.025em}
.journey-shell .overview-stats{margin-top:0}
.journey-shell .description{font-size:.95rem;line-height:1.75;max-width:68ch;margin-top:18px}
.journey-shell .offline-meta{font-size:.8rem;margin-top:12px}
.journey-shell .offline-readonly{font-size:.85rem;margin:12px 0 0;color:var(--muted)}
.journey-shell .day-nav{padding-block:0 20px;flex-wrap:wrap}
.journey-shell .day-section{margin-top:36px;min-width:0}
.journey-shell .day-heading{align-items:flex-start;gap:12px;min-width:0;margin-bottom:20px}
.journey-shell .day-heading h2{font-size:1.25rem;line-height:1.45;text-wrap:balance}
.journey-shell .day-heading p{font-size:.8rem;margin-top:6px;color:var(--muted)}
.journey-shell .day-index{font-size:.75rem;white-space:nowrap;flex-shrink:0}
.journey-shell .timeline{min-width:0;margin:0;padding:0;list-style:none}
.journey-shell .event{display:grid;grid-template-columns:var(--journey-time-width) minmax(0,1fr);gap:14px;margin-bottom:16px;min-width:0}
.journey-shell .event-time{padding-top:20px;font-size:.95rem;font-variant-numeric:tabular-nums}
.journey-shell .event:not(:last-child):before{left:calc(var(--journey-time-width) / 2);border-color:var(--line)}
.journey-shell .timeline .itinerary-card{padding:20px 22px;margin:0;min-width:0;width:100%;max-width:none}
.journey-shell .event-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-bottom:10px}
.journey-shell .event-header .event-meta{margin:0;flex:1 1 auto}
.journey-shell .event-header .event-state{margin:0;font-size:.75rem}
.journey-shell .timeline .itinerary-card h3{font-size:1.2rem;line-height:1.45;letter-spacing:-.015em}
.journey-shell .event-description{font-size:.9rem;line-height:1.75;max-width:70ch}
.journey-shell .event-note:not(.itinerary-card){font-size:.8rem;line-height:1.75;max-width:70ch}
.journey-shell .itinerary-card.event-hotel .event-meta{background:transparent;padding:0}
.journey-shell .itinerary-card.event-hotel .event-symbol{background:var(--event-soft)}
.journey-shell .event-card.itinerary-card .transport-route{margin:14px 0;padding:14px 0;border-block:1px solid var(--line);gap:18px;background:transparent}
.journey-shell .transport-route .route-endpoint strong{font-size:1.05rem;line-height:1.45}
.journey-shell .route-endpoint .route-time{font-size:1.5rem;line-height:1.35;font-weight:700;letter-spacing:-.02em}
.journey-shell .itinerary-card .transport-route[data-endpoints="1"]{grid-template-columns:minmax(0,1fr)}
.journey-shell .transport-route[data-endpoints="1"]>.route-endpoint{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:4px 18px;text-align:left;align-items:center}
.journey-shell .transport-route[data-endpoints="1"] .route-time{grid-column:2;grid-row:1 / 3;max-width:12ch;text-align:right;margin:0}
.journey-shell .map-actions{margin:12px 0 0;align-items:center}
.journey-shell .map-fallback{flex-basis:auto}
.journey-shell .map-fallback[open]{flex-basis:100%}
.journey-shell .now-marker{margin:16px 0 20px calc(var(--journey-time-width) + 14px)}
@media(min-width:900px){
 .journey-shell .trip-heading{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
 .journey-shell .trip-heading-main .trip-status{max-width:380px}
 .journey-shell .timeline{max-width:880px}
}
@media(min-width:1100px){
 .journey-shell .day-section{display:grid;grid-template-columns:200px minmax(0,1fr);gap:36px;align-items:start;margin-top:44px}
 .journey-shell .day-heading{position:sticky;top:24px;display:block;margin:0}
 .journey-shell .day-heading>div{margin-top:12px}
 .journey-shell .day-heading h2{font-size:1.15rem}
 .journey-shell .day-index{display:inline-flex}
}
@media(max-width:600px){
 .journey-shell{--journey-time-width:3rem}
 .journey-shell .trip-heading{padding-block:20px 24px;gap:20px}
 .journey-shell .event{grid-template-columns:minmax(0,1fr);gap:6px;margin-bottom:18px}
 .journey-shell .event-time{display:flex;align-items:center;gap:8px;font-size:.85rem;padding-top:0;text-align:left}
 .journey-shell .event-time .time-line{height:1px;width:12px;margin:0;background:var(--line)}
 .journey-shell .event-time .end-time{margin:0;font-size:.8rem}
 .journey-shell .event[data-timing="UNKNOWN"] .event-time,.journey-shell .event[data-point-kind="arrival"] .event-time,.journey-shell .event[data-point-kind="departure"] .event-time{display:none}
 .journey-shell .event:not(:last-child):before{display:none}
 .journey-shell .timeline .itinerary-card{padding:16px}
 .journey-shell .timeline .itinerary-card h3{font-size:1.1rem}
 .journey-shell .event-header{gap:6px;margin-bottom:8px}
 .journey-shell .event-header .event-state{flex-basis:100%}
 .journey-shell .event-card.itinerary-card .transport-route{gap:12px;padding-block:12px}
 .journey-shell .transport-route .route-endpoint strong{font-size:.95rem}
 .journey-shell .route-endpoint .route-time{font-size:1.25rem}
 .journey-shell .transport-route[data-endpoints="1"]>.route-endpoint{column-gap:12px}
 .journey-shell .now-marker{margin-left:0}
}
@media(max-height:500px){.journey-shell .day-heading{position:static}}