/* ==========================================================================
   Sed Contra — the one stylesheet.

   Register: Hacker News list, cream page on white boxes, maroon for the
   site's own voice, text links for actions, monospace where alignment
   carries meaning (the evidence graph, diffs, the scores line).

   Tokens are the whole palette; four type sizes; no transitions, no
   gradients, no rounded corners. Anything a page needs is in here, in the
   order a reader meets it: shell, text, forms, votes, rows, the claim page,
   then the smaller pages.
   ========================================================================== */

/* --- 1. tokens ------------------------------------------------------------ */

:root {
    --maroon: #800000;      /* the site's colour: header, current, voted */
    --cream: #f6f6ef;       /* page ground */
    --white: #ffffff;       /* boxes */
    --ink: #000000;         /* text */
    --muted: #828282;       /* meta, help, secondary */
    --rule: #cccccc;        /* borders */
    --rule-light: #f0f0f0;  /* row separators */
    --link: #0000ee;        /* links in prose */
    --for: #059862;         /* supports */
    --against: #d93025;     /* opposes, errors */
    --amber: #856404;       /* warnings */
    --for-bg: #e8f5e9;
    --against-bg: #fdecea;
    --amber-bg: #fff3cd;

    --font: Verdana, Geneva, sans-serif;
    --mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;

    --meta: 11px;      /* meta lines, help, tables */
    --list: 12px;      /* the list, the body default */
    --reading: 13px;   /* claim descriptions, responses, comments */
    --title: 18px;     /* page and claim titles */
}

/* --- 2. base -------------------------------------------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font);
    font-size: var(--list);
    line-height: 1.5;
    color: var(--ink);
    background: var(--cream);
}

a {
    color: var(--link);
}

a:visited {
    color: var(--link);
}

h1, h2, h3, h4 {
    font-weight: bold;
    line-height: 1.3;
}

h1 {
    font-size: var(--title);
}

h2 {
    font-size: var(--reading);
}

h3, h4 {
    font-size: var(--list);
}

p {
    margin: 0 0 8px 0;
}

ul, ol {
    list-style: none;
}

button {
    font: inherit;
}

img {
    max-width: 100%;
}

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

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 10px;
}

/* --- 3. header ------------------------------------------------------------ */

.site-header {
    background: var(--maroon);
    padding: 4px 0;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    font-size: var(--reading);
    min-height: 26px;
}

.site-title {
    font-weight: bold;
    color: var(--ink);
    background: var(--white);
    text-decoration: none;
    padding: 1px 4px;
    margin-right: 4px;
}

.nav a,
.nav button {
    color: var(--white);
    text-decoration: none;
    background: none;
    border: none;
    padding: 2px 2px;
    cursor: pointer;
    white-space: nowrap;
}

.nav a:visited {
    color: var(--white);
}

.nav a:hover,
.nav button:hover {
    text-decoration: underline;
}

.nav .site-title:hover {
    text-decoration: none;
}

.nav-right {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
}

.nav-sep {
    color: rgba(255, 255, 255, 0.5);
}

.nav .rep {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--meta);
}

.nav .beta {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--meta);
    white-space: nowrap;
}

.nav .flag-count {
    background: var(--white);
    color: var(--maroon);
    font-size: 10px;
    padding: 0 4px;
    margin-left: 2px;
}

.nav form {
    display: inline;
}

/* --- 4. messages ---------------------------------------------------------- */

.message {
    position: relative;
    padding: 8px 30px 8px 10px;
    margin: 10px 0;
    border: 1px solid var(--rule);
    background: var(--white);
}

.message-success {
    border-color: var(--for);
    color: var(--for);
}

.message-error {
    border-color: var(--against);
    color: var(--against);
}

.message-warning,
.message-info {
    border-color: var(--amber);
    color: var(--amber);
}

.message-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: var(--title);
    line-height: 1;
    cursor: pointer;
    color: var(--muted);
}

/* --- 5. layout ------------------------------------------------------------ */

.main {
    min-height: calc(100vh - 110px);
    /* padding-block, not the shorthand: the side gutter is .container's, and
       the phone rule below narrows it without flattening this breathing room. */
    padding-block: 20px;
}


.section {
    margin-bottom: 20px;
}

.section-title {
    font-size: var(--reading);
    font-weight: bold;
    margin: 0 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rule);
}

/* A section header: the title, and the one thing the section asks of a
   reader at the far right of the same line. Where that action opens a form
   the header is the fold's <summary>, so the form drops in under the rule
   at full width; the grey word carries the affordance, not a triangle. */
.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rule);
}

.section-head .section-title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.section-head .action {
    margin-left: auto;
    font-size: var(--meta);
}

summary.section-head {
    cursor: pointer;
    list-style: none;
}

/* The whole header row is the control, so the word it opens answers for it. */
summary.section-head:hover .action {
    text-decoration: underline;
    color: var(--ink);
}

summary.section-head::-webkit-details-marker {
    display: none;
}

.section-fold[open] > .section-head {
    margin-bottom: 12px;
}

/* Open, the form needs the same air below it that the header has above. */
.section-fold[open] {
    padding-bottom: 15px;
}

.subsection-title {
    font-size: var(--list);
    font-weight: bold;
    color: var(--muted);
    margin: 16px 0 6px 0;
}

.page-title {
    font-size: var(--title);
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--maroon);
}

.page-head {
    margin-bottom: 15px;
}

.page-head h1 {
    margin-bottom: 2px;
}

.breadcrumb {
    font-size: var(--list);
    color: var(--muted);
    margin-bottom: 12px;
}

.breadcrumb a {
    color: var(--muted);
}

.footer {
    margin-top: 30px;
    padding: 15px 0;
    border-top: 2px solid var(--maroon);
    text-align: center;
    font-size: var(--meta);
    color: var(--muted);
}

.footer a {
    color: var(--muted);
    text-decoration: none;
    margin: 0 6px;
}

.footer a:hover {
    text-decoration: underline;
}

/* --- 6. text -------------------------------------------------------------- */

.meta {
    font-size: var(--meta);
    color: var(--muted);
}

.meta a,
.muted a {
    color: var(--muted);
}

.meta a:hover {
    color: var(--ink);
}

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

.mono {
    font-family: var(--mono);
}

.for {
    color: var(--for);
}

.against {
    color: var(--against);
}

.warn {
    color: var(--amber);
}

.empty {
    color: var(--muted);
    font-style: italic;
    padding: 10px 0;
}

.reading {
    font-size: var(--reading);
    line-height: 1.6;
}

.reading a {
    color: var(--link);
}

.reading p,
.reading ul,
.reading ol,
.reading blockquote,
.reading pre {
    margin-bottom: 8px;
}

.reading ul {
    list-style: disc;
    margin-left: 18px;
}

.reading ol {
    list-style: decimal;
    margin-left: 18px;
}

.reading blockquote {
    border-left: 2px solid var(--rule);
    padding-left: 8px;
    color: var(--muted);
}

.reading code {
    font-family: var(--mono);
    font-size: var(--list);
    background: var(--cream);
    padding: 0 3px;
}

.reading pre {
    font-family: var(--mono);
    font-size: var(--list);
    background: var(--cream);
    padding: 8px;
    overflow-x: auto;
}

.deleted-user {
    color: var(--muted);
    font-style: italic;
}

.ai-indicator {
    font-size: 10px;
    color: var(--muted);
    cursor: help;
}

.ai-content {
    border-left: 3px solid var(--muted) !important;
}

/* The label keeps its own space rather than sitting over the text: the last
   column of a list row, a float on the boxes so the first line runs beside
   it and the rest of the text runs full width. */
.row.ai-content::after,
.claim.ai-content::before,
.comment.ai-content::before {
    content: 'AI content';
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.row.ai-content::after {
    flex-shrink: 0;
    padding-top: 2px;
}

.claim.ai-content::before,
.comment.ai-content::before {
    float: right;
    margin-left: 10px;
}


/* --- 7. buttons and action links ---------------------------------------- */

.btn {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--rule);
    background: var(--white);
    color: var(--ink);
    font-size: var(--list);
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
}

.btn:visited {
    color: var(--ink);
}

.btn:hover {
    background: var(--cream);
}

.btn-primary,
.btn-primary:visited {
    background: var(--maroon);
    color: var(--white);
    border-color: var(--maroon);
}

