/* The site's pages. Tokens match baccat/templates/report.html so a report
   and the page around it read as one product. */
:root {
  --paper: #ffffff;
  --panel: #f3f5f8;
  --ink: #2b2a2b;
  --muted: #5f6b78;
  --rule: #d9dfe6;
  --brand: #0f4c81;
  --brand-ink: #0b3a63;
  --error: #b42318;
  --ok: #2f7d4f;
  --pending: #f5c518;
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { font: 16px/1.5 var(--font); color: var(--ink); background: var(--panel); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--brand); }
a:hover { color: var(--brand-ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.topbar { background: var(--paper); border-bottom: 1px solid var(--rule); }
.topbar .inner { max-width: 60rem; margin: 0 auto; padding: .6rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.wordmark { color: var(--brand); text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em;
            display: inline-flex; align-items: center; gap: .55rem; }
.wordmark img { display: block; height: 2.25rem; width: auto; }
.topbar nav { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
              gap: .5rem 1.2rem; font-size: .95rem; white-space: nowrap; }
.topbar nav a { color: var(--muted); text-decoration: none; }
.topbar nav a:hover { color: var(--brand-ink); }
/* "Get the app!" beside the name (2026.10.61): BacCat Desktop is for Windows, so not on a phone's width */
.getapp { color: var(--brand); font-weight: 600; text-decoration: none; white-space: nowrap; }
.getapp:hover { color: var(--brand-ink); text-decoration: underline; }
/* 2026.11.3: signed in, it is an outline button beside "Upload a capture" instead (the list, the trial's welcome) */
.buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
@media (max-width: 40rem) { .getapp, .getapp-button { display: none; } }
.desktop-note { margin-top: 1.5rem; color: var(--muted); }
code.sha { word-break: break-all; }   /* the download page's 64 characters, in a narrow column */

main { max-width: 60rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; width: 100%; }
main.narrow { max-width: 30rem; }
h1 { font-size: 1.6rem; font-weight: 600; margin: 0 0 1rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 2rem 0 .6rem; }
p, li { max-width: 68ch; }
code { background: var(--paper); border: 1px solid var(--rule); padding: 0 .3em; border-radius: 3px; font-size: .92em; }

.card { background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 1.5rem; }
.messages { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.messages li { background: var(--paper); border-left: 4px solid var(--brand); padding: .6rem 1rem; margin-bottom: .5rem; }
.messages li.error { border-left-color: var(--error); }
.messages li.alert, p.alert { color: var(--error); }
.messages li.alert { border-left-color: var(--error); font-weight: 600; }
.messages li.success { border-left-color: var(--ok); }
.messages li.warning { border-left-color: #b7791f; }
.pending.notice { margin: 0 0 1rem; padding: .6rem 1.25rem; }
.pending.notice p { margin: .3rem 0; }
.note { color: var(--muted); font-size: .92rem; }
.pending { border-left: 4px solid #b7791f; background: var(--paper); padding: 1rem 1.25rem; }

/* forms: allauth renders <p><label/><input/><span help/></p> and Django's errorlist */
form p { margin: 0 0 1rem; display: flex; flex-direction: column; gap: .3rem; }
form label { font-weight: 600; font-size: .95rem; }
form p > span ul { margin: .2rem 0 0; padding-left: 1.2rem; }
form p > span { color: var(--muted); font-size: .88rem; order: 3; }
input[type=text], input[type=search], input[type=date], input[type=email], input[type=password], textarea, select {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid #b9c2cc; border-radius: 4px; padding: .5rem .6rem; width: 100%;
}
input:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,76,129,.15); outline: none; }
input[type=checkbox] { width: auto; margin-right: .5rem; }
form p:has(input[type=checkbox]) { flex-direction: row; align-items: flex-start; gap: .6rem; }
form p:has(input[type=checkbox]) label { font-weight: 400; order: 2; }
form p:has(input[type=checkbox]) input { margin-top: .3rem; }
.errorlist { color: var(--error); list-style: none; padding: 0; margin: 0 0 .5rem; font-size: .92rem; }
button, .button { font: inherit; font-weight: 600; color: #fff; background: var(--brand); border: 0;
  border-radius: 4px; padding: .6rem 1.1rem; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .button:hover { background: var(--brand-ink); color: #fff; }
.button.secondary { background: var(--paper); color: var(--brand); border: 1px solid var(--rule); }
form + p, .actions { margin-top: 1rem; }

table { border-collapse: collapse; width: 100%; background: var(--paper); border: 1px solid var(--rule); }
th, td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--rule); font-size: .95rem; }
th { color: var(--ink); font-weight: 700; }
tr:last-child td { border-bottom: 0; }

/* jobs */
.row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.row h1 { margin: 0; }
.status-queued { color: var(--muted); }
.status-running { color: var(--brand); }
.status-failed { color: var(--error); }
.status-done, .status-ready { color: var(--ok); }
.card.status-failed { border-left: 4px solid var(--error); color: var(--ink); }
.card.status-done { border-left: 4px solid var(--ok); color: var(--ink); }
.card.status-running { border-left: 4px solid var(--brand); color: var(--ink); }
.card.status-queued { border-left: 4px solid var(--rule); color: var(--ink); }
/* what only Strong Technology staff see on a customer's page */
.card.staff { border: 1px dashed var(--brand); background: transparent; }
.card .button { margin: .25rem .5rem .75rem 0; }
table.facts { border: 0; background: transparent; width: auto; margin-top: .5rem; }
table.facts th { padding-left: 0; }
input[type=file] { font: inherit; }

/* 2026.09.1: the capture page's regenerate form, the filter fold, the footer */
form.inline { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin: 0 0 1rem; }
form.inline .button { margin: 0; }
details { margin: .5rem 0 1rem; }
details summary { cursor: pointer; color: var(--brand); }
pre.filter { background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: .75rem 1rem;
             font-size: .85rem; white-space: pre-wrap; word-break: break-word; max-width: 100%; }
.sitefoot { margin-top: auto; border-top: 1px solid var(--rule); background: var(--paper); }
.sitefoot .inner { max-width: 60rem; margin: 0 auto; padding: .7rem 1.25rem; display: flex; flex-wrap: wrap;
                   gap: .25rem 1.2rem; color: var(--muted); font-size: .85rem; }
.sitefoot a { color: var(--muted); }
/* the copyright and trademark line (2026.10.58): its own line, smaller */
.sitefoot .copyright { flex-basis: 100%; max-width: none; margin: 0; font-size: .75rem; }

/* a POST that reads as a link (Remove beside a report) */
button.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); text-decoration: underline; cursor: pointer; }
.button.danger { background: var(--error); border-color: var(--error); }
/* the previous report, while a new one is being made (status page) */
.button.pending { background: var(--pending); color: var(--ink); }
.button.pending:hover { background: #e0b100; color: var(--ink); }
td form.inline { display: inline; margin: 0; }

/* /releases/ */
section.release { border-top: 1px solid var(--rule); padding-top: .5rem; margin-top: 1.5rem; scroll-margin-top: 1rem; }
section.release h2 a { color: inherit; text-decoration: none; }
section.release:target h2 { color: var(--brand); }

/* 2026.09.9: the capture list's filters and pages */
form.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .9rem; margin: 0 0 1rem;
               background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: .75rem 1rem; }
form.filters label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; font-weight: 700; color: var(--ink); }
form.filters label.check { flex-direction: row; align-items: center; font-weight: 400; color: var(--ink); padding-bottom: .55rem; }
form.filters input, form.filters select { width: auto; padding: .35rem .5rem; font-size: .92rem; font-weight: 400; }   /* the label is bold; what is in the box is not */
/* 2026.09.16 r2, r4: the two upload dates are one group, so they wrap together and never part.
   No forced line break (r4: it left Status alone on a row); a select is capped so a long
   project name cannot take a row to itself. */
form.filters .dates { display: flex; gap: .5rem .9rem; }
form.filters select { max-width: 14rem; }
form.filters input[type=search] { min-width: 14rem; }
form.filters input[type=date] { min-width: 9.5rem; }
form.filters button, form.filters a.button { padding: .45rem .9rem; line-height: 1.5; font-size: 1rem; }
/* 2026.09.21 r6: Clear is a button beside Filter (was a link that sat higher than it); the outline style, as Filter is the action */
form.filters a.button { border: 1px solid var(--rule); padding: calc(.45rem - 1px) .9rem; }
p.pages { display: flex; gap: 1.2rem; margin: .5rem 0 1rem; }

/* 2026.09.10: the upload page's plan line follows the organisation drop-down */
.plan-lines.scripted .plan-line { display: none; }
.plan-lines.scripted .plan-line.current { display: block; }

/* 2026.09.12: description and project as text with an Edit fold; the projects page */
details.edit { margin: .25rem 0 1.25rem; }
details.edit form { margin-top: .5rem; }
p.description { white-space: pre-wrap; }
tr.archived td { color: var(--muted); }

/* 2026.09.13: the organisation switcher; since 2026.11.4 the org menu's last part, "Switch to" */
details.topmenu .menu form.switcher { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .4rem .9rem; }
details.topmenu .menu form.switcher label { display: flex; align-items: center; gap: .5rem; font-weight: 400; font-size: .9rem; color: var(--muted); }
details.topmenu .menu form.switcher select { width: auto; max-width: 16rem; padding: .2rem .4rem; font-size: .9rem; }

/* 2026.09.14: the New project box is greyed unless "New project…" is chosen */
input:disabled { background: var(--paper); color: var(--muted); border-color: var(--rule); }

/* 2026.09.16: the top bar's menus, the org's and the account's (<details>, so they work with no script) */
details.topmenu { position: relative; margin: 0; }
details.topmenu summary { list-style: none; cursor: pointer; color: var(--ink); padding: .25rem .6rem; border: 1px solid var(--rule);
                           border-radius: 4px; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
details.topmenu summary::-webkit-details-marker { display: none; }
details.topmenu summary::after { content: " \25BE"; color: var(--muted); }
details.topmenu summary:hover, details.topmenu[open] summary { border-color: var(--muted); }
details.topmenu .menu { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 10; min-width: 13rem;
                         display: flex; flex-direction: column; padding: .35rem 0; white-space: nowrap;
                         background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 6px 18px rgba(43,42,43,.1); }
details.topmenu .menu a { padding: .4rem .9rem; color: var(--ink); text-decoration: none; }
details.topmenu .menu a:hover { background: var(--panel); color: var(--brand-ink); }
/* 2026.11.1: the org menu's entry for the page being shown: a bar of the brand's blue at its left edge, the name a shade heavier */
details.topmenu .menu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brand); font-weight: 600; color: var(--brand-ink); }
details.topmenu .menu .who { padding: .3rem .9rem .5rem; color: var(--muted); font-size: .85rem; border-bottom: 1px solid var(--rule); margin-bottom: .25rem; }
details.topmenu .menu hr { border: 0; border-top: 1px solid var(--rule); margin: .25rem 0; }

