/* The playtest panel. MudBlazor draws the rest; these rules use its theme's colours (PanelTheme). */

body { background: var(--mud-palette-background); }
h1:focus { outline: none; }

.panel-muted { opacity: .75; }
.words { white-space: pre-wrap; overflow-wrap: anywhere; }
.small-code { font-size: .75rem; }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

pre.json { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-primary); padding: .5rem; border-radius: 6px;
    max-height: 24rem; overflow: auto; font-size: .8rem; white-space: pre-wrap; word-break: break-all; margin: .25rem 0; }

.shot { display: block; max-width: 100%; max-height: 20rem; border-radius: 6px; border: 1px solid var(--mud-palette-lines-default); }
.report-card { height: 100%; }

.config-paper { max-width: 48rem; }
.config-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.mono textarea { font-family: Consolas, "Cascadia Mono", monospace; font-size: .85rem; }

/* The login page: static, so a plain form on the dark palette. */
.bare { min-height: 100vh; display: grid; place-items: center; background: var(--mud-palette-background); }
.login-card { width: min(24rem, calc(100vw - 2rem)); background: var(--mud-palette-surface) !important; }
.login-field { display: block; margin-bottom: 1rem; color: var(--mud-palette-text-secondary); font-size: .85rem; }
.login-field input { display: block; width: 100%; margin-top: .3rem; padding: .6rem .7rem; border-radius: 6px; font-size: 1rem;
    color: var(--mud-palette-text-primary); background: var(--mud-palette-background-gray); border: 1px solid var(--mud-palette-lines-inputs); }
.login-field input:focus { outline: 2px solid var(--mud-palette-primary); border-color: transparent; }
.login-command { display: block; margin: .35rem 0; font-size: .8rem; word-break: break-all; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000; padding: .6rem 1.2rem;
    background: var(--mud-palette-error); color: #fff; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }
.blazor-error-boundary { padding: 1rem; background: var(--mud-palette-error); color: #fff; }
.blazor-error-boundary::after { content: "An error has occurred."; }