/* Indexing Lab. Majlis tokens (tokens.css); each engine has its own ink. */
:root {
  --ink-free: var(--primary);   --ink-free-soft: var(--primary-soft);
  --ink-jev: var(--info-ink);   --ink-jev-soft: var(--info-bg);
  --ink-haiku: var(--accent-ink); --ink-haiku-soft: var(--accent-soft);   /* accent-ink: 6.4:1 under light text */
  --ocr: #B8862B;
  --focus: #0F4A38;               /* 3:1+ on every light surface; the dark header keeps its gold ring */
  --field-line: #7D766A;          /* input and chip borders: 3:1 against the field */
  --gutter: clamp(16px, 3vw, 40px);
}
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased; }
body[data-tab="free"] { --lane: var(--ink-free); --lane-soft: var(--ink-free-soft); }
body[data-tab="jev"] { --lane: var(--ink-jev); --lane-soft: var(--ink-jev-soft); }
body[data-tab="haiku"] { --lane: var(--ink-haiku); --lane-soft: var(--ink-haiku-soft); }
h1, h2, h3, p, ol, dl, dd { margin: 0; }
ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-3); font-size: 13px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.chrome :focus-visible, .gate :focus-visible { outline-color: var(--chrome-accent); }
.gate-card :focus-visible { outline-color: var(--focus); }
#panel:focus, #results-title:focus { outline: none; }
[hidden] { display: none !important; }

/* buttons */
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-s); padding: 9px 16px;
  min-height: 40px; cursor: pointer; font-weight: 500; transition: background var(--dur) var(--ease), border-color var(--dur); }
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--lane, var(--primary)); color: var(--on-primary); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.12); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--ink-2); padding-inline: 10px; }
.btn.quiet:hover { background: var(--bg-2); }

/* gate */
.gate { min-height: 100vh; display: grid; place-items: center; background: var(--chrome); padding: 16px; }
.gate-card { width: min(380px, 100%); background: var(--surface); border-radius: var(--r-l); padding: 32px;
  display: grid; gap: 12px; box-shadow: var(--sh-2); }
.gate-card h1 { font: 600 26px/1.2 var(--f-body); }
.gate-card p { color: var(--ink-2); }
.gate-card label { font-weight: 500; margin-top: 8px; }
.gate-card input { border: 1px solid var(--field-line); border-radius: var(--r-s); padding: 10px 12px; background: var(--paper); }
.err { color: var(--danger); min-height: 1.4em; font-size: 14px; }
.lab-mark { width: 26px; height: 26px; border-radius: 7px; display: inline-block; flex: none;
  background: conic-gradient(from 45deg, var(--ink-free) 0 33%, var(--ink-jev) 0 66%, var(--ink-haiku) 0); }

/* chrome bar */
.chrome { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 20px;
  padding: 10px var(--gutter); background: var(--chrome); color: var(--on-chrome); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; white-space: nowrap; }
.tabs { display: flex; gap: 4px; margin-inline: auto; background: var(--chrome-fill); padding: 4px; border-radius: 12px; }
.tabs button { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--on-chrome-2);
  padding: 8px 16px; border-radius: 9px; cursor: pointer; min-height: 40px; font-weight: 500; white-space: nowrap; }
.tabs button:hover { background: var(--chrome-hover); color: var(--on-chrome); }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); }
.tabs .dot { width: 9px; height: 9px; border-radius: 50%; }
#tab-free .dot { background: #5FB08E; } #tab-jev .dot { background: #8EA2E6; } #tab-haiku .dot { background: #E19A61; }
#tab-free[aria-selected="true"] .dot { background: var(--ink-free); }
#tab-jev[aria-selected="true"] .dot { background: var(--ink-jev); }
#tab-haiku[aria-selected="true"] .dot { background: var(--ink-haiku); }
.lang { border: 1px solid var(--chrome-line); background: transparent; color: var(--on-chrome); border-radius: 9px;
  min-width: 44px; min-height: 40px; cursor: pointer; font-weight: 600; }
.lang:hover { background: var(--chrome-hover); }

.access-until { font-size: 12.5px; color: var(--chrome-accent-ink); white-space: nowrap; }
.owner-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px var(--gutter);
  background: var(--accent-soft); border-bottom: 1px solid var(--accent-line); font-size: 13px; }
