/* The Help Centre (/help, /help/<category>, /help/<category>/<slug>, /help/search).
   Server-rendered by src/utils/help-renderer.js. Scoped: every class is hc-, no Tailwind, nothing here
   reaches another page. The pages opt into the shared theme (data-restyle, page "help-centre", light by
   default) and load /rm-theme.css first; every colour is a --rm-* token, so the dark theme follows.
   Article bodies are Proform's HTML (some with inline styles) and the admin editor's: the hc-body rules
   only set a readable default. */
.hc { margin: 0; font-size: 16px; line-height: 1.6; background: var(--rm-page); color: var(--rm-text); }
.hc-main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; box-sizing: border-box; }
.hc-main a { color: var(--rm-action); font-weight: 600; text-decoration: none; }
.hc-main a:hover { text-decoration: underline; }
.hc-crumbs { font-size: 13px; color: var(--rm-text-dim); }
.hc-main .hc-crumbs a { color: var(--rm-text-dim); font-weight: 500; }
.hc h1 { margin: 6px 0 14px; font-size: 30px; line-height: 1.2; font-weight: 800; color: var(--rm-text); }
.hc h2 { margin: 0 0 10px; font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--rm-text); }
.hc-intro { margin: 0 0 14px; color: var(--rm-text-dim); }
.hc-empty { color: var(--rm-text-dim); margin: 0; }
.hc-meta { font-size: 13px; color: var(--rm-text-dim); margin: 0 0 12px; }
.hc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* search */
.hc-search { display: flex; gap: 8px; margin: 0 0 18px; max-width: 640px; }
.hc-search input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 9px 12px; border: 1px solid var(--rm-ctl-line); border-radius: 8px; background: var(--rm-field); color: var(--rm-text); }
.hc-search button { font: inherit; font-weight: 700; font-size: 14px; padding: 9px 16px; border: 0; border-radius: 8px; background: var(--rm-sel-bg); color: var(--rm-sel-text); cursor: pointer; }

/* the /help index */
.hc-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.hc-sec { background: var(--rm-surface); border-radius: 10px; box-shadow: var(--rm-shadow); padding: 18px; min-width: 0; }
.hc-cats { list-style: none; margin: 0; padding: 0; }
.hc-cats li + li { border-top: 1px solid var(--rm-line); }
.hc-cats a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
.hc-count { color: var(--rm-text-dim); font-weight: 500; font-size: 13px; white-space: nowrap; }

/* two columns: sections on the left, content on the right */
.hc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.hc-side { background: var(--rm-surface); border-radius: 10px; box-shadow: var(--rm-shadow); padding: 14px 16px; font-size: 14px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.hc-side-sec + .hc-side-sec { margin-top: 12px; }
.hc-side-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--rm-text-dim); margin-bottom: 4px; }
.hc-side ul { list-style: none; margin: 0; padding: 0; }
.hc-side li a { display: block; padding: 3px 0; font-weight: 500; }
.hc-side a.hc-on { font-weight: 800; color: var(--rm-text); }
.hc-content { background: var(--rm-surface); border-radius: 10px; box-shadow: var(--rm-shadow); padding: 20px 24px; min-width: 0; }

/* a category's list */
.hc-list { list-style: none; margin: 0; padding: 0; }
.hc-list li + li { border-top: 1px solid var(--rm-line); }
.hc-list a { display: block; padding: 12px 0; }
.hc-list-title { display: block; font-size: 17px; font-weight: 700; }
.hc-list-sum { display: block; font-weight: 400; font-size: 14px; color: var(--rm-text-dim); margin-top: 2px; }
.hc-tag { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 9px; background: var(--rm-pill-teal-bg); color: var(--rm-text); border: 1px solid var(--rm-pill-teal-line); }

/* an article */
.hc-body { overflow-wrap: anywhere; }
.hc-body img { max-width: 100%; height: auto; border-radius: 6px; }
.hc-body table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; }
.hc-body td, .hc-body th { border: 1px solid var(--rm-line); padding: 6px 10px; text-align: left; vertical-align: top; }
.hc-body h2 { margin-top: 22px; }
.hc-body h3 { margin: 18px 0 8px; font-size: 16px; }
.hc-body p, .hc-body ul, .hc-body ol { margin: 0 0 12px; }
.hc-video { position: relative; width: 100%; padding-bottom: 56.25%; margin: 20px 0 6px; border-radius: 8px; overflow: hidden; background: var(--rm-recess); }
.hc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hc-more { margin-top: 24px; padding-top: 16px; border-top: 2px solid var(--rm-line); }
.hc-more ul { margin: 0; padding-left: 18px; columns: 2; column-gap: 24px; }
.hc-more li { margin: 3px 0; break-inside: avoid; }

