/* Help-guide styles, loaded after style.css and only by the pages under /help/.
   Everything here reuses style.css's tokens (--bg, --fg, --muted, --accent, --rule,
   --surface), so light and dark follow the rest of the site with no second theme to
   maintain. Generated by Scripts/help_web/build.py -- the classes below are the only
   ones it emits. */

.toc {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
}

.toc h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.toc ol {
  margin: 0;
  padding-left: 1.4rem;
  columns: 2;
  column-gap: 2rem;
}

.toc li { margin: 0.2rem 0; break-inside: avoid; }

/* The section number the app shows as "7 - Unit Converter". Kept visually apart from the
   title so the heading still reads as a title when the number wraps away from it. */
h2 .num {
  display: inline-block;
  min-width: 1.6em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Zero-height twin of each section heading, so /help#s7 works in either language even
   though the readable slugs differ between them. */
.anchor {
  display: block;
  height: 0;
  overflow: hidden;
}

/* '#####' lines: an aside in the guide, usually about how best to hold the device. */
.note {
  border-left: 3px solid var(--accent);
  padding-left: 0.9rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* '{text}' -- a key or on-screen control named in the prose. */
kbd {
  font: inherit;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.05em 0.4em;
  white-space: nowrap;
}

/* '@@@name' -- stands in for an SF Symbol, which cannot be redistributed on the web.
   The label lives in aria-label/title, because the prose has usually just named the
   control and the glyph alone would tell a screen reader nothing. */
.sym {
  display: inline-block;
  min-width: 1.6em;
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0 0.3em;
  background: var(--surface);
  color: var(--accent);
  font-size: 0.95em;
  line-height: 1.5;
}

/* '((n))' -- points at a number drawn into the screenshot above by DrawCallouts.swift,
   so the two have to keep saying the same thing. */
.callout {
  display: inline-block;
  min-width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-size: 0.85em;
  font-weight: 700;
}

figure.shot {
  margin: 1.75rem 0;
  text-align: center;
}

figure.shot a { display: inline-block; line-height: 0; }

figure.shot img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 12px;
}

/* A portrait phone screenshot is about 1:2.2. Left at the column's full width it draws
   over 1500px tall and pushes the prose it illustrates off the screen entirely, so it is
   capped by height instead and sits at roughly a third of the column. The full-resolution
   file is a click away, which is the right place for detail that needs scrutiny. */
figure.shot img.portrait {
  max-height: 460px;
  width: auto;
}

/* Landscape shots are about 2.2:1 -- at full column width they are only ~320px tall, so
   they can have the whole measure. */
figure.shot img.landscape {
  max-width: 100%;
}

figure.shot a:hover img {
  border-color: var(--accent);
}

@media (max-width: 34rem) {
  .toc ol { columns: 1; }
}