* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: #02040a;
    color: #e6edf5;
    overflow: hidden;
}

#galaxy {
    --node-size: 26px;
    --sidebar-width: 260px;
    --sidebar-space: 260px;
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 35% 42%, #080e1c 0%, #040811 45%, #02040a 85%);
}

.universe-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
}

.nebula-layer {
    position: absolute;
    inset: -10%;
    opacity: 0.32;
    filter: blur(12px);
    background:
        radial-gradient(ellipse 22% 12% at 24% 36%, rgba(69, 62, 115, 0.22), transparent 90%),
        radial-gradient(ellipse 30% 11% at 44% 53%, rgba(28, 64, 94, 0.17), transparent 85%),
        radial-gradient(ellipse 18% 26% at 65% 65%, rgba(47, 31, 82, 0.16), transparent 90%);
    transform: rotate(-16deg);
}

.star-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.7px;
    height: 0.7px;
    border-radius: 50%;
}

.star-layer--middle {
    width: 1.15px;
    height: 1.15px;
}

.star-layer--near {
    width: 1.6px;
    height: 1.6px;
}

#graph-viewport,
#graph-world,
#regions-layer,
#nodes-layer {
    position: absolute;
    inset: 0;
}

#graph-viewport {
    overflow: clip;
    touch-action: none;
    cursor: grab;
}

#graph-viewport.is-panning { cursor: grabbing; }
#graph-world { transform-origin: 0 0; }
#nodes-layer { pointer-events: none; }
#regions-layer { pointer-events: none; }
.entry-node { pointer-events: auto; }

#zoom-level {
    color: #8997aa;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    min-width: 34px;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    color: #e6edf5;
    background: linear-gradient(180deg, #334256, #293649);
    border: 1px solid #596a80;
    border-radius: 9px;
    padding: 10px 16px;
    font-size: 13px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(240, 248, 255, 0.06), 0 3px 8px rgba(0, 0, 0, 0.12);
    transition: border-color 150ms, box-shadow 150ms;
}

button:hover {
    border-color: #8b9db6;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #b9d0e9;
    outline-offset: 4px;
}

#storage-status {
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #665741;
    border-radius: 8px;
    background: #27241f;
    color: #d9bf94;
    font-size: 12px;
    line-height: 1.5;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.entry-search {
    position: relative;
}

#entry-search {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #344359;
    border-radius: 9px;
    background: rgba(18, 26, 40, 0.94);
    color: #e6edf5;
    font-size: 13px;
}

#search-results {
    margin-top: 6px;
    padding: 6px;
    border: 1px solid #344359;
    border-radius: 9px;
    background: #172130;
    max-height: min(360px, 45dvh);
    overflow: auto;
}

#search-result-list { list-style: none; margin: 0; padding: 0; }
#search-result-list button {
    width: 100%;
    padding: 9px;
    text-align: left;
    overflow-wrap: anywhere;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#search-result-list button:hover { background: #26354a; }
#search-result-list button span { display: block; color: #c5d7e9; }
#search-result-list button small { display: block; margin-top: 3px; color: #839ab5; font-size: 10px; }
#search-status { margin: 8px; color: #aebfd3; font-size: 11px; }
button:disabled { opacity: 0.45; cursor: default; }
#entry-action-status, #entry-form-error { color: #e2ba9e; font-size: 12px; line-height: 1.5; }
#parent-field label { display: block; color: #bac7d8; margin-bottom: 10px; }
#parent-help { color: #8c9eb5; font-size: 12px; line-height: 1.5; margin: 8px 0; }
#delete-entry-dialog {
    width: min(400px, calc(100vw - 32px));
    padding: 24px;
    border: 1px solid #475970;
    border-radius: 16px;
    color: #e6edf5;
    background: #192330;
}
#delete-entry-dialog::backdrop { background: rgba(7, 12, 20, 0.68); }
#delete-entry-dialog h2 { margin: 0 0 16px; font-size: 21px; overflow-wrap: anywhere; }
#delete-entry-message { color: #b0bdcd; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
#confirm-delete-entry { border-color: #997675; background: #523b3c; }

.entry-node {
    --body-scale: 1;
    --body-render-scale: var(--camera-scale, 1);
    --body-hue: 218;
    /* Static monochrome grain adds surface detail without a raster asset or animation. */
    --surface-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.4'/%3E%3C/svg%3E");
    position: absolute;
    top: 0;
    left: 0;
    width: min(var(--body-cap, 76px), calc(var(--node-size) * var(--body-scale) * var(--body-visual-scale, 1) * var(--body-render-scale)));
    height: min(var(--body-cap, 76px), calc(var(--node-size) * var(--body-scale) * var(--body-visual-scale, 1) * var(--body-render-scale)));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 29% 26%,
        hsl(var(--body-hue) 24% 74%) 0%,
        hsl(var(--body-hue) 28% 46%) 27%,
        hsl(var(--body-hue) 34% 24%) 49%, #070c17 65%, #02050b 82%);
    border: 1px solid hsl(var(--body-hue) 35% 70% / 0.42);
    box-shadow:
        inset 1px 1px 0 rgba(210, 235, 255, 0.4),
        inset -3px -2px 5px rgba(0, 1, 7, 0.7),
        0 0 3px hsl(var(--body-hue) 40% 65% / 0.06),
        2px 4px 6px rgba(0, 0, 0, 0.4);
    color: #ecf1f7;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    padding: 0;
    cursor: grab;
    user-select: none;
    touch-action: none;
    z-index: 1;
    transition: opacity 180ms ease;
}

.entry-node::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background:
        var(--surface-map),
        var(--surface-grain);
    background-size: 100% 100%;
    mix-blend-mode: soft-light;
    opacity: 0.7;
    transform: rotate(var(--surface-angle, 0deg));
    pointer-events: none;
}

.entry-node::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(ellipse 74% 85% at 16% 30%,
        transparent 37%, rgba(1, 3, 8, 0.12) 48%, rgba(0, 2, 7, 0.72) 71%);
    box-shadow: inset 1px 1px 0 rgba(216, 233, 255, 0.3), inset -1px -1px 0 rgba(156, 180, 219, 0.12);
}

