/* POSA mobile — Smallcase-grade broker density.
   Loaded last on customer surfaces. 8px grid, 8px button radius,
   12px cards, white page, hairline chrome. Login/signup stay compact. */

:root{
  --posa-gutter:12px;
  --posa-gap:8px;
  --posa-card-pad:14px;
  --posa-card-rad:12px;
  --posa-btn-rad:8px;
  --posa-touch:44px;
  --posa-row:52px;
  --posa-hairline:#eaedf1;
}

/* ── CTAs: visible, compact, 8px radius (not 48dp Material) ── */
.h-btn,
.btn,
.go,
.app-ui-btn,
a.h-btn,
a.btn{
  min-height:44px !important;
  padding:10px 14px !important;
  border-radius:8px !important;
  font-size:14px !important;
  font-weight:650 !important;
  line-height:1.2 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  box-sizing:border-box !important;
  text-decoration:none !important;
  opacity:1 !important;
  visibility:visible !important;
  white-space:nowrap;
}
.h-btn .h-icon,
.btn .h-icon,
.h-btn svg,
.btn svg{
  width:16px;
  height:16px;
  flex:none;
  stroke:currentColor;
}
.h-btn.primary,
.btn.primary,
.app-ui-btn.primary,
.go,
button.go{
  background:var(--posa-brand,#1f7ae0) !important;
  color:#fff !important;
  border:1px solid var(--posa-brand,#1f7ae0) !important;
  box-shadow:none !important;
}
.h-btn:not(.primary):not(.dark):not(.ghost),
.btn:not(.primary):not(.dark):not(.ghost),
.app-ui-btn:not(.primary){
  background:#fff !important;
  color:#191c1f !important;
  border:1px solid #d5dae2 !important;
}
.h-btn.dark,
.btn.dark{
  background:#191c1f !important;
  color:#fff !important;
  border:1px solid #191c1f !important;
}
.h-app-banner .h-btn.primary{
  background:#fff !important;
  color:#191c1f !important;
  border-color:#fff !important;
}
.h-app-banner .h-btn:not(.primary),
.h-btn.ghost{
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.42) !important;
}
button.add,
.add{
  min-height:44px !important;
  padding:10px 14px !important;
  border-radius:8px !important;
  border:1px dashed var(--posa-brand,#1f7ae0) !important;
  color:var(--posa-brand,#1f7ae0) !important;
  background:#fff !important;
  font-size:13.5px !important;
  font-weight:700 !important;
}

.h-mobile-menu,
.icon-btn,
.peek,
button.link,
button.peek,
.tabbar .tab,
.tabbar button{
  min-height:auto;
  white-space:nowrap;
}
.app .tabs:not(#invTabs) button,
.app .ord-tabs button,
.app .mv-toggle button{
  min-height:40px !important;
  padding:8px 2px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  color:#6b7380 !important;
}
.app .tabs:not(#invTabs) button.active,
.app .tabs:not(#invTabs) button[aria-selected="true"],
.app .ord-tabs button.active,
.app .mv-toggle button.active{
  color:#191c1f !important;
  font-weight:700 !important;
  background:transparent !important;
}
.app #invTabs button{
  min-height:38px !important;
  padding:7px 14px 7px 10px !important;
  background:#ffffff !important;
  border:1px solid #dbe3ec !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05) !important;
  border-radius:999px !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:#334155 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
}
.app #invTabs button .inv-tab-ic{
  width:24px !important;
  height:24px !important;
  border-radius:50% !important;
  display:inline-grid !important;
  place-items:center !important;
  background:#eef4fc !important;
  color:var(--posa-brand,#1f7ae0) !important;
  font-size:11.5px !important;
  flex-shrink:0 !important;
}
.app #invTabs button.active,
.app #invTabs button[aria-selected="true"]{
  background:linear-gradient(135deg,var(--posa-brand,#1f7ae0) 0%,#155ec0 100%) !important;
  border:1px solid #155ec0 !important;
  color:#ffffff !important;
  font-weight:700 !important;
  box-shadow:0 6px 16px rgba(31,122,224,.28) !important;
}
.app #invTabs button.active span,
.app #invTabs button[aria-selected="true"] span{
  color:#ffffff !important;
}
.app #invTabs button.active .inv-tab-ic,
.app #invTabs button[aria-selected="true"] .inv-tab-ic{
  background:rgba(255,255,255,.22) !important;
  color:#ffffff !important;
}
.app #invTabs button.active .inv-tab-ic i,
.app #invTabs button[aria-selected="true"] .inv-tab-ic i{
  color:#ffffff !important;
}

/* ── cards: white, hairline, 12px radius ── */
.h-plan,
.h-basket,
.value-card,
.promo,
.nw-card,
.invest-score,
.scan-card,
.basket-card,
.coll-card,
.pf-item,
.trend-card,
.ord-card,
.stock-card,
.fd-card,
.fund-card,
.prof-card,
.card,
.decoded-banner,
.ed-banner,
.app-local-preview,
.getapp,
.cards article{
  background:#fff !important;
  background-image:none !important;
  border:1px solid var(--posa-hairline,#eaedf1) !important;
  border-radius:12px !important;
  box-shadow:none !important;
}
.h-plan,
.h-basket-info,
.value-card,
.promo,
.nw-card,
.invest-score,
.decoded-banner,
.ed-banner,
.app-local-preview,
.cards article{
  padding:14px !important;
}
.h-basket{overflow:hidden}
.h-plan .h-btn,
.h-basket-info .h-btn{width:100%}

.posa-share-row,
.holding-row,
.more-item,
.pf-item{
  min-height:52px;
  padding:10px 12px !important;
  box-sizing:border-box;
}
.more-item{
  border-radius:0 !important;
  box-shadow:none !important;
  border-left:0 !important;
  border-right:0 !important;
  border-top:0 !important;
  border-bottom:1px solid var(--posa-hairline,#eaedf1) !important;
  background:transparent !important;
}

/* ── public header ── */
.h-header{
  height:auto !important;
  min-height:56px !important;
  padding:calc(env(safe-area-inset-top,0px) + 6px) 0 6px !important;
  overflow:visible !important;
}
.h-header-inner{
  height:auto !important;
  min-height:44px !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
}
.h-logo{min-width:0 !important; flex:0 1 auto !important}
.h-header-actions{gap:8px !important; flex-wrap:nowrap !important; flex:0 0 auto !important}
.h-header-actions .h-btn{
  font-size:13.5px !important;
  min-height:38px !important;
  padding:7px 12px !important;
  white-space:nowrap !important;
}
.h-hero{overflow:visible !important}
.h-hero-buttons,
.h-app-buttons,
.cta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}
.h-mobile-menu{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  padding:0 !important;
  background:#f4f6f8 !important;
  color:#191c1f !important;
  border:0 !important;
  border-radius:8px !important;
}

/* ── phone app: white, 12px gutters ── */
.app{
  background:#fff !important;
  overflow-x:hidden !important;
}
.app-header{
  height:auto !important;
  min-height:52px !important;
  padding:calc(env(safe-area-inset-top,0px) + 6px) 12px 6px !important;
  overflow:visible !important;
  background:#fff !important;
}
.app-header .icon-btn,
.app-header .back{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  padding:0 !important;
  color:#191c1f !important;
  background:transparent !important;
  border-radius:8px !important;
}
.value-card,
.promo,
.nw-card,
.invest-score{
  margin:8px 12px !important;
}
.indices,
.ref-sec,
.feed-note,
.pv-head{
  padding-left:12px !important;
  padding-right:12px !important;
}
.app .tabs:not(#invTabs){margin:0 12px 8px !important}
.app #invTabs{margin:0 !important}
.tabbar,
.app-tabbar{
  height:calc(56px + env(safe-area-inset-bottom,0px)) !important;
  padding-top:4px !important;
  background:#fff !important;
  border-top:1px solid var(--posa-hairline,#eaedf1) !important;
}
.tabbar .tab{
  min-height:48px !important;
  padding:4px 2px !important;
  gap:2px !important;
  background:transparent !important;
  border:0 !important;
  color:#6b7380 !important;
  font-size:10.5px !important;
  font-weight:600 !important;
}
.tabbar .tab.active,
.tabbar .tab[aria-current="page"]{
  color:var(--posa-brand,#1f7ae0) !important;
}
.tabbar .tab i{font-size:18px}

/* ── login / signup: compact Smallcase form ── */
.gate{
  border-radius:16px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04) !important;
  overflow:hidden;
}
.gate .inner{padding:16px 16px 14px !important}
.gate .brand{margin-bottom:10px !important; gap:8px !important}
.gate .mark-img,
.gate img.mark-img{
  height:40px !important;
  max-height:40px !important;
  max-width:168px !important;
}
.gate .tabs{margin-bottom:12px !important; padding:3px !important}
.gate h1{font-size:20px !important; font-weight:700 !important; margin-bottom:2px !important}
.gate .sub{font-size:13px !important; margin-bottom:12px !important; line-height:1.45 !important}
.gate .field{margin-bottom:10px !important}
.gate .field label{margin-bottom:4px !important; font-size:11.5px !important}
.gate .control input{padding:10px 0 !important; font-size:14.5px !important}
.gate .forgot{margin:0 0 10px !important}
.gate .go,
.gate button.go,
.gate .go-google{
  min-height:44px !important;
  padding:10px 14px !important;
  border-radius:8px !important;
  font-size:14px !important;
}
.gate .go-google{
  background:#fff !important;
  color:#191c1f !important;
  border:1px solid #d5dae2 !important;
}
.gate .or-row{margin:10px 0 8px !important}
.gate .swap{margin-top:10px !important}
.gate .foot{margin-top:12px !important}
.gate .alert{margin-bottom:10px !important; padding:8px 10px !important}
.gate .channels{margin-bottom:12px !important; padding:3px !important}
.gate .consent-row{margin:8px 0 2px !important}
.gate .getapp{
  margin-top:12px !important;
  padding:12px 0 0 !important;
  background:transparent !important;
  border:0 !important;
  border-top:1px solid var(--posa-hairline,#eaedf1) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
@media (max-width:420px){
  .gate{
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    min-height:100vh;
  }
  .gate .inner{padding:14px 16px 16px !important}
}

@media (max-width:720px){
  header.h-header .h-container, .h-container{width:calc(100% - 24px) !important}
  .h-header-inner{flex-wrap:nowrap !important; gap:8px !important}
  .h-logo img{height:36px !important; max-width:136px !important; width:auto !important}
  .h-logo-text{display:none !important}
  .h-header-actions{gap:6px !important; flex-wrap:nowrap !important}
  .h-header-actions .h-login{min-height:36px !important; padding:6px 12px !important; font-size:13px !important}
  .h-mobile-menu{height:38px !important; width:38px !important; min-width:38px !important; min-height:38px !important}
  .h-section{padding:28px 0 !important}
  .portal-mode .content{padding:12px !important}
  .portal-mode .topbar{
    height:auto !important;
    min-height:52px !important;
    padding:6px 12px !important;
    flex-wrap:nowrap !important;
  }
  .p-top-actions .btn,
  .p-top-actions .h-btn{
    min-height:38px !important;
    font-size:12.5px !important;
    padding:7px 10px !important;
  }
}

.sheet{
  border-top-left-radius:16px !important;
  border-top-right-radius:16px !important;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.app-ui-dialog{border-radius:16px !important; overflow:hidden}
.app-dialog-head,
.app-dialog-body,
.app-dialog-actions{padding:14px !important}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important}
}