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;
}
/* KAN-304: functional account/staff forms until GUI's P1-d designs land. */
form label { display: block; margin: 8px 0; }
form input[type=text], form input[type=password], form input:not([type]) { display: block; padding: 6px; min-width: 260px; }
form button { margin-top: 8px; padding: 6px 14px; }
.staff-error { color: #b00020; }
.staff-notice { color: #1b5e20; }
.staff-small { font-size: 0.85em; word-break: break-all; }

/* KAN-308: the read-only screens. Phone rules (GUI plan section 8, 390 px): facts stack, tables become labelled rows
   (MudTable's Breakpoint does that), touch targets at least 44 px, nothing scrolls the page sideways. */
.sign-out-form { display: inline; margin-left: 12px; }
.staff-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sign-out-form button { white-space: nowrap; min-height: 44px; background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; padding: 0 12px; cursor: pointer; }
.staff-main { max-width: 1280px; }
/* Only the sides and bottom: MudMainContent's own top padding is the app bar's height, and a pa-* class (padding
   !important) would cancel it and slide the page title under the bar. */
.mud-main-content.staff-main { padding-left: 16px; padding-right: 16px; padding-bottom: 16px; }
.staff-main h1 { margin-top: 16px; }
.environment-badge { color: #FFFFFF !important; border-color: rgba(255,255,255,.7) !important; font-weight: 600; letter-spacing: .04em; }
.remote-detail { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; margin-top: 4px; white-space: pre-wrap; word-break: break-word; opacity: .85; }
.fact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.fact { padding: 12px 16px; border: 1px solid #DDE2EA; border-radius: 6px; background: #FFFFFF; min-width: 0; }
.fact-label { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: #5A6578; }
.fact-value { font-size: 1.25rem; font-weight: 600; overflow-wrap: anywhere; }
.fact-value.absent { font-size: 1rem; font-weight: 400; font-style: italic; color: #5A6578; }
.json-block { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; background: #F7F8FA; border: 1px solid #DDE2EA; border-radius: 6px; padding: 12px; max-height: 480px; overflow: auto; white-space: pre; }
.mono { font-family: ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.toolbar-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar-row .mud-button-root { min-height: 44px; }
@media (max-width: 600px) {
    .signed-in-as { display: none; }
    .staff-title { font-size: 1rem !important; }
    .fact-grid { grid-template-columns: 1fr 1fr; }
}

/* KAN-321: GUI's KAN-312 staff-access designs (Docs/Design/Admin/KAN-312/ui.css), prefixed ac- so they cannot collide
   with the screens' own classes. Tokens from design-spec.md section 2. */
:root { --ac-nav:#13294b; --ac-primary:#1e5bb8; --ac-ink:#172b45; --ac-muted:#526176; --ac-line:#dbe2eb; --ac-page:#f4f5f7;
        --ac-error:#a6221c; --ac-warn:#86550d; --ac-success:#226b2e; }
.ac-public { display:grid; grid-template-columns:minmax(260px,1fr) minmax(480px,1.5fr); min-height:calc(100vh - 64px); margin:-16px -16px 0; }
.ac-intro { background:linear-gradient(145deg,#e9eef5,#f4f5f7); padding:70px 50px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid #e1e7ee; color:var(--ac-ink); }
.ac-intro svg { width:130px; height:130px; }
.ac-intro h2 { font-size:34px; line-height:1.17; letter-spacing:-.04em; font-weight:650; margin:20px 0 14px; max-width:300px; }
.ac-intro p { color:var(--ac-muted); font-size:15px; max-width:290px; margin:0; }
.ac-intro .ac-mini { font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-top:50px; color:#506176; }
.ac-public-main { padding:38px 42px; display:flex; justify-content:center; align-items:center; }
.ac-card { background:#fff; border:1px solid var(--ac-line); border-radius:12px; box-shadow:0 6px 24px #14284609; padding:32px;
           width:100%; max-width:600px; min-width:0; color:var(--ac-ink); font-size:14px; line-height:1.65; }
.ac-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.ac-status-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:11px; color:var(--ac-primary); background:#eaf1fb; }
.ac-status-icon svg { width:24px; height:24px; }
.ac-status-chip { font-size:11px; font-weight:750; padding:4px 9px; border-radius:5px; border:1px solid #c8d6e9; color:var(--ac-primary); background:#f2f6fc; }
.ac-tone-warning .ac-status-icon, .ac-tone-warning .ac-status-chip { color:var(--ac-warn); background:#fff5e5; border-color:#ead3ac; }
.ac-tone-danger .ac-status-icon, .ac-tone-danger .ac-status-chip { color:var(--ac-error); background:#fcf0ee; border-color:#ebc8c3; }
.ac-tone-success .ac-status-icon, .ac-tone-success .ac-status-chip { color:var(--ac-success); background:#eaf5ee; border-color:#bdddc6; }
.ac-eyebrow { font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--ac-muted); margin:0 0 10px; }
.ac-card h1 { font-size:27px; line-height:1.2; letter-spacing:-.025em; font-weight:700; margin:0 0 12px; overflow-wrap:anywhere; }
.ac-card h1:focus { outline:none; }
.ac-lead { color:var(--ac-muted); font-size:14px; line-height:1.65; margin:0 0 24px; }
.ac-facts { border-top:1px solid var(--ac-line); margin:22px 0; }
.ac-fact { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 0; border-bottom:1px solid var(--ac-line); font-size:13px; }
.ac-fact dt { color:var(--ac-muted); flex-shrink:0; }
.ac-fact dd { font-weight:600; margin:0; text-align:right; overflow-wrap:anywhere; }
.ac-notice { font-size:13px; background:#f2f6fb; border:1px solid #d6e2f3; border-left:3px solid var(--ac-primary); padding:13px 15px; border-radius:5px; margin:18px 0; color:#304a6e; }
.ac-notice.warn { border-color:#e8d5b3; border-left-color:#b7791f; background:#fff8ea; color:#775018; }
.ac-notice.danger { border-color:#ebc8c3; border-left-color:#b3261e; background:#fdf3f2; color:#852720; }
.ac-hint { font-size:12px; color:var(--ac-muted); line-height:1.6; margin:12px 0; }
.ac-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; }
.ac-btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; border:1px solid transparent;
          border-radius:7px; cursor:pointer; font:inherit; font-weight:650; text-decoration:none; }
.ac-btn.primary { background:var(--ac-primary); color:#fff; }
.ac-btn.secondary { background:#fff; border-color:#c2cedd; color:#24496e; }
.ac-btn:disabled, .ac-btn[aria-disabled=true] { background:#e2e7ed; color:#526176; cursor:not-allowed; border-color:transparent; }
.ac-btn:focus-visible, .ac-field input:focus-visible, .ac-check input:focus-visible { outline:3px solid #2769c9; outline-offset:3px; }
.ac-field { margin:18px 0; }
.ac-field label { font-size:13px; font-weight:650; display:block; margin-bottom:8px; }
.ac-field input { width:100%; min-height:46px; padding:11px 12px; border:1px solid #b8c5d5; border-radius:6px; background:#fff; color:var(--ac-ink); font-size:15px; box-sizing:border-box; }
.ac-field input[aria-invalid=true] { border:2px solid #b3261e; }
.ac-input-error { color:var(--ac-error); font-size:12px; margin:6px 0; }
.ac-secure-link { overflow-wrap:anywhere; border:1px dashed #bfcdda; background:#f8fafc; padding:13px; font:12px/1.6 ui-monospace,Menlo,monospace; color:#24364d; border-radius:5px; }
.ac-setup { display:flex; gap:18px; align-items:center; margin:18px 0; }
.ac-setup p { font-size:13px; color:var(--ac-muted); margin:0; }
.ac-qr { width:168px; height:168px; flex-shrink:0; border:1px solid var(--ac-line); border-radius:6px; background:#fff; }
.ac-key { font:600 14px/1.6 ui-monospace,Menlo,monospace; color:var(--ac-ink); letter-spacing:.04em; overflow-wrap:anywhere; }
.ac-check { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:#344961; margin-top:18px; min-height:44px; padding:8px 0; }
.ac-check input { width:18px; height:18px; flex-shrink:0; margin:2px 0; accent-color:var(--ac-primary); }
.ac-codes { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:16px; border-radius:7px; border:1px solid #d6e0eb; background:#f7f9fc; margin:0; list-style:none; }
.ac-codes li code { font:13px ui-monospace,Menlo,monospace; color:var(--ac-ink); }
.ac-steps { display:flex; gap:10px; margin-bottom:26px; }
.ac-steps span { height:4px; background:#dfe6ef; border-radius:3px; flex:1; }
.ac-steps .filled { background:var(--ac-primary); }
.ac-spinner { width:24px; height:24px; border:3px solid #d6e2f2; border-top-color:var(--ac-primary); border-radius:50%; animation:ac-spin 1.5s linear infinite; margin:20px 0; }
@keyframes ac-spin { to { transform:rotate(360deg); } }
.ac-footer { border-top:1px solid var(--ac-line); padding-top:18px; margin-top:24px; display:flex; justify-content:space-between; gap:12px; color:#596b82; font-size:11px; }
.ac-footer span:last-child { font-weight:600; }
.ac-staff { max-width:620px; }
.ac-table { width:100%; border-collapse:collapse; font-size:13px; margin:18px 0 0; }
.ac-table caption { text-align:left; font-weight:650; font-size:13px; padding-bottom:8px; }
.ac-table td { border-top:1px solid var(--ac-line); padding:10px 8px 10px 0; vertical-align:middle; overflow-wrap:anywhere; }
.ac-table td:last-child { text-align:right; padding-right:0; }
.ac-table td[colspan] { text-align:left; }
@media (prefers-reduced-motion: reduce) { .ac-spinner { animation:none; } }
@media (max-width:1100px) { .ac-intro { padding:40px 30px; } .ac-public { grid-template-columns:minmax(240px,.85fr) minmax(400px,1.4fr); } .ac-public-main { padding:30px; } }
@media (max-width:700px) {
    .ac-public { display:block; min-height:0; margin:0; }
    .ac-intro { display:none; }
    .ac-public-main { padding:8px 0 24px; display:block; }
    .ac-card { padding:23px 20px; border-radius:10px; max-width:100%; font-size:13px; }
    .ac-card h1 { font-size:25px; }
    .ac-lead { font-size:13px; }
    .ac-fact { font-size:12px; gap:12px; }
    .ac-fact dt { flex-shrink:1; }
    .ac-fact dd { max-width:60%; }
    .ac-actions { display:grid; grid-template-columns:1fr; margin-top:24px; }
    .ac-actions .ac-btn { width:100%; }
    .ac-setup { display:block; }
    .ac-qr { display:block; margin:0 auto 15px; }
    .ac-codes { padding:12px; }
    .ac-codes li code { font-size:12px; }
    .ac-notice { font-size:12px; }
}

/* KAN-323: GUI's KAN-320 overview (cards, capability chips, stacked destinations, label/value rows). */
.ov-card { background:#fff; border:1px solid #dbe2eb; border-radius:10px; padding:16px; }
.ov-eyebrow { font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:#526176; margin:0 0 6px; }
.ov-title { font-size:20px; font-weight:700; margin:0 0 4px; color:#172b45; overflow-wrap:anywhere; }
.ov-sub, .ov-note { font-size:13px; color:#526176; margin:4px 0 10px; }
.ov-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ov-chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 10px; }
.ov-chip { font:12px ui-monospace,Menlo,monospace; padding:3px 8px; border:1px solid #c8d6e9; border-radius:5px; background:#f2f6fc; color:#24496e; }
.ov-links { display:grid; gap:8px; margin-top:12px; }
.ov-link { display:flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid #c2cedd; border-radius:7px; color:#1e5bb8; font-weight:650; text-decoration:none; }
.ov-link:focus-visible { outline:3px solid #2769c9; outline-offset:3px; }
.ov-rows { margin:0; }
.ov-row { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid #dbe2eb; font-size:13px; }
.ov-row:last-child { border-bottom:0; }
.ov-row dt { color:#526176; } .ov-row dd { margin:0; font-weight:600; } .ov-row dd.absent { font-weight:400; font-style:italic; color:#526176; }
@media (min-width:701px) { .ov-links { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } }

/* KAN-323: player screen on a phone - three equal tabs (no scrolling strip), the coin figures on one row, and
   collections as labelled cards rather than squeezed table columns. */
/* MudBlazor 9 wraps each tab in an inline tooltip root, so the WRAPPERS are the flex items to share the width. */
.equal-tabs .mud-tabs-tabbar-content, .equal-tabs .mud-tabs-tabbar-wrapper { width:100%; display:flex; }
.equal-tabs .mud-tabs-tabbar-wrapper > .mud-tooltip-root { flex:1 1 0; min-width:0; display:flex; }
.equal-tabs .mud-tab { width:100%; min-width:0 !important; padding-left:4px; padding-right:4px; }
.fact-row3 { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.fact-row3 .fact { padding:10px 12px; }
.fact-row3 .fact-value { font-variant-numeric:tabular-nums; }
@media (max-width:340px) { .fact-row3 { grid-template-columns:1fr !important; } }
.entry-list { display:grid; gap:10px; }
.entry-card { border:1px solid #dbe2eb; border-radius:8px; padding:12px 14px; background:#fff; }
.entry-card header { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.entry-reason { font-weight:650; color:#172b45; overflow-wrap:anywhere; }
.entry-amount { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.entry-amount.credit { color:#226b2e; } .entry-amount.debit { color:#a6221c; }
.entry-time { font-size:12px; color:#526176; margin:2px 0 6px; }
.entry-card dl { margin:0; }
.entry-card dl div { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-top:1px solid #edf1f5; font-size:12px; }
.entry-card dt { color:#526176; flex-shrink:0; } .entry-card dd { margin:0; text-align:right; overflow-wrap:anywhere; min-width:0; }

/* KAN-323: GUI's phone shell - a 62px bar; sign-out moves from the bar into the drawer below 600px. */
.mud-appbar .mud-toolbar { min-height:62px; }
.sign-out-drawer { display:none; padding:16px; border-top:1px solid rgba(255,255,255,.15); color:#e3e9f3; }
.signed-in-drawer { display:block; font-size:13px; margin-bottom:8px; overflow-wrap:anywhere; }
.sign-out-drawer button { width:100%; min-height:44px; background:transparent; color:inherit; border:1px solid rgba(255,255,255,.5); border-radius:6px; cursor:pointer; }
@media (max-width:600px) {
    .sign-out-bar { display:none; }
    .sign-out-drawer { display:block; }
}

/* KAN-323: GUI's staff screen - account, invitation and change cards; roles behind a native <details>. */
.staff-list { display:grid; gap:10px; }
.staff-card { border:1px solid #dbe2eb; border-radius:8px; padding:12px 14px; background:#fff; min-width:0; }
.staff-card header { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.staff-card dl { margin:6px 0 0; }
.staff-card dl div { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-top:1px solid #edf1f5; font-size:12px; }
.staff-card dt { color:#526176; flex-shrink:0; } .staff-card dd { margin:0; text-align:right; overflow-wrap:anywhere; min-width:0; }
.staff-state { font-size:11px; font-weight:700; padding:2px 8px; border-radius:5px; background:#eef2f7; color:#344961; }
.staff-state.on { background:#eaf5ee; color:#226b2e; } .staff-state.off { background:#fcf0ee; color:#a6221c; }
.role-review { margin-top:10px; border:1px solid #c2cedd; border-radius:7px; }
.role-review summary { min-height:44px; display:flex; align-items:center; padding:0 14px; cursor:pointer; color:#1e5bb8; font-weight:650; }
.role-review ul { list-style:none; margin:0; padding:0 14px 8px; }
.role-review li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-top:1px solid #edf1f5; font-size:13px; }
.role-review li .ac-hint { display:block; margin:2px 0 0; }
.ac-btn.danger { background:#fff; border-color:#cfa39f; color:#a6221c; }