/* ============================================================================
   CORRECT IT ONCE — Office page. After Zip's accounts-payable clip.

   Zip's is a 17s <video>: the invoice under "Pre-filling fields with AI", every
   field and line item a loading skeleton; the fields fill, each marked with a
   sparkle; a correction goes in as an instruction; "Invoice routed for
   approval". Rebuilt as HTML on a fixed 1120x640 stage (css/motion.css, FILL).
   Resting state is the filled report, every value marked as the seat's.
   ========================================================================== */

.iv-band{overflow:hidden}   /* a stale --s can never widen the page */
.iv{--s:1;position:relative;max-width:100%;width:calc(1120px * var(--s));height:calc(640px * var(--s));margin:34px auto 0}
.iv-stage{position:absolute;left:0;top:0;width:1120px;height:640px;transform:scale(var(--s));transform-origin:0 0;
  border-radius:8px;overflow:hidden;contain:layout paint;font-family:var(--ui);color:var(--ink);
  /* the Every department backdrop (rotate.css .cl-band): pale periwinkle with a fine white
     dot grid, sized against the stage scale so the dots match the page (1px every 6px) */
  background-color:#e4ecfb;
  background-image:radial-gradient(rgba(255,255,255,.35) calc(1px / var(--s)),transparent calc(1px / var(--s)));
  background-size:calc(6px / var(--s)) calc(6px / var(--s))}
.iv-foot{margin:14px auto 0;text-align:center;font-size:12.5px;color:var(--t4)}
.iv-win{position:absolute;left:24px;top:24px;width:1072px;height:592px;border-radius:8px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.6);
  /* glass frame, as on the other dashboards; 17px because the window shows at 80% */
  box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 0 17px rgba(255,255,255,.2),0 0 0 18px rgba(255,255,255,.45),0 30px 60px -34px rgba(2,37,79,.35)}
.iv-win>span{position:absolute;display:block}

