/* ch-seller: the sales department'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 drawn in 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. */

/* ---------- the opening: the product window, three spaces, the list beside the map ---------- */
.seller-win{left:90px;top:50px;width:1100px;height:620px}
.seller-bar{position:relative;height:52px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--p-line)}
.seller-co{display:flex;align-items:center;gap:10px;font-size:14px}
.seller-co .dk-tile{width:28px;height:28px;border-radius:8px;font-size:11px}
.seller-tabs{position:absolute;left:50%;top:10px;translate:-50% 0;display:flex;gap:2px;padding:3px;border-radius:11px;background:var(--p-bg2)}
.seller-tabs span{display:flex;align-items:center;gap:7px;height:30px;padding:0 13px;border-radius:8px;font-size:13.5px;font-weight:560;color:var(--p-ink3)}
.seller-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)}
.seller-body{position:absolute;inset:52px 0 0 0;overflow:hidden}

.seller-list{position:absolute;left:0;top:0;bottom:0;width:580px;z-index:2;background:var(--p-bg);border-right:1px solid var(--p-line)}
.seller-lh{display:flex;align-items:center;gap:12px;height:60px;padding:0 18px;border-bottom:1px solid var(--p-line)}
.seller-lh>b{font-size:17px}
.seller-n{font-size:13px;color:var(--p-ink3)}
.seller-ord{margin-left:auto;display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--p-bg2)}
.seller-ord span{display:grid;place-items:center;height:28px;padding:0 11px;border-radius:8px;font-size:13px;font-weight:560;color:var(--p-ink3);transition:background-color .25s var(--e-ui),color .25s var(--e-ui),box-shadow .25s var(--e-ui)}
.seller-ord 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)}
.seller-ord span.hover:not(.on){color:var(--p-ink2)}
.seller-rows{position:relative;height:456px}
.seller-row{position:absolute;left:0;right:0;top:0;height:76px;display:grid;grid-template-columns:26px 40px minmax(0,1fr) auto 30px;align-items:center;column-gap:12px;padding:0 18px;border-bottom:1px solid var(--p-line);background:var(--p-bg)}
.seller-rk{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--p-ink3);box-shadow:inset 0 0 0 1.5px var(--p-line2)}
.seller-rk:empty{visibility:hidden}
.seller-rk.top{background:var(--p-ink);color:oklch(100% 0 0);box-shadow:none}
.seller-rt{display:grid;gap:3px;min-width:0}
.seller-l1{display:flex;align-items:baseline;gap:8px}
.seller-l1 b{font-size:15px}
.seller-why{display:block;min-height:19px;font-size:13px;color:var(--p-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seller-why .dk-sk{margin-top:6px}
.seller-why>span{display:inline}
.seller-chip{justify-self:end}
.seller-callb{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--p-ink);color:oklch(100% 0 0)}
.seller-callb svg{width:14px;height:14px}

.seller-map{position:absolute;top:0;bottom:0;left:0;width:1100px;overflow:hidden;background:oklch(93.5% 0 0)}
.seller-plane{position:absolute;left:0;top:0;width:1100px;height:568px}
.dk-app .seller-plane>svg{display:block;width:1100px;height:568px}
.seller-win.final .seller-map{left:580px;width:520px}
.seller-win.final .seller-plane{translate:-290px 0}
.seller-ring{position:absolute;left:330px;top:64px;width:440px;height:440px;border-radius:50%;border:1.5px dashed oklch(0% 0 0/.4);background:oklch(0% 0 0/.04)}
.seller-pin{position:absolute;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;background:var(--p-bg);color:var(--p-ink);box-shadow:0 0 0 1.5px oklch(0% 0 0/.55),0 6px 14px -4px oklch(0% 0 0/.35);transition:background-color .35s var(--e-ui),color .35s var(--e-ui),box-shadow .35s var(--e-ui)}
.seller-pin>i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:12.5px;font-weight:700}
.seller-pin svg{width:16px;height:16px}
.seller-pin.rk{background:var(--p-ink);color:oklch(100% 0 0);box-shadow:0 0 0 2px var(--p-bg),0 6px 14px -4px oklch(0% 0 0/.5)}
.seller-pin.dim{background:oklch(96% 0 0);color:var(--p-ink3);box-shadow:0 0 0 1px oklch(0% 0 0/.22)}
.seller-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--p-ink);box-shadow:0 0 0 2px var(--p-bg);transition:background-color .35s var(--e-ui)}
.seller-dot.dim{background:oklch(78% 0 0)}
.seller-hq{position:absolute;left:550px;top:284px;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:10px;background:var(--p-ink);color:oklch(100% 0 0);box-shadow:0 0 0 3px var(--p-bg),0 8px 18px -6px oklch(0% 0 0/.5)}
.seller-hq>i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal}
.seller-hq em{position:absolute;top:44px;left:50%;translate:-50% 0;padding:2px 8px;border-radius:6px;background:var(--p-bg);color:var(--p-ink);font-size:12px;font-style:normal;font-weight:560;white-space:nowrap;box-shadow:0 0 0 1px var(--p-line)}
.seller-ask{position:absolute;left:50%;top:22px;translate:-50% 0;display:flex;align-items:center;gap:10px;min-width:400px;height:44px;padding:0 18px 0 14px;border-radius:22px;background:var(--p-bg);font-size:15px;box-shadow:0 10px 30px -10px oklch(0% 0 0/.3),0 0 0 1px var(--p-line)}
.seller-ask svg{color:var(--p-ink3)}
.seller-ask .t{white-space:nowrap}
.seller-ask .cl-caret{background:var(--p-ink)}
.seller-found{position:absolute;left:20px;bottom:20px;display:flex;align-items:baseline;gap:7px;height:40px;padding:0 16px;border-radius:20px;background:var(--p-bg);font-size:14px;color:var(--p-ink2);align-items:center;box-shadow:0 10px 30px -10px oklch(0% 0 0/.3),0 0 0 1px var(--p-line)}
.seller-found b{font-family:var(--serif);font-weight:300;font-size:22px;color:var(--p-ink);font-variant-numeric:tabular-nums}

