/* One full-width row owns workspace navigation, search and file actions. */
#lower-drawer {
    --workspace-toolbar-height: 48px;
    grid-template-rows: var(--workspace-toolbar-height) minmax(0, 1fr);
}

#lower-drawer > :is(.board-browser-rail, .board-browser-nav, .board-browser-view, #board-scroll-column) {
    grid-row: 2;
}

#lower-drawer .shelf-toolbar {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    height: var(--workspace-toolbar-height);
    min-height: var(--workspace-toolbar-height);
    left: 0;
    right: 0;
    gap: 0;
    padding: 0 var(--scroll-width) 0 0;
    border-radius: 0;
    background-color: var(--toolbar-base);
    background-image: var(--toolbar-gloss);
    background-position: center;
    background-size: 100% 48px;
    background-repeat: no-repeat;
    box-shadow: none;
}

#lower-drawer .shelf-toolbar > .shelf-personal-folder {
    flex: 0 0 var(--rail-width);
    width: var(--rail-width);
    height: var(--workspace-toolbar-height);
    min-height: var(--workspace-toolbar-height);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
}

#lower-drawer .shelf-personal-folder svg { width: 28px; height: 28px; }
#lower-drawer .shelf-personal-folder:hover { background: var(--inset); color: var(--ink); }
#lower-drawer .shelf-personal-folder[aria-pressed=true] { color: var(--ink); }

#lower-drawer .shelf-toolbar .board-nav-search {
    display: flex;
    align-items: center;
    flex: 0 0 var(--nav-width);
    width: var(--nav-width);
    min-width: 0;
    height: var(--workspace-toolbar-height);
    padding: 0 12px;
    background: transparent;
}

#lower-drawer .shelf-toolbar .board-nav-search[hidden] { display: none; }
#lower-drawer .shelf-toolbar .board-nav-search > span { top: 16px; }
#lower-drawer .shelf-toolbar .board-nav-search input {
    height: 32px;
    min-width: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    box-shadow: none;
}
#lower-drawer .shelf-toolbar .board-nav-search:focus-within > span { color: var(--ink); }

#lower-drawer .board-browser-nav { padding-top: 0; }
#lower-drawer .board-browser-rail { padding-top: 8px; }


#lower-drawer #shelf-back,
#lower-drawer #shelf-forward {
    display: none !important;
}

#lower-drawer .shelf-toolbar #shelf-path {
    flex: 1 1 auto;
    min-width: 60px;
    height: var(--workspace-toolbar-height);
    padding: 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    white-space: nowrap;
}

#lower-drawer #shelf-path::-webkit-scrollbar,
#lower-drawer .workspace-actions::-webkit-scrollbar {
    display: none;
}

#shelf-path [aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
}

.workspace-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 70%;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.workspace-actions[hidden] {
    display: none;
}

.workspace-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 30px;
    min-height: 32px;
    padding: 5px 7px;
    gap: 5px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    box-shadow: none;
    white-space: nowrap;
    font-size: 11px;
}

.workspace-action:hover {
    background: var(--inset);
}

.workspace-action svg {
    width: 18px;
    height: 18px;
}

.workspace-selection-count {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--muted);
    font-size: 10px;
}

#lower-drawer .board-browser-view {
    padding-top: 0;
}

#lower-drawer #board-browser-scroll {
    padding: 8px 10px 16px;
}

.shelf-tree-community-root {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 8px;
    margin-bottom: 6px;
    padding: 9px 10px;
    text-align: left;
    font-size: 12px;
    border-radius: 4px;
}

.shelf-tree-community-root svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.shelf-tree-community-root.active,
.shelf-tree-community-root:hover {
    background: var(--inset);
}

#board-assets.shelf-grid {
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
    gap: 20px 14px;
    align-items: start;
}

#lower-drawer #board-assets.shelf-grid .shelf-folder {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    align-content: start;
    height: auto;
    min-width: 0;
    padding: 0;
    gap: 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.shelf-folder-preview {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column: 1 / -1;
    gap: 2px;
    width: 100%;
    min-width: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 10px;
    background: var(--inset);
}

.shelf-folder-preview > :first-child {
    grid-column: 1;
    grid-row: 1 / 3;
}

.shelf-folder-preview > :nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.shelf-folder-preview > :nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}

