/* ============================================================
   Dispute page: what is happening, whether the school may do it, the moves
   for this week, the paragraph to send, and when to escalate.

   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
   numbered moves, the paragraph sheet, the escalation table and the one ask.
   Everything is scoped to `.lp.dp`.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.lp.dp p {
    margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------- this week, in order ---------- */

/* An ordered list with its own counter: the number is the point of the block,
   so it is set in the serif, in the ask's teal, at the size of a small heading,
   and the browser's marker is turned off so the number sits where the hanging
   mark sits on the homepage. */
.dp-moves {
    display: grid;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: dp-move;
}

.dp-moves li {
    position: relative;
    padding-left: 40px;
    counter-increment: dp-move;
}

.dp-moves li::before {
    content: counter(dp-move);
    position: absolute;
    left: 0;
    top: -2px;
    font: 500 clamp(22px, 2.2vw, 26px)/1.1 var(--serif);
    color: var(--brand-2);
}

.dp-moves li > p {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ink-2);
}

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

.lp.dp .dp-move__record cite {
    margin-left: 8px;
    font: 500 12px/1.5 var(--dp-mono);
    font-style: normal;
    color: var(--faint);
    white-space: nowrap;
}

@media (min-width: 860px) {
    .dp-moves {
        gap: 26px;
    }

    .dp-moves li {
        padding-left: 46px;
    }
}

/* ---------- the paragraph to send ---------- */

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

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

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

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

/* The paragraph 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. */
.dp-sheet__body {
    margin: 0;
    font: 400 15.5px/1.72 var(--sans);
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

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

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

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

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

/* ---------- the escalation table ---------- */

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

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

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

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

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

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

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

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

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

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

.lp.dp .dp-table cite a {
    color: var(--muted);
    text-decoration: none;
}

.lp.dp .dp-table cite a:hover {
    color: var(--brand-2);
    text-decoration: underline;
}

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

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

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

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

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

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

    .dp-table__path {
        width: 24%;
        margin-top: 0;
    }

    .dp-table__count {
        width: 24%;
        font-size: 17px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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