/* ---- styles/tokens.css ---- */ /* The Midterm Machine, proposed: tokens, the only place a value is written (see README.md in this folder) * * Three tiers, as Primer and Atlassian build theirs: * 1. primitives --mm-gray-*, --mm-c-*: raw values. Only this file may use them (the lint fails on one elsewhere). * 2. semantic what a value is for: surfaces (--mm-bg-*), ink (--mm-fg-*), borders, state layers, the * colours with meaning, type roles, space, motion. Components read these. * 3. component what one component needs and the roles don't say: a pane's header, a list row, a pill. * Names put the thing first and the state last: --mm-bg-raised, --mm-fg-muted, --mm-pill-h-sm, --mm-tint-hover. */ .midterm-machine { /* ===== 1. primitives ===== */ /* grays: TILT's dark (src/looks/proposed.css: the paper #111, raised #1a1a1a, sunk #0a0a0a; its inks) */ --mm-gray-0: #0a0a0a; --mm-gray-1: #111111; --mm-gray-2: #1a1a1a; --mm-gray-3: #242424; --mm-gray-9: #a3a3a3; --mm-gray-10: #d4d4d4; --mm-gray-12: #ffffff; --mm-gray-ink: #111111; /* hues: TILT's brand green as a ramp, 50 to 950, built in OKLCH at its hue (17 Oct), #00ff57 the 500, for the brand * palette (data-palette="brand") */ --mm-c-green-50: #ebffeb; --mm-c-green-100: #dbffdc; --mm-c-green-200: #c3ffc6; --mm-c-green-300: #a1ffa8; --mm-c-green-400: #73ff85; --mm-c-green-500: #00ff57; --mm-c-green-600: #00d547; --mm-c-green-700: #00a937; --mm-c-green-800: #007f27; --mm-c-green-900: #005818; --mm-c-green-950: #00390d; /* the four colours of the case (20 Oct), one system in OKLCH: each 500 sits where sRGB holds the most chroma for its * hue, and the pairs are matched in lightness, so neither of a pair outweighs the other: the parties, blue and red, at * L 0.63; the market's moves, teal and orange, at L 0.745. Each ramp runs to white and to black from its 500 on one * ladder (lighter steps turn a few degrees warmer, as light does), at 98% of the gamut's chroma so no step flattens. * Hues 262 / 25 / 60 / 178: red and orange 35 degrees apart, so a party's dot reads on a move's fill, also for * red-green colour-blind readers (OK dE 0.11 deutan). Contrast on the pane: every 500 4.9:1 or more, every 400 7.6:1 */ --mm-c-blue-50: #f2f7ff; --mm-c-blue-100: #e0ecff; --mm-c-blue-200: #c3dafe; --mm-c-blue-300: #a1c5fe; --mm-c-blue-400: #75a7fd; --mm-c-blue-500: #4080fd; /* L 0.625, C 0.198, h 262 */ --mm-c-blue-600: #0c5ffc; --mm-c-blue-700: #044cd2; --mm-c-blue-800: #023ba7; --mm-c-blue-900: #012a7d; --mm-c-blue-950: #001a57; --mm-c-red-50: #fff4f2; --mm-c-red-100: #ffe5df; --mm-c-red-200: #feccc2; --mm-c-red-300: #feada0; --mm-c-red-400: #fe7e71; --mm-c-red-500: #fd1f33; /* L 0.635, C 0.245, h 25 */ --mm-c-red-600: #d70d26; --mm-c-red-700: #b1091d; --mm-c-red-800: #8b0515; --mm-c-red-900: #68030d; --mm-c-red-950: #460106; --mm-c-orange-50: #fff5eb; --mm-c-orange-100: #ffecd9; --mm-c-orange-200: #fedcbb; --mm-c-orange-300: #fec997; --mm-c-orange-400: #feae64; --mm-c-orange-500: #f98e11; /* L 0.745, C 0.171, h 60 */ --mm-c-orange-600: #ce740c; --mm-c-orange-700: #a45c07; --mm-c-orange-800: #7d4404; --mm-c-orange-900: #582e02; --mm-c-orange-950: #351a01; --mm-c-teal-50: #e4fef4; --mm-c-teal-100: #c7fdeb; --mm-c-teal-200: #7dfedc; --mm-c-teal-300: #1df6ce; --mm-c-teal-400: #1ae1bf; --mm-c-teal-500: #16c7ac; /* L 0.745, C 0.134, h 178 */ --mm-c-teal-600: #10a58e; --mm-c-teal-700: #0a8371; --mm-c-teal-800: #066355; --mm-c-teal-900: #03453a; --mm-c-teal-950: #012922; --mm-c-violet-500: #a48cf0; --mm-c-yellow-300: #ffe14d; /* TILT's marker */ /* ===== 2. semantic ===== */ /* surfaces: four levels, lighter as they rise (shadows only on what floats) */ --mm-bg-window: var(--mm-gray-0); /* round the panes */ --mm-bg-pane: var(--mm-gray-1); /* a pane: TILT's paper */ --mm-bg-raised: var(--mm-gray-2); /* inside a pane: a bill opened, the settings block, a sheet's blocks */ --mm-bg-overlay: var(--mm-gray-3); /* what floats: a menu, a tip, the dialog */ /* tints: a control's own ground, see-through so it sits on any surface */ --mm-tint: rgba(255, 255, 255, 0.08); --mm-tint-hover: rgba(255, 255, 255, 0.12); --mm-tint-press: rgba(255, 255, 255, 0.18); /* state layers: laid over a row */ --mm-state-hover: rgba(255, 255, 255, 0.05); --mm-state-selected: rgba(255, 255, 255, 0.08); --mm-state-pressed: rgba(255, 255, 255, 0.12); /* ink: TILT's three (primary, secondary, tertiary); each holds 4.5:1 on every surface */ --mm-fg: var(--mm-gray-12); --mm-fg-muted: var(--mm-gray-10); --mm-fg-subtle: var(--mm-gray-9); --mm-fg-on-light: var(--mm-gray-ink); /* on white (the chosen segment, a step's number, the solid button) and on the marker */ /* lines: TILT's three borders */ --mm-border-subtle: rgba(255, 255, 255, 0.08); --mm-border: rgba(255, 255, 255, 0.15); --mm-border-strong: rgba(255, 255, 255, 0.3); --mm-bg-track: rgba(255, 255, 255, 0.08); /* the empty part of a bar or a meter */ /* colour with meaning, and only that */ --mm-dem: var(--mm-c-blue-500); /* a party: odds, votes, the map's races */ --mm-rep: var(--mm-c-red-500); --mm-ind: var(--mm-c-violet-500); --mm-dem-ink: var(--mm-c-blue-300); /* a party's words on its wash (a race's tag) */ --mm-rep-ink: var(--mm-c-red-300); --mm-dem-wash: color-mix(in oklch, var(--mm-dem) 18%, transparent); --mm-rep-wash: color-mix(in oklch, var(--mm-rep) 18%, transparent); --mm-up: var(--mm-c-teal-500); /* ahead of the market: teal (20 Oct; TILT's green until then), 8.8:1; always with its sign */ --mm-down-overlay: var(--mm-c-orange-500); /* behind the market on the overlay surface (6.6:1) */ --mm-down: var(--mm-c-orange-500); /* behind it: orange, 8.0:1; always with its sign. Not red, which is the Republicans' (20 Oct) */ --mm-up-bar: color-mix(in oklch, var(--mm-up) 50%, transparent); /* a ranking's bar: the direction at half strength, under the figure */ --mm-down-bar: color-mix(in oklch, var(--mm-down) 50%, transparent); --mm-pick: var(--mm-fg); /* the reader's own pick and calls, focus: white (19 Oct; it was TILT's marker yellow) */ /* the chance chip: white, filled as far as its chance; an outcome's in its party's colour */ --mm-chance: rgba(255, 255, 255, 0.24); --mm-chance-empty: rgba(255, 255, 255, 0.07); --mm-chance-dem: color-mix(in oklch, var(--mm-dem) 60%, transparent); --mm-chance-dem-empty: color-mix(in oklch, var(--mm-dem) 14%, transparent); --mm-chance-rep: color-mix(in oklch, var(--mm-rep) 60%, transparent); --mm-chance-rep-empty: color-mix(in oklch, var(--mm-rep) 14%, transparent); --mm-chance-ind: rgba(164, 140, 240, 0.6); --mm-chance-ind-empty: rgba(164, 140, 240, 0.14); /* the screens' colours, as r g b for the scripts (ui.js inkFromStyles): parties, an even race, no race, up, down, flat */ --mm-map-dem: 64 128 253; /* blue 500 */ --mm-map-rep: 253 31 51; /* red 500 */ --mm-map-even: 92 92 92; /* a toss-up: a dark neutral, so a lean is a darker red or blue, not a light one */ --mm-map-none: 34 34 34; --mm-map-gain: 22 199 172; /* teal 500: the strongest fill is the figure's own colour, so a number reads as its tile */ --mm-map-loss: 249 142 17; /* orange 500 */ /* the fills mixed in OKLCH (ui.js, 20 Oct): the colour comes in early and its light a little ahead of it, keeping its * hue, so a middling move is a clear green or red rather than the dark grey-green of mixing the channels through grey. * The words on them take whichever ink reads better (views.js), so contrast holds however bright */ --mm-map-mix: oklch; --mm-map-chroma-curve: 0.35; --mm-map-light-curve: 0.6; --mm-map-flat: 40 40 40; --mm-map-tile-dark: 0 0 0; /* a treemap tile's words where they read better dark (black: 4.5:1 at the crossover, 19 Oct) */ --mm-map-tile-light: 255 255 255; /* and where they read better light */ --mm-map-head: 17 17 17; /* a sector's band over its tiles */ --mm-map-head-ink: 163 163 163; --mm-scrim: rgba(0, 0, 0, 0.78); --mm-shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.5); --mm-shadow-sheet: 0 16px 48px rgba(0, 0, 0, 0.6); /* votes: those for in their party's colour, a leaning or an estimate at half strength; those against in gray */ --mm-vote-against: rgba(255, 255, 255, 0.34); --mm-vote-lean: 0.45; /* faces and weights */ --mm-font: var(--font-tilt-geist-sans, "Public Sans"), "Helvetica Neue", Arial, sans-serif; --mm-mono: var(--font-tilt-geist-mono, "IBM Plex Mono"), ui-monospace, "SF Mono", Menlo, monospace; --mm-regular: 400; --mm-medium: 500; --mm-semibold: 600; /* the type ramp: six sizes, each with its line height on the 4px grid and its tracking. The panes use three (16, 14, 12); the case adds the three large ones (24, 32, 48). */ --mm-size-12: 12px; --mm-lead-12: 16px; --mm-track-12: 0.01em; --mm-size-14: 14px; --mm-lead-14: 20px; --mm-track-14: 0em; --mm-size-16: 16px; --mm-lead-16: 24px; --mm-track-16: -0.005em; --mm-size-24: 24px; --mm-lead-24: 32px; --mm-track-24: -0.015em; --mm-size-32: 32px; --mm-lead-32: 40px; --mm-track-32: -0.02em; --mm-size-48: 48px; --mm-lead-48: 56px; --mm-track-48: -0.03em; --mm-track-label: 0.04em; /* mono capitals */ --mm-track-none: 0em; /* measures */ --mm-measure-text: 64ch; --mm-measure-meta: 72ch; --mm-measure-answer: 30ch; /* space: 4 8 12 16 24 32 48 64. Inside a component 4 to 12; between a group's parts 16; between groups 24 to 32 */ --mm-space-0: 0px; --mm-space-1: 4px; --mm-space-2: 8px; --mm-space-3: 12px; --mm-space-4: 16px; --mm-space-6: 24px; --mm-space-8: 32px; --mm-space-12: 48px; --mm-space-16: 64px; /* corners */ --mm-line: 1px; --mm-line-strong: 2px; --mm-radius-chip: 2px; /* a chance chip in a row (tilt.now's box radius) */ --mm-radius: 4px; /* a row, a tag, a large chance chip */ --mm-radius-pane: 8px; /* a pane, a raised block, a sheet, the dialog (as Spotify) */ --mm-radius-control: 6px; /* a button, a field, a segmented control's track */ --mm-radius-round: 50%; /* motion (Spotify's curve) */ --mm-dur-fast: 120ms; /* a hover, a press */ --mm-dur-base: 200ms; /* a turn, a menu */ --mm-dur-slow: 320ms; /* a pane or a block arriving; the map recolouring */ --mm-dur-count: 480ms; /* a number counting to its new value (read by views.js) */ --mm-dur-flash: 1400ms; /* a block that changed, marked, then let go */ --mm-dur-pulse: 1600ms; /* a placeholder while the data loads */ --mm-ease: cubic-bezier(0.3, 0, 0, 1); /* Spotify's: quick out, long settle */ --mm-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* arriving */ --mm-ease-in: cubic-bezier(0.3, 0, 0.8, 0.15); /* leaving (read by motion.js) */ /* a panel (a sheet, the dialog, focus) moves on a spring with no bounce: quick, then a long soft settle, as the * system's own sheets do. A spring of 0.45s, bounce 0, as a curve (motion.js spring() makes the same at runtime, with * the finger's speed, for a sheet let go); its whole run, which reads as about half */ --mm-ease-spring: linear(0, 0.0259, 0.0847, 0.1696, 0.2545, 0.3399, 0.4219, 0.4982, 0.5676, 0.6238, 0.6793, 0.7279, 0.77, 0.8062, 0.8372, 0.8636, 0.886, 0.9049, 0.9208, 0.9354, 0.9464, 0.9555, 0.9632, 0.9696, 0.9748, 0.9792, 0.9829, 0.9859, 0.9884, 0.9904, 0.9921, 0.9935, 0.9947, 0.9956, 0.9964, 0.9971, 0.9975, 0.998, 0.9983, 0.9986, 0.9989, 1); --mm-dur-spring: 680ms; --mm-pop: 0.97; /* the dialog's scale as it arrives */ --mm-recede: 0.55; /* what goes under a panel recedes toward the window: its opacity there (the controls under a sheet) */ /* a press lets go on a short spring with a hint of bounce (0.3s, bounce 0.35): the control comes back past where it * was by a hair, and settles, so a press is felt */ --mm-ease-press: linear(0, 0.058, 0.1875, 0.3659, 0.531, 0.6811, 0.8069, 0.905, 0.9761, 1.0194, 1.0484, 1.0619, 1.0642, 1.0594, 1.0505, 1.0399, 1.0293, 1.0197, 1.0118, 1.0051, 1.0008, 0.9981, 0.9965, 0.9959, 0.9959, 0.9963, 0.9969, 0.9976, 0.9983, 0.9989, 0.9994, 1); --mm-dur-press: 520ms; --mm-rise: 6px; /* how far a thing travels as it arrives */ --mm-slide: 24px; /* how far a sheet travels in */ --mm-press: 0.97; /* a control, pressed */ --mm-flash: rgba(255, 255, 255, 0.08); /* faint white: what just changed */ --mm-quarter: 90deg; /* ===== 3. component ===== */ /* targets: what can be pressed is at least this tall (HIG: macOS 28 default and 20 at least, iOS 44 default and 28 at least). Desktop here; a phone's are set at the foot of this file. */ --mm-pill-h: 32px; /* a button, a segmented control, the bar's actions */ --mm-pill-h-sm: 28px; /* a segmented control a size down: in the panes, in a chart's head */ --mm-segment-pad: 2px; /* a segmented control's track, round its segments */ --mm-meter-w: 96px; /* a bill's chance, as a figure over its meter */ --mm-meter-h: 4px; --mm-mark-d: 20px; /* a step of a bill's path: its mark */ --mm-search-h: 40px; --mm-row-h: 40px; /* a list row: an outcome, a bill, a line that opens */ --mm-row-h-dense: 24px; /* a row in a ranking */ --mm-tag-h: 24px; /* a race's chip */ --mm-hit-pad: 0px; /* how far a tag's tap area reaches past it, above and below */ --mm-target-min: 24px; /* a link beside a title, a small disclosure */ /* a pane */ --mm-pane-gap: 8px; /* between the panes, and round them at the window's edge */ --mm-pane-pad: 16px; /* inside a pane, at its sides */ --mm-pane-header-h: 56px; /* a pane's head: its step and title, pinned while the pane scrolls */ --mm-step-n: 24px; /* a step's number */ /* the case's grid */ --mm-grid-cols: 12; --mm-grid-margin: 24px; --mm-grid-gutter: 8px; /* the frame */ --mm-bar: 56px; --mm-wins-w: 320px; /* 1 Who wins, as its own column (from 1181) */ --mm-passes-w: 360px; /* 2 What passes, as its own column (336 to 1440) */ --mm-controls-w: 336px; /* both, stacked in one column (to 1180) */ --mm-wins-max: 50%; /* 1 Who wins over 2, at most this much of the column */ --mm-case-x: calc(var(--mm-controls-w) + var(--mm-pane-gap) * 2); /* where the case's pane starts */ --mm-search-w: 400px; --mm-deck-end: 232px; /* the bar's actions and its edge: the deck, Tilt's promise, ends this far from the bar's end */ --mm-colophon-h: 80px; --mm-mark-w: 73px; /* Tilt's wordmark in the bar: tilt.now's masthead box (src/kit/icons.tsx) */ --mm-mark-h: 24px; /* parts */ --mm-check: 16px; /* a checkbox */ --mm-check-w: 16px; /* the pick's check */ --mm-rail: 8px; /* a bar's track: odds, votes, sectors; a dot; a key's box */ --mm-swatch-w: 16px; --mm-need: 2px; /* the votes-needed mark */ --mm-dem-soft: color-mix(in oklch, var(--mm-dem) 55%, var(--mm-bg-raised)); /* a party's colour at rest, on a raised block: the seats before an outcome is picked */ --mm-rep-soft: color-mix(in oklch, var(--mm-rep) 55%, var(--mm-bg-raised)); --mm-note-mark: 24px; /* a note's mark: the info symbol, its target 24 across */ --mm-readout-col: 240px; /* each of the main panel's three figures: equal columns, at most this wide */ --mm-colophon-panel-h: 80px; /* the small print at the main panel's foot (three columns): the room it keeps, three lines */ --mm-seat-chart-h: 72px; /* the Senate's seats, the chance of each count as a bar */ --mm-disclosure: 12px; /* the › at a row's end */ --mm-chip-w: 5ch; /* a chance chip, one width so fills compare down a column */ --mm-lead-w: 28ch; /* the S&P 500's note */ --mm-screen-min: 360px; --mm-screen-min-tape: 280px; /* the picture's least height with the stocks' tape under it: the map gives way, not the tape */ --mm-tape-label: 18ch; /* the stocks tape's label, in two lines (three columns, 1440 to 1759) */ --mm-row-h-tape: 24px; /* a line of the stocks tape */ --mm-tape-h: calc((var(--mm-row-h-tape) + var(--mm-space-1)) * 2); /* the tape's two lines, kept whatever it holds */ --mm-tape-cell: 14ch; /* a stock on the tape, at most: ticker and points */ --mm-rank-bar: 2px; /* a ranking's row, its underline drawn to its size */ --mm-screen-tall: calc(100dvh - var(--mm-bar) - var(--mm-space-12)); --mm-screen-phone: 400px; --mm-menu-max: 60vh; --mm-menu-min: 176px; --mm-col-name: 132px; /* a sector's name beside its bar */ --mm-col-value: 56px; /* a value at a row's end */ --mm-col-code: 48px; /* a ticker at a row's start */ --mm-col-label: 56px; /* For / Against */ --mm-col-count: 32px; /* a vote count */ --mm-col-bar: 72px; /* a legend's scale */ --mm-col-odds: 48px; /* a race's odds */ --mm-col-bar-sm: 48px; --mm-strip-min: 320px; /* a ranking, at least: they sit three across where there's room, then two, then one */ --mm-tip: 224px; --mm-dialog: 960px; --mm-method-nav: 208px; /* How it works: its contents */ --mm-ruled-dim: 0.45; /* a ruled bill's path and count, which no longer decide it */ --mm-fade-h: 32px; /* a pane's cut edge, faded while there is more below */ --mm-mask: #000; /* what a fade's mask keeps (any opaque colour) */ /* the two layouts to compare (layouts.css, 17 Oct) */ --mm-rail-w: 360px; /* two columns: the controls as one rail */ --mm-cards-w: 380px; /* three columns: 2 What passes, its bills as cards */ --mm-sheet-rail: 480px; /* a sheet over the rail */ --mm-measure-answer-band: 36ch; /* the result's sentence in the main panel's band */ --mm-map-value-up: var(--mm-up); /* a state's move written on the map */ --mm-map-value-down: var(--mm-down); --mm-map-aspect: 975 / 610; /* the map's own shape (its viewBox) */ --mm-map-ratio: 1.5984; /* the same, as one number (975 / 610), for a height from a width */ --mm-screen-extra: 96px; /* a picture's room beyond the map itself: its head above, its legend under */ --mm-sheet-phone: 640px; --mm-sheet-half: 56dvh; /* a phone's sheet, opened */ --mm-sheet-full: 92dvh; /* and pulled up, or scrolled */ --mm-grab-w: 36px; /* its grab handle */ --mm-grab-h: 4px; --mm-radius-sheet: 12px; --mm-toast: 560px; --mm-legend-lines: 3; /* the map, in its own units (it scales with its box) */ --mm-map-label: 10.5px; --mm-map-label-phone: 16px; /* the small states' codes, in the map's units, where the map is a phone's width */ --mm-map-label-ink-dark: rgb(var(--mm-map-tile-dark)); /* and dark, where dark reads better */ --mm-map-label-ink: #ffffff; /* a state's code on its fill, light where light reads better (dark where dark does: views.js paintMap); full white, so the darkest crossing holds 4.5:1 (20 Oct) */ --mm-map-halo: rgba(0, 0, 0, 0.5); --mm-map-halo-w: 2.5px; --mm-map-edge: 1px; --mm-map-edge-hover: 1px; /* a state pointed at: its outline inside its edge, on screen (non-scaling), whatever the map's size */ --mm-map-edge-pick: 1.5px; /* a state opened */ --mm-map-dot-edge: 1.6px; --mm-map-dot-pick: 2.6px; /* layers */ --mm-layer-under: -1; /* a control's own fill, under its label (a chosen segment, the outcome picked) */ --mm-layer-canvas: 1; --mm-layer-panel: 2; --mm-layer-search: 3; --mm-layer-tip: 5; --mm-layer-mini: 20; --mm-layer-bar: 25; --mm-layer-bar-search: 26; --mm-layer-sheet: 30; --mm-layer-toast: 40; --mm-layer-menu: 45; --mm-layer-skip: 50; /* where the frame starts and ends: 0 here; inside tilt.io, the top is the height of its own bar */ --mm-app-top: 0px; --mm-app-bottom: 0px; /* the pick's check, as a mask */ --mm-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* How it works, as a symbol on a phone: an i in a circle */ --mm-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 10V2M4.5 5.5 8 2l3.5 3.5M3 8.5V14h10V8.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Share, as a symbol in a phone's bar */ --mm-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M8 7v4.5' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.75' r='1' fill='black'/%3E%3C/svg%3E"); /* Tilt's mark, as a mask (src/kit/icons.tsx) */ --mm-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 382 128'%3E%3Cpath d='M139.595 0h33.843l-17.501 63.806h-33.843zM309.497 0h33.844L325.84 63.806h-33.844zM45.894 0h33.843l-17.5 63.806H28.392zM196.843 0h33.844l-17.502 63.806h-33.843zM136.499 63.806h33.844l-17.501 63.806h-33.844zM306.401 63.806h33.844l-17.501 63.806H288.9zM42.796 63.807H76.64l-17.501 63.806H25.295zM193.741 63.806h33.844l-17.501 63.806H176.24z'/%3E%3Cpath d='M183.532 100.265h90.723l-7.293 27.346H176.24z'/%3E%3Cpath fill-rule='evenodd' d='M373.658 27.723H263.976L271.58 0h109.682zM110.053 27.723H.371L7.975 0h109.682z'/%3E%3C/svg%3E"); /* The scripts' contract: the treemap reads the page's faces from these two (views.js, face()); the measures fold to rows at every width when this is 1 (views.js, folds()); the heads get their actions (app.js). */ --mm-fold-measures: 1; --mm-head-actions: 1; /* each step's reset in its head, and hiding the controls (app.js) */ --sans: var(--mm-font); --mono: var(--mm-mono); } /* reduced motion: nothing travels or counts; a change is still marked, without the fade */ @media (prefers-reduced-motion: reduce) { .midterm-machine { --mm-dur-fast: 0ms; --mm-dur-base: 0ms; --mm-dur-slow: 0ms; --mm-dur-count: 0ms; --mm-dur-pulse: 0ms; --mm-dur-spring: 0ms; --mm-dur-press: 0ms; --mm-rise: 0px; --mm-slide: 0px; --mm-press: 1; } } /* the type roles, each a font shorthand and a tracking, built from the ramp */ .midterm-machine { /* the case */ --mm-type-hero: var(--mm-semibold) var(--mm-size-48)/var(--mm-lead-48) var(--mm-mono); --mm-tr-hero: var(--mm-track-48); /* the one number: the S&P 500 */ --mm-type-display: var(--mm-semibold) var(--mm-size-32)/var(--mm-lead-32) var(--mm-font); --mm-tr-display: var(--mm-track-32); /* the answer, in a sentence */ --mm-type-figure: var(--mm-semibold) var(--mm-size-24)/var(--mm-lead-24) var(--mm-mono); --mm-tr-figure: var(--mm-track-24); /* a number a block is about */ --mm-type-section: var(--mm-semibold) var(--mm-size-24)/var(--mm-lead-24) var(--mm-font); --mm-tr-section: var(--mm-track-24); /* a sheet's name, the dialog's title */ --mm-type-deck: var(--mm-regular) var(--mm-size-16)/var(--mm-lead-16) var(--mm-font); --mm-tr-deck: var(--mm-track-16); /* what the answer means */ /* the panes */ --mm-type-pane-title: var(--mm-semibold) var(--mm-size-16)/var(--mm-lead-16) var(--mm-font); --mm-tr-pane-title: var(--mm-track-16); /* a pane's head, a chart's title */ --mm-type-row: var(--mm-medium) var(--mm-size-14)/var(--mm-lead-14) var(--mm-font); --mm-tr-row: var(--mm-track-14); /* a row's name */ --mm-type-text: var(--mm-regular) var(--mm-size-14)/var(--mm-lead-14) var(--mm-font); --mm-tr-text: var(--mm-track-14); /* a sentence */ --mm-type-control: var(--mm-medium) var(--mm-size-14)/var(--mm-lead-14) var(--mm-font); --mm-tr-control: var(--mm-track-14); /* a button, a pill */ --mm-type-control-sm: var(--mm-medium) var(--mm-size-12)/var(--mm-lead-12) var(--mm-font); --mm-tr-control-sm: var(--mm-track-12); --mm-type-number: var(--mm-semibold) var(--mm-size-14)/var(--mm-lead-14) var(--mm-mono); --mm-tr-number: var(--mm-track-none); /* a number in a row */ --mm-type-meta: var(--mm-regular) var(--mm-size-12)/var(--mm-lead-12) var(--mm-font); --mm-tr-meta: var(--mm-track-12); /* how, where from */ --mm-type-label: var(--mm-medium) var(--mm-size-12)/var(--mm-lead-12) var(--mm-mono); --mm-tr-label: var(--mm-track-label); /* what a column or a group is, in capitals */ --mm-type-small: var(--mm-regular) var(--mm-size-12)/var(--mm-lead-12) var(--mm-mono); --mm-tr-small: var(--mm-track-none); /* a number in a legend, a chip */ --mm-type-map: var(--mm-medium) var(--mm-map-label) var(--mm-mono); --mm-type-map-value: var(--mm-semibold) var(--mm-map-label) var(--mm-mono); } /* the move colours, as alternatives (19-20 Oct): teal and orange are the default, so red means only the Republicans. A * hidden setting (?palette= in the lab, data-palette on the root) draws the same page in another pair. Parties keep blue * and red (the American convention); only ahead and behind the market change. Each is checked: the figures 4.5:1 or * more on the pane and the overlay, the words on a fill 4.5:1 across the scale */ .midterm-machine[data-palette="brand"] { /* TILT's brand pair, green and red (the default until 20 Oct): red is the Republicans' too, so the Senate's leaders * are left off the stocks lens (components.css) */ --mm-up: var(--mm-c-green-500); --mm-down: var(--mm-c-red-500); --mm-down-overlay: var(--mm-c-red-400); --mm-map-gain: 0 213 71; /* green 600 */ --mm-map-loss: 253 31 51; /* red 500 */ } .midterm-machine[data-palette="orange"] { /* TILT's green kept, with orange behind */ --mm-up: var(--mm-c-green-500); --mm-map-gain: 0 213 71; /* green 600 */ } /* the controls hidden: the case has the window */ .midterm-machine[data-focus] { --mm-case-x: var(--mm-pane-gap); } /* three columns from 1181: the case starts after both */ @media (min-width: 1181px) { .midterm-machine { --mm-case-x: calc(var(--mm-wins-w) + var(--mm-passes-w) + var(--mm-pane-gap) * 3); } } /* the frame narrows with the window */ @media (max-width: 1440px) { .midterm-machine { --mm-passes-w: 336px; } } @media (max-width: 1180px) { .midterm-machine { --mm-search-w: 280px; } } /* a short laptop screen (768 tall): the picture gives way so the panel holds the band, the toolbar, map and legend */ @media (min-width: 701px) and (max-height: 820px) { .midterm-machine { --mm-screen-min: 280px; } } @media (max-width: 900px) { .midterm-machine { --mm-controls-w: 304px; --mm-grid-margin: 16px; } } /* a phone: iOS's targets, 44 tall; a tag shows 32 and is pressed across 44, its row's pitch */ @media (max-width: 700px) { .midterm-machine { --mm-pill-h: 44px; --mm-pill-h-sm: 44px; --mm-row-h: 44px; --mm-row-h-dense: 44px; --mm-tag-h: 32px; --mm-hit-pad: 6px; --mm-target-min: 44px; --mm-grid-margin: 16px; --mm-mark-w: 48px; --mm-mark-h: 16px; } } /* the fade at a scrolling pane's foot is a registered length, so the scroll can animate it away at the end */ @property --mm-cut { syntax: ""; inherits: false; initial-value: 0px; } /* ---- styles/roles.css ---- */ /* The Midterm Machine, proposed: the type roles (see README.md in this folder) * * Six sizes, fourteen roles, each mapped here onto Tilt's markup and nowhere else. The panes use * pane-title (16), row and text (14), and meta, label and small (12). The case adds hero (48), display * (32), figure and section (24) and deck (16). Weight 600 only for titles and figures; the words a * sentence leads with are 500, in ink. */ /* As classes, for markup of our own and for Tilt to adopt. */ .midterm-machine .mm-hero { font: var(--mm-type-hero); letter-spacing: var(--mm-tr-hero); font-variant-numeric: tabular-nums; } .midterm-machine .mm-display { font: var(--mm-type-display); letter-spacing: var(--mm-tr-display); text-wrap: balance; } .midterm-machine .mm-figure { font: var(--mm-type-figure); letter-spacing: var(--mm-tr-figure); font-variant-numeric: tabular-nums; } .midterm-machine .mm-section { font: var(--mm-type-section); letter-spacing: var(--mm-tr-section); text-wrap: balance; } .midterm-machine .mm-deck { font: var(--mm-type-deck); letter-spacing: var(--mm-tr-deck); text-wrap: pretty; } .midterm-machine .mm-pane-title { font: var(--mm-type-pane-title); letter-spacing: var(--mm-tr-pane-title); } .midterm-machine .mm-row { font: var(--mm-type-row); letter-spacing: var(--mm-tr-row); } .midterm-machine .mm-text { font: var(--mm-type-text); letter-spacing: var(--mm-tr-text); text-wrap: pretty; } .midterm-machine .mm-meta { font: var(--mm-type-meta); letter-spacing: var(--mm-tr-meta); text-wrap: pretty; } .midterm-machine .mm-label { font: var(--mm-type-label); letter-spacing: var(--mm-tr-label); text-transform: uppercase; } .midterm-machine .mm-number { font: var(--mm-type-number); letter-spacing: var(--mm-tr-number); font-variant-numeric: tabular-nums; } .midterm-machine .mm-small { font: var(--mm-type-small); letter-spacing: var(--mm-tr-small); font-variant-numeric: tabular-nums; } /* The page's base: text. */ .midterm-machine { font: var(--mm-type-text); letter-spacing: var(--mm-tr-text); color: var(--mm-fg); } .midterm-machine h1, .midterm-machine h2, .midterm-machine h3, .midterm-machine h4, .midterm-machine h5 { text-wrap: balance; } .midterm-machine p, .midterm-machine li, .midterm-machine summary { text-wrap: pretty; } /* ---------- the case ---------- */ /* hero: the one number on the screen that matters most, what the S&P 500 does */ /* the S&P 500 is one of the result's three figures (18 Oct): the sentence leads, the figures are its evidence */ .midterm-machine .readout.lead .readout-value { font: var(--mm-type-figure); letter-spacing: var(--mm-tr-figure); font-variant-numeric: tabular-nums; } /* display: the answer, in a sentence */ .midterm-machine .answer { font: var(--mm-type-display); letter-spacing: var(--mm-tr-display); } /* figure: a number a block is about (a mover, a bill opened) */ .midterm-machine .readout-value, .midterm-machine .mover-value, .midterm-machine .m-figure b { font: var(--mm-type-figure); letter-spacing: var(--mm-tr-figure); font-variant-numeric: tabular-nums; } /* section: a state or a person opened, the dialog's title */ .midterm-machine dialog h2, .midterm-machine .sheet h3, .midterm-machine .person h3 { font: var(--mm-type-section); letter-spacing: var(--mm-tr-section); } /* deck: what the answer means */ .midterm-machine .machine-note { font: var(--mm-type-deck); letter-spacing: var(--mm-tr-deck); } /* ---------- the panes ---------- */ /* pane-title: a pane's head (1 Who wins, 2 What passes, 3 What it does), a chart's title, a block's title */ .midterm-machine .step h2, .midterm-machine .machine-head h2, .midterm-machine .screen-title, .midterm-machine .sheet-block h4, .midterm-machine dialog h3 { font: var(--mm-type-pane-title); letter-spacing: var(--mm-tr-pane-title); } /* row: an item's name in a list */ .midterm-machine .world-name, .midterm-machine .measure h4, .midterm-machine .end h5, .midterm-machine .readout-value.words, .midterm-machine .m-figure b.words { font: var(--mm-type-row); letter-spacing: var(--mm-tr-row); } /* text: a sentence */ .midterm-machine .step-note, .midterm-machine .chambers, .midterm-machine .m-end, .midterm-machine .readout-note, .midterm-machine :is(.senate-calls, .gov-calls) > summary, .midterm-machine .person-run, .midterm-machine .facts li, .midterm-machine .sheet-list li, .midterm-machine .race-row, .midterm-machine .race-moved, .midterm-machine .rows li, .midterm-machine .call-bar, .midterm-machine .calls-head, .midterm-machine .rules, .midterm-machine .gov-calls, .midterm-machine .senate-calls, .midterm-machine .record table, .midterm-machine .tip, .midterm-machine .toast, .midterm-machine dialog p, .midterm-machine .sheet-figure, .midterm-machine .shared-note, .midterm-machine .finder li, .midterm-machine .finder input, .midterm-machine .mini, .midterm-machine .verdict, .midterm-machine .mover-name-label { font: var(--mm-type-text); letter-spacing: var(--mm-tr-text); } .midterm-machine .step-note, .midterm-machine .chambers p, .midterm-machine .m-end, .midterm-machine dialog p, .midterm-machine .calls-head, .midterm-machine .sheet-figure, .midterm-machine .facts li { max-width: var(--mm-measure-text); } /* the words a sentence leads with: 500, in ink */ .midterm-machine b, .midterm-machine strong, .midterm-machine th, .midterm-machine summary b, .midterm-machine .call-bar-name, .midterm-machine .race-moved, .midterm-machine .sheet details summary { font-weight: var(--mm-medium); } /* meta: how, where from, the small print */ .midterm-machine .readouts-note, .midterm-machine .readouts-economy, .midterm-machine .checks, .midterm-machine .check, .midterm-machine .fine, .midterm-machine .names, .midterm-machine .vote-key, .midterm-machine .basis-key, .midterm-machine .stance-basis, .midterm-machine .proof, .midterm-machine .race-venues, .midterm-machine .sheet-block > .quiet, .midterm-machine .colophon, .midterm-machine .legend-note, .midterm-machine .legend-key, .midterm-machine .in-congress li, .midterm-machine .site, .midterm-machine .phone-hint, .midterm-machine .vote-n small, .midterm-machine .vote-label, .midterm-machine .m-figure span, .midterm-machine .bar-name, .midterm-machine .mover-name, .midterm-machine .end h5 .quiet, .midterm-machine .vote-row, .midterm-machine .bar-row { font: var(--mm-type-meta); letter-spacing: var(--mm-tr-meta); } .midterm-machine .readouts-note, .midterm-machine .readouts-economy, .midterm-machine .colophon p, .midterm-machine .checks, .midterm-machine .fine { max-width: var(--mm-measure-meta); } .midterm-machine .check.first { font-weight: var(--mm-regular); } /* label: what a column or a group is, in mono capitals */ .midterm-machine .group, .midterm-machine .readout-label, .midterm-machine .strip h3, .midterm-machine .tries-label, .midterm-machine .record caption, .midterm-machine .sheet-sub, .midterm-machine .masthead h1, .midterm-machine .stamp, .midterm-machine .movers-label, .midterm-machine .mover-side { font: var(--mm-type-label); letter-spacing: var(--mm-tr-label); text-transform: uppercase; } /* number: a number in a row */ .midterm-machine .race-odds, .midterm-machine .rows li b, .midterm-machine .sheet-list li > span:last-child, .midterm-machine .mini b, .midterm-machine .rows .ticker, .midterm-machine .verdict.figure, .midterm-machine .sheet-figure b, .midterm-machine .step-n { font: var(--mm-type-number); letter-spacing: var(--mm-tr-number); font-variant-numeric: tabular-nums; } /* small: a number in a chart's legend, a chip, a count */ .midterm-machine .legend, .midterm-machine .chip, .midterm-machine .bar-value, .midterm-machine .vote-n b { font: var(--mm-type-small); letter-spacing: var(--mm-tr-small); font-variant-numeric: tabular-nums; } .midterm-machine .chip.called { font-weight: var(--mm-semibold); } /* rendering, as tilt.now sets it */ .midterm-machine { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; font-synthesis: none; text-rendering: optimizeLegibility; font-variant-ligatures: common-ligatures contextual; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } /* ---- styles/components.css ---- */ /* The Midterm Machine, proposed: components, each kind of thing once (see README.md in this folder) * * The whole stylesheet with tokens.css, roles.css and layout.css: nothing of Tilt's styles.css is * underneath, so each rule here is the thing's one complete definition. Tilt's class names are kept * (the markup is theirs) and grouped by what they are. tilt.now's look, as an app (Spotify's frame): a * black window, a few panes on it at 8 corners, the content in a pane unboxed; choices as pills; * chances as filled chips; the one number a block is about large. */ /* ---------- base ---------- */ .midterm-machine, .midterm-machine *, .midterm-machine *::before, .midterm-machine *::after { box-sizing: border-box; } .midterm-machine { margin: var(--mm-space-0); background: var(--mm-bg-window); color: var(--mm-fg); color-scheme: dark; } .midterm-machine :is(h1, h2, h3, h4, h5, p, ul, ol, figure) { margin: var(--mm-space-0); padding: var(--mm-space-0); } .midterm-machine :is(ul, ol) { list-style: none; } .midterm-machine button { margin: var(--mm-space-0); font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; } .midterm-machine a { color: inherit; text-underline-offset: var(--mm-space-1); } /* the `hidden` attribute always wins: the scripts show and hide with it */ .midterm-machine [hidden] { display: none !important; } .midterm-machine :focus-visible { outline: var(--mm-line-strong) solid var(--mm-pick); outline-offset: var(--mm-line-strong); } /* read aloud, not shown */ .midterm-machine :is(.sr, .finder-label) { position: absolute; width: var(--mm-line); height: var(--mm-line); overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .midterm-machine .skip { position: absolute; left: -100vw; } .midterm-machine .skip:focus { left: var(--mm-space-3); top: var(--mm-space-3); z-index: var(--mm-layer-skip); padding: var(--mm-space-2) var(--mm-space-3); background: var(--mm-bg-raised); } /* the data could not load (Tilt's words): a notice on the overlay surface, pinned under the bar at every width, so it * is the first thing read; the shapes the data would fill stay behind it */ .midterm-machine .fatal { position: fixed; z-index: var(--mm-layer-toast); top: calc(var(--mm-app-top) + var(--mm-bar) + var(--mm-space-4)); left: 50%; width: min(var(--mm-measure-text), calc(100vw - var(--mm-pane-gap) * 4)); margin: var(--mm-space-0); padding: var(--mm-space-4) var(--mm-space-4) var(--mm-space-4) var(--mm-space-6); background: var(--mm-bg-overlay); color: var(--mm-fg); border-left: var(--mm-line-strong) solid var(--mm-down-overlay); border-radius: var(--mm-radius-pane); box-shadow: var(--mm-shadow-menu); transform: translateX(-50%); } /* ---------- inks: three levels of label ink on the one ground ---------- * In :where(), so an ink list adds no weight of its own: a component's own colour, set later, wins. */ .midterm-machine :where(.quiet, .stamp, .group, .tries-label, .record caption, .sheet-sub, .checks, .check.open, .vote-key, .phone-hint, .m-figure span, .vote-n small, .colophon, .m-more, .race-venues, .stance.none, .stance-basis, .end h5 .quiet, .readout-label, .readout-note, .readouts-note, .readouts-economy, .strip h3, .legend, .mover-name, .movers-label, .mover-side, .screen-title, .machine-note) { color: var(--mm-fg-subtle); } .midterm-machine :where(.step-note, .chambers, .m-end, .vote-label, .vote-n b, .fine, .names, .senate-calls, .gov-calls, .calls-head, .proof, .in-congress li, dialog p) { color: var(--mm-fg-muted); } .midterm-machine :where(.chambers b, .m-end b, .senate-calls summary b, .gov-calls summary b, .fine b, .check.first, .record table.one caption) { color: var(--mm-fg); } .midterm-machine .up { color: var(--mm-up); } .midterm-machine .down { color: var(--mm-down); } /* In small print (12px) a word is set apart by its ink, not its weight (HIG: hierarchy by colour first) */ .midterm-machine :where(.fine, .names, .in-congress li, .checks, .vote-key, .proof, .site, .race-venues, .basis-key, .stance-basis) :is(b, strong, summary) { font-weight: var(--mm-regular); color: var(--mm-fg); } /* ---------- step: the page's three steps, one head in both panes ---------- * Its number in a white disc, its title in the name role; one sentence under it saying what to do. * 1 Who wins and 2 What passes in the controls, 3 What it does over the case: the order to read in. */ .midterm-machine :is(.step, .machine-head) h2 { display: flex; align-items: center; gap: var(--mm-space-3); color: var(--mm-fg); } .midterm-machine .step-n { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--mm-step-n); height: var(--mm-step-n); border-radius: var(--mm-radius-round); background: var(--mm-fg); color: var(--mm-fg-on-light); } .midterm-machine .step-note { margin: var(--mm-space-2) var(--mm-space-0) var(--mm-space-4); color: var(--mm-fg-muted); } /* a head's action, at its trailing edge: a step's reset (only while the step holds the reader's choices), hiding the controls */ .midterm-machine .head-action { display: inline-flex; align-items: center; min-height: var(--mm-pill-h-sm); margin-left: auto; padding: var(--mm-space-0) var(--mm-space-3); background: var(--mm-tint); color: var(--mm-fg-muted); border: 0; border-radius: var(--mm-radius-control); font: var(--mm-type-control-sm); letter-spacing: var(--mm-tr-control-sm); white-space: nowrap; transition: background var(--mm-dur-fast) var(--mm-ease), color var(--mm-dur-fast) var(--mm-ease); } .midterm-machine .head-action:hover { background: var(--mm-tint-hover); color: var(--mm-fg); } /* a head's buttons, grouped at its trailing edge: its reset, Hide controls; Settings where a layout uses it */ .midterm-machine .head-actions { display: flex; align-items: center; gap: var(--mm-space-1); margin-left: auto; } .midterm-machine .head-actions > .head-action { margin-left: var(--mm-space-0); } .midterm-machine .head-tool { display: none; align-items: center; min-height: var(--mm-pill-h-sm); padding: var(--mm-space-0) var(--mm-space-3); background: none; color: var(--mm-fg-subtle); border: 0; border-radius: var(--mm-radius-control); font: var(--mm-type-control-sm); letter-spacing: var(--mm-tr-control-sm); white-space: nowrap; } .midterm-machine .head-tool:hover { background: var(--mm-state-hover); color: var(--mm-fg); } .midterm-machine .head-tool[aria-pressed="true"] { background: var(--mm-tint); color: var(--mm-fg); } /* what a bill would do, made law, on its tile (layout B): the sector it lifts most, the one it weighs on most */ .midterm-machine .m-effect { display: flex; flex-wrap: wrap; gap: var(--mm-space-1) var(--mm-space-4); margin: var(--mm-space-0); font: var(--mm-type-meta); letter-spacing: var(--mm-tr-meta); color: var(--mm-fg-muted); } .midterm-machine .m-effect b { font: var(--mm-type-small); letter-spacing: var(--mm-tr-small); font-variant-numeric: tabular-nums; } .midterm-machine .m-effect-part .m-effect-name { color: var(--mm-fg-muted); } .midterm-machine .m-effect-part.up b { color: var(--mm-up); } .midterm-machine .m-effect-part.down b { color: var(--mm-down); } .midterm-machine:not([data-wins-yours]) .step:first-of-type .head-action, .midterm-machine:not([data-passes-yours]) #passes .head-action { display: none; } .midterm-machine .step:first-of-type .head-action, .midterm-machine #passes .head-action { animation: mm-fade var(--mm-dur-base) var(--mm-ease-out); } /* the heads' resets stand for "Undo my changes", which reset everything from step 2 */ .midterm-machine[data-head-actions] .rules #reset { display: none; } /* a step that holds the reader's own choices: its number in the marker's yellow (views.js sets data-wins-yours, data-passes-yours) */ .midterm-machine .step-n { transition: background var(--mm-dur-slow) var(--mm-ease); } /* ---------- list row: a row you press in the controls (an outcome, a bill, a line that opens) ---------- * One height, its words at the panel's edge, the row's ground showing only under the pointer or * when it is the one picked or open; what it leads to at the trailing edge. */ .midterm-machine :is(.world, .measure, .senate-calls > summary, .gov-calls > summary) { margin-inline: calc(var(--mm-space-2) * -1); border-radius: var(--mm-radius); transition: background var(--mm-dur-fast) var(--mm-ease); } .midterm-machine :is(.world, .measure.folded, .senate-calls > summary, .gov-calls > summary):hover { background: var(--mm-state-hover); } .midterm-machine :is(.world, .measure.folded, .senate-calls > summary, .gov-calls > summary):active { background: var(--mm-state-pressed); } /* ---------- button: a press ---------- * TILT's: a rounded rectangle at 6, the view's one prominent action solid white, every other a tint. */ .midterm-machine :is(.solid-button, .paper-button, .sheet-close) { display: inline-flex; align-items: center; justify-content: center; min-height: var(--mm-pill-h); padding: var(--mm-space-0) var(--mm-space-4); font: var(--mm-type-control); letter-spacing: var(--mm-tr-control); white-space: nowrap; border: 0; border-radius: var(--mm-radius-control); transition: background var(--mm-dur-fast) var(--mm-ease), color var(--mm-dur-fast) var(--mm-ease); } .midterm-machine .solid-button { background: var(--mm-fg); color: var(--mm-fg-on-light); } .midterm-machine .solid-button:hover { background: var(--mm-fg-muted); } .midterm-machine :is(.paper-button, .sheet-close) { background: var(--mm-tint); color: var(--mm-fg); } .midterm-machine :is(.paper-button, .sheet-close):hover { background: var(--mm-tint-hover); } .midterm-machine :is(.paper-button, .sheet-close):active { background: var(--mm-tint-press); } .midterm-machine .sheet-close { float: right; } /* one Share, in the bar: "Share what you found" opens the same menu */ .midterm-machine .share-result { display: none; } /* the reader's scenario: a label, how many choices are theirs, one reset for all of them */ .midterm-machine .yours { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-space-2) var(--mm-space-3); margin: var(--mm-space-0); } .midterm-machine .yours[hidden] { display: none; } .midterm-machine .yours-label { font: var(--mm-type-label); letter-spacing: var(--mm-tr-label); text-transform: uppercase; color: var(--mm-pick); } .midterm-machine .yours-count { font: var(--mm-type-text); letter-spacing: var(--mm-tr-text); color: var(--mm-fg); } .midterm-machine .yours-reset { min-height: var(--mm-pill-h-sm); padding: var(--mm-space-0) var(--mm-space-3); font: var(--mm-type-control-sm); letter-spacing: var(--mm-tr-control-sm); } /* a link that acts */ .midterm-machine :is(.link-button, .name) { padding: var(--mm-space-0); background: none; border: 0; text-decoration: underline; text-underline-offset: var(--mm-space-1); text-decoration-color: var(--mm-border-strong); } .midterm-machine :is(.link-button, .name):hover { text-decoration-color: var(--mm-fg); } .midterm-machine .link-button { display: inline-flex; align-items: center; min-height: var(--mm-target-min); font: var(--mm-type-control); letter-spacing: var(--mm-tr-control); } .midterm-machine .m-more { font: var(--mm-type-meta); letter-spacing: var(--mm-tr-meta); } .midterm-machine .leg { border-bottom: var(--mm-line) dotted var(--mm-fg-subtle); cursor: help; } /* ---------- segmented control: one way of choosing among a few, everywhere ---------- * Segments side by side, 2 apart, the outer corners 6 and the inner 2, so the row reads as one * control; the chosen segment white. A bill's ruling, a race's call, setting every measure, the case's * picture and the map's view are all this one. Full size only for the case's picture; a size down in * the panes, a sheet and a chart's head. In a pane it fills its row, the segments equal. */ .midterm-machine :is(.rule, .tries, .views, .lens) { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--mm-segment-pad); } .midterm-machine :is(.rule, .tries, .views, .lens) button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--mm-pill-h); padding: var(--mm-space-0) var(--mm-space-3); background: var(--mm-tint); border: 0; border-radius: var(--mm-radius-chip); font: var(--mm-type-control); letter-spacing: var(--mm-tr-control); color: var(--mm-fg-muted); white-space: nowrap; transition: background var(--mm-dur-fast) var(--mm-ease), color var(--mm-dur-fast) var(--mm-ease); } .midterm-machine :is(.rule, .tries, .views, .lens) button:first-of-type { border-radius: var(--mm-radius-control) var(--mm-radius-chip) var(--mm-radius-chip) var(--mm-radius-control); } .midterm-machine :is(.rule, .tries, .views, .lens) button:last-of-type { border-radius: var(--mm-radius-chip) var(--mm-radius-control) var(--mm-radius-control) var(--mm-radius-chip); } .midterm-machine :is(.rule, .tries, .views, .lens) button:hover { background: var(--mm-tint-hover); color: var(--mm-fg); } .midterm-machine :is(.rule, .tries, .views, .lens) button:active { background: var(--mm-tint-press); } /* the chosen segment's fill is a layer of its own (::before), drawn the same, so a choice can glide from the segment it * leaves to the one chosen (motion.js); --mm-chosen is its colour. It lies under every label of the group (the group * holds its layers), so as it travels it never covers a label */ .midterm-machine :is(.rule, .tries, .views, .lens) { isolation: isolate; } .midterm-machine :is(.rule, .tries, .views, .lens) button { position: relative; } .midterm-machine :is(.rule, .tries, .views, .lens) button[aria-pressed="true"] { --mm-chosen: var(--mm-fg); background: transparent; color: var(--mm-fg-on-light); } .midterm-machine :is(.rule, .tries, .views, .lens) button[aria-pressed="true"]::before { content: ""; position: absolute; inset: var(--mm-space-0); z-index: var(--mm-layer-under); border-radius: inherit; background: var(--mm-chosen); } /* a ruling left to the count is the default, nobody's choice: chosen, but quiet (a tint, in ink), so a bill the reader * ruled is the one in white and a column of cards reads by what was changed */ .midterm-machine :is(.measure .rule button[data-key$=":auto"], #try-count)[aria-pressed="true"] { --mm-chosen: var(--mm-tint-press); color: var(--mm-fg); } /* the map's lens is a setting of the picture, not a picture: a size down, its choice a tint, so the picture's switch leads */ .midterm-machine .lens button[aria-pressed="true"] { --mm-chosen: var(--mm-tint-press); color: var(--mm-fg); } .midterm-machine .tries-label { flex-basis: 100%; margin-bottom: var(--mm-space-2); } /* a size down in the panes, a sheet and a chart's head */ .midterm-machine :is(.lens, .paper .rule, .tries, .sheet .rule) button { min-height: var(--mm-pill-h-sm); padding: var(--mm-space-0) var(--mm-space-3); font: var(--mm-type-control-sm); letter-spacing: var(--mm-tr-control-sm); } /* in a pane, the row's width, its segments equal */ .midterm-machine .measure .rule { display: flex; width: 100%; flex-wrap: nowrap; } .midterm-machine .measure .rule button { flex: 1 1 0; min-width: 0; } /* a default and a pair (setting every measure: by the count, or either party's lean; a race: the markets, or either side): the default across the top, the pair under it, the control's corners its outer ones */ .midterm-machine :is(.tries, .call-bar .rule) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .midterm-machine :is(.tries, .call-bar .rule) :is(.tries-label, button:first-of-type) { grid-column: 1 / -1; } .midterm-machine :is(.tries, .call-bar .rule) button { min-width: 0; } .midterm-machine :is(.tries, .call-bar .rule) button:first-of-type { border-radius: var(--mm-radius-control) var(--mm-radius-control) var(--mm-radius-chip) var(--mm-radius-chip); } .midterm-machine :is(.tries, .call-bar .rule) button:nth-of-type(2) { border-radius: var(--mm-radius-chip) var(--mm-radius-chip) var(--mm-radius-chip) var(--mm-radius-control); } .midterm-machine :is(.tries, .call-bar .rule) button:last-of-type { border-radius: var(--mm-radius-chip) var(--mm-radius-chip) var(--mm-radius-control) var(--mm-radius-chip); } /* ---------- chance chip: a chance, filled as far as it goes ---------- * White on a faint track; an outcome's in its party's colour. As a bill's figure, the number over a meter. */ .midterm-machine .chance { --mm-fill: var(--mm-chance); --mm-empty: var(--mm-chance-empty); display: inline-block; flex: none; min-width: var(--mm-chip-w); padding: var(--mm-space-0) var(--mm-space-1); border-radius: var(--mm-radius-chip); background: linear-gradient(to right, var(--mm-fill) var(--p, 0%), var(--mm-empty) var(--p, 0%)); font: var(--mm-type-number); letter-spacing: var(--mm-tr-number); font-variant-numeric: tabular-nums; color: var(--mm-fg); text-align: left; } .midterm-machine .chance.chance-all { background: var(--mm-tint); color: var(--mm-fg-muted); } .midterm-machine .world-DD .chance { --mm-fill: var(--mm-chance-dem); --mm-empty: var(--mm-chance-dem-empty); } .midterm-machine .world-RR .chance { --mm-fill: var(--mm-chance-rep); --mm-empty: var(--mm-chance-rep-empty); } .midterm-machine .world-split .chance { --mm-fill: var(--mm-chance-ind); --mm-empty: var(--mm-chance-ind-empty); } /* a bill's figure: the chance at figure size, its meter under it */ .midterm-machine .m-figure b.chance { min-width: var(--mm-meter-w); padding: var(--mm-space-0) var(--mm-space-0) calc(var(--mm-meter-h) + var(--mm-space-2)); border-radius: var(--mm-space-0); background: linear-gradient(to right, var(--mm-fg) var(--p, 0%), var(--mm-bg-track) var(--p, 0%)) left bottom / 100% var(--mm-meter-h) no-repeat; font: var(--mm-type-figure); letter-spacing: var(--mm-tr-figure); } /* ---------- tag: words on a wash (a race's chip) ---------- */ .midterm-machine .chips { display: flex; flex-wrap: wrap; gap: var(--mm-space-2); } .midterm-machine .chips-gap { display: none; } .midterm-machine .chip { position: relative; display: inline-flex; align-items: center; min-height: var(--mm-tag-h); padding: var(--mm-space-0) var(--mm-space-2); border: 0; border-radius: var(--mm-radius); } /* the tag's tap area reaches its row's pitch, past what is drawn (a phone's 44) */ .midterm-machine .chip::after { content: ""; position: absolute; inset: calc(var(--mm-hit-pad) * -1) var(--mm-space-0); } .midterm-machine .chip.dem { background: var(--mm-dem-wash); color: var(--mm-dem-ink); } .midterm-machine .chip.rep { background: var(--mm-rep-wash); color: var(--mm-rep-ink); } .midterm-machine .chip.called { background: var(--mm-pick); color: var(--mm-fg-on-light); } .midterm-machine .chip.open { box-shadow: inset 0 0 0 var(--mm-line) var(--mm-fg); } /* ---------- field: the search ---------- */ .midterm-machine .finder { position: relative; } .midterm-machine .finder input { width: 100%; min-height: var(--mm-pill-h); padding: var(--mm-space-0) var(--mm-space-3); border: var(--mm-line) solid transparent; border-radius: var(--mm-radius-control); background: var(--mm-tint); color: var(--mm-fg); } .midterm-machine .finder input::placeholder { color: var(--mm-fg-subtle); } .midterm-machine .finder input:hover { background: var(--mm-tint-hover); } .midterm-machine .finder input:focus { border-color: var(--mm-border-strong); background: var(--mm-tint-hover); } .midterm-machine .finder ul { position: absolute; z-index: var(--mm-layer-search); top: calc(100% + var(--mm-space-1)); left: var(--mm-space-0); right: var(--mm-space-0); max-height: var(--mm-menu-max); overflow: auto; padding: var(--mm-space-1); background: var(--mm-bg-overlay); border: var(--mm-line) solid var(--mm-border); border-radius: var(--mm-radius); box-shadow: var(--mm-shadow-menu); } .midterm-machine .finder li.quiet { padding: var(--mm-space-2) var(--mm-space-3); } .midterm-machine .finder li button { display: block; width: 100%; min-height: var(--mm-pill-h); padding: var(--mm-space-1) var(--mm-space-3); text-align: left; background: none; border: 0; border-radius: var(--mm-radius); } .midterm-machine .finder li button:is(:hover, :focus-visible) { background: var(--mm-state-hover); } /* ---------- choice: who wins, a list with its chances, the pick checked ---------- */ .midterm-machine .world { display: grid; grid-template-columns: auto minmax(0, 1fr) var(--mm-check-w); align-items: center; gap: var(--mm-space-3); width: calc(100% + var(--mm-space-4)); min-height: var(--mm-row-h); padding: var(--mm-space-1) var(--mm-space-2); background: none; border: 0; text-align: left; } /* the outcome picked: its ground a layer of its own, as a segment's, so the pick glides from row to row */ .midterm-machine .worlds { isolation: isolate; } .midterm-machine .world { position: relative; } .midterm-machine .world[aria-checked="true"] { background: none; } .midterm-machine .world[aria-checked="true"]::before { content: ""; position: absolute; inset: var(--mm-space-0); z-index: var(--mm-layer-under); border-radius: inherit; background: var(--mm-state-selected); } .midterm-machine .world .world-name { color: var(--mm-fg-muted); transition: color var(--mm-dur-fast) var(--mm-ease); } .midterm-machine .world:hover .world-name, .midterm-machine .world[aria-checked="true"] .world-name { color: var(--mm-fg); } /* the pick: a check in the highlighter's colour */ .midterm-machine .world-check { justify-self: end; width: var(--mm-check-w); height: var(--mm-check-w); } .midterm-machine .world[aria-checked="true"] .world-check { background: var(--mm-pick); -webkit-mask: var(--mm-tick) center / contain no-repeat; mask: var(--mm-tick) center / contain no-repeat; } .midterm-machine .chambers { margin-top: var(--mm-space-4); } /* the settings that act on every measure: one raised block, the switch over the two counts */ .midterm-machine #passes { display: flex; flex-direction: column; } .midterm-machine #passes > h2 { order: 0; } .midterm-machine #passes > .step-note { order: 1; } .midterm-machine #passes > .tries { order: 2; padding: var(--mm-space-3) var(--mm-space-3) var(--mm-space-2); background: var(--mm-bg-raised); border-radius: var(--mm-radius-pane) var(--mm-radius-pane) var(--mm-space-0) var(--mm-space-0); } .midterm-machine #passes > .rules { order: 3; padding: var(--mm-space-0) var(--mm-space-3) var(--mm-space-2); background: var(--mm-bg-raised); border-radius: var(--mm-space-0) var(--mm-space-0) var(--mm-radius-pane) var(--mm-radius-pane); } .midterm-machine #passes > .phone-hint { order: 4; } .midterm-machine #passes > .vote-key { order: 5; } .midterm-machine #passes > .measures { order: 6; } .midterm-machine .rules { display: flex; flex-direction: column; align-items: flex-start; } .midterm-machine .rules label { display: inline-flex; align-items: center; gap: var(--mm-space-2); min-height: var(--mm-target-min); } .midterm-machine .rules input { width: var(--mm-check); height: var(--mm-check); margin: var(--mm-space-0); accent-color: var(--mm-fg); } /* ---------- disclosure: a line that opens more ---------- */ .midterm-machine summary { min-height: var(--mm-target-min); padding-block: var(--mm-space-1); cursor: pointer; } .midterm-machine summary::marker { color: var(--mm-fg-subtle); } /* calling a race, the governors: list rows, a › at the trailing edge that turns as they open */ .midterm-machine :is(.senate-calls, .gov-calls) { margin-top: var(--mm-space-1); } .midterm-machine .calls { margin-top: var(--mm-space-3); } /* a note: an explanation one step away (views.js noteTip). Its mark, the info symbol in the subtle ink, opens the words * on the overlay surface on hover, on focus and on a tap; the words are the mark's description to a screen reader */ .midterm-machine .note { position: relative; display: inline-flex; vertical-align: middle; } .midterm-machine .note-mark { display: inline-flex; align-items: center; justify-content: center; width: var(--mm-note-mark); height: var(--mm-note-mark); padding: var(--mm-space-0); background: none; border: 0; border-radius: var(--mm-radius-round); color: var(--mm-fg-subtle); cursor: help; } .midterm-machine .note-mark::before { content: ""; width: var(--mm-check-w); height: var(--mm-check-w); background: currentColor; -webkit-mask: var(--mm-info) center / contain no-repeat; mask: var(--mm-info) center / contain no-repeat; } .midterm-machine .note:is(:hover, :focus-within) .note-mark { color: var(--mm-fg); } .midterm-machine .note-tip { position: absolute; z-index: var(--mm-layer-tip); top: calc(100% + var(--mm-space-1)); left: calc(var(--mm-space-2) * -1); display: none; width: var(--mm-tip); padding: var(--mm-space-2) var(--mm-space-3); background: var(--mm-bg-overlay); color: var(--mm-fg); border-radius: var(--mm-radius-pane); box-shadow: var(--mm-shadow-menu); font: var(--mm-type-meta); letter-spacing: var(--mm-tr-meta); text-transform: none; text-align: left; white-space: normal; } .midterm-machine .note:is(:hover, :focus-within) .note-tip { display: block; } /* by a picture's legend, at the pane's foot: the words open upward */ .midterm-machine .legend .note-tip { top: auto; bottom: calc(100% + var(--mm-space-1)); } /* the seats behind each outcome (views.js paintSeats): a label, then the Senate and the House each a raised block */ .midterm-machine .seats { margin-top: var(--mm-space-8); } .midterm-machine .seats:empty { display: none; } .midterm-machine .seats-head { margin-bottom: var(--mm-space-2); font: var(--mm-type-label); letter-spacing: var(--mm-tr-label); text-transform: uppercase; color: var(--mm-fg-subtle); } .midterm-machine .seats-block { padding: var(--mm-space-3) var(--mm-space-3) var(--mm-space-3); background: var(--mm-bg-raised); border-radius: var(--mm-radius-pane); } .midterm-machine .seats-block + .seats-block { margin-top: var(--mm-space-2); } .midterm-machine .seats-title { display: flex; flex-direction: column; gap: var(--mm-space-0); margin-bottom: var(--mm-space-3); } .midterm-machine .seats-title b { font: var(--mm-type-row); letter-spacing: var(--mm-tr-row); color: var(--mm-fg); } .midterm-machine .seats-title span { font: var(--mm-type-meta); letter-spacing: var(--mm-tr-meta); color: var(--mm-fg-muted); } /* the Senate: a bar for each count of Republican seats, as tall as its chance, in the colour of who it gives control; * the count that gives Republicans control marked on its leading edge */ .midterm-machine .seat-bars { display: flex; align-items: flex-end; gap: var(--mm-segment-pad); height: var(--mm-seat-chart-h); } .midterm-machine .seat-bar { flex: 1 1 0; min-width: 0; height: max(var(--mm-line), var(--h)); border-radius: var(--mm-radius-chip) var(--mm-radius-chip) var(--mm-space-0) var(--mm-space-0); } .midterm-machine .seat-bar.dem { background: var(--mm-dem-soft); } .midterm-machine .seat-bar.rep { background: var(--mm-rep-soft); } .midterm-machine .seat-bar.need { box-shadow: calc(var(--mm-need) * -1 - var(--mm-segment-pad)) 0 0 calc(var(--mm-segment-pad) * -1 + var(--mm-line)) var(--mm-fg); } .midterm-machine .seat-axis { position: relative; display: flex; justify-content: space-between; margin-top: var(--mm-space-1); padding-top: var(--mm-space-1); border-top: var(--mm-line) solid var(--mm-border); font: var(--mm-type-small); letter-spacing: var(--mm-tr-small); color: var(--mm-fg-subtle); } .midterm-machine .seat-axis-need { position: absolute; left: var(--at); top: var(--mm-space-1); color: var(--mm-fg); transform: translateX(-50%); } /* the House: its odds as one bar, Democrats from the leading edge, Republicans the rest */ .midterm-machine .seat-meter { display: flex; gap: var(--mm-segment-pad); height: var(--mm-rail); } .midterm-machine .seat-meter i { display: block; border-radius: var(--mm-radius-chip); } .midterm-machine .seat-meter .dem { flex: none; width: var(--w); background: var(--mm-dem-soft); } .midterm-machine .seat-meter .rep { flex: 1 1 0; background: var(--mm-rep-soft); } .midterm-machine .seats-odds { display: flex; justify-content: space-between; margin-top: var(--mm-space-2); font: var(--mm-type-meta); letter-spacing: var(--mm-tr-meta); } .midterm-machine .seats-odds b { font: var(--mm-type-number); letter-spacing: var(--mm-tr-number); font-variant-numeric: tabular-nums; } .midterm-machine .seats-odds .dem { color: var(--mm-dem-ink); } .midterm-machine .seats-odds .rep { color: var(--mm-rep-ink); } /* the outcome picked in step 1 lights its part of the seats at full strength and dims the rest: a Democratic Congress * the Democrats' side of both chambers, a Republican one the Republicans'; at rest (all outcomes, a split) both soft */ .midterm-machine:has(.world-DD[aria-checked="true"]) .seats :is(.seat-bar.dem, .seat-meter .dem) { background: var(--mm-dem); } .midterm-machine:has(.world-RR[aria-checked="true"]) .seats :is(.seat-bar.rep, .seat-meter .rep) { background: var(--mm-rep); } .midterm-machine:has(.world-DD[aria-checked="true"]) .seats :is(.seat-bar.rep, .seat-meter .rep), .midterm-machine:has(.world-RR[aria-checked="true"]) .seats :is(.seat-bar.dem, .seat-meter .dem) { opacity: var(--mm-ruled-dim); } .midterm-machine:has(.world-DD[aria-checked="true"]) .seats .seats-odds .rep, .midterm-machine:has(.world-RR[aria-checked="true"]) .seats .seats-odds .dem { color: var(--mm-fg-subtle); } .midterm-machine :is(.senate-calls, .gov-calls) > summary { position: relative; display: block; min-height: var(--mm-row-h); padding: var(--mm-space-2) calc(var(--mm-space-2) * 2 + var(--mm-disclosure)) var(--mm-space-2) var(--mm-space-2); list-style: none; color: var(--mm-fg-muted); } .midterm-machine :is(.senate-calls, .gov-calls) > summary b { display: block; font: var(--mm-type-row); letter-spacing: var(--mm-tr-row); } .midterm-machine :is(.senate-calls, .gov-calls) > summary::after { position: absolute; top: 50%; right: var(--mm-space-2); translate: 0 -50%; } .midterm-machine :is(.senate-calls, .gov-calls) > summary::-webkit-details-marker { display: none; } .midterm-machine :is(.senate-calls, .gov-calls) > summary::after, .midterm-machine .m-toggle::after { content: "›"; flex: none; width: var(--mm-disclosure); color: var(--mm-fg-subtle); font: var(--mm-type-pane-title); text-align: center; transition: transform var(--mm-dur-base) var(--mm-ease); } .midterm-machine :is(.senate-calls, .gov-calls)[open] > summary::after, .midterm-machine .m-toggle[aria-expanded="true"]::after { transform: rotate(var(--mm-quarter)); } .midterm-machine :is(.senate-calls, .gov-calls)[open] > .chips { margin-top: var(--mm-space-3); } .midterm-machine .calls-head { margin: var(--mm-space-3) var(--mm-space-0) var(--mm-space-2); } .midterm-machine .call-bar { display: flex; flex-direction: column; align-items: stretch; gap: var(--mm-space-2); margin-top: var(--mm-space-3); padding: var(--mm-space-3); background: var(--mm-bg-raised); border-radius: var(--mm-radius-pane); } /* ---------- bill: one measure, a list row that opens in place ---------- * Folded: its name, its chance (or the verdict in words) and a ›. Open, raised, in one order: * 1 its name, at pane-title 4 the path: Senate, House, President, each a step * 2 what it does, a sentence 5 the Senate's count: those for, those against * 3 its chance, a figure on a meter 6 your ruling, a segmented control; Details */ .midterm-machine .phone-hint { margin-top: var(--mm-space-4); } .midterm-machine .vote-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-space-1) var(--mm-space-2); margin-top: var(--mm-space-2); } /* the key to the vote bars, in each card under its bars (19 Oct): the step's own key, a row above the cards that came * and went as a card opened, is left out */ .midterm-machine #passes > .vote-key { display: none; } .midterm-machine .vote-key .swatch + .swatch { margin-left: var(--mm-space-3); } .midterm-machine .swatch { display: inline-block; width: var(--mm-swatch-w); height: var(--mm-rail); border-radius: var(--mm-radius-chip); background-color: var(--mm-fg-muted); } .midterm-machine .swatch.soft { opacity: var(--mm-vote-lean); } .midterm-machine .group { margin: var(--mm-space-6) var(--mm-space-0) var(--mm-space-1); } .midterm-machine .measure { padding: var(--mm-space-0) var(--mm-space-2); } .midterm-machine .measure.folded > :not(header) { display: none; } .midterm-machine .measure header { display: flex; align-items: center; justify-content: space-between; gap: var(--mm-space-1) var(--mm-space-3); } .midterm-machine .m-toggle { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: var(--mm-space-3); min-height: var(--mm-row-h); padding: var(--mm-space-2) var(--mm-space-0); background: none; border: 0; text-align: left; } .midterm-machine .measure h4 { flex: 1 1 auto; min-width: 0; color: var(--mm-fg); } .midterm-machine .verdict { flex: none; margin-left: auto; white-space: nowrap; color: var(--mm-fg-muted); } .midterm-machine .verdict:is(.figure, .law, .ruled) { color: var(--mm-fg); } .midterm-machine .measure.law h4 { text-decoration: underline; text-decoration-color: var(--mm-pick); text-decoration-thickness: var(--mm-line-strong); text-underline-offset: var(--mm-space-1); } .midterm-machine .chevron { display: none; } .midterm-machine .m-more { flex: none; display: inline-flex; align-items: center; justify-content: flex-end; min-width: var(--mm-target-min); min-height: var(--mm-target-min); margin-left: auto; } /* open: one raised block, its parts in the order above */ .midterm-machine .measure:not(.folded) { display: flex; flex-direction: column; align-items: stretch; margin-block: var(--mm-space-2); padding: var(--mm-space-1) var(--mm-space-4) var(--mm-space-4); background: var(--mm-bg-raised); border-radius: var(--mm-radius-pane); } .midterm-machine .measure:not(.folded) :is(header, .votes, .m-foot) { display: contents; } .midterm-machine .measure:not(.folded) h4 { font: var(--mm-type-pane-title); letter-spacing: var(--mm-tr-pane-title); } .midterm-machine .measure:not(.folded) .m-toggle { order: 0; } .midterm-machine .measure:not(.folded) .m-end { order: 1; margin-top: var(--mm-space-0); color: var(--mm-fg-muted); } .midterm-machine .measure:not(.folded) .m-figure { order: 2; margin-top: var(--mm-space-4); } .midterm-machine .measure:not(.folded) .checks { order: 3; } .midterm-machine .measure:not(.folded) .vote-row { order: 4; } .midterm-machine .measure:not(.folded) .vote-key.in-card { order: 4; margin-top: var(--mm-space-1); } .midterm-machine .measure:not(.folded) .rule { order: 5; margin-top: var(--mm-space-6); } .midterm-machine .measure:not(.folded) .m-more { order: 6; align-self: flex-start; justify-content: flex-start; margin: var(--mm-space-3) var(--mm-space-0) var(--mm-space-0); } .midterm-machine .measure:not(.folded) .m-details { order: 7; } .midterm-machine .m-end b { color: var(--mm-fg); } /* the chance: a figure over its meter, what it is beside it */ .midterm-machine .m-figure { display: flex; align-items: flex-end; gap: var(--mm-space-3); } .midterm-machine .m-figure span { padding-bottom: calc(var(--mm-meter-h) + var(--mm-space-2)); } .midterm-machine .m-figure span:empty { display: none; } /* the path: three steps, each a mark, its name and its chance, why under it; a line joins the marks */ .midterm-machine .checks { margin-top: var(--mm-space-6); } .midterm-machine div.checks::before, .midterm-machine .vote-row.yes::before { display: block; margin-bottom: var(--mm-space-3); font: var(--mm-type-label); letter-spacing: var(--mm-tr-label); text-transform: uppercase; color: var(--mm-fg-subtle); } .midterm-machine div.checks::before { content: "The path to law"; } /* a bill the reader ruled: its path and count are the count's, not what happens here, so they recede and say so */ .midterm-machine .measure.ruled:not(.folded) :is(div.checks > *, .vote-row) { opacity: var(--mm-ruled-dim); } .midterm-machine .measure.ruled div.checks::before { content: "The path by the count \00b7 your ruling overrides it"; } .midterm-machine .measure.ruled .m-figure b.words { color: var(--mm-pick); } .midterm-machine .check { position: relative; display: grid; grid-template-columns: var(--mm-mark-d) minmax(0, 1fr) auto; grid-template-areas: "mark step odds" ". why why"; column-gap: var(--mm-space-3); padding-bottom: var(--mm-space-3); color: var(--mm-fg-muted); } .midterm-machine .check:not(:last-child)::after { content: ""; position: absolute; top: var(--mm-mark-d); bottom: var(--mm-space-0); left: calc(var(--mm-mark-d) / 2); width: var(--mm-line); background: var(--mm-border); } .midterm-machine .check-mark { grid-area: mark; display: inline-flex; align-items: center; justify-content: center; width: var(--mm-mark-d); height: var(--mm-mark-d); border-radius: var(--mm-radius-round); box-shadow: inset 0 0 0 var(--mm-line) var(--mm-border-strong); font: var(--mm-type-control-sm); color: var(--mm-fg-subtle); } .midterm-machine .check.ok .check-mark { background: var(--mm-fg); box-shadow: none; color: var(--mm-fg-on-light); } .midterm-machine .check.no .check-mark { color: var(--mm-fg); } .midterm-machine .check-step { grid-area: step; align-self: center; font: var(--mm-type-row); letter-spacing: var(--mm-tr-row); color: var(--mm-fg); } .midterm-machine .check-p { grid-area: odds; align-self: center; font: var(--mm-type-number); letter-spacing: var(--mm-tr-number); font-variant-numeric: tabular-nums; color: var(--mm-fg); text-align: right; } .midterm-machine .check-sep { display: none; } .midterm-machine .check-why { grid-area: why; margin-top: var(--mm-space-1); font: var(--mm-type-meta); letter-spacing: var(--mm-tr-meta); color: var(--mm-fg-subtle); } /* where it is most likely to fail: that step's mark in ink */ .midterm-machine .check.first .check-mark { box-shadow: inset 0 0 0 var(--mm-line-strong) var(--mm-fg); color: var(--mm-fg); } /* the count: those for in their parties' colours (a leaning or an estimate at half strength), those against in gray; the votes needed marked */ .midterm-machine .vote-row.yes { margin-top: var(--mm-space-4); } .midterm-machine .vote-row.yes::before { content: "The Senate's count"; grid-column: 1 / -1; } .midterm-machine .vote-row { display: grid; grid-template-columns: var(--mm-col-label) minmax(0, 1fr) var(--mm-col-count); align-items: center; column-gap: var(--mm-space-3); row-gap: var(--mm-space-1); margin-top: var(--mm-space-2); } .midterm-machine .vote-label { color: var(--mm-fg-muted); } .midterm-machine .vote-track { position: relative; display: flex; height: var(--mm-rail); background: var(--mm-bg-track); border-radius: var(--mm-radius-chip); } .midterm-machine .vote-track i { display: block; height: 100%; } .midterm-machine .vote-track i:first-child { border-radius: var(--mm-radius-chip) var(--mm-space-0) var(--mm-space-0) var(--mm-radius-chip); } .midterm-machine .vote-track .dem, .midterm-machine .party-D .race-bar i { background-color: var(--mm-dem); } .midterm-machine .vote-track .rep, .midterm-machine .party-R .race-bar i { background-color: var(--mm-rep); } .midterm-machine .vote-track .ind, .midterm-machine .party-I .race-bar i { background-color: var(--mm-ind); } .midterm-machine .vote-track i.soft { opacity: var(--mm-vote-lean); } .midterm-machine .vote-row.no .vote-track i { background-color: var(--mm-vote-against); } .midterm-machine .vote-track .need { position: absolute; top: calc(var(--mm-space-1) * -1); bottom: calc(var(--mm-space-1) * -1); height: auto; width: var(--mm-need); border-radius: var(--mm-radius-chip); background: var(--mm-fg); opacity: 1; } .midterm-machine .vote-n { display: contents; } .midterm-machine .vote-n b { text-align: right; color: var(--mm-fg); } .midterm-machine .vote-n small { grid-column: 2 / -1; min-width: 0; overflow-wrap: anywhere; color: var(--mm-fg-subtle); } .midterm-machine .m-foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mm-space-2); margin-top: var(--mm-space-4); } /* a bill's details: a raised block */ .midterm-machine .m-details { margin-top: var(--mm-space-4); padding-top: var(--mm-space-1); border-top: var(--mm-line) solid var(--mm-border); } .midterm-machine .end { padding-top: var(--mm-space-3); } .midterm-machine .end + .end { margin-top: var(--mm-space-3); border-top: var(--mm-line) solid var(--mm-border-subtle); } /* a bill in each Congress: one row each, the Congress and its odds, then the bill's chance there; a Congress where it * becomes law gets the marker's dot (a box read as an alert) */ .midterm-machine .in-congress { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mm-space-0); margin: var(--mm-space-2) var(--mm-space-0); } .midterm-machine .in-congress li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--mm-space-3); padding: var(--mm-space-2) var(--mm-space-0); border-top: var(--mm-line) solid var(--mm-border-subtle); } .midterm-machine .in-congress li b { text-align: right; } .midterm-machine .in-congress li.law > span::before { content: ""; display: inline-block; width: var(--mm-rail); height: var(--mm-rail); margin-right: var(--mm-space-2); border-radius: var(--mm-radius-round); background: var(--mm-pick); } .midterm-machine :is(.fine, .names) { margin-top: var(--mm-space-2); } .midterm-machine .names p { margin-top: var(--mm-space-1); } .midterm-machine .end .paper-button { margin-top: var(--mm-space-2); } /* ---------- bar chart: a value along a track (sectors, races) ---------- */ .midterm-machine .race-bar { height: var(--mm-rail); background: var(--mm-bg-track); border-radius: var(--mm-radius-chip); overflow: hidden; } .midterm-machine .race-bar i { display: block; height: 100%; } .midterm-machine .bar-row { display: grid; grid-template-columns: var(--mm-col-name) minmax(0, 1fr) var(--mm-col-value); align-items: center; gap: var(--mm-space-2); min-height: var(--mm-row-h-dense); border-bottom: var(--mm-line) solid var(--mm-border-subtle); } .midterm-machine .bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mm-fg-muted); } .midterm-machine .bar-track { position: relative; height: var(--mm-rail); background: var(--mm-bg-track); } .midterm-machine .bar-track i { position: absolute; top: var(--mm-space-0); bottom: var(--mm-space-0); } .midterm-machine .bar-track .up { background: var(--mm-up); } .midterm-machine .bar-track .down { background: var(--mm-down); } .midterm-machine .bar-value { text-align: right; } /* ---------- figures: the case's one number, then the three movers ---------- */ .midterm-machine .readout { display: flex; flex-direction: column; align-items: flex-start; padding: var(--mm-space-0); background: none; border: 0; color: var(--mm-fg); text-align: left; } .midterm-machine .readout-label { margin-bottom: var(--mm-space-1); } .midterm-machine .readout-value { white-space: nowrap; } .midterm-machine .readout-note { margin-top: var(--mm-space-2); max-width: var(--mm-lead-w); color: var(--mm-fg-muted); } .midterm-machine .readout.up .readout-value { color: var(--mm-up); } .midterm-machine .readout.down .readout-value { color: var(--mm-down); } /* a mover: what it is, its move, the sector or state; a button when it opens a state */ .midterm-machine .movers-label { position: absolute; width: var(--mm-line); height: var(--mm-line); overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .midterm-machine .mover { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mm-space-1); min-width: 0; padding: var(--mm-space-0); background: none; border: 0; color: var(--mm-fg); text-align: left; } .midterm-machine .mover-name-label { order: 3; min-width: 0; color: var(--mm-fg-muted); } .midterm-machine button.mover:hover .mover-name-label { color: var(--mm-fg); text-decoration: underline; text-underline-offset: var(--mm-space-1); } .midterm-machine .mover-value { order: 2; white-space: nowrap; color: var(--mm-fg-subtle); } .midterm-machine .mover.up .mover-value { color: var(--mm-up); } .midterm-machine .mover.down .mover-value { color: var(--mm-down); } /* up and down said twice: the colour and the figure's sign, + or − (never colour alone; 19 Oct: no glyph as well) */ /* ---------- chart: in its module, named by a label, its legend under it ---------- */ .midterm-machine .screen { display: flex; flex-direction: column; min-width: 0; padding: var(--mm-space-0); background: none; } .midterm-machine .screen figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mm-space-2) var(--mm-space-4); min-height: var(--mm-pill-h); } .midterm-machine .screen-title { flex: 1 1 auto; } .midterm-machine :is(.screen-body, .market-body) { position: relative; flex: 1 1 0; min-height: 0; margin-top: var(--mm-space-4); } /* the map at its own shape, from the top of its box: no band of nothing over it (it was centred in a box taller than it); * where the screen is short, it shrinks to fit */ .midterm-machine .screen-body:has(> #map) { flex: 0 1 auto; } .midterm-machine #map { display: block; width: 100%; height: auto; max-height: 100%; } .midterm-machine #treemap { position: absolute; inset: 0; width: 100%; height: 100%; } .midterm-machine .legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-space-1) var(--mm-space-2); margin-top: var(--mm-space-3); } .midterm-machine .legend-bar { width: var(--mm-col-bar); height: var(--mm-rail); } .midterm-machine .legend-note { display: -webkit-box; -webkit-line-clamp: var(--mm-legend-lines); -webkit-box-orient: vertical; overflow: hidden; } .midterm-machine .legend-key { display: inline-flex; align-items: center; gap: var(--mm-space-1); margin-left: auto; } .midterm-machine .dot { width: var(--mm-rail); height: var(--mm-rail); border-radius: var(--mm-radius-round); } .midterm-machine .dot.dem { background: var(--mm-dem); } .midterm-machine .dot.rep { background: var(--mm-rep); } /* the map */ .midterm-machine .state { stroke: var(--mm-bg-window); stroke-width: var(--mm-map-edge); cursor: pointer; outline: none; } /* a state pointed at or opened is outlined inside its own edge, never across it (19 Oct): a copy of its shape, clipped * to the shape, stroked at twice the width, so all of the line falls inside and none is covered by a neighbour * (views.js edgeOf) */ .midterm-machine #map .edges { pointer-events: none; } /* its width is the screen's, not the map's (non-scaling), so it is as fine on a small map as a large one; pointed at, the * state lifts by the rows' hover layer and its outline comes in quickly */ .midterm-machine .state-edge { fill: var(--mm-state-hover); stroke: var(--mm-fg); stroke-width: calc(var(--mm-map-edge-hover) * 2); vector-effect: non-scaling-stroke; animation: mm-fade var(--mm-dur-fast) var(--mm-ease-out); } .midterm-machine .state-edge.selected { fill: none; stroke: var(--mm-pick); stroke-width: calc(var(--mm-map-edge-pick) * 2); animation: none; } .midterm-machine .state-label { font: var(--mm-type-map); fill: var(--mm-map-label-ink); text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--mm-map-halo); stroke-width: var(--mm-map-halo-w); } /* on a fill where dark words read better (views.js paintMap, by contrast): dark, without the halo */ .midterm-machine .state-label.on-light, .midterm-machine[data-panel] .state-value.on-light { fill: var(--mm-map-label-ink-dark); stroke: none; } .midterm-machine .state-label.callout { text-anchor: start; } .midterm-machine .state-label.callout-head { text-anchor: end; fill: var(--mm-fg-subtle); } /* one meaning per colour on the map: the stocks lens shows stocks only, so the Senate's leaders (party colours) are left to its own lens */ .midterm-machine .race-dot, .midterm-machine .legend-key { display: none; } /* where the moves are drawn in a pair that isn't the parties' (the default since 20 Oct; tokens.css), red means only the * Republicans, so the Senate's leaders are on the stocks lens as Tilt draws them; in TILT's green and red they are not */ .midterm-machine:not([data-palette="brand"]) .race-dot { display: inline; } .midterm-machine:not([data-palette="brand"]) .legend-key { display: inline-flex; align-items: center; gap: var(--mm-space-1); margin-left: auto; } .midterm-machine .race-dot { stroke: var(--mm-bg-window); stroke-width: var(--mm-map-dot-edge); pointer-events: none; } .midterm-machine .race-dot.called { stroke: var(--mm-pick); stroke-width: var(--mm-map-dot-pick); } /* a chart's readout, under the pointer: raised, as tilt.now's readout bubble */ .midterm-machine .tip { position: absolute; z-index: var(--mm-layer-tip); width: var(--mm-tip); max-width: 100%; padding: var(--mm-space-2) var(--mm-space-3); background: var(--mm-bg-overlay); color: var(--mm-fg); border: 0; border-radius: var(--mm-radius-pane); box-shadow: var(--mm-shadow-menu); pointer-events: none; } .midterm-machine .tip :is(strong, span) { display: block; } /* the rankings: lists on the ground */ .midterm-machine .strips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mm-space-8); } .midterm-machine .strip h3 { padding-bottom: var(--mm-space-2); border-bottom: var(--mm-line) solid var(--mm-border-subtle); } .midterm-machine .rows li, .midterm-machine .rows li button { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--mm-space-2); width: 100%; min-height: var(--mm-row-h-dense); } .midterm-machine .rows li { border-bottom: var(--mm-line) solid var(--mm-border-subtle); } /* a ranking as bars: each row's underline drawn to its size against the list's largest, in its direction's colour * (views.js sets --mm-bar and data-tone), so the order reads at a glance, as the sectors' bars do */ .midterm-machine .rows li[data-tone] { background-image: linear-gradient(var(--mm-bar-ink), var(--mm-bar-ink)); background-repeat: no-repeat; background-position: left bottom; background-size: calc(var(--mm-bar, 0) * 100%) var(--mm-rank-bar); } .midterm-machine .rows li[data-tone="up"] { --mm-bar-ink: var(--mm-up-bar); } .midterm-machine .rows li[data-tone="down"] { --mm-bar-ink: var(--mm-down-bar); } .midterm-machine .rows li button { padding: var(--mm-space-0); background: none; border: 0; text-align: left; } /* a ranking's two parts, each named: ahead of the market, behind it */ .midterm-machine .rows li.rows-head { display: block; min-height: 0; padding: var(--mm-space-3) var(--mm-space-0) var(--mm-space-1); border-bottom: 0; font: var(--mm-type-label); letter-spacing: var(--mm-tr-label); text-transform: uppercase; color: var(--mm-fg-subtle); } .midterm-machine .rows li.rows-head:first-child { padding-top: var(--mm-space-0); } .midterm-machine .rows li button:hover span:first-child { text-decoration: underline; text-underline-offset: var(--mm-space-1); } .midterm-machine .rows li button span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .midterm-machine .rows li:not(:has(button)) { grid-template-columns: var(--mm-col-code) minmax(0, 1fr) auto; } /* a stock's row in one shape at every width: its ticker and move on the first line, its name small under them */ .midterm-machine #mover-strip .rows li:not(.rows-head) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ticker move" "name name"; row-gap: var(--mm-space-0); padding: var(--mm-space-1) var(--mm-space-0); } .midterm-machine #mover-strip .rows li:not(.rows-head) .ticker { grid-area: ticker; } .midterm-machine #mover-strip .rows li:not(.rows-head) b { grid-area: move; } .midterm-machine #mover-strip .rows li:not(.rows-head) .mover-name { grid-area: name; padding: var(--mm-space-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .midterm-machine .rows li b { min-width: var(--mm-col-value); text-align: right; } /* a company's name whole, on two lines where its column is narrow (a name cut short reads as another company) */ .midterm-machine .rows .mover-name { padding: var(--mm-space-1) var(--mm-space-0); line-height: var(--mm-lead-12); text-wrap: pretty; } /* ---------- sheet: a state, a person, opened over the controls ---------- */ .midterm-machine .sheet { position: fixed; z-index: var(--mm-layer-sheet); top: var(--mm-space-0); right: var(--mm-space-0); bottom: var(--mm-space-0); width: min(var(--mm-sheet-phone), 100vw); overflow-y: auto; padding: var(--mm-pane-pad); background: var(--mm-bg-pane); color: var(--mm-fg); } /* a sheet's blocks: grouped, each on a raised ground (an inset list) */ .midterm-machine .sheet-block { margin-top: var(--mm-space-3); padding: var(--mm-space-3) var(--mm-space-4) var(--mm-space-4); background: var(--mm-bg-raised); border-radius: var(--mm-radius-pane); } .midterm-machine .sheet-block :is(.sheet-list li, .record :is(th, td)) { border-color: var(--mm-border); } .midterm-machine .sheet-block h4 { margin-bottom: var(--mm-space-1); } .midterm-machine .sheet-sub { margin-top: var(--mm-space-3); } .midterm-machine .sheet-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--mm-space-3); padding: var(--mm-space-1) var(--mm-space-0); border-bottom: var(--mm-line) solid var(--mm-border-subtle); } .midterm-machine .sheet-list li > span:last-child { text-align: right; } .midterm-machine .race-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(var(--mm-col-bar-sm), 1fr) var(--mm-col-odds); align-items: center; gap: var(--mm-space-1) var(--mm-space-3); padding: var(--mm-space-1) var(--mm-space-0); } .midterm-machine .race-odds { text-align: right; } .midterm-machine .race-venues { grid-column: 1 / -1; } .midterm-machine .race-moved { margin-top: var(--mm-space-2); } .midterm-machine .sheet .rule { margin: var(--mm-space-2) var(--mm-space-0); } .midterm-machine .sheet-block > .quiet { margin-top: var(--mm-space-1); } .midterm-machine .facts li { margin-top: var(--mm-space-2); } .midterm-machine .sheet details summary { margin-top: var(--mm-space-1); } .midterm-machine .sheet > div > .paper-button { margin-top: var(--mm-space-4); } /* a sheet's head: its name, then what it is; Close sits at its right */ .midterm-machine .sheet-head { display: grid; gap: var(--mm-space-1); min-height: var(--mm-pill-h); } .midterm-machine .sheet-head p { margin: var(--mm-space-0); } .midterm-machine .person .sheet-head { padding-left: var(--mm-space-3); border-left: var(--mm-line-strong) solid var(--mm-ind); } .midterm-machine .person.party-D .sheet-head { border-left-color: var(--mm-dem); } .midterm-machine .person.party-R .sheet-head { border-left-color: var(--mm-rep); } .midterm-machine .sheet-figure b { display: block; margin-bottom: var(--mm-space-1); font: var(--mm-type-figure); letter-spacing: var(--mm-tr-figure); } /* an employer: ticker and name, its move at the right; its revenue and its sites under the name */ .midterm-machine .employers li { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--mm-space-0); } .midterm-machine .employers li > span:first-child { grid-column: 1; grid-row: 1; } .midterm-machine .employers li > span:last-child { grid-column: 2; grid-row: 1; } .midterm-machine .employers li > span:nth-child(2) { grid-column: 1; grid-row: 2; text-align: left; font: var(--mm-type-meta); letter-spacing: var(--mm-tr-meta); } .midterm-machine .employers li > span:nth-child(2):empty { display: none; } .midterm-machine .employers .site { display: block; } .midterm-machine .employers b { display: inline-block; min-width: var(--mm-col-code); font: var(--mm-type-label); letter-spacing: var(--mm-tr-label); } /* a person's run: what their record would do, as a block with its action */ .midterm-machine .person-run { margin: var(--mm-space-4) var(--mm-space-0) var(--mm-space-0); padding: var(--mm-space-3) var(--mm-space-4) var(--mm-space-4); background: var(--mm-bg-raised); border-radius: var(--mm-radius-pane); } .midterm-machine .person-run b { display: block; margin-bottom: var(--mm-space-1); color: var(--mm-fg); } .midterm-machine .person-run .paper-button { display: flex; width: fit-content; margin-top: var(--mm-space-3); } /* a record: the measures as rows, a position as a tag */ .midterm-machine .record { margin-top: var(--mm-space-2); overflow-x: auto; } .midterm-machine .record table { width: 100%; border-collapse: collapse; } .midterm-machine .record caption { padding-bottom: var(--mm-space-1); text-align: left; } .midterm-machine .record table.one { margin-top: var(--mm-space-3); } .midterm-machine .record :is(th, td) { padding: var(--mm-space-2) var(--mm-space-3) var(--mm-space-2) var(--mm-space-0); text-align: left; vertical-align: top; border-top: var(--mm-line) solid var(--mm-border-subtle); } .midterm-machine .record thead th { border-top: 0; font: var(--mm-type-label); letter-spacing: var(--mm-tr-label); text-transform: uppercase; color: var(--mm-fg-subtle); } .midterm-machine .record tbody th { font: var(--mm-type-row); letter-spacing: var(--mm-tr-row); white-space: nowrap; } .midterm-machine .record thead th .name { font: var(--mm-type-row); letter-spacing: var(--mm-tr-row); text-transform: none; color: var(--mm-fg); } .midterm-machine .stance-basis { white-space: nowrap; color: var(--mm-fg-subtle); } .midterm-machine .stance.none { color: var(--mm-fg-subtle); } /* in a state's table, a position reads as the person's: its weight, the basis small; no record recedes, and the * measures nobody there holds fold into one row at the foot */ .midterm-machine .record td.stance { font: var(--mm-type-text); letter-spacing: var(--mm-tr-text); } .midterm-machine .record td.stance.none { font: var(--mm-type-meta); letter-spacing: var(--mm-tr-meta); } .midterm-machine .record td.stance .stance-basis { font: var(--mm-type-meta); letter-spacing: var(--mm-tr-meta); } .midterm-machine .record tr.none-row th { font: var(--mm-type-row); letter-spacing: var(--mm-tr-row); color: var(--mm-fg-muted); } .midterm-machine .record tr.none-row td { white-space: normal; } .midterm-machine .basis { display: inline-block; flex: none; width: var(--mm-rail); height: var(--mm-rail); margin-right: var(--mm-space-2); border: var(--mm-line) solid var(--mm-fg); border-radius: var(--mm-radius-round); } .midterm-machine .basis.record { background: var(--mm-fg); } .midterm-machine .basis.leaning { background: linear-gradient(to right, var(--mm-fg) 50%, transparent 50%); } .midterm-machine .basis-key { margin-top: var(--mm-space-3); } .midterm-machine .basis-key .basis { margin-left: var(--mm-space-2); } .midterm-machine .basis-key .basis:first-child { margin-left: var(--mm-space-0); } /* one person's record: two columns, the measure and what they stand for, the evidence under the position; * a measure with no record is one quiet line. The table's roles are written out, so it reads as a table. */ .midterm-machine .person-record thead { position: absolute; width: var(--mm-line); height: var(--mm-line); overflow: hidden; clip-path: inset(50%); } .midterm-machine .person-record, .midterm-machine .person-record tbody { display: block; } .midterm-machine .person-record tr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--mm-space-1) var(--mm-space-4); padding: var(--mm-space-3) var(--mm-space-0); border-top: var(--mm-line) solid var(--mm-border-subtle); } .midterm-machine .person-record tr.none { padding: var(--mm-space-2) var(--mm-space-0); } .midterm-machine .person-record :is(th, td) { padding: var(--mm-space-0); border: 0; } .midterm-machine .person-record tbody th { grid-row: 1 / span 2; white-space: normal; } .midterm-machine .person-record tr.none th { font-weight: var(--mm-regular); color: var(--mm-fg-muted); } .midterm-machine .person-record .stance { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mm-space-0) var(--mm-space-2); font: var(--mm-type-row); letter-spacing: var(--mm-tr-row); } .midterm-machine .person-record .stance .basis { align-self: center; margin-right: var(--mm-space-0); } .midterm-machine .person-record .stance-basis { font: var(--mm-type-meta); letter-spacing: var(--mm-tr-meta); } .midterm-machine .person-record .stance.none { font: var(--mm-type-meta); letter-spacing: var(--mm-tr-meta); white-space: nowrap; } .midterm-machine .person-record .proof { grid-column: 2; font: var(--mm-type-meta); letter-spacing: var(--mm-tr-meta); color: var(--mm-fg-muted); } .midterm-machine .person-record .proof:empty { display: none; } .midterm-machine .person-record .proof a { color: var(--mm-fg-subtle); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--mm-border-strong); } .midterm-machine .person-record .proof a:hover { color: var(--mm-fg); } /* ---------- dialog, menu, note, toast, the phone's result bar ---------- */ .midterm-machine dialog { width: min(var(--mm-dialog), 100vw - var(--mm-space-8)); max-height: calc(100vh - var(--mm-space-12)); padding: var(--mm-space-6) var(--mm-space-8) var(--mm-space-8); background: var(--mm-bg-pane); border: 0; border-radius: var(--mm-radius-pane); box-shadow: var(--mm-shadow-sheet); color: var(--mm-fg); } .midterm-machine dialog::backdrop { background: var(--mm-scrim); } /* How it works: a contents list, then a section per heading, each led by its step's number */ .midterm-machine dialog > form { position: sticky; top: var(--mm-space-0); z-index: var(--mm-layer-panel); display: flex; justify-content: flex-end; height: var(--mm-space-0); } .midterm-machine dialog .sheet-close { float: none; background: var(--mm-bg-overlay); box-shadow: var(--mm-shadow-menu); } .midterm-machine #method-body { display: grid; grid-template-columns: var(--mm-method-nav) minmax(0, 1fr); align-items: start; gap: var(--mm-space-6) var(--mm-space-8); } .midterm-machine #method-body > h2 { grid-column: 1 / -1; min-height: var(--mm-pill-h); } .midterm-machine .method-nav { position: sticky; top: var(--mm-space-0); grid-row: 2 / span 20; } .midterm-machine .method-nav ol { display: grid; gap: var(--mm-space-0); margin: var(--mm-space-0); padding: var(--mm-space-0); list-style: none; } .midterm-machine .method-nav a { display: flex; align-items: center; gap: var(--mm-space-2); min-height: var(--mm-row-h); padding: var(--mm-space-1) var(--mm-space-2); border-radius: var(--mm-radius); color: var(--mm-fg-muted); text-decoration: none; font: var(--mm-type-control-sm); letter-spacing: var(--mm-tr-control-sm); } .midterm-machine .method-nav a:hover { background: var(--mm-state-hover); color: var(--mm-fg); } .midterm-machine .method-nav a[aria-current] { background: var(--mm-state-selected); color: var(--mm-fg); } .midterm-machine :is(.method-nav, .method-part) .step-n.blank { background: none; border: var(--mm-line) solid var(--mm-border-strong); } .midterm-machine .method-part { grid-column: 2; padding-top: var(--mm-space-6); border-top: var(--mm-line) solid var(--mm-border-subtle); scroll-margin-top: var(--mm-space-0); } .midterm-machine .method-nav + .method-part { padding-top: var(--mm-space-0); border-top: 0; } .midterm-machine .method-part h3 { display: flex; align-items: center; gap: var(--mm-space-3); margin: var(--mm-space-0) var(--mm-space-0) var(--mm-space-3); } .midterm-machine .method-dot { position: absolute; width: var(--mm-line); height: var(--mm-line); overflow: hidden; clip-path: inset(50%); } .midterm-machine dialog p { margin-top: var(--mm-space-3); } .midterm-machine .method-part h3 + p { margin-top: var(--mm-space-0); color: var(--mm-fg); } .midterm-machine dialog .record { margin: var(--mm-space-4) var(--mm-space-0); } .midterm-machine .validation { font: var(--mm-type-meta); letter-spacing: var(--mm-tr-meta); } .midterm-machine .validation td { font: var(--mm-type-small); letter-spacing: var(--mm-tr-small); font-variant-numeric: tabular-nums; color: var(--mm-fg-muted); } .midterm-machine .validation thead th { vertical-align: bottom; text-transform: none; letter-spacing: var(--mm-tr-meta); font: var(--mm-type-meta); } .midterm-machine .validation tbody th { white-space: normal; font: var(--mm-type-meta); font-weight: var(--mm-medium); } .midterm-machine .share-menu { position: fixed; z-index: var(--mm-layer-menu); display: grid; min-width: var(--mm-menu-min); padding: var(--mm-space-1); background: var(--mm-bg-overlay); color: var(--mm-fg); border: 0; border-radius: var(--mm-radius-pane); box-shadow: var(--mm-shadow-menu); } .midterm-machine .share-menu button { min-height: var(--mm-pill-h); padding: var(--mm-space-1) var(--mm-space-3); background: none; border: 0; border-radius: var(--mm-radius); text-align: left; font: var(--mm-type-text); letter-spacing: var(--mm-tr-text); } .midterm-machine .share-menu button:is(:hover, :focus-visible) { background: var(--mm-state-hover); } .midterm-machine .shared-note { padding: var(--mm-space-3) var(--mm-space-6); background: var(--mm-pick); color: var(--mm-fg-on-light); } .midterm-machine .shared-note .link-button { margin-left: var(--mm-space-2); font-weight: var(--mm-semibold); text-decoration-color: currentColor; } .midterm-machine .toast { position: fixed; z-index: var(--mm-layer-toast); left: 50%; bottom: var(--mm-space-6); transform: translateX(-50%); max-width: min(var(--mm-toast), 100vw - var(--mm-space-8)); padding: var(--mm-space-3) var(--mm-space-4); background: var(--mm-fg); color: var(--mm-fg-on-light); border-radius: var(--mm-radius); } .midterm-machine .mini { display: none; } .midterm-machine :is(.mini, .tip, .share-menu) .down { color: var(--mm-down-overlay); } .midterm-machine .mini b { font: var(--mm-type-number); letter-spacing: var(--mm-tr-number); font-variant-numeric: tabular-nums; } .midterm-machine .mini .mini-lead { margin-right: var(--mm-space-3); } /* the share card is drawn for Tilt's link previews only (?card=, build_cards.py), in Tilt's own stylesheet */ .midterm-machine .share-card { display: none; } /* ---------- motion: things arrive, numbers count, a change is marked ---------- * One curve, a few times (tokens.css), all zero with reduced motion. Nothing cross-fades: a thing * arrives over what is there, or what is there changes in place. */ @keyframes mm-arrive { from { opacity: 0; translate: 0 var(--mm-rise); } } @keyframes mm-slide-in { from { opacity: 0; translate: calc(var(--mm-slide) * -1) 0; } } @keyframes mm-fade { from { opacity: 0; } } /* what appears over content arrives solid, never see-through (18 Oct): a menu unfolds from its top edge, a bar or the * toast slides in from the edge it belongs to, the dialog appears whole and settles in size; only a scrim fades */ @keyframes mm-unfold { from { clip-path: inset(0 0 100% 0); translate: 0 calc(var(--mm-rise) * -1); } } @keyframes mm-from-foot { from { translate: 0 calc(100% + var(--mm-space-6)); } } @keyframes mm-from-top { from { translate: 0 -100%; } } @keyframes mm-rise-in { from { translate: 0 var(--mm-sheet-half); } } /* a sheet over the controls slides in from the window's edge, a solid pane (no fade); on a phone up from the foot as * its scrim darkens; the dialog grows a little as it arrives */ @keyframes mm-sheet-in { from { translate: calc(-100% - var(--mm-pane-gap)) 0; } } @keyframes mm-sheet-up { from { translate: 0 100%; box-shadow: 0 0 0 100vmax transparent; } } @keyframes mm-settle { from { scale: var(--mm-pop); } } @keyframes mm-flash { from { background-color: var(--mm-flash); box-shadow: 0 0 0 var(--mm-space-2) var(--mm-flash); } to { box-shadow: 0 0 0 var(--mm-space-2) transparent; } } @keyframes mm-flash-row { from { background-color: var(--mm-flash); } } @keyframes mm-pulse { 50% { opacity: 0.5; } } /* the map's states recolour together as the case changes */ .midterm-machine :is(.state, .race-dot) { transition: fill var(--mm-dur-slow) var(--mm-ease), stroke var(--mm-dur-fast) var(--mm-ease); } /* what floats arrives: a menu, a tip, the share menu, the toast, the dialog, a sheet, the phone's result bar */ .midterm-machine :is(.finder ul, .share-menu):not([hidden]) { animation: mm-unfold var(--mm-dur-base) var(--mm-ease-out); } .midterm-machine .toast:not([hidden]) { animation: mm-from-foot var(--mm-dur-spring) var(--mm-ease-spring); } .midterm-machine dialog[open] { animation: mm-settle var(--mm-dur-spring) var(--mm-ease-spring); } .midterm-machine dialog[open]::backdrop { animation: mm-fade var(--mm-dur-slow) var(--mm-ease-out); } .midterm-machine .sheet:not([hidden]) { animation: mm-slide-in var(--mm-dur-slow) var(--mm-ease-out); } @media (min-width: 701px) { .midterm-machine .sheet:not([hidden]) { animation: mm-sheet-in var(--mm-dur-spring) var(--mm-ease-spring); } } /* its content travels with it; a new state or person in an open sheet arrives in place, the sheet staying put (handover) */ .midterm-machine .sheet.handover #sheet-body { animation: mm-arrive var(--mm-dur-slow) var(--mm-ease-out); } .midterm-machine .mini:not(.away) { animation: mm-from-foot var(--mm-dur-spring) var(--mm-ease-spring); } /* a bill opening: its parts arrive under its name, once, on the press that opens it */ .midterm-machine .measure.opening-card > :not(header), .midterm-machine .measure.opening-card :is(.votes, .m-foot) > *, .midterm-machine .measure.opening-card .m-more { animation: mm-arrive var(--mm-dur-slow) var(--mm-ease-out) backwards; } .midterm-machine .measure.opening-details .m-details { animation: mm-arrive var(--mm-dur-slow) var(--mm-ease-out) backwards; } /* a block whose number changed: marked in the marker's yellow, faint, then let go (the number counts in views.js) */ .midterm-machine .changed { border-radius: var(--mm-radius); animation: mm-flash var(--mm-dur-flash) var(--mm-ease); } .midterm-machine .measure.changed { animation-name: mm-flash-row; } /* a press: the control gives a little */ /* a press: down at once, back on the press spring (a hair past, then settled) */ .midterm-machine :is(.solid-button, .paper-button, .sheet-close, .rule button, .tries button, .views button, .lens button, .chip, .head-tool, .head-action) { transition: background var(--mm-dur-fast) var(--mm-ease), color var(--mm-dur-fast) var(--mm-ease), scale var(--mm-dur-press) var(--mm-ease-press); } .midterm-machine :is(.solid-button, .paper-button, .sheet-close, .rule button, .tries button, .views button, .lens button, .chip, .head-tool, .head-action):active { scale: var(--mm-press); transition: background var(--mm-dur-fast) var(--mm-ease), color var(--mm-dur-fast) var(--mm-ease), scale var(--mm-dur-fast) var(--mm-ease); } /* a list whose rows move keeps their layers to itself */ .midterm-machine [data-mo-scope] { isolation: isolate; } /* the pick's check arrives with the pick */ .midterm-machine .world[aria-checked="true"] .world-check { transition: scale var(--mm-dur-base) var(--mm-ease-out); } /* a pane's head, once its body scrolls under it: a hairline at its foot, drawn by the scroll itself (Apple's scroll edge; where a browser can't, no line) */ @keyframes mm-edge { to { box-shadow: 0 var(--mm-line) 0 var(--mm-border-subtle); } } /* a pane that scrolls fades at its foot while there is more below, and not once its end is reached */ @keyframes mm-cut { from, 96% { --mm-cut: var(--mm-fade-h); } to { --mm-cut: var(--mm-space-0); } } @supports (animation-timeline: scroll()) { .midterm-machine .step > h2 { animation: mm-edge linear both; animation-timeline: scroll(nearest); animation-range: 0 var(--mm-space-6); } .midterm-machine .step { animation: mm-cut linear both; animation-timeline: scroll(self); -webkit-mask-image: linear-gradient(to bottom, var(--mm-mask) calc(100% - var(--mm-cut)), transparent); mask-image: linear-gradient(to bottom, var(--mm-mask) calc(100% - var(--mm-cut)), transparent); } } /* scrolling to a thing glides there */ .midterm-machine :is(.step, .floor > .machine, .sheet) { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { .midterm-machine :is(.step, .floor > .machine, .sheet) { scroll-behavior: auto; } } /* while the data loads: the shapes it will fill, breathing */ .midterm-machine :where(.worlds, .measures, #readouts, #answer):empty { min-height: var(--mm-row-h); border-radius: var(--mm-radius); background: var(--mm-tint); animation: mm-pulse var(--mm-dur-pulse) var(--mm-ease) infinite; } .midterm-machine #answer:empty { width: 100%; max-width: var(--mm-measure-answer); min-height: var(--mm-lead-32); } .midterm-machine .worlds:empty { min-height: calc(var(--mm-row-h) * 4); } .midterm-machine .measures:empty { min-height: calc(var(--mm-row-h) * 8); } .midterm-machine #readouts:empty { min-height: var(--mm-lead-48); } /* layering (18 Oct): what goes under a panel recedes toward the window, what comes over stays bright and solid. The * controls recede as a sheet slides over them and come back as it leaves, on the panel's spring */ .midterm-machine .floor :is(.step, #passes) { transition: opacity var(--mm-dur-spring) var(--mm-ease-spring); } @media (min-width: 701px) { .midterm-machine[data-sheet] .floor :is(.step, #passes) { opacity: var(--mm-recede); } } /* ---- styles/layout.css ---- */ /* The Midterm Machine, proposed: layout (see README.md in this folder) * * The app frame, as Spotify's desktop app: a black window, a bar across the top with search centred in * it, and panes on the black, a gap apart and round, at 8 corners, each scrolling on its own under a * head pinned to its top. The panes are the page's three steps, read in order: * * from 1181 the frame in layouts.css: three columns from 1440, the controls as one rail to 1439 * 701-1180 1 over 2, in one column | 3 What it does 1 takes what it needs, at most half * to 700 3, then 1, then 2, one under another; the result pinned to the foot once it scrolls away * * A state or a person opens as a pane over the controls. Breakpoints: 1440, 1180, 900, 700. */ /* ---------- the bar: Tilt's mark, the page's name over the odds' time; search centred; How it works and Share ---------- */ .midterm-machine .masthead { position: sticky; top: var(--mm-space-0); z-index: var(--mm-layer-bar); height: var(--mm-bar); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "mark title how share" "mark stamp how share"; align-content: center; align-items: center; column-gap: var(--mm-space-3); padding: var(--mm-space-0) calc(var(--mm-pane-gap) + var(--mm-pane-pad)) var(--mm-space-0) calc(var(--mm-pane-gap) + var(--mm-pane-pad)); background: var(--mm-bg-window); } .midterm-machine .masthead::before { content: ""; grid-area: mark; width: var(--mm-mark-w); height: var(--mm-mark-h); background: var(--mm-fg); -webkit-mask: var(--mm-mark) center / contain no-repeat; mask: var(--mm-mark) center / contain no-repeat; } .midterm-machine :is(.masthead-title, .masthead-actions) { display: contents; } .midterm-machine .masthead h1 { grid-area: title; min-width: 0; color: var(--mm-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .midterm-machine .deck { display: none; } .midterm-machine .stamp { grid-area: stamp; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .midterm-machine #open-method { grid-area: how; } .midterm-machine #share { grid-area: share; } /* ---------- a pane: a step, its head pinned, its body scrolling ---------- */ /* the controls hold no box of their own: search and the two steps are laid out by the frame */ .midterm-machine .paper { display: contents; } .midterm-machine .step, .midterm-machine .floor > .machine { min-width: 0; background: var(--mm-bg-pane); border-radius: var(--mm-radius-pane); } .midterm-machine .step { padding: var(--mm-space-0) var(--mm-pane-pad) var(--mm-pane-pad); } /* the head: the step's number and title, at the pane's top while its body scrolls under it */ .midterm-machine .step > h2 { position: sticky; top: var(--mm-space-0); z-index: var(--mm-layer-panel); min-height: var(--mm-pane-header-h); margin: var(--mm-space-0) calc(var(--mm-pane-pad) * -1); padding: var(--mm-space-0) var(--mm-pane-pad); background: var(--mm-bg-pane); } .midterm-machine .step > .step-note { margin-top: var(--mm-space-0); } .midterm-machine .finder { background: var(--mm-bg-window); } /* ---------- the case: a twelve-column grid in its pane, everything on it, left-aligned ---------- * 24 margin, 8 gutters, columns fluid. Its head level with the other panes'; the answer across eight; * the S&P 500 across twelve, the screen's one large number; the three movers four columns each; the * picture across twelve, as tall as the pane, which scrolls to it; the rankings four columns each. */ .midterm-machine .machine { display: grid; grid-template-columns: repeat(var(--mm-grid-cols), minmax(0, 1fr)); column-gap: var(--mm-grid-gutter); align-content: start; grid-auto-rows: max-content; } /* each row as tall as what it holds: in the pane, which scrolls, rows were otherwise held to a block's minimum (the rankings' note was drawn over the third list) */ .midterm-machine .machine > * { grid-column: 1 / -1; min-width: 0; } .midterm-machine .machine-head { display: grid; justify-items: start; row-gap: var(--mm-space-3); } .midterm-machine .machine-head h2 { justify-self: stretch; min-height: var(--mm-pane-header-h); } .midterm-machine .answer { max-width: var(--mm-measure-answer); color: var(--mm-fg); text-wrap: balance; } .midterm-machine .machine-note { max-width: var(--mm-measure-text); color: var(--mm-fg-muted); } /* the figures: the S&P 500 alone on its row, then the three movers */ .midterm-machine .readouts { display: grid; grid-template-columns: subgrid; align-items: start; margin-top: var(--mm-space-8); } .midterm-machine .readout.lead { grid-column: 1 / -1; } .midterm-machine .readouts > .movers { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: var(--mm-space-0) var(--mm-grid-gutter); margin-top: var(--mm-space-6); padding-top: var(--mm-space-6); border-top: var(--mm-line) solid var(--mm-border-subtle); } .midterm-machine .mover { grid-column: span 4; } .midterm-machine .machine > .readouts-note { order: 9; margin-top: var(--mm-space-3); color: var(--mm-fg-subtle); } /* the method is said once, in the colophon; the economy under the figures, as Tilt says it, as the figures' own last * line (views.js .readouts-economy, the same words as #outcomes-note: in every outcome the U.S. economy barely moves) */ .midterm-machine .machine > .readouts-note:not([id]), .midterm-machine #outcomes-note { display: none; } .midterm-machine .readouts > .readouts-economy { display: none; } /* the picture: its switch at the leading edge, over it */ .midterm-machine .views { display: flex; margin-top: var(--mm-space-12); } .midterm-machine .screen figcaption .screen-title { color: var(--mm-fg); } /* one picture at a time; the others stay laid out, hidden, so each draws at its size */ .midterm-machine .machine > .screens { position: relative; height: var(--mm-screen-tall); min-height: var(--mm-screen-min); margin-top: var(--mm-space-6); } .midterm-machine .machine > .screens > .screen { position: absolute; inset: 0; } .midterm-machine .machine:not([data-view="market"]) .screen:nth-child(2), .midterm-machine .machine[data-view="market"] .screen:nth-child(1) { visibility: hidden; } .midterm-machine .machine[data-view="lists"] > .screens { display: none; } .midterm-machine .machine > .strips { display: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--mm-strip-min)), 1fr)); gap: var(--mm-space-8) var(--mm-space-6); min-height: var(--mm-screen-min); margin-top: var(--mm-space-6); align-content: start; } .midterm-machine .machine[data-view="lists"] > .strips { display: grid; } .midterm-machine .colophon { color: var(--mm-fg-subtle); } .midterm-machine .colophon-reserve { display: none; } /* the note on points belongs to the stocks: not under a race lens */ .midterm-machine .machine[data-view="map"]:has([data-lens="races"][aria-pressed="true"], [data-lens="governors"][aria-pressed="true"]) > #points-note { display: none; } /* ---------- the frame, from a tablet up ---------- */ @media (min-width: 701px) { .midterm-machine { position: fixed; inset: var(--mm-app-top) 0 var(--mm-app-bottom) 0; z-index: var(--mm-layer-canvas); display: grid; grid-template-rows: var(--mm-bar) auto minmax(0, 1fr); overflow: hidden; background: var(--mm-bg-window); } .midterm-machine .masthead { grid-row: 1; } .midterm-machine .shared-note { grid-row: 2; } /* 1 over 2 in one column, 3 beside them, to the window's foot; the small print under 3 */ .midterm-machine .floor { grid-row: 3; min-height: 0; display: grid; gap: var(--mm-pane-gap); padding: var(--mm-space-0) var(--mm-pane-gap) var(--mm-pane-gap); grid-template-columns: var(--mm-controls-w) minmax(0, 1fr); grid-template-rows: fit-content(var(--mm-wins-max)) minmax(0, 1fr); } .midterm-machine .step { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .midterm-machine .step:first-of-type { grid-column: 1; grid-row: 1; min-height: 0; } .midterm-machine #passes { grid-column: 1; grid-row: 2; } .midterm-machine .floor > .machine { grid-column: 2; grid-row: 1 / -1; overflow-y: auto; scrollbar-width: thin; margin-bottom: max(var(--mm-colophon-h), var(--mm-colophon-fit, var(--mm-space-0))); padding: var(--mm-space-0) var(--mm-grid-margin) var(--mm-grid-margin); } /* the small print hangs from the top of its strip, so a line more or less grows downward and nothing above it moves. * It is never cut (19 Oct: where the case is narrow it ran past four lines and lost Tilt's caveat): the strip is as * tall as its words, and the case ends where it begins (app.js measures it, --mm-colophon-fit) */ .midterm-machine .colophon { position: absolute; left: var(--mm-case-x); right: var(--mm-pane-gap); bottom: var(--mm-space-0); min-height: var(--mm-colophon-h); display: grid; align-items: start; padding: var(--mm-space-3) var(--mm-grid-margin) var(--mm-space-0); } .midterm-machine .colophon p { max-width: var(--mm-measure-meta); } /* the words and their longest form in one cell: the strip is as tall as the longest, so a scenario never moves it */ .midterm-machine .colophon > p { grid-area: 1 / 1; } .midterm-machine .colophon > .colophon-reserve { display: block; visibility: hidden; } /* the result, pinned to the top of the case's pane once its figures scroll away (app.js sets data-result-away) */ .midterm-machine[data-result-away] .mini { position: fixed; z-index: var(--mm-layer-mini); top: calc(var(--mm-app-top) + var(--mm-bar)); left: var(--mm-case-x); right: var(--mm-pane-gap); display: flex; align-items: center; justify-content: space-between; gap: var(--mm-space-3); min-height: var(--mm-pane-header-h); padding: var(--mm-space-0) var(--mm-grid-margin); background: var(--mm-bg-pane); color: var(--mm-fg); border-radius: var(--mm-radius-pane) var(--mm-radius-pane) var(--mm-space-0) var(--mm-space-0); box-shadow: 0 var(--mm-line) 0 var(--mm-border-subtle); text-decoration: none; animation: mm-from-top var(--mm-dur-base) var(--mm-ease-out); } /* and the picture's switch stays with it, pinned under it: the two are the case's toolbar while the picture is on screen */ .midterm-machine .views { position: sticky; top: var(--mm-pane-header-h); z-index: var(--mm-layer-panel); margin-inline: calc(var(--mm-grid-margin) * -1); padding: var(--mm-space-2) var(--mm-grid-margin); background: var(--mm-bg-pane); } /* one line at any width: the sentence gives way (an ellipsis), See it never wraps */ .midterm-machine[data-result-away] .mini > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .midterm-machine[data-result-away] .mini > span:last-child { flex: none; white-space: nowrap; color: var(--mm-fg-muted); text-decoration: underline; text-decoration-color: var(--mm-border-strong); text-underline-offset: var(--mm-space-1); } /* a state, a person: a pane over the controls, at their size */ .midterm-machine .sheet { top: calc(var(--mm-app-top) + var(--mm-bar)); left: var(--mm-pane-gap); right: auto; bottom: calc(var(--mm-pane-gap) + var(--mm-app-bottom)); width: calc(var(--mm-case-x) - var(--mm-pane-gap) * 2); border-radius: var(--mm-radius-pane); } .midterm-machine .toast { bottom: calc(var(--mm-space-6) + var(--mm-app-bottom)); } } /* the controls hidden (the case's head, Hide controls): the case alone, the window's width; it grows into place as a view transition where the browser has one */ @media (min-width: 701px) { .midterm-machine[data-focus] .floor { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } .midterm-machine[data-focus] :is(.step, #passes) { display: none; } .midterm-machine[data-focus] .floor > .machine { grid-column: 1; grid-row: 1; } .midterm-machine .floor > .machine { view-transition-name: mm-case; } .midterm-machine .step:first-of-type { view-transition-name: mm-wins; } .midterm-machine #passes { view-transition-name: mm-passes; } .midterm-machine .finder { view-transition-name: mm-finder; } .midterm-machine .colophon { view-transition-name: mm-colophon; } /* the case's parts, each its own layer, so they travel with the pane instead of leaving it (19 Oct) */ :where(.midterm-machine .floor > .machine) > :where(.machine-head, #readouts, .views), :where(.midterm-machine .floor > .machine) > :where(.screens, .strips) > *, :where(.midterm-machine .floor > .machine) :where(#map, #treemap, .lens, #legend, #market-legend, .machine-head .head-actions), :where(.midterm-machine .colophon) { view-transition-class: mm-part; } .midterm-machine .floor > .machine > .machine-head { view-transition-name: mm-head; view-transition-class: mm-part mm-holder; } .midterm-machine .floor > .machine .machine-head .head-actions { view-transition-name: mm-actions; view-transition-class: mm-part mm-pin mm-swap; } .midterm-machine .floor > .machine > #readouts { view-transition-name: mm-readouts; } .midterm-machine .floor > .machine > .views { view-transition-name: mm-views; } /* only what is on screen: a picture not showing is no part (it would be drawn solid over the one showing) */ .midterm-machine .floor > .machine[data-view="map"] > .screens > .screen:first-child { view-transition-name: mm-screen-map; view-transition-class: mm-part mm-holder; } .midterm-machine .floor > .machine[data-view="market"] > .screens > .screen:last-child { view-transition-name: mm-screen-market; view-transition-class: mm-part mm-holder; } .midterm-machine .floor > .machine[data-view="map"] #map { view-transition-name: mm-map; view-transition-class: mm-part mm-picture; } .midterm-machine .floor > .machine[data-view="market"] #treemap { view-transition-name: mm-treemap; } .midterm-machine .floor > .machine[data-view="map"] .lens { view-transition-name: mm-lens; view-transition-class: mm-part mm-pin; } .midterm-machine .floor > .machine[data-view="map"] #legend { view-transition-name: mm-legend; } .midterm-machine .floor > .machine[data-view="market"] #market-legend { view-transition-name: mm-legend-market; } .midterm-machine .floor > .machine > .strips > * { view-transition-class: mm-part mm-strip; } .midterm-machine .floor > .machine #state-strip { view-transition-name: mm-states; } .midterm-machine .floor > .machine #sector-strip { view-transition-name: mm-sectors; } .midterm-machine .floor > .machine #mover-strip { view-transition-name: mm-movers; } /* a list beside the map in both frames is carried, solid, over the lists arriving (app.js marks it for the transition) */ .midterm-machine .floor > .machine > .strips > [data-mo-carried] { view-transition-class: mm-part mm-strip mm-carried; } /* where the frame keeps the controls as a rail, the lens changes rows, so it hands over, and the search is the rail's: it goes and comes back with the controls */ .midterm-machine:is([data-frame="rail"], [data-frame="stack"]) .floor > .machine[data-view="map"] .lens { view-transition-class: mm-part mm-pin mm-swap; } .midterm-machine:is([data-frame="rail"], [data-frame="stack"]):not([data-focus]) .finder { view-transition-name: mm-finder-rail; } /* the stocks as a tape and as a list are two things: one gives way to the other */ .midterm-machine[data-tape] .floor > .machine #mover-strip { view-transition-name: mm-tape; } } /* Hide controls / Show controls (motion.js focusStage sets the html's --mm-vt-* from the tokens), 19 Oct: one surface * moving. The case's pane, solid, widens or narrows on the spring and the controls travel with its edge, receding as they * go and coming back bright. What the case holds goes with it, on the same spring: the head, the figures, the switch, * the legend and the lists ride the edge at their own size (drawn as they will be, never stretched, cut at their own * box); the map grows or shrinks into its new size; the lens and the case's actions keep to their own edge. Only what * changes kind hands over: what leaves goes at once, what arrives settles in once the pane has mostly arrived, so nothing * is ever drawn twice or see-through over something else */ ::view-transition-group(mm-case) { overflow: clip; background: var(--mm-vt-ground); border-radius: var(--mm-vt-radius); } ::view-transition-group(mm-colophon) { background: var(--mm-vt-ground); } :root:is(.mm-hiding, .mm-showing)::view-transition-group(mm-case), :root:is(.mm-hiding, .mm-showing)::view-transition-group(*.mm-part) { animation-duration: var(--mm-vt-spring); animation-timing-function: var(--mm-vt-spring-ease); } /* the pane itself: what of it is not a part of its own clears and settles */ :root:is(.mm-hiding, .mm-showing)::view-transition-old(mm-case) { animation: mm-vt-clear var(--mm-vt-fast) var(--mm-vt-in) both; } :root:is(.mm-hiding, .mm-showing)::view-transition-new(mm-case) { animation: mm-vt-settle var(--mm-vt-slow) var(--mm-vt-out) var(--mm-vt-delay) both; } :root.mm-hiding::view-transition-new(mm-case) { animation: mm-vt-settle var(--mm-vt-slow) var(--mm-vt-out) var(--mm-vt-delay) both, mm-vt-uncover var(--mm-vt-spring) var(--mm-vt-spring-ease) both; } :root.mm-showing::view-transition-old(mm-case) { animation: mm-vt-clear var(--mm-vt-fast) var(--mm-vt-in) both, mm-vt-cover var(--mm-vt-spring) var(--mm-vt-spring-ease) both; } ::view-transition-old(mm-case), ::view-transition-new(mm-case) { inset: 0 0 auto auto; width: auto; height: auto; } ::view-transition-image-pair(mm-case) { overflow: clip; clip-path: inset(0); } /* a part in both: drawn as it will be from the first frame, carried; a part leaving or arriving: hands over */ :root:is(.mm-hiding, .mm-showing)::view-transition-old(*.mm-part) { animation: mm-vt-gone var(--mm-vt-spring) step-start both; } :root:is(.mm-hiding, .mm-showing)::view-transition-new(*.mm-part) { animation: none; opacity: 1; } :root:is(.mm-hiding, .mm-showing)::view-transition-old(*.mm-part):only-child { animation: mm-vt-clear var(--mm-vt-quick) var(--mm-vt-out) both; } :root:is(.mm-hiding, .mm-showing)::view-transition-new(*.mm-part):only-child { animation: mm-vt-settle var(--mm-vt-slow) var(--mm-vt-out) var(--mm-vt-delay) both; } ::view-transition-old(*.mm-part), ::view-transition-new(*.mm-part) { inset: 0 auto auto 0; width: auto; height: auto; } /* what is carried is solid and travels over what hands over (the lists, the tape), so a part leaving is covered by the * surface coming over it, never seen through it */ :root:is(.mm-hiding, .mm-showing)::view-transition-group(*.mm-part) { z-index: var(--mm-vt-layer); background: var(--mm-vt-ground); } :root:is(.mm-hiding, .mm-showing)::view-transition-group(*.mm-strip) { z-index: auto; background: none; } :root:is(.mm-hiding, .mm-showing)::view-transition-group(*.mm-strip.mm-carried) { z-index: var(--mm-vt-layer-under); background: var(--mm-vt-ground); } /* a part that holds parts (the head, each screen) is under them */ :root:is(.mm-hiding, .mm-showing)::view-transition-group(*.mm-holder) { z-index: var(--mm-vt-layer-under); background: none; } ::view-transition-image-pair(*.mm-part) { overflow: clip; clip-path: inset(0); } /* the map: the same map at a new size, so it scales (the market map is laid out again for its size: drawn as it will * be, it is uncovered like the rest) */ ::view-transition-old(*.mm-picture), ::view-transition-new(*.mm-picture) { width: 100%; height: auto; } /* the lens and the actions keep to their trailing edge */ ::view-transition-old(*.mm-pin), ::view-transition-new(*.mm-pin) { inset: 0 0 auto auto; } /* what changes its label or its row hands over in place of travelling: the case's actions (Hide, Show), and the lens * and the search where the rail keeps them */ :root:is(.mm-hiding, .mm-showing)::view-transition-old(*.mm-swap) { animation: mm-vt-clear var(--mm-vt-quick) var(--mm-vt-out) both; } :root:is(.mm-hiding, .mm-showing)::view-transition-new(*.mm-swap) { animation: mm-vt-settle var(--mm-vt-slow) var(--mm-vt-out) var(--mm-vt-delay) both; } :root:is(.mm-hiding, .mm-showing)::view-transition-new(mm-actions.mm-swap) { animation-delay: var(--mm-vt-fast); } /* the search where it is only in one of the two frames: in the bar it arrives or leaves; in the rail, it goes with it */ :root:is(.mm-hiding, .mm-showing)::view-transition-old(mm-finder):only-child { animation: mm-vt-clear var(--mm-vt-quick) var(--mm-vt-out) both; } :root:is(.mm-hiding, .mm-showing)::view-transition-new(mm-finder):only-child { animation: mm-vt-settle var(--mm-vt-slow) var(--mm-vt-out) var(--mm-vt-delay) both; } :root:is(.mm-hiding, .mm-showing)::view-transition-group(mm-finder-rail) { animation: none; } :root.mm-hiding::view-transition-old(mm-finder-rail), :root.mm-hiding::view-transition-old(mm-wins), :root.mm-hiding::view-transition-old(mm-passes) { animation: mm-vt-aside var(--mm-vt-spring) var(--mm-vt-spring-ease) both; } :root.mm-showing::view-transition-new(mm-finder-rail), :root.mm-showing::view-transition-new(mm-wins), :root.mm-showing::view-transition-new(mm-passes) { animation: mm-vt-home var(--mm-vt-spring) var(--mm-vt-spring-ease) both; } @keyframes mm-vt-clear { to { opacity: 0; } } @keyframes mm-vt-gone { from, to { opacity: 0; } } @keyframes mm-vt-uncover { from { clip-path: inset(0 0 0 calc(var(--mm-vt-dx) * -1)); } to { clip-path: inset(0); } } @keyframes mm-vt-cover { from { clip-path: inset(0); } to { clip-path: inset(0 0 0 calc(var(--mm-vt-dx) * -1)); } } @keyframes mm-vt-settle { from { opacity: 0; translate: 0 var(--mm-vt-rise); } } @keyframes mm-vt-aside { to { translate: var(--mm-vt-dx) 0; opacity: var(--mm-vt-recede); } } @keyframes mm-vt-home { from { translate: var(--mm-vt-dx) 0; opacity: var(--mm-vt-recede); } } /* search in the bar, centred, from where the bar has room */ @media (min-width: 901px) { /* the result in one row, so the picture starts on the first screen: the S&P 500 at the leading edge, the three * movers stacked beside it, a hairline between; the picture's switch closer under them */ .midterm-machine .readout.lead { grid-column: 1 / span 5; } .midterm-machine .readouts > .movers { grid-column: 6 / -1; grid-template-columns: minmax(0, 1fr); gap: var(--mm-space-3); margin-top: var(--mm-space-0); padding: var(--mm-space-0) var(--mm-space-0) var(--mm-space-0) var(--mm-space-6); border-top: 0; border-left: var(--mm-line) solid var(--mm-border-subtle); } .midterm-machine .readouts .mover { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "side value" "name value"; align-items: center; column-gap: var(--mm-space-3); row-gap: var(--mm-space-0); grid-column: auto; } .midterm-machine .readouts .mover-side { grid-area: side; } .midterm-machine .readouts .mover-name-label { grid-area: name; } .midterm-machine .readouts .mover-value { grid-area: value; } .midterm-machine .readouts { margin-top: var(--mm-space-6); } .midterm-machine .views { margin-top: var(--mm-space-8); } .midterm-machine .machine > .screens { margin-top: var(--mm-space-4); } .midterm-machine .finder { position: fixed; z-index: var(--mm-layer-bar-search); top: calc(var(--mm-app-top) + (var(--mm-bar) - var(--mm-search-h)) / 2); left: 50%; width: var(--mm-search-w); padding: var(--mm-space-0); background: none; transform: translateX(-50%); } .midterm-machine .finder input { min-height: var(--mm-search-h); padding: var(--mm-space-0) var(--mm-space-4); } .midterm-machine :is(.masthead h1, .stamp) { max-width: calc(50vw - var(--mm-search-w) / 2 - var(--mm-mark-w) - var(--mm-pane-gap) - var(--mm-pane-pad) - var(--mm-space-6)); } } /* a narrow tablet: search over the controls, in the column */ @media (min-width: 701px) and (max-width: 900px) { .midterm-machine[data-focus] .finder { display: none; } /* a sheet opens under search, so a second lookup needs no close first */ .midterm-machine .sheet { top: calc(var(--mm-app-top) + var(--mm-bar) + var(--mm-search-h) + var(--mm-space-4)); } .midterm-machine .floor { grid-template-rows: auto fit-content(var(--mm-wins-max)) minmax(0, 1fr); } /* its results over the steps under it (19 Oct, found by the QA pass: the steps' heads covered them, so a state could * not be picked from search on an upright iPad) */ .midterm-machine .finder { grid-column: 1; grid-row: 1; position: relative; z-index: var(--mm-layer-search); } .midterm-machine .step:first-of-type { grid-row: 2; } .midterm-machine #passes { grid-row: 3; } .midterm-machine .floor > .machine { grid-row: 1 / -1; } } /* ---------- a tablet: the rankings and the movers stack ---------- */ @media (min-width: 701px) and (max-width: 1180px) { .midterm-machine .in-congress { grid-template-columns: minmax(0, 1fr); } } /* ---------- a phone: one column, the result first ---------- */ @media (max-width: 700px) { .midterm-machine { min-height: 100vh; } /* the bar: Tilt's mark, the page's name over the odds' time, How it works as a symbol, Share */ .midterm-machine .masthead { column-gap: var(--mm-space-2); padding: var(--mm-space-0) var(--mm-space-3); } /* the odds' time in the meta role, so it reads whole on a phone (mono capitals would run it past the bar) */ .midterm-machine .stamp { font: var(--mm-type-meta); letter-spacing: var(--mm-tr-meta); text-transform: none; color: var(--mm-fg-muted); white-space: normal; overflow: visible; } .midterm-machine #open-method { justify-content: center; width: var(--mm-pill-h); font-size: var(--mm-space-0); text-decoration: none; } .midterm-machine #open-method::before { content: ""; width: var(--mm-check-w); height: var(--mm-check-w); background: var(--mm-fg); -webkit-mask: var(--mm-info) center / contain no-repeat; mask: var(--mm-info) center / contain no-repeat; } /* Share as a symbol too, so the odds' time has the bar's room (its name stays for a screen reader) */ .midterm-machine #share { justify-content: center; width: var(--mm-pill-h); padding: var(--mm-space-0); font-size: var(--mm-space-0); } .midterm-machine #share::before { content: ""; width: var(--mm-check-w); height: var(--mm-check-w); background: var(--mm-bg-pane); -webkit-mask: var(--mm-share) center / contain no-repeat; mask: var(--mm-share) center / contain no-repeat; } /* the panes, one under another: the result, search, 1, 2, the picture */ .midterm-machine .floor { display: flex; flex-direction: column; gap: var(--mm-pane-gap); padding: var(--mm-space-0) var(--mm-pane-gap) var(--mm-space-12); } /* the case in two parts around the steps: the result first, then 1 and 2 (so what you pick is on the first screen * and its effect a scroll up, or in the bar at the foot), then the picture. The case's blocks are the floor's own * items (display: contents), each on the pane's ground, joined into two panes. */ .midterm-machine .floor > .machine { display: contents; } .midterm-machine .machine > :is(.machine-head, .readouts, .views, .screens, .strips, #points-note) { margin-inline: var(--mm-space-0); padding-inline: var(--mm-grid-margin); background: var(--mm-bg-pane); } .midterm-machine .machine > .machine-head { order: 1; border-radius: var(--mm-radius-pane) var(--mm-radius-pane) var(--mm-space-0) var(--mm-space-0); } .midterm-machine .machine > .readouts { order: 1; margin-top: calc(var(--mm-pane-gap) * -1); padding-top: var(--mm-space-4); padding-bottom: var(--mm-space-4); border-radius: var(--mm-space-0) var(--mm-space-0) var(--mm-radius-pane) var(--mm-radius-pane); } .midterm-machine .machine > .views { order: 5; margin-top: var(--mm-space-0); padding-top: var(--mm-space-4); padding-bottom: var(--mm-space-0); border-radius: var(--mm-radius-pane) var(--mm-radius-pane) var(--mm-space-0) var(--mm-space-0); } .midterm-machine .machine > :is(.screens, .strips) { order: 5; margin-top: calc(var(--mm-pane-gap) * -1); padding-top: var(--mm-space-4); } .midterm-machine .machine > .screens > .screen { inset: var(--mm-space-4) var(--mm-grid-margin) var(--mm-space-0); } /* the map at a phone's width: the states' codes go (they would be a few pixels high; a tap names the state), the small * states' codes grow to be read; the legend's two ends sit either side of its bar, the notes under them */ .midterm-machine .state-label:not(.callout), .midterm-machine .state-label.callout-head { display: none; } .midterm-machine .state-label.callout { font-size: var(--mm-map-label-phone); } .midterm-machine .legend { display: grid; grid-template-columns: minmax(0, 1fr) var(--mm-col-bar) minmax(0, 1fr); column-gap: var(--mm-space-2); } .midterm-machine .legend > :first-child { text-align: right; } .midterm-machine .legend > :is(.legend-note, .legend-key) { grid-column: 1 / -1; margin-top: var(--mm-space-1); } .midterm-machine .machine > #points-note { order: 6; margin-top: calc(var(--mm-pane-gap) * -1); padding-top: var(--mm-space-3); padding-bottom: var(--mm-space-6); border-radius: var(--mm-space-0) var(--mm-space-0) var(--mm-radius-pane) var(--mm-radius-pane); } .midterm-machine .finder { order: 2; position: sticky; top: var(--mm-bar); z-index: var(--mm-layer-search); padding: var(--mm-space-2) var(--mm-space-0); } .midterm-machine .step:first-of-type { order: 3; } .midterm-machine #passes { order: 4; } .midterm-machine .step > h2 { position: static; } .midterm-machine .colophon { padding: var(--mm-space-0) var(--mm-space-4) var(--mm-space-16); } /* the case: first here, so it goes unnumbered (1 and 2 follow it) */ .midterm-machine .machine-head .step-n { display: none; } .midterm-machine .machine-head .head-action { display: none; } /* the movers, one under another: what it is over the sector, the move at the trailing edge */ .midterm-machine .readouts > .movers { grid-template-columns: minmax(0, 1fr); gap: var(--mm-space-4); margin-top: var(--mm-space-4); padding-top: var(--mm-space-4); } /* the S&P 500 a row like the others: what it is at the leading edge, its figure at the trailing edge */ .midterm-machine .readout.lead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--mm-space-3); } .midterm-machine .readout.lead .readout-label { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; gap: var(--mm-space-1); } .midterm-machine .readout.lead .readout-value { grid-column: 2; grid-row: 1; } .midterm-machine .mover { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "side value" "name value"; align-items: center; column-gap: var(--mm-space-3); row-gap: var(--mm-space-0); grid-column: auto; } .midterm-machine .mover-side { grid-area: side; } .midterm-machine .mover-name-label { grid-area: name; } .midterm-machine .mover-value { grid-area: value; } .midterm-machine .machine > .screens { height: var(--mm-screen-phone); min-height: 0; } .midterm-machine .machine > .strips { min-height: 0; } /* under the map, the states and the stocks it ranks, as lists: every state and ticker in view, as on Tilt's page, and * a tap's worth of row for the small states the map draws a few pixels wide */ .midterm-machine .machine[data-view="map"] > .strips { display: grid; padding-top: var(--mm-space-6); padding-bottom: var(--mm-space-4); } .midterm-machine .machine[data-view="map"] > .strips > #sector-strip { display: none; } .midterm-machine .views { margin-top: var(--mm-space-8); } .midterm-machine .lens { display: flex; max-width: 100%; } /* the controls */ .midterm-machine .in-congress { grid-template-columns: minmax(0, 1fr); } /* a record's rows stack: the measure, then the position and its evidence */ .midterm-machine .person-record tr.on { grid-template-columns: minmax(0, 1fr); } .midterm-machine .person-record tr.on th { grid-row: auto; } .midterm-machine .person-record tr.on .proof { grid-column: 1; } .midterm-machine dialog { padding: var(--mm-space-4) var(--mm-space-4) var(--mm-space-6); } /* a state, a person: a sheet from the foot, at half height, pulled up or scrolled to full (app.js); its grab handle at the top */ .midterm-machine .sheet { top: auto; left: var(--mm-space-0); right: var(--mm-space-0); bottom: var(--mm-space-0); width: auto; height: var(--mm-sheet-full); padding-top: var(--mm-space-3); border-radius: var(--mm-radius-sheet) var(--mm-radius-sheet) var(--mm-space-0) var(--mm-space-0); box-shadow: 0 0 0 100vmax var(--mm-scrim); transition: height var(--mm-dur-spring) var(--mm-ease-spring), translate var(--mm-dur-spring) var(--mm-ease-spring); touch-action: pan-y; } .midterm-machine .sheet:not([hidden]) { animation: mm-sheet-up var(--mm-dur-spring) var(--mm-ease-spring); } /* while a finger holds it, it follows the finger exactly */ .midterm-machine .sheet.dragging { transition: none; } .midterm-machine .sheet.half { height: var(--mm-sheet-half); } .midterm-machine .sheet::before { content: ""; display: block; width: var(--mm-grab-w); height: var(--mm-grab-h); margin: var(--mm-space-0) auto var(--mm-space-3); border-radius: var(--mm-grab-h); background: var(--mm-border-strong); } /* the result, floating over the controls a gap from the edges, while it is scrolled away */ .midterm-machine .mini { position: fixed; z-index: var(--mm-layer-mini); left: var(--mm-pane-gap); right: var(--mm-pane-gap); bottom: var(--mm-pane-gap); display: flex; justify-content: space-between; align-items: center; gap: var(--mm-space-3); padding: var(--mm-space-3) var(--mm-pane-pad); background: var(--mm-bg-overlay); color: var(--mm-fg); border-radius: var(--mm-radius-pane); box-shadow: var(--mm-shadow-sheet); text-decoration: none; } .midterm-machine .mini.away { display: none; } .midterm-machine .mini > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .midterm-machine :is(.mini > span:last-child, .mini b) { white-space: nowrap; } /* a person's record: the measure and the stance side by side, the reason under them */ .midterm-machine :is(.person-record, .person-record tbody) { display: block; } .midterm-machine .person-record thead { display: none; } .midterm-machine .person-record tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--mm-space-3); padding: var(--mm-space-2) var(--mm-space-0); border-top: var(--mm-line) solid var(--mm-border-subtle); } .midterm-machine .person-record :is(th, td) { padding: var(--mm-space-0); border-top: 0; } .midterm-machine .person-record tbody th { white-space: normal; } .midterm-machine .person-record td.proof { grid-column: 1 / -1; margin-top: var(--mm-space-1); } .midterm-machine .person-record td.proof:empty { display: none; } /* the joint-run test: one block per set of measures, each figure beside its column's name */ .midterm-machine :is(.validation, .validation tbody, .validation tr) { display: block; } .midterm-machine .validation thead { display: none; } .midterm-machine .validation tr { padding: var(--mm-space-2) var(--mm-space-0); border-top: var(--mm-line) solid var(--mm-border-subtle); } .midterm-machine .validation tbody th { display: block; padding: var(--mm-space-0) var(--mm-space-0) var(--mm-space-1); border-top: 0; white-space: normal; } .midterm-machine .validation td { display: flex; justify-content: space-between; gap: var(--mm-space-3); padding: var(--mm-space-1) var(--mm-space-0); border-top: 0; white-space: nowrap; } .midterm-machine .validation td::before { content: attr(data-label); color: var(--mm-fg-muted); white-space: normal; } .midterm-machine .validation td:empty { display: none; } } /* How it works in one column below 901: its contents a row of chips that scrolls sideways */ @media (max-width: 900px) { .midterm-machine #method-body { grid-template-columns: minmax(0, 1fr); row-gap: var(--mm-space-4); } .midterm-machine .method-nav { position: static; grid-row: auto; margin-inline: calc(var(--mm-space-4) * -1); overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, var(--mm-mask) calc(100% - var(--mm-fade-h)), transparent); mask-image: linear-gradient(to right, var(--mm-mask) calc(100% - var(--mm-fade-h)), transparent); } .midterm-machine .method-nav ol { grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--mm-space-1); padding-inline: var(--mm-space-4); } .midterm-machine .method-nav a { min-height: var(--mm-pill-h-sm); padding: var(--mm-space-1) var(--mm-space-3) var(--mm-space-1) var(--mm-space-1); background: var(--mm-tint); border-radius: var(--mm-radius-control); } .midterm-machine .method-part { grid-column: 1; } } /* ---------- Tilt's 19 Oct markup in this look: what the sheets above do not cover ---------- */ /* the how-to: the three steps under the page's name, each a link to its step; the bar is taller by its row (56 is the * bar's own height in tokens.css) */ .midterm-machine { --mm-howto-h: 32px; --mm-bar: calc(56px + var(--mm-howto-h)); } .midterm-machine .masthead { padding-bottom: var(--mm-howto-h); } .midterm-machine .howto { position: absolute; left: calc(var(--mm-pane-gap) + var(--mm-pane-pad)); right: var(--mm-pane-gap); bottom: var(--mm-space-0); height: var(--mm-howto-h); display: flex; align-items: center; gap: var(--mm-space-6); overflow-x: auto; scrollbar-width: none; white-space: nowrap; } .midterm-machine .howto a { display: inline-flex; flex: none; white-space: nowrap; align-items: center; gap: var(--mm-space-2); color: var(--mm-fg-muted); text-decoration: none; font: var(--mm-type-control-sm); letter-spacing: var(--mm-tr-control-sm); } .midterm-machine .howto a:hover { color: var(--mm-fg); } .midterm-machine .howto b { font-weight: inherit; } /* the row is for phones; from 701 it's gone and the bar is its own height again */ @media (min-width: 701px) { .midterm-machine { --mm-howto-h: 0px; } .midterm-machine .howto { display: none; } } @media (max-width: 700px) { .midterm-machine .howto { left: var(--mm-space-3); right: var(--mm-space-0); padding-right: var(--mm-space-3); gap: var(--mm-space-4); -webkit-mask-image: linear-gradient(to right, var(--mm-mask) calc(100% - var(--mm-fade-h)), transparent); mask-image: linear-gradient(to right, var(--mm-mask) calc(100% - var(--mm-fade-h)), transparent); } /* the odds' source and time in two lines at most, so the bar keeps its height */ .midterm-machine .stamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } } /* the outcomes' head: what the choice is, in the label role */ .midterm-machine .ballot-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--mm-space-3); margin-bottom: var(--mm-space-2); font: var(--mm-type-label); letter-spacing: var(--mm-tr-label); text-transform: uppercase; color: var(--mm-fg-subtle); } .midterm-machine .ballot-head small { font: var(--mm-type-meta); letter-spacing: var(--mm-tr-meta); text-transform: none; } /* calling races and the counting rules: list rows that open, as the governors' */ .midterm-machine .race-calls { margin-top: var(--mm-space-3); color: var(--mm-fg-muted); } .midterm-machine :is(.race-calls, .rules-box) > summary { position: relative; display: block; min-height: var(--mm-row-h); margin-inline: calc(var(--mm-space-2) * -1); padding: var(--mm-space-2) calc(var(--mm-space-2) * 2 + var(--mm-disclosure)) var(--mm-space-2) var(--mm-space-2); list-style: none; border-radius: var(--mm-radius); font: var(--mm-type-row); letter-spacing: var(--mm-tr-row); color: var(--mm-fg); transition: background var(--mm-dur-fast) var(--mm-ease); } .midterm-machine :is(.race-calls, .rules-box) > summary b { font-weight: inherit; } .midterm-machine :is(.race-calls, .rules-box) > summary:hover { background: var(--mm-state-hover); } .midterm-machine :is(.race-calls, .rules-box) > summary::-webkit-details-marker { display: none; } .midterm-machine :is(.race-calls, .rules-box) > summary::after { content: "›"; position: absolute; top: 50%; right: var(--mm-space-2); width: var(--mm-disclosure); translate: 0 -50%; color: var(--mm-fg-subtle); font: var(--mm-type-pane-title); text-align: center; transition: transform var(--mm-dur-base) var(--mm-ease); } .midterm-machine :is(.race-calls, .rules-box)[open] > summary::after { transform: rotate(var(--mm-quarter)); } .midterm-machine .race-calls > .calls-head:first-of-type { margin-top: var(--mm-space-1); } /* step 2: setting every measure stays in view; the counting rules fold under the bills, as Tilt has them */ .midterm-machine #passes > .tries { margin-bottom: var(--mm-space-2); padding-bottom: var(--mm-space-3); border-radius: var(--mm-radius-pane); } .midterm-machine[data-frame][data-frame] #passes:not([data-settings]) > .tries { display: grid; } .midterm-machine[data-head-actions] .tries #reset { display: none; } .midterm-machine #passes > .rules-box { order: 7; margin-top: var(--mm-space-4); } .midterm-machine .rules-box .rules { padding: var(--mm-space-0) var(--mm-space-0) var(--mm-space-2); } /* to 1180 the box is in the pane, folded or open; from 1181 Settings shows it, open (app.js) */ .midterm-machine:is([data-frame="phone"], [data-frame="stack"]) #passes:not([data-settings]) .rules-box .rules { display: flex; } .midterm-machine:is([data-frame="phone"], [data-frame="stack"]) #passes .head-tool[aria-label^="Settings"] { display: none; } .midterm-machine:is([data-frame="rail"], [data-frame="three"]) #passes:not([data-settings]) > .rules-box { display: none; } /* a sheet with the controls hidden keeps its width beside them: tokens.css puts the case at the window's edge then */ .midterm-machine[data-focus][data-frame="stack"] .sheet { width: var(--mm-controls-w); } .midterm-machine[data-focus][data-frame="three"] .sheet { width: calc(var(--mm-wins-w) + var(--mm-cards-w) + var(--mm-pane-gap)); } /* a bill's chance on its chip and over its meter: solid on the record alone, hatched for what counting the rest like * their party adds (views.js meterStyle) */ .midterm-machine .chance.meter { background: linear-gradient(to right, var(--mm-fill) var(--low, 0%), transparent var(--low, 0%)), repeating-linear-gradient(135deg, var(--mm-fill) 0 var(--mm-line-strong), transparent var(--mm-line-strong) calc(var(--mm-line-strong) * 3)) left / var(--high, 0%) 100% no-repeat, var(--mm-empty); } .midterm-machine .m-figure b.chance.meter { background: linear-gradient(to right, var(--mm-fg) var(--low, 0%), transparent var(--low, 0%)) left bottom / 100% var(--mm-meter-h) no-repeat, repeating-linear-gradient(135deg, var(--mm-fg) 0 var(--mm-line), transparent var(--mm-line) calc(var(--mm-line) * 3)) left bottom / var(--high, 0%) var(--mm-meter-h) no-repeat, linear-gradient(var(--mm-bg-track), var(--mm-bg-track)) left bottom / 100% var(--mm-meter-h) no-repeat; } .midterm-machine .verdict.figure.low, .midterm-machine .m-figure.low b { color: var(--mm-fg-muted); } /* a folded card that shows its ruling names the end "Pass it" passes; the chance is already on its chip */ .midterm-machine[data-frame][data-frame="three"] .measure.folded .m-figure { display: block; } .midterm-machine[data-frame="three"] .measure.folded .m-figure > b { display: none; } /* the map's note is a tooltip, so its legend role must not clip it */ .midterm-machine .note.legend-note { overflow: visible; } /* nothing passes: the one figure across the band, and a line over each picture */ .midterm-machine .readouts > .readout.full { grid-column: 1 / -1; grid-row: auto; } .midterm-machine .screen-empty { position: absolute; inset: var(--mm-space-0); z-index: var(--mm-layer-panel); display: grid; place-items: center; margin: var(--mm-space-0); padding: var(--mm-space-4); background: color-mix(in oklch, var(--mm-bg-pane) 60%, transparent); color: var(--mm-fg); font: var(--mm-type-row); letter-spacing: var(--mm-tr-row); text-align: center; pointer-events: none; } /* How it works: the short version's paragraphs are rows of #method-body's grid, so each takes back the row gap to * sit as close as a section's paragraphs */ .midterm-machine #method-body > p + p { margin-top: calc(var(--mm-space-3) - var(--mm-space-6)); } @media (max-width: 900px) { .midterm-machine #method-body > p + p { margin-top: calc(var(--mm-space-3) - var(--mm-space-4)); } } /* the share card (build_cards.py draws it from ?card=), in Tilt's own colours */ .midterm-machine .share-card { --case: #181b20; --case-2: #22262d; --glow: #eef1f4; --dim: #98a1ad; --gain: #26d0a8; --loss: #ff9240; --marker: #ffe14d; } .midterm-machine .share-card { position: fixed; inset: 0 auto auto 0; z-index: 100; display: flex; flex-direction: column; width: 1200px; height: 630px; padding: 42px 56px 32px; background: var(--case); color: var(--glow); overflow: hidden; } .midterm-machine .card-top { display: flex; align-items: center; gap: 16px; font: 700 23px/1 var(--sans); } .midterm-machine .card-logo svg { display: block; width: 76px; height: auto; color: var(--glow); } .midterm-machine .card-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 40px; align-items: center; min-height: 0; } .midterm-machine .card-headline { font: 800 50px/1.08 var(--sans); letter-spacing: -0.02em; color: #fff; } .midterm-machine .card-headline.generic { font-size: 42px; line-height: 1.12; } .midterm-machine .card-deck { margin-top: 18px; font-size: 22px; line-height: 1.4; color: var(--dim); } .midterm-machine .card-tiles { display: flex; gap: 16px; margin-top: 30px; } .midterm-machine .card-tile { flex: 1; display: grid; gap: 4px; padding: 16px 18px; background: var(--case-2); border-radius: 10px; } .midterm-machine .card-label { font-size: 16px; color: var(--dim); } .midterm-machine .card-value { font: 600 40px/1.1 var(--sans); } .midterm-machine .card-tile.up .card-value { color: var(--gain); } .midterm-machine .card-tile.down .card-value { color: var(--loss); } .midterm-machine .card-note { font-size: 19px; } .midterm-machine .card-map svg { display: block; width: 100%; height: auto; } .midterm-machine .card-map .labels, .midterm-machine .card-map .markers, .midterm-machine .card-map rect.state { display: none; } .midterm-machine .card-map.plain .state { fill: rgba(38, 208, 168, 0.22); } .midterm-machine .card-map-note { margin-top: 6px; font-size: 14px; color: var(--dim); text-align: center; } .midterm-machine .card-cta { font: 700 22px/1.3 var(--sans); color: var(--marker); } .midterm-machine .card-fine { margin-top: 6px; font-size: 14px; color: var(--dim); } @media (min-width: 701px) { .midterm-machine .views { scroll-margin-top: var(--mm-pane-header-h); } } /* ---- styles/layouts.css ---- */ /* * The frame and the main panel (17 Oct). Every width has a frame: * phone to 700: one column (layout.css) * stack 701 to 1180: 1 over 2, each scrolling on its own | the main panel (layout.css) * rail 1181 to 1439 (and from 1181 with the hidden setting, data-layout="two", the lab's ?layout=two): * the controls as one rail, 1 over 2, scrolling as one | the main panel * three from 1440: 1 Who wins | 2 What passes, its bills as cards | the main panel * From 701, and in focus (Hide controls), the case is the main panel, the result and the map as one: the result's * sentence and its numbers in a band on top, the picture's switch and the map's lenses on one toolbar, the map filling * the rest, each large state's move written on it where it is drawn large enough (views.js, --mm-map-values), the * lists it ranks beside it or under it. Step 2's settings are a click away (Settings, app.js). * * The stylesheet names the frame (--mm-frame), the panel (--mm-panel) and whether the stocks run as a tape under the * map (--mm-tape); app.js puts them on the root (data-frame, data-panel, data-tape), so every rule is written once. */ .midterm-machine { --mm-frame: phone; } @media (min-width: 701px) { .midterm-machine { --mm-frame: stack; --mm-panel: 1; --mm-map-values: 1; } /* the tape where the screen is 860 tall or more (on a shorter one the map would give too much way) */ /* from 960 tall the tape fits under the picture at its least (--mm-screen-min) in the rail and on a tablet (18 Oct: * from 860 it ran into the legend) */ @media (min-height: 960px) { .midterm-machine { --mm-tape: 1; } } } @media (min-width: 1181px) { .midterm-machine { --mm-frame: rail; } } @media (min-width: 1440px) { .midterm-machine:not([data-layout="two"]) { --mm-frame: three; --mm-tape: 0; } /* three columns, to 1759: no room beside the map for the stocks, so under it, at any height */ @media (max-width: 1759px) and (min-height: 880px) { .midterm-machine:not([data-layout="two"]) { --mm-tape: 1; } } } /* focus: the case alone, the states and the stocks beside the map (a tape would take the height the map needs) */ @media (min-width: 701px) { .midterm-machine[data-focus] { --mm-tape: 0; } } /* ---------- every width: step 2's settings, a click away; notes the ⓘ and the legend already say, hidden ---------- */ .midterm-machine[data-frame] .head-tool { display: inline-flex; } .midterm-machine[data-frame] .readout.lead .readout-note { display: none; } .midterm-machine[data-frame] #passes:not([data-settings]) :is(.rules, .tries) { display: none; } /* what a point is: the legend names the unit */ .midterm-machine[data-frame] .machine > #points-note { display: none; } /* ---------- the main panel: the result in a band, the map under it ---------- */ .midterm-machine[data-panel] .floor > .machine { display: grid; grid-template-columns: repeat(var(--mm-grid-cols), minmax(0, 1fr)); column-gap: var(--mm-grid-gutter); /* the picture's row is never shorter than the picture's least height, so what follows it starts after it (on a short * window the pane scrolls rather than anything overlapping) */ grid-template-rows: var(--mm-pane-header-h) auto auto auto minmax(var(--mm-screen-min), 1fr) auto; align-content: stretch; } /* the band, in the order it is read: the answer in a sentence, the one thing to read first; under it the three figures * it rests on, on one row at one size: the S&P 500, what beats it, what trails it (Tilt leads with what moves against * the market; the market is one of the three). The case's head (its title, the sentence, the reader's scenario) is one * block on its own rows, and the figures one block under it, so neither sizes the other. */ .midterm-machine[data-panel] .machine > .machine-head { grid-column: 1 / -1; grid-row: 1 / span 2; display: grid; grid-template-columns: subgrid; align-content: start; row-gap: var(--mm-space-0); } .midterm-machine[data-panel] .machine-head > h2 { grid-column: 1 / -1; } .midterm-machine[data-panel] .machine-head > :not(h2) { grid-column: 1 / -1; } .midterm-machine[data-panel] #answer { max-width: var(--mm-measure-answer-band); margin-top: var(--mm-space-2); font: var(--mm-type-display); letter-spacing: var(--mm-tr-display); } .midterm-machine[data-panel] #does-note { max-width: var(--mm-measure-text); margin-top: var(--mm-space-2); } /* the panel holds still while the reader changes things (18 Oct): the answer keeps room for two lines, the three * figures are equal columns and each figure's note keeps room for two, so a different answer never moves the picture */ .midterm-machine[data-panel] #answer { min-height: calc(var(--mm-lead-32) * 2); } .midterm-machine[data-panel] .readouts .mover-name-label { min-height: calc(var(--mm-lead-14) * 2); } /* the three figures: each its label, its figure and what it is, on shared rows so the figures line up */ .midterm-machine[data-panel] .machine > .readouts { grid-column: 1 / -1; grid-row: 3; align-self: start; display: grid; grid-template-columns: repeat(3, minmax(0, var(--mm-readout-col))); grid-template-rows: auto auto auto; justify-content: start; column-gap: var(--mm-space-12); margin-top: var(--mm-space-6); padding: var(--mm-space-0) var(--mm-space-0) var(--mm-space-6); border: 0; border-bottom: var(--mm-line) solid var(--mm-border-subtle); } .midterm-machine[data-panel] .readouts > .readout.lead, .midterm-machine[data-panel] .readouts .mover { grid-row: 1 / span 3; grid-column: auto; display: grid; grid-template-columns: minmax(0, max-content); grid-template-rows: subgrid; grid-template-areas: none; justify-items: start; align-content: start; gap: var(--mm-space-0); } .midterm-machine[data-panel] .readouts :is(.readout-label, .readout-value, .mover-side, .mover-value, .mover-name-label) { grid-area: auto; grid-column: 1; } .midterm-machine[data-panel] .readouts > .movers { display: contents; } .midterm-machine[data-panel] .readouts :is(.readout-label, .mover-side) { grid-row: 1; display: inline-flex; align-items: center; gap: var(--mm-space-1); margin-bottom: var(--mm-space-1); } .midterm-machine[data-panel] .readouts :is(.readout-value, .mover-value) { grid-row: 2; font: var(--mm-type-figure); letter-spacing: var(--mm-tr-figure); } .midterm-machine[data-panel] .readouts .mover-name-label { grid-row: 3; } .midterm-machine[data-panel] .readouts .mover[data-mover="state"] { display: none; } /* the economy's caveat closes the small print, where the sources are (views.js); the figures keep to the figures */ .midterm-machine[data-panel] .readouts > .readouts-economy { display: none; } /* one toolbar: the picture's switch at the leading edge (its box only as wide as its buttons, so it never covers the * lenses), the map's lens, a size down, at the trailing edge, over the picture */ .midterm-machine[data-panel] .machine > .views { grid-column: 1 / -1; grid-row: 4; z-index: var(--mm-layer-panel); align-self: start; justify-self: start; position: static; margin: var(--mm-space-6) var(--mm-space-0) var(--mm-space-0); padding: var(--mm-space-0); background: none; } .midterm-machine[data-panel] .screen figcaption { justify-content: flex-end; } .midterm-machine[data-panel] .screen-title { display: none; } .midterm-machine[data-panel] .machine > .screens { grid-column: 1 / -1; grid-row: 4 / span 2; height: auto; min-height: var(--mm-screen-min); margin-top: var(--mm-space-6); } .midterm-machine[data-panel] .machine > .strips { grid-column: 1 / -1; grid-row: 5; margin-top: var(--mm-space-4); } .midterm-machine[data-panel] .machine > #points-note { grid-column: 1 / -1; grid-row: 6; } /* the map as large as the panel allows, from the leading edge, its legend right under it: as tall as its width * allows (the screen measured as a container) and no taller than the picture's room */ .midterm-machine[data-panel] .screen:has(#map) { container-type: inline-size; } .midterm-machine[data-panel] .screen-body:has(> #map) { flex: 0 1 auto; } .midterm-machine[data-panel] #map { width: auto; height: calc(100cqw / var(--mm-map-ratio)); max-height: 100%; max-width: 100%; aspect-ratio: var(--mm-map-aspect); } /* the moves on the map: under each large state's code (only where the panel draws them) */ .midterm-machine[data-panel] .state-value { font: var(--mm-type-map-value); fill: var(--mm-fg); } .midterm-machine:not([data-panel]) .state-value { display: none; } /* a state pointed at, on the map or in the list: marked in both */ .midterm-machine[data-frame] .state.hl { stroke: var(--mm-fg); stroke-width: var(--mm-map-edge-hover); } .midterm-machine[data-frame] #state-strip li.hl { background-color: var(--mm-state-hover); } /* beside and under the map, the lists it ranks: each list its own item on the panel's grid (the box around them gives * way), placed below by the frame; none unless placed */ .midterm-machine[data-panel] .machine[data-view="map"] > .strips { display: contents; } .midterm-machine[data-panel] .machine[data-view="map"] > .strips > .strip { display: none; } /* the rail: the panel is wider than the map is tall, so the states beside it */ .midterm-machine[data-panel][data-frame="rail"]:not([data-focus]) .machine[data-view="map"] > .screens { grid-column: 1 / span 8; } .midterm-machine[data-panel][data-frame="rail"]:not([data-focus]) .machine[data-view="map"] > .strips > #state-strip { display: block; grid-column: 9 / -1; grid-row: 5; align-self: start; min-height: 0; margin-top: var(--mm-space-4); padding-left: var(--mm-space-6); border-left: var(--mm-line) solid var(--mm-border-subtle); } /* focus: the map over six columns, the states and the stocks beside it, three each */ .midterm-machine[data-panel][data-focus] .machine[data-view="map"] > .screens { grid-column: 1 / span 6; } .midterm-machine[data-panel][data-focus] .machine[data-view="map"] > .strips > :is(#state-strip, #mover-strip) { display: block; grid-row: 5; align-self: start; min-height: 0; margin-top: var(--mm-space-4); padding-left: var(--mm-space-6); border-left: var(--mm-line) solid var(--mm-border-subtle); } .midterm-machine[data-panel][data-focus] .machine[data-view="map"] > .strips > #state-strip { grid-column: 7 / span 3; } .midterm-machine[data-panel][data-focus] .machine[data-view="map"] > .strips > #mover-strip { grid-column: 10 / -1; } /* the stocks beside the map: in three columns from 1760, where the map keeps its values and the names their length */ @media (min-width: 1760px) { .midterm-machine[data-frame="three"]:not([data-focus]) .machine[data-view="map"] > .screens { grid-column: 1 / span 9; } .midterm-machine[data-frame="three"]:not([data-focus]) .machine[data-view="map"] > .strips > #mover-strip { display: block; grid-column: 10 / -1; grid-row: 5; align-self: start; min-height: 0; margin-top: var(--mm-space-4); padding-left: var(--mm-space-6); border-left: var(--mm-line) solid var(--mm-border-subtle); } } /* the stocks tape: the stocks that move most, ahead on one line and behind on the next, ticker and points (the names * in the Rankings), so every state and every ticker are in view together, as on Tilt's page */ /* with the tape the picture gives way first (its least height a step lower), so the tape is always whole on screen */ .midterm-machine[data-panel][data-tape] { --mm-screen-min: var(--mm-screen-min-tape); } .midterm-machine[data-panel][data-tape] .floor > .machine { grid-template-rows: var(--mm-pane-header-h) auto auto auto minmax(var(--mm-screen-min), 1fr) auto auto; } .midterm-machine[data-panel][data-tape] .machine > #points-note { grid-row: 7; } .midterm-machine[data-panel][data-tape] .machine[data-view="map"] > .strips > #mover-strip { display: grid; grid-column: 1 / -1; grid-row: 6; grid-template-columns: var(--mm-tape-label) minmax(0, 1fr); column-gap: var(--mm-space-6); align-items: start; margin-top: var(--mm-space-4); padding-top: var(--mm-space-3); border-top: var(--mm-line) solid var(--mm-border-subtle); } .midterm-machine[data-panel][data-tape] .machine[data-view="map"] #mover-strip h3 { padding: var(--mm-space-0); border: 0; } /* the tape keeps room for both its lines (ahead, behind) whatever it holds, so an outcome with no stock behind the * market doesn't hand the map a line and move the legend (18 Oct) */ .midterm-machine[data-panel][data-tape] .machine[data-view="map"] > .strips > #mover-strip { grid-template-rows: minmax(var(--mm-tape-h), auto); } .midterm-machine[data-panel][data-tape][data-frame="stack"] .machine[data-view="map"] > .strips > #mover-strip { grid-template-rows: auto minmax(var(--mm-tape-h), auto); } .midterm-machine[data-panel][data-tape] .machine[data-view="map"] #mover-strip .rows { display: grid; grid-template-columns: auto repeat(4, minmax(0, var(--mm-tape-cell))); justify-content: start; column-gap: var(--mm-space-6); } .midterm-machine[data-panel][data-tape] .machine[data-view="map"] #mover-strip .rows li { display: flex; gap: var(--mm-space-2); align-items: baseline; min-height: var(--mm-row-h-tape); border: 0; background-image: none; } .midterm-machine[data-panel][data-tape] .machine[data-view="map"] #mover-strip .rows li.rows-head { grid-column: 1; padding: var(--mm-space-0); align-items: center; } .midterm-machine[data-panel][data-tape] .machine[data-view="map"] #mover-strip .rows li b { min-width: 0; } .midterm-machine[data-panel][data-tape] .machine[data-view="map"] #mover-strip .mover-name { display: none; } /* Rankings: the states and the stocks side by side, the sectors' bars under them at the panel's width */ .midterm-machine[data-panel] .machine[data-view="lists"] > .strips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mm-space-8) var(--mm-space-6); } .midterm-machine[data-panel] .machine[data-view="lists"] > .strips > #mover-strip { order: 1; } .midterm-machine[data-panel] .machine[data-view="lists"] > .strips > #sector-strip { order: 2; grid-column: 1 / -1; } /* ---------- the panel by its width ---------- */ /* under 1100 wide (to 1599): the band's numbers take half of it, so the two figures sit side by side */ @media (max-width: 1599px) { .midterm-machine[data-panel] .machine > .readouts { column-gap: var(--mm-space-8); } } /* the map's column too narrow for both switches on one line (the rail to 1439, the stack): its lenses under the * picture's switch */ @media (max-width: 1439px) { .midterm-machine[data-panel]:is([data-frame="rail"], [data-frame="stack"]):not([data-focus]) .machine[data-view="map"] > .screens { margin-top: calc(var(--mm-space-6) + var(--mm-pill-h) + var(--mm-space-2)); } .midterm-machine[data-panel]:is([data-frame="rail"], [data-frame="stack"]):not([data-focus]) .machine[data-view="map"] .screen figcaption { justify-content: flex-start; } } /* the stack (701 to 1180): the tape's label over its stocks, the stocks closer, so it holds on the narrower panel */ .midterm-machine[data-panel][data-tape][data-frame="stack"] .machine[data-view="map"] > .strips > #mover-strip { grid-template-columns: minmax(0, 1fr); row-gap: var(--mm-space-2); } .midterm-machine[data-panel][data-tape][data-frame="stack"] .machine[data-view="map"] #mover-strip .rows { grid-template-columns: auto repeat(4, minmax(0, 1fr)); column-gap: var(--mm-space-3); } /* a tablet upright: the map is held by the panel's width, so its row is as tall as the map and its legend (from the * panel's width: the window less the controls and the margins), the rest of the pane under it */ @media (orientation: portrait) { .midterm-machine[data-panel][data-frame="stack"]:not([data-focus]) .floor > .machine { grid-template-rows: var(--mm-pane-header-h) auto auto auto auto auto auto; align-content: start; } .midterm-machine[data-panel][data-frame="stack"]:not([data-focus]) .machine > .screens { min-height: 0; height: calc((100vw - var(--mm-case-x) - var(--mm-pane-gap) - var(--mm-grid-margin) * 2) / var(--mm-map-ratio) + var(--mm-screen-extra)); } } /* ---------- the rail: 1 over 2, scrolling as one | the main panel ---------- */ .midterm-machine[data-frame="rail"]:not([data-focus]) { --mm-case-x: calc(var(--mm-rail-w) + var(--mm-pane-gap) * 2); } .midterm-machine[data-frame="rail"]:not([data-focus]) .floor { grid-template-columns: var(--mm-rail-w) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } /* 1 and 2 one after the other, each its own pane, so 2's bills have the rail's length; a fade at its foot while there is more */ .midterm-machine[data-frame="rail"]:not([data-focus]) .paper { display: flex; flex-direction: column; gap: var(--mm-pane-gap); grid-column: 1; grid-row: 1 / -1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: var(--mm-radius-pane); animation: mm-cut linear both; animation-timeline: scroll(self); -webkit-mask-image: linear-gradient(to bottom, var(--mm-mask) calc(100% - var(--mm-cut)), transparent); mask-image: linear-gradient(to bottom, var(--mm-mask) calc(100% - var(--mm-cut)), transparent); } .midterm-machine[data-frame="rail"]:not([data-focus]) .paper > .step { flex: none; overflow: visible; animation: none; -webkit-mask-image: none; mask-image: none; } .midterm-machine[data-frame="rail"]:not([data-focus]) .floor > .machine { grid-column: 2; grid-row: 1 / -1; } /* search at the rail's top, pinned: the rail's fade (a mask) would clip it in the bar; its gap below on the window's * ground, so the steps' heads pin under it (not behind it) and what scrolls is hidden between them */ .midterm-machine[data-frame="rail"]:not([data-focus]) .finder { position: sticky; top: var(--mm-space-0); left: auto; flex: none; width: auto; margin-bottom: calc(var(--mm-pane-gap) * -1); padding: var(--mm-space-0) var(--mm-space-0) var(--mm-pane-gap); background: var(--mm-bg-window); transform: none; } .midterm-machine[data-frame="rail"]:not([data-focus]) .paper > .step > h2 { top: calc(var(--mm-search-h) + var(--mm-pane-gap)); } .midterm-machine[data-frame="rail"] .sheet { width: var(--mm-sheet-rail); } /* ---------- three columns: 1 Who wins | 2 What passes, its bills as cards | the main panel ---------- */ .midterm-machine[data-frame="three"] { --mm-bill-effects: 1; } .midterm-machine[data-frame="three"]:not([data-focus]) { --mm-case-x: calc(var(--mm-wins-w) + var(--mm-cards-w) + var(--mm-pane-gap) * 3); } .midterm-machine[data-frame="three"]:not([data-focus]) .finder { left: calc(var(--mm-case-x) + var(--mm-grid-margin)); transform: none; } .midterm-machine[data-frame="three"]:not([data-focus]) .floor { grid-template-columns: var(--mm-wins-w) var(--mm-cards-w) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } .midterm-machine[data-frame="three"]:not([data-focus]) .step:first-of-type { grid-column: 1; grid-row: 1; } .midterm-machine[data-frame="three"]:not([data-focus]) #passes { grid-column: 2; grid-row: 1; } .midterm-machine[data-frame="three"]:not([data-focus]) .floor > .machine { grid-column: 3; grid-row: 1; } /* the small print (the sources, the method's one line, the economy's caveat) at the main panel's foot, across its * width on a hairline (18 Oct): the bounds sit with the result they bound. The panel's scrolling part ends where the * small print begins (--mm-colophon-panel-h), and the small print closes the pane under it, so the two read as one pane * and nothing scrolls beneath the small print. Wherever the case is the main panel, in every frame and with the * controls hidden (19 Oct: it sat outside the pane, on the window, everywhere but three columns) */ .midterm-machine[data-panel] .floor > .machine { margin-bottom: max(var(--mm-colophon-panel-h), var(--mm-colophon-fit, var(--mm-space-0))); border-radius: var(--mm-radius-pane) var(--mm-radius-pane) var(--mm-space-0) var(--mm-space-0); } .midterm-machine[data-panel] .colophon { z-index: var(--mm-layer-panel); left: var(--mm-case-x); right: var(--mm-pane-gap); bottom: var(--mm-pane-gap); min-height: var(--mm-colophon-panel-h); display: grid; padding: var(--mm-space-0) var(--mm-grid-margin) var(--mm-space-4); background: var(--mm-bg-pane); border-radius: var(--mm-space-0) var(--mm-space-0) var(--mm-radius-pane) var(--mm-radius-pane); } .midterm-machine[data-panel] .colophon p { max-width: none; padding-top: var(--mm-space-3); border-top: var(--mm-line) solid var(--mm-border-subtle); } /* a bill as a card: its chance, what it would do made law (views.js effectLine) and its ruling */ .midterm-machine[data-frame="three"] .measures { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mm-space-2); } .midterm-machine[data-frame="three"] .measures > .group { margin: var(--mm-space-3) var(--mm-space-0) var(--mm-space-0); } .midterm-machine[data-frame="three"] .measures > .group:first-child { margin-top: var(--mm-space-0); } .midterm-machine[data-frame="three"] .measure.folded { display: flex; flex-direction: column; gap: var(--mm-space-1); margin: var(--mm-space-0); padding: var(--mm-space-1) var(--mm-space-3) var(--mm-space-3); background: var(--mm-bg-raised); border-radius: var(--mm-radius-pane); } .midterm-machine[data-frame="three"] .measure.folded:hover { background: var(--mm-bg-raised); } .midterm-machine[data-frame="three"] .measure.folded .m-toggle { min-height: var(--mm-pill-h); padding: var(--mm-space-1) var(--mm-space-0); } .midterm-machine[data-frame="three"] .measure.folded > :is(.m-effect, .m-foot) { display: flex; } .midterm-machine[data-frame="three"] .measure.folded > .m-foot { flex-direction: column; margin-top: var(--mm-space-1); } .midterm-machine[data-frame="three"] .measure.folded .m-figure { display: none; } .midterm-machine[data-frame="three"] .measure:not(.folded) { margin: var(--mm-space-0); } .midterm-machine[data-frame="three"] .measure:not(.folded) .m-effect { order: 1; } /* ---------- the bar ---------- */ /* Tilt's promise, its deck, is said by the three steps' titles (1 Who wins, 2 What passes, 3 What it does); * the bar keeps to the page's name, the odds' time, search and the two actions (18 Oct) */ /* a list beside the map takes the map's row as it is and never sizes it (18 Oct: a longer list grew the row and moved * the map and its legend); a list too long for its place scrolls there */ .midterm-machine[data-panel][data-frame="rail"]:not([data-focus]) .machine[data-view="map"] > .strips > #state-strip, .midterm-machine[data-panel][data-focus] .machine[data-view="map"] > .strips > :is(#state-strip, #mover-strip), .midterm-machine[data-frame="three"]:not([data-focus]):not([data-tape]) .machine[data-view="map"] > .strips > #mover-strip { contain: size; align-self: stretch; overflow-y: auto; scrollbar-width: none; } /* the reader's scenario, in the case's head beside its actions (app.js moves it there), so it never pushes the panel * down; on a tablet and a phone the count alone, in the marker's yellow */ .midterm-machine .machine-head .head-actions > .yours { margin-right: var(--mm-space-2); flex-wrap: nowrap; white-space: nowrap; } .midterm-machine:is([data-frame="stack"], [data-frame="phone"]) .machine-head .yours-label { display: none; } .midterm-machine:is([data-frame="stack"], [data-frame="phone"]) .machine-head .yours-count { color: var(--mm-pick); } /* the head gives way by its own width, never by wrapping: under 560 only Reset all, in the marker's yellow (it is the * reader's scenario); under 440 Hide controls says Hide (Show), its name to a screen reader unchanged */ .midterm-machine[data-panel] .machine-head > h2 { container: case-head / inline-size; } @container case-head (max-width: 560px) { .midterm-machine .machine-head .yours :is(.yours-label, .yours-count) { display: none; } .midterm-machine .machine-head .yours-reset { color: var(--mm-pick); } } @container case-head (max-width: 440px) { .midterm-machine .machine-head .head-actions > .head-action[aria-pressed] { font-size: var(--mm-space-0); } .midterm-machine .machine-head .head-actions > .head-action[aria-pressed]::after { content: "Hide"; font: var(--mm-type-control-sm); letter-spacing: var(--mm-tr-control-sm); } .midterm-machine .machine-head .head-actions > .head-action[aria-pressed="true"]::after { content: "Show"; } }