/* ============================================================
   State law guide: one page a parent reads before writing to the school.

   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 laws
   list, the deadline table, the three steps and the one ask. Everything is
   scoped to `.lp.sl`.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.lp.sl p {
    margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------- the laws ---------- */

/* The page's primary block. A numbered list, not a table: each entry is a
   topic, its section as a link in the meta face, what the rule says, and what
   that means for the parent. The numbers are the serif in gold ink like the
   steps, so a parent can say "number four" at the table. Composed at 375: one
   column, the citation on its own line under the topic so a long section
   number never fights the heading for width. */
.sl-laws {
    display: grid;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sl-law;
}

.sl-laws li {
    counter-increment: sl-law;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    -moz-column-gap: 12px;
         column-gap: 12px;
}

.sl-laws li::before {
    content: counter(sl-law);
    grid-row: 1 / span 4;
    font: 500 17px/1.35 var(--serif);
    color: var(--gold-ink);
}

.sl-laws h3 {
    margin: 0;
}

/* The section number, linked to the rule text. A citation in the meta face,
   underlined like every other link on the page. */
.lp.sl .sl-law__cite {
    display: inline-block;
    margin-top: 5px;
    font: 500 12.5px/1.5 var(--sl-mono);
    color: var(--muted);
    text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent);
    word-break: break-word;
}

.lp.sl .sl-law__cite:hover {
    color: var(--brand-2);
}

.sl-law__says {
    margin-top: 8px !important;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ink);
}

/* What it means for the parent: the reading voice in the second ink, with the
   same hanging teal mark the refusal moves carry. No label above it. */
.sl-law__for {
    position: relative;
    margin-top: 8px !important;
    padding-left: 18px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
}

.sl-law__for::before {
    content: '';
    position: absolute;
    left: 0;
    top: .66em;
    width: 7px;
    height: 1.5px;
    background: var(--brand);
}

@media (min-width: 860px) {
    .sl-laws {
        gap: 30px;
    }

    .sl-laws li {
        grid-template-columns: 30px minmax(0, 1fr);
        -moz-column-gap: 14px;
             column-gap: 14px;
    }
}

/* ---------- the three steps ---------- */

/* Numbered because the order is the point: a parent does these in sequence.
   The counter is the serif in muted ink, not a badge and not a tile. */
.sl-steps {
    display: grid;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sl-step;
}

.sl-steps li {
    counter-increment: sl-step;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    -moz-column-gap: 12px;
         column-gap: 12px;
}

.sl-steps li::before {
    content: counter(sl-step);
    grid-row: 1 / span 2;
    font: 500 17px/1.35 var(--serif);
    color: var(--gold-ink);
}

.sl-steps h3 {
    margin: 0;
}

.sl-steps p {
    margin-top: 6px !important;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ink-2);
}

.sl-contact {
    margin-top: 24px !important;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--card);
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

/* ---------- if the school says no: the moves ---------- */

.sl-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 strong sheet uses on the goals pages. */
.sl-moves li {
    padding-left: 18px;
    position: relative;
}

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

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

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

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

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

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

/* ---------- the deadline table ---------- */

.sl-tablewrap {
    overflow-x: auto;
}

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

/* Below 720px the head is hidden and each row reads as a small stack: the
   deadline first, because that is the number a parent came for. The cells are
   self-describing, so nothing needs a label above it. */
.sl-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

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

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

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

.sl-table__deadline {
    order: -1;
    font: 500 clamp(19px, 2vw, 22px)/1.25 var(--serif);
    color: var(--brand-2);
}

.sl-table__label {
    margin-top: 4px;
    font: 600 15.5px/1.4 var(--sans);
    color: var(--ink);
}

.sl-table__detail {
    margin-top: 8px;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

.lp.sl .sl-table cite {
    display: block;
    margin-top: 6px;
    font: 500 12px/1.5 var(--sl-mono);
    font-style: normal;
    color: var(--faint);
}

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

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

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

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

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

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

    .sl-table__label {
        width: 30%;
        margin-top: 0;
    }

    .sl-table__deadline {
        width: 22%;
        font-size: 17px;
    }

    .sl-table__detail {
        margin-top: 0;
        padding-right: 0;
    }
}

/* ---------- the federal line under the moves ---------- */

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

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

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

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

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

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

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

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

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

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

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

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

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

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