:root {
    --color-bg-primary: #fafaf9;
    --color-bg-secondary-start: #ffffff;
    --color-bg-secondary-end: #c2daf9;
    --color-bg-post-user: #e0edffb6;
    --color-bg-post-admin: #e4e4e7;

    --color-text-title: #18181b;
    --color-text-subtitle: #52525b;
    --color-text-body: #3f3f46;
    --color-text-muted: #71717a;

    --color-btn-primary-bg: #18181b;
    --color-btn-primary-bg-hover: #000000;
    --color-btn-primary-text: #ffffff;

    --color-btn-secondary-bg: #f4f4f5;
    --color-btn-secondary-border: #d4d4d8;
    --color-btn-secondary-text: #3f3f46;
    --color-btn-secondary-bg-hover: #e4e4e7;

    --color-btn-disabled-bg: #e4e4e7;
    --color-btn-disabled-text: #a1a1aa;

    --color-bg-app: #fcfdfe;

    --color-error: #dc2626;
    --color-success: #16a34a;

    --color-like: #ef4444;
    --color-favorite: #eab308;
    --color-repost: #2563eb;

    /* Axon, the onboarding/help assistant — Saxe blue, deliberately its own muted, distinct
       blue rather than the brighter --color-repost. */
    --color-axon: #3b6ea5;

    /* Ask AI "make this pink" highlight command (note-format-highlight-pink) — no other UI
       element needs pink, so this exists solely for that. */
    --color-highlight-pink: #ec4899;

    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    margin: 0;
    background-color: var(--color-bg-primary);
    color: var(--color-text-body);
    font-family: var(--font-family-base);
}

h1, .title {
    margin: 0 0 0.5rem 0;
    color: var(--color-text-title);
    font-size: 2rem;
    font-weight: 700;
}

h2, h3, .subtitle {
    margin: 0 0 1rem 0;
    color: var(--color-text-subtitle);
    font-size: 1.125rem;
    font-weight: 500;
}

p, label, .text-body {
    color: var(--color-text-body);
    font-size: 1rem;
    line-height: 1.5;
}

.btn-primary, .btn-secondary {
    display: inline-block;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.6rem 1.4rem;
    border-radius: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
    background-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    border: 1px solid var(--color-btn-primary-bg);
}

.btn-primary:hover {
    background-color: var(--color-btn-primary-bg-hover);
    border-color: var(--color-btn-primary-bg-hover);
}

.btn-secondary {
    background-color: var(--color-btn-secondary-bg);
    color: var(--color-btn-secondary-text);
    border: 1px solid var(--color-btn-secondary-border);
}

.btn-secondary:hover {
    background-color: var(--color-btn-secondary-bg-hover);
}

.btn-primary:disabled,
.btn-primary.btn-disabled-look,
.btn-secondary:disabled,
.btn-secondary.btn-disabled-look {
    background-color: var(--color-btn-disabled-bg);
    border-color: var(--color-btn-disabled-bg);
    color: var(--color-btn-disabled-text);
    cursor: not-allowed;
}

.btn-primary:disabled:hover,
.btn-primary.btn-disabled-look:hover,
.btn-secondary:disabled:hover,
.btn-secondary.btn-disabled-look:hover {
    background-color: var(--color-btn-disabled-bg);
    border-color: var(--color-btn-disabled-bg);
}

.btn-danger {
    display: inline-block;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.6rem 1.4rem;
    border-radius: 0.5rem;
    cursor: pointer;
    background-color: #ffffff;
    color: var(--color-error);
    border: 1px solid var(--color-error);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-danger:hover {
    background-color: var(--color-error);
    color: #ffffff;
}

.welcome-bg, .auth-page {
    box-sizing: border-box;
    min-height: 100vh;
    background-color: var(--color-bg-secondary-end);
    background-image:
        radial-gradient(circle at 15% 20%, var(--color-bg-secondary-start) 0%, transparent 40%),
        radial-gradient(circle at 85% 15%, var(--color-bg-secondary-start) 0%, transparent 45%),
        radial-gradient(circle at 50% 90%, var(--color-bg-secondary-start) 0%, transparent 50%),
        radial-gradient(ellipse at center, var(--color-bg-secondary-start) 0%, var(--color-bg-secondary-end) 100%);
}

.welcome-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
}

.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 3rem 1.5rem;
}

.brand-title {
    margin: 0;
    color: var(--color-text-title);
    font-size: 3rem;
    font-weight: 300;
    text-align: center;
}

.auth-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 24rem;
    padding: 2rem;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 1rem 2.5rem rgba(24, 24, 27, 0.08);
}

.card-heading {
    margin: 0 0 1.25rem 0;
    color: var(--color-text-title);
    font-size: 0.95rem;
    font-weight: 700;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--color-text-title);
    font-size: 0.9rem;
    font-weight: 500;
}

.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.form-label-row .form-label {
    margin-bottom: 0;
}

.field-optional-hint {
    color: var(--color-text-muted);
    font-weight: 400;
}

.form-input {
    box-sizing: border-box;
    width: 100%;
    padding: 0.65rem 0.9rem;
    border-radius: 0.6rem;
    border: 1px solid var(--color-btn-secondary-border);
    background-color: #ffffff;
    color: var(--color-text-title);
    font-family: inherit;
    font-size: 0.9375rem;
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-text-muted);
}

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.checkbox-row input[type="checkbox"] {
    margin-top: 0.2rem;
}

.checkbox-label {
    display: block;
    color: var(--color-text-title);
    font-size: 0.9rem;
    font-weight: 600;
}

.btn-block {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.welcome-content {
    max-width: 46rem;
}

.eyebrow {
    margin: 0 0 0.5rem 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-align: center;
}

.hero-title {
    margin: 0 0 2rem 0;
    color: var(--color-text-title);
    font-size: clamp(3rem, 10vw, 6.5rem);
    font-weight: 300;
    line-height: 1;
    text-align: center;
}

.tagline {
    margin: 0 0 0.75rem 0;
    color: var(--color-text-title);
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
}

.description {
    margin: 0 0 2.5rem 0;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
}

.button-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.field-error {
    margin: 0.4rem 0 0 0;
    color: var(--color-error);
    font-size: 0.825rem;
}

.link-inline {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
}

.back-link {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-text-body);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.back-link-right {
    left: auto;
    right: 1.5rem;
}

.back-link:hover {
    color: var(--color-text-title);
}

.terms-list {
    margin: 0.3rem 0 0 0;
    padding-left: 1.1rem;
}

.terms-list li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.check-mark {
    color: var(--color-success);
    font-weight: 700;
}

.field-valid {
    border-color: var(--color-success);
}

.field-invalid {
    border-color: var(--color-error);
}

.requirement-list {
    margin: 0.4rem 0 0 0;
    padding-left: 1.1rem;
    font-size: 0.825rem;
}

.requirement-list li {
    margin-bottom: 0.15rem;
}

.requirement-met {
    color: var(--color-success);
}

.requirement-unmet {
    color: var(--color-error);
}

.password-input-wrapper {
    position: relative;
}

.password-input-wrapper .form-input {
    padding-right: 2.75rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    border: none;
    background: none;
    padding: 0;
    color: var(--color-text-muted);
    cursor: pointer;
}

.password-toggle:hover {
    color: var(--color-text-title);
}

.avatar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--color-btn-primary-bg);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* Home shell: header + drawer + feed */

.primary-header {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 5.5rem;
    padding: 1.1rem 2.5rem;
    background-color: var(--color-bg-secondary-end);
    background-image:
        radial-gradient(circle at 15% 20%, var(--color-bg-secondary-start) 0%, transparent 40%),
        radial-gradient(circle at 85% 15%, var(--color-bg-secondary-start) 0%, transparent 45%),
        radial-gradient(circle at 50% 90%, var(--color-bg-secondary-start) 0%, transparent 50%),
        radial-gradient(ellipse at center, var(--color-bg-secondary-start) 0%, var(--color-bg-secondary-end) 100%);
}

.primary-header .brand-title {
    grid-column: 2;
    margin: 0;
    font-size: 1.9rem;
}

.primary-header .search-bar {
    grid-column: 3;
    justify-self: end;
}

.primary-header-profile .header-user-name {
    grid-column: 1;
    justify-self: start;
    color: var(--color-text-title);
    font-size: 1.1rem;
    font-weight: 700;
}

.primary-header-profile .header-brand-right {
    grid-column: 3;
    justify-self: end;
    font-size: 1.9rem;
}

.home-body {
    display: flex;
    align-items: stretch;
    height: calc(100vh - 5.5rem);
    background-color: var(--color-bg-app);
    overflow: hidden;
}

.home-feed {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2.5rem 2rem;
    overflow-y: auto;
}

.stub-heading {
    margin: 0 0 0.5rem 0;
    color: var(--color-text-title);
    font-size: 1.5rem;
    font-weight: 700;
}

.stub-text {
    color: var(--color-text-muted);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    max-width: 60rem;
    margin-bottom: 0.5rem;
}

.avatar-circle-lg {
    width: 4rem;
    height: 4rem;
    font-size: 1.5rem;
}

.profile-name {
    margin: 0;
    color: var(--color-text-title);
    font-size: 1.5rem;
    font-weight: 700;
}

