/* help · the mock-up's own <style> (platform/rethink/mockups/help.html), copied unchanged
 * between the two marker lines and scoped to this page with :where(), which adds no specificity.
 * scripts/test-kit.mjs checks the copy against the mock-up. */
:where(.stage[data-page="help"]){
/* ---- mock-up style begins ---- */
/* Help, Terms and Privacy share one shape (help.html, terms.html, privacy.html): reachable signed out, so the logo-only
 * top bar (as guest-join.html); a back link that names where it goes; reading in the middle, contents and contact at the side. */
.app.guest .ptabs,.app.guest .kav-wrap{display:none!important}
.app.guest #tb .brand{cursor:default}
.app.guest.phone .goldline{display:block}
.app.guest.phone #tb{display:flex;height:56px;padding:0 20px}
.app.guest.phone #tb .brand b{font-size:20px}

.app:not(.phone) .page{padding:40px 48px 64px;gap:24px}
.head,.grid{width:100%;max-width:1100px}
.head .ch-t>.t-small{font-size:16px;line-height:1.55;color:var(--body);max-width:56ch}
.grid{grid-template-columns:minmax(0,1fr) 300px}

/* questions and answers, or a short lead and its sentences: one hairline between them, prose kept short */
.qa{list-style:none;margin:0;padding:0 24px 10px}
.qa li{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-top:1px solid var(--line)}
.qa li:first-child{border-top:0;padding-top:2px}
.qa .q{font:500 16px/1.4 var(--font-sans);color:var(--navy);margin:0}
.qa p{font-size:15.5px;line-height:1.65;color:var(--body);max-width:60ch;text-wrap:pretty}
.qa p b{font-weight:500;color:var(--navy)}
.qa p a{color:var(--navy);text-underline-offset:3px;text-decoration-color:rgba(10,34,68,.35)}
/* money and dates read like a receipt: figures in navy */
.qa .fig{color:var(--navy);font-weight:500;font-variant-numeric:tabular-nums}

/* contents: one row per section, the way back to the top of each */
.toc{list-style:none;margin:0;padding:0 12px 10px}
.toc a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:var(--radius-tone);font-size:15px;color:var(--navy);text-decoration:none}
.toc a .chev{margin-left:auto;width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.toc a:hover{background:var(--hover-wash)}.toc a:hover .chev{transform:translateX(var(--nudge))}}
.also{display:flex;flex-wrap:wrap;gap:4px 18px;padding:4px 24px 14px;border-top:1px solid var(--line)}
.also a{min-height:44px;display:inline-flex;align-items:center;font-size:14px;color:var(--slate);text-decoration:underline;text-decoration-color:rgba(10,34,68,.22);text-underline-offset:4px}
@media (hover:hover) and (pointer:fine){.also a:hover{color:var(--navy);text-decoration-color:var(--navy)}}
.quietcard{padding:16px 18px 16px 24px;display:flex;flex-direction:column;gap:4px}
.quietcard b{font-weight:500;font-size:15px;color:var(--navy)}
.quietcard span{font-size:14px;line-height:1.5;color:var(--slate)}
.quietcard a,.qa p a{color:var(--navy);text-underline-offset:3px;text-decoration-color:rgba(10,34,68,.35);padding:12px 0;margin:-12px 0} /* a link in a sentence: a 44px press area without moving the line */
.side .floor .btn{width:100%}
/* computer: the side column stays in view while the reading scrolls (overflow clip keeps the frame's corners without stopping sticky) */
.app.guest:not(.phone){overflow:clip}
.app:not(.phone) .side{position:sticky;top:24px}
/* phone and narrow: a short contents list first (Help), and the other two documents at the end */
.toc-mini,.also-end{display:none}
.toc-mini{flex-wrap:wrap;gap:0 16px;padding:0 4px}
.toc-mini a{min-height:44px;display:inline-flex;align-items:center;font-size:15px;color:var(--navy);text-underline-offset:4px;text-decoration-color:rgba(10,34,68,.35)}
.also-end{flex-wrap:wrap;gap:4px 18px;padding:0 4px}
.also-end a{min-height:44px;display:inline-flex;align-items:center;font-size:14px;color:var(--slate);text-decoration:underline;text-decoration-color:rgba(10,34,68,.22);text-underline-offset:4px}
.app.phone .toc-mini,.app.phone .also-end{display:flex}

/* mock-up only: the "new wording" moment tints every new sentence for the owner's wording sheet (data-w="new");
 * a fact the build must confirm (data-check) gets a dotted line. In the app these attributes do nothing.
 * Wording the owner is still confirming (data-w="confirm", 7 Oct) carries a small tag in every moment. */
[data-w="confirm"]{text-decoration:underline dotted var(--gold-deep);text-decoration-thickness:1.5px;text-underline-offset:4px}
[data-w="confirm"]::after{content:'owner to confirm';display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--gold-wash);color:var(--gold-deep);font:500 11.5px/1.7 var(--font-sans);letter-spacing:.02em;vertical-align:1px;white-space:nowrap;text-decoration:none}
.marks [data-w="new"]{background:var(--gold-wash);border-radius:3px;box-shadow:0 0 0 2px var(--gold-wash);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.marks [data-check]{text-decoration:underline dotted var(--gold-deep);text-decoration-thickness:1.5px;text-underline-offset:4px}

/* phone: one column; the side's contents are dropped (Help has its short list at the top), contact comes last */
.app.phone .page{padding:20px 20px 32px}
.app.phone .toc-card{display:none}
.app.phone .qa{padding:0 20px 8px}
@media (max-width:860px){.app:not(.phone) .page{padding:24px 16px 40px}.app:not(.phone) .grid{grid-template-columns:minmax(0,1fr)}.app:not(.phone) .toc-card{display:none}.app:not(.phone) .side{position:static}.app:not(.phone) .toc-mini,.app:not(.phone) .also-end{display:flex}}
/* ---- mock-up style ends ---- */
}