/* ============================================================
   Goals cluster: one page a parent reads with the IEP open.

   litPath.css (generated from the homepage) supplies the tokens, the two
   typefaces, the `.btn`, the focus ring and the `.rv` reveals. This sheet adds
   only what this page needs: the chrome, one reading column on paper, the
   weak/strong pair, the notes under it, and the one ask. Everything is scoped
   to `.lp.gc`.

   Held to social-ops/content/seo-visual-brief.md:
     near-white paper, warm cards, Newsreader headings with one italic teal em,
     Geist text, no kickers, no uppercase tracked labels, no decorative rules,
     no stat tiles, one primary teal button. Composed at 375 first.
   ============================================================ */

.lp.gc {
    background: var(--paper);
    overflow-x: clip;
    /* The dashboard's meta face, defined the way dashboard.css defines it. It
       is used for two things only: the regulation's citation and the rule line
       under each pair. Sentence case, no tracking: a citation, not a label. */
    --gc-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
}

.gc-skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 200;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font: 700 15px/1 var(--sans);
    text-decoration: none;
    transition: top .2s var(--ease);
}

.gc-skip:focus-visible {
    top: 12px;
}

/* ---------- chrome: the app's nav, the homepage's footer ---------- */

.gc-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: blur(14px);
}

.gc-nav__in {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.lp.gc .gc-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--ink);
    font: 600 16.5px/1 var(--serif);
    letter-spacing: -0.01em;
    text-decoration: none;
}

.gc-brand__name {
    white-space: nowrap;
}

.gc-brand__mark {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--brand-tint);
    color: var(--brand);
}

.gc-brand__mark svg {
    width: 17px;
    height: 17px;
}

/* The page underlines its links; the two buttons are not links. */
.lp.gc .gc-nav__btn,
.lp.gc .gc-skip {
    text-decoration: none;
}

.lp.gc .gc-nav__btn {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 0 14px;
    min-height: 40px;
    font-size: 14px;
    color: var(--ink);
    white-space: nowrap;
    background: var(--paper);
}

.lp.gc .gc-nav__btn:hover {
    color: var(--ink);
    background: var(--card);
}

@media (min-width: 560px) {
    .lp.gc .gc-brand {
        gap: 10px;
        font-size: 19px;
    }

    .gc-brand__mark {
        width: 36px;
        height: 36px;
    }

    .gc-brand__mark svg {
        width: 18px;
        height: 18px;
    }

    .lp.gc .gc-nav__btn {
        padding: 0 18px;
        min-height: 44px;
        font-size: 15px;
    }
}

@media (min-width: 860px) {
    .gc-nav__in {
        width: min(1200px, calc(100% - 48px));
        height: 72px;
    }

    .lp.gc .gc-brand {
        font-size: 22px;
        gap: 12px;
    }

    .gc-brand__mark {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .gc-brand__mark svg {
        width: 20px;
        height: 20px;
    }

    .lp.gc .gc-nav__btn {
        padding: 0 22px;
        min-height: 48px;
        font-size: 16px;
    }
}

.gc-foot {
    margin-top: 72px;
    padding: 34px 0 44px;
    background: var(--paper-2);
}

.gc-foot__in {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    display: grid;
    gap: 16px;
    font-size: 14px;
    color: var(--muted);
}

.gc-foot__in ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp.gc .gc-foot__in a {
    color: var(--ink-2);
    text-decoration: none;
}

.lp.gc .gc-foot__in a:hover {
    color: var(--brand-2);
    text-decoration: underline;
}

@media (min-width: 860px) {
    .gc-foot {
        margin-top: 96px;
    }

    .gc-foot__in {
        width: min(1200px, calc(100% - 48px));
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 24px;
    }

    .gc-foot__in ul {
        justify-content: flex-end;
    }
}

/* ---------- the reading column ---------- */

/* The column sits in the same container as the nav and the footer and is
   left-aligned inside it, so the headline starts where the brand starts —
   the way the dashboard and the homepage set their copy. */
.gc-main {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    padding: 26px 0 0;
}

.gc-main > * {
    max-width: 720px;
}

@media (min-width: 860px) {
    .gc-main {
        width: min(1040px, calc(100% - 48px));
        padding: 44px 0 0;
    }

    .gc-main > * {
        max-width: 820px;
    }
}

.lp.gc h1,
.lp.gc h2,
.lp.gc h3 {
    color: var(--ink);
}

.lp.gc h1 {
    font-size: clamp(32px, 4.6vw, 52px);
    line-height: 1.04;
}

/* The homepage and the dashboard both set the emphasized phrase on its own
   line; the guide's headline reads the same way. */
.lp.gc h1 em {
    display: block;
}

.lp.gc h2 {
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1.1;
}

.lp.gc h3 {
    font-size: clamp(20px, 2.1vw, 25px);
    line-height: 1.18;
}

.lp.gc p {
    margin: 0;
}

.lp.gc a {
    color: var(--brand-2);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.lp.gc a:hover {
    color: var(--ink);
}

/* ---------- breadcrumb ---------- */

.gc-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
    margin: 0 0 22px;
    font-size: 14px;
    color: var(--faint);
}

.lp.gc .gc-crumbs a {
    color: var(--muted);
    text-decoration: none;
}

.lp.gc .gc-crumbs a:hover {
    color: var(--brand-2);
    text-decoration: underline;
}

/* ---------- the head: the answer, and the torch in the empty column ---------- */

/* Below 1100px the reading measure fills the page and the torch is not there.
   Above it, the column the measure leaves empty carries the homepage's dithered
   torch cut-out — the one vignette this page is allowed. */
/* litPath.css sets `.lp img { display: block }`, which outranks a bare class,
   so the hide has to carry the root class or the vignette shows on a phone and
   eats the fold. */
.lp.gc .gc-head__torch {
    display: none;
}

@media (min-width: 1100px) {
    .gc-main > .gc-head {
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 820px) minmax(0, 1fr);
        align-items: start;
        -moz-column-gap: 40px;
             column-gap: 40px;
    }

    .gc-head__copy {
        min-width: 0;
    }

    .lp.gc .gc-head__torch {
        display: block;
        justify-self: center;
        width: min(100%, 190px);
        margin-top: 6px;
        image-rendering: pixelated;
        mix-blend-mode: multiply;
        opacity: .85;
        pointer-events: none;
    }
}