.profile-role {
    margin: 0;
    color: var(--color-text-muted);
}

.profile-header-other {
    flex-wrap: wrap;
    row-gap: 1.25rem;
}

.profile-header-identity {
    flex-shrink: 0;
}

.profile-header-details {
    display: flex;
    flex: 1 1 20rem;
    min-width: 20rem;
    gap: 1.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--color-btn-secondary-border);
}

.profile-header-detail-col {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.profile-header-detail-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.profile-header-detail-row .profile-info-label {
    min-width: 4.5rem;
}

.profile-header-stats {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.3rem;
    margin-left: auto;
    padding-left: 1.5rem;
    border-left: 1px solid var(--color-btn-secondary-border);
    text-align: right;
}

.profile-header-stats p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.profile-header-stats strong {
    color: var(--color-text-title);
}

.profile-header-stat-link {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
}

.profile-header-stat-link:hover {
    text-decoration: underline;
}

.profile-header-stat-link strong {
    color: var(--color-text-title);
}

.profile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: center;
    gap: 0.25rem;
    width: 100%;
    max-width: 60rem;
    box-sizing: border-box;
    padding: 0.4rem;
    border-radius: 0.9rem;
    background-color: var(--color-btn-secondary-bg);
    box-shadow: 0 0.25rem 0.75rem rgba(24, 24, 27, 0.06);
}

.profile-nav-item {
    box-sizing: border-box;
    padding: 0.6rem 1.1rem;
    border: none;
    border-radius: 0.6rem;
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.profile-nav-item:hover {
    color: var(--color-text-title);
}

.profile-nav-item-active {
    background-color: #ffffff;
    color: var(--color-text-title);
    font-weight: 700;
    box-shadow: 0 0.15rem 0.5rem rgba(24, 24, 27, 0.08);
}

.profile-nav-item-danger {
    color: var(--color-error);
}

.profile-nav-item-danger:hover {
    color: #b91c1c;
}

.profile-deactivated-badge {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background-color: var(--color-error);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.profile-name {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.profile-name-edit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.profile-name-edit .form-input {
    width: 10rem;
}

.profile-edit-icon,
.profile-info-edit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0;
    color: var(--color-text-muted);
    cursor: pointer;
}

.profile-edit-icon:hover,
.profile-info-edit-icon:hover {
    color: var(--color-text-title);
}

.profile-info-edit-icon:disabled {
    color: var(--color-btn-secondary-border);
    cursor: not-allowed;
}

.profile-role-pending {
    margin-left: 0.4rem;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 400;
    font-style: italic;
}

.field-action-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.field-confirm-icon,
.field-cancel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.65rem;
    height: 1.65rem;
    border: none;
    border-radius: 999px;
    background: none;
    cursor: pointer;
}

.field-confirm-icon {
    color: var(--color-success);
}

.field-confirm-icon:disabled {
    color: var(--color-btn-disabled-text);
    cursor: not-allowed;
}

.field-cancel-icon {
    color: var(--color-error);
}

.field-confirm-icon:hover:not(:disabled),
.field-cancel-icon:hover {
    background-color: var(--color-btn-secondary-bg);
}

.profile-info {
    width: 100%;
    max-width: 28rem;
}

.profile-info-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-btn-secondary-border);
}

.profile-info-row:last-child {
    border-bottom: none;
}

.profile-info-label {
    flex-shrink: 0;
    color: var(--color-text-title);
    font-weight: 600;
    font-size: 0.9rem;
}

.profile-info-value {
    flex: 1;
    text-align: right;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.profile-info-input {
    flex: 1;
    text-align: right;
}

.profile-info-row .password-input-wrapper {
    flex: 1;
}

.settings-table {
    width: 100%;
    max-width: 45rem;
    margin-bottom: 1.5rem;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.75rem rgba(24, 24, 27, 0.06);
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    background-color: #ffffff;
}

.settings-row:nth-child(even) {
    background-color: var(--color-btn-secondary-bg);
}

.settings-row-label {
    color: var(--color-text-title);
    font-weight: 700;
    font-size: 0.95rem;
}

.settings-options {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.settings-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-title);
    font-size: 0.9rem;
    cursor: pointer;
}

/* SearchBar component */

.search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 16rem;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--color-text-muted);
    box-shadow: 0 0.25rem 0.75rem rgba(24, 24, 27, 0.06);
}

.search-bar-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    color: var(--color-text-title);
    font-family: inherit;
    font-size: 0.9rem;
}

.search-bar-input::placeholder {
    color: var(--color-text-muted);
}

/* Drawer component */

.drawer {
    width: 4.5rem;
    flex-shrink: 0;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-right: 1px solid var(--color-btn-secondary-border);
    padding: 1.5rem 0.75rem;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: nowrap;
    transition: width 0.2s ease;
}

.drawer:hover {
    width: 17rem;
}

.drawer-greeting {
    margin: 0 0 1.25rem 0.5rem;
    color: var(--color-text-title);
    font-size: 1.1rem;
    font-weight: 300;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.drawer:hover .drawer-greeting {
    opacity: 1;
}

.drawer-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.drawer-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.5rem;
    border: none;
    border-radius: 0.6rem;
    background: none;
    color: var(--color-text-body);
    font-family: inherit;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
}

.drawer-item:hover {
    background-color: var(--color-btn-secondary-bg);
}

.drawer-item.active {
    background-color: var(--color-btn-secondary-bg);
    color: var(--color-text-title);
    font-weight: 600;
}

.drawer-icon {
    display: inline-flex;
    flex-shrink: 0;
}

.drawer-label {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.drawer:hover .drawer-label {
    opacity: 1;
}

.drawer-search {
    margin: 1rem 0;
    padding: 0 0.5rem;
    display: none;
}

.drawer:hover .drawer-search {
    display: block;
}

.drawer-no-match {
    padding: 0.5rem 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.drawer-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-btn-secondary-border);
}

.drawer-user {
    display: flex;
    align-items: center;
}

.drawer-logout {
    text-align: left;
}

/* PostCard component */

.post-card {
    width: 100%;
    max-width: 60rem;
    box-sizing: border-box;
    padding: 2rem;
    border-radius: 1.25rem;
    background-color: var(--color-bg-post-user);
    box-shadow: 0 1rem 2.5rem rgba(24, 24, 27, 0.06);
    cursor: pointer;
}

.post-card-admin {
    background-color: var(--color-bg-post-admin);
}

.post-title {
    margin: 0 0 1.25rem 0;
    color: var(--color-text-title);
    font-size: 1.4rem;
    font-weight: 700;
}

.post-title-desc {
    color: var(--color-text-muted);
    font-weight: 400;
    font-style: italic;
    font-size: 1rem;
}

.post-pages {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.post-page-thumb {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 9rem;
    height: 11rem;
    box-sizing: border-box;
    padding: 1rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-btn-secondary-border);
    background-color: #ffffff;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.post-page-thumb:hover {
    box-shadow: 0 0.5rem 1.25rem rgba(24, 24, 27, 0.12);
    transform: translateY(-2px);
}

.post-page-thumb-line {
    display: block;
    height: 0.4rem;
    border-radius: 0.2rem;
    background-color: var(--color-btn-secondary-bg);
}

.post-page-thumb-number {
    margin-top: auto;
    align-self: flex-end;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.post-page-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9rem;
    height: 11rem;
    box-sizing: border-box;
    border-radius: 0.5rem;
    border: 1px dashed var(--color-btn-secondary-border);
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 1.5rem;
    text-decoration: none;
    cursor: pointer;
}

/* Thin rule under the post title with the expand/collapse chevron for the note preview at
   its right end. */
.post-preview-divider {
    display: flex;
    align-items: center;
    margin: -0.5rem 0 1.25rem 0;
    cursor: default;
}

.post-preview-divider::before {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--color-btn-secondary-border);
}

.post-preview-toggle {
    flex-shrink: 0;
    margin-left: 0.6rem;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--color-text-muted);
    font-size: 0.65rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
}

.post-preview-toggle:hover {
    background-color: var(--color-btn-secondary-bg);
    color: var(--color-text-title);
}

/* Home feed's inline note preview: quick links to the note's other views (Note/Brain Map/
   Process/Map) on the left, the first generated page on the right — replaces the page
   thumbnails once clicked. The page itself scrolls internally at a capped height, so the
   card as a whole (title, preview, description, author, like/comment row) still fits one
   screen and text never gets shrunk to "fit". */
.post-note-preview {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    cursor: default;
}

.post-note-preview-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex-shrink: 0;
    width: 9rem;
}

.post-note-preview-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 0.4rem 1rem rgba(24, 24, 27, 0.08);
    color: var(--color-text-title);
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.post-note-preview-btn:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

.post-note-preview-page-wrap {
    flex: 1;
    min-width: 0;
    max-height: 42vh;
    overflow-y: auto;
    border-radius: 0.5rem;
}

.post-description {
    margin: 0 0 1.25rem 0;
    color: var(--color-text-body);
    font-size: 0.95rem;
    line-height: 1.6;
}

.post-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.post-author-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.post-author-link:hover .post-author-name {
    text-decoration: underline;
}

.post-author {
    flex: 1;
    min-width: 0;
}

.post-author-name {
    margin: 0;
    color: var(--color-text-title);
    font-weight: 600;
    font-size: 0.95rem;
}