.btn-primary:hover {
    background: var(--maroon);
    opacity: 0.9;
}

.btn-danger {
    color: var(--against);
    border-color: var(--against);
}

.btn-sm {
    padding: 2px 8px;
    font-size: var(--meta);
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 6px;
}


/* A text action: the same weight as the meta line it sits in. */
.action,
.cancel {
    color: var(--muted);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.action:visited,
.cancel:visited {
    color: var(--muted);
}

.action:hover,
.cancel:hover {
    text-decoration: underline;
    color: var(--ink);
}

.action-danger:hover {
    color: var(--against);
}

.follow {
    color: var(--muted);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.follow:hover {
    text-decoration: underline;
    color: var(--ink);
}

.follow.following {
    color: var(--maroon);
}

.flag-link {
    color: var(--muted);
    text-decoration: none;
}

.flag-link:hover {
    color: var(--against);
    text-decoration: underline;
}

.flag-link.flagged {
    color: var(--rule);
    cursor: default;
    text-decoration: none;
}

/* --- 8. forms ------------------------------------------------------------- */

.form-container {
    max-width: 420px;
    margin: 30px auto;
    padding: 25px 30px;
    background: var(--white);
    border: 1px solid var(--rule);
}

.form-container--wide {
    max-width: 620px;
}

.form-title {
    font-size: var(--title);
    margin-bottom: 15px;
}

.field {
    margin-bottom: 14px;
}

.field label,
.form-label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--list);
    font-weight: bold;
}

.field .check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    cursor: pointer;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="date"],
input[type="number"],
input[type="search"],
textarea,
select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--rule);
    background: var(--white);
    font-family: inherit;
    font-size: var(--reading);
    color: var(--ink);
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--maroon);
    outline-offset: -1px;
}

input[disabled] {
    background: var(--cream);
    color: var(--muted);
}

textarea {
    resize: vertical;
    min-height: 80px;
}

select {
    width: auto;
}

.help {
    font-size: var(--meta);
    color: var(--muted);
    margin-top: 3px;
}

.error,
.errorlist li {
    font-size: var(--meta);
    color: var(--against);
    margin-top: 3px;
}

.form-errors {
    border: 1px solid var(--against);
    padding: 6px 10px;
    margin-bottom: 12px;
    color: var(--against);
}

.actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

/* Guidance folded away under the field it belongs to. */
.field details {
    font-size: var(--meta);
    color: var(--muted);
    margin: 4px 0;
}

.field details summary {
    cursor: pointer;
}

.field details ul {
    list-style: disc;
    margin: 4px 0 4px 18px;
}

/* Social login */
.social-auth-section {
    margin-bottom: 20px;
}

.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid var(--rule);
    background: var(--white);
    color: var(--ink);
    text-decoration: none;
}

.btn-social:visited {
    color: var(--ink);
}

.divider {
    position: relative;
    text-align: center;
    margin: 15px 0;
    color: var(--muted);
    font-size: var(--meta);
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--rule);
}

.divider-text {
    position: relative;
    background: var(--white);
    padding: 0 8px;
}

/* --- 9. tables and pagination ------------------------------------------- */

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--list);
}

.table th {
    text-align: left;
    padding: 5px 8px;
    border-bottom: 1px solid var(--rule);
    font-weight: normal;
    color: var(--muted);
    white-space: nowrap;
}

.table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--rule-light);
    vertical-align: top;
}

.table .num {
    text-align: right;
}

.table a {
    color: var(--ink);
    text-decoration: none;
}

.table a:hover {
    text-decoration: underline;
}

.table-wrap {
    overflow-x: auto;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--rule-light);
    font-size: var(--meta);
    color: var(--muted);
}

.pagination a {
    color: var(--ink);
    text-decoration: none;
}

.pagination a:hover {
    text-decoration: underline;
}

/* --- 10. the vote widget -------------------------------------------------- */

/* ▲ +5 ▼ — two one-field forms around the score. Works without JavaScript
   (a plain POST redirects back); with HTMX the widget swaps itself. */
.vote {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--meta);
    line-height: 1;
    white-space: nowrap;
}

.vote form {
    display: inline;
}

.vote button,
.vote .off {
    background: none;
    border: none;
    padding: 0 2px;
    font: inherit;
    font-size: var(--meta);
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}

.vote button:hover {
    color: var(--maroon);
}

.vote .voted {
    color: var(--maroon);
    font-weight: bold;
}

.vote .off {
    color: var(--rule);
    cursor: default;
}

/* agree / disagree on the claim page. Muted: the arrows are the control, the
   words only say what pressing one asserts. */
.vote-meaning {
    color: var(--muted);
}

.vote-score {
    min-width: 24px;
    text-align: center;
    color: var(--ink);
    font-family: var(--mono);
}

.vote.htmx-request {
    opacity: 0.6;
}

/* --- 11. the claim row and the list ------------------------------------- */

.list-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-bottom: 8px;
    font-size: var(--meta);
    color: var(--muted);
}

.list-search {
    display: inline;
}

.list-search input {
    width: 220px;
    padding: 3px 6px;
    font-size: var(--list);
}

.sort,
.list-filter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 4px;
}

.sort a,
.list-filter a {
    color: var(--muted);
    text-decoration: none;
}

.sort a:hover,
.list-filter a:hover {
    text-decoration: underline;
}

.sort a.active,
.list-filter a.active {
    color: var(--ink);
    font-weight: bold;
}

.sort-sep {
    color: var(--rule);
}

.filter-line {
    font-size: var(--meta);
    color: var(--muted);
    margin-bottom: 8px;
}

.rows {
    background: var(--white);
    border: 1px solid var(--rule);
    padding: 4px 10px;
    list-style: none;
}

.row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--rule-light);
}

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

.row .vote {
    flex-shrink: 0;
    padding-top: 2px;
}

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

.row-title {
    color: var(--ink);
    text-decoration: none;
    font-size: var(--list);
}

.row-title:visited {
    color: var(--ink);
}

.row-title:hover {
    text-decoration: underline;
}

.row .meta {
    margin-top: 1px;
}

.verdict {
    text-transform: lowercase;
}

.verdict-supported {
    color: var(--for);
}

.verdict-refuted {
    color: var(--against);
}

.verdict-open {
    color: var(--muted);
}

.verdict-unscored {
    color: var(--muted);
}

.search-highlight {
    background: var(--amber-bg);
}

/* --- 12. the claim page --------------------------------------------------- */

.claim {
    background: var(--white);
    border: 1px solid var(--rule);
    padding: 15px 20px;
    margin-bottom: 15px;
}

.claim-title {
    font-size: var(--title);
    margin: 0 0 6px 0;
    overflow-wrap: break-word;
}

/* The page's one statement. Loud enough to be read before the description,
   quiet enough that the warrant beside it still reads as a sentence: the
   verdict carries the weight, everything after it is the evidence for it. */
.claim-status {
    font-size: var(--reading);
    margin: 0 0 8px 0;
}

.claim-status .verdict {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* An absent verdict is still an answer, so it keeps the slot and the weight —
   but it is not an assertion, so it does not get the assertion's shout. */
.claim-status .verdict-unscored {
    text-transform: none;
    letter-spacing: normal;
}

.claim-warrant {
    color: var(--muted);
}

.claim-warrant a {
    color: var(--muted);
}

.claim-objection {
    font-size: var(--meta);
    color: var(--muted);
    margin-top: 2px;
}

.claim-objection a {
    color: var(--against);
}

/* What the claim lacks. Ink rather than muted: the graph already said "no
   opposing evidence yet" in grey at the weight of everything around it, and
   the point of saying it here is that it is read. */
.claim-needs {
    font-size: var(--meta);
    color: var(--ink);
    margin-top: 2px;
}

.claim-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    font-size: var(--meta);
    color: var(--muted);
    margin-bottom: 12px;
}

.claim-line a {
    color: var(--muted);
    text-decoration: none;
}

.claim-line a:hover {
    text-decoration: underline;
    color: var(--ink);
}

.claim-line .fields a {
    color: var(--muted);
}

.claim-line details {
    display: inline;
}

.claim-line summary {
    display: inline;
    cursor: pointer;
    list-style: none;
}

.claim-line summary::-webkit-details-marker {
    display: none;
}

.claim-body {
    font-size: var(--reading);
    line-height: 1.6;
    margin-bottom: 12px;
}

