/* Overfit design system, always-dark like the orchestration dashboard.
   Sharp corners everywhere (badges are the only 4px exception), no shadows,
   no gradients, no glow. Inter, 14px labels / 16px body / 24-30px titles. */
:root{
  --primary:#056DFF; --secondary:#00D2E5; --surface:#0A1A29; --bg:#050d14;
  --line:#1c3145; --fg:#ffffff; --dim:#8ba0b5;
  --success:#84cc16; --warning:#EAB308; --error:#D41976;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--fg);
     font:16px/1.55 Inter,system-ui,-apple-system,sans-serif}
a{color:var(--secondary);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:30px;margin:0 0 4px;font-weight:600;letter-spacing:-.01em}
h2{font-size:24px;margin:32px 0 12px;font-weight:600}
h3{font-size:18px;margin:24px 0 8px;font-weight:600}
.dim{color:var(--dim);font-size:14px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}

/* This is a web app, not a text page: it uses the whole window, and every screen
   starts at the same left edge (--pad), so the logomark, the headline and the first
   card sit on one vertical line instead of three. */
:root{--pad:28px}
.topbar{background:var(--surface);border-bottom:1px solid var(--line)}
.topbar .inner{padding:12px var(--pad);display:flex;align-items:center;gap:14px}
.logo{width:32px;height:32px;flex:none;display:flex;align-items:center;line-height:0}
.logo img{display:block}
.brand{font-weight:600;font-size:16px;line-height:32px}
.topbar nav{display:flex;gap:20px;margin-left:28px;font-size:14px;line-height:32px}
.topbar .acct{margin-left:auto;font-size:14px;color:var(--dim);
  display:flex;gap:12px;align-items:center}

main{max-width:none;margin:0;padding:26px var(--pad) 64px}
@media(max-width:640px){:root{--pad:18px}}

.card{background:var(--surface);border:1px solid var(--line);padding:18px 20px;
      display:flex;flex-direction:column;gap:8px;transition:border-color .2s}
.card:hover{border-color:var(--primary)}
.card .head{display:flex;gap:10px;align-items:baseline}
.card .head strong{font-size:16px}
.card .act{margin-top:auto;padding-top:4px;display:flex;gap:8px}

/* ---- the dashboard as FLOWS (owner, 2026-07-31): shown, not explained ------ */
/* Two headline numbers on top; below, every Kampagne is one chain x → y → z.
   Done shrinks to a green chip with its score (small AND successful — that is
   the motivating part), exactly one node is big, the future is ghosted. */
.overall{display:flex;gap:40px;flex-wrap:wrap;padding:6px 0 18px;
  border-bottom:1px solid var(--line);margin-bottom:8px}
.ovl{min-width:300px;flex:1;max-width:460px}
.ovl-num{font-size:26px;font-weight:600;letter-spacing:-.01em}
.ovl-of{color:var(--dim);font-weight:400;font-size:20px}
.ovl-lbl{color:var(--dim);font-size:14px;font-weight:400;margin-left:6px}

