/* Scoped to the planner. Legacy comic rules use !important; these overrides
   intentionally leave the admin, invitation, and sprite-gallery pages alone. */
:root {
  --club-header: 245 218 115;
  --club-canvas: 233 243 239;
}
body.backyard-club, body.backyard-club.theme-ready:not(.kite-mode) {
  --club-rule: rgb(var(--scene-muted, 64 86 74) / .25);
  background: rgb(var(--club-canvas)) !important;
  color: rgb(var(--scene-ink, 32 56 47));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  display: flow-root;
}
body.backyard-club::before { display: none; }
body.backyard-club.theme-ready > :is(.ambient-sky, .pool-water, .beach-ball) { opacity: .12 !important; }
.backyard-club .page-shell { width: min(880px, calc(100% - 48px)); max-width: 880px; padding: 0; margin: 24px auto; }
.backyard-club .app-view { background: rgb(var(--scene-surface, 255 254 247)); }
.backyard-club .app-header { margin: 0; padding: 22px 24px; background: rgb(var(--club-header)); gap: 12px; }
.backyard-club .brand-lockup { gap: 10px; min-width: 0; }
.backyard-club .brand-lockup img { width: 40px; height: 40px; border-radius: 8px; box-shadow: none; border: 0; transform: none; }
body.backyard-club .brand-lockup > div { padding: 0; margin: 0; background: none !important; box-shadow: none !important; }
.backyard-club .brand-lockup h1 { font: 800 28px/1.05 "Trebuchet MS", sans-serif; text-shadow: none; }
.backyard-club .brand-lockup p { display: block; font-size: 12px; margin: 5px 0 0; line-height: 1.3; }
.backyard-club .header-actions { gap: 2px; flex: 0 0 auto; }
.backyard-club :is(.club-icon-button, .mode-toggle-button, .week-nav button) {
  display: inline-grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  padding: 10px; background: transparent !important; color: rgb(var(--scene-ink, 32 56 47)) !important;
  border: 0 !important; box-shadow: none !important; border-radius: 6px; transform: none;
}
.backyard-club :is(.club-icon-button, .week-nav button, .club-footer a) svg { width: 19px; height: 19px; }
.backyard-club .mode-toggle-button svg { width: 26px; height: 26px; }
.backyard-club button:focus-visible, .backyard-club a:focus-visible, .backyard-club summary:focus-visible { outline: 3px solid #247da2; outline-offset: 3px; }
body.backyard-club :is(#appView, #dayDetailsDialog) :is(.current-strip, .calendar-tool, .today-band, .pool-tool, .details-panel, .pool-curve, .planned-party-panel, .app-tools, .pool-personality, .holiday-mode-banner, .swim-feedback) {
  background-image: none !important; box-shadow: none !important; border: 0; border-radius: 0;
}
.backyard-club .current-strip { margin: 0; padding: 13px 24px; min-height: 42px; font-size: 12px; border-bottom: 1px solid var(--club-rule) !important; }
.backyard-club .current-strip span { min-width: 0; line-height: 1.5; }
.backyard-club .calendar-tool { margin: 0; padding: 16px 22px 4px; }
.backyard-club .calendar-heading { gap: 6px; align-items: center; padding: 0; margin-bottom: 9px; }
.backyard-club .calendar-heading > div:first-child { flex: 1; min-width: 0; }
.backyard-club .calendar-tool h2 { font: 750 19px/1.25 "Trebuchet MS",sans-serif; margin: 0; }
.backyard-club .calendar-nav-row { gap: 2px; }
.backyard-club .updated-at { font-size: 12px; font-weight: 500; max-width: 140px; text-align: right; line-height: 1.4; }
.backyard-club .week-nav { gap: 0; }
.backyard-club .weekday-row { font-size: 11px; padding: 0; margin: 0 0 9px; font-weight: 500; }
.backyard-club :is(.calendar-grid, .weekday-row) { gap: 6px; }
.backyard-club .calendar-grid { grid-template-columns: repeat(7,minmax(0,1fr)); }
.backyard-club :is(.day-tile, .calendar-pad) { min-width: 0; min-height: 88px; height: 88px; aspect-ratio: auto; }
.backyard-club .day-tile {
  padding: 0; border: 1px solid #55726460; border-radius: 6px; box-shadow: 0 2px 0 #244c321c;
  transform: none; color: #203b30 !important; background: #badfc8;
}
.backyard-club .day-tile.anytime { background: #badfc8; }
.backyard-club .day-tile.peak { background: #f7d77c; }
.backyard-club .day-tile.no { background: #efb6ad; }
.backyard-club .day-tile.needs-water { background: #e4e7e2; }
.backyard-club .day-tile.quality-outlook { border: 1px dashed #587266; }
.backyard-club .day-tile.quality-outlook.anytime { background: #deeee2; }
.backyard-club .day-tile.quality-outlook.peak { background: #f9edc5; }
.backyard-club .day-tile.quality-outlook.no { background: #f3dcd5; }
.backyard-club .day-tile.is-past { background: #e4e9e5; border-color: #c7d2ca; }
body.backyard-club .day-tile :is(.day-number,.tile-status,.tile-temp) { color: #203b30 !important; text-shadow: none; }
body.backyard-club .day-tile.is-past :is(.day-number,.tile-status,.tile-temp) { color: #526559 !important; }
.backyard-club .day-card-inner { display: block; position: relative; width: 100%; height: 100%; transform: none; }
.backyard-club .day-card-front { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 8px 1px; background: none; border: 0; border-radius: inherit; }
.backyard-club .day-number { font-size: 14px; font-weight: 650; line-height: 1; }
.backyard-club .tile-status { font: 800 25px/1 "Trebuchet MS",sans-serif; text-transform: none; margin: 0; }
.backyard-club .tile-temp { font-size: 14px; font-weight: 650; line-height: 1; white-space: nowrap; }
.backyard-club .day-tile:is(.is-selected,.is-today,[aria-pressed="true"]) { outline: 2px solid #39705b; outline-offset: 1px; box-shadow: none; }
.backyard-club .day-number { text-decoration: none !important; }
.backyard-club .day-tile.is-planned { border-bottom: 4px solid #39705b; }
.backyard-club .club-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 16px; font-size: 11px; color: rgb(var(--scene-muted,64 86 74)); padding: 16px 0 6px; }
.backyard-club .club-legend span { display: inline-flex; align-items: center; gap: 5px; }
.backyard-club .club-legend i { width: 6px; height: 6px; border-radius: 50%; }
.legend-yes { background: #49865e; }.legend-peak { background: #a7801b; }.legend-no { background: #ae5e54; }
.backyard-club .history-toggle { font-size: 12px; font-weight: 500; min-height: 44px; margin: 0; padding: 0; gap: 8px; }
.backyard-club .history-toggle input { width: 17px; height: 17px; accent-color: #286650; }
body.backyard-club:not(.kite-mode) #mobileSpriteStage { aspect-ratio: 2.1; margin-top: 0; }
.backyard-club .illustrated-backyard img { object-fit: cover; object-position: center 65%; }
body.backyard-club:not(.kite-mode) #poolPersonality.illustrated-mood { grid-template-columns: 48px minmax(0,1fr); padding: 12px 22px; gap: 12px; margin: 0; }
.backyard-club .pool-mood-art { width: 48px; height: 48px; border-radius: 5px; }
.backyard-club .illustrated-mood > div { padding: 0; }
.backyard-club .illustrated-mood strong { font-size: 13px; }
.backyard-club .pool-extras-links { margin: 0 22px; border-block: 1px solid var(--club-rule); }
.backyard-club .pool-extras-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600; }
.backyard-club .holiday-mode-banner { margin: 0; padding: 10px 22px; font-size: 12px; min-height: 44px; text-align: left; }
.backyard-club .post-calendar-notices { padding: 0 22px; margin: 0; }
.backyard-club :is(.safety-banner,.pool-reminder) { box-shadow: none; border-radius: 0; border: 0; border-bottom: 1px solid var(--club-rule); padding: 12px 0; margin: 0; font-size: 12px; line-height: 1.5; }
.backyard-club .safety-banner strong { font-size: 12px; font-weight: 550; }
.backyard-club .today-band { margin: 0 22px; padding: 18px 0; gap: 16px; border-bottom: 1px solid var(--club-rule) !important; }
.backyard-club .today-band h2 { font-size: 20px; line-height: 1.2; }
.backyard-club .today-band p:last-child { font-size: 13px; line-height: 1.5; }
.backyard-club .eyebrow { font-size: 10px; }
.backyard-club :is(.refresh-button,.primary-button,.share-button,.pool-form button) { min-height: 44px; border-radius: 6px; box-shadow: none; font-size: 13px; transform: none; }
.backyard-club :is(.swim-feedback,.pool-tool,.app-tools,.planned-party-panel) { margin: 0 22px; padding: 20px 0; border-bottom: 1px solid var(--club-rule) !important; }
.backyard-club :is(.swim-feedback,.pool-tool,.app-tools,.planned-party-panel) h2 { font-size: 18px; line-height: 1.35; }
.backyard-club :is(.swim-feedback,.pool-tool,.app-tools,.planned-party-panel) p { font-size: 12px; line-height: 1.6; }
.backyard-club .club-disclosure { margin: 0 22px; padding: 0; border-bottom: 1px solid var(--club-rule); }
.backyard-club .club-disclosure > summary { padding: 16px 0; font-size: 13px; cursor: pointer; }
.backyard-club .club-disclosure .pool-curve { margin: 0; padding: 5px 0 16px; }
.backyard-club .club-footer { padding: 22px; }
.backyard-club .club-footer a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; color: rgb(var(--scene-ink,32 56 47)); font-size: 13px; }
.backyard-club .auth-view { padding: 24px; }
.backyard-club .auth-panel { border-radius: 8px; box-shadow: none; }
/* The native top-layer dialog supplies inert background content and focus containment. */
body.day-sheet-open { overflow: hidden; }
.backyard-club .day-details-dialog {
  width: min(600px, calc(100% - 32px)); max-width: none; max-height: min(88dvh, 900px);
  padding: 20px 24px max(24px, env(safe-area-inset-bottom)); border: 1px solid var(--club-rule); border-radius: 8px;
  background: rgb(var(--scene-surface,255 254 247)); color: rgb(var(--scene-ink,32 56 47)); overscroll-behavior: contain;
}
.day-details-dialog::backdrop { background: #0a211a88; }
.backyard-club .day-sheet-heading { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 18px; }
.backyard-club .day-sheet-heading h2 { font-size: 19px; margin: 0; line-height: 1.3; }
body.backyard-club .details-panel { padding: 0; margin: 0; }
.backyard-club .details-heading { display: flex; align-items: start; gap: 12px; }
.backyard-club .details-heading > div:first-child { flex: 1; min-width: 0; }
.backyard-club .details-heading h2 { font-size: 20px; line-height: 1.4; margin: 6px 0 0; }
.backyard-club .details-actions { flex: 0 1 auto; max-width: 110px; }
.backyard-club .status-pill { border-radius: 5px; font-size: 11px; padding: 7px 8px; text-align: center; white-space: normal; }
.backyard-club .metrics-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 20px 0 12px; }
body.backyard-club .metric { padding: 0; border: 0; background: none !important; box-shadow: none; }
.backyard-club .metric span { font-size: 11px; }
.backyard-club .metric strong { font-size: 22px; line-height: 1.35; overflow-wrap: normal; }
.backyard-club :is(.day-condition,.day-confidence) { font-size: 12px; line-height: 1.6; color: rgb(var(--scene-muted,64 86 74)); }
.backyard-club .safety-details { margin: 16px 0; padding: 12px 0; border: 0; border-block: 1px solid var(--club-rule); background: none; }
.backyard-club .details-button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; }
.backyard-club .day-analysis { border-top: 1px solid var(--club-rule); padding-top: 14px; }
.backyard-club .day-analysis summary { cursor: pointer; font-size: 13px; min-height: 32px; }
.backyard-club .reason-list { margin-top: 12px; }
body.backyard-club .reason-list li { background: none !important; border: 0; border-radius: 0; padding: 5px 0; font-size: 12px; }
.backyard-club .source-note { font-size: 11px; }
.backyard-club .pool-extras-dialog { border-radius: 8px; box-shadow: 0 18px 70px #0a211a30; }
body.backyard-club.kite-mode { background: #e5f1f7 !important; --scene-surface: 248 252 255; --scene-inner: 239 246 249; --scene-ink: 32 56 64; --scene-muted: 64 86 94; }
.backyard-club.kite-mode .app-header { background: #d6eaf5; }
.backyard-club.kite-mode .day-tile.kite-good { background: #b8dfd4; }
.backyard-club.kite-mode .day-tile.kite-maybe { background: #f7de90; }
.backyard-club.kite-mode .day-tile.kite-no { background: #ecc5c0; }
.backyard-club.kite-mode .day-tile.kite-unknown { background: #e4e9e5; }
body.backyard-club.kite-mode .day-tile.is-past { background: #e4e9e5; }
@media (max-width: 619px) {
  .backyard-club .page-shell { width: 100%; margin: 0 auto; padding: 0; }
  .backyard-club .app-header { padding: calc(16px + env(safe-area-inset-top)) 16px 16px; }
  .backyard-club .brand-lockup h1 { font-size: 25px; }
  .backyard-club .brand-lockup p { font-size: 11px; }
  .backyard-club .brand-lockup img { width: 36px; height: 36px; }
  .backyard-club .calendar-tool { padding: 10px 14px 4px; }
  .backyard-club .calendar-tool h2 { font-size: 18px; }
  .backyard-club .calendar-heading { display: grid; grid-template-columns: minmax(0,1fr) 88px; gap: 2px 8px; margin-bottom: 14px; }
  .backyard-club .calendar-heading > div:first-child { grid-column: 1; grid-row: 1; }
  .backyard-club :is(.calendar-actions,.calendar-nav-row) { display: contents; }
  .backyard-club .updated-at { grid-column: 1; grid-row: 2; text-align: left; max-width: none; font-size: 11px; }
  .backyard-club .calendar-heading .week-nav { grid-column: 2; grid-row: 1 / 3; }
  .backyard-club .current-strip { padding: 10px 16px; }
  .backyard-club :is(.calendar-grid,.weekday-row) { gap: 5px; }
  .backyard-club :is(.day-tile,.calendar-pad) { height: 96px; min-height: 96px; }
  .backyard-club .day-number { font-size: 13px; }
  .backyard-club .tile-status { font-size: 23px; }
  .backyard-club .tile-temp { font-size: 13px; }
  .backyard-club .club-legend { font-size: 11px; gap: 8px 12px; }
  .backyard-club .day-details-dialog { width: 100%; max-height: 88dvh; margin: auto 0 0; border-radius: 8px 8px 0 0; border: 0; padding: 16px 20px max(24px,env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .backyard-club .brand-lockup { gap: 7px; }
  .backyard-club .brand-lockup h1 { font-size: 22px; }
  .backyard-club .brand-lockup img { width: 32px; height: 32px; }
  .backyard-club .app-header { padding-left: 12px; padding-right: 12px; }
  .backyard-club .calendar-tool { padding-left: 10px; padding-right: 10px; }
  .backyard-club .calendar-tool h2 { font-size: 17px; }
  .backyard-club .tile-status { font-size: 21px; }
}
/* Keep legacy comic borders, chip truncation, and fixed light controls from
   leaking into the planner's adaptive surfaces. */
body.backyard-club :is(#appView, #dayDetailsDialog, .pool-extras-dialog, .postcard-dialog) :is(button, input, select) {
  box-shadow: none !important;
  letter-spacing: 0;
}
body.backyard-club :is(#appView, #dayDetailsDialog, .pool-extras-dialog, .postcard-dialog) :is(.share-button, .primary-button, .refresh-button, .pool-input-row button) {
  min-height: 44px; padding: 10px 14px; border-radius: 6px; border-width: 1px; line-height: 1.4; font-size: 14px;
}
body.backyard-club :is(#appView, #dayDetailsDialog, .pool-extras-dialog, .postcard-dialog) .share-button {
  background: rgb(var(--scene-inner)) !important; color: rgb(var(--scene-ink)) !important; border-color: var(--club-rule) !important;
}
body.backyard-club :is(#appView, #dayDetailsDialog) :is(input:not([type="checkbox"]), select) {
  min-width: 0; min-height: 44px; font-size: 16px; border: 1px solid rgb(var(--scene-muted)); border-radius: 6px;
  background: rgb(var(--scene-inner)) !important; color: rgb(var(--scene-ink)) !important;
}
body.backyard-club #appView :is(.safety-banner, .pool-reminder) {
  border: 0 !important; border-bottom: 1px solid var(--club-rule) !important; box-shadow: none !important;
  background: transparent !important; color: rgb(var(--scene-muted)) !important; gap: 8px 12px;
}
.backyard-club #appView .safety-banner { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: baseline; }
.backyard-club #appView .safety-banner span { color: rgb(var(--scene-ink)) !important; }
.backyard-club #appView .safety-banner.safety-avoid { border-left: 3px solid #c04d3b !important; padding-left: 12px; }
.backyard-club #appView .safety-banner strong { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.6; }
.backyard-club #appView .pool-reminder > span { flex: 1; min-width: 0; font-weight: 400; }
.backyard-club #appView .pool-reminder button { min-width: 44px; min-height: 44px; padding: 8px; color: rgb(var(--scene-ink)) !important; }
.backyard-club #appView .today-band { background: transparent !important; padding: 18px 0; }
.backyard-club .today-band > div { min-width: 0; flex: 1; }
.backyard-club .today-band .refresh-button { flex-shrink: 0; }
.backyard-club #appView :is(.pool-tool,.app-tools,.swim-feedback,.planned-party-panel,.today-band) { border-bottom-color: var(--club-rule) !important; }
.backyard-club #appView :is(.pool-tool,.app-tools,.swim-feedback,.planned-party-panel) p { font-size: 14px; }
.backyard-club .feedback-footer:has(.save-status:empty):has(button[hidden]) { display: none; }
.backyard-club .save-status:empty { margin: 0; min-height: 0; }
.backyard-club .pool-form { gap: 8px; }
.backyard-club .tool-heading { align-items: start; gap: 16px; }
.backyard-club .tool-heading > div { min-width: 0; }
.backyard-club .pool-curve-heading { flex-wrap: wrap; }
.backyard-club .pool-curve-summary { white-space: normal; }
.backyard-club #poolAge { flex-shrink: 0; margin: 0; }
.backyard-club #appTools p { text-align: left; }
.backyard-club #dayDetailsDialog .metric { background: transparent !important; }
.backyard-club #dayDetailsDialog .metric span { display: block; margin-bottom: 5px; }
.backyard-club #dayDetailsDialog .metric strong { display: block; }
.backyard-club #dayDetailsDialog .status-pill { box-shadow: none; border-width: 1px; }
.backyard-club #dayDetailsDialog .safety-readings { display: flex; flex-wrap: wrap; gap: 8px; }
.backyard-club #dayDetailsDialog .safety-readings span { max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; }
.backyard-club .day-details-dialog { overflow-y: auto; overflow-x: hidden; }
.backyard-club .day-analysis .source-note { overflow-wrap: anywhere; }
.backyard-club .club-footer { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .backyard-club .calendar-tool { padding: 22px 28px 12px; }
  .backyard-club :is(.calendar-grid,.weekday-row) { gap: 10px; }
  .backyard-club :is(.day-tile,.calendar-pad) { height: 104px; min-height: 104px; }
  .backyard-club .day-card-front { padding: 10px 4px; }
  .backyard-club .weekday-row { font-size: 13px; }
  .backyard-club .app-header { padding-inline: 28px; }
  .backyard-club :is(.current-strip,.illustrated-mood,.club-footer) { padding-inline: 28px; }
  .backyard-club :is(.pool-extras-links,.today-band,.swim-feedback,.pool-tool,.app-tools,.planned-party-panel,.club-disclosure) { margin-inline: 28px; }
  .backyard-club .post-calendar-notices { padding-inline: 28px; }
}
@media (max-width: 619px) {
  .backyard-club .metrics-grid { gap: 10px; }
  .backyard-club .metric strong { font-size: 20px; }
  .backyard-club .day-details-dialog { padding-inline: max(16px, env(safe-area-inset-left)); }
  .backyard-club .day-details-dialog .details-button-row button { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) { .backyard-club * { scroll-behavior: auto; } }

.backyard-club #calendarGrid .day-tile { perspective: 700px; }
.backyard-club #calendarGrid .day-card-inner {
  transform-style: preserve-3d; transition: transform 300ms ease; animation: none; transform: rotateY(0deg);
}
.backyard-club #calendarGrid .is-flipped .day-card-inner { transform: rotateY(180deg); }
.backyard-club #calendarGrid .day-card-face {
  backface-visibility: hidden; -webkit-backface-visibility: hidden; opacity: 1; visibility: visible; transition: none;
}
.backyard-club #calendarGrid .day-card-front { transform: rotateY(0deg); }
.backyard-club #calendarGrid .day-card-back {
  transform: rotateY(180deg); display: grid; grid-template-rows: 10px 18px 10px 18px minmax(0,1fr);
  align-items: center; justify-items: center; gap: 1px; padding: 5px 2px; border-radius: 6px; background: none;
  color: #203b30; text-align: center;
}
.backyard-club #calendarGrid .day-card-back span { max-width: 100%; overflow: visible; text-overflow: clip; color: #203b30 !important; }
.backyard-club #calendarGrid .back-label { font-size: 9px; font-weight: 500; line-height: 1; text-transform: none; }
.backyard-club #calendarGrid .back-value { font-size: 15px; font-weight: 750; line-height: 1.1; white-space: nowrap; }
.backyard-club #calendarGrid .back-condition { font-size: 10px; font-weight: 600; line-height: 1.1; white-space: normal; }
.backyard-club.kite-mode #calendarGrid .back-value { font-size: 11px; }
.backyard-club .day-details-link {
  display: block; min-height: 44px; padding: 8px 0; margin: 0; background: transparent; color: rgb(var(--scene-ink));
  text-decoration: underline; text-underline-offset: 3px; font-size: 12px; font-weight: 500; border: 0; box-shadow: none;
}
.backyard-club .calendar-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 12px; }
@media (max-width: 360px) {
  .backyard-club #calendarGrid .back-condition { font-size: 8px; }
  .backyard-club.kite-mode #calendarGrid .back-value { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .backyard-club #calendarGrid .day-card-inner { transition: none; }
}