/* You Get A Code! is a developer's tool and looks like one: the app's ruled
   paper under everything, in the blue of its icon. The page keeps the site's
   white or dark ground and lets the blue do the ruling, the lettering and the
   links — the way the app rules its own paper in its tint. */
:root {
    /* The app's tint, which is also its icon's blue, in Display P3: it is
       chosen for the wide gamut, and sRGB can't hold it. It is 5:1 on white
       but not in the explainer's wash, so text and links take the deeper
       `--link-color`, the same hue. */
    --tint: color(display-p3 0.119 0.363 0.997);
    --link-color: color(display-p3 0.004 0.276 0.935);
    --main-color: #3c3c43;
    --emphasis-color: #000000;
    --tile-background: #ffffff;
    --grid-fine: color(display-p3 0.119 0.363 0.997 / 0.1);
    --grid-heavy: color(display-p3 0.119 0.363 0.997 / 0.22);
    /* The picked segment of the device switcher: a light wash of the tint on
       the switcher's paper, under the link blue. */
    --thumb: color-mix(in srgb, var(--tint) 16%, var(--tile-background));
}

@media (prefers-color-scheme: dark) {
    :root {
        --tint: color(display-p3 0.268 0.481 0.998);
        --link-color: color(display-p3 0.466 0.632 0.998);
        --main-color: #d1d1d6;
        --emphasis-color: #ffffff;
        --tile-background: #202022;
        --grid-fine: color(display-p3 0.268 0.481 0.998 / 0.14);
        --grid-heavy: color(display-p3 0.268 0.481 0.998 / 0.3);
        --thumb: color-mix(in srgb, var(--tint) 26%, var(--tile-background));
    }
}

@media (prefers-contrast: more) {
    :root {
        --tint: color(display-p3 0.004 0.276 0.935);
        --link-color: color(display-p3 0.003 0.211 0.741);
        --main-color: #000000;
    }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
    :root {
        --tint: color(display-p3 0.524 0.674 0.998);
        --link-color: color(display-p3 0.619 0.742 0.999);
        --main-color: #ffffff;
    }
}

/* Graph paper: a fine line every 8px and a heavier one every fifth, which is
   the app's own ruling. Four gradients, each a one-pixel line and then
   nothing, tiled at the two pitches. */
body {
    background-color: var(--background);
    background-image:
        linear-gradient(to right, var(--grid-heavy) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-heavy) 1px, transparent 1px),
        linear-gradient(to right, var(--grid-fine) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-fine) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}

/* More text than the homepage has, so it goes regular, the way the Wallflower
   pages and the journal do. */
#main {
    font-weight: normal;
    text-align: center;
}

/* The word mark is the heading. Its lettering follows the scheme and its
   swoosh the tint, as in the app — one drawing, inked from here, which works
   because it is inline: there is no second file that could arrive without
   its colour. */
#main h1 {
    margin: 2.5em 0 0 0;
    font-size: 1em;
}

#main h1 svg {
    display: block;
    width: 100%;
    max-width: 16em;
    height: auto;
    margin: 0 auto;
}

#main h1 .lettering { fill: var(--heading-color); }
#main h1 .swoosh { fill: var(--tint); }

/* The icon on the shadow every icon is drawn to sit on. A drop-shadow rather
   than a box-shadow: a box-shadow's corner is a circle and an app icon's is
   not, so it leaves a sliver of page between the artwork and its shadow.

   It is also the one filter on a page that plays video, which the site
   otherwise avoids: Safari has rasterized a filter into a rectangle once a
   video is composited anywhere on the page. It is kept here on trial. If the
   icon ever wears a hard-edged square halo while the devices below play, this
   goes back to a box-shadow with a 25.7% corner. */
#main .app-icon {
    display: block;
    width: 5em;
    height: 5em;
    margin: 2em auto;
    filter: drop-shadow(0 .05em .15em rgba(0, 0, 0, .25)) drop-shadow(0 .25em .8em rgba(0, 0, 0, .4));
}

#main .lead {
    margin: 0 auto 1.5em auto;
    max-width: 22em;
    color: var(--emphasis-color);
    font-weight: 500;
}

/* The lead opens with a line of its own, only a little apart from the rest,
   and balanced: where it has to wrap, its lines come out even rather than
   leaving a word or two alone on the second. */
