/* Approved guest UI: consolidated page rules; obsolete variants removed. */
#home header { flex-wrap: nowrap; gap: 8px; }
#home .brand { font-size: 17px; gap: 4px; }
#home .brand img { width: 40px; height: 40px; }
@media (max-width: 370px) {
  #home .brand { font-size: 15px; }
  #home .brand img { width: 30px; height: 30px; }
  #home header .home-unlock { font-size: 12px; padding: 9px 8px; gap: 5px; }
}
.ocean-temp { font-size: 13px; color: rgb(96, 124, 132); white-space: nowrap; }
.ocean-temp strong { color: rgb(18, 91, 107); font-weight: 600; }
#home header .home-unlock { width: auto; min-height: 50px; justify-content: center; font-size: 13px; font-weight: 700; margin-top: 0px; padding: 10px 12px; gap: 7px; }
#home header .home-unlock svg { width: 21px; height: 21px; }
.home-unlock { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 750; min-height: 54px; padding: 12px 15px; border-radius: 13px; box-shadow: rgba(18, 91, 107, 0.133) 0px 3px 9px; }
#home header { flex-wrap: wrap; }
.arrival .welcome .door-switch { font-size: 19px; }
.arrival .welcome > img.launch-logo { width: 220px; height: 220px; object-fit: contain; }
.arrival .welcome .door-switch { font-size: 20px; gap: 10px; text-align: left; justify-content: flex-start; padding: 18px; }
.door-switch .switch-track { margin-left: auto; background: rgba(255, 255, 255, 0.27); width: 52px; height: 30px; border-radius: 20px; padding: 4px; flex-shrink: 0; }
.door-switch .switch-track span { display: block; background: white; width: 22px; height: 22px; border-radius: 50%; transition: transform 0.15s; }
.door-switch[aria-checked="true"] .switch-track span { transform: translateX(22px); }
.section.offline { background: rgb(245, 247, 247); }
.section.offline .temp { color: rgb(140, 155, 159); }
.section.offline button:disabled, .section.offline input:disabled { opacity: 0.38; cursor: not-allowed; }
.offline-note { font-size: 12px; color: rgb(101, 122, 128); margin: 10px 0px 0px; }
.section.offline .status::before { color: rgb(138, 152, 157); }
.arrival .brand img { width: 60px; height: 60px; }
.arrival .welcome > img { width: 174px; height: 174px; }
.arrival .welcome .primary, .arrival .welcome .enter { min-height: 88px; font-size: 23px; font-weight: 650; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.arrival .welcome .enter { border: 2px solid rgb(18, 91, 107); background: white; margin-top: 16px; }
.arrival .welcome .action-icon { width: 30px; height: 30px; flex-shrink: 0; }
.arrival .welcome { padding: 30px 0px; }
.arrival .welcome h1 { margin-top: 10px; }
:root { font-family: Inter, system-ui, -apple-system, sans-serif; color: rgb(23, 59, 69); background: rgb(237, 241, 241); --blue: #125b6b; --gold: #f3a53b; }
* { box-sizing: border-box; }
body { margin: 0px; }
button, input { font: inherit; }
button { cursor: pointer; min-height: 44px; border: 1px solid rgb(214, 225, 227); border-radius: 12px; background: white; color: var(--blue); padding: 11px 15px; font-weight: 550; }
@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled) { filter: brightness(.97); }
}
button:focus-visible, input:focus-visible { outline: rgb(243, 165, 59) solid 3px; outline-offset: 3px; }
.primary, .selected { background: var(--blue); color: white; border-color: var(--blue); }
.primary:hover { background: rgb(10, 73, 87); }
.app { max-width: 430px; margin: 0px auto 32px; background: white; min-height: 840px; border-radius: 28px; padding: 24px; position: relative; box-shadow: rgba(21, 57, 69, 0.07) 0px 16px 60px; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 650; }
.brand img { width: 48px; height: 48px; object-fit: contain; }
header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.arrival { display: flex; flex-direction: column; min-height: 780px; }
.welcome { margin: auto 0px; text-align: center; padding: 65px 0px; }
.welcome > img { width: 112px; height: 112px; object-fit: contain; }
h1 { font-size: 34px; line-height: 1.15; letter-spacing: -1.3px; margin: 18px 0px 10px; font-weight: 600; }
p { color: rgb(103, 128, 135); line-height: 1.5; }
.welcome .primary { width: 100%; margin-top: 28px; }
.welcome .enter { width: 100%; margin-top: 12px; border: 0px; background: rgb(237, 245, 245); }
.wifi { border-top: 1px solid rgb(229, 236, 238); padding-top: 20px; }
.wifi small { display: block; color: rgb(108, 129, 135); margin-bottom: 6px; }
.wifi .copy { width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; border: 0px; padding: 10px 0px; background: none; }
.copy span:last-child { font-size: 12px; color: rgb(94, 121, 128); }
.demo { font-size: 11px; color: rgb(113, 134, 140); text-align: center; margin: 12px 0px 0px; }
.subtitle { font-size: 14px; color: rgb(113, 131, 139); margin: 21px 0px 18px; }
.section { border: 1px solid rgb(220, 229, 231); border-radius: 18px; padding: 18px; margin-bottom: 14px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.title { display: flex; align-items: center; gap: 10px; }
h2 { font-size: 19px; margin: 0px; font-weight: 600; }
.icon { font-size: 23px; color: var(--blue); line-height: 1; }
.gold { color: rgb(217, 137, 18); }
.status { font-size: 12px; color: rgb(109, 127, 130); }
.status::before { content: "●"; color: rgb(234, 160, 34); margin-right: 5px; }
.temp { font-size: 32px; letter-spacing: -1px; margin: 14px 0px 18px; font-weight: 550; }
.temp span { color: rgb(145, 163, 168); font-weight: 400; }
.divider { border-top: 1px solid rgb(229, 235, 237); padding-top: 13px; }
.cover { display: flex; gap: 6px; }
.cover button { padding: 9px 12px; font-size: 13px; }
.switch { appearance: none; width: 46px; height: 27px; border-radius: 20px; background: rgb(220, 227, 230); position: relative; cursor: pointer; flex-shrink: 0; }
.switch::before { content: ""; width: 21px; height: 21px; border-radius: 50%; background: white; position: absolute; top: 3px; left: 3px; box-shadow: rgba(0, 0, 0, 0.133) 0px 1px 4px; }
.switch:checked { background: var(--blue); }
.switch:checked::before { left: 22px; }
.sauna-actions { display: flex; gap: 7px; }
.sauna-actions button { font-size: 13px; flex: 1 1 0%; padding: 10px; }
.moods { display: flex; gap: 8px; margin: 15px 0px; }
.moods button { flex: 1 1 0%; font-size: 12px; padding: 13px 4px; }
.moods b { display: block; font-size: 22px; font-weight: 400; margin-bottom: 8px; }
.link { width: 100%; border-width: 1px 0px 0px; border-style: solid none none; border-color: rgb(229, 235, 237) currentcolor currentcolor; border-image: none; border-radius: 0px; text-align: left; padding: 14px 0px 0px; display: flex; justify-content: space-between; }
.shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shortcuts button { text-align: left; display: flex; align-items: center; gap: 10px; }
.backup { background: rgb(255, 240, 207); border-radius: 10px; padding: 12px; margin-top: 15px; font-size: 14px; }
.sheetback { position: absolute; inset: 0px; background: rgba(11, 40, 57, 0.39); border-radius: 28px; display: flex; align-items: flex-end; z-index: 3; }
.sheet { background: white; width: 100%; padding: 24px; border-radius: 25px 25px 28px 28px; }
.sheet h2 { margin-bottom: 20px; }
.sheet .choice { width: 100%; margin: 5px 0px; text-align: left; }
.close { border: 0px; min-height: 36px; padding: 4px 10px; font-size: 24px; }
.sheet p { font-size: 13px; }
.sheet input[type="time"] { width: 100%; border: 1px solid rgb(204, 218, 221); padding: 12px; border-radius: 12px; margin: 12px 0px; font-size: 18px; }
.toast { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); background: rgb(23, 59, 69); color: white; padding: 13px 22px; border-radius: 12px; z-index: 8; font-size: 14px; max-width: 90%; text-align: center; }
.rooms button { display: block; width: 100%; margin: 8px 0px; text-align: left; }
[hidden] { display: none !important; }
@media (max-width: 450px) {
  body { background: white; }
  .app { border-radius: 0px; box-shadow: none; margin-bottom: 0px; padding: 20px; min-height: calc(-60px + 100svh); }
  .arrival { min-height: calc(-100px + 100svh); }
  .sheetback { border-radius: 0px; }
  .sheet { border-radius: 25px 25px 0px 0px; }
  .brand { font-size: 17px; }
  .cover button { padding: 9px; }
  .welcome { padding: 40px 0px; }
}
.sheet .buttons { display: flex; gap: 12px; }
.sheet .buttons button { flex: 1 1 0%; }
#home .brand img { width: 78px; height: 78px; }
#home header .home-unlock { font-size: 12px; min-height: 43px; padding: 8px 11px; gap: 6px; }
#home header .home-unlock svg { width: 18px; height: 18px; }
.moods button.selected { box-shadow: rgb(18, 91, 107) 0px 0px 0px 2px inset; }
#on { background: rgb(212, 238, 218); border-color: rgb(212, 238, 218); color: rgb(36, 92, 53); }
#off { background: rgb(244, 215, 212); border-color: rgb(244, 215, 212); color: rgb(128, 59, 53); }
#schedule { background: rgb(217, 232, 246); border-color: rgb(217, 232, 246); color: rgb(36, 84, 119); }
.hot-water { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 4px 20px; font-size: 13px; color: rgb(98, 124, 131); }
.hot-water > span:first-child { font-weight: 600; color: rgb(23, 59, 69); margin-right: auto; }
.geyser-reading strong { color: rgb(18, 91, 107); margin-left: 3px; font-size: 16px; }
.shortcuts .guide-link { grid-column: 1 / -1; justify-content: space-between; }
#home .moods button, #home .cover button, #home #on, #home #off, #home #schedule { background: rgb(243, 245, 245); border-color: rgb(221, 227, 228); color: rgb(41, 76, 85); }
#home .moods button:hover, #home .cover button:hover, #home #on:hover, #home #off:hover, #home #schedule:hover { background: rgb(232, 237, 238); }
#home .moods button.selected { background: rgb(227, 235, 237); border-color: rgb(155, 178, 184); box-shadow: rgb(155, 178, 184) 0px 0px 0px 1px inset; color: rgb(23, 59, 69); }
.app button { box-shadow: rgba(23, 59, 69, 0.09) 0px 2px 0px, rgba(23, 59, 69, 0.063) 0px 4px 9px, rgba(255, 255, 255, 0.44) 0px 1px 0px inset; transition: box-shadow 0.14s, transform 0.14s, background-color 0.14s; border-bottom-color: rgb(185, 201, 205); }
.app button:hover:not(:disabled) { box-shadow: rgba(23, 59, 69, 0.098) 0px 3px 0px, rgba(23, 59, 69, 0.08) 0px 6px 12px, rgba(255, 255, 255, 0.5) 0px 1px 0px inset; transform: translateY(-1px); }
.app button:active:not(:disabled) { transform: translateY(2px); box-shadow: rgba(23, 59, 69, 0.11) 0px 2px 4px inset, rgba(255, 255, 255, 0.44) 0px 1px 0px; }
#home .moods button, #home .cover button, #home #on, #home #off, #home #schedule { background: linear-gradient(rgb(250, 251, 251), rgb(237, 241, 242)); border-width: 1px; border-style: solid; border-color: rgb(212, 222, 225) rgb(212, 222, 225) rgb(185, 201, 205); border-image: none; box-shadow: rgb(202, 214, 217) 0px 3px 0px, rgba(23, 59, 69, 0.063) 0px 5px 9px, rgb(255, 255, 255) 0px 1px 0px inset; }
#home .moods button.selected { background: rgb(223, 233, 236); box-shadow: rgba(23, 59, 69, 0.1) 0px 2px 4px inset, white 0px 1px 0px; border-color: rgb(168, 189, 195); transform: translateY(2px); }
#home .moods button:active, #home .cover button:active, #home #on:active, #home #off:active, #home #schedule:active { transform: translateY(2px); box-shadow: rgba(23, 59, 69, 0.11) 0px 2px 4px inset, rgb(255, 255, 255) 0px 1px 0px; }
.app button:disabled, #home .offline button:disabled { box-shadow: none; transform: none; background: rgb(240, 243, 243); border-color: rgb(224, 230, 232); }
.app button.back, .app button.close, .app button.copy, .app button.link, .app button.drag-handle { box-shadow: none; border-bottom-color: transparent; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .app button { transition: none; }
}
#home header { display: grid; grid-template-columns: 100px 1fr; gap: 6px 12px; margin-bottom: 18px; align-items: center; }
#home .brand { grid-area: 1 / 1 / 3; }
#home .brand img { width: 100px; height: 100px; }
#home header .home-unlock { grid-area: 1 / 2; justify-self: end; }
#home .header-greeting { grid-area: 2 / 2; text-align: right; display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: rgb(108, 131, 138); }
#home .header-greeting .ocean-temp { font-size: 12px; }
#home .backup { margin-bottom: 18px; }
@media (max-width: 370px) {
  #home header { grid-template-columns: 84px 1fr; gap: 5px; }
  #home .brand img { width: 84px; height: 84px; }
  #home .header-greeting .ocean-temp { font-size: 11px; }
}
@keyframes coffee-ready-pulse { 
  0%, 100% { box-shadow: rgba(243, 165, 59, 0) 0px 0px 0px 0px; filter: brightness(1); }
  50% { box-shadow: rgba(243, 165, 59, 0.52) 0px 0px 0px 4px; filter: brightness(1.12); }
}
.sheet { max-height: 90svh; overflow-y: auto; }
.sheetback { position: fixed; justify-content: center; border-radius: 0px; }
.sheet { max-width: 430px; }
.notice { font-size: 13px; }
.room-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0px; }
.room-row span { min-width: 0px; overflow-wrap: anywhere; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
.cup-hint { grid-column: 1 / -1; }
#access { padding: 24px 0px; }
#home .header-greeting .ocean-temp { white-space: normal; }
.hot-water { overflow-wrap: anywhere; }
.camera-view { border: 1px solid rgb(220, 229, 231); border-radius: 14px; padding: 14px; margin: 12px 0px; min-height: 150px; }
.camera-view img { width: 100%; height: auto; border-radius: 8px; }
.sheet input[readonly] { width: 100%; padding: 12px; font-size: 16px; }
.sheet p { overflow-wrap: anywhere; }
.temp b { font-weight: 550; }
.layout-0 { font-size: 14px; }
.layout-1 { margin-top: 10px; }
.layout-2 { font-size: 14px; }
.layout-3 { margin: 10px 0px 14px; }
.layout-4 { font-size: 12px; }
.app button:disabled { color: rgb(101, 122, 128); background: rgb(240, 243, 243); opacity: 1; box-shadow: none; border-color: rgb(224, 230, 232); }
.ui-icon { width: 22px; height: 22px; vertical-align: middle; flex-shrink: 0; }
.moods .ui-icon { width: 24px; height: 24px; }
.app #home button:disabled, .app #home .moods button:disabled, .app #home .cover button:disabled, .app #home #on:disabled, .app #home #off:disabled, .app #home #schedule:disabled { color: rgb(101, 122, 128); background: rgb(240, 243, 243); box-shadow: none; border-color: rgb(224, 230, 232); transform: none; }
.app #home button.link:disabled { background: transparent; }
/* Dedicated coffee navigation: approved full-width warm-clay control. */
#home .coffee-home{padding:0;border:0}
#home .coffee-home button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:68px;background:#b77961;border-color:#b77961;border-radius:16px;padding:18px 20px;font-size:19px;font-weight:750;color:white}
#home .coffee-home button:hover{background:#a86c55}
#home .coffee-home .ui-icon{margin-right:6px}

/* Owner-only additions; shared guest dashboard geometry is unchanged. */
.owner-presence{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 18px;font-size:13px}.owner-presence>div:first-child{min-width:0}.owner-presence small{display:block;margin-top:4px;color:#627c83;line-height:1.4}.owner-presence-actions{display:flex;gap:6px;flex-shrink:0}.owner-presence-actions button{font-size:12px;padding:9px 10px}.owner-tools{margin-top:18px}.owner-tools h2{margin-bottom:12px}.owner-tools a{color:#125b6b;text-decoration:none;font-size:14px;min-height:44px}.owner-tools a:focus-visible{outline:3px solid #f3a53b;outline-offset:3px}@media(max-width:370px){.owner-presence{align-items:flex-start;flex-direction:column}.owner-presence-actions{width:100%}.owner-presence-actions button{flex:1}}

/* Romautomation identity — shared palette and brand assets. */
:root {
  --ra-ocean: #4CA4C4;
  --ra-deep-teal: #063747;
  --ra-ivory: #FBEED3;
  --ra-dune: #D7B66D;
  --ra-fynbos: #71835C;
  --ra-clay: #B77961;
  --ra-mist: #EEF5F5;
  --blue: var(--ra-deep-teal);
  --gold: var(--ra-dune);
}

:root { color: var(--ra-deep-teal); background: var(--ra-mist); }
#home .brand img { border-radius: 22%; }
.pre-arrival-welcome { text-align: center; }
.pre-arrival-welcome .launch-logo { width: min(260px, 85%); height: auto; }
.arrival .welcome > img.launch-logo { width: min(280px, 90%); height: auto; }
.primary:hover { background: #12566B; }
button:focus-visible, input:focus-visible { outline-color: var(--ra-deep-teal); }
.section { border-color: #D6E6EA; }
.icon, .ocean-temp strong { color: var(--ra-deep-teal); }
.backup { background: var(--ra-ivory); color: var(--ra-deep-teal); border-left: 4px solid var(--ra-dune); }
#home .coffee-home button { background: var(--ra-clay); border-color: var(--ra-clay); }

/* RA app theme. Explicit body scope keeps standalone BrewQ pages independent. */
:is(body.ra-app, body.ra-care) {
  --ra-ink: var(--ra-deep-teal);
  --ra-muted: #49646B;
  --ra-line: #C7DCE1;
  --ra-ocean-wash: #E6F3F8;
  --ra-fynbos-wash: #EFF3E9;
  --ra-clay-wash: #F7EDE8;
  --ra-disabled: #E4ECEC;
  color: var(--ra-ink); background: var(--ra-mist);
  accent-color: var(--ra-deep-teal);
}
.ra-app .app, .ra-care main { background: #FFFFFF; color: var(--ra-ink); box-shadow: 0 16px 60px #06374712; }
:is(.ra-app, .ra-care) :is(h1,h2,h3,strong,label) { color: var(--ra-ink); }
:is(.ra-app, .ra-care) :is(p,.note,.notice,.demo,.subtitle,.status,.offline-note,.eyebrow,.tag,.hot-water,.ocean-temp,.header-greeting,.owner-presence small) { color: var(--ra-muted); }
:is(.ra-app, .ra-care) a { color: var(--ra-deep-teal); }
:is(.ra-app, .ra-care) :is(.section,.card,.camera-view) { border-color: var(--ra-line); }
.ra-app #home > .section:not(.coffee-home) { background: var(--ra-mist); }
.ra-app #home > .section:has(.moods) { background: var(--ra-ivory); border-color: var(--ra-dune); }
.ra-app #home #poolSection { background: var(--ra-ocean-wash); border-color: var(--ra-ocean); }
.ra-app #home #saunaSection { background: var(--ra-ivory); border-color: var(--ra-dune); }
.ra-app #prepare .section { background: var(--ra-ocean-wash); border-color: var(--ra-ocean); }
.ra-app #prepare .section:has(#saunaArrival) { background: var(--ra-ivory); border-color: var(--ra-dune); }
.ra-app .icon, .ra-app .gold { color: var(--ra-deep-teal); }
.ra-app .temp, .ra-app .geyser-reading strong, .ra-app .hot-water > span:first-child, .ra-app .ocean-temp strong { color: var(--ra-deep-teal); }
.ra-app .temp span { color: var(--ra-muted); }
.ra-app :is(.divider,.wifi,.link), .ra-care footer { border-color: var(--ra-line); }
.ra-app :is(.wifi small,.copy span:last-child) { color: var(--ra-muted); }
.ra-app .app button:not(:where(.coffee-home button)), .ra-care button {
  background: var(--ra-mist); color: var(--ra-deep-teal); border-color: var(--ra-line);
  box-shadow: 0 2px 0 #06374718, 0 3px 8px #0637470A;
}
/* Hover must preserve each control's foreground/background pair and selected state. */
@media (hover: hover) and (pointer: fine) {
  .ra-app .app button:hover:not(:disabled), .ra-care button:hover:not(:disabled) { filter: brightness(.97); }
}
.ra-app .app :is(button.primary,button.selected), .ra-app .app #home button.home-unlock,
.ra-care button.primary, .ra-care .tabs button[aria-selected=true] { background: var(--ra-deep-teal); border-color: var(--ra-deep-teal); color: #FFFFFF; }
.ra-app .app button.primary:hover:not(:disabled), .ra-app .app #home button.home-unlock:hover:not(:disabled), .ra-care button.primary:hover:not(:disabled) { background: #12566B; color: #FFFFFF; }
.ra-app .arrival .welcome button.enter { background: var(--ra-ocean); color: var(--ra-deep-teal); border-color: var(--ra-ocean); }
.ra-app #home .moods button { background: #FFFFFF; color: var(--ra-deep-teal); border-color: var(--ra-dune); box-shadow: 0 2px 0 #D7B66D55; }
.ra-app #home .moods button.selected { background: var(--ra-dune); border-color: var(--ra-deep-teal); color: var(--ra-deep-teal); box-shadow: inset 0 0 0 1px var(--ra-deep-teal); }
.ra-app #home .cover button { background: #FFFFFF; color: var(--ra-deep-teal); border-color: var(--ra-ocean); box-shadow: 0 2px 0 #4CA4C433; }
.ra-app #home #on { background: var(--ra-fynbos-wash); border-color: var(--ra-fynbos); color: var(--ra-deep-teal); box-shadow: 0 2px 0 #71835C33; }
.ra-app #home #off { background: #FFFFFF; border-color: var(--ra-clay); color: var(--ra-deep-teal); box-shadow: 0 2px 0 #B7796133; }
.ra-app #home :is(#schedule,#cancelSauna):not(:disabled) { background: #FFFFFF; border-color: var(--ra-line); color: var(--ra-deep-teal); box-shadow: var(--ra-control-shadow); }
.ra-app #home :is(.moods button,.cover button,#on,#off,#schedule):hover:not(:disabled) { filter: brightness(.97); }
.ra-app .switch { background: var(--ra-line); }
.ra-app .switch:checked { background: var(--ra-deep-teal); }
.ra-app .switch::before { background: #FFFFFF; }
.ra-app .status::before { color: var(--ra-dune); }
.ra-app .backup { background: var(--ra-ivory); color: var(--ra-deep-teal); border-color: var(--ra-dune); }
.ra-app .hot-water { background: var(--ra-ivory); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.ra-app .shortcuts button { background: var(--ra-ocean-wash); border-color: var(--ra-ocean); }
.ra-app .shortcuts .guide-link { background: var(--ra-fynbos-wash); border-color: var(--ra-fynbos); }
.ra-app .sheetback, .ra-care dialog::backdrop { background: #06374766; }
.ra-app .sheet, .ra-care dialog { background: #FFFFFF; color: var(--ra-deep-teal); border-color: var(--ra-line); }
.ra-app .sheet > .row { border-bottom: 2px solid var(--ra-ocean); padding-bottom: 12px; }
.ra-app .sheet :is(input,select,textarea), .ra-care :is(.field input,.field select,.field textarea,.task textarea,.link-text) { background: var(--ra-mist); color: var(--ra-deep-teal); border: 1px solid var(--ra-line); }
.ra-app .toast, .ra-care #feedback { background: var(--ra-deep-teal); color: #FFFFFF; box-shadow: 0 4px 20px #06374725; }
.ra-app .owner-presence { background: var(--ra-ocean-wash); border-radius: 14px; padding: 14px; margin-bottom: 18px; }
.ra-app .owner-presence-actions button[aria-pressed=true] { background: var(--ra-fynbos-wash); border-color: var(--ra-fynbos); }
.ra-app #home .owner-tools { background: var(--ra-mist); }
.ra-app .app :is(button.back,button.close,button.copy,button.link) { background: transparent; box-shadow: none; }
.ra-app #home .section.offline { background: var(--ra-mist); border-color: var(--ra-line); }
.ra-app .section.offline .temp, .ra-app .section.offline .status::before { color: var(--ra-muted); }
.ra-app .app #home button:disabled, .ra-app .app #home :is(.moods button,.cover button,#on,#off,#schedule):disabled,
.ra-app .app button:disabled, .ra-care button:disabled { color: var(--ra-muted); background: var(--ra-disabled); border-color: var(--ra-line); box-shadow: none; transform: none; filter: none; opacity: 1; }
.ra-app .section.offline input:disabled { opacity: .55; }
.ra-app .app #home button.link:disabled { background: transparent; }
:is(.ra-app,.ra-care) :is(button,input,select,textarea,a):focus-visible { outline: 3px solid var(--ra-deep-teal); outline-offset: 3px; }
/* Care and supplies inherits the same theme; BrewQ's own styles stay separate. */
.ra-care .tabs { background: var(--ra-mist); border-color: var(--ra-line); }
.ra-care .tabs button { color: var(--ra-deep-teal); }
.ra-care .card:not(.coffee) { background: var(--ra-mist); }
.ra-care .task.done { border-left-color: var(--ra-fynbos); }
.ra-care .task .result { background: var(--ra-fynbos-wash); color: var(--ra-deep-teal); }
.ra-care .inventory-item .amount { color: var(--ra-deep-teal); }
.ra-care .empty { color: var(--ra-muted); border-color: var(--ra-fynbos); background: var(--ra-fynbos-wash); }
.ra-care .secondary { background: var(--ra-ocean-wash); color: var(--ra-deep-teal); border-color: var(--ra-ocean); }
@media(max-width:450px) { body.ra-app, body.ra-care { background: #FFFFFF; } .ra-app .app { box-shadow: none; } }

.ra-app .app #home button.link, .ra-app .app .sheet button.close { background: transparent; box-shadow: none; }

/* Guest lighting: readable fixture names and explicit state choices. */
.sheet.lights-sheet { max-width: 640px; width: calc(100% - 24px); max-height: 92svh; }
.light-control-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px 20px; padding: 14px 0; border-bottom: 1px solid #dce7e9; }
.light-control-row:last-child { border-bottom: 0; }
.light-control-name { font-size: 17px; line-height: 1.35; overflow-wrap: normal; word-break: normal; }
.light-radio-group { display: flex; gap: 8px; }
.light-radio-group label { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 10px; border: 1px solid #c6d9dc; border-radius: 10px; cursor: pointer; font-size: 15px; white-space: nowrap; }
.light-radio-group label:has(input:checked) { background: #e2eff0; border-color: #075061; }
.light-radio-group label:has(input:disabled) { opacity: .55; cursor: default; }
.ra-app .sheet .light-radio-group input { appearance: auto; width: 18px; height: 18px; margin: 0; padding: 0; accent-color: #075061; flex: 0 0 18px; }
.light-unavailable { grid-column: 1 / -1; }
@media(max-width:380px){ .sheet.lights-sheet { padding: 18px; } .light-control-row { gap: 10px; } .light-radio-group { gap: 5px; } .light-radio-group label { padding: 8px; } }

/* Compact cards retain explicit On/Off choices and full fixture names. */
.lights-sheet #sheetBody { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.light-control-row.light-card { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 12px; margin: 0; border: 1px solid #dce3e5; border-radius: 14px; background: #fff; }
.light-control-row.light-card:last-child { border: 1px solid #dce3e5; }
.light-card-head { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.light-card-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: grid; place-items: center; color: #92999b; background: #f0f1f2; }
.light-card-icon svg { width: 22px; height: 22px; }
.light-card[data-state="on"] .light-card-icon { color: #075061; background: #dbf0ee; }
.light-card-copy { min-width: 0; }
.light-card .light-control-name { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.light-card-copy small { display: block; margin-top: 3px; font-size: 12px; color: #617276; }
.light-card .light-radio-group { margin-top: auto; gap: 6px; }
.light-card .light-radio-group label { flex: 1; justify-content: center; padding: 6px; font-size: 13px; min-height: 40px; }
@media(max-width:400px) { .sheet.lights-sheet { padding: 16px; width: calc(100% - 16px); } .light-control-row.light-card { padding: 10px; } .light-card-head { gap: 7px; } .light-card-icon { width: 28px; height: 28px; flex-basis: 28px; } .light-card .light-control-name { font-size: 14px; } }
@media(max-width:330px) { .lights-sheet #sheetBody { grid-template-columns: 1fr; } }

/* All lights is a navigation row, including hover and keyboard focus. */
.ra-app .app #home #allLights,
.ra-app .app #home #allLights:hover:not(:disabled),
.ra-app .app #home #allLights:active {
 display:flex; align-items:center; justify-content:space-between; gap:16px;
 width:100%; min-height:52px; margin-top:16px; padding:16px 2px 4px;
 background:transparent; box-shadow:none; transform:none; filter:none;
 border:0; border-top:1px solid var(--ra-line); border-radius:0;
 color:var(--ra-deep-teal); font-size:16px; font-weight:600; line-height:1.4;
}
.ra-app .app #home #allLights > span:last-child { font-size:24px; line-height:1; padding:0 2px; }
.ra-app .app #home #allLights:hover:not(:disabled) > span:first-child { text-decoration:underline; text-underline-offset:3px; }
.ra-app .app #home #allLights:focus-visible { outline:2px solid var(--ra-ocean); outline-offset:4px; }

/* Approved square action header, 25 October 2026. */
.ra-app #home header.ra-header{display:block;margin-bottom:22px}
.ra-header .greeting{font-size:26px;font-weight:550;letter-spacing:-.7px;margin:0 0 18px;color:var(--ra-deep-teal)}
.ra-header .header-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.ra-header .zebra-tile{width:100%;aspect-ratio:1;border-radius:21px;display:block}
.ra-app .app #home header .tile{width:100%;aspect-ratio:1;min-height:0;border-radius:21px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin:0;padding:10px 4px;box-shadow:none;font-size:13px;font-weight:650;line-height:1.2;cursor:pointer}
.ra-app .app #home header .tile svg{width:27px;height:27px}
.ra-app .app #home header .door-tile{background:var(--ra-deep-teal);color:white;border:1px solid var(--ra-deep-teal)}
.ra-app .app #home header .brew-tile{background:#526544;color:#FFFFFF;border:1px solid #526544}
.ra-header .ocean-line{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;margin:12px 0 0;color:var(--ra-muted);font-size:13px;line-height:1.4}
.ra-header .ocean-line svg{width:19px;height:19px;color:var(--ra-deep-teal);flex-shrink:0}
.ra-header .ocean-line strong{font-weight:650}.ra-app #home button{cursor:pointer}
@media(max-width:340px){.ra-app .app{padding:18px}.ra-header .header-tiles{gap:9px}.ra-app .app #home header .tile{border-radius:18px;font-size:12px;gap:7px}.ra-header .zebra-tile{border-radius:18px}.ra-header .greeting{font-size:24px}}

.ra-app .app #home header .tile { grid-area: auto; justify-self: stretch; }
.ra-app .app #home header .tile:disabled { background: var(--ra-disabled); color: var(--ra-muted); border-color: var(--ra-line); cursor: not-allowed; opacity: 1; }
.ra-app .app #home header .tile:hover:not(:disabled) { filter: brightness(.97); }

/* Quick actions: inset buttons in a light frame aligned with the zebra. */
.ra-header .header-tiles { grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 16px; }
.ra-header .header-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 7px; border: 1px solid var(--ra-line); border-radius: 24px; background: var(--ra-mist); min-width: 0; align-items: stretch; }
.ra-app .app #home header .header-actions .tile { border-radius: 17px; width: 100%; height: 100%; aspect-ratio: 1; padding: 6px 2px; gap: 8px; box-shadow: 0 2px 3px #06374722, inset 0 1px 0 #FFFFFF30; }
.ra-app .app #home header .header-actions .tile:hover:not(:disabled) { box-shadow: 0 3px 6px #06374730, inset 0 1px 0 #FFFFFF40; }
.ra-app .app #home header .header-actions .tile:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 3px #06374730; }
.ra-app .app #home header .header-actions .tile:disabled { box-shadow: none; }
@media(max-width:340px) { .ra-header .header-tiles, .ra-header .header-actions { gap: 12px; } .ra-header .header-actions { padding: 5px; border-radius: 21px; } .ra-app .app #home header .header-actions .tile { border-radius: 15px; font-size: 11px; } }

/* Consistent RA control frames and mobile-first light cards. */
:is(.ra-app,.ra-care) { --ra-control-shadow: 0 2px 3px #06374722, inset 0 1px 0 #FFFFFF30; }
.ra-app .app :is(.moods,.cover,.sauna-actions,.owner-presence-actions,.sheet .buttons),
.ra-care :is(.buttons,.tabs) {
 padding: 7px; gap: 8px; border: 1px solid var(--ra-line); border-radius: 20px; background: var(--ra-mist);
}
.ra-app .app :is(.moods,.cover,.sauna-actions,.owner-presence-actions,.sheet .buttons) > button,
.ra-care :is(.buttons,.tabs) > button {
 min-height: 48px; min-width: 0; border-radius: 13px; box-shadow: var(--ra-control-shadow); margin: 0; line-height: 1.3;
}
.ra-app .app .shortcuts { gap: 12px; padding: 7px; border: 1px solid var(--ra-line); border-radius: 20px; background: var(--ra-mist); }
.ra-app .app .shortcuts > button { min-height: 52px; border-radius: 13px; box-shadow: var(--ra-control-shadow); padding: 12px; }
.ra-app .app .shortcuts > .guide-link { border: 1px solid var(--ra-line); }
.ra-app .app .sheet :is(.choice,.rooms button) { min-height: 48px; border-radius: 13px; box-shadow: var(--ra-control-shadow); margin: 8px 0; }
.ra-app .app #home .moods button.selected { background: var(--ra-dune); box-shadow: inset 0 0 0 1px var(--ra-deep-teal); }
.ra-app .app :is(.moods,.cover,.sauna-actions,.owner-presence-actions,.sheet .buttons) > button:disabled,
.ra-care :is(.buttons,.tabs) > button:disabled { box-shadow: none; color: var(--ra-muted); background: var(--ra-disabled); cursor: not-allowed; }
.ra-app .sheet > .row { margin-bottom: 20px; padding-bottom: 16px; }
.ra-app .sheet > .row h2 { margin-bottom: 0; }
.ra-app .sheet .close { min-width: 44px; min-height: 44px; }
.ra-app .lights-sheet #sheetBody { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ra-app .light-control-row.light-card { padding: 16px; gap: 16px; border: 1px solid var(--ra-line); border-radius: 20px; background: #FFFFFF; min-width: 0; }
.ra-app .light-card-head { gap: 12px; min-height: 44px; align-items: center; }
.ra-app .light-card-icon { width: 38px; height: 38px; flex-basis: 38px; background: var(--ra-mist); color: var(--ra-muted); }
.ra-app .light-card[data-state="on"] .light-card-icon { background: var(--ra-ivory); color: var(--ra-deep-teal); }
.ra-app .light-card .light-control-name { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.ra-app .light-card-copy small { font-size: 13px; color: var(--ra-muted); }
.ra-app .light-card .light-radio-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 7px; gap: 8px; border: 1px solid var(--ra-line); border-radius: 17px; background: var(--ra-mist); }
.ra-app .light-card .light-radio-group label { min-height: 48px; padding: 10px; gap: 8px; font-size: 15px; border: 1px solid var(--ra-line); border-radius: 11px; background: #FFFFFF; color: var(--ra-deep-teal); box-shadow: var(--ra-control-shadow); }
.ra-app .light-card .light-radio-group label:has(input:checked) { background: var(--ra-deep-teal); border-color: var(--ra-deep-teal); color: #FFFFFF; box-shadow: inset 0 1px 2px #00000022; }
.ra-app .sheet .light-radio-group input { accent-color: var(--ra-deep-teal); }
.ra-app .sheet .light-radio-group label:has(input:checked) input { accent-color: #FFFFFF; }
.ra-app .light-card .light-radio-group label:has(input:disabled) { background: var(--ra-disabled); color: var(--ra-muted); border-color: var(--ra-line); opacity: 1; box-shadow: none; cursor: not-allowed; }
.ra-app .light-card .light-radio-group label:has(input:focus-visible) { outline: 3px solid var(--ra-ocean); outline-offset: 2px; }
.ra-app .light-card .light-radio-group label:hover:not(:has(input:disabled)):not(:has(input:checked)) { background: var(--ra-ocean-wash); }
@media(min-width:600px) { .ra-app .lights-sheet #sheetBody { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:599px) {
 .ra-app .sheet.lights-sheet { width: 100%; max-width: 430px; padding: 20px; }
 .ra-app .app .cover { width: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 8px; }
 .ra-app #poolSection .divider { flex-wrap: wrap; gap: 0; }
 .ra-app .app .cover > button { padding: 10px 4px; }
 .ra-app .app .sauna-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
 .ra-app .app .sauna-actions > button { padding: 10px 4px; }
}
@media(max-width:350px) { .ra-app .sheet.lights-sheet { padding: 16px; } .ra-app .light-control-row.light-card { padding: 12px; } .ra-app .app .shortcuts { grid-template-columns: 1fr; } }

/* Outside bucket membership remains readable on narrow screens. */
.light-members{font-size:13px;line-height:1.5;color:var(--muted,#61716f);margin:6px 0;overflow-wrap:normal;word-break:normal}

/* Ready-by sauna flow: one main action, two equal choices in the sheet. */
.ra-app .app #saunaSection .sauna-actions { display: flex; }
.ra-app .app .sheet .sauna-actions { display: flex; gap: 12px; }
.ra-app .app #scheduleStatus { display: block; line-height: 1.5; }
.ra-app .app #saunaSection .layout-3 { flex-direction: column; align-items: flex-start; gap: 8px; }
.ra-app .app #scheduleStatus { font-size: 16px; font-weight: 600; }

/* Sauna Advanced: grouped controls with comfortable mobile targets. */
.ra-app .sheet .sauna-setting { padding: 4px 0 24px; }
.ra-app .sheet .sauna-setting + .sauna-setting { border-top: 1px solid var(--ra-line); padding: 24px 0 0; }
.ra-app .sheet .sauna-setting-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.ra-app .sheet .sauna-setting-toggle { display: flex; align-items: center; gap: 12px; flex-shrink: 0; font-size: 14px; font-weight: 400; }
.ra-app .sheet .sauna-setting-toggle .switch { margin: 0; flex-shrink: 0; }
.ra-app .sheet .sauna-setting p { margin: 12px 0 0; color: var(--ra-muted); font-size: 14px; line-height: 1.6; }
.ra-app .sheet .sauna-temperature-stepper { display: flex; align-items: center; gap: 12px; padding: 8px; margin-top: 20px; border: 1px solid var(--ra-line); border-radius: 16px; background: var(--ra-mist); }
.ra-app .sheet .sauna-temperature-stepper .choice { width: 48px; min-width: 48px; height: 48px; min-height: 48px; margin: 0; padding: 0; text-align: center; font-size: 26px; line-height: 1; background: white; }
.ra-app .sheet .sauna-temperature-value { display: flex; align-items: baseline; justify-content: center; flex: 1; min-width: 0; gap: 4px; }
.ra-app .sheet #saunaTarget { width: 64px; min-width: 0; border: 0; border-bottom: 1px solid var(--ra-line); border-radius: 0; background: transparent; color: var(--ra-deep-teal); padding: 6px 0; font: inherit; font-size: 28px; font-weight: 600; line-height: 1.2; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.ra-app .sheet #saunaTarget::-webkit-inner-spin-button, .ra-app .sheet #saunaTarget::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ra-app .sheet .sauna-temperature-value > span { font-size: 18px; color: var(--ra-muted); }
.ra-app .sheet .sauna-temperature-save { margin: 16px 0 0; text-align: center; }
@media(max-width:350px) { .ra-app .sheet .sauna-setting-heading { gap: 10px; font-size: 15px; } .ra-app .sheet .sauna-setting-toggle { gap: 8px; } }

/* Arrival unlock: visible control against the pale action surface. */
.ra-app .door-switch .switch-track { background: var(--ra-deep-teal); border: 1px solid var(--ra-deep-teal); box-sizing: border-box; width: 54px; height: 32px; padding: 4px; }
.ra-app .door-switch .switch-track span { background: #FFFFFF; box-shadow: 0 1px 3px #00000035; }
.ra-app .door-switch:disabled .switch-track { background: #70858B; border-color: #70858B; }




/* One sauna status and a clear gap before secondary settings. */
.ra-app #saunaSection .layout-3:has(#scheduleStatus:empty) { display: none; }
.ra-app #saunaSection .sauna-actions { margin-top: 16px; }
.ra-app #saunaSection #advanced { margin-top: 16px; padding-top: 16px; }

/* Owner overview and compact guest-link management. */
.ra-app #ownerHouseSummary { display:flex; flex-direction:column; gap:5px; margin:-6px 0 24px; padding:14px 16px; border-left:3px solid var(--ra-blue,#4CA4C4); background:rgba(255,255,255,.5); border-radius:0 12px 12px 0; }
.ra-app #ownerHouseSummary strong { font-size:17px; color:var(--ra-deep-teal); }
.ra-app #ownerHouseSummary span { font-size:13px; line-height:1.5; color:var(--ra-muted); }
.ra-app #ownerStays { margin:20px 0 0; padding:20px 0 0; border-top:1px solid var(--ra-line); }
.ra-app #ownerStays .stay-heading { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:8px; }
.ra-app #ownerStays h2 { margin:0; font-size:18px; }
.ra-app #ownerStays button { width:auto; min-height:44px; margin:0; padding:8px 10px; font-size:13px; border:0; box-shadow:none; background:transparent; color:var(--ra-deep-teal); }
.ra-app #ownerStays .stay-create { border:1px solid var(--ra-line); border-radius:10px; background:white; padding:8px 12px; }
.ra-app #ownerStays .stay-row { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--ra-line); }
.ra-app #ownerStays .stay-info { display:flex; flex-direction:column; gap:5px; min-width:0; }
.ra-app #ownerStays .stay-info strong { font-size:14px; font-weight:600; line-height:1.5; }
.ra-app #ownerStays .stay-info small { font-size:12px; color:var(--ra-muted); }
.ra-app #ownerStays .stay-actions { display:flex; gap:4px; }
.ra-app #ownerStays .stay-feedback { font-size:13px; margin:12px 0 0; color:var(--ra-muted); }
.ra-app #ownerStays .stay-feedback:empty { display:none; }
.ra-app .stay-form { display:flex; flex-direction:column; gap:18px; margin-top:16px; }
.ra-app .stay-form > label { display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:600; }
.ra-app #addUser input,.ra-app #addUser select,.ra-app .stay-form input[type=date],.ra-app .stay-link-value { box-sizing:border-box; width:100%; min-width:0; max-width:100%; min-height:48px; border:1px solid var(--ra-line); border-radius:10px; background:white; padding:10px 12px; font:inherit; color:var(--ra-deep-teal); }
.ra-app .stay-form > label.stay-heat { flex-direction:row; align-items:center; justify-content:space-between; margin-top:4px; }
.ra-app .stay-form .stay-hint { margin:-10px 0 0; font-size:13px; line-height:1.5; color:var(--ra-muted); }
.ra-app .stay-form .choice { margin:0; text-align:center; }

/* Public welcome: a usable owner entry even before JavaScript loads. */
.ra-app .owner-login-button{display:flex;align-items:center;justify-content:center;gap:24px;width:100%;max-width:320px;min-height:54px;margin:26px auto 0;padding:14px 22px;box-sizing:border-box;border-radius:16px;background:#063747;color:#fff;font-size:17px;font-weight:700;text-decoration:none;box-shadow:0 5px 16px #06374718}
.owner-login-button:hover{background:#12566b}
.owner-login-button:focus-visible{outline:3px solid #B77961;outline-offset:4px}
.owner-login-button[hidden]{display:none}
.guest-entry-hint{max-width:300px;margin:24px auto 0;color:#49646B;font-size:14px;line-height:1.6}
/* Approved compact coastal front page. */
.ra-app .forecast-header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px 12px;margin-bottom:18px}
.ra-app .ra-brand{display:flex;align-items:center;gap:10px}.ra-app .ra-brand .zebra-tile{width:46px;height:46px;border-radius:13px}.ra-app .ra-brand>span{font-size:10px;letter-spacing:1.2px;color:#49646B}
.ra-app .forecast-header .greeting{grid-column:1/-1;margin:0;font-size:28px}.ra-app .forecast-header .ocean-line{display:none}
.ra-app #houseMenu{position:relative}.ra-app #houseMenu>summary{display:flex;align-items:center;justify-content:center;width:46px;height:46px;list-style:none;border-radius:14px;background:#063747;color:#fff;cursor:pointer}.ra-app #houseMenu>summary::-webkit-details-marker{display:none}.ra-app #houseMenu>summary svg{width:26px;height:26px}
.ra-app .house-menu-panel{position:absolute;right:0;top:54px;z-index:10;width:185px;padding:6px;border:1px solid #C7DCE1;border-radius:16px;background:#fff;box-shadow:0 8px 24px #06374720}.ra-app .house-menu-panel .menu-action{display:flex;align-items:center;gap:12px;width:100%;padding:13px 10px;border:0;border-radius:10px;background:transparent;color:#063747;font-size:14px;text-align:left}.ra-app .house-menu-panel .menu-action:hover{background:#EEF5F5}.ra-app .house-menu-panel svg{width:22px;height:22px;flex-shrink:0}.ra-app .house-menu-panel button:disabled{opacity:.45}
.ra-app .coast-overview{background:#EEF5F5;border:1px solid #C7DCE1;border-radius:20px;padding:12px 11px 0;margin-bottom:14px;color:#063747}.ra-app .coast-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.ra-app .coast-day{display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:10px}.ra-app .coast-date{font-size:11px;color:#49646B}.ra-app .coast-temp,.ra-app .coast-wave,.ra-app .coast-wind,.ra-app .coast-tab-value{display:flex;align-items:center;justify-content:center;gap:5px}.ra-app .coast-temp svg{width:23px;height:23px;color:#287b98}.ra-app .coast-temp b{font-size:16px}.ra-app .coast-temp small{font-size:11px;color:#49646B}.ra-app .coast-wave{font-size:12px;height:25px}.ra-app .coast-waves{width:28px;height:23px;color:#287b98;flex-shrink:0}.ra-app .coast-wind{font-size:11px;color:#49646B}.ra-app .coast-arrow{display:inline-block;font-size:18px;line-height:20px;color:#287b98}.ra-app .coast-report-button{display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-top:1px solid #C7DCE1;border-radius:0;background:transparent;width:100%;min-height:42px;padding:8px;font-size:13px;color:#063747}.ra-app .coast-report-button svg{width:18px;height:18px}.ra-app .coast-status{font-size:12px;text-align:center;color:#49646B;margin:6px 0 12px}.ra-app .coast-status[hidden]{display:none}
.ra-app .coast-detail{color:#063747}.ra-app .coast-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 20px}.ra-app .coast-tabs button{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 4px;border:1px solid #C7DCE1;border-radius:14px;background:#EEF5F5;font-size:12px;color:#063747}.ra-app .coast-tabs button[aria-pressed=true]{background:#063747;color:#fff}.ra-app .coast-tabs button[aria-pressed=true] *{color:inherit}.ra-app .coast-tabs svg{width:20px;height:20px}.ra-app .coast-time{display:flex;justify-content:space-between;color:#49646B;font-size:11px;margin-bottom:10px}.ra-app .coast-hero{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#EEF5F5;border:1px solid #C7DCE1;border-radius:20px;padding:18px;margin-bottom:18px}.ra-app .coast-hero-height{display:flex;gap:10px;align-items:center}.ra-app .coast-hero-height strong{font-size:26px;white-space:nowrap}.ra-app .coast-hero-height small{display:block;font-size:11px;color:#49646B;margin-top:4px}.ra-app .coast-hero-height svg{width:34px;height:34px}.ra-app .coast-hero-side{display:flex;flex-direction:column;gap:12px;font-size:13px}.ra-app .coast-hour{display:grid;grid-template-columns:48px 1fr 1.1fr;align-items:center;gap:8px;text-align:left;width:100%;padding:10px 4px;min-height:58px;background:transparent;border:0;border-bottom:1px solid #C7DCE1;border-radius:0;font-size:13px;color:#063747;font-variant-numeric:tabular-nums}.ra-app .coast-hour small{display:block;margin-top:4px;color:#49646B;font-size:11px}.ra-app .coast-hour[aria-pressed=true]{background:#EEF5F5;border-radius:8px}.ra-app .coast-hour-main{display:flex;align-items:center;gap:5px;white-space:nowrap}.ra-app .coast-head{min-height:32px;color:#49646B;font-size:11px;border:0}.ra-app .coast-footnote,.ra-app .coast-info{font-size:11px;color:#49646B}.ra-app .coast-swell{font-size:12px;margin:18px 0}.ra-app .coast-info summary{cursor:pointer}.ra-app .coast-info p{font-size:12px}.ra-app .coast-detail .coast-hour:focus-visible,.ra-app #houseMenu summary:focus-visible{outline:2px solid #287b98;outline-offset:2px}
@media(max-width:370px){.ra-app .ra-brand>span{font-size:9px;letter-spacing:.6px}.ra-app .coast-hero{padding:12px}.ra-app .coast-hero-height strong{font-size:23px}.ra-app .coast-hour{grid-template-columns:42px 1fr 1.1fr;gap:5px;font-size:12px}}
.ra-app #home header.ra-header.forecast-header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px 12px;margin-bottom:18px}
.ra-app .forecast-header #houseMenu{grid-column:2;grid-row:1;justify-self:end}
.ra-app .forecast-header #ownerHouseSummary{grid-column:1/-1;margin:0}
.ra-app #home .coast-report-button,.ra-app #home #houseMenu .menu-action{background:transparent;color:#063747;box-shadow:none;font-weight:500}
.ra-app .coast-detail button{box-shadow:none;font-weight:400}
.ra-app .coast-detail .coast-hour{background:transparent}
.ra-app .coast-detail .coast-hour[aria-pressed=true]{background:#EEF5F5}
.ra-app .coast-detail .coast-tabs button[aria-pressed=true]{background:#063747;color:#fff;border-color:#063747}
/* Keep the selected day readable, including touch browsers' retained hover. */
.ra-app #surfReportPage .coast-tabs button[aria-pressed=true],
.ra-app #surfReportPage .coast-tabs button[aria-pressed=true]:hover:not(:disabled){background:#063747;color:#fff;border-color:#063747}
/* Direct house actions and explicit occupied-mode control. */
.ra-app #home .front-actions{grid-column:2;grid-row:1;display:flex;gap:7px;padding:4px;border:1px solid #C7DCE1;border-radius:17px;background:#EEF5F5}
.ra-app .app #home .front-actions button.front-action{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:8px;border:0;border-radius:12px;background:#063747;color:#fff;box-shadow:none}
.ra-app .app #home .front-actions button.front-coffee{background:#526544}
.ra-app #home .front-actions svg{width:28px;height:28px;flex-shrink:0}.ra-app #home .front-actions button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ra-app #home #ownerPresenceBar{display:none}
.ra-app #home #ownerHouseSummary{display:flex;flex-direction:row;align-items:center;gap:14px;border:0;padding:0;margin:0;font-size:14px}
.ra-app #ownerHouseSummary .occupancy-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.ra-app #ownerHouseSummary .occupancy-copy>span{font-size:11px;line-height:1.4}
.ra-app .app #ownerHouseSummary .occupancy-actions button{min-height:44px;padding:10px 13px;border:1px solid #C7DCE1;border-radius:13px;background:#063747;color:#fff;white-space:nowrap;box-shadow:none;font-size:13px}
.ra-app #ownerHouseSummary .occupancy-actions button[hidden]{display:none}
@media(max-width:370px){.ra-app .app #home .front-actions button.front-action{width:39px;height:40px;min-height:40px}.ra-app #home #ownerHouseSummary{gap:10px}}
.ra-app .app #home .front-actions button.front-links{background:#287b98}
.ra-app .app #home .front-actions button[hidden]{display:none}
@media(max-width:410px){.ra-app .ra-brand>span{display:none}}
.ra-app #ownerFrontMenu{position:relative}.ra-app #ownerFrontMenu[hidden]{display:none}
.ra-app #ownerFrontMenu>summary{width:44px;height:44px;display:flex;align-items:center;justify-content:center;list-style:none;border-radius:12px;background:#063747;color:#fff;cursor:pointer}
.ra-app #ownerFrontMenu>summary::-webkit-details-marker{display:none}.ra-app #ownerFrontMenu>summary svg{width:25px;height:25px}
.ra-app .owner-front-menu{position:absolute;left:0;top:52px;z-index:12;width:190px;border:1px solid #C7DCE1;border-radius:14px;padding:6px;background:#fff;box-shadow:0 8px 24px #06374720}
.ra-app .owner-front-menu a{display:block;padding:13px 10px;border-radius:9px;font-size:14px;text-decoration:none;color:#063747}.ra-app .owner-front-menu a:hover{background:#EEF5F5}
@media(max-width:370px){.ra-app #ownerFrontMenu>summary{width:39px;height:40px}}

.ra-app #poolMode{margin:-6px 0 16px;font-size:12px;color:var(--ra-muted)}
.ra-app #heatStatus[data-activity="heating"]::before,.ra-app #heatStatus[data-activity="cooling"]::before{color:var(--ra-fynbos)}
.ra-app #heatStatus[data-activity="standby"]::before,.ra-app #heatStatus[data-activity="off"]::before{color:var(--ra-muted)}

/* Weather stays folded until requested. */
.ra-app details.coast-overview{padding:0 11px}
.ra-app .coast-summary{display:flex;align-items:center;gap:9px;min-height:44px;cursor:pointer;list-style:none;font-size:14px;font-weight:600}
.ra-app .coast-summary::-webkit-details-marker{display:none}
.ra-app .coast-summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.ra-app .coast-overview[open]>.coast-summary::after{transform:rotate(225deg);margin-top:3px}
.ra-app .coast-overview[open]>.coast-summary{margin-bottom:8px}
.ra-app .coast-summary:focus-visible{outline:2px solid #287b98;outline-offset:2px;border-radius:10px}

/* Surf report is a normal document page, with browser and in-app Back navigation. */
.ra-app.surf-report-open #home{display:none}
.ra-app #surfReportPage[hidden],.ra-app #home[hidden] ~ #surfReportPage{display:none}
.ra-app .surf-report-page{min-height:100vh;overflow:visible;padding-bottom:32px}
.ra-app .surf-report-header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:20px;background:white;padding:12px 0;border-bottom:1px solid #C7DCE1}
.ra-app .surf-report-header h1{font-size:24px;margin:0}
.ra-app .surf-report-header button{width:auto;min-height:44px;padding:10px 12px;border:0;background:transparent;box-shadow:none;color:#063747;font:inherit}

/* Camera detail fills the viewport without cropping the camera image. */
.ra-app .camera-preview{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.ra-app .camera-view img{display:block;width:100%;height:auto;object-fit:contain}
.ra-app #overlay .sheet.camera-full-view{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;border-radius:0;overflow:auto;padding:24px;box-sizing:border-box}
.ra-app .camera-full-view .camera-view img{height:calc(100dvh - 230px);min-height:180px;object-fit:contain;background:#063747}
.ra-app .camera-full-view .camera-view{max-width:none}

/* Owner menu and dedicated guest invitations page. */
.ra-app #home .owner-front-menu{left:auto;right:0;width:220px}
.ra-app .app #home .owner-front-menu button{display:flex;align-items:center;gap:10px;width:100%;height:auto;min-height:46px;padding:12px 10px;background:transparent;color:#063747;border:0;border-radius:9px;text-align:left;font-size:14px;box-shadow:none}
.ra-app #home .owner-front-menu button>span{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
.ra-app #home .owner-front-menu button svg{width:20px;height:20px}
.ra-app #home .owner-front-menu button:hover{background:#EEF5F5}
.ra-app #home .owner-front-menu button:disabled{opacity:.45}
.circulation-status{flex-basis:100%;font-size:12px;padding-top:8px;border-top:1px solid #C7DCE1}
.circulation-status[data-state="on"]{color:#526544;font-weight:600}
.guest-links-page header{margin-bottom:28px}.guest-links-page .ra-brand{margin:24px 0}.guest-links-page h1{margin-bottom:10px}.links-back{display:inline-block;padding:10px 0;color:#063747;text-decoration:none}.guest-links-page #ownerStays{margin-top:0}.guest-links-page .stay-list{margin-top:12px}
.ra-app .guest-links-page>header{display:block;padding:0 0 24px}.ra-app .guest-links-page>header h1{font-size:30px;line-height:1.15}.ra-app .guest-links-page>header .stay-hint{max-width:30em;line-height:1.5}.ra-app .guest-links-page .links-back{white-space:nowrap}.ra-app .app #home .front-actions .owner-front-menu button.front-coffee{background:transparent}.ra-app .app #home .front-actions .owner-front-menu button:hover{background:#EEF5F5}

.ra-app .stay-form input[type=text]{box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:48px;border:1px solid var(--ra-line);border-radius:10px;background:white;padding:10px 12px;font:inherit;color:var(--ra-deep-teal)}
.ra-app #ownerStays .stay-info strong{overflow-wrap:anywhere}

/* Owner menu: consistent icon column and left-aligned labels. */
.ra-app .app #home .owner-front-menu>a,.ra-app .app #home .owner-front-menu>button{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:46px;padding:12px 10px;text-align:left;box-sizing:border-box}
.ra-app .app #home .owner-front-menu>a svg,.ra-app .app #home .owner-front-menu>button svg{width:20px;height:20px;flex:0 0 20px}
.ra-app .app #home .owner-front-menu>a span,.ra-app .app #home .owner-front-menu>button span{text-align:left}

.ra-app #saunaReason{margin:-6px 0 16px;font-size:12px;color:var(--ra-muted);line-height:1.5}

/* Read-only instantaneous energy card; approved 25 October 2026. */
.ra-app #home .backup{background:#fce9e8;color:#883c39;border-left-color:#dc9791}.energy-readings{border:1px solid #c7dce1;border-radius:20px;background:#edf4f5;color:#073d4b;margin:0 0 18px;padding:18px 16px 13px}.energy-columns{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}.energy-columns>div{display:flex;flex-direction:column;align-items:center;gap:5px}.energy-columns>div+div{border-left:1px solid #cfdee1}.energy-columns svg{width:25px;height:25px;margin-bottom:2px}.energy-columns span{font-size:12px;font-weight:500;color:#49666d}.energy-columns strong{font-size:22px;line-height:1.2;font-weight:650;letter-spacing:-.6px}.energy-readings strong small{font-size:12px;font-weight:500;letter-spacing:0}.energy-usage{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #cfdee1;margin-top:15px;padding-top:11px;font-size:13px}.energy-usage>strong{font-size:18px}.energy-usage>span>small{font-size:11px;color:#627b81}
.energy-readings strong.reading-unavailable{font-size:12px;letter-spacing:0;line-height:26.4px;font-weight:500;color:#49666d}
.ra-app #home .backup strong{color:inherit}

/* Camera routes use normal document scrolling, retaining the loaded cards. */
body.camera-page-open > :not(#cameraPage){display:none!important}
.ra-app .camera-page{width:100%;max-width:1100px;margin:auto;padding:20px;box-sizing:border-box;min-height:100dvh}
.ra-app .camera-navigation{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ra-app .camera-navigation h1{flex:1;font-size:1.4rem;margin:0}
.ra-app .camera-page.camera-detail{max-width:none}
.ra-app .camera-detail .camera-preview{cursor:default;background:#063747;overflow:hidden}
.ra-app .camera-detail .camera-preview img{max-height:calc(100dvh - 190px);object-fit:contain}
.ra-app .camera-rotated .camera-preview{height:calc(100dvw - 70px);max-height:none;display:flex;align-items:center;justify-content:center}
.ra-app .camera-rotated .camera-preview img{width:calc(100dvh - 190px);max-width:none;height:calc(100dvw - 70px);max-height:none;flex-shrink:0;transform:rotate(90deg);object-fit:contain}
@media(orientation:landscape){.ra-app .camera-detail .camera-view{margin:8px 0;padding:8px}.ra-app .camera-detail .camera-view h2,.ra-app .camera-detail .camera-view>p{display:none}.ra-app .camera-detail .camera-preview img{max-height:calc(100dvh - 100px)}.ra-app .camera-rotated .camera-preview img{max-height:none}}

/* Lights folds like Weather, retaining its three scenes and room controls. */
.ra-app #home > details.lights-overview{padding:0 11px}
.ra-app .lights-overview[open]>.coast-summary::after{transform:rotate(225deg);margin-top:3px}
.ra-app .lights-content{padding:6px 7px 12px}

/* Sauna folds like Lights and Weather; Pool remains expanded. */
.ra-app #home > details.sauna-overview{padding:0 11px}
.ra-app .sauna-overview[open]>.coast-summary::after{transform:rotate(225deg);margin-top:3px}
.ra-app .sauna-content{padding:6px 7px 12px}

/* Camera full view: edge-to-edge landscape, with Return at screen top left. */
.ra-app .camera-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.ra-app .camera-card-heading h2{margin:0;min-width:0}
.ra-app .camera-card-heading .camera-enlarge{width:auto;flex:0 0 auto;margin:0;min-height:44px;padding:8px 12px;font-size:13px}
.ra-app .camera-page.camera-detail{position:fixed;inset:0;z-index:1000;width:100%;height:100dvh;min-height:0;max-width:none;margin:0;padding:0;background:#000;overflow:hidden;color:#fff}
.ra-app .camera-detail .camera-navigation{position:absolute;z-index:3;top:0;left:0;margin:0;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-left));background:transparent}
.ra-app .camera-detail .camera-navigation h1{display:none}
.ra-app .camera-detail .camera-navigation button{width:auto;min-height:44px;margin:0;padding:10px 16px;border:1px solid #ffffff66;border-radius:12px;background:#000b;color:#fff;box-shadow:none}
.ra-app .camera-detail .camera-view{position:absolute;inset:0;margin:0;padding:0;border:0;border-radius:0;background:#000;overflow:hidden}
.ra-app .camera-detail .camera-card-heading,.ra-app .camera-detail .camera-notice{display:none}
.ra-app .camera-detail .camera-view>p{display:block;position:absolute;z-index:2;bottom:16px;left:16px;color:white;background:#000b;padding:8px}
.ra-app .camera-detail .camera-view>p.camera-location{display:none}
.ra-app .camera-detail .camera-preview{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#000;transform:none}
.ra-app .camera-detail .camera-preview img{position:absolute;left:50%;top:50%;width:100dvw;height:100dvh;max-width:none;max-height:none;object-fit:contain;transform:translate(-50%,-50%);border-radius:0}
@media(orientation:portrait){.ra-app .camera-detail .camera-preview img{width:100dvh;height:100dvw;transform:translate(-50%,-50%) rotate(90deg)}}

.ra-app .camera-detail .camera-view>p[hidden]{display:none}