/* The prototype's theme — Reference/daily-tb-risk-dashboard_25.html, CSS L10–262.
   1. IBM Plex Sans Thai (400/500/600/700, thai + latin subsets), vendored under /fonts — the CSP
      allows fonts from 'self' only, so the prototype's Google Fonts link cannot be used.
   2. The design tokens, defined once as --p-* (a prefix nothing else uses, so they cannot collide
      with the Hub shell's --bg/--card/--text, which theme.js writes inline on <html>). The six
      shell themes map onto the prototype's two: light / forest / slate → its light set,
      midnight / ocean / aurora → its dark set. --p-accent is the prototype's EFFECTIVE accent: its
      "orange menu + softened blue" block (L154–157) overrides the first --accent (#2f5bea) with
      #3e5f96 / #8ea6d4, and that is the blue every control on its screen shows. --p-menu/--p-menu2
      are the orange of its menu bar (same block).
   3. The report chrome that sits outside the view fragments — the period strip (#perStrip,
      prototype .perbar / .pb-*), the KPI strip (#kpiStrip, prototype .kpi cards + .delta pills),
      the KPI help panel and the data-notes strip. The views themselves are styled in fis.css,
      fis-pl.css, fis-fs.css and fis-data.css; the chart palette in svgchart.css; the shell in
      fis-shell.css.
   The text-size control zooms <body>, so every px here scales with it. */

/* ── 1. font ── */
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/ibm-plex-sans-thai/ibm-plex-sans-thai-thai-400-normal.woff2) format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/ibm-plex-sans-thai/ibm-plex-sans-thai-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/ibm-plex-sans-thai/ibm-plex-sans-thai-thai-500-normal.woff2) format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/ibm-plex-sans-thai/ibm-plex-sans-thai-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/ibm-plex-sans-thai/ibm-plex-sans-thai-thai-600-normal.woff2) format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/ibm-plex-sans-thai/ibm-plex-sans-thai-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/ibm-plex-sans-thai/ibm-plex-sans-thai-thai-700-normal.woff2) format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/ibm-plex-sans-thai/ibm-plex-sans-thai-latin-700-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ── 2. tokens ── */
:root{
  --p-font:"IBM Plex Sans Thai",system-ui,sans-serif;
  --p-bg:#f5f6f8;--p-card:#fff;--p-ink:#15181e;--p-muted:#5d6572;--p-line:#e3e6eb;--p-soft:#eef1f5;
  --p-accent:#3e5f96;--p-accent2:#0e9f8e;--p-accent3:#8a5cf6;
  --p-good:#12925b;--p-warn:#c77700;--p-bad:#d13b3b;
  --p-good-bg:#e5f5ec;--p-warn-bg:#fdf1dc;--p-bad-bg:#fbe6e6;
  --p-menu:#e2702a;--p-menu2:#f0954a;--p-menu-ink:#fff;--p-on-accent:#fff;
  --p-shadow:0 6px 12px -8px rgba(0,0,0,.25);
}
:root[data-theme="midnight"],:root[data-theme="ocean"],:root[data-theme="aurora"]{
  --p-bg:#0f1216;--p-card:#171b21;--p-ink:#e8ebf0;--p-muted:#98a1ae;--p-line:#2a3039;--p-soft:#1f242c;
  --p-accent:#8ea6d4;--p-accent2:#2fc4b0;--p-accent3:#a78bfa;
  --p-good:#3ccf8a;--p-warn:#f0a73a;--p-bad:#ff6b6b;
  --p-good-bg:#16302a;--p-warn-bg:#3a2c15;--p-bad-bg:#3a1c1f;
  --p-menu:#b85a1f;--p-menu2:#cf7434;--p-menu-ink:#fff;
  --p-on-accent:#0f1216; /* the prototype keeps #fff on its light dark-mode blue (2.3:1); its dark bg reads at 7:1 */
  --p-shadow:0 6px 14px -8px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ── 3. report chrome ── */
.fis-scope,#perStrip,#kpiHelp,#srcNotes,#srcBanner,.fis-hdr,.fis-util,.foot{font-family:var(--p-font);}

/* period strip = prototype .perbar / .pb-* (CSS L138–153): label, the four two-line mode buttons,
   the captioned pickers on the right, then six comparison tiles (.pb-cmp .c) */
.per-strip{margin:0 0 12px;background:var(--p-card);border:1px solid var(--p-line);border-radius:14px;color:var(--p-ink);line-height:1.55;}
.per-body{padding:12px 14px;gap:0;}
.per-row{gap:12px;align-items:center;flex-wrap:wrap;}
.pb-lab{font-weight:700;font-size:calc(14px*var(--fz,1));color:var(--p-accent);letter-spacing:.02em;}
.pd-bar{display:flex;gap:6px;flex-wrap:wrap;padding:0;border:0;background:none;}
.pd-btn{height:auto;min-width:120px;padding:7px 14px;border:1.5px solid var(--p-line);border-radius:10px;background:var(--p-bg);
  color:var(--p-ink);display:flex;flex-direction:column;align-items:flex-start;gap:0;font:inherit;line-height:1.5;text-align:left;}
.pd-btn b{font-size:calc(14px*var(--fz,1));font-weight:700;}
.pd-btn span{font-size:calc(11px*var(--fz,1));color:var(--p-muted);font-weight:400;}
.pd-btn:hover:not(:disabled){color:var(--p-ink);background:var(--p-bg);border-color:var(--p-accent);}
.pd-btn.on,.pd-btn.on:hover:not(:disabled){color:var(--p-on-accent);background:var(--p-accent);border-color:var(--p-accent);}
.pd-btn.on span{color:color-mix(in srgb,var(--p-on-accent) 85%,transparent);}
.pd-btn:focus-visible,.per-sel select:focus-visible,.per-toggle:focus-visible{outline:2px solid var(--p-accent);outline-offset:1px;}
.per-pick{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto;}
.per-sel{display:flex;flex-direction:column;align-items:stretch;gap:2px;font-size:calc(11px*var(--fz,1));font-weight:400;color:var(--p-muted);}
.per-sel select{height:auto;padding:7px 10px;border:1px solid var(--p-line);border-radius:8px;background:var(--p-card);color:var(--p-ink);
  font:inherit;font-size:calc(13px*var(--fz,1));cursor:pointer;}
.per-sel select option{color:var(--p-ink);background:var(--p-card);}
.per-sel select option:disabled{color:var(--p-muted);}
.per-err{color:var(--p-bad);font-size:calc(13px*var(--fz,1));}
.per-err:empty{display:none;}
.per-cmp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:10px;}
.pc{min-width:0;padding:8px 10px;border-radius:10px;border:1px solid var(--p-line);background:var(--p-bg);}
.pc-l{font-size:calc(11.5px*var(--fz,1));font-weight:400;color:var(--p-muted);white-space:normal;overflow:visible;}
.pc-v{font-size:calc(17px*var(--fz,1));font-weight:700;line-height:1.55;color:var(--p-ink);font-variant-numeric:normal;}
.pc-d{font-size:calc(11.5px*var(--fz,1));line-height:1.55;}
/* the prototype colours the change only (.pos / .neg text), no pill */
.pc-pos,.pc-neg,.pc-flat{font-weight:400;padding:0;background:none;}
.pc-pos{color:var(--p-good);}
.pc-neg{color:var(--p-bad);}
.pc-flat{color:var(--p-warn);}
.pc-sub{color:var(--p-muted);white-space:normal;}
@media (max-width:1000px){ .per-cmp{grid-template-columns:repeat(3,minmax(0,1fr));} .per-pick{margin-left:0;} }