#main .lead.opener {
    margin-bottom: .5em;
    text-wrap: balance;
}

/* The badge and the box under it belong together, so the badge gives up most
   of the air the site leaves below it. */
#main .appstore {
    margin-bottom: 1.5em;
}

/* What an offer code is, for a reader who has never made one: closed it is a
   question, open it is the answer. The box is a wash of the tint mixed into
   the page rather than laid over it, so the ruling stops at its edge. */
#main .explainer {
    max-width: 34em;
    margin: 0 auto 3em auto;
    border: 1px solid var(--tint);
    border-radius: .75em;
    background: color-mix(in srgb, var(--tint) 12%, var(--background));
    box-shadow: 0 .15em .6em rgba(0, 0, 0, .1);
    font-size: .55em;
    line-height: 1.45;
    text-align: start;
}

/* The answer sits inside the `summary` with the question, so a tap anywhere
   on the open box closes it again, which is what a hand expects of a box that
   opened under it — and there is no script to make the text a second switch.
   Closed, the answer is `display: none` and the summary is the question. */
#main .explainer summary {
    display: block;
    padding: .8em 1.1em;
    cursor: pointer;
    list-style: none;
}

#main .explainer summary::-webkit-details-marker {
    display: none;
}

#main .explainer .question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    color: var(--link-color);
    font-weight: bold;
}

/* The disclosure indicator: a chevron drawn from two borders, pointing down
   while there is something to open and up once it is. */
#main .explainer .question::after {
    content: "";
    flex: none;
    width: .5em;
    height: .5em;
    margin-top: -.25em;
    border-inline-end: .14em solid currentColor;
    border-bottom: .14em solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s;
}

#main .explainer[open] .question::after {
    margin-top: .25em;
    transform: rotate(-135deg);
}

#main .explainer .answer {
    display: none;
    margin: .8em 0 0 0;
}

#main .explainer[open] .answer {
    display: block;
}

/* The features, one small tile each. Two columns, and three once the column
   has room for them — asked of the column itself rather than of the window,
   in `em`, so a reader on a large text size keeps two wide tiles instead of
   getting three narrow ones. */
#main .features {
    container-type: inline-size;
}

#main .features ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .5em;
    text-align: start;
}

/* Only above the width where the site halves its type: below it an `em` of
   this column is half the size, and the same 22 of them would be reached by a
   column a phone and a half wide, with three tiles of four words a line. */
@media only screen and (min-width: 701px) {
    @container (width >= 22em) {
        #main .features ul {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

#main .features li {
    padding: 1em;
    border: 1px solid var(--grid-heavy);
    border-radius: .75em;
    background: var(--tile-background);
    box-shadow: 0 .15em .6em rgba(0, 0, 0, .1);
    line-height: 1.35;
}

/* One symbol a tile, in the tint, drawn the way a system symbol is: a round
   3-unit line on a 48-unit square, with the secondary parts — a screen, the
   body of a lock — washed in a fifth of the same colour. */
#main .features .icon {
    display: block;
    width: 4.5em;
    height: 4.5em;
    margin-bottom: .75em;
    color: var(--tint);
}

#main .features .icon .tone { fill: currentColor; fill-opacity: .2; }
#main .features .icon .solid { fill: currentColor; stroke: none; }

/* What is cut out of a solid shape, and the gap a shape in front keeps from
   the one behind it: both are the tile showing through. */
#main .features .icon .knock { stroke: var(--tile-background); }
#main .features .icon .hole { fill: var(--tile-background); stroke: none; }
#main .features .icon .halo {
    fill: var(--tile-background);
    stroke: var(--tile-background);
    stroke-width: 8;
}

#main .features h2 {
    margin: 0 0 .4em 0;
    font-size: 1.1em;
    color: var(--link-color);
}

#main .features p {
    margin: 0;
}

/* The app on its three devices, one at a time. The switch is three radio
   buttons, so picking a device is CSS alone and works without a script; the
   script in the include only plays and pauses. Which one is picked is a
   number, `--sel`, and each device knows its own place in the row, `--i`, so
   it knows which side of the pick it stands on and leaves towards that side. */
