/* BHC Signaalikone 5.6.1 · UI Polish + Mobile Alignment */

/* Header: full bleed, stable, and home is a first-class route. */
.topbar.polished-topbar{
  width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
  padding-left:max(22px,calc((100vw - 1180px)/2))!important;
  padding-right:max(22px,calc((100vw - 1180px)/2))!important;
  grid-template-columns:minmax(210px,1fr) auto minmax(52px,1fr)!important;
  min-height:72px!important;
}
.nav{min-width:0;white-space:nowrap}
.nav-btn{min-width:0;padding-inline:13px}
.menu-button{justify-self:end}

/* The strongest observation is now a calm rectangular summary, not an orbit. */
.best-card{
  grid-template-columns:minmax(0,1fr) minmax(220px,280px)!important;
  align-items:stretch!important;
  min-height:286px!important;
  height:286px!important;
  gap:22px!important;
}
.best-copy{min-width:0;display:flex;flex-direction:column;justify-content:center}
.best-copy h2{margin-top:9px!important}
.best-actions{margin-top:auto!important;padding-top:10px}
.best-status-panel{
  align-self:stretch;
  display:grid;
  align-content:center;
  gap:10px;
  padding:18px;
  border:1px solid #55465c;
  border-radius:20px;
  background:linear-gradient(180deg,#251e29,#1b161f);
  min-width:0;
}
.best-status-panel>div{padding:14px;border:1px solid #433749;border-radius:15px;background:#18131c;min-width:0}
.best-status-panel span{display:block;color:#8e8294;font-size:8px;font-weight:850;letter-spacing:.13em}
.best-status-panel strong{display:block;margin-top:7px;font-size:28px;line-height:1.05;letter-spacing:-.04em;overflow-wrap:anywhere}
.best-status-panel small{display:block;margin-top:7px;color:#b3a9b7;font-size:10px;line-height:1.45;overflow-wrap:anywhere}

/* Market cards: all cards in a row have the same internal rhythm and enough room. */
.market-grid{align-items:stretch!important;grid-auto-rows:172px}
.market-card{
  height:172px!important;
  min-height:172px!important;
  display:grid!important;
  grid-template-rows:42px 27px 1fr 15px!important;
  align-content:stretch!important;
}
.stock-grid{grid-auto-rows:184px}
.stock-grid .market-card{height:184px!important;min-height:184px!important;grid-template-rows:56px 27px 1fr 15px!important}
.market-top{min-height:0!important;height:100%;overflow:hidden}
.market-name,.market-price{min-width:0}
.market-name strong{display:block;line-height:1.08;max-height:44px;overflow:hidden}
.market-price strong{white-space:nowrap}
.signal-word{align-self:center!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.market-meta{align-self:end!important;min-height:40px}
.market-meta.triple{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.market-meta div{min-width:0;overflow:hidden}
.market-meta strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.market-more{align-self:end;margin-top:0!important;overflow:hidden;text-overflow:ellipsis}

/* Deep market / derivatives cards: equal height, labels land on the same baseline. */
.friction-grid,.johd-market-grid,.reality-stats{align-items:stretch!important}
.friction-card{min-height:122px!important;display:grid!important;grid-template-rows:auto auto 1fr!important;align-content:start}
.friction-card>small{align-self:end}
.johd-market-card{min-height:146px!important;display:grid!important;grid-template-rows:auto auto 1fr!important;align-content:start}
.johd-market-card small{align-self:end}
.reality-stats>div{min-height:86px;display:grid;align-content:center}
.johd-control-grid>.control-block{min-height:138px}
.johd-risk-block{min-height:auto!important}

/* Live panels should update in-place instead of changing the geometry. */
.situation-panel,.machine-status-box,.senior-card,.context-factor,.market-card,.best-card,.johd-market-card,.friction-card{contain:layout paint}
.senior-card-body{min-height:86px}
#bestFacts{min-height:0!important;max-height:none!important;overflow:visible!important}
#bestTitle{overflow-wrap:anywhere}
#bestSummary{overflow:hidden}

/* Better desktop alignment around sections. */
.section-head{margin-top:54px}
.best-late-head{margin-top:56px!important}
#marketsView .market-fold{margin-top:12px}

/* Mobile: everything becomes intentionally stacked rather than desktop squeezed smaller. */
@media(max-width:760px){
  .shell{padding-left:12px!important;padding-right:12px!important;padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;overflow:visible!important}
  .topbar.polished-topbar{
    width:100vw!important;
    margin-left:-12px!important;
    padding:8px 12px 9px!important;
    min-height:62px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
  }
  .brand{min-width:0}.brand-copy{min-width:0}.brand-copy strong{font-size:10px!important}.brand-copy small{font-size:8px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62vw}
  .menu-button{grid-column:2!important}
  .nav{
    position:fixed!important;
    z-index:80!important;
    left:0!important;right:0!important;bottom:0!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:3px!important;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom))!important;
    border-radius:18px 18px 0 0!important;
    border-left:0!important;border-right:0!important;border-bottom:0!important;
    background:rgba(24,19,28,.97)!important;
    backdrop-filter:blur(20px)!important;
  }
  .nav-btn{min-height:44px!important;padding:8px 2px!important;font-size:9px!important;border-radius:13px!important;white-space:nowrap!important}

  #homeView{padding-top:12px!important}
  .home-hero{grid-template-columns:1fr!important;gap:8px!important}
  .home-hero-copy,.home-status-card{padding:18px!important;border-radius:20px!important}
  .home-hero h1{font-size:40px!important;line-height:.96!important}
  .home-status-card li{grid-template-columns:54px 1fr!important;padding:11px!important}
  .home-route-grid{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .home-route-grid button{min-height:112px!important;padding:13px!important}
  .home-route-grid strong{font-size:15px!important;margin-top:12px!important}

  .hero,.page-head{padding-top:34px!important}
  .hero h1,.page-head h1{font-size:38px!important}
  .section-head{grid-template-columns:1fr!important;gap:6px!important;margin:38px 0 12px!important}
  .section-head h2{font-size:28px!important}

  .market-grid,.stock-grid{grid-template-columns:1fr 1fr!important;grid-auto-rows:158px!important;gap:7px!important}
  .market-card,.stock-grid .market-card{height:158px!important;min-height:158px!important;padding:10px!important;grid-template-rows:45px 25px 1fr 13px!important}
  .market-name strong,.market-price strong{font-size:11px!important}.market-name small,.market-price small{font-size:7px!important}
  .signal-word{font-size:14px!important;margin:0!important}.market-meta{gap:3px!important}.market-meta div{padding:4px!important}.market-meta span{font-size:5px!important}.market-meta strong{font-size:7px!important}.market-more{font-size:5.8px!important}

  .best-card{height:auto!important;min-height:0!important;grid-template-columns:1fr!important;padding:17px!important;gap:13px!important}
  .best-copy h2{font-size:28px!important;min-height:0!important;max-height:none!important}
  .best-copy>p{min-height:0!important;max-height:none!important}
  #bestFacts{min-height:0!important;max-height:none!important;overflow:visible!important}
  .best-status-panel{grid-template-columns:1fr 1fr;padding:10px!important;border-radius:16px!important}
  .best-status-panel>div{padding:11px!important}.best-status-panel strong{font-size:20px!important}.best-status-panel small{font-size:8.5px!important}

  .reality-head,.johd-controls-head{grid-template-columns:1fr!important}
  .risk-picker{grid-template-columns:1fr 1fr!important}
  .johd-five{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .johd-control-grid{grid-template-columns:1fr!important}.johd-control-grid>.control-block{min-height:0!important}.johd-risk-block{grid-column:auto!important}
  .friction-grid,.johd-market-grid{grid-template-columns:1fr!important}.friction-card,.johd-market-card{min-height:0!important}
  .reality-stats{grid-template-columns:1fr 1fr!important}.reality-stats>div{min-height:76px!important}.reality-stats>div:last-child{grid-column:1/-1!important}

  .trade-desk-grid{grid-template-columns:1fr!important}
  .trade-desk-summary{grid-template-columns:1fr 1fr!important}
  .candle-wrap{height:360px!important}
  .chart-head{display:grid!important;grid-template-columns:1fr!important}.chart-price{text-align:left!important}
  .chart-toolbar{align-items:flex-start!important;flex-direction:column!important}.time-picker{width:100%!important}
  .manual-order{position:static!important}

  .why-grid{grid-template-columns:1fr!important;grid-auto-rows:auto!important}.why-card{height:auto!important;min-height:260px!important}.why-card h2,.why-card>p{height:auto!important;min-height:0!important}.why-card .reason-list{max-height:none!important}
  .context-factor-grid,.context-watch-grid{grid-template-columns:1fr!important}.context-factor{min-height:0!important}
  .history-grid{grid-template-columns:1fr!important}
}

@media(max-width:420px){
  .market-grid,.stock-grid{grid-template-columns:1fr!important;grid-auto-rows:146px!important}
  .market-card,.stock-grid .market-card{height:146px!important;min-height:146px!important;grid-template-rows:38px 24px 1fr 13px!important}
  .home-route-grid{grid-template-columns:1fr!important}
  .best-status-panel{grid-template-columns:1fr!important}
  .trade-desk-summary{grid-template-columns:1fr 1fr!important}
  .johd-five{grid-template-columns:repeat(5,minmax(42px,1fr))!important}
}