.owner-bar > span:first-child { font-weight: 600; color: var(--accent-ink); }
@media (max-width: 720px) { .access-until { order: 4; width: 100%; text-align: center; } }

/* tab head */
main { padding: 28px var(--gutter) 64px; max-width: 1360px; margin: 0 auto; outline: none; }
.head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: end;
  padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.who h1 { font: 600 clamp(28px, 3.4vw, 40px)/1.1 var(--f-body); color: var(--lane); letter-spacing: -0.01em; }
.who p { color: var(--ink-2); max-width: 62ch; margin-top: 8px; }
.chain { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; counter-reset: c; }
.chain li { font-size: 12.5px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); display: flex; gap: 6px; align-items: center; counter-increment: c; }
.chain li::before { content: counter(c); font-size: 11px; width: 17px; height: 17px; display: grid; place-items: center;
  border-radius: 50%; background: var(--bg-2); color: var(--ink-2); }
.chain li.paid { border-color: var(--accent-line); background: var(--accent-soft); }
.chain li.paid::before { background: var(--accent-ink); color: var(--on-primary); }

.meter { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.meter > div { padding: 12px 18px; display: grid; gap: 2px; min-width: 88px; }
.meter > div + div { border-inline-start: 1px solid var(--line-soft); }
.meter dt { font-size: 12px; color: var(--ink-3); }
.meter dd { font: 600 22px/1.15 var(--f-body); font-variant-numeric: tabular-nums; }
.meter .cost { background: var(--lane-soft); min-width: 150px; }
.meter .cost dd { color: var(--lane); display: grid; }
.meter .cost small { font: 400 12px var(--f-body); color: var(--ink-2); }

/* bench */
.bench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 32px; margin-top: 28px; align-items: start; }
.drop { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 30px 20px; border-radius: var(--r-l);
  border: 2px dashed var(--line); background: var(--surface); cursor: pointer;
  transition: border-color var(--dur), background var(--dur); }
.drop:hover, .drop.over { border-color: var(--lane); background: var(--lane-soft); }
.drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.drop:focus-within { outline: 2px solid var(--chrome-accent); outline-offset: 3px; }
.drop strong { font-size: 17px; font-weight: 600; }
.drop span { color: var(--ink-2); }
.sheet-icon { width: 40px; height: 50px; border-radius: 4px; background: var(--paper); border: 1px solid var(--line);
  display: grid; align-content: start; gap: 5px; padding: 10px 7px; margin-bottom: 6px; box-shadow: var(--sh-1); }
.sheet-icon i { height: 3px; border-radius: 2px; background: var(--lane); opacity: .5; }
.sheet-icon i:nth-child(2) { width: 70%; } .sheet-icon i:nth-child(3) { width: 85%; }

/* live desk */
#desks { display: grid; gap: 14px; margin-top: 16px; }
.desk-host { display: grid; gap: 14px; }
.desk { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden;
  box-shadow: var(--sh-1); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.desk.leaving { opacity: 0; transform: translateY(-6px); }
.desk.is-error { border-color: var(--danger); }
.desk-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.desk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-clock { font: 500 13px var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bar { height: 3px; background: var(--bg-2); }
.bar i { display: block; height: 100%; background: var(--lane); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .4s var(--ease); }
[dir="rtl"] .bar i { transform-origin: 100% 50%; }
.desk-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; padding: 18px 16px 18px; }
.sheet { position: relative; aspect-ratio: 1 / 1.3; background: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden; box-shadow: 0 10px 24px -14px var(--paper-shadow); }
.scan { position: absolute; inset-inline: 0; top: 0; height: 26%; opacity: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--lane) 22%, transparent) 70%, var(--lane) 100%);
  border-bottom: 2px solid var(--lane); }
.sheet.reading .scan { opacity: 1; animation: scan 1.6s cubic-bezier(.45, .05, .55, .95) infinite alternate; }
.sheet.ai .scan { --lane: var(--ink-haiku); }
@keyframes scan { from { transform: translateY(-30%); } to { transform: translateY(300%); } }
.tiles { position: absolute; inset: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(18px, 1fr));
  gap: 4px; align-content: start; }
