/*
 * Iridex Host: only what the portal adds on top of the homepage's own
 * stylesheets (base.css and site.css, copied in by scripts/sync-host.mjs).
 * Colours, fonts, buttons, cards, the header and the footer all come from
 * those, so this page cannot drift from the homepage.
 */
:root { --hx-ok: var(--success, #7dd3a0); --hx-warn: var(--warning, #f0b429); --hx-bad: var(--danger, #e5484d); }

.hx-wrap { width: min(1080px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) 0 4rem; min-height: 60vh; }
.hx-dim { color: var(--text-dim); }
.hx-row { flex-wrap: wrap; }
.row > .grow, .grow { flex: 1; min-width: 200px; }
.hx-hint { font-size: 13px; color: var(--text-dim); }
.hx-err { color: var(--hx-bad); font-size: 14px; margin-top: 8px; min-height: 1em; }
.hx-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.hx-title h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); }

/* Header: same bar as the homepage, with the account on the right. */
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hx-who { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-family: var(--font-mono); font-size: 13px; }
.hx-who img { width: 24px; height: 24px; border-radius: 50%; }
.site-header .nav-links a.active { color: var(--text-bright); }
@media (max-width: 720px) { .site-header .nav-links { display: none; } }

.test-banner { position: relative; z-index: 2; background: rgba(240, 180, 41, .1); border-bottom: 1px solid rgba(240, 180, 41, .28); color: var(--hx-warn); text-align: center; padding: 8px 16px; font-size: 13px; font-family: var(--font-mono); }

/* Landing */
.hx-landing { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.hx-hero { display: block; text-align: center; max-width: 720px; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3.5rem) 0 0; }
.hx-badge { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border-hi); border-radius: var(--radius-full, 999px); padding: 5px 14px; margin-bottom: 22px; background: var(--surface); }
.hx-hero h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); line-height: 1.04; margin: 0 0 18px; text-wrap: balance; }
.hx-hero p { color: var(--text-muted); font-size: 1.08rem; margin: 0 auto 26px; max-width: 560px; }
.hx-section-h { text-align: center; margin-bottom: 22px; }
.hx-section-h h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); }
.hx-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .hx-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hx-features { grid-template-columns: 1fr; } }
.hx-feature { padding: 22px; }
.hx-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-alt); border: 1px solid var(--border); display: grid; place-items: center; margin-bottom: 14px; }
.hx-ico svg { width: 18px; height: 18px; stroke: var(--text-bright); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hx-feature h3 { font-size: 1.02rem; margin: 0 0 6px; }
.hx-feature p { color: var(--text-muted); font-size: 14px; margin: 0; }
.hx-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0; margin: 0; counter-reset: how; }
@media (max-width: 760px) { .hx-how { grid-template-columns: 1fr; } }
.hx-how li { list-style: none; position: relative; padding: 22px 22px 22px 66px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md, 16px); }
.hx-how li::before { counter-increment: how; content: counter(how); position: absolute; left: 22px; top: 22px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-hi); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; color: var(--text-muted); }
.hx-how strong { display: block; color: var(--text-bright); font-family: var(--font-display); margin-bottom: 3px; }
.hx-how span { color: var(--text-muted); font-size: 14px; }
.hx-note { text-align: center; color: var(--text-dim); font-size: 13px; margin: 0; }

/* Setup */
.hx-steps { display: grid; gap: 16px; }
.hx-step { display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 22px; }
.hx-step-n { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-hi); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; color: var(--text-muted); }
.hx-step.done .hx-step-n { background: var(--hx-ok); color: #06210f; border-color: transparent; }
.hx-step.locked { opacity: .5; }
.hx-step h2 { font-size: 1.1rem; }
.hx-step label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-muted); }

