/* Mobile-responsive layer for Sniper Point Capital.
 * Loaded after the per-template inline styles so these rules win
 * the @media-query battle. Desktop layout is preserved.
 */

/* Hamburger button — always in DOM, hidden on desktop */
.nav-toggle{
  display:none;background:transparent;border:1px solid var(--border);
  color:var(--text-bright);width:40px;height:40px;border-radius:4px;
  align-items:center;justify-content:center;font-size:20px;line-height:1;
  cursor:pointer;padding:0;font-family:inherit;margin-left:auto
}
.nav-toggle:hover{border-color:var(--gold-dim);color:var(--gold)}

@media(max-width:760px){
  /* HEADER ------------------------------------------------------- */
  .header-inner{flex-wrap:wrap;gap:8px;padding:10px 14px;align-items:center}
  .header-logo{width:34px;height:34px}
  .header-brand h1{font-size:14px;letter-spacing:1.2px}
  .header-brand .tagline{font-size:9px;letter-spacing:0.8px}

  .nav-toggle{display:flex}

  .top-nav{
    display:none;width:100%;flex-direction:column;gap:2px;
    margin:6px 0 0;padding-top:8px;border-top:1px solid var(--border);
    order:99
  }
  .top-nav.open{display:flex}
  .top-nav a{
    padding:12px 14px;text-align:left;font-size:12px;
    letter-spacing:1.2px;border:1px solid transparent
  }
  .top-nav a:active{background:var(--surface2)}

  /* MAIN LAYOUT -------------------------------------------------- */
  main{padding:14px 14px 40px !important}

  /* Page title */
  .page-title{margin-bottom:12px}
  .page-title h2{font-size:17px;letter-spacing:1.2px}
  .page-title .sub{font-size:10px;letter-spacing:0.5px}

  /* iOS prevents zoom-on-focus only when input font is ≥16px */
  input[type="text"],input[type="number"],select,textarea{font-size:16px !important}

  /* Buttons: tap-target minimum */
  button,.btn,a.btn{min-height:42px}

  /* KPI strip: 2 cols on phones, both spec'd in old templates and new */
  .kpi-strip{grid-template-columns:1fr 1fr !important;gap:8px !important;display:grid !important;flex-wrap:initial !important}
  .kpi{padding:10px 8px;min-width:0 !important}
  .kpi-label{font-size:8px}
  .kpi-value{font-size:16px}
  .kpi-date{font-size:8px}

  /* Cards */
  .card{padding:14px 12px;margin-bottom:10px}
  .card h2{font-size:10px}

  /* Charts: a touch shorter on small screens to keep KPIs visible */
  .chart-container{height:220px}
  .chart-container.tall{height:280px}
  .chart-container.chart-tall{height:300px}

  /* Wide tables — scroll affordance + buffer fade on the right edge */
  .table-scroll,.scroll-wrap{
    position:relative;-webkit-overflow-scrolling:touch;overflow-x:auto
  }
  .table-scroll::after,.scroll-wrap::after{
    content:'';position:absolute;top:0;right:0;bottom:0;width:20px;
    background:linear-gradient(90deg,transparent,rgba(7,10,19,0.75));
    pointer-events:none
  }

  /* DCF tab: landing form stacks */
  .landing-input{
    flex-direction:column;align-items:stretch;gap:10px;
    padding:0 8px;margin-top:36px
  }
  .landing-input .input-group{width:100%;text-align:left}
  .landing-input .input-group input,
  .landing-input .main-input input{width:100% !important}
  .landing-input button{width:100%;padding:0 20px}

  /* DCF tab: result-page input row stacks */
  .input-row{flex-direction:column !important;align-items:stretch !important;gap:8px}
  .input-row .input-group{width:100%}
  .input-row .input-group input{width:100%;box-sizing:border-box}
  .input-row button{width:100%}

  /* Hero quote: smaller font on landing */
  .landing-hero .quote-body{font-size:20px;line-height:1.4}
  .landing-hero .quote-mark{font-size:78px;height:30px}
  .landing-hero .quote-author{font-size:9px;letter-spacing:2px}

  /* Portfolio tab: collapse the holdings input table into stacked rows */
  .input-table{display:block}
  .input-table thead{display:none}
  .input-table tbody{display:block}
  .input-table tr{
    display:flex;align-items:center;gap:10px;padding:8px 0;
    border-bottom:1px solid var(--border)
  }
  .input-table tr:last-child{border-bottom:none}
  .input-table td{padding:0 !important;border:none !important}
  .input-table .ticker-input{width:110px !important}
  .input-table .weight-input{flex:1;width:auto !important;min-width:0;max-width:none}
  .input-table .row-remove{flex-shrink:0;min-height:36px;width:36px;height:36px}

  /* Portfolio actions row */
  .input-actions{flex-direction:column;align-items:stretch;gap:10px}
  .input-actions-left{flex-direction:column;gap:8px;width:100%}
  .input-actions-left .btn{width:100%}
  .weight-summary{text-align:center;padding:8px 0;border-top:1px solid var(--border)}

  /* Holdings detail / sensitivity tables: tighter */
  .holding-table,.data-table,.sens-table{font-size:10px}
  .holding-table thead th,.data-table th{padding:6px 6px;font-size:8px}
  .holding-table tbody td,.data-table td{padding:5px 6px;font-size:10px}
  .sens-table td{padding:3px 4px;font-size:9px}

  /* grid-3 collapses to single column */
  .grid-3{grid-template-columns:1fr !important}

  /* Live-edit cells: keep them tappable */
  .cell-input{width:78px !important;font-size:14px !important;min-height:32px}

  /* Live edit bar stacks */
  .live-edit-bar{flex-direction:column;align-items:stretch;gap:8px}
  .live-edit-bar .live-edit-actions{justify-content:flex-end}

  /* Live edit status text smaller */
  .live-edit-status{font-size:10px}

  /* Report link */
  .report-link{text-align:center}

  /* Macro / crypto tf-toggle wraps cleanly */
  .tf-toggle{justify-content:flex-start;gap:4px;margin-top:6px}
  .tf-toggle button{padding:4px 8px;font-size:9px}

  /* TradingView widget min-height so it doesn't squish to nothing */
  .tradingview-widget-container{min-height:320px}
  .tv-card .chart-container{height:380px !important}

  /* Footer */
  footer{font-size:9px;padding:10px;letter-spacing:0.3px}

  /* Section labels */
  .section-label{font-size:9px;margin:14px 0 6px 2px}

  /* Power-up strip wraps */
  .powerup-strip{padding:0 4px}

  /* Doughnut legend repositions on small screens — handled per-chart in JS, but
   * give the chart container more space here as a fallback */
  .grid-2 .chart-container{height:240px}
}

/* Very narrow phones */
@media(max-width:400px){
  .kpi-value{font-size:14px}
  .kpi-label{font-size:7px}
  .page-title h2{font-size:15px}
  .header-brand h1{font-size:12px}
  .header-brand .tagline{display:none}
  .holding-table,.data-table{font-size:9px}
}