/* Xrero Coder - Xrero brand tokens (teal identity, xrero-tokens.json). No raw colour below the token block. */
:root {
  --x-bg: #ffffff; --x-bg-subtle: #f7f9fa; --x-bg-muted: #f1f4f6;
  --x-fg: #0f1729; --x-fg-2: #3c4257; --x-muted: #5f6673; --x-faint: #6f7682;
  --x-border: #e8eaed; --x-border-strong: #d6d9de;
  --x-shadow-rest: 0 1px 2px rgba(15,23,41,.05); --x-shadow-hover: 0 4px 14px rgba(15,23,41,.08); --x-shadow-pop: 0 12px 36px rgba(15,23,41,.14);
  --x-accent: #04728a; --x-accent-hover: #046277; --x-accent-fg: #ffffff; --x-accent-soft: #ebfbfe; --x-accent-line: #9cebfc;
  --x-success: #15803d; --x-success-soft: #e9f8ef;
  --x-warn: #b45309; --x-warn-soft: #fff7e6;
  --x-danger: #c81e1e; --x-danger-soft: #fef2f2;
  --x-radius-xs: 4px; --x-radius-sm: 6px; --x-radius: 8px; --x-radius-lg: 12px; --x-radius-full: 9999px;
  --x-t: 150ms ease-out;
  --x-top-bg: rgba(255,255,255,.88);
  --x-glow: radial-gradient(60% 50% at 50% 0%, rgba(5,133,161,.12), transparent 70%);
  --x-dots: radial-gradient(rgba(15,23,41,.08) 1px, transparent 1px);
  --x-font: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans Arabic", Tahoma, sans-serif;
  --x-mono: "Geist Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --x-bg: #11161d; --x-bg-subtle: #0b1015; --x-bg-muted: #1a222b;
    --x-fg: #f3f6f8; --x-fg-2: #cfd6dd; --x-muted: #9aa4ae; --x-faint: #85909b;
    --x-border: #232d37; --x-border-strong: #31404c;
    --x-shadow-rest: 0 1px 2px rgba(0,0,0,.4); --x-shadow-hover: 0 4px 14px rgba(0,0,0,.5); --x-shadow-pop: 0 12px 36px rgba(0,0,0,.6);
    --x-accent: #07b8df; --x-accent-hover: #3fd0ef; --x-accent-fg: #03222a; --x-accent-soft: rgba(7,184,223,.13); --x-accent-line: rgba(7,184,223,.45);
    --x-success: #4ade80; --x-success-soft: rgba(34,197,94,.13);
    --x-warn: #fbbf24; --x-warn-soft: rgba(245,158,11,.13);
    --x-danger: #f87171; --x-danger-soft: rgba(239,68,68,.13);
    --x-top-bg: rgba(17,22,29,.88);
    --x-glow: radial-gradient(60% 50% at 50% 0%, rgba(7,184,223,.14), transparent 70%);
    --x-dots: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--x-bg-subtle); color: var(--x-fg); font: 14px/1.5 var(--x-font); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1 { font-size: 22px; font-weight: 650; letter-spacing: -.01em; margin: 8px 0 4px; }
h2 { font-size: 15px; font-weight: 600; margin: 0; }
h3 { font-size: 15px; font-weight: 600; margin: 12px 0 4px; }
.x_muted { color: var(--x-muted); }
.x_faint { color: var(--x-faint); }
.x_num { font-variant-numeric: tabular-nums; }
.x_label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--x-muted); }
.x_eyebrow { display: block; margin-top: 20px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--x-accent); }
.x_error { color: var(--x-danger); margin: 8px 0 0; }
*:focus-visible { outline: 2px solid var(--x-accent); outline-offset: 2px; }
::selection { background: var(--x-accent-line); }

/* logo */
.x_logo { display: inline-flex; }
.x_logo img { display: block; height: 28px; width: auto; }
.x_logo_lg img { height: 40px; }
.x_empty_mark { width: 56px; height: 56px; margin: 0 auto 4px; display: grid; place-items: center; border-radius: var(--x-radius-full);
  background: var(--x-accent-soft); border: 1px solid var(--x-accent-line); }
.x_empty_mark img { display: block; }

/* buttons: five states */
.x_btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; font-weight: 500; border-radius: var(--x-radius-sm);
  border: 1px solid var(--x-border-strong); background: var(--x-bg); color: var(--x-fg); font: inherit; font-size: 13px; cursor: pointer;
  transition: background var(--x-t), border-color var(--x-t), box-shadow var(--x-t), transform var(--x-t); white-space: nowrap; }