.claim-sources {
    margin: 10px 0;
    padding-top: 8px;
    border-top: 1px solid var(--rule-light);
}

.claim-sources .label {
    font-size: var(--meta);
    color: var(--muted);
}

.add-field {
    margin-top: 6px;
    font-size: var(--meta);
}

.add-field form {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
}

.add-field input[type="text"] {
    width: 200px;
    padding: 3px 6px;
    font-size: var(--list);
}

.add-field .suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
}

.add-field .suggest button {
    background: none;
    border: 1px solid var(--rule);
    padding: 1px 6px;
    font-size: var(--meta);
    cursor: pointer;
}

/* The five epistemic virtues, folded away until someone wants to rate. */
.virtues {
    margin: 8px 0 12px;
    font-size: var(--meta);
}

.virtues summary {
    color: var(--muted);
    cursor: pointer;
}

.virtues summary:hover {
    color: var(--ink);
}

.virtue-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 6px;
}

.virtue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.virtue-name {
    cursor: help;
}

/* Inline form boxes (add evidence, add citation) */
.inline-form {
    background: var(--white);
    border: 1px solid var(--maroon);
    padding: 12px 15px;
    margin: 8px 0;
}

/* A one-word form — delete, ×, withdraw, add a field — reads as a word, not a box. */
.word-form {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.inline-form h3 {
    margin-bottom: 8px;
}

.inline-form .field {
    margin-bottom: 10px;
}

/* Evidence type: the one choice the form makes before anything is typed.

   Two filled boxes across the full width made it the loudest control on a
   page whose actions are all grey words, and the widest thing on a form
   whose real work is the claim below it. It is two words on the label's own
   line now, carrying the graph's marks, grey until chosen and then in the
   colour that side is given everywhere else. The radio is still a radio:
   hidden, but focused, checked and announced as one. */

.field:has(.evidence-type-toggle) .form-label {
    display: inline;
    margin-right: 8px;
}

.evidence-type-toggle {
    display: inline-flex;
    gap: 12px;
}

.evidence-type-toggle input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.evidence-type-toggle label {
    display: inline;
    margin-bottom: 0;
    /* The size of the `.evidence-type` badge this choice ends up as, wherever
       the evidence is read back. */
    font-size: var(--meta);
    font-weight: normal;
    color: var(--muted);
    cursor: pointer;
}

.evidence-type-toggle label:hover {
    color: var(--ink);
    text-decoration: underline;
}

/* The hidden radio's own ring would be drawn on a box nobody can see. */
.evidence-type-toggle label:has(input:focus-visible) {
    outline: 2px solid var(--maroon);
    outline-offset: 2px;
}

.evidence-type-toggle label:has(input:checked[value="supports"]) {
    color: var(--for);
    font-weight: bold;
}

.evidence-type-toggle label:has(input:checked[value="opposes"]) {
    color: var(--against);
    font-weight: bold;
}

/* --- 13. the evidence graph ---------------------------------------------- */

/* The ASCII stemma. Branch glyphs (├ └) are real characters in the markup;
   the continuation spine is a border-left on .graph-children, the same idiom
   the comment thread uses. */

.claim-graph {
    font-family: var(--mono);
    font-size: var(--meta);
    line-height: 1.6;
    letter-spacing: -0.2px;
}

.graph-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--rule-light);
    padding-bottom: 6px;
    margin-bottom: 8px;
}

.graph-heading {
    font-size: var(--meta);
    font-weight: bold;
    text-transform: lowercase;
    margin: 0;
}

.graph-rule {
    color: var(--rule);
}

.graph-rule-fill {
    flex: 1 1 auto;
    border-top: 1px solid var(--rule);
    height: 0;
    min-width: 12px;
}

.graph-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}

.graph-control-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.graph-control-label {
    color: var(--muted);
}

.graph-control {
    color: var(--link);
    text-decoration: none;
    padding: 0 2px;
}

.graph-control:hover {
    text-decoration: underline;
}

.graph-control.active {
    color: var(--ink);
    font-weight: bold;
    text-decoration: underline;
}

.graph-sep {
    color: var(--rule);
}

/* position: relative so the .visually-hidden spans inside each line, which
   are position: absolute, are contained here rather than widening the
   document past the viewport on a phone. Lines wrap (.graph-line below), so
   overflow-x: auto is a safety net the phone story asserts is never used. */
.graph-body {
    position: relative;
    overflow-x: auto;
}

/* Every band carries the rule, so the score column is flush across all three;
   only its colour changes. The `cited by` band has no polarity to declare and
   leaves it transparent rather than sitting 8px out of line with the others. */
.graph-band {
    margin: 6px 0;
    border-left: 2px solid transparent;
    padding-left: 6px;
}

/* The two halves of the argument, told apart before a single glyph is read.
   Never colour alone: every line in the band also carries its ⊕ or ⊖. */
.graph-band-supports {
    border-left-color: var(--for);
}

.graph-band-opposes {
    border-left-color: var(--against);
}

.graph-band-label {
    color: var(--muted);
    margin-bottom: 2px;
}

/* Air between top-level branches only, so a long band reads as a handful of
   arguments rather than one block of lines. Nested rows stay tight: the
   indent already separates them. */
.graph-band > .graph-node {
    margin-bottom: 5px;
}

/* Each line is a flex row: the marker column, the glyph gutter (polarity and
   branch), then the content, which wraps under itself so continuation lines
   hang beneath the title column rather than under the glyphs. Flex drops the
   whitespace between the three; column-gap is the one space the inline
   layout put there. */
.graph-line {
    display: flex;
    align-items: baseline;
    column-gap: 1ch;
}

.graph-node {
    display: block;
}

/* In ch, so the step keeps its proportion to the type when the graph drops to
   10px on a phone. Two characters reads as a level; 8px did not. */
.graph-children {
    margin-left: 1ch;
    padding-left: 1ch;
    border-left: 1px solid var(--rule);
}

.graph-branch {
    color: var(--rule);
}

details.graph-node > summary {
    list-style: none;
    cursor: pointer;
}

details.graph-node > summary::-webkit-details-marker {
    display: none;
}

/* The marker column: the disclosure triangle on a summary, an empty box of
   the same width on a leaf or a "more" line, so every gutter starts in the
   same column. */
details.graph-node > summary::before,
.graph-node-leaf > .graph-line::before,
.graph-focal-line::before,
.graph-pending::before,
.graph-more::before {
    content: "";
    flex: none;
    width: 10px;
    color: var(--muted);
}

details.graph-node > summary::before {
    content: "\25B8";
}

details.graph-node[open] > summary::before {
    content: "\25BE";
}

.graph-gutter {
    flex: none;
    white-space: nowrap;
}

