/* History reports (/history/{asset}/{year}[/{month}]).
   Design notes and the research behind them: docs/history-reports.md.
   Up and down use the site's indigo and pink (--chg-up, --chg-down), and every colour
   is backed by a sign, an arrow or a word. */

.history-report{max-width:1040px;margin-inline:auto;padding-bottom:72px;line-height:1.85}
.history-report h1,.history-report h2,.history-report h3{color:var(--ink)}
.history-report bdi{unicode-bidi:isolate}
.history-report a{color:inherit}
/* a link inside a sentence is told apart by more than its colour */
.history-report p a,.hr-faq a,.hr-method a,.hr-source a{text-decoration:underline;text-underline-offset:3px}
.history-report :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* charts are drawn twice; the narrow drawing and the sideways month bars are for phones */
.history-report .hr-n{display:none}

/* ---- answer first ---- */
.hr-hero{padding:26px 0 6px}
/* the instrument's own picture sits at the left edge of the hero, opposite the text (RTL: it is the last flex item) */
.hr-hero.has-art{display:flex;align-items:center;gap:20px 40px}
.hr-hero-text{flex:1 1 auto;min-width:0}
.hr-hero-art{flex:0 0 auto;display:grid;place-items:center;width:188px;height:188px;border-radius:44px;border:1px solid var(--line);background:radial-gradient(circle at 30% 25%,var(--surface) 0,var(--brand-soft) 100%);box-shadow:0 18px 40px -26px color-mix(in srgb,var(--brand) 55%,transparent)}
.hr-hero-art img{display:block;width:132px;height:132px;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.16))}
@media(max-width:760px){.hr-hero.has-art{gap:12px 14px;align-items:flex-start}.hr-hero-art{width:76px;height:76px;border-radius:22px}.hr-hero-art img{width:54px;height:54px}}
.hr-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:13px;color:var(--muted)}
.hr-state{padding:1px 10px;border:1px solid var(--line-strong);border-radius:999px;font-size:12px}
.hr-state.is-live{color:color-mix(in srgb,var(--brand) 78%,var(--ink));border-color:var(--brand);background:var(--brand-soft)}
.hr-hero h1{margin:8px 0 12px;font-size:clamp(24px,4.4vw,36px);line-height:1.45;font-weight:700}
.hr-answer{margin:0;max-width:70ch;font-size:17px;line-height:2.05;color:var(--text)}
.hr-coverage{margin:8px 0 0;font-size:13.5px;color:var(--muted)}
.hr-notice{margin:12px 0 0;padding:10px 14px;border-radius:10px;background:var(--down-bg);color:var(--ink);font-size:13.5px}

.hr-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0 8px}
.hr-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.hr-card.is-main{border-color:var(--brand);background:var(--brand-soft)}
.hr-card-l{font-size:13px;color:var(--muted)}
.hr-card-v{font-size:22px;line-height:1.5;color:var(--ink);font-weight:700}
.hr-card-v small{font-size:12px;font-weight:500;color:var(--muted)}
.hr-card.is-main .hr-card-v{font-size:26px}
.hr-card-s{font-size:12.5px;color:var(--muted);line-height:1.6}
.hr-card .chg{margin-inline-start:-2px}
.hr-example{max-width:72ch;margin:12px 0 0;padding:10px 14px;border-inline-start:3px solid var(--line-strong);border-radius:8px;background:var(--surface-2);font-size:14px;line-height:1.95;color:var(--text)}
.hr-source{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.hr-source a{color:var(--brand)}

/* ---- where am I in time ---- */
.hr-strip{margin:20px 0 4px}
.hr-strip-h{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--muted)}
.hr-strip ol{display:flex;gap:8px;margin:0;padding:4px 2px 12px;overflow-x:auto;list-style:none;scroll-snap-type:x proximity;scrollbar-width:thin}
.hr-strip li{flex:0 0 auto;scroll-snap-align:start}
.hr-strip a,.hr-tile{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:84px;min-height:52px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--text);background:var(--surface)}
.hr-strip a:hover{border-color:var(--line-strong)}
.hr-strip [aria-current=page]{border-color:var(--brand);background:var(--brand-soft);color:var(--ink)}
.hr-tile-n{font-size:14px;font-weight:600}
.hr-tile.is-empty{border-style:dashed;color:var(--muted)}
.hr-tile-s{font-size:12px;color:var(--muted)}
.hr-strip .chg{height:20px;padding:0;font-size:12px;background:none}

