:root {
  --bg: #0f1012; --panel: #16171a; --raised: #1d1f23; --sunk: #0b0c0d; --line: #2a2d33; --line-2: #383c44;
  --fg: #eceef2; --muted: #9aa0aa; --faint: #6b717b;
  --accent: #7b93ff; --accent-ink: #0d1020;
  --good: #3fd08f; --good-bg: rgba(63, 208, 143, .14); --bad: #ff6b6b; --bad-bg: rgba(255, 107, 107, .14); --warn: #f4b84a; --warn-bg: rgba(244, 184, 74, .14);
  --mark: #ff4d6d; --radius: 10px; --shadow: 0 8px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f3f3f1; --panel: #ffffff; --raised: #f7f7f5; --sunk: #e9e9e6; --line: #e1e1dc; --line-2: #cfcfc9;
  --fg: #17181b; --muted: #5d636c; --faint: #8b9099;
  --accent: #3d5cf0; --accent-ink: #ffffff;
  --good: #11935c; --good-bg: rgba(17, 147, 92, .12); --bad: #d6363b; --bad-bg: rgba(214, 54, 59, .1); --warn: #b57400; --warn-bg: rgba(181, 116, 0, .12);
  --shadow: 0 8px 30px rgba(0, 0, 0, .1);
  color-scheme: light;
}
* { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.45 Geist, system-ui, -apple-system, 'Segoe UI', sans-serif; display: grid; grid-template-rows: 52px 1fr; overflow: hidden }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
.mono { font-family: 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums }
[hidden] { display: none !important }

/* top bar */
.top { display: flex; align-items: center; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--panel) }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap }
.mark { width: 18px; height: 18px; border-radius: 6px; background: conic-gradient(from 210deg, var(--accent), #b38bff, #5ee0c8, var(--accent)) }
nav { display: flex; gap: 2px; overflow-x: auto; flex: 1; min-width: 0 }
nav button { background: none; border: 0; padding: 7px 12px; border-radius: 8px; color: var(--muted); white-space: nowrap; display: flex; gap: 7px; align-items: center }
nav button:hover { background: var(--raised); color: var(--fg) }
nav button[aria-current="page"] { background: var(--raised); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line) }
nav .n { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--sunk); color: var(--muted) }
nav .n.hot { background: var(--accent); color: var(--accent-ink) }
.top-right { display: flex; gap: 8px; align-items: center }
.pill { border: 1px solid var(--line); background: var(--raised); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--muted); white-space: nowrap }
.pill .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); margin-right: 6px; vertical-align: 1px }
.pill.busy .dot { background: var(--good); animation: pulse 1.4s infinite }
@keyframes pulse { 50% { opacity: .35 } }
.icon-btn { border: 1px solid var(--line); background: var(--raised); border-radius: 8px; width: 32px; height: 32px }

main { min-height: 0; overflow: hidden }
.page { height: 100%; overflow: auto; padding: 20px 24px 40px }
.page h1 { font-size: 20px; margin: 0 0 4px; letter-spacing: -.015em; text-wrap: balance }
.page .lede { color: var(--muted); margin: 0 0 18px; max-width: 70ch }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.spacer { flex: 1 }

