:root {
            --bg: #1f1f1f;
            --panel: #2d2d2d;
            --panel-hover: #3b3b3b;
            --text: #f0f0f0;
            --muted: #d9d9d9;
            --accent: #c7b6ff;
            --border: #f0f0f0;
            --like: #ff5c7a;
            /* Plain, readable font for @usernames (Orbitron makes l/1/_ hard to tell apart). */
            --font-plain: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        body {
            margin: 0;
            min-height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg);
            color: var(--text);
            font-family: "Orbitron", sans-serif;
            /* Orbitron's wide letters and narrow spaces run together at small sizes;
               a little extra letter and word spacing keeps small text readable. */
            letter-spacing: 0.04em;
            word-spacing: 0.12em;
            overflow: hidden;
        }

        /* Usernames use the plain font, which reads best at its normal spacing. */
        .profile-handle,
        .post-handles,
        .post-handle,
        .post-reply-author,
        .profile-chip-link,
        .post-dialog-title-handle {
            letter-spacing: normal;
            word-spacing: normal;
        }

        .stars {
            position: fixed;
            inset: 0;
            pointer-events: none;
            background-image:
                radial-gradient(2px 2px at 10% 20%, rgba(255, 255, 255, 0.9), transparent),
                radial-gradient(2px 2px at 30% 40%, rgba(255, 255, 255, 0.8), transparent),
                radial-gradient(1.5px 1.5px at 55% 25%, rgba(255, 255, 255, 0.8), transparent),
                radial-gradient(2px 2px at 70% 60%, rgba(255, 255, 255, 0.9), transparent),
                radial-gradient(1.5px 1.5px at 85% 30%, rgba(255, 255, 255, 0.7), transparent),
                radial-gradient(2px 2px at 20% 80%, rgba(255, 255, 255, 0.9), transparent),
                radial-gradient(1.5px 1.5px at 50% 75%, rgba(255, 255, 255, 0.8), transparent),
                radial-gradient(1.5px 1.5px at 75% 80%, rgba(255, 255, 255, 0.9), transparent),
                radial-gradient(2px 2px at 90% 90%, rgba(255, 255, 255, 0.7), transparent);
            background-repeat: repeat;
            background-size: 260px 260px;
            opacity: 0.9;
        }

        .header {
            position: absolute;
            top: 90px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: flex-end;
            gap: 8px;
            font-size: clamp(2rem, 4vw, 4rem);
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .header .our,
        .header .ship {
            color: var(--muted);
            font-size: 0.7em;
            font-weight: 600;
            letter-spacing: 1px;
            transform: translateY(12px);
        }

        .header .space {
            color: var(--accent);
            font-size: 1em;
            position: relative;
            border-bottom: 4px solid var(--accent);
        }

        /* The rocket "a" in Space. Idle: it floats. Hover: it rumbles, then swaps to the
           launching rocket in the same spot and hovers there with a glow. */
        .rocket-letter {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 0.9em;
            height: 1em;
            margin: 0 0.04em;
            cursor: default;
        }

        .rocket-letter .material-symbols-outlined {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05em;
            color: var(--accent);
            transition: opacity 0.2s ease, filter 0.3s ease;
            animation: rocket-idle 3.2s ease-in-out infinite;
        }

        .rocket-letter .hover-icon {
            opacity: 0;
        }

        .rocket-letter:hover .material-symbols-outlined {
            /* Rumble first, then swap to the launching rocket and hover in place. */
            transition: opacity 0.15s ease 0.22s, filter 0.3s ease 0.3s;
            animation: rocket-rumble 0.22s linear 2, rocket-hover 1.4s ease-in-out 0.44s infinite;
        }

        .rocket-letter:hover .default-icon {
            opacity: 0;
        }

        .rocket-letter:hover .hover-icon {
            opacity: 1;
        }

        @keyframes rocket-idle {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-0.05em) rotate(-4deg); }
        }

        @keyframes rocket-rumble {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            20% { transform: translate(-0.02em, 0.01em) rotate(-3deg); }
            40% { transform: translate(0.02em, 0) rotate(3deg); }
            60% { transform: translate(-0.015em, 0.015em) rotate(-2deg); }
            80% { transform: translate(0.015em, 0) rotate(2deg); }
        }

        @keyframes rocket-hover {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            50% { transform: translate(0.02em, -0.05em) rotate(2deg); }
        }

        @media (prefers-reduced-motion: reduce) {
            .rocket-letter .material-symbols-outlined,
            .rocket-letter:hover .material-symbols-outlined {
                transition: opacity 0.2s ease;
                animation: none;
            }
        }

        .sidebar {
            position: fixed;
            top: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            z-index: 2;
        }

        .icon-button {
            width: 46px;
            height: 46px;
            border: 2px solid var(--border);
            background: var(--panel);
            padding: 0;
            font-weight: bold;
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            color: var(--text);
            cursor: pointer;
            transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
        }

        .material-icon {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.5rem;
            height: 1.5rem;
        }

        .icon-button:hover .notification-icon {
            animation: bell-ding 0.9s ease-in-out;
            transform-origin: 50% 15%;
        }

        .search-icon .material-symbols-outlined {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .search-icon .hover-icon {
            opacity: 0;
            transform: scale(0.8);
            color: var(--accent);
        }

        .icon-button:hover .search-icon {
            animation: search-spin 2s linear infinite;
        }

        .icon-button:hover .search-icon .default-icon {
            opacity: 0;
            transform: scale(0.8);
        }

        .icon-button:hover .search-icon .hover-icon {
            opacity: 1;
            transform: scale(1.1);
        }

        .back-icon .material-symbols-outlined {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .back-icon .default-icon {
            opacity: 1;
            transform: translateX(0);
        }

        .back-icon .hover-icon {
            opacity: 0;
            transform: translateX(5px);
            color: var(--accent);
        }

        .icon-button:hover .back-icon .default-icon {
            opacity: 0;
            transform: translateX(-5px);
        }

        .icon-button:hover .back-icon .hover-icon {
            opacity: 1;
            transform: translateX(0);
        }

        .profile-icon .material-symbols-outlined {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .profile-icon .hover-icon {
            opacity: 0;
            transform: translateY(4px);
            color: var(--accent);
        }

        .icon-button:hover .profile-icon .default-icon {
            opacity: 0;
            transform: translateY(-4px);
        }

        .icon-button:hover .profile-icon .hover-icon {
            opacity: 1;
            transform: translateY(0);
        }

        /* Profile button with my picture: the picture fills the circle; hovering swaps to the badge icon. */
        .icon-button.has-pfp {
            position: relative;
        }

        .profile-button-pfp {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .icon-button.has-pfp .profile-icon .default-icon {
            opacity: 0;
        }

        .icon-button.has-pfp:hover .profile-button-pfp,
        .icon-button.has-pfp:focus-visible .profile-button-pfp {
            opacity: 0;
            transform: translateY(-4px);
        }

        .icon-button.has-pfp:focus-visible .profile-icon .hover-icon {
            opacity: 1;
            transform: translateY(0);
        }

        .edit-icon .material-symbols-outlined {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .edit-icon .default-icon {
            opacity: 1;
            transform: rotate(0);
        }

        .edit-icon .hover-icon {
            opacity: 0;
            transform: scale(0.8);
            color: var(--accent);
        }

        .icon-button:hover .edit-icon .default-icon {
            opacity: 0;
            transform: rotate(-20deg);
        }

        .icon-button:hover .edit-icon .hover-icon {
            opacity: 1;
            transform: scale(1.1);
        }

        .icon-button[hidden] {
            display: none;
        }

        /* Signed in or out (set on <html> by user/users.js): show the matching buttons. */
        html[data-auth="signed-out"] .notification-bell,
        html[data-auth="signed-out"] [data-signed-in-only],
        html[data-auth="signed-in"] [data-signed-out-only] {
            display: none !important;
        }

        .icon-button:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 3px;
        }

        .icon-button .material-symbols-outlined {
            transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
        }

        .icon-button:hover {
            background: var(--panel-hover);
            color: var(--accent);
        }

        .notification-icon .material-symbols-outlined {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
        }

        .notification-icon .default-icon {
            opacity: 1;
            transform: scale(1);
        }

        .notification-icon .hover-icon {
            opacity: 0;
            transform: scale(0.8);
            color: var(--accent);
        }

        /* Bell shows notifications_unread in the accent colour while anything is unread. */
        .notification-bell.has-unread .notification-icon .default-icon {
            color: var(--accent);
        }

        .icon-button:hover .notification-icon .default-icon {
            opacity: 0;
            transform: scale(0.8);
        }

        .icon-button:hover .notification-icon .hover-icon {
            opacity: 1;
            transform: scale(1.15);
        }

        @keyframes bell-ding {
            0%, 100% { transform: rotate(0); }
            15%, 45%, 75% { transform: rotate(-12deg); }
            30%, 60%, 90% { transform: rotate(12deg); }
        }

        @keyframes search-spin {
            to { transform: rotate(360deg); }
        }

        .material-symbols-outlined {
            font-family: "Material Symbols Outlined";
            font-weight: normal;
            font-style: normal;
            font-size: 1.5rem;
            line-height: 1;
            letter-spacing: normal;
            text-transform: none;
            display: inline-block;
            vertical-align: middle;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
        }

        .button-stack {
            display: flex;
            flex-direction: column;
            gap: 12px;
            width: min(520px, 78vw);
        }

        .space-button {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--panel);
            color: var(--text);
            border: 2px solid var(--border);
            padding: 16px 18px;
            font-size: 1.05rem;
            font-weight: 600;
            text-align: left;
            cursor: pointer;
            box-shadow: 4px 4px 0 var(--border);
            font-family: "Orbitron", sans-serif;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            text-decoration: none;
        }
        .space-button:hover {
            box-shadow: 3px 3px 0 var(--accent);
            border-color: var(--accent);
        }

        .space-button .label {
            flex: 1;
        }

        .arrow-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: auto;
            width: 1.6rem;
            height: 1.6rem;
        }

        .space-button .arrow {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            line-height: 1;
            font-family: "Material Symbols Outlined";
            font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
            transition: opacity 0.15s ease, transform 0.15s ease;
        }

        .space-button .hover-arrow {
            opacity: 0;
        }

        .space-button:hover {
            background: var(--panel-hover);
            color: var(--accent);
        }

        .space-button:hover .default-arrow {
            opacity: 0;
        }

        .space-button:hover .hover-arrow {
            opacity: 1;
            transform: translateX(2px);
        }

        .subtext {
            display: block;
            font-size: 0.7rem;
            color: var(--muted);
        }

        .site-footer {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 28px 18px;
            font-family: "Orbitron", sans-serif;
            font-size: 0.75rem;
            letter-spacing: 0.08em;
            text-transform: lowercase;
            background: none;
        }

        .footer-link {
            color: var(--text);
            text-decoration: none;
        }
        .footer-link:hover {
            color: var(--accent);
        }

        .footer-credit {
            color: var(--muted);
        }

        .search-page-body {
            min-height: 100vh;
            overflow: auto;
            box-sizing: border-box;
        }

        .search-page {
            position: absolute;
            top: 180px;
            left: 50%;
            width: min(520px, 78vw);
            z-index: 1;
            transform: translateX(-50%);
        }

        .search-results {
            max-height: calc(100vh - 340px);
            overflow-y: auto;
        }

        .header.search-title {
            display: block;
            width: 100%;
            text-align: center;
            font-size: clamp(1.5rem, 4vw, 3rem);
        }

        .search-title {
            margin: 0;
            color: var(--accent);
            font-size: clamp(1.5rem, 5vw, 2.25rem);
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .search-form {
            display: flex;
            gap: 10px;
            align-items: flex-start;
        }

        .search-input-wrap {
            position: relative;
            min-width: 0;
            flex: 1;
        }

        .search-input {
            min-width: 0;
            width: 100%;
            box-sizing: border-box;
            padding: 14px 40px 14px 15px;
            border: 2px solid var(--border);
            border-radius: 0;
            outline: none;
            background: var(--panel);
            color: var(--text);
            font-family: "Orbitron", sans-serif;
            font-size: 0.8rem;
            letter-spacing: 0.05em;
        }

        .search-input::placeholder {
            color: #aaa;
        }

        .search-input::-webkit-search-cancel-button {
            display: none;
        }

        .search-clear {
            position: absolute;
            top: 50%;
            right: 11px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            padding: 0;
            border: 0;
            background: transparent;
            color: var(--muted);
            cursor: pointer;
            transform: translateY(-50%);
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .search-clear[hidden] {
            display: none;
        }

        .search-clear:hover {
            color: var(--accent);
            cursor: pointer;
            transform: translateY(-50%) scale(1.15);
        }

        .search-input:focus {
            border-color: var(--accent);
        }

        .search-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 3;
            max-height: 220px;
            overflow-y: auto;
            border: 2px solid var(--border);
            border-top: 0;
            background: var(--panel);
        }

        .search-results,
        .search-suggestions {
            scrollbar-width: thin;
            scrollbar-color: var(--accent) var(--bg);
        }

        .search-results::-webkit-scrollbar,
        .search-suggestions::-webkit-scrollbar {
            width: 12px;
        }

        .search-results::-webkit-scrollbar-track,
        .search-suggestions::-webkit-scrollbar-track {
            border: 1px solid rgba(240, 240, 240, 0.45);
            background: var(--bg);
        }

        .search-results::-webkit-scrollbar-thumb,
        .search-suggestions::-webkit-scrollbar-thumb {
            border: 2px solid var(--bg);
            background: var(--accent);
        }

        .search-results::-webkit-scrollbar-thumb:hover,
        .search-suggestions::-webkit-scrollbar-thumb:hover {
            background: var(--text);
        }

        .search-results::-webkit-scrollbar-corner,
        .search-suggestions::-webkit-scrollbar-corner {
            background: var(--bg);
        }

        .search-suggestions[hidden] {
            display: none;
        }

        .search-suggestion {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 11px 14px;
            border: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
            background: transparent;
            color: var(--text);
            cursor: pointer;
            font-family: "Orbitron", sans-serif;
            font-size: 0.75rem;
            text-align: left;
        }

        .search-suggestion:last-child {
            border-bottom: 0;
        }

        .search-suggestion:hover,
        .search-suggestion:focus-visible {
            outline: none;
            background: var(--panel-hover);
            color: var(--accent);
        }

        .suggestion-type {
            flex: 0 0 auto;
            color: var(--muted);
            font-size: 0.7rem;
            text-transform: uppercase;
        }

        .search-submit {
            flex: 0 0 auto;
            padding: 12px 18px;
            font-size: 0.8rem;
        }

        .search-note {
            margin-top: 16px;
            color: var(--muted);
            font-size: 0.72rem;
            line-height: 1.6;
        }

        .search-results {
            margin-top: 24px;
        }

        .results-heading {
            margin: 0 0 12px;
            color: var(--accent);
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .search-result {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            margin-bottom: 10px;
            padding: 14px;
            border: 2px solid var(--border);
            background: var(--panel);
        }

        .result-icon {
            flex: 0 0 auto;
            color: var(--accent);
            font-size: 1.5rem;
        }

        .result-icon-image {
            width: 36px;
            height: 36px;
            box-sizing: border-box;
            border: 1px solid var(--border);
            background: var(--panel);
            object-fit: cover;
        }

        .result-content {
            min-width: 0;
            flex: 1;
        }

        .result-header {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
        }

        .result-title {
            margin: 0;
            color: var(--text);
            font-size: 0.85rem;
            text-transform: uppercase;
        }

        .result-type {
            flex: 0 0 auto;
            color: var(--accent);
            font-size: 0.7rem;
            text-transform: uppercase;
        }

        .result-description {
            margin: 7px 0 0;
            color: var(--muted);
            font-size: 0.75rem;
            line-height: 1.6;
        }

        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        @media (max-width: 420px) {
            .search-page {
                top: 145px;
                width: 88vw;
            }

            .search-results {
                max-height: calc(100vh - 285px);
            }

            .search-form {
                flex-direction: column;
            }

            .search-submit {
                justify-content: center;
            }
        }

        .profile-document {
            height: 100%;
            overflow: hidden;
        }

        /* Fill the viewport between the heading and the fixed footer;
           the page (or its active tab panel) scrolls instead of the body. */
        .profile-page-body {
            height: 87%;
            min-height: 75vh;
            position: relative;
            padding: 80px 0 72px;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            overflow: hidden;
        }

        /* Page heading, centred at the top (kept clear of the sidebar buttons on the right). */
        .profile-page-heading {
            position: absolute;
            top: 24px;
            left: 50%;
            z-index: 2;
            width: max-content;
            /* Leaves room for the logo on the left and the sidebar on the right. */
            max-width: calc(100vw - 400px);
            margin: 0;
            text-align: center;
            transform: translateX(-50%);
            color: var(--accent);
            font-family: "Orbitron", sans-serif;
            font-size: clamp(1rem, 2.4vw, 1.5rem);
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .profile-page {
            position: relative;
            z-index: 1;
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            width: min(760px, calc(100vw - 180px));
            min-height: 0;
            margin: 0;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--accent) var(--bg);
        }

        .profile-page > * {
            flex: 0 0 auto;
        }

        .profile-banner,
        .planet-banner {
            position: relative;
            height: clamp(100px, 18vw, 190px);
            border: 2px solid var(--border);
            background-color: var(--panel);
            background-position: center;
            background-size: cover;
        }

        /* Status tag straddles the banner's top edge on the right, the way the avatar
           straddles its bottom edge. */
        .profile-status-tag {
            position: absolute;
            top: 0;
            right: 22px;
            z-index: 1;
            margin: 0;
            transform: translateY(-50%);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            max-width: calc(100% - 44px);
            min-height: 38px;
            box-sizing: border-box;
            padding: 6px 12px 6px 10px;
            border: 2px solid var(--border);
            background: var(--panel);
            color: var(--text);
            font-size: 0.72rem;
            letter-spacing: 0.05em;
        }

        .profile-status-tag[hidden] {
            display: none;
        }

        /* The page clips anything above it, so make room for the top half of the tag. */
        .profile-banner:has(> .profile-status-tag:not([hidden])) {
            margin-top: 20px;
        }

        .profile-status-tag .material-symbols-outlined {
            flex: 0 0 auto;
            color: var(--accent);
            font-size: 1.1rem;
        }

        .profile-status-text {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Your own status tag opens Edit status: on hover it turns soft green (like the site's
           edit buttons) and its icon becomes the edit icon. */
        .profile-status-tag.is-editable {
            cursor: pointer;
        }

        .profile-status-tag.is-editable .profile-status-edit-icon {
            display: none;
        }

        .profile-status-tag.is-editable:hover,
        .profile-status-tag.is-editable:focus-visible {
            border-color: var(--role-moderator);
            color: var(--role-moderator);
            outline: none;
        }

        .profile-status-tag.is-editable:hover .material-symbols-outlined,
        .profile-status-tag.is-editable:focus-visible .material-symbols-outlined {
            color: var(--role-moderator);
        }

        .profile-status-tag.is-editable:hover .profile-status-icon,
        .profile-status-tag.is-editable:focus-visible .profile-status-icon {
            display: none;
        }

        .profile-status-tag.is-editable:hover .profile-status-edit-icon,
        .profile-status-tag.is-editable:focus-visible .profile-status-edit-icon {
            display: inline-block;
        }

        .profile-identity {
            position: relative;
            margin-top: -42px;
            padding: 0 22px 18px;
            display: flex;
            align-items: flex-start;
            gap: 24px;
        }

        .profile-identity-main {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 12px 16px;
            min-width: 0;
            flex: 1;
        }

        .profile-identity-details {
            min-width: 0;
            flex: 1;
        }

        /* Bio sits on its own row, left-aligned under the avatar. */
        .profile-identity-main > .profile-bio {
            flex: 0 0 100%;
            margin: 0;
        }

        .profile-aside {
            display: flex;
            flex: 0 0 auto;
            flex-direction: column;
            align-items: flex-end;
            gap: 12px;
            padding-top: 20px;
        }

        .profile-badges {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 10px;
            /* Keep the row's height (one badge) even with no badges, so Followers/Following
               always sit in the same spot instead of jumping up into it. */
            min-height: 38px;
        }

        .profile-badge-icon {
            display: inline-flex;
            width: 38px;
            height: 38px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            background: var(--panel);
            color: var(--accent);
            font-size: 1.35rem;
        }

        .profile-avatar {
            display: flex;
            width: 84px;
            height: 84px;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--border);
            background: var(--panel);
            color: var(--accent);
            object-fit: cover;
        }

        .profile-avatar-placeholder {
            font-size: 2.5rem;
        }

        .profile-name {
            margin: 12px 0 4px;
            color: var(--accent);
            /* Phones stay at 1.1rem; on bigger screens it tops out at 1.3rem so long names fit
               beside the stats. */
            font-size: clamp(1.1rem, 2vw, 1.3rem);
            overflow-wrap: anywhere;
            text-transform: uppercase;
        }

        .profile-identity-main .profile-name {
            margin-top: 42px;
        }

        .profile-status,
        .profile-url {
            margin: 0 0 10px;
            color: var(--muted);
            font-size: 0.75rem;
        }

        .profile-handle {
            margin: 0 0 8px;
            color: var(--accent);
            font-family: var(--font-plain);
            font-size: 0.9rem;
            overflow-wrap: anywhere;
        }

        .profile-bio {
            margin: 12px 0 0;
            color: var(--text);
            font-size: 0.8rem;
            line-height: 1.7;
        }

        .profile-stats {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            margin: 0;
        }

        .profile-stat,
        .profile-chip,
        .planet-chip {
            padding: 8px 10px;
            border: 1px solid var(--border);
            background: var(--panel);
            color: var(--text);
            font-size: 0.72rem;
            text-transform: uppercase;
        }

        /* Stats that open a pop-up (Followers, Following, Crew). */
        .profile-stat-button {
            font-family: "Orbitron", sans-serif;
            letter-spacing: 0.04em;
            cursor: pointer;
            transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
        }

        .profile-stat-button:hover,
        .profile-stat-button:focus-visible {
            border-color: var(--accent);
            background: var(--panel-hover);
            color: var(--accent);
            outline: none;
        }

        /* Icon-only notifications on/off switch on planet and Moon Base pages, framed like the badges. */
        .notify-toggle {
            display: inline-flex;
            width: 38px;
            height: 38px;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 1px solid var(--border);
            background: var(--panel);
            color: var(--muted);
            cursor: pointer;
            transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
        }

        .notify-toggle .material-symbols-outlined {
            font-size: 1.35rem;
        }

        .notify-toggle.is-on {
            color: var(--accent);
        }

        .notify-toggle:hover,
        .notify-toggle:focus-visible {
            border-color: var(--accent);
            background: var(--panel-hover);
            outline: none;
        }

        .profile-tabs {
            display: flex;
            gap: 8px;
            /* Extra room below for the top half of the panel's title tag. */
            margin: 0 22px 30px;
        }

        /* The Follow button in the tab row: same height as the tabs, a bit apart from them. */
        .profile-tabs > .profile-follow-button {
            margin-left: 8px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .profile-tab {
            flex: 0 0 auto;
            padding: 10px 14px;
            font-size: 0.75rem;
        }

        .profile-tab.is-active {
            border-color: var(--accent);
            box-shadow: 3px 3px 0 var(--accent);
            color: var(--accent);
        }

        .profile-tab:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 4px;
        }

        .profile-tab-panel[hidden] {
            display: none;
        }

        /* The panel is a fixed frame that owns the border; the scrollbar sits inside it on
           .profile-tab-scroll, and the title tag can straddle the frame's top edge. */
        .profile-page > .profile-tab-panel {
            position: relative;
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            min-height: 160px;
            box-sizing: border-box;
            border: 2px solid var(--border);
            background: rgba(45, 45, 45, 0.92);
        }

        .profile-page > .profile-tab-panel[hidden] {
            display: none;
        }

        .profile-tab-scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--accent) transparent;
        }

        .profile-tab-scroll:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: -4px;
        }

        .profile-tab-scroll::-webkit-scrollbar {
            width: 10px;
        }

        .profile-tab-scroll::-webkit-scrollbar-track {
            background: transparent;
        }

        .profile-tab-scroll::-webkit-scrollbar-thumb {
            border: 2px solid rgba(45, 45, 45, 0.92);
            background: var(--accent);
        }

        .profile-tab-scroll::-webkit-scrollbar-thumb:hover {
            background: var(--text);
        }

        /* Section titles in tab panels are tags on the line above them, half on and half off,
           like the avatar on the banner: the first on the frame, later ones on the divider. */
        .profile-tab-panel .profile-section-title,
        .edit-frame > .profile-section-title,
        .auth-frame > .profile-section-title {
            position: absolute;
            top: 0;
            left: 22px;
            z-index: 1;
            max-width: calc(100% - 44px);
            box-sizing: border-box;
            margin: 0;
            padding: 7px 12px;
            border: 2px solid var(--border);
            background: var(--panel);
            font-size: 0.75rem;
            letter-spacing: 0.6px;
            transform: translateY(-50%);
        }

        .profile-tab-scroll > .profile-section {
            position: relative;
            margin-top: 0;
            padding-top: 30px;
            padding-bottom: 24px;
            border: 0;
            background: none;
        }

        /* Later sections need space above the divider for the top half of their tag. */
        .profile-tab-scroll > .profile-section + .profile-section {
            margin-top: 20px;
            border-top: 1px solid rgba(240, 240, 240, 0.25);
        }

        /* Panels with several sections (Crew, Planet Info): no shared frame; each section is
           its own framed box with its title tag on its top border, stacked with gaps. */
        .profile-page > .profile-tab-panel.is-split {
            /* The scroll area's top padding already makes room for the first tag, so pull the
               panel up to keep the same gap under the tab buttons as single-box tabs. */
            margin-top: -14px;
            border: 0;
            background: none;
        }

        .profile-tab-panel.is-split > .profile-tab-scroll {
            /* Top room for the first tag's upper half; a little right room beside the scrollbar. */
            padding: 18px 4px 4px 0;
        }

        .profile-tab-panel.is-split > .profile-tab-scroll > .profile-section {
            padding: 30px 16px 20px;
            border: 2px solid var(--border);
            background: rgba(45, 45, 45, 0.92);
        }

        .profile-tab-panel.is-split > .profile-tab-scroll > .profile-section + .profile-section {
            margin-top: 34px;
            border-top: 2px solid var(--border);
        }

        .profile-section {
            margin-top: 0;
            padding: 16px;
            border: 2px solid var(--border);
            background: rgba(45, 45, 45, 0.92);
        }

        .profile-section-title {
            margin: 0 0 14px;
            color: var(--accent);
            font-size: 0.9rem;
            text-transform: uppercase;
        }

        .profile-chip-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .profile-chip:has(> .profile-chip-link):hover,
        .profile-chip:has(> .profile-chip-link:focus-visible) {
            border-color: var(--accent);
        }

        .profile-chip-link {
            color: var(--accent);
            font-family: var(--font-plain);
            font-size: 0.8rem;
            text-decoration: none;
            text-transform: none;
        }

        .profile-chip-link:focus-visible {
            outline: none;
        }

        .profile-muted,
        .profile-empty {
            color: var(--muted);
            font-size: 0.75rem;
            line-height: 1.7;
        }

        .profile-empty {
            padding: 18px;
            border: 2px solid var(--border);
            background: var(--panel);
        }

        /* Post card. The reaction buttons straddle its bottom border on the right,
           like the avatar on the banner, so cards get extra space between them. */
        .profile-post {
            position: relative;
            margin-top: 30px;
            padding: 14px 14px 28px;
            border: 1px solid rgba(240, 240, 240, 0.45);
            background: var(--bg);
        }

        .profile-post:first-of-type {
            margin-top: 0;
        }

        .profile-post:last-of-type {
            margin-bottom: 20px;
        }

        .post-main {
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-width: 0;
        }

        .post-header {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .post-avatar {
            width: 30px;
            height: 30px;
            flex: 0 0 auto;
            box-sizing: border-box;
            border: 1px solid var(--border);
            background: var(--panel);
            object-fit: cover;
        }

        /* Display name on top, then "@username /planet/name" with both parts linked. */
        .post-byline {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }

        .post-author-name {
            color: var(--text);
            font-size: 0.75rem;
            font-weight: 600;
            text-decoration: none;
            overflow-wrap: anywhere;
        }

        .post-handles {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 2px 4px;
            font-family: var(--font-plain);
            font-size: 0.75rem;
        }

        .post-handle {
            color: var(--accent);
            text-decoration: none;
            overflow-wrap: anywhere;
        }

        .post-handle-separator {
            color: var(--muted);
            font-size: 1rem;
        }

        .post-handle:hover,
        .post-handle:focus-visible {
            text-decoration: underline;
        }

        .post-text {
            margin: 0;
            color: var(--text);
            font-size: 0.8rem;
            line-height: 1.7;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
        }

        .post-mentions {
            margin: 0;
            color: var(--accent);
            font-size: 0.75rem;
        }

        .post-reactions {
            position: absolute;
            right: 14px;
            bottom: 0;
            z-index: 1;
            display: flex;
            gap: 8px;
            transform: translateY(50%);
        }

        .reaction-button {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-width: 52px;
            box-sizing: border-box;
            padding: 6px 10px;
            border: 1px solid var(--border);
            background: var(--panel);
            color: var(--text);
            cursor: pointer;
            font-family: "Orbitron", sans-serif;
            transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
        }

        .reaction-icon {
            font-size: 1.15rem;
        }

        .reaction-count {
            color: var(--muted);
            font-size: 0.7rem;
        }

        .reaction-button:hover {
            border-color: var(--accent);
            background: var(--panel-hover);
            color: var(--accent);
        }

        .reaction-button.is-active {
            border-color: var(--accent);
            box-shadow: 2px 2px 0 var(--accent);
            color: var(--accent);
        }

        .reaction-button.is-active .reaction-icon {
            font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
        }

        .reaction-button.is-active .reaction-count {
            color: var(--accent);
        }

        /* Like: white heart → red heart_plus on hover; liked: red heart → red heart_broken on hover. */
        .like-button .reaction-hover-icon,
        .like-button:hover .reaction-icon:not(.reaction-hover-icon),
        .like-button:focus-visible .reaction-icon:not(.reaction-hover-icon) {
            display: none;
        }

        .like-button:hover .reaction-hover-icon,
        .like-button:focus-visible .reaction-hover-icon {
            display: inline-block;
        }

        .like-button .reaction-icon:not(.reaction-hover-icon) {
            color: var(--text);
        }

        .like-button.is-active .reaction-icon,
        .like-button .reaction-hover-icon {
            color: var(--like);
        }

        .reaction-button:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        .post-reply-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .post-reply-list:empty {
            display: none;
        }

        .post-reply {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 8px;
            padding: 8px 10px;
            border-left: 2px solid var(--accent);
            background: var(--bg);
            color: var(--text);
            font-size: 0.75rem;
            line-height: 1.6;
            overflow-wrap: anywhere;
        }

        .post-reply-author {
            color: var(--accent);
            font-family: var(--font-plain);
            font-size: 0.8rem;
            text-decoration: none;
        }

        /* Usernames are always links: show the pointer and underline on hover. They only
           take the width of their text, so the pointer doesn't spill into empty space when a
           column layout would otherwise stretch them full width. */
        .post-handle,
        .post-reply-author,
        .profile-chip-link {
            width: fit-content;
            max-width: 100%;
            cursor: pointer;
        }

        .post-reply-author:hover,
        .post-reply-author:focus-visible {
            text-decoration: underline;
        }

        .reaction-button:disabled,
        .space-button:disabled {
            cursor: not-allowed;
            opacity: 0.5;
        }

        /* Reply and comments pop-ups: a framed box with the title tag and close button on
           the top border and the action buttons on the bottom border. */
        .post-dialog {
            width: min(520px, calc(100vw - 32px));
            max-width: none;
            max-height: none;
            box-sizing: border-box;
            margin: auto;
            padding: 22px 0 26px;
            border: 0;
            background: transparent;
            color: var(--text);
            font-family: "Orbitron", sans-serif;
            overflow: visible;
        }

        .post-dialog::backdrop {
            background: rgba(10, 10, 14, 0.72);
            backdrop-filter: blur(2px);
        }

        .post-dialog-form {
            display: flex;
            flex-direction: column;
            max-height: calc(100vh - 96px);
            max-height: calc(100dvh - 96px);
        }

        .post-dialog-frame {
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 0;
            border: 2px solid var(--border);
            background: var(--panel);
        }

        .post-dialog-title {
            position: absolute;
            top: 0;
            left: 22px;
            z-index: 1;
            max-width: calc(100% - 110px);
            box-sizing: border-box;
            margin: 0;
            padding: 7px 12px;
            overflow: hidden;
            border: 2px solid var(--border);
            background: var(--bg);
            color: var(--accent);
            font-size: 0.75rem;
            letter-spacing: 0.6px;
            text-overflow: ellipsis;
            text-transform: uppercase;
            white-space: nowrap;
            transform: translateY(-50%);
        }

        /* The @username inside a pop-up title stays in the plain font, not uppercase. */
        .post-dialog-title-handle {
            font-family: var(--font-plain);
            font-size: 0.85rem;
            letter-spacing: 0;
            text-transform: none;
        }

        .post-dialog-close {
            position: absolute;
            top: 0;
            right: 22px;
            z-index: 1;
            display: inline-flex;
            width: 34px;
            height: 34px;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 2px solid var(--border);
            background: var(--bg);
            color: var(--text);
            cursor: pointer;
            transform: translateY(-50%);
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .post-dialog-close .material-symbols-outlined {
            font-size: 1.2rem;
        }

        .post-dialog-close:hover,
        .post-dialog-close:focus-visible {
            border-color: var(--accent);
            color: var(--accent);
            outline: none;
        }

        .post-dialog-body {
            display: flex;
            flex-direction: column;
            gap: 14px;
            min-height: 0;
            /* Room for the half-tags above and the overlapping buttons below. */
            padding: 32px 20px 40px;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--accent) transparent;
        }

        .post-dialog-quote {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin: 0;
            padding: 10px 12px;
            border-radius: 2px solid var(--accent);
            background: var(--bg);
            font-size: 0.75rem;
            line-height: 1.6;
        }
        .post-dialog-quote.comment-reply-quote {
            border-radius: 2px solid var(--accent);
        }

        .post-dialog-quote .post-handle {
            font-family: var(--font-plain);
            font-size: 0.8rem;
        }

        .post-dialog-quote p {
            display: -webkit-box;
            margin: 0;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            overflow-wrap: anywhere;
        }

        .post-dialog-note {
            margin: 0;
        }

        .post-dialog-note[hidden] {
            display: none;
        }

        .post-dialog-actions {
            position: relative;
            z-index: 1;
            display: flex;
            gap: 12px;
            /* Pull up by half the button height so the row sits on the frame's bottom border. */
            margin-top: -22px;
            padding: 0 22px 4px;
        }

        .post-dialog-actions-end {
            justify-content: flex-end;
        }

        .post-dialog-actions .space-button {
            padding: 12px 18px;
            font-size: 0.75rem;
        }

        .search-result-link {
            display: flex;
            width: 100%;
            align-items: flex-start;
            gap: 14px;
            color: inherit;
            text-decoration: none;
        }

        .search-result:has(.search-result-link):hover {
            border-color: var(--accent);
        }

        /* Edit page: the page itself never scrolls. The preview stays fixed above, only the
           "Profile details" box scrolls, and the save/cancel buttons straddle its bottom border. */
        .profile-page.edit-page {
            overflow: hidden;
        }

        /* Very short windows can't fit the preview plus a usable box, so let the page scroll there. */
        @media (max-height: 560px) {
            .profile-page.edit-page {
                overflow-y: auto;
            }
        }

        .profile-page > .edit-layout {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            min-height: 0;
        }

        /* The frame holds the border and the title tag; .edit-scroll scrolls inside it. */
        .edit-frame {
            position: relative;
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            min-height: 120px;
            /* The scroll area starts below the title tag, so fields never slide under it. */
            padding: 18px 0 0;
        }

        .edit-scroll {
            flex: 1 1 auto;
            min-height: 0;
            box-sizing: border-box;
            /* Bottom room so the overlapping buttons never cover the last field. */
            padding: 14px 16px 44px;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--accent) transparent;
        }

        .edit-scroll::-webkit-scrollbar {
            width: 10px;
        }

        .edit-scroll::-webkit-scrollbar-track {
            background: transparent;
        }

        .edit-scroll::-webkit-scrollbar-thumb {
            border: 2px solid rgba(45, 45, 45, 0.92);
            background: var(--accent);
        }

        .edit-scroll::-webkit-scrollbar-thumb:hover {
            background: var(--text);
        }

        .edit-form {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .edit-field {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .edit-label {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            color: var(--accent);
            font-size: 0.75rem;
            letter-spacing: 0.6px;
            text-transform: uppercase;
        }

        .edit-counter,
        .edit-hint {
            color: var(--muted);
            font-size: 0.7rem;
            letter-spacing: 0.05em;
            text-transform: none;
        }

        .edit-input {
            width: 100%;
            box-sizing: border-box;
            padding: 12px 14px;
            border: 2px solid var(--border);
            border-radius: 0;
            outline: none;
            background: var(--bg);
            color: var(--text);
            font-family: "Orbitron", sans-serif;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
            line-height: 1.6;
        }

        .edit-input::placeholder {
            color: #aaa;
        }

        .edit-input:focus {
            border-color: var(--accent);
        }

        .edit-input[aria-invalid="true"] {
            border-color: #ff8a8a;
        }

        /* Bio and reply boxes can be dragged taller, but only up to a limit; longer text scrolls inside. */
        textarea.edit-input {
            min-height: 96px;
            max-height: 200px;
            overflow-y: auto;
            resize: vertical;
        }

        /* Picture pickers: "Choose file" button, chosen file name, and a "Remove" link. */
        .edit-file-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 14px;
            /* Room for the button's offset shadow. */
            padding: 0 4px 4px 0;
        }

        .edit-file-button {
            padding: 9px 14px;
            box-shadow: 3px 3px 0 var(--border);
            font-size: 0.72rem;
        }

        .edit-file-name {
            min-width: 0;
            overflow: hidden;
            color: var(--muted);
            font-size: 0.72rem;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .edit-file-row .edit-reset {
            align-self: center;
        }

        .edit-file-row .edit-reset[hidden] {
            display: none;
        }

        .edit-error {
            margin: 0;
            color: #ff8a8a;
            font-size: 0.7rem;
        }

        .edit-actions {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12px;
            flex: 0 0 auto;
            /* Pull up by half the button height so the row sits on the box's bottom border. */
            margin-top: -22px;
            padding: 0 22px 4px;
        }

        .edit-actions .space-button {
            padding: 12px 18px;
            font-size: 0.75rem;
            text-decoration: none;
        }

        .edit-reset {
            align-self: flex-start;
            padding: 6px 0;
            border: 0;
            background: none;
            color: var(--muted);
            cursor: pointer;
            font-family: "Orbitron", sans-serif;
            font-size: 0.72rem;
            text-decoration: underline;
            text-transform: uppercase;
        }

        .edit-reset:hover,
        .edit-reset:focus-visible {
            color: var(--accent);
        }

        .edit-status:empty {
            display: none;
        }

        .edit-status {
            flex: 0 0 auto;
            margin: 10px 0 0;
            color: var(--accent);
            font-size: 0.72rem;
        }

        /* Notifications page: one framed inbox (title tag on top, "mark all" button on the bottom border). */
        .notifications-page > .profile-tab-panel {
            /* Room above for the top half of the title tag; the page clips anything higher. */
            margin-top: 20px;
        }

        .notifications-scroll {
            padding: 32px 16px 44px;
        }

        .notifications-empty {
            margin: 0;
        }

        .notification-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .notification-item {
            position: relative;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px 14px;
            border: 1px solid rgba(240, 240, 240, 0.45);
            background: var(--bg);
            cursor: pointer;
            transition: border-color 0.2s ease, background 0.2s ease;
        }

        .notification-item:hover,
        .notification-item:focus-within {
            border-color: var(--accent);
            background: #262626;
        }

        .notification-item.is-unread {
            border-left: 3px solid var(--accent);
        }

        /* Type icon framed like the profile badges. */
        .notification-type-icon {
            display: inline-flex;
            flex: 0 0 auto;
            width: 38px;
            height: 38px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            border-radius: 50%;
            background: var(--panel);
            color: var(--accent);
            font-size: 1.25rem;
        }

        .notification-body {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }

        .notification-title {
            margin: 0;
            color: var(--text);
            font-size: 0.75rem;
            line-height: 1.6;
        }

        /* The @username sits above the card-wide link so it opens the profile instead. */
        .notification-title .post-handle {
            position: relative;
            z-index: 1;
            font-family: var(--font-plain);
            font-size: 0.85rem;
        }

        .notification-text {
            display: -webkit-box;
            margin: 0;
            overflow: hidden;
            color: var(--muted);
            font-size: 0.74rem;
            line-height: 1.6;
            overflow-wrap: anywhere;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
        }

        .notification-meta {
            margin: 0;
            color: #a9a9a9;
            font-size: 0.7rem;
            letter-spacing: 0.05em;
        }

        .notification-item.is-unread .notification-meta time {
            color: var(--accent);
        }

        /* Stretches over the whole card so clicking anywhere opens the notification. */
        .notification-open::after {
            content: "";
            position: absolute;
            inset: 0;
        }

        .notification-open:focus-visible {
            outline: none;
        }

        .notification-open:focus-visible::after {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        .notification-dot {
            flex: 0 0 auto;
            width: 8px;
            height: 8px;
            margin-top: 6px;
            background: var(--accent);
            box-shadow: 0 0 0 3px rgba(199, 182, 255, 0.2);
        }

        @media (max-width: 600px) {
            .profile-page-body {
                padding-top: 135px;
            }

            /* Lay the quick actions out in a row so they don't cover the page. */
            .profile-page-body .sidebar {
                top: 16px;
                right: 16px;
                flex-direction: row;
                gap: 10px;
            }

            .profile-page-heading {
                top: 80px;
                right: 16px;
                left: 16px;
                width: auto;
                max-width: none;
                transform: none;
            }

            .edit-actions {
                padding-right: 12px;
                padding-left: 12px;
            }

            .profile-page {
                width: calc(100vw - 32px);
            }

            .profile-identity {
                flex-wrap: wrap;
                padding-right: 12px;
                padding-left: 12px;
            }

            .profile-status-tag {
                right: 12px;
                max-width: calc(100% - 24px);
            }

            .profile-identity-main {
                flex-basis: 100%;
            }

            .profile-aside {
                width: 100%;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                padding-top: 0;
            }

            .profile-badges {
                margin-right: auto;
            }

            .profile-stats {
                flex-wrap: nowrap;
            }

        }

        /* People lists in pop-ups (followers, following, crew, permission editor). */
        .person-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .person-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 12px;
            padding: 10px 12px;
            border: 1px solid rgba(240, 240, 240, 0.35);
            background: var(--bg);
        }

        .person-avatar {
            width: 36px;
            height: 36px;
        }

        .person-text {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }

        .person-text .post-handle {
            font-family: var(--font-plain);
            font-size: 0.8rem;
        }

        /* Role tag (Owner / Staff) and permission icons on the right of a crew row. */
        .perm-role {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--muted);
            font-size: 0.72rem;
            text-transform: uppercase;
        }

        .perm-role.is-owner {
            color: var(--accent);
        }

        .perm-role .material-symbols-outlined {
            font-size: 1.1rem;
        }

        .perm-badges {
            display: inline-flex;
            gap: 4px;
        }

        .perm-badge {
            display: inline-flex;
            width: 26px;
            height: 26px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            background: var(--panel);
            color: var(--accent);
            font-size: 1rem;
        }

        .perm-none {
            color: #a9a9a9;
            text-transform: none;
        }

        /* Permission editor: one row per staff member with a switch per permission. */
        .perm-editor-row .perm-remove {
            align-self: center;
        }

        .perm-controls {
            display: grid;
            flex-basis: 100%;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 6px 12px;
            padding-top: 8px;
            border-top: 1px solid rgba(240, 240, 240, 0.2);
        }

        .perm-switch {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text);
            cursor: pointer;
            font-size: 0.72rem;
        }

        .perm-switch .material-symbols-outlined {
            color: var(--accent);
            font-size: 1.05rem;
        }

        /* Square switch in the site's style: the knob slides right and fills purple when on. */
        .perm-switch input {
            position: relative;
            flex: 0 0 auto;
            width: 34px;
            height: 18px;
            margin: 0;
            border: 1px solid var(--border);
            background: var(--panel);
            cursor: pointer;
            appearance: none;
            transition: background 0.2s ease, border-color 0.2s ease;
        }

        .perm-switch input::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            width: 12px;
            height: 12px;
            background: var(--muted);
            transition: transform 0.2s ease, background 0.2s ease;
        }

        .perm-switch input:checked {
            border-color: var(--accent);
            background: rgba(199, 182, 255, 0.25);
        }

        .perm-switch input:checked::after {
            background: var(--accent);
            transform: translateX(16px);
        }

        .perm-switch input:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        .perm-add {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding-top: 6px;
        }

        .perm-add-controls {
            display: flex;
            gap: 10px;
            padding: 0 4px 4px 0;
        }

        .perm-add-controls .edit-input {
            flex: 1;
            min-width: 0;
            font-family: var(--font-plain);
            letter-spacing: normal;
        }

        /* Log in / Create an account pages: one narrow framed form, title tag on top,
           the main button on the bottom border (right), and links underneath. */
        .profile-page.auth-page {
            width: min(460px, calc(100vw - 32px));
        }

        .auth-form {
            display: flex;
            flex-direction: column;
            /* Room above for the top half of the title tag; the page clips anything higher. */
            margin-top: 20px;
        }

        .auth-frame {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding: 34px 20px 44px;
            border: 2px solid var(--border);
            background: rgba(45, 45, 45, 0.92);
        }

        .auth-message {
            margin: 0;
            line-height: 1.6;
        }

        /* Good news (username available, reset email sent) in the accent colour. */
        .edit-error.is-success {
            color: var(--accent);
        }

        .auth-username {
            font-family: var(--font-plain);
            letter-spacing: normal;
        }

        .auth-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 10px 16px;
            margin-top: 22px;
            font-size: 0.72rem;
        }

        .auth-links a,
        .auth-link-button,
        .profile-empty-link {
            padding: 0;
            border: 0;
            background: none;
            color: var(--accent);
            cursor: pointer;
            font: inherit;
            letter-spacing: inherit;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .auth-links a:hover,
        .auth-link-button:hover,
        .profile-empty-link:hover {
            color: var(--text);
        }

        /* Website role badges (profiles) and role tags (crew lists), in soft pastels:
           Founder = accent purple, Admin = pastel red, Moderator = pastel green. */
        :root {
            --role-founder: var(--accent);
            --role-admin: #ffadb5;
            --role-moderator: #a8e6b8;
        }

        .profile-role-badge.is-founder,
        .perm-role.is-founder {
            --role-color: var(--role-founder);
        }

        .profile-role-badge.is-admin,
        .perm-role.is-admin {
            --role-color: var(--role-admin);
        }

        .profile-role-badge.is-moderator,
        .perm-role.is-moderator {
            --role-color: var(--role-moderator);
        }

        .profile-role-badge {
            border-color: var(--role-color);
            background: color-mix(in srgb, var(--role-color) 14%, var(--panel));
            color: var(--role-color);
        }

        .perm-role.is-founder,
        .perm-role.is-admin,
        .perm-role.is-moderator {
            color: var(--role-color);
        }

        /* Role editor: a role picker and "Remove" on each crew row. */
        .role-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .role-select {
            width: auto;
            padding: 6px 10px;
            cursor: pointer;
            font-size: 0.72rem;
        }

        .role-add-slot .role-select {
            height: 100%;
        }

        /* "New post" / "New announcement" button: on the same line as the section's title tag,
           at the right, half on and half off the box's top border (like the title). */
        .post-feed-actions {
            position: absolute;
            top: 0;
            right: 22px;
            z-index: 1;
            display: flex;
            margin: 0;
            padding: 0;
            transform: translateY(-50%);
        }

        .post-new-button {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-sizing: border-box;
            min-height: 34px;
            padding: 6px 12px;
            box-shadow: 3px 3px 0 var(--border);
            font-size: 0.72rem;
        }

        .post-new-button:hover,
        .post-new-button:focus-visible {
            box-shadow: 3px 3px 0 var(--accent);
        }

        /* Keep the title tag from running under the button. */
        .profile-tab-panel:has(> .post-feed-actions) > .profile-section-title {
            max-width: calc(100% - 44px - 190px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        @media (max-width: 600px) {
            .post-feed-actions {
                right: 12px;
            }

            .post-new-button {
                padding: 6px 10px;
            }

            /* Phones: the button is just the icon, so the title has room. */
            .post-new-button > span:not(.material-symbols-outlined) {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip: rect(0 0 0 0);
                white-space: nowrap;
            }

            .profile-tab-panel:has(> .post-feed-actions) > .profile-section-title {
                max-width: calc(100% - 34px - 60px);
            }
        }

        .post-new-button .material-symbols-outlined {
            font-size: 1.1rem;
        }

        textarea.post-composer-input {
            min-height: 110px;
        }

        .post-feed-status {
            margin: 0 0 12px;
        }

        .post-feed-status[hidden] {
            display: none;
        }

        /* Posted time after "@username /planet/name". */
        .post-time {
            color: #a9a9a9;
            font-size: 0.7rem;
        }

        .post-time::before {
            content: "-";
            margin-right: 3px;
        }

        /* Delete (your own post, or anyone's for moderators), top right of the post. */
        .post-header {
            position: relative;
        }

        .post-delete {
            display: inline-flex;
            width: 30px;
            height: 30px;
            margin-left: auto;
            align-self: flex-start;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 1px solid transparent;
            background: none;
            color: #a9a9a9;
            cursor: pointer;
            transition: color 0.2s ease, border-color 0.2s ease;
        }
        .post-delete.post-comments-toggle:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .post-delete .material-symbols-outlined {
            font-size: 1.15rem;
        }

        .post-delete:hover,
        .post-delete:focus-visible {
            border-color: var(--role-admin, #ffadb5);
            color: var(--role-admin, #ffadb5);
            outline: none;
        }
        .post-delete.post-pin.is-pinned:hover {
            border-color: var(--role-founder, var(--accent));
            color: var(--role-founder, var(--accent));
        }

        /* Badge tooltips: a small framed label above the badge, with an arrow pointing down at it.
           Shows on hover and on keyboard focus. Text comes from data-tooltip. */
        .badge-tooltip {
            position: relative;
            cursor: default;
        }

        .badge-tooltip::before,
        .badge-tooltip::after {
            position: absolute;
            left: 50%;
            z-index: 5;
            opacity: 0;
            pointer-events: none;
            transform: translate(-50%, 4px);
            transition: opacity 0.15s ease, transform 0.15s ease;
        }

        /* The label. The badge itself uses the icon font, so the label switches back to Orbitron. */
        .badge-tooltip::after {
            content: attr(data-tooltip);
            bottom: calc(100% + 10px);
            padding: 6px 10px;
            border: 2px solid var(--border);
            background: var(--bg);
            box-shadow: 3px 3px 0 var(--accent);
            color: var(--text);
            font-family: "Orbitron", sans-serif;
            font-size: 0.68rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            line-height: 1.3;
            text-transform: uppercase;
            white-space: nowrap;
            font-variation-settings: normal;
        }

        /* The arrow: a small square turned 45 degrees, tucked under the label's bottom border. */
        .badge-tooltip::before {
            content: "";
            bottom: calc(100% + 5px);
            width: 8px;
            height: 8px;
            border-right: 2px solid var(--border);
            border-bottom: 2px solid var(--border);
            background: var(--bg);
            transform: translate(-50%, 4px) rotate(45deg);
        }

        .badge-tooltip:hover::before,
        .badge-tooltip:hover::after,
        .badge-tooltip:focus-visible::before,
        .badge-tooltip:focus-visible::after {
            opacity: 1;
        }

        /* Hovering waits a moment before showing, so tooltips don't flash as the mouse passes by.
           (Keyboard focus shows them straight away; they always hide straight away.) */
        .badge-tooltip:hover::before,
        .badge-tooltip:hover::after {
            transition-delay: 0.45s;
        }

        .badge-tooltip:hover::after,
        .badge-tooltip:focus-visible::after {
            transform: translate(-50%, 0);
        }

        .badge-tooltip:hover::before,
        .badge-tooltip:focus-visible::before {
            transform: translate(-50%, 0) rotate(45deg);
        }

        .badge-tooltip:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        /* Profile badges sit near the right edge, so their labels line up with the badge's right
           side (the arrow stays centred on the badge) instead of spilling past the page. */
        .profile-aside .badge-tooltip::after {
            left: auto;
            right: -2px;
            transform: translate(0, 4px);
        }

        .profile-aside .badge-tooltip:hover::after,
        .profile-aside .badge-tooltip:focus-visible::after {
            transform: translate(0, 0);
        }

        /* Log out pop-up message. */
        .logout-message {
            margin: 0;
            color: var(--text);
            font-size: 0.8rem;
            line-height: 1.7;
        }

        .logout-message .post-handle {
            font-family: var(--font-plain);
            font-size: 0.9rem;
        }

        /* @username or /planet/name under a search result's title. */
        .result-handle {
            margin: 2px 0 6px;
            color: var(--accent);
            font-family: var(--font-plain);
            font-size: 0.8rem;
            letter-spacing: normal;
        }

        /* Followers / Following with the Follow button centred underneath. */
        .profile-follow-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .profile-follow-button {
            /* Every icon shares one spot and every label shares another, so the button is always
               as wide as its longest label: Follow / Following / Unfollow (and Orbit / Orbiting /
               Leave orbit) are all the same size and it never jumps around. */
            display: inline-grid;
            grid-template-columns: auto auto;
            min-width: 10.5em;
            align-items: center;
            justify-content: center;
            column-gap: 8px;
            padding: 8px 16px;
            box-shadow: 3px 3px 0 var(--border);
            font-size: 0.72rem;
        }

        .profile-follow-button[hidden] {
            display: none;
        }

        .profile-follow-button .material-symbols-outlined {
            font-size: 1.1rem;
        }

        .profile-follow-button .follow-icon,
        .profile-follow-button .follow-hover-icon {
            grid-area: 1 / 1;
            justify-self: center;
        }

        .profile-follow-button .follow-label,
        .profile-follow-button .follow-hover-label {
            grid-area: 1 / 2;
            justify-self: center;
        }

        /* An invisible copy of the longest label (data-longest), so switching labels never
           changes the width. */
        .profile-follow-button[data-longest]::after {
            content: attr(data-longest);
            grid-area: 1 / 2;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }

        /* No hover icon (Leave orbit): that label is centred across the whole button. */
        .profile-follow-button .follow-hover-icon:empty {
            display: none;
        }

        .profile-follow-button:has(.follow-hover-icon:empty) .follow-hover-label {
            grid-column: 1 / -1;
        }

        /* The Unfollow / Leave orbit icon and label only show on hover/focus while following.
           Hidden parts still take up their room, which keeps the size the same. */
        .profile-follow-button .follow-hover-icon,
        .profile-follow-button .follow-hover-label,
        .profile-follow-button.is-following:hover .follow-icon,
        .profile-follow-button.is-following:hover .follow-label,
        .profile-follow-button.is-following:focus-visible .follow-icon,
        .profile-follow-button.is-following:focus-visible .follow-label {
            visibility: hidden;
        }

        .profile-follow-button.is-following:hover .follow-hover-icon,
        .profile-follow-button.is-following:hover .follow-hover-label,
        .profile-follow-button.is-following:focus-visible .follow-hover-icon,
        .profile-follow-button.is-following:focus-visible .follow-hover-label {
            visibility: visible;
        }

        /* Following: the accent "on" look. Hovering to unfollow: soft red. */
        .profile-follow-button.is-following {
            border-color: var(--accent);
            box-shadow: 3px 3px 0 var(--accent);
            color: var(--accent);
        }

        .profile-follow-button.is-following:hover,
        .profile-follow-button.is-following:focus-visible {
            border-color: var(--role-admin);
            box-shadow: 3px 3px 0 var(--role-admin);
            color: var(--role-admin);
            outline: none;
        }

        /* Verified badge: pastel blue, framed like the role badges. */
        .profile-verified-badge {
            --verified-color: #a8d4ff;
            border-color: var(--verified-color);
            background: color-mix(in srgb, var(--verified-color) 14%, var(--panel));
            color: var(--verified-color);
            font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
        }

        /* Section heading inside the Manage roles pop-up (e.g. "Verified badge"). */
        .role-editor-subtitle {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 10px 0 0;
            padding-top: 16px;
            border-top: 1px solid rgba(240, 240, 240, 0.2);
            color: #a8d4ff;
            font-size: 0.8rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .role-editor-subtitle .material-symbols-outlined {
            font-size: 1.2rem;
            font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
        }

        /* Sidebar button tooltips: the button's name in a framed label to its left, with an arrow
           pointing at the button. Uses the aria-label, so e.g. "Notifications (2 unread)" updates
           itself. Waits a moment on hover, like the badge tooltips. */
        .sidebar .icon-button {
            position: relative;
        }

        .sidebar .icon-button::before,
        .sidebar .icon-button::after {
            position: absolute;
            top: 50%;
            z-index: 5;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s ease, transform 0.15s ease;
        }

        .sidebar .icon-button::after {
            content: attr(aria-label);
            right: calc(100% + 12px);
            padding: 6px 10px;
            border: 2px solid var(--border);
            border-radius: 0;
            background: var(--bg);
            box-shadow: 3px 3px 0 var(--accent);
            color: var(--text);
            font-family: "Orbitron", sans-serif;
            font-size: 0.68rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            line-height: 1.3;
            text-transform: uppercase;
            white-space: nowrap;
            transform: translate(4px, -50%);
        }

        /* The arrow: a small square turned 45 degrees, tucked under the label's right border. */
        .sidebar .icon-button::before {
            content: "";
            right: calc(100% + 7px);
            width: 8px;
            height: 8px;
            border-top: 2px solid var(--border);
            border-right: 2px solid var(--border);
            background: var(--bg);
            transform: translate(4px, -50%) rotate(45deg);
        }

        .sidebar .icon-button:hover::before,
        .sidebar .icon-button:hover::after,
        .sidebar .icon-button:focus-visible::before,
        .sidebar .icon-button:focus-visible::after {
            opacity: 1;
        }

        .sidebar .icon-button:hover::before,
        .sidebar .icon-button:hover::after {
            transition-delay: 0.45s;
        }

        .sidebar .icon-button:hover::after,
        .sidebar .icon-button:focus-visible::after {
            transform: translate(0, -50%);
        }

        .sidebar .icon-button:hover::before,
        .sidebar .icon-button:focus-visible::before {
            transform: translate(0, -50%) rotate(45deg);
        }

        /* Touch screens have no hover, and on phones the buttons sit in a row at the top. */
        @media (hover: none), (max-width: 600px) {
            .sidebar .icon-button::before,
            .sidebar .icon-button::after {
                display: none;
            }
        }

        /* Manage roles pop-up: a little wider, with tabs (same look as the page tabs) inside. */
        .post-dialog.role-editor-dialog {
            width: min(600px, calc(100vw - 32px));
        }

        .dialog-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 0 4px 4px 0;
        }

        .dialog-tabs .profile-tab {
            padding: 8px 12px;
            font-size: 0.7rem;
        }

        .dialog-tab-panel {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .dialog-tab-panel[hidden] {
            display: none;
        }

        .role-search-input {
            font-family: var(--font-plain);
            letter-spacing: normal;
        }

        .role-search-results:empty {
            display: none;
        }

        /* The astronaut picked on the Find tab: role picker and Verified switch. */
        .role-picked-card {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .role-picked-title {
            margin-top: 4px;
        }

        .role-picked-controls {
            flex-wrap: wrap;
            gap: 10px 16px;
        }

        .verified-switch-icon {
            color: #a8d4ff !important;
            font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
        }

        /* Small ourSpaceShip logo in the top-left corner (links home). The banner image has a lot
           of empty space around the logo, so it's shown larger and cropped to just the logo. */
        .site-logo {
            position: fixed;
            top: 14px;
            left: 16px;
            z-index: 3;
            display: block;
            width: 160px;
            height: 44px;
            overflow: hidden;
            transition: filter 0.2s ease, transform 0.2s ease;
        }

        .site-logo img {
            display: block;
            width: 240px;
            height: 80px;
            margin: -18px 0 0 -40px;
        }

        .site-logo:hover,
        .site-logo:focus-visible {
            outline: none;
        }

        @media (max-width: 600px) {
            .site-logo {
                transform: scale(0.8);
                transform-origin: top left;
            }

            .site-logo:hover,
            .site-logo:focus-visible {
                transform: scale(0.8);
            }
        }

        /* Small edit icon on a stat chip you can manage (e.g. Crew). */
        .profile-stat-button:has(.stat-edit-icon) {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .stat-edit-icon {
            color: var(--accent);
            font-size: 0.95rem;
        }

        /* People lists in pop-ups: a search box on top, then up to 5 people. */
        .people-search {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .people-search-input {
            padding: 9px 12px;
            font-family: var(--font-plain);
            letter-spacing: normal;
        }

        .people-search-input:disabled {
            opacity: 0.5;
        }

        /* Planet owner star next to a post author's name (and the "Owner" tag in crew lists): soft gold. */
        .post-author-row {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .post-owner-badge {
            color: #ffe3a3;
            /* Material Icons Sharp "star" (a filled, sharp star). */
            font-size: 1rem;
        }

        /* Tooltips that open to the right (where there's no room above, e.g. at the top of a feed). */
        .badge-tooltip.tooltip-right::after {
            top: 50%;
            right: auto;
            bottom: auto;
            left: calc(100% + 10px);
            transform: translate(-4px, -50%);
        }

        .badge-tooltip.tooltip-right::before {
            top: 50%;
            bottom: auto;
            left: calc(100% + 5px);
            border: 0;
            border-bottom: 2px solid var(--border);
            border-left: 2px solid var(--border);
            transform: translate(-4px, -50%) rotate(45deg);
        }

        .badge-tooltip.tooltip-right:hover::after,
        .badge-tooltip.tooltip-right:focus-visible::after {
            transform: translate(0, -50%);
        }

        .badge-tooltip.tooltip-right:hover::before,
        .badge-tooltip.tooltip-right:focus-visible::before {
            transform: translate(0, -50%) rotate(45deg);
        }

        /* "Owner" tag in planet crew lists uses the same gold. */
        .perm-role.is-owner {
            color: #ffe3a3;
        }

        .perm-role.is-owner .owner-star {
            font-size: 1.1rem;
        }

        /* Delete post pop-up. */
        .delete-post-message {
            margin: 0;
            color: var(--text);
            font-size: 0.8rem;
            line-height: 1.7;
        }

        /* A button for something that can't be undone: soft red, like "Unfollow". */
        .space-button.danger-button {
            border-color: var(--role-admin);
            box-shadow: 3px 3px 0 var(--role-admin);
            color: var(--role-admin);
        }

        .space-button.danger-button:hover,
        .space-button.danger-button:focus-visible {
            background: color-mix(in srgb, var(--role-admin) 12%, var(--panel));
            box-shadow: 2px 2px 0 var(--role-admin);
            outline: none;
        }

        /* Shown under search results when part of the search couldn't be reached. */
        .search-problem {
            color: var(--role-admin);
        }

        /* Delete on a comment: a small bin on the right; first click turns it into a red "Delete?". */
        .post-reply-text {
            flex: 1;
            min-width: 0;
        }

        .comment-delete {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-left: auto;
            padding: 2px 4px;
            border: 1px solid transparent;
            background: none;
            color: #a9a9a9;
            cursor: pointer;
            font-family: "Orbitron", sans-serif;
            font-size: 0.65rem;
            text-transform: uppercase;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .comment-delete .material-symbols-outlined {
            font-size: 1rem;
        }

        .comment-delete-label {
            display: none;
        }

        .comment-delete:hover,
        .comment-delete:focus-visible,
        .comment-delete.is-armed {
            border-color: var(--role-admin);
            color: var(--role-admin);
            outline: none;
        }

        .comment-delete.is-armed .comment-delete-label {
            display: inline;
        }

        /* Text can't be selected by accident (double-clicking buttons, tabs, names, labels...).
           What people type, and what people write (posts, comments, bios, statuses, previews),
           can still be selected and copied. */
        body {
            -webkit-user-select: none;
            user-select: none;
        }

        input,
        textarea,
        [contenteditable],
        .post-text,
        .post-reply-text,
        .post-dialog-quote p,
        .profile-bio,
        .profile-status-text,
        .notification-text,
        .result-description,
        /* @usernames and planet handles (/planet/name), so they can be copied. */
        .profile-handle,
        .post-handle,
        .post-reply-author,
        .profile-chip-link,
        .result-handle,
        .planet-handle,
        .rank-url,
        .rank-owner {
            -webkit-user-select: text;
            user-select: text;
        }

        /* ---- Top 10 Most Orbited Planets ---- */
        .rankings-page > .profile-tab-panel {
            /* Room above for the top half of the title tag; the page clips anything higher. */
            margin-top: 20px;
        }

        .rankings-scroll {
            padding: 32px 16px 20px;
        }

        .rankings-status {
            margin: 0;
        }

        .rankings-status[hidden] {
            display: none;
        }

        .rankings-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .rank-item {
            --rank-color: var(--muted);
            position: relative;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 14px;
            border: 1px solid rgba(240, 240, 240, 0.45);
            background: var(--bg);
            cursor: pointer;
            transition: border-color 0.2s ease, background 0.2s ease;
        }

        .rank-item:hover,
        .rank-item:focus-within {
            border-color: var(--rank-color);
            background: #262626;
        }

        /* Gold, silver and bronze (soft pastels) for the top three. */
        .rank-item.is-top-1 { --rank-color: #ffe3a3; }
        .rank-item.is-top-2 { --rank-color: #d8dde6; }
        .rank-item.is-top-3 { --rank-color: #f2c4a0; }

        /* Below the top three there's no rank color, so hovering shows the site's lavender. */
        .rank-item:not([class*="is-top-"]):hover,
        .rank-item:not([class*="is-top-"]):focus-within {
            border-color: var(--accent);
        }

        /* The top three glow in their color from the left edge, fading out by 15%. */
        .rank-item[class*="is-top-"] {
            background: linear-gradient(90deg, color-mix(in srgb, var(--rank-color) 22%, transparent) 0%, transparent 15%), var(--bg);
        }

        .rank-item[class*="is-top-"]:hover,
        .rank-item[class*="is-top-"]:focus-within {
            background: linear-gradient(90deg, color-mix(in srgb, var(--rank-color) 28%, transparent) 0%, transparent 15%), #262626;
        }

        .rank-number {
            flex: 0 0 auto;
            min-width: 2.6em;
            color: var(--rank-color);
            font-size: 1.1rem;
            font-weight: 800;
            text-align: center;
        }

        .rank-avatar {
            flex: 0 0 auto;
            width: 48px;
            height: 48px;
            box-sizing: border-box;
            border: 1px solid var(--border);
            background: var(--panel);
            object-fit: cover;
        }

        .rank-body {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
        }

        .rank-name {
            color: var(--text);
            font-size: 0.85rem;
            font-weight: 700;
            overflow-wrap: anywhere;
        }

        .rank-handles {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 2px 6px;
            font-family: var(--font-plain);
            font-size: 0.78rem;
            letter-spacing: normal;
        }

        .rank-url {
            color: var(--accent);
        }

        .rank-by {
            color: #a9a9a9;
        }

        /* The owner link sits above the card-wide link so it opens their profile. */
        .rank-owner {
            position: relative;
            z-index: 1;
        }

        .rank-bio {
            display: -webkit-box;
            margin: 2px 0 0;
            overflow: hidden;
            color: var(--muted);
            font-size: 0.7rem;
            line-height: 1.5;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            line-clamp: 1;
        }

        .rank-orbiters {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border: 1px solid var(--rank-color);
            background: var(--panel);
            color: var(--text);
            font-size: 0.7rem;
            text-transform: uppercase;
        }

        .rank-orbiters .material-symbols-outlined {
            color: var(--accent);
            font-size: 1.05rem;
        }

        /* Stretches over the whole card so clicking anywhere opens the planet. */
        .rank-open::after {
            content: "";
            position: absolute;
            inset: 0;
        }

        .rank-open:focus-visible {
            outline: none;
        }

        .rank-open:focus-visible::after {
            outline: 2px solid var(--rank-color);
            outline-offset: 2px;
        }

        @media (max-width: 600px) {
            .rank-item {
                flex-wrap: wrap;
            }

            .rank-orbiters {
                margin-left: auto;
            }
        }

        /* ---- Planet and Moon Base identity (separate from profiles so they can differ) ----
           The picture has its /planet/ handle underneath; the name sits beside the picture. */
        .planet-avatar-column {
            display: flex;
            flex: 0 0 auto;
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
            max-width: 220px;
        }

        .planet-avatar {
            display: flex;
            width: 84px;
            height: 84px;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--border);
            background: var(--panel);
            color: var(--accent);
            object-fit: cover;
        }

        .planet-avatar-placeholder {
            font-size: 2.5rem;
        }

        .planet-handle {
            margin: 0;
            color: var(--accent);
            font-family: var(--font-plain);
            font-size: 0.85rem;
            letter-spacing: normal;
            overflow-wrap: anywhere;
        }

        /* /planet/name above the banner, on the left. */
        .planet-handle-top {
            margin: 0 0 8px 2px;
        }

        /* The handle line already leaves room for a tag on the banner's top edge (Moon Base). */
        .planet-handle-top + .profile-banner:has(> .profile-status-tag:not([hidden])) {
            margin-top: 0;
        }

        .planet-name {
            font-weight: 600;
            margin: 42px 0 4px;
            color: var(--accent);
            font-size: clamp(1rem, 2.2vw, 1.2rem);
            text-transform: uppercase;
            overflow-wrap: anywhere;
        }

        .planet-stats {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            margin: 0;
        }

        .planet-stat {
            padding: 8px 10px;
            border: 1px solid var(--border);
            background: var(--panel);
            color: var(--text);
            font-size: 0.72rem;
            text-transform: uppercase;
        }

        .planet-stat-button {
            font-family: "Orbitron", sans-serif;
            letter-spacing: 0.04em;
            cursor: pointer;
            transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
        }

        .planet-stat-button:hover,
        .planet-stat-button:focus-visible {
            border-color: var(--accent);
            background: var(--panel-hover);
            color: var(--accent);
            outline: none;
        }

        .planet-stat-button:has(.stat-edit-icon) {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        /* ---- Bans ---- */
        /* Banned astronauts' names, in soft red. */
        .banned-name,
        .profile-name.banned-name,
        .profile-handle.banned-name,
        .post-handle.banned-name {
            color: var(--role-admin) !important;
        }

        .profile-banned-badge {
            border-color: var(--role-admin);
            background: color-mix(in srgb, var(--role-admin) 14%, var(--panel));
            color: var(--role-admin);
        }

        /* Shown at the bottom of every page to a banned astronaut. */
        .ban-notice {
            position: fixed;
            bottom: 70px;
            left: 50%;
            z-index: 4;
            width: min(640px, calc(100vw - 32px));
            box-sizing: border-box;
            margin: 0;
            padding: 10px 14px;
            border: 2px solid var(--role-admin);
            background: var(--bg);
            box-shadow: 3px 3px 0 var(--role-admin);
            color: var(--text);
            font-size: 0.72rem;
            line-height: 1.6;
            text-align: center;
            transform: translateX(-50%);
        }

        /* Banned list in Manage roles. */
        .banned-controls {
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .banned-until,
        .banned-by {
            color: var(--muted);
            font-size: 0.65rem;
        }

        .role-ban-row {
            display: flex;
            justify-content: flex-end;
            padding: 0 4px 4px 0;
        }

        /* ---- Reports ---- */
        /* The flag sits before the bin in a post's header. */
        .post-report + .post-delete {
            margin-left: 0;
        }

        .post-report:hover,
        .post-report:focus-visible {
            border-color: #ffd27a;
            color: #ffd27a;
        }

        .report-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .report-item {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 12px;
            border: 1px solid rgba(240, 240, 240, 0.35);
            border-left: 3px solid var(--role-admin);
            background: var(--bg);
        }

        .report-head {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px 10px;
            font-size: 0.68rem;
            text-transform: uppercase;
        }

        .report-kind {
            padding: 2px 6px;
            border: 1px solid var(--border);
            color: var(--text);
        }

        .report-reason {
            color: var(--role-admin);
        }

        .report-time {
            margin-left: auto;
            color: #a9a9a9;
            text-transform: none;
        }

        .report-who,
        .report-details {
            margin: 0;
            color: var(--text);
            font-size: 0.72rem;
            line-height: 1.6;
        }

        .report-who .post-handle {
            font-family: var(--font-plain);
            font-size: 0.8rem;
        }

        .report-details {
            color: var(--muted);
            user-select: text;
        }

        .report-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 8px;
            padding: 0 4px 4px 0;
        }

        /* ---- Delete account (Edit profile) ---- */
        .danger-zone {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            margin-top: 8px;
            padding: 14px;
            border: 1px solid var(--role-admin);
            /* Room for the button's offset shadow. */
            padding-bottom: 18px;
        }

        .danger-zone .profile-muted {
            margin: 0;
        }

        .danger-zone-title {
            margin: 0;
            color: var(--role-admin);
            font-size: 0.8rem;
            text-transform: uppercase;
        }

        /* ---- Email & password (edit profile) ---- */
        .account-zone {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            margin-top: 8px;
            padding: 14px 14px 18px;
            border: 1px solid rgba(240, 240, 240, 0.45);
        }

        .account-zone-title {
            margin: 0;
            color: var(--accent);
            font-size: 0.8rem;
            text-transform: uppercase;
        }

        .account-email {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 10px;
            margin: 0;
            color: var(--text);
            font-size: 0.78rem;
        }

        .account-email-address {
            font-family: var(--font-plain);
            letter-spacing: normal;
            word-spacing: normal;
            overflow-wrap: anywhere;
            -webkit-user-select: text;
            user-select: text;
        }

        .account-email-badge {
            padding: 3px 8px;
            border: 1px solid #f2c4a0;
            color: #f2c4a0;
            font-size: 0.62rem;
            text-transform: uppercase;
        }

        .account-email-badge.is-verified {
            border-color: var(--role-moderator);
            color: var(--role-moderator);
        }

        .account-note,
        .auth-note {
            margin: 0;
            font-size: 0.68rem;
            line-height: 1.6;
        }

        .auth-note {
            margin-top: 8px;
        }

        .account-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 4px;
        }

        .account-status {
            margin: 0;
        }

        .auth-action-text {
            margin: 0;
            color: var(--text);
            font-size: 0.8rem;
            line-height: 1.7;
        }

        /* ---- Privacy policy ---- */
        .privacy-page > .profile-tab-panel {
            margin-top: 20px;
        }

        .privacy-scroll {
            padding: 32px 22px 24px;
            color: var(--text);
            font-size: 0.75rem;
            line-height: 1.8;
            user-select: text;
        }

        .privacy-scroll h3 {
            margin: 22px 0 6px;
            color: var(--accent);
            font-size: 0.8rem;
            text-transform: uppercase;
        }

        .privacy-scroll p,
        .privacy-scroll ul {
            margin: 0 0 10px;
        }

        .privacy-scroll ul {
            padding-left: 18px;
        }

        .privacy-scroll li {
            margin-bottom: 8px;
        }

        .privacy-updated {
            color: #a9a9a9;
        }

        .privacy-link {
            color: var(--accent);
        }


        .search-result.is-banned .result-title,
        .search-result.is-banned .result-handle {
            color: var(--role-admin);
        }

        /* Planets and Moon Base: the Orbit button (and notifications switch) sit in the badge spot,
           straddling the banner's bottom edge. The button is badge height there. */
        .planet-badges .profile-follow-button {
            min-height: 38px;
            box-sizing: border-box;
            padding: 6px 14px;
            box-shadow: 3px 3px 0 var(--border);
            font-size: 0.7rem;
        }

        .planet-badges .profile-follow-button:hover,
        .planet-badges .profile-follow-button:focus-visible {
            box-shadow: 3px 3px 0 var(--accent);
        }

        /* ---- Phones ----
           Quick actions in a row at the top on every page, nothing running off the right edge,
           and long titles shrunk to fit. */
        @media (max-width: 600px) {
            .sidebar {
                top: 16px;
                right: 16px;
                flex-direction: row;
                gap: 10px;
            }

            .icon-button {
                width: 42px;
                height: 42px;
            }

            /* Home: keep "our SPACE ship" on one line, and the menu buttons tidy. */
            .header {
                top: 100px;
                width: max-content;
                font-size: 1.9rem;
                white-space: nowrap;
            }

            .button-stack {
                width: calc(100vw - 40px);
            }

            .button-stack .space-button {
                display: grid;
                grid-template-columns: 1fr auto;
                column-gap: 12px;
                row-gap: 4px;
                padding: 14px 16px;
                font-size: 0.9rem;
            }

            .button-stack .space-button .label {
                grid-column: 1;
            }

            .button-stack .space-button .subtext {
                grid-column: 1;
                grid-row: 2;
            }

            .button-stack .space-button .arrow-wrap {
                grid-column: 2;
                grid-row: 1 / span 2;
            }

            /* Search: smaller title under the buttons, full-width search box. */
            .header.search-title {
                top: 78px;
                width: calc(100vw - 32px);
                font-size: 1.2rem;
                white-space: normal;
            }

            .search-page {
                top: 130px;
                width: calc(100vw - 32px);
            }

            .search-results {
                max-height: calc(100vh - 290px);
                max-height: calc(100dvh - 290px);
            }

            .search-form {
                flex-direction: column;
                align-items: stretch;
            }

            .search-submit {
                justify-content: center;
            }

            /* Profiles: badges and stats share a row and wrap instead of running off the edge. */
            .profile-aside {
                flex-wrap: wrap;
                gap: 10px;
            }

            .profile-stats,
            .planet-stats {
                flex: 1 1 auto;
                flex-wrap: wrap;
                justify-content: flex-end;
                gap: 8px;
            }

            .profile-stat,
            .profile-chip,
            .planet-chip,
            .planet-stat {
                padding: 7px 8px;
                font-size: 0.66rem;
            }

            .profile-tabs {
                flex-wrap: wrap;
                row-gap: 12px;
                margin-right: 4px;
                margin-left: 4px;
            }

            .profile-tab {
                padding-right: 12px;
                padding-left: 12px;
                font-size: 0.75rem;
            }

            /* Profile badges stay where they are on a computer: straddling the banner's bottom
               edge on the right. Followers / Following / Visits and Follow sit in the middle. */
            .profile-identity > .profile-aside > .profile-badges {
                position: absolute;
                top: 20px;
                right: 12px;
                min-height: 0;
                margin: 0;
            }

            .profile-identity > .profile-aside {
                justify-content: center;
            }

            /* Long names wrap before reaching the badges. */
            .profile-identity:has(.profile-badge-icon) .profile-identity-details {
                padding-right: 96px;
            }

            .profile-follow-group {
                flex: 1 1 100%;
            }

            .profile-follow-group .profile-stats {
                flex: 0 1 auto;
                justify-content: center;
            }

            /* Top 10: name and links get a proper width; orbiters drop to their own line. */
            .rank-item {
                gap: 10px;
                padding: 10px;
            }

            .rank-number {
                min-width: 2em;
                font-size: 0.95rem;
            }

            .rank-avatar {
                width: 40px;
                height: 40px;
            }

            .rank-body {
                flex: 1 1 150px;
            }

            .rank-orbiters {
                margin-left: auto;
            }

            .site-footer {
                padding: 14px 18px 16px;
            }
        }

        /* Small phones: shrink the logo and buttons so they don't touch. */
        @media (max-width: 360px) {
            .site-logo,
            .site-logo:hover,
            .site-logo:focus-visible {
                transform: scale(0.65);
            }

            .sidebar {
                gap: 8px;
            }

            .icon-button {
                width: 38px;
                height: 38px;
            }

            .header {
                font-size: 1.6rem;
            }
        }

        /* Phones: smaller profile, planet and Moon Base pictures (still straddling the banner's
           bottom edge), with the badges and names moved to match. */
        @media (max-width: 600px) {
            .profile-avatar,
            .planet-avatar {
                width: 68px;
                height: 68px;
            }

            .profile-avatar-placeholder {
                font-size: 2rem;
            }

            .profile-identity {
                margin-top: -34px;
            }

            .profile-identity-main .profile-name,
            .planet-name {
                margin-top: 34px;
            }

            .profile-identity > .profile-aside > .profile-badges {
                top: 15px;
            }
        }

        /* Phones: Followers / Following / Visits (and Crew / Orbiters on planets) move up to the
           left, right under the picture and name, above the bio. The Follow button stays centred
           underneath. (display: contents lets the parts from both columns line up in one list.) */
        @media (max-width: 600px) {
            .profile-identity {
                flex-wrap: wrap;
                align-items: flex-start;
                gap: 12px 16px;
            }

            .profile-identity-main,
            .profile-identity > .profile-aside,
            .profile-identity .profile-follow-group {
                display: contents;
            }

            .profile-identity .profile-stats,
            .profile-identity .planet-stats,
            .profile-identity .profile-follow-group .profile-stats {
                order: 1;
                flex: 1 1 100%;
                justify-content: flex-start;
            }

            .profile-identity .profile-bio {
                order: 2;
                flex: 1 1 100%;
                margin-top: 0;
            }

            .profile-identity .profile-follow-group > .profile-follow-button {
                order: 3;
                margin: 0 auto;
            }
        }

        /* Phones: less space between the page name and the banner. */
        @media (max-width: 600px) {
            .profile-page-body {
                padding-top: 116px;
            }
        }

        /* Follow button in the profile tab row: the label sits right next to its icon. */
        .profile-tabs > .profile-follow-button .follow-label,
        .profile-tabs > .profile-follow-button .follow-hover-label {
            justify-self: start;
        }



        /* Phones: keep only as much room beside the name as the badges really need. */
        @media (max-width: 600px) {
            .profile-identity:has(.profile-badge-icon) .profile-identity-details {
                padding-right: 46px;
            }

            .profile-identity:has(.profile-badge-icon ~ .profile-badge-icon) .profile-identity-details {
                padding-right: 94px;
            }

            .profile-identity:has(.profile-badge-icon ~ .profile-badge-icon ~ .profile-badge-icon) .profile-identity-details {
                padding-right: 142px;
            }
        }

        /* Phones: the Follow button keeps its words and moves to the line under the tabs when
           there isn't room beside them. */
        @media (max-width: 600px) {
            .profile-tabs:has(> .profile-follow-button) {
                row-gap: 12px;
            }



            .profile-tabs > .profile-follow-button {
                min-width: 0;
                margin-left: 0;
                column-gap: 5px;
            }

            .profile-tabs > .profile-follow-button .material-symbols-outlined {
                font-size: 1rem;
            }
        }

        /* "Follows you" tag beside the @username. */
        .profile-follows-you {
            display: inline-block;
            margin-left: 8px;
            padding: 2px 7px;
            border: 1px solid rgba(240, 240, 240, 0.45);
            background: var(--panel);
            color: var(--muted);
            font-family: "Orbitron", sans-serif;
            font-size: 0.58rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            vertical-align: 2px;
            -webkit-user-select: none;
            user-select: none;
        }

        .profile-follows-you[hidden] {
            display: none;
        }

        /* ---- Username colors ----
           Every @username is white unless its astronaut picked a color (--name-color, set by
           user/users.js). Banned astronauts stay red. */
        .username:not(.banned-name) {
            color: var(--name-color, var(--text)) !important;
        }

        /* Username color swatches (Edit profile). */
        .name-color-swatches {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 4px 0 6px;
        }

        .name-color-swatch {
            width: 30px;
            height: 30px;
            padding: 0;
            border: 2px solid var(--panel);
            outline: 1px solid rgba(240, 240, 240, 0.35);
            background: var(--swatch);
            cursor: pointer;
            transition: transform 0.15s ease, outline-color 0.15s ease;
        }

        .name-color-swatch:hover {
            transform: translateY(-2px);
        }

        .name-color-swatch.is-selected {
            outline: 2px solid var(--text);
            outline-offset: 2px;
        }

        .name-color-swatch:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        /* "You've been banned" pop-up (only the banned astronaut sees it). */
        .ban-prompt-dialog .post-dialog-frame {
            border-color: var(--role-admin);
        }

        .ban-prompt-dialog .post-dialog-title {
            border-color: var(--role-admin);
            color: var(--role-admin);
        }

        .ban-prompt-dialog .post-dialog-body {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .ban-prompt-note {
            margin: 0;
            font-size: 0.72rem;
            line-height: 1.6;
        }

        /* "You've been banned" pop-up (only the banned astronaut sees it). */
        .ban-prompt-dialog .post-dialog-frame {
            border-color: var(--role-admin);
        }

        .ban-prompt-dialog .post-dialog-title {
            border-color: var(--role-admin);
            color: var(--role-admin);
        }

        .ban-prompt-dialog .post-dialog-body {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .ban-prompt-note {
            margin: 0;
            font-size: 0.72rem;
            line-height: 1.6;
        }

        /* Ban notice: text with an X on the right to close it. */
        .ban-notice {
            display: flex;
            align-items: center;
            gap: 10px;
            padding-right: 8px;
            text-align: left;
        }

        .ban-notice-text {
            flex: 1;
            margin: 0;
        }

        .ban-notice-close {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            padding: 0;
            border: 1px solid var(--role-admin);
            background: var(--panel);
            color: var(--role-admin);
            cursor: pointer;
        }

        .ban-notice-close:hover,
        .ban-notice-close:focus-visible {
            background: var(--panel-hover);
            outline: none;
        }

        .ban-notice-close .material-symbols-outlined {
            font-size: 1.1rem;
        }

        /* Profile Follow button (in the tab row): icon and word centred together. The button has a
           fixed width that fits the longest state ("✓ Following"), so it never changes size. */
        .profile-tabs > .profile-follow-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-width: 150px;
        }

        .profile-tabs > .profile-follow-button::after {
            display: none;
        }

        .profile-tabs > .profile-follow-button .follow-hover-icon,
        .profile-tabs > .profile-follow-button .follow-hover-label,
        .profile-tabs > .profile-follow-button.is-following:hover .follow-icon,
        .profile-tabs > .profile-follow-button.is-following:hover .follow-label,
        .profile-tabs > .profile-follow-button.is-following:focus-visible .follow-icon,
        .profile-tabs > .profile-follow-button.is-following:focus-visible .follow-label {
            display: none;
        }

        .profile-tabs > .profile-follow-button.is-following:hover .follow-hover-icon,
        .profile-tabs > .profile-follow-button.is-following:hover .follow-hover-label,
        .profile-tabs > .profile-follow-button.is-following:focus-visible .follow-hover-icon,
        .profile-tabs > .profile-follow-button.is-following:focus-visible .follow-hover-label {
            display: inline;
            visibility: visible;
        }

        /* ---- Pictures in posts ---- */
        .post-image-button {
            display: block;
            width: 100%;
            margin: 10px 0 4px;
            padding: 0;
            border: 1px solid rgba(240, 240, 240, 0.35);
            background: var(--bg);
            cursor: zoom-in;
        }

        .post-image-button:hover,
        .post-image-button:focus-visible {
            border-color: var(--accent);
            outline: none;
        }

        .post-image {
            display: block;
            width: 100%;
            max-height: 420px;
            object-fit: cover;
        }

        /* New post pop-up: "Add picture" and the preview. */
        .post-picture-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0 4px 4px 0;
        }

        .post-picture-choose {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .post-picture-choose .material-symbols-outlined {
            font-size: 1.1rem;
        }

        .post-picture-preview {
            display: flex;
            align-items: flex-end;
            gap: 12px;
        }

        .post-picture-preview[hidden] {
            display: none;
        }

        .post-picture-preview-image {
            max-width: min(240px, 60%);
            max-height: 160px;
            border: 1px solid rgba(240, 240, 240, 0.45);
            object-fit: contain;
        }

        /* The whole picture. */
        .post-dialog.picture-dialog {
            width: min(960px, calc(100vw - 32px));
        }

        .picture-dialog-image {
            display: block;
            max-width: 100%;
            max-height: calc(100vh - 180px);
            max-height: calc(100dvh - 180px);
            margin: 0 auto;
            object-fit: contain;
        }

        /* Hidden on your own profile (and for banned astronauts). */
        .profile-tabs > .profile-follow-button[hidden] {
            display: none;
        }

        /* Phones: Follow keeps its + icon, but Following and Unfollow are just words (no check or
           X), and the button is a little narrower. */
        @media (max-width: 600px) {
            .profile-tabs > .profile-follow-button {
                min-width: 96px;
                padding-right: 9px;
                padding-left: 9px;
            }

            .profile-tabs > .profile-follow-button.is-following .follow-icon,
            .profile-tabs > .profile-follow-button.is-following:hover .follow-hover-icon,
            .profile-tabs > .profile-follow-button.is-following:focus-visible .follow-hover-icon {
                display: none;
            }
        }

        /* ---- Pinned posts and editing ---- */
        /* Header buttons (pin, edit, report, delete) sit together on the right. */
        .post-header > .post-delete ~ .post-delete {
            margin-left: 0;
        }

        .post-pin.is-pinned {
            color: var(--accent);
        }

        .post-pin.is-pinned .material-symbols-outlined {
            font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
        }

        .post-pinned-tag {
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 0 0 8px;
            color: var(--accent);
            font-size: 0.62rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .post-pinned-tag .material-symbols-outlined {
            font-size: 0.95rem;
            font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
            transform: rotate(35deg);
        }

        .post-edited {
            color: #a9a9a9;
            font-family: var(--font-plain);
            font-size: 0.72rem;
            letter-spacing: normal;
        }

        /* Web addresses in posts, comments and bios. */
        .text-link {
            color: var(--accent);
            font-family: var(--font-plain);
            letter-spacing: normal;
            word-spacing: normal;
            text-decoration: underline;
            text-underline-offset: 2px;
            overflow-wrap: anywhere;
            cursor: pointer;
        }

        .text-link:hover,
        .text-link:focus-visible {
            color: var(--text);
            outline: none;
        }

        /* ---- Post pop-up: click a post to see it big ---- */
        .profile-post.is-openable {
            cursor: pointer;
        }

        .profile-post.is-openable:hover {
            border-color: rgba(199, 182, 255, 0.6);
        }

        .profile-post.is-openable:focus-visible {
            border-color: var(--accent);
            outline: none;
        }

        .post-view-placeholder {
            margin-top: 30px;
            border: 1px dashed rgba(240, 240, 240, 0.2);
        }

        .post-view-placeholder:first-child {
            margin-top: 0;
        }

        .post-dialog.post-view-dialog {
            width: min(760px, calc(100vw - 32px));
        }

        .post-view-dialog .post-dialog-body {
            max-height: calc(100vh - 160px);
            max-height: calc(100dvh - 160px);
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--accent) var(--bg);
        }

        .post-view-dialog .profile-post {
            margin-top: 0;
            cursor: default;
        }

        .post-view-dialog .profile-post:hover {
            border-color: rgba(240, 240, 240, 0.45);
        }

        .post-view-dialog .post-text {
            font-size: 0.9rem;
            line-height: 1.75;
        }

        /* The whole picture, not trimmed. */
        .post-view-dialog .post-image {
            max-height: none;
            object-fit: contain;
        }

        /* ---- Share pop-up ---- */
        .share-link-input {
            font-family: var(--font-plain);
            font-size: 0.8rem;
            letter-spacing: normal;
            -webkit-user-select: all;
            user-select: all;
        }

        .share-dialog .post-dialog-actions .space-button {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .share-dialog .post-dialog-actions .material-symbols-outlined {
            font-size: 1.1rem;
        }

        .share-profile-button.is-active {
            border-color: var(--accent);
            box-shadow: 4px 4px 0 var(--accent);
            color: var(--accent);
        }

        .share-status {
            margin: 0;
        }

        @media (max-width: 600px) {
            .share-dialog .post-dialog-actions .space-button {
                padding: 10px 12px;
                font-size: 0.72rem;
            }
        }

        /* "Pinned" tag on the post's top-left corner, half on and half off the border. */
        .post-pinned-tag {
            position: absolute;
            top: 0;
            left: 14px;
            z-index: 1;
            margin: 0;
            padding: 4px 9px 4px 7px;
            border: 1px solid var(--accent);
            background: var(--panel);
            transform: translateY(-50%);
        }

        /* A pinned post (always first) gets room above it, so its tag clears the section's
           title tag on the box's top border. */
        .profile-post:has(.post-pinned-tag) {
            margin-top: 26px;
        }

        .post-view-dialog .profile-post:has(.post-pinned-tag) {
            margin-top: 12px;
        }

        /* Scrolling posts (and their Pinned tags) slide under the title tag and New post button
           on the box's top border, never over them. */
        .post-pinned-tag {
            z-index: auto;
        }

        .profile-tab-panel > .profile-section-title,
        .profile-tab-panel > .post-feed-actions {
            z-index: 3;
        }

        /* Edit button: soft green on hover (delete stays red). */
        .post-delete.post-edit:hover,
        .post-delete.post-edit:focus-visible {
            border-color: var(--role-moderator);
            color: var(--role-moderator);
        }

        /* Logo (ourSpaceShipBanner2.png): the whole picture, scaled to fit. It has hardly any
           empty space around it, so no cropping is needed. */
        .site-logo {
            width: 170px;
            height: auto;
            overflow: visible;
        }

        .site-logo img {
            width: 100%;
            height: auto;
            margin: 0;
        }

        /* Moon Base banner: the whole logo, smaller and a little above centre, so the picture and
           buttons on the banner's bottom edge don't cover "A Space for YOU". */
        .profile-banner.moonbase-banner {
            background-position: center 38%;
            background-repeat: no-repeat;
            background-size: auto 62%;
        }

        /* ---- Home page ---- */
        /* "A Space for YOU" under the big title. */
        .header-tagline {
            position: absolute;
            top: calc(100% + 12px + 0.12em);
            left: 50%;
            margin: 0;
            color: #e6e6e6;
            font-size: 0.44em;
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: none;
            white-space: nowrap;
            transform: translateX(-50%);
        }

        .header-tagline-you {
            color: var(--accent);
            font-weight: 700;
        }

        /* The quick-action buttons sit in a row above the menu buttons. */
        .home-main {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 26px;
            margin-top: 70px;
        }

        .sidebar.home-sidebar {
            position: static;
            flex-direction: row;
            justify-content: center;
            gap: 14px;
        }

        /* Tooltips go above these buttons instead of to the left. */
        .home-sidebar .icon-button::after {
            top: auto;
            right: auto;
            bottom: calc(100% + 12px);
            left: 50%;
            transform: translate(-50%, 4px);
        }

        .home-sidebar .icon-button::before {
            top: auto;
            right: auto;
            bottom: calc(100% + 7px);
            left: 50%;
            border-top: 0;
            border-bottom: 2px solid var(--border);
            transform: translate(-50%, 4px) rotate(45deg);
        }

        .home-sidebar .icon-button:hover::after,
        .home-sidebar .icon-button:focus-visible::after {
            transform: translate(-50%, 0);
        }

        .home-sidebar .icon-button:hover::before,
        .home-sidebar .icon-button:focus-visible::before {
            transform: translate(-50%, 0) rotate(45deg);
        }

        @media (max-width: 600px) {
            .home-main {
                margin-top: 90px;
                gap: 22px;
            }

            .sidebar.home-sidebar {
                gap: 12px;
            }
        }

        /* Short screens: keep the buttons clear of the title. */
        @media (max-height: 680px) {
            .home-main {
                margin-top: 150px;
            }
        }

        /* "YOU" floats gently, like the rocket (no hover animation). */
        .header-tagline-you {
            display: inline-block;
            animation: rocket-idle 3.2s ease-in-out infinite;
        }

        @media (prefers-reduced-motion: reduce) {
            .header-tagline-you {
                animation: none;
            }
        }

        /* People lists: the @username with small tags beside it. */
        .person-handle-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px 8px;
        }

        .person-tag {
            display: inline-block;
            padding: 1px 6px;
            border: 1px solid rgba(240, 240, 240, 0.45);
            background: var(--panel);
            color: var(--muted);
            font-family: "Orbitron", sans-serif;
            font-size: 0.55rem;
            letter-spacing: 0.05em;
            line-height: 1.5;
            text-transform: uppercase;
        }

        .person-tag[hidden] {
            display: none;
        }

        .person-tag-banned {
            border-color: var(--role-admin);
            color: var(--role-admin);
        }

        /* Status icon picker (Edit profile, under the Status box). */
        .status-icon-picker {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }

        .status-icon-choice {
            display: inline-flex;
            width: 32px;
            height: 32px;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 1px solid rgba(240, 240, 240, 0.35);
            background: var(--panel);
            color: var(--muted);
            cursor: pointer;
            transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
        }

        .status-icon-choice .material-symbols-outlined {
            font-size: 1.1rem;
        }

        .status-icon-choice:hover {
            border-color: var(--accent);
            color: var(--text);
            transform: translateY(-2px);
        }

        .status-icon-choice.is-selected {
            border-color: var(--accent);
            background: color-mix(in srgb, var(--accent) 16%, var(--panel));
            color: var(--accent);
        }

        .status-icon-choice:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        /* A status that's just an icon: a small square tag. */
        .profile-status-tag.is-icon-only {
            width: 38px;
            padding: 0;
            justify-content: center;
        }

        .profile-status-tag.is-icon-only .profile-status-text {
            display: none;
        }

        /* ---- Planet page backgrounds ----
           The planet's picture fills the page behind everything, with a dark tint on top so text,
           boxes and buttons stay easy to read. */
        body.has-planet-background {
            background-color: var(--bg);
            background-image:
                linear-gradient(rgba(31, 31, 31, 0.72), rgba(31, 31, 31, 0.86)),
                var(--planet-background);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        /* The stars get quieter over a picture. */
        body.has-planet-background .stars {
            opacity: 0.35;
        }

        /* A planet can switch its stars off. */
        body.hide-stars .stars {
            display: none;
        }

        /* "Verified astronauts only" under a locked option. */
        .verified-only-note {
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 6px 0 0;
            font-size: 0.68rem;
        }

        .verified-only-note .material-symbols-outlined {
            color: #a8d4ff;
            font-size: 1rem;
            font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
        }

        /* ---- Planet deleted page ---- */
        .planet-deleted-page > .profile-tab-panel {
            margin-top: 20px;
        }

        .planet-deleted-scroll {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 44px 20px 40px;
            text-align: center;
        }

        .planet-deleted-icon {
            color: var(--accent);
            font-size: 3rem;
        }

        .planet-deleted-name {
            margin: 0;
            color: var(--accent);
            font-family: var(--font-plain);
            font-size: 1.1rem;
            letter-spacing: normal;
        }

        .planet-deleted-text {
            max-width: 420px;
            margin: 0;
            color: var(--text);
            font-size: 0.8rem;
            line-height: 1.7;
        }

        /* ---- Pop-up notifications (bottom right, above the footer) ---- */
        .toast-stack {
            position: fixed;
            right: 20px;
            bottom: 78px;
            z-index: 20;
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: min(340px, calc(100vw - 32px));
            pointer-events: none;
        }

        .toast {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 12px 10px 12px 12px;
            border: 2px solid var(--border);
            background: var(--panel);
            box-shadow: 4px 4px 0 var(--accent);
            pointer-events: auto;
            animation: toast-in 0.25s ease;
            transition: opacity 0.25s ease, transform 0.25s ease;
        }

        .toast.is-leaving {
            opacity: 0;
            transform: translateX(20px);
        }

        @keyframes toast-in {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .toast-icon {
            flex: 0 0 auto;
            color: var(--accent);
            font-size: 1.3rem;
        }

        .toast-body {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
            color: var(--text);
            font-size: 0.72rem;
            line-height: 1.5;
            text-decoration: none;
        }

        .toast-from {
            font-family: var(--font-plain);
            font-weight: 600;
            letter-spacing: normal;
        }

        .toast-text {
            overflow: hidden;
            color: var(--muted);
            font-family: var(--font-plain);
            letter-spacing: normal;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .toast-body:hover .toast-title,
        .toast-body:focus-visible .toast-title {
            text-decoration: underline;
        }

        .toast-close {
            display: inline-flex;
            flex: 0 0 auto;
            width: 26px;
            height: 26px;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 1px solid transparent;
            background: none;
            color: #a9a9a9;
            cursor: pointer;
        }

        .toast-close:hover,
        .toast-close:focus-visible {
            border-color: var(--border);
            color: var(--text);
            outline: none;
        }

        .toast-close .material-symbols-outlined {
            font-size: 1rem;
        }

        @media (max-width: 600px) {
            .toast-stack {
                right: 16px;
                bottom: 70px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .toast {
                animation: none;
            }
        }

        /* Notifications page: the pop-ups switch, and Mark all hidden when nothing's unread. */
        .popup-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 34px;
            padding: 6px 12px;
            box-shadow: 3px 3px 0 var(--border);
            font-size: 0.72rem;
        }

        .popup-toggle .material-symbols-outlined {
            font-size: 1.1rem;
        }

        .popup-toggle.is-off {
            color: #a9a9a9;
        }

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

        /* Username wait note (Edit profile). */
        .username-wait {
            margin: 6px 0 0;
            font-size: 0.68rem;
            line-height: 1.5;
        }

        .edit-input.is-locked {
            color: #a9a9a9;
            cursor: not-allowed;
        }

        /* ---- Pictures sit a little lower on the banner's bottom edge (profiles, planets, Moon Base) ---- */
        .profile-identity {
            margin-top: -30px;
        }

        .profile-identity-main .profile-name {
            margin-top: 30px;
        }

        /* Badges / Orbit still sit on the banner's bottom edge. */
        .profile-identity > .profile-aside {
            padding-top: 11px;
        }

        @media (max-width: 600px) {
            .profile-identity {
                margin-top: -24px;
            }

            .profile-identity-main .profile-name,
            .planet-name {
                margin-top: 24px;
            }

            .profile-identity > .profile-aside > .profile-badges {
                top: 5px;
            }
        }

        /* ---- Round badges ---- */
        .profile-badge-icon {
            border-radius: 50%;
        }

        /* ---- Crop pop-up ---- */
        .post-dialog.crop-dialog {
            width: min(720px, calc(100vw - 32px));
        }

        .crop-hint {
            margin: 0;
            font-size: 0.7rem;
            line-height: 1.6;
        }

        .crop-frame {
            position: relative;
            width: 100%;
            overflow: hidden;
            border: 2px solid var(--accent);
            background: var(--bg);
            cursor: grab;
            touch-action: none;
            -webkit-user-select: none;
            user-select: none;
        }

        .crop-frame.is-dragging {
            cursor: grabbing;
        }

        .crop-frame:focus-visible {
            outline: 2px solid var(--text);
            outline-offset: 2px;
        }

        .crop-image {
            position: absolute;
            top: 0;
            left: 0;
            max-width: none;
            transform-origin: 0 0;
            pointer-events: none;
        }

        .crop-zoom {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--muted);
        }

        .crop-zoom input {
            flex: 1;
            accent-color: var(--accent);
            cursor: pointer;
        }

        .crop-zoom .material-symbols-outlined {
            font-size: 1.2rem;
        }

        /* ---- Profile status: back to the square tag, centred on the banner's top edge ----
           (Moon Base's "Official" tag stays on the right.) */
        .profile-banner:not(.moonbase-banner) > .profile-status-tag {
            right: auto;
            left: 50%;
            max-width: calc(100% - 44px);
            transform: translate(-50%, -50%);
        }

        /* ---- Banners keep the same 4:1 shape as the saved picture on every screen, so phones
           show the whole banner instead of cropping its sides. ---- */
        .profile-banner,
        .planet-banner {
            height: auto;
            aspect-ratio: 4 / 1;
        }

        /* Crop pop-up zoom buttons. */
        .crop-tools {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .crop-tool {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-width: 36px;
            height: 34px;
            justify-content: center;
            padding: 0 10px;
            border: 1px solid rgba(240, 240, 240, 0.45);
            background: var(--panel);
            color: var(--text);
            font-family: "Orbitron", sans-serif;
            font-size: 0.66rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            cursor: pointer;
        }

        .crop-tool:hover,
        .crop-tool:focus-visible {
            border-color: var(--accent);
            color: var(--accent);
            outline: none;
        }

        .crop-tool .material-symbols-outlined {
            font-size: 1.15rem;
        }

        /* The frame shows the same dark grey the saved banner gets around a smaller picture. */
        .crop-frame {
            background: #2d2d2d;
        }

        /* ---- Picture pickers: a small preview, Edit (pencil) and a red Remove on the far right ---- */
        .edit-file-name {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .edit-file-thumb {
            display: block;
            flex: 0 0 auto;
            width: 44px;
            height: 44px;
            border: 1px solid rgba(240, 240, 240, 0.45);
            background: var(--bg);
            object-fit: cover;
        }

        /* Banners and backgrounds are wide, so their previews are too. */
        .edit-file-thumb-banner {
            width: 120px;
            height: 30px;
        }

        .edit-file-thumb-background {
            width: 80px;
            height: 45px;
        }

        .edit-reset.edit-reposition {
            display: inline-flex;
            align-self: center;
            align-items: center;
            gap: 4px;
            text-decoration: none;
        }

        .edit-reset.edit-reposition .material-symbols-outlined {
            font-size: 1rem;
        }

        .edit-reset.edit-reposition:hover,
        .edit-reset.edit-reposition:focus-visible {
            color: var(--accent);
            outline: none;
        }

        .edit-reset.edit-remove {
            align-self: center;
            margin-left: auto;
            color: var(--role-admin);
        }

        .edit-reset.edit-remove:hover,
        .edit-reset.edit-remove:focus-visible {
            color: #ff8a96;
            outline: none;
        }

        /* ---- Post pictures: a sensible size ----
           In feeds a picture is shown 360px wide on computers (small pictures are scaled up, big
           ones down), at most 270px tall, keeping its shape; the frame hugs it. Pop-ups show it bigger. */
        .post-image-button {
            display: inline-block;
            width: auto;
            max-width: 100%;
            vertical-align: top;
        }

        .post-image {
            width: 360px;
            max-width: 100%;
            height: auto;
            max-height: 270px;
            object-fit: contain;
            background: var(--bg);
        }

        @media (max-width: 600px) {
            .post-image {
                width: 100%;
                max-height: 280px;
            }
        }

        /* The big post pop-up: the picture fills the post's width, up to most of the screen height. */
        .post-view-dialog .post-image-button {
            display: block;
            width: 100%;
        }

        .post-view-dialog .post-image {
            width: 100%;
            max-height: min(70vh, 640px);
        }

        /* The picture pop-up: fills the pop-up, small pictures included. */
        .picture-dialog-image {
            width: 100%;
            height: auto;
            object-fit: contain;
        }

        /* The picture's frame hugs the picture (posts lay their parts out full width otherwise). */
        .post-main > .post-image-button {
            align-self: flex-start;
        }

        .post-view-dialog .post-main > .post-image-button {
            align-self: stretch;
        }

        /* Phones: a set width too (so small pictures aren't tiny), never wider than the post. */
        @media (max-width: 600px) {
            .post-image {
                width: 280px;
                max-width: 100%;
                max-height: 240px;
            }
        }

        /* Bios keep their line breaks (up to 3 lines). */
        .profile-bio {
            white-space: pre-line;
        }

        /* ---- Links line under the bio ---- */
        .profile-links {
            display: flex;
            flex: 1 1 100%;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px 16px;
            margin: -6px 0 0;
            font-family: var(--font-plain);
            font-size: 0.8rem;
            letter-spacing: normal;
        }

        .profile-link {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            min-width: 0;
            color: var(--accent);
            text-decoration: none;
            overflow-wrap: anywhere;
        }

        .profile-link:hover,
        .profile-link:focus-visible {
            color: var(--text);
            text-decoration: underline;
            outline: none;
        }

        .preview-links {
            display: contents;
        }

        @media (max-width: 600px) {
            .profile-identity .profile-links {
                order: 2;
                margin-top: -8px;
            }
        }

        /* Edit pages: two link rows (text + address). */
        .links-editor-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
            gap: 8px;
            margin-bottom: 8px;
        }

        @media (max-width: 600px) {
            .links-editor-row {
                grid-template-columns: 1fr;
            }
        }

        /* Links line: only the words get underlined on hover, not the link icon. */
        .profile-link:hover,
        .profile-link:focus-visible {
            text-decoration: none;
        }

        .profile-link:hover > span:not(.material-symbols-outlined),
        .profile-link:focus-visible > span:not(.material-symbols-outlined) {
            text-decoration: underline;
        }

        /* Computers: the bio (and links line) run the full width under the picture, name and stats,
           instead of being squeezed into the left column. */
        @media (min-width: 601px) {
            .profile-identity {
                flex-wrap: wrap;
                row-gap: 10px;
            }

            .profile-identity > .profile-identity-main {
                display: contents;
            }

            .profile-identity .profile-identity-details {
                flex: 1 1 0;
            }

            /* Badges / Orbit and the stats stay on the right. */
            .profile-identity > .profile-aside {
                margin-left: auto;
            }

            .profile-identity .profile-bio {
                order: 2;
                flex: 1 1 100%;
                margin-top: 0;
            }

            .profile-identity .profile-links {
                order: 3;
                margin-top: -4px;
            }
        }

        /* ---- Mixed case: text shows as it's written (not forced into capitals) ----
           The home page's big "our SPACE ship" title keeps its logo look. */
        .space-button,
        .header.search-title,
        .search-title,
        .suggestion-type,
        .results-heading,
        .result-title,
        .result-type,
        .profile-page-heading,
        .profile-name,
        .profile-chip,
        .planet-chip,
        .profile-section-title,
        .post-dialog-title,
        .edit-label,
        .edit-reset,
        .perm-role,
        .badge-tooltip::after,
        .role-editor-subtitle,
        .sidebar .icon-button::after,
        .comment-delete,
        .rank-orbiters,
        .planet-name,
        .planet-stat,
        .profile-stat,
        .report-head,
        .danger-zone-title,
        .account-zone-title,
        .account-email-badge,
        .privacy-scroll h3,
        .profile-follows-you,
        .post-pinned-tag,
        .person-tag,
        .crop-tool {
            text-transform: none;
        }

        /* ---- Planet and Moon Base names beside their picture (instead of at the top) ---- */
        .profile-page-heading.planet-heading-inline {
            position: static;
            flex: 1 1 0;
            width: auto;
            max-width: none;
            min-width: 0;
            margin: 30px 0 0;
            transform: none;
            font-size: clamp(1.1rem, 2vw, 1.3rem);
            text-align: left;
            overflow-wrap: anywhere;
        }

        /* Less space at the top now the name isn't there. */
        .profile-page-body.has-inline-heading {
            padding-top: 64px;
        }

        @media (max-width: 600px) {
            .profile-page-heading.planet-heading-inline {
                margin-top: 24px;
                font-size: 1.1rem;
            }

            .profile-page-body.has-inline-heading {
                padding-top: 76px;
            }
        }

        /* Names sit slightly lower, and a profile's name is closer to its @username. */
        .profile-identity-main .profile-name {
            margin-top: 34px;
            margin-bottom: 1px;
        }

        .profile-page-heading.planet-heading-inline {
            margin-top: 34px;
        }

        @media (max-width: 600px) {
            .profile-identity-main .profile-name {
                margin-top: 28px;
                margin-bottom: 1px;
            }

            /* Planet / Moon Base names start below the bell and Orbit button on phones. */
            .profile-page-heading.planet-heading-inline {
                margin-top: 50px;
            }
        }

        /* Planet / Moon Base name with its handle underneath, like a profile. */
        .planet-name-details .profile-page-heading.planet-heading-inline {
            margin-bottom: 1px;
        }

        .planet-name-details .planet-handle-under {
            margin: 0;
        }

        /* The banner no longer has the handle line above it. */
        .planet-name-details ~ * {
            min-width: 0;
        }

        /* Status icon: one button that opens a pop-up with every icon. */
        .status-icon-picker {
            align-items: center;
            gap: 10px;
        }

        .status-icon-open {
            width: 38px;
            height: 38px;
            border-color: var(--accent);
            color: var(--accent);
        }

        .status-icon-name {
            font-size: 0.7rem;
        }

        .post-dialog.status-icon-dialog {
            width: min(560px, calc(100vw - 32px));
        }

        .status-icon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
            gap: 8px;
            max-height: min(50vh, 380px);
            overflow-y: auto;
            padding: 2px 4px 4px 2px;
            scrollbar-width: thin;
            scrollbar-color: var(--accent) var(--bg);
        }

        .status-icon-grid .status-icon-choice {
            width: 100%;
            height: 40px;
        }

        /* ---- Badges with their own art (images/badges/) ---- */
        .profile-art-badge img {
            width: 30px;
            height: 30px;
            pointer-events: none;
        }

        /* @usernames in a post's Mentions line are profile links. */
        .post-mention-link {
            font-family: var(--font-plain);
            cursor: pointer;
        }

        /* ---- Mission Control (/moonbase/control/) ---- */
        .control-subtabs {
            margin-bottom: 4px;
        }

        .control-row-extra {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: 8px 10px;
            margin-left: auto;
        }

        .control-tags {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px 8px;
        }

        .control-owner {
            color: var(--muted);
            font-size: 0.68rem;
        }

        .control-owner .post-handle {
            font-family: var(--font-plain);
            font-size: 0.78rem;
        }

        .person-tag-verified {
            border-color: #a8d4ff;
            color: #a8d4ff;
        }

        .person-tag-suspicious {
            border-color: #ffd27a;
            color: #ffd27a;
        }

        .person-tag-reports {
            border-color: var(--role-admin);
            color: var(--role-admin);
        }

        .report-item.is-reviewed {
            border-left-color: rgba(240, 240, 240, 0.35);
        }

        .report-outcome {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px;
            margin: 0;
            color: var(--muted);
            font-size: 0.7rem;
        }

        .report-outcome .material-symbols-outlined {
            font-size: 1rem;
        }

        .report-outcome.is-actioned > .material-symbols-outlined,
        .report-outcome.is-actioned > span:nth-child(2) {
            color: #a8e6b8;
        }

        .report-outcome .post-handle {
            font-family: var(--font-plain);
            font-size: 0.78rem;
        }

        .control-time {
            color: #a9a9a9;
            font-size: 0.65rem;
            white-space: nowrap;
        }

        .post-dialog.control-manage-dialog {
            width: min(720px, calc(100vw - 32px));
        }

        .control-block {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .control-block .role-controls {
            flex-wrap: wrap;
        }

        .control-flag {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .report-actions.control-left {
            justify-content: flex-start;
        }

        .control-post-text {
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            white-space: pre-line;
            user-select: text;
        }

        .control-post-image {
            width: 160px;
            max-height: 120px;
            border: 1px solid rgba(240, 240, 240, 0.35);
            object-fit: cover;
        }

        .control-deleted-row .person-text {
            gap: 4px;
        }

        .control-deleted-icon {
            color: var(--muted);
            font-size: 2rem;
        }

        .control-small {
            font-size: 0.7rem;
        }

        /* Permissions: one row per permission, a switch per role. */
        .control-perm-wrap {
            overflow-x: auto;
        }

        .control-perm-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.7rem;
        }

        .control-perm-table th,
        .control-perm-table td {
            padding: 8px 6px;
            border-bottom: 1px solid rgba(240, 240, 240, 0.2);
            text-align: center;
        }

        .control-perm-table thead th {
            font-weight: 500;
        }

        .control-perm-table .perm-role {
            justify-content: center;
            font-size: 0.62rem;
        }

        .control-perm-table .control-perm-name {
            text-align: left;
            font-weight: 400;
        }

        .control-perm-name {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .control-perm-name .material-symbols-outlined {
            color: var(--accent);
            font-size: 1.1rem;
        }

        .control-perm-table .perm-switch {
            justify-content: center;
        }

        .control-perm-table input:disabled {
            cursor: not-allowed;
            opacity: 0.6;
        }

        /* Activity log */
        .control-log-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .control-log {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid rgba(240, 240, 240, 0.35);
            background: var(--bg);
        }

        .control-log > .material-symbols-outlined {
            color: var(--accent);
            font-size: 1.2rem;
        }

        .control-log-text {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }

        .control-log-text .post-handle {
            font-family: var(--font-plain);
            font-size: 0.8rem;
        }

        /* "Mission Control" in a notification, where a person's @username would be. */
        .notification-system-name {
            position: relative;
            z-index: 1;
            color: var(--accent);
        }

        /* Mission Control's panels hold sub-tabs and lists directly (no sections), so they get
           their own padding, clear of the title tag on the frame. */
        .control-scroll {
            display: flex;
            flex-direction: column;
            gap: 12px;
            box-sizing: border-box;
            padding: 34px 18px 18px;
        }

        .control-page [hidden],
        .control-manage-dialog [hidden] {
            display: none !important;
        }

        @media (max-width: 700px) {
            .control-scroll {
                padding: 30px 12px 14px;
            }

            .control-row-extra {
                width: 100%;
                justify-content: flex-start;
            }
        }

        /* Mission Control's manage pop-ups keep one height on every tab: the header and tabs
           stay put and only the tab's own content scrolls. */
        .control-manage-dialog .post-dialog-form {
            height: min(680px, calc(100vh - 96px));
            height: min(680px, calc(100dvh - 96px));
        }

        .control-manage-dialog .post-dialog-frame {
            flex: 1 1 auto;
        }

        .control-manage-dialog .post-dialog-body {
            flex: 1 1 auto;
            padding-bottom: 20px;
            overflow: hidden;
        }

        .control-manage-dialog .post-dialog-body > * {
            flex: 0 0 auto;
        }

        .control-manage-dialog .post-dialog-body > .dialog-tab-panel {
            flex: 1 1 auto;
            min-height: 0;
            padding-right: 8px;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--accent) transparent;
        }

        /* @usernames and /planet/ handles: dragging across one selects its text instead of
           picking up the link (it still opens with a click). */
        .username,
        .profile-handle,
        .post-handle,
        .post-reply-author,
        .profile-chip-link,
        .result-handle,
        .planet-handle,
        .rank-url,
        .rank-owner,
        .control-small,
        .control-manage-dialog .post-dialog-title {
            -webkit-user-drag: none;
            -webkit-user-select: text;
            user-select: text;
        }

        /* What's in one of Mission Control's smaller tabs. */
        .control-view {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        /* ---- Top 3 most orbited: a round #1 / #2 / #3 badge on a planet banner's top-right corner,
           half on and half off its top edge, in the Top 10's gold, silver and bronze. ---- */
        .planet-banner:has(> .planet-rank-badge) {
            margin-top: 26px;
        }

        .planet-rank-badge {
            --rank-color: #ffe3a3;
            position: absolute;
            top: 0;
            right: 18px;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 46px;
            height: 46px;
            box-sizing: border-box;
            border: 2px solid var(--rank-color);
            border-radius: 50%;
            background: var(--panel);
            box-shadow: 0 0 14px color-mix(in srgb, var(--rank-color) 35%, transparent);
            color: var(--rank-color);
            font-family: "Orbitron", sans-serif;
            font-size: 0.85rem;
            font-weight: 800;
            text-decoration: none;
            transform: translateY(-50%);
            cursor: pointer;
        }

        .planet-rank-badge.is-top-2 { --rank-color: #d8dde6; }
        .planet-rank-badge.is-top-3 { --rank-color: #f2c4a0; }

        .planet-rank-badge:hover {
            background: var(--panel-hover);
        }

        /* Its tooltip opens below (the page cuts off anything above the banner), lined up with
           the badge's right edge so it stays on screen. */
        .badge-tooltip.tooltip-below::after {
            top: calc(100% + 10px);
            bottom: auto;
            left: auto;
            right: -6px;
            transform: translate(0, -4px);
        }

        .badge-tooltip.tooltip-below::before {
            top: calc(100% + 5px);
            bottom: auto;
            left: auto;
            right: 17px;
            border-right: 0;
            border-bottom: 0;
            border-top: 2px solid var(--border);
            border-left: 2px solid var(--border);
            transform: translate(0, -4px) rotate(45deg);
        }

        .badge-tooltip.tooltip-below:hover::after,
        .badge-tooltip.tooltip-below:focus-visible::after {
            transform: translate(0, 0);
        }

        .badge-tooltip.tooltip-below:hover::before,
        .badge-tooltip.tooltip-below:focus-visible::before {
            transform: translate(0, 0) rotate(45deg);
        }

        /* The rank badge sits right on the banner's top-right corner (centred on the corner point),
           with its number tilted a little. The page clips anything past its edges, so while a
           badge is showing the page gets a little room at the sides (without moving anything). */
        .planet-rank-badge {
            right: 0;
            transform: translate(50%, -50%);
        }

        .planet-rank-number {
            display: inline-block;
            transform: rotate(12deg);
        }

        .profile-page:has(.planet-rank-badge) {
            padding-right: 26px;
            padding-left: 26px;
            margin-right: -26px;
            margin-left: -26px;
        }

        .badge-tooltip.tooltip-below::after {
            right: 0;
        }

        .badge-tooltip.tooltip-below::before {
            right: 18px;
        }

        @media (max-width: 600px) {
            /* Phones have a 16px gutter at the sides, so the badge is a little smaller there. */
            .planet-rank-badge {
                width: 34px;
                height: 34px;
                font-size: 0.68rem;
            }

            .profile-page:has(.planet-rank-badge) {
                padding-right: 16px;
                padding-left: 16px;
                margin-right: -16px;
                margin-left: -16px;
            }

            .badge-tooltip.tooltip-below::before {
                right: 12px;
            }
        }

        /* The rank badge: no glow, just its medal color fading across it (like the Top 10's top three). */
        .planet-rank-badge {
            background: linear-gradient(135deg, color-mix(in srgb, var(--rank-color) 30%, transparent) 0%, transparent 75%), var(--panel);
            box-shadow: none;
        }

        .planet-rank-badge:hover {
            background: linear-gradient(135deg, color-mix(in srgb, var(--rank-color) 38%, transparent) 0%, transparent 75%), var(--panel-hover);
        }

        /* The rank: a small "#" up high beside a big number. */
        .planet-rank-number {
            display: inline-flex;
            align-items: flex-start;
            line-height: 1;
        }

        .planet-rank-hash {
            margin: 2px 1px 0 0;
            font-size: 0.62rem;
            font-weight: 700;
            opacity: 0.85;
        }

        .planet-rank-digit {
            font-size: 1.45rem;
            font-weight: 900;
        }

        @media (max-width: 600px) {
            .planet-rank-hash {
                margin-top: 1px;
                font-size: 0.5rem;
            }

            .planet-rank-digit {
                font-size: 1.05rem;
            }
        }

        /* The "#" lines up with the middle of the number. */
        .planet-rank-number {
            align-items: center;
        }

        .planet-rank-hash {
            margin-top: 0 !important;
            font-size: 0.8rem;
        }

        @media (max-width: 600px) {
            .planet-rank-hash {
                font-size: 0.62rem;
            }
        }

        /* ---- Top 10 orbiter chips: the top-right and bottom-left corners are cut off ----
           A plain border would be sliced off at the cuts, so the outline is drawn with layers:
           the chip is filled with the border color and clipped to the cut shape, and a slightly
           smaller copy of the shape (::before) fills the inside. */
        .rank-orbiters {
            --cut: 8px;
            position: relative;
            isolation: isolate;
            border: 0;
            padding: 7px 12px;
            background: var(--rank-color);
            clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
        }

        .rank-orbiters::before {
            content: "";
            position: absolute;
            inset: 1px;
            z-index: -1;
            background: var(--panel);
            clip-path: polygon(0 0, calc(100% - var(--cut) + 0.6px) 0, 100% calc(var(--cut) - 0.6px), 100% 100%, calc(var(--cut) - 0.6px) 100%, 0 calc(100% - var(--cut) + 0.6px));
        }

        /* ---- Stats on profiles (Followers / Following / Visits), planets and Moon Base (Crew /
           Orbiters / Visits): cut top-right and bottom-left corners, drawn the same way as the
           Top 10 orbiter chips (outline color fill + a smaller inner shape). ---- */
        .planet-stats .planet-stat,
        .profile-stat {
            --cut: 8px;
            --cut-line: var(--border);
            --cut-fill: var(--panel);
            position: relative;
            isolation: isolate;
            border: 0;
            padding: 9px 12px;
            background: var(--cut-line);
            clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
        }

        .planet-stats .planet-stat::before,
        .profile-stat::before {
            content: "";
            position: absolute;
            inset: 1px;
            z-index: -1;
            background: var(--cut-fill);
            clip-path: polygon(0 0, calc(100% - var(--cut) + 0.6px) 0, 100% calc(var(--cut) - 0.6px), 100% 100%, calc(var(--cut) - 0.6px) 100%, 0 calc(100% - var(--cut) + 0.6px));
            transition: background 0.2s ease;
        }

        .planet-stats .planet-stat-button:hover,
        .planet-stats .planet-stat-button:focus-visible,
        .profile-stat-button:hover,
        .profile-stat-button:focus-visible {
            --cut-line: var(--accent);
            --cut-fill: var(--panel-hover);
            background: var(--cut-line);
        }

        @media (max-width: 600px) {
            .planet-stats .planet-stat,
            .profile-stat {
                --cut: 6px;
                padding: 8px 10px;
            }
        }

        /* A top 3 planet's banner and picture are framed in its rank color (gold, silver,
           bronze); every other planet keeps the white border. */
        .planet-banner.is-top-1,
        .planet-avatar.is-top-1 {
            border-color: #ffe3a3;
        }

        .planet-banner.is-top-2,
        .planet-avatar.is-top-2 {
            border-color: #d8dde6;
        }

        .planet-banner.is-top-3,
        .planet-avatar.is-top-3 {
            border-color: #f2c4a0;
        }

        /* ---- Homepage: your planets (up to 3), round buttons in a row ---- */
        .your-planets {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 14px;
            padding: 4px 0;
        }

        .your-planets[hidden] {
            display: none;
        }

        .icon-button.planet-shortcut {
            position: relative;
            width: 54px;
            height: 54px;
            cursor: pointer;
        }

        .planet-shortcut-icon .material-symbols-outlined {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .planet-shortcut-icon .hover-icon {
            opacity: 0;
            transform: translateY(4px);
            color: var(--accent);
        }

        .icon-button:hover .planet-shortcut-icon .default-icon,
        .icon-button:focus-visible .planet-shortcut-icon .default-icon,
        .planet-shortcut.has-picture .planet-shortcut-icon .default-icon {
            opacity: 0;
            transform: translateY(-4px);
        }

        .icon-button:hover .planet-shortcut-icon .hover-icon,
        .icon-button:focus-visible .planet-shortcut-icon .hover-icon {
            opacity: 1;
            transform: translateY(0);
        }

        .planet-shortcut.has-picture:hover .planet-shortcut-pfp,
        .planet-shortcut.has-picture:focus-visible .planet-shortcut-pfp {
            opacity: 0;
            transform: translateY(-4px);
        }

        /* ---- "Follows you" and "Banned" tags: the same cut top-right / bottom-left corners as
           the stats, a little smaller (outline color fill + a smaller inner shape). ---- */
        .profile-follows-you,
        .person-tag-follows,
        .person-tag-banned {
            --cut: 5px;
            --cut-line: rgba(240, 240, 240, 0.45);
            position: relative;
            isolation: isolate;
            border: 0;
            padding: 3px 8px;
            background: var(--cut-line);
            clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
        }

        .person-tag-banned {
            --cut-line: var(--role-admin);
        }

        .profile-follows-you::before,
        .person-tag-follows::before,
        .person-tag-banned::before {
            content: "";
            position: absolute;
            inset: 1px;
            z-index: -1;
            background: var(--panel);
            clip-path: polygon(0 0, calc(100% - var(--cut) + 0.6px) 0, 100% calc(var(--cut) - 0.6px), 100% 100%, calc(var(--cut) - 0.6px) 100%, 0 calc(100% - var(--cut) + 0.6px));
        }

        /* Profile status tag: sits a little higher on the banner's top edge (with room above). */
        .profile-banner:not(.moonbase-banner) > .profile-status-tag {
            transform: translate(-50%, calc(-50% - 6px));
        }

        .profile-banner:not(.moonbase-banner):has(> .profile-status-tag:not([hidden])) {
            margin-top: 26px;
        }

        /* The planet / Moon Base notifications bell dings when it's turned back on. */
        .notify-toggle.is-ringing .material-symbols-outlined {
            animation: bell-ding 0.9s ease-in-out;
            transform-origin: 50% 15%;
        }

        @media (prefers-reduced-motion: reduce) {
            .notify-toggle.is-ringing .material-symbols-outlined {
                animation: none;
            }
        }

        /* The planet / Moon Base notifications bell: cut top-right and bottom-left corners like
           the stats (outline color fill + a smaller inner shape); lavender outline on hover. */
        .notify-toggle {
            --cut: 7px;
            --cut-line: var(--border);
            --cut-fill: var(--panel);
            position: relative;
            isolation: isolate;
            border: 0;
            background: var(--cut-line);
            clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
        }

        .notify-toggle::before {
            content: "";
            position: absolute;
            inset: 1px;
            z-index: -1;
            background: var(--cut-fill);
            clip-path: polygon(0 0, calc(100% - var(--cut) + 0.6px) 0, 100% calc(var(--cut) - 0.6px), 100% 100%, calc(var(--cut) - 0.6px) 100%, 0 calc(100% - var(--cut) + 0.6px));
            transition: background 0.2s ease;
        }

        .notify-toggle:hover,
        .notify-toggle:focus-visible {
            --cut-line: var(--accent);
            --cut-fill: var(--panel-hover);
            background: var(--cut-line);
        }

        /* The bell only shows while you orbit (planet / Moon Base pages hide it otherwise). */
        .notify-toggle[hidden] {
            display: none;
        }

        /* ---- Planet Owner / Staff and Moon Base crew chips (planet-chip), and the planets on a
           profile's Planet Info tab (profile-chip): cut top-right and bottom-left corners like the
           stats; the outline turns lavender on hover. ---- */
        .planet-chip,
        .profile-chip {
            --cut: 7px;
            --cut-line: var(--border);
            position: relative;
            isolation: isolate;
            border: 0;
            padding: 9px 12px;
            background: var(--cut-line);
            -webkit-clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
            clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
        }

        .planet-chip::before,
        .profile-chip::before {
            content: "";
            position: absolute;
            inset: 1px;
            z-index: -1;
            background: var(--panel);
            -webkit-clip-path: polygon(0 0, calc(100% - var(--cut) + 0.6px) 0, 100% calc(var(--cut) - 0.6px), 100% 100%, calc(var(--cut) - 0.6px) 100%, 0 calc(100% - var(--cut) + 0.6px));
            clip-path: polygon(0 0, calc(100% - var(--cut) + 0.6px) 0, 100% calc(var(--cut) - 0.6px), 100% 100%, calc(var(--cut) - 0.6px) 100%, 0 calc(100% - var(--cut) + 0.6px));
        }

        .planet-chip:has(> .profile-chip-link):hover,
        .planet-chip:has(> .profile-chip-link:focus-visible),
        .profile-chip:has(> .profile-chip-link):hover,
        .profile-chip:has(> .profile-chip-link:focus-visible) {
            --cut-line: var(--accent);
        }

        @media (max-width: 600px) {
            .planet-chip,
            .profile-chip {
                --cut: 6px;
                padding: 8px 10px;
            }
        }

        /* The whole chip is the link: its link (an @username, or a /planet/ name) fills the chip
           (the padding moves onto the link), so clicking anywhere on it opens the profile or planet.
           Dragging still selects the name. */
        .planet-chip,
        .profile-chip {
            padding: 0;
        }

        .planet-chip > .profile-chip-link,
        .profile-chip > .profile-chip-link {
            display: block;
            padding: 9px 12px;
            cursor: pointer;
        }

        @media (max-width: 600px) {
            .planet-chip,
            .profile-chip {
                padding: 0;
            }

            .planet-chip > .profile-chip-link,
            .profile-chip > .profile-chip-link {
                padding: 8px 10px;
            }
        }

        /* ---- A tab whose box fits its content (the profile's Links tab): a frame holding one
           section, only as tall as what's in it, with the title tag on its top border. ---- */
        .profile-page > .profile-tab-panel.profile-fit-panel {
            flex: 0 0 auto;
            min-height: 0;
        }

        .profile-fit-panel > .profile-section {
            padding: 34px 18px 22px;
            border: 0;
            background: none;
        }

        /* ---- Comments pop-up: one size, only the comments scroll ---- */
        .post-dialog.comments-dialog {
            width: min(560px, calc(100vw - 32px));
        }

        .comments-dialog .post-dialog-form {
            height: min(640px, calc(100vh - 96px));
            height: min(640px, calc(100dvh - 96px));
        }

        .comments-dialog .post-dialog-frame {
            flex: 1 1 auto;
        }

        .comments-dialog .post-dialog-body {
            flex: 1 1 auto;
            padding-bottom: 34px;
            overflow: hidden;
        }

        .comment-list {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            gap: 10px;
            min-height: 0;
            margin: 0;
            padding: 0 6px 0 0;
            list-style: none;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--accent) transparent;
        }

        .comment-list:empty {
            display: none;
        }

        /* One comment: who and when, the text, then like / reply / delete. */
        .comment-item {
            display: flex;
            flex: 0 0 auto;
            flex-direction: column;
            gap: 4px;
            padding: 10px 12px 6px;
            border: 1px solid rgba(240, 240, 240, 0.25);
            background: var(--bg);
        }

        /* Replies sit indented under the comment they answer. */
        .comment-item.is-reply {
            margin-left: 26px;
            border-left: 2px solid var(--accent);
        }

        .comment-head {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 6px;
        }

        .comment-dot,
        .comment-time {
            color: #a9a9a9;
            font-size: 0.68rem;
        }

        .comment-text {
            display: -webkit-box;
            margin: 0;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 5;
            line-clamp: 5;
            color: var(--text);
            font-size: 0.78rem;
            line-height: 1.55;
            white-space: pre-line;
            overflow-wrap: anywhere;
            -webkit-user-select: text;
            user-select: text;
        }

        .comment-text.is-expanded {
            display: block;
        }

        .comment-more {
            align-self: flex-start;
            padding: 0;
            border: 0;
            background: none;
            color: var(--accent);
            cursor: pointer;
            font-family: "Orbitron", sans-serif;
            font-size: 0.62rem;
            text-transform: uppercase;
        }

        .comment-more[hidden] {
            display: none;
        }

        .comment-more:hover,
        .comment-more:focus-visible {
            text-decoration: underline;
            outline: none;
        }

        .comment-actions {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .comment-action {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 6px;
            border: 1px solid transparent;
            background: none;
            color: #a9a9a9;
            cursor: pointer;
            font-family: "Orbitron", sans-serif;
            font-size: 0.62rem;
            text-transform: uppercase;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .comment-action .material-symbols-outlined {
            font-size: 1rem;
        }

        .comment-action:hover,
        .comment-action:focus-visible {
            border-color: var(--accent);
            color: var(--accent);
            outline: none;
        }

        /* A comment's like is the post's like button, a little smaller. */
        .reaction-button.comment-like {
            min-width: 44px;
            padding: 3px 8px;
            gap: 5px;
        }

        .reaction-button.comment-like .reaction-icon {
            font-size: 1rem;
        }

        .reaction-button.comment-like .reaction-count:empty {
            display: none;
        }

        .comment-reply-quote p {
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            line-clamp: 3;
        }

        /* The word beside a post's reply arrow ("Reply"), styled like the counts beside the others. */
        .reaction-label {
            color: var(--muted);
            font-size: 0.68rem;
            text-transform: uppercase;
        }

        .reaction-button:hover .reaction-label,
        .reaction-button:focus-visible .reaction-label {
            color: var(--accent);
        }

        /* ---- Comments button: textsms on hover (like the like button's heart swap) ---- */
        .comments-button .reaction-hover-icon,
        .comments-button:not(.is-off):hover .reaction-icon:not(.reaction-hover-icon),
        .comments-button:not(.is-off):focus-visible .reaction-icon:not(.reaction-hover-icon) {
            display: none;
        }

        .comments-button:not(.is-off):hover .reaction-hover-icon,
        .comments-button:not(.is-off):focus-visible .reaction-hover-icon {
            display: inline-block;
        }

        /* Comments turned off: the comments_disabled icon, a little dimmer. */
        .comments-button.is-off .reaction-icon {
            color: var(--muted);
        }

        .reaction-button[hidden] {
            display: none;
        }

        /* "Comments are turned off" at the top of the Comments pop-up. */
        .comments-off-note {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 8px;
            margin: 0;
            padding: 8px 10px;
            border: 1px solid rgba(240, 240, 240, 0.25);
            background: var(--bg);
            color: var(--muted);
            font-size: 0.72rem;
        }

        .comments-off-note[hidden] {
            display: none;
        }

        .comments-off-note .material-symbols-outlined {
            color: var(--accent);
            font-size: 1.1rem;
        }

        .comments-dialog .space-button[hidden] {
            display: none;
        }

        /* Reply (posts and comments): the reply arrow swaps to reply_all on hover. */
        .reply-button .reaction-hover-icon,
        .reply-button:hover .reaction-icon:not(.reaction-hover-icon),
        .reply-button:focus-visible .reaction-icon:not(.reaction-hover-icon),
        .comment-reply-button .reply-hover-icon,
        .comment-reply-button:hover .reply-icon,
        .comment-reply-button:focus-visible .reply-icon {
            display: none;
        }

        .reply-button:hover .reaction-hover-icon,
        .reply-button:focus-visible .reaction-hover-icon,
        .comment-reply-button:hover .reply-hover-icon,
        .comment-reply-button:focus-visible .reply-hover-icon {
            display: inline-block;
        }

        /* Share: the share icon swaps to plus_one on hover. */
        .share-button .reaction-hover-icon,
        .share-button:hover .reaction-icon:not(.reaction-hover-icon),
        .share-button:focus-visible .reaction-icon:not(.reaction-hover-icon) {
            display: none;
        }

        .share-button:hover .reaction-hover-icon,
        .share-button:focus-visible .reaction-hover-icon {
            display: inline-block;
        }

        /* Pop-ups muted: the Notifications button shows notifications_off and doesn't ding. */
        .icon-button.notification-bell.is-muted:hover .notification-icon {
            animation: none;
        }

        /* ---- Short screens (e.g. 1366x768 laptops, where the browser leaves ~645px) ----
           The banner, picture and details used most of the height, squeezing the posts box to a
           cut-off sliver. Here the top is more compact (a shorter banner, trimmed a little top and
           bottom, a smaller picture, tighter gaps) so everything fits without the page scrolling. */
        @media (max-height: 760px) and (min-width: 601px) {
            .profile-banner,
            .planet-banner {
                aspect-ratio: auto;
                height: clamp(96px, calc(100vh - 520px), 130px);
                height: clamp(96px, calc(100dvh - 520px), 130px);
            }

            .profile-avatar,
            .planet-avatar {
                width: 68px;
                height: 68px;
            }

            .profile-tabs {
                margin-bottom: 24px;
            }
        }

        /* ==== ourUniverse (beta): a map of every planet, with Moon Base at the centre ==== */

        /* ---- Page: the map fills the whole page; the logo, heading, sidebar, search and
           buttons float on top of it ---- */
        .universe-beta {
            padding: 2px 8px;
            border: 1px solid var(--accent);
            color: var(--accent);
            font-size: 0.55em;
            vertical-align: middle;
        }

        .universe-page.has-map {
            position: fixed;
            inset: 0;
            z-index: 0;
            width: auto;
            overflow: hidden;
        }

        /* (The map has its own sky, so the page's stars aren't needed.) */
        .universe-body:has(.universe-page.has-map) > .stars {
            display: none;
        }

        /* Search, bottom left: a round search button that widens into a search bar. */
        .universe-toolbar {
            position: absolute;
            left: 16px;
            bottom: 56px;
            z-index: 3;
            display: flex;
            flex-direction: column;
            width: 46px;
            box-sizing: border-box;
            overflow: hidden;
            border: 2px solid var(--border);
            border-radius: 23px;
            background: var(--panel);
            transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease, border-radius 0.2s ease;
        }

        /* (Stops short of the map buttons on the right.) */
        .universe-toolbar.is-open {
            width: min(440px, calc(100vw - 92px));
            border-color: var(--accent);
        }

        .universe-search-toggle,
        .universe-search-go {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            padding: 0;
            border: 0;
            background: none;
            color: var(--text);
            cursor: pointer;
        }

        .universe-search-toggle:hover,
        .universe-search-go:hover,
        .universe-search-toggle:focus-visible,
        .universe-search-go:focus-visible {
            color: var(--accent);
            outline: none;
        }

        .universe-search {
            flex: 1 1 auto;
            min-width: 0;
            height: 100%;
            padding: 0 4px;
            border: 0;
            background: none;
            color: var(--text);
            font-family: var(--font-plain);
            font-size: 0.85rem;
            outline: none;
        }

        /* No browser clear button: the round button closes the search. */
        .universe-search::-webkit-search-cancel-button {
            appearance: none;
        }

        /* The bar's contents fade in once it has widened (and out straight away). */
        .universe-search,
        .universe-search-go {
            opacity: 0;
            transition: opacity 0.15s ease;
        }

        .universe-toolbar.is-open .universe-search,
        .universe-toolbar.is-open .universe-search-go {
            opacity: 1;
            transition-delay: 0.15s;
        }

        /* Search results, just above the search. */
        .universe-status {
            position: absolute;
            left: 16px;
            bottom: 112px;
            z-index: 3;
            max-width: min(440px, calc(100vw - 92px));
            box-sizing: border-box;
            margin: 0;
            padding: 6px 10px;
            border: 1px solid rgba(240, 240, 240, 0.35);
            background: rgba(23, 21, 31, 0.9);
            color: var(--muted);
            font-size: 0.72rem;
        }

        /* Nothing to say, no line. */
        .universe-status:empty {
            display: none;
        }

        /* ---- The map: a starfield behind, then the map itself ---- */
        .universe-map {
            position: absolute;
            inset: 0;
            overflow: hidden;
            /* Deep space (the nebula clouds and stars are drawn on the sky canvas). */
            background: radial-gradient(circle at center, #2a2440 0%, #17151f 75%);
        }

        /* The sky (a canvas drawn by the page): three layers of twinkling stars drifting at
           different speeds as you move, and the odd shooting star. */
        .universe-starfield {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        /* Cursors (recoloured to --accent by the page; the files are the fallback): a launching
           rocket over the map, a rocket over a planet or Moon Base. The rocket's tip clicks. */
        .universe-svg {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            cursor: var(--cursor-map, url("images/cursor-rocket-launch.svg") 4 4, grab);
            touch-action: none;
        }

        /* Coordinates you searched for (or opened a link to). */
        .universe-marker circle,
        .universe-marker path {
            fill: none;
            stroke: #ff9a6b;
            stroke-width: 2.5;
        }

        /* Top left, under the logo: the coordinates under the cursor. */
        .universe-cursor {
            position: absolute;
            top: 72px;
            left: 16px;
            z-index: 1;
            margin: 0;
            padding: 4px 8px;
            border: 1px solid rgba(240, 240, 240, 0.35);
            background: rgba(23, 21, 31, 0.85);
            color: var(--muted);
            font-family: var(--font-plain);
            font-size: 0.72rem;
            pointer-events: none;
        }

        .universe-cursor[hidden] {
            display: none;
        }

        /* ---- Planets (and Moon Base) ----
           Further planets are faded (set by the page); hovering, focusing or picking one shows it
           at full brightness. It grows a little, and its glow pulses out and starts again. */
        .universe-body-group {
            outline: none;
            cursor: var(--cursor-planet, url("images/cursor-rocket.svg") 16 4, pointer);
            transition: opacity 0.15s ease;
        }

        .universe-body-group:hover,
        .universe-body-group:focus-visible,
        .universe-body-group.is-selected {
            opacity: 1 !important;
        }

        .universe-body-inner {
            transition: transform 0.15s ease;
        }

        .universe-body-group:hover .universe-body-inner,
        .universe-body-group:focus-visible .universe-body-inner {
            transform: scale(1.15);
        }

        @keyframes universe-glow-pulse {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(1.45); opacity: 0; }
        }

        .universe-glow {
            fill: rgba(199, 182, 255, 0.12);
            transform-box: fill-box;
            transform-origin: center;
            transition: fill 0.2s ease;
        }

        .universe-body-group:hover .universe-glow,
        .universe-body-group:focus-visible .universe-glow,
        .universe-body-group.is-selected .universe-glow {
            fill: rgba(199, 182, 255, 0.4);
            animation: universe-glow-pulse 1.4s ease-out infinite;
        }

        .universe-outline {
            fill: none;
            stroke: #f0f0f0;
            stroke-width: 2;
        }

        .universe-body-group.is-moonbase .universe-outline,
        .universe-body-group.is-selected .universe-outline {
            stroke: var(--accent);
            stroke-width: 3;
        }

        /* The 3 most orbited planets wear their rank colour (on the map and in the card). */
        .universe-body-group.is-top-1,
        .planet-avatar.universe-card-avatar.is-top-1 { --rank-color: #ffe3a3; }
        .universe-body-group.is-top-2,
        .planet-avatar.universe-card-avatar.is-top-2 { --rank-color: #d8dde6; }
        .universe-body-group.is-top-3,
        .planet-avatar.universe-card-avatar.is-top-3 { --rank-color: #f2c4a0; }

        .universe-body-group[class*="is-top-"] .universe-outline,
        .universe-body-group[class*="is-top-"].is-selected .universe-outline {
            stroke: var(--rank-color);
            stroke-width: 3;
        }

        .universe-body-group[class*="is-top-"] .universe-glow {
            fill: color-mix(in srgb, var(--rank-color) 18%, transparent);
        }

        .universe-body-group[class*="is-top-"]:hover .universe-glow,
        .universe-body-group[class*="is-top-"]:focus-visible .universe-glow,
        .universe-body-group[class*="is-top-"].is-selected .universe-glow {
            fill: color-mix(in srgb, var(--rank-color) 45%, transparent);
        }

        .planet-avatar.universe-card-avatar[class*="is-top-"] {
            border-color: var(--rank-color);
        }

        /* Undiscovered planets: a question mark instead of the picture, and no rank colour. */
        .universe-unknown {
            display: none;
        }

        .universe-body-group.is-undiscovered .universe-unknown {
            display: inline;
        }

        .universe-body-group.is-undiscovered image {
            display: none;
        }

        .universe-unknown circle {
            fill: #17151f;
        }

        .universe-unknown text {
            fill: var(--muted);
            font-family: "Material Symbols Outlined";
        }

        .universe-body-group.is-undiscovered[class*="is-top-"] .universe-outline {
            stroke: #f0f0f0;
            stroke-width: 2;
        }

        .universe-body-group.is-undiscovered[class*="is-top-"].is-selected .universe-outline {
            stroke: var(--accent);
            stroke-width: 3;
        }

        .universe-body-group.is-undiscovered[class*="is-top-"] .universe-glow {
            fill: rgba(199, 182, 255, 0.12);
        }

        .universe-body-group.is-undiscovered[class*="is-top-"]:hover .universe-glow,
        .universe-body-group.is-undiscovered[class*="is-top-"]:focus-visible .universe-glow {
            fill: rgba(199, 182, 255, 0.4);
        }

        /* ---- Orbiters: little rockets circling their planet ----
           Only close up on a planet, and only once it's discovered. */
        @keyframes universe-orbit {
            to { transform: rotate(360deg); }
        }

        .universe-orbiters {
            display: none;
        }

        .universe-map.is-close-up .universe-body-group:not(.is-undiscovered) .universe-orbiters {
            display: inline;
        }

        .universe-orbit-ring {
            transform-origin: 0 0;
            animation: universe-orbit 40s linear infinite;
        }

        .universe-orbit-ring.is-outer {
            animation-duration: 70s;
            animation-direction: reverse;
        }

        .universe-orbit-path {
            fill: none;
            stroke: rgba(199, 182, 255, 0.18);
            stroke-width: 1px;
            vector-effect: non-scaling-stroke;
        }

        .universe-orbiter {
            fill: var(--accent);
            stroke: #17151f;
            stroke-width: 1.5px;
            vector-effect: non-scaling-stroke;
            paint-order: stroke;
        }

        @media (prefers-reduced-motion: reduce) {
            .universe-body-group .universe-glow,
            .universe-orbit-ring {
                animation: none !important;
            }
        }

        /* ---- Planet names ----
           On their own layer behind the planets, in a tag with two corners cut off. Hidden (not
           removed, so they can still be measured) until the planet's discovered; Moon Base's
           shows from the Moon Base view inwards. The hovered / picked one comes to the front at
           full brightness. */
        .universe-label-group {
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.15s ease;
        }

        .universe-label-group.is-discovered,
        .universe-label-group.is-picked,
        .universe-map.is-zoomed-in .universe-label-group.is-moonbase-label {
            visibility: visible;
        }

        /* The names button, or zoomed far out: no names at all. */
        .universe-map.hide-names .universe-label-group,
        .universe-map.is-far-out .universe-label-group {
            visibility: hidden !important;
        }

        .universe-label-group.is-lit,
        .universe-label-group.is-picked {
            opacity: 1 !important;
        }

        .universe-label {
            fill: #f0f0f0;
            font-family: "Orbitron", sans-serif;
            font-size: 12px;
        }

        .universe-label-box {
            fill: var(--panel);
            stroke: var(--border);
            stroke-width: 1px;
            vector-effect: non-scaling-stroke;
        }

        /* ---- Navigation buttons (bottom right): zoom, Moon Base view, names, near me ---- */
        .universe-navigation {
            position: absolute;
            right: 20px;
            bottom: 56px;
            z-index: 3;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .icon-button.universe-navigation-button {
            width: 40px;
            height: 40px;
            cursor: pointer;
        }

        .icon-button.universe-navigation-button.is-on {
            border-color: var(--accent);
            color: var(--accent);
        }

        /* ---- The planet card ----
           Opens beside the planet you clicked (placed by the page) and can be dragged like a
           window. Its close X sits on its top-right border, its distance tag on the top-left. */
        .universe-card {
            position: absolute;
            z-index: 2;
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: min(300px, calc(100% - 24px));
            box-sizing: border-box;
            padding: 22px 16px 16px;
            border: 2px solid var(--border);
            background: rgba(45, 45, 45, 0.96);
            cursor: grab;
            touch-action: none;
        }

        .universe-card[hidden] {
            display: none;
        }

        .universe-card.is-dragging {
            cursor: grabbing;
            user-select: none;
        }

        .universe-card a,
        .universe-card button {
            cursor: pointer;
        }

        .universe-card-close {
            position: absolute;
            top: 0;
            right: 14px;
            transform: translateY(-50%);
        }

        .universe-card-head {
            display: flex;
            align-items: center;
            gap: 12px;
            padding-right: 30px;
        }

        .planet-avatar.universe-card-avatar {
            width: 56px;
            height: 56px;
        }

        .universe-card-names {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }

        .universe-card-name {
            margin: 0;
            color: var(--accent);
            font-size: 0.95rem;
            overflow-wrap: anywhere;
        }

        .universe-card-bio {
            margin: 0;
            color: var(--text);
            font-size: 0.75rem;
            white-space: pre-line;
        }

        .universe-card-facts {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 4px 10px;
            margin: 0;
            font-size: 0.7rem;
        }

        .universe-card-facts dt {
            color: var(--muted);
            text-transform: uppercase;
        }

        .universe-card-facts dd {
            margin: 0;
            font-family: var(--font-plain);
        }

        /* A smaller "N Orbiters" chip (opens the orbiters pop-up), in a stats row for the cut corners. */
        .planet-stats.universe-card-stats {
            justify-content: flex-start;
        }

        .planet-stat.universe-card-orbiters {
            --cut: 6px;
            padding: 4px 9px;
            font-size: 0.7rem;
            cursor: pointer;
        }

        /* Bottom right: Zoom in (icon only) and Visit. */
        .universe-card-actions {
            display: flex;
            align-self: flex-end;
            align-items: stretch;
            gap: 10px;
        }

        .space-button.universe-zoom-to {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 10px;
            cursor: pointer;
        }

        .universe-zoom-to .material-symbols-outlined {
            font-size: 20px;
        }

        /* Distance class, nearest to furthest: on the card's border, or in a list (is-inline). */
        .universe-distance-tag {
            position: absolute;
            top: 0;
            left: 14px;
            transform: translateY(-50%);
            padding: 3px 9px;
            border: 1px solid currentColor;
            background: var(--panel);
            font-family: "Orbitron", sans-serif;
            font-size: 0.62rem;
            text-transform: uppercase;
        }

        .universe-distance-tag.is-inline {
            position: static;
            flex: 0 0 auto;
            transform: none;
            background: none;
        }

        .universe-distance-tag.is-local { color: #a8e6b8; }
        .universe-distance-tag.is-nearby { color: #a8d4ff; }
        .universe-distance-tag.is-distant { color: #c7b6ff; }
        .universe-distance-tag.is-remote { color: #ffd1a3; }
        .universe-distance-tag.is-deep-space { color: #ffadb5; }

        /* ---- Right-click menu: copy coordinates / a link to them ---- */
        .universe-menu {
            position: absolute;
            z-index: 3;
            min-width: 190px;
            padding: 6px;
            border: 2px solid var(--border);
            background: var(--panel);
        }

        .universe-menu[hidden] {
            display: none;
        }

        .universe-menu-title {
            margin: 2px 6px 0;
            color: var(--accent);
            font-family: "Orbitron", sans-serif;
            font-size: 0.78rem;
        }

        .universe-menu-coords {
            margin: 2px 6px 6px;
            color: var(--muted);
            font-family: var(--font-plain);
            font-size: 0.72rem;
        }

        .universe-menu-item {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 7px 8px;
            border: 0;
            background: none;
            color: var(--text);
            font-family: var(--font-plain);
            font-size: 0.82rem;
            text-align: left;
            cursor: pointer;
        }

        .universe-menu-item:hover,
        .universe-menu-item:focus-visible {
            background: var(--panel-hover);
            outline: none;
        }

        .universe-menu-item .material-symbols-outlined {
            font-size: 18px;
        }

        /* ---- "Planets near me" pop-up: each row flies you to that planet ---- */
        .universe-near-list {
            max-height: min(420px, 60vh);
            overflow-y: auto;
        }

        .person-row.universe-near-row {
            flex-wrap: nowrap;
            width: 100%;
            color: var(--text);
            font: inherit;
            text-align: left;
            cursor: pointer;
        }

        .person-row.universe-near-row:hover,
        .person-row.universe-near-row:focus-visible {
            border-color: var(--accent);
            background: var(--panel-hover);
            outline: none;
        }

        .universe-near-row .person-text {
            flex: 1 1 auto;
            min-width: 0;
        }

        .universe-near-avatar {
            border-radius: 50%;
            object-fit: cover;
        }

        .universe-near-avatar.is-unknown {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            border: 1px solid rgba(240, 240, 240, 0.6);
            background: #17151f;
            color: var(--muted);
        }

        .universe-near-avatar.is-unknown .material-symbols-outlined {
            font-size: 20px;
        }

        .universe-near-km {
            display: block;
            color: var(--muted);
            font-family: var(--font-plain);
            font-size: 0.75rem;
        }

        /* ==== Shared bits added alongside ourUniverse ==== */

        /* Pop-up tabs can be hidden (e.g. "Planets near me" with only one planet). */
        .dialog-tabs[hidden] {
            display: none;
        }

        /* Quick-action icon colours, on every page: the bell yellow (hovered and unread too),
           Search cyan, ourUniverse purple. (Search and ourUniverse swap to the accent-coloured
           hover icon.) */
        .notification-icon .default-icon,
        .notification-icon .hover-icon {
            color: #f5f351;
        }

        .search-icon .default-icon {
            color: #59d1e8;
        }

        #universe-button .search-icon .default-icon {
            color: #9481d4;
        }

        .notification-bell.has-unread .notification-icon .default-icon {
            color: #f5f351;
        }

        /* Tooltips that open to the left (for buttons along the right edge, e.g. the ourUniverse
           map's navigation buttons). */
        .badge-tooltip.tooltip-left::after {
            top: 50%;
            right: calc(100% + 10px);
            bottom: auto;
            left: auto;
            transform: translate(4px, -50%);
        }

        .badge-tooltip.tooltip-left::before {
            top: 50%;
            right: calc(100% + 5px);
            bottom: auto;
            left: auto;
            border: 0;
            border-top: 2px solid var(--border);
            border-right: 2px solid var(--border);
            transform: translate(4px, -50%) rotate(45deg);
        }

        .badge-tooltip.tooltip-left:hover::after,
        .badge-tooltip.tooltip-left:focus-visible::after {
            transform: translate(0, -50%);
        }

        .badge-tooltip.tooltip-left:hover::before,
        .badge-tooltip.tooltip-left:focus-visible::before {
            transform: translate(0, -50%) rotate(45deg);
        }

        /* ==== Skeleton loaders (user/users.js skeleton()): grey shapes that shimmer while
           something loads, shaped like what's coming (posts, people, notifications, ...). ==== */
        @keyframes skeleton-shimmer {
            from { background-position: 100% 0; }
            to { background-position: -100% 0; }
        }

        .skeleton {
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-self: stretch;
            width: 100%;
            box-sizing: border-box;
        }

        .skeleton-bone {
            display: block;
            flex: 0 0 auto;
            background: linear-gradient(90deg, rgba(240, 240, 240, 0.06) 0%, rgba(240, 240, 240, 0.16) 50%, rgba(240, 240, 240, 0.06) 100%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.4s ease-in-out infinite;
        }

        .skeleton-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border: 1px solid rgba(240, 240, 240, 0.2);
            background: var(--bg);
        }

        .skeleton-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .skeleton-text {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            gap: 7px;
            min-width: 0;
        }

        .skeleton-line {
            height: 9px;
            max-width: 100%;
        }

        .skeleton-line.is-strong {
            height: 11px;
        }

        .skeleton-avatar {
            width: 36px;
            height: 36px;
        }

        .skeleton-avatar.is-round {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }

        .skeleton-avatar.is-large {
            width: 46px;
            height: 46px;
        }

        .skeleton-rank-number {
            width: 26px;
            height: 22px;
        }

        .skeleton-pill {
            width: 84px;
            height: 30px;
        }

        /* Posts: a header (picture, name, handle), then a few lines of text. */
        .skeleton-post .skeleton-item {
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            padding: 14px 14px 22px;
        }

        .skeleton-post .skeleton-avatar {
            width: 30px;
            height: 30px;
        }

        .skeleton-post .skeleton-row {
            margin-bottom: 4px;
        }

        /* Comments: picture and name, then the comment underneath. */
        .skeleton-comment .skeleton-item {
            flex-wrap: wrap;
        }

        .skeleton-line.is-full {
            flex: 0 0 auto;
            margin-left: 48px;
        }

        /* A profile / planet page: banner, picture and name, tabs, then some text. */
        .skeleton-page .skeleton-item {
            flex-direction: column;
            align-items: stretch;
            gap: 14px;
            padding: 0;
            border: 0;
            background: none;
        }

        .skeleton-banner {
            height: clamp(100px, 18vw, 190px);
        }

        .skeleton-avatar.is-page {
            width: 84px;
            height: 84px;
            margin-top: -40px;
            margin-left: 18px;
            border: 2px solid var(--bg);
        }

        /* Just text: no boxes around the lines. */
        .skeleton-lines {
            gap: 9px;
        }

        .skeleton-lines .skeleton-item {
            padding: 0;
            border: 0;
            background: none;
        }

        @media (prefers-reduced-motion: reduce) {
            .skeleton-bone {
                animation: none;
                background: rgba(240, 240, 240, 0.1);
            }
        }

        .skeleton-avatar.is-page {
            background-color: var(--bg);
        }

        /* ourUniverse while it loads: placeholder planets (with name bars) shimmering on the map. */
        .universe-loading {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
        }

        .universe-loading-planet {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            transform: translate(-50%, -50%);
        }

        .skeleton-bone.universe-loading-ball {
            border-radius: 50%;
        }

        .skeleton-bone.universe-loading-name {
            width: 64px;
            height: 10px;
        }

        /* ourUniverse search: the button / text box / arrow row, with suggestions growing up
           out of the bar above it as you type. */
        .universe-search-row {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            height: 42px;
        }

        .universe-suggestions {
            max-height: 0;
            margin: 0;
            padding: 0 6px;
            overflow: hidden;
            list-style: none;
            opacity: 0;
            transition: max-height 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.25s ease, opacity 0.2s ease;
        }

        /* With suggestions showing, the bar's top corners go square. */
        .universe-toolbar.has-suggestions {
            border-radius: 0 0 23px 23px;
        }

        .universe-toolbar.has-suggestions .universe-suggestions {
            max-height: calc(var(--rows, 0) * 46px + 14px);
            padding: 8px 6px 6px;
            border-bottom: 1px solid rgba(240, 240, 240, 0.15);
            opacity: 1;
        }

        .universe-suggestion {
            display: flex;
            align-items: center;
            gap: 10px;
            height: 46px;
            box-sizing: border-box;
            padding: 6px 10px;
            cursor: pointer;
        }

        .universe-suggestion:hover,
        .universe-suggestion.is-active {
            background: var(--panel-hover);
        }

        .universe-suggestion.is-active .universe-suggestion-name {
            color: var(--accent);
        }

        .universe-suggestion-picture {
            flex: 0 0 auto;
            width: 30px;
            height: 30px;
            border: 1px solid var(--border);
            border-radius: 50%;
            object-fit: cover;
        }

        .universe-suggestion-icon {
            flex: 0 0 auto;
            width: 30px;
            color: var(--accent);
            text-align: center;
        }

        .universe-suggestion-text {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .universe-suggestion-name,
        .universe-suggestion-detail {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .universe-suggestion-name {
            color: var(--text);
            font-family: "Orbitron", sans-serif;
            font-size: 0.78rem;
        }

        .universe-suggestion-detail {
            color: var(--muted);
            font-family: var(--font-plain);
            font-size: 0.72rem;
        }

        /* While suggestions are showing, the search result line steps aside. */
        .universe-toolbar.has-suggestions ~ .universe-status {
            display: none;
        }

        /* Moon Base's links as tags (the same chips as a profile's Links tab), under its bio. */
        .profile-chip-list.profile-link-tags {
            flex: 1 1 100%;
            margin: 2px 0 0;
        }

        /* Under the bio, like the plain links line (see .profile-identity .profile-links). */
        @media (min-width: 601px) {
            .profile-identity .profile-link-tags {
                order: 3;
            }
        }

        @media (max-width: 600px) {
            .profile-identity .profile-link-tags {
                order: 2;
            }
        }

        /* Scroll shadows (user/users.js): a box that scrolls gets a soft shadow along its bottom
           edge while there's more below, and it goes once you reach the end. The shadow comes
           from a line with no height that sticks to the bottom of the box (so it takes no room). */
        .has-more-below::after {
            content: "";
            position: sticky;
            /* On the box's real bottom edge, below its bottom padding (users.js sets this). */
            bottom: calc(-1 * var(--scroll-pad-bottom, 0px));
            /* Over the scrolling content, but under the buttons that sit on a box's bottom border
               (they're z-index 1 too and come later on the page). */
            z-index: 1;
            display: block;
            flex: none;
            grid-column: 1 / -1;
            align-self: stretch;
            height: 0;
            margin: 0;
            box-shadow: 0 0 22px 16px rgba(0, 0, 0, 0.55);
            pointer-events: none;
        }