/* ---- sections ---- */
.hr-sec{margin-top:44px}
.hr-sec>h2,.hr-sec summary h2{margin:0 0 6px;font-size:21px;font-weight:700}
.hr-sub{margin:0 0 14px;max-width:70ch;font-size:14px;color:var(--muted)}
.hr-note,.hr-notes{font-size:13px;color:var(--muted)}
.hr-note{margin:10px 0 0;max-width:72ch}
.hr-lead{margin:0 0 14px;max-width:72ch;font-size:15.5px;line-height:2}

/* ---- charts ---- */
.hr-chart{position:relative;margin:10px 0 0}
.hr-chart svg{display:block;width:100%;height:auto;overflow:visible;font-family:inherit}
.hr-chart .grid line{stroke:var(--line);stroke-width:1}
.hr-chart .yl,.hr-chart .xl text{font-size:11.5px;fill:var(--muted)}
.hr-chart .area{fill:color-mix(in srgb,var(--brand) 11%,transparent);stroke:none}
.hr-chart .line{fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.hr-chart .whisk{fill:none;stroke:var(--faint);stroke-width:2;opacity:.45}
.hr-chart .base{stroke:var(--muted);stroke-width:1;stroke-dasharray:5 4}
.hr-chart .bl{font-size:11px;fill:var(--muted);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.hr-chart .dot{fill:var(--surface);stroke:var(--brand);stroke-width:1.4}
.hr-chart .hit{fill:transparent;cursor:pointer}
.hr-chart .hit:hover{fill:color-mix(in srgb,var(--brand) 18%,transparent)}
.hr-chart .pt{stroke:var(--surface);stroke-width:2}
.hr-chart .pt.hi{fill:var(--chg-up)}
.hr-chart .pt.lo{fill:var(--chg-down)}
.hr-chart .ptl{font-size:12px;font-weight:600;paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.hr-chart .ptl.hi{fill:var(--chg-up)}
.hr-chart .ptl.lo{fill:var(--chg-down-text,var(--chg-down))}
.hr-chart figcaption{margin-top:6px;font-size:12.5px;color:var(--muted);direction:rtl;text-align:start}
.hr-tip{position:absolute;z-index:3;pointer-events:none;padding:6px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);font-size:12.5px;line-height:1.6;white-space:nowrap;box-shadow:0 4px 18px rgba(0,0,0,.12);direction:rtl}
.hr-lines .ln{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.hr-lines .l1,.history-report .sw.l1,.history-report .sw.s1{stroke:var(--brand);background:var(--brand)}
.hr-lines .l2,.history-report .sw.l2,.history-report .sw.s2{stroke:var(--gold);background:var(--gold)}
.hr-lines .l3,.history-report .sw.l3,.history-report .sw.s3{stroke:var(--faint);background:var(--faint)}
.hr-lines .l3{stroke-dasharray:6 4}
.hr-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none}
.hr-bars svg{display:block;width:100%;height:auto;font-family:inherit}
.hr-bars .zero{stroke:var(--line-strong);stroke-width:1}
.hr-bars .bar{stroke:none}
.hr-bars .bar.up{fill:var(--chg-up)}
.hr-bars .bar.down{fill:var(--chg-down)}
.hr-bars .bar.flat{fill:var(--faint)}
.hr-bars a:hover .bar{opacity:.8}
.hr-bars .bv{font-size:12px;font-weight:600;fill:var(--ink)}
.hr-bars .ml{font-size:12px;fill:var(--muted)}
.hr-bars .ml.is-empty{opacity:.5}
.hr-mbars{margin:12px 0 0;padding:0;list-style:none;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.hr-mbars li{display:grid;grid-template-columns:78px minmax(80px,1fr) auto;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid var(--line)}
.hr-mbars li:last-child{border-bottom:0}
.hr-mbars .n{font-weight:600;color:var(--ink)}
.hr-mbars .n a{color:var(--ink);text-decoration:none}
.hr-mbars .is-empty{color:var(--faint)}
.hr-mbars .nd{grid-column:2 / -1;font-size:12.5px;color:var(--faint)}
.hr-mbars .bar{display:block;width:100%;height:12px}
.hr-mbars .bar .z{stroke:var(--line-strong);stroke-width:1}
.hr-mbars .bar .up{fill:var(--chg-up)}
.hr-mbars .bar .down{fill:var(--chg-down)}
.hr-mbars .bar .flat{fill:var(--faint)}
.hr-mbars .chg{justify-self:end}

/* ---- the calendar ---- */
.hr-cal{--cell:clamp(40px,7.2vw,64px);margin:6px 0 0}
.hr-cal-head,.hr-cal-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) minmax(54px,.9fr);gap:5px}
.hr-cal-head{margin-bottom:5px;font-size:12px;color:var(--muted);text-align:center}
.hr-cal-row{margin-bottom:5px}
.hr-cal .c{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;min-height:var(--cell);padding:4px 6px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);text-decoration:none;font-size:11.5px;line-height:1.35}
.hr-cal .c.is-blank{border:0;background:none}
.hr-cal .c .d{font-size:12.5px;font-weight:650;color:var(--ink)}
.hr-cal .c .p{align-self:flex-end;font-size:11.5px;font-weight:600;direction:ltr}
.hr-cal a.c:hover{border-color:var(--brand)}
.hr-cal .wk{display:flex;align-items:center;justify-content:center}
.hr-cal .wk .chg{height:auto;padding:0;font-size:11.5px;background:none}
.history-report .h-u1{background:color-mix(in srgb,var(--chg-up) 12%,var(--surface))}
.history-report .h-u2{background:color-mix(in srgb,var(--chg-up) 24%,var(--surface))}
.history-report .h-u3{background:color-mix(in srgb,var(--chg-up) 38%,var(--surface))}
.history-report .h-u4{background:color-mix(in srgb,var(--chg-up) 52%,var(--surface))}
.history-report .h-d1{background:color-mix(in srgb,var(--chg-down) 12%,var(--surface))}
.history-report .h-d2{background:color-mix(in srgb,var(--chg-down) 24%,var(--surface))}
.history-report .h-d3{background:color-mix(in srgb,var(--chg-down) 38%,var(--surface))}
.history-report .h-d4{background:color-mix(in srgb,var(--chg-down) 52%,var(--surface))}
.history-report .h-z{background:var(--surface-2)}
.hr-cal .st-gap,.history-report .sw.st-gap{background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--faint) 32%,transparent) 5px 6px);border-style:dashed}
.hr-cal .st-closed,.history-report .sw.st-closed,.hr-cal .st-future{background:none;border-style:dotted;color:var(--muted)}
.hr-cal .st-closed .d,.hr-cal .st-future .d{color:var(--muted);font-weight:500}
.hr-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--muted)}
.hr-legend li,.hr-key li{display:inline-flex;align-items:center;gap:6px}
.history-report .sw{display:inline-block;width:14px;height:14px;border:1px solid var(--line-strong);border-radius:4px}
.hr-key .sw{height:4px;width:16px;border:0;border-radius:2px}
.hr-ud{margin:16px 0 0}
.hr-ud svg{display:block;width:100%;height:10px;border-radius:5px;overflow:hidden}
.hr-ud .up{fill:var(--chg-up)}
.hr-ud .down{fill:var(--chg-down)}
.hr-ud .flat{fill:var(--line-strong)}
.hr-ud p{margin:6px 0 0;font-size:13.5px;color:var(--text)}
.hr-insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:16px 0 0;padding:0;list-style:none}
.hr-insights a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;background:var(--surface)}
.hr-insights a:hover{border-color:var(--brand)}
.hr-insights .il{font-size:12.5px;color:var(--muted)}
.hr-insights b{font-size:18px}
.hr-insights .is{font-size:12.5px;color:var(--muted)}

