html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Laptop legibility: everything is rem-based, so this scales the whole app.
   The bidding context window gets a further boost via --bidding-font-scale
   below (effective sizes multiply). */
html {
    font-size: 125%;

    /* Reserve the vertical scrollbar's gutter permanently (Rick, 2026-08-02).
       Practice grows taller the moment "Bid recorded" appears; the scrollbar then
       materialises, takes ~15px of width away from the page, and everything jumps
       sideways. Reserving the gutter up front means the width never changes, so
       appearing content can no longer shift the layout horizontally. */
    scrollbar-gutter: stable;
}

/* SHORT WINDOWS GET SLIGHTLY SMALLER TYPE (Rick, 2026-10-18: "can we manage the display so that it
   always fits within the window?", option a). At 125% the student's practice screen, after a
   wrong bid on a three-row auction, runs to about 770px; a laptop window is often 650-730px tall.
   Everything is rem-based, so this one number shrinks the whole page together, on every page
   and view. Windows 800px tall or more keep the full 125%: a full-screen iPad in landscape is
   820, but with Safari's bars showing it is about 740 and takes the smaller size. Measured
   2026-10-18 at 1366x657, 1280x690, 1536x730 and 1180x740: every hand fit. */
@media (max-height: 799.98px) {
    html {
        font-size: 106.25%;
    }
}

/* A second step for the shortest windows: a 1366x768 laptop screen leaves about 657px, and the
   hand-strength drill (three boxes, their answers and the explanation) ran 31px over there. */
@media (max-height: 679.98px) {
    html {
        font-size: 100%;
    }
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- Bidding context window (Practice page bridge table) ----
   One knob for the auction/hand text scale, one variable per suit for the
   4-colour glyph palette (spades black, hearts red, diamonds blue, clubs
   green). The .suit-* classes are applied both from SeatBox markup and from
   MarkupString spans in the auction table (which never get Blazor's scoped
   CSS attribute), so they live here rather than in a scoped stylesheet. */
.bridge-table {
    /* On top of the 125% html base — net 1.5x the pre-change size. */
    --bidding-font-scale: 1.2;
    --suit-color-spades: #1b1b1b;
    --suit-color-hearts: #c8102e;
    --suit-color-diamonds: #0a58ca;
    --suit-color-clubs: #1a7a2a;
}

.bridge-table .suit-spades   { color: var(--suit-color-spades); }
.bridge-table .suit-hearts   { color: var(--suit-color-hearts); }
.bridge-table .suit-diamonds { color: var(--suit-color-diamonds); }
.bridge-table .suit-clubs    { color: var(--suit-color-clubs); }