/* Overrides on top of Pico: full-contrast text, one button colour family (Pass/Fail green/red). */
/* Helvetica Neue, self-hosted (Tom's ruling 2026-09-18): naming the family alone renders Arial on Windows. */
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue-Medium.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue-Bold.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }
:root { --pico-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --pico-font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; }
html[data-theme=light]:root:not([data-theme=dark]) {
  --pico-color: #000;
  --pico-muted-color: #000;
  --pico-h1-color: #000; --pico-h2-color: #000; --pico-h3-color: #000;
  --pico-h4-color: #000; --pico-h5-color: #000; --pico-h6-color: #000;
  --pico-font-size: 112.5%;
}
.brand { font-size: 1.15rem; display: inline-flex; align-items: center; gap: .75rem; color: #000; text-decoration: none; }
.brand-logo { height: 2.4rem; width: auto; }
.badge { background: #b00020; color: #fff; border-radius: 1rem; padding: 0 .5rem; font-size: .85rem; }
.flash { background: #e8f5e9; border-left: 6px solid #1b7f3b; }
.flash.flash-warn { background: #fff3cd; border-left: 6px solid #b00020; } /* BUAT-63: a refusal, same look as .jira-error */
.jkey { font-weight: 700; letter-spacing: .02em; }
.crumb { font-size: 1rem; margin-bottom: .25rem; }
table.instr th:first-child { width: 60%; }
table.instr-edit th:first-child, table.instr-edit th:nth-child(2) { width: 45%; }
table.instr-edit textarea { margin: 0; }
table.instr-edit td:last-child { white-space: nowrap; }
.big-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.big-choice a, .big-choice button { font-size: 1.3rem; padding: 1.1rem; text-align: center; width: 100%; }
.btn-pass, .btn-pass:hover { background: #1b7f3b; border-color: #1b7f3b; color: #fff; }
.btn-fail, .btn-fail:hover { background: #b00020; border-color: #b00020; color: #fff; }
a[role=button].btn-pass, a[role=button].btn-fail { display: block; }
.task-list a[role=button] { display: block; text-align: left; margin-bottom: .75rem; }
.task-list .retest { background: #fff3cd; color: #000; padding: 0 .4rem; border-radius: .3rem; margin-left: .5rem; font-size: .9rem; }
.outcome-pass { color: #1b7f3b; font-weight: 700; }
.outcome-fail { color: #b00020; font-weight: 700; }
.thumb { max-width: 160px; max-height: 110px; border: 1px solid #000; margin: .25rem .25rem 0 0; }
.people button { width: 100%; margin-bottom: .6rem; text-align: left; }
table td, table th { vertical-align: top; }
table.compact td, table.compact th { padding: .4rem .5rem; font-size: .95rem; }
.inline-form { display: flex; gap: .5rem; align-items: center; margin: 0; }
.inline-form select, .inline-form input, .inline-form button { margin: 0; width: auto; }
.nowrap { white-space: nowrap; }
textarea.copy { font-family: monospace; font-size: .85rem; }
progress { margin: 0; }

.cov-cards article { margin: 0 0 1rem; padding: .75rem 1rem; }
.cov-cards h2 { margin: 0; }
.cov-bar { display: flex; width: 160px; height: 14px; border: 1px solid #000; background: #fff; }
.cov-pass { background: #1b7f3b; }
.cov-fail { background: #b00020; }
.cov-key { display: inline-block; width: 14px; height: 14px; border: 1px solid #000; background: #fff; vertical-align: middle; }
.cov-key.cov-pass { background: #1b7f3b; } .cov-key.cov-fail { background: #b00020; }
.cov-row-none td { background: #fff3cd; }
mark.cov-none { background: #b00020; color: #fff; padding: 0 .4rem; border-radius: .3rem; font-size: .85rem; }
/* BUAT-59: "All tested" as a filled badge in the app's button blue, next to the red "Not started" and the green "Passed" */
mark.cov-all { background: var(--pico-primary-background); color: #fff; padding: 0 .4rem; border-radius: .3rem; font-size: .85rem; white-space: nowrap; margin-left: .35rem; }

mark.retired { background: #000; color: #fff; padding: 0 .4rem; border-radius: .3rem; font-size: .85rem; }
.retired-note { background: #fff3cd; border-left: 6px solid #000; }

/* BUAT-44: optional screenshot of the window on an instruction row */
.instr-shot { display: flex; width: fit-content; flex-direction: column; gap: .2rem; margin-top: .5rem; color: #000; font-size: .9rem; text-decoration: underline; }
.instr-shot img { max-width: 260px; max-height: 170px; border: 1px solid #000; }
.instr-edit .instr-shot-cell { min-width: 14rem; }
.instr-edit .instr-shot-cell label { font-size: .9rem; margin: .25rem 0 0; }
.instr-edit .instr-shot-cell input[type=file] { margin: .25rem 0 0; font-size: .85rem; }
.instr-edit .instr-shot-current button { margin-top: .25rem; padding: .2rem .5rem; font-size: .85rem; width: auto; }
.instr-edit .instr-shot img { max-width: 180px; max-height: 120px; }

/* BUAT-46/48: journey chevron above a test case. Done = green (red when the latest result is a fail), this step = black, to come = light.
   BUAT-48: one row across the full content width, boxes share it evenly, title and role wrap inside the box.
   A box the viewer may open is a link; a step assigned to someone else is not clickable (not-allowed cursor). */
nav.chevron ol, nav.chevron ol:first-of-type { display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; list-style: none; margin: 0 0 1rem; padding: 0; }
.chevron { --notch: .7rem; }
.chevron li { list-style: none; flex: 1 1 0; min-width: 0; margin: 0 -.15rem 0 0; padding: 0; display: flex;
  line-height: 1.2; font-size: .8rem; color: #000; background: #e3e6ea;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%); }
.chevron li:first-child { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%); }
.chevron li:last-child { margin-right: 0; }
/* the text area keeps clear of both arrow cut-outs; text never leaves it (a word too long for the box wraps at its edge) */
.chevron li > a, .chevron li > .chev-box { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: .15rem;
  margin: 0; border-radius: 0; padding: .45rem calc(var(--notch) + .15rem) .45rem calc(var(--notch) + .4rem); color: inherit; text-decoration: none; }
/* Pico gives links inside a nav negative side margins; a chevron link must stay inside its box */
.chevron li:first-child > a, .chevron li:first-child > .chev-box { padding-left: .5rem; }
.chevron .chev-title, .chevron .chev-role { display: block; min-width: 0; max-width: 100%; overflow-wrap: break-word; hyphens: auto; }
.chevron .chev-title { font-weight: 500; }
.chevron .chev-role { font-size: .72rem; }
.chevron li.chev-link > a:hover .chev-title, .chevron li.chev-link > a:focus-visible .chev-title { text-decoration: underline; }
.chevron li.chev-link > a:focus-visible { outline: 3px solid #000; outline-offset: -5px; }
.chevron li.chev-locked { cursor: not-allowed; }
/* nine steps or more: a smaller arrow and smaller text, so whole words still fit a box at laptop width */
.chevron.chev-many { --notch: .5rem; }
.chevron.chev-many li { font-size: .7rem; }
.chevron.chev-many .chev-role { font-size: .64rem; }
.chevron.chev-many li > a, .chevron.chev-many li > .chev-box { padding: .4rem calc(var(--notch) + .1rem) .4rem calc(var(--notch) + .3rem); }
.chevron.chev-many li:first-child > a, .chevron.chev-many li:first-child > .chev-box { padding-left: .4rem; }
.chevron .chev-done { background: #1b7f3b; color: #fff; }
.chevron .chev-failed { background: #b00020; }
.chevron .chev-current { background: #000; color: #fff; }
.chevron .chev-done.chev-link > a:focus-visible, .chevron .chev-current > a:focus-visible { outline-color: #fff; }

/* Tom's addition: the result form opens under Pass / Fail on the same page */
.result-panel { margin-top: 1rem; scroll-margin-top: 4.5rem; }
.result-panel.result-pass { border-left: 8px solid #1b7f3b; }
.result-panel.result-fail { border-left: 8px solid #b00020; }
.result-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.result-actions button { width: auto; margin: 0; }
.big-choice a.chosen { outline: 4px solid #000; outline-offset: 3px; }
.result-readonly { border-left: 8px solid #000; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* BUAT-45 */
.all-done { text-align: center; padding: 2rem 1rem; }

/* BUAT-20: a reopened result stays in the history, marked */
mark.reopened { background: #000; color: #fff; padding: 0 .4rem; border-radius: .3rem; font-size: .85rem; }
tr.row-reopened td { background: #eef0f2; }
tr.row-reopened td:nth-child(3) { text-decoration: line-through; }
.reopen-form { display: flex; gap: .4rem; align-items: center; margin: 0; }
.reopen-form input { margin: 0; min-width: 12rem; }
.reopen-form button { margin: 0; width: auto; white-space: nowrap; }

/* BUAT-18: paste a screenshot from the clipboard; preview with remove */
.paste-zone { width: auto; margin: .35rem 0 0; padding: .3rem .7rem; font-size: .9rem; }
.paste-zone:focus { outline: 3px solid #000; outline-offset: 2px; }
.paste-previews { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.paste-previews figure { margin: 0; display: flex; flex-direction: column; gap: .25rem; width: fit-content; font-size: .85rem; }
.paste-previews img { max-width: 260px; max-height: 170px; border: 1px solid #000; }
.instr-edit .paste-previews img { max-width: 180px; max-height: 120px; }
.paste-previews button { width: auto; margin: 0; padding: .2rem .5rem; font-size: .85rem; }

/* BUAT-24: development Jira */
.jira-line { flex-wrap: wrap; margin-bottom: 1rem; }
.jira-error { background: #fff3cd; border-left: 6px solid #b00020; }
.jira-bug { margin-bottom: .5rem; }
.jira-status { background: #e7eefc; padding: 0 .4rem; border-radius: .3rem; }
.jira-note { font-weight: 400; }
.raise-form { flex-wrap: wrap; margin-bottom: .75rem; }
.raise-form small { flex-basis: 100%; }

/* BUAT-33/34: login, invite link, users */
.login-box { max-width: 32rem; margin: 2rem auto; }
.invite-box { border-left: 6px solid #1b7f3b; }
.invite-box #invite-link { flex: 1; font-family: monospace; font-size: .9rem; }
table.users .inline-form input[type=email] { min-width: 15rem; }
table.users form { margin: 0; }

/* BUAT-32: audit filters and pages */
.audit-filter { flex-wrap: wrap; margin-bottom: 1rem; }
.pager { display: flex; gap: 1rem; align-items: center; }

/* BUAT-47: a coordinator acting as a tester. On every page, full contrast, apart from the page content. */
.acting-banner { background: #ffd54a; color: #000; border-bottom: 4px solid #000; padding: .5rem 0; position: sticky; top: 0; z-index: 10; }
.acting-banner .container { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.acting-banner p, .acting-banner form { margin: 0; }
.acting-banner button { margin: 0; background: #000; border-color: #000; color: #fff; }
.cov-label { white-space: nowrap; margin-left: .35rem; }

/* BUAT-51: several testers per step, each tester's state on its own line (journey page Result column). */
ul.testers { list-style: none; padding: 0; margin: .25rem 0 0; font-size: .9rem; }
ul.testers li { list-style: none; margin: 0 0 .2rem; }
/* BUAT-57: one row per step; assigned testers as chips with an x, "+ add tester" below, one Save at the bottom.
   Fixed column widths, so the Testers column does not jump when chips come and go. */
table.assign-table { table-layout: fixed; width: 100%; }
table.assign-table col.c-step { width: 30%; } table.assign-table col.c-case { width: 11%; }
table.assign-table col.c-role { width: 13%; } table.assign-table col.c-testers { width: 27%; } table.assign-table col.c-result { width: 19%; }
table.assign-table td { overflow-wrap: break-word; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: .15rem; border: 1px solid #000; border-radius: 1rem; padding: 0 .1rem 0 .55rem; font-size: .88rem; color: #000; background: #fff; max-width: 100%; }
.chip .chip-x { margin: 0; padding: 0 .4rem; width: auto; background: transparent; border: 0; color: #000; font-size: 1.05rem; line-height: 1.4; }
.chip .chip-x:hover, .chip .chip-x:focus-visible { background: #000; color: #fff; border-radius: 1rem; }
select.add-tester { margin: 0; padding-top: .3rem; padding-bottom: .3rem; font-size: .9rem; }
.assign-save { margin: 1rem 0 2rem; }
/* BUAT-52: a new journey starts a group in the bug table */
tr.bug-journey-first td { border-top: 2px solid #000; }

/* BUAT-54, BUAT-55: help pages. Native accordion: only the questions show, a click opens the answer. */
.help { max-width: 52rem; }
.help-section { margin: 2rem 0 0; }
.help-section h2 { margin-bottom: .5rem; }
.help details.help-q { margin: 0; padding: .6rem 0; border-bottom: 1px solid #000; }
.help details.help-q summary { color: #000; font-weight: 500; }
.help details.help-q summary::after { background-image: var(--pico-icon-chevron); filter: brightness(0); }
.help details.help-q[open] > summary { margin-bottom: .5rem; color: #000; }
.help .help-a { padding: 0 0 .25rem; }
.help .help-a p, .help .help-a ol, .help .help-a ul { margin-bottom: .5rem; }
table.users input.test-role { min-width: 9rem; width: 9rem; }

/* BUAT-58: fail queue in two parts. "Needs you" open on top, "With development" folded below. Secondary actions are small
   links that open their own field; Close without fix is the same form everywhere, its reason box full width. */
.fq-section { margin: 1.5rem 0 0; }
.fq-fold { border-top: 2px solid #000; padding-top: .75rem; }
.fq-fold > summary h2 { display: inline; margin: 0; }
.fq-card { margin: .75rem 0 1rem; }
.fq-more { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; align-items: flex-start; margin-top: .5rem; }
.fq-more .fq-action { flex: 0 0 auto; }
.fq-more .fq-action[open] { flex-basis: 100%; order: 1; }
details.fq-action { margin: 0; border: 0; padding: 0; }
details.fq-action > summary { color: #000; font-size: .95rem; text-decoration: underline; width: fit-content; }
details.fq-action > summary::after { display: none; }
details.fq-action[open] > summary { margin-bottom: .5rem; }
.fq-key { flex-wrap: wrap; }
.fq-close { margin: 0; }
.fq-close label { margin-bottom: .4rem; }
.fq-close textarea { width: 100%; min-height: 3.5rem; margin: .25rem 0 0; resize: vertical; }
.fq-close button { width: auto; margin: 0; }
.fq-change p { margin: .5rem 0 .25rem; }

/* BUAT-60: where a development bug came from. From the app: filled in the app's button blue; raised in Jira: outlined black. */
mark.origin-app, mark.origin-jira { padding: 0 .4rem; border-radius: .3rem; font-size: .85rem; white-space: nowrap; }
mark.origin-app { background: var(--pico-primary-background); color: #fff; }
mark.origin-jira { background: #fff; color: #000; border: 1px solid #000; }

/* BUAT-67: the Status dropdown in the Assign list. */
.status-form { display: flex; align-items: center; gap: .5rem; margin: 0; }
.status-form select { margin: 0; width: auto; padding-top: .3rem; padding-bottom: .3rem; font-size: .9rem; }
.status-form button { margin: 0; width: auto; padding: .3rem .7rem; font-size: .9rem; }
.status-form button[hidden] { display: none; }
.status-msg { color: #000; font-weight: 600; }