/* ---- numbers ---- */
.hr-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:8px 0 0}
.hr-facts>div{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.hr-facts dt{font-size:12.5px;color:var(--muted)}
.hr-facts dd{margin:0;font-size:19px;font-weight:700;color:var(--ink)}
.hr-facts dd.s{font-size:12px;font-weight:500;color:var(--muted)}
.hr-dd{margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-inline-start:4px solid var(--chg-down);border-radius:12px;background:var(--surface)}
.hr-dd h3{margin:0 0 4px;font-size:15px}
.hr-dd p{margin:0;font-size:14.5px;line-height:1.95}
.hr-dd .s{margin-top:4px;font-size:13px;color:var(--muted)}

/* ---- tables ---- */
.hr-scroll{overflow:auto;border:1px solid var(--line);border-radius:12px}
.hr-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.hr-table th,.hr-table td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:start;white-space:nowrap}
.hr-table thead th{position:sticky;top:0;z-index:2;background:var(--surface-2);font-size:12.5px;font-weight:600;color:var(--muted)}
.hr-table tbody th{position:sticky;inset-inline-start:0;z-index:1;background:var(--surface);font-weight:600;color:var(--ink)}
.hr-table tbody tr:last-child th,.hr-table tbody tr:last-child td{border-bottom:0}
.hr-table td small.n{display:block;font-size:12px;color:var(--muted);white-space:normal;max-width:34ch}
.hr-table .chg{height:22px;padding:0;background:none}
.hr-days tr{scroll-margin-top:calc(var(--header-height) + var(--sitenav-height) + 56px)}
.hr-days tr:target th,.hr-days tr:target td{background:color-mix(in srgb,var(--brand) 14%,var(--surface))}
.hr-days tr.st-gap th,.hr-days tr.st-gap td{background:var(--surface-2);color:var(--muted);font-style:italic}
.hr-days tr.st-closed td,.hr-days tr.st-closed th{color:var(--faint);font-weight:400}
.hr-days.only-obs tr.st-gap,.hr-days.only-obs tr.st-closed{display:none}
.hr-tools{margin:0 0 8px;font-size:13.5px}
.hr-tools label{display:inline-flex;align-items:center;gap:8px;min-height:32px;cursor:pointer}
.hr-months .spark{width:80px;height:24px}
.hr-months .spark path{fill:none;stroke:var(--brand);stroke-width:1.6}
.hr-cmp thead th a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---- the module ---- */
.hr-mod{padding:22px 22px 20px;border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:14px;background:var(--surface)}
.hr-mrows{display:grid;margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.hr-mrows li{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(190px,1.5fr) minmax(110px,1fr) auto;grid-template-areas:"l v bar c" "l n n n";align-items:center;gap:2px 14px;padding:11px 16px;border-bottom:1px solid var(--line)}
.hr-mrows li:last-child{border-bottom:0}
.hr-mrows .l{grid-area:l;font-weight:650;color:var(--ink)}
.hr-mrows .v{grid-area:v;font-size:14.5px;color:var(--text)}
.hr-mrows .bar{grid-area:bar;display:block;width:100%;height:12px}
.hr-mrows .c{grid-area:c;justify-self:end}
.hr-mrows .n{grid-area:n;font-size:12.5px;color:var(--muted);line-height:1.7}
.hr-mrows .bar .z{stroke:var(--line-strong);stroke-width:1}
.hr-mrows .bar .up{fill:var(--chg-up)}
.hr-mrows .bar .down{fill:var(--chg-down)}
.hr-mrows .bar .flat{fill:var(--faint)}
.hr-eq{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:14px 0 0;padding:10px 14px;border-radius:10px;background:var(--surface-2);font-size:14.5px;font-weight:600;color:var(--ink);overflow-x:auto}
.hr-eq bdi{font-weight:700;margin-inline-start:2px}
.hr-eq .eq-s{color:var(--muted);font-weight:600}
.hr-notes{margin:14px 0 0;padding-inline-start:20px;font-size:13px;line-height:1.95;color:var(--muted)}

.hr-link{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin-top:10px;color:var(--brand);text-decoration:none;font-weight:600}
.hr-link:hover{text-decoration:underline}
/* ---- rank ---- */
.hr-rank{display:grid;gap:0;margin:8px 0 0;padding:0;list-style:none;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.hr-rank li{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(110px,2fr) minmax(72px,auto);align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line)}
.hr-rank li:last-child{border-bottom:0}
.hr-rank li.is-current{background:var(--brand-soft);font-weight:650}
.hr-rank .n small{margin-inline-start:6px;font-size:11.5px;font-weight:400;color:var(--muted)}
.hr-rank .bar{display:block;width:100%;height:12px}
.hr-rank .bar .z{stroke:var(--line-strong);stroke-width:1}
.hr-rank .bar .up{fill:var(--chg-up)}
.hr-rank .bar .down{fill:var(--chg-down)}
.hr-rank .bar .flat{fill:var(--faint)}
.hr-rank .chg{justify-self:end}

/* ---- method, questions, next ---- */
.hr-method{border-top:1px solid var(--line);padding-top:14px}
.hr-method summary{cursor:pointer;list-style:revert}
.hr-method summary h2{display:inline;margin:0;font-size:19px}
.hr-method dl{display:grid;gap:10px;margin:14px 0 0}
.hr-method dt{font-weight:650;color:var(--ink);font-size:14px}
.hr-method dd{margin:2px 0 0;font-size:14px;color:var(--text);max-width:75ch;line-height:1.95}
.hr-method p{margin:14px 0 0;font-size:13.5px;color:var(--muted)}
.hr-method a,.hr-faq a,.hr-more a{color:var(--brand)}
.hr-faq details{border-bottom:1px solid var(--line)}
.hr-faq summary{padding:13px 0;cursor:pointer;font-weight:600;color:var(--ink);min-height:44px}
.hr-faq p{margin:0 0 14px;max-width:75ch;line-height:2}
.hr-disc{margin:14px 0 0;font-size:12.5px;color:var(--muted)}
.hr-next{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:48px}
.hr-next a{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:74px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;text-decoration:none;background:var(--surface)}
.hr-next a:hover{border-color:var(--brand)}
.hr-next small{font-size:12.5px;color:var(--muted)}
.hr-next .row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.hr-next b{font-size:17px;color:var(--ink)}
.hr-next .chg{height:22px;padding:0 8px}
.hr-next .next{grid-column:2;align-items:flex-end;text-align:end}
.hr-next .prev{grid-column:1}
.hr-more{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:20px;font-size:14px;color:var(--muted)}
.hr-more a{display:inline-flex;align-items:center;min-height:32px}

@media (min-width:721px){
  .hr-scroll.tall{max-height:640px}
}

/* ---- narrow screens ---- */
@media (max-width:720px){
  .history-report .hr-w{display:none}
  .history-report .hr-n{display:block}
  .history-report .hr-mbars.hr-n{display:block}
  .hr-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hr-card.is-main,.hr-card:nth-child(4){grid-column:1 / -1}
  .hr-answer{font-size:16px}
  .hr-mod{padding:16px 14px}
  .hr-mrows li{grid-template-columns:1fr auto;grid-template-areas:"l c" "v v" "bar bar" "n n";padding:11px 12px;gap:4px 10px}
  .hr-cal-head,.hr-cal-row{gap:3px}
  .hr-cal .c{padding:3px 3px}
  .hr-cal .c .d{font-size:11.5px}
  .hr-cal .c .p{font-size:10.5px}
  .hr-cal .wk .chg{font-size:10.5px}
  .hr-rank li{grid-template-columns:minmax(96px,1fr) minmax(70px,1.4fr) auto;gap:8px;padding:8px 10px}
  .hr-next b{font-size:15px}
}
@media (max-width:420px){
  .hr-cal-head{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  .history-report *{scroll-behavior:auto!important;transition:none!important}
}