/* Koeru — browse and profile chrome.
 *
 * Every colour below resolves to one of the six brand tokens. The dark surface
 * steps are mixed from `night` towards `snow`, so there is no seventh hex to
 * keep in sync with BRAND.md; change `night` and the whole chrome follows.
 *
 * `signal` yellow appears in exactly three places in this file: the live dot,
 * the runner's position, and a progress fill. Not on a button, not on the
 * active nav item, not on a hover. That discipline is the identity — the
 * moment yellow means "selected", it stops meaning "live".
 */

:root { color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }

:root {
  --surface-0: var(--k-night);
  --surface-1: color-mix(in oklab, var(--k-night) 94%, var(--k-snow));
  --surface-2: color-mix(in oklab, var(--k-night) 88%, var(--k-snow));
  --surface-3: color-mix(in oklab, var(--k-night) 80%, var(--k-snow));
  --hairline:  color-mix(in oklab, var(--k-night) 84%, var(--k-glacier));
  --rail-w: 248px;
  --rail-w-collapsed: 68px;
  --topbar-h: 60px;
}

body.app {
  margin: 0;
  background: var(--surface-0);
  color: var(--k-snow);
  font-size: 15px;
}

a { color: inherit; text-decoration: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--k-snow); color: var(--k-night); padding: 10px 16px;
}
.skip:focus { left: 8px; top: 8px; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--k-glacier); outline-offset: 2px; border-radius: var(--k-radius);
}

/* --- top bar ------------------------------------------------------------ */

.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--k-space-3);
  padding: 0 var(--k-space-3);
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
}

.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand .mark { width: 28px; height: 28px; display: block; }
.wordmark {
  font-variation-settings: 'wdth' 125, 'wght' 800;
  font-size: 18px; line-height: 1; letter-spacing: -.01em; text-transform: lowercase;
}
.wordmark .tld { font-variation-settings: 'wdth' 125, 'wght' 300; color: var(--k-glacier); }

.search { flex: 1; max-width: 520px; margin: 0 auto; position: relative; display: flex; }
.search-icon {
  position: absolute; left: 12px; top: 50%; translate: 0 -50%;
  width: 17px; height: 17px; stroke: var(--k-glacier); fill: none; stroke-width: 1.8;
  pointer-events: none;
}
.search input {
  width: 100%; height: 38px; padding: 0 14px 0 36px;
  background: var(--surface-0); color: var(--k-snow);
  border: 1px solid var(--hairline); border-radius: var(--k-radius);
  font: inherit; font-size: 14px;
}
.search input::placeholder { color: var(--k-granite); }
.search input:focus { border-color: var(--k-glacier); outline: none; }

.topbar-right { display: flex; align-items: center; gap: var(--k-space-2); flex: none; }

.icon-btn {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  background: none; border: 0; border-radius: var(--k-radius);
  color: var(--k-glacier); cursor: pointer;
}
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.icon-btn:hover { background: var(--surface-2); color: var(--k-snow); }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 16px; border: 0; border-radius: var(--k-radius);
  font: inherit; font-size: 14px;
  font-variation-settings: 'wdth' 100, 'wght' 600;
  cursor: pointer; white-space: nowrap;
}
/* Primary is snow on night. Yellow would read as "this is live". */
.btn-primary { background: var(--k-snow); color: var(--k-night); }
.btn-primary:hover { background: #fff; }
.btn-quiet { background: var(--surface-2); color: var(--k-snow); }
.btn-quiet:hover { background: var(--surface-3); }
.btn-ghost { background: none; color: var(--k-glacier); border: 1px solid var(--hairline); }
.btn-ghost:hover { color: var(--k-snow); border-color: var(--k-glacier); }

.avatar-btn { background: none; border: 0; padding: 0; cursor: pointer; }
.avatar {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 50%; background: var(--surface-3); color: var(--k-snow);
  font-variation-settings: 'wdth' 108, 'wght' 650; font-size: 13px; line-height: 1;
}
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-lg { width: 76px; height: 76px; font-size: 26px; }

/* --- layout ------------------------------------------------------------- */

.layout { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
body.rail-collapsed .layout { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr); }

.rail {
  position: sticky; top: var(--topbar-h); align-self: start;
  height: calc(100dvh - var(--topbar-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--k-space-3) var(--k-space-2);
  background: var(--surface-1); border-right: 1px solid var(--hairline);
}

.rail-nav { list-style: none; margin: 0 0 var(--k-space-4); padding: 0; display: grid; gap: 2px; }
.rail-item {
  display: flex; align-items: center; gap: var(--k-space-3);
  padding: 9px 10px; border-radius: var(--k-radius); color: var(--k-glacier);
  font-size: 14px;
}
.rail-item svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail-item:hover { background: var(--surface-2); color: var(--k-snow); }
.rail-item.is-active { background: var(--surface-3); color: var(--k-snow); font-variation-settings: 'wdth' 100, 'wght' 600; }

.rail-app { margin-top: var(--k-space-3); border-top: 1px solid var(--hairline); border-radius: 0; padding-top: 14px; }
.rail-heading {
  margin: 0 0 var(--k-space-2); padding: 0 10px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--k-granite);
}
.rail-runner-text { display: grid; min-width: 0; line-height: 1.25; }
.rail-name { color: var(--k-snow); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-sub { font-size: 12px; color: var(--k-granite); }

.k-live { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--k-glacier); }

/* Collapsed rail keeps the icons and avatars, drops the words. */
body.rail-collapsed .rail { padding-inline: 10px; }
body.rail-collapsed .rail-item { justify-content: center; padding-inline: 0; }
body.rail-collapsed .rail-item span:not(.avatar):not(.k-live-dot),
body.rail-collapsed .rail-heading { display: none; }
body.rail-collapsed .rail-runner { position: relative; }
body.rail-collapsed .rail-runner .k-live-dot {
  position: absolute; right: 10px; top: 8px;
  box-shadow: 0 0 0 2px var(--surface-1);
}

.main { padding: var(--k-space-4); min-width: 0; }
.main.is-wide { padding: 0; }

/* --- section headers ---------------------------------------------------- */

.section { margin-bottom: var(--k-space-6); }
.section-head {
  display: flex; align-items: baseline; gap: var(--k-space-3);
  margin-bottom: var(--k-space-3);
}
.section-head h2 {
  margin: 0; font-size: 19px;
  font-variation-settings: 'wdth' 108, 'wght' 650;
}
.section-head .count { font-size: 13px; color: var(--k-granite); }

.empty {
  padding: var(--k-space-6) var(--k-space-4); text-align: center;
  border: 1px dashed var(--hairline); border-radius: var(--k-radius);
  color: var(--k-granite);
}
.empty p { margin: 0 0 6px; }

/* --- profile ------------------------------------------------------------ */

.profile-head {
  display: flex; align-items: center; gap: var(--k-space-4); flex-wrap: wrap;
  padding: var(--k-space-4); margin-bottom: var(--k-space-4);
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--k-radius);
}
.profile-id { display: flex; align-items: center; gap: var(--k-space-3); min-width: 0; }
.profile-id h1 { margin: 0; font-size: 26px; font-variation-settings: 'wdth' 125, 'wght' 800; letter-spacing: -.01em; line-height: 1.05; }
.profile-id .handle { margin: 3px 0 0; color: var(--k-granite); font-size: 14px; }
.profile-actions { display: flex; gap: var(--k-space-2); margin-left: auto; }

