/* Poolside Edit owns the planner's presentation; shared legacy pages stay intact. */
@font-face { font-family: "Pool Sans"; src: url("/assets/fonts/dm-sans.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pool Rounded"; src: url("/assets/fonts/nunito-bold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
body.backyard-club.poolside-edit {
  --display-font: "Pool Rounded", ui-rounded, system-ui, sans-serif;
  --club-rule: rgb(var(--scene-muted, 82 102 90) / .25);
  --club-gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --club-header: inherit; --club-canvas: inherit;
  --muted: rgb(var(--scene-muted,82 102 90)); --ink: rgb(var(--scene-ink,32 57 47));
  background: rgb(var(--club-canvas, 246 248 245)) !important;
  color: rgb(var(--scene-ink, 32 57 47));
  font-family: "Pool Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.5;
}
body.backyard-club.poolside-edit.kite-mode {
  --scene-surface: inherit; --scene-inner: inherit; --scene-ink: inherit; --scene-muted: inherit;
}
.poolside-edit :is(button,input,select,textarea) { font-family: inherit; letter-spacing: 0; }
.poolside-edit :is(button,summary,a,label) { touch-action: manipulation; }
.poolside-edit #interactivePoolFloat { touch-action: none; }
body.poolside-edit > :is(.ambient-sky,.pool-water,.beach-ball) { display: none; }
.poolside-edit .page-shell { width: min(1120px, calc(100% - 48px)); max-width: 1120px; margin: 8px auto 0; }
.poolside-edit .app-view { background: transparent; }
body.poolside-edit #appView main { background: transparent; padding: 0 var(--club-gutter); }
body.backyard-club.poolside-edit .app-header { background: transparent; padding: 24px var(--club-gutter) 16px; }
.poolside-edit .brand-lockup h1 { font: 800 27px/1.1 var(--display-font); }
.poolside-edit .brand-lockup p { font-size: 11px; color: rgb(var(--scene-muted)); }
.poolside-edit .brand-lockup img { width: 35px; height: 35px; }
.poolside-edit .header-actions { gap: 4px; }
body.poolside-edit .mode-toggle-button { border: 1px solid var(--club-rule) !important; border-radius: 50%; }
.poolside-edit :is(button,a,summary,input,select):focus-visible { outline: 3px solid rgb(var(--scene-link, 35 100 170)); outline-offset: 3px; }
body.backyard-club.poolside-edit #appView .current-strip {
  padding: 10px 0; min-height: 43px; margin: 0 0 18px;
  background: transparent !important; border-block: 1px solid var(--club-rule) !important;
  font-size: 12px; font-weight: 400; gap: 12px;
}
.poolside-edit .current-strip > span { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }
.poolside-edit .current-strip > span:last-child { justify-content: flex-end; text-align: right; }
.poolside-edit .current-strip small { font-size: 11px; color: rgb(var(--scene-muted)); }
.poolside-edit .current-strip strong { font-size: 17px; font-weight: 600; color: rgb(var(--scene-ink)); font-variant-numeric: tabular-nums; }
.poolside-edit .planner-layout, .poolside-edit .planner-support { min-width: 0; }
.poolside-edit .planner-support { display: flex; flex-direction: column; }
body.backyard-club.poolside-edit #appView .calendar-tool {
  padding: 14px 0 0; margin: 0; border-top: 2px solid rgb(var(--scene-muted)) !important;
  background: transparent !important;
}
.poolside-edit .calendar-heading { display: grid; grid-template-columns: minmax(0,1fr) 125px; gap: 8px; margin: 0 0 14px; align-items: center; }
.poolside-edit .calendar-heading > div:first-child { grid-column: 1; grid-row: 1; }
.poolside-edit :is(.calendar-actions,.calendar-nav-row) { display: flex; }
.poolside-edit .calendar-actions { grid-column: 2; grid-row: 1; justify-content: flex-end; }
.poolside-edit .calendar-nav-row { flex-direction: column; align-items: flex-end; gap: 0; }
.poolside-edit .calendar-eyebrow { font: 500 9px/1.4 "Pool Sans",sans-serif; color: rgb(var(--scene-muted)); margin: 0 0 5px; }
.poolside-edit .calendar-tool h2 { font: 800 20px/1.2 var(--display-font); text-wrap: balance; }
.poolside-edit .calendar-heading .week-nav { display: flex; gap: 0; }
.poolside-edit .updated-at { font: 400 10px/1.35 "Pool Sans",sans-serif; color: rgb(var(--scene-muted)); text-align: right; max-width: 125px; }
.poolside-edit :is(.weekday-row,.calendar-grid) { gap: 6px; }
.poolside-edit .weekday-row { font-size: 11px; font-weight: 500; margin-bottom: 8px; }
.poolside-edit :is(.day-tile,.calendar-pad) { height: 100px; min-height: 100px; }
body.poolside-edit #calendarGrid .day-tile {
  border-radius: 6px; border: 1px solid #49624520; box-shadow: none !important;
  background: #baddb9; color: #22372b !important;
}
body.poolside-edit #calendarGrid .day-tile.anytime { background: #baddb9; }
body.poolside-edit #calendarGrid .day-tile.peak { background: #f4d786; }
body.poolside-edit #calendarGrid .day-tile.no { background: #edb5ae; }
body.poolside-edit #calendarGrid .day-tile.needs-water { background: #e3e8e3; }
body.poolside-edit #calendarGrid .day-tile.quality-outlook { border-style: solid; }
body.poolside-edit #calendarGrid .day-tile.quality-outlook.anytime { background: #e1eee0; }
body.poolside-edit #calendarGrid .day-tile.quality-outlook.peak { background: #f6edcf; }
body.poolside-edit #calendarGrid .day-tile.quality-outlook.no { background: #f2e1dd; }
body.poolside-edit.kite-mode #calendarGrid .day-tile.kite-good { background: #b5ddce; }
body.poolside-edit.kite-mode #calendarGrid .day-tile.kite-maybe { background: #f2dc98; }
body.poolside-edit.kite-mode #calendarGrid .day-tile.kite-no { background: #e8bab7; }
body.poolside-edit.kite-mode #calendarGrid .day-tile.kite-unknown { background: #dde6ec; }
body.poolside-edit.kite-mode #calendarGrid .day-tile.quality-outlook.kite-good { background: #e0ece7; }
body.poolside-edit.kite-mode #calendarGrid .day-tile.quality-outlook.kite-maybe { background: #f4edda; }
body.poolside-edit.kite-mode #calendarGrid .day-tile.quality-outlook.kite-no { background: #efe1df; }
body.poolside-edit #calendarGrid .day-tile.is-past { background: #e3e8e3; border-color: #ced8d0; }
body.poolside-edit #calendarGrid .day-tile:is(.is-selected,[aria-pressed="true"]) { outline: 0; }
body.poolside-edit #calendarGrid .day-tile.is-today { outline: 2px solid rgb(var(--scene-ink)); outline-offset: 1px; }
body.poolside-edit #calendarGrid .day-tile.is-planned { border-bottom: 3px solid #39705b; }
body.poolside-edit #calendarGrid .day-tile:focus-visible { outline: 3px solid rgb(var(--scene-link)); outline-offset: 2px; }
.poolside-edit .day-card-front { padding: 8px 1px; }
/* Explicit faces avoid WebKit painting the reverse through a transparent card. */
.poolside-edit #calendarGrid .day-card-face { opacity: 0; visibility: hidden; transition: opacity 0s 150ms, visibility 0s 150ms; }
.poolside-edit #calendarGrid .day-tile:not(.is-flipped) .day-card-front,
.poolside-edit #calendarGrid .day-tile.is-flipped .day-card-back { opacity: 1; visibility: visible; }
.poolside-edit .day-number { font-size: 14px; font-weight: 600; }
.poolside-edit .tile-status { font: 800 25px/1 var(--display-font); }
.poolside-edit .tile-temp { font-size: 14px; font-weight: 600; }
.poolside-edit #calendarGrid .day-card-back { grid-template-rows: 10px 18px 10px 18px minmax(0,1fr); padding: 7px 2px; gap: 2px; }
.poolside-edit #calendarGrid .back-label { font-size: 9px; }
.poolside-edit #calendarGrid .back-value { font: 600 15px/1.1 "Pool Sans",sans-serif; }
.poolside-edit #calendarGrid .back-condition { font-size: 10px; font-weight: 500; overflow-wrap: anywhere; }
.poolside-edit.kite-mode #calendarGrid .back-value { font-size: 10px; }
.poolside-edit.kite-mode .tile-temp { font-size: 10px; }
.poolside-edit .club-legend { justify-content: space-between; gap: 6px; font-size: 10px; padding: 15px 0 12px; }
.poolside-edit .club-legend span { gap: 4px; }
.poolside-edit .calendar-footer { border-top: 1px solid var(--club-rule); gap: 8px; }
.poolside-edit .history-toggle, .poolside-edit .calendar-footer .day-details-link { font-size: 11px; }
.poolside-edit .history-toggle { gap: 5px; }
.poolside-edit .calendar-footer .day-details-link { text-decoration: none; color: rgb(var(--scene-muted)); }
.poolside-edit .forecast-confidence { border-top: 1px solid var(--club-rule); font-size: 12px; color: rgb(var(--scene-muted)); }
.poolside-edit .forecast-confidence summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 11px; list-style: none; }
.poolside-edit .forecast-confidence p { font-size: 12px; line-height: 1.6; margin: 0 0 12px; }
body.backyard-club.poolside-edit #appView .club-section {
  padding: 18px 0; margin: 0; border-top: 1px solid var(--club-rule) !important;
  background: transparent !important; box-shadow: none !important;
}
body.backyard-club.poolside-edit #appView .poolside-section { padding: 0; margin: 18px 0 0; border: 0 !important; }
body.poolside-edit:not(.kite-mode) #mobileSpriteStage { width: 100%; max-width: 100%; aspect-ratio: 2.4; min-height: 136px; }
.poolside-edit .illustrated-backyard img { object-position: center 62%; }
.poolside-edit .poolside-sign { top: 10px; right: 10px; width: 108px; height: 50px; padding: 6px 8px; border-width: 1px; box-shadow: none; transform: rotate(2deg); }
.poolside-edit .poolside-sign::before { display: none; }
.poolside-edit .poolside-sign > span { font-size: 7px; }
.poolside-edit .poolside-sign > strong { font: 600 11px/1.15 "Pool Sans",sans-serif; }
body.backyard-club.poolside-edit #appView .today-section { border-top: 0 !important; padding: 18px 0; }
.poolside-edit .today-band h2 { font: 800 20px/1.2 var(--display-font); }
.poolside-edit .today-band p:last-child { font-size: 12px; margin-top: 7px; text-wrap: pretty; }
.poolside-edit .today-band .refresh-button { font-size: 12px; padding: 8px 12px; }
.poolside-edit .post-calendar-notices { margin: 12px 0 0; padding: 0; border: 0; gap: 8px; }
.poolside-edit #appView :is(.safety-banner,.pool-reminder) { font-size: 11px; line-height: 1.5; }
.poolside-edit #appView .safety-banner strong { font-size: 11px; font-weight: 400; }
.poolside-edit #appView .safety-banner span { font-size: 11px; }
.poolside-edit #appView .pool-reminder button { font-size: 11px; }
body.backyard-club.poolside-edit #appView .club-disclosure { padding: 0; }
.poolside-edit .club-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 0; list-style: none; font-size: 14px; font-weight: 500; }
.poolside-edit :is(.club-disclosure,.forecast-confidence) > summary::-webkit-details-marker { display: none; }
.poolside-edit :is(.club-disclosure,.forecast-confidence) > summary svg { width: 16px; height: 16px; flex-shrink: 0; }
.poolside-edit :is(.club-disclosure,.forecast-confidence)[open] > summary svg { transform: rotate(90deg); }
body.poolside-edit #appView .club-disclosure > :is(.pool-tool,.swim-feedback) { margin: 0; padding: 0 0 18px; background: transparent !important; border: 0 !important; }
.poolside-edit :is(.pool-tool,.swim-feedback) h2 { font: 800 18px/1.3 var(--display-font); }
.poolside-edit :is(.pool-tool,.swim-feedback) p { font-size: 12px; line-height: 1.6; }
.poolside-edit .tool-heading { align-items: flex-start; flex-wrap: wrap; }
.poolside-edit .tool-heading > div { min-width: 0; }
.poolside-edit #appView .pool-form { margin-top: 12px; }
.poolside-edit .club-footer { padding: 12px 0 max(20px,env(safe-area-inset-bottom)); border-top: 1px solid var(--club-rule); background: transparent; margin-top: 0; }
.poolside-edit .club-footer :is(a,button) { font-size: 11px; }
.poolside-edit .club-footer svg { width: 15px; height: 15px; }
.poolside-edit .app-tools-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.poolside-edit .app-tools h2 { font: 800 19px/1.3 var(--display-font); }
.poolside-edit .app-tools p { font-size: 12px; }
.poolside-edit .app-tool-choice { grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; }
.poolside-edit .app-tool-choice > span { font-size: 12px; }
.poolside-edit .app-tool-choice .day-details-link { grid-column: 2; justify-self: end; font-size: 11px; }
.poolside-edit .app-tool-choice :is(.share-button,.primary-button) { max-width: 165px; font-size: 12px !important; }
/* Both activity modes use the same adaptive foregrounds, including open dialogs. */
body.poolside-edit :is(#appView,.day-details-dialog,.postcard-dialog,.auth-panel) { color: rgb(var(--scene-ink)); }
body.poolside-edit :is(.brand-lockup,.calendar-tool,.today-band,.details-panel,.app-tools) :is(h1,h2,h3) { color: rgb(var(--scene-ink)) !important; }
body.poolside-edit :is(.brand-lockup p,.updated-at,.weekday-row,.eyebrow,.today-band p,.source-note,.day-condition,.day-confidence,.muted-text,.learning-note,.share-status,.feedback-context,.history-toggle,label) { color: rgb(var(--scene-muted)) !important; }
body.poolside-edit :is(.form-error,.save-status,.updated-at.is-stale) { color: rgb(var(--scene-alert)) !important; }
body.poolside-edit :is(#appView,.day-details-dialog,.postcard-dialog,.auth-panel) :is(.primary-button,.refresh-button,.pool-input-row button,.token-form button,.passkey-login-button) {
  background: #235b48 !important; color: #fff !important; border: 1px solid #235b48 !important;
  min-height: 44px; box-shadow: none !important; border-radius: 6px;
}
body.poolside-edit.kite-mode :is(#appView,.day-details-dialog,.auth-panel) :is(.primary-button,.refresh-button,.token-form button) { background: #315b76 !important; border-color: #315b76 !important; }
body.poolside-edit :is(.day-details-dialog,.postcard-dialog,.auth-panel) { background: rgb(var(--scene-surface)) !important; background-image: none !important; box-shadow: none !important; border: 1px solid var(--club-rule) !important; }
body.poolside-edit :is(.auth-panel input,.postcard-dialog button) { font-size: 16px; }
body.poolside-edit .auth-panel input { background: rgb(var(--scene-inner)); color: rgb(var(--scene-ink)); }
body.poolside-edit .auth-panel .auth-mark { border-radius: 8px; box-shadow: none; }
body.poolside-edit .auth-panel h1 { font: 800 30px/1.15 var(--display-font); }
body.poolside-edit .auth-panel { padding: 24px; width: min(440px,100%); }
.poolside-edit .day-details-dialog { padding: 20px; }
body.poolside-edit #dayDetailsDialog .details-panel { background: transparent !important; }
.poolside-edit .metrics-grid { gap: 10px; }
body.poolside-edit .metric strong { color: rgb(var(--scene-ink)) !important; }
body.poolside-edit .metric span { color: rgb(var(--scene-muted)) !important; }
body.poolside-edit .reason-list li { color: rgb(var(--scene-muted)) !important; }
body.poolside-edit .source-note a { color: rgb(var(--scene-link)) !important; }
.poolside-edit .planned-party-heading { gap: 10px; align-items: flex-start; }
.poolside-edit .planned-party-heading > div { flex: 1; min-width: 0; }
.poolside-edit .planned-party-facts { gap: 6px; }
.poolside-edit .planned-party-facts strong { font-size: 17px; overflow-wrap: anywhere; }
.poolside-edit .planned-party-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.poolside-edit .planned-party-actions button { flex: 1; }
body.poolside-edit .status-pill { color: #22372b !important; }
.poolside-edit.kite-mode .poolside-section { display: block; }
body.poolside-edit.kite-mode #mobileSpriteStage {
  display: block; position: relative; height: 136px; border: 0; margin: 0; overflow: hidden;
  background: linear-gradient(180deg,rgb(var(--scene-water-top)) 0%,rgb(var(--scene-water-mid)) 72%,rgb(var(--scene-inner)) 73%);
}
.poolside-edit.kite-mode .sprite-stage-sun { display: block; background: #f2d982; border: 0; opacity: calc(1 - var(--scene-night-opacity)); }
.poolside-edit.kite-mode .sprite-stage-water { display: none; }
.poolside-edit.kite-mode .stage-sprite { z-index: 2; }
.kite-stage-art { display: none; }
.poolside-edit.kite-mode .kite-stage-art {
  display: grid; position: absolute; inset: 8px 0; place-items: center; pointer-events: none;
}
.poolside-edit .kite-stage-art .postcard-sprite { width: 220px; max-width: 75%; height: 112px; }
.poolside-edit .kite-stage-art svg { display: block; width: 100%; height: 100%; }
/* Solar calculations already move a little each minute. Keep ink/surfaces
   synchronized; only scenery cross-fades over the interval. */
body.poolside-edit, body.poolside-edit :is(.app-header,.auth-panel,.current-strip,.calendar-tool,.club-section,.today-band,.pool-tool,.swim-feedback,.details-panel,.day-details-dialog,.postcard-dialog,.metric,.pool-curve,.planned-party-panel,.app-tools) { transition: none !important; }
@media (min-width: 960px) {
  .poolside-edit .planner-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(300px,1fr); gap: 32px; align-items: start; }
  body.poolside-edit #appView .calendar-tool { position: sticky; top: 20px; }
  body.backyard-club.poolside-edit #appView .poolside-section { margin-top: 0; }
  .poolside-edit :is(.day-tile,.calendar-pad) { height: 114px; min-height: 114px; }
  .poolside-edit .tile-status { font-size: 28px; }
  .poolside-edit #calendarGrid .day-card-back { grid-template-rows: 12px 22px 12px 22px minmax(0,1fr); padding: 7px 2px; }
  .poolside-edit #calendarGrid .back-label { font-size: 10px; }
  .poolside-edit #calendarGrid .back-value { font-size: 18px; }
  .poolside-edit.kite-mode #calendarGrid .back-value { font-size: 13px; }
  .poolside-edit.kite-mode .tile-temp { font-size: 13px; }
  .poolside-edit .club-footer { margin-top: 24px; }
}
@media (max-width: 619px) {
  body.backyard-club.poolside-edit { --club-gutter: max(16px,env(safe-area-inset-left),env(safe-area-inset-right)); }
  .poolside-edit .page-shell { width: 100%; margin: 0; }
  body.backyard-club.poolside-edit .app-header { padding-top: calc(18px + env(safe-area-inset-top)); }
  .poolside-edit .brand-lockup h1 { font-size: 25px; }
  .poolside-edit .calendar-tool h2 { font-size: 19px; }
  .poolside-edit :is(.weekday-row,.calendar-grid) { gap: 5px; }
  .poolside-edit .day-number,.poolside-edit .tile-temp { font-size: 13px; }
  .poolside-edit .tile-status { font-size: 24px; }
  .poolside-edit .club-legend { font-size: 9px; }
  .poolside-edit .day-details-dialog { padding: 18px max(16px,env(safe-area-inset-left)) max(24px,env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  body.backyard-club.poolside-edit { --club-gutter: max(12px,env(safe-area-inset-left),env(safe-area-inset-right)); }
  .poolside-edit .brand-lockup h1 { font-size: 23px; }
  .poolside-edit .brand-lockup img { width: 30px; height: 30px; }
  .poolside-edit .calendar-heading { grid-template-columns: minmax(0,1fr) 105px; }
  .poolside-edit .calendar-tool h2 { font-size: 17px; }
  .poolside-edit .calendar-eyebrow { font-size: 8px; }
  .poolside-edit .updated-at { font-size: 9px; }
  .poolside-edit .club-legend { font-size: 8px; }
  .poolside-edit .club-legend span { gap: 3px; }
  .poolside-edit .history-toggle,.poolside-edit .calendar-footer .day-details-link { font-size: 10px; }
  .poolside-edit #calendarGrid .back-label { font-size: 8px; }
  .poolside-edit #calendarGrid .back-condition { font-size: 8px; }
  .poolside-edit.kite-mode #calendarGrid .back-value,.poolside-edit.kite-mode .tile-temp { font-size: 9px; }
}
@media (max-height: 500px) and (min-width: 620px) { body.poolside-edit #appView .calendar-tool { position: static; } }
@media (prefers-reduced-motion: reduce) {
  .poolside-edit *, .poolside-edit *::before, .poolside-edit *::after { scroll-behavior: auto !important; }
  .poolside-edit #calendarGrid .day-card-face { transition: none; }
}