/* PSC Blazor Forum
   Everything is scoped under .psc-forum, so nothing here touches the host's own pages.
   Colours are derived from the host's text colour (currentColor), so the forum follows the
   site's light or dark theme without configuration. To brand it, set --pf-accent (and
   optionally --pf-accent-text) on .psc-forum or any ancestor. */

.psc-forum {
    --pf-accent: #2563eb;
    --pf-accent-text: #fff;
    --pf-radius: 10px;
    --pf-gap: 1rem;
    --pf-border: color-mix(in srgb, currentColor 14%, transparent);
    --pf-surface: color-mix(in srgb, currentColor 4%, transparent);
    --pf-surface-strong: color-mix(in srgb, currentColor 8%, transparent);
    --pf-muted: color-mix(in srgb, currentColor 62%, transparent);
    --pf-success: #1a7f37;
    --pf-warning: #b35900;
    --pf-danger: #cf222e;
    --pf-info: #0969da;
    --pf-purple: #8250df;

    color: inherit;
    line-height: 1.5;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 0 2rem;
    box-sizing: border-box;
}

.psc-forum *, .psc-forum *::before, .psc-forum *::after { box-sizing: inherit; }
.psc-forum a { color: var(--pf-accent); text-decoration: none; }
.psc-forum a:hover { text-decoration: underline; }
.psc-forum h1, .psc-forum h2, .psc-forum h3 { line-height: 1.25; margin: 0 0 .5rem; }
.psc-forum h1 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
.psc-forum h2 { font-size: 1.2rem; }
.psc-forum h3 { font-size: 1.05rem; margin-top: 1.25rem; }
.psc-forum .pf-muted { color: var(--pf-muted); font-size: .9em; }
.psc-forum .pf-nowrap { white-space: nowrap; }
.psc-forum :focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 2px; }

/* ---- top bar and breadcrumbs ---------------------------------------------------------- */

.pf-topbar {
    display: flex; align-items: center; gap: var(--pf-gap); flex-wrap: wrap;
    padding: .75rem 0; margin-bottom: .5rem; border-bottom: 1px solid var(--pf-border);
}
.pf-brand { font-weight: 700; font-size: 1.1rem; color: inherit !important; }
.pf-search { flex: 1 1 220px; max-width: 420px; }
.pf-search input {
    width: 100%; padding: .45rem .75rem; border-radius: 999px; font: inherit; color: inherit;
    border: 1px solid var(--pf-border); background: var(--pf-surface);
}
.pf-user { display: flex; align-items: center; gap: .75rem; margin-left: auto; flex-wrap: wrap; }
.pf-me { display: inline-flex; align-items: center; gap: .4rem; color: inherit !important; font-weight: 500; }
.pf-link { font-size: .95rem; }

.pf-crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: .5rem 0 1rem; font-size: .9rem; color: var(--pf-muted); }
.pf-crumbs li + li::before { content: "›"; margin-right: .35rem; }

.pf-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pf-gap); flex-wrap: wrap; margin: .5rem 0 1.25rem; }
.pf-page-title { flex: 1 1 320px; min-width: 0; }
.pf-page-title h1 { overflow-wrap: anywhere; }
.pf-page-subtitle { color: var(--pf-muted); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pf-page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.pf-topic-badges { display: inline-flex; gap: .35rem; flex-wrap: wrap; }

/* ---- buttons, inputs, badges ---------------------------------------------------------- */

.pf-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .5rem .95rem; border-radius: 8px; border: 1px solid var(--pf-accent);
    background: var(--pf-accent); color: var(--pf-accent-text) !important; font: inherit; font-weight: 600;
    cursor: pointer; text-decoration: none !important; line-height: 1.2;
}
.pf-button:hover { filter: brightness(1.08); }
.pf-button:disabled { opacity: .55; cursor: not-allowed; }
.pf-button-ghost { background: transparent; color: var(--pf-accent) !important; border-color: var(--pf-border); }
.pf-button-ghost:hover { background: var(--pf-surface); }
.pf-button-small { padding: .3rem .65rem; font-size: .88rem; }
.pf-button-danger { background: var(--pf-danger); border-color: var(--pf-danger); }
.pf-link-button { background: none; border: 0; padding: .2rem .35rem; font: inherit; font-size: .9rem; color: var(--pf-muted); cursor: pointer; border-radius: 6px; }
.pf-link-button:hover { color: var(--pf-accent); background: var(--pf-surface); }
.pf-danger-text { color: var(--pf-danger) !important; }
.pf-warning-text { color: var(--pf-warning); }
.pf-push-right { margin-left: auto; }

