/* Away-tournament standings.
   Every colour is a token from styles.css — this page introduces no palette of
   its own. Two rules worth knowing before editing:

   1. --brass means "won" and nothing else on this site, so it does NOT mark
      Brackenhurst here. Our rows are marked in --fairway, because green is the
      club. Brass returns only via .chip--champion on a player actually leading
      a section, which keeps the signal intact.
   2. The global `th { color: var(--cream) }` in styles.css means any header that
      changes only its background renders cream-on-cream. .tw-table th therefore
      sets both. */

/* ---- our players ------------------------------------------------------- */

.tw-ours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .75rem;
    margin-bottom: 2rem;
}
.tw-ours-card {
    background: #fff;
    border-radius: var(--radius);
    border-left: 3px solid var(--fairway);
    box-shadow: var(--shadow);
    padding: .9rem 1rem 1rem;
}
.tw-ours-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--ink);
    line-height: 1.25;
}
.tw-ours-meta {
    font-size: .8rem;
    color: var(--muted);
    margin-top: .15rem;
}
.tw-ours-place {
    font-size: .9rem;
    color: var(--text);
    margin-top: .5rem;
    font-variant-numeric: tabular-nums;
}
.tw-ours-place--waiting { color: var(--muted); }
.tw-ours-rank {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--primary);
    margin-right: .1rem;
}
.tw-ours-card .tw-strip { margin-top: .6rem; }

/* The card is a link on both views. Colour and underline are reset rather
   than restyled: the card already reads as a target, and a blue underlined
   player name inside a bordered tile reads as a footnote. */
a.tw-ours-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
}
a.tw-ours-card--link:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -20px rgba(var(--ink-rgb), .65);
}

/* ---- the menu: one card per event -------------------------------------- */

/* The menu is a menu. Everything that belongs to a particular tournament —
   its divisions, its players, its dates on a card — lives one level down, so
   that nothing from two events ever shares a screen. */
.tw-event-card {
    border-left: 3px solid transparent;
    min-height: 100%;
}
.tw-event-card--ours { border-left-color: var(--fairway); }
.tw-event-card .card-title { margin-bottom: .3rem; }

.tw-event-when {
    font-size: .9rem;
    color: var(--text);
    margin: 0;
}
.tw-event-count {
    font-size: .85rem;
    color: var(--muted);
    margin: .15rem 0 0;
}

/* One step back up, on both lower pages. Not a breadcrumb trail: there are
   only ever three depths, and the step that matters is the one immediately
   above. */
.tw-back {
    margin: 0 0 1.25rem;
    font-size: .9rem;
}
.tw-back a {
    color: var(--primary);
    text-decoration: none;
}
.tw-back a:hover { text-decoration: underline; }

.tw-division-card { border-left: 3px solid transparent; }
/* A division one of ours is in. The same rule the section cards use, for the
   same reason and in the same colour — green is the club, brass is a win. */
.tw-division-card--ours { border-left-color: var(--fairway); }

.tw-division-venue {
    font-size: .85rem;
    color: var(--muted);
    margin: 0;
}
.tw-division-ours {
    font-size: .9rem;
    color: var(--ink);
    font-weight: 600;
    margin: .35rem 0 0;
}

/* ---- division strip, status ------------------------------------------- */

.tw-divisions { margin-bottom: .9rem; }

.tw-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .75rem;
    margin-bottom: 1.25rem;
}
.tw-status {
    font-size: .88rem;
    color: var(--muted);
}

/* The watch notes and the Refresh button all ship hidden and are revealed by
   js/app.js — [hidden] in styles.css is what holds them down, so do not give
   these a `display` outside that contract. See .tw-filter above. */
.tw-watch {
    font-size: .82rem;
    color: var(--muted);
}
.tw-watch--new {
    color: var(--bottle-800);
    font-weight: 600;
}

/* ---- filter ------------------------------------------------------------ */

/* Ships hidden and is revealed by js/app.js: with no JS, typing here would do
   nothing, and a dead control is worse than no control. */
