/* F&O Ban List / page-fno-ban-list.php — MWPL table, responsive scroll behaviour, sort bar, trend chart
   Loaded only on this page (see si_enqueue_assets in functions.php).
   Shared styling — colours, type, header, footer, cards, forms — lives in theme.css. */

/* --- Company name under the symbol; shown only on narrow screens --- */
.mwpl-c-scrip{display:none;}
/* "Slide to see all columns" prompt — only useful where the table overflows */
.mwpl-scroll-hint{display:none;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted-2);padding:0 0 8px;}
/* The chart draws into this box rather than sizing itself from the canvas
   attributes, so its height is set here in one place. */
.mwpl-chart-box{position:relative;height:300px;width:100%;}
.mwpl-table-wrap{-webkit-overflow-scrolling:touch;}

@media (max-width:1024px){
  .mwpl-section{padding-left:24px !important;padding-right:24px !important;}

  /* Eight columns stop fitting well before phone widths, so the pinned Symbol
     column and the scroll cue start at tablet size. Where the table does still
     fit, none of this shows: no scrollbar, and sticky has nothing to do. */
  .mwpl-table-wrap{overflow-x:auto !important;-webkit-overflow-scrolling:touch;}
  /* separate borders: position:sticky on a cell is unreliable under
     border-collapse:collapse, where the pinned column loses its edges */
  .mwpl-table-wrap table{border-collapse:separate !important;border-spacing:0;min-width:720px;}
  .mwpl-table-wrap th:first-child,
  .mwpl-table-wrap td:first-child{
    position:sticky;left:0;z-index:2;background:var(--paper);
    box-shadow:1px 0 0 var(--border);white-space:normal !important;}
  .mwpl-table-wrap thead th:first-child{background:var(--card);z-index:3;}
  .mwpl-table-wrap tr[style*="FBF1EF"] td:first-child{background:#FBF1EF;}
  .mwpl-scroll-hint{display:block;}
}
@media (max-width:900px){
  .mwpl-section{padding-left:16px !important;padding-right:16px !important;}
  .mwpl-hero h1{font-size:28px !important;}
  .mwpl-toolbar{align-items:stretch !important;}
  .mwpl-toolbar input[type="text"]{width:100% !important;}
  .mini-days-grid{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width:700px){
  .mini-days-grid{grid-template-columns:1fr !important;}
  .mwpl-table-wrap table{font-size:12.5px !important;}
  .mwpl-table-wrap th,.mwpl-table-wrap td{padding:10px 10px !important;}
  .mwpl-table-wrap th{font-size:9.5px !important;letter-spacing:.02em !important;}
  .mwpl-table-wrap th:first-child,
  .mwpl-table-wrap td:first-child{min-width:112px;max-width:132px;}
  .mwpl-symbol-link{min-height:44px !important;display:flex !important;align-items:center;}
  .mwpl-c-scrip{display:block;font-family:var(--font-body);font-size:10.5px;font-weight:400;
    color:var(--muted);line-height:1.3;margin-top:2px;}
  .mwpl-chart-box{height:230px;}
  /* metric and range toggles are drawn with inline styles by mwpl-tracker.js */
  #mwpl-metric-toggle button,#mwpl-range-toggle button{min-height:42px !important;}
}
@media (max-width:600px){
  .mwpl-hero h1{font-size:24px !important;}
  .mwpl-hero p{font-size:14px !important;}
  .mwpl-date-row{flex-direction:column;align-items:flex-start !important;gap:8px !important;}
  .mwpl-trend-controls{width:100%;}
  .mwpl-trend-controls input[type="text"]{width:100% !important;}
  .mwpl-trend-controls button{width:100%;}
  .mwpl-sort-bar{display:flex;flex-wrap:wrap;}
  .mwpl-sort-bar label{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
  .mwpl-sort-bar select{flex:1;min-width:150px;font-size:16px;padding:9px 10px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;min-height:40px;}
  .mwpl-sort-bar button{font-family:var(--font-mono);font-size:12px;padding:9px 12px;border:1px solid var(--border-strong);background:#fff;color:var(--ink);border-radius:var(--radius);cursor:pointer;min-height:40px;white-space:nowrap;}
}