/* ---------------------------------------------------------------------------
   The information pages: giới thiệu, phương pháp, nguồn, điều khoản, bảo mật.

   They are read once, by someone deciding whether to trust the site, so they are
   plain prose — every one of them is complete with JavaScript turned off, including its
   footer. The one script they load is `/subscribe.js`, and the form degrades to a plain
   POST-less <form> without it.

   These pages used to carry a short footer of their own — one paragraph and a row of
   inline links — on the grounds that copying the long one into five static files by hand
   would mean five copies drifting apart. That was answering the right worry with the
   wrong fix. The drift is real, but the answer to it is the test that already existed
   for the other two copies: `tests/view/view_test.ts` compares the link set of every
   copy against index.html, so a sixth and seventh copy cost a line in that test rather
   than a divergent design. What the short footer actually bought was a visibly different
   site on the five pages whose whole job is making the site look trustworthy.
   The `.footshort` rules that styled it are gone with it.
   --------------------------------------------------------------------------- */
/* The prose sits on a card, as everything else on the site does. It used to run straight
   on the page ground, which was defensible while the home screen was a grey page with
   bordered blocks on it and stopped being so the moment every block on that screen grew
   a white ground and a shadow: crossing from the home screen to "Giới thiệu" looked like
   crossing to a different site, which is exactly the failure the shared footer exists to
   prevent.

   760 + 32 of padding each side, so the card is 64px wider than the column it replaced.
   Tried at 800 first: the 70ch measure then ended 150px short of the card's right edge
   and the block read as text pushed against its own left margin.

   Every rule below is scoped to `main` rather than to `.info`, and that is not tidiness.
   `.info` is on <body>, so `.info a{color:var(--accent)}` and `.info h2{color:var(--head)}`
   reached into the shared footer the moment it arrived here: the link columns came out
   red at 1.75 line-height and the column headings came out navy on near-black, which is
   invisible. A rule written for an article has to say so. */
.info main{display:block;max-width:760px;margin:32px auto 0;padding:24px 32px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--card-shadow)}
/* Navy, the same as every heading on the home screen. These are headings *about* the
   site — none of them is the text of a law — so the serif/ink pairing that the document
   pages use does not apply here. */
.info main h1{font-size:24px;line-height:1.3;margin:8px 0 12px;letter-spacing:-.01em;
  color:var(--head)}
.info main .lead{font-size:15px;line-height:1.65;color:var(--muted);margin:0 0 28px;max-width:62ch}
.info main h2{font-size:17px;margin:32px 0 12px;color:var(--head)}
.info main h3{font-size:14px;margin:24px 0 8px;color:var(--head)}
.info main p,.info main li{font-size:14px;line-height:1.75}
.info main p{margin:0 0 12px;max-width:70ch}
.info main ul,.info main ol{margin:0 0 16px;padding-left:20px;max-width:70ch}
.info main li{margin:0 0 8px}
.info main a{color:var(--accent)}
/* The breadcrumb is the first child of `main`, so it is inside the card rather than above
   it — the alternative was moving one <p> in five static files to gain a line of page
   ground. It gets a rule under it instead, which is what separates a way-out from the
   article it leads out of. */
.info main .crumbs{margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
@media (max-width:640px){.info main{margin-top:20px;padding:20px}}
.info main .updated{font-size:13px;color:var(--muted);margin-top:40px;
  border-top:1px solid var(--line);padding-top:16px}

/* A number printed in prose is a claim about a specific release. These come from the
   database that is being served, and the date beside them says which one — a figure with
   no date on a corpus that grows weekly is a figure that will quietly become false. */
.info main dl.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px 24px;margin:24px 0;padding:16px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.info main dl.facts dt{font-size:12px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em}
.info main dl.facts dd{margin:3px 0 0;font-size:20px;font-variant-numeric:tabular-nums}

/* The draft notice on Điều khoản and Chính sách bảo mật. It is a box rather than a
   sentence because the thing it says — nobody qualified has reviewed this text — is the
   single most important fact on those two pages, and a reader who skims must still meet
   it before the clauses it applies to. */
.info main .draft{border:1px solid var(--warn-line,var(--line));background:var(--warn-bg,transparent);
  border-left:3px solid var(--accent);padding:16px;margin:0 0 24px;border-radius:12px}
/* `>b`, not `b`: the label above the notice is a block, but both notices also emphasise a
   clause inside their sentence — "chưa qua rà soát của người hành nghề luật" — and as a
   block that clause broke the warning into three fragments, the last one opening with a
   stray full stop. The one sentence a skimming reader must read was the one cut in two. */
.info main .draft>b{display:block;margin-bottom:4px;font-size:14px}
.info main .draft p{margin:0;font-size:14px;color:var(--muted)}

/* The footer is the home screen's, styled by app.css. All that is left here is the gap
   above it and the 1180px measure these pages read at — the home screen's 1560px footer
   would hang off both sides of an 800px column, which is the same correction doc.css
   makes for the document pages. */
.info footer{margin-top:56px}
.info .footcols{max-width:1180px;padding:0 20px}
.info .footnote{max-width:1180px;padding:14px 20px 20px}