/*
 * Dated forecast page — middle section (Task 4): all movement thresholds, compare sources,
 * distribution. Artboards 01/02/03 (+ dark 05/06/07). Tokens only — no hard-coded colours.
 */

/* ------------------------------------------------- all movement thresholds */
.thr-tbl{margin-top:20px}
.thr-tbl table{min-width:640px}
.thr-tbl strong{font-weight:600}
.thr-rng{display:block;font-size:14px;color:var(--ink2)}
.thr-s{display:none}
.thr-pick{vertical-align:middle}
td.thr-pick{white-space:nowrap}
/* Selected row follows the page root's data-threshold (site.js changes that attribute and may
   move .is-sel); the server default row also carries .is-sel. site.css paints tr.is-sel, so
   reset it here and paint only the row matching data-threshold. */
.thr-tbl tbody tr>*{background:var(--bg)}
[data-threshold="1"] .thr-tbl tbody tr[data-th-row="1"]>*,
[data-threshold="5"] .thr-tbl tbody tr[data-th-row="5"]>*,
[data-threshold="10"] .thr-tbl tbody tr[data-th-row="10"]>*,
[data-threshold="50"] .thr-tbl tbody tr[data-th-row="50"]>*{background:var(--wash)}
.thr-tbl .thr-selb{display:none}
[data-threshold="1"] .thr-tbl tr[data-th-row="1"] .thr-selb,[data-threshold="5"] .thr-tbl tr[data-th-row="5"] .thr-selb,
[data-threshold="10"] .thr-tbl tr[data-th-row="10"] .thr-selb,[data-threshold="50"] .thr-tbl tr[data-th-row="50"] .thr-selb{display:inline-flex}
[data-threshold="1"] .thr-tbl tr[data-th-row="1"] .thr-show,[data-threshold="5"] .thr-tbl tr[data-th-row="5"] .thr-show,
[data-threshold="10"] .thr-tbl tr[data-th-row="10"] .thr-show,[data-threshold="50"] .thr-tbl tr[data-th-row="50"] .thr-show{display:none}
.thr-foot{margin-top:10px;font-size:14px;line-height:20px;color:var(--ink2);max-width:110ch}

