/* scva -- site-wide stylesheet. One hand-written stylesheet, no framework. Structure: 1. Design tokens (colour, type, space) -- light theme, then a dark override keyed on . static/js/theme.js sets that attribute before first paint from the header toggle's stored choice, or from prefers-color-scheme when there is none; nothing here reads the media query directly, so the stylesheet has one notion of "dark" and the script owns the decision. 2. Reset / base element styles. 3. Layout: header, nav, main. 4. Components: cards, stat rows, forms, buttons, placeholders. 5. Responsive: the nav wraps at tablet width rather than breaking. Tokens worth knowing about for later screens: --color-pass / --color-fail / --color-review are reserved for verdict badges -- the review screen will want them next to a video, so they're chosen to hold up against dark surfaces, not just white. --focus-ring is the one focus style for the whole app; the review screen is keyboard-driven end to end, so this is deliberately visible rather than the browser default. */ :root { /* Form controls and scrollbars follow the same switch as the tokens: light until the script says otherwise, dark when it does. */ color-scheme: light; /* Type scale -- 1.2 ratio (minor third), 16px base. */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --text-xs: 0.8rem; --text-sm: 0.9rem; --text-base: 1rem; --text-md: 1.2rem; --text-lg: 1.44rem; --text-xl: 1.9rem; /* Space scale -- 4px base. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --radius: 8px; --border-width: 1px; --max-width: 72rem; /* Palette -- light. */ --color-bg: #f7f7f5; --color-surface: #ffffff; --color-surface-raised: #ffffff; /* The ground for something recessed into a surface -- a disabled field, a plain tag. Opaque, because the page carries a tiled background image (body::before) that shows straight through a translucent grey and makes the control look like a hole. */ --color-surface-sunken: #efede7; --color-border: #dcdad4; /* A step darker than --color-border, for a box that has to out-weigh the rules drawn inside it. */ --color-result-border: #b9b5a9; --color-text: #1c1b19; --color-text-muted: #6b6860; --color-accent: #1f5c4d; /* The rule tag. Pale yellow rather than the accent green it started as: the accent is what every button on the site is painted with, so a green chip beside them read as one more control to press. Yellow is the one warm hue not already spoken for -- amber is awaiting-review, orange is skipped, and both of those are saturated fills on the progress bar rather than a pale tint behind small text. */ --color-rule-bg: #faf4d9; --color-rule-border: #ddcd93; --color-rule-text: #5c4708; --color-accent-contrast: #ffffff; /* The word clouds on Reports cycle through these, by rank. Five hues in the palette's register -- the accent green and the rule chip's amber, then a slate blue, a plum and a teal -- none of them a verdict colour, because a red "discount" would say the word failed. Decoration, not identity: the count beside each term is the fact (Tim, 2026-09-15: one hue faded by count read as one colour). */ --color-cloud-1: #1f5c4d; --color-cloud-2: #8a5a0e; --color-cloud-3: #2f5d8a; --color-cloud-4: #7a3e6b; --color-cloud-5: #1f6a7a; /* The ground a job card is drawn on, on the screens that list jobs -- the jobs list's rows and the review queue's per-job blocks (Tim, 2026-09-05). White, as the rest of the site's cards are, and told apart from the page by a border tinted towards the accent and a two-layer shadow -- a tight one that seats the card and a wide soft one that lifts it. The hover deepens both rather than washing the ground: the card does not change colour, it comes forward. */ --color-job-card: #ffffff; --color-job-card-border: rgba(20, 45, 38, 0.14); --color-job-card-border-hover: rgba(20, 45, 38, 0.24); --shadow-job-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 3px 10px rgba(0, 0, 0, 0.035); --shadow-job-card-hover: 0 2px 4px rgba(0, 0, 0, 0.07), 0 6px 16px rgba(0, 0, 0, 0.05); --color-header-bg: #14140f; --color-header-text: #f2f1ec; --color-header-text-muted: #b9b6ab; /* The decision card's ground, tinted by what was decided. Pale enough that the verdict word stays the loudest thing on the card -- the tint says which way it went before the word is read, it does not replace it. */ --decision-pass: #eef6f1; --decision-fail: #fbeeed; --decision-review: #f6f0e3; --color-pass: #1f7a4d; --color-fail: #a3312b; --color-review: #9a6a12; --focus-ring: #2f6fed; --shadow-card: 0 1px 2px rgba(20, 20, 15, 0.06), 0 1px 1px rgba(20, 20, 15, 0.04); } :root[data-theme="dark"] { color-scheme: dark; /* The page sits a step above the cards here, the reverse of the light theme: at #161613 under #1f1f1b cards the two bled into one dark field. Cards are the darker panels on a mid-dark page. */ --color-bg: #24241f; --color-surface: #181815; --color-surface-raised: #262620; --color-surface-sunken: #2a2925; /* No tint in the dark: the light values are near-whites and would be a hole in the page here. */ --color-job-card: #181815; --color-job-card-border: #3a392f; --color-job-card-border-hover: #59564a; --shadow-job-card: var(--shadow-card); --shadow-job-card-hover: 0 1px 4px rgba(0, 0, 0, 0.4); --color-border: #3a392f; --color-result-border: #59564a; --color-text: #ecebe4; --color-text-muted: #a6a397; --color-accent: #5fbf9d; --color-rule-bg: #302b18; --color-rule-border: #564e2c; --color-rule-text: #e2cf8c; --color-accent-contrast: #0c1512; --color-cloud-1: #5fbf9d; --color-cloud-2: #d9b45e; --color-cloud-3: #7fb0e0; --color-cloud-4: #c98bc0; --color-cloud-5: #62c0d0; --color-header-bg: #0d0d0b; --color-header-text: #f2f1ec; --color-header-text-muted: #918e82; --decision-pass: #16241f; --decision-fail: #2a1b1a; --decision-review: #262015; --color-pass: #4fbf85; --color-fail: #e08079; --color-review: #e0b155; --focus-ring: #7fa8ff; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); } /* -- Reset / base ------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; /* Reserve the scrollbar's width whether or not this page needs one. Without it every navigation between a page that scrolls and one that does not shifts the whole layout sideways by the scrollbar's width -- /status/ scrolls, /jobs/start/ does not, and moving between them jumped the header and the page with it. Not visible in headless Chromium, which draws overlay scrollbars that take no space; it is a desktop-browser fault, which is where it was reported from. */ scrollbar-gutter: stable; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; background: var(--color-bg); color: var(--color-text); } /* Social-media icon tile behind every page. A pseudo-element rather than a background on body so the image can be faded with opacity instead of pre-baking the transparency into the PNG -- the strength is one number here. Sits above --color-bg and below all content; cards and surfaces paint over it. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url("../img/bg-tile.png") repeat; background-size: 420px; opacity: 0.05; pointer-events: none; } /* The tile's icons are near-black; on the dark ground they would vanish. Invert them to faint light lines instead. */ [data-theme="dark"] body::before { filter: invert(1); opacity: 0.06; } h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--space-3); } h1 { font-size: var(--text-xl); } h2 { font-size: var(--text-md); } h3 { font-size: var(--text-base); font-weight: 600; } p { margin: 0 0 var(--space-4); } a { color: var(--color-accent); } /* One focus style for the whole app, established early because the keyboard-driven review screen depends on it. Uses :focus-visible so a mouse click doesn't leave a ring behind, but a Tab press always does. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; } .skip-link { position: absolute; left: -999px; top: auto; background: var(--color-accent); color: var(--color-accent-contrast); padding: var(--space-2) var(--space-4); z-index: 100; border-radius: 0 0 var(--radius) 0; } .skip-link:focus { left: 0; top: 0; } /* -- Header / nav -------------------------------------------------------- */ .site-header { background: var(--color-header-bg); color: var(--color-header-text); padding: var(--space-3) var(--space-5); } /* The row's gap and the nav links' side padding were both a step larger until the theme toggle arrived (TASK-315). Measured at the 72rem container with the admin nav, the role pill and the Setup menu, the row had 9px to spare; a 28px button wrapped onto a line of its own on every desktop. One step down on each buys ~90px and keeps the header a single row with room for a five-digit build number. */ .site-header__row { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .site-brand { font-size: var(--text-md); font-weight: 700; letter-spacing: 0.02em; color: var(--color-header-text); text-decoration: none; margin-right: auto; display: flex; align-items: center; gap: var(--space-2); } /* The logo is a square tile; height-matched to the wordmark's line so the header row keeps its height. */ .site-brand__logo { width: 1.75rem; height: 1.75rem; display: block; flex: none; } .site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; } .site-nav a, .site-nav__group > summary { display: inline-block; color: var(--color-header-text-muted); text-decoration: none; padding: var(--space-2); border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600; } .site-nav a:hover, .site-nav__group > summary:hover, .site-nav__group[open] > summary { color: var(--color-header-text); background: rgba(255, 255, 255, 0.08); } .site-nav a[aria-current="page"], .site-nav__group > summary[aria-current="page"] { color: var(--color-header-bg); background: var(--color-header-text); } /* The Setup menu. `

` because the browser already does disclosure, keyboard and screen-reader announcement -- see the comment in base.html. Positioned absolutely over the page rather than pushing the header taller, which would move every screen down when it opens. The summary's look is folded into the `.site-nav a` / `.site-nav a:hover` rules above rather than repeated here, so a later change to how nav links look keeps applying to it. What is left below is only what a summary needs beyond a link: a pointer cursor, no list marker, and the browser's own disclosure triangle suppressed. */ .site-nav__group { position: relative; } .site-nav__group > summary { cursor: pointer; list-style: none; } .site-nav__group > summary::-webkit-details-marker { display: none; } /* `.site-nav ul` (above) already lays out the top-level row at the same specificity as a bare `.site-nav__group > ul` would have, so this adds the `.site-nav` ancestor class to outrank it deliberately rather than by accident of which rule is declared last. */ .site-nav .site-nav__group > ul { position: absolute; z-index: 20; top: 100%; left: 0; display: block; min-width: 12rem; margin-top: var(--space-1); padding: var(--space-2); background: var(--color-header-bg); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } .site-nav__group > ul > li { display: block; } .site-nav__group > ul a { display: block; } @media (max-width: 900px) { /* The nav already wraps at this width rather than collapsing, so an overlay would cover the page content underneath it. Inline here. Same reasoning as the base rule above: the `.site-nav` ancestor class keeps this pinned above `.site-nav ul`'s own max-width: 900px rule further down this stylesheet, regardless of which is declared first. */ .site-nav .site-nav__group > ul { position: static; min-width: 0; box-shadow: none; padding: 0 0 0 var(--space-3); } } .site-account { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); margin-left: auto; } .site-account__who { color: var(--color-header-text); display: flex; align-items: baseline; gap: var(--space-2); } .site-account__role { font-size: var(--text-xs); color: var(--color-header-text-muted); border: var(--border-width) solid var(--color-header-text-muted); border-radius: 999px; padding: 0 var(--space-2); text-transform: uppercase; letter-spacing: 0.04em; } a.site-account__who { text-decoration: underline; } /* Which build is running. Chrome, not content: the same muted treatment as the role pill it sits beside, so it reads as a footnote to the header rather than an eighth navigation item. Tabular figures stop the row shifting sideways as the build number gains a digit. The header row has ~44px of slack with the admin nav, which is why this shows the short form and puts `build 87 · a3f9c21` in the title. The negative margin halves the row's 16px gap for this one item, which is what buys room for a five-digit build number. It also reads better: the build belongs with the account block, not floating apart from it. */ .site-version { margin-left: calc(var(--space-2) - var(--space-4)); font-size: var(--text-xs); color: var(--color-header-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Light or dark. An icon button beside the version mark, drawn from the same muted header colour so it reads as chrome rather than as a navigation item. It carries both icons and shows the one for the mode a press would switch *to* -- the sun in the dark, the moon in the light -- which is also what its label says; theme.js writes that label. The pair is chosen by the same attribute the tokens key on, so the icon can never disagree with the page. */ .theme-toggle { /* Same halved gap as the version mark, for the same reason: it is chrome, and belongs with the account block. */ margin-left: calc(var(--space-2) - var(--space-4)); display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: none; border-radius: var(--radius); background: none; color: var(--color-header-text-muted); cursor: pointer; flex: none; } .theme-toggle:hover { color: var(--color-header-text); background: rgba(255, 255, 255, 0.08); } .theme-toggle svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle__sun { display: none; } [data-theme="dark"] .theme-toggle__sun { display: block; } [data-theme="dark"] .theme-toggle__moon { display: none; } .link-button { background: none; border: none; color: var(--color-header-text-muted); font: inherit; font-size: var(--text-sm); font-weight: 600; padding: 0; cursor: pointer; text-decoration: underline; } .link-button:hover { color: var(--color-header-text); } /* -- Main layout --------------------------------------------------------- */ .site-main { max-width: var(--max-width); margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-7); } .page-header { margin-bottom: var(--space-5); } .page-header h1 { margin-bottom: 0; } /* -- The job screen's heading, which is also its rename ------------------ One row: the

holding the name and the icon that opens it for editing, then the owner mark beside it. Editing swaps the whole row for a form of the same shape -- the field is inside an

of its own -- so opening it moves nothing on the page but the box that appears around the name. / .job-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-3); } / How you refer to a job out loud, not what you read the heading for -- the same rule as .job-rownumber and .job-cardnumber (TASK-356). / .job-titlenumber { font-variant-numeric: tabular-nums; font-weight: 400; color: var(--color-text-muted); margin-right: var(--space-1); } / Bare, and muted until it is wanted: the eye is here for the name, and a filled accent button beside a 2rem heading reads as the loudest thing on the screen. Overrides the site's default button fill. / .job-titleedit { background: none; border: none; padding: 0; margin-left: var(--space-2); line-height: 0; vertical-align: middle; color: var(--color-text-muted); border-radius: var(--radius); } .job-titleedit:hover { color: var(--color-accent); filter: none; } / The field takes the rest of the row, and the heading's own type. / .job-title--editing h1 { flex: 1 1 24rem; min-width: 0; } .job-titleinput { font: inherit; width: 100%; padding: var(--space-1) var(--space-2); border: var(--border-width) solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); } .job-titleactions { display: inline-flex; gap: var(--space-2); } / What the form refused, beside the box it refused: the heading has no room above it for a message, and the page's own message strip is for what happened, not for a field that is still open. / .job-titleerror { font-size: var(--text-sm); font-weight: 400; color: var(--color-fail); } / 60rem, not the 48rem reading measure below: New Job's is the one lede long enough to wrap, and 48rem broke it mid-sentence. Every other page's lede is short enough that the wider cap changes nothing. / .lede { font-size: var(--text-md); color: var(--color-text-muted); max-width: 60rem; } / -- What just happened --------------------------------------------------- The bar templates/_messages.html renders, once, above every page's content. It is a whole sentence rather than a badge, so it takes the same 48rem reading measure as .placeholder below, rather than the card width. No new colours: the left edge and the tint are the verdict palette the rest of the app already reads -- pass for a success, fail for an error, review for a warning -- so "it worked" here is the same green as "it passed" there. Info stays neutral, because it is a statement of fact ("Nothing in this job stopped.") rather than an outcome. The edge is 4px on one side of an otherwise ordinary card border, so the colour is reinforcement and the words are the message -- nothing here depends on telling green from red. / .messages { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-2); max-width: 48rem; } .message { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-left-width: 4px; border-left-color: var(--color-text-muted); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--space-3) var(--space-4); } .message--success { background: var(--decision-pass); border-left-color: var(--color-pass); } .message--warning { background: var(--decision-review); border-left-color: var(--color-review); } .message--error { background: var(--decision-fail); border-left-color: var(--color-fail); } / -- Components ----------------------------------------------------------- / / htmx's own indicator rules, word for word what htmx 2.0.10 would write into a `