/* ============================================================
   IEP vs 504 page: which plan fits a child with one condition, the fact that
   decides it, and what each plan gives that child.

   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 two
   quoted definitions, the side-by-side, the signs, the sentence sheet and the
   one ask. Everything is scoped to `.lp.iv`.

   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.iv {
    background: var(--paper);
    overflow-x: clip;
    /* The dashboard's meta face. Used for citations only: under each quoted
       definition, beside each cell of the side-by-side, and inside the frame's
       sentence under the copyable sentence. Sentence case, no tracking: a
       citation, not a label. */
    --iv-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
}

.iv-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);
}

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

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

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

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

.lp.iv .iv-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;
}

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

.iv-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);
}

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

.lp.iv .iv-nav__btn,
.lp.iv .iv-skip {
    text-decoration: none;
}

.lp.iv .iv-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.iv .iv-nav__btn:hover {
    color: var(--ink);
    background: var(--card);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.iv-main {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    padding: 26px 0 0;
}

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

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

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

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

.lp.iv 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.iv h1 em {
    display: block;
}

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

.lp.iv h3 {
    font-size: clamp(18px, 1.7vw, 21px);
    line-height: 1.2;
}

.lp.iv p {
    margin: 0;
}

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

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

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

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

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

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

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

/* 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.iv .iv-head__torch {
    display: none;
}

@media (min-width: 1100px) {
    .iv-main > .iv-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;
    }

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

    .lp.iv .iv-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;
    }
}

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

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

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

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

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

.iv-lead {
    margin-bottom: 20px !important;
    color: var(--ink-2);
}

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

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

/* ---------- what decides it: the two definitions, side by side ---------- */

/* The regulations' own words are the page's authority, so they sit on the
   paper in the reading voice with the citation under them in the meta face.
   No card: a card would make the rule look like a thing found in a document,
   and it is the thing the document has to obey. Two of them, because the
   parent is deciding between two laws; on a wide screen they share a row. */
.iv-decides {
    display: grid;
    gap: 22px;
}

.iv-decides blockquote {
    margin: 0;
    padding: 0;
}

.iv-decides p {
    font: 500 clamp(18px, 1.6vw, 21px)/1.44 var(--serif);
    color: var(--ink);
}

.iv-decides__law {
    display: block;
    margin-bottom: 6px;
    font: 600 13px/1.4 var(--sans);
    color: var(--muted);
}

.lp.iv .iv-decides cite,
.lp.iv .iv-table cite,
.lp.iv .iv-ask-close cite {
    font: 500 12px/1.5 var(--iv-mono);
    font-style: normal;
    color: var(--muted);
    white-space: nowrap;
}

.lp.iv .iv-decides cite {
    display: block;
    margin-top: 10px;
}

.lp.iv .iv-decides cite a,
.lp.iv .iv-table cite a,
.lp.iv .iv-ask-close cite a {
    color: var(--muted);
    text-decoration-color: var(--hair-2);
}

.lp.iv .iv-decides cite a:hover,
.lp.iv .iv-table cite a:hover,
.lp.iv .iv-ask-close cite a:hover {
    color: var(--brand-2);
}

.iv-decides__plainly {
    margin-top: 20px !important;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
}

@media (min-width: 860px) {
    .iv-decides {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px;
    }
}

/* ---------- the side-by-side ---------- */

/* Three rows, two plans. Below 720px the head is hidden and each row reads as
   a small stack: the row's name, then the IEP cell and the 504 cell, each with
   its plan named in a sentence-case label. The column that usually fits this
   child carries a teal edge under its head on a wide screen: an edge, not a
   badge. */
.iv-tablewrap {
    overflow-x: auto;
}

.iv-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.iv-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.iv-table tr {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 0;
    border-top: 1px solid var(--hair);
}

.iv-table tbody tr:last-child {
    border-bottom: 1px solid var(--hair);
}

.iv-table th,
.iv-table td {
    display: block;
    padding: 0;
    font-weight: 400;
}

.iv-table__row {
    font: 600 16px/1.35 var(--sans);
    color: var(--ink);
}

.iv-table__cell {
    font-size: 15.5px;
    line-height: 1.58;
    color: var(--ink-2);
}

.iv-table__cell::before {
    content: attr(data-plan);
    display: block;
    margin-bottom: 3px;
    font: 600 13px/1.4 var(--sans);
    color: var(--muted);
}

.lp.iv .iv-table cite {
    display: block;
    margin-top: 6px;
    white-space: normal;
}

@media (min-width: 720px) {
    .iv-table {
        min-width: 620px;
    }

    .iv-table thead {
        position: static;
        width: auto;
        height: auto;
        clip-path: none;
    }

    .iv-table tr {
        display: table-row;
        padding: 0;
        border-top: 0;
    }

    .iv-table tbody tr:last-child {
        border-bottom: 0;
    }

    .iv-table th,
    .iv-table td {
        display: table-cell;
        padding: 16px 20px 16px 0;
        vertical-align: top;
        border-top: 1px solid var(--hair);
    }

    .iv-table thead th {
        padding-top: 0;
        padding-bottom: 10px;
        border-top: 0;
        font: 600 14px/1.4 var(--sans);
        color: var(--muted);
    }

    .iv-table thead th.iv-table__head--fits {
        color: var(--brand-2);
        box-shadow: inset 0 -2px 0 var(--brand);
    }

    .iv-table__row {
        width: 20%;
    }

    .iv-table__cell {
        width: 40%;
    }

    .iv-table__cell:last-child {
        padding-right: 0;
    }

    .iv-table__cell::before {
        display: none;
    }
}

/* ---------- which way the record points ---------- */

.iv-signs h3 {
    margin: 0 0 12px;
}

.iv-signs + .iv-signs {
    margin-top: 28px;
}

.iv-signs ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

/* A hanging mark, not a bullet glyph the browser picks: the teal is the same
   teal the ask uses. */
.iv-signs li {
    padding-left: 18px;
    position: relative;
}

.iv-signs li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 1.5px;
    background: var(--brand);
}

@media (min-width: 860px) {
    .iv-signs-pair {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: 34px;
    }

    .iv-signs + .iv-signs {
        margin-top: 0;
    }
}

/* ---------- what to ask for in writing ---------- */

/* The one sheet on the page in the warm card tone, because it is the one
   thing here that is a document rather than an explanation: the sentence a
   parent pastes into an email. */
.iv-sheet {
    padding: 22px 18px 20px;
    border-radius: 18px;
    background: var(--card);
}

/* The sentence reads in the text face, not a monospace one: a parent is going
   to paste it into an email, and it should look like the email it becomes. */
.iv-sheet__sentence {
    margin: 0;
    font: 400 16px/1.7 var(--sans);
    color: var(--ink);
    overflow-wrap: break-word;
}

.lp.iv .iv-copy {
    margin-top: 18px;
    min-height: 44px;
    padding: 0 18px;
    font-size: 15px;
    background: var(--paper);
}

.lp.iv .iv-copy:hover {
    background: var(--paper-2);
}

.iv-ask-close {
    margin-top: 20px !important;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--muted);
}

@media (min-width: 720px) {
    .iv-sheet {
        padding: 28px 30px 26px;
    }
}

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

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

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

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

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

.lp.iv .iv-ask .btn--primary {
    margin-top: 22px;
    width: 100%;
    justify-content: center;
    color: #fff;
    text-decoration: none;
}

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

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

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

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

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

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

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