/* 2026.09.16: the list's "Rerun with newest BacCat", always on its own line under the version */
td.report { white-space: nowrap; }
#rerun { scroll-margin-top: 5rem; }      /* the list's link lands here with the version line above it in view */
td a.rerun { display: block; font-size: .8rem; margin-top: .15rem; }
/* 2026.10.57: the list's Action and its tick boxes. 2026.11.1 (his ask): the Action left the filter box for
   a bar over the table, the count and the pages on its left, the Action and its button to their right.
   The bar is the table's own header strip (the same white, the same rule, no gap), because what it does
   is done to those rows; once an Action is chosen a bar of colour at its left edge says the list is in
   that mode, the brand's blue, or red for Remove (the left-edge colour of the site's messages and cards). */
.listbar [hidden], th.pick [hidden] { display: none; }   /* .button's display would otherwise win over the attribute */
/* 2026.11.2 (his ask: nothing moves when you use it): two columns. The left, the count over the pages, is a
   fixed width, so the Action box starts at the same place whatever the count says; the button appears to the
   box's right, and Assign to project's boxes on the row under the two, from the box's left edge. The coloured
   edge is a shadow and the padding never changes, so choosing an Action moves nothing. */
.listbar { display: grid; grid-template-columns: 17rem minmax(0, 1fr); align-items: center; gap: .4rem 1rem;
           background: var(--paper); border: 1px solid var(--rule); border-bottom: 0; border-radius: 6px 6px 0 0;
           padding: .5rem .75rem .5rem 1rem; margin: 0; }
