:root{
      /* The bar height is measured by JS (adjustTopPadding), which overrides this. The formula is only the first-frame starting point and must already include --sat, otherwise sheets start a notch-height too high between first paint and measurement. */
      --top-bar-h:calc(120px + var(--sat));
      /* iOS: viewport-fit=cover + status-bar-style black-translucent put the layout UNDER the status bar. Without these insets the header sat under the clock/notch and iOS swallowed taps in the status bar ("header buttons don't work on iPhone"). Both insets are 0px on Android. */
      --sat:env(safe-area-inset-top,0px);
      --sab:env(safe-area-inset-bottom,0px);
      --nav-h:72px;
      --bg:#0b0f14; --bg2:#141a21; --bg3:#1b232c;
      --border:rgba(255,255,255,0.10); --glass:rgba(255,255,255,0.045);
      --shadow:rgba(0,0,0,0.5); --text:#eef2f6; --muted:#b9c6d2;
      /* TEXT ON THE MAP OVERLAY. The forecast panel sits on the map with its OWN dark background in EVERY theme (index.html: rgba(10,15,20,0.75)), so it can't use --muted (dark grey in the light theme, it would vanish). A dedicated variable keeps this overlay's text in one place. */
      --ovl-muted:#c3cfd9; --ovl-sep:rgba(255,255,255,0.22);
      --acc:#1fd87a; --acc2:#16b866; --amber:#ffc247;
      --red:#ff5555; --blue:#4db8ff; --rain:#4db8ff;
      --bebas:'Bebas Neue',sans-serif;
      --mono:'Space Mono',monospace;
      --body:'DM Sans',sans-serif;
    }
    body.light{
      --bg:#f0f4f8; --bg2:#ffffff; --bg3:#ffffff;
      --border:rgba(0,0,0,0.10); --glass:rgba(255,255,255,0.95);
      --shadow:rgba(0,0,0,0.10); --text:#111827; --muted:#4b5563;
      --acc:#059652; --acc2:#047a42; --amber:#d97706;
      --red:#dc2626; --blue:#2563eb; --rain:#2563eb;
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{background:var(--bg);color:var(--text);font-family:var(--body);min-height:100dvh;overflow-x:hidden;transition:background .3s,color .3s;padding-bottom:calc(var(--nav-h) + var(--sab));padding-top:var(--top-bar-h)}

    /* ATMOSPHERE */
    .atmo{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
    .atmo-orb1{position:absolute;width:600px;height:600px;top:-250px;left:-150px;border-radius:50%;background:radial-gradient(circle,rgba(31,216,122,0.05),transparent 68%);filter:blur(60px);animation:orbFloat 18s ease-in-out infinite alternate}
    .atmo-orb2{position:absolute;width:400px;height:400px;bottom:-150px;right:-80px;border-radius:50%;background:radial-gradient(circle,rgba(0,200,100,0.03),transparent 68%);filter:blur(60px);animation:orbFloat 14s ease-in-out infinite alternate-reverse}
    .atmo-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(31,216,122,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(31,216,122,0.025) 1px,transparent 1px);background-size:48px 48px}
    body.light .atmo-orb1{background:radial-gradient(circle,rgba(0,180,80,0.05),transparent 68%)}
    body.light .atmo-orb2{background:radial-gradient(circle,rgba(0,180,80,0.03),transparent 68%)}
    body.light .atmo-grid{background-image:linear-gradient(rgba(0,0,0,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.035) 1px,transparent 1px)}
    @keyframes orbFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(30px,20px) scale(1.05)}}

    #app{position:relative;z-index:1;max-width:520px;margin:0 auto}
    #top-bar{position:fixed;top:0;left:0;right:0;z-index:600;background:var(--bg);max-width:520px;margin:0 auto;padding-top:var(--sat)}
    body.light #top-bar{background:#f0f4f8}

    /* HEADER */
    .hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 0;gap:8px}
    .logo{display:flex;align-items:center;gap:9px;flex-shrink:1;min-width:0;overflow:hidden}
    .logo>div{min-width:0;overflow:hidden}
    .logo-text{font-family:var(--bebas);font-size:22px;letter-spacing:.08em;color:var(--acc);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .logo-sub{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.12em;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .hdr-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
    .btn-icon{background:var(--bg2);border:1px solid var(--border);border-radius:8px;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:all .2s;color:var(--text);flex-shrink:0}
    .btn-icon:hover{border-color:var(--acc)}
    body.light .btn-icon{background:#ffffff;box-shadow:0 1px 4px var(--shadow)}

    /* SEARCH */
    .search-bar{padding:12px 16px 0;position:relative;z-index:100}
    .fav-chips{display:flex;gap:8px;padding:8px 16px 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .fav-chips::-webkit-scrollbar{display:none}
    .fav-chip{display:inline-flex;align-items:center;gap:5px;background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:6px 12px;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--acc);white-space:nowrap;cursor:pointer;flex-shrink:0;transition:background .15s,border-color .15s;box-shadow:0 1px 6px var(--shadow)}
    .fav-chip:hover{background:var(--glass);border-color:var(--acc)}
    .fav-chip .chip-star{font-size:12px}
    .fav-chip .chip-name{color:var(--text)}
    body.light .fav-chip{background:#ffffff;color:var(--acc)}

    .search-wrap{position:relative}
    .search-wrap input{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:13px 14px 13px 40px;font-family:var(--mono);font-size:16px;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s;box-shadow:0 2px 10px var(--shadow)}
    .search-wrap input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(31,216,122,0.12)}
    .search-wrap input::placeholder{color:var(--muted)}
    .search-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
    .dropdown{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;z-index:300;box-shadow:0 20px 50px var(--shadow)}
    .dd-item{padding:11px 14px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);transition:background .12s}
    .dd-item:last-child{border-bottom:none}
    .dd-item:hover{background:var(--glass)}
    .dd-sub{font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:auto}
    body.light .search-wrap input{background:#ffffff;color:#111827;border-color:rgba(0,0,0,0.12);font-size:16px}
    body.light .dropdown{background:#ffffff}

    /* MAIN SCROLL AREA */
    main{padding:14px 16px;display:flex;flex-direction:column;gap:11px}
    /* The home screen scrolls naturally (the page); header + nav are fixed */
    main.has-data{gap:12px;padding-bottom:20px}

    /* CARDS */
    .card{background:var(--glass);border:1px solid var(--border);border-radius:16px;box-shadow:0 2px 10px var(--shadow);transition:transform .15s}
    body.light .card{background:#ffffff;border-color:rgba(0,0,0,0.08);box-shadow:0 2px 12px var(--shadow)}

    /* HERO WEATHER CARD */
    .hero-card{background:var(--glass);border:1px solid var(--border);border-radius:18px;padding:11px 16px 10px;position:relative;overflow:hidden;overflow:clip;box-shadow:0 4px 24px var(--shadow)}   /* v226: clip, not hidden — a hidden box is still scrollable (scrollIntoView shifted it 60 px, "DUBLIN" → "BLIN") */
    .hero-card::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(31,216,122,0.08),transparent 70%);pointer-events:none;border-radius:18px}
    body.light .hero-card{background:#ffffff;box-shadow:0 4px 20px var(--shadow);border-color:rgba(0,0,0,0.08)}
    /* ── FIELD MODE (max contrast for outdoor use) ── */
    body.field{
      --bg:#000000; --bg2:#111111; --bg3:#1a1a1a;
      --border:#ffffff; --glass:#111111;
      --shadow:rgba(0,0,0,0.9); --text:#ffffff; --muted:#bbbbbb;
      --acc:#ffffff; --acc2:#dddddd; --amber:#ffffff;
      --red:#ffffff; --blue:#ffffff;
      --ovl-muted:#ffffff; --ovl-sep:rgba(255,255,255,0.6);
    }
    body.field .hero-card{background:#111111;border:2px solid #ffffff}
    body.field .ctx-btn{background:#111111;border:2px solid #ffffff}
    body.field .ctx-btn-val{color:#ffffff!important}
    body.field .top-bar-inner{background:#000000;border-bottom:2px solid #ffffff}
    body.field .hdr{background:#000000}
    body.field .search-wrap input{background:#111111;color:#ffffff;border:2px solid #ffffff}
    body.field .sheet-box{background:#000000;border:2px solid #ffffff}
    body.field .btn-icon{background:#111111;border:2px solid #ffffff;color:#ffffff}
    .hero-loc{font-family:var(--bebas);font-size:clamp(30px,8vw,46px);line-height:.92;letter-spacing:.04em}
    .hero-county{font-family:var(--mono);font-size:10px;color:var(--acc);letter-spacing:.18em;text-transform:uppercase;margin-top:3px}
    body.light .hero-county{color:#059652}
    /* Marker for a stand-in location: the weather is NOT from the user's position. */
    .hero-locnote{font-family:var(--mono);font-size:9px;color:var(--amber);letter-spacing:.08em;margin-top:4px;opacity:.9}
    .hero-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
    .hero-temp{font-family:var(--bebas);font-size:clamp(68px,17vw,100px);line-height:.88;letter-spacing:-.01em}
    .hero-temp sup{font-size:.28em;vertical-align:super;color:var(--muted)}
    .hero-feels{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:4px}
    .hero-right{text-align:right}
    .hero-icon{font-size:46px;line-height:1;margin-bottom:4px}
    .hero-desc{font-size:15px;font-weight:600}
    .hero-range{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:3px;line-height:1.8}
    .hero-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
    .hero-meta-item{display:flex;flex-direction:column;gap:2px}
    .hero-meta-label{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
    .hero-meta-val{font-family:var(--bebas);font-size:22px;letter-spacing:.03em;line-height:1}
    .hero-meta-unit{font-family:var(--mono);font-size:10px;color:var(--muted)}

    /* SECTION LABEL */
    .sec-lbl{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:0 2px}
    body.light .sec-lbl{color:#374151}

    /* HERO STATS ROW (3 key values) */
    .hero-stats-row{display:flex;align-items:center;gap:0;margin-top:10px;padding-top:10px;padding-bottom:6px;border-top:1px solid var(--border)}
    .hero-stat{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:0 2px}
    .hero-stat-ico{font-size:16px;flex-shrink:0}
    .hero-stat-val{font-family:var(--bebas);font-size:19px;letter-spacing:.03em;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .hero-stat-lbl{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:0;white-space:nowrap;line-height:1}
    .hero-stat-unit{font-family:var(--mono);font-size:10px;color:var(--muted)}
    .hero-stat-div{width:1px;background:var(--border);height:28px;flex-shrink:0}

    /* HERO INFO ROW (pressure + sun) */
    .hero-info-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);gap:4px;flex-wrap:wrap}

    /* CONTEXT GRID 2×3 */
    .ctx-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .ctx-btn{background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:14px 13px;cursor:pointer;text-align:left;transition:border-color .18s,transform .12s,background .18s;box-shadow:0 2px 10px var(--shadow);color:var(--text);display:flex;flex-direction:column;gap:5px;min-height:88px;-webkit-tap-highlight-color:transparent}
    .ctx-btn:active{transform:scale(.96)}
    .ctx-btn:hover{border-color:rgba(31,216,122,.3);background:rgba(31,216,122,.03)}
    body.light .ctx-btn{background:#ffffff;border-color:rgba(0,0,0,.08);box-shadow:0 2px 8px var(--shadow)}
    body.light .ctx-btn:hover{border-color:rgba(5,150,82,.3);background:#f0fdf4}
    .ctx-btn--dim{opacity:.5}
    .ctx-btn-top{display:flex;align-items:center;gap:7px}
    .ctx-btn-icon{font-size:18px;line-height:1;flex-shrink:0}
    .ctx-btn-label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
    body.light .ctx-btn-label{color:#6b7280}
    .ctx-btn-val{font-family:var(--bebas);font-size:26px;letter-spacing:.03em;line-height:1;color:var(--acc)}
    body.light .ctx-btn-val{color:#059652}
    .ctx-btn-sub{font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

    /* SUN ROW */
    .sun-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .sun-card{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 2px 8px var(--shadow)}
    body.light .sun-card{background:#ffffff;border-color:rgba(0,0,0,0.08)}
    body.light .sun-card:first-child{border-left:4px solid #f59e0b}
    body.light .sun-card:last-child{border-left:4px solid #ef4444}
    .sun-icon{font-size:20px;flex-shrink:0}
    .sun-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1px}
    .sun-val{font-family:var(--bebas);font-size:24px;letter-spacing:.03em;color:var(--amber)}
    .sun-sub{font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:1px}

    /* WIND CARD */
    .wind-card{background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;box-shadow:0 2px 10px var(--shadow)}
    body.light .wind-card{background:#ffffff;border-color:rgba(0,0,0,0.08);box-shadow:0 2px 12px var(--shadow)}
    .wind-item{}
    .wind-item-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;display:flex;align-items:center;gap:6px}
    .wind-item-val{font-family:var(--bebas);font-size:36px;line-height:1;letter-spacing:.02em}
    .wind-item-unit{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}
    .wind-dir-row{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--border)}
    .wind-arrow{font-size:22px;transition:transform .5s ease}
    .wind-dir-lbl{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--acc)}
    .wind-dir-deg{font-family:var(--mono);font-size:11px;color:var(--muted)}
    .unit-pill{background:rgba(31,216,122,0.1);border:1px solid rgba(31,216,122,0.25);border-radius:5px;padding:2px 7px;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--acc);cursor:pointer;letter-spacing:.06em;transition:background .15s;user-select:none}
    .unit-pill:hover{background:rgba(31,216,122,0.2)}
    body.light .unit-pill{background:rgba(5,150,82,0.1);border-color:rgba(5,150,82,0.25);color:#059652}

    /* ROAD + SAFETY */
    .road-safety-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .road-card{background:linear-gradient(135deg,rgba(255,194,71,0.06),transparent);border:1px solid rgba(255,194,71,0.2);border-radius:14px;padding:13px;box-shadow:0 2px 8px var(--shadow)}
    .road-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:4px}
    .road-val{font-family:var(--bebas);font-size:30px;line-height:1;letter-spacing:.02em}
    .road-badge{display:inline-block;margin-top:5px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.07em;padding:3px 8px;border-radius:5px;text-transform:uppercase}
    .road-badge.ok{background:rgba(31,216,122,0.12);color:var(--acc);border:1px solid rgba(31,216,122,0.2)}
    .road-badge.wet{background:rgba(77,184,255,0.12);color:var(--blue);border:1px solid rgba(77,184,255,0.25)}
    .road-badge.slick{background:rgba(255,194,71,0.12);color:var(--amber);border:1px solid rgba(255,194,71,0.2)}
    .road-badge.ice{background:rgba(255,85,85,0.12);color:var(--red);border:1px solid rgba(255,85,85,0.2)}
    .road-badge.snow{background:rgba(200,220,255,0.1);color:#c8dcff;border:1px solid rgba(200,220,255,0.2)}
    .safety-card{border-radius:14px;padding:13px;box-shadow:0 2px 8px var(--shadow)}
    .safety-card.safe{background:linear-gradient(135deg,rgba(31,216,122,0.07),transparent);border:1px solid rgba(31,216,122,0.2)}
    .safety-card.caution{background:linear-gradient(135deg,rgba(255,194,71,0.08),transparent);border:1px solid rgba(255,194,71,0.22)}
    .safety-card.danger{background:linear-gradient(135deg,rgba(255,85,85,0.08),transparent);border:1px solid rgba(255,85,85,0.25)}
    body.light .road-card{background:#fffbeb;border-color:rgba(217,119,6,0.25);border-left:4px solid #d97706}
    body.light .safety-card.safe{background:#f0fdf4;border-color:rgba(5,150,82,0.2);border-left:4px solid #059652}
    body.light .safety-card.caution{background:#fffbeb;border-color:rgba(217,119,6,0.22);border-left:4px solid #d97706}
    body.light .safety-card.danger{background:#fef2f2;border-color:rgba(220,38,38,0.25);border-left:4px solid #dc2626}
    .safety-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
    .safety-verdict{font-family:var(--bebas);font-size:24px;letter-spacing:.05em;line-height:1}
    .safety-reasons{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:3px;line-height:1.5}

    /* MINUTE RAIN */
    .rain-chart{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:13px 13px 10px;box-shadow:0 2px 8px var(--shadow)}
    body.light .rain-chart{background:#ffffff;border-left:4px solid #2563eb;border-color:rgba(0,0,0,0.08)}
    .rain-chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
    .rain-chart-title{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
    body.light .rain-chart-title{color:#374151}
    .rain-chart-status{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em}
    .rain-bars{display:flex;align-items:flex-end;gap:2px;height:48px}
    .rain-bar-item{flex:1;border-radius:2px 2px 0 0;min-height:2px}
    .rain-time-labels{display:flex;justify-content:space-between;margin-top:4px}
    .rain-time-lbl{font-family:var(--mono);font-size:9px;color:var(--muted)}

    /* HOURLY */
    .hourly-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
    .hourly-scroll::-webkit-scrollbar{display:none}
    .hourly-track{display:flex;gap:7px;width:max-content}
    .h-card{background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:11px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:68px;cursor:pointer;box-shadow:0 2px 6px var(--shadow);transition:transform .15s}
    .h-card.now{background:linear-gradient(160deg,rgba(31,216,122,0.1),transparent);border-color:rgba(31,216,122,0.3)}
    .h-card:active{transform:scale(.95)}
    body.light .h-card{background:#ffffff;border-color:rgba(0,0,0,0.08)}
    body.light .h-card.now{background:#f0fdf4;border-color:#059652}
    /* Day separator on the hourly strip, which runs 24 h ahead and otherwise crossed into tomorrow without a trace. Dashed line plus the day name set vertically so it doesn't widen the strip. */
    .h-daysep{flex-shrink:0;align-self:stretch;display:flex;align-items:center;justify-content:center;width:22px;border-left:1px dashed var(--border);opacity:.85}
    .h-daysep span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;text-transform:uppercase}
    /* v249 (bonus): sunrise / sunset markers in the hourly strip */
    .h-sunsep{flex-shrink:0;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:24px;border-left:1px dashed rgba(255,176,32,.5)}
    .h-sunsep i{font-style:normal;font-size:12px;line-height:1}
    .h-sunsep span{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--amber);writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
    /* Model chips in the forecast panel. They were inlined with a hardcoded rgba(200,200,200,0.9) that no theme touched: grey beside the white verdict in field mode, low contrast in the light theme. Moved to classes so themes can hook them. */
    .ens-chip{font-family:var(--mono);font-size:9px;color:var(--ovl-muted);white-space:nowrap}
    .ens-sep{color:var(--ovl-sep);margin:0 2px}
    .ens-dot{display:inline-block;width:8px;height:8px;border-radius:50%;border:1.5px solid;box-sizing:border-box;margin-right:4px;vertical-align:middle}
    /* Field mode: a 1.5 px outline on black is a thin ring, and with four dry models the whole row looks unfinished. Thicker outline and a slightly bigger dot. */
    body.field .ens-dot{width:10px;height:10px;border-width:2.5px}
    /* Wind on the daily tile. The arrow is rotated 180° from Open-Meteo's direction, because the API gives where the wind comes FROM and the arrow shows where it blows TO. Separate span so the rotation doesn't rotate the number. */
    /* Gust on the hourly tile. No unit on every tile: 48 × "km/h" is noise, the unit is in the section caption once. */
    .h-wind{font-family:var(--mono);font-size:10px;font-weight:700;margin-top:3px;line-height:1;text-align:center}
    /* Section header caption: says at what height the gust is. */
    .sec-note{font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--muted);opacity:.8;margin-left:8px}
    .day-wind{font-family:var(--mono);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:3px;margin-top:3px;line-height:1}
    /* v233: the 7-day gust is tappable — jumps to the hour tile that has it. Dotted underline = "tap me", like the hero wind. */
    .day-wind.day-wind-jump{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;padding:4px 2px;margin-top:-1px}
    .day-wind-arr{display:inline-block;font-size:11px;line-height:1}
    .day-wind-u{font-size:8px;font-weight:400;opacity:.75}
    .h-wind-u{display:block;font-size:7px;font-weight:400;opacity:.7;margin-top:1px}   /* v223: gust unit under the number (tile is narrow) */
    .h-time{font-family:var(--mono);font-size:10px;color:var(--muted)}
    .h-icon{font-size:18px;line-height:1}
    .h-temp{font-family:var(--bebas);font-size:20px;letter-spacing:.03em}
    .h-prob{font-family:var(--mono);font-size:10px;color:var(--blue)}
    .h-prob.h-prob-lo{color:var(--muted);opacity:.85}   /* v224: below 50 % — shown, but not as "rain" */

    /* ENV - UV/AQI/POLLEN (collapsible) */
    .env-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:0 2px;user-select:none}
    .env-toggle-arr{font-size:12px;color:var(--muted);transition:transform .25s}
    .env-toggle-arr.open{transform:rotate(180deg)}
    .env-body{display:none;margin-top:10px;display:flex;flex-direction:column;gap:8px}
    .env-body.visible{display:flex}
    .env-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .env-card{background:var(--glass);border:1px solid var(--border);border-radius:13px;padding:12px;box-shadow:0 2px 6px var(--shadow)}
    body.light .env-card{background:#ffffff;border-color:rgba(0,0,0,0.08)}
    .env-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
    body.light .env-lbl{color:#374151}
    .env-val{font-family:var(--bebas);font-size:30px;line-height:1;letter-spacing:.02em}
    .env-pill{display:inline-block;margin-top:5px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:5px;text-transform:uppercase}
    .pill-low{background:rgba(31,216,122,0.12);color:var(--acc);border:1px solid rgba(31,216,122,0.2)}
    .pill-mod{background:rgba(255,194,71,0.12);color:var(--amber);border:1px solid rgba(255,194,71,0.2)}
    .pill-high{background:rgba(255,140,0,0.14);color:#ff8c00;border:1px solid rgba(255,140,0,0.25)}
    .pill-vhigh{background:rgba(255,60,0,0.14);color:#ff3c00;border:1px solid rgba(255,60,0,0.25)}
    .pill-ext{background:rgba(180,0,255,0.14);color:#b400ff;border:1px solid rgba(180,0,255,0.25)}
    .pill-good{background:rgba(31,216,122,0.12);color:var(--acc);border:1px solid rgba(31,216,122,0.2)}
    .pill-fair{background:rgba(100,220,100,0.12);color:#64dc64;border:1px solid rgba(100,220,100,0.2)}
    .pill-mod2{background:rgba(255,194,71,0.12);color:var(--amber);border:1px solid rgba(255,194,71,0.2)}
    .pill-poor{background:rgba(255,120,0,0.14);color:#ff7800;border:1px solid rgba(255,120,0,0.25)}
    .pill-vpoor{background:rgba(255,60,0,0.14);color:#ff3c00;border:1px solid rgba(255,60,0,0.25)}
    .uv-bar{height:6px;border-radius:3px;margin-top:6px;background:var(--border);overflow:hidden}
    .uv-fill{height:100%;border-radius:3px;background:linear-gradient(to right,#1fd87a,#ffd700,#ff8c00,#ff3c00,#b400ff);transition:width .5s ease}
    .aqi-bar{height:6px;border-radius:3px;margin-top:6px;background:var(--border);overflow:hidden}
    .aqi-fill{height:100%;border-radius:3px;background:linear-gradient(to right,#1fd87a,#adff2f,#ffd700,#ff8c00,#ff3c00,#960018);transition:width .5s ease}
    .pollen-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:4px}
    .pollen-item{text-align:center}
    .pollen-name{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
    .pollen-val{font-family:var(--bebas);font-size:20px;letter-spacing:.03em}

    /* FISHING CARD */
    .fishing-card{background:linear-gradient(135deg,rgba(77,184,255,0.07),transparent);border:1px solid rgba(77,184,255,0.2);border-radius:16px;padding:16px;box-shadow:0 2px 10px var(--shadow)}
    body.light .fishing-card{background:#eff6ff;border-color:rgba(37,99,235,0.2);border-left:4px solid #2563eb}
    .fishing-title{font-family:var(--bebas);font-size:20px;letter-spacing:.08em;color:var(--blue);margin-bottom:12px;display:flex;align-items:center;gap:8px}
    .fishing-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .fishing-item{background:var(--glass);border:1px solid var(--border);border-radius:11px;padding:11px 12px}
    body.light .fishing-item{background:#ffffff;border-color:rgba(0,0,0,0.08)}
    .fishing-lbl{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
    .fishing-val{font-family:var(--bebas);font-size:26px;line-height:1;letter-spacing:.02em}
    .fishing-unit{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:1px}
    .fishing-badge{display:inline-block;margin-top:4px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:5px;text-transform:uppercase}
    .surf-great{color:#00e5ff;border:1px solid rgba(0,229,255,.3);background:rgba(0,229,255,.08)}
    .surf-good{color:var(--acc);border:1px solid rgba(31,216,122,.2);background:rgba(31,216,122,.06)}
    .surf-fair{color:var(--amber);border:1px solid rgba(255,194,71,.2);background:rgba(255,194,71,.06)}
    .surf-poor{color:var(--muted);border:1px solid var(--border);background:var(--glass)}
    .fishing-hourly{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-top:12px;padding-bottom:2px}
    .fishing-hourly::-webkit-scrollbar{display:none}
    .fishing-hourly-track{display:flex;gap:7px;width:max-content}
    .fish-h-card{background:var(--glass);border:1px solid var(--border);border-radius:11px;padding:10px 9px;min-width:76px;display:flex;flex-direction:column;align-items:center;gap:3px}
    body.light .fish-h-card{background:#ffffff;border-color:rgba(0,0,0,0.08)}
    .fish-h-time{font-family:var(--mono);font-size:10px;color:var(--muted)}
    .fish-h-wave{font-family:var(--bebas);font-size:18px;letter-spacing:.03em;color:var(--blue)}
    .fish-h-wind{font-family:var(--mono);font-size:10px;color:var(--muted)}
    .fish-h-icon{font-size:14px}

    /* 7-DAY */
    .week-chart-wrap{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:14px 13px 11px;box-shadow:0 2px 8px var(--shadow)}
    body.light .week-chart-wrap{background:#ffffff;border-color:rgba(0,0,0,0.08);border-left:4px solid #059652}
    .week-chart-title{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
    body.light .week-chart-title{color:#374151}
    .week-svg{width:100%;overflow:visible;display:block}
    .week-day-labels{display:flex;justify-content:space-between;margin-top:5px}
    .week-day-lbl{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center;flex:1}
    .week-day-lbl.today-lbl{color:var(--acc);font-weight:700}
    body.light .week-day-lbl.today-lbl{color:#059652}
    .week-wrap{display:flex;flex-direction:column;gap:6px}
    .day-row{display:flex;align-items:center;gap:10px;background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:10px 12px;transition:border-color .2s}
    .day-row.today{border-color:rgba(31,216,122,0.25)}
    body.light .day-row{background:#ffffff;border-color:rgba(0,0,0,0.08)}
    body.light .day-row.today{border-color:#059652}
    .day-name{font-family:var(--mono);font-size:11px;font-weight:700;width:42px;flex-shrink:0;color:var(--muted)}
    .day-name.today-lbl{color:var(--acc)}
    body.light .day-name.today-lbl{color:#059652}
    .day-icon{font-size:20px;flex-shrink:0}
    .day-range{flex:1;display:flex;align-items:center;gap:8px}
    .day-lo{font-family:var(--mono);font-size:11px;color:var(--muted);width:28px;text-align:right;flex-shrink:0}
    .day-bar-wrap{flex:1;height:5px;border-radius:3px;background:var(--border);position:relative}
    .day-bar{position:absolute;height:100%;border-radius:3px;background:linear-gradient(to right,var(--blue),var(--acc))}
    .day-hi{font-family:var(--mono);font-size:11px;font-weight:700;width:28px;flex-shrink:0}
    .day-rain{font-family:var(--mono);font-size:10px;color:var(--blue);flex-shrink:0;width:46px;text-align:right}
    body.light .day-rain{color:#2563eb;font-weight:700}

    /* ── WEATHER ATMOSPHERE ANIMATIONS ── */
    .wx-rain .atmo-orb1{background:radial-gradient(circle,rgba(77,184,255,0.12),transparent 68%)!important;animation:orbFloat 10s ease-in-out infinite alternate}
    .wx-rain .atmo-orb2{background:radial-gradient(circle,rgba(77,184,255,0.08),transparent 68%)!important}
    .wx-storm .atmo-orb1{background:radial-gradient(circle,rgba(180,100,255,0.12),transparent 68%)!important;animation:orbFloat 6s ease-in-out infinite alternate}
    .wx-storm .atmo-orb2{background:radial-gradient(circle,rgba(255,85,85,0.08),transparent 68%)!important}
    .wx-fog .atmo-orb1{background:radial-gradient(circle,rgba(180,180,180,0.15),transparent 68%)!important;animation:orbFloat 22s ease-in-out infinite alternate}
    .wx-fog .atmo-orb2{background:radial-gradient(circle,rgba(180,180,180,0.10),transparent 68%)!important}
    .wx-snow .atmo-orb1{background:radial-gradient(circle,rgba(180,220,255,0.14),transparent 68%)!important}
    .wx-snow .atmo-orb2{background:radial-gradient(circle,rgba(200,230,255,0.10),transparent 68%)!important}
    .wx-clear .atmo-orb1{background:radial-gradient(circle,rgba(31,216,122,0.07),transparent 68%)!important;animation:orbFloat 20s ease-in-out infinite alternate}

    /* ── DYNAMIC WEATHER ATMOSPHERE (Phase 2) — subtle, CSS-only ─────────────
       Effects live on .atmo (z-index:0, behind #app z-index:1). Two pseudo
       layers per state. Gated OFF in Field mode + prefers-reduced-motion. */
    .wx-clear-night .atmo-orb1{background:radial-gradient(circle,rgba(120,150,220,0.10),transparent 68%)!important;animation:orbFloat 24s ease-in-out infinite alternate}
    .wx-clear-night .atmo-orb2{background:radial-gradient(circle,rgba(90,120,200,0.07),transparent 68%)!important}
    .wx-cloud .atmo-orb1{background:radial-gradient(circle,rgba(170,185,205,0.08),transparent 68%)!important;animation:orbFloat 24s ease-in-out infinite alternate}
    .wx-cloud .atmo-orb2{background:radial-gradient(circle,rgba(170,185,205,0.06),transparent 68%)!important}

    /* Rain / Storm — soft diagonal streaks */
    body.wx-rain .atmo::before,body.wx-storm .atmo::before{
      content:"";position:absolute;left:0;right:0;top:0;height:200%;
      background:repeating-linear-gradient(100deg,transparent 0 7px,rgba(165,205,255,.11) 7px 8px);
      opacity:.6;animation:wxFall .9s linear infinite;will-change:transform}
    body.wx-storm .atmo::before{animation-duration:.6s;background:repeating-linear-gradient(100deg,transparent 0 6px,rgba(180,210,255,.13) 6px 7px)}
    body.wx-storm .atmo::after{
      content:"";position:absolute;inset:0;background:rgba(205,222,255,.5);opacity:0;
      animation:wxFlash 9s ease-in-out infinite}
    @keyframes wxFall{from{transform:translateY(-50%)}to{transform:translateY(0)}}
    @keyframes wxFlash{0%,92%,100%{opacity:0}93%{opacity:.16}94%{opacity:0}95.5%{opacity:.10}96.5%{opacity:0}}

    /* Snow — drifting dots, two depths */
    body.wx-snow .atmo::before{
      content:"";position:absolute;left:0;right:0;top:0;height:200%;
      background-image:radial-gradient(rgba(255,255,255,.55) 1.4px,transparent 2px);background-size:42px 42px;
      opacity:.55;animation:wxFall 6s linear infinite;will-change:transform}
    body.wx-snow .atmo::after{
      content:"";position:absolute;left:0;right:0;top:0;height:200%;
      background-image:radial-gradient(rgba(255,255,255,.4) 1px,transparent 1.6px);background-size:30px 30px;background-position:15px 0;
      opacity:.4;animation:wxFall 9s linear infinite;will-change:transform}

    /* Fog — soft drifting band */
    body.wx-fog .atmo::before{
      content:"";position:absolute;inset:0;
      background:linear-gradient(180deg,transparent,rgba(190,196,206,.10) 45%,rgba(190,196,206,.14) 55%,transparent);
      filter:blur(8px);opacity:.7;animation:wxFog 16s ease-in-out infinite alternate;will-change:transform}
    @keyframes wxFog{from{transform:translateX(-6%)}to{transform:translateX(6%)}}

    /* Clear day — gentle warm glow top-right */
    body.wx-clear .atmo::before{
      content:"";position:absolute;inset:0;
      background:radial-gradient(120% 60% at 82% -12%,rgba(255,210,120,.10),transparent 60%);
      animation:wxSun 8s ease-in-out infinite alternate}
    @keyframes wxSun{from{opacity:.5}to{opacity:.9}}

    /* Clear night — faint twinkling stars */
    body.wx-clear-night .atmo::before{
      content:"";position:absolute;inset:0;
      background-image:radial-gradient(1px 1px at 20% 28%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 68% 18%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 42% 58%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 85% 48%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 56% 80%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 12% 72%,rgba(255,255,255,.45),transparent);
      opacity:.7;animation:wxTwinkle 4s ease-in-out infinite alternate}
    @keyframes wxTwinkle{from{opacity:.38}to{opacity:.85}}

    /* Cloud — slow haze drift */
    body.wx-cloud .atmo::before{
      content:"";position:absolute;inset:0;
      background:radial-gradient(60% 40% at 30% 32%,rgba(205,214,228,.07),transparent 60%),radial-gradient(50% 35% at 74% 62%,rgba(205,214,228,.06),transparent 60%);
      opacity:.8;animation:wxCloud 26s ease-in-out infinite alternate;will-change:transform}
    @keyframes wxCloud{from{transform:translateX(-4%)}to{transform:translateX(4%)}}

    /* GUARDRAIL 1 — Field mode is HI-VIS: kill all decorative background */
    body.field .atmo{display:none!important}
    /* GUARDRAIL 2 — honour reduced-motion: keep static tint, stop all motion */
    @media (prefers-reduced-motion:reduce){
      .atmo-orb1,.atmo-orb2,
      body.wx-rain .atmo::before,body.wx-storm .atmo::before,body.wx-storm .atmo::after,
      body.wx-snow .atmo::before,body.wx-snow .atmo::after,
      body.wx-fog .atmo::before,body.wx-clear .atmo::before,
      body.wx-clear-night .atmo::before,body.wx-cloud .atmo::before{animation:none!important}
    }

    /* ── DAILY VERDICT (Phase 2) — short tag per day + best-day ring ───────── */
    .day-card{position:relative}
    .h-verdict{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-top:5px;white-space:nowrap;line-height:1}
    .day-best{border-color:var(--acc)!important;box-shadow:0 0 0 1px var(--acc) inset,0 2px 12px rgba(31,216,122,.20)!important}
    /* v251: the frame says what it is. The scroller clips anything above it, so the row gets room for the tag. */
    .days-scroll.has-best{padding-top:9px}
    .day-best-tag{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--acc);color:#04140b;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;line-height:1;padding:3px 7px 3px 8px;border-radius:6px;white-space:nowrap;pointer-events:none}
    body.light .day-best-tag{color:#fff}


    /* ── ABOUT / SEO footer — collapsible (text stays in DOM for SEO) ───────── */
    .seo-toggle{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;background:none;border:none;cursor:pointer;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:4px 0;-webkit-tap-highlight-color:transparent}
    .seo-chev{display:inline-block;transition:transform .25s;font-size:15px;line-height:1}
    .seo-footer.open .seo-chev{transform:rotate(90deg)}
    .seo-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
    .seo-footer.open .seo-body{max-height:560px}

    /* Rain drops — CSS only, subtle */
    .wx-rain::after,.wx-storm::after{
      content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
      background-image:
        linear-gradient(180deg,rgba(77,184,255,0.06) 1px,transparent 1px),
        linear-gradient(180deg,rgba(77,184,255,0.04) 1px,transparent 1px),
        linear-gradient(180deg,rgba(77,184,255,0.03) 1px,transparent 1px);
      background-size:3px 28px, 2px 20px, 2px 35px;
      background-position:10% 0,40% 5px,70% 12px;
      animation:rainFall 1.2s linear infinite;
      opacity:.5;
    }
    .wx-storm::after{opacity:.8;animation-duration:.7s}
    body.light .wx-rain::after,body.light .wx-storm::after{background-image:linear-gradient(180deg,rgba(37,99,235,0.08) 1px,transparent 1px),linear-gradient(180deg,rgba(37,99,235,0.05) 1px,transparent 1px),linear-gradient(180deg,rgba(37,99,235,0.04) 1px,transparent 1px);background-size:3px 28px,2px 20px,2px 35px;background-position:10% 0,40% 5px,70% 12px}

    /* Snow dots */
    .wx-snow::after{
      content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
      background-image:radial-gradient(circle,rgba(200,230,255,0.5) 1px,transparent 1px),radial-gradient(circle,rgba(200,230,255,0.3) 1px,transparent 1px);
      background-size:60px 60px,90px 90px;
      background-position:0 0,30px 30px;
      animation:snowFall 8s linear infinite;
      opacity:.6;
    }

    /* Fog pulse */
    .wx-fog::before{
      content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
      background:linear-gradient(180deg,transparent 30%,rgba(160,160,160,0.06) 60%,transparent 80%);
      animation:fogPulse 5s ease-in-out infinite;
    }

    @keyframes rainFall{from{background-position:10% 0,40% 5px,70% 12px}to{background-position:10% 28px,40% 25px,70% 47px}}
    @keyframes snowFall{from{background-position:0 0,30px 30px}to{background-position:10px 60px,40px 90px}}
    @keyframes fogPulse{0%,100%{opacity:.4}50%{opacity:1}}


    .quick-btn{width:100%;background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left;transition:border-color .2s,transform .15s;box-shadow:0 2px 8px var(--shadow);color:var(--text)}
    .quick-btn:hover{border-color:var(--acc);transform:translateY(-1px)}
    .quick-btn:active{transform:scale(.98)}
    body.light .quick-btn{background:#ffffff;border-color:rgba(0,0,0,0.08)}
    body.light .quick-btn:hover{border-color:#059652}
    .quick-btn-icon{font-size:24px;flex-shrink:0}
    .quick-btn-body{flex:1;min-width:0}
    .quick-btn-title{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
    body.light .quick-btn-title{color:#111827}
    .quick-btn-sub{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .quick-btn-arr{font-size:20px;color:var(--muted);flex-shrink:0;font-weight:300}


    /* SHARE + COFFEE */
    .share-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:4px 2px 8px}
    .share-btn{background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:13px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;cursor:pointer;color:var(--text);display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;text-transform:uppercase}
    .share-btn:hover{border-color:var(--acc);color:var(--acc)}
    .coffee-btn{background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:13px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;cursor:pointer;color:var(--amber);display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;text-transform:uppercase;text-decoration:none}
    .coffee-btn:hover{border-color:var(--amber);background:rgba(255,194,71,.06)}
    body.light .share-btn{background:#ffffff;border-color:rgba(0,0,0,.08)}
    body.light .coffee-btn{background:#ffffff;border-color:rgba(0,0,0,.08)}
    .src-row{display:flex;gap:6px;flex-wrap:wrap;padding:4px 2px 24px}
    .src-badge{font-family:var(--mono);font-size:10px;color:var(--muted);background:var(--glass);border:1px solid var(--border);border-radius:5px;padding:3px 9px}
    body.light .src-badge{background:#f9fafb;color:#6b7280;border-color:rgba(0,0,0,0.08)}

    /* BOTTOM NAV */
    .bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:450;background:var(--bg2);border-top:1px solid var(--border);display:flex;max-width:520px;margin:0 auto;box-shadow:0 -4px 20px var(--shadow);padding-bottom:var(--sab);min-height:var(--nav-h)}
    body.light .bottom-nav{background:#ffffff;border-top-color:rgba(0,0,0,0.1);box-shadow:0 -2px 12px var(--shadow)}
    .nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 0 8px;gap:3px;background:none;border:none;cursor:pointer;color:var(--muted);transition:color .2s;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
    .nav-btn:active{transform:scale(.93)}
    .nav-btn.active{color:var(--acc)}
    body.light .nav-btn.active{color:#059652}
    .nav-btn-icon{font-size:22px;line-height:1}
    .nav-separator{width:1px;background:var(--border);margin:10px 0}

    /* SHEETS (My Car + Route) */
    /* inset:0 covered the bottom-nav, the bug route-sheet and car-sheet each got fixed separately. Fixed ONCE here in the generic rule instead of a third per-ID workaround. The nav stays clickable with any sheet open. */
    /* z-index 400 < 600 (#top-bar): once a sheet became full height the bar drew OVER it and ate the handle, title and X button. 610 = the level route-sheet and car-sheet already use. */
    .sheet-overlay{position:fixed;top:0;left:0;right:0;bottom:calc(var(--nav-h) + var(--sab));background:rgba(0,0,0,.78);z-index:610;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease;backdrop-filter:blur(6px)}
    .sheet-overlay.hidden{display:none!important}
    /* The default height used to subtract --top-bar-h, so EVERY sheet opened as a half drawer with a dead blurred zone above it, and content was cramped in 10 of 11 sheets (days7: 19 loops, windh: 44 divs, env: 35, info: 3 screens of scroll). Full screen is the right DEFAULT; the one genuinely short sheet (activities) is the exception. Rounded top and slideUp stay: it is still a dismissable sheet, unlike route/car (border-radius:0). -44px leaves a strip of backdrop at the top; without it the sheet fills the overlay, the backdrop disappears and tap-outside-to-close (e.target===overlay) stops working, leaving only the X. 44px is the minimum sensible touch target. */
    .sheet-box{background:var(--bg2);border:1px solid var(--border);border-radius:22px 22px 0 0;width:100%;max-width:520px;height:calc(100dvh - var(--nav-h) - var(--sab) - 44px);max-height:none;display:flex;flex-direction:column;animation:slideUp .25s ease;overflow:hidden}
    body.light .sheet-box{background:#ffffff}
    .sheet-handle-wrap{padding:10px 18px 4px;flex-shrink:0}
    .sheet-handle{width:42px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 4px}
    .sheet-head{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
    .sheet-title{font-family:var(--bebas);font-size:22px;letter-spacing:.08em;color:var(--acc)}
    body.light .sheet-title{color:#059652}
    .sheet-close{background:var(--glass);border:1px solid var(--border);color:var(--muted);cursor:pointer;font-size:18px;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center}
    /* min-height:0 is REQUIRED: without it a flex child doesn't shrink below its own content and the scroll escapes to the whole window instead of staying in the sheet. The old padding-bottom 88px compensated for the navbar covered by inset:0; the nav is now outside the sheet, so it would only be dead space. */
    .sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 16px calc(24px + var(--sab));flex:1 1 auto;min-height:0}

    /* The only sheet that is genuinely short (5–6 rows): fullscreen would be 80% empty, so it sticks to its content height. The upper limit is the same, so with more activities it behaves like the rest. */
    #activities-sheet .sheet-box{height:auto;max-height:calc(100dvh - var(--nav-h) - var(--sab))}

    /* top:0 + bottom:calc instead of inset:0 (which covered the navbar, same bug car-sheet had). One scroll on .sheet-body remains; the issue was the inset, not the scrolling. */
    #route-sheet{top:0;bottom:calc(var(--nav-h) + var(--sab));z-index:610;background:var(--bg)}
    /* one scroll on .sheet-body instead of nested flex-scroll (mobile browsers hate that) */
    #route-sheet .sheet-box{height:calc(100dvh - var(--nav-h) - var(--sab));max-height:92dvh;border-radius:0;border:0;background:var(--bg);animation:none;display:flex;flex-direction:column}
    body.light #route-sheet .sheet-box{background:#fff}
    #route-sheet .sheet-handle-wrap{padding-top:9px;flex-shrink:0}
    #route-sheet .sheet-head{flex-shrink:0}
    #route-sheet .sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:block;padding:12px 14px calc(24px + var(--sab))}
    #route-sheet .route-controls{/* normal flow */}
    #route-sheet #route-overview{/* normal flow */}
    #route-sheet #route-map{height:32dvh;min-height:180px;max-height:240px;margin:10px 0 12px;flex:none}
    #route-sheet #route-map.map-hidden{height:0;min-height:0;margin:0;overflow:hidden}
    #route-sheet #route-results{/* normal flow, scrolls with the body */padding-top:0}
    #route-sheet .route-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    #route-sheet .route-field{margin-bottom:0}
    #route-sheet .route-field input{height:44px;padding-top:10px;padding-bottom:10px;font-size:16px}
    #route-sheet .route-field-ico{font-size:12px}
    #route-sheet .btn-route{height:44px;margin-top:8px;border-radius:11px;font-size:11px;box-shadow:0 4px 18px rgba(31,216,122,.16)}
    #route-sheet .route-map{margin-top:10px}
    #route-sheet .route-summary{margin-top:10px}
    #route-sheet .route-nav-btn{margin:10px 0 20px}

    /* My Car — fullscreen like Route (above top-bar and nav) */
    /* inset:0 covered the bottom-nav (z-index 610 > 450), so tabs couldn't be switched without closing My Car. Route-sheet already uses bottom:calc; same fix here. */
    #car-sheet{top:0;bottom:calc(var(--nav-h) + var(--sab));z-index:610;background:var(--bg)}
    #car-sheet .sheet-box{height:calc(100dvh - var(--nav-h) - var(--sab));max-height:92dvh;border-radius:0;border:0;background:var(--bg);animation:none;display:flex;flex-direction:column;overflow:hidden}
    body.light #car-sheet .sheet-box{background:#fff}
    #car-sheet .sheet-handle-wrap{padding-top:9px;flex-shrink:0}
    #car-sheet .sheet-head{flex-shrink:0}
    #car-sheet .sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:block;padding:10px 14px calc(28px + var(--sab))}
    #car-sheet .car-compass-outer{width:min(160px,22dvh);height:min(160px,22dvh);margin:8px auto 4px}
    #car-sheet .car-dist-num{font-size:min(48px,6.5dvh)}
    #car-sheet #btn-nav-car{margin:12px 0 16px}


    /* CAR PANEL — NAVIGATOR STYLE */
    .car-no-saved{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px}
    .car-no-icon{width:80px;height:80px;border-radius:50%;background:var(--glass);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:36px;margin-bottom:4px}
    .car-no-title{font-family:var(--bebas);font-size:22px;letter-spacing:.08em;text-align:center}
    .car-no-sub{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:center;line-height:1.75;max-width:260px}
    .car-park-btn{width:100%;background:var(--acc2);color:#000;border:none;border-radius:14px;padding:16px 20px;font-family:var(--bebas);font-size:18px;letter-spacing:.12em;cursor:pointer;transition:background .2s,transform .1s;box-shadow:0 4px 20px rgba(0,200,80,0.3)}
    .car-park-btn:hover{background:var(--acc)}
    .car-park-btn:active{transform:scale(.97)}
    .car-park-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
    .car-compass-outer{position:relative;width:min(150px,20dvh);height:min(150px,20dvh);margin:0 auto}
    .car-compass-svg{display:block;width:100%;height:100%}
    .car-compass-needle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .6s cubic-bezier(.34,1.56,.64,1);transform-origin:center center}
    .car-dist-block{text-align:center;padding:4px 0 0}
    .car-dist-num{font-family:var(--bebas);font-size:min(48px,6.5dvh);line-height:.88;letter-spacing:-.01em;color:var(--acc)}
    body.light .car-dist-num{color:#059652}
    .car-dist-unit-lbl{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:5px;letter-spacing:.12em;text-transform:uppercase}
    .car-bearing-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:2px}
    .car-bearing-dir{font-family:var(--bebas);font-size:28px;letter-spacing:.06em;color:var(--text)}
    .car-bearing-deg{font-family:var(--mono);font-size:12px;color:var(--muted)}
    .car-accuracy-lbl{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center;margin-top:2px;opacity:.6}
    .car-location-box{background:var(--glass);border:1px solid var(--border);border-radius:13px;padding:8px 12px;margin:4px 0}
    body.light .car-location-box{background:#f9fafb;border-color:rgba(0,0,0,0.08)}
    .car-loc-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
    .car-loc-name{font-size:15px;font-weight:700;color:var(--text)}
    .car-loc-sub{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}
    .car-loc-time{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:5px;opacity:.65}
    .car-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .car-btn-repark{background:var(--glass);border:1px solid rgba(31,216,122,.2);border-radius:12px;padding:10px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;cursor:pointer;color:var(--acc);text-transform:uppercase;transition:all .2s}
    .car-btn-repark:hover{background:rgba(31,216,122,.1)}
    body.light .car-btn-repark{color:#059652;background:#ffffff;border-color:rgba(5,150,82,.2)}
    .car-btn-del{background:var(--glass);border:1px solid rgba(255,85,85,.18);border-radius:12px;padding:10px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;cursor:pointer;color:var(--red);text-transform:uppercase;transition:all .2s}
    .car-btn-del:hover{background:rgba(255,85,85,.08);border-color:var(--red)}
    .car-footnote{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center;margin-top:4px;line-height:1.4;opacity:.6}
    .car-spots-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px;padding:0 2px}
    .car-spots-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
    .car-spot{display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--border);border-radius:13px;padding:9px 10px 9px 12px;transition:border-color .15s}
    .car-spot.active{border-color:var(--acc)}
    body.light .car-spot{background:#f9fafb;border-color:rgba(0,0,0,0.08)}
    body.light .car-spot.active{border-color:#059652}
    .car-spot-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer}
    .car-spot-dot{font-size:16px;flex-shrink:0;width:22px;text-align:center}
    .car-spot-info{min-width:0;flex:1}
    .car-spot-name{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .car-spot.active .car-spot-name{color:var(--acc)}
    body.light .car-spot.active .car-spot-name{color:#059652}
    .car-spot-sub{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .car-spot-actions{display:flex;gap:6px;flex-shrink:0}
    .car-spot-act{width:36px;height:36px;border-radius:9px;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
    .car-spot-act:hover{border-color:var(--acc);color:var(--acc)}
    .car-spot-act.del{color:var(--red);border-color:rgba(255,85,85,.2)}
    .car-spot-act.del:hover{border-color:var(--red)}
    /* v243 */
    .car-name-note{font-family:var(--mono);font-size:11px;line-height:1.45;color:var(--amber);margin:0 0 10px}
    .car-wx{font-family:var(--mono);font-size:11.5px;line-height:1.6;text-align:center;color:var(--muted);margin:4px 0 12px}
    .car-wx:empty{display:none}
    .car-spot-act.del.confirm{width:auto;padding:0 10px;background:var(--red);border-color:var(--red);color:#fff;font-family:var(--mono);font-size:11px;font-weight:700}
    .car-add-btn{width:100%;background:var(--glass);border:1px dashed var(--border);border-radius:13px;padding:13px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--acc);cursor:pointer;transition:all .15s;text-transform:uppercase}
    .car-add-btn:hover{background:rgba(31,216,122,.08);border-color:var(--acc)}
    .car-add-btn:disabled{opacity:.5;cursor:not-allowed}
    body.light .car-add-btn{color:#059652}
    /* v242 (QA): centred, the card's Cancel/Save sat under the keyboard (it opens with the field focused). Top-aligned it
       stays in the visible half on a phone. */
    .car-name-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);z-index:10000;display:flex;align-items:flex-start;justify-content:center;padding:max(10vh,24px) 24px 24px}
    .car-name-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:18px;width:100%;max-width:340px;box-shadow:0 20px 60px var(--shadow)}
    .car-name-title{font-family:var(--bebas);font-size:20px;letter-spacing:.06em;color:var(--text);margin-bottom:12px;text-align:center}
    .car-name-input{width:100%;background:var(--glass);border:1px solid var(--border);border-radius:11px;padding:13px 14px;font-family:var(--mono);font-size:16px;color:var(--text);outline:none;box-sizing:border-box}
    .car-name-input:focus{border-color:var(--acc)}
    .car-name-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
    .car-name-cancel{background:var(--glass);border:1px solid var(--border);border-radius:11px;padding:13px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);cursor:pointer;text-transform:uppercase}
    .car-name-save{background:var(--acc2);border:none;border-radius:11px;padding:13px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;color:#000;cursor:pointer;text-transform:uppercase}

    /* ROUTE SHEET */
    .route-fields{display:flex;flex-direction:column}
    .route-field{position:relative;margin-bottom:8px}
    .route-field input{width:100%;box-sizing:border-box;background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:12px 14px 12px 36px;font-family:var(--mono);font-size:16px;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s}
    .route-field input:focus{border-color:var(--acc);box-shadow:0 0 0 2px rgba(31,216,122,.08)}
    .route-field input::placeholder{color:var(--muted)}
    .route-field-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:13px;pointer-events:none;z-index:1}
    .route-field.has-action input{padding-right:46px}
    .route-field-act{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:9px;color:var(--acc);cursor:pointer}
    .route-field-act:active{background:var(--glass)}
    body.field .route-field-act{color:#fff}
    .route-field .dropdown{top:calc(100% + 4px);z-index:1000}
    /* v241 (QA): an overlaid list covered the next field and the route button: tapping "To" ran the From search, tapping
       the button picked a result. In the route sheet the list now takes its own space and pushes the rest down. */
    #route-sheet .route-field .dropdown{position:static;margin-top:4px;box-shadow:0 8px 20px var(--shadow)}
    /* The field now grows with its list, so "top:50%" would centre the icons on field + list: pin them to the 44 px input. */
    #route-sheet .route-field-ico,#route-sheet .route-field-act{top:22px}
    body.light .route-field input{background:#fff;color:#111827;border-color:rgba(0,0,0,.12)}
    .btn-route{width:100%;background:var(--acc2);color:#000;border:none;border-radius:10px;padding:13px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px}
    .btn-route:disabled{opacity:.35;cursor:not-allowed}
    /* v241: no dimming for an incomplete form: the button works (it says what is missing), so it must not look disabled. */
    .route-field.route-field-invalid input,body.light .route-field.route-field-invalid input{border-color:var(--red);box-shadow:0 0 0 2px rgba(239,68,68,.15)}
    #route-map{height:250px;border-radius:14px;border:1px solid var(--border);overflow:hidden;background:var(--bg2);margin-top:12px;transition:opacity .2s}
    /* v223 (user report): Leaflet's zoom buttons (z-index 1000) sat ON TOP of the From/To suggestions (also 1000). An own
       stacking context keeps everything inside the map below the fields; a dark sea tone instead of the theme grey
       while the imagery loads. */
    #route-map{position:relative;z-index:0;isolation:isolate}
    .route-map-note{font-family:var(--mono);font-size:9px;color:var(--muted);margin:0 2px 10px;min-height:0}
    .route-map-note:empty{display:none}
    #route-map.leaflet-container{background:#16324a}
    #route-map.map-hidden{opacity:0;pointer-events:none;height:0;margin-top:0}
    .route-destination{margin-top:10px}
    .route-destination-main{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--text);padding:0 2px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .route-destination-main span{color:var(--acc);padding:0 5px}
    .route-summary{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:10px;display:flex;gap:8px}
    body.light .route-summary{background:#f6faf7;border-color:rgba(5,150,82,.16)}
    .route-stat{flex:1;text-align:center;min-width:0}
    .route-stat-val{font-family:var(--bebas);font-size:25px;line-height:1;color:var(--acc);letter-spacing:.03em;white-space:nowrap}
    body.light .route-stat-val{color:#059652}
    .route-stat-lbl{font-family:var(--mono);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-top:4px}
    .route-conditions-title{font-family:var(--mono);font-size:9px;font-weight:800;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;padding:12px 2px 6px}
    .waypoints{display:flex;flex-direction:column;gap:5px}
    .wp-card{background:var(--glass);border:1px solid var(--border);border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:9px;min-height:42px;box-sizing:border-box}
    body.light .wp-card{background:#fff;border-color:rgba(0,0,0,.08)}
    .wp-card.wp-danger{border-color:rgba(255,85,85,.35);background:rgba(255,85,85,.04)}
    .wp-card.wp-caution{border-color:rgba(255,194,71,.3);background:rgba(255,194,71,.04)}
    .wp-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
    .wp-dot.safe{background:var(--acc)}.wp-dot.caution{background:var(--amber)}.wp-dot.danger{background:var(--red)}
    /* v224 (user report): the badge sat in column 2, whose start depended on the label width ("START" vs "+101 km · ~18:31"),
       so DRY ROAD / WET jumped sideways from card to card. One column: label, conditions, badge — always the same x. */
    .wp-info{flex:1;min-width:0;display:grid;grid-template-columns:1fr;align-items:center;row-gap:2px}
    .wp-name{font-family:var(--mono);font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .wp-km{font-family:var(--mono);font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .wp-badge{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.05em;padding:2px 5px;border-radius:4px;text-transform:uppercase;margin:0 0 0 -5px;display:inline-block;grid-column:1;justify-self:start}   /* v223: -5px so the badge TEXT lines up with the line above (its pale background is almost invisible in light mode) */
    .wp-badge.safe{background:rgba(31,216,122,.1);color:var(--acc)}
    .wp-badge.caution{background:rgba(255,194,71,.12);color:var(--amber)}
    .wp-badge.danger{background:rgba(255,85,85,.12);color:var(--red)}
    .wp-weather{display:flex;align-items:center;gap:8px;text-align:right;flex-shrink:0}
    .wp-temp{font-family:var(--bebas);font-size:20px;line-height:1;letter-spacing:.03em}
    .wp-wind{font-family:var(--mono);font-size:15px;line-height:1}
    .route-map-icon{background:transparent!important;border:0!important}
    .route-temp-marker{width:28px;height:28px;border-radius:50%;background:var(--marker-col);color:#06110b;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;font-weight:900;border:2px solid rgba(0,0,0,.42);box-shadow:0 2px 6px rgba(0,0,0,.22)}
    .route-endpoint{width:12px;height:12px;border-radius:50%;border:2px solid #07110b;box-shadow:0 1px 5px rgba(0,0,0,.35)}
    .route-endpoint-start{background:#1fd87a}.route-endpoint-end{background:#ff5555}
    .route-nav-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--acc2);color:#000;border:none;border-radius:11px;padding:13px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-decoration:none;margin:8px 0 4px;box-shadow:0 4px 16px rgba(0,200,80,.16)}
    .route-nav-btn:active{transform:scale(.99)}

    /* HOUR MODAL */
    /* MUST be above .sheet-overlay: hour-modal opens from inside sheets (openHourModal), and at 500 < 610 it would land UNDER the sheet, so tapping an hour tile would do nothing visible. */
    .modal-overlay{position:fixed;top:var(--top-bar-h);left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);z-index:620;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease;backdrop-filter:blur(4px)}
    .modal-overlay.hidden{display:none!important}
    .modal-box{background:var(--bg2);border:1px solid var(--border);border-radius:22px 22px 0 0;padding:16px 16px calc(36px + var(--sab));width:100%;max-width:520px;animation:slideUp .25s ease;position:relative;max-height:85dvh;overflow-y:auto}
    body.light .modal-box{background:#ffffff}
    .modal-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 12px}
    .modal-time{font-family:var(--bebas);font-size:26px;letter-spacing:.06em;color:var(--acc);margin-bottom:2px}
    body.light .modal-time{color:#059652}
    .modal-desc{font-size:13px;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:8px}
    .modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
    .modal-item{background:var(--glass);border:1px solid var(--border);border-radius:11px;padding:11px 12px}
    body.light .modal-item{background:#f9fafb}
    .modal-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
    body.light .modal-lbl{color:#374151}
    .modal-val{font-family:var(--bebas);font-size:24px;letter-spacing:.03em;line-height:1}
    .modal-val.hi{color:var(--acc)}
    body.light .modal-val.hi{color:#059652}
    .modal-unit{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:1px}
    .modal-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer}
    .modal-nav{position:absolute;top:30px;right:54px;display:none;gap:8px}
    .modal-overlay.has-nav .modal-nav{display:flex}
    .modal-step{width:40px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--glass);color:var(--text);font-size:22px;line-height:1;cursor:pointer}
    .modal-step:disabled{opacity:.3;cursor:default}

    /* RANKING SHEET */
    /* ranking has its own scroll container instead of .sheet-body, so flex:1 and min-height:0 must be repeated here, otherwise the list stretches the sheet instead of scrolling inside it. */
    .ranking-list{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:10px 0 20px;flex:1 1 auto;min-height:0}
    .ranking-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;margin-bottom:5px;background:var(--glass);border:1px solid var(--border);cursor:pointer;transition:transform .15s}
    .ranking-item:hover{transform:translateX(4px)}
    body.light .ranking-item{background:#f9fafb;border-color:rgba(0,0,0,0.08)}
    .ranking-pos{font-family:var(--bebas);font-size:18px;color:var(--muted);width:24px;text-align:center;flex-shrink:0}
    .ranking-pos.gold{color:#ffd700}.ranking-pos.silver{color:#c0c0c0}.ranking-pos.bronze{color:#cd7f32}
    .ranking-city{flex:1}
    .ranking-city-name{font-family:var(--bebas);font-size:18px;letter-spacing:.04em;line-height:1}
    .ranking-city-county{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:1px}
    .ranking-temp{font-family:var(--bebas);font-size:26px;letter-spacing:.02em;text-align:right;flex-shrink:0}

    /* EMPTY / LOADING */
    .empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:50px 20px;text-align:center;animation:fadeUp .5s ease both}
    .empty-glyph{font-size:56px;opacity:.2;filter:grayscale(1)}
    .empty-title{font-family:var(--bebas);font-size:24px;letter-spacing:.08em;color:var(--muted)}
    .empty-sub{font-size:13px;color:var(--muted);opacity:.6;max-width:240px;line-height:1.6}
    .loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 20px}
    .spin{width:34px;height:34px;border:2px solid var(--border);border-top-color:var(--acc);border-radius:50%;animation:spin .7s linear infinite}
    .loading p{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.1em}

    /* ANIMATIONS */
    @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
    @keyframes spin{to{transform:rotate(360deg)}}

    /* LEAFLET */
    .leaflet-tile-pane{filter:none}
    ::-webkit-scrollbar{width:4px;height:4px;background:var(--bg)}
    ::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
    .trend-tabs{display:flex;gap:6px;margin-bottom:8px}
    .trend-tab{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:8px 10px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:all .15s}
    .trend-tab.active{background:var(--glass);border-color:var(--acc);color:var(--acc)}
    body.light .trend-tab.active{color:#059652;border-color:#059652}
    .hidden{display:none!important}
  
    /* ════════════════════════════════════════════════════════════════════
       v27 ADDITIONS — climb advisory, car photos, my-locations, p-trend
       (matches existing tokens: --acc/--amber/--red, glass cards, mono labels)
       ════════════════════════════════════════════════════════════════════ */

    /* ── Wind-at-Height · Climb Safety Advisory ───────────────────────── */
    .climb-box{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:16px 14px;margin-bottom:14px;text-align:center;transition:border-color .2s,background .2s}
    .climb-box.safe{border-color:rgba(31,216,122,0.35);background:rgba(31,216,122,0.05)}
    .climb-box.caution{border-color:rgba(255,194,71,0.4);background:rgba(255,194,71,0.06)}
    .climb-box.stop{border-color:rgba(255,85,85,0.45);background:rgba(255,85,85,0.07)}
    body.light .climb-box{background:#f9fafb;border-color:rgba(0,0,0,0.08)}
    body.light .climb-box.safe{background:rgba(5,150,82,0.08);border-color:rgba(5,150,82,0.3)}
    body.light .climb-box.caution{background:rgba(217,119,6,0.08);border-color:rgba(217,119,6,0.3)}
    body.light .climb-box.stop{background:rgba(220,38,38,0.08);border-color:rgba(220,38,38,0.3)}
    .climb-tabs{display:flex;gap:6px;margin-bottom:14px}
    .climb-htab{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:8px 4px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);cursor:pointer;transition:all .15s}
    .climb-htab.active{background:var(--glass);border-color:var(--acc);color:var(--acc)}
    body.light .climb-htab.active{color:#059652;border-color:#059652}
    .climb-icon{font-size:40px;line-height:1;margin-bottom:6px}
    .climb-verdict-lbl{font-family:var(--bebas);font-size:30px;letter-spacing:.04em;color:var(--text);margin-bottom:4px}
    .climb-box.safe .climb-verdict-lbl{color:var(--acc)}
    .climb-box.caution .climb-verdict-lbl{color:var(--amber)}
    .climb-box.stop .climb-verdict-lbl{color:var(--red)}
    body.light .climb-box.safe .climb-verdict-lbl{color:#059652}
    .climb-at{font-family:var(--mono);font-size:12px;color:var(--text);margin-bottom:8px}
    .climb-gust-note{color:var(--muted)}
    .climb-reasons{list-style:none;padding:0;margin:0 auto 4px;text-align:left;display:inline-block}
    .climb-reasons li{font-family:var(--mono);font-size:11px;color:var(--muted);padding:3px 0 3px 16px;position:relative}
    .climb-reasons li::before{content:"\203A";position:absolute;left:3px;color:var(--acc)}
    .climb-box.caution .climb-reasons li::before{color:var(--amber)}
    .climb-box.stop .climb-reasons li::before{color:var(--red)}
    .climb-thresh{font-family:var(--mono);font-size:9px;color:var(--muted);line-height:1.6;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);opacity:.85}
    .climb-disclaimer{font-family:var(--mono);font-size:9px;color:var(--muted);line-height:1.6;margin-top:8px;opacity:.7}

    /* ── My Car · photo thumbnail + fullscreen viewer ─────────────────── */
    .car-spot-thumb{width:38px;height:38px;border-radius:8px;object-fit:cover;flex-shrink:0;border:1px solid var(--border);background:var(--bg2)}
    .car-photo-overlay{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,0.92);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:20px;backdrop-filter:blur(6px)}
    .car-photo-full{max-width:100%;max-height:78vh;border-radius:14px;object-fit:contain;box-shadow:0 10px 40px rgba(0,0,0,0.6)}
    .car-photo-del{background:transparent;border:1px solid rgba(255,85,85,0.4);color:var(--red);border-radius:11px;padding:11px 18px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:all .15s}
    .car-photo-del:hover{background:rgba(255,85,85,0.12);border-color:var(--red)}
    .car-photo-close{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}

    /* ── Recent / My Locations list ───────────────────────────────────── */
    .myloc-item{display:flex;align-items:center;gap:12px;background:var(--glass);border:1px solid var(--border);border-radius:13px;padding:11px 14px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s}
    .myloc-item:hover{border-color:var(--acc)}
    body.light .myloc-item{background:#f9fafb;border-color:rgba(0,0,0,0.08)}
    body.light .myloc-item:hover{border-color:#059652}
    .myloc-info{flex:1;min-width:0}
    .myloc-name{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .myloc-meta{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .myloc-temp{font-family:var(--bebas);font-size:30px;flex-shrink:0;line-height:1}

    /* ── Pressure trend tabs/panes ────────────────────────────────────── */
    .ptrend-tab{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:7px 6px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:all .15s}
    .ptrend-tab.active{background:var(--glass);border-color:var(--acc);color:var(--acc)}
    body.light .ptrend-tab.active{color:#059652;border-color:#059652}
    .ppane,.trend-pane{width:100%}

    /* ── Eircode hint row in search dropdown (non-clickable) ──────────── */
    .dd-eircode{cursor:default}
    .dd-eircode:hover{background:transparent}

    /* ── Country switcher in search bar (v32) ─────────────────────────── */
    .search-wrap input{padding-right:74px}
    .country-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--glass);border:1px solid var(--border);border-radius:9px;padding:6px 8px;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;gap:5px;color:var(--text);z-index:2;transition:border-color .15s}
    .country-btn:active{transform:translateY(-50%) scale(.95)}
    .country-btn .cc{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
    body.light .country-btn{background:#f3f4f6;border-color:rgba(0,0,0,0.1)}
    .country-dd{position:absolute;top:calc(100% + 5px);right:0;width:240px;max-height:330px;overflow-y:auto;background:var(--bg2);border:1px solid var(--border);border-radius:12px;z-index:400;box-shadow:0 20px 50px var(--shadow)}
    .country-opt{display:flex;align-items:center;gap:11px;padding:11px 14px;cursor:pointer;font-size:13px;color:var(--text);border-bottom:1px solid var(--border);transition:background .12s}
    .country-opt:last-child{border-bottom:none}
    .country-opt:hover{background:var(--glass)}
    .country-opt.active{color:var(--acc)}
    body.light .country-opt.active{color:#059652}
    .country-opt .flag{font-size:17px;line-height:1}
    .country-opt .ccode{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--muted)}

    /* ── Country switcher: worldwide filter (v33) ─────────────────────── */
    .country-dd{overflow:hidden;padding:8px;width:260px}
    #country-filter{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:9px;padding:9px 12px;font-family:var(--mono);font-size:12px;color:var(--text);outline:none;margin-bottom:6px;box-sizing:border-box}
    #country-filter:focus{border-color:var(--acc)}
    #country-filter::placeholder{color:var(--muted)}
    #country-list{max-height:280px;overflow-y:auto}
    .country-hint{font-family:var(--mono);font-size:10px;color:var(--muted);padding:10px 6px;text-align:center;line-height:1.5}

    /* ════════════════════════════════════════════════════════════════════
       v34 REDESIGN — calm graphite base, sky gradient theme, scrollable home
       ════════════════════════════════════════════════════════════════════ */

    /* Neutralise the green atmosphere wash (kept subtle, not Irish-neon) */
    .atmo-orb1{background:radial-gradient(circle,rgba(120,160,210,0.06),transparent 68%)!important}
    .atmo-orb2{background:radial-gradient(circle,rgba(90,130,180,0.04),transparent 68%)!important}
    .atmo-grid{background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px)!important}
    .hero-card::before{background:radial-gradient(circle,rgba(120,160,210,0.10),transparent 70%)!important}

    /* ── Sky gradient theme (weather-responsive via existing wx- classes) ── */
    body.gradient{background:linear-gradient(180deg,#0e1a30 0%,#0b1018 55%,#0b0f14 100%)}
    body.gradient.wx-clear{background:linear-gradient(180deg,#123056 0%,#0b1018 60%)}
    body.gradient.wx-cloud{background:linear-gradient(180deg,#16202e 0%,#0b0f14 60%)}
    body.gradient.wx-rain{background:linear-gradient(180deg,#11202e 0%,#0b0f14 60%)}
    body.gradient.wx-storm{background:linear-gradient(180deg,#191a2e 0%,#0b0f14 55%)}
    body.gradient.wx-fog{background:linear-gradient(180deg,#1b212a 0%,#0b0f14 60%)}
    body.gradient.wx-snow{background:linear-gradient(180deg,#1a2433 0%,#0b0f14 60%)}
    body.gradient #top-bar{background:transparent;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
    body.gradient .hero-card{background:rgba(255,255,255,0.06)}
    body.gradient .atmo-orb1{background:radial-gradient(circle,rgba(120,170,255,0.10),transparent 68%)!important}

    /* ── Hero (stronger hierarchy, higher contrast) ───────────────────── */
    .hero-head{display:flex;justify-content:space-between;align-items:flex-start}
    .hero-meta{text-align:right}
    .hero-meta-date{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.04em}
    .hero-main{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
    .hero-temp{font-family:var(--bebas);font-size:clamp(76px,20vw,112px);line-height:.85;letter-spacing:-.01em}
    .hero-temp sup{font-size:.30em;vertical-align:super;color:var(--muted)}
    .hero-cond{text-align:right;flex-shrink:0}
    .hero-cond .hero-icon{font-size:46px;line-height:1}
    .hero-cond .hero-desc{font-family:var(--body);font-size:14px;font-weight:600;color:var(--text);margin-top:2px;max-width:140px;margin-left:auto}
    .hero-sub{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:8px;letter-spacing:.02em}

    /* ── Details grid (6 stats) ───────────────────────────────────────── */
    .wx-details{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden}
    .wx-d{background:var(--bg2);padding:12px 10px;display:flex;flex-direction:column;gap:3px;text-align:left;border:none;color:var(--text);font:inherit}
    body.gradient .wx-d{background:rgba(255,255,255,0.05)}
    body.light .wx-d{background:#ffffff}
    .wx-d-lbl{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:5px}
    .wx-d-val{font-family:var(--bebas);font-size:26px;line-height:1;color:var(--text);letter-spacing:.02em}
    .wx-d-sub{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.04em}
    .wx-d.tappable{cursor:pointer;-webkit-tap-highlight-color:transparent}
    .wx-d.tappable:active{background:var(--glass)}
    .unit-pill{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--acc);border:1px solid var(--acc);border-radius:6px;padding:1px 5px;margin-left:2px;vertical-align:middle}
    body.light .unit-pill{color:#059652;border-color:#059652}
    .wx-sun{grid-column:1/-1;background:var(--bg2);padding:10px 12px;display:flex;justify-content:center;gap:22px;font-family:var(--mono);font-size:12px;color:var(--muted)}
    body.gradient .wx-sun{background:rgba(255,255,255,0.05)}
    body.light .wx-sun{background:#ffffff}

    /* ── Section labels ───────────────────────────────────────────────── */
    .sec-label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:6px 2px 0}

    /* ── Inline 7-day list ────────────────────────────────────────────── */
    .days-list{display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--border);border-radius:16px;overflow:hidden}
    body.light .days-list{background:#ffffff;border-color:rgba(0,0,0,0.08)}
    body.gradient .days-list{background:rgba(255,255,255,0.05)}
    .day-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border)}
    /* v243 (QA): unscoped, this also took the bottom border off the last CARD in the 7-day sheet (.week-wrap). */
    .days-list .day-row:last-child{border-bottom:none}
    .day-name{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--text);width:42px;flex-shrink:0}
    .day-icon{font-size:20px;width:26px;text-align:center;flex-shrink:0}
    .day-prob{font-family:var(--mono);font-size:10px;color:var(--blue);width:34px;flex-shrink:0;text-align:right}
    .dr-bar{flex:1;display:flex;align-items:center;gap:9px;min-width:0}
    .day-min{font-family:var(--bebas);font-size:18px;color:var(--muted);min-width:32px;text-align:right;flex-shrink:0}
    .day-max{font-family:var(--bebas);font-size:18px;color:var(--text);min-width:32px;text-align:left;flex-shrink:0}
    .day-track{flex:1;height:6px;border-radius:3px;background:var(--border);position:relative;min-width:30px;overflow:hidden}
    .day-fill{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--amber))}
    body.field .day-track{background:#2b2b2b;border:1px solid rgba(255,255,255,.55)}
    body.field .day-fill{background:#ffffff}
    body.field .day-min{color:#c8c8c8}

    /* ── Theme picker popover ─────────────────────────────────────────── */
    .theme-dd{position:absolute;top:calc(var(--top-bar-h) - 56px);right:14px;width:200px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;z-index:700;box-shadow:0 20px 50px var(--shadow);overflow:hidden;padding:6px}
    body.light .theme-dd{background:#ffffff}
    .theme-opt{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer;font-size:13px;color:var(--text);transition:background .12s}
    .theme-opt:hover{background:var(--glass)}
    .theme-opt.active{background:var(--glass);color:var(--acc)}
    body.light .theme-opt.active{color:#059652}
    .theme-opt .t-emoji{font-size:17px}
    .theme-opt .t-sub{margin-left:auto;font-family:var(--mono);font-size:9px;color:var(--muted)}

    /* ════════════════════════════════════════════════════════════════════
       v48 HOME REDESIGN — hero+, rain nowcast, Rainbow score, quick tiles
       ════════════════════════════════════════════════════════════════════ */

    /* Block pull-to-refresh / page reload while scrolling the home feed */
    html,body{overscroll-behavior:none;overscroll-behavior-y:none}
    main{overscroll-behavior:contain}

    /* ── HERO v48 (icon + temp + chevron, compact metric strip) ───────────── */
    .hero-v48{padding:14px 16px 12px}
    .hero-v48 .hero-main{display:flex;align-items:center;gap:14px;margin-top:3px}
    .hero-glyph{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1;flex-shrink:0;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
    .hg-emoji{font-size:26px;line-height:1}
    .hg-sheep{width:100px;height:80px;object-fit:contain;object-position:bottom center;display:block}
    .hero-glyph.hg-noimg .hg-emoji{font-size:54px}
    @media (max-width:340px){.hg-sheep{width:84px;height:68px}.hg-emoji{font-size:22px}}
    .hero-tw{flex:1;min-width:0}
    .hero-v48 .hero-temp{font-family:var(--bebas);font-size:clamp(44px,12vw,66px);line-height:.85;letter-spacing:-.01em}
    .hero-v48 .hero-temp sup{font-size:.34em;vertical-align:super;color:var(--muted)}
    .hero-v48 .hero-feels{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:2px}
    /* v244 */
    .hero-yday{font-family:var(--mono);font-size:10.5px;font-weight:700;margin-top:3px;line-height:1.3;white-space:nowrap}
    .hero-yday:empty{display:none}
    .hero-v48 .hero-desc{font-family:var(--body);font-size:15px;font-weight:600;color:var(--text);margin-top:1px;text-align:left;max-width:none}
    .hero-expand{flex-shrink:0;align-self:center;background:var(--glass);border:1px solid var(--border);color:var(--muted);width:34px;height:34px;border-radius:10px;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;-webkit-tap-highlight-color:transparent}
    .hero-expand:active{transform:scale(.92)}
    .hero-expand:hover{border-color:var(--acc);color:var(--acc)}
    .hero-strip{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:12px;padding-top:11px;border-top:1px solid var(--border);flex-wrap:wrap}
    .hero-strip-i{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.02em;white-space:nowrap}
    body.field .hero-strip-i{color:#fff}
    /* v247 (bonus): daylight line */
    .hero-sun{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.02em;margin-top:8px;line-height:1.4}
    .hero-sun:empty{display:none}
    body.field .hero-sun{color:#fff}

    /* ── RAIN NOWCAST CARD ─────────────────────────────────────────────────── */
    .nowcast-card{display:block;width:100%;text-align:left;background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:14px 16px 12px;cursor:pointer;color:var(--text);box-shadow:0 2px 10px var(--shadow);transition:border-color .15s,transform .12s;-webkit-tap-highlight-color:transparent}
    .nowcast-card:active{transform:scale(.985)}
    .nowcast-card.nc-incoming{border-color:rgba(255,194,71,.35)}
    .nowcast-card.nc-raining{border-color:rgba(77,184,255,.35)}
    .nowcast-card.nc-drizzle{border-color:rgba(255,194,71,.28)}
    body.light .nowcast-card{background:#ffffff;border-color:rgba(0,0,0,.08)}
    /* v245 (bonus): Tomorrow card, evenings */
    .tmrw-card{display:block;width:100%;text-align:left;background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:12px 14px;margin:10px 0 4px;cursor:pointer;color:var(--text);box-shadow:0 2px 10px var(--shadow);font:inherit;-webkit-tap-highlight-color:transparent}
    body.light .tmrw-card{background:#ffffff;border-color:rgba(0,0,0,.08)}
    .tmrw-top{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
    .tmrw-main{display:flex;align-items:center;gap:10px;margin-top:6px}
    .tmrw-ico{font-size:26px;line-height:1;flex-shrink:0}
    .tmrw-line{flex:1;min-width:0;font-family:var(--body);font-size:14px;font-weight:600;line-height:1.3}
    .tmrw-t{font-family:var(--mono);font-size:13px;color:var(--muted);white-space:nowrap}
    .tmrw-t b{font-size:18px}
    .tmrw-extra{margin-top:8px;font-family:var(--mono);font-size:11px;line-height:1.65;color:var(--muted)}
    body.gradient .nowcast-card{background:rgba(255,255,255,.05)}
    .nc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
    .nc-title{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:.04em;line-height:1}
    .nc-sub{font-family:var(--body);font-size:13px;color:var(--muted);margin-top:4px}
    .nc-icon{font-size:34px;line-height:1;flex-shrink:0}
    .nc-bars{display:flex;align-items:flex-end;gap:2px;height:46px;margin-top:12px}
    .nc-bar{flex:1;border-radius:2px 2px 0 0;min-height:3px}
    .nc-labels{display:flex;justify-content:space-between;margin-top:5px}
    .nc-labels span{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.04em}

    /* ── RAINBOW SCORE CARD ────────────────────────────────────────────────── */
    .score-card{background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:14px 16px 16px;box-shadow:0 2px 10px var(--shadow)}
    body.light .score-card{background:#ffffff;border-color:rgba(0,0,0,.08)}
    body.gradient .score-card{background:rgba(255,255,255,.05)}
    .score-title{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
    body.light .score-title{color:#374151}
    .score-body{display:flex;align-items:center;gap:18px;margin-top:12px}
    .rb-gauge{position:relative;width:108px;height:108px;flex-shrink:0}
    .rb-ring{position:absolute;inset:0;border-radius:50%;
      background:conic-gradient(from 0deg,#ff5555,#ffc247,#1fd87a,#00d0ff,#4db8ff,#b06bff,#ff5b8a,#ff5555);
      /* v223 (user report): the ring was always full, so 78 looked the same as 20. The arc now covers --pct of the circle
         (a conic mask intersected with the ring mask), over a faint full-circle track. */
      -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 13px),#000 calc(100% - 12px)),conic-gradient(#000 calc(var(--pct,100)*1%),transparent 0);
      -webkit-mask-composite:source-in;
      mask:radial-gradient(farthest-side,transparent calc(100% - 13px),#000 calc(100% - 12px)),conic-gradient(#000 calc(var(--pct,100)*1%),transparent 0);
      mask-composite:intersect;
      filter:saturate(1.05)}
    .rb-track{position:absolute;inset:0;border-radius:50%;background:var(--border);opacity:.55;
      -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 13px),#000 calc(100% - 12px));
      mask:radial-gradient(farthest-side,transparent calc(100% - 13px),#000 calc(100% - 12px))}
    .rb-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
    .rb-num{font-family:var(--bebas);font-size:42px;line-height:.85;letter-spacing:.02em}
    .rb-den{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.06em}
    .score-acts{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
    .score-act{display:flex;align-items:center;gap:8px;padding:6px 6px;border-radius:9px;cursor:pointer;transition:background .12s;-webkit-tap-highlight-color:transparent}
    .score-act:active{background:var(--glass)}
    .score-act:hover{background:var(--glass)}
    .score-act-name{flex:1;font-family:var(--body);font-size:13px;font-weight:500;color:var(--text)}
    .score-act-rate{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
    .score-act-dot{font-size:11px;line-height:1;flex-shrink:0}

    /* ── HERO VERDICT (human headline) ─────────────────────────────────────── */
    .hero-verdict{margin-top:10px;display:flex;flex-direction:column;gap:1px}
    .hv-line{font-family:var(--body);font-size:14px;font-weight:700;color:var(--text);line-height:1.25}
    .hv-tail{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.02em}
    /* The quip is DECORATION: smaller, italic, muted. It must read as clearly subordinate to the verdict, so nobody mistakes a joke for the forecast. */
    .hv-quip{font-family:var(--body);font-style:italic;font-size:11px;color:var(--muted);opacity:.72;line-height:1.3;margin-top:3px}
    body.field .hv-quip{color:#cfd6dd;opacity:.85}
    body.field .hv-line{color:#fff}

    /* ── RAINBOW SCORE (signature) + WHY breakdown ─────────────────────────── */
    .score-hero{margin-bottom:2px}
    .score-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
    .why-btn{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--glass);border:1px solid var(--border);border-radius:999px;padding:4px 11px;cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0;transition:color .12s,border-color .12s}
    .why-btn:active{transform:scale(.96)}
    .why-btn[aria-expanded="true"]{color:var(--text);border-color:var(--acc)}
    .score-verdict{font-family:var(--bebas);font-size:26px;letter-spacing:.03em;line-height:1}
    .score-sub{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:5px;line-height:1.5}
    .score-why{margin-top:13px;padding-top:13px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:9px;animation:fadeUp .22s ease both}
    .why-row{display:flex;align-items:center;gap:10px}
    .why-name{font-family:var(--body);font-size:13px;font-weight:600;color:var(--text);width:62px;flex-shrink:0}
    .why-bar{flex:1;height:7px;border-radius:4px;background:var(--glass);border:1px solid var(--border);overflow:hidden}
    .why-fill{display:block;height:100%;border-radius:4px}
    .why-val{font-family:var(--mono);font-size:12px;font-weight:700;width:24px;text-align:right;flex-shrink:0}
    .why-foot{font-family:var(--mono);font-size:9px;color:var(--muted);opacity:.7;letter-spacing:.04em;margin-top:2px}
    body.field .why-name{color:#fff}

    /* ── QUICK TILES (Laundry · Pollen · UV · Marine) ──────────────────────── */
    .quick-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
    .quick-tile{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:12px 5px 11px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;color:var(--text);box-shadow:0 2px 8px var(--shadow);transition:border-color .15s,transform .12s;-webkit-tap-highlight-color:transparent;min-width:0}
    .quick-tile:active{transform:scale(.95)}
    .quick-tile:hover{border-color:rgba(31,216,122,.3)}
    body.light .quick-tile{background:#ffffff;border-color:rgba(0,0,0,.08)}
    body.gradient .quick-tile{background:rgba(255,255,255,.05)}
    .quick-tile--dim{opacity:.5}
    .quick-tile-ico{font-size:22px;line-height:1}
    .quick-tile-lbl{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
    .quick-tile-val{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center}
    body.field .quick-tile-val{color:#fff!important}

/* ── SEO FOOTER (static crawlable content) ────────────────────────────── */
.seo-footer{max-width:520px;margin:8px auto 0;padding:22px 18px 28px;border-top:1px solid var(--border);text-align:center}
.seo-footer h1{font-family:var(--bebas);font-size:20px;font-weight:400;letter-spacing:.04em;color:var(--muted);line-height:1.15;margin:0 0 12px;text-transform:none}
.seo-footer p{font-family:var(--body);font-size:11.5px;line-height:1.7;color:var(--muted);margin:0 0 10px;opacity:.92}
.seo-footer .seo-counties{font-size:11px;opacity:.82}
.seo-footer .seo-tag{font-family:var(--mono);font-size:9px;letter-spacing:.06em;opacity:.78;margin-bottom:0}
body.light .seo-footer h1,body.light .seo-footer p{color:#4b5563}

/* ── v85: PROGRESSIVE DISCLOSURE (calm default) ─────────────────────────────── */
.tools-toggle{-webkit-appearance:none;appearance:none;display:flex;align-items:center;gap:12px;width:100%;
  margin:22px 0 4px;padding:15px 16px;background:var(--glass);border:1px solid var(--border);
  border-radius:16px;cursor:pointer;color:var(--text);box-shadow:0 2px 10px var(--shadow);
  -webkit-tap-highlight-color:transparent;transition:border-color .18s,background .18s;text-align:left}
.tools-toggle:active{border-color:var(--acc)}
body.light .tools-toggle{background:#fff;border-color:rgba(0,0,0,.08)}
body.field .tools-toggle{background:#111111;border:2px solid #fff}
.tools-toggle-ico{font-size:20px;flex-shrink:0;line-height:1}
.tools-toggle-txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.tools-toggle-lbl{font-family:var(--bebas);font-size:18px;letter-spacing:.05em;color:var(--text);line-height:1}
.tools-toggle-hint{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--muted);opacity:.72;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tools-chev{font-family:var(--bebas);font-size:26px;color:var(--acc);line-height:1;flex-shrink:0;
  transition:transform .2s ease;transform:rotate(90deg)}
.tools-toggle.open .tools-chev{transform:rotate(-90deg)}
.tools-wrap{display:none}
.tools-wrap.open{display:block;animation:fadeUp .25s ease both}

/* ── v85: PERF-LITE (low-end devices / reduced-motion) ──────────────────────── */
/* Kills every decorative + continuous animation; app stays fully functional.    */
.perf-lite *,
.perf-lite *::before,
.perf-lite *::after{
  animation-duration:.001s!important;
  animation-iteration-count:1!important;
  animation-delay:0s!important;
  transition-duration:.001s!important;
}
.perf-lite .atmo,
.perf-lite .atmo *,
.perf-lite .atmo::before,
.perf-lite .atmo::after{animation:none!important;opacity:.35!important}
.perf-lite .rb-ring{animation:none!important}

/* ── HEADLINE BAR (v87) ────────────────────────────────────────────────────── */
.hl-bar{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  border:1px solid transparent;border-radius:12px;padding:9px 12px;margin:0 0 10px;
  font:inherit;animation:fadeUp .3s ease both;-webkit-tap-highlight-color:transparent}
button.hl-bar{cursor:pointer}
button.hl-bar:active{transform:scale(.985)}
.hl-ico{font-size:15px;line-height:1;flex-shrink:0}
/* The warning bar used to clip its own text: "Gusts to 20" fit but "Thunderstorm" didn't ("THUNDERSTOR…"), clipping the only word carrying meaning. The text gets flex:1 and may wrap to two lines; the hour range is no longer glued to the right edge, and the bar grows vertically instead of clipping. */
.hl-txt{font-family:var(--bebas);font-size:16px;letter-spacing:.05em;line-height:1.15;
  flex:1 1 auto;min-width:0;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hl-time{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--muted);
  flex-shrink:0;white-space:nowrap}
.hl-chev{font-family:var(--mono);font-size:13px;color:var(--muted);flex-shrink:0;line-height:1}

.hl-red{background:rgba(255,85,85,.12);border-color:rgba(255,85,85,.34)}
.hl-red{background:color-mix(in srgb,var(--red) 13%,transparent);border-color:color-mix(in srgb,var(--red) 34%,transparent)}
.hl-red .hl-txt{color:var(--red)}

.hl-amber{background:rgba(255,194,71,.12);border-color:rgba(255,194,71,.34)}
.hl-amber{background:color-mix(in srgb,var(--amber) 13%,transparent);border-color:color-mix(in srgb,var(--amber) 34%,transparent)}
.hl-amber .hl-txt{color:var(--amber)}

.hl-green{padding:7px 12px;background:rgba(31,216,122,.08);border-color:rgba(31,216,122,.22)}
.hl-green{background:color-mix(in srgb,var(--acc) 8%,transparent);border-color:color-mix(in srgb,var(--acc) 22%,transparent)}
.hl-green .hl-ico{font-size:13px}
.hl-green .hl-txt{font-size:14px;color:var(--acc);opacity:.9}

@keyframes hlFlash{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}30%{box-shadow:0 0 0 3px var(--amber)}}
.h-card.hl-flash{animation:hlFlash 1.2s ease}


/* v157 polish: stronger touch targets, keyboard focus and compact mobile header. */
/* touch-action was only on buttons, so the rest of the page still zoomed on double-tap (and with work gloves a double tap happens by itself). Set globally on body: kills double-tap zoom without touching scroll or pinch (pinch is blocked separately by the 'gesturestart' listener). ALL text inputs are 16px: below that, iOS Safari zooms in on focus and never zooms back out. */
body{touch-action:manipulation}
button,.fav-chip,.dd-item,.country-opt,.quick-tile,.tools-toggle{touch-action:manipulation}
.btn-icon{min-width:40px;min-height:40px;width:40px;height:40px}
.country-btn{min-height:38px}
:where(button,a,input):focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (max-width:380px){
  .hdr{padding-left:10px;padding-right:10px;gap:5px}
  .hdr-right{gap:4px}
  .btn-icon{min-width:38px;width:38px;height:38px;font-size:14px}
  .logo{gap:7px}
  .logo-text{font-size:20px}
  .logo-sub{font-size:8px}
  .search-bar{padding-left:12px;padding-right:12px}
}
@media (min-width:521px){
  #top-bar{box-shadow:0 8px 30px rgba(0,0,0,.12)}
}

    @media (max-width:380px){
      #route-sheet .sheet-body{padding-left:10px;padding-right:10px}
      #route-sheet .route-fields{grid-template-columns:1fr}
      #route-sheet #route-map{height:28dvh;min-height:160px;max-height:200px}
      .wp-info{grid-template-columns:1fr}
      .wp-km{grid-column:1}
      .wp-badge{grid-column:1}
    }

/* v223: rain / pressure alerts opt-in card (replaces the permission prompt that fired on any touch) */
#alerts-optin{position:fixed;left:12px;right:12px;bottom:calc(84px + var(--sab, 0px));z-index:9997;display:flex;flex-direction:column;gap:10px;
  background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:12px 14px;box-shadow:0 10px 30px var(--shadow);animation:fadeUp .25s ease both}
#alerts-optin .aoi-txt{display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.35}
#alerts-optin .aoi-txt span{color:var(--muted);font-size:12px}
#alerts-optin .aoi-btns{display:flex;gap:8px;justify-content:flex-end}
#alerts-optin button{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.04em;border-radius:10px;padding:8px 14px;border:1px solid var(--border);background:transparent;color:inherit;cursor:pointer}
#alerts-optin .aoi-yes{background:var(--acc);border-color:var(--acc);color:#04210f}
body.light #alerts-optin{background:#fff}
    /* v260: one-line map attribution on phones (it wrapped to two lines and covered the bottom of the route map) */
    /* v297: forecast rain map in the Rain outlook sheet */
    #rainmap-wrap{margin:6px 14px 4px}
    .rm-modes{display:flex;gap:6px;margin-bottom:8px}
    .rm-mode{flex:1;background:var(--bg2);color:var(--muted);border:1px solid var(--border);border-radius:10px;padding:8px 6px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
    .rm-mode.active{background:var(--acc);color:#000;border-color:var(--acc)}
    .rm-lock{font-size:10px}
    #rain-map{position:relative;z-index:0;isolation:isolate;height:44dvh;min-height:240px;max-height:440px;border-radius:14px;border:1px solid var(--border);overflow:hidden;background:#16324a}
    #rain-map .leaflet-control-attribution{font-size:9px;line-height:1.35;padding:0 5px}
    #rain-map .rm-overlay{image-rendering:auto}
    .rm-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;font-family:var(--mono);font-size:11px;color:#cfd8dc;z-index:500;pointer-events:none}
    .rm-bar{display:flex;align-items:center;gap:10px;margin-top:8px}
    .rm-play{flex:none;width:40px;height:40px;border-radius:50%;border:none;background:var(--acc);color:#000;font-size:15px;font-weight:700;cursor:pointer}
    #rm-slider{flex:1;min-width:0;accent-color:var(--acc);height:28px}
    .rm-time{flex:none;min-width:92px;text-align:right;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--text)}
    .rm-legend{display:flex;align-items:center;gap:8px;margin-top:6px;font-family:var(--mono);font-size:9.5px;color:var(--muted);letter-spacing:.04em}
    .rm-ramp{flex:1;height:7px;border-radius:4px;background:linear-gradient(90deg,#9be1ff,#4fb3ff,#1e78ff,#10c24a,#f5e400,#ff8c00,#ff1e1e,#c800c8)}
    .rm-light .rm-ramp{background:linear-gradient(90deg,#286eeb,#1955e1,#0f37cd,#0a9637,#e1c300,#fa7d00,#e11414,#af00af)}
    #rm-spot{display:none;position:absolute;left:8px;right:8px;top:8px;z-index:800;background:rgba(255,255,255,.96);color:#1d2329;border-radius:12px;padding:9px 12px 8px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
    .rm-pop-x{position:absolute;top:4px;right:6px;border:none;background:none;font-size:14px;color:#5c6670;cursor:pointer;padding:4px 6px}
    .rm-pop-name{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.03em;margin-bottom:4px}
    .rm-pop-txt{font-size:12.5px;line-height:1.35;margin-bottom:7px}
    .rm-pop-bars{display:flex;align-items:flex-end;gap:1px;height:38px;border-bottom:1px solid rgba(0,0,0,.15)}
    .rm-pop-bars i{flex:1;min-width:2px;border-radius:2px 2px 0 0}
    .rm-pop-bars i.now{outline:1.5px solid #ff3d7f;outline-offset:0}
    .rm-pop-ax{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:#5c6670;margin-top:3px}
    .rm-note{margin-top:6px;font-size:10.5px;line-height:1.4;color:var(--muted)}
    #route-map .leaflet-control-attribution{font-size:9px;line-height:1.35;padding:0 5px;white-space:nowrap}

/* v263 — Éire Weather Pro: locks on gated features, and the Pro sheet */
body.not-pro #nav-car,body.not-pro #nav-route{position:relative}
body.not-pro #nav-car::after,body.not-pro #nav-route::after{content:'🔒';position:absolute;top:5px;left:calc(50% + 12px);font-size:10px;line-height:1;pointer-events:none}
/* v271 (owner 8 Nov): instead of blurred tiles, the whole "Activities & tools" tile is locked like Parking and Route: padlock in place of the chevron, the tiles stay hidden, a tap opens the Pro sheet (app.v5.js capture handler). */
body.not-pro #tools-wrap{display:none!important}
body.not-pro #tools-toggle .tools-chev{display:none}
body.not-pro #tools-toggle::after{content:'🔒';font-size:16px;line-height:1;flex-shrink:0;opacity:.9}
#pro-body{padding:4px 16px calc(96px + env(safe-area-inset-bottom,0px));font-size:13px;line-height:1.6;color:var(--text)}
.pro-why{font-weight:700;color:var(--amber);margin-bottom:10px}
.pro-status{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:10px}
.pro-status.ok{color:var(--acc);font-weight:700}
.pro-list{list-style:none;margin:6px 0 14px;padding:0;display:grid;gap:7px}
.pro-list li{background:var(--glass);border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:13px}
.pro-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.pro-plan{position:relative;border:1px solid var(--border);background:var(--glass);border-radius:12px;padding:14px 10px;text-align:center}
.pro-plan.best{border:2px solid var(--acc)}
.pro-plan-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--acc);color:#000;font-family:var(--mono);font-size:9px;font-weight:700;border-radius:8px;padding:2px 8px;white-space:nowrap}
.pro-plan-name{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pro-plan-price{font-family:var(--bebas);font-size:30px;line-height:1.1;margin-top:4px}
.pro-plan-sub{font-family:var(--mono);font-size:10px;color:var(--muted)}
.pro-cta{width:100%;background:var(--acc);color:#000;border:none;border-radius:12px;padding:14px;font-family:var(--mono);font-size:12px;font-weight:700;cursor:pointer}
.pro-cta:disabled{opacity:.45;cursor:default}
.pro-fine{font-family:var(--mono);font-size:10px;color:var(--muted);margin:10px 0 18px;text-align:center}
.pro-terms{margin:8px 0 6px;line-height:1.5;font-size:10.5px}.pro-terms b{color:var(--text,#fff);font-weight:600}
.pro-code label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.pro-code-row{display:flex;gap:8px}
.pro-code-row input{flex:1;min-width:0;background:var(--glass);border:1px solid var(--border);border-radius:10px;padding:11px;color:var(--text);font-family:var(--mono);font-size:13px;letter-spacing:.05em}
.pro-code-row button{background:transparent;border:1px solid var(--acc);color:var(--acc);border-radius:10px;padding:0 16px;font-family:var(--mono);font-size:11px;font-weight:700;cursor:pointer}
.pro-code-row button:disabled{opacity:.5}
.pro-code-msg{font-family:var(--mono);font-size:11px;min-height:16px;margin-top:6px;color:var(--muted)}
.pro-code-msg.ok{color:var(--acc)}.pro-code-msg.bad{color:var(--red)}
.pro-plan.pickable{cursor:pointer;opacity:.7}.pro-plan.pickable.sel{opacity:1;box-shadow:0 0 0 2px var(--acc)}
.pro-fine a{color:var(--acc)}

/* v273 (phone QA): the metric/day modal overlay started below the top bar, so logo, search and favourites stayed bright
   above the dimmed backdrop. Cover the whole screen like the sheets do (the modal itself stays anchored to the bottom). */
.modal-overlay{top:0}
/* v273: for a subscriber the plan they own is the highlighted card; "Best value" keeps its badge but loses the green frame */
.pro-plans.owned .pro-plan{opacity:.6}
.pro-plans.owned .pro-plan.best:not(.sel){border:1px solid var(--border)}
.pro-plans.owned .pro-plan.sel{opacity:1;border:2px solid var(--acc)}
.pro-plans.owned .pro-plan.sel .pro-plan-sub{color:var(--acc);font-weight:700}

/* v275: website-only "Get the app" banner, just above the bottom nav */
#app-banner{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + var(--sab) + 8px);z-index:440;max-width:504px;margin:0 auto;width:calc(100% - 16px);display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 28px var(--shadow);animation:fadeIn .3s ease}
#app-banner img{border-radius:9px;flex-shrink:0}
#app-banner .ab-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
#app-banner .ab-txt b{font-size:13px;font-weight:600;color:var(--text)}
#app-banner .ab-txt span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app-banner .ab-get{flex-shrink:0;background:var(--acc);color:#000;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-radius:10px;padding:9px 14px}
#app-banner .ab-x{flex-shrink:0;background:none;border:0;color:var(--muted);font-size:14px;width:32px;height:32px;cursor:pointer}
body.has-app-banner{padding-bottom:calc(var(--nav-h) + var(--sab) + 72px)}

/* v276: data licences list in Info + Open-Meteo credit link in the header */
.src-lic{padding-left:16px;color:var(--muted);margin-bottom:20px;font-size:11px;line-height:1.6}
.src-lic li{margin-bottom:4px}
.src-lic a{color:var(--acc);text-decoration:none}
.logo-sub a.om-credit{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}

/* v277 (user report): with an odd number of tiles (5 activities inland, no Surf & Sea) the last one left an empty cell.
   The last tile of an odd-length grid now spans the full row. */
.ctx-grid>.ctx-btn:last-child:nth-child(odd){grid-column:1/-1}

/* v280: pinch-zoom is allowed again, so iOS Safari would zoom in on any focused field under 16 px. Only iOS gets this. */
@supports (-webkit-touch-callout:none){input,select,textarea{font-size:max(16px,1em)!important}}

/* sc: rain map off */
#rainmap-wrap{display:none !important}