among its siblings regardless of the header preceding it. */ .ed .mfg-section:first-of-type, .ed .project-header + .mfg-section, .ed .mfg-sections > .mfg-section:first-of-type { border-top: 0; padding-top: 0; } .ed .section-header { margin-bottom: clamp(1.25rem, 2.6vw, 2.25rem); } .ed .kicker { display: block; font-family: var(--font-mono); font-weight: 500; font-size: var(--ed-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ed-accent); margin-bottom: 0.75rem; } .ed .section-header h2 { font-family: var(--font-display); font-weight: 700; color: var(--ed-ink); font-size: var(--ed-h2); line-height: 1.1; letter-spacing: -0.022em; margin: 0; max-width: 30ch; text-wrap: balance; } .ed .section-header h3 { font-family: var(--font-display); font-weight: 700; color: var(--ed-ink); font-size: var(--ed-h3); line-height: 1.25; margin: 0; } .ed .section-lede { margin-top: 0.9rem; font-size: var(--ed-lede); line-height: 1.5; color: var(--ed-body); max-width: 58ch; } /* the workhorse: a grid of labelled prose blocks, 145 of them across the site */ .ed .project-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(1.25rem, 2.6vw, 2.25rem); } .ed .block { min-width: 0; } .ed .block-label { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-quiet); margin-bottom: 0.6rem; padding-top: 0.85rem; border-top: 1px solid var(--ed-rule-strong); } .ed .block p { font-size: 0.9375rem; line-height: 1.65; color: var(--ed-body); max-width: 46ch; margin: 0; } .ed .block p + p { margin-top: 0.8rem; } /* ------------------------------------------------- 4. chips, tags, badges */ .ed .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ed-quiet); padding: 0.3em 0.7em; border: 1px solid var(--ed-rule-strong); } .ed .badge { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-quiet); padding: 0.3em 0.75em; border: 1px solid currentColor; white-space: nowrap; } .ed .badge .dot { width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .ed .badge--active, .ed .badge--open { color: var(--ed-accent); } .ed .badge--merged { color: var(--ed-quiet); } .ed .badge--concept { color: var(--ed-quiet); } .ed .badge--hit { color: var(--ed-accent); } .ed .badge--miss { color: var(--mo-error); } /* --------------------------------------------------- 5. definition rows */ .ed .term-row { display: grid; gap: 0.3rem; padding-block: 0.9rem; border-top: 1px solid var(--ed-rule); } .ed .term-row:first-of-type { border-top: 1px solid var(--ed-rule-strong); } .ed .term-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ed-ink); } .ed .term-def { font-size: 0.9375rem; line-height: 1.65; color: var(--ed-body); max-width: 68ch; } @media (min-width: 900px) { .ed .term-row { grid-template-columns: 15rem 1fr; gap: 0 2rem; align-items: baseline; } } /* ------------------------------------------------------------ 6. tables */ .ed .ex-tablewrap, .ed .tablewrap { overflow-x: auto; border: 1px solid var(--ed-rule); } /* Scoped to real elements on purpose. `.pred-table` is a

laid out as a flex column, and handing it width:100%, border-collapse and a min-width:30rem floor pushed a 480px block into a 320px column — /predictions scrolled sideways by 129px on a phone. min-width now comes from each table's own rule (robot-table carries 720px for its wide layout and resets to 0 in the mobile card block), never from this shared one. */ .ed table:where(.ex-table, .pred-table, .robot-table, .bb-table, .t-table) { width: 100%; border-collapse: collapse; font-size: 0.9rem; } /* .pred-table is a

, not a table: a bordered flex column of prediction rows. The shared rule above once claimed it, which is also why the porter thought the class was already covered and skipped this, its only real rule. */ .ed .pred-table { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ed-rule); background: var(--ed-paper-alt); } .ed :where(.ex-table, .pred-table, .robot-table, .bb-table, .t-table) th { text-align: left; background: var(--ed-paper-alt); font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ed-quiet); padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--ed-rule-strong); white-space: nowrap; } .ed :where(.ex-table, .pred-table, .robot-table, .bb-table, .t-table) td { padding: 0.68rem 0.85rem; border-bottom: 1px solid var(--ed-rule); color: var(--ed-body); vertical-align: top; } .ed .example { margin-top: clamp(1.1rem, 2.4vw, 1.75rem); border: 1px solid var(--ed-rule); background: var(--ed-paper-alt); padding: clamp(0.9rem, 1.8vw, 1.4rem); } .ed .example-label { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-accent); margin-bottom: 0.75rem; } .ed .ex-dim { color: var(--ed-quiet); } .ed .ex-flag { color: var(--mo-warning); } /* rows that are really tables built from divs */ .ed .ex-row, .ed .pred-row, .ed .log-entry { display: grid; gap: 0.35rem; padding-block: 0.85rem; border-top: 1px solid var(--ed-rule); } .ed .ex-row-part, .ed .pred-id, .ed .log-date, .ed .log-project, .ed .log-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-quiet); } .ed .pred-id { color: var(--ed-accent); } .ed .ex-row-req, .ed .pred-claim { font-size: 0.9375rem; line-height: 1.6; color: var(--ed-body); } .ed .pred-deadline { font-family: var(--font-mono); font-size: 10.5px; color: var(--ed-quiet); } .ed .log-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; } @media (min-width: 900px) { .ed .pred-row { grid-template-columns: 5rem 1fr 9rem; gap: 0 1.5rem; align-items: baseline; } .ed .ex-row { grid-template-columns: 16rem 1fr; gap: 0 1.5rem; align-items: baseline; } /* A MEDIA QUERY CANNOT SEE ITS CONTAINER, AND THIS IS WHERE THAT BIT. The two-column .ex-row above assumes a full-width container. Nested inside .project-blocks the cell is 336px at 1440, so a FIXED 16rem first column leaves the content column ~74px: measured on /manufacturing/quoting, 232 characters rendering at 10 characters per line in a 600px-tall vertical ribbon. Four such rows made that one section 3,349px tall — half the page. Stacking inside a narrow block takes the content column to 289px and 39 characters per line, and the section to 2,210px. Same fix serves 8 files: industrialization carries SEVEN of these examples, learning, quality and quoting one each, plus their four Chinese twins. */ .ed .project-blocks .ex-row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } } /* ------------------------------------------------- 7. buttons and tools */ .ed .btn { display: inline-flex; align-items: center; gap: 0.7em; padding: 0.9em 1.8em; border: 0; border-radius: 999px; font-family: var(--font-mono); font-weight: 500; font-size: var(--ed-small); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 200ms var(--ed-ease), border-color 200ms var(--ed-ease), color 200ms var(--ed-ease); } .ed .btn--primary { background: var(--ed-accent); color: var(--mo-black); } .ed .btn--primary:hover { background: var(--mo-accent-strong); } .ed .btn--secondary { background: transparent; color: var(--ed-ink); border: 1px solid var(--ed-rule-strong); } .ed .btn--secondary:hover { border-color: var(--ed-accent); color: var(--ed-accent); } /* calculator + scorecard: these are the only pages with real form controls, and color-scheme must stay dark for the native caret and select to look right */ .ed .tool-result { border: 1px solid var(--ed-rule); background: var(--ed-paper-alt); padding: clamp(0.9rem, 2vw, 1.4rem); display: grid; gap: 0.4rem; } .ed .tool-result--accent { border-color: var(--ed-accent); } .ed .tool-result-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-quiet); } .ed .tool-result-value { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2.1rem); color: var(--ed-ink); letter-spacing: -0.02em; } .ed .tool-result--accent .tool-result-value { color: var(--ed-accent); } .ed .tool-result-why { font-size: 0.9375rem; line-height: 1.6; color: var(--ed-body); } /* --------------------------------------- the scorecard reading (model v0.2) -- Every class below is written into the DOM by js/scorecard.js and its zh twin, EXCEPT .result-section, which is static in both .astro files. `verify` check 3 reads built HTML, so it can see .result-section and cannot see any of the others: a missing rule here fails silently as unstyled markup rather than as a red build. Both /scorecard and /zh/scorecard render design="editorial" with compat left at its default of true, so both load this file. Keep the two in step: a rule added here serves both languages, and there is no second place these need to be declared. .tool-result--stale is toggled, not injected: the reading dims when an answer changes so a stale reading cannot be mistaken for a fresh one. */ .ed .result-section { display: grid; gap: 0.55rem; margin-top: 1.1rem; } /* .tool-hint carries the long quiet lines inside the reading (the shape foot, the zero-state, the old-version notice). .tool-note is 10px uppercase mono and is right only for a microline like the band or "Link copied", so it must not be reused for a sentence. */ .ed .tool-result .tool-hint { margin: 0; max-width: 62ch; } .ed .tool-result--stale { opacity: 0.45; } .ed .tool-result--stale .tool-result-value { color: var(--ed-quiet); } /* Five bars, one per published group. Each row also prints its number as text, because print drops background fills and a printed one-pager of empty tracks is not a reading. */ .ed .score-bars { display: grid; gap: 0.35rem; } .ed .score-bar { display: grid; grid-template-columns: minmax(0, 1fr) 130px 4.5rem; gap: var(--space-4); align-items: center; } .ed .score-bar-label { font-size: 13px; line-height: 1.4; color: var(--ed-body); } .ed .score-bar-track { position: relative; height: 8px; background: var(--ed-paper); border: 1px solid var(--ed-rule); overflow: hidden; } .ed .score-bar-fill { display: block; height: 100%; background: var(--ed-accent); } .ed .score-bar-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ed-quiet); text-align: right; } @media (max-width: 640px) { .ed .score-bar { grid-template-columns: minmax(0, 1fr) 3.75rem; gap: var(--space-2) var(--space-3); } .ed .score-bar-track { grid-column: 1 / -1; } } /* The ledger's first line is a count computed from the reader's own answers, so it cannot be softened by an editor. It reads as body copy, not as a heading. */ .ed .ledger-tally { font-size: 0.9375rem; line-height: 1.6; color: var(--ed-ink); max-width: 62ch; margin: 0; } /* The fourth status token. badge--active, badge--concept and badge--open already exist and carry Published, Specified-not-built and Not-built. This one carries "Yours, not ours": a permanent non-claim, so it is deliberately the quietest of the four and the only one drawn dashed. There is no fifth token, and the one that is missing is RUNNING. */ .ed .badge--yours { border-style: dashed; color: var(--ed-quiet); } .ed .badge--yours .dot { background: transparent; border: 1px solid var(--ed-quiet); } === END BLOCK === Tokens used are all confirmed present in public/styles/editorial.css: --ed-paper, --ed-rule, --ed-accent, --ed-quiet, --ed-ink, --ed-body, --font-mono, --space-2, --space-3, --space-4. No new token is introduced. Nothing is added to tools/known-class-gaps.json: that list is for pre-existing gaps, and growing it is a bug. .ed :where(input, select, textarea) { font-family: var(--font-body); font-size: 0.9375rem; color: var(--ed-ink); background: var(--ed-paper-alt); border: 1px solid var(--ed-rule-strong); border-radius: 2px; padding: 0.55em 0.7em; } .ed :where(input, select, textarea):focus-visible { outline: 2px solid var(--ed-accent); outline-offset: 2px; } /* ------------------------------------------- 7b. the OS demo (os-demo.js) */ /* These class names are hardcoded as strings inside js/os-demo.js (and its zh twin), so they cannot be renamed — the JS builds its DOM by concatenation. They were missing from the first pass of this file, which left the step list rendering as unstyled inline text: "Submission2 · Identity3 · Confirmation4". That was a real regression, caught by rendering the page rather than by reading it. */ .ed .osd-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.1rem; padding: 0; list-style: none; } .ed .osd-step { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-quiet); padding: 0.35em 0.7em; border: 1px solid var(--ed-rule); } .ed .osd-step--done { color: var(--ed-body); border-color: var(--ed-rule-strong); } .ed .osd-step--live { color: var(--mo-black); background: var(--ed-accent); border-color: var(--ed-accent); } .ed .osd-log { background: var(--ed-paper-alt); border: 1px solid var(--ed-rule); padding: clamp(0.9rem, 2vw, 1.4rem); font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.75; max-height: 26rem; overflow-y: auto; } .ed .osd-line { color: var(--ed-body); overflow-wrap: anywhere; } .ed .osd-pfx { display: inline-block; min-width: 1.4em; color: var(--ed-quiet); } .ed .osd-pfx--ok { color: var(--ed-accent); } .ed .osd-pfx--warn { color: var(--mo-warning); } .ed .osd-pfx--os { color: var(--mo-info); } .ed .osd-line--cursor::after { content: ''; display: inline-block; width: 0.5em; height: 1em; margin-left: 0.15em; background: var(--ed-accent); vertical-align: -0.15em; animation: ed-blink 1.05s step-end infinite; } @keyframes ed-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ed .osd-line--cursor::after { animation: none; } } .ed .osd-result { margin-top: 1.1rem; border: 1px solid var(--ed-accent); background: var(--ed-paper-alt); padding: clamp(0.9rem, 2vw, 1.4rem); } .ed .osd-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.1rem; align-items: center; } .ed .osd-note { font-size: 0.8125rem; color: var(--ed-quiet); margin-top: 0.75rem; } .ed .osd-conf { display: grid; gap: 0.4rem; margin-top: 0.9rem; } .ed .osd-conf-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ed-quiet); } .ed .osd-conf-bar { height: 4px; background: var(--ed-rule); overflow: hidden; } .ed .osd-conf-fill { height: 100%; background: var(--ed-accent); } .ed .osd-conf-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: var(--ed-ink); } /* The run selector. Also hardcoded in js/os-demo.js and its zh twin. GRID, NOT FLEX-WRAP. With `flex: 1 1 auto` each of the four tabs grows to the full width of a 375px phone, so the selector becomes four stacked rows and the demo gets taller instead of denser. `repeat(auto-fit, minmax(min( 100%, 9.5rem), 1fr))` is the idiom already used by .model-grid and .compare-grid: one row of four above ~768px, a 2x2 on a phone, one column only when the container really is narrower than 9.5rem. ALL LONGHANDS ON THE SELECTED STATE, DELIBERATELY. `border-color: var(--x)` is a shorthand containing a var(), so it cannot be expanded at parse time; it is stored as a pending-substitution value and expanded at computed-value time — AFTER any border-*-color longhand in the SAME block, which it then silently overwrites. That ate the accent border on the selected tab once. Across separate rule blocks the cascade behaves normally, which is why .osd-step--blocked can override .osd-step's `border` shorthand from a later rule. Verify check 3 cannot catch either case: it only sees classes present in the built HTML, and every class here is injected by JavaScript. */ .ed .osd-runs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 0.5rem; margin-bottom: 1.1rem; } .ed .osd-run { display: grid; gap: 0.2rem; text-align: left; cursor: pointer; padding: 0.5rem 0.7rem; background-color: transparent; border: 1px solid var(--ed-rule); border-left-width: 2px; } .ed .osd-run[aria-selected="true"] { border-top-color: var(--ed-rule-strong); border-right-color: var(--ed-rule-strong); border-bottom-color: var(--ed-rule-strong); border-left-color: var(--ed-accent); background-color: var(--ed-paper-alt); } .ed .osd-run-name { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ed-quiet); } .ed .osd-run[aria-selected="true"] .osd-run-name { color: var(--ed-ink); } .ed .osd-run-delta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em; color: var(--ed-quiet); } .ed .osd-run:focus-visible, .ed .osd-panel:focus-visible { outline: 2px solid var(--ed-accent); outline-offset: 2px; } /* A stage the selected run never reaches. Dashed, dimmed, and carrying an .sr-only "not reached in this run" — a rejection that stops at stage 1 should look like six stages that did not happen. */ .ed .osd-step--blocked { border-style: dashed; color: var(--ed-quiet); opacity: 0.55; } .ed .osd-pfx--no { color: var(--mo-error); } .ed .osd-line--no { color: var(--ed-body); } /* --------------------------------------------------------- 8. the footer */ .ed .footer { max-width: var(--ed-max); margin-inline: auto; padding: clamp(2.25rem, 4.5vw, 4.5rem) var(--ed-gutter) clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--ed-rule-strong); margin-top: clamp(2.5rem, 5vw, 5rem); } .ed .footer-main { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); } @media (min-width: 768px) { .ed .footer-main { grid-template-columns: 1fr 1.4fr; } } .ed .footer-brand { display: grid; gap: 0.6rem; align-content: start; } .ed .footer-tagline { font-family: var(--font-mono); font-size: var(--ed-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-quiet); } .ed .footer-email { color: var(--ed-accent); text-decoration: none; font-size: 0.9375rem; } .ed .footer-email:hover { text-decoration: underline; text-underline-offset: 0.2em; } .ed .footer-cols { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); } .ed .footer-col { display: grid; gap: 0.65rem; align-content: start; } .ed .footer-col-title { font-family: var(--font-mono); font-weight: 500; font-size: var(--ed-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ed-quiet); margin-bottom: 0.35rem; } .ed .footer-link { font-size: 0.9375rem; text-decoration: none; color: var(--ed-ink); border-bottom: 1px solid transparent; justify-self: start; } .ed .footer-link:hover { border-bottom-color: var(--ed-accent); } .ed .footer-note { margin-top: clamp(1.4rem, 2.8vw, 2.25rem); padding-top: 1.2rem; border-top: 1px solid var(--ed-rule); font-size: var(--ed-small); color: var(--ed-quiet); } .ed .footer-license, .ed .footer-note a { color: var(--ed-quiet); text-decoration: none; border-bottom: 1px solid currentColor; } .ed .footer-note a:hover { color: var(--ed-ink); } /* ------------------------------- 10. artifacts, term lists, phase paging ---- Added because `npm run verify` named them: converting manufacturing/os to an Astro page reported exactly these nine classes as used-but-undefined. That is the loop this file is meant to run in — convert one page, let the verifier name what is missing, add it, move on. */ .ed .artifact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); gap: clamp(1rem, 2.2vw, 1.75rem); margin-top: clamp(1rem, 2.2vw, 1.6rem); } .ed .artifact-card { display: flex; flex-direction: column; gap: 0.55rem; padding: clamp(1rem, 2vw, 1.4rem); background: var(--ed-paper-alt); border: 1px solid var(--ed-rule); text-decoration: none; color: inherit; transition: border-color 200ms var(--ed-ease); } .ed a.artifact-card:hover { border-color: var(--ed-accent); } .ed .artifact-label { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ed-accent); } .ed .artifact-name { font-family: var(--font-display); font-weight: 700; font-size: 1.075rem; line-height: 1.25; color: var(--ed-ink); letter-spacing: -0.01em; } .ed .artifact-desc { font-size: 0.875rem; line-height: 1.6; color: var(--ed-body); max-width: 42ch; } .ed .artifact-cta { margin-top: auto; padding-top: 0.35rem; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ed-quiet); } .ed a.artifact-card:hover .artifact-cta { color: var(--ed-accent); } /* a ruled stack of definitions — the .term-row children are styled in §5 */ .ed .term-list { display: flex; flex-direction: column; border: 1px solid var(--ed-rule); padding: 0 clamp(0.9rem, 2vw, 1.35rem); margin-top: clamp(0.9rem, 2vw, 1.4rem); } .ed .term-list .term-row:first-of-type { border-top: 0; } .ed .example-note { margin: 0.7rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--ed-quiet); max-width: 62ch; } /* previous / next across the six phases */ .ed .phase-pager { display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 2.5vw, 2rem); flex-wrap: wrap; margin-top: clamp(2rem, 4vw, 3.5rem); padding-top: 1.2rem; border-top: 1px solid var(--ed-rule-strong); } /* ------------------------------------------- 9. prose defaults inside main */ .ed main :where(p) { color: var(--ed-body); } .ed main :where(p, li) { line-height: 1.65; } .ed main :where(a):not([class]) { color: var(--ed-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .ed main :where(code) { font-family: var(--font-mono); font-size: 0.855em; background: var(--ed-paper-alt); color: var(--ed-ink); padding: 0.1em 0.38em; border-radius: 2px; overflow-wrap: anywhere; } .ed main :where(ul, ol) { padding-left: 1.15rem; } .ed main :where(ul, ol) li { margin-bottom: 0.45rem; } .ed main :where(ul) { list-style: disc; } .ed main :where(ol) { list-style: decimal; } .ed main :where(li)::marker { color: var(--ed-accent); } .ed main :where(hr) { border: 0; border-top: 1px solid var(--ed-rule); margin-block: 2rem; } .ed main :where(blockquote) { padding-left: 1rem; border-left: 2px solid var(--ed-rule-strong); color: var(--ed-quiet); } /* the comments block, on 19 pages */ .ed .comments { padding-block: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--ed-rule); } .ed .comments h2 { font-family: var(--font-display); font-weight: 700; color: var(--ed-ink); font-size: var(--ed-h3); margin: 0 0 0.75rem; } /* ========================================================================== Editorial rollout, wave 1 + 2. Each rule below is a TRANSLATION of an existing site.css rule, not a new design: the layout and semantics are kept and only the typography, colour and rules are moved onto the editorial tokens. Written because 106 pages still load site.css, and a page can only flip once EVERY class it uses has a rule — which is why these 38 classes clear 66 pages between them while the 292-class long tail clears the rest a page or two at a time. ========================================================================== */ /* --- view-transition names. Behaviour only, no styling. ------------------- */ .ed .vtn-mod01 { view-transition-name: mod-01; } .ed .vtn-mod02 { view-transition-name: mod-02; } .ed .vtn-mod03 { view-transition-name: mod-03; } .ed .vtn-mod04 { view-transition-name: mod-04; } .ed .vtn-mod05 { view-transition-name: mod-05; } .ed .vtn-mod06 { view-transition-name: mod-06; } .ed .vtn-mod08 { view-transition-name: mod-08; } .ed .vtn-mod09 { view-transition-name: mod-09; } .ed .vtn-mod10 { view-transition-name: mod-10; } .ed .vtn-mod11 { view-transition-name: mod-11; } /* --- notes and asides ---------------------------------------------------- */ .ed .project-note { margin-top: 0.9rem; padding-left: 0.8rem; border-left: 2px solid var(--ed-accent); font-size: 0.9rem; line-height: 1.6; color: var(--ed-quiet); max-width: 62ch; } .ed .tool-note { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-quiet); } .ed .tool-hint { font-size: 0.8125rem; line-height: 1.55; color: var(--ed-quiet); } .ed .comments-note { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ed-body); max-width: 58ch; } .ed .comments-fallback { margin: 0.9rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--ed-quiet); max-width: 54ch; } .ed .comments-fallback a { color: var(--ed-accent); } .ed .comments .giscus { margin-top: clamp(1rem, 2.2vw, 1.6rem); } /* --- the question / answer stack ----------------------------------------- */ .ed .qa-list { display: flex; flex-direction: column; gap: clamp(1.6rem, 3.4vw, 2.75rem); } .ed .qa { display: flex; flex-direction: column; gap: 0.55rem; } .ed .qa h2 { font-family: var(--font-display); font-weight: 700; color: var(--ed-ink); font-size: var(--ed-h3); line-height: 1.25; letter-spacing: -0.015em; margin: 0; max-width: 40ch; } .ed .qa p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--ed-body); max-width: 68ch; } /* --- numbered principle cards -------------------------------------------- */ .ed .model-grid { display: grid; gap: clamp(1.25rem, 2.6vw, 2.25rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .ed .principle-card { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; padding: clamp(1rem, 2vw, 1.4rem); background: var(--ed-paper-alt); border: 1px solid var(--ed-rule); } .ed .principle-card h3 { font-family: var(--font-display); font-weight: 700; color: var(--ed-ink); font-size: 1.075rem; line-height: 1.25; letter-spacing: -0.01em; margin: 0; } .ed .principle-card p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--ed-body); } .ed .principle-num { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ed-accent); } /* --- stat rows ------------------------------------------------------------ */ .ed .stat-row { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); padding-block: clamp(1rem, 2.2vw, 1.6rem); } .ed .stat { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .ed .stat-num { font-family: var(--font-display); font-weight: 700; color: var(--ed-ink); font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; } .ed .stat-num--accent { color: var(--ed-accent); } .ed .stat-label { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-quiet); } /* --- the tool forms on /calculator and /scorecard ------------------------ */ .ed .tool-form { display: flex; flex-direction: column; gap: clamp(1.1rem, 2.4vw, 1.75rem); max-width: 39rem; } .ed .tool-field { display: flex; flex-direction: column; gap: 0.4rem; } .ed .tool-field > label, .ed .tool-field-label { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-quiet); } .ed .tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(0.75rem, 1.6vw, 1.1rem); } /* --- the changelog entries ----------------------------------------------- */ .ed .cl-list { display: flex; flex-direction: column; } .ed .cl-entry { display: grid; gap: 0.35rem; padding-block: clamp(1rem, 2.2vw, 1.5rem); border-top: 1px solid var(--ed-rule); } .ed .cl-entry:first-of-type { border-top: 1px solid var(--ed-rule-strong); } .ed .cl-date { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-quiet); } .ed .cl-summary { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ed-body); max-width: 68ch; } .ed .cl-changes { margin: 0.6rem 0 0; padding-left: 1.1rem; } .ed .cl-changes li { margin: 0.3rem 0; font-size: 0.855rem; line-height: 1.55; color: var(--ed-quiet); } @media (min-width: 48rem) { .ed .cl-entry { grid-template-columns: 8rem 1fr; gap: 0 2rem; align-items: baseline; } } /* --- example sequences and node chips ------------------------------------ */ .ed .ex-rows { display: flex; flex-direction: column; gap: 0; } .ed .ex-seq { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .ed .node { display: inline-flex; align-items: center; padding: 0.35em 0.75em; background: var(--ed-paper-alt); border: 1px solid var(--ed-rule-strong); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ed-body); } .ed .node--accent { border-color: var(--ed-accent); color: var(--ed-accent); } .ed .node--dim { border-color: var(--ed-rule); color: var(--ed-quiet); } .ed .link-arrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--ed-quiet); } /* --- the build log ------------------------------------------------------- */ .ed .log-list { display: flex; flex-direction: column; } /* --- odds and ends ------------------------------------------------------- */ .ed .badge--idea { color: var(--ed-quiet); opacity: 0.75; } /* an indented continuation row inside an example table */ .ed .ex-table .lvl-1 td:first-child { padding-left: 1.6rem; } /* visible to a screen reader, not on screen */ .ed .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- comparison panels and diagrams -------------------------------------- */ .ed .compare-diagram { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; padding-block: 0.5rem; } .ed .compare-grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .ed .compare-panel { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; padding: clamp(1rem, 2vw, 1.4rem); background: var(--ed-paper-alt); border: 1px solid var(--ed-rule); } .ed .compare-panel--accent { border-color: var(--ed-accent); } .ed .compare-panel ul { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.855rem; line-height: 1.55; color: var(--ed-body); } .ed .compare-label { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-quiet); } .ed .compare-panel--accent .compare-label, .ed .compare-panel--accent .link-arrow { color: var(--ed-accent); } /* --- tier cards ---------------------------------------------------------- */ .ed .tier-grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } .ed .tier-card { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; padding: clamp(1rem, 2vw, 1.4rem); background: var(--ed-paper-alt); border: 1px solid var(--ed-rule); } .ed .tier-card--accent { border-color: var(--ed-accent); } .ed .tier-label { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-quiet); } .ed .tier-card--accent .tier-label { color: var(--ed-accent); } .ed .tier-name { font-family: var(--font-display); font-weight: 700; color: var(--ed-ink); font-size: 1rem; line-height: 1.25; letter-spacing: -0.01em; } .ed .tier-desc { font-size: 0.8125rem; line-height: 1.55; color: var(--ed-quiet); } .ed .tier-card--accent .tier-desc { color: var(--ed-body); } /* --- open-question cards ------------------------------------------------- */ .ed .open-card { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; padding: clamp(1rem, 2vw, 1.4rem); background: var(--ed-paper-alt); border: 1px solid var(--ed-rule); } .ed .open-card p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--ed-body); } .ed .open-card-label { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-quiet); } .ed .open-card-label--accent { color: var(--ed-accent); } /* --- the tracker's in-page subnav and source lines ----------------------- */ .ed .race-subnav { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: clamp(1rem, 2.2vw, 1.6rem); padding-bottom: clamp(1rem, 2.2vw, 1.6rem); border-bottom: 1px solid var(--ed-rule); } .ed .race-subnav a { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; color: var(--ed-quiet); padding: 0.35rem 0.7rem; border: 1px solid var(--ed-rule); } .ed .race-subnav a:hover { color: var(--ed-accent); border-color: var(--ed-accent); } .ed .race-source { font-size: 0.72rem; line-height: 1.5; color: var(--ed-quiet); } .ed .race-source a { color: var(--ed-quiet); text-decoration: none; border-bottom: 1px solid var(--ed-rule-strong); } .ed .race-source a:hover { color: var(--ed-ink); } /* --- misc containers ----------------------------------------------------- */ .ed .fan-col { display: flex; flex-direction: column; gap: 0.4rem; } .ed .prop-grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } /* the second indent level inside an example table */ .ed .ex-table .lvl-2 td:first-child { padding-left: 2.6rem; } /* an inline monospace run, and the rationale note beneath a PrintDrop figure */ .ed .pd-mono { font-family: var(--font-mono); font-size: 0.92em; } .ed .pd-why { font-size: 0.8125rem; line-height: 1.6; color: var(--ed-quiet); max-width: 62ch; } /* ========================================================================== Editorial rollout, ported rules. Machine-translated from site.css by tools/port-legacy-css.mjs: layout and spacing verbatim, palette moved onto the editorial tokens, rounded corners and card shadows dropped because the editorial system is hairlines and flat planes. The @media print block in site.css is deliberately NOT ported — it is a stack of !important overrides forcing white paper and #333 text. 351 rules covering 227 classes across the per-page design systems: the tracker, the flagship manufacturing page, the thesis, contact-map, predictions, the scorecard, onboard and the labs index. ========================================================================== */ .ed .hero { position: relative; padding: var(--space-24) var(--space-8) var(--space-16); overflow: hidden; } .ed .hero-watermark { position: absolute; right: -90px; bottom: -120px; width: 460px; height: auto; opacity: 0.09; pointer-events: none; } .ed .hero-quote { position: absolute; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; } .ed .hero-quote--1 { top: 44px; right: 64px; color: rgba(155, 163, 159, 0.42); } .ed .hero-quote--2 { bottom: 28px; left: 64px; color: rgba(155, 163, 159, 0.30); } .ed .hero-quote--3 { bottom: 36px; right: 64px; color: rgba(155, 163, 159, 0.36); } .ed .hero-inner { max-width: 1016px; margin: 0 auto; display: flex; gap: var(--space-16); align-items: flex-start; } .ed .hero-copy { flex: 1; display: flex; flex-direction: column; gap: var(--space-6); } .ed .hero-copy h1 { font-size: clamp(34px, 8vw, 54px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; max-width: 600px; } .ed .hero-lede { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ed-quiet); max-width: 540px; } .ed .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } .ed .hero-stats { display: flex; flex-direction: column; gap: var(--space-6); border-left: 1px solid var(--ed-rule); padding-left: var(--space-8); margin-top: var(--space-4); } .ed .section-index { border-top: 1px solid var(--ed-rule); padding: var(--space-16) var(--space-8); background: var(--ed-paper-alt); scroll-margin-top: 64px; } .ed .section-inner { max-width: 1016px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-8); } .ed .index-table { display: flex; flex-direction: column; border: 1px solid var(--ed-rule); overflow: hidden; background: var(--ed-paper-alt); } .ed .index-head, .ed .index-row { display: grid; grid-template-columns: 86px 170px 170px 1fr 168px; gap: var(--space-4); align-items: center; } .ed .index-head { padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--ed-rule); background: var(--ed-paper-alt); } .ed .index-head span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-quiet); } .ed .index-row { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--ed-rule); cursor: pointer; transition: background var(--duration-base) var(--ease-out); } .ed .index-row:hover { background: var(--ed-paper-alt); } .ed .row-id { font-family: var(--font-mono); font-size: 11px; color: var(--ed-quiet); } .ed .row-id--accent { color: var(--ed-accent); } .ed .row-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ed-ink); } .ed .row-domain { font-size: 13px; color: var(--ed-quiet); } .ed .row-what { font-size: 13px; color: var(--ed-body); } .ed .index-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-quiet); } .ed .section-open { padding: var(--space-16) var(--space-8) var(--space-24); scroll-margin-top: 64px; } .ed .open-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--space-4); } .ed .timeline { display: flex; flex-direction: column; } .ed .tl-item { display: flex; gap: var(--space-4); } .ed .tl-rail { display: flex; flex-direction: column; align-items: center; width: 12px; } .ed .tl-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--ed-paper-alt); border: 1px solid var(--ed-quiet); } .ed .tl-item--active .tl-dot { background: var(--ed-accent); border-color: var(--ed-accent); } .ed .tl-spine { width: 1px; flex: 1; background: var(--ed-rule); margin: 6px 0; } .ed .tl-content { display: flex; flex-direction: column; gap: 4px; padding-bottom: var(--space-6); } .ed .tl-item:last-child .tl-content { padding-bottom: 0; } .ed .tl-date { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ed-quiet); } .ed .tl-item--active .tl-date { color: var(--ed-accent); } .ed .tl-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ed-ink); } .ed .flow { display: flex; align-items: stretch; gap: var(--space-2); } .ed .flow-step { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--ed-paper-alt); border: 1px solid var(--ed-rule); } .ed .flow-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ed-quiet); } .ed .flow-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ed-ink); hyphens: auto; -webkit-hyphens: auto; } .ed .flow-desc { font-size: 12.5px; line-height: 1.5; color: var(--ed-quiet); } .ed .flow-tag { margin-top: auto; padding-top: var(--space-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ed-quiet); } .ed a.flow-step { text-decoration: none; transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .ed a.flow-step:hover { background: var(--ed-paper-alt); border-color: var(--ed-accent); } .ed .flow-cta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-accent); padding-top: var(--space-1); } .ed .flow-arrow { flex: none; align-self: center; width: 10px; height: 10px; border-right: 2px solid var(--ed-accent); border-bottom: 2px solid var(--ed-accent); transform: rotate(-45deg); } .ed .flow-note { margin: var(--space-3) 0 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-quiet); } .ed .bb-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); } .ed .bb-status { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--ed-rule); color: var(--ed-quiet); } .ed .bb-indent { font-family: var(--font-mono); color: var(--ed-accent); white-space: pre; } .ed .bb-rowops button { background: var(--ed-paper-alt); color: var(--ed-quiet); border: 1px solid var(--ed-rule); font-family: var(--font-mono); font-size: 12px; width: 26px; height: 26px; cursor: pointer; margin-right: 2px; } .ed .bb-rowops button:hover { color: var(--ed-accent); border-color: var(--ed-accent); } .ed .bb-errors { margin: var(--space-3) 0 0; padding: 0 0 0 2px; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.5; color: var(--ed-body); } .ed .bb-rule { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--mo-warning); margin-right: 6px; } .ed .bb-more, .ed .bb-empty, .ed .bb-summary { font-family: var(--font-mono); font-size: 11px; color: var(--ed-quiet); } .ed .bb-empty, .ed .bb-summary { margin: var(--space-3) 0 0; } .ed .doc-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .ed .badge--wrong { background: rgba(229, 72, 77, 0.10); border-color: var(--mo-error); color: var(--mo-error); } .ed .badge--wrong .dot { background: var(--mo-error); } .ed .pred-group { display: flex; flex-direction: column; gap: var(--space-4); } .ed .pred-horizon { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-accent); } .ed .pred-horizon-note { font-size: 14px; line-height: 1.6; color: var(--ed-quiet); max-width: 620px; margin: 0; } .ed .pred-note { grid-column: 2 / -1; font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: var(--ed-quiet); max-width: 560px; } .ed .pred-note a { color: var(--ed-accent); } .ed .score-group { display: flex; flex-direction: column; gap: var(--space-3); } .ed .score-group-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ed-ink); } .ed .score-row { display: grid; grid-template-columns: 1fr 220px; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); background: var(--ed-paper-alt); border: 1px solid var(--ed-rule); } .ed .score-row-text { font-size: 14px; line-height: 1.5; color: var(--ed-body); } .ed .score-options { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: flex-end; } .ed .score-options label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ed-quiet); cursor: pointer; } .ed .hero-credit { margin-top:1rem; font-size:.9rem; color:var(--ed-quiet); } .ed .hero-credit a { color:var(--ed-accent); text-decoration:none; } .ed .hero-credit a:hover { text-decoration:underline; } .ed .seat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(270px, 100%), 1fr)); gap:16px; margin-top:8px; } .ed .seat-card { display:flex; flex-direction:column; gap:10px; padding:22px; border:1px solid var(--ed-rule); background:var(--surface-card); } .ed .seat-card--filled { border-color:var(--ed-accent); background:linear-gradient(180deg,var(--ed-accent-soft),var(--surface-card) 55%); } .ed .seat-card--open { border-style:dashed; background:transparent; } .ed .seat-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .ed .seat-num { font-size:var(--text-sm); letter-spacing:.14em; color:var(--ed-quiet); } .ed .seat-card--filled .seat-num { color:var(--ed-accent); } .ed .seat-state { font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ed-quiet); } .ed .seat-card--filled .seat-state { color:var(--accent-strong); } .ed .seat-role { font-size:var(--text-md); color:var(--ed-ink); font-weight:600; margin:0; } .ed .seat-card p { margin:0; font-size:var(--text-base); color:var(--ed-body); } .ed .seat-cta { margin-top:auto; padding-top:6px; font-size:var(--text-sm); } .ed .seat-cta a { color:var(--ed-accent); text-decoration:none; } .ed .seat-cta a:hover { text-decoration:underline; } .ed .open-cta { margin-top: 2rem; } .ed .race-legend { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px, 100%), 1fr)); gap:var(--space-4); margin:var(--space-6) 0; } .ed .race-legend .block { border:1px solid var(--ed-rule); padding:var(--space-6); } .ed .avail-pill { display:inline-flex; align-items:baseline; gap:.35rem; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.03em; padding:.22rem .55rem; border:1px solid var(--ed-rule); white-space:nowrap; } /* was 9.5px, the smallest type anywhere on the site and 75 instances of it on /humanoid-race alone. The editorial system's own label floor is 10.5px and these sit inside an 11px pill, so 9.5 was below the system, not a choice. */ .ed .avail-pill b { font-size:10.5px; font-weight:700; opacity:.68; } .ed .avail-0 { color:var(--ed-quiet); } .ed .avail-1 { color:#9BA39F; } .ed .avail-2 { color:#E2B34F; border-color:rgba(226,179,79,.4); } .ed .avail-3 { color:#4FC99A; border-color:rgba(79,201,154,.45); } .ed .avail-4 { color:var(--mo-black); background:var(--ed-accent); border-color:var(--ed-accent); } .ed .scoreboard { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px, 100%), 1fr)); gap:var(--space-4); margin:var(--space-6) 0; } .ed .score-card { border:1px solid var(--ed-rule); padding:var(--space-6); background:var(--ed-paper-alt); } .ed .score-card .flag { font-size:24px; line-height:1; } .ed .score-card .country { font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ed-body); margin:.3rem 0 .6rem; } .ed .score-card .score-line { display:flex; justify-content:space-between; font-size:13px; color:var(--ed-quiet); padding:.15rem 0; } .ed .score-card .score-line b { color:var(--ed-ink); font-family:var(--font-mono); } .ed .kpi-badges { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px, 100%), 1fr)); gap:var(--space-4); margin:var(--space-6) 0; } .ed .kpi-badge { border:1px solid var(--ed-rule); padding:var(--space-6); background:var(--ed-paper-alt); } .ed .kpi-badge .kpi-num { font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--ed-accent); } .ed .kpi-badge .kpi-title { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ed-quiet); margin:.55rem 0 .3rem; } .ed .kpi-badge .kpi-winner { font-family:var(--font-display); font-size:17px; color:var(--ed-ink); font-weight:600; line-height:1.25; } .ed .kpi-badge .kpi-basis { font-size:12.5px; color:var(--ed-quiet); margin-top:.4rem; line-height:1.5; } .ed .race-filters { display:flex; flex-wrap:wrap; gap:.7rem 1.4rem; align-items:center; margin:var(--space-6) 0; } .ed .filter-group { display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; } .ed .filter-group .fg-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ed-quiet); margin-right:.15rem; } .ed .chip { font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; color:var(--ed-quiet); background:transparent; border:1px solid var(--ed-rule); border-radius:999px; padding:.28rem .7rem; cursor:pointer; transition:color .16s,background .16s,border-color .16s; } .ed .chip:hover { color:var(--ed-body); border-color:var(--ed-body); } .ed .chip.is-active { color:var(--mo-black); background:var(--ed-accent); border-color:var(--ed-accent); } .ed .race-count { font-family:var(--font-mono); font-size:11px; color:var(--ed-quiet); margin-left:auto; } .ed .race-tier { margin:var(--space-6) 0; } .ed .race-tier-head { display:flex; align-items:baseline; gap:.7rem; border-bottom:1px solid var(--ed-rule); padding-bottom:var(--space-3); margin-bottom:var(--space-6); } .ed .race-tier-head h3 { font-size:19px; margin:0; } .ed .race-tier-head .tier-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:.15rem .5rem; border-radius:999px; border:1px solid var(--ed-rule); color:var(--ed-quiet); } .ed .tier-leaders .tier-tag { color:var(--ed-accent); border-color:var(--ed-accent); } .ed .company-card { border:1px solid var(--ed-rule); padding:var(--space-6) var(--space-6); margin-bottom:var(--space-4); background:var(--ed-paper-alt); } .ed .company-card.is-hidden, .ed .robot-table tr.is-hidden { display:none; } .ed .company-card .cc-top { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .8rem; margin-bottom:.6rem; } .ed .company-card .cc-flag { font-size:18px; } .ed .company-card .cc-name { font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--ed-ink); } .ed .company-card .cc-owner { font-size:12px; color:var(--ed-quiet); } .ed .company-card .cc-flagship { font-family:var(--font-mono); font-size:11px; color:var(--ed-quiet); margin-left:auto; } .ed .cc-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px, 100%), 1fr)); gap:var(--space-4); margin:.7rem 0; } /* was 9.5px — the smallest type on the whole site, and 75 instances of it on /humanoid-race alone (four KPI labels per company card). The editorial system's own mono-label floor is 10.5px, so this sat BELOW the system rather than being a deliberate step within it. */ .ed .cc-kpi .k-label { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ed-quiet); } .ed .cc-kpi .k-val { font-size:15px; color:var(--ed-ink); margin-top:.15rem; } .ed .cc-kpi .k-sub { font-size:12px; color:var(--ed-quiet); } .ed .cc-note { font-size:13px; color:var(--ed-quiet); line-height:1.55; border-top:1px solid var(--ed-rule); padding-top:.6rem; margin-top:.4rem; } .ed .flag-warn { color:#E2B34F; cursor:help; } .ed .robot-tablewrap { overflow-x:auto; margin:var(--space-4) 0; } .ed .robot-table th.sortable { cursor:pointer; user-select:none; white-space:nowrap; } .ed .robot-table th.sortable:hover { color:var(--ed-body); } .ed .robot-table th .sort-arrow { margin-left:.25rem; opacity:.35; font-size:9px; } .ed .robot-table th[aria-sort] .sort-arrow { opacity:1; color:var(--ed-accent); } .ed .robot-table .r-name { color:var(--ed-ink); font-weight:600; } .ed .robot-table tr.r-current .r-name-cell { border-left:2px solid var(--ed-accent); padding-left:.5rem; } .ed .robot-table .r-sub { color:var(--ed-quiet); font-size:11px; margin-top:.15rem; } .ed .robot-table .r-def { color:var(--ed-quiet); font-size:12px; line-height:1.4; margin-top:.2rem; max-width:34ch; } .ed .robot-table .r-maker { white-space:nowrap; color:var(--ed-body); font-size:12.5px; } .ed .robot-table .r-maker .rg-flag { margin-right:.3rem; } .ed .robot-table .r-price { font-family:var(--font-mono); white-space:nowrap; color:var(--ed-body); } .ed .race-empty { color:var(--ed-quiet); font-size:14px; padding:var(--space-6) 0; } .ed .race-excluded { font-size:13px; color:var(--ed-quiet); line-height:1.6; } .ed .tl-step { display:block; padding-bottom:var(--space-6); } .ed .tl-item:last-child .tl-step { padding-bottom:0; } .ed .tl-step>summary { list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .7rem; } .ed .tl-step>summary::-webkit-details-marker { display:none; } .ed .tl-step>summary::after { content:""; width:7px; height:7px; flex-shrink:0; border-right:1.5px solid var(--ed-quiet); border-bottom:1.5px solid var(--ed-quiet); transform:rotate(45deg); transition:transform var(--duration-base) var(--ease-out); } .ed .tl-step[open]>summary::after { transform:rotate(-135deg); } .ed .tl-step .tl-status { margin-left:auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:.12rem .5rem; border-radius:999px; border:1px solid var(--ed-rule); color:var(--ed-quiet); } .ed .tl-step .tl-status--progress { color:var(--ed-accent); border-color:var(--ed-accent); } .ed .tl-step .tl-status--done { color:var(--mo-black); background:var(--ed-accent); border-color:var(--ed-accent); font-weight:600; } .ed .tl-item--done .tl-dot { background:var(--ed-accent); border-color:var(--ed-accent); } .ed .task-list { list-style:none; margin:var(--space-4) 0 0; padding:0; display:flex; flex-direction:column; gap:.55rem; } .ed .task { display:flex; gap:.6rem; align-items:flex-start; } .ed .task-check { flex-shrink:0; width:15px; height:15px; margin-top:2px; border:1.5px solid var(--ed-quiet); position:relative; } .ed .task--done .task-check { background:var(--ed-accent); border-color:var(--ed-accent); } .ed .task--done .task-check::after { content:""; position:absolute; left:4px; top:1px; width:4px; height:8px; border-right:2px solid var(--mo-black); border-bottom:2px solid var(--mo-black); transform:rotate(45deg); } .ed .task-main { display:flex; flex-direction:column; gap:1px; min-width:0; } .ed .task-title { font-size:14px; line-height:1.4; color:var(--ed-body); } .ed .task--done .task-title { color:var(--ed-ink); } .ed .task--open .task-title { color:var(--ed-quiet); } .ed .task-meta { font-family:var(--font-mono); font-size:11px; color:var(--ed-quiet); } .ed .task-meta a { color:var(--ed-accent); } .ed .stage1-tease { border:1px dashed var(--ed-rule); padding:var(--space-6); background:var(--ed-paper-alt); } .ed .stage1-lock { display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ed-quiet); border:1px solid var(--ed-rule); border-radius:999px; padding:.15rem .6rem; margin-bottom:var(--space-3); } .ed .stage1-tease p { font-size:15px; line-height:1.65; color:var(--ed-quiet); margin:0; max-width:660px; } .ed .cmap-quote { margin:var(--space-8) 0 0; padding:.5rem 0 .5rem 1.2rem; border-left:3px solid var(--ed-accent); font-family:var(--font-display); font-size:20px; line-height:1.45; color:var(--ed-ink); max-width:680px; } .ed .cmap-quote cite { display:block; margin-top:.55rem; font-family:var(--font-mono); font-style:normal; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ed-quiet); } .ed .cmap-principles { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:var(--space-4); margin:var(--space-6) 0; } .ed .cmap-panels { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); gap:var(--space-4); margin-top:var(--space-4); } .ed .cmap-panel { border:1px solid var(--ed-rule); background:var(--ed-paper-alt); padding:var(--space-6); } .ed .cmap-panel-title { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ed-accent); margin-bottom:var(--space-4); } .ed .cmap-intro { font-size:14px; line-height:1.6; color:var(--ed-body); margin:0 0 var(--space-4); } .ed .cmap-steps { list-style:none; margin:0; padding:0; counter-reset:cstep; display:flex; flex-direction:column; gap:.7rem; } .ed .cmap-steps li { counter-increment:cstep; position:relative; padding-left:2rem; font-size:13.5px; line-height:1.6; color:var(--ed-body); } .ed .cmap-steps li::before { content:counter(cstep,decimal-leading-zero); position:absolute; left:0; top:.1em; font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--ed-accent); } .ed .cmap-wave { border-top:1px solid var(--ed-rule); padding-top:var(--space-4); margin-top:var(--space-4); } .ed .cmap-wave:first-of-type { border-top:0; padding-top:0; margin-top:0; } .ed .cmap-wave-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; margin-bottom:.3rem; } .ed .cmap-wave-label { font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--ed-accent); text-transform:uppercase; } .ed .cmap-wave-meta { font-family:var(--font-mono); font-size:11px; color:var(--ed-quiet); } .ed .cmap-wave p { margin:0; font-size:13.5px; line-height:1.6; color:var(--ed-body); } .ed .cmap-list { margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.55rem; } .ed .cmap-list li { font-size:13.5px; line-height:1.6; color:var(--ed-body); } .ed .cmap-list li::marker { color:var(--ed-accent); } .ed .cmap-list--warn li::marker { color:var(--mo-warning); } .ed .cmap-domain { border:1px solid var(--ed-rule); background:var(--ed-paper-alt); margin-bottom:var(--space-4); overflow:hidden; } .ed .cmap-domain>summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--space-4); padding:var(--space-6) var(--space-6); transition:background var(--duration-base) var(--ease-out); } .ed .cmap-domain>summary:hover { background:var(--ed-paper-alt); } .ed .cmap-domain>summary::-webkit-details-marker { display:none; } .ed .cmap-domain>summary::after { content:""; width:8px; height:8px; flex-shrink:0; margin-left:auto; border-right:1.5px solid var(--ed-quiet); border-bottom:1.5px solid var(--ed-quiet); transform:rotate(45deg); transition:transform var(--duration-base) var(--ease-out); } .ed .cmap-domain[open]>summary::after { transform:rotate(-135deg); } .ed .cmap-domain[open]>summary { border-bottom:1px solid var(--ed-rule); } .ed .cmap-num { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ed-quiet); flex-shrink:0; } .ed .cmap-name { font-family:var(--font-display); font-size:16.5px; font-weight:600; color:var(--ed-ink); line-height:1.3; } .ed .cmap-prio { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:.14rem .55rem; border-radius:999px; border:1px solid var(--ed-rule); color:var(--ed-quiet); flex-shrink:0; } .ed .cmap-prio--now { color:var(--mo-black); background:var(--ed-accent); border-color:var(--ed-accent); } .ed .cmap-prio--next { color:var(--ed-accent); border-color:var(--ed-accent); } .ed .cmap-body { padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-6); } .ed .cmap-grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:var(--space-6); } .ed .cmap-field .block-label { display:block; margin-bottom:.45rem; } .ed .cmap-field>p { margin:0; font-size:14px; line-height:1.65; color:var(--ed-body); } .ed .cmap-field .cmap-steps li { font-size:14px; } .ed .cmap-who { display:flex; flex-direction:column; } .ed .cmap-who-row { display:flex; flex-wrap:wrap; gap:.3rem var(--space-6); justify-content:space-between; padding:.7rem 0; border-bottom:1px solid var(--ed-rule); } .ed .cmap-who-row:last-child { border-bottom:0; padding-bottom:0; } .ed .cmap-who-row:first-child { padding-top:0; } .ed .cmap-who-main { flex:1 1 380px; min-width:0; } .ed .cmap-who-arch { display:block; font-size:14px; font-weight:600; color:var(--ed-ink); line-height:1.45; } .ed .cmap-who-ex { display:block; font-size:13px; line-height:1.55; color:var(--ed-body); margin-top:.15rem; } .ed .cmap-who-where { flex:0 1 300px; font-family:var(--font-mono); font-size:11px; line-height:1.6; color:var(--ed-quiet); } .ed .cmap-q { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:.7rem var(--space-6); } .ed .cmap-q li { font-size:14px; line-height:1.6; color:var(--ed-body); padding-left:1.3rem; position:relative; } .ed .cmap-q li::before { content:"?"; position:absolute; left:0; top:0; color:var(--ed-accent); font-family:var(--font-mono); font-weight:600; } .ed .cmap-goal { border-left:3px solid var(--ed-accent); background:var(--ed-accent-soft); padding:var(--space-4) var(--space-6); } .ed .cmap-goal .block-label { color:var(--ed-accent); display:block; margin-bottom:.35rem; } .ed .cmap-goal p { margin:0; font-size:14px; line-height:1.65; color:var(--ed-ink); } .ed .cmap-cta { border:1px solid var(--ed-accent); background:var(--ed-accent-soft); padding:var(--space-8) var(--space-6); text-align:center; } .ed .mwalk { border:1px solid var(--ed-rule); background:var(--ed-paper-alt); padding:var(--space-6); margin:0 0 var(--space-6); } .ed .mwalk-bar { display:flex; gap:4px; margin-bottom:var(--space-4); } .ed .mwalk-seg { flex-basis:0; border:0; cursor:pointer; background:var(--ed-paper-alt); color:var(--ed-quiet); font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:.45rem .3rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out); } .ed .mwalk-seg:hover { color:var(--ed-body); } .ed .mwalk-seg.is-active { background:var(--ed-accent-soft); color:var(--ed-accent); } .ed .mwalk-rail { display:flex; align-items:center; gap:0; overflow-x:auto; padding:.55rem .2rem; margin-bottom:var(--space-4); position:relative; } .ed .mwalk-rail::-webkit-scrollbar { height:6px; } .ed .mwalk-dot { flex:1 0 auto; min-width:26px; height:30px; border:0; background:transparent; cursor:pointer; position:relative; padding:0; } .ed .mwalk-dot::before { content:""; position:absolute; left:0; right:0; top:50%; border-top:2px dashed rgba(255,255,255,.16); } .ed .mwalk-dot::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:10px; height:10px; border-radius:50%; background:var(--ed-paper-alt); border:1.5px solid var(--ed-quiet); transition:transform var(--duration-fast) var(--ease-out); } .ed .mwalk-dot:hover::after { transform:translate(-50%,-50%) scale(1.35); } .ed .mwalk-dot.is-done::before { border-top-color:rgba(79,201,154,.4); } .ed .mwalk-dot.is-active::after { transform:translate(-50%,-50%) scale(1.5); } .ed .mwalk-dot:focus-visible { outline:2px solid var(--ed-accent); outline-offset:2px; } .ed .mwalk-controls { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-4); } .ed .mwalk-prev, .ed .mwalk-next { background:var(--ed-paper-alt); color:var(--ed-body); border:1px solid var(--ed-rule); font-family:var(--font-body); font-size:13px; padding:7px 14px; cursor:pointer; transition:background var(--duration-fast) var(--ease-out); } .ed .mwalk-prev:hover:not(:disabled), .ed .mwalk-next:hover:not(:disabled) { background:var(--ed-paper-alt); } .ed .mwalk-prev:disabled, .ed .mwalk-next:disabled { opacity:.35; cursor:default; } .ed .mwalk-count { font-family:var(--font-mono); font-size:12px; color:var(--ed-quiet); } .ed .mwalk-panel { border-top:1px solid var(--ed-rule); padding:var(--space-6) 0 var(--space-2); } .ed .mwalk-ready .mwalk-panel { display:none; border-top:0; padding-top:var(--space-2); } .ed .mwalk-ready .mwalk-panel.is-active { display:block; animation:mwalk-in var(--duration-base) var(--ease-out); } .ed .mwalk-phead { display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:baseline; margin-bottom:.4rem; } .ed .mwalk-pnum { font-family:var(--font-mono); font-size:11px; color:var(--ed-quiet); } .ed .mwalk-ptag { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ed-quiet); } .ed .mwalk-panel h3 { font-size:19px; margin:0 0 .5rem; color:var(--ed-ink); } .ed .mwalk-panel--h h3 { color:var(--mo-accent-strong); } .ed .mwalk-panel--r h3 { color:var(--ed-accent); } .ed .mwalk-panel p { margin:0 0 .6rem; font-size:14.5px; line-height:1.65; color:var(--ed-body); max-width:720px; } .ed .mwalk-loop { display:inline-block; font-family:var(--font-mono); font-size:11.5px; color:var(--ed-accent); border:1px dashed rgba(79,201,154,.5); border-radius:999px; padding:.2rem .7rem; margin:0 0 .6rem; } .ed .mwalk-link { font-size:14px; } .ed .mwalk-nojs { font-family:var(--font-mono); font-size:11.5px; color:var(--ed-quiet); margin:0 0 var(--space-4); } .ed .mwalk-ready .mwalk-nojs { display:none; } .ed .pd-toast.is-on { display: inline-block; } .ed .pd-machine { border: 1px solid var(--ed-rule); background: var(--ed-paper-alt); padding: var(--space-6); } .ed .pd-machine-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-6); } .ed .pd-machine-name { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ed-ink); } .ed .pd-machine-model { font-family: var(--font-mono); font-size: 11.5px; color: var(--ed-quiet); } .ed .pd-live { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ed-accent); display: inline-flex; align-items: center; gap: .45rem; } .ed .pd-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ed-accent); animation: pd-pulse 1.6s ease-in-out infinite; } .ed .pd-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .ed .pd-metric { border: 1px solid var(--ed-rule); padding: var(--space-3) var(--space-4); background: var(--mo-black); } .ed .pd-metric-num { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--ed-ink); font-variant-numeric: tabular-nums; } .ed .pd-metric-label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ed-quiet); margin-top: .2rem; } .ed .pd-machine.is-offline .pd-live { color: var(--ed-quiet); } .ed .pd-machine.is-offline .pd-live .dot { animation: none; background: var(--ed-quiet); opacity: 1; } .ed .pd-machine.is-offline .pd-progress-bar { animation: none; background: var(--ed-rule); } .ed .pd-machine.is-offline .pd-metric-num, .ed .pd-machine.is-offline .pd-job, .ed .pd-machine.is-offline .pd-progress-meta, .ed .pd-machine.is-offline .pd-ams { opacity: .45; } .ed .pd-queue { border: 1px solid var(--ed-rule); background: var(--ed-paper-alt); padding: var(--space-6); } .ed .pd-qrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--ed-rule); } .ed .pd-qrow:last-child { border-bottom: 0; padding-bottom: 0; } .ed .pd-chip { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: .22rem .7rem; border: 1px solid var(--ed-rule); color: var(--ed-quiet); flex: none; } .ed .pd-chip--printing { border-color: var(--ed-accent); color: var(--ed-accent); background: var(--ed-accent-soft); } .ed .pd-chip--next { border-color: var(--mo-info); color: var(--mo-info); } .ed .pd-qname { font-family: var(--font-mono); font-size: 13px; color: var(--ed-body); overflow-wrap: anywhere; min-width: 0; } .ed .pd-qmeta { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--ed-quiet); font-variant-numeric: tabular-nums; } .ed .pd-machine--mini .pd-machine-head { margin-bottom: var(--space-4); } .ed .tr-chart { position: relative; margin: var(--space-6) 0 var(--space-2); } .ed .tr-chart svg { display: block; width: 100%; height: auto; max-width: 640px; } .ed .tr-tip { position: absolute; display: none; transform: translate(-50%, -115%); background: var(--ed-paper-alt); border: 1px solid var(--ed-rule); padding: .4rem .7rem; font-family: var(--font-mono); font-size: 11.5px; color: var(--ed-body); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; } .ed .tr-tip.is-on { display: block; } .ed .tr-chart-note { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--ed-quiet); margin-top: var(--space-2); max-width: 520px; } .ed .flow-title { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; } .ed .mwalk-flow .mwalk-nojs { display: none; } .ed .mwalk-flow .mwalk-panel { display: block; } .ed .mwalk-flow .mwalk-panel + .mwalk-panel { margin-top: var(--space-4); } .ed .race-sortchips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .ed .race-sortchips-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-quiet); } .ed .race-sortchips .chip.is-active { color: var(--ed-accent); border-color: var(--ed-accent); } .ed .thesis-artifact { margin: var(--space-6) 0 0; max-width: var(--measure); } .ed .froya-hero { margin:var(--space-6) 0 0; } .ed .froya-hero img, .ed .froya-piece img { display:block; width:100%; height:auto; background:#F4EDE3; } .ed .froya-hero figcaption { margin-top:var(--space-3); font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ed-quiet); } .ed .froya-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); gap:var(--space-6); margin:var(--space-6) 0; } .ed .froya-piece { margin:0; display:flex; flex-direction:column; gap:var(--space-3); } .ed .froya-piece--wide { margin:var(--space-6) 0 0; } .ed .froya-piece figcaption { display:flex; flex-direction:column; gap:.25rem; } .ed .froya-meta { display:flex; flex-wrap:wrap; gap:.5rem .8rem; align-items:baseline; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; } .ed .froya-status { color:var(--ed-accent); } .ed .froya-code { color:var(--ed-quiet); } .ed .froya-name { font-family:var(--font-display); font-size:17px; font-weight:600; color:var(--ed-ink); } .ed .froya-desc { font-size:13.5px; line-height:1.6; color:var(--ed-quiet); } @media (max-width: 900px) { .ed .flow { flex-direction: column; } .ed .flow-arrow { transform: rotate(45deg); margin: -2px 0; } .ed .hero-quote { display: none; } .ed .hero-inner { flex-direction: column; } .ed .index-table { overflow-x: auto; } .ed .index-head, .ed .index-row { grid-template-columns: 86px 1fr 1fr 168px; } .ed .cell-what { display: none; } .ed .score-row { grid-template-columns: 1fr; } .ed .score-options { justify-content: flex-start; } } @media (prefers-reduced-motion: reduce) { .ed .pd-live { animation: none; } } @media (max-width: 640px) { .ed .hero { padding: var(--space-12) var(--space-6); } .ed .hero-inner { gap: var(--space-8); } .ed .hero-watermark { width: 300px; right: -70px; bottom: -90px; } .ed .hero-stats { flex-direction: row; flex-wrap: wrap; gap: var(--space-6) var(--space-8); border-left: 0; border-top: 1px solid var(--ed-rule); padding-left: 0; padding-top: var(--space-6); margin-top: 0; width: 100%; } .ed .section-index, .ed .section-open { padding: var(--space-12) var(--space-6); } .ed .index-head { display: none; } .ed .index-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id status" "name status" "domain status"; row-gap: 3px; padding: var(--space-4); } .ed .index-row .row-id { grid-area: id; } .ed .index-row .row-name { grid-area: name; } .ed .index-row .row-domain { grid-area: domain; } .ed .index-row .badge { grid-area: status; align-self: center; } .ed .pred-note { grid-column: 1 / -1; } .ed .pd-machine { padding: var(--space-4); } .ed .pd-live { margin-left: 0; width: 100%; } .ed .pd-queue { padding: var(--space-4); } .ed .pd-qmeta { margin-left: 0; width: 100%; } .ed .robot-tablewrap { overflow-x: visible; } .ed .race-sortchips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); flex-basis: 100%; } } @media (max-height: 500px) and (orientation: landscape) { .ed .hero { padding-top: var(--space-8); padding-bottom: var(--space-8); } } @media (pointer: coarse) { .ed .score-options label { padding: var(--space-1) 0; } .ed .chip { padding: 11px var(--space-4); } .ed .mwalk-dot { height: 44px; min-width: 40px; } .ed .mwalk-seg { padding: var(--space-3) var(--space-2); } } @media(max-width:640px) { .ed .company-card .cc-flagship { margin-left:0; flex-basis:100%; } .ed .race-count { margin-left:0; flex-basis:100%; } .ed .cmap-domain>summary { flex-wrap:wrap; } .ed .cmap-name { flex-basis:70%; } } @media (max-width: 1010px) { .ed .mwalk-bar { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; } .ed .mwalk-seg { flex: 0 0 auto; flex-basis: auto; overflow: visible; text-overflow: clip; } } @media (min-width: 641px) { .ed .flow { flex-wrap: wrap; gap: var(--space-4); } .ed .flow-step { flex: 1 1 280px; } .ed .flow-arrow { display: none; } } /* ========================================================================== Editorial rollout, the shortfall. These are site.css rules the first port DROPPED. It skipped any class that already had an editorial rule — correct for avoiding overrides, wrong for a class a hand-written rule only touched in passing. The grouped rule `.ed .ex-table, .ed .pred-table, .ed .robot-table, … { min-width: 30rem }` claimed five classes, so every OTHER rule those five had was skipped — including the tracker table's whole mobile card layout (thead{display:none}, tr{display:grid}, min-width:0). The result was a 720px table on a 375px screen: /humanoid-race scrolled sideways by 382px. Only (at-rule, selector) pairs absent from this file are emitted, so the hand-written base rules stay authoritative and only the detail and responsive rules they displaced come back. 163 rules across 48 partially-ported classes. Regenerate with: node tools/find-dropped-rules.mjs --emit ========================================================================== */ .ed .top-nav { view-transition-name: site-nav; } .ed .footer { view-transition-name: site-footer; } .ed .top-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding: var(--space-4) max(var(--space-8), calc((100% - 1016px) / 2)); border-bottom: 1px solid var(--ed-rule); background: var(--mo-black); position: sticky; top: 0; z-index: 10; } .ed .wordmark { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ed-ink); } .ed .nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-6); } .ed .nav-link { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-quiet); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } .ed .nav-link:hover { color: var(--ed-body); } .ed .nav-link.is-active, .ed .nav-link.is-active:hover { color: var(--ed-accent); } .ed .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1.2; padding: 9px 18px; cursor: pointer; text-decoration: none; transition: background var(--duration-fast) var(--ease-out); } .ed .badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--ed-paper-alt); border: 1px solid var(--ed-rule); color: var(--ed-quiet); } .ed .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ed-quiet); } .ed .badge--concept .dot { background: var(--mo-info); } .ed .badge--active { background: var(--ed-accent-soft); border-color: var(--ed-accent); color: var(--ed-accent); } .ed .badge--active .dot { background: var(--ed-accent); } .ed .badge--merged { border-style: dashed; color: var(--ed-accent); } .ed .badge--merged .dot { background: var(--ed-accent); opacity: 0.6; } .ed .stat { display: flex; flex-direction: column; gap: 4px; } .ed .stat-num { font-family: var(--font-display); font-size: 34px; font-weight: 600; color: var(--ed-ink); } .ed .stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-quiet); } .ed .project-main { max-width: 1080px; margin: 0 auto; padding: var(--space-12) var(--space-8) var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); } .ed .project-main > * { min-width: 0; } .ed .back-link { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-quiet); } .ed .back-link:hover { color: var(--ed-accent); } .ed .project-foot { border-top: 1px solid var(--ed-rule); padding-top: var(--space-6); } .ed .project-foot span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-quiet); } .ed .principle-card { background: var(--ed-paper-alt); border: 1px solid var(--ed-rule); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); } .ed .principle-card h3 { font-size: 18px; font-weight: 600; } .ed .principle-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ed-quiet); } .ed .log-entry { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) 0; border-bottom: 1px solid var(--ed-rule); } /* h3, not h4: these entry titles follow an h2 with nothing between, so an h4 left a hole in the outline that a screen-reader user hears as a missing level. Same size, same weight — this is an outline fix, not a visual one. */ .ed .log-entry h3 { font-size: 16px; font-weight: 600; } .ed .log-entry p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ed-quiet); max-width: var(--measure); } /* ------------------------------------------- the three kinds of journal entry -- The journal publishes three different things and, until now, rendered all three identically: a weekly research note, a monthly recap, and one live log that is appended to rather than frozen. A reader scanning the index could not tell which was which, and the monthly is the one worth finding, since it concentrates a month of work into one page. So the distinction is carried by weight, not by extra words. Research is the baseline and stays quiet, because there are sixteen of them and they are the norm. The monthly recap is marked as what it structurally IS: a boundary in the sequence, closing one month and opening the next, so it gets the accent and a rule heavy enough to read as a divider when the eye runs down the list. The live log gets a dot, the same device the register uses for a status, because the one thing a reader needs to know about it is that it is not finished. Nothing here changes the entry's structure or adds a word to the page. */ .ed .log-project--research { color: var(--ed-quiet); } .ed .log-project--milestone { color: var(--ed-accent); } .ed .log-project--current { display: inline-flex; align-items: center; gap: 0.45em; } /* The dot is drawn from currentColor like .badge .dot, so it cannot drift from the label it belongs to. */ .ed .log-project--current::before { content: ""; width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; flex: 0 0 auto; } /* The month boundary. A 2px accent rule on top of the entry that closes the month, which is why it sits on border-top and not on a pseudo-element: the rule IS the boundary between two months of entries, in the place that boundary falls. */ .ed .log-entry--milestone { border-top: 2px solid var(--ed-accent); padding-top: calc(var(--space-4) + 0.2rem); } .ed .log-entry--milestone h3 a { color: var(--ed-ink); } /* On the note pages themselves, the same three kinds, same logic. */ .ed .tag--milestone { color: var(--ed-accent); border-color: var(--ed-accent); } .ed .tag--current { display: inline-flex; align-items: center; gap: 0.5em; } .ed .tag--current::before { content: ""; width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .ed .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .ed .compare-panel--accent { border-color: var(--ed-accent); } .ed .compare-panel--accent .compare-label { color: var(--ed-accent); } .ed .compare-panel--accent .link-arrow { color: var(--ed-accent); } .ed .example-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ed-quiet); max-width: var(--measure-note); } .ed .ex-tablewrap { overflow-x: auto; } .ed .ex-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; } .ed .ex-table th { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ed-quiet); font-weight: 400; text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--ed-rule); white-space: nowrap; } .ed .ex-table td { padding: 6px 10px; border-bottom: 1px solid var(--ed-rule); color: var(--ed-body); white-space: nowrap; } .ed .ex-table tr:last-child td { border-bottom: 0; } .ed .ex-table .lvl-1 td:first-child { padding-left: 26px; } .ed .ex-table .lvl-2 td:first-child { padding-left: 42px; } .ed .ex-flag { color: var(--ed-accent); } .ed .ex-dim { color: var(--ed-quiet); } .ed .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: var(--space-6) var(--space-8); padding: var(--space-4) 0; } .ed .stat-row .stat { min-width: 0; } .ed .osd-note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ed-quiet); max-width: 680px; } .ed .osd-note a { color: var(--ed-accent); } .ed a.principle-card { text-decoration: none; transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .ed a.principle-card:hover { background: var(--ed-paper-alt); border-color: var(--ed-accent); } .ed .footer { border-top: 1px solid var(--ed-rule); background: var(--mo-black); padding: var(--space-16) max(var(--space-8), calc((100% - 1016px) / 2)) var(--space-8); } .ed .footer-cols { display: flex; gap: var(--space-16); flex-wrap: wrap; } .ed .footer-link { font-size: 13px; color: var(--ed-body); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } .ed .footer-link:hover { color: var(--ed-accent); } .ed .footer-license, .ed .footer-license:hover { color: var(--ed-quiet); text-decoration: underline; text-underline-offset: 2px; } .ed .footer-license:hover { color: var(--ed-accent); } .ed .badge--open .dot { background: var(--ed-quiet); } .ed .badge--correct .dot { background: var(--ed-accent); } .ed .badge--partly .dot { background: var(--mo-warning); } .ed .badge--wrong .dot { background: var(--mo-error); } .ed .pred-row { display: grid; grid-template-columns: 64px 1fr 118px 110px; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-6); border-top: 1px solid var(--ed-rule); } .ed .pred-row:first-child { border-top: 0; } /* DEEP LINKS INTO THE REGISTER. Every .pred-row carries id="p-NN", so anything on the site that cites a claim can link straight to it — the homepage's maturity-index note and section 01 both do. Two things make the landing readable rather than a silent jump: :root already sets scroll-padding-top: 6.5rem in editorial.css, which the browser applies to anchor navigation, so the row clears the sticky masthead without a per-element scroll-margin. It is repeated here anyway because scroll-padding lives on the scroller and a future overflow container between the two would silently drop it. And the row says which one it is. Without a :target style, arriving at P-01 in a list of twenty-nine leaves the reader hunting for the row they asked for. The accent bar is inset so it does not shift the grid, and the flash is behind prefers-reduced-motion — the bar and tint carry the meaning on their own, so nothing is lost when the animation is suppressed. */ .ed .pred-row { scroll-margin-top: 6.5rem; } /* ----------------------------------------- the deadline strip on /predictions -- Geometry arrives as inline styles from src/lib/predictions-timeline.mjs. NOTHING here sizes or positions a bar: no custom property, no calc, and deliberately no transition on height. An earlier design did all three and its bars rendered one toggle behind, because Chrome stops re-resolving a calc that reads a custom property changed on an ancestor. Only colour and transform animate. Expansion is a native

, so the closed state is the compact strip inside the

and the open state adds .pt__years. No state in JavaScript, and no height for anything to compute wrongly. */ .ed .pt { margin: 0 0 2.25rem; border: 1px solid var(--ed-rule); border-radius: 2px; } .ed .pt__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.9rem; cursor: pointer; list-style: none; } .ed .pt__head::-webkit-details-marker { display: none; } .ed .pt__head:focus-visible { outline: 2px solid var(--ed-accent); outline-offset: -2px; } .ed .pt__lede { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .ed .pt__title { font: var(--ed-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ed-quiet); } .ed .pt__sub { font-size: 0.9rem; color: var(--ed-ink); } /* Drawn, not a glyph, so it needs no font and cannot fall back to a box. */ .ed .pt__toggle { flex: none; width: 9px; height: 9px; border-right: 1.5px solid var(--ed-quiet); border-bottom: 1.5px solid var(--ed-quiet); transform: rotate(45deg); transform-origin: center; } .ed .pt[open] .pt__toggle { transform: rotate(225deg); } @media (prefers-reduced-motion: no-preference) { .ed .pt__toggle { transition: transform 0.18s var(--ed-ease, ease); } } .ed .pt__plot { padding: 0.55rem 0.9rem 0; } /* The track reserves the tallest bar's height, so the strip never reflows when the busiest year changes. Bars are positioned from the baseline and grow upward. */ .ed .pt__bars { position: relative; height: 34px; border-bottom: 1px solid var(--ed-rule); } .ed .pt__bar { position: absolute; bottom: 0; width: 6px; margin-left: -3px; background: var(--ed-accent); text-decoration: none; border-radius: 1px 1px 0 0; } .ed .pt__bar--settled { background: var(--ed-quiet); } .ed .pt__bar:hover, .ed .pt__bar:focus-visible { background: var(--ed-ink); outline: none; } /* The count sits above its own bar and is allowed to overflow the track, which is why the plot carries top padding rather than the bars carrying margins. */ .ed .pt__n { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font: var(--ed-label); font-size: 10px; line-height: 1.4; color: var(--ed-quiet); } .ed .pt__bar:hover .pt__n, .ed .pt__bar:focus-visible .pt__n { color: var(--ed-ink); } .ed .pt__axis { position: relative; height: 1.35rem; } .ed .pt__tick { position: absolute; transform: translateX(-50%); padding-top: 0.25rem; font: var(--ed-label); font-size: 10px; color: var(--ed-quiet); white-space: nowrap; } /* The end ticks are pinned inside the box rather than centred, or half of each would sit outside the padding at the two ends of the axis. */ .ed .pt__tick:first-child { transform: none; } .ed .pt__tick:last-child { transform: translateX(-100%); } .ed .pt__years { display: grid; gap: 0.1rem; padding: 0.5rem 0.9rem 0; } .ed .pt__year { display: grid; grid-template-columns: 3.2rem 7.5rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; padding: 0.3rem 0; border-top: 1px solid var(--ed-rule); } .ed .pt__year-n { font: var(--ed-label); font-size: 11px; color: var(--ed-ink); } .ed .pt__year-c { font: var(--ed-label); font-size: 10px; color: var(--ed-quiet); } .ed .pt__ids { display: flex; flex-wrap: wrap; gap: 0.3rem; } .ed .pt__id { font: var(--ed-label); font-size: 10px; padding: 0.1rem 0.3rem; border: 1px solid var(--ed-rule); border-radius: 2px; color: var(--ed-ink); text-decoration: none; } .ed .pt__id:hover, .ed .pt__id:focus-visible { border-color: var(--ed-accent); color: var(--ed-accent); } .ed .pt__id--settled { color: var(--ed-quiet); } .ed .pt__note { margin: 0.6rem 0 0; padding: 0 0.9rem 0.8rem; font-size: 0.82rem; color: var(--ed-quiet); } /* Narrow screens keep the bars' real spacing, since the clustering is the point, and stack the year rows so the claim chips are not squeezed into a third width. */ @media (max-width: 34rem) { .ed .pt__year { grid-template-columns: 3.2rem minmax(0, 1fr); row-gap: 0.2rem; } .ed .pt__ids { grid-column: 1 / -1; } } /* Coarse pointers get a wider hit area without changing how the bar looks. */ @media (pointer: coarse) { .ed .pt__bar { width: 10px; margin-left: -5px; } } /* ---------------------------------------- a cited heading marks itself --------- tools/anchor-headings.mjs now gives every h2/h3 an id, so anything can link to a passage: the planned chat, llms.txt, one journal note citing another, or a reader quoting this site elsewhere. Landing at the right scroll offset is not enough. The reader arrives mid-page with no idea WHICH of the things in front of them was the thing referenced, which is the complaint that started this. So a targeted heading marks itself, in the same grammar the register rows already use for :target, because a reader who has seen one recognises the other. Specificity note: `.ed :where(h2, h3)` is (0,1,0) and loses to the plain `.ed .block-label` rules that also style headings. Adding :target puts this at (0,2,0), which wins. That trap has bitten this stylesheet before. Scroll offset is already handled: editorial.css sets scroll-padding-top: 6.5rem on :root, so a jumped anchor clears the sticky masthead. */ .ed :where(h2, h3):target { background: var(--ed-accent-soft); box-shadow: inset 3px 0 0 var(--ed-accent), 0 0 0 0.45rem var(--ed-accent-soft); border-radius: 1px; } @media (prefers-reduced-motion: no-preference) { .ed :where(h2, h3):target { animation: ed-target-flash 2s var(--ed-ease) 1; } } /* A native text fragment (#:~:text=) is what lights up the exact SENTENCE in Chrome and Safari, and it needs no code at all. Firefox ignores the fragment and still lands on the heading, which is why a citation should carry both. The browser's default highlight is overridden so it reads as this site, not as yellow. */ ::target-text { background: var(--ed-accent-soft); color: var(--ed-ink); } .ed .pred-row:target { background: var(--ed-accent-soft); box-shadow: inset 3px 0 0 var(--ed-accent); } .ed .pred-row:target .pred-claim { color: var(--ed-ink); } @media (prefers-reduced-motion: no-preference) { .ed .pred-row:target { animation: ed-target-flash 2s var(--ed-ease) 1; } @keyframes ed-target-flash { 0%, 10% { background: rgba(79, 201, 154, 0.26); } 100% { background: var(--ed-accent-soft); } } } .ed .pred-claim { font-size: 14px; line-height: 1.6; color: var(--ed-body); } .ed .pred-deadline { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ed-quiet); } .ed .qa { display: flex; flex-direction: column; gap: var(--space-2); } .ed .qa h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .ed .qa p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ed-body); max-width: 680px; } .ed .qa p a { color: var(--ed-accent); } .ed .artifact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: var(--space-4); } .ed .artifact-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } .ed .tool-field { display: flex; flex-direction: column; gap: var(--space-2); } .ed .tool-field > label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-quiet); } .ed .tool-field select { appearance: none; background: var(--ed-paper-alt); color: var(--ed-body); border: 1px solid var(--ed-rule); padding: 9px 36px 9px 12px; font-family: var(--font-body); font-size: 14px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239BA39F' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color var(--duration-fast) var(--ease-out); } .ed .tool-field select:focus { outline: none; border-color: var(--ed-accent); } .ed .wordmark { text-decoration: none; } .ed a.wordmark { cursor: pointer; transition: color var(--duration-base) var(--ease-out); } .ed a.wordmark:hover { color: var(--ed-accent); } .ed .race-subnav { display:flex; flex-wrap:wrap; gap:.4rem; margin:var(--space-6) 0 0; padding-bottom:var(--space-6); border-bottom:1px solid var(--ed-rule); } .ed .race-subnav a { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ed-quiet); text-decoration:none; padding:.32rem .7rem; border:1px solid var(--ed-rule); border-radius:999px; transition:color .18s,border-color .18s; } .ed .race-subnav a:hover { color:var(--ed-accent); border-color:var(--ed-accent); } .ed .chip.is-active { color:var(--mo-black); background:var(--ed-accent); border-color:var(--ed-accent); } .ed .robot-table tr.is-hidden { display:none; } .ed .robot-table { width:100%; border-collapse:collapse; font-size:13.5px; min-width:720px; } .ed .robot-table th, .ed .robot-table td { text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--ed-rule); vertical-align:top; } .ed .robot-table thead th { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ed-quiet); background:var(--mo-black); position:sticky; top:0; } .ed .robot-table th.sortable { cursor:pointer; user-select:none; white-space:nowrap; } .ed .robot-table th.sortable:hover { color:var(--ed-body); } .ed .robot-table th .sort-arrow { margin-left:.25rem; opacity:.35; font-size:9px; } .ed .robot-table th[aria-sort] .sort-arrow { opacity:1; color:var(--ed-accent); } .ed .robot-table .r-name { color:var(--ed-ink); font-weight:600; } .ed .robot-table tr.r-current .r-name-cell { border-left:2px solid var(--ed-accent); padding-left:.5rem; } .ed .robot-table .r-sub { color:var(--ed-quiet); font-size:11px; margin-top:.15rem; } .ed .robot-table .r-def { color:var(--ed-quiet); font-size:12px; line-height:1.4; margin-top:.2rem; max-width:34ch; } .ed .robot-table .r-maker { white-space:nowrap; color:var(--ed-body); font-size:12.5px; } .ed .robot-table .r-maker .rg-flag { margin-right:.3rem; } .ed .robot-table .r-price { font-family:var(--font-mono); white-space:nowrap; color:var(--ed-body); } .ed .race-source { font-size:11px; } .ed .race-source a { color:var(--ed-quiet); } .ed .cl-date { font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--ed-quiet); } .ed .mwalk-seg.is-active { background:var(--ed-accent-soft); color:var(--ed-accent); } .ed .mwalk-dot.is-active::after { transform:translate(-50%,-50%) scale(1.5); } .ed .mwalk-ready .mwalk-panel.is-active { display:block; animation:mwalk-in var(--duration-base) var(--ease-out); } .ed .pd-toast { display: none; font-family: var(--font-mono); font-size: 12px; color: var(--ed-accent); border: 1px dashed rgba(79, 201, 154, .5); border-radius: 999px; padding: .35rem .9rem; margin-top: var(--space-4); } .ed .pd-toast.is-on { display: inline-block; } .ed .pd-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ed-accent); animation: pd-pulse 1.6s ease-in-out infinite; } .ed .pd-job { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-2); } .ed .pd-progress-bar { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--ed-accent), #7fe0b8); background-size: 200% 100%; animation: pd-shimmer 2.4s linear infinite; transition: width .8s ease; } .ed .pd-progress-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-family: var(--font-mono); font-size: 11.5px; color: var(--ed-quiet); font-variant-numeric: tabular-nums; } .ed .pd-ams { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0; } .ed .pd-ams-slot.is-active { border-color: var(--ed-accent); color: var(--ed-accent); } .ed .pd-form-actions .btn { min-height: 44px; padding-block: 10px; justify-content: center; } .ed .pd-machine.is-offline .pd-live { color: var(--ed-quiet); } .ed .pd-machine.is-offline .pd-live .dot { animation: none; background: var(--ed-quiet); opacity: 1; } .ed .pd-machine.is-offline .pd-progress-bar { animation: none; background: var(--ed-rule); } .ed .pd-machine.is-offline .pd-metric-num, .ed .pd-machine.is-offline .pd-job, .ed .pd-machine.is-offline .pd-progress-meta, .ed .pd-machine.is-offline .pd-ams { opacity: .45; } .ed .pd-machine--mini { padding: var(--space-4) var(--space-6); } .ed .pd-machine--mini .pd-machine-head { margin-bottom: var(--space-4); } .ed .pd-fil.is-offline .pd-fil-card { opacity: .6; } .ed .ex-table td.ex-dim { color: var(--ed-quiet); } .ed .ex-table td.ex-flag { color: var(--ed-accent); } .ed .race-source a, .ed .example-note a { color: var(--ed-body); border-bottom: 1px solid var(--ed-accent-soft); text-decoration: none; } .ed .race-source a:hover, .ed .example-note a:hover { color: var(--ed-accent); border-bottom-color: var(--ed-accent); } .ed .race-sortchips .chip.is-active { color: var(--ed-accent); border-color: var(--ed-accent); } @media (max-width: 900px) { .ed .compare-grid { grid-template-columns: 1fr; } .ed .pred-row { grid-template-columns: 64px 1fr 110px; } .ed .pred-deadline { display: none; } } @media (max-width: 640px) { .ed .ex-tablewrap { overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); } .ed .ex-tablewrap::after { content: "scroll \2192"; display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-quiet); } .ed .top-nav { padding: var(--space-3) var(--space-4); } .ed .nav-links { gap: var(--space-2) var(--space-4); } .ed .stat-num { font-size: 28px; } .ed .project-main { padding: var(--space-8) var(--space-6) var(--space-16); } .ed .index-row .badge { grid-area: status; align-self: center; } .ed .pred-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2); padding: var(--space-4); } .ed .pred-row .badge { grid-row: 1; grid-column: 2; justify-self: end; } .ed .pred-claim { grid-column: 1 / -1; } .ed .tool-field select, .ed .tool-field input, .ed .tool-field textarea { font-size: 16px; } .ed .footer { padding: var(--space-12) var(--space-6) var(--space-8); } .ed .footer-cols { gap: var(--space-8) var(--space-12); } .ed .pd-jobcard-actions .btn { flex: 1 1 auto; } .ed .pd-owner-bar .btn { flex: 1 1 auto; } .ed .stat-label { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none; line-height: 1.45; } .ed .top-nav, .ed .footer { padding-inline: var(--space-6); } .ed .robot-table, .ed .robot-table tbody { display: block; min-width: 0; width: 100%; } .ed .robot-table thead { display: none; } .ed .robot-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: baseline; padding: var(--space-4); margin-bottom: var(--space-3); background: var(--ed-paper-alt); border: 1px solid var(--ed-rule); } .ed .robot-table td { border: 0; padding: 0; } .ed .robot-table td:nth-child(1) { grid-column: 1 / -1; } .ed .robot-table td:nth-child(3) { justify-self: end; text-align: right; white-space: nowrap; } .ed .robot-table td:nth-child(5) { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { .ed .pd-progress-bar { animation: none; } } @media (max-height: 500px) and (orientation: landscape) { .ed .top-nav { position: static; } } @media (pointer: coarse) { .ed .nav-link, .ed .back-link { padding: var(--space-2) 0; } .ed .btn { padding: 12px 20px; } .ed .footer-link { padding: var(--space-1) 0; } .ed .race-subnav a, .ed .cl-date { padding-block: var(--space-2); } .ed .footer-link { padding-block: var(--space-2); } .ed .nav-link { padding-block: var(--space-2); } } @media (max-width: 420px) { .ed .top-nav { padding-block: var(--space-3); row-gap: var(--space-1); } .ed .nav-links .nav-link:first-child, .ed .nav-links .nav-link[href="/humanoid-race"] { display: none; } .ed .nav-links { gap: var(--space-1) var(--space-3); } .ed .nav-link { letter-spacing: 0.04em; } }