/* ---- chrome --------------------------------------------------------------- */
.iv-rail{left:0;top:0;bottom:0;width:56px;padding-top:14px;border-right:1px solid var(--line);display:flex !important;flex-direction:column;align-items:center;gap:18px}
.iv-rail i{display:block;width:16px;height:16px;border-radius:4px;background:#dbe3ed}
.iv-rail .iv-logo{width:28px;height:28px;border-radius:5px;background:#fff url(../assets/img/manelink-mark.svg) no-repeat center/18px 18px;border:1px solid var(--line)}
.iv-top{left:56px;right:0;top:0;height:54px;display:flex !important;align-items:center;gap:10px;padding:0 18px;border-bottom:1px solid var(--line)}
.iv-top>b{font-size:16px;font-weight:600;color:var(--navy)}
.iv-tag{padding:3px 9px;border-radius:8px;background:#eef1f5;font-size:11.5px;font-style:normal;color:var(--mute)}
.iv-pg{margin-left:14px;font-size:13px;color:var(--ink)}
.iv-btns{margin-left:auto;display:flex;gap:8px}
.iv-btns em{padding:8px 16px;border-radius:6px;font-size:13px;font-weight:600;font-style:normal}
.iv-no{background:#eef3fb;color:var(--blue-d)}
.iv-yes{background:var(--blue);color:#fff}

/* ---- the source, with the seat reading it --------------------------------- */
.iv-src{left:56px;top:54px;width:500px;height:314px;background:#f2f5fa}
.iv-sbar{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;background:#f7f9fc;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink)}
.iv-sbar>span:not(.iv-lb){margin-left:auto;color:var(--t4)}
.iv-doc{display:block;width:16px;height:18px;border-radius:3px;border:1.5px solid #9aa7b8}
.iv-page{position:absolute;left:24px;top:54px;width:452px;height:260px;padding:18px 20px;background:#fff;border-radius:4px 4px 0 0;
  box-shadow:0 2px 10px rgba(2,37,79,.06)}
.iv-page b{display:block;font:500 22px var(--display);color:#b8c3d2}
.iv-page small{display:block;margin:4px 0 12px;font-size:11px;color:#a3aebd}
.iv-sl{display:block;height:7px;margin-top:9px;border-radius:3px;background:#e7ecf3}
.iv-sl.w70{width:70%} .iv-sl.w45{width:45%} .iv-sl.w60{width:60%} .iv-sl.w52{width:52%} .iv-sl.w66{width:66%}
.iv-sl.w40{width:40%} .iv-sl.w58{width:58%} .iv-sl.w62{width:62%} .iv-sl.w48{width:48%} .iv-sl.w55{width:55%}
.iv-load{position:absolute;left:120px;top:142px;width:260px;height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border-radius:6px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:13.5px;font-weight:600;color:var(--navy);opacity:0}
.iv-spark{display:block;width:16px;height:16px;background:linear-gradient(135deg,#667cd2,#6d5dfc);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}

/* ---- the details the seat fills ------------------------------------------ */
/* its content is sized to fit 314px exactly; overflow hidden so a longer label can never spill into the table */
.iv-side{left:556px;right:0;top:54px;height:314px;padding:0 22px;border-left:1px solid var(--line);overflow:hidden}
.iv-tabs{display:flex;gap:18px;height:40px;align-items:flex-end;border-bottom:1px solid var(--line)}
.iv-tabs em{padding-bottom:9px;font-size:13px;font-style:normal;color:var(--mute)}
.iv-tabs .on{color:var(--navy);font-weight:600;border-bottom:2px solid var(--navy)}
.iv-bud{display:block;margin-top:10px;padding:9px 13px;border:1px solid var(--line);border-radius:6px}
.iv-bud>b{display:block;font-size:15px;font-weight:600;color:var(--navy)}
.iv-bud small{display:block;font-size:11.5px;color:var(--t4)}
.iv-rem{display:block;margin-top:5px;font-size:12.5px;color:var(--ink)}
.iv-rem b{font-size:14px}
.iv-bar{position:relative;display:block;height:5px;margin:5px 0 4px;border-radius:3px;background:#e7e9f4}
.iv-bar i{position:absolute;left:0;top:0;bottom:0;width:74%;border-radius:3px;background:var(--navy)}
.iv-sp{font-size:11.5px;color:var(--ink) !important}
.iv-h{display:block;margin:10px 0 6px;font:600 15px var(--display);color:var(--navy)}
.iv-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.iv-f{display:block;padding:4px 10px 5px;border:1px solid var(--line);border-radius:6px}
.iv-f small{display:block;font-size:10.5px;color:var(--t4)}
.iv-fv,.iv-td{position:relative;display:block;height:18px}
.iv-sk{position:absolute;left:0;right:12%;top:6px;display:block;height:7px;border-radius:4px;opacity:0;
  background:linear-gradient(90deg,#e8edf6 0,#f6f8fc 40%,#e8edf6 80%) 0 0/200% 100%}
.iv-val{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:12.5px;color:var(--ink)}
/* the seat's mark on every value it filled, as the reference's sparkle */
.iv-ai{flex:none;display:block;width:8px;height:8px;background:#a9b9e8;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}

/* ---- line items ------------------------------------------------------------ */
.iv-lines{left:56px;right:0;top:368px;bottom:0;padding:0 18px;border-top:1px solid var(--line)}
.iv-lh{display:flex;align-items:center;gap:12px;height:42px}
.iv-lh b{font:600 16px var(--display);color:var(--navy)}
.iv-lh em{padding:5px 11px;border-radius:8px;background:#f2f4f7;font-size:12px;font-style:normal;color:var(--ink)}
.iv-lh>span{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink)}
.iv-tr{display:grid;grid-template-columns:28px 2fr 1.2fr 1.5fr .9fr;gap:14px;align-items:center;height:29px;border-bottom:1px solid #eef2f7}
.iv-th{height:28px;font-size:11.5px;color:var(--t4)}
.iv-n{font-size:12px;color:var(--t4)}
.iv-td{border-radius:4px}
.iv-td .iv-val{font-size:12.5px}

/* ---- skeleton: bars carry the detail so the eye stays on the idea. Light bars
   are fixed chrome; darker bars with the seat's mark are the values it filled.
   The corrected row (Figma, 6300 - Software) stays as words. ------------------ */
.iv-lb,.iv-vb{display:inline-block;flex:none;height:7px;border-radius:4px;vertical-align:middle}
.iv-lb{background:#e6ebf2}
.iv-ld{height:9px;background:#d3dce8}
.iv-vb{background:#c7d3e5}
.v20{width:20px} .v28{width:28px} .v34{width:34px} .v36{width:36px} .v37{width:37px} .v40{width:40px} .v43{width:43px} .v46{width:46px} .v50{width:50px} .v52{width:52px} .v55{width:55px} .v56{width:56px} .v62{width:62px} .v68{width:68px} .v70{width:70px} .v72{width:72px} .v80{width:80px} .v84{width:84px} .v90{width:90px} .v93{width:93px} .v96{width:96px} .v110{width:110px} .v111{width:111px} .v117{width:117px} .v128{width:128px} .v130{width:130px} .v150{width:150px} .v200{width:200px}
.iv-tag .iv-lb,.iv-tabs .iv-lb,.iv-lh em .iv-lb{background:#d9e0ea}
.iv-page small{display:block;margin-top:8px}

/* ---- the correction --------------------------------------------------------- */
/* ---- extra beats: the seat reading, the checks, the cursor, the approved state.
   These sit inside .iv-win, so positions are window units, 24px in from the stage. */
.iv-who,.iv-chk,.iv-sent{display:flex !important;border-radius:8px;background:#fff;opacity:0;
  box-shadow:0 20px 44px -18px rgba(2,37,79,.4),0 4px 12px -6px rgba(2,37,79,.15)}
.iv-who{left:126px;top:74px;align-items:center;gap:10px;padding:10px 14px 10px 10px}
.iv-av{flex:0 0 auto;display:block;width:30px;height:30px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--sky)}
.iv-who span{display:flex;flex-direction:column;gap:2px}
.iv-who b{font-size:13px;font-weight:600;color:var(--ink)}
.iv-who small{font-size:11.5px;color:var(--mute)}
.iv-chk{left:446px;top:272px;width:262px;flex-direction:column;gap:7px;padding:12px 14px}
.iv-chk b{display:flex;align-items:center;gap:8px;margin-bottom:2px;font-size:13.5px;font-weight:600;color:var(--ink)}
.iv-ck{position:relative;display:block;padding-left:20px;font-size:12px;color:#3d4a5c}
.iv-ck::before{content:"";position:absolute;left:3px;top:3px;width:4px;height:7px;border-right:1.5px solid var(--green);border-bottom:1.5px solid var(--green);transform:rotate(45deg)}
.iv-appr{left:320px;top:15px;padding:4px 10px;border-radius:8px;background:#e7f6ee;font-size:11.5px;font-weight:600;color:var(--green);opacity:0}
.iv-sent{right:34px;top:376px;align-items:center;gap:8px;padding:10px 14px;font-size:13px;font-weight:600;color:var(--ink)}
.iv-cur{position:absolute;left:732px;top:450px;width:22px;height:22px;opacity:0}   /* window units (the stage is 24px out): the tip rests on the account cell */

/* the hand-off: a small card under Approve, up until the button is pressed */
.iv-ready{right:34px;top:84px;display:flex !important;align-items:flex-start;gap:10px;width:300px;padding:12px 14px;border-radius:8px;background:#fff;opacity:0;
  box-shadow:0 20px 44px -18px rgba(2,37,79,.4),0 4px 12px -6px rgba(2,37,79,.15)}
.iv-ready .iv-ok{flex:0 0 auto;margin-top:2px}
.iv-ready span{display:flex;flex-direction:column;gap:3px}
.iv-ready b{font-size:13.5px;font-weight:600;color:var(--ink)}
.iv-ready small{font-size:12px;color:var(--mute)}
.iv-toast{right:34px;top:176px;width:340px;padding:14px 16px;border-radius:8px;background:#fff;opacity:0;
  box-shadow:0 20px 44px -18px rgba(2,37,79,.4),0 4px 12px -6px rgba(2,37,79,.15)}
.iv-toast b{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink)}
.iv-ok{display:block;width:14px;height:14px;border-radius:50%;background:var(--green);position:relative}
.iv-ok::after{content:"";position:absolute;left:5px;top:3px;width:3px;height:6px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg)}
.iv-toast small{display:block;margin:6px 0 10px;font-size:12.5px;line-height:1.45;color:var(--mute)}
.iv-toast span{display:flex;gap:8px}
.iv-toast em{padding:5px 12px;border-radius:8px;font-size:12px;font-style:normal;color:var(--mute)}
.iv-toast em.on{background:var(--blue);color:#fff;font-weight:600}

@media (max-width:991px){ .iv{--s:.64} }
@media (max-width:767px){ .iv{--s:.38} }
@media (max-width:479px){ .iv{--s:.25} }

/* the report window at 80% inside the full-size pale stage (desktop); on phones the
   whole stage is already small, so the window fills it as before */
.iv-win{transform:scale(.8);transform-origin:50% 50%}
@media (max-width:767px){ .iv-win{transform:none} }