* { box-sizing: border-box; }
html, body, #root {
  height: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100%;
  min-height: -webkit-fill-available;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
/* Keep the same constraints as the NAVETT root; no background-filling workaround. */
body { color: #172033; font: 14px/1.35 system-ui, sans-serif; }
#root { display: flex; flex-direction: column; outline: 1px solid #1454c4; outline-offset: -3px; }
header { flex-shrink: 0; padding: max(10px, env(safe-area-inset-top, 0px)) 12px 5px; }
h1 { font-size: 18px; margin: 0; }
header p { margin: 3px 0 0; font-size: 12px; }
main { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 5px 12px calc(100px + env(safe-area-inset-bottom, 0px)); }
p { margin: 6px 0; }
.notice, .hint { font-size: 12px; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
button { font: inherit; min-height: 44px; border: 1px solid #8996a9; border-radius: 6px; background: #fff; color: #172033; padding: 6px 10px; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #1454c4; }
label { display: block; font-weight: 600; }
input, textarea { display: block; width: 100%; font: 16px/1.35 system-ui, sans-serif; border: 1px solid #8996a9; border-radius: 4px; padding: 9px; background: #fff; color: #172033; }
textarea { height: 160px; }
[hidden] { display: none !important; }
h2 { font-size: 15px; margin: 10px 0 5px; }
dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3px 8px; margin: 4px 0 10px; font-size: 12px; }
dt, dd { margin: 0; overflow-wrap: anywhere; }
dd { font-family: ui-monospace, monospace; text-align: right; }
table { width: 100%; border-collapse: collapse; font: 12px/1.4 ui-monospace, monospace; }
caption { text-align: left; font: 12px/1.4 system-ui, sans-serif; }
th, td { padding: 4px 2px; border-bottom: 1px solid #cbd2db; text-align: right; }
th:first-child, td:first-child { text-align: left; }
summary { min-height: 44px; padding: 12px 0; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.4 ui-monospace, monospace; }
#navigation { position: fixed; bottom: 0; left: 0; right: 0; border-top: 1px solid #cbd2db; padding-bottom: env(safe-area-inset-bottom, 0px); background: #fff; z-index: 20; }
#navigation-row { height: 52px; display: flex; justify-content: space-around; align-items: center; }
#band { position: fixed; bottom: 0; left: 0; right: 0; padding: 4px 8px; font: 600 11px/1.4 system-ui, sans-serif; text-align: center; background: #f59e0b; color: #172033; pointer-events: none; z-index: 30; }
#viewport-frame { position: fixed; inset: 0; border: 1px solid #d91c71; pointer-events: none; z-index: 40; }