/* buttons and chips */
.btn { border: 1px solid var(--line-2); background: var(--raised); padding: 7px 13px; border-radius: 8px; font-weight: 500 }
.btn:hover { border-color: var(--faint) }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent }
.btn.good { background: var(--good-bg); color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent) }
.btn.bad { background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent) }
.btn.warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent) }
.btn.small { padding: 4px 9px; font-size: 12.5px }
.btn:disabled { opacity: .45; cursor: default }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--sunk); color: var(--muted); border: 1px solid var(--line); white-space: nowrap }
.chip.good { color: var(--good); background: var(--good-bg); border-color: transparent }
.chip.bad { color: var(--bad); background: var(--bad-bg); border-color: transparent }
.chip.warn { color: var(--warn); background: var(--warn-bg); border-color: transparent }
.chip.accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: transparent }
.seg { display: inline-flex; background: var(--sunk); border: 1px solid var(--line); border-radius: 9px; padding: 2px; gap: 2px; flex-wrap: wrap }
.seg button { border: 0; background: none; padding: 5px 10px; border-radius: 7px; color: var(--muted); font-size: 12.5px; white-space: nowrap }
.seg button[aria-pressed="true"] { background: var(--raised); color: var(--fg); box-shadow: 0 0 0 1px var(--line-2) }
.seg button kbd, .kbd { font: 10.5px 'Geist Mono', monospace; color: var(--faint); margin-left: 4px }
.btn kbd { color: inherit; border-color: currentColor; opacity: .7 }
kbd { font: 11px 'Geist Mono', monospace; padding: 1px 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; color: var(--muted) }
input[type=text], input[type=number], input[type=email], input[type=password], select, textarea { background: var(--sunk); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; width: 100% }
textarea { resize: vertical; min-height: 70px }
input:focus, textarea:focus, select:focus, button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 1px }
/* the sign-in page */
.signin main { display: grid; place-items: center; padding: 24px; overflow: auto }
.signin-box { width: min(360px, 100%); display: grid; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow) }
.signin-box h1 { margin: 0; font-size: 20px }
.signin-box .btn { justify-self: start }
#err { color: var(--bad); margin: 0 }
.who { color: var(--muted); font-size: 12.5px }

label.field, div.field { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted) }
.tries { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px }
.try { margin: 0; width: 180px; display: grid; gap: 6px; align-content: start }
.try img, .table .try img { width: 180px; height: 180px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--sunk); display: block }
.try figcaption { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden }
.try .btn { justify-self: start }
.refpick { display: flex; gap: 14px; align-items: center; border-radius: 8px }
.refpick img { width: 96px; height: 96px; object-fit: contain; background: var(--sunk); border: 1px solid var(--line); border-radius: 8px; flex: none }
.refside { display: grid; gap: 8px; justify-items: start }
.drop { display: block; width: 100%; border: 1px dashed var(--line-2); border-radius: 8px; padding: 18px; text-align: center; color: var(--muted); background: var(--sunk); cursor: pointer }
.refpick.over .drop, .refpick.over img { border-color: var(--accent) }

/* ---------- review ---------- */
.review { display: grid; grid-template-columns: 270px minmax(0, 1fr) 360px; height: 100%; min-height: 0 }
.queue { border-right: 1px solid var(--line); background: var(--panel); display: grid; grid-template-rows: auto 1fr; min-height: 0 }
.queue-head { padding: 12px 12px 8px; display: grid; gap: 8px; border-bottom: 1px solid var(--line) }
.queue-head .seg button { padding: 4px 8px; font-size: 12px }
.queue-list { overflow: auto; padding: 6px }
.qitem { display: grid; grid-template-columns: 64px 1fr; gap: 10px; width: 100%; text-align: left; padding: 7px; border-radius: 9px; border: 1px solid transparent; background: none; align-items: center }
.qitem:hover { background: var(--raised) }
.qitem[aria-current="true"] { background: var(--raised); border-color: var(--line-2) }
.qitem img, .qitem .ph { width: 64px; height: 64px; border-radius: 7px; object-fit: cover; background: var(--sunk); display: block }
.qitem .t { font-size: 12.8px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.qitem .m { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px }
.queue-empty { color: var(--muted); padding: 24px 14px; font-size: 13px }

.stage { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; background: var(--sunk) }
.stage-bar { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap }
.viewport { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 0; cursor: default }
.viewport.zoomed { cursor: grab }
.views { position: absolute; inset: 0; display: flex; gap: 12px; align-items: stretch; justify-content: center; padding: 14px; transform-origin: center; transition: transform .12s ease }
.vbox { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; justify-items: center; min-width: 0; height: 100%; flex: 1 1 0 }
.vbox .cap { font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em }
.vbox video, .vbox img, .vbox canvas { max-width: 100%; max-height: 100%; display: block; border-radius: 6px; background: #000; box-shadow: var(--shadow); object-fit: contain }
.vbox .frame { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; min-width: 0; height: 100%; width: 100% }
canvas.ink { position: absolute; background: transparent !important; box-shadow: none !important; cursor: crosshair; touch-action: none; border-radius: 0 }
.ad-hint { position: absolute; bottom: 10px; left: 50%; translate: -50% 0; font-size: 12px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; white-space: nowrap }

.transport { display: grid; gap: 8px; padding: 10px 14px 8px; background: var(--panel); border-top: 1px solid var(--line) }
.tr-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.tr-row .btn { padding: 5px 10px }
.scrub { position: relative; height: 30px; cursor: pointer; user-select: none }
.scrub .track { position: absolute; left: 0; right: 0; top: 12px; height: 6px; border-radius: 3px; background: var(--sunk); border: 1px solid var(--line) }
.scrub .fill { position: absolute; left: 0; top: 12px; height: 6px; border-radius: 3px; background: var(--accent) }
.scrub .head { position: absolute; top: 6px; width: 2px; height: 18px; background: var(--fg); translate: -1px 0 }
.scrub .mk { position: absolute; top: 2px; width: 2px; height: 8px; translate: -1px 0; background: var(--muted) }
.scrub .mk.mark { background: var(--mark); height: 10px; width: 8px; border-radius: 2px; translate: -4px 0 }
.scrub .trimzone { position: absolute; top: 11px; height: 8px; background: color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 2px }
.scrub .label { position: absolute; top: -3px; font-size: 9.5px; color: var(--faint); translate: -50% 0 }
.time { font-size: 12.5px; color: var(--muted); min-width: 150px }
.strip { display: grid; grid-auto-flow: column; gap: 3px; padding: 0 14px 10px; background: var(--panel); overflow-x: auto }
.strip img { height: 46px; border-radius: 4px; cursor: pointer; opacity: .85 }
.strip img:hover { opacity: 1 }
.inktools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
.inktools .swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line-2) }
.inktools .swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fg) }

