/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:#0b1020;
  --ink-2:#373a46;
  --ink-3:#5b6275;
  --ink-4:#646b7d;

  --paper:#ffffff;
  --hover:#f1f4fa;
  --surface:#ffffff;
  --surface-2:#fcfcfd;
  --surface-3:#f6f8fc;

  --line:rgba(11,16,32,.075);
  --line-2:rgba(11,16,32,.13);

  --accent:#2f6bff;
  --accent-deep:#1d4ed8;
  --accent-soft:#e9f0ff;
  --accent-soft-2:#dbe7ff;
  --warn:#c2554a;

  --field-base:47,107,255;
  --field-hot:16,38,98;
  --warn-rgb:194,85,74;

  --hero-1:#ffffff;
  --hero-2:#ffffff;
  --hero-3:#ffffff;
  --well:255,255,255;

  --shadow-1:0 1px 2px rgba(11,16,32,.05);
  --shadow-2:0 1px 2px rgba(11,16,32,.04), 0 10px 40px 5px rgba(194,194,194,.25);
  --shadow-3:0 2px 4px rgba(11,16,32,.05), 0 24px 60px -12px rgba(52,84,160,.28);

  --radius-lg:18px;
  --radius-xl:22px;

  --rail:258px;
  --gloss:inset -4px -6px 25px 0px rgba(201,201,201,.08), inset 4px 4px 10px 0px rgba(29,29,29,.24);

  color-scheme:light;
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box}
/* Author display rules outrank the UA's [hidden] rule, so state it explicitly here.
   Without this, any hidden element that sets display (.notice) renders as an empty strip. */
[hidden]{display:none !important}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Geist","Geist Fallback","IBM Plex Sans Arabic","Noto Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,system-ui,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;
}
svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,SFMono-Regular,Menlo,monospace}
.num{font-variant-numeric:tabular-nums}

/* ============================================================
   SHELL
   ============================================================ */
.app{display:flex;min-height:100vh}

/* ---- rail ---- */
.rail{
  position:sticky;top:0;
  width:var(--rail);flex:0 0 var(--rail);
  height:100vh;
  display:flex;flex-direction:column;
  padding:18px 14px 14px;
  background:var(--paper);
  border-inline-end:1px solid var(--line);
  z-index:40;
}
.brand{display:flex;align-items:center;gap:8px;padding:2px 8px 16px}
.brand-name{font-size:19px;font-weight:600;letter-spacing:-.035em}
.beta{
  font-size:8.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:2.5px 5px;border-radius:4px;
  background:var(--ink);color:var(--surface);
}
.ws{
  display:flex;align-items:center;gap:9px;
  padding:7px 8px;margin-bottom:14px;border-radius:10px;
  transition:background .15s ease;
}
.ws:hover{background:var(--hover)}
.ws-chip{
  width:22px;height:22px;flex:none;border-radius:6px;
  display:grid;place-items:center;
  font-size:11px;font-weight:600;
  background:var(--accent-soft);color:var(--accent-deep);
}
.ws-name{font-weight:600;font-size:14.5px;flex:1;letter-spacing:-.02em}
.ws-collapse{color:var(--ink-4);display:grid;place-items:center;padding:2px;border-radius:6px}
.ws-collapse:hover{color:var(--ink-2)}

.nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;margin:0 -2px;padding:0 2px}
.nav::-webkit-scrollbar{width:0}
.nav-label{
  font-size:11px;font-weight:500;letter-spacing:.01em;
  color:var(--ink-4);padding:16px 10px 5px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:9px;
  color:var(--ink-2);font-size:14px;font-weight:450;
  position:relative;
  transition:background .14s ease,color .14s ease;
}
.nav-item svg{width:16px;height:16px;flex:none;color:var(--ink-3);transition:color .14s ease}
.nav-item:hover{background:var(--hover);color:var(--ink)}
.nav-item:hover svg{color:var(--ink-2)}
.nav-item[aria-current="page"]{background:var(--hover);color:var(--ink);font-weight:500}
.nav-item[aria-current="page"] svg{color:var(--ink)}

.rail-foot{padding-top:12px;display:flex;flex-direction:column;gap:10px}
.feedback{
  width:100%;text-align:start;
  padding:9px 12px;border-radius:11px;
  border:1px solid var(--line-2);
  color:var(--ink-3);font-size:13.5px;
  background:var(--surface-2);
  transition:border-color .15s ease,color .15s ease;
}
.feedback:hover{border-color:var(--accent);color:var(--ink-2)}
.me{display:flex;align-items:center;gap:9px;padding:6px 4px}
.avatar{
  width:24px;height:24px;flex:none;border-radius:7px;
  display:grid;place-items:center;font-size:11px;font-weight:600;
  background:var(--ink);color:var(--paper);
}
.me-name{flex:1;font-size:13.5px;font-weight:500;letter-spacing:-.015em}
.me-gear{color:var(--ink-4);padding:3px;border-radius:7px}
.me-gear:hover{color:var(--ink-2);background:var(--hover)}

/* ---- workbench ---- */
.work{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:14px;
  padding:12px 26px;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.topbar.is-stuck{border-bottom-color:var(--line)}
.menu-btn{display:none;color:var(--ink-2);padding:6px;border-radius:9px}
.omnibox{
  flex:0 1 320px;
  display:flex;align-items:center;gap:9px;
  padding:7px 9px 7px 11px;border-radius:11px;
  border:1px solid var(--line);background:var(--surface);
  color:var(--ink-4);box-shadow:var(--shadow-1);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.omnibox:hover{border-color:var(--line-2)}
.omnibox svg{width:15px;height:15px}
.omnibox span{flex:1;font-size:13.5px;text-align:start}
.kbd{
  font-size:10.5px;letter-spacing:.02em;
  padding:2px 5px;border-radius:5px;
  background:var(--surface-3);border:1px solid var(--line);
  color:var(--ink-3);
}
.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:4px}
.icon-btn{
  width:32px;height:32px;display:grid;place-items:center;
  border-radius:9px;color:var(--ink-3);
  transition:background .14s ease,color .14s ease;
}
.icon-btn:hover{background:var(--hover);color:var(--ink)}
.icon-btn svg{width:17px;height:17px}
.bell{position:relative}
.bell::after{
  content:"";position:absolute;top:7px;inset-inline-end:8px;
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px var(--paper);
}
.top-avatar{
  width:29px;height:29px;border-radius:9px;margin-inline-start:6px;
  display:grid;place-items:center;font-size:12px;font-weight:600;
  background:var(--ink);color:var(--paper);
}

.canvas-area{
  padding:8px 26px 44px;
  display:flex;flex-direction:column;gap:20px;
  max-width:1380px;width:100%;
}

/* ============================================================
   HERO — the signal field
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  border-radius:var(--radius-xl);
  min-height:340px;
  display:grid;place-items:center;
  padding:64px 24px 62px;
  background:
    radial-gradient(120% 130% at 50% -18%, var(--hero-1) 0%, var(--hero-2) 46%, var(--hero-3) 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-1);
  isolation:isolate;
}
#field{position:absolute;inset:0;width:100%;height:100%;z-index:0}
/* template's gradient stops, inverted to open a reading well under the type */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(58% 62% at 50% 44%, rgba(var(--well),.92) 0%, rgba(var(--well),.55) 46%, rgba(var(--well),0) 78%),
    linear-gradient(to top, rgba(var(--well),0) 26.416%, rgba(var(--well),.34) 66.943%);
}
.hero-inner{
  position:relative;z-index:2;
  width:100%;max-width:1200px;
  display:flex;flex-direction:column;align-items:center;gap:22px;
  text-align:center;
}
.hero h1{
  margin:0;
  font-size:clamp(34px,4.4vw,56px);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1.04;
  text-wrap:balance;
  color:var(--ink);
}
.hero h1 em{
  font-family:"Instrument Serif","Instrument Serif Fallback",Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:1.24em;letter-spacing:-.02em;
  padding-inline-end:.02em;
}
.hero p{
  margin:-8px 0 0;
  font-size:16.5px;color:var(--ink-2);opacity:.8;
  max-width:554px;letter-spacing:-.012em;
}

/* ask bar */
.ask{
  width:100%;max-width:568px;
  display:flex;align-items:center;gap:8px;
  padding:8px 8px 8px 22px;
  border-radius:40px;
  background:var(--surface-2);
  border:1px solid var(--line-2);
  box-shadow:0px 10px 40px 5px rgba(194,194,194,.25);
  transition:box-shadow .25s ease,border-color .25s ease,transform .25s cubic-bezier(.2,.7,.2,1);
}
.ask:focus-within{
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow:0 10px 44px 6px rgba(47,107,255,.2);
  transform:translateY(-1px);
}
.ask input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-size:15.5px;letter-spacing:-.015em;padding:6px 0;
}
.ask input::placeholder{color:var(--ink-4)}
.send{
  width:38px;height:38px;flex:none;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #4a82ff 0%, var(--accent) 48%, var(--accent-deep) 100%);
  box-shadow:var(--gloss), 0 6px 16px -4px rgba(47,107,255,.6);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),filter .18s ease;
}
.send:hover{transform:scale(1.055)}
.send:active{transform:scale(.96)}
.send svg{width:17px;height:17px}

/* prompt chips */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;max-width:800px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 17px 9px 14px;border-radius:999px;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ink-2);font-size:14px;font-weight:450;
  box-shadow:var(--shadow-1);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s ease,color .18s ease,border-color .18s ease;
}
.chip svg{width:15px;height:15px;color:var(--ink-3);transition:color .18s ease}
.chip:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px -6px rgba(47,107,255,.3);
  border-color:color-mix(in srgb, var(--accent) 35%, transparent);
  color:var(--ink);
}
.chip:hover svg{color:var(--accent)}

