/* Figures for the research note, on top of site.css. Every color is a token
   from site.css except the label on the orange area, which stays #111110 in
   both themes so it reads on the orange: --signal (the label-free feature), --hack (exploits), --ink,
   --quiet, --faint, --neutral, --neutral-2, --rule, --fill. Sizes use --fig-fs
   (labels). Chart text is HTML so it keeps its size on phones. */
.fig { margin: 2.4rem 0; --fig-fs: .78rem; --fig-lh: 1.35; }
.fig figcaption { font-size: .86rem; line-height: 1.5; color: var(--quiet); margin-top: 1rem; max-width: 40rem; }
.fig .fig-n { color: var(--ink); font-weight: 600; }
.fig code { font-size: .92em; }

/* Plot frames: an SVG layer plus positioned labels. */
.chart { position: relative; margin-left: 2.6rem; font-size: var(--fig-fs); line-height: var(--fig-lh); color: var(--quiet); }
.plot { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plot path { vector-effect: non-scaling-stroke; fill: none; }
.plot .grid { stroke: var(--rule); stroke-width: 1; }
.plot .band { fill: var(--fill); stroke: none; }
.plot .ln { stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.plot .ln.thick { stroke-width: 2.4; }
.plot .ln.ink { stroke: var(--ink); }
.plot .ln.sig { stroke: var(--signal); }
.plot .ln.hack { stroke: var(--hack); }
.plot .ar { stroke: none; }
.plot .ar.ok { fill: var(--neutral-2); }
.plot .ar.hack { fill: var(--hack); opacity: .82; }
.plot .ev { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; }
.plot .ev.sig { stroke: var(--signal); stroke-width: 1.5; }
.plot .bar { stroke: none; }
.plot .bar.sig { fill: var(--signal); }
.plot .bar.sig-2 { fill: var(--signal); opacity: .38; }

.tick { position: absolute; white-space: nowrap; color: var(--faint); font-variant-numeric: tabular-nums; }
.tick.y { right: calc(100% + .5rem); bottom: var(--y); transform: translateY(50%); }
.tick.x { left: var(--x); top: .35rem; transform: translateX(-50%); }
.xaxis { position: relative; margin-left: 2.6rem; height: 2.6rem; font-size: var(--fig-fs); }
.axis-x { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); color: var(--faint); white-space: nowrap; }
.ann { position: absolute; left: var(--x); bottom: var(--y); transform: translateY(-.45rem); color: var(--ink); white-space: nowrap; }
.key-in { position: absolute; left: var(--x); bottom: var(--y); white-space: nowrap; font-weight: 500; }
.ann.end { transform: translate(-100%, -.45rem); }
.key-in.end { transform: translateX(-100%); }
.key-in.sig { color: var(--signal); }
.key-in.hack { color: #111110; font-weight: 600; }
.key-in.ok { color: var(--ink); }
.ev-t { position: absolute; left: var(--x); top: -1.45rem; transform: translateX(-100%); padding-right: .35rem; white-space: nowrap; color: var(--quiet); }
.ev-t.sig { color: var(--signal); font-weight: 500; }
.ev-t.lo { top: -2.9rem; }
.ev-t.r { transform: none; padding: 0 0 0 .35rem; }
.panel-t { margin: 0 0 0 2.6rem; font-size: var(--fig-fs); color: var(--faint); }
.lg { display: inline; } .sh { display: none; }
.span-t { position: absolute; left: var(--l); width: var(--w); top: -1.45rem; text-align: left; white-space: nowrap; color: var(--quiet); }
.win { position: absolute; left: var(--l); width: var(--w); top: -.7rem; height: .45rem; border: 1.5px solid var(--quiet); border-bottom: 0; }
.win-t { position: absolute; left: 50%; bottom: calc(100% + .35rem); transform: translateX(-50%); white-space: nowrap; color: var(--ink); font-weight: 500; }
.win.end .win-t { left: auto; right: 0; transform: none; }

/* Reward over composition (Figure 2). */
.fig-reward .ch-reward { height: 11rem; margin-top: 1.4rem; }
.fig-reward .ch-comp { height: 9rem; margin-top: 2rem; }
.fig-reward .panel-t + .ch-comp { margin-top: 2rem; }
.fig-reward .ch-reward + .panel-t { margin-top: 2.2rem; }
.fig-reward .xaxis { margin-top: 0; }

/* run_tests against the hack rates (Figure 3). */
.fig-runtests .ch-rt { height: 15rem; margin-top: 3.8rem; }

/* Rollouts per step on a log scale (Figure 6). */
.fig-early .ch-early { height: 9rem; margin-top: 3.4rem; }

/* Horizontal bars: alert volume (Figure 7). */
.hbars { display: grid; gap: .55rem; font-size: var(--fig-fs); }
.hb { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 7.5rem; align-items: center; column-gap: .9rem; }
.fig-volume .hb { grid-template-columns: minmax(0, 1fr) 12rem; }
.hb-t { position: relative; height: .95rem; }
.hb-b { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--neutral); }
.fig-volume .hb-b { background: var(--signal); }
.fig-volume .hb:nth-child(n+3) .hb-b { opacity: .7; }
.hb-v { color: var(--quiet); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-v strong { color: var(--ink); font-weight: 600; }

/* The pipeline (Figure 1). */
.pipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; font-size: var(--fig-fs); line-height: 1.35; }
.pipe li { background: var(--fill); padding: .8rem .8rem .9rem; display: flex; flex-direction: column; gap: .2rem; }
.pipe li.is-eval, .pipe li.is-post { background: var(--ink); }
.pipe li.is-eval .pipe-n, .pipe li.is-eval .pipe-a, .pipe li.is-eval .pipe-b,
.pipe li.is-post .pipe-n, .pipe li.is-post .pipe-a, .pipe li.is-post .pipe-b { color: var(--ground); }
.pipe-n { color: var(--quiet); font-variant-numeric: tabular-nums; }
.pipe-a { color: var(--ink); font-weight: 600; }
.pipe-b { color: var(--quiet); }

/* First-alert timing rows (Figure 4). */
.fig .key code { font-size: 1em; }
.fig .key { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; margin: 0 0 1.1rem; font-size: var(--fig-fs); color: var(--quiet); }
.key i { display: inline-block; vertical-align: -.1em; margin-right: .4rem; }
.k-line { width: 1.4rem; height: 0; border-top: 2.4px solid var(--signal); vertical-align: .25em !important; }
.k-line.hack { border-top: 1.6px solid var(--hack); }
.trows { display: grid; gap: .25rem; font-size: var(--fig-fs); }
.tr { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 7.5rem; align-items: center; column-gap: .9rem; height: 2.3rem; }
.tr-l { color: var(--ink); white-space: nowrap; }
.tr-v { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-p { position: relative; height: 100%; background: linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat; }
.onset { position: absolute; left: var(--l); width: var(--w); top: 50%; height: .4rem; transform: translateY(-50%); background: var(--neutral-2); }
.onset-5 { position: absolute; left: var(--x); top: 25%; bottom: 25%; width: 1.5px; background: var(--quiet); }
.dot, .sq { position: absolute; left: var(--x); top: 50%; transform: translate(-50%, -50%); }
.dot { width: .72rem; height: .72rem; border-radius: 50%; background: var(--signal); top: 28%; }
.dot.hollow { background: var(--ground); outline: 1.5px solid var(--signal); outline-offset: -1.5px; }
.sq { width: .6rem; height: .6rem; top: 74%; }
.sq.same { background: var(--ink); }
.sq.usual { outline: 1.5px solid var(--ink); outline-offset: -1.5px; background: var(--ground); }
.tr-x { margin-left: calc(6.5rem + .9rem); margin-right: calc(7.5rem + .9rem); }


/* In the post hoc section, wide figures stay in the text column. */
.posthoc .fig.is-wide { width: auto; margin-left: 0; transform: none; }

@media (max-width: 40rem) {
  .fig { --fig-fs: .74rem; }
  .pipe { grid-template-columns: 1fr; }
  .pipe li { flex-direction: row; flex-wrap: wrap; column-gap: .6rem; }
  .hb { grid-template-columns: 5.6rem minmax(0, 1fr) 4.2rem; }
  .fig-volume .hb { grid-template-columns: minmax(0, 1fr) 9.5rem; }
  .tr { grid-template-columns: 5.6rem minmax(0, 1fr); height: auto; padding: .3rem 0; }
  .tr-p { height: 2.2rem; }
  .tr-v { grid-column: 2; }
  .tr-x { margin-left: calc(5.6rem + .9rem); margin-right: 0; }
  .chart, .xaxis { margin-left: 2.2rem; }
  .ev-t { font-size: .7rem; }
  .lg { display: none; } .sh { display: inline; }
  .panel-t { margin-left: 2.2rem; }
}

/* Figure 2, middle panel: the overall correct rate. */
.fig-reward .ch-cr { height: 5.5rem; margin-top: 1.4rem; }
.fig-reward .ch-cr + .panel-t { margin-top: 1.6rem; }

/* Figure 2: window brackets sit above the composition panel. */
.fig-reward .ch-comp { margin-top: 2.8rem; }

/* Figure 3: attempted hacks as a light band, labeled points. */
.plot .ar.att { fill: var(--neutral-2); }
.k-band { width: 1.2rem; height: .7rem; background: var(--neutral-2); }
.pt { position: absolute; left: var(--x); bottom: var(--y); width: .5rem; height: .5rem; border-radius: 50%; background: var(--signal); transform: translate(-50%, 50%); }
.ann.end { padding-right: .45rem; }
.ann.below { transform: translate(.6rem, 2.1rem); }

/* Figure 4: one row labels its own marks. */
.tr.is-key { height: 5rem; }
.tk-l { position: absolute; left: var(--x); white-space: nowrap; color: var(--quiet); }
.tk-l.up { top: -.15rem; }
.tk-l.dn { bottom: -.15rem; }
.tk-key { display: none; }
.k-onset { width: 1.4rem; height: .4rem; background: var(--neutral-2); }
.k-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--signal); }
.k-same { width: .65rem; height: .65rem; background: var(--ink); }
.k-usual { width: .65rem; height: .65rem; outline: 1.5px solid var(--ink); outline-offset: -1.5px; }
@media (max-width: 40rem) { .tk-key { display: flex; } .tk-l { display: none; } .tr.is-key { height: auto; } }

