/* Hub — page layout. The components come from bundle.css and every value from tokens.css
   (both generated from design-system/ by `hub sync-design`); this file only arranges
   them into the hub's pages (design-system/pages.md). Values are var(--…) tokens only. */

/* ---- small layout helpers ------------------------------------------------------------------ */
.hub-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.hub-grow { flex: 1; }
.hub-inline { margin: 0; }
.hub-scroll { overflow-x: auto; }
.hub-plain { letter-spacing: 0; text-transform: none; font-weight: 400; }
.hub-lead { margin: 0 0 var(--space-6); color: var(--ink-2); max-width: 64ch; }
.hub-toolbar-line { flex-basis: 100%; }
.hub-section-head + .hub-steps, .hub-section-head + .hub-empty { margin-top: var(--space-4); }

/* ---- Header: the search gives way first when nav and buttons need the room ------------------ */
.hub-header-tools { min-width: 0; }
.hub-header-tools .hub-search { flex: 0 1 320px; min-width: 112px; width: auto; }
@media (max-width: 900px) { .hub-header-tools .hub-search { flex-basis: 100%; } }

/* ---- ServerTable heads --------------------------------------------------------------------- */
.hub-table th.hub-th-name { width: 32%; }
.hub-table th.hub-td-num { text-align: right; }

/* ---- Server page: head, then two columns --------------------------------------------------- */
.hub-server-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-8) 0 var(--space-3); }
.hub-server-title { display: flex; align-items: baseline; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.hub-server-title h1 { margin: 0; font-family: var(--font-serif); font-size: 38px; line-height: 40px; font-weight: 400; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.hub-server-id { margin-top: var(--space-2); font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-3); overflow-wrap: anywhere; }
.hub-server-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.hub-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-8); align-items: start; }
.hub-panel-head .hub-input { height: 26px; width: 180px; font-size: 12px; }
.hub-pane-state { padding: var(--space-2) var(--space-3); border-bottom: var(--hair-weight) solid var(--line-2); }
.hub-panel .hub-warnings { border-top: var(--hair-weight) solid var(--line-2); }
.hub-cloud dd .hub-hint { margin: var(--space-1) 0 0; }
.hub-subhead { border-top: var(--hair-weight) solid var(--line); }

/* ---- Deploy: builder beside the output ----------------------------------------------------- */
.hub-deploy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-5); align-items: start; }
.hub-deploy > .hub-panel + .hub-panel { margin-top: 0; }
.hub-field-group { display: flex; flex-direction: column; gap: var(--space-4); }
.hub-adhoc-name { width: 120px; }
/* a picked server with a web service: use it, or self-host it where the servers run */
.hub-picked .run { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.hub-picked .run .hub-opt { height: var(--control-height-sm); font-size: 13px; }
.hub-yaml { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }

@media (max-width: 900px) {
  .hub-cols, .hub-deploy { grid-template-columns: minmax(0, 1fr); }
  .hub-deploy > .hub-panel + .hub-panel { margin-top: 0; }
}
@media (max-width: 760px) {
  .hub-server-title h1 { font-size: 30px; line-height: 34px; }
}

/* ---- the entry page's run history (server.html, `runs`) ------------------------------------- */
.hub-runs td { font-size: 13px; line-height: 18px; }
.hub-runs th:first-child, .hub-runs td:first-child { padding-left: var(--space-3); }
.hub-runs th:last-child, .hub-runs td:last-child { padding-right: var(--space-3); }
.hub-runs { border-bottom: 0; }
.hub-runs .hub-runs-when { font-family: var(--font-mono); white-space: nowrap; color: var(--ink-2); }
.hub-runs .hub-runs-why { color: var(--ink-2); max-width: 44ch; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .hub-runs tr { padding-left: var(--space-3); padding-right: var(--space-3); }
  .hub-runs th:first-child, .hub-runs td:first-child, .hub-runs td:last-child { padding: 0; }
  .hub-runs .hub-runs-why { grid-column: 1 / -1; max-width: none; }
}
.hub-tools summary .d .hub-probe { margin-right: var(--space-2); }
#tool-rows > .hub-pager { padding: var(--space-2) var(--space-3); border-top: var(--hair-weight) solid var(--line-2); } /* a page of tools at a time */
.hub-dockerfile { border-top: var(--hair-weight) solid var(--line-2); }
.hub-dockerfile > summary { padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; }

/* ---- Suggest and moderation ---------------------------------------------------------------- */
.hub-suggest { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; margin-bottom: var(--space-6); }
.hub-stars { width: 120px; }
.hub-moderate { margin: var(--space-3) 0; }
#entries { scroll-margin-top: calc(var(--space-14) + var(--space-8)); } /* below the sticky header */
@media (max-width: 900px) { #entries { scroll-margin-top: calc(var(--space-14) * 3); } } /* its nav and search wrap */
.hub-decided td { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); }
.hub-row-desc .hub-hint { display: block; margin-top: var(--space-1); }
.hub-terms { max-width: 72ch; padding-bottom: var(--space-8); }
.hub-terms h2 { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin: var(--space-6) 0 var(--space-2); }
/* the FAQ's headings are questions: read as written, not as labels */
.hub-faq h2 { letter-spacing: 0; text-transform: none; }

/* ---- Nodes: the workers, their machines and their runs (operators only) ------------------- */
.hub-stats-flush { margin: 0 0 var(--space-5); }
.hub-nodes-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); align-items: start; margin-top: var(--space-5); }
.hub-nodes-cols > .hub-panel + .hub-panel { margin-top: 0; }
.hub-nodes td, .hub-procs td { font-size: 13px; line-height: 18px; }
.hub-nodes th:first-child, .hub-nodes td:first-child, .hub-procs th:first-child, .hub-procs td:first-child { padding-left: var(--space-3); }
.hub-nodes th:last-child, .hub-nodes td:last-child, .hub-procs th:last-child, .hub-procs td:last-child { padding-right: var(--space-3); }
.hub-nodes, .hub-procs { border-bottom: 0; }
.hub-nodes tr.child td:first-child { padding-left: var(--space-6); }
.hub-nodes-cpu { white-space: nowrap; }
.hub-nodes-cpu b { display: inline-block; min-width: 4.5ch; font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; vertical-align: middle; }
.hub-nodes-seen { white-space: nowrap; color: var(--ink-2); font-family: var(--font-mono); }
.hub-spark { vertical-align: middle; margin-left: var(--space-2); overflow: visible; }
.hub-spark .line, .hub-chart .line { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hub-spark .line { stroke-width: 1.5; }
.hub-spark .wash, .hub-chart .wash { fill: var(--ink); opacity: 0.08; }
.hub-spark .none { stroke: var(--line); stroke-width: 1; }

/* a share in use: the figure, a bar, what it is of */
.hub-meter { display: grid; grid-template-columns: 4.5ch minmax(64px, 1fr); gap: 2px var(--space-2); align-items: center; min-width: 190px; }
.hub-meter b { font-family: var(--font-mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hub-meter .bar { height: 6px; background: var(--surface-2); border: var(--hair-weight) solid var(--line); }
.hub-meter .bar i { display: block; height: 100%; background: var(--ink-2); }
.hub-meter-auth .bar i { background: var(--auth); } .hub-meter-auth b { color: var(--auth); }
.hub-meter-bad .bar i { background: var(--bad); } .hub-meter-bad b { color: var(--bad); }
.hub-meter .of { grid-column: 2; font-family: var(--font-mono); font-size: 11.5px; line-height: 16px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-node-kv { grid-template-columns: 76px 1fr; }

/* runs per hour: columns from one baseline, failed at the bottom, a 2px gap between */
.hub-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; margin-bottom: var(--space-3); font-size: 12.5px; }
.hub-legend-rest i { background: var(--ink-2); }
.hub-bars { position: relative; height: 128px; margin-left: 4ch; border-bottom: var(--hair-weight) solid var(--ink-3); }
.hub-bars .grid, .hub-chart .grid { position: absolute; left: 0; right: 0; border-top: var(--hair-weight) solid var(--line-2); pointer-events: none; }
.hub-bars .grid em, .hub-chart .grid em { position: absolute; right: 100%; top: -8px; padding-right: 6px; font-style: normal; font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--ink-3); white-space: nowrap; }
.hub-bars .cols { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 2px; }
.hub-bars .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; cursor: default; }
.hub-bars .col:hover { background: var(--surface-2); }
.hub-bars .col span { display: block; width: 100%; max-width: 24px; }
.hub-bars .col span:first-child { border-radius: 4px 4px 0 0; }
.hub-bars .rest { background: var(--ink-2); }
.hub-bars .failed { background: var(--bad); }
.hub-bars-x { display: flex; gap: 2px; margin-left: 4ch; padding-top: 4px; }
.hub-bars-x span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--ink-3); white-space: nowrap; }
.hub-tally { border-top: var(--hair-weight) solid var(--line); }

