/* Self-hosted fonts (tools/polices.sh): Source Serif 4, Source Sans 3 and Source Code Pro, SIL OFL 1.1,
   renamed « Cadrame … » in their subsets (the Reserved Font Name « Source »); licences in web/fonts/.
   Three subsets each, chosen by unicode-range, so that a page only loads the scripts it shows. The server
   rewrites each url() to the file's hashed name when it starts. */
@font-face { font-family: "Cadrame Serif"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/serif-600-latin-79e3b78ac19c.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cadrame Serif"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/serif-600-latin-ext-281c413e50a7.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cadrame Serif"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/serif-600-cyrillic-3a87dd38a7f3.woff2") format("woff2"); unicode-range: U+0301, U+0400-052F, U+1C80-1C8A, U+2116, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Cadrame Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/sans-400-latin-dbd85fd05e18.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cadrame Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/sans-400-latin-ext-b4c5936261bf.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cadrame Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/sans-400-cyrillic-bb823e596143.woff2") format("woff2"); unicode-range: U+0301, U+0400-052F, U+1C80-1C8A, U+2116, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Cadrame Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/sans-600-latin-567b49849697.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cadrame Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/sans-600-latin-ext-e67488c8f7b9.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cadrame Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/sans-600-cyrillic-ceb2581ac072.woff2") format("woff2"); unicode-range: U+0301, U+0400-052F, U+1C80-1C8A, U+2116, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Cadrame Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/mono-400-latin-09244c6b8ccd.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cadrame Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/mono-400-latin-ext-f2bc3165f86e.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cadrame Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/mono-400-cyrillic-00bdc096b999.woff2") format("woff2"); unicode-range: U+0301, U+0400-052F, U+1C80-1C8A, U+2116, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Cadrame Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/mono-500-latin-e5430fe68978.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cadrame Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/mono-500-latin-ext-cda88c3fbbdb.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cadrame Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/mono-500-cyrillic-eb1089aacd34.woff2") format("woff2"); unicode-range: U+0301, U+0400-052F, U+1C80-1C8A, U+2116, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

/* Layout: a sober project homepage, content first, in the spirit of OpenStreetMap or MusicBrainz.
   A 68rem column; the opening pairs the statement with a real-looking record; then the edition
   figure, how people take part, and where Cadrame is used. Tokens are reused as is by the Ktor site
   (fonts self-hosted there, Latin and Cyrillic subsets). */
:root {
  --paper: #ffffff;
  --wash: #f3f5f7;
  --ink: #1b1f24;
  --muted: #5a636c;
  --rule: #dde2e6;
  --accent: #24569b;
  --on-accent: #ffffff;
  --shot-a: #2b3540;
  --shot-b: #6f7c87;
  --serif: "Cadrame Serif", "Source Serif 4", "PT Serif", Georgia, serif;
  --sans: "Cadrame Sans", "Source Sans 3", "PT Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "Cadrame Mono", "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --small: 0.875rem;
  --base: 1.0625rem;
  --lead: 1.25rem;
  --h2: 1.6rem;
  /* Form tokens, from design/compte.html */
  --field: #ffffff;
  --rule-strong: #c3cbd2;
  --warn-ink: #8a3b12;
  --stop: #a33a2a;
  --ok-bg: #e6f4ea;
  --ok-ink: #1f6038;
  --radius: 6px;
  /* From design/contribution.html: the soft accent and the warnings about duplicates */
  --accent-soft: #e8eff9;
  --note-bg: #fdf3dc;
  --note-ink: #6e4600;
  --note-rule: #ead08f;
  /* From design/moderation.html */
  --urgent: #b4401a;
  --urgent-soft: #fbece6;
  --add: #1f6038;
  --del: #a33a2a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111417; --wash: #181c20; --ink: #e5e8eb; --muted: #9aa3ab; --rule: #2a3036;
    --accent: #8db4f0; --on-accent: #0d1a2c; --shot-a: #c4cdd5; --shot-b: #7d8a95;
    --field: #15191d; --rule-strong: #3a424a; --warn-ink: #f2a97f; --stop: #f29a8a; --ok-bg: #15291c; --ok-ink: #8fd4a5;
    --accent-soft: #1a2638; --note-bg: #2b2414; --note-ink: #f0c674; --note-rule: #5a4720;
    --urgent: #f08a63; --urgent-soft: #2e1a14; --add: #8fd4a5; --del: #f29a8a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #111417; --wash: #181c20; --ink: #e5e8eb; --muted: #9aa3ab; --rule: #2a3036;
  --accent: #8db4f0; --on-accent: #0d1a2c; --shot-a: #c4cdd5; --shot-b: #7d8a95;
  --field: #15191d; --rule-strong: #3a424a; --warn-ink: #f2a97f; --stop: #f29a8a; --ok-bg: #15291c; --ok-ink: #8fd4a5;
    --accent-soft: #1a2638; --note-bg: #2b2414; --note-ink: #f0c674; --note-rule: #5a4720;
    --urgent: #f08a63; --urgent-soft: #2e1a14; --add: #8fd4a5; --del: #f29a8a;
  color-scheme: dark;
}

body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--base); line-height: 1.6; }
/* Fields are as wide as their column, padding and border included: side by side, they line up. */
input, select, textarea, button { box-sizing: border-box; }
.wrap { max-width: 68rem; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; text-wrap: balance; }

