/* Spec 155: the frame of the demo in the tabletop look - the side menu as tabs in two groups with the dice
   in it, the wordmark in the heading face, the pawn as "you are here" and game covers standing as boxes. Loaded
   after tabletop-controls.css only with the tabletop look. */

/* 1. Menu tabs: square links that reach the menu's edge; the open one opens into the page. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .nav-scrollable .nav-item {
    padding-right: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .nav-scrollable .nav-item .nav-link {
    border-radius: 0;
    border: 1px solid transparent;
    border-right: 0;
    margin-right: -1px;
    background: transparent;
    box-shadow: none;
    color: var(--tt-ink);
    width: calc(100% + 1px);
    transform: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .nav-scrollable .nav-item .nav-link:hover {
    background: transparent;
    color: var(--tt-accent);
    transform: none;
    box-shadow: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .nav-scrollable .nav-item a.nav-link.active {
    background: var(--tt-page);
    border-color: var(--tt-line);
    color: var(--tt-ink);
    box-shadow: inset 3px 0 0 var(--tt-accent);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .nav-scrollable .nav-item a.nav-link.active .nav-icon {
    color: var(--tt-accent);
}

/* 2. Groups: the menu reads dashboard, Games, Meetings, account, favourites - in the markup order of both
   menus (spec 175); the labels come from data-nav-group. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .nav-scrollable nav {
    display: flex;
    flex-direction: column;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .nav-scrollable [data-nav-group]::before {
    content: attr(data-nav-group);
    display: block;
    padding: 14px 0 4px 10px;
    font-family: var(--tt-font-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tt-muted);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .nav-wrapper.nav-collapsed [data-nav-group]::before {
    content: none;
}

/* The dice item is a button that reads like the links around it. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .nav-dice-link {
    display: flex;
    align-items: center;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .nav-dice-link[aria-expanded="true"] {
    color: var(--tt-accent);
}

html.tabletop:not(#tabletop) .dice-fab {
    display: none;
}

/* 3. The wordmark: the mark beside "Board" and "Conquest" in the heading face and a bar (spec 283: no tagline). */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .navbar-brand .navbar-brand-logo-mark {
    display: inline-block;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: none;
    min-width: 0;
    flex: 0 1 auto;
}

/* Spec 159 rule 1: the head row never wraps, so the collapse button stays beside the logo. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .top-row .container-fluid {
    flex-wrap: nowrap;
    gap: 6px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .top-row .sidebar-toggle-btn {
    flex: none;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-wordmark {
    display: inline-grid;
    gap: 1px;
    line-height: 1;
    color: var(--tt-ink);
    height: auto;
    max-width: none;
}

/* Own class, not .navbar-brand-logo-wordmark: decorations.css swaps that one for an image with content: url(). */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .nav-wrapper.nav-collapsed .tt-wordmark {
    display: none;
}

/* On phones the collapsed menu is the top bar, which shows the whole logo. */
@media (max-width: 768px) {
    html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .nav-wrapper.nav-collapsed .tt-wordmark {
        display: inline-grid;
    }
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-wordmark-name {
    font-family: var(--tt-font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--tt-ink);
    white-space: nowrap;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-wordmark-name span {
    color: var(--tt-print);
}

/* Spec 284: a cardboard bar the length of the name, its ends cut to a point, as under the home page's big wordmark. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .tt-wordmark-bar {
    display: block;
    width: 100%;
    height: 4px;
    margin-top: 3px;
    background: var(--tt-print);
    clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 50%, calc(100% - 3px) 100%, 3px 100%, 0 50%);
}

/* 4. Language: the codes only, no flag emoji. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .lang-btn {
    font-size: 0;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .lang-btn span {
    font-size: 13px;
}
/* 5. The pawn marks the one you are on: the drawn game and today. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-game-draw-pointer {
    width: 22px;
    height: 22px;
    top: -6px;
    border: 0;
    background: var(--tt-accent);
    filter: none;
    -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) .planner-day-today-pill {
    width: 14px;
    height: 14px;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--tt-accent);
    font-size: 0;
    -webkit-mask: var(--tt-pawn) center / contain no-repeat;
    mask: var(--tt-pawn) center / contain no-repeat;
}

/* Spec 159 rule 7: the draw result is plain text with the pawn before it, not a pill. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-game-draw-result {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: var(--tt-muted);
    gap: 8px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-game-draw-result::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: none;
    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) .home-game-draw-result strong {
    color: var(--tt-muted);
    font-weight: 600;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-game-draw-result span {
    font-family: var(--tt-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--tt-ink);
}

/* The Pro mark in the menu: the gold token of spec 168. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .nav-premium-crown {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 0;
    clip-path: none;
    box-shadow: none;
    background: var(--tt-pro) center / contain no-repeat;
}

/* Spec 254 rule 4: the club crown - the same token in turquoise, also in buttons, labels and headings. */
html.tabletop:not(#tabletop) :is(.page, body) .nav-premium-crown.nav-club-crown {
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    border: 0;
    border-radius: 0;
    clip-path: none;
    box-shadow: none;
    background: var(--tt-club) center / contain no-repeat;
}

html.tabletop:not(#tabletop) .nav-club-crown svg {
    display: none;
}

/* 6. Game boxes as in the library (spec 230 rule 1): a lighter lid edge on top and a darker side on the right, both
   going up, smaller than the library's. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-game-draw-item {
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--tt-box);
}

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

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

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

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) :is(.planner-overview-top-thumb, .home-tonight-pick img, .nav-fav-thumb,
    .nav-favorite-icon-img) {
    border-radius: 0;
    /* Spec 230 rule 4: the side goes up and right, as the library's boxes. */
    box-shadow: 1px -1px 0 var(--tt-box), 2px -2px 0 var(--tt-box), 3px -3px 0 var(--tt-box), 4px -4px 0 var(--tt-edge);
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-game-draw-title-overlay {
    background: linear-gradient(transparent, rgba(11, 6, 3, 0.78));
    border-radius: 0;
}

/* Spec 163 rule 1: the theme button and the languages stand centred with the same space on both sides. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .nav-footer-bottom-row {
    justify-content: center;
    column-gap: 10px;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .nav-footer-bottom-row > .nav-theme-btn {
    margin: 0;
}

/* Spec 165 rule 1: the language strip is as tall as the theme button with its edge. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .nav-footer-bottom-row {
    align-items: center;
}

html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .nav-footer-bottom-row .lang-btn {
    display: inline-flex;
    align-items: center;
    min-height: 35px;
}

/* Spec 243 rule 4: in the light menu the footer's buttons sit on the menu's own colour, not on a lighter panel. */
html.tabletop:not(#tabletop) .page.theme-light .nav-footer-bottom-row {
    background: transparent;
    border-color: transparent;
}

/* Spec 166 rule 4: a bigger mark beside the wordmark. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .navbar-brand .navbar-brand-logo-mark {
    width: 40px;
    height: 40px;
    flex: none;
}

/* Spec 176 rule 5, spec 230 rule 2: the drawn game is outlined in the accent around the whole box, lid and side
   included, as the ranking's hover. */
html.tabletop:not(#tabletop) .page:is(.theme-dark, .theme-light) .home-game-draw-item.is-winner {
    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));
}

/* Spec 181 rule 1: the frame of the pages without the side menu takes the theme but not the menu's row. */
html.tabletop .page.page-standalone {
    display: block;
    min-height: 100vh;
    background: var(--tt-page);
}