/* AssessWize design system = the TalentWize design system.
   This app is one module of the TalentWize suite and must be indistinguishable
   from it. Every value below is COPIED from the TalentWize repo
   (TalentWize-Workforce-Intelligence: src/styles.css, components/tw/app-shell.tsx,
   components/tw/primitives.tsx) and cross-checked against computed styles of
   that app running locally on 2026-09-14 — not sampled from wireframes and not
   tuned by eye. When TalentWize changes, change this file to match; never the
   other way round.

   Light only: TalentWize has no dark mode, so neither do we (the old
   prefers-color-scheme/[data-theme] blocks are gone on purpose).

   Single source of truth: index.html, admin.html and assessment.html all load
   this file. Don't re-declare tokens in a page's own <style>. */

/* Font: Inter Tight, exactly as TalentWize loads it (Google Fonts, 400–700). */
/* Self-hosted since 2026-10-26 (web/fetch-vendor.sh): Inter Tight and
   Noto Sans Arabic from /vendor/fonts/, so no page reaches Google Fonts.
   A checkout without the vendor files falls back to the system sans-serif
   stack declared in --sans. */
@import url('/vendor/fonts/fonts.css');

:root{
  /* ---- TalentWize tokens (src/styles.css :root) ---- */
  --radius:0.625rem;
  --background:#ffffff; --foreground:#10233c;
  --card:#ffffff;
  --primary:#5b4cf0; --primary-foreground:#ffffff; --primary-deep:#4f46e5;
  --secondary:#f1f4f9; --muted-bg:#f1f4f9; --muted-foreground:#64748b;
  --accent:#eeeafe; --accent-foreground:#4f46e5;
  --destructive:#d64545;
  --border:#e4e8f0; --input:#e4e8f0; --ring:#5b4cf0;
  --navy:#14213d; --teal:#0f8a7a; --slate-blue:#475569; --charcoal:#334155;
  --lavender:#eeeafe; --lavender-mist:#f5f3ff; --canvas:#f8f9fc; --ink-deep:#0b123f;
  --success:#0f8a7a; --warning:#d99000; --risk-c:#d64545; --neutral-data:#64748b;
  --indigo:#4338ca; --violet-strong:#4f46e5;
  --sidebar:#11175a; --sidebar-foreground:#c8cbee; --sidebar-accent:#232a73; --sidebar-border:#2a3183;
  --violet-tint:#f3f1ff; --violet-line:#d9d4ff;
  --teal-tint:#eaf8f5; --teal-line:#bfe3db;
  --amber-tint:#fff7e6; --amber-line:#f0ce95;
  --risk-tint:#fff0f0; --risk-line:#f2c2c2;
  --navy-tint:#f1f4f9; --navy-line:#d3dcea;
  /* tw-panel / tw-elevated shadows */
  --shadow-panel:0 1px 2px rgba(15,23,42,.04),0 4px 12px -6px rgba(15,23,42,.08);
  --shadow-elevated:0 1px 2px rgba(15,23,42,.05),0 10px 28px -14px rgba(15,23,42,.18);

  /* ---- Compatibility aliases: the names this codebase's pages and admin.js
          already use, mapped onto the TalentWize values above. Keep adding
          rules against the TalentWize names; these exist so nothing breaks. ---- */
  --ground:var(--canvas); --surface:var(--card); --sunken:var(--muted-bg); --raise:var(--card);
  --ink:var(--foreground); --muted:var(--muted-foreground); --faint:#94a3b8;
  --hairline:var(--border); --hairstrong:var(--navy-line);
  --violet:var(--primary); --violet-2:var(--primary-deep); --violet-fill:var(--violet-tint);
  --amber:var(--warning); --amber-2:#8a5a00; --amber-fill:var(--amber-tint);
  --pursue:var(--success); --pursue-2:#0b7a6a; --pursue-fill:var(--teal-tint);
  --risk:var(--risk-c); --risk-2:#9b2c2c; --risk-fill:var(--risk-tint);
  --lav:var(--violet-tint);
  --shadow:var(--shadow-panel); --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --sans:"Inter Tight","Inter",ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Code",Consolas,"SF Mono",Menlo,monospace;

  /* sidebar shell (app-shell.tsx) */
  --side-bg:linear-gradient(to bottom,#11175a 0%,#131a66 50%,#0b123f 100%);
  --side-ink:#ffffff; --side-muted:var(--sidebar-foreground); --side-faint:rgba(255,255,255,.45);
  --side-line:rgba(255,255,255,.10); --side-hover:rgba(255,255,255,.10);
  --side-accent:#a99eff;
}

*{box-sizing:border-box}
html{direction:ltr}
/* Arabic: the dir attribute set by js/i18n.js must win over the line above (a stylesheet beats the attribute's default). */
html[dir="rtl"]{direction:rtl}
body{margin:0;background:var(--canvas);color:var(--foreground);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";font-size:14px;line-height:1.5}
h1,h2,h3,h4{color:var(--navy);letter-spacing:-.015em}
a{color:inherit}
button{font-family:inherit}
::placeholder{text-align:left}

/* ---------- app shell: 248px indigo sidebar + 64px top bar + canvas main ---------- */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100dvh;background:var(--canvas);
  color:var(--foreground);font-family:var(--sans);font-size:14px;line-height:1.5;transition:grid-template-columns .2s}
.app.collapsed{grid-template-columns:68px minmax(0,1fr)}
/* No sidebar (no-access / admins-only screens, 2026-10-26): without this the
   content falls into the 248px sidebar track and wraps every few words. */
.app.no-side,.app.no-side.collapsed{grid-template-columns:minmax(0,1fr)}
.main{min-width:0;min-height:0;display:flex;flex-direction:column}

.side{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;min-height:0;
  background:var(--side-bg);color:var(--side-ink);box-shadow:inset -1px 0 0 rgba(255,255,255,.08);overflow:hidden}
/* 64px logo bar with hairline */
/* The logo bar grows to fit the lockup: the product name spans the FULL
   sidebar width (font size fitted by shell.js to the available width), the
   attribution sits right-aligned under it. */
.side-logo{display:flex;align-items:center;min-height:64px;padding:14px 16px 12px;border-bottom:1px solid var(--side-line);flex:none}
.side-logo a{display:flex;align-items:center;text-decoration:none}
.side-logo .logo-mark{height:24px;width:auto;display:none}
/* Product lockup: the module's own name (Inter Tight, the suite's face) over
   the platform attribution, whose "talentwize" is the suite's logo IMAGE so it
   is letter-for-letter their wordmark, W mark included. Same block in the
   candidate header (.lockup.light) with the dark logo variant. */
.lockup{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;width:100%}
.side-logo .lockup{width:100%}
.lk-name{display:block;font-size:36px;font-weight:600;letter-spacing:-.02em;line-height:1;color:#fff;white-space:nowrap}
.lk-powered{display:flex;align-items:center;justify-content:flex-end;gap:5px;font-size:10px;font-weight:500;letter-spacing:.01em;line-height:1;color:rgba(255,255,255,.55);white-space:nowrap}
.lk-powered img{height:12px;width:auto;display:block;opacity:.9}
/* compact variant for horizontal headers (candidate screen) */
.lockup.light{width:auto;gap:3px}
.lockup.light .lk-name{font-size:20px}
.lockup.light .lk-powered img{height:11px}
.lockup.light .lk-name{color:var(--navy)}
.lockup.light .lk-powered{color:var(--muted-foreground)}
.lockup.light .lk-powered img{opacity:1}
.app.collapsed .side-logo{justify-content:center;padding:0}
.app.collapsed .lk-name,.app.collapsed .lk-powered{display:none}
.app.collapsed .side-logo .logo-mark{display:block}
/* "Organization" slot → this app's module identity, same treatment */
.side-module{padding:16px 16px 16px;flex:none}
.side-label{margin:0;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.side-modbox{margin-top:6px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);border-radius:10px;padding:8px 10px;
  font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-modbox .mb-ico{opacity:.5;flex:none}
.app.collapsed .side-module{display:none}
/* organisation switcher (multi-tenancy): the module box is a button; the chevron only shows when there is something to switch to */
.side-org{width:100%;font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:left;position:relative}
.side-org:disabled{cursor:default}
.side-org #orgName{overflow:hidden;text-overflow:ellipsis}
.side-org .org-chev{width:16px;height:16px;flex:none;opacity:.7}
.side-org .org-chev[hidden]{display:none}
.side-module{position:relative}
.org-menu{position:absolute;left:16px;right:16px;top:calc(100% - 8px);z-index:30;background:#fff;color:var(--navy);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 32px -12px rgba(15,23,42,.35);padding:6px;max-height:320px;overflow:auto}
.org-menu[hidden]{display:none}
.org-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 10px;border:none;background:none;border-radius:8px;
  font:inherit;font-size:13px;color:var(--navy);cursor:pointer;text-align:left}
.org-opt:hover{background:var(--canvas)}
.org-opt.current{background:rgba(91,76,240,.08);font-weight:600}
.org-opt small{font-size:11px;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em}
.org-empty{margin:8px 10px;font-size:13px;color:var(--muted-foreground)}
/* organisation forms (Platform tab + Users tab card): a grid of fields, the switches on their own line, the actions below */
.orgform{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.orgform{margin-bottom:16px}
.fld .static{min-height:38px;display:flex;align-items:center;font-size:13px;color:var(--navy);text-transform:none;letter-spacing:0;font-weight:400;line-height:1.4}
.rowbtn{display:inline-flex;align-items:center;font-size:12px;font-weight:600;background:#fff;border:1px solid var(--border);border-radius:7px;padding:5px 10px;color:var(--navy);cursor:pointer;font-family:inherit;transition:.14s;margin-right:4px}
.rowbtn:hover{background:var(--canvas);border-color:#c9cfdd}
.rowbtn.danger{color:var(--risk-2);border-color:var(--risk-line)}
.rowbtn.danger:hover{background:var(--risk-tint)}
.orgform-grid{display:grid;gap:10px 14px}
.orgform-grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
.orgform-grid.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.orgform-grid.cols3,.orgform-grid.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.orgform-grid .fld input{width:100%;box-sizing:border-box;min-width:0}
.orgform-switches{display:flex;gap:22px;flex-wrap:wrap}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--navy);cursor:pointer}
.switch input{width:16px;height:16px;accent-color:var(--primary);margin:0}
.orgform-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:2px;border-top:1px solid var(--border);margin-top:2px;padding-top:12px}
/* stacked label + control, for the denser admin forms (Organisations) */
.fld{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground)}
.fld input,.fld select,.fld textarea{font:inherit;font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--navy)}
.org-off{opacity:.55}
/* Organisations: the setup-command steps (2026-10-27) */
.setup-steps{background:var(--lavender-mist);border:1px solid var(--border);border-radius:13px;padding:14px 18px;margin:0 0 16px;max-width:110ch}
.setup-steps h4{margin:0 0 8px;font-size:15px;font-weight:600;color:var(--navy)}
.setup-steps ol{margin:0 0 8px;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--navy)}
.setup-steps p{margin:0;font-size:13px}
.setup-steps code{font-size:13px}
.setup-steps.attn{border-color:var(--primary)}
.setup-cmd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0}
.setup-cmd code{background:#fff;border:1px solid var(--border);border-radius:8px;padding:6px 10px;overflow-x:auto;max-width:100%}
.contract-banner{background:var(--amber-tint,#fff6e5);border-bottom:1px solid var(--amber-line,#f3d08a);color:#8a5a00;padding:9px 24px;font-size:13px;font-weight:600}
/* sortable table headers (Attempts) */
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--primary-deep)}
th.sortable.sorted::after{content:" \2195";opacity:.6}
th.sortable[aria-sort="ascending"]::after{content:" \2191";opacity:.9}
th.sortable[aria-sort="descending"]::after{content:" \2193";opacity:.9}

/* nav: 40px rows, violet filled active pill with a 3px white bar, like the suite */
.side-nav{flex:1;min-height:0;padding:0 12px 16px;display:flex;flex-direction:column;gap:2px;
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
/* [hidden] must beat the display rule below: an author display: rule overrides the UA [hidden] rule (CLAUDE.md gotcha). Without this the Admin console link showed for every non-admin. */
.adminbtn[hidden]{display:none}
.adminbtn{position:relative;display:flex;align-items:center;gap:12px;margin:0;padding:10px 12px;background:none;border:none;border-radius:10px;
  color:var(--sidebar-foreground);font-size:14px;font-weight:400;cursor:pointer;transition:all .15s;text-decoration:none;text-align:left;width:100%;white-space:nowrap}
.adminbtn:hover{color:#fff;background:var(--side-hover)}
.adminbtn.active{color:#fff;font-weight:600;background:var(--primary);box-shadow:0 8px 20px -8px rgba(91,76,240,.95)}
.adminbtn.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 9999px 9999px 0;background:rgba(255,255,255,.8)}
.adminbtn .ico{width:16px;height:16px;flex:none;opacity:.8}
.adminbtn.active .ico{opacity:1}
.adminbtn .lbl{overflow:hidden;text-overflow:ellipsis}
.app.collapsed .adminbtn{justify-content:center;padding:10px 0}
.app.collapsed .adminbtn .lbl,.app.collapsed .adminbtn.active::before{display:none}
.side-divider{border-top:1px solid var(--side-line);margin:10px 0}
.histlabel{margin:0;padding:6px 12px 4px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.app.collapsed .histlabel{display:none}
.sidespacer{flex:1}

/* footer: avatar + name/role + sign-out icon, then Collapse */
.side-foot{border-top:1px solid var(--side-line);padding:12px;flex:none}
.who{display:flex;align-items:center;gap:12px;min-width:0}
.avatar{flex:none;width:32px;height:32px;border-radius:9999px;background:var(--primary);color:#fff;font-weight:600;font-size:11px;display:flex;align-items:center;justify-content:center}
.whotxt{min-width:0;flex:1}
.who .wnm{margin:0;font-size:12px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .wrole{margin:0;font-size:11px;color:rgba(255,255,255,.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signout{flex:none;display:flex;padding:6px;border-radius:6px;color:rgba(255,255,255,.45);transition:.15s;cursor:pointer}
.signout:hover{color:#fff;background:rgba(255,255,255,.10)}
.signout .ico{width:16px;height:16px}
.collapse{margin-top:12px;display:flex;align-items:center;gap:8px;width:100%;padding:6px 12px;border:none;background:none;border-radius:6px;
  font-size:12px;color:rgba(255,255,255,.55);cursor:pointer;transition:.15s}
.collapse:hover{color:#fff;background:rgba(255,255,255,.10)}
.collapse .ico{width:16px;height:16px}
.app.collapsed .who{justify-content:center}
.app.collapsed .whotxt,.app.collapsed .signout,.app.collapsed .collapse span{display:none}
.app.collapsed .collapse{justify-content:center;padding:6px 0}
.app.collapsed .collapse .ico{transform:rotate(180deg)}

/* top bar: 64px, white/85 + blur, hairline, eyebrow + title */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px;padding:0 24px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);box-shadow:0 1px 2px rgba(15,23,42,.04)}
.tb-left{display:flex;align-items:center;gap:12px;min-width:0}
.tb-eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground);white-space:nowrap}
.tb-context{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-blue,#475569);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-sep{width:1px;height:16px;background:var(--border);flex:none}
.tb-title{font-size:14px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-chip{flex:none;border-radius:9999px;background:var(--violet-tint);padding:2px 10px;font-size:11px;font-weight:700;color:var(--primary-deep);box-shadow:0 0 0 1px var(--violet-line)}
.tb-right{display:flex;align-items:center;gap:8px}
.tb-pill{display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--canvas);border-radius:10px;padding:8px 12px;font-size:12px;color:var(--muted-foreground)}
.tb-pill .ico{width:14px;height:14px}

/* ---------- content ---------- */
/* main: px-6 py-3; inner max-w-[1500px] space-y-3 (app-shell.tsx) */
.page{width:100%;max-width:1500px;margin:0 auto;padding:12px 24px 40px;display:flex;flex-direction:column;gap:12px}
.page > *{margin:0}
/* PageHeader (primitives.tsx): eyebrow with 3px bar, 26px/600 navy title, 13px description, hairline below */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border);padding-bottom:12px}
.page-head .ph-text{max-width:48rem}
.page-head .ph-eyebrow{display:flex;align-items:center;gap:8px;margin:0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
.page-head .ph-eyebrow::before{content:"";width:3px;height:12px;border-radius:9999px;background:var(--primary)}
.page h1,.page-head h1{margin:4px 0 0;font-size:26px;font-weight:600;line-height:1.25;letter-spacing:-.025em;color:var(--navy)}
.pagesub{margin:4px 0 0;font-size:13px;line-height:1.375;color:var(--muted-foreground);max-width:48rem}
.ph-actions{display:flex;align-items:center;gap:8px}
/* Section (primitives.tsx): 15px/600 navy title + 12px description */
.eyebrow{margin:4px 0 -2px;font-size:15px;font-weight:600;letter-spacing:-.025em;color:var(--navy);text-transform:none}
.eyebrow-sub{margin:-8px 0 0;font-size:12px;line-height:1.6;color:var(--muted-foreground);max-width:48rem}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted-foreground)}
.tw-numeric{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tw-scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}

/* tw-panel: the standard card surface */
.tw-panel,.wcard{background:var(--card);border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow-panel);padding:16px}
.tw-elevated{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-elevated)}
.cardrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cardrow .info{flex:1;min-width:240px}
.cardrow .title{font-weight:600;font-size:14px;color:var(--navy);margin-bottom:2px;letter-spacing:-.01em}
.cardrow .meta{color:var(--muted-foreground);font-size:12.5px;line-height:1.6}
.empty{background:var(--card);border:1px dashed var(--navy-line);border-radius:13px;padding:22px;text-align:center;color:var(--muted-foreground);font-size:13px}
/* card stack spacing inside a section */
.cardlist{display:flex;flex-direction:column;gap:10px}

/* buttons — TalentWize violet is the one action colour (.tw-btn-action) */
.gobtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--primary);color:#fff;border:1px solid transparent;border-radius:8px;
  padding:10px 16px;font-weight:600;font-size:14px;line-height:1.25;cursor:pointer;text-decoration:none;font-family:inherit;white-space:nowrap;
  box-shadow:0 6px 16px -8px rgba(91,76,240,.85);transition:background-color .14s}
