/* =====================================================================
   Linea Web UI: base and components.
   Tokens, themes and text sizes come from the linea-theme package (Linea.Theme,
   _content/Linea.Theme/linea-theme.css), linked before this file in App.razor. Themes are
   selected with <html data-theme="…"> (cookie-driven, see UiPreferences).
   ===================================================================== */

/* Component tweaks for the high-contrast theme. */
[data-theme="contrast"] .card, [data-theme="contrast"] .panel { border-width: 2px; }

/* =====================================================================
   Base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 .5rem; font-weight: 600; letter-spacing: -.005em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.muted { color: var(--text-muted); }
.small { font-size: .875rem; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 1rem; top: -3rem; z-index: 100;
    background: var(--accent); color: var(--accent-contrast);
    padding: .6rem 1rem; border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* ---------- Forms & buttons ---------- */
input[type="text"], input[type="url"], input[type="search"], input[type="email"], input[type="password"], .auth-card input[type="number"], select {
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .6rem .8rem;
    min-height: 2.75rem;
    width: 100%;
}
input:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font: inherit; font-weight: 600;
    min-height: 2.75rem; padding: .55rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text)); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-block { width: 100%; }

.icon-btn {
    display: inline-grid; place-items: center;
    width: 2.75rem; height: 2.75rem;
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

.form-stack { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: .95rem; }
.field-inline { display: flex; align-items: center; gap: .6rem; }
.field-inline label { font-weight: 500; }
.validation-message { color: var(--danger); font-size: .875rem; }
.validation-summary { color: var(--danger); margin: 0; padding-inline-start: 1.2rem; }
.validation-summary:empty { display: none; }
input.invalid { border-color: var(--danger); }

.search-bar { display: flex; gap: .5rem; max-width: 40rem; }
.search-bar-large input { min-height: 3.25rem; font-size: 1.05rem; padding-inline: 1rem; }
.search-bar-large .btn { min-height: 3.25rem; padding-inline: 1.5rem; }

/* ---------- Menus (native <details>, no JS required) ---------- */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
    position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30;
    width: min(20rem, calc(100vw - 2rem));
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem;
}
.menu-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 0 0 .5rem; font-weight: 600; }
.menu-panel .menu-label:not(:first-of-type) { margin-top: 1rem; }
.menu-strong { font-weight: 600; margin: 0; }
.language-form { display: grid; gap: .4rem; justify-items: start; }
.language-form select { max-width: 100%; }
/* Settings: the theme drop-down and its Save (DisplayChoices). */
.theme-select { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.theme-select select { max-width: 100%; }
.language-form-compact { margin: 1rem 0 .5rem; padding-top: .75rem; border-top: 1px solid var(--border); justify-items: stretch; }
.language-form-compact .menu-label { margin: 0; }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.choice-row { display: flex; gap: .4rem; }
.choice-stack { display: grid; gap: .4rem; }
/* Colour vision switches (DisplayChoices): a track and knob, on when aria-checked. */
.vision-choice { gap: .6rem; }
.switch-track { position: relative; flex: none; width: 2.1rem; height: 1.2rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); transition: background .15s var(--ease); }
.switch-track::after { content: ""; position: absolute; top: .1rem; left: .12rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--text-muted); transition: transform .15s var(--ease), background .15s var(--ease); }
.vision-choice[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.vision-choice[aria-checked="true"] .switch-track { background: var(--accent); border-color: var(--accent); }
.vision-choice[aria-checked="true"] .switch-track::after { transform: translateX(.88rem); background: var(--accent-contrast); }
@media (prefers-reduced-motion: reduce) { .switch-track, .switch-track::after { transition: none; } }
.choice {
    display: flex; align-items: center; gap: .5rem;
    font: inherit; font-size: .9rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: .5rem .6rem; min-height: 2.75rem; cursor: pointer; text-align: start;
}
.choice:hover { background: var(--surface-2); }
.choice[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.swatch { width: 1.1rem; height: 1.1rem; border-radius: 999px; border: 1px solid rgb(0 0 0 / .2); flex: none; }
.theme-choice[data-swatch="system"] .swatch { background: linear-gradient(135deg, #f7f6f3 50%, #121316 50%); }
.theme-choice[data-swatch="light"] .swatch { background: #f7f6f3; }
.theme-choice[data-swatch="dark"] .swatch { background: #1b1d22; }
.theme-choice[data-swatch="parchment"] .swatch { background: #eadfc6; }
.theme-choice[data-swatch="contrast"] .swatch { background: linear-gradient(135deg, #000 50%, #ffe600 50%); }
.size-choice { justify-content: center; flex: 1; font-family: var(--font-display); font-weight: 600; }
.size-normal { font-size: .95rem; }
.size-large { font-size: 1.15rem; }
.size-x-large { font-size: 1.35rem; }

.user-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .25rem .75rem .25rem .25rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface); cursor: pointer;
    min-height: 2.75rem;
}
.user-chip:hover { background: var(--surface-2); }
.user-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
@media (max-width: 520px) { .user-name { display: none; } .user-chip { padding: .25rem; } }

.culture-form { display: flex; align-items: center; gap: .5rem; }
.culture-form select { width: auto; min-height: 2.25rem; padding-block: .3rem; }

/* ---------- Avatar ---------- */
.avatar {
    --avatar-hue: 220;
    display: inline-grid; place-items: center; flex: none;
    border-radius: 999px; object-fit: cover;
    font-family: var(--font-display); font-weight: 600;
    color: hsl(var(--avatar-hue) 45% 22%);
    background: linear-gradient(145deg, hsl(var(--avatar-hue) 70% 86%), hsl(calc(var(--avatar-hue) + 30) 60% 74%));
}
[data-theme="dark"] .avatar, [data-theme="contrast"] .avatar {
    color: hsl(var(--avatar-hue) 70% 90%);
    background: linear-gradient(145deg, hsl(var(--avatar-hue) 35% 30%), hsl(calc(var(--avatar-hue) + 30) 35% 22%));
}
@media (prefers-color-scheme: dark) {
    [data-theme="system"] .avatar {
        color: hsl(var(--avatar-hue) 70% 90%);
        background: linear-gradient(145deg, hsl(var(--avatar-hue) 35% 30%), hsl(calc(var(--avatar-hue) + 30) 35% 22%));
    }
}
.avatar-small { width: 2.1rem; height: 2.1rem; font-size: .85rem; }
.avatar-medium { width: 3rem; height: 3rem; font-size: 1.05rem; }
.avatar-large { width: clamp(5.5rem, 4rem + 5vw, 8rem); height: clamp(5.5rem, 4rem + 5vw, 8rem); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); box-shadow: var(--shadow); }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; }
.card-grid-wide { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
.card {
    position: relative;
    display: flex; gap: .9rem; align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.card-link:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow); transform: translateY(-1px); }
.card-link:focus-within { border-color: var(--accent); }
.card-body { min-width: 0; flex: 1; }
.card-title { font-size: 1.05rem; margin: 0 0 .15rem; }
.card-title a { color: var(--text); text-decoration: none; }
.card-link .card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-link .card-title a:focus-visible { outline: none; }
.card-link:has(.card-title a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.card-subtitle { color: var(--text-muted); font-size: .9rem; margin: 0; }
.card-text { font-size: .925rem; margin: .5rem 0 0; color: var(--text-muted); }
.card-meta { font-size: .825rem; color: var(--text-muted); margin: .35rem 0 0; }

.story-card { padding: 0; overflow: hidden; }
.story-card .card-body { padding: 1rem 1.1rem 1.1rem 0; }
.story-spine {
.story-cover { width: 3.5rem; height: 5rem; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
    --spine-hue: 20;
    flex: none; align-self: stretch; width: .55rem;
    background: linear-gradient(180deg, hsl(var(--spine-hue) 60% 55%), hsl(calc(var(--spine-hue) + 40) 55% 40%));
}

/* ---------- Chips & badges ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: .5rem 0 0; }
.chips:empty { display: none; }
.chip {
    display: inline-block; font-size: .85rem;
    padding: .2rem .65rem; border-radius: 999px;
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--border);
}
.chip-link { text-decoration: none; }
.chip-link:hover { border-color: var(--accent); color: var(--accent); }
.badges { display: flex; gap: .4rem; flex-wrap: wrap; margin: .75rem 0 0; }
.badge {
    display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: .25rem .6rem; border-radius: 6px; background: var(--surface-2); color: var(--text-muted); text-decoration: none;
}
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
a.badge:hover { text-decoration: underline; }
/* Content protection (docs/content-encryption-sites.md): the header badge and a locked item's panel. */
.protection-badge { vertical-align: middle; }
.hero-text .protection-badge { margin: .25rem 0 .5rem; }
a.protection-badge { color: inherit; text-decoration: none; }
a.protection-badge:hover, a.protection-badge:focus-visible { text-decoration: underline; }
.locked-panel { display: grid; gap: .75rem; justify-items: start; margin-block: 1rem; border-color: var(--warn); }
.locked-panel h2 { margin: 0; font-size: 1.2rem; }
.locked-panel p { margin: 0; }
.recovery-key-option summary { cursor: pointer; color: var(--accent); }
.protection-panel { display: grid; gap: .9rem; }
.protection-panel h2, .protection-panel h3 { margin: 0; }
.protection-modes { display: grid; gap: .6rem; border: 0; padding: 0; margin: 0; }
.protection-modes legend { font-weight: 600; margin-bottom: .4rem; }
.radio-card { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: var(--bg); }
.radio-card.is-chosen { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.radio-card.is-unavailable { opacity: .65; cursor: not-allowed; }
.radio-card input { margin-top: .25rem; }
.radio-card-text { display: grid; gap: .2rem; }
.callout { margin: 0; padding: .7rem .9rem; border-radius: var(--radius-sm); background: var(--accent-soft); }
.callout-warn { background: var(--warn-soft); }
.recovery-key-screen { display: grid; gap: .75rem; }
.recovery-key { font-size: 1.25rem; padding: .8rem 1rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); overflow-wrap: anywhere; user-select: all; margin: 0; }
.protection-tabs { display: flex; gap: .4rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.protection-tabs [role="tab"] { border: 0; background: none; padding: .5rem .8rem; font: inherit; color: var(--text-muted); border-bottom: 3px solid transparent; cursor: pointer; }
.protection-tabs [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.protection-people, .protection-maintenance { display: grid; gap: .6rem; }
.protection-maintenance { border-top: 1px solid var(--border); padding-top: .9rem; }
.grant-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.grant-list li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .45rem .6rem; background: var(--surface-2); border-radius: var(--radius-sm); }
.grant-people { border: 0; padding: 0; margin: 0; display: grid; gap: .3rem; }
.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.field-row > .field { flex: 1 1 10rem; }
.inline-field { display: flex; gap: .5rem; }
.inline-field input { flex: 1; min-width: 0; }
.change-passphrase { display: grid; gap: .6rem; border-top: 1px solid var(--border); padding-top: .9rem; }
.monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }

/* ---------- Page scaffolding ---------- */
/* A page's own look (PageSkin): the layout's wrapper takes a fixed theme (data-theme) and accent; the background image sits
   behind the page at the chosen opacity; a banner carries the header, with a gradient so the title reads over any picture. */
.site-skin { position: relative; min-height: 60vh; }
.page-background {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: var(--page-bg-image); background-size: cover; background-position: center; opacity: var(--page-bg-opacity, .15);
}
.page-banner {
    position: relative; margin: 0 0 1.75rem; min-height: 14rem; border-radius: calc(var(--radius) + 6px); overflow: hidden;
    background-image: var(--page-banner-image); background-size: cover; background-position: center; background-color: var(--surface-2);
}
.page-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--bg) 85%, transparent) 0%, color-mix(in srgb, var(--bg) 35%, transparent) 60%, transparent 100%); }
.page-banner-content { position: relative; z-index: 1; padding: 4rem 1.5rem 1.25rem; }
.page-banner-content .page-header, .page-banner-content .profile-hero { margin-bottom: 0; }
.page-banner-content .profile-hero { background: transparent; border: 0; padding: 0; }
.page-banner-content h1 { text-shadow: 0 1px 2px color-mix(in srgb, var(--bg) 70%, transparent); }
.page-banner:not(.page-banner-titled) { min-height: 10rem; }
.member-remove { margin-inline-start: .75rem; }
/* A record's title box filled by one of its images (PageSkin, Appearance "Title box image"): the title over the image,
   the small picture beside it hidden (the Pictures box still holds it). */
.page-title-image > .profile-hero, .page-title-image > .page-header {
    position: relative; isolation: isolate; overflow: hidden; min-height: 14rem; align-items: flex-end;
    padding: 4rem 1.75rem 1.5rem; margin-bottom: 2rem;
    border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px);
    background: var(--page-title-image) center / cover no-repeat, var(--surface-2);
}
.page-title-image > .profile-hero::before, .page-title-image > .page-header::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to top, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 45%, transparent) 60%, transparent 100%);
}
.page-title-image .profile-image, .page-title-image > .profile-hero > .avatar { display: none; }
.page-title-image h1 { text-shadow: 0 1px 2px color-mix(in srgb, var(--bg) 70%, transparent); }
.page-title-image > .page-header-actions.has-picture { grid-template-columns: 1fr auto; }
.page-title-image > .page-header-actions.has-picture > h1 { grid-column: 1; grid-row: 1; }
.page-title-image > .page-header-actions.has-picture > :not(h1):not(.btn):not(.page-actions):not(.profile-image) { grid-column: 1 / -1; }
.page-title-image > .page-header-actions.has-picture > .btn, .page-title-image > .page-header-actions.has-picture > .page-actions { grid-column: 2; grid-row: 1; }
.page-banner-content .page-title-image > .profile-hero, .page-banner-content .page-title-image > .page-header { margin-bottom: 0; }
@media (max-width: 600px) { .page-title-image > .profile-hero, .page-title-image > .page-header { min-height: 11rem; padding: 3rem 1.25rem 1.25rem; } }
.appearance-editor { margin: 0 0 1.5rem; }
.appearance-editor > .appearance-summary { list-style: none; cursor: pointer; }
.appearance-editor > .appearance-summary::-webkit-details-marker { display: none; }
.appearance-editor > .appearance-summary > h2 { margin: 0; font-size: 1.05rem; }
.appearance-editor > .appearance-summary > h2::before { content: "▸ "; color: var(--text-muted); }
.appearance-editor[open] > .appearance-summary > h2::before { content: "▾ "; }
.appearance-editor[open] > .appearance-summary { margin-bottom: .75rem; }
.appearance-fields { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.appearance-fields .field-inline { display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; }
.appearance-fields input[type="range"] { width: 100%; }
[data-theme="contrast"] .page-background { display: none; }
.page-header { margin-bottom: 1.75rem; }
.page-header .lead { max-width: 44rem; }
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 .4rem; }
.lead { font-size: 1.15rem; color: var(--text-muted); }
.breadcrumb { display: flex; gap: .5rem; font-size: .9rem; color: var(--text-muted); margin-bottom: 1.25rem; }
.breadcrumb a { color: var(--text-muted); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .9rem; }
.section-title { font-size: 1.35rem; display: flex; align-items: center; gap: .6rem; }
.count {
    font-family: var(--font-body); font-size: .8rem; font-weight: 700;
    background: var(--surface-2); color: var(--text-muted);
    padding: .05rem .55rem; border-radius: 999px;
}
.plain-list { list-style: none; padding: 0; margin: 0; }
/* The home page's hero: the whole width of the page, centred. */
.home-hero { padding: 2.5rem 0 2.75rem; text-align: center; }
/* The Options menu (Change appearance) at the hero's top right; it opens to the left, inside the page. */
.home-hero { position: relative; }
.home-options { position: absolute; top: .75rem; right: 0; text-align: start; z-index: 2; }
.home-options:empty { display: none; }
@media (max-width: 48rem) {
    /* Narrow screens: on a line of its own above the eyebrow, so it never covers it. */
    .home-options { position: static; display: flex; justify-content: flex-end; margin: -1.5rem 0 .75rem; }
}
.home-hero h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem); text-wrap: balance; }
.home-hero .lead { max-width: 46rem; margin-inline: auto; text-wrap: balance; }
.home-hero .search-bar { margin-inline: auto; text-align: start; }
.home-section { margin-top: 2.5rem; }
.prose { max-width: 46rem; font-size: 1.075rem; margin-bottom: 2rem; }
.updated { margin-top: 2.5rem; }

.pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 2rem; }
.pager > span[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
.pager-jump { display: flex; align-items: center; gap: .5rem; margin: 0; }
.pager-jump label { font-weight: 600; }
.pager-number { width: 5.5rem; min-height: 2.5rem; padding: .35rem .5rem; font: inherit; text-align: center;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
@media (max-width: 40rem) {
    /* Phones: the symbols carry First, Previous, Next and Last; the words stay for screen readers. */
    .pager > .btn { padding-inline: .7rem; font-size: 0; }
    .pager > .btn > span[aria-hidden="true"] { font-size: 1rem; }
    /* The page box on a row of its own, the four buttons together under it. */
    .pager-jump { flex-basis: 100%; justify-content: center; order: -1; }
}

/* ---------- Status ---------- */
.status {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: 1rem 1.1rem; border-radius: var(--radius);
    background: var(--surface); border: 1px dashed var(--border); color: var(--text-muted);
    margin-bottom: 1rem;
}
.status-error { border: 1px solid var(--danger); background: var(--danger-soft); color: var(--text); }
.status-error strong { color: var(--danger); }
.spinner {
    width: 1.1rem; height: 1.1rem; border-radius: 999px;
    border: 2px solid var(--border); border-top-color: var(--accent);
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================================
   Profiles
   ===================================================================== */
.profile-hero {
    display: flex; gap: 1.75rem; align-items: center;
    padding: 1.75rem; margin-bottom: 2rem;
    background:
        radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 55%),
        var(--surface);
    border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px);
}
.profile-hero h1 { margin-bottom: .25rem; }
.profile-hero .lead { margin: 0; }
.hero-text { min-width: 0; }
.story-hero { display: block; }
.story-hero .lead { max-width: 48rem; font-family: var(--font-display); font-style: italic; }

.meta-row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1.25rem 0 0; }
.meta-row dt { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.meta-row dd { margin: 0; font-weight: 500; }

.profile-layout { display: grid; grid-template-columns: minmax(16rem, 20rem) 1fr; gap: 2rem; align-items: start; }
.profile-aside { display: grid; gap: 1rem; position: sticky; top: 5.5rem; }
.profile-main { min-width: 0; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.panel-title { font-family: var(--font-body); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: .75rem; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1rem; margin: 0; }
.facts dt { color: var(--text-muted); font-size: .9rem; }
.facts dd { margin: 0; font-weight: 500; font-size: .95rem; }

.toc a { display: block; padding: .3rem 0; color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--accent); }

.swatches { display: flex; flex-wrap: wrap; gap: .35rem .75rem; }
.color-chip { display: inline-flex; align-items: center; gap: .35rem; }
.color-dot { width: .95rem; height: .95rem; border-radius: 999px; border: 1px solid rgb(0 0 0 / .25); flex: none; }

.profile-section { margin-bottom: 2.5rem; }
.quote {
    margin: 0 0 1rem;
    padding: 1.1rem 1.3rem;
    background: var(--surface); border: 1px solid var(--border);
    border-inline-start: 4px solid var(--accent);
    border-radius: var(--radius-sm);
}
.quote blockquote { margin: 0; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.45; }
.quote blockquote p { margin: 0; }
.quote blockquote p::before { content: "“"; } .quote blockquote p::after { content: "”"; }
.quote figcaption { margin-top: .5rem; color: var(--text-muted); font-size: .9rem; }

.trait-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.trait { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .9rem 1.1rem; }
.trait-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.trait p { margin: .35rem 0 0; color: var(--text-muted); }

/* ---------- Story timeline ---------- */
.toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.spoiler-switch { display: contents; }   /* the story timeline's spoiler switch: a GET form, laid out as its button */
.switch {
    display: inline-flex; align-items: center; gap: .6rem;
    font: inherit; font-weight: 600; color: var(--text);
    background: none; border: 0; padding: .25rem; cursor: pointer; min-height: 2.75rem;
}
.switch-track { position: relative; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); transition: background .15s var(--ease); }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 1.15rem; height: 1.15rem; border-radius: 999px; background: var(--text-muted); transition: transform .15s var(--ease), background .15s; }
.switch[aria-checked="true"] .switch-track { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"] .switch-thumb { transform: translateX(1.1rem); background: var(--accent-contrast); }

.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; top: .5rem; bottom: .5rem; left: 1.05rem; width: 2px; background: var(--border); }
.timeline-step { position: relative; padding-inline-start: 3.25rem; padding-bottom: 1.5rem; }
.timeline-marker {
    position: absolute; left: 0; top: .6rem;
    display: grid; place-items: center;
    width: 2.2rem; height: 2.2rem; border-radius: 999px;
    background: var(--surface); border: 2px solid var(--accent); color: var(--accent);
    font-weight: 700; font-size: .9rem;
}
.parallel-label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: .9rem 0 .5rem; }
.timeline-points { display: grid; gap: 1rem; }
.timeline-points.is-parallel { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.timeline-point { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; }
.timeline-point h3 { margin-bottom: .35rem; }
.timeline-point > p { color: var(--text-muted); }
.point-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .6rem; font-size: .9rem; }
.point-meta .chips { margin: 0; }
.meta-item { color: var(--text-muted); }
.passage {
    margin: .75rem 0 0; padding: .75rem 1rem;
    border-inline-start: 3px solid var(--border);
    font-family: var(--font-display); font-size: 1.05rem; font-style: italic;
    background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.passage p { margin: 0; }
.passage-title { font-style: normal; font-size: .8rem; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: .25rem !important; }
.spoiler > summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: .25rem 0; }