.x_btn:hover { background: var(--x-bg-muted); }
.x_btn:active { transform: translateY(1px); }
.x_btn:disabled { opacity: .5; pointer-events: none; }
.x_btn_primary { background: var(--x-accent); border-color: var(--x-accent); color: var(--x-accent-fg); }
.x_btn_primary:hover { background: var(--x-accent-hover); border-color: var(--x-accent-hover); box-shadow: var(--x-shadow-hover); }
.x_btn_primary:active { background: var(--x-accent-hover); }
.x_btn_ghost { border-color: transparent; background: transparent; color: var(--x-fg-2); }
.x_btn_ghost:active { background: var(--x-border); }
.x_btn_ghost.is_busy::after { border-color: var(--x-accent); border-right-color: transparent; }
.x_btn.is_busy { position: relative; color: transparent; }
.x_btn.is_busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--x-accent-fg); border-right-color: transparent; animation: x_spin .8s linear infinite; }
@keyframes x_spin { to { transform: rotate(360deg); } }
.x_icon { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: var(--x-radius-sm); border: 1px solid transparent;
  background: transparent; color: var(--x-muted); cursor: pointer; font: inherit; transition: background var(--x-t), color var(--x-t); }
.x_icon:hover { background: var(--x-bg-muted); color: var(--x-fg); }
.x_icon:disabled { opacity: .4; pointer-events: none; }
.x_icon.is_on_accept { background: var(--x-success-soft); color: var(--x-success); border-color: var(--x-success); }
.x_icon.is_on_reject { background: var(--x-danger-soft); color: var(--x-danger); border-color: var(--x-danger); }

input, select, textarea { font: inherit; color: var(--x-fg); background: var(--x-bg); border: 1px solid var(--x-border-strong);
  border-radius: var(--x-radius-sm); padding: 8px 10px; transition: border-color var(--x-t), box-shadow var(--x-t); width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--x-accent); box-shadow: 0 0 0 3px var(--x-accent-soft); }
label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--x-muted); }
input:hover, select:hover, textarea:hover { border-color: var(--x-faint); }
input:disabled, select:disabled, textarea:disabled, input[readonly] { background: var(--x-bg-muted); color: var(--x-fg-2); }

/* auth */
.x_auth { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 16px; overflow: hidden; }
.x_auth_bg { position: absolute; inset: 0; background-image: var(--x-glow), var(--x-dots); background-size: auto, 24px 24px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 40%, transparent 100%); mask-image: radial-gradient(70% 60% at 50% 30%, #000 40%, transparent 100%); }
.x_auth_card { position: relative; width: min(420px, 100%); background: var(--x-bg); border: 1px solid var(--x-border); border-radius: var(--x-radius-lg);
  box-shadow: var(--x-shadow-pop); padding: 32px 28px 28px; }
.x_auth_card h1 { margin-top: 4px; }
.x_auth_card form { display: grid; gap: 12px; margin-top: 20px; }
.x_auth_card .x_btn { justify-content: center; height: 40px; font-size: 14px; font-weight: 600; margin-top: 4px; }

/* shell */
.x_top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 24px; padding: 0 24px; height: 60px;
  background: var(--x-top-bg); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--x-border); }
.x_brand { display: flex; align-items: center; gap: 12px; flex: none; }
.x_brand_sep { width: 1px; height: 20px; background: var(--x-border-strong); }
.x_product { font-weight: 600; font-size: 15px; color: var(--x-fg); }
.x_tabs { display: flex; gap: 4px; flex: 1; align-self: stretch; }
.x_tab { position: relative; height: 100%; padding: 0 12px; border: 0; background: transparent; color: var(--x-muted);
  font: inherit; font-weight: 500; cursor: pointer; transition: color var(--x-t); white-space: nowrap; }
.x_tab::after { content: ""; position: absolute; inset-inline: 8px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background var(--x-t); }
.x_tab:hover { color: var(--x-fg); }
.x_tab:hover::after { background: var(--x-border-strong); }
.x_tab:active { color: var(--x-accent); }
.x_tab.is_on { color: var(--x-accent); font-weight: 600; }
.x_tab.is_on::after { background: var(--x-accent); }
.x_tab:focus-visible { outline-offset: -8px; border-radius: var(--x-radius-sm); }
.x_user { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.x_user #who { padding: 4px 10px; border-radius: var(--x-radius-full); background: var(--x-bg-muted); color: var(--x-fg-2); font-weight: 500; margin-inline-end: 4px; }
.x_user #who:empty { display: none; }
main { padding: 24px; max-width: 1480px; margin: 0 auto; }
.x_page_head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.x_page_head h1 { margin: 0 0 4px; }
.x_page_head p { margin: 0; max-width: 720px; }
.x_foot { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; padding: 24px 16px 32px; text-align: center; }
.x_foot img { flex: none; }

.x_card { background: var(--x-bg); border: 1px solid var(--x-border); border-radius: var(--x-radius-lg); box-shadow: var(--x-shadow-rest); padding: 20px; }
.x_card + .x_card { margin-top: 16px; }
.x_card_head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.x_actions { display: flex; gap: 8px; flex-wrap: wrap; }
.x_file input { display: none; }

.x_params { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; align-items: end; margin-bottom: 16px; }
.x_params .x_grow { grid-column: span 2; }
.x_release { display: flex; flex-direction: column; gap: 4px; min-width: 0; grid-column: span 2; }
.x_release .x_chip { white-space: normal; height: auto; min-height: 24px; padding: 2px 10px; }
.x_params > * { min-width: 0; }
.x_chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--x-radius-full);
  border: 1px solid var(--x-border); font-size: 12px; font-weight: 600; background: var(--x-bg-muted); color: var(--x-fg-2); white-space: nowrap; }