.post-author-role {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.post-actions {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-btn-secondary-border);
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.post-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.post-action-spacer {
    flex: 1;
}

.post-action-icon {
    display: inline-flex;
    color: var(--color-text-muted);
    cursor: pointer;
}

.post-action-icon:hover {
    color: var(--color-text-title);
}

.post-action-toggle {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
}

button.post-action-toggle {
    cursor: pointer;
}

button.post-action-toggle:disabled {
    color: var(--color-btn-disabled-text);
    cursor: not-allowed;
}

.post-action-liked {
    color: var(--color-like);
}

.post-action-favorited {
    color: var(--color-favorite);
}

.post-action-reposted {
    color: var(--color-repost);
    font-weight: 700;
}

.post-delete-icon {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--color-error);
    cursor: pointer;
}

.post-delete-icon:hover {
    color: #b91c1c;
}

.post-comment-delete-icon {
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
}

.post-comments {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-btn-secondary-border);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    cursor: default;
}

.post-comment {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background-color: var(--color-bg-app);
}

.post-comment-body {
    flex: 1;
    min-width: 0;
}

.post-comment p {
    margin: 0;
    font-size: 0.875rem;
}

.post-comment .post-comment-context {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Admin's Comments tab: pairs the actual post card with the target user's comment on it, so
   the comment is visible without having to open the post first. */
.profile-comment-entry {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.post-comment-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.post-comment-form .form-input {
    flex: 1;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 1.5rem;
    background-color: rgba(24, 24, 27, 0.45);
}

.modal-box {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 26rem;
    padding: 2rem;
    border-radius: 1rem;
    background-color: #ffffff;
    box-shadow: 0 1.5rem 3rem rgba(24, 24, 27, 0.25);
}

.modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.9rem;
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.modal-body {
    margin: 1rem 0 1.5rem 0;
    color: var(--color-text-body);
}

.pdf-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 2rem;
    background-color: rgba(24, 24, 27, 0.45);
}

.pdf-preview-box {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    max-width: 50rem;
    height: 100%;
    max-height: 44rem;
    border-radius: 1rem;
    background-color: #ffffff;
    box-shadow: 0 1.5rem 3rem rgba(24, 24, 27, 0.25);
    overflow: hidden;
}

.pdf-preview-header {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 1rem 3rem 1rem 1.25rem;
    border-bottom: 1px solid var(--color-btn-secondary-border);
    color: var(--color-text-title);
    font-weight: 600;
}

.pdf-preview-frame {
    flex: 1;
    width: 100%;
    border: none;
    background-color: var(--color-btn-secondary-bg);
}

.pdf-preview-loading {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

.pdf-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-btn-secondary-border);
}

.modal-form-heading {
    margin: 0 0 1rem 0;
    color: var(--color-text-title);
    font-size: 1.1rem;
    font-weight: 700;
}

.group-picker-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.group-picker-item {
    box-sizing: border-box;
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--color-btn-secondary-border);
    border-radius: 0.6rem;
    background-color: var(--color-btn-secondary-bg);
    color: var(--color-text-title);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.group-picker-item:hover {
    background-color: var(--color-btn-secondary-bg-hover);
}

.deactivate-reason-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.deactivate-reason-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-text-body);
    font-size: 0.9rem;
    cursor: pointer;
}

.deactivate-reason-option input[type="radio"] {
    flex-shrink: 0;
}

.deactivate-reason-other {
    min-height: 4.5rem;
    margin-bottom: 1rem;
    resize: vertical;
}

.share-visibility-list {
    display: flex;
    gap: 1.25rem;
}

.share-visibility-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-body);
    font-size: 0.9rem;
    cursor: pointer;
}

.deactivate-reason-note {
    margin: 1rem 0 0 0;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

/* Connections page */

.connections-count {
    align-self: flex-start;
    width: 100%;
    max-width: 60rem;
    margin: 0;
    color: var(--color-text-title);
    font-style: italic;
    font-size: 0.95rem;
}

.connections-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 60rem;
}

.connection-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-sizing: border-box;
    padding: 0.9rem 1.1rem;
    border-radius: 0.75rem;
    background-color: var(--color-btn-secondary-bg);
    text-decoration: none;
    color: inherit;
}

.connection-card:hover {
    background-color: var(--color-btn-secondary-bg-hover);
}

.connection-info {
    flex: 1;
    min-width: 0;
}

.connection-name {
    margin: 0;
    color: var(--color-text-title);
    font-weight: 600;
    font-size: 0.95rem;
}

.connection-role {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.connection-arrow {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.connections-search {
    width: 100%;
    max-width: 60rem;
    margin-bottom: 1.25rem;
}

.connections-split {
    display: flex;
    align-items: stretch;
    gap: 2rem;
    width: 100%;
    max-width: 60rem;
}

.connections-column {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 0.75rem;
}

.connections-divider {
    flex-shrink: 0;
    width: 1px;
    background-color: var(--color-btn-secondary-border);
}

.connections-column-heading {
    margin: 0;
    color: var(--color-text-title);
    font-size: 1.1rem;
    font-weight: 700;
}

.connections-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 32rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

@media (max-width: 40rem) {
    .connections-split {
        flex-direction: column;
    }

    .connections-divider {
        display: none;
    }
}

@media (max-width: 56rem) {
    .connections-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 36rem) {
    .connections-grid {
        grid-template-columns: 1fr;
    }
}

/* All Notes page */

.notes-feed {
    align-items: stretch;
}

.notes-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

.notes-back-link:hover {
    color: var(--color-text-title);
}

.notes-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.notes-title {
    margin: 0;
    color: var(--color-text-title);
    font-size: 2rem;
    font-weight: 700;
}

.notes-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sort-dropdown {
    position: relative;
}

.sort-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--color-text-muted);
    box-shadow: 0 0.25rem 0.75rem rgba(24, 24, 27, 0.06);
    cursor: pointer;
}

.sort-trigger:hover {
    color: var(--color-text-title);
}

.sort-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 20;
    width: 12rem;
    box-sizing: border-box;
    padding: 0.4rem;
    border-radius: 0.75rem;
    background-color: #ffffff;
    box-shadow: 0 1rem 2.5rem rgba(24, 24, 27, 0.15);
}

.sort-menu-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 0.5rem;
    background: none;
    color: var(--color-text-body);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

.sort-menu-item:hover {
    background-color: var(--color-btn-secondary-bg);
}

.sort-menu-item-active {
    color: var(--color-text-title);
    font-weight: 700;
}

.notes-actions-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.notes-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 8rem;
    height: 8rem;
    box-sizing: border-box;
    border: 1.5px solid var(--color-btn-secondary-border);
    border-radius: 0.9rem;
    background-color: var(--color-bg-post-user);
    color: var(--color-text-title);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.notes-action-card:hover {
    border-color: var(--color-text-muted);
}

.notes-action-card-group {
    cursor: default;
    background-color: var(--color-btn-secondary-bg);
}

.notes-date-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-text-title);
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.notes-date-count {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.note-row {
    width: 100%;
    box-sizing: border-box;
    border-radius: 1rem;
    background-color: var(--color-btn-secondary-bg);
}

.note-row-main {
    box-sizing: border-box;
    width: 100%;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
}

.note-title {
    margin: 0 0 0.4rem 0;
    color: var(--color-text-title);
    font-size: 1.1rem;
    font-weight: 700;
}

.note-description {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.note-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    box-sizing: border-box;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-btn-secondary-border);
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.note-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.note-stat-toggle {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.note-stat-toggle:hover {
    color: var(--color-text-title);
}

.note-stat-spacer {
    flex: 1;
}

.note-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.note-action-delete {
    color: var(--color-error);
}

.note-action-group {
    color: #2563eb;
}

.note-action-share {
    color: var(--color-text-title);
}

.note-action-shared {
    color: var(--color-success);
}

.modal-confirm-actions {
    display: flex;
    gap: 0.75rem;
}

.modal-confirm-actions .btn-secondary,
.modal-confirm-actions .btn-primary {
    flex: 1;
}

.note-file-preview {
    display: flex;
    gap: 1.25rem;
    box-sizing: border-box;
    padding: 1.25rem 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid var(--color-btn-secondary-border);
    cursor: default;
}

.note-file-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 12rem;
    flex-shrink: 0;
    max-height: 24rem;
    overflow-y: auto;
}

.note-file-item {
    box-sizing: border-box;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 0.5rem;
    background: none;
    color: var(--color-text-body);
    font: inherit;
    font-size: 0.825rem;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-file-item:hover {
    background-color: var(--color-btn-secondary-bg-hover);
}

.note-file-item-active {
    background-color: #ffffff;
    color: var(--color-text-title);
    font-weight: 600;
    box-shadow: 0 0.15rem 0.5rem rgba(24, 24, 27, 0.08);
}

.note-file-page {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.note-file-page-surface {
    box-sizing: border-box;
    width: 100%;
    max-width: 34rem;
    padding: 2.5rem 2.25rem;
    border-radius: 0.5rem;
    background-color: #ffffff;
    box-shadow: 0 0.5rem 1.5rem rgba(24, 24, 27, 0.1);
}

.note-file-page-title {
    margin: 0 0 1rem 0;
    color: var(--color-text-title);
    font-size: 1.05rem;
    font-weight: 700;
}

.note-file-page-body {
    margin: 0;
    color: var(--color-text-body);
    font-size: 0.85rem;
    line-height: 1.7;
    white-space: pre-line;
}

.note-file-page-footer {
    margin: 1.5rem 0 0 0;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    text-align: right;
}

.note-file-pagination {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.note-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.4rem;
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.825rem;
    cursor: pointer;
}

.note-page-btn:hover {
    background-color: var(--color-btn-secondary-bg);
}

.note-page-btn-active {
    background-color: var(--color-text-title);
    color: #ffffff;
    font-weight: 700;
}

.note-page-ellipsis {
    color: var(--color-text-muted);
    font-size: 0.825rem;
    padding: 0 0.2rem;
}

.note-page-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.4rem;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
}

.note-page-arrow:hover:not(:disabled) {
    background-color: var(--color-btn-secondary-bg);
    color: var(--color-text-title);
}

.note-page-side-arrow {
    align-self: flex-start;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
}

.note-page-arrow:disabled {
    color: var(--color-btn-disabled-text);
    cursor: not-allowed;
}

/* Create Note wizard */

.wizard-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wizard-title-input {
    width: 12rem;
}

.wizard-resume-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.wizard-resume-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--color-btn-secondary-border);
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--color-text-title);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0.25rem 0.75rem rgba(24, 24, 27, 0.06);
}

