/* ============================================================================
   Console — layout
   Command-first search: a thin brand rail, then a central command bar
   (the search engine for the inventory), scope tabs + result count, neutral
   filter chips, and a results LIST of tool rows with spec line + status pill.
   Layout only; every color/space/radius/type comes from --sds-* tokens.
   Shared vocabulary (.cell-item, .st, .num, .muted, review-bar) lives in
   ../_shared/base.css.
   ========================================================================== */

.app { display: grid; grid-template-columns: 224px 1fr; min-height: calc(100vh - 34px); }

/* ---- Rail: brand over sidenav ------------------------------------------- */
.rail {
  border-right: 1px solid var(--sds-color-border);
  background: var(--sds-color-surface);
  position: sticky; top: 34px; height: calc(100vh - 34px);
  display: flex; flex-direction: column;
  padding: var(--sds-space-400) var(--sds-space-300);
  gap: var(--sds-space-200);
  overflow: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: var(--sds-space-200) var(--sds-space-200) var(--sds-space-300); }
.brand sds-logo { --sds-logo-height: 22px; height: 22px; display: inline-flex; }
.brand .product { font-family: var(--sds-font-family-headline); font-weight: var(--sds-font-weight-bold); font-size: 16px; letter-spacing: .01em; }
.brand .product .sub { color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-regular); }
.rail sds-sidenav { width: 100%; }

/* ---- Main: a calm, centered search column ------------------------------- */
.main { min-width: 0; }
.main > * { max-width: 860px; margin-inline: auto; }
.main { padding: var(--sds-space-700) var(--sds-space-600) var(--sds-space-800); }

/* ---- Command hero -------------------------------------------------------- */
.hero { margin-bottom: var(--sds-space-600); }
.hero .eyebrow { color: var(--sds-color-text-muted); font-size: var(--sds-type-body-small-size); margin: 0 0 var(--sds-space-200); }
.hero .title {
  font-family: var(--sds-font-family-headline);
  font-size: var(--sds-type-headline-3-size); line-height: var(--sds-type-headline-3-line);
  font-weight: var(--sds-type-headline-3-weight);
  margin: 0 0 var(--sds-space-400);
}

/* the search engine: large central command bar */
.cmd { display: flex; gap: var(--sds-space-200); align-items: stretch; }
.cmd sds-search { flex: 1; font-size: var(--sds-type-body-large-size); }
.cmd sds-button { flex: none; }

.suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-200); margin-top: var(--sds-space-400); }
.suggest .slab { font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); margin-right: var(--sds-space-100); }

/* ---- Scopes + result count ---------------------------------------------- */
.scopes {
  display: flex; align-items: center; gap: var(--sds-space-400);
  border-bottom: 1px solid var(--sds-color-border);
  margin-bottom: var(--sds-space-400);
}
.scopes .count { margin-left: auto; padding-bottom: var(--sds-space-300); font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); display: inline-flex; align-items: center; gap: var(--sds-space-200); }

/* ---- Active filter chips (neutral, never blue) -------------------------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-200); margin-bottom: var(--sds-space-400); }
.filters .flab { font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); margin-right: var(--sds-space-100); }
.filters .addfilter { margin-left: var(--sds-space-100); }

/* ---- Results list -------------------------------------------------------- */
.results { display: grid; gap: var(--sds-space-200); }
.rrow {
  display: flex; align-items: center; gap: var(--sds-space-400);
  padding: var(--sds-space-300) var(--sds-space-400);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-m);
  background: var(--sds-color-surface);
  transition: border-color var(--sds-motion-duration-fast, 120ms) ease, background var(--sds-motion-duration-fast, 120ms) ease;
}
.rrow:hover { background: var(--sds-color-surface-hover); border-color: var(--sds-color-border-strong); }
.rrow.top { border-color: var(--sds-color-border-strong); }
.rrow .cell-item { flex: 2 1 0; min-width: 200px; }
.rrow .spec { flex: 3 1 0; min-width: 0; font-size: var(--sds-type-body-small-size); color: var(--sds-color-text); }
.rrow .st { flex: none; min-width: 96px; }
.rrow .open { flex: none; color: var(--sds-color-text-muted); }
.rrow:hover .open { color: var(--sds-color-text); }

/* ---- Footer -------------------------------------------------------------- */
.footer {
  display: flex; align-items: center; gap: var(--sds-space-400);
  margin-top: var(--sds-space-500);
  font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted);
}
.footer .hint { min-width: 0; }
.footer sds-pagination { margin-left: auto; }

@media (max-width: 920px) {
  .rrow { flex-wrap: wrap; }
  .rrow .spec { flex: 1 1 100%; order: 3; }
}