/* Screen 33 desktop: the site's root pages (privacy.html, terms.html,
   404.html), desktop slice E5 (2026-10-09).

   Handoff: docs/design/pharmacy/screens/33/desktop/ (FACTS.md, frame.html
   section #33-desktop; the records in screens/desktop-26-34/records/ win
   where the sheet reads short). One file for the three pages, linked after
   their shared <style> block so it wins by load order (no !important).
   It is not hub CSS: no hub token, no hub class, no script beside it.

   EVERY rule sits inside a min-width query of 901px or more, so the phone
   (900px and down) is the inline block alone, byte-frozen.

   Tiers:
   901 and up   the pages' own white 56 bar, its inner widened to 1200 (the
                mark sits where every desktop header puts it); the sheet is
                one 812 column (764 inside its gutters), bordered, radius 18,
                padding 40 44 44, title 40, prose held to 640; Privacy's two
                items side by side, its keep box as labelled rows (200 |
                sentence); Terms' three facts side by side and its six headed
                facts a ledger (heading 220 | sentence); the door at the foot.
                Not found: one 560 card centred, "Error 404" under. No
                contents at this width (refused at 1000).
   1120 and up  Privacy and Terms take the 1200 grid, sheet | 340 column:
                "On this page" (the page's own headings; no entry is ever
                marked current, a static page cannot know) over the door,
                sticky at 80 under the bar. Not found keeps its one card.

   The card 07 / 24 link to (#privacy-rx, #privacy-results) takes a 2px
   teal ring by :target. Colours: the screen-33 README set; the two hover
   tints are the desktop layer's own (#f4fbf9 on the bar's door, #0c5b4c on
   the e-mail link). Inter and Space Grotesk only. */