/* ============================================================
   ENTRY CARDS
   ============================================================ */
.entries{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.entry{
  display:flex;align-items:center;gap:18px;
  padding:22px 24px;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-1);
  text-align:start;width:100%;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s cubic-bezier(.2,.7,.2,1);
}
.entry:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow:0 12px 30px -12px rgba(47,107,255,.35);
}
.entry-glyph{
  width:52px;height:52px;flex:none;border-radius:14px;
  display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-deep);
  transition:background .2s ease;
}
.entry:hover .entry-glyph{background:var(--accent-soft-2)}
.entry-glyph svg{width:24px;height:24px}
.entry-body{flex:1;min-width:0}
.entry-title{font-size:15.5px;font-weight:600;letter-spacing:-.022em;margin-bottom:3px}
.entry-sub{font-size:13.5px;color:var(--ink-3);max-width:36ch;line-height:1.45}
.entry-go{color:var(--ink-4);flex:none;transition:transform .2s cubic-bezier(.2,.7,.2,1),color .2s ease}
.entry-go svg{width:19px;height:19px}
.entry:hover .entry-go{transform:translateX(4px);color:var(--accent)}

/* ============================================================
   CONSOLE ROW
   ============================================================ */
.console{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:20px;align-items:start}
.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-1);
}
.panel-head{display:flex;align-items:baseline;gap:12px;padding:20px 22px 0}
.panel-title{font-size:15.5px;font-weight:600;letter-spacing:-.025em}
.panel-note{margin-inline-start:auto;font-size:12px;color:var(--ink-4)}

.tabs{display:flex;gap:18px;padding:14px 22px 0;border-bottom:1px solid var(--line)}
.tab{
  font-size:13.5px;font-weight:500;color:var(--accent-deep);
  padding-bottom:9px;position:relative;
}
.tab::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--accent);border-radius:2px 2px 0 0}

/* stats */
.stats{display:grid;grid-template-columns:repeat(5,1fr);padding:4px 12px 0}
.stat{padding:16px 10px 14px;position:relative}
.stat + .stat::before{
  content:"";position:absolute;inset-inline-start:0;top:20px;bottom:16px;width:1px;background:var(--line);
}
.stat-top{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.stat-top svg{width:15px;height:15px;color:var(--ink-4);flex:none}
.stat-val{font-size:22px;font-weight:600;letter-spacing:-.035em;line-height:1.1}
.stat-key{font-size:11.5px;color:var(--ink-3);letter-spacing:-.005em;white-space:nowrap}

/* heatmap */
.heat{padding:6px 22px 20px}
.heat-grid{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:14px}
.heat-days{
  grid-column:2;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;
  font-size:10.5px;color:var(--ink-4);letter-spacing:.04em;padding-bottom:8px;
}
.heat-day{display:flex;gap:5px}
.heat-labels{display:grid;gap:5px;align-content:start}
.heat-rowname{
  height:13px;display:flex;align-items:center;justify-content:flex-end;
  font-size:11px;color:var(--ink-3);letter-spacing:-.005em;
}
.heat-rows{display:grid;gap:5px;min-width:0}
.heat-row{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.heat-day-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.cell{
  height:13px;border-radius:3px;
  background:rgba(var(--heat-rgb), var(--o));
  animation:breathe 5s ease-in-out infinite;
  animation-delay:var(--d);
}
@keyframes breathe{
  0%,100%{opacity:.86}
  46%{opacity:1}
}
.heat-legend{
  display:flex;align-items:center;gap:7px;justify-content:flex-end;
  padding-top:14px;font-size:11px;color:var(--ink-4);
}
.heat-legend i{width:13px;height:13px;border-radius:3px;display:block;background:rgba(var(--field-base),var(--o))}

/* right column */
.side{display:flex;flex-direction:column;gap:20px}
.models{margin-inline-start:auto;display:flex;align-items:center;gap:9px}
.models svg{width:17px;height:17px}
.copy-prompt{
  margin:16px 22px 22px;width:calc(100% - 44px);
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:26px 16px;border-radius:14px;
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  color:var(--accent-deep);font-size:14px;font-weight:500;letter-spacing:-.015em;
  transition:background .18s ease,transform .18s cubic-bezier(.2,.7,.2,1);
}
.copy-prompt svg{width:16px;height:16px}
.copy-prompt:hover{background:var(--accent-soft-2)}
.copy-prompt:active{transform:scale(.99)}

.link-out{
  margin-inline-start:auto;display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:500;color:var(--accent-deep);
}
.link-out svg{width:13px;height:13px;transition:transform .18s ease}
.link-out:hover svg{transform:translateX(3px)}
.panel-lede{padding:6px 22px 0;font-size:13px;color:var(--ink-3)}

.keyrow{
  display:flex;align-items:center;gap:12px;
  margin:14px 22px 0;padding:12px 12px 12px 13px;
  border:1px solid var(--line-2);border-radius:13px;
  background:var(--surface-2);
}
.keyrow-glyph{
  width:30px;height:30px;flex:none;border-radius:9px;
  display:grid;place-items:center;
  background:var(--surface-3);color:var(--ink-2);border:1px solid var(--line);
}
.keyrow-glyph svg{width:17px;height:17px}
.keyrow-body{flex:1;min-width:0}
.keyrow-name{font-size:13.5px;font-weight:500;letter-spacing:-.02em}
.keyrow-val{font-size:12.5px;color:var(--ink-3);letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy-key{
  width:30px;height:30px;flex:none;border-radius:8px;
  display:grid;place-items:center;color:var(--ink-4);
  transition:background .15s ease,color .15s ease;
}
.copy-key:hover{background:var(--surface-3);color:var(--ink)}
.copy-key svg{width:15px;height:15px}
.key-meta{padding:12px 22px 0;font-size:11.5px;color:var(--ink-4);letter-spacing:-.005em}
.key-meta:last-child{padding-bottom:20px}
.key-meta b{font-weight:500;color:var(--ink-3)}

/* chat fab */
.fab{
  position:fixed;inset-inline-end:22px;bottom:22px;z-index:50;
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line-2);
  box-shadow:var(--shadow-2);
  transition:transform .2s cubic-bezier(.2,.7,.2,1),color .2s ease;
}
.fab:hover{transform:scale(1.07) translateY(-1px);color:var(--accent)}
.fab svg{width:19px;height:19px}

/* toast */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  z-index:60;opacity:0;pointer-events:none;
  padding:9px 16px;border-radius:11px;
  background:var(--ink);color:var(--paper);
  font-size:13px;font-weight:500;letter-spacing:-.01em;
  box-shadow:0 12px 34px -10px rgba(0,0,0,.5);
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.7,.2,1);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* scrim for mobile rail */
.scrim{
  position:fixed;inset:0;z-index:35;background:rgba(8,11,20,.4);
  opacity:0;pointer-events:none;transition:opacity .22s ease;backdrop-filter:blur(2px);
}
body.rail-open .scrim{opacity:1;pointer-events:auto}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .console{grid-template-columns:1fr}
}
@media (max-width:1020px){
  .rail{
    position:fixed;inset-inline-start:0;top:0;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 0 60px rgba(0,0,0,.25);
  }
  body.rail-open .rail{transform:none}
  .menu-btn{display:grid;place-items:center}
  .canvas-area{padding-inline-start:18px;padding-inline-end:18px}
  .topbar{padding-inline-start:14px;padding-inline-end:14px}
  .stats{grid-template-columns:repeat(3,1fr)}
  .stat:nth-child(4)::before{display:none}
}
@media (max-width:760px){
  .entries{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3)::before{display:none}
  .hero{padding:44px 16px 46px;min-height:0}
  .heat-grid{grid-template-columns:44px minmax(0,1fr);column-gap:9px}
  .heat-row,.heat-day{gap:4px}
}
@media (max-width:520px){
  .stats{grid-template-columns:1fr 1fr}
  .chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;width:100%;padding-bottom:4px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .omnibox .kbd{display:none}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ============================================================
   ANSWER PANEL  —  the result of an ask, with its sources
   ============================================================ */
.answer{padding:22px 24px 20px}
.answer-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.answer-label{
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-deep);
}
.answer-model{margin-inline-start:auto;font-size:11px;color:var(--ink-4)}
.answer-body{
  font-size:15px;line-height:1.62;color:var(--ink);
  max-width:68ch;letter-spacing:-.011em;
}
.answer-denied{
  margin:14px 0 0;padding:9px 13px;border-radius:10px;
  font-size:12.5px;color:var(--warn);
  background:color-mix(in srgb, var(--warn) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--warn) 22%, transparent);
}
.answer-sources{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cite{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 12px 7px 8px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--surface-2);
  font-size:12.5px;color:var(--ink-2);max-width:100%;
  transition:border-color .16s ease,transform .16s cubic-bezier(.2,.7,.2,1);
}
.cite:hover{transform:translateY(-1px);border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
.cite-marker{
  flex:none;padding:2px 6px;border-radius:5px;font-size:10.5px;font-weight:500;
  background:var(--accent-soft);color:var(--accent-deep);
}
.cite-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:30ch}
.cite-score{flex:none;color:var(--ink-4);font-size:11px}

/* the ask bar while a question is in flight */
.ask.is-asking .send{animation:pulse-send 1.1s ease-in-out infinite}
@keyframes pulse-send{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.93);opacity:.72}
}

/* ============================================================
   STATE  —  loading, empty, error. A blank panel must never be
   mistakable for a working one.
   ============================================================ */
/* The banner now sits outside the views, directly under the topbar, so it appears on
   every screen and stays put while you scroll. A backend that is down is not a fact
   about Home. */
