/* Spec 153: everything that lies on the page is a board. A page head ends in a rule, a section starts with
   one, the pieces inside share their lines; nothing is a rounded card in a rounded card. Loaded after
   tabletop-pieces.css only with the tabletop look. The prefix html.tabletop:not(#tabletop)
   .page:is(.theme-dark, .theme-light) outranks the light surfaces of ui-states.css, which reach (1,4,0). */

/* 1. Page heads: the title on the page and a thin line below; the thick rules belong to the sections. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.home-app-header, .game-library-header:not(.planner-header-with-cover), .news-header) {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding-left: 0;
    padding-right: 0;
}

/* The game header shows its cover: it stays a picture under a dark scrim, square and flat, in both themes. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-library-header.planner-header-with-cover {
    background-image:
        linear-gradient(100deg, rgba(11, 6, 3, 0.8) 0%, rgba(11, 6, 3, 0.6) 50%, rgba(11, 6, 3, 0.4) 100%),
        var(--planner-header-image);
    background-size: cover;
    background-position: center;
    border: 0;
    border-bottom: 3px solid var(--tt-rule);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-library-header.planner-header-with-cover :is(h2, p) {
    color: #f8f1e8;
}

/* 2. Sections: a rule and a label instead of a card. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.home-app-card, .home-timeline-card, .home-game-draw-card, .home-planner-overview,
    .home-tonight-card, .home-summary-card, .game-library-filters, .planner-card, .news-filters-panel, .ranking-duel-card,
    .ranking-result-card, .ranking-history-card, .friends-add-panel) {
    background: transparent;
    border: 0;
    border-top: 3px solid var(--tt-rule);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding-left: 0;
    padding-right: 0;
    padding-top: 12px;
}

/* Spec 159 rule 10: ranking and news keep a thin line; the orange rule stays on the dashboard and the rest. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.ranking-page, .news-page) :is(.news-filters-panel, .ranking-duel-card,
    .ranking-result-card, .ranking-history-card) {
    border-top: 1px solid var(--tt-line);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-insight-section {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

/* 3. Section labels: the heading face in normal case (spec 163: no capitals). */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.home-app-card, .home-timeline-card, .home-game-draw-card, .home-planner-overview,
    .home-tonight-card, .home-summary-card, .game-library-filters, .planner-card, .news-filters-panel, .ranking-duel-card,
    .ranking-result-card, .ranking-history-card, .friends-add-panel) :is(h2, h3):not(.planner-stats-title, .news-card-title) {
    font-family: var(--tt-font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tt-ink);
    text-align: left;
    text-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.home-game-draw-head, .home-timeline-head) {
    justify-content: flex-start;
    text-align: left;
}

/* 4. Tracks: tiles that become one strip with shared lines (the gap is the line). */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-overview-kpis, .home-dash-stats, .home-summary-periods, .friend-profile-stats) {
    gap: 1px;
    background: var(--tt-line);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-overview-kpi, .home-dash-stat, .home-summary-period, .friend-profile-stats > div) {
    background: var(--tt-field);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-overview-kpi strong, .home-dash-stat strong, .friend-profile-stats dd) {
    font-family: var(--tt-font-display);
    font-variant-numeric: tabular-nums lining-nums;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-summary-period:hover {
    background: var(--tt-accent-soft);
    border-color: transparent;
    transform: none;
}

/* 5. Rows: list items lose their tile and share a line. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-overview-top-list, .home-dash-list, .home-tonight-list, .gs-sessions, .ranking-table,
    .friends-list, .planner-list) {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-overview-top-btn, .home-dash-list li, .home-tonight-pick, .home-shortcut, .gs-session,
    .ranking-row, .friends-item, .planner-list > li, .planner-meeting-vote) {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-overview-top-btn, .home-dash-list li, .home-tonight-pick, .home-shortcut, .gs-session,
    .ranking-row, .friends-item, .planner-list > li, .planner-meeting-vote):hover {
    background: var(--tt-accent-soft);
    transform: none;
    box-shadow: none;
}

/* Spec 232: "Coming up" and "Recently played" rows are small blocks of their own with cut corners, as the app's
   pieces; the frame takes the accent on hover. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-coming-up-row {
    background: var(--tt-field);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: 0 2px 0 var(--tt-edge);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-coming-up-row:is(:hover, :focus-visible) {
    border-color: var(--tt-accent);
    box-shadow: 0 2px 0 var(--tt-edge);
}

@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-coming-up-row {
        border-radius: 10px;
        corner-shape: bevel;
    }
}

/* Spec 300: the BG Stats import tiles cut their corners like the other pieces. */
@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.bgstats-group, .bgstats-player-row) {
        border-radius: 8px;
        corner-shape: bevel;
    }
}

