/* ==========================================================================
   CleverPunts Touchline
   ==========================================================================

   A near-verbatim port of the Touchline prototype's stylesheet, on the
   design system (cp-tokens.css, cp-base.css, cp-components.css), which the
   page loads before this file.

   PALETTE
     The prototype's :root was the design system's dark palette by another
     name - the same seven hex values. They are aliases of the tokens now, so
     the board follows the theme toggle. Two of the prototype's colours did
     two jobs: the lime was both a fill and a text colour. In light those
     split, because the fill is unreadable as text on a pale ground - hence
     --tl-green (fill) and --tl-green-ink (text).

   WHY THE CONTROLS ARE NOT .cp-btn
     The prototype's controls are part of what the team signed off - the
     button heights, the lime primary, the compact `.small` variant, the 42px
     toolbar row. They are the prototype's own, drawn from the tokens.

   WHAT cp-base.css SETS THAT THIS FILE HAS TO UNDO
     cp-base gives every th/td a full border and top alignment, colours td
     muted, and pads every <details>. The board's tables and its collapsible
     panel are laid out differently, so those are reset where they land.
   ========================================================================== */

body.touchline-page {
    --tl-bg:        var(--cp-bg);
    --tl-panel:     var(--cp-surface);
    --tl-control:   var(--cp-surface-2);   /* inputs, selects, buttons */
    --tl-line:      var(--cp-line);
    --tl-muted:     var(--cp-muted);
    --tl-text:      var(--cp-ink);
    --tl-green:     var(--cp-accent);      /* fills */
    --tl-green-ink: var(--cp-accent-ink);  /* text */
    --tl-on-green:  var(--cp-on-accent);
    --tl-amber:     var(--cp-warn);
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

/* The enclosing <main class="cp-wrap"> supplies the measure and the side
   gutters; this only adds the vertical rhythm. */
.tl-wrap {
    padding-block: 22px 40px;
    color: var(--tl-text);
    font-size: 16px;
    line-height: 1.5;
}

.tl-wrap .tl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tl-wrap .between {
    justify-content: space-between;
}

.tl-wrap .spacer {
    flex: 1;
}

.tl-wrap h1 { font-size: 29px; letter-spacing: -1px; margin: 0; }
.tl-wrap h2 { font-size: 18px; margin: 0; }
.tl-wrap h3 { font-size: 16px; margin: 0; }
.tl-wrap p  { margin: 8px 0; }

.tl-brand {
    font-weight: 800;
    font-size: 23px;
    letter-spacing: -1px;
}

.tl-brand span {
    display: inline-grid;
    place-items: center;
    width: 33px;
    height: 33px;
    background: var(--tl-green);
    color: var(--tl-on-green);
    border-radius: 50%;
    margin-right: 10px;
}

/* The brand, its sub and the feed badge live in the subnav, outside
   .tl-wrap, so the rules they need cover both contexts. */
.tl-subnav .tl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tl-subnav__brand { margin-right: auto; }

.tl-wrap .sub,
.tl-subnav .sub {
    color: var(--tl-muted);
    font-size: 14px;
}

.tl-wrap .muted { color: var(--tl-muted); }

.tl-wrap .pill,
.tl-subnav .pill {
    font-size: 12px;
    letter-spacing: .07em;
    border: 1px solid var(--tl-line);
    border-radius: 5px;
    padding: 5px 8px;
    color: var(--tl-green-ink);
    white-space: nowrap;
}

.tl-wrap a { color: var(--tl-green-ink); }
.tl-wrap a.pill { text-decoration: none; }

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.tl-wrap button,
.tl-wrap select,
.tl-wrap input {
    font: inherit;
    border: 1px solid var(--tl-line);
    border-radius: 7px;
    background: var(--tl-control);
    color: var(--tl-text);
    padding: 9px 12px;
}

.tl-wrap button { cursor: pointer; }
.tl-wrap button:hover { border-color: var(--tl-green); }
.tl-wrap button:disabled { opacity: .45; cursor: default; }

.tl-wrap button.primary {
    background: var(--tl-green);
    color: var(--tl-on-green);
    border-color: var(--tl-green);
    font-weight: 700;
}

.tl-wrap button.small {
    font-size: 14px;
    padding: 5px 9px;
}

.tl-wrap input[type=checkbox] {
    accent-color: var(--tl-green);
    width: 17px;
    height: 17px;
}

.tl-wrap input:focus,
.tl-wrap select:focus,
.tl-wrap button:focus-visible {
    outline: 2px solid var(--cp-focus);
    outline-offset: 3px;
}

.tl-wrap label.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--tl-muted);
}

