/* ════════════════════════════════════════════════════════════════════════
   COCKPIT — the realm drill-down, rebuilt as an instrument cluster.

   The overview tab used to be one flex column: vitals, controls, cluster,
   details, each full width and each carrying equal visual weight. It read
   as a list of unrelated blocks stacked down the page rather than as a
   panel you operate.

   It now composes. A wide instrument bay holds the numbers you WATCH; a
   narrow spec rail holds the facts you LOOK UP; the action bar spans
   beneath both. Reading order follows use: glance at health, act, then
   check identity.

   Loaded after overture.css so it can refine that base without forking it.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── THE PANEL PRIMITIVE ────────────────────────────────────────────────
   One surface, used by every block on the page.

   The overview previously mixed two worlds: the instrument bay, rail and
   action bar carried a bordered panel surface, while the cluster block and
   the status block were bare flex containers with no surface at all. That
   is why half the page looked considered and half looked like leftovers.
   Everything is a panel now, and anything added later should be too.
   ──────────────────────────────────────────────────────────────────────── */

.ovt-ck-panel {
    position: relative;
    padding: 0.95rem 1.05rem;
    border: 1px solid var(--ovt-hairline);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.012);
}

/* the heavier variant, for panels holding live instrumentation */
.ovt-ck-panel-lit {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 60%),
        var(--ovt-bg-panel);
}

.ovt-ck-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.42fr);
    gap: 1rem;
    /* stretch, not start: the two panels must share a baseline and a bottom
       edge or the composition reads as two unrelated boxes that happen to sit
       side by side. Whichever column is taller sets the height; the shorter
       one fills to match. */
    align-items: stretch;
}

@media (max-width: 900px) {
    .ovt-ck-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ─── instrument bay ─────────────────────────────────────────────────── */

.ovt-ck-bay {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.05rem 1.15rem 1rem;
    border: 1px solid var(--ovt-hairline);
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 60%),
        var(--ovt-bg-panel);
    overflow: hidden;
}

/* faint instrument ruling, so the panel reads as a surface, not a fill */
.ovt-ck-bay::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 100% 22px, 22px 100%;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 72%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 72%);
}

/* corner tick: a small panel affectation that costs nothing */
.ovt-ck-bay::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    border-top: 1px solid var(--ovt-green);
    border-right: 1px solid var(--ovt-green);
    opacity: 0.4;
    pointer-events: none;
}

.ovt-ck-bay > * { position: relative; }

/* ─── headline gauge: ms/tick against its 50 ms budget ───────────────── */

.ovt-ck-gauge { display: block; margin-bottom: 1rem; }

.ovt-ck-gauge-top {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin-bottom: 0.5rem;
}

.ovt-ck-gauge-val {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 800;
    font-size: clamp(2.1rem, 4.4vw, 2.9rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--ovt-fg);
}

.ovt-ck-gauge-val.is-good { color: var(--ovt-green-soft); text-shadow: 0 0 22px rgba(16, 185, 129, 0.28); }
.ovt-ck-gauge-val.is-warn { color: var(--ovt-amber);      text-shadow: 0 0 22px rgba(251, 191, 36, 0.26); }
.ovt-ck-gauge-val.is-bad  { color: var(--ovt-red);        text-shadow: 0 0 22px rgba(248, 113, 113, 0.30); }
.ovt-ck-gauge-val.is-none { color: var(--ovt-fg-dim);     text-shadow: none; }

.ovt-ck-gauge-unit {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ovt-fg-dim);
}

.ovt-ck-gauge-track {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

.ovt-ck-gauge-fill {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.5), var(--ovt-green));
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ovt-ck-gauge-fill.is-warn { background: linear-gradient(90deg, rgba(251, 191, 36, 0.45), var(--ovt-amber)); }
.ovt-ck-gauge-fill.is-bad  { background: linear-gradient(90deg, rgba(248, 113, 113, 0.45), var(--ovt-red)); }

/* markers give the number context without needing a legend */
.ovt-ck-gauge-mark {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 1px;
    background: var(--ovt-fg-dim);
    opacity: 0.55;
}

