/* ChemEngWorks pages. The calculator styles follow the original
   ThermoWorks standalone (public/styles.css); the app chrome (navigation,
   tables, flash messages) is new. No inline styles anywhere: the content
   security policy forbids them. */

@font-face { font-family: Inter; src: url(/static/inter-400.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(/static/inter-500.ttf) format("truetype"); font-weight: 500 700; font-display: swap; }

:root {
  --ink: #292725; --copper: #A65332; --deep: #874128; --sand: #D7BEA0;
  --paper: #F7F3EC; --blush: #F4E8DE; --line: #DCD4CB; --muted: #68615B;
  --label: #796859; --white: #fff; --warn-bg: #fff8e9; --warn: #e5b25d;
  --error-bg: #fff0ea; --error: #963d25; --ok-bg: #edf5ea; --ok: #2f6b2a;
  font: 15px Inter, Arial, sans-serif; color: var(--ink); background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--deep); }
h1 { font-size: 21px; font-weight: 400; letter-spacing: -.3px; margin: 8px 0 3px; }
h2 { font-size: 21px; font-weight: 500; margin: 0 0 18px; }
h3 { font-size: 16px; font-weight: 500; }
p { line-height: 1.55; }
.muted, small, .note, th, footer { color: var(--muted); }

/* Header and navigation. */
.envband { background: var(--deep); color: var(--white); text-align: center; font-size: 12px; letter-spacing: 1.5px; padding: 4px; }
.envband.admin { background: var(--ink); }
header.top { background: var(--paper); border-bottom: 1px solid var(--line); padding: 14px 4%; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
header.top .brand img { width: 230px; max-width: 100%; height: auto; display: block; }
nav.main { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
nav.main a, nav.main button { text-decoration: none; color: var(--ink); padding: 8px 11px; border-radius: 5px; font-weight: 500; border: 0; background: none; font-size: 14px; }
nav.main a:hover, nav.main button:hover { background: var(--blush); }
nav.main a[aria-current] { background: var(--blush); color: var(--deep); }
/* "Account · 340 credits": the person's credits beside their account,
   quieter than the link, as the switcher shows an org's kind. */
nav.main a.account .credits { font-weight: 400; color: var(--muted); }
nav.main a.account[aria-current] .credits { color: var(--deep); }
.creditline { font-size: 21px; margin: 6px 0 0; }
header.top .lead { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; min-width: 0; }

/* The organisation switcher: a menu (details/summary, no script needed)
   of the person's orgs, each a button that switches this session. */
.switcher { position: relative; min-width: 0; }
.switcher > summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); font-size: 14px; font-weight: 500; cursor: pointer; max-width: 360px; }
.switcher > summary::-webkit-details-marker { display: none; }
.switcher > summary::after { content: "▾"; color: var(--muted); font-size: 12px; }
.switcher > summary:hover, .switcher[open] > summary { background: var(--blush); }
.switcher .orgname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.switcher .menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: max-content; min-width: 260px; max-width: min(360px, calc(100vw - 32px)); padding: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 24px rgba(41, 39, 37, .15); }
.switcher .menuhead { margin: 2px 6px 6px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--label); }
.switcher ul { list-style: none; margin: 0; padding: 0; }
.switcher .choice { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 5px; background: none; font-size: 14px; font-weight: 400; text-align: left; color: var(--ink); }
.switcher button.choice:hover { background: var(--blush); }
.switcher .choice[aria-current] { font-weight: 500; color: var(--deep); }
.switcher .choice .name { overflow-wrap: anywhere; }
.switcher .choice small { white-space: nowrap; }
.switcher .all { display: block; margin-top: 6px; padding: 8px; border-top: 1px solid var(--line); font-size: 13px; }

/* Lists of organisations, members, invitations: name and meta, then
   actions (they drop below on a narrow screen). */
.orglist { list-style: none; margin: 0; padding: 0; }
.orglist > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid #ede9e5; }
.orglist > li:last-child { border-bottom: 0; }
.orglist .orgmain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.orglist .name { overflow-wrap: anywhere; font-weight: 500; }
.orglist .meta { grid-column: 1; margin: 0; }
.orglist .orgact { grid-column: 2; grid-row: 1 / span 2; }
.badge.small { padding: 2px 8px; font-size: 11px; }
.badge.count { background: var(--copper); color: var(--white); border-color: var(--copper); }
/* A set of checkboxes, such as a role's permissions. */
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 18px; }
.checklist label.check { margin: 6px 0; }
/* The local outbox (/dev/outbox). */
article.mail { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }

main { max-width: 1500px; width: 100%; margin: 0 auto; padding: 26px; flex: 1; }
footer { font-size: 12px; text-align: center; padding: 18px; border-top: 1px solid var(--line); background: #F0EAE3; }
footer a { color: var(--muted); }
footer p { margin: 6px 0; line-height: 1.6; }
footer .footlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 6px 0; }
footer .legal { max-width: 760px; margin: 6px auto 0; }

