/* DebateFora, "quiet margin" (design canvas option 1, 12 Oct 2026): one soft
   accent, labels as short lines in the margin that open on a click. The two
   debaters and the agreed proposal stay boxed in soft For/Against tints
   (Martin, 12 Oct 2026), all with square corners. --accent comes from the space (/theme/<space>.css). */

:root {
  --ink: #24272b;
  --text2: #4b5157;
  --muted: #6b7178;
  --faint: #9aa0a6;
  --rule: #ecedef;
  --line: #d5d8dc;
  --panel: #f4f5f6;
  --paper: #fcfcfb;
  --white: #ffffff;
  --for: #3d6e9e;
  --against: #b07446;
  --for-bar: #8faed0;
  --against-bar: #d3ae91;
  --none-bar: #dfe2e5;
  --mark: #9db8d4;
  --for-tint: #f3f6fa;
  --against-tint: #faf6f2;
  --conc: #4f7d62;
  --accent: #2f5d8a;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
a { color: var(--accent); }
a:hover { color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.2; font-weight: 600; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: var(--white); padding: 8px 12px; z-index: 10; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 24px; } }
.narrow { max-width: 760px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.strong { font-weight: 600; }
.eyebrow { font-size: 13px; color: var(--muted); }
.kicker { font-size: 13px; color: var(--muted); }
.display { font-family: var(--serif); font-weight: 600; }
.lede { font-family: var(--serif); font-size: 19px; color: var(--text2); }
.section { font-family: var(--serif); font-size: 22px; margin: 48px 0 10px; }
.error { background: #fbefef; border: 1px solid #ecc9c9; color: #7a2a2a; padding: 10px 14px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.dot.for { background: var(--for); }
.dot.against { background: var(--against); }

/* ---- buttons and fields ---- */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); background: var(--white);
  cursor: pointer; text-decoration: none; color: var(--ink);
}
button:hover, .button:hover { border-color: var(--faint); }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }
button.primary:hover, .button.primary:hover { filter: brightness(0.92); }
button.quiet { border-color: transparent; background: none; color: var(--muted); }
button.link { border: 0; min-height: 32px; padding: 4px 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; background: none; }
button:disabled { cursor: default; color: var(--faint); }
input, select, textarea { border: 1px solid var(--line); padding: 10px; background: var(--white); width: 100%; min-height: 44px; }
textarea { resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 1px; }
.form label, legend { font-weight: 500; margin-top: 10px; }
.form .hint { margin: 0; color: var(--muted); font-size: 14px; }
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
label.inline { display: flex; gap: 8px; align-items: baseline; font-weight: 400; }
label.inline input { width: auto; min-height: 0; }
.over { color: #9b3a2f; font-weight: 600; }
.link-note { color: #9b3a2f; }

/* ---- site chrome ---- */
header.site { border-bottom: 1px solid var(--rule); }
.bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding-top: 14px; padding-bottom: 14px; }
.brand { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--ink); text-decoration: none; }
.brand.partner { color: var(--accent); }
.powered, .chip { font-size: 13px; color: var(--muted); }
.nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 14px; }
.nav a { color: var(--text2); text-decoration: none; padding: 6px 0; }
.nav a.who { color: var(--accent); }
footer.site { border-top: 1px solid var(--rule); margin-top: 72px; padding: 20px 0 40px; color: var(--muted); font-size: 13px; }

/* ---- spaces ---- */
.space-list { display: grid; gap: 10px; margin-top: 24px; }
.space-card { display: grid; grid-template-columns: 12px 1fr; column-gap: 12px; row-gap: 2px; border: 1px solid var(--rule); background: var(--white); padding: 14px 16px; text-decoration: none; color: var(--ink); }
.space-card:hover { border-color: var(--line); }
.space-swatch { width: 10px; height: 10px; grid-row: span 3; margin-top: 7px; border-radius: 50%; }
.space-head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; padding-top: 36px; }
.space-head h1 { margin: 0; font-size: 36px; }
.space-head .lede { margin: 6px 0 0; }
.dlist { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.dcard { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--rule); background: var(--white); padding: 16px 18px; color: var(--ink); text-decoration: none; }
.dcard:hover { border-color: var(--line); }
.dmotion { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.3; }
.side-for-text, .side-against-text { color: var(--text2); }

