/* Theme tokens — generated: every color literal below lives here twice. Night is the studio's native palette and the default; day is the same page in daylight, driven by data-theme on (shared key with the landing site). Regenerate with scripts in the session scratchpad, or hand-tune individual day values — they are plain CSS. */ :root { color-scheme: dark; --d050e19: #050e19; --d081624: #081624; --d0b1d2d: #0b1d2d; --d18344a: #18344a; --dedf5f7: #edf5f7; --d7c93a5: #7c93a5; --d48d3e8: #48d3e8; --d54d39a: #54d39a; --de5ac4b: #e5ac4b; --dff7b76: #ff7b76; --drgba-0-0-0-28: rgba(0,0,0,.28); --drgba-72-211-232-18: rgba(72,211,232,.18); --drgba-255-123-118-2: rgba(255,123,118,.2); --d071421: #071421; --drgba-72-211-232-25: rgba(72,211,232,.25); --d8fe2ed: #8fe2ed; --drgba-72-211-232-07: rgba(72,211,232,.07); --d8196a7: #8196a7; --d284e68: #284e68; --d0e2134: #0e2134; --dfff: #fff; --d71899c: #71899c; --d9edfe7: #9edfe7; --d7890a2: #7890a2; --d244259: #244259; --d091725: #091725; --d6b8294: #6b8294; --d688195: #688195; --drgba-72-211-232-32: rgba(72,211,232,.32); --drgba-72-211-232-09: rgba(72,211,232,.09); --drgba-72-211-232-025: rgba(72,211,232,.025); --d86a0b2: #86a0b2; --d06131c: #06131c; --d29465d: #29465d; --d0b1927: #0b1927; --dd9e3ea: #d9e3ea; --d06150e: #06150e; --drgba-255-123-118-5: rgba(255,123,118,.5); --dffaaa6: #ffaaa6; --drgba-255-123-118-08: rgba(255,123,118,.08); --d071522: #071522; --d0a1b2a: #0a1b2a; --d758da0: #758da0; --d607a8e: #607a8e; --d315268: #315268; --da2b7c5: #a2b7c5; --drgba-84-211-154-45: rgba(84,211,154,.45); --drgba-72-211-232-45: rgba(72,211,232,.45); --d92a7b5: #92a7b5; --ddbe7ec: #dbe7ec; --d31546c: #31546c; --drgba-1-6-10-78: rgba(1,6,10,.78); --d8ca0b0: #8ca0b0; --da7bac5: #a7bac5; --d8196a6: #8196a6; --drgba-84-211-154-4: rgba(84,211,154,.4); --drgba-84-211-154-06: rgba(84,211,154,.06); --d2c5b6d: #2c5b6d; --d0e2a37: #0e2a37; --d793f43: #793f43; --d2b151a: #2b151a; --dffb4b1: #ffb4b1; } :root[data-theme="light"] { color-scheme: light; --d050e19: #f5f5f4; --d081624: #f1f1f0; --d0b1d2d: #ecebea; --d18344a: #d8d7d3; --dedf5f7: #112227; --d7c93a5: #757168; --d48d3e8: #0b7c8f; --d54d39a: #2cab72; --de5ac4b: #b47b1a; --dff7b76: #890500; --drgba-0-0-0-28: rgba(0,0,0,.28); --drgba-72-211-232-18: rgba(23, 162, 183, 0.18); --drgba-255-123-118-2: rgba(137, 5, 0, 0.2); --d071421: #f3f3f2; --drgba-72-211-232-25: rgba(23, 162, 183, 0.25); --d8fe2ed: #126570; --drgba-72-211-232-07: rgba(23, 162, 183, 0.07); --d8196a7: #716d65; --d284e68: #c4c0ba; --d0e2134: #e7e6e4; --dfff: #1f1f1f; --d71899c: #807b71; --d9edfe7: #185961; --d7890a2: #79746b; --d244259: #cccac4; --d091725: #f0f0ef; --d6b8294: #878278; --d688195: #888379; --drgba-72-211-232-32: rgba(23, 162, 183, 0.32); --drgba-72-211-232-09: rgba(23, 162, 183, 0.09); --drgba-72-211-232-025: rgba(23, 162, 183, 0.025); --d86a0b2: #69655d; --d06131c: #f5f4f3; --d29465d: #c8c5bf; --d0b1927: #efeeed; --dd9e3ea: #1a1c21; --d06150e: #e5f7ef; --drgba-255-123-118-5: rgba(137, 5, 0, 0.5); --dffaaa6: #590400; --drgba-255-123-118-08: rgba(137, 5, 0, 0.08); --d071522: #f3f2f1; --d0a1b2a: #eeedec; --d758da0: #7b776e; --d607a8e: #8f8a81; --d315268: #c0bcb5; --da2b7c5: #434954; --drgba-84-211-154-45: rgba(44, 171, 114, 0.45); --drgba-72-211-232-45: rgba(23, 162, 183, 0.45); --d92a7b5: #535964; --ddbe7ec: #181a1f; --d31546c: #bebab2; --drgba-1-6-10-78: rgba(250, 250, 249, 0.78); --d8ca0b0: #67635b; --da7bac5: #424650; --d8196a6: #726e65; --drgba-84-211-154-4: rgba(44, 171, 114, 0.4); --drgba-84-211-154-06: rgba(44, 171, 114, 0.06); --d2c5b6d: #c0bcb5; --d0e2a37: #e6e5e3; --d793f43: #c0868a; --d2b151a: #ead4d9; --dffb4b1: #4e0300; } :root { --bg:var(--d050e19); --panel:var(--d081624); --panel2:var(--d0b1d2d); --line:var(--d18344a); --text:var(--dedf5f7); --muted:var(--d7c93a5); --cyan:var(--d48d3e8); --green:var(--d54d39a); --amber:var(--de5ac4b); --red:var(--dff7b76); --sidebar:190px; font-family:Inter,system-ui,sans-serif; } * { box-sizing:border-box; } [hidden] { display:none !important; } body { margin:0; background:var(--bg); color:var(--text); font-size:13px; } a { color:inherit; text-decoration:none; } button,select,textarea,input { font:inherit; } .boot { min-height:100vh; display:grid; place-items:center; padding:24px; color:var(--muted); } .boot-card { width:min(560px,100%); padding:34px; border:1px solid var(--line); border-radius:10px; background:var(--panel); box-shadow:0 24px 80px var(--drgba-0-0-0-28); } .boot-card h1 { margin:12px 0 10px; color:var(--text); font-size:28px; } .boot-card > p:last-of-type { margin-bottom:0; line-height:1.55; } .boot-spinner { width:34px; height:34px; display:block; border:3px solid var(--drgba-72-211-232-18); border-top-color:var(--cyan); border-radius:50%; animation:spin .85s linear infinite; } .boot.error .boot-spinner { border-color:var(--drgba-255-123-118-2); border-top-color:var(--red); animation:none; } .boot-actions { margin-top:22px; display:flex; gap:9px; } .boot-actions[hidden] { display:none; } @keyframes spin { to { transform:rotate(360deg); } } header { height:64px; position:fixed; inset:0 0 auto; z-index:10; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 26px; border-bottom:1px solid var(--line); background:var(--d071421); } header > div { justify-self:end; display:flex; gap:9px; } .brand { display:flex; align-items:center; gap:9px; font-weight:600; } .brand i { width:22px; height:22px; border:2px solid var(--cyan); border-radius:50%; box-shadow:inset 0 0 0 7px var(--d071421); background:var(--cyan); } .brand strong { color:var(--cyan); } .secure { padding:7px 12px; border:1px solid var(--drgba-72-211-232-25); border-radius:999px; color:var(--d8fe2ed); background:var(--drgba-72-211-232-07); text-transform:uppercase; letter-spacing:.09em; font-size:9px; font-weight:700; } aside { position:fixed; inset:64px auto 0 0; width:var(--sidebar); padding:20px 12px 16px; display:flex; flex-direction:column; border-right:1px solid var(--line); background:var(--d071421); } nav { display:grid; gap:5px; } nav a { min-height:43px; display:flex; gap:12px; align-items:center; padding:0 12px; border:1px solid transparent; border-radius:7px; color:var(--d8196a7); } nav a.active { border-color:var(--d284e68); background:var(--d0e2134); color:var(--dfff); } nav a.active:first-letter { color:var(--cyan); } .agent-note { margin-top:auto; padding:14px; border:1px solid var(--line); color:var(--d71899c); } .agent-note strong { color:var(--d9edfe7); font-size:10px; text-transform:uppercase; letter-spacing:.07em; } .agent-note p { margin:8px 0 0; font-size:10px; line-height:1.5; } main { margin:0 auto; padding:94px clamp(20px,5vw,48px) 60px; width:min(1320px,100%); min-height:100vh; } .hero { display:flex; justify-content:space-between; align-items:end; gap:30px; padding:20px 0 28px; border-bottom:1px solid var(--line); } .eyebrow { margin:0 0 7px; color:var(--cyan); text-transform:uppercase; letter-spacing:.12em; font-size:9px; font-weight:700; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:10px; font-size:34px; letter-spacing:-.04em; } h2 { margin-bottom:0; } .hero > div > p:last-child { margin:0; color:var(--muted); } .hero-actions { display:flex; align-items:end; gap:10px; } .capture-session-button { border-color:var(--cyan); color:var(--cyan); background:var(--drgba-72-211-232-07); white-space:nowrap; } label { display:grid; gap:6px; color:var(--d7890a2); font-size:9px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; } select,textarea { min-height:40px; min-width:250px; padding:0 12px; border:1px solid var(--d244259); border-radius:6px; background:var(--d091725); color:var(--text); } input { min-height:42px; padding:0 12px; border:1px solid var(--d244259); border-radius:6px; background:var(--d091725); color:var(--text); } textarea { padding:11px; resize:vertical; text-transform:none; letter-spacing:normal; } .metrics { display:grid; grid-template-columns:repeat(6,1fr); margin:24px 0 18px; border:1px solid var(--line); } .metric { min-height:96px; padding:16px; border-right:1px solid var(--line); } .metric:last-child { border:0; } .metric span { color:var(--d6b8294); text-transform:uppercase; letter-spacing:.07em; font-size:8px; } .metric strong { display:block; margin:5px 0 2px; font-size:25px; } .metric small { color:var(--d688195); } .next-step { min-height:88px; margin:0 0 18px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:22px; border:1px solid var(--drgba-72-211-232-32); background:linear-gradient(90deg,var(--drgba-72-211-232-09),var(--drgba-72-211-232-025)); } .next-step[hidden] { display:none; } .next-step h2 { margin-bottom:5px; font-size:17px; } .next-step p:last-child { margin:0; color:var(--d86a0b2); } .next-step-button { flex:none; border-color:var(--cyan); background:var(--cyan); color:var(--d06131c); } .capture-sessions { margin:0 0 18px; padding:16px 18px; border:1px solid var(--line); background:var(--panel); } .capture-sessions > div:first-child { margin-bottom:12px; } .capture-session-row { min-height:58px; display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center; padding:10px 0; border-top:1px solid var(--line); } .capture-session-row strong,.capture-session-row small { display:block; } .capture-session-row small { margin-top:3px; color:var(--muted); } .capture-session-row .status { justify-self:end; } .capture-revoke{margin-top:5px;padding:0;border:0;background:transparent;color:var(--red);font-size:10px;cursor:pointer} .toolbar { min-height:70px; padding:14px 17px; display:flex; justify-content:space-between; align-items:center; gap:18px; border:1px solid var(--line); background:var(--d081624); } .toolbar > div:last-child { display:flex; gap:8px; } .button { min-height:39px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--d29465d); border-radius:6px; background:var(--d0b1927); color:var(--dd9e3ea); font-weight:600; cursor:pointer; } .button.secondary { background:transparent; } .button.approve { background:var(--green); border-color:var(--green); color:var(--d06150e); } .button.danger { border-color:var(--drgba-255-123-118-5); color:var(--dffaaa6); background:var(--drgba-255-123-118-08); } .queue { display:grid; border:1px solid var(--line); border-top:0; } .assignment { display:grid; grid-template-columns:minmax(240px,1.45fr) .8fr .7fr minmax(240px,1fr) auto; gap:16px; align-items:center; min-height:96px; padding:15px 17px; border-bottom:1px solid var(--line); background:var(--d071522); } .assignment:last-child { border:0; } .assignment:hover { background:var(--d0a1b2a); } .assignment h3 { margin:0 0 5px; font-size:14px; } .assignment p,.assignment small { margin:0; color:var(--d758da0); font-size:10px; } .cell { display:grid; gap:4px; } .cell > span { color:var(--d607a8e); text-transform:uppercase; letter-spacing:.07em; font-size:8px; } .status { width:max-content; padding:6px 9px; border:1px solid var(--d315268); border-radius:999px; color:var(--da2b7c5); text-transform:uppercase; letter-spacing:.07em; font-size:8px; font-weight:700; } .status.ready_for_review,.status.completed { border-color:var(--drgba-84-211-154-45); color:var(--green); } .status.retake { border-color:var(--drgba-255-123-118-5); color:var(--red); } .status.ai_check { border-color:var(--drgba-72-211-232-45); color:var(--cyan); } .qc { color:var(--d92a7b5); } .qc strong { display:block; color:var(--ddbe7ec); font-size:11px; } .empty { padding:50px; text-align:center; color:var(--muted); background:var(--d071522); } dialog { width:min(680px,calc(100vw - 40px)); padding:0; border:1px solid var(--d31546c); border-radius:9px; background:var(--d091725); color:var(--text); } dialog::backdrop { background:var(--drgba-1-6-10-78); backdrop-filter:blur(4px); } dialog header { position:static; height:auto; min-height:70px; display:flex; justify-content:space-between; padding:15px 18px; } dialog header > button { border:0; background:transparent; color:var(--d8ca0b0); font-size:24px; } .review-body { padding:18px; display:grid; gap:16px; } .qc-summary { padding:14px; border:1px solid var(--line); background:var(--d071421); } .qc-summary p { margin:0 0 10px; color:var(--da7bac5); } .check { display:grid; grid-template-columns:72px 1fr; gap:8px; margin-top:7px; color:var(--d8196a6); font-size:10px; } .check strong.pass { color:var(--green); } .check strong.fail { color:var(--red); } .check strong.uncertain { color:var(--amber); } .review-evidence { display:grid; gap:8px; } .review-evidence h3 { margin:4px 0; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.11em; } .evidence-file { width:100%; display:grid; grid-template-columns:1fr auto; gap:3px 14px; align-items:center; padding:13px 14px; border:1px solid var(--line); border-radius:8px; background:var(--d071421); color:var(--text); text-align:left; cursor:pointer; } .evidence-file:hover { border-color:var(--cyan); } .evidence-file span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:650; } .evidence-file small { color:var(--muted); } .evidence-file strong { grid-column:2; grid-row:1/3; color:var(--cyan); font-size:11px; } .evidence-file:disabled { opacity:.65; } .no-evidence { color:var(--muted); font-size:12px; } .dialog-copy { margin:0; color:var(--muted); line-height:1.55; } .capture-link-result { padding:14px; border:1px solid var(--drgba-84-211-154-4); background:var(--drgba-84-211-154-06); } .capture-link-result > strong,.capture-link-result > small { display:block; } .capture-link-result input { width:100%; margin:8px 0; } .capture-link-result small { color:var(--muted); } .capture-link-result > div { margin-top:10px; display:flex; gap:8px; } dialog footer { padding:14px 18px; display:flex; justify-content:flex-end; gap:9px; border-top:1px solid var(--line); } .toast { position:fixed; right:22px; bottom:22px; max-width:380px; padding:13px 16px; border:1px solid var(--d2c5b6d); border-radius:7px; background:var(--d0e2a37); opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s; } .toast.show { opacity:1; transform:none; } .toast.error { border-color:var(--d793f43); background:var(--d2b151a); color:var(--dffb4b1); } @media(max-width:1200px){.metrics{grid-template-columns:repeat(3,1fr)} .assignment{grid-template-columns:1.4fr .8fr .7fr auto} .assignment .qc{grid-column:1/-2} } @media(max-width:760px){header{grid-template-columns:1fr auto} .secure{display:none} main{margin-left:0;padding:82px 14px 50px} aside{display:none} .hero{align-items:stretch;flex-direction:column} .hero-actions{align-items:stretch;flex-direction:column} .capture-session-row{grid-template-columns:1fr auto} .capture-session-row>div:last-child{grid-column:1/-1} } /* ---------------------------------------------------------------- phone Mobile-first is a product rule, and this page was 106px too wide on a 430px screen: two flex rows that could not wrap, and a sidebar pinned beside content that had nowhere left to go. A reviewer clearing field submissions is exactly the person doing it on a phone. */ @media (max-width: 760px) { header { height: auto; position: static; grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; } header > div { justify-self: stretch; flex-wrap: wrap; } .secure { display: none; } aside { position: static; inset: auto; width: 100%; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); } nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 8px; } nav a { min-height: 38px; white-space: nowrap; } main { margin-left: 0; padding: 18px 16px 48px; width: 100%; } .hero { flex-direction: column; align-items: stretch; gap: 14px; } /* The queue's title sits beside a filter and a Refresh button; on a phone there is no room for both on one line, and a select that refuses to shrink takes the page with it. */ .toolbar { flex-wrap: wrap; gap: 12px; } .toolbar > div { min-width: 0; flex: 1 1 100%; display: flex; gap: 8px; } .toolbar select { min-width: 0; flex: 1 1 auto; } table, .queue { display: block; overflow-x: auto; } }