/**
 * CricketNow — Shared brand layer
 * ============================================================================
 * A single, canonical set of brand-on-Tabler components. Replaces the
 * per-page `.cn-dashboard` / `.cn-goals` / `.cn-matches` / `.cn-goal-detail`
 * style blocks that had drifted apart (different heading weights, letter
 * spacing, font sizes and tokens).
 *
 * Usage: add `class="cn-page"` to the page-body container, then use the
 * `.cn-*` component classes below. Everything is scoped under `.cn-page`
 * and built on Tabler design tokens, so native Tabler pages are untouched
 * and dark mode / theming works for free.
 * ========================================================================== */

/* ============================================================================
 * APP-WIDE PREMIUM IDENTITY
 * Overrides Tabler's own design tokens at body level, so every page and the
 * shared shell (sidebar/navbar) render in the oklch palette + premium
 * typefaces — no per-page opt-in. Custom-property inheritance means the
 * already-premium surfaces (.cn-dashboard/.cn-feed/.cn-premium/.cn-stats)
 * keep their identical values via more-proximate scopes, so nothing conflicts.
 * Light-only by design (dark mode is parked). Fonts are loaded by cn-fonts.css
 * (self-hosted woff2, included from head.php).
 * ========================================================================== */
body {
    --tblr-font-sans-serif: 'Manrope', system-ui, sans-serif;
    /* Rebind here: Tabler resolves this alias at :root before our font override. */
    --tblr-body-font-family: var(--tblr-font-sans-serif);
    --tblr-font-monospace: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

    --tblr-body-color: #1a1b3a;
    --tblr-secondary: oklch(0.5 0.02 270);
    --tblr-border-color: oklch(0.91 0.008 260);
    --tblr-border-color-translucent: oklch(0.85 0.012 260);
    --tblr-bg-surface: #ffffff;
    --tblr-bg-surface-secondary: oklch(0.972 0.005 255);
    --tblr-bg-surface-tertiary: oklch(0.94 0.008 255);
    --tblr-primary: #020339;
    --tblr-primary-rgb: 2, 3, 57;
    --tblr-primary-lt: oklch(0.95 0.018 270);
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4,
.card-title, .page-title {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    letter-spacing: -0.02em;
}
.page-title { letter-spacing: -0.03em; }
.page-pretitle {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase; letter-spacing: 0.12em;
}

/* Tabler ships alert-info in its stock blue, which is the one alert variant that
   never got pulled into the navy identity — it reads as a foreign element in the
   ~30 views that use it. Toned to the brand tint here rather than per-view, and
   still clearly distinct from warning/success/danger. */
.alert-info {
    background: var(--tblr-primary-lt);
    color: var(--tblr-primary);
    border-color: transparent;
}

/* Keyboard/screen-reader skip link — first focusable element on every page. */
.cn-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 10px 16px;
    background: var(--tblr-primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 0;
}
.cn-skip-link:focus {
    left: 0;
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* The skip link focuses this landmark, not a control. Avoid a page-sized ring;
   links, buttons and fields retain their own visible keyboard focus. */
#main-content[tabindex="-1"]:focus { outline: none; }

.cn-page {
    /* Canonical token set — same values everywhere. */
    --cn-navy:         var(--tblr-primary);
    --cn-ink:          var(--tblr-body-color);
    --cn-body:         var(--tblr-body-color);
    --cn-paper:        var(--tblr-bg-surface);
    --cn-cream:        var(--tblr-bg-surface-secondary);
    --cn-cream-2:      var(--tblr-bg-surface-tertiary, var(--tblr-bg-surface-secondary));
    --cn-line:         var(--tblr-border-color);
    --cn-line-strong:  var(--tblr-border-color-translucent, rgba(98, 105, 118, .35));
    --cn-muted:        var(--tblr-secondary);
    --cn-muted-2:      var(--tblr-secondary);
    --cn-mono:         var(--tblr-font-monospace);

    /* Cricket result-tone accents (semantic, mapped to Tabler colours). */
    --cn-win:      var(--tblr-success);
    --cn-win-bg:   var(--tblr-success-lt);
    --cn-loss:     var(--tblr-danger);
    --cn-loss-bg:  var(--tblr-danger-lt);
    --cn-tied:     var(--tblr-warning);
    --cn-tied-bg:  var(--tblr-warning-lt);
    --cn-drawn:    var(--tblr-secondary);
    --cn-drawn-bg: var(--tblr-bg-surface-secondary);

    /* Achievement, not result: a fifty, a five-for, four dismissals in the
       field. Green and red are spoken for by won and lost one column over.
       Darker than the app's #eab308 because this is text on white. */
    --cn-gold:     #a16207;
    --cn-gold-bg:  #fef9c3;

    color: var(--cn-body);
    font-size: 14.5px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Typography — one canonical heading treatment (navy, no negative tracking)
   -------------------------------------------------------------------------- */
.cn-page h1,
.cn-page h2,
.cn-page h3,
.cn-page h4 {
    font-family: var(--tblr-font-sans-serif);
    color: var(--cn-navy);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
    margin: 0;
}
.cn-page p { margin: 0; }
.cn-page a:not(.btn) { color: inherit; text-decoration: none; }

.cn-page .tab-num,
.cn-page .cn-mono { font-variant-numeric: tabular-nums; }
.cn-page .cn-mono { font-family: var(--cn-mono); }

/* Mono uppercase label, e.g. section pretitles and tile heads. */
.cn-page .cn-pretitle {
    font-family: var(--cn-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cn-muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cn-page .cn-pretitle .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--cn-win);
}

/* --------------------------------------------------------------------------
   Result-tone pills (Won / Lost / Tied / Drawn)
   -------------------------------------------------------------------------- */
.cn-page .cn-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: var(--cn-mono);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}
.cn-page .cn-pill.won   { background: var(--cn-win-bg);   color: var(--cn-win); }
.cn-page .cn-pill.lost  { background: var(--cn-loss-bg);  color: var(--cn-loss); }
.cn-page .cn-pill.tied  { background: var(--cn-tied-bg);  color: var(--cn-tied); }
.cn-page .cn-pill.drawn { background: var(--cn-drawn-bg); color: var(--cn-drawn); }
.cn-page .cn-pill.neutral {
    background: var(--cn-cream);
    color: var(--cn-muted);
    border: 1px solid var(--cn-line);
}

/* --------------------------------------------------------------------------
   Section header — title + "view all" affordance
   -------------------------------------------------------------------------- */
.cn-page .cn-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.cn-page .cn-section-head h2 { font-size: 22px; }
.cn-page .cn-view-all {
    font-family: var(--cn-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cn-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cn-page .cn-view-all:hover { color: var(--cn-navy); }
.cn-page .cn-view-all svg { width: 12px; height: 12px; }

/* --------------------------------------------------------------------------
   Stat tiles — a hairline-separated strip of headline numbers
   -------------------------------------------------------------------------- */
.cn-page .cn-tile-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--cn-line);
    border-bottom: 1px solid var(--cn-line);
}
.cn-page .cn-tile {
    padding: 22px 0 22px 22px;
    border-right: 1px solid var(--cn-line);
    min-width: 0;
}
.cn-page .cn-tile:first-child { padding-left: 0; }
.cn-page .cn-tile:last-child  { border-right: 0; padding-right: 0; }
/*
 * THE stat-tile label, on every page that shows figures in tiles: dashboard
 * season tiles, career KPIs, match history's season strip and the discipline
 * pages. A small uppercase kicker in the text face (ST1, 2026-09-30: the stats
 * pages read like a record, cricinfo's section names), secondary colour, no
 * icon. Monospace stays the page pretitle's alone (docs/WEB_UI_STANDARD.md).
 * Three adjacent pages had three different labels until 2026-09-24, so pages
 * do not restyle it; a change here is a change to all of them.
 */
.cn-kpi-label {
    font-family: inherit;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tblr-secondary);
}

/* T0.1: the scope line under every headline season total (partials/season-scope.php).
   Quiet, one line where it fits, and a link to the matches it counts. */
.cn-scope-line {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: baseline;
    gap: .35rem;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--tblr-secondary);
    text-decoration: none;
}
.cn-scope-line .ti { font-size: .9rem; align-self: center; flex: none; }
a.cn-scope-line:hover span, a.cn-scope-line:focus-visible span { text-decoration: underline; color: var(--tblr-body-color); }