.gobtn:hover{background:var(--primary-deep)}
.gobtn:disabled{opacity:.45;cursor:not-allowed}
/* the suite's small uppercase CTA (card actions: "GENERATE ASSESSMENT →") */
.gobtn.cta{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;border-radius:8px}
.linkbtn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;background:transparent;border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--navy);cursor:pointer;font-family:inherit;transition:.14s;text-decoration:none}
.linkbtn:hover{background:var(--canvas)}
.linkbtn.danger{color:var(--risk-2);border-color:var(--risk-line)}
.linkbtn.danger:hover{background:var(--risk-tint)}

/* form controls */
input.tin,select.tin,textarea.tin{background:var(--background);border:1px solid var(--input);border-radius:8px;padding:8px 12px;font:inherit;font-size:13.5px;color:var(--navy)}
input.tin:focus,select.tin:focus,textarea.tin:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(91,76,240,.15)}
textarea.tin{width:100%;resize:vertical}

/* tables: 11px uppercase header, 14px navy cells, hairline dividers (divide-y) */
.atablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:13px;background:var(--card)}
.atable{width:100%;border-collapse:collapse;font-size:14px;min-width:640px;background:var(--card)}
.atable th,.atable td{text-align:left;padding:12px 20px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--navy)}
.atable thead th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground);font-weight:600;background:transparent}
.atable tbody tr:last-child td{border-bottom:none}