.tw-filter { margin-bottom: 1.25rem; }
.tw-filter-label {
    display: block;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .3rem;
}
.tw-filter-input {
    width: 100%;
    max-width: 26rem;
    padding: .6rem .8rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text);
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.tw-filter-input:focus { border-color: var(--primary); }

.tw-noresult {
    text-align: center;
    color: var(--muted);
    padding: 2rem 1rem;
}

/* ---- section card ------------------------------------------------------ */

.tw-section {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 1.25rem;
    /* Transparent by default so the marked and unmarked cards line up. An
       inset box-shadow does NOT work here: the section head and the table
       paint their own backgrounds straight over it. */
    border-left: 3px solid transparent;
}
/* A section one of ours is in. A rule, not a highlight — the row inside is
   where the eye should land. */
.tw-section--ours { border-left-color: var(--fairway); }

.tw-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem 1rem;
    background: var(--ink);
    color: var(--cream);
}
.tw-section-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--cream);
    margin: 0;
}
.tw-section-meta {
    font-size: .8rem;
    color: rgba(var(--cream-rgb), .75);
    margin: 0;
}

/* ---- Champion of Champions: the organiser's sheet, not a table ---------- */

.tw-coc-body { padding: 1rem; }

.tw-coc-players {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}
.tw-coc-player {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--border);
}
.tw-coc-player:last-child { border-bottom: none; }

/* The number is the point of this list: every game rule below refers to
   players by it, so it is a label rather than a bullet. */
.tw-coc-no {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sand);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: .95rem;
    line-height: 1;
}
.tw-coc-player--ours .tw-coc-no {
    background: var(--fairway);
    color: var(--cream);
}

.tw-coc-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-right: auto;
}
.tw-coc-name {
    font-size: 1rem;
    color: var(--ink);
    line-height: 1.25;
}
.tw-coc-player--ours .tw-coc-name { font-weight: 600; }
.tw-coc-club {
    font-size: .8rem;
    color: var(--muted);
}
.tw-coc-player--withdrawn { opacity: .55; }
.tw-coc-player--withdrawn .tw-coc-name { text-decoration: line-through; }

