/* Spec 156: the details of the demo screens in the tabletop look - the library's game boxes with a metric
   line and one action, typographic dates, places like a score table, the calendar as one grid and square
   chart bars. Loaded after tabletop-shell.css only with the tabletop look. */

/* 1. Library: no card frame; the cover stands as a box, the title and the metric line sit under it. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card {
    position: relative;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    padding: 14px 14px 0 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card:hover {
    border: 0;
    transform: none;
    box-shadow: none;
}

/* No coloured stripe over a favourite: the heart on the lid says it. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card::before {
    content: none;
}

/* Spec 159 rule 9: the cover is the lid of a box; its top and right side are drawn in perspective. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card .game-card-thumb {
    height: auto;
    aspect-ratio: 1;
    min-height: 0;
    overflow: visible;
    background: var(--tt-box);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card .game-card-thumb .game-cover-img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    background: transparent;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card .game-card-thumb::before,
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card .game-card-thumb::after {
    content: "";
    position: absolute;
    inset: auto;
    background: var(--tt-box);
    pointer-events: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card .game-card-thumb::before {
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
    filter: brightness(1.3);
    transform: skewX(-45deg);
    transform-origin: bottom left;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card .game-card-thumb::after {
    top: 0;
    bottom: 0;
    right: -14px;
    width: 14px;
    filter: brightness(0.72);
    transform: skewY(-45deg);
    transform-origin: top left;
}

/* Spec 160 rule 4: the outline follows the whole box - lid, top and side - as hard shadows of its shape. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card:hover .game-card-thumb {
    outline: 0;
    filter: drop-shadow(2px 0 0 var(--tt-accent)) drop-shadow(-2px 0 0 var(--tt-accent))
        drop-shadow(0 2px 0 var(--tt-accent)) drop-shadow(0 -2px 0 var(--tt-accent));
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card .game-card-body {
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card .game-card-title {
    font-family: var(--tt-font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card .game-card-title-link {
    color: inherit;
    text-decoration: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card:hover .game-card-title {
    color: var(--tt-accent);
}

/* The metric line: players, time, plays and match share their lines. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--tt-line);
    border: 1px solid var(--tt-line);
    margin-top: 6px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-meta-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    background: var(--tt-field);
    color: var(--tt-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums lining-nums;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-meta-cell svg {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-meta-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tt-muted);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-meta-status::before {
    content: "";
    width: 9px;
    height: 9px;
    box-shadow: inset 0 0 0 2px var(--tt-muted);
}

/* Spec 331 rule 1a: the status and the menu button share the card's last line; the menu keeps its place on the card. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-card-foot .tt-meta-status {
    margin-top: 0;
    min-width: 0;
}

/* One action: a quiet button at the end of the status line opens a small cardboard menu. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-more-btn {
    flex: none;
    margin-left: auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--tt-ink);
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-more-btn:hover,
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-more-btn[aria-expanded="true"] {
    border-color: var(--tt-line);
    color: var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card:has(.tt-more-btn[aria-expanded="true"]) {
    z-index: 5;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-card-menu {
    position: absolute;
    right: 10px;
    bottom: 46px;
    z-index: 6;
    display: grid;
    min-width: 12rem;
    background: var(--tt-field);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: 0 6px 0 var(--tt-edge);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-card-menu[hidden] {
    display: none;
}

/* Spec 198: two boxes a row on phones; the left box's menu opens to the right, so it stays on the page. */
@media (max-width: 480px) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-grid > .game-card:nth-child(odd) .tt-card-menu {
        right: auto;
        left: 10px;
    }
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-card-menu-item {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    padding: 9px 14px;
    background: transparent;
    color: var(--tt-ink);
    border: 0;
    border-bottom: 1px solid var(--tt-line);
    cursor: pointer;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-card-menu-item:last-child {
    border-bottom: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-card-menu-item:hover {
    color: var(--tt-accent);
    background: var(--tt-accent-soft);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-card-menu-danger,
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-card-menu-danger:hover {
    color: var(--tt-danger);
}

/* 2. Typographic dates: the day in the heading face, the month under it, no frame. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .gs-session-date {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .gs-session-date strong {
    font-family: var(--tt-font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: lining-nums;
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .gs-session-date span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tt-muted);
}

/* 3. Placement: the place in the heading face, the first one in the accent. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-score-rank-badge, .ranking-rank, .tt-place) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    width: auto;
    min-width: 1.6em;
    height: auto;
    font-family: var(--tt-font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--tt-ink);
    font-variant-numeric: tabular-nums lining-nums;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-score-rank-1 .planner-score-rank-badge, .ranking-row:first-child .ranking-rank,
    .home-dash-list li:first-child .tt-place) {
    color: var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-place {
    display: inline-block;
    font-size: 15px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-player-scores-view :is(ol, ul) {
    padding-left: 0;
    border-top: 1px solid var(--tt-line);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-player-scores-view li {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-play-winner {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    color: var(--tt-ok);
}

/* 4. The calendar is one grid: shared lines, flat square days. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-calendar-grid:not(.planner-calendar-weekdays) {
    gap: 1px;
    background: var(--tt-line);
    border: 1px solid var(--tt-line);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day {
    background: var(--tt-field);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day:hover {
    background: var(--tt-accent-soft);
    border: 0;
    transform: none;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day.planner-day-out {
    background: var(--tt-surface);
    color: var(--tt-muted);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day.planner-day-today {
    background: var(--tt-accent-soft);
    border: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day.planner-day-selected {
    box-shadow: inset 0 0 0 2px var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day .planner-day-number {
    font-family: var(--tt-font-display);
    font-weight: 700;
    font-variant-numeric: lining-nums;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day.planner-day-today .planner-day-number {
    color: var(--tt-accent);
}

/* Day markers: a diamond for meetings, a square for plays, the count in the heading face. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-badge {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    gap: 5px;
    color: var(--tt-ink);
    font-family: var(--tt-font-display);
    font-weight: 700;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-badge svg {
    display: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: none;
    background: var(--tt-ok);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-badge.planner-badge-meeting::before {
    width: 7px;
    height: 7px;
    background: var(--tt-accent);
    transform: rotate(45deg);
}

/* The markers say it already; the gradient activity stripe goes. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day-has-activity::before {
    display: none;
}

/* 5. Chart bars are square. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .gs-month-col {
    border-radius: 0;
    background: var(--tt-accent);
    box-shadow: none;
}

/* Spec 163 rule 3: cells that share their lines form one bigger piece with cut outer corners, like a button;
   fields of the board are cut the same way. Without corner-shape they stay square. */
@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-overview-kpis, .home-dash-stats, .home-summary-periods,
        .home-tonight-stepper, .dice-pick-controls, .game-card-badges, .planner-game-facts, .tt-meta,
        .planner-calendar-grid:not(.planner-calendar-weekdays)) {
        border-radius: 9px;
        corner-shape: bevel;
        overflow: hidden;
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.home-tonight-chips, .news-lang-group, .news-type-group, .ranking-depth,
        .lang-selector, .planner-mobile-section-nav) > :first-child {
        border-top-left-radius: 9px;
        border-bottom-left-radius: 9px;
        corner-shape: bevel;
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.home-tonight-chips, .news-lang-group, .news-type-group, .ranking-depth,
        .lang-selector, .planner-mobile-section-nav) > :last-child {
        border-top-right-radius: 9px;
        border-bottom-right-radius: 9px;
        corner-shape: bevel;
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.home-auth-shell :is(.home-timeline-card, .home-game-draw-card,
        .home-planner-overview, .home-tonight-card, .home-summary-card, .home-dash-card), .planner-grid > .planner-card) {
        border-radius: 14px;
        corner-shape: bevel;
    }
}

/* Spec 165 rule 2: a section of the day is a band that opens on demand; the chevron turns when open. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 32px;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-section-toggle:hover {
    color: var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-section-chevron {
    width: 8px;
    height: 8px;
    margin-left: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-section-toggle[aria-expanded="true"] .tt-section-chevron {
    transform: translateY(2px) rotate(-135deg);
}

/* Spec 165 rule 4 and spec 166 rule 2: friends, the news filters and every news card stand on fields with the
   rule of the other pages; the news grid itself is not a field. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.friends-page .planner-card, .account-security-page .planner-card, .club-page .planner-card, .msg-page .planner-card, .news-page .news-filters-panel, .news-page .news-card) {
    background: var(--tt-area);
    border: 0;
    border-top: 3px solid var(--tt-rule);
    padding: 14px 18px 18px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-page .news-filters-panel {
    padding-bottom: 14px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-page .news-filters-panel .news-filters {
    margin-bottom: 0;
}

/* Spec 165 rule 6: games in the ranking stand as boxes, as in the library. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.ranking-pick, .ranking-pick.selected) {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 14px 14px 0 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.ranking-pick-cover, .tt-box) {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: visible;
    background: var(--tt-box);
    border-radius: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-box {
    width: min(100%, 180px);
    margin: 14px auto 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.ranking-pick-cover, .tt-box) img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    border-radius: 0;
    background: transparent;
    margin: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.ranking-pick-cover, .tt-box)::before,
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.ranking-pick-cover, .tt-box)::after {
    content: "";
    position: absolute;
    background: var(--tt-box);
    pointer-events: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.ranking-pick-cover, .tt-box)::before {
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
    filter: brightness(1.3);
    transform: skewX(-45deg);
    transform-origin: bottom left;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.ranking-pick-cover, .tt-box)::after {
    top: 0;
    bottom: 0;
    right: -14px;
    width: 14px;
    filter: brightness(0.72);
    transform: skewY(-45deg);
    transform-origin: top left;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.ranking-pick:hover .ranking-pick-cover, .ranking-duel-option:hover .tt-box) {
    filter: drop-shadow(2px 0 0 var(--tt-accent)) drop-shadow(-2px 0 0 var(--tt-accent))
        drop-shadow(0 2px 0 var(--tt-accent)) drop-shadow(0 -2px 0 var(--tt-accent));
}

@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.friends-page .planner-card, .account-security-page .planner-card, .club-page .planner-card, .msg-page .planner-card, .news-page .news-filters-panel, .news-page .news-card) {
        border-radius: 14px;
        corner-shape: bevel;
    }
}

/* Spec 166 rule 3: the shelf button on a cover matches the edit and favourite buttons; when on it is filled. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card .shelf-btn.shelf-btn-active {
    background: var(--tt-accent);
    border-color: var(--tt-accent);
    color: var(--tt-on-accent);
    box-shadow: none;
}

@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .game-card .shelf-btn {
        border-radius: 7px;
        corner-shape: bevel;
    }
}

/* Spec 167 rule 1: the filter field keeps the news grid's gap to the first card; the sources sit below the filters. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-page .news-filters-panel {
    margin-bottom: 16px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-page .news-filters-panel .news-sources-strip {
    margin-top: 14px;
}

/* Spec 168 rule 1: a new news card reads as new - a thicker accent edge, an accent tint, a larger marker. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-page .news-card.news-card-new {
    border-top: 5px solid var(--tt-accent);
    background: color-mix(in srgb, var(--tt-accent) 10%, var(--tt-area));
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-page .news-card-new-badge {
    font-size: 13px;
    font-weight: 700;
    color: var(--tt-accent);
}

/* Spec 172 rule 4: the calendar's legend - the same marks as in the grid, in the text face. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 12px;
    color: var(--tt-muted);
    font-size: 13px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-calendar-legend :is(.planner-badge, .tt-legend-today, .tt-legend-selected) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--tt-font-text);
    font-weight: 600;
    color: var(--tt-muted);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-legend-today::before {
    content: "";
    width: 14px;
    height: 14px;
    background: var(--tt-accent);
    -webkit-mask: var(--tt-pawn) center / contain no-repeat;
    mask: var(--tt-pawn) center / contain no-repeat;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-legend-selected::before {
    content: "";
    width: 12px;
    height: 12px;
    box-shadow: inset 0 0 0 2px var(--tt-accent);
    background: var(--tt-accent-soft);
}

/* Spec 172 rule 5: a meeting or a play runs from edge to edge of the field, so its highlight does too. */
/* Spec 250 rule 2: the list reaches the field's edges and the rows fill it, so no row sticks out of its list. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day-details-card .planner-list {
    margin-left: -18px;
    margin-right: -18px;
    padding: 0;
}

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

/* The narrowest phones keep 8 px at the field's sides (spec 198), so the list follows them. */
@media (max-width: 400px) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day-details-card .planner-list {
        margin-left: -8px;
        margin-right: -8px;
    }

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

/* Spec 209 rule 2: the meeting opened from "Coming up" or a link wears the selected look. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day-details-card .planner-list > li.is-focused {
    background: var(--ui-accent-soft);
    box-shadow: inset 0 0 0 1px var(--ui-accent);
}

/* Spec 209 rule 1: a club meeting's row is a link and reads like the other rows. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) a.planner-coming-up-row {
    color: var(--tt-ink);
    text-decoration: none;
    /* Unlike a button, a link would size the planner's column by its whole title and push it off a phone. */
    contain: inline-size;
}