/* ---------- the answer ---------- */

.gc-answer {
    margin-top: 20px !important;
    font-size: clamp(18px, 1.6vw, 21px);
    font-weight: 500;
    line-height: 1.55;
    color: var(--ink-2);
}

.gc-byline {
    margin-top: 18px !important;
    font-size: 13.5px;
    color: var(--faint);
}

/* ---------- blocks ---------- */

.gc-block {
    padding-top: 46px;
}

.gc-block > h2 {
    margin-bottom: 16px;
}

@media (min-width: 860px) {
    .gc-block {
        padding-top: 60px;
    }

    .gc-block > h2 {
        margin-bottom: 20px;
    }
}

/* ---------- is this your goal? ---------- */

.gc-quote {
    margin: 0;
    padding: 18px 20px;
    background: var(--card);
    border-radius: 14px;
}

.gc-quote p {
    font: 500 italic clamp(17px, 1.5vw, 20px)/1.45 var(--serif);
    color: var(--ink);
}

.gc-gap {
    margin-top: 16px !important;
    color: var(--ink-2);
}

/* ---------- what the rule says ---------- */

/* The strawman above sits in a warm card, because it is a thing found in a
   document. The regulation is the page's own authority, so it is set on the
   paper in the reading voice, with the citation under it in the dashboard's
   meta face. No teal edge: that edge means the strong goal and nothing else. */
.gc-reg {
    margin: 0;
    padding: 0;
}

.gc-reg p {
    font: 500 clamp(19px, 1.9vw, 24px)/1.42 var(--serif);
    color: var(--ink);
}

.lp.gc .gc-reg cite {
    display: block;
    margin-top: 12px;
    font: 500 12.5px/1.4 var(--gc-mono);
    font-style: normal;
    color: var(--muted);
}

.gc-reg__number {
    margin-top: 18px !important;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

/* ---------- grade jump row ---------- */

.gc-jump {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 22px;
}

.gc-jump__lead {
    font-size: 14.5px;
    color: var(--muted);
}

.lp.gc .gc-jump a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 15px;
    border-radius: 999px;
    background: var(--card);
    font: 600 14.5px/1 var(--sans);
    color: var(--ink-2);
    text-decoration: none;
}

.lp.gc .gc-jump a:hover {
    background: var(--brand-tint);
    color: var(--brand-2);
}

/* ---------- weak vs strong ---------- */

.gc-band {
    scroll-margin-top: 84px;
    padding-top: 36px;
}

.gc-band > h3 {
    margin-bottom: 16px;
}

/* Two sheets: on phones they stack, on desktop they sit side by side and the
   strong one is the keeper — a teal edge, no badge. */
.gc-pair {
    display: grid;
    gap: 12px;
}

.gc-sheet {
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--paper-2);
}

.gc-sheet--strong {
    background: var(--card);
    box-shadow: inset 3px 0 0 var(--brand);
}

