/* About — the product explainer, and the web half of one design.
   The iOS sheet (ios/QRM/InfoSheet.swift) and this page are the same seven
   blocks in the same order, in the strings docs/ABOUT-SHEET-SPEC.md fixes.
   The rhythm below is the sheet's: 28px between blocks, 12px from a heading to
   its drawing and from a drawing to its copy, 18px under the lockup.

   Two tokens exist only here. --ab-edge and --ab-surface give the drawings
   their own edge and fill: SVG drop shadows are not an option (forty of them
   over the panel's backdrop-filter froze the renderer), so the figures earn
   separation from contrast instead of blur. */

#about {
  /* This view is taller than the others. Paint containment stops the
     compositor re-rasterising the whole scroll surface behind the panel's
     backdrop-filter, which froze the renderer on a theme change. */
  contain: layout paint;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent;
  padding: 24px 20px 72px;
  /* The reading lane, and the gaps the whole page is spaced with. The lane is
     one width at every viewport: below 900px the panel is full width and the
     lane simply centres in it, so the page is identical at 390, 768, 1024 and
     1440 and nothing shifts as it scrolls. */
  --ab-lane: 340px;
  --ab-sec: 28px;       /* one block to the next — the sheet's spacing */
  --ab-head: 12px;      /* a heading to its drawing, a drawing to its copy */
  --ab-open: 18px;      /* the lockup to the sentence under it */
  --ab-edge: color-mix(in srgb, var(--text) 11%, transparent);
  --ab-surface: color-mix(in srgb, var(--glass-strong) 88%, var(--accent) 12%);
  /* the reference's coloured light, carried through the panel */
  background:
    radial-gradient(420px 520px at 12% 8%, rgba(82, 73, 231, 0.09), transparent 72%),
    radial-gradient(420px 520px at 92% 42%, rgba(52, 199, 89, 0.06), transparent 74%),
    radial-gradient(420px 520px at 20% 82%, rgba(229, 72, 77, 0.045), transparent 74%),
    var(--glass);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #about {
    --ab-edge: rgba(255, 255, 255, 0.13);
    background:
      radial-gradient(420px 520px at 12% 8%, rgba(122, 111, 240, 0.07), transparent 72%),
      radial-gradient(420px 520px at 92% 42%, rgba(48, 209, 88, 0.045), transparent 74%),
      radial-gradient(420px 520px at 20% 82%, rgba(255, 99, 105, 0.035), transparent 74%),
      var(--glass);
  }
}
:root[data-theme="dark"] #about {
  --ab-edge: rgba(255, 255, 255, 0.13);
  background:
    radial-gradient(420px 520px at 12% 8%, rgba(122, 111, 240, 0.07), transparent 72%),
    radial-gradient(420px 520px at 92% 42%, rgba(48, 209, 88, 0.045), transparent 74%),
    radial-gradient(420px 520px at 20% 82%, rgba(255, 99, 105, 0.035), transparent 74%),
    var(--glass);
}

#about::-webkit-scrollbar { width: 5px; }
#about::-webkit-scrollbar-track { background: transparent; }
#about::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 22%, transparent); border-radius: 999px; }
#about::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text) 34%, transparent); }

#about .ab-glyph-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- one lane ----
   One max-width, centred, holds text, cards and drawings on the same two
   verticals at every width, so nothing shifts as the page scrolls. */
#about > * { max-width: var(--ab-lane); margin-inline: auto; }

/* ---- blocks ---- */
.ab-sec { margin: 0; }
.ab-sec + .ab-sec, #about .ab-print, #about .ab-attr { margin-top: var(--ab-sec); }
.ab-sec h2 { margin: 0; text-wrap: balance; }
#about .ab-body { margin: var(--ab-head) 0 0; font: 400 16px/1.5 var(--font); color: var(--text-secondary); }
#about strong { font-weight: 600; }

/* Blocks 2 to 5 are cards; the opening, the reservations heading, the closing
   and the small print sit on the ground. Same rule as the sheet. */
.ab-card { background: var(--glass); border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 20px; }

/* ---- opening ----
   The lockup is masked rather than drawn inline, so it takes --text in both
   themes exactly as the app's template image does. 84px tall, matching the
   sheet, on the copy's left edge. */
.ab-open { text-align: left; }
.ab-open h1 { margin: var(--ab-open) 0 0; }
#about .ab-open .display { font-size: 34px; line-height: 1.15; letter-spacing: -0.5px; text-wrap: balance; }
.ab-lockup {
  display: block;
  width: 100%;
  max-width: 269px;   /* 84px at the lockup's own 1477:462 */
  height: 84px;
  background: var(--text);
  -webkit-mask: url(/lockup-mark.svg) left center / contain no-repeat;
  mask: url(/lockup-mark.svg) left center / contain no-repeat;
}

/* ---- figures ----
   The viewBox is 320 x 136, the same board the sheet composes on, so a shape
   drawn round is round and an angle holds at every width. width:100% with
   height:auto scales that board uniformly; nothing here is a fraction of two
   independent axes. */
.ab-fig { display: block; width: 100%; height: auto; margin: var(--ab-head) 0 0; }
.ab-fig .ab-line path { fill: none; stroke-width: 2; stroke-linecap: round; }
.ab-fig .ab-line.accent path { stroke: color-mix(in srgb, var(--accent) 55%, transparent); }
.ab-fig .ab-line.muted path { stroke: color-mix(in srgb, var(--text-secondary) 40%, transparent); }
/* One node primitive: a 50-unit rounded square carrying a 20-unit glyph. */
.ab-fig .ab-node rect { fill: var(--ab-surface); stroke: var(--ab-edge); stroke-width: 1; }
.ab-fig .ab-node { color: var(--text); }
.ab-fig .ab-node.accent { color: var(--accent); }
.ab-fig .ab-node.accent rect { fill: var(--ab-surface); stroke: var(--ab-edge); }
/* Icon presentation lives on each <symbol> as attributes: CSS matched in the
   defs tree does not carry into a <use> shadow instance. */

/* ---- reservations ----
   The heading sits on the ground; one card holds the two rows. */
.ab-reserve h2 { margin-bottom: var(--ab-head); }
.ab-row { display: flex; align-items: flex-start; gap: 12px; }
.ab-ricon { flex: none; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.ab-ricon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-rtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ab-rtitle { font: 500 16px/1.3 var(--font); color: var(--text); }
.ab-rdetail { font: 400 16px/1.4 var(--font); color: var(--text-secondary); }
.ab-price { flex: none; margin-left: auto; align-self: center; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hairline); font: 500 12px/1 var(--font); color: var(--text); white-space: nowrap; }
.ab-rrule { height: 1px; background: var(--hairline); margin: 14px 0; }

/* ---- the foot ----
   The small print sits on the page's own left edge, with no rule and no inset
   of its own — the same change the sheet took. */
.ab-print p { margin: 0; line-height: 1.6; }
.ab-print p + p { margin-top: 8px; }
.ab-print a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---- attribution — part of the foot, not an eighth block ---- */
.ab-attr .ab-tail { width: 20px; height: 20px; color: var(--text-secondary); display: block; margin: 0 0 8px; }
.ab-attr p { margin: 0; }

/* The legal row is appended by app.js with its own inline centring and its own
   rule. The page carries one left edge, so this folds the row into the foot the
   small print already opened. !important because those styles are inline; the
   markup is another file's to own. */
#about .legal-footer {
  justify-content: flex-start !important;
  border-top: 0 !important;
  padding-top: 0 !important;
  margin: var(--ab-sec) auto 0 !important;
}