/* STEMDust: production adaptation of the supplied four-screen design. */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;src:url('/static/stemdust/83d548cd73ef.woff2') format('woff2')}
/* Inter proper, self-hosted and subset to Latin. Inter Tight above stays the UI
   and heading face: it is a narrower, tighter sibling drawn for display sizes,
   and that tight fit works against legibility in long-form reading text. The
   opsz axis lets the browser pick the text-optimised design at body sizes. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url('/static/fonts/inter-variable-latin.woff2') format('woff2')}
@font-face{font-family:"Inter";font-style:italic;font-weight:100 900;font-display:swap;src:url('/static/fonts/inter-variable-latin-italic.woff2') format('woff2')}
:root{
color-scheme:light;
/* Palette. Every colour is recorded as a light/dark pair so one token can drive
   both schemes, and --ink and --primary are deliberately scheme-stable (a fixed
   dark surface, and the brand copper).

   DARK MODE IS NOT ENABLED YET, deliberately. Under `color-scheme: light` each
   light-dark() pair resolves to its light value, so this block is visually
   identical to the palette it replaced. Switching the line above to
   `light dark` currently produces a mixed result: the lab surfaces flip while
   the page canvas and several headings do not, because modern.css still carries
   86 colour literals and engagement.css sets heading colours directly. Finish
   those two files, then flip this one line. */
