/* ============================================================================
   mobile-redesign.css  —  live landing, mobile-first UX pass
   ----------------------------------------------------------------------------
   Loaded AFTER the inline <style> in landing HTML, so every rule here overrides
   the base cascade without editing it. Desktop (>720px) is untouched: all
   rules live inside mobile media queries. Uses the existing CSS custom
   properties so light/dark mode both adapt automatically.
   ========================================================================== */

@media (max-width:720px){
/* Shared preview theme repairs. Keep these token-based so light/dark surfaces
   do not drift into mixed-theme combinations. */
  :root{
    --page:#F6F8FB;
    --sf:#EEF2F7;
    --surface:#FFFFFF;
    --surface-2:#F8FAFC;
    --surface-solid:#FFFFFF;
    --control-bg:#FFFFFF;
    --control-muted:#EEF2F7;
    --card-border:#D8DEE9;
    --hero-bg:#F7F9FC;
    --map-water:#DCECFB;
    --map-water-2:#BFD8F0;
    --map-land:#B7D0EA;
    --map-land-stroke:#96B8D8;
    --shadow-card:0 14px 34px rgba(16,24,40,.09),0 2px 8px rgba(16,24,40,.05);
  }
  [data-theme="dark"]{
    --tx:#F8FAFC;
    --tx-2:#D8E1EE;
    --mu:#B4C0D0;
    --fa:#8FA1B8;
    --br:#2C3952;
    --br-2:#42516D;
    --page:#0D1423;
    --bg:#111B2E;
    --sf:#172235;
    --surface:#162238;
    --surface-2:#1D2A42;
    --surface-solid:#17243A;
    --control-bg:#111B2E;
    --control-muted:#1B2941;
    --card-border:#40506E;
    --b-lt:#182E52;
    --hero-bg:#101A2C;
    --map-water:#172740;
    --map-water-2:#223756;
    --map-land:#2B4668;
    --map-land-stroke:#496486;
    --shadow-card:0 18px 48px rgba(0,0,0,.48),0 2px 10px rgba(0,0,0,.34);
  }
  .hero{background:var(--hero-bg)}
  .sc{background:var(--surface);border-color:var(--card-border);box-shadow:var(--shadow-card)}
  .sc-tabs{background:var(--control-muted);border:1px solid var(--br)}
  .tab.on{background:var(--control-bg);color:var(--tx);border-color:var(--br-2)}
  .tab.off{color:var(--tx-2)}
  .mc.at-limit{background:var(--surface-2);color:var(--mu);border-color:var(--br);opacity:.62}
  .fsel{background-color:var(--control-bg);border-color:var(--card-border)}
  .cnote{color:var(--mu);background:color-mix(in srgb,var(--surface) 82%,var(--page))}
  .dm{background:var(--surface);border-color:var(--card-border)}
  .mp{background:linear-gradient(160deg,var(--map-water) 0%,var(--map-water-2) 100%)}
  .mp .land{fill:var(--map-land);stroke:var(--map-land-stroke)}
  .pin .pin-badge{border-color:var(--surface)}
  .pin .pin-badge::after{border-top-color:var(--surface)}
  footer{background:var(--bg)}
  .foot-in,.foot-in span:not(.foot-l){color:var(--mu)}
  .foot-l{color:var(--tx-2)}
  .b2t{background:var(--surface);color:var(--tx-2)}

  /* Live result-count line above the CTA (shown on mobile, subtle). */
  .match-count{font-size:.84rem;font-weight:600;color:var(--tx-2);text-align:center;
    margin-top:1rem;min-height:1.15em;letter-spacing:-.01em;transition:opacity .15s}
  .match-count:empty{margin-top:0;min-height:0}
  .match-count b{color:var(--b);font-weight:730}
}
@media (min-width:721px){.match-count{display:none!important}}  /* count is a mobile feature; keep desktop unchanged */

