/* ===================================================================
   forecast-test.css  --  visual restyle for /forecast-test only.
   Loaded after forecast.css. Same forest green and orange, same page
   structure. Mobile first (375px), then wider screens.
   The hour strip keeps its colours exactly (they are inline, set by
   forecast.js); only sizes and spacing change here.
=================================================================== */
.ft-page{
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:12px;
  --card:#fff;
  --soft:rgba(27,58,45,.06);
  font-family:var(--ui);
}
.ft-page,.ft-page input,.ft-page button,.ft-page select{font-family:var(--ui)}
.ft-page .serif{font-family:var(--ui)}
/* the serif stays for the big headlines only */
.ft-page .verdict-headline,.ft-page .landing h1{font-family:Georgia,serif}

/* ── small "Test version" tag ─────────────────────────── */
.ft-test-tag{position:fixed;left:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:900;
  background:rgba(15,42,30,.88);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;
  box-shadow:0 2px 8px rgba(0,0,0,.2);opacity:.9}

/* ── labels: sentence case, 12px and up, one sans font ────── */
.ft-page .eyebrow,.ft-page .fc-loc-date,.ft-page .score-tag,.ft-page .window-label,.ft-page .t-label,
.ft-page .wc-tag,.ft-page .section-label,.ft-page .light-mark .lm-label,.ft-page .day-name,.ft-page .sol-pill .sp-tag,
.ft-page .interp-do-label,.ft-page .email-cta-eyebrow,.ft-page .hm-score-label,.ft-page .hm-f-pts,.ft-page .ddw-label{
  text-transform:none;letter-spacing:0;font-family:var(--ui)}
.ft-page .eyebrow{font-size:13px}
.ft-page .hm-f-icon{display:none}               /* "TMP", "WND" codes */
.ft-page .hm-score-label{font-size:13px}
.ft-page .hm-f-pts{font-size:12px}