.x_chip.ok { background: var(--x-success-soft); color: var(--x-success); border-color: transparent; }
.x_chip.rev { background: var(--x-warn-soft); color: var(--x-warn); border-color: transparent; }
.x_chip.err { background: var(--x-danger-soft); color: var(--x-danger); border-color: transparent; }
.x_chip.acc { background: var(--x-accent-soft); color: var(--x-accent); border-color: transparent; }

.x_work { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.x_left { position: sticky; top: 76px; }
#report { min-height: 52vh; resize: vertical; font: 14px/1.6 inherit; unicode-bidi: plaintext; }
.x_viewer { min-height: 52vh; max-height: 70vh; overflow: auto; white-space: pre-wrap; line-height: 1.8; padding: 12px;
  border: 1px solid var(--x-border); border-radius: var(--x-radius); background: var(--x-bg-subtle); unicode-bidi: plaintext; }
.x_viewer mark { padding: 1px 2px; border-radius: var(--x-radius-xs); cursor: pointer; color: inherit; transition: box-shadow var(--x-t); }
.x_viewer mark.s { background: var(--x-success-soft); box-shadow: inset 0 -2px 0 var(--x-success); }
.x_viewer mark.r { background: var(--x-warn-soft); box-shadow: inset 0 -2px 0 var(--x-warn); }
.x_viewer mark.e { background: var(--x-bg-muted); text-decoration: line-through; text-decoration-color: var(--x-faint); }
.x_viewer mark.flash { box-shadow: 0 0 0 2px var(--x-accent); }
.x_warn_box { margin-top: 12px; padding: 8px 12px; border-radius: var(--x-radius); background: var(--x-warn-soft); color: var(--x-warn); font-size: 13px; }

.x_empty { text-align: center; padding: 24px 12px; color: var(--x-muted); }
.x_empty p { max-width: 420px; margin: 4px auto 0; }
.x_empty .x_mark_soft { background: var(--x-accent-soft); color: var(--x-accent); }

.x_codes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.x_code { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px; border: 1px solid var(--x-border);
  border-radius: var(--x-radius); background: var(--x-bg); transition: box-shadow var(--x-t), border-color var(--x-t); }
.x_code:hover { box-shadow: var(--x-shadow-hover); border-color: var(--x-border-strong); }
.x_code { border-inline-start: 3px solid var(--x-accent-line); }
.x_code:first-child { border-inline-start-color: var(--x-accent); }
.x_code.is_rejected { opacity: .55; }
.x_code.is_rejected .x_cval { text-decoration: line-through; }
.x_code.is_excluded { background: var(--x-bg-subtle); }
.x_seq { font-size: 12px; color: var(--x-faint); padding-top: 2px; }
.x_cval { font-family: var(--x-mono); font-weight: 700; font-size: 16px; letter-spacing: .02em; color: var(--x-fg); }
.x_cdesc { color: var(--x-fg-2); }
.x_crow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.x_reason { font-size: 12px; color: var(--x-muted); margin-top: 4px; }
.x_quote { font-size: 12px; color: var(--x-muted); margin-top: 4px; cursor: pointer; border-inline-start: 2px solid var(--x-border-strong); padding-inline-start: 8px; }
.x_quote:hover { color: var(--x-fg); }
.x_path { font-size: 12px; color: var(--x-faint); margin-top: 2px; }
.x_btns { display: flex; gap: 4px; align-items: flex-start; }
.x_opts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.x_opt { height: 24px; padding: 0 8px; border-radius: var(--x-radius-full); border: 1px solid var(--x-border); background: var(--x-bg);
  color: var(--x-fg-2); font: 12px var(--x-mono); cursor: pointer; transition: background var(--x-t), border-color var(--x-t); }
.x_opt:hover { background: var(--x-accent-soft); border-color: var(--x-accent); }
.x_principal { font-size: 12px; font-weight: 600; color: var(--x-accent); }

.x_add { position: relative; margin-top: 12px; }
.x_menu { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 4px; max-height: 320px; overflow: auto;
  background: var(--x-bg); border: 1px solid var(--x-border); border-radius: var(--x-radius); box-shadow: var(--x-shadow-pop); }
.x_menu li { padding: 8px; border-radius: var(--x-radius-sm); cursor: pointer; display: grid; grid-template-columns: 84px 1fr; gap: 8px; font-size: 13px; }
.x_menu li:hover, .x_menu li.is_on { background: var(--x-accent-soft); }
.x_menu b { font-family: var(--x-mono); }

.x_checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.x_checks li { display: grid; grid-template-columns: 72px 1fr; gap: 8px; font-size: 13px; padding: 8px; border-radius: var(--x-radius); background: var(--x-bg-subtle); }
.x_checks li.error { background: var(--x-danger-soft); }
.x_checks li.review { background: var(--x-warn-soft); }
.x_checks .lvl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.x_checks li.error .lvl { color: var(--x-danger); }
.x_checks li.review .lvl { color: var(--x-warn); }
.x_checks li.info .lvl { color: var(--x-muted); }

.x_final_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; margin-bottom: 12px; }
.x_check { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--x-fg-2); margin-bottom: 12px; }
.x_check input { width: auto; }

