/* =========================================================
   Fairway Forecast — MOBILE-FIRST PREMIUM (Option B)
   CSS ONLY — no app.js changes
   ========================================================= */

/* ---------- Base / Reset ---------- */
:root{
  /* Premium, higher-contrast green palette */
  --bg: #E4EEE9;
  --surface: #FBFDFC;
  --surface-2: #EDF5F1;

  --text: #071512;
  --muted: #51635F;
  --line: rgba(7, 21, 18, 0.12);

  --brand: #0F766E;
  --brand-2: #115E59;
  --brand-soft: rgba(17,94,89,.16);

  --danger: #C0362C;
  --danger-soft: rgba(192,54,44,.14);

  --shadow-soft: 0 14px 40px rgba(6,24,20,.14);

  --r-xl: 22px;
  --r-lg: 18px;
  --r-md: 14px;

  --gap: 14px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 50% -220px, rgba(31,111,92,.16), transparent 65%),
    linear-gradient(var(--bg), var(--bg));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
button, input, select{ font: inherit; }

/* ---------- Layout ---------- */
.ff-wrap{
  max-width:640px;
  margin:24px auto 32px auto;
  padding: 0 16px calc(18px + env(safe-area-inset-bottom));
}

.ff-shell{
  background:
    radial-gradient(160% 120% at 10% 0%, rgba(17,94,89,.12), transparent 55%),
    radial-gradient(140% 120% at 100% 0%, rgba(14,148,136,.10), transparent 60%),
    var(--surface);
  border-radius:32px;
  border:1px solid rgba(7,21,18,.12);
  box-shadow:var(--shadow-soft);
  padding:18px 16px 16px 16px;
  display:flex;
  flex-direction:column;
  gap: var(--gap);
}

/* ---------- Header ---------- */
.ff-header{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-soft);
  padding:14px;
}
.ff-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.ff-logo{
  width:44px;
  height:44px;
  border-radius:14px;
  background:var(--surface-2);
  border:1px solid var(--line);
  padding:6px;
}
.ff-brand-text strong{
  font-size:18px;
  letter-spacing:.2px;
  display:block;
}
.ff-brand-text span{
  font-size:12.5px;
  color:var(--muted);
  margin-top:3px;
  display:block;
}

/* ---------- Panels / Cards ---------- */
.ff-panel,
.ff-verdict,
.ff-results > *{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-soft);
}
.ff-panel{ padding:14px; }

/* Course/location header card – slightly tinted for stronger icon contrast */
.ff-course-header{
  background: #E3F2EC;
  border-color: rgba(31,111,92,.28);
}
.ff-course-header .ff-course-title{
  font-weight: 800;
}
.ff-course-header .ff-sub{
  color: #3E5A53;
}

/* ---------- Search ---------- */
.ff-label{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  margin-bottom:10px;
  display:block;
}
/* --- Search results slot: sits under search bar --- */
.ff-search-results{
  display:none;              /* hidden until it has content */
  margin-top: -6px;          /* visually tucks under search card */
}

.ff-search-results:has(*){
  display:block;
}

/* The card that app.js renders (“Select a result”) */
.ff-search-results > *{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
  padding: 14px;
}

/* Make the list easier to scan/tap */
.ff-search-results button,
.ff-search-results a{
  width:100%;
  text-align:left;
}
/* IMPORTANT: contain the geo button + prevent overflow */
.ff-search-row{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:10px;
  align-items:center;
  width: 100%;
}

.ff-input{
  padding:13px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  font-size:16px;
  background:#fff;
  min-width: 0;
  width: 100%;
}

.ff-input:focus{
  border-color:rgba(31,111,92,.45);
  box-shadow:0 0 0 4px rgba(31,111,92,.14);
  outline:none;
}

.ff-btn{
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:700;
  font-size:15px;
  min-height:46px;
  padding:12px 14px;
  cursor:pointer;
  max-width: 100%;
}

.ff-btn-primary{
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  color:#fff;
  border-color:rgba(31,111,92,.45);
}

.ff-btn-ghost{
  width:46px;
  min-width:46px;
  padding:0;
  display:grid;
  place-items:center;
  background:#fff;
}

.ff-units-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
}
.ff-select{
  border-radius:16px;
  border:1px solid var(--line);
  padding:10px 12px;
  font-weight:700;
  background:#fff;
  min-height:44px;
}

/* Mobile: force geo button INSIDE the card by stacking row */
@media (max-width: 520px){
  .ff-search-row{
    grid-template-columns: 1fr 46px;
    grid-template-areas:
      "input geo"
      "search search";
  }
  #searchInput{ grid-area: input; }
  #btnGeo{ grid-area: geo; }
  #searchBtn{ grid-area: search; width:100%; }
}

