/* Parts shared by every page: lamps, marks, panels, tables, charts. */

/* ---------- The address of a site ---------- */

.host { font-family: var(--display); font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.host b { font-weight: 700; color: var(--ink); }
.host span { color: var(--ink-faint); }

/* ---------- The mark: one letter in the hue a site wears everywhere ---------- */

.mark {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--c) 16%, var(--panel));
    color: var(--c);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
    font: 700 0.75rem/1 var(--display);
    flex: none;
}
.mark.big { width: 44px; height: 44px; border-radius: 11px; font-size: 1.25rem; }

/* ---------- Lamps: green and calm when fine, lit when not ---------- */

.lamp {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 9px;
    align-items: center;
    align-content: center;
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--ok) 32%, var(--line-soft));
    border-radius: 4px;
    background: color-mix(in srgb, var(--ok) 8%, var(--well));
    color: var(--ink-soft);
    text-decoration: none;
}
.lamp::before {
    content: "";
    grid-row: 1 / span 2;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent);
}
.lamp-k { grid-column: 2; font-size: 0.75rem; line-height: 1.3; }
.lamp-v { grid-column: 2; font: 700 0.8125rem/1.25 var(--display); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
a.lamp:hover { border-color: var(--ok); }

.lamp.warn { background: var(--warn-fill); border-color: transparent; color: var(--on-warn); box-shadow: var(--lamp-glow) var(--warn-fill); }
.lamp.down { background: var(--down-fill); border-color: transparent; color: var(--on-down); box-shadow: var(--lamp-glow) var(--down-fill); }
.lamp.warn .lamp-v, .lamp.down .lamp-v { color: inherit; }
.lamp.warn::before, .lamp.down::before { background: currentColor; border-radius: 1px; box-shadow: none; }
.lamp.warn::before { transform: rotate(45deg); }
.lamp.busy { background: color-mix(in srgb, var(--busy) 8%, var(--well)); border-color: var(--busy); }
.lamp.busy::before { background: var(--busy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--busy) 20%, transparent); animation: pulse 1.4s ease-in-out infinite; }
.lamp.off { background: none; border-style: dashed; border-color: var(--line); color: var(--ink-faint); }
.lamp.off .lamp-v { color: var(--ink-soft); }
.lamp.off::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }

@keyframes pulse { 50% { opacity: 0.25; } }

.lamps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }

/* ---------- Marks: a shape and a word, never color alone ---------- */

.state { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.state i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); flex: none; }
.state.warn i { background: var(--warn); border-radius: 1px; transform: rotate(45deg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }
.state.down i { background: var(--down); border-radius: 1px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--down) 18%, transparent); }
.state.busy i { background: var(--busy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--busy) 18%, transparent); animation: pulse 1.4s ease-in-out infinite; }
.state.off i { background: none; box-shadow: inset 0 0 0 1.5px var(--off); }
.state + .tag, .state + .state { margin-left: 8px; }

.tag {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid var(--line);
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
    vertical-align: middle;
}
.tag + .tag { margin-left: 4px; }
b + .tag { margin-left: 8px; }
.tag.prod { border-color: transparent; background: var(--brand-wash); color: var(--brand); }
.tag.ok { border-color: transparent; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }

.sitelink { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; white-space: nowrap; }
.sitelink:hover { text-decoration: underline; }

.branch { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 0.8125rem; white-space: nowrap; }
.branch .i { width: 13px; height: 13px; color: var(--ink-faint); }

.commit { display: flex; align-items: baseline; gap: 9px; }
.commit code { color: var(--ink-soft); }
.commit.big { font-size: 1.0625rem; font-weight: 600; margin-bottom: 6px; }
.err { display: block; margin-top: 3px; color: var(--down); }

.secret { letter-spacing: 0.1em; color: var(--ink-soft); margin-right: 6px; }

/* ---------- Panels ---------- */

.panel { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); box-shadow: var(--lift); min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px 11px 12px; border-bottom: 1px solid var(--line-soft); }
.panel-head p { margin-top: 2px; color: var(--ink-soft); font-size: 0.8125rem; }
.panel-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.panel-ic {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--brand-wash);
    color: var(--brand);
    flex: none;
}
.panel-ic .i { width: 15px; height: 15px; }
.panel-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.panel-body { padding: 16px; }
.panel.flush > .panel-body { padding: 0; }
.panel-body > .table-wrap { margin: 16px -16px -16px; border-top: 1px solid var(--line-soft); }
.panel.flush > .panel-body > .table-wrap { margin: 0; border-top: 0; }

