/* the guy - /philosophy
   inherits every token, button, header and footer rule from ../styles.css.
   this file only adds what a long-form document needs that a landing page
   does not: a reading measure, a contents block, the tenet grids, and the
   role switch.
   ------------------------------------------------------------------------ */

/* document shell ---------------------------------------------------------- */
.doc { padding: var(--section-y) 0; }

.doc-body { max-width: 780px; }

/* a document reads at a fixed measure. mono runs wide, so this sits nearer
   60ch than the 75ch you would allow a sans face. */
.doc-section p,
.doc-standfirst { max-width: 62ch; }

.doc-head { margin-bottom: var(--stack-l); }

.doc-h1 {
    font-size: var(--fs-3xl);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--stack-m);
}

.doc-standfirst {
    font-size: var(--fs-m);
    line-height: 1.7;
    color: var(--gray);
}

.doc-section {
    padding-top: var(--stack-l);
    margin-top: var(--stack-l);
    border-top: 1px solid var(--border);
    scroll-margin-top: calc(var(--header-h) + 24px);
}

.doc-h2 {
    font-size: var(--fs-xl);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: var(--stack-s);
}

.doc-section p { margin-bottom: 1.35em; line-height: 1.8; font-size: var(--fs-m); }
.doc-section p:last-child { margin-bottom: 0; }

.lead-in { color: var(--gray); }

.doc-kicker {
    font-weight: 700;
    font-size: var(--fs-l);
    line-height: 1.4;
    color: var(--green);
    margin: var(--stack-m) 0 0;
    max-width: 32ch;
}

.doc-close {
    font-weight: 700;
    font-size: var(--fs-l);
    line-height: 1.5;
    margin: var(--stack-l) 0 var(--stack-m);
}

.doc-close .green { color: var(--green); }

/* contents ---------------------------------------------------------------- */
.toc {
    border: 1px solid var(--border);
    padding: 20px 22px;
}

.toc-label {
    font-size: var(--fs-2xs);
    letter-spacing: 0.1em;
    color: var(--gray);
    margin-bottom: 12px;
}

.toc-list { list-style: none; counter-reset: toc; }

.toc-list li { counter-increment: toc; padding: 5px 0; }

.toc-list li::before {
    content: counter(toc, decimal-leading-zero) "  ";
    color: rgba(57, 255, 20, 0.4);
    font-size: var(--fs-2xs);
}

.toc-list a {
    font-size: var(--fs-xs);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 150ms ease;
}

.toc-list a:hover { border-bottom-color: var(--green); }

/* trait -> reading, from "the truth" -------------------------------------- */
.invert-list { list-style: none; margin: var(--stack-m) 0; }

.invert-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "in arrow" "out out";
    gap: 4px 12px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-xs);
}

.invert-list li:last-child { border-bottom: 0; }

.invert-in { grid-area: in; color: var(--white); }
.invert-arrow { grid-area: arrow; color: rgba(57, 255, 20, 0.45); }
.invert-out { grid-area: out; color: var(--red-dim); }

@media (min-width: 700px) {
    .invert-list li {
        grid-template-columns: 22ch auto 1fr;
        grid-template-areas: "in arrow out";
        gap: 16px;
    }
}

/* tenet grids: what this is not / what we stand for ------------------------ */
.tenet-grid {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: var(--stack-m) 0;
}

@media (min-width: 620px) {
    .tenet-grid { grid-template-columns: 1fr 1fr; }
}

.tenet-grid li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--border);
    padding: 14px 16px;
    font-size: var(--fs-xs);
    line-height: 1.55;
}

.tenet-mark { flex: 0 0 auto; font-weight: 700; }

.tenet-against li { border-color: rgba(255, 107, 107, 0.28); }
.tenet-against .tenet-mark { color: var(--red); }

.tenet-for .tenet-mark { color: var(--green); }

/* the last stand-for line is a sentence, not a label, so it spans */
@media (min-width: 620px) {
    .tenet-for li:last-child { grid-column: 1 / -1; }
}