.listbar.alone { border-bottom: 1px solid var(--rule); border-radius: 6px; margin-bottom: 1rem; }   /* no table under it */
.listbar.acting { box-shadow: inset 4px 0 0 var(--brand); }
.listbar.acting.danger { box-shadow: inset 4px 0 0 var(--error); }
.listbar .count { grid-column: 1; grid-row: 1; margin: 0; }
.listbar .act { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.listbar .pages-cell { grid-column: 1; grid-row: 2; }
.listbar .act-more { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.listbar p.pages { margin: 0; gap: .8rem; font-size: .92rem; }
/* With an Action chosen the bar is inside the POST form, where the allauth rules above (form p, form p > span)
   would stack the pages in a column and move the spans after the links; undo both. */
.listbar p.pages { flex-direction: row; }
.listbar p.pages > span { order: 0; }
.listbar label { display: flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; color: var(--ink); }
.listbar input[type=text], .listbar select { width: auto; padding: .3rem .5rem; font-size: .92rem; font-weight: 400; max-width: 16rem; }
.listbar .button { margin: 0; padding: .35rem .9rem; font-size: .92rem; }
.listbar .button.secondary { padding: calc(.35rem - 1px) .9rem; }
/* A phone's width: one column, the Action under the count, the pages under it, the project boxes last. */
@media (max-width: 40rem) {
  .listbar { grid-template-columns: minmax(0, 1fr); }
  .listbar .count, .listbar .act, .listbar .pages-cell, .listbar .act-more { grid-column: 1; grid-row: auto; }
}
th.pick, td.pick { width: 1.5rem; padding-right: 0; }
th.pick input, td.pick input { width: auto; margin: 0; }