.wizard-resume-banner:hover {
    border-color: var(--color-text-muted);
}

.wizard-draft-file-list {
    margin: 0.4rem 0 0 0;
    padding-left: 1.2rem;
    color: var(--color-text-body);
    font-size: 0.875rem;
}

.drafts-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 50rem;
}

.draft-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    box-sizing: border-box;
    padding: 1rem 1.25rem;
    border-radius: 0.9rem;
    background-color: #ffffff;
    box-shadow: 0 0.25rem 0.75rem rgba(24, 24, 27, 0.06);
}

.draft-row-info {
    flex: 1;
    min-width: 0;
}

.draft-row-title {
    margin: 0;
    color: var(--color-text-title);
    font-weight: 700;
}

.draft-row-meta {
    margin: 0.2rem 0 0 0;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.draft-row-files {
    margin: 0.2rem 0 0 0;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.draft-row-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
}

.wizard-heading {
    margin: 2rem 0 2rem 0;
    color: var(--color-text-title);
    font-size: 2.25rem;
    font-weight: 300;
    text-align: center;
}

.wizard-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 55rem;
    min-height: 18rem;
    box-sizing: border-box;
    border-radius: 1rem;
    background-color: var(--color-bg-post-user);
}

.wizard-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.wizard-dropzone-icon {
    color: var(--color-text-muted);
    pointer-events: none;
}

.wizard-file-grid {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 100%;
    max-width: 55rem;
    box-sizing: border-box;
    padding: 1.75rem;
    border-radius: 1rem;
    background-color: var(--color-bg-post-user);
}

.wizard-file-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    max-width: 5.5rem;
}

.wizard-file-thumb {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    width: 5.5rem;
    height: 5.5rem;
    box-sizing: border-box;
    padding: 0.7rem;
    border-radius: 0.5rem;
    background-color: #ffffff;
    box-shadow: 0 0.2rem 0.5rem rgba(24, 24, 27, 0.08);
}

.wizard-file-thumb-line {
    display: block;
    height: 0.3rem;
    border-radius: 0.15rem;
    background-color: var(--color-btn-secondary-bg);
}

.wizard-file-name {
    max-width: 100%;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wizard-file-remove {
    position: absolute;
    top: -0.4rem;
    left: -0.4rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: none;
    border-radius: 999px;
    background-color: var(--color-btn-primary-bg);
    color: #ffffff;
    cursor: pointer;
}

.wizard-file-add-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    box-sizing: border-box;
    border: 1.5px dashed var(--color-btn-secondary-border);
    border-radius: 0.5rem;
    color: var(--color-text-muted);
}

.wizard-continue-btn {
    display: block;
    width: 100%;
    max-width: 55rem;
    box-sizing: border-box;
    margin-top: 1.5rem;
    padding: 0.9rem;
    border: none;
    border-radius: 0.6rem;
    background-color: var(--color-btn-secondary-bg);
    color: var(--color-text-title);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.wizard-continue-btn:hover {
    background-color: var(--color-btn-secondary-bg-hover);
}

.wizard-continue-btn:disabled {
    color: var(--color-btn-disabled-text);
    cursor: not-allowed;
}

.wizard-ready-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding: 1.25rem;
    border-radius: 0.9rem;
    background-color: var(--color-bg-post-user);
    animation: wizard-ready-pop 0.35s ease-out;
}

.wizard-ready-banner p {
    margin: 0;
    color: var(--color-text-title);
    font-weight: 700;
}

.wizard-ready-banner .wizard-continue-btn {
    margin-top: 0;
    max-width: 20rem;
}

@keyframes wizard-ready-pop {
    from { opacity: 0; transform: translateY(0.6rem) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.wizard-describe-box {
    width: 100%;
    max-width: 55rem;
    box-sizing: border-box;
    padding: 1.5rem;
    border-radius: 1rem;
    background-color: var(--color-bg-post-user);
}

.wizard-describe-input {
    width: 100%;
    min-height: 12rem;
    box-sizing: border-box;
    padding: 1rem 1.25rem;
    border: none;
    border-radius: 0.75rem;
    background-color: #ffffff;
    color: var(--color-text-title);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: vertical;
}

.wizard-describe-input::placeholder {
    color: var(--color-text-muted);
}

.wizard-describe-input:focus {
    outline: none;
}

.wizard-orchestrator-summary {
    width: 100%;
    max-width: 55rem;
    box-sizing: border-box;
    margin: 0 auto 1.5rem;
    color: var(--color-text-body);
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
}

.wizard-orchestrator-menu {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 55rem;
    box-sizing: border-box;
    padding: 1.5rem;
    border-radius: 1rem;
    background-color: var(--color-bg-post-user);
}

.wizard-orchestrator-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-text-title);
    font-size: 0.95rem;
    cursor: pointer;
}

.wizard-subtext {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    text-align: center;
}

.wizard-subtext em {
    color: var(--color-text-body);
    font-style: italic;
}

.wizard-actions-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.brain-map-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    width: 100%;
}

.brain-map-diagram-scroll {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}

.brain-map-diagram {
    position: relative;
    flex-shrink: 0;
}

.brain-map-bubble {
    background: var(--bubble-color);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 0.4rem 1rem rgba(24, 24, 27, 0.1);
    border-radius: 999px;
    padding: 0.6rem 1.1rem;
    animation: brain-map-bubble-float 4s ease-in-out infinite;
    transition: box-shadow 0.15s ease-out;
}

.brain-map-bubble:hover {
    animation: brain-map-bubble-hover 0.15s ease-out forwards;
    box-shadow: 0 0.6rem 1.6rem rgba(24, 24, 27, 0.22);
}

@keyframes brain-map-bubble-float {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(1); }
    50% { transform: translate(-50%, -50%) translateY(-0.2rem) scale(1.02); }
}

@keyframes brain-map-bubble-hover {
    from { transform: translate(-50%, -50%) scale(1); }
    to { transform: translate(-50%, -50%) scale(1.2); }
}

.brain-map-bubble-delay-0 { animation-delay: 0s; }
.brain-map-bubble-delay-1 { animation-delay: 0.6s; }
.brain-map-bubble-delay-2 { animation-delay: 1.2s; }
.brain-map-bubble-delay-3 { animation-delay: 1.8s; }

.brain-map-keyword-list {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.6rem;
    width: 16rem;
    max-width: 100%;
    max-height: calc(100vh - 20rem);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 1.25rem;
    border-radius: 0.9rem;
    background-color: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-btn-secondary-border);
}

.brain-map-keyword-list-heading {
    margin: 0 0 0.25rem 0;
    color: var(--color-text-title);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
}

.brain-map-keyword-list-count-label {
    margin: 0 0 0.5rem 0;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-style: italic;
}

.brain-map-keyword-list-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.brain-map-keyword-list-dot {
    flex-shrink: 0;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background-color: var(--bubble-color);
}

