/* CareConnect UI -- see BRAND.md */

:root{
  --ember-400:#F0616B; --ember-500:#D93B47; --ember-600:#A82733;
  --ok:#4E9E6A; --warn:#C08A3E; --no:#8E97A6;
  /* Destructive controls, kept apart from --no on purpose. A gap in the data
     is a result, not a failure, so "not in the data" and "set aside" are a
     neutral slate; red is reserved for the two things that actually remove
     something. */
  --danger:#D93B47;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --rail:210px; --gut:clamp(24px,4vw,64px);
}

/* dark (default) */
:root,[data-theme="dark"]{
  --bg:#0F0D0C; --surface:#171412; --raise:#221E1B; --line:#332D28; --line-soft:#26221F;
  --fg:#F2EDE7; --fg-mid:#C9C0B7; --fg-dim:#8A8079;
  --scrim:15,13,12; --shadow:0 30px 80px -34px rgba(0,0,0,.85);
}
[data-theme="light"]{
  --bg:#FBF8F4; --surface:#FFFFFF; --raise:#F2ECE4; --line:#E0D7CB; --line-soft:#EDE6DC;
  --fg:#17120E; --fg-mid:#4A423B; --fg-dim:#8A7F74;
  --ember-500:#B3202E; --ember-400:#D14350; --ember-600:#8A1420;
  --ok:#2F7A4C; --warn:#9A6A1E; --no:#65707F; --danger:#B3202E;
  --scrim:251,248,244; --shadow:0 22px 60px -30px rgba(60,40,20,.28);
}

*{box-sizing:border-box;margin:0;padding:0}
.hide{display:none!important}   /* one rule, so a new element cannot miss it */
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg-mid);font:400 15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select{font-family:inherit}
::selection{background:var(--ember-500);color:#fff}

/* ---------- backdrop ---------- */
#backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.62}
#scrim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(102deg,
    rgba(var(--scrim),.985) 0%, rgba(var(--scrim),.955) 42%,
    rgba(var(--scrim),.86) 72%, rgba(var(--scrim),.62) 100%)}
.shell{position:relative;z-index:2}

/* ---------- rail ---------- */
.rail{position:fixed;top:0;left:0;bottom:0;width:var(--rail);z-index:6;
  padding:30px 0 24px 26px;display:flex;flex-direction:column;gap:28px;
  border-right:1px solid var(--line);
  background:linear-gradient(90deg,rgba(var(--scrim),.97),rgba(var(--scrim),.82));backdrop-filter:blur(8px)}
.mark b{display:block;font:600 14px/1.2 var(--sans);color:var(--fg);letter-spacing:.02em}
.mark span{font:400 9.5px/1 var(--mono);color:var(--fg-dim);letter-spacing:.14em;text-transform:uppercase}

.nav{list-style:none;display:flex;flex-direction:column;gap:1px;position:relative;padding-left:15px}
.nav::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--line)}
#railThumb{position:absolute;left:-1px;width:3px;background:var(--ember-500);border-radius:2px;
  transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1)}
.nav a{display:flex;align-items:baseline;gap:9px;padding:7px 0;text-decoration:none;
  color:var(--fg-dim);font:500 13px/1.25 var(--sans);transition:color .18s}
.nav a i{font:400 10px/1 var(--mono);font-style:normal;color:var(--line);transition:color .18s}
.nav a:hover{color:var(--fg-mid)}
.nav a.on{color:var(--fg)} .nav a.on i{color:var(--ember-500)}

.tools{display:flex;flex-direction:column;gap:6px;padding-right:22px}
.tool{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);
  border-radius:2px;color:var(--fg-dim);cursor:pointer;font:500 11.5px/1 var(--sans);
  padding:9px 10px;text-align:left;transition:.16s;width:100%}
.tool:hover{border-color:var(--ember-500);color:var(--fg)}
.tool .cnt{margin-left:auto;font:500 10px/1 var(--mono);color:var(--ember-500)}
.tool svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}

.rail-foot{margin-top:auto;padding-right:22px;font:400 9.5px/1.7 var(--mono);color:var(--fg-dim);letter-spacing:.03em}
.rail-foot em{font-style:normal;color:var(--ember-500)}

/* ---------- screens ----------
   One step is on screen at a time. The page itself does not scroll; the panes
   inside a step do. A pipeline is a sequence, and showing all four at once
   invited scrolling past the one you were meant to be looking at. */
html,body{height:100%;overflow:hidden}
main{margin-left:var(--rail);height:100vh;position:relative}
.screen{position:absolute;inset:0;display:none;flex-direction:column;
  padding:26px clamp(20px,3vw,44px) 0}
.screen.on{display:flex;animation:screenin .34s cubic-bezier(.3,0,.2,1)}
@keyframes screenin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.shead{display:flex;align-items:flex-end;gap:8px 30px;flex-wrap:wrap;margin-bottom:18px;flex:none}
.shead .n{font:500 10px/1 var(--mono);color:var(--ember-500);letter-spacing:.16em;display:block;margin-bottom:5px}
.shead h1{font:600 clamp(24px,3vw,34px)/1 var(--sans);color:var(--fg);letter-spacing:-.02em}
.shead .lede{flex:1;min-width:260px;font-size:13px;line-height:1.5;color:var(--fg-dim);max-width:60ch;padding-bottom:3px}

.work{flex:1;min-height:0;display:flex;flex-direction:column}
.sfoot{flex:none;border-top:1px solid var(--line);margin-top:14px}
.frow2{display:flex;align-items:center;gap:10px;padding:12px 0 16px}
.frow2 .sp{margin-left:auto}
.fnote{font:400 11.5px/1.5 var(--mono);color:var(--fg-dim)}

/* ---------- rail steps ---------- */
.steps{list-style:none;display:flex;flex-direction:column;gap:2px;padding-left:0}
.step{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;cursor:pointer;
  padding:8px 10px 8px 0;color:var(--fg-dim);font:500 13px/1.25 var(--sans);text-align:left;
  border-left:2px solid transparent;padding-left:13px;transition:.16s}
.step i{font:400 10px/1 var(--mono);font-style:normal;color:var(--line)}
.step:hover:not([disabled]){color:var(--fg-mid)}
.step.on{color:var(--fg);border-left-color:var(--ember-500)}
.step.on i{color:var(--ember-500)}
.step.done i{color:var(--ok)}
.step[disabled]{opacity:.35;cursor:not-allowed}
.step .mk{margin-left:auto;font-style:normal;font:500 9px/1 var(--mono);color:var(--ok)}
.step[disabled] .mk::before{content:'🔒';filter:grayscale(1);opacity:.6;font-size:9px}

/* ---------- onboarding ---------- */
/* Centred when there is room, top-aligned when there is not.
   `justify-content:center` overflows a flex container equally in both
   directions, and the top half is then unreachable: scrollTop cannot go
   negative. The symptom is a blank screen with the content sitting above it,
   visible only by zooming out. Auto margins centre the same way and collapse
   to zero instead of clipping. */
/* Top-aligned, not centred. Vertical centring here has now caused two bugs:
   a blank screen when the content was taller than the viewport, and an
   "Start indexing" button pushed below the fold once enough files were
   waiting. The screen has a header above it and a footer below it, so there
   is nothing for centring to buy. */
.onboard{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;gap:14px;overflow-y:auto;
  padding:min(6vh,48px) 0 28px}
.onboard.hide{display:none}
.ob{max-width:56ch;text-align:center}
.ob h2{font:600 19px/1.3 var(--sans);color:var(--fg);margin-bottom:9px}
.ob p{font:400 13.5px/1.65 var(--sans);color:var(--fg-dim);margin-bottom:18px}
.obacts{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.obnote{font:400 11.5px/1.6 var(--sans);color:var(--fg-dim);opacity:.75;margin-top:16px}
/* The one note on this screen that is about the instance rather than the
   task. Given a border and full opacity because it qualifies everything
   below it, and a dimmed aside that says "this is not reading your file"
   is a dimmed aside nobody reads. */
.obnote.demo{opacity:1;color:var(--fg-dim);border-left:2px solid var(--line);
  padding:10px 0 10px 12px;margin-top:18px;max-width:62ch;text-align:left}
.obnote.demo b{color:var(--fg);font-weight:600}

/* ---------- browse panes ---------- */
.browse{flex:1;min-height:0;display:grid;
  grid-template-columns:var(--p1,290px) 7px minmax(0,1fr);gap:0 7px}
.browse.three{grid-template-columns:var(--p1,250px) 7px minmax(0,1fr) 7px var(--p3,330px)}
.browse.hide{display:none}
.pane{border:1px solid var(--line);border-radius:3px;background:color-mix(in srgb,var(--surface) 90%,transparent);
  display:flex;flex-direction:column;min-height:0;overflow:hidden}
.ptitle{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);
  font:600 11px/1 var(--sans);color:var(--fg);letter-spacing:.02em;flex:none}
.ptitle .sp{margin-left:auto}
.ptitle .tiny{font:400 10px/1 var(--mono);color:var(--fg-dim)}
.plist{flex:1;min-height:0;overflow:auto}
.pbody{flex:1;min-height:0;overflow:auto;padding:0 12px 12px}
.meta{flex:none;padding:9px 12px;border-bottom:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:6px 14px}
.meta .kv{font:400 10.5px/1.5 var(--mono);color:var(--fg-dim)}
.meta .kv b{color:var(--fg-mid);font-weight:500}

.frow{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line-soft);
  cursor:pointer;font:400 12px/1.3 var(--sans);color:var(--fg-mid);transition:.13s}
.frow:hover{background:var(--raise)}
.frow.on{background:color-mix(in srgb,var(--ember-500) 11%,transparent);color:var(--fg);
  box-shadow:inset 2px 0 0 var(--ember-500)}
.frow .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .st{width:6px;height:6px;border-radius:50%;background:var(--line);flex:none}
.frow.done .st{background:var(--ok)}
.frow .rd{font:400 9.5px/1 var(--mono);color:var(--fg-dim)}
.frow .pill{font:500 8.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:3px 5px;border-radius:2px}

.askwork{align-items:center;justify-content:flex-start;gap:14px;overflow-y:auto;padding:12px 0}
/* ---------- panel ---------- */
.panel{border:1px solid var(--line);border-radius:3px;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(10px);box-shadow:var(--shadow);overflow:hidden}
.phead{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.phead .t{font:400 10.5px/1 var(--mono);color:var(--fg-dim);letter-spacing:.11em;text-transform:uppercase}
.phead .sp{margin-left:auto}

.path{flex:1;min-width:190px;display:flex;align-items:center;gap:8px;background:var(--raise);
  border:1px solid var(--line);border-radius:2px;padding:0 10px;transition:border-color .16s}
.path:focus-within{border-color:var(--ember-500)}
.path span{font:400 11px/1 var(--mono);color:var(--fg-dim)}
.path input{flex:1;background:none;border:0;outline:none;color:var(--fg);font:400 12.5px/1 var(--mono);padding:10px 0}

.btn{background:var(--ember-500);border:0;border-radius:2px;color:#fff;cursor:pointer;
  font:600 12.5px/1 var(--sans);padding:11px 16px;transition:background .16s;white-space:nowrap}
.btn:hover{background:var(--ember-400)} .btn:active{background:var(--ember-600)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--fg-mid)}
.btn.ghost:hover{border-color:var(--ember-500);color:var(--fg);background:transparent}

.drop{margin:14px;border:1px dashed var(--line);border-radius:3px;padding:22px;text-align:center;
  color:var(--fg-dim);font-size:13px;transition:.18s;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--ember-500);color:var(--fg);background:color-mix(in srgb,var(--ember-500) 7%,transparent)}
.drop b{display:block;color:var(--fg-mid);font-weight:500;font-size:13.5px;margin-bottom:4px}
.drop small{display:block;margin-top:6px;font:400 11px/1.5 var(--mono);color:var(--fg-dim);opacity:.8}

/* progress */
.prog{height:2px;background:var(--line-soft);position:relative;overflow:hidden}
.prog .bar{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,var(--ember-600),var(--ember-400));
  transition:right .28s linear}
.prog.idle{opacity:0}
.plabel{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--line);
  font:400 11.5px/1 var(--mono);color:var(--fg-dim)}
.plabel .pc{margin-left:auto;color:var(--ember-500)}
.plabel.hide{display:none}
.spin{width:11px;height:11px;border:1.5px solid var(--line);border-top-color:var(--ember-500);
  border-radius:50%;animation:sp .7s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}

