/* Layouts that belong to one page. */

/* ---------- Overview: the board ---------- */

.board { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); box-shadow: var(--lift); overflow: hidden; }
.board-head, .board-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(150px, 1fr)) minmax(120px, 0.9fr) 44px;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 8px;
}
.board-head { padding-block: 7px; border-bottom: 1px solid var(--line-soft); background: var(--well); color: var(--ink-soft); font-size: 0.78125rem; font-weight: 600; }
.board-head span { display: inline-flex; align-items: center; gap: 6px; }
.board-head span:first-child { justify-content: flex-end; padding-right: 14px; }
.board-head .i { width: 13px; height: 13px; color: var(--ink-faint); }
/* Each row wears its site's hue down the left edge. */
.board-row { box-shadow: inset 4px 0 0 var(--c); }
.board-row + .board-row { border-top: 1px solid var(--line-soft); }
.board-row:hover { background: color-mix(in srgb, var(--c) 4%, transparent); }
.board .lamp-k { display: none; }

/* Addresses are set flush right, so the shared domain lines up down the
   column and each site's own name stands out in front of it. */
.board-site { display: grid; gap: 1px; padding: 6px 14px 6px 12px; text-align: right; text-decoration: none; border-radius: var(--r); }
.board-site:hover .host b { color: var(--c); }
.board-site .host { font-size: 1.1875rem; }
.board-site small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-runs { display: grid; gap: 1px; padding-left: 8px; min-width: 0; }
.board-runs b, .board-runs small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.board-open { text-align: right; }
.board .none { padding: 20px 16px; }

@media (max-width: 1000px) {
    .board-head { display: none; }
    .board-row { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 12px 12px 14px; }
    .board-site { grid-column: 1 / 3; text-align: left; padding: 0 2px 4px; }
    .board-open { grid-column: 3; grid-row: 1; align-self: start; }
    .board .lamp-k { display: block; }
    .board-runs { grid-column: 1 / -1; padding: 4px 2px 0; }
}
@media (max-width: 480px) {
    .board-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .board-site { grid-column: 1 / 2; }
    .board-open { grid-column: 2; }
}

/* ---------- Overview: usage rings ---------- */

.rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 12px; }
.ring { display: grid; justify-items: center; gap: 3px; text-align: center; --tone: var(--brand); }
.ring.warn { --tone: var(--warn); }
.ring.down { --tone: var(--down); }
.ring-dial { position: relative; width: 84px; height: 84px; margin-bottom: 6px; }
.ring-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--line-soft); stroke-width: 3.5; }
.ring-value { fill: none; stroke: var(--tone); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray 0.6s ease-out; }
.ring-dial b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 1.125rem var(--display); color: var(--tone); }
.ring-label { font-weight: 600; }
.ring-value-text { color: var(--ink-soft); font-size: 0.8125rem; }
.ring small { color: var(--ink-faint); }
.ring.warn small, .ring.down small { color: var(--tone); font-weight: 600; }

/* ---------- Sites: the zone list ---------- */

.zone { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); box-shadow: var(--lift); overflow: hidden; }
.zone-row {
    display: grid;
    grid-template-columns: auto minmax(200px, 1.3fr) minmax(170px, 1.2fr) minmax(130px, 1fr) minmax(110px, 0.7fr) minmax(110px, 0.7fr) 16px;
    align-items: center;
    gap: 20px;
    padding: 16px 16px 16px 20px;
    text-decoration: none;
    border-bottom: 1px solid var(--line-soft);
    box-shadow: inset 4px 0 0 var(--c);
}
.zone-row:hover { background: color-mix(in srgb, var(--c) 4%, transparent); }
.zone-row:hover > .i { color: var(--c); }
.zone-row > .i { color: var(--ink-faint); }
.zone-host .host { font-size: 1.375rem; }
.zone-what, .zone-num { display: grid; gap: 1px; min-width: 0; }
.zone-what small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.zone-status { display: grid; gap: 4px; justify-items: start; }
.zone-status .state + .state { margin-left: 0; }
.zone-num b { font: 700 1.0625rem var(--display); }
.zone-foot { display: flex; align-items: center; gap: 9px; padding: 12px 16px; color: var(--ink-soft); font-size: 0.8125rem; }
.addresses li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 11px 16px; }
.addresses li + li { border-top: 1px solid var(--line-soft); }
.addresses li .state { margin-left: auto; }
.gate-error { color: var(--down); font-size: 0.8125rem; }

@media (max-width: 1100px) {
    .zone-row { grid-template-columns: auto minmax(0, 1fr) 16px; gap: 10px 14px; padding: 16px; }
    .zone-what, .zone-status, .zone-num { grid-column: 2; }
    .zone-row > .i { grid-row: 1; grid-column: 3; }
}