/* hq, in the studio's look (gelopard-com design-system, by way of Lekstuga's
   admin.css): near-black, glass cards with a ring, mono labels, the accent
   only for what waits. Phone first: one column of cards, links wrapping, a
   pill with the count only. From 720 px the cards flow into as many columns
   as fit (340 px at least), the page widens up to 1680 px, and each card
   names why under its links. */
:root {
  --bg: #050505; --glass: rgba(255,255,255,.06); --glass-hover: rgba(255,255,255,.09);
  --ring: rgba(255,255,255,.10); --ring-strong: rgba(255,255,255,.18);
  --text: #eaf2f7; --text-2: #bdc9d1; --muted: #93a2ac;
  --accent: #2cc7ce;
  --r-md: 18px; --r-full: 999px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); }
a { color: var(--text); }
main { padding: 8px 16px 64px; max-width: 1680px; margin: 0 auto; }

.top { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px;
  background: rgba(5,5,5,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--ring); }
.top form { display: flex; align-items: center; gap: 10px; margin: 0; }
.mark { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--mono); letter-spacing: .14em; }
.mark .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

.eyebrow { margin: 18px 0 4px; font: 600 11px/1 var(--mono); letter-spacing: .14em; color: var(--accent); }
h2 { font-size: 17px; margin: 0 0 8px; }
.muted { color: var(--muted); } .small { font-size: 13px; } .mono { font-family: var(--mono); font-size: 13px; }
p { margin: 0 0 10px; }
.note { margin: 14px 0 0; }

.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.row { background: var(--glass); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--ring); padding: 12px 14px; min-width: 0;
  display: grid; gap: 6px; align-content: start; }
.who { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.designation { font: 600 11px/1 var(--mono); letter-spacing: .1em; color: var(--muted); }
.links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.links a { text-decoration: none; color: var(--text-2); font-size: 14px; padding: 4px 0; white-space: nowrap; }
.links a:hover { color: var(--text); text-decoration: underline; }
/* The repo status line: a datasheet row, quiet, never coloured. */
.status { margin: 0; color: var(--muted); font-size: 12px; letter-spacing: .02em; }

/* A card led by its image: the service mark, the title's icon, or marked
   initials where a title has no icon yet (never a decorative stand-in). */
.row.lead { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
.row .body { display: grid; gap: 6px; min-width: 0; align-content: start; }
.row img.mark, .row img.icon { display: block; }
.row img.icon { border-radius: 23%; }
.initials { box-sizing: border-box; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 13px;
  border: 1px dashed rgba(255,255,255,.28); font: 600 15px/1 var(--sans); color: var(--text-2); }
.does { margin: 0; font-size: 12px; color: var(--muted); }

/* Waiting: every pill on the page, gathered. */
.waits { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wait a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; text-decoration: none; color: var(--text);
  background: var(--glass); box-shadow: inset 0 0 0 1px rgba(92,225,230,.35); }
.wait a:hover { background: var(--glass-hover); }
.wait img { display: block; flex: none; }
.wait img.icon { border-radius: 8px; }
.wait .initials { width: 32px; height: 32px; border-radius: 8px; font-size: 11px; flex: none; }
.wait .what { display: grid; gap: 1px; min-width: 0; }
.wait .what b { font-size: 14px; }
.wait .what span { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.wait .pill { margin-left: auto; flex: none; }

/* Host cards: three numbers, each with its last hour. */
.metrics { display: grid; gap: 4px; margin: 2px 0 0; }
.metrics > div { display: grid; grid-template-columns: 64px 1fr 60px; align-items: center; gap: 10px; }
.metrics dt { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.metrics dd { margin: 0; font-size: 14px; color: var(--text); }
.metrics dd.hour { color: var(--muted); }
.spark { display: block; width: 60px; height: 16px; overflow: visible; }
.spark polyline { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* What waits for the owner: the one use of the accent. */
.pill { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; padding: 1px 7px; border-radius: var(--r-full);
  font: 700 11px/1.6 var(--mono); color: #061012; background: var(--accent); box-shadow: 0 0 10px rgba(44,199,206,.45); vertical-align: 1px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-full);
  border: 0; background: var(--glass); color: var(--text); font: 600 14px/1 var(--sans); box-shadow: inset 0 0 0 1px var(--ring-strong); cursor: pointer; }
.btn.small { min-height: 32px; padding: 0 12px; font-size: 13px; }
.btn.primary { background: var(--text); color: var(--bg); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.signin { padding-top: 64px; text-align: center; }
.signin h1 { font-size: 26px; margin: 0 0 8px; }

@media (min-width: 720px) {
  main { padding: 8px 24px 64px; }
  .rows { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
  .studio .rows { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .waits { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .row { padding: 14px 16px; }
}