/*
 * Dated forecast page — top area (Task 3): head, controls, outcome panel, price range,
 * key reasons aside, plus the .fc / .fc-top / .fc-main / .fc-aside layout.
 * Source: doc/design/artboards/01, 02, 03, 05, 06 (source.html). Tokens from site.css only.
 */

/* ---------------------------------------------------------------- layout */

.fc-top{margin-top:20px;display:flex;flex-wrap:wrap;gap:24px 32px;align-items:flex-start}
.fc-main{flex:999 1 640px;min-width:0;display:flex;flex-direction:column;gap:16px}
.fc-aside{flex:1 1 340px;min-width:0;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}

/* ------------------------------------------------------------------ head */

.fc-title{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}
.fc-title-t{display:flex;flex-direction:column;gap:8px;min-width:0}
.fc-title-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fc-copy-status{margin-top:8px}
.fc-copy-status:empty{display:none}
.fc-permalink{margin-top:8px;color:var(--ink2)}
.fc-url{color:var(--ink);user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}

.fc-ref{position:relative;margin-top:20px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.fc-ref-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-width:0;min-height:48px;padding:12px 200px 12px 16px}
.fc-ref-p dd{font-size:16px;line-height:24px}
.fc-ref-v{font-weight:600}
.fc-ref-n{font-size:14px;color:var(--ink2)}
.fc-ref-n-s{display:none}
.fc-ref-s{position:absolute;top:8px;right:16px;display:inline-flex;align-items:center;gap:4px;min-height:32px;font-size:14px;line-height:20px;list-style:none}
.fc-ref-s::-webkit-details-marker{display:none}
.fc-chev{transition:transform .15s}
details[open]>summary .fc-chev,.fc-ctl-tg:checked+.fc-ctl-sum .fc-chev{transform:rotate(180deg)}
.fc-tg-open{display:none}
details[open]>summary .fc-tg-open,.fc-ctl-tg:checked+.fc-ctl-sum .fc-tg-open{display:inline}
details[open]>summary .fc-tg-closed,.fc-ctl-tg:checked+.fc-ctl-sum .fc-tg-closed{display:none}
.fc-ref-m{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.fc-ref-m>div{background:var(--bg);padding:12px 16px;display:flex;flex-direction:column;gap:4px}
.fc-ref-m dd{font-size:16px;line-height:24px}
.fc-ref-dn{font-size:14px;color:var(--ink2)}

.fc-fx{margin-top:12px;display:flex;gap:10px;align-items:flex-start;background:var(--s2);border-radius:var(--r-sm);padding:12px 16px;font-size:14px;line-height:20px;color:var(--ink3)}
.fc-fx>svg{flex:0 0 auto;margin-top:1px}

/* -------------------------------------------------------------- controls */

.fc-ctl-tg,.fc-ctl-sum{display:none}
.fc-ctl-body{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 16px}
.fc-f{flex:1 1 200px}
.fc-sel-row{display:flex;gap:8px}
.fc-sel{flex:1 1 auto;min-width:0;text-overflow:ellipsis;cursor:pointer}
.fc-sel-row .btn{flex:0 0 auto;min-height:48px}
.fc-inv{display:inline-flex;align-items:center;gap:6px;min-height:28px;font-size:14px;line-height:20px;font-weight:600}
.fc-inv svg{flex:0 0 auto}
.fc-inv .muted{font-weight:400}
.fc-hint{font-size:14px;line-height:20px;color:var(--ink2);min-height:28px;display:flex;align-items:center}
.fc-th{flex:0 0 auto}
.fc-th .fc-hint{min-height:0;margin-top:6px}

/* --------------------------------------------------------- outcome panel */

.fc-oc-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px 16px}
.fc-oc-ht{min-width:0;flex:1 1 360px}
.fc-oc-t{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:18px;line-height:24px;font-weight:600}
.fc-oc-intro{font-size:14px;line-height:20px;color:var(--ink2);margin-top:4px;max-width:64ch}
.fc-oc-mb{display:none}
.fc-oc-mb .b{margin-right:2px}
.fc-oc-th{display:flex;flex-direction:column;gap:20px}
.fc-tiles .ot-h{align-items:flex-start}
.fc-tiles .ot-h .glyph{margin-top:-4px}
.fc-rows{display:none}
.fc-oc-f{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;border-top:1px solid var(--line);padding-top:16px}
.fc-bnd>summary{display:inline-flex;align-items:center;min-height:32px;font-size:14px;line-height:20px;list-style:none}
.fc-bnd>summary::-webkit-details-marker{display:none}
.fc-bnd[open]{flex:1 1 100%}
.fc-bnd-b{margin-top:8px;background:var(--s2);border-radius:var(--r-sm);padding:12px 16px;font-size:14px;line-height:20px;display:flex;flex-direction:column;gap:4px}
.fc-oc-note{font-size:14px;line-height:20px;color:var(--ink2)}

