/* ══════════════════════════════════════════════════════════════════════════
   site-polish.css — the shell, measured against chess.com: a plain menu, the
   account on the right, and for a guest sign-in instead of an empty profile.
   Loaded last, so it can stay short.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
    :root {
        /* 93px of chrome took a tenth of a laptop screen from the board. */
        --tp-header-height: 72px;
        --tp-header-nav-height: 48px;
        --tp-header-nav-item-height: 40px;
        --tp-header-active-pill-height: 40px;
    }
}

/* The menu is text on the bar, not a box inside a box. */
html[data-theme] #tp-app-shell.tp-shell .tp-desktop-nav {
    justify-self: start;
    border-color: transparent;
    background: none;
}
html[data-theme] #tp-app-shell.tp-shell .tp-desktop-nav__item--play {
    color: var(--tp-color-primary-hover);
    font-weight: 700;
}
html[data-theme] #tp-app-shell.tp-shell .tp-desktop-nav__item > .fa-play { font-size: 12px; }

/* Plan button, menu and account need the bar's whole width; the online counter is the first to give way. */
@media (min-width: 1024px) {
    html[data-theme] #tp-app-shell.tp-shell .tp-topbar__inner { width: min(100%, 1400px); }
}
@media (max-width: 1399px) {
    .tp-topbar__account .tp-online-status { display: none; }
}

/* PlayOK: a link is all this tab asks for, so the analysis presets step aside. */
#analysis-setup[data-mode="playok"] :is(.tp-analysis-mode-select, .tp-analysis-run-row) { display: none; }
/* On a phone the board would push the link field off the screen. */
@media (max-width: 999px) {
    #screen-analysis:has(#analysis-setup[data-mode="playok"]) .tp-analysis-viewer-card { display: none; }
}
#analysis-playok-panel { display: grid; gap: 10px; }
#analysis-playok-panel[hidden] { display: none; }
#analysis-playok-panel h2 { margin: 0; font-size: 17px; line-height: 1.3; }
#analysis-playok-panel p { margin: 0; color: var(--tp-color-text-muted); font-size: 14px; line-height: 1.45; }
#analysis-playok-panel p.tp-analysis-error { color: var(--tp-color-danger, #b3261e); }
#playok-link {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--tp-color-border-strong, var(--tp-color-border));
    border-radius: 10px;
    background: var(--tp-color-surface);
    color: var(--tp-color-text);
    font: inherit;
    font-size: 16px;
}
#playok-link:focus-visible { outline: 2px solid var(--tp-color-focus); outline-offset: 1px; }
#playok-run { width: 100%; }

/* ── Games database ────────────────────────────────────────────────────────
   Its board takes the width on offer. A column beside it starves the board on a
   tablet, and a width taken from the window's height shrinks it on a laptop. */
@media (max-width: 767px) {
    html[data-theme] #screen-database .tp-opening-viewer { margin-inline: 0 !important; }
}
@media (max-width: 1099px) {
    html[data-theme] body:not(.game-active) #screen-database .tp-opening-layout { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (min-width: 1100px) {
    html[data-theme] body:not(.game-active) #screen-database { --db-board-h: max(calc(100vh - 219px), 480px); }
    html[data-theme] body:not(.game-active) #screen-database .tp-opening-layout {
        grid-template-columns: minmax(0, calc(var(--db-board-h) * 1.785)) minmax(300px, 340px) !important;
    }
}
.tp-openings-locked { display: grid; justify-items: start; gap: 10px; padding: 8px 4px; }
.tp-openings-locked[hidden] { display: none; }
.tp-openings-locked > i { color: var(--tp-color-primary); font-size: 20px; }
.tp-openings-locked h2 { margin: 0; font-size: 18px; line-height: 1.3; }
.tp-openings-locked p { margin: 0; color: var(--tp-color-text-muted); font-size: 14.5px; line-height: 1.45; }
.tp-openings-locked button { width: 100%; margin-top: 4px; }
#screen-database[data-openings-locked="true"] .tp-opening-stats > :not(#openings-locked),
#screen-database[data-openings-locked="true"] .tp-openings-path { display: none !important; }
#screen-database[data-openings-locked="true"] #opening-material-board { pointer-events: none; }

/* ── Guest: sign-in instead of a bell, a counter and a nameless "Player" ──── */
.tp-guest-auth { display: none; align-items: center; gap: 8px; }
.tp-guest-auth a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.tp-guest-auth a:focus-visible { outline: 2px solid var(--tp-color-focus); outline-offset: 2px; }
.tp-guest-auth__login { color: var(--tp-color-text); }
.tp-guest-auth__login:hover { background: color-mix(in srgb, var(--tp-color-text) 7%, transparent); }
html[data-theme] .tp-topbar a.tp-guest-auth__register { background: var(--tp-color-primary); color: #fff !important; }
html[data-theme] .tp-topbar a.tp-guest-auth__register:hover { background: var(--tp-color-primary-hover); }

.tp-topbar__account:has(.tp-online-status[data-online-status="guest"]) .tp-guest-auth { display: inline-flex; }
.tp-topbar__account:has(.tp-online-status[data-online-status="guest"]) :is(.tp-notification-wrap, .tp-online-status, .tp-profile-menu-wrap) { display: none; }
/* A guest has no name or rating yet: the page starts with the game. */
#screen-home .tp-dash-id:has([data-online-status="guest"]) { display: none; }

@media (max-width: 767px) {
    .tp-topbar__account { gap: 6px; }
    .tp-guest-auth { gap: 4px; }
    .tp-guest-auth a { min-height: 38px; padding: 0 12px; font-size: 14px; }
}

/* The review has its own back button: on a phone the board starts at the top. */
@media (max-width: 999px) {
    body.review-active { --tp-header-height: 0px; }
    body.review-active .tp-topbar { display: none; }
}