/* opinionhub.css — opinionhub's own look (ADR-0002 §Looks). `solstice addons sync` copies this folder to the
   project's assets/opinionhub/; the forum's pages link it with addon_asset.
   Quiet and readable: a reading column for topics, hairlines instead of boxes, one accent for actions.
   Everything is scoped to .opinionhub, so the host's layout and its other pages are untouched.
   The host's CSP is default-src 'self': system fonts only, no inline styles or scripts.
   To restyle it, a host overrides the --opinionhub-* properties on .opinionhub in its own stylesheet. */

/* ── Tokens ─────────────────────────────────────────────── */
/* The shared look (Solstice ADR-0024): each property reads the host's --sx-* property first, so every addon on a
   site matches; the values after it are this addon's own, for a host that sets none. */
.opinionhub {
  --opinionhub-paper: var(--sx-paper, #ffffff);
  --opinionhub-ink: var(--sx-ink, #1d1f24);
  --opinionhub-muted: var(--sx-muted, #646a75);
  --opinionhub-line: var(--sx-line, #e3e5ea);
  --opinionhub-soft: var(--sx-soft, #f4f5f7);
  --opinionhub-accent: var(--sx-accent, #2f5bd3);
  --opinionhub-accent-ink: var(--sx-accent-ink, #ffffff);
  --opinionhub-good: var(--sx-good, #2e7d4f);
  --opinionhub-warn: #a45a12;
  --opinionhub-code-bg: var(--sx-code-bg, #16181d);
  --opinionhub-code-ink: var(--sx-code-ink, #e9ebf0);
  --opinionhub-radius: var(--sx-radius, 8px);
  --opinionhub-wrap: 52rem;
  --opinionhub-serif: var(--sx-heading, ui-serif, "Iowan Old Style", "Charter", Georgia, serif);
  --opinionhub-sans: var(--sx-sans, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --opinionhub-mono: var(--sx-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}
@media (prefers-color-scheme: dark) {
  .opinionhub {
    --opinionhub-paper: var(--sx-paper, #15171c);
    --opinionhub-ink: var(--sx-ink, #eceef2);
    --opinionhub-muted: var(--sx-muted, #9aa1ad);
    --opinionhub-line: var(--sx-line, #2b2f37);
    --opinionhub-soft: var(--sx-soft, #1d2027);
    --opinionhub-accent: var(--sx-accent, #8aa8ff);
    --opinionhub-accent-ink: var(--sx-accent-ink, #11131a);
    --opinionhub-good: var(--sx-good, #6cc495);
    --opinionhub-warn: #e3a35d;
    --opinionhub-code-bg: var(--sx-code-bg, #0d0e12);
  }
}

/* ── The page ───────────────────────────────────────────── */
.opinionhub {
  box-sizing: border-box;
  max-width: var(--opinionhub-wrap);
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem) 1rem clamp(3rem, 7vw, 5rem);
  color: var(--opinionhub-ink);
  font: 400 1rem/1.6 var(--opinionhub-sans);
}
.opinionhub *, .opinionhub *::before, .opinionhub *::after { box-sizing: inherit; }
.opinionhub h1, .opinionhub h2, .opinionhub h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
.opinionhub h1 { font: 600 clamp(1.9rem, 4.5vw, 2.6rem)/1.1 var(--opinionhub-serif); letter-spacing: -.015em; }
.opinionhub p { margin: 0; }
.opinionhub a { color: var(--opinionhub-accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.opinionhub a:hover { text-decoration-thickness: 2px; }
.opinionhub :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--opinionhub-accent); outline-offset: 2px; border-radius: 3px; }
.opinionhub-sep { color: var(--opinionhub-muted); white-space: pre; }

.opinionhub-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2rem; }
.opinionhub-lede { margin-top: .5rem; color: var(--opinionhub-muted); max-width: 36rem; }
.opinionhub-subhead { margin: 2.5rem 0 .75rem; font: 600 .75rem/1 var(--opinionhub-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--opinionhub-muted); }
.opinionhub-crumbs { margin-bottom: 1rem; font-size: .875rem; color: var(--opinionhub-muted); }
.opinionhub-crumbs a { color: inherit; }
.opinionhub-empty { padding: 2rem 1rem; border: 1px dashed var(--opinionhub-line); border-radius: var(--opinionhub-radius); text-align: center; color: var(--opinionhub-muted); }

/* Buttons and buttons that look like links. */
.opinionhub-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: .55rem 1.1rem;
  border: 1px solid var(--opinionhub-accent);
  border-radius: 999px;
  background: var(--opinionhub-accent);
  color: var(--opinionhub-accent-ink);
  font: 600 .9rem/1 var(--opinionhub-sans);
  text-decoration: none;
  cursor: pointer;
}
.opinionhub a.opinionhub-button { color: var(--opinionhub-accent-ink); }
.opinionhub-button:hover { filter: brightness(1.08); }
.opinionhub-button-quiet, .opinionhub a.opinionhub-button-quiet { background: transparent; color: var(--opinionhub-ink); border-color: var(--opinionhub-line); }
.opinionhub-link-button { padding: 0; border: 0; background: none; color: var(--opinionhub-accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
.opinionhub-inline { display: inline; margin: 0; }

.opinionhub-badge { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border: 1px solid var(--opinionhub-line); border-radius: 999px; font: 600 .7rem/1.5 var(--opinionhub-sans); letter-spacing: .02em; color: var(--opinionhub-muted); vertical-align: .1em; }
.opinionhub-badge:first-child { margin-left: 0; }
.opinionhub-badge-accepted { border-color: color-mix(in srgb, var(--opinionhub-good) 50%, transparent); color: var(--opinionhub-good); }
.opinionhub-badge-pinned { border-color: color-mix(in srgb, var(--opinionhub-accent) 50%, transparent); color: var(--opinionhub-accent); }
.opinionhub-badge-hidden { border-color: color-mix(in srgb, var(--opinionhub-warn) 50%, transparent); color: var(--opinionhub-warn); }

/* ── The home page and lists ────────────────────────────── */
.opinionhub-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; border: 1px solid var(--opinionhub-line); border-radius: var(--opinionhub-radius); overflow: hidden; background: var(--opinionhub-line); }
.opinionhub-category { padding: 1.25rem 1.25rem 1.1rem; background: var(--opinionhub-paper); }
.opinionhub-category h2 { font: 600 1.15rem/1.25 var(--opinionhub-sans); }
.opinionhub-category h2 a { color: var(--opinionhub-ink); text-decoration: none; }
.opinionhub-category h2 a:hover { color: var(--opinionhub-accent); }
.opinionhub-category-description { margin-top: .35rem; color: var(--opinionhub-muted); font-size: .9375rem; }
.opinionhub-category-meta { margin-top: .75rem; font-size: .8125rem; color: var(--opinionhub-muted); }

.opinionhub-topics { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--opinionhub-line); }
.opinionhub-topic-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 8.5rem; gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--opinionhub-line); }
.opinionhub-topic-title { color: var(--opinionhub-ink); font-weight: 600; text-decoration: none; }
.opinionhub-topic-title:hover { color: var(--opinionhub-accent); text-decoration: underline; }
.opinionhub-topic-meta { margin-top: .2rem; font-size: .8125rem; color: var(--opinionhub-muted); }
.opinionhub-topic-meta a { color: inherit; }
.opinionhub-topic-stats { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.opinionhub-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.opinionhub-count-label { font-size: .7rem; color: var(--opinionhub-muted); }
.opinionhub-topic-last { font-size: .8125rem; color: var(--opinionhub-muted); text-align: right; font-variant-numeric: tabular-nums; }

.opinionhub-pages { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-top: 1.5rem; font-size: .875rem; color: var(--opinionhub-muted); }

/* ── A topic ────────────────────────────────────────────── */
.opinionhub-flags { margin: .75rem 0 1.5rem; }
.opinionhub-flags:empty { display: none; }
.opinionhub-post { padding: 1.25rem 0 1rem; border-top: 1px solid var(--opinionhub-line); scroll-margin-top: 5rem; }
.opinionhub-post:target { background: linear-gradient(90deg, color-mix(in srgb, var(--opinionhub-accent) 8%, transparent), transparent 70%); }
.opinionhub-post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-bottom: .6rem; font-size: .875rem; color: var(--opinionhub-muted); }
.opinionhub-author { font-weight: 600; color: var(--opinionhub-ink); }
.opinionhub-number, .opinionhub-when { color: var(--opinionhub-muted); text-decoration: none; font-variant-numeric: tabular-nums; }
.opinionhub-edited { font-style: italic; }
.opinionhub-in-reply { margin-bottom: .5rem; font-size: .8125rem; color: var(--opinionhub-muted); }
.opinionhub-placeholder { padding: .75rem 1rem; border-radius: var(--opinionhub-radius); background: var(--opinionhub-soft); color: var(--opinionhub-muted); font-style: italic; }
.opinionhub-post-hidden .opinionhub-body { opacity: .6; }
.opinionhub-post-hidden .opinionhub-placeholder { margin-bottom: .75rem; }

.opinionhub-body { overflow-wrap: break-word; }
.opinionhub-body > :first-child { margin-top: 0; }
.opinionhub-body p, .opinionhub-body ul, .opinionhub-body ol, .opinionhub-body pre, .opinionhub-body blockquote { margin: 0 0 .9em; }
.opinionhub-body h1, .opinionhub-body h2, .opinionhub-body h3 { margin: 1.2em 0 .4em; font-size: 1.1rem; }
.opinionhub-body blockquote { padding: .1rem 0 .1rem 1rem; border-left: 3px solid var(--opinionhub-line); color: var(--opinionhub-muted); }
.opinionhub-body :not(pre) > code { padding: .1em .35em; border-radius: 4px; background: var(--opinionhub-soft); font: .875em var(--opinionhub-mono); }
.opinionhub-body pre { overflow-x: auto; padding: .9rem 1.1rem; border-radius: var(--opinionhub-radius); background: var(--opinionhub-code-bg); color: var(--opinionhub-code-ink); font: .85rem/1.65 var(--opinionhub-mono); }
.opinionhub-body img { max-width: 100%; height: auto; border-radius: var(--opinionhub-radius); }
/* Ridgun code (Solstice's Markdown colours it with ridgun-libs' fmt classes). */
.opinionhub-body pre .rg-kw, .opinionhub-body pre .rg-logic { color: #f0a07a; }
.opinionhub-body pre .rg-type { color: #9fb8ff; }
.opinionhub-body pre .rg-str { color: #b9d98c; }
.opinionhub-body pre .rg-num, .opinionhub-body pre .rg-bool { color: #e6c07b; }
.opinionhub-body pre .rg-op { color: #a3a9b6; }
.opinionhub-body pre .rg-cmt { color: #6c7383; }

.opinionhub-post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin-top: .75rem; font-size: .8125rem; }
.opinionhub-post-actions a { color: var(--opinionhub-muted); }
.opinionhub-post-actions a:hover, .opinionhub-post-actions .opinionhub-link-button:hover { color: var(--opinionhub-accent); }
.opinionhub-post-actions .opinionhub-link-button { color: var(--opinionhub-muted); }
.opinionhub-vote { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.9rem; padding: .2rem .7rem; border: 1px solid var(--opinionhub-line); border-radius: 999px; background: var(--opinionhub-paper); color: var(--opinionhub-ink); font: 600 .8125rem/1 var(--opinionhub-sans); font-variant-numeric: tabular-nums; cursor: pointer; }
.opinionhub-vote:hover { border-color: var(--opinionhub-accent); }
.opinionhub-vote-on { border-color: var(--opinionhub-accent); background: color-mix(in srgb, var(--opinionhub-accent) 12%, var(--opinionhub-paper)); color: var(--opinionhub-accent); }
.opinionhub-vote-static { cursor: default; }
.opinionhub-post-actions .opinionhub-mod-action { color: var(--opinionhub-warn); }

.opinionhub-accepted { margin: 1rem 0 0; padding: 0 1.1rem; border: 1px solid color-mix(in srgb, var(--opinionhub-good) 40%, var(--opinionhub-line)); border-radius: var(--opinionhub-radius); background: color-mix(in srgb, var(--opinionhub-good) 5%, var(--opinionhub-paper)); }
.opinionhub-accepted-label { margin-top: .9rem; font: 600 .75rem/1 var(--opinionhub-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--opinionhub-good); }
.opinionhub-accepted .opinionhub-post { border-top: 0; }

.opinionhub-replies { margin: 0; padding: 0; list-style: none; }
.opinionhub-reply-form, .opinionhub-form { display: grid; gap: .5rem; margin-top: 2rem; }
.opinionhub-form > div { display: grid; gap: .4rem; }
.opinionhub label { font-size: .875rem; font-weight: 600; }
.opinionhub :is(input[type="text"], textarea, select) { width: 100%; padding: .65rem .8rem; border: 1px solid var(--opinionhub-line); border-radius: var(--opinionhub-radius); background: var(--opinionhub-paper); color: var(--opinionhub-ink); font: 1rem/1.5 var(--opinionhub-sans); }
.opinionhub textarea { min-height: 8rem; resize: vertical; }
.opinionhub :is(input, textarea, select):focus { border-color: var(--opinionhub-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--opinionhub-accent) 20%, transparent); }
.opinionhub [aria-invalid="true"] { border-color: var(--opinionhub-warn); }
.opinionhub-form p, .opinionhub-reply-form p { font-size: .8125rem; color: var(--opinionhub-muted); }
.opinionhub-errors { margin: 0; padding: 0; list-style: none; color: var(--opinionhub-warn); font-size: .8125rem; }
.opinionhub-errors:empty { display: none; }
.opinionhub-check { display: flex !important; align-items: center; gap: .5rem; }
.opinionhub-check label { font-weight: 400; }
.opinionhub-form-actions { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.opinionhub-reply-form .opinionhub-button { justify-self: start; }
.opinionhub [role="alert"] { padding: .75rem 1rem; border-radius: var(--opinionhub-radius); background: color-mix(in srgb, var(--opinionhub-warn) 12%, var(--opinionhub-paper)); }
.opinionhub-signin { margin-top: 2rem; padding: 1rem; border-radius: var(--opinionhub-radius); background: var(--opinionhub-soft); text-align: center; }
.opinionhub-visibility { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--opinionhub-line); font-size: .8125rem; color: var(--opinionhub-muted); }

.opinionhub-modtools { margin-top: 2rem; padding: 1.1rem 1.25rem; border: 1px dashed color-mix(in srgb, var(--opinionhub-warn) 50%, var(--opinionhub-line)); border-radius: var(--opinionhub-radius); }
.opinionhub-modtools h2 { margin-bottom: .75rem; font: 600 .75rem/1 var(--opinionhub-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--opinionhub-warn); }
.opinionhub-modtools-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .75rem; }
.opinionhub-move { display: inline-flex; align-items: center; gap: .5rem; }
.opinionhub-move select { width: auto; padding: .4rem .6rem; }
.opinionhub-modtools p { font-size: .8125rem; }

/* ── Moderation ─────────────────────────────────────────── */
.opinionhub-reports { margin: 0; padding: 0; list-style: none; }
.opinionhub-report { padding: 1rem 0; border-top: 1px solid var(--opinionhub-line); }
.opinionhub-report-reason { margin: .5rem 0; padding-left: 1rem; border-left: 3px solid var(--opinionhub-warn); }
.opinionhub-report-meta { margin-bottom: .6rem; font-size: .8125rem; color: var(--opinionhub-muted); }
.opinionhub-log { width: 100%; border-collapse: collapse; font-size: .875rem; }
.opinionhub-log th, .opinionhub-log td { padding: .55rem .5rem; border-bottom: 1px solid var(--opinionhub-line); text-align: left; vertical-align: top; }
.opinionhub-log th { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--opinionhub-muted); }

.opinionhub-notice { padding: 3rem 0; text-align: center; }
.opinionhub-notice p { margin-top: .75rem; color: var(--opinionhub-muted); }

@media (max-width: 40rem) {
  .opinionhub-topic-row { grid-template-columns: minmax(0, 1fr) auto; }
  .opinionhub-topic-last { display: none; }
}