@media (min-width: 901px) {
    /* The bar: the pages' own, never a hub header. */
    .vl-bar-in { max-width: 1200px; padding: 0 14px 0 24px; }
    .vl-bar-in--mark { padding: 0 24px; }
    .vl-mark { gap: 10px; }
    .vl-mark img { width: 30px; height: 30px; border-radius: 9px; }
    .vl-mark span { font-size: 16px; }
    .vl-home { padding: 0 14px; gap: 8px; font-size: 14px; }
    .vl-home i { font-size: 12.5px; }

    /* The column: the sheet, then the door at its foot. */
    .vl-page:not(.vl-nf) { max-width: 812px; padding: 32px 24px 64px; display: flex; flex-direction: column; gap: 16px; }
    .vl-sheet { border: 1px solid #e2e8f0; border-radius: 18px; padding: 40px 44px 44px; gap: 36px; min-width: 0; }
    .vl-head { gap: 10px; }
    .vl-title { font-size: 40px; letter-spacing: -1.1px; line-height: 1.1; }
    .vl-date { font-size: 13.5px; }
    .vl-sec { gap: 14px; }
    .vl-h2 { font-size: 20px; letter-spacing: -.4px; line-height: 1.3; }
    .vl-p { max-width: 640px; font-size: 16px; line-height: 1.65; }
    .vl-mail { text-underline-offset: 3px; }

    /* 33a's headline: the two items side by side, each still who opens
       it, how long it stays, how to remove it. */
    .vl-hl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 12px 12px; }
    .vl-hl > .vl-hl-label, .vl-hl > .vl-inner { grid-column: 1 / -1; }
    /* Screen 50: the third item, "A message", takes the whole row under
       the two, never a half row beside a hole. */
    .vl-hl > .vl-item--wide { grid-column: 1 / -1; }
    .vl-hl-label { font-size: 12.5px; padding: 0 4px; }
    .vl-item { border-radius: 12px; padding: 16px 16px 18px; gap: 11px; min-width: 0; }
    .vl-item:target { box-shadow: 0 0 0 2px #0f6d5c; }
    .vl-item-t { font-size: 18px; }
    .vl-item .vl-fact span { font-size: 14.5px; }
    .vl-inner { border-radius: 12px; padding: 11px 14px; gap: 10px; }
    .vl-inner i { font-size: 12.5px; }
    .vl-inner span { font-size: 13.5px; line-height: 1.45; }

    /* The keep box: labelled rows, 200 | the sentence. */
    .vl-box-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 24px; padding: 16px 20px; }
    .vl-box-t { font-size: 15px; line-height: 1.45; }
    .vl-box-s { font-size: 15px; line-height: 1.55; margin-top: 0; }

    /* What we do not keep. */
    .vl-list { gap: 14px; max-width: 660px; }
    .vl-list .vl-fact { gap: 11px; }
    .vl-list .vl-fact i { font-size: 13px; margin-top: 5px; }
    .vl-list .vl-fact span { font-size: 15px; line-height: 1.55; }

    /* 46's door row: "Go to Account", 48 high, its own width. */
    .vl-go { align-self: flex-start; min-width: 300px; min-height: 48px; gap: 10px; padding: 0 16px; }
    .vl-go i { font-size: 12.5px; }
    .vl-go span { font-size: 14.5px; }
    .vl-go .vl-go-chev { font-size: 14px; }

    /* 33b's headline: the figure 26 over the three facts side by side. */
    .vl-hl--terms { display: block; padding: 16px 12px 12px; }
    .vl-hl-fig { font-size: 26px; letter-spacing: -.6px; line-height: 1.2; margin: 8px 4px 14px; max-width: 620px; }
    .vl-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; background: transparent; border-radius: 0; overflow: visible; }
    .vl-row { background: #fff; border-radius: 12px; padding: 14px; flex-direction: column; gap: 10px; }
    .vl-row + .vl-row { border-top: 0; }
    .vl-row i { font-size: 14px; margin-top: 0; width: auto; text-align: left; }
    .vl-row span { font-size: 14px; }

    /* 33b's six headed facts: a ledger, heading 220 | the sentence, one
       hairline between (the sheet's 36 gap folded into the rows). */
    .vl-sec--tight { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 28px; align-items: start; padding: 22px 0; }
    .vl-lift + .vl-sec--tight { padding-top: 4px; }
    .vl-sec--tight + .vl-sec--tight { margin-top: -36px; border-top: 1px solid #f0f2f4; }
    .vl-sec--tight .vl-h2 { font-size: 17px; letter-spacing: -.3px; line-height: 1.35; }

    /* The door at the foot of the column (the column's top from 1120). */
    .vl-doors { padding: 0; }
    .vl-door { padding: 10px 14px 10px 12px; }
    .vl-door-t { font-size: 14.5px; }

    /* 33c: one 560 card centred, the code's three doors, "Error 404" under. */
    .vl-page.vl-nf { max-width: none; padding: 96px 24px 40px; align-items: center; gap: 16px; }
    .vl-nf-card { width: 560px; max-width: 100%; padding: 32px 22px 22px; gap: 22px; }
    .vl-nf-head { padding: 0 8px; gap: 10px; }
    .vl-nf-p { font-size: 16px; }
    .vl-nf-door { padding: 10px 14px; }
    .vl-nf-door .vl-door-t { font-size: 15px; }
    .vl-err { font-size: 13px; }

    @media (hover: hover) {
        .vl-home:hover { background: #f4fbf9; }
        .vl-mail:hover { color: #0c5b4c; }
    }
}

@media (min-width: 1120px) {
    /* Privacy and Terms: the sheet | a 340 column. */
    .vl-page:not(.vl-nf) { max-width: 1200px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 48px; align-items: start; }
    .vl-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 80px; }

    /* "On this page": the page's own headings, none ever marked current. */
    .vl-toc { display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 16px 10px 10px; }
    .vl-toc-h { font-size: 13.5px; font-weight: 700; color: #0f172a; line-height: 1.5; padding: 0 10px 6px; }
    .vl-toc ul { list-style: none; display: flex; flex-direction: column; }
    .vl-toc a { min-height: 44px; padding: 0 10px 0 23px; border-radius: 10px; display: flex; align-items: center; font-size: 14px; font-weight: 500; color: #334155; line-height: 1.35; }

    /* Where an entry lands: 80 under the top, the column's own line. */
    .vl-sec, .vl-sec--tight .vl-h2 { scroll-margin-top: 80px; }
    .vl-hl-label { scroll-margin-top: 104px; }

    @media (hover: hover) {
        .vl-toc a:hover { background: #f8fafc; color: #0f172a; }
    }
}