/*
 * Dated forecast page — bottom sections (Task 5): Why these estimates? · Events · Prediction-market
 * context · What this forecast may miss · Forecast versions · Track record / other dates /
 * sources / method. Artboards 01, 02, 03, 05, 06. Tokens only — no hard-coded colours.
 */

/* ------------------------------------------------ Why these estimates? */

.why-grid{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:24px 48px}
.why-col{min-width:0}
.why-h3{display:flex;align-items:center;gap:8px;font-size:18px;line-height:24px;font-weight:600}
.why-list{list-style:none;padding:0;margin-top:12px}
.why-item{padding:16px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.why-item-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.why-t{font-size:16px;line-height:24px;font-weight:600}
.why-item>p{font-size:16px;line-height:24px}
.why-item .cite+.cite{margin-left:4px}

/* ------------------------------------------- Events before the target date */

.ev-grid{margin-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(480px,100%),1fr));gap:24px 48px}
.ev-h3{font-size:16px;line-height:24px;font-weight:600}
.ev-list{list-style:none;padding:0;margin-top:8px}
.ev{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.ev-date{flex:0 0 120px;font-size:14px;line-height:20px;font-weight:600}
.ev-time{display:block;font-weight:400;color:var(--ink2)}
.ev-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.ev-body>.b{align-self:flex-start}
.ev-t{font-size:16px;line-height:24px;font-weight:600}
.ev-after .ev-date{color:var(--ink2)}
.ev-after .ev-t{color:var(--ink3)}
.ev-after .ev-d{color:var(--ink2)}
.ev-sc{flex-direction:column;gap:6px}
.ev-sc>.b{align-self:flex-start}

/* ------------------------------------------------ Prediction-market context */

.mk-legend{margin-top:16px}
.mk-card{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.mk-warn{background:var(--wn-w);color:var(--wn2);padding:16px 24px;display:flex;gap:12px;align-items:flex-start}
.mk-warn>svg{flex:0 0 auto;margin-top:2px}
.mk-warn-b{display:flex;flex-direction:column;gap:6px;min-width:0}
.mk-warn-t{font-size:16px;line-height:24px;font-weight:600}
.mk-warn ul{margin:0;padding-left:18px;font-size:14px;line-height:20px;display:flex;flex-direction:column;gap:2px}
.mk-body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:16px}
.mk-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:16px 24px}
.mk-dl>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.mk-dl dd{font-size:16px;line-height:24px}
.mk-rules{display:flex;flex-direction:column;gap:4px;max-width:80ch}
.mk-ph{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.mk-key{margin-top:12px;font-size:14px;line-height:20px;color:var(--ink2);max-width:96ch}
.mk-key strong{color:var(--ink)}
.mk-none{margin-top:16px;border:1px dashed var(--ctl);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:12px;max-width:880px}

/* ---------------------------------------------- What this forecast may miss */

.lim{margin-top:16px;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:24px;max-width:80ch}

/* -------------------------------------------------------- Forecast versions */

.ver-tbl{margin-top:20px}
.ver-tbl .ver-plain{font-weight:400}
.ver-tbl td{white-space:nowrap}
.ver-tbl td.ver-v{white-space:normal}

/* ------------------------------------- Track record / dates / sources / method */

.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:32px}
.rel-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.rel-h{font-size:18px;line-height:24px;font-weight:600}
.rel-note{color:var(--ink3)}
.rel-lnk{font-weight:600}
.rel-dates{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.rel-pl{color:var(--ink2);font-size:14px}
.rel-src{padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:20px;color:var(--ink3)}
.rel-src li:target{background:var(--wash);border-radius:var(--r-xs);outline:4px solid var(--wash)}

/* ------------------------------------------------------------------- mobile */

@media (max-width:767px){
  .why-h3{margin-top:20px;font-size:17px}
  .why-grid{margin-top:0;gap:0}
  .why-list{margin-top:4px}
  .why-item{padding:14px 0;gap:6px}

  .ev-grid{margin-top:12px;gap:20px}
  .ev{flex-direction:column;gap:4px}
  .ev-date{flex:none;color:var(--ink3)}
  .ev-time{display:inline;font-weight:600;color:inherit}
  .ev-time::before{content:", "}

  .mk-card{border-radius:var(--r-md)}
  .mk-warn{padding:14px}
  .mk-body{padding:14px;gap:12px}
  .mk-body .h3{font-size:16px;line-height:22px}
  .mk-body .b,.mk-legend .b{white-space:normal}
  .mk-dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mk-dl>div:last-child:nth-child(odd){grid-column:1 / -1}
  .mk-none{padding:16px}

  .lim{margin-top:12px}

  /* Versions as a list: one block per version. */
  .ver-tbl{margin-top:12px;border:0;border-radius:0;overflow:visible}
  .ver-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ver-tbl table,.ver-tbl tbody{display:block}
  .ver-tbl tr{display:flex;flex-wrap:wrap;column-gap:4px;row-gap:4px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .ver-tbl tr.is-sel{border-radius:var(--r-sm);border-bottom:0}
  .ver-tbl tbody tr:last-child{border-bottom:0}
  .ver-tbl th,.ver-tbl td{display:block;padding:0;border:0;text-align:left}
  .ver-tbl th{flex:1 0 100%;font-size:16px;line-height:22px}
  .ver-tbl td.ver-ref,.ver-tbl td.ver-p{font-size:14px;line-height:20px;color:var(--ink3);white-space:normal}
  .ver-tbl td.ver-ref::before,.ver-tbl td.ver-p::before{content:attr(data-label) " "}
  .ver-tbl td.ver-p::before{content:"· " attr(data-label) " "}
  .ver-tbl td.ver-v{flex:1 0 100%}
  .ver-tbl td.ver-v .b{background:var(--bg)}
  .ver-tbl td.ver-v a{display:flex;align-items:center;min-height:44px;font-size:14px;font-weight:600}

  .rel{gap:24px}
  .rel-col{gap:4px}
  .rel-h{font-size:17px}
  .rel-lnk,.rel-dates a{display:inline-flex;align-items:center;min-height:44px}
  .rel-dates{gap:0}
  .rel-src{margin-top:4px}
}