/* ==========================================================================
   The way in
   The bar, what the thing is, the card itself, and the one thing there is to
   do here. Black on white throughout — the app follows the reader's own
   setting, this does not, because it is the first thing anybody sees.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* The app's sheet holds the body at one screen and hides its overflow, since
   the app scrolls inside its own panes. This page is an ordinary page and has
   to be let go of, or nothing below the fold can be reached. */
body {
    display: block;
    height: auto;
    min-height: 100%;
    overflow: visible;
    margin: 0;
    background: #ffffff;
    color: #111111;
    font-family: Archivo, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-weight: 700;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

html { height: auto; overflow: visible; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* One column by default — a phone, and anything else too narrow to set the
   card beside the words. Wider layouts are added on top, never taken away. */
main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 18px;
}

/* ---- The bar ---- */
/* The mark on the left, the way in on the right. */
.bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 22px 0 22px;
}

.bar__go {
    font-family: Archivo, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    flex: none;
    padding: 11px 18px;
    border-radius: 10px;
    background: #111111;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.01em;
    text-decoration: none;
    text-transform: uppercase;
}

.bar__go:hover { background: #2b2b2b; }

.bar__mark {
    display: block;
    width: min(140px, 40vw);
    height: auto;
}

/* ---- What it is ---- */
/* ---- The words and the card, side by side ----
   What it is on the left, what it looks like on the right. Stacked on a
   phone, where there is only ever one column. */
/* ---- The card ----
   Drawn by the app's own factCard() and styled by the app's own sheet. What
   is here is only where it sits and how the mark stands on it. */

/* The name and the week stack on the left; the mark holds its own column so
   it sits level with the title rather than jammed into the corner. */
.look .factcard__body { position: relative; }

.look .factcard__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 16px;
}

.look .factcard__title { grid-column: 1; grid-row: 1; }
.look .factcard__blurb { grid-column: 1; grid-row: 2; }

/* White, and big enough to read as the mark rather than a watermark. */
.factcard__mark {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    width: 54px;
    height: auto;
    margin-top: 2px;
    filter: invert(1) brightness(2);
}

/* Whose leg it is, when there is no face to show. */
.cardline__logo--said {
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.9);
}

/* ---- One height across the foot ----
   The discs were twenty-seven, the marks twenty-one and the switch
   twenty-five, so the row read as three separate things at three sizes.
   Everything on it now stands the same height and sits on the same line. */
.look .factcard__foot { align-items: center; }

/* The faces carry transparent margin inside the picture, so a box the same
   size as an icon draws a visibly smaller face. Given a larger box to make
   the drawn part match. */
.look .disc {
    width: 30px;
    height: 30px;
}

/* Enough overlap to read as a stack, little enough that all four show. */
.look .disc--stacked { margin-right: -5px; }

.look .act,
.look .reactstack { min-height: 24px; }

.look .act .ico {
    width: 24px;
    height: 24px;
}

.look .act--watch .switch {
    width: 40px;
    height: 24px;
}

.look .act--watch .switch::after {
    width: 18px;
    height: 18px;
}

/* Resizing it here lost the on state, which is set on the wider rule. */
.look .act--watch .switch:checked {
    background: #ffb020;
    box-shadow: inset 0 0 0 1px #ffb020;
}

.look .act--watch .switch:checked::after { transform: translateX(16px); }

/* ---- Levelling the foot ----
   Everything on this row is a different kind of thing — a picture, a drawn
   mark, a number, a switch — and each was sitting on its own baseline. They
   are all given the same box and centered in it, so the row reads as one line
   rather than four things at four heights. */
.look .factcard__foot,
.look .reacts,
.look .reactstack,
.look .factcard__acts,
.look .act {
    display: flex;
    align-items: center;
}

.look .factcard__foot > *,
.look .reactstack > *,
.look .act > * {
    display: flex;
    align-items: center;
    height: 30px;
}

.look .reactstack__count,
.look .act__count {
    font-size: 15px;
    font-weight: 800;
    line-height: 30px;
}

.look .reactstack__count { margin-left: 12px; }

/* ==========================================================================
   The card, explained
   A label beside each part with a line running to it. Set against the rows
   they name rather than crowded into a corner: one to a leg, so nothing has
   to share a place with anything else. On a narrow screen they go under the
   card in order, because a line drawn across a phone is a scribble.
   ========================================================================== */