.graph-content {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.graph-polarity {
    display: inline-block;
    width: 10px;
}

.graph-supports {
    color: var(--for);
}

.graph-opposes {
    color: var(--against);
}

.graph-polarity-focal {
    color: var(--maroon);
}

.graph-score,
.graph-subtree,
.graph-repeat,
.graph-more,
.graph-empty,
.graph-pending,
.graph-tag,
.graph-discuss {
    color: var(--muted);
}

/* The score is a column, not a word in the sentence: fixed width at the head of
   the gutter so every title in a band starts at the same place and the numbers
   can be read straight down. Width, never padding characters — the tests match
   its text exactly.

   Five characters, because that is what [+31] and [-99] take: at 4ch they
   overflowed and carried their own title 1ch right of their neighbours', which
   is the misalignment this column exists to remove. A score past ±99 pushes its
   own row out and leaves everyone else's alone. */
.graph-score {
    min-width: 5ch;
    text-align: right;
}

.graph-tag,
.graph-discuss {
    text-decoration: none;
}

.graph-tag:hover,
.graph-discuss:hover {
    text-decoration: underline;
}

/* Chips are atomic: a score, a tag, a repeat note or the virtue strip moves
   to the next line whole, and breaks inside itself only when it is wider
   than the column on its own. */
.graph-score,
.graph-subtree,
.graph-tag,
.graph-repeat,
.graph-virtues {
    display: inline-block;
}

/* The claim's own attributes, held off from the title and its actions. The gap
   is what makes the line read as a title with footnotes rather than as six
   things of equal weight — the third tier is spacing, not a fainter grey, which
   on link text would only make the contrast worse. */
.graph-attrs {
    margin-left: 1.5ch;
}

.graph-empty,
.graph-pending {
    font-style: italic;
}

.graph-title {
    color: var(--ink);
    text-decoration: none;
}

.graph-title:visited {
    color: var(--ink);
}

.graph-title:hover {
    text-decoration: underline;
}

.graph-unscored {
    color: var(--amber);
}

/* The controls live here rather than above the tree: a reader meets the
   evidence before the machinery, and the panel opens straight into content. */
.graph-footer {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    border-top: 1px solid var(--rule-light);
    margin-top: 8px;
    padding-top: 6px;
    color: var(--muted);
}

.graph-reach {
    flex: 1 1 auto;
}

/* Full width so it opens under the footer line rather than squeezing it. */
.graph-legend {
    flex: 1 0 100%;
}

.graph-legend > summary {
    cursor: pointer;
}

.graph-legend > summary:hover {
    color: var(--ink);
}

.graph-legend-list {
    list-style: none;
    margin-top: 4px;
}

.graph-legend-list li {
    margin-bottom: 2px;
}

.graph-virtues {
    letter-spacing: 1px;
    cursor: help;
}

.graph-virtue-strong {
    color: var(--ink);
    font-weight: bold;
}

.graph-virtue-weak {
    color: var(--muted);
}

.graph-virtue-unrated {
    color: var(--rule);
}

.graph-virtue-negative {
    color: var(--against);
}

.graph-focal-rule {
    border-top: 2px double var(--rule);
    margin: 4px 0;
}

/* A pivot between the bands, not a summary of the claim. Everything the block
   here used to restate is already on the page: the title is the <h1>, the score
   is in the vote widget beside it, the fields are in the meta line, and the
   metrics are in the scores line at the foot. */
/* Indented to the bands' own inset (their 2px rule plus 6px) so the ◆ lands in
   the same column as the ⊕ and ⊖ above and below it. */
.graph-focal-line {
    font-weight: bold;
    color: var(--muted);
    padding-left: 8px;
}

/* The full-page graph and its inspector. */
.claim-graph-page {
    margin: 10px 0;
}

.graph-page-head {
    font-family: var(--mono);
    font-size: var(--meta);
    color: var(--muted);
    margin-bottom: 8px;
}

.graph-page-title {
    color: var(--ink);
}

.graph-action {
    color: var(--muted);
    text-decoration: none;
    padding: 0 1px;
}

.graph-action:hover {
    text-decoration: underline;
}

.graph-inspector {
    font-family: var(--mono);
    font-size: var(--meta);
    line-height: 1.6;
    background: var(--white);
    border: 1px solid var(--rule);
    padding: 8px 10px;
    margin-top: 10px;
    overflow-x: auto;
}

.graph-inspector-head {
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid var(--rule-light);
    padding-bottom: 6px;
    margin-bottom: 8px;
}

.graph-inspector-title {
    font-weight: bold;
}

.graph-inspector-body {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 2px 10px;
}

.graph-inspector-body dt {
    color: var(--muted);
}

.graph-inspector-body dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.graph-inspector-foot {
    border-top: 1px solid var(--rule-light);
    margin-top: 8px;
    padding-top: 6px;
}

/* --- 14. citations -------------------------------------------------------- */

.citations {
    margin-top: 6px;
    font-size: var(--list);
}


.citation-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    padding: 2px 0;
}

.citation-marker,
.citation-domain,
.citation-ref {
    color: var(--muted);
    font-size: var(--meta);
}

.citation-marker {
    min-width: 20px;
}

.citation-ref::before {
    content: "@ ";
}

.citation-link {
    color: var(--ink);
    text-decoration: none;
}

.citation-link:hover {
    text-decoration: underline;
}

.citation-excerpt {
    width: 100%;
    color: var(--muted);
    font-style: italic;
    font-size: var(--meta);
    margin-left: 24px;
    padding: 2px 0 2px 8px;
    border-left: 2px solid var(--rule);
}

.citation-delete {
    color: var(--muted);
    text-decoration: none;
    margin-left: 4px;
}

.citation-delete:hover {
    color: var(--against);
}

/* The add-a-citation form, HTMX-loaded under a list, and the citation rows
   on the claim form (three server-rendered rows plus a <template>). */
.citation-form,
.citation-row {
    background: var(--cream);
    border: 1px solid var(--rule);
    padding: 8px 10px;
    margin: 8px 0;
    font-size: var(--list);
}

.citation-form .field,
.citation-row .field {
    margin-bottom: 6px;
}

.citation-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
    font-size: var(--meta);
    color: var(--muted);
}

.citation-remove {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    font-size: var(--meta);
}

.citation-remove:hover {
    color: var(--against);
    text-decoration: underline;
}

.citation-add {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    font-size: var(--meta);
}

.citation-add:hover {
    color: var(--ink);
    text-decoration: underline;
}

.citation-form-inline {
    display: flex;
    gap: 8px;
}

.citation-form-inline .field {
    flex: 1;
}

/* --- 15. respondeo -------------------------------------------------------- */

.responses-section .section-head {
    margin-bottom: 8px;
}

.response-count {
    font-size: var(--meta);
    color: var(--muted);
}

.current-label,
.status-current {
    font-size: var(--meta);
    font-weight: bold;
    color: var(--maroon);
    text-transform: lowercase;
}



.response-card {
    background: var(--cream);
    border: 1px solid var(--rule);
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: var(--list);
}

.response-card.response-current {
    border-left: 3px solid var(--maroon);
}

.response-card.response-compact {
    background: var(--white);
}

.response-title {
    font-size: var(--reading);
    margin: 0 0 4px 0;
}

.response-title a {
    color: var(--ink);
    text-decoration: none;
}

.response-title a:hover {
    text-decoration: underline;
}

.response-meta {
    font-size: var(--meta);
    color: var(--muted);
    margin-bottom: 8px;
}

.response-meta > span + span::before {
    content: " \00b7 ";
}

.response-meta a {
    color: var(--muted);
    text-decoration: none;
}

.response-meta a:hover {
    text-decoration: underline;
}

.expertise-badge {
    display: inline-block;
    padding: 0 4px;
    background: var(--rule-light);
    color: var(--ink);
    font-size: var(--meta);
    margin-right: 2px;
}

.response-status {
    text-transform: lowercase;
}

.status-draft {
    color: var(--amber);
}

.status-superseded,
.status-withdrawn {
    color: var(--muted);
}

.response-content {
    font-size: var(--reading);
    line-height: 1.5;
}

.read-more {
    font-size: var(--meta);
    color: var(--muted);
}

.response-citations {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--rule-light);
}

.citations-header {
    font-size: var(--meta);
    font-weight: bold;
    color: var(--muted);
    margin: 0 0 4px 0;
}

.response-citations .citation-item {
    display: block;
}

.evidence-type {
    display: inline-block;
    font-size: var(--meta);
    margin-right: 4px;
}

.evidence-type.supporting,
.evidence-supports {
    color: var(--for);
}

.evidence-type.opposing,
.evidence-opposes {
    color: var(--against);
}

.citation-context {
    font-size: var(--meta);
    color: var(--muted);
    font-style: italic;
    margin: 2px 0 0 0;
}

.response-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--rule-light);
    font-size: var(--meta);
    color: var(--muted);
}

.response-stats .stat + .stat::before {
    content: " \00b7 ";
}

.response-actions {
    margin-left: auto;
}

.response-actions a,
.response-actions button {
    margin-left: 6px;
}

/* The response page. */
.response-detail {
    background: var(--white);
    border: 1px solid var(--rule);
    padding: 15px;
}

.response-status-banner {
    display: inline-block;
    font-size: var(--meta);
    text-transform: lowercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.response-detail .response-title {
    font-size: var(--title);
    margin: 0 0 6px 0;
}

.response-meta-full {
    font-size: var(--meta);
    color: var(--muted);
    margin-bottom: 12px;
}

.response-meta-full a {
    color: var(--muted);
    text-decoration: none;
}

.response-meta-full a:hover {
    text-decoration: underline;
}

.date-item + .date-item::before {
    content: " \00b7 ";
}

.response-body-layout {
    display: flex;
    gap: 24px;
}

.response-sidebar {
    width: 190px;
    flex-shrink: 0;
    font-size: var(--list);
}

.response-sidebar h3 {
    font-size: var(--meta);
    font-weight: bold;
    color: var(--muted);
    text-transform: lowercase;
    margin: 12px 0 6px 0;
    border-bottom: 1px solid var(--rule-light);
}

.response-sidebar > div:first-child > h3 {
    margin-top: 0;
}

.stats-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    margin: 0;
}

