/* ---------------------------------------------------------------------------
   Black Tuner: the app's page and its privacy policy.

   The page chrome comes from grid.css, typo.css and style.css, so this is
   only what the two pages add to look like the app rather than the site: its
   black and its colours, the system font at iOS sizes, no site header, one
   centred text column with the footer under it, and on the main page the
   screenshots in their devices.
   --------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  --font: -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", sans-serif;

  /* The app's colours, read off its screenshots. */
  --bg: #000;
  --text: #fff;
  --dim: #98989f;      /* secondary text, as in its settings */
  --fill: #1c1c1f;     /* the segmented control's track */
  --fill-2: #2c2c2e;   /* a card in settings */
  --fill-3: #5a5a5f;   /* the selected segment */
  --rule: #38383a;     /* iOS's opaque separator */

  /* In tune: the one colour the app has, so the one accent here. */
  --link-h: #30d158;
  --link-v: var(--link);
  --link-a: color-mix(in oklab, var(--link-h) 60%, #fff);

  /* The column sets the line length; typo.css's measure would stop the text
     short of the column's right edge, where the callout and the footer end. */
  --measure: none;

  /* What every corner radius below is multiplied by; see the next block. */
  --corner-k: 1;
}

/* Apple's continuous corners, where the browser can draw them (Chromium
   only, for now). They are not corner-shape: squircle — that is a
   superellipse of power 4 and is 0.19 r off. Apple's corner is a circular
   arc of the same radius with the curvature eased in along 1.53 r of the
   edge, so a plain circle is already within 0.014 r of it, and the closest
   superellipse is 1.2 times the radius at superellipse(1.31), within 0.005 r.
   The gain is under half a pixel at these sizes; what it does show is the
   joint between edge and curve, which loses its kink — on the devices'
   bright band, mostly. The capsules are left alone: along their short side
   there is no room for the run-up. */
@supports (corner-shape: superellipse(2)) {
  :root { --corner-k: 1.2; }
  .device, .device img, .callout { corner-shape: superellipse(1.31); }
}

/* iOS sizes: 17px is its body text, and apple.com's. The grid is in rem, so
   the gutters come down with it. The type below is iOS's text styles, as a
   share of 17. */
html { font-size: 17px; }

h1 { font-size: 2em; }                               /* Large Title, 34 */
h2 { font-size: calc(22em / 17); font-weight: 600; } /* Title 2, 22 */
dt { font-weight: 600; }                              /* Headline, 17 */

.subtitle { color: var(--dim); }
.note { font-size: calc(13em / 17); color: var(--dim); }  /* Footnote, 13 */

/* Without the header, main is the first row of body's grid and takes the
   stretch, so the footer still sits at the bottom of a short page. */
body { grid-template-rows: 1fr auto; }
main { padding-block-start: var(--section-gap); }

/* The text column, centred on the window rather than snapped to the grid.
   .snap .center keeps both edges on grid lines, so when the count comes out
   odd the column sits half a column left of centre; here it shares its axis
   with the screenshots and the switch, which centre on the window. */
.prose {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 34rem);
}


/* --- Text ----------------------------------------------------------------- */

/* Questions white, answers in the secondary grey, a hairline between them,
   as between the rows of a list in the app. */
dd + dt {
  margin-block-start: 1em;
  padding-block-start: 1em;
  border-top: 1px solid var(--rule);
}

/* A place in Settings or Files, set as Apple sets it in its own help: bold,
   in the text's font. White in the grey answers, since it names what you
   will see on the screen. */
.path { font-weight: 600; color: var(--text); }

/* The contact line, picked out rather than quoted: a band in the colour of
   a card in the app's settings, with its round ends. */
.callout {
  padding: .9em 1.25em;
  border-radius: calc(1.5rem * var(--corner-k));
  border: 1px solid var(--fill-2);
  text-align: center;
  margin-top: 5rem;
}

ul.points {
  padding-inline: 0;
  color: var(--dim);
  gap: var(--margin);
  margin-bottom: 5rem;
  list-style: none;

  strong {
    display: block;
    color: var(--text);
  }

  li { position: relative; }
  li::before {
    content: "— ";
    position: absolute;
    width: 2em;
    text-align: right;
    left: -2em;
  }
}