.brain-map-keyword-list-text {
    flex: 1;
    min-width: 0;
    color: var(--color-text-body);
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brain-map-keyword-list-text-deleted {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.brain-map-keyword-list-text-added {
    color: var(--color-success);
}

.brain-map-keyword-list-count {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.brain-map-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.brain-map-center {
    position: absolute;
    transform: translate(-50%, -50%);
    color: var(--color-text-title);
    font-size: 2.9rem;
    font-weight: 300;
    white-space: nowrap;
}

.brain-map-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    max-width: 10rem;
    transform: translate(-50%, -50%);
}

/* Bubbles are packed tightly enough that some overlap is unavoidable at high keyword counts —
   hovering brings that one to the front and grows it clear of its neighbors so its label (and
   whatever it was overlapping) stays readable. */
.brain-map-node:hover {
    z-index: 20;
}

.brain-map-label {
    color: var(--color-text-title);
    font-size: 1.15rem;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}

.brain-map-count {
    position: relative;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
    cursor: default;
}

.brain-map-count[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 0.4rem;
    background-color: #18181b;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}

.brain-map-label-row {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.brain-map-viewport {
    position: relative;
    width: 100%;
    max-height: calc(100vh - 20rem);
    overflow: auto;
    border-radius: 0.75rem;
    background-color: var(--color-bg-app);
}

.brain-map-canvas {
    margin: 2rem auto;
}

.brain-map-graph {
    position: relative;
    transform-origin: top left;
}

.brain-map-graph-lines {
    position: absolute;
    inset: 0;
}

.brain-map-graph-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    max-width: 9rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.6rem;
    background-color: #e9f2ff;
    box-shadow: 0 0.15rem 0.4rem rgba(24, 24, 27, 0.08);
    text-align: center;
    cursor: default;
    transform: translate(-50%, -50%);
}

.brain-map-graph-node-expandable {
    cursor: pointer;
    box-shadow: 0 0.15rem 0.4rem rgba(24, 24, 27, 0.08), 0 0 0 1.5px var(--color-btn-primary-bg);
}

.brain-map-graph-node-badge {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background-color: var(--color-btn-primary-bg);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
}

.brain-map-zoom-controls {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.brain-map-zoom-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--color-btn-secondary-border);
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--color-text-title);
    box-shadow: 0 0.25rem 0.75rem rgba(24, 24, 27, 0.12);
    cursor: pointer;
}

.brain-map-zoom-btn:hover:not(:disabled) {
    background-color: var(--color-btn-secondary-bg);
}

.brain-map-zoom-btn:disabled {
    color: var(--color-btn-disabled-text);
    cursor: not-allowed;
}

.brain-map-zoom-btn-active {
    background-color: var(--color-btn-primary-bg);
    border-color: var(--color-btn-primary-bg);
    color: #ffffff;
}

.brain-map-zoom-btn-active:hover {
    background-color: var(--color-btn-primary-bg-hover);
}

.brain-map-zoom-btn[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 100%;
    top: 50%;
    margin-right: 0.7rem;
    transform: translateY(-50%);
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    background-color: #18181b;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
}

.brain-map-graph-node-root {
    background-color: var(--color-btn-secondary-bg);
    font-weight: 700;
}

.brain-map-graph-node-count {
    color: var(--color-text-muted);
    font-size: 0.7rem;
}

.brain-map-graph-node-label {
    color: var(--color-text-title);
    font-size: 0.85rem;
    line-height: 1.25;
}

.brain-map-graph-node-root .brain-map-graph-node-label {
    font-size: 1.1rem;
}

.brain-map-graph-edge-label {
    position: absolute;
    padding: 0.05rem 0.35rem;
    border-radius: 0.3rem;
    background-color: var(--color-bg-app);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

.brain-map-remove {
    border: none;
    background: none;
    padding: 0;
    color: var(--color-text-title);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

/* Hidden until the deleted item is hovered — a deliberately quiet affordance since undoing a
   deletion isn't something that should compete for attention against the (already exposed)
   delete controls on every other keyword. */
.brain-map-undo {
    border: none;
    background: none;
    padding: 0;
    color: var(--color-error);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

.brain-map-node:hover .brain-map-undo,
.brain-map-keyword-list-row:hover .brain-map-undo {
    opacity: 1;
}

.brain-map-keyword-list-undo {
    margin-left: 0.4rem;
    flex-shrink: 0;
}

.brain-map-add-link {
    display: block;
    margin: 0 auto;
    border: none;
    background: none;
    color: var(--color-text-title);
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.brain-map-add-panel {
    position: relative;
    width: 18rem;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 1.5rem;
    border-radius: 1rem;
    background-color: var(--color-btn-secondary-bg);
}

.brain-map-add-panel .modal-form-heading {
    margin-bottom: 0.6rem;
}

.brain-map-suggestion {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0.6rem;
    background-color: #ffffff;
    color: var(--color-text-title);
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 0.15rem 0.4rem rgba(24, 24, 27, 0.05);
}

.brain-map-suggestion:hover {
    background-color: var(--color-btn-secondary-bg-hover);
}

.brain-map-add-input::placeholder {
    color: var(--color-text-muted);
}

/* Finished note view (view/edit two-page spread) */

.note-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 78rem;
}

.note-pages-row {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    flex-wrap: wrap;
}

.note-pages-row .note-file-page-surface {
    flex: 1;
    min-width: 18rem;
    max-width: 40rem;
}

.note-print-pages {
    display: none;
}

@media print {
    @page {
        size: A4;
        margin: 2cm;
    }

    .drawer,
    .primary-header,
    .primary-header-profile,
    .note-toolbar,
    .note-view,
    .wizard-resume-banner,
    .modal-overlay {
        display: none !important;
    }

    .note-print-pages {
        display: block;
    }

    .note-print-title {
        display: block;
        margin: 0 0 1.5rem 0;
        color: #000000;
        font-size: 1.6rem;
        font-weight: 700;
    }

    /* Continuous flowing document, not one printed page per NotePage: no forced page-break
       between them (the browser paginates wherever content actually runs out), and none of the
       on-screen card chrome (padding/shadow/rounded corners/per-page footer) that made sense as
       a UI "page" but not as a printed document. */
    .note-print-pages .note-file-page-surface {
        max-width: none;
        max-height: none;
        width: 100%;
        padding: 0;
        margin: 0 0 1.5rem 0;
        border-radius: 0;
        box-shadow: none;
        background: none;
        overflow: visible;
    }

    .note-print-pages .note-file-page-body {
        max-height: none;
        overflow: visible;
    }

    .note-print-pages .note-file-page-footer {
        display: none;
    }
}

.note-page-editable {
    outline: none;
    min-height: 8rem;
    white-space: normal;
    cursor: text;
}

.note-page-editable:focus {
    border-radius: 0.3rem;
    box-shadow: 0 0 0 2px var(--color-btn-secondary-border) inset;
}

.note-toolbar {
    position: fixed;
    top: 50%;
    right: 1.5rem;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 0.6rem;
    border-radius: 999px;
    background-color: #ffffff;
    box-shadow: 0 0.5rem 1.5rem rgba(24, 24, 27, 0.12);
    transform: translateY(-50%);
}

.note-toolbar-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    box-sizing: border-box;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--color-text-title);
    cursor: pointer;
}

.note-toolbar-icon:hover {
    background-color: var(--color-btn-secondary-bg);
}

.note-toolbar-icon-active {
    background-color: var(--color-btn-primary-bg);
    color: #ffffff;
}

.note-toolbar-text-icon {
    font-family: inherit;
    font-size: 0.95rem;
}

.note-toolbar-divider {
    width: 1.75rem;
    height: 1px;
    background-color: var(--color-btn-secondary-border);
}

.note-toolbar-done {
    margin-top: 0.25rem;
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
}

/* "More" panel: a color-swatch letter button with a small bar underneath showing the current
   pick — clicking it opens a small popover (six preset swatches + a "more colors" native
   picker) instead of the OS picker directly, and a font-size button (showing just the current
   size's initial(s) when closed) that opens a popover listing the full words. */
.note-toolbar-popover-wrap {
    position: relative;
}

.note-toolbar-color-swatch {
    flex-direction: column;
    gap: 0.1rem;
}

.note-toolbar-color-swatch::after {
    content: "";
    position: absolute;
    bottom: 0.35rem;
    width: 1.1rem;
    height: 0.2rem;
    border-radius: 999px;
    background-color: var(--swatch-color, currentColor);
}

.note-toolbar-popover {
    position: absolute;
    right: calc(100% + 0.7rem);
    top: 50%;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem;
    border-radius: 0.75rem;
    background-color: #ffffff;
    box-shadow: 0 0.5rem 1.5rem rgba(24, 24, 27, 0.15);
    transform: translateY(-50%);
    animation: wizard-ready-pop 0.15s ease-out;
}

.note-toolbar-swatch-btn {
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 1px solid rgba(24, 24, 27, 0.15);
    border-radius: 999px;
    cursor: pointer;
}

.note-toolbar-swatch-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 1px dashed var(--color-btn-secondary-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

.note-toolbar-swatch-more input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.note-toolbar-popover-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
}

.note-toolbar-popover-item {
    padding: 0.4rem 0.9rem;
    border: none;
    border-radius: 0.4rem;
    background: none;
    color: var(--color-text-title);
    font-size: 0.8rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.note-toolbar-popover-item:hover {
    background-color: var(--color-btn-secondary-bg);
}

.note-toolbar-popover-item-active {
    font-weight: 700;
}

.note-personal-notes-panel {
    position: fixed;
    top: 50%;
    right: 5.5rem;
    z-index: 30;
    width: 16rem;
    box-sizing: border-box;
    padding: 1rem;
    border-radius: 0.9rem;
    background-color: #ffffff;
    box-shadow: 0 0.5rem 1.5rem rgba(24, 24, 27, 0.12);
    animation: wizard-ready-pop 0.2s ease-out;
}

.note-personal-notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: grab;
}

.note-personal-notes-heading {
    margin: 0;
    color: var(--color-text-title);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
}

.note-personal-notes-close {
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.note-personal-notes-textarea {
    width: 100%;
    min-height: 8rem;
    box-sizing: border-box;
    padding: 0.6rem;
    border: 1px solid var(--color-btn-secondary-border);
    border-radius: 0.5rem;
    font: inherit;
    font-size: 0.85rem;
    resize: vertical;
}

.drag-capture-overlay {
    position: fixed;
    inset: 0;
    z-index: 45;
    cursor: grabbing;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 100%;
    top: 50%;
    z-index: 60;
    margin-right: 0.7rem;
    padding: 0.35rem 0.7rem;
    width: max-content;
    height: auto;
    bottom: auto;
    border-radius: 0.4rem;
    background-color: #18181b;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    transform: translateY(-50%);
}

.wizard-spinner {
    width: 3.5rem;
    height: 3.5rem;
    border: 3px solid var(--color-btn-secondary-bg);
    border-top-color: var(--color-text-title);
    border-radius: 50%;
    animation: wizard-spin 0.8s linear infinite;
}

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

/* Livelier "Creating Synapses" loader: pulsing neuron nodes around a slowly turning ring,
   standing in for the plain spinner on the wizard's Intake/Processing waiting screens. */
.synapse-loader {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
}

.synapse-loader::before {
    content: "";
    position: absolute;
    inset: 0.55rem;
    border: 2px dashed var(--color-btn-secondary-bg);
    border-radius: 50%;
    animation: synapse-spin 3s linear infinite;
}

.synapse-loader-node {
    position: absolute;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background-color: var(--color-text-title);
    animation: synapse-pulse 1.2s ease-in-out infinite;
}

.synapse-loader-node:nth-child(1) {
    top: 0;
    left: 50%;
    margin-left: -0.425rem;
    animation-delay: 0s;
}

.synapse-loader-node:nth-child(2) {
    top: 50%;
    right: 0;
    margin-top: -0.425rem;
    animation-delay: 0.2s;
}

.synapse-loader-node:nth-child(3) {
    bottom: 0;
    left: 50%;
    margin-left: -0.425rem;
    animation-delay: 0.4s;
}

.synapse-loader-node:nth-child(4) {
    top: 50%;
    left: 0;
    margin-top: -0.425rem;
    animation-delay: 0.6s;
}

@keyframes synapse-pulse {
    0%, 100% {
        transform: scale(0.55);
        opacity: 0.35;
        box-shadow: none;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
        box-shadow: 0 0 0.6rem rgba(24, 24, 27, 0.3);
    }
}

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

.wizard-loading-note {
    margin-top: 1.5rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.note-file-page-surface-clickable {
    position: relative;
    cursor: pointer;
}

.note-file-page-surface-clickable[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    background-color: #18181b;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}

/* Note detail: Reader / Brain Map history / Process */

.note-detail-header {
    min-height: 4.5rem;
    padding: 0.9rem 2.5rem;
}

.note-detail-breadcrumb {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 1rem;
}

.note-detail-breadcrumb-author {
    font-weight: 700;
}

.note-detail-breadcrumb-sep {
    color: var(--color-text-muted);
    font-weight: 400;
}

.note-detail-title-input {
    width: 14rem;
    padding: 0.2rem 0.5rem;
    font-size: 1rem;
}

.send-note-message {
    min-height: 4.5rem;
    resize: vertical;
}

.note-detail-feed {
    gap: 1.5rem;
}

.note-detail-actions-row {
    display: flex;
    align-self: flex-end;
    gap: 0.75rem;
}

/* Stands out from the plain Back to Notes/Go to Note buttons beside it — its own accent
   color, an icon, and uppercase label. */
.note-detail-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.note-detail-edit-btn:hover {
    background-color: #4338ca;
    border-color: #4338ca;
}

.note-reader-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 40rem;
    cursor: pointer;
}

.note-reader-cover[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translate(-50%, -100%);
    padding: 0.4rem 0.9rem;
    border-radius: 0.5rem;
    background-color: #18181b;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}

.note-reader-cover-card {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-height: calc(100vh - 22rem);
    padding: 1.5rem;
    border-radius: 0.75rem;
    background-color: var(--color-btn-secondary-bg);
    overflow: hidden;
}

.note-reader-cover-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 4rem;
    border-radius: 0 0 0.75rem 0.75rem;
    background: linear-gradient(to bottom, transparent, var(--color-btn-secondary-bg));
}

.note-reader-cover-page {
    pointer-events: none;
}

.note-reader-actions-row {
    display: flex;
    gap: 1rem;
}

.note-reader-nav-btn {
    min-width: 9rem;
    text-align: center;
}

.note-map-actions-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

/* Ask AI mode: single page + floating highlight bubbles */

.note-ai-view {
    display: flex;
    gap: 2rem;
    width: 100%;
    max-width: 76rem;
    align-items: flex-start;
    justify-content: center;
}

.note-ai-bubble-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 20rem;
    flex-shrink: 0;
}

.note-ai-bubble {
    box-sizing: border-box;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    background-color: var(--color-bg-post-user);
}

.note-ai-bubble-header-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.note-ai-bubble-dismiss {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border: none;
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
}

.note-ai-bubble-header {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border: none;
    background: none;
    padding: 0;
    color: var(--color-text-title);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.note-ai-bubble-caret {
    color: var(--color-text-muted);
    font-size: 0.7rem;
}

.note-ai-bubble-question {
    margin: 0.6rem 0 0 0;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.note-ai-bubble-answer-card {
    margin-top: 0.5rem;
    padding: 1rem;
    border-radius: 0.6rem;
    background-color: #ffffff;
    box-shadow: 0 0.25rem 0.75rem rgba(24, 24, 27, 0.06);
}

.note-ai-bubble-answer-card p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
}

.note-ai-bubble-star {
    display: block;
    margin-bottom: 0.5rem;
    text-align: center;
    color: var(--color-favorite);
}

.note-ai-bubble-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-family: inherit;
    resize: none;
    overflow: hidden;
    field-sizing: content;
    max-height: 12rem;
}

.note-ai-bubble-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.note-ai-bubble-add-btn {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
}

.note-ai-single-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.note-ai-single-page .note-file-page-surface {
    max-width: 42rem;
}

.note-ai-bottom-actions {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.note-ai-general-chat-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    box-sizing: border-box;
    border: none;
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--color-text-title);
    box-shadow: 0 0.5rem 1.5rem rgba(24, 24, 27, 0.12);
    cursor: pointer;
}

.note-ai-general-chat-toggle:hover,
.note-ai-general-chat-toggle-active {
    background-color: var(--color-btn-primary-bg);
    color: #ffffff;
}

.note-ai-general-chat {
    position: fixed;
    right: 1.5rem;
    bottom: 5.5rem;
    z-index: 30;
    width: 22rem;
    max-width: calc(100vw - 3rem);
    display: flex;
    flex-direction: column;
    border-radius: 0.9rem;
    background-color: #ffffff;
    box-shadow: 0 0.75rem 2rem rgba(24, 24, 27, 0.18);
    overflow: hidden;
}

.note-ai-general-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.1rem;
    background-color: var(--color-btn-primary-bg);
    color: #ffffff;
    font-weight: 700;
}

.note-ai-general-chat-close {
    border: none;
    background: none;
    color: #ffffff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.note-ai-general-chat-messages {
    min-height: 4rem;
    max-height: 18rem;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.note-ai-general-chat-empty {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.note-ai-general-chat-input {
    box-sizing: border-box;
    width: 100%;
    display: block;
    margin: 0;
    padding: 0.9rem 1.1rem;
    border: none;
    border-top: 1px solid var(--color-btn-secondary-border);
    border-radius: 0;
    font-size: 0.85rem;
    font-family: inherit;
    resize: none;
    overflow: hidden;
    field-sizing: content;
    max-height: 12rem;
}

.note-ai-float-btn {
    position: fixed;
    z-index: 50;
    transform: translate(-50%, calc(-100% - 0.5rem));
    padding: 0.4rem 0.9rem;
    border: none;
    border-radius: 999px;
    background-color: #18181b;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.25);
}

.note-ai-float-btn:hover {
    background-color: #000000;
}

/* Same story as mark.note-highlight below: baked into Page.Body, so it renders wherever that
   page is displayed unless explicitly scoped — a plain reader shouldn't see which sentences
   came from "Add to Document". */
.note-ai-inserted {
    background-color: transparent;
    border-radius: 0.2rem;
}

.process-document-column .note-ai-inserted,
.note-ai-single-page .note-ai-inserted {
    background-color: rgba(22, 163, 74, 0.12);
}

/* Ask AI "Add to Document" format commands (noteEditor.js applyFormatCommand) — baked into
   Page.Body/Heading like note-ai-inserted above, so these are plain, permanent text styling,
   not something scoped to the AI chat UI (unlike mark.note-highlight, which is an authoring
   marker and stays invisible outside the Process/Ask AI views — these are content the user
   deliberately chose, so they show everywhere the note is read). */
.note-format-subtitle {
    color: var(--color-text-subtitle);
    font-weight: 500;
}

/* More prominent than subtitle above — dark title color, bold, noticeably bigger — but still
   an inline treatment, not a real block-level heading (see NoteFormatCommand's doc comment). */
.note-format-heading {
    color: var(--color-text-title);
    font-weight: 700;
    font-size: 1.4em;
}

.note-format-red {
    color: var(--color-error);
}

.note-format-bold {
    font-weight: 700;
}

/* Highlight (background) commands are a separate family from text-color commands above —
   "kırmızı yap" recolors the text itself, "pembe/mavi/yeşil highlight yap" paints a
   highlighter-style background behind it. Same padding/radius/alpha language as
   mark.note-highlight for a consistent highlighter look. */
.note-format-highlight-pink,
.note-format-highlight-blue,
.note-format-highlight-green {
    padding: 0.05rem 0.15rem;
    border-radius: 0.2rem;
}

.note-format-highlight-pink {
    background-color: rgba(236, 72, 153, 0.35); /* --color-highlight-pink */
}

.note-format-highlight-blue {
    background-color: rgba(37, 99, 235, 0.35); /* --color-repost */
}

.note-format-highlight-green {
    background-color: rgba(22, 163, 74, 0.35); /* --color-success */
}

.note-format-large {
    font-size: 1.15em;
}

/* Brain Map history view */

.brain-map-history-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--color-btn-secondary-border);
    color: var(--color-text-body);
    font-size: 0.9rem;
}

.brain-map-node-deleted .brain-map-label {
    color: var(--color-error);
    text-decoration: line-through;
}

.brain-map-node-added .brain-map-label {
    color: var(--color-success);
}

.brain-map-tag {
    padding: 0.05rem 0.5rem;
    border-radius: 0.4rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.brain-map-tag-deleted {
    background-color: rgba(220, 38, 38, 0.12);
    color: var(--color-error);
}

.brain-map-tag-added {
    background-color: rgba(22, 163, 74, 0.12);
    color: var(--color-success);
}

/* Highlights left in the generated note by "Ask AI" — the <mark> is baked into Page.Body
   itself, so it's present in the DOM wherever that page is rendered (the plain reading views
   included). It should only actually show as a highlight where it's being worked with: the
   Process view's document column, and the Ask AI single-page authoring view — a reader just
   paging through the note shouldn't see someone's highlight marks. */

mark.note-highlight {
    background-color: transparent;
    color: inherit;
}

.process-document-column mark.note-highlight,
.note-ai-single-page mark.note-highlight {
    padding: 0.05rem 0.15rem;
    border-radius: 0.2rem;
    background-color: rgba(234, 179, 8, 0.35);
    color: inherit;
}

/* Process view */

.process-columns {
    display: grid;
    grid-template-columns: 16rem 20rem 1fr;
    gap: 1.5rem;
    width: 100%;
    align-items: start;
}

.process-summary-panel,
.process-chat-panel {
    box-sizing: border-box;
    max-height: calc(100vh - 14rem);
    overflow-y: auto;
    padding: 1rem;
    border-radius: 0.75rem;
    background-color: #ffffff;
    box-shadow: 0 0.25rem 1rem rgba(24, 24, 27, 0.06);
}

.process-summary-totals {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-btn-secondary-border);
}

.process-summary-total-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.process-summary-total-row {
    color: var(--color-text-title);
    font-size: 0.9rem;
    font-weight: 600;
}

.process-page-row {
    border-bottom: 1px solid var(--color-btn-secondary-border);
}

.process-page-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.25rem;
    border: none;
    background: none;
    color: var(--color-text-body);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.process-page-row-header-open {
    font-weight: 700;
    color: var(--color-text-title);
}

.process-page-count {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.process-page-highlight-list {
    list-style: none;
    margin: 0 0 0.5rem 0;
    padding: 0;
}

.process-page-highlight-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.35rem 0.5rem 0.35rem 1.25rem;
    border: none;
    border-radius: 0.4rem;
    background: none;
    color: var(--color-text-body);
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
}

.process-page-highlight-item:hover {
    background-color: var(--color-btn-secondary-bg);
}

.process-page-highlight-item-active {
    background-color: rgba(234, 179, 8, 0.18);
    color: var(--color-text-title);
    font-weight: 600;
}

/* Colored to match the "Added to Document" tag in the chat panel — the one action among a
   highlight's messages that actually changed the note, so it's worth spotting at a glance. */
.process-page-highlight-item-added {
    border-left: 3px solid var(--color-success);
    padding-left: calc(1.25rem - 3px);
    color: var(--color-success);
}

.process-chat-item {
    border-bottom: 1px solid var(--color-btn-secondary-border);
}

.process-chat-item-active {
    background-color: rgba(234, 179, 8, 0.08);
}

.process-chat-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.25rem;
    border: none;
    background: none;
    color: var(--color-text-title);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.process-chat-item-caret {
    color: var(--color-text-muted);
    font-size: 0.7rem;
}

.process-chat-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 0.25rem 1rem 0.25rem;
}

