/* Orchestrator admin styling.
   Dense, monospace-aware, dark-first. Reference: Linear / Vercel / Supabase Studio.
   - Inter for UI, JetBrains Mono for data (IDs, URLs, timestamps, prices).
   - 13px UI / 12px tabular. Line-height capped at 1.4.
   - 32px table rows, 28px form inputs. 12px container padding, 8px gaps.
   - Single green accent (#00C853), used only for active state and signal.
   - Flat: 1px borders, no shadows except on floating surfaces.
*/

:root {
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --bg:           #fafafa; /* zinc-50  */
    --bg-elev:      #ffffff;
    --bg-subtle:    #f4f4f5; /* zinc-100 */
    --bg-row-hover: #f4f4f5;
    --fg:           #18181b; /* zinc-900 */
    --fg-dim:       #71717a; /* zinc-500 */
    --fg-muted:    #a1a1aa; /* zinc-400 */
    --border:       #e4e4e7; /* zinc-200 */
    --border-soft:  #f4f4f5; /* zinc-100 */

    --accent:       #00C853;
    --accent-fg:    #052e16;
    --accent-soft:  rgba(0, 200, 83, 0.10);

    --ok:           #16a34a;
    --warn:         #d97706;
    --fail:         #dc2626;

    --radius: 4px;
    --row-h: 38px;
    --input-h: 34px;
    --pad: 16px;
    --gap: 10px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:           #0a0a0a;
        --bg-elev:      #0f0f10;
        --bg-subtle:    #131316;
        --bg-row-hover: #161618;
        --fg:           #d4d4d8; /* zinc-300 */
        --fg-dim:       #a1a1aa; /* zinc-400 */
        --fg-muted:     #71717a; /* zinc-500 */
        --border:       #27272a; /* zinc-800 */
        --border-soft:  #1c1c1f;
        --accent-soft:  rgba(0, 200, 83, 0.14);
    }
}

* { box-sizing: border-box; }

html, body { background: var(--bg); }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.45;
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
}

main {
    max-width: 820px;
    margin: 32px auto;
    padding: var(--pad);
}

/* Wider canvas for the dashboard. */
main:has(.admin-header) { max-width: 1200px; }

h1, h2, h3 {
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}
h1 { font-size: 18px; }
h2 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-dim);
    font-weight: 500;
    margin: 24px 0 var(--gap);
}

p { margin: var(--gap) 0; }
.hint { color: var(--fg-dim); }

a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--border); }
a:hover { color: var(--accent); border-bottom-color: var(--accent); }

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

code, kbd, pre, .mono {
    font-family: var(--font-mono);
    font-size: 13px;
}

code {
    background: var(--bg-subtle);
    border: 1px solid var(--border-soft);
    padding: 1px 5px;
    border-radius: var(--radius);
    color: var(--fg);
}

pre {
    background: #0a0a0a;
    border: 1px solid #27272a;
    color: #e4e4e7;
    padding: 12px 14px;
    border-radius: var(--radius);
    overflow-x: auto;
    margin: var(--gap) 0 var(--pad);
    line-height: 1.5;
    font-family: var(--font-mono);
    font-size: 13px;
}
pre code {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
}

kbd {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: var(--radius);
    padding: 2px 6px;
    color: var(--fg-dim);
    font-size: 12px;
}

p.recovery {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    padding: 10px 12px;
    border-radius: var(--radius);
    word-break: break-all;
    font-family: var(--font-mono);
    font-size: 13px;
}

code.password { font-size: 15px; font-weight: 500; }

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

form { margin: var(--pad) 0; }

label {
    display: block;
    margin-bottom: 6px;
    color: var(--fg-dim);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    height: var(--input-h);
    padding: 0 10px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
    font-family: var(--font-sans);
    color: var(--fg);
    transition: border-color 80ms ease;
}

input[type="text"]:hover,
input[type="password"]:hover { border-color: var(--fg-muted); }

input[type="text"]:focus,
input[type="password"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

button {
    margin-top: var(--pad);
    height: var(--input-h);
    padding: 0 14px;
    background: var(--fg);
    color: var(--bg);
    border: 1px solid var(--fg);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: var(--font-sans);
    font-weight: 500;
    cursor: pointer;
    transition: opacity 80ms ease;
}
button:hover { opacity: 0.88; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- inline status messages -------------------------------------------- */

.error {
    color: var(--fail);
    background: transparent;
    border: 1px solid var(--border);
    border-left: 2px solid var(--fail);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin: var(--gap) 0;
    font-size: 13px;
}

.ok-msg {
    color: var(--ok);
    background: transparent;
    border: 1px solid var(--border);
    border-left: 2px solid var(--ok);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin: var(--gap) 0;
    font-size: 13px;
}

/* --- admin dashboard ---------------------------------------------------- */

.admin-header {
    display: flex;
    align-items: baseline;
    gap: var(--pad);
    padding-bottom: var(--pad);
    margin-bottom: var(--pad);
    border-bottom: 1px solid var(--border);
}
.admin-header h1 {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 500;
}
.admin-header .hint {
    font-size: 13px;
    margin: 0;
}

/* Global site header (rendered by base.html on every page). */
.site-header {
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
    padding: 10px var(--pad);
}
.site-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
.brand-logo {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 4px;
}
.brand-name {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.01em;
}

/* Cost summary — laid out as compact KPI tiles. */
.costs-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--pad);
    margin: var(--pad) 0;
    background: var(--bg-elev);
}
.costs-section > .hint { margin: 0; font-size: 13px; }

