/* The public website: Web / Site Nav, Web / Site Footer, and the pages between them (05 · Website). */

.site { min-height: 100vh; display: flex; flex-direction: column; }
.site__main { flex: 1; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 880px; }

/* Web / Site Nav — as the Top Bar: 68px, bg/sidebar, a subtle line beneath. */
.site-nav {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg-sidebar) 78%, transparent);
    backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--border-subtle);
}
.site-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }
.site-nav__links { display: flex; gap: 28px; }
.site-nav__link { font-weight: 500; font-size: 13px; color: var(--text-secondary); }
.site-nav__link:hover { color: var(--text-primary); text-decoration: none; }
.site-nav__link.active { color: var(--text-primary); }
.site-nav__actions { display: flex; gap: 8px; align-items: center; }
.site-nav__actions form { margin: 0; }

/* Web / Site Footer. */
.site-footer { background: var(--bg-sidebar); border-top: 1px solid var(--border-subtle); padding: 48px 0 32px; }
.site-footer__top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.site-footer__columns { display: flex; gap: 64px; }
.site-footer__column { display: flex; flex-direction: column; gap: 8px; }
.site-footer__column a { color: var(--text-secondary); font-weight: 500; font-size: 12px; }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.site-footer__bottom a, .site-footer__bottom span { color: var(--text-muted); font-weight: 500; font-size: 11px; }
.languages { display: flex; gap: 12px; }
.languages a.active { color: var(--text-primary); }

/* Sections of a page. */
.section { padding-top: 56px; padding-bottom: 56px; }
.section--tight { padding-top: 40px; padding-bottom: 40px; }
.section__heading { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.centered { text-align: center; align-items: center; }


.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.points { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 4px 0 0; list-style: none; font-weight: 500; font-size: 12px; }
.points li { display: flex; align-items: center; gap: 10px; }
.points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-primary); }
.marker { display: inline-flex; padding: 3px 8px; border-radius: var(--radius-sm); font: 600 11px "Inter", sans-serif; color: var(--text-inverse); }
.marker--fish { background: var(--marker-fish); }
.marker--reg { background: var(--marker-reg); }
.marker--whale { background: var(--marker-whale); }


/* Pricing. */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; max-width: 880px; margin: 0 auto; }
.tier { padding: 20px; gap: 16px; }
.tier__price { display: flex; align-items: baseline; gap: 6px; }
.tier__amount { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; }
.includes { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; list-style: none; font-weight: 500; font-size: 12px; }
.includes li { display: flex; align-items: center; gap: 10px; }
.includes li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-primary); flex: none; }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; }
.yes { color: var(--accent-primary); font-weight: 600; }
.no { color: var(--text-muted); }
details.question { padding: 14px 16px; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-subtle); }
details.question summary { cursor: pointer; font-weight: 600; font-size: 13px; list-style: none; display: flex; justify-content: space-between; }
details.question summary::-webkit-details-marker { display: none; }
details.question p { margin-top: 8px; font-size: 12px; color: var(--text-secondary); font-weight: 500; line-height: 1.6; }

/* Supported sites. */
.sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.site-card__mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--accent-dim); color: var(--accent-primary); font-weight: 600; font-size: 13px; flex: none; }
.site-card__mark--soon { background: var(--bg-raised); color: var(--text-muted); }
.capabilities { border-radius: var(--radius-md); background: var(--bg-raised); overflow: hidden; }
.capability { display: flex; justify-content: space-between; padding: 9px 12px; font-size: 12px; font-weight: 500; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }
.capability:last-child { border-bottom: 0; }
.capability b { font-size: 11px; font-weight: 600; }

/* The market: packs on the shelf, a pack's page, and what a pack carries. */
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.pack-card { padding: 20px; gap: 14px; color: var(--text-primary); text-decoration: none; }
.pack-card:hover { text-decoration: none; border-color: var(--border-strong); }
.pack-card__description { font-size: 12px; font-weight: 500; line-height: 1.6; color: var(--text-secondary); margin: 0; flex: 1; }
.pack-card__price { font-size: 22px; }
.pack-picture { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); background: var(--bg-raised); }
.pack-picture--page { max-width: 720px; }
.pack-picture--preview { max-width: 360px; }
.pack-picture--thumb { width: 80px; margin-bottom: 6px; }
.carries { display: flex; gap: 24px; }
.carries__figure { display: flex; flex-direction: column; gap: 2px; }
.carries__figure b { font-size: 17px; font-weight: 600; }

.docs-search { width: 600px; max-width: 100%; height: 44px; border-color: var(--border-strong); border-radius: var(--radius-md); }
.topic-list { display: flex; flex-direction: column; border-radius: var(--radius-md); background: var(--bg-raised); overflow: hidden; }
.topic-list a { display: flex; justify-content: space-between; padding: 9px 12px; font-weight: 500; font-size: 12px; color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); }
.topic-list a:last-child { border-bottom: 0; }
.docs { display: grid; grid-template-columns: 264px minmax(0, 1fr) 232px; min-height: calc(100vh - 68px); }
.docs__tree { background: var(--bg-sidebar); border-right: 1px solid var(--border-subtle); padding: 14px 12px; display: flex; flex-direction: column; gap: 18px; }
.docs__article { padding: 32px 56px 64px; display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.docs__contents { padding: 36px 24px; display: flex; flex-direction: column; gap: 10px; }
.docs__contents a { padding-left: 10px; border-left: 2px solid var(--border-subtle); color: var(--text-secondary); font-weight: 500; font-size: 12px; }
.breadcrumb { display: flex; gap: 6px; font-weight: 500; font-size: 11px; color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); font-weight: 500; }
.step { display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.step__number { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--bg-raised); border: 1px solid var(--border-strong); font-weight: 600; font-size: 12px; }
.step h2 { font-size: 17px; }
.part-heading { font-size: 20px; padding-top: 8px; }
.callout { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--accent-dim); font-weight: 500; font-size: 12px; line-height: 1.6; }
.callout--warning { background: var(--bg-raised); border: 1px solid var(--status-warn); }
.callout--warning .icon { color: var(--status-warn); }
.picture { padding: 8px; border-radius: var(--radius-lg); background: var(--bg-raised); border: 1px solid var(--border-strong); }
.picture img { display: block; width: 100%; border-radius: var(--radius-md); }
.part-heading--small { font-size: 15px; }
.callout__words p { margin: 0; }
.callout__words p + p { margin-top: 6px; }

