:root { --burn-local-top: max(6px, env(safe-area-inset-top, 0px)); --burn-top: calc(var(--client-top, 0px) + var(--burn-local-top)); --burn-lane: calc(var(--burn-local-top) + 52px); --burn-right: max(8px, env(safe-area-inset-right, 0px)); }
.burn-dock { position: fixed; z-index: 2147483647; inset: var(--burn-top) 0 auto 0; width: auto; height: 44px; margin: 0; padding: 0 var(--burn-right) 0 env(safe-area-inset-left, 0px); border: 0; background: transparent; color: #fff; display: flex; justify-content: flex-end; align-items: stretch; gap: 8px; overflow: visible; pointer-events: none; }
.burn-dock[popover]:not(:popover-open) { display: none; }
.burn-dock .burn-button { position: relative; display: flex; justify-content: center; align-items: center; flex: 0 0 78px; width: 78px; min-height: 44px; padding: 8px 5px; border: 1px solid #ff7c84; border-radius: 7px; background: #e00017; color: #fff; font: 800 14px/1.2 system-ui, sans-serif; letter-spacing: .045em; cursor: pointer; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; box-shadow: 0 1px 5px #0005; }
.burn-dock .burn-button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.burn-dock .burn-button[data-holding="true"] { background: #a90010; }
.burn-dock .burn-button:disabled { opacity: .75; cursor: wait; }
.burn-warning { flex: 1 1 auto; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; padding: 5px 12px 9px; border: 1px solid #ff7c84; border-inline-start: 0; border-radius: 0 7px 7px 0; background: #8f0010; color: #fff; font: 700 14px/1.2 system-ui, sans-serif; pointer-events: none; }
.burn-warning[hidden], .burn-progress[hidden] { display: none; }
.burn-warning[data-state="armed"] { background: #412507; border-color: #ff8a00; }
.burn-warning-label { text-align: center; overflow-wrap: anywhere; }
.burn-countdown { flex: 0 0 auto; min-width: 2ch; font-size: 20px; font-variant-numeric: tabular-nums; }
.burn-progress { position: absolute; height: 5px; bottom: 0; inset-inline: 0; background: #4c0008; }
.burn-progress > span { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: right center; }
body.burn-host > .comms-bar, body.admin-body.burn-host > .admin-comms { padding-right: calc(94px + env(safe-area-inset-right, 0px)); min-height: var(--burn-lane); height: auto; flex-wrap: wrap; }
html[data-native] body.burn-host > .comms-bar { padding-right: calc(94px + env(safe-area-inset-right, 0px)); min-height: var(--burn-lane); height: auto; }
/* Leave close buttons, headings and fields below the viewport-level control. */
dialog.burn-dialog-active, .admin-body dialog.burn-dialog-active { position: fixed; top: calc(var(--client-top, 0px) + var(--burn-lane)); bottom: calc(var(--client-bottom, 0px) + max(8px, env(safe-area-inset-bottom, 0px))); margin-block: auto; height: fit-content; max-height: calc(var(--client-height, 100dvh) - var(--burn-lane) - max(8px, env(safe-area-inset-bottom, 0px))); }
.burn-cleared { margin: 0; min-height: 100dvh; background: #101710; color: #edf0eb; }
.burn-result { max-width: 460px; margin: 0 auto; padding: 100px 24px 24px; font: 16px/1.5 system-ui, sans-serif; }
.burn-result h1 { font-size: 24px; }
.burn-result a { display: inline-block; margin-top: 12px; color: #ff8a00; }
.admin-session-menu { position: relative; }
.admin-session-menu > summary { list-style: none; cursor: pointer; }
.admin-session-menu > summary::-webkit-details-marker { display: none; }
.admin-session-menu[open] > button { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 100px; }
@media (max-width: 420px) { .burn-warning { font-size: 12px; padding-inline: 8px; gap: 5px; } }
/* Phone forms fill the visible screen; BURN's lane is inside, not outside. */
@media (max-width: 600px), (max-width: 1000px) and (max-height: 600px) {
  html:has(dialog[open]), html:has(dialog[open]) > body { overflow: hidden; }
  dialog.form-dialog, .admin-body dialog.admin-dialog, .admin-body dialog.admin-dialog.compact,
  dialog.burn-dialog-active, .admin-body dialog.burn-dialog-active {
    position: fixed; inset: var(--client-top, 0px) 0 auto;
    width: 100%; max-width: 100%; height: var(--client-height, 100dvh); max-height: var(--client-height, 100dvh);
    margin: 0; border: 0; border-radius: 0; padding-top: var(--burn-lane); padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow: auto; overscroll-behavior: contain;
  }
  dialog#form-dialog { overflow: hidden; }
  #form-dialog #medical-form { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  dialog.form-dialog::before, .admin-body dialog.admin-dialog::before { content: ''; position: fixed; top: var(--client-top, 0px); left: 0; right: 0; height: var(--burn-lane); background: var(--panel); z-index: 2; }
  .form-dialog .dialog-header, .admin-dialog .admin-dialog-heading { position: sticky; top: 0; z-index: 2; }
  .form-dialog .form-toolbar { flex-direction: row; align-items: center; }
  .form-dialog .close-button, .admin-body .admin-dialog-close { width: 44px; height: 44px; flex-shrink: 0; }
  dialog::backdrop { background: var(--panel); backdrop-filter: none; }
  body.burn-host > .comms-bar { flex-wrap: nowrap; }
}