/* Approved HOMEBASE reference. One desktop scale, independent card columns.
   Below 900px the existing tablet/mobile application remains the active UI. */
.family-dashboard,.family-head{display:none}
@media(min-width:900px){
 .family-dashboard-ready{--hb-bg:#F9F6EE;--hb-paper:#FFFDF9;--hb-ink:#182218;--hb-muted:#77746D;--hb-line:#EAE3D6;--hb-green:#5F7B50;--hb-gap:14px;--hb-nav:140px;--hb-pad:20px;background:#EDE7DD!important;color:var(--hb-ink);font-family:"Segoe UI",Arial,sans-serif!important}
 .family-dashboard-ready .shell{position:relative;max-width:1880px!important;width:calc(100% - 24px);margin:12px auto!important;padding:16px!important;background:var(--hb-bg);border-radius:18px;box-shadow:0 12px 38px #493D2714}
 .family-dashboard-ready .topbar{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;height:76px;margin:0!important;padding:2px 14px 0!important;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
 .family-dashboard-ready .homebase-brand{display:flex;flex-direction:column;gap:2px}
 .family-dashboard-ready .topbar h1{font-size:32px!important;line-height:1.2;font-weight:750;letter-spacing:.245em;color:#101C13;margin:0!important}
 .family-dashboard-ready .topbar .eyebrow{font-size:14px;font-weight:400;letter-spacing:0;color:#5C5A53!important;text-transform:none;order:2}
 .family-dashboard-ready .topbar .status-wrap{display:none}
 .family-dashboard-ready .topbar .status{font-size:9px;padding:0;border:0;background:transparent}
 .family-dashboard-ready .topbar .identity{font-size:9px}
 .family-head{display:flex;gap:20px;align-items:center;margin:0;padding:0;flex-shrink:0}
 .family-clock{text-align:right;display:grid;gap:2px}
 .family-clock>span{font-size:13px;color:#655C50;text-transform:capitalize}
 .family-clock strong{font-size:36px;line-height:1.05;font-weight:750;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:#0F1A10}
 .family-household{display:grid;place-items:center;background:#EEE7D9!important;border:0!important;border-radius:50%!important;width:56px;height:56px;padding:12px!important;color:#293226!important;box-shadow:none!important}
 .family-household .ui-icon{width:31px;height:31px;stroke-width:1.7}
 .family-dashboard-ready #appPanel:not(.hidden){display:grid;grid-template-columns:var(--hb-nav) minmax(0,1fr);column-gap:18px;row-gap:0;align-items:start}
 .family-dashboard-ready #appPanel>.app-view{grid-column:2;min-width:0}
 .family-dashboard-ready #appTabs{grid-column:1;grid-row:1 / span 5;position:sticky!important;top:20px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;margin:6px 0 0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;width:100%!important;max-width:none!important;transform:none!important;overflow:visible!important}
 .family-dashboard-ready #appTabs .app-tab:not(.capture-tab){display:flex!important;flex-direction:row!important;justify-content:flex-start!important;gap:14px!important;width:100%!important;min-height:44px!important;padding:9px 14px!important;border:0!important;border-radius:12px!important;background:transparent!important;color:#4A402C!important;box-shadow:none!important}
 .family-dashboard-ready #appTabs .app-tab:not(.capture-tab) span{font-size:16px!important;line-height:1.3;font-weight:400!important}
 .family-dashboard-ready #appTabs .app-tab:not(.capture-tab) .ui-icon{width:24px!important;height:24px!important;color:#39391F!important;stroke-width:2}
 .family-dashboard-ready #appTabs .app-tab.active:not(.capture-tab){background:linear-gradient(135deg,#668159,#587448)!important;color:#FFFDF7!important;box-shadow:0 4px 12px #485B2820!important}
 .family-dashboard-ready #appTabs .app-tab.active:not(.capture-tab) .ui-icon{color:#FFFDF7!important}
 .family-dashboard-ready #appTabs .app-tab.active::after{display:none!important}
 .family-dashboard-ready #appTabs .capture-tab{display:grid!important;place-items:center;order:8!important;width:48px!important;height:48px!important;min-height:48px!important;margin:12px auto 0!important;padding:10px!important;position:relative!important;inset:auto!important;transform:none!important;border-radius:50%!important;border:0!important;background:#5D7B4E!important;color:white!important;box-shadow:0 3px 10px #455D2824!important}
 .family-dashboard-ready #appTabs .capture-tab span{display:none!important}
 .family-dashboard-ready #appTabs .capture-tab .ui-icon{width:27px!important;height:27px!important;color:white!important}
 .family-dashboard-ready #appTabs .app-tab:hover{filter:brightness(.96)}
 .family-dashboard-ready #view-today.active-view{display:block!important}
 .family-dashboard-ready #view-today>.v2-welcome,
 .family-dashboard-ready #view-today>.desktop-overview,
 .family-dashboard-ready #view-today>.today-attention,
 .family-dashboard-ready #view-today>.today-status-strip,
 .family-dashboard-ready #view-today>.desktop-home-rail,
 .family-dashboard-ready #view-today>.next-panel{display:none!important}
 .family-dashboard-ready #view-today.family-detail-open>.today-attention,
 .family-dashboard-ready #view-today.family-detail-open>.next-panel{display:block!important;margin-top:14px}
 .family-dashboard-ready .family-dashboard{display:block}
 .family-columns{display:grid;grid-template-columns:minmax(0,.965fr) minmax(0,1.035fr);gap:var(--hb-gap);align-items:start}
 .family-stack{display:flex;flex-direction:column;gap:var(--hb-gap);min-width:0}
 .family-tile{background:var(--hb-paper);border:1px solid var(--hb-line);border-radius:14px;padding:14px 16px;min-width:0;box-shadow:0 4px 18px #483A2010}
 .family-tile-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;min-height:34px}
 .family-tile-head h3{display:flex;align-items:center;gap:12px;margin:0;font-size:18px;font-weight:700;color:#151D15;line-height:1.3}
 .family-tile-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#EEF1E3;color:#293E20;flex:0 0 auto}
 .family-tile-icon .ui-icon{width:23px;height:23px;stroke-width:2}
 .family-link{display:inline-flex;gap:12px;align-items:center;padding:5px 0 5px 6px!important;border:0!important;border-radius:6px!important;background:transparent!important;box-shadow:none!important;font-size:13px!important;font-weight:400!important;color:#71634F!important;white-space:nowrap;line-height:1.4;min-height:32px;text-transform:none}
 .family-link span{font-size:25px;line-height:1}
 .family-link:hover{color:#36582A!important;background:#EFF2E7!important}
 .family-weather>.family-tile-head>.family-link,.family-climate>.family-tile-head>.family-link{font-size:0!important;gap:0}
 .family-weather>.family-tile-head>.family-link span,.family-climate>.family-tile-head>.family-link span{font-size:25px}
 .family-weather-main{display:flex;gap:20px;align-items:center;min-height:110px;margin:0 8px 10px}
 .family-weather-symbol{display:grid;place-items:center;width:76px;flex:0 0 76px;color:#F4BD4A;line-height:1}
 .family-weather-symbol .ui-icon{width:76px;height:76px;stroke-width:1.5}
 .family-weather-reading{display:flex;flex-direction:column;min-width:0}
 .family-weather-reading strong{font-size:72px;line-height:1;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.07em;color:#0B150E}
 .family-weather-reading span{font-size:19px;line-height:1.2;color:#171D18;overflow-wrap:anywhere;margin-top:4px}
 .family-weather-stats{display:grid;gap:7px;margin:0 0 0 auto;font-size:14px;min-width:130px}
 .family-weather-stats>div{display:flex;justify-content:space-between;gap:12px}
 .family-weather-stats dt{color:#74726D}
 .family-weather-stats dd{margin:0;font-weight:700;color:#141A13;white-space:nowrap}
 .family-weather-advice{display:flex;align-items:center;gap:16px;min-height:60px;background:#EEF2E5;border-radius:14px;padding:12px 16px;color:#4F5144;font-size:14px;line-height:1.5}
 .family-weather-advice .ui-icon{width:34px;height:34px;flex:0 0 auto;color:#344720;stroke-width:1.5}
 .family-agenda{min-height:200px}
 .family-agenda-body{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:center;padding:0 0 4px}
 .family-agenda-date{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-right:1px solid #E1DDD2;padding:10px 16px 10px 0;color:#77736D;font-size:14px;text-transform:capitalize}
 .family-agenda-date strong{font-size:52px;line-height:1.08;color:#101A12;font-weight:750;letter-spacing:-.05em}
 .family-agenda-list{display:grid;gap:10px;min-width:0}
 .family-agenda-entry{display:grid;grid-template-columns:96px 10px minmax(0,1fr);align-items:start;gap:10px;font-size:14px;line-height:1.4}
 .family-agenda-time{color:#7A7971;font-variant-numeric:tabular-nums}
 .family-agenda-dot{width:10px;height:10px;margin-top:5px;border-radius:50%;background:#5F8051}
 .family-dot-1{background:#F4A64B}.family-dot-2{background:#438AC3}.family-dot-3{background:#8C67AD}
 .family-agenda-name{font-weight:400;overflow-wrap:anywhere;color:#1E211C}
 .family-source-note{color:var(--hb-muted);font-size:12px;line-height:1.4;margin:7px 0 0}
 .family-agenda>.family-source-note{display:none}
 .family-energy{min-height:220px}
 .family-energy-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.97fr);gap:18px;align-items:stretch}
 .family-energy-left{display:flex;flex-direction:column;min-width:0;padding:6px 3px 0}
 .family-energy-number{font-size:32px;line-height:1.15;font-weight:750;letter-spacing:-.04em;color:#111B12;white-space:nowrap}
 .family-energy-left>.family-source-note{font-size:12px;margin-top:1px}
 .family-energy-bars{display:flex;align-items:flex-end;gap:8px;height:68px;margin-top:12px;min-width:0}
 .family-energy-bar{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;min-width:0}
 .family-energy-bar i{display:block;width:100%;max-width:30px;min-height:4px;background:#DFE6D3;border-radius:4px 4px 0 0}
 .family-energy-bar:last-child i{background:linear-gradient(#647746,#495A30)}
 .family-energy-bar span{font-size:10px;color:#796D56;white-space:nowrap}
 .family-energy-facts{display:grid;background:#F5F2E8;border-radius:14px;padding:3px 14px}
 .family-energy-facts>div{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:10px;border-bottom:1px solid #E1DCCF;padding:6px 0}
 .family-energy-facts>div:last-child{border-bottom:0}
 .family-energy-facts .ui-icon{grid-column:1;grid-row:1/3;width:27px;height:27px;align-self:center;color:#4E4B2C}
 .family-energy-facts span{grid-column:2;grid-row:2;font-size:12px;color:#726F68;line-height:1.25}
 .family-energy-facts strong{grid-column:2;grid-row:1;font-size:18px;line-height:1.1;font-weight:700;color:#171F15}
 .family-energy>.family-source-note{font-size:10px}
 .family-climate-main{background:#F5F2E9;border-radius:14px;padding:10px;display:flex;align-items:center;gap:18px;margin-bottom:6px;min-height:78px}
 .family-climate-house{height:56px;width:56px;display:grid;place-items:center;border-radius:15px;background:#E7ECD9;color:#2F4223;flex:0 0 auto}
 .family-climate-house .ui-icon{width:40px;height:40px;stroke-width:1.6}
 .family-climate-main>div{display:flex;flex-direction:column;gap:3px;min-width:0}
 .family-climate-main strong{font-size:36px;line-height:1.15;letter-spacing:-.04em;font-weight:750;color:#111A12;white-space:nowrap}
 .family-climate-main small{color:#858179;font-size:12px}
 .family-climate-main .family-humidity{margin-left:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px}
 .family-humidity>.ui-icon{width:27px;height:33px;stroke-width:1.8;color:#2C3B22}
 .family-humidity small{flex-basis:100%;padding-left:35px}
 .family-sensors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .family-sensor{background:#F7F3EA;border:1px solid var(--hb-line);border-radius:12px;padding:10px;min-width:0;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:8px;row-gap:5px;align-items:start;min-height:66px}
 .family-room-icon{grid-column:1;grid-row:1/3;color:#59472C}
 .family-room-icon>.ui-icon{width:25px;height:25px;stroke-width:1.6}
 .family-sensor strong{font-size:14px;line-height:1.3;font-weight:650;color:#1B2118;overflow-wrap:anywhere}
 .family-sensor-values{grid-column:2;font-size:14px;color:#25281E;font-variant-numeric:tabular-nums;white-space:nowrap;display:flex;align-items:center;gap:4px}
 .family-sensor-values .ui-icon{width:14px;height:17px;color:#59472C}
 .family-climate>.family-source-note{font-size:10px;margin-top:5px}
 .family-sensor:last-child:nth-child(3n + 1){grid-column:1/-1;display:flex;align-items:center;gap:12px;min-height:32px;padding:5px 10px}
 .family-sensor:last-child:nth-child(3n + 1) .family-room-icon{display:flex}
 .family-sensor:last-child:nth-child(3n + 1) .family-room-icon>.ui-icon{width:23px;height:23px}
 .family-sensor:last-child:nth-child(3n + 1) .family-sensor-values{margin-left:auto}
 .family-shopping{min-height:220px}
 .family-shopping:has(.family-empty){min-height:150px}
 .family-shopping-form{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:11px;margin:0 5px 10px}
 .family-shopping-form input{height:40px!important;font-size:14px!important;font-weight:400!important;border-radius:12px!important;border:1px solid #DCD9D0!important;background:#FFFDF9!important;min-width:0;padding:10px 14px!important}
 .family-shopping-form button{height:40px!important;width:42px!important;border:0!important;border-radius:12px!important;background:linear-gradient(135deg,#6E8251,#455632)!important;color:white!important;display:grid!important;place-items:center;padding:0!important}
 .family-shopping-form button .ui-icon{width:27px;height:27px;color:white}
 .family-shopping-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 20px;padding:0 8px}
 .family-shopping-item{display:flex;align-items:center;gap:12px;min-height:25px;font-size:14px;line-height:1.4;color:#24251F;min-width:0;cursor:pointer;overflow-wrap:anywhere}
 .family-shopping-item input{appearance:none;accent-color:#57794B;width:19px!important;height:19px!important;min-height:0!important;padding:0!important;border:1.5px solid #A29A87!important;border-radius:50%!important;flex:0 0 auto;margin:0;background:#FFFDF9!important}
 .family-shopping-item input:checked{appearance:auto}
 .family-tile-head small{font-size:11px;color:#707B67;font-weight:400}
 .family-notes{min-height:180px}
 .family-sticky-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:3px 10px 5px}
 .family-sticky{position:relative;min-height:110px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:16px 12px 10px;border-radius:9px;background:#E7EDD9;box-shadow:0 5px 10px #3A301B1C;transform:rotate(-4deg);min-width:0}
 .family-sticky-1{background:#F8F0DE;transform:rotate(-3deg)}
 .family-sticky-2{background:#FFF1C6;transform:rotate(-5deg)}
 .family-sticky-title{background:transparent!important;border:0!important;box-shadow:none!important;padding:0 10px 0 0!important;margin:0!important;text-align:left!important;align-self:stretch;font-size:16px!important;font-weight:400!important;line-height:1.35;color:#1D231A!important;overflow-wrap:anywhere}
 .family-sticky>span{color:#838174;font-size:12px;line-height:1.3}
 .family-sticky-done{position:absolute;right:5px;top:5px;background:#516D3F!important;color:white!important;border:0!important;border-radius:50%!important;width:26px;height:26px;min-height:0!important;padding:0!important;font-size:17px;display:grid;place-items:center}
 .family-empty{grid-column:1/-1;color:#77786D;font-size:14px;line-height:1.5;margin:8px 0}
 .family-dashboard-ready footer{display:none}
 .family-dashboard-ready :is(.family-link,.family-household,.family-sticky-title,.family-sticky-done,.family-shopping-item input):focus-visible{outline:3px solid #66864F!important;outline-offset:3px}
}
.family-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:900px) and (max-width:1199px){
 .family-dashboard-ready{--hb-nav:125px}
 .family-dashboard-ready .shell{width:calc(100% - 24px);padding:18px 14px!important;margin:12px auto!important}
 .family-dashboard-ready #appPanel:not(.hidden){column-gap:16px;row-gap:0}
 .family-dashboard-ready #appTabs .app-tab:not(.capture-tab){gap:12px!important;padding-inline:10px!important}
 .family-dashboard-ready #appTabs .app-tab:not(.capture-tab) span{font-size:16px!important}
 .family-columns{grid-template-columns:1fr}
 .family-tile-head h3{font-size:19px}
 .family-weather-main{min-height:110px}
 .family-climate-main .family-humidity{margin-left:30px}
 .family-shopping{min-height:180px}
}
@media(max-width:700px){
 /* Keep the full-screen capture dialog within the mobile layout viewport. */
 .family-dashboard-ready #captureDialog{width:100%;max-width:100%!important;min-width:0;box-sizing:border-box}
}