.stats-list dt {
    color: var(--muted);
}

.stats-list dd {
    margin: 0;
}

.response-main {
    flex: 1;
    min-width: 0;
    font-size: var(--reading);
    line-height: 1.6;
}

.response-main h2 {
    font-size: var(--reading);
    margin: 14px 0 6px 0;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 3px;
}

.response-main > div:first-child > h2 {
    margin-top: 0;
}

.citation-full-item {
    background: var(--cream);
    border: 1px solid var(--rule);
    padding: 8px 10px;
    margin-bottom: 8px;
    font-size: var(--list);
}

.citation-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.evidence-link {
    color: var(--ink);
    text-decoration: none;
}

.evidence-link:hover {
    text-decoration: underline;
}

.evidence-score {
    font-size: var(--meta);
    color: var(--muted);
    margin-left: auto;
}

.citation-context-full {
    margin-top: 4px;
    font-size: var(--list);
}

.response-footer-full {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
}

.claim-card-mini {
    background: var(--cream);
    border: 1px solid var(--rule);
    padding: 8px 10px;
    font-size: var(--list);
}

.claim-card-mini .row-title {
    font-weight: bold;
}

/* The responses list page and the response editor. */
.responses-page-layout,
.response-editor-layout {
    display: flex;
    gap: 24px;
}

.responses-main,
.editor-main {
    flex: 1;
    min-width: 0;
}

.responses-sidebar,
.editor-sidebar {
    width: 230px;
    flex-shrink: 0;
}

.sidebar-card {
    background: var(--white);
    border: 1px solid var(--rule);
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: var(--list);
}

.sidebar-card h3 {
    font-size: var(--meta);
    font-weight: bold;
    color: var(--muted);
    text-transform: lowercase;
    margin: 0 0 6px 0;
}

.sidebar-card .btn {
    margin-top: 6px;
}

.responses-list .response-list-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--rule-light);
}

.response-preview {
    background: var(--white);
    border: 1px solid var(--rule);
    padding: 12px 15px;
    margin: 10px 0;
}

/* The citations editor on the response form: a list with move links and an
   add form under it. */
.citations-editor .citation-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--rule-light);
}

.citations-editor .citation-content {
    flex: 1;
    min-width: 0;
}

.citation-actions {
    white-space: nowrap;
}

.evidence-cite-item {
    padding: 6px 0;
    border-bottom: 1px solid var(--rule-light);
}

.evidence-cite-item .inline-form {
    margin-top: 4px;
}

/* --- 16. discussion ------------------------------------------------------- */

.comment-form textarea,
.reply-form textarea {
    min-height: 70px;
    margin-bottom: 6px;
}

.comment {
    padding: 6px 0;
    font-size: var(--reading);
    line-height: 1.5;
}

.comment-indent-1,
.comment-indent-2,
.comment-indent-3,
.comment-indent-4,
.comment-indent-5,
.comment-indent-6,
.comment-indent-7,
.comment-indent-8,
.comment-indent-9,
.comment-indent-10,
.comment-indent-deep {
    border-left: 2px solid var(--rule);
    padding-left: 10px;
}

.comment-indent-1 { margin-left: 20px; }
.comment-indent-2 { margin-left: 40px; }
.comment-indent-3 { margin-left: 60px; }
.comment-indent-4 { margin-left: 80px; }
.comment-indent-5 { margin-left: 100px; }
.comment-indent-6 { margin-left: 120px; }
.comment-indent-7 { margin-left: 140px; }
.comment-indent-8 { margin-left: 160px; }
.comment-indent-9 { margin-left: 180px; }
.comment-indent-10 { margin-left: 200px; }

.comment-indent-deep {
    margin-left: 200px;
    border-left-style: dotted;
}

.comment-head {
    font-size: var(--meta);
    color: var(--muted);
    margin-bottom: 2px;
}

.comment-head a {
    color: var(--muted);
    text-decoration: none;
}

.comment-head a:hover {
    text-decoration: underline;
}

.comment-head .vote {
    margin-right: 4px;
}

.comment-text {
    margin: 2px 0 0 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.comment-text p {
    margin: 0 0 6px 0;
}

.comment-text p:last-child {
    margin-bottom: 0;
}

.comment-text code {
    background: var(--rule-light);
    padding: 1px 4px;
    font-family: var(--mono);
    font-size: var(--list);
}

.comment-text pre {
    background: var(--rule-light);
    padding: 8px;
    overflow-x: auto;
    font-size: var(--list);
    margin: 6px 0;
}

.comment-text blockquote {
    margin: 6px 0;
    padding-left: 10px;
    border-left: 2px solid var(--rule);
    color: var(--muted);
}

/* reply as a <details>: the summary is one meta word, the form opens under
   the comment. */
.reply {
    display: inline;
    font-size: var(--meta);
}

.reply > summary {
    display: inline;
    list-style: none;
    color: var(--muted);
    cursor: pointer;
}

.reply > summary::-webkit-details-marker {
    display: none;
}

.reply > summary:hover {
    text-decoration: underline;
}

.reply-form {
    margin: 8px 0 4px 0;
    padding: 8px 10px;
    background: var(--white);
    border: 1px solid var(--rule);
    font-size: var(--list);
}

/* --- 17. the evidence page ------------------------------------------------ */

.pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 12px 0;
}

.pair-side {
    background: var(--white);
    border: 1px solid var(--rule);
    padding: 10px 12px;
}

.pair-side.for {
    border-left: 3px solid var(--for);
}

.pair-side.against {
    border-left: 3px solid var(--against);
}

.pair-side.neutral {
    border-left: 3px solid var(--muted);
}

.pair-role {
    font-size: var(--meta);
    color: var(--muted);
    text-transform: lowercase;
    margin-bottom: 4px;
}

.pair-title {
    font-size: var(--reading);
    margin: 0 0 6px 0;
}

.pair-title a {
    color: var(--ink);
    text-decoration: none;
}

.pair-title a:hover {
    text-decoration: underline;
}

.pair-body {
    font-size: var(--reading);
    line-height: 1.6;
    margin-bottom: 6px;
}

.relevance {
    background: var(--cream);
    padding: 8px 10px;
    border-left: 3px solid var(--maroon);
    font-size: var(--reading);
    line-height: 1.5;
    margin: 8px 0;
}

/* --- 18. the claim form --------------------------------------------------- */

.similar-claims {
    background: var(--amber-bg);
    border: 1px solid var(--amber);
    padding: 8px 10px;
    margin: 6px 0;
    font-size: var(--list);
}

.similar-claims .label {
    font-weight: bold;
    color: var(--amber);
    display: block;
    margin-bottom: 4px;
}

.similar-claims li {
    padding: 1px 0;
}

.similar-claims a {
    color: var(--ink);
}

/* The quality helper: one bar per dimension, in words. */
.quality {
    font-size: var(--meta);
    color: var(--muted);
    margin: 6px 0;
}

.quality-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 1px 0;
}

.quality-row .label {
    width: 90px;
    flex-shrink: 0;
}

.quality-bar {
    flex: 1;
    height: 5px;
    background: var(--rule-light);
    max-width: 200px;
}

.quality-bar span {
    display: block;
    height: 100%;
    background: var(--muted);
}

.quality-bar.good span {
    background: var(--for);
}

.quality-bar.poor span {
    background: var(--against);
}

.quality-suggestions {
    margin-top: 4px;
}

.quality-suggestions li::before {
    content: "\2013 ";
}

/* The claim picker on the evidence form: a search box, then results as
   radios, so the choice works without a script. */
.picker-results {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--rule);
    border-top: none;
    background: var(--white);
}

.picker-results label {
    display: flex;
    gap: 6px;
    align-items: baseline;
    padding: 5px 8px;
    border-bottom: 1px solid var(--rule-light);
    cursor: pointer;
    font-size: var(--list);
}

.picker-results label:hover {
    background: var(--cream);
}

.picker-results label:has(input:checked) {
    background: var(--cream);
    font-weight: bold;
}

