/* Capability-based safe areas, keyboard viewport, and standalone layout. */
:root {--dialog-space:12px;}
html {min-height:100%;scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom,0px));}
body,.app-shell {min-height:100vh;min-height:100dvh;}
.sidebar {height:100vh;height:100dvh;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));}
.topbar {padding-top:max(8px,env(safe-area-inset-top));padding-right:max(16px,env(safe-area-inset-right));padding-left:max(16px,env(safe-area-inset-left));}
.modal-layer {inset:auto 0 auto 0;top:var(--visible-top,0px);height:100vh;height:var(--visible-height,100dvh);box-sizing:border-box;padding:var(--dialog-space);padding-top:max(var(--dialog-space),env(safe-area-inset-top));padding-bottom:max(var(--dialog-space),env(safe-area-inset-bottom));overscroll-behavior:contain;}
.app-dialog {max-height:calc(100vh - 32px);max-height:calc(var(--visible-height,100dvh) - max(var(--dialog-space),env(safe-area-inset-top)) - max(var(--dialog-space),env(safe-area-inset-bottom)));overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding:18px;}
.app-dialog input,.app-dialog select,.app-dialog textarea {font-size:16px;max-width:100%;min-width:0;min-height:44px;box-sizing:border-box;scroll-margin:18px;}
.app-dialog input[type=checkbox] {min-height:0;}.app-dialog label.check-label {min-height:44px;}
input[type=file] {max-width:100%;font-size:16px;min-height:44px;}
#parent-entry {-webkit-touch-callout:none;touch-action:none;}
.pet-image {-webkit-touch-callout:none;}
@media(max-width:767px){
 .app-shell {padding-bottom:calc(90px + env(safe-area-inset-bottom));}
 .workspace {padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);}
 #mobile-nav {padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));padding-bottom:max(8px,env(safe-area-inset-bottom));}
 body[data-keyboard=open] #mobile-nav {visibility:hidden;pointer-events:none;}
 .date-bar input {font-size:16px;}
 body {background-attachment:scroll;}
}
@media(display-mode:standalone){.topbar {padding-top:max(12px,env(safe-area-inset-top));}}

/* Phase 3.5.1: navigation colors only, derived from the selected theme tokens. */
:root {
 --nav-surface:var(--color-surface,var(--surface));
 --nav-background:var(--color-bg,var(--page-background));
 --nav-text:var(--color-primary,var(--primary));
 --nav-border:var(--color-border,var(--border));
 --nav-item-background:var(--nav-surface);
 --nav-hover-background:var(--nav-background);
 --nav-active-background:var(--color-secondary,var(--secondary));
 --nav-active-hover-background:var(--nav-active-background);
 --nav-active-text:var(--nav-text);
 --nav-shadow-color:rgba(48,40,56,.08);
 --nav-active-shadow:0 4px 10px var(--nav-shadow-color);
 --nav-surface-shadow:0 -3px 12px var(--nav-shadow-color);
}
@supports (color:color-mix(in srgb,black,white)) {
 :root {
  --nav-hover-background:color-mix(in srgb,var(--nav-active-background) 25%,var(--nav-surface));
  --nav-active-hover-background:color-mix(in srgb,var(--nav-active-background) 85%,var(--nav-surface));
  --nav-shadow-color:color-mix(in srgb,var(--nav-text) 12%,transparent);
 }
}
.sidebar {background:linear-gradient(180deg,var(--nav-background),var(--nav-surface));border-color:var(--nav-border);}
.sidebar .brand,.sidebar .nav-caption,.sidebar .sidebar-note,.sidebar .sidebar-note small,.sidebar .edition {color:var(--nav-text);}
.sidebar .nav-link {background:var(--nav-item-background);color:var(--nav-text);border-color:var(--nav-border);box-shadow:none;}
.sidebar .nav-link:hover,#mobile-nav .nav-link:hover {background:var(--nav-hover-background);color:var(--nav-text);}
.sidebar .nav-link[aria-current="page"],#mobile-nav .nav-link[aria-current="page"] {background:var(--nav-active-background);color:var(--nav-active-text);border-color:var(--nav-border);box-shadow:var(--nav-active-shadow);}
.sidebar .nav-link[aria-current="page"]:hover,#mobile-nav .nav-link[aria-current="page"]:hover {background:var(--nav-active-hover-background);}
.sidebar .nav-link:focus-visible,#mobile-nav .nav-link:focus-visible {outline-color:var(--nav-text);}
.sidebar .nav-link[aria-current="page"]::after {background:var(--nav-active-text);}
#mobile-nav {background:var(--nav-surface);border-color:var(--nav-border);box-shadow:var(--nav-surface-shadow);}
#mobile-nav .nav-link {color:var(--nav-text);border-color:transparent;}