/* =================================================================
   SNITCH — public pages (maintain.md §8.7, 2026-10-04).
   Loaded after tokens.css and base.css by sections/_public.php, and by
   nothing else: the main page never sees these rules, and these pages
   never load chrome.css / sections.css / glitch.css, whose selectors
   assume the act's markup and its scripts.

   Straight register, so plain layout: one reading column, the display
   face for headings and labels, Open Sans for prose, the orange spent
   only on what can be pressed and on the one label per block. Works
   with no JavaScript, because there is none.
   ================================================================= */

.pg { background: var(--g-hero); color: var(--ink-200); }
.pg-wrap { width: 100%; max-width: 820px; margin-inline: auto; padding-inline: var(--wrap-pad); }

.pg-skip { position: absolute; left: -9999px; top: 0; }
.pg-skip:focus { left: var(--sp-2); top: var(--sp-2); z-index: 10; background: var(--hot); color: var(--g-hero); padding: 8px 12px; }

/* ---- the bar --------------------------------------------------- */
.pg-top { border-bottom: 1px solid var(--line); }
.pg-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
          gap: 12px 24px; padding-block: 20px; max-width: var(--wrap-max); }
.pg-mark { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .12em;
           font-size: 20px; color: var(--ink-100); }
/* five items since 2026-10-06 (four links and the Guides list, below); the gap stayed 18 */
.pg-top nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pg-top nav a { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .06em;
                font-size: var(--t-mono); color: var(--ink-300); padding-block: 6px; }
.pg-top nav a[aria-current="page"] { color: var(--ink-100); box-shadow: inset 0 -2px 0 var(--brand); }
.pg-top nav a:hover { color: var(--hot); }

/* the Guides list on wide screens (2026-10-06): the topic explainers under one word, so the bar stays one line as
   pages are added. A <details>: it opens on click or Enter, and a page with no script can still close it. */
.pg-guides { position: relative; align-self: center; }
.pg-guides > summary { list-style: none; cursor: pointer; user-select: none;
                       font-family: var(--f-display); text-transform: uppercase; letter-spacing: .06em;
                       font-size: var(--t-mono); color: var(--ink-300); padding-block: 6px; }
.pg-guides > summary::-webkit-details-marker { display: none; }
.pg-guides > summary::after { content: "+"; display: inline-block; width: 1ch; margin-left: 8px; color: var(--hot); }
.pg-guides[open] > summary::after { content: "\2212"; }
.pg-guides > summary:hover, .pg-guides[open] > summary { color: var(--hot); }
.pg-guides.is-current > summary { color: var(--ink-100); box-shadow: inset 0 -2px 0 var(--brand); }
.pg-guides > summary:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.pg-guides-list { position: absolute; left: -16px; top: calc(100% + 12px); z-index: 30; min-width: 240px;
                  display: flex; flex-direction: column; padding: 6px 16px 10px;
                  background: var(--g-hero); border: 1px solid var(--line); box-shadow: 0 18px 30px rgba(0, 0, 0, .45); }
.pg-top .pg-guides-list a { padding: 12px 0; white-space: nowrap; }
.pg-top .pg-guides-list a + a { border-top: 1px solid var(--line); }
.pg-top .pg-guides-list a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brand); padding-left: 12px; }

/* ---- the latest change, one line under the bar (2026-10-09, public_latest_line()) ---- */
.pg-latest { border-bottom: 1px solid var(--line); background: var(--g-log); }
.pg-latest p { max-width: var(--wrap-max); margin-block: 0; padding-block: 10px; font-size: 14px; line-height: 1.45;
               color: var(--ink-300); }
.pg-latest-k { font-family: var(--f-machine); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em;
               color: var(--hot); margin-right: 10px; }
.pg-latest-t { color: var(--ink-100); }
.pg-latest a { margin-left: 6px; white-space: nowrap; color: var(--ink-100); text-decoration: underline;
               text-decoration-color: var(--brand); text-underline-offset: 3px; }