.ablauf{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid #12283d;flex-wrap:wrap}
.ab-title{min-width:150px;max-width:150px;color:var(--dim);font-size:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-chain{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1}
.ab-arrow{color:#24384a;font-size:18px}
.ab-arrow.on{color:var(--secondary)}

.abn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  padding:6px 10px;font-size:13px;color:var(--fg);text-decoration:none}
a.abn:hover{text-decoration:none;border-color:var(--primary)}
/* done: way smaller, grey — but the score stays green: finished AND successful */
.abn.done{opacity:.6;font-size:11px;padding:2px 7px;border-color:#1f3a1a}
.abn.done .ok{color:var(--success);font-weight:600}
.abn.done:hover{opacity:1}
.abn.frozen{opacity:.6;font-size:11px;padding:2px 7px;border-color:var(--error)}
.abn.frozen .ro{color:#ff9ec8}
/* current: the ONE big node of the chain */
.abn.cur{flex-direction:column;align-items:stretch;gap:5px;padding:9px 14px;
  border-color:var(--primary);min-width:210px}
.abn.cur .cur-top{font-size:14px;font-weight:600;display:flex;gap:8px;
  align-items:center}
.abn.cur .bar{display:block;height:5px;background:#132433;margin:0}
.abn.cur .bar>span{display:block;height:100%;background:var(--success)}
.abn.cur .cur-nums{font-size:12px;color:var(--dim)}
/* spawn: the flow's next step, one click away */
button.abn.spawn{border-color:var(--secondary);color:var(--secondary);
  cursor:pointer;background:transparent;font:inherit;font-size:13px}
button.abn.spawn:hover{background:#00323a}
button.abn.spawn .nn{background:var(--secondary);color:#04252a;border-radius:8px;
  padding:0 7px;font-weight:600;font-size:12px}
/* ghost: the flow will get here, nothing to do yet */
.abn.ghost{opacity:.3;border-style:dashed}
.abn.wait{opacity:.55}
button.abn.extra{border-color:var(--secondary);color:var(--secondary);
  background:transparent;cursor:pointer;font-size:11px;padding:2px 7px;
  margin-left:-4px}
.abn-reset{font-size:12px;padding:4px 8px}
/* Kontrolle docks RIGHT: it measures the chain, it is not a stage of it. */
.ab-kontrolle{margin-left:auto;display:flex;gap:6px;align-items:center;
  padding-left:16px;border-left:1px solid #12283d}
.abn.ko{border-color:var(--warning);color:var(--warning);font-size:12px;
  padding:4px 9px;background:transparent;cursor:pointer}
button.abn.ko:hover{background:#2a2405}
.abn.ko .nn{background:var(--warning);color:#241c02;border-radius:8px;
  padding:0 6px;font-weight:600;font-size:11px}
/* a finished Kontrolle shrinks like every finished stage; the ✓ stays green */
.abn.ko.kodone{opacity:.55;font-size:11px;padding:2px 7px;
  border-color:#1f3a1a;color:var(--dim)}
.abn.ko.kodone .ok{color:var(--success);font-weight:600}
.abn.ko.kodone:hover{opacity:1}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

/* One line of controls above a list, with air around it instead of stacked prose. */
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 0 18px;border-bottom:1px solid var(--line);margin-bottom:20px}
.toolbar .grow{flex:1}

.bar{height:6px;background:#132433;margin:10px 0 6px}
.bar>div{height:100%;background:var(--success);transition:width .3s}

.badge{border-radius:4px;padding:2px 8px;font-size:12px;border:1px solid var(--line);
       display:inline-block}
.badge.on{background:var(--primary);border-color:var(--primary)}
.badge.ro{background:#2a1220;border-color:var(--error);color:#ff9ec8}
.badge.ok{border-color:var(--success);color:var(--success)}
.badge.warn{border-color:var(--warning);color:var(--warning)}

button,.btn{background:transparent;color:var(--fg);border:1px solid var(--line);
  padding:8px 14px;font:inherit;font-size:14px;cursor:pointer;transition:border-color .2s}
button:hover,.btn:hover{border-color:var(--primary)}
button.pri{background:var(--primary);border-color:var(--primary)}
button:disabled{opacity:.45;cursor:default}
input,select{background:#08131e;border:1px solid var(--line);color:var(--fg);
  padding:9px 11px;font:inherit;font-size:14px;width:100%}

table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line)}
th{color:var(--dim);font-weight:500;font-size:13px}

/* ---- work screen ---------------------------------------------------------- */
.work{max-width:none;padding:0}
.workbar{position:sticky;top:0;z-index:20;background:var(--surface);
  border-bottom:1px solid var(--line);padding:8px 16px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px}
.save{padding:3px 10px;border:1px solid var(--line);border-radius:4px;font-size:13px}
.save.ok{color:var(--success);border-color:var(--success)}
.save.busy{color:var(--warning);border-color:var(--warning)}
.save.bad{color:#fff;background:var(--error);border-color:var(--error);font-weight:600}

/* The work area reserves real space for the docked panel and the footer instead of
   letting them float on top. --foot-h and --bar-h are measured at runtime, because
   the footer wraps to two or three rows once the vocabulary has many quick keys —
   which is exactly how the preview ended up covering the category buttons. */
/* 520px panel: the Umgebung is a selection surface since the grab/pan verb, and at
   420px a distant sign in it was too small to aim at. Narrow screens keep 340px. */
:root{--panel-w:520px;--foot-h:64px;--bar-h:48px}

#cards{display:flex;flex-wrap:wrap;gap:6px;
       padding:12px 16px calc(var(--foot-h) + 16px);
       margin-right:var(--panel-w)}
.c{position:relative;width:var(--cell,150px);height:var(--cell,150px);
   border:3px solid #24384a;background:#0b1620;cursor:pointer;overflow:hidden}
.c img{width:100%;height:100%;object-fit:cover;display:block}
.c:hover{outline:2px solid var(--primary);outline-offset:2px}
.c.yes{border-color:var(--success)}
.c.no{border-color:var(--error)}
.c.skip{border-color:var(--warning);opacity:.55}
/* An OWN label is just as accepted as a confirmed suggestion — green, not a third
   colour the annotator has to decode. The tag below stays cyan to say "einzeln". */
.c.own{border-color:var(--success)}
/* The CURRENT card — where Q will land. It must survive a glance from arm's length,
   which a 2px outline did not. */
.c.sel{outline:3px solid var(--primary);outline-offset:2px;border-color:var(--primary)}
.c .tag{position:absolute;left:0;right:0;bottom:0;background:#000c;font-size:11px;
        padding:1px 4px;text-align:center;white-space:nowrap;overflow:hidden;
        text-overflow:ellipsis}
.c.own .tag{background:#00323a;color:var(--secondary)}
.c.skip .tag{background:#3a2d00;color:var(--warning)}
.c .bandmark{position:absolute;top:0;left:0;width:6px;height:6px}
.band-a{background:var(--success)}.band-b{background:var(--secondary)}
.band-c{background:var(--warning)}.band-d{background:#4b5563}

.foot{position:fixed;left:0;bottom:0;right:var(--panel-w);background:var(--surface);
  border-top:1px solid var(--line);padding:10px 16px;display:flex;gap:8px;
  align-items:center;flex-wrap:wrap;z-index:19}
/* "anders auswaehlen" sits directly after the digit keys, so the escape hatch from
   the frequent labels is where the eye already is. */
.foot button.pick{border-color:var(--secondary);color:var(--secondary)}
.foot button.pick:hover{background:#00323a}
.foot .sep{width:1px;align-self:stretch;background:var(--line);margin:0 4px}

/* Docked, not floating: spans from under the top bar to above the footer, so it
   cannot cover a control no matter how the footer wraps. */
#panel{position:fixed;right:0;top:var(--bar-h);bottom:0;width:var(--panel-w);
  background:var(--surface);border-left:1px solid var(--line);z-index:18;
  display:flex;flex-direction:column;gap:8px;padding:10px;overflow:auto;
  /* the panel owns its whole column: it must not be squeezed by the footer, which
     is why .foot stops at --panel-w rather than spanning the window */
  height:auto}
#panel img.z{width:100%;max-height:230px;object-fit:contain;background:#08131e;
  border:1px solid var(--line)}
#panel img.x{width:100%;border:1px solid var(--line);object-fit:contain}
#panel .cap{font-size:12px;color:var(--dim);word-break:break-all}
#panel h4{margin:6px 0 2px;font-size:13px;font-weight:600;color:var(--dim);
  text-transform:uppercase;letter-spacing:.04em}

/* The live tally: what THIS screen will write when you press Enter. */
.tally{border-top:1px solid var(--line);padding-top:8px;font-size:14px}
.tally .line{display:flex;align-items:center;gap:8px;padding:3px 0}
.tally .n{min-width:2.2em;text-align:right;font-weight:600;
          font-family:ui-monospace,monospace}
.tally .sw{width:10px;height:10px;flex:none}
.tally .what{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
             white-space:nowrap}
.tally .grp{color:var(--dim);font-size:12px}
.tally .total{margin-top:6px;padding-top:6px;border-top:1px solid var(--line);
              font-weight:600}
.tally .none{color:var(--dim)}

@media(max-width:1100px){
  :root{--panel-w:0px}
  #panel{display:none}
}

#picker{position:fixed;inset:0;background:#000d;display:none;align-items:center;
  justify-content:center;z-index:40}
#pbox{background:var(--surface);border:1px solid var(--line);padding:16px;
  width:min(620px,94vw);max-height:82vh;display:flex;flex-direction:column;gap:8px}
#plist{overflow:auto;display:flex;flex-direction:column;gap:2px}
#plist div{padding:7px 10px;cursor:pointer}
#plist div.sel{background:var(--primary)}
kbd{border:1px solid var(--line);padding:1px 6px;border-radius:4px;font-size:12px;
    font-family:ui-monospace,monospace}

/* ---- shared work grammar (work.js) ---------------------------------------- */
.rubber{position:absolute;z-index:30;border:1px solid var(--secondary);
  background:#00d2e522;pointer-events:none}
.c.picked{outline:3px solid var(--secondary);outline-offset:2px}
.c.pre{border-color:#3a5a7a}
.c.pre .tag{background:#12283d;color:var(--dim)}
#flash{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--foot-h) + 14px);
  z-index:40;background:var(--surface);border:1px solid var(--secondary);color:var(--fg);
  padding:7px 14px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none}
#flash.on{opacity:1}
#psuggest .sg{display:flex;align-items:center;gap:8px;font-size:16px;padding:4px 0}
#psuggest .sw{width:12px;height:12px;flex:none}
#psuggest .grp{color:var(--dim);font-size:12px}
#boxwrap{position:relative;display:inline-block;width:100%}
#boxwrap img{width:100%;display:block;background:#08131e;border:1px solid var(--line)}
#boxrect{position:absolute;border:2px solid var(--error);pointer-events:auto;
  cursor:move}
.bh{position:absolute;width:11px;height:11px;background:var(--fg);
  border:1px solid var(--error);transform:translate(-50%,-50%);cursor:pointer;z-index:3}
.bh.n,.bh.s{cursor:ns-resize}.bh.e,.bh.w{cursor:ew-resize}
.bh.nw,.bh.se{cursor:nwse-resize}.bh.ne,.bh.sw{cursor:nesw-resize}
#wrap{position:fixed;left:0;right:var(--panel-w);top:var(--bar-h);
  bottom:var(--foot-h);overflow:hidden;background:#000}
#wrap canvas{position:absolute;left:0;top:0}

#legend{position:absolute;left:12px;bottom:12px;z-index:5;background:#050d14e8;
  border:1px solid var(--line);padding:10px 14px;font-size:15px;line-height:1.7;
  pointer-events:none;min-width:250px}
#legend .row{display:flex;gap:8px;align-items:center}
#legend .sw{width:14px;height:14px;display:inline-block}
#legend .k{color:var(--dim);font-size:13px;min-width:78px;display:inline-block}
#objs{max-height:84px;overflow:auto;font-size:13px;color:var(--dim);flex:1 1 240px}
#objs div{cursor:pointer;padding:1px 0}
#objs div:hover{color:#fff} #objs div.sel{color:#fff;font-weight:600}
button .chip{display:inline-block;width:10px;height:10px;margin-right:6px;
  vertical-align:-1px}
button.on{background:var(--primary);border-color:var(--primary);font-weight:600}

.c.locked{outline:3px solid var(--warning);outline-offset:2px}
.c.locked::after{content:"🔒";position:absolute;top:2px;right:3px;font-size:12px}
#lockbtn{font-size:12px;padding:4px 9px}

#ctxwrap{position:relative;display:block;cursor:crosshair;overflow:hidden}
#ctxwrap.grab{cursor:grab}
#ctxwrap.grab:active{cursor:grabbing}
#ctxrect{position:absolute;border:2px solid var(--error);display:none;pointer-events:none}

/* The save badge is informational and sits next to real controls; letting it eat
   pointer events made the lock button unclickable whenever it read "Gespeichert". */
.save{pointer-events:none}
#lockbtn{position:relative;z-index:2}

/* mark panel: the list grows, the constants sink.
   max-height:none is load-bearing: the generic #objs rule caps the list at 84px for
   the standalone HTML tool, where it sits in a footer. Here it owns the column, and
   without this the list stayed a 3-line window with a scrollbar while two thirds of
   the panel was empty. */
#panel #objs.grow{flex:1 1 auto;min-height:160px;max-height:none;overflow:auto;
  font-size:14px}
#panel #objs.grow div{padding:3px 0;border-bottom:1px solid #12283d}
#panel .panelfoot{margin-top:auto;border-top:1px solid var(--line);padding-top:8px;
  display:flex;flex-direction:column;gap:6px}
#flagstate{display:flex;gap:6px}
#flagstate button{flex:1;font-size:13px;padding:6px 8px}

/* Footer in ROWS: labels above, navigation below — the same two rows on every screen,
   so the eye learns one place per kind of control.
   The `.rows` class matters: this used to be an unqualified `.foot` rule, which turned
   triage's and classify's flat button lists into one full-width button per line. */
.foot.rows{flex-direction:column;align-items:stretch;gap:6px}
.footrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-height:34px}
/* Two ROWS means two rows on a real screen too. A German class name can be 30
   characters, and twelve of them plus the explanatory line wrapped the footer to four
   rows at 1280 px. The name is cut, never the key: the key is what the hand needs and
   the full name is in the button's title. */
.footrow button{max-width:13em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1500px){.footrow>.dim{display:none}}
.footrow .lbl{color:var(--dim);font-size:12px;text-transform:uppercase;
  letter-spacing:.04em;min-width:74px}
.foot kbd{white-space:nowrap}

/* ---- frame screens (vervollständigen / mark_box / adjudicate) ------------- */
#wrap #fimg{position:absolute;user-select:none;-webkit-user-drag:none}
#fboxes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fb{position:absolute;border:2px solid var(--secondary);box-sizing:border-box}
.fb .fbt{position:absolute;left:-2px;top:-18px;background:#000c;font-size:11px;
  padding:0 4px;white-space:nowrap;color:#fff}
.fb.known{border-color:var(--success);pointer-events:auto;cursor:pointer}
.fb.known .fbt{color:var(--success)}
.fb.known.krem{border-color:var(--error);border-style:dashed;opacity:.55}
.fb.known.krem .fbt{color:var(--error)}
.fb.sel{outline:2px solid #fff;outline-offset:1px}
/* the sign list in the panel: click selects, X acts on the selection */
#signlist .sle{display:flex;gap:8px;align-items:center;padding:4px 6px;
  cursor:pointer;font-size:13px;border:1px solid transparent}
#signlist .sle:hover{border-color:var(--line)}
#signlist .sle.sel{border-color:var(--primary)}
#signlist .sle.rem{opacity:.55;text-decoration:line-through}
#signlist .sw{width:10px;height:10px;flex:none}
#signlist .none{color:var(--dim);font-size:13px;padding:4px 6px}
.fb.kno{border-color:#2a3a4a;border-width:1px;pointer-events:none}
.fb.own{border-color:var(--secondary);pointer-events:auto;cursor:pointer}
.fb.own .fbt{color:var(--secondary)}
.fb.own.sel{outline:2px solid #fff;outline-offset:1px}
.fb.draw{pointer-events:none;background:#00d2e51a}
.fb.det{border-color:var(--primary);pointer-events:auto;cursor:pointer}
.fb.hum{border-color:#f59e0b;pointer-events:auto;cursor:pointer}
.fb.hum .fbt{color:#f59e0b}
.fb.acc{border-color:var(--success);border-width:3px}
.fb.rej{border-color:var(--error);border-style:dashed;opacity:.5}
#wrap.grab{cursor:grab}
#wrap.grab:active{cursor:grabbing}
/* Batch end: a real moment, not a clamp. Overlay (mark) and in-place (others). */
#batchdone{position:fixed;inset:0;background:#000c;z-index:45;display:flex;
  align-items:center;justify-content:center}
.bd-box,.batchdone{background:var(--surface);border:1px solid var(--line);
  padding:34px 44px;display:flex;flex-direction:column;gap:12px;align-items:center;
  text-align:center}
.batchdone{margin:60px auto;max-width:460px}
.bd-big{font-size:52px;color:var(--success);line-height:1}
.bd-t{font-size:22px;font-weight:600}
.bd-n{color:var(--dim)}

/* review / mark_pixel: one transformed stage, image + SVG marks move as one */
#stage{position:absolute;transform-origin:0 0}
#stage img{display:block;user-select:none;-webkit-user-drag:none}
#stage svg{position:absolute;left:0;top:0;pointer-events:none}

/* The brush tip, shown before the stroke rather than discovered after it. */
#brushring{position:fixed;border:1px solid #fff;border-radius:50%;pointer-events:none;
  z-index:25;transform:translate(-50%,-50%);display:none;box-shadow:0 0 0 1px #0009}

/* Below a wide monitor the label buttons keep their KEY and their colour and drop the
   name (it stays in the button's title, and the panel names the current class anyway).
   Twelve German class names plus the navigation simply do not fit beside a 420 px
   panel at 1280 px — and the key is the part the hand needs. */
.footrow button .chip{display:none}
.footrow button .sm{display:none}
@media(max-width:1500px){
  /* A narrower panel below a wide monitor: 80 px of column bought back is what makes
     the two footer rows stay two rows on a 1280 laptop, and a 340 px preview is still
     bigger than any crop in the set. */
  :root{--panel-w:340px}
  .footrow{gap:5px}
  .footrow button .nm{display:none}
  .footrow button .sm{display:inline}
  .footrow button .chip{display:inline-block}
  .footrow button{padding:6px 8px}
  /* The row captions and the dividers are orientation for a wide screen and pure
     width on a narrow one — the two rows stay distinguishable without them. */
  .footrow>.lbl,.footrow>.sep{display:none}
}