/* The theme picker, the splash, the welcome screen, the connection shell, the error bar and the development panel.
   index.html loads the stylesheets in a fixed order (Game/docs/ui-style.md, "Stylesheets"). */

/* ---------------------------------------------------------------------------
   The theme picker at the plain URL (web client spec §3, "Theme picker"). The page takes the default theme's colours,
   and each card carries its own theme's data-theme and --theme-* properties, so each card shows its game in that game's
   colours: a poster with the splash art, the logo, the tagline and a Play button.
   --------------------------------------------------------------------------- */
.rj-picker {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.rj-picker__header {
    text-align: center;
}

.rj-picker__title {
    margin: 0;
    color: #ffffff;
    font-family: var(--ui-font-display);
    font-size: clamp(2rem, 11cqw, 2.6rem);
    font-weight: 400;
    line-height: 1.05;
    -webkit-text-stroke: 0.16em var(--ui-outline);
    paint-order: stroke fill;
    text-shadow: 0 0.09em 0 var(--ui-outline), 0 0.2em 0.4rem rgba(0, 0, 0, 0.35);
}

.rj-picker__intro {
    margin: 0.45rem 0 0;
    font-weight: 800;
    color: var(--theme-text, var(--ink));
}

.rj-picker__cards {
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rj-theme-card {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    box-sizing: border-box;
    min-height: 10rem;
    padding: 0.65rem 0.7rem 0.55rem;
    overflow: hidden;
    border: 3px solid var(--ui-panel-border);
    border-radius: var(--ui-radius-panel);
    background: var(--theme-background, var(--ground));
    box-shadow:
        0 0 0 2.5px var(--ui-outline),
        0 6px 0 2.5px color-mix(in srgb, var(--ui-outline) 60%, transparent),
        0 12px 22px rgba(0, 0, 0, 0.4);
    color: #ffffff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--t-fast) ease-out, box-shadow var(--t) ease-out;
}

.rj-theme-card:active { transform: translateY(2px) scale(0.99); }

/* The card the Surprise me reel shows, in the card's own main colour. */
.rj-theme-card.is-lit {
    box-shadow:
        0 0 0 2.5px var(--ui-outline),
        0 0 0 8px var(--ui-primary-light),
        0 12px 22px rgba(0, 0, 0, 0.4);
}

.rj-theme-card:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
}

/* The splash art fills the card behind its text, with a dark band at the bottom under the tagline. */
.rj-theme-card__thumb {
    position: absolute;
    z-index: -1;
    inset: 0;
    display: block;
}

.rj-theme-card__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.7) 100%);
}

.rj-theme-card__splash {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.rj-theme-card__splash--placeholder {
    background:
        radial-gradient(ellipse 90% 45% at 50% 80%, color-mix(in srgb, var(--theme-primary, var(--claim)) 30%, var(--theme-background, black)) 0 60%, transparent 61%),
        linear-gradient(180deg, color-mix(in srgb, var(--theme-primary, var(--ground-pool)) 25%, var(--theme-background, var(--ground))) 0%, var(--theme-background, var(--ground)) 70%);
}

.rj-theme-card__logo {
    position: absolute;
    top: 0.45rem;
    left: 50%;
    width: auto;
    max-width: 74%;
    height: auto;
    max-height: 60%;
    object-fit: contain;
    transform: translateX(-50%);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

.rj-theme-card__logo--placeholder {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border: 2.5px solid var(--ui-outline);
    border-radius: 30%;
    background: var(--theme-accent, var(--gold));
}

.rj-theme-card__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding-bottom: 0.35rem;
}

.rj-theme-card__title {
    font-family: var(--ui-font-display);
    font-size: 1.35rem;
    font-weight: 400;
    -webkit-text-stroke: 0.18em var(--ui-outline);
    paint-order: stroke fill;
}

.rj-theme-card__tagline {
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6);
}

.rj-theme-card__play {
    flex: none;
    pointer-events: none;
}

/* Surprise me: the reel's window and a big button with a die, as wide as the poster cards and with no frame of its own.
   The status line takes no space until the reel spins. */
.rj-picker__surprise {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    color: var(--theme-text, var(--ink));
}

.rj-picker__reel {
    width: 100%;
}

