/* Mobile-first refinements layered over the existing inline application styles. */
:root {
  --mobile-gutter: 12px;
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-top: env(safe-area-inset-top, 0px);
}

html { min-width: 0; width: 100%; }
body { min-width: 0; max-width: 100%; }
img, svg, canvas, video, iframe { max-width: 100%; }
button, input, select, textarea { touch-action: manipulation; }
:focus-visible { outline: 3px solid #0f7c7a; outline-offset: 2px; }

/* Command widths are independent of text length: no flex:0 button overlap. */
.tv-command-grid { display:grid; grid-template-columns:minmax(210px,1fr) minmax(180px,.8fr) minmax(210px,1fr); gap:10px; margin-bottom:12px; align-items:stretch; }
.tv-command-grid > div { min-width:0; }
.tv-command-grid .btn { width:100%; min-height:44px; white-space:normal!important; justify-content:center; }
.tv-symbol-search { grid-column:1/-1; }
.tv-symbol-search > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,240px); gap:8px; }
.tv-symbol-search input { min-width:0; width:100%; }
.tv-filter-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:10px; background:var(--bg);padding:12px;border-radius:10px; }
.tv-filter-grid > div { min-width:0; }
.tv-filter-grid .i { width:100%; min-width:0; }
.q-outlook { margin:12px 0; border:2px solid #14796c; background:#f9fcfb; }
[hidden] { display:none!important; }
@media(max-width:700px) { .tv-command-grid,.tv-symbol-search > div { grid-template-columns:minmax(0,1fr); } .tv-symbol-search { grid-column:auto; } }

.pwa-install-button {
  min-height: 44px;
  border: 1px solid #0f7c7a;
  border-radius: 9px;
  padding: 8px 12px;
  background: #fff;
  color: #0a5654;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.pwa-install-button[hidden] { display: none !important; }
.pwa-install-button:focus-visible { outline-offset: 3px; }
.pwa-install-dialog {
  width: min(440px, calc(100vw - 24px));
  max-height: min(80dvh, 620px);
  overflow: auto;
  border: 1px solid #d5e2e1;
  border-radius: 14px;
  padding: 20px;
  color: #1c2b2a;
  box-shadow: 0 20px 60px #10282840;
}
.pwa-install-dialog::backdrop { background: #10282888; }
.pwa-install-dialog h2 { margin: 0 0 8px; font-size: 18px; }
.pwa-install-dialog p, .pwa-install-dialog li { line-height: 1.8; }
.pwa-install-dialog button { min-height: 44px; }

@media (max-width: 768px) {
  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  body { padding-bottom: calc(12px + var(--mobile-safe-bottom)); }
  html body > main { width: 100%; min-width: 0; padding: 10px var(--mobile-gutter) calc(28px + var(--mobile-safe-bottom)) !important; }
  html body > header.top { padding: calc(8px + var(--mobile-safe-top)) var(--mobile-gutter) 9px !important; gap: 8px; }
  .top h1 { font-size: 17px; }
  .top .sp { flex: 1 1 auto; min-width: 12px; }
  .dates { max-width: 100%; }
  .top .dates { display: none; }
  main .idx { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  main .idx .box { padding: 8px; gap: 6px; }
  main .idx .nm { font-size: 12px; }
  main .idx svg { display: none; }
  html body > nav.tabs {
    position: sticky;
    top: 0;
    z-index: 30;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-inline: 6px;
    scroll-snap-type: x proximity;
  }
  .tabs > .tab { min-height: 44px !important; padding: 10px 11px; scroll-snap-align: start; }
  .grid, .g2, .g4, .idx, .ta-grid, .ta-school-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .grid > *, .card, .kpi, .rec, .ta-card, .ta-school-grid > *, .idx > * { min-width: 0; max-width: 100%; }
  .g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important; }
  .recs { grid-template-columns: minmax(0, 1fr) !important; }
  .row { align-items: stretch; }
  .row > div { min-width: 0 !important; flex: 1 1 100% !important; }
  .card { padding: 12px; margin-bottom: 10px; border-radius: 10px; }
  .card h3 { flex-wrap: wrap; font-size: 15px; line-height: 1.55; }
  .card h3 .sp { flex: 1 1 100%; }
  .idx .box { min-width: 0; width: 100%; }
  .idx .box > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  html body .drawer { width: min(100%, 620px) !important; padding: calc(12px + var(--mobile-safe-top)) 12px calc(16px + var(--mobile-safe-bottom)) !important; }
  .drawer .kv { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rec .lv { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ta-tools { align-items: stretch; }
  .ta-tools > div { min-width: 0; flex: 1 1 100%; }
  .ta-card .ta-hero { grid-template-columns: 64px minmax(0, 1fr); gap: 9px; padding: 9px; }
  .ta-hero .ta-score { width: 60px; height: 60px; border-width: 4px; font-size: 17px; }
  .ta-families { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
  .ta-trends { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .ta-chart-wrap, .tw, .hist { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
  .ta-chart-wrap table, .tw table { width: max-content; min-width: 100%; }
  .ta-chart-wrap .ta-pnf { min-width: 100%; }
  .ta-svg, .ta-candle-chart { width: 100%; height: auto; }
  .mbg.on { align-items: flex-start; overflow-y: auto; padding: calc(12px + var(--mobile-safe-top)) 10px calc(12px + var(--mobile-safe-bottom)); }
  .mbg .modal { width: 100%; max-width: 520px; max-height: calc(100vh - 24px - var(--mobile-safe-top) - var(--mobile-safe-bottom)); max-height: calc(100dvh - 24px - var(--mobile-safe-top) - var(--mobile-safe-bottom)); overflow-y: auto; overscroll-behavior: contain; padding: 16px; margin: auto 0; }
  input, select, textarea, input.i, select.i, textarea.i { min-height: 44px; font-size: 16px !important; }
  textarea, textarea.i { min-height: 100px; }
  button, .btn, .btn.sm { min-height: 44px !important; height: auto !important; }
  .btn.sm { padding-inline: 10px; }
  .btn, .modal .ft { flex-wrap: wrap; }
  .modal .ft > * { flex: 1 1 auto; justify-content: center; }
  #tvWidgetContainer { height: min(52dvh, 380px) !important; min-height: 260px; }
  pre, code, .num { overflow-wrap: anywhere; }
  .pwa-install-button { order: 20; }
}

@media (max-width: 380px) {
  :root { --mobile-gutter: 9px; }
  .top .logo { width: 36px; height: 36px; }
  .top h1 { font-size: 16px; }
  .pill { padding: 4px 7px; font-size: 11px; }
  .ta-trends { grid-template-columns: minmax(0, 1fr) !important; }
  .ta-card .ta-hero { grid-template-columns: 1fr; }
  .ta-hero .ta-score { width: 56px; height: 56px; }
  .modal { padding: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}