.pg-latest a:hover { color: var(--hot); }
@media (max-width: 520px) {
  .pg-latest-k { display: block; margin-bottom: 2px; }
  .pg-latest-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pg-latest a { margin-left: 0; }
}

/* ---- the article ----------------------------------------------- */
.pg-main { padding-block: clamp(48px, 9vh, 112px) clamp(64px, 10vh, 128px); }
.pg-kicker { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .08em;
             font-size: var(--t-mono); color: var(--hot); margin-bottom: var(--sp-3); }
.pg h1 { font-family: var(--f-display); text-transform: uppercase; font-weight: 400;
         letter-spacing: var(--tr-display, .02em); font-size: clamp(34px, 6vw, 64px);
         line-height: 1.04; color: var(--ink-100); margin-bottom: var(--sp-4); }
.pg-lede { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.5; color: var(--ink-100);
           margin-bottom: var(--sp-4); text-wrap: pretty; }
.pg-main p { margin-bottom: var(--sp-3); line-height: 1.6; text-wrap: pretty; }
.pg-main p a, .pg-main li a, .pg-foot a { color: var(--ink-100); text-decoration: underline;
                                          text-decoration-color: var(--brand); text-underline-offset: 3px; }
.pg-main p a:hover, .pg-main li a:hover, .pg-foot a:hover { color: var(--hot); }
.pg h2 { font-family: var(--f-display); text-transform: uppercase; font-weight: 400;
         letter-spacing: .04em; font-size: clamp(22px, 3vw, 30px); line-height: 1.15;
         color: var(--ink-100); margin: var(--sp-7, 72px) 0 var(--sp-3); scroll-margin-top: 24px; }
.pg h3 { font-size: 19px; font-weight: 600; color: var(--ink-100); margin: var(--sp-4) 0 var(--sp-2); }
.pg-main ul, .pg-main ol { margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.pg-list li { position: relative; padding-left: 22px; margin-bottom: 12px; line-height: 1.55; }
.pg-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--brand); }
.pg-steps { counter-reset: step; }
.pg-steps li { counter-increment: step; position: relative; padding-left: 44px; margin-bottom: 16px; line-height: 1.55; }
.pg-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: .1em;
                       font-family: var(--f-machine); font-size: var(--t-mono); color: var(--hot); }
.pg-main b { color: var(--ink-100); font-weight: 600; }
.pg-note { font-size: 15px; color: var(--ink-400); }

/* ---- the figures: a row of plain numbers, read from the ledger ---- */
.pg-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
           background: var(--line); border: 1px solid var(--line); margin: 0 0 var(--sp-3); }
.pg-figs div { background: var(--g-log); padding: 18px 18px 16px; }
.pg-figs dt { font-family: var(--f-machine); font-size: var(--t-micro); text-transform: uppercase;
              letter-spacing: .08em; color: var(--ink-400); }
.pg-figs dd { margin: 6px 0 0; font-family: var(--f-display); font-size: clamp(28px, 4vw, 40px); color: var(--ink-100); }
.pg-figs-long dd { font-size: clamp(20px, 2.8vw, 28px); }   /* amounts in rupees run to six figures */

/* ---- the way in ------------------------------------------------- */
.pg-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: var(--sp-4) 0; }
.pg-btn { font: 14px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em;
          padding: 18px 26px; border: 1px solid var(--hot); color: var(--hot);
          display: inline-flex; align-items: center; text-decoration: none; }
.pg-btn-yes { background: var(--hot); color: #12100F; }
.pg-btn:hover, .pg-btn:focus-visible { filter: brightness(1.12); }
.pg-btn-yes:hover, .pg-btn-yes:focus-visible { color: #12100F; }

/* ---- the log: every run, one line of fact each ------------------- */
.pg-log { border-top: 1px solid var(--line); }
.pg-log li { padding: 18px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.pg-log li:target { background: var(--g-log); box-shadow: -14px 0 0 var(--g-log), 14px 0 0 var(--g-log); }
.pg-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--f-machine);
           font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400); }