.process-chat-message {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Distinguishes a message that actually became a document edit ("Add to Document") from
   plain Q&A — each one gets its own tag rather than being lumped in with the chat history. */
.process-chat-message-added {
    padding: 0.5rem 0.6rem;
    border-radius: 0.4rem;
    border-left: 3px solid var(--color-success);
    background-color: rgba(22, 163, 74, 0.06);
}

.process-chat-added-tag {
    display: inline-block;
    width: fit-content;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background-color: var(--color-success);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.process-chat-question {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.process-chat-answer {
    margin: 0;
    color: var(--color-text-body);
    font-size: 0.85rem;
    line-height: 1.5;
}

.process-chat-followup-input {
    box-sizing: border-box;
    width: 100%;
    margin-top: 0.25rem;
}

.process-document-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.process-document-column .note-file-page-surface {
    max-width: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* All Users page */

.users-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
}

.users-search-input {
    flex: 1;
    min-width: 16rem;
}

.users-filter-select {
    box-sizing: border-box;
    padding: 0.65rem 0.9rem;
    border-radius: 0.6rem;
    border: 1px solid var(--color-btn-secondary-border);
    background-color: #ffffff;
    color: var(--color-text-title);
    font-family: inherit;
    font-size: 0.9375rem;
}

.users-bulk-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-sizing: border-box;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background-color: var(--color-btn-secondary-bg);
}

.users-bulk-count {
    margin-right: auto;
    color: var(--color-text-title);
    font-weight: 600;
    font-size: 0.9rem;
}

.users-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 1rem;
    background-color: #ffffff;
    box-shadow: 0 0.25rem 0.75rem rgba(24, 24, 27, 0.06);
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.users-table th {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--color-btn-secondary-border);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
}

.users-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-btn-secondary-border);
    color: var(--color-text-body);
    font-size: 0.875rem;
}