/* chips + metrics */
.bar-row{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.chip{background:transparent;border:1px solid var(--line);border-radius:2px;color:var(--fg-dim);cursor:pointer;
  font:500 11.5px/1 var(--sans);padding:7px 10px;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.chip:hover{color:var(--fg);border-color:var(--fg-dim)}
.chip.on{border-color:var(--ember-500);color:var(--fg);background:color-mix(in srgb,var(--ember-500) 11%,transparent)}
.chip b{font:500 10px/1 var(--mono);color:var(--fg-dim)}
.chip.on b{color:var(--ember-500)}

/* ---------- table ---------- */
.tblwrap{max-height:400px;overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{position:sticky;top:0;z-index:1;background:var(--surface);text-align:left;
  font:500 9.5px/1 var(--mono);color:var(--fg-dim);letter-spacing:.13em;text-transform:uppercase;
  padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{padding:9px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tbody tr:hover{background:color-mix(in srgb,var(--fg) 4%,transparent)}
tbody tr.open{background:color-mix(in srgb,var(--fg) 5%,transparent)}
td.f{font:400 12px/1.45 var(--mono);color:var(--fg)}
td.f i{display:block;font-style:normal;color:var(--fg-dim);font-size:11px}
td.m{font:400 11.5px/1.4 var(--mono);color:var(--fg-dim);white-space:nowrap}
tr.why td{padding:0 14px 12px;border-bottom:1px solid var(--line-soft)}
tr.why .box{border-left:2px solid var(--no);padding:9px 12px;background:color-mix(in srgb,var(--no) 7%,transparent);
  font-size:12.5px;line-height:1.55;color:var(--fg-mid);border-radius:0 2px 2px 0}
tr.why .box b{color:var(--fg);font-weight:600;display:block;margin-bottom:3px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;font-family:var(--mono)}

.pill{display:inline-flex;align-items:center;gap:5px;font:500 9.5px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;padding:5px 7px;border-radius:2px;border:1px solid;white-space:nowrap}
.pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.pill.process{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 34%,transparent);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.pill.reject{color:var(--no);border-color:color-mix(in srgb,var(--no) 34%,transparent);background:color-mix(in srgb,var(--no) 9%,transparent)}
.pill.duplicate{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 34%,transparent);background:color-mix(in srgb,var(--warn) 9%,transparent)}
.pill.deferred{color:var(--fg-dim);border-color:var(--line);background:transparent}
.lie{display:inline-block;margin-left:6px;font:500 9px/1 var(--mono);color:var(--ember-500);
  border:1px solid color-mix(in srgb,var(--ember-500) 36%,transparent);border-radius:2px;padding:3px 4px;letter-spacing:.08em}

.empty{padding:40px 20px;text-align:center;color:var(--fg-dim);font-size:13.5px}
.empty b{display:block;color:var(--fg-mid);font-weight:500;margin-bottom:4px}

/* ---------- stage 2 split ---------- */
.split{display:grid;grid-template-columns:1fr 84px 1.35fr;min-height:432px}
.split>.col{min-width:0;display:flex;flex-direction:column}
.split .col+.col{border-left:1px solid var(--line)}
.colhead{padding:10px 14px;border-bottom:1px solid var(--line);font:400 9.5px/1 var(--mono);
  color:var(--fg-dim);letter-spacing:.13em;text-transform:uppercase;display:flex;gap:8px;align-items:center}
.colhead .sp{margin-left:auto;color:var(--ember-500)}
.scroll{overflow:auto;flex:1}

.frow{display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid var(--line-soft);
  cursor:pointer;transition:background .14s}
.frow:hover{background:color-mix(in srgb,var(--fg) 4%,transparent)}
.frow.on{background:color-mix(in srgb,var(--ember-500) 12%,transparent);box-shadow:inset 2px 0 0 var(--ember-500)}
.frow .nm{flex:1;min-width:0;font:400 11.5px/1.35 var(--mono);color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .rd{font:400 10px/1 var(--mono);color:var(--fg-dim)}
.frow .st{width:6px;height:6px;border-radius:50%;background:var(--line);flex:none}
.frow.done .st{background:var(--ok)} .frow.busy .st{background:var(--ember-500);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.25}}

.flow{align-items:center;justify-content:center;background:color-mix(in srgb,var(--fg) 2%,transparent)}
.flow svg{width:100%;height:100%}

.claim{padding:11px 14px;border-bottom:1px solid var(--line-soft);transition:background .2s}
.claim.approved{background:color-mix(in srgb,var(--ok) 8%,transparent)}
.claim.denied{background:color-mix(in srgb,var(--no) 8%,transparent);opacity:.62}
.claim.modified{background:color-mix(in srgb,var(--warn) 8%,transparent)}
.triple{font:400 12px/1.6 var(--mono);color:var(--fg-mid);word-break:break-word}
.triple .s{color:var(--fg)} .triple .p{color:var(--ember-500)} .triple .o{color:var(--fg)}
.triple .o[contenteditable]{outline:1px dashed var(--warn);padding:0 3px;border-radius:2px}
.cmeta{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px;font:400 10.5px/1.5 var(--mono);color:var(--fg-dim)}
.cmeta .ev::before{content:'▸ ';color:var(--ember-500)}
.cnote{margin-top:6px;font-size:12px;line-height:1.5;color:var(--fg-dim);border-left:2px solid var(--line);padding-left:9px}
.cacts{display:flex;gap:5px;margin-top:8px}
.mini{background:transparent;border:1px solid var(--line);border-radius:2px;color:var(--fg-dim);cursor:pointer;
  font:500 10.5px/1 var(--sans);padding:6px 9px;transition:.14s}
.mini:hover{color:var(--fg);border-color:var(--fg-dim)}
.mini.ok:hover{border-color:var(--ok);color:var(--ok)}
.mini.no:hover{border-color:var(--no);color:var(--no)}
.mini.md:hover{border-color:var(--warn);color:var(--warn)}
.mini.act{border-color:var(--ember-500);color:var(--ember-500)}

/* ---------- stage 3 ---------- */
.cs{display:flex;flex-direction:column}
.gn-label{font:400 10.5px/1 var(--mono);fill:var(--fg)}
.ge-label{font:400 9px/1 var(--mono);fill:var(--fg-dim)}

/* legend */
.legend{display:flex;gap:14px;padding:9px 14px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px;font:400 10px/1 var(--mono);color:var(--fg-dim)}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.legend i.ex{background:var(--fg-dim)} .legend i.ad{background:var(--ember-500)}
.legend i.cl{background:transparent;border:1px dashed var(--no)}

/* ---------- stage 4 chat ---------- */
#s4 .wrap{max-width:880px}
.chat{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(12px);box-shadow:var(--shadow)}
.chat-top{display:flex;align-items:center;gap:11px;padding:11px 15px;border-bottom:1px solid var(--line)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--warn);box-shadow:0 0 9px currentColor}
.chat-top .t{font:400 10.5px/1 var(--mono);color:var(--fg-dim);letter-spacing:.1em;text-transform:uppercase}
.chat-top .asof{margin-left:auto;display:flex;align-items:center;gap:7px;font:400 10.5px/1 var(--mono);color:var(--fg-dim)}
.chat-top .asof input{background:var(--raise);border:1px solid var(--line);border-radius:2px;color:var(--fg);
  font:400 11px/1 var(--mono);padding:6px 7px}
.log{height:clamp(240px,48vh,680px);overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px;resize:vertical}
.msg{max-width:88%;font-size:14px;line-height:1.6}
.msg.me{align-self:flex-end;background:var(--ember-500);color:#fff;padding:9px 14px;border-radius:3px 3px 0 3px;max-width:74%}
.msg.sys{align-self:flex-start;border:1px solid var(--line);border-left:2px solid var(--line);
  background:color-mix(in srgb,var(--raise) 70%,transparent);padding:12px 15px;border-radius:0 3px 3px 0}
.msg.sys[data-o="evidenced"]{border-left-color:var(--ok)}
.msg.sys[data-o="undetermined"]{border-left-color:var(--warn)}
.msg.sys[data-o="absent"]{border-left-color:var(--no)}
.msg .oc{font:500 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;display:block;margin-bottom:8px;color:var(--fg-dim)}
.msg.sys[data-o="evidenced"] .oc{color:var(--ok)}
.msg.sys[data-o="undetermined"] .oc{color:var(--warn)}
.msg.sys[data-o="absent"] .oc{color:var(--no)}
.msg .body{color:var(--fg-mid)} .msg .body strong{color:var(--fg);font-weight:600}
.msg .ev{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);font:400 11px/1.75 var(--mono);color:var(--fg-dim)}
.msg .ev span{color:var(--ember-500)}
.ask{display:flex;gap:9px;padding:13px 14px;border-top:1px solid var(--line)}
.ask input{flex:1;background:var(--raise);border:1px solid var(--line);border-radius:2px;color:var(--fg);
  font:400 14px/1 var(--sans);padding:11px 13px;outline:none;transition:border-color .16s}
.ask input:focus{border-color:var(--ember-500)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}

/* ---------- overlays ---------- */
.sheet{position:fixed;inset:0;z-index:20;display:none;background:rgba(var(--scrim),.72);backdrop-filter:blur(4px)}
.sheet.open{display:block}
.sheet .box{position:absolute;inset:5vh 4vw;background:var(--surface);border:1px solid var(--line);
  border-radius:4px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.sheet .head{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line)}
.sheet .head h2{font:600 14px/1 var(--sans);color:var(--fg);letter-spacing:.01em}
.sheet .head .sub{font:400 10.5px/1 var(--mono);color:var(--fg-dim)}
.x{margin-left:auto;background:transparent;border:1px solid var(--line);border-radius:2px;color:var(--fg-dim);
  cursor:pointer;font:400 15px/1 var(--sans);width:28px;height:28px;transition:.15s}
.x:hover{border-color:var(--danger);color:var(--danger)}
.sheet .body{flex:1;overflow:auto;min-height:0}

.led{padding:12px 18px;border-bottom:1px solid var(--line-soft);display:grid;
  grid-template-columns:78px 1fr auto;gap:14px;align-items:start}
.led .stg{font:500 9.5px/1.4 var(--mono);color:var(--ember-500);letter-spacing:.1em;text-transform:uppercase}
.led .what{font:400 12.5px/1.5 var(--mono);color:var(--fg)}
.led .rsn{font-size:12.5px;line-height:1.55;color:var(--fg-dim);margin-top:4px;grid-column:2}
.led .undo{background:transparent;border:1px solid var(--line);border-radius:2px;color:var(--fg-dim);
  cursor:pointer;font:500 10.5px/1 var(--sans);padding:6px 9px}
.led .undo:hover{border-color:var(--ember-500);color:var(--ember-500)}

/* explorer */
.exp{display:grid;grid-template-columns:minmax(0,1fr) 7px var(--gside,300px);height:100%}
.exp .canvasw{position:relative;overflow:hidden;background:color-mix(in srgb,var(--fg) 2%,transparent)}
.exp .canvasw > svg{width:100%;height:100%;cursor:grab}
.exp svg:active{cursor:grabbing}
.exp .side{border-left:1px solid var(--line);overflow:auto;padding:16px 18px}
.exp .side h3{font:600 13px/1.4 var(--sans);color:var(--fg);margin-bottom:3px;word-break:break-word}
.exp .side .kind{font:500 9.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ember-500);margin-bottom:12px;display:block}
.exp .side dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:12px;margin-bottom:16px}
.exp .side dt{font:400 10.5px/1.5 var(--mono);color:var(--fg-dim)}
.exp .side dd{font:400 11.5px/1.5 var(--mono);color:var(--fg-mid);word-break:break-word}
.exp .side h4{font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);margin:14px 0 8px}
.exp .side .rel{padding:8px 0;border-top:1px solid var(--line-soft);font:400 11.5px/1.5 var(--mono);cursor:pointer}
.exp .side .rel:hover{color:var(--ember-500)}
.exp .side .rel em{font-style:normal;color:var(--ember-500)}
.exp .side .rel i{display:block;font-style:normal;color:var(--fg-dim);font-size:10px}

@media (max-width:980px){
  .split{grid-template-columns:1fr}
  .split .col+.col{border-left:0;border-top:1px solid var(--line)}
  .flow{height:70px} .flow svg{height:70px}
  .exp{grid-template-columns:1fr} .exp .side{border-left:0;border-top:1px solid var(--line);max-height:38%}
}
@media (max-width:860px){
  :root{--rail:0px}
  #scrim{background:linear-gradient(180deg,rgba(var(--scrim),.94),rgba(var(--scrim),.7))}
  .rail{position:sticky;top:0;left:auto;bottom:auto;width:100%;height:auto;flex-direction:row;align-items:center;
    gap:14px;padding:10px 16px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}
  .mark span,.rail-foot{display:none}
  .nav{flex-direction:row;gap:12px;padding-left:0}.nav::before,#railThumb{display:none}
  .nav a{white-space:nowrap;padding:4px 0}
  .tools{flex-direction:row;padding-right:0;margin-left:auto}.tool{width:auto}.tool span.lbl{display:none}
  main{margin-left:0}
  .stage{min-height:auto;padding:52px 18px}
  .sheet .box{inset:2vh 2vw}
}

/* ===================================================================
   Folder browser · document viewer · guide · icons
   Added when the interface stopped being a mock: choosing a real folder,
   showing a real document, and explaining the whole thing to somebody who
   has never seen it.
   =================================================================== */

/* ---- folder browser ---- */
.browser{border:1px solid var(--line);border-radius:3px;background:var(--surface);margin-bottom:10px;overflow:hidden}
.browser.hide{display:none}
.bhead{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line-soft);background:var(--raise)}
.bpath{font:400 11.5px/1 var(--mono);color:var(--fg-mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46%}
.bcount{font:400 10.5px/1 var(--mono);color:var(--fg-dim)}
.blist{max-height:210px;overflow:auto;padding:6px}
.brow{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 10px;border:0;background:none;
  border-radius:2px;color:var(--fg-mid);font:400 12.5px/1 var(--ui);cursor:pointer}
.brow:hover{background:var(--raise);color:var(--fg)}
.brow .fold{color:var(--ember-500);font-size:11px}
.drop{cursor:pointer}
.drop code{font:400 11.5px/1 var(--mono);color:var(--ember-500)}

/* ---- clickable rows ---- */
tr.look{cursor:pointer}
tr.look:hover td{background:var(--raise)}
.ev.look{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.ev.look:hover{color:var(--ember-500)}
.frow .eye{margin-left:auto;opacity:0;color:var(--ember-500);font-size:11px;padding:0 4px}
.frow:hover .eye{opacity:1}

/* ---- viewer + guide sheets ---- */
.sheet .box.wide{max-width:1180px;width:92vw;left:50%;right:auto;transform:translateX(-50%)}
/* The guide is a page now, so it fills the page. The prose still wants a
   column rather than a hall, so the column is centred inside it instead of the
   box being narrowed -- which left a band of empty screen down the right. */
#guide .box{max-width:none}
#vwBody,.guide{max-height:74vh;overflow:auto;padding-right:6px}
#vwBody h4{font:600 11px/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--fg-dim);
  margin:20px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line-soft)}