/* Before a spin the reel has nothing to show, so only the button and the status line take space. */
.rj-picker__reel[data-state="idle"] {
    display: none;
}

/* The reel's window: a slot window in the colours of the theme it shows. */
.rj-picker__reel-window {
    display: grid;
    place-items: center;
    min-height: 3.6rem;
    border: 3px solid var(--ui-outline);
    border-radius: 0.9rem;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.45) 100%),
        var(--theme-background, var(--ground));
    box-shadow: inset 0 0 0 3px var(--theme-accent, var(--gold)), 0 3px 0 var(--ui-outline);
    color: #ffffff;
}

.rj-picker__reel-title {
    font-family: var(--ui-font-display);
    font-size: 1.5rem;
    font-weight: 400;
    -webkit-text-stroke: 0.18em var(--ui-outline);
    paint-order: stroke fill;
    text-shadow: 0 0.08em 0 var(--ui-outline);
}

.rj-picker__dice {
    width: 1.5em;
    height: 1.5em;
    transform: rotate(-12deg);
}

.rj-picker__status {
    margin: 0;
    font-weight: 900;
    text-align: center;
}

/* An empty status line stays in the page for screen readers and cancels the gap above it. */
.rj-picker__status:empty {
    margin-top: -0.6rem;
}

/* ---------------------------------------------------------------------------
   The splash (web client spec §3). A theme with art shows its splash-bg, logo and mascot files (reference:
   planning/marketing/stills/football/1-splash.png); a theme without art shows the logo, the mascot and the sky as CSS
   placeholders in its colours. Every shipped theme has art; the placeholders serve a new theme until its art exists.
   --------------------------------------------------------------------------- */
.rj-splash {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: calc(100% - 1rem);
    padding: 2rem var(--pad) 1.5rem;
    overflow: hidden;
    border-radius: var(--r-card);
    text-align: center;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--theme-primary, var(--ground-pool)) 25%, var(--theme-background, var(--ground))) 0%, var(--theme-background, var(--ground)) 70%);
}

/* The sky and the gradient above mix the theme's primary colour into its background, never into black, so the theme's
   text colour keeps at least 4.5:1 contrast on them in every theme. */
.rj-splash__sky {
    position: absolute;
    inset: auto -20% -30% -20%;
    height: 55%;
    border-radius: 50% 50% 0 0;
    background: color-mix(in srgb, var(--theme-primary, var(--claim)) 30%, var(--theme-background, black));
}

.rj-splash__crest,
.rj-splash__status {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.rj-splash__logo {
    display: grid;
    place-items: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 1.5rem;
    background: var(--theme-accent, var(--gold));
    box-shadow: 0 6px 0 color-mix(in srgb, var(--theme-accent, var(--gold)) 50%, black);
}

.rj-splash__logo-mark {
    width: 55%;
    height: 55%;
    border-radius: 50%;
    border: 0.45rem solid var(--theme-button-text, var(--on-gold));
}

.rj-splash__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 11cqw, 2.8rem);
    font-weight: 400;
    line-height: 1.05;
    color: var(--theme-text, var(--ink));
    text-shadow: 0 3px 0 color-mix(in srgb, var(--theme-primary, black) 60%, black);
}

.rj-splash__tagline {
    margin: 0;
    max-width: 18rem;
    font-weight: 600;
    color: var(--theme-text, var(--ink));
}

.rj-splash__mascot {
    position: relative;
    width: 9rem;
    height: 11rem;
    border-radius: 45% 45% 30% 30%;
    background: color-mix(in srgb, var(--theme-surface, var(--surface)) 85%, white);
    box-shadow: inset 0 -1.5rem 0 color-mix(in srgb, var(--theme-primary, var(--surface)) 60%, black);
}

/* The loading bar: a chunky track with the dark outline, and a glossy band in the theme's main colour that sweeps along
   it while the client connects. */
.rj-splash__track {
    position: relative;
    box-sizing: border-box;
    width: min(80%, 18rem);
    height: 1.5rem;
    overflow: hidden;
    border: 3px solid var(--ui-outline);
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.45), 0 3px 0 var(--ui-outline);
}

.rj-splash__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--ui-primary-light) 0%, var(--ui-primary) 55%, var(--ui-primary-dark) 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5);
    animation: rj-splash-load 1.6s var(--ease) infinite;
}

