/* Weltklimakarte v2 – Oberfläche (hell/dunkel über CSS-Variablen) */
:root{ --accent:#2c7be5;
  --page:#dde6ee; --card:rgba(255,255,255,.92); --bd:rgba(22,32,48,.15);
  --ink:#1b2632; --muted:#5d6b7a; --hover:rgba(22,32,48,.07); --shadow:rgba(20,40,70,.20);
  --modal-bg:#ffffff; --modal-ink:#37434f; --link:#1763c7; --tick:rgba(22,32,48,.3); --ok:#1d7a4f; --warn:#c65d33;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  color-scheme:light; }
:root[data-theme="dark"]{
  --page:#0b1118; --card:rgba(15,21,29,.86); --bd:rgba(255,255,255,.14);
  --ink:#eaf0f7; --muted:#9fb2c4; --hover:rgba(255,255,255,.06); --shadow:rgba(0,0,0,.45);
  --modal-bg:#0f151d; --modal-ink:#c7d4e0; --link:#7fb3e0; --tick:rgba(255,255,255,.3); color-scheme:dark; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --page:#0b1118; --card:rgba(15,21,29,.86); --bd:rgba(255,255,255,.14);
  --ink:#eaf0f7; --muted:#9fb2c4; --hover:rgba(255,255,255,.06); --shadow:rgba(0,0,0,.45);
  --modal-bg:#0f151d; --modal-ink:#c7d4e0; --link:#7fb3e0; --tick:rgba(255,255,255,.3); color-scheme:dark; } }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; height:var(--apph,100%); }
/* Installierte Web-App (iOS): 100 % ist beim Start um die Statusleiste zu kurz → volle Bildschirmhöhe (pwa.js setzt --apph) */
@media (display-mode:standalone){ html,body{ height:var(--apph,100%); } }
/* position:relative: Karte, Bedienelemente und Panel richten sich an der Body-Höhe aus (nicht am zu kurzen iOS-Fenster), damit --apph wirkt */
body{ position:relative; font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--page); color:var(--ink); overflow:hidden; }
#map{ position:absolute; inset:0; z-index:0; background:var(--page); }
/* Weltraum hinter dem Globus (space.js): Sterne im Canvas .wk-stars unter dem Karten-Canvas.
   Hell: heller Grund mit dunklen Sternen (wie invertiert); dunkel: Nachtblau mit hellen Sternen. */
#map.wk-space-on{ background:radial-gradient(130% 95% at 50% 42%, #fbfcfe 0%, #f1f4f8 38%, #e5eaf1 70%, #d8dfe9 100%); }
:root[data-theme="dark"] #map.wk-space-on{ background:radial-gradient(130% 95% at 50% 42%, #13234a 0%, #0a1430 34%, #050a1a 66%, #020309 100%); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #map.wk-space-on{ background:radial-gradient(130% 95% at 50% 42%, #13234a 0%, #0a1430 34%, #050a1a 66%, #020309 100%); } }
.wk-stars{ position:absolute; left:0; top:0; pointer-events:none; }
#map.measuring canvas{ cursor:crosshair !important; }
.maplibregl-ctrl-attrib{ font-size:10px; background:var(--card) !important; color:var(--muted) !important; }
.maplibregl-ctrl-attrib a{ color:var(--muted); }
.maplibregl-ctrl-bottom-left{ margin-bottom:0; }
.maplibregl-ctrl-scale{ background:transparent !important; border:2px solid #fff !important; border-top:none !important; color:#fff !important; font-size:11px; font-weight:600;
  text-shadow:0 0 3px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.9); filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)); }