/* =========================== MOBILE (<= 720px) ============================ */
@media (max-width:720px){

  /* --- 1. Short hero banner (kept on mobile, capped height, strong crop) --- */
  .hero-grid{grid-template-columns:1fr;min-height:0;gap:0}
  .hero-r{display:block!important;order:0;height:180px;margin:0;border-radius:0;
    box-shadow:none;opacity:1;width:100%}
  .hero-r img{width:100%;height:180px;object-fit:cover;object-position:center 42%}
  .hero-r::after{display:none}
  .nav-in{gap:.5rem;overflow:hidden;height:52px}
  .nav-r{gap:.4rem;min-width:0}
  .nav-l{min-width:0}
  .logo{font-size:1.05rem;gap:7px}
  .beta-badge{font-size:.55rem;margin-left:7px}
  .unit-pill{padding:1px}
  .ubtn{padding:3px 9px;font-size:.72rem}
  .thbtn,.menu-btn{width:32px;height:32px;flex:0 0 32px}
  .menu-btn{display:none}
  .hero-l{order:1;padding:.85rem var(--page-px) .3rem var(--page-px)}
  .eyebrow{margin-bottom:.55rem;padding:4px 10px;font-size:.68rem}
  .h1{font-size:1.64rem;line-height:1.13;margin:0 0 .48rem;letter-spacing:-.025em}
  .hs{font-size:.92rem;max-width:none;line-height:1.46;color:var(--tx-2)}
  .hero{padding-bottom:.05rem}

  /* --- 6. Reorder sections: search -> top destinations -> profiles -> how -- */
  html,body{overflow-x:hidden;max-width:100vw}
  body{display:flex;flex-direction:column;width:100vw}
  body>nav,body>section,body>footer,.shell,.sc,.fb,.lu-body,.sec-head{min-width:0;max-width:100%}
  nav{order:0}
  .hero{order:1}
  #results{order:2}
  #quickstarts{order:3}
  #how{order:4}
  footer{order:5}

  /* --- 2. Make the search card the visual priority --- */
  .search-wrap{margin-top:.45rem;padding-bottom:.85rem}
  .shell{width:100%;max-width:100vw;overflow:hidden;padding-left:var(--page-px);padding-right:var(--page-px)}
  .search-wrap,.sc,.fb{width:100%;max-width:100%;min-width:0;overflow:hidden}
  .sc{width:calc(100vw - 2.2rem);width:calc(100dvw - 2.2rem);max-width:calc(100dvw - 2.2rem);border-radius:16px;border:1px solid var(--card-border);box-shadow:var(--shadow-card)}
  .fb,.lu-body{padding:1rem 1rem .95rem}
  .block{margin-bottom:.78rem}

  /* --- 3. Clean horizontal segmented control (equal width, no overlap) --- */
  .sc-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:auto;max-width:calc(100dvw - 3.76rem);gap:4px;margin:.78rem .78rem 0;
    padding:4px;border-radius:12px}
  .sc-tabs .tab{width:100%;min-width:0;justify-content:center;text-align:center;
    min-height:46px;padding:.58rem .22rem;font-size:.74rem;font-weight:700;border-radius:9px;line-height:1.16;white-space:normal;
    overflow:visible;text-overflow:clip}
  .sc-tabs .tab svg{display:none!important}  /* drop icons to give labels room */
  .sc-tabs .tab-ic{display:none!important}
  .sc-tabs .tab-title{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.12}
  .tab.on{box-shadow:0 1px 4px rgba(0,0,0,.15)}

  /* --- 4. Month selector: all options visible in two compact rows --- */
  .mg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%;max-width:calc(100dvw - 4.2rem);gap:6px;padding:2px 0;overflow:visible;
    -webkit-mask-image:none;mask-image:none}
  .mg::-webkit-scrollbar{display:none}
  .mc{width:100%;min-width:0;max-width:none;min-height:43px;padding:6px 0;font-size:.78rem;border-width:1px;background:var(--control-bg)}
  .mc.on{box-shadow:0 4px 12px color-mix(in srgb,var(--b) 40%,transparent);font-weight:680}
  .mc.at-limit{opacity:.66}                   /* keep disabled months readable */
  .block-hd{display:block}
  .block-hd .section-label{display:flex}
  .month-summary{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-top:.3rem;max-width:100%}
  .mc-max-note{font-size:.74rem;line-height:1.25;min-height:0}
  .sel-count,.clr-btn{font-size:.78rem}
  .clr-btn.is-disabled{opacity:.42;text-decoration:line-through}
  .frow{grid-template-columns:1fr;gap:.62rem}
  .fg{gap:0}
  .fg-label,.section-label{color:var(--tx-2);font-size:.8rem}
  .fsel{height:46px;border-width:1px;border-radius:10px;font-size:.9rem}
  .ft{padding-top:.72rem;margin-top:0}
  .ft-hdr{min-height:42px;align-items:center}
  .ft-hdr-l{font-size:.86rem}
  .ft-grid{grid-template-columns:1fr;gap:.72rem}
  .ft-body{margin-top:.7rem}

  /* --- 5. CTA + result count --- */
  .cta-row{display:block;margin-top:.78rem}
  .cta-note{max-width:none;text-align:center;margin:0 0 .58rem;overflow-wrap:anywhere;font-size:.8rem;color:var(--tx-2)}
  .find-btn{width:100%;max-width:100%;min-height:48px;padding:.86rem;font-size:1rem}
  .reset-btn{width:100%;min-height:46px;margin-top:.5rem;background:transparent;text-decoration:underline;text-underline-offset:3px}
  .match-count{margin:.82rem 0 .5rem;font-size:.84rem}
  .cnote{padding:.55rem .9rem;font-size:.72rem;line-height:1.32}
  .sticky-cta{padding:.45rem var(--page-px) calc(.45rem + env(safe-area-inset-bottom,0px))}
  .sticky-cta .match-count{margin:0 0 .4rem;font-size:.77rem}
  .sticky-cta button{min-height:42px;padding:.62rem;font-size:.9rem;border-radius:12px}
  body.sticky-cta-visible{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}

  /* --- 7. "How Wayther works": compact three-step row --- */
  #how.sec{padding:1.45rem 0}
  .how h2{text-align:left;font-size:1.12rem;margin-bottom:.25rem}
  .how-lead{text-align:left;font-size:.84rem;margin:0 0 1rem;max-width:none}
  .how-g{grid-template-columns:1fr;gap:.62rem}
  .how-step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:.82rem;row-gap:.12rem;text-align:left;align-items:start}
  .how-badge,.how-ic{width:44px;height:44px}
  .how-badge{margin:0;flex-shrink:0}
  .how-step .how-badge{grid-row:1 / span 2}
  .how-step h3,.how-step p{grid-column:2}
  .how-ic svg{width:20px;height:20px}
  .step-num{width:23px;height:23px;font-size:.7rem;box-shadow:0 3px 8px color-mix(in srgb,var(--b) 42%,transparent)}
  .how-step h3{font-size:.9rem;margin-bottom:.15rem}
  .how-step p{font-size:.8rem;line-height:1.38;margin:0;max-width:none}

  /* --- 8. Popular weather profiles: aspirational horizontal cards --- */
  .qs-carousel{position:relative}
  .qs-carousel::after{content:'';position:absolute;top:0;right:-1px;bottom:.45rem;width:34px;
    background:linear-gradient(90deg,transparent,var(--page));pointer-events:none}
  .qs-grid{display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:.75rem;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:.15rem 1.35rem .5rem .1rem}
  .qs-grid::-webkit-scrollbar{display:none}
  .qs-grid>.preset-chip{flex:0 0 146px;max-width:146px;min-height:124px;scroll-snap-align:start;
    scroll-snap-stop:always;padding:.85rem;gap:.55rem}
  .preset-chip .pc-ic,.preset-chip .pc-icon{transform:scale(1.12);transform-origin:left center}
  .pc-name{font-size:.84rem;font-weight:720;line-height:1.18}
  .pc-desc{font-size:.72rem;line-height:1.28;color:var(--tx-2)}

  /* --- 9. Results: clearer list, compact supporting map --- */
  .dm{grid-template-columns:1fr}
  .dl{width:100%;padding:1rem}
  .dr{min-height:62px;padding:10px 0;gap:10px}
  .rank{font-size:.82rem;width:18px;color:var(--mu)}
  .dth{width:48px;height:48px;flex:0 0 48px;border-radius:10px;overflow:hidden}
  .dn{font-size:.95rem;line-height:1.25}
  .ds{font-size:.8rem;line-height:1.3;color:var(--tx-2);margin-top:3px}
  .score-bdg{min-width:38px;height:28px;font-size:.86rem}
  .dl-foot{padding-top:.7rem}
  .view-all{font-size:.9rem;min-height:40px;align-items:center}
  .mp{display:block!important;min-height:176px;border-left:none;border-top:1px solid var(--br);filter:saturate(1.12) contrast(1.05)}
  .map-cap{font-size:.68rem;bottom:9px;left:9px}
  .mz{top:9px;right:9px}
  .mzb{width:32px;height:32px}
  .pin .pin-badge{min-width:31px;height:24px;font-size:.73rem}
  #results.sec{padding-top:1.7rem}
  .sec-head{margin-bottom:.9rem}
  .sec-head>div{min-width:0;max-width:100%}
  .sec-sub{max-width:100%;overflow-wrap:normal}
  .sec-head .sec-lnk{display:none}

  /* --- 10. Footer: quieter, trust without weight --- */
  footer{padding:1.4rem 0}
  .foot-in{gap:.5rem}
  .foot-l{font-size:.82rem;font-weight:680}
  .foot-in span:not(.foot-l){font-size:.73rem;line-height:1.5;color:var(--mu)}
  .foot-in a{color:var(--b)}

  /* --- 12. Dark/light polish: keep selects + labels legible --- */
  .fg,.fsel{min-width:0}
  .opt-text{color:var(--mu)}
  .lu-row{gap:.7rem}
  .lu-input,.lu-btn{min-height:46px}
}

