/*
 * MailPush site style: a white page, one accent color, thin lines between sections, the system's
 * own fonts, large touch targets, and a dark mode. Nothing here loads from outside
 * (the page policy allows styles from the site only), so no imports, no web fonts, no images.
 * The page is 68rem (1088px) wide; long text keeps a line of about 70 characters (--measure).
 * San Francisco comes first in the font stack on Apple devices, which have it built in: no font
 * file is served, because Apple's license does not allow serving San Francisco to other devices.
 *
 * Colors: every color is a variable, declared in four places and nowhere else. The light values are
 * on :root. The dark values are under prefers-color-scheme (Auto, the default: the page follows the
 * device and switches when the device does) unless Light was chosen, and again under data-theme="dark"
 * (Dark was chosen). The server puts data-theme on the html element from the person's cookie, so the
 * first paint is in the right theme; Auto puts nothing. Print always uses the light values, so a dark
 * page does not print pale text on white paper. tests/php/ThemeCssTest.php holds all four places to the
 * same list, forbids a color anywhere else, and checks WCAG AA contrast for each pair in both themes.
 */
:root {
  --shadow: rgba(16, 24, 40, 0.18);
  /* The logo: the same blue in both themes. */
  --mark-a: #3d8bff;
  --mark-b: #0b5fd6;
  --mark-fg: #ffffff;
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #16181d;
  --muted: #5a606b;
  --line: #e3e5e9;
  --line-strong: #b9bec7;
  --field-line: #7d8591;
  --accent: #0b5fd6;
  --accent-fg: #ffffff;
  --accent-soft: #eaf2ff;
  --surface: #f5f6f8;
  --problem: #b42318;
  --page: 68rem;
  --measure: 44rem;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-theme="light"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1114;
    --fg: #eceef2;
    --muted: #a3a9b4;
    --line: #2a2e35;
    --line-strong: #4a505b;
    --field-line: #6b7280;
    --accent: #7db0ff;
    --accent-fg: #08111f;
    --accent-soft: #16233a;
    --surface: #171a1f;
    --problem: #ff8a7d;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1114;
  --fg: #eceef2;
  --muted: #a3a9b4;
  --line: #2a2e35;
  --line-strong: #4a505b;
  --field-line: #6b7280;
  --accent: #7db0ff;
  --accent-fg: #08111f;
  --accent-soft: #16233a;
  --surface: #171a1f;
  --problem: #ff8a7d;
}

