/* Theme, header, buttons, cards and footer follow the Semantic Data Space site (same tokens, light and dark). */
:root{color-scheme:light;--paper:#f3f6fa;--surface:#fff;--soft:#e7edf5;--tile:#dde6f0;--ink:#162238;--text:#3d4b63;--muted:#5d6b80;--line:#cfd8e4;--impact:#8a5a08;--ok:#17805b;--green:#3a4fc4;--green-light:#e6eaff;--accent:var(--green);--error:#c2402f;--error-bg:#fdeeec;--focus:#4563df;--soft-2:#eef3f9;--line-2:#bfcbdb;--faint:#5d6b80;--panel:var(--surface);--panel-2:var(--soft-2);--ink-2:var(--text);--accent-ink:var(--ink);--accent-bg:var(--green-light);--accent-contrast:#fff;--pass:var(--green);--block:var(--error);--ease:cubic-bezier(.22,.68,0,1.01);--shadow:0 1px 2px rgba(22,34,56,.06),0 6px 16px -10px rgba(22,34,56,.16);--line-soft:color-mix(in srgb,var(--line) 62%,transparent);--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--r-sm:6px;--r:10px;--r-lg:14px;--sans:Inter,"Inter Variable",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
:root[data-theme=dark]{color-scheme:dark;--paper:#080A0F;--surface:#10141C;--soft:#151A24;--tile:#1B2230;--ink:#F4F7FB;--text:#C8D0DD;--muted:#919BAA;--line:#273040;--impact:#E2B36C;--ok:#62c99a;--green:#7D8CFF;--green-light:#1B2138;--error:#F27682;--error-bg:#3A1F25;--focus:#7D8CFF;--soft-2:#131924;--line-2:#33405A;--faint:#919BAA;--accent-contrast:#080A0F;--shadow:0 1px 2px rgba(0,0,0,.35),0 6px 16px -10px rgba(0,0,0,.4)}
*{box-sizing:border-box}
html{scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-wrap:anywhere;background-image:radial-gradient(900px 480px at 12% -8%,color-mix(in srgb,var(--green) 7%,transparent),transparent 60%),radial-gradient(700px 420px at 100% 0%,color-mix(in srgb,var(--pass) 5%,transparent),transparent 55%);background-attachment:fixed}
a{color:var(--green);text-underline-offset:4px}
h1{font-size:clamp(28px,4.6vw,44px);line-height:1.1;font-weight:500;letter-spacing:-.04em;margin:var(--s5) 0 var(--s3);text-wrap:balance}
h2{font-size:clamp(22px,3.2vw,32px);line-height:1.2;font-weight:500;letter-spacing:-.03em;margin:var(--s6) 0 var(--s2);text-wrap:balance}
h3{font-size:17px;font-weight:600;margin:var(--s4) 0 var(--s2)}
p,ul,ol,dl{margin:var(--s2) 0}
.wrap{width:min(1160px,calc(100% - 32px));margin-inline:auto}
@media (min-width:640px){.wrap{width:min(1160px,calc(100% - 64px))}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the skip link only: "skip" is also the state of a check that was not run (li.step.skip in the funnel) */
a.skip{position:fixed;top:-60px;left:16px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:var(--r-sm)}
a.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.kicker+h2{margin-top:0}
.kicker{font:11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin:0 0 var(--s3)}
/* header */
.site-header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s5);min-height:64px;padding-block:6px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:650;letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand .sds-mark{width:28px;height:28px;flex:none}
.brand-name{font-weight:400}.brand-name b{font-weight:700}
.topnav{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s5);margin-left:auto}
.topnav a{font-size:13px;color:var(--text);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.topnav a:hover{color:var(--green)}
.nav-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.header-signin{font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:var(--r);padding:0 14px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.header-signin:hover{border-color:var(--green)}
.icon-button{display:grid;place-items:center;width:38px;height:38px;padding:0;min-height:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);flex:none;cursor:pointer}
.icon-button:hover{border-color:var(--green);background:transparent}
/* buttons */
.btn,button{font:inherit;font-size:14px;font-weight:600;min-height:44px;padding:10px 20px;border-radius:var(--r);border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);transition:background .18s,border-color .18s}
.btn:hover,button:hover{background:var(--green);border-color:var(--green)}
.btn.alt,button.alt{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.alt:hover,button.alt:hover{background:var(--surface);border-color:var(--green)}
.btn.danger,button.danger{background:transparent;color:var(--error);border-color:var(--error)}
.btn.danger:hover,button.danger:hover{background:transparent;border-color:var(--error)}
button:disabled{opacity:.6;cursor:default}
button.small,.btn.small{padding:6px 14px;font-size:13px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:var(--s5) 0}
@media (max-width:640px){.hero .actions .btn{width:100%}}
/* landing */
.land>section{padding:var(--s8) 0;border-top:1px solid var(--line-soft)}
.land>section.hero{border-top:0;padding:88px 0 var(--s7)}
.land>section>.wrap>h2{margin-top:0}
.hero h1{font-size:clamp(36px,4.6vw,58px);line-height:1.05;letter-spacing:-.045em;margin:0}
.hero h1 em{font-family:var(--serif);font-weight:400;color:var(--green)}
/* the hero: the text on the left, the preview of the workspace on the right (it stays in view while the text scrolls); one column under 1000 px */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:var(--s7);align-items:start}
.hero-copy{min-width:0;max-width:720px}
.hero-preview{min-width:0;position:sticky;top:88px}
.hero-about{display:grid;gap:var(--s5);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.hero-about h2{font-size:clamp(20px,2.2vw,24px);margin:0 0 var(--s2)}
.hero-about .kicker{margin-bottom:var(--s1)}
.hero-about .lead-in{font-size:15px;margin:0}
@media (max-width:999px){.hero-grid{grid-template-columns:1fr;gap:var(--s6)}.hero-preview{position:static}.land>section.hero{padding-top:var(--s7)}}
/* the preview (after the split site's console preview): a row of tabs, one screenshot of this site per tab in the page's theme, one sentence under it */
.console-preview{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
/* the film scene behind the whole page (film-bg.js): fixed to the window, behind everything, and faint so that text stays easy to read; calmer still behind the workspace */
.film-bg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;opacity:.1}
:root[data-theme=dark] .film-bg{opacity:.11}
.film-bg[data-calm]{opacity:.08}
:root[data-theme=dark] .film-bg[data-calm]{opacity:.08}
/* the workspace's quiet colour and its error colour are a little darker in the light theme: with them every text keeps 4.5:1 on the film behind it */
:root:not([data-theme=dark]) .console-wrap{--muted:#526074;--faint:#526074;--error:#ab3626}
.promise{font-size:18px;line-height:1.65;color:var(--text);max-width:600px;margin-top:var(--s5)}
.motto{margin-top:var(--s4);font-family:var(--serif);font-size:20px;color:var(--green)}
.ws-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),380px));gap:var(--s4)}
.ws-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);color:var(--ink);text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);transition:border-color .18s}
.ws-card:hover{border-color:var(--green)}
.ws-card .tile{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-lg);background:var(--tile);color:var(--green)}
.ws-card .tile .icon{width:24px;height:24px}
.ws-credit{margin:var(--s2) 0 0;font-size:13px}.ws-credit a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--text);text-decoration:none}.ws-credit a:hover{color:var(--green);text-decoration:underline}.ws-credit .icon{width:15px;height:15px}
/* the Movies card's film strip (after the motion package's film ribbon): eight small pictures between two rows of sprocket holes, behind the card's top right corner.
   It is out of the flow, so the card keeps its size; it fades out towards the text, and the text lies above it. */