/* a machine over time: an SVG that stretches, its labels in HTML */
.hub-chart { margin: 0 0 var(--space-5); }
.hub-chart figcaption { font-size: 13px; line-height: 18px; margin-bottom: var(--space-2); }
.hub-chart figcaption b { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.hub-chart .plot { position: relative; height: 96px; margin-left: 5ch; border-bottom: var(--hair-weight) solid var(--ink-3); }
.hub-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-chart .hit { fill: transparent; }
.hub-chart .hit:hover { fill: var(--ink); fill-opacity: 0.06; }
.hub-chart .none { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; font-size: 12.5px; }
.hub-chart .ticks { position: relative; height: 18px; margin-left: 5ch; }
.hub-chart .ticks span { position: absolute; top: 3px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; line-height: 14px; color: var(--ink-3); white-space: nowrap; }

.hub-held summary, .hub-lease summary { cursor: pointer; }
.hub-held ul { list-style: none; margin: var(--space-1) 0 0; padding: 0; text-align: left; font-size: 12.5px; line-height: 18px; }
.hub-lease { border-bottom: var(--hair-weight) solid var(--line-2); }
.hub-lease > summary { padding: var(--space-2) var(--space-3); }
.hub-lease .hub-more { margin: 0; padding: var(--space-2) var(--space-3); }
.hub-lease-rows td { padding-top: 6px; padding-bottom: 6px; font-size: 12.5px; }
.hub-lease-rows td:first-child { overflow-wrap: anywhere; }
.hub-run-title { overflow-wrap: anywhere; }
.hub-run-reason { white-space: pre-wrap; overflow-wrap: anywhere; }
.hub-run-list .hub-runs-why { max-width: 52ch; }
@media (max-width: 900px) {
  .hub-nodes-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .hub-nodes tr, .hub-procs tr { padding-left: var(--space-3); padding-right: var(--space-3); }
  .hub-nodes th:first-child, .hub-nodes td:first-child, .hub-procs td:first-child, .hub-nodes td:last-child, .hub-procs td:last-child { padding: 0; }
  .hub-nodes tr.child td:first-child { padding-left: 0; }
  .hub-nodes td, .hub-procs td { grid-column: 1 / -1; }
  .hub-meter { min-width: 0; }
  .hub-bars .grid em, .hub-chart .grid em { font-size: 10px; }
}