/* Panel */
.hx-bot-head { display: flex; align-items: center; gap: 14px; }
.hx-bot-head img { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-alt); border: 1px solid var(--border-hi); }
.pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 3px 12px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--border-hi); font-family: var(--font-mono); margin-top: 4px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); }
.pill.running { color: var(--hx-ok); border-color: rgba(125, 211, 160, .35); }
.pill.running .dot { background: var(--hx-ok); box-shadow: 0 0 8px var(--hx-ok); }
.pill.starting, .pill.stopping { color: var(--hx-warn); border-color: rgba(240, 180, 41, .35); }
.pill.starting .dot, .pill.stopping .dot { background: var(--hx-warn); }
.pill.suspended { color: var(--hx-bad); border-color: rgba(229, 72, 77, .35); }
.pill.suspended .dot { background: var(--hx-bad); }
.hx-grid { display: grid; gap: 16px; }
.hx-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .hx-grid-2 { grid-template-columns: 1fr; } }
.hx-metric { display: grid; gap: 8px; align-content: start; }
.hx-metric-top { display: flex; justify-content: space-between; align-items: baseline; }
.hx-metric-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.hx-metric-val { font-family: var(--font-mono); font-size: 1.2rem; color: var(--text-bright); }
canvas.hx-spark { width: 100%; height: 64px; display: block; }
.hx-bar { height: 8px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.hx-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), rgba(232, 232, 238, .55)); border-radius: 999px; transition: width .4s; }
.hx-kv { display: grid; grid-template-columns: 100px 1fr; gap: 6px 14px; font-size: 14px; margin: 0; }
.hx-kv dt { color: var(--text-muted); }
.hx-kv dd { margin: 0; font-family: var(--font-mono); font-size: 13px; word-break: break-all; }
.card h2 { font-size: 1.05rem; }

/* Overlays */
.hx-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--surface-solid, #101013); border: 1px solid var(--border-hi); border-radius: 10px; padding: 10px 16px; font-size: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); z-index: 90; }
.hx-confirm-back { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: grid; place-items: center; z-index: 100; padding: 16px; }
.hx-confirm { background: var(--surface-solid, #101013); border: 1px solid var(--border-hi); border-radius: var(--radius-md, 16px); padding: 22px; width: min(420px, 100%); }
.hx-confirm .row { justify-content: flex-end; margin-top: 16px; }

/* Loading */
.skel { border-radius: 12px; background: linear-gradient(90deg, var(--surface) 25%, var(--surface-alt) 50%, var(--surface) 75%); background-size: 200% 100%; animation: hxsk 1.3s infinite linear; }
@keyframes hxsk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ---- header (same shape as the dashboard's) ---- */
.site-header #navUser { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.theme-toggle { width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); flex-shrink: 0; padding: 0; transition: color .2s var(--ease-out), border-color .2s var(--ease-out); }
.theme-toggle:hover { border-color: var(--accent); color: var(--text-bright); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
@media (max-width: 640px) { .hx-who span, .hx-who { font-size: 12px; } .site-header { gap: var(--space-3, 12px); padding-inline: var(--space-4, 16px); } }

/* ---- shared bits ---- */
.hx-narrow { max-width: 720px; margin: 0 auto; }
.hx-wide { width: min(1240px, calc(100% - 2rem)); }
.hx-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-muted); }
.hx-stack { display: grid; gap: 16px; }
.hx-title > div > h1 { margin: 0; }
.hx-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 980px) { .hx-tiles { grid-template-columns: 1fr 1fr; } }
.hx-tile { display: grid; gap: 6px; align-content: start; padding: 18px 20px; }
.hx-checks { display: grid; gap: 10px; margin-top: 12px; font-size: 14px; }
.hx-checks div { display: flex; gap: 10px; align-items: center; }
.hx-checks i { width: 8px; height: 8px; border-radius: 50%; background: var(--hx-ok); flex: none; }
.hx-copy { font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--surface-alt); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; margin-left: 8px; cursor: pointer; }
.hx-copy:hover { color: var(--text-bright); border-color: var(--border-hi); }
.hx-kv dd { display: flex; align-items: center; flex-wrap: wrap; }