--canvas:light-dark(#f6f3f0,#15120f);
--canvas-2:light-dark(#faf8f7,#1c1816);
--surface:light-dark(#ffffff,#221d1a);
--ink:#141d29;--ink-2:#1d2836;--nav:#141d29;--nav-text:#f7f4f2;--nav-muted:#c8cfd9;
--on-ink:#f7f4f2;--on-ink-muted:#c8cfd9;
--heading:light-dark(#241f1d,#f6f1ec);
--text:light-dark(#322d2b,#e8e1da);
--muted:light-dark(#6f6763,#b3a79e);
--faint:light-dark(#756c66,#a1958c);
--line:light-dark(#e4e0de,#3a322d);
--line-soft:light-dark(#eeeae8,#2e2824);
--line-strong:light-dark(#8d817c,#6a5e57);
--primary:#ad512f;--primary-hover:#913d21;--primary-text:#ffffff;
--primary-ink:light-dark(#913d21,#e0875f);
--accent-soft:#efa884;
--wash:light-dark(#fcf3ee,#2a211c);
--wash-line:light-dark(#f4e0d7,#3d2f27);
--ok-bg:light-dark(#fcf3ee,#2a211c);
--ok-text:light-dark(#913d21,#e0875f);
--focus:light-dark(#913d21,#e0875f);
--shadow:light-dark(#141d2912,#00000059);
/* Type scale in rem against a 16px root, so a reader who raises their browser
   text size scales the whole interface (WCAG 1.4.4). The smallest step is 13px:
   GOV.UK Frontend v6.0.0 removed its 14px step in February 2026 and Atlassian
   raised its floor from 11px to 12px, so 11px supporting text is no longer
   defensible. Body and interface text is 16px. */
--fs-micro:.8125rem;--fs-xs:.875rem;--fs-sm:.9375rem;--fs-base:1rem;--fs-md:1.0625rem;
--fs-lg:1.3125rem;--fs-xl:1.6875rem;--fs-2xl:2.125rem;--fs-3xl:2.75rem;
--fs-display:clamp(2.375rem,4.4vw,3.5rem);--fs-h1:clamp(1.75rem,2.6vw,2.5rem);
--fs-figure:clamp(6rem,15vw,12rem);
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:40px;--sp-9:48px;--sp-10:64px;--sp-11:80px;--sp-12:96px;--sp-13:128px;--sp-14:160px;
--r-sm:8px;--r-md:14px;--r-lg:20px;--r-pill:999px;--radius:14px;--radius-lg:20px;
--measure:68ch;--measure-wide:80ch;--tap:44px;--gutter:clamp(20px,4vw,56px);
font-family:"Inter Tight","Helvetica Neue",system-ui,sans-serif;
font-size:16px;line-height:1.6;font-synthesis:none}
body{-webkit-font-smoothing:antialiased;letter-spacing:-.005em;display:flex;flex-direction:column}
body.signed-in{padding:0}a{color:var(--primary-ink)}a:hover{color:var(--primary-ink)}h1,h2,h3{color:var(--heading);font-weight:600;letter-spacing:-.035em;line-height:1.15}h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-lg)}h3{font-size:var(--fs-md)}
::selection{background:var(--wash-line);color:var(--heading)}.skip{z-index:100}.button,main button{border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:550}.button{border-width:1px}.button--secondary{border-color:var(--line-strong);color:var(--text);background:var(--surface)}.button--secondary:hover{border-color:var(--line-strong);background:var(--wash);color:var(--primary-ink)}
.app-header{position:sticky;top:0;z-index:40;background:var(--primary);border-bottom:0}
.app-header__inner{width:min(1440px,100% - var(--gutter)*2);margin:auto;display:flex;align-items:center;gap:32px;min-height:64px}
.app-header .brand{color:var(--surface);font-size:var(--fs-lg);letter-spacing:-.045em;white-space:nowrap}
.app-nav{display:flex;align-items:stretch;gap:24px;align-self:stretch}.app-nav a{display:flex;align-items:center;text-decoration:none;color:var(--on-ink);font-size:var(--fs-sm);white-space:nowrap;border-bottom:2px solid transparent}.app-nav a:hover,.app-nav a[aria-current]{color:var(--surface)}.app-nav a[aria-current]{border-bottom-color:var(--surface)}
.app-header__actions{display:flex;align-items:center;gap:12px;margin-left:auto}.header-search{display:flex;align-items:center;gap:8px;border:1px solid #ffffff5c;border-radius:var(--r-pill);background:#00000024;padding:0 12px;width:210px;height:40px;color:var(--surface)}.header-search input{min-width:0;width:100%;border:0;background:transparent;font:inherit;color:var(--surface);outline:none}.header-search input::placeholder{color:#f6ded2}.header-search:focus-within{outline:2px solid var(--surface);outline-offset:2px}.header-login{white-space:nowrap;font-size:var(--fs-sm);display:flex;align-items:center;min-height:var(--tap);text-decoration:none;color:var(--surface)}
.app-header a:focus-visible,.app-header summary:focus-visible{outline:2px solid var(--surface);outline-offset:3px}
.account-avatar{display:grid;place-items:center;border-radius:50%;width:38px;height:38px;background:var(--ink);color:var(--surface);font-weight:600;text-decoration:none}
.site-menu{position:relative}.site-menu summary{width:44px;height:44px;display:grid;place-items:center;list-style:none;border:1px solid var(--line);border-radius:50%;cursor:pointer}.app-header .site-menu summary{border-color:#ffffff5c;color:var(--surface)}.app-header .site-menu[open] summary{background:#00000024}.site-menu summary::-webkit-details-marker{display:none}.site-menu[open] summary{background:var(--ok-bg)}.site-menu nav{position:absolute;right:0;top:54px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 12px 35px var(--shadow);width:250px;max-height:calc(100dvh - 100px);overflow:auto}.site-menu nav a,.site-menu nav button{display:flex;align-items:center;min-height:44px;padding:8px 12px;text-decoration:none;color:var(--text);width:100%;border-radius:8px;font-size:var(--fs-sm)}.site-menu nav a:hover,.site-menu nav button:hover{background:var(--wash)}
main.page,.signed-in main{width:min(1320px,100% - var(--gutter)*2);max-width:1320px;margin:0 auto;padding:48px 0 64px;flex:1;min-width:0}main.page--account{max-width:640px}.app-footer{background:var(--ink);color:var(--line);margin-top:auto}.app-footer>div{width:min(1320px,100% - var(--gutter)*2);margin:auto;display:flex;align-items:center;gap:24px;padding:24px 0;font-size:var(--fs-xs)}.app-footer .brand{color:var(--canvas-2);font-size:var(--fs-lg);letter-spacing:-.04em}.app-footer a:last-child{margin-left:auto;color:var(--line-soft);text-decoration:none}
.eyebrow{font-size:var(--fs-micro);letter-spacing:.01em;color:var(--muted);font-weight:500}.lede{color:var(--muted);line-height:1.6;font-size:var(--fs-md)}.community-card,.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px var(--shadow);padding:20px}.community-card h2 a,.community-card h3 a{text-decoration:none;color:var(--heading)}.community-card h2 a:hover{color:var(--primary-ink)}.community-card--material{border-left:4px solid var(--primary)}.badge{border-radius:var(--r-pill);border:1px solid var(--line-soft);background:var(--canvas-2);color:var(--muted);font-size:var(--fs-micro);padding:4px 8px}.evidence-state{gap:8px}.evidence-state p{width:100%}.help{color:var(--muted);font-size:var(--fs-xs)}.community-layout{gap:32px}.empty-state{border:1px dashed var(--line);background:var(--canvas-2);border-radius:14px;padding:32px;margin:16px 0}.empty-state h2{margin-top:8px}.empty-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--wash);color:var(--primary-ink);font-size:var(--fs-xl)}
.discovery-heading{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:center;padding:0 0 32px}.discovery-heading h1{font-size:var(--fs-display);margin:var(--sp-1) 0 var(--sp-3);line-height:1}.discovery-heading .lede{max-width:40ch}.discovery-art{position:relative;justify-self:end;width:280px;margin:-32px 8px -4px}.discovery-art img{display:block;width:100%;height:auto;filter:drop-shadow(0 20px 30px var(--shadow))}.discovery-art p{text-align:right;font-size:var(--fs-micro);line-height:1.9;letter-spacing:.01em;margin:0;color:var(--muted)}
.filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.filter-chips a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:var(--r-pill);text-decoration:none;color:var(--muted);font-size:var(--fs-xs);background:var(--canvas-2)}.filter-chips a[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--nav-text)}.filter-chips a:hover{border-color:var(--muted)}
.discovery-columns,.research-columns{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:48px;align-items:start}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-heading h2{margin:0}.community-search{display:flex;align-items:center;gap:8px;max-width:none;margin:16px 0}.community-search input{margin:0;background:var(--canvas-2);border-radius:var(--r-sm);min-width:0}.community-search button{flex:none}.discovery-note{margin-top:24px}.discovery-rail .community-card{margin:0 0 20px}.rail-link{display:flex;align-items:center;justify-content:space-between;min-height:48px;border-top:1px solid var(--line);text-decoration:none;font-size:var(--fs-sm);color:var(--muted)}.join-card{padding:24px;border:1px solid var(--wash-line);border-radius:14px;background:radial-gradient(ellipse at 100% 0,var(--wash-line),transparent 75%),var(--wash)}.join-card h2{margin:16px 0;line-height:1.25;font-size:var(--fs-xl)}.join-card .button{background:var(--ink);border-color:var(--ink);color:var(--nav-text)}.join-card p{font-size:var(--fs-sm);color:var(--muted)}
.record-card{position:relative;padding-left:64px}.record-kind-icon{position:absolute;left:20px;top:24px;background:#2f7d55;color:white;display:grid;place-items:center;width:32px;height:32px;border-radius:8px}.record-kind-icon--theory{background:#4b86c4}.record-kind-icon--finding{background:#6b62c9}.record-kind-icon--evidence{background:var(--primary)}.record-card h2{font-size:var(--fs-lg);letter-spacing:-.025em}.record-card>p:not(.eyebrow){font-size:var(--fs-sm)}.record-card .evidence-state{margin:12px 0}.record-card>a{font-size:var(--fs-micro);color:var(--muted)}
.research-heading{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:64px;align-items:center}.research-heading h1{max-width:25ch;font-size:var(--fs-h1);line-height:1.12}.research-art img{width:100%;height:auto;display:block}.research-art p{letter-spacing:.01em;font-size:var(--fs-micro);text-align:right;color:var(--muted)}.back-link{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-xs);text-decoration:none;color:var(--muted);margin-bottom:12px}.research-heading .lede{max-width:65ch}.reading-controls{padding:0;margin:20px 0 8px}.reading-controls form{max-width:100%}.reading-controls details{font-size:var(--fs-xs)}.reading-controls .help{margin:0}
.tab-nav{flex-wrap:nowrap;overflow-x:auto;gap:24px;border-color:var(--line);margin:24px 0 32px}.tab-nav a{padding:12px 0;color:var(--muted);white-space:nowrap;font-size:var(--fs-sm)}.tab-nav a[aria-current]{color:var(--heading);border-color:var(--primary-ink);font-weight:550}.research-body{min-width:0}.research-body>h2:first-child{margin-top:0}.research-rail .community-card{margin:0 0 16px}.research-rail h2{font-size:var(--fs-md);margin-top:0}.research-rail .evidence-state{margin-bottom:0}.research-rail .badge{border-radius:8px}.research-rail p{font-size:var(--fs-sm)}.read-section{border-color:var(--line);margin-top:24px;padding-top:20px}.read-section:first-child{margin-top:0}.read-section h2{margin-top:0}.source-address,.preserve-lines{overflow-wrap:anywhere}
.lineage-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.lineage-grid li{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:14px}.lineage-grid h3{margin:8px 0 12px}.lineage-grid a{display:block;margin:8px 0;overflow-wrap:anywhere;font-size:var(--fs-sm)}.lineage-destination{border:1px solid var(--wash-line);border-radius:14px;background:var(--wash);padding:24px;margin-top:20px}.lineage-destination h3{margin-top:4px}
input,select,textarea{max-width:100%}main input:not([type=checkbox]):not([type=radio]):not([type=hidden]),main textarea,main select{background:var(--surface);border-color:var(--line-strong);border-radius:var(--r-sm);color:var(--text)}.ai button{color:var(--primary-text)}main .gov,main .ai{overflow-wrap:anywhere}
@media(max-width:1180px){.app-nav{gap:16px}.app-header__inner{gap:20px}.header-search{width:150px}.app-nav a{font-size:var(--fs-xs)}.discovery-columns,.research-columns{gap:24px;grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:980px){.app-nav{display:none}.header-search{width:220px}.discovery-heading{grid-template-columns:minmax(0,1fr) 230px;gap:20px}.discovery-art{width:210px;margin:0}.research-heading{gap:24px;grid-template-columns:minmax(0,1fr) 220px}.discovery-columns,.research-columns{grid-template-columns:minmax(0,1fr)}.discovery-rail,.research-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.research-rail .community-card{margin:0}.research-rail{margin-top:8px}.lineage-grid{gap:12px}}
@media(max-width:600px){.app-header__inner{gap:12px;min-height:68px}.app-header__actions{gap:8px}.header-search{display:none}.app-header .brand{font-size:var(--fs-lg)}main.page,.signed-in main{padding:32px 0 40px}.discovery-heading,.research-heading{grid-template-columns:minmax(0,1fr)}.discovery-art,.research-art{display:none}.discovery-heading{padding-bottom:24px}.discovery-heading h1{font-size:var(--fs-2xl)}.discovery-rail,.research-rail{grid-template-columns:minmax(0,1fr)}.filter-chips{margin-top:20px}.filter-chips a{padding:8px 12px}.section-heading{align-items:flex-start;flex-direction:column;gap:4px}.community-card{padding:20px}.record-card{padding-left:64px}.record-kind-icon{left:17px;top:22px;width:29px;height:29px}.record-card h2{font-size:var(--fs-md)}.app-footer>div{flex-wrap:wrap;gap:8px 16px}.app-footer a:last-child{margin-left:0;flex-basis:100%}.lineage-grid{grid-template-columns:minmax(0,1fr)}.research-heading h1{font-size:var(--fs-xl)}.reading-controls{display:flex}.reading-controls form{margin:0}.tab-nav{gap:24px}.empty-state{padding:24px}}

.reveal{color:var(--primary-ink)}.button{gap:8px}
.tabs a[aria-current="page"]{color:var(--primary-ink);border-bottom-color:var(--primary-ink)}

.work-post{margin-bottom:16px}.work-post h3{font-size:var(--fs-lg);margin:8px 0}.work-post h3 a{text-decoration:none;color:var(--ink)}

.header-logout{margin:0;flex:none}.header-logout button{min-height:44px;padding:8px 12px;border:1px solid #ffffff75;border-radius:8px;background:transparent;color:var(--surface);font:inherit;font-size:var(--fs-xs);white-space:nowrap;cursor:pointer}.header-logout button:hover{background:#0002}.header-logout button:focus-visible{outline:2px solid var(--surface);outline-offset:3px}
@media(min-width:981px) and (max-width:1250px){.app-header__actions .header-search{display:none}}
@media(max-width:400px){.app-header__inner{gap:8px}.app-header__actions{gap:4px}.header-logout button{padding-inline:8px}.app-header .brand{font-size:var(--fs-lg)}}

/* Compact post previews; native links open the full project page. */
.compact-post,.feed-home .feed-records .compact-post{position:relative;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:20px;padding:20px;border:1px solid var(--line);border-radius:14px;margin:0 0 16px;background:var(--surface);box-shadow:0 2px 4px var(--shadow)}
.feed-home .feed-records{padding:16px;background:var(--canvas)}
.feed-home .feed-records .compact-post:last-child{border-bottom:1px solid var(--line)}
.post-preview{flex:1;min-width:0}.post-thumbnail{width:94px;height:94px;object-fit:cover;border-radius:14px;flex:none;margin-top:4px}
.post-type{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px;font-size:var(--fs-micro);color:var(--muted)}.post-type>span:first-child{padding:4px 8px;background:var(--wash);color:var(--primary-ink);border-radius:var(--r-pill);font-weight:600}
.compact-post h2,.feed-home .feed-records .compact-post h2{font-size:var(--fs-lg);line-height:1.25;margin:8px 0}.compact-post h2 a{color:var(--ink);text-decoration:none}.compact-post h2 a:after{content:"";position:absolute;inset:0;border-radius:14px}.compact-post:focus-within{outline:2px solid var(--primary);outline-offset:3px}
.post-excerpt,.feed-home .feed-records .post-excerpt{color:var(--muted);font-size:var(--fs-sm);line-height:1.5;margin:0 0 16px}.post-foot{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center;margin:0;font-size:var(--fs-micro);color:var(--muted)}.post-foot a{position:relative;z-index:1;color:var(--primary-ink);text-decoration:none;font-weight:600}
@media(max-width:760px){.compact-post,.feed-home .feed-records .compact-post{padding:16px;gap:12px}.post-thumbnail{width:64px;height:64px}.feed-home .feed-records{padding:12px}.compact-post h2,.feed-home .feed-records .compact-post h2{font-size:var(--fs-md)}.post-type{font-size:var(--fs-micro);gap:4px}}

/* Reading measure. Prose that is not already inside a narrow column is capped
   so a line stays in the 45-90 character band; cards and grids are unaffected
   because max-width only ever narrows. */
.gov>p,.gov>section>p,.gov li,.read-section>p,.read-section>ul,.read-section>ol,
main.page>p,main.page>section>p,main>.page-intro,p.help,p.banner,p.lede,.empty-state>p{max-width:var(--measure)}
.gov>h1+p,.page-heading p{max-width:var(--measure-wide)}

/* Metric tiles. A dashboard number should be the largest thing on its card, and
   the machine identifier behind it is reference material, not body copy. */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-4);margin-top:var(--sp-4)}
.metric-grid .community-card{margin:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.metric-grid .metric h3{font-size:var(--fs-micro);letter-spacing:.01em;color:var(--muted);margin:0;font-weight:600}
.metric-grid .metric>p{margin:0;font-size:var(--fs-sm)}
.metric-grid .metric .metric-value{font-size:var(--fs-2xl);font-weight:650;letter-spacing:-.03em;color:var(--heading);margin:0;line-height:1.05}
.metric-grid .metric .metric-list{margin:0}
.metric-grid .metric .help{margin:0;max-width:none;color:var(--muted)}
.metric-ref{margin:var(--sp-2) 0 0;font-size:var(--fs-micro)}
.metric-ref summary{color:var(--muted);cursor:pointer;min-height:var(--tap);display:flex;align-items:center}
.metric-ref code{font-size:var(--fs-micro);color:var(--faint);overflow-wrap:anywhere}

/* Settings. The form was floating on bare canvas while every other page put its
   content in a card; the panel matches, and the fields keep a single column so
   the page does not read as one narrow strip beside a lot of nothing. */
.settings-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-6);max-width:760px}
.settings-panel>h1:first-child,.settings-panel>.settings-head{margin-top:0}
.settings-panel .field,.settings-panel fieldset{max-width:520px}
.settings-panel fieldset{border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:var(--sp-4);margin:var(--sp-5) 0}
.settings-panel legend{font-size:var(--fs-xs);color:var(--muted);padding-inline:var(--sp-2)}
@media(max-width:700px){.settings-panel{padding:var(--sp-4);border-radius:var(--r-sm)}}

/* A list of records is a reading column, not a full-width table. */
.record-list,.gov>section>.community-card,.work-list{max-width:var(--measure-wide)}

/* Signed-in rail. Same column as the signed-out pitch, different job: a member
   has already joined, so it carries their work and the fields they read. */
.member-rail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-5);margin-bottom:var(--sp-4)}
.member-rail .rail-label{font-size:var(--fs-micro);letter-spacing:.01em;color:var(--muted);margin:0 0 var(--sp-3)}
.member-rail ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-1)}
.member-rail li a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:var(--tap);padding:0 var(--sp-2);border-radius:var(--r-sm);text-decoration:none;color:var(--text);font-size:var(--fs-sm)}
.member-rail li a:hover{background:var(--wash);color:var(--primary-ink)}
.member-rail li a .icon{color:var(--faint);flex:none}
.member-rail li a:hover .icon{color:var(--primary-ink)}
.member-rail__fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.member-rail__more{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--primary-ink)}

/* A member's rail carries shortcuts, not a pitch, so it needs far less width
   than the signed-out composition and gives the feed the room instead. */
.feed-home:has(.feed-left--member) .feed-layout{grid-template-columns:clamp(260px,22vw,320px) minmax(0,1fr)}
.feed-left--member{padding:var(--sp-6) 0 var(--sp-6) var(--gutter);background:none;border-right:0}
@media(max-width:980px){.feed-left--member{padding:0}}

/* One kind pill, used by the explore card, the feed card and the post header,
   so a record's kind does not change appearance from page to page. */
.post-type>span:first-child,.project-kind{display:inline-flex;align-items:center;background:var(--wash);border:1px solid var(--wash-line);color:var(--primary-ink);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-3);font-size:var(--fs-micro);font-weight:600;letter-spacing:.01em;text-transform:none}

/* One thumbnail frame, so a cut-out asset and a full-bleed asset read the same. */
.post-thumbnail{width:104px;height:104px;flex:none;object-fit:cover;background:var(--wash);border:1px solid var(--wash-line);border-radius:var(--r-md)}

/* Pointer target size. Inline links that act as controls get a 24px floor, and
   the ones that are a page's main action get the full 44px. */
.post-foot a,.app-footer a,.project-breadcrumb a,.metric-ref summary,
.card-actions a,.work-post a,.release-link,.side-row{min-height:24px;display:inline-flex;align-items:center}
.post-foot a,.app-footer a,.release-link{padding-block:var(--sp-1)}
.gov>p>a.button,.page-heading a.button,.empty-state a.button{min-height:var(--tap)}

/* Reading measure, applied broadly. max-width only ever narrows, so a card or a
   grid cell that is already inside the band is untouched. */
main p,main li,main dd{max-width:var(--measure)}
main .lede,main .page-heading p,main .auth-story p{max-width:var(--measure-wide)}
main .metric-grid p,main .post-excerpt,main .banner p,main .evidence-state p,
main .auth-values li,main .member-rail li,main .filter-chips li,main td,main th{max-width:none}

/* Pointer target size. Vertical padding on an inline link grows the hit area
   without changing the line box, so nothing moves on the page. */
main a:not(.button):not(.account-avatar):not(.post-thumbnail):not(.brand){padding-block:4px}

.field-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-3);margin-top:var(--sp-4)}
.field-tile{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:var(--tap);padding:var(--sp-3) var(--sp-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;color:var(--heading);font-weight:550}
.field-tile:hover{border-color:var(--wash-line);background:var(--wash);color:var(--primary-ink)}
.field-tile .icon{color:var(--faint);flex:none}
.field-tile:hover .icon{color:var(--primary-ink)}

/* Shared legal links stay at the lower right, including account screens. */
.app-footer .footer-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:28px 0}
.footer-community{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px}
.app-footer .footer-community a:last-child{margin-left:0;flex-basis:auto}
.app-footer .footer-legal{display:flex;justify-content:flex-end;gap:8px 24px;margin-left:auto;flex-shrink:0;flex-wrap:wrap}
.app-footer .footer-legal a{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:none;margin:0;flex-basis:auto}
.app-footer .footer-legal a:hover{text-decoration:underline;text-underline-offset:4px}
.legal-heading{padding:8px 0 36px;border-bottom:1px solid var(--line);margin-bottom:32px}
.legal-heading h1{color:var(--ink);font-size:clamp(32px,4vw,52px);letter-spacing:-.04em;margin:8px 0 16px}
.legal-heading .lede{max-width:720px}
.legal-draft-label{display:inline-block;background:var(--ink);color:#fff;padding:6px 12px;border-radius:6px;font-size:var(--fs-xs)}
.legal-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start}
.legal-sidebar{position:sticky;top:90px;font-size:var(--fs-sm)}
.legal-sidebar .toc ul{list-style:none;margin:0;padding:0}
.legal-sidebar .toc li{margin:0 0 8px}
.legal-sidebar .toc ul ul{padding-left:16px}
.legal-sidebar a{display:block;color:var(--muted);text-decoration:none;padding:4px 0}
.legal-sidebar a:hover{color:var(--primary);text-decoration:underline}
.legal-sidebar .legal-other{border-top:1px solid var(--line);margin-top:24px;padding-top:20px;color:var(--primary);font-weight:600}
.legal-document{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:clamp(20px,4vw,52px);line-height:1.75;overflow-wrap:anywhere;color:var(--text)}
.legal-document h2{color:var(--ink);font-size:24px;line-height:1.3;margin:40px 0 16px;scroll-margin-top:100px}
.legal-document h3{color:var(--ink);font-size:18px;margin-top:24px;scroll-margin-top:100px}
.legal-document p,.legal-document ul{margin:0 0 20px}
.legal-document li{margin-bottom:10px}
.legal-document>p:has(>strong:only-child){border-left:3px solid var(--primary);padding:12px 16px;background:var(--canvas-2);font-size:var(--fs-sm)}
.legal-back{border-top:1px solid var(--line);padding-top:24px;margin-top:36px!important}
@media(max-width:800px){.legal-layout{grid-template-columns:minmax(0,1fr);gap:24px}.legal-sidebar{position:static}.legal-sidebar .toc>ul{columns:2;column-gap:24px}.legal-sidebar .toc li{break-inside:avoid}.app-footer .footer-inner{flex-direction:column;align-items:stretch;gap:12px}.app-footer .footer-legal{align-self:flex-end}}
@media(max-width:480px){.legal-sidebar .toc>ul{columns:1}.footer-community{gap:8px 16px}.app-footer .footer-legal{gap:8px 20px}.legal-document h2{font-size:var(--fs-lg)}}
.app-footer .footer-community a{color:var(--on-ink);text-decoration:none}.app-footer .footer-community a:hover{text-decoration:underline;text-underline-offset:4px}

/* =====================================================================
   Design pass, 1 October 2026. Items 5-10 of the screenshot review.
   Platform features used here and their Baseline status at the time of
   writing: :has() Widely 2026-06-19, CSS nesting Widely 2026-06-11,
   ::details-content Newly 2025-09-16, field-sizing Newly 2026-06-16,
   :user-invalid Widely 2026-05-02, light-dark() Newly 2024-05-13,
   text-decoration-skip-ink Newly 2026-05-07, tabular-nums Widely 2022-07-15.
   ===================================================================== */

:root{
--danger:light-dark(#9d1f27,#f08a8a);
--danger-bg:light-dark(#fde8e8,#3a1d1f);
--danger-line:light-dark(#f1c9c9,#5d2b2e);
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

/* ---- 10. A closed disclosure is a line, not a box -------------------
   Several lab screens opened with three full-width bordered cards whose
   entire content was a triangle and three words. Card chrome now arrives
   only when the disclosure is actually open. */
main details:not([open]){background:none;border:0;box-shadow:none;padding:0}
main details:not([open])>summary{padding-inline:0}
main details{border-radius:var(--r-md);transition:padding .15s}
main summary{cursor:pointer;display:flex;align-items:center;gap:var(--sp-2);
  min-height:var(--tap);font-weight:550;color:var(--primary-ink);font-size:var(--fs-sm)}
main summary::marker{color:var(--faint)}
main details[open]>summary{margin-bottom:var(--sp-3);border-bottom:1px solid var(--line-soft)}
main details[open]{padding:var(--sp-4);border:1px solid var(--line);background:var(--surface)}
main details[open]:where(.plain){padding:0;border:0;background:none}

/* ---- 10. Behaviour the platform now ships --------------------------- */
main textarea{field-sizing:content;min-height:4lh;max-height:22lh}
main :is(input,select,textarea):user-invalid{border-color:var(--danger);
  background:var(--danger-bg)}
main :is(input,select,textarea):user-invalid+.error-text{color:var(--danger)}
main :is(input,select,textarea):focus-visible,main button:focus-visible,
main a:focus-visible,main summary:focus-visible{outline:2px solid var(--focus);
  outline-offset:2px;border-radius:var(--r-sm)}
/* Search fields sit inside a wrapper that draws its own ring on :focus-within.
   Without this the input rings too and you get two concentric outlines.
   (0,2,1) beats the (0,1,2) of the rule above regardless of order. */
.feed-search input:focus-visible,.header-search input:focus-visible,.community-search input:focus-visible{outline:none}

/* Links. Body links carry an offset underline that skips descenders;
   navigation links are distinguished by position and state, not colour
   alone (WCAG 1.4.1). */
main p a:not(.button),main li a:not(.button):not(.rail-link),main dd a{
  text-underline-offset:.18em;text-decoration-thickness:from-font;
  text-decoration-skip-ink:all}
main nav a{text-decoration:none}
main nav a[aria-current]{font-weight:600}

/* Numbers that are compared vertically must share a column width. */
main td,main th,.metric-value,.ident__value,.lab-table td,.lab-table th{
  font-variant-numeric:tabular-nums}

/* ---- 5. Filter sets collapse behind a disclosure --------------------
   The explore screens opened with four rows of chips, so no content was
   above the fold on a phone. The active filters stay visible; the full
   sets are one tap away. */
.filter-disclosure{margin-top:var(--sp-5)}
.filter-disclosure>summary{color:var(--text);border:1px solid var(--line);
  background:var(--surface);border-radius:var(--r-pill);padding:0 var(--sp-4);
  width:fit-content;max-width:100%}
.filter-disclosure[open]{padding:0;border:0;background:none}
.filter-disclosure[open]>summary{margin-bottom:var(--sp-2);border-bottom:0}
.filter-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
  margin-top:var(--sp-4)}
.filter-summary .filter-label{color:var(--muted);font-size:var(--fs-xs)}
.filter-chips{margin-top:var(--sp-3)}
.filter-chips a{font-size:var(--fs-xs)}
@media(max-width:520px){.filter-chips{gap:var(--sp-1)}}

/* ---- 6. Machine identifiers are reference material, not the interface
   A record page was rendering its raw payload as a definition list, so a
   reviewer read "Round id: cbb8d92e-d563-..." as a primary field. An
   identifier now shows as a short monospace chip with a copy control and
   the full value available to select. */
.ident{display:inline-flex;align-items:center;gap:var(--sp-2);max-width:100%;
  vertical-align:middle}
.ident__value{font-family:var(--mono);font-size:var(--fs-micro);color:var(--faint);
  background:var(--canvas-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:2px var(--sp-2);overflow-wrap:anywhere;user-select:all}
.ident__copy{flex:none;min-height:24px;min-width:24px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  color:var(--muted);cursor:pointer;font-size:var(--fs-micro);padding:0 var(--sp-2)}
.ident__copy:hover{border-color:var(--line-strong);color:var(--primary-ink)}
.record-fields{display:grid;gap:var(--sp-3);margin:0}
.record-fields>div{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:var(--sp-2) var(--sp-5);align-items:baseline;padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--line-soft)}
.record-fields>div:last-child{border-bottom:0;padding-bottom:0}
.record-fields dt{color:var(--muted);font-size:var(--fs-xs);margin:0}
.record-fields dd{margin:0;overflow-wrap:anywhere}
@media(max-width:640px){.record-fields>div{grid-template-columns:minmax(0,1fr);gap:var(--sp-1)}}
.technical-detail{margin-top:var(--sp-4)}
.technical-detail .record-fields dd{font-family:var(--mono);font-size:var(--fs-micro);
  color:var(--faint)}
pre,code{font-family:var(--mono)}
main pre{overflow:auto;max-width:100%;background:var(--canvas-2);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:var(--sp-3);font-size:var(--fs-micro)}

/* ---- 8. Empty states answer three questions -------------------------
   what appears here, why it is empty now, and the one action that
   changes it. Most of this product is pre-launch, so these are the
   screens people actually see. */
.empty-state{border:1px dashed var(--line);background:var(--canvas-2);
  border-radius:var(--r-md);padding:var(--sp-7);margin:var(--sp-4) 0;
  display:grid;gap:var(--sp-3);justify-items:start;max-width:var(--measure-wide)}
.empty-state h2,.empty-state h3{margin:0;font-size:var(--fs-lg)}
.empty-state p{margin:0;color:var(--muted);max-width:var(--measure)}
.empty-state .empty-mark{width:44px;height:44px;border-radius:var(--r-md);
  background:var(--wash);color:var(--primary-ink);display:grid;place-items:center}
.empty-state .button{margin-top:var(--sp-1)}
.empty-state__why{font-size:var(--fs-xs);color:var(--faint)}
.empty-inline{color:var(--muted);font-style:normal;padding:var(--sp-4) 0;
  border-top:1px solid var(--line-soft)}

/* ---- 8. Error pages are pages, not plain text ----------------------- */
.error-page{max-width:var(--measure-wide);padding:var(--sp-9) 0}
.error-page .error-code{font-size:var(--fs-xs);color:var(--muted);margin:0 0 var(--sp-2)}
.error-page h1{font-size:var(--fs-2xl);margin:0 0 var(--sp-4)}
.error-page>p{color:var(--text);margin:0 0 var(--sp-4)}
.error-page .actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-6) 0}
.error-page .error-ref{margin:var(--sp-7) 0 0;padding-top:var(--sp-4);
  border-top:1px solid var(--line-soft)}

/* ---- 2/wide data. A table scrolls rather than crushing its columns.
   WCAG 1.4.10 Reflow note 2 exempts data tables from the single-axis
   requirement; the scroller just has to be focusable and labelled. */
.table-scroll{overflow:auto;max-width:100%}
.table-scroll:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.table-scroll table{min-width:max-content}
.table-scroll caption{text-align:left;color:var(--muted);font-size:var(--fs-xs);
  padding-bottom:var(--sp-2)}

/* ---- 3. One service navigation, replacing six hand-rolled link runs -----
   Body links are underlined; navigation links are not, and are distinguished
   by position, weight and aria-current instead (WCAG 1.4.1 permits this for
   links that are not inside a block of text). The row scrolls rather than
   wrapping, so it stays one line at any width. */
.service-nav{margin:0 0 var(--sp-6);border-bottom:1px solid var(--line)}
.service-nav ul{display:flex;gap:var(--sp-6);list-style:none;margin:0;padding:0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.service-nav li{flex:none;scroll-snap-align:start;max-width:none}
.service-nav a{display:flex;align-items:center;min-height:var(--tap);
  padding:0 0 var(--sp-2);white-space:nowrap;text-decoration:none;
  color:var(--muted);font-size:var(--fs-sm);border-bottom:2px solid transparent;
  margin-bottom:-1px}
.service-nav a:hover{color:var(--heading)}
.service-nav a[aria-current]{color:var(--heading);font-weight:600;
  border-bottom-color:var(--primary)}
.service-nav a:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;
  border-radius:var(--r-sm)}
@media(max-width:600px){.service-nav ul{gap:var(--sp-5)}}

/* ---- 1. A board states which board it is -----------------------------
   Binary, Numeric, Review, Progress, Stewardship and Open knowledge rendered
   the same heading and the same paragraph, so the six were indistinguishable.
   Each now carries its own name, its own sentence and its own columns. */
.board-head{margin:0 0 var(--sp-5)}
.board-head h1{margin:0 0 var(--sp-2)}
.board-head .lede{margin:0;max-width:var(--measure)}
.board-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);
  margin:var(--sp-4) 0;padding:var(--sp-3) 0;border-block:1px solid var(--line-soft);
  font-size:var(--fs-xs);color:var(--muted)}