/* ----------------------------------------------------------- compare sources */
.src-box{margin-top:20px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.src-tbl-w{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* .sr spans are position:absolute: keep their containing block inside the scroll box, or they
   escape it and widen the page. */
.thr-tbl,.dist-tbl{position:relative}
.src-tbl-w:focus-visible{outline-offset:-2px}
.src-tbl{min-width:880px}
.src-tbl tr.src-ai>*{background:var(--s2)}
.src-tbl tr.src-ai td strong{font-weight:600}
/* Every threshold has its own tbody: the last row of each closes the table. */
.src-tbl tbody tr:last-child>*{border-bottom:0}
.src-name{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.src-upd{font-size:14px;color:var(--ink3)}
.src-cov{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.src-cov>span:last-child{font-size:14px;color:var(--ink3)}
.src-na{color:var(--ink2);font-weight:600;text-align:center;vertical-align:middle}
.src-na-s{display:block;font-size:14px;line-height:20px;font-weight:400}
.src-mk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:14px 16px;border-top:1px solid var(--line);background:var(--bg)}
.src-mk-h{font-size:16px;line-height:24px;font-weight:600;flex:0 0 auto}
.src-mk-t{font-size:14px;line-height:20px;color:var(--ink3);flex:1 1 360px}
.src-mk-a{font-size:14px;font-weight:600}
/* One details panel under the table: an exclusive accordion (details[name]) laid out as one
   strip of summaries; the open one drops below the strip as the panel. */
.src-det{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;padding:0 16px;border-top:1px solid var(--line)}
.src-det-h{font-size:14px;line-height:20px;font-weight:600;color:var(--ink2)}
.src-d{flex:0 0 auto}
.src-d>summary{list-style:none;display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:14px;line-height:20px;font-weight:600;color:var(--brand);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.src-d>summary::-webkit-details-marker{display:none}
.src-d>summary:hover{color:var(--brand-h)}
.src-d>summary svg{flex:0 0 auto;transition:transform .15s}
.src-d[open]{order:2;flex:1 0 100%;margin:0 -16px;padding:4px 16px 16px;background:var(--s2);border-top:1px solid var(--line)}
.src-d[open]>summary{color:var(--ink);text-decoration:none}
.src-d[open]>summary svg{transform:rotate(180deg)}
.src-d-b{scroll-margin-top:64px;font-size:14px;line-height:20px;display:flex;flex-direction:column;gap:6px}
.src-d-b>p{max-width:88ch}
.src-cards{display:none}

/* ---------------------------------------------------------------- distribution */
.dist{margin-top:24px}
.dist-fx{display:flex;flex-wrap:wrap;gap:32px 40px;align-items:flex-start}
.dist-fx .dist-fig{flex:999 1 600px;min-width:0}
.dist-tbl-side{flex:1 1 340px;min-width:0}
.dist-fig{min-width:0}
.dist-k{display:inline-block;width:14px;border-top:2px dashed var(--ink)}
.dist-k-0{border-top:1px solid var(--ink)}
.dist-chart{display:flex;gap:4px;margin-top:16px}
.dist-yt{flex:0 0 18px;display:flex;align-items:center;justify-content:center}
.dist-yt>span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;line-height:16px;color:var(--ink2);white-space:nowrap}
.dist-plot{flex:1 1 auto;min-width:0;padding:0 24px}
.dist-svg{display:block;width:100%;height:300px;overflow:visible}
.dist-fx .dist-svg{height:280px}
.dist-grid{stroke:var(--s3);stroke-width:1}
.dist-ax{stroke:var(--ctl);stroke-width:1}
.dist-zero{stroke:var(--ink);stroke-width:1}
.dist-th{stroke:var(--ink);stroke-width:2;stroke-dasharray:4 4}
.dist-b{stroke:var(--bg);stroke-width:1}
.dist-dn{fill:var(--dn)}
.dist-up{fill:var(--up)}
.dist-wi{fill:url(#dist-hatch)}
.dist-ytl{font-size:12px;fill:var(--ink2);font-variant-numeric:tabular-nums}
.dist-thl{font-size:12px;font-weight:600;fill:var(--ink);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--bg);stroke-width:5px;stroke-linejoin:round}
.dist-xt{position:relative;height:40px;font-size:12px;line-height:16px;color:var(--ink2)}
.dist-x{position:absolute;top:6px;transform:translateX(-50%);text-align:center;white-space:nowrap}
.dist-x.is-0{color:var(--ink);font-weight:600}
.dist-xt-c{display:none}
.dist-xl{margin-top:8px;text-align:center;font-size:12px;line-height:16px;color:var(--ink2)}
.dist-note{margin-top:16px;font-size:14px;line-height:20px;color:var(--ink3)}
.dist-cap{caption-side:top;text-align:left;padding:12px 10px 4px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.dist-tbl .dist-rl{font-weight:400;white-space:nowrap}
.dist-sub-s{display:none}
.dist-tbl .dist-tot>*{background:var(--s2)}
.dist-tbl .dist-tot th{font-weight:600}
.dist-d{margin-top:4px}
.dist-d>summary{list-style:none;display:inline-flex;align-items:center;gap:4px;min-height:32px;font-size:14px}
.dist-d>summary::-webkit-details-marker{display:none}
.dist-d>summary svg{transition:transform .15s}
.dist-d[open]>summary svg{transform:rotate(180deg)}
.dist-d-hide{display:none}
.dist-d[open] .dist-d-show{display:none}
.dist-d[open] .dist-d-hide{display:inline}
.dist-d .dist-tbl{margin-top:8px;max-width:640px}
/* Hover titles need a pointer; touch users get the table. */
@media (hover:none){.dist-hov{display:none}}

/* ------------------------------------------------------------------ tablet */
@media (max-width:1023px){
  .dist-plot{padding:0 16px 0 24px}
}

/* ------------------------------------------------------------------ mobile */
@media (max-width:767px){
  /* Thresholds: Move / Down / Within / Up, short ranges, no bars or selection column. */
  .thr-tbl{margin-top:16px}
  .thr-tbl table{min-width:0}
  .thr-tbl th,.thr-tbl td{padding:10px 8px}
  .thr-tbl tbody th,.thr-tbl td{padding:12px 8px;font-size:16px;line-height:22px}
  .thr-l,.thr-sub-x{display:none}
  .thr-s{display:inline}
  .thr-rng{font-size:14px;line-height:18px}
  .thr-tbl .mb,.thr-tbl .thr-pick{display:none}
  .thr-tbl .thr-pick{display:none!important}

  /* Compare sources: cards with disclosure instead of the table. */
  .src-box{display:none}
  .src-cards{display:block;margin-top:16px}
  .src-cards-g{display:flex;flex-direction:column;gap:12px}
  .src-card{border:1px solid var(--line);border-radius:var(--r-md);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
  .src-card-ai{background:var(--s2)}
  .src-card-mk{border:1px dashed var(--ctl);gap:8px}
  .src-card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
  .src-card-hc{align-items:center}
  .src-card-n{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
  .src-card h3{font-size:16px;line-height:22px;font-weight:600}
  .src-card-p{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .src-card-p dd{font-size:20px;line-height:26px}
  .src-card-ai .src-card-p dd{font-weight:600}
  .src-card-na{font-size:16px;line-height:24px;font-weight:600;color:var(--ink2)}
  .src-card-d>summary{list-style:none;display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:14px;font-weight:600;color:var(--brand);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
  .src-card-d>summary::-webkit-details-marker{display:none}
  .src-card-d[open]>summary svg{transform:rotate(180deg)}
  .src-card-d>p{font-size:14px;line-height:20px}
  .src-card-d>p+p{margin-top:6px}
  .src-card-a{display:flex;align-items:center;min-height:44px;font-size:14px;font-weight:600}

  /* Distribution: compact axis, no vertical title, 220px plot. */
  .dist{margin-top:16px}
  .dist-sub-l{display:none}
  .dist-sub-s{display:inline}
  .dist-chart{margin-top:12px}
  .dist-yt{display:none}
  .dist-plot{padding:0 12px 0 28px}
  .dist-svg,.dist-fx .dist-svg{height:220px}
  .dist-xt{height:38px}
  .dist-x{top:4px}
  .dist-xt:not(.dist-xt-c){display:none}
  .dist-xt-c{display:block}
  .dist-xl{display:none}
  .dist-thl{display:none}
  .dist-note{margin-top:8px}
}

/* ------------------------------------------------------------- small mobile */
@media (max-width:359px){
  .thr-tbl th,.thr-tbl td,.thr-tbl tbody th{padding-left:5px;padding-right:5px}
  .thr-rng{font-size:13px}
}