/* ============================================================
   Orchestrator — component styles
   Built on tokens.css. Translates the moss-console design system
   (Button, StatusBadge, Card, SidebarNav, LogStream, tables,
   forms) into classes for the server-rendered htmx templates.
   ============================================================ */

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.eyebrow { font: var(--weight-medium) var(--text-2xs)/1 var(--font-mono); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

/* ---- App shell ---- */
.app { display: flex; min-height: 100vh; }
.sidebar { display: flex; flex-direction: column; width: var(--sidebar-w); flex-shrink: 0; background: var(--surface-panel); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 9px; padding: 0 16px; height: var(--topbar-h); border-bottom: 1px solid var(--border-soft); flex-shrink: 0; }
.brand img { width: 26px; height: 26px; }
.brand b { font: var(--weight-semibold) var(--text-lg)/1 var(--font-sans); letter-spacing: -0.01em; color: var(--text-primary); }
.nav { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); color: var(--text-muted); font: var(--weight-medium) var(--text-base)/1 var(--font-sans); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav a:hover { background: var(--surface-card); color: var(--text-secondary); }
.nav a.is-active { background: var(--surface-raised); color: var(--text-primary); box-shadow: inset 2px 0 0 var(--accent); }
.nav a.is-active svg { color: var(--accent-hover); }
.nav a .count { margin-left: auto; font: var(--weight-medium) var(--text-2xs)/1 var(--font-mono); color: var(--text-faint); }
.nav a.is-active .count { color: var(--accent-hover); }
.sidebar-foot { padding: 10px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 9px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--surface-input); border: 1px solid var(--border); font: var(--weight-semibold) var(--text-2xs)/1 var(--font-mono); color: var(--text-secondary); }
.sidebar-foot .who { flex: 1; font: var(--weight-medium) var(--text-sm)/1 var(--font-mono); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); }
.icon-btn:hover { color: var(--text-secondary); background: var(--surface-raised); }

.main { flex: 1; min-width: 0; }
.content { max-width: var(--content-max); margin: 0 auto; padding: var(--space-7) var(--gutter); }

/* ---- Page header ---- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: var(--space-6); }
.page-title { font: var(--text-page-title); display: flex; align-items: center; gap: 11px; }
.page-sub { font: var(--text-sm); color: var(--text-muted); margin-top: 5px; }
.head-actions { display: flex; gap: 8px; flex-shrink: 0; }
.self-tag { font: var(--weight-medium) var(--text-2xs)/1 var(--font-mono); color: var(--amber-400); background: var(--amber-tint); border: 1px solid var(--line-amber); padding: 3px 8px; border-radius: var(--radius-full); }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--control-md); padding: 0 14px; font: var(--weight-medium) var(--text-base)/1 var(--font-sans); letter-spacing: 0.01em; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; user-select: none; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); background: var(--surface-input); color: var(--text-primary); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn--sm { height: var(--control-sm); padding: 0 10px; font-size: var(--text-sm); gap: 6px; }
.btn--sm svg { width: 14px; height: 14px; }
.btn--lg { height: var(--control-lg); padding: 0 18px; font: var(--weight-semibold) var(--text-md)/1 var(--font-sans); }
.btn--block { width: 100%; }
.btn--secondary { background: var(--surface-input); color: var(--text-primary); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--ink-600); }
.btn--primary { background: var(--accent); color: var(--accent-fg); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active { background: var(--accent-press); }
.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--surface-raised); }
.btn--danger { background: var(--red-500); color: var(--red-ink); }
.btn--danger:hover { background: var(--red-400); }
.btn--subtle { background: var(--red-tint); color: var(--red-400); border-color: color-mix(in srgb, var(--red-500) 35%, transparent); }
.btn--subtle:hover { background: color-mix(in srgb, var(--red-500) 22%, transparent); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---- Cards ---- */
.card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--edge-lit); overflow: hidden; }
.card + .card { margin-top: 16px; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border-soft); }
.card__head .titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card__title { font: var(--text-card-title); }
.card__body { padding: 16px; }
.card__actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ---- Status badges ---- */
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: var(--radius-full); font: var(--weight-medium) var(--text-sm)/1 var(--font-mono); letter-spacing: 0.02em; white-space: nowrap; border: 1px solid var(--border); }
.badge--sm { padding: 3px 8px 3px 7px; font-size: var(--text-2xs); gap: 6px; }
.badge .dot { position: relative; display: inline-flex; width: 7px; height: 7px; flex-shrink: 0; }
.badge--sm .dot { width: 6px; height: 6px; }
.badge .dot::after { content: ""; width: 100%; height: 100%; border-radius: 999px; background: currentColor; }
.badge .dot.pulse::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: currentColor; animation: orch-pulse 1.4s var(--ease-in-out) infinite; }
@keyframes orch-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.6); } }
/* status variants: text color drives the dot; bg + border tinted */
.st-unknown,.st-canceled { color: var(--slate-400); background: var(--slate-tint); border-color: color-mix(in srgb, var(--slate-500) 38%, transparent); }
.st-reachable,.st-success,.st-online,.st-active,.st-up { color: var(--green-400); background: var(--green-tint); border-color: color-mix(in srgb, var(--green-500) 38%, transparent); }
.st-unreachable,.st-failed,.st-crashed { color: var(--red-400); background: var(--red-tint); border-color: color-mix(in srgb, var(--red-500) 38%, transparent); }
.st-bootstrapping,.st-running,.st-deploying,.st-degraded { color: var(--amber-400); background: var(--amber-tint); border-color: color-mix(in srgb, var(--amber-500) 38%, transparent); }
.st-pending { color: var(--blue-400); background: var(--blue-tint); border-color: color-mix(in srgb, var(--blue-500) 38%, transparent); }