.pf-input {
    width: 100%; padding: .5rem .7rem; border-radius: 8px; border: 1px solid var(--pf-border);
    background: transparent; color: inherit; font: inherit;
}
.pf-input:focus { border-color: var(--pf-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-accent) 20%, transparent); }
select.pf-input { background: var(--pf-surface); }
/* The open list is drawn by the browser. Canvas/CanvasText always come as a readable pair and follow
   the page's color-scheme, so the options are dark-on-light or light-on-dark, never light-on-light. */
select.pf-input option, select.pf-input optgroup { background-color: Canvas; color: CanvasText; }
.pf-input-small { width: auto; min-width: 7rem; padding: .3rem .5rem; font-size: .9rem; }

.pf-badge {
    display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
    white-space: nowrap; vertical-align: middle;
    --pf-badge: var(--pf-muted);
    color: var(--pf-badge); background: color-mix(in srgb, var(--pf-badge) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--pf-badge) 30%, transparent);
}
.pf-badge-accent { --pf-badge: var(--pf-accent); }
.pf-badge-success, .pf-status-done { --pf-badge: var(--pf-success); }
.pf-badge-warning, .pf-status-underreview { --pf-badge: var(--pf-warning); }
.pf-badge-danger, .pf-kind-bug { --pf-badge: var(--pf-danger); }
.pf-status-open, .pf-kind-question { --pf-badge: var(--pf-info); }
.pf-status-planned, .pf-kind-featurerequest { --pf-badge: var(--pf-purple); }
.pf-status-inprogress { --pf-badge: #bf8700; }
.pf-status-declined, .pf-status-duplicate { --pf-badge: var(--pf-muted); }

.pf-alert { padding: .7rem 1rem; border-radius: 8px; margin: 0 0 1rem; border: 1px solid var(--pf-border); background: var(--pf-surface); }
.pf-alert-success { border-color: color-mix(in srgb, var(--pf-success) 40%, transparent); background: color-mix(in srgb, var(--pf-success) 9%, transparent); }
.pf-alert-danger { border-color: color-mix(in srgb, var(--pf-danger) 40%, transparent); background: color-mix(in srgb, var(--pf-danger) 9%, transparent); }

.pf-empty, .pf-loading { padding: 2rem 1rem; text-align: center; color: var(--pf-muted); border: 1px dashed var(--pf-border); border-radius: var(--pf-radius); }
.pf-loading { border: 0; }
.pf-message { padding: 2rem 0; }
.pf-card { border: 1px solid var(--pf-border); border-radius: var(--pf-radius); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.pf-section-title { margin-top: 1.5rem; }

/* ---- avatars ------------------------------------------------------------------------- */

.pf-avatar { border-radius: 50%; object-fit: cover; flex: none; display: inline-block; }
.pf-avatar-initials { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; letter-spacing: .02em; user-select: none; }

/* ---- index: categories and boards ---------------------------------------------------- */

.pf-category { margin-bottom: 1.75rem; }
.pf-category-head { margin-bottom: .5rem; }
.pf-category-head h2 { margin: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pf-muted); }
.pf-category-head p { margin: .15rem 0 0; color: var(--pf-muted); font-size: .9rem; }

.pf-boards, .pf-topics { list-style: none; margin: 0; padding: 0; border: 1px solid var(--pf-border); border-radius: var(--pf-radius); overflow: hidden; }
.pf-board, .pf-topic { display: grid; align-items: center; gap: .9rem; padding: .85rem 1rem; }
.pf-board + .pf-board, .pf-topic + .pf-topic { border-top: 1px solid var(--pf-border); }
.pf-board:hover, .pf-topic:hover { background: var(--pf-surface); }

.pf-board { grid-template-columns: 2.6rem minmax(0, 1fr) 9rem minmax(0, 15rem); }
.pf-board-icon {
    width: 2.6rem; height: 2.6rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.15rem; color: var(--pf-accent); background: color-mix(in srgb, var(--pf-accent) 12%, transparent);
}
.pf-layout-questionandanswer { color: var(--pf-info); background: color-mix(in srgb, var(--pf-info) 12%, transparent); }
.pf-layout-feedback { color: var(--pf-purple); background: color-mix(in srgb, var(--pf-purple) 12%, transparent); }
.pf-board-name { font-weight: 600; font-size: 1.05rem; margin-right: .35rem; }
.pf-board-main p { margin: .15rem 0 0; }
.pf-board-stats, .pf-topic-stats { display: flex; flex-direction: column; font-size: .88rem; color: var(--pf-muted); }
.pf-board-stats strong, .pf-topic-stats strong { color: initial; color: inherit; }
.pf-board-latest { display: flex; gap: .5rem; align-items: center; font-size: .9rem; min-width: 0; }
.pf-board-latest a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-board-latest > div { min-width: 0; }

/* ---- topic lists --------------------------------------------------------------------- */

.pf-filters { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.pf-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.pf-chip { padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--pf-border); font-size: .85rem; color: inherit !important; }
.pf-chip:hover { background: var(--pf-surface); text-decoration: none !important; }
.pf-chip-on { background: var(--pf-accent); border-color: var(--pf-accent); color: var(--pf-accent-text) !important; }
.pf-chip-on:hover { background: var(--pf-accent); }
.pf-sort { justify-content: flex-end; }

.pf-topic { grid-template-columns: 2.5rem minmax(0, 1fr) 7rem minmax(0, 11rem); }
.pf-topic-sticky { background: color-mix(in srgb, var(--pf-accent) 5%, transparent); }
.pf-topic-pending { opacity: .8; }
.pf-topic-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pf-topic-title { font-weight: 600; font-size: 1.02rem; color: inherit !important; overflow-wrap: anywhere; }
.pf-topic-title:hover { color: var(--pf-accent) !important; }
.pf-meta { font-size: .85rem; color: var(--pf-muted); margin-top: .1rem; }
.pf-meta a { color: inherit; font-weight: 500; }
.pf-topic-last { display: flex; align-items: center; gap: .45rem; font-size: .85rem; min-width: 0; line-height: 1.3; }
.pf-topic-score {
    width: 2.5rem; text-align: center; display: flex; flex-direction: column; line-height: 1.1;
    border: 1px solid var(--pf-border); border-radius: 8px; padding: .3rem 0; font-size: .7rem; color: var(--pf-muted);
}
.pf-topic-score strong { font-size: 1rem; color: inherit; }

.pf-pager { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin: 1.25rem 0; }
.pf-pager a, .pf-pager span { padding: .3rem .65rem; border-radius: 6px; border: 1px solid var(--pf-border); font-size: .9rem; }
.pf-pager-current { background: var(--pf-accent); color: var(--pf-accent-text); border-color: var(--pf-accent) !important; }
.pf-pager-gap { border: 0 !important; }

/* ---- posts --------------------------------------------------------------------------- */

.pf-modbar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .6rem .75rem; margin-bottom: 1rem; border-radius: 8px; background: var(--pf-surface); border: 1px dashed var(--pf-border); }
.pf-posts { display: flex; flex-direction: column; gap: 1rem; }
.pf-answers-head { margin: .75rem 0 0; font-size: 1.05rem; }

