/* ============================================================================
   14 · Visual Tree — layout
   Evolves 13 · Querybar on two points the team asked for:
     1) the breadcrumb and the search bar are now INDEPENDENT surfaces — a slim
        breadcrumb strip, then a dedicated full-width search/query row beneath it;
     2) the classification TREE carries an IMAGE per node (tool class · group ·
        type) so users can recognise by picture as well as text.
   Keeps the "search bar opens big content inside" model. The full parameter set
   (124, mixed types) is flagged as a separate iteration. Layout only; all
   color/space/type from --sds-* tokens. Shared vocabulary (.cell-item, .st,
   .num, .muted, review-bar) lives in ../_shared/base.css.
   ========================================================================== */

/* ---- App grid: rail | (top / search / body / status) -------------------- */
.app {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 44px 52px 1fr 30px;
  grid-template-areas:
    "rail top"
    "rail search"
    "rail body"
    "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; }

/* ---- Breadcrumb strip (independent) ------------------------------------- */
.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; }
.top .tools { margin-left: auto; flex: none; display: flex; align-items: center; gap: var(--sds-space-200); }

/* ---- Search row (independent) ------------------------------------------- */
.searchrow {
  grid-area: search;
  display: flex; align-items: center; gap: var(--sds-space-300);
  padding: 0 var(--sds-space-400);
  border-bottom: 1px solid var(--sds-color-border);
  background: var(--sds-color-surface);
}
.searchrow .savedview { flex: none; }

/* the query bar IS the filter surface */
.querybar {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: var(--sds-space-200);
  height: 38px; 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);
  cursor: text;
  overflow-x: auto;
}
.querybar > sds-icon { color: var(--sds-color-text-muted); flex: none; }
.querybar .qcaret { margin-left: auto; flex: none; display: grid; place-items: center; width: 16px; height: 16px; }
.querybar .qcaret::before { content: ""; width: 0; height: 0; border-top: 5px solid var(--sds-color-text-muted); border-left: 4px solid transparent; border-right: 4px solid transparent; }
.querybar .qinput { color: var(--sds-color-text-muted); font-size: var(--sds-type-body-small-size); white-space: nowrap; }

.qtoken {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 var(--sds-space-100) 0 var(--sds-space-300);
  background: var(--sds-color-surface); color: var(--sds-color-text);
  border: 1px solid var(--sds-color-border-strong); border-radius: var(--sds-radius-pill);
  font-size: var(--sds-type-body-small-size); white-space: nowrap;
}
.qtoken .x { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--sds-color-text-muted); font-size: 14px; line-height: 1; }
.qtoken .x:hover { background: var(--sds-color-surface-hover); color: var(--sds-color-text); }
.qtoken.path { gap: 4px; padding-left: var(--sds-space-300); }
.qtoken.path .seg { color: var(--sds-color-text-muted); }
.qtoken.path .seg.cur { color: var(--sds-color-text); font-weight: var(--sds-font-weight-bold); }
.qtoken.path .sep { color: var(--sds-color-border-strong); }

/* ---- Body: dropdown overlays the panes ---------------------------------- */
.body { grid-area: body; position: relative; min-height: 0; }
.panes { display: grid; grid-template-columns: 1fr 376px; height: 100%; min-height: 0; }
.pane { min-height: 0; overflow: auto; }

/* ---- Filter dropdown ---------------------------------------------------- */
.filterdrop {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  background: var(--sds-color-surface);
  border-bottom: 1px solid var(--sds-color-border-strong);
  box-shadow: 0 18px 36px -22px rgba(0,0,0,.42);
  padding: var(--sds-space-500);
}
.filterdrop[data-open="false"] { display: none; }
.fd-grid { display: grid; grid-template-columns: minmax(320px, 380px) 1fr; gap: var(--sds-space-700); }
.fd-h { font-size: var(--sds-type-body-small-size); font-weight: var(--sds-font-weight-bold); margin-bottom: var(--sds-space-400); }
.fd-h .muted { color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-regular); }

/* ---- The VISUAL classification tree ------------------------------------- */
.fd-tree { border-right: 1px solid var(--sds-color-border); padding-right: var(--sds-space-600); }
.tree { display: flex; flex-direction: column; }
.tkids[hidden] { display: none; }
.tnode {
  display: flex; align-items: center; gap: var(--sds-space-200);
  min-height: 40px; padding: var(--sds-space-100) var(--sds-space-200); border-radius: var(--sds-radius-m);
}
.tnode:hover { background: var(--sds-color-surface-hover); }
.tnode .caret { width: 18px; height: 18px; flex: none; display: grid; place-items: center; color: var(--sds-color-text-muted); border-radius: var(--sds-radius-s); }
.tnode .caret::before {
  content: ""; width: 0; height: 0;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform var(--sds-motion-duration-fast) var(--sds-motion-ease-standard);
}
.tnode.open > .caret::before { transform: rotate(90deg); }
.tnode .caret:hover { background: var(--sds-color-surface-strong); color: var(--sds-color-text); }
.tnode .cspacer { width: 18px; flex: none; }
.tnode sds-checkbox { flex: none; }

