:root{font-family:Segoe UI,Arial,sans-serif;color:#203047;background:#f1f4f8;font-size:16px}*{box-sizing:border-box}body{margin:0}main{max-width:960px;margin:auto;padding:36px 28px}header{display:flex;justify-content:space-between;gap:20px;font-size:14px;color:#65748a}a{color:#235fba;text-decoration:none}h1{font-size:28px;margin:44px 0 8px;letter-spacing:-.7px}.intro{color:#66758a;margin:0 0 30px}.controls{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px}label{display:grid;gap:7px;font-size:14px;color:#526278;flex:1;min-width:210px}select{width:100%;padding:10px;border:1px solid #cdd6e2;border-radius:7px;background:white;color:#203047;font:inherit}.stage{padding:36px 20px;background:#e8edf3;border:1px solid #dce3ec;border-radius:16px;display:flex;justify-content:center}.widget{width:560px;max-width:100%;background:white;border:1px solid #e2e7ee;border-radius:12px;padding:18px 20px 12px;box-shadow:0 4px 18px #26395809}.widget.narrow{width:360px;padding:16px}.top{display:flex;align-items:center;justify-content:space-between;gap:8px}.title{font-weight:650;font-size:14px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}#badge{font-size:12px;padding:4px 7px;border-radius:5px;background:#fff0e8;color:#974516;font-weight:500}#badge.calm{color:#526278;background:#edf1f7}button{font:inherit;font-size:13px;background:transparent;border:0;color:#3466a6;padding:6px 0;cursor:pointer;white-space:nowrap}button:hover{color:#163b74}button:focus-visible,select:focus-visible{outline:2px solid #397ddd;outline-offset:4px}button:active{opacity:.65}.client{margin:7px 0 20px;font-size:13px;color:#798698;overflow-wrap:anywhere}.metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}.metrics>div+div{border-left:1px solid #eef0f4;padding-left:14px}.metrics span{font-size:12px;color:#6b798d;display:block;margin-bottom:6px}.metrics strong{display:block;font-size:23px;font-weight:650;letter-spacing:-.5px;white-space:nowrap;font-variant-numeric:tabular-nums}.metrics strong small{font-size:13px;color:#7c899b;font-weight:400;margin-left:3px}.overdue{color:#ce3847}.track{margin-top:19px;display:flex}progress{width:100%;height:4px;border:none;border-radius:4px;overflow:hidden;background:#edf1f5;appearance:none}progress::-webkit-progress-bar{background:#edf1f5}progress::-webkit-progress-value{background:#7899c4;border-radius:4px}progress.exceeded::-webkit-progress-value{background:#d88961}progress::-moz-progress-bar{background:#7899c4}.caption{display:flex;justify-content:space-between;font-size:12px;color:#7b8798;gap:12px;margin-top:8px}.foot{border-top:1px solid #f0f2f6;margin-top:15px;padding-top:10px;display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#8791a1}#details{border-top:1px solid #e8edf3;margin-top:18px;padding-top:13px}.detailHead{display:flex;justify-content:space-between;align-items:center;gap:10px}h2{font-size:13px;font-weight:650}.detailHead span{font-size:12px;color:#7b8798}.shipment{display:grid;grid-template-columns:1fr auto;gap:7px;padding:11px 0;border-bottom:1px solid #f0f2f6;font-size:13px}.shipment span{font-size:12px;color:#7b8798}.shipment strong{font-weight:600;font-variant-numeric:tabular-nums}#issues{font-size:12px;color:#96652d;line-height:1.5}.note{max-width:670px;font-size:13px;color:#7b8798;line-height:1.7;margin-top:22px}#status{color:#925528;font-size:14px}.narrow .metrics{gap:8px}.narrow .metrics>div+div{padding-left:8px}.narrow .metrics strong{font-size:18px}.narrow .metrics span{font-size:11px}.narrow .title{gap:6px}.narrow #badge{font-size:11px}.narrow .caption,.narrow .foot{font-size:11px}@media(max-width:480px){main{padding:24px 14px}header{flex-direction:column;gap:8px}h1{font-size:24px;margin-top:28px}.stage{padding:18px 8px}.widget{padding:14px 12px}.metrics{gap:7px}.metrics>div+div{padding-left:7px}.metrics strong{font-size:17px}.metrics span{font-size:11px}.top{align-items:flex-start}.title{gap:5px}.caption{font-size:11px}}

.embedded{background:transparent}.embedded main{padding:8px;max-width:none}.embedded header,.embedded h1,.embedded .intro,.embedded .controls,.embedded .note{display:none}.embedded .stage{padding:0;background:none;border:0;border-radius:0;display:block}.embedded .widget{width:100%;box-shadow:none}.embedded .foot span:last-child{display:none}.embedded #status{margin:8px 0}
/* Fit the fixed-height MoySklad frame; only the shipment details scroll. */
.embedded{height:100vh;overflow:hidden}
.embedded main{height:100%;display:flex;flex-direction:column;padding:6px;min-height:0}
.embedded .stage{flex:1;min-height:0}
.embedded .widget{height:100%;display:flex;flex-direction:column;overflow:auto;padding:12px}
.embedded .widget>div,.embedded .client{flex-shrink:0}
.embedded .client{margin:5px 0 12px}
.embedded .track{margin-top:12px}
.embedded #details:not([hidden]){flex:1;min-height:55px;overflow-y:scroll;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a3b3c7 #f1f4f8;margin-top:10px;padding:0 8px 0 0;scrollbar-gutter:stable}
.embedded .detailHead{position:sticky;top:0;background:white;z-index:1;padding:4px 0}
.embedded .detailHead h2{margin:6px 0}
.embedded .shipment{padding:9px 0}
.embedded .foot{margin-top:8px;padding-top:7px}
.embedded #status:empty{display:none}
.embedded #status{flex-shrink:0;margin:4px 0;font-size:12px}
.embedded #details:focus-visible{outline:2px solid #397ddd;outline-offset:-2px}
.embedded .widget{border-top:3px solid #f20d18;color:#111315}.embedded button{color:#b50912}.embedded progress.exceeded::-webkit-progress-value{background:#f20d18}.embedded #badge{background:#fff1f2;color:#bc1823}
/* At 300px iframe height, let the list heading scroll so it cannot cover a shipment. */
.embedded .detailHead{position:static}
/* Order card: compact summary and readable shipment viewport. */
.embedded .widget{height:auto;max-height:100%;padding:10px 12px;border-radius:10px}
.embedded .widget:has(#details:not([hidden])){height:100%}
.embedded .title{font-size:12px;gap:6px}.embedded #badge{font-size:10px;padding:3px 5px}
.embedded button{font-size:11px;padding:4px 0}.embedded .client{font-size:11px;color:#696663;margin:4px 0 9px}
.embedded .metrics{gap:8px}.embedded .metrics>div+div{padding-left:8px}.embedded .metrics span{font-size:10px;margin-bottom:4px;color:#696663}
.embedded .metrics strong{font-size:20px;letter-spacing:-.4px}.embedded .metrics strong small{font-size:11px}
.embedded .track{margin-top:9px}.embedded .caption{font-size:10px;margin-top:6px;color:#696663}
.embedded #details:not([hidden]){min-height:90px;margin-top:8px;scroll-padding-block:6px}
.embedded .detailHead{padding:0}.embedded .detailHead h2{font-size:11px;margin:7px 0}.embedded .detailHead span{font-size:10px;color:#696663}
.embedded .shipment{font-size:12px;padding:8px 0;gap:5px}.embedded .shipment span{font-size:11px;color:#696663}
.embedded .foot{font-size:10px;color:#696663;margin-top:6px;padding-top:6px}
@media(max-width:350px){.embedded .metrics strong{font-size:17px}.embedded .title{font-size:11px}.embedded #badge{font-size:9px}}
/* The native MoySklad popup provides a full-size reading surface. */
.embedded.debt-popup main{position:fixed;inset:0;width:100%;height:100%;padding:24px;max-width:none;margin:0;align-items:center;justify-content:center}
.embedded.debt-popup .stage{flex:0 1 auto;width:min(820px,100%);height:min(800px,100%);min-height:0}
.embedded.debt-popup .widget{padding:24px;height:100%;max-width:none;width:100%;border-radius:16px}
.embedded.debt-popup .title{font-size:22px;gap:14px}
.embedded.debt-popup #badge{font-size:12px;padding:5px 9px}
.embedded.debt-popup button{font-size:14px;padding:10px 16px;border:1px solid #dedad4;border-radius:8px}
.embedded.debt-popup #toggle{width:40px;height:40px;flex:0 0 40px;padding:0;font-size:30px;line-height:1;color:#696663}
.embedded.debt-popup #toggle:hover{background:#fff1f2;color:#b50912;border-color:#f20d18}
.embedded.debt-popup .client{font-size:16px;margin:16px 0 24px}
.embedded.debt-popup .metrics strong{font-size:32px}
.embedded.debt-popup .metrics span,.embedded.debt-popup .caption{font-size:13px}
.embedded.debt-popup #details:not([hidden]){margin-top:24px;min-height:120px;overflow-y:auto}
.embedded.debt-popup .detailHead{position:sticky;top:0;background:white;padding:10px 0;z-index:1}
.embedded.debt-popup .detailHead h2{font-size:18px;margin:0}
.embedded.debt-popup .detailHead span{font-size:14px}
.embedded.debt-popup .shipment{font-size:16px;padding:18px 8px;gap:8px}
.embedded.debt-popup .shipment span{font-size:14px}
.embedded.debt-popup .foot{font-size:12px;padding-top:12px}
@media(max-width:600px){.embedded.debt-popup main{padding:10px}.embedded.debt-popup .widget{padding:16px}.embedded.debt-popup .title{font-size:16px}.embedded.debt-popup .metrics strong{font-size:23px}}