/* ── BEAM: a slim, monochrome layer on top of Bootstrap 5 ───────────────────
   Very plain: black + greys only, no accent hues. State is shown by contrast
   (darker = more done / more important), not colour. Bootstrap's semantic
   utilities (success / warning / secondary / danger / primary) are remapped to
   greyscale here so the components keep working without per-template edits. */

:root{
  --ink:#1b1b1b; --g1:#3d3d3d; --g2:#6c6c6c; --g3:#9a9a9a;
  --g4:#cfcfcf; --g5:#e6e6e6; --g6:#f3f3f3;
  --bs-body-font-family:"Hanken Grotesk", system-ui, sans-serif;
  --bs-body-color:var(--ink);
  --bs-link-color-rgb:27,27,27;
  --bs-link-hover-color-rgb:0,0,0;
}
.mono, .field input, .field select, table.result, .box{
  font-family:"Spline Sans Mono", ui-monospace, monospace;
}
[x-cloak]{display:none!important}
body{font-size:15px}
a{color:var(--ink)} a:hover{color:#000}

/* Icons inherit text colour (monochrome) and sit on the baseline cleanly. */
.fa-solid, .fa-regular{line-height:1; vertical-align:-.05em}

/* ── Primary / action = black ──────────────────────────────────────────────*/
.btn-primary{
  --bs-btn-bg:var(--ink); --bs-btn-border-color:var(--ink);
  --bs-btn-hover-bg:#000; --bs-btn-hover-border-color:#000;
  --bs-btn-active-bg:#000; --bs-btn-active-border-color:#000;
  --bs-btn-disabled-bg:var(--g3); --bs-btn-disabled-border-color:var(--g3);
}
.btn-outline-primary,.btn-outline-warning{
  --bs-btn-color:var(--ink); --bs-btn-border-color:var(--g4);
  --bs-btn-hover-bg:var(--ink); --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:var(--ink);
  --bs-btn-active-bg:#000; --bs-btn-active-border-color:#000;
}
.btn-outline-secondary{
  --bs-btn-color:var(--g1); --bs-btn-border-color:var(--g4);
  --bs-btn-hover-bg:var(--g6); --bs-btn-hover-color:var(--ink); --bs-btn-hover-border-color:var(--g3);
}
.text-brand,.text-success,.text-primary{color:var(--ink)!important}
.text-danger{color:var(--g2)!important}
.brand-logo{width:30px; height:30px; border-radius:7px; background:var(--ink);
  color:#fff; display:grid; place-items:center; font-weight:700; flex:none}

/* ── Badges → greyscale (darker = more complete) ──────────────────────────*/
.text-bg-success{background-color:var(--ink)!important; color:#fff!important}
.text-bg-warning{background-color:var(--g5)!important; color:var(--ink)!important}
.text-bg-secondary{background-color:var(--g6)!important; color:var(--g2)!important; border:1px solid var(--g5)}
.text-bg-danger{background-color:var(--ink)!important; color:#fff!important}
.text-bg-light{background-color:var(--g6)!important; color:var(--g2)!important}
.bg-success{background-color:var(--ink)!important}
.bg-warning{background-color:var(--g3)!important}
.bg-secondary{background-color:var(--g4)!important}
.progress{background-color:var(--g5)}
.progress-bar{background-color:var(--ink)!important}

/* ── Alerts → flat grey panels ────────────────────────────────────────────*/
.alert-primary,.alert-success,.alert-warning,.alert-secondary,.alert-info{
  --bs-alert-color:var(--ink); --bs-alert-bg:var(--g6); --bs-alert-border-color:var(--g5);
}
.alert-danger{--bs-alert-color:var(--ink); --bs-alert-bg:var(--g6); --bs-alert-border-color:var(--g4)}
.alert-link{color:#000}

/* ── Stepper (contrast = where you are) ───────────────────────────────────*/
.stepper{display:flex; flex-wrap:wrap; gap:.35rem .75rem; align-items:center;
  margin:0 0 1.25rem; font-size:.85rem}
.stepper .step{display:flex; align-items:center; gap:.45rem; color:var(--g3)}
.stepper .step .n{width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:.72rem; font-weight:600; border:1.5px solid var(--g4); background:#fff}
.stepper .step.on{color:var(--ink); font-weight:600}
.stepper .step.on .n{background:var(--ink); border-color:var(--ink); color:#fff}
.stepper .step.done{color:var(--g1)}
.stepper .step.done .n{background:var(--g1); border-color:var(--g1); color:#fff}
.stepper .sep{color:var(--g4)}

/* ── Upload dropzone ───────────────────────────────────────────────────────*/
.drop{border:2px dashed var(--g4); border-radius:1rem; background:#fff;
  padding:3rem 1.5rem; text-align:center; transition:.15s}
.drop.drag{border-color:var(--ink); background:var(--g6)}

/* ── Processing ────────────────────────────────────────────────────────────*/
.scan-sheet{width:74px; height:92px; border-radius:8px; border:1px solid var(--g4);
  margin:0 auto 1.5rem; background:linear-gradient(180deg,#fff,#f4f4f5); position:relative; overflow:hidden}
.scan-sheet:before{content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(110deg,transparent 30%,rgba(0,0,0,.12) 50%,transparent 70%);
  animation:scan 1.4s infinite}
@keyframes scan{to{transform:translateX(100%)}}
.proc-step{color:var(--g2)}
.proc-step.done,.proc-step.act{color:var(--ink)}
.proc-step .mark{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:none;
  border:1.6px solid var(--g4); background:#fff; font-size:.66rem}
/* Grey when not started, green while working (spinner) and when done. */
.proc-step.act .mark{border-color:#2e8b50; border-top-color:transparent; animation:spin .7s linear infinite}
.proc-step.done .mark{background:#2e8b50; border-color:#2e8b50; color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Document viewer + bounding-box overlay (monochrome) ──────────────────*/
.doc-scroll{max-height:74vh; overflow:auto; padding:1rem; background:var(--g6); border-radius:.5rem}
.page{position:relative; width:100%; max-width:360px; margin:0 auto; background:#fff;
  border:1px solid var(--g4); border-radius:6px; overflow:hidden}
.page:not(.has-img){aspect-ratio:3/4}
.page-img{display:block; width:100%; height:auto}
.box{position:absolute; border:1px solid transparent; border-radius:3px; cursor:pointer;
  font-size:10px; line-height:1; padding:1px 2px; white-space:nowrap; overflow:hidden; transition:.12s}
.page:not(.has-img) .box{background:rgba(255,255,255,.6); border-bottom:1.5px dotted var(--g3)}
.page:not(.has-img) .box:hover{background:var(--g6)}
.page:not(.has-img) .box.used{background:var(--g5); border-bottom-color:transparent}
.page:not(.has-img) .box.active{background:var(--g4); box-shadow:0 0 0 2px var(--ink); border-bottom-color:transparent}
.picking .page:not(.has-img) .box:not(.used){background:#fff; box-shadow:0 0 0 1px var(--g3)}
.page.has-img .box{border-color:rgba(0,0,0,.18)}
.page.has-img .box:hover{border-color:var(--ink); background:rgba(0,0,0,.06)}
.page.has-img .box.used{border-color:var(--ink); background:rgba(0,0,0,.10)}
.page.has-img .box.active{border-color:var(--ink); box-shadow:0 0 0 2px var(--ink); background:rgba(0,0,0,.10)}
.picking .page.has-img .box:not(.used){border-color:var(--g2); background:rgba(0,0,0,.04)}

/* ── Column cards (left edge contrast = what this column needs) ───────────*/
.field{border:1px solid var(--g5); border-left-width:4px; border-radius:.5rem;
  padding:.6rem .75rem; transition:.12s; background:#fff}
.field + .field{margin-top:.5rem}
.field:hover{border-color:var(--g4)}
.field.high{border-left-color:var(--ink)}     /* ready */
.field.check{border-left-color:var(--g3)}      /* please check */
.field.empty{border-left-color:var(--g5)}      /* needs mapping */
.field.active{border-color:var(--ink); border-left-color:var(--ink);
  box-shadow:0 0 0 .18rem rgba(0,0,0,.08)}
.field.dragover{box-shadow:0 -3px 0 var(--ink) inset; border-color:var(--ink)}
.field .drag{cursor:grab; color:var(--g3); user-select:none; line-height:1}
.field .drag:active{cursor:grabbing}

/* The editable column label — looks like a heading, edits like a field. */
.label-edit{font-weight:600; font-size:.92rem; border:1px solid transparent; border-radius:.3rem;
  padding:.1rem .3rem; background:transparent; width:100%; min-width:4ch; color:var(--ink)}
.label-edit:hover{border-color:var(--g4); background:#fff}
.label-edit:focus{outline:none; border-color:var(--ink); background:#fff;
  box-shadow:0 0 0 .18rem rgba(0,0,0,.08)}
.label-wrap{position:relative; flex:1; min-width:0}
.label-wrap .pen{position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  font-size:.7rem; color:var(--g3); pointer-events:none; opacity:0; transition:.12s}
.label-wrap:hover .pen{opacity:1}

/* ── Misc ─────────────────────────────────────────────────────────────────*/
.zoombar .btn{--bs-btn-padding-y:.1rem; --bs-btn-padding-x:.5rem; --bs-btn-font-size:.85rem}
table.result td{font-size:.85rem}
.legend .dot{width:8px; height:8px; border-radius:50%; display:inline-block}
.dest{text-decoration:none}
.dest:hover{background:var(--g6)}
.list-group-item.border-strong{border:1px solid var(--ink)}
.footbar{position:sticky; bottom:1rem; z-index:5}

/* ── Landing page ─────────────────────────────────────────────────────────*/
.hero-visual{background:var(--g6); border:1px solid var(--g5); border-radius:1rem; padding:1.5rem 1rem}
.mock-doc{width:140px; background:#fff; border:1px solid var(--g4); border-radius:8px; padding:14px 12px}
.mock-line{height:7px; border-radius:99px; background:var(--g4); margin:7px 0}
.mock-line.strong{background:var(--ink)}
.mock-cols{width:190px; display:flex; flex-direction:column; gap:6px}
.mock-row{display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--g5); border-left:4px solid var(--g4);
  border-radius:7px; padding:7px 10px; font-size:12px}
.mock-row span{color:var(--g2)}
.mock-row b{color:var(--ink); font-weight:600}
.mock-row.done{border-left-color:var(--ink)}
/* ── Merge / combine page ─────────────────────────────────────────────────*/
.merge-col{border:1px solid var(--g4); border-radius:.5rem; padding:.3rem .5rem; background:#fff}
.merge-col.dragover{border-color:var(--ink); box-shadow:0 -3px 0 var(--ink) inset}
.merge-col .drag{cursor:grab; color:var(--g3); line-height:1}
.merge-col .drag:active{cursor:grabbing}
.cell-blank{background:var(--g6)}
tr[draggable] .draghandle{cursor:grab; color:var(--g3)}
tr[draggable] .draghandle:active{cursor:grabbing}
.row-dragover td{box-shadow:inset 0 -2px 0 var(--ink)}

.feature-ic, .step-ic{display:inline-grid; place-items:center; color:var(--ink)}
.feature-ic{width:40px; height:40px; border-radius:9px; background:var(--g6);
  border:1px solid var(--g5); font-size:1.05rem; margin-bottom:.6rem}
.step-ic{width:56px; height:56px; border-radius:50%; background:var(--g6);
  border:1px solid var(--g5); font-size:1.4rem}
.form-control:focus,.form-select:focus{border-color:var(--g2); box-shadow:0 0 0 .18rem rgba(0,0,0,.08)}
.form-check-input:checked{background-color:var(--ink); border-color:var(--ink)}