/* ============================================================================
   Command Center — refinement layer (v1, 2026-10-25)

   Same palette, same layout: only hierarchy, depth, interaction states and
   legibility. Loaded after command-center.css so every rule here wins without
   touching the original file (revert = remove the <link>).
   ========================================================================== */

:root {
    --refine-hair: rgba(144, 207, 235, .10);
    --refine-hair-strong: rgba(144, 207, 235, .18);
    --refine-ink: #bdcbd9;
    --refine-ink-dim: #8a9fb3;
    --refine-accent: #66e5d2;
    --refine-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --refine-shadow-md: 0 10px 30px -18px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .03) inset;
    --refine-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------ text */

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3, h4 {
    letter-spacing: -.012em;
    text-wrap: balance;
}

h1 { line-height: 1.1; }
h2 { line-height: 1.2; }

p, li { line-height: 1.62; }

.eyebrow {
    letter-spacing: .16em;
    font-weight: 600;
    opacity: .85;
}

small, time, .muted {
    letter-spacing: .01em;
}

/* Tabular figures wherever numbers are compared (metrics, times, ids). */
.metric-grid strong,
.command-feed time,
table td,
table th,
code, kbd, samp {
    font-variant-numeric: tabular-nums;
}

code, kbd, samp {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .92em;
    padding: .12em .38em;
    border-radius: 5px;
    background: rgba(10, 20, 30, .75);
    border: 1px solid var(--refine-hair);
}

/* ------------------------------------------------------------- surfaces */

.surface {
    position: relative;
    border: 1px solid var(--refine-hair);
    box-shadow: var(--refine-shadow-md);
    background-image:
        radial-gradient(120% 90% at 50% -20%, rgba(144, 207, 235, .06), transparent 62%);
    transition: border-color .22s var(--refine-ease), box-shadow .22s var(--refine-ease);
}

.surface::after {
    /* One hairline highlight along the top edge: the cheapest way to make a
       flat card read as a physical panel. */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--refine-hair-strong) 22%, var(--refine-hair-strong) 78%, transparent);
}

.surface:hover {
    border-color: rgba(144, 207, 235, .16);
}

.surface h2 {
    font-weight: 650;
}

.section-title {
    align-items: baseline;
    gap: .85rem;
}

.section-title a {
    font-size: .86rem;
    opacity: .78;
    transition: opacity .18s var(--refine-ease), transform .18s var(--refine-ease);
}

.section-title a:hover {
    opacity: 1;
    transform: translateX(2px);
}

/* -------------------------------------------------------------- metrics */

.metric-grid article {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--refine-hair);
    box-shadow: var(--refine-shadow-sm);
    transition: transform .22s var(--refine-ease), border-color .22s var(--refine-ease);
}

.metric-grid article::before {
    /* A thin accent rail instead of a full coloured block: reads as a gauge. */
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: linear-gradient(180deg, var(--refine-accent), transparent 70%);
    opacity: .55;
}

.metric-grid article:hover {
    transform: translateY(-2px);
    border-color: rgba(102, 229, 210, .3);
}

.metric-grid article strong {
    letter-spacing: -.02em;
    line-height: 1;
}

.metric-grid article span {
    letter-spacing: .12em;
}

/* --------------------------------------------------------------- lists */

.live-roster a,
.command-feed article {
    border-radius: 8px;
    transition: background-color .18s var(--refine-ease), transform .18s var(--refine-ease);
}

.live-roster a:hover,
.command-feed article:hover {
    background-color: rgba(144, 207, 235, .06);
    transform: translateX(2px);
}

.command-feed article b {
    letter-spacing: .01em;
}

.command-state {
    box-shadow: 0 0 0 3px rgba(102, 229, 210, .08);
}

.empty-state {
    border: 1px dashed var(--refine-hair-strong);
    border-radius: 10px;
    color: var(--refine-ink-dim);
}

/* --------------------------------------------------------------- forms */

input, select, textarea {
    transition: border-color .16s var(--refine-ease), box-shadow .16s var(--refine-ease), background-color .16s var(--refine-ease);
}

input:hover, select:hover, textarea:hover {
    border-color: var(--refine-hair-strong);
}

input:focus, select:focus, textarea:focus {
    border-color: rgba(102, 229, 210, .55);
    box-shadow: 0 0 0 3px rgba(102, 229, 210, .12);
    outline: none;
}

input::placeholder, textarea::placeholder {
    color: rgba(138, 159, 179, .75);
}

/* Keyboard focus must always be visible, on every interactive element. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--refine-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

.primary-button,
.ghost-button {
    transition: transform .16s var(--refine-ease), box-shadow .16s var(--refine-ease),
                background-color .16s var(--refine-ease), border-color .16s var(--refine-ease);
    will-change: transform;
}

.primary-button:hover {
    box-shadow: 0 8px 22px -14px rgba(102, 229, 210, .9);
}

.primary-button:active,
.ghost-button:active {
    transform: translateY(1px);
}

.primary-button:disabled,
button:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* -------------------------------------------------------------- tables */

table {
    border-collapse: separate;
    border-spacing: 0;
}

table th {
    position: sticky;
    top: 0;
    z-index: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .74rem;
    background: rgba(10, 20, 30, .96);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--refine-hair-strong);
}

table tbody tr {
    transition: background-color .14s var(--refine-ease);
}

table tbody tr:nth-child(odd) {
    background: rgba(144, 207, 235, .022);
}

table tbody tr:hover {
    background: rgba(144, 207, 235, .07);
}

table td, table th {
    padding-block: max(6px, .55em);
}

/* ------------------------------------------------------------ chrome */

::selection {
    background: rgba(102, 229, 210, .28);
    color: #eaf6ff;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(144, 207, 235, .28) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(144, 207, 235, .22);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(144, 207, 235, .38); background-clip: padding-box; }

/* ------------------------------------------------------- motion rules */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .metric-grid article:hover,
    .live-roster a:hover,
    .command-feed article:hover,
    .section-title a:hover {
        transform: none;
    }
}

/* Higher-contrast mode: keep the accent, drop the translucent layers. */
@media (prefers-contrast: more) {
    .surface,
    .metric-grid article,
    .empty-state {
        border-color: rgba(189, 203, 217, .55);
        background-image: none;
    }

    .surface::after { display: none; }
    .eyebrow, small, time { color: #cfe0ee; }
}