@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/fonts/plus-jakarta-sans-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --bg: #f7f7f5; --panel: #ffffff; --text: #1d1d1b; --muted: #6b6b66; --line: #dcdcd6;
  --accent: #1f5fae; --accent-text: #ffffff; --ok: #1e7a3c; --warn: #a1450d; --bad: #b3261e;
  --pill: #ececE6; --review: #f6e3c7; --okbg: #d8efdf; --badbg: #f5d6d3;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161615; --panel: #1f1f1d; --text: #e9e9e4; --muted: #a2a29a; --line: #3a3a36;
    --accent: #6ea8ff; --accent-text: #0d1a2c; --ok: #7fd197; --warn: #f0a868; --bad: #ff8a80;
    --pill: #2c2c29; --review: #4a3a1f; --okbg: #1f3a28; --badbg: #4a2320;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", "Noto Sans", "Noto Sans Arabic", Tahoma, sans-serif; }
a { color: var(--accent); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 1rem; border-bottom: 1px solid var(--line); background: var(--panel); }
.top nav { display: flex; gap: 1rem; align-items: center; }
.brand { font-weight: 600; text-decoration: none; color: var(--text); }
.page { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.queue-head { display: flex; align-items: baseline; justify-content: space-between; }
.queue-head h1 { font-size: 1.3rem; margin: .3rem 0; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin: .5rem 0 1rem; }
.filters { display: flex; gap: .3rem; }
.filters a { padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; color: var(--text); text-transform: capitalize; }
.filters a[aria-current] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
table.queue { width: 100%; border-collapse: collapse; background: var(--panel); }
table.queue th, table.queue td { text-align: start; padding: .4rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.queue th { font-weight: 600; color: var(--muted); font-size: .85rem; }
td.subject { max-width: 480px; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.empty, .hint { color: var(--muted); }
.btn { display: inline-block; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--text); text-decoration: none; cursor: pointer; font: inherit; }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
.pill { display: inline-block; padding: 0 .45rem; border-radius: 999px; background: var(--pill); font-size: .8rem; font-weight: 500; }
.pill.ok { background: var(--okbg); } .pill.needs_review { background: var(--review); }
.pill.not_cv, .pill.failed { background: var(--badbg); }
.notice { padding: .5rem .75rem; border-radius: 4px; background: var(--pill); }
.notice.ok { background: var(--okbg); } .notice.warn { background: var(--review); }

/* labelling page: CV left, form right, each scrolls on its own */
body.labelling { height: 100vh; display: flex; flex-direction: column; }
.split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr); }
.viewer, .side { overflow: auto; padding: .75rem; min-height: 0; }
.viewer { border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; }
.viewer-head .meta { display: flex; flex-wrap: wrap; gap: .75rem; color: var(--muted); margin-bottom: .4rem; }
.viewer-head .meta strong { color: var(--text); }
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: .5rem; }
.tabs button { font: inherit; padding: .25rem .6rem; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 4px 4px 0 0; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.js .doc-panel[data-hidden] { display: none; }
.doc-panel { display: flex; flex-direction: column; gap: .5rem; flex: 1; min-height: 0; }
.filename { margin: 0; color: var(--muted); }
iframe.pdf { width: 100%; flex: 1; min-height: 75vh; border: 1px solid var(--line); background: #fff; }
img.page { width: 100%; height: auto; border: 1px solid var(--line); background: #fff; margin-bottom: .5rem; }
details.text pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel); border: 1px solid var(--line); padding: .5rem; max-height: 60vh; overflow: auto; font-size: 12.5px; unicode-bidi: plaintext; }

.judge { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: .5rem .75rem; margin-bottom: .75rem; }
.judge h2 { font-size: 1rem; margin: .2rem 0 .4rem; }
.judge h3 { font-size: .85rem; margin: .5rem 0 .2rem; color: var(--muted); }
.judge dl { display: grid; grid-template-columns: max-content 1fr; gap: .1rem .75rem; margin: 0; }
.judge dt { color: var(--muted); } .judge dd { margin: 0; }
.judge ul { margin: 0; padding-inline-start: 1.1rem; }
ul.gates li { color: var(--bad); } ul.warnings li { color: var(--warn); }

.label-form { display: flex; flex-direction: column; gap: .55rem; }
.label-form label { display: flex; flex-direction: column; gap: .15rem; color: var(--muted); font-size: .85rem; }
.label-form label.check { flex-direction: row; align-items: center; gap: .35rem; color: var(--text); font-size: .9rem; }
.label-form input, .label-form select, .label-form textarea { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: .3rem .4rem; }
.label-form input:focus, .label-form select:focus, .label-form textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.label-form .bad { border-color: var(--bad); outline: 1px solid var(--bad); }
.label-form .row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.label-form .full input, .label-form .full textarea { width: 100%; }
input.num { width: 7rem; }
fieldset { border: 1px solid var(--line); border-radius: 6px; padding: .4rem .6rem .6rem; margin: 0; }
legend { color: var(--muted); font-size: .85rem; padding: 0 .25rem; }
table.roles { width: 100%; border-collapse: collapse; margin-bottom: .4rem; }
table.roles th { text-align: start; font-weight: 500; color: var(--muted); font-size: .8rem; }
table.roles td { padding: .1rem; }
table.roles input { width: 100%; min-width: 0; }
table.roles input.date { width: 6.5rem; }
.remove-row { font: inherit; border: 0; background: none; color: var(--bad); cursor: pointer; font-size: 1.1rem; }
.flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .15rem .5rem; }
.err { color: var(--bad); margin: 0; font-size: .85rem; }
.actions { position: sticky; bottom: 0; background: var(--bg); padding: .5rem 0; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  body.labelling { height: auto; display: block; }
  .split { display: block; }
  iframe.pdf { min-height: 70vh; }
}

