/* Broker List — a glossary/reference directory.
   Scoped to .hh-tool-brokers-list, the wrapper the server writes around the
   extracted <main>, the same way hub.css scopes the Tools hub. Every colour,
   radius and font comes from the SPA's own tokens; this sheet defines none. */

.hh-tool-brokers-list, .hh-tool-brokers-list *, .hh-tool-brokers-list *::before, .hh-tool-brokers-list *::after{box-sizing:border-box;margin:0;padding:0}
.hh-tool-brokers-list{color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.55;letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
.hh-tool-brokers-list a{color:inherit;text-decoration:none}
.hh-tool-brokers-list :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.hh-tool-brokers-list .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Same breadcrumb / back-link stack the Quant Screener and the calculators use;
   the SPA's global .page-head is a flex row, so block flow is reclaimed here. */
.hh-tool-brokers-list .page-head{display:block;margin-bottom:20px}
.hh-tool-brokers-list .tool-crumb{font-size:12px;color:var(--text-faint);margin:0 0 6px}
.hh-tool-brokers-list .tool-back{display:inline-block;font-size:13px;text-decoration:none;color:var(--gold-ink);margin:0 0 8px}
.hh-tool-brokers-list .tool-back:hover{text-decoration:underline}
.hh-tool-brokers-list .page-head h1{font-size:26px;font-weight:700;letter-spacing:-.022em}
.hh-tool-brokers-list .page-head p{margin-top:4px;color:var(--text-dim);font-size:14px}

/* Controls: search grows, type filter and count stay their natural size. */
.hh-tool-brokers-list .bl-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.hh-tool-brokers-list .bl-search{position:relative;display:flex;align-items:center;flex:1 1 260px;min-width:0}
.hh-tool-brokers-list .bl-search svg{position:absolute;left:11px;width:15px;height:15px;color:var(--text-faint);pointer-events:none}
.hh-tool-brokers-list .bl-search input{width:100%;min-width:0;font-family:inherit;font-size:13.5px;color:var(--text);
  padding:8px 12px 8px 33px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);appearance:none}
.hh-tool-brokers-list .bl-search input::placeholder{color:var(--text-faint)}
.hh-tool-brokers-list .bl-search input::-webkit-search-cancel-button{-webkit-appearance:none}

.hh-tool-brokers-list .bl-selwrap{position:relative;display:inline-flex;align-items:center;flex:none}
.hh-tool-brokers-list .bl-selwrap::after{content:'';position:absolute;right:11px;width:7px;height:7px;pointer-events:none;
  border-right:1.5px solid var(--text-dim);border-bottom:1.5px solid var(--text-dim);transform:translateY(-2px) rotate(45deg)}
.hh-tool-brokers-list .bl-selwrap select{appearance:none;-webkit-appearance:none;font-family:inherit;font-size:12.5px;font-weight:500;
  color:var(--text);padding:8px 30px 8px 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);cursor:pointer}