.pf-post { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); border: 1px solid var(--pf-border); border-radius: var(--pf-radius); overflow: hidden; scroll-margin-top: 1rem; }
.pf-post:target { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-accent) 35%, transparent); }
.pf-post-starter { border-color: color-mix(in srgb, var(--pf-accent) 35%, var(--pf-border)); }
.pf-post-accepted { border-color: var(--pf-success); box-shadow: inset 4px 0 0 var(--pf-success); }
.pf-post-pending { border-style: dashed; }
.pf-post-deleted { opacity: .6; }
.pf-post-author { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; padding: 1rem .75rem; background: var(--pf-surface); border-right: 1px solid var(--pf-border); }
.pf-post-author-name { font-weight: 600; overflow-wrap: anywhere; }
.pf-rank { font-size: .78rem; font-weight: 600; color: var(--pf-accent); }
.pf-post-body { padding: .9rem 1.1rem .6rem; min-width: 0; display: flex; flex-direction: column; }
.pf-post-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.pf-signature { margin-top: .75rem; padding-top: .5rem; border-top: 1px dashed var(--pf-border); color: var(--pf-muted); font-size: .85rem; }
.pf-post-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .6rem; }
.pf-post-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; }
.pf-confirm { display: inline-flex; align-items: center; gap: .15rem; font-size: .9rem; }