/* StatusTag (primitives.tsx toneMap): rounded-full, 11px/600, tint + 1px ring */
.chip2{display:inline-flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;padding:2px 10px;border-radius:9999px;white-space:nowrap;border:none}
.c-pursue{color:#0b7a6a;background:#eaf8f5;box-shadow:0 0 0 1px #bfe3db}
.c-risk{color:#9b2c2c;background:#fff0f0;box-shadow:0 0 0 1px #f2c2c2}
.c-amber{color:#8a5a00;background:#fff7e6;box-shadow:0 0 0 1px #f0ce95}
.c-violet{color:var(--primary-deep);background:#f3f1ff;box-shadow:0 0 0 1px #d9d4ff}
.c-low{color:var(--slate-blue);background:#f1f4f9;box-shadow:0 0 0 1px #e4e8f0}

/* KPI number (Metric in primitives.tsx): large navy tabular numeral */
.score-big{font-family:var(--sans);font-size:26px;font-weight:600;line-height:1.1;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* Theme-aware TalentWize logo pairs in page markup: light-only now, so the
   dark-ink variant always shows and the white one never does. */
.tw-logo{display:inline-block;vertical-align:middle}
.tw-logo .tw-dark{display:inline-block}
.tw-logo .tw-light{display:none}

/* inline SVG icon defaults (lucide geometry, 16px, stroke 2) */
.ico{width:16px;height:16px;flex:none}

/* small screens: sidebar stacks above content */
@media (max-width:860px){
  .app,.app.collapsed{grid-template-columns:1fr;min-height:auto}
  .side{position:static;height:auto}
  .side-nav{flex-direction:row;flex-wrap:wrap;padding:8px 12px}
  .side-divider,.histlabel{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition:none!important}}

/* The call-style transcript panels (2026-10-13). */
.evsec{margin-top:12px;border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:#fff}
.evsec>summary{cursor:pointer}
table.transcript td{vertical-align:top;padding:5px 8px;font-size:13px;line-height:1.45}
table.transcript tr.tr-gap td{color:var(--muted-foreground)}
table.transcript tr.tr-note td{color:var(--muted-foreground);font-style:italic}
table.transcript tr.tr-interim td{opacity:.75}
table.transcript tr.tr-line{cursor:pointer}
table.transcript tr.tr-line:hover td{background:#f4f3ff}
.audio-part{display:flex;gap:12px;align-items:center;margin:6px 0;flex-wrap:wrap}
.audio-part audio{height:34px;width:640px;max-width:100%}
tr.ev-near td{background:#fff4d6 !important}

/* Reports section (2026-10-13). */
.rpt-frame{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
.rpt-list{position:sticky;top:76px;display:grid;gap:10px}
.rpt-group-title{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground);margin:4px 0 2px}
.rpt-item{display:block;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:8px;padding:7px 10px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.rpt-item:hover{background:#f4f3ff}
.rpt-item.active{background:#eeedfd;border-color:#d9d6fb;color:var(--primary-deep);font-weight:600}
.rpt-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.rpt-filters .fld{max-width:220px}
.rpt-main{min-width:0}
.rpt-head{margin-bottom:12px}.rpt-head h3{margin:0 0 2px}
.rpt-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:12px}
.rpt-kpi{background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.rpt-kpi .v{font-size:22px;font-weight:600;line-height:1.1}
.rpt-kpi .k{font-size:11.5px;color:var(--muted-foreground);margin-top:3px}
.rpt-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:12px;min-width:0}
.rpt-card h4{margin:0 0 8px;font-size:13px;font-weight:600}
.rpt-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rpt-three{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.rpt-two>.rpt-card{margin-bottom:12px}
.rpt-pick{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:12px}
.rpt-pick .fld{max-width:520px}
.rpt-check{display:flex;align-items:center;gap:6px;font-size:13px}
.rpt-table{width:100%;border-collapse:collapse;font-size:13px}
.rpt-table th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-foreground);text-align:left;padding:6px 8px;border-bottom:1px solid var(--border)}
.rpt-table td{padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:top}
.rpt-table tr.rpt-row-risk td{background:#fff1f1}.rpt-table tr.rpt-row-warn td{background:#fff8e6}
.rpt-mini{font-size:12.5px;margin-top:6px;border-collapse:collapse}.rpt-mini td{padding:3px 8px 3px 0;border-bottom:1px solid var(--border)}
.rpt-funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.rpt-funnel-step{border:1px solid var(--border);border-radius:8px;padding:8px 10px}.rpt-funnel-step .v{font-size:20px;font-weight:600}.rpt-funnel-step .k{font-size:11.5px;color:var(--muted-foreground)}
.rpt-bar{height:8px;background:#eef0f5;border-radius:4px;overflow:hidden;min-width:120px}.rpt-bar i{display:block;height:100%;background:var(--primary)}
.rpt-empty{padding:12px 0}
.rpt-print-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.rpt-print-head .eyebrow{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.rpt-print-head h3{margin:2px 0}
@media (max-width:980px){.rpt-frame{grid-template-columns:1fr}.rpt-list{position:static;display:flex;flex-wrap:wrap;gap:4px}.rpt-group-title{width:100%}.rpt-two{grid-template-columns:1fr}}
@media print{
  body *{visibility:hidden}
  #rptPrint,#rptPrint *{visibility:visible}
  #rptPrint{position:absolute;left:0;top:0;width:100%;padding:16px}
  .rpt-noprint{display:none!important}
  body:not(.rpt-print-answers) #rptAnswers{display:none}
  .rpt-answers details{display:block}.rpt-answers details>summary{display:none}.rpt-answers details:not([open])>*{display:block}
  .rpt-two{grid-template-columns:1fr 1fr}
  canvas{max-height:220px}
}

/* ---- Candidate languages (2026-10-20): language pills on the assessments
   list and the attempts queue, and the translation review grid. ---- */
.langrow{margin-top:4px;display:flex;flex-wrap:wrap;gap:4px}
.pill.lang{background:#eef0fb;color:#3b3f8f;box-shadow:inset 0 0 0 1px #d6d9f5}
.pill.lang.ok{background:#e6f6ef;color:#116a44;box-shadow:inset 0 0 0 1px #bfe8d3}
.pill.lang.review{background:#fff4de;color:#8a5a00;box-shadow:inset 0 0 0 1px #f5dca6}
.pill.lang.stale{background:#fdecec;color:#a12626;box-shadow:inset 0 0 0 1px #f3c2c2}
.trgrid{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.trrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.trrow.trhead{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground);padding-bottom:4px;border-bottom:1px solid var(--border)}
.trrow.trq{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.trrow.tropt .trsrc{padding-inline-start:18px}
.trrow .trsrc{font-size:13px;line-height:1.5;padding-top:6px;white-space:pre-wrap}
.trrow input,.trrow textarea{width:100%;box-sizing:border-box}
.trrow [dir="rtl"]{text-align:right;font-family:"Noto Sans Arabic","Inter Tight",system-ui,sans-serif}
@media (max-width:900px){.trrow{grid-template-columns:1fr}}


/* ---- RTL (2026-10-20): Arabic is right-to-left. <html dir="rtl"> is set by
   js/i18n.js; the layout flips where the stylesheet uses left/right (the
   few remaining physical properties below), everything else is logical. ---- */
[lang="ar"], [lang="ar"] body, [dir="rtl"] .q-card, [lang="ar"] .langpick, [lang="ar"] input, [lang="ar"] textarea, [lang="ar"] button {
  font-family: "Noto Sans Arabic", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
}
[dir="rtl"] { text-align: start; }
[dir="rtl"] .nav a .bar, [dir="rtl"] .nav .active::before { left: auto; right: 0; }
[dir="rtl"] .collapse svg { transform: scaleX(-1); }
[dir="rtl"] .hdr-rail .fill, [dir="rtl"] .rail .fill { transform-origin: right; }
[dir="rtl"] .opt input[type="radio"], [dir="rtl"] .opt input[type="checkbox"] { margin-inline-end: 8px; margin-inline-start: 0; }
[dir="rtl"] .modal-exit-link, [dir="rtl"] .q-part { text-align: start; }
[dir="rtl"] .test-layout { direction: rtl; }
/* Code, SQL and commands inside Arabic content stay left-to-right. */
[dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .freetext[dir="ltr"] { direction: ltr; unicode-bidi: isolate; text-align: left; }
.langslot { display: inline-flex; align-items: center; margin-inline-end: 10px; }
.langpick { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--border, #e4e8f0); border-radius: 8px; background: #fff; color: inherit; }
.langpick.compact { padding: 3px 6px; font-size: 12px; }

/* Knowledge check from a document (2026-11-02): the upload row on the Generate
   panel and the cited source sentence under a draft question. */
.matrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0}
.matrow input[type=file]{font-size:13px;max-width:100%}
.inlinecheck{display:inline-flex;gap:6px;align-items:center;font-weight:400}
.dqsource{font-style:italic;color:var(--muted-foreground);margin-top:6px}