/* plain declaration lists -------------------------------------------------- */
.fix-list, .reason-list { list-style: none; margin: var(--stack-m) 0; }

.fix-list li, .reason-list li {
    padding: 9px 0 9px 22px;
    position: relative;
    font-size: var(--fs-xs);
    line-height: 1.6;
    max-width: 60ch;
}

.fix-list li::before, .reason-list li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: rgba(57, 255, 20, 0.5);
}

.reason-list b { color: var(--green); font-weight: 500; }

/* THE SIGNATURE: the role switch -----------------------------------------
   the claim is that the same person scores differently depending on which
   role he is standing in. so the reader changes role and watches a column of
   ticks become a column of crosses. built on radio inputs and :checked, so
   there is no javascript, it survives scripting being off, and both panels
   stay in the dom where a crawler can read them.
   ----------------------------------------------------------------------- */
.switch {
    border: 1px solid var(--border);
    margin: var(--stack-m) 0;
}

.switch-bar { display: flex; border-bottom: 1px solid var(--border); }

.switch-tab {
    flex: 1 1 50%;
    text-align: center;
    padding: 14px 12px;
    font-size: var(--fs-2xs);
    letter-spacing: 0.02em;
    color: var(--gray);
    cursor: pointer;
    user-select: none;
    transition: color 150ms linear, background 150ms linear;
}

.switch-tab:first-of-type { border-right: 1px solid var(--border); }

.switch-tab:hover { color: var(--white); }

#role-her:checked ~ .switch-bar label[for="role-her"],
#role-you:checked ~ .switch-bar label[for="role-you"] {
    background: var(--green);
    color: var(--black);
    font-weight: 700;
}

/* focus lands on the visually hidden radio, so mirror the ring onto its label */
.switch-input:focus-visible ~ .switch-bar label[for="role-her"] { outline: 2px solid var(--green); outline-offset: -2px; }
#role-you.switch-input:focus-visible ~ .switch-bar label[for="role-her"] { outline: 0; }
#role-you.switch-input:focus-visible ~ .switch-bar label[for="role-you"] { outline: 2px solid var(--green); outline-offset: -2px; }

.switch-panels { padding: 22px 20px; }
.switch-panel { display: none; }

#role-her:checked ~ .switch-panels .panel-her,
#role-you:checked ~ .switch-panels .panel-you { display: block; }

.verdicts { list-style: none; }

.verdicts li {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "trait mark" "read mark";
    gap: 2px 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-xs);
}

.verdicts li:last-child { border-bottom: 0; }

.v-trait { grid-area: trait; color: var(--white); }
.v-eq { display: none; }
.v-read { grid-area: read; }
.v-mark { grid-area: mark; font-weight: 700; font-size: var(--fs-s); }

.v-good { color: var(--green); }
.v-bad { color: var(--red); }

@media (min-width: 620px) {
    .verdicts li {
        grid-template-columns: 20ch auto 1fr auto;
        grid-template-areas: "trait eq read mark";
        gap: 14px;
    }
    .v-eq { display: block; grid-area: eq; color: var(--gray); }
}

.switch-note {
    margin-top: 18px;
    font-size: var(--fs-2xs);
    letter-spacing: 0.02em;
    color: var(--gray);
}

/* the switch is the one animated thing here, and even it only crossfades */
@media (prefers-reduced-motion: reduce) {
    .switch-tab { transition: none; }
}

/* closing CTA ----------------------------------------------------------------
   the shared .section-cta centres itself, which is right on the homepage and
   wrong here: this is a left-aligned document, so a centred button floated
   between the last line and the trust note, anchored to nothing. align it to
   the measure and tuck the trust line under it.
   ---------------------------------------------------------------------------- */
.doc-section .section-cta {
    text-align: left;
    margin-top: var(--stack-l);
}

.doc-section .trust {
    margin-top: 14px;
}