/* Figure 5: attempts versus outcomes. */
.oc { position: relative; padding: 2.1rem 0; font-size: var(--fig-fs); }
.oc-bar { position: relative; height: 1.6rem; }
.oc-s { position: absolute; left: var(--l); width: var(--w); top: 0; bottom: 0; }
.oc-s.hack, .oc-k.hack { background: var(--hack); }
.oc-s.ok, .oc-k.ok { background: var(--neutral); }
.oc-s.fail, .oc-k.fail { background: var(--neutral-2); }
/* the 2% not labeled an attempt: hatched, since a flat fill this light vanishes */
.oc-s.none, .oc-k.none { background: repeating-linear-gradient(135deg, var(--neutral) 0 1.5px, transparent 1.5px 4px); }
.oc-br { position: absolute; left: 0; width: var(--w); height: .45rem; border: 1.5px solid var(--quiet); }
.oc-br.up { top: 1.35rem; border-bottom: 0; }
.oc-br.dn { bottom: 1.35rem; border-top: 0; }
.oc-bt { position: absolute; left: 0; white-space: nowrap; color: var(--ink); font-weight: 500; }
.oc-br.up .oc-bt { bottom: calc(100% + .3rem); }
.oc-br.dn .oc-bt { top: calc(100% + .3rem); }
.oc-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: var(--fig-fs); }
.oc-list li { display: grid; grid-template-columns: .8rem 4.2rem 3.4rem minmax(0, 1fr); column-gap: .6rem; align-items: center; margin: 0; }
.oc-k { width: .8rem; height: .8rem; display: inline-block; }
.oc-n { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.oc-p { color: var(--quiet); text-align: right; font-variant-numeric: tabular-nums; }
.oc-t { color: var(--body); }

/* The cost of fewer false alerts. Methods keep one mark each: production an
   outline, the calibrated control --neutral, integrated evidence ink. */
.m-k { width: .9rem; height: .7rem; }
.m-k.production, .m-bar.production { box-shadow: inset 0 0 0 1.5px var(--neutral); }
.m-k.control, .m-bar.control { background: var(--neutral); }
.m-k.integrated, .m-bar.integrated { background: var(--ink); }
.m-dot { position: absolute; left: var(--x); top: 50%; width: .7rem; height: .7rem; border-radius: 50%; transform: translate(-50%, -50%); }
.m-dot.production { background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--neutral); }
.m-dot.control { background: var(--neutral); }
.m-dot.integrated { background: var(--ink); }
.ta-v { position: absolute; left: var(--x); top: 50%; transform: translate(.55rem, -50%); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ta-v.left, .ta-v.in { transform: translate(calc(-100% - .55rem), -50%); }
.ta-g { margin: 1.1rem 0 .3rem; color: var(--ink); font-weight: 600; }
.ta-l { color: var(--body); }
.ta-pt { position: relative; color: var(--quiet); }

/* Figure 2: null alerts beside localization. */
.ta { font-size: var(--fig-fs); line-height: var(--fig-lh); }
.ta-h, .ta-r { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.8rem; align-items: center; }
.ta-pt.log { padding-bottom: 1.3rem; }
.ceil-t { position: absolute; left: var(--x); bottom: .15rem; transform: translateX(-50%); color: var(--quiet); white-space: nowrap; }
.ta-r { margin: .2rem 0; }
.ta-p { position: relative; height: 1.5rem; }
.ta-p .m-bar { position: absolute; left: 0; top: .25rem; bottom: .25rem; width: var(--w); }
.ta-p .ceil { position: absolute; left: var(--x); top: -.35rem; bottom: -.35rem; border-left: 1.5px dashed var(--quiet); }
.ta-p.log .ta-v { background: var(--ground); padding: 0 .2rem; }
.ta .xaxis, .kd .xaxis { margin-left: 0; height: 1.7rem; }

/* Figure 3: localization at each shift size. */
.sz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; font-size: var(--fig-fs); line-height: var(--fig-lh); }
.sz .ta-g { margin-top: 0; }
.sz-plot { position: relative; height: 8rem; margin: .8rem 0 1.9rem 2.6rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: .7rem; }
.grid-y { position: absolute; left: 0; right: 0; bottom: var(--y); border-top: 1px solid var(--rule); }
.sz-g { position: relative; display: flex; align-items: flex-end; }
.sz-bars { position: relative; display: flex; align-items: flex-end; gap: 2px; width: 100%; height: 100%; }
.sz-bars .m-bar { flex: 1; height: var(--h); }
.sz-l { position: absolute; left: 50%; top: calc(100% + .35rem); transform: translateX(-50%); color: var(--quiet); white-space: nowrap; }

