/* ch-milan: the clips of the B2B chapter on Milan, the tender office. Every size is a design pixel of the clip's canvas
   (1200 by 515 for the opening, 600 square for the steps), scaled by clips.css. What is drawn is a picture of the portal, so
   it wears the portal's own colours (software/sito/DESIGN.md: white, black ink, green for what a company can win, blue for
   what waits for an answer, amber for what needs the company, red for what it cannot), on the site's black. Needs base.css,
   motion.css, clips.css and ../chapter-kit/chapter-kit.css (the shared pieces, whose --s-* tokens are set here). */
.ml-frame{
  --s-panel:#fff;--s-panel2:#f6f6f8;--s-inset:#ececf0;--s-soft:#e9e9ee;
  --s-ink:#111114;--s-ink2:#3a3a3f;--s-ink3:#636366;--s-hair:rgb(17 17 20/.09);--s-hair2:rgb(17 17 20/.18);
  --s-accent:#111114;--s-accent-ink:#111114;--s-on-accent:#fff;
  --s-ok:#22a45a;--s-ok-bg:#e4f4eb;--s-ok-ink:#127a3e;--s-att:#ff9f0a;--s-att-bg:#fff0d8;--s-att-ink:#a65000;--s-red:#e5484d;--s-red-bg:#fce9ea;--s-red-ink:#c0262d;--s-info:#2a62d9;--s-info-bg:#eaeffb;--s-info-ink:#2a62d9;
}