/* header account area */
.brand { display: inline-flex; align-items: center; gap: .45rem; }
.brand img { display: block; }
.main-nav { flex: 1; }
.account { display: flex; align-items: center; gap: .8rem; color: var(--muted); }
.account .who { color: var(--text); }
.pill.role { text-transform: capitalize; }
form.inline { display: inline; margin: 0; }
.linklike { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }
.btn.small { padding: .15rem .5rem; font-size: .85rem; }
.btn.danger { color: var(--bad); border-color: var(--bad); }
.actions-cell { display: flex; flex-wrap: wrap; gap: .3rem; }
fieldset.plain { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
code { font-size: .85em; background: var(--pill); padding: 0 .3rem; border-radius: 3px; }

/* sign-in and password pages */
body.auth-page { min-height: 100vh; }
.auth-wrap { min-height: calc(100vh - 60px); display: grid; place-items: center; padding: 1.5rem 1rem; }
body.auth-page .auth-wrap { min-height: 100vh; }
.auth-card { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 2rem 1.75rem 1.5rem; display: flex; flex-direction: column; gap: .8rem; box-shadow: 0 8px 30px rgba(0,0,0,.06); }
.auth-logo { align-self: center; }
.auth-card h1 { margin: 0; text-align: center; font-size: 1.35rem; }
.auth-sub { margin: -.4rem 0 .4rem; text-align: center; color: var(--muted); }
.auth-card label { display: flex; flex-direction: column; gap: .25rem; color: var(--muted); font-size: .85rem; }
.auth-card input { font: inherit; font-size: 1rem; color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: .55rem .65rem; }
.auth-card input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.btn.wide { width: 100%; padding: .6rem; font-size: 1rem; border-radius: 6px; margin-top: .3rem; }
.auth-foot { text-align: center; color: var(--muted); font-size: .8rem; margin: .2rem 0 0; }
.auth-card .notice { margin: 0; }

/* sign-in (design: SignIn board). Fixed brand colours, light only. */
body.signin-page { background: #FFFFFF; color: #0F1A2E; color-scheme: light;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans", "Noto Sans Arabic", Tahoma, sans-serif; }
.signin-frame { min-height: 100vh; padding: 10px; display: flex; }
.signin-panel { flex: 1; display: flex; gap: 10px; padding: 10px; background: #FFFFFF; border-radius: 24px; min-height: calc(100vh - 20px); }
.signin-brand { position: relative; overflow: hidden; flex: 0 0 44%; max-width: 640px; border-radius: 20px; padding: 52px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px; color: #FFFFFF;
  background: radial-gradient(circle at 100% 100%, rgba(255,255,255,.26), rgba(255,255,255,0) 38%),
              linear-gradient(135deg, #0038E6 0%, #0A7CD5 70%, #3E9BE6 100%); }
.signin-logo { width: 336px; max-width: 100%; height: auto; display: block; }
.signin-pitch { display: flex; flex-direction: column; gap: 16px; }
.signin-headline { margin: 0; font-size: 38px; line-height: 1.18; font-weight: 600; letter-spacing: -.6px; }
.signin-headline span { color: #EDBF9E; }
.signin-lead { margin: 0; max-width: 440px; font-size: 14px; line-height: 1.6; color: #DCE6FF; }
.signin-side { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding: 32px 16px 24px; }
.signin-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 20px; margin-top: auto; }
.signin-head h1 { margin: 0 0 6px; font-size: 26px; font-weight: 600; letter-spacing: -.4px; }
.signin-head p { margin: 0; font-size: 13px; color: #6B7383; }
.signin-banner { margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.5; }
.signin-banner.info { background: #EAF3FC; border: 1px solid #CFE3F6; color: #054F8C; }
.signin-banner.error { background: #FDF1F0; border: 1px solid #F4D4D0; color: #7A271A; }
.signin-field { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; font-weight: 600; color: #3A4353; }
.signin-field input { height: 46px; padding: 0 16px; border: 1px solid #F3F5F8; border-radius: 12px; background: #F3F5F8;
  font: inherit; font-size: 14px; font-weight: 500; color: #0F1A2E; width: 100%; }
.signin-field input:focus { outline: none; background: #FFFFFF; border-color: #0766B5; box-shadow: 0 0 0 3px rgba(7,102,181,.25); }
.signin-field input[aria-invalid="true"] { background: #FFFFFF; border-color: #E8A29A; }
.signin-pw { position: relative; }
.signin-pw input { padding-inline-end: 72px; }
.signin-reveal { position: absolute; inset-inline-end: 6px; top: 7px; height: 32px; padding: 0 12px; border: 0; border-radius: 9px;
  background: transparent; color: #0766B5; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.signin-reveal:hover { background: #EAF3FC; }
.signin-reveal:focus-visible, .signin-submit:focus-visible, .signin-forgot summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(7,102,181,.25); }
.signin-submit { height: 46px; margin-top: 4px; border: 0; border-radius: 23px; background: #0766B5; color: #FFFFFF; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; }
.signin-submit:hover { background: #055A9F; }
.signin-submit:active { background: #044A83; }
.signin-submit[aria-busy="true"] { background: #0766B5; cursor: progress; }
.signin-spin { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #FFFFFF;
  animation: signin-rot .8s linear infinite; }
.signin-submit[aria-busy="true"] .signin-spin { display: inline-block; }
@keyframes signin-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .signin-spin { animation: none; } }
.signin-forgot { text-align: center; font-size: 12.5px; }
.signin-forgot summary { display: inline-block; list-style: none; color: #0766B5; font-weight: 600; cursor: pointer; border-radius: 6px; padding: 2px 4px; }
.signin-forgot summary::-webkit-details-marker { display: none; }
.signin-forgot summary:hover { text-decoration: underline; }
.signin-forgot p { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: #F5F7FA; color: #3A4353; line-height: 1.6; text-align: start; }
.signin-foot { margin: auto 0 0; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; color: #6B7383; }
.signin-foot img { height: 44px; width: auto; display: block; }
@media (max-width: 860px) {
  .signin-frame { padding: 0; }
  .signin-panel { border-radius: 0; flex-direction: column; min-height: 100vh; }
  .signin-brand { flex: none; max-width: none; padding: 24px; gap: 0; }
  .signin-pitch { display: none; }
  .signin-logo { width: 220px; }
  .signin-side { padding: 28px 16px 20px; }
}

/* idle sign-out warning */
.idle-dialog { border: 0; padding: 0; border-radius: 20px; width: min(440px, calc(100vw - 32px)); color: #0F1A2E; background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(15,26,46,.12); }
.idle-dialog::backdrop { background: rgba(15,26,46,.35); }
.idle-box { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.idle-box h2 { margin: 0; font-size: 18px; font-weight: 600; }
.idle-box p { margin: 0; font-size: 13px; line-height: 1.5; color: #3A4353; }
.idle-box .idle-count { font-size: 13px; color: #6B7383; }
.idle-count span { font-size: 28px; font-weight: 500; color: #0F1A2E; font-variant-numeric: tabular-nums; margin-inline-end: 4px; }
.idle-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.idle-actions .btn { height: 40px; padding: 0 18px; border-radius: 20px; }
.idle-box .idle-note { font-size: 12px; color: #6B7383; }
.reset-confirm { display: inline-block; }
.reset-confirm summary { list-style: none; }
.reset-confirm summary::-webkit-details-marker { display: none; }
.reset-confirm[open] form { display: flex; gap: .4rem; align-items: center; margin-top: .3rem; }
.temp-password p { margin: .2rem 0; }
.temp-code { font-size: 1.1rem; padding: .2rem .5rem; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; user-select: all; }