/* ============================================================ AI Landscape - design system (institutional / dark-first) Dark is the default; [data-theme="light"] overrides. Lens (PM/Architect) via [data-lens] on . ============================================================ */ :root{ color-scheme:dark; --page:#0a0e17; --page-2:#0c1120; --surface-1:#121a2b; --surface-2:#0f1626; --surface-3:#18223a; --text-primary:#f5f7fb; --text-secondary:#9aa6c0; --muted:#6b7793; --border:rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.15); --accent:#5b8def; --accent-2:#8a7cf0; --gold:#d6a94e; /* --accent-fill is --accent USED AS A FILLED BACKGROUND, with the ink that is legible on it. It exists because `background:var(--accent);color:#fff` failed AA on every surface that used it: 3.23:1 in dark and 4.42:1 in light, against a 4.5 floor, on the theme toggle, the Signal tabs, the .rc-btn buttons and the nav .cta. Eleven of twelve measurements failed. Same shape as --give / --give-ink, and for the same reason: a bright accent cannot carry white text, so DARK pairs the bright accent with near-black ink, and LIGHT darkens the accent and keeps white ink. --accent itself is UNTOUCHED — it is the colour-as-meaning token and it is correct as a text/border colour on a page background. Only the filled case needed a variant. --accent-fill-badge is the wash used by a chip sitting INSIDE a filled surface; it must move AWAY from the ink (lighter in dark, darker in light) or it destroys the very contrast the other two tokens just bought. Verified: dark 5.54-8.12:1, light 4.95-7.23:1. */ --accent-fill:var(--accent); --accent-fill-ink:#0b1526; --accent-fill-badge:rgba(255,255,255,0.28); --shadow:0 2px 6px rgba(0,0,0,0.35),0 18px 50px rgba(0,0,0,0.45); --shadow-sm:0 1px 2px rgba(0,0,0,0.3),0 6px 18px rgba(0,0,0,0.35); --c-blue:#5b8def; --c-violet:#9085e9; --c-aqua:#2fc99a; --c-yellow:#e0b13c; --c-orange:#f0824f; --c-red:#f0685f; --c-green:#54b45a; --c-magenta:#e87ba4; /* Use Cases. ITS OWN TOKEN, deliberately NOT an alias of --give, which holds the same value today: a separate token makes a future donate restyle a one-line divergence instead of a hunt across every nav surface. The earlier "too close to Ground aqua" rejection was withdrawn on measurement — 44 degrees apart in hue (210 vs 166), CIEDE2000 21.7 dark / 21.3 light, further apart than magenta from Operate red. Its low chroma is the feature: calm furniture beside seven louder tabs. */ --c-teal:#35a8b5; /* Dark theme: a dark figure card so the DARK diagram render sits on dark, not a white slab. The light theme (below) keeps a near-white card for the light render. */ --figure-bg:#0c1424; /* --maxw is the page frame. --measure is the prose line-length cap, and it is the ONE knob for it: every paragraph/list rule below uses var(--measure), so there is no second place to hunt. It was previously spread across seven selectors (820px, 760px, 720px, 74ch x4, 78ch), which capped body text at ~50-60% of the column and left a large empty right gutter on a wide display. Set to `none` per operator direction: text runs the full column width. Tradeoff, recorded on purpose: at 1440px that was ~145 characters per line, past the ~90ch where the eye starts losing the return sweep. To pull it back, change ONLY this line -- e.g. `--measure:110ch` -- and every prose rule follows. ⚠︎ --maxw WENT 1440 -> 1680 ON 2026-08-30 (operator: the desktop width is not being used), SO THAT ~145 IS NOW ~170 CHARACTERS. The number above was left stale for exactly one edit and is corrected here rather than left to read as current -- a measured figure that quietly stops being true is the defect class this file's own footer comment was just fixed for. --measure is untouched because `none` is the operator's own call; if the longer line is wrong, this line is the one knob and nothing else needs finding. */ --header-h:64px; --maxw:1680px; --measure:none; --rail-gap:14px; /* --nav-r is the ONE knob for the shape of every control in the top-right nav cluster. Before this existed the row carried THREE different radii at once: 999px on Search, Learn, Chip in and the avatar; 11px on Signal (and therefore on Admin, which nav.js builds as class="tn-signal tn-admin" and so inherits it); and 8px on the Dark/Light toggle, where `.tn-right .seg button` overrode the global 999px `.seg button`. Seven controls, three shapes, side by side. 999px wins on the row as it stands rather than by taste: four of the seven already used it, and one of those four is the account avatar, which can only ever be a circle. Matching the odd ones out to the majority is the smaller change AND the only one that leaves the avatar consistent with its neighbours. Every nav control now points here, including the ones already at 999px, so the row cannot drift apart again one rule at a time. */ --nav-r:999px; /* --nav-h is the same idea for SIZE, and it was needed because fixing the shape did not fix the row. Measured in Chrome at 1440px on 2026-07-28, the cluster carried FIVE distinct heights across six controls: Chip in 30.5px, Learn 31, the avatar 32, the theme toggle 35.2, and both Search and Signal/Admin 36.8 — a 6.3px spread. Worse, five distinct top edges spanning 3.1px, so the controls were not even sharing a baseline; the row read as a set of unrelated widgets. The cause was that every control set its own vertical padding (3+5, 7, 8, 9) or its own fixed box (the 32px avatar), and padding cannot produce equal heights across three different font sizes. 36px wins by measurement, not taste: the search field and Signal already sat at 36.8, and the search field is what a reader reads as the height of the bar. Rounding the two tallest down by 0.8px is a far smaller move than pulling them down to meet Chip in at 30.5, which would have left the search input cramped. The mechanism matters as much as the number. Height is set ONCE here and the controls centre their content with inline-flex, so vertical padding no longer participates — a future control that ships its own padding still lands at 36px. Only HORIZONTAL padding is left to vary, which is correct: it should follow the label. */ --nav-h:36px; --font-display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif; --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; } html[data-theme="light"]{ color-scheme:light; --page:#f4f4f1; --page-2:#efefec; --surface-1:#ffffff; --surface-2:#ffffff; --surface-3:#ffffff; --text-primary:#0b0b0b; --text-secondary:#52514e; --muted:#898781; --border:rgba(11,11,11,0.10); --border-strong:rgba(11,11,11,0.16); --accent:#2a78d6; --accent-2:#4a3aa7; --gold:#a9761c; /* Light inverts the pairing, exactly as --give does: white ink stays, so the fill darkens. #2a78d6 against white was 4.42:1 — a miss by 0.08, which is why it survived so long. */ --accent-fill:#2670c9; --accent-fill-ink:#ffffff; --accent-fill-badge:rgba(0,0,0,0.22); --shadow:0 1px 2px rgba(11,11,11,0.05),0 8px 24px rgba(11,11,11,0.08); --shadow-sm:0 1px 2px rgba(11,11,11,0.05),0 4px 14px rgba(11,11,11,0.06); --c-blue:#2a78d6; --c-violet:#4a3aa7; --c-aqua:#1baf7a; --c-yellow:#c98500; --c-orange:#eb6834; --c-red:#e34948; --c-green:#008300; --c-magenta:#d55181; --c-teal:#1c7684; /* Use Cases, light theme. 4.80:1 on the page ground. */ --figure-bg:#fcfcfb; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--font-body);background:var(--page);color:var(--text-primary); line-height:1.6;-webkit-font-smoothing:antialiased} a{color:inherit} h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-0.02em;font-weight:700} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} /* ---------------- Top nav ---------------- */ .topnav{position:sticky;top:0;z-index:100;height:var(--header-h); background:color-mix(in srgb,var(--surface-2) 82%,transparent); backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--border)} /* Matches --maxw so the nav lines up with the content below it */ /* The BAR goes edge to edge; page content keeps its --maxw cap. On a 1920px screen the capped bar left 480px of dead gutter and started the wordmark 262px in, which is what made it look adrift. Content is deliberately NOT freed: prose at 1900px is unreadable and the cap is doing real work everywhere else. This does NOT fix the overflow. At 1280px, where the bar actually breaks, the gutter is already zero — that is what slimming the controls below is for. Two problems, two fixes. */ .tn-inner{max-width:none;margin:0;height:100%;padding:0 20px;display:flex;align-items:center;gap:12px} /* Logo mark colours — theme-aware. The mark keeps its bright two-tone on the dark header (exactly as signed off); on the light header it uses deeper, more saturated stops so it stays vibrant on near-white instead of washing out, and the centre gem tracks the mark (--lg-dot), not the page, so it never blends into a light background. */ /* The centre gem is the CROSSBAR of the "A". It must contrast with the header behind it: white on the dark header (a bright gem), but a coloured indigo on the light header — a white crossbar on a white page vanishes, and the mark collapses into a plain peak with no crossbar. So --lg-dot is white in dark and indigo in light. The legs keep the blue/violet two-tone in both. */ :root{--lg-a:#3b82f6;--lg-b:#1d4ed8;--vg-a:#8b5cf6;--vg-b:#6d28d9;--lg-dot:#4f46e5} @media(prefers-color-scheme:dark){:root{--lg-a:#93c5fd;--lg-b:#60a5fa;--vg-a:#8b5cf6;--vg-b:#7c3aed;--lg-dot:#ffffff}} :root[data-theme="light"]{--lg-a:#3b82f6;--lg-b:#1d4ed8;--vg-a:#8b5cf6;--vg-b:#6d28d9;--lg-dot:#4f46e5} :root[data-theme="dark"]{--lg-a:#93c5fd;--lg-b:#60a5fa;--vg-a:#8b5cf6;--vg-b:#7c3aed;--lg-dot:#ffffff} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--font-display); font-weight:700;font-size:19px;letter-spacing:-0.015em;color:var(--text-primary);white-space:nowrap} /* The mark is a BARE ascent "A" — no container box, no tile, no rounded square, no glow. It sits directly on the header and is big, so it reads as a logo, not an app icon. Every box-producing property is explicitly zeroed here so no earlier rule can put a tile back behind it. */ .brand .logo{width:46px;height:46px;flex:none;display:grid;place-items:center; background:none;box-shadow:none;border:0;border-radius:0; -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision} .brand .logo svg{width:46px;height:46px;display:block;shape-rendering:geometricPrecision} /* AI Foundry | adhana. A thin pipe divides the product name from the house brand. adhana is small and quiet on purpose — smaller and lighter than "AI Foundry", the parent it belongs to. */ .brand .wm-sep{width:1px;height:18px;background:var(--border-strong);flex:none;margin:0 2px} .brand .wm-adhana{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:0; background:linear-gradient(100deg,#818cf8,#c084fc);-webkit-background-clip:text;background-clip:text;color:transparent} @media(max-width:820px){.brand .wm-sep,.brand .wm-adhana{display:none}} .brand .pill{font-family:var(--font-body);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent); background:color-mix(in srgb,var(--gold) 12%,transparent);padding:3px 8px;border-radius:999px} .menu{display:flex;align-items:center;gap:0;margin-left:4px} .navitem{position:relative} .navlink{display:inline-flex;align-items:center;gap:5px;background:transparent;border:0;cursor:pointer;text-decoration:none; font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--text-secondary);white-space:nowrap; padding:8px 10px;border-radius:9px} .navlink:hover,.navitem:hover .navlink,.navitem:focus-within .navlink{color:var(--text-primary);background:color-mix(in srgb,var(--text-primary) 6%,transparent)} .navlink .car{font-size:10px;opacity:.7;transition:transform .15s ease} .navitem:hover .navlink .car{transform:rotate(180deg)} /* ⚑ THE BAR CARRIES SEVEN CONTROLS WHERE IT CARRIED SIX — 2026-08-24, and at 1280px that was 11.7px too many: `.tn-right` ended at 1291.7 and every page on the site scrolled sideways. Measured against production, which still served the six-tab bar and fitted 1280 with 20px to spare, so this is a regression of the new bar and not the pre-existing 1280 tightness CLAUDE.md records. Padding is the right knob: it takes 7px off each control without touching the font size, which is what keeps the labels readable and the row on one baseline. ⚑ EIGHT ON 2026-08-26, WHEN Cross-domain BECAME A TAB — and the breakpoint moved 1360 -> 1600 with it. All measured in Chrome against the built tree, never estimated: seven tabs menu 641px @1280 · 693 @1366 · fits every width from 981 up eight tabs menu 758px @1280 · 816 @1366 — scrollWidth 1348 @1280, 1414 @1366, 1612 @1512 The tab costs ~117px, so the band that needs help now runs all the way to ~1600 (.tn-right is 500px wide up there — Chip in and Learn are still in the row — where lower down it is 212). ⚠︎ AND THE PLATFORM GATE'S EARLIER PASS WAS AN ARTIFACT, recorded so nobody trusts it again: pages/platform.html carried no data-root until the same day, so nav-facts.js 404'd there, the industry tabs never rendered, and a bar missing its tabs cannot overflow. It went red the moment that page's nav actually worked. */ @media(max-width:1600px){ .topnav .navlink,.topnav .nav-all{padding-left:7px;padding-right:7px} .topnav .nav-div{margin:0 4px} .tn-inner{gap:8px} } /* The tight tier, for the band between the mild one above and the hamburger below. Padding is spent first, then half a point of type — the same order the 2026-08-24 rules used, and for the same reason: nothing DISAPPEARS. The "adhana" tail of the wordmark is the one exception and it was already the recorded first thing to go when space is genuinely tight. */ @media(max-width:1560px){ .topnav .navlink,.topnav .nav-all{padding-left:3px;padding-right:3px;font-size:12.5px} .topnav .nav-div{margin:0 2px} .tn-inner{gap:6px;padding:0 10px} .tn-right{gap:7px} .topnav .wm-sep,.topnav .wm-adhana{display:none} } /* ---- mega-menu: index on the left, preview on the right ---- The list was a column of 34px icon tiles with a two-word subtitle under each, which on Operate was eight tall rows where every row shouted equally and the emoji did most of the visual work. Now the left column is a compact index AND the only thing you click; the right panel explains whatever the pointer is on. Nothing over there is interactive, so the reader never has to travel across the menu to act \u2014 they read right, they click left. Before the pointer touches anything the panel shows the GROUP, so a menu that has just opened still says something instead of presenting an empty half. */ .dropdown{position:absolute;top:calc(100% + 8px);left:0;width:756px;background:var(--surface-3); border:1px solid var(--border-strong);border-radius:16px;box-shadow:var(--shadow);padding:0;overflow:hidden; opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:120} /* ⚑ OPENING IS JS-DRIVEN NOW — 2026-08-24. This was `:hover, :focus-within`, which cannot carry aria-expanded, cannot be closed with Escape, has no intent delay, and on a touch device made the first tap both open the menu and follow the link under it. nav.js sets .open; the CSS only says what open looks like. Keep the two apart: a second :hover rule here would re-open panels the controller has just closed and the two would fight on every pointer move. */ /* ⚠︎ visibility IS DELIBERATELY NOT TRANSITIONED IN THE OPEN DIRECTION. The base rule fades it for a clean close, but on OPEN a transitioned visibility is still `hidden` for the first frame, and .focus() on an element inside a hidden subtree is a silent no-op — which is exactly how Enter opened the panel and stranded a keyboard reader on the button. Dropping visibility from this rule's transition list makes it flip instantly, so the rail is focusable the moment the class lands. Opacity and transform still animate, so nothing looks different. */ .navitem.open .dropdown{opacity:1;visibility:visible;transform:translateY(0); transition:opacity .16s ease,transform .16s ease} .navitem.open > .navlink{color:var(--text-primary); background:color-mix(in srgb,var(--gc,var(--accent)) 16%,transparent)} .navitem.open > .navlink .car{transform:rotate(180deg)} .dd-grid{display:grid;grid-template-columns:252px 1fr} /* ⚑ THE LIST IS CAPPED AND SCROLLS — operator-reported 2026-08-18, "it keeps dragging". This rule had NO max-height and NO overflow, so Use Cases' 23 rows rendered ~793px tall and ran off the bottom of the screen; the menu could not be read without moving the pointer out of it, which closes it. The cap applies to every menu because a cap only bites when the content exceeds it — no other group is near it today, and the one that grows next is covered for free. overscroll-behavior stops a flick at the end of the list from scrolling the page underneath. */ .dd-list{padding:10px;border-right:1px solid var(--border); max-height:392px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin} .dd-row{display:flex;gap:10px;align-items:center;text-decoration:none;padding:8px 10px;border-radius:9px; color:var(--text-secondary)} .dd-row:hover,.dd-row:focus-visible{background:color-mix(in srgb,var(--gc,var(--accent)) 13%,transparent); color:var(--text-primary);outline:none} .dd-n{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:9.5px;color:var(--muted);width:15px;flex:none} .dd-row:hover .dd-n,.dd-row:focus-visible .dd-n{color:var(--gc,var(--accent))} .dd-t{font-size:13.5px;font-weight:550;line-height:1.3} .dd-pre{padding:20px 22px;display:flex;flex-direction:column;gap:9px;min-height:250px;background:var(--surface-1)} /* ── THE BUCKET RAIL — 2026-08-24, the industry-first bar ──────────────────────────────────── The rail holds BUCKETS, not rows: a vertical on an industry tab, a section on Platform. Both render through one code path in nav.js, so these styles serve both and Platform cannot drift into looking like a different product. The eyebrow states the SORT RULE as well as the count, because the two rails are ordered by different rules on purpose — industries by kit count (the biggest bucket is the likeliest answer), Platform in build order (Models → Ground → … is a sequence, and sorting it by size would destroy what the order tells you). Unlabelled, one of them just looks wrong. */ .dd-eye{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:9.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.5; padding:4px 10px 9px} .dd-brow{display:flex;gap:9px;align-items:center;text-decoration:none;padding:7px 10px; border-radius:9px;color:var(--text-secondary)} .dd-brow:hover,.dd-brow:focus-visible{background:color-mix(in srgb,var(--gc,var(--accent)) 13%,transparent); color:var(--text-primary);outline:none} .dd-brow[aria-current="true"]{background:color-mix(in srgb,var(--gc,var(--accent)) 17%,transparent); color:var(--text-primary)} .dd-brow:focus-visible{outline:2px solid var(--gc,var(--accent));outline-offset:-2px} .dd-bd{width:8px;height:8px;border-radius:50%;flex:none} .dd-bt{flex:1;min-width:0;font-size:13.5px;font-weight:550;line-height:1.3} .dd-bn{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;font-weight:600; color:var(--muted);font-variant-numeric:tabular-nums;flex:none} .dd-brow:hover .dd-bn,.dd-brow[aria-current="true"] .dd-bn{color:var(--gc,var(--accent))} /* Preview cards. Three at most — the rail says how many there are, the panel shows what they look like, and "See all N" is the honest door to the rest. */ .dd-cards{display:grid;gap:8px;grid-template-columns:1fr;margin-top:2px} .dd-card{display:flex;flex-direction:column;gap:3px;text-decoration:none;padding:9px 11px; border:1px solid var(--border);border-radius:10px;background:var(--surface-2)} .dd-card:hover{border-color:var(--border-strong)} .dd-card:focus-visible{outline:2px solid var(--gc,var(--accent));outline-offset:1px} .dd-ct{font-size:12.5px;font-weight:600;color:var(--text-primary);line-height:1.32} .dd-cs{font-size:11.5px;color:var(--text-secondary);line-height:1.4} /* ⚑ THE ACCESS MARK. This bar is served to anonymous visitors on every public page and a kit board 302s them to the accounts host; Platform's pages do not. Saying which is which on the card is the difference between a wall and a broken link — the defect class four surfaces on this site carried for a day in August by claiming the opposite. */ .dd-cg{font-size:10px;font-weight:600;letter-spacing:.03em;color:var(--gold);margin-top:1px} /* ⚑ AN EMPTY MARK TAKES NO ROOM — 2026-08-26. accessMark() returns "" for a walled page now that the sign-in lock is gone (operator: the click already forces authentication), so most cards emit and its margin-top would show as a stray gap. ⚠︎ HIDDEN IN CSS AND DELIBERATELY NOT BY SKIPPING THE SPAN IN nav.js. The span must keep being built by the literal expression `dd-cg">' + accessMark(it)`, because that exact assignment is what build/smoke/verticals.py asserts on — the predicate exists after a looser one green-lit a seeded re-typing of the mark twice. Rendering is CSS's problem; the gate's is that the value is computed and never typed. */ .dd-cg:empty{display:none} /* The Platform card's derived counts, the same figure a kit card carries as its measured dataset. Accent-coloured for the same reason: it is the fact, not the prose. */ .dd-cf{font-size:11px;font-weight:600;color:var(--gc,var(--accent))} .dd-see{margin-top:auto;padding-top:10px;font-size:12.5px;font-weight:600; color:var(--gc,var(--accent));text-decoration:none} .dd-see:hover{text-decoration:underline} /* All Kits is a link, not a menu — it gets the accent so the bar reads "five industries, then the whole catalogue", and a hairline separates the industries from Platform. */ .nav-all{display:inline-flex;align-items:center;padding:8px 12px;border-radius:var(--nav-r); text-decoration:none;font-size:13.5px;font-weight:600;color:var(--accent);white-space:nowrap} .nav-all:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)} .nav-div{width:1px;height:20px;background:var(--border-strong);margin:0 7px;flex:none; align-self:center} .dd-pk{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:9.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--gc,var(--accent))} .dd-pt{font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.25;color:var(--text-primary)} .dd-ps{font-size:13px;color:var(--text-secondary);line-height:1.55} /* What is actually inside, as counts. Sits at the foot of the panel and is derived at build time from the content model — never typed into nav.js — because a menu that says "9 deep dives" when there are 42 is the homepage's MAP_LAYERS drift with a wider audience. */ .dd-facts{margin-top:auto;padding-top:12px;border-top:1px solid var(--border); display:flex;flex-wrap:wrap;gap:5px 7px;min-height:1px} .dd-facts:empty{border-top:0;padding-top:0} /* ── FILTER-FIRST, IN THE USE CASES MENU ────────────────────────────────────── Operator locked Option D on 2026-08-18 and, asked which taxonomy, answered "Verb". The bar is the FIRST CHILD of the scrolling list and sticks to its top, so the filter and the chips stay put while the rows move under them. Its background must be the DROPDOWN's ground (--surface-3), not the panel's, or rows show through it as they pass behind. ⚠︎ THE LIST DROPS ITS OWN TOP PADDING WHEN IT CARRIES A BAR, AND THAT IS NOT COSMETIC. A sticky `top:0` pins the element's MARGIN edge to the scrollport, so the first attempt — margin-top:-10px to reach out over the list's 10px padding — stuck the bar 10px DOWN the scrollport and left a 10px slot above it that rows visibly scrolled through. Measured at 10px in Chrome and seen in a screenshot with "Version redlining" sitting above the filter box. The fix is to take the padding off the list, not to cancel it with a margin; the side margins stay, so the bar still spans the full width and its border-bottom reaches both edges. ⚠︎ THE CHIPS SHIP HIDDEN. They are populated by nav.js from window.FOUNDRY_KIT_VERBS, which arrives with nav-facts.js — a cached older copy of that file carries no verbs, and an empty row of chips that filters nothing is worse than no chips. Text filtering needs no verb data and works either way. */ .dd-filt{padding-top:0} .dd-fbar{position:sticky;top:0;z-index:3;background:var(--surface-3); margin:0 -10px 6px;padding:10px 10px 8px;border-bottom:1px solid var(--border)} .dd-q{width:100%;height:30px;border-radius:9px;border:1px solid var(--border-strong); background:var(--surface-2);color:var(--text-primary);font:400 12.5px var(--font-body);padding:0 10px} .dd-q:focus{outline:none;border-color:var(--gc,var(--accent))} .dd-q::placeholder{color:var(--muted)} .dd-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px} .dd-chips[hidden]{display:none} .dd-chip{font-family:var(--font-body);font-size:10.5px;font-weight:600;color:var(--text-secondary); background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px 8px;cursor:pointer} .dd-chip b{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--muted);font-weight:700;margin-left:3px} .dd-chip:hover{color:var(--text-primary)} .dd-chip.on{border-color:var(--gc,var(--accent));color:var(--text-primary)} .dd-chip.on b{color:var(--gc,var(--accent))} .dd-count{margin-top:6px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:9.5px; letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums} .dd-count b{color:var(--gc,var(--accent))} .dd-none{padding:12px 10px;font-size:12.5px;color:var(--muted)} .dd-none[hidden]{display:none} .dd-row[hidden]{display:none} .dd-f{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;color:var(--muted); background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:3px 7px; white-space:nowrap;font-variant-numeric:tabular-nums} .dd-f b{color:var(--gc,var(--accent));font-weight:700} @media(max-width:900px){.dropdown{width:auto;min-width:300px}.dd-grid{grid-template-columns:1fr} .dd-list{border-right:0}.dd-pre{display:none}} .tn-right{margin-left:auto;display:flex;align-items:center;gap:9px} /* global search */ .tn-search{position:relative;display:flex;align-items:center;height:var(--nav-h);box-sizing:border-box} .tn-search .tn-sicon{position:absolute;left:10px;font-size:15px;color:var(--muted);pointer-events:none} /* Vertical padding is 0 on purpose: the height comes from --nav-h so this field lines up with the pills beside it. Horizontal padding still varies — the left inset clears the search glyph. */ #foundry-q{width:170px;height:100%;box-sizing:border-box;background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--nav-r); color:var(--text-primary);font:inherit;font-size:13px;padding:0 12px 0 30px;outline:none;transition:width .16s,border-color .16s} #foundry-q::placeholder{color:var(--muted)} #foundry-q:focus{width:230px;border-color:var(--accent)} #foundry-q::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} .tn-results{position:absolute;top:calc(100% + 8px);right:0;width:360px;max-height:66vh;overflow-y:auto;z-index:200; background:var(--surface-1);border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.4);padding:6px} .tn-res{display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-decoration:none;padding:9px 12px;border-radius:10px;align-items:baseline} .tn-res:hover,.tn-res.on{background:color-mix(in srgb,var(--accent) 16%,var(--surface-1))} .tn-rt{font-size:13.5px;font-weight:650;color:var(--text-primary)} /* The ADMIN tag on a search result. Only rows from search-index-admin.js carry it, and only an admin's browser ever loads that file — so this marks "nobody else can see this row". OUTLINE, NOT A FILL, and that is the --accent-fill lesson applied rather than re-learned: a filled --gold carries near-black ink fine in dark (8.4:1) but the light theme's darker gold (#a9761c) is 4.0:1 against white, under the 4.5 floor. The outline chip is the idiom already used by .kit-badge above and it measures clean in both themes. */ .tn-adm{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;font-size:9.5px; font-weight:800;letter-spacing:.07em;vertical-align:1px;color:var(--gold); border:1px solid color-mix(in srgb,var(--gold) 45%,transparent); background:color-mix(in srgb,var(--gold) 12%,transparent)} .tn-rg{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);white-space:nowrap} .tn-rs{grid-column:1 / -1;font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tn-empty{padding:14px 12px;font-size:13px;color:var(--muted)} @media(max-width:1180px){#foundry-q{width:130px}#foundry-q:focus{width:180px}} .seg{display:inline-flex;background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--nav-r);padding:3px; height:var(--nav-h);box-sizing:border-box;align-items:center} .seg button{border:0;background:transparent;cursor:pointer;font:inherit;font-size:12px;font-weight:600; color:var(--text-secondary);padding:0 11px;border-radius:var(--nav-r);height:100%} .seg button[aria-pressed="true"]{background:var(--accent-fill);color:var(--accent-fill-ink)} .cta{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-weight:650;font-size:13px; color:var(--accent-fill-ink);background:linear-gradient(135deg,var(--accent-fill),color-mix(in srgb,var(--accent-fill) 70%,var(--accent-2))); padding:0 14px;height:var(--nav-h);box-sizing:border-box;border-radius:var(--nav-r);box-shadow:0 6px 18px rgba(91,141,239,.35);white-space:nowrap} .cta:hover{filter:brightness(1.06)} /* Account / sign-out. An icon, not a labelled button: it is used roughly never (sign out on a shared machine, or switch a wrong Google account), so it should be findable without taking nav weight from Cheat sheet. */ /* Square by construction so --nav-r keeps it a circle: width tracks the shared height. */ .tn-account{display:inline-flex;align-items:center;justify-content:center;text-decoration:none; font-size:13px;line-height:1;width:var(--nav-h);height:var(--nav-h);box-sizing:border-box;border-radius:var(--nav-r); background:var(--surface-1);border:1px solid var(--border-strong);opacity:.75} .tn-account:hover{opacity:1;border-color:var(--accent)} /* Signal — the one live thing on a static site, so it gets a standalone link and a dot rather than a dropdown row. Sits between the account icon and the Map CTA; hides into the burger at the same breakpoint as the rest of tn-right. */ .tn-signal{display:inline-flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap; font-weight:650;font-size:13px;color:var(--text-secondary);padding:0 11px;height:var(--nav-h);box-sizing:border-box;border-radius:var(--nav-r); border:1px solid var(--border-strong);background:var(--surface-1)} .tn-signal:hover{color:var(--text-primary);border-color:var(--c-aqua)} .tn-admin:hover{border-color:var(--c-violet)} .tn-admin-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--c-red);color:#fff;font-size:10px;font-weight:800;line-height:1} .sig-dot{width:7px;height:7px;border-radius:999px;background:var(--c-aqua);flex:none; box-shadow:0 0 0 0 color-mix(in srgb,var(--c-aqua) 60%,transparent);animation:sigpulse 2.6s ease-out infinite} @keyframes sigpulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-aqua) 55%,transparent)} 70%{box-shadow:0 0 0 6px color-mix(in srgb,var(--c-aqua) 0%,transparent)} 100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-aqua) 0%,transparent)}} /* A dot that pulses is motion; respect a reader who asked the OS for none. */ @media(prefers-reduced-motion:reduce){.sig-dot{animation:none}} /* ═══ SIGNAL — the daily brief, and the homepage news band ═══════════════════════════════════ Layout from the approved wireframe: a ranked list of items on the brief page, and a compact "Today in AI" band on the homepage whose cards open the source article on its own page. No cost, no bill — this is news, read and ranked. */ /* Homepage band. Quiet by default: Foundry is a reading site, so this sits above the fold without shouting. */ .sig-band{margin:0 0 30px;padding:16px 18px;border:1px solid var(--border);border-radius:14px; background:radial-gradient(120% 160% at 0% 0%,color-mix(in srgb,var(--c-aqua) 9%,var(--surface-1)),var(--surface-1))} .sig-band-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:13px} .sig-band-dot{width:7px;height:7px;border-radius:999px;background:var(--c-aqua);flex:none; box-shadow:0 0 0 0 color-mix(in srgb,var(--c-aqua) 55%,transparent);animation:sigpulse 2.6s ease-out infinite} @media(prefers-reduced-motion:reduce){.sig-band-dot{animation:none}} .sig-band-ttl{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--text-primary)} .sig-band-when{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums} .sig-band-all{margin-left:auto;font-size:12px;font-weight:600;color:var(--c-aqua);text-decoration:none;flex:none} .sig-band-all:hover{text-decoration:underline} .sig-band-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;grid-auto-rows:1fr} .sig-bcard{display:flex;flex-direction:column;gap:6px;min-width:0;padding:12px 13px;text-decoration:none; background:var(--surface-2);border:1px solid var(--border);border-radius:10px;transition:border-color .15s,transform .15s} .sig-bcard:hover{border-color:color-mix(in srgb,var(--c-aqua) 45%,transparent);transform:translateY(-1px)} .sig-bcard-src{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600} .sig-bcard-hl{font-size:13px;font-weight:650;line-height:1.34;color:var(--text-primary)} .sig-bcard-why{font-size:11.5px;color:var(--text-secondary);line-height:1.45} /* Brief page — the dated header and its clocks. */ .sig-meta{display:flex;flex-direction:column;gap:7px;padding-bottom:16px;margin-bottom:8px; border-bottom:1px solid var(--border);font-size:12.5px;color:var(--text-secondary)} .sig-counts,.sig-clock{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;font-variant-numeric:tabular-nums} .sig-meta b{color:var(--text-primary);font-weight:650} .sig-sep{opacity:.4} .sig-next{color:var(--c-aqua)!important} .sig-warn{color:var(--c-yellow);font-weight:600} .sig-lead{font-size:18px;line-height:1.55;color:var(--text-primary);margin:22px 0 8px;max-width:64ch; font-family:var(--font-display);letter-spacing:-.01em;text-wrap:balance} /* Listen — the read-aloud control. Hidden until signal.js confirms the browser can speak. */ .sig-listen{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 4px} .sig-listen-btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font:inherit; font-family:var(--font-display);font-size:13.5px;font-weight:650;color:var(--text-primary); background:var(--surface-1);border:1px solid var(--border-strong);border-radius:999px;padding:8px 16px 8px 13px} .sig-listen-btn:hover{border-color:var(--c-aqua)} .sig-listen-btn[aria-pressed="true"]{border-color:var(--c-aqua); background:color-mix(in srgb,var(--c-aqua) 12%,var(--surface-1))} .sig-listen-ic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px; border-radius:999px;background:var(--c-aqua);color:#04140f;font-size:11px;line-height:1;flex:none} .sig-listen-hint{font-size:11.5px;color:var(--muted)} /* Natural-voice player (Deepgram Aura-2 MP3). Replaces the browser-TTS button when the day's audio was pre-rendered. Full-width audio control + a small provenance tag. */ .sig-listen-audio{flex-direction:column;align-items:stretch;gap:7px} .sig-audio{width:100%;max-width:520px;height:40px} .sig-audio-tag{font-family:var(--font-display);font-size:10.5px;letter-spacing:.06em; text-transform:uppercase;font-weight:600;color:var(--muted)} .sig-opt{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)} .sig-opt-lab{font-family:var(--font-display);font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:600} .sig-opt-sel{font:inherit;font-size:12px;color:var(--text-primary);background:var(--surface-1); border:1px solid var(--border-strong);border-radius:8px;padding:5px 8px;cursor:pointer;max-width:210px} .sig-opt-sel:hover{border-color:var(--c-aqua)} .sig-opt-sel:focus-visible{outline:2px solid var(--c-aqua);outline-offset:1px} /* Accent — a three-way segmented toggle (USA / Europe / Asian). */ .sig-acc{display:inline-flex;background:var(--surface-1);border:1px solid var(--border-strong); border-radius:999px;padding:3px;gap:2px} .sig-acc-btn{font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;border:0;background:transparent; color:var(--text-secondary);padding:5px 11px;border-radius:999px;white-space:nowrap} .sig-acc-btn:hover:not(:disabled){color:var(--text-primary)} .sig-acc-btn[aria-pressed="true"]{background:var(--c-aqua);color:#04140f} .sig-acc-btn:disabled{opacity:.35;cursor:not-allowed} .sig-acc-btn:focus-visible{outline:2px solid var(--c-aqua);outline-offset:1px} /* The item currently being read aloud. */ .sig-reading{border-color:color-mix(in srgb,var(--c-aqua) 55%,transparent)!important; box-shadow:0 0 0 1px color-mix(in srgb,var(--c-aqua) 45%,transparent), 0 8px 26px color-mix(in srgb,var(--c-aqua) 16%,transparent)} .sig-lead.sig-reading{border-radius:10px;padding:8px 12px;margin-left:-12px} /* Brief page — the ranked item list. */ .sig-brief{margin-top:20px} /* News | Research split — two ranked columns off the labels the feed already emits. Stacks on narrow. Each column keeps its own heading and ranked list; a quiet column says so. */ .sig-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start} .sig-cols .sig-col>h2{margin:0 0 14px} .sig-col-research>h2 .k{color:var(--c-violet)} .sig-col-empty{font-size:13.5px;color:var(--muted);background:var(--surface-2); border:1px dashed var(--border-strong);border-radius:12px;padding:16px 18px;margin:0} @media(max-width:860px){.sig-cols{grid-template-columns:1fr;gap:20px}} /* "What's new" — news the daily Signal auto-linked to this page (initiative A). A dated link and the brief's own impact line; never a rewrite of the page. Leads the page as a freshness cue. */ .whatsnew{margin:0 0 26px;padding:15px 18px;border:1px solid var(--border);border-left:3px solid var(--c-yellow); border-radius:12px;background:var(--surface-2)} .whatsnew>h2{margin:0 0 11px} .wn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .wn-item{font-size:14px;line-height:1.5} .wn-hl{font-weight:650;color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--border-strong)} .wn-hl:hover{border-color:var(--c-yellow)} .wn-meta{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--muted)} .wn-impact{display:block;color:var(--text-secondary);font-size:13px;margin-top:3px} .wn-note{font-size:11.5px;color:var(--muted);margin:13px 0 0} /* "From Signal" — permanent, operator-approved digests promoted into a page (build/synth/placed.json). */ .sigdesk{margin:0 0 26px;padding:15px 18px;border:1px solid var(--border);border-left:3px solid var(--c-aqua); border-radius:12px;background:var(--surface-2)} .sigdesk>h2{margin:0 0 11px} .sd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .sd-item{font-size:14px;line-height:1.55} .sd-digest{margin:0;color:var(--text-primary)} .sd-meta{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--muted);margin:4px 0 0} .sd-meta a{color:var(--muted);text-decoration:underline} .sd-meta a:hover{color:var(--c-aqua)} .sd-note{font-size:11.5px;color:var(--muted);margin:13px 0 0} /* "What today means for builders" — the daily brief regrouped by build impact. Three buckets keyed by story category; each colour matches the type pills (cap=aqua, price=yellow, heading=blue) so the same taxonomy reads consistently down the page. */ .sig-builders{margin-top:26px} .sig-builders-hd h2{font-family:var(--font-display);font-size:19px;letter-spacing:-.01em;margin:0 0 4px} .sig-builders-hd p{font-size:13.5px;color:var(--muted);margin:0 0 16px;max-width:62ch} .sig-builders-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;grid-auto-rows:1fr} .sig-bkt{background:var(--surface-1);border:1px solid var(--border);border-top:2px solid var(--bkt,var(--accent)); border-radius:12px;padding:14px 15px;display:flex;flex-direction:column;gap:11px} .sig-bkt-cap{--bkt:var(--c-aqua)} .sig-bkt-price{--bkt:var(--c-yellow)} .sig-bkt-dir{--bkt:var(--c-blue)} .sig-bkt-top{display:flex;align-items:center;gap:8px} .sig-bkt-ic{font-size:15px;flex:none;line-height:1} .sig-bkt-ttl{font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.01em; color:var(--text-primary);flex:1;min-width:0} .sig-bkt-n{font-size:11px;font-weight:700;color:var(--bkt);background:color-mix(in srgb,var(--bkt) 14%,transparent); border:1px solid color-mix(in srgb,var(--bkt) 34%,transparent);border-radius:999px;min-width:20px; text-align:center;padding:1px 7px;font-variant-numeric:tabular-nums} .sig-bkt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0} .sig-bkt-list li{border-top:1px solid var(--border)} .sig-bkt-list li:first-child{border-top:none} .sig-bkt-list li a{display:flex;flex-direction:column;gap:3px;text-decoration:none;padding:9px 0} .sig-bkt-list li:first-child a{padding-top:1px} .sig-bkt-list li:last-child a{padding-bottom:1px} .sig-bkt-hl{font-size:13.5px;line-height:1.35;font-weight:600;color:var(--text-primary)} .sig-bkt-list li a:hover .sig-bkt-hl{color:var(--bkt)} .sig-bkt-why{font-size:12px;line-height:1.45;color:var(--text-secondary)} .sig-bkt-empty{font-size:12.5px;color:var(--muted);font-style:italic;padding:2px 0} .sig-bkt-ago{font-size:10px;font-weight:600;color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:0 5px;margin-left:6px;white-space:nowrap;vertical-align:middle} /* Signal News / Research tabs — bold segmented control, sits right under the meta strip */ .sig-tabs{display:flex;gap:8px;margin:18px 0 8px} .sig-tab{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text-secondary);background:var(--surface-2);border:1.5px solid var(--border);border-radius:11px;padding:11px 22px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:color .14s,background .14s,border-color .14s} .sig-tab:hover{color:var(--text-primary);border-color:var(--border-strong)} .sig-tab-n{font-size:12px;font-weight:700;color:var(--muted);background:var(--surface-1);border-radius:999px;padding:1px 8px;font-family:var(--font-body)} .sig-tab[aria-selected="true"]{color:var(--accent-fill-ink);background:var(--accent-fill);border-color:transparent} .sig-tab[aria-selected="true"] .sig-tab-n{color:var(--accent-fill-ink);background:var(--accent-fill-badge)} .sig-panel{display:none} .sig-panel[data-on="1"]{display:block} .sig-arch-note{margin:14px 0 0;border:1px solid var(--gold);border-radius:10px;background:rgba(214,169,78,0.08);padding:11px 15px;font-size:13px;line-height:1.5;color:var(--text-secondary)} .sig-arch-note b{color:var(--text-primary)} .sig-arch-note a{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap} /* Signal head: title on the left, the "How this stays current" card in the dead space on the right. It used to be a sticky rail beside the brief, which cost the body a 300px column for the entire scroll — the lane grid below wants every pixel and was running three narrow columns against an empty gutter. In the head it fills space that was empty anyway, and the brief gets the full width. Stacks under the title below 1000px rather than disappearing. */ .sig-head{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:30px;align-items:center} .sig-head-t{min-width:0} .sig-head-card{min-width:0} @media(max-width:1000px){ .sig-head{grid-template-columns:1fr;gap:20px} .sig-head-card{max-width:520px} } /* LANDSCAPE, not a square block. The card was authored for a 300px sticky rail, where tall was free; in the head its height is the header's height, so every vertical pixel it takes pushes the brief further down the page. Wider column plus tighter internals turns it from roughly 1:1 into a rectangle without dropping anything it says. Scoped to .sig-head-card so the rail proportions survive if the card is ever used somewhere tall again. */ .sig-head-card .sighc-in{padding:15px 17px 16px} .sig-head-card .sighc-ttl{font-size:16px;margin:0 0 12px} .sig-head-card .sighc-fig{margin:0 0 12px} .sig-head-card .sighc-foot{margin:11px 0 0;padding-top:10px} .sighc-card{position:relative;border:1px solid var(--border);border-radius:16px; background:var(--surface-1);box-shadow:var(--shadow);overflow:hidden} .sighc-in{padding:18px 18px 20px} .sighc-ttl{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text-primary);margin:0 0 14px} /* THE FIGURE. One brief item, two destinations — see _signal_how_card() for why this is a BRANCH and not the five-node sequence it replaced. Everything inks from tokens so the figure re-colours itself in the light theme with no second copy: --muted is a stage whose contents ROTATE, and --text-primary is the strongest ink the theme has, spent on the one terminal that is permanent. That contrast is the whole citation rule, carried by a fill colour. */ .sighc-fig{display:block;width:100%;height:auto;margin:0 0 14px} .sighc-fig text{font-family:var(--font-body)} .sighc-fig .sighc-l{font-size:9px;font-weight:700;letter-spacing:.8px;fill:var(--text-primary)} .sighc-fig .sighc-lq{font-size:9px;font-weight:700;letter-spacing:.8px;fill:var(--muted)} .sighc-fig .sighc-s{font-size:8.5px;font-weight:500;fill:var(--muted)} .sighc-link{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600; color:var(--accent);text-decoration:none;border-bottom:1px solid transparent; transition:border-color .14s ease} .sighc-link:hover,.sighc-link:focus-visible{border-bottom-color:var(--accent)} .sighc-foot{font-size:10.5px;color:var(--muted);margin:14px 0 0;padding-top:11px; border-top:1px solid var(--border)} /* Signal history — every earlier brief kept, browsable inline */ .sig-hist{margin:30px 0 0;border-top:1px solid var(--border);padding-top:20px} .sig-hist-note{font-size:12.5px;color:var(--muted);margin:0 0 14px} .sig-hist-day{border:1px solid var(--border);border-radius:10px;background:var(--surface-2);margin:0 0 8px;overflow:hidden} .sig-hist-day summary{cursor:pointer;padding:12px 15px;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text-primary);list-style:none;display:flex;align-items:center;gap:9px} .sig-hist-day summary::-webkit-details-marker{display:none} .sig-hist-day summary::before{content:"\25B8";color:var(--muted);font-size:12px;transition:transform .15s} .sig-hist-day[open] summary::before{transform:rotate(90deg)} .sig-hist-n{font-size:11px;font-weight:600;color:var(--muted);background:var(--surface-1);border:1px solid var(--border);border-radius:999px;padding:1px 8px;margin-left:auto} .sig-hist-list{padding:2px 15px 14px} .sig-hist-row{display:flex;flex-direction:column;gap:2px;padding:9px 0;border-top:1px solid var(--border);text-decoration:none} .sig-hist-row:first-child{border-top:0} .sig-hist-hl{font-size:13px;font-weight:600;color:var(--text-primary);line-height:1.4} .sig-hist-row:hover .sig-hist-hl{color:var(--accent)} .sig-hist-src{font-size:11px;color:var(--muted)} .sig-hist-full{display:inline-block;margin-top:11px;font-size:12.5px;font-weight:600;color:var(--accent);text-decoration:none} /* Signal Research cards — chronological, source on the right rail */ .sig-rdate{font:700 10.5px/1 var(--font-body);letter-spacing:.6px;text-transform:uppercase;color:var(--c-violet);margin:22px 0 11px;display:flex;align-items:center;gap:10px} .sig-rdate:first-child{margin-top:16px} .sig-rdate::after{content:"";flex:1;height:1px;background:var(--border)} .sig-rcard{display:flex;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);overflow:hidden;margin:0 0 11px} .sig-rmain{flex:1;min-width:0;padding:15px 17px} .sig-rtitle{font-family:var(--font-display);font-size:15.5px;font-weight:600;line-height:1.35;margin:0 0 8px} .sig-rtitle a{text-decoration:none;color:var(--text-primary)} .sig-rtitle a:hover{color:var(--accent)} .sig-rimpact{font-size:12.5px;color:var(--text-secondary);line-height:1.5;margin:0} .sig-rimpact b{color:var(--c-aqua);font-weight:700;text-transform:uppercase;font-size:10px;letter-spacing:.4px;margin-right:6px} .sig-rsrc{flex:0 0 172px;border-left:1px solid var(--border);background:var(--surface-1);padding:15px 15px;display:flex;flex-direction:column;gap:5px} .sig-rsrc-l{font:700 9px/1 var(--font-body);letter-spacing:.6px;text-transform:uppercase;color:var(--muted)} .sig-rsrc-name{font-size:13px;font-weight:700;color:var(--text-primary);line-height:1.3} .sig-rsrc-date{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums} .sig-rsrc-lnk{margin-top:auto;font-size:12px;font-weight:600;color:var(--accent);text-decoration:none} .sig-rempty{border:1px dashed var(--border);border-radius:10px;padding:16px 18px;color:var(--muted);font-size:13px;line-height:1.55;margin-top:16px} @media(max-width:640px){.sig-rcard{flex-direction:column}.sig-rsrc{flex-basis:auto;border-left:0;border-top:1px solid var(--border);flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}.sig-rsrc-lnk{margin:0 0 0 auto}} @media(max-width:720px){.sig-builders-grid{grid-template-columns:1fr}} .sig-list{display:flex;flex-direction:column;gap:14px} .sig-item{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:15px 16px; background:var(--surface-1);border:1px solid var(--border);border-radius:12px} .sig-rank{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--muted); font-variant-numeric:tabular-nums;padding-top:2px} .sig-body{min-width:0;display:flex;flex-direction:column;gap:7px} .sig-src{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:10.5px;color:var(--muted); letter-spacing:.04em;text-transform:uppercase;font-weight:600} .sig-lnk{color:var(--c-aqua);text-transform:none;letter-spacing:0;font-weight:600;text-decoration:none} .sig-lnk:hover{text-decoration:underline} .sig-hl{font-family:var(--font-display);font-size:16px;line-height:1.3;letter-spacing:-.01em;margin:0} .sig-hl a{color:var(--text-primary);text-decoration:none} .sig-hl a:hover{color:var(--c-aqua)} /* Two labelled rows per item — "The news" (the source's own words) and "What it means for you" (the model's impact line). The template from the wireframe. */ .sig-rows{display:flex;flex-direction:column;gap:9px;margin-top:3px} .sig-row{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:baseline} .sig-k{font-family:var(--font-display);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);font-weight:700;padding-top:3px} .sig-v{font-size:14px;line-height:1.55;color:var(--text-secondary);min-width:0} .sig-impact{color:var(--text-primary)} @media(max-width:640px){.sig-row{grid-template-columns:1fr;gap:2px}.sig-k{padding-top:0}} /* "More from today" — the rest of the sweep, collapsed behind a native

. */ .sig-more{border:1px solid var(--border);border-radius:12px;background:var(--surface-1);overflow:hidden} .sig-more>summary{cursor:pointer;padding:14px 16px;font-family:var(--font-display);font-size:13.5px; color:var(--text-secondary);list-style:none;user-select:none} .sig-more>summary::-webkit-details-marker{display:none} .sig-more>summary::before{content:"▸ ";color:var(--muted)} .sig-more[open]>summary::before{content:"▾ "} .sig-more>summary b{color:var(--text-primary)} .sig-more>summary:hover{color:var(--text-primary)} .sig-more-cap{color:var(--muted);font-size:11.5px;font-weight:400} .sig-more-list{display:flex;flex-direction:column;border-top:1px solid var(--border)} .sig-more-item{display:flex;flex-direction:column;gap:4px;padding:12px 16px;text-decoration:none; border-bottom:1px solid var(--border)} .sig-more-item:last-child{border-bottom:none} .sig-more-item:hover{background:var(--surface-2)} .sig-more-meta{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.05em; text-transform:uppercase;color:var(--muted);font-weight:600} .sig-more-hl{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--text-primary)} .sig-more-sum{font-size:12.5px;line-height:1.5;color:var(--text-secondary)} .sig-pill{display:inline-flex;align-items:center;font-family:var(--font-display);font-size:9.5px; font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2.5px 7px;border-radius:20px; border:1px solid var(--border-strong);color:var(--text-secondary);background:var(--surface-3);white-space:nowrap} /* Country pill: colour marks the bloc (US / China / any other nation), text names the country. */ .sig-p-us{color:var(--c-blue);border-color:color-mix(in srgb,var(--c-blue) 42%,transparent);background:color-mix(in srgb,var(--c-blue) 12%,transparent)} .sig-p-cn{color:var(--c-red);border-color:color-mix(in srgb,var(--c-red) 42%,transparent);background:color-mix(in srgb,var(--c-red) 12%,transparent)} .sig-p-natl{color:var(--c-green);border-color:color-mix(in srgb,var(--c-green) 42%,transparent);background:color-mix(in srgb,var(--c-green) 12%,transparent)} /* Type pill: one colour per kind of change. */ .sig-t-cap{color:var(--c-aqua);border-color:color-mix(in srgb,var(--c-aqua) 42%,transparent);background:color-mix(in srgb,var(--c-aqua) 12%,transparent)} .sig-t-price{color:var(--c-yellow);border-color:color-mix(in srgb,var(--c-yellow) 42%,transparent);background:color-mix(in srgb,var(--c-yellow) 12%,transparent)} .sig-t-biz{color:var(--c-violet);border-color:color-mix(in srgb,var(--c-violet) 42%,transparent);background:color-mix(in srgb,var(--c-violet) 12%,transparent)} .sig-t-res{color:var(--c-orange);border-color:color-mix(in srgb,var(--c-orange) 42%,transparent);background:color-mix(in srgb,var(--c-orange) 12%,transparent)} .sig-t-pol{color:var(--c-magenta);border-color:color-mix(in srgb,var(--c-magenta) 42%,transparent);background:color-mix(in srgb,var(--c-magenta) 12%,transparent)} .sig-p-vendor{color:var(--c-aqua);border-color:color-mix(in srgb,var(--c-aqua) 42%,transparent);background:color-mix(in srgb,var(--c-aqua) 12%,transparent)} .sig-p-research{color:var(--c-violet);border-color:color-mix(in srgb,var(--c-violet) 42%,transparent);background:color-mix(in srgb,var(--c-violet) 12%,transparent)} .sig-p-market{color:var(--c-yellow);border-color:color-mix(in srgb,var(--c-yellow) 42%,transparent);background:color-mix(in srgb,var(--c-yellow) 12%,transparent)} .sig-p-practice{color:var(--c-aqua);border-color:color-mix(in srgb,var(--c-aqua) 42%,transparent);background:color-mix(in srgb,var(--c-aqua) 12%,transparent)} .sig-p-analysis{color:var(--accent-2);border-color:color-mix(in srgb,var(--accent-2) 42%,transparent);background:color-mix(in srgb,var(--accent-2) 12%,transparent)} .sig-p-digest{color:var(--text-secondary)} /* Brief page — provenance, archive, empty state. */ .sig-prov{margin-top:26px;padding-top:14px;border-top:1px solid var(--border)} .sig-prov p{font-size:12.5px;color:var(--muted);line-height:1.6;max-width:74ch} .sig-arch{margin-top:24px;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline} .sig-arch-h{font-family:var(--font-display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-right:4px} .sig-arch-lnk,.sig-arch-cur{font-size:12px;font-variant-numeric:tabular-nums;padding:3px 9px;border-radius:999px;border:1px solid var(--border)} .sig-arch-lnk{color:var(--text-secondary);text-decoration:none;background:var(--surface-1)} .sig-arch-lnk:hover{border-color:var(--c-aqua);color:var(--text-primary)} .sig-arch-cur{color:var(--muted);opacity:.6;background:var(--surface-2)} .sig-empty{padding:8px 0 20px} .sig-empty h2{font-family:var(--font-display);font-size:20px;margin:0 0 8px} .sig-empty p{color:var(--text-secondary);max-width:60ch} @media(max-width:640px){.sig-item{grid-template-columns:26px 1fr;gap:8px;padding:13px}} /* The burger is a member of the top-right cluster and reads the same two tokens as the rest of it. It escaped BOTH earlier sweeps — it kept a 10px radius when the row was unified on --nav-r, and it measured 37px when the row was unified on --nav-h — because it only renders below 1100px, so neither desktop check ever saw it. That is the argument for tokens over per-control values: a control you cannot see on the screen you are testing still drifts. */ .burger{display:none;background:var(--surface-1);border:1px solid var(--border-strong);color:var(--text-primary); border-radius:var(--nav-r);padding:0 11px;height:var(--nav-h);box-sizing:border-box; align-items:center;cursor:pointer;font-size:15px} .lens-seg{display:inline-flex;background:var(--surface-1);border:1px solid var(--border-strong);border-radius:999px;padding:3px} .lens-seg button{border:0;background:transparent;cursor:pointer;font:inherit;font-size:11.5px;font-weight:600; color:var(--text-secondary);padding:5px 9px;border-radius:999px} .lens-seg button[aria-pressed="true"]{background:var(--text-primary);color:var(--page)} /* mobile menu */ .mobile-menu{display:none} @media(max-width:1180px){.lens-seg{display:none}} /* 980, not 940. The desktop bar needs 982px at its tightest, so 941-980px was a seam where the burger had not taken over yet and the full bar could not fit — the header itself pushed document.scrollWidth out and the whole page scrolled sideways. Moving the breakpoint to meet the width the bar actually needs closes it; below this the burger owns the nav, above it the bar is verified to fit. Do not lower this without re-measuring the bar. ⚑⚑ 1280 SINCE 2026-08-26, AND THIS REVERSES A RECORDED DECISION — the ~1040px note below says in as many words that hiding controls was rejected because "the alternative was raising the hamburger breakpoint and losing the menu entirely on a laptop". That judgement was made for a SEVEN-tab bar and the eighth changed the arithmetic, measured rather than argued: fully tightened (padding 3px, labels 12.5px, wordmark tail hidden, .tn-right down to its own 212px minimum) the bar still ran 26-126px long at every width from 1000 to 1280. There is no knob left that does not delete a destination, and THAT is the rule this file will not break. So the burger owns the nav up to 1280 instead of 980. ⚠︎ NOTHING BECOMES UNREACHABLE. drawerHtml() iterates the same BAR array the desktop bar is built from, so all eight tabs — Cross-domain included — plus Signal, Learn, the Map and the account are in the drawer at every width below this. Re-measure before moving it again; the number is a measurement of the current bar, not a preference. */ @media(max-width:1280px){ /* Everything here is already reachable from the burger menu, so it hides rather than fighting for width. The .cta ("Cheat sheet →") was the actual cause of the burger being pushed off the right edge on a phone: brand + search + a 14px-padded gradient button + burger does not fit, and .tn-right has no wrap, so the last child overflowed the viewport. */ .menu,.tn-right .seg,.tn-right .lens-seg,.tn-right .tn-account,.tn-right .tn-signal,.tn-right .cta{display:none} .burger{display:inline-flex;flex:none} /* Belt and braces: the header must never be the thing that scrolls sideways. */ .tn-inner{gap:8px;padding:0 14px;overflow:hidden} .tn-right{min-width:0;gap:7px} .tn-search{min-width:0;flex:1 1 auto} #foundry-q{width:100%;min-width:0} #foundry-q:focus{width:100%} .brand .wordmark{display:none} /* logo mark alone carries the brand at this width */ .mobile-menu{display:block;position:fixed;inset:var(--header-h) 0 0 0;z-index:90;background:var(--page); overflow-y:auto;padding:16px 20px 60px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .18s} body.nav-open .mobile-menu{opacity:1;transform:none;pointer-events:auto} .mobile-menu .mg{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:18px 0 6px} .mobile-menu a{display:block;text-decoration:none;color:var(--text-primary);font-weight:600;padding:10px 8px;border-bottom:1px solid var(--border)} /* ⚑ THE DRAWER IS AN ACCORDION — 2026-08-24. It printed every group's rows flat, which after the kit menu grew was 111 links in one scroll.

is native: it opens on tap, is keyboard-operable and is announced as expandable with no JS, so the drawer survives even if the desktop open/close controller never runs. */ .mobile-menu .mg-acc{border-bottom:1px solid var(--border)} .mobile-menu .mg-acc summary.mg{display:flex;align-items:center;justify-content:space-between; gap:10px;margin:0;padding:14px 8px;font-size:13.5px;font-weight:700;letter-spacing:0; text-transform:none;color:var(--text-primary);cursor:pointer;list-style:none} .mobile-menu .mg-acc summary.mg::-webkit-details-marker{display:none} .mobile-menu .mg-acc summary.mg::after{content:"▾";font-size:11px;color:var(--muted); transition:transform .15s ease} .mobile-menu .mg-acc[open] summary.mg::after{transform:rotate(180deg)} .mobile-menu .mg-acc a{display:flex;align-items:center;gap:9px;font-weight:500;font-size:13.5px; padding:9px 8px 9px 18px;border-bottom:0;color:var(--text-secondary)} .mobile-menu .mg-acc a:last-child{padding-bottom:14px} .mobile-menu .mg-d{width:8px;height:8px;border-radius:50%;flex:none} .mobile-menu .mg-n{margin-left:auto;font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums} .mobile-menu .mg-all{display:flex;align-items:center;gap:9px;color:var(--accent)} /* A kit page's own sections, first in the drawer (nav.js fillPage). Lighter rows than the site links below them, and the panel being read is marked the way the desktop rail marks it. */ .mobile-menu .mm-page .mg:first-child{margin-top:6px} .mobile-menu .mm-page a{font-weight:500;font-size:14px;padding:9px 8px;color:var(--text-secondary); font-variant-numeric:tabular-nums} .mobile-menu .mm-page a.is-here{color:var(--c-teal);font-weight:700} .mobile-menu .mm-page .mg:last-child{margin-top:22px} /* Theme row, first thing in the menu. Reuses the desktop .seg component rather than restyling a second toggle — one appearance, and the shared [data-theme-set] handler keeps both in step. The desktop hide rule targets `.tn-right .seg` specifically, so this copy is unaffected. */ .mm-theme{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:4px 8px 14px;margin-bottom:4px;border-bottom:1px solid var(--border)} .mm-theme-l{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} /* Bigger hit targets than the desktop toggle — this one is operated with a thumb. */ .mobile-menu .seg button{font-size:13px;padding:8px 16px} } /* ---------------- Hero (index) ---------------- */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border); background: radial-gradient(900px 460px at 82% -8%,color-mix(in srgb,var(--accent-2) 26%,transparent),transparent 60%), radial-gradient(760px 420px at 8% 4%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 58%)} .hero .wrap{padding:64px 24px 54px;position:relative} .eyebrow{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.18em;font-size:12.5px;font-weight:700; color:var(--accent)} .hero h1{font-size:clamp(38px,6.4vw,74px);line-height:1.02;margin:16px 0 20px;letter-spacing:-0.03em;max-width:15ch} /* ⚑ THE INDEX HERO IS A FIGURE AND A LINE — approved 2026-08-30 (artifact 898da1e4): the kit count as a display number beside one short sentence, so the count IS the headline rather than a word in the eyebrow. The h1 keeps its role for structure and gates; the 15ch cap above is for a sentence-headline and is lifted here, which is what fills the right half of the fold. */ .hero h1.hero-head{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;max-width:none;font-size:inherit;line-height:1;margin:18px 0 22px} .hero-big{font-family:var(--font-display);font-weight:700;font-size:clamp(72px,10.5vw,148px);line-height:.78;letter-spacing:-.05em;color:var(--accent);font-variant-numeric:tabular-nums} .hero-words{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1.02;font-size:clamp(26px,3.6vw,46px);color:var(--text-primary);text-wrap:balance;max-width:19ch} @media(max-width:760px){.hero h1.hero-head{gap:10px}.hero-words{max-width:none}} /* Follows --measure like all other prose. `.hero h1` above deliberately does NOT — a headline wants a short measure (15ch) whatever the body does, so it stays fixed. */ .hero .lead{font-size:clamp(16px,2vw,19px);color:var(--text-secondary);max-width:var(--measure);margin:0 0 28px} .hero .lead strong{color:var(--text-primary);font-weight:600} .hero-cta{display:flex;flex-wrap:wrap;gap:12px} .btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:650;font-size:15px;padding:13px 22px;border-radius:13px} .btn.primary{color:var(--accent-fill-ink);background:linear-gradient(135deg,var(--accent-fill),color-mix(in srgb,var(--accent-fill) 65%,var(--accent-2))); box-shadow:0 8px 22px rgba(91,141,239,.4)} .btn.primary:hover{filter:brightness(1.06)} .btn.ghost{color:var(--text-primary);background:var(--surface-1);border:1px solid var(--border-strong)} .btn.ghost:hover{border-color:var(--accent)} /* content shell */ .content{padding:44px 0 10px} .content .wrap>section{margin-bottom:30px} .section-num{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .section-title{font-size:clamp(22px,3vw,30px);margin:8px 0 8px} .section-lead{color:var(--text-secondary);max-width:var(--measure);margin:0 0 14px;font-size:15.5px} /* figure / diagram */ .figure{background:var(--figure-bg);border:1px solid var(--border-strong);border-radius:18px;padding:24px; margin:10px 0;text-align:center;overflow-x:auto;box-shadow:var(--shadow)} .figure img{max-width:100%;height:auto;display:block;margin:0 auto} /* .figure centres its contents, which is right for a diagram and wrong for a table. text-align inherits, so a table dropped into a figure wrapper had its BODY cells centred while .ftable th and .dtable th set text-align:left explicitly — headers hard left, every data cell centred under them. 43 tables across 13 pages shipped that way, and the component standard is explicit: "Left-align every column. Mixed alignment forces the eye to hunt for column edges." Reset on the table rather than on each cell rule, so any table put in a figure later is covered without a new rule. */ .figure table{text-align:left} /* Theme-swapped diagrams: every diagram is rendered twice (light + dark palette) and both s are emitted; show the one matching the viewer's theme. Dark is the site default, so the dark render shows by default and the light render only under [data-theme="light"]. Specificity is img.dia-* so these beat the plain `.figure img` rule above. */ img.dia-light{display:none} img.dia-dark{display:block;margin:0 auto} html[data-theme="light"] img.dia-light{display:block;margin:0 auto} html[data-theme="light"] img.dia-dark{display:none} /* Tier-2 figures ship a narrow variant too, so their twins are