.pg-meta a { color: var(--ink-400); text-decoration: none; }
.pg-meta a:hover { color: var(--hot); }
.pg-meta .act { color: var(--ink-300); }
.pg-meta .act.hot { color: var(--hot); }
.pg-log .val { margin: 8px 0 0; color: var(--ink-100); line-height: 1.5; }
.pg-log .why { margin: 6px 0 0; font-size: 15px; color: var(--ink-300); line-height: 1.55; }

/* ---- the explainers (/what-websites-can-see/, 2026-10-04) ---------- */
/* the short version: two plain columns, prompt or no prompt */
.pg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
            border: 1px solid var(--line); margin: var(--sp-4) 0; }
.pg-split > div { background: var(--g-log); padding: 22px 22px 8px; }
.pg h2.pg-split-h { font-size: var(--t-mono); letter-spacing: .08em; margin: 0 0 var(--sp-2); color: var(--hot); }
.pg-split .pg-list li { margin-bottom: 8px; font-size: 16px; }
/* one reading per item: the plain sentence, then how a page gets it */
.pg-reads li { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); line-height: 1.6; }
.pg-reads li:last-child { border-bottom: 0; }
.pg-how { display: block; margin-top: 8px; font-family: var(--f-machine); font-size: var(--t-micro);
          letter-spacing: .04em; color: var(--ink-400); }
.pg code { font-family: var(--f-machine); font-size: .86em; color: var(--ink-100); overflow-wrap: anywhere; }
/* a short listing of real markup (/what-autofill-gives-away/): scrolls sideways
   inside its own box at 390 px rather than widening the page */
.pg-code { background: var(--g-log); border: 1px solid var(--line); padding: 18px 20px; margin: 0 0 var(--sp-3);
           overflow-x: auto; font-family: var(--f-machine); font-size: 13px; line-height: 1.6; color: var(--ink-200); }
.pg-code code { font-size: inherit; color: inherit; overflow-wrap: normal; white-space: pre; }
.pg-code .k { color: var(--hot); }

/* ---- a small table of figures (/agent/first-week/, 2026-10-05) -----
   Scrolls sideways inside its own box at 390 px rather than widening the
   page, like .pg-code; figures right-aligned in the machine face. */
.pg-table { overflow-x: auto; margin: 0 0 var(--sp-3); border: 1px solid var(--line); background: var(--g-log); }
.pg-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.pg-table th, .pg-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.pg-table th:first-child { text-align: left; }
.pg-table thead th { font-family: var(--f-machine); font-size: var(--t-micro); font-weight: 400; text-transform: uppercase;
                     letter-spacing: .08em; color: var(--ink-400); }
.pg-table tbody th, .pg-table tfoot th { font-weight: 600; color: var(--ink-100); }
.pg-table td { font-family: var(--f-machine); color: var(--ink-100); }
.pg-table tfoot th, .pg-table tfoot td { border-bottom: 0; border-top: 1px solid var(--ink-400); }
.pg-table:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
/* a table of words, not figures (/can-websites-track-you-in-incognito/#readings, 2026-10-06): the
   label column wraps so the answers stay on screen at 390 px instead of scrolling out of sight. */
.pg-table.is-words tbody th { white-space: normal; }
.pg-table.is-words thead th { white-space: normal; }
/* sentences in the cells (the behaviour page, 2026-10-06): wrap, read left to right, in the text face */
.pg-table.is-prose th, .pg-table.is-prose td { white-space: normal; text-align: left; vertical-align: top; }
.pg-table.is-prose td { font-family: inherit; }
.pg-table.is-prose tbody th { width: 22%; }
@media (max-width: 560px) {
  .pg-table.is-words th, .pg-table.is-words td { padding: 10px 10px; }
  .pg-table.is-words table { font-size: 15px; }
}

/* a one-line pointer to a related report, under a page's opening paragraph */
.pg-main p.pg-flag { padding: 14px 18px; border: 1px solid var(--line); border-left: 3px solid var(--brand); color: var(--ink-200); }

/* ---- /press/ (2026-10-09): text to paste, and pictures to take -----
   .pg-copy is a quotation the reader is meant to select, so it is set
   apart like .pg-code but in the reading face; .pg-pics is a grid of the
   site's own images, each a link to the full-size file. */