.fc-strip{display:none}

/* ----------------------------------------------------------- price range */

.fc-pr{padding:20px 20px 16px;gap:12px;border-radius:var(--r-lg)}
.fc-pr-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px 24px}
.fc-pr-ht{min-width:0}
.fc-pr-t{font-size:18px;line-height:24px;font-weight:600}
.fc-pr-sub{margin-top:4px;font-size:14px;line-height:20px;color:var(--ink2)}
.fc-pr-lg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;line-height:16px;font-weight:600;color:var(--ink3);max-width:420px}
.fc-pr-lg>span{display:inline-flex;align-items:center;gap:6px}
.fc-lg-line{width:18px;height:2px;background:var(--ink)}
.fc-lg-dash{width:18px;border-top:2px dashed var(--ink)}
.fc-lg-bnd{display:inline-flex;gap:2px}
.fc-lg-bnd>span{width:8px;border-top:2px dashed var(--dn)}
.fc-lg-bnd>span+span{border-top-color:var(--up)}
.fc-pr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.fc-pr-stats>div{background:var(--s2);padding:10px 14px}
.fc-pr-stats dt,.fc-pr-stats dd{font-size:13px;line-height:18px;color:var(--ink2)}
.fc-pr-stats .fc-pr-v{font-size:20px;line-height:28px;font-weight:600;color:var(--ink)}
.fc-pr-fig{min-width:0}
.fc-chart{display:block;width:100%;height:auto;overflow:visible;font-family:inherit}
.fc-chart-compact{display:none}
.fc-c-grid{color:var(--line)}
.fc-c-ax{color:var(--ink2)}
.fc-c-mark{color:var(--ink3)}
.fc-c-q{color:var(--ink3)}
.fc-c-ink{color:var(--ink)}
.fc-c-ink-t{fill:var(--ink)}
.fc-c-ref{fill:var(--bg);stroke:var(--ink)}
.fc-c-dot{fill:var(--ink)}
.fc-c-up{stroke:var(--up)}
.fc-c-dn{stroke:var(--dn)}
.fc-c-up-t{fill:var(--up)}
.fc-c-dn-t{fill:var(--dn-g)}
.fc-c-bnd text,.fc-c-halo{paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.fc-pr-cap{margin-top:8px;font-size:13px;line-height:18px;color:var(--ink2)}
.fc-pr-data>summary{display:inline-flex;align-items:center;min-height:32px;font-size:14px;line-height:20px}
.fc-pr-data[open]{display:flex;flex-direction:column;gap:12px}

/* ----------------------------------------------------- key reasons aside */

.fc-kr{display:flex;flex-direction:column;gap:14px}
.fc-kr-t{font-size:18px;line-height:24px;font-weight:600}
.fc-kr-sub{margin-top:4px;font-size:14px;line-height:20px;color:var(--ink2)}
.fc-tally{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fc-tally>li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:var(--r-pill);background:var(--s2);font-size:13px;line-height:16px;font-weight:600}
.fc-tally .fc-tally-g{width:20px;height:20px}
.fc-kr-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fc-kr-i{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--s3)}
.fc-kr-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.fc-kr-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.fc-kr-h h3{font-size:15px;line-height:22px;font-weight:600}
.fc-kr-dir{flex:0 0 auto;font-size:13px;line-height:16px;font-weight:600;color:var(--ink3)}
.fc-kr-s{font-size:14px;line-height:20px;color:var(--ink3)}
.fc-kr-a{font-size:13px;line-height:18px;color:var(--ink2)}
.fc-kr-a .cite{height:20px;min-width:20px;padding:0 4px;margin-left:6px;vertical-align:0}
.fc-kr-links{border-top:1px solid var(--s3);padding-top:10px;display:flex;flex-wrap:wrap;gap:4px 16px}
.fc-kr-links a,.fc-short-l a{display:inline-flex;align-items:center;min-height:32px;font-size:14px;font-weight:600}
.fc-short{display:none}

/* ------------------------------------------------------------- ≤1023px */

@media (max-width:1023px){
  .fc-th{flex:1 1 100%}
}

/* -------------------------------------------------------------- ≤767px */