/* Spec 177: the library's BGG warning under the metric line, and the BGG link among the menu's buttons. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-meta-warning {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tt-danger);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) a.tt-card-menu-item {
    display: block;
    text-decoration: none;
}

/* Spec 177 rule 4: the add-game form is a field of the board; its file rows and notices lie flat on it. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .upload-card {
    background: var(--tt-area);
    border: 0;
    border-top: 3px solid var(--tt-rule);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.upload-label, .upload-files-title, .pdf-note-form-row label) {
    color: var(--tt-ink);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.upload-hint, .upload-file-rag-message, .upload-input-file-name-display) {
    color: var(--tt-muted);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .upload-input-file-row {
    background: var(--tt-field);
    border: 1px dashed var(--tt-line);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.upload-file-item, .upload-bgg-result) {
    background: var(--tt-field);
    color: var(--tt-ink);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .upload-file-item-new {
    border-left: 3px solid var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .upload-file-item-marked {
    border-left: 3px solid var(--tt-danger);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .upload-file-name {
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .upload-bgg-result:hover:not(:disabled) {
    border-color: var(--tt-accent);
    transform: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.upload-bgg-result-meta, .upload-bgg-message) {
    color: var(--tt-muted);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .upload-bgg-result-add {
    color: var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .upload-cover-preview {
    border: 1px solid var(--tt-line);
    border-radius: 0;
}

/* A notice is a flat strip with its colour as the left rule. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .upload-alert {
    background: var(--tt-field);
    color: var(--tt-ink);
    border: 1px solid var(--tt-line);
    border-left: 3px solid var(--tt-accent);
    border-radius: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .upload-alert-success {
    border-left-color: var(--tt-ok);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .upload-alert-error {
    border-left-color: var(--tt-danger);
}

/* The dialogs of AppDialog: the title in the heading face, a plain scrim without blur. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .pdf-note-modal :is(h4, h3) {
    font-family: var(--tt-font-display);
    font-weight: 700;
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) :is(.pdf-note-modal-backdrop, .app-busy-overlay, .planner-modal-backdrop, .planner-picker-backdrop, .home-summary-backdrop) {
    background: rgba(20, 12, 7, 0.6);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* The busy card: its pages are flat sheets of the board. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .app-busy-title {
    font-family: var(--tt-font-display);
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .app-busy-text {
    color: var(--tt-muted);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .app-busy-page {
    background: var(--tt-field);
    border: 1px solid var(--tt-accent);
    border-radius: 0;
}

/* Spec 179 rule 5: the planner's pickers float as pieces; their days and hours are flat cells, the chosen one
   in the accent like the calendar's; the calendar sync waits in a flat band. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-picker-title, .planner-picker-header strong) {
    font-family: var(--tt-font-display);
    font-weight: 700;
    color: var(--tt-ink);
    text-transform: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-picker-modal p {
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-picker-nav, .planner-date-picker-day, .planner-calendar-sync-btn) {
    background: var(--tt-field);
    color: var(--tt-ink);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-picker-nav, .planner-date-picker-day, .planner-calendar-sync-btn):hover {
    border-color: var(--tt-accent);
    color: var(--tt-accent);
    transform: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-date-picker-day.today {
    border-color: var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-date-picker-day.active {
    background: var(--tt-accent);
    color: var(--tt-on-accent);
    border-color: var(--tt-accent);
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-date-picker-weekdays span, .planner-duration-picker-column > span) {
    color: var(--tt-muted);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-duration-picker-scroll {
    background: var(--tt-page);
    border: 1px solid var(--tt-line);
    border-radius: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-duration-picker-scroll button {
    background: transparent;
    color: var(--tt-ink);
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-duration-picker-scroll button.active {
    background: var(--tt-accent-soft);
    color: var(--tt-ink);
    box-shadow: inset 0 0 0 2px var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-calendar-sync-panel {
    background: var(--tt-field);
    border: 1px solid var(--tt-line);
    border-radius: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-calendar-sync-summary, .planner-calendar-sync-link) {
    color: var(--tt-accent);
}

/* A longer label in a dialog's action row keeps room on its sides. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-modal-actions .game-card-btn {
    padding-left: 16px;
    padding-right: 16px;
}

/* The score pad's row names sit on the board like its cells. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .score-pad-row-head {
    background: var(--tt-field);
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .score-pad-table-wrap {
    border-color: var(--tt-line);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .score-pad-table :is(th, td) {
    border-bottom-color: var(--tt-line);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .score-pad-total.is-leader {
    color: var(--tt-accent);
}

/* Spec 180 rule 1: the news digest is a field of the news board like the cards; its points carry square marks. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-digest-card {
    background: var(--tt-area);
    color: var(--tt-ink);
    border: 0;
    border-top: 3px solid var(--tt-rule);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.news-digest-bar:hover, .news-digest-bar:focus-visible) {
    box-shadow: inset 0 0 0 1px var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.news-digest-title, .news-digest-section-title) {
    font-family: var(--tt-font-display);
    font-weight: 700;
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-digest-point {
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-digest-point::before {
    border-radius: 0;
    background: var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.news-digest-date, .news-digest-teaser, .news-digest-ai-label, .news-digest-state) {
    color: var(--tt-muted);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-digest-source {
    background: var(--tt-field);
    color: var(--tt-ink);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-digest-bar-arrow {
    color: var(--tt-accent);
}

/* Spec 180 rule 3: a game without a cover is a plain box with its initials. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.ranking-game-fallback, .ranking-duel-fallback, .ranking-inline-fallback,
    .planner-overview-top-thumb-fallback) {
    background: var(--tt-box);
    color: var(--tt-ink);
    border-radius: 0;
    box-shadow: none;
}

/* Spec 180 rule 4: the plan on the dashboard shortcut is a plain label; Pro carries the gold token. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-dash-plan-badge {
    background: transparent;
    color: var(--tt-muted);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    font-weight: 700;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-dash-plan-pro {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-dash-plan-pro::before {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--tt-pro) center / contain no-repeat;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-dash-plan-club::before {
    background-image: var(--tt-club);
}

/* Spec 255 rule 4: the free monthly rulebook limit sits under the status, its text taking the free room. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .upload-plan-note {
    margin: .75rem 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .upload-plan-note > span {
    flex: 1 1 auto;
}

/* Spec 180 rule 2: the news sources panel is a field like the filters; its channels are flat rows. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-settings-panel {
    background: var(--tt-area);
    color: var(--tt-ink);
    border: 0;
    border-top: 3px solid var(--tt-rule);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.news-settings-title, .news-custom-title) {
    font-family: var(--tt-font-display);
    font-weight: 700;
    color: var(--tt-ink);
    text-transform: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.news-settings-desc, .news-custom-message) {
    color: var(--tt-muted);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-custom-item {
    background: var(--tt-field);
    color: var(--tt-ink);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
}

/* The outlined danger pieces stay red on hover; only their frame thickens. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.pdf-note-delete-btn, .news-custom-remove, .chat-history-delete-all):hover:not(:disabled) {
    color: var(--tt-danger);
    border-color: var(--tt-danger);
    background: transparent;
    box-shadow: 0 3px 0 var(--tt-danger-edge), inset 0 0 0 1px var(--tt-danger);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .news-custom-sources {
    border-top: 1px solid var(--tt-line);
}

/* A box without a cover shows the game's initial in the middle of its lid. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.tt-box, .ranking-pick-cover) > :is(.ranking-duel-fallback, .ranking-game-fallback) {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    font-family: var(--tt-font-display);
    font-size: 40px;
    font-weight: 700;
}

/* Spec 181 rule 2: the legal pages lie on the board - their palette takes the tokens, the head is a page head,
   the contents and the article are fields, pills are plain labels. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .terms-page {
    --terms-bg: var(--tt-page);
    --terms-glow: none;
    --terms-card: var(--tt-field);
    --terms-surface: var(--tt-area);
    --terms-border: var(--tt-line);
    --terms-rule: var(--tt-line);
    --terms-text: var(--tt-ink);
    --terms-muted: var(--tt-muted);
    --terms-accent: var(--tt-accent);
    --terms-accent-soft: var(--tt-accent-soft);
    --terms-strong: var(--tt-ink);
    --terms-shadow: none;
    --terms-radius: 0;
    --terms-toc-radius: 0;
    background: var(--tt-page);
}

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

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .terms-hero::before {
    content: none;
}

/* Spec 315 rule 3: below the two columns the head starts right under the back button, as the Privacy page does. */
@media (max-width: 960px) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .terms-hero {
        padding-top: 0;
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .terms-hero h1 {
        margin-top: 0.35rem;
    }
}