.users-table tr:last-child td {
    border-bottom: none;
}

.users-table-row-deactivated {
    opacity: 0.55;
}

.users-table-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.users-table-name {
    margin: 0;
    color: var(--color-text-title);
    font-weight: 600;
}

.users-table-username {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.users-table-role-badge {
    display: inline-block;
    border: none;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background-color: var(--color-btn-secondary-bg);
    color: var(--color-btn-secondary-text);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.users-table-role-badge:hover {
    background-color: var(--color-btn-secondary-bg-hover);
}

.users-table-role-badge-admin {
    background-color: var(--color-text-title);
    color: #ffffff;
}

.users-table-role-badge-admin:hover {
    background-color: var(--color-btn-primary-bg-hover);
}

.users-table-role-badge-moderator {
    background-color: var(--color-favorite);
    color: #ffffff;
}

.users-table-role-badge-moderator:hover {
    filter: brightness(0.92);
}

/* Rendered as a plain <span> (not a <button>) when the viewer can't toggle this row's role —
   either it's a protected Admin account, or the viewer is a Moderator without that power. No
   hover feedback, since there's nothing to click. */
.users-table-role-badge:not(button) {
    cursor: default;
}

.users-table-role-badge:not(button):hover {
    background-color: var(--color-btn-secondary-bg);
    filter: none;
}

.users-table-role-badge-admin:not(button):hover {
    background-color: var(--color-text-title);
}

.users-table-role-badge-moderator:not(button):hover {
    background-color: var(--color-favorite);
}

.users-table-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.users-table-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    background: none;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
}

.users-table-action:hover {
    background-color: var(--color-btn-secondary-bg);
}

.users-table-action:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0.5rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    background-color: #18181b;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}

.users-table-action-go {
    color: var(--color-success);
}

.users-table-action-warn {
    color: var(--color-favorite);
}

.users-table-action-danger {
    color: var(--color-error);
}

.users-generated-password {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0.65rem 0.9rem;
    border-radius: 0.6rem;
    background-color: var(--color-btn-secondary-bg);
    color: var(--color-text-title);
    font-family: monospace;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.05rem;
}

/* Dashboard page */

.dashboard-range-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 75rem;
    margin-bottom: 1.25rem;
}

.dashboard-range-heading {
    margin: 0;
    color: var(--color-text-title);
    font-size: 2rem;
    font-weight: 800;
}