.notice{
  position:sticky;top:58px;z-index:25;
  margin:10px 26px 0;max-width:1380px;
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:12px;
  background:color-mix(in srgb, var(--warn) 6%, var(--surface));
  border:1px solid color-mix(in srgb, var(--warn) 25%, transparent);
  font-size:13px;color:var(--ink-2);
}
.notice-dot{
  width:7px;height:7px;flex:none;border-radius:50%;background:var(--warn);
  animation:notice-pulse 2s ease-in-out infinite;
}
@keyframes notice-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.notice-text{flex:1}
.notice-text b{font-weight:600;color:var(--ink)}
.notice-retry{
  flex:none;padding:6px 13px;border-radius:9px;
  border:1px solid var(--line-2);background:var(--surface);
  font-size:12.5px;font-weight:500;color:var(--ink-2);
  transition:border-color .15s ease,color .15s ease;
}
.notice-retry:hover{border-color:var(--accent);color:var(--accent-deep)}
.notice-retry[disabled]{opacity:.55;cursor:default}

/* stat tiles while the first fetch is in flight */
.stats.is-loading .stat-val,
.stats.is-loading .stat-key{
  color:transparent;
  background:linear-gradient(90deg, var(--hover) 25%, var(--surface-3) 50%, var(--hover) 75%);
  background-size:200% 100%;
  border-radius:6px;
  animation:shimmer 1.4s linear infinite;
}
.stats.is-loading .stat-top svg{opacity:.25}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* answer panel failure */
.answer-error{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14px;color:var(--ink-2);
}
.answer-error svg{width:17px;height:17px;flex:none;color:var(--warn);margin-top:1px}
.answer-error b{display:block;font-weight:600;color:var(--ink);margin-bottom:2px}

/* ============================================================
   KNOWLEDGE GRAPH  —  definitions only; runtime lives in Monitor
   ============================================================ */
.graph-view{height:calc(100vh - 57px);padding-bottom:20px}
.graph-panel{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.graph-controls{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 22px 14px;border-bottom:1px solid var(--line);
}
.graph-search{
  display:flex;align-items:center;gap:8px;flex:0 1 280px;
  padding:7px 12px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--surface-2);
}
.graph-search svg{width:15px;height:15px;color:var(--ink-4);flex:none}
.graph-search input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:13.5px}
.graph-search input::-webkit-search-cancel-button{display:none}
.graph-classes{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.class-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px 4px 7px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--surface);
  font-size:11.5px;color:var(--ink-2);
  transition:opacity .15s ease,border-color .15s ease;
}
/* Off chips stay readable (AA): a dashed outline, muted text and a faded swatch mark them off. */
.class-chip[aria-pressed="false"]{border-style:dashed;background:transparent;color:var(--ink-3)}
.class-chip[aria-pressed="false"] .class-swatch{opacity:.35}
.class-chip:hover{border-color:var(--accent)}
.class-swatch{width:9px;height:9px;border-radius:50%;flex:none}
.class-count{color:var(--ink-4);font-variant-numeric:tabular-nums}

.graph-stage{position:relative;flex:1;min-height:0}
#graphCanvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}
#graphCanvas:active{cursor:grabbing}

.graph-detail{
  position:absolute;top:16px;inset-inline-end:16px;width:272px;max-height:calc(100% - 32px);
  overflow-y:auto;padding:16px 18px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line-2);
  box-shadow:var(--shadow-2);
}
.graph-detail-class{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:7px;
}
.graph-detail-name{font-size:16px;font-weight:600;letter-spacing:-.025em;line-height:1.25}
.graph-detail-desc{margin:8px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.graph-detail-section{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);
}
.graph-detail-rel{
  display:flex;gap:8px;align-items:baseline;
  padding:6px 0;font-size:12.5px;color:var(--ink-2);border-bottom:1px solid var(--line);
}
.graph-detail-rel:last-child{border-bottom:0}
.graph-detail-rel .rel-name{color:var(--accent-deep);font-size:11.5px;white-space:nowrap}
.graph-detail-rel .rel-target{flex:1;min-width:0}

.graph-empty{
  position:absolute;inset:0;display:grid;place-items:center;margin:0;
  padding:40px;text-align:center;font-size:14px;color:var(--ink-3);max-width:46ch;
  margin-inline:auto;
}
@media (max-width:760px){
  .graph-detail{position:static;width:auto;max-height:none;margin:14px;box-shadow:none}
}

/* ============================================================
   SCOPE  —  which corpora an ask reads. Organisation is on by
   default, so it has to be visible: a default nobody can see is
   a default nobody can trust.
   ============================================================ */
.scope-toggle{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:-6px;cursor:pointer;user-select:none;
  font-size:12.5px;color:var(--ink-3);
}
.scope-toggle input{position:absolute;opacity:0;width:0;height:0}
.scope-track{
  position:relative;width:32px;height:18px;flex:none;border-radius:999px;
  background:var(--line-2);transition:background .18s ease;
}
.scope-knob{
  position:absolute;top:2px;inset-inline-start:2px;width:14px;height:14px;border-radius:50%;
  background:var(--surface);box-shadow:0 1px 3px rgba(11,16,32,.25);
  transition:transform .18s cubic-bezier(.2,.7,.2,1);
}
.scope-toggle input:checked + .scope-track{background:var(--accent)}
.scope-toggle input:checked + .scope-track .scope-knob{transform:translateX(14px)}
.scope-toggle input:focus-visible + .scope-track{outline:2px solid var(--accent);outline-offset:2px}
.scope-toggle:hover .scope-label{color:var(--ink-2)}

/* the scope a citation came from */
.cite-scope{
  flex:none;padding:2px 7px;border-radius:5px;font-size:10px;
  letter-spacing:.04em;text-transform:uppercase;font-weight:600;
}
.cite-scope[data-scope="personal"]{background:var(--surface-3);color:var(--ink-3)}
.cite-scope[data-scope="organisation"]{background:var(--accent-soft);color:var(--accent-deep)}

/* streaming answer: thread controls and the opened source */
.answer-new{
  margin-inline-start:12px;padding:4px 11px;border-radius:8px;
  border:1px solid var(--line-2);background:var(--surface);
  font-size:11.5px;color:var(--ink-3);
  transition:border-color .15s ease,color .15s ease;
}
.answer-new:hover{border-color:var(--accent);color:var(--accent-deep)}
.answer-body{white-space:pre-wrap}
.answer-body:empty::after{
  content:"";display:inline-block;width:8px;height:15px;
  background:var(--accent);vertical-align:-2px;
  animation:caret 1s steps(2) infinite;
}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.answer-source-view{
  margin-top:14px;padding:14px 16px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);
}
.source-title{font-size:12.5px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.source-text{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2)}

/* ============================================================
   SOURCES  —  what the brain has read, and how it was indexed
   ============================================================ */
.sources-view{height:calc(100vh - 57px);padding-bottom:20px}
.sources-panel{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.sources-controls{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 22px;border-bottom:1px solid var(--line);
}
.sources-filters{display:flex;gap:6px;flex-wrap:wrap}
.sources-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;flex:1;min-height:0}
.sources-list{overflow-y:auto;border-inline-end:1px solid var(--line)}
.source-row{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:13px 22px;border-bottom:1px solid var(--line);
  text-align:start;transition:background .14s ease;
}
.source-row:hover{background:var(--hover)}
.source-row[aria-current="true"]{background:var(--accent-soft)}
.source-kind{
  flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--surface-3);color:var(--ink-3);
  font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.source-main{flex:1;min-width:0}
.source-name{font-size:14px;font-weight:500;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.source-meta{font-size:11.5px;color:var(--ink-4);margin-top:2px}
.source-badges{display:flex;gap:5px;flex:none}
.badge{
  padding:2px 7px;border-radius:5px;font-size:10px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
}
.badge[data-kind="shared"]{background:var(--accent-soft);color:var(--accent-deep)}
.badge[data-kind="restricted"]{
  background:color-mix(in srgb, var(--warn) 12%, transparent);color:var(--warn);
}

.sources-detail{overflow-y:auto;padding:20px 22px}
.sources-placeholder{margin:0;font-size:13px;color:var(--ink-4)}
.detail-title{font-size:16px;font-weight:600;letter-spacing:-.025em;line-height:1.25}
.detail-meta{margin:6px 0 0;font-size:12px;color:var(--ink-4)}
.detail-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.detail-action{
  padding:6px 12px;border-radius:9px;font-size:12.5px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);
  transition:border-color .15s ease,color .15s ease;
}
.detail-action:hover{border-color:var(--accent);color:var(--accent-deep)}
.detail-action[data-variant="danger"]:hover{border-color:var(--warn);color:var(--warn)}
.detail-section{
  margin-top:20px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);
}
.chunk{padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.chunk:last-child{border-bottom:0}
.chunk-head{display:flex;gap:8px;align-items:baseline;margin-bottom:4px}
.chunk-ordinal{font-size:10.5px;color:var(--ink-4)}
.chunk-cited{
  margin-inline-start:auto;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent-deep);
}
.chunk-preview{margin:0;line-height:1.5;color:var(--ink-3)}

