/* The shared Rounds components are written for border-box, which the iOS/Android host and the preview harness set
   globally. Without it here, a full-width row with padding (List options > Status display) ran past the right edge
   of the web app only (KRA-2226). */
*, *::before, *::after { box-sizing: border-box; }
:root { color-scheme:light dark; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:#0f172a; background:#f8fafc; }
html, body, #app { min-height:100%; margin:0; }
body { background:radial-gradient(circle at 80% 0,#dbeafe 0,transparent 30rem),#f8fafc; }
@media (prefers-color-scheme: dark) {
  :root { color:#e8edf5; background:#0b1220; }
  body { background:radial-gradient(circle at 80% 0,#14213a 0,transparent 30rem),#0b1220; }
  .boot { color:#b6c2d3; }
}
.boot { display:grid; min-height:100dvh; place-items:center; padding:24px; box-sizing:border-box; text-align:center; color:#334155; font-weight:700; }
.boot > div { max-width:28rem; }
#rounds-boot-help { font-weight:400; line-height:1.5; }
.boot button { min-height:44px; border:0; border-radius:10px; padding:12px 24px; background:#1d4ed8; color:#fff; font:inherit; cursor:pointer; }
#app:has(#rounds-boot) ~ #blazor-error-ui { display:none !important; }
@media (prefers-color-scheme: dark) { .boot { color:#e8edf5; } .boot button { background:#2563eb; } }
#blazor-error-ui { position:fixed; inset:auto 1rem 1rem; display:none; padding:1rem; border:1px solid #fecaca; border-radius:.75rem; background:#fef2f2; color:#991b1b; }
#blazor-error-ui a { color:inherit; font-weight:800; }
.browser-session-strip { min-height: 36px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 20px; background: #0f172a; color: #e2e8f0; font-size: 12px; }
.browser-session-strip button { background: transparent; color: #fff; border: 1px solid #64748b; border-radius: 6px; padding: 4px 12px; font: inherit; cursor: pointer; min-height: 28px; }
.browser-status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #93c5fd; margin-right: 8px; }
.browser-skip { position: fixed; left: 16px; top: -100px; z-index: 50; background: #fff; color: #1e3a8a; padding: 12px; border-radius: 6px; }
.browser-skip:focus { top: 8px; }
.browser-recovery { max-width: 560px; margin: 10vh auto; padding: 28px; line-height: 1.6; }
.browser-access-error { padding: 16px 24px; background: #fffbeb; color: #78350f; }
.browser-lock-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(15,23,42,.75); padding: 20px; }
.browser-lock { max-width: 460px; border-radius: 18px; background: #fff; color: #0f172a; padding: 28px; box-shadow: 0 20px 80px #0005; line-height: 1.6; }
.browser-lock button, .browser-recovery button { min-height: 44px; border-radius: 8px; padding: 10px 18px; background: #1d4ed8; color: #fff; border: 0; font: inherit; margin: 8px 8px 0 0; cursor: pointer; }
.browser-lock button + button { background: #f1f5f9; color: #0f172a; }
button:focus-visible, a:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }
#rounds-main:focus { outline: none; }
.native-shell { min-height: calc(100dvh - 36px); }
.shift-workspace { height: calc(100dvh - 80px - env(safe-area-inset-top)); }
#rounds-main .native-shell:has(.shift-workspace) { display: flex; flex-direction: column; height: calc(100dvh - 36px); min-height: 0; }
#rounds-main .native-shell:has(.shift-workspace) > main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#rounds-main .sample-shift, #rounds-main .native-home:has(.shift-workspace) { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; }
#rounds-main .shift-workspace { flex: 1; min-height: 0; height: auto; width: 100%; box-sizing: border-box; }
#rounds-main .sample-shift > header { flex: 0 0 auto; }
#rounds-main .native-home:has(.shift-workspace) { margin: 0; max-width: none; }
#rounds-main .review-demo-action { display: none; }
@media (max-width: 600px) { .browser-session-detail { display: none; } .browser-session-strip { padding-inline: 12px; } }
@media (min-width: 1024px) {
    .native-shell main { max-width: 1600px; margin-inline: auto; }
    .native-home:not(.is-signed-in) { max-width: 820px; margin: 5vh auto; }
    .native-home:not(.is-signed-in) h1 { max-width: 21ch; font-size: 48px; }
    .native-home:not(.is-signed-in) .native-readiness { padding: 24px; }
    .native-home:not(.is-signed-in) .sample-offer { margin-top: 28px; }
    .native-home:not(.is-signed-in) .guided-sample { display: none; }
    .workspace-scroll > .patient-now { max-width: 1000px; margin-inline: auto; }
    .workspace-scroll .census { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* On a phone or tablet the session strip costs a row of screen on every view; Sign out lives in Settings and the
   workspace still signs out after 15 minutes without activity. A computer keeps the strip as a shared-computer reminder. */
@media (max-width: 1023px) {
    .browser-session-strip { display: none; }
    .native-shell { min-height: 100dvh; }
    #rounds-main .native-shell:has(.shift-workspace) { height: 100dvh; }
}
/* On a computer the strip is a quiet reminder, not a black bar competing with the workspace. */
.browser-session-strip { background: #eef2f7; color: #475569; border-bottom: 1px solid #e2e8f0; }
.browser-session-strip button { color: #1d4ed8; border-color: transparent; font-weight: 600; }
.browser-status-dot { background: #22c55e; }
@media (prefers-color-scheme: dark) {
    .browser-session-strip { background: #0f172a; color: #94a3b8; border-bottom-color: #1e293b; }
    .browser-session-strip button { color: #93c5fd; }
}