/*
 * chalk.css — the board.
 *
 * The scoring screen, carried across from the app this replaces, because that
 * layout was arrived at over a season of people standing at boards with it and
 * it is not up for redesign: the names and the leg score along the top, the two
 * remaining scores big enough to read from the oche, the ledger in the middle
 * written like a chalkboard, and the keypad under the thumb with the common
 * scores down both sides.
 *
 * WRITTEN TO iOS 10.3 / Safari 10.3, and that is not a formality here.
 *
 *   - No `gap`. Grid gap arrived as `grid-gap` in Safari 10.1 and only became
 *     `gap` at 14.1, so `grid-gap` is what is written. Every current browser
 *     still honours it, so there is nothing to pair it with.
 *   - No `inset`, `clamp()`, `min()`, `max()` or `:is()`. All Safari 11.1 or
 *     later, all SILENTLY DROPPED rather than erroring, which is worse.
 *   - No `position: sticky` for the ledger heading. It needs -webkit-sticky on
 *     that tablet and misbehaves inside a scrolling flex column; the heading is
 *     a separate table above the scroller instead, which cannot come unstuck.
 *   - EVERY GRID STATES ITS ROW HEIGHTS. Safari 10.3 stretches a row it had to
 *     create for itself: on an iOS 10 iPad that turned every keypad key into a
 *     166px slab, four times the height of the screen, with the scores pushed
 *     off the top. grid-template-rows AND grid-auto-rows, both, every time.
 *
 * venue/test/test-tablet-compat.js enforces the list.
 */

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

html {
    /* No double-tap zoom: this is a keypad, and a scorer entering 180 taps
     * the same key twice in a row. */
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--drtx-bg);
    color: var(--drtx-text);
    font-family: var(--drtx-font-sans);
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/*
 * The screen is one column of five bands, and only the ledger may give.
 *
 * flex-shrink is written out on every fixed band. It defaults to 1, and on an
 * older flexbox an overflowing column takes the space back from whichever
 * items will yield — which here would be the names and the two scores, the
 * only things on the screen a scorer cannot do without.
 */
.board {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%;
}

/* --- names and the leg score -------------------------------------------- */