.shelf-folder-preview[data-images="0"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.shelf-folder-preview[data-images="0"] > svg {
    width: 30px;
    height: 30px;
    color: var(--muted);
    opacity: .55;
}

.shelf-folder-preview > .asset-frame,
.shelf-folder-preview > .folder-preview-empty {
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto !important;
    pointer-events: none;
    background: color-mix(in srgb, var(--ink) 7%, var(--surface));
}

.shelf-folder-preview .asset-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shelf-folder-preview .image-status {
    font-size: 0;
    padding: 0;
}

#lower-drawer #board-assets.shelf-grid .shelf-folder .shelf-item-name {
    grid-column: 1;
    width: 100%;
    padding: 1px 22px 0 2px;
    font-size: 12px;
    font-weight: 600;
}

#lower-drawer #board-assets.shelf-grid .shelf-folder .shelf-item-kind {
    display: block;
    padding: 0 2px;
    font-size: 10px;
    color: var(--muted);
}

#lower-drawer #board-assets.shelf-grid .shelf-folder .shelf-item-check {
    top: 7px;
    left: 7px;
    z-index: 1;
}

#lower-drawer #board-assets.shelf-grid .shelf-folder .world-item-menu {
    bottom: 17px;
}

.workspace-folder-break {
    grid-column: 1 / -1;
    height: 0;
    margin: -7px 0;
}

.shelf-list .workspace-folder-break {
    display: none;
}

#lower-drawer .shelf-item.selected {
    outline: 0;
    background: color-mix(in srgb, var(--ink) 7%, var(--surface));
}

.workspace-search-empty {
    display: block;
    min-height: 0;
    margin: 0;
    padding: 12px 2px;
    text-align: left;
    font-size: 12px;
}

@media (max-width: 1100px) {
    .workspace-actions { gap: 2px; }
    .workspace-action { padding: 5px; }
    .workspace-action > span { display: none; }
    .workspace-selection-count { font-size: 9px; }
}

@media (max-width: 760px) {
    #board-assets.shelf-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px 10px; }
    #lower-drawer .shelf-toolbar { gap: 4px; padding-inline: 4px; }
    #lower-drawer .shelf-toolbar > .shelf-personal-folder { flex-basis: 32px; width: 32px; }
    #lower-drawer .shelf-toolbar .board-nav-search { flex: 1 1 140px; width: auto; padding-inline: 4px; }
    #lower-drawer .shelf-toolbar .board-nav-search > span { left: 12px; }
    #lower-drawer .shelf-toolbar #shelf-path { flex: 0 1 100px; min-width: 0; padding-inline: 4px; }
    #lower-drawer .workspace-actions { max-width: 40%; }
    #lower-drawer .board-browser-nav { padding-top: 0; }
    #lower-drawer .board-browser-rail { padding-top: 8px; }
    body.board-nav-open #lower-drawer > :is(.board-browser-rail, .board-browser-nav) { top: 0; }
}

/* Selection identifies a folder without navigating or introducing an outline. */
#board-nav-list .shelf-tree-root.selected,
#board-nav-list .shelf-tree-section.selected {
    background: var(--inset);
}

/* Folder rows have no selection checkbox; keep names aligned with file rows. */
#board-assets.shelf-list .shelf-folder > .shelf-list-icon {
    grid-column: 2;
}


/* Shared Community ranking controls stay inside the lower settings workspace. */
.community-interest-rows { display: grid; gap: 6px; }
.community-interest-row { display: grid; grid-template-columns: minmax(100px, 1fr) 86px 32px; align-items: end; gap: 8px; }
.community-interest-row .field { margin: 0; min-width: 0; }
.community-interest-row input { width: 100%; min-width: 0; }
.community-interest-row > button { width: 32px; height: 32px; padding: 6px; }
.community-interest-row > button svg { width: 18px; height: 18px; }
.community-interest-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.community-interest-form .form-note { max-width: 68ch; }