.side { border-left: 1px solid var(--line); background: var(--panel); overflow: auto; padding: 16px; display: grid; gap: 16px; align-content: start }
.side h2 { font-size: 16px; margin: 0; letter-spacing: -.01em; text-wrap: balance }
.side h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); margin: 0 0 8px; font-weight: 600 }
.side .sub { color: var(--muted); font-size: 12.5px }
.checks { display: grid; gap: 5px; font-size: 12.8px }
.checks .c { display: flex; gap: 8px; align-items: baseline }
.checks .c b { width: 14px; flex: none; text-align: center }
.checks .ok b { color: var(--good) }
.checks .no b { color: var(--bad) }
.scores { display: flex; flex-wrap: wrap; gap: 4px }
.verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }
.verdicts .btn { padding: 10px 6px; display: grid; gap: 1px; justify-items: center }
.verdicts .btn small { font-weight: 400; opacity: .7; font-size: 11px }
.verdicts .btn[aria-pressed="true"] { box-shadow: 0 0 0 2px currentColor }
.reasons { display: flex; flex-wrap: wrap; gap: 5px }
.reasons button { border: 1px solid var(--line); background: var(--sunk); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: var(--muted) }
.reasons button[aria-pressed="true"] { border-color: var(--bad); color: var(--bad); background: var(--bad-bg) }
.reasons.refine button[aria-pressed="true"] { border-color: var(--warn); color: var(--warn); background: var(--warn-bg) }
.marks { display: grid; gap: 6px }
.markrow { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center }
.markrow img { width: 56px; height: 56px; object-fit: cover; border-radius: 5px; cursor: pointer }
.history { display: grid; gap: 8px; font-size: 12.5px }
.history .h { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 4px; background: var(--raised) }
.history .h img { width: 46px; height: 46px; object-fit: cover; border-radius: 4px }
.savebar { position: sticky; bottom: -16px; background: var(--panel); padding: 10px 0 2px; display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--line) }
.check { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted) }