/* the 8 KPI cards of sm-overview = prototype .card.kpi (L34–38): label, value, .delta pill, spark
   (104 × 34) on the right of the value */
.fis-scope .fis-kpis .fis-kpi{cursor:pointer;overflow:hidden;height:auto;}
.fis-scope .fis-kpi .kpi-lbl{display:flex;align-items:center;gap:0;text-transform:none;letter-spacing:0;margin:0;white-space:normal;font-weight:400;font-size:calc(12.5px*var(--fz,1));color:var(--p-muted);line-height:1.55;}
.fis-scope .fis-kpi .kpi-lbl .fis-hbtn{margin:0 0 0 6px;width:18px;height:18px;}
.fis-scope .fis-kpi .kpi-row{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;}
.fis-scope .fis-kpi .kpi-main{min-width:0;}
.fis-scope .fis-kpi .kpi-v{font-size:calc(23px*var(--fz,1));font-weight:700;margin:2px 0;line-height:1.55;white-space:nowrap;}
.fis-scope .fis-kpi .kpi-val,.fis-scope .fis-kpi .kpi-unit{font:inherit;color:var(--p-ink);letter-spacing:0;margin:0;}
.fis-scope .fis-kpi .kpi-chg{display:inline-block;font-size:calc(12px*var(--fz,1));font-weight:600;padding:2px 7px;border-radius:99px;white-space:nowrap;line-height:1.55;}
.fis-scope .fis-kpi .kpi-chg.up{color:var(--p-good);background:var(--p-good-bg);}
.fis-scope .fis-kpi .kpi-chg.dn{color:var(--p-bad);background:var(--p-bad-bg);}
.fis-scope .fis-kpi .kpi-chg.fl{color:var(--p-warn);background:var(--p-warn-bg);}
.fis-scope .fis-kpi .kpi-spark{position:relative;height:34px;width:104px;flex:none;overflow:hidden;}
.fis-scope .fis-kpi:hover{border-color:color-mix(in srgb,var(--p-accent) 55%,var(--p-line));}
.fis-scope .fis-kpi.sel{border-color:var(--p-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--p-accent) 18%,transparent);}
.fis-scope .fis-kpi:focus-visible{outline:2px solid var(--p-accent);outline-offset:1px;}

/* the help a tapped KPI opens, and the data-notes strip */
.kpi-help{position:relative;padding:10px 44px 6px 14px;border:1px solid var(--p-line);border-radius:14px;background:var(--p-card);color:var(--p-ink);font-size:calc(13px*var(--fz,1));}
.kpi-help[hidden]{display:none;}
.kpi-help-t{font-weight:700;}
.kpi-help-x{border-color:var(--p-line);background:var(--p-soft);color:var(--p-ink);}
.kpi-help-x:hover{border-color:var(--p-accent);color:var(--p-accent);}
.data-note{margin:0 0 12px;padding:8px 14px;border:1px solid var(--p-line);border-left:4px solid var(--p-bad);border-radius:10px;
  background:var(--p-bad-bg);color:var(--p-ink);font-size:calc(12.5px*var(--fz,1));}

/* the chart host must not pick up the Hub's old ".sc" segment-card rule (components.css) */
.fis-scope .sc{background:none;border:0;border-radius:0;padding:0;box-shadow:none;transition:none;}
.fis-scope .sc:hover{box-shadow:none;}
.fis-scope .sc::before{display:none;}

@media (max-width:991.98px){
  .per-toggle{color:var(--p-ink);}
  .per-toggle-ico{filter:none;}
  .per-body{padding:0 12px 12px;}
  .per-row .pb-lab{display:none;}
  .per-row .pd-btn{min-width:0;flex:1 1 0;padding:6px 8px;height:auto;}
  .per-cmp{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){ .per-row .pd-btn span{display:none;} }