.pf-votes { display: inline-flex; align-items: center; gap: .15rem; border: 1px solid var(--pf-border); border-radius: 999px; padding: .1rem .25rem; }
.pf-vote { background: none; border: 0; font: inherit; cursor: pointer; color: var(--pf-muted); padding: .15rem .45rem; border-radius: 999px; line-height: 1; }
.pf-vote:hover { color: var(--pf-accent); background: var(--pf-surface); }
.pf-vote-on { color: var(--pf-accent); }
.pf-vote-static { cursor: default; }
.pf-vote-static:hover { background: none; color: var(--pf-muted); }
.pf-vote-score { font-weight: 700; min-width: 1.4rem; text-align: center; }

/* Rendered Markdown. */
.pf-prose { overflow-wrap: anywhere; }
.pf-prose > :first-child { margin-top: 0; }
.pf-prose > :last-child { margin-bottom: 0; }
.pf-prose p, .pf-prose ul, .pf-prose ol, .pf-prose pre, .pf-prose blockquote, .pf-prose table { margin: 0 0 .8rem; }
.pf-prose img { max-width: 100%; max-height: 32rem; height: auto; object-fit: contain; border-radius: 6px; border: 1px solid var(--pf-border); }
.pf-prose code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; background: var(--pf-surface-strong); padding: .1em .35em; border-radius: 4px; }
.pf-prose pre { background: var(--pf-surface-strong); padding: .75rem 1rem; border-radius: 8px; overflow-x: auto; }
.pf-prose pre code { background: none; padding: 0; }
.pf-prose blockquote { border-left: 3px solid var(--pf-border); padding-left: .9rem; color: var(--pf-muted); }
.pf-prose table { border-collapse: collapse; display: block; overflow-x: auto; }
.pf-prose th, .pf-prose td { border: 1px solid var(--pf-border); padding: .35rem .6rem; }
.pf-prose ul.contains-task-list { list-style: none; padding-left: 1rem; }

/* ---- forms and editor ---------------------------------------------------------------- */

.pf-form { display: flex; flex-direction: column; gap: 1rem; }
.pf-field { display: flex; flex-direction: column; gap: .35rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.pf-field > span:first-child, .pf-field > legend { font-weight: 600; font-size: .95rem; }
.pf-form-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pf-inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pf-inline-form .pf-input { width: auto; flex: 1 1 12rem; }
.pf-check { display: flex; gap: .45rem; align-items: center; font-weight: 400; }
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pf-span-2 { grid-column: span 2; }

.pf-kinds { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; }
.pf-kinds legend { font-weight: 600; margin-bottom: .4rem; }
.pf-kind { display: flex; flex-direction: column; gap: .2rem; padding: .75rem .9rem; border: 1px solid var(--pf-border); border-radius: 8px; cursor: pointer; }
.pf-kind input { position: absolute; opacity: 0; pointer-events: none; }
.pf-kind-on { border-color: var(--pf-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pf-accent) 25%, transparent); }

.pf-editor { border: 1px solid var(--pf-border); border-radius: 8px; overflow: hidden; }
.pf-editor:focus-within { border-color: var(--pf-accent); }
.pf-editor-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem; padding: .3rem .4rem; background: var(--pf-surface); border-bottom: 1px solid var(--pf-border); }
.pf-tabs, .pf-format { display: flex; gap: .15rem; flex-wrap: wrap; }
.pf-tabs button, .pf-format button { background: none; border: 0; font: inherit; font-size: .88rem; color: inherit; padding: .3rem .55rem; border-radius: 6px; cursor: pointer; }
.pf-tabs button:hover, .pf-format button:hover { background: var(--pf-surface-strong); }
.pf-tab-active { background: var(--pf-surface-strong) !important; font-weight: 600 !important; }
.pf-editor-text { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; resize: vertical; min-height: 8rem; display: block; }
.pf-editor-preview { padding: .75rem .9rem; min-height: 8rem; }
.pf-editor-foot { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem .6rem; border-top: 1px solid var(--pf-border); font-size: .8rem; }

.pf-reply { margin-top: 1.5rem; }
.pf-reply .pf-form-actions { margin-top: .75rem; }