.x_table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; }
.x_table th { text-align: start; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--x-muted); font-weight: 600;
  padding: 8px; border-bottom: 1px solid var(--x-border); }
.x_table tbody tr { transition: background var(--x-t); }
.x_table tbody tr:hover { background: var(--x-bg-subtle); }
.x_table td { padding: 10px 8px; border-bottom: 1px solid var(--x-border); vertical-align: top; }
.x_table code { font-family: var(--x-mono); font-weight: 600; }

@media (max-width: 1000px) {
  .x_work { grid-template-columns: 1fr; }
  .x_left { position: static; }
  .x_params .x_grow { grid-column: auto; }
}
@media (max-width: 900px) {
  .x_top { flex-wrap: wrap; height: auto; padding: 8px 16px 0; gap: 8px 16px; }
  .x_brand { flex: 1; }
  .x_tabs { order: 3; flex-basis: 100%; height: 44px; overflow-x: auto; scrollbar-width: none; }
  .x_user #who { display: none; }
  .x_left { position: static; }
}
@media (max-width: 640px) {
  main { padding: 16px; }
  .x_page_head h1 { font-size: 20px; }
  .x_card { padding: 16px; }
  .x_table { display: block; overflow-x: auto; white-space: nowrap; }
  .x_user .x_btn { padding: 0 8px; }
  .x_code { grid-template-columns: 20px minmax(0, 1fr); }
  .x_btns { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
}

/* review findings the coder must confirm; keyboard focus on evidence */
.x_checks li .x_ack { margin-inline-start: auto; display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--x-fg-2); white-space: nowrap; }
.x_viewer mark:focus-visible, .x_quote:focus-visible { outline: 2px solid var(--x-accent); outline-offset: 2px; }
.x_users_btns { display: flex; gap: 4px; flex-wrap: wrap; }
.x_users_btns button { font-size: 12px; padding: 2px 8px; }
tr.is_inactive td { color: var(--x-faint); }

.x_notes { list-style: none; margin-top: 4px; }
.x_notes summary { cursor: pointer; font-size: 13px; color: var(--x-muted); padding: 6px 0; }
.x_notes summary:focus-visible { outline: 2px solid var(--x-accent); outline-offset: 2px; }

/* accuracy page */
.x_kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 16px 0; }
.x_kpi { border: 1px solid var(--x-border); border-radius: var(--x-radius-lg); padding: 12px 16px; background: var(--x-bg); box-shadow: var(--x-shadow-rest); }
.x_kpi_lab { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--x-muted); }
.x_kpi_val { font-size: 28px; font-weight: 650; letter-spacing: -.01em; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--x-fg); }
.x_kpi_sub { font-size: 12px; color: var(--x-muted); margin-top: 4px; }
.x_acc_lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.x_acc_list h3 { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.x_acc_list ul { list-style: none; margin: 0; padding: 0; }
.x_acc_list li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--x-border); font-size: 13px; }

/* one control height so labels line up */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select { height: 38px; }
input[type="file"] { padding: 6px; }
.x_params { padding: 20px; }
.x_btn_ghost.x_file { border-color: var(--x-border-strong); background: var(--x-bg); cursor: pointer; }
.x_btn_ghost.x_file:hover { background: var(--x-bg-muted); }
.x_btn_ghost.x_file:focus-within { outline: 2px solid var(--x-accent); outline-offset: 2px; }
.x_release .x_chip { align-self: flex-start; }