/* Spec 151: the tabletop look, piloted on the demo behind "?look=tabletop". App.razor puts the class on
   <html> only then, and every selector here starts with html.tabletop, so nothing leaks into other pages.
   This spec sets type, colour tokens and the page and menu surfaces; shapes follow in the next specs. */

/* 1. Tokens. Dark is the default of the demo, a lighter brown since spec 159; light is grey cardboard. */
html.tabletop {
    --tt-page: #2a1c13;
    --tt-side: #22170f;
    --tt-surface: #312117;
    --tt-field: #36251a;
    --tt-area: #3b291c;
    --tt-line: #5c412c;
    --tt-rule: #e8ae80;
    --tt-ink: #fbf4ea;
    --tt-muted: #d8c6b2;
    --tt-accent: #ffa25a;
    --tt-accent-soft: rgba(243, 154, 60, 0.15);
    --tt-accent-from: #e8703f;
    --tt-accent-to: #f5a552;
    --tt-on-accent: #1f1000;
    --tt-edge: #140c07;
    --tt-edge-strong: #7c300a;
    --tt-ok: #6fd18e;
    --tt-danger: #ff7b72;
    --tt-danger-edge: #5c1010;
    --tt-danger-fill: #c43b31;
    --tt-print: #f2924a;
    --tt-box: #6f4a2c;
    --tt-pawn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c1.9 0 3.3 1.4 3.3 3.2 0 .9-.3 1.6-.8 2.2 2.7.6 6 1.8 6 3.6 0 1.1-1.5 1.7-3.6 1.5l2.6 6.9c.2.5-.2 1.1-.8 1.1h-3.7L12 16.6 9 21h-3.7c-.6 0-1-.6-.8-1.1l2.6-6.9c-2.1.2-3.6-.4-3.6-1.5 0-1.8 3.3-3 6-3.6-.5-.6-.8-1.3-.8-2.2 0-1.8 1.4-3.2 3.3-3.2z'/%3E%3C/svg%3E");
    --tt-pro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%239a6516' d='M7 1.5h10L22.5 7v11L17 23.5H7L1.5 18V7z'/%3E%3Cpath fill='%23f2b84b' d='M7 .5h10L22.5 6v11L17 22.5H7L1.5 17V6z'/%3E%3Cpath fill='%233a2410' d='M5.5 9.5 9 12l3-5.5 3 5.5 3.5-2.5-1.3 7H6.8z'/%3E%3Crect fill='%233a2410' x='6.8' y='17.6' width='10.4' height='1.6'/%3E%3Ccircle fill='%233a2410' cx='5.3' cy='8.7' r='1.1'/%3E%3Ccircle fill='%233a2410' cx='12' cy='5.6' r='1.1'/%3E%3Ccircle fill='%233a2410' cx='18.7' cy='8.7' r='1.1'/%3E%3C/svg%3E");
    /* Spec 254 rule 4: the club crown, the Pro token in turquoise. */
    --tt-club: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230e6b62' d='M7 1.5h10L22.5 7v11L17 23.5H7L1.5 18V7z'/%3E%3Cpath fill='%2343d1c0' d='M7 .5h10L22.5 6v11L17 22.5H7L1.5 17V6z'/%3E%3Cpath fill='%2308302b' d='M5.5 9.5 9 12l3-5.5 3 5.5 3.5-2.5-1.3 7H6.8z'/%3E%3Crect fill='%2308302b' x='6.8' y='17.6' width='10.4' height='1.6'/%3E%3Ccircle fill='%2308302b' cx='5.3' cy='8.7' r='1.1'/%3E%3Ccircle fill='%2308302b' cx='12' cy='5.6' r='1.1'/%3E%3Ccircle fill='%2308302b' cx='18.7' cy='8.7' r='1.1'/%3E%3C/svg%3E");
    --tt-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    --tt-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='square' d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
    --tt-font-display: "Kreon", Georgia, "Times New Roman", serif;
    --tt-font-text: "Cabin", "Segoe UI", system-ui, -apple-system, sans-serif;
}