.pg-copy { margin: 0 0 var(--sp-3); padding: 18px 22px; background: var(--g-log); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); }
.pg-main .pg-copy p { margin: 0; color: var(--ink-100); }
.pg-main ul.pg-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; margin-bottom: var(--sp-4); }
.pg-pics img { display: block; width: 100%; height: 220px; object-fit: contain; background: var(--g-log); border: 1px solid var(--line); }
.pg-pics a:hover img, .pg-pics a:focus-visible img { border-color: var(--hot); }
.pg-main .pg-pics p { margin: 10px 0 0; font-size: 15px; line-height: 1.4; }
.pg-pics .pg-note { display: block; font-family: var(--f-machine); font-size: 12px; }

/* ---- the foot --------------------------------------------------- */
.pg-foot { border-top: 1px solid var(--line); padding-block: var(--sp-5) var(--sp-6); font-size: 15px; color: var(--ink-400); }
.pg-foot p { margin-bottom: var(--sp-2); line-height: 1.6; }
.pg-legal { font-family: var(--f-machine); font-size: 12px; }

@media (max-width: 520px) {
  .pg-figs { grid-template-columns: 1fr 1fr; }
  .pg-steps li { padding-left: 36px; }
  .pg-split { grid-template-columns: 1fr; }
}

/* ---- the ask (operator, 2026-10-04) --------------------------------
   These pages explain; the demonstration does it. Readers were finishing
   a page and leaving, so the way in is asked for early (.pg-try), again
   mid-page (.pg-try.is-slim), again at the end (.pg-cta-big), and it
   stays in a bar at the foot of the window (.pg-stick). No script: the
   bar is position:fixed and the body keeps room for it. The link to the
   demonstration in the top bar is drawn as a button for the same reason. */
.pg-try { margin: var(--sp-4) 0; padding: 26px 28px 26px; background: var(--g-log); border: 1px solid var(--line); border-left: 6px solid var(--hot); }
.pg-main .pg-try p { margin-bottom: 16px; }
.pg-main .pg-try p.pg-try-k { font: 12px/1.4 var(--f-machine); letter-spacing: .14em; text-transform: uppercase; color: var(--hot); margin-bottom: 10px; }
.pg-main .pg-try p.pg-try-h { font: 400 clamp(24px, 3.4vw, 34px)/1.12 var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink-100); margin-bottom: 12px; }
.pg-try .pg-cta { margin: 20px 0 0; }
.pg-try .pg-btn-yes, .pg-cta-big .pg-btn-yes { font-size: 16px; padding: 21px 32px; }
.pg-main .pg-try p.pg-try-note { font-size: 14px; color: var(--ink-400); margin: 14px 0 0; }
.pg-try.is-slim { padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.pg-main .pg-try.is-slim p { margin: 0; flex: 1 1 300px; color: var(--ink-100); }
.pg-try.is-slim .pg-btn-yes { font-size: 14px; padding: 16px 22px; }

/* /agent/'s box, rebuilt 2026-10-10 (run 20261010T210001Z-4ae5c1ee): the text and, beside it on a wide screen, the
   card a sent verdict previews as. Below 900px the card sits under the note at full width, so the button stays on the
   phone's second screen. The text column keeps its own .pg-try rules. */
.pg-try-door { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px 28px; align-items: center; }
.pg-main .pg-try-door p.pg-try-h { font-size: clamp(22px, 2.6vw, 28px); }
.pg-try-card { margin: 0; }
.pg-try-card img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.pg-main .pg-try-card figcaption { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--ink-400); }
@media (max-width: 900px) {
  .pg-try-door { grid-template-columns: minmax(0, 1fr); }
}

.pg-stick { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--g-chrome); border-top: 1px solid var(--hot); }
.pg-stick .pg-wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; padding-block: 10px; }
.pg-stick span { font: 13px/1.35 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-100); }
.pg-stick .pg-btn { padding: 12px 18px; font-size: 13px; white-space: nowrap; }
body.pg { padding-bottom: 66px; }   /* room for the bar, so it never covers the last line */

