/* The illustrated guides (docs/guides, built by scripts/guides/build.mjs): the app's own type and colours, one
   stylesheet for the screen and for print. Light only: the screenshots are light, and the page prints.
   The page is a grid of step cards, each a big screenshot with its line: three across on a laptop, two side by side on
   a Letter page, one on a phone. The whole explanation is on the "screens explained" page (more.html). */
@font-face { font-family: "Source Serif 4"; src: url(fonts/source-serif-4-latin-wght-normal.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ink: #1b2629; --muted: #56656a; --ground: #f6f4ee; --panel: #ffffff; --panel-2: #faf8f3;
  --line: #e4e0d6; --line-strong: #7a8280;
  --brand: #1f5f6b; --brand-ink: #174a54; --brand-soft: #e4f0f1;
  --accent-ink: #7e5a17; --accent-soft: #f6ebd3;
  --info-soft: #e1ebf4;
  --t-fine: 0.8125rem; --t-small: 0.9375rem; --t-body: 1.125rem; --t-lede: 1.3125rem; --t-line: 1.25rem; --t-h3: 1.4375rem; --t-h2: 1.875rem; --t-h1: 2.5rem;
}
* { box-sizing: border-box; }
html { background: var(--ground); }
body { margin: 0; font-family: var(--font-text); font-size: var(--t-body); line-height: 1.45; color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.15; text-wrap: balance; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p { margin: 0 0 10px; }
a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand); }
ul, ol { margin: 0 0 10px; padding-left: 22px; }
li { margin: 0 0 4px; }
.fine { font-size: var(--t-fine); color: var(--muted); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* the top */
.head { padding: 20px 0 10px; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.brand svg { width: 38px; height: 38px; border-radius: 10px; }
.brand b { font-family: var(--font-display); font-size: 1.1875rem; }
.brand small { display: block; font-size: var(--t-fine); color: var(--muted); }
.kicker { font-size: var(--t-small); font-weight: 600; color: var(--accent-ink); margin: 0 0 6px; letter-spacing: .01em; }
.lede { font-size: var(--t-lede); color: var(--muted); margin: 8px 0 0; max-width: 64ch; }
.contents { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: var(--t-small); }
.contents a { font-weight: 600; }
.print-link { font-size: var(--t-small); margin: 10px 0 0; }
/* the cover: on the screen the page's head, in print the first page by itself */
.head.cover .brand svg { width: 48px; height: 48px; border-radius: 12px; }
.head.cover h1 { font-size: var(--t-h1); max-width: 20ch; }
.head.cover .meta { font-size: var(--t-small); color: var(--muted); margin: 12px 0 0; }
.head.cover .cover-foot { font-size: var(--t-fine); color: var(--muted); margin: 14px 0 0; max-width: 80ch; }

/* a part: your first day, your first week */
.part { padding: 16px 0 6px; border-top: 1px solid var(--line); }
.part > h2 { margin-bottom: 2px; }
.part > .lede { font-size: var(--t-body); margin: 0 0 10px; }

/* the steps: cards in a grid; a phone screen is tall, so three cards across; a laptop screen is wide, so two */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.steps.wide { grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); }
.step { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 14px 12px; break-inside: avoid; page-break-inside: avoid; }
.step h3 { display: flex; gap: 10px; align-items: baseline; font-size: var(--t-h3); }
.step h3 .n { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--font-text); font-size: 1rem; font-weight: 600; display: grid; place-items: center; line-height: 1; transform: translateY(-2px); }
.step .line { font-size: var(--t-line); line-height: 1.35; margin: 0; }
.step .catch { font-size: var(--t-small); line-height: 1.35; margin: 0; padding: 8px 10px; background: var(--accent-soft); border-radius: 10px; color: #4e3a0c; }
.step .catch b { color: var(--accent-ink); }
.step .more-link { font-size: var(--t-small); margin: 0; }
.step figure { margin: 2px 0 0; }
.step img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.step figure a.shot { display: block; border-radius: 12px; cursor: zoom-in; }
.step figure a.shot:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.step figcaption { font-size: var(--t-fine); color: var(--muted); margin-top: 6px; }
.watch { margin: 4px 0 0; }
.watch video { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: #1b2629; }
.watch figcaption { font-size: var(--t-fine); color: var(--muted); margin-top: 6px; }

/* the screens explained (more.html): the whole explanation, one block per step */
.more { padding: 10px 0 20px; }
.more .block { padding: 16px 0 4px; border-top: 1px solid var(--line); }
.more .block:first-of-type { border-top: 0; }
.more .block h3 { font-size: 1.375rem; margin-bottom: 8px; }
.more .block h3 .n { color: var(--muted); font-family: var(--font-text); font-size: var(--t-small); font-weight: 600; margin-right: 8px; }
.more .block p, .more .block li { max-width: 70ch; }
.more .block .lede { font-size: var(--t-body); margin: 0 0 10px; }
.more .back { font-size: var(--t-small); margin: 6px 0 0; }
.note { background: var(--info-soft); border-radius: 12px; padding: 12px 16px; margin: 0 0 12px; max-width: 70ch; }
.note p:last-child { margin-bottom: 0; }

.foot { padding: 18px 0 36px; border-top: 1px solid var(--line); font-size: var(--t-fine); color: var(--muted); }
.foot p { max-width: 90ch; }

@media (max-width: 640px) {
  :root { --t-h1: 2rem; --t-h2: 1.625rem; --t-h3: 1.3125rem; --t-line: 1.1875rem; }
  .wrap { padding: 0 12px; }
  /* EASY-1027-M37: one column as wide as the screen, never as wide as a step's longest word (200% zoom, 195 px) */
  .steps, .steps.wide { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .step { padding: 12px 12px 10px; min-width: 0; overflow-wrap: break-word; }
  .step h3 > span { min-width: 0; }
}
/* EASY-1027-L12: on a phone the guide's own links (contents, print, "More about this", back, the footer) are 44 px
   targets; each stays in its line, which grows around it. Screen only: the printed guide and its PDF are unchanged */
@media screen and (max-width: 899px) {
  .contents a, .print-link a, .more-link a, .more .back a, .foot a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 359px) {
  :root { --t-h1: 1.5rem; --t-h2: 1.3125rem; --t-h3: 1.0625rem; }
  .wrap { padding: 0 8px; }
  .step { padding: 10px 8px 8px; }
}

@media print {
  @page { size: letter; margin: 12mm 12mm; }
  :root { --t-body: 12pt; --t-line: 13pt; --t-h3: 15pt; --t-h2: 20pt; --t-h1: 26pt; --t-small: 11pt; --t-fine: 10pt; --t-lede: 13pt; }   /* nothing under 13 px in print */
  html, body { background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .print-link, .more-link, .back, .watch { display: none; }
  /* the cover page: the title large, one line on what the guide covers, the mark, the version and the date, the contents */
  .head.cover { break-after: page; min-height: 235mm; display: flex; flex-direction: column; justify-content: center; padding: 0; }
  .head.cover .brand { margin-bottom: 28px; }
  .head.cover .brand svg { width: 64px; height: 64px; border-radius: 14px; }
  .head.cover .brand b { font-size: 16pt; }
  .head.cover .kicker { font-size: 12pt; }
  .head.cover h1 { font-size: 36pt; line-height: 1.1; margin: 6px 0 14px; }
  .head.cover .lede { font-size: 15pt; line-height: 1.35; max-width: 40ch; }
  .head.cover .meta { font-size: 12pt; margin-top: 16px; }
  .head.cover .contents { display: block; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12pt; }
  .head.cover .contents li { margin: 0 0 6px; }
  .head.cover .cover-foot { margin-top: auto; padding-top: 24px; }
  .part { break-before: page; padding: 0 0 4px; border-top: 0; }
  .part > .lede { margin-bottom: 6px; }
  /* two phone steps a page, side by side; a laptop step is its text beside the screen, two a page */
  .steps { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .steps.wide { grid-template-columns: 1fr; gap: 10px; }
  .step { border: 0; padding: 4px 0 6px; gap: 6px; border-radius: 0; }
  .steps.wide .step { display: grid; grid-template-columns: minmax(0, 2fr) 5fr; gap: 6px 14px; align-items: start; }
  .steps.wide .step h3, .steps.wide .step .line, .steps.wide .step .catch, .steps.wide .step .more-link { grid-column: 1; }
  .steps.wide .step figure { grid-column: 2; grid-row: 1 / span 4; }
  .step h3 .n { width: 24px; height: 24px; font-size: 11pt; }
  /* a phone screen no taller than 5.9 in, so two steps and the part's heading share a page */
  .step img { border-radius: 8px; width: auto; max-width: 100%; max-height: 5.9in; }
  .steps.wide .step img { max-height: 4.2in; }
  .step figure { break-inside: avoid; }
  .step .catch { padding: 6px 8px; }
  a { color: inherit; text-decoration: none; }
  /* the footer stays with the last row of cards and is small, so no PDF ends on a page holding only its address line */
  .foot { break-before: avoid; break-inside: avoid; padding: 6px 0 0; margin-top: 8px; }
  .foot p { margin: 0 0 3px; }
  .part:last-of-type .step:last-child, .part:last-of-type .step:nth-last-child(2) { break-after: avoid; }
  .more .block { break-inside: avoid; }
  /* build.mjs prints again with the pictures shorter when a PDF would end on a page holding only the footer */
  body[data-fit="1"] .step img { max-height: 5.4in; } body[data-fit="1"] .steps.wide .step img { max-height: 3.9in; }
  body[data-fit="2"] .step img { max-height: 4.9in; } body[data-fit="2"] .steps.wide .step img { max-height: 3.6in; }
  body[data-fit="3"] .step img { max-height: 4.4in; } body[data-fit="3"] .steps.wide .step img { max-height: 3.3in; }
  .more a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: var(--muted); }
}