#main .showcase {
    --sel: 0;
    --dir: 1;
    margin-bottom: 3em;
}

#main .showcase:has(input[value="ipad"]:checked) { --sel: 1; }
#main .showcase:has(input[value="mac"]:checked) { --sel: 2; }

/* Right to left the segments run the other way, and the devices with them. */
#main .showcase:dir(rtl) { --dir: -1; }

/* The switcher under the devices is a segmented control on the page's own
   paper: the feature tiles' white, their faint ruled edge and their shadow,
   in the shape of a pill. The explainer below is the page's one blue-washed
   box, so the switcher keeps its track out of the wash — a track in it read
   as the explainer's twin — and carries its blue in one place, a light thumb
   under the pick; a solid one outshouted the devices above it. The thumb
   slides in thirds, since the segments share one width, with a little
   overshoot at the end. */
#main .picker {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: fit-content;
    margin: 1.25em auto 0 auto;
    padding: .2em;
    border: 1px solid var(--grid-heavy);
    border-radius: 2em;
    background: var(--tile-background);
    box-shadow: 0 .15em .6em rgba(0, 0, 0, .1);
    font-size: .55em;
}

#main .picker::before {
    content: "";
    position: absolute;
    top: .2em;
    bottom: .2em;
    inset-inline-start: calc(.2em + var(--sel) * (100% - .4em) / 3);
    width: calc((100% - .4em) / 3);
    border-radius: 2em;
    background: var(--thumb);
    box-shadow: 0 .05em .15em rgba(0, 0, 0, .1);
    transition: inset-inline-start .5s cubic-bezier(.35, 1.35, .5, 1);
}

/* One weight for every segment, so the pick moving never changes their
   widths; the others are the page's grey and darken under a pointer. */
#main .picker label {
    position: relative;
    padding: .45em 1.4em;
    border-radius: 2em;
    color: var(--main-color);
    font-weight: 600;
    cursor: pointer;
    transition: color .3s;
}

#main .picker label:hover { color: var(--emphasis-color); }
#main .picker label:has(input:checked) { color: var(--link-color); }

/* The radio stays where and what it is, for the keyboard and for a screen
   reader, and simply isn't drawn: the whole segment is its label. */
#main .picker input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

#main .picker label:has(input:focus-visible) {
    outline: 2px solid var(--tint);
    outline-offset: .15em;
}

/* The devices share one cell, so the stage is as tall as the tallest and
   nothing under it moves when the pick changes. The iPhone and the iPad stand
   as tall as the Mac is at the column's full width: they are shown one at a
   time, so each gets the room rather than its true size. Sized in `cqw` of the
   stage, which holds at any column width. */
#main .stage {
    --h: 60.56cqw;
    container-type: inline-size;
    display: grid;
    place-items: center;
}

/* The one on show fades in where it stands; the others wait a little to
   either side and smaller, and hide once they have faded, so a screen reader
   and the tab order see one device. `isolation` because the shadows below sit
   behind the frame on z-index -1, and without a stacking context of its own a
   device at `transform: none` would let them fall behind the page.

   The device casts no shadow of its own. A box-shadow is shaped like its box,
   and a device's box is its artwork's bounding box, buttons and all, so the
   page showed through in a pale ring between the body and its shadow. The
   shadows come from boxes that are never drawn, below. */
#main .stage .device {
    --d: calc(var(--i) - var(--sel));
    grid-area: 1 / 1;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    isolation: isolate;
    opacity: 0;
    visibility: hidden;
    transform: translateX(calc(clamp(-1, var(--d), 1) * var(--dir) * 6cqw)) scale(.94);
    transition: opacity .35s, transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s .6s;
}

#main .showcase:has(input[value="iphone"]:checked) .device.iphone,
#main .showcase:has(input[value="ipad"]:checked) .device.ipad,
#main .showcase:has(input[value="mac"]:checked) .device.mac {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .35s .15s, transform .6s .1s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}

/* The shadow boxes: each is laid inside the device's body, a few pixels in
   from its edge, and is transparent, so all that shows of it is the shadow
   around it — and the band between its edge and the body's is body, which
   the frame covers. Nothing of the page can show between a device and its
   shadow, and the buttons, which stand proud of the body, simply cast none.
   Under this much blur, a shadow starting a pixel inside the edge is the same
   shadow.

   Every number is a share of the device's box, which is its artwork cropped
   by make-yougetacode-devices.sh; the corners are fitted where each body's
   curve runs at 45°. */