@media (max-width: 540px) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .terms-hero {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.terms-content, .terms-toc, .contact-card) {
    background: var(--tt-area);
    color: var(--tt-ink);
    border: 0;
    border-top: 3px solid var(--tt-rule);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.terms-hero-eyebrow, .terms-hero-pill) {
    background: transparent;
    color: var(--tt-muted);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.terms-page h1, .terms-page h2, .terms-page h3, .contact-card h1) {
    font-family: var(--tt-font-display);
    color: var(--tt-ink);
    text-transform: none;
    letter-spacing: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .terms-toc-list a {
    border-radius: 0;
    transform: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.contact-intro, .contact-card .form-label) {
    color: var(--tt-ink);
}

/* Spec 181 rule 3: the plans are fields; the current one is framed in the accent; its badge is a plain label. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .pricing-card {
    background: var(--tt-area);
    color: var(--tt-ink);
    border: 0;
    border-top: 3px solid var(--tt-rule);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .pricing-card.pricing-card-current {
    box-shadow: inset 0 0 0 2px var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .pricing-current-badge {
    background: transparent;
    color: var(--tt-accent);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    font-weight: 700;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .pricing-price {
    font-family: var(--tt-font-display);
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.pricing-subscription-status, .pricing-price-note) {
    color: var(--tt-muted);
}

/* Spec 187: the plan notices (status, trial, legal) lie as fields of their own, cut below; links in the accent. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .pricing-subscription-status {
    background: var(--tt-field);
    border: 1px solid var(--tt-line);
    border-radius: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .pricing-subscription-status a {
    color: var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .pricing-renewal-canceled {
    color: var(--tt-ok);
}

/* Spec 181 rule 4: the admin pages take the board's tokens; their outlined buttons are pieces, their bars score
   tracks. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .admin-page {
    --admin-surface: var(--tt-area);
    --admin-frame: var(--tt-line);
    --admin-row: var(--tt-line);
    --admin-field: var(--tt-field);
    --admin-field-text: var(--tt-ink);
    --admin-muted: var(--tt-muted);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .admin-page :is(.list-group, .card) {
    border: 0;
    border-top: 3px solid var(--tt-rule);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .admin-page :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success) {
    background: var(--tt-field);
    color: var(--tt-ink);
    border: 1px solid var(--tt-line);
    box-shadow: 0 3px 0 var(--tt-edge);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .admin-page :is(.btn-outline-danger, .btn-danger) {
    background: transparent;
    color: var(--tt-danger);
    border: 1px solid var(--tt-danger);
    box-shadow: 0 3px 0 var(--tt-danger-edge);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .admin-page .btn:hover:not(:disabled) {
    filter: none;
    transform: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .admin-page .btn:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .admin-page .badge {
    border-radius: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .admin-funnel-bar {
    background:
        repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--tt-line) calc(10% - 1px) 10%),
        var(--tt-field);
    border: 1px solid var(--tt-line);
    border-radius: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .admin-funnel-bar span {
    background: var(--tt-accent);
    border-radius: 0;
}

@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .admin-page .btn {
        border-radius: 9px;
        corner-shape: bevel;
    }
}

/* Spec 187: every filled field is cut like the others - the plans, upload, digest, news settings, legal, contact
   and admin fields. */
@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.pricing-card, .upload-card, .news-digest-card, .news-settings-panel,
        .terms-content, .terms-toc, .contact-card, .admin-page .list-group, .admin-page .card) {
        border-radius: 14px;
        corner-shape: bevel;
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .pricing-subscription-status {
        border-radius: 9px;
        corner-shape: bevel;
    }
}