.pf-search-large { display: flex; gap: .5rem; margin-bottom: 1rem; }

/* ---- profiles, moderation, admin ------------------------------------------------------ */

.pf-profile { display: flex; gap: 1.25rem; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; }
.pf-profile-main { flex: 1 1 16rem; }
.pf-facts { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: .75rem 0; }
.pf-facts dt { font-size: .78rem; color: var(--pf-muted); text-transform: uppercase; letter-spacing: .04em; }
.pf-facts dd { margin: 0; font-weight: 600; }
.pf-danger-zone { border-color: color-mix(in srgb, var(--pf-danger) 35%, transparent); }
.pf-follows { list-style: none; padding: 0; margin: 0 0 .75rem; display: flex; flex-direction: column; gap: .4rem; }
.pf-follows li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pf-pending-head { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .6rem; }
.pf-pending .pf-form-actions { margin-top: .75rem; }

.pf-table { width: 100%; border-collapse: collapse; margin-bottom: .75rem; font-size: .93rem; display: block; overflow-x: auto; }
.pf-table th, .pf-table td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--pf-border); vertical-align: top; }
.pf-table thead th { font-size: .8rem; color: var(--pf-muted); text-transform: uppercase; letter-spacing: .04em; }
.pf-table-group th { background: var(--pf-surface); font-weight: 600; }

/* ---- embeddable latest-topics block --------------------------------------------------- */

.pf-latest { padding: 0; max-width: none; }
.pf-latest ul { list-style: none; padding: 0; margin: 0 0 .5rem; }
.pf-latest li { padding: .5rem 0; border-bottom: 1px solid var(--pf-border); }
.pf-latest li > a { font-weight: 600; margin-right: .3rem; }
.pf-latest-head { font-size: 1.1rem; }

/* ---- bell, counts, handles, mentions --------------------------------------------------- */

.pf-bell { position: relative; display: inline-flex; align-items: center; color: inherit !important; padding: .2rem; border-radius: 8px; }
.pf-bell:hover { background: var(--pf-surface); text-decoration: none !important; }
.pf-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
    border-radius: 999px; background: var(--pf-danger); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1;
}
.pf-bell .pf-count { position: absolute; top: -.25rem; right: -.35rem; }
.pf-link .pf-count { margin-left: .2rem; vertical-align: middle; }
.pf-handle { font-size: .8rem; color: var(--pf-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.pf-prose a.pf-mention { font-weight: 600; background: color-mix(in srgb, var(--pf-accent) 10%, transparent); padding: 0 .2em; border-radius: 4px; }

.pf-alerts { list-style: none; margin: 0; padding: 0; border: 1px solid var(--pf-border); border-radius: var(--pf-radius); overflow: hidden; }
.pf-alerts li { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 1rem; }
.pf-alerts li + li { border-top: 1px solid var(--pf-border); }
.pf-alerts a { color: inherit !important; }
.pf-alert-unread { background: color-mix(in srgb, var(--pf-accent) 7%, transparent); }
.pf-alert-unread a { font-weight: 600; }
.pf-alert-icon {
    flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--pf-surface-strong); font-weight: 700; font-size: .85rem;
}

/* ---- reports ---------------------------------------------------------------------------- */

.pf-report-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .6rem; padding: .6rem; border-radius: 8px; background: var(--pf-surface); }
.pf-report-form .pf-input:not(select) { flex: 1 1 14rem; width: auto; }
.pf-report-note { margin: 0 0 .6rem; padding: .4rem .75rem; border-left: 3px solid var(--pf-warning); background: var(--pf-surface); }
.pf-tabs-bar { margin-bottom: 1rem; }

/* ---- the editor ------------------------------------------------------------------------ */

.pf-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pf-editor-extras { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .4rem; font-size: .85rem; }
.pf-attach { cursor: pointer; border: 1px dashed var(--pf-border) !important; }

