/* ============================================================================
   RESPONSIVE — @media queries (tablet ≤900px, mobile ≤600px, etc.)
   ============================================================================ */



  /* Tablet: slightly tighter */
  @media (max-width:900px){
    .toc-bar a{padding:5px 8px;font-size:8.5px;gap:3px;}
    .toc-bar a .toc-label{display:none;}  /* show only § number on tablet */
  }
  /* Mobile: hide entirely — bottom theme-bar and small viewport make it impractical */
  @media (max-width:600px){
    .toc-bar{display:none;}
  }
  @media (prefers-reduced-motion: reduce){
    .tile-fetch.pulse{animation:none;}
  }
  @media (max-width:1200px){.filterbar{grid-template-columns:1fr 1fr 1fr 1fr;}}
  @media (max-width:1200px){.pf-grid{grid-template-columns:1fr;}.uploads{grid-template-columns:repeat(3,1fr);}.filterbar{grid-template-columns:1fr 1fr;}}
  @media (max-width:680px){.uploads{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:900px){.cg-comp-grid{grid-template-columns:1fr;}}
  @media (max-width:600px){
    .sel-table .rm{font-size:11px;padding:6px 10px;border:1px solid var(--neg);}
    .sel-table .rm::before{content:"× ";font-size:13px;}
  }
  /* §06 Switch: 4-col inline override — keep in sync with breakpoints below */

  /* ── Breakpoints for opt-controls ──────────────────────────────────────
     1240px : 5-col Optimizer/Generator starts overflowing → 3 col
     1064px : 4-col Switch starts overflowing → 2 col
      900px : catch-all → 2 col (existing behaviour, kept for safety)   */
  @media (max-width:1240px){
    /* 5-col (§04 §05) → 3 col; 4-col Switch stays 4 col until its own breakpoint */
    .opt-controls:not(.opt-controls--switch){
      grid-template-columns:1fr 1fr 1fr;
    }
  }
  @media (max-width:1064px){
    /* Switch 4-col → 2 col; §04/§05 3-col → 2 col */
    .opt-controls{
      grid-template-columns:1fr 1fr !important;
    }
  }
  @media (max-width:900px){
    .opt-controls{grid-template-columns:1fr 1fr !important;}
    .params{grid-template-columns:1fr;}
    .summary{grid-template-columns:1fr;}
  }
  @media (max-width:900px){.income-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:1200px){.constraints-grid{grid-template-columns:repeat(4,1fr);}}
  @media (max-width:680px){.constraints-grid{grid-template-columns:repeat(1,1fr);}}
  @media (max-width:1100px){.opt-results{grid-template-columns:1fr;}}

  /* ============================================================
     MOBILE LAYOUT (≤600px) — vertical phones
  ============================================================ */
  @media (max-width:600px){
    .wrap{padding:60px 14px 24px;}

    /* Theme switch (dropdown): docks above the masthead, compact full-width.
       Override the desktop's `position:absolute` because on narrow viewports
       we want it to occupy the top row and scroll-stick to the top edge. */
    .theme-switch{
      position:sticky;top:0;right:auto;z-index:50;
      display:flex;align-items:center;justify-content:flex-end;
      width:100%;max-width:100%;padding:6px 10px;
      background:var(--paper);border:none;border-bottom:1px solid var(--rule);
      box-shadow:0 2px 6px -4px rgba(0,0,0,.18);
    }
    .theme-switch .ts-select{font-size:13px;max-width:60vw;}

    /* Masthead: stack vertically */
    header.masthead{
      grid-template-columns:1fr;gap:8px;text-align:left;padding:18px 0 14px;
    }
    .meta-left, .meta-right{text-align:left;font-size:10px;}
    .title{font-size:36px !important;text-align:left !important;line-height:1;letter-spacing:-.02em !important;}
    .subtitle{text-align:left;font-size:9px;letter-spacing:.2em;}

    /* Section headers: stack title and hint */
    .sec-head{flex-direction:column;align-items:flex-start;gap:4px;}
    .sec-head h2{font-size:18px;}
    .sec-head .hint{font-size:9px;}

    /* Uploads: one column, smaller padding */
    .uploads{grid-template-columns:1fr;gap:10px;}
    .tile{padding:12px;}

    /* Filter bar: single column, native look.
       Inputs/selects need width:100% + box-sizing:border-box to stay inside the cell;
       the desktop base style omits these so the grid does the sizing. On mobile each
       field becomes full-row and the input must shrink to the container width. */
    .filterbar{grid-template-columns:1fr !important;gap:8px;padding:10px;}
    .filterbar .field{min-width:0;}
    .filterbar .field input,
    .filterbar .field select{
      font-size:16px;padding:10px;
      width:100%;box-sizing:border-box;min-width:0;max-width:100%;
    }

    /* Search bar mobile: keep input + clear + counter on one row, allow counter to wrap below
       on very narrow viewports if the input grows. */
    .search-bar{flex-wrap:wrap;padding:8px 10px;}
    .search-bar input{font-size:16px;width:auto;}
    .search-bar .sb-count{
      flex-basis:100%;padding-left:0;padding-top:4px;border-left:none;
      border-top:1px solid var(--rule);margin-top:4px;
    }

    /* Constraints grid (§04 optimizer + §05 generator): same fix as filterbar.
       The default select has intrinsic width based on its longest <option>; on mobile
       this can exceed the cell width when options are long (e.g. issuer names, currency
       lists), pushing past the right margin. Force the input/select to fit the cell. */
    .constraints-grid .field{min-width:0;}
    .constraints-grid .field input,
    .constraints-grid .field select,
    .constraints-grid .field select[multiple]{
      width:100%;box-sizing:border-box;min-width:0;max-width:100%;
    }

    /* ── Mobile multi-select → checkbox list ──────────────────────────────
       On touch screens select[multiple] is broken (iOS shows a single-value
       picker, Android shows radio buttons). We inject a .multicheck div that
       mirrors the select and hide the native element at ≤600px. */
    .constraints-grid .field select[multiple].touch-hidden{
      display:none;
    }
    .multicheck{
      width:100%;box-sizing:border-box;
      max-height:130px;overflow-y:auto;
      border:1px solid var(--ink);background:#fff;
      padding:4px 0;
      font-family:var(--font-mono);font-size:11px;
      -webkit-overflow-scrolling:touch;
    }
    [data-theme="terminal"] .multicheck{background:var(--paper);color:var(--ink);}
    .multicheck label{
      display:flex;align-items:center;gap:8px;
      padding:6px 10px;cursor:pointer;
      line-height:1.3;
      /* large touch target */
      min-height:36px;
    }
    .multicheck label:active{background:var(--paper-2);}
    .multicheck input[type=checkbox]{
      width:18px;height:18px;flex-shrink:0;
      accent-color:var(--ink);cursor:pointer;
    }
    .multicheck label.checked{
      background:var(--ink);color:var(--paper);
    }
    .multicheck-hint{
      font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;
      text-transform:uppercase;color:var(--muted);
      padding:2px 4px 4px;
    }

    /* Bonds/positions/switch tables → card list inside a scrollable container.
       Keep the card layout for touch readability but constrain the total height so
       the page doesn't become a single very long scroll dominated by the table. */
    .table-wrap{
      max-height:60vh;overflow-y:auto;overflow-x:hidden;
      border:1px solid var(--ink);background:var(--table-bg);
      padding:8px;
      -webkit-overflow-scrolling:touch;
    }
    /* Last card in the scroller: remove its bottom margin so the container's
       padding alone provides the spacing */
    .table-wrap table.bonds tbody tr:last-child{margin-bottom:0;}
    table.bonds{display:block;width:100%;border-collapse:separate;border-spacing:0;}
    table.bonds thead{display:none;} /* hide header row */
    table.bonds tbody{display:block;}
    table.bonds tbody tr{
      display:block;background:#fff;border:1px solid var(--ink);
      margin-bottom:10px;padding:10px 12px 8px;position:relative;
    }
    [data-theme="terminal"] table.bonds tbody tr{background:var(--paper-2);}
    table.bonds tbody tr.sel{background:#fff5d9;border-color:var(--accent);}
    table.bonds tbody tr:hover{background:inherit;} /* no hover on touch */
    table.bonds tbody tr.sel:hover{background:#fff5d9;}
    /* Each TD becomes a labelled row */
    table.bonds tbody td{
      display:flex;justify-content:space-between;align-items:center;gap:10px;
      padding:4px 0;border-bottom:none;font-size:13px;line-height:1.3;
      white-space:normal;word-break:break-word;text-align:left;
    }
    table.bonds tbody td.descr{
      font-size:14px;font-weight:600;padding-bottom:8px;margin-bottom:6px;
      border-bottom:1px solid var(--rule);display:block;
    }
    table.bonds tbody td.num{justify-content:space-between;}
    table.bonds tbody td::before{
      content:attr(data-label);
      font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
      color:var(--muted);flex-shrink:0;
    }
    /* Cells with empty content: hide on mobile */
    table.bonds tbody td:empty,
    table.bonds tbody td[data-empty="1"]{display:none;}
    /* Lots input: full width on its own row */
    table.bonds tbody td.lots-cell{
      display:block;border-top:1px solid var(--rule);margin-top:6px;padding-top:8px;
    }
    table.bonds tbody td.lots-cell::before{display:block;margin-bottom:4px;}
    table.bonds tbody td.lots-cell input.qty-input{width:100%;font-size:16px;padding:8px;}

    /* Selected positions table inside §03 */
    .sel-table{display:block;}
    .sel-table thead{display:none;}
    .sel-table tbody{display:block;}
    .sel-table tbody tr{
      display:block;border:1px solid var(--ink);margin-bottom:8px;padding:8px 10px;
      background:var(--paper);
    }
    .sel-table tbody td{
      display:flex;justify-content:space-between;gap:10px;padding:3px 0;
      border-bottom:none;font-size:12.5px;
    }
    .sel-table tbody td.d{
      font-size:13.5px;font-weight:600;display:block;padding-bottom:6px;margin-bottom:4px;
      border-bottom:1px solid var(--rule);
    }
    .sel-table tbody td::before{
      content:attr(data-label);
      font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
      color:var(--muted);
    }
    .sel-table tbody td.d::before{display:none;}
    .sel-table tbody td:last-child{
      border-top:1px solid var(--rule);margin-top:6px;padding-top:8px;justify-content:flex-end;
    }
    .sel-table tbody td:last-child::before{display:none;}

    /* Switch table: same card pattern */
    .switch-table{display:block;}
    .switch-table thead{display:none;}
    .switch-table tbody, .switch-table tfoot{display:block;}
    .switch-table tbody tr,
    .switch-table tfoot tr{
      display:block;border:1px solid var(--ink);margin-bottom:8px;padding:10px 12px;
      background:#fff;
    }
    .switch-table tfoot tr.totals{background:var(--paper-2);}
    .switch-table tbody td,
    .switch-table tfoot td{
      display:flex;justify-content:space-between;gap:10px;padding:4px 0;
      border-bottom:none;font-size:12.5px;
    }
    .switch-table tbody td.d{
      font-size:13.5px;font-weight:600;display:block;padding-bottom:6px;margin-bottom:4px;
      border-bottom:1px solid var(--rule);
    }
    .switch-table tbody td::before,
    .switch-table tfoot td::before{
      content:attr(data-label);
      font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
      color:var(--muted);
    }
    .switch-table tbody td.d::before{display:none;}
    .switch-table tfoot td[colspan]{
      display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
      color:var(--muted);padding:0 0 6px;border-bottom:1px solid var(--ink);margin-bottom:6px;
    }
    .switch-table tfoot td[colspan]::before{display:none;}

    /* Switch summary: single column, full-bleed */
    .switch-summary .ss-row{grid-template-columns:1fr !important;}
    .switch-summary .ss-cell{
      border-right:none;border-bottom:1px dotted var(--rule);
    }
    .switch-summary .ss-cell:last-child{border-bottom:none;}

    /* Portfolio grid */
    .pf-grid{grid-template-columns:1fr !important;gap:14px;}

    /* Optimizer/generator controls */
    .opt-controls{grid-template-columns:1fr !important;gap:10px;}
    .opt-controls .field{width:100%;min-width:0;}
    .opt-controls .field label{max-width:100%;}
    .opt-controls .field input,
    .opt-controls .field select{width:100%;box-sizing:border-box;font-size:16px;padding:10px;}
    .params{grid-template-columns:1fr !important;}
    .summary{grid-template-columns:1fr !important;}
    .summary .kpi .v{font-size:18px;}
    .summary .kpi .v.big{font-size:26px;}
    .summary .kpi .v.mono{font-size:16px;}


    /* Switch price panel: scrollable on mobile */
    .sw-price-panel .sw-price-table{overflow-x:auto;display:block;}
    .sw-price-panel .sw-price-table thead,
    .sw-price-panel .sw-price-table tbody{display:block;}
    .sw-price-panel .sw-price-table tr{display:flex;}
    .sw-price-panel .sw-price-table th,
    .sw-price-panel .sw-price-table td{flex:1;min-width:80px;white-space:nowrap;}
    .sw-price-panel .sw-price-table th:nth-child(2),
    .sw-price-panel .sw-price-table td:nth-child(2){min-width:150px;} /* Titolo */

    /* Income block */
    .income-grid{grid-template-columns:1fr !important;}
    .income-grid .field{width:100%;}
    .income-grid .field input,
    .income-grid .field select{font-size:16px;}

    .constraints-head{flex-wrap:wrap;align-items:flex-start;gap:6px;}
    .constraints-head .hint{min-width:0;flex:1 1 100%;}

    /* Optimizer/generator results: single column, smaller cards */
    .opt-results{grid-template-columns:1fr !important;}
    .alt-card{padding:10px;}
    .alt-card .alt-kpis{grid-template-columns:repeat(2,1fr);}
    .alt-card ul{font-size:11.5px;max-height:none;}
    .alt-card .alt-actions{flex-direction:column;}
    .alt-card .alt-actions .btn{width:100%;text-align:center;}

    /* Export cards: single column */
    .export-grid{grid-template-columns:1fr;}
    .export-card .ex-actions{flex-direction:column;align-items:stretch;}
    .export-card .ex-actions .btn,
    .export-card .ex-actions select{width:100%;}

    /* Generic input fields */
    .field input[type=number],
    .field input[type=text],
    .field input[type=date],
    .field select{font-size:16px;}  /* prevents iOS auto-zoom */

    /* Buttons: full width inside grids by default */
    .btn{padding:11px 16px;font-size:11px;}

    /* Footer */
    footer.colophon{
      flex-direction:column;gap:6px;text-align:center;font-size:9px;
      padding-bottom:60px; /* leave room for the bottom theme bar */
    }

    /* Tile validation block on mobile */
    .tile .validation .v-block{font-size:11px;padding:6px 8px;}

    /* Cash flow chart: shorter on mobile, but expandable on demand */
    .cf-chart{height:180px;}
    .cf-chart-wrap.expanded .cf-chart{height:480px;}
    /* On mobile, stack legend below title for compactness */
    .cf-head{flex-direction:column;align-items:flex-start;gap:4px;}
    .cf-legend{justify-content:flex-start;font-size:9.5px;gap:8px;}
    .cf-expand-btn{align-self:flex-end;}
    /* Tooltip: clamp width for narrow viewports */
    .cf-tooltip{font-size:10.5px;min-width:160px;max-width:84vw;}
  }

  /* Tablet portrait: alt-card KPI grid → 2 col
     (opt-controls already handled by 1064px breakpoint above) */
  @media (max-width:760px) and (min-width:601px){
    .alt-card .alt-kpis{grid-template-columns:repeat(2,1fr);}
  }

  /* Always: prevent input zoom on iOS even on tablets */
  @media (max-width:900px){
    input[type=number],
    input[type=text],
    input[type=date],
    select,
    textarea{font-size:16px;}
  }
  @media (max-width:900px){.export-grid{grid-template-columns:1fr;}}
  @media (max-width:1100px){.switch-summary .ss-row{grid-template-columns:repeat(2,1fr);}}