@media print {
  :root:not([data-theme="light"]), :root[data-theme="dark"] {
    color-scheme: light;
    --bg: #ffffff;
    --fg: #16181d;
    --muted: #5a606b;
    --line: #e3e5e9;
    --line-strong: #b9bec7;
    --field-line: #7d8591;
    --accent: #0b5fd6;
    --accent-fg: #ffffff;
    --accent-soft: #eaf2ff;
    --surface: #f5f6f8;
    --problem: #b42318;
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* scrollbar-gutter: the space of a scroll bar is kept on every page, so the layout stays put between a page that scrolls and one that does not */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  /* A column as tall as the window, so the footer sits at the bottom of a short page. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 16px;
}

/* Skip link: visible only while it has the keyboard focus. */
.skip {
  position: absolute;
  left: 8px;
  top: -4rem;
  padding: 10px 14px;
  background: var(--bg);
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 8px;
  z-index: 10;
}
.skip:focus { top: 8px; }

/* Header: the logo on the left, the menu, and the appearance button at the far right. On a phone the menu
   takes its own row under the logo. */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 28px;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--fg);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand svg { flex: none; }
.brand .mark-a { stop-color: var(--mark-a); }
.brand .mark-b { stop-color: var(--mark-b); }
.brand .mark-m { fill: none; stroke: var(--mark-fg); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.brand .mark-ln { fill: none; stroke: var(--mark-fg); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.site-header nav { display: flex; gap: 0 24px; }
.site-header nav a {
  display: inline-block;
  padding: 20px 0 18px;
  color: var(--muted);
  font-size: 0.975rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.site-header nav a:hover { color: var(--fg); }
.site-header nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }

@media (max-width: 40rem) {
  .site-header .wrap { gap: 0 12px; padding-top: 8px; }
  .site-header nav { order: 3; flex: 1 0 100%; gap: 0 18px; overflow-x: auto; scrollbar-width: none; }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { padding: 8px 0 12px; font-size: 0.95rem; }
}

/* Appearance: one round button that shows the current choice (Auto, Light or Dark) and moves to the next.
   It is a form that works without a script; site.js applies a choice at once. */
form.theme { margin: 0; }
button.theme-toggle {
  width: 40px;
  min-height: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
}
button.theme-toggle:hover { background: var(--surface); filter: none; }

.ti { display: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle[data-theme-current="auto"] .ti-auto,
.theme-toggle[data-theme-current="light"] .ti-light,
.theme-toggle[data-theme-current="dark"] .ti-dark { display: block; }

/* The sponsor button at the right end of the header, after the appearance button: a round button like it, with a
   yellow cup. The words are for screen readers and the tooltip. */
.site-header a.sponsor { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; margin-left: -14px; border: 1px solid var(--line); border-radius: 50%; color: var(--fg); text-decoration: none; }
.site-header a.sponsor:hover { background: var(--surface); }
.sponsor svg { flex: none; }
.sponsor .cup, .sponsor .lid { fill: #ffdd00; stroke: #000000; stroke-width: 1.2; stroke-linejoin: round; }
.sponsor .steam { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; }
.site-header a.sponsor span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 40rem) {
  .site-header a.sponsor { margin-left: 2px; }
}

/* Footer */
.site-footer {
  margin-top: 64px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.9375rem;
}
.site-footer .wrap { padding-top: 28px; padding-bottom: 40px; }
.site-footer p { margin: 0 0 12px; max-width: var(--measure); }
/* The footer's links are the top bar's, in its gray. */
.site-footer .links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0 0 12px; }
.site-footer .links a { padding: 4px 0; color: var(--muted); font-size: 0.975rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.site-footer .links a:hover { color: var(--fg); }
.site-footer .small { font-size: 0.8125rem; }

/* Page body: one column, sections divided by a thin line. */
main {
  display: block;
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 8px 16px 0;
}
main > section { border-top: 1px solid var(--line); padding: 36px 0; }
main > section:first-child { border-top: 0; }
main > section:first-child > h1:first-child { margin-top: 24px; }

/* Long text keeps a readable line on a wide page. */
main p, main li, main dd, main dt, main h1, main h2, main h3 { max-width: var(--measure); }
.notice, dl.values { max-width: var(--measure); }
main form { max-width: 36rem; }
main form.theme { max-width: none; }

h1, h2, h3 { line-height: 1.25; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 5vw, 2.5rem); letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; margin-top: 28px; }
p, ul, ol, dl { margin: 0 0 16px; }
ul, ol { padding-left: 1.4em; }
li { margin-bottom: 6px; }
strong { font-weight: 650; }
.lead { font-size: 1.1875rem; color: var(--muted); }
.small, .hint { color: var(--muted); font-size: 0.9375rem; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

code, kbd {
  font-family: var(--mono);
  font-size: 0.92em;
  padding: 0.1em 0.4em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  overflow-wrap: anywhere;
}

/* Buttons: links and real buttons look the same and say exactly what they do. */
.button, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-fg);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.button:hover, button:hover { filter: brightness(1.08); text-decoration: none; }
/* A button of a form that was sent is locked (site.js) until the page changes: it looks locked and does not brighten. */
button:disabled { opacity: 0.6; cursor: default; filter: none; }
.button.secondary, button.secondary { background: transparent; color: var(--accent); }
.button.danger, button.danger { background: transparent; color: var(--problem); border-color: var(--problem); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 8px; }

/* Forms */
label { display: block; margin: 18px 0 6px; font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--field-line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--accent); }
textarea { min-height: 7rem; resize: vertical; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0; font-weight: 400; }
.check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); }
form .actions { margin-top: 36px; }
/* The trap field of the request form: out of sight for people, in the page for scripts. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Notices */
.notice {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--accent-soft);
}
.notice.problem { border-color: var(--problem); background: transparent; }
.notice p:last-child { margin-bottom: 0; }

