/* GoutSafe Community (PRD Community v2). Served as a static file so the forum's styles never
   touch the Tailwind bundle hash that the 20 Title CTR test pages share (qa:freeze). Colours
   are the site's tokens from tailwind.config.mjs: brand navy, teal, the A to E grade scale,
   warn amber. Every control is at least 44px tall (SIM 74). */
.cm { max-width: 72rem; margin: 0 auto; padding: 2rem 1rem 3rem; color: #334155; }
.cm-narrow { max-width: 44rem; }
.cm h1 { font-family: 'Source Serif 4 Variable', Georgia, serif; font-size: 1.875rem; line-height: 1.2; font-weight: 700; color: #0f172a; }
.cm h2 { font-family: 'Source Serif 4 Variable', Georgia, serif; font-size: 1.375rem; font-weight: 600; color: #0f172a; margin-top: 2rem; }
/* Plain links only: buttons, chips, tags and author names carry their own colours below. */
.cm a:not(.cm-btn):not(.cm-link-btn):not(.cm-chip):not(.cm-tag):not(.cm-author):not(.cm-react) { color: #173155; }
.cm a:not(.cm-btn):not(.cm-link-btn):not(.cm-chip):not(.cm-tag):hover { text-decoration: underline; }
.cm-muted { color: #64748b; font-size: 0.9375rem; }
.cm-eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #173155; }
.cm-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.cm-top nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: 0.9375rem; }
.cm-back { display: inline-flex; align-items: center; min-height: 44px; color: #173155; text-decoration: none; font-weight: 500; }
.cm-chip-label { display: inline-flex; align-items: center; min-height: 44px; padding-right: .25rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.cm-foot { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; font-size: 0.875rem; color: #64748b; }
.cm-foot a { color: #64748b; }
.cm-btn, .cm-link-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1rem; border-radius: .5rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; font-size: 1rem; line-height: 1.2; }
.cm-btn { background: #173155; color: #fff; }
.cm-btn:hover { background: #112743; text-decoration: none; }
.cm-btn-ghost { background: #fff; color: #334155; border-color: #cbd5e1; }
.cm-btn-ghost:hover { background: #f1f5f9; border-color: #173155; color: #173155; text-decoration: none; }
.cm-btn-danger:hover { background: #fdf0ef; border-color: #b3261e; color: #b3261e; }
.cm-btn-danger { background: #fff; color: #b3261e; border-color: #eab0ac; }
.cm-btn-sm { min-height: 36px; padding: 0 .75rem; font-size: 0.875rem; }
.cm-btn[disabled] { opacity: .6; cursor: default; }
.cm-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.cm-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border-radius: 999px; border: 1px solid #cbd5e1; background: #fff; color: #334155; font-size: 0.9375rem; text-decoration: none; }
.cm-chip[aria-current="true"], .cm-chip:hover { border-color: #173155; color: #173155; text-decoration: none; }
.cm-chip[aria-current="true"] { background: #e6edf5; }
.cm-list { list-style: none; padding: 0; margin: 1rem 0 0; border-top: 1px solid #e2e8f0; }
.cm-row { padding: 1rem 0; border-bottom: 1px solid #e2e8f0; }
.cm-row h2 { font-family: inherit; font-size: 1.125rem; font-weight: 600; margin: 0; line-height: 1.35; }
.cm-row h2 a { color: #0f172a; text-decoration: none; }
.cm-row h2 a:hover { color: #173155; text-decoration: underline; }
.cm-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .35rem; font-size: 0.875rem; color: #64748b; }
.cm-meta a { color: #64748b; }
.cm-cat { display: inline-block; padding: .1rem .5rem; border-radius: .35rem; background: #f1f5f9; color: #334155; font-size: 0.8125rem; font-weight: 600; }
.cm-post { padding: 1.25rem 0; border-bottom: 1px solid #e2e8f0; }
.cm-post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; font-size: 0.9375rem; }
.cm-post-head .cm-author { font-weight: 600; color: #0f172a; text-decoration: none; }
.cm-post-head time { color: #64748b; }
.cm-body { margin-top: .6rem; font-size: 1.0625rem; line-height: 1.6; overflow-wrap: anywhere; }
.cm-body p { margin: 0 0 .9rem; }
.cm-body p:last-child { margin-bottom: 0; }
.cm-body a { overflow-wrap: anywhere; word-break: normal; }
.cm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }
.cm-actions form { display: inline; }
.cm-react { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .85rem; border-radius: 999px; border: 1px solid #cbd5e1; background: #fff; color: #334155; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.cm-react:hover { border-color: #173155; color: #173155; }
.cm-react[aria-pressed="true"] { background: #e6edf5; border-color: #173155; color: #173155; }
.cm-react .n { font-variant-numeric: tabular-nums; color: #64748b; font-weight: 500; }
.cm-react[aria-pressed="true"] .n { color: #173155; }
.cm-own { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .5rem; font-size: 0.9375rem; }
.cm-form { margin-top: 1.25rem; }
.cm-form label { display: block; font-weight: 600; color: #0f172a; margin-top: 1rem; margin-bottom: .35rem; }
.cm-form input[type="text"], .cm-form input[type="email"], .cm-form input[type="number"], .cm-form textarea, .cm-form select { width: 100%; box-sizing: border-box; min-height: 44px; padding: .55rem .75rem; border: 1px solid #cbd5e1; border-radius: .5rem; font: inherit; color: #0f172a; background: #fff; }
.cm-form textarea { min-height: 9rem; resize: vertical; }
.cm-form textarea.cm-reply-box { min-height: 6rem; }
.cm-form input:focus, .cm-form textarea:focus, .cm-form select:focus { outline: 2px solid #173155; outline-offset: 1px; border-color: #173155; }
.cm-hint { font-size: 0.875rem; color: #64748b; margin-top: .3rem; }
.cm-disclaimer { margin-top: .75rem; font-size: 0.875rem; color: #7c4a02; background: #fdf6e3; border: 1px solid #e8d28a; border-radius: .5rem; padding: .6rem .8rem; }
.cm-error { margin: 1rem 0; padding: .75rem 1rem; border-radius: .5rem; background: #fae9e8; border: 1px solid #eab0ac; color: #b3261e; }
.cm-notice { margin: 1rem 0; padding: .75rem 1rem; border-radius: .5rem; background: #effcf9; border: 1px solid #9be6d8; color: #115e56; }
.cm-check { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem; font-weight: 400; }
.cm-check input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; flex: none; }
.cm-submit { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cm-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.cm-tag { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: 0 .7rem; border-radius: 999px; border: 1px solid #cbd5e1; background: #fff; font-size: 0.875rem; text-decoration: none; color: #0f172a; }
.cm-tag:hover { border-color: #173155; text-decoration: none; }
.cm-grade { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: .3rem; font-weight: 700; font-size: 0.8125rem; color: #fff; }
.cm-grade-a { background: #1f7a4d; } .cm-grade-b { background: #2f732f; } .cm-grade-c { background: #9a6f06; } .cm-grade-d { background: #af560a; } .cm-grade-e { background: #b3261e; }
.cm-tag .x { color: #64748b; font-weight: 700; cursor: pointer; background: none; border: 0; min-width: 32px; min-height: 32px; }
.cm-picker { position: relative; }
.cm-picker ul { position: absolute; z-index: 20; left: 0; right: 0; margin: .25rem 0 0; padding: .25rem 0; list-style: none; background: #fff; border: 1px solid #cbd5e1; border-radius: .5rem; box-shadow: 0 8px 24px rgba(15,23,42,.12); max-height: 16rem; overflow: auto; }
.cm-picker li { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .25rem .75rem; cursor: pointer; }
.cm-picker li:hover, .cm-picker li[aria-selected="true"] { background: #e6edf5; }
.cm-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin-top: .75rem; }
.cm-photos a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: .5rem; background: #f1f5f9; }
.cm-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-photo-pick { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.cm-photo-pick .cm-thumb { position: relative; width: 96px; height: 72px; border-radius: .4rem; overflow: hidden; background: #f1f5f9; }
.cm-photo-pick .cm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cm-photo-pick .cm-thumb-kept::after { content: 'kept'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .8rem; color: #64748b; }
.cm-photo-pick .cm-thumb button { position: absolute; top: 2px; right: 2px; min-width: 28px; min-height: 28px; border-radius: 999px; border: 0; background: rgba(15,23,42,.7); color: #fff; cursor: pointer; }
.cm-poll { margin: 1rem 0; padding: 1rem; border: 1px solid #e2e8f0; border-radius: .75rem; background: #f8fafc; }
.cm-poll h2 { margin: 0 0 .5rem; font-family: inherit; font-size: 1.0625rem; font-weight: 600; }
.cm-poll-choice { display: flex; align-items: center; gap: .7rem; min-height: 48px; margin: 0 0 .5rem; padding: .6rem .9rem; border: 1.5px solid #cbd5e1; border-radius: .6rem; background: #fff; font-weight: 500; cursor: pointer; transition: border-color .12s, background .12s; }
.cm-poll-choice:hover { border-color: #355988; }
.cm-poll-choice input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: #173155; flex: none; }
.cm-poll-choice:has(input:checked) { border-color: #173155; background: #eef3fa; }
.cm-poll-choice:has(input:focus-visible) { outline: 2px solid #355988; outline-offset: 2px; }
.cm-poll-result { position: relative; display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 44px; margin: 0 0 .5rem; padding: .55rem .9rem; border: 1.5px solid #e2e8f0; border-radius: .6rem; background: #fff; overflow: hidden; font-size: .9375rem; }
.cm-poll-result i { position: absolute; inset: 0 auto 0 0; background: #e3ebf5; z-index: 0; }
.cm-poll-result span { position: relative; z-index: 1; }
.cm-poll-result .pct { font-weight: 600; font-variant-numeric: tabular-nums; }
.cm-poll-result.mine { border-color: #173155; }
.cm-poll-result.mine i { background: #cfdcee; }
.cm-poll-result b { margin-left: .4rem; font-size: .8125rem; font-weight: 600; color: #173155; }
.cm-profile dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 1rem 0; }
.cm-profile dt { color: #64748b; }
.cm-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin-top: 1rem; }
.cm-table th, .cm-table td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.cm-table td:first-child { white-space: nowrap; color: #64748b; font-size: 0.875rem; }
.cm-table td:last-child form { display: inline-block; margin: 0 .25rem .25rem 0; }
.cm-table th { color: #64748b; font-weight: 600; }
.cm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
@media (min-width: 640px) { .cm { padding-top: 2.5rem; } .cm h1 { font-size: 2.25rem; } }
.cm-poll-entry { margin-top: 1.25rem; padding: .75rem 1rem; border: 1px solid #e2e8f0; border-radius: .6rem; background: #f8fafc; }
.cm-poll-entry summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.cm-poll-entry .cm-label { margin: .9rem 0 .35rem; font-weight: 600; font-size: .9375rem; }
.cm-poll-choices input { display: block; width: 100%; margin: 0 0 .5rem; }
.cm-btn-link { background: none; border: 0; padding: .35rem 0; min-height: 44px; color: #173155; font: inherit; font-weight: 600; cursor: pointer; }
.cm-btn-link:hover { text-decoration: underline; }
/* Topic colours (Oliver, 2026-10-07): a pastel per topic on chips, list labels and the thread eyebrow. */
.cm-cat-food { --cat-bg: #e6f4ea; --cat-fg: #1e6b3a; --cat-bd: #b5dcc0; }
.cm-cat-flares { --cat-bg: #fde8e8; --cat-fg: #a52a2a; --cat-bd: #f2bcbc; }
.cm-cat-treatment { --cat-bg: #e7effa; --cat-fg: #24508a; --cat-bd: #bcd0ee; }
.cm-cat-support { --cat-bg: #f1eafb; --cat-fg: #5d3a9b; --cat-bd: #d6c6f0; }
.cm a.cm-cat, .cm .cm-cat[class*="cm-cat-"] { background: var(--cat-bg, #f1f5f9); color: var(--cat-fg, #334155); text-decoration: none; }
.cm a.cm-cat:hover { text-decoration: underline; }
.cm-eyebrow .cm-cat { text-transform: none; letter-spacing: 0; margin-left: .15rem; }
.cm-chip[class*="cm-cat-"] { background: var(--cat-bg); color: var(--cat-fg); border-color: var(--cat-bd); }
.cm-chip[class*="cm-cat-"]:hover { border-color: var(--cat-fg); color: var(--cat-fg); }
.cm-chip[class*="cm-cat-"][aria-current="true"] { background: var(--cat-fg); color: #fff; border-color: var(--cat-fg); }
.cm-chip .n { margin-left: .35rem; font-size: .8125rem; opacity: .75; font-variant-numeric: tabular-nums; }
/* Search */
.cm-search { display: flex; gap: .5rem; margin: 1.25rem 0 .25rem; max-width: 40rem; }
.cm-search input[type="search"] { flex: 1; min-width: 0; min-height: 44px; margin: 0; box-sizing: border-box; padding: .55rem .75rem; border: 1px solid #cbd5e1; border-radius: .5rem; font: inherit; color: #0f172a; background: #fff; }
.cm-search input[type="search"]:focus { outline: 2px solid #173155; outline-offset: 1px; border-color: #173155; }
.cm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cm-results { margin: .75rem 0 0; font-size: .9375rem; color: #334155; }
.cm-excerpt { margin: .3rem 0 0; color: #475569; font-size: .9375rem; line-height: 1.45; overflow-wrap: anywhere; }
/* Google's sign-in button, light theme per Google's branding guidelines: white, grey border, the four-colour G. */
.cm-btn-google { gap: .75rem; background: #fff; color: #1f1f1f; border-color: #747775; font-weight: 500; }
.cm-btn-google:hover { background: #f8fafd; border-color: #1f1f1f; color: #1f1f1f; }
.cm-btn-google svg { width: 20px; height: 20px; flex: none; }
/* Persona marker (Community/Persona process.md): a muted "ex" beside example-voice names on thread, profile and admin pages. The list page carries one note line instead. */
.cm-example { margin-left: .3rem; color: #94a3b8; font-size: .75rem; font-weight: 500; text-decoration: none; cursor: help; vertical-align: .1em; white-space: nowrap; font-family: inherit; }
h1 .cm-example { font-size: .875rem; vertical-align: .3em; }
.cm-example-note { margin-top: .35rem; max-width: 44rem; font-size: .875rem; }
.cm-example-note .cm-example { margin-left: 0; vertical-align: baseline; }
.cm-last { color: #475569; }