html.tabletop[data-theme="light"] {
    --tt-page: #eeebe5;
    --tt-side: #e5e0d6;
    --tt-surface: #f6f4ef;
    --tt-field: #fbfaf7;
    --tt-area: #f6f4ef;
    --tt-line: #d8d0c2;
    --tt-rule: #e09a62;
    --tt-ink: #1a1612;
    --tt-muted: #5d544a;
    --tt-accent: #b9480c;
    --tt-accent-soft: #fbe3cf;
    --tt-accent-from: #e46b3d;
    --tt-accent-to: #f2a24f;
    --tt-on-accent: #1f1000;
    --tt-edge: #cbbfab;
    --tt-edge-strong: #943a0b;
    --tt-ok: #2e7d46;
    --tt-danger: #b42323;
    --tt-danger-edge: #7a1414;
    --tt-danger-fill: #b42323;
    --tt-print: #e8703f;
    --tt-box: #b3a184;
    --tt-club: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230b5a52' d='M7 1.5h10L22.5 7v11L17 23.5H7L1.5 18V7z'/%3E%3Cpath fill='%2322a898' d='M7 .5h10L22.5 6v11L17 22.5H7L1.5 17V6z'/%3E%3Cpath fill='%23062723' d='M5.5 9.5 9 12l3-5.5 3 5.5 3.5-2.5-1.3 7H6.8z'/%3E%3Crect fill='%23062723' x='6.8' y='17.6' width='10.4' height='1.6'/%3E%3Ccircle fill='%23062723' cx='5.3' cy='8.7' r='1.1'/%3E%3Ccircle fill='%23062723' cx='12' cy='5.6' r='1.1'/%3E%3Ccircle fill='%23062723' cx='18.7' cy='8.7' r='1.1'/%3E%3C/svg%3E");
    --tt-pawn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c1.9 0 3.3 1.4 3.3 3.2 0 .9-.3 1.6-.8 2.2 2.7.6 6 1.8 6 3.6 0 1.1-1.5 1.7-3.6 1.5l2.6 6.9c.2.5-.2 1.1-.8 1.1h-3.7L12 16.6 9 21h-3.7c-.6 0-1-.6-.8-1.1l2.6-6.9c-2.1.2-3.6-.4-3.6-1.5 0-1.8 3.3-3 6-3.6-.5-.6-.8-1.3-.8-2.2 0-1.8 1.4-3.2 3.3-3.2z'/%3E%3C/svg%3E");
    --tt-font-display: "Kreon", Georgia, "Times New Roman", serif;
    --tt-font-text: "Cabin", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* 2. The app's own tokens take the tabletop values inside the scope. */
html.tabletop {
    --font-sans: var(--tt-font-text);
    --bs-body-font-family: var(--tt-font-text);
    --on-accent: var(--tt-on-accent);
    --focus-ring: #943a0b;
    --focus-ring-dark: #ffa25a;
}

html.tabletop .page.theme-dark,
html.tabletop .page.theme-light {
    --ui-accent: var(--tt-accent);
    --ui-accent-soft: var(--tt-accent-soft);
    --ui-text: var(--tt-ink);
    --ui-danger: var(--tt-danger);
}

html.tabletop .page.theme-light {
    --ui-page: var(--tt-page);
    --ui-card: var(--tt-field);
    --ui-card-border: var(--tt-line);
    --ui-inset: var(--tt-surface);
    --ui-inset-border: var(--tt-line);
}

/* 3. Type: Cabin for text (Source Sans 3 until spec 164), the heading face (Kreon since spec 159) for headings. */
html.tabletop,
html.tabletop body {
    font-family: var(--tt-font-text);
}

html.tabletop :is(h1, h2, h3) {
    font-family: var(--tt-font-display);
    font-weight: 700;
    letter-spacing: -0.005em;
}

/* The header title of each screen, and nothing else, carries the offset print. */
html.tabletop .page :is(.home-app-header-greeting, .game-library-header h2, .news-title, .ranking-page-title) {
    color: var(--tt-ink);
    text-shadow: 0.06em 0.06em 0 var(--tt-print);
}

/* 4. Surfaces: the page behind the content and the side menu. */
html.tabletop,
html.tabletop body,
html.tabletop .page main {
    background: var(--tt-page);
}

html.tabletop .page .sidebar {
    background-image: none;
    background-color: var(--tt-side);
    border-right: 1px solid var(--tt-line);
}

html.tabletop .page .top-row {
    background: var(--tt-side);
    border-bottom: 1px solid var(--tt-line);
}

/* demo.css draws the banner for the dark theme only; the light pilot needs dark text on it. */
html.tabletop .page.theme-light .demo-banner {
    background: var(--tt-surface);
    border-color: var(--tt-line);
    color: var(--tt-ink);
}

/* Spec 163: no capitals in the tabletop look; labels keep the case they are written in. The :not() names the
   wordmark tagline removed in spec 283 and only keeps this rule's weight unchanged. */
html.tabletop:not(#tabletop) .page :not(.tt-wordmark-tag) {
    text-transform: none;
    letter-spacing: normal;
}

/* Spec 171 rule 1: no rounding in the tabletop look but the avatars. As specific as the pieces, so their
   bevels and the board's rules still win and the app's rounded rules lose. */
html.tabletop:not(#tabletop) .page :where(*:not(.friend-avatar, .friend-photo-picker-label, .friend-photo-picker-badge)) {
    border-radius: 0;
}

/* Spec 173: an on/off checkbox is the square switch of the play dialog - a track with a knob that slides
   and turns the accent when on. The switch's own hidden checkbox and the password marks are left alone. */
html.tabletop:not(#tabletop) input[type="checkbox"]:not(.planner-toggle-checkbox):not(.password-rule-item > input) {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    flex: none;
    width: 34px;
    height: 20px;
    margin: 0;
    padding: 0 3px;
    vertical-align: middle;
    border: 0;
    border-radius: 0;
    background: var(--tt-line);
    cursor: pointer;
    transition: background 0.15s ease;
}

html.tabletop:not(#tabletop) input[type="checkbox"]:not(.planner-toggle-checkbox):not(.password-rule-item > input)::after {
    content: "";
    width: 14px;
    height: 14px;
    background: var(--tt-ink);
    transition: transform 0.15s ease;
}

html.tabletop:not(#tabletop) input[type="checkbox"]:not(.planner-toggle-checkbox):not(.password-rule-item > input):checked {
    background: var(--tt-accent);
}

html.tabletop:not(#tabletop) input[type="checkbox"]:not(.planner-toggle-checkbox):not(.password-rule-item > input):checked::after {
    background: var(--tt-on-accent);
    transform: translateX(14px);
}

/* Spec 172 rule 3: the password marks report a rule met - a square, filled with the accent and a check. */
html.tabletop:not(#tabletop) .password-rule-item > input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    vertical-align: middle;
    border: 2px solid var(--tt-muted);
    border-radius: 0;
    background: var(--tt-field);
}

html.tabletop:not(#tabletop) .password-rule-item > input[type="checkbox"]:checked {
    background: var(--tt-accent);
    border-color: var(--tt-accent);
}

html.tabletop:not(#tabletop) .password-rule-item > input[type="checkbox"]:checked::after {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--tt-on-accent);
    -webkit-mask: var(--tt-check) center / contain no-repeat;
    mask: var(--tt-check) center / contain no-repeat;
}

html.tabletop:not(#tabletop) input[type="checkbox"]:not(.planner-toggle-checkbox):focus-visible {
    outline: 2px solid var(--tt-accent);
    outline-offset: 2px;
}

html.tabletop:not(#tabletop) input[type="checkbox"]:not(.planner-toggle-checkbox):disabled {
    opacity: 0.6;
    cursor: default;
}