/* Community card and rail artwork use admitted thumbnail consumers, never raw URLs. */
.community-artwork { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.community-artwork > .community-artwork-fallback,
.community-artwork > .asset-frame,
.community-artwork > .asset-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.community-artwork > .asset-frame { min-height: 0; background: transparent; border-radius: inherit; }
.community-artwork > .asset-frame:not(.image-ready) > img { opacity: 0; }
.community-artwork > .asset-frame > .image-status { display: none; }
.community-search-art > .community-search-picture { position: absolute; inset: 0; z-index: -2; }
.community-search-copy { display: flex; flex-direction: column; gap: 5px; }
#community-icons .community-artwork { border-radius: inherit; }

/* Keep protected navigation glyphs legible over authored header photographs. */
body[data-skin-components~="siteHeader"] #protected-header-row button > svg {
    filter: drop-shadow(0 0 1px rgb(255 255 255 / .95)) drop-shadow(0 1px 2px rgb(255 255 255 / .9));
}

/* Large catalogue GIFs use a clearly labeled static tile, with playback on open. */
.asset-animation-notice {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 1;
    max-width: calc(100% - 12px);
    padding: 4px 6px;
    border-radius: 4px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 4px rgb(0 0 0 / .18);
    font: 500 10px/1.2 system-ui, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 0;
}
.image-ready > .asset-animation-notice { opacity: 1; }

/* Discovery content starts at its actual aperture, without a second header gap. */
#app #discover-view {
    padding: 8px calc(10px + var(--scroll-width)) 12px 10px;
}
#discover-feed, #discover-pin, .discover-pin-layout { margin-top: 0; }
#app #discover-view .discover-preview-group { gap: 10px; align-items: start; }
#app #discover-view .discover-pin-media { align-items: flex-start; justify-content: flex-start; }
#app #discover-view .discover-pin-media .asset-image { object-position: left top; }
#app #discover-view .discover-pin-info { min-width: 0; padding: 12px; }
#app #discover-view .discover-pin-actions { min-width: 0; gap: 6px; margin-bottom: 8px; }
#app #discover-view .discover-download { width: 26px; height: 28px; }
#app #discover-view .discover-pin-info h1 { margin: 4px 0 8px; font-size: 17px; line-height: 1.3; }
#app #discover-view .discover-pin-info p { margin-bottom: 8px; font-size: 12px; line-height: 1.45; }
#app #discover-view .discover-source { margin-top: 4px; gap: 4px; }
#app #discover-view .pin { margin-bottom: 12px; }
#app #discover-view .discover-related .pin { margin: 0; }
#app #discover-view .pin-caption { min-height: 0; padding: 3px 2px 0; gap: 4px; line-height: 1.3; }
#app #discover-view .pin-caption > .icon-button { width: 22px; height: 22px; padding: 3px; }
#app #discover-view .pin-caption > .icon-button svg { width: 16px; height: 16px; }

/* Programmatic region focus is not a selected card. Keyboard controls retain
   a small neutral inset indicator instead of the browser's black outline. */
#app #discover-view:focus,
#app #discover-feed:focus,
#app #discover-pin:focus,
#app #discover-view [tabindex="-1"]:focus { outline: 0; }
#app #discover-view :is(button, a, input, select):focus,
#header-search-slot :is(button, input):focus { outline: 0; }
#app #discover-view :is(button, a, input, select):focus-visible,
#header-search-slot :is(button, input):focus-visible {
    outline: 1px solid var(--muted);
    outline-offset: -2px;
}
#app #discover-view #search-form:focus-within,
#header-search-slot #search-form:focus-within { outline: 0; }

/* One continuous header artwork surface sits behind icons and search. */
#community-header-artwork { background-size: cover; background-position: center; background-repeat: no-repeat; }
body[data-header-artwork-layer][data-skin-components] #community-header-artwork { background-image: none; }
#community-header-artwork > .community-header-layer {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* One source on both header surfaces is one continuous piece of artwork. */
body[data-shared-header-artwork][data-skin-components~="siteHeader"] #protected-header-row {
    background: transparent;
}

/* Authored Community materials keep their colors; shared controls adopt the
   background's readable light/dark tone without changing the account theme. */
