/* Native host relationships; shared controls, surfaces and typography belong to design-components.css. */
.app-visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:where(dialog:not(.app-main-nav):not(.UIAdminModal)) { position:fixed; inset:0; margin:auto; max-width:calc(100vw - 2rem); max-height:calc(100dvh - 2rem); overflow:auto; }
.app-menu-position,.app-main-nav { display:flex; flex-wrap:wrap; align-items:center; gap:var(--app-space); }
.app-menu .fa { margin-right:.35rem; }
.app-menu-icons .fa { margin-right:0; font-size:1.35rem; }
.app-menu-icons a,.app-menu-icons summary,.app-header-icon { display:inline-flex; align-items:center; justify-content:center; min-width:2.75rem; min-height:2.75rem; border-radius:var(--app-control-radius); }
.app-header-icon { color:var(--app-color-header-text); font-size:1.3rem; }
.app-utility .app-submenu { right:0; left:auto; }

/* The existing UIMessage function remains the sole message channel in every layout. */
#UIMessagesContainer { position:fixed; top:var(--app-message-top,auto); right:var(--app-message-right,1rem); bottom:var(--app-message-bottom,1rem); left:var(--app-message-left,auto); transform:var(--app-message-transform,none); z-index:100001; display:grid; gap:.7rem; width:min(32rem,calc(100vw - 2rem)); max-height:calc(100dvh - 2rem); overflow:auto; margin:0; padding:0; list-style:none; pointer-events:none; }
.UIMessage { display:flex; align-items:flex-start; gap:.75rem; padding:var(--app-space); border:1px solid var(--app-color-info-border); border-inline-start-width:4px; border-radius:var(--app-message-radius,var(--app-radius)); background:var(--app-color-info-surface); color:var(--app-color-info-text); box-shadow:var(--app-message-shadow,var(--app-shadow)); font-size:.9375rem; pointer-events:auto; }
.UIMessage > .fa { color:var(--app-color-info); margin-top:.3rem; }
.UIMessage.success { border-color:var(--app-color-success-border); background:var(--app-color-success-surface); color:var(--app-color-success-text); }
.UIMessage.success > .fa { color:var(--app-color-success); }
.UIMessage.warning { border-color:var(--app-color-warning-border); background:var(--app-color-warning-surface); color:var(--app-color-warning-text); }
.UIMessage.warning > .fa { color:var(--app-color-warning); }
.UIMessage.error,.UIMessage.failed { border-color:var(--app-color-error-border); background:var(--app-color-error-surface); color:var(--app-color-error-text); }
.UIMessage.error > .fa,.UIMessage.failed > .fa { color:var(--app-color-error); }
.UIMessageText { flex:1; min-width:0; overflow-wrap:anywhere; white-space:pre-line; }
.UIMessageClose { flex:0 0 2.75rem; width:2.75rem; min-height:2.75rem; border:0; border-radius:var(--app-control-radius); background:transparent; color:inherit; cursor:pointer; }
.UIMessageClose:focus-visible { outline:3px solid var(--app-color-focus); outline-offset:2px; }
dialog #UIMessagesContainer { --app-message-top:auto; --app-message-right:1rem; --app-message-bottom:1rem; --app-message-left:auto; --app-message-transform:none; }

