/* Aviato (aviato.js): a dashboard where everything is on time. */
.aviato { position: relative; height: 100%; overflow: auto; background: #fafafa; color: #111; font: 12px "Helvetica Neue", Arial, sans-serif; }
.av-mark { font: 900 26px "Arial Black", Arial, sans-serif; letter-spacing: 3px; color: #111; }
.av-mark span { color: #f2b705; margin-left: 6px; }
.av-mark.big { font-size: 44px; color: #f2b705; }
.av-mark.big span { color: #fff; }
.av-slogan { font-style: italic; color: #666; }
.av-splash { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 8px; background: #111; color: #ddd; transition: opacity .5s; }
.av-splash .av-slogan { color: #bbb; font-size: 14px; }
.av-splash.gone { opacity: 0; pointer-events: none; }
.av-load { width: 180px; height: 4px; background: #333; overflow: hidden; }
.av-load i { display: block; height: 100%; width: 0; background: #f2b705; animation: av-load 1.6s ease-in-out forwards; }
@keyframes av-load { to { width: 100%; } }
.av-dash { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.av-head { display: flex; align-items: baseline; gap: 12px; border-bottom: 3px solid #f2b705; padding-bottom: 6px; }
.av-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.av-tile { display: flex; flex-direction: column; gap: 2px; padding: 8px; background: #fff; border: 1px solid #ddd; border-left: 4px solid #f2b705; }
.av-tile span { color: #666; font-size: 11px; }
.av-tile b { font-size: 20px; }
.av-tile small { color: #2a8a3a; }
.av-chart { margin: 0; background: #fff; border: 1px solid #ddd; padding: 6px; }
.av-chart-t { font-weight: bold; margin-bottom: 2px; }
.av-chart svg { width: 100%; height: auto; display: block; }
.av-erlich { display: flex; gap: 8px; align-items: center; background: #111; color: #f2b705; padding: 8px; font-style: italic; }
.av-erlich .ico { width: 32px; height: 32px; flex: none; }
.av-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.av-status { color: #666; font-size: 11px; }
@media (max-width: 520px) { .av-tiles { grid-template-columns: repeat(2, 1fr); } }