.bl { display: grid; gap: .75rem; padding: .75rem; }
.bl .nb-chart-wrap { flex: none; height: 19.5rem; }
.cab .nb-quote .button.small { min-height: 2.25rem; padding: .25rem .75rem; font-size: .9375rem; }
.bl-list { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.bl-top { position: sticky; top: 0; z-index: 3; display: grid; gap: .5rem; padding-bottom: .25rem; background: var(--night); }
.bl-scroll, .bl-live { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }

.key-lotline { width: 1.25rem; border-top: 3px dotted var(--lot); }
.key-sell2 { width: 1.25rem; border-top: 2px solid var(--down); }
.key-free { width: .75rem; height: .75rem; border-radius: 50%; background: var(--spare); }

.bl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.bl-count { min-width: 1.5rem; padding: 0 .4375rem; border-radius: 999px; background: var(--line); color: var(--text); font-size: .8125rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.cab .bl-hint { color: var(--muted); font-size: .875rem; }
.bl-title { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .375rem .25rem; font-size: 1.125rem; font-weight: 650; }

.bl-acc { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; min-width: 0; }
.cab .bl-connect { min-height: 3rem; border-style: dashed; color: var(--muted); font-weight: 600; white-space: nowrap; }
.cab .bl-connect:hover { color: var(--text); }
.cab .bl-connect.bl-plus { width: 3rem; padding: 0; }
.bl-connect svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.bl-rows { display: grid; gap: .5rem; }
.bl-cols, .bl-row {
  display: grid; column-gap: .875rem; align-items: center;
  grid-template-columns: minmax(0, 1.95fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .95fr) minmax(0, .7fr) 2.75rem 1.25rem;
  grid-template-areas: "stock money closed paper armed set open";
}
.bl-cols { padding: 0 1rem; color: var(--muted); font-size: .8125rem; font-weight: 600; }
.bl-cols span:nth-child(1) { grid-area: stock; } .bl-cols span:nth-child(2) { grid-area: money; }
.bl-cols span:nth-child(3) { grid-area: closed; } .bl-cols span:nth-child(4) { grid-area: paper; }
.bl-cols span:nth-child(5) { grid-area: armed; }
.bl-row { position: relative; row-gap: .375rem; padding: .625rem .75rem .625rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: .625rem; cursor: pointer; }
.bl-row:has(.bl-why), .bl-row:has(.bl-go) { grid-template-areas: "stock money closed paper armed set open" "why why why why go go go"; }
.bl-row:hover { border-color: var(--line2); }
.bl-row.parked { cursor: default; }
.bl-row:has(.bl-pick:checked) { background: var(--raise); border-color: var(--line2); box-shadow: inset 3px 0 0 var(--brass-line); }
.bl-pick { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bl-row:has(.bl-pick:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.bl-row > :not(.bl-pick) { position: relative; z-index: 1; pointer-events: none; }
.bl-row :is(a, button, .bl-go, .bl-set, .bl-open) { pointer-events: auto; }
.bl-stock { grid-area: stock; min-width: 0; }
.bl-money { grid-area: money; } .bl-armed { grid-area: armed; }
.bl-pnl { display: contents; }
.bl-pnl > :first-child { grid-area: closed; } .bl-pnl > :last-child { grid-area: paper; }
.bl-set { grid-area: set; } .bl-open { grid-area: open; }
.bl-why { grid-area: why; } .bl-go { grid-area: go; justify-self: end; }
.bl-name { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .625rem; }
.bl-row .symbol { font-size: 1.1875rem; }
.bl-row a.symbol:hover { text-decoration: underline; text-underline-offset: .2em; }
.bl-row .pill { font-size: .8125rem; padding: .125rem .5rem; }
.cab .bl-sub { margin-top: .125rem; color: var(--muted); font-size: .8125rem; overflow-wrap: anywhere; }
.bl-name .practice { font-size: .6875rem; padding: 0 .375rem; }
.bl-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bl-v { display: block; font-size: 1.0625rem; font-weight: 650; font-stretch: 106%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-s { display: block; color: var(--muted); font-size: .8125rem; white-space: nowrap; }
.bl-row .bl-s { white-space: normal; }
.bl-armed .bl-v b { font-weight: 650; }
.cab .bl-why p { color: var(--muted); font-size: .9375rem; line-height: 1.4; overflow-wrap: anywhere; }
.cab .bl-why p + p { margin-top: .25rem; }
.cab .bl-why p.warn { color: var(--warn); font-weight: 600; }
.cab .bl-why p.bad { color: var(--down); font-weight: 600; }
.cab .bl-go { min-height: 2.5rem; padding: .25rem 1rem; background: transparent; border-color: var(--brass-line); color: var(--accent); }
.cab .bl-go:hover { background: var(--brass-t); }
.bl-set.button { width: 2.75rem; min-height: 2.5rem; padding: 0; color: var(--muted); }
.bl-set:hover { color: var(--text); }
.bl-set svg, .bl-open svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.bl-set-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bl-open { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.bl-open:hover { color: var(--text); }
.cab .bl-queue, .cab .bl-note { color: var(--muted); font-size: .875rem; }
.cab .bl-queue { margin-top: .25rem; }
.cab .bl-empty { padding: 1.25rem 1rem; background: var(--panel); border: 1px dashed var(--line2); border-radius: .625rem; color: var(--muted); text-align: center; }

.bl .nb-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; min-width: 0; margin: 0; font-size: 1.25rem; font-weight: 700; overflow-wrap: anywhere; }
.bl .nb-head .button.small, .bl .nb-head button.small { flex: none; min-height: 2.5rem; padding: .25rem .875rem; font-size: .9375rem; white-space: nowrap; }
#pause-slot { flex: none; }
.bl-status { display: flex; align-items: baseline; gap: .5rem; color: var(--muted); font-size: .9375rem; overflow-wrap: anywhere; }
.bl-status::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--up); transform: translateY(-.0625rem); }
.bl-status.bad { color: var(--down); font-weight: 600; }
.bl-status.bad::before { background: var(--down); }
.bl-status.muted::before { background: var(--spare); }
.bl-acct-top .halt-bar { margin-top: .75rem; overflow-wrap: anywhere; }
.bl-acct-top .sim-note { margin-top: .25rem; font-size: .875rem; }
.cab .bl-acct-top p.quiet { margin-top: .5rem; overflow-wrap: anywhere; }
.bl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: .875rem 0 0; }
.bl-tiles > div { padding: .625rem .75rem .6875rem; background: var(--raise); border-radius: .625rem; container-type: inline-size; }
.bl-tiles dt { color: var(--muted); font-size: .875rem; font-weight: 600; }
.bl-tiles dd { --big: 1.3125rem; margin: .125rem 0 0; font-size: min(var(--big), 100cqi / (var(--n, 10) * .62)); font-weight: 650; font-stretch: 108%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-acct-top .nb-rows { margin-top: .375rem; padding: 0 .25rem; }
.cab .bl-acct-top .bl-spare { margin: 0; padding: 0 .25rem; font-size: .8125rem; line-height: 1.45; }
.bl-more { display: grid; gap: .5rem; margin-top: .875rem; }
.cab .bl-more .notice { margin: 0; font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; }
.bl-credit { padding: .625rem .75rem .75rem; background: var(--raise); border-radius: .625rem; }
.bl-credit .field-head { display: flex; align-items: center; gap: .5rem; }
.bl-credit .field-head label { font-weight: 650; cursor: pointer; }
.bl-credit .switch { margin-left: auto; }
.cab .bl-credit .hint { margin-top: .375rem; font-size: .8125rem; line-height: 1.45; }
.bl-credit .state { color: var(--muted); font-size: .8125rem; font-weight: 700; }
.bl-credit:has(.switch:checked) { box-shadow: inset 0 0 0 1px var(--up); }
.cab .bl-credit .note { margin-top: .375rem; color: var(--text); font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.bl-credit .note:empty { display: none; }
.cr-sheet .cr-how { margin-top: 1.25rem; font-weight: 650; }
.cr-sheet .cr-face { width: 100%; margin-top: .75rem; }
.cr-sheet input[aria-invalid="true"] { border-color: var(--down); box-shadow: 0 0 0 1px var(--down); }
dialog.sheet.cr-sheet { scroll-padding-bottom: 5.5rem; }
.cr-sheet .foot { position: sticky; bottom: 0; padding: .75rem 0; background: var(--panel); }

.bl-alloc { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.bl-alloc h3 { margin: 0 0 .625rem; font-size: 1rem; font-weight: 650; }
.bl-alloc-body { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.bl-donut { display: block; width: 100%; height: auto; }
.bl-donut circle, .bl-donut path { fill: none; stroke-width: 13; }
.bl-donut .d-bg { stroke: var(--raise); }
.bl-donut .d-lot { stroke: var(--lot); } .bl-donut .d-buy { stroke: var(--up); } .bl-donut .d-free { stroke: var(--spare); }
.d-big { fill: var(--text); font-family: "Archivo", system-ui, sans-serif; font-size: 15px; font-weight: 700; text-anchor: middle; font-variant-numeric: tabular-nums; }
.d-big.long { font-size: 12px; }
.d-big.longer { font-size: 10.5px; }
.d-small { fill: var(--muted); font-family: "Archivo", system-ui, sans-serif; font-size: 11px; text-anchor: middle; }
.bl-alloc-rows { display: grid; gap: .375rem; margin: 0; }
.bl-alloc-rows > div { padding: .375rem .625rem; background: var(--raise); border-radius: .5rem; container-type: inline-size; }
.bl-alloc-rows dt { display: flex; align-items: center; gap: .375rem; color: var(--muted); font-size: .8125rem; font-weight: 600; }
.bl-alloc-rows dd { margin: 0; font-size: min(1em, 100cqi / (var(--n, 10) * .62)); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-alloc .key { margin: 0; }
.bl-alloc .nb-rows { margin-top: .5rem; padding: 0 .25rem; }

.bl-explain { display: flex; flex-direction: column; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: .75rem; overflow: hidden; }
.bl-explain .ex-phone { display: none; }
.bl-explain .nb-quote h2 { margin: 0; font-size: 1.125rem; }
.bl-explain-body { display: grid; gap: .75rem; padding: .75rem 1rem 1rem; }
.bl-explain svg { display: block; width: 100%; height: auto; max-height: 15rem; }
.ex-lv { stroke: var(--line2); stroke-width: 1.5; stroke-dasharray: 5 5; }
.ex-price { fill: none; stroke: var(--price); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ex-buy { fill: var(--up); }
.ex-sell { fill: var(--panel); stroke: var(--down); stroke-width: 2.5; }
.ex-tag { fill: var(--muted); font-family: "Archivo", system-ui, sans-serif; font-size: 13px; font-weight: 600; }
.ex-ax { fill: var(--muted); font-family: "Archivo", system-ui, sans-serif; font-size: 12px; text-anchor: end; font-variant-numeric: tabular-nums; }
.bl-explain .legend { margin: 0; }
.bl-steps { display: grid; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.bl-steps li { counter-increment: st; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .5rem; font-size: .9375rem; line-height: 1.45; }
.bl-steps li::before { content: counter(st); display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; border: 1px solid var(--brass-line); border-radius: 50%; color: var(--accent); font-size: .8125rem; font-weight: 750; }
@media (min-width: 1024px) { .bl-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.nb-main > .nt-hint-slot { padding: .75rem .75rem 0; }
@media (min-width: 1024px) {
  .nb-main:has(> .nt-hint-slot:not([hidden]), > .cn-strips:not([hidden])) { display: flex; flex-direction: column;
        height: calc(100vh - 3.5rem - 1px); height: calc(100dvh - 3.5rem - 1px); }
  .nb-main:has(> .nt-hint-slot:not([hidden]), > .cn-strips:not([hidden])) > .bl { flex: 1 1 auto; min-height: 0;
        height: auto; }
}
.cn-strip { display: flex; align-items: center; gap: 1rem; padding: .75rem 1.25rem; background: var(--warn-t); border-bottom: 1px solid var(--line); }
.cn-strip > svg { flex: none; width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--warn); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cab .cn-strip p { flex: 1; min-width: 0; color: var(--warn-ink); font-size: .9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.cab .cn-strip p b { color: var(--text); font-weight: 650; }
.cn-strip .button { flex: none; }
.cn-strip.soon { background: var(--brass-t); }
.cn-strip.soon > svg { stroke: var(--accent); }
.cab .cn-strip.soon p { color: var(--text); }
.bl-signin { display: flex; }
.cab .bl-gone { display: flex; align-items: flex-start; gap: .5rem; margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.bl-gone svg { flex: none; width: 1rem; height: 1rem; margin-top: .1875rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bl.bl-off .nb-foot, .bl.bl-off .bl-note, .bl.bl-off .bl-live { display: none; }
.bl.bl-off .bl-closed { margin-top: 0; }
@media (max-width: 600px) {
  .nb-main > .nt-hint-slot { padding: .75rem 1rem 0; }
  .cn-strip { flex-wrap: wrap; padding: .75rem 1rem; }
  .cn-strip .button { width: 100%; }
}

@media (min-width: 1024px) {
  .bl { grid-template-columns: minmax(0, 1fr) 24rem; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "chart panel" "list panel";
        height: calc(100vh - 3.5rem - 1px); height: calc(100dvh - 3.5rem - 1px); }
  .bl > .nb-chart, .bl > .bl-explain { grid-area: chart; }
  .bl > .bl-list { grid-area: list; min-height: 0; }
  .bl-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: .125rem; }
  .bl-cols { position: sticky; top: 0; z-index: 3; padding-bottom: .25rem; background: var(--night); }
  .bl > .nb-panel { grid-area: panel; min-height: 0; }
  .bl.bl-first > .bl-explain { grid-row: 1 / -1; }
  .bl.bl-first .bl-explain-body { flex: 1 1 auto; align-content: center; gap: 1.25rem; padding: 1.5rem 1.5rem 2rem; }
  .bl.bl-first .bl-explain svg { max-height: 24rem; }
  .bl.bl-off > .bl-list { grid-row: 1 / -1; }
  .bl.bl-off > .nb-panel { align-self: start; }
}
@media (min-width: 1440px) { .bl { grid-template-columns: minmax(0, 1fr) 26rem; } }

@media (min-width: 601px) and (max-width: 1023px) {
  .bl .nb-chart-wrap { height: 22rem; }
}

@media (max-width: 600px) {
  .bl { display: flex; flex-direction: column; gap: 0; padding: .75rem 0 7.5rem; }
  .bl > .bl-list, .bl-top, .bl-scroll, .bl-live, .bl > .nb-panel, .bl > .nb-panel > .nb-scroll { display: contents; }
  .bl-bar { order: 1; margin: 0 1rem .25rem; }
  .bl-bar:has(.bl-title) { display: none; }
  .bl-explain .ex-desk { display: none; }
  .bl-explain .ex-phone { display: block; }
  .bl-tabs { display: flex; width: 100%; }
  .cab .bl-tabs button { flex: 1 1 0; justify-content: center; min-width: 0; padding: .25rem .5rem; }
  .bl-bar .bl-hint { display: none; }
  .bl-acc { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; margin-right: -1rem; padding-right: 1rem; }
  .bl-acc .bl-tabs { flex: none; width: auto; }
  .cab .bl-acc .bl-tabs button { flex: none; }
  .bl-acc .bl-connect { flex: none; }
  .bl .nb-head { order: 2; padding: .5rem 1rem 0; }
  .bl-acct-top { order: 3; margin: 0 1rem; }
  .bl-cols { display: none; }
  .bl-rows { order: 4; margin: 1rem 1rem 0; gap: .75rem; }
  .cab .bl-empty { order: 4; margin: 1rem 1rem 0; }
  .cab .bl-queue { order: 5; margin: .75rem 1rem 0; }
  .bl-more { order: 6; margin: 1.25rem 1rem 0; }
  .cab .bl-note { order: 7; margin: .75rem 1rem 0; }
  .bl > .bl-explain { order: 8; margin: 1.25rem 1rem 0; }
  .bl .nb-head:has(h1) { order: 2; }
  .bl #foot-note, .bl .bl-desk-note { display: none; }
  .bl-alloc { display: none; }

  .bl-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .625rem .75rem; padding: .875rem 1rem 1rem; border-radius: .875rem; cursor: default; }
  .bl-pick { display: none; }
  .bl-row:has(.bl-pick:checked) { background: var(--panel); border-color: var(--line); box-shadow: none; }
  .bl-row > :not(.bl-pick) { position: static; pointer-events: auto; }
  .bl-row a.symbol::after { content: ""; position: absolute; inset: 0; border-radius: .875rem; }
  .bl-row .symbol { position: static; font-size: 1.3125rem; }
  .bl-row a.symbol:focus-visible { outline: none; }
  .bl-row a.symbol:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
  .bl-stock { order: 1; flex: 1 1 0; position: static; }
  .bl-open { order: 2; position: static; padding-top: .25rem; }
  .bl-open svg { width: 1.375rem; height: 1.375rem; }
  .bl-pnl { order: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; flex: 1 1 100%; padding: .625rem .875rem .75rem; background: var(--raise); border-radius: .625rem; }
  .bl-pnl > :first-child, .bl-pnl > :last-child { grid-area: auto; }
  .bl-pnl > div { container-type: inline-size; }
  .bl-pnl .bl-v { font-size: min(1.375rem, 100cqi / (var(--n, 10) * .62)); }
  .bl-pnl > :last-child { text-align: right; }
  .bl-money { order: 4; flex: 1 1 0; }
  .bl-armed { order: 5; flex: none; text-align: right; }
  .bl-money .bl-v, .bl-armed .bl-v { font-size: 1rem; }
  .bl-l { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; color: var(--muted); font-size: .8125rem; font-weight: 600; }
  .bl-why { order: 6; flex: 1 1 100%; }
  .bl-go { order: 7; min-height: 2.75rem; }
  .bl-set { order: 8; }
  .bl-set.button { width: auto; min-height: 2.75rem; padding: .25rem 1rem; color: var(--text); }
  .bl-set svg { display: none; }
  .bl-set-t { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .bl-row :is(.bl-go, .bl-set) { position: relative; z-index: 2; }
  .bl-tiles dd { --big: 1.25rem; }
}