.tiles i { aspect-ratio: 1 / 1.3; border-radius: 2px; background: var(--bg-2); transition: background .25s; }
.tiles i[data-state="done"] { background: var(--lane); }
.tiles i[data-state="ocr"] { background: var(--ocr); animation: pulse .8s ease-in-out infinite alternate; }
.tiles i[data-state="ocr-done"] { background: var(--ocr); }
@keyframes pulse { to { opacity: .35; } }
.sheet.finished { border-color: var(--lane); }
.live { display: flex; align-items: baseline; gap: 6px; color: var(--ink-2); }
.live-n { font: 600 34px/1 var(--f-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.steps { display: grid; gap: 6px; margin-top: 12px; }
.step { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.step .when { font: 400 12px var(--f-mono); color: var(--ink-3); }
.step .tick { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); }
.step[data-state="now"] .tick { border-color: var(--lane); border-top-color: transparent; animation: spin .8s linear infinite; }
.step[data-state="done"] { color: var(--ink-2); }
.step[data-state="done"] .tick { background: var(--lane); border-color: var(--lane);
  mask: none; box-shadow: inset 0 0 0 2px var(--surface); }
.step[data-state="fail"] { color: var(--danger); }
.step[data-state="fail"] .tick { background: var(--danger); border-color: var(--danger); }
@keyframes spin { to { transform: rotate(360deg); } }

/* results */
.list-head { display: flex; align-items: center; justify-content: space-between; margin: 32px 0 12px; }
.list-head h2, .find h2 { font: 600 18px/1.3 var(--f-body); }
.empty { color: var(--ink-3); padding: 20px; border-radius: var(--r-m); background: var(--surface-2); }
.cards { display: grid; gap: 16px; }
.card { background: var(--surface); border-radius: var(--r-l); border: 1px solid var(--line); padding: 18px 20px 14px;
  border-inline-start: 4px solid var(--lane); }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-name { font: 600 16px/1.3 var(--f-body); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kind { font: 500 11px var(--f-mono); padding: 2px 6px; border-radius: 4px; background: var(--doc-bg); color: var(--doc); }
.card[data-kind="pdf"] .kind { background: var(--pdf-bg); color: var(--pdf); }
.card[data-kind="xlsx"] .kind { background: var(--xls-bg); color: var(--xls); }
.type { font-size: 13px; color: var(--ink-2); background: var(--bg-2); padding: 2px 10px; border-radius: 999px; }
.card-body { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.25fr); gap: 24px; margin-top: 14px; }
.big { display: flex; align-items: baseline; gap: 8px; }
.big b { font: 600 clamp(40px, 5vw, 56px)/1 var(--f-body); color: var(--lane); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em; }
.big span { color: var(--ink-2); }
.count-meta { color: var(--ink-3); font-size: 13px; margin-top: 6px; white-space: pre-wrap; }
.mix { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin-top: 12px; background: var(--bg-2); gap: 2px; }
.mix .ar { background: var(--ink-free); } .mix .en { background: var(--ink-jev); }
.mix-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.mix-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-inline-end: 5px; background: var(--ink-free); }
.mix-legend .en::before { background: var(--ink-jev); }
.check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding: 10px;
  background: var(--surface-2); border-radius: var(--r-m); }
.check label { font-size: 13px; font-weight: 500; }
.check input { width: 96px; border: 1px solid var(--field-line); border-radius: var(--r-s); padding: 6px 10px;
  background: var(--paper); font-variant-numeric: tabular-nums; }
