/* ============================================================ BRAND TOKENS Biostream signal colours carried onto a light board. The dark field interface belongs on the device and in the operational product. A trusted research environment is used for hours at a time, on university and institutional desktops, often beside printed material, so the environment reads as paper rather than as a cockpit. The five brand colours below are unchanged in role and darkened only enough to hold contrast on white. Replace them with the exact brand guide values and every screen in this deck updates. ============================================================ */ :root{ --brand-teal:#16686D; /* primary action (POC design) */ --brand-teal-lift:#0F5257; /* hover, focus, small text (POC design) */ --control:#A87A22; /* reserved: perimeter, suppression, airlock */ --blocked:#AF432B; /* reserved: a check that did not pass */ --cleared:#2E7A59; /* reserved: a check that passed */ --paper:#10222A; /* high emphasis text, the ink */ /* tints, used behind the signal colours */ --teal-wash:#E2EFEF; --control-wash:#F8F0DE; --blocked-wash:#F9E8E3; --cleared-wash:#E5F0EA; /* environment chrome */ --base:#EFF4F6; --surface:#FFFFFF; --surface-2:#F7FAFB; --surface-3:#EDF3F5; --hairline:#D4E0E4; --hairline-soft:#E6EDEF; --text:#33474F; --muted:#647E88; --dim:#83969F; --ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --label:"Barlow Condensed","Inter",sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; } *{box-sizing:border-box;} /* Not smooth. Smooth scrolling on the root swallows the scroll a browser does when it lands on a fragment: `/instructions/?open=ask#ask` opened the right section and stayed at the top of the page, so every deep link on the platform arrived looking like it had done nothing. Measured rather than guessed at: with smooth, a fresh load left scrollY at 0 with the target 485px down; with auto it landed on it. The animation was worth less than working deep links. */ html{scroll-behavior:auto;} body{ margin:0;background:var(--base);color:var(--text); font-family:var(--ui);font-size:15px;font-weight:400;line-height:1.62; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{margin:0;font-weight:500;color:var(--paper);letter-spacing:-.01em;} p{margin:0 0 12px;} button{font-family:inherit;cursor:pointer;} :focus-visible{outline:2px solid var(--brand-teal-lift);outline-offset:2px;} .stage{max-width:1360px;margin:0 auto;padding:34px 26px 0;} /* Sign in card fades and lifts away as the code is accepted... */ @keyframes appleave{from{opacity:1;transform:none;}to{opacity:0;transform:translateY(-14px);}} .app.leaving{animation:appleave .5s ease both;pointer-events:none;} /* ...then the environment fades and rises in on the first page after sign in. */ @keyframes appenter{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}} .stage.entering{animation:appenter .5s cubic-bezier(.33,.68,.28,1) both;} @media (prefers-reduced-motion:reduce){.app.leaving,.stage.entering{animation:none;}} .caption{ display:flex;gap:16px;align-items:baseline;flex-wrap:wrap; margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--hairline-soft); } .caption h2{font-size:22px;} .caption span{font-size:13px;color:var(--dim);max-width:62ch;} /* ---------- app shell ---------- */ .app{ border:1px solid var(--hairline);background:var(--surface); border-radius:12px;overflow:hidden; box-shadow:0 18px 44px rgba(16,34,42,.10); } .topbar{ display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap; padding:14px 20px;background:var(--surface-2);border-bottom:1px solid var(--hairline); } .wordmark{ display:inline-block;width:101.5px;height:15.4px; background:url("../images/text-logo-dark.3dbc3100a7cf.png") left center/contain no-repeat; font-size:0;text-indent:-9999px;overflow:hidden; } .env{ font-family:var(--label);text-transform:uppercase;letter-spacing:.16em; font-size:12px;color:var(--muted);padding-left:18px;border-left:1px solid var(--hairline); } .who{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text);font-weight:500;} .who form{margin:0;display:inline-flex;} .whoemail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px;} .pill{ font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:12px; border:1px solid var(--hairline);padding:3px 9px;border-radius:6px;color:var(--muted); } .pill.admin{border-color:var(--control);color:var(--control);} /* SIGNATURE ELEMENT: the perimeter bar. Present on every screen. Amber means a control boundary and nothing else in this interface uses amber. */ .perimeter{ display:flex;align-items:center;gap:14px; padding:9px 20px 9px 17px; background:linear-gradient(90deg,rgba(168,122,34,.11),rgba(168,122,34,0) 62%); border-bottom:1px solid var(--hairline); border-left:3px solid var(--control); } /* Dismissing the perimeter banner. The class is on the document element and set from the session, so the state is right on the first paint rather than the banner appearing and folding away. The wording is untouched: every screen still writes its own sentence, and the control is attached to it by the shell. The operating picture has no perimeter banner at all and is unaffected. */ .perimeter-hid .perimeter{display:none;} .perimeter-x{ flex:none;width:60px;margin-left:auto;background:none;border:0;cursor:pointer; /* Darker than --control, which is 3.59:1 on this wash and fails at the sizes these two controls use. Measured: 6.26:1 for the cross, 7.22:1 for the marker's 9.5px label. The banner's own tag has the same problem at 12px and is left alone here, because changing it changes thirty screens (ISSUES.md BIO-51). */ color:#785612;font-size:20px;line-height:1;padding:4px 0; border-radius:5px; } .perimeter-x:hover{background:rgba(168,122,34,.14);color:var(--text);} .perimeter-x:focus-visible{outline:2px solid var(--control);outline-offset:-2px;} /* The way back, sitting where the banner was so the statement is never out of reach inside a session. */ .perimeter-mark{ display:block;width:100%;text-align:left; padding:4px 20px 4px 17px;background:rgba(168,122,34,.06); border:0;border-bottom:1px solid var(--hairline); border-left:3px solid var(--control);cursor:pointer; font-family:var(--label);text-transform:uppercase;letter-spacing:.2em; font-size:9.5px;font-weight:600;color:#6B4E0F; /* Vertically centred, because the height is set to whatever the banner it replaced was and that is taller than this one line. */ display:flex;align-items:center; } .perimeter-mark:hover{background:rgba(168,122,34,.14);color:var(--text);} .perimeter-mark:focus-visible{outline:2px solid var(--control);outline-offset:-2px;} .perimeter-mark[hidden]{display:none;} @media print{.perimeter-mark,.perimeter-x{display:none !important;}} /* Sixty pixels is the desktop figure. On a phone the banner is already three words wide and sixty of them is a fifth of the screen, so the control keeps its touch target and gives back the rest. */ @media (max-width:620px){ .perimeter-x{width:40px;align-self:flex-start;} } .perimeter .tag{ font-family:var(--label);text-transform:uppercase;letter-spacing:.2em; font-size:12px;color:var(--control);font-weight:600;white-space:nowrap; } .perimeter .say{font-size:13px;color:var(--muted);} .perimeter.gate{border-left-color:var(--blocked);background:linear-gradient(90deg,rgba(175,67,43,.11),rgba(175,67,43,0) 62%);} .perimeter.gate .tag{color:var(--blocked);} .perimeter.pass{border-left-color:var(--cleared);background:linear-gradient(90deg,rgba(46,122,89,.11),rgba(46,122,89,0) 62%);} .perimeter.pass .tag{color:var(--cleared);} .body{display:grid;grid-template-columns:214px 1fr;min-height:520px;} /* A page with no navigation rail: the error pages, which cannot render the rail because building it reads the session and therefore the database. Without this the single .main lands in the 214px column the grid reserves for the rail, so the content sits in a fifth of the page with the rest empty. It looked correct below 1040px, where the grid already collapses to one column, and broken on every desktop (ISSUES.md BIO-36). */ .body-solo{grid-template-columns:1fr;} .rail{background:var(--surface-2);border-right:1px solid var(--hairline);padding:16px 0;} .rail-h{ font-family:var(--label);text-transform:uppercase;letter-spacing:.18em; font-size:11px;color:var(--dim);padding:0 18px;margin-bottom:10px; } .rail a{ display:block;padding:10px 18px;color:var(--text);text-decoration:none; font-size:14px;font-weight:500;border-left:3px solid transparent; } .rail a:hover{color:var(--paper);background:rgba(16,34,42,.04);} .rail a.on{color:var(--brand-teal-lift);border-left-color:var(--brand-teal);background:var(--teal-wash);font-weight:600;} .rail hr{border:none;border-top:1px solid var(--hairline-soft);margin:16px 0;} /* min-width:0 lets the main column be narrower than its widest content, so a wide table scrolls inside its own box rather than widening the page. As a grid item it otherwise grew to fit, which at phone width made the browser lay the whole page out wider than the screen (ISSUES.md BIO-75). */ .main{padding:26px 28px 34px;min-width:0;} .eyebrow{ font-family:var(--label);text-transform:uppercase;letter-spacing:.1em; font-size:13px;font-weight:600;color:var(--brand-teal-lift);margin:0 0 8px; } .main h3{font-size:20px;margin-bottom:6px;} .lede{font-size:14px;color:var(--muted);max-width:70ch;margin-bottom:22px;} /* ---------- shared parts ---------- */ .card{background:var(--surface-2);border:1px solid var(--hairline);border-radius:10px;padding:20px;} /* Wraps a data table: no padding and clipped corners so the header band fills to the edges instead of leaving a strip of card colour above it. */ .tablecard{background:var(--surface);border:1px solid var(--hairline);border-radius:10px;overflow:hidden;} /* Field dictionary revealed inside a dataset card. */ .dict{margin-top:18px;background:var(--surface);border:1px solid var(--hairline);border-radius:10px;overflow-x:auto;} .dict[hidden]{display:none;} .dict table{min-width:460px;} /* Fields banded, generalised or pseudonymised at ingest. The treatment cell is tinted so the recoded rows stand out from the ones stored as recorded. */ .dict tr.recoded td:last-child{color:var(--control);font-weight:500;} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} .statcard{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:9px;padding:13px 15px;} .statcard p{margin:0 0 3px;font-size:12.5px;color:var(--muted);font-weight:500;} .statcard .v{font-family:var(--mono);font-weight:600;font-size:19px;color:var(--paper);} .statcard .sub{display:block;margin-top:4px;font-size:11.5px;line-height:1.35;color:var(--muted);} .field{margin-bottom:16px;} .field label{ display:block;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em; font-size:12px;color:var(--muted);margin-bottom:6px; } .input,.ta,.sel{ width:100%;background:var(--surface);border:1px solid var(--hairline);border-radius:8px; color:var(--paper);font-family:var(--ui);font-size:14px;padding:10px 12px; } .ta{min-height:96px;resize:vertical;line-height:1.55;} .input::placeholder,.ta::placeholder{color:#9BAEB6;} .btn{ display:inline-block;text-decoration:none; background:var(--brand-teal);border:1px solid var(--brand-teal);color:#FFFFFF; font-weight:600;font-size:14px;padding:10px 18px;border-radius:8px;transition:.16s; } .btn:hover{background:var(--brand-teal-lift);border-color:var(--brand-teal-lift);} .btn.ghost{background:transparent;color:var(--text);border-color:var(--hairline);font-weight:400;} .btn.ghost:hover{border-color:var(--muted);color:var(--paper);} .btn.danger{background:transparent;border-color:var(--blocked);color:var(--blocked);font-weight:500;} .btn.danger:hover{background:var(--blocked-wash);} .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;} .hint{font-size:12.5px;color:var(--dim);} .meta{font-family:var(--mono);font-size:12px;color:var(--dim);} table{width:100%;border-collapse:collapse;font-size:13.5px;} th{ text-align:left;font-family:var(--label);text-transform:uppercase;letter-spacing:.12em; font-size:14px;font-weight:600;color:var(--text);background:var(--surface-3); padding:9px 12px;border-bottom:1.5px solid var(--hairline); } td{padding:10px 12px;border-bottom:1px solid var(--hairline-soft);color:var(--text);vertical-align:top;} tr:last-child td{border-bottom:none;} td.n{font-family:var(--mono);font-size:12.5px;} /* SIGNATURE: withheld values read as a deliberate control */ .withheld{ display:inline-flex;align-items:center;gap:7px; font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:12px; color:var(--control);border:1px dashed var(--control);border-radius:6px;padding:2px 8px; background:var(--control-wash); } .withheld::before{content:"";width:5px;height:5px;background:var(--control);transform:rotate(45deg);} .state{ display:inline-flex;align-items:center;gap:7px;font-family:var(--label); text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:500; } .state::before{content:"";width:7px;height:7px;border-radius:50%;} .state.ok{ color:var(--cleared);background:var(--cleared-wash); border:1px solid rgba(46,122,89,.3);border-radius:6px;padding:4px 10px; } .state.ok::before{background:var(--cleared);} .state.bad{color:var(--blocked);} .state.bad::before{background:var(--blocked);} .state.wait{color:var(--control);} .state.wait::before{background:var(--control);} .note{ border-left:3px solid var(--control);background:var(--control-wash); border-radius:0 8px 8px 0;padding:11px 14px; font-size:13px;color:var(--text);margin:16px 0; } .note strong{color:var(--paper);font-weight:600;} /* A positive note, for an outcome that is good news but still not a clearance, so passing the checks reads apart from a warning without reading as approval. */ .note.ok{border-left-color:var(--cleared);} /* ---------- staged processing ---------- The four steps shown while a run is built. States reuse the signal colours: a running step is teal and pulses, a done step is the cleared green, a failed step is the blocked red. Queued steps are dim so the eye lands on the one that is live. */ .proc-steps{list-style:none;margin:0;padding:0;} .proc-step{ display:flex;align-items:center;gap:12px;padding:12px 2px; border-bottom:1px solid var(--hairline-soft); } .proc-step:last-child{border-bottom:none;} .proc-dot{width:9px;height:9px;border-radius:50%;background:var(--dim);flex:none;} .proc-label{flex:1;font-family:var(--ui);font-size:14.5px;font-weight:500;color:var(--muted);} .proc-tag{ font-family:var(--label);text-transform:uppercase;letter-spacing:.14em; font-size:12.5px;font-weight:600;color:var(--dim); } .proc-step.is-running .proc-dot{background:var(--brand-teal);animation:procpulse 1s ease-in-out infinite;} .proc-step.is-running .proc-label{color:var(--paper);} .proc-step.is-running .proc-tag{color:var(--brand-teal-lift);} .proc-step.is-done .proc-dot{background:var(--cleared);} .proc-step.is-done .proc-label{color:var(--paper);} .proc-step.is-done .proc-tag{color:var(--cleared);} .proc-step.is-failed .proc-dot{background:var(--blocked);} .proc-step.is-failed .proc-label{color:var(--paper);} .proc-step.is-failed .proc-tag{color:var(--blocked);} .proc-fail{margin-top:16px;} .proc-note{border-left-color:var(--blocked);background:var(--blocked-wash);} @keyframes procpulse{0%,100%{opacity:1;}50%{opacity:.35;}} /* Reduced motion still shows every state change, it just does not pulse. */ @media (prefers-reduced-motion:reduce){ .proc-step.is-running .proc-dot{animation:none;} } /* ---------- sign in ---------- */ .brand{ background:var(--surface-2);border-bottom:1px solid var(--hairline-soft); padding:24px 30px 20px; } .brand .wordmark{display:block;width:184px;height:28px;margin-bottom:8px;} .brand span{ display:block;font-family:var(--label);text-transform:uppercase;letter-spacing:.2em; font-size:12.5px;color:var(--muted); } .signinbody{padding:30px 34px 36px;} .codeboxes{display:flex;gap:9px;margin-bottom:8px;} .codeboxes span{ width:46px;height:56px;border:1px solid var(--hairline);border-radius:2px;background:var(--surface); display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:22px;color:var(--paper); } .codeboxes span.empty{color:#C7D5DA;} .codeboxes span.cursor{border-color:var(--brand-teal-lift);} /* ---------- filter builder ---------- */ .frow{ display:grid;grid-template-columns:1.2fr .8fr 1.2fr auto;gap:10px;align-items:center; padding:10px 0;border-bottom:1px solid var(--hairline-soft); } .frow .join{ font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--dim); grid-column:1 / -1;padding-top:4px; } .x{ background:var(--surface);border:1.5px solid var(--hairline);border-radius:8px; color:var(--muted);font-size:16px;line-height:1;padding:9px 12px;cursor:pointer; } .x:hover{border-color:var(--blocked);color:var(--blocked);} /* Editing an existing analysis: banner above the cohort builder. */ .editnote{ display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; margin:0 0 20px;padding:11px 14px;border-radius:8px; background:var(--teal-wash);border:1px solid var(--brand-teal); font-size:13px;color:var(--text); } .editnote strong{color:var(--paper);font-weight:600;} /* Query mode tabs. Only Manual is built for the POC; the others are inert. */ .qtabs{display:flex;gap:6px;margin-bottom:-1px;position:relative;z-index:1;} .qtab{ display:inline-flex;align-items:center;font-family:var(--label);font-weight:600; text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;padding:9px 16px; border:1px solid transparent;border-radius:8px 8px 0 0; } /* The four tabs are equal citizens: Manual runs the query, the other three show it as code. Nothing here is greyed out any more. */ .qtab{background:var(--surface);color:var(--muted);cursor:pointer;font-family:var(--label); text-decoration:none;border-color:var(--hairline-soft);} .qtab:hover{color:var(--paper);} .qtab.on{background:var(--surface-2);border-color:var(--hairline);border-bottom:none;color:var(--paper);} /* The help control, shown only while a code tab is open, since it is the code that needs explaining. */ .qhelp{ display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px; align-self:center;margin-left:6px;border:1px solid var(--hairline);border-radius:50%; background:var(--surface);color:var(--brand-teal-lift);font-size:12px;font-weight:600; text-decoration:none; } .qhelp:hover{border-color:var(--brand-teal);background:var(--teal-wash);} .card.qcard{border-radius:0 10px 10px 10px;} /* A rendered code panel. Read only text, never an editor: there is nothing to type into and nothing here executes. */ .codehost{margin-bottom:20px;} .codepanel-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;} .codeblock{ margin:0;padding:14px 16px;background:var(--surface-3);border:1px solid var(--hairline); border-radius:8px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.65; } .codeblock code{display:block;white-space:pre;} /* Code panel themes. Two palettes for the same markup. The light one belongs to the rest of the environment; the dark one is genuinely dark rather than a tinted light theme, because a near white panel in a dark room is the thing people turn a dark mode on to escape. Both were checked for contrast against their own background. Only the panel changes, never the page around it. */ .codeblock.theme-light{ background:var(--surface);border:1px solid var(--hairline);color:#243b44; } /* Plain text is coloured explicitly in both themes rather than inherited. It used to inherit, and .codeall sets the ink for an unthemed panel, so in the dark theme everything that was not a keyword, a string or a comment came out near black on near black. Setting it per theme means a rule elsewhere cannot quietly take it back. */ .codeblock.theme-light .tok-plain, .codeblock.theme-light code{color:#243b44;} .codeblock.theme-dark .tok-plain, .codeblock.theme-dark code{color:#d6e3e8;} .codeblock.theme-light .tok-keyword{color:#8250a8;font-weight:600;} .codeblock.theme-light .tok-string{color:#1d6b3f;} .codeblock.theme-light .tok-number{color:#9a5b13;} .codeblock.theme-light .tok-comment{color:#6b8089;font-style:italic;} .codeblock.theme-light .tok-field{color:#0f5257;font-weight:600;} .codeblock.theme-light .tok-function{color:#1f4f9c;} .codeblock.theme-dark{ background:#0e1b21;border:1px solid #1e343e;color:#d6e3e8; } .codeblock.theme-dark .tok-keyword{color:#c8a2f0;font-weight:600;} .codeblock.theme-dark .tok-string{color:#8fd6a4;} .codeblock.theme-dark .tok-number{color:#f0be7a;} .codeblock.theme-dark .tok-comment{color:#7c95a0;font-style:italic;} .codeblock.theme-dark .tok-field{color:#5fd4d9;font-weight:600;} .codeblock.theme-dark .tok-function{color:#8ab6f0;} /* The theme control sits with the copy control rather than above the code, so the panel's top row reads as one set of things you can do to the panel. */ .paneltheme{display:inline-flex;margin:0;} /* A label that belongs to a screen reader rather than to the layout. The code editor's textarea has one: the panel heading names the language above it, but a control with no label of its own is a control nobody navigating by keyboard can identify. */ .visually-hidden{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* The code editor. Same box as the read only panel so switching between them does not move the page, and monospaced so the code a researcher edits lines up the way the code they were shown did. Resizable vertically only: sideways would break out of the panel. */ /* The editor: a gutter of line numbers and the textarea, sharing one box that carries the theme. The gutter is separate elements rather than text inside the field, so the numbers are never part of the value, never posted and never copied with the code. The textarea does not wrap. One logical line is one visual row, so a number cannot drift from the line it belongs to, which is the way a gutter usually goes wrong. */ .editorwrap{display:flex;align-items:stretch;padding:0;overflow:hidden;} .editorgutter{ flex:none;padding:14px 10px 14px 14px;text-align:right; /* Not selectable, so a drag across the code does not pick the numbers up, and not copied with it. */ user-select:none;-webkit-user-select:none; /* No overflow and no scrollbar of its own. It is as tall as its numbers and the page scrolls past it, which is the whole reason it cannot drift. */ overflow:visible; /* Every metric that decides where a line sits is shared with the textarea. If these two ever disagree the numbers slide by a fraction of a line per row, which looks fine at the top of a short query and is a line out by the bottom of a long one. */ font-family:var(--mono);font-size:12.5px;line-height:1.65; border-right:1px solid var(--hairline); } .codeblock.theme-dark .editorgutter{border-right-color:#1e343e;color:#5b7480;} .codeblock.theme-light .editorgutter{color:#8fa4ac;} .editorgutter .editorline{display:block;} /* The line a refusal points at, so the message and the code line up without anybody counting. */ .editorline-bad{ font-weight:700;color:var(--blocked);position:relative; } .editorline-bad::after{ content:"";position:absolute;right:-11px;top:0;bottom:0;width:2px; background:var(--blocked); } .editorarea{ flex:1;border:0;background:transparent;color:inherit;padding:14px 16px; outline-offset:-2px; font-family:var(--mono);font-size:12.5px;line-height:1.65;white-space:pre; /* Sideways only. The rows attribute holds every line, so there is nothing to scroll vertically and no second scroll position for the gutter to fall out of step with. Not resizable for the same reason: dragging the handle would create the inner scroller this design exists to avoid. */ overflow-x:auto;overflow-y:hidden;resize:none; } textarea.codeblock{ display:block;width:100%;box-sizing:border-box;resize:vertical;min-height:220px; font-family:var(--mono);font-size:12.5px;line-height:1.65; } /* The comment block reads as an aside, and the copy control leaves it behind. */ /* One block: the comment header travels with the code when it is copied, because reaching a researcher who has taken the query elsewhere is the whole point of that comment. */ /* The base ink for a panel with no theme on it. A themed panel sets its own, below, on the tokens rather than on the element, so nothing inherits a colour from outside the panel. */ .codeall{color:var(--paper);} .codepanel-top{align-items:flex-start;} /* Controls for features not built yet. Rendered as a span or an href-less link, so neither takes keyboard focus nor does anything when clicked; hovering shows why. Same tooltip as the query tabs above. */ .soon{cursor:not-allowed;position:relative;opacity:.55;} .soon::after{ content:attr(data-soon);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%); white-space:nowrap;background:var(--paper);color:#FFFFFF;font-family:var(--ui); text-transform:none;letter-spacing:0;font-weight:500;font-size:12px;padding:6px 10px;border-radius:6px; box-shadow:0 8px 18px rgba(16,34,42,.25);opacity:0;pointer-events:none;transition:opacity .12s; } .soon:hover::after{opacity:1;} .rail a.soon{opacity:1;color:var(--dim);} .rail a.soon:hover{background:transparent;color:var(--dim);} .count{ display:flex;align-items:baseline;gap:14px;padding:18px 20px; background:var(--surface-3);border:1px solid var(--hairline);border-radius:10px; } .count b{font-family:var(--mono);font-size:34px;font-weight:500;color:var(--paper);letter-spacing:-.02em;} .count span{font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--muted);} /* ---------- checks ---------- */ .check{ display:grid;grid-template-columns:26px 1fr auto;gap:14px;align-items:start; padding:14px 0;border-bottom:1px solid var(--hairline-soft); } .check:last-child{border-bottom:none;} .check .idx{font-family:var(--mono);font-size:12px;color:var(--dim);padding-top:2px;} .check h4{font-size:14.5px;margin-bottom:3px;} .check p{font-size:13px;color:var(--muted);margin:0;} .finding{ font-family:var(--mono);font-size:12px;color:var(--blocked); background:var(--blocked-wash);border:1px solid rgba(175,67,43,.35); border-radius:2px;padding:6px 10px;margin-top:8px;display:inline-block; } .banner{ display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:3px; border:1px solid rgba(175,67,43,.45);background:var(--blocked-wash);margin-bottom:22px; } .banner .bar{width:3px;align-self:stretch;background:var(--blocked);} .banner h4{color:var(--blocked);font-size:15px;margin-bottom:4px;} .banner p{font-size:13.5px;color:var(--text);margin:0;} /* ---------- queue ---------- */ .queue{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;} .qitem{ padding:13px 14px;border:1px solid var(--hairline);border-radius:3px; background:var(--surface-2);margin-bottom:10px; } .qitem.sel{border-color:var(--brand-teal);background:var(--surface-3);} .qitem .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px;} .qitem h4{font-size:14.5px;} .qitem .sub{font-size:12.5px;color:var(--muted);} .quote{ border-left:2px solid var(--hairline);padding:2px 0 2px 14px; font-size:13.5px;color:var(--text);font-style:italic; } /* ---------- SIGNATURE: audit thread ---------- */ .thread{position:relative;padding-left:132px;} .thread::before{ content:"";position:absolute;left:118px;top:6px;bottom:6px;width:1px;background:var(--hairline); } .ev{position:relative;padding:0 0 20px;} .ev .t{ position:absolute;left:-132px;width:104px;text-align:right; font-family:var(--mono);font-size:11.5px;color:var(--dim);line-height:1.5;padding-top:1px; } .ev::before{ content:"";position:absolute;left:-18px;top:6px;width:7px;height:7px; background:var(--surface);border:1px solid var(--muted);border-radius:50%; } .ev.amber::before{border-color:var(--control);background:var(--control);} .ev.red::before{border-color:var(--blocked);background:var(--blocked);} .ev.green::before{border-color:var(--cleared);background:var(--cleared);} .ev h4{font-size:14px;margin-bottom:2px;} .ev p{font-size:13px;color:var(--muted);margin:0;} .ev .who2{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:4px;} /* ---------- screens ---------- */ @keyframes in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} } footer{ max-width:1360px;margin:0 auto;padding:20px 26px 44px; font-size:12.5px;color:var(--dim); } @media (max-width:1040px){ /* The rail stacks above the content but keeps its vertical, full-width menu with the Project and Admin groups intact, matching the mobile design rather than collapsing into a horizontal strip. */ .body{grid-template-columns:1fr;} .rail{border-right:none;border-bottom:1px solid var(--hairline);} .signin,.grid2,.queue,.charts{grid-template-columns:1fr;} .grid3{grid-template-columns:1fr;} .grid4{grid-template-columns:repeat(2,1fr);} } @media (max-width:620px){ .stage{padding:22px 14px 60px;} .main{padding:20px 16px 26px;} .frow{grid-template-columns:1fr;} .thread{padding-left:0;} .thread::before{display:none;} .ev .t{position:static;width:auto;text-align:left;display:block;margin-bottom:2px;} .ev::before{display:none;} .ev{border-left:2px solid var(--hairline);padding-left:14px;} } /* ------------------------------------------------------------ Added for the Django build. Not part of the original deck. ------------------------------------------------------------ */ .staticmark{ max-width:1360px;margin:0 auto;padding:10px 26px; font-family:var(--label);text-transform:uppercase;letter-spacing:.16em; font-size:12px;color:var(--control);background:var(--control-wash); border-bottom:1px solid rgba(168,122,34,.35); } .errors{ border:1px solid rgba(175,67,43,.45);background:var(--blocked-wash); border-radius:2px;padding:10px 14px;margin-bottom:16px; font-size:13.5px;color:var(--blocked); } .errors ul{margin:0;padding-left:18px;} .codeinput{ width:100%;font-family:var(--mono);font-size:26px;letter-spacing:.42em; text-align:center;padding:14px 12px;background:var(--surface); border:1px solid var(--hairline);border-radius:2px;color:var(--paper); } .codeinput:focus{border-color:var(--brand-teal-lift);} .linkbtn{ background:none;border:none;padding:0;color:var(--brand-teal-lift); font-size:13px;text-decoration:underline;cursor:pointer; } .linkbtn:disabled{color:var(--dim);text-decoration:none;cursor:not-allowed;} /* Deliberately understated so it sits quietly under the sign-in form. */ .forgotlink{ appearance:none;-webkit-appearance:none; background:none;border:none;padding:0;margin-top:16px; color:var(--dim);font-size:13px;text-decoration:underline;cursor:pointer; } .forgotlink:hover{color:var(--muted);} .signout{ background:none;border:1px solid var(--hairline);border-radius:6px; padding:5px 11px;color:var(--text);font-size:13px;font-weight:500; text-decoration:none;cursor:pointer; } .signout:hover{border-color:var(--muted);color:var(--paper);} /* POC scope note in the project rail. */ .rail .scope{margin:18px 18px 0;padding-top:16px;border-top:1px solid var(--hairline-soft);} .rail .scope .rail-h{padding:0;margin:0 0 6px;} .rail .scope-note{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5;} /* Build version, sat faint at the foot of the rail. */ .rail-version{margin:18px 0 0;padding:0 18px;font-family:var(--mono);font-size:11px;color:var(--dim);} /* ---------- results: saved list, back link and charts ---------- */ .backlink{ display:inline-flex;align-items:center;gap:6px;background:none;border:none; color:var(--muted);font-size:13.5px;text-decoration:none;margin-bottom:14px; } .backlink:hover{color:var(--paper);} .runitem{ display:block;background:var(--surface);border:1px solid var(--hairline);border-radius:10px; padding:16px 18px;margin-bottom:12px;text-decoration:none;transition:border-color .14s; } .runitem:hover{border-color:var(--brand-teal);} .runitem-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:5px;} .runitem-top h4{font-size:16px;color:var(--paper);} .runitem-sub{margin:0 0 6px;font-size:13px;color:var(--muted);} .runitem-n{font-family:var(--mono);font-size:12.5px;color:var(--brand-teal-lift);} /* Narrowing the saved results. The filter sits on the subtitle's row, aligned right, so it reads as part of the content rather than as a toolbar laid across the top of the screen. It wraps under the subtitle when there is no room. */ .savedbar{ display:flex;justify-content:space-between;align-items:flex-end;gap:18px; flex-wrap:wrap;margin-bottom:18px; } .savedbar .lede{max-width:40ch;} /* Pushed right whether it shares the subtitle's row or wraps under it, so it stays aligned to the content edge instead of drifting left when it wraps. */ .savedfilter{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;margin-left:auto;} .savedfilter .field{margin:0;} .savedfilter label{ display:block;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em; font-size:11.5px;color:var(--muted);margin-bottom:4px; } .savedfilter .input{height:34px;padding:0 9px;font-size:13px;} .savedfilter input[type="search"]{width:170px;} .savedfilter input[type="date"]{width:132px;} .savedfilter .btn{height:34px;padding:0 13px;} .savedcount{margin:-6px 0 14px;} .charts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;} .chartcard{position:relative;background:var(--surface);border:1px solid var(--hairline);border-radius:12px;padding:20px 22px;min-width:0;} /* The results table (Sprint Enchilada E09): the first card in the grid. Wider spans both columns of the grid and moves the cards after it; at 1040px and below the grid is one column already, so there is nothing to widen and the control is not offered. Every background here is light enough to keep the research text colour at 7.0 or better (tests_result_table measures it). The shading is a second signal only: every cell prints its number. */ .rtable-wide,.rtable-open{grid-column:1 / -1;} @media (max-width:1040px){ .rtable [data-rtable-form="size"]{display:none;} } .rtable-sizes{display:flex;gap:6px;flex:none;} .rtable-controls{display:flex;flex-direction:column;gap:8px;margin:8px 0 10px;} .rtable-fields,.rtable-tools{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;} .rtable-field{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--hairline);border-radius:999px; padding:2px 4px 2px 10px;font-size:12.5px;color:var(--text);background:var(--surface);margin:0;} .rtable-x{border:0;background:none;color:var(--text);font-size:15px;line-height:1;cursor:pointer;padding:0 5px;} .rtable-add,.rtable-inline{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:var(--text);margin:0;} .rtable-warn,.rtable-cap{margin:0;} /* The Apply buttons are for JavaScript off; `.btn` sets display, so hidden needs saying. */ .rtable [data-rtable-apply][hidden],.rtable-dialog [data-rtable-apply][hidden], .chart-rtable [data-rtable-apply][hidden]{display:none;} /* A chart drawn as a table: the results table's controls and grid, under the chart's own header. */ .chart-rtable .rtable-tools{margin:4px 0 10px;} .rtable-scroll{overflow:auto;max-height:420px;border:1px solid var(--hairline);border-radius:8px;background:var(--surface);} .rtable-wide .rtable-scroll,.rtable-open .rtable-scroll{max-height:560px;} .rtable-grid{border-collapse:separate;border-spacing:0;min-width:100%;font-size:12.5px;color:var(--text);} .rtable-grid th,.rtable-grid td{border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:5px 9px;white-space:nowrap;} .rtable-grid thead{position:sticky;top:0;z-index:3;} .rtable-grid thead th,.rtable-grid thead td{background:#EEF4F5;font-weight:600;text-align:left;} .rtable-grid tr > :first-child{position:sticky;left:0;z-index:1;background:#F7FAFB;} .rtable-grid thead tr > :first-child{z-index:4;background:#EEF4F5;} .rtable-grid tbody th,.rtable-grid tfoot th{font-weight:500;text-align:left;} .rt-across{text-align:center;} .rt-num{text-align:right;font-variant-numeric:tabular-nums;} .rtable-grid thead .rt-num{text-align:right;} .rt-share{display:block;font-size:11px;} .rt-partial{font-size:10.5px;font-style:italic;} .rt-total{font-weight:600;background:#F4F8F9;} .rt-b1{background:#F5FAFA;} .rt-b2{background:#EBF5F6;} .rt-b3{background:#E0EFF1;} .rt-b4{background:#D3E8EB;} .rt-b5{background:#C6E2E5;} .rt-bw{font-style:italic;background:repeating-linear-gradient(135deg,#FFFFFF 0 5px,#EAF0F2 5px 10px);} .rt-sortbtn{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit;} .rt-sortbtn:focus-visible{outline:2px solid var(--brand-teal);outline-offset:2px;} th[aria-sort="ascending"] .rt-sortbtn::after{content:" \25B2";font-size:9px;} th[aria-sort="descending"] .rt-sortbtn::after{content:" \25BC";font-size:9px;} .rtable-status{min-height:1em;margin:4px 0 0;} .rtable-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;} .rtable-reset{margin:0 0 0 auto;} .rtable-dialog{border:0;border-radius:12px;padding:18px 22px;width:min(1100px,96vw);max-height:92vh; background:var(--surface);color:var(--text);} .rtable-dialog::backdrop{background:rgba(16,34,42,.55);} .rtable-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;} .rtable-dialog-head h2{margin:0;font-size:18px;color:var(--text);} .rtable-dialog .rtable-scroll{max-height:calc(92vh - 260px);} /* Placeholder for a later "open this chart in detail" view. Deliberately disabled and greyed for the POC, kept only as a visible reminder. */ .chart-soon{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center; background:var(--surface-3);border:1px solid var(--hairline-soft);color:#9AABB0; font-family:var(--label);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em; padding:6px 12px;border-radius:7px;cursor:not-allowed;} .chart-soon::after{ content:attr(data-soon);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%); white-space:nowrap;background:var(--paper);color:#FFFFFF;font-family:var(--ui); text-transform:none;letter-spacing:0;font-weight:500;font-size:12px;padding:6px 10px;border-radius:6px; box-shadow:0 8px 18px rgba(16,34,42,.25);opacity:0;pointer-events:none;transition:opacity .12s;} .chart-soon:hover::after{opacity:1;} .chart-k{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 3px;} .chartcard h4{font-size:16px;color:var(--paper);margin-bottom:4px;} .chart-sub{margin:0 0 16px;font-size:13px;color:var(--muted);} .chart-legend{display:flex;gap:16px;margin-top:14px;font-size:12.5px;color:var(--text);} .chart-legend span{display:inline-flex;align-items:center;gap:6px;} .cdot{width:11px;height:11px;border-radius:4px;display:inline-block;} .cdot.teal{background:var(--brand-teal);} .cdot.red{background:var(--blocked);} /* chart 1: stacked outcome bars */ .ebar{margin-bottom:13px;} .ebar-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;font-size:13px;color:var(--text);} .ebar-track{display:flex;height:20px;border-radius:6px;overflow:hidden;background:var(--teal-wash);} .ebar-stab{background:var(--brand-teal);color:#FFFFFF;font-size:11.5px;font-weight:600;display:flex;align-items:center;padding-left:8px;white-space:nowrap;} .ebar-det{background:var(--blocked);} /* chart 3: mechanism bars */ .mbar{display:grid;grid-template-columns:112px 1fr 64px;gap:10px;align-items:center;margin-bottom:11px;} .mbar-label{font-size:13px;color:var(--text);} .mbar-track{height:18px;background:var(--teal-wash);border-radius:6px;overflow:hidden;} .mbar-fill{height:100%;background:#3E8A8E;border-radius:6px;} .mbar-fill.first{background:var(--brand-teal);} .mbar-n{font-family:var(--mono);font-size:12.5px;color:var(--paper);text-align:right;} .mbar-n .mbar-share{display:block;font-style:normal;font-size:11px;color:var(--muted);} /* A value axis under a horizontal bar style chart. Faint gridlines are drawn as a repeating background on each track, self aligning to the axis because a track runs zero to the ceiling, so no pixel width has to be known here. */ .plot-h{position:relative;} .gridded{ background-image:repeating-linear-gradient(90deg, var(--hairline) 0, var(--hairline) 1px, transparent 1px, transparent var(--tick)); background-position:0 0; } .va-h{display:grid;grid-template-columns:112px 1fr 64px;gap:10px;margin-top:6px;} .va-unit{font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:10px; color:var(--muted);align-self:center;} .va-track{position:relative;height:16px;} .va-t{position:absolute;top:0;transform:translateX(-50%);font-family:var(--mono);font-size:10.5px; color:var(--muted);white-space:nowrap;} .va-track .va-t:first-child{transform:none;} .va-track .va-t:last-child{transform:translateX(-100%);} .axis-caption{margin:10px 0 0;font-size:11.5px;color:var(--muted);} .axis-unit-line{margin:8px 0 0;font-family:var(--label);text-transform:uppercase;letter-spacing:.1em; font-size:10.5px;color:var(--muted);} /* chart 4: quartile bars */ .qbars{display:flex;align-items:flex-end;gap:16px;height:170px;padding:0 4px;} .qbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;} .qbar-n{font-family:var(--mono);font-size:12.5px;color:var(--paper);font-weight:500;} .qbar-fill{width:100%;background:#4E9599;border-radius:8px 8px 4px 4px;} .qbar-fill.hi{background:var(--brand-teal);} .qbar-label{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;color:var(--text);} /* chart hover tooltip */ .ebar,.mbar,.qbar{cursor:default;} .charts [data-tip]:hover .ebar-track,.charts [data-tip]:hover .mbar-track{filter:brightness(.96);} .charttip{ position:fixed;z-index:60;pointer-events:none;background:var(--paper);color:#FFFFFF; font-family:var(--ui);font-size:12px;font-weight:500;padding:6px 10px;border-radius:6px; white-space:nowrap;box-shadow:0 8px 18px rgba(16,34,42,.25); } .charttip[hidden]{display:none;} /* Value controls in the builder: a set of ticks for "is one of", a pair of menus for "is between". Both sit in the value cell of the condition row. */ .vmulti{display:flex;flex-wrap:wrap;gap:6px;} .vchip{ display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text); background:var(--surface);border:1px solid var(--hairline);border-radius:7px;padding:5px 9px;cursor:pointer; } .vchip input{accent-color:var(--brand-teal);} .vbetween{display:flex;align-items:center;gap:8px;} .vbetween .join{grid-column:auto;padding:0;color:var(--dim);} .vbetween .sel{flex:1;min-width:0;} /* A withheld bar is shown as a small hatched stub, so the chart admits a value was there without hinting at its size. */ .mbar-fill.withheld-fill{ background:repeating-linear-gradient(45deg,var(--control) 0,var(--control) 2px,transparent 2px,transparent 5px); border-radius:6px; } /* Chart controls. Print sends the single chart to its own printable page (and to the audit trail); the expand icon takes it to the full window. */ .chart-actions{display:flex;gap:8px;align-items:center;flex:none;} .chart-print{ font-family:var(--label);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em; padding:6px 12px;border-radius:7px;text-decoration:none;cursor:pointer; border:1px solid var(--hairline);background:var(--surface);color:var(--brand-teal-lift); } .chart-print:hover{border-color:var(--brand-teal);} .chart-expand{ width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--hairline);background:var(--surface);color:var(--brand-teal-lift); border-radius:8px;cursor:pointer;font-size:17px;line-height:1; } .chart-expand:hover{border-color:var(--brand-teal);} .chartbars{min-width:0;} /* The chart selector, a dropdown at the top right of the charts. It is a display preference: it never changes what is counted or suppressed. */ .chartpicker{position:relative;} .chartpicker > summary{ list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px; border:1px solid var(--hairline);border-radius:8px;padding:7px 13px;background:var(--surface); font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;font-weight:600; color:var(--brand-teal-lift); } .chartpicker > summary::-webkit-details-marker{display:none;} .chartpicker > summary::after{content:"▾";font-size:11px;color:var(--muted);} .chartpicker[open] > summary{border-color:var(--brand-teal);} .chartpicker > form{ position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:320px;max-width:88vw; background:var(--surface);border:1px solid var(--hairline);border-radius:10px;padding:16px; box-shadow:0 18px 40px rgba(16,34,42,.18); } .picker-row{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--hairline-soft);font-size:13px;color:var(--text);cursor:pointer;} .picker-row:last-of-type{border-bottom:none;} .picker-row input{margin-top:3px;accent-color:var(--brand-teal);} /* The expanded chart takes the full window. It scales to the space it is given, so it reads on a small laptop and fills a large monitor without a fixed size, and it shows the per band numbers the card only summarises. */ .chart-overlay{ position:fixed;inset:0;z-index:50;background:rgba(16,34,42,.55); display:flex;align-items:flex-start;justify-content:center;padding:min(5vh,48px) 4vw;overflow-y:auto; } .chart-overlay[hidden]{display:none;} .chart-sheet{ position:relative;background:var(--surface);border-radius:14px;padding:clamp(20px,4vw,44px); width:min(1100px,96vw);box-shadow:0 30px 70px rgba(16,34,42,.3); } .chart-close{ position:absolute;top:16px;right:16px;border:1px solid var(--hairline);background:var(--surface); color:var(--text);border-radius:8px;padding:7px 12px;cursor:pointer;font-size:13px; } .chart-close:hover{border-color:var(--brand-teal);color:var(--paper);} .expanded-title{font-size:clamp(22px,3vw,32px);color:var(--paper);margin:2px 0 4px;} .expanded-sub{color:var(--muted);margin:0 0 6px;font-size:15px;} .expanded-meta{margin:0 0 20px;} .expanded-bars{display:grid;gap:14px;} .ebar-row{ display:grid;grid-template-columns:minmax(140px,1.4fr) 3fr 90px 72px;gap:clamp(10px,1.5vw,22px);align-items:center; } .ebar-cat{font-size:clamp(14px,1.4vw,17px);color:var(--text);} .ebar-track{height:clamp(20px,2.4vw,30px);background:var(--teal-wash);border-radius:7px;overflow:hidden;} .ebar-fill{height:100%;background:#3E8A8E;border-radius:7px;} .ebar-fill.first{background:var(--brand-teal);} .ebar-n{font-family:var(--mono);font-size:clamp(13px,1.3vw,16px);color:var(--paper);text-align:right;} .ebar-share{font-family:var(--mono);font-size:clamp(12px,1.2vw,15px);color:var(--muted);text-align:right;} .expanded-note{margin-top:22px;} .expanded-print{margin-top:24px;} @media (max-width:560px){ .ebar-row{grid-template-columns:1fr 60px 56px;} .ebar-row .ebar-track{display:none;} } /* Standalone print sheet for a single chart. */ .printsheet{max-width:820px;margin:0 auto;padding:28px;color:var(--paper);} .printhead{border-bottom:2px solid var(--hairline);padding-bottom:14px;margin-bottom:16px;} .printmeta{display:grid;grid-template-columns:1fr 1fr;gap:24px;} .printbars{width:100%;border-collapse:collapse;} .printbars th,.printbars td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--hairline-soft);font-size:13px;} .printbars th{font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--muted);} .printbars td.n{font-family:var(--mono);text-align:right;} .printbars th:not(:first-child){text-align:right;} @media (max-width:640px){.printmeta{grid-template-columns:1fr;}} /* Per chart controls: the type and the field or fields it is drawn from, so a researcher builds their own analysis rather than picking from a fixed set. */ /* The card header row: chart number on the left, the form, expand and remove on the right. One row of a fixed height, so cards line up next to each other whatever the form label reads, and the space below it is the same on every card. Clear space separates it from the selector strip. */ .chart-head{display:flex;justify-content:space-between;align-items:center;gap:12px; min-height:32px;margin-bottom:14px;} .chart-k{margin:0;} /* A compact strip of controls, in its own space between the header and the chart. The type and field selectors sit side by side at their natural width, wrapping only when a narrow card cannot hold them on one row. The visible labels are gone; each control keeps an accessible name. */ .chart-editor{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;padding:8px 10px; background:var(--surface-2,var(--surface));border:1px solid var(--hairline-soft);border-radius:9px;} .chart-editor .sel{width:auto;min-width:0;max-width:230px;padding:7px 10px;font-size:13px;} .chart-editor .ctrl-fields{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;} .chart-editor .ctrl-cap{font-family:var(--label);text-transform:uppercase;letter-spacing:.12em; font-size:10.5px;font-weight:600;color:var(--muted);} .chart-editor .vmulti{max-width:100%;} .chart-note{margin:0 0 12px;font-size:12.5px;color:var(--amber-deep,#8a6d1f); background:var(--amber-wash,#fbf3dd);border:1px solid var(--amber-line,#ecdca6); border-radius:7px;padding:7px 10px;} /* The remove control sits with the expand icon. The last remaining chart cannot be removed, so its control is disabled rather than hidden, making the minimum of one clear. */ .chart-remove-form{display:inline-flex;margin:0;} .chart-remove{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--hairline);background:var(--surface);color:var(--blocked);border-radius:8px; cursor:pointer;font-size:17px;line-height:1;} .chart-remove:hover{border-color:var(--blocked);} .chart-remove[disabled]{color:#C7D5DA;cursor:not-allowed;border-color:var(--hairline-soft);} /* Table charts: cross tabulation and the numeric summary. */ .charttable-wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:10px;} .charttable{width:100%;border-collapse:collapse;font-size:13px;} .charttable th,.charttable td{padding:8px 12px;text-align:right;white-space:nowrap; border-bottom:1px solid var(--hairline-soft);} .charttable th:first-child,.charttable td.rowhead{text-align:left;color:var(--text);} .charttable thead th{font-family:var(--label);text-transform:uppercase;letter-spacing:.1em; font-size:10.5px;color:var(--muted);} .charttable td{font-family:var(--mono);color:var(--paper);} .charttable td.rowhead{font-family:var(--ui);} /* The per band share in the expanded and printed bar views. */ /* In place chart updates. The Apply button is the fallback for when JavaScript is off; with it on the change applies on its own, so the button is hidden. */ .js .chart-apply{display:none;} /* While a card redraws it shows a working state and its controls are inert, so a second change cannot be submitted for it. The other cards stay usable. */ .chart-busy{ position:absolute;inset:0;z-index:6;display:none;align-items:center;justify-content:center;gap:9px; background:rgba(247,250,250,.72);border-radius:12px; font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--muted); } .chartcard.is-updating .chart-busy{display:flex;} .chartcard.is-updating .chart-actions, .chartcard.is-updating .chart-editor{opacity:.5;pointer-events:none;} /* A failed redraw leaves the previous chart in place and says so. */ .chart-error{margin:10px 0 0;font-size:12.5px;color:var(--blocked);} /* Under a tablet width, one chart card fills the row rather than two side by side, so the forms stay readable on a narrow screen. */ @media (max-width:900px){.charts{grid-template-columns:1fr;}} /* The visual form picker, top right of the card before expand and remove. A greyed form states on hover, and inline, what the analysis would need. */ .formpicker{position:relative;} /* Every other control in a card header is the form picker's height, so the results table's Wider and Open sit on one row with the chart cards' controls. */ .chart-btn{ display:inline-flex;align-items:center;height:32px;padding:0 11px;border:1px solid var(--hairline); border-radius:8px;background:var(--surface);font-family:var(--ui);font-size:12px;font-weight:600; line-height:1;color:var(--brand-teal-lift);text-decoration:none;cursor:pointer;white-space:nowrap; } .chart-btn:hover{border-color:var(--brand-teal);} .chart-actions form{margin:0;display:inline-flex;} /* About these numbers: one line when something is withheld, the rest behind a toggle closed by default. */ .about-numbers{margin-top:10px;} .about-line{margin:0 0 4px;font-size:12.5px;color:var(--text);} .about-toggle > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px; font-size:12px;font-weight:600;color:var(--brand-teal-lift);} .about-toggle > summary::-webkit-details-marker{display:none;} .about-toggle > summary::after{content:"\25be";font-size:10px;} .about-toggle[open] > summary::after{content:"\25b4";} .about-body p{margin:6px 0 0;max-width:72ch;font-size:12px;line-height:1.6;color:var(--text);} .formpicker > summary{ list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:32px; border:1px solid var(--hairline);border-radius:8px;padding:0 11px;background:var(--surface); font-size:12px;font-weight:600;color:var(--brand-teal-lift);white-space:nowrap; } .formpicker > summary::-webkit-details-marker{display:none;} .formpicker > summary::after{content:"\25be";color:var(--muted);font-size:10px;} .formpicker[open] > summary{border-color:var(--brand-teal);} .formpicker-menu{ position:absolute;right:0;top:calc(100% + 6px);z-index:35;width:280px;max-width:86vw; background:var(--surface);border:1px solid var(--hairline);border-radius:10px;padding:12px; box-shadow:0 18px 40px rgba(16,34,42,.18);display:flex;flex-direction:column;gap:2px; animation:menuin .12s ease both; } @keyframes menuin{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:none;}} /* Confirming a chart removal. The house error colours, because this is the one control on the card that loses work, and cancel is the safe default: it takes focus, so a stray Enter cancels, and Escape cancels too. */ .chart-confirm{ border:1px solid var(--blocked);background:var(--blocked-wash);border-radius:8px; padding:12px 14px;margin-bottom:12px;animation:menuin .12s ease both; } .chart-confirm-q{margin:0 0 10px;font-size:13px;color:var(--text);} .chart-confirm-q strong{color:var(--paper);font-weight:600;} @media (prefers-reduced-motion:reduce){ .formpicker-menu,.chart-confirm{animation:none;} } .formopt{ text-align:left;border:none;background:none;border-radius:7px;padding:7px 9px;cursor:pointer; font-size:13px;color:var(--text);font-family:var(--ui); } .formopt:hover{background:var(--teal-wash);} /* The regression card's boxes as list boxes (static/js/reg-picker.js). A greyed field keeps its text at the page's text colour, so it clears the 7.0 floor: it is set apart by italic, a tint and the "?", not by fading. */ .lbox{position:relative;} /* Update choices is for JavaScript off; the list boxes update themselves. */ [data-reg-update][hidden],[data-reg-nojs][hidden]{display:none;} .lbox-button{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer;} .lbox-button::after{content:"\25be";font-size:11px;color:var(--text);} .lbox-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;margin:0;padding:4px;list-style:none; max-height:300px;overflow:auto;background:var(--surface);border:1px solid var(--hairline);border-radius:10px; box-shadow:0 18px 40px rgba(16,34,42,.18);} .lbox-list:focus{outline:2px solid var(--brand-teal);outline-offset:2px;} .lbox-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px;border-radius:7px; font-size:13px;color:var(--paper);cursor:pointer;} .lbox-list li[aria-selected="true"]{font-weight:600;} .lbox-list li.lbox-active{background:var(--teal-wash);box-shadow:inset 0 0 0 2px var(--brand-teal);} .lbox-list li.lbox-off{color:var(--text);font-style:italic;background:#F3F6F7;cursor:not-allowed;} .lbox-list li.lbox-off.lbox-active{background:#E8EEF0;} .lbox-q{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px; border:1px solid var(--text);border-radius:50%;font-size:11px;font-style:normal;font-weight:600;color:var(--text);} .lbox-q:hover::after{content:attr(data-why);position:absolute;right:0;top:calc(100% + 6px);z-index:41;width:max-content; max-width:260px;padding:6px 9px;border-radius:6px;background:var(--paper);color:#FFFFFF;font-size:12px; font-weight:400;line-height:1.4;white-space:normal;} .lbox-why{min-height:1em;margin:4px 0 0;font-size:12px;color:var(--text);} /* The restrictions panel on a catalogue card: one line closed, every rule open. */ .restrictions-panel{margin-top:14px;border:1px solid var(--hairline);border-radius:10px;background:var(--surface);} .restrictions-panel > summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding:10px 14px;font-size:13px;color:var(--text);} .restrictions-panel > summary::-webkit-details-marker{display:none;} .restrictions-panel > summary .eyebrow{margin:0;} .restrictions-more{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--brand-teal-lift);white-space:nowrap;} .restrictions-more::after{content:" \25be";} .restrictions-panel[open] .restrictions-more::after{content:" \25b4";} .restrictions-body{padding:0 14px 14px;} /* Relative, so the visually hidden labels of the owner's forms, which are absolutely positioned, scroll with the table instead of widening the page. */ .restrictions-scroll{overflow-x:auto;position:relative;} /* The catalogue card's buttons. One line height, so the field dictionary's