.dropzone{
  display:flex;align-items:center;gap:11px;
  margin:14px 22px;padding:16px 18px;border-radius:14px;
  border:1.5px dashed var(--line-2);background:var(--surface-2);
  font-size:13px;color:var(--ink-3);transition:border-color .16s ease,background .16s ease;
}
.dropzone svg{width:18px;height:18px;flex:none;color:var(--ink-4)}
.dropzone.is-over{border-color:var(--accent);background:var(--accent-soft)}
.dropzone button{color:var(--accent-deep);text-decoration:underline;font:inherit}
.upload-queue{margin:0 22px 16px;display:flex;flex-direction:column;gap:6px}
.upload-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:10px;background:var(--surface-2);
  border:1px solid var(--line);font-size:12.5px;
}
.upload-item[data-state="failed"]{border-color:color-mix(in srgb, var(--warn) 35%, transparent)}
.upload-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-state{flex:none;font-size:11.5px;color:var(--ink-4)}
.upload-item[data-state="failed"] .upload-state{color:var(--warn)}
.upload-item[data-state="done"] .upload-state{color:var(--accent-deep)}

@media (max-width:980px){
  .sources-body{grid-template-columns:1fr}
  .sources-detail{border-top:1px solid var(--line)}
}

/* ============================================================
   SPLIT SCREENS  —  threads and the review queue share a shape
   ============================================================ */
.split-view{height:calc(100vh - 57px);padding-bottom:20px}
.split-panel{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.split-body{display:grid;grid-template-columns:320px minmax(0,1fr);flex:1;min-height:0}
.split-body.single{grid-template-columns:1fr}
.split-list{overflow-y:auto;border-inline-end:1px solid var(--line)}
.split-list.wide{border-inline-end:0}
.split-detail{overflow-y:auto;padding:20px 24px}

.thread-row{
  display:block;width:100%;text-align:start;
  padding:13px 20px;border-bottom:1px solid var(--line);
  transition:background .14s ease;
}
.thread-row:hover{background:var(--hover)}
.thread-row[aria-current="true"]{background:var(--accent-soft)}
.thread-title{font-size:13.5px;font-weight:500;letter-spacing:-.018em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-meta{font-size:11.5px;color:var(--ink-4);margin-top:2px}

.turn{margin-bottom:22px}
.turn-role{
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:5px;
}
.turn[data-role="user"] .turn-role{color:var(--accent-deep)}
.turn-content{font-size:14px;line-height:1.6;color:var(--ink);white-space:pre-wrap}
/* WP-53b: a stored answer's markdown, rendered */
.turn-content p{margin:0 0 6px}.turn-content ul,.turn-content ol{margin:0 0 6px;padding-inline-start:20px}.turn-content li{margin:2px 0}.turn-content h3,.turn-content h4{font-size:14px;margin:8px 0 4px}
.turn-citations{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}

.review-item{padding:16px 22px;border-bottom:1px solid var(--line)}
.review-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.review-kind{
  padding:2px 7px;border-radius:5px;font-size:10px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  background:var(--surface-3);color:var(--ink-3);
}
.review-title{font-size:14px;font-weight:500;letter-spacing:-.018em;flex:1}
.review-confidence{font-size:11.5px;color:var(--ink-4)}
.review-evidence{
  margin:0 0 12px;padding:10px 13px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--line);
  font-size:12.5px;line-height:1.5;color:var(--ink-2);
}
.review-target{font-size:12px;color:var(--ink-3);margin-bottom:10px}
.review-target b{font-weight:600;color:var(--ink-2)}
.review-actions{display:flex;gap:7px}
.review-status{
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.review-status[data-status="approved"]{color:var(--accent-deep)}
.review-status[data-status="rejected"]{color:var(--warn)}

.nav-badge{
  margin-inline-start:auto;min-width:18px;padding:1px 6px;border-radius:999px;
  background:var(--accent-deep);color:#fff;
  font-size:10.5px;font-weight:600;text-align:center;
  font-variant-numeric:tabular-nums;
}
@media (max-width:980px){ .split-body{grid-template-columns:1fr} }

/* ============================================================
   CONFIGURATION  —  define here, explore in the graph
   ============================================================ */
.configure-view{padding-bottom:28px}
.configure-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.configure-column{padding:20px 24px}
.configure-column + .configure-column{border-inline-start:1px solid var(--line)}
.configure-block + .configure-block{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.configure-heading{margin:0 0 6px;font-size:14px;font-weight:600;letter-spacing:-.022em}
.configure-hint{margin:0 0 14px;font-size:12.5px;color:var(--ink-3);line-height:1.5;max-width:52ch}
.configure-form{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}
.configure-form input[type="text"],
.configure-form select{
  flex:1 1 160px;min-width:0;padding:7px 11px;border-radius:9px;
  border:1px solid var(--line-2);background:var(--surface-2);
  font-size:13px;color:var(--ink);
}
.configure-form input:focus,.configure-form select:focus{outline:2px solid var(--accent);outline-offset:1px}
.scope-toggle.compact{margin:0;flex:0 0 auto}

.config-row{
  display:flex;align-items:baseline;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px;
}
.config-row:last-child{border-bottom:0}
.config-key{color:var(--ink-3);flex:0 0 46%}
.config-value{color:var(--ink);font-variant-numeric:tabular-nums}
.config-warning{
  margin:12px 0 0;padding:10px 13px;border-radius:10px;font-size:12px;line-height:1.5;
  background:color-mix(in srgb, var(--warn) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--warn) 22%, transparent);
  color:var(--ink-2);
}
.key-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;
}
.key-item:last-child{border-bottom:0}
.key-item-main{flex:1;min-width:0}
.key-item-label{font-weight:500;letter-spacing:-.015em}
.key-item-meta{font-size:11px;color:var(--ink-4);margin-top:1px}
.token-reveal{
  margin:10px 0 0;padding:11px 13px;border-radius:10px;
  background:var(--accent-soft);border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  font-size:12px;color:var(--accent-deep);word-break:break-all;
}
.ontology-class-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
@media (max-width:980px){
  .configure-body{grid-template-columns:1fr}
  .configure-column + .configure-column{border-inline-start:0;border-top:1px solid var(--line)}
}

/* ============================================================
   MONITOR  —  what the brain actually did
   ============================================================ */
.live-dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--ink-4);transition:background .2s ease;
}
.live-dot[data-live="true"]{background:#16a34a;animation:live-pulse 2s ease-in-out infinite}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.35}}

.event-row{
  display:grid;grid-template-columns:78px minmax(0,1fr) auto;
  gap:12px;align-items:baseline;
  padding:11px 22px;border-bottom:1px solid var(--line);
  font-size:12.5px;
}
.event-row.is-new{animation:event-in .45s cubic-bezier(.2,.75,.2,1)}
@keyframes event-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.event-kind{
  justify-self:start;padding:2px 8px;border-radius:5px;
  font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  background:var(--surface-3);color:var(--ink-3);
}
.event-kind[data-kind="denied"]{
  background:color-mix(in srgb, var(--warn) 12%, transparent);color:var(--warn);
}
.event-kind[data-kind="ask"]{background:var(--accent-soft);color:var(--accent-deep)}
.event-summary{min-width:0;color:var(--ink-2);line-height:1.5}
.event-summary b{font-weight:600;color:var(--ink)}
.event-aside{color:var(--ink-4);font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.event-detail{
  grid-column:2 / -1;margin-top:6px;padding:9px 12px;border-radius:9px;
  background:var(--surface-2);border:1px solid var(--line);
  font-size:12px;color:var(--ink-3);line-height:1.5;
}
.event-detail b{color:var(--ink-2)}

/* ============================================================
   USAGE  —  what it cost. One measure, one axis, one hue.
   ============================================================ */
.usage-view{padding-bottom:28px}
.usage-body{padding:20px 24px 24px}
.usage-hero{display:flex;flex-wrap:wrap;gap:34px;margin-bottom:26px}
.usage-figure{min-width:120px}
.usage-figure-value{font-size:30px;font-weight:600;letter-spacing:-.04em;line-height:1.05;
  font-variant-numeric:tabular-nums}
.usage-figure-label{font-size:11.5px;color:var(--ink-3);margin-top:3px}

.chart{position:relative;margin-bottom:8px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart-baseline{stroke:var(--line-2);stroke-width:1}
.chart-bar{fill:var(--accent);transition:fill .12s ease}
.chart-bar:hover{fill:var(--accent-deep)}
.chart-hit{fill:transparent;cursor:pointer}
.chart-label{font-size:10px;fill:var(--ink-4)}
.chart-peak{font-size:10.5px;fill:var(--ink-2);font-weight:600}
.chart-tip{
  position:absolute;pointer-events:none;z-index:5;
  padding:7px 11px;border-radius:9px;
  background:var(--ink);color:var(--paper);
  font-size:11.5px;line-height:1.45;white-space:nowrap;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.5);
  transform:translate(-50%, -100%);
}
.chart-caption{font-size:11.5px;color:var(--ink-4);margin:0 0 22px}

.usage-tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
.usage-table{width:100%;border-collapse:collapse;font-size:12.5px}
.usage-table caption{
  text-align:start;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);padding-bottom:8px;
}
.usage-table th{
  text-align:start;font-weight:500;color:var(--ink-4);font-size:11px;
  padding:6px 0;border-bottom:1px solid var(--line-2);
}
.usage-table td{padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.usage-table td.num,.usage-table th.num{text-align:end;font-variant-numeric:tabular-nums}
.usage-table tr:last-child td{border-bottom:0}

/* ============================================================
   COMMAND PALETTE and NOTIFICATIONS
   ============================================================ */
.palette-scrim{position:fixed;inset:0;z-index:70;background:rgba(8,11,20,.32);backdrop-filter:blur(2px)}
.palette{
  position:fixed;z-index:71;top:14vh;left:50%;transform:translateX(-50%);
  width:min(560px,92vw);border-radius:16px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-2);
  box-shadow:0 24px 70px -18px rgba(11,16,32,.45);
}
.palette-input{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.palette-input svg{width:16px;height:16px;color:var(--ink-4);flex:none}
.palette-input input{flex:1;border:0;background:none;outline:none;font-size:15px;letter-spacing:-.015em}
.palette-results{max-height:min(48vh,380px);overflow-y:auto}
.palette-item{
  display:flex;align-items:center;gap:11px;width:100%;text-align:start;
  padding:11px 18px;font-size:13.5px;color:var(--ink-2);
}
.palette-item svg{width:15px;height:15px;color:var(--ink-4);flex:none}
.palette-item[aria-selected="true"]{background:var(--accent-soft);color:var(--ink)}
.palette-item-kind{margin-inline-start:auto;font-size:10.5px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.05em}
.palette-empty{padding:18px;font-size:13px;color:var(--ink-4)}

.notifications{
  position:fixed;z-index:60;top:52px;inset-inline-end:22px;width:min(320px,90vw);
  border-radius:14px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-2);
}
.notifications-head{
  padding:12px 16px;border-bottom:1px solid var(--line);
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);
}
.notification{
  display:block;width:100%;text-align:start;
  padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2);
}
.notification:last-child{border-bottom:0}
.notification:hover{background:var(--hover)}
.notification-text,.notification-meta{display:block}
.notification-meta{font-size:11px;color:var(--ink-4);margin-top:2px}
.notifications-empty{padding:16px;font-size:13px;color:var(--ink-4)}

