/* Status and Markets pages: the page layout (main, KPI row, card grid, facts, status dots) and the
 * parts of the status page. Tokens and components (header, cards, KPIs, legends, charts, tooltip)
 * come from design/ui.css; market.css adds what only the Markets page has. */
:root {
  /* same-ramp steps for meters and the memory stack */
  --track: color-mix(in oklab, var(--ui-c1) 16%, var(--ui-surface));
  --s1-soft: color-mix(in oklab, var(--ui-c1) 45%, var(--ui-surface));
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ui-page);
  color: var(--ui-ink);
  font: var(--ui-text)/1.55 var(--ui-font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
main { max-width: var(--ui-max-width); margin: 0 auto; padding: 4px var(--ui-gutter) 24px; }
main.stale .kpis, main.stale .grid { opacity: .55; transition: opacity .3s; }

.health { margin: 0; font-size: var(--ui-text-sm); color: var(--ui-ink-2); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* status = icon + label, never color alone */
.st { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; color: var(--ui-ink-2); }
.st::before { content: ""; width: .7rem; height: .7rem; flex: none; border-radius: 50%; background: currentColor; }
.st > span { color: var(--ui-ink); }
.st.good::before { background: var(--ui-up); }
.st.warning::before { background: var(--ui-warning); border-radius: 2px; transform: rotate(45deg) scale(.85); }
.st.critical::before, .st.down::before { background: var(--ui-down); border-radius: 2px; }
.st.live::before { background: var(--ui-up); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .st.live::before { animation: none; } }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--ui-gap); margin-bottom: var(--ui-gap); }

.meter { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.meter.big { height: 12px; border-radius: 6px; }
.meter i { display: block; height: 100%; width: 0; background: var(--ui-c1); border-radius: inherit; transition: width .4s; }
.meter.warning i { background: var(--ui-warning); }
.meter.critical i { background: var(--ui-down); }

.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-gap); }
@media (min-width: 48rem) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ui-card.wide { grid-column: span 2; } }
@media (min-width: 72rem) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ui-legend { margin-bottom: 6px; min-height: calc(var(--ui-text-sm) * 1.55); }

/* chart heights, reserved before the first render so the cards keep their size; charts draw to them */
/* the four temperature charts share whatever height the row gives the card (the svg is drawn to it) */
#c-temp { display: flex; flex-direction: column; }
#c-temp .temps { flex: 1; grid-auto-rows: 1fr; }
#c-temp .temp { display: flex; flex-direction: column; min-height: 0; }
#c-temp [data-chart] { flex: 1; min-height: 56px; }
#c-temp [data-chart] svg { position: absolute; inset: 0; height: 100%; }
#c-cpu [data-chart] { height: 115px; }
#c-cpu [data-cores] { height: 86px; }
#c-mem [data-chart] { height: 170px; }
#c-disk [data-chart] { height: 105px; }
#c-net [data-chart] { height: 105px; }

.temps { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem 1.5rem; margin-top: .4rem; }
@media (min-width: 40rem) { .temps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.temp p { margin: 0 0 2px; font-size: var(--ui-text-sm); color: var(--ui-ink-2); display: flex; align-items: center; gap: .4rem; }
.temp p b { color: var(--ui-ink); font-weight: 600; }
.temp p small { margin-left: auto; font-size: var(--ui-text-xs); color: var(--ui-muted); }

.stack { display: flex; height: 22px; gap: 2px; margin: .25rem 0 .6rem; }
.stack i { height: 100%; min-width: 0; transition: flex-grow .4s; }
.stack i:first-child { border-radius: 4px 0 0 4px; }
.stack i:last-child { border-radius: 0 4px 4px 0; }

.ui-card.full { grid-column: 1 / -1; }
/* spec sheet (Machine card): label | value, the value's details on a second, quieter line */
.spec { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2.5rem; margin: .5rem 0 0; }
@media (min-width: 48rem) { .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } .spec div { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; } }
.spec div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--ui-grid); }
.spec dt { color: var(--ui-ink-2); font-size: var(--ui-text-xs); line-height: 1.6; }
.spec dd { margin: 0; font-size: var(--ui-text-sm); font-weight: 500; }
.spec dd small { display: block; margin-top: .1rem; color: var(--ui-ink-2); font-size: var(--ui-text-xs); font-weight: 400; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .35rem 1rem; margin: .6rem 0 0; }
.facts div { min-width: 0; }
.facts dt { color: var(--ui-ink-2); font-size: var(--ui-text-xs); }
.facts dd { margin: 0; font-weight: 500; font-size: var(--ui-text-sm); }
.facts dd .st { font-weight: 500; }
/* CPU and battery: a short list of long values, as label | value rows */
#c-cpu .facts, #c-bat .facts { display: block; margin-top: .75rem; }
#c-cpu .facts div, #c-bat .facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--ui-grid); }
#c-cpu .facts dd, #c-bat .facts dd { text-align: right; }
#c-bat [data-meter] { margin-top: .9rem; }

.big-num { font-size: 1.875rem; font-weight: 600; margin: 0 0 .4rem; line-height: 1.1; min-height: 1.1em; }
.big-num small { font-size: .45em; font-weight: 500; color: var(--ui-ink-2); margin-left: .4rem; }
.marks { position: relative; height: 1.4rem; font-size: var(--ui-text-2xs); color: var(--ui-muted); }
.marks span { position: absolute; top: 0; padding-top: 4px; white-space: nowrap; }
.marks span::before { content: ""; position: absolute; top: -12px; height: 16px; border-left: 1px solid var(--ui-ink-2); }
/* the two thresholds sit close together: start label grows left, stop label grows right */
.marks .lo { transform: translateX(-100%); padding-right: 5px; }
.marks .lo::before { right: 0; }
.marks .hi { padding-left: 5px; }
.marks .hi::before { left: 0; }

/* Services, Processes, Users: name with a quieter line under it | value with one under it */
.rows { margin: .4rem 0 0; padding: 0; list-style: none; }
.rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--ui-grid); }
.rows .n { min-width: 0; font-size: var(--ui-text-sm); font-weight: 500; }
.rows .v { flex: none; max-width: 55%; text-align: right; font-size: var(--ui-text-sm); }
.rows small { display: block; margin-top: .1rem; color: var(--ui-ink-2); font-size: var(--ui-text-xs); font-weight: 400; overflow-wrap: anywhere; }
.rows .v small { color: var(--ui-muted); }
.rows .empty { color: var(--ui-muted); font-size: var(--ui-text-sm); }
.rows .mute { color: var(--ui-muted); }
.rows .st > span { font-weight: 500; }

/* a KPI tile that is a link (Status's Access tile): the whole tile opens the page */
.kpi-link { color: inherit; text-decoration: none; transition: background-color .15s; }
.kpi-link:hover { background: var(--ui-surface-2); }
.kpi-link .ui-kpi-label { display: flex; }
.kpi-link .go { margin-left: auto; color: var(--ui-muted); transition: transform .15s, color .15s; }
.kpi-link:hover .go { color: var(--ui-ink); transform: translateX(2px); }

footer { margin-top: 1rem; color: var(--ui-muted); font-size: var(--ui-text-xs); text-align: center; }