.tw-coc-tally {
    flex: 0 0 auto;
    font-size: .82rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The fixture list. Reads as the printed card it is copied from. */
.tw-coc-games {
    list-style: none;
    margin: 0;
    padding: .75rem 0 0;
    border-top: 1px solid var(--border);
}
.tw-coc-game {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .3rem .6rem;
    padding: .3rem 0;
    font-size: .88rem;
}
.tw-coc-game-no {
    font-family: var(--font-display);
    color: var(--ink);
    flex: 0 0 4.2rem;
}
.tw-coc-rink {
    background: var(--green-pale);
    color: var(--bottle-800);
    border-radius: var(--radius-pill);
    padding: .1rem .55rem;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.tw-coc-who-plays { color: var(--text); }
.tw-coc-marks {
    color: var(--muted);
    font-size: .8rem;
}

/* Played head-to-heads. Named by the two who played them, because which game
   number a pairing turned out to be depends on who lost game 1. */
.tw-coc-results {
    list-style: none;
    margin: .85rem 0 0;
    padding: .75rem 0 0;
    border-top: 1px solid var(--border);
}
.tw-coc-result {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .6rem;
    padding: .3rem 0;
    font-size: .9rem;
}
.tw-coc-side { color: var(--muted); }
.tw-coc-side:last-child { text-align: right; }
.tw-coc-side--won {
    color: var(--ink);
    font-weight: 600;
}
.tw-coc-score {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .tw-coc-game-no { flex-basis: 100%; }
}

/* ---- round schedule (once per section, never per row) ------------------ */

.tw-schedule {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    list-style: none;
    margin: 0;
    padding: .6rem 1rem;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
}
.tw-schedule-item {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    font-size: .78rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.tw-schedule-item + .tw-schedule-item::before {
    content: '';
    width: 1px;
    height: .8em;
    margin-right: .2rem;
    background: var(--border);
}
.tw-schedule-r { font-weight: 600; color: var(--primary); }
.tw-schedule-at { white-space: nowrap; }

/* ---- table ------------------------------------------------------------- */

.tw-table {
    /* The global table rule already supplies width, collapse and background;
       the card owns the radius and shadow here, so cancel them. */
    box-shadow: none;
    border-radius: 0;
    table-layout: fixed;
}
.tw-table-caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.tw-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.tw-table th {
    /* Both properties, always — see the header note at the top of this file. */
    background: var(--cream);
    color: var(--muted);
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    padding: .55rem .25rem;
}
.tw-table th abbr {
    text-decoration: none;
    border-bottom: 1px dotted var(--border);
    cursor: help;
}
.tw-table td {
    text-align: center;
    vertical-align: middle;
    padding: .6rem .25rem;
    font-variant-numeric: tabular-nums;
}
.tw-table th.tw-col-team,
.tw-table td.tw-col-team {
    text-align: left;
    padding-left: 1rem;
    width: auto;
}
.tw-table th.tw-col-pos,
.tw-table td.tw-col-pos { width: 2.2rem; }
.tw-table th:not(.tw-col-team):not(.tw-col-pos),
.tw-table td:not(.tw-col-team):not(.tw-col-pos) {
    width: 2.4rem;
    white-space: nowrap;
}
.tw-table td.tw-col-pos {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--primary);
}
.tw-table tr:last-child td { border-bottom: none; }

.tw-team-name {
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    margin: 0;
}
.tw-team-club {
    font-size: .82rem;
    color: var(--muted);
    margin: .1rem 0 0;
}
.tw-team-region { opacity: .8; }

.tw-tag {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .4rem;
    border-radius: var(--radius-sm);
    background: var(--sand);
    color: var(--muted);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tw-diff--up { color: var(--primary); font-weight: 600; }
.tw-diff--down { color: var(--danger); font-weight: 600; }
.tw-pts { font-weight: 700; color: var(--ink); }

/* Ours. Green, not brass. */
.tw-row--ours { background: var(--green-pale); }
.tw-row--ours .tw-team-name { color: var(--ink); }
.tw-row--withdrawn { opacity: .55; }
.tw-row--withdrawn .tw-team-name { text-decoration: line-through; }
.tw-row--waiting td.tw-col-pos { color: var(--muted); }

/* ---- the round strip --------------------------------------------------- */

.tw-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    list-style: none;
    margin: .45rem 0 0;
    padding: 0;
}
.tw-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 2.9rem;
    padding: .2rem .25rem .25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.tw-cell-r {
    font-size: .6rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.tw-cell-v {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
.tw-cell-x {
    font-size: .6rem;
    color: var(--muted);
}

.tw-cell--won {
    background: var(--primary);
    border-color: var(--primary);
}
.tw-cell--won .tw-cell-r { color: rgba(var(--cream-rgb), .75); }
.tw-cell--won .tw-cell-v { color: var(--cream); }

.tw-cell--lost { background: var(--sand); }
.tw-cell--lost .tw-cell-v { color: var(--muted); }

.tw-cell--drew { background: var(--green-pale); }

.tw-cell--bye { border-style: dashed; }
.tw-cell--bye .tw-cell-v { color: var(--muted); font-weight: 400; }

.tw-cell--todo .tw-cell-v { color: var(--muted); font-weight: 400; }

/* No cell at all for this round in this division. */
.tw-cell--none { border-style: dotted; opacity: .5; }

/* ---- legend ------------------------------------------------------------ */

.tw-legend {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 1.5rem 0 2rem;
}
.tw-legend p { margin-bottom: .5rem; }
.tw-legend p:last-child { margin-bottom: 0; }
.tw-legend b { color: var(--text); }

/* ---- narrow screens ---------------------------------------------------- */

/* Most of this board is read one-handed, standing next to a green. Raw shots
   for/against are the first thing to go — the difference column keeps the
   information they carried. */
@media (max-width: 640px) {
    .tw-table .tw-hide-sm { display: none; }
    .tw-table th.tw-col-team,
    .tw-table td.tw-col-team { padding-left: .55rem; }
    .tw-table td { padding: .5rem .15rem; }
    .tw-cell { min-width: 2.6rem; }
}

@media (max-width: 400px) {
    .tw-cell { min-width: 2.35rem; }
    .tw-cell-v { font-size: .74rem; }
}