/* ============================================================================
   03 · Workbench — layout
   Power-density master-detail terminal: icon rail · top command bar (⌘K) ·
   3-pane body (facets → item list → detail) · status bar. Dense, tabular.
   Layout only; all color/space/type from --sds-* tokens. Shared vocabulary
   (.cell-item, .st, .num, .muted, review-bar) lives in ../_shared/base.css.
   Defaults to light (data-theme="light"); flips to dark via tokens for free.
   ========================================================================== */

/* ---- App grid: rail | (top / panes / status) ---------------------------- */
.app {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 52px 1fr 30px;
  grid-template-areas:
    "rail top"
    "rail panes"
    "rail status";
  height: calc(100vh - 34px);
}

/* ---- Icon rail ---------------------------------------------------------- */
.rail {
  grid-area: rail;
  border-right: 1px solid var(--sds-color-border);
  background: var(--sds-color-surface);
  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-400); }
.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 .iconnav { width: 100%; }
.rail .rail-sp { flex: 1; }

/* ---- Top command bar ---------------------------------------------------- */
.top {
  grid-area: top;
  display: flex; align-items: center; gap: var(--sds-space-400);
  padding: 0 var(--sds-space-400);
  border-bottom: 1px solid var(--sds-color-border);
  background: var(--sds-color-surface);
}
.top .crumb { flex: none; }

/* ⌘K command field — visually a search/command launcher, centered */
.top .cmd {
  margin: 0 auto;
  width: 460px; max-width: 42vw; height: 34px;
  display: flex; align-items: center; gap: var(--sds-space-200);
  padding: 0 var(--sds-space-300);
  background: var(--sds-color-bg);
  border: 1px solid var(--sds-color-border-strong);
  border-radius: var(--sds-radius-m);
  color: var(--sds-color-text-muted);
  font-size: var(--sds-type-body-small-size);
}
.top .cmd sds-icon { color: var(--sds-color-text-muted); }
.top .cmd .cmd-text { flex: 1; }
.kbd {
  font-variant-numeric: tabular-nums;
  font-size: var(--sds-type-footnote-size);
  color: var(--sds-color-text-muted);
  background: var(--sds-color-surface-strong);
  border: 1px solid var(--sds-color-border);
  border-radius: var(--sds-radius-s);
  padding: 2px 6px;
}
.top .tools { flex: none; display: flex; align-items: center; gap: var(--sds-space-200); }

/* ---- 3-pane body -------------------------------------------------------- */
.panes {
  grid-area: panes;
  display: grid;
  grid-template-columns: 224px 1fr 376px;
  min-height: 0;
}
.pane { min-height: 0; overflow: auto; }

/* ---- Pane 1: facets ----------------------------------------------------- */
.pane.facets {
  border-right: 1px solid var(--sds-color-border);
  background: var(--sds-color-surface);
  padding: var(--sds-space-400) var(--sds-space-300);
}
.facets .fhead { display: flex; align-items: center; margin-bottom: var(--sds-space-200); padding-inline: var(--sds-space-100); }
.facets .fhead b { font-size: var(--sds-type-body-regular-size); font-weight: var(--sds-font-weight-bold); }
.facets .fhead .clear { margin-left: auto; }
.fnode { display: flex; align-items: center; gap: var(--sds-space-200); padding: var(--sds-space-100); border-radius: var(--sds-radius-m); }
.fnode:hover { background: var(--sds-color-surface-hover); }
.fnode sds-checkbox { flex: 1 1 auto; min-width: 0; }
.fnode .ct { margin-left: auto; flex: none; font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); }
.fnode.child { padding-left: var(--sds-space-500); }
.facets sds-accordion-item::part(panel) { padding-block: var(--sds-space-100); }

/* ---- Pane 2: item list -------------------------------------------------- */
.pane.list { display: flex; flex-direction: column; background: var(--sds-color-bg); }
.bulkbar {
  display: flex; align-items: center; gap: var(--sds-space-300);
  padding: var(--sds-space-200) var(--sds-space-400);
  border-bottom: 1px solid var(--sds-color-border);
  background: var(--sds-color-surface);
  flex: none;
}
.bulkbar .bcount { font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); }
.bulkbar .bcount b { color: var(--sds-color-text); }
.bulkbar .acts { margin-left: auto; display: flex; align-items: center; gap: var(--sds-space-100); }