.maplibregl-popup-content{ background:var(--card) !important; color:var(--ink); font:13px/1.5 system-ui,sans-serif; border-radius:10px; box-shadow:0 6px 18px var(--shadow);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); padding:10px 22px 10px 12px; max-width:300px; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{ border-top-color:var(--card) !important; }
.maplibregl-popup-anchor-top .maplibregl-popup-tip{ border-bottom-color:var(--card) !important; }
.maplibregl-popup-anchor-left .maplibregl-popup-tip{ border-right-color:var(--card) !important; }
.maplibregl-popup-anchor-right .maplibregl-popup-tip{ border-left-color:var(--card) !important; }
.maplibregl-popup-close-button{ color:var(--muted); font-size:18px; padding:2px 6px; }
.pop-row{ display:flex; gap:6px; align-items:baseline; white-space:nowrap; }
.pop-row .k{ color:var(--muted); min-width:14px; }
.pop-head{ font-weight:600; margin-bottom:3px; }
.pop-sub{ color:var(--muted); font-size:11.5px; }
.pop-corr{ color:var(--muted); font-size:11.5px; margin-top:3px; border-top:1px solid var(--bd); padding-top:3px; }
.measure-tip .maplibregl-popup-content{ background:#17222e !important; color:#fff; font-weight:600; font-size:12px; padding:4px 10px; }
.measure-tip .maplibregl-popup-tip{ display:none; }

/* Overlay-Gerüst */
.ov{ position:absolute; z-index:1200; pointer-events:none; }
.ov>*{ pointer-events:auto; }
.ov-tl{ top:calc(12px + var(--sat)); left:calc(12px + var(--sal)); } .ov-tr{ top:calc(12px + var(--sat)); right:calc(12px + var(--sar)); }
.ov-bl{ left:calc(12px + var(--sal)); bottom:calc(16px + var(--sab)); } .ov-bc{ left:50%; bottom:calc(16px + var(--sab)); transform:translateX(-50%); }
.ov-br{ right:calc(12px + var(--sar)); bottom:calc(16px + var(--sab)); }
.card-ov{ background:var(--card); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  border:1px solid var(--bd); border-radius:12px; box-shadow:0 8px 24px var(--shadow); }

/* Titel */
.titlechip{ display:flex; align-items:center; gap:9px; padding:0 10px; height:44px; box-sizing:border-box; font-weight:600; font-size:14px; }   /* Höhe = eingeklappte Legende rechts */
.titleicon{ width:26px; height:26px; flex:none; display:block; filter:drop-shadow(0 1px 2px rgba(20,40,70,.28)); }
.h2icon{ width:22px; height:22px; vertical-align:-5px; margin-right:8px; }
.titlechip button{ width:24px; height:24px; border-radius:50%; border:1px solid var(--bd); background:transparent; color:var(--muted);
  cursor:pointer; font-size:13px; display:inline-flex; align-items:center; justify-content:center; padding:0; line-height:1; }
.titlechip button:hover{ color:var(--ink); border-color:var(--accent); }

/* Rechte Werkzeugleiste */
.toolbar{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.tb-group{ display:flex; flex-direction:column; border:1px solid var(--bd); border-radius:10px; overflow:hidden; box-shadow:0 6px 18px var(--shadow);
  background:var(--card); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); }
.tb-group button{ width:34px; height:34px; border:0; border-bottom:1px solid var(--bd); background:transparent; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0; font-size:18px; line-height:1; }
.tb-group button:last-child{ border-bottom:0; }
.tb-group button[hidden]{ display:none; }
.tb-group #btnNorth svg{ width:24px; height:24px; display:block; margin:auto; transform-origin:50% 50%; transition:transform .15s; overflow:visible; }
.tb-group button:hover{ background:var(--hover); color:var(--accent); }
.tb-group button.on{ color:var(--accent); background:var(--hover); }
.tb-group button.busy{ color:var(--accent); animation:locpulse 1s ease-in-out infinite; }
.tb-group button svg{ width:20px; height:20px; display:block; }
@keyframes locpulse{ 50%{ opacity:.35; } }

/* Legende */
.legendcard{ padding:8px 10px; box-sizing:border-box; overflow:hidden; }
/* eingeklappt: Kapsel in Höhe der Titel-Kapsel links (44 px), Farbfeld + Chevron */
.legendcard.collapsed{ height:44px; padding:0 8px 0 6px; display:flex; align-items:center; }
.legendcard.collapsed .leg-head{ height:100%; gap:6px; }
.leg-head{ display:flex; align-items:center; gap:10px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.leg-head:focus-visible{ outline:none; }
.legendcard:has(> .leg-head:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }   /* Ring an der Karte: overflow:hidden schneidet ihn am Kopf ab */
/* rechts neben der Titel-Kapsel bleiben (--wk-titlew aus ui.js, --rwpad = Seitenspalte der Reiseroute); eingeklappt schrumpft der Farbbalken */
#legend{ max-width:clamp(176px, calc(100vw - var(--rwpad,0px) - var(--wk-titlew,130px) - 32px - var(--sal) - var(--sar)), 320px); }
.legendcard.collapsed .leg-ckey{ width:158px; flex:0 1 auto; min-width:64px; }
.legendcard.collapsed :is(.leg-sw, .leg-mini-ticks){ width:100%; }
.leg-ckey{ display:flex; flex-direction:column; gap:3px; padding-left:6px; }
.leg-sw{ display:block; width:158px; height:11px; border-radius:6px; border:1px solid rgba(0,0,0,.35); }
.leg-mini-ticks{ display:flex; justify-content:space-between; width:158px; color:var(--muted); font-size:9px; line-height:1; }
.leg-sw-mtx{ display:grid; grid-template-columns:repeat(4,8px); grid-auto-rows:8px; border-radius:7px; overflow:hidden; box-shadow:0 0 0 .5px rgba(0,0,0,.3); }
.leg-sw-mtx i{ display:block; }
.leg-chev{ margin-left:auto; width:18px; height:18px; flex:none; fill:var(--muted); }
.legendcard:not(.collapsed) .leg-chev{ rotate:180deg; }
.leg-title{ font-weight:600; font-size:13px; color:var(--ink); }
.leg-body{ margin-top:9px; }
.leg-bar{ width:220px; height:13px; border-radius:6px; border:1px solid rgba(0,0,0,.35); }
.leg-ticks{ display:flex; justify-content:space-between; width:220px; color:var(--muted); font-size:10.5px; margin-top:4px; }
.leg-unit{ color:var(--muted); font-size:11px; text-align:right; width:220px; margin-top:2px; }
.leg-bar, .leg-ticks, .leg-unit{ max-width:100%; }   /* schmale Handys: mit der Karte schrumpfen statt abgeschnitten */
.combileg{ display:flex; gap:10px; align-items:flex-start; }
.combileg .matrix{ display:grid; grid-template-columns:repeat(5,20px); grid-auto-rows:20px; border:1px solid #00000055; }
.combileg .axisy{ display:flex; flex-direction:column; justify-content:space-between; height:100px; color:var(--muted); font-size:11px; text-align:right; }
.combileg .axisx{ display:flex; justify-content:space-between; width:100px; color:var(--muted); font-size:11px; margin-top:3px; }
.hatchnote{ color:var(--muted); font-size:12px; display:flex; gap:8px; align-items:center; margin-top:4px; }
.frostswatch{ width:34px; height:18px; border-radius:4px; flex:none; background:repeating-linear-gradient(45deg,rgba(255,255,255,.85) 0 2px,transparent 2px 9px) #5b80a8; }
.heavyswatch{ width:34px; height:18px; border-radius:4px; flex:none; background:repeating-linear-gradient(135deg,rgba(224,64,192,.95) 0 2px,transparent 2px 9px) #235ea8; }
.leg-note{ color:var(--muted); font-size:11px; margin-top:6px; max-width:230px; }

/* Zeitleiste */
.timebar{ display:flex; align-items:center; gap:12px; padding:7px 14px 5px 9px; width:min(640px,94vw); box-sizing:border-box; }
.timebar #play{ position:relative; width:38px; height:38px; border-radius:50%; border:0; background:var(--accent); color:#fff; cursor:pointer; flex:none; padding:0; display:grid; place-items:center; }
/* Abspielen/Pause: zwei Symbole übereinander, die ineinander übergehen */
.timebar #play svg{ grid-area:1/1; width:20px; height:20px; fill:currentColor; transition:opacity .18s, scale .4s cubic-bezier(.2,.8,.2,1), rotate .4s cubic-bezier(.2,.8,.2,1); }
.timebar #play .i-play{ translate:1px 0; }   /* optische Mitte des Dreiecks */
.timebar #play .i-pause, .timebar #play.playing .i-play{ opacity:0; scale:.35; }
.timebar #play .i-pause{ rotate:-90deg; }
.timebar #play.playing .i-pause{ opacity:1; scale:1; rotate:0deg; }
@media (prefers-reduced-motion:reduce){ .timebar #play svg{ transition:none; } }
.tbmain{ flex:1; min-width:0; display:flex; flex-direction:column; }
.tlrow{ display:flex; align-items:baseline; gap:10px; min-height:15px; padding:0 2px; font-size:13px; line-height:15px; }
#timepos{ flex:1; min-width:30%; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); font-weight:500; }
#timepos:empty{ display:none; }
#timepos .posdot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:#ffd200; box-shadow:0 0 0 1.5px #1b2632; margin:0 4px 0 1px; }
.timebar #play:disabled{ opacity:.5; cursor:default; }
.timebar .sliderwrap{ flex:1; min-width:0; touch-action:none; cursor:grab; } .timebar .sliderwrap:active{ cursor:grabbing; }
/* gemeinsamer Regler-Stil (Zeitleiste, Bus/Bahn-Stufe): runder Knopf, gefüllte Spur (--pct setzt das Skript), kein Fokusrahmen */
.wkrange{ -webkit-appearance:none; appearance:none; background:transparent; margin:0; cursor:pointer; --pct:0%; --th:24px; --c:var(--accent); height:30px; }
.wkrange:focus,.wkrange:focus-visible{ outline:none; }
.wkrange::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:linear-gradient(90deg,var(--c) 0 var(--pct),var(--tick) var(--pct) 100%); }
.wkrange::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:var(--th); height:var(--th); margin-top:calc(3px - var(--th)/2); border-radius:50%; background:var(--c); border:2.5px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.35); }
.wkrange::-moz-range-track{ height:6px; border-radius:3px; background:linear-gradient(90deg,var(--c) 0 var(--pct),var(--tick) var(--pct) 100%); }
.wkrange::-moz-range-thumb{ width:calc(var(--th) - 5px); height:calc(var(--th) - 5px); border-radius:50%; background:var(--c); border:2.5px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.35); }
.wkrange:disabled{ opacity:.5; }
/* Zeitleiste: Anfassen und Ziehen irgendwo auf Regler + Monatsskala (Pointer-Handler in ui.js); das Eingabefeld selbst nimmt keine Zeiger an */
#slider{ width:100%; display:block; pointer-events:none; height:24px; }
#monthscale{ display:flex; margin-top:1px; user-select:none; }
.mcell{ flex:1; position:relative; text-align:center; font-size:10px; color:var(--muted); padding-top:8px; white-space:nowrap; overflow:hidden; }
.mcell::before{ content:''; position:absolute; top:0; left:0; right:0; height:5px; background:repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px 25%); }
.mcell::after{ content:''; position:absolute; top:0; right:0; width:1px; height:8px; background:var(--tick); }
.mcell:first-child{ border-left:1px solid var(--tick); }
.mcell.on{ color:var(--ink); font-weight:700; }
.mcell.y2::before{ background:repeating-linear-gradient(90deg,var(--accent) 0 1px,transparent 1px 25%); }
#timelabel{ font-weight:650; white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
/* Datum lang/kurz nach der Breite der Zeile (auch wenn die Seitenspalte die Karte schmal macht), der Ort behält mindestens 30 % */
.tlrow{ container-type:inline-size; }
#timelabel .ds{ display:none; }
@container (max-width:420px){ #timelabel .dl{ display:none; } #timelabel .ds{ display:inline; } }

/* Ebenen */
.ov-bl{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.layersbtn{ display:flex; align-items:center; gap:10px; padding:7px 14px 7px 7px; cursor:pointer; color:var(--ink); background:var(--card);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); border:1px solid var(--bd); border-radius:12px; box-shadow:0 8px 24px var(--shadow); }
.layersbtn:hover{ border-color:var(--accent); }
.layersbtn .thumb{ width:46px; height:34px; }
.layerstxt{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.layerseyebrow{ font-size:10.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.04em; }
.layerslabel{ font-weight:600; font-size:13.5px; }
.layerschev{ margin-left:2px; color:var(--muted); font-size:15px; line-height:1; }
.layerspanel{ padding:10px; width:min(460px,88vw); max-height:calc(100vh - 140px); overflow:auto; }
.layerspanel[hidden]{ display:none; }
.layersgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.layeritem{ display:flex; flex-direction:column; gap:5px; align-items:center; cursor:pointer; background:transparent; border:1px solid transparent;
  border-radius:10px; padding:6px 4px; color:var(--muted); font:inherit; min-width:0; }
.layeritem:hover{ background:var(--hover); }
.layeritem.on{ border-color:var(--accent); color:var(--ink); }
.layeritem .thumb{ width:100%; height:42px; }
.layeritem span{ font-size:11.5px; text-align:center; line-height:1.2; overflow-wrap:break-word; hyphens:auto; }
.thumb{ border-radius:7px; overflow:hidden; border:1px solid var(--bd); flex:none; }
.thgrad{ display:block; width:100%; height:100%; }
.thmatrix{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; width:100%; height:100%; }
.thmatrix i{ display:block; }
.opt-row{ display:flex; align-items:center; gap:9px; margin-top:9px; padding-top:9px; border-top:1px solid var(--bd); color:var(--muted); font-size:12.5px; flex-wrap:wrap; }
.opt-row input[type=range]{ flex:1; accent-color:var(--accent); min-width:120px; }
.opt-row label{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; color:var(--ink); }
.opt-row input[type=checkbox],.opt-row input[type=radio]{ accent-color:var(--accent); margin:0; }
.opt-row .sec{ width:100%; font-size:10.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.04em; margin-bottom:-4px; }
.opt-row .ext{ font-size:10.5px; color:var(--muted); }
.opt-row a{ color:var(--link); }

/* Dialoge */
.modal{ position:fixed; inset:0; z-index:2500; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); pointer-events:auto; }
.modal[hidden]{ display:none; }
.modal .box{ background:var(--modal-bg); border:1px solid var(--bd); border-radius:14px; max-width:620px; width:92vw; max-height:86vh; overflow:auto; padding:20px 22px; color:var(--ink); box-shadow:0 12px 40px var(--shadow); }
.modal h2{ margin:0 0 10px; font-size:17px; }
.modal p{ color:var(--modal-ink); font-size:13px; line-height:1.6; }
.modal a{ color:var(--link); }
.modal .close{ float:right; background:transparent; border:1px solid var(--bd); color:var(--muted); border-radius:8px; padding:4px 10px; cursor:pointer; }
.modal-foot{ margin-top:14px; padding-top:10px; border-top:1px solid var(--bd); color:var(--muted); font-size:12px; clear:both; }
.consent-box{ max-width:460px; text-align:center; }
.consent-actions{ margin:16px 0 4px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.consent-load{ background:var(--accent); color:#fff; border:0; border-radius:10px; padding:11px 22px; font-size:14px; font-weight:600; cursor:pointer; }
.consent-skip,.revoke-btn{ background:transparent; color:var(--link); border:1px solid var(--bd); border-radius:10px; padding:10px 16px; font-size:13px; cursor:pointer; }
.langgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:6px; }
.langitem{ display:flex; align-items:center; gap:8px; padding:9px 12px; cursor:pointer; font:inherit; font-size:14px; text-align:left; color:var(--ink); background:transparent; border:1px solid var(--bd); border-radius:10px; }
.langitem:hover{ background:var(--hover); border-color:var(--accent); }
.langitem.on{ border-color:var(--accent); background:rgba(44,123,229,.15); }
.langitem .lc{ margin-left:auto; font-size:11px; color:var(--muted); text-transform:uppercase; }
.toast{ position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:1600; background:#17222e; color:#fff; padding:8px 14px; border-radius:10px; font-size:13px; box-shadow:0 6px 18px rgba(0,0,0,.4); pointer-events:none; opacity:0; transition:opacity .2s; }
.toast.show{ opacity:1; }

/* Responsive */
@media (max-width:1100px){
  .ov-bc{ left:calc(8px + var(--sal)); right:calc(8px + var(--sar)); transform:none; }
  .timebar{ width:auto; }
  .ov-bl{ bottom:calc(96px + var(--sab)); }
  .ov-br{ bottom:calc(96px + var(--sab)); }
  .maplibregl-ctrl-bottom-left{ margin-bottom:calc(150px + var(--sab)); }
}
@media (max-width:720px){
  #monthscale.many .mcell:nth-child(even){ color:transparent; }
  .titlechip{ font-size:12px; padding:0 9px; }
  .ttl-text{ display:none; }
  .hatchnote{ align-items:flex-start; }
  .timebar{ gap:9px; padding:7px 10px 5px; }
  .timebar #play{ width:34px; height:34px; }
  .mcell{ font-size:9.5px; padding-top:8px; }
  #monthscale.many .mcell{ overflow:visible; min-width:0; text-align:left; padding-left:2px; } #monthscale.many .mcell:nth-last-child(-n+2){ overflow:hidden; }
  /* Ansicht-Knopf kompakt, Maßstab nach rechts unten neben die Werkzeugleiste (nicht mehr mitten über der Karte) */
  .layerseyebrow{ display:none; } .layersbtn{ padding:5px 10px 5px 5px; gap:8px; } .layersbtn .thumb{ width:38px; height:28px; } .layerslabel{ font-size:12.5px; }
  .maplibregl-ctrl-bottom-left{ left:auto; right:calc(52px + var(--sar)); margin-bottom:calc(100px + var(--sab)); }
  .maplibregl-ctrl-bottom-left .maplibregl-ctrl{ margin:0 0 0 0; float:right; }
  .layerspanel{ width:min(460px,calc(100vw - 24px)); }
  .layersgrid{ grid-template-columns:repeat(3,1fr); }
  .tb-group button{ width:32px; height:32px; }
}

/* Installations-Hinweis (Handy/Tablet im Browser) */
.titlechip .installbtn{ color:var(--accent); border-color:var(--accent); position:relative; }
.titlechip .installbtn[hidden]{ display:none; }
.titlechip .installbtn::after{ content:''; position:absolute; top:-2px; right:-2px; width:7px; height:7px; border-radius:50%; background:#e8830c; box-shadow:0 0 0 1.5px var(--card); }
.titlechip .installbtn svg{ display:block; }
.install-box h3{ font-size:14px; margin:14px 0 4px; color:var(--accent); }
.install-box ol{ margin:4px 0 6px; padding-left:22px; color:var(--modal-ink); font-size:13.5px; line-height:1.6; }
.install-box ol li{ margin:3px 0; }
.install-box .ios-share{ width:17px; height:17px; vertical-align:-3px; color:var(--link); }
.install-box .inote{ font-size:12px; color:var(--muted); }
.install-box details{ margin-top:8px; font-size:13px; } .install-box summary{ cursor:pointer; color:var(--link); }
.install-go{ background:var(--accent); color:#fff; border:0; border-radius:10px; padding:11px 22px; font-size:15px; font-weight:600; cursor:pointer; }
@media (display-mode: standalone){ .titlechip .installbtn{ display:none !important; } }