/* Long-form pages: about, privacy, terms, imprint, accessibility, status,
   changelog, the motion pages, and the 404, in every language. Loaded after
   style.css, which supplies the tokens, the card, the buttons, and the site footer.
   Text sits in one readable column of about 70 characters. */

.page { max-width: 1040px; margin: 0 auto; padding: 1rem 1.25rem 3rem; }
.page .topnav { padding-bottom: 1.4rem; }
.page .brand-logo svg { display: block; }
.page .btn { color: var(--ink); }

.doc { max-width: 70ch; margin: 0 auto; padding: clamp(1.2rem, 4vw, 2.6rem); }
.doc h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); font-stretch: 80%; }
.doc-meta { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; font-size: var(--t-sm); font-weight: 700; color: var(--ink-soft); }
.doc-lede { margin-top: 1.2rem; font-size: var(--t-lg); color: var(--ink-soft); }
.doc h2 { margin: 2.4rem 0 0.7rem; font-size: var(--t-xl); font-stretch: 85%; }
.doc.card h3 { margin: 1.5rem 0 0.4rem; font-size: var(--t-lg); letter-spacing: 0; text-transform: none; color: var(--ink); font-stretch: 90%; }
.doc p, .doc ul, .doc ol { margin: 0 0 0.9rem; }
.doc ul, .doc ol { padding-left: 1.3rem; }
.doc li + li { margin-top: 0.35rem; }
.doc a { color: var(--ink); font-weight: 700; text-decoration-color: var(--pro); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.doc a:hover { color: var(--pro); }
.doc code { font-family: var(--mono); font-size: 0.9em; padding: 0.05rem 0.3rem; border-radius: 5px; background: var(--paper-deep); }

/* A short summary at the top of a legal page, in plain words. */
.doc-summary { margin: 1.4rem 0 0.4rem; padding: 1rem 1.2rem; border: 2px solid var(--ink); border-radius: var(--r); background: var(--sun-soft); }
.doc .doc-summary h2 { margin: 0 0 0.5rem; font-size: var(--t-lg); }
.doc-summary ul { margin: 0; }

.table-wrap { margin: 0 0 1rem; overflow-x: auto; border: 2px solid var(--ink); border-radius: var(--r-sm); }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); line-height: 1.4; }
.doc th, .doc td { padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; }
.doc th { background: var(--paper-deep); font-weight: 800; }
.doc tr + tr td { border-top: 2px solid var(--paper-deep); }

.doc .doc-toc { margin: 1.4rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.doc .doc-toc li { margin: 0; }
.doc-toc a { display: inline-block; padding: 0.15rem 0.6rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); font-size: var(--t-sm); text-decoration: none; }
.doc-toc a:hover { background: var(--paper-deep); color: var(--ink); }

.page .site-footer { max-width: 70ch; margin-left: auto; margin-right: auto; }

/* The page in the other languages, under its date line. Each link names
   its language in that language. */
.lang-switch { margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; font-size: var(--t-sm); }
.lang-switch a { padding: 0.1rem 0.6rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); font-weight: 700; color: var(--ink); text-decoration: none; }
.lang-switch a:hover { background: var(--paper-deep); }
.lost .lang-switch { justify-content: center; }
/* The text after the language row starts a little below it. */
.lang-switch + p { margin-top: 1.1rem; }

/* The imprint's facts: a label column and a value column. */
.doc .facts { margin: 0 0 1rem; display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; }
.doc .facts dt { font-weight: 800; }
.doc .facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .doc .facts { grid-template-columns: 1fr; gap: 0; }
  .doc .facts dd { margin-bottom: 0.5rem; }
}

/* 404 */
.lost { max-width: 34rem; margin: 2rem auto 0; display: grid; justify-items: center; gap: 1rem; text-align: center; }
.lost .avatar { width: 8rem; height: 8rem; }
.lost .avatar .mouth-wow { display: inline; }
.lost .avatar .mouth-rest { display: none; }
.lost-code { padding: 0.1rem 1rem; border: var(--line); border-radius: var(--r); background: var(--con); font-size: 3.4rem; font-weight: 800; font-stretch: 75%; line-height: 1.1; box-shadow: var(--lift); transform: rotate(-3deg); }
.lost h1 { font-size: clamp(2rem, 7vw, 3rem); font-stretch: 80%; }
.lost p { color: var(--ink-soft); font-size: var(--t-lg); }

/* Motion pages: /motions and /motions/SLUG. The motion is the headline,
   in quotes. FOR and AGAINST keep their side colors; nothing else uses
   them. */