/* the per-node image — the point of this variant */
.tnode .timg {
  width: 30px; height: 24px; flex: none; border-radius: var(--sds-radius-s);
  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 6px);
}
.tnode .timg.cat { background: var(--sds-color-surface-strong); border-style: solid; } /* class-level mark */

.tnode .tlabel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tnode.lvl1 .tlabel { font-weight: var(--sds-font-weight-bold); }
.tnode .tct { flex: none; color: var(--sds-color-text-muted); font-size: var(--sds-type-body-small-size); }
.tnode.lvl2 { padding-left: var(--sds-space-500); }
.tnode.lvl3 { padding-left: calc(var(--sds-space-500) * 2); }

/* spec facets */
.facetgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sds-space-500) var(--sds-space-600); }
.ctrl label { display: block; margin-bottom: var(--sds-space-300); font-size: var(--sds-type-body-small-size); font-weight: var(--sds-font-weight-bold); }
.ctrl label .unit { color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-regular); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sds-space-200); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--sds-control-height-s); padding: 0 var(--sds-space-300);
  border: 1px solid var(--sds-color-border-strong); border-radius: var(--sds-radius-pill);
  background: var(--sds-color-surface); color: var(--sds-color-text);
  font-size: var(--sds-type-body-small-size);
}
.chip:hover { background: var(--sds-color-surface-hover); }
.chip em { font-style: normal; color: var(--sds-color-text-muted); font-variant-numeric: tabular-nums; }
.chip.on { background: var(--sds-color-text); color: var(--sds-color-bg); border-color: var(--sds-color-text); }
.chip.on em { color: var(--sds-color-bg); opacity: .7; }
.range { padding-top: var(--sds-space-100); }
.track { position: relative; height: 4px; border-radius: var(--sds-radius-pill); background: var(--sds-color-surface-strong); }
.track .fill { position: absolute; top: 0; bottom: 0; background: var(--sds-color-text); border-radius: var(--sds-radius-pill); }
.track .knob { position: absolute; top: 50%; width: 16px; height: 16px; transform: translate(-50%,-50%); background: var(--sds-color-surface); border: 2px solid var(--sds-color-text); border-radius: 50%; }
.ends { display: flex; justify-content: space-between; margin-top: var(--sds-space-300); font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); font-variant-numeric: tabular-nums; }
.ends .cur { color: var(--sds-color-text); font-weight: var(--sds-font-weight-bold); }

/* the 124-parameter set — flagged for the next iteration */
.paramhint {
  display: flex; align-items: center; gap: var(--sds-space-400);
  margin-top: var(--sds-space-500); padding: var(--sds-space-400);
  border: 1px dashed var(--sds-color-border-strong); border-radius: var(--sds-radius-m);
  background: var(--sds-color-bg);
}
.paramhint b { font-size: var(--sds-type-body-regular-size); }
.paramhint .muted { display: block; margin-top: 2px; color: var(--sds-color-text-muted); font-size: var(--sds-type-body-small-size); }
.paramhint sds-button { margin-left: auto; flex: none; }

.fd-foot { display: flex; align-items: center; gap: var(--sds-space-300); margin-top: var(--sds-space-500); padding-top: var(--sds-space-400); border-top: 1px solid var(--sds-color-border); }
.fd-foot .rescount { font-size: var(--sds-type-body-small-size); }
.fd-foot sds-button[variant="link"] { margin-left: auto; }
.fd-foot .apply { margin-left: var(--sds-space-200); }

/* ---- Pane: 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); }

#qb-table { padding: 0 var(--sds-space-200); margin-top: var(--sds-space-200); }
#qb-table sds-table-row.active > :first-child { box-shadow: inset 3px 0 0 var(--sds-color-primary); }
#qb-table sds-table-head > *, #qb-table sds-table-row > * { padding-inline: var(--sds-space-300); }
#qb-table sds-table-head > :nth-child(2), #qb-table sds-table-row > :nth-child(2) { flex: 2.4 1 0; min-inline-size: 200px; }
#qb-table sds-table-head > :nth-child(3), #qb-table sds-table-row > :nth-child(3) { flex: 2 1 0; min-inline-size: 180px; }
#qb-table sds-table-head > :nth-child(4), #qb-table sds-table-row > :nth-child(4),
#qb-table sds-table-head > :nth-child(5), #qb-table sds-table-row > :nth-child(5) { flex: 0 0 auto; min-inline-size: 60px; }
#qb-table sds-table-head > :nth-child(6), #qb-table sds-table-row > :nth-child(6) { flex: 0 0 auto; min-inline-size: 72px; }
#qb-table sds-table-head > :nth-child(7), #qb-table sds-table-row > :nth-child(7) { flex: 0 0 auto; min-inline-size: 108px; }

/* ---- Pane: 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); }
.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); }
.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); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .panes { grid-template-columns: 1fr; }
  .pane.detail { display: none; }
  .fd-grid { grid-template-columns: 1fr; gap: var(--sds-space-500); }
  .fd-tree { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--sds-color-border); padding-bottom: var(--sds-space-400); }
}