/* ---- Tags ---- */
.tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full); font: var(--text-2xs)/1.4 var(--font-mono); color: var(--text-secondary); background: var(--surface-input); border: 1px solid var(--border); }
.tags { display: inline-flex; flex-wrap: wrap; gap: 5px; }

/* ---- Tables ---- */
.table-wrap { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { padding: 10px 14px; text-align: left; font: var(--weight-medium) var(--text-2xs)/1 var(--font-mono); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 11px 14px; font: var(--text-sm)/1.4 var(--font-sans); color: var(--text-secondary); border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.tbl tbody tr:hover { background: var(--surface-raised); }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl .name { font: var(--weight-medium) var(--text-sm)/1 var(--font-sans); color: var(--text-primary); }
.tbl .host { font-family: var(--font-mono); color: var(--text-secondary); }
.row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }
.linkish { color: var(--text-primary); cursor: pointer; }
.linkish:hover { color: var(--accent-hover); }

/* ---- Forms ---- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: 14px; }
.field__label { font: var(--weight-medium) var(--text-sm)/1 var(--font-sans); color: var(--text-secondary); }
.field__hint { font: var(--text-2xs)/1.4 var(--font-sans); color: var(--text-faint); }
.input, .textarea, select.input { width: 100%; min-height: var(--control-md); padding: 0 11px; background: var(--surface-input); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font: var(--text-base)/1 var(--font-sans); outline: none; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.input.mono, .textarea.mono { font-family: var(--font-mono); }
.textarea { padding: 9px 11px; line-height: 1.5; resize: vertical; }
.input:focus, .textarea:focus, select.input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
select.input { appearance: none; cursor: pointer; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23939a82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; }

/* radio / checkbox option rows */
.opt { display: flex; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.opt:hover { border-color: var(--border-strong); }
.opt input { margin-top: 2px; accent-color: var(--accent); }
.opt:has(input:checked) { border-color: var(--accent-line); background: var(--accent-wash); }
.opt .opt__label { font: var(--weight-medium) var(--text-sm)/1.3 var(--font-sans); color: var(--text-primary); }
.opt .opt__desc { font: var(--text-2xs)/1.45 var(--font-sans); color: var(--text-muted); margin-top: 3px; }
.checks { display: flex; flex-direction: column; gap: 6px; }
.var-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }

/* ---- Banners / alerts ---- */
.banner { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border-radius: var(--radius-md); font: var(--text-sm)/1.45 var(--font-sans); }
.banner svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.banner--info { background: var(--blue-tint); color: var(--blue-400); border: 1px solid color-mix(in srgb, var(--blue-500) 30%, transparent); }
.banner--error { background: var(--red-tint); color: var(--red-400); border: 1px solid color-mix(in srgb, var(--red-500) 35%, transparent); }
.banner--warn { background: var(--amber-tint); color: var(--amber-400); border: 1px solid var(--line-amber); }
.banner--success { background: var(--green-tint); color: var(--green-400); border: 1px solid color-mix(in srgb, var(--green-500) 35%, transparent); }
.banner strong { font-weight: var(--weight-semibold); color: inherit; }

/* ---- Key/value + copy ---- */
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 9px 16px; }
.kv dt { font: var(--text-sm)/1.5 var(--font-sans); color: var(--text-muted); }
.kv dd { margin: 0; font: var(--text-sm)/1.5 var(--font-mono); color: var(--text-primary); }
.copyfield { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-input); }
.copyfield code { flex: 1; min-width: 0; padding: 9px 11px; font: var(--text-xs)/1.5 var(--font-mono); color: var(--text-secondary); overflow-x: auto; white-space: pre; }
.copyfield button { flex-shrink: 0; border: none; border-left: 1px solid var(--border); background: var(--surface-raised); color: var(--text-secondary); padding: 0 12px; cursor: pointer; font: var(--weight-medium) var(--text-2xs)/1 var(--font-sans); }
.copyfield button:hover { color: var(--text-primary); background: var(--ink-600); }

