.help-shell { max-width: 1040px; margin: 0 auto; padding: 1rem 1rem 4rem; display: flex; flex-direction: column; gap: 1.75rem; }
body.community-gallery[data-art-theme] main .life-help-admin > header { background:var(--gallery-white,#fffdf8) !important; background-image:none !important; color:var(--gallery-ink,#263f39) !important; }
body.community-gallery[data-art-theme] main .life-help-admin > header :is(h1,p) { color:var(--gallery-ink,#263f39) !important; }
body.community-gallery.community-help-site[data-art-theme] main a.help-button { color: #fff !important; background: #2a5caa !important; }
.help-shell :is(input,textarea,select) { max-width:100%; min-width:0; }
.help-shell :is(h1,h2,h3,p,a,li) { overflow-wrap:anywhere; }
.help-shell :is(button,summary) { min-height:44px; cursor:pointer; }
.help-shell :is(button,a,input,textarea,select,summary):focus-visible { outline:3px solid #8a5a2b; outline-offset:3px; }
[data-help-board-composite] canvas, [data-help-static-canvas] { touch-action:pan-y !important; }
[data-help-board-composite]:fullscreen { padding:1rem; background:var(--gallery-white,#fffdf8); overflow:auto; }
[data-help-board-composite]:fullscreen canvas { max-height:80vh; width:auto; max-width:100%; margin:auto; }
@media(max-width:600px) { body.community-help-site footer .community-back-top { bottom:88px !important; } }
.help-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: #8a5a2b; margin: 0 0 .25rem; }
.help-intro h1 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.help-intro p { margin: 0 0 .75rem; color: #44403c; max-width: 60ch; }
.help-intro-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.help-button, .help-text-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.1rem; border-radius: .6rem; font-weight: 600; text-decoration: none; }
.help-button { background: #2a5caa; color: #fff; border: none; cursor: pointer; }
.help-button:hover { background: #204a87; }
.help-button[disabled] { opacity: .5; cursor: not-allowed; }
.help-text-link { color: #2a5caa; background: transparent; padding: 0; min-height: auto; }
.help-filter { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; background: #faf7f0; border: 1px solid #e6ddc9; border-radius: .8rem; padding: 1rem; }
.help-filter label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: #403a30; }
.help-filter select, .help-filter input[type="search"], .help-filter input[type="text"] { min-height: 40px; padding: .35rem .6rem; border: 1px solid #cbbfa0; border-radius: .5rem; }
.help-check { flex-direction: row !important; align-items: center; gap: .5rem !important; }
.help-empty { padding: 2rem; border: 1px dashed #cbbfa0; border-radius: .9rem; text-align: center; background: #fffdf8; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.help-card { border: 1px solid #e6ddc9; border-radius: .9rem; background: #fffdf8; transition: box-shadow .15s ease; }
.help-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.help-card a { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; color: inherit; text-decoration: none; min-height: 44px; }
.help-card__meta { font-size: .76rem; color: #8a5a2b; }
.help-card h3 { margin: 0; font-size: 1.05rem; }
.help-card__signature, .help-card__status { font-size: .78rem; color: #6b6354; }
.help-pagination { display: flex; gap: 1rem; align-items: center; justify-content: center; }
.help-pagination a { min-height: 44px; display: inline-flex; align-items: center; color: #2a5caa; text-decoration: none; }

.help-detail-header { display: flex; flex-direction: column; gap: .5rem; }
.help-detail-header h1 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.help-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.help-badge { font-size: .74rem; padding: .25rem .6rem; border-radius: 999px; background: #efe6d2; color: #4a3f2a; }
.help-body-text { white-space: pre-wrap; line-height: 1.7; }
.help-owner-tools { display: flex; flex-wrap: wrap; gap: .6rem; }
.help-owner-tools form { display: inline-flex; }
.help-owner-tools button, .help-owner-tools select { min-height: 40px; }

.help-board-wrap { border: 1px solid #e6ddc9; border-radius: .9rem; padding: .85rem; background: #fffefb; }
.help-board-wrap canvas { width: 100%; aspect-ratio: 4 / 3; touch-action: none; background: #fff; border: 1px solid #ddd3bb; border-radius: .6rem; display: block; }
.help-board-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; align-items: center; }
.help-board-toolbar button { min-height: 40px; min-width: 40px; border: 1px solid #cbbfa0; border-radius: .5rem; background: #fff; cursor: pointer; }
.help-board-toolbar button[aria-pressed="true"] { background: #2a5caa; color: #fff; border-color: #2a5caa; }
.help-color-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; outline: 1px solid #cbbfa0; padding: 0; }
.help-color-dot[aria-pressed="true"] { outline: 2px solid #2a5caa; }
.help-board-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; align-items: center; }
.help-board-caption { width: 100%; min-height: 40px; margin-top: .5rem; padding: .4rem .6rem; border: 1px solid #cbbfa0; border-radius: .5rem; }
[data-help-board-message] { font-size: .82rem; color: #2f6f4f; min-height: 1.2em; }
[data-help-board-message].is-error { color: #b23b3b; }
.help-board-actions button, .help-board-actions select { min-height: 44px; min-width: 44px; }
.help-board-fullscreen:fullscreen { background: #fffefb; padding: 1.25rem; overflow: auto; }
.help-board-fullscreen:fullscreen canvas { aspect-ratio: auto; height: 80vh; width: auto; max-width: 100%; }

.help-resonance-page { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.help-resonance-side { border: 1px solid #e6ddc9; border-radius: .9rem; padding: 1.1rem; background: #fffefb; }
.help-resonance-side h2 { margin-top: 0; font-size: 1.05rem; }
.help-resonance-side--own { border-color: #2a5caa; }

.help-answer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.help-answer { border: 1px solid #e6ddc9; border-radius: .8rem; padding: 1rem; background: #fffefb; }
.help-answer__meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: #6b6354; }
.help-answer__body { white-space: pre-wrap; line-height: 1.6; margin: .5rem 0; }
.help-answer__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.help-answer__actions button, .help-answer__actions a { min-height: 40px; }
.help-followups { margin-top: .75rem; padding: .75rem; border-left: 3px solid #cbbfa0; background: #faf7f0; border-radius: 0 .6rem .6rem 0; }
.help-form { display: flex; flex-direction: column; gap: .75rem; max-width: 640px; }
.help-form label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; }
.help-form input, .help-form textarea, .help-form select { min-height: 42px; padding: .4rem .6rem; border: 1px solid #cbbfa0; border-radius: .5rem; font: inherit; }
.help-form textarea { min-height: 120px; }
.help-inline-check { flex-direction: row !important; align-items: center; gap: .5rem !important; font-weight: 400; }

@media (max-width: 600px) {
    .help-shell { padding: .75rem .75rem 5rem; }
    .help-board-toolbar { gap: .4rem; }
    .help-board-toolbar button { min-width: 36px; }
}

@media (prefers-color-scheme: dark) {
    .help-card, .help-answer, .help-board-wrap, .help-filter, .help-empty, .help-resonance-side { background: #20201c; border-color: #3a362c; color: #ece6d8; }
    .help-badge { background: #3a362c; color: #ece6d8; }
    .help-followups { background: #262319; }
    .help-form input, .help-form textarea, .help-form select, .help-filter select, .help-filter input { background: #141310; color: #ece6d8; border-color: #4a4537; }
    .help-board-wrap canvas { background: #fff; }
    .help-board-fullscreen:fullscreen { background: #141310; }
}

/* Explicit day/night control (set on <body data-art-scheme>) takes priority over the OS preference
   above, so a future on-page toggle controls this module the same way it will control authored art. */
body[data-art-scheme="night"] .help-card, body[data-art-scheme="night"] .help-answer,
body[data-art-scheme="night"] .help-board-wrap, body[data-art-scheme="night"] .help-filter,
body[data-art-scheme="night"] .help-empty, body[data-art-scheme="night"] .help-resonance-side { background: #20201c; border-color: #3a362c; color: #ece6d8; }
body[data-art-scheme="night"] .help-badge { background: #3a362c; color: #ece6d8; }
body[data-art-scheme="night"] .help-followups { background: #262319; }
body[data-art-scheme="night"] .help-form input, body[data-art-scheme="night"] .help-form textarea,
body[data-art-scheme="night"] .help-form select, body[data-art-scheme="night"] .help-filter select,
body[data-art-scheme="night"] .help-filter input { background: #141310; color: #ece6d8; border-color: #4a4537; }
body[data-art-scheme="night"] .help-board-wrap canvas { background: #fff; }
body[data-art-scheme="day"] .help-card, body[data-art-scheme="day"] .help-answer,
body[data-art-scheme="day"] .help-board-wrap, body[data-art-scheme="day"] .help-filter,
body[data-art-scheme="day"] .help-empty, body[data-art-scheme="day"] .help-resonance-side { background: #fffdf8; border-color: #e6ddc9; color: inherit; }