/* ============================================================
   Accommodations page: the accommodations a child with one disability most
   often needs, and the wording that makes each one enforceable.

   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
   accommodation sheets, the quoted rule, the two moves and the one ask.
   Everything is scoped to `.lp.ac`.

   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.ac {
    background: var(--paper);
    overflow-x: clip;
    /* The dashboard's meta face. Used for two things only: the citation beside
       each accommodation's wording and the citation under the quoted rule.
       Sentence case, no tracking: a citation, not a label. */
    --ac-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.lp.ac p {
    margin: 0;
}

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

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

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

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

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

.lp.ac .ac-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.ac .ac-head__torch {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

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

/* ---------- the accommodations, one sheet each ---------- */

/* Each accommodation is a document rather than an explanation — the wording a
   parent will look for in their own IEP — so each one sits on the warm card
   tone. Three rows, each a sentence-case label and one sentence. On a wide
   screen two sheets share a row. */
.ac-sheets {
    display: grid;
    gap: 14px;
}

.ac-sheet {
    padding: 20px 18px 18px;
    border-radius: 18px;
    background: var(--card);
}

.ac-sheet h3 {
    margin: 0 0 12px;
}

.ac-sheet dl {
    display: grid;
    gap: 12px;
    margin: 0;
}

.ac-sheet dt {
    font: 600 13px/1.4 var(--sans);
    color: var(--muted);
}

.ac-sheet dd {
    margin: 3px 0 0;
    font-size: 15.5px;
    line-height: 1.58;
    color: var(--ink-2);
}

/* The wording line carries the IEP sentence in quotation marks and its rule
   after it, in the meta face, so the claim and its receipt read as one line.
   The two citations inside the frame's sentence under the moves are set the
   same way: a citation is a receipt, not an emphasis, wherever it prints. */
.ac-sheet__wording {
    color: var(--ink) !important;
}

.lp.ac .ac-sheet__wording cite,
.lp.ac .ac-gap__close cite {
    font: 500 12px/1.5 var(--ac-mono);
    font-style: normal;
    white-space: nowrap;
}

@media (min-width: 720px) {
    .ac-sheet {
        padding: 26px 26px 22px;
    }
}

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

    .ac-sheet dd {
        font-size: 16px;
    }
}

/* ---------- the quoted rule ---------- */

/* The regulation's 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. */
.ac-rule {
    margin: 0;
    padding: 0;
}

.ac-rule p {
    font: 500 clamp(18px, 1.75vw, 23px)/1.44 var(--serif);
    color: var(--ink);
}

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

.lp.ac .ac-rule cite a,
.lp.ac .ac-sheet__wording cite a,
.lp.ac .ac-gap__close cite a {
    color: var(--muted);
    text-decoration-color: var(--hair-2);
}

.lp.ac .ac-rule cite a:hover,
.lp.ac .ac-sheet__wording cite a:hover,
.lp.ac .ac-gap__close cite a:hover {
    color: var(--brand-2);
}

.ac-rule__plainly {
    margin-top: 18px !important;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
}

/* ---------- if it is written but not happening ---------- */

.ac-moves {
    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. */
.ac-moves li {
    padding-left: 18px;
    position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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