/* ---------- the opening ---------- */
.ml-src{left:30px;top:78px;width:262px;height:424px}
.ml-s{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-bottom:1px solid var(--s-hair);font-size:12.5px;font-weight:560;color:var(--s-ink2)}
.ml-s svg{width:16px;height:16px;flex:none;color:var(--s-ink3)}
.ml-s span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-tick{width:7px;height:7px;border-radius:50%;background:var(--s-ok);opacity:0}
.ml-slip{width:15px;height:9px;border-radius:3px;background:#fff;box-shadow:0 0 0 1px rgb(255 255 255/.4),0 0 14px rgb(255 255 255/.5)}

.ml-idx{left:352px;top:78px;width:452px;height:424px}
.ml-big{display:flex;align-items:flex-end;gap:14px;padding:16px 20px 6px}
.ml-big b{font-family:var(--serif);font-weight:300;font-size:70px;line-height:.9;letter-spacing:-.045em;font-variant-numeric:tabular-nums;min-width:5.1ch}
.ml-big span{display:grid;gap:1px;padding-bottom:6px;font-size:14px;font-weight:560;color:var(--s-ink2)}
.ml-big small{font-size:11.5px;font-weight:500;color:var(--s-ink3)}
.ml-dots{display:grid;grid-template-columns:repeat(36,1fr);gap:4.4px;padding:12px 20px 10px}
.ml-dots i{display:block;width:7px;height:7px;border-radius:2px;background:#c9c9d3;opacity:0;transition:opacity .45s var(--e-ui) var(--d,0ms),background-color .45s var(--e-ui) calc(var(--c) * 22ms),transform .5s var(--e-molla) calc(var(--c) * 22ms)}
.ml-dots.on i{opacity:1}
.ml-dots.judged i[data-s="no"]{opacity:.22}
.ml-dots.judged i[data-s="ok"]{background:var(--s-ok);transform:scale(1.7);opacity:1}
.ml-dots.judged i[data-s="tc"]{background:var(--s-info);transform:scale(1.35);opacity:1}
.ml-dots.fit i[data-s="tc"]:not(.pick){opacity:.28;transform:scale(1)}
.ml-dots i.pick{opacity:1;box-shadow:0 0 0 3px rgb(34 164 90/.28)}
.ml-dots i.pick[data-s="tc"]{box-shadow:0 0 0 3px rgb(42 98 217/.28)}
.ml-steps{display:flex;gap:8px;padding:6px 20px 0}
.ml-step{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:8px;background:var(--s-inset);color:var(--s-ink3);font-size:12.5px;font-weight:600;transition:background-color .3s var(--e-ui),color .3s var(--e-ui)}
.ml-step svg{width:14px;height:14px}
.ml-step.on{background:var(--s-ink);color:#fff}
.ml-leg{display:flex;align-items:center;gap:8px;padding:12px 20px 14px}
.ml-leg small{margin-left:5px;font-size:11.5px;color:var(--s-ink3)}

.ml-co{left:30px;top:78px;width:262px;height:424px}
.ml-cn{display:grid;gap:2px;padding:14px 16px 10px}
.ml-cn b{font-size:15.5px;font-weight:660;letter-spacing:-.01em}
.ml-cn small{font-size:12px;color:var(--s-ink3)}
.ml-cf{display:grid;grid-template-columns:18px 1fr;column-gap:8px;row-gap:1px;padding:10px 16px;border-top:1px solid var(--s-hair)}
.ml-cf svg{grid-row:span 2;width:16px;height:16px;margin-top:2px;color:var(--s-ink3)}
.ml-cf small{font-size:11.5px;color:var(--s-ink3)}
.ml-cf b{font-size:13.5px;font-weight:600}

.ml-list{left:852px;top:78px;width:312px;height:252px}
.ml-list .sb-hd{height:42px}
.ml-c{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;height:70px;padding:8px 14px 0;column-gap:8px;row-gap:2px;border-bottom:1px solid var(--s-hair)}
.ml-t{display:inline-block;height:16px;line-height:16px;padding:0 6px;border-radius:4px;background:var(--s-soft);color:var(--s-ink2);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ml-t.bando{background:var(--s-ink);color:#fff}
.ml-c>b{font-size:13px;font-weight:640;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-c .ml-v{justify-self:end}
.ml-c>small{grid-column:1 / -1;font-size:11.5px;color:var(--s-ink3)}
.ml-c em{grid-column:1 / -1;font-style:normal;font-size:11.5px;font-weight:560;color:var(--s-ok-ink)}
.ml-c .sb-pill{height:22px;font-size:11.5px;padding:0 8px}
.ml-n{display:grid;gap:1px;min-width:0}
.ml-n b{font-size:13px;font-weight:620;line-height:1.25;letter-spacing:-.005em}
.ml-n small{font-size:11.5px;color:var(--s-ink3)}

.ml-soon{left:852px;top:342px;width:312px;height:112px}
.ml-soon .sb-hd{height:38px}
.ml-pr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin:10px 12px 0;padding:8px 10px;border-radius:10px;border:1.5px dashed var(--s-hair2);transition:border-color .3s var(--e-ui),background-color .3s var(--e-ui),box-shadow .3s var(--e-ui)}
.ml-ghost{display:grid;gap:1px;min-width:0}
.ml-ghost b{font-size:13px;font-weight:620}
.ml-ghost small{font-size:11.5px;color:var(--s-ink3)}
.ml-pr.lit{border-color:var(--s-att);background:var(--s-att-bg);box-shadow:0 0 0 4px rgb(255 159 10/.18)}
.ml-pr.done{border-style:solid;border-color:rgb(34 164 90/.5);background:var(--s-ok-bg)}
.ml-rec{display:grid;gap:5px;padding:8px 12px 0}
.ml-r22{display:grid;grid-template-columns:repeat(22,1fr);gap:3px}
.ml-r22 i{display:block;height:9px;border-radius:2.5px;background:var(--s-inset)}
.ml-r22 i.hit{background:var(--s-ok)}
.ml-rec small{font-size:11px;color:var(--s-ink2);font-weight:560;line-height:1.3}
.ml-rec small em{display:block;font-style:normal;color:var(--s-ink3);font-weight:500}

/* ---------- the steps: the portal's windows ---------- */
.ml-stage{left:0;top:0;width:600px;height:600px;display:grid;place-items:start center}
.ml-win{position:relative;width:520px;overflow:hidden}
.ml-form{display:grid;gap:10px;padding:16px 18px 18px}
.ml-form>small{font-size:12.5px;font-weight:600;color:var(--s-ink3)}
.ml-in{display:flex;align-items:center;height:52px;padding:0 16px;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--s-ink);font-size:20px;font-weight:560;letter-spacing:.02em}
.ml-hint{font-size:13px;color:var(--s-ink3)}
.ml-form .sb-btn{height:46px;border-radius:12px;font-size:15px}
.ml-f{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;min-height:48px;padding:0 18px;border-bottom:1px solid var(--s-hair)}
.ml-f small{font-size:13px;color:var(--s-ink3)}
.ml-f i{font-style:normal;font-size:15px}
.ml-f b{font-weight:620}
.ml-regs{display:flex;gap:6px;flex-wrap:wrap}
.ml-seg{display:inline-flex;gap:2px;padding:2px;border-radius:9px;background:var(--s-inset)}
.ml-seg i{font-style:normal;padding:3px 10px;border-radius:7px;font-size:12px;font-weight:600;color:var(--s-ink3)}
.ml-seg i.on{background:#fff;color:var(--s-ink);box-shadow:0 1px 2px rgb(0 0 0/.12)}
.ml-rows{display:grid}
.ml-row{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;height:62px;padding:0 16px;border-bottom:1px solid var(--s-hair);overflow:hidden}
.ml-av{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--s-inset);font-size:12px;font-weight:700;color:var(--s-ink2)}
.ml-row .ml-n b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-stamp{position:absolute;right:14px;top:50%;margin-top:-14px;padding:3px 10px;border:2px solid var(--s-red);border-radius:6px;color:var(--s-red);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;opacity:0;rotate:-6deg;scale:1.6;transition:opacity .25s var(--e-ui),scale .45s var(--e-molla);background:rgb(255 255 255/.92)}
.ml-row.stamped .ml-stamp{opacity:1;scale:1}
.ml-row.stamped .ml-av,.ml-row.stamped .ml-n{opacity:.4;transition:opacity .3s var(--e-ui)}
.ml-th{position:relative;display:grid;gap:3px;padding:16px 130px 14px 18px;border-bottom:1px solid var(--s-hair)}
.ml-th .ml-t{justify-self:start;margin-bottom:2px}
.ml-th>b{font-size:17px;font-weight:650;letter-spacing:-.012em;line-height:1.2}
.ml-th>small{font-size:12.5px;color:var(--s-ink3)}
.ml-verdict{position:absolute;right:16px;top:16px;display:inline-flex}
.ml-rq{padding:12px 0 4px}
.ml-rq>small{display:block;padding:0 18px 6px;font-size:12px;font-weight:600;color:var(--s-ink3)}
.ml-q{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:44px;padding:5px 18px;border-top:1px solid var(--s-hair)}
.ml-qt{font-size:13.5px;font-weight:560;line-height:1.3}
.ml-st{display:grid;place-items:center;width:24px}
.ml-st .sb-load{font-size:12px}
.ml-ok,.ml-tcq,.ml-at{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#fff}
.ml-ok{background:var(--s-ok)}.ml-tcq{background:var(--s-info)}.ml-at{background:var(--s-att)}
.ml-ok svg,.ml-tcq svg,.ml-at svg{width:12px;height:12px;stroke-width:2.6}
.ml-ask{display:grid;gap:10px;margin:8px 14px 0;padding:12px 14px;border-radius:12px;background:var(--s-info-bg);overflow:hidden}
.ml-ask b{font-size:13.5px;font-weight:620;line-height:1.3;color:var(--s-ink)}
.ml-ask div{display:flex;justify-content:flex-end;gap:8px}
.ml-rule{display:flex;align-items:center;gap:8px;padding:12px 18px 14px;font-size:12px;color:var(--s-ink3)}
.ml-rule svg{width:14px;height:14px;flex:none}
.ml-i{display:block;margin:10px 14px 0;padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--s-hair);transition:box-shadow .25s var(--e-ui),background-color .25s var(--e-ui)}
.ml-i.sel{box-shadow:inset 0 0 0 2px var(--s-ink);background:var(--s-panel2)}
.ml-i.hover:not(.sel){background:var(--s-panel2)}
.ml-in2{display:grid;gap:7px;justify-items:start}
.ml-in2 b{font-size:14.5px;font-weight:620;line-height:1.3}
.ml-id{padding-bottom:14px}
.ml-d{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:50px;padding:0 18px;border-bottom:1px solid var(--s-hair)}
.ml-dn{display:grid}
.ml-dn b{font-size:14px;font-weight:620}
.ml-dn small{font-size:12px;color:var(--s-ink3)}
.ml-tp{padding:12px 18px 6px}
.ml-tp small{font-size:12px;font-weight:600;color:var(--s-ink3)}
.ml-tp p{margin-top:4px;padding:10px 12px;border-radius:10px;background:var(--s-panel2);font-size:13.5px;line-height:1.45;min-height:78px}
.ml-sg{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px 14px 18px;font-size:12.5px;color:var(--s-ink3)}
.ml-sg>span{display:inline-flex;align-items:center;gap:7px}
.ml-sg svg{width:14px;height:14px;flex:none}

.ml-list .sb-hd b,.ml-soon .sb-hd b{white-space:nowrap}