/* EasyMDE ships with a white canvas; make it follow the host's colours like the rest of the forum. */
.psc-forum .EasyMDEContainer .CodeMirror {
    background: transparent; color: inherit; border-color: var(--pf-border);
    border-radius: 0 0 8px 8px; font: inherit; line-height: 1.5;
}
.psc-forum .EasyMDEContainer .CodeMirror-cursor { border-left-color: currentColor; }
.psc-forum .EasyMDEContainer .CodeMirror-selected,
.psc-forum .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected { background: color-mix(in srgb, var(--pf-accent) 22%, transparent); }
.psc-forum .editor-toolbar { border-color: var(--pf-border); border-radius: 8px 8px 0 0; background: var(--pf-surface); opacity: 1; }
.psc-forum .editor-toolbar button { color: inherit !important; border-color: transparent; }
.psc-forum .editor-toolbar button:hover, .psc-forum .editor-toolbar button.active { background: var(--pf-surface-strong); border-color: var(--pf-border); }
.psc-forum .editor-toolbar i.separator { border-left-color: var(--pf-border); border-right-color: transparent; }
.psc-forum .editor-preview, .psc-forum .editor-preview-side { background: var(--pf-surface); color: inherit; }
/* In preview EasyMDE disables every toolbar button not marked noDisable, and the MarkdownEditor
   does not mark its own Preview button, so preview could not be left. Keep that one working. */
.psc-forum .editor-toolbar.disabled-for-preview button.bi-eye { opacity: 1; pointer-events: auto; }
.psc-forum .editor-statusbar { color: var(--pf-muted); }

/* ---- code highlighting (highlight.js classes, colours that read on light and dark) -------- */