/* ---------- step 1: the sources, then a company read from them ---------- */
.seller-src{left:28px;top:22px;width:544px;height:540px}
.seller-sh{display:flex;align-items:center;gap:12px;height:68px;padding:0 20px;border-bottom:1px solid var(--p-line)}
.seller-sh .dk-tile{width:34px;height:34px;border-radius:10px}
.seller-cnt{margin-left:auto;font-size:13.5px;color:var(--p-ink2);font-variant-numeric:tabular-nums}
.seller-cnt b{color:var(--p-ink);font-weight:600}
.seller-sg{display:grid;grid-template-columns:repeat(12,32px);gap:6px;justify-content:center;padding-top:18px}
.seller-sg i{display:block;height:32px;border-radius:8px;background:var(--p-bg3);transition:background-color .35s var(--e-ui)}
.seller-src.on .seller-sg i{background:oklch(96.5% 0 0)}
.seller-src.on .seller-sg i.lit{background:var(--p-ink)}
.seller-sg i.lit{position:relative}
.seller-sg i.lit::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:oklch(100% 0 0)}
.seller-sf{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;height:80px;padding:0 24px;border-top:1px solid var(--p-line)}
.seller-sf .big{font-family:var(--serif);font-weight:300;font-size:46px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-width:2ch}
.seller-sf .lb{font-size:15px;font-weight:560;line-height:1.25}
.seller-co2{left:28px;top:326px;width:544px}
.seller-ch{display:flex;align-items:center;gap:12px;height:66px;padding:0 16px;border-bottom:1px solid var(--p-line)}
.seller-ch>.dk-pill{margin-left:auto}
.seller-fr{display:grid;grid-template-columns:128px minmax(0,1fr) auto;align-items:center;column-gap:12px;height:44px;padding:0 16px;border-bottom:1px solid var(--p-line);font-size:13.5px}
.seller-fr .src{display:flex;align-items:center;gap:8px;color:var(--p-ink2);font-weight:560}
.seller-fr .fact{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seller-fr .when{font-size:12px;color:var(--p-ink3);white-space:nowrap}
.seller-why2{display:flex;align-items:baseline;gap:12px;padding:15px 16px;background:var(--p-bg2);font-size:14.5px}

/* ---------- step 2: the message, then one for each ---------- */
.seller-ctx{left:28px;top:92px;width:544px;height:78px;display:flex;align-items:center;gap:12px;padding:0 16px;line-height:1.4}
.seller-ctx>.dk-pill{margin-left:auto}
.seller-draft{left:28px;top:186px;width:544px;height:318px}
.seller-dh{display:flex;align-items:center;gap:12px;height:68px;padding:0 16px;border-bottom:1px solid var(--p-line)}
.seller-dh>.dk-pill{margin-left:auto}
.seller-subj{display:grid;gap:2px;padding:14px 20px 0}
.seller-subj span{font-size:15px;font-weight:600}
.seller-body2{padding:14px 20px;font-size:16px;line-height:1.6}
.seller-body2 mark{color:inherit;border-radius:3px;padding:1px 1px;margin:0 -1px;background:linear-gradient(oklch(0% 0 0/.11),oklch(0% 0 0/.11)) no-repeat 0 100%/0% 100%;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.seller-srcs{position:absolute;left:20px;bottom:16px;display:flex;gap:8px}
.seller-all{left:28px;top:76px;width:544px}
.seller-ah{display:grid;gap:2px;padding:15px 20px;border-bottom:1px solid var(--p-line)}
.seller-ah b{font-size:16px}
.seller-ar{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;column-gap:14px;height:64px;padding:0 20px;border-bottom:1px solid var(--p-line);line-height:1.35}
.seller-ar:last-child{border-bottom:0}
.seller-ar .nm b{font-size:15px}
.seller-ar .st{min-width:110px;text-align:right}

/* ---------- step 3: the reply, the brief, the call ---------- */
.seller-conv{left:28px;top:150px;width:544px;padding-bottom:22px}
.seller-vh{display:flex;align-items:center;gap:12px;height:68px;padding:0 18px;border-bottom:1px solid var(--p-line)}
.seller-vh>.dk-pill{margin-left:auto}
.seller-bub{width:fit-content;max-width:80%;margin:20px 18px 0;padding:14px 16px;border-radius:16px 16px 16px 4px;background:var(--p-bg2);font-size:16.5px;line-height:1.4}
.seller-taps{display:flex;flex-wrap:wrap;gap:8px;margin:22px 18px 0}
.seller-taps small{flex:0 0 100%;margin-bottom:2px}
.seller-taps span:not(small){display:grid;place-items:center;height:36px;padding:0 15px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--p-line2);font-size:14px;font-weight:560;transition:background-color .2s var(--e-ui),color .2s var(--e-ui)}
.seller-taps span.hover:not(.picked){background:var(--p-bg2)}
.seller-taps span.picked{background:var(--p-ink);color:oklch(100% 0 0);box-shadow:none}
.seller-brief{left:28px;top:28px;width:544px}
.seller-br{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;min-height:46px;padding:0 18px;border-bottom:1px solid var(--p-line)}
.seller-br:last-child{border-bottom:0}
.seller-br .v{font-size:15px;font-weight:560}
.seller-call{left:28px;top:296px;width:544px;height:58px;display:flex;align-items:center;gap:12px;padding:0 18px;border-radius:16px;background:oklch(14% 0 0);color:oklch(100% 0 0);box-shadow:0 0 0 1px oklch(100% 0 0/.12),0 30px 50px -30px #000}
.seller-call .ring{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:oklch(100% 0 0/.14)}
.seller-call .ring svg{width:16px;height:16px}
.seller-call b{font-size:14.5px;font-weight:560}
.seller-call .tm{margin-left:auto;font-size:14px;font-variant-numeric:tabular-nums;color:oklch(100% 0 0/.7)}
.seller-call .wv{display:flex;align-items:center;gap:3px;height:24px}
.seller-call .wv i{display:block;width:3px;height:22px;border-radius:2px;background:oklch(100% 0 0/.75);animation:cl-wave .8s ease-in-out infinite alternate}
.seller-call .wv i:nth-child(3n){animation-delay:-.2s}
.seller-call .wv i:nth-child(3n+1){animation-delay:-.45s}
.seller-call .wv i:nth-child(3n+2){animation-delay:-.7s}
.seller-hint{left:28px;top:370px;width:544px;display:grid;gap:7px;padding:15px 18px 17px}
.seller-hint small{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--p-ink2)}
.seller-hint small svg{width:14px;height:14px}
.seller-hint>span{font-size:15px;line-height:1.45}
.seller-out{left:28px;top:492px;width:544px;display:flex;justify-content:flex-end;gap:8px}
.seller-out .dk-btn{height:38px}

@media (prefers-reduced-motion:reduce){.seller-call .wv i{animation:none}}