/* Spec 192 rule 3: a dashboard row's link is a 24 px target. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-dash-list li a {
    min-height: 24px;
    line-height: 24px;
}

/* Spec 197: Bootstrap's tables (the admin pages) take the board's ink and lines instead of Bootstrap's grey. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .table {
    --bs-table-color: var(--tt-ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--tt-line);
    --bs-table-striped-color: var(--tt-ink);
    --bs-table-hover-color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .table > tbody > tr > th {
    color: var(--tt-ink);
}

/* The news and friends heads line up with the sections below them, which run to the page edges. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.news-header, .news-filters-panel, .friends-page > .game-library-header, .account-security-page > .game-library-header) {
    margin-left: 0;
    margin-right: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-filters {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding-left: 0;
    padding-right: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-sources-strip {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--tt-line);
    border-bottom: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
}

/* 6. Squares: repeated items that keep a frame, flat and square. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.game-card, .news-card, .ranking-pick, .ranking-duel-option) {
    background: var(--tt-field);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.game-card, .news-card, .ranking-pick, .ranking-duel-option):hover {
    border-color: var(--tt-accent);
    transform: none;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.ranking-pick.selected, .ranking-duel-option.selected, .ranking-duel-option[aria-pressed="true"]) {
    background: var(--tt-accent-soft);
    border-color: var(--tt-accent);
    box-shadow: inset 0 0 0 2px var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.game-card-thumb, .news-card-media, .ranking-pick-cover) {
    border-radius: 0;
}

/* A summary panel inside a section: a flat framed square, not a card. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.gs-summary, .planner-selected-date, .planner-empty-block) {
    background: var(--tt-field);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
}

/* 7. The demo banner is a notice band, the same in both themes. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .demo-banner {
    background: transparent;
    border: 0;
    border-top: 2px solid var(--tt-accent);
    border-bottom: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
    color: var(--tt-ink);
}

/* 8. The content area shows the page colour. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) article.content {
    background: transparent;
}

/* 9. Nothing that lies on the board moves when the pointer passes over it. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.home-dash-card, .planner-play-item-clickable, .planner-stats-hero-card-clickable):hover {
    transform: none;
    box-shadow: none;
}

/* Spec 160 rule 1: on the dashboard each section is a field of the board with a heading, not a bare rule. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell :is(.home-timeline-card, .home-game-draw-card, .home-planner-overview,
    .home-tonight-card, .home-summary-card, .home-dash-card) {
    background: var(--tt-area);
    border-top: 3px solid var(--tt-rule);
    padding: 14px 18px 18px;
    margin: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell :is(.home-timeline-card, .home-game-draw-card, .home-planner-overview,
    .home-tonight-card, .home-summary-card, .home-dash-card) :is(h2, h3):not(.planner-stats-title) {
    font-family: var(--tt-font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .planner-overview-kpi strong {
    font-family: var(--tt-font-display);
    font-size: 24px;
    white-space: nowrap;
    font-weight: 700;
    color: var(--tt-ink);
}

/* Spec 160 rule 2: the greeting over two columns from 1280 px, one column below. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell {
    gap: 16px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-dash-column {
    display: grid;
    gap: 16px;
    align-content: start;
    min-width: 0;
}

/* Spec 165 rule 3: the cards run under both columns in tracks of at least 280 px; the invite takes a row. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell > .home-dash-grid {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell > .home-dash-grid > * {
    grid-column: auto;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell > .home-dash-grid > .home-invite-card {
    grid-column: 1 / -1;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-dash-card.home-dash-shortcuts {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-shortcut {
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--tt-line);
    border-radius: 0;
    background: transparent;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-shortcut:hover {
    color: var(--tt-accent);
    transform: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-dash-shortcuts .home-shortcut-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

@media (min-width: 1280px) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        align-items: start;
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell > .home-app-header {
        grid-column: 1 / -1;
    }
}

/* Spec 161 rule 2: the statistics fit in less height - each most-played game is one row at every width. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-planner-overview .planner-overview-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
}

/* Spec 315 rule 17: a row per period under its own label; the month's three tiles stand in one row once each has
   140 px, below that the time takes the second row whole, so no cell stays empty. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-planner-overview .planner-overview-period {
    container-type: inline-size;
    margin-top: 0.65rem;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-planner-overview .planner-overview-kpis.is-month > :last-child {
    grid-column: 1 / -1;
}

@container (min-width: 420px) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-planner-overview .planner-overview-kpis.is-month {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-planner-overview .planner-overview-kpis.is-month > :last-child {
        grid-column: auto;
    }
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-planner-overview .planner-overview-kpi {
    padding: 8px 10px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-planner-overview .planner-overview-top-list {
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    column-gap: 16px;
    row-gap: 0;
}

/* Spec 315 rule 16: up to four games, as many as fill whole rows - three in one or three columns, four in two or
   four. The widths are those of the grid above: n columns from n x 140 px plus (n - 1) x 16 px. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-planner-overview .planner-overview-top {
    container-type: inline-size;
}

@container (max-width: 295.98px) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-planner-overview .planner-overview-top-list > :nth-child(n + 4) {
        display: none;
    }
}

@container (min-width: 452px) and (max-width: 607.98px) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-planner-overview .planner-overview-top-list > :nth-child(n + 4) {
        display: none;
    }
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-planner-overview .planner-overview-top-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    /* Spec 272 rule 3: as tall as the row's tallest tile, so the lines under them sit at one height. */
    height: 100%;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-planner-overview .planner-overview-top-thumb {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
}