/* --------------------------------------------------------------------------
   Summary strip and toolbar
   -------------------------------------------------------------------------- */

.tl-summary {
    display: flex;
    gap: 24px;
    margin: 19px 0 0;
    color: var(--tl-muted);
    font-size: 14px;
    flex-wrap: wrap;
}

.tl-summary b {
    color: var(--tl-text);
    font-size: 19px;
    margin-right: 5px;
}

.tl-toolbar {
    margin: 22px 0;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.tl-toolbar label.field {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

/* A single row height across every control, which is what stops the toolbar
   looking ragged when buttons, selects and a checkbox sit side by side. */
.tl-toolbar button,
.tl-toolbar button.small,
.tl-toolbar select {
    height: 42px;
    padding: 9px 13px;
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap;
}

.tl-toolbar > .tl-row { gap: 10px; align-items: center; }

.tl-toolbar > .tl-row > label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 4px;
    font-size: 14px;
    white-space: nowrap;
}

.tl-toolbar input[type=checkbox] { margin: 0; flex-shrink: 0; }

.tl-notice {
    padding: 12px 16px;
    background: var(--cp-accent-dim);
    border: 1px solid var(--cp-accent-line);
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 20px;
}

.tl-notice.error {
    background: rgba(var(--cp-bad-rgb), .12);
    border-color: rgba(var(--cp-bad-rgb), .45);
    color: var(--cp-bad);
}

/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */

.tl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}

.tl-panel {
    background: var(--tl-panel);
    border: 1px solid var(--tl-line);
    border-radius: 11px;
    overflow: hidden;
}

.tl-panelhead {
    padding: 18px 20px;
    border-bottom: 1px solid var(--tl-line);
}

.tl-footer {
    border-top: 1px solid var(--tl-line);
    padding: 12px 20px;
    color: var(--tl-muted);
    font-size: 12px;
}

.cp .tl-available {
    margin-top: 0;
    padding: 0;
    border: 1px solid var(--tl-line);
    color: var(--tl-text);
    font-size: 16px;
}

.tl-available > summary {
    cursor: pointer;
    font-size: 18px;
    font-weight: 650;
}

