/* The SynthMaker forum (FM1, 3 Nov 2026): the site's own colours and type (community/, manual/), from the approved mockup.
   Mobile first: one column from 320 px phones up; wider screens only get more room. Dark, as the whole site is. */
:root {
  --bg: #101116;
  --panel: #181a22;
  --panel2: #1f2230;
  --line: #262a36;
  --line2: #343a4c;
  --text: #eef0f6;
  --soft: #c9cdd9;
  --muted: #9aa0b2;
  --accent: #3d8bff;
  --link: #6ea8ff;
  --dev: #f5b443;
  --warm: #f5a524;
  --danger: #ff8a80;
  --ok: #3ccf91;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; overflow-wrap: anywhere; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; z-index: 30; background: var(--panel); padding: 8px 12px; border-radius: 8px; }
main { max-width: 860px; margin: 0 auto; padding: 24px 16px 56px; outline: none; }
main.thread { max-width: 800px; }
.loading { color: var(--muted); }
.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot .in { max-width: 860px; margin: 0 auto; padding: 20px 16px 36px; }

/* ——— The preview line, the bar along the top ——— */
.preview { margin: 0; padding: 8px 16px; text-align: center; font-size: 13.5px; color: #1b1405; background: var(--dev); }
.top { border-bottom: 1px solid var(--line); }
.top .in { max-width: 1120px; margin: 0 auto; padding: 6px 16px; min-height: 56px; display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.site { display: flex; flex: 1; gap: 2px 4px; flex-wrap: wrap; }
.site a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; color: var(--muted); font-size: 15px; }
.site a:hover { color: var(--text); text-decoration: none; }
.site a[aria-current="page"] { color: var(--text); font-weight: 600; }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
.account { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.acct > button { min-height: 44px; }
.menu-toggle { display: none; }
@media (max-width: 420px) {
  .top .in { position: relative; }
  .menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -8px; border: 0; border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; order: -1; }
  .menu-toggle svg { width: 22px; height: 22px; }
  .site { flex: 0 1 auto; }
  .site a:not([aria-current]) { display: none; }
  .site.open { position: absolute; left: 12px; top: calc(100% - 2px); z-index: 30; flex-direction: column; min-width: 200px; padding: 6px; background: #1d2029; border: 1px solid #30354a; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.45); }
  .site.open a { display: flex; padding: 0 12px; border-radius: 8px; color: var(--text); }
  .site.open a:hover, .site.open a:focus-visible { background: var(--line); }
  .top .brand { flex: 1; }
}
.btn.quiet { border-color: transparent; color: var(--muted); }
.btn.quiet:hover { color: var(--text); border-color: var(--line2); }

/* ——— Buttons ——— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line2);
  background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.btn:hover { border-color: #4a5168; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #5a9dff; }
.btn[disabled] { background: var(--line); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
.btn.wide { width: 100%; min-height: 50px; font-size: 17px; }
.btn svg { width: 16px; height: 16px; flex: none; }
.link { background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 8px; }
.hint { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.center { text-align: center; }

/* ——— Home ——— */
h1 { margin: 0; font-size: clamp(28px, 6vw, 34px); line-height: 1.2; letter-spacing: -.01em; }
.lede { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
.compose { margin-top: 22px; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; color: var(--muted); font: inherit; text-align: left; cursor: pointer; }
.compose:hover { border-color: #3a4052; }
.compose .av { display: none; }
.compose .ask { flex: 1; min-width: 0; font-size: 16px; }
.compose .go { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600; }
.compose .go svg { width: 14px; height: 14px; }
.compose .long { display: none; }
@media (min-width: 600px) { .compose { padding: 14px 14px 14px 16px; } .compose .av { display: grid; } .compose .ask { font-size: 17px; } .compose .long { display: inline; } .compose .short { display: none; } }

.chips { margin: 28px -16px 0; padding: 0 16px 4px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 600px) { .chips { flex-wrap: wrap; overflow: visible; margin: 28px 0 0; padding: 0; } }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--soft); font: inherit; font-size: 14.5px; font-weight: 550; cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: #4a5168; }
.chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted)); }

.listhead { margin: 26px 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows li { border-bottom: 1px solid var(--line); }
.row { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; margin: 0 -12px; border-radius: 10px; color: var(--text); }
.row:hover { background: #161821; text-decoration: none; }
.row .t { font-size: 16.5px; font-weight: 600; line-height: 1.4; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13.5px; color: var(--muted); }
.meta .board { display: inline-flex; align-items: center; gap: 6px; color: var(--soft); }
.meta .tag { display: inline-flex; align-items: center; gap: 5px; }
.meta svg, .count svg { width: 14px; height: 14px; flex: none; }
.devtag { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; background: rgba(245,165,36,.13); color: var(--dev); font-weight: 600; }
.devtag svg { width: 12px; height: 12px; }
.count { display: inline-flex; align-items: center; gap: 6px; color: var(--soft); }
.count.none { color: var(--muted); }
@media (min-width: 600px) {
  .row { flex-direction: row; align-items: center; gap: 20px; padding: 16px 12px; }
  .row .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .row .count { flex: none; min-width: 112px; justify-content: flex-end; font-size: 14px; }
}
.sample { padding: 0 7px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.samplenote { margin: 6px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--panel); color: var(--soft); font-size: 14px; }
.empty { margin: 14px 0 0; color: var(--muted); }
.sample-head { margin-top: 40px; }
.sample-head + .hint { margin: -4px 0 10px; }
.said { white-space: pre-wrap; }
.foot-note { margin: 28px 0 0; font-size: 13.5px; color: var(--muted); }

/* The replies banner: new replies to your posts. */
.news { margin-top: 22px; border: 1px solid rgba(61,139,255,.45); background: rgba(61,139,255,.07); border-radius: 14px; padding: 12px 14px 6px; }
.news .head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.news h2 { margin: 0; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.news ul { list-style: none; margin: 4px 0 0; padding: 0; }
.news li + li { border-top: 1px solid rgba(61,139,255,.2); }
.news a { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; padding: 10px 0; color: var(--text); min-height: 44px; }
.news a:hover { text-decoration: none; }
.news a:hover .nt { text-decoration: underline; }
.news .nt { font-weight: 600; }
.news .nm { display: block; font-size: 13px; color: var(--muted); }
.news .nn { flex: none; font-size: 13.5px; font-weight: 600; color: var(--link); }
.hint.as { color: var(--soft); }
.hint.as.bad { color: var(--danger); }
.caught { margin: 22px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--panel); color: var(--muted); font-size: 14.5px; }

/* ——— The composer (posting comes next) ——— */
.composer { margin-top: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.composer h2 { margin: 0 0 10px; font-size: 18px; }
.field { margin: 0 0 14px; }
.field label, .field .lab { display: block; font-size: 14px; font-weight: 600; margin: 0 0 6px 2px; }
input[type="text"], textarea { display: block; width: 100%; background: var(--bg); color: var(--text); border: 1px solid #2c3142; border-radius: 10px; padding: 11px 13px; font: inherit; font-size: 16px; }
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #7d8396; }
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.drop { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border: 1.5px dashed #343a4c; border-radius: 10px; color: var(--muted); font-size: 14px; }
.drop svg { width: 20px; height: 20px; flex: none; }
.drop span { flex: 1 1 200px; }
.composer .chips { margin: 0 -14px; padding: 0 14px 4px; }
@media (min-width: 600px) { .composer .chips { margin: 0; padding: 0; } }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.next { margin: 0; flex: 1 1 220px; font-size: 14px; color: var(--muted); }
.next:empty { display: none; }
.next.bad { color: #ff8a80; font-weight: 600; }
.next.busy { color: var(--text); }
.btn.busy { cursor: progress; background: var(--accent); border-color: var(--accent); color: #fff; opacity: .85; }
.btn.busy::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.busy::before { animation-duration: 2.4s; } }
.reply .next { color: var(--dev); }
.actions .btns { display: flex; gap: 8px; margin-left: auto; }

/* ——— The rules ——— */
dialog { max-width: min(520px, calc(100vw - 32px)); width: 100%; padding: 28px 22px 18px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
dialog::backdrop { background: rgba(5,6,10,.7); }
dialog h2 { margin: 0; font-size: 24px; line-height: 1.25; }
dialog .sub { margin: 8px 0 0; color: #b5bacb; }
dialog .field { margin: 18px 0 0; }
dialog .field input { margin-top: 2px; }
#joinNamed { margin: 14px 0 0; }
#joinError:empty { display: none; }
#joinError { margin: 0 0 12px; }
.rules { list-style: none; counter-reset: r; margin: 22px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rules li { counter-increment: r; display: flex; gap: 12px; align-items: flex-start; }
.rules li::before { content: counter(r); flex: none; width: 26px; height: 26px; border-radius: 50%; background: #232a3d; color: #9cc3ff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
@media (min-width: 600px) { dialog { padding: 34px 34px 24px; } }

/* ——— A thread ——— */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; }
.crumbs .board { display: inline-flex; align-items: center; gap: 6px; color: var(--soft); }
.thread h1 { margin: 4px 0 0; font-size: clamp(24px, 5.4vw, 30px); line-height: 1.25; }
.tmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.tmeta a.devtag { min-height: 32px; padding: 2px 10px; text-decoration: none; }
.post { padding: 20px 0; border-bottom: 1px solid var(--line); }
.post.op { margin-top: 14px; padding-top: 14px; }
.who { display: flex; align-items: center; gap: 12px; }
.av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--avbg, #2a3550); color: var(--avfg, #cfe0ff); display: grid; place-items: center; font-size: 13px; font-weight: 650; }
.op > .who .av { width: 40px; height: 40px; font-size: 15px; }
.av.dev { background: none; }
.av.dev img { width: 34px; height: 34px; border-radius: 50%; }
.who .names { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.who .name { font-weight: 650; }
.who .when, .who .edited { font-size: 13px; color: var(--muted); }
.who .edited { font-style: italic; }
.who .makes { font-size: 12px; font-weight: 650; padding: 1px 8px; border-radius: 999px; background: rgba(245,165,36,.16); color: var(--dev); }
.more { position: relative; flex: none; }
.more > button { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.more > button:hover { background: #1d2029; color: var(--text); }
.more > button svg { width: 18px; height: 18px; }
.menu { position: absolute; right: 0; top: 46px; z-index: 5; min-width: 210px; background: #1d2029; border: 1px solid #30354a; border-radius: 12px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; text-align: left; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 14.5px; padding: 0 10px; border-radius: 8px; cursor: pointer; }
.menu button:hover, .menu button:focus-visible { background: var(--line); }
.menu svg { width: 16px; height: 16px; flex: none; }
.notice { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--panel); color: var(--soft); font-size: 14px; }
.body { margin: 10px 0 0; }
.body > * { margin-top: 0; margin-bottom: 0; }
.body > * + * { margin-top: 12px; }
/* The empty lines typed between paragraphs: one line's height each (a post's own line height), at most two. */
.body > [data-gap="1"] { margin-top: 1.6em; margin-top: 1lh; }
.body > [data-gap="2"] { margin-top: 3.2em; margin-top: 2lh; }
.op .body { margin-top: 14px; font-size: 16.5px; line-height: 1.6; }
@media (min-width: 600px) { .post:not(.op) .body, .post:not(.op) > .notice { margin-left: 46px; } }
pre { margin: 0; padding: 12px 14px; background: #0c0d11; border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; font: 13.5px/1.5 var(--mono); color: #cfe0ff; overflow-wrap: normal; }
form.editing { margin: 10px 0 0; display: grid; gap: 10px; }
@media (min-width: 600px) { .post:not(.op) form.editing { margin-left: 46px; } }
form.editing .actions { margin-top: 0; }
.post.deleted { padding: 10px 0; }
.gone-line { margin: 0; font-size: 14px; color: var(--muted); font-style: italic; }
#deleteSay:empty { display: none; }
.btn.danger { background: #c8322b; border-color: #c8322b; color: #fff; }
.btn.danger:hover { background: #dd4038; }
.answer, .post.devpost { margin: 16px 0; padding: 18px 16px; border-radius: 14px; background: rgba(245,165,36,.06); border: 1px solid rgba(245,165,36,.34); scroll-margin-top: 16px; }
.answered { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--dev); }
.answered svg { width: 12px; height: 12px; }
.earlier { margin-top: 16px; }
.reply { margin-top: 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.reply label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 8px 2px; }
.gone { padding: 40px 0; }

/* ——— A patch in a post: the real patch, running here (the app's ?embed, as the manual's live pictures) ——— */
.player { margin: 16px 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.player.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61,139,255,.25); }
.ph { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 12px 12px 14px; }
.ph .ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #232a3d; display: grid; place-items: center; }
.ph .ic svg { width: 18px; height: 18px; }
.ph .what { flex: 1 1 160px; min-width: 0; }
.ph .what b { display: block; font-size: 15px; }
.ph .what span { display: block; font-size: 13px; color: var(--muted); }
.ph .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ph .play { border-radius: 999px; padding: 0 18px 0 14px; }
.ph .play svg { width: 14px; height: 14px; }
.ph .open { border-radius: 999px; font-weight: 550; }
.ph .open:hover { text-decoration: none; }
.ph .open svg { width: 12px; height: 12px; }
.bars { display: none; align-items: flex-end; gap: 2px; height: 16px; margin-right: 2px; }
.bars i { width: 3px; background: var(--accent); border-radius: 1px; animation: bar 1s ease-in-out infinite; }
.bars i:nth-child(1) { height: 7px; } .bars i:nth-child(2) { height: 14px; animation-delay: -.3s; } .bars i:nth-child(3) { height: 10px; animation-delay: -.6s; } .bars i:nth-child(4) { height: 16px; animation-delay: -.15s; }
@keyframes bar { 50% { transform: scaleY(.45); } }
.bars i { transform-origin: bottom; }
.player.on .bars { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .bars i { animation: none; } }
.stage { position: relative; margin: 0 12px 12px; aspect-ratio: var(--ar-wide); overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background-color: #13151b;
  background-image: radial-gradient(#252935 1px, transparent 1px); background-size: 16px 16px; cursor: pointer; }
@media (max-width: 600px) { .stage { aspect-ratio: var(--ar-tall); } }
.player.ready .stage { background: #000; }
.player.live .stage { cursor: auto; }
/* The patch itself, loaded still and silent before ▶ (Jorge: "it looks like an image but you press play and it runs but
   doesn't change"): the frame shows once it has drawn, and ▶ only starts it. */
.stage iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #000; opacity: 0; transition: opacity .35s ease; }
.player.ready .stage iframe { opacity: 1; }
.stage > .say { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 16px; font-size: 14px; color: var(--muted); text-align: center; }
.player.ready .stage > .say { display: none; }
/* Over the still frame: a tap plays it, and a finger scrolls the page past it as past a picture. Gone while it runs. */
.stage .cover { position: absolute; inset: 0; z-index: 2; }
.player.live .stage .cover { display: none; }
.poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; color: var(--soft); }
.poster p { margin: 0; font-size: 14px; color: var(--muted); }
.sorry { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(16,17,22,.92); border: 1px solid var(--line); font-size: 14px; }
.song .stage { aspect-ratio: auto; cursor: auto; }
.song .poster { position: static; padding: 22px 16px; }

/* ——— FORUM8: a song in a post: its waveform, its time, played here ——— */
.song .track { margin: 0 12px 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #13151b; display: grid; gap: 6px; }
.song .wave { display: block; width: 100%; height: 56px; cursor: pointer; }
.song .line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.song .say { margin: 0; font-size: 14px; color: var(--muted); }
.song .say:empty { display: none; }
.song .say.bad { color: var(--danger); }
.song .time { font-size: 13.5px; color: var(--soft); font-variant-numeric: tabular-nums; margin-left: auto; }
.player.broken { border-style: dashed; }

/* ——— FORUM11: the reply that solved it ——— */
.anstag { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; background: rgba(60,207,145,.13); color: var(--ok); font-weight: 600; }
.anstag svg { width: 12px; height: 12px; }
.tmeta a.anstag { min-height: 32px; padding: 2px 10px; text-decoration: none; }
.post.answer:not(.devpost) { background: rgba(60,207,145,.06); border-color: rgba(60,207,145,.34); }
.post.answer:not(.devpost) .answered { color: var(--ok); }
.marks { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.marks .say { font-size: 14px; color: var(--muted); }
.marks .say.bad { color: var(--danger); font-weight: 600; }
@media (min-width: 600px) { .post:not(.op) .marks { margin-left: 46px; } }
.btn.mark { padding: 0 12px; margin-left: -12px; font-size: 14.5px; font-weight: 550; }
.btn.mark svg { width: 12px; height: 12px; }
.btn.mark[aria-pressed="true"] { color: var(--muted); }
.btn.mark.busy { margin-left: 0; }

/* ——— FORUM12: new replies to your posts ——— */
.newtag { display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.news .head .btn { padding: 0 8px; margin: 0 -8px; color: #9cc3ff; }
.news h2 svg { width: 18px; height: 18px; color: #9cc3ff; }
.news .nn { padding: 3px 11px; border-radius: 999px; background: var(--accent); color: #fff; }
.news .next { margin: 4px 0 8px; }

/* ——— FORUM17: report and block ——— */
.reasons { margin: 18px 0 0; padding: 0; border: 0; display: grid; gap: 2px; }
.reasons legend { font-size: 14px; font-weight: 600; margin: 0 0 6px 2px; padding: 0; }
.reason { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px; border-radius: 10px; cursor: pointer; }
.reason:hover { background: var(--panel2); }
.reason input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent); }
.opt { font-weight: 400; color: var(--muted); }
#reportSay:empty, #blockSay:empty, #blockedSay:empty { display: none; }
#reportAsk .actions, #blockAsk .actions { margin-top: 16px; }
.blocked { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 6px; }
.blocked li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.blocked .who { font-weight: 600; }
#boardAbout { margin: -2px 0 10px; }

/* Faint board-colour tints (Growth's spec, 4 Nov 2026): a board's own view, a thread's head, the News highlight. About 7%
   of the board's colour over the page, so the words on them keep their contrast (forumcheck measures it). */
.tint { background: color-mix(in srgb, var(--c, transparent) 7%, var(--bg)); }
.boardhead.tint { margin: 18px -12px 8px; padding: 2px 12px 10px; border-radius: 12px; }
.boardhead.tint .listhead { margin-top: 12px; }
.threadhead.tint { margin: 0 -12px 4px; padding: 4px 12px 12px; border-radius: 14px; }
.threadhead h1 { margin-bottom: 0; }
.rows.pinned { margin: 18px 0 0; }
.rows.pinned .row.tint { background: color-mix(in srgb, var(--c) 7%, var(--bg)); }
.rows.pinned .row.tint:hover { background: color-mix(in srgb, var(--c) 11%, var(--bg)); }