/* ============================================================ Learning Machines — Field Manual tool shim Drop-in adapter for the interactive tools in tools/*. Load AFTER field.css. Maps the legacy lm.css token names (which every tool's inline styles consume) onto Field tokens, so tool internals restyle themselves without a rewrite. Migration per tool: 1. 2. Swap font link to Newsreader + Archivo + IBM Plex Mono. 3. Replace lm.css/theme.js links with: ../../assets/field.css ../../assets/field-tool.css ../../assets/field-theme.js 4. In the tool's own :root{}: set --radius: 2px, drop box-shadows. 5. Swap the nav block for the standard Field nav chrome. ============================================================ */ :root { /* legacy lm.css surface tokens → field tokens */ --bg-2: var(--bg); --line: var(--rule); --line-soft: var(--rule-soft); --ink-dim: var(--ink-soft); --shadow: none; --shadow-sm: none; /* accent: overridden by data-mod below */ --accent: var(--ink); --accent-2: var(--m-cross); /* derived accent shades tools commonly hardcode */ --accent-soft: color-mix(in oklab, var(--accent) 11%, var(--bg)); --accent-dark: color-mix(in oklab, var(--accent) 85%, var(--ink)); /* extended legacy map — semantic lm.css tokens the tools consume, translated into the print palette (states ride the modality inks) */ --on-accent: var(--bg); --faint: var(--muted); --code-bg: var(--surface-2); --grid-line: var(--rule-soft); --warm: var(--m-image); /* warm / warning → printed rust */ --teal: var(--m-video); /* success / ok → printed green */ --teal-dim: var(--m-video); --purple: var(--m-cross); --purple-dim: var(--m-cross); /* tag & token chip palette → modality tints (t0 text · t1 cross · t2 image · t3/t4 video · t5 image, matching tool tag classes) */ --t0: var(--m-text-tint); --t0t: var(--m-text); --t1: var(--m-cross-tint); --t1t: var(--m-cross); --t2: var(--m-image-tint); --t2t: var(--m-image); --t3: var(--m-video-tint); --t3t: var(--m-video); --t4: var(--m-video-tint); --t4t: var(--m-video); --t5: var(--m-image-tint); --t5t: var(--m-image); } html[data-mod="text"] { --accent: var(--m-text); } html[data-mod="image"] { --accent: var(--m-image); } html[data-mod="video"] { --accent: var(--m-video); } html[data-mod="cross"] { --accent: var(--m-cross); } html[data-skin]:not([data-skin="docs-field"]):not([data-skin="worksheet-print"]) { --accent: var(--skin-accent); --accent-2: var(--skin-accent-2); --accent-soft: color-mix(in oklab, var(--skin-accent) 13%, var(--bg)); --accent-dark: color-mix(in oklab, var(--skin-accent) 84%, var(--ink)); } html[data-skin="worksheet-print"][data-mod="text"] { --skin-accent: var(--m-text); --skin-accent-2: var(--poster-cyan); } html[data-skin="worksheet-print"][data-mod="image"] { --skin-accent: var(--m-image); --skin-accent-2: var(--poster-hot-pink); } html[data-skin="worksheet-print"][data-mod="video"] { --skin-accent: var(--m-video); --skin-accent-2: var(--poster-cyan); } html[data-skin="worksheet-print"][data-mod="cross"] { --skin-accent: var(--m-cross); --skin-accent-2: var(--poster-lime); } /* Worksheet pages use print-sized tables. On screen, contain them inside the worksheet section so a wide table does not widen the whole route. */ @media screen { html[data-skin="worksheet-print"] .section-body { overflow-x: auto; -webkit-overflow-scrolling: touch; } html[data-skin="worksheet-print"] .section-body > table { min-width: 560px; } } /* standard tool masthead (used when migrating .site-header markup) */ .tool-mast { max-width: 1280px; margin: 0 auto; padding: clamp(22px, 3.5vw, 36px) 24px 0; position: relative; isolation: isolate; overflow: hidden; clip-path: inset(0); } .tool-mast::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.10; mix-blend-mode: var(--poster-blend); background: radial-gradient(34% 60% at 8% 22%, var(--poster-lime) 0 12%, transparent 46%), radial-gradient(34% 56% at 86% 12%, var(--poster-violet) 0 10%, transparent 48%), linear-gradient(106deg, var(--poster-coral), transparent 30%, var(--poster-cyan) 58%, transparent 78%, var(--poster-sky)); background-size: 145% 145%, 135% 135%, 180% 180%; background-position: 0% 24%, 100% 4%, 0% 50%; } .tool-mast > * { position: relative; z-index: 1; } .tool-mast .eyebrow { margin-bottom: 12px; } .tool-mast .eyebrow .modsq { background: var(--accent); } .tool-mast h1 { font-size: clamp(28px, 4vw, 44px); max-width: 22ch; } .tool-mast .subtitle { margin-top: 10px; color: var(--ink-soft); font-size: 15px; line-height: 1.55; max-width: 62ch; } html[data-skin] .tool-mast { border-bottom: 1px solid color-mix(in oklab, var(--skin-accent) 42%, transparent); padding-bottom: clamp(18px, 3vw, 28px); } html[data-skin] .tool-mast h1, html[data-skin] body > .wrap > header:first-child h1, html[data-skin] body > nav.nav + main h1, html[data-skin] body > nav.nav + .wrap h1 { text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--skin-accent) 30%, transparent); text-decoration-thickness: 0.08em; text-underline-offset: 0.12em; } html[data-skin="text-terminal"] .tool-mast h1, html[data-skin="counting-signal"] .tool-mast h1, html[data-skin="video-slitscan"] .tool-mast h1, html[data-skin="latent-nebula"] .tool-mast h1 { text-shadow: var(--skin-glow); } /* standard teaching-model notice */ .tool-notice { max-width: 1280px; margin: 16px auto 0; padding: 0 24px; } .tool-notice-inner { border: 1px solid var(--rule); background: var(--surface); padding: 10px 14px; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--muted); max-width: 780px; } .tool-notice-inner strong { color: var(--ink); font-weight: 600; } /* subtle sampled-color wash for migrated tools and worksheet-style pages */ .tool-shell, body > .wrap > header:first-child, body > nav.nav + *:not(.wrap):not(.tool-mast):not(.tool-shell):not(.sub-hero) { position: relative; isolation: isolate; } .tool-shell > *, body > .wrap > header:first-child > *, body > nav.nav + *:not(.wrap):not(.tool-mast):not(.tool-shell):not(.sub-hero) > * { position: relative; z-index: 1; } .tool-shell::before, body > .wrap > header:first-child::before, body > nav.nav + *:not(.wrap):not(.tool-mast):not(.tool-shell):not(.sub-hero)::before { content: ""; position: absolute; inset: 0 0 auto; height: min(360px, 42vh); z-index: 0; pointer-events: none; opacity: 0.08; mix-blend-mode: var(--poster-blend); background: radial-gradient(42% 42% at 10% 18%, var(--poster-lime) 0 10%, transparent 46%), radial-gradient(38% 38% at 86% 18%, var(--poster-violet) 0 10%, transparent 48%), radial-gradient(44% 42% at 70% 84%, var(--poster-cyan) 0 12%, transparent 54%), linear-gradient(118deg, var(--poster-coral), transparent 30%, var(--poster-mint) 58%, transparent 78%, var(--poster-sky)); background-size: 150% 150%, 140% 140%, 160% 160%, 190% 190%; background-position: 0% 20%, 100% 4%, 76% 88%, 0% 50%; } html[data-skin] .tool-mast::before, html[data-skin] .tool-shell::before, html[data-skin] body > .wrap > header:first-child::before, html[data-skin] body > nav.nav + *:not(.wrap):not(.tool-mast):not(.tool-shell):not(.sub-hero)::before { opacity: 0.14; background: radial-gradient(42% 42% at 10% 18%, var(--skin-accent) 0 10%, transparent 46%), radial-gradient(38% 38% at 86% 18%, var(--skin-accent-2) 0 10%, transparent 48%), radial-gradient(44% 42% at 70% 84%, var(--poster-cyan) 0 12%, transparent 54%), linear-gradient(118deg, var(--poster-coral), transparent 30%, var(--poster-mint) 58%, transparent 78%, var(--poster-sky)); } html[data-skin] .tool-shell, html[data-skin] body > nav.nav + main, html[data-skin] body > nav.nav + .wrap { border-top-color: color-mix(in oklab, var(--skin-accent) 38%, var(--rule)); } html[data-skin] .panel, html[data-skin] .card, html[data-skin] .control-card, html[data-skin] .controls, html[data-skin] .output-card, html[data-skin] .result-card, html[data-skin] .tier-card, html[data-skin] .prompt-card, html[data-skin] .example-card, html[data-skin] .case-button, html[data-skin] .choice, html[data-skin] .tile, html[data-skin] .paste-panel textarea, html[data-skin] .consent-banner, html[data-skin] .import-notice { border-color: color-mix(in oklab, var(--skin-accent) 30%, var(--rule)); } html[data-skin] .panel, html[data-skin] .card, html[data-skin] .control-card, html[data-skin] .output-card, html[data-skin] .result-card, html[data-skin] .tier-card, html[data-skin] .prompt-card, html[data-skin] .example-card, html[data-skin] .tile { background: linear-gradient(135deg, color-mix(in oklab, var(--skin-accent) 5%, transparent), transparent 56%), var(--surface); } html[data-skin] button:focus-visible, html[data-skin] a:focus-visible, html[data-skin] textarea:focus-visible, html[data-skin] input:focus-visible, html[data-skin] select:focus-visible { outline: 2px solid color-mix(in oklab, var(--skin-accent) 80%, var(--ink)); outline-offset: 3px; } html[data-skin] .ctrl-btn.primary, html[data-skin] .btn-primary { background: color-mix(in oklab, var(--skin-accent) 84%, var(--ink)); border-color: color-mix(in oklab, var(--skin-accent) 84%, var(--ink)); } html[data-skin] .ctrl-btn:hover, html[data-skin] .choice:hover, html[data-skin] .case-button:hover { border-color: color-mix(in oklab, var(--skin-accent) 72%, var(--ink)); color: color-mix(in oklab, var(--skin-accent) 72%, var(--ink)); } @media (prefers-reduced-motion: no-preference) { .tool-mast::before, .tool-shell::before, body > .wrap > header:first-child::before, body > nav.nav + *:not(.wrap):not(.tool-mast):not(.tool-shell):not(.sub-hero)::before { animation: subtle-tool-wash 20s ease-in-out infinite alternate; } @keyframes subtle-tool-wash { 0% { background-position: 0% 20%, 100% 4%, 76% 88%, 0% 50%; } 100% { background-position: 10% 24%, 90% 12%, 66% 94%, 36% 52%; } } } @media (prefers-reduced-motion: reduce), print { .tool-mast::before, .tool-shell::before, body > .wrap > header:first-child::before, body > nav.nav + *:not(.wrap):not(.tool-mast):not(.tool-shell):not(.sub-hero)::before { animation: none !important; } } /* Concept bridge refresh: overrides older inline bridge palettes */ body.concept-bridge-body, body.bridge-index-body { padding: 0 0 60px; background: var(--bg); color: var(--ink); overflow-x: clip; } html:has(body.concept-bridge-body), html:has(body.bridge-index-body) { overflow-x: clip; } body.concept-bridge-body > .wrap.concept-bridge-page { width: min(940px, calc(100vw - 48px)); max-width: none; margin-inline: auto; padding-top: clamp(32px, 5vw, 64px); position: relative; isolation: isolate; overflow-x: clip; contain: paint; } body.concept-bridge-body > .wrap.concept-bridge-page::before { content: ""; position: absolute; inset: 0 -14% auto; height: 320px; z-index: -1; opacity: 0.18; pointer-events: none; mix-blend-mode: var(--poster-blend); background: radial-gradient(34% 46% at 12% 16%, var(--poster-lime) 0 12%, transparent 48%), radial-gradient(32% 42% at 88% 12%, var(--poster-violet) 0 12%, transparent 48%), linear-gradient(112deg, var(--poster-coral), transparent 30%, var(--poster-cyan) 58%, transparent 78%, var(--poster-sky)); } .concept-bridge-page .back { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 24px; } .concept-bridge-page .badges { margin-bottom: 16px; } .concept-bridge-page .badge { border-radius: 2px; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.08em; } .concept-bridge-page .badge.bridge { background: var(--surface); color: var(--accent); border: 1px solid var(--accent); } .concept-bridge-page .badge.session { background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 38%, var(--rule)); } .concept-bridge-page h1 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: clamp(40px, 6vw, 72px); max-width: 13ch; } .concept-bridge-page .lead { border: 1px solid var(--ink); border-left: 4px solid var(--accent); background: linear-gradient(90deg, var(--accent-soft), transparent 72%), var(--surface); color: var(--ink-soft); padding: 18px 20px; margin: 22px 0 34px; font-size: clamp(17px, 2vw, 21px); line-height: 1.55; } .concept-bridge-page .test-label, .concept-bridge-page .bubble-label, .concept-bridge-page .uh-label, .concept-bridge-page .req-label, .concept-bridge-page .connect-label, .concept-bridge-page .kl-label { font-family: var(--font-mono); letter-spacing: 0.09em; color: var(--accent); } .concept-bridge-page .test-tabs { gap: 6px; min-width: 0; } .concept-bridge-page .ttab { border: 1px solid var(--rule); border-radius: 2px; background: var(--surface-2); color: var(--muted); min-width: 0; white-space: normal; } .concept-bridge-page .ttab.active { border-color: var(--ink); background: var(--surface); color: var(--ink); } .concept-bridge-page .test-card, .concept-bridge-page .requires, .concept-bridge-page .under-hood, .concept-bridge-page .verdict, .concept-bridge-page .nuance, .concept-bridge-page .connect, .concept-bridge-page .key-line { border-radius: 2px; box-shadow: none; } .concept-bridge-page .test-card { border: 1px solid var(--ink); background: linear-gradient(135deg, var(--accent-soft), transparent 56%), var(--surface); padding: clamp(18px, 3vw, 28px); } .concept-bridge-page .requires { border: 1px solid var(--rule); background: var(--surface); } .concept-bridge-page .requires p { color: var(--ink-soft); } .concept-bridge-page .under-hood, .concept-bridge-page .nuance { border: 1px solid var(--rule); background: linear-gradient(90deg, color-mix(in oklab, var(--poster-sun) 18%, transparent), transparent 68%), var(--surface-2); } .concept-bridge-page .under-hood p, .concept-bridge-page .nuance, .concept-bridge-page .nuance strong { color: var(--ink-soft); } .concept-bridge-page .verdict { border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--rule)); background: var(--accent-soft); color: var(--ink); } .concept-bridge-page .verdict strong { color: var(--accent); } .concept-bridge-page .bubble.user { background: var(--ink); color: var(--bg); } .concept-bridge-page .bubble.model { background: color-mix(in oklab, var(--accent) 12%, var(--surface)); color: var(--ink); border: 1px solid color-mix(in oklab, var(--accent) 38%, var(--rule)); } .concept-bridge-page .key-line { position: relative; overflow: hidden; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); } .concept-bridge-page .key-line::before { content: ""; position: absolute; inset: -40%; opacity: 0.18; pointer-events: none; mix-blend-mode: var(--poster-blend); background: radial-gradient(circle at 18% 28%, var(--poster-lime), transparent 24%), radial-gradient(circle at 78% 18%, var(--poster-cyan), transparent 24%), radial-gradient(circle at 74% 76%, var(--poster-hot-pink), transparent 28%); } .concept-bridge-page .key-line > * { position: relative; z-index: 1; } .concept-bridge-page .connect { border: 1px solid var(--ink); background: linear-gradient(135deg, var(--accent-soft), transparent 62%), var(--surface); } .concept-bridge-page .connect p { color: var(--ink-soft); } .concept-bridge-page .connect-links a { border: 1px solid var(--ink); border-radius: 2px; background: var(--ink); color: var(--bg); } .concept-bridge-page .connect-links a:hover { background: transparent; color: var(--ink); } .bridge-index { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: clamp(28px, 4vw, 48px) 0 60px; } .bridge-index .hero.panel { border: 1px solid var(--ink); background: linear-gradient(110deg, var(--m-cross-tint), transparent 62%), var(--surface); } .bridge-index .bridge-grid { gap: 16px; } .bridge-index .bridge.panel { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--ink); background: var(--surface); } .bridge-index .bridge.panel::before { content: ""; position: absolute; inset: -24%; z-index: 0; opacity: 0.13; pointer-events: none; mix-blend-mode: var(--poster-blend); background: radial-gradient(circle at 18% 20%, var(--poster-lime), transparent 24%), radial-gradient(circle at 78% 20%, var(--poster-cyan), transparent 24%), linear-gradient(120deg, var(--poster-coral), transparent 36%, var(--poster-violet)); } .bridge-index .bridge.panel > * { position: relative; z-index: 1; } .bridge-index .bridge .tag { border-radius: 2px; border: 1px solid var(--mink, var(--accent)); background: color-mix(in oklab, var(--mink, var(--accent)) 12%, transparent); color: var(--mink, var(--accent)); font-family: var(--font-mono); letter-spacing: 0.08em; } .bridge-index .prediction { --mink: var(--m-text); } .bridge-index .seeing, .bridge-index .defaults { --mink: var(--m-image); } .bridge-index .time { --mink: var(--m-video); } .bridge-index .confidence, .bridge-index .cutoff { --mink: var(--m-cross); } .bridge-index .links a { border-radius: 2px; color: var(--ink); } .bridge-index .open-bridge { border: 1px solid var(--ink); border-radius: 2px; background: var(--ink); color: var(--bg); } .bridge-index .open-bridge:hover { background: transparent; color: var(--ink); } @media (max-width: 760px) { body.concept-bridge-body > .wrap.concept-bridge-page, .bridge-index { width: min(calc(100vw - 28px), 1120px); } body.concept-bridge-body > .wrap.concept-bridge-page::before { inset-inline: 0; } .concept-bridge-page h1 { max-width: 100%; } .concept-bridge-page .bubble { max-width: 100%; overflow-wrap: anywhere; } .concept-bridge-page .test-card, .concept-bridge-page .requires, .concept-bridge-page .under-hood, .concept-bridge-page .verdict, .concept-bridge-page .nuance, .concept-bridge-page .connect, .concept-bridge-page .key-line { min-width: 0; overflow-wrap: anywhere; } .concept-bridge-page .key-line::before { inset: 0; } }