.board-meta>*{margin:0}

/* ---- 1/2. The standings table ---------------------------------------- */
.data-table{border-collapse:collapse;width:100%;font-size:var(--fs-sm)}
.data-table caption{text-align:left;color:var(--muted);font-size:var(--fs-xs);
  padding-bottom:var(--sp-3);max-width:var(--measure)}
.data-table th,.data-table td{text-align:left;padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line-soft);vertical-align:baseline;white-space:nowrap}
.data-table thead th{font-size:var(--fs-xs);color:var(--muted);font-weight:600;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--canvas)}
.data-table tbody th{font-weight:550;color:var(--heading);white-space:normal;min-width:14rem}
.data-table td.num,.data-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.data-table tbody tr:hover{background:var(--canvas-2)}
.data-table .rank{font-variant-numeric:tabular-nums;color:var(--muted);width:4rem}
.data-table .score{font-weight:650;color:var(--heading);font-variant-numeric:tabular-nums}
.data-table .delta-up{color:var(--ok-text)}
.data-table .delta-flat{color:var(--faint)}
.data-table details{margin:0}
.data-table details summary{min-height:24px;font-size:var(--fs-xs)}
.data-table td.detail{white-space:normal;min-width:18rem}

/* ---- 4. Form controls are sized to their content, not the page -------
   Four selects spanning 1200px was the desktop failure on every board. The
   filter row is a group that wraps, and each control is capped. */
