/*
 * board.css — the tablet and the wall.
 *
 * WRITTEN TO iOS 10.3. No flex gap, no inset shorthand, no clamp(), no min()
 * or max(), no :is(). All of those are Safari 14.1 or later and are SILENTLY
 * DROPPED on an older tablet, which is worse than an error: the rule simply
 * does not apply and the layout quietly collapses.
 *
 * That is not hypothetical. On the product this replaces, two full-screen
 * overlays carried `inset: 0`; the declaration was dropped, a fixed box got no
 * offsets, and the overlay rendered at no size. One of them was the step that
 * sends a result to the desk, so a board finished match after match and
 * reported none of them for a whole morning.
 *
 * venue/test/test-tablet-compat.js enforces all of this.
 *
 * Spacing is therefore done with margins and padding, which have worked
 * everywhere since the beginning.
 */

* { -webkit-box-sizing: border-box; box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--drtx-bg);
    color: var(--drtx-text);
    font-family: var(--drtx-font-sans);
    -webkit-text-size-adjust: 100%;
    /* A scoreboard is touched, not read in bed. Nothing here should ever be
     * selected by a stray long press, or bounce when a thumb drags. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    overflow: hidden;
}

body.scroll { overflow: auto; -webkit-overflow-scrolling: touch; }

.wrap { height: 100%; padding: 12px; }

/* --- the two players ---------------------------------------------------- */

.players { width: 100%; height: 42%; }
.side {
    float: left;
    width: 49%;
    height: 100%;
    background: var(--drtx-surface);
    border: 2px solid var(--drtx-border);
    border-radius: 4px;
    padding: 10px 12px;
    position: relative;
}
.side.right { float: right; }

/* Whose throw it is. The single most important thing on the screen, so it is
 * said twice: a cyan edge and a lifted surface. */
.side.throwing {
    border-color: var(--drtx-accent);
    background: var(--drtx-raised);
    -webkit-box-shadow: inset 6px 0 0 var(--drtx-accent);
    box-shadow: inset 6px 0 0 var(--drtx-accent);
}

