/* ============================================================
   Letter page: the letter a parent came for, and the reason each part of it
   is there.

   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
   clock table, the four parts, the letter sheet and the one ask. Everything is
   scoped to `.lp.lt`.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.lp.lt p {
    margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------- 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. */
.lt-rule {
    margin: 0;
    padding: 0;
}

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

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

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

/* ---------- when to send it, and what to do about silence ---------- */

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

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

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

/* ---------- the clock table ---------- */

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

.lt-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 thing a parent came for. The cells are
   self-describing, so nothing needs a label above it. */
.lt-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

    .lt-table__clock {
        width: 28%;
        margin-top: 0;
    }

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

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

/* ---------- what the letter has to contain ---------- */

.lt-parts {
    display: grid;
    gap: 24px;
}

.lt-part h3 {
    margin: 0;
}

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

/* The rule under each part: plain words first, the citation after them in the
   meta face. One line, muted, so it reads as the receipt for the sentence
   above it rather than a second sentence competing with it. */
.lt-part__rule {
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--muted) !important;
}

.lp.lt .lt-part__rule cite {
    font: 500 12px/1.5 var(--lt-mono);
    font-style: normal;
    color: var(--faint);
    white-space: nowrap;
}

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

/* ---------- the letter itself ---------- */

/* 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. */
.lt-sheet {
    padding: 22px 18px 20px;
    border-radius: 18px;
    background: var(--card);
}

.lt-sheet__head {
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hair-2);
}

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

.lt-sheet__head dd {
    margin: 3px 0 0;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ink);
}

/* The letter reads in the text face, not a monospace one: a parent is going to
   paste this into an email, and it should look like the email it becomes. */
.lt-sheet__body {
    margin: 0;
    font: 400 15.5px/1.72 var(--sans);
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

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

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

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

    .lt-sheet__head {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 26px;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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