.gc-sheet__label {
    display: block;
    margin-bottom: 6px;
    font: 600 13px/1 var(--sans);
    color: var(--muted);
}

.gc-sheet--strong .gc-sheet__label {
    color: var(--brand-2);
}

.gc-sheet__goal {
    display: block;
    font: 500 italic clamp(16px, 1.35vw, 18px)/1.45 var(--serif);
    color: var(--muted);
}

.gc-sheet--strong .gc-sheet__goal {
    color: var(--ink);
}

/* A definition list: the three terms the frame names, and the evidence under
   each. Sentence-case labels, never uppercase tracked ones. */
.gc-notes {
    display: grid;
    gap: 14px;
    margin: 20px 0 0;
}

.gc-note {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

.gc-note dd {
    margin: 0;
}

.gc-note__label {
    display: block;
    margin-bottom: 3px;
    font: 600 13px/1 var(--sans);
    color: var(--gold-ink);
}

/* Why the weak goal fails and what it costs the child. The notes above are
   evidence in small type; this is the reasoning, so it reads as body prose. */
.gc-why {
    margin-top: 20px !important;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ink);
}

/* The rule it leans on, from frame.rules. A real <cite>: it is the source, not
   another sentence of the argument, and the same one under three of the four
   pairs. The meta face says so at a glance. */
.lp.gc .gc-rule {
    display: block;
    margin-top: 8px;
    font: 500 12.5px/1.5 var(--gc-mono);
    font-style: normal;
    color: var(--faint);
}

/* The sentence a parent can say at the table. Speech, so the page sets it in
   the serif the way it sets the goals themselves; no tinted block. */
.gc-say {
    margin-top: 20px !important;
    font: 500 clamp(17px, 1.4vw, 19px)/1.45 var(--serif);
    color: var(--ink);
}

.gc-turn {
    margin-top: 14px !important;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--muted);
}

@media (min-width: 720px) {
    .gc-band {
        padding-top: 44px;
    }

    .gc-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        align-items: start;
    }

    .gc-sheet {
        padding: 18px 20px 20px;
    }

    .gc-notes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        margin-top: 24px;
    }

    .gc-note {
        font-size: 15px;
    }
}

/* ---------- the three tests, and what to ask ---------- */

.gc-tests,
.gc-questions {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gc-tests__lead {
    margin-bottom: 16px !important;
    color: var(--ink-2);
}

/* Three lines, not three cards: this is the key the notes are labeled with,
   and the only sheet that carries a teal edge is the strong goal. */
.gc-test__name {
    display: block;
    font: 600 17px/1.3 var(--serif);
    color: var(--ink);
}

.gc-test__line {
    display: block;
    margin-top: 4px;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

.gc-questions li {
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

@media (min-width: 860px) {
    .gc-tests {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
}

/* ---------- limits, the ask, the sources ---------- */

.gc-limits {
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
}

.gc-ask {
    margin-top: 22px;
    padding: 26px 20px 24px;
    border-radius: 18px;
    background: var(--card);
}

.lp.gc .gc-ask h2 {
    font-size: clamp(22px, 2.4vw, 30px);
    margin-bottom: 0;
}

.gc-ask p {
    margin-top: 14px !important;
    color: var(--ink-2);
}

/* The page underlines its links; the one button is not one of them. */
.lp.gc .gc-ask .btn--primary {
    margin-top: 22px;
    width: 100%;
    justify-content: center;
    color: #fff;
    text-decoration: none;
}

.lp.gc .gc-ask .btn--primary:hover {
    color: #fff;
}

.gc-ask__micro {
    font-size: 14.5px;
    color: var(--muted);
}

@media (min-width: 720px) {
    .gc-ask {
        padding: 34px 32px 30px;
    }

    .lp.gc .gc-ask .btn--primary {
        width: auto;
    }
}

.gc-sources {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--muted);
}

.gc-sources span {
    display: block;
    margin-top: 2px;
}

.gc-next {
    margin-top: 26px !important;
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

/* ---------- where else this goal shows up ---------- */

/* Only on a page written at the grain a parent searched: a behavior, or the
   therapist's vocabulary. The parent named no disability, so the page shows the
   behavior and then sends them down to the leaves that carry the goal. Same
   list shape as the sources — a link and the reason it is there — because it is
   the same kind of block, and because the page has one primary button and this
   is not it. */
.gc-elsewhere__lead {
    margin-bottom: 16px !important;
    color: var(--ink-2);
}

.gc-elsewhere {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--muted);
}

.gc-elsewhere span {
    display: block;
    margin-top: 2px;
}