.cn-page .cn-tile .value-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}
.cn-page .cn-tile .value {
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    color: var(--cn-navy);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cn-page .cn-tile .detail {
    font-size: 12px;
    color: var(--cn-muted);
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cn-page .cn-tile .spark { flex-shrink: 0; display: block; opacity: 0.85; }
.cn-page .cn-tile.is-milestone .value { color: var(--cn-navy); }

/* Thin progress bar (e.g. milestone / goal progress on a tile). */
.cn-page .cn-mini-progress {
    height: 4px;
    background: var(--cn-line);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}
.cn-page .cn-mini-progress > i {
    display: block;
    height: 100%;
    background: var(--cn-navy);
    border-radius: 2px;
}

@media (max-width: 800px) {
    .cn-page .cn-tile-strip { grid-template-columns: repeat(2, 1fr); }
    .cn-page .cn-tile:nth-child(2n) { border-right: 0; }
    .cn-page .cn-tile:nth-child(n+3) { border-top: 1px solid var(--cn-line); }
}

/* --------------------------------------------------------------------------
   Latest-match hero numbers (inside a Tabler card)
   -------------------------------------------------------------------------- */
.cn-page .cn-latest-opp {
    font-size: 22px;
    font-weight: 700;
    color: var(--cn-navy);
    line-height: 1.05;
}
.cn-page .cn-latest-val {
    font-size: 28px;
    font-weight: 700;
    color: var(--cn-navy);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Match row — editorial hairline list (recent matches / match log)
   -------------------------------------------------------------------------- */
.cn-page .cn-match-list { display: flex; flex-direction: column; }
.cn-page .cn-match-row {
    display: grid;
    grid-template-columns: 48px 64px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px 8px 14px 0;
    border-bottom: 1px solid var(--cn-line);
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
    transition: background .15s, padding .15s;
}
.cn-page .cn-match-row:hover { background: var(--cn-cream); padding-left: 8px; }
.cn-page .cn-match-row:last-child { border-bottom: 0; }
.cn-page .cn-match-row .date { display: flex; flex-direction: column; line-height: 1; }
.cn-page .cn-match-row .date .d {
    font-size: 24px;
    font-weight: 700;
    color: var(--cn-navy);
    font-variant-numeric: tabular-nums;
}
.cn-page .cn-match-row .date .m {
    margin-top: 4px;
    font-family: var(--cn-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cn-muted);
}
.cn-page .cn-match-row .name { min-width: 0; }
.cn-page .cn-match-row .name .opp {
    display: block;
    font-weight: 700;
    font-size: 16px;
    color: var(--cn-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cn-page .cn-match-row .name .sub {
    color: var(--cn-muted);
    font-size: 12px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cn-page .cn-match-row .perf {
    font-weight: 700;
    font-size: 15px;
    color: var(--cn-ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Goal progress rows (right-rail widgets)
   -------------------------------------------------------------------------- */
.cn-page .cn-goal-list { display: flex; flex-direction: column; gap: 18px; }
.cn-page .cn-goal-row { display: flex; flex-direction: column; gap: 10px; }
.cn-page .cn-goal-row .gh {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.cn-page .cn-goal-row .gt {
    font-weight: 700;
    font-size: 15px;
    color: var(--cn-ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cn-page .cn-goal-row .gp {
    font-family: var(--cn-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--cn-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cn-page .cn-goal-row .gp strong { color: var(--cn-navy); }
.cn-page .cn-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--cn-cream-2);
    overflow: hidden;
}
.cn-page .cn-progress .fill { height: 100%; background: var(--cn-navy); border-radius: 3px; }
.cn-page .cn-progress.win .fill { background: var(--cn-win); }

/* ──────────────────────────────────────────────────────────────────────────
   Mobile: stack page-header actions below the title.
   Tabler's standard page-header row is `.col` (title) + `.col-auto` (actions),
   which never wraps — on phones the title gets crushed and the action buttons
   clip off the right edge. Forcing the action column to full width below ~md
   makes it wrap onto its own row, and the title `.col` fills the first line.
   One rule fixes every page-header app-wide (current and future).
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header .row.align-items-center > .col-auto {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 0.5rem;
    }
    .page-header .row.align-items-center > .col-auto .btn-list {
        flex-wrap: wrap;
    }
}

/* SEGMENTED CONTROL (T2, 2026-09-25): Tabler's .nav.nav-segmented with
   .nav-link children (segmented-control.html). It replaced .cn-density-toggle
   and the matches page's .cn-view-toggle look. Buttons with aria-pressed for
   an in-page switch; links with aria-current for Default/Compact and the feed
   lane, which reload. Filters that are links to other results stay
   .cn-filter-tabs. Only the touch height is ours. */
.nav-segmented { --tblr-nav-height: 2.75rem; }
/* .cn-page a:not(.btn) inherits colour, which made an unselected link read
   as selected; give the segment its own two states back. */
.cn-page .nav-segmented .nav-link:not(.active) { color: var(--tblr-secondary); }
.cn-page .nav-segmented .nav-link.active { color: var(--tblr-body-color); }

/* AVATAR LIST (T4; partials/avatar-list.php). Tabler overlaps stacked
   avatars with a negative right margin, the last one included, which ran
   the faces into the words that follow them. That margin is !important,
   so the list gives the space back instead (half an xs avatar). */
.avatar-list-stacked { display: inline-flex; padding-right: .625rem; }
.avatar-list .avatar-xs { font-size: .55rem; }

/* 2FA CODE BOXES (T9; auth/2fa_challenge.php, code-input.js): six in one
   row at any width. The auth layout stacks every .card-md .row > .col
   below 576px, which put the six boxes one above another. */
.cn-code-boxes { flex-wrap: nowrap; --tblr-gutter-x: .5rem; }
.card-md .row.cn-code-boxes > .col, .row.cn-code-boxes > .col { flex: 1 0 0; width: auto; min-width: 0; max-width: none; }

/* NOTIFICATIONS MENU (T6; partials/sidebar.php, notification-menu.js).
   Bootstrap does not position dropdowns inside a navbar, and Tabler lays
   them out inline in the vertical one (static, transparent, borderless),
   so this menu places itself: beside the sidebar (15rem), level with the
   account rows at its foot, above the page. Light, whatever the sidebar. */
.navbar-vertical .navbar-collapse .dropdown-menu.cn-notification-menu,
.cn-notification-menu {
    position: fixed;
    left: calc(15rem + .5rem);
    bottom: 1rem;
    top: auto;
    width: 22rem;
    max-width: calc(100vw - 16rem);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: var(--tblr-box-shadow-dropdown, 0 16px 24px 2px rgba(0,0,0,.07));
    z-index: 1060;
}
.cn-notification-menu .card { margin: 0; }
.cn-notification-menu .list-group { max-height: 22rem; overflow-y: auto; }

/* DROPZONE (T13; cn-dropzone.js). Hidden until its script is working, so a
   page without it keeps the plain file input and no dead drop area. */
.dropzone[hidden] { display: none !important; }
.dropzone { border-radius: var(--tblr-border-radius-lg); background: var(--tblr-bg-surface-secondary); cursor: pointer; }
.dropzone:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }
.dropzone .dz-message { margin: 1.5rem 0; }
/* Dropzone never uploads here (the page submits the input), so its
   progress bar is meaningless; and the name should be readable. */
.dropzone .dz-preview .dz-progress { display: none; }
.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span { background: rgba(255,255,255,.9); color: var(--tblr-body-color); border: 0; }
.dropzone .dz-preview .dz-remove { font-size: .8rem; }

/* TOM SELECT (T3, 2026-09-25). tom-select.bootstrap5.css reads Bootstrap's
   --bs-* variables, which Tabler names --tblr-*; unmapped, the dropdown
   was transparent. Mapped here once for every page that loads it. The
   dropdown hangs off <body> (dropdownParent), so it sits above the page. */
.ts-wrapper, .ts-dropdown {
    --bs-body-bg: var(--tblr-bg-surface);
    --bs-body-color: var(--tblr-body-color);
    --bs-border-color: var(--tblr-border-color);
    --bs-border-color-translucent: var(--tblr-border-color-translucent);
    --bs-border-radius: var(--tblr-border-radius);
    --bs-border-radius-sm: var(--tblr-border-radius-sm);
    --bs-border-radius-lg: var(--tblr-border-radius-lg);
    --bs-border-width: var(--tblr-border-width);
    --bs-secondary-bg: var(--tblr-bg-surface-secondary);
    --bs-tertiary-bg: var(--tblr-bg-surface-tertiary);
}
.ts-dropdown { z-index: 1060; color: var(--tblr-body-color); border-color: var(--tblr-border-color); box-shadow: var(--tblr-box-shadow-dropdown, 0 16px 24px 2px rgba(0,0,0,.07)); }
.ts-dropdown .active { background: var(--tblr-primary-lt); color: var(--tblr-primary); }
.ts-dropdown .create { color: var(--tblr-secondary); }

/* ONE SURFACE RECIPE (T0.6, 2026-09-25; docs/WEB_UI_STANDARD.md).
   A surface is Tabler's own .card / .card-header / .card-body. The brand is
   tokens on it, set here and nowhere else: the one-rem corner the player pages
   had been giving their cards one stylesheet at a time (dashboard, passport,
   stats shell, network rail, honours). cn-panel, the second recipe, is retired;
   do not add a third. The inner radius follows so a header's top corners
   match the card's. */
.card {
    --tblr-card-border-radius: 1rem;
    --tblr-card-inner-border-radius: calc(1rem - var(--tblr-card-border-width, 1px));
}

/* T1: illustrated empty states (partials/empty-state.php). The pack tints
   through --tblr-illustrations-primary; brand navy, set once here. */
.empty { --tblr-illustrations-primary: var(--tblr-primary); }
.empty-img .img { max-width: 100%; height: auto; max-height: 256px; }
.cn-empty-sm .empty-img .img { max-height: 160px; }
.cn-empty-sm { padding: 1.5rem 1rem; }
/* .cn-page p zeroes paragraph margins; the empty state needs its own. */
.empty > .empty-title { margin: 0 0 .5rem; }
.empty > .empty-subtitle { margin: 0 auto 1.5rem; max-width: 52ch; }

/* Shared application components. Players and Goals are the reference pages.
   Use these classes instead of cloning navigation styling per page. */
/* PW15 (Louis, 2026-10-01): one tab style. Destinations within a section are
   underline tabs, the profile's (T16); they were filled pills here, which
   wrapped to two rows on a phone on every stats page. A row that does not fit
   scrolls sideways inside itself. */
.cn-section-nav { display: flex; gap: .25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--tblr-border-color); }
.cn-section-nav::-webkit-scrollbar { display: none; }
.cn-section-nav > a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; padding: .8rem 1.25rem; min-height: 48px; color: var(--tblr-secondary); border-bottom: 3px solid transparent; text-decoration: none; font-weight: 600; white-space: nowrap; }
.cn-section-nav > a:hover { color: var(--tblr-primary); }
.cn-section-nav > a[aria-current="page"] { color: var(--tblr-primary); border-bottom-color: var(--tblr-primary); }
.cn-nav-count { font-size: .8rem; font-variant-numeric: tabular-nums; opacity: .85; }
.cn-form-content { width: 100%; max-width: 52rem; }
.cn-filter-tabs { display: flex; gap: .35rem; flex-wrap: wrap; }
.cn-filter-tabs > a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .5rem .8rem; border-radius: .6rem; color: var(--tblr-secondary); font-size: .85rem; text-decoration: none; }
.cn-filter-tabs > a[aria-current="page"] { background: var(--tblr-primary-lt); color: var(--tblr-primary); font-weight: 600; }
.cn-filter-tabs > a:hover { background: var(--tblr-bg-surface-secondary); }
.cn-filter-tabs .count { font-variant-numeric: tabular-nums; font-size: .8rem; }
.cn-section-nav a:focus-visible, .cn-filter-tabs a:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: -2px; }

/* The Pro lock line (partials/pro-lock.php): one muted line under the real
   thing's first row. The link is the words; the badge is the sidebar's. */
.cn-pro-lock { display: flex; align-items: baseline; gap: .4rem; padding: .6rem 1rem; font-size: .85rem; line-height: 1.5; color: var(--tblr-secondary); }
.cn-pro-lock > .ti { flex: none; position: relative; top: .1em; }
.cn-pro-lock span > a.cn-pro-lock-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cn-pro-lock span > a.cn-pro-lock-link:hover { color: var(--tblr-primary); }
.cn-pro-lock .badge { vertical-align: 1px; }

/* ---------------------------------------------------------------------------
   Club console pages (improve plan §F1). These were <style> blocks inside the
   page templates; each page's rules are now scoped by the body class the club
   layout sets (cn-club-<page>, see Views/clubs/partials/layout.php), so a rule
   written for one page cannot reach another. Rules shared by every club page
   sit under .cn-club.
   ------------------------------------------------------------------------- */

/* The shell: the sidebar and the top bar of every signed-in page (CM13,
   2026-10-14; partials/shell/). CMJ1b and CMJ1c built it for club pages and
   these rules were scoped .cn-club; they are scoped by the sidebar's own
   class now, .cn-shell-sidebar, because seventy-six player views write their
   own <body> and none of them could be given a class.
   The sidebar is navigation only, flat, in labelled sections; where you are
   and the account are in the top bar beside it (Tabler's combo layout). The
   colour is the shell's slate and is not restyled here; row heights and type
   sizes are Tabler's navbar-vertical defaults. */
.cn-impersonation-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; }
.cn-brand-mark { display: none; }
/* The wordmark row carries the collapse control at its right. */
@media (min-width: 992px) {
    .navbar-vertical.cn-shell-sidebar .cn-shell-brand { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-inline: .75rem .25rem; }
    .navbar-vertical.cn-shell-sidebar .cn-shell-brand > a { flex: none; }
    .navbar-vertical.cn-shell-sidebar .cn-shell-brand .cn-brand-full { width: 9.5rem; height: auto; }
}
/* A section: a small-caps label over its rows. -rule is a section with no
   label (Club settings, the foot): a hairline. */
.navbar-vertical.cn-shell-sidebar .cn-nav-section { padding: 1rem .75rem .25rem; }
.navbar-vertical.cn-shell-sidebar .cn-nav-section .subheader { color: rgba(255, 255, 255, .5); }
.navbar-vertical.cn-shell-sidebar .cn-nav-section-rule { padding: 0; margin: .5rem .75rem; border-top: 1px solid rgba(255, 255, 255, .12); }
/* A pending count sits at the right of its row. */
.navbar-vertical.cn-shell-sidebar .navbar-nav .nav-link .cn-nav-badge { margin-left: auto; }
/* Switch club's rows: a club and the person's role there, under one another. */
.navbar-vertical.cn-shell-sidebar .dropdown-menu .cn-nav-switch-item { white-space: normal; }
.navbar-vertical.cn-shell-sidebar .cn-nav-switch-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.navbar-vertical.cn-shell-sidebar .cn-nav-switch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbar-vertical.cn-shell-sidebar .cn-nav-item-note { color: rgba(255, 255, 255, .6); font-size: var(--tblr-font-size-h5, .75rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The top bar. White on the page side, as the club header always was. Not a
   .navbar (see partials/club_topbar.php): a flex row, and its two menus are
   ordinary dropdowns placed by the rules below (data-bs-display="static"). */
.cn-topbar { background: var(--tblr-bg-surface); border-bottom: 1px solid var(--tblr-border-color); }
.cn-topbar-row { display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; padding-block: .5rem; }
.cn-topbar-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: transparent; color: var(--tblr-body-color); font-size: 1.5rem; border-radius: var(--tblr-border-radius); }
.cn-topbar-toggle:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }
.cn-topbar-place { display: flex; align-items: center; gap: .625rem; min-width: 0; flex: 0 1 auto; color: inherit; text-decoration: none; }
.cn-topbar-place:hover { color: inherit; text-decoration: none; }
.cn-topbar-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cn-topbar-name { font-weight: var(--tblr-font-weight-medium, 500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-topbar-caption { color: var(--tblr-secondary); font-size: var(--tblr-font-size-h5, .75rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The tile: the crest when there is one, else initials in white on the
   shell's slate, the same tile at the club and at the account. */
.cn-topbar .cn-topbar-tile { flex: none; background-color: #0f172a; color: #fff; box-shadow: none; }
.cn-topbar-search { flex: 1 1 auto; max-width: 28rem; margin-inline: auto; }
.cn-topbar-actions { display: flex; align-items: center; gap: .25rem; margin-left: auto; flex: none; }
/* Beside the search field the actions need no push; where the field is not
   drawn (below md) they go to the far end like everywhere else. */
@media (min-width: 768px) { .cn-topbar-search + .cn-topbar-actions { margin-left: 0; } }
.cn-topbar-bell { position: relative; }
.cn-topbar-bell .ti { font-size: 1.25rem; }
.cn-topbar-count { position: absolute; top: -.25rem; right: -.25rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: .625rem; line-height: 1; }
.cn-topbar-count[hidden] { display: none; }
.cn-topbar-account { display: flex; align-items: center; gap: .5rem; padding: .25rem .375rem; border-radius: var(--tblr-border-radius); color: inherit; text-decoration: none; }
.cn-topbar-account:hover { color: inherit; text-decoration: none; background: var(--tblr-bg-surface-secondary); }
.cn-topbar-account:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }
.cn-topbar-user { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-topbar .dropdown { position: relative; }
.cn-topbar .dropdown-menu { position: absolute; top: 100%; right: 0; left: auto; margin-top: .25rem; }
.cn-topbar .dropdown-menu form { margin: 0; }
.cn-topbar .dropdown-menu button.dropdown-item { width: 100%; text-align: start; }
/* The search's palette (CM14): the groups under the field, filled by
   shell-search.js. Hangs from the field at its width, and scrolls inside
   itself so a long list never pushes the page. */
.cn-topbar-search { position: relative; }
.cn-search-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 1030; margin-top: .25rem; padding: .25rem 0; max-height: min(70vh, 32rem); overflow-y: auto; background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); box-shadow: var(--tblr-box-shadow-dropdown, 0 .5rem 1rem rgba(15, 23, 42, .12)); }
.cn-search-menu[hidden] { display: none; }
.cn-search-group + .cn-search-group { border-top: 1px solid var(--tblr-border-color); margin-top: .25rem; padding-top: .25rem; }
.cn-search-heading { padding: .375rem .75rem .125rem; color: var(--tblr-secondary); font-size: var(--tblr-font-size-h5, .75rem); font-weight: var(--tblr-font-weight-medium, 500); text-transform: uppercase; letter-spacing: .04em; }
.cn-search-option { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: .375rem .75rem; color: inherit; text-decoration: none; }
.cn-search-option:hover, .cn-search-option.is-active { background: var(--tblr-bg-surface-secondary); color: inherit; text-decoration: none; }
.cn-search-option.is-active { box-shadow: inset 2px 0 0 var(--tblr-primary); }
.cn-search-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.cn-search-label { font-weight: var(--tblr-font-weight-medium, 500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-search-caption { color: var(--tblr-secondary); font-size: var(--tblr-font-size-h5, .75rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-search-kind { flex: none; color: var(--tblr-secondary); font-size: var(--tblr-font-size-h5, .75rem); }
.cn-search-all { border-top: 1px solid var(--tblr-border-color); margin-top: .25rem; color: var(--tblr-primary); font-weight: var(--tblr-font-weight-medium, 500); }
.cn-search-all:hover, .cn-search-all.is-active { color: var(--tblr-primary); }
.cn-search-note { padding: .75rem; color: var(--tblr-secondary); }
/* The search's own page: a result row is a tap target at phone width. */
.cn-search-result { min-height: 2.75rem; }
.cn-search-page-form { max-width: 40rem; }

/* The bell's menu is the player shell's card; there it is pinned beside the
   sidebar, here it hangs from the bell. */
.cn-topbar .cn-notification-menu { position: absolute; left: auto; right: 0; top: 100%; bottom: auto; width: 22rem; max-width: calc(100vw - 1.5rem); }
@media (max-width: 575.98px) {
    /* The account avatar is the last thing in the row; the bell's card would
       hang off the left edge from the bell, so it hangs from the row. */
    .cn-topbar-actions > .dropdown[data-notification-menu] { position: static; }
    .cn-topbar-row { position: relative; }
    .cn-topbar .cn-notification-menu { right: .75rem; }
}

/* Below lg the sidebar has no bar of its own: the top bar holds the menu
   button, and the sidebar is only ever the drawer. The drawer is a column the
   height of the screen, so the foot sits at the bottom of it. */
@media (max-width: 991.98px) {
    .navbar-vertical.navbar-expand-lg.cn-shell-sidebar { min-height: 0; height: 0; padding: 0; border: 0; }
    .navbar-vertical.navbar-expand-lg.cn-shell-sidebar > .container-fluid { min-height: 0; padding: 0; }
    .navbar-vertical.navbar-expand-lg.cn-shell-sidebar .cn-shell-brand { display: none; }
    .navbar-vertical.cn-shell-sidebar .navbar-collapse.show,
    .navbar-vertical.cn-shell-sidebar .navbar-collapse.collapsing { display: flex; flex-direction: column; height: auto; }
    .navbar-vertical.cn-shell-sidebar .cn-nav-drawer-head { flex: none; width: 100%; justify-content: space-between; padding: 0 .25rem .75rem .25rem; }
}
/* At every width the list scrolls and the foot stays at the bottom: an owner's
   list is longer than a laptop is tall, and the foot must not ride on top of
   it or drop out of sight below it. */
.navbar-vertical.cn-shell-sidebar .navbar-collapse > .navbar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; flex-wrap: nowrap; }
.navbar-vertical.cn-shell-sidebar .navbar-collapse > .cn-nav-foot { flex: none; margin-top: 0; }
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg.cn-shell-sidebar { overflow: hidden; }
    .navbar-vertical.navbar-expand-lg.cn-shell-sidebar > .container-fluid { height: 100%; min-height: 0; }
    .navbar-vertical.navbar-expand-lg.cn-shell-sidebar .navbar-collapse { min-height: 0; }
}

@media (min-width: 992px) {
    /* Collapsed = a slim icon rail. Hovering (or focusing into) it slides the
       full sidebar open as an overlay, so the page underneath never reflows and
       there are no per-group popouts to mis-position. */
    body.club-nav-mini .navbar-vertical.navbar-expand-lg.cn-shell-sidebar { width: 4.5rem; }
    body.club-nav-mini .navbar-vertical.navbar-expand-lg.cn-shell-sidebar ~ .page-wrapper,
    body.club-nav-mini .navbar-vertical.navbar-expand-lg.cn-shell-sidebar ~ .navbar { margin-left: 4.5rem; }
    body.club-nav-mini.layout-fluid .cn-shell-sidebar ~ .page-wrapper { max-width: calc(100vw - 4.5rem) !important; width: calc(100vw - 4.5rem) !important; }

    body.club-nav-mini .navbar-vertical.navbar-expand-lg.cn-shell-sidebar:hover,
    body.club-nav-mini .navbar-vertical.navbar-expand-lg.cn-shell-sidebar:focus-within {
        width: 15rem; z-index: 1040; box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .45);
    }

    /* Icons only while collapsed AND not revealed. On reveal these rules stop
       matching, so the sidebar renders exactly as it does when pinned open. */
    body.club-nav-mini .navbar-vertical.cn-shell-sidebar:not(:hover):not(:focus-within) .cn-mini-hide,
    body.club-nav-mini .navbar-vertical.cn-shell-sidebar:not(:hover):not(:focus-within) .nav-link-title,
    body.club-nav-mini .navbar-vertical.cn-shell-sidebar:not(:hover):not(:focus-within) .dropdown-toggle::after,
    body.club-nav-mini .navbar-vertical.cn-shell-sidebar:not(:hover):not(:focus-within) .dropdown-menu { display: none !important; }

    /* Rail keeps the CricketNow mark up top; the full wordmark returns on reveal. */
    body.club-nav-mini .navbar-vertical.cn-shell-sidebar:not(:hover):not(:focus-within) .navbar-brand { display: flex !important; justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }
    body.club-nav-mini .navbar-vertical.cn-shell-sidebar:not(:hover):not(:focus-within) .cn-brand-full { display: none !important; }
    body.club-nav-mini .navbar-vertical.cn-shell-sidebar:not(:hover):not(:focus-within) .cn-brand-mark { display: inline-block !important; }

    body.club-nav-mini .navbar-vertical.cn-shell-sidebar:not(:hover):not(:focus-within) .nav-link { position: relative; justify-content: center !important; padding-left: .5rem; padding-right: .5rem; }
    body.club-nav-mini .navbar-vertical.cn-shell-sidebar:not(:hover):not(:focus-within) .cn-mini-center { justify-content: center !important; }
    body.club-nav-mini .navbar-vertical.cn-shell-sidebar:not(:hover):not(:focus-within) .nav-link-icon { margin-inline: 0 !important; }
    body.club-nav-mini .navbar-vertical.cn-shell-sidebar:not(:hover):not(:focus-within) .cn-mini-nomargin { margin-right: 0 !important; }

    /* CM7c: in the rail a section is a hairline where its label was. */
    body.club-nav-mini .navbar-vertical.cn-shell-sidebar:not(:hover):not(:focus-within) .cn-nav-section { padding: 0; margin: .5rem .75rem; border-top: 1px solid rgba(255, 255, 255, .12); }
    body.club-nav-mini .navbar-vertical.cn-shell-sidebar:not(:hover):not(:focus-within) .cn-nav-section .subheader { display: none; }

    /* Pending count rides as a corner dot on its row's icon in the rail. */
    body.club-nav-mini .navbar-vertical.cn-shell-sidebar:not(:hover):not(:focus-within) .cn-nav-badge {
        display: inline-flex !important;
        position: absolute; top: .35rem; right: .45rem;
        min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem;
        align-items: center; justify-content: center;
        border: 2px solid var(--tblr-dark, #1f2937); border-radius: 999px;
        font-size: .625rem; line-height: 1;
    }
}
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .navbar-vertical.navbar-expand-lg.cn-shell-sidebar,
    .navbar-vertical.navbar-expand-lg.cn-shell-sidebar ~ .page-wrapper { transition: width .18s cubic-bezier(.22, .61, .36, 1), margin-left .18s cubic-bezier(.22, .61, .36, 1); }
    .navbar-vertical.navbar-expand-lg.cn-shell-sidebar ~ .cn-topbar { transition: left .18s cubic-bezier(.22, .61, .36, 1); }
}

/* CM13: the top bar is the sidebar's sibling, before the wrapper. From lg up
   the page is a ROW (custom.css: a fixed sidebar and the wrapper beside it),
   so a bar in the flow would stand beside the content, not above it. It is
   placed at the top of the page instead, over the wrapper's own top padding,
   and it scrolls away with the page as it always did. That needs its height
   known, which is why it is fixed here. No :has(), so no browser is left with
   the row. Below lg the page is a column and the bar is simply in the flow. */
:root { --cn-topbar-h: 3.5625rem; }
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg.cn-shell-sidebar ~ .cn-topbar { position: absolute; top: 0; left: 15rem; right: 0; height: var(--cn-topbar-h); }
    .navbar-vertical.navbar-expand-lg.cn-shell-sidebar ~ .cn-topbar > .cn-topbar-row { height: 100%; padding-block: 0; }
    .navbar-vertical.navbar-expand-lg.cn-shell-sidebar ~ .page-wrapper { padding-top: var(--cn-topbar-h); }
    body.club-nav-mini .navbar-vertical.navbar-expand-lg.cn-shell-sidebar ~ .cn-topbar { left: 4.5rem; }
}
/* The player's primary action, above the list. In the rail it is the plus. */
.cn-shell-sidebar .cn-shell-action { flex: none; padding: .25rem .75rem .5rem; }
@media (min-width: 992px) {
    .cn-shell-sidebar .cn-shell-action { padding-top: .75rem; }
    body.club-nav-mini .navbar-vertical.cn-shell-sidebar:not(:hover):not(:focus-within) .cn-shell-action { padding-inline: .75rem; }
    body.club-nav-mini .navbar-vertical.cn-shell-sidebar:not(:hover):not(:focus-within) .cn-shell-action .btn { padding-inline: 0; }
}
/* One line a row. A club's name is as long as the club made it; it is cut
   with an ellipsis, and the row's title says it in full. */
.navbar-vertical.cn-shell-sidebar .navbar-nav .nav-link { min-width: 0; }
.navbar-vertical.cn-shell-sidebar .navbar-nav .nav-link-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A word beside a row's label ("Pro"). Tabler pins a badge inside a nav link
   to the row's corner, half outside it; this one sits after the label. */
.navbar-vertical.cn-shell-sidebar .navbar-nav .nav-link .cn-nav-tag { position: static; transform: none; margin-left: .5rem; vertical-align: 1px; }
/* The drawer and the pinned sidebar are columns whose children fill the
   width: the action and the foot were being centred at their own width. */
.navbar-vertical.cn-shell-sidebar .navbar-collapse > .cn-shell-action,
.navbar-vertical.cn-shell-sidebar .navbar-collapse > .cn-nav-foot,
.navbar-vertical.cn-shell-sidebar .navbar-collapse > .navbar-nav { align-self: stretch; width: auto; }
/* A tile that holds an icon (your own cricket, the admin) rather than a crest. */
.cn-topbar .cn-topbar-tile .ti { font-size: 1.25rem; }

/* Club header (was inline in partials/club_header.php). Only pages that draw
   the header size the content column this way: settings and the sponsor list
   draw none and never had this rule, so it rides on cn-club-has-header. */
/* Size the content column against the fixed vertical club sidebar. */
@media (min-width: 992px) {
    body.cn-club-has-header.layout-fluid .page-wrapper {
        max-width: calc(100vw - 15rem);
        width: calc(100vw - 15rem);
    }
}

/* "View all" on a club card: the player dashboard's action link, so a card's
   way through to its list reads the same on both sides (§F2). */
.cn-club .cn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--tblr-primary);
    font-size: 0.8125rem;
    font-weight: 600;
}
.cn-club .cn-view-all svg {
    width: 0.8rem;
    height: 0.8rem;
}

/* CW7: a member's own words, line breaks kept (the club's About, a meeting's
   agenda and minutes). Was white-space written inline at each. */
.cn-text-lines { white-space: pre-wrap; }

/* CW3: the club pages' operational tables stack on phones (Tabler's
   table-mobile-md, labels from data-label), compactly, as the stats tables
   do (stats-data-tables.css, T5). Tabler's default gives every cell a
   full-width block, a row a screen third tall; here the row's name and any
   unlabelled cell (its actions) take the full width, and the labelled
   figures share lines. Comparative tables (the roles matrix) do not use it. */
@media (max-width: 767.98px) {
    body.cn-club .table-mobile-md tr {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
        column-gap: .75rem;
        row-gap: .35rem;
        padding: .75rem 1rem;
    }
    body.cn-club .table-mobile-md td { padding: 0 !important; text-align: left !important; min-width: 0; }
    body.cn-club .table-mobile-md tr > td:first-child,
    body.cn-club .table-mobile-md tr > td:not([data-label]),
    body.cn-club .table-mobile-md tr > td.cn-stack-wide { grid-column: 1 / -1; }
    body.cn-club .table-mobile-md td[data-label]:before { font-size: .7rem; text-transform: none; letter-spacing: 0; }
    /* The first cell is the row's name; its column label only repeats it. */
    body.cn-club .table-mobile-md tr > td:first-child[data-label]:before { display: none; }
    body.cn-club .table-mobile-md tr > td:not([data-label]):not(:first-child) { justify-self: end; }
    body.cn-club .table-mobile-md .btn { display: inline-flex; }
}

/* clubs/calendar.php (moved from the page, §F1) */
/* Design tokens rather than the raw hex this page used to hardcode, so
   a fixture is the same colour on the club calendar and the player's. */
.cn-club-calendar #club-calendar .fc-event { border: 0; }
.cn-club-calendar #club-calendar .cn-cal-fixture { background: var(--cn-navy, #0f172a); color: #fff; }
.cn-club-calendar #club-calendar .cn-cal-status-completed { background: var(--cn-win, #2fb344); }
.cn-club-calendar #club-calendar .cn-cal-status-cancelled { background: var(--cn-loss, #b23b3b); opacity: .6; text-decoration: line-through; }
.cn-club-calendar .cn-key-scheduled { background: var(--cn-navy, #0f172a); }
.cn-club-calendar .cn-key-completed { background: var(--cn-win, #2fb344); }
.cn-club-calendar .cn-key-cancelled { background: var(--cn-loss, #b23b3b); }
.cn-club-calendar .cn-key-money { background: var(--cn-tied, #f59f00); }
/* What it means for whoever is reading. Picked reads as settled; an
   unanswered fixture reads as a job, which is what it is. */
.cn-club-calendar #club-calendar .cn-cal-picked { box-shadow: inset 0 0 0 2px var(--cn-win, #2fb344); }
.cn-club-calendar #club-calendar .cn-cal-going { box-shadow: inset 0 0 0 2px var(--cn-win, #2fb344); }
.cn-club-calendar #club-calendar .cn-cal-club-event { background: var(--cn-cream-2, #f1efe9); color: var(--cn-ink, #111); }
.cn-club-calendar #club-calendar .cn-cal-needs-answer { background: var(--cn-paper, #fff); color: var(--cn-loss, #b23b3b); box-shadow: inset 0 0 0 1.5px var(--cn-loss, #b23b3b); }
/* C4. A meeting is club business, not sport — quiet, and visibly not a
   fixture. Money is louder, because a due date you scroll past is a due
   date you miss; your own is louder still than somebody else's. */
.cn-club-calendar #club-calendar .cn-cal-meeting { background: var(--cn-paper, #fff); color: var(--cn-muted, #626976); box-shadow: inset 0 0 0 1.5px var(--cn-line, #dcd8cf); }
.cn-club-calendar #club-calendar .cn-cal-money { background: var(--cn-cream-2, #f1efe9); color: var(--cn-ink, #111); }
.cn-club-calendar #club-calendar .cn-cal-money-mine { background: var(--cn-tied, #f59f00); color: #fff; }
/* C7. A booking is scenery for most readers — it says the ground is
   spoken for, not that they have to do something. Quiet fill, and the
   purpose distinguishes maintenance from a match. */
.cn-club-calendar #club-calendar .cn-cal-facility { background: var(--cn-cream, #faf8f4); color: var(--cn-ink, #111); box-shadow: inset 0 0 0 1px var(--cn-line, #dcd8cf); }
.cn-club-calendar #club-calendar .cn-cal-purpose-maintenance { color: var(--cn-muted, #626976); font-style: italic; }
/* Year view: a month grid twelve times over has no room for text, and
   chips carrying truncated titles collapse into "+1 more" — the opposite
   of a season you can take in at a glance. An event becomes a slim colour
   bar instead, so the year reads as a shape: where the home games cluster,
   where the gaps are. Same treatment as the player calendar. */
.cn-club-calendar #club-calendar .fc-multimonth .fc-daygrid-event { height: 7px; border-radius: 3px; margin: 1px 3px; padding: 0; overflow: hidden; }
.cn-club-calendar #club-calendar .fc-multimonth .fc-daygrid-event .fc-event-title,
.cn-club-calendar #club-calendar .fc-multimonth .fc-daygrid-event .fc-event-time { display: none; }
/* Clicking a session on the calendar scrolls to its answer row. Without
   a moment of highlight the page just moves and the reader has to work
   out which row they were sent to. */
.cn-club-calendar .cn-session-flash { background: var(--cn-cream-2, #f1efe9); transition: background .4s ease; }

/* clubs/details.php (moved from the page, §F1) */
.cn-club-details .details-card {
    border: 1px solid var(--tblr-border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cn-club-details .details-card .card-header {
    background: var(--tblr-bg-surface);
    border-bottom: 1px solid var(--tblr-border-color);
}

.cn-club-details .details-section-label {
    color: var(--tblr-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cn-club-details .details-side-note {
    border-left: 3px solid var(--tblr-warning);
    background: var(--tblr-warning-lt);
}

.cn-club-details .datagrid-title {
    color: var(--tblr-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

/* clubs/fees.php (moved from the page, §F1) */
.cn-club-fees .fee-product-row,
.cn-club-fees .fee-charge-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--tblr-border-color);
}

.cn-club-fees .fee-product-row:last-child,
.cn-club-fees .fee-charge-row:last-child {
    border-bottom: 0;
}

.cn-club-fees .fee-product-row.is-inactive {
    opacity: 0.68;
}

.cn-club-fees .fee-row-title {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.cn-club-fees .fee-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
    color: var(--tblr-secondary);
    font-size: 0.8125rem;
}

.cn-club-fees .fee-form-grid,
.cn-club-fee-product .fee-form-grid {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a bare 1fr track will not shrink below its
       content, and a select and a date input held each column at 173px, so
       the form was 387px wide in a 375px phone (CMJ3). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
}

@media (max-width: 575.98px) {
    .cn-club-fees .fee-form-grid,
    .cn-club-fee-product .fee-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cn-club-fees .fee-form-span,
.cn-club-fee-product .fee-form-span {
    grid-column: 1 / -1;
}

.cn-club-fees .fee-charge-actions {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

@media (max-width: 767.98px) {

    .cn-club-fees .fee-product-row,
.cn-club-fees .fee-charge-row {
        grid-template-columns: 1fr;
    }

    .cn-club-fees .fee-charge-actions {
        justify-content: flex-start;
    }
}

/* clubs/fixture-selection.php (moved from the page, §F1) */
/* clubs/fixtures.php (moved from the page, §F1) */
/* Inherit the canonical premium (navy) primary button — no per-view blue override. */
.cn-club-fixtures .fixture-card { transition: all 0.2s; border-left: 3px solid #e2e8f0; }
.cn-club-fixtures .fixture-card:hover { border-left-color: var(--tblr-primary); transform: translateX(4px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.cn-club-fixtures .empty-state-custom { text-align: center; padding: 3rem 2rem; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: 12px; }
.cn-club-fixtures .empty-state-custom .empty-icon { width: 80px; height: 80px; margin: 0 auto 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; background: linear-gradient(135deg, #e7f5ff 0%, #d0ebff 100%); color: var(--tblr-primary); box-shadow: 0 2px 8px rgba(2, 3, 57,0.1); }

/* clubs/invite.php (moved from the page, §F1) */
.cn-club-invite .invite-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* The heading is the shared .page-title since CMJ3; the toolbar only lays
   the row out, inside .page-header, which owns the space beneath. */
.page-header > .invite-toolbar {
    margin-bottom: 0;
}

.cn-club-invite .invite-access-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: 999px;
    background: var(--tblr-primary-lt);
    color: var(--tblr-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.cn-club-invite .invite-form-card textarea[name="emails"] {
    min-height: 132px;
    resize: vertical;
}

.cn-club-invite .invite-meta-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.cn-club-invite .invite-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    color: var(--tblr-secondary);
    font-size: 0.875rem;
}

.cn-club-invite .invite-meta-item i {
    color: var(--tblr-primary);
    font-size: 1rem;
    margin-top: 0.125rem;
}

.cn-club-invite .pending-invite-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.cn-club-invite .pending-invite-email {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.cn-club-invite .pending-invite-meta {
    color: var(--tblr-secondary);
    font-size: 0.75rem;
    line-height: 1.45;
}

.cn-club-invite .pending-invite-actions {
    display: flex;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.cn-club-invite .copy-feedback {
    min-height: 1.25rem;
    color: var(--tblr-success);
    font-size: 0.8125rem;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .cn-club-invite .pending-invite-row {
        align-items: center;
    }
}

/* clubs/member-detail.php (moved from the page, §F1) */
.cn-club-member-detail .member-history-list {
    display: grid;
    gap: 0.75rem;
}

.cn-club-member-detail .member-history-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: flex-start;
}

.cn-club-member-detail .member-history-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* clubs/requests.php (moved from the page, §F1) */
.cn-club-requests .requests-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* The heading is the shared .page-title since CMJ3; the toolbar only lays
   the row out, inside .page-header, which owns the space beneath. */
.page-header > .requests-toolbar {
    margin-bottom: 0;
}

.cn-club-requests .request-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.cn-club-requests .request-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 6px;
    background: var(--tblr-bg-surface);
    color: var(--tblr-secondary);
    font-size: 0.8125rem;
    font-weight: 650;
}

.cn-club-requests .request-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: 1rem;
    align-items: center;
}

.cn-club-requests .request-person {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
    min-width: 0;
}

.cn-club-requests .request-name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.cn-club-requests .request-meta,
.cn-club-requests .request-message {
    color: var(--tblr-secondary);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.cn-club-requests .request-message {
    margin-top: 0.35rem;
}

.cn-club-requests .request-actions {
    display: grid;
    gap: 0.5rem;
}

.cn-club-requests .approve-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
}

@media (max-width: 991.98px) {
    .cn-club-requests .request-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .cn-club-requests .approve-form {
        grid-template-columns: 1fr;
    }
}

/* clubs/roles.php (moved from the page, §F1) */
.cn-club-roles .access-layout { display: grid; gap: 1rem; align-items: start; }

.cn-club-roles .access-owner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--tblr-border-color);
    background: color-mix(in srgb, var(--tblr-yellow-lt) 45%, var(--tblr-bg-surface));
}

.cn-club-roles .access-owner-copy { min-width: 0; flex: 1; }

.cn-club-roles .access-role-section + .access-role-section { border-top: 1px solid var(--tblr-border-color); }

.cn-club-roles .access-role-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 1rem;
    background: var(--tblr-bg-surface-secondary, rgba(98, 105, 118, 0.04));
}

.cn-club-roles .access-role-section-title h4 {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cn-club-roles .access-role-row { border-top: 1px solid var(--tblr-border-color); }

.cn-club-roles .access-role-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    list-style: none;
}

.cn-club-roles .access-role-summary::-webkit-details-marker { display: none; }
.cn-club-roles .access-role-summary::marker { display: none; content: ''; }
.cn-club-roles .access-role-summary:hover { background: rgba(98, 105, 118, 0.035); }

.cn-club-roles .access-role-summary-copy { min-width: 0; }

.cn-club-roles .access-role-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
    color: var(--tblr-secondary);
    font-size: 0.8125rem;
}

.cn-club-roles .access-role-summary-end {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cn-club-roles .access-role-chevron {
    color: var(--tblr-secondary);
    transition: transform 150ms ease;
}

.cn-club-roles .access-role-row[open] .access-role-chevron { transform: rotate(180deg); }

.cn-club-roles .access-role-details {
    margin: 0 1rem 0.875rem 4.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--tblr-border-color);
}

.cn-club-roles .access-role-detail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.cn-club-roles .access-role-avatar {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 700;
    color: var(--tblr-primary);
    background: var(--tblr-primary-lt);
}

.cn-club-roles .access-permission-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cn-club-roles .access-permission-group,
.cn-club-role-edit .access-permission-group {
    padding: 1rem 0;
    border-bottom: 1px solid var(--tblr-border-color);
}

.cn-club-roles .access-permission-group:first-child,
.cn-club-role-edit .access-permission-group:first-child {
    padding-top: 0;
}

.cn-club-roles .access-permission-group:last-child,
.cn-club-role-edit .access-permission-group:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.cn-club-roles .access-permission-group-title,
.cn-club-role-edit .access-permission-group-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tblr-secondary);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.cn-club-roles .access-permission-option,
.cn-club-role-edit .access-permission-option {
    min-height: 5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: 6px;
    background: var(--tblr-bg-surface);
    cursor: pointer;
}

.cn-club-roles .access-permission-option.is-disabled,
.cn-club-role-edit .access-permission-option.is-disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

.cn-club-roles .access-permission-copy,
.cn-club-role-edit .access-permission-copy {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.cn-club-roles .access-permission-check,
.cn-club-role-edit .access-permission-check {
    padding-top: 0.125rem;
}

/* Freeze-panes: bounded box, sticky header row + sticky first column. */
.cn-club-roles .access-matrix-wrap {
    overflow: auto;
    max-height: 70vh;
}

/* border-collapse must be separate or position:sticky on <th> silently
   fails (Tabler's table default is collapse). border-spacing 0 keeps it
   tight; borders below are drawn per-cell since collapse no longer merges them. */
.cn-club-roles .access-matrix {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.cn-club-roles .access-matrix th,
.cn-club-roles .access-matrix td {
    vertical-align: middle;
    border-bottom: 1px solid var(--tblr-border-color);
}

/* Roles across the top: header row pinned. */
.cn-club-roles .access-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--tblr-bg-surface);
    box-shadow: inset 0 -1px 0 var(--tblr-border-color);
}

.cn-club-roles .access-matrix-rolecol {
    min-width: 6rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    vertical-align: bottom;
}

.cn-club-roles .access-matrix-owner-col {
    background: color-mix(in srgb, var(--tblr-yellow-lt) 45%, var(--tblr-bg-surface));
}

/* Permissions down the side: first column pinned. */
.cn-club-roles .access-matrix-permhead {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--tblr-bg-surface);
    text-align: left;
    min-width: 15rem;
    box-shadow: inset -1px 0 0 var(--tblr-border-color);
}

/* Category band rows: pinned just below the (variable-height) role header,
   so the group subtitle stays visible while scrolling that group. The
   offset is measured into --matrix-head-h by JS when the view is shown. */
.cn-club-roles .access-matrix-section .access-matrix-permhead {
    top: var(--matrix-head-h, 2.75rem);
    z-index: 2;
    background: var(--tblr-bg-surface-secondary, #eef0f3);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tblr-secondary);
}

/* Top-left corner is pinned on both axes, so it wins the stacking order.
   Selector matches .access-matrix thead th's specificity + a class to win. */
.cn-club-roles .access-matrix thead th.access-matrix-corner {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 3;
    background: var(--tblr-bg-surface);
    text-align: left;
    min-width: 15rem;
    box-shadow: inset -1px 0 0 var(--tblr-border-color), inset 0 -1px 0 var(--tblr-border-color);
}

.cn-club-roles .access-matrix tbody td { border-left: 1px solid var(--tblr-border-color); }

@media (max-width: 767.98px) {
    .cn-club-roles .access-role-section-title { align-items: center; }
    .cn-club-roles .access-role-section-title .text-secondary { display: none; }
    .cn-club-roles .access-role-summary { padding: 0.7rem 0.75rem; }
    .cn-club-roles .access-role-avatar { width: 2.25rem; height: 2.25rem; }
    .cn-club-roles .access-role-details { margin: 0 0.75rem 0.75rem; }
    .cn-club-roles .access-role-detail-footer { align-items: stretch; }
    .cn-club-roles .access-role-actions { width: 100%; }
    .cn-club-roles .access-role-actions .btn-list { justify-content: flex-end; }

    /* CW5: the role dialogs became clubs/role-edit, so their full-screen
       phone rules went; the options still shrink to their text. */
    .cn-club-roles .access-permission-option,
    .cn-club-role-edit .access-permission-option { min-height: auto; }
}

/* clubs/teams/show.php (moved from the page, §F1) */
/* Same textured backdrop as the teams index and fixtures pages, so
   list -> detail doesn't visibly change the page background. */
/* A squad row wraps (R2). The name asks for 12rem beside its avatar, so on a
   phone the seat controls are what drop to the next line; at its natural
   width a long name would drop under the avatar instead. */
.cn-squad-name { flex: 1 1 12rem; min-width: 0; }
/* A person card's menu sits over its body; without this the body, drawn
   after it, took the click (Louis, reviewing CW11). */
.cn-person-card > .dropdown { z-index: 2; }
/* CW11: a squad row. The shirt number is its own narrow column, and an
   editable row is a <details> whose summary is the row itself. */
.cn-squad-number { width: 2rem; flex: 0 0 2rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tblr-secondary); }
.cn-squad-row > summary { list-style: none; cursor: pointer; }
/* In a squad row the name gives way before Edit does, so a phone keeps the action on the name's line. */
.cn-squad-row .cn-squad-name { flex-basis: 0; }
.cn-squad-row > summary::-webkit-details-marker { display: none; }
.cn-squad-row[open] > summary .btn { background: var(--tblr-bg-surface-secondary); }
/* clubs/dashboard.php (moved from the page, §F1) */
/* Modern club dashboard styling */
.cn-club-dashboard .card-md.border-primary {
    border-left: 4px solid var(--tblr-primary);
    background: var(--tblr-bg-surface);
}

.cn-club-dashboard .alert-warning {
    background: var(--tblr-warning-lt);
    border-left: 4px solid var(--tblr-warning);
}

.cn-club-dashboard .alert-success {
    background: var(--tblr-success-lt);
    border-left: 4px solid var(--tblr-success);
}

.cn-club-dashboard .alert-danger {
    background: var(--tblr-danger-lt);
    border-left: 4px solid var(--tblr-danger);
}

.cn-club-dashboard .btn-primary {
    box-shadow: none;
}

.cn-club-dashboard .stat-card {
    border-left: 3px solid var(--tblr-primary);
    transition: transform 0.2s;
}

.cn-club-dashboard .stat-card:hover {
    transform: translateY(-2px);
}

.cn-club-dashboard .activity-item {
    border-left: 2px solid var(--tblr-border-color);
    padding-left: 1rem;
    margin-left: 0.5rem;
}

.cn-club-dashboard .activity-item:last-child {
    border-left-color: transparent;
}

.cn-club-dashboard .member-card {
    transition: all 0.2s;
}

.cn-club-dashboard .member-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.cn-club-dashboard .fixture-card {
    border-left: 4px solid #e2e8f0;
    transition: all 0.2s;
}

.cn-club-dashboard .fixture-card:hover {
    border-left-color: var(--tblr-primary);
}

.cn-club-dashboard .badge {
    font-weight: 600;
    padding: 0.25rem 0.5rem;
}

.cn-club-dashboard .review-step {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--tblr-border-color);
}

.cn-club-dashboard .review-step:last-child {
    border-bottom: 0;
}

.cn-club-dashboard .review-step-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.cn-club-dashboard .club-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.5rem;
    align-items: start;
}

.cn-club-dashboard .club-profile-main,
.cn-club-dashboard .club-profile-rail {
    min-width: 0;
}

.cn-club-dashboard .club-profile-rail {
    position: sticky;
    top: 4.5rem;
}

.cn-club-dashboard .club-section-kicker {
    color: var(--tblr-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.375rem;
    text-transform: uppercase;
}

.cn-club-dashboard .club-section-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
}

.cn-club-dashboard .club-about-copy {
    color: var(--tblr-body-color);
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

.cn-club-dashboard .club-fact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.cn-club-dashboard .club-fact {
    border: 1px solid var(--tblr-border-color);
    border-radius: 8px;
    padding: 0.875rem;
    min-width: 0;
    background: var(--tblr-bg-surface);
}

.cn-club-dashboard .club-fact-label {
    align-items: center;
    color: var(--tblr-secondary);
    display: flex;
    font-size: 0.75rem;
    font-weight: 700;
    gap: 0.375rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.cn-club-dashboard .club-fact-value {
    color: var(--tblr-body-color);
    overflow-wrap: anywhere;
}

.cn-club-dashboard .club-profile-card .card-header {
    background: var(--tblr-bg-surface);
}

.cn-club-dashboard .club-list-item {
    padding: 1rem;
}

.cn-club-dashboard .club-list-item + .club-list-item {
    border-top: 1px solid var(--tblr-border-color);
}

.cn-club-dashboard .club-rail-action {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.cn-club-dashboard .club-rail-action .avatar {
    flex: 0 0 auto;
}

.cn-club-dashboard .club-rail-action span:last-child {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .cn-club-dashboard .club-profile-layout {
        grid-template-columns: 1fr;
    }

    .cn-club-dashboard .club-profile-rail {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .cn-club-dashboard .club-fact-grid {
        grid-template-columns: 1fr;
    }
}

/* Club hero — a clean identity card sized to Tabler's own scale. */
.cn-club-dashboard .club-hero .card-body { padding: 1.25rem; }
.cn-club-dashboard .club-hero-crest {
    width: 3.25rem; height: 3.25rem; border-radius: 12px; flex: 0 0 auto;
    background-size: cover; background-position: center;
    background-color: var(--tblr-primary-lt); color: var(--tblr-primary);
    display: grid; place-items: center;
}
.cn-club-dashboard .club-hero-crest svg { display: block; }
.cn-club-dashboard .club-hero-eyebrow { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--tblr-secondary); }
.cn-club-dashboard .club-hero-title { font-size: 1.375rem; font-weight: 700; margin: .1rem 0 .2rem; line-height: 1.15; color: var(--tblr-body-color); }
.cn-club-dashboard .club-hero-verified { color: var(--tblr-success); font-size: 1rem; vertical-align: -.06em; }
.cn-club-dashboard .club-hero-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; color: var(--tblr-secondary); font-size: .8125rem; }
.cn-club-dashboard .club-hero-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.cn-club-dashboard .club-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cn-club-dashboard .club-hero-stats { display: flex; gap: 2rem; margin-top: .95rem; padding-top: .85rem; border-top: 1px solid var(--tblr-border-color); }
.cn-club-dashboard .club-hero-stat { text-decoration: none; color: inherit; transition: color .12s ease; }
.cn-club-dashboard .club-hero-stat:hover b { color: var(--tblr-primary); }
.cn-club-dashboard .club-hero-stat:hover span { color: var(--tblr-primary); }
.cn-club-dashboard .club-tasks .card-header { display: flex; align-items: center; }
.cn-club-dashboard .club-task { transition: background-color .12s ease; }
.cn-club-dashboard .club-task-dot { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 6px; flex-shrink: 0; font-size: .95rem; }
.cn-club-dashboard .club-task-dot.is-warn { background: var(--tblr-warning-lt); color: var(--tblr-warning); }
.cn-club-dashboard .club-task-dot.is-info { background: var(--tblr-primary-lt); color: var(--tblr-primary); }
.cn-club-dashboard .club-task-dot.is-clear { background: var(--tblr-success-lt); color: var(--tblr-success); }
.cn-club-dashboard .club-tasks-clear { border-left: 3px solid var(--tblr-success); }
/* A step still to do is a link filling its row, padded as the row itself
   is so it lines up with the steps already done (CW9). */
.cn-club-dashboard .club-setup-link { padding: .5rem var(--tblr-list-group-item-padding-x); }

/* Print: drop the app chrome and interactive controls, lay the two columns
   out in one flow, and never split a card across a page. */
@media print {
    .cn-club-dashboard .navbar,
.cn-club-dashboard .navbar-vertical,
.cn-club-dashboard .club-profile-rail,
.cn-club-dashboard .card-actions,
.cn-club-dashboard .club-hero-actions,
.cn-club-dashboard .btn,
.cn-club-dashboard .club-task span:last-child {
        display: none !important;
    }
    .cn-club-dashboard .page-wrapper { margin-left: 0 !important; }
    .cn-club-dashboard .club-profile-layout { display: block !important; }
    .cn-club-dashboard .card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #dadce0 !important;
    }
    /* Expand the collapsed setup card so it prints in full. */
    .cn-club-dashboard details.club-setup > *:not(summary) { display: block !important; }
    .cn-club-dashboard .club-setup-chevron { display: none !important; }
}
/* PT21: the "At risk" signals, on the club home's card and the insights page.
   A signal per block; names wrap rather than push the card sideways. */
.cn-at-risk-signal + .cn-at-risk-signal { border-top: 1px solid var(--tblr-border-color); padding-top: .75rem; margin-top: .75rem; }
.cn-at-risk-title { font-size: .95rem; margin-bottom: .25rem; }
.cn-at-risk-people li { padding: .3rem 0; overflow-wrap: anywhere; }
.cn-at-risk-people a, .cn-at-risk-signal [data-at-risk-more] { display: inline-block; min-height: 24px; }
/* PT11: the grant evidence pack. Its two controls are phone tap targets. */
@media (max-width: 767.98px) {
    .cn-grant-pack > .d-print-none > a,
    .cn-grant-pack > .d-print-none > .btn { min-height: 44px; display: inline-flex; align-items: center; }
}
/* It prints as the page itself, with no shell. */
@media print {
    .cn-club-grant-pack .cn-shell-sidebar,
    .cn-club-grant-pack .cn-topbar,
    .cn-club-grant-pack .skip-link,
    .cn-club-grant-pack .d-print-none { display: none !important; }
    .cn-club-grant-pack .page-wrapper { margin-left: 0 !important; }
    .cn-club-grant-pack .card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #dadce0 !important;
    }
    .cn-club-grant-pack .card-body { padding: 0.75rem 1rem !important; }
}
.cn-club-dashboard .fixture-date {
    width: 48px;
    text-align: center;
    background: var(--tblr-bg-surface-secondary);
    border-radius: 8px;
    padding: 0.5rem 0;
}

.cn-club-dashboard .fixture-date-month {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--tblr-secondary);
    line-height: 1;
}

.cn-club-dashboard .fixture-date-day {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tblr-body-color);
    line-height: 1.2;
}

.cn-club-dashboard .activity-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cn-club-dashboard .activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cn-club-dashboard .activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cn-club-dashboard .activity-icon i {
    font-size: 1rem;
}

.cn-club-dashboard .activity-content {
    flex: 1;
    min-width: 0;
}

.cn-club-dashboard .empty {
    padding: 2rem;
    text-align: center;
}

.cn-club-dashboard .empty-icon {
    margin-bottom: 1rem;
}

.cn-club-dashboard .empty-icon i {
    font-size: 3rem;
    color: var(--tblr-secondary);
    opacity: 0.5;
}

/* No margin here: the page's old margin-bottom always lost to the shared
   .empty > .empty-title above, and scoped it would have won. */
.cn-club-dashboard .empty-title {
    font-weight: 600;
}

.cn-club-dashboard .datagrid-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tblr-secondary);
    margin-bottom: 0.25rem;
}

/* A settings layout's section (club settings, CW8): it fills the column so
   its footer sits at the foot of the card. Not Bootstrap's .d-flex, whose
   !important would outrank [hidden] and show every section at once. */
.cn-settings-section { display: flex; flex-direction: column; flex: 1 1 auto; }
.cn-settings-section[hidden] { display: none; }
/* The section list's divider is beside the sections from md up; on a phone,
   where the picker sits above them, it is a rule under the picker. */
@media (max-width: 767.98px) {
    .cn-settings-nav { border-right: 0 !important; border-bottom: var(--tblr-border-width) solid var(--tblr-border-color); }
}

/* clubs/members.php (moved from the page, §F1) */
.cn-club-members .members-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* The heading is the shared .page-title since CMJ3; the toolbar only lays
   the row out, inside .page-header, which owns the space beneath. */
.page-header > .members-toolbar {
    margin-bottom: 0;
}

.cn-club-members .members-status-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.cn-club-members .members-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 6px;
    color: var(--tblr-secondary);
    background: var(--tblr-bg-surface);
    font-size: 0.8125rem;
    font-weight: 650;
}

.cn-club-members .member-avatar {
    flex: 0 0 auto;
}

.cn-club-members .members-sort {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.cn-club-members .members-sort:hover { color: var(--tblr-primary); }
.cn-club-members .members-sort.is-active { color: var(--tblr-primary); }

.cn-club-members a.members-status-pill:hover { border-color: var(--tblr-primary); color: var(--tblr-primary); }
.cn-club-members .members-status-pill.is-active {
    border-color: var(--tblr-primary);
    color: var(--tblr-primary);
    background: var(--tblr-primary-lt);
}
.cn-club-members .members-status-pill-warn { color: var(--tblr-warning); }
.cn-club-members .members-status-pill-warn.is-active {
    border-color: var(--tblr-warning);
    color: var(--tblr-warning);
    background: var(--tblr-warning-lt);
}

.cn-club-members .member-primary {
    min-width: 0;
}

.cn-club-members .member-name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.cn-club-members .member-email {
    color: var(--tblr-secondary);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.cn-club-members .member-role-list {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.cn-club-members .member-actions {
    display: flex;
    justify-content: flex-end;
}

.cn-club-members .members-saved-views {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.cn-club-members .members-saved-views > a { flex: 0 0 auto; }

/* CW4: the roster's filter rail (search-results.html, as Match history's in
   stats-matches.css): Role, Type and Payment down the left from 768px, an
   offcanvas panel behind a Filters button under it. */
.cn-club-members .cn-members-layout {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.cn-club-members .cn-members-main { min-width: 0; }
.cn-club-members .cn-members-rail { position: sticky; top: 1rem; }
.cn-club-members .cn-members-rail .offcanvas-title { font-size: 1rem; }
.cn-club-members .members-search { flex: 1 1 16rem; min-width: 0; }
.cn-club-members .cn-members-chip { display: inline-flex; align-items: center; min-height: 32px; padding-inline: .6rem; text-decoration: none; }
@media (min-width: 768px) {
    .cn-club-members .cn-members-rail .offcanvas-md .offcanvas-header { padding: 0 0 .75rem; }
    .cn-club-members .cn-members-rail .offcanvas-md .offcanvas-body { padding: 0; }
}
@media (max-width: 767.98px) {
    .cn-club-members .cn-members-layout { grid-template-columns: minmax(0, 1fr); }
    /* The panel is fixed-position when shown; its wrapper takes no row. */
    .cn-club-members .cn-members-rail { display: contents; }
    .cn-club-members .cn-members-rail .offcanvas-md { max-width: 85vw; }
}

@media (max-width: 767.98px) {
    .cn-club-members .members-toolbar .btn-list {
        width: 100%;
    }

    .cn-club-members .members-toolbar .btn-list .btn {
        flex: 1 1 auto;
    }

    .cn-club-members .members-saved-views {
        /* One scrolling row on a phone, as before CW2; cn-filter-tabs wraps. */
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-right: -1rem;
        margin-left: -1rem;
        padding: 0 1rem 0.25rem;
        scrollbar-width: none;
    }

    .cn-club-members .members-saved-views::-webkit-scrollbar { display: none; }


    .cn-club-members .members-table-wrap { overflow: visible; }

    .cn-club-members .members-table,
.cn-club-members .members-table tbody { display: block; width: 100%; }

    .cn-club-members .members-table thead { display: none; }

    .cn-club-members .members-table tbody {
        display: grid;
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .cn-club-members .members-table tbody tr {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem 0.75rem;
        padding: 0.85rem;
        border: 1px solid var(--tblr-border-color);
        border-radius: var(--tblr-border-radius, 6px);
        background: var(--tblr-bg-surface);
    }

    .cn-club-members .members-table tbody td {
        display: block;
        min-width: 0;
        padding: 0 !important;
        border: 0;
    }

    .cn-club-members .members-table .members-member-cell {
        grid-column: 1 / -1;
        padding-right: 2rem !important;
    }

    .cn-club-members .members-table tr.has-select .members-member-cell { padding-left: 1.65rem !important; }

    .cn-club-members .members-table .members-select-cell {
        position: absolute;
        top: 1.35rem;
        left: 0.85rem;
    }

    .cn-club-members .members-table .members-type-cell { grid-column: auto; }
    .cn-club-members .members-table .members-detail-cell.is-empty { display: none; }

    .cn-club-members .members-table .members-detail-cell { grid-column: 1 / -1; }

    .cn-club-members .members-table .members-detail-cell::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.2rem;
        color: var(--tblr-secondary);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .cn-club-members .members-table .members-joined-cell { display: none; }

    .cn-club-members .members-table .members-actions-cell {
        position: absolute;
        top: 0.55rem;
        right: 0.45rem;
    }

    .cn-club-members .members-table .avatar { width: 2.5rem; height: 2.5rem; }
}
/* As a table the member's column keeps room for a name. Beside the sidebar
   and the filters the table is narrower than its columns (992px leaves it
   428px), and the name was the column that gave way: a letter a line. The
   wrap scrolls sideways instead. */
@media (min-width: 768px) {
    .cn-club-members .members-table .members-member-cell { min-width: 14rem; }
}
.cn-club-dashboard .cn-club-notif > summary { cursor: pointer; list-style: none; }
.cn-club-dashboard .cn-club-notif > summary::-webkit-details-marker { display: none; }
.cn-club-dashboard .cn-club-notif[open] > summary .link-primary { display: none; }
/* A sponsor's logo at the size the old tiles gave it (60px tall) and wide
   enough for a wordmark: a 2.5rem square shrank most logos to a smudge
   (Louis, F3 review). */
.cn-club-dashboard .cn-sponsor-logo { width: 7.5rem; height: 3.75rem; object-fit: contain; object-position: left center; flex: none; }

/* Fixtures on a phone: each game a compact card (date and status on top, the
   opposition, where and which team, then its actions) instead of a table
   that ran off the right edge with its actions out of sight (F3). */
@media (max-width: 767.98px) {
    .cn-club-fixtures .table-responsive { overflow: visible; }
    .cn-club-fixtures .fixtures-table,
    .cn-club-fixtures .fixtures-table tbody { display: block; }
    .cn-club-fixtures .fixtures-table thead { display: none; }
    .cn-club-fixtures .fixtures-table .fixtures-group { display: block; }
    .cn-club-fixtures .fixtures-table .fixtures-group th { display: block; border: 0; }
    .cn-club-fixtures .fixtures-table .fixtures-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.25rem 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color-translucent);
    }
    .cn-club-fixtures .fixtures-table .fixtures-row > td { display: block; padding: 0 !important; border: 0; }
    .cn-club-fixtures .fixtures-table .fx-date { grid-column: 1; grid-row: 1; }
    .cn-club-fixtures .fixtures-table .fx-status { grid-column: 2; grid-row: 1; text-align: right; }
    .cn-club-fixtures .fixtures-table .fx-opp { grid-column: 1 / -1; font-weight: 600; }
    .cn-club-fixtures .fixtures-table .fx-opp .small { font-weight: 400; }
    .cn-club-fixtures .fixtures-table .fx-where,
    .cn-club-fixtures .fixtures-table .fx-team { color: var(--tblr-secondary); font-size: 0.8125rem; }
    .cn-club-fixtures .fixtures-table .fx-where { grid-column: 1; }
    .cn-club-fixtures .fixtures-table .fx-team { grid-column: 2; text-align: right; }
    .cn-club-fixtures .fixtures-table .fx-where.is-empty { visibility: hidden; }
    .cn-club-fixtures .fixtures-table .fx-actions { grid-column: 1 / -1; margin-top: 0.25rem; }
    .cn-club-fixtures .fixtures-table .fx-actions > .d-flex { justify-content: flex-start !important; }
}

/* Fixture selection (F3): the pool's answer groups, and the side held in view
   beside a long squad on a wide screen. */
.cn-club-fixture-selection .cn-pool-group { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 0.75rem; }
@media (min-width: 992px) {
    .cn-club-fixture-selection .cn-side-card { position: sticky; top: 1rem; }
}
/* A charge's menu sits in its row's corner on a phone, so a paid charge
   (menu only) does not leave the ⋮ alone on a line of its own (F3). */
@media (max-width: 767.98px) {
    .cn-club-fees .fee-charge-row { position: relative; padding-right: 2.25rem; }
    .cn-club-fees .fee-charge-actions .dropdown { position: absolute; top: 0.75rem; right: 0; }
}

/* Teams on a phone: each side a compact card (name and its Squad button on
   top, then format, squad and captain, form, and the next game) instead of
   a table cut off after the squad column (F3). */
@media (max-width: 767.98px) {
    .cn-club-teams-index .table-responsive { overflow: visible; }
    .cn-club-teams-index .teams-table,
    .cn-club-teams-index .teams-table tbody { display: block; }
    .cn-club-teams-index .teams-table thead { display: none; }
    .cn-club-teams-index .teams-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.35rem 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color-translucent);
    }
    .cn-club-teams-index .teams-table tbody td { display: block; padding: 0 !important; border: 0; text-align: left !important; }
    .cn-club-teams-index .teams-table .reorder-col { display: none !important; }
    .cn-club-teams-index .teams-table .tm-name { grid-column: 1; grid-row: 1; }
    .cn-club-teams-index .teams-table .tm-actions { grid-column: 2; grid-row: 1; }
    .cn-club-teams-index .teams-table .is-empty { display: none !important; }
    .cn-club-teams-index .teams-table .tm-format { grid-column: 1; font-size: 0.8125rem; }
    .cn-club-teams-index .teams-table .tm-squad { grid-column: 2; font-size: 0.8125rem; text-align: right !important; }
    .cn-club-teams-index .teams-table .tm-captain,
    .cn-club-teams-index .teams-table .tm-league,
    .cn-club-teams-index .teams-table .tm-form,
    .cn-club-teams-index .teams-table .tm-next { grid-column: 1 / -1; font-size: 0.8125rem; }
    .cn-club-teams-index .teams-table .tm-squad::before { content: attr(data-label) " "; color: var(--tblr-secondary); }
    .cn-club-teams-index .teams-table .tm-squad .text-secondary.small { display: inline; margin-left: 0.35rem; }
    .cn-club-teams-index .teams-table .tm-format .text-secondary.small,
    .cn-club-teams-index .teams-table .tm-captain .text-secondary.small,
    .cn-club-teams-index .teams-table .tm-league .text-secondary.small,
    .cn-club-teams-index .teams-table .tm-next > div { display: inline; margin-left: 0.35rem; }
    .cn-club-teams-index .teams-table .tm-next > div:first-child { margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   T16: one profile layout (Tabler's profile.html) for the owner's passport and
   a visitor's view of a player: the header (partials/profile-header.php), the
   section tabs under it, and the facts card on the right
   (partials/profile-facts.php). These were the passport's own styles.
   --------------------------------------------------------------------------- */
.profile-header { padding: 2rem 0 1.5rem; border-bottom: 1px solid var(--tblr-border-color); margin-bottom: 1.5rem; }
.profile-header .avatar-xl { width: 80px; height: 80px; }
.profile-header-main { min-width: 0; }
.profile-meta-list { display: flex; flex-wrap: wrap; gap: .35rem .75rem; }
.profile-meta-list .list-inline-item { margin: 0; }
.profile-meta-list .list-inline-item::before { display: none; }
.profile-meta-item { display: inline-flex; align-items: center; gap: .3rem; color: var(--tblr-secondary); font-size: .875rem; }
.profile-header .cn-form-chips { display: inline-flex; gap: .2rem; }
.profile-header .cn-form-chip { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: .3rem; font-size: .7rem; font-weight: 700; color: #fff; background: var(--tblr-secondary); }
.profile-header .cn-form-chip.win { background: var(--tblr-success); }
.profile-header .cn-form-chip.loss { background: var(--tblr-danger); }
.profile-header .cn-form-chip.tied { background: var(--tblr-warning); }
.cn-profile-back { display: inline-flex; align-items: center; gap: .3rem; margin-top: 1rem; font-size: .8rem; color: var(--tblr-secondary); }
.cn-profile-back + .profile-header { padding-top: 1rem; }
.cn-profile-sections { display: flex; gap: .25rem; border-bottom: 1px solid var(--tblr-border-color); margin-bottom: 1.25rem; }
.cn-profile-sections a { border-bottom: 3px solid transparent; color: var(--tblr-secondary); font-weight: 600; padding: .8rem 1.5rem; min-height: 48px; text-decoration: none; }
.cn-profile-sections a[aria-current="page"] { color: var(--tblr-primary); border-bottom-color: var(--tblr-primary); }
.cn-profile-facts .cn-profile-facts-group { padding-block: .5rem; background: var(--tblr-bg-surface-secondary); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tblr-secondary); }
.cn-profile-facts .list-group-item { font-size: .875rem; }
@media (max-width: 767px) {
    .profile-header .btn-list { margin-top: 1rem; }
    .cn-profile-sections a { flex: 1; padding-inline: .75rem; text-align: center; }
}

/* ---------------------------------------------------------------------------
   PW4: three sideways scrolls on a phone, each from a rule that was assumed.
   --------------------------------------------------------------------------- */
/* Eleven views write .min-w-0 on the flex child that holds a truncating line
   and nothing defined it, so the line never truncated: the dashboard's "Your
   people" ran past its card, and past the screen at 375px. */
.min-w-0 { min-width: 0; }
/* A phone's page container has 8px of padding; a row with a 24px or wider
   gutter (.g-3 and up) pulls 12px or more each side and widens the page. Those
   rows, laid straight in the container, take a 16px gutter there. Rows that
   asked for less keep what they asked for. */
@media (max-width: 575.98px) {
    .cn-page > .row:is(.g-3, .g-4, .g-5, .gx-3, .gx-4, .gx-5) { --tblr-gutter-x: 1rem; }
}

/* PW8: record tables inside a card on a visitor's profile (Career averages,
   This season). The table's own card sits flush in the body, without a second
   shadow, and the stats shell's card rules stay off the card around it. */
.cn-profile-career { padding-block: 1rem; }
.cn-profile-career .cn-record-card { box-shadow: none; }

/* The Pro plan page (billing/pro.php), 2026-10-01 redesign: a plan card says
   its price and what it is; the ten Pro tools are a grid below, told once. */
.cn-plan .cn-plan-name { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tblr-secondary); }
.cn-plan-price { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .25rem; }
.cn-plan-amount { font-size: 2.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--tblr-body-color); }
.cn-plan-per { color: var(--tblr-secondary); }
.cn-plan-list > li { display: flex; gap: .5rem; align-items: baseline; padding: .2rem 0; font-size: .875rem; }
.cn-plan-list > li > .ti { flex: none; position: relative; top: .1em; }
.cn-plan.cn-plan-best { border-color: var(--tblr-primary); box-shadow: 0 0 0 1px var(--tblr-primary), 0 .5rem 1.5rem -0.75rem rgba(2, 3, 57, .25); }
.cn-plan.cn-plan-current:not(.cn-plan-best) { background: var(--tblr-bg-surface-secondary); }
.cn-pro-features .card { box-shadow: none; }
.cn-pro-features .avatar { --tblr-avatar-size: 2.5rem; }

/* Club workspace: shared Tabler surfaces, compact operational summaries. */
.cn-club-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1rem; }
.cn-club-metric-value { display: block; font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cn-club-facts { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.cn-list-toolbar .form-control { min-width: 0; }
.cn-club .fixtures-row:target { background: var(--tblr-primary-lt); outline: 2px solid var(--tblr-primary); outline-offset: -2px; scroll-margin-top: 1rem; }
.cn-club details > summary { cursor: pointer; }
.cn-club [id^="fixture-"] { scroll-margin-top: 1rem; }
@media (max-width: 991.98px) {
    .cn-selection-summary { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1020; background: var(--tblr-bg-surface); border-top: 1px solid var(--tblr-border-color); padding: .75rem max(.75rem, env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom)); display: flex; gap: .75rem; align-items: center; justify-content: space-between; }
    .cn-club-fixture-selection .page-wrapper { padding-bottom: 6rem; }
}
@media (max-width: 575.98px) {
    .cn-club-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .cn-club-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cn-club .page-header { flex-wrap: wrap; gap: .75rem; }
    .cn-club .page-header > .btn-list { margin-left: 0 !important; }
}

.cn-club-hero-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; }
.cn-club-teams-index .card-body:has(> #reorder-form.d-none) { display: none; }
@media (max-width: 575.98px) {
    .cn-club-hero-heading { grid-template-columns: auto minmax(0, 1fr); gap: .75rem; }
    .cn-club-hero-heading .club-hero-actions { grid-column: 2; }
    .cn-club .cn-list-toolbar { flex-wrap: wrap; }
    .cn-club .cn-list-toolbar .form-control { flex: 1 1 100%; }
    .cn-club .club-task { flex-wrap: wrap; column-gap: .5rem !important; }
    .cn-club .club-task > .flex-fill { flex: 1 1 12rem !important; }
    .cn-club .club-task > .text-secondary { margin-left: auto; }
}

/* My clubs: native cards and avatars; layout of the rows only. */

        .cn-clubs-index .clubs-title {
            align-items: center;
            display: flex;
            gap: 0.5rem;
            margin: 0;
        }

        .cn-clubs-index .club-section {
            margin-top: 1.25rem;
        }

        .cn-clubs-index .club-section-header {
            align-items: end;
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 0.625rem;
        }

        .cn-clubs-index .club-section-title {
            align-items: center;
            display: flex;
            gap: 0.5rem;
            margin: 0;
        }

        .cn-clubs-index .club-list {
            display: grid;
            gap: 0.75rem;
        }

        .cn-clubs-index .club-row-card.is-home {
            border-left: 4px solid var(--tblr-warning);
        }

        .cn-clubs-index .club-row-card.is-pending {
            border-left: 4px solid var(--tblr-warning);
        }

        .cn-clubs-index .club-row {
            align-items: center;
            display: grid;
            gap: 1rem;
            grid-template-columns: auto minmax(0, 1fr) auto;
            padding: 1rem;
        }

        .cn-clubs-index .club-avatar img {
            border-radius: inherit;
            height: 100%;
            object-fit: contain;
            width: 100%;
        }

                .cn-clubs-index .club-row-main {
            min-width: 0;
        }

        .cn-clubs-index .club-row-title {
            align-items: center;
            display: flex;
            gap: 0.5rem;
            min-width: 0;
        }

        .cn-clubs-index .club-row-name {
            color: var(--tblr-body-color);
            font-weight: 700;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .cn-clubs-index .club-row-meta {
            color: var(--tblr-secondary);
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem 0.875rem;
            margin-top: 0.375rem;
        }

        .cn-clubs-index .club-row-meta span {
            align-items: center;
            display: inline-flex;
            gap: 0.25rem;
        }

        .cn-clubs-index .club-row-actions {
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            justify-content: flex-end;
        }

                        .cn-clubs-index .club-card-clickable {
            cursor: pointer;
        }

        @media (max-width: 767.98px) {
            .cn-clubs-index .club-section-header,
            .cn-clubs-index .club-row {
                align-items: stretch;
            }

            .cn-clubs-index .club-row {
                grid-template-columns: auto minmax(0, 1fr);
            }

            .cn-clubs-index .club-row-actions {
                grid-column: 1 / -1;
                justify-content: flex-start;
            }
        }

/* A season label, selector and squad count must fit together on a phone. */
.cn-squad-header .card-actions { max-width: 100%; min-width: 0; }
.cn-squad-header form { min-width: 0; }
.cn-squad-header .form-select { min-width: 0; max-width: 100%; }

/* The invitation page (clubs/invite_accept.php), in the auth layout. These
   were a <style> block in the view with hex colours until CMJ3. */
.cn-invite-club-mark {
    width: 72px;
    height: 72px;
    border-radius: var(--tblr-border-radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* A club with no colour of its own gets the brand navy. The auth layout
       names it --cn-brand-navy; the app's token override does not reach it. */
    background: var(--cn-brand-navy, var(--tblr-primary));
    color: var(--tblr-white);
    font-weight: 800;
    font-size: 1.2rem;
    overflow: hidden;
    border: var(--tblr-border-width) solid var(--tblr-border-color);
}

.cn-invite-club-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cn-invite-meta {
    display: grid;
    margin: 1.25rem 0;
}

.cn-invite-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: var(--tblr-border-width) solid var(--tblr-border-color);
}

.cn-invite-meta-row:last-child {
    border-bottom: 0;
}

.cn-invite-meta-label {
    color: var(--tblr-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.cn-invite-meta-value {
    color: var(--tblr-body-color);
    font-size: 0.875rem;
    font-weight: 700;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Tap targets on the weekly pages (CMJ3). Fixtures, selection and fees are
   used on a phone on a Saturday, and their row actions were .btn-sm: 28px
   tall, 24px for the icon-only menu. At phone width every button, menu
   opener, small select and disclosure on those three pages is at least 44px
   in both directions, which is the size the rest of the app's phone controls
   already use (.cn-filter-tabs). Desktop density is unchanged. */
@media (max-width: 767.98px) {
    .cn-club-fixtures #main-content .btn,
    .cn-club-fixture-selection #main-content .btn,
    .cn-club-fees #main-content .btn,
    .cn-club-availability #main-content .btn {
        min-height: 44px;
        /* Width too. The first version set only the height, and on the
           selection page "Pick" was 41px wide and the tick and cross for a
           member with no account 28px (measured on the CM12 staging walk). */
        min-width: 44px;
    }

    /* The availability page is the one a member uses most on a phone, and its
       answer buttons were 28px tall and the note 32px. Added on the CM12 walk. */
    .cn-club-availability #main-content .form-control-sm {
        min-height: 44px;
    }

    /* CW4: the member page's Fees card leads to the fees page, where a
       payment is recorded. The treasurer follows it on a phone at the ground,
       so the link is a full tap target; the shared .cn-view-all is 19px tall
       and is left as it is everywhere else. */
    .cn-club [data-member-owes] .cn-view-all {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* The picked side: name on one line, its controls on the next. */
    .cn-club-fixture-selection .cn-side-row {
        flex-wrap: wrap;
    }

    .cn-club-fixture-selection .cn-side-controls {
        flex: 1 1 100%;
        min-width: 0;
    }

    .cn-club-fixture-selection .cn-side-controls > form:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cn-club-fixture-selection .cn-side-controls .form-select {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    .cn-club-fixtures #main-content .btn-icon,
    .cn-club-fixture-selection #main-content .btn-icon,
    .cn-club-fees #main-content .btn-icon {
        min-width: 44px;
    }

    .cn-club-fixtures #main-content .form-select-sm,
    .cn-club-fixture-selection #main-content .form-select-sm,
    .cn-club-fees #main-content .form-select-sm {
        min-height: 44px;
    }

    .cn-club-fixtures #main-content summary,
    .cn-club-fixture-selection #main-content summary,
    .cn-club-fees #main-content summary {
        /* Padding, not a flex box: a flex summary loses its disclosure marker. */
        padding-top: 0.75rem !important; /* past the .py-2 utility one of them carries */
        padding-bottom: 0.75rem !important;
    }
}

/* Sponsorship, money owed (Phase 16C): the reference a treasurer types when
   recording a transfer sits between the method and the button, and takes the
   row on a phone. */
.cn-club .cn-sponsor-pay .cn-sponsor-ref { width: 9rem; }
@media (max-width: 767.98px) {
    .cn-club .cn-sponsor-pay { justify-content: flex-start !important; }
    .cn-club .cn-sponsor-pay .cn-sponsor-ref { flex: 1 1 8rem; width: auto; }
}

/* Match day (PT3, Phase 14). The page is used on a phone, one handed, at the
   bar: every control on it is a full tap target there, and the concession
   amount beside a name is a short field, not the row. The club-wide board
   (PT4) is buttons and nothing else, and they are tap targets too. So are
   the rotas, your duties and duty credits (PT5), and their shared links. */
.cn-club .cn-matchday-amount { width: 6.5rem; }
@media (max-width: 767.98px) {
    .cn-club-matchday #main-content .btn,
    .cn-club-matchday-board #main-content .btn,
    .cn-club-matchday-rotas #main-content .btn,
    .cn-club-matchday-duties #main-content .btn,
    .cn-club-matchday-credits #main-content .btn { min-height: 44px; min-width: 44px; }
    .cn-club-matchday #main-content .form-control,
    .cn-club-matchday #main-content .form-select,
    .cn-club-matchday-rotas #main-content .form-control,
    .cn-club-matchday-rotas #main-content .form-select,
    .cn-club-matchday-duties #main-content .form-select { min-height: 44px; }
    .cn-club-matchday #main-content .form-check-input,
    .cn-club-matchday-credits #main-content .form-check-input { width: 1.5rem; height: 1.5rem; }
    .cn-club-matchday #main-content .form-check-label { padding-left: .35rem; line-height: 1.75rem; }
    .cn-club-matchday #main-content summary,
    .cn-club-matchday-rotas #main-content summary { min-height: 44px; display: flex; align-items: center; }
    #main-content [data-matchday-nav] .nav-link { min-height: 44px; display: inline-flex; align-items: center; }
    .cn-club-matchday-credits #main-content [data-credit-duty] { min-height: 44px; }
}

/* The sponsor's invoice and report (Phase 16C and D) are opened on a phone
   from an email: their buttons are full tap targets there. And the club's
   sponsorship page, where a treasurer records a transfer standing at the
   bar: its row actions were .btn-sm (28px, 24px for the menu opener), the
   same fault CMJ3 fixed on the weekly pages, found here on the PTJ1 walk. */
@media (max-width: 767.98px) {
    .cn-invoice .btn,
    .cn-report .btn { min-height: 44px; }

    .cn-club-sponsorship #main-content .btn {
        min-height: 44px;
        min-width: 44px;
    }
    .cn-club-sponsorship #main-content .form-select-sm,
    .cn-club-sponsorship #main-content .form-control-sm { min-height: 44px; }

    /* A stacked table row is a four-column grid here. The invoice, the
       payment form and a deal's report each need the row's width, not a
       quarter of it: the reference field ran out of the card at 128px. */
    .cn-club-sponsorship tr[data-instalment] > td[data-label="Invoice"],
    .cn-club-sponsorship tr[data-instalment] > td[data-label="Record a payment"],
    .cn-club-sponsorship td[data-report-deal] {
        grid-column: 1 / -1;
        text-align: left !important;
    }
    .cn-club .cn-sponsor-pay > * { max-width: 100%; }
}

/* PT6: "Mark time away" gained a Reason on the player calendar. On a phone
   its select was 40px tall, as were the dates and the note beside it; every
   control in that dialog is a 44px tap target at phone width. */
@media (max-width: 767.98px) {
    #add-absence-modal .form-control,
    #add-absence-modal .form-select { min-height: 44px; }
}

/* PT10: the documents library and the assets register. Their add and edit
   forms are <details> cards whose header is the summary: a pointer, no
   disclosure marker over the title. At phone width every control on the
   four pages is a 44px tap target, as on match day. */
.cn-club summary.cn-doc-summary { cursor: pointer; list-style: none; }
.cn-club summary.cn-doc-summary::-webkit-details-marker { display: none; }
.cn-club details > summary.cn-doc-summary::after { content: "\203A"; margin-left: auto; font-size: 1.25rem; color: var(--tblr-secondary); transition: transform .15s; }
.cn-club details[open] > summary.cn-doc-summary::after { transform: rotate(90deg); }
@media (max-width: 767.98px) {
    .cn-club-documents #main-content .btn,
    .cn-club-document #main-content .btn,
    .cn-club-assets #main-content .btn,
    .cn-club-asset #main-content .btn { min-height: 44px; min-width: 44px; }
    .cn-club-documents #main-content .form-control,
    .cn-club-documents #main-content .form-select,
    .cn-club-document #main-content .form-control,
    .cn-club-document #main-content .form-select,
    .cn-club-assets #main-content .form-control,
    .cn-club-assets #main-content .form-select,
    .cn-club-asset #main-content .form-control,
    .cn-club-asset #main-content .form-select { min-height: 44px; }
    .cn-club-documents #main-content summary,
    .cn-club-document #main-content summary,
    .cn-club-assets #main-content summary,
    .cn-club-asset #main-content summary { min-height: 44px; display: flex; align-items: center; }
    .cn-club-documents #main-content .form-check-input { width: 1.5rem; height: 1.5rem; }
    .cn-club-documents #main-content .form-check-label { padding-left: .35rem; }
}
.cn-club details.card:not([open]) > summary.card-header { border-bottom: 0; }