/* The guides: one question per page, read top to bottom. The room and its tokens come
   from styles.css; this only sets the reading column. */

.doc { max-width: 44rem; margin-inline: auto; padding: 132px var(--gut) 0; }
.doc__kicker { margin: 0 0 18px; font: 500 13px/1 var(--mono); letter-spacing: .08em; color: var(--ws-wait); }
.doc__kicker a { text-decoration: none; }
.doc__kicker a:hover { color: var(--ws-ink); }
.doc h1 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.04; }
.doc__answer { margin: 28px 0 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ws-ink); }
.doc h2 { margin: 56px 0 18px; }
.doc p, .doc li { color: var(--ws-soft); }
.doc p { margin: 0 0 16px; }
.doc ol, .doc ul { margin: 0 0 16px; padding-left: 1.3em; display: grid; gap: 10px; }
.doc strong { color: var(--ws-ink); font-weight: 600; }
.doc code { font: 400 .88em/1 var(--mono); color: var(--sz-wait); background: var(--sz-raise); padding: 2px 6px; border-radius: 5px; }
.doc a { text-decoration-color: color-mix(in srgb, var(--ws-accent) 60%, transparent); text-underline-offset: 3px; }
.doc a:hover { color: var(--ws-accent); }

.doc__table { overflow-x: auto; margin: 0 0 16px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--ws-card-hi); color: var(--ws-soft); }
.doc th { font: 500 12px/1.3 var(--mono); letter-spacing: .06em; color: var(--ws-faint); }
.doc td:first-child { color: var(--ws-ink); }

.doc__get { margin: 56px 0 0; padding: 26px 28px; border: 1px solid var(--ws-card-hi); border-radius: 14px; background: color-mix(in srgb, var(--ws-raise) 80%, transparent); }
.doc__get p { margin: 0 0 16px; color: var(--ws-ink); }
.doc__get .dl { margin-right: 10px; }

.doc__more { margin: 56px 0 0; }
.doc__more ul { list-style: none; padding: 0; gap: 0; }
.doc__more li { border-top: 1px solid var(--ws-card-hi); }
.doc__more li:last-child { border-bottom: 1px solid var(--ws-card-hi); }
.doc__more a { display: block; padding: 14px 0; text-decoration: none; color: var(--ws-ink); }
.doc__more a:hover { color: var(--ws-accent); }
.doc h3 { margin: 26px 0 8px; font-size: 18px; font-weight: 600; color: var(--ws-ink); }