#vwBody h4:first-child{margin-top:2px}
.warn{font:400 12px/1.6 var(--ui);color:var(--warn)}

/* A file the indexer set aside, as a status panel rather than a paragraph.
   --no, the slate, and never --danger: BRAND.md keeps the two apart because a
   file with nothing in it is a result, not a fault, and a red banner over an
   empty PDF says the system broke. */
.cannot{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  margin:8px 0 16px;padding:14px 16px;border-radius:3px;text-align:left;
  border:1px solid color-mix(in srgb,var(--no) 40%,transparent);
  border-left:3px solid var(--no);
  background:color-mix(in srgb,var(--no) 11%,transparent)}
.cannot .cico{font-size:15px;line-height:1.3;color:var(--no)}
.cannot b{display:block;font:600 10px/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--no);margin-bottom:7px}
.cannot p{font:400 12.5px/1.65 var(--ui);color:var(--fg-mid);max-width:70ch;margin:0}

/* ---- document rendering ---- */
table.doc{width:100%;border-collapse:collapse;font:400 12px/1.45 var(--mono)}
table.doc th{font:500 10px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim);
  text-align:left;padding:6px 9px;border-bottom:1px solid var(--line)}
table.doc td{padding:5px 9px;border-bottom:1px solid var(--line-soft);color:var(--fg-mid);vertical-align:top}
table.doc td.ln,.lines .ln{width:34px;color:var(--fg-dim);text-align:right;user-select:none;font-size:10.5px}
table.doc td.mk{width:80px;text-align:right}
.lines{font:400 12px/1.55 var(--mono)}
.ln-row{display:flex;gap:10px;align-items:baseline;padding:3px 9px;border-bottom:1px solid var(--line-soft)}
.ln-row .tx{flex:1;color:var(--fg-mid);white-space:pre-wrap;word-break:break-word}

/* the whole point: the row a statement was taken from */
tr.extracted td,.ln-row.extracted{background:color-mix(in srgb,var(--ember-500) 9%,transparent)}
tr.extracted td:first-child,.ln-row.extracted{box-shadow:inset 2px 0 0 var(--ember-500)}
tr.focus td,.ln-row.focus{background:color-mix(in srgb,var(--ember-500) 20%,transparent)}
tr.focus td{outline:1px solid var(--ember-500);outline-offset:-1px}
.xb{font:500 9.5px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--ember-500);
  border:1px solid color-mix(in srgb,var(--ember-500) 40%,transparent);border-radius:2px;padding:2px 5px;white-space:nowrap}

img.scan{max-width:100%;border:1px solid var(--line);border-radius:2px;background:#fff}
.scanview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:900px){.scanview{grid-template-columns:1fr}}

/* ---- icons + legend ---- */
svg.icon{vertical-align:-2px;flex:none;width:15px;height:15px}
.lgd .icon{align-self:center}
.legend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:9px;margin:12px 0}
.legend-grid.tight{grid-template-columns:1fr;gap:5px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.lgd{display:grid;grid-template-columns:16px auto 1fr;align-items:center;gap:4px 8px;padding:7px 9px;border:1px solid var(--line-soft);border-radius:2px;flex-wrap:wrap}
.lgd b{font:600 12px/1 var(--ui);color:var(--fg)}
.lgd span{grid-column:2/4;font:400 11.5px/1.45 var(--ui);color:var(--fg-dim)}
.lgd .raw{grid-column:2/4;font:400 9.5px/1 var(--mono);color:var(--fg-dim);opacity:.6;font-style:normal}
.side .kind{display:inline-flex;align-items:center;gap:6px}
.side .plain{font:400 11.5px/1.5 var(--ui);color:var(--fg-dim);margin:2px 0 12px}

/* ---- guide ---- */
.guide{max-width:78ch;margin:0 auto}
.guide section{margin-bottom:30px}
.guide h3{font:600 15px/1.3 var(--ui);color:var(--fg);margin:0 0 10px}
.guide p,.helppanel .hpbody p{font:400 13.5px/1.72 var(--ui);color:var(--fg-mid);margin:0 0 11px}
.guide p.aside,.helppanel p.aside{font-size:12.5px;color:var(--fg-dim);border-left:2px solid var(--line);padding-left:11px}
.guide code,.helppanel code{font:400 12px/1 var(--mono);color:var(--ember-500)}
.guide i,.helppanel i{color:var(--fg-dim)}
/* list-style:decimal explicitly: the rail's own .steps sets list-style:none,
   and this shares the class name, so the guide's three numbered steps were
   rendering as three unnumbered paragraphs. */
.guide ol.steps,.helppanel ol.steps{margin:0 0 12px;padding-left:20px;list-style:decimal;
  display:block}
.guide ol.steps li,.helppanel ol.steps li{font:400 13.5px/1.7 var(--ui);color:var(--fg-mid);
  margin-bottom:11px;display:list-item}
.guide ul.plain,.helppanel ul.plain{margin:0 0 11px;padding-left:19px;list-style:disc}
.guide ul.plain li,.helppanel ul.plain li{font:400 13.5px/1.7 var(--ui);color:var(--fg-mid);
  margin-bottom:8px;display:list-item}
.gtab{width:100%;border-collapse:collapse;margin:6px 0 12px}
.gtab td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line-soft);font:400 13px/1.62 var(--ui);
  color:var(--fg-mid);vertical-align:top}
.gtab td:first-child{width:170px}
.vpill{display:inline-block;font:500 10px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;
  padding:5px 8px;border-radius:2px;white-space:nowrap}
.vpill.ev{color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent)}
.vpill.mx,.vpill.un{color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.vpill.no{color:var(--no);border:1px solid color-mix(in srgb,var(--no) 40%,transparent)}
.guide .try,.helppanel .try{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.guide dl.gloss,.helppanel dl.gloss{margin:0}
.guide dl.gloss dt,.helppanel dl.gloss dt{font:600 12.5px/1.5 var(--ui);color:var(--fg);margin-top:11px}
.guide dl.gloss dd,.helppanel dl.gloss dd{font:400 12.5px/1.65 var(--ui);color:var(--fg-mid);margin:2px 0 0}
.ev .src.look{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.ev .src.look:hover{color:var(--ember-500)}

/* ===================================================================
   Uploads · graph explanations · scrollable extraction
   =================================================================== */

/* ---- the document store ---- */
.stored{margin:14px 14px 24px;border:1px solid var(--line);border-radius:3px;background:var(--surface);overflow:hidden}
.stored.hide{display:none}
.shead{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line-soft);background:var(--raise)}
.shead b{font:600 12px/1 var(--sans);color:var(--fg)}
.scount{font:400 10.5px/1 var(--mono);color:var(--fg-dim)}
.slist{max-height:min(260px,26vh);overflow:auto}
.srow{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line-soft);
  font:400 12px/1 var(--sans);color:var(--fg-mid)}
.srow:last-child{border-bottom:0}
.srow .ok{color:var(--ok);font-size:9px}
.srow .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .sz,.srow .sha{font:400 10.5px/1 var(--mono);color:var(--fg-dim)}
.srow.busy{opacity:.6}
.snote{padding:9px 12px;font:400 11px/1.55 var(--sans);color:var(--fg-dim);border-top:1px solid var(--line-soft)}
.mini{background:transparent;border:1px solid var(--line);border-radius:2px;color:var(--fg-dim);
  cursor:pointer;font:500 10.5px/1 var(--sans);padding:5px 8px;transition:.15s}
.mini:hover{border-color:var(--ember-500);color:var(--fg)}

.flash{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:60;opacity:0;
  background:var(--surface);border:1px solid var(--ember-500);border-radius:3px;box-shadow:var(--shadow);
  padding:11px 16px;font:500 12.5px/1 var(--sans);color:var(--fg);transition:.25s}
.flash.go{opacity:1;transform:translate(-50%,0)}

/* ---- stage 2: the panes scroll, the page does not ---- */
.split .scroll{max-height:min(52vh,460px);overflow:auto}
.split .col.flow{align-self:stretch}

/* ---- graph side panel ---- */
.side .sentence{font:400 13.5px/1.65 var(--sans);color:var(--fg);margin:6px 0 16px;
  padding:11px 13px;background:var(--raise);border-left:2px solid var(--ember-500);border-radius:2px}
.side h4{font:600 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);
  margin:18px 0 8px}
.side dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0}
.side dt{font:400 10.5px/1.4 var(--mono);color:var(--fg-dim)}
.side dd{font:400 11.5px/1.4 var(--mono);color:var(--fg-mid);word-break:break-word}
.side .rel{cursor:pointer;padding:8px 10px;border:1px solid var(--line-soft);border-radius:2px;
  margin-bottom:5px;font:400 12px/1.5 var(--sans);color:var(--fg-mid);transition:.14s;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.side .rel:hover{border-color:var(--ember-500);background:var(--raise)}
.side .rel em{font-style:normal;font-weight:600;color:var(--ember-500);font-size:11px}
.side .rel i{flex:1 1 100%;font-style:normal;font:400 10px/1 var(--mono);color:var(--fg-dim)}
.ends{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.endbtn{display:inline-flex;align-items:center;gap:6px;background:var(--raise);border:1px solid var(--line);
  border-radius:2px;color:var(--fg-mid);cursor:pointer;font:500 11.5px/1 var(--sans);padding:8px 10px;transition:.14s}
.endbtn:hover{border-color:var(--ember-500);color:var(--fg)}
.ends .arrow{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:2px;color:var(--fg-dim);font-size:13px}
.inferred{margin-top:14px;padding:10px 12px;border:1px dashed var(--line);border-radius:2px}
.inferred b{display:block;font:600 11px/1 var(--sans);color:var(--warn);margin-bottom:5px}
.inferred p{font:400 11.5px/1.55 var(--sans);color:var(--fg-dim);margin:0}
.hintbox{font:400 12.5px/1.65 var(--sans);color:var(--fg-dim);padding:12px 13px;
  border:1px dashed var(--line);border-radius:2px}
.hintbox b{color:var(--fg-mid);font-weight:600}

.legend-grid.hide{display:none}
.exp .side{overflow:auto}
/* a way back to the overview once something is selected */
.side .backlink{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  color:var(--fg-dim);cursor:pointer;font:500 11px/1 var(--sans);padding:0 0 10px;transition:.14s}
.side .backlink:hover{color:var(--ember-500)}

.rowhint{padding:9px 14px 0;font:400 11.5px/1 var(--sans);color:var(--fg-dim)}
.rowhint.hide{display:none}

/* ---- step 2: statements beside the document ---- */
.claim{padding:10px 12px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:.13s}
.claim:hover{background:var(--raise)}
.claim.on{background:color-mix(in srgb,var(--ember-500) 11%,transparent);
  box-shadow:inset 2px 0 0 var(--ember-500)}
.claim .say{font:400 12.5px/1.5 var(--sans);color:var(--fg-mid)}
.claim.on .say{color:var(--fg)}
.claim .cmeta{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:5px}
.claim .cmeta span{font:400 10px/1.4 var(--mono);color:var(--fg-dim)}
.claim .where{color:var(--ember-500)!important}
.claim .ocr{color:var(--warn)!important}
.claim .cnote{margin-top:6px;font:400 10.5px/1.5 var(--sans);color:var(--warn)}

/* ---- step 1 onboarding blocks ---- */
.stored,.browser{width:min(560px,92%);margin:0 auto}
.stored.hide,.browser.hide{display:none}
.sbar{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line-soft);background:var(--raise)}
.sbar b{font:600 11.5px/1 var(--sans);color:var(--fg)}
.sbar .sp{margin-left:auto}
.btn.wide{width:100%;border-radius:0}

/* ---- step 3 ---- */
.cs{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:3px;background:color-mix(in srgb,var(--surface) 90%,transparent);overflow:hidden}
.cs.hide{display:none}

/* ---- step 4 ---- */
.askwork .chat{width:min(880px,100%)}
.askwork .chips{width:min(880px,100%);display:flex;gap:7px;flex-wrap:wrap;justify-content:center}

/* pills reused in the file list */
.pill.process{color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 34%,transparent)}
.pill.reject{color:var(--no);border:1px solid color-mix(in srgb,var(--no) 34%,transparent)}
.pill.duplicate{color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 34%,transparent)}

/* ---- the document popup ---- */
/* `inset` and the centring transform on .box.wide fought each other and put
   the popup half off screen. Positioned explicitly instead. */
/* Above the subpages, not beside them. The graph, the calendar and the ledger
   are `.sheet`s too and come later in the document, so at the same z-index the
   viewer opened underneath whichever one you opened it from -- which read as
   the file simply not opening. */
#viewer{z-index:9}
.viewerbox{display:flex;flex-direction:column;
  top:0!important;bottom:0!important;
  /* Beside the rail, not centred on the viewport. Centring put the popup
     half underneath the sidebar once the sidebar started hovering, which is
     how a filename came out reading "v_D.dwg". */
  left:var(--rail)!important;right:0!important;transform:none!important;
  width:auto!important;max-width:none!important}