.app-header-actions { display:flex; align-items:center; gap:var(--app-space); }
.app-header-actions .app-admin-link { color:var(--app-color-header-text); }
.app-search-navigation { display:flex; align-items:center; gap:var(--app-space); position:relative; padding-block:var(--app-space-small); }
.app-burger { display:flex; align-items:center; justify-content:center; flex:0 0 2.75rem; min-height:2.75rem; border:1px solid var(--app-color-control-border); border-radius:var(--app-control-radius); background:var(--app-color-secondary); color:var(--app-color-secondary-text); font-size:1.1rem; cursor:pointer; }
.app-burger:hover,.app-burger[aria-expanded=true] { background:var(--app-color-secondary-hover); }
.app-search-navigation .app-menu { display:flex; flex-direction:column; align-items:stretch; gap:.2rem; }
.app-search-navigation .app-menu a,.app-search-navigation .app-menu summary { color:var(--app-color-navigation-text); padding:.75rem; border-radius:var(--app-control-radius); box-shadow:none; }
.app-search-navigation .app-menu a:hover,.app-search-navigation .app-menu a[aria-current=page] { background:var(--app-color-navigation-active); color:var(--app-color-navigation-active-text); }
.app-search-navigation .app-submenu { position:static; padding:0 0 0 .85rem; border:0; box-shadow:none; }
.app-account-menu .app-header-login { display:none; position:absolute; right:0; top:100%; z-index:45; padding-top:.5rem; width:min(22rem,calc(100vw - 2rem)); color:var(--app-color-text); }
.app-account-menu:hover .app-header-login,.app-account-menu:focus-within .app-header-login { display:block; }
.app-account-menu.app-login-dismissed .app-header-login { display:none; }
.app-header-login .app-profile-login { padding:var(--app-panel-padding); margin:0; background:var(--app-color-card); border:1px solid var(--app-color-card-border); border-radius:var(--app-radius); box-shadow:var(--app-shadow); }
.app-header-login label { display:grid; gap:.4rem; margin-bottom:.8rem; }
.app-header-login fieldset { border:0; padding:0; margin:0; }
.app-profile-login .app-login-remember { display:flex; align-items:center; gap:.55rem; }
.app-profile-login .app-login-remember input { width:1.25rem; height:1.25rem; margin:0; }
.app-profile-login .app-login-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.8rem; margin-top:1.3rem; }
.app-profile-login .app-login-actions > button { margin:0; flex:none; cursor:pointer; }
.app-profile-login .app-login-actions > a { color:var(--app-color-link); text-decoration:underline; }
.app-error-page { max-width:46rem; margin:2rem auto; padding:var(--app-panel-padding); }
.app-error-status { color:var(--app-color-error); font-size:3rem; font-weight:700; margin:0 0 1rem; }
.app-error-page h1 { font-size:var(--app-heading-size); margin:.5rem 0 1rem; }
.app-error-page p { margin-bottom:1rem; }
.app-error-reference { color:var(--app-color-text-muted); }
.app-error-details { margin-top:1.5rem; padding:var(--app-space); background:var(--app-color-surface-alternate); border-radius:var(--app-radius); }
.app-error-details pre { overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; margin-top:1rem; }
.app-search-navigation dialog.app-main-nav { position:fixed; inset:0 auto 0 0; margin:0; width:min(450px,100vw); max-width:100vw; height:100dvh; max-height:100dvh; padding:var(--app-panel-padding); border:0; border-right:1px solid var(--app-color-border); border-radius:0; background:var(--app-color-navigation); color:var(--app-color-navigation-text); overflow-y:auto; box-sizing:border-box; box-shadow:var(--app-shadow); flex-direction:column; align-items:stretch; }
.app-search-navigation dialog.app-main-nav:not([open]) { display:none; }
.app-search-navigation dialog.app-main-nav[open] { display:flex; animation:app-drawer-enter var(--app-motion-duration) ease-out; }
.app-main-nav::backdrop { background:var(--app-color-overlay); }
.app-drawer-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--app-space); margin-bottom:1.5rem; }
.app-drawer-heading button { min-width:2.75rem; min-height:2.75rem; }
.app-drawer-open { overflow:hidden; }
@keyframes app-drawer-enter { from { transform:translateX(-100%); } to { transform:translateX(0); } }
@media (prefers-reduced-motion:reduce) { .app-search-navigation dialog.app-main-nav[open] { animation:none; } }
@media (max-width:767px) { .app-main-nav { flex-direction:column; align-items:stretch; } }
@media (max-width:640px) { .app-header-actions { gap:.5rem; } .app-search-navigation { gap:.5rem; } #UIMessagesContainer { top:auto; right:.5rem; bottom:.5rem; left:auto; transform:none; width:calc(100vw - 1rem); } }

/* The existing box placement contract remains a twelve-column grid. */
.app-box-row { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--app-space); margin-block:var(--app-space); }
.app-box-column { min-width:0; overflow-wrap:anywhere; }
.app-box-column > .app-widget { margin-block:0; }
@media (min-width:768px) { .app-box-row { grid-template-columns:repeat(12,minmax(0,1fr)); } .app-box-span-12 { grid-column:span 12; } .app-box-span-9 { grid-column:span 9; } .app-box-span-8 { grid-column:span 8; } .app-box-span-6 { grid-column:span 6; } .app-box-span-4 { grid-column:span 4; } .app-box-span-3 { grid-column:span 3; } }
.app-menu-box .app-menu { display:flex; flex-direction:column; align-items:stretch; gap:.25rem; }
.app-menu-box .app-menu a,.app-menu-box .app-menu summary { display:flex; align-items:center; gap:.4rem; padding:.6rem .75rem; border-radius:var(--app-control-radius); }
.app-menu-box .app-menu a:hover,.app-menu-box .app-menu a[aria-current=page] { background:var(--app-color-navigation-active); color:var(--app-color-navigation-active-text); }
.app-menu-box .app-submenu { position:static; min-width:0; padding:0 0 0 .85rem; border:0; box-shadow:none; }
.app-menu-anchor { position:relative; }
.app-menu-badge,.app-bell-count { position:absolute; top:-.3rem; right:-.4rem; z-index:1; display:inline-flex; align-items:center; justify-content:center; min-width:1.15rem; height:1.15rem; padding:0 .3rem; border-radius:1rem; background:var(--app-color-primary); color:var(--app-color-primary-text); font-size:.75rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px var(--app-color-header); }
.app-menu-badge[hidden],.app-bell-count[hidden] { display:none; }

.app-header-actions :is(.app-header-icon, .app-menu-icons > li > a, .app-menu-icons > li > details > summary) { box-sizing: border-box; width: 2.75rem; height: 2.75rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; color: var(--app-color-header-text); border-radius: var(--app-control-radius); font-size: 1.2rem; }
.app-header-actions :is(.app-header-icon, .app-menu-icons > li > a, .app-menu-icons > li > details > summary):is(:hover, :focus-visible) { background: color-mix(in srgb, var(--app-color-header-text) 9%, transparent); border-color: color-mix(in srgb, var(--app-color-header-text) 18%, transparent); }
.app-header-actions .fa { margin: 0; font-size: 1.2rem; }