.pg-top nav a[href="/"] { background: var(--hot); color: #12100F; padding: 8px 12px; }
.pg-top nav a[href="/"]:hover { color: #12100F; filter: brightness(1.12); }

/* "Best on a computer. Send yourself the link for later." (2026-10-09, sections/_later.php, the ads desk's request).
   Phones only, by width alone: nothing detects the device. Fine print with an outline in the same grey, under the
   box's own button and note, so it reads as an aside and never as a second way in. */
.pg-main .pg-try p.pg-later { display: none; }
@media (max-width: 700px) {
  .pg-main .pg-try p.pg-later { display: block; font-size: 14px; color: var(--ink-400); margin: 14px 0 0; }
  .pg-later .later-send { display: inline-block; margin-top: 8px; padding: 9px 12px; border: 1px solid var(--ink-400); color: var(--ink-200); text-decoration: none; line-height: 1.2; }
  .pg-later .later-said { color: var(--ink-200); }
}

@media (max-width: 520px) {
  .pg-try { padding: 20px 18px 22px; }
  .pg-stick span { font-size: 11px; }
  .pg-stick .pg-btn { padding: 11px 14px; }
}

/* ---- the bar on narrow screens (2026-10-05) ---------------------
   Below 920px the five links no longer fit on the line with the name, and
   wrapped into ragged rows that filled the top of a phone. There the bar
   is one line, the name and a Menu button; the button opens the links as
   a list over the page. A <details> element, because these pages run no
   script. The demonstration stays one tap away in the bar at the foot. */
.pg-top { position: relative; }
.pg-menu { display: none; }
@media (max-width: 920px) {
  .pg-bar { flex-wrap: nowrap; padding-block: 14px; }
  .pg-top .pg-nav-wide { display: none; }
  .pg-menu { display: block; margin-left: auto; }
  .pg-menu > summary { list-style: none; cursor: pointer; user-select: none;
                       font-family: var(--f-display); text-transform: uppercase; letter-spacing: .06em;
                       font-size: var(--t-mono); color: var(--ink-100);
                       padding: 10px 14px; border: 1px solid var(--line); }
  .pg-menu > summary::-webkit-details-marker { display: none; }
  .pg-menu > summary::after { content: "+"; display: inline-block; width: 1ch; margin-left: 10px; color: var(--hot); }
  .pg-menu[open] > summary { border-color: var(--hot); }
  .pg-menu[open] > summary::after { content: "\2212"; }
  .pg-menu > summary:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
  .pg-menu nav { position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
                 display: flex; flex-direction: column;
                 padding: 6px var(--wrap-pad) 18px; background: var(--g-hero);
                 border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(0, 0, 0, .45); }
  .pg-menu nav a { font-size: 14px; padding: 15px 0; border-top: 1px solid var(--line); }
  .pg-menu nav a[href="/"] { order: 9; margin-top: 14px; border-top: 0; padding: 15px 14px; text-align: center; }
  .pg-menu nav a[aria-current="page"] { color: var(--ink-100); box-shadow: inset 3px 0 0 var(--brand); padding-left: 14px; }
  /* nine guides did not fit a phone as a flat list (2026-10-07): they sit two to a row under a small label */
  .pg-menu-guides { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px;
                    border-top: 1px solid var(--line); padding: 12px 0 6px; }
  .pg-menu-k { grid-column: 1 / -1; margin: 0 0 2px; font-family: var(--f-machine); font-size: var(--t-micro);
               text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400); }
  .pg-menu nav .pg-menu-guides a { font-size: 13px; padding: 11px 0; line-height: 1.3; }
  .pg-menu nav .pg-menu-guides a[aria-current="page"] { padding-left: 10px; }
}
/* a comparison table with four answer columns keeps its width and scrolls in its box on a phone (2026-10-07) */
.pg-table.is-grid table { min-width: 640px; }
.pg-table.is-grid td { font-size: 15px; }
.pg-table.is-prose.is-grid tbody th { width: 18%; }