/* Header */
.masthead { border-bottom: 1px solid var(--rule); }
.top { display: flex; align-items: center; gap: 0.75rem 2rem; flex-wrap: wrap; padding-block: 0.9rem; }
.brand { display: flex; align-items: center; gap: 0.5rem; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; color: var(--ink); text-decoration: none; }
.brand svg { width: 22px; height: 22px; flex: none; }
.brand path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: square; }
.brand rect { fill: var(--accent); }
/* flex-wrap: signed in, the five links do not fit on a phone's line. */
.nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover { text-decoration: underline; }
/* « Sign out » is a form's button (a link could sign anyone out), drawn as the other links. */
.nav form { margin: 0; }
.nav button { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; }
.nav button:hover { text-decoration: underline; }
.search { display: flex; margin-left: auto; min-width: 0; flex: 0 1 20rem; }
.search input {
  flex: 1; min-width: 0; font: inherit; font-size: 0.95rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-right: 0; border-radius: 3px 0 0 3px; padding: 0.45rem 0.7rem;
}
.search input::placeholder { color: var(--muted); }
.search button { font: 600 0.9rem/1 var(--sans); color: var(--ink); background: var(--wash); border: 1px solid var(--rule); border-radius: 0 3px 3px 0; padding: 0 0.8rem; cursor: pointer; }
.prefs { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.prefs .sep { width: 1px; height: 1rem; background: var(--rule); }
.langs, .themes { display: flex; gap: 0.15rem; }
.langs button, .themes button { font: 400 var(--small)/1 var(--sans); color: var(--muted); background: none; border: 0; padding: 0.35rem 0.3rem; cursor: pointer; }
.langs button[aria-pressed="true"], .themes button[aria-pressed="true"] { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
/* On the site each language is a link to its own address (/, /fr/, …), which needs no script. */
.langs a { font: 400 var(--small)/1 var(--sans); color: var(--muted); text-decoration: none; padding: 0.35rem 0.3rem; }
.langs a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.msg { margin: 0; font-size: var(--small); color: var(--muted); padding-bottom: 0.6rem; }
.msg:empty { display: none; }

/* Opening */
.opening { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
h1 { font-size: clamp(2rem, 4.3vw, 3rem); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 1.2rem; max-width: 20ch; }
.lead { font-size: var(--lead); line-height: 1.5; margin: 0 0 1.75rem; max-width: 46ch; }
.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.btn { font: 600 1rem/1 var(--sans); padding: 0.8rem 1.15rem; border-radius: 3px; text-decoration: none; }
.btn-main { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); }
.btn-plain { color: var(--ink); border: 1px solid var(--rule); }
.btn-plain:hover { border-color: var(--ink); }

/* A record, the way the site shows one */
.record { border: 1px solid var(--rule); background: var(--paper); }
.record-head { padding: 1rem 1.15rem 0.85rem; border-bottom: 1px solid var(--rule); }
/* « Modifier » beside the title, at the top right of the record. */
.page .record-head .record-edit { float: right; margin: 0 0 0.5rem 0.75rem; padding: 0.4rem 0.8rem; font-size: 0.9rem; }
.record-kicker { font-size: var(--small); color: var(--muted); margin: 0 0 0.2rem; }
.record h2 { font-size: 1.45rem; margin: 0; line-height: 1.2; }
.record-desc { margin: 0.15rem 0 0; color: var(--muted); }
.record table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.record th, .record td { text-align: left; vertical-align: top; padding: 0.55rem 1.15rem; border-bottom: 1px solid var(--rule); }
.record tr:last-child th, .record tr:last-child td { border-bottom: 0; }
.record th { font-weight: 600; width: 38%; color: var(--ink); }
.record td { overflow-wrap: anywhere; }
.ids { display: grid; gap: 0.15rem; }
/* A person's or a tag's videos, under the record's table. */
.record .references { padding: 0.9rem 1.15rem 1rem; border-top: 1px solid var(--rule); }
.record .references h2 { font-size: 1.1rem; margin: 0 0 0.3rem; }
.record .references h3 { font-size: 0.95rem; margin: 1rem 0 0; }
.record .references .uses { margin-top: 0.4rem; max-width: none; }
.record .references .help { margin: 0.5rem 0 0; color: var(--muted); font-size: var(--small); }
/* The record's ID, selected whole in one click, to paste elsewhere. */
.record-note .record-id { font-family: var(--mono); font-size: 0.82rem; user-select: all; overflow-wrap: anywhere; }
.record-note { margin: 0; padding: 0.6rem 1.15rem; font-size: var(--small); color: var(--muted); background: var(--wash); border-top: 1px solid var(--rule); }

/* Sections */
.band { background: var(--wash); border-block: 1px solid var(--rule); }
section.part { padding-block: clamp(2.5rem, 6vw, 4rem); }
h2.part-title { font-size: var(--h2); line-height: 1.2; margin: 0 0 1rem; }
.prose { max-width: 62ch; }
.prose p { margin: 0 0 1rem; }

/* What makes Cadrame unique: two halves of one sentence, then the claim */
.unique { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4rem); margin-top: 0.5rem; }
.unique > div { min-width: 0; }
.unique > div + div { border-left: 1px solid var(--rule); padding-left: clamp(2rem, 5vw, 4rem); }
.unique h3 { font-size: 1.2rem; margin: 0 0 0.4rem; }
.unique p { margin: 0; max-width: 46ch; }
.claim { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-family: var(--serif); font-weight: 600; font-size: 1.2rem; line-height: 1.4; max-width: 60ch; text-wrap: pretty; }

/* Edition timelines */
.editions { margin: 2rem 0 0; display: grid; }
.row { display: grid; grid-template-columns: 14rem minmax(0, 1fr) 12.5rem; gap: 0.4rem 1.25rem; align-items: center; padding-block: 0.65rem; border-bottom: 1px solid var(--rule); }
.row.axis { border-bottom: 0; padding-block: 0 0.15rem; }
.row-label { font-weight: 600; font-size: 0.95rem; min-width: 0; }
.ticks { position: relative; height: 1.1rem; }
.ticks span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.ticks span:first-child { transform: none; }
.ticks span:last-child { transform: translateX(-100%); }
.track { display: block; width: 100%; height: 26px; }
.track .a { fill: var(--shot-a); }
.track .b { fill: var(--shot-b); }
.track .logo { fill: var(--accent); }
.row-dur { display: grid; gap: 0.05rem; min-width: 0; font-size: 0.9rem; }
.tag { color: var(--muted); font-size: var(--small); }
figcaption { margin-top: 1rem; max-width: 64ch; font-size: var(--small); color: var(--muted); }

/* Where it is used */
.uses { list-style: none; margin: 1.25rem 0 0; padding: 0; max-width: 46rem; }
.uses li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.25rem 1.5rem; padding-block: 0.75rem; border-top: 1px solid var(--rule); }
.uses li:last-child { border-bottom: 1px solid var(--rule); }
.uses strong { font-weight: 600; }
.uses span { color: var(--muted); }