.side-name {
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.side-legs {
    font-family: var(--drtx-font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--drtx-text-muted);
    margin: 2px 0 0;
}
.side-score {
    font-weight: 900;
    line-height: 1;
    text-align: center;
    /* Sized in the page for the viewport, because clamp() is not available. */
    margin: 6px 0 0;
}
.side-checkout {
    font-family: var(--drtx-font-mono);
    font-size: 13px;
    color: var(--drtx-accent);
    text-align: center;
    margin: 6px 0 0;
    height: 18px;
}

/* --- what was just entered ---------------------------------------------- */

.entry {
    clear: both;
    height: 13%;
    text-align: center;
    padding-top: 6px;
}
.entry-value {
    font-weight: 900;
    line-height: 1;
    color: var(--drtx-accent);
    margin: 0;
}
.entry-hint {
    font-family: var(--drtx-font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--drtx-text-muted);
    margin: 4px 0 0;
    height: 16px;
}
.entry-hint.bad { color: var(--drtx-danger); }

/* --- the keypad --------------------------------------------------------- */

.pad { clear: both; height: 45%; }
.pad-row { width: 100%; height: 25%; }

/*
 * Four across, with the gap made of margins because flex gap is Safari 14.1.
 *
 * The VERTICAL gap is in pixels, and that is not a style choice. A percentage
 * margin — even a bottom one — resolves against the container's WIDTH, not its
 * height. With `margin-bottom: 2%` on a 1000px-wide pad, each of the four rows
 * quietly claimed 20px it had not budgeted for, and the bottom of the Enter key
 * ended up 48px below the screen on a 1024x768 tablet. Clipped, because the
 * body does not scroll: the most-pressed key on the board, half missing, and
 * only on hardware nobody develops on.
 *
 * calc() is Safari 6.1, so it is safe here. The arithmetic adds up exactly:
 * four keys of (25% - 6px) plus three 8px gaps is 100%.
 */
.key {
    float: left;
    width: calc(25% - 6px);
    height: calc(100% - 8px);
    margin: 0 8px 8px 0;
    background: var(--drtx-surface);
    color: var(--drtx-text);
    border: 2px solid var(--drtx-border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 30px;
    font-weight: 800;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}
.key.last { margin-right: 0; }
.key:active { background: var(--drtx-accent); color: var(--drtx-bg); border-color: var(--drtx-accent); }
/* Two units plus the gap between them: (50% - 4px) twice plus 8px is 100%. */
.key.wide { width: calc(50% - 4px); }
.key.go { background: var(--drtx-accent); color: var(--drtx-bg); border-color: var(--drtx-accent); }
.key.go:active { background: var(--drtx-text); border-color: var(--drtx-text); }
.key.quiet { font-size: 18px; color: var(--drtx-text-muted); }
.key[disabled] { opacity: 0.35; }

/* --- an overlay --------------------------------------------------------- */

/*
 * top/right/bottom/left written out, NOT inset. This is the exact declaration
 * that cost a morning on the old product: inset is dropped on an old tablet,
 * the box gets no offsets, and a full-screen overlay renders at no size and is
 * invisible while behaving as though it is there.
 */
.over {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--drtx-bg);
    padding: 24px;
    text-align: center;
    z-index: 10;
}
.over h2 { font-size: 30px; margin: 0 0 8px; }
.over p { color: var(--drtx-text-muted); margin: 0 0 20px; font-size: 17px; }
.over .key { float: none; display: inline-block; width: 44%; height: 68px; }

.hidden { display: none !important; }

/* --- the wall display --------------------------------------------------- */

.wall { height: 100%; padding: 16px; }
.wall-head {
    height: 44px;
    border-bottom: 2px solid var(--drtx-border);
    margin-bottom: 14px;
}
/*
 * The real wordmark, as an image, the way Arena draws it.
 *
 * The desk and the wall used to spell DRTX out in text with the cyan
 * applied by a style attribute. Two things wrong with that. The
 * letterforms were whatever face happened to load, which until the
 * faces moved into the palette was Arial. And the production
 * Content-Security-Policy is style-src 'self' with no unsafe-inline,
 * so the attribute was DISCARDED on the live site: no cyan, no float.
 * It only ever looked right on a laptop with no CSP in front of it.
 */
.wall-mark { float: left; display: block; height: 24px; width: auto; }
/* The gap before the second half of the board picker. Was a style
 * attribute, which the production CSP drops, so on the live site the
 * two groups of choices ran together. */
.side-or { margin-top: 22px; }

/* --- pairing a tablet ---------------------------------------------------
 *
 * A code on a screen that somebody points a camera at from across a bar,
 * so the QR is as big as the panel allows and the typed version is set in
 * the mono face with room between the characters.
 */
.pair-qr {
    /* Square, and as wide as it can be without becoming a thing somebody
     * has to scroll past on a phone. */
    max-width: 280px;
    margin: 12px auto;
}
.pair-qr svg { display: block; width: 100%; height: auto; }

.pair-code {
    font-family: var(--drtx-font-mono);
    font-size: 28px;
    /* Wide tracking, because it is read aloud across a room as often as it
     * is scanned. */
    letter-spacing: 0.18em;
    text-align: center;
    margin: 6px 0 14px;
}

/* --- the captain's card ------------------------------------------------
 *
 * A list of games on a tablet somebody is holding at a board, so the rows
 * are big enough to hit with a thumb and the one that matters is the one
 * that is next.
 */
.card-score {
    font-family: var(--drtx-font-mono);
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    margin: 6px 0 18px;
}

.card-game {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--drtx-raised);
    border: 1px solid var(--drtx-border);
    border-radius: var(--drtx-radius);
    color: var(--drtx-text);
    font-family: inherit;
    font-size: 16px;
    /* A thumb, on a tablet somebody is holding. */
    min-height: 62px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.card-label {
    display: block;
    font-family: var(--drtx-font-mono);
    font-size: 12px;
    letter-spacing: var(--drtx-label-tracking);
    text-transform: uppercase;
    color: var(--drtx-text-muted);
}
.card-who { display: block; font-weight: 700; margin-top: 2px; }
.card-legs {
    display: block;
    font-family: var(--drtx-font-mono);
    color: var(--drtx-text-muted);
    margin-top: 2px;
}

/* The next game, and ONLY the next one.
 *
 * Half a card being blank is the normal state of a league night all
 * evening — the pairs are not drawn until the singles are played — so a
 * card where every undrawn line shouted would be seven warnings on an
 * ordinary Tuesday, and a warning that is usually wrong is one nobody
 * reads by the third week. */
.card-game.is-next {
    border-color: var(--drtx-live);
    box-shadow: inset var(--drtx-edge-bar) 0 0 var(--drtx-live);
}
.card-game.is-next .card-legs { color: var(--drtx-live); }

/* A game that is in. Dimmed rather than hidden: the card above the
 * current point is the record of what happened, and it is read out loud. */
.card-game.is-done { opacity: 0.7; }
.card-game.is-done .card-legs { color: var(--drtx-text); font-weight: 700; }

.wall-product {
    float: left;
    /* 4px, not 5: the label is 16px tall beside a 24px mark, so this is
     * what puts the two optical centres on the same line. */
    margin: 4px 0 0 10px;
    color: var(--drtx-cyan);
}
.wall-venue {
    float: right;
    font-family: var(--drtx-font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--drtx-text-muted);
    font-size: 14px;
    margin: 6px 0 0;
}
.wall-boards { clear: both; }

.wall-board {
    float: left;
    width: 48.5%;
    margin: 0 3% 16px 0;
    background: var(--drtx-surface);
    border: 2px solid var(--drtx-border);
    border-radius: 4px;
    padding: 12px 14px;
    height: 170px;
}
.wall-board.odd { margin-right: 0; }
.wall-board.live { border-color: var(--drtx-accent); }

.wall-board-no {
    font-family: var(--drtx-font-mono);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--drtx-text-muted);
    margin: 0 0 8px;
}
.wall-row { height: 46px; }
.wall-row.throwing .wall-name { color: var(--drtx-accent); }
.wall-name {
    float: left;
    width: 60%;
    font-size: 24px;
    font-weight: 800;
    line-height: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.wall-score {
    float: right;
    font-size: 40px;
    font-weight: 900;
    line-height: 44px;
    margin: 0;
}
.wall-empty { color: var(--drtx-text-muted); font-size: 18px; line-height: 110px; margin: 0; }

/* --- the desk ----------------------------------------------------------- */

/*
 * Where the night is run from. Usually a laptop at the end of the bar, often
 * an iPad, so it is held to the same floor as everything else here rather
 * than to the Arena's.
 *
 * Deliberately NOT position: sticky for the board strip. Safari 10.3 needs
 * -webkit-sticky and gets it wrong when the ancestor scrolls; a strip that
 * detaches and sits over the draw is worse than one that scrolls away.
 */
.desk { padding: 16px; max-width: 1100px; margin: 0 auto; }
.desk-h {
    font-size: 22px;
    font-weight: 800;
    margin: 24px 0 8px;
}
.desk-h.first { margin-top: 10px; }
.desk-note {
    color: var(--drtx-text-muted);
    font-size: 15px;
    line-height: 1.45;
    margin: 0 0 10px;
}
.desk-note b { color: var(--drtx-text); }
.desk-note.bad { color: var(--drtx-danger); }

.desk-in, .desk-area {
    display: block;
    width: 100%;
    background: var(--drtx-surface);
    color: var(--drtx-text);
    border: 2px solid var(--drtx-border);
    border-radius: 4px;
    padding: 10px 12px;
    margin: 0 0 10px;
    font-family: inherit;
    font-size: 17px;
    -webkit-appearance: none;
    appearance: none;
}
.desk-area { line-height: 1.5; resize: vertical; }
.desk-in:focus, .desk-area:focus { border-color: var(--drtx-accent); outline: none; }

/* Half-width side by side, with the gap in the margin because flex gap is
 * Safari 14.1. 49% twice plus the 2% margin is 100%. */
.desk-half { float: left; width: 49%; margin-right: 2%; }
.desk-half.last { margin-right: 0; }

/*
 * A desk button. Not .key: that one is a quarter of a keypad row and floats,
 * which is right on a tablet and wrong everywhere on this page.
 */
.btn {
    display: inline-block;
    background: var(--drtx-surface);
    color: var(--drtx-text);
    border: 2px solid var(--drtx-border);
    border-radius: 4px;
    padding: 0 18px;
    height: 50px;
    line-height: 46px;
    margin: 0 8px 8px 0;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
}
.btn.go { background: var(--drtx-accent); color: var(--drtx-bg); border-color: var(--drtx-accent); }
.btn:active { background: var(--drtx-accent); color: var(--drtx-bg); border-color: var(--drtx-accent); }
.btn.go:active { background: var(--drtx-text); border-color: var(--drtx-text); }
.btn[disabled] { opacity: 0.35; }
.btn.small { height: 40px; line-height: 36px; font-size: 15px; padding: 0 12px; }

/* --- what every board is doing ------------------------------------------ */

.strip-board {
    float: left;
    width: 150px;
    /*
     * min-height, not height.
     *
     * It was a fixed 70px, which was right while a tile held two lines of
     * text and nothing else. A board being scored on a tablet now also
     * carries a button, and a fixed height does not clip the overflow — it
     * paints it outside the tile, underneath whatever block comes next. The
     * button was there, had its handler, and could not be tapped, which is a
     * fault no test here would have found: it is not in the markup, it is in
     * what is on top of it.
     *
     * Tiles with nothing extra in them are still exactly 70px.
     */
    min-height: 70px;
    margin: 0 8px 8px 0;
    background: var(--drtx-surface);
    border: 2px solid var(--drtx-border);
    border-radius: 4px;
    padding: 8px 10px;
}

/* Small enough to live in a tile beside two names. */
.strip-take {
    display: block;
    width: 100%;
    margin: 6px 0 0;
    padding: 5px 4px;
    font-family: var(--drtx-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--drtx-text-muted);
    background: var(--drtx-raised);
    border: 2px solid var(--drtx-border);
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none;
}

/*
 * What taking a board back costs, below the strip rather than inside a tile.
 *
 * A tile is 150px wide and this is three lines of prose that somebody has to
 * read before they decide. Squeezed into the tile it is unreadable, and the
 * one sentence they can be wrong about is the one they will skip.
 */
.strip-sure {
    clear: both;
    background: var(--drtx-notice-bg);
    border: 2px solid var(--drtx-notice-edge);
    border-radius: 4px;
    padding: 12px 14px;
    margin: 0 0 10px;
}
.strip-sure p { color: var(--drtx-notice-text); margin: 0 0 10px; }
.strip-board.busy { border-color: var(--drtx-accent); }
.strip-no {
    font-family: var(--drtx-font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--drtx-text-muted);
    margin: 0 0 4px;
}
.strip-on {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.strip-on.free { color: var(--drtx-text-muted); font-weight: 400; }

/* --- the draw ----------------------------------------------------------- */

.round { margin: 0 0 20px; }
.round-name {
    font-family: var(--drtx-font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--drtx-text-muted);
    margin: 0 0 8px;
}

.fix {
    background: var(--drtx-surface);
    border: 2px solid var(--drtx-border);
    border-radius: 4px;
    padding: 10px 12px;
    margin: 0 0 8px;
}
.fix.ready { border-color: var(--drtx-accent); }
/* A decided match is still shown, because the desk gets asked who won it all
 * night, but it must not compete with what still has to be played. */
.fix.settled { opacity: 0.6; }

.fix-who {
    float: left;
    width: 58%;
    font-size: 17px;
    font-weight: 700;
    line-height: 40px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fix-who .beat { color: var(--drtx-text-muted); font-weight: 400; }
.fix-do { float: right; text-align: right; }
.fix-tag {
    font-family: var(--drtx-font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--drtx-text-muted);
    line-height: 40px;
    margin: 0;
}
.fix-tag.live { color: var(--drtx-accent); }
/* The board choice opens inside the fixture rather than in an overlay. The
 * two overlays on the old product are the reason this file has a compat test;
 * nothing here needs to be one. */
.fix-pick { clear: both; padding-top: 8px; }

.champion {
    background: var(--drtx-accent);
    color: var(--drtx-bg);
    border-radius: 4px;
    padding: 16px 18px;
    margin: 0 0 18px;
}
.champion p { margin: 0; }
.champion .who { font-size: 30px; font-weight: 900; line-height: 1.1; }
.champion .what {
    font-family: var(--drtx-font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.clear { clear: both; }

/*
 * The code a tablet holds up for the desk.
 *
 * Big, because it is read across a room by somebody standing at a laptop,
 * and spaced in threes because that is how a person reads six characters
 * aloud without losing their place. Tabular figures so the spacing does
 * not shift as the characters change.
 */
.join-code {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
    margin: 12px 0;
    color: var(--drtx-accent);
    font-variant-numeric: tabular-nums;
}

/*
 * `hidden` must actually hide.
 *
 * .btn sets display: inline-block, which beats the browser's own
 * [hidden] { display: none } because a class selector outranks it. The
 * join button stayed on screen under the code it had just been replaced
 * by — found by looking, not by reading.
 */
[hidden] { display: none !important; }

/* ===========================================================================
   A PHONE
   ===========================================================================

   The first width query in this file, and it exists because the person
   running a night may be doing it on their own phone rather than a laptop
   at a desk. That is the ordinary case for a pub league secretary, not an
   edge one.

   Nothing here is a layout rewrite. Everything in this file is already
   fluid — there is not a fixed pixel width in it — and the measured
   failures were all the same shape: A NAME BEING CUT OFF. The desk is the
   screen somebody calls players to a board from, and "Ronny Baker v Kat
   Li…" is the one thing it must never say.
   =========================================================================== */

@media (max-width: 560px) {

    /*
     * The fixture line. .fix-who takes 58% with the button floated beside
     * it, which at 375px is 183px for a line that needs 215 — so every
     * fixture on the draw was ellipsised. Measured, not guessed.
     *
     * Full width and allowed to wrap, with the action underneath. Two
     * lines of name beats one line of guesswork.
     */
    .fix-who {
        float: none;
        width: auto;
        white-space: normal;
        overflow: visible;
        line-height: 1.3;
        margin-bottom: 10px;
    }
    .fix-do {
        float: none;
        text-align: left;
    }
    /* A thumb, not a mouse. */
    .fix-do .btn { width: 100%; }

    /*
     * The board tiles stay two across — seeing at a glance which boards are
     * free is most of what the strip is for — but the names in them wrap
     * instead of being cut. Two names in half of 375px never fit on one
     * line and were never going to.
     */
    .strip-on {
        white-space: normal;
        overflow: visible;
    }

    /*
     * And a name on the board picker. One name in a full-width row
     * usually fits; a long one was being cut rather than wrapped, and
     * there is nothing below it competing for the line.
     */
    .side-name {
        white-space: normal;
        overflow: visible;
    }

    /*
     * And the wall. It is built for a television across a room, where a
     * name on two lines costs a row of the board list — but somebody
     * glancing at it on a phone was getting "Ronny Baker" cut off, and a
     * name that short clipping says the reasoning never applied at this
     * width. Measured, not assumed: it was on the allowed list until it
     * was looked at.
     */
    .wall-name {
        white-space: normal;
        overflow: visible;
    }
}