/* =====================================================================
   Account
   ===================================================================== */
.auth-card {
    max-width: 28rem; margin: 2rem auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
    padding: 2rem; box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 1.9rem; }
.auth-alt { margin: 1.25rem 0 0; text-align: center; color: var(--text-muted); }
.divider { display: flex; align-items: center; gap: 1rem; color: var(--text-muted); margin: 1.5rem 0; font-size: .85rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.provider-list { display: grid; gap: .6rem; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 900px) {
    .profile-layout { grid-template-columns: 1fr; }
    .profile-aside { position: static; }
    .toc { display: none; }
}
@media (max-width: 600px) {
    .profile-hero { flex-direction: column; align-items: flex-start; padding: 1.25rem; gap: 1rem; }
    .search-bar { flex-direction: column; }
    .auth-card { padding: 1.4rem; margin-top: 1rem; }
    .timeline-step { padding-inline-start: 2.9rem; }
}

/* ---------- Blazor framework UI ---------- */
#blazor-error-ui {
    display: none;
    position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 1000;
    background: var(--danger-soft); color: var(--text); border: 1px solid var(--danger);
    padding: .75rem 1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow);
    align-items: center; gap: 1rem;
}
#blazor-error-ui .dismiss { background: none; border: 0; font-size: 1.25rem; cursor: pointer; color: inherit; }
.blazor-error-boundary { background: var(--danger-soft); padding: 1rem; border-radius: var(--radius-sm); color: var(--text); }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ---------- login pop-up, account menu links, settings ---------- */
.login-popover {
    width: min(24rem, calc(100vw - 2rem));
    margin: auto; padding: 1.5rem;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.login-popover::backdrop { background: color-mix(in srgb, var(--text) 35%, transparent); }
.login-popover h2 { margin: 0 0 1rem; font-size: 1.35rem; }
/* The search filter pop-up (SearchFilterPopover) and the filter panel it leads to on /search. */
.search-filter-popover select, .search-filter-popover input[type="search"] {
    width: 100%; min-height: 2.75rem; padding-inline: .75rem;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font: inherit;
}
.search-filter-popover :is(select, input):focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.search-filter-panel { margin-top: 1rem; }
.search-filter-panel h2 { font-size: 1.2rem; margin: 0 0 .5rem; }
.search-filter-type { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; }
.search-filter-type .browse-field { flex: 1 1 14rem; max-width: 24rem; }
.search-filter-type .btn { min-height: 2.75rem; }
.button-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.menu-links { display: grid; margin: .75rem 0; border-block: 1px solid var(--border); padding-block: .5rem; }
.menu-link { padding: .45rem .25rem; color: var(--text); text-decoration: none; border-radius: calc(var(--radius) / 2); }
.menu-link:hover, .menu-link:focus-visible { background: var(--surface-2); }
.search-bar select { min-height: 2.75rem; padding-inline: .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.search-bar label:not(.visually-hidden) { align-self: center; font-weight: 600; }
/* Settings boxes flow down columns (CSS multi-column), so a short box is followed at once by the next one: no empty
   space under it as there was with a grid, whose row is as tall as its tallest box. */
.settings-grid { columns: 19rem; column-gap: 1.25rem; }
.settings-grid > .panel, .settings-grid > .layout-box { break-inside: avoid; margin-bottom: 1.25rem; }
/* One column of boxes (the character and story pages). */
.layout-stack { display: grid; gap: 1.25rem; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.panel h2 { margin-top: 0; font-size: 1.2rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; }
.facts dt { font-weight: 600; color: var(--text-muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.status-success { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* ---------- navigation drop-downs, card previews, related lists ---------- */
.nav-menu > summary { cursor: pointer; padding: .5rem .75rem; border-radius: var(--radius-sm); font-weight: 600; }
.nav-menu > summary::after { content: " ▾"; font-size: .8em; }
.nav-menu[open] > summary, .nav-menu > summary:hover { background: var(--surface-2); }
.nav-menu:has(a.active) > summary { color: var(--accent); }
.nav-panel { left: 0; right: auto; width: min(14rem, calc(100vw - 2rem)); display: grid; padding: .5rem; }
.nav-panel a { padding: .5rem .6rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.nav-panel a:hover, .nav-panel a:focus-visible { background: var(--surface-2); }
.nav-panel a.active { color: var(--accent); font-weight: 600; }
.nav-heading { margin: .5rem .6rem .15rem; padding-top: .5rem; border-top: 1px solid var(--border); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.nav-panel { max-height: calc(100vh - 5rem); overflow-y: auto; }
.new-menu > summary::after { content: none; }
.new-menu > .nav-panel { left: auto; right: 0; }
.new-menu .nav-heading:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.has-preview { position: relative; }
.card-preview {
    position: absolute; left: 0; right: 0; top: calc(100% + .35rem); z-index: 20;
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: .75rem .9rem;
    font-size: .92rem; line-height: 1.45; pointer-events: none;
    opacity: 0; visibility: hidden; transform: translateY(-.25rem);
    transition: opacity .12s var(--ease), transform .12s var(--ease), visibility .12s;
}
.has-preview:hover > .card-preview, .has-preview:focus-within > .card-preview { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .card-preview { transition: none; } }
.related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.related-list > li { padding: .3rem 0; border-bottom: 1px solid var(--border); }
.related-list > li:last-child { border-bottom: 0; }
/* Links inside a whole-card link (e.g. an entity's website, a work's author tags) must sit above the card overlay. */
.card-link .card-meta a, .card-link .work-credits a { position: relative; z-index: 1; }
/* A work's author and narrator tags under its title (the Works list). */
.work-credits { margin-top: .4rem; gap: .3rem; }
.work-credits .chip { font-size: .78rem; }
.work-credits .chip-role { color: var(--text-muted); margin-right: .15rem; }
.work-credits .chip-more { color: var(--text-muted); }

/* ---------- catalog tab filters (search, drop-downs, sort) ---------- */
.browse-filters {
    display: grid; gap: .75rem 1rem; align-items: start;   /* tops align; a hint under one box doesn't move it */
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin-top: 1rem; padding: 1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.browse-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.browse-field label { font-weight: 600; font-size: .9rem; line-height: 1.4; }
.browse-field small { font-size: .78rem; }
.browse-field input, .browse-field select {
    min-height: 2.75rem; width: 100%; padding-inline: .75rem;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg); color: var(--text); font: inherit;
}
.browse-field input:focus-visible, .browse-field select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* How the text filters match: two check boxes under a legend styled as the other fields' labels. */
.browse-field-checks { border: 0; margin: 0; padding: 0; }
.browse-field-checks legend { font-weight: 600; font-size: .9rem; line-height: 1.4; padding: 0; margin-bottom: .3rem; }
.browse-check { display: flex; align-items: center; gap: .5rem; font-weight: 500; min-height: 1.6rem; }
.browse-field .browse-check input { min-height: auto; width: 1.15rem; padding: 0; }   /* not the text boxes' size */
/* Pushed down by one label (.9rem × 1.4) plus the field gap, so the buttons line up with the boxes. */
.browse-actions { display: flex; gap: .5rem; flex-wrap: wrap; padding-top: calc(.9rem * 1.4 + .3rem); }
.browse-actions .btn { min-height: 2.75rem; }
@media (max-width: 40rem) {
    .browse-filters { grid-template-columns: 1fr; }
    .browse-actions { padding-top: 0; }
}

/* ---------- create and edit ---------- */
.page-header-actions { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 1rem; }
.page-header-actions > :not(h1):not(.btn):not(.page-actions) { grid-column: 1 / -1; }
.page-header-actions > .btn, .page-header-actions > .page-actions { grid-column: 2; grid-row: 1; align-self: center; }
/* A details page headed by the record's picture (DetailsPage HeaderPicture): the picture in its own first column. */
.page-header-actions.has-picture { grid-template-columns: auto 1fr auto; }
.page-header-actions.has-picture > .profile-image { grid-column: 1; grid-row: 1 / span 6; align-self: start; }
.page-header-actions.has-picture > h1 { grid-column: 2; }
.page-header-actions.has-picture > :not(h1):not(.btn):not(.page-actions):not(.profile-image) { grid-column: 2 / -1; }
.page-header-actions.has-picture > .btn, .page-header-actions.has-picture > .page-actions { grid-column: 3; }
@media (max-width: 640px) {
    .page-header-actions.has-picture { grid-template-columns: 1fr auto; }
    .page-header-actions.has-picture > .profile-image { grid-column: 1 / -1; grid-row: 1; }
    .page-header-actions.has-picture > h1 { grid-column: 1; grid-row: 2; }
    .page-header-actions.has-picture > :not(h1):not(.btn):not(.page-actions):not(.profile-image) { grid-column: 1 / -1; }
    .page-header-actions.has-picture > .btn, .page-header-actions.has-picture > .page-actions { grid-column: 2; grid-row: 2; }
}
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.edit-form { display: grid; gap: 1.1rem; max-width: 52rem; }
.edit-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.edit-field > label, .edit-field legend { font-weight: 600; }
.edit-field input:not([type="checkbox"]), .edit-field select, .edit-field textarea, .bulk-table input {
    width: 100%; min-height: 2.75rem; padding: .5rem .75rem; font: inherit;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.edit-field textarea { min-height: 5rem; resize: vertical; }
/* Plain text fields and tags: one line to start with, growing with the text (auto-grow.js as the fallback), and still
   resizable by hand. */
.edit-field textarea.auto-grow { min-height: 2.75rem; field-sizing: content; max-height: 24rem; overflow-y: auto; }
.edit-field fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem 1rem; margin: 0; }
.edit-field .required { color: var(--danger); }
.choice-list { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.choice { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; }
.field-error { color: var(--danger); font-weight: 600; }
.edit-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.search-pick .search-results { list-style: none; margin: .25rem 0 0; padding: .25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); max-height: 16rem; overflow: auto; }
.search-pick .search-results li { padding: .2rem .4rem; }
.btn-link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
.status-error { border: 1px solid var(--danger); background: var(--danger-soft); padding: .75rem 1rem; border-radius: var(--radius-sm); }
.markdown-editor { display: flex; flex-direction: column; gap: .35rem; }
.markdown-editor-host { min-height: 200px; }
.markdown-fallback { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; min-height: 12rem; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown table { border-collapse: collapse; }
.markdown th, .markdown td { border: 1px solid var(--border); padding: .3rem .6rem; }
.markdown pre { overflow-x: auto; padding: .75rem; background: var(--surface-2); border-radius: var(--radius-sm); }
.markdown blockquote { margin: 0; padding-inline-start: 1rem; border-inline-start: 3px solid var(--border); color: var(--text-muted); }
.markdown.lead p { margin: 0; }

/* ---------- attached files ---------- */
.attachments { grid-column: 1 / -1; }
.attachment-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.attachment { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); min-width: 0; }
.attachment-thumb img { display: block; width: 5rem; height: 5rem; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface); }
.attachment-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; overflow-wrap: anywhere; }
.attachment-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.attachment-actions code { font-size: .75rem; }
.attachment-upload { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; }
.attachment-upload label:first-child { font-weight: 600; width: 100%; }
.attachment-upload input[type="text"] { flex: 1 1 14rem; min-height: 2.5rem; padding: .4rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; }
.attachment-upload small { width: 100%; }
.btn-link.danger { color: var(--danger); }
.markdown img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

/* ---------- profile picture (settings) ---------- */
.avatar-settings { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.avatar-settings .avatar-large { width: 6rem; height: 6rem; object-fit: cover; }
.avatar-settings form { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
img.avatar { object-fit: cover; }
/* .avatar sets display, which would override the hidden attribute: the initials stood beside a picture that loaded,
   and a picture that failed stayed as a broken image. */
.avatar[hidden] { display: none; }

/* ---------- primary picture ---------- */
.profile-image { display: block; flex: 0 0 auto; width: clamp(7rem, 5rem + 8vw, 12rem); aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--surface-2); }
.profile-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); width: fit-content; }

/* ---------- picture choice dialog ---------- */
.crop-dialog { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 1.25rem; max-width: min(56rem, calc(100vw - 2rem)); box-shadow: var(--shadow); }
.crop-dialog::backdrop { background: rgb(0 0 0 / .6); }
.crop-dialog h2 { margin-top: 0; font-size: 1.2rem; }
.crop-stage { position: relative; display: flex; justify-content: center; margin: .75rem 0; user-select: none; touch-action: none; }
.crop-stage img { display: block; max-width: min(52rem, calc(100vw - 4.5rem)); max-height: 65vh; }
.crop-frame { position: absolute; box-sizing: border-box; border: 2px solid #fff; outline: 1px solid rgb(0 0 0 / .5); box-shadow: 0 0 0 100vmax rgb(0 0 0 / .45); cursor: move; }
.crop-frame:focus-visible { outline: 3px solid var(--focus); }
.crop-handle { position: absolute; width: 14px; height: 14px; background: #fff; border: 1px solid rgb(0 0 0 / .6); }
.crop-nw { left: -8px; top: -8px; cursor: nwse-resize; }
.crop-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.crop-ne { right: -8px; top: -8px; cursor: nesw-resize; }
.crop-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.crop-square { display: inline-flex; gap: .4rem; align-items: center; margin-bottom: .5rem; }
.crop-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- pictures panel and full-screen viewer ---------- */
a.profile-image { padding: 0; border: 0; cursor: zoom-in; }
.gallery { grid-column: 1 / -1; }
.gallery-main { margin: 0; }
.gallery-open { display: block; width: 100%; padding: 0; border: 0; background: var(--surface-2); border-radius: var(--radius-sm); cursor: zoom-in; }
.gallery-open img { display: block; width: 100%; max-height: 32rem; object-fit: contain; border-radius: var(--radius-sm); }
.gallery-main figcaption { margin-top: .5rem; }
.gallery-strip { list-style: none; display: flex; gap: .5rem; flex-wrap: wrap; margin: .75rem 0 0; padding: 0; }
.gallery-strip a { display: block; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); background: none; }
.gallery-strip a.is-current { border-color: var(--accent); }
.gallery-strip img { display: block; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: calc(var(--radius-sm) - 2px); }
/* A picture's viewer shows while the address names it (#picture-<id>, the static page: links only, no script), or
   while the live page holds it open (.is-open; ImageGallery). */
.viewer:not(:target):not(.is-open) { display: none; }
.viewer { position: fixed; inset: 0; z-index: 100; background: rgb(0 0 0 / .92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 1rem; outline: none; }
.viewer img { max-width: calc(100vw - 6rem); max-height: calc(100vh - 6rem); object-fit: contain; }
.viewer-caption { color: #eee; margin: 0; text-align: center; }
.viewer a { position: absolute; display: flex; align-items: center; justify-content: center; background: rgb(255 255 255 / .12); color: #fff; border: 0; border-radius: 999px; width: 3rem; height: 3rem; font-size: 2rem; line-height: 1; text-decoration: none; }
.viewer a:hover, .viewer a:focus-visible { background: rgb(255 255 255 / .28); }
.viewer-close { top: 1rem; right: 1rem; }
.viewer-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.viewer-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---------- adding pictures (Pictures panel) ---------- */
.gallery-add { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: 1rem; }
.gallery-add label.btn { cursor: pointer; }
.gallery-add label.is-disabled { opacity: .6; pointer-events: none; }
.gallery-add:focus-within label.btn { outline: 3px solid var(--focus); outline-offset: 2px; }
.gallery-add small, .gallery-add p { width: 100%; margin: 0; }
.gallery-main figcaption .btn-link, .gallery-main figcaption .badge { margin-inline-start: .5rem; }

/* ---------- "based on" links ---------- */
.real-links { grid-column: 1 / -1; }
.social-links { grid-column: 1 / -1; }
.social-list a { overflow-wrap: anywhere; }
.social-add-title { font-size: 1rem; margin: 1rem 0 .5rem; }
.social-form .field-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.social-form .field-row > .field { flex: 1 1 14rem; min-width: 0; }
.link-add { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin-top: 1rem; position: relative; }
.link-add > label { font-weight: 600; width: 100%; }
.link-add select, .link-add input[type="search"] { min-height: 2.5rem; padding: .4rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; }
.link-add input[type="search"] { flex: 1 1 16rem; }
.link-add .search-results { list-style: none; width: 100%; margin: 0; padding: .25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); max-height: 16rem; overflow: auto; }
.link-add .search-results li { padding: .2rem .4rem; }
.link-add small, .link-add p { width: 100%; margin: 0; }

/* ---------- record IDs ---------- */
.record-id { display: inline-flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline; }
.record-id code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85em; user-select: all; overflow-wrap: anywhere; }

/* ---------- kind-of-being window ---------- */
.kind-backdrop { position: fixed; inset: 0; z-index: 90; background: rgb(0 0 0 / .55); }
.kind-dialog { position: fixed; z-index: 91; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(48rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.kind-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kind-head h2 { margin: 0; font-size: 1.2rem; }
.kind-close { font-size: 1.25rem; line-height: 1; }
.kind-search label, .kind-rank label { display: block; font-weight: 600; margin-bottom: .25rem; }
.kind-search input { width: 100%; }
.kind-results { list-style: none; margin: .35rem 0 0; padding: .25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); max-height: 14rem; overflow: auto; }
.kind-results li { padding: .2rem .4rem; }
.kind-results button { text-align: left; }
.kind-ranks { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.kind-rank select { width: 100%; }
.kind-rank small { display: block; margin-top: .2rem; }
.kind-current { margin: 0; }
.kind-actions { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
.kind-browse { margin-top: .5rem; }
.eyebrow-link { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: .2em; }
.eyebrow-link:hover, .eyebrow-link:focus-visible { text-decoration-style: solid; }
.eyebrow-link:disabled { cursor: default; text-decoration: none; }

/* ---------- languages and translations ---------- */
.translation-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.translation-list > li { border-bottom: 1px solid var(--border); padding-bottom: .5rem; }
.translation-values { margin: .5rem 0 0; }
.translation-notice { margin: 0 0 .75rem; }
.translation-actions { display: grid; gap: .75rem; justify-items: start; }
.translation-add { display: grid; gap: .35rem; width: 100%; }
.translation-editor { margin-top: 1rem; }
.translation-editor h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.translation-source { border-left: 3px solid var(--border); padding: .25rem .5rem; margin-bottom: .35rem; white-space: pre-wrap; }
.language-search { display: grid; gap: .35rem; }
.language-search .search-results { list-style: none; margin: 0; padding: .25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); max-height: 14rem; overflow: auto; }
.edit-language { margin-bottom: 1rem; }
.badge { display: inline-block; font-size: .75rem; padding: .05rem .45rem; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }

/* ---------- notifications bell ---------- */
.notifications-bell { position: relative; cursor: pointer; padding: .4rem .55rem; border-radius: var(--radius-sm); font-size: 1.1rem; line-height: 1; }
.notifications-bell:hover, .notifications-menu[open] > .notifications-bell { background: var(--surface-2); }
.notifications-count { position: absolute; top: -.2rem; right: -.25rem; min-width: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700; text-align: center; line-height: 1.15rem; }
.favorites-star { display: inline-flex; align-items: center; gap: .3rem; }
.favorites-word { font-size: .9rem; }
@media (max-width: 48rem) { .favorites-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.favorites-panel { min-width: 16rem; }
.favorite-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .35rem; max-height: 22rem; overflow: auto; }
.favorite-list li { display: flex; align-items: center; gap: .5rem; }
.favorite-list li a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favorite-remove { margin: 0; }
.text-success { color: var(--accent); }
.text-warn { color: var(--warn, var(--text-muted)); }
.notification-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .5rem; max-height: 22rem; overflow: auto; }
.notification-list li { display: grid; gap: .1rem; }
.notification-list li.unread a { font-weight: 700; }
.translations > p > .btn-link, .translation-list > li > * + :not(.translation-values) { margin-left: .5rem; }

/* The administrator's "Refresh translations" form in the user menu. */
.menu-form { margin: 0 0 .75rem; }
.menu-form p { margin: .35rem 0 0; }

/* Collapsible boxes (Detail pages): a <details open> whose heading is its <summary>. Works without script; the arrow
   turns when it opens. */
.panel-collapsible > .panel-summary { list-style: none; display: flex; align-items: center; gap: .55rem; cursor: pointer; border-radius: var(--radius); }
.panel-collapsible > .panel-summary::-webkit-details-marker { display: none; }
.panel-collapsible > .panel-summary::before {
    content: ""; flex: none; width: .45em; height: .45em; margin-left: .1em;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); transition: transform .15s ease; color: var(--text-muted);
}
.panel-collapsible[open] > .panel-summary::before { transform: rotate(45deg); }
.panel-collapsible > .panel-summary > h2 { margin: 0; }
.panel-collapsible[open] > .panel-summary { margin-bottom: .75rem; }
.panel-collapsible > .panel-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.panel-collapsible > .panel-summary:hover > h2 { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
@media (prefers-reduced-motion: reduce) { .panel-collapsible > .panel-summary::before { transition: none; } }

/* A record's ID: a small label under its title. */
.record-id-label { margin: .25rem 0 0; font-size: .8rem; color: var(--text-muted); }
.record-id-label .record-id { display: inline-flex; }

/* Multi-select drop-down (edit forms): a <details> whose summary shows how many are chosen; the chosen ones as chips
   under it. The panel floats over the form below and scrolls when the list is long. */
.multi-select { position: relative; max-width: 34rem; }
.multi-select-summary {
    list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem; cursor: pointer;
    padding: .55rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.multi-select-summary::-webkit-details-marker { display: none; }
.multi-select-summary::after {
    content: ""; flex: none; width: .45em; height: .45em; margin-right: .2em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-.15em); color: var(--text-muted);
}
.multi-select[open] > .multi-select-summary::after { transform: rotate(-135deg) translateY(-.15em); }
.multi-select-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.multi-select-open { margin-left: auto; color: var(--accent); font-size: .9em; }
.multi-select-panel {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .25rem); display: grid; gap: .6rem; padding: .75rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.multi-select-options { max-height: 16rem; overflow: auto; flex-direction: column; flex-wrap: nowrap; gap: .35rem; }
.multi-select-filter { width: 100%; }
.multi-select-create { display: grid; gap: .35rem; padding-top: .6rem; border-top: 1px solid var(--border); }
.multi-select-create .field-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.multi-select-create input { flex: 1 1 12rem; min-width: 0; }
.multi-select-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; padding: 0; }
.multi-select-chips .chip { display: inline-flex; align-items: center; gap: .3rem; }
.chip-remove { border: 0; background: none; padding: 0 .15rem; line-height: 1; font-size: 1.05em; color: var(--text-muted); cursor: pointer; border-radius: 50%; }
.chip-remove:hover { color: var(--danger, var(--accent)); }
.chip-remove:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (max-width: 40rem) { .multi-select-panel { position: static; margin-top: .25rem; } }

/* Page width (display menu and Settings, data-width): Narrow 60rem, Standard the theme's container width (76rem),
   Large 96rem, Wide the whole window, keeping the 1rem side margin (.container is min(100% - 2rem, var(--container))). */
:root[data-width="narrow"] { --container: 60rem; }
:root[data-width="large"] { --container: 96rem; }
:root[data-width="wide"] { --container: 100%; }
.width-choice { gap: .45rem; }
.width-icon { display: inline-block; height: .75rem; border: 2px solid currentColor; border-radius: 2px; }
.width-standard .width-icon { width: .9rem; box-shadow: inset .2rem 0 0 0 color-mix(in srgb, currentColor 35%, transparent), inset -.2rem 0 0 0 color-mix(in srgb, currentColor 35%, transparent); }
.width-narrow .width-icon { width: .7rem; box-shadow: inset .2rem 0 0 0 color-mix(in srgb, currentColor 35%, transparent), inset -.2rem 0 0 0 color-mix(in srgb, currentColor 35%, transparent); }
.width-large .width-icon { width: 1.1rem; box-shadow: inset .12rem 0 0 0 color-mix(in srgb, currentColor 35%, transparent), inset -.12rem 0 0 0 color-mix(in srgb, currentColor 35%, transparent); }
.width-wide .width-icon { width: 1.3rem; }

/* Story Role Editor (stories/{id}/roles) */
.story-role-form fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem 1rem; margin: 0; display: grid; gap: .5rem; }
.story-role-form legend { font-weight: 600; padding: 0 .25rem; }
.story-role-privileges { display: grid; gap: .4rem; }
.story-role-privileges li { flex-wrap: wrap; row-gap: .1rem; }
.story-role-search { display: grid; gap: .35rem; margin-top: .5rem; }
.story-role-search label { font-weight: 600; font-size: .95rem; }
.story-role-search .button-row { flex-wrap: nowrap; align-items: center; }
.story-role-search .button-row input { flex: 1 1 14rem; min-width: 0; }
.story-role-results { display: grid; gap: .35rem; }
.story-role-results li { justify-content: space-between; }

/* Sign-up (Account/SignUpComplete): a wider card, plain fieldsets, the date of birth in one row. */
.auth-card-wide { max-width: 40rem; }
.auth-card fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.auth-card fieldset > legend { font-weight: 600; margin-bottom: .35rem; padding: 0; }
.birthday-parts { display: grid; grid-template-columns: minmax(5rem, 7rem) minmax(8rem, 1fr) minmax(4rem, 5rem); gap: .5rem; }
.birthday-parts .field label { font-weight: 400; }

/* Two-step sign-in (Account/TwoStep, Account/Mfa) */
.two-step-qr { width: 13rem; max-width: 100%; padding: .75rem; background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.two-step-qr svg { display: block; width: 100%; height: auto; }
.two-step-secret { font-size: 1rem; letter-spacing: .05em; word-break: break-all; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .4rem 1rem; padding-left: 1.5rem; font-size: 1.05rem; }
.mfa-alternatives { margin-top: 1rem; gap: .5rem; }

/* Page layouts (detail pages): the toolbar, the editor, and the boxes while arranging. */
.layout-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 1rem; }
.layout-toolbar label { font-weight: 600; }
.layout-toolbar select { max-width: min(100%, 22rem); }
.layout-editor { margin-bottom: 1rem; display: grid; gap: .5rem; }
.layout-editor .field { max-width: 30rem; }
.layout-box { min-width: 0; }
.layout-arranging .layout-box { outline: 2px dashed var(--border); outline-offset: 4px; border-radius: var(--radius); cursor: grab; }
.layout-arranging .layout-box.layout-dragging { opacity: .5; }
.layout-box-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.layout-box-title { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.layout-handle { font-size: 1.1rem; color: var(--text-muted); cursor: grab; }
.btn.btn-small { min-height: 2.25rem; padding: .3rem .75rem; font-size: .9em; }

/* Network diagram (network?of=…): lines in an SVG, records as links laid over it, each with a hover/focus card.
   Group colours are the Okabe–Ito palette (told apart with any colour vision); the legend and the card name the group too. */
.network-depth { flex-wrap: wrap; margin: 0 0 1rem; }
.network-depth [aria-current="page"] { border-color: var(--accent); color: var(--accent); }
.network-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 1rem; padding: 0; margin: 0 0 1rem; font-size: .9rem; }
.network-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.network-swatch { width: .8rem; height: .8rem; border-radius: 50%; background: var(--net); border: 1px solid var(--border); }
.net-0 { --net: #e69f00; } .net-1 { --net: #56b4e9; } .net-2 { --net: #009e73; } .net-3 { --net: #f0e442; }
.net-4 { --net: #0072b2; } .net-5 { --net: #d55e00; } .net-6 { --net: #cc79a7; } .net-7 { --net: #999999; }
.network { position: relative; width: 100%; aspect-ratio: 16 / 11; min-height: 28rem; margin: 0 0 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.network-edges { position: absolute; inset: 0; width: 100%; height: 100%; }
.network-edges line { stroke: var(--text-muted); stroke-opacity: .45; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.network-edges line.edge-outer { stroke-opacity: .25; stroke-dasharray: 4 3; }
.network-node { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .35rem; max-width: 11rem;
    padding: .2rem .55rem; border-radius: 999px; background: var(--surface); border: 2px solid var(--net, var(--accent)); color: var(--text);
    font-size: .82rem; line-height: 1.25; text-decoration: none; z-index: 1; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.network-node::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--net, var(--accent)); }
.network-node.depth-2 { font-size: .74rem; opacity: .9; }
.network-center { font-size: 1rem; font-weight: 700; padding: .4rem .9rem; border-color: var(--accent); z-index: 2; }
.network-node:hover, .network-node:focus-visible { z-index: 5; text-decoration: underline; }
.network-node:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.network-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.network-tip { display: none; position: absolute; top: calc(100% + .4rem); left: 50%; transform: translateX(-50%); width: max-content; max-width: 18rem;
    flex-direction: column; gap: .2rem; padding: .55rem .7rem; border-radius: var(--radius-sm); background: var(--surface-2, var(--surface));
    border: 1px solid var(--border); box-shadow: 0 6px 18px rgb(0 0 0 / .18); color: var(--text); font-weight: 400; text-align: left; white-space: normal; text-decoration: none; }
.network-node:hover .network-tip, .network-node:focus-visible .network-tip { display: flex; }
.network-node.tip-up .network-tip { top: auto; bottom: calc(100% + .4rem); }
.network-node.tip-left .network-tip { left: auto; right: 0; transform: none; }
.network-node.tip-right .network-tip { left: 0; transform: none; }
@media (max-width: 40rem) { .network { aspect-ratio: 3 / 4; min-height: 24rem; } .network-node { max-width: 7.5rem; font-size: .72rem; } .network-center { font-size: .85rem; } }
.network-list h3 { font-size: 1rem; margin: 1rem 0 .4rem; }

/* The Options menu at the top right of a detail page (DetailActionsMenu): network, edit, translate, appearance, layout,
   add social media. In the profile heroes it sits in its own cell at the top right; on narrow screens it follows the text. */
.detail-menu > .detail-menu-button { cursor: pointer; white-space: nowrap; }
.detail-menu-panel { width: min(15rem, calc(100vw - 2rem)); padding: .5rem; }
.detail-menu-panel .menu-links { margin: 0; border: 0; padding: 0; }
.menu-link-active { font-weight: 600; }
.menu-link-check { margin-inline-start: auto; color: var(--accent); }
.profile-hero { position: relative; }
.profile-hero > .hero-text { flex: 1 1 auto; }
.hero-actions { margin-inline-start: auto; align-self: flex-start; flex: 0 0 auto; }
.story-hero { display: flex; align-items: flex-start; gap: 1rem; }
@media (max-width: 600px) {
    .hero-actions { margin-inline-start: 0; align-self: flex-start; }
    .hero-actions .detail-menu-panel { right: auto; left: 0; }   /* the button sits on the left here: open to the right */
    .story-hero { flex-direction: column; }
}

/* At a glance: the record's files as a collapsed tree grouped by kind (GlanceRows), and the editor chosen from the
   Options menu for based-on links, languages or files (DetailToolPanel). */
.file-tree > summary { cursor: pointer; color: var(--accent); }
.file-tree-groups, .file-tree-files { list-style: none; margin: .35rem 0 0; padding-inline-start: .9rem; border-inline-start: 1px solid var(--border); }
.file-tree-groups > li + li { margin-top: .35rem; }
.file-tree-kind { font-weight: 600; }
.file-tree-files a { overflow-wrap: anywhere; }
.detail-tool-panel { margin: 0 0 1.5rem; }
.detail-tool-panel > .detail-tool-close { margin-top: .5rem; }

/* The edit page's language: the chosen one is a button that opens the language pop-up (LanguagePickerDialog). */
.edit-language .field-label { display: block; font-weight: 600; margin-bottom: .25rem; }
.edit-language-current { text-align: start; }
.language-dialog { width: min(32rem, calc(100vw - 2rem)); }

/* What I've experienced (ExperiencePanel): the marked sections, then the add form. */
.experience-list li { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.experience-add { display: grid; gap: .75rem; margin-top: 1rem; max-width: 40rem; }
.experience-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }

/* The profile page (Account/Profile.razor): names in a row, identifier rows, chips with a remove button. */
.profile-form { max-width: 56rem; }
.profile-form .field-label { display: block; font-weight: 600; }   /* like the other fields' labels */
.profile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem 1rem; }
.profile-identifier { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 1fr) auto; gap: .5rem 1rem; align-items: end; }
@media (max-width: 40rem) { .profile-identifier { grid-template-columns: 1fr; } }
.chip-remove { margin-left: .35rem; padding: 0 .15rem; text-decoration: none; }
.choice-picker .search-results { max-height: 14rem; overflow-y: auto; }

/* Categories: List / Tree, and the tree (CategoryTree), each level indented under its row. */
.view-switch { display: flex; gap: .5rem; margin: .5rem 0 0; }
.category-tree { list-style: none; margin: 0; padding-left: 1.4rem; }
.category-tree-root { padding-left: 0; }
.category-tree-row { display: flex; align-items: center; gap: .35rem; min-height: 2rem; }
.category-tree-more { margin: .25rem 0 .5rem 1.6rem; }
/* The name drills down (a button when the row has children); Details sits beside it. */
.category-tree-name { display: inline-flex; align-items: center; gap: .15rem; padding: .15rem .25rem; text-align: start; text-decoration: none; color: var(--text); font: inherit; }
.category-tree-arrow { display: inline-block; width: 1.2rem; text-align: center; color: var(--text-muted); }
/* About the height of the text it follows: .btn.btn-small would otherwise hold it at 2.25rem. */
.btn.btn-small.category-tree-details { min-width: 1.4em; min-height: 1.4em; padding: 0 .2em; margin-left: .15rem; border-radius: .3em; font-size: 1em; line-height: 1; }
.category-tree-details-icon { display: block; width: .85em; height: .85em; }
/* A row: the open/close arrow (a button when it has children), the name (a link that selects it), and Details. */
.category-tree-toggle { display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; }
a.category-tree-name:hover, a.category-tree-name:focus-visible { color: var(--accent); text-decoration: underline; }
a.category-tree-name[aria-current="true"] { color: var(--accent); font-weight: 600; background: var(--surface-2, var(--surface)); border-radius: var(--radius-sm); }
.category-tree-note { margin: .15rem 0 .35rem 1.6rem; }

/* The Tree view (TreeLayout): the tree on the left, the chosen branch's tiles in a box on the right; stacked when narrow. */
.tree-layout { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.tree-layout-tree { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
.tree-layout-heading { margin: 0 0 .5rem; font-size: 1.25rem; }
@media (max-width: 50rem) {
    .tree-layout { grid-template-columns: 1fr; }
    .tree-layout-tree { position: static; max-height: 24rem; }
}

/* ---------- The footer's pages (Components/Pages/Info) ---------- */
.info-page h2 { margin-top: 2rem; font-size: 1.3rem; }
/* Each term: its name in a box on the left, its definition in a box aligned beside it on the right. */
.glossary { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: .5rem; margin: 1rem 0 0; }
.glossary dt, .glossary dd {
    margin: 0; padding: .6rem .9rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.glossary dt { font-weight: 600; scroll-margin-top: 5rem; }
.glossary dt:target { border-color: var(--accent, currentColor); box-shadow: inset 0 0 0 1px var(--accent, currentColor); }
@media (max-width: 40rem) {
    .glossary { grid-template-columns: 1fr; }
    .glossary dt { margin-top: .5rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .glossary dd { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -0.5rem; border-top: 0; }
}
.info-page .data-table td, .info-page .data-table th { vertical-align: top; }
.info-page .data-table code { white-space: nowrap; }
.info-columns { columns: 14rem auto; column-gap: 2rem; padding-left: 1.2rem; }
.linea-licenses { margin-top: 1.25rem; }
.linea-licenses h2 { font-size: 1.2rem; }

/* ---------- Menu icons (Components/Shared/MenuIcon.razor): before every menu item's label ---------- */
.menu-icon { flex: none; width: 1.1em; height: 1.1em; }
.menu-link, .nav-panel a, .favorite-list a, .notification-list a, .btn-with-icon { display: flex; align-items: center; gap: .55rem; }
.nav-menu > summary { display: inline-flex; align-items: center; gap: .4rem; }
.nav-menu > summary .menu-icon { color: var(--text-muted); }
.nav-panel a .menu-icon, .menu-link .menu-icon { color: var(--text-muted); }
.nav-panel a.active .menu-icon, .nav-panel a:hover .menu-icon, .menu-link:hover .menu-icon, .menu-link-active .menu-icon { color: currentColor; }
.btn-with-icon { justify-content: center; }

/* The settings page's display choices as an accordion (Components/Shared/DisplayChoices.razor, Accordion). */
.display-accordion { display: grid; gap: .5rem; }
.display-section { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.display-section > summary { display: flex; align-items: baseline; gap: .75rem; padding: .6rem .8rem; cursor: pointer; list-style: none; font-weight: 600; }
.display-section > summary::-webkit-details-marker { display: none; }
.display-section > summary::before { content: "▸"; color: var(--text-muted); transition: transform .15s var(--ease); }
.display-section[open] > summary::before { transform: rotate(90deg); }
.display-section-current { margin-inline-start: auto; font-weight: 400; font-size: .9rem; }
.display-section-body { padding: .25rem .8rem .8rem; }

/* Help texts as tool-tips (Components/Shared/InfoTip.razor): shown on hover, focus or tap. */
.info-tip { position: relative; display: inline-flex; vertical-align: middle; margin-inline-start: .35rem; }
.info-tip-button { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--text-muted); cursor: help; }
.info-tip-button:hover, .info-tip-button:focus-visible { color: var(--accent); background: var(--surface-2); }
.info-tip-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.info-tip-text { position: absolute; z-index: 40; left: 50%; top: calc(100% + .4rem); transform: translateX(-50%);
  width: max-content; max-width: min(22rem, 80vw); padding: .55rem .7rem; border-radius: var(--radius-sm);
  background: var(--text); color: var(--bg); font-size: .85rem; font-weight: 400; line-height: 1.4; text-align: left; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transition: opacity .12s var(--ease); pointer-events: none; }
.info-tip:hover .info-tip-text, .info-tip:focus-within .info-tip-text { opacity: 1; visibility: visible; }
.panel-summary .info-tip { margin-inline-start: .5rem; }
.panel-summary h2 + .info-tip { align-self: center; }
.button-with-tip { display: inline-flex; align-items: center; gap: .25rem; }

/* Notes on a record (Components/Shared/NotesPanel.razor). */
.notes-panel h2 { margin-top: 0; }
.note-form { margin-bottom: 1rem; }
.note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.note { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .65rem .8rem; background: var(--surface); }
.note-private { border-style: dashed; }
.note-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin: 0 0 .35rem; font-weight: 600; }
.note-body > :first-child { margin-top: 0; }
.note-body > :last-child { margin-bottom: 0; }
.note-actions { margin: .35rem 0 0; }
.notes-panel textarea { font: inherit; width: 100%; }

/* Votes from 1 to 100 (Components/Shared/VotePanel.razor, ScoreInput.razor; Account/MyVotes.razor). */
.votes-panel { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: .75rem 1rem; margin: 0 0 1rem; }
.votes-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .35rem; font-size: 1.05rem; }
.votes-summary { margin: 0 0 .5rem; }
.votes-average { font-weight: 700; }
.votes-form .button-row { margin: .5rem 0 0; }
.score-input { display: grid; gap: .3rem; max-width: 28rem; }
.score-input-row { display: flex; align-items: center; gap: .75rem; }
.score-range { flex: 1 1 auto; min-width: 8rem; accent-color: var(--accent); }
.score-number { width: 5.5rem; font: inherit; }
.my-votes { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.my-vote { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .65rem .8rem; background: var(--surface);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: .5rem 1.5rem; align-items: start; }
.my-vote-record { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: baseline; }
@media (max-width: 40rem) { .my-vote { grid-template-columns: minmax(0, 1fr); } }

/* Story editor (/stories/new, /stories/{id}/edit): a side panel with the story's details and its tree, then the text,
   the description taking most of the screen. The panel folds away; on narrow screens it sits above the text. */
.story-editor-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.story-editor { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.story-editor.panel-closed { grid-template-columns: minmax(0, 1fr); }
.story-panel { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; display: grid; gap: 1rem;
  padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
/* The panel sets display, which would otherwise override [hidden] and stretch it across the page when folded away. */
.story-panel[hidden] { display: none; }
/* The sticky panel is its own stacking layer, so a pop-up inside it (a note) would sit under the description: while
   one is open, the panel itself goes above the page. */
.story-panel:has(.kind-dialog:not([hidden])) { z-index: 90; }
.story-panel .edit-form { max-width: none; gap: .8rem; }
.story-panel fieldset.edit-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.story-panel fieldset.edit-field > legend { padding: 0; font-weight: 600; }
/* The panel scrolls, so a floating pop-up would be cut off at its edge (hiding the universes' and realities' Add new
   box): inside it, the multi-select opens in the flow and the panel grows or scrolls to show all of it. */
.story-panel .multi-select-panel { position: static; margin-top: .25rem; box-shadow: none; }
.story-main .edit-form { max-width: none; }
.story-name { font-size: 1.25rem; }
.story-abstract > summary { cursor: pointer; font-weight: 600; margin-bottom: .4rem; }
.story-description .markdown-editor { min-height: 60vh; }
.story-tree { display: grid; gap: .5rem; }
.story-tree-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.story-tree-head h2 { font-size: 1.05rem; margin: 0; }
.story-branch > summary { cursor: pointer; font-weight: 600; padding: .25rem 0; display: flex; align-items: center; gap: .35rem; }
.story-branch > summary .count { font-weight: 400; color: var(--text-muted); }
.story-leaves { margin: .25rem 0 .5rem; padding-left: 1.4rem; display: grid; gap: .2rem; }
.story-leaves li { overflow-wrap: anywhere; }
.story-leaves .leaf-remove, .story-leaves .leaf-action { margin-left: .35rem; font-size: .85rem; }
.leaf-add { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .5rem; }
.leaf-add input, .leaf-add select { flex: 1 1 9rem; min-width: 0; }
.leaf-add > small { flex-basis: 100%; }
.leaf-add .search-results { list-style: none; width: 100%; margin: 0; padding: .25rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); max-height: 14rem; overflow: auto; }
.story-permissions { margin: 0; }
@media (max-width: 48rem) {
  .story-editor { grid-template-columns: minmax(0, 1fr); }
  .story-panel { position: static; max-height: none; }
}

/* Notes are written in a pop-up with the rich text editor: wider than the other pop-ups. */
.note-dialog { width: min(60rem, calc(100vw - 2rem)); }
/* Kept on the page between uses; the pop-up classes set display, which would otherwise override [hidden]. */
.note-dialog[hidden], .kind-backdrop[hidden] { display: none; }
.note-add { margin: 0 0 .75rem; }

/* A note in the list: one line (its title, or the start of its text, in italics); who wrote it and when show in a
   small pop-up on hover or keyboard focus, like the info tips. Opening the line shows the note. */
.note-details > .note-summary { position: relative; display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .15rem 0; }
.note-line { font-weight: 600; overflow-wrap: anywhere; }
.note-line.note-preview { font-weight: 400; font-style: italic; }
.note-byline { position: absolute; z-index: 40; left: 0; top: calc(100% + .3rem); width: max-content; max-width: min(22rem, 80vw);
  padding: .4rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow); font-size: .85rem; font-weight: 400; font-style: normal; opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none; }
.note-summary:hover .note-byline, .note-summary:focus-visible .note-byline { opacity: 1; visibility: visible; }
.note-details[open] > .note-summary { margin-bottom: .4rem; }
@media (prefers-reduced-motion: reduce) { .note-byline { transition: none; } }

/* Record versions: the notice on a copy or an original, the side-by-side comparison and the state badges. */
.version-notice { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .75rem 0; }
.version-compare { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
.version-compare th, .version-compare td { text-align: start; vertical-align: top; padding: .55rem .7rem; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.version-compare thead th { font-size: .85rem; color: var(--text-muted); font-weight: 600; }
.version-compare td:first-child { width: 2.5rem; }
.version-compare tr.version-changed td:last-child { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.version-compare tr.version-changed th[scope=row] { font-weight: 700; }
.version-markdown { max-height: 16rem; overflow: auto; font-size: .9rem; }
.badge.version-pending { background: var(--accent-soft, var(--surface-2)); }
.badge.version-denied { opacity: .8; }
.version-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.version-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }

/* Network page canvas (wwwroot/js/network-graph.js): replaces the plain diagram once drawn. */
.network-filter { display: flex; flex-wrap: wrap; gap: .35rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .9rem .7rem; margin: 0 0 1rem; }
.network-filter legend { font-weight: 600; padding: 0 .3rem; }
.network-view { margin: 0 0 .75rem; }
.network-view [aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.network-canvas { position: relative; width: 100%; aspect-ratio: 16 / 11; min-height: 28rem; margin: 0 0 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.network-canvas[hidden], .network[hidden] { display: none; }

/* My imports (account/imports): the past uploads and the review page's items. */
.import-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.import-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.import-list form { display: inline; margin: 0 0 0 auto; }
.import-list .import-detail { flex-basis: 100%; order: 1; }
/* A questionable person: who on the left (name, roles, the upload's works), the choice on the right (matches, details). */
.import-person { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; margin: 0 0 1rem; }
.import-person.is-group { border-style: dashed; }
.import-person h4 { margin: 0 0 .35rem; font-size: 1.05rem; }
.import-person-who p, .import-person-choice p { margin: .25rem 0; }
.import-person-choice { display: grid; gap: .4rem; align-content: start; }
.import-person-choice select { width: 100%; }
.import-person-works { margin: .2rem 0 0; padding-left: 1.1rem; }
.import-person-works li { margin: .1rem 0; }
.import-person-info { background: var(--surface-2); border-radius: var(--radius-sm); padding: .6rem .75rem; }
.import-person-info .facts { font-size: .92rem; }
.import-person-id { margin-right: .75rem; }
.import-person-works .btn-link { margin-inline-start: .35rem; }
.import-person-works select.import-role { display: block; margin: .25rem 0 .4rem; max-width: 100%; }
.import-drafts { margin: 0 0 1rem; }
.import-auto input[type=number] { width: 6rem; }
/* People the typed auto-link threshold would link: highlighted live (Automatic linking), amber when they would wait for review. */
.import-person.is-auto { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.import-person.is-auto-held { border-color: var(--warn, #b7791f); box-shadow: inset 4px 0 0 var(--warn, #b7791f); background: color-mix(in srgb, var(--warn, #b7791f) 7%, var(--surface)); }
.import-auto-note { font-weight: 600; margin: .1rem 0 .3rem; }
/* "Look them up": the heading, then one link per line. */
.import-lookup a { display: block; width: fit-content; margin: .15rem 0 0 .75rem; overflow-wrap: anywhere; }
.import-lookup a::after { content: " ↗"; }
@media (max-width: 720px) { .import-person { grid-template-columns: 1fr; } }
.import-item { border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .9rem; margin: 0 0 1rem; display: grid; gap: .5rem; }
.import-item legend { font-weight: 600; padding: 0 .3rem; }

/* Compare: a Summary list's check boxes and Compare bar, and the comparison page (Pages/Compare/ComparePage.razor). */
.compare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .25rem 0 .9rem; }
.card-compare { position: absolute; top: .55rem; inset-inline-end: .6rem; z-index: 2; display: flex; padding: .15rem; cursor: pointer; }
.card:has(.card-compare) .card-body { padding-inline-end: 1.6rem; }
.compare-only-diff { margin-bottom: .75rem; }
.compare:has(#compare-only-diff:checked) .compare-same { display: none; }
.compare-all-same { display: none; }
.compare:has(#compare-only-diff:checked) .compare-all-same { display: block; }
.compare .table-wrap { overflow-x: auto; max-width: 100%; }
.compare-table thead th { min-width: 9rem; font-size: 1rem; color: var(--text); }
/* The field names stay in view while the records scroll sideways (phones, five records). */
.compare-table th[scope=row], .compare-table thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface); min-width: 7rem; }
.compare-table tr.compare-differs td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.compare-table tr.compare-differs th[scope=row] { font-weight: 700; }
.compare-remove { margin-inline-start: .4rem; color: var(--text-muted); text-decoration: none; }
.compare-remove:hover, .compare-remove:focus-visible { color: var(--danger); }
.compare-list { margin: 0; padding-inline-start: 1rem; }
.compare-text { white-space: pre-line; }
.compare-merge { margin: 0 0 .75rem; }

/* Merge (Pages/Compare/MergePage.razor): the comparison's table with the kept column and the values it ends up with marked. */
.merge .table-wrap { overflow-x: auto; max-width: 100%; position: relative; }
.merge-keep { display: flex; align-items: center; gap: .35rem; margin-top: .35rem; font-weight: 400; font-size: .9rem; }
.merge-table thead th.merge-kept { border-bottom: 3px solid var(--accent); }
.merge-leave-out { margin-inline-start: .4rem; color: var(--text-muted); }
.merge-leave-out:hover, .merge-leave-out:focus-visible { color: var(--danger); }
.merge-table td { vertical-align: top; }
.merge-table td .compare-text { display: block; max-height: 12rem; overflow-y: auto; }
.merge-table td.merge-outcome { outline: 2px solid var(--accent); outline-offset: -2px; }
.merge-choice { display: flex; align-items: flex-start; gap: .4rem; font-weight: 400; cursor: pointer; }
.merge-references { margin: 0 0 1rem; padding-inline-start: 1.2rem; }
.merge-settings textarea { width: 100%; max-width: 40rem; }
/* What the kept record looks like once merged: the merge table's last column, and the identifiers. */
.merge-table .merge-result { border-inline-start: 4px solid var(--accent); background: var(--surface-2); }
.merge-table thead th.merge-result .eyebrow { display: block; margin: 0; }
.merge-table thead th.merge-result .merge-result-name { display: block; font-weight: 600; }
.merge-table td.merge-result .compare-text { display: block; max-height: 12rem; overflow-y: auto; }
.merge-identifiers li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.merge-primary, .merge-write-back { border: 0; padding: 0; margin: 0 0 1rem; }
.merge-primary legend, .merge-write-back legend { font-weight: 600; margin-bottom: .3rem; }
.merge-settings input[type=text] { width: 100%; max-width: 40rem; }

/* Add characters (Pages/Characters/BulkCharactersPage.razor): a row per character, scrolling sideways on a phone. */
.bulk-form { max-width: none; }
.bulk-shared { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.bulk-kind { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.bulk-table { width: 100%; border-collapse: collapse; }
.bulk-table th, .bulk-table td { padding: .35rem .4rem; vertical-align: top; text-align: start; }
.bulk-table input { width: 100%; min-width: 8rem; }
.bulk-table input[type="date"] { min-width: 9.5rem; }
.bulk-table tr.bulk-row-problem td, .bulk-table tr.bulk-row-problem th { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.bulk-row-kind { white-space: nowrap; }
/* A grid item grows to its content's width unless told otherwise: the table scrolls inside its frame instead. */
.bulk-form > * { min-width: 0; }
.bulk-form .table-wrap { overflow-x: auto; max-width: 100%; position: relative; }   /* positioned: the hidden column labels scroll with it */