/* Narrow phones: the page already has a 16px gutter; make the actions fill the width. */
@media (max-width: 30rem) {
  .actions .button, .actions button { flex: 1 1 100%; }
  .hero .actions .textlink { flex: 0 0 auto; margin: 0 auto; }
  .hero .sub { font-size: 1.1rem; }
  main > section, .guide-body > section { padding: 28px 0; }
  .shots svg.draw { margin: 0 auto; }
  details.toc-phone .toc a { padding-top: 10px; padding-bottom: 10px; }
}

@media (prefers-reduced-motion: no-preference) {
  .button, button { transition: filter 0.12s ease, background-color 0.12s ease; }
}

/* ---- Home */

main > section.hero { padding: 64px 0 8px; }
.hero h1 { font-size: clamp(1.8rem, 7.4vw, 3.4rem); line-height: 1.1; max-width: 18em; margin: 0; }
.hero .sub { margin: 16px 0 0; font-size: 1.25rem; color: var(--muted); max-width: 40em; }
.hero .actions { align-items: center; margin: 24px 0 0; }
.hero .textlink { font-weight: 600; text-decoration: none; padding: 10px 4px; }
.hero .textlink:hover { text-decoration: underline; }
.hero .notice { margin: 24px 0 0; }
/* The home page uses the whole width of the page: the video, and the table across the page. */
main > section.film-wrap { border-top: 0; padding: 32px 0 36px; }
#features p, #features .table-scroll { max-width: none; }

/* What the Gmail app does not have (content/home/50-apple-mail.php): cards like Getting started, three in a row, one under the other on a phone. */
ul.perks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
ul.perks > li { margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); max-width: none; }
ul.perks h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.05rem; }
.perk-icon { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--accent-soft); fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
ul.perks p { margin: 0; color: var(--muted); font-size: 0.975rem; }
@media (max-width: 44rem) { ul.perks { grid-template-columns: 1fr; } }


/* The home page video (content/home/15-film.php): the whole width of the page, rounded like the cards, on the
   dark of its own first frame while it loads. With Reduce Motion it stays on its still image (site.js). */
