/* Presentation only: gentle section grouping, preserving all controls and status colours. */
.location-panel,.cards .card,.panel,#tennis-bookings{border:1px solid var(--brand-border);box-shadow:0 3px 14px rgba(20,43,82,.035)}
.location-panel{margin-bottom:20px}
.cards{gap:12px}
.panel{margin-top:20px}

#tennis-bookings{margin:24px 0;background:var(--brand-soft);border-color:var(--brand-border);box-shadow:0 3px 14px rgba(20,43,82,.035)}

#tennis-bookings .booking-row{border-bottom-color:var(--brand-border)}
#tennis-bookings select{background:#fff;border-color:var(--brand-border)}
.panel:has(#chart){margin-top:24px;background:#fffbf3;border-color:#eee5d6}
.panel:has(#chart) .detail{background:#fff3df}
.panel:has(#chart) .monthtitle{background:#f4eddf}
.foot{margin-top:20px}

/* Phase 1 — shared design foundations. Visual only; existing layout and controls remain. */
:root{
  --font-app:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --text-widget-heading:18px;
  --text-widget-body:15px;
  --text-widget-caption:12px;
  --text-widget-action:14px;
  --ui-ink:var(--brand-ink);
  --ui-secondary:var(--brand-muted);
  --ui-blue:var(--brand-action);
  --ui-surface:#fff;
  --ui-background:var(--brand-background);
  --ui-border:var(--brand-border);
  --ui-radius:22px;
  --ui-space-1:4px;
  --ui-space-2:8px;
  --ui-space-3:12px;
  --ui-space-4:16px;
  --ui-space-6:24px;
  --ui-space-8:32px;
  --ui-shadow:0 3px 14px rgba(20,43,82,.035);
}
body{background:var(--ui-background);color:var(--ui-ink);font-family:var(--font-app);-webkit-font-smoothing:antialiased}
.location-panel,.cards .card,.panel,#tennis-bookings{
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius);
  box-shadow:var(--ui-shadow);
}
.location-panel{padding:var(--ui-space-4);margin-bottom:var(--ui-space-6)}
.cards{gap:var(--ui-space-3)}
.cards .card{padding:18px var(--ui-space-4)}
.panel{padding:20px var(--ui-space-4);margin-top:var(--ui-space-6)}

#tennis-bookings{padding:20px var(--ui-space-4);margin:var(--ui-space-6) 0}

.cardhead{line-height:1.35;font-weight:700}
.muted,.line,.booking-subtitle{line-height:1.5}
.metric{font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.location-title{line-height:1.4}
.courtside-strip{border-radius:var(--ui-radius);box-shadow:var(--ui-shadow)}
@media(max-width:400px){
  .cards .card{padding:16px 12px}
  .panel{padding:18px 14px}
  #tennis-bookings{padding:16px 10px}
}

/* Independent, default-closed disclosures. Scope styling to these three cards. */
.section-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;max-width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.section-toggle:focus-visible{outline:2px solid var(--ui-blue);outline-offset:4px;border-radius:4px}
.section-chevron{
 flex:none;width:var(--chevron-size,8px);height:var(--chevron-size,8px);
 border-right:var(--chevron-stroke,1.8px) solid currentColor;border-bottom:var(--chevron-stroke,1.8px) solid currentColor;
 transform:rotate(45deg);margin:0 3px 4px
}
[aria-expanded=true]>.section-chevron{transform:rotate(225deg);margin:var(--chevron-open-margin,0 3px -4px)}
:is(.planning-heading,#daylight-forecast .paneltitle) .section-chevron{
 display:block;flex-basis:8px;align-self:center;--chevron-open-margin:4px 3px 0
}
#booking-details[hidden],#today-details[hidden],#tomorrow-details[hidden]{display:none}
/* Shared planning header with separate forecast and booking spacing. */
.planning-heading,#daylight-forecast>.paneltitle{
 display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px
}
.planning-heading{flex-wrap:wrap}
.booking-topline{margin-bottom:6px}
#tennis-bookings .booking-topline h2{display:flex;align-items:center;flex:1 1 auto;min-width:0;margin:0}
.collapsible-panel>.planning-heading{gap:8px;padding-bottom:0;border-bottom:0}
.collapsible-panel:has(.section-toggle[aria-expanded=true])>.planning-heading{
 padding-bottom:12px;border-bottom:1px solid var(--brand-border)
}
.planning-heading .section-toggle,#daylight-forecast .section-toggle{
 justify-content:flex-start;min-width:0;gap:var(--widget-icon-gap,9px);white-space:normal
}
.panel>.paneltitle .section-toggle{flex:1 1 auto}
.collapsible-panel .section-toggle>span:first-child{border-left:3px solid var(--brand-action);padding-left:10px}
.panel>.paneltitle>small{color:var(--brand-muted);white-space:normal;align-self:center}
@media(max-width:599px){
 .planning-heading,#daylight-forecast>.paneltitle{min-height:44px;flex-wrap:nowrap}
 .booking-topline{gap:10px;margin-bottom:0}
 .booking-topline .booking-share-button{align-self:center}
 .collapsible-panel>.planning-heading .section-toggle{max-width:none}
 .panel>.paneltitle .section-toggle>span:first-child{white-space:normal;min-width:0}
 #daylight-forecast>.paneltitle{gap:10px}
 #daylight-forecast>.paneltitle>small{margin-left:auto;max-width:36%;text-align:right}
}