/* Spec 182 rule 1: the sign-in pages are a field on the board: the page colour behind, the game names lying
   around as square cards, the form card a field with the rule and cut corners (the meeple stays), plain
   headings, notices as flat strips. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .auth-container {
    background: var(--tt-page);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .auth-bg-tag {
    background: var(--tt-field);
    color: var(--tt-muted);
    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) .auth-card {
    background: var(--tt-area);
    color: var(--tt-ink);
    border: 0;
    border-top: 3px solid var(--tt-rule);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .auth-card::before {
    content: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .auth-card .auth-header h2 {
    font-family: var(--tt-font-display);
    color: var(--tt-ink);
    background-image: none;
    padding-bottom: 0;
    display: block;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.auth-subtitle, .form-hint, .form-text, .auth-divider span) {
    color: var(--tt-muted);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .form-label {
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.auth-divider::before, .auth-divider::after) {
    background: var(--tt-line);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .alert {
    background: var(--tt-field);
    color: var(--tt-ink);
    border: 1px solid var(--tt-line);
    border-left: 3px solid var(--tt-accent);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .alert-success {
    border-left-color: var(--tt-ok);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .alert-error {
    border-left-color: var(--tt-danger);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .auth-header .tt-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-brand-mark {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}

@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .auth-card {
        border-radius: 14px;
        corner-shape: bevel;
    }
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.password-rules-title, .password-rule-item) {
    color: var(--tt-muted);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .password-rule-item.is-met {
    color: var(--tt-ink);
}

/* Spec 183 rule 2: the guest landing in the demo's look - its palette takes the board's tokens, the bar lies flat,
   the cards, prices and final call are fields with the rule and cut corners, icons stand without bubbles. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .guest-landing {
    --gl-bg: var(--tt-page);
    --gl-text: var(--tt-ink);
    --gl-muted: var(--tt-muted);
    --gl-accent: var(--tt-accent);
    --gl-amber: var(--tt-accent);
    --gl-gradient: linear-gradient(135deg, var(--tt-accent-from), var(--tt-accent-to));
    --gl-line: var(--tt-line);
    --gl-surface: var(--tt-area);
    --gl-shadow: none;
    --gl-radius: 0;
    --gl-pill-bg: var(--tt-field);
    --gl-pill-line: var(--tt-line);
    background: var(--tt-page);
    font-family: var(--tt-font-text);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .guest-landing :is(h1, h2, h3) {
    font-family: var(--tt-font-display);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .gl-topbar {
    background: var(--tt-page);
    border-bottom: 1px solid var(--tt-line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.gl-card, .gl-price-card, .gl-final) {
    background: var(--tt-area);
    border: 0;
    border-top: 3px solid var(--tt-rule);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .gl-price-card-pro {
    box-shadow: inset 0 0 0 2px var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .gl-card-icon {
    background: transparent;
    color: var(--tt-accent);
    padding: 0;
    border-radius: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .gl-card-shot {
    border: 1px solid var(--tt-line);
    border-radius: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .gl-card:hover {
    transform: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .gl-brand .tt-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@supports (corner-shape: bevel) {
    /* Spec 324: the blocks of the rules pages too. */
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.gl-card, .gl-price-card, .gl-final, .rules-block) {
        border-radius: 14px;
        corner-shape: bevel;
    }
}