/* --- Head of the page ----------------------------------------------------- */

/* The icon on the left, as on the App Store, and the rest beside it. */
.hero {
  display: flex;
  align-items: start;
  gap: var(--margin);
}

.app-icon {
  flex: none;
  width: 7rem;
}

.hero h1 { margin-block: .1em .2em; }

.appstore {
  display: inline-block;
  /* margin-block: .75rem .25rem; */
}
.appstore img { display: block; height: 2.4rem; width: auto; }

@media (width < 48rem) {
  .hero { gap: 1rem; }
  .app-icon { width: 5rem; }
}


/* --- Screenshots ---------------------------------------------------------- */

/* One line of them across the whole window: centred while they fit,
   scrolling sideways once they do not. The track is max-content wide and
   centred with auto margins, which drop to zero as soon as it overflows, so
   the first device never ends up left of the scroll origin, where
   justify-content: center would put it. The track's padding is the page
   margin, so a scrolled line still starts and ends on it.

   Everything is sized by the screen's height, --shot-h, so iPhone and iPad
   stand on one line and the iPad simply takes more room. */

.screens { --shot-h: min(33rem, 70svh); }

/* An iPad is about .82 of its screen's height wide, frame included. On a
   phone that height would make it wider than the window, so there it takes
   about nine tenths of the width instead, and the next one peeks in. */
.shots-ipad { --shot-h: min(33rem, 70svh, (100vw - 2 * var(--margin)) * 1.1); }

/* Both edges fade out over 15px, so a device going past the edge of the
   window seems to slide under it rather than be cut by it. A mask, so on the
   black page it is black to transparent. It is always there: where nothing
   is under it — a line that fits, or the track's own padding at either end —
   black fading into black does not show. */
.shots {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--margin);
  mask-image: linear-gradient(to right,
    transparent, #000 15px, #000 calc(100% - 15px), transparent);
  padding: var(--margin);
}

.shots-track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* The device: a black bezel around the screen and a metal band around that.
   The screenshots are black to the edge, as is the bezel, so on a black page
   the band is what draws the outline — as it does with the real thing. The
   band is a gradient border under a black padding box. --r is the screen's
   corner radius; the outer ones grow by what is around it, so the curves
   stay concentric. Proportions are by eye from iPhone 16 Pro Max and the
   13-inch iPad Pro. */

.device {
  --band: calc(var(--shot-h) * .005);
  flex: none;
  padding: var(--bezel);
  border: var(--band) solid transparent;
  border-radius: calc((var(--r) + var(--bezel) + var(--band)) * var(--corner-k));
  background:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(135deg, #a1a1a6, #3a3a3c 22%, #636366 50%, #3a3a3c 78%, #a1a1a6) border-box;
  scroll-snap-align: start;
}

.device.iphone { --r: calc(var(--shot-h) * .06);  --bezel: calc(var(--shot-h) * .014); }
.device.ipad   { --r: calc(var(--shot-h) * .018); --bezel: calc(var(--shot-h) * .028); }

.device img {
  display: block;
  height: var(--shot-h);
  width: auto;
  max-width: none;
  border-radius: calc(var(--r) * var(--corner-k));
}

/* The switch is the app's segmented control (Guitar / Uke / Bass), built
   from a pair of radios so it works without a script. Equal segments, a
   lighter capsule on the chosen one. */

.screens:has([value="ipad"]:checked) .shots-iphone,
.screens:not(:has([value="ipad"]:checked)) .shots-ipad { display: none; }

.device-switch {
  justify-self: center;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 2px;
  border-radius: 999px;
  background: var(--fill);
  font-size: calc(13em / 17);
  font-weight: 500;
}

.device-switch input {
  appearance: none;
  position: absolute;
  margin: 0;
}

.device-switch label {
  padding: .45em 1.75em;
  border-radius: 999px;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s;
}
.device-switch label:has(:checked) { background: var(--fill-3); cursor: default; }
.device-switch label:has(:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }


/* --- Footer --------------------------------------------------------------- */

/* Under the text column, its two ends on the column's edges, small and grey
   like a footnote in the app's settings. */
footer {
  padding-block: 6rem 1.5rem;
  font-size: calc(13em / 17);
  color: var(--dim);
}

.bt-footer {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
}