/* nine71 Foundry — the rail and the home screen (2026-09-09).
 *
 * Loaded after style.css and written against its tokens. What it changes:
 *
 *   THE RAIL is a gray column and the work area is white, with one hairline
 *   between them ("gray sidebar; the content on the right pure white"). The
 *   nav is grouped — an all-caps describer, plain items under it, no
 *   subtitles — and the Upload Tracks door sits at the very top under the
 *   mark: black, white text, full rail width, 40px.
 *
 *   THE HOME SCREEN opens on five numbers in one row of white tiles, then the
 *   two lists in white panels. Nothing here says "test runs".
 *
 * Every colour is a token except the three the brief fixes by hand: the rail
 * gray (#f3f3f6), the door (black on white) and the current item's text
 * (full black). Those three are written for the light theme, which is the
 * default this surface wears since today; the dark theme keeps its own
 * equivalents so the toggle still means something. Adaptive layout only —
 * the grids are auto-fit and the one media query is the existing 900px
 * rail-to-top-bar fold from style.css, honoured, not added to. */

/* ---------- the ground ----------
   The work area is white in light. The token, not a rule on .work: the
   sign-in door, the onboarding screens and every card that reads --bg or
   --surface then agree with the page they sit on. */
:root[data-theme="light"] body.foundry-consumer {
  --bg: #ffffff;
  --rail-bg: #f3f3f6;
  --rail-hover: #e8e8ee;
  --rail-current-fg: #000000;
  --door-bg: #000000;
  --door-fg: #ffffff;
  --door-hover: #1f1f24;
}
body.foundry-consumer {
  --rail-hover: var(--surface-2);
  --rail-current-fg: var(--text);
  --door-bg: var(--invert-bg);
  --door-fg: var(--invert-fg);
  --door-hover: var(--text-2);
}

/* ---------- the rail ---------- */
.foundry-consumer .side {
  background: var(--rail-bg);
  border-right: 1px solid var(--border);
  padding: 18px 12px 14px;
}
.foundry-consumer .side-top { padding: 2px 6px 18px; }

/* The door. Outside the grouped list on purpose — it is the thing you do
   here, not a place you go. selectMode still marks it current on the upload
   screen (aria-current), and it stays black either way: the rail's one
   filled control is the action, not the location. */
.rail-upload {
  display: block; width: 100%; height: 40px;
  border: none; border-radius: 8px;
  background: var(--door-bg); color: var(--door-fg);
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1;
  cursor: pointer; margin: 0 0 20px;
}
.rail-upload:hover { background: var(--door-hover); }
.rail-upload:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; }

.foundry-consumer .side-nav { gap: 0; }
.rail-group { display: flex; flex-direction: column; gap: 2px; padding-bottom: 16px; }
.rail-group:last-child { padding-bottom: 0; }
.rail-sec {
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
  padding: 0 10px 6px; margin: 0;
}

/* Items: one line, 36px, 8px corners. The border is drawn transparent at rest
   so a current item does not shift by a hairline when it gains one. The rule
   marker style.css draws on ::before is retired — the white tile is the mark. */
.foundry-consumer .nav-item {
  flex-direction: row; align-items: center; gap: 0;
  height: 36px; min-height: 36px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 8px;
  color: var(--text-2);
}
.foundry-consumer .nav-item::before { display: none; }
.foundry-consumer .nav-item:hover { background: var(--rail-hover); color: var(--text); }
.foundry-consumer .nav-item.current {
  background: var(--surface); border-color: var(--border); color: var(--rail-current-fg);
}
.foundry-consumer .nav-name { font-size: 14px; font-weight: 500; line-height: 1; }

.foundry-consumer .side-foot { padding-top: 12px; }

/* Below 900px the rail is a top bar (style.css). The groups dissolve into the
   tab row, the describers go with them, and the door becomes a compact black
   pill beside the account chip. */
@media (max-width: 900px) {
  .foundry-consumer .side { padding: 10px 12px 0; }
  .foundry-consumer .side-top { padding: 0 0 10px; }
  .rail-upload { width: auto; height: 34px; padding: 0 14px; margin: 0 10px 10px 0; }
  .rail-group { display: contents; }
  .rail-sec { display: none; }
  .foundry-consumer .nav-item { height: 34px; min-height: 34px; padding: 0 12px; border-radius: 8px; }
}

/* ---------- home ---------- */
.home-intro { padding: 26px 0 20px; }

/* Five numbers, one row. auto-fit rather than a fixed five: on any width that
   holds five 140px tiles it is one row; narrower, it wraps by itself. */
.home-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 20px;
}
.home-stats:empty { display: none; }
.hstat {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.hstat-n {
  font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.hstat-k { font-size: 12.5px; color: var(--muted); line-height: 1.3; }

/* The two lists, in white panels with a hairline. */
.home-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px; margin-bottom: 28px;
}
.home-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px 10px; min-width: 0;
}
.home-panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 6px;
}
.home-panel-head h2 { font-size: 15px; font-weight: 600; }
.home-more {
  border: none; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--muted);
}
.home-more:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.home-more:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; }
#view-home .hs-row { padding: 10px 0; }
#view-home .hs-name { font-weight: 500; }
#view-home .home-panel > .muted { padding: 6px 0 8px; }
#view-home .hu-tile { background: var(--surface); }
#view-home .hu-tile:hover { border-color: var(--border-2); }
#view-home .home-grid { padding-bottom: 6px; }