/* ---- Empty state ---- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 56px 24px; color: var(--text-muted); }
.empty .ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius-lg); background: var(--surface-input); border: 1px solid var(--border); color: var(--text-faint); }
.empty h3 { font: var(--text-card-title); color: var(--text-secondary); }
.empty p { margin: 0; font: var(--text-sm); color: var(--text-muted); max-width: 360px; }

/* ---- Login ---- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--surface-app); }
.login__box { width: 100%; max-width: 360px; }
.login__brand { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 26px; }
.login__brand img { width: 48px; height: 48px; }
.login__brand .name { font: var(--weight-semibold) var(--text-xl)/1.1 var(--font-sans); letter-spacing: -0.01em; color: var(--text-primary); }
.login__brand .tag { font: var(--text-sm); color: var(--text-muted); margin-top: 4px; }
.login__card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 22px; }
.login__foot { text-align: center; margin-top: 16px; font: var(--text-2xs); color: var(--text-faint); }

/* ---- Log / terminal (the run-detail hero) ---- */
.log { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--term-bg); box-shadow: var(--edge-lit); }
.log__head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface-panel); border-bottom: 1px solid var(--border); }
.log__head .meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.log__head .pb { font: var(--weight-medium) var(--text-sm)/1 var(--font-mono); color: var(--text-primary); }
.log__head .tg { font: var(--text-sm)/1 var(--font-mono); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log__head .dur { font: var(--text-2xs)/1 var(--font-mono); color: var(--text-faint); white-space: nowrap; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--amber-400); box-shadow: 0 0 6px var(--amber-glow); animation: orch-blink 1s steps(1) infinite; }
@keyframes orch-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.log__body { height: 460px; overflow-y: auto; padding: 10px 0; font: var(--weight-regular) var(--text-sm)/var(--leading-mono) var(--font-mono); color: var(--term-fg); font-variant-ligatures: none; }
.log__body .ll { display: flex; align-items: flex-start; padding: 0 14px; }
.log__body .ln { flex-shrink: 0; width: 44px; padding-right: 12px; text-align: right; color: var(--term-dim); user-select: none; opacity: .7; }
.log__body .lt { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; }
.lk-task,.lk-play { color: var(--term-task); }
.lk-ok { color: var(--term-ok); }
.lk-changed { color: var(--term-changed); }
.lk-failed,.lk-fatal { color: var(--term-failed); }
.lk-skip { color: var(--term-skip); }
.lk-recap { color: var(--term-recap); }
.log__empty { padding: 0 14px; color: var(--term-dim); }
.jump-btn { position: absolute; right: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; background: var(--surface-raised); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-full); box-shadow: var(--shadow-pop); font: var(--weight-medium) var(--text-2xs)/1 var(--font-sans); cursor: pointer; }

/* ---- Toasts ---- */
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { display: flex; align-items: center; gap: 9px; padding: 10px 13px; min-width: 220px; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); font: var(--text-sm) var(--font-sans); color: var(--text-primary); animation: toast-in var(--dur-base) var(--ease-out); }
.toast--success { border-left: 3px solid var(--green-500); }
.toast--error { border-left: 3px solid var(--red-500); }
.toast--info { border-left: 3px solid var(--blue-500); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Dialog (native <dialog>) ---- */
dialog.modal { padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-lg); max-width: 440px; width: calc(100vw - 32px); }
dialog.modal::backdrop { background: var(--surface-overlay); backdrop-filter: blur(2px); }
.modal__body { padding: 18px 18px 8px; }
.modal__title { font: var(--text-card-title); margin-bottom: 8px; display: flex; align-items: center; gap: 9px; }
.modal__title.danger { color: var(--red-400); }
.modal__title.warn { color: var(--amber-400); }
.modal__text { font: var(--text-sm)/1.5 var(--font-sans); color: var(--text-secondary); }
.modal__actions { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 18px; border-top: 1px solid var(--border-soft); margin-top: 12px; }

/* ---- Utility layout ---- */
.stack { display: flex; flex-direction: column; gap: 16px; }
.cluster { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.narrow { max-width: 620px; }
.section-label { font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); color: var(--text-secondary); margin: 0 0 10px; }
hr.div { border: none; border-top: 1px solid var(--border-soft); margin: 16px 0; }