/* The outcome screen (F195).
 *
 * Its own sheet, matching its own script, because it is the one surface a client
 * looks at and it has a different job from the rest of the application: the operator
 * tooling is dense on purpose, and this has to be readable by somebody who opened it
 * once. Same tokens throughout — favorable green, contrary red, other grey — so a
 * colour means one thing across the product and across the printed report.
 *
 * The layout rule that everything below serves: a share is drawn before it is
 * printed. Three percentages sitting near each other do not show a composition, and
 * comparing two channels at a glance is the entire reason two boxes are on one row.
 */

.o-page{max-width:1180px; margin:0 auto; padding-bottom:3rem;}

.o-topbar{display:flex; justify-content:space-between; align-items:center;
  gap:1rem; margin:.25rem 0 1rem;}
.o-modes{display:flex; gap:.3rem; background:var(--neu-soft); padding:.2rem;
  border-radius:8px;}
.o-modes .btn{border:none; background:none; box-shadow:none;}
.o-modes .btn.on{background:var(--card); box-shadow:0 1px 2px rgba(0,0,0,.08);
  color:var(--text); font-weight:600;}

/* What produced these figures, on every view. The case is open: comments arrive and
 * the wave grows, so a total without its inputs cannot be told apart from the same
 * total recomputed over more data. */
.o-asof{display:flex; flex-wrap:wrap; gap:.15rem 1.1rem; align-items:baseline;
  font-size:.76rem; color:var(--text-muted); padding:.55rem .8rem;
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  margin-bottom:.9rem;}
.o-asof span::before{content:"·"; margin-right:.55rem; opacity:.45;}
.o-asof span:first-of-type::before{content:none;}
/* The item's label. Ten facts in a row need naming; the values used to carry their
 * own units in prose and ran together into one long sentence. */
.o-asof span b{font-weight:600; color:var(--text); margin-right:.2rem;}
.o-asof.stale{background:var(--warn-soft); border-color:#fcd34d;
  color:var(--warn-ink);}
/* The stale headline, which is the bar's own direct child — not the item labels
 * inside the spans, which must stay inline. */
.o-asof.stale > b{display:block; width:100%; margin-bottom:.2rem;}
.o-asof.stale span b{color:var(--warn-ink);}

.o-otherline{font-size:.8rem; color:var(--text-muted); margin:0 0 1.6rem;}

/* ------------------------------------------------------------------ blocks */

.o-block{margin:0 0 2.4rem;}
.o-head{margin-bottom:.9rem;}
.o-head h2{font-size:1.32rem; font-weight:650; margin:0 0 .35rem;
  letter-spacing:-.01em;}
/* The finding, in one sentence, generated from the numbers rather than typed in. It
 * is set larger than the explanation under it because a reader who stops after one
 * line should stop after the right one. */
/* The question a panel answers, where two panels could be mistaken for two answers
 * to one question. Set as a question rather than a heading so the eye reads it as the
 * thing being asked, and quietly enough not to compete with the figure below it. */
/* The name of the method, above the title rather than inside it, so a reader can see
 * at a glance which blocks came out of the same fit. */
.o-model{font-size:.68rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--primary); margin:0 0 .15rem;}
.o-model-note{font-size:.82rem; color:var(--text-muted); margin:.25rem 0 .5rem;
  max-width:64em;}
.o-q{font-size:.85rem; font-weight:600; color:var(--primary); margin:0 0 .45rem;
  letter-spacing:.005em;}
.o-lead{font-size:1rem; line-height:1.5; margin:0 0 .4rem; max-width:64em;}
.o-why{font-size:.84rem; color:var(--text-muted); margin:0; max-width:64em;}
.o-caution{font-size:.8rem; color:var(--warn-ink); background:var(--warn-soft);
  border:1px solid #fde68a; border-radius:8px; padding:.55rem .75rem;
  margin:.9rem 0 0; max-width:70em;}

/* ------------------------------------------------------------------ the box */

.o-pair{display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start;}
.o-pair.one{grid-template-columns:minmax(0,560px);}
@media (max-width:860px){ .o-pair{grid-template-columns:1fr;} }