.picker-results input[type="radio"] {
    flex-shrink: 0;
}

.picker-results .meta {
    font-weight: normal;
}

.picker-empty {
    padding: 6px 8px;
    color: var(--muted);
    font-size: var(--meta);
    border: 1px solid var(--rule);
    border-top: none;
    background: var(--white);
}

/* --- 19. profile, users, the record ------------------------------------- */

.profile-head {
    background: var(--white);
    border: 1px solid var(--rule);
    padding: 12px 15px;
    margin-bottom: 12px;
}

.profile-name {
    font-size: var(--title);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.profile-name .rep {
    font-size: var(--reading);
    font-weight: normal;
    color: var(--muted);
}

.profile-name .follow {
    font-size: var(--meta);
    font-weight: normal;
}

.profile-bio {
    font-size: var(--reading);
    margin: 6px 0;
}

.record {
    font-family: var(--mono);
    font-size: var(--list);
    margin: 6px 0;
}

.record b {
    font-weight: bold;
}

.record .for {
    color: var(--for);
}

.record .against {
    color: var(--against);
}

/* Tabs are links with ?tab=; the current one is bold ink. */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
    font-size: var(--list);
    border-bottom: 1px solid var(--rule);
    margin-bottom: 10px;
    padding-bottom: 4px;
}

.tabs a {
    color: var(--muted);
    text-decoration: none;
}

.tabs a:hover {
    text-decoration: underline;
}

.tabs a.active {
    color: var(--ink);
    font-weight: bold;
}

.score-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--list);
    margin-bottom: 12px;
}

.score-table td,
.score-table th {
    padding: 4px 8px 4px 0;
    border-bottom: 1px solid var(--rule-light);
    text-align: left;
    vertical-align: top;
}

.score-table th {
    color: var(--muted);
    font-weight: normal;
    white-space: nowrap;
}

.score-table .num {
    text-align: right;
    font-family: var(--mono);
    white-space: nowrap;
}

.score-desc {
    color: var(--muted);
    font-size: var(--meta);
}

.users-table .record {
    margin: 0;
    font-size: var(--meta);
}

.users-table .rank {
    color: var(--muted);
    width: 32px;
    text-align: right;
}

/* --- 20. badges (text badges: [criticus]) --------------------------------- */

.badge {
    font-family: var(--mono);
    font-size: var(--meta);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.badge:visited {
    color: var(--ink);
}

.badge:hover {
    text-decoration: underline;
}

.badge-gold {
    color: var(--maroon);
    font-weight: bold;
}

.badge-platinum {
    color: var(--maroon);
    font-weight: bold;
    text-decoration: underline;
}

.badge-silver {
    color: var(--ink);
}

.badge-bronze {
    color: var(--muted);
}

.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
}

.badge-progress {
    font-family: var(--mono);
    font-size: var(--meta);
    color: var(--muted);
}

/* --- 21. dashboard activity ----------------------------------------------- */

.activity {
    margin-top: 12px;
}

.notification {
    padding: 4px 0;
    border-bottom: 1px solid var(--rule-light);
    font-size: var(--list);
}

.notification.read {
    color: var(--muted);
}

.notification .timestamp {
    color: var(--muted);
    font-size: var(--meta);
    margin-right: 8px;
}

.notification a {
    color: var(--ink);
    text-decoration: none;
}

.notification a:hover {
    text-decoration: underline;
}

.follow-stats {
    color: var(--muted);
    font-size: var(--meta);
    margin-bottom: 6px;
}

.follow-stats span + span::before {
    content: " \00b7 ";
}

/* --- 22. moderation and the flag dialog ----------------------------------- */

.flag-dialog {
    background: var(--white);
    border: 1px solid var(--muted);
    padding: 15px;
    width: min(400px, calc(100% - 20px));
    font-size: var(--reading);
    color: var(--ink);
}

.flag-dialog::backdrop {
    background: rgba(0, 0, 0, 0.3);
}

.flag-dialog h3 {
    font-size: var(--reading);
    font-weight: normal;
    margin: 0 0 12px 0;
}

.flag-dialog .flag-reasons {
    margin-bottom: 12px;
}

.flag-dialog .flag-reason {
    display: flex;
    align-items: flex-start;
    margin-bottom: 6px;
    padding: 3px;
    cursor: pointer;
}

.flag-dialog .flag-reason:hover {
    background: var(--cream);
}

.flag-dialog .flag-reason input[type="radio"] {
    margin: 3px 8px 0 0;
    flex-shrink: 0;
}

.flag-dialog .reason-text {
    line-height: 1.4;
}

.flag-dialog .form-label {
    display: block;
    font-size: var(--list);
    color: var(--muted);
    margin-bottom: 4px;
}

.flag-dialog textarea {
    min-height: 60px;
}

.flag-dialog .similar-claim-field {
    margin: 8px 0;
}

.flag-dialog .similar-claim-results {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid var(--rule);
    border-top: none;
    background: var(--white);
}

.flag-dialog .similar-claim-result {
    padding: 6px;
    cursor: pointer;
    border-bottom: 1px solid var(--rule-light);
}

.flag-dialog .similar-claim-result:hover {
    background: var(--cream);
}


.flag-dialog .modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.flag-dialog #flag-response:not(:empty) {
    margin-top: 10px;
}

.flag-notice {
    padding: 8px;
    font-size: var(--list);
    border: 1px solid var(--rule);
    background: var(--cream);
}

.flag-notice-success {
    border-color: var(--for);
    color: var(--for);
}

.flag-notice-error {
    border-color: var(--against);
    color: var(--against);
}

/* Moderator pages. */
.mod-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 0;
    font-size: var(--list);
}


.mod-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.mod-title {
    font-size: var(--title);
    margin: 0 0 12px 0;
}

.mod-header .mod-title {
    margin-bottom: 0;
}

.mod-stats {
    font-size: var(--list);
    color: var(--muted);
}

.mod-stats span + span::before {
    content: " \00b7 ";
}

.mod-stat-critical {
    color: var(--against);
}

.mod-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.mod-filters select,
.mod-filters input {
    width: auto;
}

.mod-panel {
    background: var(--white);
    border: 1px solid var(--rule);
    padding: 12px 15px;
    margin-bottom: 12px;
}

.mod-panel h2 {
    font-size: var(--reading);
    margin: 0 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rule-light);
}

.mod-panel--warning {
    border-left: 3px solid var(--amber);
}

.mod-panel p {
    margin-bottom: 6px;
}

.mod-table-wrap {
    overflow-x: auto;
}

.mod-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--list);
}

.mod-table th {
    text-align: left;
    padding: 5px 8px;
    border-bottom: 1px solid var(--rule);
    font-weight: normal;
    color: var(--muted);
    white-space: nowrap;
}

.mod-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--rule-light);
    vertical-align: top;
}

.mod-table tbody tr:hover {
    background: var(--cream);
}

.mod-table .num {
    text-align: right;
}

.mod-table a {
    color: var(--ink);
}

.mod-badge {
    display: inline-block;
    font-size: var(--meta);
    padding: 0 4px;
    border: 1px solid var(--rule);
    color: var(--muted);
    text-transform: lowercase;
    white-space: nowrap;
}

.mod-badge--pending,
.mod-badge--severity-medium {
    border-color: var(--amber);
    color: var(--amber);
}

.mod-badge--reviewing {
    border-color: var(--link);
    color: var(--link);
}

.mod-badge--resolved {
    border-color: var(--for);
    color: var(--for);
}

.mod-badge--severity-high {
    border-color: var(--against);
    color: var(--against);
}

.mod-meta {
    font-size: var(--meta);
    color: var(--muted);
}

.mod-meta a {
    color: var(--muted);
}

.mod-snippet {
    font-size: var(--meta);
    color: var(--ink);
    margin-top: 3px;
    max-width: 60ch;
}

.mod-muted {
    color: var(--muted);
}

.mod-empty {
    color: var(--muted);
    font-style: italic;
    padding: 10px 0;
}

.mod-list > * {
    padding: 6px 0;
    border-bottom: 1px solid var(--rule-light);
}

.mod-list > *:last-child {
    border-bottom: none;
}

.mod-list p {
    margin: 2px 0 0 0;
}

.mod-flagged-content {
    background: var(--cream);
    border: 1px solid var(--rule-light);
    padding: 10px;
    margin-bottom: 8px;
    font-size: var(--reading);
}