/* ===================== SMALL PHONES (<= 520px) ========================== */
@media (max-width:520px){
  .h1{font-size:1.54rem}
  .sc{width:360px!important;max-width:calc(100dvw - 2.2rem)!important}
  .hs,.sec-sub{max-width:100%}
  .sc-tabs .tab{font-size:.7rem;padding:.54rem .14rem}
  .logo{font-size:1rem}
  .beta-badge{margin-left:5px}
  .unit-pill{padding:1px}
  .ubtn{padding:2px 7px;font-size:.72rem}
  .nav-r{gap:.36rem}
  .frow{grid-template-columns:1fr}
  .qs-grid>.preset-chip{flex:0 0 82%}
  .sec-t{font-size:1.1rem}
  .find-btn{font-size:.95rem}
  .mp{min-height:162px}
  .dr{grid-template-columns:auto auto minmax(0,1fr) auto auto}
}

/* ============================================================================
   S265  -  Mobile UX refinement pass (conversion + dark-mode legibility)
   Appended last so it wins at equal specificity. CTA rules are raised to
   .action-area specificity to beat index.html desktop rules leaking into
   mobile. Desktop (>720px) untouched.
   ========================================================================== */

@media (max-width:720px){
  /* --- Dark-mode contrast lifts (tokens only, mobile only) ---------------- */
  [data-theme="dark"]{
    --tx-2:#E4EBF5;
    --mu:#C3CFDF;
    --card-border:#46587A;
  }
  [data-theme="dark"] .eyebrow{
    color:#CBE0FF;
    background:#1B2E50;
    border-color:rgba(96,165,250,.42);
  }
  [data-theme="dark"] .opt-text{color:var(--mu)}
  [data-theme="dark"] .cnote{color:#CCD7E6;background:#16223A}
  [data-theme="dark"] .tab.off{color:#C9D4E4}
  [data-theme="dark"] .foot-in span:not(.foot-l){color:#B7C4D6}
}

/* ====================== MOBILE refinement (<=720px) ====================== */
@media (max-width:720px){
  html,body{max-width:100%;overflow-x:hidden}
  .hero-grid,.hero-l,.shell,.search-wrap,.sc{max-width:100%;min-width:0}

  /* 1. Keep the mobile hero image visible while preserving a compact first viewport */
  .hero-r,.hero-r img{height:clamp(168px,46vw,190px)}
  .hero-r img{object-position:center 42%}
  .hero-l{padding:.68rem var(--page-px) .1rem var(--page-px)}
  .eyebrow{margin-bottom:.36rem;padding:4px 10px;font-size:.68rem;font-weight:650}
  .h1{font-size:1.56rem;line-height:1.1;margin:0 0 .28rem;letter-spacing:-.026em;color:var(--tx)}
  .hs{font-size:.88rem;line-height:1.38;color:var(--tx-2);max-width:320px;margin:0}
  .search-wrap{margin-top:.25rem}

  /* 2. Headline legibility: accent word stays brand-blue but with weight */
  .h1 .accent{color:var(--b);font-weight:800}

  /* 3. Search card: a touch more rhythm + firmer edge */
  .sc{border:1px solid var(--card-border)}
  .fb,.lu-body{padding:.88rem 1rem .9rem}
  .block{margin-bottom:.64rem}
  .section-label,.fg-label{color:var(--tx-2);font-weight:600}
  .opt-text{font-weight:500}
  .frow{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .frow .fg:nth-child(3){grid-column:1 / -1}

  /* 4. Segmented control: unmistakable active state */
  .sc-tabs{gap:5px;padding:5px;background:var(--control-muted);border:1px solid var(--br)}
  .sc-tabs .tab{min-height:48px;font-weight:700}
  .sc-tabs .tab.off{color:var(--tx-2);background:transparent}
  .sc-tabs .tab.on{background:var(--b);color:#fff;border-color:var(--b);
    box-shadow:0 2px 8px color-mix(in srgb,var(--b) 36%,transparent)}
  .sc-tabs .tab.on .tab-title{color:#fff}
  [data-theme="dark"] .sc-tabs .tab.on{color:#0C1322}
  [data-theme="dark"] .sc-tabs .tab.on .tab-title{color:#0C1322}
  [data-theme="dark"] .sc-tabs .tab.on{background:var(--b);border-color:var(--b)}

  /* 5. CTA: single dominant full-width primary, quiet secondary reset.
        Specificity raised to beat index.html .action-area desktop rules. */
  .action-area{display:block;margin-top:.68rem;padding-top:.72rem;border-top:1px solid var(--br)}
  .action-area .cta-row{display:flex;flex-direction:column;align-items:stretch;gap:.55rem;margin-top:0;width:100%}
  .action-area .find-btn{order:1;width:100%;min-width:0;flex:none;min-height:50px;
    font-size:1.02rem;font-weight:720;border-radius:13px;
    box-shadow:0 6px 18px color-mix(in srgb,var(--b) 30%,transparent)}
  .action-area .find-btn svg{width:18px;height:18px}
  .action-area .reset-btn{order:2;width:auto;align-self:center;min-height:0;
    background:transparent;border:none;color:var(--mu);font-size:.82rem;font-weight:600;
    padding:.32rem .6rem;text-decoration:underline;text-underline-offset:3px;
    text-decoration-color:color-mix(in srgb,var(--mu) 45%,transparent)}
  .action-area .reset-btn:hover{color:var(--tx)}

  /* 6. Header: keep wordmark dominant, quiet the rest */
  .logo{font-size:1.08rem;font-weight:780}
  .beta-badge{font-size:.52rem;margin-left:7px;opacity:.92}
  .ubtn{font-size:.72rem;color:var(--tx-2)}
  .ubtn.on{color:var(--tx)}
  .thbtn{color:var(--tx-2)}

  /* 7. Climate-averages note: legible, not shouting */
  .cnote{font-size:.74rem;line-height:1.34;color:var(--mu)}
  .mc-max-note{color:var(--mu)}
}

/* ===================== SMALL PHONES refinement (<=380px) ================= */
@media (max-width:380px){
  .h1{font-size:1.5rem}
  .hs{font-size:.87rem}
  .sc-tabs .tab{font-size:.72rem;padding:.55rem .18rem}
  .frow{grid-template-columns:1fr}
  .frow .fg:nth-child(3){grid-column:auto}
  .action-area .find-btn{font-size:.98rem;min-height:48px}
}

/* S466: final lookup parity override. Keep active search-mode tabs filled in
   the preview palette even though this support CSS loads after the archived
   landing's inline styles. */
@media (max-width:720px){
  #td.tab.on,#tl.tab.on,
  .sc-tabs #td.tab.on,.sc-tabs #tl.tab.on{
    background:var(--b);
    color:#fff;
    border-color:var(--b);
    box-shadow:0 8px 18px color-mix(in srgb,var(--b) 22%,transparent);
  }
  #td.tab.on .tab-title,#tl.tab.on .tab-title,
  #td.tab.on .tab-sub,#tl.tab.on .tab-sub{
    color:#fff;
  }
  #td.tab.on .tab-ic,#tl.tab.on .tab-ic{
    background:color-mix(in srgb,#fff 18%,transparent);
    color:#fff;
  }
}

/* S1007: final mobile search layout contract. This file loads after the
   landing HTML, so keep the contract here as the winning cascade. */
@media (max-width:720px){
  .mg{display:flex;grid-template-columns:none;gap:6px;overflow-x:auto;padding:0 26px 3px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent)}
  .mg::-webkit-scrollbar{display:none}
  .mc{flex:0 0 52px;min-width:52px;min-height:36px;padding:5px 4px}
  .frow{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .frow .fg:first-child{grid-column:1/-1}
  .frow .fg:nth-child(2),.frow .fg:nth-child(3){grid-column:auto}
  .tr-range:focus-visible{outline:none}
}

@media (max-width:360px){
  .mc{flex-basis:48px;min-width:48px;font-size:.76rem}
}