.o-box{background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:1.1rem 1.15rem 1rem;}
.o-box.accent{border-color:#bfdbfe; box-shadow:0 1px 3px rgba(59,130,246,.10);}
.o-box-h h3{font-size:1rem; font-weight:650; margin:0;}
.o-box-h h4{font-size:.88rem; font-weight:650; margin:0;}
/* The unit and the size of the population it is a share of. A percentage with no
 * population beside it is not a figure anybody can check. */
.o-pop{font-size:.76rem; color:var(--text-muted); margin:.12rem 0 .8rem;}

.o-bar{display:flex; height:30px; border-radius:7px; overflow:hidden;
  background:var(--neu-soft); margin-bottom:.85rem;}
.o-bar.thin{height:16px; margin-bottom:.5rem;}
.o-seg{display:flex; align-items:center; justify-content:center; min-width:0;
  color:#fff; font-size:.74rem; font-weight:600; font-variant-numeric:tabular-nums;
  transition:width .25s ease;}
.o-seg.o-fav{background:var(--fav);}
.o-seg.o-con{background:var(--con);}
.o-seg.o-oth{background:var(--neu);}
.o-bar.thin .o-seg{font-size:.65rem;}

.o-figs{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem;}
.o-fig{border-radius:9px; padding:.6rem .5rem .55rem; text-align:center;
  border:1px solid transparent;}
.o-fig.o-fav{background:var(--fav-soft); border-color:#c8efe0;}
.o-fig.o-con{background:var(--con-soft); border-color:#f8cccc;}
.o-fig.o-oth{background:var(--neu-soft);}
/* The share leads and the count follows. Two channels counted in units that cannot be
 * added — 99,340 taps against 17,299 comments — are not comparable as totals at all,
 * and comparing them is the only reason both boxes are on one screen. The share is
 * also the figure that survives this case staying open: collecting more comments
 * moves every count and need not move the composition. */
.o-pct{font-size:1.7rem; font-weight:700; line-height:1.05;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.o-fig.o-fav .o-pct{color:var(--fav-ink);}
.o-fig.o-con .o-pct{color:var(--con-ink);}
.o-fig.o-oth .o-pct{color:var(--text-muted);}
.o-key{font-size:.75rem; font-weight:600; margin-top:.05rem;}
.o-fig.o-fav .o-key{color:var(--fav-ink);}
.o-fig.o-con .o-key{color:var(--con-ink);}
.o-fig.o-oth .o-key{color:var(--text-muted);}
.o-band{display:block; font-size:.68rem; color:var(--text-muted);
  font-variant-numeric:tabular-nums;}
.o-n{font-size:.74rem; color:var(--text-muted); margin-top:.3rem;
  font-variant-numeric:tabular-nums;}
.o-cband{display:block; font-size:.66rem; color:var(--text-muted); opacity:.75;
  font-variant-numeric:tabular-nums;}

/* The like-weighted reading of the same comments, inside the same box. It is a
 * different unit, not a different estimate, so it belongs next to its plain twin and
 * not in a panel of its own where the comparison would be lost. */
.o-second{margin-top:1rem; padding-top:.9rem; border-top:1px dashed var(--border);}
.o-inline{display:flex; flex-wrap:wrap; gap:.15rem .9rem; font-size:.78rem;}
.o-ip b{font-variant-numeric:tabular-nums;}
.o-ip.o-fav b{color:var(--fav-ink);}
.o-ip.o-con b{color:var(--con-ink);}
.o-note{font-size:.75rem; color:var(--text-muted); margin:.55rem 0 0;
  line-height:1.45;}

/* -------------------------------------------------------- what moved */

.o-moved{margin-top:1rem; background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:.9rem 1.1rem;}
.o-moved h4{font-size:.85rem; font-weight:650; margin:0 0 .6rem;}
.o-mrow{display:grid; grid-template-columns:88px 1fr 78px; align-items:center;
  gap:.6rem; margin-bottom:.3rem;}
.o-mk{font-size:.78rem; color:var(--text-muted);}
/* A signed bar with zero in the middle, because "up 3.8" and "down 7.0" are two
 * directions and a table of before-and-after makes the reader do the subtraction that
 * is the entire point of the panel. */
.o-mbar{position:relative; height:12px; background:var(--neu-soft);
  border-radius:99px; overflow:hidden;}
.o-mbar::before{content:""; position:absolute; left:50%; top:0; bottom:0;
  width:1px; background:#cbd5e1;}
.o-mbar i{position:absolute; top:0; bottom:0; display:block; border-radius:99px;}
.o-mbar i.o-fav{background:var(--fav);}
.o-mbar i.o-con{background:var(--con);}
.o-mbar i.o-oth{background:var(--neu);}
.o-mv{font-size:.78rem; text-align:right; font-variant-numeric:tabular-nums;
  color:var(--text-muted);}
.o-mv.up{color:var(--fav-ink);} .o-mv.down{color:var(--con-ink);}

/* ---------------------------------------------------- the account stance rule */

.o-chain{display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
  margin:.2rem 0 .6rem;}
.o-link{background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:.55rem .8rem; text-align:center; min-width:130px;}
.o-link b{display:block; font-size:1.25rem; font-weight:700; line-height:1.1;
  font-variant-numeric:tabular-nums;}
.o-link span{font-size:.72rem; color:var(--text-muted);}
.o-arrow{font-size:.7rem; color:var(--text-muted); max-width:120px; line-height:1.3;
  position:relative; padding-left:.9rem;}
.o-arrow::before{content:"→"; position:absolute; left:0; top:0; font-size:.9rem;}

.o-cal{margin-top:1rem; background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:.9rem 1.1rem;}
.o-cal h4{font-size:.85rem; font-weight:650; margin:0 0 .4rem;}
.o-cal p{font-size:.82rem; margin:0 0 .6rem; max-width:60em;}
.o-caltiles{display:flex; gap:.7rem; flex-wrap:wrap;}
.o-tile{flex:1 1 200px; border-radius:9px; padding:.6rem .8rem;}
.o-tile.o-fav{background:var(--fav-soft);} .o-tile.o-con{background:var(--con-soft);}
.o-tile b{display:block; font-size:1.5rem; font-weight:700; line-height:1.1;
  font-variant-numeric:tabular-nums;}
.o-tile.o-fav b{color:var(--fav-ink);} .o-tile.o-con b{color:var(--con-ink);}
.o-tile span{font-size:.73rem; color:var(--text-muted);}

/* ------------------------------------------------------------ the simulation */

.o-sim{background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:1.3rem 1.35rem;}
.o-simtop{display:grid; grid-template-columns:250px 1fr; gap:1.4rem;
  align-items:start;}
@media (max-width:860px){ .o-simtop{grid-template-columns:1fr;} }
.o-prob{background:var(--info-soft); border:1px solid var(--info-line);
  border-radius:12px; padding:1rem;}
/* Both directions, the leading one drawn large. They are complementary, and a reader
 * who has to subtract 70 from 100 to learn the other half of the answer has been
 * handed arithmetic instead of a result. */
.o-probrow + .o-probrow{margin-top:.7rem; padding-top:.7rem;
  border-top:1px solid var(--info-line);}
.o-probn{font-size:3rem; font-weight:750; line-height:1; color:var(--info-ink);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;}
.o-probrow + .o-probrow .o-probn{font-size:1.9rem;}
.o-probn.o-con{color:var(--con-ink);} .o-probn.o-fav{color:var(--fav-ink);}
.o-probk{font-size:.82rem; color:var(--text); margin-top:.35rem;}

/* The weights, movable. Nothing here is saved: the control shows what a different
 * judgement would have produced and says so in `o-wwarn`, because a figure a reader
 * dialled up is not the published figure and the two must never look alike. */
.o-weights{margin-top:1rem; padding:.9rem 1rem; border-radius:11px;
  background:var(--neu-soft); border:1px solid var(--border);}
.o-weights.changed{border-color:var(--warn-line); background:var(--warn-soft);}
.o-weights h4{margin:0 0 .3rem; font-size:.82rem;}
.o-wrow{display:grid; grid-template-columns:190px 1fr 52px 108px; gap:.7rem;
  align-items:center; margin-top:.5rem;}
@media (max-width:760px){ .o-wrow{grid-template-columns:1fr 1fr; gap:.4rem;} }
.o-wk{font-size:.8rem;}
.o-wrow input[type=range]{width:100%; accent-color:var(--primary);}
.o-wrow output{font-size:.85rem; font-weight:700; text-align:right;
  font-variant-numeric:tabular-nums;}
.o-wpub{font-size:.7rem; color:var(--text-muted); text-align:right;}
.o-wact{display:flex; gap:.5rem; margin-top:.75rem; flex-wrap:wrap;}
.o-wwarn{font-size:.76rem; color:var(--warn-ink); margin:.7rem 0 0; line-height:1.45;}
/* The caveat sits with the number, not below the section. When three channels put the
 * probability anywhere from 0% to 100% on their own, the blended figure is largely a
 * restatement of the weights, and a reader shown the figure alone would take it for a
 * measurement. */
.o-flag{font-size:.73rem; color:var(--warn-ink); background:var(--warn-soft);
  border-radius:7px; padding:.4rem .55rem; margin-top:.6rem;}
/* The 100%-is-not-certainty note. Quieter than the warning above it — it qualifies a
 * figure rather than casting doubt on the method that produced it. */
.o-flag-q{color:var(--text-muted); background:var(--neu-soft);}
/* The range a channel's weight took across the runs, under the channel's name. */
.o-wrange{display:block; font-size:.68rem; color:var(--text-muted); font-style:normal;
  font-variant-numeric:tabular-nums; margin-top:.1rem;}

/* States what the fused figure is licensed to be, so it cannot be read as the headline
 * of the case. Quiet, because it is a condition on the figure and not a fault in it. */
.o-flag-lic{color:var(--text-muted); background:var(--neu-soft);}

/* The fused block's two units, side by side and the same width. One answers how many
 * people and the other how much was said; the wider column would read as the real
 * figure and the narrower as a footnote on it, which is the opposite of the point. */
.o-fused-units{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem;
  margin:1rem 0 .4rem;}
@media (max-width:860px){ .o-fused-units{grid-template-columns:1fr;} }
.o-fu{min-width:0; border-top:2px solid var(--line); padding-top:.6rem;}
.o-fu h4{margin:0 0 .1rem;}
.o-fu .o-dist{margin-bottom:.7rem;}

.o-dists{display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem;}
@media (max-width:700px){ .o-dists{grid-template-columns:1fr;} }
.o-dist{min-width:0;}
.o-disth{display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap;
  margin-bottom:.2rem;}
.o-disth b{font-size:1.15rem; font-variant-numeric:tabular-nums;}
.o-disth .o-key.o-fav{color:var(--fav-ink);}
.o-disth .o-key.o-con{color:var(--con-ink);}
.o-disth .o-key.o-oth{color:var(--text-muted);}
.o-chart{width:100%; height:78px; display:block;}
.o-chart polygon{opacity:.22;}
.o-chart polyline{fill:none; stroke-width:1.6; vector-effect:non-scaling-stroke;}
.o-chart.o-fav polygon{fill:var(--fav);} .o-chart.o-fav polyline{stroke:var(--fav);}
.o-chart.o-con polygon{fill:var(--con);} .o-chart.o-con polyline{stroke:var(--con);}
.o-chart.o-oth polygon{fill:var(--neu);} .o-chart.o-oth polyline{stroke:var(--neu);}
.o-ax{font-size:9px; fill:var(--text-muted);}

.o-why-wide{margin-top:1.4rem;}
.o-why-wide h4{font-size:.9rem; font-weight:650; margin:0 0 .5rem;}
.o-tbl{width:100%; border-collapse:collapse; font-size:.82rem;}
.o-tbl th, .o-tbl td{padding:.4rem .55rem; border-bottom:1px solid var(--border);
  text-align:left;}
.o-tbl th{font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-muted); font-weight:600;}
.o-tbl .n{text-align:right; font-variant-numeric:tabular-nums;}
.o-tbl tr.on td{background:var(--info-soft); font-weight:600;}
.o-tbl tr.o-spread td{color:var(--text-muted); font-style:italic;
  border-bottom:none;}

/* ------------------------------------- the post and the crowd under it */

/* The verdict before the grid. Nine percentages do not answer "does the post decide
 * what gets written under it"; one difference and its interval do. */
.o-verdict{display:grid; grid-template-columns:auto 1fr; gap:.3rem 1.1rem;
  align-items:baseline; border:1px solid var(--border); border-left:4px solid var(--neu);
  border-radius:0 11px 11px 0; padding:.9rem 1.1rem; margin:0 0 1rem;
  background:var(--card);}
.o-verdict.moves{border-left-color:var(--primary);}
.o-vn{font-size:1.8rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;}
.o-vk{font-size:.82rem;}
.o-vk span{color:var(--text-muted); font-variant-numeric:tabular-nums;}
.o-vv{grid-column:1 / -1; font-size:.8rem; color:var(--text-muted);}

/* Said before the grid, because every cell in it is conditional. A reader who takes
 * a cell for a share of all comments reads the row that says 59% as three fifths of
 * the conversation instead of three fifths of one corner of it. */
.o-reads{font-size:.82rem; color:var(--text); line-height:1.5; margin:.1rem 0 .55rem;
  padding-left:.7rem; border-left:3px solid var(--primary);}

.o-mx{width:100%; border-collapse:separate; border-spacing:3px; margin:0 0 .6rem;}
.o-mx th{text-align:left; font-weight:650; vertical-align:bottom;}
.o-mxh{font-size:.7rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-muted); width:34%;}
.o-mxk{font-size:.74rem; text-align:center !important; padding-bottom:.3rem;
  line-height:1.25;}
.o-mxk.o-fav{color:var(--fav);} .o-mxk.o-con{color:var(--con);}
.o-mxk.o-oth{color:var(--text-muted);}
.o-mxrawh{font-size:.66rem; color:var(--text-muted); text-align:right !important;
  line-height:1.25; font-weight:500;}
.o-mx tbody th, .o-mx tr th[scope="row"]{background:var(--card);
  border:1px solid var(--border); border-radius:9px; padding:.6rem .75rem;}
.o-mx th[scope="row"] b{display:block; font-size:.85rem; margin-bottom:.15rem;}
.o-mx th[scope="row"] span{display:block; font-size:.7rem; color:var(--text-muted);
  font-weight:400; margin-bottom:.4rem;}
.o-mxc{position:relative; text-align:center; border-radius:9px; padding:.7rem .3rem;
  background:var(--neu-soft); overflow:hidden;}
.o-mxfill{position:absolute; inset:0; background:var(--neu); z-index:0;}
.o-mx tr td:nth-child(2) .o-mxfill{background:var(--fav);}
.o-mx tr td:nth-child(3) .o-mxfill{background:var(--con);}
.o-mxc b{position:relative; z-index:1; display:block; font-size:1.25rem;
  font-variant-numeric:tabular-nums;}
.o-mxb{position:relative; z-index:1; display:block; font-size:.66rem;
  color:var(--text-muted); font-variant-numeric:tabular-nums;}
.o-mxraw{text-align:right; font-size:.7rem; color:var(--text-muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;}
/* A row of unread posts is a state of the work, not a stance. It is drawn as
 * unfinished so nobody quotes it beside the three that are. */
.o-mx tr.o-pending th[scope="row"]{border-style:dashed;}
.o-mx tr.o-pending .o-mxc{opacity:.55;}

/* ------------------------------------------------------------ platforms */

.o-plats{display:grid; grid-template-columns:1fr 1fr; gap:.9rem;}
@media (max-width:860px){ .o-plats{grid-template-columns:1fr;} }
.o-plat{background:var(--card); border:1px solid var(--border); border-radius:11px;
  padding:.8rem .95rem;}
.o-plath{display:flex; justify-content:space-between; align-items:baseline;
  gap:.6rem; margin-bottom:.55rem;}
.o-plath b{font-size:.92rem; text-transform:capitalize;}
.o-plath span{font-size:.72rem; color:var(--text-muted); text-align:right;}
.o-platrow{display:grid; grid-template-columns:88px 1fr 62px; gap:.6rem;
  align-items:start; margin-bottom:.6rem;}
.o-platk{font-size:.74rem; color:var(--text-muted); padding-top:1px;}
.o-platk i{display:block; font-style:normal; font-size:.68rem;
  font-variant-numeric:tabular-nums;}
.o-platrow .o-bar{margin-bottom:.25rem;}
/* How much of the channel this platform is. Without it four platforms draw four bars
 * of equal length and a reader averages audiences of wildly different size. */
.o-platw{padding-top:1px; text-align:right;}
.o-platw i{display:block; height:4px; border-radius:99px; background:var(--primary);
  margin:5px 0 3px auto;}
.o-platw b{font-size:.7rem; color:var(--text-muted);
  font-variant-numeric:tabular-nums;}
.o-skeys{display:flex; flex-wrap:wrap; gap:.7rem; font-size:.7rem;
  color:var(--text-muted);}
.o-skey{display:inline-flex; align-items:center; white-space:nowrap;}
.o-skeys i{display:inline-block; width:8px; height:8px; border-radius:2px;
  margin-right:.25rem;}
.o-skeys i.o-fav{background:var(--fav);}
.o-skeys i.o-con{background:var(--con);}
.o-skeys i.o-oth{background:var(--neu);}
/* The heading over each day chart. Sits tighter to the chart than a block title,
   because the two charts are one section and not two. */
.o-dayh{margin:1rem 0 .3rem; font-size:.85rem; font-weight:700;}
.o-legend{display:flex; gap:1rem; margin-top:.7rem; font-size:.75rem;
  color:var(--text-muted); flex-wrap:wrap;}
.o-legend i{display:inline-block; width:10px; height:10px; border-radius:3px;
  margin-right:.3rem;}
.o-legend i.o-fav{background:var(--fav);} .o-legend i.o-con{background:var(--con);}
.o-legend i.o-oth{background:var(--neu);}
.o-legw{font-style:italic;}

/* ----------------------------------------------- what a reaction meant (D157) */

/* Two kinds of number sit in this table and they must not read alike. The observed
 * count is a fact about the corpus: heavy, tabular, immediately after the label. The
 * probabilities are somebody's reading of it, and are lighter and smaller so the eye
 * takes them as an annotation on the fact rather than as more of the same. */
.o-mtbl{width:100%; border-collapse:separate; border-spacing:3px; margin:0 0 .6rem;}
.o-mtbl th{text-align:left; font-weight:650; vertical-align:bottom;}
.o-mth{font-size:.7rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-muted); width:32%;}
.o-mnh{font-size:.7rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-muted); text-align:right !important;}
.o-mph{font-size:.74rem; text-align:center !important; padding-bottom:.3rem;}
.o-mph.o-fav{color:var(--fav);} .o-mph.o-con{color:var(--con);}
.o-mph.o-oth{color:var(--text-muted);}
.o-mch{font-size:.66rem; color:var(--text-muted); line-height:1.25; font-weight:500;}
.o-mtbl tr th[scope="row"]{background:var(--card); border:1px solid var(--border);
  border-radius:9px; padding:.55rem .75rem;}
.o-mtbl th[scope="row"] b{display:block; font-size:.85rem; margin-bottom:.1rem;}
.o-mtbl th[scope="row"] span{display:block; font-size:.7rem; color:var(--text-muted);
  font-weight:400;}
.o-mtbl th[scope="row"] i{display:block; font-size:.68rem; color:var(--text-muted);
  font-weight:400; margin-top:.2rem;}
.o-mnum{text-align:right; padding:.55rem .6rem; white-space:nowrap;
  font-variant-numeric:tabular-nums;}
.o-mnum b{font-size:1.05rem;}
.o-mnum span{display:block; font-size:.68rem; color:var(--text-muted);}
.o-mp{text-align:center; font-size:.86rem; font-variant-numeric:tabular-nums;
  padding:.55rem .3rem;}
.o-mp.o-fav{color:var(--fav);} .o-mp.o-con{color:var(--con);}
.o-mp.o-oth{color:var(--text-muted);}
.o-mc{font-size:.7rem; padding:.55rem .6rem;}
.o-mc i{display:block; font-size:.68rem; color:var(--text-muted); margin-top:.15rem;}
.o-mconf{display:inline-block; padding:.05rem .45rem; border-radius:20px;
  border:1px solid var(--border); font-size:.66rem;}
.o-mconf.high{color:var(--fav);} .o-mconf.low{color:var(--con);}
/* Undecided, drawn as undecided. Same treatment as an unread post above, and for the
 * same reason: it must not be quotable beside a cell somebody actually ruled on. */
.o-mconf.stip{border-style:dashed; color:var(--text-muted);}
.o-mtbl tr.o-mstip th[scope="row"]{border-style:dashed;}
.o-mtbl tr.o-mstip .o-mp{opacity:.5;}
.o-mtots{background:var(--card); border:1px solid var(--border); border-radius:11px;
  padding:.8rem 1rem; margin:.2rem 0 .6rem;}
.o-mtots h4{font-size:.85rem; font-weight:650; margin:0 0 .5rem;}
.o-mtotr{display:flex; gap:1.2rem; flex-wrap:wrap;}
.o-mtot{flex:1 1 130px; font-variant-numeric:tabular-nums;}
.o-mtot b{display:block; font-size:1.35rem;}
.o-mtot span{font-size:.75rem;}
.o-mtot i{display:block; font-size:.72rem; color:var(--text-muted); font-style:normal;}
.o-mtot.o-fav b{color:var(--fav);} .o-mtot.o-con b{color:var(--con);}
.o-mgate{border-left:3px solid var(--neu); padding:.15rem 0 .15rem .7rem;
  margin:0 0 .6rem;}
.o-mgate p{font-size:.8rem; margin:0 0 .35rem;}
.o-mgate ul{margin:0; padding-left:1.1rem; font-size:.78rem; color:var(--text-muted);}
.o-mgate li{margin-bottom:.15rem;}
.o-mgate li.o-mmore{list-style:none; margin-left:-.5rem; font-style:italic;}

/* ------------------------------------------------------------ method */

.o-method{display:grid; grid-template-columns:1fr 1fr; gap:.9rem;}
@media (max-width:860px){ .o-method{grid-template-columns:1fr;} }
.o-mitem{background:var(--card); border:1px solid var(--border); border-radius:11px;
  padding:.85rem 1rem;}
.o-mitem h4{font-size:.85rem; font-weight:650; margin:0 0 .3rem;}
.o-mitem p{font-size:.8rem; color:var(--text-muted); margin:0; line-height:1.5;}

.o-more{font-size:.8rem; color:var(--text-muted); text-align:center;
  padding:1rem 0;}

/* ------------------------------------------- what could be wrong, and how (D160)
 *
 * Two modals over the results, and the layout is doing an argument in both.
 *
 * In the sources modal the argument is that error enters in stages and the stages are
 * not interchangeable: a reader who sees eleven flat cards weighs a missing scrape
 * against a misjudged laughing face as though they were the same kind of doubt. So
 * the stages are a path across the top, each card carries a tag saying whether the
 * band covers it, and every magnitude is a bar before it is a number — with the bar's
 * colour fixed by what a long one means, because half these quantities are shortfalls
 * and half are coverage.
 *
 * In the simulation modal the argument is that the band was computed rather than
 * chosen. Steps, then five real runs, then all four thousand as a shape with the band
 * drawn on it: the reader who follows one row can see where the last figure came
 * from, which no sentence about Monte Carlo achieves.
 */

.modal.wide .modalbox{width:min(1080px,96vw); padding:1.25rem 1.4rem;}
/* A chart opened on its own takes the window. 1,080px is barely more than the width the
   compact chart is already drawn at, and the whole reason for opening one is the room:
   every date on the axis, and eight columns of figures under it. */
.modal.chartwide .modalbox{width:min(1780px,98vw); max-height:94vh;}
.o-daywin .chart{border:1px solid var(--border); border-radius:10px; background:#fff;
  padding:.4rem;}
.o-daywin .o-mkicker{margin:0 0 .1rem;}
/* Narrower than the chart above it. Eight columns spread over 1,780px puts the day and
   its figures at opposite ends of the screen, which is the opposite of comparing them. */
.o-daywin .cd-table{max-width:1080px;}
/* The compact chart opens; the pointer says so. A `title` here would put a
   browser tooltip over the day figures the chart already answers with. */
.o-open{cursor:zoom-in;}

.o-modal h2{font-size:1.2rem; font-weight:650; margin:0 0 .3rem;}
.o-modal h4{font-size:.9rem; font-weight:650; margin:1.5rem 0 .5rem;}
.o-modal h4:first-of-type{margin-top:1.2rem;}
.o-mhead{display:flex; gap:1rem; align-items:flex-start;
  justify-content:space-between; border-bottom:1px solid var(--border);
  padding-bottom:.8rem;}
.o-mhead .btn{flex:0 0 auto;}
.o-mkicker{font-size:.74rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); margin:0 0 .25rem; font-weight:600;}

/* The figure under discussion, drawn once at the top of both modals. A band printed
 * as two decimals is the thing a reader cannot picture; the same band as a stretch
 * they can see is the whole reason this element exists. */
.o-bandbar{margin:1rem 0 .2rem; max-width:34rem;}
.o-bbtrack{position:relative; height:14px; border-radius:7px;
  background:var(--neu-soft); border:1px solid var(--border);}
.o-bbfill{position:absolute; top:0; bottom:0; background:var(--info-line);
  border-radius:7px;}
.o-bbtick{position:absolute; top:-3px; bottom:-3px; width:3px; border-radius:2px;
  background:var(--info-ink);}
.o-bblab{display:flex; justify-content:space-between; align-items:baseline;
  font-size:.76rem; color:var(--text-muted); margin-top:.3rem;
  font-variant-numeric:tabular-nums;}
.o-bblab b{color:var(--text); font-size:.86rem;}

/* The stages as a path, with a headcount on each. It is a table of contents that also
 * makes the point the modal is organised around, and it lets a reader who only wants
 * the interpretation stage skip four sections without reading them. */
.o-path{display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .45rem;
  margin:1.2rem 0 .2rem; padding:.6rem .7rem; background:var(--bg);
  border:1px solid var(--border); border-radius:9px;}
.o-pathi{display:flex; align-items:baseline; gap:.35rem; font-size:.78rem;}
.o-pathn{display:inline-grid; place-items:center; width:1.15rem; height:1.15rem;
  border-radius:50%; background:var(--info-ink); color:#fff; font-size:.68rem;
  font-weight:700; align-self:center;}
.o-pathl{font-weight:600;}
.o-pathc{font-size:.7rem; color:var(--text-muted); background:var(--card);
  border:1px solid var(--border); border-radius:20px; padding:0 .35rem;}
.o-patha{color:var(--neu); font-size:.8rem;}

.o-stage{margin-top:1.5rem;}
.o-stage h4{margin:0 0 .15rem;}
.o-srcs{display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.7rem;}
@media (max-width:820px){ .o-srcs{grid-template-columns:1fr;} }

.o-src{background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:.7rem .85rem; border-left:3px solid var(--neu);}
/* Colour by what it does to the figure, so a reader skimming twelve cards can find
 * the uncovered ones without reading a tag. */
.o-src.e-outside{border-left-color:var(--warning); background:var(--warn-soft);}
.o-src.e-widens{border-left-color:var(--fav);}
.o-src.e-both, .o-src.e-moves{border-left-color:var(--info-ink);}
.o-src.e-none{border-left-color:var(--neu); background:var(--bg);}
.o-srch{display:flex; gap:.5rem; align-items:baseline;
  justify-content:space-between;}
.o-srch h5{font-size:.85rem; font-weight:650; margin:0;}
.o-eff{flex:0 0 auto; font-size:.68rem; font-weight:700; padding:.05rem .4rem;
  border-radius:20px; white-space:nowrap;}
.o-eff.e-outside{background:#fef3c7; color:var(--warn-ink);}
.o-eff.e-widens{background:var(--fav-soft); color:var(--fav-ink);}
.o-eff.e-both, .o-eff.e-moves{background:var(--info-soft); color:var(--info-ink);}
.o-eff.e-none{background:var(--neu-soft); color:var(--text-muted);}
.o-srcw{font-size:.8rem; margin:.35rem 0 0; line-height:1.5;}
.o-srch2{font-size:.8rem; margin:.5rem 0 0; line-height:1.5;
  padding-top:.5rem; border-top:1px dashed var(--border);}
.o-state{display:inline-block; font-size:.68rem; font-weight:700; margin-right:.35rem;
  padding:.05rem .35rem; border-radius:4px; background:var(--neu-soft);
  color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em;}
.o-state.s-measured{background:var(--fav-soft); color:var(--fav-ink);}
.o-state.s-unmeasured{background:var(--con-soft); color:var(--con-ink);}
.o-state.s-declared{background:var(--info-soft); color:var(--info-ink);}

.o-mag{margin:.55rem 0 0;}
.o-magt{height:8px; border-radius:5px; background:var(--neu-soft);
  border:1px solid var(--border); overflow:hidden;}
.o-magf{height:100%;}
/* A shortfall and a coverage share are both drawn here, and they must not look alike:
 * 90% collected is good news and 90% never measured is not. */
.o-magf.gap{background:var(--warning);}
.o-magf.cover{background:var(--fav);}
.o-magl{font-size:.74rem; color:var(--text-muted); margin-top:.2rem;}
.o-magl b{color:var(--text); font-variant-numeric:tabular-nums;}

/* The total, said once at the foot. A modal that lists what it covers and what it
 * does not without adding them up lets a reader leave with the wrong impression of
 * which list was longer. */
.o-closing{font-size:.84rem; line-height:1.55; margin:1.6rem 0 .2rem;
  padding:.7rem .85rem; border-radius:9px; background:var(--bg);
  border:1px solid var(--border);}
.o-closing.warn{background:var(--warn-soft); border-color:#fde68a;
  color:var(--warn-ink);}

/* ------------------------------------------------------- the simulation modal */

.o-mcstat{display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 0;}
.o-mcstat div{flex:1 1 12rem; background:var(--bg); border:1px solid var(--border);
  border-radius:9px; padding:.55rem .75rem;}
.o-mcstat b{display:block; font-size:1.05rem; font-weight:700;
  font-variant-numeric:tabular-nums;}
.o-mcstat span{font-size:.75rem; color:var(--text-muted);}

.o-steps{display:grid; gap:.5rem;}
.o-step{display:flex; gap:.7rem; align-items:flex-start; background:var(--card);
  border:1px solid var(--border); border-radius:10px; padding:.65rem .8rem;}
.o-stepn{flex:0 0 auto; display:grid; place-items:center; width:1.5rem;
  height:1.5rem; border-radius:50%; background:var(--info-soft);
  color:var(--info-ink); font-weight:700; font-size:.8rem;}
.o-step h5{font-size:.85rem; font-weight:650; margin:0 0 .2rem;}
.o-step p{font-size:.8rem; color:var(--text-muted); margin:0; line-height:1.5;}
.o-stepsrc{font-size:.72rem; margin-top:.3rem; color:var(--info-ink);
  font-style:italic;}

/* The five rows. The result column is set apart because it is the only column that is
 * an output: a reader scanning left to right has to be able to see where the inputs
 * stop and the answer starts, or the table reads as five unrelated numbers. */
/* Sized to the panel rather than to the text. The columns are set to share the width
 * evenly and the headings wrap, because the alternative is a table wider than the
 * modal with the answer column past the right edge — the one column the table is for,
 * behind a horizontal scrollbar nobody looks for. */
.o-mctblw{overflow-x:auto;}
.o-mctbl{margin-top:.4rem; table-layout:fixed; width:100%;}
.o-mctbl th{vertical-align:bottom; white-space:normal; overflow-wrap:break-word;}
.o-mctbl th:first-child, .o-mctbl td:first-child{width:3.2rem;}
.o-mctbl th.res, .o-mctbl td.res{background:var(--info-soft);
  border-left:2px solid var(--info-line);}
.o-mctbl td.res{font-weight:700; color:var(--info-ink);}
.o-th2{display:block; font-weight:400; text-transform:none; letter-spacing:0;
  font-size:.68rem; color:var(--text-muted); margin-top:.15rem;
  white-space:normal;}
.o-runn{font-family:var(--mono); font-size:.78rem; color:var(--text-muted);}
.o-mchist{max-width:34rem; margin:.3rem 0 0;}

/* The two buttons on a box. They sit at the foot of the box rather than beside its
 * heading, because they are what to do after reading the figure, not before. Each one
 * carries a number on its face: "what could be wrong" says nothing about whether it
 * is worth opening, and "8 sources, 4 not covered by the band" both says so and
 * leaves the important half with a reader who never clicks. */
.o-asks{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.85rem;
  padding-top:.75rem; border-top:1px dashed var(--border);}
.o-ask{flex:1 1 13rem; text-align:left; cursor:pointer; font:inherit;
  background:var(--bg); border:1px solid var(--border); border-radius:9px;
  padding:.5rem .65rem; color:var(--text);}
.o-ask:hover{border-color:var(--primary); background:var(--info-soft);}
.o-ask b{display:block; font-size:.79rem; font-weight:650; line-height:1.35;}
.o-ask span{display:block; font-size:.72rem; color:var(--text-muted);
  margin-top:.15rem;}
.o-prob .o-asks{border-top:none; padding-top:.2rem;}