:root { /* Chrome */ --bg: #f5f1e8; --panel: #ffffff; --fg: #191919; --muted: #5a5a5a; --border: #d4cfc4; /* JWU brand */ --brand: #21438b; --brand-fg: #ffffff; --brand-dark: #1a3672; --accent-2: #e7c477; --accent-3: #dd3333; /* Workflow focus / link color (navy) */ --accent: #21438b; /* Overlay value colors — unchanged */ --green: #16a34a; --red: #dc2626; --yellow: #facc15; /* Type stacks */ --display: 'Big Shoulders Display', 'DM Sans', Impact, sans-serif; --body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace; /* Sticky-chrome offsets. Fallbacks only, for the moment before sticky.js has measured: it overwrites both in px on . */ --header-h: 3.6rem; --chrome-h: 6.9rem; } * { box-sizing: border-box; } /* The pages now declare a viewport, and iOS answers that by inflating text when a phone is turned to landscape — which would change the height of the bars sticky.js measures, under the rows already pinned to them. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } [hidden] { display: none !important; } body { margin: 0; font: 14px/1.45 var(--body); background: var(--bg); color: var(--fg); } h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: 0.01em; color: var(--brand); } body > header { /* Sticky on every page: the nav, the sign-out link and the presence chips are wanted wherever you have scrolled to. */ position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1.4rem; background: var(--brand); color: var(--brand-fg); border-bottom: 4px solid var(--accent-2); } .brand { font-family: var(--display); font-weight: 800; font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-fg); text-decoration: none; } body > header nav a { margin-left: 1.2rem; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95rem; color: var(--brand-fg); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: color 0.15s, border-color 0.15s; } body > header nav a:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); } main { padding: 1.4rem; max-width: 1280px; margin: auto; } .filters { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; } .filter { padding: 0.4rem 0.9rem; border-radius: 999px; background: white; border: 1px solid var(--brand); color: var(--brand); text-decoration: none; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; } .filter.active { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); } /* The count was --muted grey, but the .status-* rules below repaint the chip it sits on: grey on the needs-review red is 1.5:1 and on the draft navy 1.4:1 — effectively invisible. Inheriting the chip's own text colour gives each count its label's contrast (4.6:1 white on red, 9.4:1 white on navy, 5.6:1 navy on gold, 9.4:1 navy on the white "All" chip), and the lighter weight against the bold uppercase label is enough to keep it secondary. Dimming it with opacity instead is not an option: even 0.85 drops the red chip's count to 3.7:1. `.filter.active` sets its own colour, which the count now inherits too, so the override it used to need is gone. */ .filter .count { color: inherit; margin-left: 0.4rem; font-weight: 500; } table.cards { width: 100%; border-collapse: collapse; background: white; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; box-shadow: 0 1px 0 rgba(33, 67, 139, 0.04); } table.cards thead { background: var(--brand); color: var(--brand-fg); } table.cards thead th { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; } table.cards th, table.cards td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border); text-align: left; } table.cards tbody tr { cursor: pointer; } table.cards tbody tr:hover { background: #faf3df; } .thumb { width: 80px; height: 50px; object-fit: cover; border: 1px solid var(--border); } /* --- Review listing: chrome that stays put while the rows scroll ---------- Scoped to the listing's body class, so the pages that share this stylesheet (People, vetting, admin, the response detail) are untouched. */ body.sticky-chrome .filters { position: sticky; top: var(--header-h); z-index: 20; background: var(--bg); /* Was a margin: rows scrolling under the bar would show through the gap. */ margin-bottom: 0; padding-bottom: 1rem; } /* `overflow: hidden` here would make the table its own scrollport, and a sticky th sticks to its nearest scrollport — one that never scrolls. It is only there to clip the rounded corners, so drop it and round the corner cells themselves instead. */ body.sticky-chrome table.cards { overflow: visible; border-collapse: separate; border-spacing: 0; } body.sticky-chrome table.cards thead th { position: sticky; top: var(--chrome-h); z-index: 10; /* The brand fill lives on , which does not travel with a sticky cell — the cells need their own. */ background: var(--brand); } /* 3px, not the table's 4px: these curves sit one border-width inside it. */ body.sticky-chrome table.cards thead th:first-child { border-top-left-radius: 3px; } body.sticky-chrome table.cards thead th:last-child { border-top-right-radius: 3px; } body.sticky-chrome table.cards tbody tr:last-child td:first-child { border-bottom-left-radius: 3px; } body.sticky-chrome table.cards tbody tr:last-child td:last-child { border-bottom-right-radius: 3px; } /* Collapsed borders merged the last row's rule into the table's own; separate ones draw both, which reads as a doubled line. */ body.sticky-chrome table.cards tbody tr:last-child td { border-bottom: none; } .muted { color: var(--muted); } .small { font-size: 0.85rem; } .badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 3px; font-family: var(--display); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; } .status-needs_review { background: var(--accent-3); color: white; border: 1px solid #b21c1c; } .status-draft { background: var(--brand); color: var(--brand-fg); border: 1px solid #16306a; } .status-approved { background: var(--accent-2); color: var(--brand); border: 1px solid #c79b3a; } .flash { list-style: none; padding: 0; margin: 0.6rem 1.4rem; } .flash li { padding: 0.5rem 0.9rem; border-radius: 3px; margin-bottom: 0.3rem; } .flash-ok { background: #f8efd2; color: #5d4715; border-left: 4px solid var(--accent-2); } .flash-error { background: #fde7e7; color: #8a1818; border-left: 4px solid var(--accent-3); } .card-header { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; flex-wrap: wrap; } .card-header h1 { font-size: 1.5rem; margin: 0; } .detail { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } @media (max-width: 1000px) { .detail { grid-template-columns: 1fr; } } .images img.source-thumb { max-width: 280px; max-height: 200px; border: 1px solid var(--border); } .images img.overlay { width: 100%; max-width: 800px; border: 1px solid var(--border); } .images h2 { font-family: var(--display); font-weight: 700; font-size: 0.95rem; margin: 0.8rem 0 0.3rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .btn-primary, .btn-secondary { padding: 0.5rem 1rem; border-radius: 4px; border: 1px solid transparent; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .btn-primary { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); } .btn-primary:hover:not(:disabled) { background: var(--brand-dark); border-color: var(--brand-dark); } .btn-secondary { background: white; color: var(--brand); border-color: var(--brand); } .btn-secondary:hover:not(:disabled) { background: var(--accent-2); color: var(--brand); border-color: var(--accent-2); } /* Without these a disabled .btn-primary keeps its explicit brand background and :hover, so it looks fully live and silently swallows the click. */ .btn-primary:disabled, .btn-secondary:disabled { background: #ebe6da; color: var(--muted); border-color: var(--border); cursor: not-allowed; } /* --- Reprocess progress: the button is the progress bar ------------------ A reprocess runs from seconds to minutes, nearly all of it OCR, so the wait needs a measure rather than a spinner. The fill is a hard-stop gradient driven by --p, which costs no layout change and so cannot shift the label by a pixel as it advances. Navy on white and navy on gold both clear AA, so the label stays readable at every fill level — white on gold would not. Repeated for :hover because the button rules above use the `background` shorthand, which would blow the gradient away. */ .btn-progress, .btn-progress:hover:not(:disabled) { --p: 0; background: white; background-image: linear-gradient(to right, var(--accent-2) 0 calc(var(--p) * 100%), white calc(var(--p) * 100%) 100%); color: var(--brand); border-color: var(--brand); cursor: progress; /* The inherited 0.15s background transition fights a bar repainted several times a second; width is animated by the fill itself. */ transition: none; } /* Before the first plan payload lands there is nothing to measure yet. Say so with motion rather than by guessing at a number. */ .btn-progress.is-indeterminate, .btn-progress.is-indeterminate:hover:not(:disabled) { background-image: repeating-linear-gradient(115deg, var(--accent-2) 0 10px, white 10px 20px); animation: btn-progress-sweep 1.2s linear infinite; } @keyframes btn-progress-sweep { from { background-position: 0 0; } to { background-position: -40px 0; } } @media (prefers-reduced-motion: reduce) { .btn-progress.is-indeterminate, .btn-progress.is-indeterminate:hover:not(:disabled) { animation: none; } } .btn-progress.is-failed, .btn-progress.is-failed:hover:not(:disabled) { background: #fdecec; background-image: none; color: #9b1c1c; border-color: #f0b4b4; cursor: pointer; } #reprocess-status { font-style: italic; } #reprocess-status.is-error { font-style: normal; font-weight: 700; color: var(--accent-3); } .checkboxes { list-style: none; padding: 0; margin: 0; } .checkboxes li { border: 1px solid var(--border); border-radius: 4px; padding: 0.6rem; margin-bottom: 0.5rem; background: white; } .checkboxes li.needs-review { background: #fffae0; border-color: #f3d97a; } .cb-label { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; align-items: baseline; } .cb-id { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); } .cb-controls { margin-top: 0.4rem; display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; } .cb-controls label { font-size: 0.9rem; } .other { display: flex; flex-direction: column; gap: 0.4rem; } .other-crop { max-width: 100%; border: 1px solid var(--border); } .other textarea { width: 100%; font: inherit; padding: 0.4rem; } .actions { display: flex; gap: 0.6rem; margin-top: 1rem; } /* --- Interactive review (card detail v2) -------------------------------- */ .card-nav { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.8rem; padding: 0.5rem 0.2rem; border-bottom: 2px solid var(--brand); } .card-nav .card-id-block { flex: 1; min-width: 200px; } /* The same bar repeated at the end of the page: hang it off the content above rather than the content below. */ .card-nav-bottom { margin: 1.5rem 0 0; border-bottom: none; border-top: 2px solid var(--brand); } .card-nav .card-id-block h1 { font-size: 1.25rem; margin: 0; font-family: var(--display); font-weight: 800; color: var(--brand); } .card-nav .chev { font-size: 1.6rem; line-height: 1; padding: 0.2rem 0.6rem; border-radius: 4px; background: white; border: 1px solid var(--brand); text-decoration: none; color: var(--brand); user-select: none; transition: background 0.15s, color 0.15s; } .card-nav .chev:hover { background: var(--accent-2); color: var(--brand); } .card-nav .chev.disabled { color: var(--border); border-color: var(--border); pointer-events: none; } .view-toggle { display: inline-flex; border: 1px solid var(--brand); border-radius: 4px; overflow: hidden; } .vt-btn { padding: 0.4rem 0.9rem; background: white; border: none; cursor: pointer; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--brand); } .vt-btn.active { background: var(--brand); color: var(--brand-fg); } .vt-btn:disabled { color: var(--muted); cursor: not-allowed; background: #f5f1e8; } .reprocess-form { margin: 0; } /* The version picker sits in the id block, inline with the response counter, so it reads as "what this response IS" rather than as another action. */ .set-version-form { display: inline; margin: 0; } .set-version-form .js-version-select { font: inherit; color: inherit; padding: 0 0.15rem; border: 1px solid var(--border); border-radius: 3px; background: white; } .set-version-form button { font-size: 0.75rem; padding: 0.1rem 0.4rem; line-height: 1.4; } .version-override-tag { background: #fff3cd; border: 1px solid #e0c860; color: #7a5d00; border-radius: 10px; padding: 0 8px; font-size: 11px; font-weight: 600; } #save-indicator { font-style: italic; color: var(--muted); } #save-indicator.is-error { font-style: normal; font-weight: 700; color: var(--accent-3); } /* Why Approve is blocked, next to the button — the gate used to say so only in a title tooltip, which reads as "nothing happened". */ .blocker-chip { padding: 0.35rem 0.7rem; border-radius: 999px; background: #fdecec; color: #9b1c1c; border: 1px solid #f0b4b4; font-family: var(--display); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; user-select: none; white-space: nowrap; } .blocker-chip:hover { background: #f9d9d9; } .blocker-detail { margin: 0.6rem 0; padding: 0.7rem 0.9rem; border: 1px solid #f0b4b4; border-left: 4px solid var(--accent-3); border-radius: 4px; background: #fdecec; color: #7f1d1d; font-size: 0.9rem; } .blocker-detail .blocker-ids { font-family: var(--mono); font-size: 0.82rem; display: block; margin: 0.35rem 0 0.5rem; word-break: break-all; } .blocker-detail button { font: inherit; font-weight: 700; cursor: pointer; background: white; color: #7f1d1d; border: 1px solid #f0b4b4; border-radius: 4px; padding: 0.25rem 0.6rem; } /* Momentary target highlight after jumping to a blocker. */ @keyframes blocker-flash { from { box-shadow: 0 0 0 3px var(--accent-3); } to { box-shadow: 0 0 0 3px rgba(221, 51, 51, 0); } } .blocker-target { animation: blocker-flash 1.4s ease-out; } .stage { position: relative; width: 100%; margin: 0 auto 1rem; background: #111; border: 1px solid var(--border); } img.page-image { display: block; width: 100%; height: auto; } svg.overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } svg.overlay g.bbox rect.main { fill: rgba(0, 0, 0, 0); vector-effect: non-scaling-stroke; stroke-width: 3; stroke-opacity: 0.95; pointer-events: visiblePainted; cursor: pointer; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.7)); } svg.overlay g.bbox.untouched rect.main { stroke-opacity: 0.9; stroke-dasharray: 8 5; } svg.overlay g.bbox.reviewed rect.main { stroke-opacity: 1; stroke-width: 4; } svg.overlay g.bbox.selected rect.main { stroke-width: 5; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 3px white); } svg.overlay g.bbox rect.ghost { fill: rgba(0, 0, 0, 0); vector-effect: non-scaling-stroke; stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.5; stroke-dasharray: 3 4; pointer-events: none; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.7)); } svg.overlay g.bbox.needs-review:not(.reviewed) rect.main { stroke-dasharray: 6 4; } .tooltip, .popover { position: fixed; background: white; border: 1px solid var(--border); border-top: 3px solid var(--brand); border-radius: 3px; padding: 0.6rem 0.7rem; box-shadow: 0 8px 24px rgba(33, 67, 139, 0.18); z-index: 50; max-width: 320px; font-size: 0.88rem; } .tooltip { pointer-events: none; } .tooltip .tt-label { font-weight: 700; margin-bottom: 0.3rem; color: var(--brand); } .tooltip .tt-meta { display: flex; flex-direction: column; gap: 0.15rem; color: var(--muted); } .popover { pointer-events: auto; min-width: 260px; } .popover .po-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem; } .popover .po-id { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); } .popover .po-close { background: transparent; border: none; font-size: 1.1rem; cursor: pointer; line-height: 1; color: var(--muted); } .popover .po-label { font-weight: 700; margin-bottom: 0.3rem; color: var(--brand); } .popover .po-meta { margin-bottom: 0.4rem; } .popover .po-actions { display: flex; gap: 0.4rem; margin: 0.3rem 0; flex-wrap: wrap; align-items: center; } .popover .vbtn { padding: 0.3rem 0.7rem; border-radius: 3px; cursor: pointer; background: white; border: 1px solid var(--border); font: inherit; } .popover .vbtn.on[data-val="yes"] { background: var(--green); color: white; border-color: var(--green); } .popover .vbtn.on[data-val="no"] { background: var(--red); color: white; border-color: var(--red); } .popover .vbtn.on[data-val="unsure"] { background: var(--yellow); color: black; border-color: #c79b00; } .popover .po-reset { padding: 0.3rem 0.6rem; border: 1px solid var(--brand); border-radius: 3px; background: white; color: var(--brand); cursor: pointer; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.78rem; } .popover .po-reset:disabled { color: var(--muted); border-color: var(--border); cursor: not-allowed; } .popover .po-crop { font-size: 0.85rem; } .popover .po-extras { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px dashed var(--border); font-family: var(--mono); font-size: 0.78rem; display: grid; grid-template-columns: max-content 1fr; column-gap: 0.6rem; row-gap: 0.1rem; color: var(--muted); } .popover .ex-row { display: contents; } .popover .ex-k { color: var(--muted); } .popover .ex-v { color: var(--fg); word-break: break-word; } .popover .flag { color: #8a6d00; background: #fff7d6; padding: 0 0.3rem; border-radius: 3px; font-size: 0.75rem; } /* Drawer */ .drawer { position: sticky; bottom: 0; background: white; border: 1px solid var(--border); border-radius: 4px; border-top: 3px solid var(--brand); padding: 0.4rem 0.6rem; margin-top: 0.5rem; } .drawer-toggle { background: transparent; border: none; cursor: pointer; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand); padding: 0.2rem 0; } .drawer-arrow { display: inline-block; width: 1em; } .drawer.collapsed .drawer-body { display: none; } .drawer-body { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; gap: 0.8rem; align-items: start; padding-top: 0.4rem; } .drawer-body img#other-crop { max-width: 100%; max-height: 120px; border: 1px solid var(--border); } .drawer-body .other-text-label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--muted); } .drawer-body textarea { width: 100%; font: inherit; padding: 0.4rem; border: 1px solid var(--border); border-radius: 3px; } .drawer-body .other-meta { margin-top: 0.3rem; } /* --- manual align page ---------------------------------------------------- */ .manual-align-header { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.6rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--brand); } .manual-align-header h1 { font-family: var(--display); font-weight: 800; font-size: 1.3rem; margin: 0; color: var(--brand); } .manual-align-spacer { flex: 1; } .ma-finetune-label { display: flex; align-items: center; gap: 0.3rem; } .ma-help { margin: 0 0 1rem; } .ma-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 900px) { .ma-panes { grid-template-columns: 1fr; } } .ma-pane { background: white; border: 1px solid var(--border); border-radius: 4px; padding: 0.6rem; } .ma-pane-label { display: flex; align-items: center; gap: 0.6rem; font-family: var(--display); font-weight: 700; font-size: 0.85rem; color: var(--brand); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; } .ma-rotate-controls { margin-left: auto; display: flex; align-items: center; gap: 0.3rem; text-transform: none; letter-spacing: 0; } .ma-rotate-controls .btn-secondary { padding: 0.2rem 0.5rem; font-size: 0.85rem; } .ma-stage { position: relative; user-select: none; background: #efeee8; border-radius: 3px; overflow: hidden; } .ma-image { display: block; width: 100%; height: auto; } .ma-overlay { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; pointer-events: auto; } .ma-marker { fill: rgba(37, 99, 235, 0.85); stroke: white; stroke-width: 1.5; transition: r 0.12s ease-out, fill 0.12s ease-out; } .ma-marker-group { cursor: pointer; } .ma-marker-group:hover .ma-marker { fill: rgba(37, 99, 235, 0.95); } .ma-marker-pending { fill: rgba(220, 38, 38, 0.85); } .ma-marker-label { fill: white; font-weight: 600; font-family: sans-serif; pointer-events: none; text-anchor: middle; dominant-baseline: central; transition: font-size 0.12s ease-out; } .ma-pane.next-up { outline: 2px solid var(--accent-2); outline-offset: -2px; } .ma-preview-section { margin-top: 1.2rem; background: white; border: 1px solid var(--border); border-radius: 4px; padding: 0.6rem; } .ma-preview-label { display: flex; align-items: center; gap: 0.6rem; font-family: var(--display); font-weight: 700; font-size: 0.85rem; color: var(--brand); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; } .ma-preview-stage { position: relative; min-height: 120px; background: #efeee8; border-radius: 3px; display: flex; align-items: center; justify-content: center; } #ma-preview-image { display: block; max-width: 100%; max-height: 60vh; } #ma-preview-image[hidden] { display: none; } #ma-preview-placeholder { padding: 1.5rem; color: var(--muted); } /* --- Vetting UI -------------------------------------------------------- */ .vet-toolbar { margin-bottom: 1rem; } .vet-h1 { font-family: var(--display); font-weight: 800; margin: 0 0 0.6rem; font-size: 1.5rem; color: var(--brand); text-transform: uppercase; letter-spacing: 0.03em; } .vet-h2 { font-family: var(--display); font-weight: 700; font-size: 0.95rem; margin: 0.8rem 0 0.3rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand); } .vet-toolbar-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem; } .vet-filter { display: inline-flex; gap: 0.4rem; align-items: center; font-size: 0.9rem; } .vet-filter select { font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 3px; background: white; } .vet-help { background: white; border: 1px solid var(--border); border-radius: 4px; padding: 0.4rem 0.7rem; } .vet-help summary { cursor: pointer; font-size: 0.9rem; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand); } .vet-help ul { margin: 0.4rem 0 0; padding-left: 1.2rem; } .vet-help kbd { display: inline-block; padding: 0.05rem 0.35rem; font: 0.85rem var(--mono); background: #f8efd2; border: 1px solid var(--accent-2); border-radius: 3px; } .vet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 900px) { .vet-grid { grid-template-columns: 1fr; } } .vet-col { background: white; border: 1px solid var(--border); border-radius: 4px; padding: 0.6rem; } .vet-col-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--brand); } .vet-col-title { font-family: var(--display); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand); } .vet-col-title em { font-style: normal; text-decoration: underline; } .vet-col-count { color: var(--muted); font-size: 0.85rem; } .vet-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.4rem; } .vet-cell { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.25rem; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; font: inherit; } .vet-cell:hover { background: #faf3df; } .vet-cell.is-focused { outline: 2px solid var(--accent-2); outline-offset: 1px; } .vet-cell-human { background: #f1f7f3; border-color: #b6dcc6; } /* Seeded as "not a checkbox" — awaiting triage under the off-box filter. */ .vet-cell-offbox { background: #fdf4ec; border-color: #e3bb92; } .vet-thumb { width: 100%; max-height: 88px; object-fit: contain; background: white; border: 1px solid var(--border); border-radius: 2px; } .vet-meta { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); } .vet-meta.vet-human { color: var(--green); } .vet-job { margin-top: 1.2rem; background: white; border: 1px solid var(--border); border-radius: 4px; padding: 0.8rem; } .vet-status { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem; } .vet-status-label { font-family: var(--display); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand); } .vet-status-state { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); } .vet-status-log { flex: 1 1 100%; max-height: 120px; overflow: auto; background: #f8efd2; border: 1px solid var(--accent-2); border-radius: 3px; padding: 0.4rem; font: 0.78rem var(--mono); white-space: pre-wrap; } .vet-report table { border-collapse: collapse; margin: 0.4rem 0; } .vet-report th, .vet-report td { border: 1px solid var(--border); padding: 0.25rem 0.5rem; font-size: 0.85rem; text-align: center; } .vet-report th { background: var(--brand); color: var(--brand-fg); font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em; } .vet-disagreements td { text-align: left; } /* ---- survey-specific additions ------------------------------------------ */ .flags-banner { margin: 8px 0 12px; display: flex; flex-wrap: wrap; gap: 6px; } .flag-chip { background: #fff3cd; border: 1px solid #e0c860; color: #7a5d00; border-radius: 10px; padding: 2px 10px; font-size: 12px; font-weight: 600; } .flag-chip[class*="missing"], .flag-chip[class*="conflict"], .flag-chip[class*="marker"], .flag-chip[class*="swapped"] { background: #fde2e2; border-color: #e08a8a; color: #8a1f1f; } .page-section { margin: 18px 0; } .page-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .page-section-head h2 { margin: 0; font-size: 18px; } .missing-side { border: 1px dashed var(--border); border-radius: 6px; padding: 24px; color: #8a1f1f; background: #fdf3f3; font-weight: 600; } svg.overlay rect.text-region { fill: transparent; stroke: #0082c8; stroke-width: 2; opacity: 0.6; cursor: pointer; } svg.overlay rect.text-region.needs-review { stroke: var(--yellow); opacity: 0.9; } svg.overlay rect.text-region:hover { opacity: 1; } .texts-section { margin-top: 24px; } .texts-section h2 { font-size: 18px; margin-bottom: 8px; } .text-entry { border: 1px solid var(--border); border-radius: 6px; padding: 10px; margin-bottom: 10px; background: white; } .text-entry.needs-review { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(230, 180, 0, 0.15); } .text-entry-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; } .text-entry-label { font-weight: 600; } .text-entry img.text-crop { display: block; max-width: 100%; max-height: 220px; border: 1px solid var(--border); margin-bottom: 6px; background: white; } .text-entry textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 6px; } .text-entry.reviewed { border-color: #9ec9a4; box-shadow: 0 0 0 2px rgba(60, 140, 75, 0.12); } .text-reviewed { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; } .text-reviewed input { margin: 0; } .text-entry.reviewed .text-reviewed { color: #2f6b3a; } .pii-head .pii-tag { background: #8a1f1f; color: white; border-radius: 4px; padding: 1px 8px; font-size: 12px; vertical-align: middle; } .pii-panel { border: 2px solid #8a1f1f; border-radius: 8px; padding: 10px; background: #fdf7f7; } .filter-selects { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 14px; } .filter-selects select { font: inherit; } /* ---- people / resolution UI ---------------------------------------------- */ .people-columns { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; } .people-panel { flex: 1 1 380px; border: 1px solid var(--border); border-radius: 8px; padding: 14px; background: white; } .people-panel h2 { margin-top: 0; font-size: 17px; } table.kv { border-collapse: collapse; margin-bottom: 10px; } table.kv th { text-align: left; padding: 3px 12px 3px 0; color: #666; font-weight: 600; text-transform: capitalize; vertical-align: top; } table.kv td { padding: 3px 0; } /* --- sign-in, access request, reviewer admin ------------------------------ */ .auth-card { max-width: 560px; margin: 3rem auto; padding: 2rem; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; } .auth-card h1 { margin-top: 0; } .auth-google { display: inline-block; margin-top: 0.5rem; } .access-form { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; } .access-form textarea { font: inherit; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; } .access-form button { align-self: flex-start; } body > header nav .whoami { margin-left: 1.2rem; font-size: 0.9rem; color: var(--accent-2); font-weight: 500; } .admin h2 { margin-top: 2.4rem; } .admin h3 { margin-top: 1.6rem; } .admin ul.tools { list-style: none; padding: 0; margin: 0.6rem 0 0; } .admin ul.tools li { margin-bottom: 0.6rem; } .admin ul.tools li span { display: block; } .add-user { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.8rem; flex-wrap: wrap; } .add-user input, .add-user select { font: inherit; padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 4px; } table.users tbody tr { cursor: default; } table.users td.actions { white-space: nowrap; } table.users td.actions button { margin-right: 0.3rem; } table.users td.note { max-width: 24rem; white-space: pre-wrap; } table.users td.name-cell { white-space: nowrap; } table.users td.name-cell .name-input { font: inherit; width: 11rem; max-width: 40vw; padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; vertical-align: middle; } table.users td.name-cell button { margin-left: 0.3rem; padding: 0.25rem 0.5rem; font-size: 0.8rem; } tr.status-disabled td, tr.status-denied td { color: var(--muted); } .badge.role-admin { background: var(--brand); color: var(--brand-fg); } .badge.status-active { background: #dcfce7; color: #166534; } .badge.status-pending { background: #fef3c7; color: #92400e; } .badge.status-disabled, .badge.status-denied { background: #e5e7eb; color: #374151; } .admin ul.tools li button[disabled] { opacity: 0.55; cursor: not-allowed; } table.ingest td { vertical-align: top; } table.ingest td.small { white-space: nowrap; } table.ingest td.small:last-child { white-space: normal; } .badge.ingest-ok { background: #dcfce7; color: #166534; } .badge.ingest-running { background: #dbeafe; color: #1e40af; } .badge.ingest-error { background: #fee2e2; color: #991b1b; } /* --- live collaboration: presence, locks, remote changes ------------------ */ .presence-chips { display: inline-flex; gap: 0.25rem; vertical-align: middle; margin-left: 1rem; } .presence-chip { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font: 700 0.7rem/1 var(--display); letter-spacing: 0.04em; color: white; background: var(--muted); box-shadow: 0 0 0 2px white; } body > header .presence-chip { box-shadow: 0 0 0 2px var(--brand); } .conn-indicator { margin-left: 1rem; font-size: 0.8rem; color: var(--accent-2); font-style: italic; } .lock-banner { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin: 0 0 1rem; padding: 0.7rem 1rem; background: #fff7dd; border: 1px solid var(--accent-2); border-left-width: 6px; border-radius: 4px; } .lock-banner.is-error { background: #fdecec; border-color: var(--accent-3); } .lock-banner.is-done { background: #eafbea; border-color: var(--green); } .lock-banner .lock-text { flex: 1 1 20rem; font-weight: 500; } .lock-progress { flex: 1 1 14rem; height: 0.7rem; border: 1px solid var(--brand); border-radius: 999px; background: white; overflow: hidden; } .lock-progress-fill { height: 100%; background: var(--accent-2); width: 0; transition: width 0.4s; } .lock-progress.is-indeterminate .lock-progress-fill { width: 40%; background: repeating-linear-gradient(115deg, var(--accent-2) 0 10px, white 10px 20px); animation: btn-progress-sweep 1.2s linear infinite; } body.is-locked .stage { pointer-events: none; opacity: 0.85; } body.is-locked .page-section-head a.is-disabled { pointer-events: none; opacity: 0.5; } body.is-locked textarea[data-text-id] { background: #f3f1ec; } .lock-chip { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--accent-2); color: var(--brand-dark); font: 700 0.75rem/1.4 var(--display); letter-spacing: 0.05em; text-transform: uppercase; } .who-cell { white-space: nowrap; } .text-entry.remote-focused { outline: 2px solid var(--remote-color, var(--accent-2)); outline-offset: 2px; } .remote-focus-badge { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; font-size: 0.85rem; color: var(--muted); } .remote-focus-badge .take-over { padding: 0.15rem 0.6rem; font-size: 0.8rem; } .text-entry.has-queued-remote::after { content: "updated by someone else — applied when you leave the field"; display: block; font-size: 0.8rem; color: var(--muted); font-style: italic; margin-top: 0.3rem; } svg.overlay text.remote-focus { font: 700 14px var(--display); paint-order: stroke; stroke: white; stroke-width: 3px; } .remote-changed { animation: remote-flash 1.4s ease-out; } g.bbox.remote-changed rect.main { animation: remote-stroke 1.4s ease-out; } @keyframes remote-flash { from { box-shadow: 0 0 0 4px var(--remote-color, var(--accent-2)); } to { box-shadow: 0 0 0 0 transparent; } } @keyframes remote-stroke { from { stroke-width: 8px; stroke: var(--remote-color, var(--accent-2)); } to { stroke-width: 2px; } } .recovery-bar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.5rem 0.7rem; margin-bottom: 0.5rem; background: #fff7dd; border: 1px solid var(--accent-2); border-radius: 4px; font-size: 0.9rem; } @media (prefers-reduced-motion: reduce) { .remote-changed, g.bbox.remote-changed rect.main, .lock-progress.is-indeterminate .lock-progress-fill { animation: none; } } /* --- view-only on phone-sized screens ------------------------------------- readonly.js owns the decision (narrow AND touch) and puts `read-only` on ; everything here keys off that class and never off a media query of its own, so the two cannot drift apart. The narrow-screen layout below is a separate question — a desktop window dragged narrow still edits. */ .readonly-banner { display: none; } body.read-only .readonly-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; margin: 0.6rem 1.4rem; padding: 0.55rem 0.9rem; background: #f8efd2; color: #5d4715; border-left: 4px solid var(--accent-2); border-radius: 3px; font-size: 0.9rem; } body.read-only .readonly-banner strong { color: #4a380f; } /* Repeated on the response page, beside the greyed-out Approve button. */ .readonly-note { display: none; } body.read-only .readonly-note { display: block; margin: 0 0 0.9rem; padding: 0.5rem 0.75rem; background: #f8efd2; color: #5d4715; border-left: 4px solid var(--accent-2); border-radius: 3px; font-size: 0.88rem; } /* A disabled control still looks like a target; say once, in the cursor, that the whole page is not one. */ body.read-only .btn-primary:disabled, body.read-only .btn-secondary:disabled, body.read-only textarea[data-text-id], body.read-only input[data-role=reviewed] { cursor: default; } body.read-only textarea[data-text-id] { background: #f6f4ef; } body.read-only a.js-manual-align.is-disabled { pointer-events: none; opacity: 0.5; } /* The floating cards are clamped into the viewport by positionFloating; the width has to give too, or a 320px card overhangs a 390px screen. */ .tooltip, .popover { max-width: min(320px, calc(100vw - 16px)); } .popover { min-width: min(260px, calc(100vw - 16px)); } /* --- narrow screens ------------------------------------------------------ Independent of read-only mode: this is about width alone. The listing drops its secondary columns rather than scrolling sideways — an `overflow-x` wrapper would become the nearest scrollport and unstick the column headings the rows scroll under. */ @media (max-width: 700px) { .col-secondary { display: none; } main { padding: 0.8rem; } body > header { padding: 0.55rem 0.8rem; gap: 0.3rem 0.6rem; flex-wrap: wrap; } .brand { font-size: 1.05rem; letter-spacing: 0.04em; } body > header nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.9rem; } body > header nav a, body > header nav .whoami { margin-left: 0; font-size: 0.85rem; } .conn-indicator, .presence-chips { margin-left: 0; } .readonly-banner, .flash { margin-left: 0.8rem; margin-right: 0.8rem; } .filter { padding: 0.3rem 0.65rem; font-size: 0.78rem; } .filter-selects { margin-left: 0; flex-basis: 100%; gap: 0.9rem; font-size: 0.85rem; } body.sticky-chrome .filters { padding-bottom: 0.6rem; } table.cards th, table.cards td { padding: 0.45rem 0.5rem; } table.cards thead th { font-size: 0.78rem; letter-spacing: 0.04em; } .thumb { width: 56px; height: 36px; } .card-nav { gap: 0.4rem; } .card-nav .card-id-block { flex: 1 1 100%; min-width: 0; } .card-nav .card-id-block h1 { font-size: 1.05rem; word-break: break-all; } }