.ovt-ck-gauge-mark.is-budget { background: var(--ovt-red); opacity: 0.7; }

.ovt-ck-gauge-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 0.35rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.54rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ovt-fg-dim);
}

/* ─── secondary readouts ─────────────────────────────────────────────── */

/* mirrors the rail links: anchored to the bay's bottom edge, so both panels
   have a weighted base and finish level with each other */
.ovt-ck-readouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 0.55rem 1rem;
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--ovt-hairline);
}

/* ─── spec rail ──────────────────────────────────────────────────────── */

.ovt-ck-rail {
    display: flex;
    flex-direction: column;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--ovt-hairline);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.012);
}

/* External links in the reference column. Text, not tiles: the tab bar is
   the page's navigation, and a second row of navigation-shaped controls
   underneath it reads as two navbars stacked. */
/* margin-top:auto anchors these to the BOTTOM of the rail, so the links sit
   on the panel's base edge instead of trailing off wherever the identity
   list happens to end. Combined with the stretched grid, the two columns
   finish flush. */
.ovt-ck-rail-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: auto;
    padding-top: 0.7rem;
    border-top: 1px solid var(--ovt-hairline);
}

.ovt-ck-rail-links a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.22rem 0;
    text-decoration: none;
    font-size: 0.7rem;
    color: var(--ovt-fg-muted);
    transition: color 0.14s ease;
}

.ovt-ck-rail-links a span {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--ovt-fg-dim);
    transform: translateX(-2px);
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.14s ease;
}

.ovt-ck-rail-links a:hover { color: var(--ovt-green-soft); }
.ovt-ck-rail-links a:hover span { color: var(--ovt-green-soft); transform: translateX(1px); }

@media (prefers-reduced-motion: reduce) {
    .ovt-ck-rail-links a span { transition: none; }
}

.ovt-ck-rail-head {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ovt-fg-dim);
    padding-bottom: 0.5rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--ovt-hairline);
}

/* ════════════════════════════════════════════════════════════════════════
   ACTION BAR — colour carries meaning.

   Every control used to be the panel's green, which made "stop" and
   "start" look like the same kind of decision. Lifecycle actions are now
   keyed by consequence: green starts, amber interrupts, red stops, a
   hotter red kills. At rest the bar stays quiet so it does not compete
   with the instruments above it; colour arrives on hover and on arming.
   ════════════════════════════════════════════════════════════════════════ */

.ovt-ck-actionbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--ovt-hairline);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent);
}

.ovt-ck-actionbar .ovt-ck-ctrl-group { gap: 0.45rem; }

/* each action carries its own accent through a custom property */
.ovt-btn-act {
    --act: var(--ovt-fg-muted);
    --act-dim: rgba(255, 255, 255, 0.08);
    position: relative;
    padding-left: 1.5rem;
}

/* status lamp: readable at rest, so the row is scannable before hover */
.ovt-btn-act::before {
    content: '';
    position: absolute;
    left: 0.6rem;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: var(--act);
    opacity: 0.75;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.ovt-btn-act:hover:not(:disabled) {
    border-color: var(--act);
    color: var(--act);
    background: var(--act-dim);
}

.ovt-btn-act:hover:not(:disabled)::before { opacity: 1; box-shadow: 0 0 7px var(--act); }
.ovt-btn-act:disabled::before { opacity: 0.25; }

.ovt-btn-start   { --act: var(--ovt-green-soft); --act-dim: rgba(16, 185, 129, 0.09); }
.ovt-btn-restart { --act: var(--ovt-amber);      --act-dim: rgba(251, 191, 36, 0.09); }
.ovt-btn-stop    { --act: var(--ovt-red);        --act-dim: rgba(248, 113, 113, 0.09); }
.ovt-btn-kill    { --act: #ff5f56;               --act-dim: rgba(255, 95, 86, 0.12); }
.ovt-btn-drain   { --act: var(--ovt-cyan);       --act-dim: rgba(103, 232, 249, 0.09); }

/* Armed fills with the action's OWN colour, so the confirm step still says
   what is being confirmed. Previously every armed button went amber. */
.ovt-btn-act.is-armed {
    background: var(--act);
    border-color: var(--act);
    color: #07090c;
    box-shadow: 0 0 14px var(--act-dim);
}

.ovt-btn-act.is-armed::before { background: #07090c; opacity: 0.85; box-shadow: none; }

/* kill is the only irreversible one, so it is the only one that pulses */
.ovt-btn-kill.is-armed { animation: ovtKillPulse 1.1s ease-in-out infinite; }

@keyframes ovtKillPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 95, 86, 0.35); }
    50%      { box-shadow: 0 0 20px rgba(255, 95, 86, 0.65); }
}