/* Cards, layout, forms (the original calculator look). */
.layout { display: grid; grid-template-columns: minmax(330px, .85fr) minmax(440px, 1.4fr); gap: 22px; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 24px; margin-bottom: 20px; }
.card > h2:first-child { margin-top: 0; }
.tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; align-items: center; }
button, select, input, textarea { font: inherit; border: 1px solid var(--line); border-radius: 5px; padding: 9px; background: var(--white); color: var(--ink); max-width: 100%; }
button { cursor: pointer; font-weight: 500; }
button:hover { background: var(--blush); }
button:disabled { cursor: not-allowed; opacity: .55; }
button.primary, a.button.primary { background: var(--copper); color: var(--white); border-color: var(--copper); }
button.primary:hover, a.button.primary:hover { background: var(--deep); border-color: var(--deep); }
button.danger { color: var(--error); border-color: #e3b9ab; }
a.button { display: inline-block; text-decoration: none; border: 1px solid var(--line); border-radius: 5px; padding: 9px 12px; font-weight: 500; color: var(--ink); background: var(--white); }
a.button:hover { background: var(--blush); }
button.link { border: 0; background: none; padding: 0; color: var(--deep); text-decoration: underline; font-weight: 400; }
input[type=number] { width: 100%; }
label { display: block; font-size: 12px; font-weight: 500; color: var(--label); }
label input, label select, label textarea { display: block; width: 100%; margin-top: 6px; }
label select { font-size: 14px; }
.inline { display: inline; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 15px 0; }
.entry { display: flex; gap: 6px; margin-top: 6px; }
.entry input { min-width: 0; margin-top: 0; }
.entry select { width: 100px; margin-top: 0; }
[aria-invalid=true] { border-color: var(--error); background: var(--error-bg); }
.field-error { display: block; color: var(--error); font-size: 12px; font-weight: 400; margin-top: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
fieldset { border: 0; padding: 0; margin: 0; }

/* Tables. */
table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
td, th { padding: 10px 8px; text-align: right; border-bottom: 1px solid #ede9e5; vertical-align: top; }
th { font-size: 11px; font-weight: 500; }
td:first-child, th:first-child { text-align: left; }
table.list td, table.list th { text-align: left; }
table.list td.num, table.list th.num { text-align: right; }
#components td { padding: 6px 2px; }
#components td:first-child { width: 66%; }
#components input { min-width: 60px; }
#components select { width: 100%; font-size: 12px; }
.tablewrap { overflow: auto; }
/* The pager under a paged list (templates/paging.html; a search's posts:
   paging_form.html): the rows shown on one side, Previous, the page
   numbers and Next on the other; on a phone the two stack, and Previous
   and Next shrink to their arrows. */
.paging { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; }
.paging-count, .paging-note { margin: 0; font-size: 13px; color: var(--muted); }
.paging-note { flex-basis: 100%; }
.pager ul { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pager a, .pager button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 36px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.pager a:hover, .pager button:hover { background: var(--blush); }
.pager a[aria-current], .pager button[aria-current] { background: var(--deep); border-color: var(--deep); color: var(--white); }
.pager .gap { min-width: 16px; text-align: center; color: var(--muted); }
@media (max-width: 600px) {
  .pager .word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pager ul { gap: 2px; }
  .pager a, .pager button { min-width: 32px; padding: 0 6px; }
  .pager .gap { min-width: 12px; }
}
@media print { .pager { display: none; } }

/* Results. */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kpi { padding: 16px; background: var(--blush); border-radius: 6px; }
.kpi strong { display: block; font-size: 24px; font-weight: 500; margin: 8px 0 3px; }
.kpi small { font-size: 11px; }
.badge { padding: 7px 12px; border-radius: 20px; background: #EEDDD1; color: var(--deep); font-size: 12px; font-weight: 500; border: 1px solid var(--sand); white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: #c5dcc0; }
.badge.bad { background: var(--error-bg); color: var(--error); border-color: #e3b9ab; }
.badge.idle { background: #ebe6e2; color: #433931; border-color: var(--line); }
.resulthead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.resulthead h2 { margin: 0; }
.alert { background: var(--error-bg); color: var(--error); padding: 15px; border-radius: 8px; margin-bottom: 16px; }
.notice { background: var(--blush); padding: 12px 15px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.warnings p { border-left: 3px solid var(--warn); background: var(--warn-bg); padding: 10px 14px; font-size: 13px; }
details { margin-top: 20px; }
summary { font-weight: 500; cursor: pointer; padding: 10px 0; }
.note { font-size: 12px; line-height: 1.6; }
svg.bar { display: block; width: 100%; height: 12px; border-radius: 8px; margin: 15px 0 6px; background: #ece7e3; }
svg.bar .liquid { fill: var(--ink); }
svg.bar .vapour { fill: var(--copper); }
progress { width: 100%; height: 10px; accent-color: var(--copper); }
/* A queued or running calculation's clock: digits of one width, so the
   words after it hold still while it counts (static/clock.js). */
.clock { font-variant-numeric: tabular-nums; }
.status { font-size: 12px; color: var(--deep); min-height: 16px; }
.meta { font-size: 12px; color: var(--muted); line-height: 1.7; }

/* Launch page and app tiles. */
.hero { padding: 30px 0 10px; max-width: 760px; }
.hero h1 { font-size: 34px; font-weight: 500; letter-spacing: -.6px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 20px 0; }
.tile { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.tile h3 { margin: 0; }
.tile p { margin: 0; flex: 1; font-size: 14px; }
/* The summary takes a tile's spare height, not its category line. */
.tile p.eyebrow { flex: none; }
.tile.soon { opacity: .7; }

/* Pages anyone may read: a calculator's page, methods and validation,
   security and data, and pricing. */
.lede { font-size: 16px; }
.card.intro h1 { font-size: 30px; font-weight: 500; letter-spacing: -.4px; margin: 6px 0; }
.columns.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }
ul.rules { padding-left: 18px; font-size: 13px; color: var(--muted); }
ul.rules li { margin: 4px 0; }
table.pricelist th[scope=row] { font-size: 13px; color: var(--ink); }
table.pricelist tbody tr.first > * { border-top: 1px solid var(--line); }
table.pricelist .num { white-space: nowrap; }
@media (max-width: 600px) {
  /* A line a band, under its calculator's name; a failure or
     cancellation price, when one is charged, on a line of its own. */
  table.pricelist, table.pricelist tbody { display: block; }
  table.pricelist thead { display: none; }
  table.pricelist tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; border-bottom: 1px solid #ede9e5; }
  table.pricelist tr > *, table.pricelist tbody tr.first > * { display: block; border: 0; padding: 6px 0; }
  table.pricelist th[scope=row] { flex: 0 0 100%; padding: 12px 0 0; }
  table.pricelist td.covers { flex: 1; }
  table.pricelist td.outcome { flex: 0 0 100%; text-align: left; padding-top: 0; }
  table.pricelist td.outcome::before { content: attr(data-label) ": "; color: var(--muted); }
}
dl.evidence { margin: 0; }
dl.evidence dt { font-weight: 500; font-size: 13px; color: var(--label); margin-top: 12px; }
dl.evidence dd { margin: 4px 0 0; font-size: 14px; line-height: 1.55; }
/* A stored example: its result as a run's, without a run's own tools
   (exports, print sheets, row pickers, playback steps), which need an
   account or the run's own page. */
.exampleresult .tools, .exampleresult .brw-auditpick, .exampleresult .rail { display: none; }
/* "Changes save as you make them", then "All changes saved". */
.saveline { white-space: nowrap; }

.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
/* Names people give projects and cases (a pasted file name or tag may
   have no spaces) wrap anywhere rather than widen the page. */
.crumbs, .card > h2, td.name { overflow-wrap: anywhere; }
/* Lists of cases sit in a .tablewrap: their names wrap between words, and
   one too long for a phone scrolls with its table rather than breaking
   every few letters beside the last-run column. */
table.cases td.name { overflow-wrap: break-word; }
.crumbs a { color: var(--muted); }

/* Sign-up and organisation requests: the two ways to start, "Just me"
   (copper) and "My organisation" (graphite), each saying who pays; the
   request form; and a request's steps. Colours and radii as the branded
   sign-in pages (infra/lib/env/branding.ts). */
.signup { max-width: 1060px; margin: 0 auto; }
.signup.narrow { max-width: 660px; }
.signup-head { max-width: 700px; margin: 14px auto 30px; text-align: center; }
.signup-head.left { margin: 4px 0 24px; text-align: left; }
.signup-head h1 { font-size: 34px; font-weight: 500; letter-spacing: -.6px; line-height: 1.2; margin: 10px 0 12px; }
.signup-head .lead { font-size: 16px; color: var(--muted); margin: 0; }
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.path { display: flex; flex-direction: column; gap: 16px; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--copper); border-radius: 8px; padding: 28px 30px 30px; }
.path.team { border-top-color: var(--ink); }
.pathhead { display: flex; align-items: center; gap: 14px; }
.path h2, .path h3, .path p { margin: 0; }
.path h2 { font-size: 24px; letter-spacing: -.3px; }
.path .lead { font-size: 15px; }
.path-mark { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--blush); color: var(--copper); }
.team .path-mark { background: var(--ink); color: var(--paper); }
.path-mark svg { width: 26px; height: 26px; }
dl.signup-facts { margin: 0; border-top: 1px solid var(--line); }
dl.signup-facts > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid #ede9e5; }
dl.signup-facts dt { padding-top: 3px; font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--label); }
dl.signup-facts dd { margin: 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
dl.signup-facts dd.message { white-space: pre-wrap; }
.path .go { margin-top: auto; padding-top: 4px; }
.path .go .button { display: block; padding: 12px 16px; text-align: center; font-size: 15px; }
a.button.dark { background: var(--ink); border-color: var(--ink); color: var(--white); }
a.button.dark:hover { background: #45403b; border-color: #45403b; }
.signup-foot { max-width: 700px; margin: 26px auto 6px; text-align: center; font-size: 14px; color: var(--muted); }
.signup-foot p { margin: 6px 0; }
/* The home page's account panel: the same two paths, smaller. */
.paths.compact { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px; margin: 16px 0 6px; }
.paths.compact .path { gap: 10px; padding: 18px; border-top-width: 3px; border-radius: 6px; }
.paths.compact .path-mark { width: 36px; height: 36px; border-radius: 9px; }
.paths.compact .path-mark svg { width: 20px; height: 20px; }
.paths.compact h3 { font-size: 17px; }
.paths.compact p { font-size: 14px; }
.paths.compact .go a { font-weight: 500; }
.paths.compact .go a::after { content: " →"; }
/* The request form and what happens next, side by side. */
.signup-columns { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: 22px; align-items: start; }
.signup-columns > .card, .signup-columns > .path { margin-bottom: 0; }
.requestform { border-top: 4px solid var(--copper); }
.requestform.team { border-top-color: var(--ink); }
.requestform .field { margin: 0 0 18px; }
.requestform label { font-size: 13px; }
.requestform input, .requestform textarea { display: block; width: 100%; margin-top: 7px; padding: 11px 12px; }
.requestform input.short { max-width: 160px; }
.requestform textarea { min-height: 110px; resize: vertical; }
.requestform .tools { margin-bottom: 4px; }
.requestform .alert ul { margin: 8px 0 0; padding-left: 20px; }
.requestform .alert a { color: var(--error); }
.requestform .alert:focus { outline: 2px solid var(--error); outline-offset: 2px; }
.requestform .hint { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.requestform .optional { font-weight: 400; color: var(--muted); }
.requestform .account-line { margin: 0 0 18px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; font-size: 14px; overflow-wrap: anywhere; }
/* The field only robots fill in. */
.requestform .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup-columns .other { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
/* A request's steps: done (copper), now (ringed), next. */
ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
ol.steps li { position: relative; min-height: 46px; padding: 0 0 18px 42px; counter-increment: step; }
ol.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border: 2px solid var(--line); border-radius: 50%; background: var(--white); color: var(--muted); font-size: 12px; font-weight: 700; line-height: 24px; text-align: center; }
ol.steps li::after { content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; background: var(--line); }
ol.steps li:last-child { min-height: 0; padding-bottom: 0; }
ol.steps li:last-child::after { display: none; }
ol.steps li.done::before { background: var(--copper); border-color: var(--copper); color: var(--white); }
ol.steps li.done::after { background: var(--copper); }
ol.steps li.now::before { border-color: var(--copper); color: var(--deep); box-shadow: 0 0 0 4px var(--blush); }
ol.steps strong { display: block; padding-top: 4px; font-weight: 500; }
ol.steps p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.request-sent { text-align: center; padding: 34px 32px; }
.request-sent h1 { font-size: 28px; font-weight: 500; margin: 12px 0 8px; }
.request-sent .lead { margin: 0 auto 24px; max-width: 480px; color: var(--muted); }
.request-sent ol.steps { max-width: 420px; margin: 0 auto; text-align: left; }
.request-sent .note { margin: 22px auto 0; max-width: 480px; }
.request-sent .tools { justify-content: center; }
.request-tick { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
.request-tick svg { width: 28px; height: 28px; }
.reqhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.reqhead h1 { margin: 0; font-size: 30px; font-weight: 500; letter-spacing: -.5px; overflow-wrap: anywhere; }

/* Flash messages (errors from htmx requests land here). */
#flash:empty { display: none; }
#flash { position: fixed; right: 20px; bottom: 20px; max-width: 420px; z-index: 10; }
.flash { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--copper); padding: 12px 16px; border-radius: 6px; box-shadow: 0 6px 24px rgba(41, 39, 37, .15); font-size: 14px; }
.flash.error { border-left-color: var(--error); }

/* Two-step verification set-up. The QR code stays black on white, as
   scanners need, and is drawn on the server (inline SVG). */
.twostep .steps { padding-left: 20px; margin: 0; }
.twostep .steps li { margin-bottom: 20px; }
.twostep .qr { display: block; width: 220px; height: 220px; margin: 12px 0; border: 1px solid var(--line); border-radius: 4px; }
.twostep code.secret { font-size: 14px; letter-spacing: .08em; white-space: nowrap; }
.twostep label.code { max-width: 200px; }
.twostep label.code input { font-size: 20px; letter-spacing: .2em; }
.twostep form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

.htmx-request.busy-on-request, .htmx-request .busy-on-request { opacity: .6; }

button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

@media (max-width: 850px) {
  /* One column no wider than the page: a wide result table scrolls in
     its .tablewrap instead of widening the page. */
  .layout { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: 1fr; }
  main { padding: 14px; }
  .card { padding: 17px; }
  .kpis { grid-template-columns: 1fr; }
  .switcher > summary { max-width: calc(100vw - 32px); }
  .orglist > li { grid-template-columns: minmax(0, 1fr); }
  .orglist .orgact { grid-column: 1; grid-row: auto; margin-top: 6px; }
  .paths, .signup-columns { grid-template-columns: minmax(0, 1fr); }
  .signup-head { margin: 4px auto 22px; }
  .signup-head h1 { font-size: 27px; }
  .path { padding: 22px 20px 24px; }
  dl.signup-facts > div { grid-template-columns: minmax(0, 1fr); }
  .request-sent { padding: 26px 18px; }
}
@media print {
  header.top, nav.main, .tools, button, .status, .envband, footer, #flash, .noprint { display: none !important; }
  .layout { display: block; }
  .card { break-inside: avoid; border: 0; }
  body { background: var(--white); }
}

.eyebrow { font-size: 11px; letter-spacing: 2px; font-weight: 700; color: #9f8d7e; margin: 0; }
pre.note { white-space: pre-wrap; background: #f7f4f2; padding: 12px; border-radius: 6px; overflow: auto; }

/* LineWorks: the unit bar, the input sections as tabs (radio buttons, so
   the open one is posted with the form and survives re-renders), the
   equipment pickers, and the result's chart and schematic (in the
   original's colours). */
.unitbar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; align-items: end; margin: 15px 0; padding: 14px 16px; background: var(--blush); border: 1px solid var(--line); border-radius: 6px; }
.unitbar .note { margin: 0; }
.unitbar button { justify-self: start; }
.tabpick { position: absolute; opacity: 0; pointer-events: none; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; margin: 16px 0; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.tabs label { flex: 1; text-align: center; padding: 10px 6px; border-radius: 5px; cursor: pointer; font-size: 13px; color: var(--ink); }
.tabs label:hover { background: var(--blush); }
.tabs label.has-problems::after { content: " •"; color: var(--error); }
#tab-stream:checked ~ .tabs [for=tab-stream], #tab-pipe:checked ~ .tabs [for=tab-pipe], #tab-method:checked ~ .tabs [for=tab-method] { background: var(--deep); color: var(--white); }
#tab-stream:focus-visible ~ .tabs [for=tab-stream], #tab-pipe:focus-visible ~ .tabs [for=tab-pipe], #tab-method:focus-visible ~ .tabs [for=tab-method] { outline: 2px solid var(--copper); outline-offset: 2px; }
.lw .tab { display: none; }
#tab-stream:checked ~ .tab-stream, #tab-pipe:checked ~ .tab-pipe, #tab-method:checked ~ .tab-method { display: block; }
.sectionhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sectionhead .note { max-width: 150px; text-align: right; }
label.narrow select { max-width: 280px; }
.picker { border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px; margin: 0 0 14px; }
.picker legend { font-weight: 500; padding: 0 6px; }
.picker .tools { margin: 8px 0; justify-content: space-between; }
.fittings td { padding: 4px 6px; vertical-align: middle; }
.fittings input { width: 90px; }
.equation { font-family: ui-monospace, monospace; font-size: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 14px; line-height: 1.9; }
.source { background: var(--blush); border-left: 3px solid var(--copper); padding: 12px 14px; font-size: 13px; }
svg.lw-chart, svg.lw-pipe { display: block; width: 100%; height: auto; }
svg.lw-chart { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
svg.lw-pipe { margin-top: 16px; }
svg.lw-chart text, svg.lw-pipe text { font-size: 12px; fill: var(--ink); }
svg.lw-chart .part { fill: #988574; }
svg.lw-chart .total { fill: #292725; }
svg.lw-chart .gain { fill: #c39553; }
svg.lw-pipe .pipe { fill: #ece6e1; stroke: #695a4d; stroke-width: 3; }
svg.lw-pipe .flow { fill: none; stroke: var(--copper); stroke-width: 3; }
@media (max-width: 850px) {
  .unitbar { grid-template-columns: 1fr; }
}

/* GasWorks and PhaseWorks (the same form as LineWorks): a checkbox
   option, the gas line's two ends, the Baker map and the regime
   illustration (in the originals' colours). */
label.check { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: 12px 0; }
label.check input { display: inline; width: auto; margin: 0; }
.charthead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.charthead span { font-size: 12px; color: var(--label); }
svg.gw-map, svg.pw-map, .pw-anim svg { display: block; width: 100%; height: auto; }
svg.gw-map, svg.pw-map { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
svg.gw-map text, svg.pw-map text, .pw-anim svg text { font-size: 12px; fill: var(--ink); }
svg.gw-map .pipe { fill: #ece6e1; stroke: #695a4d; stroke-width: 2; }
svg.gw-map .arrow { fill: none; stroke: #695a4d; stroke-width: 3; }
svg.pw-map .plot { fill: #fbfaf9; stroke: var(--line); }
svg.pw-map .grid { stroke: var(--line); }
svg.pw-map .cross { stroke: var(--ink); stroke-dasharray: 4 5; opacity: .6; }
svg.pw-map .point { fill: var(--ink); stroke: var(--white); stroke-width: 3; }
svg.pw-map .regime { font-weight: 500; }
svg.pw-map .message { fill: var(--white); opacity: .92; }
.pw-anim { position: relative; margin-top: 16px; }
.pw-anim .pipe { stroke: #897665; stroke-width: 3; }
.pw-anim .liquid { fill: var(--copper); }
.pw-anim .gas { fill: #f1ece8; }
.pw-anim .blank { fill: #f1ece7; }
.pw-anim .moving { animation: pw-move 3s linear infinite; }
.motion-pause { position: absolute; opacity: 0; pointer-events: none; }
.motion-pause:checked ~ svg .moving { animation-play-state: paused; }
.animfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin-top: 6px; }
.animfoot .button { font-size: 12px; padding: 6px 10px; cursor: pointer; border: 1px solid var(--line); border-radius: 5px; background: var(--white); color: var(--ink); font-weight: 500; }
.animfoot .resume, .motion-pause:checked ~ .animfoot .pause { display: none; }
.motion-pause:checked ~ .animfoot .resume { display: inline; }
.motion-pause:focus-visible ~ .animfoot .button { outline: 2px solid var(--copper); outline-offset: 2px; }
.warnings p.clear { border-left-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
@keyframes pw-move { from { transform: translateX(-120px); } to { transform: translateX(120px); } }
@media (prefers-reduced-motion: reduce) {
  .pw-anim .moving { animation: none; }
}

/* DIERS: the form's views (radio buttons, as LineWorks' tabs) and
   numbered sections, the result's verdict pills and pressure bars (SVG:
   no inline styles), and the print views of a result, in the original's
   colours. */
.diers .unitbar { grid-template-columns: 1fr; }
.diers .tab { display: none; }
#tab-calculation:checked ~ .tab-calculation, #tab-methods:checked ~ .tab-methods { display: block; }
#tab-calculation:checked ~ .tabs [for=tab-calculation], #tab-methods:checked ~ .tabs [for=tab-methods] { background: var(--deep); color: var(--white); }
#tab-calculation:focus-visible ~ .tabs [for=tab-calculation], #tab-methods:focus-visible ~ .tabs [for=tab-methods] { outline: 2px solid var(--copper); outline-offset: 2px; }
.diers h2 { margin: 30px 0 14px; }
.diers h2.step span { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 6px; background: #f4f0ec; color: #51463c; font-size: 12px; font-weight: 500; vertical-align: middle; }
.diers .grid .full { grid-column: 1 / -1; }
.diers .pending { color: var(--deep); }
.diers table { margin: 8px 0; }
.diers .runbar { position: sticky; bottom: 10px; z-index: 1; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgba(41, 39, 37, .12); }
.diers .runbar .status { flex: 1; }
.diers input[readonly] { background: var(--paper); color: var(--muted); }
.pill { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: .5px; border-radius: 20px; background: #f6f3f1; color: #6d5e51; padding: 5px 10px; }
.pill.review { background: #fff1db; color: #915809; }
.kpis.pair { grid-template-columns: repeat(2, 1fr); margin: 12px 0; }
.result-section { margin-top: 24px; }
.diers-result h4 { font-size: 14px; font-weight: 500; margin: 18px 0 6px; }
.pressurebars { margin: 20px 0; }
.barrow { display: grid; grid-template-columns: 125px 1fr 110px; align-items: center; gap: 12px; margin: 12px 0; font-size: 12px; }
.barrow b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
svg.pbar { display: block; width: 100%; height: 9px; border-radius: 7px; }
svg.pbar .track { fill: #f4f1ee; }
svg.pbar .burst { fill: #a59486; }
svg.pbar .peak { fill: var(--copper); }
svg.pbar .review { fill: #d6ad66; }
.statusline { font-size: 12px; color: #5d5045; }
.statusline::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--copper); border-radius: 50%; }
.bigvalue { font-size: 28px; color: var(--copper); margin: 6px 0 12px; }
.report-nav { text-align: center; margin-bottom: 14px; }
.report { max-width: 190mm; margin: 0 auto; background: var(--white); padding: 8mm; font: 11px Arial, sans-serif; color: #29241f; }
.report h1 { font-size: 18px; font-weight: 500; margin: 0 0 5px; }
.report section { border: 1px solid #a79789; margin-top: 8px; break-inside: avoid; }
.report h2 { font-size: 11px; text-transform: uppercase; background: #f4f1ee; margin: 0; padding: 6px; }
.report table { font-size: 11px; }
.report td { padding: 4px 7px; border: 0; }
.report td + td { text-align: right; width: 48%; }
.report-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.report label input { font: inherit; color: inherit; border: 0; border-bottom: 1px dotted #aaa; border-radius: 0; padding: 4px 0; margin-top: 2px; }
.report-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.report-field { padding: 5px 8px; }
.report .note, .report-footer { font-size: 9px; line-height: 1.4; }
.report-footer { margin-top: 10px; border-top: 1px solid #aaa; padding-top: 7px; }
@media (max-width: 850px) {
  .barrow { grid-template-columns: 100px 1fr 75px; }
  .report-meta, .report-columns { grid-template-columns: 1fr; }
}
@media print {
  .report { max-width: none; margin: 0; padding: 0; }
  .report input::placeholder { color: transparent; }
  /* Print / PDF, as the page printed its case: the inputs as entered (two
     columns, fields without their boxes), then the result unless the
     inputs changed since. (The page also appended its Methods and
     Numerical checks tabs; Methods & sources stays a view here.) */
  .diers { font-size: 10px; }
  .card.diers, .card:has(.diers-result) { break-inside: auto; }
  .diers-result table, .diers-result .kpis { break-inside: avoid; }
  .diers-result h3, .diers-result h4 { break-after: avoid; }
  .diers-result .kpis { grid-template-columns: repeat(3, 1fr); }
  .diers-result .kpis.pair { grid-template-columns: repeat(2, 1fr); }
  .diers .tab-calculation { display: block; }
  .diers .tab-methods { display: none !important; }
  .diers .grid { grid-template-columns: 1fr 1fr; gap: 5px 12px; margin: 8px 0; }
  .diers h2 { margin: 14px 0 6px; }
  .diers input, .diers select { border: 0; padding: 2px; margin-top: 2px; font-size: 11px; appearance: none; background: none; }
  .diers input[type=number] { appearance: textfield; }
  .diers input[readonly] { background: none; color: inherit; }
  .diers-result.stale { display: none; }
}

/* GridWorks: one column (the network editor needs the width), the
   toolbox, canvas and element editor side by side, the drawing in the
   original's colours (its symbols set colours as attributes; fonts,
   strokes and hit areas here), the input register and the results. */
/* No wider than the page: GridWorks' results table scrolls in its
   .tablewrap (a `1fr` column would grow to the table's width). */
.layout.wide { grid-template-columns: minmax(0, 1fr); }
.gw .tab { display: none; }
#tab-network:focus-visible ~ .tabs [for=tab-network], #tab-data:focus-visible ~ .tabs [for=tab-data], #tab-settings:focus-visible ~ .tabs [for=tab-settings] { outline: 2px solid var(--copper); outline-offset: 2px; }
#tab-network:checked ~ .tab-network, #tab-data:checked ~ .tab-data, #tab-settings:checked ~ .tab-settings, #tab-audit:checked ~ .tab-audit { display: block; }
.gw-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; }
.gw-head .gw-name { flex: 1 1 260px; }
.gw-head .tools { margin: 0; }
.gw-workspace { display: grid; grid-template-columns: 236px minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
/* Either side panel folds away to a strip and the canvas takes its
   width: a checkbox posted with the form (as the tab is), worked by the
   panel's "Hide" and by the strip. Wide screens only; narrow ones stack
   the panels. */
.gw-toolbox, .gw-inspector { position: relative; }
.gw-fold, .gw-rail { display: none; }
#gw-fold-tools:focus-visible ~ .tab-network [for=gw-fold-tools], #gw-fold-editor:focus-visible ~ .tab-network [for=gw-fold-editor] { outline: 2px solid var(--copper); outline-offset: 2px; }
@media (min-width: 1101px) {
  .gw-fold { display: block; position: absolute; top: 0; right: 0; padding: 2px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); color: var(--deep); cursor: pointer; }
  .gw-fold:hover, .gw-rail:hover { background: var(--blush); }
  #gw-fold-tools:checked ~ .tab-network .gw-workspace { grid-template-columns: 36px minmax(0, 1fr) 340px; }
  #gw-fold-editor:checked ~ .tab-network .gw-workspace { grid-template-columns: 236px minmax(0, 1fr) 36px; }
  #gw-fold-tools:checked ~ #gw-fold-editor:checked ~ .tab-network .gw-workspace { grid-template-columns: 36px minmax(0, 1fr) 36px; }
  #gw-fold-tools:checked ~ .tab-network .gw-toolbox, #gw-fold-editor:checked ~ .tab-network .gw-inspector { align-self: stretch; }
  #gw-fold-tools:checked ~ .tab-network .gw-toolbox > :not(.gw-rail), #gw-fold-editor:checked ~ .tab-network .gw-inspector > :not(.gw-rail) { display: none; }
  #gw-fold-tools:checked ~ .tab-network .gw-toolbox > .gw-rail, #gw-fold-editor:checked ~ .tab-network .gw-inspector > .gw-rail { display: flex; }
  /* Out of the flow, filling the stretched panel: an upright label in
     the flow would make the row as tall as the window. */
  .gw-rail { position: absolute; inset: 0; align-items: center; padding: 12px 0; writing-mode: vertical-rl; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--deep); letter-spacing: .04em; cursor: pointer; }
}
.gw-toolbox h3 { margin: 6px 0; }
.gw-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.gw-tool { display: flex; align-items: center; gap: 4px; padding: 4px 6px; font-size: 11px; font-weight: 400; text-align: left; line-height: 1.2; color: var(--ink); }
.gw-tool svg { flex: none; width: 24px; height: 27px; color: var(--deep); }
.gw-tool[aria-pressed=true] { background: var(--deep); border-color: var(--deep); color: var(--white); }
.gw-tool[aria-pressed=true] svg { color: var(--white); }
.gw-tool.wide { width: 100%; padding: 8px; font-size: 13px; font-weight: 500; }
.gw-modes { display: grid; gap: 4px; margin-top: 12px; }
.gw-add { margin-top: 10px; }
.gw-add label { margin: 6px 0; }
/* "Add by name" opens and closes as a details element would, on a
   checkbox posted with the form (as the folds are), so it stays as the
   person left it when the form comes back. */
.gw-add .gw-add-toggle { margin: 0; padding: 10px 0; font-size: 15px; color: var(--ink); cursor: pointer; }
.gw-add-toggle::before { content: "▸ "; }
#gw-add-open:checked ~ .tab-network .gw-add-toggle::before { content: "▾ "; }
.gw-add-fields { display: none; }
#gw-add-open:checked ~ .tab-network .gw-add-fields { display: block; }
#gw-add-open:focus-visible ~ .tab-network [for=gw-add-open] { outline: 2px solid var(--copper); outline-offset: 2px; }
.gw-canvaswrap { min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: #fbf9f6; }
.gw-canvasbar, .gw-canvasfoot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 6px 10px; font-size: 12px; color: var(--muted); }
.gw-canvasbar button { padding: 4px 10px; }
.gw-zoom { display: flex; gap: 4px; align-items: center; }
.gw-mode { color: var(--deep); }
.gw-editor { display: block; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
svg.gw-drawing { display: block; width: 100%; background: var(--white); }
/* The window's height less the page above and the bars, as the page's
   canvas filled its window; never under 560px. */
svg.gw-canvas { height: max(560px, 100vh - 300px); touch-action: none; cursor: grab; user-select: none; }
svg.gw-canvas.nogrid .gw-gridfill { display: none; }
svg.gw-report { height: auto; max-height: 720px; border: 1px solid var(--line); border-radius: 6px; }
.gw-drawing text { font-family: Arial, sans-serif; font-size: 11px; fill: #292725; }
.gw-drawing text.label { paint-order: stroke; stroke: white; stroke-width: 3px; stroke-linejoin: round; }
svg.gw-canvas text.label { cursor: move; }
.gw-drawing tspan.head { font-weight: 700; }
.gw-drawing tspan.choked { fill: #c33434; font-weight: 800; }
.gw-drawing tspan.chokenote { fill: #a32828; }
.gw-drawing tspan.warning { fill: #bd7200; }
.gw-drawing path.hit { fill: none; stroke: transparent; stroke-width: 20; }
.gw-drawing circle.hit { fill: transparent; }
.gw-drawing path.line { fill: none; stroke-width: 2.6; }
.gw-drawing .connection.selected path.line { stroke-width: 4; }
.gw-drawing .flow-arrow { stroke: white; stroke-width: .7; }
.gw-drawing .equipment-symbol { stroke-width: 1.8; stroke-linejoin: round; }
svg.gw-canvas .connection, svg.gw-canvas .node { cursor: pointer; outline: none; }
svg.gw-canvas .connection:focus-visible path.hit { stroke: rgba(166, 83, 50, .25); }
svg.gw-canvas .node:focus-visible circle.hit { fill: rgba(166, 83, 50, .18); stroke: var(--copper); stroke-width: 2; }
.gw-inspector h2 { margin: 2px 0 10px; }
.gw-inspector .fields, .gw .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 8px 0; }
.gw .fields .full, .gw-inspector .full { grid-column: 1 / -1; }
.gw-group { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 10px 0; }
.gw-group legend { font-weight: 500; padding: 0 6px; }
.gw-row { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; align-items: end; margin: 6px 0; }
.gw-row button, .gw-small button { padding: 4px 8px; }
table.gw-small td, table.gw-small th { padding: 4px 6px; }
table.gw-small input { width: 100%; min-width: 70px; }
.gw-subhead { margin: 10px 0 0; font-size: 13px; }
.gw-readings { font-size: 12px; color: var(--muted); padding-left: 18px; }
.gw-problems { margin-top: 14px; border-left: 3px solid var(--error); background: var(--error-bg); padding: 8px 14px; border-radius: 4px; }
.gw-problems h3 { margin: 4px 0; font-size: 14px; }
.gw-problems ul { margin: 4px 0; padding-left: 18px; font-size: 13px; }
.gw-checks { margin-top: 8px; }
.gw-checks label { margin-right: 12px; }
table.gw-table { font-size: 12px; }
table.gw-table td, table.gw-table th { padding: 6px; white-space: nowrap; }
.gw .runbar { position: sticky; bottom: 10px; z-index: 1; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgba(41, 39, 37, .12); }
.gw .runbar .status { flex: 1; }
.gw-result .kpis { grid-template-columns: repeat(4, 1fr); margin-bottom: 14px; }
.gw-result .good { background: var(--ok-bg); color: var(--ok); padding: 12px 15px; border-radius: 8px; }
.gw-result .warninglist { border-left: 3px solid var(--warn); background: var(--warn-bg); padding: 4px 14px; font-size: 13px; }
.gw-section > summary h3 { display: inline; }
.gw-pick { max-width: 320px; margin: 8px 0; }
.gw-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
svg.chart { display: block; width: 100%; height: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
svg.chart text { font-family: Arial, sans-serif; font-size: 11px; fill: var(--ink); }
svg.chart text.title { font-size: 13px; font-weight: 700; }
svg.chart .gridline { stroke: #ede7e1; }
svg.chart .curve { fill: none; stroke-width: 2.5; }
svg.chart .operating { fill: #cc9542; stroke: white; stroke-width: 2; }
.choked { color: #c33434; font-weight: 700; }
@media (max-width: 1100px) {
  .gw-workspace { grid-template-columns: 1fr; }
  .gw-palette { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .gw-result .kpis { grid-template-columns: 1fr 1fr; }
}
@media print {
  .gw-section { break-inside: avoid; }
  .gw-section:not([open]) { display: none; }
}

/* BatchReactorWorks (a wide case page, `.layout.wide`): the
   configuration groups as tabs (radio buttons, as LineWorks'),
   sections as fieldsets, the recipe table, the run playback (diagram,
   figures, step ticker, controls) and the result's charts, audit and
   checks, in the original's colours. The diagram's colours are SVG
   presentation attributes, set per frame by the playback island. */
/* The form's column no wider than the page: the recipe table scrolls
   inside it. */
.layout.wide > div:has(> form.brw) { min-width: 0; }
.brw .tab { display: none; }
#brw-tab-equipment:checked ~ .brw-equipment, #brw-tab-batch:checked ~ .brw-batch, #brw-tab-thermal:checked ~ .brw-thermal, #brw-tab-operation:checked ~ .brw-operation, #brw-tab-recipe:checked ~ .brw-recipe, #brw-tab-methods:checked ~ .brw-methods { display: block; }
#brw-tab-equipment:checked ~ .tabs [for=brw-tab-equipment], #brw-tab-batch:checked ~ .tabs [for=brw-tab-batch], #brw-tab-thermal:checked ~ .tabs [for=brw-tab-thermal], #brw-tab-operation:checked ~ .tabs [for=brw-tab-operation], #brw-tab-recipe:checked ~ .tabs [for=brw-tab-recipe], #brw-tab-methods:checked ~ .tabs [for=brw-tab-methods] { background: var(--deep); color: var(--white); }
#brw-tab-equipment:focus-visible ~ .tabs [for=brw-tab-equipment], #brw-tab-batch:focus-visible ~ .tabs [for=brw-tab-batch], #brw-tab-thermal:focus-visible ~ .tabs [for=brw-tab-thermal], #brw-tab-operation:focus-visible ~ .tabs [for=brw-tab-operation], #brw-tab-recipe:focus-visible ~ .tabs [for=brw-tab-recipe], #brw-tab-methods:focus-visible ~ .tabs [for=brw-tab-methods] { outline: 2px solid var(--copper); outline-offset: 2px; }
.brw-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.brw-head h2 { margin: 2px 0 0; }
.brw-section { border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px; margin: 0 0 14px; }
.brw-section legend { font-weight: 500; padding: 0 6px; }
.brw-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 18px; align-items: end; }
.brw-fields .full { grid-column: 1 / -1; }
.brw-fields h4 { margin: 8px 0 0; font-size: 13px; font-weight: 500; color: var(--deep); }
.brw-fields .note { margin: 0; font-size: 12px; }
.brw-fields label.check { margin: 0; }
.brw-card { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; font-size: 13px; }
.brw-card .note { margin: 6px 0; }
.brw label.button { display: inline-block; cursor: pointer; border: 1px solid var(--line); border-radius: 5px; padding: 9px 12px; font-size: 15px; font-weight: 500; color: var(--ink); background: var(--white); }
.brw label.button:hover { background: var(--blush); }
.brw label.button.primary { background: var(--copper); color: var(--white); border-color: var(--copper); }
.brw label.button.primary:hover { background: var(--deep); border-color: var(--deep); }
table.brw-rows td { padding: 3px 8px; text-align: left; }
.brw-mix td { text-align: left; padding: 4px 6px; }
.brw-mix input { width: 110px; }
.brw-action { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.brw-recipe h3 small, .brw-methods h3 small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.brw-heel input { display: inline; width: 110px; margin: 0 4px; }
table.brw-recipe-table { font-size: 12px; min-width: 1600px; }
.brw-recipe-table td, .brw-recipe-table th { text-align: left; padding: 6px 5px; }
.brw-recipe-table select, .brw-recipe-table input { display: block; width: 100%; min-width: 95px; margin: 0 0 4px; padding: 5px; font-size: 12px; }
.brw-recipe-table td:first-child, .brw-recipe-table td:nth-child(2) { min-width: 180px; }
.brw-recipe-table td:nth-child(5) { min-width: 170px; }
.brw-num { display: flex; gap: 4px; align-items: center; }
.brw-num input { margin: 0 0 4px; }
.brw-num small { white-space: nowrap; font-size: 10px; }
.brw-stepactions { white-space: nowrap; }
.brw-stepactions button { padding: 4px 7px; font-size: 12px; margin: 0 2px 2px 0; }
.brw-runbar { position: sticky; bottom: 10px; z-index: 1; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgba(41, 39, 37, .12); }
.brw-runbar .status { flex: 1; }
.brw-refgrid, .brw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.brw-block { border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px; margin: 0 0 14px; background: var(--white); }
.brw-block h4 { margin: 0 0 8px; font-size: 15px; font-weight: 500; }
.brw-block p, .brw-block li { font-size: 13px; }
.brw-ref { border-top: 1px solid var(--line); padding: 8px 0; }
.brw-ref h5 { margin: 0 0 2px; font-size: 13px; font-weight: 500; }
.brw-ref p { margin: 4px 0 0; }
.brw-status { font-weight: 500; margin: 0 0 8px; }
.brw-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 12px 0; }
.brw-metric { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; background: var(--white); }
.brw-metric .label { font-size: 11px; letter-spacing: .5px; color: var(--label); text-transform: uppercase; }
.brw-metric .value { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.brw-metric .value small { font-size: 12px; margin-left: 4px; }
.brw-metric .sub { font-size: 12px; color: var(--muted); min-height: 16px; }
.brw-ticker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.brw-ticker .current, .brw-ticker .next { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.brw-ticker small { font-size: 11px; letter-spacing: 1px; color: var(--label); }
.brw-ticker progress { width: 100%; height: 6px; accent-color: var(--copper); }
.brw-ticker .rail { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.brw-ticker .rail button { font-size: 11px; padding: 4px 8px; }
.brw-ticker .rail button.active { background: var(--deep); color: var(--white); border-color: var(--deep); }
.brw-ticker .rail button.done { background: var(--blush); }
.brw-diagrammeta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--label); letter-spacing: 1px; margin: 10px 0 4px; }
.brw-playbar { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.brw-playbar[hidden] { display: none; }
.brw-playbar input[type=range] { flex: 1; }
svg.brw-diagram { display: block; width: 100%; height: auto; background-color: var(--paper); background-image: radial-gradient(#ddd4c9 .8px, transparent .8px); background-size: 18px 18px; border: 1px solid var(--line); border-radius: 6px; font-variant-numeric: tabular-nums; }
svg.brw-diagram text { font-size: 14px; fill: var(--ink); }
svg.brw-diagram text.toplabel { font-size: 13px; font-weight: 700; letter-spacing: 2px; fill: #7a7064; }
svg.brw-diagram text.tag { font-size: 12px; font-weight: 500; letter-spacing: 1px; fill: #68744b; }
svg.brw-diagram text.reading { font-size: 19px; font-weight: 500; }
svg.brw-diagram text.detail { font-size: 14px; fill: var(--muted); }
svg.brw-diagram text.vesselreading { font-size: 32px; font-weight: 500; }
svg.brw-diagram .processbox { fill: #fff; stroke: #cdc8c2; stroke-width: 1.5; }
svg.brw-diagram .hidden { display: none; }
@media (prefers-reduced-motion: reduce) {
  svg.brw-diagram .dot { display: none; }
}
svg.brw-chart { display: block; width: 100%; height: auto; }
svg.brw-chart text { font-size: 12px; fill: var(--muted); }
.brw-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.brw-charts .brw-chartcard { margin: 0; }
.brw-chartcard { border: 1px solid var(--line); border-radius: 6px; padding: 12px; background: var(--white); margin: 0 0 14px; }
.brw-chartcard h3 { margin: 0 0 6px; font-size: 15px; }
.brw-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.brw-key svg.swatch { width: 18px; height: 4px; margin-right: 5px; vertical-align: middle; }
.brw-ledger { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.brw-ledger.total { font-weight: 500; }
.brw-notices { margin: 14px 0; }
.brw-notices li { font-size: 13px; margin: 4px 0; }
.brw-audit { margin-top: 18px; }
.brw-audit h3 small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.brw-auditpick select { max-width: 420px; }
.brw-eq { display: grid; grid-template-columns: minmax(150px, 220px) 1fr minmax(110px, 170px); gap: 10px; padding: 8px 0; border-bottom: 1px solid #efebe7; font-size: 13px; }
.brw-eq .math { font-family: ui-monospace, monospace; font-size: 13px; }
.brw-eq .substitution { font-size: 12px; color: var(--muted); margin-top: 3px; }
.brw-eq .eqvalue { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.brw-eq small { display: block; color: var(--muted); font-weight: 400; }
td.pass { color: var(--ok); }
td.fail { color: var(--error); }
.ok-note { color: var(--ok); background: var(--ok-bg); padding: 10px 14px; border-radius: 6px; }
@media (max-width: 1100px) {
  .brw-charts { grid-template-columns: 1fr; }
}
@media (max-width: 850px) {
  .brw-ticker { grid-template-columns: 1fr; }
  .brw-eq { grid-template-columns: 1fr; }
  .brw-eq .eqvalue { text-align: left; }
}
@media print {
  .brw-playbar, .brw-auditpick, .brw-ticker .rail { display: none; }
  .brw-chartcard, .brw-block { break-inside: avoid; }
}

/* Admin: deployments (pipeline runs, stage by stage). */
.flight { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.flight:first-of-type { border-top: 0; padding-top: 0; }
.flighthead { margin: 0 0 8px; }
.flighthead .badge { margin-left: 6px; }
.stages { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 8px; }
.stages li { padding: 6px 10px; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; background: var(--white); color: var(--muted); }
.stages li small { display: block; font-size: 11px; }
.stages li.done { background: var(--ok-bg); border-color: #c5dcc0; color: var(--ok); }
.stages li.running { background: var(--blush); border-color: var(--copper); color: var(--deep); font-weight: 500; }
.stages li.failed, .stages li.stopped { background: var(--error-bg); border-color: #e3b9ab; color: var(--error); }
.stages li.waiting { border-style: dashed; color: var(--deep); }
.stages.actions { margin-left: 18px; }
.stages.actions li { padding: 4px 8px; font-size: 11px; }
td.verdict small { display: inline-block; max-width: 420px; margin-top: 9px; }
td.nowrap { white-space: nowrap; }
ol.plan li, ul.plan li { margin: 6px 0; line-height: 1.5; font-size: 14px; }

/* Admin: the overview (a count, what it means, a link) and the jobs list. */
.columns.overview { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 0; border-top: 1px solid #ede9e5; }
.checks li:first-child { border-top: 0; padding-top: 0; }
.checks .badge { text-align: center; padding: 5px 8px; }
.checks small { display: block; margin-top: 4px; line-height: 1.5; overflow-wrap: anywhere; }
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; align-items: end; margin: 14px 0; }
.filters .tools { margin: 0; }
.jobpage .facts code { font-size: 12px; }

/* Admin: settings (each defined setting with its own typed form). */
.pagehead { max-width: 900px; margin: 0 0 18px; }
.pagehead h1 { font-size: 26px; font-weight: 500; margin: 0 0 6px; }
.pagehead p { margin: 4px 0; }
.settings-area > h2 { margin-bottom: 4px; }
.setting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 16px 40px; padding: 22px 0; border-top: 1px solid var(--line); }
.settings-area > h2 + .setting, .settings-area > .note + .setting { border-top: 0; }
.setting:last-child { padding-bottom: 0; }
.setting h3 { margin: 0 0 6px; overflow-wrap: anywhere; }
.setting-tags { margin: 0 0 8px; }
.setting-help { margin: 0 0 14px; font-size: 14px; max-width: 64ch; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 13px; line-height: 1.5; }
.facts dt { color: var(--label); font-weight: 500; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts strong { font-weight: 500; }
.facts .pill { padding: 2px 8px; margin-left: 4px; }
.setting-about .alert, .setting-about .notice { margin: 14px 0 0; font-size: 13px; }
.setting-form { align-self: start; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 16px; }
.setting-form label { margin-top: 14px; }
.setting-form label:first-child { margin-top: 0; }
.setting-form label.check { margin: 0; font-size: 14px; }
.setting-form > input, .setting-form > select { display: block; width: 100%; margin-top: 6px; }
.setting-form .entry input { flex: 0 1 200px; }
.setting-form .unit { align-self: center; font-size: 14px; color: var(--muted); }
.setting-form .hint { display: block; margin-top: 6px; font-size: 12px; }
.setting-form .tools { margin: 16px 0 0; }
code.stored { white-space: pre-wrap; overflow-wrap: anywhere; }
.saved { margin: 14px 0 0; padding: 9px 12px; border-radius: 5px; font-size: 13px; line-height: 1.5; background: var(--ok-bg); color: var(--ok); }
.saved.sent { background: var(--blush); color: var(--deep); }
@media (max-width: 850px) {
  .setting { grid-template-columns: minmax(0, 1fr); }
}

/* Admin: actions on a person (or staff, an org), each with what it does,
   its own reason and its button; the destructive ones (suspend, erase,
   disable, close) apart in a danger zone, each confirmed in the page
   (hx-confirm). What it does beside its form on wide screens. */
.acts > h2 { margin-bottom: 6px; }
.act { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 28px; padding: 16px 0; border-top: 1px solid #ede9e5; }
.acts > .note + .act { margin-top: 12px; }
.act:last-child { padding-bottom: 0; }
.act h3 { margin: 0 0 4px; }
.act p { margin: 0; }
.act form .tools { margin: 12px 0 0; }
.act form label + label { margin-top: 12px; }
.act > .tools { margin: 0; align-self: start; }
.card.dangerzone { border-color: #e3b9ab; }
.dangerzone > h2 { color: var(--error); }
.dangerzone .act { border-top-color: #f2dcd3; }
.columns > .acts .act { grid-template-columns: minmax(0, 1fr); }
/* A row an audit link points at (the Staff, Packs and Prices pages). */
tr:target > td { background: var(--blush); }
@media (max-width: 850px) {
  .act { grid-template-columns: minmax(0, 1fr); }
}
/* GridWorks Copper workspace: the inspector is a modal, leaving the
   drawing the full working width. All engineering values are server-rendered. */
.layout:has(#workspace.gw) { display: flex; flex-direction: column; gap: 0; }
.layout:has(#workspace.gw) > div { display: contents; }
.layout:has(#workspace.gw) > section { order: 2; }
.layout:has(#workspace.gw) > div > section { order: 3; }
body:has(#workspace.gw) main { max-width: none; }
#workspace.gw { padding: 0; overflow: visible; }
.gw .gw-head { padding: 12px 20px 0; }
.gw .runbar { padding: 0 20px 12px; margin: 0; }
.gw .gw-tabs { flex-wrap: wrap; padding: 0 18px; border-top: 1px solid var(--line); }
.gw .gw-tabs label { font-size: 12px; padding: 12px 13px; cursor: pointer; }
.gw .gw-tabs [aria-selected="true"] { color: var(--copper, #a9502c); border-bottom: 3px solid #a9502c; }
.gw .gw-workspace { grid-template-columns: 176px minmax(0, 1fr); gap: 0; }
.gw #gw-fold-tools:checked ~ .tab-network .gw-workspace { grid-template-columns: 36px minmax(0, 1fr); }
.gw .gw-toolbox { padding: 18px 13px; border-right: 1px solid #dfd5c9; overflow: auto; }
.gw .gw-toolbox .note { font-size: 11px; }
.gw .gw-palette { gap: 5px; }
.gw .gw-tool { font-size: 10px; min-height: 57px; }
.gw .gw-canvaswrap { min-width: 0; border: 0; border-radius: 0; }
.gw .gw-canvasbar { flex-wrap: wrap; padding: 8px 12px; }
.gw .gw-canvasbar button { font-size: 11px; }
.gw .gw-editor svg { height: calc(100vh - 300px); min-height: 590px; }
.gw .tab-data, .gw .tab-settings { padding: 24px 28px; }
.gw-dialog { width: min(860px, 94vw); max-height: 90vh; padding: 0; border: 1px solid #dfd5c9; border-radius: 10px; color: #332e29; background: #fff; box-shadow: 0 22px 70px #332e2955; }
.gw-dialog::backdrop { background: rgb(41 39 37 / 24%); }
.gw-dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 24px; border-bottom: 1px solid #dfd5c9; position: sticky; top: 0; background: white; z-index: 2; }
.gw-dialog-body { padding: 22px 26px; }
.gw .gw-dialog .fields { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 22px; }
.gw-dialog input, .gw-dialog select { padding: 10px; font-size: 14px; }
.gw-dialog label, .gw-dialog .note { font-size: 12px; }
.gw-dialog-actions { position: sticky; bottom: 0; padding: 16px 0; background: white; border-top: 1px solid #dfd5c9; z-index: 1; }
.gw-dialog-actions .danger { margin-right: auto; }
.gw-dialog .gw-group { margin: 16px 0; }
.gw-bulk-dialog { width: min(1200px, 96vw); }
.gw-bulk-targets, .gw-bulk-fields { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 12px 0; }
body[data-gw-tab="network"] .layout:has(.gw) > section,
body[data-gw-tab="data"] .layout:has(.gw) > section,
body[data-gw-tab="settings"] .layout:has(.gw) > section { display: none; }
body[data-gw-tab] .gw-result [data-gw-result-tab] { display: none; }
body[data-gw-tab="results"] .gw-result [data-gw-result-tab="results"],
body[data-gw-tab="graphs"] .gw-result [data-gw-result-tab="graphs"],
body[data-gw-tab="visual"] .gw-result [data-gw-result-tab="visual"],
body[data-gw-tab="properties"] .gw-result [data-gw-result-tab="properties"],
body[data-gw-tab="audit"] .gw-result [data-gw-result-tab="audit"] { display: block; }
.gw-result [data-gw-result-tab] > summary { list-style: none; pointer-events: none; }
@media (max-width: 1100px) {
  .gw .gw-workspace { grid-template-columns: 140px minmax(0,1fr); }
  .gw .gw-tabs label { padding: 10px 8px; font-size: 11px; }
}
@media (max-width: 700px) {
  .gw .gw-workspace { grid-template-columns: 115px minmax(0,1fr); }
  .gw .gw-dialog .fields { grid-template-columns: 1fr; }
  .gw-dialog-body { padding: 16px; }
  .gw .gw-editor svg { min-height: 500px; }
}
@media print {
  .gw-dialog { display: none !important; }
  body[data-gw-tab] .gw-result [data-gw-result-tab] { display: block; }
  body[data-gw-tab] .layout:has(.gw) > section { display: block; }
}
/* Match the compact Copper controls and stacked palette symbols. */
body:has(#workspace.gw) main { padding: 10px 0; }
body:has(#workspace.gw) .crumbs { margin: 0 26px 10px; }
.gw .gw-head { padding: 12px 18px; align-items: center; gap: 8px; }
.gw .gw-head .gw-name { flex: 1 1 160px; max-width: 280px; }
.gw .gw-head > label:not(.gw-name) { font-size: 10px; max-width: 180px; }
.gw .gw-head button { font-size: 12px; padding: 9px; }
.gw .runbar { position: static; border: 0; box-shadow: none; padding: 0; background: none; margin-left: auto; }
.gw .runbar .status:empty { display: none; }
.gw .gw-tabs { display: flex; gap: 0; background: #efeae4; border-radius: 0; margin: 0; }
.gw .gw-tabs label { flex: none; padding: 12px 16px; margin: 0; border-radius: 0; font-weight: 400; white-space: nowrap; border-bottom: 3px solid transparent; }
.gw .gw-tabs [role=tab][aria-selected=true] { background: white; color: #a9502c; border-bottom-color: #a9502c; }
.gw .gw-palette { grid-template-columns: repeat(2,minmax(0,1fr)); }
.gw .gw-palette .gw-tool { flex-direction: column; justify-content: center; text-align: center; white-space: normal; min-width: 0; padding: 7px 2px; min-height: 68px; }
.gw .gw-palette .gw-tool svg { width: 28px; height: 28px; }
.gw .gw-canvasbar { justify-content: flex-start; gap: 6px; }
.gw .gw-canvasbar .gw-zoom { margin-left: auto; }
.gw .gw-canvasbar .inline { flex-direction: row; white-space: nowrap; }
.gw-dialog-header { background: #292725; color: white; }
.gw-dialog-header button { background: transparent; border-color: #807a74; color: white; }
.gw-dialog .gw-group { border: 0; border-top: 1px solid #dfd5c9; border-radius: 0; padding: 12px 0; }
.gw-dialog-actions [data-gw-apply="apply"] { flex: 1; }
.gw-dialog-actions .danger { margin-right: 0; }
.gw-bulk-dialog input:not([type=checkbox]), .gw-bulk-dialog select, .gw-bulk-dialog textarea { min-width: 120px; }
@media (max-width: 1100px) {
  .gw .gw-tabs label { padding: 10px 8px; font-size: 11px; }
}
/* The organisation's own pages (/org…) and an invitation's page: the
   org's heading and tabs, member and role lists, the permission matrix.
   Everything here is scoped to .orgpage. */
.orgpage .orghead { margin: 4px 0 16px; }
.orgpage .orghead h1 { font-size: 30px; font-weight: 500; letter-spacing: -.5px; margin: 6px 0 4px; overflow-wrap: anywhere; }
.orgpage .orghead .meta { margin: 0; font-size: 13px; }
.orgpage .orgtabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.orgpage .orgtabs a { padding: 10px 14px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.orgpage .orgtabs a:hover { background: var(--blush); }
.orgpage .orgtabs a[aria-current] { color: var(--deep); border-bottom-color: var(--copper); }
.orgpage h2.orgsection { margin: 10px 0 14px; }
.orgpage .card h3 { margin-top: 0; }
.orgpage .rolehead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 18px; }
.orgpage .rolehead strong { font-weight: 500; }
.orgpage ul.can { margin: 10px 0 0; padding-left: 22px; font-size: 14px; line-height: 1.75; }
.orgpage ul.can li::marker { content: "✓  "; color: var(--ok); }
.orgpage details.can { margin-top: 6px; }
.orgpage .zone { border-color: #e3b9ab; }
.orgpage .columns.zones { grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); }
.orgpage .invite { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.orgpage .invite select { width: 100%; }
.orgpage .sentlink { margin: 0 0 20px; padding: 14px 16px; font-size: 14px; }
.orgpage .sentlink p { margin: 0 0 8px; }
.orgpage .sentlink label { color: var(--ok); }
.orgpage .copylink { font-size: 13px; color: var(--ink); }
.orgpage .orglist .orgact { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.orgpage .roleform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.orgpage .roleform select { padding: 7px; font-size: 13px; }
.orgpage .roleform button, .orgpage .orgact > button { padding: 7px 10px; font-size: 13px; }
/* Positioned, so the screen-reader-only words in the matrix (absolute)
   scroll with it instead of widening the page. */
.orgpage .tablewrap { position: relative; }
.orgpage table.matrix th[scope=row] { font-size: 13px; font-weight: 400; color: var(--ink); text-align: left; }
.orgpage table.matrix th[scope=col] { text-align: center; white-space: nowrap; }
.orgpage table.matrix th[scope=col]:first-child { text-align: left; }
.orgpage table.matrix td { text-align: center; }
.orgpage table.matrix .yes { color: var(--ok); font-weight: 500; }
.orgpage table.matrix .no { color: #b9aea4; }
.orgpage table.activity td.when { white-space: nowrap; }
.orgpage .facts.invitation { font-size: 14px; gap: 10px 20px; margin-bottom: 16px; }
.orgpage label.rolename { max-width: 420px; margin-bottom: 14px; }
.orgpage fieldset legend { font-size: 12px; font-weight: 500; color: var(--label); margin-bottom: 4px; }
@media (max-width: 850px) {
  .orgpage .orghead h1 { font-size: 25px; }
  .orgpage .invite { grid-template-columns: minmax(0, 1fr); }
  .orgpage .invite button { justify-self: start; }
  .orgpage .orglist .orgact { justify-content: flex-start; }
  .orgpage table.activity td.when { white-space: normal; }
}
/* The page's section heads, its audit and quick-start notes. The audit's
   method notes show here until a result shows them with its live audit. */
.gw .tab-audit { padding: 24px 28px; }
body:has(#result-panel .gw-result) .gw .tab-audit { display: none; }
.gw-pagehead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; margin-bottom: 8px; }
.gw-pagehead h2, .gw .tab-audit h2, .gw .tab-settings h2 { margin: 4px 0; }
.gw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-top: 16px; }
.gw-card { border: 1px solid var(--line); border-radius: 8px; padding: 6px 20px 14px; background: var(--white); font-size: 13px; line-height: 1.55; }
.gw-card h4 { margin: 12px 0 6px; font-size: 15px; font-weight: 500; }
.gw-steps { margin: 6px 0; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.gw-checks label.inline, .gw-bulk-fields label.inline { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin-right: 16px; }
.gw-bulk-status { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 12px; color: var(--muted); }
.gw .gw-head .gw-open, .gw .gw-head a.button { font-size: 12px; padding: 9px; cursor: pointer; }
.gw .gw-head label.gw-open { display: inline-block; margin: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--white); color: var(--ink); font-weight: 500; }
.gw .gw-head label.gw-open:hover { background: var(--blush); }
.gw-open:focus-within { outline: 2px solid var(--copper); outline-offset: 2px; }
svg.gw-reservoir { display: block; width: 100%; height: auto; margin: 10px 0; background: #f9f8f6; border-radius: 8px; }