/* Reading pages: legal notices, governance, regulation guides, about. */

/* Same field as the demo and survey pages. */
.page-content { --content-page: #f7f7f8; background: var(--content-page); }
html[data-theme="dark"] .page-content { --content-page: var(--revc-canvas); }
.page-content .header { background: var(--content-page); }

.content-main { padding-block: clamp(48px, 8vw, 96px) var(--site-section-y); }

.content-intro { max-width: 72ch; margin-bottom: clamp(32px, 5vw, 56px); }
.content-intro .h2 { margin-block: 12px 16px; }
.content-meta { margin-top: 16px; font-size: 14px; color: var(--truo-slate); }

.content-body { max-width: var(--site-reading); color: var(--truo-color-text, var(--truo-ink)); line-height: 1.65; }
.content-body > * + * { margin-top: 1em; }
.content-body h2 { margin-top: 2.2em; font-size: var(--site-text-h4); line-height: 1.25; font-weight: 650; letter-spacing: -0.015em; }
.content-body h3 { margin-top: 1.6em; font-size: 17px; font-weight: 650; }
.content-body p, .content-body li { color: var(--truo-slate); text-wrap: pretty; }
.content-body ul, .content-body ol { padding-left: 1.25em; }
.content-body li + li { margin-top: 0.4em; }
.content-body a { color: var(--truo-blue); text-decoration: underline; text-underline-offset: 2px; }
html[data-theme="dark"] .content-body a { color: var(--theme-accent); }
.content-body strong { color: var(--truo-color-text, var(--truo-ink)); }

/* The one-sentence answer under each question, written to be quoted on its own. */
.content-body .answer { padding: 14px 16px; border-left: 3px solid var(--truo-blue); background: var(--truo-blue-tint); color: var(--truo-color-text, var(--truo-ink)); border-radius: 0 6px 6px 0; }

.content-body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.content-body th, .content-body td { padding: 10px 12px; border-bottom: 1px solid var(--truo-line); text-align: left; vertical-align: top; }
.content-body th { font-weight: 600; color: var(--truo-color-text, var(--truo-ink)); }
.table-scroll { overflow-x: auto; }

.status { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 13px; font-weight: 600; }
.status--live { background: var(--truo-clearance-tint); color: var(--truo-clearance-dark); }
.status--soon { background: var(--truo-warning-tint); color: var(--truo-warning); }

.guide-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); max-width: none; }
.guide-card { display: block; padding: 20px; border: 1px solid var(--truo-line); border-radius: 10px; text-decoration: none !important; color: inherit !important; }
.guide-card:hover { border-color: var(--truo-blue); }
.guide-card h3 { margin: 10px 0 6px; font-size: 18px; color: var(--truo-color-text, var(--truo-ink)); }
.guide-card p { margin: 0; font-size: 15px; }

.content-cta { margin-top: 3em; padding: 24px; border: 1px solid var(--truo-line); border-radius: 10px; }
.content-cta .btn { margin-top: 12px; text-decoration: none; color: #fff; }

/* Regulation explainers: pale-blue cards with a brand-blue level slider. */
.explainers { display: grid; gap: 16px; max-width: none; }
.explainer { --ex-accent: var(--truo-blue); padding: 24px; background: var(--truo-blue-tint); border-radius: 12px; }
html[data-theme="dark"] .explainer { --ex-accent: var(--theme-accent); }
.explainer > * + * { margin-top: 14px; }
.explainer__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.content-body .explainer__head h3 { margin: 0; font-size: 19px; }
.explainer__level { margin-bottom: 0; color: var(--truo-color-text, var(--truo-ink)); }
.content-body .explainer__level strong { color: var(--ex-accent); }
.explainer__more { display: inline-block; font-size: 15px; font-weight: 600; }

html:not(.js) .explainer__control { display: none; }
.explainer input[type="range"] {
  --fill: 0%;
  width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.explainer input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--ex-accent) var(--fill), var(--truo-line) var(--fill)); }
.explainer input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: var(--truo-line); }
.explainer input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--ex-accent); }
.explainer input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 3px solid var(--truo-color-surface, #fff); border-radius: 50%; background: var(--ex-accent); box-shadow: 0 1px 3px rgb(0 0 0 / 25%); }
.explainer input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid var(--truo-color-surface, #fff); border-radius: 50%; background: var(--ex-accent); }
.explainer input[type="range"]:focus-visible { outline: 2px solid var(--ex-accent); outline-offset: 4px; border-radius: 6px; }
.explainer__scale { display: flex; justify-content: space-between; margin-top: 6px; }
.explainer__scale button { padding: 2px 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--truo-slate); background: none; border: 0; cursor: pointer; }
.explainer__scale button.is-active { color: var(--ex-accent); }