.mod-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
}

.mod-status-ok {
    color: var(--for);
}

.mod-status-warn {
    color: var(--amber);
    font-weight: bold;
}

.mod-status-bad {
    color: var(--against);
    font-weight: bold;
}

.mod-perm {
    color: var(--for);
    font-weight: bold;
    margin-right: 2px;
}

.mod-perm--off {
    color: var(--rule);
    font-weight: normal;
}

.mod-link-danger {
    color: var(--against);
}

.mod-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.mod-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.mod-check-input {
    width: auto;
}

.mod-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--rule-light);
}

.mod-pagination a {
    color: var(--ink);
}

/* Account-status pages: banned, suspended, rate-limited, blocked. */
.mod-notice {
    max-width: 620px;
    margin: 40px auto;
    background: var(--white);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--against);
    padding: 20px;
    font-size: var(--reading);
    line-height: 1.6;
}

.mod-notice--warning {
    border-left-color: var(--amber);
}

.mod-notice h1 {
    margin: 0 0 12px 0;
}

.mod-notice p {
    margin-bottom: 10px;
}

.mod-notice ul {
    list-style: disc;
    margin: 0 0 10px 20px;
}

.mod-notice-detail {
    background: var(--cream);
    border: 1px solid var(--rule-light);
    padding: 10px;
    margin-bottom: 10px;
}

.mod-notice-detail .label {
    display: block;
    font-size: var(--meta);
    color: var(--muted);
}

.mod-notice-detail p:last-child {
    margin-bottom: 0;
}

.mod-notice-contact {
    font-family: var(--mono);
}

.mod-notice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

/* --- 23. versions, diffs, recent edits ----------------------------------- */

.version-list .version-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--rule-light);
}

.version-item.version-current {
    border-left: 2px solid var(--maroon);
    padding-left: 8px;
}

.version-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 2px;
}

.version-number a {
    font-weight: bold;
    color: var(--ink);
}

.version-meta,
.version-meta-info,
.version-summary,
.version-summary-text,
.edit-meta,
.edit-summary-text,
.edits-summary,
.citation-count {
    color: var(--muted);
    font-size: var(--meta);
}

.version-meta a,
.edit-meta a {
    color: var(--muted);
}

.version-summary-text,
.edit-summary-text {
    font-style: italic;
}

.version-meta-info span + span::before {
    content: " \00b7 ";
}

.version-title-preview {
    font-size: var(--list);
    margin-bottom: 2px;
}

.version-actions,
.edit-actions,
.version-history-actions,
.diverged-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: var(--meta);
    margin-top: 4px;
}

.version-actions a,
.edit-actions a {
    color: var(--muted);
}

.version-actions a:hover,
.edit-actions a:hover {
    color: var(--maroon);
}

.version-history-actions {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
}

.badge-current {
    font-weight: bold;
    color: var(--maroon);
}

.badge-historical {
    color: var(--muted);
}

.version-indicator h1 {
    display: flex;
    align-items: center;
    gap: 5px;
}

.edit-summary-display,
.compare-summary,
.compare-edit-summary,
.no-change-notice,

.compare-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.summary-label {
    color: var(--muted);
}

.no-change-notice p {
    margin: 0 0 6px 0;
    color: var(--muted);
    font-style: italic;
}

.version-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 6px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-bottom: 12px;
}

.version-nav-link {
    color: var(--ink);
    font-size: var(--meta);
}

.version-nav-link.disabled {
    color: var(--rule);
    pointer-events: none;
}

.nav-history {
    font-weight: bold;
}

.historical-notice,
.citation-warning,
.diverged-summary,
.citation-diverged-warning {
    background: var(--amber-bg);
    border: 1px solid var(--amber);
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: var(--meta);
}

.citation-warning strong {
    display: block;
    margin-bottom: 4px;
}

.version-claim-card {
    padding: 12px 15px;
    border: 1px solid var(--rule);
    background: var(--white);
}

.version-title {
    margin: 0 0 8px 0;
    font-size: var(--reading);
}

.version-description {
    line-height: 1.6;
    font-size: var(--reading);
}

.version-diff-section,
.compare-section {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
}

.version-diff-section h3,
.compare-section h2 {
    margin: 0 0 8px 0;
    font-size: var(--reading);
}

.diff-block {
    margin-bottom: 10px;
}

.diff-block h4 {
    margin: 0 0 4px 0;
    font-size: var(--meta);
    color: var(--muted);
}

.diff-inline,
.diff-content {
    padding: 8px;
    background: var(--cream);
    line-height: 1.5;
    font-size: var(--list);
}

.diff-add {
    background: var(--for-bg);
    color: var(--for);
    text-decoration: none;
}

.diff-remove {
    background: var(--against-bg);
    color: var(--against);
    text-decoration: line-through;
}

.diff-unified {
    font-family: var(--mono);
    font-size: var(--meta);
    background: var(--white);
    border: 1px solid var(--rule);
    overflow-x: auto;
}

.diff-line {
    padding: 2px 10px;
    white-space: pre-wrap;
    word-break: break-all;
}

.diff-line.diff-add {
    color: var(--ink);
}

.diff-line.diff-remove {
    color: var(--ink);
    text-decoration: none;
}

.diff-line.diff-context {
    color: var(--muted);
}

.diff-header {
    padding: 4px 10px;
    background: var(--rule-light);
    color: var(--muted);
    font-weight: bold;
}

.diff-hunk {
    padding: 4px 10px;
    background: var(--cream);
    color: var(--muted);
}

.compare-side-by-side,
.diverged-versions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px 0;
}

.compare-old,
.compare-new,
.version-cited,
.diverged-versions .version-current {
    padding: 8px 10px;
    border: 1px solid var(--rule);
    background: var(--white);
    font-size: var(--list);
}

.compare-old,
.version-cited {
    border-left: 2px solid var(--against);
}

.compare-new,
.diverged-versions .version-current {
    border-left: 2px solid var(--for);
}

.compare-old h4,
.compare-new h4,
.version-cited h4,
.diverged-versions .version-current h4 {
    margin: 0 0 6px 0;
    font-size: var(--meta);
    text-transform: lowercase;
    color: var(--muted);
}

.compare-content {
    line-height: 1.5;
}

.compare-description {
    max-height: 400px;
    overflow-y: auto;
}

.compare-subtitle,
.diverged-subtitle,
.recent-edits-subtitle {
    color: var(--muted);
    font-size: var(--list);
}

.compare-meta-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--meta);
}

.compare-meta-table th,
.compare-meta-table td {
    padding: 4px;
    text-align: left;
    border-bottom: 1px solid var(--rule-light);
}

.compare-meta-table th,
.compare-meta-table td:first-child {
    color: var(--muted);
}

.compare-meta-table td:first-child {
    width: 120px;
}

.diverged-item,
.edit-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--rule-light);
}

.diverged-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.diverged-relationship,
.title-change,
.diverged-explanation {
    font-size: var(--meta);
    color: var(--muted);
}

.versions-behind {
    background: var(--against-bg);
    color: var(--against);
    padding: 1px 6px;
    font-size: var(--meta);
}

.old-title {
    text-decoration: line-through;
}

.version-preview {
    line-height: 1.4;
    font-size: var(--meta);
}

.diverged-footer {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
    font-size: var(--meta);
}

.time-filter {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    font-size: var(--meta);
}

.time-filter span,
.time-filter a {
    color: var(--muted);
}

.time-filter a.active {
    font-weight: bold;
    color: var(--ink);
}

.edit-version {
    background: var(--rule-light);
    padding: 1px 4px;
    margin-right: 5px;
}

.edit-claim a {
    color: var(--ink);
    font-weight: bold;
}



/* --- 24. analytics (staff) ------------------------------------------------ */

.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.analytics-count {
    font-size: var(--list);
    color: var(--muted);
}

.back-link {
    font-size: var(--meta);
    color: var(--muted);
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

.analytics-section {
    margin-bottom: 24px;
}

.stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.stat-card {
    background: var(--white);
    border: 1px solid var(--rule);
    padding: 8px 14px;
    min-width: 90px;
    text-align: center;
}

.stat-number {
    font-size: var(--title);
    font-weight: bold;
}

.stat-label {
    font-size: var(--meta);
    color: var(--muted);
}

.detail-table {
    border-collapse: collapse;
    font-size: var(--list);
    width: 100%;
    max-width: 500px;
}

.detail-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--rule-light);
}