.top {
    -webkit-flex: none;
    flex: none;
    min-height: 50px;
    background: var(--drtx-raised);
    padding: 8px 14px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.top-name {
    /* Equal halves either side of the leg score, allowed to shrink: a long
     * name gives way rather than pushing the score off the band. */
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}
.top-name.right { text-align: right; }
/* Who started this leg. Marked because the ledger is read in rounds, and a
 * round starts with whoever threw first. */
.top-name.starter { color: var(--drtx-ok); }

.top-legs {
    -webkit-flex: none;
    flex: none;
    padding: 0 10px;
    font-family: var(--drtx-font-mono);
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

/* --- the two remaining scores ------------------------------------------- */

.anchors {
    -webkit-flex: none;
    flex: none;
    min-height: 92px;
    display: -webkit-flex;
    display: flex;
    background: var(--drtx-surface);
    border-bottom: 2px solid var(--drtx-border);
}

.anchor {
    -webkit-flex: 1;
    flex: 1;
    padding: 6px 8px;
    text-align: center;
    position: relative;
}
.anchor.first { border-right: 1px solid var(--drtx-border-soft); }
/* Whose throw it is. The most important thing on the screen. */
.anchor.throwing { background: rgba(6, 182, 212, 0.16); }
/* A tap that cannot be what is left flashes rather than doing nothing:
 * silence mid-leg reads as a dead screen, and the scorer needs to know the
 * tap landed and was refused rather than lost. */
.anchor.reject { background: rgba(255, 138, 155, 0.45); }

.anchor-score {
    font-family: var(--drtx-font-mono);
    font-variant-numeric: tabular-nums;
    /* Sized in script for the viewport: clamp() is Safari 13.1. */
    font-weight: 700;
    line-height: 1;
    margin: 0;
}
.anchor-note {
    font-family: var(--drtx-font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--drtx-accent);
    margin: 4px 0 0;
    height: 15px;
    overflow: hidden;
    white-space: nowrap;
}
.anchor-note.dim { color: var(--drtx-text-muted); }

/* --- what match this is ------------------------------------------------- */

.strap {
    -webkit-flex: none;
    flex: none;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 3px 10px;
    background: var(--drtx-bg);
    border-bottom: 1px solid var(--drtx-border);
    font-size: 15px;
    font-weight: 600;
    color: var(--drtx-text-muted);
    min-height: 26px;
}
.strap-text {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
}
.strap-board {
    -webkit-flex: none;
    flex: none;
    font-family: var(--drtx-font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--drtx-accent);
    margin: 0 0 0 10px;
}
.strap-text.bad { color: var(--drtx-danger); }

/* --- the chalkboard ----------------------------------------------------- */

.ledger {
    /* auto, not the 0% that `flex: 1` implies: a percentage basis in a column
     * is exactly where old WebKit flexbox comes apart, and with every sibling
     * fixed this is the only band that can flex either way. */
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    background: var(--drtx-surface);
    overflow: hidden;
    min-height: 0;
}

.ledger-head { -webkit-flex: none; flex: none; }
.ledger-body {
    -webkit-flex: 1;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

/*
 * Both tables are fixed layout with the same declared widths, so the heading
 * sits exactly over its column without being stuck to anything.
 */
.chalk {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--drtx-font-mono);
    font-variant-numeric: tabular-nums;
}
.chalk .c-score { width: 24%; }
.chalk .c-togo { width: 24%; }
.chalk .c-darts { width: 4%; }

.chalk th {
    background: var(--drtx-bg);
    font-family: var(--drtx-font-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--drtx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    border-top: 1px solid var(--drtx-border);
    border-left: 1px solid var(--drtx-border);
    border-bottom: 1px solid var(--drtx-border);
}
.chalk th:last-child { border-right: 1px solid var(--drtx-border); }
.chalk th.c-darts { font-size: 15px; line-height: 1; padding: 4px 0; }

.chalk td {
    border-bottom: 1px solid var(--drtx-border);
    border-left: 1px solid var(--drtx-border);
    text-align: center;
    padding: 0;
    font-size: 30px;
    /* Scaled to the screen, because the ledger is the only band that gives and
     * a short tablet should show two rows rather than one and a half. vh is
     * Safari 8, and these sit inside a scroller, so the iOS quirk where vh
     * ignores the browser chrome costs nothing here. */
    height: 6vh;
    line-height: 6vh;
    overflow: hidden;
    white-space: nowrap;
}
.chalk td:last-child { border-right: 1px solid var(--drtx-border); }

.chalk .c-darts {
    font-size: 15px;
    color: var(--drtx-text-muted);
    background: var(--drtx-bg);
}

/*
 * The score cells are a chalkboard: black slate, chalk lettering, and the
 * score banded by colour so a ton is seen rather than read.
 */
.chalk .c-score,
.chalk .c-togo {
    background: var(--drtx-typing);
    font-family: var(--drtx-font-chalk);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.22);
    letter-spacing: 0.02em;
    color: var(--drtx-text);
}
.chalk .c-score { font-weight: 600; }
/* To go stays plain chalk. Banding it as well would compete with the scored
 * column, which is the one being read. */
.chalk .c-togo { font-weight: 700; }

.chalk .c-score.band-mid { color: var(--drtx-danger-strong); font-weight: 700; }
.chalk .c-score.band-high { color: var(--drtx-ok); font-weight: 700; }

/* The ring round a ton keeps its band's colour. */
.chalk .c-score.band-mid span,
.chalk .c-score.band-high span {
    display: inline-block;
    border: 2px solid currentColor;
    border-radius: 0.7em;
    padding: 0 0.25em;
    line-height: 1.1;
}

/*
 * A bust, written as what was actually thrown and struck through.
 *
 * A bust stored as a plain nought cannot be told from a genuine no-score when
 * the board is read back, and "he went bust on 170" is a different story from
 * "he missed everything". The to-go beside it does not move, which is what
 * says it scored nothing.
 */
.chalk .c-score.bust {
    color: var(--drtx-danger);
    text-decoration: line-through;
    font-weight: 600;
}

.chalk .c-score.tappable { cursor: pointer; }
.chalk .c-score.tappable:active { background: var(--drtx-typing-press); }

/* The cell being typed into. */
.chalk .c-score.typing {
    background: var(--drtx-typing);
    color: var(--drtx-text);
    -webkit-box-shadow: inset 0 0 0 2px var(--drtx-accent);
    box-shadow: inset 0 0 0 2px var(--drtx-accent);
}
/* Correcting one already written down, rather than entering a new one. */
.chalk .c-score.typing.fixing {
    -webkit-box-shadow: inset 0 0 0 2px var(--drtx-warn);
    box-shadow: inset 0 0 0 2px var(--drtx-warn);
}

.chalk tr.empty td { opacity: 0.4; }
.chalk tr.empty .c-darts { opacity: 1; }

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

.pad {
    -webkit-flex: none;
    flex: none;
    background: var(--drtx-surface);
    border-top: 1px solid var(--drtx-border);
    padding: 8px;
}

/*
 * The finish row, shown only when the player on throw is on one.
 *
 * Two taps saved on every leg-winning visit: without it the scorer types the
 * remaining score, waits for a dialog and answers it. Dart counts this score
 * cannot be finished in are disabled rather than removed, so the row keeps its
 * shape and a scorer looking at 98 can see for themselves that one dart is not
 * on it.
 */
.out-row {
    display: -webkit-box;
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr;
    grid-template-rows: 48px;
    grid-auto-rows: 48px;
    grid-gap: 4px;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 4px;
}
/* .out-row sets display, which would otherwise beat [hidden]. */
.out-row[hidden] { display: none; }

.out-label {
    font-family: var(--drtx-font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
    padding-right: 4px;
    color: var(--drtx-ok);
}

.acts {
    display: -webkit-box;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 48px;
    grid-auto-rows: 48px;
    grid-gap: 4px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--drtx-border-soft);
}

.keys {
    display: -webkit-box;
    display: grid;
    /* Five columns: a narrower strip of common scores either side of the
     * numbers. The sides are slimmer on purpose — they are aimed at rather
     * than hunted for, so the numbers stay the biggest targets on the screen. */
    grid-template-columns: 0.62fr 1fr 1fr 1fr 0.62fr;
    /* Stated, in pixels, for the reason at the top of this file. 64px is a
     * touch target for a tablet used standing at a board, pressed with a thumb
     * by somebody wearing gloves in a cold hall. */
    grid-template-rows: 64px 64px 64px 64px;
    grid-auto-rows: 64px;
    grid-gap: 4px;
}

.k {
    font-family: var(--drtx-font-mono);
    font-size: 20px;
    font-weight: 600;
    padding: 0;
    background: var(--drtx-surface);
    color: var(--drtx-text);
    border: 1px solid var(--drtx-border);
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none;
}
.k:active { background: var(--drtx-bg); }
.k[disabled] { opacity: 0.4; }

/* Common scores: a whole visit in one tap. */
.k.quick {
    font-size: 17px;
    font-weight: 700;
    background: var(--drtx-bg);
    color: var(--drtx-text-muted);
}
.k.quick:active { background: var(--drtx-border); color: var(--drtx-text); }

.k.del { background: var(--drtx-bg); color: var(--drtx-danger); font-size: 17px; font-weight: 700; }
.k.ok { background: var(--drtx-accent); color: var(--drtx-surface); border-color: var(--drtx-accent); }
.k.ok:active { background: var(--drtx-text); border-color: var(--drtx-text); }

.k.act {
    font-family: var(--drtx-font-sans);
    font-size: 14px;
    font-weight: 600;
    background: var(--drtx-bg);
    color: var(--drtx-text-muted);
}
.k.act:active { background: var(--drtx-border); }
/* UNDO is the one key on that row that destroys something: the others only
 * ever show you a screen. */
.k.act.undo { color: var(--drtx-warn); }

.k.out {
    font-family: var(--drtx-font-sans);
    font-size: 16px;
    font-weight: 700;
    background: var(--drtx-ok);
    color: var(--drtx-bg);
    border-color: var(--drtx-ok);
}
.k.out:active { background: var(--drtx-text); border-color: var(--drtx-text); }

/* --- the match is over -------------------------------------------------- */

.banner {
    -webkit-flex: none;
    flex: none;
    background: var(--drtx-accent);
    color: var(--drtx-bg);
    padding: 14px 16px;
    text-align: center;
}
.banner p { margin: 0; }
.banner .who { font-size: 26px; font-weight: 900; line-height: 1.1; }
.banner .what {
    font-family: var(--drtx-font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.banner .acts { margin: 10px 0 0; border-bottom: 0; padding-bottom: 0; }
.banner .k.act { background: var(--drtx-bg); color: var(--drtx-text); border-color: var(--drtx-bg); }

/* --- starting a match with no desk -------------------------------------- */

/*
 * top/right/bottom/left written out, NOT inset. That shorthand is Safari 14.1,
 * so on an old tablet it is dropped, a fixed box gets no offsets, and the
 * overlay renders at no size — present, invisible, and swallowing taps. That
 * exact declaration cost a board a whole morning of unreported results on the
 * product this replaces.
 */
.over {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--drtx-bg);
    padding: 20px;
    text-align: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 10;
}
.over h2 { font-size: 26px; margin: 10px 0 6px; }
.over p { color: var(--drtx-text-muted); font-size: 16px; margin: 0 0 16px; }
.over label {
    display: block;
    font-family: var(--drtx-font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--drtx-text-muted);
    text-align: left;
    margin: 0 0 4px;
}
.over input, .over select {
    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 12px;
    font-family: inherit;
    font-size: 17px;
    -webkit-appearance: none;
    appearance: none;
}
.over .k {
    display: inline-block;
    width: auto;
    min-width: 42%;
    height: 56px;
    font-family: var(--drtx-font-sans);
    font-size: 17px;
    font-weight: 700;
    margin: 4px;
}

/*
 * What taking a board away from another tablet costs.
 *
 * Boxed and amber rather than another grey paragraph, because it is the one
 * sentence on this screen somebody can be wrong about without finding out
 * until a leg is finished: the darts on the other tablet do not come with it.
 */
.over .warn {
    background: var(--drtx-notice-bg);
    border: 2px solid var(--drtx-notice-edge);
    border-radius: 4px;
    color: var(--drtx-notice-text);
    padding: 12px 14px;
    text-align: left;
    font-size: 15px;
}
.over .warn b { color: var(--drtx-text); }

/*
 * Two accounts of one leg, beside each other.
 *
 * NOT A DIFF. Highlighting where they part company suggests one of them is
 * the correction and the other the mistake, and this screen has no idea
 * which. Two lists, read down, and a person who was in the room decides.
 *
 * Floated rather than flex-gap: gap is Safari 14.1 and these screens run on
 * tablets a decade older than that.
 */
.lost-pair { overflow: hidden; margin: 0 0 14px; }
.lost-side { float: left; width: 48%; }
.lost-side + .lost-side { float: right; }
.lost-side h3 {
    font-family: var(--drtx-font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--drtx-text-muted);
    margin: 0 0 6px;
    text-align: left;
}
.lost-list {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--drtx-font-mono);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}
.lost-list td {
    padding: 3px 6px;
    text-align: left;
    border-bottom: 1px solid var(--drtx-border);
    color: var(--drtx-text);
}
.lost-list td.who { color: var(--drtx-text-muted); width: 45%; }
.lost-list td.sc { text-align: right; }
.lost-list tr.extra td { color: var(--drtx-notice-text); }

/* --- a phone ------------------------------------------------------------ */

/*
 * Measured at 375x667 before any of this existed: nothing overflowed, the keys
 * stayed a full 64px and the OK key was on screen. So this is not a rescue, it
 * is two things that were merely wrong rather than broken.
 *
 * A width query and not a height one. A short LANDSCAPE tablet still wants the
 * big scores — it is across the room — whereas a phone is nine inches from
 * somebody's face and the ledger is what they are short of.
 *
 * min-width is deliberately absent at the other end: everything above this is
 * the layout the tablets have been using all season and it is not being
 * touched to tidy up a stylesheet.
 */
@media (max-width: 480px) {
    /* The score is read at arm's length here, not from the oche. Giving it
     * back 30px is two more rows of ledger, which is what is actually scarce. */
    .anchors { min-height: 74px; }
    .anchor { padding: 4px 6px; }
    .anchor-note { font-size: 11px; height: 13px; }

    .top { min-height: 42px; padding: 5px 10px; }
    .top-name { font-size: 14px; }
    .top-legs { font-size: 19px; padding: 0 8px; }

    .strap { font-size: 13px; min-height: 22px; }

    /* Rows that fit a phone rather than a 10-inch tablet: 6vh of a 667px
     * screen is 40px, which is fine for the chalk but wasteful here. */
    .chalk td { font-size: 24px; height: 38px; line-height: 38px; }

    /*
     * 11px, not 9. These are the only words on the ledger — SCORED and
     * TO GO — and at 9px in a pub they are a grey smudge. Three columns
     * of numbers with no heading is worse than two fewer rows.
     */
    .chalk th { font-size: 11px; padding: 3px 3px; }

    /*
     * THE DART COUNT NEEDS TWO DIGITS. 4% of a 375px screen is 15px,
     * which fits "3", "6" and "9" and then cuts "12" in half and
     * everything after it — so the column stopped being readable
     * exactly when a leg started being interesting. Measured on a
     * phone, not guessed.
     */
    .chalk .c-darts { width: 9%; }
    .chalk th.c-darts { font-size: 13px; }
    .chalk td.c-darts { font-size: 13px; }

    /* The keys stay 64px. They are the one thing on this screen that is
     * pressed, by a thumb, by somebody who has just thrown three darts, and
     * every pixel taken off them to fit more ledger is a mis-key. */
    .pad { padding: 6px; }
    .k { font-size: 18px; }
    .k.quick { font-size: 15px; }
    .out-label { font-size: 11px; }
    .k.act { font-size: 12px; }
}

.hidden { display: none !important; }