/* © 2026 Ian Pocklington. All rights reserved.
   Published for viewing on ianpocklington.energy. No licence is granted to copy, modify,
   redistribute or reuse this code, in whole or in part, without written permission. */
/* National Model screen styles — shared by the game and the website (see national_ui.js). */
  /* ── National Model (game option): full-screen grid-mix simulator ── */
  #national-screen{display:none;position:fixed;inset:3vh 3vw;z-index:60;
    background:#14181d;border:1px solid #313a45;border-radius:14px;
    box-shadow:0 18px 60px rgba(0,0,0,.6);flex-direction:column;overflow:hidden;}
  #national-screen.open{display:flex;}
  /* padding-right keeps the head clear of the corner Close button */
  #nat-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:10px 100px 10px 16px;
    background:#181d22;border-bottom:1px solid #2c333c;}
  #nat-head h3{margin:0;font-size:15px;color:#e8eef4;flex:none;}
  #nat-kpis{display:flex;gap:10px;flex:1;flex-wrap:wrap;}
  /* KPIs are read-outs, not controls: flat, no box, a thin left rule — so they
     never read as buttons next to the pane-opening buttons on the right. */
  .nat-kpi{background:none;border:none;border-left:2px solid #3a434e;border-radius:0;
    padding:1px 10px;font-size:12px;color:#8a97a5;cursor:default;}
  .nat-kpi b{color:#e8eef4;margin-left:6px;font-variant-numeric:tabular-nums;}
  .nat-kpi-operating{flex:0 0 auto;white-space:nowrap;}
  .nat-kpi-operating b{display:inline-block;width:22ch;text-align:right;white-space:nowrap;}
  #nat-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:none;}
  #nat-export,#nat-shares-button,#nat-gas-button,#nat-sankey-button,#nat-cost-button,#nat-factor-button{background:#2c333c;color:#cde;border:1px solid #3a434e;border-radius:7px;padding:4px 10px;cursor:pointer;font-size:13px;}
  #nat-export:hover:not(:disabled),#nat-shares-button:hover,#nat-gas-button:hover,#nat-sankey-button:hover,#nat-cost-button:hover,#nat-factor-button:hover{background:#4a90d9;color:#fff;border-color:#4a90d9;}
  #nat-export:disabled{opacity:.6;cursor:wait;}
  .nat-analysis-dialog{width:min(1050px,90vw);max-height:85vh;box-sizing:border-box;overflow:auto;
    background:#181d22;color:#dce5ee;border:1px solid #465363;border-radius:12px;padding:20px;}
  .nat-analysis-dialog::backdrop{background:rgba(0,0,0,.65);}
  .nat-analysis-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;}
  .nat-analysis-dialog h3{margin:0;}
  .nat-analysis-dialog p{color:#aebdca;font-size:13px;line-height:1.5;}
  .nat-share-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .nat-share-chart{height:320px;min-width:0;}
  @media(max-width:700px){.nat-share-charts{grid-template-columns:1fr;}}
  .nat-share-charts.gas-charts{grid-template-columns:repeat(3,minmax(0,1fr));}
  @media(max-width:900px){.nat-share-charts.gas-charts{grid-template-columns:1fr;}}
  .nat-analysis-dialog.nat-sankey-dialog{width:min(1250px,94vw);}
  .nat-analysis-dialog .sankey-headline{font-size:22px;font-weight:700;color:#e8eef4;margin:10px 0 2px;line-height:1.25;}
  .nat-analysis-dialog .sankey-headline b{color:#7fa2ff;}
  #nat-sankey-chart{height:600px;min-width:0;}
  .gas-year{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:13px;color:#aebdca;}
  .gas-year select{background:#222932;color:#dce5ee;border:1px solid #3a434e;border-radius:6px;padding:3px 6px;}
  .nat-analysis-dialog h4{margin:16px 0 4px;font-size:13px;color:#cde;}
  .gas-key{display:inline-block;width:26px;height:0;vertical-align:middle;margin:0 6px 0 2px;border-top:3px solid #9ab;}
  .gas-key.lng{border-top-style:dashed;}
  .gas-key.nts{border-top-width:1.5px;}
  .gas-popup .maplibregl-popup-content{background:#181d22;color:#dce5ee;border:1px solid #465363;
    border-radius:8px;padding:8px 12px;font-size:12px;line-height:1.45;}
  .gas-site{line-height:0;cursor:default;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);}
  .gas-site svg{display:block;}
  #gas-enduse-table th,#gas-enduse-table td{white-space:normal;}
  #gas-enduse-table td:last-child,#gas-enduse-table th:last-child{text-align:left;}
  #gas-enduse-table th:first-child{width:26%;}
  #gas-enduse-table th:nth-child(2){width:8em;}
  #gas-enduse-table th:last-child{width:auto;}
  .gas-popup .maplibregl-popup-tip{border-top-color:#465363;border-bottom-color:#465363;}
  /* Shared ✕ Close: the National screen's corner button and every analysis dialog */
  .nat-close-btn{flex:none;background:#2c333c;color:#cde;border:1px solid #3a434e;
    border-radius:7px;padding:4px 10px;cursor:pointer;font-size:13px;}
  .nat-close-btn:hover{background:#4a90d9;color:#fff;border-color:#4a90d9;}
  #nat-close{position:absolute;top:8px;right:10px;z-index:1;}
  #nat-body{display:flex;flex:1;min-height:0;}
  #nat-side{width:275px;flex:none;overflow-y:auto;padding:12px 16px;
    border-right:1px solid #2c333c;background:#161b20;}
  #nat-side h4{margin:14px 0 6px;font-size:11.5px;text-transform:uppercase;
    letter-spacing:.5px;padding-bottom:3px;border-bottom:2px solid #3a434e;}
  #nat-side h4.g-ren{color:#4fb3ff;border-color:#4fb3ff;}
  #nat-side h4.g-thermal{color:#ff7a6b;border-color:#ff7a6b;}
  #nat-side h4.g-storage{color:#c294f0;border-color:#c294f0;}
  .nat-slider{margin-bottom:10px;}
  .nat-slider label{display:flex;justify-content:space-between;font-size:12px;
    color:#cde;margin-bottom:2px;}
  .nat-slider label .nv{color:#9ab;font-variant-numeric:tabular-nums;}
  .nat-slider input[type=range]{width:100%;}
  #nat-main{flex:1;min-width:0;display:flex;flex-direction:column;}
  #nat-controls{display:flex;align-items:center;gap:12px;padding:8px 14px;
    background:#181d22;border-bottom:1px solid #2c333c;font-size:12.5px;color:#cde;}
  #nat-controls input[type=range]{flex:1;}
  #nat-chart{flex:1;min-height:420px;}
  #nat-main{overflow-y:auto;}
  #nat-controls{flex-wrap:wrap;}
  .nat-slider input[type=number]{width:100%;box-sizing:border-box;font-size:12px;margin:3px 0;}
  #nat-data-info{padding:8px 14px;font-size:12px;color:#aebdca;line-height:1.5;}
  #nat-data-info summary{cursor:pointer;color:#d9e6ef;}
  #nat-data-info div{padding-top:6px;}
  #nat-carbon-report{padding:8px 14px;font-size:12px;color:#aebdca;line-height:1.5;flex:none;}
  #nat-carbon-report summary{cursor:pointer;color:#d9e6ef;}
  .nat-report-body{max-height:60vh;overflow:auto;}
  .nat-report-table{overflow-x:auto;}
  .nat-report-table table{width:100%;border-collapse:collapse;margin:10px 0;font-variant-numeric:tabular-nums;}
  .nat-report-table th,.nat-report-table td{text-align:right;padding:7px;border-bottom:1px solid #39414c;white-space:nowrap;}
  .nat-report-table th:first-child,.nat-report-table td:first-child{text-align:left;}
  .nat-report-table tbody tr:last-child{border-bottom:2px solid #586777;}
  #nat-status{font-size:11.5px;color:#7e8a97;padding:0 16px 8px;}
  /* movable system rectangles: floating labels (pointer-events off) */
  #map.nat-labels-hidden .nat-rect-label{display:none;}
  .nat-rect-label{pointer-events:none;background:rgba(20,24,29,.82);
    border-radius:6px;padding:2px 7px;font-size:11px;color:#e8eef4;
    white-space:nowrap;border:1px solid rgba(255,255,255,.25);}
  .nat-rect-label .chip{display:inline-block;width:9px;height:9px;
    border-radius:2px;margin-right:5px;}