/* Footer */
.foot { border-top: 1px solid var(--rule); }
.foot .wrap { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem 2rem; flex-wrap: wrap; padding-block: 1.75rem 2.5rem; }
.motto { font-family: var(--serif); font-weight: 600; margin: 0; }
.foot-links { display: flex; gap: 1.25rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: var(--small); }
.proto { margin: 0; font-size: var(--small); color: var(--muted); width: 100%; }
.adult-pref { width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; font-size: var(--small); color: var(--muted); }
.adult-pref p { margin: 0; }
.adult-pref button { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Pages with a form (sign-in, second factor) and short notices: the rules of design/compte.html, scoped
   under .page so that they do not touch the homepage's .btn and .row. */
.page { padding-block: 2rem 4rem; max-width: 30rem; }
.page h1 { font-size: clamp(1.8rem, 3.6vw, 2.3rem); margin: 0 0 0.4rem; line-height: 1.15; max-width: none; }
.page .lede { margin: 0 0 1.75rem; color: var(--muted); max-width: 52ch; }
/* align-content: start: in a two-column grid, a field beside a taller one keeps its own height. */
.page .field { display: grid; gap: 0.35rem; margin-bottom: 1.2rem; min-width: 0; align-content: start; }
.page label { font-weight: 600; }
.page .help { margin: 0; color: var(--muted); font-size: var(--small); max-width: 60ch; }
.page .status { margin: 0 0 1rem; font-size: var(--small); }
.page .status.bad { color: var(--warn-ink); }
.page input[type="text"], .page input[type="password"] {
  font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); padding: 0.6rem 0.75rem; width: 100%; min-width: 0;
}
.page .code { max-width: 9rem; font-family: var(--mono); letter-spacing: 0.15em; }
.page .btn { font: inherit; border-radius: var(--radius); padding: 0.55rem 0.95rem; cursor: pointer; font-weight: 600; }
.page .btn-quiet { background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); }
.page .btn-quiet:hover { border-color: var(--ink); }
.page .btn-main { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); padding: 0.75rem 1.2rem; }
.page .secret { font-family: var(--mono); font-size: 0.95rem; letter-spacing: 0.04em; background: var(--wash); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.6rem 0.75rem; overflow-wrap: anywhere; user-select: all; }
.page .panel { background: var(--wash); border-radius: var(--radius); padding: 1rem 1.1rem; display: grid; gap: 0.7rem; margin-bottom: 1.2rem; }
.page .panel p { margin: 0; }
.page .actions-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
/* A record page and search results: the example record of the homepage, a little wider. */
.page.page-record { max-width: 46rem; }
.page .record h1 { font-size: 1.45rem; margin: 0; line-height: 1.2; }
.page .results { margin-top: 0; max-width: none; }
/* « Explore »: tags and decades as chips with their counts, and a pager. */
.explore section { margin-top: 2rem; }
.explore h2 { font-size: 1.3rem; margin: 0 0 0.6rem; }
.explore .chips-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.explore .chips-list a { display: inline-block; padding: 0.3rem 0.75rem; border: 1px solid var(--rule-strong); border-radius: 999px; text-decoration: none; color: var(--ink); }
.explore .chips-list a:hover { border-color: var(--accent); }
.explore .count { color: var(--muted); font-size: var(--small); font-variant-numeric: tabular-nums; }
.explore .pager { margin-top: 1.2rem; }
/* « Data »: its sections, and the API's addresses on a line of their own. */
.data-page section { margin-top: 2rem; }
.data-page h2 { font-size: 1.3rem; margin: 0 0 0.5rem; }
.data-page p { max-width: 64ch; }
.data-page .api-list li { grid-template-columns: minmax(0, 1fr); }
.data-page .api-list code { font-family: var(--mono); font-size: 0.88rem; font-weight: 500; overflow-wrap: anywhere; }
/* Creating an account and its settings: design/compte.html. */
.page .status.ok { color: var(--ok-ink); }
.page input[type="email"], .page select {
  font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); padding: 0.6rem 0.75rem; width: 100%; min-width: 0;
}
.page .btn-main:disabled { opacity: 0.45; cursor: not-allowed; }
.page .btn-danger { background: var(--paper); color: var(--warn-ink); border: 1px solid var(--warn-ink); }
.page a.btn { display: inline-block; text-decoration: none; }
.page .with-btn { display: flex; gap: 0.5rem; }
.page .with-btn input { flex: 1; }
.page .check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; }
.page .check input { margin-top: 0.3rem; flex: none; }
.page.page-wide { max-width: none; }
.page .signup { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.page .signin-link { margin-top: 1.5rem; }
.page .manual-note { margin: -1rem 0 1.5rem; }
.page .gives { border-left: 1px solid var(--rule); padding-left: clamp(1.5rem, 4vw, 3rem); }
.page .gives h2 { font-size: 1.15rem; margin: 0 0 0.6rem; }
.page .gives ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.45rem; }
.page .sent { background: var(--ok-bg); color: var(--ok-ink); border-radius: var(--radius); padding: 1.1rem 1.2rem; display: grid; gap: 0.6rem; }
.page .sent h2 { margin: 0; font-size: 1.25rem; }
.page .sent p { margin: 0; }
.page.settings, .page.page-admin, .page.page-terms { max-width: 46rem; }
.page.settings > section, .page.page-admin > section { border-top: 1px solid var(--rule); padding-block: 1.5rem; }
.page.settings > .actions-row { margin-bottom: 1.5rem; }
.page.settings h2, .page.page-admin h2 { font-size: 1.25rem; margin: 0 0 1rem; }
.page.settings h3 { font-family: var(--sans); font-size: 1rem; margin: 1.2rem 0 0.2rem; }
.page .inline-radios { display: flex; gap: 1.25rem; flex-wrap: wrap; border: 0; padding: 0; margin: 0 0 1.2rem; }
.page .inline-radios legend { font-weight: 600; padding: 0; margin-bottom: 0.35rem; }
.page .inline-radios label { font-weight: 400; display: flex; gap: 0.4rem; align-items: center; }
.page .sub { padding-left: 1.6rem; display: grid; gap: 0.4rem; margin-top: 0.4rem; }
.page .state { font-weight: 600; }
.page .state.on { color: var(--ok-ink); }
.page .apps { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.page .apps li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 1rem; align-items: center; padding-block: 0.65rem; border-bottom: 1px solid var(--rule); }
.page .apps li:first-child { border-top: 1px solid var(--rule); }
.page .app-name { font-weight: 600; }
.page .app-meta { color: var(--muted); font-size: var(--small); grid-column: 1; }
.page .apps form { grid-column: 2; grid-row: 1 / span 2; }
.page .saved { color: var(--ok-ink); font-size: var(--small); }
.page .saved:empty { display: none; }
.page .admin-table { width: 100%; border-collapse: collapse; font-size: var(--small); }
.page .admin-table th, .page .admin-table td { text-align: left; padding: 0.5rem 0.6rem 0.5rem 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.page .admin-table th { color: var(--muted); font-weight: 600; }
.page.page-terms p { max-width: 68ch; }
/* « What Cadrame refuses »: design/refus.html, one reading column, the request form set apart. */
.page.page-refuses { max-width: 42rem; padding-block: 2.5rem 4rem; }
.page-refuses h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.12; margin: 0 0 0.9rem; }
.page-refuses .lede { font-size: 1.2rem; line-height: 1.5; margin: 0 0 2.25rem; color: var(--ink); }
.page-refuses h2 { font-size: 1.3rem; margin: 2.25rem 0 0.8rem; }
.page-refuses .never { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.page-refuses .never li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.6rem; padding-block: 0.7rem; border-bottom: 1px solid var(--rule); }
.page-refuses .never svg { width: 1rem; height: 1rem; margin-top: 0.3rem; }
.page-refuses .never svg circle { fill: none; stroke: var(--stop); stroke-width: 2; }
.page-refuses .never svg path { fill: none; stroke: var(--stop); stroke-width: 2; stroke-linecap: round; }
.page-refuses .how { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.55rem; }
.page-refuses .hotline { margin: 1.25rem 0 0; font-size: var(--small); color: var(--muted); }
.page-refuses .request { margin-top: 2.75rem; background: var(--wash); border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.6rem); display: grid; gap: 0.9rem; }
.page-refuses .request h2 { margin: 0; }
.page-refuses .request p { margin: 0; }
.page-refuses .request .field { margin-bottom: 0.9rem; }
.page-refuses fieldset { border: 0; padding: 0; margin: 0 0 0.9rem; display: grid; gap: 0.4rem; }
.page-refuses legend { font-weight: 600; padding: 0; }
.page-refuses .radio { display: flex; gap: 0.55rem; align-items: flex-start; font-weight: 400; }
.page-refuses .radio input { margin-top: 0.35rem; flex: none; }
.page-refuses .received { background: var(--ok-bg); color: var(--ok-ink); border-radius: var(--radius); padding: 0.8rem 1rem; display: grid; gap: 0.35rem; }
/* « Add a video »: design/contribution.html, scoped under .contrib (its .page is .contrib-page here). */
.contrib [hidden] { display: none !important; }
.contrib .intro { padding-block: 2rem 0.5rem; }
.contrib .intro h1 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); margin: 0 0 0.35rem; line-height: 1.15; }
.contrib .intro p { margin: 0; color: var(--muted); max-width: 62ch; }
.contrib-page { display: grid; grid-template-columns: minmax(0, 1fr) 22.5rem; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; padding-block: 1.5rem 4rem; }
.contrib .step { border-top: 1px solid var(--rule); padding-block: 1.5rem; }
.contrib .step-head { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 1rem; }
.contrib .step-num { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.contrib .step h2 { font-size: 1.3rem; margin: 0; }
.contrib .step.locked > :not(.step-head):not(.step-locked-note) { opacity: 0.45; pointer-events: none; }
.contrib .step-locked-note { margin: 0 0 1rem; color: var(--muted); font-size: var(--small); }
.contrib .field { display: grid; gap: 0.35rem; margin-bottom: 1.15rem; min-width: 0; align-content: start; }
.contrib .label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.contrib label, .contrib legend { font-weight: 600; }
.contrib .optional { font-weight: 400; color: var(--muted); font-size: var(--small); }
.contrib .help { margin: 0; color: var(--muted); font-size: var(--small); max-width: 64ch; }
.contrib input[type="text"], .contrib input[type="search"], .contrib input[type="number"], .contrib input[type="url"], .contrib select, .contrib textarea {
  font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 0.6rem 0.75rem; width: 100%; min-width: 0;
}
.contrib textarea { min-height: 6.5rem; resize: vertical; line-height: 1.5; }
.contrib textarea.plot { min-height: 14rem; }
.contrib .label-row select { width: auto; }
/* An identifier in another database: which database, then the identifier. */
.contrib .id-pick { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0.5rem; align-items: center; }
.contrib .id-pick.removable { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto; }
.contrib .ids, .contrib .ids-list { display: grid; gap: 0.5rem; }
.contrib .ids { border: 0; padding: 0; margin: 0 0 1.15rem; }
.contrib .ids legend { padding: 0; margin-bottom: 0.35rem; }
.contrib .id-more { justify-self: start; font-size: var(--small); }
.contrib .id-remove { padding: 0.5rem 0.8rem; }
.contrib .id-pick label { font-weight: 400; }
.contrib .grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.25rem; }
.contrib .inline { display: flex; gap: 0.5rem; align-items: center; }
.contrib .inline select { width: auto; }
.contrib .counter { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.contrib .counter.over { color: var(--note-ink); }
.contrib .tag-chosen { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.contrib .tag-chosen:empty { display: none; }
.contrib .tag-pill { display: inline-flex; gap: 0.35rem; align-items: center; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 999px; padding: 0.15rem 0.35rem 0.15rem 0.7rem; font-size: 0.95rem; }
.contrib .tag-pill button { background: none; border: 0; cursor: pointer; color: var(--ink); padding: 0 0.3rem; font-size: 1rem; line-height: 1; }
.contrib .often { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; font-size: var(--small); color: var(--muted); margin-top: 0.4rem; }
.contrib .often button { border: 1px dashed var(--rule-strong); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 0.15rem 0.6rem; cursor: pointer; font-size: var(--small); }
.contrib .s-meta { color: var(--muted); font-size: var(--small); grid-column: 1; }
.contrib .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; border: 0; padding: 0; margin: 0 0 1.15rem; }
.contrib .chips legend { margin-bottom: 0.35rem; padding: 0; }
.contrib .chip { position: relative; font-weight: 400; }
.contrib .chip input { position: absolute; opacity: 0; inset: 0; }
.contrib .chip span { display: inline-block; padding: 0.4rem 0.8rem; border: 1px solid var(--rule-strong); border-radius: 999px; cursor: pointer; font-size: 0.95rem; }
.contrib .chip input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.contrib .chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.contrib .check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; }
.contrib .check input { margin-top: 0.3rem; flex: none; }
.contrib .suggest { list-style: none; margin: 0.5rem 0 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.contrib .suggest-head { padding: 0.55rem 0.9rem; font-size: var(--small); color: var(--muted); background: var(--wash); border-bottom: 1px solid var(--rule); }
.contrib .sugg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 1rem; align-items: center; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--rule); }
.contrib .sugg[aria-selected="true"] { background: var(--accent-soft); }
.contrib .s-title { font-weight: 600; }
.contrib .s-year { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 0.35rem; }
.contrib .s-desc { color: var(--muted); font-size: 0.95rem; grid-column: 1; }
.contrib .s-aka { color: var(--muted); font-size: var(--small); font-style: italic; grid-column: 1; }
.contrib .s-open { grid-column: 2; grid-row: 1 / span 3; }
.contrib .sugg-new { padding: 0.7rem 0.9rem; background: var(--paper); }
.contrib .link-btn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: left; font: inherit; }
.contrib .btn { font: inherit; border-radius: var(--radius); padding: 0.5rem 0.9rem; cursor: pointer; font-weight: 600; text-decoration: none; display: inline-block; }
.contrib .btn-quiet { background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); }
.contrib .btn-quiet:hover { border-color: var(--ink); }
.contrib .btn-main { font: inherit; font-weight: 600; border-radius: var(--radius); cursor: pointer; background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); padding: 0.75rem 1.1rem; width: 100%; }
.contrib .btn-main:disabled { opacity: 0.45; cursor: not-allowed; }
.contrib .chosen { display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; align-items: baseline; margin-top: 0.6rem; padding: 0.6rem 0.9rem; background: var(--ok-bg); color: var(--ok-ink); border-radius: var(--radius); font-size: 0.95rem; }
.contrib .warn { margin-top: 0.5rem; padding: 0.7rem 0.9rem; background: var(--note-bg); color: var(--note-ink); border: 1px solid var(--note-rule); border-radius: var(--radius); font-size: 0.95rem; display: grid; gap: 0.5rem; }
.contrib .warn p { margin: 0; }
.contrib .warn .actions, .contrib .done .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.contrib details.item-src-d > summary { list-style: none; font-size: var(--small); width: fit-content; }
.contrib details.item-src-d > summary::-webkit-details-marker { display: none; }
.contrib .item-src { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; margin-top: 0.4rem; padding: 0.6rem; background: var(--wash); border-radius: var(--radius); }
.contrib .item-src select { width: auto; }
.contrib .changes { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 1rem); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.contrib .changes h2 { font-size: 1.15rem; margin: 0; padding: 1rem 1.1rem 0.25rem; }
.contrib .changes-sub { margin: 0; padding: 0 1.1rem 0.85rem; color: var(--muted); font-size: var(--small); border-bottom: 1px solid var(--rule); }
.contrib .change-list { list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow-y: auto; }
.contrib .change-list li { padding: 0.55rem 1.1rem; border-bottom: 1px solid var(--rule); display: grid; gap: 0.05rem; min-width: 0; }
.contrib .c-label { font-size: var(--small); color: var(--muted); }
.contrib .c-value { overflow-wrap: anywhere; }
.contrib .c-src { font-size: 0.8rem; color: var(--accent); }
.contrib .empty { margin: 0; padding: 0.9rem 1.1rem; color: var(--muted); font-size: var(--small); border-bottom: 1px solid var(--rule); }
.contrib .publish { padding: 1rem 1.1rem 1.1rem; display: grid; gap: 0.9rem; }
.contrib .publish fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.contrib .publish legend { padding: 0; margin-bottom: 0.25rem; }
.contrib .radio { display: flex; gap: 0.55rem; align-items: flex-start; font-weight: 400; }
.contrib .radio input { margin-top: 0.3rem; flex: none; }
.contrib .src-detail { display: grid; gap: 0.4rem; padding-left: 1.6rem; }
.contrib .duty { font-size: var(--small); color: var(--muted); margin: 0; }
.contrib .reason { font-size: var(--small); color: var(--note-ink); margin: 0; }
.contrib .reason:empty { display: none; }
.contrib .done { padding: 1.1rem; display: grid; gap: 0.6rem; }
.contrib .record-form { max-width: 46rem; padding-block: 1rem 4rem; }
.contrib .moments .c-label { font-family: var(--mono); }
.contrib .done h3 { margin: 0; font-size: 1.15rem; color: var(--ok-ink); }
.contrib .done p { margin: 0; }
/* Moderation: design/moderation.html, scoped under .moderation. */
.moderation [hidden] { display: none !important; }
.moderation .intro { padding-block: 2rem 0.25rem; }
.moderation .intro h1 { font-size: clamp(1.8rem, 3.6vw, 2.3rem); margin: 0 0 0.35rem; line-height: 1.15; }
.moderation .intro p { margin: 0; color: var(--muted); }
.moderation .tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--rule); margin-top: 1.5rem; flex-wrap: wrap; }
.moderation .tabs .tab { border-bottom: 2px solid transparent; padding: 0.6rem 0; margin-bottom: -1px; color: var(--muted); font-weight: 600; display: flex; gap: 0.45rem; align-items: baseline; text-decoration: none; }
.moderation .tabs .tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.moderation .count { font-family: var(--mono); font-size: 0.78rem; background: var(--wash); border: 1px solid var(--rule); border-radius: 999px; padding: 0.05rem 0.45rem; color: var(--ink); }
.moderation .count.urgent { background: var(--urgent-soft); border-color: var(--urgent); color: var(--urgent); }
.moderation .queue-help { margin: 1rem 0 0.5rem; color: var(--muted); font-size: var(--small); }
.moderation .filters { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.4rem 0 0.6rem; font-size: var(--small); color: var(--muted); }
.moderation .filters .filter { border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: var(--small); text-decoration: none; }
.moderation .filters .filter[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.moderation .items { list-style: none; margin: 0; padding: 0; }
.moderation .item { border-bottom: 1px solid var(--rule); padding: 1rem 0; display: grid; gap: 0.45rem; }
.moderation .item.urgent { border-left: 3px solid var(--urgent); padding-left: 0.9rem; }
.moderation .item.resolved .item-head { opacity: 0.6; }
.moderation .item-head { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; align-items: baseline; }
.moderation .subject { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; }
.moderation .chip { font-size: 0.75rem; letter-spacing: 0.02em; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 0.05rem 0.5rem; color: var(--muted); }
.moderation .chip.urgent { border-color: var(--urgent); color: var(--urgent); background: var(--urgent-soft); }
.moderation .rev { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.moderation .desc { color: var(--muted); font-size: 0.95rem; margin: 0; }
.moderation .diff { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.15rem 1rem; margin: 0; font-size: 0.95rem; }
.moderation .diff dt { color: var(--muted); }
.moderation .diff dd { margin: 0; overflow-wrap: anywhere; }
.moderation .diff .del { color: var(--del); text-decoration: line-through; }
.moderation .diff .add { color: var(--add); }
.moderation .meta { font-size: var(--small); color: var(--muted); margin: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; }
.moderation .meta strong { color: var(--ink); font-weight: 600; }
.moderation .comment { font-size: 0.95rem; margin: 0; }
.moderation .actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.2rem 0 0; }
.moderation .btn { font: inherit; border-radius: var(--radius); padding: 0.4rem 0.8rem; cursor: pointer; font-weight: 600; font-size: 0.95rem; text-decoration: none; display: inline-block; }
.moderation .btn-main { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); }
.moderation .btn-quiet { background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); }
.moderation .btn-quiet:hover { border-color: var(--ink); }
.moderation .btn-urgent { background: var(--urgent); color: var(--paper); border: 1px solid var(--urgent); }
.moderation .link-btn { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: var(--small); }
.moderation .panel { background: var(--wash); border-radius: var(--radius); padding: 0.8rem 0.9rem; max-width: 40rem; }
.moderation .panel form { display: grid; gap: 0.55rem; }
.moderation .panel label { font-weight: 600; font-size: var(--small); }
.moderation .panel select, .moderation .panel input[type="text"], .moderation .panel textarea {
  font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 0.45rem 0.6rem; width: 100%; min-width: 0;
}
.moderation .panel textarea { min-height: 3.5rem; resize: vertical; }
.moderation .preview { font-size: 0.95rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.6rem 0.75rem; margin: 0; }
.moderation .preview-label { font-size: var(--small); color: var(--muted); margin: 0; }
.moderation .state { margin: 0.8rem 0 0; font-size: 0.95rem; color: var(--ok-ink); background: var(--ok-bg); border-radius: var(--radius); padding: 0.45rem 0.75rem; }
.moderation .log { border-top: 1px solid var(--rule); margin-top: 2.5rem; padding-block: 1.5rem 4rem; }
.moderation .log h2 { font-size: 1.25rem; margin: 0 0 0.3rem; }
.moderation .log p { margin: 0 0 0.8rem; color: var(--muted); font-size: var(--small); max-width: 64ch; }
.moderation .log ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; font-size: 0.95rem; }
.contrib .publish-like { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.35rem; }
@media (max-width: 560px) { .moderation .diff { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 920px) {
  .contrib-page { grid-template-columns: minmax(0, 1fr); }
  .contrib .changes { position: static; }
}
@media (max-width: 560px) {
  .contrib .grid-2, .contrib .item-src, .contrib .id-pick, .contrib .id-pick.removable { grid-template-columns: minmax(0, 1fr); }
  .contrib .id-remove { justify-self: start; }
}
@media (max-width: 820px) {
  .page .signup { grid-template-columns: minmax(0, 1fr); }
  .page .gives { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
  .page .admin-table { display: block; overflow-x: auto; }
}
@media (max-width: 480px) {
  .page .with-btn { flex-wrap: wrap; }
}

@media (max-width: 900px) {
  .opening { grid-template-columns: minmax(0, 1fr); }
  .search { margin-left: 0; flex: 1 1 100%; order: 3; }
}
@media (max-width: 760px) {
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .row .track, .row .ticks { grid-column: 1 / -1; grid-row: 2; }
  .row-dur { text-align: right; }
  .row.axis .row-label, .row.axis .row-dur { display: none; }
  .row.axis .ticks { grid-row: 1; }
  .uses li { grid-template-columns: minmax(0, 1fr); }
  .unique { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .unique > div + div { border-left: 0; padding-left: 0; }
}
@media (max-width: 480px) {
  .record th { width: auto; display: block; padding-bottom: 0; border-bottom: 0; }
  .record td { display: block; padding-top: 0.1rem; }
  .record tr { display: block; border-bottom: 1px solid var(--rule); }
  .record tr:last-child { border-bottom: 0; }
  .record td { border-bottom: 0; }
}

/* Moderation, all tags: one small form per tool, in a row. */
.moderation .tag-tools { margin: 0.4rem 0 0; }
.moderation .tag-tools .inline { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.moderation .tag-tools input { flex: 1 1 14rem; min-width: 0; }
.moderation .tag-tools select { font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 0.35rem 0.5rem; }
.moderation .tag-tools .check { display: flex; gap: 0.5rem; align-items: center; margin: 0.35rem 0 0; font-size: var(--small); font-weight: 400; }
.moderation .tag-tools .check input { flex: none; margin: 0; }
.moderation div.state p { margin: 0.2rem 0; }
.moderation div.state .actions { margin-top: 0.45rem; }
.pending .chip { font-size: 0.75rem; letter-spacing: 0.02em; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 0.05rem 0.5rem; color: var(--muted); }
[data-for-moderators][hidden] { display: none !important; }
.moderation .alias-list { list-style: none; padding: 0; margin: 0 0 0.4rem; display: flex; gap: 0.4rem 0.8rem; flex-wrap: wrap; }
.moderation .alias-list li { display: inline-flex; align-items: center; gap: 0.25rem; }

/* The cast: one row per credit, the name, the role, × ; a new person's description below. */
.contrib .cast-list { display: grid; gap: 0.45rem; margin-bottom: 0.5rem; }
.contrib .cast-list:empty { display: none; }
.contrib .cast-row { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1.2fr) auto; gap: 0.5rem; align-items: center; }
.contrib .cast-name { font-weight: 600; overflow-wrap: anywhere; }
.contrib .cast-name .optional { font-weight: 400; }
.contrib .cast-remove { border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); border-radius: var(--radius); width: 2.2rem; height: 2.2rem; cursor: pointer; font-size: 1.1rem; }
.contrib .cast-who { grid-column: 1 / -1; display: grid; gap: 0.25rem; padding-left: 0.75rem; border-left: 2px solid var(--rule); }
@media (max-width: 560px) { .contrib .cast-row { grid-template-columns: 1fr auto; } .contrib .cast-row input[name^="cast_role"], .contrib .cast-row input[name^="cast_new_role"] { grid-column: 1 / -1; grid-row: 2; } }

/* A place in a series: the season and the number, short, side by side. */
.contrib .place-nums { display: flex; gap: 0.4rem; }
.contrib .place-nums input { width: 5.5rem; min-width: 0; }

/* Where a record is: its series and its place there, under the title; the code before an episode in a list. */
.record-head .record-place { margin: 0.2rem 0 0; color: var(--muted); }
.uses .place-code { font-family: var(--mono); font-size: 0.85em; color: var(--muted); }
.results .place { display: block; color: var(--muted); }

/* The character a cast member plays: under the row, quiet. */
.contrib .cast-char { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; font-size: 0.92rem; }
.moderation .tag-edit { margin-top: 0.3rem; }
.moderation .tag-edit > summary { cursor: pointer; color: var(--accent); font-size: var(--small); }
.moderation .tag-create { max-width: 36rem; }
.moderation.tag-admin h2 { margin-top: 1.6rem; }
.moderation .alias-row { margin: 0.3rem 0; }
.moderation .tag-search { margin: 0.6rem 0 1rem; } .moderation .tag-search input { flex: 1 1 18rem; min-width: 0; }
/* Every text field of the moderation (tag search, aliases, names…) as the contribution form's: full size, readable. */
.moderation input[type="text"], .moderation input[type="search"], .moderation textarea {
  font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 0.6rem 0.75rem; min-width: 0;
}
.moderation .inline { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.moderation .inline input[type="text"], .moderation .inline input[type="search"] { flex: 1 1 18rem; width: auto; }
.moderation .tag-search input[type="search"] { font-size: 1.05rem; }
/* The activity tab: the counts, the latest of a kind, the most active. */
.moderation table.activity { border-collapse: collapse; width: 100%; margin: 0.6rem 0 1.4rem; font-variant-numeric: tabular-nums; }
.moderation table.activity th, .moderation table.activity td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--rule); text-align: right; }
.moderation table.activity th[scope="row"], .moderation table.activity thead th:first-child { text-align: left; font-weight: 500; }
.moderation table.activity tr.chosen { background: var(--accent-soft); }
.moderation table.activity td.muted { color: var(--muted); }
.moderation .activity-list li, .moderation .activity-top li { margin: 0.3rem 0; }
@media (max-width: 560px) { .moderation table.activity th, .moderation table.activity td { padding: 0.4rem 0.3rem; font-size: var(--small); } }
.moderation .activity-list .published { color: var(--ok, var(--ink)); font-weight: 500; } .moderation .activity-list .muted, .moderation p.help { color: var(--muted); }

/* The tag page: an alias (a spelling) and a merged tag (a former tag), side by side. */
.moderation .tag-explain { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; margin: 1rem 0 0; }
.moderation .tag-explain > div { background: var(--wash); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.7rem 0.9rem; }
.moderation .tag-explain p { margin: 0.3rem 0 0; color: var(--muted); font-size: var(--small); }
.moderation .alias-origin { margin: 0.15rem 0 0; color: var(--muted); font-size: var(--small); }
.moderation .merged-tag .actions .help { color: var(--muted); font-size: var(--small); }

/* The pencil beside each value of a record, and the value's own page. */
.pencil { color: var(--muted); text-decoration: none; font-size: var(--small); padding: 0 0.15rem; }
.pencil:hover, .pencil:focus-visible { color: var(--accent); }
.record h1 .pencil { font-size: 1rem; vertical-align: middle; }
.claim-page .claim-now { background: var(--wash); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.8rem 1rem; }
.claim-page .claim-value { font-size: var(--lead); margin: 0; white-space: pre-wrap; }
.claim-page .claim-now .meta, .claim-page .help { color: var(--muted); font-size: var(--small); }
.claim-page .claim-form { margin-top: 1.4rem; }
.claim-page .claim-form h2 { font-size: var(--base); margin: 0 0 0.4rem; }
.claim-page .inline { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-start; }
.claim-page .inline input, .claim-page .inline textarea { flex: 1 1 16rem; min-width: 0; }
.claim-page .status.note { background: var(--note-bg); color: var(--note-ink); }
.claim-page .claim-others { padding-left: 1.2rem; }

/* Moderation, one record's merges: the two records side by side, why the writer would refuse, the choice of the one kept. */
.moderation .compare-wrap { overflow-x: auto; margin: 0.5rem 0 1rem; }
.moderation .merge-compare { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.moderation .merge-compare th, .moderation .merge-compare td { text-align: left; vertical-align: top; padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.moderation .merge-compare thead th { font-family: var(--serif); font-size: 1.05rem; }
.moderation .merge-compare tbody th { color: var(--muted); font-weight: 600; width: 22%; }
.moderation .merge-compare td { width: 39%; }
.moderation .merge-compare .conflict { color: var(--urgent); font-weight: 600; }
.moderation .warn { margin: 0.5rem 0 1rem; padding: 0.7rem 0.9rem; background: var(--note-bg); color: var(--note-ink); border: 1px solid var(--note-rule); border-radius: var(--radius); display: grid; gap: 0.45rem; }
.moderation .warn p, .moderation .warn ul { margin: 0; }
.moderation .merge-form { display: grid; gap: 0.6rem; max-width: 44rem; margin: 0.8rem 0; }
.moderation .merge-form .inline-radios { display: grid; gap: 0.35rem; border: 0; padding: 0; margin: 0; }
.moderation .merge-form .inline-radios legend { font-weight: 600; margin-bottom: 0.3rem; }
.moderation .merge-form .inline-radios label { display: flex; gap: 0.45rem; align-items: baseline; }
.moderation .merge-form .field { display: grid; gap: 0.25rem; }
.moderation .merge-form .field label { font-weight: 600; font-size: var(--small); }
.moderation .merge-form input[type="text"] { font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 0.45rem 0.6rem; width: 100%; min-width: 0; }
.moderation .dup-records { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
.moderation .dup-records .meta { display: inline; }
.moderation .log-undo { display: inline; margin-left: 0.4rem; }
.moderation .log-undo .link-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--accent); }
.moderation .pager { margin: 1rem 0; display: flex; gap: 0.8rem; flex-wrap: wrap; }
@media (max-width: 560px) {
  .moderation .merge-compare tbody th { width: auto; }
}