/*
 * Settled date page (artboards 04 light / 08 dark). Owned by Task 6.
 * Templates: templates/front/forecast/_settled.html.twig + forecast/settled/_*.html.twig.
 * Colours only via the custom properties in site.css.
 */

/* Overline + H1 + status */
.st-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}
.st-title{display:flex;flex-direction:column;gap:8px;min-width:0}

/* Inverse "Forecast issued" strip */
.st-issued{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:16px 20px;border-radius:var(--r-md);background:var(--ink);color:var(--bg)}
.st-issued-t{font-size:18px;line-height:24px;font-weight:600}
.st-issued-n{font-size:14px;line-height:20px;color:var(--inv2);flex:1 1 320px}

/* Result panel */
.st-res{margin-top:24px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.st-res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1px;background:var(--line);margin:0}
.st-res-c{background:var(--bg);padding:20px;display:flex;flex-direction:column;gap:6px;min-width:0}
.st-res-out{background:var(--s2)}
.st-res-v{font-size:28px;line-height:34px}
.st-res-cat{font-size:22px;line-height:30px;font-weight:600}
.st-res-n{font-size:14px;line-height:20px;color:var(--ink2)}

/* Threshold control row */
.st-ctl{margin-top:24px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end}
.st-ctl-n{font-size:14px;line-height:20px;color:var(--ink2);flex:1 1 300px;padding-bottom:12px}

/* Original forecast + score aside */
.st-split{margin-top:20px;display:flex;flex-wrap:wrap;gap:24px 32px;align-items:stretch}
.st-orig{flex:999 1 640px;min-width:0;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:16px}
.st-orig-n{margin-top:4px;font-size:14px;line-height:20px;color:var(--ink2)}
.st-th{display:flex;flex-direction:column;gap:16px}
.st-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px}
.st-tile{border-radius:var(--r-md);padding:16px;display:flex;flex-direction:column;gap:6px;background:var(--s2);min-width:0}
.st-tile.is-hit{background:var(--bg);box-shadow:inset 0 0 0 2px var(--ink)}
.st-tile-l{font-size:16px;line-height:20px;font-weight:600}
.st-tile-p{font-size:36px;line-height:44px}
.st-tile-r{font-size:14px;line-height:20px;color:var(--ink2)}
.st-tile-s{font-size:14px;line-height:20px;color:var(--ink3);font-weight:600}
.st-on{font-size:16px;line-height:24px}
.st-score{flex:1 1 340px;min-width:0;border-radius:var(--r-lg);background:var(--s2);padding:24px;display:flex;flex-direction:column;gap:12px}
.st-score-b{display:flex;flex-direction:column;gap:12px}
.st-score-v{font-size:40px;line-height:48px}
.st-calc{font-family:var(--mono);font-size:13px;line-height:20px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;overflow-wrap:anywhere}

/* Tables */
.st-tbl{margin-top:20px;position:relative}
.st-src{max-width:880px}
.st-src-n{font-weight:400}
.st-src-n .b{margin-left:6px}
.st-ns{font-size:14px;color:var(--ink3)}
.st-out-r{display:block;font-size:14px;line-height:20px;color:var(--ink2)}
.st-tbl td.num,.st-out,.st-out-r{white-space:nowrap}
.st-foot{margin-top:10px;font-size:14px;line-height:20px;color:var(--ink2)}
/* The selected threshold's row in "Outcome at every threshold" follows the page state. */
[data-threshold="1"] tr[data-row-th="1"],
[data-threshold="5"] tr[data-row-th="5"],
[data-threshold="10"] tr[data-row-th="10"],
[data-threshold="50"] tr[data-row-th="50"]{background:var(--wash)}

/* Next links */
.st-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:32px}
.st-next-c{display:flex;flex-direction:column;align-items:flex-start;gap:10px}

@media (max-width:767px){
  .st-issued{padding:14px 16px}
  .st-res-c{padding:16px}
  .st-res-v{font-size:24px;line-height:30px}
  .st-ctl-n{padding-bottom:0}
  .st-ctl .th-ctl{flex:1 1 100%}
  .st-orig,.st-score{padding:16px}
  .st-tile-p{font-size:32px;line-height:40px}
  .st-score-v{font-size:36px;line-height:44px}
  .st-next{gap:24px}
  .st-tbl th,.st-tbl td{padding-left:12px;padding-right:12px}
}