/* The gloss over the top half of the track. */
.rj-splash__shine {
    position: absolute;
    top: 2px;
    left: 0.5rem;
    right: 0.5rem;
    height: 35%;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.28);
}

@keyframes rj-splash-load {
    from { transform: translateX(-100%); }
    to   { transform: translateX(260%); }
}

/* The loading line in display text with the outline, so it reads over dark and light art. */
.rj-splash__loading {
    margin: 0;
    color: #ffffff;
    font-family: var(--ui-font-display);
    font-size: 1.2rem;
    font-weight: 400;
    -webkit-text-stroke: 0.18em var(--ui-outline);
    paint-order: stroke fill;
    text-shadow: 0 0.08em 0 var(--ui-outline);
}

/* The failure line: white text on a red card above the Retry button. */
.rj-splash__failed {
    margin: 0;
    max-width: 20rem;
    padding: 0.5rem 0.9rem;
    border: var(--ui-border) solid var(--ui-outline);
    border-radius: 0.9rem;
    background: linear-gradient(180deg, var(--ui-danger-light) 0%, var(--ui-danger) 55%);
    box-shadow: 0 3px 0 var(--ui-outline);
    color: #ffffff;
    font-weight: 900;
    line-height: 1.3;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    .rj-splash__fill { animation: none; }
}

/* The splash with the theme's art: the background fills the splash, the logo holds the title, and the mascot stands on
   the ground in the lower half. */
.rj-splash__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rj-splash__logo-art {
    position: relative;
    width: min(88%, 22rem);
    height: auto;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}

.rj-splash__mascot-art {
    position: relative;
    width: min(46%, 11rem);
    height: auto;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35));
}

/* The splash with art takes over from the boot screen (index.html) without a jump: it fills the screen like the boot
   screen, with no frame, the logo at the same place and the same chunky bar at the bottom. The boot screen's bar has
   reached the end when the splash appears, so the splash's bar stays full and a shine runs along it while the client
   connects; it never starts again from the left. */
.rj-splash--art {
    position: fixed;
    inset: 0;
    z-index: 1;
    min-height: 0;
    box-sizing: border-box;
    padding: calc(env(safe-area-inset-top) + 2.5rem) 1rem calc(env(safe-area-inset-bottom) + 3rem);
    border-radius: 0;
}

.rj-splash--art .rj-splash__fill {
    width: 100%;
    animation: none;
}

.rj-splash--art .rj-splash__shine {
    right: auto;
    width: 30%;
    animation: rj-splash-shine 1.4s ease-in-out infinite;
}

@keyframes rj-splash-shine {
    from { transform: translateX(-120%); }
    to   { transform: translateX(380%); }
}

@media (prefers-reduced-motion: reduce) {
    .rj-splash--art .rj-splash__shine { animation: none; right: 0.5rem; width: auto; }
}

/* Over splash art the tagline is display text in white with the dark outline, which reads over a dark part of the
   picture (such as allotment's soil) and over a light one. */
.rj-splash--art .rj-splash__tagline {
    max-width: 20rem;
    color: #ffffff;
    font-family: var(--ui-font-display);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.15;
    -webkit-text-stroke: 0.18em var(--ui-outline);
    paint-order: stroke fill;
    text-shadow: 0 0.08em 0 var(--ui-outline), 0 0.2em 0.5rem rgba(0, 0, 0, 0.4);
}

/* Text that screen readers and tests read but the screen does not show, because the art shows it. */
.rj-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   The welcome screen: the theme's splash art fills the screen behind a framed card with the greeting on a ribbon, the
   name field, the portraits and a big Let's go button. The card does not animate in, because the browser tests tap a
   portrait as soon as the screen opens and Playwright waits for a button to stop moving.
   --------------------------------------------------------------------------- */
.rj-welcome {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    box-sizing: border-box;
    padding: 1.6rem 0 0.5rem;
}

