/* Goal100 "Start Safe" poster · g100-safety-poster.css · v1.0.0 · Nov 10, 2026
   © ZAKAZIKY LLC. Own code. One letter-size page per language (8.5 x 11 in).
   Every size inside the poster is in em, and 1em = poster width / 51, so the same
   drawing fits a phone screen and prints at true size. */
.po-page {
  --ink: #1b1d33; --muted: #5d6280; --line: #dfe2ef;
  margin: 0; padding: 0 0 40px; background: var(--g100-bg, #f5f6fb); color: var(--ink);
  font-family: var(--g100-font, "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 18px; line-height: 1.4;
}
.po-page *, .po-page *::before, .po-page *::after { box-sizing: border-box; }
.po-page [hidden] { display: none !important; }
@media (prefers-color-scheme: dark) { .po-page { background: var(--g100-bg, #11131f); } .po-bar { color: #e8eaf6; } }

/* ---------- screen tool bar (never printed) ---------- */
.po-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; max-width: 848px; margin: 0 auto; padding: 14px 16px; }
.po-bar__sp { flex: 1 1 20px; }
.po-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 46px; min-width: 46px; padding: 8px 18px; border-radius: 12px; border: 2px solid #c9cde0; background: #fff; color: #1b1d33; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.po-btn[aria-pressed="true"] { background: #4338ca; border-color: #4338ca; color: #fff; }
.po-btn--main { background: #4338ca; border-color: #4338ca; color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.po-btn:focus-visible { outline: 3px solid #4338ca; outline-offset: 3px; }
@media (prefers-color-scheme: dark) { .po-btn:focus-visible { outline-color: #a5b4fc; } }
.po-seg { display: inline-flex; gap: 6px; }

/* ---------- the sheet ---------- */
.po {
  position: relative; overflow: hidden;
  width: min(816px, calc(100vw - 32px)); height: calc(min(816px, calc(100vw - 32px)) * 1.2941);
  margin: 0 auto 28px; padding: 1.9em 2.2em 1.3em;
  font-size: calc(min(816px, calc(100vw - 32px)) / 51);
  color: #1b1d33; border-radius: .4em;
  background:
    radial-gradient(60em 26em at 85% -6em, rgba(245, 158, 11, .2), rgba(245, 158, 11, 0) 70%),
    radial-gradient(50em 26em at 0% 0%, rgba(67, 56, 202, .16), rgba(67, 56, 202, 0) 70%),
    #fffdf8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 22px 44px -18px rgba(20, 22, 43, .45);
  display: flex; flex-direction: column;
}
.po h1, .po h2, .po p { margin: 0; }
.po-head { display: flex; align-items: center; gap: 1.4em; }
.po-fox { flex: none; width: 7em; height: 7em; }
.po-fox svg { display: block; width: 100%; height: 100%; }
.po-kicker { font-weight: 700; font-size: 1em; letter-spacing: .16em; text-transform: uppercase; color: #0f766e; }
.po h1 { font-family: var(--g100-display, "Fraunces", Georgia, serif); font-size: 4.6em; line-height: .95; letter-spacing: -.015em; white-space: nowrap; }
.po[lang="es"] h1 { font-size: 3.3em; }
.po-sub { margin-top: .3em; font-size: 1.4em; color: #3d4160; }
.po-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 1.05em .95em; margin: 1.25em 0 1em; padding: 0; list-style: none; }
.po-tile { position: relative; display: flex; flex-direction: column; padding: 1.15em 1.15em 1em 1.2em; border-radius: 1.3em; background: #fff; border: .12em solid var(--c); box-shadow: 0 .35em 0 var(--c); overflow: hidden; }
.po-tile--1 { --c: #4338ca; --cs: #e0e7ff; } .po-tile--2 { --c: #0f766e; --cs: #ccfbf1; } .po-tile--3 { --c: #b45309; --cs: #fdecc8; }
.po-tile--4 { --c: #0f766e; --cs: #ccfbf1; } .po-tile--5 { --c: #b45309; --cs: #fdecc8; } .po-tile--6 { --c: #4338ca; --cs: #e0e7ff; }
.po-top { display: flex; align-items: flex-start; gap: .8em; }
.po-bot { display: flex; align-items: flex-end; justify-content: space-between; gap: .8em; margin-top: auto; padding-top: .6em; }
.po-num { flex: none; display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--c); color: #fff; font-family: var(--g100-display, "Fraunces", Georgia, serif); font-weight: 700; font-size: 1.5em; }
.po-ico { flex: none; width: 5.9em; height: 5.9em; padding: .55em; border-radius: 1.3em; background: var(--cs); }
.po-ico svg { display: block; width: 100%; height: 100%; }
.po-tile h2 { margin-top: .12em; font-family: var(--g100-display, "Fraunces", Georgia, serif); font-size: 1.8em; line-height: 1.08; }
.po-yn { display: flex; flex-direction: column; align-items: flex-start; gap: .45em; font-weight: 700; font-size: 1.06em; line-height: 1.15; }
.po-yn span { display: inline-flex; align-items: center; gap: .45em; padding: .3em .8em .3em .4em; border-radius: 1.2em; }
.po-yn svg { flex: none; width: 1.5em; height: 1.5em; padding: .2em; border-radius: 50%; color: #fff; }
.po-y { background: #e3f6e9; color: #0e4d27; } .po-y svg { background: #15803d; }
.po-n { background: #fde8e4; color: #7a1a10; } .po-n svg { background: #b42318; }
.po-foot { display: flex; align-items: center; gap: .7em; padding-top: .9em; border-top: .12em solid #dfe2ef; font-size: 1.05em; color: #3d4160; }
.po-mark { flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: radial-gradient(circle, #4338ca 0 17%, #fff 18% 40%, #4338ca 41% 62%, #fff 63% 82%, #4338ca 83% 100%); }
.po-foot b { font-family: var(--g100-display, "Fraunces", Georgia, serif); color: #1b1d33; }
.po-foot span:last-child { margin-left: auto; text-align: right; }

/* show one language on screen and in print when the reader picked one */
.po-page[data-show="en"] .po[lang="es"], .po-page[data-show="es"] .po[lang="en"] { display: none; }

/* ---------- print: one true-size letter page per poster ---------- */
@page { size: letter; margin: 0; }
@media print {
  .po-page { padding: 0; background: #fff; }
  .po-bar { display: none !important; }
  .po { width: 8.5in; height: 11in; margin: 0; font-size: 16px; border-radius: 0; box-shadow: none; break-after: page; page-break-after: always; break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .po:last-of-type { break-after: auto; page-break-after: auto; }
}