@media (prefers-reduced-motion: reduce) {
    .ovt-btn-kill.is-armed { animation: none; }
    .ovt-ck-gauge-fill { transition: none; }
}

.ovt-ck-actionbar .ovt-ck-ctrl-sep {
    width: 1px;
    align-self: stretch;
    margin: 0 0.2rem;
    background: var(--ovt-hairline);
}

/* Cluster-wide controls sit on one line with their explanations, matching
   the lifecycle bar's rhythm. They used to be two stacked rows, each with a
   button and a trailing note, which is why the block read as a separate
   feature bolted underneath rather than part of the same panel. */
.ovt-ck-clusterbar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ovt-hairline);
}

.ovt-ck-clusterbar .ovt-ck-ctrl-sep {
    width: 1px;
    align-self: stretch;
    min-height: 1.4rem;
    margin: 0 0.2rem;
    background: var(--ovt-hairline);
}

/* the retire trigger inside a cluster bar keeps the destructive tone the
   rest of the page uses for irreversible things */
.ovt-ck-clusterbar .ovt-btn-retire,
.ovt-ov-danger .ovt-btn-retire {
    --act: var(--ovt-red);
    --act-dim: rgba(248, 113, 113, 0.1);
}

/* danger zone: nested inside a panel, so it needs a radius to sit properly
   rather than bleeding to the panel's square edge */
.ovt-ov-danger {
    border-radius: 0 3px 3px 0;
    padding-right: 0.75rem;
}

/* Collapsed to the trigger alone. The explanation lives inside the confirm
   flow, where it is read at the moment it matters, instead of occupying
   three lines on a page people visit to check tick rate. */