/* The landing's bar keeps the mark compact and the languages on one row; the wordmark is the menu's (spec 214). */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .gl-topbar .tt-brand-mark {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .gl-lang {
    flex-wrap: nowrap;
}

/* Up to 560 px the bar shows the mark alone, so the languages and both account actions keep one row. */
@media (max-width: 560px) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .gl-topbar .tt-wordmark {
        display: none;
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .gl-brand {
        width: auto;
        overflow: visible;
    }
}

/* Spec 184 rule 3: the recent searches open as a floating piece with flat rows. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .search-history {
    background: var(--tt-field);
    color: var(--tt-ink);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: 0 6px 0 var(--tt-edge);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .search-history-item {
    border-radius: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.search-history-item:hover, .search-history-item.is-active) {
    background: var(--tt-accent-soft);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .search-history-term {
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.search-history-remove, .search-history-clear) {
    color: var(--tt-muted);
    border-color: var(--tt-line);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .search-history-remove:hover {
    color: var(--tt-danger);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .search-history-clear:hover {
    color: var(--tt-accent);
}

/* A lone last metric fills its row, so the line never shows an empty cell. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-meta-cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* Spec 210 rule 2: each section of a club meeting opens with a band across its field, as the planner's day does. */
/* The band follows the block's bevelled corners. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .club-page .planner-card:has(> .club-section-head) {
    overflow: clip;
}

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

/* Owner, 2026-10-26: framed boxes inside a field - the day's date, summary panels, every message - cut their corners
   like the fields and the pieces; spec 257: the emoji panel too; spec 259: the club cards and board posts; spec 326: the
   steps of the game night planner page. */
@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.gs-summary, .planner-selected-date, .planner-empty-block, .msg, .msg-emoji-panel) {
        border-radius: 8px;
        corner-shape: bevel;
    }

    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.club-hub-row, .club-board-post, .club-board-compose, .gnp-step) {
        border-radius: 8px;
        corner-shape: bevel;
    }
}