/* Figure 4: recorded cutoffs. */
.cf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; font-size: var(--fig-fs); line-height: var(--fig-lh); }
.cf .ta-g { margin-top: 0; }
.cf-r { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); column-gap: .8rem; align-items: center; margin: .3rem 0; }
.cf-l { color: var(--body); }
.cf-p { position: relative; height: 1.5rem; margin-right: 6.2rem; }
.cf-p .m-bar { position: absolute; left: 0; top: .25rem; bottom: .25rem; width: var(--w); }

/* Figure 5: the post-study diagnostic. */
.kd { font-size: var(--fig-fs); line-height: var(--fig-lh); }
.kd-tag { margin: 0 0 .4rem; color: var(--ink); font-weight: 600; }
.kd-h, .kd-r { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 7.4rem 8.6rem; column-gap: 1.4rem; align-items: center; }
.kd-r { margin: .2rem 0; }
.kd-p { position: relative; height: 1.5rem; }
.kd-seg { position: absolute; left: var(--l); width: var(--w); top: 50%; height: 2px; transform: translateY(-50%); background: var(--ink); }
.kd-seg.control { background: var(--neutral); }
.kd-dot { position: absolute; left: var(--x); top: 50%; width: .7rem; height: .7rem; border-radius: 50%; transform: translate(-50%, -50%); background: var(--ink); }
.kd-dot.control { background: var(--neutral); }
.kd-dot.open { background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--ink); }
.kd-dot.open.control { box-shadow: inset 0 0 0 1.5px var(--neutral); }
.kd-v { color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kd-n { color: var(--quiet); white-space: nowrap; font-variant-numeric: tabular-nums; }
.k-open, .k-fill { width: .7rem; height: .7rem; border-radius: 50%; }
.k-open { box-shadow: inset 0 0 0 1.5px var(--ink); }
.k-fill { background: var(--ink); }

@media (max-width: 40rem) {
  .ta-h, .ta-r { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.1rem; }
  .ta-r .ta-l { grid-column: 1 / -1; }
  .ta-h .ta-l, .ta-x .ta-l, .kd-h .ta-l, .kd-x .ta-l { display: none; }
  .tick.minor { display: none; }
  .ta-p .ceil { top: 0; bottom: 0; }
  .sz, .cf { grid-template-columns: minmax(0, 1fr); row-gap: 1.2rem; }
  .sz-plot { margin-left: 2.2rem; }
  .kd-h, .kd-r { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.1rem; row-gap: .1rem; }
  .kd-r .ta-l, .kd-r .kd-p { grid-column: 1 / -1; }
  .kd-h .kd-v { display: none; }
  .kd-h .ta-pt { grid-column: 1; }
}

/* When 428 events become an investigation problem. Ink marks the substantive
   leads, structural features and floor-free events, --neutral the rest, and
   --neutral-2 events whose members are all floor-dominated. */
.k-dot.off { background: var(--neutral); }
.k-sq { width: .7rem; height: .7rem; }
.k-sq.floor { background: var(--neutral-2); }
.k-sq.mixed, .k-sq.nsh { background: var(--neutral); }
.k-sq.none, .k-sq.ink { background: var(--ink); }
.k-sq.empty { background: var(--fill); }

/* Figure 2: one prompt group, one dot per completion. */
.rg { font-size: var(--fig-fs); line-height: var(--fig-lh); color: var(--quiet); }
.rg-r { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); column-gap: .9rem; align-items: center; min-height: 1.6rem; }
.rg-h { color: var(--faint); min-height: 0; margin-bottom: .2rem; }
.rg-v { color: var(--ink); font-variant-numeric: tabular-nums; }
.rg-ds { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.rg-d { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; background: var(--neutral); }
.rg-d.on { background: var(--ink); }
.rg-n { margin-left: .5rem; font-variant-numeric: tabular-nums; }
.fig .rg-m { margin: .7rem 0 0; color: var(--ink); }
.fig-group pre { margin: 1.4rem 0 0; }

/* Figures 3 and 7: one row per top-ten event. */
.tt, .rf { font-size: var(--fig-fs); line-height: var(--fig-lh); color: var(--quiet); }
.tt-r { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr) 8.5rem; column-gap: .9rem; align-items: center; min-height: 2rem; }
.tt-l { color: var(--ink); white-space: nowrap; }
.tt-l code { font-size: 1em; }
.tt-n { display: inline-block; width: 1.7rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.tt-p { position: relative; height: 2rem; background: linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat; }
.tt-d { position: absolute; left: var(--x); top: 50%; width: .72rem; height: .72rem; border-radius: 50%; transform: translate(-50%, -50%); background: var(--neutral); }
.tt-d.lead { background: var(--ink); }
.tt-c.lead { color: var(--ink); font-weight: 500; }
.tt-x .tt-p { background: none; }
.tt .xaxis { margin-left: 0; }

/* Figure 4: every event in rank order. */
.fg { position: relative; margin: 2.6rem 0 0 2.6rem; font-size: var(--fig-fs); line-height: var(--fig-lh); color: var(--quiet); }
.fg-s { display: block; width: 100%; height: auto; }
.fg-s .c-floor { fill: var(--neutral-2); }
.fg-s .c-mixed { fill: var(--neutral); }
.fg-s .c-none { fill: var(--ink); }
.win.start .win-t { left: 0; transform: none; }
.win.hi .win-t { bottom: calc(100% + 1.8rem); }

/* Figure 5: events per onset step. */
.fig-onsets .ch-on { height: 11rem; margin-top: 4.2rem; }
.plot .bar.nsh { fill: var(--neutral); }
.plot .bar.ink { fill: var(--ink); }
.ann.r { padding-left: .45rem; }

/* Figure 6: the eight features on the shared prompts. */
.pp { display: flex; flex-wrap: wrap; gap: 2.2rem 3rem; font-size: var(--fig-fs); line-height: var(--fig-lh); color: var(--quiet); }
.pp-panel { flex: 1 1 22rem; min-width: 0; }
.fig .pp-h { margin: 0 0 .7rem; color: var(--ink); font-weight: 500; }
.pp-r, .pv-r { display: grid; column-gap: .8rem; align-items: center; min-height: 1.8rem; }
.pp-r { grid-template-columns: 8.2rem minmax(0, 1fr) 4.4rem; }
.pv-r { grid-template-columns: 8.2rem minmax(0, 1fr) minmax(0, 1fr); }
.pp-r code, .pv-r code { font-size: 1em; }
.pp-t, .pv-t { position: relative; height: .95rem; }
.pv-t { flex: 1; background: var(--fill); }
.pp-b { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--neutral); }
.pp-b.st { background: var(--ink); }
.pp-u { color: var(--faint); }
.pp-v { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-x .xaxis { margin-left: 0; height: 1.8rem; border-top: 1px solid var(--rule); }
.pv-h { color: var(--faint); align-items: end; }
.pv-c { display: flex; align-items: center; gap: .4rem; }
.pv-c .pp-v { width: 2.4rem; text-align: right; }
.pv-all { grid-column: 2 / 4; color: var(--faint); }

/* Figure 7: exemplar references in the top ten. */
.rf-r { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr) 5rem; column-gap: .9rem; align-items: center; min-height: 1.75rem; }
.rf-h { color: var(--faint); align-items: end; }
.rf-s { display: block; width: 100%; height: 1.15rem; }
.rf-s .c0 { fill: var(--fill); }
.rf-s .c1 { fill: var(--neutral); }
.rf-s .c2 { fill: var(--ink); }
.rf-t { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rf-h .rf-t { color: var(--faint); }
.fig .rf-m { margin: .9rem 0 0; color: var(--ink); }

@media (max-width: 40rem) {
  .tt-r, .rf-r { grid-template-columns: minmax(0, 1fr) 7.2rem; row-gap: .1rem; }
  .rf-r { grid-template-columns: minmax(0, 1fr) 4.6rem; }
  .tt-r .tt-l, .rf-r .tt-l { grid-column: 1 / -1; }
  .tt-x .tt-l, .rf-h .tt-l { display: none; }
  .fg { margin-left: 2.2rem; }
}