.entry-node[data-body="sun"] {
    background: radial-gradient(circle at 38% 34%, #fffdf2 0%, #fff4c5 24%, #f6cf69 58%, #cf842b 83%, #783716 100%);
    border-color: rgba(255, 231, 161, 0.76);
    box-shadow:
        inset 1px 1px 1px rgba(255, 255, 238, 0.75),
        inset -2px -2px 4px rgba(155, 69, 18, 0.35),
        0 0 0 1px rgba(255, 211, 105, 0.08),
        0 0 10px rgba(255, 199, 82, 0.32),
        0 0 18px rgba(235, 150, 52, 0.10);
    font-size: 12px;
    font-weight: 600;
}

.entry-node[data-body="sun"]::before {
    background:
        var(--surface-map),
        var(--surface-grain);
    mix-blend-mode: soft-light;
    opacity: 0.24;
}

.entry-node[data-body="sun"]::after {
    inset: -18%;
    background: radial-gradient(circle, transparent 46%, #ffdb8d38 52%, #efad3e14 60%, transparent 72%);
    box-shadow: none;
}

.entry-node[data-body="sun"][data-surface="golden"] {
    background: radial-gradient(circle at 38% 34%, #fffef5 0%, #fff1ad 25%, #efbd4f 60%, #b96924 86%, #672b14 100%);
}

.entry-node[data-body="planet"] {
    background: radial-gradient(circle at 28% 24%, hsl(var(--body-hue) 48% 85%) 0%, hsl(var(--body-hue) 68% 52%) 30%, hsl(var(--body-hue) 64% 27%) 58%, #050a15 86%);
    border-color: hsl(var(--body-hue) 48% 72% / .6);
    box-shadow: inset 1px 1px 0 #d2ebff66, inset -3px -2px 5px #000107aa, 0 0 6px hsl(var(--body-hue) 48% 60% / .12), 2px 4px 6px #0006;
    --texture-opacity: .62;
}

.entry-node[data-body="moon"] {
    background: radial-gradient(circle at 26% 24%, hsl(var(--body-hue) 4% 67%) 0%, hsl(var(--body-hue) 5% 45%) 30%, hsl(var(--body-hue) 6% 24%) 57%, #0a0e14 85%);
    border-color: rgba(178, 192, 210, 0.4);
    box-shadow: inset 1px 1px 0 #e9edf33d, inset -1px -1px 2px #00020899, 1px 2px 3px #0004;
    font-size: 10px;
    font-weight: 400;
}

.entry-node[data-body="moon"]::before {
    background:
        radial-gradient(circle at 33% 38%, #090d1580 0 9%, #d9dcd833 10% 12%, transparent 13%),
        radial-gradient(circle at 65% 64%, #090d1570 0 13%, #d9dcd828 14% 16%, transparent 17%),
        radial-gradient(circle at 72% 27%, #090d1560 0 5%, transparent 7%),
        var(--surface-map),
        var(--surface-grain);
    mix-blend-mode: normal;
    opacity: 0.26;
    transform: rotate(var(--surface-angle, 0deg));
}



.node-label {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    transform-origin: 50% 0;
    width: max-content;
    max-width: max(64px, calc(46px * var(--body-scale) + 22px));
    z-index: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-align: center;
    font-size: calc(10px * var(--native-label-scale, 1));
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    pointer-events: none;
    transition: opacity 180ms ease;
}

.entry-node:hover {
    border-color: rgba(205, 221, 239, 0.65);
}

.entry-node.related {
    border-color: hsl(var(--body-hue) 35% 75% / 0.56);
}

.entry-node.selected:not(.canvas-selection-muted) {
    border-color: #bbcee5;
    outline: 1px solid rgba(190, 209, 232, 0.65);
    outline-offset: 2px;
}

.entry-node.selected:not(.canvas-selection-muted) .node-label {
    color: #fff;
    font-weight: 600;
    max-width: calc(46px * var(--body-scale) + 52px);
}

.entry-node:focus-visible {
    outline: 2px solid #b9d0e9;
    outline-offset: 2px;
}

.entry-node.dragging {
    cursor: grabbing;
    z-index: 5;
    transition: none;
}

/* Native bodies reuse their paint during translation while physics is active. */
#galaxy.is-settling .entry-node:not([data-body="galaxy"]) { will-change: transform; }

#hierarchy-paths {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.hierarchy-line {
    stroke: #93a8c0;
    stroke-width: 0.65;
    stroke-linecap: round;
    opacity: 0.22;
    vector-effect: non-scaling-stroke;
    transition: opacity 180ms, stroke 180ms;
}

.hierarchy-line.selected {
    stroke: #bccfe5;
    stroke-width: 1;
    opacity: 0.58;
}

/* Scale controls bodies; selection emphasizes without bypassing semantic zoom. */
#galaxy.has-selection .entry-node:not([data-body="galaxy"]):not(.in-galaxy):not(.selected):not(.related):not(.temporarily-revealed) { --context-opacity: .72; }
.entry-node[data-body="sun"] { --body-render-scale: var(--sun-render-scale, 1); opacity: calc(var(--sun-detail, 1)*var(--context-opacity, 1)); --texture-opacity: .24; }
.entry-node[data-body="planet"] { --body-render-scale: var(--planet-render-scale, 1); opacity: calc(var(--planet-detail, 1)*var(--context-opacity, 1)); }
.entry-node[data-body="moon"] { --body-render-scale: var(--moon-render-scale, 1); opacity: calc(var(--moon-detail, 1)*var(--context-opacity, 1)); --texture-opacity: .85; }
.entry-node[data-body="satellite"] { --body-render-scale: var(--satellite-render-scale, 1); opacity: calc(var(--satellite-detail, 1)*var(--context-opacity, 1)); --texture-opacity: .65; }
.entry-node[data-body="astronaut"] { --body-render-scale: var(--astronaut-render-scale, 1); opacity: calc(var(--astronaut-detail, 0)*var(--context-opacity, 1)); }
.entry-node[data-body="planet"] .node-label { opacity: var(--planet-label-detail, 1); }
.entry-node[data-body="moon"] .node-label { opacity: var(--moon-label-detail, 1); }
.entry-node[data-body="satellite"] .node-label { opacity: var(--detail-label-opacity, var(--satellite-label-detail, 1)); }
.entry-node[data-body="astronaut"] .node-label { opacity: var(--detail-label-opacity, var(--astronaut-label-detail, 0)); }
.entry-node[data-body="sun"] .node-label { font-size: 10px; }
.entry-node[data-body="sun"] .node-label { opacity: var(--sun-label-detail,1); }
.node-hit-area { position: absolute; left: 50%; top: 50%; width: max(24px,100%); height: max(24px,100%); transform: translate(-50%,-50%); border-radius: 50%; background: transparent; }
@media (pointer: coarse) { .node-hit-area { width: max(44px,100%); height: max(44px,100%); } }
#galaxy .node-label[data-density-hidden="true"] { opacity: 0 !important; pointer-events: none; }
#galaxy .entry-node:not(.canvas-selection-muted):is(.selected,:hover,:focus-visible,.dragging) .node-label { opacity: 1 !important; }
#galaxy #nodes-layer .entry-node.canvas-selection-muted { outline: none !important; }
#galaxy .entry-node.label-priority .node-label { opacity: 1 !important; }
#galaxy .entry-node:not([data-body="galaxy"]):is(.selected,:hover,:focus-visible,.dragging) .node-label { font-size: 10px; }
.entry-node .node-label { pointer-events: auto; }
.entry-node[data-body="planet"][data-surface="gaseous"] { --texture-opacity: .48; }
.entry-node[data-body="planet"][data-surface="icy"] { --texture-opacity: .40; }
.entry-node[data-body="moon"] { --texture-opacity: .18; }
#nodes-layer .entry-node::before { background-size: 100% 100%; opacity: calc(var(--surface-detail, 1)*var(--texture-opacity, .7)); }
#nodes-layer .entry-node[data-texture-cached="true"]::before { mix-blend-mode: normal; transform: none; }
#galaxy .entry-node.temporarily-revealed { opacity: 1; --body-render-scale: max(var(--camera-scale, 1), .35); pointer-events: auto; }
#galaxy .entry-node.temporarily-revealed .node-label { opacity: 1; font-size: 10px; }
#galaxy .entry-node:is(.selected,.selected-ancestor) .node-label { font-size: 10px; }
.hierarchy-line[data-kind="hierarchy"] { opacity: 0; }
.hierarchy-line[data-kind="hierarchy"]:not(.astronaut-tether):not(.context-link) { display: none; }
.hierarchy-line[data-kind="hierarchy"].context-link { opacity: calc(var(--orbit-detail, 0)*.1); stroke-width: .65; }
.hierarchy-line.astronaut-tether { fill: none; stroke: #a4b0ba; stroke-dasharray: none; vector-effect: none; pointer-events: none; transition: opacity 180ms ease; }
.orbit-guide { fill: none; stroke: #859ab5; stroke-width: .65; vector-effect: non-scaling-stroke; opacity: calc(var(--orbit-detail, 0)*.09); pointer-events: none; transition: opacity 180ms ease; }
.orbit-guide:not([data-role="sun"]) { opacity: calc(var(--orbit-detail, 0)*.07); }
.orbit-guide:not([data-active="true"]) { display: none; }

.galaxy-region { position: absolute; top: 0; left: 0; width: 512px; height: 512px; transform-origin: 0 0; opacity: var(--galaxy-cloud-detail, .92); pointer-events: none; }
.galaxy-region.is-selected { filter: brightness(1.2); }
#galaxy.is-settling .galaxy-region:not([data-culled="true"]):not([data-semantic-hidden="true"]) { will-change: transform; }
#galaxy .entry-node[data-culled="true"], .galaxy-region[data-culled="true"] { visibility: hidden; pointer-events: none; will-change: auto; }
#galaxy .entry-node[data-semantic-hidden="true"] { pointer-events: none; }
.galaxy-region[data-semantic-hidden="true"] { visibility: hidden; }
#galaxy.is-settling .entry-node:is([data-culled="true"],[data-semantic-hidden="true"]) { will-change: auto; }
#nodes-layer .entry-node:is([data-culled="true"],[data-semantic-hidden="true"])::before { content: none; }
#galaxy .entry-node[data-body="galaxy"] { width: 140px; height: 28px; border: 0; border-radius: 8px; box-shadow: none; background: transparent; z-index: 0; }
#galaxy .entry-node[data-body="galaxy"]::before, #galaxy .entry-node[data-body="galaxy"]::after { content: none; }
#galaxy .entry-node[data-body="galaxy"] .node-label { top: 5px; width: max-content; max-width: 180px; font-size: var(--galaxy-label-size, 16px); line-height: 1.25; font-weight: 600; letter-spacing: .035em; opacity: 1; color: hsl(var(--body-hue) 30% 92%); text-shadow: 0 1px 4px #02040a, 0 0 10px #02040ae6; }
#galaxy #nodes-layer .entry-node[data-body="galaxy"]:is(.selected,:focus-visible) { outline: none; }
#galaxy #nodes-layer .entry-node[data-body="galaxy"].selected .node-label { color: hsl(var(--body-hue) 65% 98.5%); font-weight: 700; }
#galaxy #nodes-layer .entry-node[data-body="galaxy"]:focus-visible .node-label { text-decoration: underline; text-decoration-color: #b9d0e9; text-underline-offset: 4px; }
#nodes-layer .entry-node:is([data-body="satellite"],[data-body="astronaut"]) { background: transparent; border: 0; border-radius: 3px; box-shadow: none; }
#nodes-layer .entry-node:is([data-body="satellite"],[data-body="astronaut"])::before, #nodes-layer .entry-node:is([data-body="satellite"],[data-body="astronaut"])::after { content: none; }
.satellite-craft, .astronaut-figure { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.entry-node[data-surface="oceanic"] { background: radial-gradient(circle at 28% 24%, #a7d0df, #2d738d 30%, #14314c 54%, #040915 83%); }

.entry-node[data-surface="desert"] { background: radial-gradient(circle at 28% 24%, #e7c29a, #a5764c 30%, #59402e 52%, #0c0a0b 83%); }
.entry-node[data-surface="ringed"] { background: radial-gradient(circle at 28% 24%, #e0c9a2, #a19375 30%, #4f4b43 53%, #080b12 83%); }
.planet-rings { position: absolute; width: 160%; height: 42%; left: -30%; top: 29%; border: 2px double hsl(var(--body-hue) 26% 68% / .58); border-radius: 50%; transform: rotate(-24deg); pointer-events: none; box-shadow: 0 0 0 1px hsl(var(--body-hue) 18% 48% / .15); }
#panel-ancestry { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; flex: 1 1 0%; min-width: 0; margin: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
#panel-ancestry[hidden] { display: none; }
#panel-ancestry::-webkit-scrollbar { display: none; }
#panel-ancestry.has-clipped-ancestors::before { content: '…'; position: absolute; inset: 0 auto 0 0; z-index: 1; display: grid; place-items: center; width: 14px; background: #0e1621; color: #8ca8ca; font-size: 11px; pointer-events: none; }
#panel-ancestry button { font-size: 11px; padding: 3px 5px; background: transparent; border-color: #60718b44; box-shadow: none; }
#panel-ancestry button { flex: 0 0 auto; max-width: 140px; min-width: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
#panel-ancestry button:focus-visible { outline: 1px solid #91adc9; outline-offset: -1px; }
#entry-role { color: #c4d5ec; font-size: 12px; }

#entry-panel {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(288px, 28vw);
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    background: #0e1621;
    border: 0;
    border-left: 1px solid #50627c33;
    border-radius: 0;
    box-shadow: none;
    z-index: 21;
    max-height: 100dvh;
    overflow-y: auto;
    overflow-wrap: anywhere;
}

.panel-content { min-height: 0; flex-shrink: 0; overflow: visible; }
#entry-action-status { flex-shrink: 0; margin-bottom: 0; }

.panel-eyebrow {
    display: block;
    margin-bottom: 0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #75869d;
}

#entry-panel h2 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

#entry-panel,
#add-entry-dialog {
    scrollbar-width: thin;
    scrollbar-color: #465571 transparent;
}

#add-entry-dialog {
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 24px;
    color: #e6edf5;
    background: #101b29;
    border: 1px solid #465a7255;
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}

#add-entry-dialog::backdrop {
    background: rgba(7, 12, 20, 0.68);
    backdrop-filter: blur(4px);
}

#add-entry-form {
    display: grid;
    gap: 20px;
    font-size: 13px;
}

#add-entry-title {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

#entry-name-field, #entry-info-fields { display: grid; gap: 8px; min-width: 0; }
#entry-info-fields { row-gap: 10px; }
#add-entry-form label {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: #bac7d8;
}

#add-entry-form input[type="text"],
#add-entry-form textarea,
#add-entry-form select {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    color: #e6edf5;
    background: #0b1420;
    border: 1px solid #42536b88;
    border-radius: 6px;
    box-shadow: none;
}
#add-entry-form :is(input,textarea,select):focus { outline: none; border-color: #7b98b8; background: #101c2b; box-shadow: none; }
#add-entry-form button:focus-visible { outline: 1px solid #91adc9; outline-offset: 2px; }
#add-entry-form .form-actions { margin-top: 2px; gap: 8px; }
#add-entry-form .form-actions button { padding: 8px 13px; border-radius: 6px; box-shadow: none; }
#entry-submit { background: #36506c; border-color: #6f8aa755; }
#entry-submit:hover { background: #405d7d; }

#add-entry-form textarea {
    resize: vertical;
    line-height: 1.5;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
}

#cancel-add-entry {
    background: transparent;
    border-color: transparent;
    color: #99adc4;
    box-shadow: none;
}

@media (max-width: 760px) {
    #galaxy {
        --node-size: 24px;
    }

    .entry-node {
        padding: 0;
    }

}

@media (prefers-reduced-motion: reduce) {
    button,
    .hierarchy-line,
    .orbit-guide,
    .node-label {
        transition: none;
    }
}

/* Navigation is an independent screen layer; world coordinates stay unchanged. */
[hidden] { display: none !important; }
#sidebar-toggle { position: absolute; top: 12px; left: calc(var(--sidebar-width) - 42px); width: 28px; height: 28px; padding: 6px; z-index: 30; background: transparent; border-color: transparent; box-shadow: none; }
#galaxy.sidebar-collapsed #sidebar-toggle { left: 16px; top: 16px; background: #101925cc; border-color: #64748b38; }
#sidebar-toggle svg { width: 100%; height: 100%; fill: none; stroke: #a6b5c8; stroke-width: 1.4; }
#hierarchy-sidebar { position: absolute; inset: 0 auto 0 0; width: var(--sidebar-width); display: flex; flex-direction: column; background: #0c131e; border-right: 1px solid #50627c33; z-index: 20; font-size: 12px; }
.sidebar-brand { display: flex; align-items: center; gap: 8px; padding: 17px 48px 14px 16px; }
#sample-indicator { color: #a8996f; font-size: 10px; }
#hierarchy-sidebar h1 { position: static; margin: 0; font-size: 16px; letter-spacing: -.3px; color: #c6d3e3; }
.sidebar-controls { padding: 0 12px 10px; flex-shrink: 0; }
.sidebar-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#hierarchy-count { color: #728299; font-size: 10px; font-weight: 400; }
#hierarchy-sidebar .entry-search { position: relative; top: auto; left: auto; width: auto; margin: 0 12px 12px; flex-shrink: 0; }
#hierarchy-sidebar #entry-search { padding: 9px 10px; font-size: 12px; background: #141e2c; border-color: #60759030; }
#hierarchy-sidebar #search-results { margin-top: 7px; padding: 4px; max-height: min(320px, 40dvh); }
#hierarchy-tree { flex: 1; min-height: 0; padding: 0 8px 12px; overflow: auto; scrollbar-width: thin; scrollbar-color: #344359 transparent; }
.hierarchy-row { display: grid; grid-template-columns: 18px 16px minmax(0, 1fr) 22px; align-items: center; gap: 5px; min-width: calc(var(--tree-indent) + 140px); width: 100%; height: 32px; padding: 0 8px 0 calc(var(--tree-indent) + 4px); border-radius: 4px; color: #98a9bf; font-size: 12px; line-height: 18px; cursor: pointer; outline-offset: -2px; transition: background 120ms ease, color 120ms ease; }
.tree-add { opacity: 0; pointer-events: none; }
.hierarchy-row:hover .tree-add, .hierarchy-row:focus-within .tree-add { opacity: 1; pointer-events: auto; }
.tree-add:focus-visible { outline: 1px solid #91adc9; outline-offset: 0; }
.hierarchy-row:hover { background: #1b27365c; color: #c5d1df; }
.hierarchy-row.is-selected { background: #25364b99; color: #e1e9f3; box-shadow: inset 2px 0 #7f9ab180; }
.hierarchy-row.is-selected:hover { background: #25364bb3; }
.hierarchy-row.is-multiselected { background: #25364b55; color: #cad8e7; box-shadow: inset 2px 0 #7f9ab140; }
.hierarchy-row.is-multiselected:hover { background: #25364b77; }
.hierarchy-row.is-search-match .tree-name { color: #d7be84; }
.hierarchy-row:focus-visible { outline: 1px solid #8ca7c9; }
.tree-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hierarchy-row button { width: 22px; height: 24px; padding: 0; background: transparent; border: 0; border-radius: 4px; box-shadow: none; color: #8ea1ba; font-size: 17px; }
.hierarchy-row button:hover { background: #40557466; color: #ecf1f8; }
.tree-disclosure { width: 18px !important; display: grid; place-items: center; transition: transform 120ms ease; }
.tree-disclosure svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hierarchy-row[aria-expanded="true"] .tree-disclosure { transform: rotate(90deg); }
.tree-disclosure:disabled { opacity: 0; pointer-events: none; }
.tree-role-icon { width: 11px; height: 11px; justify-self: center; border-radius: 50%; background: #8195ac; opacity: .75; }
.hierarchy-row[data-role="galaxy"] .tree-role-icon { width: 13px; height: 9px; background: radial-gradient(ellipse, #aaa1be, #60638688 60%, transparent 85%); }
.hierarchy-row[data-role="sun"] .tree-role-icon { width: 8px; height: 8px; margin: 1px; background: #d6b979; box-shadow: 0 0 4px #d3ad7355; }
.hierarchy-row[data-role="planet"] .tree-role-icon { background: #728fa7; border: 1px solid #b5c8d166; }
.hierarchy-row[data-role="moon"] .tree-role-icon { width: 8px; height: 8px; background: linear-gradient(120deg, #aab2ba 50%, #526071 55%); }
.hierarchy-row[data-role="satellite"] .tree-role-icon { width: 13px; height: 10px; border-radius: 0; background: linear-gradient(#aeb9c7,#aeb9c7) center/3px 8px no-repeat, linear-gradient(#536f90,#536f90) center/13px 4px no-repeat; }
.hierarchy-row[data-role="astronaut"] .tree-role-icon { width: 12px; height: 15px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M3 7L1 10M9 7l2 3M4.5 11l-1 3M7.5 11l1 3' stroke='%23bcc6ce' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect x='3' y='6' width='6' height='6' rx='1.5' fill='%23bac5cd'/%3E%3Ccircle cx='6' cy='3.8' r='3' fill='%23d7dfe4'/%3E%3Crect x='4' y='2.4' width='4' height='2.4' rx='1' fill='%23213242'/%3E%3C/svg%3E") center/contain no-repeat; }
summary:focus-visible { outline: 1px solid #b9d0e9; outline-offset: 3px; }
#hierarchy-sidebar #sample-controls { position: static; display: flex; flex-direction: column; align-items: stretch; transform: none; max-width: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; white-space: normal; }
#hierarchy-sidebar #sample-controls > span { display: block; font-size: 10px; margin: 8px 0 2px; }
#hierarchy-sidebar #sample-controls strong { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; }
#hierarchy-sidebar #sample-controls button { text-align: left; padding: 6px 0; border: 0; background: transparent; box-shadow: none; color: #96aac3; font-size: 11px; }
#hierarchy-sidebar #sample-controls button:disabled { display: none; }
#hierarchy-sidebar #storage-status { position: static; max-width: none; margin: 0 12px 12px; padding: 8px; font-size: 11px; }
#sidebar-resize { position: absolute; top: 0; bottom: 0; right: -3px; width: 6px; cursor: col-resize; touch-action: none; outline-offset: -2px; }
#sidebar-resize:hover, #sidebar-resize:focus-visible, .sidebar-resizing #sidebar-resize { background: #617b9e55; }
.sidebar-resizing { cursor: col-resize; user-select: none; }
.inspector-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-shrink: 0; }
.inspector-header .panel-eyebrow { margin: 0; }
#entry-panel .inspector-header { position: relative; min-width: 0; gap: 8px; }
#entry-panel .inspector-header #close-inspector-button { margin-left: auto; flex-shrink: 0; }
#panel-ancestry button { padding: 3px 1px; border: 0; border-radius: 0; color: #8ca8ca; }
#panel-ancestry button + button::before { content: "›"; margin-right: 6px; color: #566e8c; }
#close-inspector-button { width: 26px; height: 26px; padding: 0; border: 0; background: transparent; color: #8fa2bb; font-size: 22px; border-radius: 4px; box-shadow: none; }
#close-inspector-button:hover { background: #30435b66; color: #e6edf5; }
#entry-actions #delete-entry-button { color: #bd9292; }
#entry-action-status { font-size: 12px; color: #cbb58c; line-height: 1.5; }
#creation-context { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #aebfd3; font-size: 12px; }
#change-creation-parent { padding: 4px 6px; background: transparent; border-color: #60718b44; font-size: 11px; }
#entry-context-menu { position: fixed; width: 192px; max-width: calc(100vw - 16px); z-index: 40; border: 1px solid #50627c55; }
.context-entry-name { display: block; padding: 7px 8px; color: #7f93ad; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#entry-context-menu button { display: block; width: 100%; padding: 7px 9px; border: 0; background: transparent; border-radius: 4px; box-shadow: none; text-align: left; font-size: 12px; color: #b6c9dd; }
#entry-context-menu button:is(:hover,:focus-visible) { background: #30435b55; outline: none; }
#entry-context-menu button[data-action="delete"] { color: #d6a4a4; }
@media (max-width: 760px) {
    #sidebar-resize { display: none; }
    #entry-panel { inset: auto 0 0; width: 100%; height: auto; max-height: 52dvh; padding: 12px 20px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); border-left: 0; border-top: 1px solid #50627c55; border-radius: 12px 12px 0 0; }
    .inspector-header { margin-bottom: 10px; }
    #entry-panel h2 { font-size: 18px; }
    #panel-ancestry { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .hierarchy-row, .tree-disclosure { transition: none; } }
#panel-rich-content { flex-shrink: 0; margin-top: 14px; padding-top: 10px; border-top: 1px solid #50627c33; font-size: 12px; }
#panel-rich-content h3, #panel-rich-content label { display: block; font-size: 11px; font-weight: 500; color: #9cb1ca; margin: 12px 0 6px; }
#panel-rich-content input:not([type="file"]), #panel-rich-content textarea { width: 100%; padding: 8px; border: 1px solid #60738f55; border-radius: 5px; background: #162231; color: #d8e5f4; font: inherit; }
#panel-rich-content textarea { resize: vertical; min-height: 66px; max-height: 220px; }
#panel-rich-content button { padding: 5px 7px; margin: 5px 0; background: transparent; border-color: #60738f55; font-size: 11px; }
.content-heading, .content-row-actions { display: flex; align-items: center; gap: 8px; }
.content-heading { justify-content: space-between; margin-top: 8px; }
#panel-rich-content ul { list-style: none; padding: 0; margin: 6px 0; }
#panel-rich-content li { padding: 8px 0; border-bottom: 1px solid #50627c26; overflow-wrap: anywhere; }
#panel-rich-content a { color: #b9d3eb; }
#panel-rich-content small { display: block; color: #8ea1b8; font-size: 10px; margin-top: 5px; overflow-wrap: anywhere; }
#panel-rich-content img { display: block; max-width: 100%; max-height: 120px; width: auto; height: auto; margin-top: 8px; border-radius: 4px; }
#panel-rich-content pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 110px; overflow: auto; font: 10px/1.5 monospace; color: #a9bdd3; }
#content-status { color: #a4c3d5; font-size: 11px; line-height: 1.5; }
#content-status[data-error="true"] { color: #dfb49e; }

/* Navigation adds things; this contextual panel shows their contents. */
#hierarchy-sidebar .sidebar-brand { padding: 15px 48px 12px 16px; }
#hierarchy-sidebar h1 { font-size: 14px; font-weight: 600; color: #a9b9cc; }
#hierarchy-sidebar .sidebar-controls { padding: 0 12px 13px; }
#hierarchy-sidebar .sidebar-actions { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
#hierarchy-sidebar .entry-search { margin: 0; min-width: 0; }
#hierarchy-sidebar #entry-search { height: 34px; padding: 7px 8px 7px 29px; background: #ffffff04; border-color: #60759024; border-radius: 5px; }
.search-icon { position: absolute; left: 9px; top: 9px; width: 16px; height: 16px; pointer-events: none; fill: none; stroke: #72859c; stroke-width: 1.4; }
#hierarchy-sidebar #search-results { position: absolute; inset: calc(100% + 6px) 0 auto; margin: 0; z-index: 35; }
#hierarchy-tree { padding: 0 7px 12px; }
.tree-role-icon { align-self: center; }
#entry-panel .panel-content { flex-shrink: 0; min-height: 0; max-height: none; overflow: visible; }
#entry-panel h2 { margin-bottom: 0; }
.inspector-header { margin-bottom: 8px; }
#panel-ancestry { margin: 0; }
.content-header-actions { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 13px 0 2px; flex-shrink: 0; }
.content-header-actions > button { padding: 6px 10px; font-size: 12px; }
#entry-more-button { font-size: 15px; letter-spacing: 2px; background: transparent; }
#add-menu, #entry-actions { padding: 5px; min-width: 176px; background: #152234; border: 1px solid #52688366; border-radius: 6px; box-shadow: 0 8px 24px #0006; z-index: 45; }
#add-menu { position: fixed; }
#entry-actions { position: absolute; right: 0; top: calc(100% + 5px); margin-top: 0; }
#entry-actions #delete-entry-button { padding: 8px 10px; font-size: 12px; }
.content-panel-header { position: sticky; top: -16px; background: #0e1621; padding: 12px 0 8px; margin-top: -12px; z-index: 3; flex-shrink: 0; }
#add-menu button, #entry-actions button { display: block; width: 100%; padding: 8px 10px; border: 0; background: transparent; box-shadow: none; text-align: left; font-size: 12px; }
#add-menu button:hover, #entry-actions button:hover { background: #324b6866; }
#add-menu button:disabled { opacity: .4; cursor: default; }
/* Temporary creation surfaces use the same quiet language as the side panels.
   Scope the compact dialog to Name-only creation; Edit/Move keep their layout. */
#add-menu, #entry-context-menu { padding: 4px; background: #0e1621; border-color: #50627c55; border-radius: 5px; box-shadow: 0 6px 20px #0006; }
#add-menu button { padding: 7px 9px; border-radius: 4px; color: #b6c9dd; }
#add-menu button:is(:hover,:focus-visible) { background: #30435b55; }
#context-entry-name { color: #8197b0; font-size: 10px; font-weight: 500; }
#add-entry-dialog:has(#entry-info-fields[hidden]):has(#parent-field[hidden]) {
    width: min(300px, calc(100vw - 32px)); padding: 16px;
    background: #0e1621; border-color: #50627c55; border-radius: 5px;
    box-shadow: 0 6px 20px #0006;
}
#add-entry-dialog:has(#entry-info-fields[hidden]):has(#parent-field[hidden])::backdrop { backdrop-filter: none; }
#add-entry-dialog:has(#entry-info-fields[hidden]):has(#parent-field[hidden]) #add-entry-form { gap: 14px; font-size: 12px; }
#add-entry-dialog:has(#entry-info-fields[hidden]):has(#parent-field[hidden]) #add-entry-title {
    font-size: 12px; line-height: 1.5; letter-spacing: 1px; text-transform: uppercase; color: #9cb1ca;
}
#add-entry-dialog:has(#entry-info-fields[hidden]):has(#parent-field[hidden]) #entry-name-field { gap: 8px; }
#add-entry-dialog:has(#entry-info-fields[hidden]):has(#parent-field[hidden]) label { color: #8ea1b8; font-size: 11px; }
#add-entry-dialog:has(#entry-info-fields[hidden]):has(#parent-field[hidden]) input {
    min-height: 36px; padding: 8px 9px; border-color: #60759030; border-radius: 4px;
    background: #ffffff04; font: inherit; color: #d8e5f4;
}
#add-entry-dialog:has(#entry-info-fields[hidden]):has(#parent-field[hidden]) input:focus { border-color: #839ab5; background: #ffffff04; }
#add-entry-dialog:has(#entry-info-fields[hidden]):has(#parent-field[hidden]) .form-actions { margin-top: 0; }
#add-entry-dialog:has(#entry-info-fields[hidden]):has(#parent-field[hidden]) .form-actions button { min-height: 32px; padding: 6px 10px; font-size: 12px; border-radius: 4px; }
@media (hover: none), (pointer: coarse) {
    #add-menu button, #entry-context-menu > button { min-height: 40px; }
    #add-entry-dialog:has(#entry-info-fields[hidden]):has(#parent-field[hidden]) input { min-height: 44px; font-size: 16px; }
    #add-entry-dialog:has(#entry-info-fields[hidden]):has(#parent-field[hidden]) .form-actions button { min-height: 40px; }
}
#panel-rich-content { margin-top: 2px; padding-top: 0; border-top: 0; }
#panel-rich-content > section { padding: 9px 0 12px; border-bottom: 1px solid #50627c33; }
#panel-rich-content .content-heading { margin: 0 0 7px; min-height: 27px; flex-wrap: wrap; }
#panel-rich-content h3 { margin: 0; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #94a8c0; font-weight: 600; }
#content-notes-view { white-space: pre-wrap; margin: 5px 0 0; line-height: 1.7; color: #c3d1e1; }
.content-empty { font-size: 12px; color: #6f849e; margin: 5px 0 8px; }
#content-file-limit { line-height: 1.5; color: #6f849e; }
#panel-rich-content .content-file { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; padding: 10px 0; }
.content-file-info { min-width: 0; }
#panel-rich-content .content-file-name { color: #c5d9ec; text-align: left; font-size: 12px; padding: 0; margin: 0; border: 0; box-shadow: none; background: transparent; width: 100%; overflow-wrap: anywhere; }
#panel-rich-content .content-file-icon { width: 40px; height: 42px; margin: 0; padding: 0; background: #23354a; color: #b2c6dc; font-size: 10px; }
#panel-rich-content .content-file-icon img { width: 100%; height: 100%; object-fit: cover; max-height: none; margin: 0; }
#panel-rich-content .content-file small { margin-top: 3px; }
#panel-rich-content .content-row-actions { gap: 8px; }
#panel-rich-content .content-row-actions button { padding: 2px 0; margin: 3px 0; border: 0; color: #8ea6bf; }
#content-location-text { margin: 0; line-height: 1.6; color: #c3d1e1; overflow-wrap: anywhere; }
#panel-rich-content .location-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
#panel-rich-content .location-actions a { font-size: 11px; line-height: 1.5; text-underline-offset: 3px; }
#panel-rich-content #content-remove-location { color: #71839a; }
#content-location-form { min-width: 0; }
#panel-rich-content #content-location-input[aria-invalid='true'] { border-color: #bd9292; }
#content-location-error { margin: 5px 0 0; color: #dbb59d; line-height: 1.5; }
@media (max-width: 760px), (pointer: coarse) {
    #panel-rich-content .location-actions :is(a,button) { min-height: 44px; display: inline-flex; align-items: center; }
    #panel-rich-content #content-location-input { min-height: 44px; font-size: 16px; }
}
#panel-rich-content .content-text-preview { grid-column: 1 / -1; max-height: 60px; margin: 6px 0 0; }
#entry-more-button { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 0; border-radius: 4px; box-shadow: none; color: #8a9eb6; padding: 0; margin-left: auto; letter-spacing: 1px; align-self: center; }
#entry-more-button:is(:hover,:focus-visible) { background: #30435b66; color: #d5e4f2; }
#entry-more-button:focus-visible { outline: 1px solid #91adc9; outline-offset: 1px; }
#panel-rich-content > section { padding: 15px 0; }
#panel-rich-content .content-heading { min-height: 22px; margin-bottom: 9px; }
#panel-rich-content .content-empty { margin: 0; color: #71839a; }
#panel-rich-content .quick-bookmark { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
#panel-rich-content .quick-bookmark input { flex: 1; min-width: 0; min-height: 36px; padding: 8px; font: inherit; }
#panel-rich-content .quick-bookmark button { flex-shrink: 0; margin: 0; white-space: nowrap; }
#panel-rich-content .quick-bookmark input[aria-invalid='true'] { border-color: #bd9292; }
#galaxy-starter-field { display: grid; gap: 8px; }
#galaxy-starter { width: 100%; min-height: 36px; padding: 8px; border: 1px solid #60759030; border-radius: 4px; background: #162231; color: #d8e5f4; font: inherit; }
#galaxy-starter:focus-visible { outline: 1px solid #91adc9; outline-offset: 2px; }
#canvas-zoom-controls { position: absolute; left: calc(var(--sidebar-space) + 16px); bottom: 16px; display: flex; gap: 3px; z-index: 12; opacity: .6; }
#canvas-zoom-controls:is(:hover,:focus-within) { opacity: 1; }
#canvas-zoom-controls button { min-width: 32px; height: 32px; padding: 4px 8px; border: 1px solid #50627c33; border-radius: 4px; background: #0e1621bb; color: #9cb1ca; box-shadow: none; font-size: 16px; }
#canvas-zoom-controls #canvas-fit { font-size: 11px; }
#canvas-zoom-controls button:focus-visible { outline: 1px solid #91adc9; outline-offset: 2px; }
@media (hover: none), (pointer: coarse), (max-width: 760px) {
    .constellation-row { height: 44px; grid-template-columns: minmax(0,1fr) 44px !important; }
    .constellation-row .collection-add { display: none; }
    .constellation-row .collection-more { width: 44px; height: 44px; opacity: 1; pointer-events: auto; }
    #canvas-zoom-controls button { min-width: 44px; height: 44px; }
    #panel-rich-content .quick-bookmark input { min-height: 44px; }
}
@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) and (max-height: 500px) { #canvas-zoom-controls { display: none; } }
#panel-rich-content .content-file { grid-template-columns: 36px minmax(0, 1fr) 26px; column-gap: 9px; align-items: center; border-bottom: 0; padding: 7px 0; }
#panel-rich-content .content-file-icon { width: 36px; height: 38px; border: 1px solid #6f849f20; border-radius: 5px; box-shadow: none; background: #1f3043; font-size: 9px; }
#panel-rich-content .content-file-name { font-size: 12px; line-height: 1.5; }
#panel-rich-content .content-text-preview { margin: 4px 0 0 45px; color: #92a9c1; max-height: 48px; }
#panel-rich-content .quiet-icon { display: grid; place-items: center; width: 26px; height: 26px; padding: 4px; margin: -3px 0; border: 0; box-shadow: none; color: #8197b0; border-radius: 4px; }
.quiet-icon svg, .bookmark-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
#panel-rich-content .content-bookmark { display: grid; grid-template-columns: 16px minmax(0, 1fr) 26px; gap: 9px; align-items: start; border-bottom: 0; padding: 8px 0; }
.bookmark-icon { color: #718ba6; padding-top: 2px; }
.bookmark-info { min-width: 0; }
.bookmark-info a { text-decoration: none; display: block; line-height: 1.5; }
.bookmark-info small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content-item-menu { position: relative; justify-self: end; align-self: start; }
.content-item-menu summary { display: grid; place-items: center; width: 26px; height: 26px; list-style: none; cursor: pointer; color: #71859e; border-radius: 4px; font-size: 11px; letter-spacing: 1px; }
.content-item-menu summary::-webkit-details-marker { display: none; }
.content-item-menu summary:hover, .content-item-menu[open] summary { color: #c5d7e9; background: #31465e55; }
.content-item-menu .content-row-actions { position: absolute; right: 0; top: calc(100% + 3px); display: block; min-width: 140px; padding: 4px; z-index: 10; border: 1px solid #52688366; border-radius: 5px; background: #152234; box-shadow: 0 6px 20px #0006; }
:is(#panel-rich-content,#constellation-content) .content-item-menu button { display: block; width: 100%; margin: 0; padding: 7px 9px; text-align: left; border: 0; font-size: 11px; color: #b6c9dd; border-radius: 3px; background: transparent; box-shadow: none; }
:is(#panel-rich-content,#constellation-content) .content-item-menu button:hover { background: #31465e66; }
.content-item-menu:not([open]) .content-row-actions { display: none; }
.content-item-menu.opens-up .content-row-actions { top: auto; bottom: calc(100% + 3px); }
@media (hover: hover) and (pointer: fine) {
    .content-item-menu summary, #panel-rich-content .quiet-icon { opacity: .45; }
    .content-file:hover summary, .content-bookmark:hover summary, .content-item-menu:focus-within summary, .content-item-menu[open] summary,
    #panel-rich-content section:hover .quiet-icon, #panel-rich-content .quiet-icon:focus-visible { opacity: 1; }
}
@media (hover: none), (pointer: coarse) { .tree-add { opacity: 1; pointer-events: auto; } }
@media (max-width: 760px) {
    #entry-panel { padding-top: 12px; }
    .content-panel-header { top: -12px; }
    #entry-panel .panel-content { min-height: 0; max-height: none; }
    #panel-ancestry { margin: 0; }
    .content-item-menu summary { width: 30px; height: 30px; opacity: 1; }
    #panel-rich-content .quiet-icon { width: 32px; height: 32px; margin: -5px 0; padding: 8px; opacity: 1; }
    .tree-add { opacity: 1; pointer-events: auto; }
}

/* Portals are sidebar leaves; the canonical Cosmos renderer is unchanged. */
.tree-portal-icon { width: 16px; height: 16px; color: #9c94bb; justify-self: center; }
.tree-portal-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1; }
.tree-portal-icon circle { fill: #070b14; }
.hierarchy-row .tree-portal-actions { font-size: 10px; letter-spacing: 1px; opacity: 0; pointer-events: none; }
.portal-row:is(:hover,:focus-within) .tree-portal-actions { opacity: 1; pointer-events: auto; }
.portal-row.portal-activated .tree-portal-icon { color: #c7baef; }
@media (prefers-reduced-motion: reduce) { .portal-row.portal-activated .tree-portal-icon { filter: none; } }
@media (hover: none), (pointer: coarse) { .hierarchy-row .tree-portal-actions { opacity: 1; pointer-events: auto; } }
@media (max-width: 760px) { .hierarchy-row .tree-portal-actions { opacity: 1; pointer-events: auto; } }
#portal-dialog { width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; color: #e6edf5; background: #101b29; border: 1px solid #465a7255; border-radius: 12px; box-shadow: 0 24px 80px #0006; }
#portal-dialog::backdrop { background: #070c14ae; backdrop-filter: blur(4px); }
#portal-form { display: grid; gap: 10px; font-size: 12px; }
#portal-dialog-title { margin: 0 0 6px; font-size: 21px; font-weight: 600; }
.portal-target-label { margin: 0 0 10px; color: #8fa3bd; line-height: 1.6; }
.portal-target-label strong { display: block; color: #cfdeed; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
#portal-parent-search { width: 100%; padding: 10px 12px; border: 1px solid #42536b88; border-radius: 6px; color: #d8e5f4; background: #0b1420; }
#portal-parent-search:focus { outline: none; border-color: #7b98b8; }
#portal-parent-results { list-style: none; margin: 0; padding: 0; max-height: min(240px, 32dvh); overflow: auto; scrollbar-width: thin; }
#portal-parent-results button { display: block; width: 100%; padding: 8px; text-align: left; border: 0; border-radius: 4px; background: transparent; box-shadow: none; font-size: 12px; }
#portal-parent-results button:is(:hover,[aria-pressed="true"]) { background: #2a405966; }
#portal-parent-results small { display: block; margin-top: 4px; color: #839ab5; font-size: 10px; overflow-wrap: anywhere; }
#portal-placement { color: #afc8df; font-size: 11px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
#portal-form-error { color: #dbb59d; margin: 0; line-height: 1.5; }
.portal-no-results { color: #839ab5; padding: 8px; }
#portal-form .form-actions { margin-top: 6px; gap: 8px; }
#portal-form .form-actions button { padding: 8px 12px; border-radius: 6px; box-shadow: none; font-size: 12px; }
#cancel-portal { background: transparent; border-color: transparent; color: #99adc4; }
#create-portal { background: #36506c; border-color: #6f8aa755; }

/* Item management belongs with the selected title. */
#entry-panel .panel-content { display: flex; align-items: flex-start; gap: 10px; }
#panel-name { flex: 1; min-width: 0; }
.content-header-actions { margin: 0; flex: 0 0 28px; height: 28px; }
.content-panel-header { padding-bottom: 10px; }

/* Collections sit outside the canonical tree and share its quiet row actions. */
.sidebar-section-title { margin: 0; padding: 3px 16px 8px; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #73869d; }
.sidebar-section-header { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 0; min-height: 32px; }
.sidebar-section-header .sidebar-section-title { padding-bottom: 3px; }
#constellations-section { flex: 0 0 auto; min-height: 32px; margin: 3px 0 5px; }
#constellation-list { list-style: none; margin: 0; padding: 0 7px; max-height: 26dvh; overflow: auto; scrollbar-width: thin; scrollbar-color: #344359 transparent; }
.constellation-row { display: grid; grid-template-columns: minmax(0, 1fr) 22px 22px; align-items: center; height: 32px; border-radius: 4px; padding-right: 5px; }
.constellation-row:hover { background: #ffffff05; }
.constellation-row.is-active { background: #bca77816; }
.constellation-open { display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; height: 32px; padding: 0 9px; text-align: left; color: #9aadc4; font: inherit; background: transparent; border: 0; box-shadow: none; }
.constellation-row.is-active .constellation-open { color: #ddceb3; }
.constellation-star { flex: 0 0 16px; text-align: center; color: #b7a989; font-size: 15px; }
.constellation-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-add { width: 22px; height: 24px; padding: 0; border: 0; border-radius: 3px; box-shadow: none; background: transparent; color: #8499b1; font-size: 17px; line-height: 1; opacity: 0; pointer-events: none; }
.constellation-row:is(:hover,:focus-within) .collection-add, .sidebar-section-header:is(:hover,:focus-within) .collection-add { opacity: 1; pointer-events: auto; }
.collection-add:hover { color: #dae5f1; background: #30435b55; }
.collection-more { width: 22px; height: 24px; padding: 0; border: 0; border-radius: 3px; box-shadow: none; background: transparent; color: #8499b1; font-size: 10px; letter-spacing: 1px; opacity: 0; pointer-events: none; }
.constellation-row:is(:hover,:focus-within) .collection-more { opacity: 1; pointer-events: auto; }
.collection-more:is(:hover,:focus-visible) { color: #dae5f1; background: #30435b55; }
.collection-more:focus-visible { outline: 1px solid #839ab5; outline-offset: -1px; }
#entry-context-menu button[data-action='collection-delete'] { color: #d6a4a4; }
@media (hover: none), (pointer: coarse) { .collection-more { opacity: 1; pointer-events: auto; } }
.constellation-open:focus-visible, .collection-add:focus-visible { outline: 1px solid #839ab5; outline-offset: -1px; }
#constellation-count { color: #8fa2ba; font-size: 12px; margin: 6px 0 0; }
#constellation-content h3 { margin: 16px 0 9px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #94a8c0; }
#constellation-member-list { list-style: none; padding: 0; margin: 0; }
#constellation-member-list > li { display: grid; grid-template-columns: minmax(0, 1fr) 26px; align-items: center; min-height: 34px; gap: 6px; }
.constellation-member-name { padding: 7px 0; border: 0; background: transparent; box-shadow: none; text-align: left; font-size: 12px; color: #c0d0e1; overflow-wrap: anywhere; }
.constellation-member-name:hover { color: #f0e5ce; }
.constellation-member-menu .content-row-actions { min-width: 185px; }
.constellation-member-menu summary:is(:hover,:focus-visible) { color: #d8e2f0; background: #31465e55; }
#panel-add-member { margin-top: 12px; padding: 6px 0; background: transparent; border: 0; box-shadow: none; font-size: 12px; color: #96aac3; }
#constellation-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.constellation-line { stroke: #d6c3a2; stroke-width: 1; stroke-opacity: .48; fill: none; }
.constellation-exit-line { stroke: #d6c3a2; stroke-width: 1; stroke-opacity: .48; fill: none; }
#motion-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.file-removal-echo { position: fixed; pointer-events: none; z-index: 30; font-size: 12px; color: #9bb0c8; background: #0e1621; padding: 8px 0; overflow: hidden; }
.ambient-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ambient-object { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform,opacity; }
#galaxy .entry-node:not([data-body="galaxy"]):hover { outline: 1px solid #b6cadb66; outline-offset: 2px; }
.entry-node.dragging .astronaut-figure { transform: rotate(-3deg); }
@media (prefers-reduced-motion: reduce) {
    .entry-node,.node-label,.astronaut-figure { transition: none !important; }
    .ambient-layer { display: none; }
}
/* The lens multiplies normal detail for context, prioritizing only collection
   entries and intentional inspection. Labels have a separate readability fade. */
#galaxy.constellation-has-members .entry-node { opacity: var(--constellation-body-opacity); }
#galaxy.constellation-has-members .entry-node .node-label { opacity: var(--constellation-label-opacity); }
#galaxy.constellation-has-members .entry-node:is(.constellation-member,.constellation-inspected) { --body-render-scale: max(var(--camera-scale, 1), .38); }
#galaxy.constellation-has-members .entry-node.constellation-member { outline: 1px solid #d6c3a299; outline-offset: 3px; }
#galaxy.constellation-has-members .entry-node.constellation-member .node-label { color: #eee3cd; font-weight: 600; font-size: 10px; max-width: 120px; }
#galaxy.constellation-has-members .entry-node.constellation-member:is(:hover,:focus-visible,.dragging) .node-label,
#galaxy.constellation-has-members .entry-node.constellation-inspected .node-label { opacity: 1; font-size: 10px; }
#galaxy.constellation-has-members .entry-node.constellation-member.constellation-label-hidden:not(:hover):not(:focus-visible) .node-label { pointer-events: none; }
#galaxy.constellation-has-members .entry-node[data-body="galaxy"].constellation-galaxy-context .node-label { font-size: var(--galaxy-label-size, 16px); max-width: 180px; color: hsl(var(--body-hue) 30% 92%); font-weight: 600; opacity: 1; }
#active-constellation-indicator { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #50627c33; }
#active-constellation-name { flex: 1; min-width: 0; padding: 3px 0; color: #b7a989; font-size: 11px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#active-constellation-indicator button { border: 0; background: transparent; box-shadow: none; }
#deactivate-constellation-button { flex: 0 0 24px; width: 24px; height: 24px; padding: 0; color: #8a9eb6; border-radius: 4px; }
#active-constellation-indicator button:is(:hover,:focus-visible) { color: #dfd6c4; }
#deactivate-constellation-button:is(:hover,:focus-visible) { background: #30435b66; }
#panel-rich-content .content-section-add { font-size: 17px; font-weight: 400; background: transparent; }
#panel-rich-content .content-section-add:is(:hover,:focus-visible) { color: #d5e4f2; background: #30435b55; }
#panel-rich-content .content-empty-action { display: block; padding: 3px 0; border: 0; border-radius: 3px; background: transparent; box-shadow: none; text-align: left; font-size: 12px; line-height: 1.5; text-decoration: underline; text-decoration-color: #71839a55; text-underline-offset: 3px; }
#panel-rich-content .content-empty-action:is(:hover,:focus-visible) { color: #b6c9dd; text-decoration-color: currentColor; }
#panel-rich-content :is(.content-section-add,.content-empty-action):focus-visible { outline: 1px solid #839ab5; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    #panel-rich-content .content-section-add { opacity: 0; }
    #panel-rich-content section:is(:hover,:focus-within) .content-section-add { opacity: 1; }
}
@media (hover: none), (pointer: coarse), (max-width: 760px) {
    #panel-rich-content .content-section-add { opacity: 1; width: 32px; height: 32px; }
    #panel-rich-content .content-empty-action { min-height: 32px; padding: 7px 0; }
}
.collection-dialog { width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; color: #e6edf5; background: #101b29; border: 1px solid #465a7255; border-radius: 12px; box-shadow: 0 24px 80px #0006; }
.collection-dialog::backdrop { background: #070c14ae; backdrop-filter: blur(4px); }
.collection-dialog form { display: grid; gap: 10px; font-size: 12px; }
.collection-dialog h2 { margin: 0 0 6px; font-size: 21px; font-weight: 600; overflow-wrap: anywhere; }
.collection-dialog label:not(.visually-hidden) { display: block; position: static; color: #9eafc5; margin: 4px 0 0; }
.collection-dialog input { width: 100%; padding: 10px 12px; border: 1px solid #42536b88; border-radius: 6px; color: #d8e5f4; background: #0b1420; }
.collection-dialog input:focus { outline: none; border-color: #7b98b8; }
.collection-dialog .form-actions { margin-top: 8px; gap: 8px; }
.collection-dialog .form-actions button { padding: 8px 12px; border-radius: 6px; box-shadow: none; font-size: 12px; }
.collection-dialog .form-actions button:first-child { background: transparent; border-color: transparent; color: #99adc4; }
.collection-dialog .form-actions button:last-child { background: #36506c; border-color: #6f8aa755; }
.collection-dialog p { color: #a3b5cc; line-height: 1.6; margin: 0; }
.collection-dialog p[role="status"] { color: #dbb59d; }
:is(#constellation-picker-results,#portal-parent-results) { list-style: none; margin: 0; padding: 0; max-height: min(280px, 38dvh); overflow: auto; scrollbar-width: thin; }
:is(#constellation-picker-results,#portal-parent-results) button { display: block; width: 100%; padding: 9px 8px; text-align: left; border: 0; border-radius: 4px; background: transparent; box-shadow: none; font-size: 12px; }
:is(#constellation-picker-results,#portal-parent-results) button:is(:hover,[aria-pressed="true"]) { background: #2a405966; }
:is(#constellation-picker-results,#portal-parent-results) small { display: block; margin-top: 4px; color: #839ab5; font-size: 10px; overflow-wrap: anywhere; }
#constellation-memberships button { display: block; width: 100%; padding: 8px 10px; text-align: left; border: 0; background: transparent; box-shadow: none; font-size: 12px; }
#constellation-memberships button:hover { background: #324b6866; }
#constellation-memberships p { max-width: 240px; color: #dbb59d; font-size: 11px; }
@media (hover: none), (pointer: coarse) { .collection-add { opacity: 1; pointer-events: auto; } }
@media (max-width: 760px) { .collection-add { opacity: 1; pointer-events: auto; } }
@media (prefers-reduced-motion: reduce) { #galaxy.constellation-active .entry-node { transition: none; } }

/* Collection selection is a temporary browse/choose workflow, not membership editing. */
:is(#constellation-picker-dialog,#delete-constellation-dialog) { padding: 16px; border-radius: 5px; border-color: #50627c55; background: #0e1621; box-shadow: 0 6px 20px #0006; }
:is(#constellation-picker-dialog,#delete-constellation-dialog)::backdrop { backdrop-filter: none; }
:is(#constellation-picker-dialog,#delete-constellation-dialog,#portal-dialog) h2 { font-size: 12px; line-height: 1.5; letter-spacing: 1px; text-transform: uppercase; color: #9cb1ca; margin: 0; }
:is(#constellation-picker-dialog,#delete-constellation-dialog,#portal-dialog) .form-actions button { min-height: 32px; border-radius: 4px; font-size: 12px; padding: 6px 10px; }
:is(#constellation-picker-dialog,#delete-constellation-dialog,#portal-dialog) .form-actions button:focus-visible { outline: 1px solid #91adc9; outline-offset: 2px; }
#portal-dialog { padding: 16px; border-radius: 5px; background: #0e1621; border-color: #50627c55; box-shadow: 0 6px 20px #0006; scrollbar-width: thin; scrollbar-color: #344359 transparent; }
#portal-placement { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#constellation-picker-dialog,#portal-dialog) { width: min(420px,calc(100vw - 32px)); max-height: min(520px,calc(var(--mobile-visible-height,100dvh) - 24px)); }
:is(#constellation-picker-form,#portal-form) { display: flex; flex-direction: column; min-height: 0; max-height: min(486px,calc(var(--mobile-visible-height,100dvh) - 64px)); }
:is(#constellation-picker-form,#portal-form) > :not(:is(#constellation-picker-results,#portal-parent-results)) { flex-shrink: 0; }
#constellation-picker-name { color: #a9bdd3; overflow-wrap: anywhere; }
#constellation-member-search { border-radius: 4px; background: #ffffff04; border-color: #60759030; }
:is(#constellation-picker-results,#portal-parent-results) { flex: 1 1 auto; min-height: 0; max-height: min(340px,45dvh); margin: 0; padding: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #344359 transparent; }
:is(#constellation-picker-results,#portal-parent-results) .picker-entry-row { display: grid; grid-template-columns: 26px minmax(0,1fr); align-items: center; padding-left: var(--picker-indent,0px); min-width: 0; }
:is(#constellation-picker-results,#portal-parent-results) .picker-expand { display: grid; place-items: center; width: 26px; height: 32px; padding: 0; color: #8195ad; font-size: 18px; }
.picker-expand span { display: block; }
.picker-expand[aria-expanded='true'] span { transform: rotate(90deg); }
.picker-expand[hidden] { display: block !important; visibility: hidden; }
:is(#constellation-picker-results,#portal-parent-results)[role='listbox'] .picker-entry-row { grid-template-columns: minmax(0,1fr); }
:is(#constellation-picker-results,#portal-parent-results)[role='listbox'] .picker-expand { display: none !important; }
:is(#constellation-picker-results,#portal-parent-results) .picker-choice { display: grid; grid-template-columns: 14px minmax(0,1fr) auto; align-items: center; gap: 6px; min-width: 0; min-height: 32px; width: 100%; padding: 6px; border-radius: 4px; color: #a9bdd3; font-size: 12px; }
:is(#constellation-picker-results,#portal-parent-results) .picker-choice[aria-selected='true'] { background: #25364b99; color: #e1e9f3; }
:is(#constellation-picker-results,#portal-parent-results) .picker-choice.picker-existing { color: #8296ad; background: transparent; }
:is(#constellation-picker-results,#portal-parent-results) .picker-choice.picker-existing:hover { background: #ffffff04; }
.picker-check { color: #a9bdd3; font-size: 11px; }
.picker-entry-info { min-width: 0; }
.picker-entry-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-added { font-size: 10px; color: #73869d; }
:is(#constellation-picker-results,#portal-parent-results) small { margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
:is(#constellation-picker-results,#portal-parent-results) button:focus-visible { outline: 1px solid #839ab5; outline-offset: -1px; }
.picker-empty { padding: 10px 6px; color: #8195ad; font-size: 12px; }
#delete-constellation-dialog { width: min(320px,calc(100vw - 32px)); }
#delete-constellation-question { color: #d8e5f4; overflow-wrap: anywhere; }
#delete-constellation-help { color: #8ea1b8; font-size: 12px; }
#delete-constellation-form #confirm-delete-constellation { color: #e5c1c1; background: #523b3c; border-color: #99767566; }
@media (pointer: coarse), (max-width: 760px) {
    :is(#constellation-picker-results,#portal-parent-results) .picker-expand { width: 32px; height: 44px; }
    :is(#constellation-picker-results,#portal-parent-results) .picker-entry-row { grid-template-columns: 32px minmax(0,1fr); }
    :is(#constellation-picker-results,#portal-parent-results) .picker-choice { min-height: 44px; }
    :is(#constellation-picker-dialog,#delete-constellation-dialog,#portal-dialog) .form-actions button { min-height: 44px; }
}

/* Touch refinements keep the drawer + bottom sheet model, including short phone landscape. */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) and (max-height: 500px) {
    #hierarchy-sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
    #sidebar-resize { display: none; }
    #sidebar-toggle { width: 44px; height: 44px; padding: 12px; top: 6px; left: calc(var(--sidebar-width) - 48px); }
    #galaxy.sidebar-collapsed #sidebar-toggle { top: max(8px,env(safe-area-inset-top)); left: max(8px,env(safe-area-inset-left)); }
    #hierarchy-tree { overflow-x: hidden; touch-action: pan-y; overscroll-behavior: contain; }
    .node-label { left: calc(50% + var(--label-edge-x,0px)); top: calc(100% + 5px + var(--label-edge-y,0px)); }
    .hierarchy-row { min-width: 0; height: auto; min-height: 44px; grid-template-columns: 32px 14px minmax(0,1fr) 44px; gap: 3px; padding: 0 2px 0 calc(var(--mobile-tree-indent,0px) + 2px); }
    .hierarchy-row button { height: 44px; width: 44px; }
    .hierarchy-row .tree-disclosure { width: 32px !important; }
    .hierarchy-row[aria-expanded='true'] .tree-disclosure { transform: none; }
    .hierarchy-row[aria-expanded='true'] .tree-disclosure svg { transform: rotate(90deg); }
    .hierarchy-row .tree-add { opacity: 0; visibility: hidden; pointer-events: none; }
    .hierarchy-row:is(.is-selected,:focus-within) .tree-add { opacity: 1; visibility: visible; pointer-events: auto; }
    .hierarchy-row.is-selected .tree-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #hierarchy-sidebar #entry-search { min-height: 40px; font-size: 16px; }
    .sidebar-section-header { min-height: 44px; }
    .constellation-row { height: 44px; grid-template-columns: minmax(0,1fr) 44px 44px; padding-right: 0; }
    .constellation-open { height: 44px; }
    .collection-add { width: 44px; height: 44px; opacity: 1; pointer-events: auto; }
    .collection-more { width: 44px; height: 44px; opacity: 1; pointer-events: auto; }
    #entry-panel { inset: auto 0 var(--mobile-keyboard-inset,0px); width: 100%; height: auto; max-height: min(58dvh,calc(var(--mobile-visible-height,100dvh) - 60px)); padding: 12px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); border-left: 0; border-top: 1px solid #50627c55; border-radius: 12px 12px 0 0; touch-action: pan-y; overscroll-behavior: contain; scroll-padding-block: var(--sheet-header-height,140px) 12px; }
    .content-panel-header { top: -12px; }
    .inspector-header { margin-bottom: 4px; }
    #entry-panel h2 { font-size: 18px; }
    #close-inspector-button, #entry-more-button, #deactivate-constellation-button { width: 44px; height: 44px; flex-basis: 44px; }
    #active-constellation-name { min-height: 44px; }
    #panel-ancestry { margin: 0; }
    #panel-ancestry button { min-height: 32px; }
    #panel-rich-content .content-section-add, #panel-rich-content .quiet-icon, .content-item-menu summary { width: 44px; height: 44px; padding: 12px; margin: 0; opacity: 1; }
    #panel-rich-content .content-file { grid-template-columns: 36px minmax(0,1fr) 44px; }
    #panel-rich-content .content-bookmark { grid-template-columns: 16px minmax(0,1fr) 44px; }
    #panel-rich-content .content-empty-action, #panel-add-member, .constellation-member-name { min-height: 44px; }
    #constellation-member-list li { grid-template-columns: minmax(0,1fr) 44px; }
    :is(#add-menu,#entry-context-menu,#entry-actions,.content-row-actions) button { min-height: 44px; }
    :is(#add-menu,#entry-context-menu,#entry-actions,.content-row-actions) { overscroll-behavior: contain; touch-action: pan-y; }
    #panel-rich-content :is(input:not([type='file']),textarea) { font-size: 16px; }
    #panel-rich-content textarea { max-height: min(160px,calc(var(--mobile-visible-height,100dvh)*.35)); }
    /* Natural content height for quiet sheets; longer content scrolls below
       the existing sticky header, leaving a quarter of the Cosmos visible. */
    #entry-panel:has(#panel-rich-content:not([hidden])) { max-height: calc(var(--mobile-visible-height,100dvh) * .74); }
    #entry-panel:has(#panel-rich-content:not([hidden])) .content-panel-header { padding-block: 4px 2px; margin-top: -4px; }
    #panel-rich-content > section { padding-block: 2px; }
    #panel-rich-content .content-heading { margin-bottom: 2px; }
    #panel-rich-content ul:empty { display: none; }
    #panel-rich-content > section:has(> #content-bookmarks-empty:not([hidden])) { padding-block: 0; }
    #panel-rich-content > section:has(> #content-bookmarks-empty:not([hidden])) .content-heading { margin-bottom: 0; }
    #panel-rich-content .quick-bookmark { min-height: 44px; margin-top: 0; }
    #panel-rich-content .quick-bookmark input { height: 38px; min-height: 38px; padding: 6px 8px; }
    #active-constellation-indicator { padding-bottom: 4px; margin-bottom: 4px; gap: 6px; }
    #panel-rich-content form button { min-height: 44px; }
    :is(#add-entry-dialog,#portal-dialog,.collection-dialog,#delete-entry-dialog) { max-height: calc(var(--mobile-visible-height,100dvh) - 24px); position: fixed; top: var(--mobile-viewport-top,0px); bottom: var(--mobile-keyboard-inset,0px); overflow-y: auto; }
    :is(#add-entry-dialog,#portal-dialog,.collection-dialog,#delete-entry-dialog) :is(input,textarea,select) { min-height: 44px; font-size: 16px; }
    :is(#add-entry-dialog,#portal-dialog,.collection-dialog,#delete-entry-dialog) .form-actions button { min-height: 44px; }
    #galaxy.mobile-keyboard-open #entry-panel:has(#panel-rich-content:not([hidden])) { max-height: calc(var(--mobile-visible-height,100dvh) - 16px); }
    #galaxy.mobile-keyboard-open #entry-panel:has(#panel-rich-content:not([hidden])) :is(.content-header-actions,#panel-ancestry) { display: none; }
    #galaxy.mobile-keyboard-open #panel-rich-content textarea { max-height: min(160px,calc(var(--mobile-visible-height,100dvh) - var(--sheet-header-height,140px) - 32px)); }
}
@media (pointer: coarse) and (max-width: 1024px) and (max-height: 500px) {
    #entry-panel:not(:has(#panel-rich-content:not([hidden]))) { max-height: min(72dvh,calc(var(--mobile-visible-height,100dvh) - 60px)); }
    #constellation-list { max-height: 20dvh; }
    #entry-panel:has(#panel-rich-content:not([hidden]) :is(#content-notes-form:not([hidden]),#content-link-form:not([hidden]))) { max-height: calc(var(--mobile-visible-height,100dvh) - 16px); }
    #entry-panel:has(#panel-rich-content:not([hidden]) :is(#content-notes-form:not([hidden]),#content-link-form:not([hidden]))) :is(.content-header-actions,#panel-ancestry) { display: none; }
}

/* Presentation over existing files and plain-text notes. */

#archived-galaxy-count { color: #748aa5; }
#archived-galaxy-list { list-style: none; margin: 6px 0; padding: 0; max-height: 180px; overflow: auto; }
#archived-galaxy-list li { display: flex; align-items: center; gap: 8px; min-height: 36px; }
#archived-galaxy-list li span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #a7b7cb; }
#hierarchy-sidebar #archived-galaxy-list button { width: auto; margin: 0; padding: 6px 8px; min-height: 32px; font-size: 11px; color: #b6cbdc; }
#archive-galaxy-dialog { width: min(390px,calc(100vw - 32px)); max-height: calc(var(--mobile-visible-height,100dvh) - 24px); padding: 20px; border-radius: 7px; background: #0e1621; border-color: #50627c55; box-shadow: 0 8px 28px #0007; }
#archive-galaxy-dialog::backdrop { background: #02060bb3; backdrop-filter: none; }
#archive-galaxy-title { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
#archive-galaxy-error { color: #d4ad99; }
#confirm-archive-galaxy { background: #283d51; border-color: #7993ab55; }
#archive-feedback { position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%); max-width: min(440px,calc(100vw - 32px)); padding: 9px 12px; border-radius: 5px; background: #101b2aee; color: #c3d2e1; font-size: 12px; pointer-events: none; z-index: 35; }
.galaxy-archive-echo,.galaxy-archive-collapse { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.galaxy-archive-echo { z-index: 9; }
.galaxy-archive-collapse { will-change: transform,opacity; }
.galaxy-archive-echo .entry-node::before { background-size: 100% 100%; mix-blend-mode: normal; transform: none; opacity: calc(var(--surface-detail,1)*var(--texture-opacity,.7)); }
.galaxy-archive-echo .entry-node:is([data-body="satellite"],[data-body="astronaut"]) { background: transparent; border: 0; box-shadow: none; }
.galaxy-archive-echo .entry-node:is([data-body="satellite"],[data-body="astronaut"])::before,.galaxy-archive-echo .entry-node:is([data-body="satellite"],[data-body="astronaut"])::after { content: none; }
.galaxy-restore-band { position: absolute; inset: 0; pointer-events: none; will-change: transform,opacity; }
.galaxy-archive-core,.galaxy-energy-core,.galaxy-energy-ring { position: absolute; pointer-events: none; }
.galaxy-archive-core { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle,#010207 0 55%,hsl(var(--energy-hue,205) 28% 48% / .5) 64%,transparent 76%); }
.galaxy-energy-core { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle,hsl(var(--energy-hue,205) 30% 82% / .8) 0%,hsl(var(--energy-hue,205) 35% 58% / .45) 30%,transparent 72%); }
.galaxy-energy-ring { width: 120px; height: 82px; }
.galaxy-energy-ring svg { width: 100%; height: 100%; fill: none; stroke: hsl(var(--energy-hue,205) 32% 74%); stroke-width: .85; }
@media (max-width:760px), (pointer:coarse) {
    #hierarchy-sidebar #archived-galaxy-list button { min-height: 44px; }
    #archive-galaxy-dialog button { min-height: 44px; }
    #galaxy:not(.sidebar-collapsed) #archive-feedback { clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden; }
}
#panel-rich-content .note-checklist { display: flex; align-items: center; gap: 8px; min-height: 32px; margin: 0; font: inherit; color: inherit; white-space: pre-wrap; cursor: pointer; }
#panel-rich-content .note-checklist input { width: 16px; height: 16px; min-height: 0; padding: 0; flex: 0 0 16px; accent-color: #91adc9; }
#panel-rich-content .note-checklist span { min-width: 0; }
/* One observation surface for a few selected visual pieces, without file-card chrome. */
#panel-rich-content #content-media { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; margin: 0; padding: 9px; border: 1px solid #60759035; border-radius: 7px; background: radial-gradient(ellipse at 50% 0,#273e5520,transparent 75%),#060c1480; box-shadow: inset 0 2px 9px #0003; }
#content-media::before, #content-media::after { content: ''; position: absolute; width: 9px; height: 9px; pointer-events: none; border-color: #91adc961; border-style: solid; }
#content-media::before { top: 4px; left: 4px; border-width: 1px 0 0 1px; }
#content-media::after { bottom: 4px; right: 4px; border-width: 0 1px 1px 0; }
#panel-rich-content #content-media.has-multiple-media { grid-template-columns: repeat(2,minmax(0,1fr)); }
#panel-rich-content .content-media-item { position: relative; min-width: 0; padding: 0; border: 0; }
#panel-rich-content .content-media-viewport { position: relative; display: grid; place-items: center; width: 100%; height: 148px; min-width: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid #7d95b31f; border-radius: 3px; background: #080f18; box-shadow: none; color: #94a8c0; font-size: 11px; line-height: 1.6; }
#panel-rich-content .content-media-viewport img { display: block; width: 100%; height: 100%; max-height: none; margin: 0; object-fit: contain; }
#panel-rich-content #content-media.has-multiple-media .content-media-viewport { height: 104px; }
#panel-rich-content #content-media.has-multiple-media .content-media-viewport img { object-fit: cover; }
#panel-rich-content .content-media-item .content-item-menu { position: absolute; top: 3px; right: 3px; }
#panel-rich-content .content-media-item summary { width: 28px; height: 28px; background: #08111ddb; color: #bdcde0; }
.content-media-placeholder { max-width: 80%; padding: 8px; font-size: 10px; color: #8b9fb7; }
.is-video .content-media-placeholder { position: absolute; bottom: 3px; left: 3px; padding: 4px 6px; }
.content-media-play { position: absolute; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #c5d9ec40; border-radius: 50%; background: #07101cc4; color: #e4edf6; }
.content-media-play svg { width: 20px; height: 20px; fill: currentColor; }
.content-media-duration { position: absolute; bottom: 6px; right: 6px; padding: 1px 5px; border-radius: 3px; background: #050b14cc; color: #d8e5f4; font-size: 10px; font-variant-numeric: tabular-nums; }
#panel-rich-content .content-media-viewport:hover { border-color: #829bb654; }
#panel-rich-content .content-media-viewport:focus-visible, #panel-rich-content .content-media-item summary:focus-visible { outline: 1px solid #91adc9; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    #panel-rich-content .content-media-item summary { opacity: 0; }
    #panel-rich-content .content-media-item:is(:hover,:focus-within) summary, #panel-rich-content .content-media-item details[open] summary { opacity: 1; }
}
@media (max-width:760px), (pointer:coarse) {
    #panel-rich-content .content-media-item summary { position: relative; isolation: isolate; width: 44px; height: 44px; opacity: 1; background: transparent; }
    #panel-rich-content .content-media-item summary::before { content: ''; position: absolute; z-index: -1; inset: 8px; border-radius: 3px; background: #08111ddb; }
}
#galaxy .entry-node.content-drop-target { outline: 2px solid #a6c2d4; outline-offset: 5px; }
.hierarchy-row.content-drop-target { background: #30435b66; box-shadow: inset 2px 0 #91adc9; }
.hierarchy-row.hierarchy-move-target { background: #30435b66; outline: 1px solid #91adc980; outline-offset: -1px; }
.hierarchy-row.hierarchy-move-invalid { outline: 1px solid #c28d8d80; outline-offset: -1px; }
.hierarchy-row.is-moving { opacity: .75; }
#hierarchy-paste-dialog { width: min(460px, calc(100vw - 32px)); padding: 22px; border-radius: 10px; }
#duplicate-structure-dialog { width: min(380px, calc(100vw - 32px)); padding: 20px; border-radius: 7px; background: #0e1621; border-color: #50627c55; box-shadow: 0 8px 28px #0007; }
#duplicate-structure-dialog::backdrop { background: #02060bb3; backdrop-filter: none; }
#duplicate-structure-dialog h2 { font-size: 18px; }
#duplicate-structure-dialog button:focus-visible { outline: 1px solid #91adc9; outline-offset: 2px; }
#hierarchy-paste-dialog h2 { margin-bottom: 5px; font-size: 19px; }
#hierarchy-paste-description { font-size: 12px; color: #91a5bd; overflow-wrap: anywhere; }
#hierarchy-paste-dialog .paste-choices { display: grid; gap: 9px; margin-top: 18px; }
#hierarchy-paste-dialog .paste-choice { display: flex; flex-direction: column; align-items: stretch; gap: 5px; width: 100%; min-height: 44px; padding: 14px 16px; border: 1px solid #50627c55; border-radius: 7px; background: #0c1623; color: #dce6f2; box-shadow: inset 0 1px #ffffff03; text-align: left; white-space: normal; }
#hierarchy-paste-dialog .paste-choice-title { font-size: 14px; font-weight: 600; line-height: 1.4; }
#hierarchy-paste-dialog .paste-choice-description { font-size: 12px; font-weight: 400; line-height: 1.5; color: #a3b5cc; }
#hierarchy-paste-dialog .paste-choice:hover:not(:disabled) { background: #152236; border-color: #7b98b877; }
#hierarchy-paste-dialog .paste-choice:active:not(:disabled) { background: #1b2b40; }
#hierarchy-paste-dialog button:focus-visible { outline: 2px solid #91adc9; outline-offset: 3px; }
#hierarchy-paste-dialog [role="status"] { margin-top: 12px; font-size: 12px; }
#hierarchy-paste-dialog .form-actions { margin-top: 14px; }
#hierarchy-paste-dialog .form-actions button { min-height: 44px; background: transparent; border-color: transparent; color: #99adc4; }
#hierarchy-paste-dialog .form-actions button:hover { background: #26354a; color: #dce6f2; }
@media (max-width: 480px) {
    #hierarchy-paste-dialog { padding: 18px; }
    #hierarchy-paste-dialog .paste-choice { padding: 12px 14px; }
}
.hierarchy-row.content-drop-pending .tree-disclosure { color: #c0d1df; }
@media (max-width:760px), (pointer:coarse) {
    #galaxy-starter { min-height: 44px; font-size: 16px; }
    #panel-rich-content .note-checklist { min-height: 44px; }
}


/* Quiet, local help; the header stays reachable while topics scroll. */
#file-details-dialog { width: min(390px,calc(100vw - 32px)); max-height: calc(var(--mobile-visible-height,100dvh) - 24px); padding: 0; overflow: hidden; border: 1px solid #50627c55; border-radius: 7px; background: #0e1621; color: #a3b5cc; box-shadow: 0 8px 28px #0007; }
#file-details-dialog[open] { display: flex; flex-direction: column; }
#file-details-dialog::backdrop { background: #02060bb3; }
.file-details-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #50627c26; }
#file-details-title { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
#file-details-close { width: 32px; height: 32px; padding: 0; border: 0; box-shadow: none; background: transparent; color: #99adc4; font-size: 20px; }
.file-details-body { min-height: 0; overflow-y: auto; padding: 4px 14px; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
#file-details-name { font-size: 14px; color: #d8e5f4; }
.file-details-body dl { margin: 12px 0; }
.file-details-body dl > div { display: flex; gap: 12px; }
.file-details-body dt { flex: 0 0 38px; color: #8195ad; }
.file-details-body dd { margin: 0; }
#file-details-dialog footer { flex: 0 0 auto; padding: 8px 14px 14px; display: flex; justify-content: flex-end; }
#file-details-save-copy { min-height: 32px; padding: 6px 10px; border: 1px solid #50627c55; border-radius: 4px; box-shadow: none; background: transparent; color: #bdcde0; font-size: 12px; }
#file-details-dialog button:focus-visible { outline: 1px solid #91adc9; outline-offset: 2px; }
@media (max-width:760px), (pointer:coarse) { #file-details-close { width: 44px; height: 44px; } #file-details-save-copy { min-height: 44px; } }
#sidebar-utilities { flex: 0 0 auto; margin: auto 14px 12px; padding-top: 5px; border-top: 1px solid #50627c22; }
#sidebar-utilities #help-button { display: flex; align-items: center; gap: 5px; width: auto; height: 28px; margin: 0; padding: 0; color: #73849b; font-size: 10px; }
.tree-name .tree-rename { display: block; width: 100%; min-width: 0; height: 24px; padding: 1px 3px; border: 1px solid #839ab5; border-radius: 3px; background: #101b29; color: #d8e5f4; font: inherit; outline: none; }
.tree-name .tree-rename[aria-invalid="true"] { border-color: #dbb59d; }
.hierarchy-row.is-renaming { cursor: text; }
#image-viewer { position: fixed; inset: 0; margin: 0; padding: max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); width: 100vw; max-width: none; height: 100dvh; max-height: none; border: 0; background: #02060bf5; color: #a3b5cc; overflow: hidden; }
#image-viewer[open] { display: flex; flex-direction: column; gap: 8px; }
#image-viewer::backdrop { background: #02060bd9; }
.image-viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; }
.attachment-viewer-actions { display: flex; gap: 8px; margin-left: auto; }
#image-viewer-info { position: absolute; z-index: 5; top: max(64px,calc(env(safe-area-inset-top) + 56px)); right: max(16px,env(safe-area-inset-right)); width: min(360px,calc(100% - 32px)); padding: 12px 14px; border: 1px solid #50627c55; border-radius: 5px; background: #0e1621f5; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; max-height: 35dvh; overflow: auto; }
#image-viewer-info p { margin: 0; }
#attachment-viewer-pdf { width: 100%; height: 100%; min-width: 0; min-height: 0; border: 0; background: #171d25; }
#attachment-viewer-pdf-tools { flex: 0 0 auto; text-align: center; font-size: 11px; color: #73849b; }
#attachment-viewer-external { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; color: #a3b5cc; }
#attachment-viewer-external:focus-visible { outline: 1px solid #91adc9; outline-offset: 2px; }
@media (max-width:760px), (pointer:coarse) { #attachment-viewer-external { min-height: 44px; } }
#image-viewer-name { margin: 0; min-width: 0; font-size: 12px; font-weight: 400; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#image-viewer button { width: 44px; height: 44px; padding: 0; flex: 0 0 44px; border: 1px solid #50627c33; border-radius: 4px; background: #0e1621; box-shadow: none; color: #bdcde0; font-size: 20px; }
#image-viewer button:disabled { opacity: .3; }
#image-viewer button:focus-visible { outline: 1px solid #91adc9; outline-offset: 2px; }
#image-viewer .media-viewer-control { display: grid; place-items: center; width: 44px; height: 44px; border-color: #50627c55; background: #0e1621d9; }
#image-viewer .media-viewer-control svg { display: block; width: 20px; height: 20px; margin: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#image-viewer .media-viewer-control:not(:disabled):is(:hover,:focus-visible) { background: #1b2b3ae6; border-color: #829bb65c; color: #e0e9f2; }
.image-viewer-stage { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; overflow: hidden; }
.media-viewer-area { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
#image-viewer-image { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
#media-viewer-video { width: 100%; height: 100%; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; background: #02060b; }
#media-viewer-video:focus-visible { outline: 1px solid #91adc9; outline-offset: -2px; }
.media-viewer-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(400px,90%); text-align: center; pointer-events: none; }
#image-viewer-status { font-size: 12px; line-height: 1.7; margin: 0; }
#image-viewer :is(#media-viewer-save-copy,#media-viewer-info-copy) { display: inline-flex; align-items: center; min-height: 44px; color: #c5d9ec; font-size: 12px; pointer-events: auto; }
#image-viewer :is(#media-viewer-save-copy,#media-viewer-info-copy):focus-visible { outline: 1px solid #91adc9; outline-offset: 2px; }
#image-viewer :is(#image-viewer-previous,#image-viewer-next) { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); }
#image-viewer-previous { left: 0; }
#image-viewer-next { right: 0; }
#image-viewer-navigation { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; min-width: 0; }
#image-viewer-position { font-size: 11px; min-width: 44px; text-align: center; color: #94aac2; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
#media-viewer-filmstrip { display: flex; align-items: center; gap: 6px; max-width: min(680px,100%); padding: 6px; border: 1px solid #50627c44; border-radius: 6px; background: #0b1420e6; box-shadow: inset 0 2px 5px #0004, inset 0 1px 0 #c5d9ec08; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #41546b #08101a; }
#media-viewer-filmstrip::-webkit-scrollbar { height: 6px; }
#media-viewer-filmstrip::-webkit-scrollbar-track { background: #08101a; border-radius: 6px; }
#media-viewer-filmstrip::-webkit-scrollbar-thumb { background: #41546b; border: 1px solid #08101a; border-radius: 6px; }
#media-viewer-filmstrip::-webkit-scrollbar-thumb:hover { background: #536c86; }
#media-viewer-filmstrip::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
#media-viewer-filmstrip::-webkit-scrollbar-corner { background: #08101a; }
#image-viewer .media-filmstrip-thumb { position: relative; display: grid; place-items: center; flex: 0 0 64px; width: 64px; height: 48px; padding: 2px; border: 1px solid #536c893d; border-radius: 4px; overflow: hidden; background: #0e1824; box-shadow: inset 0 1px 2px #0003; opacity: 1; font-size: 16px; }
#image-viewer .media-filmstrip-thumb:is(:hover,:focus-visible) { border-color: #7e9cba80; background: #172739; color: #d5e4f2; }
#image-viewer .media-filmstrip-thumb[aria-current="true"] { border-color: #9cb9d4; background: #1b2b3a; box-shadow: 0 0 0 1px #91adc91f, inset 0 0 0 1px #a8c2dc14; }
#image-viewer .media-filmstrip-thumb:focus-visible { outline: 2px solid #91adc9; outline-offset: 2px; }
.media-filmstrip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 2px; opacity: .82; }
.media-filmstrip-thumb:is([aria-current="true"],:hover,:focus-visible) img { opacity: 1; }
.media-filmstrip-thumb span { position: absolute; bottom: 3px; right: 3px; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid #7b96b83d; border-radius: 3px; background: #08111ddb; color: #d8e5f4; font-size: 13px; }
@media (max-height:450px) {
    #image-viewer[open] { gap: 4px; }
    #image-viewer .media-filmstrip-thumb { width: 56px; flex-basis: 56px; height: 44px; }
    #image-viewer-navigation { gap: 3px; }
}
@media (max-width:760px), (pointer:coarse) { #sidebar-utilities #help-button { min-height: 44px; } }
#help-button { flex: 0 0 28px; width: 28px; height: 28px; margin-left: auto; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; box-shadow: none; color: #8195ad; font-family: inherit; font-size: 13px; line-height: 1; }
#help-button:hover { color: #c3d3e4; background: #ffffff04; }
#sidebar-utilities #backup-button { display: block; width: auto; min-height: 28px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: #73849b; font-size: 10px; }
#sidebar-utilities #backup-button:is(:hover,:focus-visible) { color: #c3d3e4; }
#backup-button:focus-visible,#backup-dialog button:focus-visible { outline: 1px solid #91adc9; outline-offset: 2px; }
#backup-dialog { width: min(390px,calc(100vw - 32px)); padding: 20px; border-radius: 7px; background: #0e1621; border-color: #50627c55; box-shadow: 0 8px 28px #0007; }
#backup-dialog::backdrop { background: #02060bb3; backdrop-filter: none; }
#backup-dialog h2 { margin-bottom: 10px; font-size: 18px; }
#backup-dialog p { margin: 10px 0; font-size: 12px; }
#backup-dialog #backup-privacy { color: #8195ad; }
#backup-dialog #backup-status[data-error='true'] { color: #dbb59d; }
#backup-dialog #backup-status[data-error='false'] { color: #a3b5cc; }
#backup-dialog .form-actions { display: flex; flex-wrap: wrap; }
#backup-dialog button { min-height: 44px; padding: 8px 12px; border-radius: 6px; box-shadow: none; font-size: 12px; }
#backup-dialog .backup-section-action { margin-top: 14px; }
#backup-restore-options { border-top: 1px solid #50627c55; margin-top: 18px; padding-top: 16px; }
#backup-restore-label { margin: 0; font-size: 14px; }
#backup-restore-options p { color: #8195ad; }
#backup-dialog #choose-restore-backup { background: transparent; color: #a3b5cc; }
#backup-dialog #cancel-backup { background: transparent; border-color: transparent; color: #8195ad; }
#backup-dialog #cancel-backup:hover { background: #ffffff04; color: #c3d3e4; }
#restore-backup-preview { border-top: 1px solid #50627c55; margin-top: 16px; padding-top: 14px; }
#restore-backup-preview h3 { margin: 0; font-size: 16px; }
#restore-backup-summary { line-height: 1.8; }
@media (max-width:760px), (pointer:coarse) { #sidebar-utilities #backup-button { min-height: 44px; } }
#help-button:focus-visible,#close-help-button:focus-visible,#help-dialog summary:focus-visible { outline: 1px solid #91adc9; outline-offset: 2px; }

#help-dialog { width: min(440px,calc(100vw - 32px)); max-height: min(620px,calc(var(--mobile-visible-height,100dvh) - 32px)); padding: 0; overflow: hidden; border: 1px solid #50627c55; border-radius: 7px; background: #0e1621; color: #a3b5cc; box-shadow: 0 8px 28px #0007; }
#help-dialog[open] { display: flex; flex-direction: column; }
#help-dialog::backdrop { background: #02060bb3; }
.help-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 8px; border-bottom: 1px solid #50627c26; }
#help-title { margin: 0; font-size: 12px; line-height: 1.5; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #9cb1ca; }
#close-help-button { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; box-shadow: none; color: #99adc4; font-size: 20px; }
#close-help-button:hover { color: #e6edf5; }
.help-topics { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 12px; scrollbar-width: thin; scrollbar-color: #344359 transparent; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.help-intro { margin: 12px 0; color: #8195ad; }
#help-dialog details { border-bottom: 1px solid #50627c26; }
#help-dialog details:last-child { border-bottom: 0; }
#help-dialog summary { display: flex; align-items: center; gap: 8px; min-height: 38px; cursor: pointer; color: #bdcde0; list-style: none; }
#help-dialog summary::-webkit-details-marker { display: none; }
#help-dialog summary::before { content: ''; flex: 0 0 5px; width: 5px; height: 5px; border-right: 1px solid #8195ad; border-bottom: 1px solid #8195ad; transform: rotate(-45deg); }
#help-dialog details[open] > summary::before { transform: rotate(45deg); }
.help-copy { padding: 0 0 8px 14px; }
.help-copy p { margin: 0 0 10px; }
.help-copy strong { color: #bdcde0; font-weight: 600; }
.help-structure-example { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.help-copy pre { margin: 0 0 10px; padding: 8px 10px; border-radius: 4px; background: #ffffff04; color: #bdcde0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; line-height: 1.6; }
@media (max-width:760px), (pointer:coarse) {
    #help-button { flex-basis: 44px; width: 44px; height: 44px; }

    #help-dialog { width: min(440px,calc(100vw - 24px)); max-height: calc(var(--mobile-visible-height,100dvh) - 24px); }
    .help-header { padding: 8px 14px; }
    #close-help-button { width: 44px; height: 44px; }
    .help-topics { padding: 0 14px 12px; font-size: 13px; }
    #help-dialog summary { min-height: 44px; }
}

/* Independent navigation sections share one quiet disclosure pattern. */
#universe-section { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#universe-section.section-collapsed { flex: 0 0 auto; }
#universe-section,#constellations-section,#archived-galaxies { margin: 3px 0 5px; }
#archived-galaxies { flex: 0 0 auto; min-height: 32px; }
.sidebar-section-header { padding: 0 12px 0 14px; gap: 3px; }
.sidebar-section-header .sidebar-section-title { flex: 1; min-width: 0; padding: 0; }
.sidebar-section-toggle { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 32px; padding: 0; text-align: left; border: 0; border-radius: 3px; background: transparent; box-shadow: none; color: #8195ad; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.sidebar-section-toggle > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-section-toggle svg { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform 120ms ease; }
.sidebar-section-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.sidebar-section-toggle:is(:hover,:focus-visible) { color: #c3d3e4; }
.sidebar-section-toggle:focus-visible { outline: 1px solid #839ab5; outline-offset: 2px; }
.universe-heading-controls { display: flex; align-items: center; gap: 6px; }
.universe-heading-controls #universe-toggle { flex: 0 0 32px; width: 32px; justify-content: center; }
.universe-heading-controls #universe-home { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
#archived-galaxy-list { margin: 0; padding: 0 12px 0 14px; max-height: 22dvh; }
#sample-utility { flex: 0 0 auto; margin: 0; padding-top: 3px; max-height: 22dvh; overflow: auto; color: #73849b; scrollbar-width: thin; scrollbar-color: #344359 transparent; }
#sample-utility summary { padding: 4px 0; font-size: 10px; cursor: pointer; }
@media (max-width:760px), (pointer:coarse) {
    .sidebar-section-toggle { min-height: 44px; }
    .universe-heading-controls #universe-toggle { flex-basis: 44px; width: 44px; }
    .sidebar-section-header .collection-add { width: 44px; height: 44px; opacity: 1; pointer-events: auto; }
    #sample-utility summary,#hierarchy-sidebar #sample-controls button { min-height: 44px; }
}