/* Spec 271 rule 4: the club page's tabs cut their top corners as the blocks under them. */
@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .club-hub-tab {
        border-radius: 10px 10px 0 0;
        corner-shape: bevel;
    }
}

/* Spec 274: the day's cards - the cover as a box, the facts and the people as framed blocks, the answer a token. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day-details-card .planner-game-thumb {
    border-radius: 0;
    box-shadow: 1px -1px 0 var(--tt-box), 2px -2px 0 var(--tt-box), 3px -3px 0 var(--tt-edge);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day-details-card .planner-day-facts {
    background: var(--tt-field);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day-details-card .planner-day-rows > li {
    background: var(--tt-field);
    border: 1px solid var(--tt-line);
    border-radius: 0;
    box-shadow: none;
    color: var(--tt-ink);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day-details-card .planner-day-rows > li.is-winner {
    border-color: var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day-details-card .planner-day-rows-label {
    color: var(--tt-muted);
    font-family: var(--tt-font-text);
    text-transform: none;
    letter-spacing: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-invite-token {
    background: var(--tt-field);
    border: 1px solid var(--tt-line);
    border-radius: 3px;
    box-shadow: 0 2px 0 var(--tt-edge);
    color: var(--tt-ink);
}

@supports (corner-shape: bevel) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .planner-day-details-card :is(.planner-day-facts, .planner-day-rows > li) {
        border-radius: 8px;
        corner-shape: bevel;
    }
}