/* Reuse the application's theme tokens and type; keep this tool one compact column. */
html.share-watch-root { height:auto; min-height:100%; overflow:auto; }
body.share-watch-page { height:auto; min-height:100dvh; overflow:visible; background:var(--app-bg); color:var(--text-primary); font:14px/1.4 var(--font); }
.share-watch-page .masthead,.share-watch-page main { width:100%; max-width:560px; margin:auto; }
.share-watch-page .masthead { display:flex; align-items:center; gap:12px; padding:10px 12px; padding-top:max(10px,env(safe-area-inset-top)); border-bottom:1px solid var(--border-soft); }
.share-watch-page h1 { flex:1; margin:0; text-align:center; font:600 18px var(--font); letter-spacing:.05em; color:var(--text-primary); }
.share-watch-page .brand-logo { width:30px; height:30px; border-radius:5px; }
.share-watch-page main { padding:10px 12px max(14px,env(safe-area-inset-bottom)); }
.share-watch-page a { color:var(--text-primary); text-decoration:none; }
.share-watch-page .back-link { display:inline-flex; align-items:center; min-height:44px; font:13px var(--font-mono); }
.share-watch-page button,.share-watch-page select,.share-watch-page input { font:14px var(--font); }
.share-watch-page button { cursor:pointer; }
.share-watch-page button:disabled { opacity:.45; cursor:not-allowed; }
.share-watch-page :is(button,a,summary,input,select):focus-visible { outline:2px solid var(--action-primary); outline-offset:2px; }
.share-watch-page h2 { font:600 22px var(--font); margin:0; color:var(--text-primary); }
.share-watch-page h3 { font:600 18px var(--font); margin:0 0 2px; color:var(--text-primary); }
.share-watch-page .card-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; }
.share-watch-page .muted { color:var(--text-secondary); font-size:12px; margin-top:2px; }
.share-watch-page .connection { font:11px var(--font-mono); color:var(--text-secondary); border:1px solid var(--border-soft); padding:4px 6px; border-radius:5px; }
.share-watch-page .flight-scene { height:196px; position:relative; overflow:hidden; display:grid; place-items:center; background:var(--app-bg-deep); border:1px solid var(--border-soft); border-radius:8px; margin-bottom:10px; }
.share-watch-page .helicopter { width:140px; color:var(--action-primary); }
.share-watch-page .flight-scene>span { position:absolute; bottom:0; left:0; right:0; text-align:center; font:10px/22px var(--font-mono); color:var(--text-secondary); background:var(--app-bg-deep); z-index:401; }
.share-watch-page #watch-map { width:100%; height:174px; align-self:start; background:var(--app-bg-deep); }
.share-watch-page .has-map>.helicopter { display:none; }
.share-watch-page .flight-scene:not(.has-map) #watch-map { display:none; }
.share-watch-page .watch-aircraft-marker svg { width:100%; height:100%; filter:drop-shadow(0 1px 2px #000); }
.share-watch-page .leaflet-control-attribution { font-size:8px!important; }
.share-watch-page .leaflet-control-zoom a { color:#15191a; }
.share-watch-page .journey-status p { color:var(--text-secondary); font-size:13px; }
.share-watch-page .flight-facts { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:8px 0; margin:4px 0; }
.share-watch-page .flight-facts dt { color:var(--text-secondary); font:11px var(--font-mono); }
.share-watch-page .flight-facts dd { font-size:13px; margin:2px 0 0; }
.share-watch-page .actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.share-watch-page .main-actions { display:grid; grid-template-columns:1fr 1fr 1fr; }
.share-watch-page .primary,.share-watch-page .secondary,.share-watch-page .text-button { min-height:44px; border-radius:7px; padding:8px 12px; font:13px var(--font-mono); border:1px solid var(--border-soft); }
.share-watch-page .primary { background:var(--action-primary); color:var(--action-text); }
.share-watch-page .secondary { background:var(--glass-bg-light); color:var(--text-primary); }
.share-watch-page .text-button { background:transparent; color:var(--text-secondary); }
.share-watch-page .fineprint { font-size:11px; line-height:1.4; color:var(--text-secondary); margin-top:7px; overflow-wrap:anywhere; }
.share-watch-page .fineprint:empty { display:none; }
.share-watch-page .watch-flight { margin-bottom:10px; }
.share-watch-page .watch-row { border-top:1px solid var(--border-soft); }
.share-watch-page summary { display:flex; justify-content:space-between; align-items:center; min-height:44px; cursor:pointer; list-style:none; font:13px var(--font-mono); color:var(--text-primary); }
.share-watch-page summary::-webkit-details-marker { display:none; }
.share-watch-page summary:after { content:'+'; font-size:18px; color:var(--text-secondary); }
.share-watch-page details[open]>summary:after { content:'−'; }
.share-watch-page .row-content { padding:2px 0 12px; }
.share-watch-page label { display:block; font-size:12px; color:var(--text-secondary); margin:8px 0 4px; }
.share-watch-page select { width:100%; min-height:44px; border:1px solid var(--border-soft); border-radius:6px; background:var(--app-bg-deep); color:var(--text-primary); padding:8px; }
.share-watch-page form>button { margin-top:8px; }
.share-watch-page .journey-picker { margin-bottom:12px; }
.share-watch-page .journey-picker select { flex:1; min-width:0; }
.share-watch-page .timeline,.share-watch-page .follow-list { list-style:none; margin:0; padding:0; }
.share-watch-page .timeline li { padding:6px 0; font-size:13px; }
.share-watch-page .timeline time { display:block; color:var(--text-secondary); font-size:11px; }
.share-watch-page .follow-list li { display:flex; flex-wrap:wrap; align-items:center; gap:6px; border-top:1px solid var(--border-soft); padding:8px 0; }
.share-watch-page .follow-name { flex:1; min-width:120px; font-size:13px; overflow-wrap:anywhere; }
.share-watch-page .follow-name small { display:block; color:var(--text-secondary); font-size:11px; }
.share-watch-page .follow-list button { min-height:44px; padding:6px; color:var(--text-primary); border:1px solid var(--border-soft); background:transparent; border-radius:6px; font-size:12px; }
.share-watch-page .follow-watch { display:block; font-size:12px; padding:10px 0; text-decoration:underline; }
.share-watch-page .check-label { display:flex; gap:8px; align-items:center; min-height:44px; }
.share-watch-page .check-label input { accent-color:var(--accent-primary); }
.share-watch-page [hidden] { display:none!important; }
@media(min-width:768px) { .share-watch-page main { padding-top:18px; } }
/* Friends select one journey. Driver tools belong to the future ABZ workspace. */
.share-watch-page[data-audience="friends"] .main-actions { grid-template-columns:1fr 1fr; }
.share-watch-page #friend-milestones { border:0; margin:0; padding:0; }
.share-watch-page #friend-milestones legend { font-size:12px; color:var(--text-secondary); padding-bottom:4px; }
.share-watch-page #friend-milestones .check-label { margin:0; border-bottom:1px solid var(--border-soft); color:var(--text-primary); }

.share-watch-page[data-audience="friends"] .watch-flight { padding:12px; border:1px solid var(--border-soft); border-left:3px solid var(--action-primary); border-radius:9px; background:var(--glass-bg-light); }
.share-watch-page .journey-times { margin:10px 0 4px; }
.share-watch-page .journey-times>div { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--border-soft); font-size:12px; }
.share-watch-page .journey-times dt { color:var(--text-secondary); }
.share-watch-page .journey-times dd { margin:0; text-align:right; }
.share-watch-page .map-link { display:flex; align-items:center; min-height:44px; font:13px var(--font-mono); color:var(--action-primary); }
.share-watch-page .recipients-panel { padding:8px 0 12px; }
.share-watch-page .recipients-panel h3 { font-size:14px; }
.share-watch-page #recipients-list { list-style:none; padding:0; margin:6px 0; color:var(--text-secondary); font-size:12px; }
.share-watch-page #board-source { margin:0 0 8px; }

.share-watch-page .demo-banner { padding:8px; border:1px solid var(--action-primary); font-size:12px; }
.share-watch-page #recipients-list li { padding:8px 0; border-bottom:1px solid var(--border-soft); }
.share-watch-page #recipients-list small { display:block; padding:4px 0; }
.share-watch-page #recipients-list button { margin-top:5px; }
.share-watch-page #whatsapp-open { display:inline-flex; align-items:center; color:#111; }
.share-watch-page .primary { color:#111; -webkit-text-fill-color:#111; }
.share-watch-page textarea { width:100%; min-height:100px; }
.share-watch-page h2,.share-watch-page .muted { overflow-wrap:anywhere; }

/* Installation-first sharing: selection then one cohesive journey card. */
.share-watch-page #installation-search { width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--border-soft); border-radius:7px; background:var(--app-bg-deep); color:#fff!important; -webkit-text-fill-color:#fff!important; caret-color:#fff; }
.share-watch-page #installation-search::placeholder { color:#fff!important; -webkit-text-fill-color:#fff!important; opacity:.7; }
.share-watch-page #installation-results { list-style:none; padding:0; margin:8px 0; }
.share-watch-page .installation-departure { display:block; width:100%; text-align:left; margin:6px 0; padding:12px; border:1px solid var(--border-soft); border-radius:7px; background:var(--glass-bg-light); color:var(--text-primary); }
.share-watch-page .installation-departure strong,.share-watch-page .installation-departure span { display:block; overflow-wrap:anywhere; }
.share-watch-page .installation-departure span { margin-top:4px; color:var(--text-secondary); font-size:12px; }
.share-watch-page[data-audience="friends"] .main-actions { grid-template-columns:minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.4fr); }
.share-watch-page .main-actions a { display:flex; justify-content:center; align-items:center; }
.share-watch-page[data-audience="friends"] .main-actions > * { min-width:0; padding-left:4px; padding-right:4px; font-size:12px; }
.share-watch-page #change-installation { min-height:32px; padding:4px 0; border:0; margin-bottom:6px; }
.share-watch-page .recipient-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.share-watch-page .recipients-panel { border-top:1px solid var(--border-soft); margin-top:12px; padding-bottom:8px; }
.share-watch-page #friend-milestones .check-label { flex-wrap:wrap; }

body.share-watch-page.friend-view { margin:0; }
.friend-view > .masthead,.friend-view > main { display:none; }
#friend-view { position:fixed; inset:0; background:var(--app-bg); overflow:hidden; }
#friend-map { position:absolute; inset:0; background:#173c46; }
#friend-map iframe { display:block; width:100%; height:100%; border:0; }
.friend-status { position:absolute; z-index:500; top:max(12px,env(safe-area-inset-top)); left:12px; right:12px; max-width:460px; padding:14px; border:1px solid var(--border-soft); border-radius:10px; background:var(--app-bg); box-shadow:0 3px 18px #0005; }
.friend-status h1 { text-align:left; font-size:20px; margin:4px 0; letter-spacing:0; }
.friend-status p { margin:4px 0; font-size:12px; }
#friend-identity { color:var(--text-secondary); font-size:12px; }
#friend-view:not([data-state="airborne"]) .friend-status { top:30%; left:50%; right:auto; transform:translateX(-50%); width:calc(100% - 48px); text-align:center; box-sizing:border-box; }
#friend-view:not([data-state="airborne"]) h1 { text-align:center; }
#friend-notify { position:absolute; bottom:max(28px,env(safe-area-inset-bottom)); left:12px; z-index:600; }
#friend-view #friend-notifications { position:absolute; bottom:90px; left:12px; right:12px; max-width:430px; max-height:55dvh; overflow:auto; z-index:650; padding:14px; background:var(--app-bg); border:1px solid var(--border-soft); border-radius:10px; }
#friend-view #share-status { position:absolute; z-index:700; bottom:76px; left:14px; right:14px; background:var(--app-bg); }
#friend-view #share-status:empty { display:none; }
#friend-view #demo-banner { position:absolute; right:8px; top:auto; bottom:0; z-index:500; font-size:9px; padding:2px; margin:0; background:var(--app-bg); }
.friend-helicopter svg { width:48px; height:48px; transform-origin:center; }
.friend-logo { float:right; width:32px; height:32px; object-fit:contain; margin-left:8px; }
#friend-back { position:absolute; left:12px; top:max(8px,env(safe-area-inset-top)); z-index:750; display:flex; align-items:center; box-sizing:border-box; background:var(--app-bg); color:var(--text-primary); text-decoration:none; }
#friend-view[data-state="airborne"] .friend-status { top:calc(max(8px,env(safe-area-inset-top)) + 50px); }
#friend-notifications-close { display:block; position:sticky; top:0; margin:0 0 8px auto; z-index:1; background:var(--app-bg); color:var(--text-primary); }