/* Desktop: align the location with the air-quality observation time. */
@media(min-width:600px){#rainLocation{display:block}.rain-location-separator{display:none}}

/* Consistent supporting copy on mobile; no change to widget layouts. */
@media(max-width:599px){
 .live-status,#booking-status,#tennis-bookings .booking-subtitle,#tennis-bookings .booking-note{font-size:13px;line-height:1.5;overflow-wrap:break-word}
 #tennis-academy .tl-status,#food-academy .tl-status{font-size:13px;line-height:1.5;overflow-wrap:break-word}
 .courtside-details{font-size:12px;line-height:1.5}
}


/* Familiar Blue: neutral cards, blue actions and clear selected states. */
:root{--ui-blue:var(--brand-action);--ui-surface:var(--brand-surface)}
.card,.panel,.location-panel,#tennis-bookings select{background-color:var(--brand-surface)}
#tennis-bookings{background-color:var(--brand-surface)}
.location-options button{background:var(--brand-surface)}
.location-options button[aria-pressed="true"],.rain-day button[aria-pressed="true"],.tab.active{background:var(--brand-action);border-color:var(--brand-action);color:var(--brand-selected-text)}
.rain-day{background:var(--brand-surface)}
.blue,#rainLocation{color:var(--brand-action)}
.hero-booking-label{color:#E5E5EA}
.weekrow{color:var(--brand-ink)}
.weekchart text{fill:var(--brand-muted)}

/* Keep reference widgets neutral; green and amber remain reserved for conditions. */
.panel:has(#chart){background:var(--brand-surface);border-color:var(--brand-border)}
.panel:has(#chart) .detail,.panel:has(#chart) .monthtitle{background:var(--brand-control)}
.rain-day{background:var(--brand-control)}

#today-details .line,#tomorrow-details .line,#daylight-details .line,
#today-details .window,#tomorrow-details .window,#daylight-details .detail,
#tennis-bookings .booking-note,#hero-registry .registry-description{font-size:var(--text-widget-body);line-height:1.5}
/* Shared homepage typography. Every disclosure title uses this one rule. */
.widget-headline{
  font-family:var(--font-app);
  font-size:var(--text-widget-heading);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.02em;
  gap:9px;
}
.widget-caption{
  font-family:var(--font-app);
  font-size:var(--text-widget-caption);
  font-weight:500;
  line-height:1.4;
  letter-spacing:normal;
}

/* Keep the four aligned headings on one icon and title column. */
.aligned-widget{
  --widget-icon-size:36px;
  --widget-icon-gap:9px;
}
:is(#daylight-forecast,#hero-registry,#tennis-academy,#food-academy).aligned-widget{padding-inline:18px}
@media(max-width:370px){
  .aligned-widget{--widget-icon-size:32px;--widget-icon-gap:8px}
}
@media(max-width:340px){
  .aligned-widget{--widget-icon-size:28px;--widget-icon-gap:6px}
}
.aligned-widget .widget-icon-row{gap:var(--widget-icon-gap)}
.widget-icon{
  display:grid;
  place-items:center;
  flex:none;
  width:var(--widget-icon-size);
  height:var(--widget-icon-size);
  border-radius:12px;
  background:var(--brand-control);
}
.daylight-heading-icon{font-size:calc(var(--widget-icon-size) * .64);line-height:1}
#daylight-forecast.panel > .paneltitle{flex-wrap:nowrap}
#daylight-forecast.panel > .paneltitle > .widget-caption{flex:0 1 auto;min-width:0}