.costs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0;
}
.cost-item {
    padding: 6px var(--pad);
    border-left: 1px solid var(--border);
}
.cost-item:first-child { border-left: 0; padding-left: 0; }
.cost-label {
    font-size: 11px;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-bottom: 6px;
}
.cost-value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 500;
    color: var(--fg);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.cost-value.bad { color: var(--fail); }
.cost-item .hint { font-size: 12px; margin: 4px 0 0; }

/* Pool table + filter. */
.pool-section { margin: var(--pad) 0; }

.filter-row {
    display: flex;
    align-items: center;
    gap: var(--pad);
    margin-bottom: var(--gap);
}
.filter-row input {
    flex: 1 1 auto;
    max-width: 400px;
    margin: 0;
}
.filter-row .hint {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--fg-dim);
}

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

table.pool, table.detail, table.checks {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

table.pool, table.checks {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

table.pool th, table.checks th {
    text-align: left;
    padding: 0 14px;
    height: var(--row-h);
    background: var(--bg-subtle);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-dim);
    border-bottom: 1px solid var(--border);
}

table.pool td, table.checks td {
    padding: 0 14px;
    height: var(--row-h);
    border-bottom: 1px solid var(--border-soft);
    color: var(--fg);
    vertical-align: middle;
}

table.pool tr:last-child td,
table.checks tr:last-child td { border-bottom: 0; }

table.pool tbody tr { transition: background-color 60ms ease; }
table.pool tbody tr:hover { background: var(--bg-row-hover); }

table.pool a {
    border-bottom: 0;
    color: var(--fg);
    font-family: var(--font-mono);
}
table.pool a code {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
}
table.pool a:hover, table.pool a:hover code { color: var(--accent); }

table.detail {
    margin-top: var(--gap);
}
table.detail th {
    text-align: left;
    padding: 8px 20px 8px 0;
    color: var(--fg-dim);
    font-weight: 500;
    font-size: 12px;
    width: 12rem;
    vertical-align: top;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
table.detail td {
    padding: 8px 0;
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 13px;
}

/* --- badges (status pills) --------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 24px;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-mono);
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--fg-dim);
    line-height: 1;
    letter-spacing: 0;
    text-transform: lowercase;
}
.badge::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--fg-muted);
}
.badge-ok::before   { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.badge-fail::before { background: var(--fail); }
.badge-warn::before { background: var(--warn); }

.badge-ok   { color: var(--fg); }
.badge-fail { color: var(--fail); }
.badge-warn { color: var(--warn); }

/* --- test results section ---------------------------------------------- */

.test-results { margin-top: var(--pad); }
.test-results p:first-child {
    display: flex;
    align-items: center;
    gap: var(--pad);
    margin-bottom: var(--gap);
}
.test-results .hint {
    font-family: var(--font-mono);
    font-size: 12px;
}

/* HTMX inflight indicator. */
.htmx-indicator {
    display: none;
    margin-left: var(--gap);
    color: var(--fg-dim);
    font-size: 12px;
    font-family: var(--font-mono);
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline; }

/* Section-divider h2 used on the participant view (Tutorial / FAQ).
   Larger and darker than the subtle uppercase h2 used on admin pages,
   set in mono so it reads as a code-aware "section". */
h2.section {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--fg);
    margin: 32px 0 var(--pad);
}

/* Inline shell prompt example — green + bold so users can spot the
   target state quickly when comparing to their terminal. */
code.prompt {
    color: var(--accent);
    font-weight: 600;
    background: var(--bg-subtle);
    border-color: var(--border);
}

/* --- status dots (admin VM detail "Status" section) ------------------- */

.dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--fg-muted);
    margin-right: 8px;
    vertical-align: 1px;
}
.dot-ok   { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.dot-fail { background: var(--fail); }
.dot-warn { background: var(--warn); }

.status-meta {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--fg-dim);
    margin: 0 0 var(--pad);
}
.status-meta code {
    background: none;
    border: 0;
    padding: 0;
    color: var(--fg-dim);
}
.status-meta a { color: var(--fg-dim); }

.status-subhead {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-dim);
    margin: var(--pad) 0 4px;
}

/* Tighter detail tables inside the status block — three small tables
   stack better with a denser cadence than the top-level Server table. */
table.status-table th,
table.status-table td {
    padding: 4px 16px 4px 0;
    font-size: 12px;
}
table.status-table td { color: var(--fg); }

/* --- participant tutorial ---------------------------------------------- */

ol.tutorial {
    padding-left: 28px;
    margin: var(--pad) 0 24px;
    counter-reset: tut;
    list-style: none;
}
ol.tutorial > li {
    position: relative;
    padding: 4px 0 4px 4px;
    margin-bottom: 16px;
    counter-increment: tut;
}
ol.tutorial > li::before {
    content: counter(tut);
    position: absolute;
    left: -28px;
    top: 4px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg-dim);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}
ol.tutorial > li p { margin: 0 0 6px; }
ol.tutorial > li p:last-child { margin-bottom: 0; }
ol.tutorial > li pre { margin: 8px 0; }

/* --- participant FAQ --------------------------------------------------- */

dl.faq { margin: var(--pad) 0 24px; }
dl.faq dt {
    font-weight: 500;
    margin-top: 14px;
    color: var(--fg);
}
dl.faq dt:first-child { margin-top: 0; }
dl.faq dd {
    margin: 4px 0 0;
    color: var(--fg-dim);
}
dl.faq dd p { margin: 0 0 6px; }
dl.faq dd pre { margin-top: 8px; }