.viewerbox .body{flex:1;min-height:0;display:flex;flex-direction:column;padding-top:0}
.viewerbox #vwBody{flex:1;min-height:0;max-height:none;overflow:auto;padding-top:14px}
.modes{display:flex;align-items:center;gap:7px;padding:10px 18px;border-bottom:1px solid var(--line);flex:none}
.mode{background:transparent;border:1px solid var(--line);border-radius:2px;color:var(--fg-dim);
  cursor:pointer;font:500 11.5px/1 var(--sans);padding:7px 11px;transition:.15s}
.mode:hover{color:var(--fg);border-color:var(--fg-dim)}
.mode.on{border-color:var(--ember-500);color:var(--fg);background:color-mix(in srgb,var(--ember-500) 12%,transparent)}
.mode.flat{border:0;cursor:default;font-weight:400;padding-left:0}
/* --- the document as it prints, not as it was parsed --- */
.msep{display:inline-block;width:1px;height:15px;background:var(--line);margin:0 4px;
      vertical-align:middle}
.pgs{display:flex;flex-direction:column;gap:18px;align-items:center;padding:12px 0}
.pg{margin:0;max-width:100%}
.pg img{max-width:100%;height:auto;display:block;border:1px solid var(--line);
        background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.18)}
.pg figcaption{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
               color:var(--fg-dim);text-align:center;padding-top:6px}
.pg .empty{min-height:180px;display:flex;flex-direction:column;justify-content:center}

/* ---- names are the way in ---- */
.nm.open{background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit;
  font:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px;transition:.13s}
.frow:hover .nm.open{text-decoration-color:var(--ember-500)}
.nm.open:hover{color:var(--ember-500)}
.nm.open.big{font:600 11px/1 var(--sans);color:var(--fg);text-decoration-color:var(--line);flex:none}
.ptitle .tiny{font:400 10px/1 var(--mono);color:var(--fg-dim)}
.claim{position:relative}
.claim .zoom{position:absolute;top:8px;right:10px;opacity:0;background:var(--surface);
  border:1px solid var(--line);border-radius:2px;color:var(--ember-500);cursor:pointer;
  font:500 9.5px/1 var(--mono);padding:4px 6px;transition:.13s}
.claim:hover .zoom,.claim.on .zoom{opacity:1}
.claim .zoom:hover{border-color:var(--ember-500)}

/* ===================================================================
   Browsing the graph
   =================================================================== */
.modebar{display:flex;align-items:center;gap:8px;flex:none;margin-bottom:12px}
.mtab{background:transparent;border:1px solid var(--line);border-radius:2px;color:var(--fg-dim);
  cursor:pointer;font:500 12.5px/1 var(--sans);padding:9px 14px;transition:.15s}
.mtab:hover{color:var(--fg);border-color:var(--fg-dim)}
.mtab.on{border-color:var(--ember-500);color:var(--fg);background:color-mix(in srgb,var(--ember-500) 12%,transparent)}
.modebar .sp{margin-left:auto}

.browsework{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px}
.browsework.hide,.askwork.hide{display:none}
.btabs{display:flex;gap:4px;padding:9px 10px;border-bottom:1px solid var(--line);flex-wrap:wrap;flex:none}
.btab{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid transparent;
  border-radius:2px;color:var(--fg-dim);cursor:pointer;font:500 11px/1 var(--sans);padding:6px 8px;transition:.14s}
.btab:hover{color:var(--fg-mid);border-color:var(--line)}
.btab.on{border-color:var(--ember-500);color:var(--fg);background:color-mix(in srgb,var(--ember-500) 11%,transparent)}
.btab b{font:500 9.5px/1 var(--mono);color:var(--fg-dim)}
.btab.on b{color:var(--ember-500)}

.bsearch{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line-soft);flex:none}
.bsearch input{flex:1;background:var(--raise);border:1px solid var(--line);border-radius:2px;
  color:var(--fg);font:400 12px/1 var(--sans);padding:8px 10px;outline:none}
.bsearch input:focus{border-color:var(--ember-500)}

.facets{padding:6px 12px;border-bottom:1px solid var(--line-soft);flex:none;max-height:132px;overflow:auto}
.facets:empty{display:none}
.facet{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:5px 0}
.fname{font:400 9.5px/1 var(--mono);color:var(--fg-dim);letter-spacing:.06em;text-transform:uppercase;
  min-width:74px}
.fchip{background:transparent;border:1px solid var(--line);border-radius:2px;color:var(--fg-dim);
  cursor:pointer;font:400 10.5px/1 var(--sans);padding:5px 7px;transition:.13s}
.fchip:hover{color:var(--fg);border-color:var(--fg-dim)}
.fchip.on{border-color:var(--ember-500);color:var(--fg);background:color-mix(in srgb,var(--ember-500) 12%,transparent)}
.fchip b{font:500 9px/1 var(--mono);opacity:.7}

.brow2{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line-soft);cursor:pointer;padding:10px 12px;transition:.13s}
.brow2:hover{background:var(--raise)}
.brow2.on{background:color-mix(in srgb,var(--ember-500) 11%,transparent);box-shadow:inset 2px 0 0 var(--ember-500)}
.brow2 .txt{flex:1;min-width:0}
.brow2 .txt b{display:block;font:500 12.5px/1.35 var(--sans);color:var(--fg);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.brow2 .txt i{display:block;font:400 10.5px/1.4 var(--mono);color:var(--fg-dim);font-style:normal;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow2 .cts{display:flex;flex-direction:column;gap:2px;align-items:flex-end;flex:none}
.brow2 .ct{font:400 9.5px/1.3 var(--mono);color:var(--fg-dim);white-space:nowrap}

/* ---- the detail ---- */
#brDetail{padding:16px 18px}
.dhead{display:flex;align-items:flex-start;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.dhead h3{font:600 16px/1.25 var(--sans);color:var(--fg)}
.dhead .did{font:400 10px/1.5 var(--mono);color:var(--fg-dim)}
.dhead .sp{margin-left:auto}
.dsum{font:400 13.5px/1.6 var(--sans);color:var(--fg);margin:14px 0;padding:11px 13px;
  background:var(--raise);border-left:2px solid var(--ember-500);border-radius:2px}
.dfacts{display:flex;flex-direction:column;gap:1px}
.dfact{font:400 12.5px/1.55 var(--sans);color:var(--fg-mid);padding:7px 0;border-bottom:1px solid var(--line-soft)}
.dfact i{font-style:normal;font-weight:600;margin-right:7px}
.dfact i.q{color:var(--warn)} .dfact i.d{color:var(--fg-dim)}
.dfact em{display:block;font:400 11px/1.5 var(--sans);color:var(--warn);margin-top:3px}
.dfact em.inf{color:var(--fg-dim)}
.dnotes{margin-top:12px}
.dnote{font:400 11.5px/1.55 var(--sans);color:var(--warn);padding:8px 11px;border:1px dashed var(--line);
  border-radius:2px;margin-bottom:6px}
#brDetail h4{font:600 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);
  margin:20px 0 9px}
.dlinks{display:flex;flex-wrap:wrap;gap:6px}
.dlink{display:inline-flex;align-items:center;gap:6px;background:var(--raise);border:1px solid var(--line);
  border-radius:2px;color:var(--fg-mid);cursor:pointer;font:500 11.5px/1 var(--sans);padding:7px 9px;transition:.14s}
.dlink:hover{border-color:var(--ember-500);color:var(--fg)}
.dev{display:flex;flex-direction:column;gap:3px}
.devrow{text-align:left;background:none;border:0;border-left:2px solid var(--line);cursor:pointer;
  color:var(--fg-dim);font:400 10.5px/1.5 var(--mono);padding:5px 0 5px 9px;transition:.13s}
.devrow:hover{color:var(--ember-500);border-left-color:var(--ember-500)}
.devrow em{color:var(--warn);font-style:normal}
.dacts{margin-top:20px;padding-top:14px;border-top:1px solid var(--line-soft)}
.dmore{font:400 11px/1.5 var(--sans);color:var(--fg-dim);padding:7px 0 0}
.exp .canvasw svg{cursor:default}

/* --- an answer to a different question says so first --- */
.approx{border-left:2px solid var(--warn);padding:7px 10px;margin:0 0 10px;
        background:color-mix(in srgb,var(--warn) 8%,transparent);
        font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--warn)}
.approx span{display:block;margin-top:4px;font-size:12px;letter-spacing:0;
             text-transform:none;color:var(--fg-dim);line-height:1.5}

/* --- step 03: the graph is the screen, and the whole of it --- */
.exp.inline{height:100%;min-height:0;border:1px solid var(--line);border-radius:3px;
            overflow:hidden;background:var(--bg)}
#s3review{display:flex;flex-direction:column;gap:10px;min-height:0;height:100%}
#s3review .exp.inline{flex:1 1 auto}

.glab{font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
      color:var(--fg-dim);margin-right:2px;align-self:center}

/* What the drawing encodes, said once, where the legend is. */
.encnote{font-size:11px;line-height:1.6;color:var(--fg-dim);margin-top:10px;
         padding-top:10px;border-top:1px solid var(--line-soft)}
.encnote b{color:var(--fg-mid);font-weight:500}

/* An evidence row in the graph panel. Clickable, because it opens the
   document at the row the statement came from. */
.rel.ev { cursor: pointer; }
.rel.ev em { font-style: normal; font-weight: 600; }
.rel i.src { opacity: .65; }

/* A recorded contradiction. Kept visually distinct from a relationship row:
   it is not something the graph asserts, it is something it refuses to
   resolve, and those should not look alike. */
.side .conflict { border-left: 2px solid var(--ember-500); padding: 6px 0 6px 8px; margin: 6px 0; }
.side .conflict em { font-style: normal; font-weight: 600; font-size: 11px; color: var(--ember-500); }
.side .conflict p { margin: 3px 0; font-size: 11px; line-height: 1.45; }
.side .conflict i { font-style: normal; font: 400 10px/1.3 var(--mono); color: var(--fg-dim); }

/* The question builder: sentences with dropdowns where the variable parts go. */
.builder { margin-top: 10px; }
.builder .btop { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.builder .btop .sp { flex: 1; }
.tlist { display: flex; flex-direction: column; gap: 4px; height: 210px; min-height: 90px; overflow-y: auto; resize: vertical; }
.trow { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; }
.trow:hover { background: var(--bg-soft, rgba(127,127,127,.08)); }
.tsent { flex: 1; font-size: 12px; line-height: 1.9; }
.tsent select.slot {
  font: inherit; font-size: 11px; padding: 1px 4px; margin: 0 2px;
  border: 1px solid var(--ember-500); border-radius: 4px;
  background: transparent; color: var(--ember-500); max-width: 190px;
}
.tsent select.slot:disabled { border-color: var(--fg-dim); color: var(--fg-dim); }
.btn.tiny { font-size: 10px; padding: 3px 8px; }
.langs{display:inline-flex;gap:6px}
.langs.hide,.tlist.hide{display:none}

/* What came off one highlighted line. The highlight says something was taken
   from here; this says what, and each row focuses that statement. */
.claimpop{background:color-mix(in srgb,var(--ember-500) 7%,transparent);
  border-left:2px solid var(--ember-500)}
.claimpop .cph{font:500 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ember-500);padding:7px 10px 5px}
.claimpop .cpr{padding:5px 10px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.claimpop .cpr:hover{background:color-mix(in srgb,var(--ember-500) 10%,transparent)}
.claimpop .cpr em{font-style:normal;font:500 10px/1 var(--mono);color:var(--ember-500)}
.claimpop .cpr span{font-size:11.5px;line-height:1.4;word-break:break-word}
.claimpop .cpr i{font-style:normal;font:400 9.5px/1.3 var(--mono);color:var(--fg-dim)}
.ln-row[data-claims],tr[data-claims]{cursor:pointer}

/* Which kinds of information came out of a file, and the colour each one
   highlights with. Five families, so the palette stays readable rather than
   becoming a lookup table nobody memorises. */
:root{
  --fam-placement:#c2612a; --fam-attribution:#2f6f8f; --fam-dates:#6b7f2e;
  --fam-naming:#8a5a9e; --fam-catalogue:#8a7040; --fam-other:#777;
}
.flegend{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:8px 10px;margin-bottom:10px;border:1px solid var(--line);border-radius:3px}
.flegend.empty{display:block;color:var(--fg-dim);font-size:11.5px}
.flegend.empty b{display:block;color:var(--fg);font-size:12px;margin-bottom:2px}
.flegend .fchip{display:inline-flex;align-items:center;gap:5px;
  font:500 10.5px/1 var(--ui);padding:4px 7px;border-radius:3px;
  background:color-mix(in srgb,var(--fg) 5%,transparent);cursor:default}
.flegend .fchip i{width:8px;height:8px;border-radius:2px;background:var(--fam-other)}
.flegend .fchip b{opacity:.6;font-weight:600}
.flegend .fnote2{font:400 10px/1 var(--mono);color:var(--fg-dim);margin-left:auto}
.fchip[data-fam=placement] i{background:var(--fam-placement)}
.fchip[data-fam=attribution] i{background:var(--fam-attribution)}
.fchip[data-fam=dates] i{background:var(--fam-dates)}
.fchip[data-fam=naming] i{background:var(--fam-naming)}
.fchip[data-fam=catalogue] i{background:var(--fam-catalogue)}

/* The highlight itself takes the family's colour. */
[data-fam=placement].extracted{box-shadow:inset 3px 0 0 var(--fam-placement)}
[data-fam=attribution].extracted{box-shadow:inset 3px 0 0 var(--fam-attribution)}
[data-fam=dates].extracted{box-shadow:inset 3px 0 0 var(--fam-dates)}
[data-fam=naming].extracted{box-shadow:inset 3px 0 0 var(--fam-naming)}
[data-fam=catalogue].extracted{box-shadow:inset 3px 0 0 var(--fam-catalogue)}

/* Dates on record: a standing button for what is ahead, and the full list
   behind it. Deliberately not a month grid: the corpus spans 2008 to 2027 and
   a grid of nineteen years is a worse answer than a list. */
.deadbtn{position:fixed;right:18px;bottom:18px;z-index:60;
  font:500 11px/1 var(--ui);padding:9px 13px;border-radius:20px;cursor:pointer;
  border:1px solid var(--ember-500);color:#fff;background:var(--ember-500);
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
.deadbtn.hide{display:none}
.deadbtn span{font-weight:700}
.calwrap{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;padding:24px}
.calwrap.hide{display:none}
.calbox{background:var(--surface);border:1px solid var(--line);border-radius:4px;
  width:min(680px,100%);max-height:82vh;display:flex;flex-direction:column;resize:both;overflow:hidden}
.calhead{display:flex;align-items:center;gap:9px;padding:12px 14px;
  border-bottom:1px solid var(--line)}
.calhead .sp{flex:1}
.calbody{overflow-y:auto;padding:12px 14px}
.calgrp{margin-bottom:14px}
.calgrp h5{font:600 11.5px/1 var(--sans);margin-bottom:6px;color:var(--ember-500)}
/* minmax(0,...) on both flexible tracks. With a bare `auto` track and
   `justify-self:end`, a row carrying three source buttons grew past the track
   and overflowed to the LEFT, off the edge of the box: the buttons were there
   and clickable with their names cut in half. */
.calrow{display:grid;grid-template-columns:84px 118px minmax(0,1fr) minmax(0,auto);
  gap:8px;align-items:baseline;padding:4px 6px;border-radius:3px;font-size:11.5px}
.calrow:nth-child(odd){background:color-mix(in srgb,var(--fg) 3%,transparent)}
.calrow.ahead{background:color-mix(in srgb,var(--ember-500) 12%,transparent);font-weight:600}
.calrow time{font:400 10.5px/1.5 var(--mono);color:var(--fg-dim)}
.calrow.ahead time{color:var(--ember-500)}
.calrow .cs{color:var(--fg-dim);word-break:break-word}
/* Both placed explicitly. The note spans every column, so with auto placement
   the sources were pushed past it onto a third implicit row starting back at
   column one -- which is how three file buttons ended up hanging under the
   row they belong to, half off the left edge of the box. */
.calrow i{grid-column:1/-1;grid-row:2;font-style:normal;font:400 10px/1.4 var(--mono);
  color:var(--fg-dim)}
.calrow .csrcs{grid-column:4;grid-row:1}

/* The edge legend, drawn rather than described. */
.edgekey{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:9px;
  padding-top:9px;border-top:1px solid var(--line)}
.edgekey .ek{display:inline-flex;align-items:center;gap:6px;
  font:400 10px/1 var(--ui);color:var(--fg-dim)}
.edgekey path{stroke:var(--fg-dim);fill:none;stroke-width:1.4}
.edgekey path.dash{stroke-dasharray:5 3}
.edgekey path.dot{stroke-dasharray:1.5 3}
.edgekey path.thick{stroke-width:3.4}
.edgekey .ekn{fill:var(--fg-dim)}
.edgekey .ekr{fill:none;stroke:var(--ember-500);stroke-width:1.4;stroke-dasharray:2 2}
.chip[disabled]{opacity:.4;pointer-events:none}

/* Querying the graph directly. */
.sqlbox{width:min(1000px,100%);height:min(78vh,760px)}
.sqlmain{flex:1;min-height:0;display:grid;
  grid-template-columns:var(--sqlside,230px) 7px minmax(0,1fr)}
.sqlside{overflow:auto;
  border-right:1px solid var(--line);padding:10px 12px}
.sqlside h6{font:600 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-dim);margin:10px 0 6px}
.sqlside h6:first-child{margin-top:0}
.sqt{margin-bottom:7px;font-size:11px}
.sqt b{font-weight:600;color:var(--ember-500)}
.sqt span{float:right;color:var(--fg-dim);font:400 10px/1.4 var(--mono)}
.sqt i{display:block;font-style:normal;font:400 9.5px/1.35 var(--mono);color:var(--fg-dim);
  word-break:break-word}
.sqex{display:block;width:100%;text-align:left;font:400 11px/1.35 var(--ui);
  padding:5px 7px;margin-bottom:3px;border:1px solid var(--line);border-radius:3px;
  background:transparent;color:inherit;cursor:pointer}
.sqex:hover{border-color:var(--ember-500);color:var(--ember-500)}
.sqlcol{display:flex;flex-direction:column;min-width:0}
#sqlText{font:400 12px/1.55 var(--mono);padding:10px 12px;border:0;border-bottom:1px solid var(--line);
  background:transparent;color:inherit;resize:vertical;height:132px;min-height:64px;outline:none}
.sqlbar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line)}
.sqlout{flex:1;min-height:0;overflow:auto;padding:0 2px}
.sqlout table{width:100%}
.sqlout th{position:sticky;top:0;background:var(--surface);text-align:left;
  font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-dim);padding:7px 9px;border-bottom:1px solid var(--line)}
