/* Shared layer for Hearth and Brightpath.
   Three jobs only: the dark branded sidebar, the phone bottom bar, and
   touch sizes. Nothing decorative lives here. The kitchen wall display
   deliberately does not load this file. */

:root{--accent:#233f32;--accent-ink:#fff9ee;--surface:#fffdf8}
body{-webkit-font-smoothing:antialiased}
/* Brightpath owns all of its own chrome in brightpath/style.css, loaded after this file. */

/* ---- touch sizes. 44px is the floor, 16px stops iOS zooming inputs. */
button,.btn{min-height:44px}
input:not([type=checkbox]):not([type=color]):not([type=radio]),select,textarea{min-height:44px;font-size:16px}
.check input,input[type=checkbox]{min-width:22px;min-height:22px}
.tick{width:44px;height:44px}.icon{min-width:44px;min-height:44px}
button:active:not(:disabled){opacity:.85}

/* ---- sidebars: each app owns its own now (hearth/styles.css and brightpath/style.css). */
.aside-bottom{color:#e2dfd3}
.family label{color:#e5d6e8}

/* ---- header: one row, never wraps. */
header{min-height:64px;height:auto;padding-top:12px;padding-bottom:12px;gap:12px}
header>div{flex-shrink:0}
.parent-pill{white-space:nowrap;border-radius:30px;padding:8px 13px;font-size:12px;min-height:36px;background:#e9eee3;border-color:#d5dccc}

/* ---- surfaces: flat, bordered, calm corners. */
.card,.stat{border-radius:14px;box-shadow:none}
.hero{border-radius:16px;box-shadow:none;border:0}
dialog{border:1px solid var(--line,#e1e3d7);border-radius:16px;padding:26px;max-height:calc(100dvh - 32px)}
.stat strong{font-variant-numeric:tabular-nums}
.row>div{min-width:0}.row strong,.card h3{overflow-wrap:anywhere}
.card-top button,.card-head button{flex-shrink:0}
.heading h1{max-width:780px}
.kids{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.bag-groups{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.skip{position:fixed;left:12px;top:-80px;z-index:100;background:white;color:var(--accent);padding:12px;border-radius:8px}.skip:focus{top:12px}

/* ---- the phone bottom bar (built by family-ui.js). */
.mobile-dock{display:none}
.more-menu{width:min(460px,calc(100% - 28px));background:var(--surface);color:var(--accent)}
.more-menu .more-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.more-grid button{text-align:left;padding:16px;font-size:14px;color:var(--accent)}
.more-grid button.active{background:var(--accent);color:white}
#toast{bottom:30px;z-index:40}

/* ---- iPad and small laptops: the sidebar narrows, labels do not wrap. */
@media(min-width:761px) and (max-width:1100px){
 .shell{margin-left:196px}
 main{padding:28px 24px}.hero{padding:30px}
 .hero>div{max-width:70%}
 .cards{grid-template-columns:repeat(2,minmax(0,1fr))}.grid{grid-template-columns:1fr}
}

/* ---- phone. */
@media(max-width:760px){
 body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
 .family{margin:0;max-width:46%}.family label{display:none}.family select{font-size:14px;padding:8px;min-height:42px;width:100%}
 .aside-bottom{width:100%;margin:0}
 .aside-bottom button{width:auto;margin:0;padding:6px 12px;min-height:34px;background:#ffffff14;color:#fff;border-color:#ffffff30;font-size:12px}
 body.has-mobile-dock>aside nav{display:none}
 .shell{margin:0}
 header{padding:10px 18px;min-height:52px;gap:8px;flex-wrap:nowrap}
 header #household{display:none}
 header>div{gap:8px;margin-left:auto}
 header button{min-height:36px}
 #sync{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
 main{padding:24px 18px 28px}
 .heading{margin-bottom:22px;gap:15px}.heading h1{font-size:33px;letter-spacing:-1.2px}.heading .subtitle{font-size:14px;margin-top:8px}
 .hero{padding:24px;min-height:0;border-radius:14px}.hero>div{max-width:100%}
 .hero p{font-size:14px}
 .hero .actions{gap:8px;margin-top:20px}.hero .actions button{font-size:13px;padding:11px 13px}
 .stats{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}.stat{padding:16px;border-radius:12px}.stat strong{font-size:32px}
 .grid,.cards,.kids,.bag-groups{grid-template-columns:minmax(0,1fr)}.card{padding:20px;border-radius:14px}.row{gap:10px}
 .card-top{flex-wrap:wrap}.card-top h2{font-size:22px}
 .form-grid{grid-template-columns:minmax(0,1fr)}.toolbar{gap:8px}.toolbar>*{max-width:100%}
 .quick-grid{grid-template-columns:1fr 1fr}.quick-grid .field:first-child{grid-column:1/-1}
 .mobile-dock{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;bottom:0;left:0;right:0;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid #dddcd1;z-index:30;gap:4px}
 .mobile-dock button{min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:5px 2px;border:0;background:transparent;color:#6b7067;border-radius:12px;font-size:10px;font-weight:600;line-height:1.2}
 .mobile-dock button span{font-size:21px;line-height:23px;width:auto;margin:0}
 .mobile-dock button.active{background:var(--accent);color:#fff}
 .more-menu{margin:auto auto calc(88px + env(safe-area-inset-bottom));padding:22px;max-height:calc(100dvh - 110px);overflow:auto}.more-menu h2{font-size:24px}
 #toast{bottom:calc(88px + env(safe-area-inset-bottom));width:max-content;max-width:90%}
 footer{margin:0 18px;padding:18px 0;font-size:14px}footer span{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}