/* What Markdown draws that has no shape of the website's own: lists, tables, code and quotations. */
.markdown { display: flex; flex-direction: column; gap: 16px; }
.markdown > ul, .markdown > ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 13px; line-height: 1.7; }
.markdown code { font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--bg-raised); border: 1px solid var(--border-subtle); }
.markdown pre { margin: 0; padding: 12px 14px; border-radius: var(--radius-md); background: var(--bg-raised); border: 1px solid var(--border-strong); overflow-x: auto; }
.markdown pre code { padding: 0; border: 0; background: none; }
.markdown > blockquote { margin: 0; padding: 4px 14px; border-left: 3px solid var(--border-strong); color: var(--text-secondary); }
.markdown table { border-collapse: collapse; font-size: 12px; font-weight: 500; }
.markdown th, .markdown td { padding: 7px 12px; border: 1px solid var(--border-subtle); text-align: left; }
.markdown th { background: var(--bg-raised); font-weight: 600; }
.markdown hr { border: 0; border-top: 1px solid var(--border-subtle); width: 100%; }

/* Log in and register. */
.sign-in { display: grid; grid-template-columns: 1fr 620px; min-height: 100vh; }
.sign-in__form { display: flex; flex-direction: column; justify-content: space-between; padding: 24px 120px; }
.sign-in__felt { background: var(--bg-felt); padding: 56px; display: flex; flex-direction: column; justify-content: center; gap: 24px; color: #e9eef5; }
.sign-in__felt .secondary { color: #9aa7b6; }
.hud-panels { display: flex; gap: 16px; }
.hud-panel { width: 160px; padding: 8px 10px; border-radius: 8px; background: #161c24; border: 1px solid #31404f; border-left: 3px solid var(--marker-fish); display: flex; flex-direction: column; gap: 6px; color: #e9eef5; }
.hud-panel--reg { border-left-color: var(--marker-reg); }
.hud-panel--whale { border-left-color: var(--marker-whale); }
.hud-panel__figures { display: flex; justify-content: space-between; }
.hud-panel__figures b { display: block; font-size: 13px; font-weight: 600; }
.hud-panel__figures span { font-size: 8px; font-weight: 600; color: #63707f; letter-spacing: 0.06em; }

/* A customer's account. */
.account { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; padding: 32px 0 72px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.key { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 12px; border-radius: 9px; background: var(--bg-raised); border: 1px solid var(--border-strong); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; }

/*
    What Blazor shows when a circuit falls over. It is hidden until that happens: Blazor's own script
    sets its display to block. With no rule saying so it stood at the foot of every page on the
    website, admin and public alike, telling every reader something had gone wrong when nothing had.
    Found 2026-09-22 while photographing the releases screen.
*/
#blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: 12px 20px; background: #b3261e; color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35); }
#blazor-error-ui .reload { color: #fff; text-decoration: underline; margin-left: 8px; }

@media (max-width: 1100px) {
    .grid-3 { grid-template-columns: 1fr 1fr; }
    .sign-in, .account { grid-template-columns: 1fr; }
    .docs { grid-template-columns: 1fr; }
    .docs__tree, .docs__contents { display: none; }
    .sign-in__felt { display: none; }
    .sign-in__form { padding: 24px; }
}

/* Tablets and phones: the nav's links take a row of their own that scrolls sideways, and the gutter narrows. */
@media (max-width: 900px) {
    .site-nav__inner { flex-wrap: wrap; height: auto; padding-top: 12px; gap: 10px 16px; }
    .site-nav__links {
        order: 3; width: 100%; gap: 24px; padding: 2px 0 12px; overflow-x: auto; scrollbar-width: none;
        mask-image: linear-gradient(90deg, #000 85%, transparent);
    }
    .site-nav__links::-webkit-scrollbar { display: none; }
    .site-nav__link { white-space: nowrap; }
    .site-nav__actions { flex-wrap: wrap; justify-content: flex-end; }
    .site-footer__columns { flex-wrap: wrap; gap: 32px 48px; }
}

@media (max-width: 640px) {
    .wrap { padding: 0 16px; }
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* The support chat (Components/Shared/TheSupportChat.razor): the support service's widget, painted in
   the website's own colors so it reads as part of the page. Its variables are the widget's README's. */
pokerlens-chat {
    --pokerlens-chat-accent: var(--accent-primary);
    --pokerlens-chat-on-accent: var(--text-inverse);
    --pokerlens-chat-surface: var(--bg-surface);
    --pokerlens-chat-text: var(--text-primary);
    --pokerlens-chat-muted: var(--text-secondary);
    --pokerlens-chat-border: var(--border-strong);
    --pokerlens-chat-bubble: var(--bg-raised);
    --pokerlens-chat-error: var(--status-loss);
    --pokerlens-chat-radius: var(--radius-lg);
    --pokerlens-chat-shadow: var(--shadow-menu);
    --pokerlens-chat-font: inherit;
    --pokerlens-chat-offset: var(--space-4);
    /* Above the site nav, which sticks at 50. */
    --pokerlens-chat-z-index: 60;
}