/* The art covers the whole screen: the element is fixed, so the shell's padding and scrolling do not crop it. */
.rj-welcome__bg {
    position: fixed;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.rj-welcome--art::after {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
}

.rj-welcome__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.9rem 0.95rem 0.9rem;
    border: 3px solid var(--ui-panel-border);
    border-radius: var(--ui-radius-panel);
    background: linear-gradient(180deg, var(--ui-panel-light) 0%, var(--ui-panel) 40%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.28),
        0 0 0 2px var(--ui-outline),
        0 6px 0 2px color-mix(in srgb, var(--ui-outline) 55%, transparent),
        0 14px 28px rgba(0, 0, 0, 0.45);
    color: var(--ui-panel-ink);
}

/* The greeting on a ribbon over the card's top edge. */
.rj-welcome__title {
    position: absolute;
    top: 0;
    left: 50%;
    max-width: calc(100% - 2.6rem);
    transform: translate(-50%, -55%);
    font-size: clamp(1.05rem, 5.6cqw, 1.35rem);
}

/* The router focuses the page heading after a navigation, as on the home screen; the heading is not a control. */
.rj-welcome__title:focus { outline: none; }

.rj-welcome__label {
    margin: 0.3rem 0 0;
    font-family: var(--ui-font-display);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--ui-panel-ink);
}

.rj-welcome__name {
    font-size: 1.2rem;
}

.rj-welcome__name.is-invalid { border-color: var(--ui-danger); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.12), 0 0 0 3px var(--ui-danger-light); }

.rj-welcome__rules {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ui-panel-ink-2);
}

.rj-welcome__rules.is-invalid { color: var(--ui-danger); }

.rj-welcome__portraits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    padding: 0.2rem 0.2rem 0.4rem;
}

/* A portrait: a round button with the dark outline and a bottom edge; the chosen one gets a ring in the main colour,
   grows a little and shows a green tick. */
.rj-welcome__portrait {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 0;
    border: 2.5px solid var(--ui-outline);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--ui-panel-ink) 22%, var(--ui-panel)) 0%, var(--ui-panel) 75%);
    box-shadow: 0 3px 0 var(--ui-outline);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}

.rj-welcome__portrait .rj-portrait { width: 100%; height: 100%; }

.rj-welcome__portrait.is-selected {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px var(--ui-primary), 0 0 0 6px var(--ui-primary-light), 0 4px 0 6px var(--ui-outline);
}

.rj-welcome__portrait:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

.rj-welcome__tick {
    position: absolute;
    right: -0.3rem;
    bottom: -0.2rem;
    display: grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border: 2px solid var(--ui-outline);
    border-radius: 50%;
    background: var(--ui-plus);
    box-shadow: 0 2px 0 var(--ui-outline);
    animation: rj-ui-pop 0.35s var(--ui-pop) both;
}

.rj-welcome__tick svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: #ffffff;
    stroke-width: 3.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rj-welcome__confirm { margin-top: 0.4rem; }

@media (prefers-reduced-motion: reduce) {
    .rj-welcome__tick { animation: none; }

    .rj-welcome__portrait,
    .rj-theme-card { transition: none; }
}

/* ---------------------------------------------------------------------------
   The connection shell (WebClientBase ConnectionOverlay) as a game dialog: a framed card in the theme's panel colours,
   the title in display text and the button as a GameButton. The wrapper in MetaLayout.razor carries data-theme, so the
   --ui-* tokens are the theme's.
   --------------------------------------------------------------------------- */
.rj-conn-theme .mp-conn-card {
    gap: 0.75rem;
    padding: 1.4rem 1.2rem 1.2rem;
    border: 3px solid var(--ui-panel-border);
    border-radius: var(--ui-radius-panel);
    background: linear-gradient(180deg, var(--ui-panel-light) 0%, var(--ui-panel) 40%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.28),
        0 0 0 2px var(--ui-outline),
        0 6px 0 2px color-mix(in srgb, var(--ui-outline) 55%, transparent),
        0 18px 40px rgba(0, 0, 0, 0.55);
    color: var(--ui-panel-ink);
}

.rj-conn-theme .mp-conn-card__title {
    margin: 0;
    color: #ffffff;
    font-family: var(--ui-font-display);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.1;
    -webkit-text-stroke: 0.18em var(--ui-outline);
    paint-order: stroke fill;
    text-shadow: 0 0.08em 0 var(--ui-outline);
}

.rj-conn-theme .mp-conn-card__body {
    margin: 0;
    color: var(--ui-panel-ink);
    font-size: 0.95rem;
    font-weight: 800;
}