/* ---- panel: sidebar + content ---- */
.hx-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.hx-side { position: sticky; top: 92px; display: grid; gap: 18px; }
.iridex-app-chrome .hx-side { top: 76px; }
.hx-side-bot { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md, 16px); }
.hx-side-bot img, .hx-avatar-empty { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-alt); border: 1px solid var(--border-hi); flex: none; display: grid; place-items: center; }
.hx-avatar-empty svg { width: 20px; height: 20px; stroke: var(--text-muted); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hx-side-name { display: grid; gap: 4px; min-width: 0; }
.hx-side-name strong { font-family: var(--font-display); color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-side-name .pill { margin-top: 0; width: fit-content; }
.hx-nav { display: grid; gap: 4px; }
.hx-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; color: var(--text-muted); text-decoration: none; font-size: 14.5px; font-weight: 500; border: 1px solid transparent; transition: background-color .15s, color .15s; }
.hx-nav a svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hx-nav a:hover { color: var(--text-bright); background: var(--surface); }
.hx-nav a.is-active { color: var(--text-bright); background: var(--surface-alt); border-color: var(--border-hi); }
.hx-body { min-width: 0; }
.hx-body .hx-title { margin-bottom: 22px; }
.hx-body .card { padding: 22px; }
.hx-body .card + .card { margin-top: 0; }
@media (max-width: 860px) {
  .hx-shell { grid-template-columns: 1fr; gap: 18px; }
  .hx-side { position: static; }
  .hx-nav { grid-auto-flow: column; grid-auto-columns: 1fr; overflow-x: auto; padding-bottom: 2px; }
  .hx-nav a { justify-content: center; padding: 9px 10px; }
  .hx-nav a span { font-size: 13px; }
}

/* ---- danger zone ---- */
.hx-danger { border-color: rgba(229, 72, 77, .4); }
.hx-danger h2 { color: var(--hx-bad); }
.hx-danger-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.hx-danger-row:first-of-type { margin-top: 12px; }
.hx-danger-row strong { display: block; color: var(--text-bright); }
.hx-danger-row p { margin: 3px 0 0; color: var(--text-muted); font-size: 14px; max-width: 520px; }
.hx-body h2 { margin: 0; }

/* ---- setup extras ---- */
.hx-step-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* ---- polish ---- */
.hx-crumb { font-family: var(--font-mono); font-size: .9rem; color: var(--text-dim); margin-left: -6px; }
.hx-body p { font-size: 14.5px; line-height: 1.55; }
.hx-body .hx-hint { font-size: 13px; }
.hx-body .card h2 { font-size: 1.05rem; letter-spacing: -.005em; }
.hx-body .hx-title p { font-size: 15px; }
.hx-status { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; padding: 20px 24px; }
.hx-status-main { display: flex; align-items: center; gap: 16px; }
.hx-status-main strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--text-bright); }
.hx-status-main p { margin: 2px 0 0; }
.hx-status-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--text-dim); flex: none; box-shadow: 0 0 0 5px rgba(128, 128, 140, .12); }
.hx-status-dot.running { background: var(--hx-ok); box-shadow: 0 0 0 5px rgba(125, 211, 160, .16), 0 0 14px var(--hx-ok); }
.hx-status-dot.starting, .hx-status-dot.stopping { background: var(--hx-warn); box-shadow: 0 0 0 5px rgba(240, 180, 41, .16); }
.hx-tile .hx-metric-val { font-size: 1.3rem; }
.hx-side-bot { background: linear-gradient(180deg, var(--surface-alt), var(--surface)); }
.hx-danger { background: linear-gradient(180deg, rgba(229, 72, 77, .06), transparent); }
.hx-kv { grid-template-columns: 110px 1fr; }
.hx-kv dd { min-width: 0; }
.hx-tile .hx-hint { margin-top: -2px; }
@media (max-width: 860px) {
  .hx-nav { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .hx-nav a { flex-direction: column; gap: 5px; padding: 10px 4px; text-align: center; }
  .hx-nav a span { font-size: 12px; }
}