, so there is
no href to disable and nothing to tab into. Mirrors
.related-character-disabled in css/reader.css, which does this job for
the comic reader's sidebar. The hover lift is cancelled deliberately:
a card that rises under the pointer has promised a click. */
.character-card-disabled {
cursor: default;
color: var(--muted);
}
.character-card-disabled:hover { transform: none; }
.character-card-disabled .character-portrait { opacity: .55; }
.character-card-disabled h3 { color: var(--muted); }
/* One collapsible group per subcategory on characters.html — built by
renderCharacterGallery() in js/characters.js, which is why
#character-grid is a plain wrapper there and each group holds its own
.character-grid.
A PARALLEL set to .entity-category-group near the bottom of this file,
not a reuse of it, for exactly the reason given in that section's
header: .character-* and .entity-* stay free to evolve apart.
.collapse-caret/.group-collapsed/.series-group-count ARE reused as-is —
those three are already fully generic and shared with comics' series
groups. Note the last rule has to name .character-grid: the entity
version hides .entity-grid specifically, so it would collapse nothing
here. */
.character-category-group { margin-bottom: 26px; }
.character-category-group:last-child { margin-bottom: 0; }
.character-category-heading {
font-family: 'EB Garamond', serif;
font-weight: 700;
font-size: 13px;
letter-spacing: .6px;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
}
.character-category-heading .collapse-caret { border-top-color: var(--muted); }
.character-category-group.group-collapsed .character-grid { display: none; }
/* ---- character.html: individual profile page ---- */
.back-link { margin: 0 0 24px; font-size: 14px; }
.back-link a { color: var(--muted); text-decoration: none; font-weight: 600; }
.back-link a:hover { color: var(--link); text-decoration: underline; }
/* Populated entirely by js/character.js from CHARACTERS (fetched from
Supabase by js/data.js), looked up via the page's ?id= URL param — see that file for the "not
found" fallback when the id doesn't match anything. Only wraps the
infobox + name/title/bio now — "Appears in" (.character-appearances)
is a sibling after this, not nested inside it, so it can span the full
page width instead of just this row's body column.
Layout: the infobox is a CSS float (not a flex column, like an earlier
version of this page) so the name/title/bio genuinely wrap around it
wiki-article-style, instead of being confined to a separate column
that stops wherever the infobox does. .character-detail needs a
clearfix (the ::after below) so its own box — and anything after it,
like .character-appearances — accounts for the floated infobox's full
height even when the bio text next to it is short. */
.character-detail::after {
content: "";
display: table;
clear: both;
}
.character-infobox {
float: left;
width: 260px;
margin: 0 36px 20px 0;
background: var(--parchment-light);
border: 1px solid var(--gold);
box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.character-infobox-tabs {
display: flex;
}
.character-infobox-tab {
flex: 1;
font-family: 'EB Garamond', serif;
font-size: 12px;
font-weight: 600;
text-align: center;
padding: 8px 4px;
background: var(--parchment);
color: var(--muted);
border: none;
border-bottom: 1px solid var(--gold);
cursor: pointer;
}
.character-infobox-tab:hover { color: var(--ink); }
.character-infobox-tab.active {
background: var(--parchment-light);
color: #2e2010;
border-bottom-color: transparent;
}
/* Same fixed box + object-fit: cover treatment the old single-image
.character-detail-portrait used — every tab keeps this exact footprint
regardless of the source image's own dimensions, so switching tabs
never shifts the surrounding layout, and (per the same flex/aspect-
ratio interaction noted lower down for .character-infobox) this only
holds because .character-infobox itself is a float, never a flex item
with stretch alignment. */
.character-infobox-image {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
display: block;
/* No background fill — see the same note on .comic-cover above. */
}
.character-infobox-stats {
font-size: 13px;
}
.character-infobox-stat {
display: flex;
gap: 10px;
padding: 8px 10px;
border-top: 1px solid rgba(90,60,20,.2);
}
.character-infobox-stat:nth-child(odd) { background: rgba(255,255,255,.2); }
.character-infobox-stat-label {
font-weight: 700;
color: #2e2010;
flex: 0 0 42%;
}
.character-infobox-stat-value { color: var(--ink); flex: 1; }
.character-detail-body h1 {
font-family: 'Pirata One', serif;
font-weight: 400;
font-size: 38px;
margin: 6px 0 4px;
color: #2e2010;
letter-spacing: .5px;
}
.character-detail-subtitle { color: var(--muted); font-size: 15px; margin: 0 0 20px; }
/* "From — Sunken Empire of Atlantia", one line per role, between the
subtitle and the write-up.
The lines are wrapped in a container rather than spaced individually,
because the gap belongs AFTER THE GROUP: a character with three roles
should read as one block, not three paragraphs. Doing it with
:last-of-type on the line instead would have worked today and broken
the day anything else in this column became a . */
.character-detail-places { margin: 0 0 20px; }
.character-detail-place {
font-size: 14px;
margin: 0 0 4px;
line-height: 1.5;
}
.character-detail-place:last-child { margin-bottom: 0; }
.character-detail-place-role {
color: var(--muted);
font-weight: 600;
}
/* character.bioHtml (see js/character.js) is real rendered Markdown —
the database's bio_markdown can use headings, lists, bold/italic, etc.
— so this styles whatever tags marked() produces, not just
. */
/* No max-width here on purpose (see below for the two things we tried
and dropped):
1. `max-width: fit-content`/`max-content` — broke wrapping outright.
Those trigger shrink-to-fit sizing, which browsers compute ONCE
from the (narrow) space beside the floated .character-infobox at
the point a paragraph starts, then lock that in as the paragraph's
box width for every line — including the ones below the infobox,
where there's actually a full row of space. Result: text wrapped
early and the line-below-the-float visibly misaligned/overflowed
left, since its line box no longer lined up with the (too-narrow)
box the browser had committed to. This bit us for real on
Patience's bio (a multi-paragraph blockquote started beside the
infobox and continued below it).
2. `max-width: 680px` (matching .hero p's fixed 680px elsewhere) — no
wrapping bug, but capped the text column well short of
.character-detail-body's actual available width (.main-card can
run past 1200px wide on a big screen), leaving a dead strip of
parchment on the right that only grew with resolution.
So: no max-width at all. A block with width:auto (the default, no
shrink-to-fit involved) always fills its containing block, full stop
— floats never shrink the BOX itself, they only eat into the
available space of each LINE at that height, which is the normal/
correct way text wraps around a float regardless of the box's width.
That's why this doesn't reintroduce bug #1: fit-content/max-content
are what trigger the once-computed shrink-to-fit box; plain auto
width never does. Net effect: bio text hugs the infobox tightly
where it floats beside it, then opens up to the full body width once
it clears the infobox below — see site-conventions.md's "Character
profile infobox" section. */
.character-detail-bio p { line-height: 1.75; margin: 0 0 14px; }
.character-detail-bio .muted { font-style: italic; margin: 0; }
.character-detail-bio h2, .character-detail-bio h3 {
font-family: 'Pirata One', serif;
font-weight: 400;
color: #2e2010;
letter-spacing: .3px;
}
.character-detail-bio h2 { font-size: 22px; margin: 26px 0 10px; }
.character-detail-bio h3 { font-size: 18px; margin: 20px 0 8px; }
.character-detail-bio h2:first-child, .character-detail-bio h3:first-child { margin-top: 0; }
.character-detail-bio ul, .character-detail-bio ol {
margin: 0 0 14px;
padding-left: 22px;
line-height: 1.7;
}
.character-detail-bio li { margin-bottom: 4px; }
.character-detail-bio strong { color: #2e2010; }
.character-detail-bio blockquote {
margin: 0 0 14px;
padding-left: 16px;
border-left: 3px solid var(--gold);
color: var(--muted);
font-style: italic;
}
/* "Appears in" reuses .library-toolbar/.comic-grid/.comic-card as-is (see
comics.html's "library header + sort toolbar + grid" block above) — the
only thing scoped here is the section wrapper itself. */
.character-appearances {
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--gold);
}
.character-appearances h3 {
font-family: 'Pirata One', serif;
font-weight: 400;
font-size: 18px;
margin: 0 0 10px;
color: #2e2010;
}
.character-appearances .library-toolbar { margin-bottom: 16px; }
@media (max-width: 600px) {
/* Narrow viewport: drop the float and stack instead — a floated
infobox with text wrapping beside it in a ~260px-or-less column
reads badly, so this makes the infobox a normal centered block
followed by the full-width bio, same stacking the old flex-column
fallback did. */
.character-infobox { float: none; width: 100%; max-width: 260px; margin: 0 auto 20px; }
}
/* ---- Generic entity system: Bestiary / Races / Items / World Lore ----
These four content types are all structurally the same shape as each
other (id/name/title/optional category/optional image/optional
infobox+markdown write-up), so they share ONE list+detail system
(js/entity-list.js, js/entity-detail.js) instead of four near-copies
of the Characters system above.
Comics and Characters keep their own dedicated .comic-* and .character-*
styles/JS because they have real behavior beyond this shared shape —
comics has dates/series/thread/sort/search, characters has the
"Appears in" cross-link to comics — see site-conventions.md's "Generic
entity system" section for the full rationale.
Every rule below is deliberately a PARALLEL set to .character-grid/
.character-card/.character-detail/.character-infobox* above, not a
reuse of those classes, even though most of it is visually identical —
this keeps the two systems free to evolve independently (e.g. if
Characters ever grows a feature specific to people, or this system
grows one specific to creatures/items/lore) without either one risking
breaking the other. Categories (Monsters/Wildlife, Relics/Materials,
Mechanics/Roles & Positions) reuse .collapse-caret/.group-collapsed/
.series-group-count as-is, though — those are already fully generic
(see their own comments further up), no reason to fork them too. */
/* ---- entity list pages (bestiary.html/races.html/items.html/world-lore.html) ---- */
.entity-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 18px;
}
.entity-card {
display: block;
background: var(--parchment-light);
border: 1px solid var(--gold);
overflow: hidden;
text-align: center;
text-decoration: none;
color: inherit;
transition: transform .15s;
}
.entity-card:hover { transform: translateY(-3px); }
/* No background fill — assets/Cube.png (the missing-image placeholder)
is itself transparent, see the same note on .comic-cover/.character-
portrait above. */
.entity-image { width: 100%; aspect-ratio: 4/6; display: block; object-fit: cover; }
.entity-card-body { padding: 12px; }
.entity-card h3 {
font-family: 'Pirata One', serif;
font-weight: 400;
margin: 0 0 4px;
font-size: 16px;
color: #2e2010;
}
.entity-meta { color: var(--muted); font-size: 12px; }
/* One collapsible group per subcategory — built by renderGroupedEntities()
in js/entity-list.js, only for the types that have subcategories
(Bestiary/Items/World Lore; Races has none, so races.html's grid is
just .entity-grid directly with no grouping wrapper at all). Reuses
.collapse-caret/.group-collapsed/.series-group-count as-is (see the
comment above this whole section). */
.entity-category-group { margin-bottom: 26px; }
.entity-category-group:last-child { margin-bottom: 0; }
.entity-category-heading {
font-family: 'EB Garamond', serif;
font-weight: 700;
font-size: 13px;
letter-spacing: .6px;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
}
.entity-category-heading .collapse-caret { border-top-color: var(--muted); }
.entity-category-group.group-collapsed .entity-grid { display: none; }
/* ---- entity detail pages (creature.html/race.html/item.html/lore.html) ----
Same wiki-infobox-float layout as .character-detail/.character-infobox*
above (float left, clearfix, tabbed image gallery, optional stats
table) — see that section's comments for the float/clearfix reasoning,
it applies identically here. */
.entity-detail::after { content: ""; display: table; clear: both; }
.entity-infobox {
float: left;
width: 260px;
margin: 0 36px 20px 0;
background: var(--parchment-light);
border: 1px solid var(--gold);
box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.entity-infobox-tabs { display: flex; }
.entity-infobox-tab {
flex: 1;
font-family: 'EB Garamond', serif;
font-size: 12px;
font-weight: 600;
text-align: center;
padding: 8px 4px;
background: var(--parchment);
color: var(--muted);
border: none;
border-bottom: 1px solid var(--gold);
cursor: pointer;
}
.entity-infobox-tab:hover { color: var(--ink); }
.entity-infobox-tab.active {
background: var(--parchment-light);
color: #2e2010;
border-bottom-color: transparent;
}
.entity-infobox-image {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
display: block;
}
.entity-infobox-stats { font-size: 13px; }
.entity-infobox-stat {
display: flex;
gap: 10px;
padding: 8px 10px;
border-top: 1px solid rgba(90,60,20,.2);
}
.entity-infobox-stat:nth-child(odd) { background: rgba(255,255,255,.2); }
.entity-infobox-stat-label { font-weight: 700; color: #2e2010; flex: 0 0 42%; }
.entity-infobox-stat-value { color: var(--ink); flex: 1; }
.entity-detail-body h1 {
font-family: 'Pirata One', serif;
font-weight: 400;
font-size: 38px;
margin: 6px 0 4px;
color: #2e2010;
letter-spacing: .5px;
}
.entity-detail-subtitle { color: var(--muted); font-size: 15px; margin: 0 0 4px; }
/* Shows the entry's resolved category (e.g. "Monsters") on its own detail
page — categories aren't shown as a link anywhere, just this label, so
unlike .entity-detail-subtitle there's no case where both need to look
identical/interchangeable. Only rendered when non-blank (see
js/entity-detail.js) — an uncategorized entry just skips this line. */
.entity-detail-category {
display: inline-block;
color: var(--muted);
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
margin: 0 0 16px;
}
/* Bio text: no max-width on purpose, from the start — see the long
comment on .character-detail-bio p above for why (a block with default
width:auto always fills its containing block regardless of a float
beside it; only intrinsic-sizing keywords like fit-content/max-content
break that). */
.entity-detail-bio p { line-height: 1.75; margin: 0 0 14px; }
.entity-detail-bio .muted { font-style: italic; margin: 0; }
.entity-detail-bio h2, .entity-detail-bio h3 {
font-family: 'Pirata One', serif;
font-weight: 400;
color: #2e2010;
letter-spacing: .3px;
}
.entity-detail-bio h2 { font-size: 22px; margin: 26px 0 10px; }
.entity-detail-bio h3 { font-size: 18px; margin: 20px 0 8px; }
.entity-detail-bio h2:first-child, .entity-detail-bio h3:first-child { margin-top: 0; }
.entity-detail-bio ul, .entity-detail-bio ol {
margin: 0 0 14px;
padding-left: 22px;
line-height: 1.7;
}
.entity-detail-bio li { margin-bottom: 4px; }
.entity-detail-bio strong { color: #2e2010; }
.entity-detail-bio blockquote {
margin: 0 0 14px;
padding-left: 16px;
border-left: 3px solid var(--gold);
color: var(--muted);
font-style: italic;
}
@media (max-width: 600px) {
.entity-infobox { float: none; width: 100%; max-width: 260px; margin: 0 auto 20px; }
}
/* =====================================================================
ACCOUNTS — the sidebar entry and login.html
=====================================================================
Two related pieces:
.sidebar-account is INJECTED by js/auth.js, not written into any
page's markup — that markup is duplicated across every shell page, so
one copy in JS beats twelve in HTML. It's built to look like the
"Navigation" and "Universe" sections above it, so the rules here only
cover what differs: the separation from the nav links, and the signed-
in state.
.account-page is login.html's own content. It has the only real form
on the site (everything else is a toolbar control), which is why the
.btn/.account-field styles start here rather than being lifted out of
somewhere existing. If a second form ever appears, promote them.
===================================================================== */
/* The rest of the account block (heading, admin, Privacy, Licence) sits
at the end of the open menu, pushed to the right so it reads as its
own thing rather than one more place to browse. The account link
itself is not in it: js/auth.js puts it straight in the bar, so it
stays on screen while the menu is closed. */
.sidebar-account {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 14px;
margin: 0 0 0 auto;
}
/* =====================================================================
THE SIDEBAR'S SEARCH BOX (js/search.js, search.html)
Injected by js/search.js under the logo and above "Navigation", for
the same reason .sidebar-account is injected: that markup is
duplicated across every shell page, and one copy in JS beats
seventeen in HTML.
The suggestion list is absolutely positioned so it overlays the nav
links rather than pushing them down — a list that shoves the whole
sidebar about while you type is a list nobody can aim at. Its parent
carries the position, not the sidebar, so it stays anchored to the
field.
===================================================================== */
.sidebar-search { margin: 14px 0 4px; }
.sidebar-search-field { position: relative; }
.sidebar-search-input {
width: 100%;
box-sizing: border-box;
font-family: inherit;
font-size: 14px;
color: var(--ink);
background: rgba(255,255,255,.3);
border: 1px solid var(--gold);
border-radius: 2px;
padding: 7px 9px;
}
.sidebar-search-input::placeholder { color: var(--muted); opacity: .85; }
.sidebar-search-input:focus {
outline: none;
border-color: #8a6a28;
box-shadow: 0 0 0 2px rgba(201,154,62,.35);
}
/* The browser's own clear button, which is a system glyph that fights
the parchment on every platform. The Escape key closes the list and
selecting-all clears the text; nothing is lost. */
.sidebar-search-input::-webkit-search-cancel-button { display: none; }
.sidebar-search-results {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 20;
margin: 0;
padding: 0;
list-style: none;
max-height: 320px;
overflow-y: auto;
background: var(--parchment-light);
border: 1px solid var(--gold);
box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.sidebar-search-option + .sidebar-search-option {
border-top: 1px solid rgba(201,154,62,.4);
}
/* The whole row is the link, so the target is the row and not the word
inside it — the .sidebar a rule above would otherwise make this an
inline-sized hit area. */
.sidebar-search-option a {
display: block;
padding: 7px 9px;
text-decoration: none;
}
.sidebar-search-option a:hover { text-decoration: none; }
.sidebar-search-option:hover,
.sidebar-search-option.is-active { background: rgba(201,154,62,.28); }
.sidebar-search-name {
display: block;
font-size: 14px;
color: var(--link);
overflow-wrap: anywhere;
}
.sidebar-search-kind {
display: inline-block;
margin-top: 2px;
font-size: 10px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
color: var(--muted);
}
.sidebar-search-detail {
display: block;
font-size: 12px;
color: var(--muted);
overflow-wrap: anywhere;
}
.sidebar-search-empty {
padding: 8px 9px;
font-size: 13px;
font-style: italic;
color: var(--muted);
}
/* The result count, for a screen reader. Off-screen rather than
display:none, because a hidden element is not announced at all. */
.sidebar-search-status {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ---- search.html ---- */
.search-group { margin-top: 30px; }
.search-group:first-child { margin-top: 8px; }
.search-group-count {
margin-left: 10px;
font-family: system-ui, sans-serif;
font-size: 12.5px;
color: var(--muted);
}
.search-list { list-style: none; margin: 12px 0 0; padding: 0; }
.search-result {
border: 1px solid var(--gold);
background: var(--parchment-light);
margin-bottom: 8px;
}
.search-result:last-child { margin-bottom: 0; }
.search-result-link { display: block; padding: 10px 14px; text-decoration: none; }
.search-result-link:hover { background: rgba(201,154,62,.16); }
.search-result-name {
display: block;
font-family: 'Pirata One', serif;
font-weight: 400;
font-size: 19px;
letter-spacing: .3px;
color: var(--link);
overflow-wrap: anywhere;
}
.search-result-detail {
display: block;
margin-top: 2px;
font-size: 13.5px;
color: var(--muted);
overflow-wrap: anywhere;
}
.sidebar-account-link.is-signed-in {
font-weight: 600;
/* The account's own name, not a destination: same colour as the
headings above rather than the link blue used for navigation. */
color: #4a3413;
/* Long display names are cut with an ellipsis in the bar (see
.sidebar > .sidebar-account-link); this covers anywhere else. */
overflow-wrap: anywhere;
}
/* ---- login.html ---- */
.account-page { max-width: 620px; }
.account-subtitle {
font-family: 'Pirata One', serif;
font-weight: 400;
font-size: 24px;
color: #2e2010;
letter-spacing: .3px;
margin: 0 0 4px;
}
.account-form {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 12px;
margin: 22px 0 6px;
}
.account-field {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 14px;
}
.account-field span { color: var(--muted); letter-spacing: .3px; }
.account-field input {
border: 1px solid var(--gold);
background: var(--parchment-light);
color: var(--ink);
padding: 9px 11px;
font-family: 'EB Garamond', serif;
font-size: 15px;
width: 280px;
max-width: 100%;
}
.account-field input:focus {
outline: 2px solid var(--gold);
outline-offset: 1px;
}
.btn {
border: 1px solid var(--gold);
background: var(--parchment-light);
color: #2e2010;
padding: 10px 18px;
font-family: 'Pirata One', serif;
font-size: 17px;
letter-spacing: .5px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.btn:hover { background: #f0dcae; }
.btn:disabled { opacity: .6; cursor: default; box-shadow: none; }
/* Sign out: same shape, deliberately quieter — it sits under the
account details and shouldn't be the loudest thing on the page. */
.btn-quiet {
background: transparent;
font-family: 'EB Garamond', serif;
font-size: 15px;
padding: 8px 14px;
box-shadow: none;
}
.btn-quiet:hover { background: rgba(201,154,62,.18); }
.account-actions {
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--gold);
}
.account-note { font-size: 14px; color: var(--muted); margin: 4px 0 0; }
/* The age statement on the sign-up form. A checkbox and its label on
one line, which .account-field's stacked layout doesn't give. */
.account-check {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 4px;
font-size: 14px;
line-height: 1.5;
}
.account-check input { margin-top: 2px; flex: 0 0 auto; }
/* The two blocks at the bottom of the account page — seeing your data
and deleting the account. Both are folded away by default: they are
things you do once, not things you scroll past every time you change
a display name.
Real , like the diff and the admin panel's account groups:
it folds with the keyboard, it is announced as expandable, and the
browser keeps the state. Closed, the summary is the whole block, so
the padding lives on the body rather than on the container — a closed
fold should be a line, not a box with air in it. */
.account-fold { margin-top: 24px; }
.account-fold-summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
font-family: 'Pirata One', serif;
font-weight: 400;
font-size: 20px;
letter-spacing: .3px;
color: #2e2010;
}
.account-fold-summary::-webkit-details-marker { display: none; }
.account-fold-summary::before {
content: "";
border: 5px solid transparent;
border-left-color: var(--muted);
border-right-width: 0;
transition: transform .15s ease;
flex: 0 0 auto;
}
.account-fold[open] > .account-fold-summary::before { transform: rotate(90deg); }
.account-fold-body { padding: 0 18px 18px; }
/* Seeing and downloading what the site holds about you. Quieter than
the deletion block below it: this one only ever reads.
Still a fold, deliberately — it is what keeps the summary lazy, since
the page only queries anything when somebody opens it. The prose that
used to be inside moved to privacy.html; the drawer stayed. */
.data-zone {
border: 1px solid var(--gold);
background: rgba(255,255,255,.18);
}
.data-zone .account-note { max-width: 640px; line-height: 1.6; }
.data-zone .btn { margin-top: 16px; }
.data-summary { margin-top: 14px; }
/* Two columns on a wide card, stacked on a narrow one — a definition
list rather than a table because that is what this is. */
.data-list {
display: grid;
grid-template-columns: max-content 1fr;
gap: 4px 18px;
margin: 0;
font-size: 14px;
}
.data-list dt { color: var(--muted); }
.data-list dd { margin: 0; overflow-wrap: anywhere; }
/* Deleting the account. Set apart from the rest of the account page
because every other control there changes something you can change
back. The red is a left border, never the text colour — same rule as
the diff: it marks the block without making it harder to read for
anyone who can't separate the hues. */
.danger-zone {
border: 1px solid rgba(138,46,34,.4);
border-left: 3px solid var(--red);
background: rgba(138,46,34,.05);
}
.danger-zone .account-note { max-width: 640px; line-height: 1.6; }
.danger-zone .btn { margin-top: 14px; }
.danger-zone .change-reject-box { margin-top: 12px; }
.account-error { font-size: 14px; color: var(--red); margin: 10px 0 0; }
/* "Admin" next to the account name. Not a permission control — the
database decides that (profiles.is_admin, set in Studio only) — just
a visible confirmation of which account you're using. */
.account-badge {
display: inline-block;
margin-left: 10px;
padding: 2px 9px;
border: 1px solid var(--gold);
border-radius: 2px;
background: rgba(201,154,62,.22);
font-family: 'EB Garamond', serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: #4a3413;
vertical-align: middle;
}
/* The "create an account" / "forgot your password?" links under a form.
Deliberately plain text links: they're alternatives to the form above,
not competing actions, so nothing here should look like a button. */
.account-links { margin: 18px 0 0; font-size: 14px; }
.account-links-sep { color: var(--muted); margin: 0 8px; }
/* Forms with more than one field stack instead of flowing across the
row: sign-in, sign-up and "choose a new password". Two 280px fields
plus a button don't fit .account-page's 620px, so the default inline
flow wrapped them into a ragged two-and-a-half-row shape. The
single-field forms (a display name, an address) keep the inline
layout, where the button beside the field reads as one unit. */
.account-form-stacked {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
/* =====================================================================
RECENT CHANGES / PATROL (recent-changes.html, js/recent-changes.js)
A log, not a gallery: everything here is read in a column, oldest
convention on the site (the .card grids) deliberately not reused.
Entries are nested parchment cards like .entity-card, one shade
lighter than the page card they sit on, so a long list still reads as
a stack of separate things.
The one new colour idea is the before/after pair. It borrows --red
(which had been reserved and unused until now) for the outgoing value
and a matching muted green for the incoming one — as a LEFT BORDER and
a tag word, never as the text colour, because a diff has to stay
readable to anyone who can't tell the two hues apart. The word
"before"/"after" is the actual signal; the colour only backs it up.
===================================================================== */
.changes-page { max-width: 760px; }
.changes-section { margin-top: 34px; }
.changes-section:first-of-type { margin-top: 26px; }
.changes-heading {
font-family: 'Pirata One', serif;
font-weight: 400;
font-size: 24px;
color: #2e2010;
letter-spacing: .3px;
margin: 0 0 4px;
padding-bottom: 6px;
border-bottom: 1px solid var(--gold);
}
.change-list { margin-top: 16px; }
.change-entry {
background: var(--parchment-light);
border: 1px solid var(--gold);
padding: 14px 16px;
margin-bottom: 14px;
}
.change-entry:last-child { margin-bottom: 0; }
/* Title on the left, status on the right, wrapping to two lines on a
phone rather than squeezing the status into nothing. */
.change-head {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px 12px;
}
.change-title {
font-family: 'Pirata One', serif;
font-weight: 400;
font-size: 20px;
letter-spacing: .3px;
color: #2e2010;
margin: 0;
/* An id or a name from an unreviewed submission can be anything at
all, including one very long word. */
overflow-wrap: anywhere;
}
/* "character", "creature", … after the name. */
.change-kind {
margin-left: 9px;
font-family: 'EB Garamond', serif;
font-size: 13px;
font-weight: 400;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--muted);
}
.change-status {
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
padding: 2px 9px;
border: 1px solid var(--gold);
border-radius: 2px;
white-space: nowrap;
}
.change-status-pending { background: rgba(201,154,62,.28); color: #4a3413; }
.change-status-approved { background: rgba(63,107,58,.18); color: #2f4f2b; border-color: #3f6b3a; }
.change-status-rejected { background: rgba(138,46,34,.14); color: var(--red); border-color: var(--red); }
.change-meta {
font-size: 13.5px;
color: var(--muted);
margin: 6px 0 0;
}
.change-meta strong { color: #4a3413; font-weight: 600; }
/* Carries a title attribute with the exact timestamp — the dotted
underline is what says so. */
.change-time { border-bottom: 1px dotted transparent; cursor: default; }
.change-time[title]:not([title=""]) { border-bottom-color: rgba(107,90,66,.5); }
/* The role beside a direct edit — "Edit made by X · Trusted
Contributor". Quiet: it explains why there was no review, it isn't a
decoration on the person's name. */
.change-direct-role {
margin-left: 8px;
padding: 1px 7px;
border: 1px solid var(--gold);
border-radius: 2px;
background: rgba(201,154,62,.18);
color: #4a3413;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
white-space: nowrap;
}
/* A change in the edits history with a signed-in author but no
suggestion behind it — a restore, in practice. Deliberately duller
than .change-direct-role beside it: it notes how the change arrived,
it does not confer anything on the person. */
.change-outside {
margin-left: 8px;
padding: 1px 7px;
border: 1px solid rgba(90,74,48,.35);
border-radius: 2px;
color: #6b5a3c;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
white-space: nowrap;
}
.change-note {
font-size: 14px;
margin: 8px 0 0;
padding: 8px 10px;
background: rgba(255,255,255,.28);
border-left: 3px solid var(--gold);
overflow-wrap: anywhere;
}
.change-note-label { font-weight: 600; color: #4a3413; }
.change-warning {
font-size: 14px;
color: var(--red);
margin: 8px 0 0;
}
/* ---- the expandable diff ---- */
.change-details { margin-top: 10px; }
.change-details > summary {
cursor: pointer;
font-size: 14px;
color: var(--link);
/* The default triangle is a browser-specific shape; this replaces it
with the same caret the collapsible category headings use. */
list-style: none;
display: inline-flex;
align-items: center;
gap: 7px;
}
.change-details > summary::-webkit-details-marker { display: none; }
.change-details > summary::before {
content: "";
border: 5px solid transparent;
border-left-color: var(--muted);
border-right-width: 0;
transition: transform .15s ease;
}
.change-details[open] > summary::before { transform: rotate(90deg); }
.change-fields { margin-top: 12px; }
.change-field { margin-bottom: 16px; }
.change-field:last-child { margin-bottom: 0; }
.change-field-name {
font-family: 'EB Garamond', serif;
font-size: 13px;
font-weight: 700;
letter-spacing: .6px;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 6px;
}
.change-value {
border-left: 3px solid var(--muted);
padding: 6px 10px;
background: rgba(255,255,255,.24);
margin-bottom: 6px;
}
.change-value:last-child { margin-bottom: 0; }
.change-value-before { border-left-color: var(--red); background: rgba(138,46,34,.07); }
.change-value-after { border-left-color: #3f6b3a; background: rgba(63,107,58,.09); }
.change-value-tag {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 3px;
}
/* Values are shown exactly as stored — Markdown source, JSON, a file
path — so they keep their line breaks and never get re-wrapped into
something that isn't what the contributor typed. Long ones scroll
inside their own box rather than making the page taller than the
list it belongs to. */
.change-value pre {
margin: 0;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 12.5px;
line-height: 1.55;
color: var(--ink);
white-space: pre-wrap;
overflow-wrap: anywhere;
max-height: 260px;
overflow-y: auto;
}
/* ---- the line-by-line comparison ----
Two columns of the same lines, only where they differ, with a couple
of unchanged ones either side for bearings. Built by
FLA.buildTextDiff in js/data.js and used by the patrol queue, the
edits history and a page's own history.
Colour is never the only signal: every changed line carries a − or a
+ beside its number, and the pair of columns is labelled in words
above. Someone who can't separate the two tints still reads it. */
.diff-legend {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 4px;
}
.diff-legend span {
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--muted);
}
.diff {
border: 1px solid rgba(107,90,66,.3);
background: rgba(255,255,255,.24);
/* A very long unbroken line scrolls this box rather than the page. */
max-height: 340px;
overflow-y: auto;
}
.diff-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.diff-cell {
display: flex;
align-items: baseline;
gap: 8px;
padding: 2px 8px;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 12.5px;
line-height: 1.55;
color: var(--ink);
min-width: 0;
}
.diff-lineno {
flex: 0 0 auto;
min-width: 2.2em;
text-align: right;
font-size: 11px;
color: var(--muted);
user-select: none;
}
.diff-marker {
flex: 0 0 auto;
font-weight: 700;
user-select: none;
}
.diff-text {
min-width: 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.diff-row-change .diff-cell-before {
background: rgba(138,46,34,.09);
box-shadow: inset 3px 0 0 var(--red);
}
.diff-row-change .diff-cell-after {
background: rgba(63,107,58,.11);
box-shadow: inset 3px 0 0 #3f6b3a;
}
.diff-row-change .diff-cell-before .diff-marker { color: var(--red); }
.diff-row-change .diff-cell-after .diff-marker { color: #2f5a2b; }
/* The empty half of a pure insertion or deletion. Hatched rather than
blank so it reads as "nothing here" rather than "not loaded" — and
after the two rules above, with a class from each, because otherwise
they win on specificity and tint a cell that holds nothing. */
.diff-row-change .diff-cell-empty {
background: repeating-linear-gradient(
-45deg,
transparent, transparent 5px,
rgba(107,90,66,.09) 5px, rgba(107,90,66,.09) 10px);
box-shadow: none;
}
/* The words that actually moved, inside a line that replaced another. */
.diff-word-del { background: rgba(138,46,34,.28); }
.diff-word-ins { background: rgba(63,107,58,.3); }
.diff-skip {
padding: 3px 10px;
border-top: 1px solid rgba(107,90,66,.22);
border-bottom: 1px solid rgba(107,90,66,.22);
background: rgba(107,90,66,.07);
font-size: 11px;
letter-spacing: .6px;
text-transform: uppercase;
color: var(--muted);
}
/* "contains HTML" beside a field name in the patrol queue. Not a
warning that something is dangerous — the renderer sanitizes — but a
note that this field is markup and should be read as such before it's
approved. See hasMarkup() in js/recent-changes.js. */
.change-field-flag {
margin-left: 8px;
padding: 1px 7px;
border: 1px solid var(--red);
border-radius: 2px;
background: rgba(138,46,34,.1);
color: var(--red);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
}
.change-untouched { font-size: 13px; margin: 0; }
/* "changed here" beside a field name on a page's own history: this
version is where that field became what it says. Quieter than the
patrol queue's before/after, because a history is read as a sequence
rather than as a decision to make. */
.change-field-changed {
margin-left: 8px;
padding: 1px 7px;
border: 1px solid #3f6b3a;
border-radius: 2px;
background: rgba(63,107,58,.14);
color: #2f4f2b;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
}
/* The live row, sitting on top of a page's history. Marked with a
heavier border rather than a different colour: it's the same kind of
thing as the entries below it, just the one that is current. */
.change-entry-current { border-width: 2px; }
/* "See this page's history", under an entry in the global feed. A plain
link: restoring lives over there, and this is the way to it, not an
action in its own right. */
.change-history-link {
display: inline-block;
margin-top: 10px;
font-size: 13.5px;
}
/* ---- moderation ---- */
.change-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(201,154,62,.55);
}
.change-reject-box {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
/* Own row: the note field plus two buttons never fit beside the two
buttons that opened it. */
flex-basis: 100%;
}
.change-reject-note {
border: 1px solid var(--gold);
background: var(--parchment);
color: var(--ink);
padding: 8px 10px;
font-family: 'EB Garamond', serif;
font-size: 15px;
flex: 1 1 240px;
min-width: 0;
}
.change-reject-note:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
/* The sentence in front of the two confirm buttons — "Replace the page
as it is now with this version?". Sits on the same row, so restoring
asks and answers in one place. */
.change-confirm-question {
flex: 1 1 100%;
font-size: 14px;
color: var(--red);
}
.change-action-status {
flex-basis: 100%;
font-size: 14px;
color: var(--muted);
margin: 0;
}
.change-action-error { color: var(--red); }
.changes-more { margin-top: 16px; }
@media (max-width: 600px) {
/* The status chip on its own line, left-aligned with the title, rather
than pushed to a ragged right edge by justify-content. */
.change-head { justify-content: flex-start; }
.change-value pre { font-size: 12px; }
/* The comparison stacks: two columns of monospace in 190px each is
not a diff, it's a column of single words. The legend goes with
them — it labels two columns that no longer exist — and the − / +
markers carry the distinction on their own, which is why they were
never decoration in the first place. An unchanged line appears
once; the blank half of an insertion or deletion not at all. */
.diff-legend { display: none; }
.diff-row { grid-template-columns: 1fr; gap: 0; }
.diff-row-same .diff-cell-after { display: none; }
.diff-cell-empty { display: none; }
.diff-cell { font-size: 12px; }
}
/* =====================================================================
SUGGESTING AN EDIT (suggest.html, js/suggest.js)
The site's second real form, and the first one that isn't a handful of
short fields — so it reuses .account-field/.btn from the accounts
block above rather than growing a parallel set, and adds only what a
long form actually needs: full-width fields, a hint line under each
one, and the repeating infobox rows.
(The accounts block says to promote .btn/.account-field out of it if a
second form ever appears. This is that second form; they're being
shared in place instead, because moving them is a bigger edit than it
looks — every rule in both blocks would need re-reading — and nothing
about them is account-specific any more than it is form-specific.)
The "Suggest an edit" button that leads here (.suggest-bar) is at the
end of this block: it's the same control on nine other pages, built by
FLA.pageActions() in js/data.js.
===================================================================== */
.suggest-page { max-width: 820px; }
.suggest-form {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 20px;
margin: 24px 0 6px;
}
/* .account-field caps its input at 280px, which suits an email address
and not a character's name. Here every field runs the width of the
form and the long ones get room to breathe. */
.suggest-field { width: 100%; }
.suggest-field input { width: 100%; }
.suggest-field textarea {
border: 1px solid var(--gold);
background: var(--parchment-light);
color: var(--ink);
padding: 10px 12px;
/* Monospace, because it's Markdown source: alignment of list markers
and heading hashes is part of reading it. */
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 13.5px;
line-height: 1.6;
width: 100%;
resize: vertical;
}
.suggest-field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
/* The write-up and infobox blocks are s, not