.stat{cursor:pointer;border-radius:10px;transition:background .14s ease}
.stat:hover{background:var(--hover)}
.cell{cursor:pointer}

/* ============================================================
   EXPLORE  —  what the library is about, and what to ask next
   ============================================================ */
.explore-view{padding-bottom:28px}
.explore-body{padding:20px 24px 24px}
.explore-section{margin-bottom:28px}
.explore-section:last-child{margin-bottom:0}
.explore-heading{margin:0 0 4px;font-size:14px;font-weight:600;letter-spacing:-.022em}
.explore-hint{margin:0 0 14px;font-size:12.5px;color:var(--ink-3);max-width:60ch;line-height:1.5}

.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.topic-card{
  display:block;width:100%;text-align:start;
  padding:14px 16px;border-radius:13px;
  background:var(--surface-2);border:1px solid var(--line);
  transition:border-color .16s ease,transform .16s cubic-bezier(.2,.7,.2,1);
}
.topic-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb, var(--accent) 35%, transparent)}
.topic-terms{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.topic-term{
  padding:2px 8px;border-radius:999px;font-size:11.5px;
  background:var(--accent-soft);color:var(--accent-deep);
}
.topic-meta{font-size:11.5px;color:var(--ink-4)}
.topic-docs{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.45}

.shelf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.shelf-title{
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:8px;
}
.shelf-item{
  display:flex;align-items:baseline;gap:8px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2);
}
.shelf-item:last-child{border-bottom:0}
.shelf-item-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shelf-item-meta{flex:none;font-size:11px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.shelf-empty{font-size:12.5px;color:var(--ink-4);padding:7px 0}

.suggestion{
  display:block;width:100%;text-align:start;
  padding:12px 15px;border-radius:12px;margin-bottom:8px;
  background:var(--surface);border:1px solid var(--line-2);
  font-size:13.5px;color:var(--ink);
  transition:border-color .16s ease;
}
.suggestion:hover{border-color:var(--accent)}
.suggestion-because{display:block;font-size:11.5px;color:var(--ink-4);margin-top:3px}

/* ============================================================
   DIALOGS  —  replaces window.prompt(), which cannot be styled,
   cannot be multi-line, and is suppressed by some browsers.
   ============================================================ */
.dlg{
  border:none;padding:0;border-radius:16px;
  background:var(--surface);color:var(--ink);
  box-shadow:0 24px 64px -16px rgba(16,24,40,.28),0 0 0 1px var(--line);
  max-width:440px;width:calc(100% - 32px);
  /* R19-M1: centred in the space below the synthetic banner, never over it. */
  inset-block-start:var(--banner-bottom,0px);
}
/* R19-M1: the dim and blur start below the banner, so it stays readable over a dialog.
   dialog.js sets --banner-bottom on the dialog when it opens; ::backdrop inherits it. */
.dlg::backdrop{inset-block-start:var(--banner-bottom,0px);background:rgba(16,24,40,.32);backdrop-filter:blur(2px)}
.dlg-body{display:flex;flex-direction:column;gap:12px;padding:22px}
.dlg-title{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0}
.dlg-message{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.55}
.dlg-label{font-size:12px;color:var(--ink-2)}
.dlg-input{
  width:100%;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--paper);
  font:inherit;font-size:14px;color:var(--ink);resize:vertical;
}
.dlg-input:focus{outline:none;border-color:var(--accent)}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.dlg-btn{
  padding:8px 15px;border-radius:9px;
  border:1px solid var(--line-2);background:var(--surface);
  font-size:13px;font-weight:500;color:var(--ink-2);
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.dlg-btn:hover{border-color:var(--ink-2);color:var(--ink)}
.dlg-btn.is-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.dlg-btn.is-primary:hover{filter:brightness(1.06)}
.dlg-btn.is-danger{background:var(--warn);border-color:var(--warn);color:#fff}
.dlg-btn.is-danger:hover{filter:brightness(1.06)}
.dlg-btn[disabled]{opacity:.45;cursor:default}
.dlg-btn[disabled]:hover{border-color:var(--line-2);color:var(--ink-2)}

/* ============================================================
   SETTINGS and WORKSPACE
   ============================================================ */
.settings-body,.workspace-body{display:flex;flex-direction:column;gap:26px;padding:4px 2px}
.settings-group,.ws-section{display:flex;flex-direction:column;gap:2px}
.settings-group-title{
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3,var(--ink-2));margin:0 0 8px;
}
.settings-row{
  display:flex;align-items:center;gap:20px;
  padding:14px 2px;border-bottom:1px solid var(--line);
}
.settings-row:last-child{border-bottom:none}
.settings-row-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.settings-row-label{font-size:14px;color:var(--ink);font-weight:500}
.settings-row-detail{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.settings-row-fixed{font-size:12.5px;color:var(--ink-2);flex:none}
.settings-foot{font-size:12.5px;color:var(--ink-2);margin:0}
.settings-foot a{color:var(--accent-deep,var(--accent));text-decoration:underline}
.settings-foot a:hover{text-decoration:underline}

/* switch */
.switch{flex:none;display:inline-flex;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-track{
  width:38px;height:22px;border-radius:999px;background:var(--line-2);
  position:relative;transition:background .18s ease;
}
.switch-track::after{
  content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.25);transition:transform .18s ease;
}
.switch input:checked + .switch-track{background:var(--accent)}
.switch input:checked + .switch-track::after{transform:translateX(16px)}
.switch input:focus-visible + .switch-track{outline:2px solid var(--accent);outline-offset:2px}

/* workspace scopes */
.ws-scopes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.ws-scope{
  display:flex;flex-direction:column;gap:3px;
  padding:16px;border-radius:13px;border:1px solid var(--line);background:var(--surface);
}
.ws-scope-count{font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.ws-scope-label{font-size:13px;font-weight:500;color:var(--ink)}
.ws-scope-detail{font-size:12px;color:var(--ink-2);line-height:1.5}
.ws-list{display:flex;flex-direction:column}
.ws-row{
  display:flex;align-items:center;gap:20px;
  padding:13px 2px;border-bottom:1px solid var(--line);
}
.ws-row:last-child{border-bottom:none}
.ws-row-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.ws-row-title{font-size:14px;color:var(--ink);font-weight:500}
.ws-row-detail{font-size:12.5px;color:var(--ink-2)}

/* element list in Configuration */
.element-list{display:flex;flex-direction:column;max-height:340px;overflow:auto;margin-top:8px}
.element-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 2px;border-bottom:1px solid var(--line);
}
.element-item:last-child{border-bottom:none}
.element-item-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.element-item-name{
  font-size:13.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.element-item-class{font-size:11.5px;color:var(--ink-2)}

/* ============================================================
   TABS and the METAMODEL WORKBENCH
   ============================================================ */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 18px}
.tab{
  padding:9px 15px;border:none;background:none;
  font-size:13.5px;font-weight:500;color:var(--ink-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s ease,border-color .15s ease;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--accent-deep,var(--accent));border-bottom-color:var(--accent)}

.mm-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.mm-version{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)}
.mm-version select{
  padding:7px 10px;border-radius:9px;border:1px solid var(--line-2);
  background:var(--surface);font:inherit;font-size:13px;color:var(--ink);
}
.mm-spacer{flex:1}
.mm-badge{
  padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  background:var(--hover);color:var(--ink-2);
}
.mm-badge[data-status="active"]{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent-deep,var(--accent))}
.mm-badge[data-status="draft"]{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
a.dlg-btn{display:inline-flex;align-items:center;text-decoration:none}
.dlg-btn[disabled]{pointer-events:none}
.mm-note{font-size:12.5px;color:var(--ink-2);margin:0 0 12px}

.mm-report{
  padding:13px 15px;border-radius:11px;margin:0 0 14px;
  border:1px solid color-mix(in srgb,var(--warn) 25%,transparent);
  background:color-mix(in srgb,var(--warn) 6%,var(--surface));
}
.mm-report[data-ok="true"]{
  border-color:color-mix(in srgb,var(--accent) 25%,transparent);
  background:color-mix(in srgb,var(--accent) 5%,var(--surface));
}
.mm-report-head{margin:0;font-size:13px;font-weight:500;color:var(--ink)}
.mm-report-list{margin:9px 0 6px;padding-inline-start:18px;font-size:12.5px;color:var(--ink-2);line-height:1.7}

.mm-body{display:grid;grid-template-columns:minmax(200px,1fr) minmax(280px,1.5fr) minmax(220px,1.1fr);gap:16px}
@media (max-width:1100px){.mm-body{grid-template-columns:1fr}}
.mm-pane{
  border:1px solid var(--line);border-radius:13px;padding:14px;
  background:var(--surface);min-width:0;
}
.mm-tree{max-height:560px;overflow:auto}
.mm-pane-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mm-pane-head .configure-heading{margin:0;flex:1}
.mm-add{
  border:1px solid var(--line-2);background:var(--surface);border-radius:8px;
  padding:3px 8px;font-size:11.5px;color:var(--ink-2);
}
.mm-add:hover:not([disabled]){border-color:var(--accent);color:var(--accent-deep,var(--accent))}
.mm-add[disabled]{opacity:.4;cursor:default}

.mm-layer{margin-bottom:14px}
.mm-layer-head{display:flex;align-items:center;gap:7px}
.mm-layer-name{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);flex:1}
.mm-layer-count{font-size:11px;color:var(--ink-2);background:var(--hover);padding:1px 7px;border-radius:999px}
.mm-layer-note{font-size:11.5px;color:var(--ink-2);margin:3px 0 6px;line-height:1.5}
.mm-class-list{display:flex;flex-direction:column;gap:1px;margin-top:5px}
.mm-class{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:6px 9px;border:none;border-radius:8px;background:none;
  font-size:13px;color:var(--ink);text-align:start;
}
.mm-class span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-class:hover{background:var(--hover)}
.mm-class.is-on{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent-deep,var(--accent));font-weight:500}
.mm-prop-count{font-size:10.5px;color:var(--ink-2);background:var(--hover);padding:1px 6px;border-radius:999px}