.hh-tool-brokers-list .bl-count{margin-left:auto;font-size:12.5px;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Rows are hairline-separated, not cards: this reads as a directory. */
.hh-tool-brokers-list .bl-list{border-top:1px solid var(--border)}
.hh-tool-brokers-list .bl-item{border-bottom:1px solid var(--border-soft)}
.hh-tool-brokers-list .bl-row{width:100%;display:grid;grid-template-columns:54px minmax(0,1fr) auto 24px;align-items:center;gap:14px;
  padding:11px 2px;background:none;border:none;font-family:inherit;text-align:left;color:inherit;cursor:pointer}
.hh-tool-brokers-list .bl-item:hover{background:var(--surface)}
.hh-tool-brokers-list .bl-code{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.02em;
  border-radius:6px;padding:3px 0;text-align:center;
  background:var(--surface-2);color:var(--text)}
/* Type-coded identifier tiles. Backgrounds are the existing soft tokens; the
   light-mode text is a darkened shade of the same hue because --up/--down sit
   near 3:1 on a white tile, which is too faint for 12.5px type. Dark mode goes
   back to the tokens, which are already brightened there. */
.hh-tool-brokers-list .bl-code-local{background:var(--blue-soft);color:#0063c8}
.hh-tool-brokers-list .bl-code-foreign{background:var(--down-soft);color:#d32f26}
.hh-tool-brokers-list .bl-code-bumn{background:var(--up-soft);color:#1f8a42}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hh-tool-brokers-list .bl-code-local{color:var(--blue)}
  :root:not([data-theme="light"]) .hh-tool-brokers-list .bl-code-foreign{color:var(--down)}
  :root:not([data-theme="light"]) .hh-tool-brokers-list .bl-code-bumn{color:var(--up)}
}
:root[data-theme="dark"] .hh-tool-brokers-list .bl-code-local{color:var(--blue)}
:root[data-theme="dark"] .hh-tool-brokers-list .bl-code-foreign{color:var(--down)}
:root[data-theme="dark"] .hh-tool-brokers-list .bl-code-bumn{color:var(--up)}
.hh-tool-brokers-list .bl-name{font-size:14.5px;font-weight:500;color:var(--text);overflow-wrap:anywhere}
.hh-tool-brokers-list .bl-type{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--text-dim);white-space:nowrap}
.hh-tool-brokers-list .bl-chev{width:24px;height:24px;display:grid;place-items:center;color:var(--text-faint);transition:transform .2s}
.hh-tool-brokers-list .bl-chev svg{width:13px;height:13px}
.hh-tool-brokers-list .bl-item.open .bl-chev{transform:rotate(180deg);color:var(--text-dim)}

/* Detail: an extension of the row, not a card — no border, no fill. */
.hh-tool-brokers-list .bl-detail{display:none;padding:2px 2px 14px 70px}
.hh-tool-brokers-list .bl-item.open .bl-detail{display:block}
.hh-tool-brokers-list .bl-d-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;align-items:baseline;padding:5px 0;border-top:1px solid var(--border-soft)}
.hh-tool-brokers-list .bl-d-row:first-child{border-top:none}
.hh-tool-brokers-list .bl-d-k{font-size:12.5px;color:var(--text-dim)}
.hh-tool-brokers-list .bl-d-v{font-size:13px;color:var(--text);overflow-wrap:anywhere;line-height:1.5}
.hh-tool-brokers-list .bl-d-v a{color:var(--gold);font-weight:500}
.hh-tool-brokers-list .bl-d-v a:hover{text-decoration:underline}
.hh-tool-brokers-list .bl-empty-val{color:var(--text-faint)}

.hh-tool-brokers-list .bl-state{padding:28px 2px;font-size:13px;color:var(--text-faint);text-align:center}

/* ── Mobile: a purpose-built reference directory, not the desktop squeezed ──
   The row becomes code | (name over type) | chevron, so one broker reads as a
   single object instead of three stacked lines. */
@media(max-width:600px){
  /* Header: same elements, tighter rhythm. */
  .hh-tool-brokers-list .page-head{margin-bottom:12px}
  .hh-tool-brokers-list .tool-crumb{font-size:11.5px;margin:0 0 4px}
  .hh-tool-brokers-list .tool-back{font-size:12.5px;margin:0 0 6px}
  .hh-tool-brokers-list .page-head h1{font-size:29px;letter-spacing:-.024em}
  .hh-tool-brokers-list .page-head p{margin-top:3px;font-size:13.5px}

  /* Search on its own line, then filter + count share one compact row. */
  .hh-tool-brokers-list .bl-controls{gap:8px;margin-bottom:10px}
  .hh-tool-brokers-list .bl-search{flex:1 1 100%;order:1}
  .hh-tool-brokers-list .bl-search input{min-height:44px;font-size:15px;padding:10px 12px 10px 36px;border-radius:10px}
  .hh-tool-brokers-list .bl-search svg{left:13px;width:16px;height:16px}
  .hh-tool-brokers-list .bl-selwrap{order:2}
  .hh-tool-brokers-list .bl-selwrap select{min-height:44px;font-size:13.5px;border-radius:10px;padding:10px 32px 10px 13px}
  .hh-tool-brokers-list .bl-count{order:3;margin-left:auto;font-size:13px}

  /* 38x28 identifier, spanning both text lines so the row reads as one block. */
  .hh-tool-brokers-list .bl-list{border-top:none}
  .hh-tool-brokers-list .bl-row{grid-template-columns:38px minmax(0,1fr) 20px;
    grid-template-rows:auto auto;gap:2px 12px;padding:14px 2px;align-items:center}
  .hh-tool-brokers-list .bl-code{grid-column:1;grid-row:1/span 2;align-self:center;
    width:38px;height:28px;display:flex;align-items:center;justify-content:center;
    padding:0;font-size:12.5px;border-radius:7px}
  .hh-tool-brokers-list .bl-name{grid-column:2;grid-row:1;font-size:15.5px;font-weight:600;line-height:1.3}
  .hh-tool-brokers-list .bl-type{grid-column:2;grid-row:2;font-size:13px;font-weight:400;color:var(--text-faint)}
  .hh-tool-brokers-list .bl-chev{grid-column:3;grid-row:1/span 2;align-self:center;width:20px;height:20px}
  .hh-tool-brokers-list .bl-chev svg{width:14px;height:14px}

  /* Detail indents to the name column so it reads as part of the same row. */
  .hh-tool-brokers-list .bl-detail{padding:0 2px 12px 50px}
  .hh-tool-brokers-list .bl-d-row{grid-template-columns:minmax(0,1fr);gap:0;padding:6px 0}
  .hh-tool-brokers-list .bl-d-k{font-size:11.5px;letter-spacing:.01em}
  .hh-tool-brokers-list .bl-d-v{font-size:13.5px;margin-top:1px}
  /* Short fields pair up; name, website and address keep the full width. */
  .hh-tool-brokers-list .bl-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
  .hh-tool-brokers-list .bl-d-row.bl-d-wide{grid-column:1/-1}
  .hh-tool-brokers-list .bl-d-v a{display:inline-block;padding:6px 0;min-height:32px}

  .hh-tool-brokers-list .bl-state{padding:34px 8px}
  .hh-tool-brokers-list .bl-state b{display:block;font-size:14px;font-weight:600;color:var(--text-dim);margin-bottom:4px}
}

/* The shell already clears the fixed bottom nav on .layout
   (56px + 16px + safe-area). The nav measures ~59px, so that margin is thin;
   this adds a little headroom of its own rather than relying on the estimate,
   and stays safe-area aware instead of hard-coding a tall block. */
@media(max-width:1079px){
  .hh-tool-brokers-list{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
}