/* pages.css — the static pages on the App Direction: /faq, /privacy, and the two
   one-card screens, error and offline. Loaded by screenCss: ['pages'] (faq, privacy) and by a link
   inside the view (error, offline — their routes are not ours to touch).
   Source of truth for the look: the App Kit v5 sheet + public/brand/dpt.v5.css. */

.pg { max-width: 720px; margin: 0 auto; }
body:has(.topbar--app) .pg { max-width: none; }
body:has(.topbar--app) .pg-head { margin-inline: 0; }
/* The title and intro start where the text inside a card starts: the card's border plus its padding. */
.pg-head { margin: 10px 0 16px; padding-inline: 21px; }
.pg-h { margin: 0 0 6px; font-size: var(--dp4-t-h1); font-weight: 600; letter-spacing: -.01em; }
.pg-lede { margin: 0; font-size: 15px; line-height: 1.55; color: var(--dp4-text-2); }
.pg-lede a { color: var(--dp4-link); }

.pg-card { margin: 0 0 12px; padding: 20px; }
.pg-q { margin: 0 0 10px; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--dp4-text); }

.pg-card p {
  margin: 0 0 10px;
  font-size: 16px; line-height: 1.6;
  color: color-mix(in srgb, var(--dp4-text) 90%, transparent);
}
.pg-card p:last-child { margin-bottom: 0; }
.pg-card strong { font-weight: 600; color: var(--dp4-text); }
.pg-card a { color: var(--dp4-link); }

.pg-card ul { margin: 0 0 10px; padding: 0; list-style: none; }
.pg-card ul:last-child { margin-bottom: 0; }
.pg-card li {
  position: relative; padding: 0 0 0 18px; margin: 0 0 8px;
  font-size: 16px; line-height: 1.55;
  color: color-mix(in srgb, var(--dp4-text) 90%, transparent);
}
.pg-card li:last-child { margin-bottom: 0; }
.pg-card li::before {
  content: ""; position: absolute; left: 2px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--dp5-text-3);
}

/* The policy table rides shell.css's table.report rules; only the frame is set here. */
.pg-table { width: 100%; border-collapse: collapse; margin: 0 0 14px; }
/* The head sits on raised, so its label is text-2 (6.59:1 there). */
.pg-table th { background: var(--dp5-raised); color: var(--dp5-text-2); }
.pg-table th:last-child, .pg-table td:last-child { text-align: right; white-space: nowrap; }
.pg-table td:first-child, .pg-table th:first-child { width: 62%; padding-left: 0; }
.pg-table td { font-size: 15px; color: color-mix(in srgb, var(--dp4-text) 90%, transparent); }

.pg-foot {
  margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--dp4-text-2);
}
.pg-foot a { color: var(--dp4-text-2); text-decoration: underline; }
.pg-foot a:hover { color: var(--dp4-text); }

@media (max-width: 768px) {
  .pg-card { padding: 18px 16px; }
  .pg-head { padding-inline: 17px; }
  .pg-q { font-size: 18px; }
  .pg-table td, .pg-table th { padding-left: 0; }
  .pg-table td:first-child { padding-right: 12px; white-space: normal; }
}

/* Signed out, Privacy and FAQ have no tab bar, so a phone gets the mark as the way back to sign-in. */
@media (max-width: 768px) {
  body.is-anon:has(.pg) .brand { display: inline-flex !important; min-height: 44px; }
  body.is-anon:has(.pg) .topbar-in { padding: 8px 16px 0; }
}

/* No app nav on these two, so the top bar would only repeat the lockup that sits inside the card. */
body.is-anon:has(.pg-mini) .topbar { display: none; }
body:has(.pg-mini) .footer { border-top: 0; }
/* Column, not row: footer.ejs's install card is a sibling of .pg-mini inside <main>,
   so the default flex row sat them two-up at 390 / 768 / 1440. */
main:has(.pg-mini) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 24px;
  min-height: calc(100vh - 140px);
  min-height: calc(100dvh - 140px);
}
/* On a phone the footer carries 100px of bottom padding, so the card area is shorter or the page scrolls by that much. */
@media (max-width: 768px) {
  main:has(.pg-mini) { min-height: calc(100vh - 212px); min-height: calc(100dvh - 212px); }
}
main:has(.pg-mini) > .pg-mini,
main:has(.pg-mini) > .install-card {
  width: 100%;
  max-width: 420px;
}
/* The × is 44px on coarse (styles.css) at top/right 8px, so it occupies 52px from the card edge.
   Pad the card to that, instead of stacking another 48px on the card's own 40px. */
main:has(.pg-mini) > .install-card { padding-right: 52px; }

.pg-mini { width: 100%; display: flex; justify-content: center; }
.pg-mini-card {
  width: 100%; max-width: 420px; padding: 32px 24px; text-align: center;
}
.pg-mini-mark { display: block; height: 26px; width: auto; margin: 0 auto 24px; }
/* The kit's 44px touch height does nothing on an inline link. Padding grows the hit target and moves nothing. */
@media (max-width: 768px), (pointer: coarse) { .pg-mini .dp4-link { padding: 14px 0; } }
.pg-mini-h { margin: 0 0 8px; font-size: var(--dp4-t-title); font-weight: 600; letter-spacing: -.01em; }
.pg-mini-p {
  margin: 0 0 20px; font-size: 16px; line-height: 1.55;
  color: var(--dp4-text-2);
}