/* ---- debate head ---- */
.head { padding-top: 36px; }
.motion { font-size: clamp(28px, 4vw, 38px); line-height: 1.15; margin: 8px 0 14px; max-width: 780px; }
.debaters { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); max-width: 780px; margin-top: 18px; }
.debater { padding: 14px 16px; border-top: 3px solid; }
.debater.for { background: var(--for-tint); border-top-color: var(--for); }
.debater.against { background: var(--against-tint); border-top-color: var(--against); }
.side-label { font-size: 13px; font-weight: 500; }
.for .side-label { color: var(--for); }
.against .side-label { color: #8f5a33; }
.person { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 2px 0; }
.debater .position { font-family: var(--serif); font-size: 17px; line-height: 1.6; margin: 10px 0 0; color: var(--ink); }
.head .lede { margin: 0 0 6px; max-width: 780px; }
.credit { font-size: 13px; margin: 0; }
.format { margin: 12px 0 0; max-width: 780px; }
.status-line { margin: 14px 0 0; font-size: 14px; }
.stance-row { margin: 18px 0 0; font-size: 14px; }
.stance-row.ask { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.stance-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.stance { font-size: 13px; padding: 6px 12px; min-height: 40px; }
.accept { margin-top: 20px; border: 1px solid var(--rule); background: var(--white); padding: 16px 18px; max-width: 760px; }
.accept h2 { font-family: var(--serif); margin: 0 0 4px; font-size: 20px; }

.strip { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 26px; padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 14px; }
.strip a { color: var(--muted); text-decoration: none; padding: 4px 0; }
.strip a:hover { color: var(--ink); }
.strip a.current { color: var(--ink); font-weight: 500; }
.strip .later { color: var(--faint); }
.layer { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.layer button { border: 0; background: none; padding: 4px 2px; min-height: 36px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.layer button.on { color: var(--ink); font-weight: 500; text-decoration: none; }

/* ---- debate body ---- */
.debate { margin-top: 8px; }
.two { display: grid; gap: 16px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.proposal .lede { margin-top: 0; }

.round-head { font-family: var(--serif); font-size: 26px; margin: 40px 0 0; padding-top: 22px; border-top: 2px solid var(--line); }
.round-head .round-no { display: block; font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--muted); margin-bottom: 4px; }
.round-head .focus { display: block; max-width: 780px; }
.band { font-size: 15px; margin: 18px 0 22px; padding: 10px 14px; border-left: 4px solid; max-width: 780px; }
.band.for { background: var(--for-tint); border-left-color: var(--for); }
.band.against { background: var(--against-tint); border-left-color: var(--against); }
.band.neutral { background: var(--panel); border-left-color: var(--line); color: var(--text2); }
.band.readers { background: var(--panel); border-left-color: var(--accent); }
.band .lead { font-weight: 600; }
.band .rq { font-family: var(--serif); font-size: 18px; display: block; margin-top: 4px; }
.qlist .chosen { font-size: 12px; color: var(--accent); margin-left: 6px; }
.later-note, .waiting, .sealed { color: var(--muted); font-size: 15px; }
.sealed { border: 1px dashed var(--line); padding: 12px 14px; }

.post-row { display: flex; flex-wrap: wrap; gap: 2px 56px; align-items: flex-start; margin-bottom: 44px; container-type: inline-size; }
.post { flex: 999 1 480px; min-width: 0; max-width: 640px; }
/* Only replies carry a left edge in their author's colour; statements and
   closings stand on their own (Martin, 12 Oct 2026). */
.post.reply { flex-basis: 468px; margin-left: 12px; padding-left: 16px; border-left: 3px solid; }
.post.reply.by-for { border-left-color: var(--for-bar); }
.post.reply.by-against { border-left-color: var(--against-bar); }
.margin { flex: 1 1 220px; max-width: 260px; display: flex; flex-direction: column; gap: 16px; padding-top: 30px; font-size: 13px; }
.margin:empty { display: none; }
/* Below this row width the margin wraps under the post (480 + 56 + 220; a
   reply's 468 basis plus its 12px indent makes the same 480), so it no longer
   needs to line up with the text beside it. */
@container (width < 756px) {
  .margin { padding-top: 0; max-width: none; }
  .margin button.rd-peek { display: none; }
  .peek-list.panel { margin-top: 8px; }
  /* No Readers line above (a debater, marks on, no comments): the margin's
     cards get the rule instead. */
  .post-row:not(:has(.readers-line)) > .margin { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--rule); }
}
.post-head { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.post-head .author { font-weight: 600; font-size: 14px; }
.post-head .author.for { color: var(--for); }
.post-head .author.against { color: #8f5a33; }
.post-head .kind { color: var(--text2); }
.body { font-family: var(--serif); font-size: 19px; line-height: 1.75; }
.body p { margin: 0 0 20px; white-space: pre-line; }
.body p:last-child { margin-bottom: 0; }
.m-cross { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.m-one { text-decoration: underline dotted; text-decoration-color: #a9afb5; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.m-wd { text-decoration: underline dotted; text-decoration-color: #9cc2aa; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.conc-item.withdrawn { color: var(--muted); }
.confirm summary { cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.confirm p { margin: 6px 0 2px; }
.conc-item.withdrawn { border-left-color: var(--line); }
.m-conc { text-decoration: underline; text-decoration-color: #9cc2aa; text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* Labels off: the passages look like plain text and their numbers are hidden,
   until the post's "n reader labels" line in the margin is opened. */
.post-row.off:not(:has(.peek-list:not([hidden]))) .m-cross:not(.m-conc):not(.m-wd),
.post-row.off:not(:has(.peek-list:not([hidden]))) .m-one:not(.m-conc):not(.m-wd) { text-decoration: none; }
.post-row.off:not(:has(.peek-list:not([hidden]))) .mk-l { display: none; }
.opener > summary { list-style: none; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 13px; padding: 4px 0; }
.opener > summary::-webkit-details-marker { display: none; }
.opener > summary::before { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-right: 2px; transition: transform 0.15s; }
.opener[open] > summary::before { transform: rotate(45deg); }
.opener > summary:hover { color: var(--ink); }
.peek-list { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
.mk { font-family: var(--sans); font-size: 10px; color: var(--muted); margin-left: 1px; user-select: none; }
.compose { border: 1px solid var(--rule); padding: 16px; background: var(--white); }
.compose textarea { font-family: var(--serif); font-size: 17px; }

/* Under a post: the debater's group (sources, concessions), then the readers'
   group (comments, marks) below a thin rule, all on the same 2px rhythm. */
.post-foot { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.sources { font-size: 14px; }
.sources ol { margin: 6px 0 0; padding-left: 22px; }
.sources li { margin: 2px 0; }
.sources a { word-break: break-word; }
/* The Readers line: a small label, then comments and marks side by side. */
.readers-line { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; font-size: 13px; color: var(--muted); }
.readers-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
button.rd { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 0; border: 0; background: none; color: var(--muted); font-size: 13px; }
button.rd:hover { color: var(--ink); }
/* Wide rows: marks open from the margin, with an arrow like the other openers;
   the Readers line keeps only comments, or goes if it has nothing left. */
button.rd-peek::before { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-right: 2px; transition: transform 0.15s; }
button.rd-peek[aria-expanded="true"]::before { transform: rotate(45deg); }
.margin button.rd-peek { align-self: flex-start; }
.margin button.rd-peek[aria-expanded="true"] { text-decoration: none; }
@container (width >= 756px) {
  .readers-line button.rd-marks { display: none; }
  .readers-line:not(:has(button.rd:not(.rd-marks))) { display: none; }
}
button.rd[aria-expanded="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.comments { font-size: 13px; }
.ico { flex: none; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.ico-comment { --icon: url(/icons/comment.svg); }
.ico-mark { --icon: url(/icons/mark.svg); }
.ico-check { --icon: url(/icons/check.svg); color: var(--conc); }
.conc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 4px 0; font-size: 13px; color: var(--text2); }
.conc-line.withdrawn { color: var(--muted); }
.conc-line.withdrawn .ico-check { color: var(--faint); }
.conc-line form { display: inline; }
.conc-line .confirm summary { list-style: none; font-size: 13px; }
.conc-line .confirm summary::-webkit-details-marker { display: none; }
.conc-line .confirm[open] { flex-basis: 100%; padding-left: 21px; }
.conc-line > form::before, .conc-line > .confirm:not([open]) > summary::before { content: '·'; color: var(--faint); margin-right: 6px; display: inline-block; }
.comment { border-left: 1px solid var(--rule); padding-left: 12px; margin: 12px 0; }
.comment p { margin: 2px 0 0; font-size: 15px; }

/* ---- reader labels in the margin ---- */
.lab summary { list-style: none; cursor: pointer; display: block; }
.lab summary::-webkit-details-marker { display: none; }
.lline { display: flex; justify-content: space-between; gap: 8px; color: var(--ink); }
.lab .num { color: var(--muted); margin-right: 4px; }
.lside { display: block; color: var(--muted); }
.lab.one_side .lline, .lab.collapsed .lline { color: var(--muted); }
.lab.one_side .split, .lab.collapsed .split { opacity: 0.6; }
.lab[open] { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 10px 0; }
.lmore { margin-top: 8px; }
.lmore p { margin: 0 0 6px; }
.split { display: block; width: 100%; height: 3px; margin: 5px 0 3px; }
.split .f { fill: var(--for-bar); }
.split .a { fill: var(--against-bar); }
.split .n { fill: var(--none-bar); }
.reason { font-size: 13px; color: var(--text2); line-height: 1.5; }
.lactions { display: flex; flex-wrap: wrap; gap: 0 14px; font-size: 13px; }

/* ---- selection popover ---- */
.selpop { position: absolute; z-index: 20; width: min(460px, calc(100vw - 24px)); background: var(--white); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(20, 24, 28, 0.12); padding: 16px; font-size: 14px; }
.lopts { display: flex; flex-wrap: wrap; gap: 6px; }
.lopt { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); padding: 6px 12px; min-height: 38px; cursor: pointer; font-weight: 400; }
.lopt input { width: auto; min-height: 0; margin: 0; }
.lopt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, white); }
@media (max-width: 599px) {
  .selpop { position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-height: 85vh; overflow-y: auto; }
}

/* ---- questions ---- */
.questions { max-width: 760px; }
.qlist { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.qlist li { display: flex; gap: 12px; align-items: center; }
.qlist form { flex: none; }
.vote { min-width: 60px; min-height: 36px; font-size: 13px; padding: 4px 10px; }
.vote.static { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); color: var(--muted); }

/* ---- personas, outcome ---- */
.persona-list { display: grid; gap: 8px; margin: 20px 0; }
.persona { flex-direction: column; align-items: flex-start; text-align: left; padding: 12px 14px; }
.persona.on { border-color: var(--accent); }
.outcome { margin: 26px 0 8px; padding: 6px 22px 18px; background: var(--white); border: 1px solid var(--rule); max-width: 1120px; }
.outcome .section { margin-top: 14px; }
.sub { font-family: var(--serif); font-size: 18px; margin: 22px 0 8px; }
.dist-row { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; margin: 6px 0; }
.dist { width: 100%; height: 14px; display: block; }
.dist .d0 { fill: var(--against); }
.dist .d1 { fill: var(--against-bar); }
.dist .d2 { fill: var(--none-bar); }
.dist .d3 { fill: var(--for-bar); }
.dist .d4 { fill: var(--for); }
.dist-legend { display: flex; justify-content: space-between; margin-left: 66px; }
.conc-item { border-left: 2px solid #9cc2aa; padding-left: 12px; }
.hl { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--rule); background: var(--white); padding: 14px 16px; color: var(--ink); text-decoration: none; }
.hl:hover { border-color: var(--line); }
.quote { font-family: var(--serif); font-size: 17px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 30px; }

/* ---- post editor (public/editor.js, Quill) ---- */
.fmtbar { display: flex; gap: 2px; border: 1px solid var(--line); border-bottom: 0; background: var(--white); padding: 2px 4px; }
.fmtbar.ql-toolbar.ql-snow { padding: 2px 4px; border-color: var(--line); }
.fmtbar.ql-snow button, .fmtbar button { min-height: 0; height: 26px; width: 28px; padding: 4px; border: 0; background: none; }
.fmtbar.ql-snow button svg { width: 15px; height: 15px; }
.fmtbar.ql-snow .ql-stroke { stroke: var(--muted); }
.fmtbar.ql-snow .ql-fill { fill: var(--muted); }
.fmtbar.ql-snow button:hover .ql-stroke, .fmtbar.ql-snow button.ql-active .ql-stroke { stroke: var(--ink); }
.fmtbar.ql-snow button:hover .ql-fill, .fmtbar.ql-snow button.ql-active .ql-fill { fill: var(--ink); }
.rte { border: 1px solid var(--line); background: var(--white); }
.rte .ql-editor { min-height: 260px; font-family: var(--serif); font-size: 17px; line-height: 1.6; padding: 12px 14px; }
.rte .ql-editor p { margin: 0 0 12px; }
/* Links in a post read as text: same colour, a thin grey underline that darkens
   on hover (Martin, 14 Oct 2026). Kept closer to the text than the 5px reader-
   mark underlines so the two never merge. */
.body a, .rte .ql-editor a { color: inherit; text-decoration: underline; text-decoration-color: var(--faint); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.body a:hover { color: inherit; text-decoration-color: var(--ink); }