/* Application-owned geometry. Named skin surfaces change materials, never cells. */
:root {
    --header-height: 120px;
    --shell-header-height: var(--header-height);
    --header-row-height: 48px;
    --workspace-toolbar-height: 48px;
}
body:not(.in-community) { --shell-header-height: max(88px, var(--header-height)); }
#site-header {
    position: fixed;
    inset: 0 0 auto;
    height: var(--shell-header-height);
    z-index: 40;
    isolation: isolate;
    background: var(--nav, var(--surface));
    box-shadow: var(--toolbar-shadow-down);
}
#community-header-artwork {
    position: absolute;
    inset: 0;
    background-color: var(--nav, var(--surface));
    background-image: var(--community-header-default-artwork, url('/reference/assets/1000234303.webp'));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}
#protected-header-row {
    position: absolute;
    inset: 0 0 auto;
    height: var(--header-row-height);
    background: transparent;
    pointer-events: none;
}
#top-chrome-layer { display: none; }
#app #world-corner {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--rail-width);
    height: var(--header-row-height);
    z-index: 3;
    pointer-events: auto;
}
#app #nav-tools-bar,
#app.in-community #nav-tools-bar,
#app.nav-open #nav-tools-bar {
    position: absolute;
    top: 0;
    left: var(--rail-width);
    display: flex !important;
    width: var(--nav-width);
    height: var(--header-row-height);
    min-height: var(--header-row-height);
    padding: 0;
    margin: 0;
    z-index: 3;
    pointer-events: auto;
    background: transparent;
    box-shadow: none;
}
#nav-tools-bar .nav-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 48px; }
#nav-tools-bar .nav-tools > .icon-button { width: 100%; height: 48px; margin: 0; border-radius: 0; }
#nav-tools-bar .nav-tools > .icon-button svg { width: 25px; height: 25px; }
#app #topbar,
#app.chat-pullouts.upper-extended #topbar {
    position: fixed;
    top: 0;
    left: calc(var(--rail-width) + var(--nav-width));
    right: 0;
    height: var(--header-row-height);
    min-height: var(--header-row-height);
    padding: 0 8px;
    margin: 0;
    z-index: 51;
    background: transparent;
    pointer-events: none;
}
#topbar .top-actions { pointer-events: auto; }
/* Protected hit cells overlay the same artwork rather than painting a strip. */
#app #world-corner,
#app #nav-tools-bar .icon-button,
#app #topbar .icon-button {
    background: transparent;
    box-shadow: none;
}
#app #world-corner:hover,
#app #nav-tools-bar .icon-button:hover,
#app #nav-tools-bar .icon-button[aria-pressed="true"],
#app #topbar .icon-button:hover {
    background: color-mix(in srgb, var(--surface) 16%, transparent);
}
#topbar .wordmark, #app #room-heading { display: none !important; }
#header-search-slot {
    position: absolute;
    top: calc(48px + (var(--shell-header-height) - 48px) / 2);
    right: calc(var(--scroll-width) + 16px);
    left: calc(var(--rail-width) + var(--nav-width) + 16px);
    z-index: 2;
    transform: translateY(-50%);
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}
#header-search-slot :is(.banner-search-slot, .discover-feed-search) { display: contents; }
#header-search-slot #search-form {
    flex: 1;
    width: 100%;
    max-width: 520px;
    min-width: 0;
    height: 36px;
    margin: 0;
    background: var(--surface);
    box-shadow: var(--control-shadow);
}
#app #workspace {
    box-sizing: border-box;
    padding-top: var(--shell-header-height);
}
#app #rail,
#app #navigator {
    top: var(--shell-header-height);
    bottom: calc(48px + var(--lower-open));
}
#community-icons { max-height: 100%; }
#app #discover-view { padding-top: 16px; }
#app #scroll-column { padding: 0; }
#app #nav-profile-bar {
    left: var(--rail-width);
    width: var(--nav-width);
    height: 48px;
    min-height: 48px;
    padding: 4px 16px;
    bottom: var(--lower-open);
    display: flex;
    border-radius: 0;
}
#app #profile {
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    bottom: var(--lower-open);
    width: var(--rail-width);
    height: 48px;
    border-radius: 0;
}
#app #profile svg, #lower-drawer .board-browser-rail svg { width: 28px; height: 28px; stroke-width: 1.75; }
/* The legacy shelf stretched this layer to the viewport bottom. This is
   only the moving 48px toolbar strip; drawer and composer crown are separate. */
#app #bottom-chrome-layer {
    position: fixed;
    top: auto;
    bottom: var(--lower-open);
    height: 48px;
    border-radius: 0;
    z-index: 40;
}
#app #bottom-bar { border-radius: 0; }
#app #bottom-bar .composer-expanded { border-radius: 10px 10px 0 0; }
#lower-drawer .board-browser-rail { padding-top: 8px; gap: 8px; }
#lower-drawer .board-browser-rail button { flex: 0 0 48px; min-height: 48px; height: 48px; }
#app #menu.nav-tab { top: calc(var(--shell-header-height) + 8px); }
#nav-overlay-dismiss { top: var(--shell-header-height); bottom: calc(var(--composer-height, 48px) + var(--lower-open)); }
/* An empty or very short view retains its actual track rather than 32px of arrows. */
.scroll-track.short-track .scroll-arrow { display: none; }
.scroll-track .scroll-thumb { min-height: 0; }
.scroll-track.inactive .scroll-arrow { opacity: .45; box-shadow: none; }

@media (max-width: 760px) {
    :root {
        --rail-width: min(54px, calc((100vw - 56px) / 5));
        --nav-width: calc(var(--rail-width) * 4);
    }
    #header-search-slot {
        left: 12px;
        right: 12px;
    }
    #header-search-slot #search-form { max-width: 520px; }
    #app #topbar { left: calc(var(--rail-width) + var(--nav-width)); padding: 0 4px; }
    #topbar .top-actions { gap: 0; }
    #topbar .top-actions .icon-button { width: 26px; }
    #app #nav-tools-bar .nav-tools > .icon-button svg { width: 23px; height: 23px; }
    #app #nav-profile-bar,
    #app.signed-in:not(.nav-open) #nav-profile-bar,
    #app.nav-open #nav-profile-bar {
        display: flex !important;
        left: var(--rail-width);
        width: 48px;
        padding: 6px;
    }
    #app #nav-profile-bar > span:not(.avatar) { display: none !important; }
    #app #profile { display: flex !important; }
    #app #bottom-bar,
    #app:not(.in-community) #bottom-bar {
        margin-left: calc(var(--rail-width) + 48px);
    }
    #app #discover-view { padding-top: 12px; }
    body.nav-open #nav-overlay-dismiss { top: var(--shell-header-height); }
}
@media (prefers-reduced-motion: reduce) {
    #community-header-artwork { transition: none; }
}