.tl-available > summary .pill { margin-left: 10px; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.tl-tablewrap {
    overflow: auto;
    min-height: 260px;
}

.tl-wrap table {
    border-collapse: collapse;
    width: 100%;
    white-space: nowrap;
    font-size: 14px;
}

.tl-wrap th {
    font-weight: 500;
    color: var(--tl-muted);
    text-align: center;
    vertical-align: middle;
    padding: 10px 12px;
    border: 0;
    background: var(--tl-bg);
}

.tl-wrap td {
    padding: 9px 12px;
    text-align: center;
    vertical-align: middle;
    border: 0;
    border-top: 1px solid var(--tl-line);
    color: var(--tl-text);
}

.tl-wrap th:first-child,
.tl-wrap td:first-child {
    text-align: left;
    min-width: 130px;
}

.tl-wrap th:nth-child(2),
.tl-wrap td:nth-child(2) { text-align: left; }

/* Stat columns start at the third cell: tabular figures so the numbers line up
   as they change, and large enough to read at a glance across a busy board. */
.tl-wrap td:nth-child(n+3) {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 18px;
}

.tl-leaguecell {
    color: var(--tl-muted);
    font-size: 13px;
}

/* The round sits under the competition rather than beside it: it is the thing
   that distinguishes a scheduled fixture from one carrying its round's nominal
   kick-off, but it should not compete with the competition name for attention. */
.tl-roundcell {
    display: block;
    color: rgba(var(--cp-ink-rgb), .5);
    font-size: 11px;
}

/* Date separator inside the available list. */
.tl-wrap tr.tl-datehead td {
    background: var(--tl-bg);
    border-top: 1px solid var(--tl-line);
    color: var(--tl-text);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    padding: 9px 12px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.tl-matchlink {
    color: var(--tl-text);
    text-decoration: none;
}

.tl-matchlink:hover {
    color: var(--tl-green-ink);
    text-decoration: underline;
}

.tl-team {
    display: inline;
    font-weight: 650;
    margin: 3px 0;
}

.tl-minute {
    font-size: 12px;
    color: var(--tl-green-ink);
    margin-top: 8px;
}

/* Row states: a green edge while rules are armed, amber once one has fired. */
.tl-watch td:first-child { box-shadow: inset 3px 0 var(--tl-green); }
.tl-triggered { background: var(--cp-accent-dim); }
.tl-triggered td:first-child { box-shadow: inset 3px 0 var(--tl-amber); }

.tl-statpair {
    font-size: 12px;
    color: var(--tl-muted);
    display: block;
}

.tl-empty {
    padding: 36px 24px;
    text-align: center;
    color: var(--tl-muted);
}

/* --------------------------------------------------------------------------
   Card columns
   -------------------------------------------------------------------------- */

.tl-cardcol {
    width: 68px;
    min-width: 68px;
    padding-left: 6px;
    padding-right: 6px;
}

.tl-cardicon {
    display: inline-block;
    width: 10px;
    height: 15px;
    border-radius: 2px;
    vertical-align: -2px;
    margin-left: 3px;
}

/* Card colours are the real things, not theme colours: literal on purpose. */
.tl-cardicon.yellow { background: #f6d354; }
.tl-cardicon.red    { background: #e95454; }

.tl-cardpair {
    font-size: 12px;
    color: var(--tl-muted);
    font-weight: 400;
}

.tl-cardtotal {
    display: inline-block;
    min-width: 25px;
    padding: 0 5px;
    border-radius: 3px;
}

.tl-cardtotal.yellow { background: #f6d354; color: #211b00; }
.tl-cardtotal.red    { background: #e95454; color: #fff; }

/* --------------------------------------------------------------------------
   Filters
   -------------------------------------------------------------------------- */

.tl-filterpicker { padding: 18px 20px 0; }
.tl-filterpicker select { width: 100%; max-width: 520px; }

.tl-filtercard {
    padding: 17px 20px;
    border-bottom: 1px solid var(--tl-line);
}

.tl-filtercard:last-child { border: 0; }

.tl-filtercard p {
    font-size: 13px;
    color: var(--tl-muted);
    margin: 7px 0 12px;
}

.tl-filtercard .tl-row { gap: 6px; }

/* The selected filter, highlighted in the arm dialog and the filter list. */
#tl-filters .tl-filtercard.selected {
    margin: 16px 20px 20px;
    border: 1px solid var(--cp-accent-line);
    border-left: 4px solid var(--tl-green);
    border-radius: 8px;
    background: var(--cp-accent-dim);
}

.tl-savedlist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* --------------------------------------------------------------------------
   Alerts log
   -------------------------------------------------------------------------- */

.tl-log { margin-top: 22px; }

.tl-alertentry {
    padding: 14px 20px;
    border-top: 1px solid var(--tl-line);
    display: flex;
    justify-content: space-between;
    gap: 15px;
    font-size: 14px;
}

.tl-alertentry small { color: var(--tl-muted); }

/* One fired rule inside the alerts summary: name, when it fired, clock time. */
.tl-alertrule {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px solid rgba(var(--cp-ink-rgb), .08);
    font-size: 13px;
}

.tl-alertrule-name {
    color: var(--tl-text);
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-alertrule-time {
    color: rgba(var(--cp-ink-rgb), .5);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   Dialogs
   -------------------------------------------------------------------------- */

.tl-wrap dialog,
dialog.tl-dialog {
    background: var(--tl-panel);
    color: var(--tl-text);
    border: 1px solid var(--tl-line);
    border-radius: 12px;
    width: min(790px, 94vw);
    max-height: 90vh;
    padding: 0;
}

/* A dark backdrop in both themes - it is a scrim, not a surface. */
dialog.tl-dialog::backdrop {
    background: #02070bc9;
    backdrop-filter: blur(3px);
}

/* Dialogs sit outside .tl-wrap in the DOM (top layer), so they need the control
   styling restated rather than inherited. */
dialog.tl-dialog button,
dialog.tl-dialog select,
dialog.tl-dialog input {
    font: inherit;
    border: 1px solid var(--tl-line);
    border-radius: 7px;
    background: var(--tl-control);
    color: var(--tl-text);
    padding: 9px 12px;
}

dialog.tl-dialog button { cursor: pointer; }
dialog.tl-dialog button:hover { border-color: var(--tl-green); }
dialog.tl-dialog button:disabled { opacity: .45; cursor: default; }

dialog.tl-dialog button.primary {
    background: var(--tl-green);
    color: var(--tl-on-green);
    border-color: var(--tl-green);
    font-weight: 700;
}

dialog.tl-dialog button.small { font-size: 14px; padding: 5px 9px; }

dialog.tl-dialog input[type=checkbox] {
    accent-color: var(--tl-green);
    width: 17px;
    height: 17px;
    padding: 0;
}

/* A dialog renders in the top layer, outside .tl-wrap, so the stacked-label
   treatment does not cascade into it. Without this the label text sits inline
   with its control and every dialog form reads as a jumbled row. */
dialog.tl-dialog label.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--tl-muted);
    margin-top: 16px;
}

dialog.tl-dialog label.field:first-child { margin-top: 0; }

/* Controls inside a stacked label take the full dialog width: a tone select or
   a volume slider sized to its content looks accidental next to a full-width
   heading. */
dialog.tl-dialog label.field > select,
dialog.tl-dialog label.field > input[type=text],
dialog.tl-dialog label.field > input[type=range],
dialog.tl-dialog label.field > input[type=date] {
    width: 100%;
}

/* Range inputs get none of the border/background treatment the other controls
   share — it draws a box around the track. */
dialog.tl-dialog input[type=range] {
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: var(--tl-green);
}

.tl-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.tl-field-value {
    color: var(--tl-text);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

dialog.tl-dialog .sub   { color: var(--tl-muted); font-size: 14px; }
dialog.tl-dialog .muted { color: var(--tl-muted); }
dialog.tl-dialog h2     { font-size: 18px; margin: 0; }
dialog.tl-dialog h3     { font-size: 16px; margin: 0; }
dialog.tl-dialog a      { color: var(--tl-green-ink); }

dialog.tl-dialog .tl-panelhead {
    padding: 18px 20px;
    border-bottom: 1px solid var(--tl-line);
}

dialog.tl-dialog .tl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

dialog.tl-dialog .between { justify-content: space-between; }

.tl-dialogbody {
    padding: 22px;
    overflow-y: auto;
}

.tl-dialogfoot {
    padding: 17px 22px;
    border-top: 1px solid var(--tl-line);
}

dialog.tl-dialog table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
}

dialog.tl-dialog th {
    font-weight: 500;
    color: var(--tl-muted);
    padding: 10px 12px;
    border: 0;
    background: var(--tl-bg);
    text-align: center;
    vertical-align: middle;
}

dialog.tl-dialog td {
    padding: 9px 12px;
    border: 0;
    border-top: 1px solid var(--tl-line);
    text-align: center;
    vertical-align: middle;
    color: var(--tl-text);
}

dialog.tl-dialog th:first-child,
dialog.tl-dialog td:first-child { text-align: left; }

#tl-matchStatsDialog { width: min(850px, 94vw); }
#tl-statsSummary { font-size: 18px; font-weight: 600; }

/* --------------------------------------------------------------------------
   Rule editor
   -------------------------------------------------------------------------- */

.tl-group {
    padding: 16px;
    border: 1px solid var(--tl-line);
    border-radius: 8px;
    margin-top: 12px;
    background: var(--tl-bg);
}

/* Statistic · scope · comparison · target · remove. Fixed track widths rather
   than auto, so the columns stay aligned down a group of conditions. */
.tl-condition {
    display: grid;
    grid-template-columns: 1.5fr 1fr 80px 85px 34px;
    gap: 8px;
    margin: 10px 0;
}

.tl-condition select,
.tl-condition input {
    width: 100%;
    min-width: 0;
    font-size: 14px;
    padding: 8px;
}

.tl-condition button { padding: 4px; }

.tl-or {
    text-align: center;
    font-size: 12px;
    color: var(--tl-green-ink);
    margin-top: 12px;
    font-weight: 700;
}

.tl-checkgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin-top: 14px;
}

.tl-checkgrid label {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
}

.tl-columnoption {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--tl-line);
}

.tl-columnoption label {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    font-size: 14px;
}

.tl-columnoption button { padding: 3px 10px; }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

/* A stack rather than a single box: alerts can arrive together, and the old
   single-slot toast meant the second overwrote the first before it had been
   read. Newest goes on top, oldest falls off the bottom. */
#tl-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(560px, 92vw);
    pointer-events: none;
}

.tl-toast-item {
    padding: 15px 20px;
    border: 1px solid var(--tl-line);
    border-left: 5px solid var(--tl-muted);
    background: var(--tl-panel);
    color: var(--tl-text);
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: var(--cp-shadow);
    pointer-events: auto;
    animation: tl-toast-in .22s ease-out;
}

/* An alert is the thing the page exists to deliver, so it gets the green edge,
   the heavier type and the longer life. Errors and confirmations stay quiet. */
.tl-toast-item.alert {
    border-color: var(--cp-accent-line);
    border-left-color: var(--tl-green);
    background: var(--cp-accent-dim);
    font-size: 16px;
    font-weight: 650;
}

.tl-toast-item.alert .tl-toast-sub {
    display: block;
    margin-top: 3px;
    color: var(--tl-muted);
    font-size: 13px;
    font-weight: 400;
}

@keyframes tl-toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .tl-toast-item { animation: none; }
}

/* --------------------------------------------------------------------------
   Toolbar countdown and alert badge
   -------------------------------------------------------------------------- */

.tl-countdown {
    display: inline-block;
    min-width: 34px;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(var(--cp-ink-rgb), .07);
    color: var(--tl-muted);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

/* Counting through the last few seconds, so the refresh is not a surprise. */
.tl-countdown.imminent {
    background: rgba(var(--cp-accent-rgb), .16);
    color: var(--tl-green-ink);
}

.tl-countdown.paused {
    background: rgba(var(--cp-warn-rgb), .16);
    color: var(--tl-amber);
}

.tl-alertbadge {
    display: inline-block;
    min-width: 18px;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--tl-amber);
    color: var(--cp-bg);
    font-size: 11px;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
    vertical-align: super;
}

/* --------------------------------------------------------------------------
   Too narrow to be usable
   --------------------------------------------------------------------------
   Touchline is a wide table of live numbers read at a glance, alongside a
   filter panel. Below roughly a small laptop there is no arrangement of it that
   works: the columns collapse to a horizontal scroll that defeats the point of
   glancing, and the rule editor's five-track condition grid has nowhere to go.
   Rather than ship something that technically renders and is miserable to use,
   the page says so.

   The 992px threshold is where the site header switches to its desktop
   layout. Change both the media queries below together if it needs moving.
   -------------------------------------------------------------------------- */

.tl-toonarrow { display: none; }

@media (max-width: 991.98px) {
    body.touchline-page .tl-wrap { display: none; }

    .tl-toonarrow {
        display: block;
        margin: 24px auto;
        padding: 28px 24px;
        max-width: 520px;
        background: var(--tl-panel);
        border: 1px solid var(--tl-line);
        border-radius: 11px;
        color: var(--tl-text);
        text-align: center;
    }

    .tl-toonarrow .tl-brand {
        justify-content: center;
        margin-bottom: 14px;
        font-weight: 800;
        font-size: 23px;
        letter-spacing: -1px;
    }

    .tl-toonarrow h1 {
        font-size: 20px;
        margin: 0 0 10px;
        letter-spacing: -.5px;
    }

    .tl-toonarrow p {
        color: var(--tl-muted);
        font-size: 14px;
        margin: 0 0 8px;
    }

    .tl-toonarrow a { color: var(--tl-green-ink); }
}

/* --------------------------------------------------------------------------
   Responsive — thresholds carried over from the prototype
   -------------------------------------------------------------------------- */

@media (max-width: 1150px) {
    .tl-savedlist { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

@media (max-width: 650px) {
    .tl-wrap { padding-block: 18px; }
    .tl-condition { grid-template-columns: 1fr 1fr; }
    .tl-condition input { width: 100%; }
    .tl-summary { gap: 12px; }
    .tl-checkgrid { grid-template-columns: 1fr; }
    .tl-brand { font-size: 20px; }
    .tl-wrap .sub.header-sub,
    .tl-subnav .sub.header-sub { display: none; }
}

/* --------------------------------------------------------------------------
   The members-only pitch, shown in place of the board when signed out
   -------------------------------------------------------------------------- */

.tl-gate { max-width: 860px; }
.tl-gate__body { padding: 20px; }
.tl-gate__lead { font-size: 17px; margin: 0 0 18px; }
.tl-gate__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}
.tl-gate__grid h3 { font-size: 15px; margin-bottom: 4px; }
.tl-gate__actions { gap: 12px; }
/* The board's own control metrics, as links rather than buttons. */
.tl-wrap a.tl-gate__btn {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--tl-line);
    border-radius: 7px;
    background: var(--tl-control);
    color: var(--tl-text);
    font-weight: 600;
    text-decoration: none;
}
.tl-wrap a.tl-gate__btn.primary {
    background: var(--tl-green);
    border-color: var(--tl-green);
    color: var(--tl-on-green);
    font-weight: 700;
}
.tl-wrap a.tl-gate__btn:hover { border-color: var(--tl-green); }