.showcard {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

/* The line and the words on one row, so the label sits level with the thing
   it points at. Positioning the line separately put the text a line below its
   own arrow. */
/* Nothing on this card is a control — it is a picture of one. */
.look .factcard,
.look .factcard * { pointer-events: none; }

/* Beside the copy the card explains itself, so the marks that named its
   parts are gone. They belong on a page that is only about the card. */

/* ==========================================================================
   What you are looking at
   The card again, its parts named. The hero sells the thing; this explains
   it, which needs the width the copy was taking.
   ========================================================================== */
/* ---- The words and the card, side by side ----
   What it is on the left, the thing itself on the right with its parts named.
   Stacked on a phone, where there is only one column.
   The marks all live to the right of the card and under it, so the copy on
   the left has nothing reaching across into it. */
/* ---- The words and the card ----
   Stacked by default; side by side once there is room for both, and room
   again beside the card for the marks that name it. */
.look { --fit: 1; padding: 10px 0 40px; }

/* Once the marks are drawn they need room beside the card, and the card has
   to stay in the middle of the page rather than of that room. */
/* The card stays in the middle of the page; the marks reach out into the
   margin beside it rather than shoving it off center. */
.open { text-align: center; }

.open__lede {
    display: inline-block;
    margin: 0 0 18px;
    padding: 5px 11px;
    border: 2px solid #111111;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.open__head {
    font-family: Archivo, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    margin: 0 0 14px;
    white-space: nowrap;
    font-size: clamp(19px, 3.4vw, 34px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}

/* The four things it watches, said plainly before anything else. They pair
   off — the two passing numbers, then the two rushing ones — so they are set
   as two stacks side by side rather than one line of four, which reads as a
   list of unrelated things. */
.open__stats {
    display: flex;
    justify-content: center;
    gap: clamp(24px, 6vw, 56px);
    margin: 0;
    color: #111111;
    font-family: Archivo, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: clamp(11px, 1.5vw, 13px);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.open__pair {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.open__pair b { font-weight: 900; }

.look__head {
    margin: 0 0 62px;
    font-size: clamp(22px, 5.4vw, 32px);
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* The card sits under the words, in the middle of the page. */
/* The card and its marks are one drawing, and a drawing does not reflow —
   a line pointing at a thing has to keep pointing at it. So the whole block
   is kept at the size it was drawn and scaled down to whatever room there is,
   rather than being broken into a list on a phone.

   Six hundred and forty is the card plus the margins the marks reach into. */
/* The card and its marks are one drawing, and a drawing does not reflow — a
   line pointing at a thing has to keep pointing at it. So the block is kept
   at the size it was drawn and scaled down in steps to whatever room there
   is. The steps are written out because scale() takes a plain number, and CSS
   cannot divide one length by another to make one. */
.look .showcard {
    --fit: 1;

    position: relative;
    width: 400px;
    margin: 26px auto 0;
    text-align: left;
    transform: scale(var(--fit));
    transform-origin: top center;
}

/* Scaling leaves behind the room the drawing used to take, so it is taken
   back — it stands about seven hundred tall with its marks under it. */
.look { padding-bottom: calc(150px - (1 - var(--fit, 1)) * 700px); }

/* The drawing is 640 across: the card, and the margins the marks reach into. */
@media (max-width: 700px) { .look, .look .showcard { --fit: 0.96; } }
@media (max-width: 640px) { .look, .look .showcard { --fit: 0.92; } }
@media (max-width: 580px) { .look, .look .showcard { --fit: 0.88; } }
@media (max-width: 520px) { .look, .look .showcard { --fit: 0.84; } }
@media (max-width: 470px) { .look, .look .showcard { --fit: 0.81; } }
@media (max-width: 430px) { .look, .look .showcard { --fit: 0.78; } }
@media (max-width: 390px) { .look, .look .showcard { --fit: 0.75; } }
@media (max-width: 350px) { .look, .look .showcard { --fit: 0.73; } }

/* Tablets and small laptops: the card comes up beside the words, but there
   is not yet room for the marks to stand outside it, so they stay under. */

/* ---- The marks ---- */
.note {
    --standoff: 11px;   /* clear air between the card and any mark */
    position: absolute;
    font-family: Caveat, Archivo, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #111111;
    white-space: nowrap;
}

.note img { position: absolute; }

/* Back on the left, where it was drawn — nothing stands beside the card on
   that side any more, so the brace has the margin to itself. */
.note--card {
    top: 0;
    bottom: 0;
    right: calc(100% + 44px);
    display: flex;
    align-items: center;
}

.note--card img {
    top: 0;
    bottom: 0;
    left: calc(100% + 10px);
    width: 24px;
    height: 100%;
}

/* A brace like the card's, but reversed: it holds the run of legs, from the
   top of the first to the bottom of the last, and reaches out to the right. */
.note--stat {
    top: 21%;
    bottom: 21%;
    left: calc(100% + 44px);
    display: flex;
    align-items: center;
}

.note--stat img {
    top: 0;
    bottom: 0;
    right: calc(100% + 10px);
    width: 24px;
    height: 100%;
    transform: scaleX(-1);
}

/* The two side marks stand their words up in the margin, which is narrow.
   Reading up on the left and down on the right keeps each one turned toward
   the card it points at. */
.note--card b, .note--stat b { writing-mode: vertical-rl; }
.note--card b { transform: rotate(180deg); }

/* Under the card, pointing up at the switch. */
.note--track {
    top: calc(100% + 38px);
    left: 92%;
    transform: translateX(-50%);
}

/* Kept the same width as the others so the stroke reads the same weight —
   the arrow is scaled to fit its box, so a narrower box draws a thinner line. */
.note--track img {
    left: 50%;
    bottom: calc(100% + 6px);
    width: 26px;
    height: calc(38px - 6px - var(--standoff));
    margin-left: -13px;
    /* The artwork is drawn at this proportion now, so nothing is squeezed —
       but a browser is told anyway, in case the box and the drawing ever
       disagree again. */
    object-fit: contain;
}

.note--trending {
    top: calc(100% + 38px);
    left: 6%;
    right: 43%;
    text-align: center;
}

.note--trending img {
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    width: 100%;
    height: calc(38px - 6px - var(--standoff));
}

.note--share {
    top: calc(100% + 82px);
    left: 70.5%;
    transform: translateX(-50%);
}

.note--share img {
    left: 50%;
    bottom: calc(100% + 8px);
    width: 26px;
    height: calc(82px - 8px - var(--standoff));
    margin-left: -13px;
}

/* No room beside it on a phone: the marks come off and the words stay. */
/* ---- Small screens ----
   The card is drawn at four hundred wide; below that it has to come down with
   the page rather than push it sideways. */
@media (max-width: 460px) {
    .look .factcard { padding-left: 13px; padding-right: 13px; }
    .look .cardline { gap: 10px; }
    .look .cardline__face,
    .look .cardline__logo { width: 34px; height: 34px; }
    .look .cardline__legs::before { left: 17px; }
    .factcard__mark { width: 44px; }
        .note { font-size: 20px; }
}

/* A phone laid on its side is short, not narrow: nothing should be pinned to
   the height of the window. */
@media (max-height: 520px) and (orientation: landscape) {
    .bar { padding: 12px 0 16px; }
    .look { padding-top: 8px; }
}

/* ---- The second ask ---- */

/* Only on a phone: on anything wider the bar stays in sight and one is enough. */
.go--foot { display: none; }

@media (max-width: 700px) {
    .bar { justify-content: center; }
    .bar .bar__go { display: none; }

    .go--foot {
        display: block;
        width: calc(100% - 40px);
        max-width: 420px;
        margin: 0 auto 44px;
        padding: 18px 20px;
        border-radius: 14px;
        background: #111111;
        color: #ffffff;
        font-family: Archivo, sans-serif;
        font-size: 17px;
        font-weight: 800;
        letter-spacing: .02em;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
    }
}
/* ---- One face on the page ---- */

/* The card is drawn by the app's own stylesheet, where the body text is left
   to the system font and only the bold parts are Archivo. On its own that is
   right — a card sits among a page of them. Here it stands alone beside the
   headings, and two faces an inch apart read as a mistake. So everything
   inside it takes the page's face too. */
.look .showcard,
.look .showcard * {
    font-family: Caveat, "Bradley Hand", "Segoe Print", cursive;
}

/* Caveat is smaller on the body than Archivo at the same size, so the card's
   own numbers and names are given back the size the face takes off them. */
.look .showcard .factcard__title { font-size: 30px; letter-spacing: 0; }
.look .showcard .factcard__blurb { font-size: 17px; }
.look .showcard .cardline__figure { font-size: 25px; }
.look .showcard .cardline__said { font-size: 17px; }
.look .showcard .statbar__now { font-size: 18px; }
.look .showcard .cardline__logo { font-size: 16px; }
.look .showcard .reactstack__count,
.look .showcard .act__count { font-size: 19px; }

/* The marks are meant to look written on by hand, and so, now, is the page
   around them. */
.look .showcard .note,
.look .showcard .note * {
    font-family: Caveat, Archivo, sans-serif;
}



/* ---- The figures in their pills ---- */

/* Caveat hangs its digits low in the em box and leans them right, so a box
   centered by the browser is not a digit centered by eye. The pill is given
   room and the glyph is nudged back to the middle of it — up off the
   baseline, and left against the lean. */
.look .showcard .statbar__now {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 24px;
    padding: 0 7px;
    line-height: 1;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: normal;
}

.look .showcard .statbar__now > * ,
.look .showcard .statbar__now {
    text-indent: 0;
}

/* The nudge itself, kept off the box so the border stays where it is. */
.look .showcard .statbar__now {
    padding-bottom: 3px;
    padding-right: 9px;
}

/* The initials in their squares lean the same way and need the same. */
.look .showcard .cardline__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding-bottom: 2px;
}



/* ---- The thread between the faces ---- */

/* It has to begin on the first face and end on the last. Drawn as one line
   down the list it cannot: it stops a fixed distance from the bottom, and
   that only lands on a face if every ask is exactly as tall as the next.

   So each ask draws its own half — every one but the first from its top to
   its center, every one but the last from its center down. Joined up they
   are one thread, and it ends on the last face whatever height any ask
   happens to be. */
.look .showcard .factcard__lines::before { display: none; }

.look .showcard .cardline::before,
.look .showcard .cardline::after {
    content: "";
    position: absolute;
    left: 18px;
    width: 0;
    border-left: 2px dotted rgba(255, 255, 255, 0.6);
}

.look .showcard .cardline::before { top: 0; height: 50%; }
.look .showcard .cardline::after { top: 50%; bottom: 0; }

.look .showcard .cardline:first-child::before,
.look .showcard .cardline:last-child::after { display: none; }

.look .showcard .cardline__face { position: relative; z-index: 1; }

/* ---- How long until it starts ---- */

/* Top right of the bar, opposite the mark. On a phone the ask has come off
   the bar and the mark stands centered, so this takes the corner instead. */
.bar__clock {
    flex: none;
    margin: 0;
    text-align: right;
    line-height: 1.15;
}

.bar__count {
    display: block;
    font-family: Archivo, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: #111111;
    font-variant-numeric: tabular-nums;
}

.bar__game {
    display: block;
    font-family: Archivo, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7a7a7a;
}

@media (max-width: 700px) {
    .bar { justify-content: space-between; }
    .bar__count { font-size: 15px; }
    .bar__game { font-size: 9px; }
}

/* The two lines in a face, inside their box.

   The box is thirty-eight square and holds its height. Caveat's letters
   reach far past the line box they are measured in — that is what the hand
   is — so at the app's sizes the club's line runs out of the bottom of the
   color. Nothing clips it: the part outside simply has no colored ground
   behind it, and white on the card's dark reads as a letter cut in half.

   So the box is given the room the hand needs, and the letters are set to
   sit inside the color rather than against its edge. */
.look .showcard .cardline__spot {
    width: 42px;
    height: 46px;
    padding: 4px 3px 7px;
    line-height: 1;
    align-content: center;
    letter-spacing: 0.02em;
}

.look .showcard .cardline__spot b {
    font-size: 16px;
    line-height: 1;
}

.look .showcard .cardline__spot i {
    font-size: 12px;
    line-height: 1;
    opacity: 0.85;
}

/* And the same room for the letters in the box. A hand's last stroke carries
   past where the font says the word ends — the N of CIN, the C of KC, the F
   of BUF — so a box drawn to the word's width takes the end of it off. Both
   lines are given air either side to finish in, and the box is told to let
   them. */
.look .showcard .cardline__spot {
    overflow: visible;
}

.look .showcard .cardline__spot b,
.look .showcard .cardline__spot i {
    display: block;
    padding: 0 3px;
    overflow: visible;
}

/* Room past the last letter.

   Caveat is a hand, and a hand does not stop where a font says it does — a
   capital D finishes with a tail that carries past its own advance width. A
   box drawn to that width cuts the tail off, which is why every leg ending
   in TD, PTD, PYD or RYD lost its final stroke and nothing ending in a
   letter that sits still ever did.

   The line is given a few pixels past its last letter to finish in. */
.look .showcard .cardline__said {
    padding-right: 6px;
    overflow: visible;
}

.look .showcard .cardline__head,
.look .showcard .cardline__body,
.look .showcard .cardline {
    overflow: visible;
}

/* Both asks are links to the site itself now, not buttons that open a form,
   so each is told to sit as a block and stop underlining itself. */
.bar__go,
.go--foot {
    display: inline-block;
    text-decoration: none;
}

.go--foot { display: none; }

@media (max-width: 700px) {
    .go--foot { display: block; }
}


/* The mark, faint, on the card itself.

   Behind everything the card says and above its own dark, so it reads as
   watermarked paper rather than as a picture sitting on it. Pale enough that
   nothing has to be read through it. */
.look .showcard .factcard__body { position: relative; }

.look .showcard .factcard__body::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 104%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: url("img/qb-spy-vertical.png") center / contain no-repeat;
    /* The mark is drawn in black; on a dark card it has to be turned white
       before it can be faded. */
    filter: invert(1);
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

.look .showcard .factcard__head,
.look .showcard .factcard__lines,
.look .showcard .factcard__foot { position: relative; z-index: 1; }