/* Added 2026-10-19: App Store badge, user manual, footer note. 2026-10-20: manual search. Loaded after styles.css. */
.get-app { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 20px 0 8px; }
.store-badge { display: inline-block; line-height: 0; }
.store-badge img { height: 40px; width: auto; display: block; }
.store-note { margin: 0; font-size: 0.9em; opacity: 0.75; max-width: 34em; }
.toc { margin: 16px 0 28px; padding: 12px 16px; border: 1px solid rgba(127, 127, 127, 0.3); border-radius: 10px; }
.toc ol { columns: 2 14em; column-gap: 24px; margin: 0; padding-left: 1.4em; }
.toc li { break-inside: avoid; padding: 2px 0; }
/* The header stays at the top while the page scrolls. Links to a section (#pricing, the manual's
   contents) stop below it instead of under it. */
header.site { position: sticky; top: 0; z-index: 50; background: var(--paper); }
html { scroll-padding-top: 76px; }
/* Colours come from styles.css: they follow the device's light or dark setting. */
.head-right { display: flex; align-items: center; gap: 12px; }
.menu-toggle { display: none; }
/* Back to top: sits just right of the text column and travels with it while scrolling, stopping at
   the end of the page's main content so it never reaches the footer. On narrow screens it keeps to
   the right edge. A thin outline in the text colour: white on petrol, dark on the light colours. */
main { position: relative; }
.to-top { position: sticky; bottom: 24px; z-index: 40; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 24px 0 0 min(calc(50% + 396px), calc(100% - 56px));
  padding: 0; border: 1.25px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink);
  cursor: pointer; opacity: 0.85; transition: opacity 0.15s; }
.to-top:hover { opacity: 1; }
.to-top[hidden] { display: none; }
.to-top:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 3px; }
/* iPhone and iPad (touch screens). Held upright: the menu folds into a hamburger. In every orientation
   the back-to-top control is a plain arrow, no circle, centred near the bottom of the screen. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .menu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    margin-right: -10px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
  .menu-toggle .cross { display: none; }
  header.site.open .menu-toggle .bars { display: none; }
  header.site.open .menu-toggle .cross { display: inline; }
  header.site nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    padding: 4px 20px 12px; background: var(--paper); border-bottom: 1px solid var(--line); }
  header.site.open nav { display: flex; }
  header.site nav a { display: block; margin: 0; padding: 13px 0; font-size: 1.05em; text-decoration: none;
    border-bottom: 1px solid var(--line); }
  header.site nav a:last-child { border-bottom: 0; }
}
@media (hover: none) and (pointer: coarse) {
  .to-top { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom));
    margin: 0; width: 48px; height: 44px; border: 0; border-radius: 0; opacity: 0.9; }
  .to-top svg { width: 28px; height: 28px; }
}
main code { font-size: 0.92em; overflow-wrap: anywhere; }
table.keys { border-collapse: collapse; width: 100%; max-width: 36em; }
table.keys td { padding: 6px 10px; border-bottom: 1px solid rgba(127, 127, 127, 0.25); vertical-align: top; }
table.keys td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; width: 8em; }
/* Manual search: a thin outline in the text colour (white on petrol, dark on light), no fill, no shadow.
   appearance: none stops Safari drawing its own white search field. */
.manual-search { margin: 16px 0 8px; }
/* The field takes the page's own background, with a magnifying glass inside it as in Apple's search fields.
   A plain text field (not type=search), so no browser draws its own white search box over it. */
.manual-search .search-field { position: relative; max-width: 32em; color: var(--ink); }
.manual-search .search-field svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  opacity: 0.6; pointer-events: none; }
.manual-search input { -webkit-appearance: none; appearance: none; width: 100%;
  box-sizing: border-box; padding: 9px 12px 9px 38px; font: inherit; color: var(--ink);
  background: var(--paper) !important; background-color: var(--paper) !important;
  border: 1px solid var(--ink); border-radius: 10px; box-shadow: none; }
.manual-search input::placeholder { color: var(--ink); opacity: 0.6; }
.manual-search input:focus { outline: 2px solid var(--ink-soft); outline-offset: 1px; }
.manual-search ul { margin: 8px 0 0; padding-left: 1.2em; }
.manual-search li { padding: 3px 0; }
main h3[id] { scroll-margin-top: 76px; }
footer.site .legal { font-size: 0.8em; opacity: 0.7; }