/* ---------- Tabs (sticky segmented control) ---------- */
.ff-tabs{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
  position: sticky;
  top: 8px;
  z-index: 20;
  padding: 8px;
  margin: 0 -2px;
  border-radius: 22px;
  background: rgba(241,245,243,.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(14,28,26,.08);
}

.ff-tab{
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--surface);
  min-height:46px;
  font-weight:900;
  font-size:15px;
}

.ff-tab.active{
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  color:#fff;
  border-color:rgba(31,111,92,.45);
}

/* ---------- Verdict (Play / No-Play) ---------- */
.ff-verdict{
  padding:12px 14px;
}
.ff-verdict-main{
  display:flex;
  gap:12px;
  align-items:center;
}
.ff-verdict-badge,
.ff-verdict-icon{
  width:36px;
  height:36px;
  border-radius:14px;
  background:var(--surface-2);
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:18px;
  flex:0 0 auto;
}
.ff-verdict-text{ flex:1; min-width:0; }
.ff-verdict-label{
  font-weight:900;
  font-size:16px;
  line-height:1.15;
}
.ff-verdict-reason{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
}
.ff-verdict-meta{
  margin-top:8px;
  padding-top:8px;
  border-top:1px dashed rgba(14,28,26,.18);
  font-size:13px;
  color:var(--muted);
}

.ff-verdict--play{
  background:linear-gradient(180deg,rgba(31,111,92,.16),#fff);
  border-color:rgba(31,111,92,.35);
}
.ff-verdict--no{
  background:linear-gradient(180deg,rgba(192,54,44,.16),#fff);
  border-color:rgba(192,54,44,.35);
}
.ff-verdict--maybe{
  background:linear-gradient(180deg,rgba(245,158,11,.18),#fff);
  border-color:rgba(245,158,11,.30);
}

/* ---------- Results ---------- */
.ff-results{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}
#results > *{ padding:14px; }

/* Current card layout helpers */
.ff-current-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.ff-current-icon{
  display:flex;
  align-items:center;
  justify-content:center;
}

#results h2, #results h3{
  margin:0 0 6px 0;
  font-size:18px;
  letter-spacing:.1px;
}
#results p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

/* ---------- Favourites chips (wrap nicely) ---------- */
#results .favourites,
#results .favorites,
#results [data-favourites],
#results [data-favorites]{
  margin-top:10px;
  padding:10px;
  border-radius:18px;
  background:var(--surface-2);
  border:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  overflow:hidden;
}

/* ---------- Weather icon (emoji-based) ---------- */
.ff-wicon{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  background: radial-gradient(circle at 30% 20%, #ffffff, #f2faf7);
  box-shadow:0 10px 24px rgba(6,24,20,.22);
}

.ff-wicon--xl{
  width:88px;
  height:88px;
  font-size:40px;
}

.ff-wicon--lg{
  width:64px;
  height:64px;
  font-size:30px;
}

.ff-wicon--sm{
  width:32px;
  height:32px;
  font-size:20px;
}
/* =========================================================
   FIX: “Rain chance0% / Sunrise08:10” spacing
   Works when markup is: TextNode + <strong>Value</strong>
   ========================================================= */
#results .ff-kvline{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
}

/* Convert any line that contains a <strong> into a 2-col row */
#results div:has(> strong),
#results p:has(> strong),
#results li:has(> strong){
  display:grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  align-items: baseline;
}

/* Make the label part look consistent (the text node becomes first “cell”) */
#results div:has(> strong) strong,
#results p:has(> strong) strong,
#results li:has(> strong) strong{
  margin-left: 0 !important;
  justify-self: end;
  font-weight: 900;
}

/* If browser doesn’t support :has(), keep a safe fallback */
@supports not(selector(:has(*))){
  #results strong{ margin-left: 8px; }
}

/* ---------- Tables ---------- */
#results table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff;
}
#results thead th{
  background:#EEF4F2;
  color:var(--muted);
  font-size:12.5px;
  font-weight:900;
  padding:10px 10px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
#results tbody td{
  padding:10px 10px;
  border-bottom:1px solid rgba(14,28,26,.06);
  font-weight:800;
  vertical-align:middle;
}
#results tbody tr:last-child td{ border-bottom:0; }
#results td img{
  width:26px;
  height:26px;
  vertical-align:middle;
}

/* Daily: hide last column (usually Summary) */
@media (max-width:520px){
  #results table thead th:last-child,
  #results table tbody td:last-child{
    display:none;
  }
}