.detail-label {
    color: var(--muted);
    width: 160px;
    white-space: nowrap;
}

.analytics-columns {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.analytics-columns > div {
    flex: 1;
    min-width: 220px;
}

.col-rank {
    color: var(--muted);
    width: 40px;
    text-align: center;
}

.col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.col-date {
    color: var(--muted);
    font-size: var(--meta);
    white-space: nowrap;
}

.admin-badge,
.staff-badge,
.inactive-badge {
    font-size: var(--meta);
    padding: 0 4px;
    margin-left: 4px;
    font-weight: bold;
    color: var(--white);
}

.admin-badge {
    background: var(--maroon);
}

.staff-badge {
    background: var(--muted);
}

.inactive-badge {
    background: var(--against);
}

.activity-list li {
    padding: 4px 0;
    border-bottom: 1px solid var(--rule-light);
    font-size: var(--list);
}

.activity-list li:last-child {
    border-bottom: none;
}

.activity-list a {
    color: var(--ink);
    text-decoration: none;
}

.activity-list a:hover {
    text-decoration: underline;
}

.activity-meta {
    color: var(--muted);
    font-size: var(--meta);
    margin-left: 6px;
}

.evidence-type-supports {
    color: var(--for);
    font-size: var(--meta);
    font-weight: bold;
}

.evidence-type-opposes {
    color: var(--against);
    font-size: var(--meta);
    font-weight: bold;
}

.comment-preview {
    color: var(--muted);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-count {
    color: var(--muted);
}

/* --- 25. static pages ----------------------------------------------------- */

.page {
    max-width: 720px;
    margin: 0 auto;
}

.page .reading h2 {
    margin-top: 18px;
}

.page .reading h3 {
    margin-top: 12px;
}

.last-updated {
    color: var(--muted);
    font-size: var(--meta);
    margin-bottom: 12px;
}

kbd {
    font-family: var(--mono);
    font-size: var(--meta);
    border: 1px solid var(--rule);
    padding: 0 4px;
    background: var(--white);
}

/* --- 26. community header ------------------------------------------------- */

.community-header {
    background: var(--maroon);
    border-top: 1px solid var(--cream);
    padding: 3px 0;
    font-size: var(--list);
}

.community-header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
}

.community-label {
    color: var(--cream);
}

.community-label strong {
    color: var(--white);
}

.community-nav {
    display: flex;
    gap: 12px;
}

.community-nav a {
    color: var(--cream);
    text-decoration: none;
    font-size: var(--meta);
}

.community-nav a:hover {
    color: var(--white);
    text-decoration: underline;
}

/* --- 27. htmx states ------------------------------------------------------ */

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline;
}

/* --- 28. focus ------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--maroon);
    outline-offset: 1px;
}

/* --- 29. small screens ---------------------------------------------------- */

@media (max-width: 768px) {
    .container {
        padding-inline: 8px;
    }

    .row {
        flex-wrap: wrap;
    }

    .claim-title {
        font-size: 16px;
    }

    .pair,
    .compare-side-by-side,
    .diverged-versions,
    .mod-status-grid {
        grid-template-columns: 1fr;
    }

    .response-body-layout,
    .responses-page-layout,
    .response-editor-layout,
    .analytics-columns {
        flex-direction: column;
    }

    .response-sidebar,
    .responses-sidebar,
    .editor-sidebar {
        width: 100%;
    }

    .claim-graph {
        font-size: 10px;
    }

    .graph-controls {
        margin-left: 0;
        width: 100%;
    }

    /* .graph-children needs no override: its indent is in ch, so it shrinks
       with the 10px type above rather than having to be restated here. */

    .graph-inspector-body {
        grid-template-columns: 1fr;
    }

    .comment-indent-1,
    .comment-indent-2,
    .comment-indent-3,
    .comment-indent-4,
    .comment-indent-5,
    .comment-indent-6,
    .comment-indent-7,
    .comment-indent-8,
    .comment-indent-9,
    .comment-indent-10,
    .comment-indent-deep {
        padding-left: 8px;
    }

    .comment-indent-1 { margin-left: 12px; }
    .comment-indent-2 { margin-left: 24px; }
    .comment-indent-3 { margin-left: 36px; }
    .comment-indent-4 { margin-left: 48px; }
    .comment-indent-5 { margin-left: 60px; }
    .comment-indent-6 { margin-left: 72px; }
    .comment-indent-7 { margin-left: 84px; }
    .comment-indent-8 { margin-left: 96px; }
    .comment-indent-9 { margin-left: 108px; }
    .comment-indent-10 { margin-left: 120px; }
    .comment-indent-deep { margin-left: 120px; }

    .citation-form-inline {
        flex-direction: column;
    }

    .mod-notice {
        margin: 20px 0;
    }

    .form-container {
        padding: 12px;
    }
}

/* --- 30. the smaller pieces the audit turned up ---------------------------- */

.btn[disabled] {
    color: var(--muted);
    border-color: var(--rule);
    cursor: not-allowed;
}

.flag-dialog .similar-claim-empty {
    padding: 4px 0;
    font-size: var(--meta);
    color: var(--muted);
}

/* The similar-claim field shows only while the Duplicate reason is checked. */
.flag-dialog .similar-claim-field {
    display: none;
}

.flag-dialog .flag-reasons:has(input[data-reason-name="Duplicate"]:checked) ~ .similar-claim-field {
    display: block;
}

.flag-dialog .similar-claim-result input {
    width: auto;
    margin-right: 6px;
}

.advice {
    margin-top: 4px;
    font-size: var(--meta);
}

.advice > summary {
    color: var(--muted);
    cursor: pointer;
}

.advice ul {
    list-style: disc;
    margin: 4px 0 0 18px;
    color: var(--muted);
}

.citation-rows {
    counter-reset: source;
}

.citation-row {
    counter-increment: source;
}

.citation-number::before {
    content: "source " counter(source);
    color: var(--muted);
}

.add-source > summary {
    list-style: none;
    cursor: pointer;
    color: var(--muted);
    font-size: var(--meta);
}

.add-source > summary::-webkit-details-marker {
    display: none;
}

.add-source > summary:hover {
    color: var(--ink);
    text-decoration: underline;
}

.picker-search {
    margin-bottom: 0;
}

.danger {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
}

.danger > summary {
    color: var(--against);
    cursor: pointer;
    font-size: var(--list);
}

.error-page {
    text-align: center;
}

.dashboard-head {
    margin-bottom: 12px;
}

.dashboard-head .page-title {
    margin-bottom: 2px;
}

.activity > summary {
    cursor: pointer;
    font-size: var(--list);
    color: var(--muted);
}

.follow-form {
    display: inline;
}

.tag-fit .vote {
    margin-left: 4px;
}

.quality-score.good {
    color: var(--for);
}

.quality-score.warn {
    color: var(--amber);
}

.quality-score.poor {
    color: var(--against);
}

.quality-bar {
    font-family: var(--mono);
    letter-spacing: 1px;
}

.quality-value {
    font-family: var(--mono);
}

.profile-meta {
    margin-top: 4px;
}

.filter-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.filter-form select {
    width: auto;
    margin: 0;
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 10px;
}

.page-head .meta,
.page-head .filter-form {
    flex-basis: 100%;
}

.page-info {
    color: var(--muted);
    font-size: var(--list);
}

.sort-link {
    color: var(--muted);
    text-decoration: none;
}

.sort-link:hover {
    text-decoration: underline;
}

.sort-link.active {
    color: var(--ink);
    font-weight: bold;
}

.btn-social svg {
    vertical-align: middle;
    margin-right: 4px;
}

.badge-earned .badge {
    font-weight: bold;
}

.badge-progress {
    font-family: var(--mono);
}

.response-preview {
    margin: 12px 0;
}

.response-list-item .response-actions {
    margin-left: 0;
}

.evidence-cite-item .inline-form input[type="text"] {
    width: 100%;
    margin: 4px 0;
}

.stats-list dd {
    margin-bottom: 2px;
}

.evidence-mini-list li {
    padding: 1px 0;
    font-size: var(--list);
}

.evidence-mini-list li::before {
    content: "\2013 ";
    color: var(--muted);
}