/* Shared navigation and action controls, 2026-10-06. */
html body.vf-shell{--vf-nav-bg:#102d3d;--vf-control-bg:#163d4b;--vf-control-line:#416672;--vf-text:#edf7fa;--vf-muted:#b4cbd4}
html body.ui-2026.vf-shell,html body.admin-shell.vf-shell{padding:0!important;margin:0!important;display:block!important}
html body.vf-shell .vf-site-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:12px;min-height:64px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));padding-top:calc(10px + env(safe-area-inset-top));background:#0c2434;color:var(--vf-text);border-bottom:1px solid var(--vf-control-line);box-sizing:border-box}
html body.vf-shell .vf-site-header .brand{display:flex;align-items:center;gap:10px;min-width:0;margin:0;color:var(--vf-text);font-size:20px;text-decoration:none;font-weight:800}
html body.vf-shell .vf-site-header .brand-icon{width:32px;height:32px;object-fit:contain}
html body.vf-shell .vf-header-context{display:flex;align-items:center;gap:8px;min-width:0;margin-left:auto}
html body.vf-shell .vf-header-points{display:flex;gap:6px}
html body.vf-shell .vf-header-points a{display:flex;gap:5px;align-items:center;min-height:44px;padding:6px 10px;border:1px solid var(--vf-control-line);border-radius:12px;color:var(--vf-text);text-decoration:none;font-size:13px}
html body.vf-shell .vf-header-context .topbar-weather{display:flex;position:static;gap:6px;align-items:center;width:auto;font-size:14px}
html body.vf-shell .vf-header-context .topbar-weather small{display:none}
html body.vf-shell .vf-menu-toggle,html body.vf-shell .vf-family-shortcut{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 12px;border:1px solid var(--vf-control-line);border-radius:12px;background:var(--vf-control-bg);color:var(--vf-text);font-size:14px;font-weight:700;cursor:pointer}
html body.vf-shell svg.vf-icon{width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;vertical-align:middle}
html body.vf-shell .vf-navigation{display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;width:min(320px,calc(100vw - 32px));height:100dvh;box-sizing:border-box;padding:calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));background:var(--vf-nav-bg);color:var(--vf-text);border-right:1px solid var(--vf-control-line);overflow-y:auto;overscroll-behavior:contain;z-index:2147483641;visibility:hidden;transform:translateX(-105%);transition:none}
html body.vf-shell.vf-nav-open .vf-navigation{visibility:visible;transform:none}
html body.vf-shell .vf-navigation>*{order:0!important;flex-shrink:0!important}
html body.vf-shell .vf-nav-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 14px;font-size:20px}
html body.vf-shell .vf-nav-heading button{width:44px;height:44px;padding:0;background:var(--vf-control-bg);color:var(--vf-text);border:1px solid var(--vf-control-line);border-radius:12px;font-size:26px}
html body.vf-shell .vf-navigation nav{display:grid;gap:4px;flex:0 0 auto!important;align-content:start!important;align-items:stretch!important;grid-auto-rows:minmax(44px,auto);min-height:0!important}
html body.vf-shell .vf-navigation nav a,html body.vf-shell .vf-nav-account button{display:flex;align-items:center;gap:10px;min-height:44px;width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid transparent;border-radius:12px;color:var(--vf-text);background:transparent;font-size:15px;font-weight:650;text-decoration:none;text-align:left;white-space:normal;overflow-wrap:anywhere}
html body.vf-shell .vf-navigation a[aria-current="page"],html body.vf-shell .vf-child-shortcuts a[aria-current="page"]{color:#b9ffdc;background:#184b45;border-color:#63e6ad}
html body.vf-shell .vf-navigation nav a:hover,html body.vf-shell .vf-nav-account button:hover{background:var(--vf-control-bg)}
html body.vf-shell .vf-nav-secondary{border-top:1px solid var(--vf-control-line);margin-top:14px;padding-top:14px}
html body.vf-shell .vf-nav-family{margin:0 0 14px}
html body.vf-shell .vf-nav-family label{display:grid;gap:6px;font-size:13px;color:var(--vf-muted)}
html body.vf-shell .vf-nav-family select{width:100%;min-height:44px;background:var(--vf-control-bg)!important;color:var(--vf-text)!important;-webkit-text-fill-color:var(--vf-text)!important;border:1px solid var(--vf-control-line)!important;border-radius:10px;color-scheme:dark;white-space:normal}
html body.vf-shell .vf-nav-family-name{font-size:14px;color:var(--vf-muted);overflow-wrap:anywhere;margin:0 8px 12px}
html body.vf-shell .vf-nav-account{border-top:1px solid var(--vf-control-line);margin-top:20px;padding-top:14px;display:grid;gap:4px}
html body.vf-shell .vf-nav-account strong,html body.vf-shell .vf-nav-account small{padding:0 12px;overflow-wrap:anywhere}
html body.vf-shell .vf-nav-account small{color:var(--vf-muted)}
html body.vf-shell .vf-nav-scrim{position:fixed;inset:0;width:100%;height:100dvh;background:rgba(0,12,20,.65);border:0;border-radius:0;z-index:2147483640}
html body.vf-shell .vf-nav-scrim[hidden]{display:none!important}
html body.vf-shell.vf-nav-open{overflow:hidden!important}
html body.vf-shell>.container,html body.vf-shell>.admin-container{width:auto!important;max-width:1600px!important;margin:0 auto!important;padding:20px 16px!important;box-sizing:border-box;min-width:0}
html body.vf-shell .vf-child-shortcuts{display:none}
html body.vf-shell :is(button,.primary,.secondary,summary){touch-action:manipulation}
html body.vf-shell :is(.primary,.secondary,button:not(.support-bubble):not([data-replay-bubble]),summary){min-height:44px}
html body.vf-shell :is(button,.primary,.secondary,summary):focus-visible{outline:2px solid #8df0c4!important;outline-offset:3px}
html body.vf-shell .vf-page-actions{display:flex!important;position:relative!important;inset:auto!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:wrap!important;gap:8px!important;width:100%!important;margin:0 0 16px!important;padding:0!important;transform:none!important}
html body.vf-shell .vf-page-actions>.primary{order:0}
html body.vf-shell .vf-page-actions>.secondary{order:1}
html body.vf-shell .vf-page-actions>.vf-more{order:2}
html body.vf-shell .vf-page-actions :is(button,a,summary){min-height:44px;box-sizing:border-box;border-radius:12px;font-size:15px;line-height:1.3;white-space:normal}
html body.vf-shell .vf-more{position:relative!important;width:auto!important;max-width:100%;margin:0!important}
html body.vf-shell .vf-more>summary{list-style:none;display:flex!important;align-items:center;gap:6px;padding:10px 14px;border:1px solid var(--vf-control-line);border-radius:12px;background:var(--vf-control-bg);color:var(--vf-text);font-weight:700;cursor:pointer}
html body.vf-shell .vf-more>summary::-webkit-details-marker{display:none}
html body.vf-shell .vf-more>summary:after{content:"⌄";margin-left:6px}
html body.vf-shell .vf-more-panel{display:grid!important;gap:6px;padding:10px;margin-top:8px;width:280px;max-width:calc(100vw - 48px);box-sizing:border-box;border:1px solid var(--vf-control-line);border-radius:12px;background:var(--vf-nav-bg);color:var(--vf-text)}
html body.vf-shell .vf-more:not([open])>.vf-more-panel{display:none!important}
html body.vf-shell .vf-more-panel :is(button,a,form){width:100%;margin:0;box-sizing:border-box}
html body.vf-shell .vf-more-panel :is(button,a){text-align:left;justify-content:flex-start}
html body.vf-shell .vf-form-actions{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px}
html body.vf-shell .vf-form-actions>[type="submit"],html body.vf-shell .vf-form-actions>.primary{order:2}
html body.vf-shell .vf-form-actions>[type="button"]{order:1}
html body.vf-shell :is(.presentation-areas,.vf-area-nav){display:flex!important;flex-wrap:wrap!important;gap:8px!important;position:static!important;margin:0 0 16px!important;padding:0!important;width:auto!important;overflow:visible!important}
html body.vf-shell :is(.presentation-areas,.vf-area-nav) a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border:1px solid var(--vf-control-line);border-radius:12px;color:var(--vf-text);background:var(--vf-control-bg);font-size:15px;text-decoration:none}
html body.vf-shell :is(.presentation-areas,.vf-area-nav) a[aria-current="page"]{background:#184b45;border-color:#63e6ad;color:#b9ffdc}
html body.vf-shell .vf-area-nav a span{display:none}
html body.vf-shell .vf-area-nav a b{font-size:15px}
html body.vf-shell .vf-settings-layout{display:block!important}
html body.vf-shell .vf-area-nav{background:transparent!important;border:0!important;box-shadow:none!important;transform:none!important;max-height:none!important}
html body.vf-shell .settings-content{display:block!important;margin:0!important;padding:0!important}
html body.vf-shell .settings-section[hidden]{display:none!important}
html body.vf-shell :is(.primary,.secondary,.danger-btn){border-radius:12px!important;padding:10px 14px!important;line-height:1.3!important}
html body.vf-shell .vf-page-actions .collaboration-invite-drawer{margin:0!important}
html body.vf-shell .vf-page-actions .collaboration-invite-drawer>summary{min-height:44px;padding:10px 14px;border-radius:12px;font-size:15px}
html body.vf-shell :is(.reward-edit,.rule-edit,.dinner-edit,.calendar-item-edit)>summary{min-height:44px;display:flex;align-items:center;padding:10px 14px;border:1px solid var(--vf-control-line);border-radius:12px;background:var(--vf-control-bg);color:var(--vf-text);font-weight:650}
html body.vf-shell .vf-filter-row{display:flex!important;flex-wrap:wrap;gap:10px;width:100%!important;min-width:0}
html body.vf-shell .vf-filter-row>*{min-width:0}
html body.vf-shell .vf-filter-row :is(.calendar-filter,.week-nav,.view-toggle){position:static!important;width:100%!important;margin:0!important}
html body.vf-shell .vf-filter-row .calendar-family-options{position:static!important;width:100%!important;margin-top:8px}
html body.ui-2026.vf-shell .core-page .vf-filter-row :is(.week-nav,.view-toggle) a{display:flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;padding:10px 14px!important;font-size:14px!important}
/* Keep native select background and WebKit text fill in the same dark palette. */
html body.ui-2026.vf-shell:not(.public-shell):not(.admin-shell) .container :is(.core-page,.secondary-page,.settings-page,.admin-container) select{background:#123944!important;color:#f4fbfd!important;-webkit-text-fill-color:#f4fbfd!important;border-color:#416672!important;color-scheme:dark}
html body.vf-shell select option{background:#123944;color:#f4fbfd}
@media(max-width:767px){
 html body.vf-shell .vf-header-points{display:none}
 html body.vf-shell .vf-site-header{gap:8px;padding-inline:12px}
 html body.vf-shell .vf-header-context .topbar-child-points{display:none}
 html body.vf-shell .vf-family-shortcut{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 html body.vf-shell .vf-child-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;bottom:0;left:0;right:0;gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--vf-nav-bg);border-top:1px solid var(--vf-control-line);z-index:90}
 html body.vf-shell .vf-child-shortcuts a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;border:1px solid transparent;border-radius:10px;padding:4px;color:var(--vf-text);font-size:12px;text-decoration:none}
 html body.vf-shell.role-child>.container{padding-bottom:100px!important}
 html body.vf-shell.role-child .support-widget{bottom:calc(82px + env(safe-area-inset-bottom))!important}
 html body.vf-shell .vf-page-actions>*{max-width:100%}
}
@media(max-width:390px){
 html body.vf-shell .vf-site-header .brand{font-size:17px;gap:5px}
 html body.vf-shell .vf-site-header .brand-icon{width:26px;height:26px}
 html body.vf-shell .vf-menu-toggle{padding:8px;gap:5px}
 html body.vf-shell .vf-header-context .topbar-weather{font-size:12px}
 html body.vf-shell .vf-family-shortcut{max-width:72px;font-size:12px}
}
@media(min-width:1200px){
 html body.vf-shell:not(.public-shell):not(.role-dashboard) .vf-navigation{visibility:visible;transform:none;width:248px;z-index:101}
 html body.vf-shell:not(.public-shell):not(.role-dashboard) .vf-nav-heading button,html body.vf-shell:not(.public-shell):not(.role-dashboard) .vf-menu-toggle,html body.vf-shell .vf-family-shortcut{display:none}
 html body.vf-shell:not(.public-shell):not(.role-dashboard) .vf-site-header{margin-left:248px}
 html body.vf-shell:not(.public-shell):not(.role-dashboard)>.container,html body.vf-shell:not(.public-shell):not(.role-dashboard)>.admin-container{margin-left:248px!important;max-width:none!important;padding:24px!important}
 html body.vf-shell:not(.public-shell):not(.role-dashboard)>.site-footer{margin-left:248px!important}
 html body.vf-shell.public-shell .vf-navigation{visibility:visible;transform:none;position:static;inset:auto;width:auto;height:auto;padding:12px 24px;flex-direction:row;gap:16px;border-right:0;border-bottom:1px solid var(--vf-control-line);overflow:visible;z-index:auto}
 /* Desktop public links must not inherit the drawer's full-width rows. */
 html body.vf-shell.public-shell .vf-navigation nav{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;width:auto;min-width:0;height:auto}
 html body.vf-shell.public-shell .vf-navigation nav a{width:auto;flex:0 0 auto;white-space:nowrap;overflow-wrap:normal}
 html body.vf-shell.public-shell .vf-nav-secondary{margin:0 0 0 auto;padding:0;border:0}
 html body.vf-shell.public-shell .vf-nav-heading,html body.vf-shell.public-shell .vf-menu-toggle{display:none}
}
@media(prefers-reduced-motion:reduce){html body.vf-shell .vf-navigation{transition:none}}

/* Keep the family picker readable against later legacy input rules. */
html body.vf-shell.ui-2026:not(.public-shell):not(.admin-shell) .vf-nav-family select{background:#163d4b!important;color:#f4fbfd!important;-webkit-text-fill-color:#f4fbfd!important;border-color:#416672!important}

/* Shared module colours; icon colour is independent of surrounding text. */
html body svg.vf-icon.vf-icon--home{color:#6ee7b7!important}
html body svg.vf-icon.vf-icon--tasks,html body svg.vf-icon.vf-icon--complete{color:#6ee7b7!important}
html body svg.vf-icon.vf-icon--calendar{color:#7dd3fc!important}
html body svg.vf-icon.vf-icon--rewards,html body svg.vf-icon.vf-icon--notifications{color:#fbbf24!important}
html body svg.vf-icon.vf-icon--family{color:#c4b5fd!important}
html body svg.vf-icon.vf-icon--board{color:#67e8f9!important}
html body svg.vf-icon.vf-icon--dinner{color:#fdba74!important}
html body svg.vf-icon.vf-icon--rules,html body svg.vf-icon.vf-icon--privacy,html body svg.vf-icon.vf-icon--security{color:#5eead4!important}
html body svg.vf-icon.vf-icon--help{color:#93c5fd!important}
html body svg.vf-icon.vf-icon--settings,html body svg.vf-icon.vf-icon--terms,html body svg.vf-icon.vf-icon--data{color:#a5b4fc!important}
html body svg.vf-icon.vf-icon--weather{color:#fde68a!important}
html body svg.vf-icon.vf-icon--points{color:#fbbf24!important;fill:#fbbf24!important;stroke:#b77916!important;stroke-width:1.5;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
html body svg.vf-icon.vf-icon--points{width:1.15em;height:1.15em;vertical-align:-.18em}
html body :is(.happy-points,.child-mission-score)>span svg.vf-icon--points{width:1em;height:1em}
/* System colours keep icons legible when the user enables forced contrast. */
@media(forced-colors:active){html body svg.vf-icon[class*="vf-icon--"]{color:CanvasText!important;stroke:CanvasText!important;fill:none!important;filter:none}html body svg.vf-icon.vf-icon--points{fill:CanvasText!important}}