/* ============================================================
   IRIS additions. Everything here is built from the Ahoy tokens
   in theme.css - no new palette, no new type scale.
   ============================================================ */

/* the scan stage: paper on a soft ground, same radius as a panel */
.stage {
  background: var(--bg-2); border-radius: var(--radius-sm);
  padding: 14px; display: grid; place-items: start center;
  max-height: 70vh; overflow: auto;
}
.stage img { border-radius: 4px; box-shadow: var(--shadow-pop); max-width: 100%; }

/* extracted field rows */
.fieldlist { max-height: 70vh; overflow-y: auto; }
.fld {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-1);
  border-left: 3px solid transparent;
}
.fld:last-child { border-bottom: none; }
.fld.needs { border-left-color: var(--yellow); background: var(--yellow-soft); }
.fld.done  { border-left-color: var(--green); }
.fld-k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em;
         text-transform: uppercase; color: var(--txt-3); }
.fld-v { font-weight: 600; font-size: 15px; color: var(--txt-1); word-break: break-word; margin-top: 2px; }
.fld-v.mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: -.01em; }
.fld-v.blank { color: var(--red); font-style: italic; font-weight: 500; }
.fld-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.fld-acts { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fld .input { margin-top: 4px; }

/* confidence read-out */
.conf { display: flex; align-items: center; gap: 8px; justify-self: end; align-self: start; }
.conf b { font-family: var(--font-mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--txt-2); }
.meter { width: 44px; height: 5px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.meter.mid i { background: var(--yellow); }
.meter.low i { background: var(--red); }

/* vendor wording chip, so the mapping is visible */
.wording { font-family: var(--font-mono); font-size: 11px; background: var(--bg-2);
           border-radius: 6px; padding: 2px 7px; color: var(--txt-2); }

/* document queue */
.qlist { display: flex; flex-direction: column; gap: 8px; }
.qitem {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  width: 100%; text-align: left; padding: 12px; border-radius: 12px;
  border: 1px solid var(--line-1); background: var(--bg-1); transition: all .15s;
}
.qitem:hover { border-color: var(--line-3); box-shadow: var(--shadow-card); }
.qitem.active { border-color: var(--blue); background: var(--blue-soft); box-shadow: var(--shadow-lift); }
.qitem .nm { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qitem .mt { font-family: var(--font-mono); font-size: 11px; color: var(--txt-3);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* sample picker */
.samp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.samp { border: 1px solid var(--line-1); border-radius: 12px; overflow: hidden; background: var(--bg-1);
        text-align: left; transition: all .15s; }
.samp:hover { border-color: var(--blue); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.samp-shot { position: relative; height: 112px; background: #fff; }
.samp img { width: 100%; height: 112px; object-fit: cover; object-position: top center; background: #fff; }
.samp-kind { position: absolute; right: 7px; bottom: 7px; font-family: var(--mono); font-size: 9.5px;
             font-weight: 600; letter-spacing: .08em; padding: 2px 6px; border-radius: 4px;
             background: rgba(15,23,42,.72); color: #fff; }
.samp-kind.pdf { background: var(--blue); }
.samp .m { padding: 10px 12px; border-top: 1px solid var(--line-1); }

/* a preview the browser could not fetch says so instead of sitting blank */
.nopreview { height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center;
             gap: 6px; background: var(--bg-2); color: var(--txt-4); font-size: 11.5px; }

/* notice strip used for the human-in-the-loop message */
.notice { border-radius: var(--radius-sm); padding: 13px 16px; font-size: 13.5px; display: flex;
          align-items: flex-start; gap: 10px; }
.notice.warn { background: var(--yellow-soft); color: #9a6200; }
.notice.ok   { background: var(--green-soft); color: #00744a; }
.notice.bad  { background: var(--red-soft); color: #b00003; }
.notice.info { background: var(--blue-soft); color: var(--blue-deep); }
.notice svg { flex: none; margin-top: 1px; }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.42} }
.blink { animation: blink 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }

.review-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,440px); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .review-grid { grid-template-columns: 1fr; } .stage, .fieldlist { max-height: none; } }

/* ---------- integration directory ---------- */
.dest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.dest {
  background: var(--bg-1); border: 1px solid var(--line-1); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 12px; transition: all .15s;
  position: relative; overflow: hidden;
}
.dest::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--line-1); }
.dest.on::before { background: var(--b, var(--blue)); }
.dest:hover { border-color: var(--line-3); box-shadow: var(--shadow-card); }
.dest.on { border-color: var(--line-2); }
.dest-top { display: flex; align-items: center; gap: 12px; }
.dest-logo {
  width: 44px; height: 44px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--b) 10%, #fff); border: 1px solid color-mix(in srgb, var(--b) 22%, transparent);
}
.dest-name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.dest-detail { margin: 0; font-size: 13px; color: var(--txt-3); line-height: 1.55; }
.dest-map { background: var(--bg-0); border-radius: var(--radius-sm); padding: 12px 13px; }
.dest-map-h { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em;
              text-transform: uppercase; color: var(--txt-4); margin-bottom: 9px; }
.maprow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.maprow:last-child { margin-bottom: 0; }
.maprow .wording { flex: 1; text-align: center; }
.dest-meta { display: flex; flex-wrap: wrap; gap: 14px; }
.dest-meta span { display: inline-flex; align-items: center; gap: 5px; }
.dest-foot { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line-1); }

/* ---------- pdf pager ---------- */
.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- approval chain ---------- */
.chain { display: flex; flex-direction: column; gap: 2px; }
.chain .step { display: flex; gap: 14px; padding: 12px 0; position: relative; align-items: flex-start; }
.chain .step:not(:last-child)::after {
  content: ""; position: absolute; left: 13px; top: 38px; bottom: -2px; width: 2px; background: var(--line-1);
}
.step-dot {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: var(--bg-2); color: var(--txt-3);
  border: 2px solid var(--bg-1); box-shadow: 0 0 0 1px var(--line-1); z-index: 1;
}
.step.ok .step-dot  { background: var(--green); color: #fff; box-shadow: 0 0 0 1px var(--green); }
.step.bad .step-dot { background: var(--red); color: #fff; box-shadow: 0 0 0 1px var(--red); }
.step.now .step-dot { background: var(--blue); color: #fff; box-shadow: 0 0 0 4px var(--blue-soft); }
.step-t { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }

/* ---------- audit trail ---------- */
.trail { display: flex; flex-direction: column; }
.trail-i { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 8px 0;
           border-bottom: 1px solid var(--line-1); font-size: 13px; }
.trail-i:last-child { border-bottom: none; }
.trail-when { color: var(--txt-4); white-space: nowrap; }

/* ---------- workflow rules ---------- */
.rule { padding: 16px; border: 1px solid var(--line-1); border-radius: var(--radius-sm); margin-bottom: 12px; background: var(--bg-1); }
.rule:last-child { margin-bottom: 0; }
.rule.off { opacity: .55; }
.cond { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- payload preview ---------- */
.payload {
  margin: 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  background: var(--bg-0); border-radius: var(--radius-sm); padding: 16px;
  overflow-x: auto; color: var(--txt-1); max-height: 460px;
}

/* ---------- workflow flow diagram ---------- */
.flow-wrap { overflow-x: auto; padding-bottom: 8px; }
.flow { display: block; }
.fl-box rect { fill: var(--bg-1); stroke: var(--line-2); stroke-width: 1.5; }
.fl-box .fl-t { font-family: var(--font); font-size: 14px; font-weight: 600; fill: var(--txt-1); }
.fl-box .fl-s { font-family: var(--font-mono); font-size: 10.5px; fill: var(--txt-4); }
.fl-box.fl-start rect { fill: var(--bg-2); stroke: var(--line-2); }
.fl-box.fl-ai rect    { fill: var(--blue-soft); stroke: var(--blue); }
.fl-box.fl-done rect  { fill: var(--green-soft); stroke: var(--green); }
.fl-box.fl-sync rect  { fill: var(--violet-soft); stroke: var(--violet); }
.fl-box.taken rect    { fill: var(--blue-soft); stroke: var(--blue); }
.fl-box.now rect      { fill: var(--bg-1); stroke: var(--blue); stroke-width: 2.5;
                        filter: drop-shadow(0 0 0 6px var(--blue-soft)); }
.fl-box.now .fl-now   { font-family: var(--font-mono); font-size: 10px; font-weight: 700;
                        letter-spacing: .1em; text-transform: uppercase; fill: var(--blue); }
.fl-box.dim rect      { fill: var(--bg-0); stroke: var(--line-1); stroke-dasharray: 4 4; }
.fl-box.dim .fl-t, .fl-box.dim .fl-s { fill: var(--txt-4); }
.fl-gate path { fill: var(--bg-1); stroke: var(--txt-4); stroke-width: 1.6; stroke-dasharray: 4 3; }
.fl-gate .fl-qmark { font-family: var(--font); font-size: 15px; font-weight: 700; fill: var(--txt-3); }
.fl-gate .fl-cond  { font-family: var(--font-mono); font-size: 10px; fill: var(--txt-3); }
.fl-gate.dim { opacity: .4; }
.fl-edge path { fill: none; stroke: var(--line-3); stroke-width: 2; color: var(--line-3); }
.fl-edge .fl-lbl { font-family: var(--font-mono); font-size: 10px; fill: var(--txt-4); }
.fl-edge.dim path { stroke: var(--line-1); color: var(--line-1); stroke-dasharray: 4 4; }
.fl-edge.dim .fl-lbl { fill: var(--line-2); }
.fl-skip path { stroke-dasharray: 5 4; }
.legend-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; color: var(--txt-3); }
.legend-row span { display: inline-flex; align-items: center; gap: 7px; }
.legend-row .lg { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

/* ---------- mapping canvas ---------- */
.mapcanvas { position: relative; display: grid; grid-template-columns: 1fr 190px 1fr; gap: 0 40px; }
.maplinks { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.mlink { fill: none; stroke: var(--line-3); stroke-width: 2; transition: stroke .15s, stroke-width .15s; }
.mlink.off { stroke: var(--line-1); stroke-dasharray: 4 4; }
.mlink.hot { stroke: var(--blue); stroke-width: 3; }
.mapcol { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.mapcol-h { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em;
            text-transform: uppercase; color: var(--txt-4); display: flex; flex-direction: column; gap: 3px;
            justify-content: flex-end; padding-bottom: 8px; height: 46px; }
.mapcol-h .tiny { letter-spacing: 0; text-transform: none; font-weight: 400; }
.mapnode { background: var(--bg-1); border: 1px solid var(--line-1); border-radius: 10px; padding: 8px 12px;
           height: 62px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.mapnode.r { flex-direction: row; align-items: center; gap: 8px; }
.mapnode.off { opacity: .45; }
.mapnode-k { font-size: 12.5px; font-weight: 600; color: var(--txt-1); }
.mapnode-v { font-size: 11.5px; color: var(--txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapnode-v.out { color: var(--blue-deep); font-weight: 500; margin-top: 3px; }
.mapnode .mapdot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--bg-1);
                   border: 2px solid var(--line-3); top: 50%; transform: translateY(-50%); }
.mapnode.l .mapdot { right: -5px; }
.mapnode.r .mapdot { left: -5px; position: absolute; }
.mapfield { padding: 5px 8px !important; font-size: 12.5px !important; }
.mapmid { gap: 10px; }
.maptrans { height: 62px; display: flex; align-items: center; gap: 6px; }
.maptrans .select { padding: 6px 8px; font-size: 12px; flex: 1; min-width: 0; }
.linkbtn { width: 26px; height: 26px; border-radius: 7px; background: var(--bg-2); color: var(--txt-3);
           font-size: 12px; line-height: 1; flex: none; }
.linkbtn:hover { background: var(--red-soft); color: var(--red); }
@media (max-width: 900px) {
  .mapcanvas { grid-template-columns: 1fr; gap: 10px; }
  .maplinks { display: none; }
}

/* ---------- the document with the reading drawn on it ---------- */
.docshot { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.docshot img { border-radius: 4px; box-shadow: var(--shadow-pop); max-width: 100%; height: auto; }
.hl-layer { position: absolute; inset: 0; }
.hl {
  position: absolute; border-radius: 3px; padding: 0; cursor: pointer; line-height: 1;
  background: rgba(0, 102, 255, .16); border: 1.5px solid rgba(0, 102, 255, .75);
  animation: hlin .34s cubic-bezier(.2,.8,.2,1) both; transition: background .12s, box-shadow .12s;
}
@keyframes hlin { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
.hl:hover { background: rgba(0, 102, 255, .28); }
.hl.warn { background: rgba(255, 162, 0, .2); border-color: var(--yellow); }
.hl.ok   { background: rgba(0, 184, 101, .16); border-color: var(--green); }
.hl.sel  { background: rgba(0, 102, 255, .34); border-width: 2.5px; box-shadow: 0 0 0 4px var(--blue-glow); z-index: 3; }
.hl-tag {
  position: absolute; bottom: 100%; left: -1px; margin-bottom: 3px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--blue); color: #fff; padding: 2px 6px; border-radius: 4px; opacity: 0; transition: opacity .12s;
  pointer-events: none;
}
.hl:hover .hl-tag, .hl.sel .hl-tag { opacity: 1; }
.hl.warn .hl-tag { background: #9a6200; }
.hl.ok .hl-tag { background: var(--green); }

/* sweeping beam while it reads */
.docshot.scanning img { filter: saturate(.82) contrast(.96); }
.beam {
  position: absolute; left: 0; right: 0; height: 26%; pointer-events: none; border-radius: 4px;
  background: linear-gradient(180deg, rgba(0,102,255,0) 0%, rgba(0,102,255,.20) 70%, rgba(0,102,255,.85) 100%);
  box-shadow: 0 2px 14px 2px var(--blue-glow);
  animation: sweep 2.1s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes sweep { 0% { top: -26%; } 100% { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .beam { animation: none; top: 0; opacity: .3; } .hl { animation: none; } }

/* ---------- reading progress ---------- */
.reading { background: var(--blue-soft); border: 1px solid var(--blue); border-radius: var(--radius-sm); padding: 14px 16px; }
.readsteps { display: flex; flex-direction: column; gap: 7px; }
.readstep { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--txt-4); }
.readstep .rs-dot {
  width: 17px; height: 17px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--bg-3); color: #fff; font-size: 9px; font-weight: 700;
}
.readstep.done { color: var(--txt-2); }
.readstep.done .rs-dot { background: var(--green); }
.readstep.now { color: var(--blue-deep); font-weight: 600; }
.readstep.now .rs-dot { background: var(--blue); animation: blink 1s ease-in-out infinite; }
.readdone {
  display: flex; align-items: center; gap: 9px; font-size: 13px; color: #00744a;
  background: var(--green-soft); border-radius: var(--radius-sm); padding: 10px 14px;
}
.fld.sel { background: var(--blue-soft); }