.dashboard-range-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.dashboard-range-pill {
    box-sizing: border-box;
    padding: 0.45rem 0.9rem;
    border: none;
    border-radius: 999px;
    background-color: var(--color-btn-secondary-bg);
    color: var(--color-btn-secondary-text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.dashboard-range-pill:hover {
    background-color: var(--color-btn-secondary-bg-hover);
}

.dashboard-range-pill-active {
    background-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
}

.dashboard-custom-range {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
    width: 100%;
    max-width: 75rem;
    margin-bottom: 1.75rem;
}

.dashboard-custom-range-label {
    align-self: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

.dashboard-custom-range-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: var(--color-text-title);
    font-size: 0.8rem;
    font-weight: 500;
}

.dashboard-custom-range-field .form-input {
    width: auto;
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1px;
    width: 100%;
    max-width: 75rem;
    border-radius: 1rem;
    overflow: hidden;
    background-color: var(--color-btn-secondary-border);
    box-shadow: 0 0.25rem 0.75rem rgba(24, 24, 27, 0.06);
}

.dashboard-stat-tile {
    padding: 1.75rem 2rem;
    background-color: #ffffff;
}

.dashboard-stat-label {
    margin: 0 0 0.6rem 0;
    color: var(--color-text-title);
    font-size: 1.05rem;
    font-weight: 700;
}

.dashboard-stat-value {
    margin: 0;
    color: var(--color-text-title);
    font-size: 1.75rem;
    font-weight: 700;
}

.dashboard-stat-link {
    display: inline-block;
    margin-top: 0.6rem;
    color: var(--color-repost);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

.dashboard-stat-link:hover {
    text-decoration: underline;
}

/* Chat with AI page (admin) */

.admin-chat-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 50rem;
    height: 100%;
    margin: 0 auto;
    gap: 1rem;
}

.admin-chat-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.admin-chat-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.admin-chat-row-user {
    flex-direction: row-reverse;
}

.admin-chat-ai-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background-color: var(--color-text-title);
    color: #ffffff;
    font-size: 1rem;
}

.admin-chat-bubble {
    max-width: 75%;
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.admin-chat-bubble-user {
    border-bottom-right-radius: 0.25rem;
    background-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
}

.admin-chat-bubble-ai {
    border-bottom-left-radius: 0.25rem;
    background-color: var(--color-bg-post-user);
    color: var(--color-text-body);
}

.admin-chat-input-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.admin-chat-input-row .form-input {
    flex: 1;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Requests (admin/moderator inbox + everyone's My Requests) */

.requests-filter-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    background-color: rgba(234, 179, 8, 0.12);
    color: var(--color-text-body);
    font-size: 0.85rem;
}

.requests-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 1.5rem;
}

.requests-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.requests-status-filter {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.requests-status-pill {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--color-btn-secondary-border);
    border-radius: 999px;
    background-color: transparent;
    color: var(--color-text-body);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
}

.requests-status-pill-active {
    border-color: var(--color-btn-primary-bg);
    background-color: var(--color-btn-primary-bg);
    color: #ffffff;
}

.request-row {
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    margin-bottom: 0.9rem;
    border-radius: 0.9rem;
    background-color: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-btn-secondary-border);
    overflow: hidden;
}

.request-row-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.25rem;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.request-row-summary-static {
    cursor: default;
}

.request-status-dot {
    flex-shrink: 0;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background-color: var(--color-btn-secondary-border);
}

.request-status-unseen {
    background-color: var(--color-favorite);
}

.request-status-seen {
    background-color: var(--color-text-muted);
}

.request-status-actioned {
    background-color: var(--color-success);
}

.request-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.request-row-subject {
    color: var(--color-text-title);
    font-size: 0.95rem;
    font-weight: 700;
}

.request-row-meta {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.request-decision-badge {
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background-color: var(--color-btn-secondary-bg);
    color: var(--color-btn-secondary-text);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.request-decision-approved {
    background-color: var(--color-success);
    color: #ffffff;
}

.request-decision-rejected {
    background-color: #dc2626;
    color: #ffffff;
}

.request-row-caret {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: 0.7rem;
}

.request-row-detail {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0 1.25rem 1.25rem 1.25rem;
}

.request-row-detail-static {
    padding-top: 0;
}

.request-detail-content {
    margin: 0;
    color: var(--color-text-body);
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-line;
}

.request-reply-existing {
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    background-color: var(--color-bg-app);
}

.request-reply-existing-label {
    margin: 0 0 0.25rem 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.request-reply-existing p:last-child {
    margin: 0;
    font-size: 0.85rem;
}

.request-reply-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 4.5rem;
    resize: vertical;
}

.request-detail-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Onboarding tour (TourGuide.razor) */

.tour-dim {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: transparent;
    cursor: pointer;
}

.tour-highlight {
    position: fixed;
    z-index: 9001;
    border-radius: 0.6rem;
    box-shadow: 0 0 0 9999px rgba(24, 24, 27, 0.6);
    pointer-events: none;
    transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}

.tour-callout {
    position: fixed;
    z-index: 9002;
    width: 20rem;
    max-width: calc(100vw - 2rem);
    box-sizing: border-box;
    padding: 1.25rem;
    border-radius: 0.9rem;
    background-color: #ffffff;
    box-shadow: 0 1rem 2.5rem rgba(24, 24, 27, 0.25);
}

.tour-callout-arrow {
    position: absolute;
    left: 1.5rem;
    width: 0;
    height: 0;
    border-left: 0.6rem solid transparent;
    border-right: 0.6rem solid transparent;
}

.tour-callout-arrow-up {
    top: -0.6rem;
    border-bottom: 0.6rem solid #ffffff;
}

.tour-callout-arrow-down {
    bottom: -0.6rem;
    border-top: 0.6rem solid #ffffff;
}

.tour-callout-eyebrow {
    margin: 0 0 0.2rem 0;
    color: var(--color-axon);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tour-callout-title {
    margin: 0 0 0.5rem 0;
    color: var(--color-text-title);
    font-size: 1.05rem;
}

.tour-callout-text {
    margin: 0 0 1rem 0;
    color: var(--color-text-body);
    font-size: 0.85rem;
    line-height: 1.5;
}

.tour-callout-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tour-callout-progress {
    margin-right: auto;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.tour-callout-next {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
}

/* Axon — the onboarding/help assistant (AssistantWidget.razor) */

.axon-toggle {
    position: fixed;
    right: 1.75rem;
    bottom: 1.75rem;
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border: none;
    border-radius: 999px;
    background-color: var(--color-axon);
    color: #ffffff;
    box-shadow: 0 0.5rem 1.5rem rgba(59, 110, 165, 0.45);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.axon-toggle:hover {
    transform: scale(1.06);
}

.axon-panel {
    position: fixed;
    right: 1.75rem;
    bottom: 5.5rem;
    z-index: 8000;
    display: flex;
    flex-direction: column;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    height: 28rem;
    max-height: calc(100vh - 8rem);
    border-radius: 1rem;
    background-color: #ffffff;
    box-shadow: 0 1.5rem 3rem rgba(24, 24, 27, 0.25);
    overflow: hidden;
}

.axon-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.1rem;
    background-color: var(--color-axon);
    color: #ffffff;
}

.axon-panel-title {
    font-weight: 700;
}

.axon-panel-close {
    border: none;
    background: none;
    color: #ffffff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.axon-panel-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem;
}

.axon-panel-intro {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.axon-message {
    max-width: 85%;
    box-sizing: border-box;
    padding: 0.6rem 0.85rem;
    border-radius: 0.8rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

.axon-message p {
    margin: 0;
}

.axon-message p + p,
.axon-message .axon-md-list {
    margin-top: 0.5rem;
}

.axon-md-heading {
    font-weight: 700;
}

.axon-md-list {
    margin: 0;
    padding-left: 1.1rem;
}

.axon-message-user {
    align-self: flex-end;
    background-color: var(--color-axon);
    color: #ffffff;
    border-bottom-right-radius: 0.2rem;
}

.axon-message-axon {
    align-self: flex-start;
    background-color: var(--color-btn-secondary-bg);
    color: var(--color-text-body);
    border-bottom-left-radius: 0.2rem;
}

.axon-message-thinking {
    color: var(--color-text-muted);
    font-style: italic;
}

.axon-panel-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--color-btn-secondary-border);
}

.axon-panel-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--color-btn-secondary-border);
    border-radius: 999px;
    font: inherit;
    font-size: 0.85rem;
}

.axon-panel-input:focus {
    outline: none;
    border-color: var(--color-axon);
}

.axon-panel-send {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 999px;
    background-color: var(--color-axon);
    color: #ffffff;
    cursor: pointer;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.toast-host {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    pointer-events: none;
}

.toast-item {
    padding: 0.75rem 1.2rem;
    border-radius: 0.6rem;
    background-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 0.5rem 1.5rem rgba(24, 24, 27, 0.18);
    animation: toast-pop 0.25s ease-out;
}

.toast-item-error {
    background-color: var(--color-error);
}

@keyframes toast-pop {
    from { opacity: 0; transform: translateY(0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

.dino-game {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0.5rem auto;
}

.dino-game-compact {
    gap: 1rem;
}

.dino-game-track {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    outline: none;
    cursor: pointer;
}

.dino-player {
    position: absolute;
    font-size: 1.8rem;
    line-height: 1;
}

.dino-obstacle {
    position: absolute;
    background-color: var(--color-text-title);
    border-radius: 0.2rem;
}

.dino-ground {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-btn-secondary-border);
}

.dino-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    color: var(--color-text-title);
    font-weight: 700;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.35);
}

.dino-overlay-sub {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.dino-game-side-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dino-game-score {
    color: var(--color-text-body);
    font-size: 0.9rem;
    white-space: nowrap;
}

.dino-game-score strong {
    color: var(--color-text-title);
    font-size: 1.2rem;
}