.verdict { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.verdict:empty { padding: 0; }      /* kept in the tree: an <output> that is display:none announces unreliably */
.verdict.ok { background: var(--ok-bg); color: var(--ok-ink); }
.verdict.near { background: var(--warn-bg); color: var(--warn-ink); }
.verdict.off { background: var(--danger-bg); color: var(--danger); }
.card-side { display: grid; gap: 14px; align-content: start; }
.doc-cost { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 14px;
  border-radius: var(--r-m); background: var(--lane-soft); }
.doc-cost .label { width: 100%; font-size: 12px; color: var(--ink-2); }
.doc-cost b { font: 600 22px/1.1 var(--f-body); color: var(--lane); font-variant-numeric: tabular-nums; }
.doc-cost .sar { color: var(--ink-2); font-size: 13px; }
.doc-cost .tok { font: 400 12px var(--f-mono); color: var(--ink-3); }
.card-chain { display: flex; flex-wrap: wrap; gap: 6px; }
.card-chain li { display: flex; gap: 6px; align-items: baseline; font-size: 12.5px; padding: 3px 9px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--line-soft); }
.card-chain small { font-size: 11px; color: var(--ink-3); }
.card-chain li.paid { background: var(--accent-soft); border-color: var(--accent-line); }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: 14px; }
.facts dt { color: var(--ink-3); }
.facts dd { font-weight: 500; overflow-wrap: anywhere; }
.facts dd.none { color: var(--ink-3); font-weight: 400; font-style: italic; }
.keywords { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 14px; }
.keywords .label { font-size: 12px; color: var(--ink-3); margin-inline-end: 4px; }
.kw { font-size: 13px; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); }
.note { margin-top: 10px; font-size: 13px; color: var(--info-ink); background: var(--info-bg); padding: 7px 12px;
  border-radius: var(--r-s); }
.view { margin-top: 8px; margin-inline-start: -10px; }

/* search */
.find { position: sticky; top: 84px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 20px; display: grid; gap: 12px; }
.search { display: flex; gap: 8px; }
.search input { flex: 1; min-width: 0; border: 1px solid var(--field-line); border-radius: var(--r-s); padding: 9px 12px;
  background: var(--paper); }
.try { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { border: 1px solid var(--field-line); background: var(--surface-2); border-radius: 999px; padding: 4px 11px;
  font-size: 13px; cursor: pointer; min-height: 32px; }
.chip:hover { border-color: var(--lane); color: var(--lane); }
.hits { display: grid; gap: 10px; }
.hits[aria-busy="true"] { opacity: .5; }
.hit { padding: 12px; border-radius: var(--r-m); background: var(--surface-2); display: grid; gap: 6px; }
.hit-top { display: flex; gap: 10px; align-items: center; }
.hit-top strong { overflow-wrap: anywhere; font-size: 14px; }
.rank { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px;
  font-weight: 600; background: var(--bg-2); }
.hit:first-child .rank { background: var(--lane); color: var(--on-primary); }
.via { display: flex; gap: 6px; flex-wrap: wrap; }
.via span { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); }
.via .via-meaning { background: var(--ink-free-soft); color: var(--ink-free); }
.via .via-jev, .via .score { background: var(--ink-jev-soft); color: var(--ink-jev); }
.via .via-keywords { background: var(--accent-soft); color: var(--accent-ink); }
.snip { font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }

/* text viewer */
.viewer { width: min(860px, calc(100vw - 32px)); max-height: 85vh; border: 0; border-radius: var(--r-l); padding: 0;
  box-shadow: var(--sh-2); background: var(--surface); color: var(--ink); }
.viewer::backdrop { background: var(--scrim); }
.viewer header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.viewer h2 { font-size: 16px; overflow-wrap: anywhere; }
.viewer pre { margin: 0; padding: 18px; white-space: pre-wrap; font: 400 14px/1.8 var(--f-body); overflow: auto; max-height: 70vh; }

@media (max-width: 1060px) {
  .bench { grid-template-columns: 1fr; }
  .find { position: static; }
  .head { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .chrome { flex-wrap: wrap; gap: 10px; }
  .tabs { order: 3; width: 100%; margin: 0; }
  .tabs button { flex: 1; padding: 8px 6px; justify-content: center; font-size: 13.5px; }
  .lang { margin-inline-start: auto; }
  .meter { display: grid; grid-template-columns: repeat(2, 1fr); }
  .meter > div + div { border-inline-start: 0; }
  .meter > div { border-top: 1px solid var(--line-soft); }
  .card-body { grid-template-columns: 1fr; }
  .desk-body { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .live-n { font-size: 28px; }
}
@media (pointer: coarse) {
  .btn, .chip, .check input { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; }
  .sheet.reading .scan { opacity: .6; transform: none; }
}