/* the footer sits on the teal band, as the other public pages' do */
.hc-foot { background: var(--rm-band); color: var(--rm-on-band-dim); }
.hc-foot-inner { max-width: 1200px; margin: 0 auto; padding: 20px 16px; box-sizing: border-box; text-align: center; font-size: 13px; }
.hc-foot a { color: var(--rm-on-band); text-decoration: none; }

@media (max-width: 860px) {
    .hc-layout { grid-template-columns: minmax(0, 1fr); }
    .hc-side { position: static; max-height: none; order: 2; }
    .hc-content { padding: 16px; }
    .hc-more ul { columns: 1; }
    .hc h1 { font-size: 24px; }
}

/* the course pages: the block under each racecourse profile and /racecourses (services/help-course-core.js) */
.hc-course { margin-top: 28px; padding-top: 18px; border-top: 2px solid var(--rm-line); }
.hc-course h2 { margin: 0 0 6px; }
.hc-course h3 { margin: 20px 0 8px; font-size: 16px; font-weight: 700; color: var(--rm-text); }
.hc-note { font-size: 13px; color: var(--rm-text-dim); margin: 0 0 10px; }
.hc-tscroll { overflow-x: auto; max-width: 100%; }
.hc-ctab { border-collapse: collapse; width: 100%; font-size: 14px; }
.hc-ctab th, .hc-ctab td { border-bottom: 1px solid var(--rm-line); padding: 6px 10px; text-align: left; vertical-align: top; white-space: nowrap; }
.hc-ctab thead th { font-size: 12px; font-weight: 700; color: var(--rm-text-dim); border-bottom: 2px solid var(--rm-th-rule); }
.hc-ctab tbody tr:nth-child(even) { background: var(--rm-zebra); }
.hc-ctab tbody th { font-weight: 700; color: var(--rm-text); }
.hc-ctab .hc-n { text-align: right; font-variant-numeric: tabular-nums; }
.hc-ctab td.hc-up { background: var(--rm-tint-good); color: var(--rm-tint-text); font-weight: 700; }
.hc-ctab td.hc-down { background: var(--rm-tint-poor); color: var(--rm-tint-text); }
.hc-of { color: var(--rm-text-dim); font-weight: 400; font-size: 12px; }
.hc-races { list-style: none; margin: 0; padding: 0; }
.hc-races li { padding: 6px 0; border-bottom: 1px solid var(--rm-line); }
.hc-rtime { display: inline-block; min-width: 44px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hc-rname { color: var(--rm-text); }
.hc-cindex-wrap { display: grid; gap: 16px; }
.hc-cindex-wrap > .hc-intro { margin: 0; }
.hc-cindex h2 { margin-bottom: 8px; }
.hc-cindex .hc-ctab { table-layout: fixed; }
.hc-cindex .hc-ctab th:nth-child(1) { width: 30%; }
.hc-cindex .hc-ctab th:nth-child(2) { width: 22%; }
.hc-cindex .hc-ctab th:nth-child(3) { width: 26%; }
.hc-cindex .hc-ctab td, .hc-cindex .hc-ctab th { white-space: normal; }

/* the website guide's articles (stage 3): plain headings and the "Who can use it" line */
.hc-body h4 { margin: 16px 0 6px; font-size: 15px; font-weight: 700; color: var(--rm-text); }
.hc-body .hc-plan { display: inline-block; margin: 0 0 14px; padding: 4px 10px; border-radius: 8px; font-size: 13px; background: var(--rm-info-bg); border: 1px solid var(--rm-info-line); color: var(--rm-text); }
.hc-body code { font-size: 13px; padding: 1px 4px; border-radius: 4px; background: var(--rm-recess); }
.hc-body pre { overflow-x: auto; padding: 10px; border-radius: 6px; background: var(--rm-recess); font-size: 13px; }
.hc-qa ul { columns: 1; }
/* "break anywhere" lets a table squeeze a column to one letter; table cells wrap at words (the table scrolls instead) */
.hc-body table, .hc-body td, .hc-body th { overflow-wrap: break-word; word-break: normal; }
.hc-body td:first-child, .hc-body th:first-child { white-space: nowrap; }