.mm-class-desc{font-size:13px;color:var(--ink-2);line-height:1.6;margin:0 0 12px}
.mm-actions{display:flex;gap:7px;margin-bottom:18px}
.mm-props{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}
.mm-props th{
  text-align:start;font-weight:500;color:var(--ink-2);font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;padding:0 8px 6px 0;
}
.mm-props td{padding:7px 8px 7px 0;border-top:1px solid var(--line);color:var(--ink)}
.mm-remove{
  border:none;background:none;color:var(--ink-2);font-size:15px;line-height:1;
  padding:0 4px;border-radius:6px;
}
.mm-remove:hover:not([disabled]){color:var(--warn);background:var(--hover)}
.mm-remove[disabled]{opacity:.3;cursor:default}

.mm-rel-list{display:flex;flex-direction:column;margin-top:6px}
.mm-rel{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line)}
.mm-rel:first-child{border-top:none}
.mm-rel-text{flex:1;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.mm-rel-text b{color:var(--ink);font-weight:500}

/* ============================================================
   THE MODEL EXPLORER  —  reading the graph through the metamodel
   ============================================================ */
.graph-layers{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.layer-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--surface);
  font-size:12px;color:var(--ink-2);
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.layer-chip:hover{border-color:var(--ink-2);color:var(--ink)}
.layer-chip[aria-pressed="true"]{
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent) 35%,transparent);
  color:var(--accent-deep,var(--accent));font-weight:500;
}
.graph-detail-layer{
  margin-inline-start:auto;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);background:var(--hover);padding:1px 7px;border-radius:999px;
}
.graph-detail-hint{font-size:12px;color:var(--ink-2);line-height:1.55;margin:4px 0 2px}
.graph-detail-rel.is-gap{opacity:.85}
.graph-detail-rel.is-gap .rel-name{color:var(--ink-2)}
.gap-count{
  display:block;font-size:10.5px;color:var(--ink-2);opacity:.8;margin-top:1px;
}


/* ==========================================================
   WP10 — right to left, the synthetic banner, evidence, alerts and brief
   ========================================================== */

/* Arabic reads better in a face drawn for it, a touch larger and taller. */
:lang(ar){font-family:"IBM Plex Sans Arabic","Noto Sans Arabic","Geist","Segoe UI",Tahoma,system-ui,sans-serif}
html[lang="ar"] body{line-height:1.7}

/* Content in either language: each paragraph takes the direction of its own first strong
   character, so an Arabic passage in an English UI (and the reverse) never scrambles. */
.answer-body,.source-text,.source-title,.cite-title,.claim-text,.evidence-answer,
.node-name,.alert-card dd,.brief li,.detail-title,.thread-title,.review-title,.source-row-title{unicode-bidi:plaintext}

/* Mirror what logical properties cannot: movement and arrows. */
[dir="rtl"] .entry-go svg,[dir="rtl"] .link-out svg,[dir="rtl"] .i-arrow-right{transform:scaleX(-1)}
[dir="rtl"] .entry:hover .entry-go{transform:translateX(-4px)}
[dir="rtl"] .link-out:hover svg{transform:scaleX(-1) translateX(3px)}
[dir="rtl"] .scope-toggle input:checked + .scope-track .scope-knob{transform:translateX(-14px)}
[dir="rtl"] .switch input:checked + .switch-track::after{transform:translateX(-16px)}
@media (max-width:1020px){
  [dir="rtl"] .rail{transform:translateX(100%)}
  [dir="rtl"] body.rail-open .rail{transform:none}
}
.mono,[dir="ltr"]{unicode-bidi:isolate}