.none { padding: 20px 16px; color: var(--ink-soft); }
.panel:not(.flush) .none { padding: 4px 0; }

.empty { display: grid; justify-items: start; gap: 8px; padding: 32px 24px; border: 1px dashed var(--line); border-radius: 6px; }
.empty h3 { font-size: 1.25rem; }
.empty p { color: var(--ink-soft); max-width: 56ch; }
.empty .btn { margin-top: 8px; }
.panel .empty { border: 0; padding: 20px 16px; }
.panel:not(.flush) .empty { padding: 4px 0; }

.notice { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; padding: 9px 11px; border: 1px solid var(--busy); border-radius: var(--r); }

/* ---------- A site's own controls ---------- */

.switch-row { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }
.switch-row .switch { margin-top: 2px; }
.switch-text { display: grid; gap: 2px; }
.switch-text small { display: block; }
.account { display: inline-flex; align-items: center; gap: 8px; }
.account .i { color: var(--ink-faint); }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.84375rem; }
.table th, .table td { padding: 10px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line-soft); }
.table thead th { padding-block: 8px; font-weight: 600; font-size: 0.78125rem; color: var(--ink-soft); background: var(--well); white-space: nowrap; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--well) 60%, transparent); }
.table .num { text-align: right; white-space: nowrap; }
.table .nowrap, .table time { white-space: nowrap; }
.table .wide { min-width: 280px; }
.page > .table-wrap { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); box-shadow: var(--lift); }
.table td small { display: block; margin-top: 1px; }
.table .row-actions { text-align: right; white-space: nowrap; width: 1%; }
.row-actions .btn { vertical-align: middle; }
.row-actions .btn + .btn { margin-left: 6px; }
.row-actions .btn.icon { width: 28px; height: 28px; border-color: transparent; background: none; color: var(--ink-soft); }
.row-actions .btn.icon:hover { color: var(--ink); background: var(--well); }
.table.matrix tbody th { font-weight: 400; }

/* ---------- Figures and pairs ---------- */

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: var(--r); background: var(--line-soft); overflow: hidden; }
.figure { padding: 14px 16px; background: var(--panel); }
.figure dt { color: var(--ink-soft); font-size: 0.8125rem; }
.figure dd { margin-top: 4px; font: 700 1.5rem/1.15 var(--display); letter-spacing: 0.01em; }
.figure dd small { display: block; margin-top: 4px; font: 400 0.8125rem/1.3 var(--sans); letter-spacing: 0; }

.pairs { display: grid; gap: 0; }
.pairs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.pairs > div:last-child { border-bottom: 0; padding-bottom: 0; }
.pairs > div:first-child { padding-top: 0; }
.pairs dt { color: var(--ink-soft); flex: none; }
.pairs dd { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.pairs.wide { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 24px; }
.pairs.wide > div { display: grid; gap: 4px; padding: 0; border: 0; }
.pairs.wide dd { text-align: left; }

.meter { display: block; height: 4px; margin-top: 7px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.meter i { display: block; width: var(--v); height: 100%; border-radius: 2px; background: var(--brand); }

/* ---------- Feeds ---------- */

.feed li + li { border-top: 1px solid var(--line-soft); }
.feed a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 16px; text-decoration: none; }
.feed a:hover { background: color-mix(in srgb, var(--well) 60%, transparent); }
.feed a > .state { margin-top: 6px; }
/* A row that needs you carries its tone down its left edge too. */
.feed li.warn a { box-shadow: inset 3px 0 0 var(--warn); }
.feed li.down a { box-shadow: inset 3px 0 0 var(--down); }
.feed-main { display: grid; gap: 2px; min-width: 0; }
.feed-main span { color: var(--ink-soft); font-size: 0.8125rem; }
.feed-meta { display: grid; justify-items: end; gap: 2px; font-size: 0.8125rem; text-align: right; white-space: nowrap; }

/* ---------- Console output ---------- */

.console {
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    background: var(--well);
    font: 0.78125rem/1.7 var(--mono);
    overflow-x: auto;
    white-space: pre;
}
.console i { display: inline-block; width: 7.5em; color: var(--ink-faint); font-style: normal; user-select: none; }
.console .err { display: inline; color: var(--down); }