body[data-community-tone="dark"] {
    color-scheme: dark;
    --bg: var(--community-tone-base);
    --surface: color-mix(in srgb, var(--community-tone-base) 92%, white);
    --nav: color-mix(in srgb, var(--community-tone-base) 96%, white);
    --inset: color-mix(in srgb, var(--community-tone-base) 88%, black);
    --ink: #f5f6f7;
    --muted: #c4c9d0;
    --line: color-mix(in srgb, var(--community-tone-base) 74%, white);
    --accent: #adcaff;
    --rail: var(--bg);
    --raised: linear-gradient(var(--surface), var(--nav));
    --toolbar: linear-gradient(var(--surface), var(--nav));
    --toolbar-base: var(--nav);
    --toolbar-crown: var(--surface);
    --toolbar-cap: color-mix(in srgb, var(--community-tone-base) 84%, white);
    --toolbar-rim: #ffffff20;
    --toolbar-gloss: linear-gradient(var(--toolbar-cap), var(--surface) 35%, var(--nav));
    --shadow: 0 4px 9px #0005;
    --control-shadow: 0 1px 2px #0006;
    --column-shadow: -4px 0 9px #0005, 4px 0 9px #0005;
    --toolbar-shadow-down: 0 1px 2px #0005, 0 5px 10px #0006;
    --toolbar-shadow-up: 0 -1px 2px #0005, 0 -5px 10px #0006;
    --scroll-track: var(--inset);
    --scroll-edge: color-mix(in srgb, var(--community-tone-base) 72%, black);
    --scroll-thumb-top: color-mix(in srgb, var(--community-tone-base) 62%, white);
    --scroll-thumb-bottom: var(--surface);
}
body[data-community-tone="light"] {
    color-scheme: light;
    --bg: var(--community-tone-base);
    --surface: color-mix(in srgb, var(--community-tone-base) 18%, white);
    --nav: color-mix(in srgb, var(--community-tone-base) 60%, white);
    --inset: color-mix(in srgb, var(--community-tone-base) 82%, white);
    --ink: #202124;
    --muted: #535963;
    --line: color-mix(in srgb, var(--community-tone-base) 78%, #222);
    --accent: #246291;
    --rail: var(--bg);
    --raised: linear-gradient(white, var(--nav));
    --toolbar: linear-gradient(white, var(--nav));
    --toolbar-base: var(--nav);
    --toolbar-crown: var(--surface);
    --toolbar-cap: #fff;
    --toolbar-rim: #ffffffb3;
    --toolbar-gloss: linear-gradient(white, var(--surface) 35%, var(--nav));
    --shadow: 0 4px 9px #0002;
    --control-shadow: 0 1px 2px #0002;
    --column-shadow: -4px 0 9px #0002, 4px 0 9px #0002;
    --toolbar-shadow-down: 0 1px 2px #0002, 0 5px 10px #0003;
    --toolbar-shadow-up: 0 -1px 2px #0002, 0 -5px 10px #0003;
    --scroll-track: var(--inset);
    --scroll-edge: var(--line);
    --scroll-thumb-top: white;
    --scroll-thumb-bottom: var(--nav);
}

/* Pending discovery media is a visual placeholder, never a filename list.
   MediaStore marks genuine failures so unavailable content stays explicit. */
:is(#discover-view, .v03-discover-compact) .pin:has(.asset-frame:not(.image-ready)) .pin-caption { visibility: hidden; }

/* Photograph-backed controls keep dark ink with the existing pale edge halo,
   independently of the Community content's light/dark palette. */
body[data-header-artwork-layer] #protected-header-row button > svg { color: #202124; }


/* Discovery keeps ranked items in shortest-column order instead of balancing
   whole CSS columns each time more results arrive. */
/* Board choice belongs to the pin. Save commits the selected destination in place. */
.pin-save-controls { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pin-save-controls > .pin-board-choice { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; border: 0; padding: 9px 10px; border-radius: 16px; text-align: left; color: var(--ink); background: var(--raised); font-size: 12px; font-weight: 650; }
.pin-board-choice > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-board-choice > svg { order: 1; flex: 0 0 14px; width: 14px; height: 14px; }
.pin-save-controls > .pin-save { position: static; flex: 0 0 auto; margin: 0; border: 0; border-radius: 18px; padding: 10px 15px; color: white; background: #e60023; box-shadow: none; font-size: 12px; font-weight: 650; opacity: 1; }
.pin-save-controls > .pin-save:hover { background: #c9001f; }
.pin-save-controls > .pin-save:disabled { opacity: .8; cursor: default; }
.pin .pin-save-controls { position: absolute; z-index: 3; top: 8px; left: 8px; right: 8px; opacity: 0; pointer-events: none; }
.pin .pin-save-controls > .pin-board-choice { color: white; background: #242421dc; }
.pin .pin-save-controls > .pin-board-choice:hover { background: #242421; }
.pin:hover .pin-save-controls, .pin:focus-within .pin-save-controls, .pin .pin-save-controls:has(.pin-save:disabled) { opacity: 1; pointer-events: auto; }
.pin-visual::before { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(#0007, transparent 45%, transparent 70%, #0003); }
.pin:hover .pin-visual::before, .pin:focus-within .pin-visual::before { opacity: 1; }
.pin-download { z-index: 3; }
.pin-save-controls-detail { flex: 1; min-width: 0; }
.pin-save-controls-detail > .pin-board-choice { background: transparent; }

.board-save-picker { position: fixed; inset: auto; margin: 0; width: min(340px, calc(100vw - 24px)); max-height: min(540px, calc(100dvh - 24px)); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 10px 32px #0003; z-index: 90; }
.board-save-picker:popover-open, .board-save-picker[data-open=true] { display: flex; flex-direction: column; }
.board-save-picker::backdrop { background: transparent; }
.board-save-heading { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 42px 8px; font-size: 16px; }
.board-save-heading > .icon-button { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; }
.board-save-search { display: flex; align-items: center; gap: 8px; margin: 3px 14px 8px; padding: 0 12px; min-height: 40px; border: 1px solid var(--line); border-radius: 20px; background: var(--raised); }
.board-save-search svg { flex: 0 0 18px; width: 18px; height: 18px; }
.board-save-search input { width: 100%; min-width: 0; padding: 9px 0; border: 0; outline: 0; background: transparent; color: inherit; font-size: 13px; }
.board-save-search:focus-within { border-color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.board-save-list { flex: 1 1 auto; min-height: 40px; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 9px 8px; }
.board-save-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 62px; border: 0; border-radius: 10px; padding: 6px 8px; color: inherit; background: transparent; text-align: left; }
.board-save-row:hover, .board-save-row:focus-visible { outline: 0; background: var(--inset); }
.board-save-row[aria-pressed=true] { background: var(--inset); }
.board-save-row .board-save-preview { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; overflow: hidden; border-radius: 9px; background: var(--inset); }
.board-save-preview > .asset-frame { width: 100%; height: 100%; min-height: 0; }
.board-save-preview .asset-image { width: 100%; height: 100%; object-fit: cover; }
.board-save-preview .image-status { display: none; }
.board-save-preview svg { width: 23px; height: 23px; }
.board-save-row > span:not(.board-save-preview) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.board-save-row > svg { flex: 0 0 16px; width: 16px; height: 16px; }
.board-save-status { padding: 7px 16px; margin: 0; font-size: 12px; color: var(--muted); }
.board-save-footer { position: relative; z-index: 1; flex: 0 0 auto; padding: 8px 12px; border-top: 0; background: var(--surface); box-shadow: 0 -5px 14px #0000000b; }
.board-save-footer > button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; padding: 7px 4px; background: transparent; color: inherit; text-align: left; font-size: 13px; font-weight: 650; }
.board-save-footer > button svg { width: 25px; height: 25px; padding: 8px; box-sizing: content-box; border-radius: 9px; background: var(--inset); }
.board-save-footer form { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px 0; }
.board-save-footer input { flex: 1 1 140px; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--raised); color: inherit; outline: 0; }
.board-save-footer form button { display: flex; align-items: center; gap: 5px; border: 0; border-radius: 8px; padding: 8px 12px; background: var(--inset); color: inherit; }
@media (hover: none) { .pin .pin-save-controls { opacity: 1; pointer-events: auto; } }

.board-save-footer form button svg { width: 16px; height: 16px; }

.board-save-status:empty { display: none; }

/* Board selection and its direct Save shortcut are siblings, never nested buttons. */
.board-save-row:has(.board-save-select) { padding: 0; gap: 0; }
.board-save-select { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; }
.board-save-select > span:not(.board-save-preview) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.board-save-select > svg { flex: 0 0 16px; width: 16px; height: 16px; }
.board-save-row:has(.board-save-select[aria-pressed=true]) { background: var(--inset); }
.board-save-row-save { flex: 0 0 auto; border: 0; border-radius: 16px; margin-right: 8px; padding: 8px 12px; background: #e60023; color: white; font-size: 12px; font-weight: 650; opacity: 0; pointer-events: none; }
.board-save-row:hover .board-save-row-save, .board-save-row:focus-within .board-save-row-save { opacity: 1; pointer-events: auto; }
.board-save-row-save:hover { background: #c9001f; }
@media (hover: none) { .board-save-row-save { opacity: 1; pointer-events: auto; } }


.discover-page-sentinel { display: block; height: 1px; min-height: 1px; width: 100%; margin: 0; padding: 0; border: 0; overflow: hidden; pointer-events: none; }

.discovery-loading-cold > :is(#discover-feed, #discover-pin, .discover-feed, .discover-pin) { display: none !important; }


/* Thin artwork keeps its aspect ratio; one hover action opens the Board picker. */
.pin-wide .pin-save-controls { inset: 0 6px 0 0; justify-content: flex-end; gap: 0; pointer-events: none; }
.pin-wide .pin-save-controls > .pin-board-choice { display: none; }
.pin-wide .pin-save-controls > .pin-save { display: grid; place-items: center; height: 28px; min-height: 28px; padding: 0 14px; }
.pin-wide .pin-visual { overflow: visible; }
.pin-wide .pin-open { overflow: hidden; border-radius: inherit; }
.pin-wide .pin-download { display: none; }
.pin-wide .pin-visual::before { background: #0003; }

@media (hover: none) { .pin-wide .pin-save-controls { opacity: 1; pointer-events: auto; } }

/* Folder targets are local to the lower workspace; hover never repacks artwork. */
#lower-drawer .board-drop-target {
    background-color: color-mix(in srgb, var(--accent) 15%, var(--surface));
    border-radius: 6px;
}
#lower-drawer .board-drop-blocked { cursor: not-allowed; }
#lower-drawer [aria-busy="true"] { cursor: progress; }
.board-drop-notice {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    max-width: min(40%, 320px); padding-inline: 8px;
    font-size: 11px; color: var(--ink);
}
.board-drop-notice > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-drop-retry {
    flex: 0 0 auto; padding: 4px 7px; border-radius: 5px;
    background: var(--surface); color: var(--ink); font-size: 11px;
}

/* Rename the existing folder caption in place, beneath its preview. */
.folder-name-editor { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; min-width: 0; width: 100%; margin: 0; }
.folder-name-editor .folder-name-input { flex: 1 1 80px; min-width: 0; width: 80px; height: 28px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px; outline: 0; box-shadow: none; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; }
.folder-name-editor button { display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; padding: 4px; border: 0; outline: 0; background: transparent; color: var(--ink); }
.folder-name-editor button:hover { background: var(--inset); border-radius: 4px; }
.folder-name-editor svg { width: 15px; height: 15px; }
.folder-name-error { flex: 1 0 100%; font-size: 11px; color: #c54050; }

/* A small storage footer belongs to the folder column, never the message row. */
.board-navigation-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.board-navigation-scroll::-webkit-scrollbar { display: none; }
#lower-drawer .board-browser-nav { display: flex; flex-direction: column; overflow: hidden; }
.storage-meter { flex: 0 0 auto; width: 100%; box-sizing: border-box; padding: 7px 12px 8px; border-top: 1px solid var(--line); background: var(--nav, var(--surface)); color: var(--ink); font-size: 10px; }
.storage-meter[hidden] { display: none; }
.storage-meter-heading, .storage-meter-total { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.storage-meter-heading > strong { font-size: 10px; font-weight: 600; }
.storage-meter-heading button { display: grid; place-items: center; width: 20px; height: 18px; padding: 2px; background: transparent; border: 0; color: var(--muted); }
.storage-meter-heading svg { width: 13px; height: 13px; }
.storage-meter-total > strong { font-size: 11px; font-weight: 500; }
.storage-meter-total > span, .storage-meter-note { color: var(--muted); font-size: 9px; }
.storage-breakdown { display: flex; overflow: hidden; height: 4px; margin: 5px 0 3px; border-radius: 2px; background: var(--inset); }
.storage-breakdown > span { display: block; height: 100%; }
.storage-originals { background: var(--accent); }
.storage-previews { background: color-mix(in srgb, var(--accent) 45%, var(--ink)); }
.storage-meter .ui-skeleton { padding: 0; gap: 3px; }
.storage-meter .ui-skeleton-heading, .storage-meter .ui-skeleton-symbol { display: none; }
.storage-meter .ui-skeleton-nav-row { min-height: 20px; padding: 0; }
.storage-meter .ui-skeleton-line { height: 9px; }
@media (max-width: 760px) {
    body:not(.board-nav-open) #lower-drawer .board-browser-nav { display: none; }
    body.board-nav-open #lower-drawer .board-browser-nav { display: flex; }
}

/* Channel rows accept the same reference gesture as their folder counterparts. */
#nav-scroll .channel-row.board-drop-target { background-color: color-mix(in srgb, var(--accent) 15%, var(--surface)); border-radius: 6px; }
#nav-scroll .channel-row.board-drop-blocked { cursor: not-allowed; }
#nav-scroll .channel-row[aria-busy="true"] { cursor: progress; }

/* Channels are scopes above their independently named Boards. */
#board-nav-list .shelf-channel-boards { margin-left: 14px; border-left: 1px solid var(--line); }
#board-nav-list .shelf-channel-boards > .form-note { padding: 4px 12px; margin: 0; font-size: 11px; }
#board-nav-list .shelf-create-board { display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 12px; color: var(--muted); font-size: 11px; }
#board-nav-list .shelf-create-board svg { width: 14px; height: 14px; }
#board-assets .shelf-empty button { margin-top: 10px; }
.board-destination-list { max-height: 40vh; overflow-y: auto; }

#lower-drawer .shelf-personal-groups { padding: 12px; }
#lower-drawer .shelf-folder-group { display: block; margin-bottom: 18px; }
#lower-drawer .shelf-folder-group > :is(.inventory-masonry,.shelf-list) { width: 100%; padding: 0; }
#lower-drawer .shelf-folder-group-title { margin: 0; padding: 8px 10px; color: var(--muted); font-size: 11px; font-weight: 600; }

/* Folder options stay at the edge, clear of the double-click navigation area. */
#board-nav-list .shelf-tree-root > .world-item-menu { margin-left: auto; flex: 0 0 24px; width: 24px; height: 24px; }


/* Community quotas live in Settings; personal estimates remain a compact footer. */
.storage-meter[data-scope=community] { padding: 0; border: 0; background: transparent; font-size: 12px; }
.storage-meter[data-scope=community] .storage-meter-heading > strong { font-size: 12px; }
.storage-meter[data-scope=community] .storage-meter-summary { max-width: 560px; margin: 8px 0 16px; }
.storage-meter[data-scope=community] .storage-meter-total > strong { font-size: 12px; }
.storage-meter[data-scope=community] :is(.storage-meter-total > span,.storage-meter-note) { font-size: 11px; }
.storage-quota { max-width: 560px; border-top: 1px solid var(--line); padding-top: 12px; }
.storage-quota[hidden] { display: none; }
.storage-quota-heading { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.storage-quota-heading > strong { font-size: 12px; }
.storage-quota-track { height: 5px; overflow: hidden; border-radius: 3px; background: var(--inset); margin: 8px 0; }
.storage-quota-track > span { display: block; height: 100%; background: var(--accent); }
.storage-quota-track.over-limit > span { background: #b94c56; }
.storage-quota-controls { display: flex; align-items: end; gap: 6px; flex-wrap: wrap; }
.storage-quota-controls .field { flex: 1 1 130px; min-width: 0; gap: 4px; margin: 0; }
.storage-quota-controls .field:has(select) { flex: 0 1 75px; }
.storage-quota-controls :is(input,select) { box-sizing: border-box; min-height: 32px; width: 100%; min-width: 0; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised,var(--surface)); color: var(--ink); font: inherit; box-shadow: none; }
.storage-quota-controls button { min-height: 32px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); font: inherit; }
.storage-quota-controls button:disabled { opacity: .5; cursor: default; }
.storage-quota-note,.storage-quota-help,.storage-quota-status { margin: 7px 0 10px; font-size: 11px; line-height: 1.45; }
.storage-quota-note,.storage-quota-help { color: var(--muted); }
.storage-quota-status:empty { display: none; }