diff --git a/web/operator-gui/styles.css b/web/operator-gui/styles.css
index 4187804..4e7644c 100644
--- a/web/operator-gui/styles.css
+++ b/web/operator-gui/styles.css
@@ -16,7 +16,6 @@
:root {
/* --- Type ---------------------------------------------------------- */
--font-ui: "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", "Segoe UI", system-ui, sans-serif;
- --font-stamp: "Pretendard Variable", Pretendard, "Malgun Gothic", "Segoe UI Semibold", sans-serif;
--font-mono: "Cascadia Mono", "Consolas", ui-monospace, "DejaVu Sans Mono", monospace;
/* --- Surfaces (neutral cool) --------------------------------------- */
@@ -39,17 +38,20 @@
--teal: #1f6f8b;
--teal-deep: #14495c;
--teal-tint: #e7f1f5;
+ --teal-tint-soft: #eef6f9;
--teal-line: #a9cdda;
--ochre: #b07d18;
- --ochre-deep: #8a5f0d;
--ochre-tint: #faf2dd;
+ --ochre-tint-soft: #fdf9ee;
--ochre-line: #e2c887;
/* --- Dark rail ----------------------------------------------------- */
- --rail-top: #222b33;
- --rail-bot: #1a232b;
+ --rail: #222b33;
--rail-edge: #10171d;
+ --rail-ink: #d3dce4;
+ --rail-ink-soft: #9fb0bd;
+ --rail-ink-strong: #e8edf2;
/* --- Risk / signal semantics --------------------------------------- */
--red: #b03a2e; --red-tint: #fceae7; --red-line: #e4aca3;
@@ -57,6 +59,8 @@
--green: #25684a; --green-tint: #e7f3ec; --green-line: #a6d3b9;
--violet: #564d75; --violet-tint: #efebf6;--violet-line: #c7bbd9;
--blue: #2c5a8c; --blue-tint: #e8f0fa; --blue-line: #b1c6e2;
+ --forest: #215633; --forest-tint: #ecf7ef;--forest-line: #b1d5b9;
+ --slate: #4c5d6b; --slate-tint: #eef2f5; --slate-line: #c2cdd6;
/* --- Geometry & elevation ------------------------------------------ */
--r-sm: 6px;
@@ -68,18 +72,11 @@
--shadow: 0 1px 3px rgba(23, 32, 41, 0.05), 0 10px 24px -18px rgba(23, 32, 41, 0.25);
--shadow-lg: 0 18px 48px -20px rgba(16, 28, 38, 0.35), 0 3px 8px rgba(23, 32, 41, 0.05);
--press: inset 0 1px 0 rgba(255, 255, 255, 0.55);
+ --inset-well: inset 0 1px 2px rgba(23, 32, 41, 0.04);
+ --bevel: var(--bevel);
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
- /* --- Back-compat aliases (legacy variable names still referenced) -- */
- --surface: var(--paper);
- --surface-strong: var(--card-raised);
- --surface-muted: var(--paper-2);
- --line: var(--hair);
- --line-strong: var(--hair-strong);
- --accent: var(--teal);
- --accent-strong: var(--teal-deep);
-
--audit-object-width: 24%;
}
@@ -106,7 +103,7 @@ body {
}
::selection {
- background: rgba(31, 111, 139, 0.22);
+ background: color-mix(in srgb, var(--teal) 22%, transparent);
color: var(--ink);
}
@@ -155,10 +152,6 @@ textarea:disabled {
background-color: var(--ink-faint);
}
-.asset-preload {
- display: none;
-}
-
.sr-only {
position: absolute;
width: 1px;
@@ -188,8 +181,8 @@ textarea:disabled {
gap: 6px;
height: 100vh;
padding: 20px 14px 16px;
- background: var(--rail-top);
- color: #e8edf2;
+ background: var(--rail);
+ color: var(--rail-ink-strong);
border-right: 1px solid var(--rail-edge);
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
}
@@ -217,8 +210,7 @@ textarea:disabled {
.brand-block div span {
margin-top: 4px;
- color: #9fb0bd;
- font-family: var(--font-stamp);
+ color: var(--rail-ink-soft);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
@@ -232,11 +224,10 @@ textarea:disabled {
border-radius: 10px;
background: var(--teal);
color: #fff;
- font-family: var(--font-stamp);
font-weight: 750;
font-size: 17px;
letter-spacing: 0.04em;
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
+ box-shadow: var(--bevel);
}
.nav-button {
@@ -251,7 +242,7 @@ textarea:disabled {
border: 1px solid transparent;
border-radius: var(--radius);
background: transparent;
- color: #d3dce4;
+ color: var(--rail-ink);
text-align: left;
font-size: 14px;
transition: background 160ms var(--ease), color 160ms var(--ease), transform 120ms var(--ease);
@@ -287,7 +278,6 @@ textarea:disabled {
height: 28px;
border: 1px solid currentColor;
border-radius: 7px;
- font-family: var(--font-stamp);
font-size: 12px;
font-weight: 700;
opacity: 0.85;
@@ -313,8 +303,7 @@ textarea:disabled {
padding: 11px 12px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius);
- color: #d3dce4;
- font-family: var(--font-stamp);
+ color: var(--rail-ink);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
@@ -383,7 +372,7 @@ textarea:disabled {
border-radius: var(--r-sm);
background: var(--card-raised);
color: var(--ink);
- box-shadow: inset 0 1px 2px rgba(20, 30, 28, 0.04);
+ box-shadow: var(--inset-well);
transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
@@ -415,7 +404,7 @@ textarea:disabled {
.memo-field textarea:focus {
outline: none;
border-color: var(--teal);
- box-shadow: inset 0 1px 2px rgba(20, 30, 28, 0.04), 0 0 0 3px rgba(34, 96, 114, 0.16);
+ box-shadow: var(--inset-well), 0 0 0 3px color-mix(in srgb, var(--teal) 16%, transparent);
}
.product-purpose {
@@ -456,12 +445,14 @@ textarea:disabled {
gap: 8px;
min-height: 40px;
padding: 7px 11px;
+ overflow: hidden;
border: 1px solid var(--hair);
border-radius: var(--r-sm);
background: var(--card-raised);
color: var(--ink-soft);
font-size: 13px;
white-space: nowrap;
+ text-overflow: ellipsis;
box-shadow: var(--shadow-sm);
}
@@ -550,21 +541,18 @@ textarea:disabled {
.view.active {
display: block;
- /* fill-mode `backwards` (not `both`): the entrance animation must NOT persist
- its end-state transform. A retained identity transform on .view.active would
- establish a containing block and break `position: fixed` on the floating
- decision panel, dropping it to the bottom of the page. */
+ /* Opacity-only on purpose: any transform here — even one animating toward
+ `none` — establishes a containing block for the whole animation and breaks
+ `position: fixed` on the floating decision panel inside this view. */
animation: viewRise 320ms var(--ease) backwards;
}
@keyframes viewRise {
from {
opacity: 0;
- transform: translateY(9px);
}
to {
opacity: 1;
- transform: none;
}
}
@@ -673,7 +661,6 @@ textarea:disabled {
.queue-folder-input span,
.queue-file-input span:first-child {
color: var(--ink-faint);
- font-family: var(--font-stamp);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
@@ -687,7 +674,7 @@ textarea:disabled {
border-radius: var(--r-sm);
background: var(--card-raised);
color: var(--ink);
- box-shadow: inset 0 1px 2px rgba(20, 30, 28, 0.04);
+ box-shadow: var(--inset-well);
}
.queue-file-input span:last-of-type {
@@ -773,10 +760,9 @@ textarea:disabled {
border-radius: var(--r-pill);
background: var(--teal);
color: #fff;
- font-family: var(--font-stamp);
font-size: 13px;
font-weight: 700;
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
+ box-shadow: var(--bevel);
}
.operator-workflow strong {
@@ -797,7 +783,6 @@ textarea:disabled {
.eyebrow {
margin: 0 0 6px;
color: var(--teal);
- font-family: var(--font-stamp);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
@@ -836,7 +821,6 @@ textarea:disabled {
.knowledge-form label span,
.memo-field span {
color: var(--ink-faint);
- font-family: var(--font-stamp);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
@@ -893,7 +877,7 @@ textarea:disabled {
color: #fff;
font-size: 13px;
font-weight: 700;
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
+ box-shadow: var(--bevel);
}
.knowledge-form .file-picker-button {
@@ -932,7 +916,7 @@ textarea:disabled {
border-radius: var(--r-sm);
background: var(--card-raised);
overflow: hidden;
- box-shadow: inset 0 1px 2px rgba(20, 30, 28, 0.04);
+ box-shadow: var(--inset-well);
}
.segmented button {
@@ -1233,7 +1217,6 @@ th {
z-index: 1;
background: var(--card-sunk);
color: var(--ink-faint);
- font-family: var(--font-stamp);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
@@ -1258,9 +1241,12 @@ tbody tr:hover {
background: var(--teal-tint);
}
-tbody tr.selected-row {
+/* Selection must outrank the zebra stripe (.queue-grid tbody
+ .queue-row:nth-child(even), specificity 0,3,1) on even rows. */
+tbody tr.selected-row,
+.queue-grid tbody .queue-row.selected-row {
box-shadow: inset 4px 0 0 var(--teal), var(--shadow-sm);
- background: #eef6f9;
+ background: var(--teal-tint-soft);
}
.thumb {
@@ -1384,9 +1370,9 @@ tbody tr.selected-row {
}
.source-naver {
- border-color: #b1d5b9;
- background: #ecf7ef;
- color: #215633;
+ border-color: var(--forest-line);
+ background: var(--forest-tint);
+ color: var(--forest);
}
.source-google {
@@ -1402,9 +1388,9 @@ tbody tr.selected-row {
}
.source-internal {
- border-color: #c2cdd6;
- background: #eef2f5;
- color: #4c5d6b;
+ border-color: var(--slate-line);
+ background: var(--slate-tint);
+ color: var(--slate);
}
.source-failure {
@@ -1418,7 +1404,6 @@ tbody tr.selected-row {
border-color: var(--hair);
background: var(--card-sunk);
color: var(--ink-soft);
- font-family: var(--font-stamp);
letter-spacing: 0.02em;
}
@@ -1437,7 +1422,7 @@ tbody tr.selected-row {
.provider-chip.disabled,
.provider-chip.skipped {
border-color: var(--hair-strong);
- color: #66747f;
+ color: var(--ink-soft);
}
.reason-cell {
@@ -1551,7 +1536,6 @@ tbody tr.selected-row {
.fact-item span {
display: block;
color: var(--ink-faint);
- font-family: var(--font-stamp);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.07em;
@@ -1650,7 +1634,6 @@ tbody tr.selected-row {
.summary-stat span {
display: block;
color: var(--ink-faint);
- font-family: var(--font-stamp);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
@@ -1726,7 +1709,7 @@ tbody tr.selected-row {
.evidence-group-strong {
border-color: var(--ochre-line);
- background: #fdf9ee;
+ background: var(--ochre-tint-soft);
box-shadow: 0 0 0 1px rgba(176, 125, 24, 0.08);
}
@@ -1907,7 +1890,7 @@ tbody tr.selected-row {
.knowledge-row.watchlist {
border-color: var(--ochre-line);
- background: #fdf9ee;
+ background: var(--ochre-tint-soft);
}
/* ===================== Decision pane / floating ==================== */
@@ -1989,7 +1972,6 @@ tbody tr.selected-row {
.decision-secondary summary {
cursor: pointer;
color: var(--ink-soft);
- font-family: var(--font-stamp);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
@@ -2319,7 +2301,7 @@ tbody tr.selected-row {
border-radius: var(--r-pill);
background: var(--paper-2);
overflow: hidden;
- box-shadow: inset 0 1px 2px rgba(20, 30, 28, 0.12);
+ box-shadow: inset 0 1px 2px rgba(23, 32, 41, 0.12);
}
.quota-meter span {
@@ -2427,7 +2409,9 @@ tbody tr.selected-row {
}
}
-@media (max-width: 1180px) {
+@media (max-width: 1380px) {
+ /* The 5-track toolbar needs ~1364px of viewport (track minimums + rail +
+ paddings); collapse it before that point, not at the generic 1180px step. */
.toolbar {
grid-template-columns: 1fr 1fr 1fr;
}
@@ -2435,7 +2419,9 @@ tbody tr.selected-row {
.filter-search {
grid-column: span 2;
}
+}
+@media (max-width: 1180px) {
.case-layout {
grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
}