/* ── landing: remembered spot ─────────────────────────── */
.ft-saved{margin:14px auto 0;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  font-size:14px;color:rgba(245,240,232,.92)}
.ft-saved[hidden]{display:none}
.ft-saved-go,.ft-saved-forget{border:0;border-radius:99px;padding:7px 14px;font-size:14px;cursor:pointer;touch-action:manipulation}
.ft-saved-go{background:var(--orange);color:#fff;font-weight:600}
.ft-saved-forget{background:rgba(0,0,0,.3);color:rgba(245,240,232,.85)}

/* ── top bar ──────────────────────────────────────────── */
.ft-page .fc-topbar{padding:14px 20px;gap:12px;border-bottom:0}
.ft-page .fc-loc-name{font-family:var(--ui);font-weight:600;font-size:17px;max-width:calc(100vw - 80px)}
.ft-page .fc-loc-date{font-size:13px;color:rgba(255,255,255,.72)}
.ft-status{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px;font-size:13px;color:rgba(255,255,255,.9)}
.ft-status[hidden]{display:none}
.ft-status-item{white-space:nowrap}
.ft-status-item:first-child{color:#f0b47a;font-weight:600}
.ft-status-sep{color:rgba(255,255,255,.4)}
.ft-page .fc-change{font-size:14px;padding:8px 14px}
.ft-page .fc-species-wrap{border-bottom:0}
.ft-page .species-btn{font-size:14px}

/* ── hero ─────────────────────────────────────────────── */
.ft-page .decision{padding:22px 20px 26px}
.ft-page .decision-grid{grid-template-columns:1fr;gap:20px}
.ft-page .score-block{border:0;padding:0;flex-direction:row;align-items:center;gap:16px}
.ft-page .score-tag,.ft-page .score-meter{display:none}
.ft-ring{position:relative;width:112px;height:112px;flex-shrink:0}
.ft-ring-svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.ft-ring-track{fill:none;stroke:rgba(255,255,255,.12);stroke-width:9}
.ft-ring-arc{fill:none;stroke-width:9;stroke-linecap:round;
  transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1),stroke .3s}
.ft-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ft-ring-num{font-size:40px;font-weight:700;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ft-ring-of{font-size:12px;color:rgba(255,255,255,.6);margin-top:4px}
@media (prefers-reduced-motion:reduce){.ft-ring-arc{transition:none}}

.ft-context{display:flex;align-items:center;gap:8px;font-size:15px;color:rgba(255,255,255,.8);margin-bottom:6px}
.ft-ctx-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ft-ctx-band{font-weight:700;filter:brightness(1.35)}
.ft-ctx-sep{color:rgba(255,255,255,.4)}
.ft-page .verdict-headline{font-size:clamp(1.45rem,5.6vw,2rem);margin-bottom:8px}
.ft-page .verdict-sub{font-size:15px;color:rgba(255,255,255,.72);margin-bottom:14px}

.ft-page .factor-pills{gap:8px}
.ft-page .factor-pill{border:0;background:rgba(255,255,255,.08);font-size:13px;padding:6px 12px;color:rgba(255,255,255,.9)}
.ft-page .factor-pill.pos{background:rgba(132,206,148,.16);border:0}
.ft-page .factor-pill.neg{background:rgba(232,150,90,.16);border:0}

.ft-events{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.ft-events[hidden]{display:none}
.ft-event{display:flex;align-items:flex-start;gap:10px;background:rgba(120,170,220,.12);border-radius:10px;
  padding:10px 12px;font-size:14px;line-height:1.45;color:#fff}
.ft-event svg{width:18px;height:18px;flex-shrink:0;color:#9cc7ef;margin-top:1px}

/* best-window card */
.ft-page .window-block{border:0;padding:0;text-align:left;min-width:0}
.ft-page .window-label{font-size:14px;font-weight:600;color:rgba(255,255,255,.75);margin-bottom:8px}
.ft-window-card{display:flex;flex-direction:column;gap:8px}
.ft-win{background:rgba(255,255,255,.07);border-radius:var(--radius);padding:14px 16px}
.ft-win-prime{background:rgba(201,107,26,.16)}
.ft-win-none{font-size:15px;color:rgba(255,255,255,.75)}
.ft-win-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.ft-win-kind{font-size:13px;color:rgba(255,255,255,.75);font-weight:600}
.ft-win-prime .ft-win-kind{color:#f0b47a}
.ft-win-score{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#fff;white-space:nowrap}
.ft-win-score::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--sc)}
.ft-win-time{font-size:22px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.2}
.ft-win-setup{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:14px;color:rgba(255,255,255,.8)}
.ft-win-setup svg{width:15px;height:15px;color:var(--orange)}
.ft-win-setup strong{color:#fff}
.ft-win-note{margin-top:2px;font-size:12px;color:rgba(255,255,255,.7)}
/* New score: the hour popup's "these add up to" line (forecast-test-verdict.js) */
.ft-page .hm-sum{margin:0 0 12px;font-size:.8rem;color:var(--muted);line-height:1.45}
.ft-win-wind{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:14px;color:rgba(255,255,255,.8)}
.ft-win-wind svg{width:15px;height:15px;color:#9cc7ef;fill:none}
.ft-plan-link{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:#f0b47a;text-decoration:none}
.ft-plan-link:hover{text-decoration:underline}

@media (min-width:900px){
  .ft-page .decision{padding:30px 28px 32px}
  .ft-page .decision-grid{grid-template-columns:auto 1fr minmax(260px,320px);gap:36px;align-items:start}
  .ft-page .score-block{flex-direction:column}
  .ft-ring{width:132px;height:132px}
  .ft-ring-num{font-size:48px}
}

/* ── light times: tiles, 2x2 on a phone, 4 across wider ───── */
.ft-page .timing{border-bottom:0;padding:20px 20px 4px;gap:14px;display:block}
.ft-page .timing-left{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.ft-page .t-item{background:var(--card);border-radius:var(--radius);padding:12px 14px;box-shadow:0 1px 2px rgba(20,15,8,.05)}
.ft-page .t-label{font-size:13px;color:var(--muted);font-weight:600}
.ft-page .t-label svg{width:14px;height:14px}
.ft-page .t-time{font-family:var(--ui);font-size:18px;font-weight:700;margin-top:2px}
.ft-page .timing-right{flex-wrap:wrap;padding:12px 0 0}
.ft-page .window-chip{border:0;background:var(--card);border-radius:10px;box-shadow:0 1px 2px rgba(20,15,8,.05)}
.ft-page .window-chip.peak{background:#fff4e8;border:0}
.ft-page .wc-tag{font-size:12px}
.ft-page .wc-time{font-family:var(--ui);font-weight:600}
@media (min-width:700px){.ft-page .timing-left{grid-template-columns:repeat(4,1fr)}.ft-page .timing{padding:24px 28px 4px}}

/* ── section headings ─────────────────────────────────── */
.ft-page .section-label{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:12px}
.ft-page .section-label::after{display:none}

/* ── hour strip: same colours, roomier, wind under each hour ── */
.ft-page .hourly-section{padding:26px 20px 6px}
.ft-wind-head{margin:-4px 0 10px}
/* Today / Tomorrow toggle beside "Hour by hour" (the strip opens on the hero's day) */
.ft-hour-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin-bottom:12px}
.ft-hour-head .section-label{margin-bottom:0}
.ft-strip-day{display:inline-flex;align-items:center;gap:0;background:var(--card);border-radius:99px;padding:3px;box-shadow:0 1px 2px rgba(20,15,8,.06)}
.ft-strip-day[hidden]{display:none}
.ft-sd-btn{border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--muted);padding:5px 14px;border-radius:99px;cursor:pointer}
.ft-sd-btn[aria-pressed="true"]{background:var(--moss);color:#fff}
.ft-sd-btn:focus-visible{outline:2px solid var(--moss);outline-offset:2px}
.ft-sd-other{font-size:12px;color:var(--muted);padding:0 10px 0 6px}
.ft-wind-summary{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:4px}
.ft-wind-summary[hidden]{display:none}
.ft-wind-legend{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.ft-legend-arrow{width:14px;height:14px;flex-shrink:0;fill:none;stroke:var(--moss);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ft-page .hourly-strip{padding-top:22px}
.ft-page .hour-cell{min-width:50px}
.ft-page .hour-time,.ft-page .hour-score,.ft-page .hour-temp{font-size:12px}
.ft-page .hour-score{font-size:13px}
.ft-page .light-mark{min-width:58px}
.ft-page .light-mark .lm-label{font-size:12px;max-width:58px}
.ft-page .light-mark .lm-time{font-size:12px}
.ft-page .light-mark .lm-line{height:96px}
.ft-wind{display:flex;flex-direction:column;align-items:center;gap:1px;margin-top:4px;padding-top:5px;
  border-top:1px solid var(--line-2);width:100%;color:var(--text)}
.ft-warrow{width:16px;height:16px;fill:none;stroke:var(--moss);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ft-wfrom{font-size:12px;font-weight:700;line-height:1.1}
.ft-wmph{font-size:12px;color:var(--muted-2);line-height:1.1}
.ft-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 7-day: band word, 5 dots, when to go ──────────────── */
.ft-page .week-section{padding:26px 20px 32px;--wk-gap:10px}
.ft-page .week-strip{display:flex;flex-direction:column;gap:8px}
.ft-page .day-card{display:grid;grid-template-columns:4.6rem 1.4rem auto 1fr auto;
  grid-template-areas:"name wx band when temps" "name wx dots tags temps";
  align-items:center;column-gap:10px;row-gap:4px;text-align:left;padding:12px 14px;border:0;border-radius:var(--radius);
  background:var(--card);box-shadow:0 1px 2px rgba(20,15,8,.05)}
.ft-page .day-card:hover{background:#fff;box-shadow:0 2px 10px rgba(20,15,8,.08)}
.ft-page .day-card.active{background:#fff;box-shadow:inset 0 0 0 2px var(--moss)}
.ft-page .day-name{grid-area:name;font-size:15px;font-weight:700;color:var(--ink);margin:0}
.ft-page .day-card.active .day-name{color:var(--moss)}
.ft-day-wx{grid-area:wx;display:flex;align-items:center;color:var(--muted)}
.ft-day-wx svg{width:20px;height:20px}
.ft-day-wx span{display:none}
.ft-day-band{grid-area:band;justify-self:start;font-size:13px;font-weight:700;color:#fff;background:var(--band);
  padding:3px 10px;border-radius:99px;white-space:nowrap}
.ft-dots{grid-area:dots;display:flex;gap:4px}
.ft-dot{width:8px;height:8px;border-radius:50%;background:rgba(45,33,15,.14)}
.ft-dot.on{background:var(--moss)}
.ft-day-when{grid-area:when;font-size:14px;color:var(--text)}
.ft-page .day-temps{grid-area:temps;font-size:14px;color:var(--muted)}
.ft-day-tags{grid-area:tags;display:flex;flex-wrap:wrap;gap:4px}
.ft-tag{font-size:12px;font-weight:700;padding:1px 8px;border-radius:99px;white-space:nowrap}
.ft-tag-cold{background:rgba(58,115,184,.13);color:#2c5f9e}
.ft-tag-warm{background:rgba(194,69,58,.12);color:#a3372d}
.ft-tag-storm{background:rgba(86,96,107,.13);color:#454d56}
.ft-tag[title]{cursor:help}
/* phone: the tag gets its own line under the dots */
@media (max-width:859px){
  .ft-page .day-card{grid-template-areas:"name wx band when temps" "name wx dots when temps" ". . tags tags tags"}
  .ft-day-tags{gap:4px 6px}
  .ft-day-tags:empty{display:none}
  .ft-tag{font-size:12.5px;padding:2px 9px}
}
@media (min-width:860px){
  .ft-page .week-section{padding:30px 28px 36px}
  .ft-page .week-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--wk-gap)}
  .ft-page .day-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 8px}
  .ft-day-wx{flex-direction:column;gap:2px}
  .ft-day-wx span{display:block;font-size:12px}
  .ft-day-when{font-size:13px}
  .ft-day-tags{justify-content:center}
  .ft-page .day-temps{font-size:13px}
}

/* ── weather changes this week: at most two plain lines under the cards ──
   No chart and no column alignment, so it reads the same on a phone.
   Blue snowflake = cold front, red thermometer = warm front, slate = storm. */
.ft-changes{margin-top:14px}
.ft-changes[hidden]{display:none}
.ft-changes-head{font-size:13px;font-weight:700;color:var(--ink);margin:0 0 6px 2px}
.ft-changes-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ft-change{display:flex;align-items:flex-start;gap:8px;background:var(--card);border-radius:var(--radius);padding:9px 12px;
  font-size:14px;line-height:1.4;color:var(--text);box-shadow:0 1px 2px rgba(20,15,8,.05);cursor:help}
.ft-change strong{font-weight:700;color:var(--ink)}
.ft-change-ic{width:18px;height:18px;flex-shrink:0;margin-top:1px;fill:none}
.ft-change-cold .ft-change-ic{color:#2c5f9e}
.ft-change-warm .ft-change-ic{color:#a3372d}
.ft-change-storm .ft-change-ic{color:#56606b}

/* ── chips under the weather changes: colder day, rain clearing, best day ── */
.ft-week-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0}
.ft-week-chips[hidden]{display:none}
.ft-chip{display:inline-flex;align-items:center;gap:5px;background:var(--card);border-radius:99px;padding:4px 10px;font-size:13px;
  color:var(--text);line-height:1.3;box-shadow:0 1px 2px rgba(20,15,8,.05)}
.ft-chip svg{width:14px;height:14px;flex-shrink:0;color:var(--moss);fill:none}
.ft-chip-best svg{color:var(--orange)}

/* ── email card: inline and dismissible (no sticky bar here) ── */
.ft-page .email-cta{margin:8px auto 0;padding:0 20px}
.ft-page .email-cta[hidden]{display:none}
.ft-page .email-cta-inner{position:relative;border-radius:var(--radius);padding:22px 20px}
.ft-page .email-cta-eyebrow{font-size:13px}
.ft-page .email-cta h2{font-family:var(--ui);font-size:20px}
.ft-email-close{position:absolute;top:8px;right:10px;background:none;border:0;color:rgba(255,255,255,.6);font-size:22px;line-height:1;
  cursor:pointer;padding:6px}
.ft-email-close:hover{color:#fff}

/* ── what it means, field tactics, moon ───────────────── */
.ft-page .interp-section{max-width:1240px;padding:22px 20px 6px}
.ft-page .interp-headline{font-family:var(--ui);font-weight:700;font-size:clamp(1.1rem,4.2vw,1.4rem);margin-bottom:12px}
.ft-page .interp-list{gap:8px;margin-bottom:14px}
.ft-page .interp-list li::before{margin-top:9px}
.ft-page .interp-do{padding:12px 16px}
@media (min-width:700px){.ft-page .interp-section{padding:26px 28px 6px}}
/* sun times, now further down the page */
.ft-page .timing{max-width:1240px;margin:0 auto}
.ft-timing-label{margin-bottom:12px}
/* the email card closes the page */
.ft-page #email-cta{margin:28px auto 36px}
/* header logo: absolute path, sized here so nothing else can collapse it */
.ft-page .nav-brand img{display:block;width:34px;height:34px;max-width:none}
.ft-page .interp-list li strong{font-family:var(--ui);font-weight:700}
.ft-page .interp-list li{font-size:15px}
.ft-page .interp-do{border-left:0;border-radius:var(--radius);background:rgba(45,90,63,.08)}
.ft-page .interp-do-label{font-size:13px}
.ft-page .interp-do-text{font-family:var(--ui);font-weight:600;font-size:16px}
.ft-page .tactics-section{padding:28px 20px 8px}
.ft-page .tactics-grid{grid-template-columns:1fr;gap:10px}
.ft-page .tactic{background:var(--card);border:0;border-radius:var(--radius);padding:16px;box-shadow:0 1px 2px rgba(20,15,8,.05)}
.ft-page .tactic-marker{width:9px;height:9px;margin-bottom:8px}
.ft-page .tactic-head{font-family:var(--ui);font-weight:700;font-size:16px;margin-bottom:6px}
.ft-page .tactic-text{font-size:14px}
@media (min-width:700px){.ft-page .tactics-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.ft-page .tactics-grid{grid-template-columns:repeat(4,1fr)}}
.ft-page .moon-strip{border:0;background:var(--card);border-radius:var(--radius);padding:14px 16px;box-shadow:0 1px 2px rgba(20,15,8,.05)}
.ft-page .moon-divider{display:none}
.ft-page .moon-phase-name{font-family:var(--ui);font-weight:700}
.ft-page .moon-illum{font-size:13px}
.ft-page .sol-pill{border:0;background:var(--cream)}
.ft-page .sol-pill.major{background:#fff4e8}
.ft-page .sol-pill .sp-tag{font-size:12px}
.ft-page .sol-pill .sp-time{font-family:var(--ui);font-weight:600}
.ft-page .hm-score-big,.ft-page .hm-headline,.ft-page .hour-modal-title,.ft-page .hm-tip strong{font-family:var(--ui)}
.ft-page .tactics-section,.ft-page .moon-section{padding-left:20px;padding-right:20px}
@media (min-width:700px){
  .ft-page .hourly-section,.ft-page .tactics-section,.ft-page .moon-section{padding-left:28px;padding-right:28px}
  .ft-page .fc-topbar{padding:16px 28px}
}

/* ── Huck: smaller and out of the way on a phone ───────── */
@media (max-width:700px){
  .ft-page #huck-bubble{bottom:calc(12px + env(safe-area-inset-bottom));right:calc(12px + env(safe-area-inset-right))}
  .ft-page .huck-img{width:46px;height:46px;border-width:2px}
  .ft-page #huck-ask-label{display:none}
  .ft-page .huck-body{animation:none}
}

/* TEST: Old / New score switch above the hero (forecast-test-v2.js) */
.ft-score-switch{display:inline-flex;align-items:center;gap:4px;margin:0 0 10px;padding:3px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.ft-ss-label{font-size:12px;font-weight:700;color:rgba(255,255,255,.75);padding:0 6px 0 10px}
.ft-ss-btn{border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:rgba(255,255,255,.75);padding:5px 14px;border-radius:99px;cursor:pointer}
.ft-ss-btn[aria-pressed="true"]{background:var(--orange);color:#fff}
.ft-ss-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ft-v2-note{margin:0 0 12px;font-size:13px;line-height:1.4;color:rgba(255,255,255,.8)}