.
Both share the same summary-row layout so the list reads evenly. */
.cl-entry > summary, .cl-flat {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .15em .7em;
padding: .7em .9em;
}
.cl-entry > summary { cursor: pointer; list-style: none; color: var(--text); }
.cl-entry > summary::-webkit-details-marker { display: none; }
.cl-entry > summary::before {
content: "▸";
color: var(--muted);
display: inline-block;
transition: transform .12s ease;
}
.cl-entry[open] > summary::before { transform: rotate(90deg); }
.cl-flat::before { content: "·"; color: var(--border); }
.cl-ver { font-weight: 600; color: var(--accent); }
.cl-date { white-space: nowrap; }
.cl-desc { flex: 1 1 100%; } /* own line on phones */
@media (min-width: 620px) { .cl-desc { flex: 1 1 auto; } }
.cl-body { padding: .1em .9em 1em 1.9em; border-top: 1px solid var(--border); }
.cl-section { margin-top: .9em; }
.cl-section-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .05em;
margin: 0 0 .25em;
}
.cl-added { color: var(--good); }
.cl-changed { color: var(--accent); }
.cl-fixed { color: var(--warn); }
.cl-body ul { margin: .2em 0; padding-left: 1.2em; }
.cl-body li { margin: .3em 0; }
/* ─── v2.19.1 — Triage board ──────────────────────────────────────────── */
.nowrap { white-space: nowrap; }
/* Dashboard "needs attention" banner — a full-width amber call to action
linking to /admin/triage; only rendered when the count is non-zero. */
.attention-banner {
display: block;
margin: .5em 0 1em;
padding: .8em 1em;
background: #fffbeb;
border: 1px solid var(--warn);
border-left: 4px solid var(--warn);
border-radius: 6px;
color: var(--warn);
font-weight: 600;
text-decoration: none;
}
.attention-banner:hover { background: #fff4d6; }
/* v2.40.1 — Station recent-jobs row tints driven by QA aggregate.
Red = failure with no replacement; yellow = respawn in flight;
green = Ready-to-Ship; blue = still awaiting QA.
v2.50.16 — alpha bumped (.14 → .28) + inset-bar width 4 → 8 px
so a row's status is unmissable from across the print shop.
Operator station is the kiosk surface — distance readability
wins over typographic restraint. */
.op-jobs tr.qa-failed {
background: rgba(160, 32, 32, .28);
box-shadow: inset 8px 0 0 #a02020;
}
.op-jobs tr.qa-pending_respawn {
background: rgba(183, 121, 31, .28);
box-shadow: inset 8px 0 0 #b7791f;
}
.op-jobs tr.qa-passed {
background: rgba(45, 143, 77, .26);
box-shadow: inset 8px 0 0 #2d8f4d;
}
.op-jobs tr.qa-pending {
background: rgba(28, 74, 138, .24);
box-shadow: inset 8px 0 0 #1c4a8a;
}
/* ─────────────────────────────────────────────────────────────────
v2.39.0 — QA active-agent banner + site-wide colour accent.
`--qa-agent-color` is set on by qa_base.html when there's
a logged-in agent. Everything below keys off that variable so the
"this is YOUR session" colour cue propagates across the QA UI.
Designed for the 2K touchscreens in Eric's shop (2560×1440) —
targets are big, type is generous, contrast is high.
─────────────────────────────────────────────────────────────── */
.qa-agent-banner {
/* The whole bar IS the swatch — no separate dot needed.
Background colour comes from the inline style on the element
so each agent gets their own. Text auto-contrasts white. */
color: #fff;
width: 100%;
padding: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
/* Don't take the click out of the page — the inner
is the
only interactive bit. */
user-select: none;
}
.qa-agent-banner-inner {
display: flex; align-items: center; justify-content: space-between;
gap: 1.5em;
max-width: 2400px; margin: 0 auto;
padding: 1.1em 1.5em;
}
.qa-agent-banner-label {
font-size: 13px; letter-spacing: .15em; text-transform: uppercase;
opacity: .85; font-weight: 600;
/* v2.51.21 — outline for readability on any --qa-agent-color. */
text-shadow:
-1px -1px 0 rgba(0,0,0,.6), 1px -1px 0 rgba(0,0,0,.6),
-1px 1px 0 rgba(0,0,0,.6), 1px 1px 0 rgba(0,0,0,.6);
}
.qa-agent-banner-name {
display: inline-flex; align-items: center; gap: .75em;
color: #fff; text-decoration: none;
font-weight: 800;
/* v2.51.21 — outline for readability on any --qa-agent-color. */
text-shadow:
-1px -1px 0 #000, 1px -1px 0 #000,
-1px 1px 0 #000, 1px 1px 0 #000,
0 2px 4px rgba(0, 0, 0, .35);
/* The fullname size is the visual anchor for the banner; the
initials chip is a complementary, smaller token. */
flex: 1;
justify-content: center;
}
.qa-agent-banner-initials {
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .22);
border: 2px solid rgba(255, 255, 255, .55);
border-radius: 999px;
width: 56px; height: 56px;
font-size: 22px; font-weight: 900;
text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.qa-agent-banner-fullname {
font-size: 30px;
text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.qa-agent-banner-signout-form { margin: 0; }
.qa-agent-banner-signout {
background: rgba(0, 0, 0, .28);
color: #fff;
border: 2px solid rgba(255, 255, 255, .55);
border-radius: 8px;
padding: .65em 1.1em;
font-size: 16px; font-weight: 600;
cursor: pointer;
min-height: 56px; min-width: 110px;
}
.qa-agent-banner-signout:active { background: rgba(0, 0, 0, .42); }
/* QA pages: site-wide accent driven by --qa-agent-color. Keeps
the UI looking neutral until a session is active, then warms it
up with the current agent's colour. */
body.qa-signed-in {
/* v2.51.26 — Soft tinted background so the page reads as "this
is the active agent's session". Tint over var(--pw-bg) so it
theme-flips correctly (was hardcoded #fff which forced a
light bg even in dark mode → made the QA pages an island of
white inside a dark admin chrome). */
background:
linear-gradient(180deg,
color-mix(in srgb, var(--qa-agent-color) 6%, var(--pw-bg)) 0%,
var(--pw-bg) 220px);
}
/* Visible focus + tap ring in the agent's colour — for QA action
buttons (PASS / FAIL / MISSING). The buttons themselves keep
their semantic colour (green / red / amber); the ring is the
"this is YOUR tap" cue. */
body.qa-signed-in button:focus-visible,
body.qa-signed-in a:focus-visible,
body.qa-signed-in input:focus-visible,
body.qa-signed-in select:focus-visible,
body.qa-signed-in textarea:focus-visible {
outline: 3px solid var(--qa-agent-color);
outline-offset: 2px;
}
/* The QA pill on the mode switcher gets a coloured underline when
a session is live (subtle — doesn't fight the dark nav). */
body.qa-signed-in .mode-switcher .mode-active {
box-shadow: inset 0 -3px 0 0 var(--qa-agent-color);
}
/* ─────────────────────────────────────────────────────────────────
v2.39.0 — Station team-picker as a button grid (replaces ).
Renders alongside the operator-header. Each button is a wide,
coloured target sized for fat-finger taps on a 2K display.
─────────────────────────────────────────────────────────────── */
/* v2.39.1 — Horizontal-row layout. The picker takes its own row
(see `.operator-header` rule that wraps `.member-picker` to full
width), so buttons spread across the full width instead of
stacking in a 140px-wide vertical strip inside the header.
flex-wrap lets the row break onto a second line only when the
names actually run out of horizontal room. `flex: 1 1 auto` lets
the grid claim the remaining horizontal space inside
`.member-picker` after the prompt label and Clear button take
theirs. */
.team-picker-buttons {
display: flex;
flex-wrap: wrap;
gap: .55em;
margin: 0;
align-items: stretch;
justify-content: flex-start;
flex: 1 1 auto;
min-width: 0;
}
.team-picker-btn {
display: flex; align-items: center; justify-content: center;
gap: .45em;
/* Each button is auto-sized to its content but caps at a
comfortable touch target. flex: 1 1 auto makes them share
leftover width evenly; min-width keeps the smallest button
finger-tappable. */
flex: 1 1 auto;
min-width: 130px;
max-width: 240px;
min-height: 60px;
padding: .65em 1em;
border: 3px solid transparent;
border-radius: 10px;
background: var(--member-color, #6b7280);
color: #fff;
font-size: 18px; font-weight: 700;
cursor: pointer;
/* v2.51.21 — strong 4-direction text outline so the name reads
on any --member-color, including pale yellows + lime greens
where a soft shadow still leaves white text invisible. */
text-shadow:
-1px -1px 0 #000, 1px -1px 0 #000,
-1px 1px 0 #000, 1px 1px 0 #000,
0 2px 4px rgba(0, 0, 0, .45);
/* Slight outer ring so adjacent same-colour buttons stay distinct */
box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset;
transition: transform .05s ease, border-color .1s ease;
user-select: none;
}
.team-picker-btn:active { transform: scale(.97); }
.team-picker-btn.is-active {
/* Selected: white ring + a soft check chip in the corner. */
border-color: #fff;
box-shadow: 0 0 0 3px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .25) inset;
}
.team-picker-btn.is-active::after {
content: "✓";
margin-left: .25em;
font-weight: 900;
}
.team-picker-clear-btn {
background: #2d3138;
color: #f7f7f8;
border: 2px solid #4a4f57;
border-radius: 10px;
min-height: 64px;
padding: .65em 1em;
font-size: 16px; font-weight: 600;
cursor: pointer;
}
.team-picker-clear-btn:active { background: #1f2328; }
/* ─────────────────────────────────────────────────────────────────
v2.39.0 — 2K touchscreen (≥ 2560 px wide) scale-up. Eric's shop
monitors are 2K; on those, push the agent banner taller, the
fonts bigger, the buttons fatter. Smaller screens keep the
defaults above.
─────────────────────────────────────────────────────────────── */
/* v2.50.16 — Operator station 1080p kiosk pass. Previously the
only kiosk-size scale-up rule was @media (min-width: 2200px)
targeting the 2K shop monitors. The 1920×1080 wall-mount TVs
fell into a gap where everything stayed at 1080p default sizes,
leaving team picker names unreadable from across the floor.
This 1920px breakpoint splits the difference: bigger than
desktop / phone defaults, smaller than the 2200px 2K mode. */
@media (min-width: 1920px) {
.team-picker-btn {
min-height: 72px;
font-size: 20px;
padding: .75em 1em;
min-width: 150px;
}
.qa-agent-banner-fullname { font-size: 32px; }
.qa-agent-banner-label { font-size: 14px; }
}
@media (min-width: 2200px) {
.qa-agent-banner-inner { padding: 1.6em 2.5em; }
.qa-agent-banner-fullname { font-size: 42px; }
.qa-agent-banner-initials {
width: 80px; height: 80px; font-size: 30px; border-width: 3px;
}
.qa-agent-banner-label { font-size: 16px; }
.qa-agent-banner-signout {
font-size: 20px; padding: .9em 1.5em; min-height: 72px;
}
.team-picker-btn {
min-height: 84px;
font-size: 22px;
padding: .85em 1.1em;
min-width: 160px;
max-width: 280px;
}
.team-picker-buttons {
gap: .75em;
}
.team-picker-clear-btn {
min-height: 84px; font-size: 20px;
}
}
/* v2.51.23 — Global search dropdown result rows. Styles live here
instead of inline in global_search.js so they respect the theme
tokens (--pw-text, --pw-text-muted, --pw-border, --pw-bg). The
dropdown's outer wrapper (#global-search-dropdown) already uses
var(--pw-surface) bg via the inline style in base.html. */
#global-search-dropdown .search-empty {
padding: 8px 12px;
color: var(--pw-text-muted);
font-size: 13px;
}
#global-search-dropdown .search-group-header {
padding: 6px 12px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--pw-text-muted);
background: color-mix(in srgb, var(--pw-text) 6%, transparent);
border-top: 1px solid var(--pw-border);
font-weight: 600;
}
#global-search-dropdown .search-result {
display: block;
padding: 8px 12px;
color: var(--pw-text);
text-decoration: none;
border-top: 1px solid var(--pw-border);
font-size: 13px;
}
#global-search-dropdown .search-result:hover,
#global-search-dropdown .search-result.is-highlighted {
background: color-mix(in srgb, var(--pw-primary) 12%, transparent);
color: var(--pw-text);
}
#global-search-dropdown .search-badge {
color: var(--pw-text-faint);
font-size: 11px;
margin-left: 4px;
}