/* .lab-workspace form is a one-column grid at 48rem, which is right for a
   submission form and wrong for a filter row, so the bar is scoped to beat it. */
.lab-workspace .filter-bar,main .filter-bar{display:flex;flex-wrap:wrap;
  align-items:flex-end;gap:var(--sp-3) var(--sp-4);max-width:none;
  margin:var(--sp-4) 0;padding:var(--sp-4);background:var(--canvas-2);
  border:1px solid var(--line-soft);border-radius:var(--r-md)}
/* The reading-measure cap applies to a form label in prose, not to a control
   in a filter row, where it would force one control per line. */
.lab-workspace .filter-bar label,main .filter-bar label{display:grid;gap:var(--sp-1);
  font-size:var(--fs-xs);color:var(--muted);margin:0;max-width:16rem;width:auto}
.filter-bar select,.filter-bar input{min-height:var(--tap);min-width:11rem;
  max-width:16rem;width:100%;font-size:var(--fs-sm)}
.filter-bar button{align-self:end;min-height:var(--tap)}
@media(max-width:560px){.filter-bar{padding:var(--sp-3)}.filter-bar label{width:100%}.filter-bar select,.filter-bar input{max-width:100%;width:100%}.filter-bar button{width:100%}}

/* A control should never span a reading column. Sizes are capped globally and
   the few that genuinely need the full width opt back in. */
main input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
main select{max-width:28rem}
main textarea{max-width:var(--measure-wide)}
main :is(input,select,textarea).full{max-width:100%}
main label{max-width:var(--measure)}

/* The records cell is a trigger, not a column of prose: keeping the long
   explanation inside the disclosure stops it pushing every other column off
   the viewport and tripling the row height. */
.data-table td.detail{min-width:auto;white-space:nowrap}
.data-table td.detail details[open]{white-space:normal;min-width:22rem}
.data-table td.interval,.data-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.data-table td.interval{color:var(--muted);font-size:var(--fs-xs)}
.data-table th,.data-table td{padding-block:var(--sp-3)}
.board-scale{font-weight:550;color:var(--text)}
.board-method{margin:0 0 var(--sp-5)}
.board-method>summary{font-size:var(--fs-xs);color:var(--muted)}
.board-method p{margin:0 0 var(--sp-2)}