/* ---------- Playability footer ---------- */
.ff-play{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.ff-play-title{
  font-weight:900;
  font-size:16px;
}
.ff-play-sub{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  margin-top:2px;
}
.ff-play-score{
  min-width:86px;
  text-align:center;
  font-weight:900;
  font-size:18px;
  padding:10px 14px;
  border-radius:18px;
  background:var(--brand-soft);
  border:1px solid rgba(31,111,92,.22);
}

/* ---------- Icon + ghost button contrast tweaks ---------- */
.ff-btn-ghost{
  background: var(--surface-2);
  color: var(--brand-2);
}

.ff-star{
  color: #e0a500;
}

/* ---------- Modal ---------- */
.ff-modal[hidden]{
  display:none !important;
}

.ff-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  pointer-events:auto;
}

.ff-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(7,15,12,.45);
  backdrop-filter: blur(8px);
}

.ff-modal-dialog{
  position:relative;
  max-width:420px;
  margin:0 16px;
  padding:18px 18px 16px 18px;
  border-radius:22px;
  background:var(--surface);
  border:1px solid rgba(7,21,18,.18);
  box-shadow:0 22px 55px rgba(6,24,20,.5);
  z-index:61;
}

.ff-modal-title{
  margin:0 24px 8px 0;
  font-size:18px;
  font-weight:800;
}

.ff-modal-body{
  margin:0;
  font-size:14px;
  color:var(--muted);
  line-height:1.5;
}

.ff-modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(7,21,18,.16);
  background:var(--surface-2);
  cursor:pointer;
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  font-weight:700;
}
.ff-modal-close:hover{
  background:var(--surface);
  border-color:rgba(7,21,18,.28);
}

/* ---------- Enhanced Current Weather ---------- */
.ff-current-temp{
  font-size:42px;
  font-weight:900;
  line-height:1;
  margin-bottom:4px;
}
.ff-feels-like{
  display:block;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  margin-top:4px;
}
.ff-current-icon{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---------- Wind Direction Compass ---------- */
.ff-wind-display{
  display:flex;
  align-items:center;
  gap:10px;
}
.ff-wind-compass{
  position:relative;
  width:32px;
  height:32px;
  flex-shrink:0;
}
.ff-compass-bg,
.ff-compass-arrow{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.ff-compass-arrow{
  transition:transform 0.3s ease;
  color:var(--brand);
}
.ff-wind-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ff-wind-text strong{
  font-size:15px;
}
.ff-wind-dir{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}

/* ---------- Enhanced Decision Card ---------- */
.ff-verdict-quick-stats{
  display:flex;
  gap:12px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed rgba(7,21,18,.15);
}
.ff-quick-stat{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
}
.ff-quick-label{
  font-size:11px;
  color:var(--muted);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.ff-quick-stat strong{
  font-size:16px;
  font-weight:900;
  color:var(--text);
}

/* ---------- Horizontal Hourly Forecast ---------- */
.ff-hourly-scroll{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:8px 0 16px 0;
  margin:0 -14px;
  padding-left:14px;
  padding-right:14px;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.ff-hourly-scroll::-webkit-scrollbar{
  height:6px;
}
.ff-hourly-scroll::-webkit-scrollbar-track{
  background:transparent;
}
.ff-hourly-scroll::-webkit-scrollbar-thumb{
  background:var(--line);
  border-radius:3px;
}
.ff-hourly-card{
  flex:0 0 auto;
  width:80px;
  padding:12px 8px;
  border-radius:16px;
  background:var(--surface-2);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  transition:all 0.2s ease;
}
.ff-hourly-card:hover{
  background:var(--surface);
  border-color:rgba(15,118,110,.25);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(6,24,20,.1);
}
.ff-hourly-best{
  background:var(--brand-soft);
  border-color:var(--brand);
  border-width:2px;
  box-shadow:0 4px 16px rgba(15,118,110,.2);
}
.ff-hourly-time{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}
.ff-hourly-icon{
  font-size:24px;
}
.ff-hourly-temp{
  font-size:16px;
  font-weight:900;
}
.ff-hourly-rain{
  font-size:11px;
  color:var(--muted);
  font-weight:700;
}
.ff-hourly-wind{
  font-size:11px;
  color:var(--muted);
  font-weight:700;
}

/* ---------- Mini Charts ---------- */
.ff-hourly-charts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.ff-chart-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ff-chart-label{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.ff-mini-chart{
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:60px;
  padding:4px 0;
}
.ff-mini-bar{
  flex:1;
  min-width:4px;
  border-radius:2px 2px 0 0;
  transition:opacity 0.2s;
}
.ff-mini-bar:hover{
  opacity:0.8;
}

/* ---------- Footer ---------- */
.ff-foot{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  padding:6px 0;
}

/* ---------- Ultra small: tighten ---------- */
@media (max-width:360px){
  .ff-wrap{ padding-left:12px; padding-right:12px; }
  .ff-panel, #results > *{ padding:12px; }
  .ff-tab{ min-height:44px; font-size:14px; }
}