.pf-prose .hljs-keyword, .pf-prose .hljs-selector-tag, .pf-prose .hljs-literal, .pf-prose .hljs-doctag { color: color-mix(in srgb, #7c3aed 80%, currentColor); }
.pf-prose .hljs-string, .pf-prose .hljs-regexp, .pf-prose .hljs-addition { color: color-mix(in srgb, #15803d 80%, currentColor); }
.pf-prose .hljs-comment, .pf-prose .hljs-quote { color: var(--pf-muted); font-style: italic; }
.pf-prose .hljs-number, .pf-prose .hljs-symbol, .pf-prose .hljs-bullet { color: color-mix(in srgb, #b45309 85%, currentColor); }
.pf-prose .hljs-title, .pf-prose .hljs-section, .pf-prose .hljs-function .hljs-title { color: color-mix(in srgb, #1d4ed8 80%, currentColor); }
.pf-prose .hljs-type, .pf-prose .hljs-built_in, .pf-prose .hljs-class .hljs-title { color: color-mix(in srgb, #0f766e 85%, currentColor); }
.pf-prose .hljs-attr, .pf-prose .hljs-attribute, .pf-prose .hljs-variable, .pf-prose .hljs-template-variable { color: color-mix(in srgb, #be123c 75%, currentColor); }
.pf-prose .hljs-meta, .pf-prose .hljs-deletion { color: color-mix(in srgb, #b91c1c 75%, currentColor); }
/* ---- forum icons, colours and sub-forums ------------------------------------------------ */

.pf-board-icon[style*="--pf-board-color"] { color: var(--pf-board-color); background: color-mix(in srgb, var(--pf-board-color) 14%, transparent); }
.pf-board-icon i { font-size: 1.2rem; line-height: 1; }
.pf-board-icon-small { width: 1.35rem; height: 1.35rem; border-radius: 6px; font-size: .75rem; vertical-align: -.3em; }
.pf-board-icon-small i { font-size: .8rem; }
.pf-board-colored { box-shadow: inset 4px 0 0 var(--pf-board-color); }

.pf-subforums { display: flex; flex-wrap: wrap; gap: .25rem .9rem; align-items: center; margin-top: .45rem; padding-top: .45rem; border-top: 1px dashed var(--pf-border); font-size: .92rem; }
.pf-subforum { display: inline-flex; align-items: center; gap: .3rem; }
.pf-recent-toggle { margin-top: .3rem; padding-left: 0; color: var(--pf-accent); font-size: .85rem; }
.pf-recent { grid-column: 1 / -1; list-style: none; margin: 0; padding: .25rem 0 0; border-top: 1px solid var(--pf-border); }
.pf-recent li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .4rem .6rem; border-radius: 6px; }
.pf-recent li:nth-child(odd) { background: var(--pf-surface); }
.pf-subforum-list { margin-bottom: 1.25rem; }

/* ---- admin tree ------------------------------------------------------------------------- */

.pf-admin-tree { display: flex; flex-direction: column; gap: 1.25rem; }
.pf-admin-category { display: flex; flex-direction: column; gap: .35rem; }
.pf-admin-row {
    display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto auto; align-items: center; gap: .75rem;
    padding: .55rem .75rem; border: 1px solid var(--pf-border); border-radius: 8px;
}
.pf-admin-category-row { background: var(--pf-accent); color: var(--pf-accent-text); border-color: var(--pf-accent); font-weight: 700; }
.pf-admin-category-row .pf-admin-meta, .pf-admin-category-row .pf-admin-actions button, .pf-admin-category-row .pf-admin-actions a { color: inherit !important; }
.pf-admin-board-row { margin-left: calc(var(--pf-depth, 0) * 1.75rem + .75rem); background: var(--pf-surface); }
.pf-admin-id { color: inherit; opacity: .7; font-variant-numeric: tabular-nums; }
.pf-admin-name { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.pf-admin-meta { font-size: .88rem; white-space: nowrap; color: var(--pf-muted); }
.pf-admin-actions { display: inline-flex; gap: .15rem; }
.pf-admin-actions button, .pf-admin-actions a {
    background: none; border: 0; color: var(--pf-accent) !important; padding: .3rem .4rem; border-radius: 6px; cursor: pointer; font-size: 1rem; line-height: 1;
}
.pf-admin-actions button:hover, .pf-admin-actions a:hover { background: var(--pf-surface-strong); text-decoration: none !important; }
.pf-admin-confirm { grid-column: 1 / -1; display: flex; gap: .25rem; align-items: center; justify-content: flex-end; font-size: .9rem; }
.pf-admin-editor { margin: .25rem 0 .5rem calc(var(--pf-depth, 0) * 1.75rem + .75rem); }

.pf-icon-field { display: flex; gap: .5rem; align-items: center; }
.pf-icon-field .pf-input { max-width: 16rem; }
.pf-icon-preview {
    width: 2.6rem; height: 2.6rem; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.2rem; color: var(--pf-board-color, var(--pf-accent));
    background: color-mix(in srgb, var(--pf-board-color, var(--pf-accent)) 14%, transparent);
}
.pf-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.2rem, 1fr)); gap: .25rem; margin-top: .5rem; max-height: 9.5rem; overflow-y: auto; padding: .25rem; border: 1px solid var(--pf-border); border-radius: 8px; }
.pf-icon-grid button { background: none; border: 1px solid transparent; border-radius: 6px; padding: .35rem 0; color: inherit; cursor: pointer; font-size: 1.05rem; }
.pf-icon-grid button:hover { background: var(--pf-surface-strong); }
.pf-icon-grid .pf-icon-on { border-color: var(--pf-accent); color: var(--pf-accent); background: color-mix(in srgb, var(--pf-accent) 10%, transparent); }
.pf-color { width: 3rem; height: 2.2rem; padding: 0; border: 1px solid var(--pf-border); border-radius: 6px; background: none; cursor: pointer; }
/* ---- narrow screens ------------------------------------------------------------------- */

@media (max-width: 760px) {
    .pf-board { grid-template-columns: 2.2rem minmax(0, 1fr); }
    .pf-board-icon { width: 2.2rem; height: 2.2rem; }
    .pf-board-stats { grid-column: 2; flex-direction: row; gap: .75rem; }
    .pf-board-latest { grid-column: 2; }

    .pf-topic { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: .3rem; }
    .pf-topic-stats { grid-column: 2; flex-direction: row; gap: .75rem; }
    .pf-topic-last { display: none; }

    .pf-post { grid-template-columns: 1fr; }
    .pf-post-author { flex-direction: row; justify-content: flex-start; text-align: left; border-right: 0; border-bottom: 1px solid var(--pf-border); padding: .6rem .9rem; }
    .pf-post-author .pf-avatar { width: 32px !important; height: 32px !important; font-size: 13px !important; }
    .pf-post-author-stats { margin-left: auto; }

    .pf-grid { grid-template-columns: 1fr; }
    .pf-admin-row { grid-template-columns: 2rem minmax(0, 1fr); }
    .pf-admin-meta, .pf-admin-actions { grid-column: 2; }
    .pf-admin-board-row, .pf-admin-editor { margin-left: calc(var(--pf-depth, 0) * .75rem); }
    .pf-span-2 { grid-column: auto; }
    .pf-sort { justify-content: flex-start; }
    .pf-user { margin-left: 0; }
}