/* WO17 public simulation — the approved five-stage guided walkthrough. * * Composition, timing and copy come from the approved prototypes; the VALUES * come from this site. The prototypes carry their own palette (--ink, --blue, * --panel …) and Arial; none of that is used here. Everything below resolves * to tokens already defined in styles.css, so the simulation inherits the * site's type, spacing, radii and focus treatment and cannot drift from them. * * SEMANTIC COLOUR, held across all five stages: * teal (--teal / --teal-dark) informational · analysis · provenance * amber (--amber) arithmetic discrepancy · needs attention * red (--error) a hard relationship failure, and nothing * else, so it still means something in * stage 3 */ /* ------------------------------------------------------------- the shell */ .sim { margin: 8px 0 12px; } .sim-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; list-style: none; margin: 0 0 22px; padding: 0; } .sim-rail li { margin: 0; min-width: 0; } .sim-step { font: inherit; width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 8px 4px; cursor: pointer; text-align: left; color: var(--midgray); border-top: 3px solid var(--border); } .sim-step .n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--lightgray); color: var(--charcoal); font-family: var(--font-mono); font-size: 13px; } .sim-step .t { font-size: 14px; line-height: 1.25; } /* Completed and inactive stages stay READABLE — the rail is navigation, not * a progress bar, and a step you cannot read is a step you cannot choose. */ .sim-step[aria-current="step"] { color: var(--navy); border-top-color: var(--teal); } .sim-step[aria-current="step"] .n { background: var(--teal); color: #fff; } .sim-step[aria-current="step"] .t { font-weight: 600; } .sim-step.is-done .n { background: #D7E9E9; color: var(--teal-dark); } .sim-step:hover:not([aria-current="step"]) { color: var(--charcoal); } .sim-stage { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; } /* `min-width: 0` on the children, or the tables below refuse to shrink: a grid * item defaults to min-width:auto, so a 520px-wide scroll area sets the column * width and the whole page gains a horizontal scrollbar at 360px instead of * the table scrolling inside its own box. */ .sim-grid > * { min-width: 0; } /* ...and the same for every grid INSIDE a stage. A grid item defaults to * `min-width: auto`, so a box whose min-content is wider than its track * simply overflows the card rather than wrapping — which is exactly what the * claim-status category and the review rows were doing. */ .sim-cats > *, .sim-findings > *, .sim-review > *, .sim-result > *, .sim-export > *, .sim-checks > *, .sim-flow > *, .sim-map > * { min-width: 0; } .sim-tag { overflow-wrap: anywhere; } .sim-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; min-width: 0; } .sim-card h3 { font-size: 22px; margin: 0 0 16px; } .sim-intro { color: var(--charcoal); margin: 0 0 16px; font-size: 16px; } .sim-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 12px; } .sim-controls .btn[disabled] { background: var(--lightgray); color: var(--midgray); border-color: var(--border); cursor: not-allowed; } /* The stages are
elements, and the site sets `section{padding:96px 0}` * for page-level bands. Inside a card that already has its own padding that is * 192px of nothing wrapped around every stage — the same "a global rule I did * not think about" failure as the dead stepper CSS, one level up. */ .sim-panel { padding: 0; } .sim-panel[hidden] { display: none; } /* The synthetic marker, once, near the controls rather than floating over * the artwork — the approved stage 1 has no badge in its corner. */ /* HIDDEN UNTIL THE MAPPING IS DONE. `final()` has always added `.on` to this * element; there was no rule for it, so "5 fields mapped · 2 fields not used" * was legible from the moment the stage opened — the answer printed above the * demonstration of how it was reached. The browser check asserted the footer * was "shown" and passed for exactly that reason. */ .sim-foot { margin-top: 14px; font-size: 14px; color: var(--midgray); visibility: hidden; opacity: 0; transition: opacity .4s ease; } .sim-foot.on { visibility: visible; opacity: 1; } /* --------------------------------------------------- 1. select & inspect */ .sim-select { border: 2px dashed #B8D1DF; border-radius: var(--radius); min-height: 120px; display: grid; place-items: center; text-align: center; padding: 20px; transition: border-color .35s ease, background .35s ease; } .sim-select .st { font-weight: 600; font-size: 18px; color: var(--navy); } .sim-select.on { border-color: var(--teal); background: #F0FBFB; } .sim-file { margin-top: 18px; border: 1px solid #CFE1EA; background: #EEF7FB; border-radius: var(--radius); padding: 16px; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; } .sim-file.on { opacity: 1; transform: none; } .sim-file .fn { font-weight: 600; font-size: 17px; color: var(--navy); } .sim-file .fm { color: var(--charcoal); margin-top: 5px; font-size: 15px; font-family: var(--font-mono); } .sim-fact { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 14px; align-items: center; padding: 14px 12px; border-top: 1px solid var(--lightgray); opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; } .sim-fact.on { opacity: 1; transform: none; } .sim-fact .k { color: var(--midgray); font-size: 15px; } .sim-fact .v { font-weight: 600; color: var(--navy); font-size: 15px; } .sim-fact .sim-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #E4F6F3; color: var(--teal-dark); font-size: 14px; font-weight: 700; } /* "Not stated" is a question, not a failure: amber and a "?", never red and * never "!". Nothing is wrong with the file — the date simply is not in it, * and the next line says it can be supplied later. */ .sim-fact.ask { background: #FDF6EA; border-radius: 8px; } .sim-fact.ask .v { color: #5A321D; } .sim-fact.ask .sim-mark { background: #FFF0C7; color: var(--amber); } .sim-note { border-top: 1px solid var(--lightgray); margin-top: 16px; padding-top: 14px; color: var(--charcoal); font-size: 15px; opacity: 0; transition: opacity .4s ease; } .sim-note.on { opacity: 1; } /* ------------------------------------------------------------ 2. mapping */ .sim-maphead { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--midgray); padding: 0 10px 8px; border-bottom: 1px solid var(--border); } .sim-map { margin-top: 6px; } .sim-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 11px 10px; border-radius: 8px; border: 1px solid transparent; transition: background .3s ease, border-color .3s ease, opacity .3s ease; } .sim-row .l { font-family: var(--font-mono); font-size: 14px; color: var(--charcoal); } .sim-row .r { font-size: 15px; color: var(--navy); } /* Muted WITHOUT opacity. `opacity: .55` on a row of text is a contrast * failure (axe measured 2.17:1 against white), and "not used" still has to be * readable — it is information about the file, not decoration. */ .sim-row.is-muted { background: #FAFBFC; } .sim-row.is-muted .l, .sim-row.is-muted .r { color: var(--midgray); font-style: italic; } /* ONE mapping at a time. `.on` is applied to exactly one row and removed * before the next is applied; `.final` is the held end state. */ .sim-row.on { background: #EAF4F4; border-color: var(--teal); } .sim-row.final { background: #F4F9F9; border-color: #CFE3E3; } .sim-sheet { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .sim-sheet-top { display: flex; justify-content: space-between; align-items: center; gap: 4px 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--lightgray); font-family: var(--font-mono); font-size: 12px; color: var(--charcoal); } /* The file is named in full, and the name is deliberately an ugly one, so at * 320px it is wider than the row it sits in. Wrapping costs one line and * keeps both the name and the synthetic-data label readable; truncating the * name would hide the very thing the stage is illustrating, and letting the * label shrink pushed it out of the card entirely. */ .sim-sheet-top > :first-child { min-width: 0; overflow-wrap: anywhere; } .sim-sheet-top > :last-child { flex: none; } /* The scroll box, and everything between it and the grid column, must be * allowed to be narrower than its content — one un-constrained ancestor is * enough to push the whole page wide at 360px. */ .sim-sheet, .sim-claims { min-width: 0; max-width: 100%; } .sim-sheet-scroll { overflow-x: auto; max-width: 100%; } /* A horizontally scrollable table has to be reachable without a mouse, so * both scroll boxes are focusable and named. axe asks for this and it is * right to: otherwise the right-hand columns are simply unreachable. */ .sim-sheet-scroll:focus-visible, .sim-claims-scroll:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* Content-sized columns, not a fixed track. A 72px track clipped * "$12,450.00" to "$12,450.0" and "05/02/2024" to "05/02/202", which reads as * a broken renderer rather than as a narrow column — and the whole point of * this panel is that the ORIGINAL values stay visible. The row scrolls * inside its own box instead. */ .sim-cells { display: grid; grid-template-columns: repeat(7, max-content); } .sim-cells .c { padding: 8px 9px; border-bottom: 1px solid var(--lightgray); border-right: 1px solid var(--lightgray); font-family: var(--font-mono); font-size: 12px; color: var(--charcoal); white-space: nowrap; transition: background .3s ease, box-shadow .3s ease; } /* No border on the last cell of a row: with content-sized columns the grid is * narrower than its box, and the trailing border reads as an empty column. */ .sim-cells .c:nth-child(7n) { border-right: 0; } .sim-claimgrid .c:nth-child(6n) { border-right: 0; } .sim-cells .c.h { background: #FBFDFE; color: var(--midgray); font-size: 11.5px; } .sim-cells .c.on { background: #EAF4F4; box-shadow: inset 0 0 0 2px var(--teal); } .sim-cells .c.final { background: #F4F9F9; } /* --------------------------------------------------------- 3. validation */ .sim-claims { position: relative; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .sim-claims-top { padding: 9px 12px; background: var(--lightgray); font-family: var(--font-mono); font-size: 12px; color: var(--charcoal); } .sim-claims-scroll { overflow-x: auto; max-width: 100%; } .sim-claimgrid { display: grid; grid-template-columns: repeat(6, max-content); } .sim-claimgrid .c { padding: 10px 9px; border-bottom: 1px solid var(--lightgray); border-right: 1px solid var(--lightgray); font-family: var(--font-mono); font-size: 12.5px; color: var(--charcoal); white-space: nowrap; transition: background .35s ease, box-shadow .35s ease; } .sim-claimgrid .c.h { background: #FBFDFE; color: var(--midgray); font-size: 11.5px; } /* Table colouring and the category boxes share these two colours exactly, so * the eye can connect a highlighted row to the box that explains it. */ .sim-claimgrid .c.look-a { background: #FDF6EA; box-shadow: inset 0 0 0 2px #E3C48A; } .sim-claimgrid .c.fail-a { background: #FDF6EA; box-shadow: inset 0 0 0 2px var(--amber); } .sim-claimgrid .c.look-b { background: #FBEDEB; box-shadow: inset 0 0 0 2px #E09A92; } .sim-claimgrid .c.fail-b { background: #FBEDEB; box-shadow: inset 0 0 0 2px var(--error); } /* The scan runs ONCE per cycle and must end invisible — a scan line parked * across the table at rest reads as a rendering fault. */ .sim-scan { position: absolute; left: 0; right: 0; top: 74px; height: 3px; background: linear-gradient(90deg, transparent, var(--teal), var(--teal-dark), transparent); opacity: 0; pointer-events: none; } .sim-scan.run { animation: sim-scan 1.6s ease-in-out forwards; } @keyframes sim-scan { 0% { opacity: .9; transform: translateY(0); } 60% { opacity: .85; } 100% { opacity: 0; transform: translateY(190px); } } .sim-summary { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 16px; } .sim-summary-t { font-weight: 600; color: var(--navy); font-size: 17px; visibility: hidden; opacity: 0; transition: opacity .4s ease; } .sim-summary-t.on { visibility: visible; opacity: 1; } .sim-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .sim-cat { border-radius: 8px; padding: 12px 14px; border-left: 3px solid; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; } .sim-cat.on { visibility: visible; opacity: 1; transform: none; } .sim-cat .sim-tag { font-weight: 600; font-size: 14px; } /* The definition line is deliberately NOT bold: the title is the label and * the line under it is the explanation. */ .sim-cat .txt { font-weight: 400; font-size: 14px; color: var(--charcoal); margin-top: 3px; } .sim-cat.a { background: #FDF6EA; border-color: var(--amber); } .sim-cat.a .sim-tag { color: #8A5500; } .sim-cat.b { background: #FBEDEB; border-color: var(--error); } .sim-cat.b .sim-tag { color: var(--error); } .sim-checks { display: grid; gap: 14px; } /* Resting, being checked, and settled — distinguished by border and tint * rather than by opacity, for the same contrast reason as the muted rows. */ /* NOT YET FOUND, so not yet shown. The first version dimmed these with * opacity, which failed contrast; the second removed the dimming and left * both explanations legible from the moment the stage opened — giving away * the answer before the scan had run. `visibility: hidden` is the right tool: * the space stays reserved so nothing jumps, and axe skips hidden text * instead of measuring it. */ .sim-check { border: 1px solid var(--border); border-left: 3px solid var(--lightgray); border-radius: 8px; padding: 16px 18px; background: #fff; visibility: hidden; opacity: 0; transition: opacity .45s ease, border-color .4s ease, background .4s ease; } .sim-check.on, .sim-check.done { visibility: visible; opacity: 1; } .sim-check.on { border-left-color: var(--teal); box-shadow: 0 2px 10px rgba(18,33,47,.07); } .sim-check .ct { font-weight: 600; margin-bottom: 8px; } .sim-check .eq { font-family: var(--font-mono); font-size: 14px; color: var(--charcoal); } .sim-check .res { margin-top: 8px; font-weight: 600; font-size: 14px; } .sim-check.a.done { background: #FDF6EA; border-color: var(--amber); } .sim-check.a .ct, .sim-check.a.done .res { color: #8A5500; } .sim-check.b.done { background: #FBEDEB; border-color: var(--error); } .sim-check.b .ct, .sim-check.b.done .res { color: var(--error); } /* ----------------------------------------------------------- 4. analysis */ .sim-flow { display: grid; gap: 0; } /* Same again: the four narrative steps are readable at every point in the * sequence. Which one is CURRENT is carried by the border and tint, which is * also the only part a screen reader would miss — so the text never depends * on it. */ .sim-flow-item { border: 1px solid var(--border); border-left: 3px solid var(--lightgray); border-radius: 8px; padding: 14px 16px; background: #fff; transition: border-color .45s ease, background .45s ease; } .sim-flow-item.on { border-color: var(--teal); border-left-color: var(--teal); background: #F4F9F9; } .sim-flow-item.done { border-left-color: #A9CFCF; } .sim-flow-item .kick { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-dark); } .sim-flow-item .ft { font-weight: 600; color: var(--navy); margin-top: 3px; } .sim-arrow { text-align: center; color: var(--border); font-size: 18px; line-height: 1.4; } .sim-chart { width: 100%; height: auto; display: block; } .sim-chart .axis { stroke: var(--midgray); stroke-width: 1; } .sim-chart .grid { stroke: var(--lightgray); stroke-width: 1; } .sim-chart .tick { font-family: var(--font-mono); font-size: 16px; fill: var(--midgray); } .sim-chart .axis-l { font-size: 15px; fill: var(--midgray); } .sim-chart .curve { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; } .sim-chart .curve.prior { stroke: var(--teal); } .sim-chart .curve.like { stroke: #1D5B87; } .sim-chart .curve.post { stroke: var(--navy); stroke-width: 4.5; } /* Each curve has its own entrance, and the entrances say something. The prior * is simply drawn. The evidence SETTLES into place from the right, because it * arrives and resolves. The result SHIFTS from the prior's side toward the * evidence, because that is what updating on evidence looks like. * * These are explanatory, not a rendering of the arithmetic: no parameter, * benchmark or method detail is on display, and the motion is chosen to * be readable rather than to be a literal animation of a calculation. */ .sim-chart .curve.draw { opacity: 1; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: sim-draw 1.6s ease forwards; } @keyframes sim-draw { to { stroke-dashoffset: 0; } } .sim-chart .curve.settle { opacity: 1; animation: sim-settle 1.8s ease both; transform-origin: center; } @keyframes sim-settle { 0% { transform: translateX(42px) scaleX(1.10); opacity: .15; } 55% { opacity: .85; } 100% { transform: translateX(0) scaleX(1); opacity: 1; } } .sim-chart .curve.shift { opacity: 1; animation: sim-shift 2.1s cubic-bezier(.2,.75,.25,1) both; transform-origin: center; } @keyframes sim-shift { 0% { transform: translateX(-50px) scaleX(1.14); opacity: .2; } 60% { opacity: .9; } 100% { transform: translateX(0) scaleX(1); opacity: 1; } } /* Prior and likelihood stay VISIBLE after the result is drawn, at .45, so the * closing frame still shows what the estimate was built from. `!important` * because it has to beat the entrance animation's own `opacity: 1`, which is * still applied to the same element. */ .sim-chart .curve.dim { opacity: .45 !important; } /* Dimming collapses the teal and the blue into two near-identical pale * strokes, and colour was the only thing telling them apart. The prior is * dashed so the distinction survives being dimmed -- and survives being * printed, or being read by someone who cannot separate the two hues. */ .sim-chart .curve.prior { stroke-dasharray: 7 5; } .sim-chart .c-label { opacity: 0; transition: opacity .35s ease; font-size: 16px; font-weight: 600; } .sim-chart .c-label.on { opacity: 1; } .sim-chart .c-label.prior { fill: var(--teal-dark); } .sim-chart .c-label.like { fill: #1D5B87; } .sim-chart .c-label.post { fill: var(--navy); } /* Credible-interval boundaries: vertical DOTTED lines, 95 outermost. They * belong to the result distribution, never to the prior or the evidence on * its own, which is why they are drawn last and anchored on its centre. */ .sim-chart .ci { opacity: 0; transition: opacity .5s ease; } .sim-chart .ci.on { opacity: 1; } .sim-chart .bound { stroke-dasharray: 2 4; stroke-width: 1.6; fill: none; } .sim-chart .bound.i95 { stroke: #9FB6C6; } .sim-chart .bound.i90 { stroke: #6E90A8; } .sim-chart .bound.i80 { stroke: #3F6C8C; } .sim-chart .ci-t { font-family: var(--font-mono); font-size: 14px; } .sim-chart .ci-t.i95 { fill: #7C97AA; } .sim-chart .ci-t.i90 { fill: #5B7E96; } .sim-chart .ci-t.i80 { fill: #3F6C8C; } .sim-chart .centre { stroke: var(--navy); stroke-width: 1.6; stroke-dasharray: 5 4; } .sim-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); opacity: 0; transition: opacity .5s ease; } .sim-result.on { opacity: 1; } .sim-result .ml { font-size: 13px; color: var(--midgray); } .sim-result .mv { font-family: var(--font-mono); font-size: 18px; color: var(--navy); margin-top: 2px; } /* --------------------------------------------------- 5. review & report */ .sim-review { display: grid; gap: 14px; } .sim-review-item { border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; } .sim-review-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .sim-review-t { font-weight: 600; color: var(--navy); } .sim-review-v { font-family: var(--font-mono); font-size: 17px; color: var(--navy); } .sim-review-s { font-size: 14px; color: var(--charcoal); margin-top: 6px; } .sim-findings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .sim-finding { border-radius: 8px; padding: 10px 12px; border-left: 3px solid; } .sim-finding .sim-tag { font-weight: 600; font-size: 13px; } .sim-finding .txt { font-size: 13px; color: var(--charcoal); margin-top: 2px; } .sim-finding.a { background: #FDF6EA; border-color: var(--amber); } .sim-finding.a .sim-tag { color: #8A5500; } .sim-finding.b { background: #FBEDEB; border-color: var(--error); } .sim-finding.b .sim-tag { color: var(--error); } .sim-prov { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .sim-prov .ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #E4F6F3; color: var(--teal-dark); font-weight: 700; font-size: 14px; } .sim-prov .pt { font-weight: 600; color: var(--navy); } .sim-prov .px { font-size: 14px; color: var(--charcoal); margin-top: 3px; } .sim-pages { position: relative; min-height: 292px; margin-bottom: 18px; padding-right: 6%; } .sim-page { position: absolute; top: 0; left: 0; width: 78%; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; box-shadow: 0 8px 22px rgba(18,33,47,.12); } /* The backing pages have to SHOW. At 76% behind an 82% front page they were * covered entirely (b2 by 0px, b1 by a 30px blank strip), so a stack of three * deliverables rendered as one document and two white rectangles. They are now * the same width as the front page and fanned far enough that each title is * legible. */ /* FANNED FAR ENOUGH THAT EACH TITLE IS LEGIBLE -- which the previous values * were not. `translate()` percentages resolve against the element's OWN * width, so `13%` on a page at `width: 78%` moved it 10% of the container: * 15% of one backing title was visible and 4% of the other. Stage 5's * concept is a work product "and supporting outputs", and two of the three * outputs were blank white rectangles. No test covers this -- the reflow * check exempts absolutely-positioned elements, which these are. */ /* One page behind the front one, not two. A third page could only ever be a * sliver -- with the front page 70% wide there is 30% of the container free, * and two backing pages sharing it left the second showing 4% of its title. * A blank white rectangle is not a "supporting output"; the export cards * below say what the outputs are. */ .sim-page.b1 { transform: rotate(4deg) translate(36%, 7%); z-index: 2; } .sim-page.front { position: relative; z-index: 3; width: 70%; } .sim-page .lg { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--teal-dark); } .sim-page .mt { font-size: 11.5px; color: var(--midgray); margin-top: 6px; } .sim-page .ti { font-weight: 600; color: var(--navy); margin-top: 8px; font-size: 15px; } .sim-page .mr { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--charcoal); margin-top: 8px; } .sim-page .mr strong { font-family: var(--font-mono); color: var(--navy); } .sim-page .ln { height: 6px; background: var(--lightgray); border-radius: 3px; margin-top: 6px; } .sim-page .ln.w90 { width: 90%; } .sim-page .ln.w80 { width: 80%; } .sim-page .ln.w65 { width: 65%; } .sim-runid { font-family: var(--font-mono); font-size: 11px; color: var(--midgray); margin-top: 12px; } .sim-export { display: grid; gap: 12px; } .sim-export-t { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--midgray); } .sim-export-card { border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; } .sim-export-card .nm { font-weight: 600; color: var(--navy); } .sim-export-card .ds { font-size: 14px; color: var(--charcoal); margin-top: 3px; } .sim-pills { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; } .sim-pill { font-family: var(--font-mono); font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--teal-dark); color: var(--teal-dark); background: #EAF4F4; } /* The machine-readable record is NOT a download button, so it does not get * the same pill treatment as an artifact a customer can click. */ /* 4.41:1 against the light background was a hair under the bar; --charcoal * carries the same "this is not a button" meaning and passes. */ .sim-pill.record { border-color: var(--midgray); color: var(--charcoal); background: var(--lightgray); } /* --------------------------------------------------------- narrow widths */ @media (max-width: 900px) { .sim-rail { grid-template-columns: 1fr; gap: 2px; } .sim-step { border-top: 0; border-left: 3px solid var(--border); padding: 8px 10px; } .sim-step[aria-current="step"] { border-left-color: var(--teal); } .sim-grid { grid-template-columns: 1fr; } .sim-cats, .sim-findings, .sim-result { grid-template-columns: 1fr; } .sim-stage { padding: 18px 14px; } .sim-card { padding: 16px 14px; } } /* The chart is ~250px wide on a phone, so viewBox text at 14 units renders * around 5px. Everything in it scales up at narrow widths; the stage carrying * the headline number has to be readable on the device most people will open * the page on. */ @media (max-width: 900px) { /* 900px is ALSO where the grid collapses to one column, so the figure * gets WIDER here, not narrower -- it goes from ~380px to ~790px. Scaling * the type 2.4x at this breakpoint enlarged it exactly where the canvas * stopped being small, and thirteen pairs of labels collided. These are * modest; the narrow case is handled below by removing labels, which is * the only thing that works on a 212px canvas. */ .sim-chart .tick { font-size: 20px; } .sim-chart .c-label { font-size: 22px; } .sim-chart .ci-t { font-size: 18px; } /* The axis title sits 21 units under the tick row, and at any size large * enough to read they touch. It is the most expendable label on the * chart: the card is headed "Bayesian reserve estimate" and the ticks are * dollar amounts. */ .sim-chart .axis-l { display: none; } } /* #8 — "Development pattern" over two lines put "6" opposite line one and * "periods" opposite line two, reading as two fields. Stack instead. */ @media (max-width: 620px) { /* THERE IS NO FONT SIZE THAT IS BOTH LEGIBLE AND NON-COLLIDING on a 212px * canvas -- the chart simply has more labels than a phone has room for. * So the labels go, not the type, and nothing goes that is not said in * words directly underneath: the result card prints the estimate and both * intervals, the card heading names the chart, and the carries the * whole picture for assistive technology. The result curve keeps its label, * because which curve is the answer is the one thing the picture has to * say on its own. */ .sim-chart .ci-t, .sim-chart .axis-l, .sim-chart .tick.t-alt, .sim-chart .c-label.prior, .sim-chart .c-label.like { display: none; } .sim-chart .tick { font-size: 34px; } .sim-chart .c-label { font-size: 36px; } } @media (max-width: 560px) { .sim-review-head { display: block; } .sim-review-v { margin-top: 4px; } } @media (max-width: 400px) { .sim-card h3 { font-size: 19px; } .sim-page.front { width: 92%; } .sim-page { width: 84%; } } /* ------------------------------------------------------------ without JS */ /* * The controller is what reveals staged content and what makes the rail and * the Back/Next buttons do anything. With scripting off the visitor was * getting a dead rail, an empty "Reading the file" card, an invisible file * card and a Next button that looked live. `