/* File: brand.css | Purpose: Shared linked logo for all hosted apps.
2026-11-03 | Cxder | Align the home logo and app-directory wordmark. */
/* 2026-11-05 | Cxder | Size the combined app logo and preserve contrast in both themes. */
.x303-app-brand{display:flex;align-items:center;flex-shrink:0;line-height:1}
.x303-app-brand>a{display:inline-flex;align-items:center;justify-content:center;padding:0!important;background:transparent!important;text-decoration:none;color:inherit}
.x303-app-brand img{display:block;width:120px;height:80px;object-fit:contain}
.x303-app-brand a:focus-visible{outline:2px solid #187f87;outline-offset:1px;border-radius:4px}
@media screen{html[data-theme=dark] .x303-app-brand img{filter:brightness(1.8) saturate(.65)}html[data-theme=dark] .x303-app-brand a:focus-visible{outline-color:#8ddbd0}}
@media screen and (prefers-color-scheme:dark){html[data-theme-source=system] .x303-app-brand img{filter:brightness(1.8) saturate(.65)}html[data-theme-source=system] .x303-app-brand a:focus-visible{outline-color:#8ddbd0}}
@media(max-width:600px){.x303-app-brand img{width:96px;height:64px}}

/* Cxder: App-wide chrome: brand, sign-in and an accessible icon-only theme switch. */
.app-topbar.app-topbar{box-sizing:border-box;display:block;width:100%;max-width:none;height:96px;margin:0;padding:0;border:0;border-bottom:1px solid #d4ddd7;background:#fff;color:#173f52;font:14px/1.6 'IBM Plex Sans',system-ui,sans-serif}
.app-topbar .app-topbar-inner{height:100%;max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0}
.app-topbar .app-topbar-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.app-topbar .app-topbar-actions a,.app-topbar .app-topbar-actions button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;min-height:40px;margin:0;padding:8px 16px;border:1px solid #d4ddd7;border-radius:4px;background:transparent;color:inherit;font:inherit;text-decoration:none;white-space:nowrap;cursor:pointer}
.app-topbar .app-topbar-actions button{width:40px;padding:0;font-size:22px;line-height:1;background:#eeede5}
.app-topbar .app-topbar-actions a:hover,.app-topbar .app-topbar-actions button:hover{background:#eeede5;border-color:#173f52}
.app-topbar :focus-visible{outline:2px solid #187f87;outline-offset:3px}
html[data-theme=dark] .app-topbar{background:#0b141b;color:#edf5f4;border-color:#344e59}
html[data-theme=dark] .app-topbar .app-topbar-actions a,html[data-theme=dark] .app-topbar .app-topbar-actions button{color:#edf5f4;border-color:#344e59}
html[data-theme=dark] .app-topbar .app-topbar-actions button,html[data-theme=dark] .app-topbar .app-topbar-actions a:hover{background:#192c35}
@media(max-width:1180px){.app-topbar .app-topbar-inner{margin:0 24px}}
@media(max-width:600px){.app-topbar.app-topbar{height:80px}.app-topbar .app-topbar-inner{margin:0 16px}.app-topbar .app-topbar-actions{gap:8px}}
@media print{.app-topbar.app-topbar{display:none}}