@media (max-width:767px){
  /* Flatten the two columns so the sticky strip sticks for the rest of the article. */
  .fc-top,.fc-main{display:contents}
  .fc-ctl,.fc-oc,.fc-pr{margin-top:16px}
  .fc-oc{margin-top:20px}

  .fc-title{align-items:center;gap:16px}
  .fc-title-t{flex:1 1 100%}
  .fc-title-a{flex:1 1 100%;justify-content:space-between}

  .fc-ref{margin-top:16px;padding:0 16px}
  .fc-ref-p{display:grid;grid-template-columns:1fr auto;align-items:start;gap:0 12px;min-height:68px;padding:6px 0}
  .fc-ref-p dd{grid-column:2;grid-row:1 / span 2}
  .fc-ref-p dt{font-size:14px;line-height:20px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink2);padding-top:4px}
  .fc-ref-p dd{text-align:right;font-size:16px;line-height:22px;padding-top:4px}
  .fc-ref-n-l{display:none}
  .fc-ref-n-s{display:block;font-weight:400}
  .fc-ref-s{top:30px;left:16px;right:auto}
  .fc-ref-m{display:block;background:none;border-top:1px solid var(--s3);margin:0 -16px;padding:0 16px}
  .fc-ref-m>div{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--s3)}
  .fc-ref-m>div:last-child{border-bottom:0}
  .fc-ref-m dt{font-size:14px;line-height:20px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink2)}
  .fc-ref-m dd{text-align:right;line-height:22px}
  .fc-ref-dn{display:block}

  .fc-ctl-sum{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 12px 6px 14px;border:1px solid var(--ctl);border-radius:var(--r-md);background:var(--bg);color:var(--ink);cursor:pointer}
  .fc-ctl-tg{display:block}
  .fc-ctl-tg:focus-visible+.fc-ctl-sum{outline:2px solid var(--ink);outline-offset:2px}
  .fc-ctl-sum-v{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:16px;line-height:22px}
  .fc-ctl-sum-v strong{font-weight:600}
  .fc-dot{color:var(--ctl)}
  .fc-ctl-sum-a{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:14px;line-height:20px;font-weight:600;color:var(--brand)}
  .fc-ctl-body{display:none;margin-top:8px;flex-direction:column;align-items:stretch;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md)}
  .fc-ctl-tg:checked~.fc-ctl-body{display:flex}
  .fc-f,.fc-th{flex:none}

  .fc-oc{gap:14px}
  .fc-oc-ht{flex-basis:auto;display:contents}
  .fc-oc-h{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px}
  .fc-oc-t{grid-column:1;font-size:17px}
  .fc-oc-t .b{display:none}
  .fc-oc-h>[data-th]{grid-column:2;grid-row:1}
  .fc-oc-intro{grid-column:1 / -1;margin-top:0}
  .fc-oc-from{display:none}
  .fc-oc-mb{display:inline}
  .fc-oc-th{gap:14px}
  .fc-tiles{display:none}
  .fc-rows{display:flex;flex-direction:column}
  .fc-rows .orow{border-bottom:0;border-top:1px solid var(--s3)}
  .fc-rows .orow-l p:first-child{font-size:16px;line-height:22px}
  .fc-oc .obar{height:14px}
  .fc-oc .olegend{gap:6px 16px;margin-top:8px}
  .fc-oc .olegend>.muted{display:none}
  .fc-oc-f{flex-direction:column;align-items:stretch;gap:4px;border-top-color:var(--s3);padding-top:4px}

  .fc-strip{display:block;position:sticky;top:0;z-index:5;margin:16px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter);background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .fc-strip-in{height:44px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;line-height:20px}
  .fc-strip-l{font-weight:600}
  .fc-strip-p{display:inline-flex;align-items:center;gap:10px;color:var(--ink3)}
  .fc-strip-p>span{display:inline-flex;align-items:center;gap:4px}

  .fc-pr{padding:16px}
  .fc-pr-lg{max-width:none}
  .fc-chart-wide{display:none}
  .fc-chart-compact{display:block}

  .fc-aside{border:0;border-radius:0;padding:0;margin-top:24px}
  .fc-kr{display:none}
  .fc-short{display:flex;flex-direction:column;gap:12px}
  .fc-short .fc-kr-t{font-size:17px}
  .fc-short-c{background:var(--s3);border-radius:var(--r-md);padding:12px 14px}
  .fc-short-l{display:flex;flex-direction:column}
  .fc-short-l a{min-height:44px;font-size:16px}
}