/* Spec 189: a tile never grows past its column; the line under the name wraps after its dot. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-planner-overview :is(.planner-overview-top-list > li,
    .planner-overview-top-btn, .planner-overview-top-content) {
    min-width: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-planner-overview .planner-overview-top-meta {
    white-space: normal;
}

/* Spec 161 rule 4: the planner is fields too; each section of the day opens with a band across its field. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-grid > .planner-card {
    background: var(--tt-area);
    border-top: 3px solid var(--tt-rule);
    padding: 14px 18px 18px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day-details-card .planner-section-head {
    background: var(--tt-side);
    margin: 18px -18px 0;
    padding: 8px 18px;
    border: 0;
}

/* Spec 198: on the narrowest phones the planner's fields keep 8 px at their sides, so the month fits 320 px. */
@media (max-width: 400px) {
    /* The page and the grid add no side padding of their own to the content's; the fields reach its edges. */
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-page, .planner-page > .planner-grid) {
        padding-left: 0;
        padding-right: 0;
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-grid > .planner-card {
        padding: 12px 8px 14px;
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day-details-card .planner-section-head {
        margin: 14px -8px 0;
        padding: 8px;
    }
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day-details-card .planner-list > li {
    padding: 12px 0;
}

/* Spec 176 rule 6: on a phone the four key numbers sit two by two, without an empty cell. */
@media (max-width: 600px) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-planner-overview .planner-overview-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Spec 176: the intro leaves room for the pawn at the header's right, so the text never runs under it. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-auth-shell .home-app-header-titleline {
    padding-right: 84px;
}

/* Spec 248: each meeting of the public club page is a block with cut corners. */
@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .auth-container .club-public-meeting {
        border-radius: 8px;
        corner-shape: bevel;
    }
}

/* Spec 256: the club page look - the header, logo, story, place and map on the public page, the editor's parts and
   blocks - cut their corners like the other blocks. */
@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .auth-container :is(.club-public-hero.has-picture, .club-public-logo, .club-public-block, .club-public-join.is-highlighted, .club-map-frame),
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.club-look-part, .club-look-block, .club-look-map, .club-look-map-preview) {
        border-radius: 8px;
        corner-shape: bevel;
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .auth-container .club-public-social a.club-social-btn {
        border-radius: 6px;
        corner-shape: bevel;
    }
}