.film { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 22px; background: #0c1324; box-shadow: 0 18px 50px var(--shadow); }

/* The three highlights under the video (content/home/17-highlights.php): a white symbol on a tile in the blue of
   the logo, a title, a line. */
main > section.highlights-wrap { border-top: 0; padding: 12px 0 48px; }
ul.highlights { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
ul.highlights > li { margin: 0; max-width: none; text-align: center; }
.hl-icon {
  display: block;
  width: 64px;
  height: 64px;
  padding: 16px;
  margin: 0 auto 20px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--mark-a), var(--mark-b));
  box-shadow: 0 10px 24px rgba(11, 95, 214, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  fill: var(--mark-fg);
}
.hl-icon .cut { fill: none; stroke: var(--mark-b); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
ul.highlights h3 { margin: 0 0 6px; font-size: 1.25rem; letter-spacing: -0.01em; }
ul.highlights p { margin: 0; color: var(--muted); max-width: none; }
@media (max-width: 44rem) {
  ul.highlights { grid-template-columns: 1fr; gap: 28px; }
  ul.highlights > li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; text-align: left; }
  .hl-icon { grid-row: span 2; width: 56px; height: 56px; padding: 14px; border-radius: 16px; margin: 0; }
}

/* Getting started: three numbered cards in a row, one under the other on a phone. */
ol.path { list-style: none; counter-reset: path; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
ol.path > li { counter-increment: path; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); max-width: none; }
ol.path > li::before {
  content: counter(path);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  font-size: 0.95rem;
}
ol.path h3 { margin: 0 0 6px; font-size: 1.05rem; }
ol.path p { margin: 0; color: var(--muted); font-size: 0.975rem; }

@media (max-width: 44rem) {
  ol.path { grid-template-columns: 1fr; }
  /* The table of features on a phone: the feature and its Yes or No on one line, the details under them. */
  table.support, table.support tbody, table.support tr, table.support th, table.support td { display: block; width: auto; }
  table.support tr:not(.group) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
  main table.support tr:not(.group) > th, main table.support tr:not(.group) > td { width: auto; padding: 0; border-top: 0; }
  main table.support tr:not(.group) > td:last-child { grid-column: 1 / -1; padding-top: 4px; }
  table.support tr.group th { padding: 24px 0 4px; }
  table.support tr.group:first-child th { padding-top: 0; }
}

/* What works and what does not. */
.table-scroll { overflow-x: auto; max-width: var(--measure); }
table.support { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 0.975rem; }
table.support th, table.support td { padding: 12px 12px 12px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
table.support thead th { border-top: 0; color: var(--muted); font-size: 0.875rem; font-weight: 600; }
table.support tbody th { font-weight: 600; }
table.support td { color: var(--muted); }
table.support .yes, table.support .no { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
table.support .yes { color: var(--accent); }
table.support .no { color: var(--muted); }
table.support .mk { flex: none; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
table.support tr.group th { padding-top: 28px; border-top: 0; color: var(--fg); font-size: 1.05rem; }
table.support tr.group:first-child th { padding-top: 4px; }
table.support tbody th[scope="row"] { width: 30%; padding-right: 24px; }
table.support td:first-of-type { width: 6.5rem; padding-right: 24px; }

/* ---- How to connect: a menu of the page beside the text on a wide screen, and a menu to open at the top on a phone. */

.guide { display: grid; grid-template-columns: minmax(0, 1fr); }
.guide-body > section { border-top: 1px solid var(--line); padding: 36px 0; }
.guide-body > section:first-child { border-top: 0; padding-bottom: 12px; }
.guide-body > section:first-child > h1:first-child { margin-top: 24px; } /* the heading starts where it does on a page without the menu */
@media (max-width: 30rem) { /* the narrow phone spacing of every other page (the rule for main > section above comes before these) */
  .guide-body > section { padding-top: 28px; padding-bottom: 28px; }
  .guide-body > section:first-child { padding-bottom: 12px; }
}
.guide-body section, .guide-body li[id], .guide-body h2[id], .guide-body h3[id] { scroll-margin-top: 20px; }

.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a { display: block; padding: 5px 10px; border-radius: 8px; color: var(--muted); font-size: 0.9rem; line-height: 1.35; text-decoration: none; }
.toc a:hover { background: var(--surface); color: var(--fg); }
.toc > ol > li > a { color: var(--fg); font-weight: 600; margin-top: 10px; }
.toc > ol > li:first-child > a { margin-top: 0; }
.toc ol ol a { padding-left: 20px; }
.toc-title { margin: 0 0 8px; padding: 0 10px; color: var(--muted); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* Below the width of the side menu, the menu is a bar across the screen that stays at the top once the page is
   scrolled past it. It names the part being read (site.js) and opens the list when tapped. */
details.toc-phone { position: sticky; top: 0; z-index: 20; margin: 20px -16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
details.toc-phone summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; list-style: none; cursor: pointer; }
details.toc-phone summary::-webkit-details-marker { display: none; }
details.toc-phone summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-3px) rotate(45deg); }
details.toc-phone[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.toc-label { flex: none; color: var(--muted); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.toc-current { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
details.toc-phone > .toc { position: absolute; left: 0; right: 0; top: 100%; max-height: 60vh; overflow-y: auto; padding: 4px 10px 12px; border-bottom: 1px solid var(--line); background: var(--bg); box-shadow: 0 16px 30px var(--shadow); } /* over the page, so opening it moves nothing */
.guide-body [id] { scroll-margin-top: 64px; } /* a part jumped to is not hidden under the bar */
aside.toc-side { display: none; }

@media (min-width: 64rem) {
  .guide { grid-template-columns: 14rem minmax(0, 1fr); gap: 0 56px; align-items: start; }
  aside.toc-side { display: block; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: 64px 0 24px; } /* its title in line with the heading */
  details.toc-phone { display: none; }
  .guide-body [id] { scroll-margin-top: 0; }
}

/* Questions: a heading, then its answer. */
.guide-body section.qa { padding: 24px 0; }
.qa h3 { margin: 0 0 8px; font-size: 1.1rem; }
.qa p:last-child, .qa ul:last-child { margin-bottom: 0; }
.guide-body > section.qa-head { padding-bottom: 8px; }

/* The values to type, the steps and the line drawings of the iPhone screens. */
dl.values { margin: 0 0 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
dl.values dt { margin-top: 12px; font-weight: 650; }
dl.values dt:first-child { margin-top: 0; }
dl.values dd { margin: 2px 0 0; }

ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
ol.steps > li { counter-increment: step; position: relative; margin: 0; padding: 28px 0 28px 56px; border-top: 1px solid var(--line); max-width: none; }
ol.steps > li:first-child { border-top: 0; padding-top: 4px; }
ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 26px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}
ol.steps > li:first-child::before { top: 2px; }
ol.steps h3 { margin: 4px 0 8px; }

.shots { margin: 18px 0 4px; }
.shots figure { margin: 0; max-width: 100%; }

svg.draw { display: block; max-width: 100%; height: auto; }
.draw .ln { fill: none; stroke: var(--fg); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.draw .soft { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-linecap: round; }
.draw .ck { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.draw .on { fill: var(--accent); stroke: var(--accent); }
.draw .knob { fill: var(--bg); stroke: var(--fg); stroke-width: 1.3; }
.draw .knob.on { stroke: var(--accent); }
.draw .hi { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.5; }
.draw .fill { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.draw .ring { fill: var(--accent); fill-opacity: 0.2; stroke: var(--accent); stroke-width: 1.5; }
.draw .dot { fill: var(--accent); }
.draw text { fill: var(--fg); font: 12.5px var(--font); }
.draw .t { fill: var(--fg); }
.draw .tb { font-weight: 650; }
.draw .tm { fill: var(--muted); }
.draw .ta { fill: var(--accent); }
.draw .sm { font-size: 10.5px; }
.draw .xs { font-size: 9.5px; letter-spacing: 0.04em; }
.draw .warn { fill: var(--problem); }
.draw .warn-mark { fill: none; stroke: var(--bg); stroke-width: 4; stroke-linecap: round; }
.draw .bar { fill: var(--line); }
.draw .link { fill: none; stroke: var(--accent); stroke-width: 1.2; }

/* Google's warning on the Connect to Google page: a box that stands out, with the two sketches side by side. */
.google-warning { margin: 24px 0; padding: 18px 20px; border: 2px solid var(--problem); border-radius: 14px; background: var(--surface); }
.google-warning h2 { margin-top: 0; }
.google-warning .shots { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.google-warning .shots figure { flex: 0 1 240px; }
.google-warning figcaption { margin-top: 8px; text-align: center; font-weight: 600; }

@media (max-width: 30rem) {
  ol.steps > li { padding-left: 0; padding-top: 60px; }
  ol.steps > li:first-child { padding-top: 48px; }
  ol.steps > li::before { top: 16px; }
  ol.steps > li:first-child::before { top: 2px; }
}

/* Onboarding: the MailPush password, shown once. */
.password { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 8px 0 12px; }
.password code { font-size: 1.35rem; letter-spacing: 0.04em; padding: 0.3em 0.6em; user-select: all; }

/* Account page: the devices, with a table of folders. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
form.inline { display: inline; margin: 0; }
table.folders { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 8px 0 24px; font-size: 0.9375rem; }
table.folders th:first-child { width: 40%; }
table.folders th:last-child { width: 6.5rem; }
table.folders th, table.folders td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
table.folders thead th { border-top: 0; color: var(--muted); font-weight: 600; }
table.folders tbody th { font-weight: 500; }
table.folders button { min-height: 36px; padding: 0 14px; }

@media print {
  .site-header nav, .site-header .sponsor, .skip, .theme, .toc-side, .toc-phone { display: none; }
}
@media (max-width: 44rem) {
  main > section.hero { padding: 32px 0 0; }
}
.toc a[aria-current="true"] { background: var(--accent-soft); color: var(--accent); }

/* Back to the top (site.js, app.js): bottom right, clear of the iPhone's home bar. */
.to-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 2px 10px var(--shadow);
}
.to-top[hidden] { display: none; }
.to-top:hover { color: var(--accent); }
.to-top svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media print { .to-top { display: none; } }