.motion-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-bottom: 0.7rem; }
.doc .pack-pill { padding: 0.1rem 0.7rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper-deep); font-size: var(--t-sm); text-decoration: none; }
.doc .pack-pill:hover { color: var(--ink); background: var(--sun-soft); }
.motion-head { quotes: "“" "”"; text-wrap: balance; }
.motion-head:lang(lt) { quotes: "„" "“"; }
.motion-head::before { content: open-quote; }
.motion-head::after { content: close-quote; }
.sides { margin: 1.4rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.doc .side-card { margin: 0; padding: 0.8rem 1rem; border: var(--line); border-radius: var(--r); box-shadow: var(--lift); }
.side-card b { display: block; font-size: var(--t-lg); font-stretch: 85%; letter-spacing: 0.04em; }
.side-card.pro { background: var(--pro-soft); }
.side-card.pro b { color: var(--pro-text); }
.side-card.con { background: var(--con-soft); }
.side-card.con b { color: var(--con-text); }
.motion-actions { margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.doc .motion-actions a:hover { color: var(--ink); }
.doc .motion-links { columns: 2 18rem; column-gap: 2rem; }
.doc .motion-links li { margin: 0 0 0.35rem; break-inside: avoid; }

/* A motion's written content: the live figures under the lede, the
   arguments under a heading in their side's text color, the openers as
   side cards, and the questions as outlined rows that open. */
.motion-stats { margin-top: 0.8rem; font-size: var(--t-sm); font-weight: 800; color: var(--ink-soft); }
.doc .args-title.pro { color: var(--pro-text); }
.doc .args-title.con { color: var(--con-text); }
.doc .openers blockquote { margin: 0; }
.doc .openers blockquote p { margin: 0.2rem 0 0; font-style: italic; }
.doc .faq { display: grid; gap: 0.6rem; }
.faq-item { border: 2px solid var(--ink); border-radius: var(--r-sm); background: var(--card); }
.faq-item summary { padding: 0.7rem 0.9rem; font-weight: 800; cursor: pointer; }
.doc .faq-item p { margin: 0; padding: 0 0.9rem 0.8rem; }

/* Hubs: each motion with its lede; Daily archive: the board. */
.doc .hub-motions { padding: 0; list-style: none; }
.doc .hub-motions li + li { margin-top: 0.9rem; }
.doc .hub-motions p { margin: 0.2rem 0 0; color: var(--ink-soft); }
.doc .hub-links { columns: 2 14rem; column-gap: 2rem; }
.doc .side-card.daily-count { background: var(--sun-soft); }
.doc .daily-board td:first-child, .doc .daily-board td:last-child { white-space: nowrap; }
.doc .daily-board td:nth-child(2) { overflow-wrap: anywhere; }
.daily-nav { justify-content: space-between; }

@media (max-width: 640px) {
  .page { padding: 0.6rem 1rem 2rem; }
  .doc { padding: 1.2rem 1.1rem; }
  .doc h2 { margin-top: 2rem; }
  .sides { grid-template-columns: 1fr; }
}

/* Status: one row per part of the service, with a word for its state and
   a dot that repeats it in color, so color is never the only signal. */
.status-summary { margin: 1.4rem 0 0.8rem; padding: 0.8rem 1.1rem; border: 2px solid var(--ink); border-radius: var(--r); background: var(--card); font-weight: 800; }
.doc-meta[hidden] { display: none; }
.status-summary[data-state="up"] { background: var(--pro-soft); }
.status-summary[data-state="down"] { background: var(--con-soft); }
.doc .status-list { margin: 0 0 0.8rem; padding: 0; list-style: none; border: 2px solid var(--ink); border-radius: var(--r-sm); background: var(--card); }
.doc .status-list li { margin: 0; padding: 0.65rem 0.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; }
.doc .status-list li + li { border-top: 2px solid var(--paper-deep); }
.status-dot { flex: none; width: 0.95rem; height: 0.95rem; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper-deep); }
.status-name { flex: 1; font-weight: 700; }
.status-state { font-size: var(--t-sm); font-weight: 800; color: var(--ink-soft); }
[data-state="up"] > .status-dot { background: var(--pro); }
[data-state="down"] > .status-dot { background: var(--con); }
[data-state="up"] > .status-state { color: var(--pro-text); }
[data-state="down"] > .status-state { color: var(--con-text); }

/* Changelog: one section per release, newest first, its date under its
   title. */
.doc .change + .change { margin-top: 2.4rem; }
.doc .change h2 { margin-bottom: 0.2rem; }
.doc .change .doc-meta { margin: 0 0 0.9rem; }