.sqerr{padding:14px;font-size:11.5px;color:var(--fg-dim)}
.sqlchip{font-weight:700;letter-spacing:.06em}
.sp2{flex:1}

/* Where else the same search finds something. */
.belse{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:6px 10px;
  border-bottom:1px solid var(--line)}
.belse.hide{display:none}
.belse span{font:400 10px/1 var(--mono);color:var(--fg-dim);margin-right:2px}
.belse .chip{font-size:10px;padding:3px 7px}
.belse .chip b{opacity:.65}

/* Metadata: what is recorded about a symbol rather than between two of them.
   Same five colours in the panel and in the legend, so they agree. */
:root{
  --md-location:#2f6f8f; --md-contact:#8a5a9e; --md-identity:#c2612a;
  --md-timing:#6b7f2e; --md-part:#8a7040; --md-other:#777;
}
.side .mdgrp{margin:8px 0}
.side .mdh{display:flex;align-items:center;gap:6px;
  font:600 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-dim);margin-bottom:4px}
.side .mdh i,.mk2 i{width:8px;height:8px;border-radius:2px;background:var(--md-other);flex:0 0 auto}
.side .mdrow{display:grid;grid-template-columns:112px 1fr;gap:8px;
  padding:2px 0 2px 14px;font-size:11.5px}
.side .mdrow em{font-style:normal;font:400 10.5px/1.5 var(--mono);color:var(--fg-dim)}
.side .mdrow span{word-break:break-word}
.mdkey{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:9px;
  padding-top:9px;border-top:1px solid var(--line)}
.mdkey b{flex:1 1 100%;font:600 9.5px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-dim);font-weight:600}
.mk2{display:inline-flex;align-items:center;gap:5px;font:400 10px/1 var(--ui);color:var(--fg-dim)}
[data-md=location] i{background:var(--md-location)}
[data-md=contact] i{background:var(--md-contact)}
[data-md=identity] i{background:var(--md-identity)}
[data-md=timing] i{background:var(--md-timing)}
[data-md=part] i{background:var(--md-part)}

/* Collapsing the rail. The steps stay reachable as numbers, because losing
   the sense of where you are in a four-stage pipeline is worse than the
   screen space it buys back. */
/* NOT position:relative. The rail is `position:fixed` further up, and
   restating position here overrode it, dropped the rail into normal flow and
   pushed every screen below the fold. A fixed element is already a containing
   block for the absolutely positioned toggle, so nothing here needs it. */
.rail{transition:width .16s ease}
.railtoggle{position:absolute;top:12px;right:8px;z-index:5;width:20px;height:20px;
  border:1px solid var(--line);border-radius:3px;background:var(--surface);
  color:var(--fg-dim);cursor:pointer;padding:0;
  display:grid;place-items:center;line-height:0}
.railtoggle svg{width:11px;height:11px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.railtoggle:hover{color:var(--ember-500);border-color:var(--ember-500)}
/* The rail is fixed and `main` is offset by --rail, so collapsing has to move
   the variable rather than the width, or the rail shrinks and the main pane
   keeps its old margin. */
body.railclosed{--rail:56px}
body.railclosed .rail{overflow:hidden}
/* Collapsed means collapsed. Hiding the labels but leaving the rail wide
   enough for a word of them to poke through is worse than not collapsing at
   all, so everything that is not a symbol goes, and the rail clips whatever
   is left rather than letting it spill. */
body.railclosed .rail{overflow:hidden;padding-left:0;padding-right:0}
body.railclosed .rail .mark,
body.railclosed .rail .step span,
body.railclosed .rail .tool .lbl,
body.railclosed .rail .tool .cnt,
body.railclosed .rail .rail-foot{display:none}
body.railclosed .rail .tool{width:100%;padding:9px 0;justify-content:center;
  overflow:hidden;white-space:nowrap}
body.railclosed .rail .tool svg{flex:0 0 auto}
body.railclosed .rail .tools{padding:0 8px}
body.railclosed .railtoggle{right:auto;left:50%;transform:translateX(-50%) rotate(180deg);
  top:10px}
body.railclosed .rail .tools{padding-top:40px}
body.railclosed .rail .step{justify-content:center;padding-left:0;padding-right:0}
body.railclosed .rail .tool{justify-content:center}

/* Dropping a document. The only route into the store that makes no assumption
   about where the file lives on the visitor's machine. */
.dropzone{border:1.5px dashed var(--line);border-radius:5px;padding:14px 16px;
  margin:14px 0;text-align:center;transition:border-color .12s,background .12s}
.dropzone b{display:block;font:600 13px/1.4 var(--sans);margin-bottom:5px}
.dropzone span{font:400 10px/1.6 var(--mono);color:var(--fg-dim);word-spacing:.25em}
.dropzone.over{border-color:var(--ember-500);background:color-mix(in srgb,var(--ember-500) 8%,transparent)}
.dropzone.over b{color:var(--ember-500)}

/* The mode bar collapses when there is nothing to toggle between, rather than
   sitting there as an empty strip. */
.modes:empty{display:none}

/* Dragging the canvas is a pan, not a text selection. Without this the node
   labels highlight as the pointer sweeps across them, which reads as the
   drawing being broken. */
.exp .canvasw,.exp svg,.exp svg text{user-select:none;-webkit-user-select:none}

/* The overview. One card per thing this instance can do, each showing what it
   currently holds rather than what it would hold if you pressed it. */
.homework{overflow-y:auto;padding:18px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px;max-width:1000px;margin:0 auto;width:100%}
.card{display:flex;flex-direction:column;gap:5px;text-align:left;padding:14px 15px;
  border:1px solid var(--line);border-radius:4px;background:transparent;color:inherit;
  cursor:pointer;transition:border-color .12s}
.card:hover:not(.off){border-color:var(--ember-500)}
.card.off{opacity:.5;cursor:default}
.card b{font:600 12.5px/1.3 var(--sans)}
.card .v{font:400 18px/1.2 var(--sans);color:var(--ember-500)}
.card.off .v{color:var(--fg-dim)}
.card i{font-style:normal;font:400 11px/1.45 var(--ui);color:var(--fg-dim)}

/* The pipeline's own step strip, now that the rail no longer carries one. */
.stepstrip{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap}
.stepstrip .step{display:inline-flex;align-items:center;gap:6px;
  width:auto;flex:0 0 auto;padding:5px 10px;border-left:0;
  border:1px solid var(--line);border-radius:3px;background:transparent;
  color:var(--fg-dim);font:500 11px/1 var(--ui);cursor:pointer}
.stepstrip .step i{font:400 10px/1 var(--mono);color:var(--fg-dim);font-style:normal}
.stepstrip .step.on{border-color:var(--ember-500);color:var(--ember-500)}
.stepstrip .step.done .mk{color:var(--ember-500)}
.stepstrip .step:disabled{opacity:.42;cursor:default}

/* The seam between two panes. Wider than it looks: a one-pixel target is a
   target nobody hits, so the handle is a seven-pixel grid column with a
   hairline drawn down the middle of it. */
.pgrip{cursor:col-resize;position:relative;background:transparent}
.pgrip::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:1px;
  background:var(--line)}
.pgrip:hover::after,body.resizing .pgrip::after{background:var(--ember-500);
  left:2px;width:3px;border-radius:2px}
/* While dragging, nothing else should decide it is being hovered or selected. */
body.resizing{cursor:col-resize;user-select:none;-webkit-user-select:none}
body.resizing *{pointer-events:none}
body.resizing .pgrip{pointer-events:auto}

/* The legend, which is also the kind filter. A row that is switched off says
   so by going quiet rather than by disappearing, because the point of a legend
   is that everything the drawing can contain is listed whether or not it is
   currently drawn. */
.lgdhead{display:flex;align-items:baseline;gap:7px;margin-bottom:6px;
  font:600 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim)}
.lgdhead span{font:400 9px/1 var(--mono);letter-spacing:.04em;text-transform:none;opacity:.7}
.side .lgd{display:flex;align-items:center;gap:8px;width:100%;padding:4px 6px;
  border:1px solid transparent;border-radius:3px;background:transparent;color:inherit;
  cursor:pointer;text-align:left;font:400 11.5px/1.3 var(--ui)}