#wb-table { padding: 0 var(--sds-space-200); margin-top: var(--sds-space-200); }
/* active (focused) row gets a left accent rail to anchor the detail pane */
#wb-table sds-table-row.active > :first-child { box-shadow: inset 3px 0 0 var(--sds-color-primary); }

/* Column sizing — sds-table cells are flex items (flex:1 1 0; min 7rem).
   Rebalance by column position so Item reads on one line, numerics stay tight. */
#wb-table sds-table-head > *, #wb-table sds-table-row > * { padding-inline: var(--sds-space-300); }
/* col 2 — Item */
#wb-table sds-table-head > :nth-child(2), #wb-table sds-table-row > :nth-child(2) { flex: 3 1 0; min-inline-size: 188px; }
/* col 3 — Class */
#wb-table sds-table-head > :nth-child(3), #wb-table sds-table-row > :nth-child(3) { flex: 1.2 1 0; min-inline-size: 100px; }
/* cols 4,5 — Ø / L (numeric, tight) */
#wb-table sds-table-head > :nth-child(4), #wb-table sds-table-row > :nth-child(4),
#wb-table sds-table-head > :nth-child(5), #wb-table sds-table-row > :nth-child(5) { flex: 0 0 auto; min-inline-size: 64px; }
/* col 6 — Stock */
#wb-table sds-table-head > :nth-child(6), #wb-table sds-table-row > :nth-child(6) { flex: 0 0 auto; min-inline-size: 116px; }

/* ---- Pane 3: detail ----------------------------------------------------- */
.pane.detail { border-left: 1px solid var(--sds-color-border); background: var(--sds-color-surface); }
.dhead { padding: var(--sds-space-400); border-bottom: 1px solid var(--sds-color-border); }
.dhead .eyebrow { font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); }
.dhead .did { font-family: var(--sds-font-family-headline); font-size: var(--sds-type-headline-6-size); line-height: var(--sds-type-headline-6-line); font-weight: var(--sds-type-headline-6-weight); margin-top: var(--sds-space-100); }
.dhead .dcode { font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); margin-top: 2px; }
.dhead .dactions { display: flex; gap: var(--sds-space-200); margin-top: var(--sds-space-300); }

/* preview viewport */
.dview { padding: var(--sds-space-400) var(--sds-space-400) var(--sds-space-300); }
.dview .vtabs { margin-bottom: var(--sds-space-300); }
.dpreview {
  height: 156px; border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-m);
  background: var(--sds-color-bg);
  display: grid; place-items: center;
}
.dpreview .tn-big {
  width: 70%; height: 56px; border-radius: var(--sds-radius-m);
  border: 1px solid var(--sds-color-border);
  background:
    linear-gradient(var(--sds-color-surface-strong), var(--sds-color-surface-strong)) padding-box,
    repeating-linear-gradient(135deg, var(--sds-color-border) 0 1px, transparent 1px 7px);
}

/* parameters key/value list */
.dsection { padding: var(--sds-space-300) var(--sds-space-400) var(--sds-space-400); }
.dtitle { font-family: var(--sds-font-family-text); font-size: var(--sds-type-body-large-size); font-weight: var(--sds-font-weight-bold); margin: 0 0 var(--sds-space-200); }
.params { margin: 0; }
.params .pr {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sds-space-300);
  padding: var(--sds-space-200) 0;
  border-bottom: 1px solid var(--sds-color-border);
  font-size: var(--sds-type-body-small-size);
}
.params dt { display: flex; align-items: baseline; gap: var(--sds-space-200); min-width: 0; margin: 0; }
.params .ty { flex: none; width: 44px; color: var(--sds-color-text-muted); font-size: var(--sds-type-footnote-size); }
.params .nm { color: var(--sds-color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.params dd { margin: 0; text-align: right; color: var(--sds-color-text); white-space: nowrap; }

/* ---- Status bar --------------------------------------------------------- */
.status {
  grid-area: status;
  display: flex; align-items: center; gap: var(--sds-space-400);
  padding: 0 var(--sds-space-400);
  background: var(--sds-color-surface);
  border-top: 1px solid var(--sds-color-border);
  font-size: var(--sds-type-footnote-size);
  color: var(--sds-color-text-muted);
}
.status .s-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--sds-color-success); }
.status .s-ok .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sds-color-success); }
.status .right { margin-left: auto; display: flex; align-items: center; gap: var(--sds-space-300); }