.totals { display: flex; flex-wrap: wrap; gap: var(--k-space-5); margin-top: var(--k-space-2); }
.total { display: grid; gap: 2px; }
.total .label { font-size: 12px; color: var(--k-granite); letter-spacing: .04em; text-transform: uppercase; }
.total .value {
  font-variation-settings: 'wdth' 88, 'wght' 700;
  font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums;
  font-size: 23px; line-height: 1.1;
}
.total .value small { font-size: 13px; color: var(--k-glacier); font-variation-settings: 'wdth' 100, 'wght' 400; margin-left: 3px; }

/* Quiet explanatory line under an empty state. */
.chat-note { font-size: 12px; color: var(--k-granite); margin: 0; }

/* --- run table ---------------------------------------------------------- */

.runs { display: grid; gap: 2px; }
.run-row {
  display: grid; align-items: center; gap: var(--k-space-3);
  grid-template-columns: 44px minmax(0, 1fr) repeat(3, 92px) 96px;
  padding: 12px var(--k-space-3); border-radius: var(--k-radius);
  background: var(--surface-1);
}
.run-row:hover { background: var(--surface-2); }
.run-row .spark { width: 44px; height: 26px; }
.run-row .rt { min-width: 0; }
.run-row .rt strong { display: block; font-size: 14px; font-variation-settings: 'wdth' 108, 'wght' 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-row .rt span { font-size: 12px; color: var(--k-granite); }
.run-row .num {
  font-variation-settings: 'wdth' 88, 'wght' 700;
  font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums;
  font-size: 14px; text-align: right;
}
.run-row .num small { display: block; font-size: 11px; color: var(--k-granite); font-variation-settings: 'wdth' 100, 'wght' 400; }
.run-row .when { font-size: 13px; color: var(--k-granite); text-align: right; }

@media (max-width: 860px) {
  .run-row { grid-template-columns: 44px minmax(0, 1fr) 92px; }
  .run-row .num:nth-of-type(n+2), .run-row .when { display: none; }
  .layout { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr); }
  .search { max-width: none; }
}

/* Phones: the rail is a desktop affordance. At this width its collapsed column
   still ate a fifth of the screen and its labels spilled over the page. The
   runners it lists are one tap away on the home page. */
@media (max-width: 640px) {
  .layout, body.rail-collapsed .layout { grid-template-columns: minmax(0, 1fr); }
  .topbar { gap: var(--k-space-2); }

  /* The rail becomes a drawer: out of the way until the menu button asks
     for it, and then over the page rather than beside it. Always expanded
     here — a collapsed icon column is a desktop idea. */
  .rail {
    position: fixed; z-index: 40; top: var(--topbar-h); left: 0;
    width: min(300px, 86vw); height: calc(100dvh - var(--topbar-h));
    transform: translateX(-100%); visibility: hidden;
    transition: transform .22s var(--k-ease), visibility 0s linear .22s;
  }
  body.rail-open .rail { transform: none; visibility: visible; transition: transform .22s var(--k-ease); }
  body.rail-open::after {
    content: ''; position: fixed; inset: var(--topbar-h) 0 0; z-index: 35; background: rgb(0 0 0 / .45);
  }
  body.rail-collapsed .rail { padding-inline: var(--k-space-2); }
  body.rail-collapsed .rail-item { justify-content: flex-start; padding-inline: revert; }
  body.rail-collapsed .rail-item span:not(.avatar):not(.k-live-dot),
  body.rail-collapsed .rail-heading { display: revert; }
}

/* A chosen picture fills the same circle the initials sat in. */
.avatar { overflow: hidden; }
.avatar.has-img { background: none; padding: 0; }
.avatar.has-img img { display: block; width: 100%; height: 100%; object-fit: cover; }