/* ============================================================================
   15 · Parameter Browser — layout
   Promotes concept 07 (Index) into the search surface of 13/14. The query-bar
   dropdown now has two modes via sds-tabs — Classification (the visual tree) and
   Parameters (this view). Parameters = a "Jump to" group rail + one searchable,
   scrollable list with sticky group headers and keyboard min/max range inputs;
   applied parameters ride back in the query bar as tokens. Rail · breadcrumb ·
   search row · body (dropdown over list + detail) · status. All --sds-* tokens.
   Shared vocabulary (.cell-item, .st, .num, review-bar) in ../_shared/base.css.
   ========================================================================== */

/* ---- App grid ----------------------------------------------------------- */
.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 --------------------------------------------------- */
.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 --------------------------------------------------------- */
.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; }
.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.param { background: var(--sds-color-surface-strong); }
.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 ---------------------------------------------------- */
.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; }
.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-400) var(--sds-space-500) var(--sds-space-500); }
.filterdrop[data-open="false"] { display: none; }

/* mode switch (Classification | Parameters) */
.modehead { display: flex; align-items: center; gap: var(--sds-space-400); border-bottom: 1px solid var(--sds-color-border); }
.modehead .modecount { margin-left: auto; font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); }

/* global parameter search */
.psearch { display: flex; align-items: center; gap: var(--sds-space-300); height: 42px; margin: var(--sds-space-400) 0; 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); }
.psearch sds-icon { color: var(--sds-color-text-muted); }
.psearch .ph { font-size: var(--sds-type-body-small-size); }
.psearch .phint { margin-left: auto; font-size: var(--sds-type-footnote-size); }

/* ====== concept 07 · Index browse ====== */
.pbrowse { display: grid; grid-template-columns: 200px 1fr; gap: var(--sds-space-500); }

/* jump index */
.idx { border-right: 1px solid var(--sds-color-border); padding-right: var(--sds-space-400); }
.idx-h { font-size: var(--sds-type-footnote-size); letter-spacing: .06em; text-transform: uppercase; color: var(--sds-color-text-muted); padding: 0 var(--sds-space-200) var(--sds-space-200); }
.ix { display: flex; justify-content: space-between; align-items: center; padding: var(--sds-space-200) var(--sds-space-200); border-radius: var(--sds-radius-m); font-size: var(--sds-type-body-small-size); color: var(--sds-color-text); }
.ix .num { color: var(--sds-color-text-muted); }
.ix:hover { background: var(--sds-color-surface-hover); }
.ix.active { background: var(--sds-color-surface-strong); font-weight: var(--sds-font-weight-bold); }
.idx-set { margin-top: var(--sds-space-300); padding: var(--sds-space-300) var(--sds-space-200) 0; border-top: 1px solid var(--sds-color-border); font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); }
.idx-set a { color: var(--sds-color-primary); }

/* the scrollable parameter list */
.plist { max-height: 360px; overflow: auto; padding-right: var(--sds-space-200); }
.pgh { position: sticky; top: 0; background: var(--sds-color-surface); display: flex; align-items: center; gap: 8px; padding: var(--sds-space-300) 0 var(--sds-space-200); font-size: var(--sds-type-footnote-size); letter-spacing: .06em; text-transform: uppercase; color: var(--sds-color-text-muted); border-bottom: 1px solid var(--sds-color-border); z-index: 1; }
.prow { display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: var(--sds-space-400); padding: var(--sds-space-300) 0; border-bottom: 1px solid var(--sds-color-border); }
.prow.set { box-shadow: inset 3px 0 0 var(--sds-color-primary); padding-left: var(--sds-space-300); }
.pk { font-size: var(--sds-type-body-small-size); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pk b { font-weight: var(--sds-font-weight-bold); }
.prow:not(.set) .pk b { color: var(--sds-color-text); font-weight: var(--sds-font-weight-regular); }
.pk .code { font-family: var(--sds-font-family-text); font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); }
.ty { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--sds-radius-s); padding: 2px 7px; border: 1px solid var(--sds-color-border-strong); color: var(--sds-color-text-muted); }

/* keyboard min/max */
.minmax { display: flex; align-items: center; gap: var(--sds-space-200); }
.inp { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; border: 1.5px solid var(--sds-color-border-strong); border-radius: var(--sds-radius-s); background: var(--sds-color-surface); }
.inp input { width: 46px; border: 0; outline: 0; background: transparent; font-size: var(--sds-type-body-regular-size); color: var(--sds-color-text); }
.inp input::placeholder { color: var(--sds-color-text-muted); }
.inp .u { font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); }
.inp.empty { border-style: dashed; border-width: 1px; }
.inp.focus { border-color: var(--sds-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sds-color-primary) 18%, transparent); }
.minmax .dash { color: var(--sds-color-text-muted); }
.select { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border: 1px solid var(--sds-color-border-strong); border-radius: var(--sds-radius-s); background: var(--sds-color-surface); font-size: var(--sds-type-body-small-size); }
.select.on { border-color: var(--sds-color-primary); }
.select .cv { color: var(--sds-color-text-muted); }

/* footer */
.fd-foot { display: flex; align-items: center; gap: var(--sds-space-300); margin-top: var(--sds-space-400); 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: 1.8 1 0; min-inline-size: 160px; }
#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),
#qb-table sds-table-head > :nth-child(6), #qb-table sds-table-row > :nth-child(6) { flex: 0 0 auto; min-inline-size: 54px; }
#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: 150px; 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: 54px; 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); border: 0; padding: 0; text-transform: none; letter-spacing: 0; }
.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; }
  .pbrowse { grid-template-columns: 1fr; }
  .idx { border-right: 0; border-bottom: 1px solid var(--sds-color-border); padding-right: 0; padding-bottom: var(--sds-space-300); }
}