/* ---------- lists and grids ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 13px }
.table th { text-align: left; color: var(--faint); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; border-bottom: 1px solid var(--line) }
.table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top }
.table tr:hover td { background: var(--panel) }
.table img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; display: block }
.wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel) }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; display: flex; flex-direction: column; min-width: 0 }
.card .media { aspect-ratio: 1; background: var(--sunk); position: relative }
.card .media img, .card .media video { width: 100%; height: 100%; object-fit: cover; display: block }
.card .body { padding: 10px 12px 12px; display: grid; gap: 6px; flex: 1; align-content: start }
.card .body .t { font-weight: 500; font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em }
.card .foot { padding: 0 12px 12px; display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px }
.tile { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 14px 16px }
.tile .v { font-size: 24px; font-weight: 600; letter-spacing: -.02em }
.tile .k { color: var(--muted); font-size: 12.5px }
.section { margin: 26px 0 10px; display: flex; align-items: baseline; gap: 12px }
.section h2 { font-size: 15px; margin: 0 }
.bar { height: 8px; border-radius: 4px; background: var(--sunk); overflow: hidden; min-width: 80px }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px }
.form { display: grid; gap: 14px; max-width: 760px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 18px }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.opts { display: flex; flex-wrap: wrap; gap: 6px }
.opts button { border: 1px solid var(--line); background: var(--sunk); border-radius: 8px; padding: 7px 11px; color: var(--muted); text-align: left }
.opts button[aria-pressed="true"] { border-color: var(--accent); color: var(--fg); background: color-mix(in srgb, var(--accent) 14%, var(--sunk)) }
.opts button small { display: block; color: var(--faint); font-size: 11.5px }
.joblog { font: 11.5px/1.5 'Geist Mono', monospace; color: var(--muted); white-space: pre-wrap; max-height: 120px; overflow: auto; background: var(--sunk); border-radius: 6px; padding: 6px 8px; margin-top: 6px }
.drawer { position: fixed; inset: 52px 0 0 auto; width: min(620px, 100vw); background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow); overflow: auto; padding: 18px; display: grid; gap: 14px; align-content: start; z-index: 5 }
.drawer video { width: 100%; border-radius: 8px; background: #000 }
#toast { position: fixed; bottom: 18px; left: 50%; translate: -50% 0; background: var(--fg); color: var(--bg); padding: 8px 14px; border-radius: 999px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s }
#toast.on { opacity: 1 }
.empty { border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 28px; color: var(--muted); text-align: center }
.help { position: absolute; top: 10px; right: 12px; font-size: 11.5px; color: var(--faint) }
/* a stopped item's tried pictures: small ones open large in the page, not in a new window */
.tryimg { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px }
.drawer.picview { inset: 0; width: auto; background: rgba(0, 0, 0, .72); border: 0; box-shadow: none; padding: 24px; display: grid; place-items: center; z-index: 20 }
.pv-box { display: grid; grid-template-columns: minmax(0, auto) 300px; gap: 18px; align-items: start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); max-width: min(1200px, 100%) }
.pv-box img { max-height: calc(100vh - 100px); max-width: 100%; border-radius: 8px; display: block; background: var(--sunk) }
.pv-side { display: grid; gap: 12px; align-content: start }
.pv-side p { margin: 0; color: var(--fg); line-height: 1.5 }
/* the time sheet: a small bar a day under each person */
.table tr.days td { padding-top: 0; border-top: 0 }
.daybars { display: flex; gap: 4px; align-items: flex-end; height: 44px }
.dayb { display: grid; grid-template-rows: 1fr auto; width: 30px; height: 100%; text-align: center }
.dayb i { align-self: end; display: block; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .8 }
.dayb small { font-size: 10px; color: var(--faint) }
input[type=date] { background: var(--sunk); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; color: inherit; font: inherit }
/* what a reviewer is reviewing for, at the top of the panel */
.guide { border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); padding: 10px 12px; font-size: 12.5px }
.guide summary { cursor: pointer; font-weight: 600; color: var(--fg) }
.guide p { margin: 8px 0; color: var(--muted); line-height: 1.5 }
.glists { display: grid; gap: 8px }
.glists b { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint) }
.glists ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.45 }
.glists ul li::marker { color: var(--good) }
.glists ul.no li::marker { color: var(--bad) }
/* In an ad: the format and sample bar above the ad */
.adbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100% }
/* the last decision, with Undo; the library block at approval */
.undobar { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 8px; padding: 6px 8px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line); font-size: 12.5px }
.undobar span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.libblock { display: grid; gap: 8px }
.libblock .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }