/* ch-paris: the back office's chapter (builder D). Everything inside a clip is in design pixels (the opening is a
   1280 by 720 canvas, the steps a 600 square), scaled by the kit. The product windows are chapter-kit.css's light window
   (.dk-app). Needs ../base/base.css, ../chapter/chapter.css, ../motion/motion.css, ../clips/clips.css,
   ../chapter-kit/chapter-kit.css. */

.dk-btn.sm{height:28px;padding:0 12px;font-size:12.5px;border-radius:8px}
.dk-btn.done{background:var(--p-ok)}
.dk-pill.hover{background:var(--p-bg3)}

/* ---------- the opening: the bank feed, the lanes where they are matched, the invoices ---------- */
.paris-win{left:90px;top:50px;width:1100px;height:620px}
.paris-bar{position:relative;height:52px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--p-line)}
.paris-co{display:flex;align-items:center;gap:10px;font-size:14px}
.paris-co .dk-tile{width:28px;height:28px;border-radius:8px;font-size:11px}
.paris-tabs{position:absolute;left:50%;top:10px;translate:-50% 0;display:flex;gap:2px;padding:3px;border-radius:11px;background:var(--p-bg2)}
.paris-tabs span{display:flex;align-items:center;height:30px;padding:0 13px;border-radius:8px;font-size:13.5px;font-weight:560;color:var(--p-ink3)}
.paris-tabs span.on{background:var(--p-bg);color:var(--p-ink);box-shadow:0 1px 2px oklch(0% 0 0/.12),0 0 0 1px var(--p-line)}
.paris-conn{margin-left:auto}
.paris-body{position:absolute;inset:52px 0 0 0;overflow:hidden}
.paris-feed{position:absolute;left:0;top:0;bottom:0;width:440px}
.paris-invs{position:absolute;left:560px;right:0;top:0;bottom:0}
.paris-ph{display:flex;align-items:center;gap:9px;height:52px;padding:0 16px;border-bottom:1px solid var(--p-line)}
.paris-ph b{font-size:15px}
.paris-ph small{margin-left:auto}
.paris-lanes{position:absolute;left:440px;top:0;width:120px;height:568px;background:var(--p-bg2);border-inline:1px solid var(--p-line)}
.dk-app .paris-lanes{width:120px;height:568px}
.paris-lanes path{fill:none;stroke:var(--p-ink);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1}
.paris-mv{position:absolute;left:0;right:0;height:66px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--p-line)}
.paris-mv .tx{flex:1;min-width:0;display:grid;gap:1px}
.paris-mv .tx small,.paris-iv .cu{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paris-mv .am{display:grid;justify-items:end;gap:5px;text-align:right}
.paris-mv .am b{font-size:14px;font-variant-numeric:tabular-nums}
.paris-mv .st{display:flex;justify-content:flex-end;min-height:24px}
.paris-iv{position:absolute;left:0;right:0;height:54px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--p-line)}
.paris-iv .no{width:50px;font-size:14px}
.paris-iv .cu{flex:1;min-width:0;color:var(--p-ink2);font-size:14px}
.paris-iv .am{width:96px;text-align:right;font-weight:560;font-size:14px;font-variant-numeric:tabular-nums}
.paris-iv .st{width:98px;display:flex;justify-content:flex-end}
.paris-ask{position:absolute;left:16px;top:350px;width:408px;display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--p-bg2);box-shadow:inset 0 0 0 1px var(--p-line)}
.paris-ask .tx{flex:1;min-width:0;display:grid;gap:3px}
.paris-ask .msg{display:block;min-height:3.9em;font-size:13px;line-height:1.45;color:var(--p-ink2)}
.paris-ask .cl-caret{background:var(--p-ink)}

/* ---------- step 1: the invoice, checked before it goes ---------- */
.paris-inv{left:28px;top:34px;width:544px}
.paris-ih{display:flex;align-items:center;gap:12px;height:68px;padding:0 18px;border-bottom:1px solid var(--p-line)}
.paris-ih .stt{margin-left:auto}
.paris-il{display:flex;justify-content:space-between;align-items:center;height:46px;padding:0 18px;border-bottom:1px solid var(--p-line);font-size:14.5px}
.paris-il.tot{border-bottom:0;background:var(--p-bg2);font-weight:600}
.paris-chk{left:28px;top:262px;width:544px}
.paris-ch{display:flex;align-items:baseline;gap:10px;height:50px;padding:0 18px;border-bottom:1px solid var(--p-line)}
.paris-cr{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:12px;height:48px;padding:0 18px;border-bottom:1px solid var(--p-line);font-size:14.5px}
.paris-cr:last-child{border-bottom:0}
.paris-cr .mk{position:relative;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--p-line2);transition:background-color .25s var(--e-ui),box-shadow .25s var(--e-ui)}
.paris-cr .mk::after{content:"";position:absolute;left:5px;top:5px;width:9px;height:5px;border-left:2px solid oklch(100% 0 0);border-bottom:2px solid oklch(100% 0 0);rotate:-45deg;opacity:0;transition:opacity .2s var(--e-ui)}
.paris-cr.ok .mk{background:var(--p-ink);box-shadow:none}
.paris-cr.ok .mk::after{opacity:1}
.paris-cr.bad .mk{background:var(--p-red);box-shadow:none}
.paris-cr.bad .mk::after{opacity:0}
.paris-cr .mk i{display:none}

/* ---------- step 2: each payment finds its invoice ---------- */
.paris-rc{left:28px;top:40px;width:544px}
.paris-rh{display:flex;align-items:baseline;gap:10px;height:52px;padding:0 18px;align-items:center;border-bottom:1px solid var(--p-line)}
.paris-rh b{font-size:15.5px}
.paris-rh .lg{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--p-ink3)}
.paris-rh .lg i{width:2px;height:13px;background:var(--p-ink)}
.paris-rr{padding:14px 18px 12px;border-bottom:1px solid var(--p-line)}
.paris-rr .top{display:flex;align-items:center;gap:12px}
.paris-rr .tx{display:grid;gap:1px}
.paris-rr .am{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
.paris-rr .meter{position:relative;height:8px;margin-top:13px;border-radius:4px;background:var(--p-bg3)}
.paris-rr .meter u{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:4px;background:oklch(62% 0 0);transform-origin:0 50%;transform:scaleX(0);transition:background-color .35s var(--e-ui)}
.paris-rr.sure .meter u{background:var(--p-ink)}
.paris-rr .meter s{position:absolute;left:82%;top:-4px;bottom:-4px;width:2px;background:var(--p-ink)}
.paris-rr .out{display:flex;margin-top:10px;min-height:26px;align-items:center}
.paris-rn{padding:15px 18px;background:var(--p-bg2);font-size:13.5px;line-height:1.45;color:var(--p-ink2)}

/* ---------- step 3: the reminders ---------- */
.paris-ch2{left:28px;top:24px;width:544px;height:552px}
.paris-cl{position:relative;padding:12px 18px 0}
.paris-cl>small{display:block;height:26px;line-height:26px}
.paris-cl .rg{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:14px;height:64px}
.paris-cl .rg .dot{position:relative;z-index:1;width:14px;height:14px;justify-self:center;border-radius:50%;background:var(--p-bg);box-shadow:inset 0 0 0 1.5px var(--p-line2);transition:background-color .25s var(--e-ui),box-shadow .25s var(--e-ui)}
.paris-cl .rg.on .dot{background:var(--p-ink);box-shadow:none}
.paris-cl .rg .tx{font-size:14.5px;transition:color .3s var(--e-ui)}
.paris-cl .rg.off .tx{color:var(--p-ink3);text-decoration:line-through}
.paris-cl .rail{position:absolute;left:28px;top:70px;width:2px;height:192px;background:var(--p-line2)}
.paris-cl .rail u{display:block;width:100%;height:100%;background:var(--p-ink);transform-origin:50% 0;transform:scaleY(0)}
.paris-day{display:flex;align-items:baseline;gap:12px;padding:10px 18px 0}
.paris-day b{font-family:var(--serif);font-weight:300;font-size:50px;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.paris-pay{position:absolute;left:18px;right:18px;bottom:18px;display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--p-bg2);box-shadow:inset 0 0 0 1px var(--p-line)}
.paris-pay>span:not(.dk-pill){display:grid;gap:1px}
.paris-pay>.dk-pill{margin-left:auto}
.paris-pay>svg{width:20px;height:20px;margin:0 4px 0 2px}

/* ---------- step 4: what goes out ---------- */
.paris-sup{left:28px;top:36px;width:544px}
.paris-sr{display:grid;grid-template-columns:40px minmax(0,1fr) auto 152px;align-items:center;column-gap:12px;height:72px;padding:0 18px;border-bottom:1px solid var(--p-line)}
.paris-sr:last-child{border-bottom:0}
.paris-sr .tx{display:grid;gap:1px}
.paris-sr .am{font-weight:560;font-variant-numeric:tabular-nums}
.paris-sr .st{display:flex;justify-content:flex-end}
.paris-run{left:28px;top:340px;width:544px}
.paris-run .top{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--p-line)}
.paris-run .tx{display:grid;gap:1px}
.paris-run .am{margin-left:auto;font-family:var(--serif);font-weight:300;font-size:30px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.paris-run .bt{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px}
.paris-run .bt small{max-width:230px;line-height:1.4}
.paris-run .auth{display:flex}