.rj-conn-theme .mp-conn-card__button {
    position: relative;
    box-sizing: border-box;
    min-height: 3rem;
    margin: 0.3rem 0 var(--ui-edge);
    padding: 0.3rem 1.4rem calc(0.3rem + var(--ui-edge));
    border: var(--ui-border) solid var(--ui-outline);
    border-radius: var(--ui-radius-button);
    background: linear-gradient(180deg, var(--ui-primary-light) 0%, var(--ui-primary) 48%, var(--ui-primary) 72%, color-mix(in srgb, var(--ui-primary) 80%, var(--ui-primary-dark)) 100%);
    box-shadow:
        inset 0 calc(-1 * var(--ui-edge)) 0 var(--ui-primary-dark),
        0 0.2rem 0.35rem var(--ui-shadow);
    color: var(--ui-on-primary);
    font-family: var(--ui-font-display);
    font-size: 1.2rem;
    font-weight: 400;
    -webkit-text-stroke: 0.18em var(--ui-outline);
    paint-order: stroke fill;
    text-shadow: 0 0.08em 0 var(--ui-outline);
    cursor: pointer;
}

.rj-conn-theme .mp-conn-card__button:active {
    transform: translateY(var(--ui-press));
    box-shadow:
        inset 0 calc(var(--ui-press) - var(--ui-edge)) 0 var(--ui-primary-dark),
        0 0.1rem 0.2rem var(--ui-shadow);
}

/* The spinner: a thick ring in the theme's main colour. */
.rj-conn-theme .mp-conn-spinner {
    width: 2.4rem;
    height: 2.4rem;
    border: 5px solid color-mix(in srgb, var(--ui-panel-ink) 20%, transparent);
    border-top-color: var(--ui-primary);
}

/* The reconnecting pill when the tab returns: a dark pill with white display text. */
.rj-conn-theme .mp-conn-pill {
    padding: 0.35rem 0.85rem;
    border: 2px solid var(--ui-outline);
    background: var(--ui-pill-bg);
    box-shadow: 0 3px 0 var(--ui-outline);
    color: var(--ui-pill-ink);
    font-family: var(--ui-font-display);
    font-size: 0.9rem;
}

.rj-conn-theme .mp-conn-pill__dot { width: 0.55rem; height: 0.55rem; background: var(--ui-primary); }

/* ---------------------------------------------------------------------------
   The error bar (index.html, #blazor-error-ui) after an unhandled error: a red card at the bottom with Reload as a button.
   --------------------------------------------------------------------------- */
#blazor-error-ui {
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(0.75rem + var(--safe-b));
    box-sizing: border-box;
    width: auto;
    padding: 0.75rem 3rem 0.75rem 0.9rem;
    border: var(--ui-border) solid var(--ui-outline);
    border-radius: 1rem;
    background: linear-gradient(180deg, var(--ui-danger-light) 0%, var(--ui-danger) 55%);
    box-shadow: 0 4px 0 var(--ui-outline), 0 12px 24px rgba(0, 0, 0, 0.45);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 900;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

#blazor-error-ui .reload {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-left: 0.5rem;
    padding: 0 0.9rem;
    border: 2px solid var(--ui-outline);
    border-radius: 0.8rem;
    background: #ffffff;
    box-shadow: 0 3px 0 var(--ui-outline);
    color: #1d1a16;
    font-family: var(--ui-font-display);
    font-weight: 400;
    text-decoration: none;
    text-shadow: none;
}

#blazor-error-ui .dismiss {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    right: 0.25rem;
}

/* ---------------------------------------------------------------------------
   The development panel (only with ?dev=1)
   --------------------------------------------------------------------------- */
.rj-dev {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem;
    border: 1px dashed color-mix(in srgb, var(--theme-text, white) 16%, transparent);
    border-radius: var(--r-panel);
    font-size: 0.75rem;
}

.rj-dev__title {
    width: 100%;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-text-muted, var(--ink-3));
}

.rj-dev__button {
    padding: 0.35rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--theme-text, white) 16%, transparent);
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--theme-surface, var(--surface)) 94%, var(--theme-text, black));
    color: var(--theme-text, var(--ink));
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.rj-dev__button:disabled { opacity: var(--disabled-opacity); cursor: default; }