/* Language toggle */
.lang-toggle{
  min-width:32px;height:29px;padding:0 8px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
.lang-toggle:hover{border-color:var(--accent);color:var(--accent-deep)}

/* The synthetic banner: persistent, on every screen, impossible to miss. */
.synthetic-banner{
  position:sticky;top:0;z-index:90;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;
  padding:9px 16px;background:#b42318;color:#fff;font-size:13.5px;letter-spacing:.02em;text-align:center;
  box-shadow:0 2px 6px rgba(16,24,40,.18);
}
.synthetic-banner[hidden]{display:none}
.synthetic-tag{
  display:inline-block;margin-inline-start:6px;padding:1px 7px;border-radius:999px;
  background:rgba(180,35,24,.1);color:#b42318;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
}

/* Evidence path */
.answer-evidence{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.answer-evidence summary{cursor:pointer;font-weight:600;color:var(--ink-2)}
.evidence{display:flex;flex-direction:column;gap:12px;margin-top:10px;font-size:13.5px}
.evidence-synthetic{margin:0;padding:8px 12px;border-radius:8px;background:rgba(180,35,24,.08);color:#b42318;display:flex;gap:12px;flex-wrap:wrap}
.graph-status,.evidence-truncated,.evidence-withheld,.evidence-scope-held,.evidence-span-note,.evidence-absent p{
  margin:0;padding:8px 12px;border-radius:8px;background:var(--surface-2,#f6f7f9);border-inline-start:3px solid var(--warn,#d97706);
}
.graph-status.is-error{border-inline-start-color:#b42318}
.evidence-answer{line-height:1.75;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
mark.claim{background:transparent;border-bottom:2px solid;padding:0 1px;color:inherit}
mark.claim.is-supported{border-color:#12805c;background:rgba(18,128,92,.07)}
mark.claim.is-unsupported{border-color:#b42318;border-bottom-style:dashed;background:rgba(180,35,24,.06)}
.marker{font-family:"Geist Mono",ui-monospace,monospace;font-size:.85em;color:var(--accent-deep);text-decoration:none;unicode-bidi:isolate}
.marker.is-dropped{color:var(--ink-4)}
.evidence-claims{margin:0;padding-inline-start:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.claim-card{padding:10px 12px;border:1px solid var(--line);border-radius:8px;border-inline-start:3px solid #12805c}
.claim-card.is-unsupported{border-inline-start-color:#b42318}
.claim-id,.claim-kind{font-size:11px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.05em}
.claim-state{font-size:12px;font-weight:600}
.claim-card.is-unsupported .claim-state{color:#b42318}
.claim-text{margin:6px 0 4px}
.claim-markers{margin:0;font-size:12px;color:var(--ink-4)}
.evidence-path{margin-top:8px;padding:8px 10px;border-radius:6px;background:var(--surface-2,#f6f7f9)}
.path-nodes,.path-hops{margin:0;padding-inline-start:18px}
.node-class,.hop-rel{font-size:11px;color:var(--ink-4)}
.scope-chip{display:inline-block;padding:0 7px;border-radius:999px;border:1px solid var(--line);font-size:11px;color:var(--ink-3)}
.scope-chip.is-unknown{border-style:dashed}
.ref-link{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;color:var(--accent-deep)}
.evidence-markers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.evidence-markers h2,.evidence-linked h2{margin:0 0 4px;font-size:12px;color:var(--ink-3)}
.evidence-markers ul,.evidence-linked ul{margin:0;padding-inline-start:16px}
.marker-tag{color:var(--accent-deep)}
.evidence-refs{width:100%;border-collapse:collapse;font-size:12px}
.evidence-refs th,.evidence-refs td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.evidence-queries summary{cursor:pointer;color:var(--ink-3)}
.evidence-queries pre{white-space:pre-wrap;word-break:break-word;margin:4px 0;padding:8px;border-radius:6px;background:var(--surface-2,#f6f7f9);font-size:11.5px;text-align:start}

/* Alerts and weekly brief */
.briefing-body{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;padding:4px 0}
.briefing-alerts{display:flex;flex-direction:column;gap:12px}
.alert-card{border:1px solid var(--line);border-radius:10px;padding:14px 16px;border-inline-start:4px solid var(--accent)}
.alert-card.severity-high{border-inline-start-color:#b42318}
.alert-card.severity-medium{border-inline-start-color:#d97706}
.alert-card header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.alert-card h2{margin:0;font-size:15px;flex:1}
.alert-card dl{margin:10px 0 8px;display:grid;gap:6px}
.alert-row{display:grid;grid-template-columns:96px 1fr;gap:10px}
.alert-row dt{font-size:12px;color:var(--ink-4);font-weight:600}
.alert-row dd{margin:0}
.alert-basis{display:block;font-size:12px;color:var(--ink-4)}
.alert-evidence{font-weight:600;color:var(--accent-deep)}
.brief{border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.brief header{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.brief h2{margin:0;font-size:15px;flex:1}
.brief-section h3{margin:12px 0 4px;font-size:13px}
.brief-section ul{margin:0;padding-inline-start:18px}
.brief-alert{display:inline-block;margin-top:4px;font-size:12.5px;color:var(--accent-deep)}
.briefing-evidence{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.briefing-evidence-title{margin:0 0 6px;font-size:15px}
@media (max-width: 900px){.briefing-body,.evidence-markers{grid-template-columns:1fr}}

/* QA UI candidates: the alert view's loading and error line (CAND-3) and the target of an
   in-page anchor (CAND-1). Logical properties, so both mirror in Arabic. */
.briefing-status{display:flex;align-items:center;gap:10px;margin-block:4px 14px;padding:10px 14px;
  border-radius:12px;background:var(--surface-3);color:var(--ink-2);font-size:13.5px}
.briefing-status.is-error{background:rgba(var(--warn-rgb),.08);color:var(--warn)}
.briefing-status .dlg-btn{margin-inline-start:auto}
.briefing-spinner{inline-size:14px;block-size:14px;border-radius:50%;border:2px solid var(--accent-soft-2);
  border-block-start-color:var(--accent);animation:briefing-spin .8s linear infinite}
@keyframes briefing-spin{to{transform:rotate(360deg)}}
[aria-busy="true"] .briefing-body{opacity:.55}
.is-target{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion: reduce){.briefing-spinner{animation:none}}

/* QA-UI-M2: English (or mixed) sentences shown in Arabic mode take their direction from their
   own first strong letter, so 'SYNTHETIC DATA.' or '?What changed' never lose their full stop
   or question mark to the right-to-left page. */
html[dir="rtl"] :is(.panel-note, .panel-lede, .key-meta, .sources-placeholder, .settings-row-label,
  .settings-row-detail, .settings-foot, .toast, .notice, .graph-empty, .palette-item, .view-state,
  .evidence p, .evidence li, .evidence h2, .evidence h3, .evidence h4, .alert-evidence, .configure-hint, .entry-sub){unicode-bidi:plaintext}

/* QA-UI-m1, m2: the loading, empty and error line every data view shows. */
.view-state{margin:6px 0 12px;padding:10px 14px;border-radius:12px;background:var(--surface-3);color:var(--ink-2);font-size:13.5px}
.view-state.is-error{background:rgba(var(--warn-rgb),.08);color:#9f2f25}
.briefing-empty{padding:14px;border-radius:12px;background:var(--surface-3);color:var(--ink-2);font-size:13.5px}

/* QA-UI-M7: the SYNTHETIC banner is printed at the top of every page, not only the first.
   A fixed element repeats on each printed page in Chromium; the page margin leaves it room. */
@media print{
  /* QA-UI-M7: the synthetic label goes on every printed page. A page margin box repeats on
     each page (a fixed element is clipped to the content area and printed once). The page
     carries it while the banner would show: the label is synthetic or still unknown. */
  @page{margin:20mm 12mm 14mm}
  @page synthetic{
    @top-left{
      content:"SYNTHETIC DATA. Not Mayar data.";
      direction:ltr;font:600 10px "Geist",system-ui,sans-serif;color:#7a2e00;vertical-align:bottom;padding-bottom:3mm;
    }
    @top-right{
      content:"\0628\064A\0627\0646\0627\062A\0020\062A\062C\0631\064A\0628\064A\0629\0020\0645\064F\0648\0644\0651\062F\0629.\0020\0644\064A\0633\062A\0020\0628\064A\0627\0646\0627\062A\0020\0645\064A\0627\0631.";
      direction:rtl;font:600 10px system-ui,sans-serif;color:#7a2e00;vertical-align:bottom;padding-bottom:3mm;
    }
  }
  body:not([data-synthetic="false"]){page:synthetic}
  .synthetic-banner:not([hidden]){
    position:static;box-shadow:none;padding:5px 10px;font-size:11px;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .rail, .topbar, .fab, .palette, .palette-scrim, .notifications, #scrim, .toast{display:none !important}
  .work{margin:0 !important}
}

/* WP11: review state, drafted email and the below-threshold log on alert cards */
.alert-sources ul,.below-threshold ul{margin:6px 0 0;padding-inline-start:18px;font-size:12px}
.alert-review{margin:8px 0 0;font-size:12.5px}
.alert-review.is-open{color:var(--muted,#667085)}
.alert-review.is-approved{color:#067647}
.alert-review.is-rejected{color:#b42318}
.alert-draft pre{white-space:pre-wrap;font-size:12px;background:var(--paper,#fafafa);padding:8px;border-radius:8px}
.below-threshold{margin-block-start:12px;font-size:12.5px}
.below-threshold h3{margin:0;font-size:12.5px}

/* QA R20: the review queue's decision controls, item facts and the sample brief. */
.review-facts{
  font-size: 12.5px; color: var(--ink-2, #4a4a4a); margin: 4px 0 2px;
}
.review-candidates{
  border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 6px 10px; margin: 8px 0 4px;
}
.review-candidates legend{ font-size: 12px; font-weight: 600; padding: 0 4px; }
.review-choice{ display: flex; gap: 8px; align-items: baseline; padding: 3px 0; cursor: pointer; }
.review-score{ font-size: 12px; color: var(--ink-2, #4a4a4a); }
.dlg-error{ color: #a1260d; font-size: 12.5px; margin: 6px 0 0; }
.dlg-error[hidden]{ display: none; }
.sample-tag{
  display: inline-block; margin-inline-start: 8px; padding: 1px 8px; border-radius: 999px;
  background: #fff4d6; color: #6b4a00; border: 1px solid #e3c36b; font-size: 12px; font-weight: 700;
}
.week-id{ unicode-bidi: isolate; direction: ltr; }

/* WP-19 (A6-6): the keyboard alternative to the canvas. */
.graph-list { list-style: none; margin: 0; padding: 0; max-height: 9rem; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 4px; }
.graph-list button { font: inherit; font-size: 12px; padding: 2px 8px; border: 1px solid var(--line, #ccc); border-radius: 12px; background: transparent; cursor: pointer; }
.graph-list button[aria-current="true"] { border-color: currentColor; font-weight: 600; }
.graph-list button:focus-visible, .rel-link:focus-visible, .graph-detail:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.graph-list-class { opacity: .7; margin-inline-start: 4px; }
.rel-link { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; text-align: start; }
/* WP-18: the node's tags and fact chips. */
.graph-detail-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.observed-tag { font-size: 11px; padding: 1px 6px; border-radius: 8px; border: 1px solid currentColor; }
.fact-chip { border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 6px 8px; margin: 6px 0; }
.fact-chip-label { font-size: 12px; opacity: .8; }
.chip-week { font: inherit; font-family: var(--mono, ui-monospace, monospace); margin-inline-start: 4px; }
.fact-series { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 4px 0 0; font-size: 11px; }
.graph-scope { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; }

/* WP-39 (D-o): answer cards */
.answer-cards { display: grid; gap: 12px; margin: 12px 0; }
.answer-card { border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 10px 12px; }
.card-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.card-title { font-size: 14px; margin: 0; }
.card-markers { font-size: 11px; opacity: .7; }
.card-chart { width: 100%; height: auto; max-height: 260px; }
.card-line { fill: none; stroke: currentColor; stroke-width: 2; }
.card-mean { stroke: currentColor; stroke-dasharray: 5 4; opacity: .55; }
.card-mean-label, .card-tick, .card-point text, .card-bar text { font-size: 11px; fill: currentColor; }
.card-point circle { fill: var(--bg, #fff); stroke: currentColor; stroke-width: 2; }
.card-point.is-marked circle { fill: currentColor; }
.card-point:focus, .card-bar:focus { outline: none; }
.card-point:focus circle, .card-point:hover circle { stroke-width: 4; }
.card-bar rect { fill: currentColor; opacity: .75; }
.card-bar:focus rect, .card-bar:hover rect { opacity: 1; outline: 2px solid currentColor; }
.card-readout { font-size: 12px; margin: 4px 0 0; min-height: 1.4em; }
.card-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.card-table th, .card-table td { padding: 4px 6px; border-bottom: 1px solid var(--line, #eee); text-align: start; }
.card-table td.num { text-align: end; font-variant-numeric: tabular-nums; }
.card-sort { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; }
.card-source { font-size: 11px; opacity: .7; margin: 4px 0 0; }
.answer-export ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 6px 0 0; font-size: 12px; }

/* WP-56: Connectors */
.connectors-body{padding:20px 24px 24px}
.conn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.conn-tile{border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.conn-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.conn-head h2{font-size:15px;margin:0}
.conn-status{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--line)}
.conn-status[data-status="ok"]{border-color:var(--accent)}
.conn-status[data-status="needs_password"],.conn-status[data-status="attention"]{border-color:var(--warn)}
.conn-where,.conn-last{margin:0;font-size:12px;color:var(--ink-3)}
.conn-counts{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0}
.conn-counts div{display:flex;flex-direction:column-reverse;gap:2px}
.conn-counts dt{font-size:11px;color:var(--ink-3)}
.conn-counts dd{margin:0;font-size:16px}
.conn-password{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.conn-password input{flex:1;min-width:140px}
.conn-note{font-size:12px;color:var(--ink-3);flex-basis:100%}
.conn-tables{border:1px solid var(--line);border-radius:8px;padding:8px;margin:0;display:flex;flex-direction:column;gap:4px}
.conn-choice{font-size:13px}
.conn-desc{color:var(--ink-3);font-size:12px}
.conn-actions{display:flex;gap:8px;flex-wrap:wrap}
.conn-progress{width:100%}
.conn-result{margin:0;font-size:13px;min-height:1em}
.conn-review{margin:0;padding-inline-start:18px;font-size:13px}
.conn-history table{width:100%;font-size:12px;border-collapse:collapse}
.conn-history th,.conn-history td{text-align:start;padding:2px 4px;border-bottom:1px solid var(--line)}
.conn-dry{color:var(--ink-3)}
.conn-form{border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;background:var(--surface)}
.conn-form h2,.conn-form .conn-actions,.conn-form .conn-result,.conn-form .conn-note{grid-column:1/-1;margin:0}
.conn-form h2{font-size:15px}
.conn-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-3)}
.conn-field input,.conn-field select{font-size:14px}
/* WP-56b: the mapping editor */
.map-editor{border:1px solid var(--accent);border-radius:12px;padding:16px;margin-bottom:16px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.map-editor h2{font-size:15px;margin:0}
.map-choices,.map-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.map-required{color:var(--ink-3)}
.map-rows{width:100%;font-size:12px;border-collapse:collapse}
.map-rows th,.map-rows td{text-align:start;padding:2px 6px;border-bottom:1px solid var(--line)}
/* WP-58: the chat-first Ask */
.chat-view{padding:0}
.chat{display:grid;grid-template-columns:260px 1fr;height:calc(100vh - 110px);min-height:520px}
.chat-side{border-inline-end:1px solid var(--line);padding:14px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.chat-new{font:inherit;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;text-align:start}
.chat-group{font-size:11px;color:var(--ink-3);margin:8px 0 4px;text-transform:none}
.chat-sessions ul{list-style:none;margin:0;padding:0}
.chat-session{display:flex;align-items:center;gap:4px;border-radius:8px;padding:2px 4px}
.chat-session.is-active{background:var(--accent-soft)}
.chat-open{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;text-decoration:none;padding:6px 4px;font-size:13px}
.chat-act{font:inherit;font-size:11px;border:0;background:none;color:var(--ink-3);cursor:pointer;padding:2px 4px}
.chat-act:focus-visible,.chat-open:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.chat-none{font-size:13px;color:var(--ink-3)}
.chat-main{display:flex;flex-direction:column;min-height:0}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line)}
.chat-log{flex:1;overflow:auto;padding:16px 20px;display:flex;flex-direction:column;gap:14px}
.chat-turn{max-width:920px}
.chat-q{align-self:flex-end;background:var(--surface-2);border-radius:14px;padding:8px 14px}
.chat-q p{margin:0;white-space:pre-wrap}
.chat-a{align-self:stretch}
.chat-status{color:var(--ink-3);font-size:12px;margin:0}
.chat-failed{border:1px solid var(--warn);border-radius:10px;padding:10px 14px}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 10px}
.chat-chip{font:inherit;font-size:13px;border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:6px 12px;cursor:pointer}
.chat-box{display:flex;gap:8px;align-items:flex-end;padding:12px 20px;border-top:1px solid var(--line);background:var(--paper)}
.chat-box textarea{flex:1;font:inherit;font-size:14px;resize:vertical;min-height:44px;max-height:220px;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
@media (max-width:820px){.chat{grid-template-columns:1fr}.chat-side{border-inline-end:0;border-bottom:1px solid var(--line);max-height:30vh}}
/* WP-62b: Connectors redesign */
.src-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.src-head h2{margin:0;font-size:18px}
.src-cards,.src-gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.src-card,.src-type{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.src-type{color:inherit;text-decoration:none}
.src-open{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:600}
.src-open:focus-visible,.src-type:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.src-icon{width:22px;height:22px;flex:none}
.src-sentence{margin:0;font-size:13px;color:var(--ink-3)}
.src-note{font-size:12px;color:var(--ink-3)}
.src-chip{align-self:flex-start;font-size:12px;padding:2px 10px;border-radius:999px;border:1px solid var(--line);color:inherit;text-decoration:none}
.src-chip[data-status="ok"]{border-color:var(--accent)}
.src-chip[data-status="attention"],.src-chip[data-status="needs_password"]{border-color:var(--warn)}
.src-five{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0}
.src-five div{position:relative;border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column-reverse;gap:2px}
.src-five dt{font-size:12px;color:var(--ink-3)}
.src-five dd{margin:0;font-size:18px}
.src-tip{display:none;position:absolute;inset-inline-start:0;top:100%;z-index:5;width:220px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.src-five div:hover .src-tip,.src-five div:focus .src-tip,.src-five div:focus-within .src-tip{display:block}
.src-records{padding-inline-start:18px;font-size:13px}
.src-history{width:100%;font-size:12px;border-collapse:collapse}
.src-history th,.src-history td{text-align:start;padding:3px 6px;border-bottom:1px solid var(--line)}
.src-technical{margin-top:14px;font-size:13px}
.wiz-step{font-size:13px;color:var(--ink-3);margin:0 0 4px}
.wiz-progress{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 14px;font-size:12px}
.wiz-progress li{border-bottom:2px solid var(--line);padding:2px 6px}
.wiz-progress li[aria-current="step"]{border-color:var(--accent);font-weight:600}
.wiz-form{display:flex;flex-direction:column;gap:10px;max-width:760px}
.wiz-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-3)}
.wiz-field input,.wiz-field select{font-size:14px}
.wiz-toggle{display:flex;align-items:center;gap:8px;font-size:14px}
.wiz-note{margin:0;font-size:12px;color:var(--ink-3)}
.wiz-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.wiz-result{margin:0;font-size:13px;min-height:1em}
.wiz-schema{border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.wiz-table{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:3px 0}
.wiz-rows,.wiz-type{font-size:12px;color:var(--ink-3)}
.wiz-cols{font:inherit;font-size:12px;border:0;background:none;color:var(--accent);cursor:pointer}
.wiz-col-list{flex-basis:100%;font-size:12px}
.wiz-plan{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.wiz-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.wiz-preview table{width:100%;font-size:12px;border-collapse:collapse}
.wiz-preview th,.wiz-preview td{text-align:start;padding:2px 6px;border-bottom:1px solid var(--line)}
.wiz-progressbar{width:100%}
@media (max-width:720px){.src-five{grid-template-columns:repeat(2,1fr)}}
/* WP-59b: Insights */
.insights-body{padding:16px 24px 24px;display:flex;flex-direction:column;gap:16px}
.ins-tabs{display:flex;gap:4px;padding:10px 24px 0}
.ins-tabs a{padding:6px 12px;border-radius:8px 8px 0 0;color:inherit;text-decoration:none;border-bottom:2px solid transparent}
.ins-tabs a[aria-current="page"]{border-color:var(--accent);font-weight:600}
.ins-headline{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:0}
.ins-tile{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.ins-tile dt{font-size:12px;color:var(--ink-3)}
.ins-tile dd{margin:0;font-size:22px}
.ins-change{margin:0;font-size:11px;color:var(--ink-3)}
.ins-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.ins-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.ins-chart,.ins-gaps{border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.ins-chart h3,.ins-gaps h3{margin:0 0 8px;font-size:14px}
.ins-bars{width:100%;border-collapse:collapse;font-size:12px}
.ins-bars th{font-weight:400;text-align:start;padding:2px 6px;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.ins-bars td{padding:2px 4px}
.ins-bar{display:block;height:10px;width:var(--w);background:var(--accent);border-radius:4px;min-width:2px}
.ins-days{display:flex;align-items:flex-end;gap:4px;list-style:none;padding:0;margin:0;height:140px}
.ins-days li{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.ins-col{flex:1;width:100%;display:flex;flex-direction:column-reverse}
.ins-col .ins-en{height:var(--h);background:var(--accent)}
.ins-col .ins-ar{height:var(--h);background:var(--ink-3)}
.ins-day{font-size:10px;color:var(--ink-3);white-space:nowrap}
.ins-legend{font-size:12px;color:var(--ink-3);margin:6px 0 0}
.ins-key{display:inline-block;width:10px;height:10px;margin-inline:8px 4px;vertical-align:middle}
.ins-key.ins-en{background:var(--accent)} .ins-key.ins-ar{background:var(--ink-3)}
.ins-gaps ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ins-gaps p{margin:0;font-size:13px}
.ins-needs{color:var(--ink-3)} .ins-example{font-size:12px;color:var(--ink-3);font-style:italic}
.ins-questions{width:100%;border-collapse:collapse;font-size:12px}
.ins-questions th,.ins-questions td{text-align:start;padding:4px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.ins-open{font:inherit;border:0;background:none;padding:0;color:inherit;text-align:start;cursor:pointer;text-decoration:underline}
.ins-detail{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--surface)}
.ins-detail-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
@media (max-width:900px){.ins-headline{grid-template-columns:repeat(2,1fr)}}
/* WP-60: What the brain knows */
.knows-body{padding:16px 24px 24px;display:flex;flex-direction:column;gap:18px}
.knows-body h2{font-size:15px;margin:0 0 8px}
.kn-types{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.kn-type{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:inherit;text-decoration:none;background:var(--surface)}
.kn-type:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kn-count{font-size:24px}
.kn-sources{margin:4px 2px 0;font-size:12px;color:var(--ink-3)}
.kn-fresh table{width:100%;border-collapse:collapse;font-size:13px}
.kn-fresh th,.kn-fresh td{text-align:start;padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.kn-gaps ul,.kn-suggested ul{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.kn-ask{color:var(--accent)}
.kn-empty{font-size:14px}