.ovt-ov-danger-slim {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.ovt-ov-danger-slim .ovt-act-row { margin: 0; }

/* ─── tone without the lamp ──────────────────────────────────────────────
   Small in-row buttons (kick, send to hub, message) are actions too and
   deserve the same colour logic, but a status lamp at that size is noise.
   These take the accent and the armed fill only. One system, two weights.
   ──────────────────────────────────────────────────────────────────────── */

.ovt-btn-tone {
    --act: var(--ovt-fg-muted);
    --act-dim: rgba(255, 255, 255, 0.08);
}

.ovt-btn-tone:hover:not(:disabled) {
    border-color: var(--act);
    color: var(--act);
    background: var(--act-dim);
}

.ovt-btn-tone.is-armed {
    background: var(--act);
    border-color: var(--act);
    color: #07090c;
    box-shadow: 0 0 12px var(--act-dim);
}

/* shared vocabulary: what the action DOES, not which page it is on */
.ovt-tone-go     { --act: var(--ovt-green-soft); --act-dim: rgba(16, 185, 129, 0.09); }
.ovt-tone-warn   { --act: var(--ovt-amber);      --act-dim: rgba(251, 191, 36, 0.09); }
.ovt-tone-bad    { --act: var(--ovt-red);        --act-dim: rgba(248, 113, 113, 0.09); }
.ovt-tone-move   { --act: var(--ovt-cyan);       --act-dim: rgba(103, 232, 249, 0.09); }
.ovt-tone-quiet  { --act: var(--ovt-fg-muted);   --act-dim: rgba(255, 255, 255, 0.06); }

/* ════════════════════════════════════════════════════════════════════════
   DESTINATIONS — navigation, not actions.

   "browse files", "deploy", "crash reports" and "proxy config" were styled
   with the same button class as "stop" and "kill". They go somewhere; they
   do not change anything. Giving a link the same affordance as a
   destructive action is what made the page read as scattered buttons.

   These are tiles: quiet at rest, a leading glyph, a trailing chevron that
   slides on hover. Unmistakably "go here" rather than "do this".
   ════════════════════════════════════════════════════════════════════════ */

.ovt-ck-dests {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 0.5rem;
}

.ovt-ck-dest {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.62rem 0.75rem;
    border: 1px solid var(--ovt-hairline);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.012);
    text-decoration: none;
    color: var(--ovt-fg-muted);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ovt-ck-dest:hover {
    border-color: var(--ovt-hairline-strong, rgba(255, 255, 255, 0.2));
    background: rgba(255, 255, 255, 0.03);
    color: var(--ovt-fg);
}

.ovt-ck-dest-glyph {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.72rem;
    color: var(--ovt-fg-dim);
    transition: color 0.15s ease, background 0.15s ease;
}

.ovt-ck-dest:hover .ovt-ck-dest-glyph {
    color: var(--ovt-green-soft);
    background: rgba(16, 185, 129, 0.12);
}

.ovt-ck-dest-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.ovt-ck-dest-name {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ovt-ck-dest-sub {
    font-size: 0.63rem;
    color: var(--ovt-fg-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ovt-ck-dest-go {
    margin-left: auto;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--ovt-fg-dim);
    transform: translateX(-2px);
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s ease;
}

.ovt-ck-dest:hover .ovt-ck-dest-go { transform: translateX(1px); color: var(--ovt-green-soft); }

/* a destination that is also a warning (crash reports with a count) */
.ovt-ck-dest.is-alert { border-color: rgba(251, 191, 36, 0.3); }
.ovt-ck-dest.is-alert .ovt-ck-dest-glyph { color: var(--ovt-amber); background: rgba(251, 191, 36, 0.1); }

/* Hero destination: same anatomy, more weight. Used where the page's real
   purpose is elsewhere — on a proxy, the console is nearly useless and the
   routing config is what you came for. It keeps a distinct accent because
   it marks a different KIND of server, but it is no longer a one-off
   component with its own shape. */
.ovt-ck-dest-hero {
    grid-column: 1 / -1;
    padding: 0.8rem 0.95rem;
    border-color: rgba(196, 181, 253, 0.38);
    border-left: 2px solid var(--ovt-violet, #B19CD9);
    background: linear-gradient(90deg, rgba(196, 181, 253, 0.07), rgba(196, 181, 253, 0.015));
}

.ovt-ck-dest-hero:hover {
    border-color: var(--ovt-violet, #B19CD9);
    background: linear-gradient(90deg, rgba(196, 181, 253, 0.12), rgba(196, 181, 253, 0.03));
}

.ovt-ck-dest-hero .ovt-ck-dest-glyph {
    width: 28px; height: 28px; font-size: 0.85rem;
    color: var(--ovt-violet, #B19CD9);
    background: rgba(196, 181, 253, 0.12);
}

.ovt-ck-dest-hero:hover .ovt-ck-dest-glyph {
    color: var(--ovt-violet, #B19CD9);
    background: rgba(196, 181, 253, 0.2);
}

.ovt-ck-dest-hero .ovt-ck-dest-name { font-size: 0.7rem; color: var(--ovt-fg); }
.ovt-ck-dest-hero .ovt-ck-dest-sub { white-space: normal; }
.ovt-ck-dest-hero:hover .ovt-ck-dest-go { color: var(--ovt-violet, #B19CD9); }

/* ─── section headings, so the tabs share one rhythm ─────────────────── */

.ovt-ck-sec {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ovt-fg-dim);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

/* the rule trailing a heading: cheap, and it stops sections floating free */
.ovt-ck-sec::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ovt-hairline);
}

@media (prefers-reduced-motion: reduce) {
    .ovt-ck-dest-go { transition: none; }
}