/* Standalone signage surface: Chromium 53, no Tailwind, grid or modern colours. */
html, body { margin: 0; min-height: 100%; background: #101820; color: #f5f7fa; font: 20px/1.4 Arial, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
header { padding: 1rem 3vw; border-bottom: 1px solid #52616e; display: flex; justify-content: space-between; }
main, form { padding: 1rem 3vw; }
form { max-width: 32rem; margin: 3rem auto; }
label { display: block; margin: 1rem 0; }
input { display: block; width: 100%; padding: .7rem; font: inherit; }
button, a { font: inherit; color: inherit; }
button { background: #263845; border: 1px solid #788995; border-radius: .3rem; padding: .6em .9em; cursor: pointer; margin: .3rem; }
button:focus, a:focus, input:focus { outline: 3px solid #f5ce56; outline-offset: 2px; }
#warning { padding: .7rem 3vw; margin: 0; background: #f5ce56; color: #101820; }
#clock { font-size: 12vw; text-align: center; margin: 1rem 0 0; font-variant-numeric: tabular-nums; }
#date { text-align: center; font-size: 2.5vw; }
h2 { font-size: 2.5vw; margin: .7em 0; }
#keyword { font-size: 5.5vw; line-height: 1.1; margin: .2em 0; word-wrap: break-word; }
#secondary, #message, #object, #details { white-space: pre-wrap; font-size: 2vw; word-wrap: break-word; }
#alarm-kind { font-size: 1.5rem; color: #f5ce56; margin: 0; }
#elapsed { font-size: 2rem; font-variant-numeric: tabular-nums; }
#elapsed[data-tone="warning"] { color: #f5ce56; }
#elapsed[data-tone="danger"] { color: #ff7b76; }
.columns { display: flex; align-items: flex-start; }
.facts { width: 55%; padding-right: 2vw; }
.columns > .units { width: 45%; }
.units { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.units li { background: #263845; padding: .6em; margin: .3em; font-size: 1.6vw; min-width: 10em; max-width: 100%; word-wrap: break-word; }
.units small { display: block; font-size: .8em; }
#events { padding-left: 1.5em; font-size: 1.5rem; }
#notice { padding: 1rem; border: 1px solid #788995; white-space: pre-wrap; }
footer { margin-top: 1.5rem; border-top: 1px solid #52616e; padding-top: .5rem; }
@media (max-width: 800px) { .units li, #secondary, #message, #object, #details { font-size: 1rem; } h2 { font-size: 1.5rem; } .columns { display: block; } .facts, .columns > .units { width: 100%; } }