.side .lgd:hover{border-color:var(--line)}
.side .lgd b{font-weight:500}
.side .lgd em{margin-left:auto;font:400 9.5px/1 var(--mono);font-style:normal;color:var(--fg-dim)}
.side .lgd.rel svg{flex:0 0 auto}
.side .lgd.off{opacity:.38}
.side .lgd.off b{text-decoration:line-through}

/* The badge carries a dot per kind of statement on the line, so the colour in
   the legend is visibly the same colour as the one on the row. */
.xb{display:inline-flex;align-items:center;gap:4px}
.xb i{width:7px;height:7px;border-radius:2px;background:var(--fam-other);flex:0 0 auto}
.xb i[data-fam=placement]{background:var(--fam-placement)}
.xb i[data-fam=attribution]{background:var(--fam-attribution)}
.xb i[data-fam=dates]{background:var(--fam-dates)}
.xb i[data-fam=naming]{background:var(--fam-naming)}
.xb i[data-fam=catalogue]{background:var(--fam-catalogue)}

/* The legend is a filter too. Hiding a family stops it being highlighted,
   which is the clearest way to show that the two colours are the same one. */
.flegend .fchip{border:1px solid transparent;cursor:pointer}
.flegend .fchip:hover{border-color:var(--line)}
.flegend .fchip.off{opacity:.4}
.flegend .fchip.off i{background:var(--fg-dim) !important}
.extracted.famhidden{box-shadow:none !important;background:transparent !important}
.extracted.famhidden .xb{opacity:.25}

/* Subpages are pages, not dialogs.

   The graph, the ledger, the SQL view and the calendar were modal boxes:
   inset from every edge, floating on a blurred scrim, with the sidebar
   underneath them. They are not interruptions to a task, they are places you
   go, so they fill the screen and the sidebar stays on top of them -- which
   also means the way out of one is the same control that got you there.

   Below the rail's z-index deliberately. The rail hovers; these do not. */
.sheet{background:var(--bg);backdrop-filter:none;z-index:4}
.sheet .box,
.sheet .box.wide{inset:0 0 0 var(--rail);border:0;border-radius:0;box-shadow:none;
  max-width:none;width:auto;left:var(--rail);right:0;transform:none}
.calwrap{background:var(--bg);z-index:4;display:block;padding:0}
.calwrap .calbox{position:absolute;inset:0 0 0 var(--rail);width:auto;
  max-height:none;height:auto;border:0;border-radius:0;resize:none}
.calwrap .sqlbox{width:auto;height:auto}
/* The rail keeps its own stacking above them. */
.rail{z-index:8}
body.railclosed .sheet .box,
body.railclosed .calwrap .calbox{left:var(--rail)}

/* Where a date came from. A contract ending is worth no more than the page it
   was read off, so the page is one click away. */
.csrcs{display:flex;flex-wrap:wrap;gap:4px;justify-self:end;justify-content:flex-end;
  min-width:0;max-width:100%}
.csrcs.none{font:400 9.5px/1.4 var(--mono);color:var(--fg-dim);opacity:.7}
.csrc{font:400 9.5px/1 var(--mono);padding:3px 6px;border:1px solid var(--line);
  border-radius:3px;background:transparent;color:var(--fg-dim);cursor:pointer;
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csrc:hover{border-color:var(--ember-500);color:var(--ember-500)}

/* The view controls live with the legend, not scattered along the bottom of
   the canvas: what the drawing shows and what the symbols mean are the same
   question asked twice. */
.exp .side .encbar{display:flex;flex-wrap:wrap;gap:5px;align-items:center;
  padding-top:10px;margin-top:10px;border-top:1px solid var(--line)}
.exp .side .encbar .glab{width:100%;font:600 9.5px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-dim);margin:6px 0 2px}
.exp .side .encbar .sp2{display:none}

/* A file that could not be read explains itself. The explanation is prose and
   a table of measurements, so it reads like a paragraph rather than a centred
   banner, and the table's first column is a label rather than a stub. */
/* Left, not centred: what follows it is a full-width table of measurements,
   and a centred banner over a left-aligned table reads as two documents. */
.cannot{max-width:78ch;margin:16px 0 0}

/* An upload the store refused. Stays on the list saying what happened rather
   than interrupting with a browser dialog and disappearing. */
