/* WhispAway's site: the app's grouped-list look (ios/Brand/BRAND.md,
   ios/Brand/mocks/cloud.html). Black and white, light and dark from the
   system, the system font. No third-party requests. */
:root {
  color-scheme: light dark;
  --ground: #F2F2F7;
  --cell: #FFFFFF;
  --ink: #0B0B0C;
  --sec: #6E6E73;
  --ter: #AEAEB2;
  --sep: #D8D8DC;
  --fill: rgba(118, 118, 128, .14);
  --primary: #0B0B0C;
  --on-primary: #FFFFFF;
  --tile: #FFFFFF;
  --tile-mark: #0B0B0C;
  --todo: rgba(255, 59, 48, .16);
}
/* Dark: the system's, unless the visitor chose Light; or the visitor's
   choice of Dark (theme.js sets data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #000000;
    --cell: #1C1C1E;
    --ink: #FFFFFF;
    --sec: #98989F;
    --ter: #5A5A5F;
    --sep: #38383A;
    --fill: rgba(118, 118, 128, .28);
    --primary: #FFFFFF;
    --on-primary: #0B0B0C;
    --tile: #0B0B0C;
    --tile-mark: #FFFFFF;
    --todo: rgba(255, 69, 58, .28);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
    --ground: #000000;
    --cell: #1C1C1E;
    --ink: #FFFFFF;
    --sec: #98989F;
    --ter: #5A5A5F;
    --sep: #38383A;
    --fill: rgba(118, 118, 128, .28);
    --primary: #FFFFFF;
    --on-primary: #0B0B0C;
    --tile: #0B0B0C;
    --tile-mark: #FFFFFF;
    --todo: rgba(255, 69, 58, .28);
  }
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wrap { max-width: 680px; margin: 0 auto; padding: 0 16px calc(56px + env(safe-area-inset-bottom, 0px)); }

a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ter); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--ink); }
a:focus-visible, summary:focus-visible { outline: 2px solid #0A84FF; outline-offset: 2px; border-radius: 4px; }

/* The top bar: the icon tile, the wordmark, the pages. */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 20px 4px 4px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.tile { width: 32px; height: 32px; flex: none; border-radius: 22.37%; background: var(--tile); color: var(--tile-mark); box-shadow: inset 0 0 0 1px var(--sep); }
.tile svg { display: block; width: 100%; height: 100%; }
.word { display: block; height: 19px; width: auto; }
.pages { display: flex; gap: 18px; font-size: 15px; }
.pages a { color: var(--sec); text-decoration: none; }
.pages a:hover { color: var(--ink); }
.pages a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* The page's large title, as the app's. */
h1 { font-size: 34px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 32px 4px 6px; text-wrap: balance; }
.updated { color: var(--sec); font-size: 15px; margin: 0 4px; }
.lede { margin: 14px 4px 0; max-width: 62ch; }

/* Grouped lists: a section header, rounded cells, hairline separators. */
h2 { font-size: 13px; font-weight: 400; color: var(--sec); text-transform: uppercase; letter-spacing: .04em; margin: 30px 16px 7px; }
.group { background: var(--cell); border-radius: 14px; overflow: hidden; }
.cell { padding: 12px 16px; position: relative; }
.cell + .cell::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid var(--sep); }
.cell p { margin: 0 0 10px; }
.cell p:last-child, .cell ul:last-child { margin-bottom: 0; }
.cell ul { margin: 0 0 10px; padding-left: 22px; }
.cell li + li { margin-top: 6px; }
.t1 { font-weight: 600; }
.t2 { color: var(--sec); font-size: 15px; margin-top: 2px; }
.t2 b { color: var(--ink); font-weight: 400; }
.foot { font-size: 13px; color: var(--sec); margin: 7px 16px 0; }

/* Questions that open in place, with the app's chevron. */
details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 4px 0; border-right: 2px solid var(--ter); border-bottom: 2px solid var(--ter); transform: rotate(45deg); transition: transform .2s; }
details[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
details > .answer { margin-top: 8px; color: var(--ink); }
details > .answer p { margin: 0 0 8px; }
details > .answer p:last-child { margin-bottom: 0; }

/* The one filled button: ink in light, white in dark. */
.pbtn { display: inline-block; background: var(--primary); color: var(--on-primary); border-radius: 22px; padding: 12px 24px; font-weight: 600; text-decoration: none; }
.pbtn:hover { opacity: .88; }

/* The home page. */
.hero { text-align: center; padding: 56px 8px 8px; }
.hero .tile { width: 96px; height: 96px; margin: 0 auto 22px; }
.hero .word { height: 34px; margin: 0 auto; }
.hero p { margin: 18px auto 0; max-width: 34ch; font-size: 20px; line-height: 1.35; text-wrap: balance; }
.hero .soon { color: var(--sec); font-size: 15px; margin-top: 14px; }

/* A fact still to fill in: impossible to miss. */
.todo { background: var(--todo); border-radius: 4px; padding: 0 3px; }

.site { margin: 44px 4px 0; font-size: 13px; color: var(--sec); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site a { color: var(--sec); }

@media (max-width: 420px) {
  h1 { font-size: 30px; margin-top: 26px; }
  .pages { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  details > summary::after { transition: none; }
}
.cell ol { margin: 0; padding-left: 22px; }
.cell ol li + li { margin-top: 6px; }
/* A row that opens a page, with the app's chevron. */
.cell > a.rowlink { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: -12px -16px; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.cell > a.rowlink::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--ter); border-top: 2px solid var(--ter); transform: rotate(45deg); }
.cell > a.rowlink:active { background: var(--fill); }
.t3 { font-size: 16px; margin-top: 2px; }

/* The theme switch, as on madjinn.dev: a 16 px icon in the muted colour
   on a 28 px hit area at the end of the footer row, inside the text column
   (no negative margins, so nothing reaches past the page's edge). It shows the theme on
   <html>: Auto (none), a half-filled circle; Light, a sun; Dark, a moon. */
.theme-toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--sec); cursor: pointer; }
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover, .theme-toggle:focus-visible { color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.theme-toggle svg { display: none; width: 16px; height: 16px; }
:root:not([data-theme]) .theme-toggle .theme-auto,
:root[data-theme="light"] .theme-toggle .theme-light,
:root[data-theme="dark"] .theme-toggle .theme-dark { display: block; }
.site { align-items: center; justify-content: space-between; }
/* The footer's right end (the Principal, 2026-10-28): the pages, the GitHub
   and Hugging Face icons and the theme switch, kept together at the right.
   Where the line is too short, the whole end moves under the company, still
   at the right. */
.site-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 18px; margin-left: auto; }
.site-icons { display: inline-flex; align-items: center; gap: 2px; }
.site-icons .theme-toggle { margin: 0; }
.site .icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; color: var(--sec); text-decoration: none; }
.site .icon:hover, .site .icon:focus-visible { color: var(--ink); }
.site .icon svg { display: block; width: 16px; height: 16px; }
/* On a phone the gaps are a little tighter, so "© 2026 madjinn.dev", the
   pages and the icons stay one line on the larger iPhones (440 pt). */
@media (max-width: 480px) {
  .site, .site-end { column-gap: 12px; }
}

/* The language switch: a globe before the other language's name. */
.pages a.lang { display: inline-flex; align-items: center; gap: 5px; }
.pages a.lang .globe { width: 15px; height: 15px; flex: none; }