/* Frontend Preferences v1: site-wide dialog and V2-only mobile panel owner.
   The Condition Engine, published data and desktop/tablet grid remain untouched. */
.sccft-preferences-menu-item { display:none !important; }
@media(max-width:759px) {
  .sccft-preferences-menu-item {display:list-item !important;}
}
.sccft-preferences-trigger {cursor:pointer;}
.sccft-preferences-shortcode-trigger {border:1px solid #cbd3d0;border-radius:12px;padding:9px 13px;background:#f8f3ea;color:#263b44;}
.sccft-preferences-host[hidden] {display:none !important;}
.sccft-preferences-host {position:fixed;inset:0;z-index:2147483500;isolation:isolate;}
.sccft-pref-backdrop {position:absolute;inset:0;background:rgba(17,32,44,.48);}
.sccft-pref-dialog {
  position:absolute;top:0;right:0;bottom:0;width:min(100%,440px);display:flex;flex-direction:column;
  box-sizing:border-box;max-height:100dvh;background:#faf8f4;color:#2a343b;
  box-shadow:-10px 0 42px rgba(12,36,49,.2);font:inherit;outline:none;
}
.sccft-pref-dialog * {box-sizing:border-box;}
.sccft-pref-head {display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:22px 18px 13px;border-bottom:1px solid #e5e3dc;}
.sccft-pref-head h2 {font-size:23px;line-height:1.2;margin:0 0 5px;}
.sccft-pref-head p,.sccft-pref-body p {font-size:13px;line-height:1.4;color:#63717a;margin:4px 0 12px;}
.sccft-pref-head button {border:1px solid #d5dcd8;border-radius:99px;min-width:40px;height:40px;background:#fff;color:#263c4b;cursor:pointer;}
.sccft-pref-body {overflow-y:auto;overscroll-behavior:contain;padding:8px 18px 20px;flex:1;}
.sccft-pref-body h3 {font-size:16px;margin:16px 0 7px;}
.sccft-pref-row {display:flex;align-items:center;gap:8px;justify-content:space-between;border-bottom:1px solid #e5e3dc;min-height:52px;}
.sccft-pref-row-label {display:flex;align-items:center;gap:8px;min-width:0;flex:1;font-size:14px;line-height:1.3;}
.sccft-pref-row-label input,.sccft-pref-opt input {width:18px;height:18px;accent-color:#377e9e;flex:none;}
.sccft-pref-arrows {display:flex;gap:4px;flex:none;}
.sccft-pref-arrows button {border:1px solid #d5dcd8;background:#fff;border-radius:8px;color:#273e4b;width:35px;height:36px;cursor:pointer;font-size:17px;}
.sccft-pref-arrows button:disabled {opacity:.25;cursor:default;}
.sccft-pref-opt {display:flex;align-items:center;gap:9px;min-height:42px;font-size:14px;}
.sccft-pref-note {margin-top:17px !important;}
.sccft-pref-foot {display:flex;gap:8px;padding:14px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid #e5e3dc;}
.sccft-pref-foot button {min-height:46px;border-radius:12px;padding:9px 12px;flex:1;font-size:14px;cursor:pointer;}
.sccft-pref-foot [data-pref-reset] {border:1px solid #ccd5d2;background:#fff;color:#344a54;}
.sccft-pref-foot [data-pref-save] {border:1px solid #17729d;background:#1472a3;color:#fff;}
.sccft-pref-dialog button:focus-visible,.sccft-pref-dialog input:focus-visible {outline:2px solid #157aa6;outline-offset:2px;}
body.sccft-pref-is-open {overflow:hidden;}
/* 9.51.4.1: one V2 grid; reorder cards as direct siblings in the SAME .app.
   A nested wrapper interacted with named grid areas in legacy CSS and created
   phantom horizontal columns in mobile Safari after saving preferences. */
@media (max-width:759px) {
  .sccft-spot-forecast-v2[data-sccft-mobile-preferences="1"] .app {
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:"top" "sticky" !important;
    grid-auto-columns:minmax(0,1fr) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:auto !important;
    justify-items:stretch !important;
    align-items:start !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  .sccft-spot-forecast-v2[data-sccft-mobile-preferences="1"] .app > .card,
  .sccft-spot-forecast-v2[data-sccft-mobile-preferences="1"] .app > .sccwp-uxr-details-toggle-wrap {
    grid-area:auto !important;
    grid-column:auto !important;
    grid-row:auto !important;
    order:0 !important;
    min-width:0 !important;
    max-width:100% !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    justify-self:stretch !important;
    align-self:start !important;
    box-sizing:border-box !important;
  }
  .sccft-spot-forecast-v2[data-sccft-mobile-preferences="1"] .app > .card[hidden],
  .sccft-spot-forecast-v2[data-sccft-mobile-preferences="1"] .app > .sccwp-uxr-details-toggle-wrap[hidden],
  .sccft-spot-forecast-v2[data-sccft-mobile-preferences="1"] .app > .sccwp-uxr-details[hidden] {
    display:none !important;
  }
  .sccft-spot-forecast-v2[data-sccft-mobile-preferences="1"] .app > .mapcard {
    position:relative !important;
    min-height:232px !important;
    aspect-ratio:1.5;
    overflow:hidden !important;
    isolation:isolate;
  }
}
@media(prefers-reduced-motion:reduce){.sccft-pref-dialog{scroll-behavior:auto;}}


.sccft-pref-feedback {margin:0 18px 4px;padding:10px 12px;border:1px solid #d3ddd7;border-radius:10px;background:#eaf5f0;color:#245747;font-size:13px;line-height:1.4;}
.sccft-pref-feedback[hidden]{display:none!important;}
.sccft-pref-feedback[data-state="error"]{background:#fff0ee;border-color:#eacac4;color:#8d3430;}
.sccft-pref-foot [data-pref-save]:disabled{opacity:.78;cursor:default;}
.sccft-preferences-trigger .sccft-settings-icon{display:inline-block;vertical-align:-.15em;width:1.15em;height:1.15em;margin-right:.28em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* Disabled positions have no footprint, enabled mobile banners have predictable dimensions. */
.sccft-spot-forecast-v2 .sccft-promo-slot[hidden]{display:none!important;}
.sccft-spot-forecast-v2 .sccft-promo-slot{display:none!important;}
@media(max-width:759px){
  .sccft-spot-forecast-v2[data-sccft-mobile-preferences="1"] .app > .sccft-promo-slot:not([hidden]){
    display:flex!important;align-items:center;gap:10px;grid-area:auto!important;grid-column:auto!important;
    grid-row:auto!important;min-width:0!important;width:100%!important;max-width:100%!important;
    min-height:82px;height:82px;max-height:82px;box-sizing:border-box;padding:12px 14px;
    background:#f5f1e8;color:#253a43;border:1px solid #e9e4d7;border-radius:16px;overflow:hidden;
  }
  .sccft-promo-slot__category{font-size:11px;max-width:66px;flex:none;color:#436476;}
  .sccft-promo-slot__copy{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0;overflow:hidden;}
  .sccft-promo-slot__copy strong,.sccft-promo-slot__copy span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .sccft-promo-slot__copy strong{font-size:14px;}
  .sccft-promo-slot__copy span{font-size:12px;color:#63717a;}
  .sccft-promo-slot__link{font-size:12px;flex:none;color:#096e9f;}
}

/* 9.51.6 image mode: natural 3.75:1 artwork across the complete mobile card.
   The browser preserves its aspect ratio; there is no fixed-height crop. */
@media(max-width:759px){
  .sccft-spot-forecast-v2[data-sccft-mobile-preferences="1"] .app > .sccft-promo-slot[data-sccft-banner-mode="image"]:not([hidden]){
    display:block!important;min-height:0!important;max-height:none!important;height:auto!important;
    padding:0!important;border:0!important;background:transparent!important;
    overflow:hidden;border-radius:15px;
  }
  .sccft-promo-slot__selected,.sccft-promo-banner__link{display:block;width:100%;max-width:100%;min-width:0;line-height:0;}
  .sccft-promo-banner__link:focus-visible{outline:3px solid #187bb3;outline-offset:-3px;border-radius:15px;}
  .sccft-promo-banner__image{display:block;width:100%;height:auto!important;max-width:100%;aspect-ratio:15/4;object-fit:contain;border-radius:15px;}
}