.srow.failed{align-items:baseline;flex-wrap:wrap;
  background:color-mix(in srgb,var(--warn,#b4553a) 8%,transparent)}
.srow.failed .nm{font-weight:600}
.srow.failed .why{flex:1 1 100%;font:400 11px/1.45 var(--ui);color:var(--fg-dim);
  order:3;padding-top:2px}
.srow.failed .mini{order:2}

/* A query result drawn as the subgraph it picks out. */
.sqlviews{display:inline-flex;gap:5px}
.sqlgraph{height:100%;display:flex;flex-direction:column}
.sqlghead{padding:8px 12px;font:400 11px/1.4 var(--ui);color:var(--fg-dim);
  border-bottom:1px solid var(--line)}
.sqlgcanvas{flex:1;min-height:280px}
.sqlgcanvas svg{width:100%;height:100%}

/* A page shown by the router, not a dialog. .sheet keeps `display:none` until
   `.open`; the calwrap pages keep `.hide`. Both now sit beside the rail and
   neither draws a scrim, because there is nothing behind them to see. */
.calwrap{position:fixed;inset:0}
.rail .tool.on{border-color:var(--ember-500);color:var(--ember-500)}
.rail .tool.on svg{color:var(--ember-500)}

/* What a relationship means, in words, above the documents that say it. */
.side .pmean{font-size:11.5px;line-height:1.5;color:var(--fg-mid);
  padding:8px 10px;margin:8px 0 4px;border-left:2px solid var(--line);
  background:color-mix(in srgb,var(--fg) 3%,transparent)}

/* Every document behind a symbol or a line, grouped by file and scrollable.
   The list is the answer to "where does this come from", which is the question
   somebody has the moment they click on something. */
.side h4 .h4n{float:right;font:400 10px/1.4 var(--mono);color:var(--fg-dim);
  text-transform:none;letter-spacing:0}
.docsbehind{max-height:min(360px,42vh);overflow-y:auto;resize:vertical;
  border:1px solid var(--line);border-radius:3px}
.dbf{border-bottom:1px solid var(--line)}
.dbf:last-child{border-bottom:0}
.dbfh{display:flex;align-items:baseline;gap:8px;padding:6px 9px;
  background:color-mix(in srgb,var(--fg) 4%,transparent);position:sticky;top:0}
.dbfh b{flex:1;font:600 11px/1.3 var(--sans);word-break:break-word}
.dbfh span{font:400 10px/1 var(--mono);color:var(--fg-dim)}
.dbr{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
  padding:5px 9px 5px 14px;border:0;background:transparent;color:inherit;cursor:pointer}
.dbr:hover{background:color-mix(in srgb,var(--ember-500) 9%,transparent)}
.dbr em{font-style:normal;font:500 10.5px/1.3 var(--mono);color:var(--ember-500)}
.dbr i{font-style:normal;font:400 10px/1.35 var(--mono);color:var(--fg-dim);
  word-break:break-word}


/* ===================================================================
   Removing a document, asking as a place, and a legend you can undo
   =================================================================== */

/* One click, on the row, in every list a document appears in. Quiet until the
   row is under the pointer: deleting a document is not the thing somebody came
   to this list to do, so it does not compete with opening one. */
.frow .drop{flex:none;border:0;background:transparent;color:var(--fg-dim);
  cursor:pointer;font:400 15px/1 var(--sans);padding:0 4px;opacity:0;transition:.14s}
.frow:hover .drop,.frow.on .drop{opacity:.55}
.frow .drop:hover{opacity:1;color:var(--danger)}
.mini{white-space:nowrap}
.mini.danger{border-color:color-mix(in srgb,var(--danger) 45%,transparent);color:var(--danger)}
.mini.danger:hover{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.mini.hide{display:none}
.sheet .head .sp{margin-left:auto}

/* A legend click hides a kind of symbol. That is a change to the drawing, and
   a change with no visible undo is a trap -- somebody hides two kinds looking
   for a third and cannot get the picture back. */
.lgdhead{flex-wrap:wrap}
.lgdback{margin-left:auto;background:none;border:0;cursor:pointer;
  font:500 9.5px/1 var(--sans);color:var(--ember-500);padding:0;letter-spacing:0;
  text-transform:none}
.lgdback:hover{text-decoration:underline}

/* Asking is a page of its own, so it gets the page.
   It used to be an 880px column on a screen that had room for twice that, with
   the log fixed at 48vh and the builder pushing the whole thing into a scroll
   -- which is how the drag handle on the log ended up below the fold. Now the
   chat keeps the height it is given, the builder takes what is left and
   scrolls inside itself, and neither can push the other off the screen. */
.askwork{display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;gap:12px;overflow:hidden;padding:6px 0}
.askwork .chat{width:min(1600px,100%);flex:none;max-width:100%}
/* Driven by the handle below it, so the control is a visible bar rather than a
   corner grip that moved about with whatever else was on the screen. */
.askwork .log{height:var(--asklog,clamp(240px,42vh,1000px));min-height:120px;
  max-height:none;resize:none}
/* With the builder open the two share the screen. A viewer who has set a
   height with the handle keeps it -- that is what the handle is for. */
.askwork.building .log{height:var(--asklog,clamp(180px,26vh,800px))}
/* A column, so what gets squeezed when the builder opens is the answer log --
   never the box you type into, which `overflow:hidden` on .chat was quietly
   cutting off the bottom. */
/* The chat keeps the height the handle gives it and does not shrink: it was
   sharing the squeeze with the builder, and `overflow:hidden` then took the
   difference out of the bottom of the box -- which is the row you type into.
   The builder takes what is left and scrolls inside itself. */
.askwork .chat{flex:0 0 auto;display:flex;flex-direction:column}
.askwork .chat-top,.askwork .ask{flex:none}
.askwork .log{flex:0 0 auto}
.agrip{flex:none;width:min(1600px,100%);height:9px;cursor:row-resize;
  border-radius:3px;background:transparent;position:relative}
.agrip::after{content:'';position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:56px;height:3px;border-radius:2px;
  background:var(--line);transition:.14s}
.agrip:hover::after{background:var(--ember-500);width:84px}
.askwork.hide .agrip{display:none}
body.rowresizing{cursor:row-resize;user-select:none;-webkit-user-select:none}
body.rowresizing *{pointer-events:none}
.askwork .builder{width:min(1600px,100%);max-width:100%;flex:1 1 0;min-height:0;
  display:flex;flex-direction:column;margin-top:0}
.askwork.building .builder{min-height:120px}

/* Typing is the default and there is nothing under it, so the answers take the
   whole screen -- which is the point of giving this its own page. Nothing to
   share means nothing to divide, so the handle is not offered either; it comes
   back with the builder, which is the only time it has two things to sit
   between. */
.askwork:not(.building) .agrip{display:none}
.askwork:not(.building) .builder{flex:0 0 auto}
.askwork:not(.building) .chat{flex:1 1 auto;min-height:0}
.askwork:not(.building) .log{flex:1 1 auto;height:auto;min-height:150px}
.askwork .tlist{flex:1;height:auto;min-height:90px;resize:none}

/* The guide fills its page top to bottom too. `.guide` carried a 74vh cap
   from when it was a dialog inset from every edge; as a page that just left a
   band of empty screen under the last paragraph. The scroll belongs to the
   page body, and the column stays a column. */
#guide .body{padding:0 24px}
.guide{max-height:none;overflow:visible;padding:20px 0 48px}


/* Step 1 once documents are waiting.

   The onboarding block explains how to load something, which is the only thing
   worth saying while the system is empty and the wrong thing to give half a
   screen to once twenty documents are sitting there. So the blurb condenses,
   the list takes the height that is left and scrolls inside itself, and the
   button that acts on it stays on screen -- rather than being pushed under the
   fold by a list that grows with every upload. */
.onboard.loaded{gap:10px;padding-top:14px}
.onboard.loaded .ob{max-width:72ch;flex:none}
.onboard.loaded .ob h2{font:600 15px/1.3 var(--sans);margin-bottom:10px}
.onboard.loaded .ob > p,
.onboard.loaded .obnote{display:none}
.onboard.loaded .dropzone{padding:12px 16px;margin-bottom:10px}
.onboard.loaded .dropzone b{font-size:12px}
.onboard.loaded .stored{width:min(720px,96%)}

/* Step 1: one bounded scroller, and a footer that does not move.

   The screen itself scrolled for a while, which put the list on the page
   where people reach for it but took the bottom bar along with it. The bar
   carries the only "Start indexing" button, so it has to stay put. The list
   of waiting documents is therefore a box with a limit, scrolling inside
   itself, and everything around it is fixed. */
#s1empty .slist{max-height:none}
.onboard.loaded .stored{display:flex;flex-direction:column;
  max-height:min(52vh,460px);overflow:hidden}
.onboard.loaded .stored .sbar{flex:none}
.onboard.loaded .stored .slist{flex:1;min-height:90px;overflow-y:auto}


/* The legend, with something selected. The six switches are the kind filter and
   have to stay reachable; the paragraph explaining what size and thickness mean
   does not, and full height it pushed the panel somebody just clicked for below
   the fold. */
.legend-grid.tight.slim{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 10px;
  padding-bottom:10px}
.legend-grid.tight.slim .lgdhead{flex:1 1 100%}
.legend-grid.tight.slim .lgd{width:auto;padding:3px 7px;gap:5px}
.legend-grid.tight.slim .lgd b{font-size:10px}
.legend-grid.slim .legendnote{display:none}


/* "Not read yet" is not "nothing came out".

   The first is a statement about where the pipeline has got to, the second is
   a statement about the document. Step 1 previews the first file in the list
   before extraction has run, so it used to deliver the second verdict when
   only the first was true, and step 2 then contradicted it. Different words,
   different colour, and neither of them looks like a failure. */
.flegend.waiting{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding:9px 12px;margin-bottom:10px;border:1px dashed var(--line);border-radius:3px;
  background:color-mix(in srgb,var(--fg) 3%,transparent)}
.flegend.waiting b{font:600 11.5px/1.4 var(--sans);color:var(--fg-mid)}
.flegend.waiting span{font:400 11px/1.45 var(--sans);color:var(--fg-dim)}
/* And the honest empty case, said plainly rather than in passing. */
.flegend.empty{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding:9px 12px;margin-bottom:10px;border-radius:3px;
  border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);
  background:color-mix(in srgb,var(--warn) 8%,transparent)}
.flegend.empty b{font:600 11.5px/1.4 var(--sans);color:var(--warn)}
.flegend.empty span{font:400 11px/1.45 var(--sans);color:var(--fg-dim)}


/* What the archive already holds, on the screen whose job is now to take the
   next documents. Quiet: it is context, not an action. */
.archnote{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  width:min(720px,96%);margin:0 auto;padding:9px 12px;border:1px solid var(--line-soft);
  border-radius:3px;background:color-mix(in srgb,var(--fg) 3%,transparent);
  font:400 11.5px/1.5 var(--sans);color:var(--fg-dim)}
.archnote b{color:var(--fg-mid);font-weight:600}
.archnote .mini{margin-left:auto}
.archnote.hide{display:none}


/* The sidebar is navigation, so it is centred and nothing else is in it.

   It carried a subtitle, a running tally of files and statements in its foot,
   and an asymmetric 26px/22px gutter left over from when it was a scroll-spy.
   The tally repeated what every screen's own footer already says. What is
   left is the wordmark and the places you can go, on one axis, with the list
   sitting in the middle of the height rather than pinned to the top. */
/* Wordmark at the top where a wordmark goes, the places centred in whatever
   height is left, the account at the foot. */
.rail{padding:24px 14px 18px;gap:0;align-items:stretch;justify-content:flex-start}
.mark{display:flex;align-items:center;gap:9px;padding:0 4px 4px;flex:none}
.mark b{font-size:15px;letter-spacing:-.01em}
.logo{width:22px;height:22px;flex:none;color:var(--fg);overflow:visible}
.logo .dot{fill:var(--ember-500)}
.tools{margin:auto 0}
.tools{padding-right:0;gap:5px}
.tool{justify-content:center;text-align:center;padding:9px 12px;gap:9px}
/* The count sat on the right margin, which pulled the label off centre. It
   rides with the label now. */
.tool .cnt{margin-left:0}
.rail-foot{display:none}
/* Collapsed, the rule above already centres; keep the narrow padding. */
body.railclosed .rail{padding-left:0;padding-right:0}


/* Who is signed in, and the way out.

   HTTP Basic sends a username the server does not check: one credential, and
   inventing a second thing to tell people on the day would help nobody. The
   name is still worth showing, because it is what the person typed and it is
   how they know which instance they are on. */
.account{display:flex;align-items:center;gap:8px;flex:none;padding:10px 6px 0;
  margin-top:14px;border-top:1px solid var(--line-soft)}
.account.hide{display:none}
.account .who{display:flex;align-items:center;gap:7px;min-width:0;flex:1}
.account .who i{flex:none;width:21px;height:21px;border-radius:50%;display:grid;
  place-items:center;font:600 9.5px/1 var(--sans);font-style:normal;
  color:var(--ember-500);background:color-mix(in srgb,var(--ember-500) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--ember-500) 35%,transparent)}
.account .who b{font:500 11px/1.2 var(--sans);color:var(--fg-mid);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.signout{flex:none;background:none;border:0;cursor:pointer;padding:2px 0;
  font:500 10px/1 var(--sans);color:var(--fg-dim);transition:.15s}
.signout:hover{color:var(--danger)}
body.railclosed .account{justify-content:center;padding-left:0;padding-right:0}
body.railclosed .account .who b,
body.railclosed .signout{display:none}
/* .who takes the spare width so a long name can use it. Collapsed there is no
   name and nothing to take, and a flexed .who put the avatar against its own
   left edge rather than in the middle of the rail. */
body.railclosed .account .who{flex:0 0 auto;justify-content:center}


/* ===================================================================
   The "?" every page carries, and the panel behind it
   ===================================================================
   One text, in two places. The guide page prints every section; a page's
   own button prints its section only, and both come out of the same table
   in guide.js, so a page and the guide cannot end up saying different
   things about the same screen. Hover shows it, click pins it. */

.helpbtn{margin-left:10px;flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;padding:0;
  border:1px solid var(--line);background:transparent;
  font:600 11px/1 var(--sans);color:var(--fg-dim);transition:.14s}
.helpbtn:hover{border-color:var(--ember-500);color:var(--ember-500)}
/* Bars that already push their contents apart with a .sp need no more than a
   gap; a second margin:auto would split the free space in two and leave what
   is to the left of it floating in the middle. The bars without one get the
   auto. */
.stepstrip .helpbtn,.modebar .helpbtn,.calhead .helpbtn,.head .helpbtn{align-self:center}
.stepstrip .helpbtn,.head .helpbtn{margin-left:auto}
.shead .helpbtn{align-self:flex-start;margin-top:4px;margin-left:auto}

.helppanel{position:fixed;z-index:40;overflow:auto;border-radius:4px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 14px 40px rgba(0,0,0,.28)}
.helppanel.hide{display:none}
.helppanel .hphead{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;
  padding:11px 14px;background:var(--surface);border-bottom:1px solid var(--line-soft)}
.helppanel .hphead b{font:600 12px/1 var(--sans);color:var(--fg)}
.helppanel .hpx{margin-left:auto;background:none;border:0;cursor:pointer;
  color:var(--fg-dim);font:400 16px/1 var(--sans);padding:0 2px}
.helppanel .hpx:hover{color:var(--danger)}
.helppanel .hpbody{padding:12px 14px 14px}
.helppanel h4{font:600 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-dim);margin:16px 0 8px}
.helppanel .hpall{margin-top:6px;background:none;border:0;padding:0;cursor:pointer;
  font:500 11px/1 var(--sans);color:var(--ember-500)}
.helppanel .hpall:hover{text-decoration:underline}
/* Not pinned means it is following the pointer's intent, so it must not eat
   clicks meant for the page underneath on the way past. */
.helppanel:not(.pinned){pointer-events:auto}

/* The three stages, drawn. Sits in the guide and in two of the panels. */
.gflow{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap;margin:12px 0 14px}
.gflow .gf{flex:1 1 0;min-width:96px;display:flex;flex-direction:column;gap:3px;
  padding:9px 10px;border:1px solid var(--line-soft);border-radius:3px;
  background:color-mix(in srgb,var(--fg) 2%,transparent)}
.gflow .gf i{font:600 9px/1 var(--mono);letter-spacing:.12em;font-style:normal;color:var(--fg-dim)}
.gflow .gf b{font:600 12px/1.2 var(--sans);color:var(--fg)}
.gflow .gf em{font:400 10.5px/1.35 var(--sans);font-style:normal;color:var(--fg-dim)}
.gflow .gf.ask{border-color:color-mix(in srgb,var(--ember-500) 40%,transparent);
  background:color-mix(in srgb,var(--ember-500) 7%,transparent)}
.gflow .gf.ask i,.gflow .gf.ask b{color:var(--ember-500)}
.gflow .gfa{align-self:center;color:var(--fg-dim);font-size:12px}

/* The two-column tables in the guide: a label and what it means. */
.gtab.enc td:first-child{white-space:nowrap;color:var(--fg);font-weight:500;
  vertical-align:top;padding-right:14px}
.gtab.enc code{font:400 11px/1.4 var(--mono);color:var(--ember-500)}

@media (max-width:640px){
  .gflow .gfa{display:none}
  .gflow .gf{flex:1 1 100%}
}


/* ===================================================================
   Where one statement can be checked, next to the statement
   ===================================================================
   These were a block at the end of every answer: every source the answer
   rested on, with the store's 64-character content hash in each path, and
   nothing saying which line any of them backed. The claim ids on each Fact
   have always allowed the link to sit on the line it is evidence for. */

.srcs{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:8px;vertical-align:baseline}
.srcref{display:inline-flex;align-items:baseline;gap:5px;cursor:pointer;
  padding:1px 6px;border-radius:2px;min-width:0;
  border:1px solid var(--line-soft);background:transparent;
  font:400 10.5px/1.5 var(--mono);color:var(--fg-dim);
  white-space:nowrap;transition:.13s}
.srcref:hover{border-color:var(--ember-500);color:var(--ember-500);
  background:color-mix(in srgb,var(--ember-500) 7%,transparent)}
/* The file name shortens, the locator never does. "Kopie von Stueckliste…" is
   still recognisable with its tail cut off; `row 5` with its tail cut off is
   the half that made the chip worth clicking. */
.srcref b{font-weight:400;max-width:17ch;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.srcref em{font-style:normal;opacity:.62;flex:0 0 auto}
/* Read off an image, so the value is exact only as far as a machine reading
   of a picture is. The marker is the same diamond the set-aside panel uses. */
.srcref .ocr{font-style:normal;color:var(--warn);font-size:9px}

/* ---------------------------------------------------------------------------
   The graph's key, on a document

   Step 02 shows where a statement was read; step 03 shows where it ended up.
   They are the same statement, so they carry the same glyph and the same
   colour, and the switchboard above the document is the one from under the
   drawing. The rules below only place it -- every colour here comes from
   GRAPH.edgeKind at render time, so the two cannot drift apart.
--------------------------------------------------------------------------- */
.flegend.enc{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.flegend.enc .lgdhead{flex:1 1 100%;margin:2px 0 0}
.flegend.enc .lgd{display:inline-flex;align-items:center;gap:6px;width:auto;
  padding:3px 8px;border:1px solid var(--line-soft);border-radius:2px;
  background:transparent;cursor:pointer}
.flegend.enc .lgd:hover{border-color:var(--fg-dim)}
.flegend.enc .lgd b{font:500 11px/1 var(--ui);color:var(--fg)}
.flegend.enc .lgd em{font:400 9.5px/1 var(--mono);font-style:normal;color:var(--fg-dim)}
.flegend.enc .lgd .icon,.flegend.enc .lgd svg{flex:0 0 auto}
/* Switched off looks switched off: the row it governs loses its mark at the
   same moment, so the two have to be recognisable as one gesture. */
.flegend.enc .lgd.off{opacity:.38}
.flegend.enc .lgd.off b{text-decoration:line-through}

/* The row takes the relationship's own colour, handed over as --markc. The
   bar, the wash behind the line and the pill at the end of it were all the one
   ember hue before, which said "something was taken from here" and stopped
   there -- the same thing the legend above now says in six colours. Placed
   after the family rules above so it wins where both could apply. */
.extracted[style*="--markc"]{box-shadow:inset 3px 0 0 var(--markc)}
tr.extracted[style*="--markc"] td:first-child{box-shadow:inset 3px 0 0 var(--markc)}
tr.extracted[style*="--markc"] td,.ln-row.extracted[style*="--markc"]{
  background:color-mix(in srgb,var(--markc) 9%,transparent)}
tr.focus[style*="--markc"] td,.ln-row.focus[style*="--markc"]{
  background:color-mix(in srgb,var(--markc) 20%,transparent)}
tr.focus[style*="--markc"] td{outline-color:var(--markc)}
.extracted[style*="--markc"] .xb{color:var(--markc);
  border-color:color-mix(in srgb,var(--markc) 40%,transparent)}
/* Everything on this line is switched off: no bar, no wash, and the pill says
   "0 of 3" rather than disappearing, because the line did yield statements and
   hiding them is a choice the reader made and can undo. */
.extracted.famhidden[style*="--markc"]{box-shadow:none}
tr.extracted.famhidden[style*="--markc"] td{background:transparent;box-shadow:none}
.ln-row.extracted.famhidden[style*="--markc"]{background:transparent}
.extracted.famhidden[style*="--markc"] .xb{color:var(--fg-dim);border-color:var(--line)}
.xb i.dim{opacity:.25}

/* ---------- Search documents (P0-10) ----------
   A page like the SQL view and the calendar: the box fills the screen beside
   the rail. Hits are grouped by document, each one a button that opens the
   viewer at its place. The marked passage in the viewer uses --warn, not the
   ember of the statements, so "where the search hit is" and "what was taken
   from this line" never look like the same thing. */
.searchbox{width:min(980px,100%);height:min(82vh,820px)}
.srform{display:flex;gap:10px;padding:14px 14px 6px;flex:none}
.srform input{flex:1;background:var(--raise);border:1px solid var(--line);border-radius:2px;
  color:var(--fg);font:400 14px/1 var(--sans);padding:11px 12px;outline:none}
.srform input:focus{border-color:var(--ember-500)}
.srstat{padding:0 14px 8px;min-height:1.5em;flex:none}
.srbody{flex:1;min-height:0;padding-top:4px}
.srdoc{border:1px solid var(--line);border-radius:3px;margin-bottom:12px;
  background:color-mix(in srgb,var(--surface) 92%,transparent)}
.srdoc header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:9px 12px;
  border-bottom:1px solid var(--line-soft)}
.srdoc header b{font:600 13px/1.3 var(--sans);color:var(--fg)}
.srpath{font:400 10.5px/1.4 var(--mono);color:var(--fg-dim);word-break:break-all;flex:1;min-width:0}
.srtype{font:400 9.5px/1 var(--mono);color:var(--fg-dim);text-transform:uppercase;letter-spacing:.08em;
  border:1px solid var(--line);border-radius:2px;padding:3px 5px}
.srhit{display:block;width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  padding:9px 12px 10px;border-top:1px solid var(--line-soft);color:var(--fg-mid);
  box-shadow:inset 2px 0 0 transparent;transition:background .13s,box-shadow .13s}
.srdoc header + .srhit{border-top:0}
.srhit:hover{background:color-mix(in srgb,var(--warn) 7%,transparent);box-shadow:inset 2px 0 0 var(--warn)}
.srhit.on{background:color-mix(in srgb,var(--warn) 12%,transparent);box-shadow:inset 3px 0 0 var(--warn)}
.srwhere{display:flex;gap:8px;align-items:baseline;font:400 10.5px/1.5 var(--mono);color:var(--fg-dim);
  margin-bottom:4px}
.srwhere i{font-style:normal;color:var(--fg-mid)}
.srwhere em{margin-left:auto;font-style:normal;opacity:.7}
.srtext{display:block;font:400 12.5px/1.55 var(--sans);word-break:break-word}
.srtext mark,.srintro code{background:color-mix(in srgb,var(--warn) 26%,transparent);color:var(--fg);
  border-radius:2px;padding:0 2px}
.srintro code{font:400 11.5px/1 var(--mono)}
.srintro{max-width:62ch;margin:0 auto;line-height:1.7}
.srtry{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:14px}

/* The passage a search hit points at, in the viewer: the whole passage
   lightly, the line that carries the words harder, the words themselves lit.
   Three strengths for three answers to "where": the unit that was ranked,
   the line to read, the word that matched. */
.ln-row.psg,tr.psg td{background:color-mix(in srgb,var(--warn) 11%,transparent)}
.ln-row.psg,tr.psg td:first-child{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--warn) 55%,transparent)}
.ln-row.psg-first{border-top:1px solid color-mix(in srgb,var(--warn) 60%,transparent)}
.ln-row.psg-last{border-bottom:1px solid color-mix(in srgb,var(--warn) 60%,transparent)}
.ln-row.psg-hit,tr.psg-hit td{background:color-mix(in srgb,var(--warn) 26%,transparent)}
.ln-row.psg-hit,tr.psg-hit td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.ln-row.psg-hit .ln,tr.psg-hit td.ln{color:var(--fg);font-weight:600}
.lit mark{background:color-mix(in srgb,var(--warn) 55%,transparent);color:var(--fg);
  border-radius:2px;padding:0 1px;box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 70%,transparent)}