#main .stage .device::before,
#main .stage .mac::after {
    content: "";
    position: absolute;
    z-index: -1;
    box-shadow: 0 .75em 2.5em rgba(0, 0, 0, .35);
}

/* The iPhone 18 Pro's body is 9px in from its buttons on either side of the
   1318 × 2717, and its corner 253px. The video is laid into the cut-out in
   shares of the same box, a quarter of a percent over on every side so it
   ends under the frame, as the Wallflower loop's does. `cover` because the
   previews are App Store sizes rather than screens, and the iPhone's is a
   third of a percent off its screen's shape. */
#main .stage .iphone {
    --i: 0;
    width: calc(var(--h) * 1318 / 2717);
}

#main .stage .iphone::before {
    inset: .18% .99%;
    border-radius: 19.58% / 9.35%;
}

/* The iPhone's screen corners are rounder than its body's, so the corners of
   the cut-out's rectangle lie outside the phone, where no frame covers them.
   The video is rounded to the screen — 188px of its 1206 × 2622, measured
   along the diagonal where the frame gives way to the screen — plus the
   overscan, so its edge still ends under the frame. */
#main .stage .iphone video {
    left: 4.00%;
    top: 1.52%;
    width: 92.00%;
    height: 97.00%;
    border-radius: 15.76% / 7.38%;
    object-fit: cover;
}

/* The iPad lies in landscape, so as tall as the Mac it is a little narrower,
   and where the stage is taller than that it stops at the column's width. Its
   buttons stand off its left and top edges, 4px each of the 2606 × 1854, and
   its corner is 150px. Physical sides rather than logical ones: the artwork is
   the same picture in either direction. */
#main .stage .ipad {
    --i: 1;
    width: min(100%, calc(var(--h) * 2606 / 1854));
}

#main .stage .ipad::before {
    top: .43%;
    right: .15%;
    bottom: .22%;
    left: .31%;
    border-radius: 5.78% / 8.14%;
}

#main .stage .ipad video {
    left: 3.40%;
    top: 4.87%;
    width: 93.36%;
    height: 90.47%;
    object-fit: cover;
}

/* A laptop is a lid on a wider base, so the Mac casts two shadows, one from
   a box in each. The lid runs 264 to 2941 of the 3205 across, with a 106px
   corner at the top, and narrows towards the hinge, so its box stops at row
   1830 of 1941, where the lid is still full width. The base spans the whole
   width from row 1852 and draws in at its lower corners, so its box stops at
   1908, before they begin. */
#main .stage .mac {
    --i: 2;
    width: 100%;
}

#main .stage .mac::before {
    top: .26%;
    bottom: 5.72%;
    inset-inline: 8.42%;
    border-radius: 3.98% 3.98% 0 0 / 5.81% 5.81% 0 0;
}

#main .stage .mac::after {
    top: 95.62%;
    bottom: 1.70%;
    inset-inline: .37%;
}

#main .stage .mac video {
    left: 9.83%;
    top: 2.89%;
    width: 80.38%;
    height: 86.23%;
    object-fit: cover;
}

/* Under Reduce Motion the devices cross-fade in place, and the thumb goes
   straight to its segment. */
@media (prefers-reduced-motion: reduce) {
    #main .stage .device { transform: none; }
    #main .picker::before { transition: none; }
}

/* On a phone the site's type drops to half, and half of that again is too
   small to read. */
@media only screen and (max-width: 700px) {
    #main .explainer {
        font-size: .85em;
    }

    #main .features ul {
        font-size: .8em;
        gap: .75em;
    }

    #main .features li {
        padding: .75em;
    }

    #main .picker {
        font-size: .9em;
    }

    #main .showcase .loop-toggle {
        font-size: .8em;
    }

    /* A phone's column is narrow enough that an iPhone as tall as the Mac is
       would be a thumbnail. The iPhone stands taller than the column is wide,
       and the iPad and the Mac, the column's width, sit centred between. */
    #main .stage {
        --h: 110cqw;
    }
}