/* PICKDOME — shared styles for the plain-language pages (TV setup, FAQ).
   ---------------------------------------------------------------------------
   These pages load styles.css for the shell (nav, footer, tokens, wordmark),
   and styles.css styles GENERIC class names — .steps and .check are gradient
   badged flex cards on the landing page. So every class here is prefixed doc-
   and scoped under .docpage, and the reset block below puts lists back to plain
   list behaviour. Without it, a future edit to the landing page turns these
   manuals into confetti. That already happened once.
   Kept at the site root on purpose: /assets/* is served immutable for a year,
   so a file there can't be edited without a cache-busting rename.
   --------------------------------------------------------------------------- */

.docpage ol, .docpage ul { display: block; list-style-position: outside; }
.docpage li { display: list-item; background: none; border: 0; padding: 0; margin: 0; }
.docpage li::before { content: none; }
.docpage li b, .docpage p b, .docpage dd b {
  background: none; -webkit-text-fill-color: currentColor;
  color: #fff; font-weight: 700; padding: 0; border-radius: 0;
}

/* one readable column, generous rhythm */
.docpage { max-width: 860px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 40px) 90px; overflow-wrap: break-word; }
.doc-head { padding: clamp(40px, 8vw, 92px) 0 30px; }
.doc-head h1 { font-size: clamp(34px, 7.5vw, 78px); letter-spacing: -.015em; }
.doc-lede { font-size: clamp(16px, 2.2vw, 21px); color: #cfd6de; max-width: 62ch; margin-top: 18px; line-height: 1.55; }
.docpage h2 { font-size: clamp(24px, 4vw, 38px); margin: 52px 0 14px; }
.docpage h3 { font-size: clamp(18px, 2.6vw, 24px); margin: 28px 0 10px; color: #fff; }
.docpage p, .docpage li { color: #b9c2cc; line-height: 1.65; font-size: 16px; }
.docpage p { margin: 12px 0; max-width: 68ch; }
.docpage a { color: var(--pd-gold); }

.doc-key { border: 1px solid var(--pd-line); background: var(--pd-surface);
           border-radius: var(--pd-radius-lg); padding: clamp(20px, 4vw, 28px); margin: 28px 0 10px; }
.doc-key p { margin: 0; color: #dfe5ec; font-size: clamp(15px, 2vw, 17px); max-width: none; }
.doc-key p + p { margin-top: 12px; }

/* ranked routes — the number carries the ranking, so it isn't decoration */
.doc-route { border-top: 1px solid var(--pd-line); padding: 24px 0 6px; }
.doc-route-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.doc-route-n { font-family: var(--pd-display); font-weight: 900; font-size: 30px; line-height: 1; color: var(--pd-gold); }
.doc-route-top h3 { margin: 0; flex: 1 1 auto; }
.doc-tag { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
           border: 1px solid var(--pd-line); border-radius: 999px; padding: 4px 11px;
           color: var(--pd-muted); white-space: nowrap; }
.doc-tag.best { color: var(--pd-ink); background: var(--pd-good); border-color: transparent; }
.doc-tag.ok { color: var(--pd-ink); background: var(--pd-warn); border-color: transparent; }

.doc-steps { margin: 14px 0 4px; padding-left: 24px; }
.doc-steps li { margin: 10px 0; padding-left: 4px; }
.docpage kbd { font-family: ui-monospace, Menlo, monospace; font-size: 13px; background: #1b232c;
               border: 1px solid var(--pd-line); border-bottom-width: 2px; border-radius: 6px;
               padding: 2px 7px; color: #fff; white-space: nowrap; display: inline-block; }
.doc-path { color: #fff; font-weight: 700; }

/* a card per question / per symptom — the question is the heading, because the
   question is what the reader arrives holding */
.doc-card { border: 1px solid var(--pd-line); border-radius: var(--pd-radius);
            background: var(--pd-surface); padding: clamp(16px, 3vw, 22px); margin: 14px 0; }
.doc-card h3 { font-family: var(--pd-display); font-weight: 900; font-size: clamp(18px, 2.6vw, 21px);
               color: #fff; margin: 0 0 8px; letter-spacing: .01em; line-height: 1.15; }
.doc-card p { margin: 8px 0; max-width: none; }
.doc-card p:last-child { margin-bottom: 0; }

.doc-check { list-style: none; padding: 0; margin: 18px 0; }
.doc-check li { position: relative; padding: 0 0 11px 28px; margin: 11px 0;
                border-bottom: 1px dashed var(--pd-line); }
.doc-check li::before { content: "☐"; position: absolute; left: 0; top: -1px;
                        color: var(--pd-gold); font-size: 19px; }

/* jump links at the top of a long page */
ul.doc-jump { display: flex; flex-wrap: wrap; gap: 9px; margin: 26px 0 8px; padding: 0; list-style: none; }
ul.doc-jump li { margin: 0; }
.doc-jump a { display: inline-block; font-size: 13px; font-weight: 700; text-decoration: none;
              border: 1px solid var(--pd-line); border-radius: 999px; padding: 7px 14px; color: #cfd6de; }
.doc-jump a:hover { border-color: var(--pd-gold); color: var(--pd-gold); }

.doc-back { display: inline-block; margin-top: 42px; font-size: 14px; font-weight: 700; }
.foot p a { color: var(--pd-gold); text-decoration: none; font-weight: 700; }
.foot p a:hover { text-decoration: underline; }