/* ---------- Search beside the document ----------
   A hit opens the viewer in the right-hand half rather than over the list:
   the results stay in view on the left, the next hit is one click away, and
   the passage and the list that found it can be read against each other.
   body.srsplit is set by search.js when a hit opens and cleared when the
   viewer or the search page closes. Narrow screens keep the popup. */
:root{--srw:42%}
body.srsplit #searchwrap .calbox{right:auto;width:var(--srw);border-right:1px solid var(--line)}
body.srsplit .searchbox{width:auto;height:auto}
body.srsplit #viewer{left:calc(var(--rail) + var(--srw));background:transparent;backdrop-filter:none}
body.srsplit #viewer .box.wide{left:0!important;right:0!important;inset:0 0 0 0;
  border-left:1px solid var(--line)}
body.srsplit .srdoc header{padding:7px 10px}
body.srsplit .srhit{padding:7px 10px 8px}
@media (max-width:899px){body.srsplit #searchwrap .calbox{right:0;width:auto}
  body.srsplit #viewer{left:0}}

/* ======================= review: the panel and the marks =======================
   The mirror of the search split: the viewer on the LEFT, the panel on the
   right (body.rvsplit, --rvw wide). Marks are drawn by review.js over the
   viewer's rows: a confirmed mention solid in its type's colour (--mn), a
   proposed one dashed, the node in hand (.cur) with a ring. */
:root{--rvw:40%}
body.rvsplit #reviewwrap .calbox{left:auto;right:0;width:var(--rvw);border-left:1px solid var(--line)}
body.rvsplit #viewer{right:var(--rvw);left:var(--rail);background:transparent;backdrop-filter:none}
body.rvsplit #viewer .box.wide{left:0!important;right:0!important;inset:0 0 0 0;border-right:1px solid var(--line)}
@media (max-width:899px){body.rvsplit #reviewwrap .calbox{left:0;width:auto}body.rvsplit #viewer{right:0;left:0}}
.rvbody{padding:10px 14px}
.rvmsg{min-height:16px;font-size:12.5px;color:var(--ok);margin:0 0 6px}
.rvmsg.bad{color:var(--danger)}
.rvgroup h4,.rvsec h4{font:600 11.5px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);margin:14px 0 6px}
.rvsec h5{font:600 12.5px/1.4 var(--sans);color:var(--fg-mid);margin:10px 0 4px}
.rvrow,.rvnode,.rvprop,.rvclaim,.rvproposer{display:flex;align-items:center;gap:9px;padding:7px 8px;border:1px solid var(--line-soft);border-radius:3px;margin-bottom:5px;background:var(--surface)}
.rvrow{cursor:pointer}.rvrow:hover,.rvnode:hover{border-color:var(--line)}
.rvrow.mine{border-color:color-mix(in srgb,var(--ember-500) 45%,transparent)}
.rvrow.notready{opacity:.6}
.rvrow .nm,.rvnode .nm,.rvprop .nm,.rvclaim .nm{flex:1;min-width:0}
.rvrow .nm b,.rvnode .nm b,.rvprop .nm b{display:block;font-weight:600;color:var(--fg);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvrow .nm .tiny,.rvnode .nm .tiny,.rvprop .nm .tiny,.rvclaim .nm .tiny{display:block;color:var(--fg-dim);font-size:11.5px;white-space:normal}
.rvrow .ct{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.pill.prop{color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.pill.ok{color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent)}
.pill.off{color:var(--no);border:1px solid color-mix(in srgb,var(--no) 40%,transparent)}
.rvhead{display:flex;align-items:center;gap:10px;margin:2px 0 4px}
.rvhead .sp{flex:1}
.rvhead select,.rvsel select,.rvform select,.rvform input{font:inherit;font-size:12.5px;padding:4px 6px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--fg)}
.rvsel{padding:9px 10px;border:1px dashed var(--line);border-radius:3px;min-height:40px}
.rvseltxt{font-size:14px;color:var(--fg);margin-bottom:6px}
.rvselacts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.rvsuggest{margin-top:6px;display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.rvnode .sw,.rvprop .sw{width:10px;height:10px;border-radius:2px;flex:none}
.rvnode.cur{box-shadow:inset 3px 0 0 var(--ember-500)}
.rvnode .acts,.rvprop .acts,.rvclaim .acts{display:flex;gap:4px;flex:none}
.mini.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.mini.no{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.rvclaim .nm em{font-style:normal;color:var(--fg-dim);padding:0 3px}
.rvclaim.proposed{border-style:dashed}
.rvform{margin-top:8px;padding:9px 10px;border:1px solid var(--line);border-radius:3px;background:var(--raise)}
.rvform label{display:block;margin:4px 0}
.rvempty{padding:4px 2px}
.rvproposer{font-size:13px}
mark.mn{background:color-mix(in srgb,var(--mn,#888) 22%,transparent);color:inherit;border-bottom:2px solid var(--mn,#888);border-radius:2px;padding:0 1px;cursor:pointer}
mark.mn.mn-proposed{background:transparent;border-bottom:2px dashed var(--mn,#888)}
mark.mn.cur{outline:2px solid var(--mn,#888);outline-offset:1px}
/* Hovering a node in the panel: every place it is written lights up. */
mark.mn.hl{background:color-mix(in srgb,var(--mn,#888) 45%,transparent);outline:2px solid var(--mn,#888);outline-offset:1px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--mn,#888) 25%,transparent);transition:box-shadow .15s}
.rvplaces{cursor:pointer;text-decoration:underline dotted;color:var(--fg-mid)}
.rvplaces:hover{color:var(--fg)}
/* The statement tool: the document is in picking mode, confirmed marks are
   targets, the picked subject and object wear their letter. */
body.rvpick #vwBody mark.mn.mn-confirmed{cursor:crosshair;box-shadow:0 0 0 2px color-mix(in srgb,var(--mn,#888) 35%,transparent)}
body.rvpick #vwBody mark.mn.mn-proposed{opacity:.55;cursor:not-allowed}
body.rvpick .rvnode{cursor:crosshair}
mark.mn.pick-s,mark.mn.pick-o{outline:2px solid var(--ember-500);outline-offset:1px;box-shadow:none!important}
mark.mn.pick-s::before,mark.mn.pick-o::before{content:"S";position:relative;top:-7px;font:700 9px/1 var(--mono);color:#fff;background:var(--ember-500);
  border-radius:2px;padding:1px 3px;margin-right:3px}
mark.mn.pick-o::before{content:"O"}
.rvbuild{display:flex;flex-direction:column;gap:6px}
.rvstep{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 7px;border:1px solid var(--line-soft);border-radius:3px;opacity:.75}
.rvstep.now{opacity:1;border-color:var(--ember-500);background:color-mix(in srgb,var(--ember-500) 6%,transparent)}
.rvstep .n{width:18px;height:18px;border-radius:50%;background:var(--line);color:var(--fg);font:700 11px/18px var(--mono);text-align:center;flex:none}
.rvstep.now .n{background:var(--ember-500);color:#fff}
.rvstep label.tiny{display:inline}
.rvpicked{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--fg)}
.rvpicked .sw{width:10px;height:10px;border-radius:2px;flex:none}
.rvsec h4 .mini{margin-left:8px;text-transform:none;letter-spacing:0;font-weight:500}
/* The proposal list: the run, the vocabulary, the filters, the groups */
.rvrun{padding:8px 10px;border:1px solid var(--line);border-radius:3px;background:var(--raise);margin:2px 0 10px}
.rvcounts{font-size:14px;color:var(--fg)}
.rvcounts b{font-size:18px}
.rvrunrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.rvtoggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--fg);cursor:pointer}
.rvtoggle.off{opacity:.55}
.rvstatus{margin-top:6px}
.rvstatus.bad{color:var(--danger)}
.rvtrust{margin-top:3px}
.rvfilters{display:flex;align-items:center;gap:8px;margin:12px 0 8px;flex-wrap:wrap}
.rvfilters select,.rvfilters input{font:inherit;font-size:12.5px;padding:4px 6px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--fg)}
.rvtabs{display:flex;gap:0;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.rvtabs .tab{font:inherit;font-size:12.5px;padding:4px 10px;border:0;background:var(--bg);color:var(--fg-mid);cursor:pointer}
.rvtabs .tab.on{background:var(--line);color:var(--fg);font-weight:600}
.rvgroup2{border:1px solid var(--line-soft);border-radius:3px;margin-bottom:6px;background:var(--surface)}
.rvgroup2.open{border-color:var(--line)}
.rvghead{display:flex;align-items:center;gap:9px;padding:7px 8px;cursor:pointer}
.rvghead:hover{background:var(--raise)}
.rvghead .nm{flex:1;min-width:0}
.rvghead .nm b{display:block;font-weight:600;color:var(--fg);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvghead .nm .tiny{display:block;color:var(--fg-dim);font-size:11.5px;white-space:normal}
.rvghead .sw{width:10px;height:10px;border-radius:2px;flex:none}
.rvghead .acts,.rvitem .acts{display:flex;gap:4px;flex:none}
.rvitems{border-top:1px solid var(--line-soft);padding:4px 6px 4px 14px;background:var(--bg)}
.rvitem{display:flex;align-items:center;gap:8px;padding:5px 6px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.rvitem:last-child{border-bottom:0}
.rvitem:hover{background:var(--raise)}
.rvitem .nm{flex:1;min-width:0}
.rvitem .nm b{font-weight:600;color:var(--fg);font-size:13px}
.rvitem .nm em{font-style:normal;color:var(--fg-dim);padding:0 3px}
.rvitem .nm .tiny{display:block;color:var(--fg-dim);font-size:11.5px;white-space:normal}
.rvitem .sw{width:10px;height:10px;border-radius:2px;flex:none}
.rvitem.confirmed{opacity:.75}
.rvitem.rejected{opacity:.5;text-decoration:line-through}
.rvitem.rejected .tiny{text-decoration:none}
.rvsec.vocab{padding:6px 10px 8px;border:1px solid color-mix(in srgb,var(--ember-500) 40%,transparent);border-radius:3px;background:color-mix(in srgb,var(--ember-500) 5%,transparent);margin-bottom:10px}
.rvsec.vocab .rvitem{cursor:default;background:transparent}
.rvnodes{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.rvchip{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border:1px solid var(--line);border-radius:12px;font-size:12px;color:var(--fg);cursor:pointer;background:var(--surface)}
.rvchip .sw{width:9px;height:9px;border-radius:2px}
.rvchip a{color:var(--fg-dim);text-decoration:underline dotted;font-size:11px}
.rvchip a:hover{color:var(--fg)}
#rvDocSec{padding:8px 10px;border:1px solid var(--line);border-radius:3px;background:var(--raise);margin:0 0 10px}
#rvDocSec h4{margin-top:0}