.ws-card>:not(.ws-film){position:relative}
.ws-film{position:absolute;top:10px;right:-34px;width:66%;height:104px;overflow:hidden;transform:rotate(-7deg);pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 46%);mask-image:linear-gradient(90deg,transparent 4%,#000 46%)}
.ws-film>span{position:absolute;inset:0 auto 0 0;display:flex;align-items:center;gap:6px;padding:0 6px;background:var(--film);animation:filmRun 46s linear infinite alternate}
.ws-film>span::before,.ws-film>span::after{content:"";position:absolute;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,var(--film-hole) 0 9px,transparent 9px 21px)}
.ws-film>span::before{top:4px}.ws-film>span::after{bottom:4px}
.ws-film img{flex:none;width:60px;height:75px;object-fit:cover;border-radius:2px;border:1px solid var(--film-hole);background:var(--tile)}
:root{--film:#162238;--film-hole:#aab6c8}
:root[data-theme=dark]{--film:#1B2230;--film-hole:#4a5870}
@keyframes filmRun{to{transform:translateX(-52%)}}
@media (prefers-reduced-motion:reduce){.ws-film>span{animation:none}}
.card-kicker{font:11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ws-card h3{font-size:18px;margin:0}
.ws-card p{font-size:14px;color:var(--text);margin:0}
.card-foot{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--green);display:flex;align-items:center;justify-content:space-between}
.lead-in{max-width:760px;color:var(--text);font-size:16px}
.pillars{display:grid;gap:var(--s4);list-style:none;padding:0;margin:var(--s5) 0 0}
.pillars{grid-template-columns:repeat(3,minmax(0,1fr))}
.pillars li{padding:var(--s5);background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.pillars h3{font-size:17px;margin:0 0 var(--s1)}
.pillars p{font-size:14px;color:var(--text);margin:0}
.pillars .tile{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r);background:var(--tile);color:var(--green);margin-bottom:var(--s4)}
@media (max-width:820px){.pillars{grid-template-columns:1fr}}
.shot-frame{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--soft);margin-bottom:var(--s3);line-height:0}
.shot-frame img{display:block;width:100%;height:auto}
.shot-frame .shot-dark,:root[data-theme=dark] .shot-frame .shot-light{display:none}
:root[data-theme=dark] .shot-frame .shot-dark{display:block}
.people-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
@media (max-width:760px){.people-grid{grid-template-columns:1fr}}
.person-card{padding:var(--s5);background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.person-card h3{font-size:17px;margin:0 0 var(--s1)}
.person-role{font-size:14px;color:var(--text);margin:0}
.person-aff{font-size:13px;color:var(--muted);margin:0 0 var(--s2)}
.person-links a{font-size:13px;font-weight:600;color:var(--green);margin-right:var(--s3);text-decoration:none}
.person-links a:hover{text-decoration:underline}
.split{display:grid;grid-template-columns:1fr 1.6fr;gap:var(--s7);align-items:start}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:var(--s4)}}
details.faq{border-bottom:1px solid var(--line-soft)}
details.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s4) 0;min-height:44px;font-weight:600}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"\203A";color:var(--green);transform:rotate(90deg);transition:transform .15s}
details.faq[open] summary::after{transform:rotate(-90deg)}
details.faq p{padding:0 var(--s5) var(--s4) 0;color:var(--text);font-size:14px}
/* footer */
.site-footer{background:var(--paper);padding:var(--s5) 0 var(--s6);border-top:1px solid var(--line);margin-top:var(--s8);font-size:13px;color:var(--muted)}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)}
.footer-links{display:flex;flex-wrap:wrap;gap:0 16px}
.footer-links a{color:inherit;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.footer-links a:hover{color:var(--green);text-decoration:underline}
.land+.site-footer{margin-top:0}
.social-link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:#0a66c2}
:root[data-theme=dark] .social-link{color:#70b5f9}
.social-link .icon{width:28px;height:28px;fill:currentColor;stroke:none}
a.social-link:hover{color:var(--green)}
/* guide */
.g-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--s5);align-items:start;margin-top:var(--s5)}
.g-toc{position:sticky;top:80px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px}
.g-toc h2{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:2px 4px 8px;font-weight:600}
.g-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.g-toc a{display:flex;align-items:center;min-height:44px;padding:6px 8px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px}
.g-toc a:hover{background:var(--soft)}
.g-toc a.is-here{background:var(--green-light);color:var(--green);font-weight:650}
.g-main{min-width:0;display:grid;gap:18px}
/* the title of the Guide and of the Journey, with the way back to the workspace on the same line at the right */
.g-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4)}
.g-title h1{margin:0}
.g-sec{scroll-margin-top:0}
.g-sec-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:4px}.g-sec-head h2{margin:0}
.g-sec h2{margin:0 0 6px;font-size:20px;letter-spacing:-.01em;font-weight:600}
.g-sec h3{font-size:13px;margin:14px 0 6px;color:var(--text);text-transform:uppercase;letter-spacing:.06em}
.g-purpose{color:var(--text);margin:0 0 10px}
.g-guide{max-width:820px;grid-template-columns:minmax(0,1fr)}
.g-code{margin:var(--s3) 0}
.g-code pre{margin:0;padding:12px 14px;overflow-x:auto;background:var(--soft);border:1px solid var(--line);border-radius:10px;font:13px/1.55 var(--mono);color:var(--ink)}
.g-code figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.g-steps{margin:0;padding-left:22px}
.g-steps li{margin:6px 0;line-height:1.5;border-radius:8px}
.g-steps li.is-linked{background:var(--soft);outline:2px solid var(--green);outline-offset:2px}
.g-sub{margin:6px 0 0;padding-left:20px;color:var(--text);font-size:14px}
.g-tips{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.g-tips li{padding:8px 10px 8px 34px;position:relative;border-radius:10px;background:var(--soft);font-size:14px}
.g-tips li::before{content:"";position:absolute;left:11px;top:12px;width:12px;height:12px;border-radius:50%;border:2px solid var(--green)}
.g-shot{margin:18px 0 0;max-width:900px}
.g-shot .shot-frame{margin:0}
/* numbered markers and boxes on the pictures; positions are percent of the picture, written by scripts/qf_shots.py */
.g-hl{position:absolute;border:2px solid var(--green);border-radius:6px;background:color-mix(in srgb,var(--green) 7%,transparent);box-shadow:0 0 0 2px rgba(255,255,255,.75);pointer-events:auto}
.g-num{position:absolute;transform:translate(-60%,-50%);min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--green);color:#fff;border:2px solid #fff;font:700 12px/20px var(--sans);text-align:center;box-shadow:0 1px 4px rgba(22,34,56,.35)}
:root[data-theme=dark] .g-hl{box-shadow:0 0 0 2px rgba(8,10,15,.7)}
:root[data-theme=dark] .g-num{color:#080A0F;border-color:#10141C}
.g-num.is-linked{transform:translate(-60%,-50%) scale(1.25)}.g-hl.is-linked{outline:3px solid var(--green)}
/* the journey: one chip per step, in the colours of the question states */
:root{--fc-input-bg:#DCF1F8;--fc-input-tx:#0A6A8A;--fc-input-bd:#8CCBDF;--fc-proc-bg:#F3E8FF;--fc-proc-tx:#6B21A8;--fc-proc-bd:#C4A1E8;--fc-retr-bg:#DBEAFE;--fc-retr-tx:#1D4ED8;--fc-retr-bd:#8FB0F5;--fc-rev-bg:#E7EAEE;--fc-rev-tx:#536071;--fc-rev-bd:#CBD1DA;--fc-cand-bg:#FFF3B5;--fc-cand-tx:#806700;--fc-cand-bd:#E7D46C;--fc-gold-bg:#FFD84A;--fc-gold-tx:#665000;--fc-gold-bd:#D8B326}
:root[data-theme=dark]{--fc-input-bg:#0F2F3A;--fc-input-tx:#7FD0EA;--fc-input-bd:#2F7287;--fc-proc-bg:#2A1D44;--fc-proc-tx:#DEC4FF;--fc-proc-bd:#6D4FA6;--fc-retr-bg:#1B2A4D;--fc-retr-tx:#93B4FF;--fc-retr-bd:#3E5CA8;--fc-rev-bg:#2B303A;--fc-rev-tx:#CAD2DE;--fc-rev-bd:#566172;--fc-cand-bg:#3B3411;--fc-cand-tx:#F5E07F;--fc-cand-bd:#8F7C22;--fc-gold-bg:#5B4810;--fc-gold-tx:#FFE680;--fc-gold-bd:#B99530}
.g-journey{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}
.g-journey li{position:relative;display:grid;justify-items:center;align-content:start;gap:6px;padding:0 3px;text-align:center}
.g-ji{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:1;background:var(--jbg);color:var(--jtx);border:1.5px solid var(--jbd)}
.g-ji svg{width:18px;height:18px;display:block}
.g-journey li:not(:last-child)::after{content:"";position:absolute;top:19px;left:calc(50% + 24px);right:calc(-50% + 24px);border-top:2px solid var(--line)}
.g-journey li:not(:last-child)::before{content:"";position:absolute;top:15px;right:calc(-50% + 24px);width:7px;height:7px;border-top:2px solid var(--line);border-right:2px solid var(--line);transform:rotate(45deg);z-index:1}
.g-journey strong{font-size:13px;line-height:1.25;color:var(--ink);overflow-wrap:anywhere}
.g-jd{font-size:11.5px;color:var(--muted);line-height:1.35}
.j-input{--jbg:var(--fc-input-bg);--jtx:var(--fc-input-tx);--jbd:var(--fc-input-bd)}.j-proc{--jbg:var(--fc-proc-bg);--jtx:var(--fc-proc-tx);--jbd:var(--fc-proc-bd)}.j-retr{--jbg:var(--fc-retr-bg);--jtx:var(--fc-retr-tx);--jbd:var(--fc-retr-bd)}.j-rev{--jbg:var(--fc-rev-bg);--jtx:var(--fc-rev-tx);--jbd:var(--fc-rev-bd)}.j-gold{--jbg:var(--fc-gold-bg);--jtx:var(--fc-gold-tx);--jbd:var(--fc-gold-bd)}
@media (max-width:860px){.g-jd{display:none}.g-journey strong{font-size:11px}.g-ji{width:32px;height:32px}.g-ji svg{width:16px;height:16px}.g-journey li:not(:last-child)::after{top:16px;left:calc(50% + 19px);right:calc(-50% + 19px)}.g-journey li:not(:last-child)::before{top:12px;right:calc(-50% + 19px)}.g-layout{grid-template-columns:minmax(0,1fr)}.g-toc{position:static}.g-toc ol{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px}.g-toc a{white-space:nowrap;border:1px solid var(--line)}}
/* app and admin */
.legal{max-width:46rem;margin:0 auto;padding:0 1rem}
.narrow{max-width:30rem;margin:0 auto;padding:0 1rem}
.card{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);margin:var(--s4) 0;background:var(--surface);box-shadow:var(--shadow)}
.card h2,.card h3{margin-top:0}
form .field{margin:var(--s4) 0}
label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.check{display:flex;gap:.6rem;align-items:flex-start}
.check input{width:1.4rem;height:1.4rem;margin-top:.15rem;flex:none}
.check label{font-weight:400;margin:0;font-size:15px}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=date],input[type=datetime-local],select,textarea{font:inherit;font-size:15px;display:block;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink)}
textarea{min-height:6rem;resize:vertical}
.hint{color:var(--muted);font-size:13px;margin:.2rem 0 0}
.err,.msg-bad{color:var(--error);margin:.3rem 0}
.msg-ok{color:var(--ok);margin:.3rem 0}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--error);border-width:2px}
input[type=checkbox][aria-invalid=true]{outline:2px solid var(--error);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0}
.chip{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:2rem;padding:.3rem .9rem;text-align:left;font-weight:500}
.chip:hover{background:var(--surface)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.badge{display:inline-block;padding:.05rem .6rem;border-radius:1rem;border:1px solid currentColor;font-size:.9rem;font-weight:600}
.badge.gold{color:var(--ok)}.badge.cq{color:var(--impact)}.badge.wait{color:var(--muted)}.badge.fail{color:var(--error)}
.spin{display:inline-block;width:1rem;height:1rem;border:3px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:spin 1s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none;border-top-color:var(--line)}html{scroll-behavior:auto}*{transition:none!important}}
.facts{position:relative;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4)}
.measure{cursor:help;color:var(--muted);font-size:13px;border-radius:var(--r-sm)}
.measure strong{color:var(--ink);font-weight:650}
.measure-tip{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:max-content;max-width:min(360px,100%);padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:400 12px/1.4 var(--sans);box-shadow:0 4px 14px rgba(0,0,0,.14);cursor:default}
.measure:hover .measure-tip,.measure:focus .measure-tip{display:block}
.answer{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.answer h3{margin-bottom:.2rem}
.atext{white-space:pre-line}
.tools{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:.75rem 0}
.tools .grow{flex:1 1 14rem}
.rows{list-style:none;padding:0;margin:.5rem 0}
.row{border:1px solid var(--line);border-radius:var(--r);margin:.6rem 0;background:var(--surface)}
.rowhead{display:block;width:100%;text-align:left;background:transparent;color:var(--ink);border:0;border-radius:var(--r);padding:.7rem 1rem .2rem;font:inherit;font-weight:400;cursor:pointer;min-height:44px}
.rowhead:hover{background:transparent}
.rowhead .qtext{display:block;font-weight:600}
.row .meta{position:relative;display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:center;padding:0 1rem .7rem;color:var(--muted);font-size:13px}
.rowact{position:absolute;top:8px;right:10px;display:flex;gap:6px}
.detail{padding:0 1rem .8rem}
dialog{max-width:min(32rem,calc(100vw - 2rem));width:100%;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);padding:var(--s5)}
dialog::backdrop{background:rgba(12,20,32,.5)}
/* edit dialog: the focus ring of the text box stays clear of the label above and the answer option below */
#edit-text{margin-bottom:var(--s4)}
#edit-text:focus-visible{outline-offset:1px}
#edit-text[readonly]{background:var(--soft-2);color:var(--muted)}
.scroll{overflow-x:auto;max-width:100%;position:relative}      /* holds its .sr labels, so a wide table never widens the page */
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:.4rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.75rem;margin:.75rem 0}
.cards div{border:1px solid var(--line);border-radius:var(--r);padding:.6rem .8rem;background:var(--surface);box-shadow:var(--shadow)}
/* a drawer: a native <details> whose panel floats under its summary (People: the actions for the selected); the chevron follows the member's rule */
.drawer{position:relative}
.drawer>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 14px;font-weight:600;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font-size:14px}
.drawer>summary::-webkit-details-marker{display:none}
.drawer>summary:hover{border-color:var(--accent)}
.drawer>summary .ico{width:14px;height:14px;transition:transform .14s}
.drawer[open]>summary .ico{transform:rotate(180deg)}
.drawer-body{position:absolute;z-index:20;left:0;top:calc(100% + 6px);width:max-content;max-width:min(26rem,calc(100vw - 2rem));display:grid;gap:var(--s2);padding:var(--s3);border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:0 4px 14px rgba(0,0,0,.14)}
.drawer-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.drawer-row>span:empty{display:none}
.drawer-row>span{font-size:13px}
.drawer-time{display:grid;gap:var(--s2);margin:0;padding:var(--s2) var(--s3) var(--s3);border:1px solid var(--line);border-radius:var(--r)}
.drawer-time legend{padding:0 var(--s1);font-size:13px;font-weight:600}
.tools-end{align-items:flex-end}      /* a form of fields with labels above: the buttons stand on the fields' line, not the labels' */
.tools-end input:not([type=checkbox]),.tools-end select,.tools-end>button,.tools-end>.drawer>summary{height:46px;min-height:46px}      /* one height, so the line is level */
.tools-end>div{min-width:min(100%,14rem)}
@media (prefers-reduced-motion:reduce){.drawer>summary .ico{transition:none}}
.cards dt{color:var(--muted);font-size:.9rem}
.cards dt .ico{margin-right:6px;vertical-align:-3px}
.vote{display:inline-flex;align-items:center}      /* a vote in a table: the member's thumb symbol (the words are for screen readers) */
.cards dd{margin:0;font-size:1.4rem;font-weight:700}
.legend{font-size:.95rem}
/* admin, Ranking: small number boxes for the ratings; the automatic ratings and the reviewer's stand side by side, each group under its own heading */
.weights input{width:6rem}
#rk-people th{white-space:nowrap}
#rk-table{font-size:13px}
#rk-table th,#rk-table td{padding:.35rem .45rem}
#rk-table th{overflow-wrap:normal;word-break:normal}
#rk-table td:not(:nth-child(2)){white-space:nowrap}
#rk-table td:nth-child(2){min-width:12rem}
#rk-table .rk-auto{background:var(--soft-2)}
#rk-table .rk-review{background:var(--green-light)}
#rk-table .rk-final{font-weight:650}
#rk-table .rk-evidence{font-size:12px;margin-top:.15rem}
#rk-dlg textarea{min-height:4rem}
main.wrap:not(.land){padding-bottom:var(--s5)}
/* ---- symbols, header, top panel, tabs, account menu, composer, thread ---- */
.ico{width:16px;height:16px;flex:none}
button .ico,.btn .ico{width:15px;height:15px}
.console-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);font-weight:650;font-size:15px;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;flex:none}
.console-brand .sds-mark{width:28px;height:28px;flex:none}
.console-brand:hover{color:var(--accent)}
.console-inner{flex-wrap:nowrap}
.console-inner .nav-actions{margin-left:auto;min-width:0;flex-wrap:nowrap}
.icon-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
a.icon-button{text-decoration:none}
.topnav a .icon{width:16px;height:16px;margin-right:4px}
.account-slot{position:relative;display:inline-flex;flex:none}
.avatar{width:34px;height:34px;min-height:0;border-radius:50%;display:inline-grid;place-items:center;flex:none;padding:0;cursor:pointer;background:color-mix(in srgb,var(--green) 12%,var(--surface));color:var(--green);border:1px solid var(--line);font:700 13px/1 var(--sans)}
.avatar:hover,.avatar:focus-visible{border-color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--surface))}
.account-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:268px;max-width:calc(100vw - 32px);display:grid;gap:2px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px color-mix(in srgb,#000 18%,transparent)}
.account-who{margin:0;padding:6px 10px 8px;font-size:12px;color:var(--muted);overflow-wrap:anywhere;border-bottom:1px solid var(--line)}
.account-menu a,.account-menu button{display:block;width:100%;min-height:0;text-align:left;padding:8px 10px;border:0;border-radius:6px;background:transparent;color:var(--ink);font:500 13px/1.3 var(--sans);text-decoration:none;cursor:pointer}
.account-menu a:hover,.account-menu button:hover,.account-menu a:focus-visible,.account-menu button:focus-visible{background:var(--soft)}
.g-return{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:13px;font-weight:650;text-decoration:none;border:1px solid var(--ink);white-space:nowrap}
.brand{margin-right:auto}
.console-wrap{width:auto;max-width:1160px;padding:var(--s6) var(--s5) var(--s7);font-size:16px;line-height:1.65}
@media (max-width:640px){.console-wrap{padding-inline:var(--s4)}}
.console-main{min-width:0}
.console-sidebar{display:flex;flex-direction:row;align-items:center;gap:var(--s2);margin-bottom:var(--s4);padding:var(--s2) var(--s3);min-width:0;max-width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-lg)}
.console-sidebar .ws-switch-wrap{flex:none;width:auto;min-width:150px;max-width:220px}
.workspace-switcher{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink-2);font:600 13.5px/1.2 var(--sans);text-decoration:none}
.workspace-switcher:hover{border-color:var(--accent);color:var(--ink)}
#topNav{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px;flex:1 1 auto;min-width:0}
#topNav button{display:inline-flex;align-items:center;gap:7px;flex:none;white-space:nowrap;background:none;border:1px solid transparent;border-radius:var(--r);color:var(--muted);padding:10px;font:500 14px/1.3 var(--sans);min-height:44px;cursor:pointer;transition:background .14s,color .14s,border-color .14s}
#topNav button:hover{color:var(--ink);background:var(--panel)}
#topNav button[aria-selected=true]{background:var(--panel);color:var(--ink);font-weight:600;border-color:var(--line-2);box-shadow:var(--shadow);border-bottom:3px solid var(--accent);padding-bottom:8px}
#topNav button svg{width:17px;height:17px;opacity:.75;flex:none}
#topNav button[aria-selected=true] svg{opacity:1;color:var(--accent)}
@media (max-width:899px){.console-sidebar{flex-direction:column;align-items:stretch}.console-sidebar .ws-switch-wrap{max-width:none}#topNav{flex-wrap:nowrap;overflow-x:auto;max-width:100%}}
@media (max-width:760px){.console-brand span{display:none}}
/* Ask is a chat on the bare page: in the middle until a question is asked, then the thread on top and the message box at the bottom */
#panel-ask:not([hidden]){display:flex;flex-direction:column;gap:14px;max-width:860px;margin:0 auto;padding-top:var(--ask-pad);transition:padding-top .25s ease}
html[data-ask=active] #panel-ask:not([hidden]){padding-top:8px;min-height:calc(100vh - 200px)}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:var(--s3)}
html[data-ask=active] #chips{display:none}
.thread{display:flex;flex-direction:column;gap:var(--s6);flex:1}
.turn{display:flex;flex-direction:column;gap:var(--s3);scroll-margin-top:80px}
.mail-bubble{max-width:85%;margin:0;padding:8px 14px;border-radius:18px;border:1px solid var(--line);background:var(--panel-2)}
.mail-bubble.sent{align-self:flex-end;background:var(--accent-bg);border-color:transparent}
.mail-bubble .mail-text{display:block;white-space:pre-wrap;overflow-wrap:anywhere}
.reply{display:grid;gap:var(--s2);min-width:0}
.reply>*{margin:0;min-width:0}
.reply h3{display:flex;align-items:center;gap:8px;font-size:17px}
.reply h3 .ico{width:18px;height:18px;color:var(--pass)}
.reply h3[data-tone=note] .ico{color:var(--impact)}
.verdict{font-weight:600}
/* the history of Ask: a drawer that drops down from the Ask tab, in the style of the account menu. It follows the tab bar in the page, so its top is its place in the flow, 4px under the bar; app.js sets --chats-x to the left edge of the tab. */
#panel-ask{--ask-pad:clamp(16px,22vh,240px)}
.console-shell{position:relative}
#topNav .tab-more{width:12px;height:12px;margin-left:-2px;transition:transform .14s}
#tab-ask[aria-expanded=true] .tab-more{transform:rotate(180deg)}
.chats{position:absolute;left:var(--chats-x,0);margin-top:calc(4px - var(--s4));z-index:10;width:min(360px,100%,calc(100vw - 32px));max-height:60vh;display:flex;flex-direction:column;gap:var(--s1);padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px color-mix(in srgb,#000 18%,transparent);font-size:14px}
/* on a narrow screen it takes its room under the bar, as wide as the page, so the Ask box under it is never covered */
@media (max-width:899px){.chats{position:static;width:auto;margin-bottom:var(--s4);box-shadow:var(--shadow)}}
.chats #chat-new{flex:none}
.chats .msg-bad{margin:0;padding:0 var(--s2)}
.chats .msg-bad:empty{display:none}
.chat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.chat-list li{display:flex;align-items:center;gap:var(--s1);min-height:44px}
.chat-list li.muted{padding:0 10px;font-size:13px}
.chat-list li>button:first-child{flex:1;min-width:0;justify-content:space-between;text-align:left;padding:6px 10px;border-color:transparent;border-radius:var(--r-sm);background:transparent;font-weight:500}
.chat-list li>button:first-child:hover{background:var(--soft)}
.chat-list .chat-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-list .chat-day{flex:none;color:var(--muted);font-size:12px;font-weight:400}
.chat-list [aria-current=true]{box-shadow:inset 3px 0 0 var(--accent)}
.chat-list .icon-button{width:44px;height:44px;border-color:transparent}
.reply .actions{margin:var(--s2) 0 0;gap:var(--s2)}
.ask-dock{position:sticky;bottom:0;z-index:5;padding:8px 0 12px;background:linear-gradient(transparent,var(--paper) 30%)}
.ask-dock .msg-bad:empty{display:none}
.composer{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px;padding:6px;border:1px solid var(--line-2);border-radius:24px;background:var(--panel);transition:border-color .14s,box-shadow .14s}
.composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.composer textarea{flex:1;min-width:0;width:auto;border:0;border-radius:0;background:transparent;box-shadow:none;resize:none;padding:8px 6px;min-height:36px;max-height:200px;line-height:1.4;overflow-y:hidden}
.composer textarea:focus,.composer textarea:focus-visible{box-shadow:none;outline-color:transparent}
.composer-btn,.composer-send{flex:none;width:36px;height:36px;min-height:0;margin:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.composer-btn{border:0;background:transparent;color:var(--ink-2)}
.composer-btn:hover,.composer-btn:focus-visible,.composer-btn:focus-within{background:var(--accent-bg);color:var(--accent-ink)}
.composer-btn[aria-pressed=true]{background:var(--accent);color:var(--accent-contrast)}
/* the approach toggle: its symbol takes the pass colour while it is on and the stop colour while it is off */
.composer-btn.approach-toggle[data-on=true]{color:var(--pass)}
.composer-btn.approach-toggle[data-on=false]{color:var(--block)}
.composer-send{border:1px solid var(--accent);background:var(--accent);color:var(--accent-contrast)}
.composer-send:hover{background:var(--accent);border-color:var(--accent)}
.composer-send.is-stop{background:var(--panel);color:var(--accent);border-color:var(--accent)}
.composer-send:disabled{background:var(--panel-2);border-color:var(--line-2);color:var(--muted);cursor:not-allowed;opacity:1}
.composer svg{width:18px;height:18px}
.tip-btn{position:relative}
.tip-btn::after{content:attr(data-tip);position:absolute;right:0;bottom:calc(100% + 6px);z-index:20;width:max-content;max-width:min(260px,calc(100vw - 48px));white-space:normal;text-align:left;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:400 12px/1.35 var(--sans);box-shadow:0 4px 14px rgba(0,0,0,.14);pointer-events:none;display:none}
.tip-btn:hover::after,.tip-btn:focus-visible::after,.tip-btn:focus-within::after{display:block}
/* the answer toggle is a real checkbox under the round button, so it works with a keyboard and without script */
.approach-toggle input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;opacity:0;cursor:pointer}
.approach-toggle:focus-within{outline:3px solid var(--focus);outline-offset:3px}
/* the two thumbs with their totals, and the comment popup */
.feedback{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.fb-q{font-size:13px;color:var(--muted);margin-right:var(--s1)}
/* a Library card: the thumbs in its bottom-right corner, under the copy symbol's corner, closed and opened; no frame of their own (owner 2026-10-21) */
.row>.fb-corner{position:absolute;right:10px;bottom:.7rem;flex-wrap:nowrap;align-items:center;gap:6px;margin:0}
.row[data-fb=true]>.meta{min-height:calc(36px + .7rem);padding-right:150px}
.row[data-fb=true]>.detail{padding-bottom:calc(36px + 1.4rem)}
.thumb{min-height:36px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:13px;gap:6px}
.thumb:hover{background:var(--surface);border-color:var(--accent)}
.thumb[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
/* the feedback instrument (static/app.js "instrument"): a connected five-stop rail of native radios, a second list of reasons and optional words; tokens only.
   The radio sits invisibly over its whole stop, so the hit area is the stop (44 px at least) and the keyboard, touch and screen readers get the native group.
   Below 30em (every phone, and any window zoomed in far enough) the rail stands upright, one stop to a row. */
.rail-form{scroll-margin-bottom:12rem;display:grid;gap:var(--s3);max-width:34rem;min-width:0;margin-top:var(--s3)}
.rail-form fieldset{border:0;margin:0;padding:0;min-width:0}
.rail-form legend{padding:0;font-size:15px;font-weight:600;color:var(--ink)}
.rail-opt{font-size:13px;font-weight:400;color:var(--muted)}
.rail-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:var(--s2)}
.rail-stop{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s1);min-width:0;min-height:44px;margin:0;padding:var(--s2) 2px 0;text-align:center;font-weight:400;cursor:pointer;touch-action:manipulation}
.rail-stop input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.rail-dot{pointer-events:none;position:relative;z-index:1;display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--muted);background:var(--surface);color:var(--muted)}
.rail-dot::after{content:"";width:14px;height:14px;border-radius:50%;background:conic-gradient(currentColor calc(var(--p,0) * 1%),transparent 0);box-shadow:inset 0 0 0 1.5px currentColor}
.rail-dot[data-g="2"]{--p:25}.rail-dot[data-g="3"]{--p:50}.rail-dot[data-g="4"]{--p:75}.rail-dot[data-g="5"]{--p:100}
.rail-label{pointer-events:none;font-size:13px;line-height:1.25;color:var(--muted);overflow-wrap:anywhere}
.rail-stop+.rail-stop::before{content:"";pointer-events:none;position:absolute;top:calc(var(--s2) + 12.5px);left:-50%;width:100%;height:3px;border-radius:2px;background:var(--line-2)}
.rail-stop.on::before{background:var(--accent)}
.rail-stop:hover .rail-dot{border-color:var(--accent)}
.rail-stop input:checked+.rail-dot{border-color:var(--accent);background:var(--accent);color:var(--accent-contrast);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.rail-stop input:checked~.rail-label{font-weight:650;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.rail-stop input:focus-visible+.rail-dot{outline:3px solid var(--focus);outline-offset:3px}
.rail-reasons legend{font-size:14px}
.rail-more .field{margin:var(--s3) 0 0}
.rail-more textarea{min-height:3.2rem}
.rail-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.rail-state{margin:0;min-height:1.4em;font-size:13px;color:var(--muted)}
.rail-state[data-ok=true]{color:var(--ok)}
.rail-state svg{width:14px;height:14px;margin-right:4px;vertical-align:-2px}
.rail-err{color:var(--error);margin:.3rem 0}
.rail-err:empty{display:none}
.pulse-item{margin:var(--s3) 0;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
/* the Feedback tab (qf-fb-4): the items numbered; "Not sure" apart from the scale; the axis marks its stops in %; best-worst as rows with a "most" and a
   "least" radio; cards with a native radio (the dot is the cue, not the colour). Tokens only, both themes. */
.pulse-list{list-style:none;margin:0;padding:0;counter-reset:fb}
.pulse-list>.pulse-item{counter-increment:fb}
.pulse-list>.pulse-item .rail>legend::before{content:counter(fb) ". ";color:var(--muted)}
.fb-hint{margin:var(--s1) 0 0;font-size:13px;color:var(--muted)}
.fb-off{margin-top:var(--s3);padding-top:var(--s3);border-top:1px dashed var(--line-2)}
.rail-tick{pointer-events:none;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.bw{display:grid;gap:var(--s1);margin-top:var(--s2)}
.bw-row{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:var(--s2);border-radius:var(--r);padding:2px 0}
.bw-row:not(.bw-head){border:1px solid var(--line);background:var(--surface)}
.bw-head{font-size:12px;color:var(--muted);text-align:center}
.bw-head span:nth-child(2){visibility:hidden}
.bw-hit{display:grid;place-items:center;min-width:44px;min-height:44px;margin:0;cursor:pointer}
.bw-hit input{width:1.4rem;height:1.4rem;margin:0;accent-color:var(--accent)}
.bw-label{font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.bw-row:has(.bw-most input:checked){border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.bw-row:has(.bw-least input:checked){border-style:dashed}
.fb-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:var(--s2);margin-top:var(--s2)}
.fb-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s2);align-content:start;margin:0;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer;font-weight:400}
.fb-card input{grid-row:span 2;width:1.3rem;height:1.3rem;margin:.1rem 0 0;accent-color:var(--accent)}
.fb-card-t{font-weight:600;color:var(--ink);font-size:14px}
.fb-card-d{font-size:13px;color:var(--muted);line-height:1.3}
.fb-card:hover{border-color:var(--accent)}
.fb-card:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.fb-card:has(input:focus-visible),.bw-hit:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
@media (max-width:30em){
.rail-track{grid-template-columns:1fr}
.rail-stop{flex-direction:row;justify-content:flex-start;gap:var(--s3);padding:0;text-align:left}
.rail-stop+.rail-stop::before{top:-22px;left:12.5px;width:3px;height:44px}
}
@media (prefers-reduced-motion:no-preference){.rail-dot,.rail-stop::before{transition:background-color .14s,border-color .14s,box-shadow .14s}}
@media (forced-colors:active){
.rail-dot{border-color:ButtonText}
.rail-dot::after{background:none}
.rail-stop input:checked+.rail-dot{border-color:Highlight;background:Highlight;color:HighlightText;box-shadow:0 0 0 3px Highlight}
.rail-stop input:checked+.rail-dot::after{background:HighlightText}
}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.dlg-head h2{margin:0;font-size:18px;letter-spacing:0}
.dlg-head .icon-button{width:34px;height:34px}
/* the review dialog: the cross closes it, the buttons stand at the right with Save last */
#rk-dlg .actions{justify-content:flex-end}
#rk-rate-save{display:inline-flex;align-items:center;gap:6px}
/* the Feedback tab: the pulse (static/app.js) and one open field */
#panel-feedback{max-width:44rem;margin:0 auto}
.fbc>.actions{margin-bottom:0}
/* Library: the asker's edit and delete symbols at the top right of the card */
.row{position:relative}
.row .rowhead{padding-right:56px}
.row[data-mine=true] .rowhead{padding-right:176px}
.rowcopy{position:absolute;top:8px;right:10px;width:34px;height:34px;background:var(--surface)}
.rowcopy.copied{color:var(--green);border-color:var(--green)}
.rowcopy.copied::after{content:"Copied";position:absolute;right:0;top:calc(100% + 4px);z-index:20;padding:2px 8px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:400 12px/1.4 var(--sans);white-space:nowrap;pointer-events:none}
.row[data-mine=true] .rowact{right:50px}
.rowact .icon-button[aria-disabled=true]{opacity:.45;cursor:default}
#pp-batch [data-batch][aria-disabled=true]{opacity:.6;cursor:default}
.rowact .icon-button{width:34px;height:34px;background:var(--surface)}
.icon-button.danger{color:var(--error)}
.icon-button.danger:hover{border-color:var(--error)}
/* forms: one closing row, the other way on the left and the button on the right */
.form-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s4)}
.form-row p{margin:0}
/* landing: the projects of the research group */
.group-sub{margin:var(--s7) 0 var(--s4);font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.research-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--s4);margin-top:var(--s4)}
.research-grid>.research-card{display:flex;flex-direction:column;height:100%;min-width:0;box-sizing:border-box;padding:var(--s5);background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:none}
.research-card h3{font-size:16px;line-height:1.4;font-weight:600;margin:var(--s2) 0 var(--s1)}
.research-card h3,.research-card p:not(.research-meta):not(.project-period){display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.research-card h3{-webkit-line-clamp:3;line-clamp:3}
.research-card p:not(.research-meta):not(.project-period){-webkit-line-clamp:4;line-clamp:4;font-size:13.5px;line-height:1.6;margin:0;color:var(--text)}
.research-card .research-meta{font:11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.research-card .project-period{font-size:12.5px;color:var(--muted);margin:0 0 var(--s2)}
.research-card h3 a{color:var(--green);text-decoration:none}
.research-card h3 a:hover{text-decoration:underline}
@media (max-width:980px){.research-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.research-grid{grid-template-columns:1fr}}
/* Admin, Models: the heading with its plus at the right end, and the test, edit and remove symbols at the right end of a row */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.page-head .icon-button{width:34px;height:34px;background:var(--surface)}
.rowact-cell{display:flex;justify-content:flex-end;gap:6px}
#model-table td:last-child,#model-table th:last-child{text-align:right;white-space:nowrap}
/* a key opens the models of its endpoint in the row under it (owner 2026-10-21); its symbols stand at the right end */
#key-table tr.key-row>td:last-child{text-align:right}
#key-table tr.key-row .icon-button{width:34px;height:34px;background:var(--surface)}
.key-open{display:inline-flex;align-items:center;gap:6px;padding:0;min-height:0;border:0;background:none;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.key-open:hover{color:var(--green);background:none}
.key-open .ico{width:14px;height:14px;transition:transform .15s}
.key-open[aria-expanded=true] .ico{transform:rotate(180deg)}      /* the member's rule (.tab-more, FAQ): the chevron points down when closed, up when open */
.key-sub>td{background:var(--surface);padding:var(--s3);text-align:left}
.key-sub .svc .actions{justify-content:flex-start;align-items:center;margin-bottom:var(--s2)}
@media (prefers-reduced-motion:reduce){.key-open .ico{transition:none}}
#model-table .icon-button{width:34px;height:34px;background:var(--surface)}
#model-dlg .field,#model-dlg .check{margin-bottom:var(--s3)}
#model-dlg .field .muted{margin:6px 0 0;font-size:13px}
/* ---- the same footer on every page, at the bottom of the window when the page is short ---- */
body{min-height:100vh;display:flex;flex-direction:column}
body>main,body>.console-wrap{flex:1 0 auto;width:100%}
body>.site-footer{flex:none;width:100%}
/* ---- the background of the pages outside a workspace: data linked by meaning (semantic-atmosphere.js) ---- */
.space-bg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;opacity:.12}
/* the small result word next to a check keeps its contrast over the film background */
.console-wrap .f3d-gate .f3d-state{background:var(--paper);padding:0 4px;border-radius:4px}
.console-wrap .f3d-gate .f3d-state.sr{padding:0;background:none}
/* "Hide my name in the Library": the switch in the account menu, and the blurred stand-in where the name would be */
.account-menu .menu-switch{display:flex;align-items:center;justify-content:space-between;gap:12px}
.menu-switch .switch{flex:none;position:relative;width:30px;height:18px;border-radius:999px;border:1px solid var(--line-2,var(--line));background:var(--soft)}
.menu-switch .switch::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:transform .14s}
.menu-switch[aria-checked=true] .switch{background:var(--accent);border-color:var(--accent)}
.menu-switch[aria-checked=true] .switch::after{transform:translateX(12px);background:var(--accent-contrast)}
.name-hidden{display:inline-block;width:7.5em;overflow:hidden;white-space:nowrap;vertical-align:bottom;filter:blur(5px);user-select:none;pointer-events:none}
@media (prefers-reduced-motion:reduce){.menu-switch .switch::after{transition:none}}
/* under a question: Edit (and Delete for an unfinished one); under the funnel: Try again and the thumbs */
.turn-tools{align-self:flex-end;display:flex;gap:6px;margin-top:calc(-1 * var(--s2))}
.turn-tools .icon-button{width:32px;height:32px}
.turn-tools .icon-button svg{width:15px;height:15px}
.turn-tools [aria-disabled=true]{opacity:.45;cursor:not-allowed}
.bubble-editor{align-self:flex-end;width:min(100%,40rem);display:grid;gap:var(--s2)}
.bubble-edit{min-height:3.2rem;max-height:14rem;border-radius:18px}
.bubble-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);justify-content:flex-end}
.bubble-actions .msg-bad:empty{display:none}
.reply-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.reply-tools .feedback{margin-top:0;margin-left:auto}      /* the thumbs at the bottom right of the result, as in the card's corner */
.fb-dlg .fb-more{display:flex;justify-content:flex-end;margin-top:var(--s3)}
/* The prize block: in Ask only (empty chat, with Close). The mark keeps a quarter of its width clear (padding) and is 32 px. */
.prize{position:relative;display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;max-width:760px;margin:var(--s5) 0;padding:var(--s4) var(--s5) var(--s4) var(--s4);background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.prize-mark{width:32px;height:32px;padding:8px;box-sizing:content-box;color:var(--ink)}
.prize-text{min-width:0}
.prize p{margin:0}
.prize-head{font-size:18px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.prize-line{margin-top:var(--s1)!important;color:var(--text)}
.prize-close{position:absolute;top:var(--s2);right:var(--s2);border-color:transparent}
.ask-dock .prize{max-width:none;margin:0 0 var(--s3);padding-right:56px}
@media (max-height:700px){.ask-dock .prize{display:none}}   /* a short window: the message box stays on the first screen */
html[data-ask=active] .ask-dock .prize{display:none}
@media (max-width:520px){.prize{grid-template-columns:1fr;gap:0}}

/* phones and tablets (presentation only): the landing keeps its desktop order and weight, the header takes two short rows instead of three tall ones */
@media (max-width:999px){.hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}.hero-copy{display:contents}.hero-figure{order:1;margin-top:var(--s5)}.hero-about{order:2}}
@media (max-width:640px){
.header-inner{column-gap:var(--s3);row-gap:0;min-height:0;padding-block:4px}
.brand{margin-right:auto;min-height:48px}
.topnav{order:3;flex:1 0 100%;margin-left:0;justify-content:space-between;gap:0 var(--s3)}
.topnav a{min-height:36px;font-size:12.5px}
.land>section{padding:var(--s7) 0}
.land>section.hero{padding-top:var(--s6)}
}
@media (max-width:420px){.g-journey strong{font-size:9.5px;letter-spacing:-.02em;overflow-wrap:normal;white-space:nowrap}}
/* one short line under the funnel that says why the shown checks went back (a check again, or a result settled before the furthest check seen) */
.recheck{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;font-size:14px;color:var(--ink-2)}
.recheck .ico{width:15px;height:15px;flex:none;margin-top:2px}
/* ---- the Feedback tab (qf-fb-5): a cross that clears an item, ranking lists (drag handle that also takes the arrow keys, number, symbol, label), a symbol on every card, one Save at the right ---- */
.rail-form{position:relative}
.rail-form .rail>legend{padding-right:44px}
.fb-clear{position:absolute;top:0;right:0;width:34px;height:34px;background:var(--surface)}
.fb-clear[hidden]{display:none}
.fbc>.actions{justify-content:flex-end}
#fbc-send{display:inline-flex;align-items:center;gap:6px}
.fb-card-t{display:flex;align-items:center;gap:6px}
.fb-card-t .ico,.rk-row>.ico{width:16px;height:16px;color:var(--muted)}
.rk{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:var(--s2)}
.rk-row{display:grid;grid-template-columns:auto 1.6rem 16px minmax(0,1fr);align-items:center;gap:var(--s2);min-height:52px;padding:var(--s1) var(--s2);border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.rk-grip{display:grid;place-items:center;width:36px;height:44px;padding:0;border:0;background:none;color:var(--muted);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.rk-grip:hover{color:var(--accent);background:none;border-color:transparent}
.rk-pos{display:grid;place-items:center;width:1.6rem;height:1.6rem;border:1px solid var(--line-2);border-radius:50%;font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--muted)}
.rk[data-set=true] .rk-pos{border-color:var(--accent);background:var(--accent);color:var(--accent-contrast)}
.rk-label{font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.rk.dragging,.rk.dragging .rk-grip{cursor:grabbing;user-select:none;-webkit-user-select:none}
.rk-row.drag{position:relative;z-index:2;border-color:var(--accent);box-shadow:var(--shadow),0 0 0 1px var(--accent)}
@media (max-width:30em){
.rk-row{gap:6px;padding:6px}
}
@media (forced-colors:active){.rk-row.drag{outline:2px solid Highlight}}