/* The About page's list of what the site has (web/about.php, card #439): each item's line, then a short screenshot of
   the thing under it, within the text column, one item to a row. Each picture comes in six copies (a phone's, a middle
   size's, and a computer's, light and dark; tests/about_shots.js takes them, docs/as-built/about-pictures.md): below
   540px the phone's, below 700px the middle one's, from 700px the computer's, and the one matching the theme: the member's choice (data-theme on <html>), or
   the device's before theme.js has set it. The others are display: none, and so, being lazy, never fetched. */
/* Each picture sits in a frame of its own (an edge and a shade unlike the page), its line just above it, outside the
   frame, as its caption, and a wide gap before the next item: so a screenshot's own white or black never runs into the
   page's, nor its words into the page's words (Larry, on the first version: "Failure to distinguish cards from the
   commentary on them, not sizes."). */
:root { --ab-frame: #e9ebee; --ab-frame-edge: #c3c7cd; }
:root[data-theme="dark"] { --ab-frame: #2c3038; --ab-frame-edge: #4d535e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ab-frame: #2c3038; --ab-frame-edge: #4d535e; }
}
/* A bullet before each line, and its picture under the line's words, past the bullet, so it reads as the bullet's
   (Larry: "The line should be preceded by a bullet point, and maybe ... the pic that follows could be more closely
   visually associated with it"). */
.fmt-notes.ab-feats { list-style: disc; padding: 0 0 0 1.3rem; margin: .75rem 0 0; gap: 0; }
.ab-feats li { margin: 0 0 2.1rem; }
.ab-feats li:last-child { margin-bottom: 0; }
.ab-cap { display: block; }
.ab-pic {
  display: block; margin-top: .4rem; padding: 7px;
  background: var(--ab-frame); border: 1px solid var(--ab-frame-edge); border-radius: var(--radius);
}
.ab-pic img {
  display: none; width: 100%; height: auto;
  border: 1px solid var(--ab-frame-edge); border-radius: 7px; box-sizing: border-box;
}
/* Each picture within the text column, its words the page's size or slightly smaller: at most 0.86 of the window it was
   taken in (390, 540, and 700 wide), so the list's lines stay the organizing text (card #439, Larry, October 27: "make
   the images the same or SLIGHTLY smaller font size, or to use a slightly narrower column width, while cropping the
   overall images so they fit within the user's column. You MIGHT have to make a third, middle size"). On a computer the
   column is 579 wide, so a computer's picture (from a 700 window) fills it, at about 0.77 of its own size. */
@media (max-width: 539.98px) {
  .ab-pic { max-width: 335px; }
  .ab-pic img.ab-phone.ab-light { display: block; }
  :root[data-theme="dark"] .ab-pic img.ab-phone.ab-light { display: none; }
  :root[data-theme="dark"] .ab-pic img.ab-phone.ab-dark { display: block; }
}
@media (max-width: 539.98px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ab-pic img.ab-phone.ab-light { display: none; }
  :root:not([data-theme="light"]) .ab-pic img.ab-phone.ab-dark { display: block; }
}
@media (min-width: 540px) and (max-width: 699.98px) {
  .ab-pic { max-width: 460px; }
  .ab-pic img.ab-middle.ab-light { display: block; }
  :root[data-theme="dark"] .ab-pic img.ab-middle.ab-light { display: none; }
  :root[data-theme="dark"] .ab-pic img.ab-middle.ab-dark { display: block; }
}
@media (min-width: 540px) and (max-width: 699.98px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ab-pic img.ab-middle.ab-light { display: none; }
  :root:not([data-theme="light"]) .ab-pic img.ab-middle.ab-dark { display: block; }
}
@media (min-width: 700px) {
  .ab-pic img.ab-computer.ab-light { display: block; }
  :root[data-theme="dark"] .ab-pic img.ab-computer.ab-light { display: none; }
  :root[data-theme="dark"] .ab-pic img.ab-computer.ab-dark { display: block; }
}
@media (min-width: 700px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ab-pic img.ab-computer.ab-light { display: none; }
  :root:not([data-theme="light"]) .ab-pic img.ab-computer.ab-dark { display: block; }
}